refactor: clean up, fix editor toolbar

Author: kt3k

LICENSE

@@ -1,20 +1,20 @@
 The MIT License
-Copyright 2024 Yoshiya Hinosawa ( @kt3k )
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Copyright 2024-2026 Yoshiya Hinosawa ( @kt3k )
 
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

editor/.vscode/launch.json

@@ -12,7 +12,7 @@
   "tasks": {
     "compile": "deno task extension && deno task webview && deno task webview-style",
     "extension": "deno -A jsr:@kt3k/pack@0.1.14 extension.tsx -o out/extension.js --external vscode --format cjs",
-    "webview": "deno -A jsr:@kt3k/pack@0.1.14 webview.tsx -o out/webview.js",
+    "webview": "deno -A jsr:@kt3k/pack@0.1.14 editor.tsx -o out/editor.js",
     "webview-style": "deno -A npm:tailwindcss@3 -o out/style.css",
     "package": "deno task compile && deno -A --unstable-unsafe-proto npm:@vscode/vsce package",
     "update-package": "deno task package && code --install-extension vscode-bw-block-editor-0.4.0.vsix"

editor/.vscode/settings.json

@@ -215,6 +215,7 @@ class ToolManager {
       0,
       tool.type as any,
       tool.def,
+      null,
     )
   }
 
@@ -375,7 +376,7 @@ function createCanvasFromImageData(imageData: ImageData) {
   const canvas = ht.canvas({
     width: imageData.width,
     height: imageData.height,
-    class: "absolute top-0 left-0",
+    class: "absolute top-0 left-0 crisp-edges",
   })
   const ctx = canvas.getContext("2d")!
   ctx.putImageData(imageData, 0, 0)
@@ -395,7 +396,7 @@ async function CanvasLayers({ el }: Context) {
   cellsCanvas.style.left = SIDE_CANVAS_SIZE + "px"
   cellsCanvas.style.top = SIDE_CANVAS_SIZE + "px"
   cellsCanvas.style.position = "absolute"
-  cellsCanvas.classList.add("field-cells-canvas")
+  cellsCanvas.classList.add("field-cells-canvas", "crisp-edges")
   el.appendChild(cellsCanvas)
   block.renderAll()
   mount("field-cells-canvas", el)
@@ -404,7 +405,7 @@ async function CanvasLayers({ el }: Context) {
     width: CANVAS_SIZE,
     height: CANVAS_SIZE,
     style: `left: ${SIDE_CANVAS_SIZE}px; top: ${SIDE_CANVAS_SIZE}px;`,
-    class: "absolute field-objects-canvas pointer-events-none",
+    class: "absolute field-objects-canvas pointer-events-none crisp-edges",
   })
   el.appendChild(objectsCanvas)
   mount("field-objects-canvas", el)

editor/.vscode/tasks.json

@@ -32,10 +32,18 @@ function resolveCustomTextEditor(
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link href={u("out/style.css")} rel="stylesheet" />
+        <style>
+          {`
+          .crisp-edges {
+            image-rendering: pixelated;
+            image-rendering: crisp-edges;
+          }
+        `}
+        </style>
       </head>
       <body class="key-handler p-0">
-        <div class="canvas-layers relative mt-10 w-[calc(3360px+196px)]"></div>
-        <div class="toolbox h-10 px-2 fixed left-0 top-0 flex items-center bg-neutral-900/50 w-[calc(100%-12rem)]">
+        <div class="canvas-layers relative mt-20 w-[calc(3360px+196px)]"></div>
+        <div class="toolbox px-2 fixed left-0 top-0 flex flex-wrap items-center bg-neutral-900/50 w-[calc(100%-12rem)]">
           <div class="ml-2 group relative">
             <span class="mode-indicator">dot</span>
             <span class="
@@ -71,7 +79,7 @@ function resolveCustomTextEditor(
             </div>
           </div>
         </div>
-        <script src={u("out/webview.js")} type="module"></script>
+        <script src={u("out/editor.js")} type="module"></script>
       </body>
     </html>
   )