add tabbar

editor/src/App.tsx

@@ -3,6 +3,7 @@ import "./style.css";
 import Canvas from "./Canvas";
 import { Editor } from "./editor/Editor";
 import Toolbar from "./Toolbar";
+import Tabbar from "./Tabbar";
 
 function App(): ReactElement {
   const [editor] = useState(() => new Editor());
@@ -12,8 +13,13 @@ function App(): ReactElement {
     <>
       <h1>nandsim</h1>
       <div className="Editor">
+        <div>
           <Toolbar editor={editor} canvasRef={canvasRef} />
-        <Canvas editor={editor} canvasRef={canvasRef} width={800} height={800} />
+        </div>
+        <main>
+          <Tabbar editor={editor} />
+          <Canvas editor={editor} canvasRef={canvasRef} />
+        </main>
       </div>
     </>
   );

editor/src/Canvas.tsx

@@ -5,11 +5,9 @@ import { v2 } from "./editor/V2";
 type Props = {
   editor: Editor;
   canvasRef: RefObject<HTMLCanvasElement | null>;
-  width: number;
-  height: number;
 };
 
-function Canvas({ editor, canvasRef, width, height }: Props): ReactElement {
+function Canvas({ editor, canvasRef }: Props): ReactElement {
   useEffect(() => {
     if (!canvasRef.current) return;
 
@@ -21,9 +19,7 @@ function Canvas({ editor, canvasRef, width, height }: Props): ReactElement {
       <div className="Canvas">
         <canvas
           ref={canvasRef}
-          width={width}
-          height={height}
-          style={{ width, height, backgroundColor: "black" }}
+          style={{ backgroundColor: "black" }}
           tabIndex={0}
           onMouseDown={(ev) => {
             const pos = v2(ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);

editor/src/Tabbar.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState, type ReactElement } from "react";
+import type { Editor } from "./editor/Editor";
+
+type Props = { editor: Editor };
+
+function Tabbar({ editor }: Props): ReactElement {
+  const [selectedTool, setSelectedTool] = useState("select");
+
+  return (
+    <>
+      <div className="Tabbar">
+        <button className="active">&lt;unnamed&gt;</button>
+        <button>Component one</button>
+        <button>Another components</button>
+      </div>
+    </>
+  );
+}
+
+export default Tabbar;

editor/src/Toolbar.tsx

@@ -15,6 +15,8 @@ function Toolbar({ editor, canvasRef }: Props): ReactElement {
   return (
     <>
       <div className="Toolbar">
+        <h2>Toolbar</h2>
+        <div>
           {editor.tools().map((tool, key) => (
             <button
               key={`${key}`}
@@ -28,6 +30,10 @@ function Toolbar({ editor, canvasRef }: Props): ReactElement {
             </button>
           ))}
         </div>
+        <div>
+          <button className="add">+</button>
+        </div>
+      </div>
     </>
   );
 }

editor/src/editor/Editor.ts

@@ -1,6 +1,5 @@
 import { Cx, type Tool } from "./Cx";
 import { EventBus } from "./events";
-import { V2 } from "./V2";
 
 export class Editor {
   public events = new EventBus();

editor/src/editor/Renderer.ts

@@ -14,6 +14,13 @@ export class Renderer {
 
   clear() {
     const { canvas, c } = this;
+
+    const width = canvas.offsetWidth;
+    const height = canvas.offsetHeight;
+
+    canvas.width = width;
+    canvas.height = height;
+
     c.fillStyle = "#666";
     c.fillRect(0, 0, canvas.width, canvas.height);
   }
@@ -25,8 +32,8 @@ export class Renderer {
     const gridSize = v2(20, 20);
 
     c.fillStyle = "#111";
-    for (let y = 0; y < canvas.width / gridSize.x + 1; ++y) {
-      for (let x = 0; x < canvas.height / gridSize.y + 1; ++x) {
+    for (let y = 0; y < canvas.height / gridSize.y + 1; ++y) {
+      for (let x = 0; x < canvas.width / gridSize.x + 1; ++x) {
         c.fillRect(
           (this.offset.x % gridSize.x) + x * gridSize.x - dotSize.x / 2,
           (this.offset.y % gridSize.y) + y * gridSize.y - dotSize.y / 2,

editor/src/index.css

@@ -2,14 +2,21 @@
   color-scheme: light dark;
 }
 
+* {
+  font-family: sans;
+}
+
 #root {
   margin: 0 auto;
-  min-height: 100svh;
+  height: 100svh;
   text-align: center;
+  display: flex;
+  flex-direction: column;
 }
 
 body {
   margin: 0;
+  height: 100vh;
 }
 
 h1 {

editor/src/style.css

@@ -1,14 +1,51 @@
-
 .Editor {
   display: flex;
   flex-direction: row;
   justify-content: center;
+  height: 100%;
 
   .Toolbar {
-
     display: flex;
     flex-direction: column;
     gap: 2px;
+    max-width: 300px;
+    height: 100%;
+    background-color: #2b2a33;
+
+    h2 {
+      margin: 0;
+    }
+
+    button {
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-top: 5px;
+      padding-bottom: 5px;
+
+      font-size: 1rem;
+      text-transform: capitalize;
+      font-weight: bold;
+
+      min-width: 200px;
+      width: 100%;
+      text-align: left;
+      border: none;
+      border-bottom: 2px solid #2b2a33;
+    }
+    button.active {
+      background-color: #373541;
+      border-bottom: 2px solid #ff8800;
+    }
+
+    button.add {
+      text-align: center;
+    }
+  }
+
+  .Tabbar {
+    display: flex;
+    flex-direction: row;
+    gap: 2px;
 
     button {
       padding-left: 5px;
@@ -19,19 +56,38 @@
       font-size: 1rem;
       text-transform: capitalize;
 
-            width: 200px;
+      max-width: 200px;
       text-align: left;
-            border: 2px solid gray;
-            border-radius: 5px;
+      border-radius: 10px 10px 0 0;
+
+      border: none;
+      border-bottom: 2px solid #2b2a33;
     }
     button.active {
-            border: 2px solid #ff8800;
+      border-bottom: 2px solid #ff8800;
     }
   }
 
   .Canvas {
+    width: 100%;
+    height: 100%;
+
     canvas {
+      width: 100%;
+      height: 100%;
+
       image-rendering: pixelated;
     }
   }
+
+  > div,
+  > main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  main {
+    height: 100%;
+    width: 100%;
+  }
 }