ドット絵エディタ改の改の改 by 雪乃☆雫

▶ 実行
#-------------------------------------------------------------------
# ドット絵エディタ改の改の改
#-------------------------------------------------------------------

＃-----初期設定----------
＃＃サイズ
ドット列数＝16。//ドット数（横）
ドット行数＝16。//ドット数（縦）
キャンバス幅=400 # ←キャンバスの大きさ
もしクライアント幅＜キャンバス幅ならば、ドット幅＝INT(クライアント幅/ドット列数)
違えば、ドット幅＝INT(キャンバス幅÷ドット列数)
キャンバス幅＝ドット列数*ドット幅。//列数を変えても余白を出さないように。
キャンバス高さ＝ドット幅*ドット行数。

＃＃フラグ
マウスフラグ＝オフ。
画像保存形式＝1。//0=バラバラ。1=横につなげる。
編集中ドット絵＝1。
枚数＝1。

＃＃パレット
パレット数＝8。//パレット数変えられます。パレットデータが空の部分は黒色になる。
初期パレット＝["#000000","#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#999999"]。//「#RRGGBB」形式のみ。
パレットデータ＝初期パレットを配列複製。
ペンモード＝1。//0に透明を設定しているので、1がパレットデータ[0]になる。
描画色データ＝パレットデータ[ペンモード-1]で描画色データ作成。

＃＃グリッド
グリッド＝オン。
グリッド色＝「#DDDDDD」

＃＃データ
ドット絵データ＝空配列。
描画データ＝空配列。
保存用データ＝空オブジェクト。

＃＃---データ初期化----------
//「ドット絵エディタ自動保存データ」をローカルストレージキー削除。
＃＃＃ローカルストレージ読む
もし、「ドット絵エディタ自動保存データ」が存在するならば、
　「ドット絵エディタ自動保存データ」を開いて保存用データに代入。
　パレットデータ＝保存用データ["パレットデータ"]
　ドット絵データ＝保存用データ["ドット絵データ"][0]
　枚数＝保存用データ["ドット絵データ"]の要素数。
違えば、
　保存用データ["パレットデータ"]＝パレットデータ。
　保存用データ["ドット絵データ"]＝空配列。
　データ初期化処理。
　保存用データ["ドット絵データ"][0]＝ドット絵データ。
ここまで。

●データ初期化処理とは
　　Yを0から(ドット行数-1)まで繰り返す
　　　　ドット絵データ[Y]＝空配列。
　　　　Xを0から(ドット列数-1)まで繰り返す
　　　　　　ドット絵データ[Y][X]＝0。
　　　　ここまで。
　　ここまで。
　　(ドット列数*ドット行数*4)回
　　　　描画データ[回数-1]＝0。
　　ここまで。
ここまで。

# 「#RRGGBB」を[r,g,b,a]にする。
●(描画色で)描画色データ作成
　色は描画色をRGB分解。
　色は色に255を配列追加。
　色で戻る。
ここまで。

＃-----UI作成/スタイル/イベント設定----------
DOM親要素に『<style>
.nako3_div > button {
  margin: 4px;
  padding: 4px 4px 0px;
  font-size: 0.9em;
}
</style>』をHTML設定。

＃＃---エディタ設定----------
ドット絵エディタは描画中キャンバス。
　ドット絵エディタを[キャンバス幅,キャンバス高さ]にキャンバスサイズ設定。

＃＃---パレット作成----------
パレット＝空配列。
パレット数回
　　パレット[回数]＝パレットデータ[回数-1]のパレット作成。
ここまで。
ペンモードのパレット点灯。
パレット数回
　　「●描画色変更{回数}{改行}　　{回数}で描画色変更。{改行}ここまで。」をナデシコする。
　　パレット[回数]の「onclick」に「描画色変更{回数}」をDOMイベント設定。
ここまで。

//ナデシコするを使うと、なぜかDOM親要素がbodyに変わっちゃうみたい？
「#nako3_div」へDOM親要素設定。

