[編集モード] ドット絵エディタ改々……

雪乃☆雫さんの「ドット絵エディタ改の改の改」をちょとだけ改造したもの。機能の改造の前準備で内部の実装構造を大幅に整理。ファイル読み込み対応。サイズの自由化。指定パレットを透明パレットに一括置換する機能追加。ついでに3.6.7対応。

#-------------------------------------------------------------------
# ドット絵エディタ改の改の改
#-------------------------------------------------------------------
!「https://n3s.nadesi.com/plain/752.js」を取り込む
＃-----初期設定----------
＃＃サイズ
サイズ配列とは定数＝[8,16,32,48,64]
キャンバス基準幅とは定数=1200 # ←キャンバスの標準の大きさ
キャンバス基準高さとは定数=400 # ←キャンバスの標準の大きさ
キャンバス幅とは変数
キャンバス高さとは変数
ドット列数とは変数//ドット数（横）
ドット行数とは変数//ドット数（縦）
ドット幅とは変数
クライアント幅とは変数
クライアント高さとは変数

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

＃＃パレット
初期パレットとは定数＝["#000000","#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#999999","#ffffff"]。//「#RRGGBB」形式のみ。

＃＃パレット関連のワーク変数
パレット数とは変数。//パレットに表示しているパレット数。UI部品の書き換えの際に調整される。
パレットデータとは変数。
ペンモードとは変数。//0に透明を設定しているので、1がパレットデータ[0]になる。
描画色データとは変数。

＃＃グリッド
グリッドとは変数＝オン。
グリッド色とは変数＝「#DDDDDD」

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

＃＃エディタ設定用部品変数
ドット絵エディタとは変数

＃＃パレット用部品変数
パレット枠とは変数
パレットとは変数。
色選択ボタンとは変数。
追加色選択ボタンとは変数

＃＃グリッド用部品変数
枠ボタンとは変数

＃＃クリア用部品変数
クリアボタンとは変数
全クリアボタンとは変数
パレット初期化ボタンとは変数

＃＃プレビュ用部品変数
プレビューとは変数

＃＃セレクト用変数
編集画像選択とは変数

＃＃画像追加用部品変数
画像追加ボタンとは変数

＃＃テスト用部品変数
テストボタンとは変数

＃＃データ保存用部品変数
保存ボタンとは変数
テキストボタンとは変数

＃＃読み込み用部品変数
パレット読込ボタンとは変数
ドット絵読込ボタンとは変数

＃＃APNG確認ボタン用部品変数
確認ボタンとは変数

＃＃保存用キャンバス用部品変数
保存用キャンバスとは変数

＃＃テスト用ワーク変数
テストカウンタとは変数

＃＃APNG確認ボタン用ワーク変数
確認カウンタとは変数
確認画像リストとは変数

＃＃DOM生成命令用ワーク変数
DOM生成個数とは変数

＃＃---データ初期化----------
//「ドット絵エディタ自動保存データ」をローカルストレージキー削除。
＃＃＃ローカルストレージ読む
●保存データチェック
　一時データとは変数
　復旧成功とは変数＝オフ
　もし、「ドット絵エディタ自動保存データ」が存在するならば、
　　「ドット絵エディタ自動保存データ」を開いて一時データに代入。
　　一時ドット絵とは変数＝一時データ["ドット絵データ"][0]
　　一時行数とは変数＝一時ドット絵の配列要素数。
　　一時列数とは変数＝一時ドット絵[0]の配列要素数。
　　[一時列数,一時行数]でサイズ再計算する。
　　復旧成功＝オン
　ここまで。
　もし、復旧成功ならば、
　　保存用データ＝一時データ
　　パレットデータ＝保存用データ["パレットデータ"]
　　ドット絵データ＝保存用データ["ドット絵データ"][0]
　　ペンモード＝1。
　　描画色データ＝パレットデータ[ペンモード-1]で描画色データ作成。
　　枚数＝保存用データ["ドット絵データ"]の要素数。
　違えば、
　　パレットデータ＝初期パレットを配列複製。
　　ペンモード＝1。
　　描画色データ＝パレットデータ[ペンモード-1]で描画色データ作成。
　　保存用データ["パレットデータ"]＝パレットデータ。
　　保存用データ["ドット絵データ"]＝空配列。
　　[16,16]でサイズ再計算する
　　データ初期化処理。
　　保存用データ["ドット絵データ"][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;
}
div.drop-target {
  margin: 2px auto;
  width: 10rem;
  height: 1.5rem;
  border: 3px solid #333;
  display: inline-block;
}
div.palette-area {
  width: 90%;
  height: auto;
  margin: 2px;
}
.palette-focus {
  box-shadow: 0 0 2px 2px #FFCC66, 0 0 4px 4px #FFEE99, 0 0 8px 8px #FFFF99
}
</style>』をHTML設定。
ここまで

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

