Merge pull request #6 from tldraw/lu/chain

Frame improvements

src/app/globals.css

@@ -27,3 +27,7 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+
+/* .tl-frame-heading {
+  display: none;
+} */

src/app/page.tsx

@@ -17,6 +17,15 @@ const tools = [LiveImageTool];
 
 export default function Home() {
   const onEditorMount = (editor: Editor) => {
+    // @ts-expect-error: patch
+    editor.isShapeOfType = function (arg, type) {
+      const shape = typeof arg === "string" ? this.getShape(arg)! : arg;
+      if (shape.type === "live-image" && type === "frame") {
+        return true;
+      }
+      return shape.type === type;
+    };
+
     // If there isn't a live image shape, create one
     const liveImage = editor.getCurrentPageShapes().find((shape) => {
       return shape.type === "live-image";

src/components/live-image.tsx

@@ -1,9 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
+  canonicalizeRotation,
   FrameShapeUtil,
+  getDefaultColorTheme,
   getSvgAsImage,
   HTMLContainer,
+  SelectionEdge,
   TLEventMapHandler,
   TLFrameShape,
   TLShape,
@@ -53,6 +56,23 @@ export class LiveImageShapeUtil extends FrameShapeUtil {
     };
   }
 
+  override canUnmount = () => false;
+
+  override toSvg(shape: TLFrameShape) {
+    const theme = getDefaultColorTheme({
+      isDarkMode: this.editor.user.getIsDarkMode(),
+    });
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rect.setAttribute("width", shape.props.w.toString());
+    rect.setAttribute("height", shape.props.h.toString());
+    rect.setAttribute("fill", theme.solid);
+    g.appendChild(rect);
+
+    return g;
+  }
+
   override component(shape: TLFrameShape) {
     const editor = useEditor();
     const component = super.component(shape);
@@ -139,9 +159,9 @@ export class LiveImageShapeUtil extends FrameShapeUtil {
 
         const iteration = startedIteration.current++;
 
-        const shapes = Array.from(editor.getShapeAndDescendantIds([shape.id]))
-          .filter((id) => id !== shape.id)
-          .map((id) => editor.getShape(id)) as TLShape[];
+        const shapes = Array.from(
+          editor.getShapeAndDescendantIds([shape.id])
+        ).map((id) => editor.getShape(id)) as TLShape[];
 
         // Check if should submit request
         const shapesDigest = JSON.stringify(shapes);
@@ -150,7 +170,11 @@ export class LiveImageShapeUtil extends FrameShapeUtil {
         }
         imageDigest.current = shapesDigest;
 
-        const svg = await editor.getSvg(shapes, { background: true });
+        const svg = await editor.getSvg([shape], {
+          background: true,
+          padding: 0,
+          darkMode: editor.user.getIsDarkMode(),
+        });
         if (iteration <= finishedIteration.current) return;
 
         if (!svg) {