wip

rilldata · Jan 18, 2025 · 9250aa4 · 9250aa4
1 parent b409211
commit 9250aa4
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 97 deletions.
diff --git a/web-common/src/features/canvas/Canvas.svelte b/web-common/src/features/canvas/Canvas.svelte
@@ -41,9 +41,10 @@
   } = fileArtifact);
 
   $: spec = structuredClone($canvasSpec ?? spec);
-
   $: ({ items = [] } = spec);
-  $: console.log("[Canvas] items updated:", items.length, items);
+
+  $: console.log("[Canvas] spec updated:", spec);
+  $: console.log("[Canvas] items updated:", items);
 
   $: ({ instanceId } = $runtime);
 
@@ -95,10 +96,7 @@
     updateEditorContent(parsedDocument.toString(), true);
     items = updatedItems;
     canvasEntity.setSelectedComponentIndex(null);
-
-    if ($autoSave) {
-      await updateComponentFile();
-    }
+    if ($autoSave) await updateComponentFile();
   }
 
   async function handleDelete(
@@ -160,15 +158,20 @@
     const parsedDocument = parseDocument(
       $editorContent ?? $remoteContent ?? "",
     );
-    const docJson = parsedDocument.toJSON();
-    const existingItems = docJson?.items || [];
-
-    const rawItems = parsedDocument.get("items") as any;
+    const items = parsedDocument.get("items") as any;
+    if (!items) {
+      parsedDocument.set("items", []);
+    }
 
-    console.log("[Canvas] existingItems", existingItems);
-    console.log("[Canvas] rawItems", rawItems);
+    const itemsToPosition =
+      spec?.items?.map((item) => ({
+        x: item.x ?? 0,
+        y: item.y ?? 0,
+        width: item.width ?? 0,
+        height: item.height ?? 0,
+      })) ?? [];
 
-    const [x, y] = findNextAvailablePosition(existingItems, width, height);
+    const [x, y] = findNextAvailablePosition(itemsToPosition, width, height);
 
     const newComponent = {
       component: { [componentType]: newSpec },
@@ -178,28 +181,11 @@
       y,
     };
 
-    console.log("[Canvas] newComponent", newComponent);
-
-    const updatedItems = [...existingItems, newComponent];
-
-    console.log("[Canvas] updatedItems", updatedItems);
-
-    console.log("[Canvas] docJson.items", docJson.items);
-
-    if (!docJson.items) {
-      parsedDocument.set("items", updatedItems);
-    } else {
-      parsedDocument.set("items", updatedItems);
-    }
-
-    const newIndex = existingItems.length;
-
-    // Save changes
+    items.add(newComponent);
     updateEditorContent(parsedDocument.toString(), true);
-    items = updatedItems;
 
     await updateComponentFile();
-    scrollToComponent(newIndex);
+    scrollToComponent(itemsToPosition.length);
   }
 
   // async function addComponent(componentName: CanvasComponentType) {

diff --git a/web-common/src/features/workspaces/CanvasWorkspace.svelte b/web-common/src/features/workspaces/CanvasWorkspace.svelte
@@ -89,94 +89,94 @@
     if (newRoute) await goto(newRoute);
   }
 
