first update

Octoframes · Aug 6, 2024 · 6f2115e · 6f2115e
1 parent 8472971
commit 6f2115e
Showing 1 changed file with 48 additions and 7 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,15 +6,56 @@ export default function App() {
     const arrowId = createShapeId("arrow");
 
     const shapes = [
-      { id: createShapeId("rectangle1"), type: "geo", x: 50, y: 50, props: { geo: "rectangle", w: 75, h: 37.5, color: "blue" } },
-      { id: createShapeId("rectangle2"), type: "geo", x: 150, y: 150, props: { geo: "rectangle", w: 50, h: 50, color: "yellow" } },
-      { id: createShapeId("rectangle3"), type: "geo", x: 210, y: 150, props: { geo: "rectangle", w: 100, h: 75, color: "red" } },
+      {
+        id: createShapeId("rectangle1"),
+        type: "geo",
+        x: 22,
+        y: -47,
+        props: {
+          align: "middle",
+          color: "black",
+          dash: "draw",
+          fill: "none",
+          font: "draw",
+          geo: "rectangle",
+          w: 149,
+          h: 90,
+          labelColor: "black",
+          scale: 1,
+          size: "l",
+          text: "Color",
+        },
+      },
+      {
+        id: createShapeId("rectangle2"),
+        type: "geo",
+        x: 150,
+        y: 150,
+        props: { geo: "rectangle", w: 50, h: 50, color: "yellow" },
+      },
+      {
+        id: createShapeId("rectangle3"),
+        type: "geo",
+        x: 210,
+        y: 150,
+        props: { geo: "rectangle", w: 100, h: 75, color: "red" },
+      },
       { id: arrowId, type: "arrow", x: 100, y: 100 },
     ];
 
     const bindings = [
-      { fromId: arrowId, toId: shapes[0].id, type: "arrow", props: { terminal: "start", normalizedAnchor: { x: 0.5, y: 0.5 } } },
-      { fromId: arrowId, toId: shapes[1].id, type: "arrow", props: { terminal: "end", normalizedAnchor: { x: 0.5, y: 0.5 } } },
+      {
+        fromId: arrowId,
+        toId: shapes[0].id,
+        type: "arrow",
+        props: { terminal: "start", normalizedAnchor: { x: 0.5, y: 0.5 } },
+      },
+      {
+        fromId: arrowId,
+        toId: shapes[1].id,
+        type: "arrow",
+        props: { terminal: "end", normalizedAnchor: { x: 0.5, y: 0.5 } },
+      },
     ];
 
     editor.createShapes(shapes);
@@ -27,12 +68,12 @@ export default function App() {
         style={{
           position: "absolute",
           width: 500,
-          height: 500,
+          height: 300,
           top: "50px",
         }}
       >
         <Tldraw onMount={handleMount}></Tldraw>
       </div>
     </>
   );
-}
+}