756.nako3

### [作品情報]
### 掲載URL=https://n3s.nadesi.com/id.php?756
### タイトル=画面構成を考える時使うやつ
### 作者=TKI(user_id=0)
### ライセンス=CC0
### 説明=ゲームやツールの画面構成を考える時に便利です
### 対象バージョン=3.2.27
### URL=
### 種類=wnako
### タグ=
### 更新日時=2021-10-18 18:33:43
###

//変数
キャンバス幅=描画中キャンバスの「幅」をDOM属性取得
キャンバス高=描画中キャンバスの「高」をDOM属性取得
始点=[]
追加回数=1

//部品
追加ボタン=「　　　追加　　　」のボタン作成。改行作成

「つかいかた：キャンバスをドラッグで四角を描いて追加ボタンを押す」のラベル作成
改行作成
追加エリア＝空のテキストエリア作成
追加エリアの「幅」に「300px」をDOMスタイル設定
追加エリアの「高」に「20px」をDOMスタイル設定
改行作成
「　↓　追加ボタンで座標を追加」のラベル作成。　改行作成

「[描画リスト]　（範囲名・座標の手動編集可）」のラベル作成。　改行作成
描画リスト＝「」のテキストエリア作成。　改行作成
描画リストの「幅」に「500px」をDOMスタイル設定
描画リストの「高」に「160px」をDOMスタイル設定

キャンバスサイズ変更ボタン=「キャンバスサイズ変更」のボタン作成


//部品ここまで
描画リスト描画
　
●描画リスト描画
　14に描画フォント設定
　cw=描画中キャンバスの「幅」をDOM属性取得
　ch=描画中キャンバスの「高」をDOM属性取得
　描画クリア
　RGB(240,240,250)に塗色設定
　[0,0,cw,ch]へ四角描画
　赤色に塗色設定
　[0+3,ch-3]へ「キャンバス {cw}x{ch}」を文字描画
　json=描画リストJSON
　jsonをJSONデコードして反復
　    空に塗色設定
　    対象へ四角描画
　    赤色に塗色設定
　    x,y,w,h=対象
　    対象キーを[x+3,y+h-3]へ文字描画
　ここまで
ここまで

//jsonを返す
●描画リストJSON
　list=描画リストのDOMテキスト取得してそれをトリム
　list=listの「]」を「],」に置換
　list=『{＠}』の『＠』をlistに単置換
　list=listの『],}』を『]}』に単置換　//最後
　listを戻す
ここまで


//イベント
描画中キャンバスのマウス押した時には
    描画リスト描画()
    始点=[マウスX,マウスY]
ここまで

描画中キャンバスのマウス離した時には
    xywh=[INT(始点[0]),INT(始点[1]),INT(マウスX-始点[0]),INT(マウスY-始点[1])]
    黄色に塗色設定
    xywhに四角描画
    追加エリアに「"枠{追加回数}":[{xywh}]」をテキスト設定
ここまで

追加ボタンをクリック時には
    txt=空
    txt=txtに(描画リストのテキスト取得)を一行追加
    txt=txtに(追加エリアのテキスト取得)を一行追加
    txt=txtをトリム
    描画リストへtxtをテキスト設定
    描画リスト描画()
    追加回数=追加回数+1
    追加エリアに空をテキスト設定
ここまで

キャンバスサイズ変更ボタンをクリック時には
　キャンバスサイズ変更尋
ここまで

●キャンバスサイズ変更尋
　cw=描画中キャンバスの「幅」をDOM属性取得
　ch=描画中キャンバスの「高」をDOM属性取得
　ans=「キャンバスの幅は？(現在：{cw})」と尋ねる
　もしansが空でなければcw=ans
　ans=「キャンバスの高さは？(現在：{ch})」と尋ねる
　もしansが空でなければch=ans
　[cw,ch]にキャンバスサイズ変更
ここまで

●(cwchに)キャンバスサイズ変更
　cw,ch = cwch
　描画中キャンバスの「幅」にcwをDOM属性設定
　描画中キャンバスの「高」にchをDOM属性設定
　描画リスト描画
ここまで