#3 サイズ変更

frontend/src/components/threads/ThreadCanvas.tsx

@@ -165,6 +165,19 @@ export default () => {
     })
   }
 
+  const clearCanvas = () => {
+    const layer: Layer = { id:      nanoid (),
+			   name:    `Layer 1`,
+			   lines:   [],
+			   history: [],
+			   future:  [] }
+    setLayers([layer])
+    setActiveLayerId (layer.id)
+    setLayerCnt (1)
+    setStageWidth (480)
+    setStageHeight (480)
+  }
+
   useEffect (() => {
     try
     {
@@ -176,14 +189,7 @@ export default () => {
     }
     catch
     {
-      const layer: Layer = { id:      nanoid (),
-			     name:    `Layer ${ layerCnt + 1 }`,
-			     lines:   [],
-			     history: [],
-			     future:  [] }
-      setLayers([layer])
-      setActiveLayerId (layer.id)
-      setLayerCnt (n => n + 1)
+      clearCanvas ()
     }
   }, [])
 
@@ -210,11 +216,7 @@ export default () => {
 	      if (!(confirm ('作成中の絵を消してもよろしいですか?')))
 		return
 
-	      setLayers (layers.map (layer => ({
-		  ...layer,
-		  lines:    [],
-		  hishory:  [],
-		  future:   [] })))
+	      clearCanvas ()
 	    }}>
 	      初期化
 	    </button>
@@ -244,6 +246,25 @@ export default () => {
 	    }}>
 	      保存
 	    </button>
+
+	    <div>
+	      <label>
+		幅：
+		<input type="range"
+		       min={32}
+		       max={640}
+		       value={stageWidth}
+		       onChange={ev => setStageWidth (ev.target.value)} />
+	      </label>
+	      <label>
+		高さ：
+		<input type="range"
+		       min={24}
+		       max={480}
+		       value={stageHeight}
+		       onChange={ev => setStageHeight (ev.target.value)} />
+	      </label>
+	    </div>
 	  </div>
 
 	  <div>