# 消ボタン（透明）
パレット[0]＝白色のパレット作成。
　パレット[0]に{
　　マージン: "4px 16px",
　　"background-image": "linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%),
                         linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%)",
    "background-position": "0 0, 6px 6px",
    "background-size": "12px 12px",
　}をDOMスタイル一括設定。//divの背景を市松にするCSS
改行作成。

●(色の)パレット作成
　　IDとは変数＝「nadesi-dom-{DOM生成個数}」。
　　DOM生成個数＝DOM生成個数+1。
　　ELとは変数＝「div」のDOM要素作成。
　　ELに{
　　　マージン: "4px",
　　　幅: "28px",
　　　高さ: "28px",
　　　ボックス表示: "inline-block",
　　　背景色: 色,
　　　ボーダー: "solid 1px {灰色}",
　　　"border-radius": "14px",
　　}をDOMスタイル一括設定。
　　もし、クライアント幅＜400ならば、
　　　　ELに{
　　　　　幅: "24px",
　　　　　高さ: "24px",
　　　　　"border-radius": "12px",
　　　}をDOMスタイル一括設定。
　　ここまで。
　　ELの「id」にIDをDOM属性設定。
　　DOM親要素へELをDOM子要素追加。
　　ELで戻る。
ここまで。

●(Noの)パレット点灯
　パレット[No]の「box-shadow」に「0 0 2px 2px #FFCC66, 0 0 4px 4px #FFEE99, 0 0 8px 8px #FFFF99」をDOMスタイル設定。
ここまで。

●パレット消灯
　（パレット数＋１）回
　　パレット[回数-1]の「box-shadow」に「なし」をDOMスタイル設定。
　ここまで。
ここまで。

＃＃---パレットの色変更----------
「パレット変更：」のラベル作成。
色選択ボタン＝パレットデータ[0]の色入力欄作成。
　色選択ボタンの「onchange」に「パレット変更」をDOMイベント設定。

●パレット変更
　パレットデータ[ペンモード-1]＝色選択ボタンの「value」をDOM属性取得。
　描画色データ＝パレットデータ[ペンモード-1]で描画色データ作成。
　パレット[ペンモード]の「背景色」にパレットデータ[ペンモード-1]をDOMスタイル設定。
　描画データ書き換え。
ここまで。
「｜」のラベル作成。

＃＃---グリッド---------
枠ボタン＝「グリッド」のボタン作成
　枠ボタンをクリックした時には
　　もし、グリッドならば、グリッド＝オフ。
　　違えば、グリッド＝オン。
　　データ描画。
　ここまで。
改行作成。

＃＃---クリア----------
クリアボタン＝「クリア」のボタン作成。
　クリアボタンをクリックした時には
　　「編集中の画像をクリアします。
本当にクリアしますか？」と二択。
　　もし、それがはいならば、
　　　　データ初期化処理。
　　　　データ描画。
　　ここまで。
　ここまで。
全クリアボタン＝「全クリア」のボタン作成。
パレット初期化ボタン＝「パレット初期化」のボタン作成。
　パレット初期化ボタンをクリックした時には、
　　「パレットを初期化します。
本当に初期化しますか？」と二択。
　　もし、それがはいならば、
　　　パレットデータは初期パレットを配列複製。
　　　パレット更新。
　　　描画データ書き換え。
　　ここまで。
　ここまで。
改行作成。

＃＃---プレビュー----------
「プレビュー：」のラベル作成。
プレビュー＝[ドット列数,ドット行数]のキャンバス作成。
　プレビューの「ボーダー」に「solid #DDDDDD 4px」をDOMスタイル設定。
　プレビューの「border-radius」に「4px」をDOMスタイル設定。
　プレビューの「マージン」に「4px 8px -8px 8px」をDOMスタイル設定。
「｜」のラベル作成。

＃＃---セレクト----------
セレクト配列＝空配列。
枚数回。セレクト配列[回数-1]＝回数。ここまで。
編集画像選択＝セレクト配列のセレクトボックス作成。
　編集画像選択の「幅」に「80px」をDOMスタイル設定。
　編集画像選択の「onchange」に「編集画像変更」をDOMイベント設定。

