get shape

src/App.jsx

@@ -1,42 +1,58 @@
-import { useCallback, useState } from "react";
-import { Tldraw } from "tldraw";
-import "tldraw/tldraw.css";
+import { Tldraw, track, useEditor } from "tldraw"
+import "tldraw/tldraw.css"
 
-export default function CanvasEventsExample() {
-  const [events, setEvents] = useState([]);
-
-  const handleEvent = useCallback((data) => {
-    setEvents((events) => {
-      let newEvents = "hello world"
-      return newEvents;
-    });
-  }, []);
+// There's a guide at the bottom of this file!
 
+// [1]
+export default function ShapeMetaExample() {
   return (
-    <div
-      style={{
-        display: "flex",
-        position: "absolute",
-        width: "2000px",
-        height: "1000px",
-        top: "50px",
-      }}
-    >
-      <div style={{ width: "50%", height: "100vh" }}>
-        <Tldraw
-          onMount={(editor) => {
-            editor.on("event", (event) => handleEvent(event));
-          }}
-        />
-      </div>
-      <div
-        style={{
-          width: "50%",
-          backgroundColor: "grey",
+    <div className="tldraw__editor"
+    style={{
+      display: "flex",
+      position: "absolute",
+      width: "2000px",
+      height: "1000px",
+      top: "50px",
+    }}>
+      <Tldraw
+        persistenceKey="shape_meta_example"
+        onMount={editor => {
+          editor.getInitialMetaForShape = shape => {
+            return { label: `My ${shape.type} shape` }
+          }
         }}
       >
-        <div>{JSON.stringify(events, undefined, 2)}</div>
-      </div>
+        <ShapeLabelUiWithHelper />
+      </Tldraw>
+    </div>
+  )
+}
+
+// [3]
+export const ShapeLabelUiWithHelper = track(function ShapeLabelUiWithHelper() {
+  const editor = useEditor()
+  const onlySelectedShape = editor.getOnlySelectedShape()
+
+  function onChange(e) {
+    if (onlySelectedShape) {
+      const { id, type, meta } = onlySelectedShape
+
+      editor.updateShapes([
+        { id, type, meta: { ...meta, label: e.currentTarget.value } }
+      ])
+    }
+  }
+
+  return (
+    <div style={{ position: "absolute", zIndex: 300, top: 64, left: 12 }}>
+      <pre style={{ margin: "0 0 16px 0" }}>
+        {onlySelectedShape
+          ? JSON.stringify(onlySelectedShape.meta, null, "\t")
+          : "Select one shape to see / edit its meta data."}
+      </pre>
+      {onlySelectedShape && (
+        <input value={onlySelectedShape.meta.label} onChange={onChange} />
+      )}
     </div>
-  );
-}
+  )
+})