＃＃---パレット作成----------
●全パレット部品作成
　パレット枠＝「DIV」のDOM部品作成
　パレット枠に「palette-area」をDOMクラス追加
　パレット枠の「onclick」に{関数}パレット枠クリックをDOMイベント設定。
　親部品退避とは変数＝DOM親要素
　パレット枠にDOM親要素設定
　パレット＝空配列。
　パレット数＝パレットデータの配列要素数
　パレット数回
　　パレット[回数]＝パレットデータ[回数-1]のパレット作成。
　　パレット[回数]の「data-index」に回数をDOM属性設定。
　ここまで。
　ペンモードのパレット点灯。
　パレット[0]＝無色パレット作成
　パレット[0]の「data-index」に「0」をDOM属性設定。
　# パレット[0]を{関数}透明パレットクリックでクリックした時。
　親部品退避にDOM親要素設定
ここまで

●描画色変更クリック
　EVTはWINDOW["event"]
　番号はEVT["target"]の「data-index」をDOM属性取得。
　番号で描画色変更。
ここまで。

●(EVT)パレット枠クリック
　番号はEVT["target"]の「data-index」をDOM属性取得。
　もし、番号ならば、
　　番号で描画色変更。
　ここまで。
ここまで。

●無色パレット作成
　無色パレットとは変数＝白色のパレット作成。
　無色パレットに{
　　マージン: "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]に「palette-focus」をDOMクラス追加。
ここまで。

●パレット消灯
　（パレット数＋１）回
　　パレット[回数-1]から「palette-focus」をDOMクラス削除。
　ここまで。
ここまで。

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

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

＃＃---パレットの色追加----------
●パレット色追加部品作成
　「パレット追加：」のラベル作成。
　追加色選択ボタン＝「#FFFFFF」の色入力欄作成。
　追加色選択ボタンの「onchange」に{関数}パレット追加をDOMイベント設定。
ここまで

●パレット追加
　一時パレットデータとは変数＝追加色選択ボタンの「value」をDOM属性取得。
　親部品退避とは変数＝DOM親要素
　パレット枠にDOM親要素設定
　パレット数＝パレット数＋１
　パレットデータ[パレット数-1]＝一時パレットデータ
　パレット[パレット数]＝パレットデータ[パレット数-1]のパレット作成。
　パレット[パレット数]の「data-index」にパレット数をDOM属性設定。
　『(function(p,el,ref){p.insertBefore(el,ref)})』を[DOM親要素,パレット[パレット数],パレット[0]]でJS関数実行
　親部品退避にDOM親要素設定
　描画データ書き換え。
ここまで。

＃＃---パレットの色追加----------
●透明変換部品作成
　透明変換ボタン＝「透明変換」のボタン作成
　透明変換ボタンを{関数}透明変換ボタンクリックでクリックした時
ここまで

●透明変換ボタンクリック
　もし、ペンモード＝０ならば、
　　0で戻る。
　ここまで。
　(ドット列数*ドット行数)回
　　Noとは変数＝回数-1。
　　Xとは変数＝No%ドット列数。
　　Yとは変数＝(No/ドット列数)を切捨て。
　　Cとは変数＝ドット絵データ[Y][X]
　　もし、C＝ペンモードならば、
　　　ドット絵データ[Y][X]＝0
　　ここまで
　ここまで。
　描画データ書き換え
ここまで。

＃＃---グリッド---------
●枠ボタン部品作成
　枠ボタン＝「グリッド」のボタン作成
　枠ボタンを{関数}グリッドボタンクリックでクリックした時
ここまで。

●グリッドボタンクリック
　もし、グリッドならば、グリッド＝オフ。
　違えば、グリッド＝オン。
　データ描画。
ここまで。

＃＃---クリア----------
●クリアボタン部品作成
　クリアボタン＝「クリア」のボタン作成。
　クリアボタンを{関数}クリア確認処理でクリックした時。
　全クリアボタン＝「全クリア」のボタン作成。
　全クリアボタンを{関数}全クリア確認処理でクリックした時。
　パレット初期化ボタン＝「パレット初期化」のボタン作成。
　パレット初期化ボタンを{関数}パレット初期化確認処理でクリックした時。
ここまで

●クリア確認処理
　「編集中の画像をクリアします。
本当にクリアしますか？」と二択。
　もし、それがはいならば、
　　クリア処理
　ここまで。
ここまで。

●クリア処理
　データ初期化処理。
　データ描画。
ここまで。

●全クリア確認処理
　「全ての画像をクリアします。
本当にクリアしますか？」と二択。
　もし、それがはいならば、
　　全クリア処理
　ここまで。
ここまで

●全クリア処理
　全データ初期化処理。
　データ描画。
　保存用キャンバスへ描画開始。
　全描画クリア。
　ドット絵エディタへ描画開始。
ここまで。

●パレット初期化確認処理
　「パレットを初期化します。
本当に初期化しますか？」と二択。
　もし、それがはいならば、
　　パレット初期化処理
　ここまで。
ここまで。

●パレット初期化処理
　パレットデータは初期パレットを配列複製。
　パレット更新。
　描画データ書き換え。
　保存用キャンバス書き換え。
ここまで。

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

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

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

＃＃---画像追加----------
●画像追加部品作成
　画像追加ボタン＝「＋」のボタン作成。
　画像追加ボタンを{関数}画像追加クリックでクリックした時
ここまで。

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

＃＃---テスト-----------
●テスト部品作成
　テストボタン＝「アニメ」のボタン作成。
　テストボタンを{関数}テストボタンクリックでクリックした時。
ここまで。

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

＃＃---データ保存----------
●データ保存部品作成
　保存ボタン＝「画像保存」のボタン作成。
　保存ボタンを{関数}保存クリックでクリックした時。
　テキストボタン＝「テキスト保存」のボタン作成。
　テキストボタンを{関数}テキストクリックでクリックした時。
ここまで。

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

＃＃---読み込み----------
●読み込み部品作成
　パレット読込ボタン＝「パレット読込み」のボタン作成。
　パレット読込ボタンを{関数}パレット読み込みクリックでクリックした時。
　ドット絵読込ボタン＝「ドット絵読込み」のボタン作成。
　ドット絵読込ボタンを{関数}ドット絵読み込みクリックでクリックした時。
ここまで。

●ドット絵読み込みクリック
　「ドット絵データ」を尋ねる。
　ドット絵データはそれをJSONデコード。
　描画データ書き換え。
ここまで。

＃＃---確認ボタン----------
＃確認ボタンについて（APNG形式ダウンロード）
●確認ボタン部品作成
　確認カウンタ＝０
　確認画像リスト＝空配列
　確認ボタン＝「APNG保存」のボタン作成。
　確認ボタンを{関数}確認クリックでクリックした時。
ここまで。

●確認クリック
　確認カウンタ＝０
　確認画像リスト＝空配列
　プレビューへ描画開始。
　確認画像切替処理。
ここまで。

＃支援関数
●(callbackにcanvasから)キャンバスBLOB取得時
　『(function(c,callback){c.toBlob(callback,"image/png")})』を[canvas,callback]でJS関数実行
ここまで

●(callbackにblobをtypeで)BLOB読込時
『(function(blob,type,callback){
  const fr=new FileReader();
  fr.onload=()=>{
    callback(fr.result);
    fr.onload=null;
  }
  if (type==='DataURL'){
    fr.readAsDataURL(blob);
  }else
  if (type==='ArrayBuffer'){
    fr.readAsArrayBuffer(blob);
  }else{
    throw new Error('invalid type');
  }
})』を[blob,type,callback]でJS関数実行
ここまで

●(bufをtypeでnameに)バッファダウンロード
『(function(buf,type,name){
  const link = document.createElement('a');
  link.download = name;
  const blob = new Blob([buf], {type: type});
  link.href = URL.createObjectURL(blob);
  link.click();
  URL.revokeObjectURL(link.href);
})』を[buf,type,name]でJS関数実行
ここまで

●確認画像切替処理
　全描画クリア。
　C=確認カウンタ。
　保存用キャンバスの[C*ドット列数,0,ドット列数,ドット列数]を[0,0,ドット列数,ドット列数]に画像部分描画。
　描画中キャンバスからキャンバスBLOB取得時には(blob)
　　blobを"ArrayBuffer"でBLOB読込時には(ar)
　　　arを確認画像追加処理
　　　確認カウンタは確認カウンタ＋１
　　　もし、確認カウンタ＜枚数ならば、
　　　　確認画像切替処理
　　　違えば
　　　　確認画像一括処理
　　　　ドット絵エディタへ描画開始。
　　　ここまで
　　ここまで
　ここまで
ここまで

●(bufを)確認画像追加処理
　PはbufからPNG読込
　確認画像リストにPを配列追加
ここまで

●確認画像一括処理
　最終画像はPNG作成
　初回画像はオン
　acTL退避＝「」
　IHDR退避＝「」
　連番は０
　確認画像リストを反復する
　　ココ＝それ
　　IDAT遭遇はオフ
　　もし、初回画像ならば
　　　(ココからPNGチャンク配列取得)を反復する
　　　　キキ＝それ
　　　　もし、キキ["chunkType"]＝"IHDR"ならば、
　　　　　最終画像にキキをPNGチャンク追加
　　　　　IHDR退避＝キキ
　　　　違えばもし、キキ["chunkType"]＝"gAMA"ならば、
　　　　　最終画像にキキをPNGチャンク追加
　　　　違えばもし、キキ["chunkType"]＝"sRGB"ならば、
　　　　　最終画像にキキをPNGチャンク追加
　　　　違えばもし、キキ["chunkType"]＝"PLTE"ならば、
　　　　　最終画像にキキをPNGチャンク追加
　　　　違えばもし、キキ["chunkType"]＝"sTRN"ならば、
　　　　　最終画像にキキをPNGチャンク追加
　　　　違えばもし、キキ["chunkType"]＝"IDAT"ならば、
　　　　　もし、IDAT遭遇でなければ、
　　　　　　チャンク＝"acTL"のPNGチャンク作成
　　　　　　チャンク["num_frames"]＝確認画像リストの配列要素数
　　　　　　チャンク["num_plays"]＝0
　　　　　　acTL退避＝チャンク
　　　　　　最終画像にチャンクをPNGチャンク追加
　　　　　　チャンク＝"fcTL"のPNGチャンク作成
　　　　　　チャンク["sequence_number"]＝連番
　　　　　　チャンク["width"]＝IHDR退避["width"]
　　　　　　チャンク["height"]＝IHDR退避["height"]
　　　　　　チャンク["x_offset"]＝0
　　　　　　チャンク["y_offset"]＝0
　　　　　　チャンク["delay_num"]＝100
　　　　　　チャンク["delay_den"]＝100
　　　　　　チャンク["dispose_op"]＝0
　　　　　　チャンク["blend_op"]＝0
　　　　　　最終画像にチャンクをPNGチャンク追加
　　　　　　連番は連番＋１
　　　　　　IDAT遭遇はオン
　　　　　ここまで
　　　　　最終画像にキキをPNGチャンク追加
　　　　ここまで
　　　ここまで
　　　初回画像はオフ
　　違えば、
　　　(ココからPNGチャンク配列取得)を反復する
　　　　キキ＝それ
　　　　もし、キキ["chunkType"]＝"IDAT"ならば、
　　　　　もし、IDAT遭遇でなければ、
　　　　　　チャンク＝"fcTL"のPNGチャンク作成
　　　　　　チャンク["sequence_number"]＝連番
　　　　　　チャンク["width"]＝IHDR退避["width"]
　　　　　　チャンク["height"]＝IHDR退避["height"]
　　　　　　チャンク["x_offset"]＝0
　　　　　　チャンク["y_offset"]＝0
　　　　　　チャンク["delay_num"]＝100
　　　　　　チャンク["delay_den"]＝100
　　　　　　チャンク["dispose_op"]＝0
　　　　　　チャンク["blend_op"]＝0
　　　　　　最終画像にチャンクをPNGチャンク追加
　　　　　　連番は連番＋１
　　　　　　IDAT遭遇はオン
　　　　　ここまで
　　　　　チャンク＝"fdAT"のPNGチャンク作成
　　　　　チャンク["sequence_number"]＝連番
　　　　　チャンク["imageRaw"]＝キキ["chunkRaw"]
　　　　　最終画像にチャンクをPNGチャンク追加
　　　　　連番は連番＋１
　　　　ここまで
　　　ここまで
　　ここまで
　ここまで
　チャンク＝"IEND"のPNGチャンク作成
　最終画像にチャンクをPNGチャンク追加
　最終画像からPNG取出を"image/png"で"image.png"にバッファダウンロード
ここまで

ドロップエリアとは変数
＃＃---ファイル読み込み----------
●ファイル読み込み部品作成
　ドロップエリア＝ファイルドロップ枠作成
　ドロップエリアに「画像FILEドロップ」をDOMテキスト設定
　ドロップエリアの「ondragover」に{関数}ドロップエリアオーバーをDOMイベント設定
　ドロップエリアの「ondrop」に{関数}ドロップエリアドロップをDOMイベント設定
ここまで。

●(E)ドロップエリアオーバー
　Eの"stopPropagation"を[]でJSメソッド実行。
　EのDOMイベント処理停止。
　E["dataTransfer"]["dropEffect"]＝「copy」
ここまで。

●(E)ドロップエリアドロップ
　Eの"stopPropagation"を[]でJSメソッド実行。
　EのDOMイベント処理停止。
　ファイルリストとは変数＝E["dataTransfer"]["files"]
　対象ファイルとは変数＝ファイルリスト[0]
　対象画像とは変数＝対象ファイルをファイルイメージ読み込み。
　対象幅とは変数＝対象画像の"width"をDOM属性取得
　対象高さとは変数＝対象画像の"height"をDOM属性取得
　もし、ドット列数≠対象幅||ドット行数≠対象高さならば、
　ここまで。
　一時CVとは変数＝「canvas」をDOM要素作成
　一時CVの"width"に対象幅をDOM属性設定
　一時CVの"height"に対象高さをDOM属性設定
　一時CTXとは変数＝一時CVの"getContext"を["2d"]でJSメソッド実行
　一時CTXの"drawImage"を[対象画像, 0, 0]でJSメソッド実行
　一時イメージとは変数＝一時CTXの"getImageData"を[0,0,対象幅,対象高さ]でJSメソッド実行
　一時データとは変数＝一時イメージ["data"]
　一時パレットとは変数＝空配列
　Iとは変数
　Xとは変数
　Yとは変数
　Cとは変数
　Aとは変数
　半透明使用とは変数＝オフ
　色数過多とは変数＝オフ
　(一時データの配列要素数)/4回
　　I＝回数-1
　　X＝I%対象幅
　　Y＝(I-X)/対象幅
　　A＝一時データ[I*4+3]
　　C＝一時データ[I*4+0]と一時データ[I*4+1]と一時データ[I*4+2]でRGB
　　もし、A>0&&A<255ならば、
　　　半透明使用＝オン
　　　抜ける
　　ここまで。
　　もし、A>0ならば、
　　　もし、(一時パレットからCを配列検索)<0ならば、
　　　　一時パレットにCを配列追加
　　　　もし、(一時パレットの配列要素数)>19ならば、
　　　　　色数過多＝オン
　　　　　抜ける
　　　　ここまで。
　　　ここまで。
　　ここまで。
　ここまで。
　もし、色数過多ならば、
　　「取り込むには色数が多すぎます。
透明除いて19色までです。」を言う。
　　戻る
　違えばもし、半透明使用ならば、
　　「半透明なところがあります。
完全不透明か完全透明である必要があります。」を言う。
　　戻る
　ここまで。
　[対象幅, 対象高さ]でサイズ再計算。
　サイズ変更反映。
　全データ初期化処理
　全クリア処理
　パレット番号とは変数
　(一時データの配列要素数)/4回
　　I＝回数-1
　　X＝I%対象幅
　　Y＝(I-X)/対象幅
　　A＝一時データ[I*4+3]
　　もし、A＝0ならば、
　　　パレット番号＝0
　　違えば、
　　　C＝一時データ[I*4+0]と一時データ[I*4+1]と一時データ[I*4+2]でRGB
　　　パレット番号＝一時パレットからCを配列検索＋１
　　ここまで。
　　ドット絵データ[Y][X]＝パレット番号
　ここまで。
　パレットデータ＝一時パレット
　パレット更新
　描画データ書き換え。
　保存用キャンバス書き換え。
ここまで。

●(Fを)ファイルイメージ読み込み
　ASYNC
『
(function(f) {
  const reader = new FileReader();
  const promise = new Promise((resolve, reject) => {
    reader.onload = () => {
      const result = reader.result;
      const img = new Image();
      img.onload = () => {
        resolve(img);
      };
      img.onerror = (err) => {
        reject(err);
      };
      img.src = result;
    };
    reader.onerror = (err) => {
      reject(err);
    };
    reader.readAsDataURL(f);
  });
  return promise;
})』を[F]でJS関数実行で戻る
ここまで。
＃＃---保存用キャンバス----------
●保存用キャンバス準備処理
　保存用キャンバス＝[ドット列数*枚数,ドット行数]のキャンバス作成。
　保存用キャンバスをオフに可視設定。//オンにすれば繋がった画像を確認出来る。
　保存用キャンバスの「ボーダー」に「solid #DDDDDD 2px」をDOMスタイル設定。
　保存用キャンバス書き換え。
　編集中ドット絵＝1。
　ドット絵データ＝保存用データ["ドット絵データ"][編集中ドット絵-1]
ここまで

●保存用キャンバス書き換え
　枚数回
　　編集中ドット絵＝回数。
　　ドット絵データ＝保存用データ["ドット絵データ"][編集中ドット絵-1]
　　描画データ書き換え。
　ここまで。
ここまで。

●サイズ変更反映
　ドット絵エディタを[キャンバス幅,キャンバス高さ]にキャンバスサイズ設定。
　プレビューを[ドット列数,ドット行数]にキャンバスサイズ設定。
ここまで。

＃-----UIイベント設定----------
//イベント内で他のUIを操作する時は、関数でも作成した後に書かないとダメ。
●(選択サイズに|選択サイズで)サイズ再計算
　ドット列数＝選択サイズ[0]
　ドット行数＝選択サイズ[1]
　クライアント幅＝クライアント幅取得
　キャンバス幅＝キャンバス基準幅
　キャンバス高さ＝キャンバス基準高さ
　もしクライアント幅＜キャンバス幅ならば、ドット幅＝INT(クライアント幅/ドット列数)
　違えば、ドット幅＝INT(キャンバス幅÷ドット列数)
　ドット高さとは変数＝INT(キャンバス高さ÷ドット行数)
　ドット幅＝[ドット幅,ドット高さ]の配列最小値
　キャンバス幅＝ドット列数*ドット幅。//列数を変えても余白を出さないように。
　キャンバス高さ＝ドット幅*ドット行数。
ここまで

＃＃透明パレットについて
●透明パレットクリック
　ペンモード＝０。
　描画色データは[0,0,0,0]
　パレット消灯。0のパレット点灯。
　色選択ボタンの「value」に「#F0F0F0」をDOM属性設定。
　色選択ボタンをオンに無効化設定。
ここまで。

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

＃＃パレット読込ボタンについて
●パレット読み込みクリック
　「パレットデータ」を尋ねる。
　パレットデータはそれをJSONデコード。
　パレット更新。
　描画データ書き換え。
　保存用キャンバス書き換え。
ここまで。

●(Noで)描画色変更
　ペンモード＝No。
　もし、ペンモード＝０ならば、
　　描画色データは[0,0,0,0]
　　色選択ボタンの「value」に「#F0F0F0」をDOM属性設定。
　　色選択ボタンをオンに無効化設定。
　違えば、
　　描画色データ＝パレットデータ[No-1]で描画色データ作成。
　　色選択ボタンをオフに無効化設定。
　　色選択ボタンの「value」にパレットデータ[No-1]をDOM属性設定。
　ここまで。
　パレット消灯。Noのパレット点灯。
ここまで。

＃-----マウスイベント設定----------
//ナデシコするの後で設定しないと無効になるみたい？
●マウス系イベント設定
　ドット絵エディタを{関数}ドットエディタマウス押すでマウス押した時。
　ドット絵エディタを{関数}マウスフラグオフでマウス離した時。
　ドット絵エディタの「onmouseout」に{関数}マウスフラグオフをDOMイベント設定。//外に出た時
　ドット絵エディタを{関数}ドット絵エディタマウス移動中でマウス移動した時。
ここまで

●ドットエディタマウス押す
　マウスフラグ＝オン
　X=INT(マウスX÷ドット幅)。
　Y=INT(マウスY÷ドット幅)。
　もし、X>ドット列数-1ならば、1で戻る。//右端ではみ出るの防止
　もし、Y>ドット行数-1ならば、1で戻る。//下端ではみ出るの防止
　ドット絵データ[Y][X]＝ペンモード。
　４回。
　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。
　ここまで。
　データ描画。
ここまで。

●ドット絵エディタマウス移動中
　もし、マウスフラグ＝オフならば、1で戻る。
　X=INT(マウスX÷ドット幅)
　Y=INT(マウスY÷ドット幅)
　もし、X>ドット列数-1ならば、1で戻る。//右端ではみ出るの防止
　もし、Y>ドット行数-1ならば、1で戻る。//下端ではみ出るの防止
　ドット絵データ[Y][X]＝ペンモード。
　４回。
　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。
　ここまで。
　データ描画。
ここまで。

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

＃-----タッチイベント設定----------
●タッチ系イベント設定
　ドット絵エディタを{関数}ドット絵エディタタッチ開始でタッチ開始した時。
　ドット絵エディタを{関数}ドット絵エディタタッチ中でタッチした時。
　ドット絵エディタを{関数}マウスフラグオフでタッチキャンセル時。
ここまで

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

●ドット絵エディタタッチ中
　もし、マウスフラグ＝オフならば、1で戻る。
　X=INT(タッチX÷ドット幅)
　Y=INT(タッチY÷ドット幅)
　もし、X>ドット列数-1ならば、1で戻る。//右端ではみ出るの防止
　もし、Y>ドット行数-1ならば、1で戻る。//下端ではみ出るの防止
　ドット絵データ[Y][X]＝ペンモード。
　４回。
　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。
　ここまで。
　データ描画。
ここまで

＃-----開始----------
●開始
　DOM生成個数＝1
　# 保存データのチェックとあるなら復元
　保存データチェック
　# スタイルの設定と元からあるキャンバスを設定
　使用スタイル設定
　ドット絵エディタ部品準備

# 各部品を配置
　全パレット部品作成
　改行作成。

パレット色追加部品作成
　パレット色変更部品作成
　区切り棒作成
　透明変換部品作成
　改行作成。
　クリアボタン部品作成
　枠ボタン部品作成
　改行作成。
　プレビュー部品作成
　区切り棒作成。
　画像セレクト部品作成
　画像追加部品作成
　改行作成。
　テスト部品作成
　区切り棒作成。
　データ保存部品作成
　改行作成。
　読み込み部品作成
　改行作成。
　確認ボタン部品作成
　ファイル読み込み部品作成
　改行作成。
　保存用キャンバス準備処理
　改行作成。
　# 描画画面へのイベント設定
　マウス系イベント設定
　タッチ系イベント設定
　# 内容を表示
　描画データ書き換え。
ここまで

＃-----関数-----------
# 描画データを編集用キャンバスに反映し、その後以下を行う。
# プレビューキャンバスと保存用キャンバスの更新
# 描画先を編集用キャンバスに戻す
●データ描画とは
　ドット絵エディタ描画。
　自動保存。
　プレビューへ描画開始。
　[0,0,ドット列数,ドット行数]に描画データで描画処理反映。
　保存用キャンバスへ描画開始。
　[ドット列数*(編集中ドット絵-1),0,ドット列数,ドット行数]に描画データで描画処理反映。
　ドット絵エディタへ描画開始。
ここまで。

●ドット絵エディタ描画
　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*ドット幅,ドット幅,ドット幅]に四角描画。
　　ここまで
　ここまで。
ここまで。