●編集画像変更
　自動保存。
　編集中ドット絵＝編集画像選択の「value」をDOM属性取得。
　ドット絵データ＝保存用データ["ドット絵データ"][編集中ドット絵-1]
　描画データ書き換え。
ここまで。

＃＃---画像追加----------
画像追加ボタン＝「＋」のボタン作成。
改行作成。

＃＃---テスト-----------
テストボタン＝「アニメ」のボタン作成。
「｜」のラベル作成。

＃＃---データ保存----------
保存ボタン＝「画像保存」のボタン作成。
テキストボタン＝「テキスト保存」のボタン作成。
　テキストボタンをクリックした時には
　　テキスト＝「パレットデータ＝{パレットデータをJSONエンコード}{改行}」
　　枚数回
　　　テキストはテキストに「ドット絵_{回数}＝」を追加。
　　　保存用データ["ドット絵データ"][回数-1]をJSONエンコードして、「],」を「],」&改行に置換して、「[[」を「[{改行}[」に置換。
　　　テキストはそれをテキストに一行追加。
　　ここまで。
　　テキストをクリップボード設定。
　　テキストはテキストの０に「以下の内容でクリップボードにコピーしました。{改行}{改行}」を文字挿入。
　　テキストを言う。
　ここまで。
改行作成。

＃＃---読み込み----------
パレット読込ボタン＝「パレット読込み」のボタン作成。
ドット絵読込ボタン＝「ドット絵読込み」のボタン作成。
　ドット絵読込ボタンをクリックした時には、
　　「ドット絵データ」を尋ねる。
　　ドット絵データはそれをJSONデコード。
　　描画データ書き換え。
　ここまで。
改行作成。

＃＃---保存用キャンバス----------
保存用キャンバス＝[ドット列数*枚数,ドット行数]のキャンバス作成。
　保存用キャンバスをオフに可視設定。//オンにすれば繋がった画像を確認出来る。
　保存用キャンバスの「ボーダー」に「solid #DDDDDD 2px」をDOMスタイル設定。
　保存用キャンバス書き換え。
　編集中ドット絵＝1。
　ドット絵データ＝保存用データ["ドット絵データ"][編集中ドット絵-1]
　
●保存用キャンバス書き換え
　枚数回
　　編集中ドット絵＝回数。
　　ドット絵データ＝保存用データ["ドット絵データ"][編集中ドット絵-1]
　　描画データ書き換え。
　ここまで。
ここまで。
改行作成。


＃-----UIイベント設定----------
//イベント内で他のUIを操作する時は、関数でも作成した後に書かないとダメ。
＃＃透明パレットについて
パレット[0]をクリックした時には
　　ペンモード＝０。
　　描画色データは[0,0,0,0]
　　パレット消灯。0のパレット点灯。
　　色選択ボタンの「value」に「#F0F0F0」をDOM属性設定。
　　色選択ボタンをオンに無効化設定。
ここまで。

＃＃保存ボタンについて（画像保存）
保存ボタンをクリックした時には
　もし、画像保存形式＝0ならば、
　　プレビューへ描画開始。
　違えば、もし、画像保存形式＝1ならば、
　　保存用キャンバスへ描画開始。
　ここまで。
　　描画ダウンロード
　　ドット絵エディタへ描画開始。
ここまで。

＃＃画像追加ボタンについて
画像追加ボタンをクリックした時には
　自動保存。
　枚数＝枚数＋１。
　編集中ドット絵＝枚数。
　編集画像選択に枚数をセレクトアイテム追加。
　保存用データ["ドット絵データ"][枚数-1]＝ドット絵データを配列複製。
　ドット絵データ＝保存用データ["ドット絵データ"][枚数-1]
　データ初期化処理。
　描画データ書き換え。
　保存用キャンバスを[ドット列数*枚数,ドット行数]にキャンバスサイズ設定。
　保存用キャンバス書き換え。
ここまで。

＃＃パレット読込ボタンについて
パレット読込ボタンをクリックした時には、
　　「パレットデータ」を尋ねる。
　　パレットデータはそれをJSONデコード。
　　パレット更新。
　　描画データ書き換え。
　　保存用キャンバス書き換え。
ここまで。
　
＃＃全クリアボタンについて
全クリアボタンをクリックした時には
　　「全ての画像をクリアします。
本当にクリアしますか？」と二択。
　　もし、それがはいならば、
　　　　全データ初期化処理。
　　　　データ描画。
　　　　保存用キャンバスへ描画開始。
　　　　全描画クリア。
　　　　ドット絵エディタへ描画開始。
　　ここまで。
ここまで。

＃＃テストボタンについて（アニメ）
テストカウンタ＝0。
テストボタンをクリックした時には
　テストカウンタ＝0。
　プレビューへ描画開始。
　１秒毎には
　　　全描画クリア。
　　　C=テストカウンタ%枚数。
　　　保存用キャンバスの[C*ドット列数,0,ドット列数,ドット列数]を[0,0,ドット列数,ドット列数]に画像部分描画。
　　　テストカウンタ=テストカウンタ+1。
　　　もし、テストカウンタ＞枚数*3ならば、
　　　　全タイマー停止。全描画クリア。
　　　　保存用キャンバスの[(編集中ドット絵-1)*ドット列数,0,ドット列数,ドット列数]を[0,0,ドット列数,ドット列数]に画像部分描画。
　　　　ドット絵エディタへ描画開始。
　　　ここまで。
　ここまで。
ここまで。

●(Noで)描画色変更
　ペンモード＝No。
　描画色データ＝パレットデータ[No-1]で描画色データ作成。
　パレット消灯。Noのパレット点灯。
　色選択ボタンをオフに無効化設定。
　色選択ボタンの「value」にパレットデータ[No-1]をDOM属性設定。
ここまで。

＃-----マウスイベント設定----------
//ナデシコするの後で設定しないと無効になるみたい？
ドット絵エディタのマウス押した時には
　　マウスフラグ＝オン
　　X=INT(マウスX÷ドット幅)。
　　Y=INT(マウスY÷ドット幅)。
　　もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止
　　もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止
　　ドット絵データ[Y][X]＝ペンモード。
　　４回。
　　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。
　　ここまで。
　　データ描画。
ここまで。
ドット絵エディタのマウス離した時には
　　マウスフラグオフ。
ここまで。
ドット絵エディタの「onmouseout」に「マウスフラグオフ」をDOMイベント設定。//外に出た時
ドット絵エディタのマウス移動した時には
　　もし、マウスフラグ＝オフならば、戻る。
　　X=INT(マウスX÷ドット幅)
　　Y=INT(マウスY÷ドット幅)
　　もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止
　　もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止
　　ドット絵データ[Y][X]＝ペンモード。
　　４回。
　　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。
　　ここまで。
　　データ描画。
ここまで。

●マウスフラグオフ
　マウスフラグ＝オフ。
ここまで。

＃-----タッチイベント設定----------
ドット絵エディタのタッチ開始した時には(E)
　EのDOMイベント処理停止。
　　マウスフラグ＝オン
　　X=INT(タッチX÷ドット幅)。
　　Y=INT(タッチY÷ドット幅)。
　　もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止
　　もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止
　　ドット絵データ[Y][X]＝ペンモード。
　　４回。
　　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。
　　ここまで。
　　データ描画。
ここまで。
ドット絵エディタをタッチした時には
　　もし、マウスフラグ＝オフならば、戻る。
　　X=INT(タッチX÷ドット幅)
　　Y=INT(タッチY÷ドット幅)
　　もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止
　　もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止
　　ドット絵データ[Y][X]＝ペンモード。
　　４回。
　　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。
　　ここまで。
　　データ描画。
ここまで。
ドット絵エディタのタッチキャンセル時には
　　マウスフラグオフ。
ここまで

＃-----開始----------
描画データ書き換え。

＃-----関数-----------
●データ描画とは
　1に線太設定。
　(ドット列数*ドット行数)回
　　　No=回数-1。A＝描画データ[No*4+3]。
　　　XX＝No%ドット列数。
　　　YY＝(No/ドット列数)を切捨て。
　　　もし、A＝０ならば、
　　　　白色に塗り色設定。
　　　　もし、グリッド＝オンならば、グリッド色に線色設定。
　　　　[XX*ドット幅,YY*ドット幅,ドット幅,ドット幅]に四角描画。
　　　　「#F0F0F0」に塗り色設定。空に線色設定。
　　　　[XX*ドット幅,YY*ドット幅+ドット幅/2,ドット幅/2,ドット幅/2]に四角描画。
　　　　[XX*ドット幅+ドット幅/2,YY*ドット幅,ドット幅/2,ドット幅/2]に四角描画。
　　　違えば、
　　　　RGB値＝空配列。
　　　　３回。RGB値[回数-1]＝描画データ[No*4+(回数-1)]。ここまで。
　　　　RGB値はRGB値を「,」で配列結合。
　　　　「rgba({RGB値})」に塗り色設定。
　　　　もし、グリッド＝オンならば、グリッド色に線色設定。
　　　　違えば、空に線色設定。
　　　　[XX*ドット幅,YY*ドット幅,ドット幅,ドット幅]に四角描画。
　　　ここまで
　ここまで。
　自動保存。
　プレビューへ描画開始。
　[0,0,ドット列数,ドット行数]に描画データで描画処理反映。
　保存用キャンバスへ描画開始。
　[ドット列数*(編集中ドット絵-1),0,ドット列数,ドット行数]に描画データで描画処理反映。
　ドット絵エディタへ描画開始。
ここまで。

●描画データ書き換え
　(ドット列数*ドット行数)回
　　No=回数-1。
　　X＝No%ドット列数。
　　Y＝(No/ドット列数)を切捨て。
　　もし、ドット絵データ[Y][X]＝0ならば、色データは[0,0,0,0]
　　違えば、色データは、パレットデータ[ドット絵データ[Y][X]-1]で描画色データ作成。
　　４回。
　　　　描画データ[No*4+回数-1]＝色データ[回数-1]。
　　ここまで。
　ここまで。
　データ描画。
ここまで。

●パレット更新
　　(パレットデータの要素数)回
　　　　パレット[回数]の「背景色」にパレットデータ[回数-1]をDOMスタイル設定。
　　ここまで。
　　色選択ボタンの「value」にパレットデータ[ペンモード-1]をDOM属性設定。
　　描画色データ＝パレットデータ[ペンモード-1]で描画色データ作成。
ここまで。

●自動保存
　保存用データ["パレットデータ"]＝パレットデータ。
　保存用データ["ドット絵データ"][編集中ドット絵-1]＝ドット絵データ。
　保存用データを「ドット絵エディタ自動保存データ」に保存。
ここまで。

●全データ初期化処理
　　データ初期化処理。
　　保存用データ["ドット絵データ"]＝空配列。
　　保存用データ["ドット絵データ"][0]＝ドット絵データを配列複製。
　　枚数＝1。編集中ドット絵＝1。
　　編集画像選択に[1]をセレクトアイテム再設定。
　　保存用キャンバスを[ドット列数,ドット行数]にキャンバスサイズ設定。

ここまで。

＃-----汎用関数------------------------------------------
//「#RRGGBB」→[R,G,B]
// HTMLの16進カラーコード(#RRGGBB)を256色の配列[R,G,B]に分解。
●(色を|色の)RGB分解
　分色とは変数。分色＝空配列。
　色＝色の「#」を「0x」に置換。
　色＝色を整数変換。
　数を２から０まで繰り返す
　　分色[数]＝色%256。
　　色＝(色-分色[数])/256
　ここまで。
　分色で戻る。
ここまで。
●(xywhを色データで|xywhに)描画処理反映
「(function (color){波カッコ}
const img = sys.__ctx.getImageData({xywh[0]}, {xywh[1]}, {xywh[2]},{xywh[3]});
let data = img.data;
for (let i=0; i<data.length;i++){波カッコ}data[i]=color[i]{波カッコ閉じ}
sys.__ctx.putImageData(img,{xywh[0]}, {xywh[1]});
{波カッコ閉じ})」を[色データ]でJS関数実行。
ここまで。
#-----------------------------------------------
//valueに設定出来るのは「#RRGGBB」形式のみ。省略は黒色。
●(色の)色入力欄作成
　　IDとは変数＝「nadesi-dom-{DOM生成個数}」。
　　DOM生成個数＝DOM生成個数+1。
　　ELとは変数＝「input」のDOM要素作成。
　　ELの「type」に「color」をDOM属性設定。
　　ELの「value」に色をDOM属性設定。
　　ELの「id」にIDをDOM属性設定。
　　DOM親要素へELをDOM子要素追加。
　　ELで戻る。
ここまで。
●(WHで|WHの)キャンバス作成
　　Wとは変数＝WH[0]。Hとは変数＝WH[1]。
　　IDとは変数＝「nadesi-dom-{DOM生成個数}」。
　　DOM生成個数＝DOM生成個数+1。
　　ELとは変数＝「canvas」のDOM要素作成。
　　ELの「width」にWをDOM属性設定。　　　//属性設定の時は、和スタイルが使えない。
　　ELの「height」にHをDOM属性設定。
　　ELの「幅」に「{W}px」をDOMスタイル設定。
　　ELの「高さ」に「{H}px」をDOMスタイル設定。
　　ELの「id」にIDをDOM属性設定。
　　DOM親要素へELをDOM子要素追加。
　　ELで戻る。
ここまで。
//canvasは、属性とスタイルと、両方の幅と高さを合わせて設定しておかないと、なにかと変なことになるので気を付ける。
●(canvasをWHに)キャンバスサイズ設定
　　Wとは変数＝WH[0]。Hとは変数＝WH[1]。
　　canvasの「width」にWをDOM属性設定。
　　canvasの「height」にHをDOM属性設定。
　　canvasの「幅」に「{W}px」をDOMスタイル設定。
　　canvasの「高さ」に「{H}px」をDOMスタイル設定。
ここまで。
#-----------------------------------------------
●(AにSを)セレクトアイテム追加
　　EL=「option」のDOM要素作成。
　　ELにSをテキスト設定。
　　ELの「value」にSをDOM属性設定。
　　ELの「selected」に「true」をDOM属性設定。
　　AへELをDOM子要素追加。
ここまで。
●(Aの)セレクトアイテム全削除
　IDとは変数＝Aの「id」をDOM属性取得。ID=「#{ID}」
　OPTIONとは変数＝「{ID} option」のDOM要素全取得。
　OPTIONを反復
　　AにDOM親要素設定。
　　対象をDOM子要素削除。
　ここまで。
ここまで。
●(AにOPTIONを)セレクトアイテム再設定
　Aのセレクトアイテム全削除。
　IDとは変数＝Aの「id」をDOM属性取得。
　(OPTIONの要素数)回
　　EL＝「option」をDOM要素作成。
　　ELにOPTION[回数-1]をテキスト設定。
　　ELの「value」にOPTION[回数-1]をDOM属性設定。
　　ELの「id」に「{ID}_{回数-1}」をDOM属性設定。
　　AにDOM親要素設定。
　　ELをDOM子要素追加。
　ここまで。
ここまで。
#-----------------------------------------------
●(DOMをAに)無効化設定
　　もし、A＝オンならば
　　　　DOMの「disabled」にオンをDOM属性設定。
　　違えば、
　　　　DOMの「disabled」にオフをDOM属性設定。
　　ここまで。
ここまで。
●(DOMをAに)可視設定
　　もし、A=オンならば
　　　　DOMの「opacity」にオンをDOMスタイル設定。
　　違えば、
　　　　DOMの「opacity」にオフをDOMスタイル設定。
　　ここまで。
ここまで。
#-----------------------------------------------
●クライアント幅
　　「document.documentElement.clientWidth」をJS実行。
ここまで。
#-----------------------------------------------------------------------