-  // async function addComponent(componentType: CanvasComponentType) {
-  //   console.log("[CanvasWorkspace] adding component: ", componentType);
+  async function addComponent(componentType: CanvasComponentType) {
+    console.log("[CanvasWorkspace] adding component: ", componentType);
 
-  //   const defaultMetrics = $metricsViewQuery?.data;
-  //   if (!defaultMetrics) return;
-
-  //   const newSpec = componentRegistry[componentType].newComponentSpec(
-  //     defaultMetrics.metricsView,
-  //     defaultMetrics.measure,
-  //     defaultMetrics.dimension,
-  //   );
-
-  //   const { width, height } = componentRegistry[componentType].defaultSize;
-
-  //   const parsedDocument = parseDocument(
-  //     $editorContent ?? $remoteContent ?? "",
-  //   );
-  //   const docJson = parsedDocument.toJSON();
-  //   const existingItems = docJson?.items || [];
-
-  //   const [x, y] = findNextAvailablePosition(existingItems, width, height);
-
-  //   const newComponent = {
-  //     component: { [componentType]: newSpec },
-  //     height,
-  //     width,
-  //     x,
-  //     y,
-  //   };
-
-  //   const updatedItems = [...existingItems, newComponent];
-
-  //   if (!docJson.items) {
-  //     parsedDocument.set("items", updatedItems);
-  //   } else {
-  //     parsedDocument.set("items", updatedItems);
-  //   }
-
-  //   const newIndex = existingItems.length;
-  //   updateEditorContent(parsedDocument.toString(), true);
-  //   await updateComponentFile();
-  //   scrollToComponent(newIndex);
-  // }
-
-  async function addComponent(componentName: CanvasComponentType) {
     const defaultMetrics = $metricsViewQuery?.data;
     if (!defaultMetrics) return;
 
-    const newSpec = componentRegistry[componentName].newComponentSpec(
+    const newSpec = componentRegistry[componentType].newComponentSpec(
       defaultMetrics.metricsView,
       defaultMetrics.measure,
       defaultMetrics.dimension,
     );
 
-    const { width, height } = componentRegistry[componentName].defaultSize;
+    const { width, height } = componentRegistry[componentType].defaultSize;
+
+    const parsedDocument = parseDocument(
+      $editorContent ?? $remoteContent ?? "",
+    );
+    const docJson = parsedDocument.toJSON();
+    const existingItems = docJson?.items || [];
+
+    const [x, y] = findNextAvailablePosition(existingItems, width, height);
+
     const newComponent = {
-      component: { [componentName]: newSpec },
+      component: { [componentType]: newSpec },
       height,
       width,
-      x: 0,
-      y: 0,
+      x,
+      y,
     };
-    const parsedDocument = parseDocument(
-      $editorContent ?? $remoteContent ?? "",
-    );
 
-    const items = parsedDocument.get("items") as any;
+    const updatedItems = [...existingItems, newComponent];
 
-    if (!items) {
-      parsedDocument.set("items", [newComponent]);
+    if (!docJson.items) {
+      parsedDocument.set("items", updatedItems);
     } else {
-      items.add(newComponent);
+      parsedDocument.set("items", updatedItems);
     }
 
+    const newIndex = existingItems.length;
     updateEditorContent(parsedDocument.toString(), true);
     await updateComponentFile();
+    scrollToComponent(newIndex);
   }
 
-  // function scrollToComponent(index: number) {
-  //   setTimeout(() => {
-  //     const component = document.querySelector(
-  //       `[data-component-index="${index}"]`,
-  //     );
-  //     if (component) {
-  //       component.scrollIntoView({ behavior: "smooth", block: "center" });
-  //     }
-  //   }, 100);
+  // async function addComponent(componentName: CanvasComponentType) {
+  //   const defaultMetrics = $metricsViewQuery?.data;
+  //   if (!defaultMetrics) return;
+
+  //   const newSpec = componentRegistry[componentName].newComponentSpec(
+  //     defaultMetrics.metricsView,
+  //     defaultMetrics.measure,
+  //     defaultMetrics.dimension,
+  //   );
+
+  //   const { width, height } = componentRegistry[componentName].defaultSize;
+  //   const newComponent = {
+  //     component: { [componentName]: newSpec },
+  //     height,
+  //     width,
+  //     x: 0,
+  //     y: 0,
+  //   };
+  //   const parsedDocument = parseDocument(
+  //     $editorContent ?? $remoteContent ?? "",
+  //   );
+
+  //   const items = parsedDocument.get("items") as any;
+
+  //   if (!items) {
+  //     parsedDocument.set("items", [newComponent]);
+  //   } else {
+  //     items.add(newComponent);
+  //   }
+
+  //   updateEditorContent(parsedDocument.toString(), true);
+  //   await updateComponentFile();
   // }
+
+  function scrollToComponent(index: number) {
+    setTimeout(() => {
+      const component = document.querySelector(
+        `[data-component-index="${index}"]`,
+      );
+      if (component) {
+        component.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }, 100);
+  }
 </script>
 
 {#if fileArtifact}