#ドット絵データを描画データに反映して描画データを用いてデータ描画する。
●描画データ書き換え
　描画データ更新
　データ描画。
ここまで。

●描画データ更新
　色データとは変数
　(ドット列数*ドット行数)回
　　Noとは変数＝回数-1。
　　Xとは変数＝No%ドット列数。
　　Yとは変数＝(No/ドット列数)を切捨て。
　　Cとは変数＝ドット絵データ[Y][X]
　　もし、C＝0ならば、
　　　色データ＝[0,0,0,0]
　　違えば、
　　　もし、C≦(パレットデータの配列要素数)ならば、
　　　　色データ＝パレットデータ[C-1]で描画色データ作成。
　　　違えば、
　　　　色データ＝"#000000"で描画色データ作成。
　　　ここまで。
　　ここまで。
　　４回。
　　　描画データ[No*4+回数-1]＝色データ[回数-1]。
　　ここまで。
　ここまで。
ここまで。

●パレット更新
　元パレット数とは変数＝パレットデータの配列要素数
　ループ数とは変数＝[元パレット数, パレット数]の配列最大値
　親部品退避とは変数＝DOM親要素
　パレット枠にDOM親要素設定
　ループ数回。
　　もし、回数≦パレット数ならば、
　　　もし、回数≦元パレット数ならば、
　　　　パレット[回数]の「背景色」にパレットデータ[回数-1]をDOMスタイル設定。
　　　違えば、
　　　　DOM親要素からパレット[回数]をDOM子要素削除。
　　　ここまで。
　　違えば、
　　　もし、回数≦元パレット数ならば、
　　　　パレット[回数]＝パレットデータ[回数-1]のパレット作成。
　　　　パレット[回数]の「data-index」に回数をDOM属性設定。
　　　　『(function(p,el,ref){p.insertBefore(el,ref)})』を[DOM親要素,パレット[回数],パレット[0]]でJS関数実行
　　　　# (パレット[回数])の「onclick」に{関数}描画色変更クリックをDOMイベント設定。
　　　違えば、
　　　　「元パレット数と更新パレット数の両方を超えるケースは発生し得ません。」でエラー発生。
　　　ここまで。
　　ここまで。
　ここまで。
　親部品退避にDOM親要素設定
　パレット数＝パレットデータの配列要素数
　もし、ペンモード＞パレット数ならば、
　　ペンモード＝１
　ここまで。
　ペンモードで描画色変更
ここまで。

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

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

＃-----汎用関数------------------------------------------
//「#RRGGBB」→[R,G,B]
// HTMLの16進カラーコード(#RRGGBB)を256色の配列[R,G,B]に分解。
●(色を|色の)RGB分解
　分色とは変数。分色＝空配列。
　色＝色の「#」を「0x」に置換。
　色＝色を整数変換。
　数を２から０まで繰り返す
　　分色[数]＝色%256。
　　色＝(色-分色[数])/256
　ここまで。
　分色で戻る。
ここまで。
●(xywhを色データで|xywhに)描画処理反映
『(function (ctx, xywh, color){
  const img = ctx.getImageData(xywh[0], xywh[1], xywh[2], xywh[3]);
  const data = img.data;
  for (let i=0; i<data.length;i++) {
    data[i]=color[i];
  }
  ctx.putImageData(img, xywh[0], xywh[1]);
})』を[描画中コンテキスト, xywh, 色データ]でJS関数実行。
ここまで。
#-----------------------------------------------
●ファイルドロップ枠作成
　IDとは変数＝「nadesi-dom-{DOM生成個数}」。
　DOM生成個数＝DOM生成個数+1。
　ELとは変数＝「div」のDOM要素作成。
　ELに"drop-target"をDOMクラス追加。
　ELの「id」にIDをDOM属性設定。
　DOM親要素へELをDOM子要素追加。
　ELで戻る。
ここまで。
//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}」
　OPTIONSとは変数＝「{ID} option」のDOM要素全取得。
　OPTIONでOPTIONSを反復
　　AからOPTIONをDOM子要素削除。
　ここまで。
ここまで。
●(AにOPTIONSを)セレクトアイテム再設定
　Aのセレクトアイテム全削除。
　IDとは変数＝Aの「id」をDOM属性取得。
　(OPTIONSの要素数)回
　　ELとは変数＝「option」をDOM要素作成。
　　ELにOPTIONS[回数-1]をテキスト設定。
　　ELの「value」にOPTIONS[回数-1]をDOM属性設定。
　　ELの「id」に「{ID}_{回数-1}」をDOM属性設定。
　　AにDOM親要素設定。
　　ELをDOM子要素追加。
　ここまで。
ここまで。
●区切り棒作成
　「｜」のラベル作成。
ここまで。
#-----------------------------------------------
●(ELにCを)DOMクラス追加
　EL["classList"]の"add"を[C]でJSメソッド実行。
ここまで。
●(ELにCが)DOMクラス存在
　EL["classList"]の"contains"を[C]でJSメソッド実行で戻る。
ここまで。
●(ELからCを)DOMクラス削除
　EL["classList"]の"remove"を[C]でJSメソッド実行。
ここまで。
●(DOMをAに)無効化設定
　もし、A＝オンならば
　　DOMの「disabled」にオンをDOM属性設定。
　違えば、
　　DOMの「disabled」にオフをDOM属性設定。
　ここまで。
ここまで。
●(DOMをAに)可視設定
　もし、A=オンならば
　　DOMの「opacity」にオンをDOMスタイル設定。
 違えば、
　　DOMの「opacity」にオフをDOMスタイル設定。
　ここまで。
ここまで。
#-----------------------------------------------
●クライアント幅取得
　DOCUMENT["documentElement"]["clientWidth"]で戻る
ここまで。
#-----------------------------------------------------------------------

開始する

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] ドット絵エディタ改々……

素材のアップロード