Canvas: GridStack Layout

web-admin/src/features/embeds/CanvasEmbed.svelte

@@ -8,14 +8,11 @@
   export let instanceId: string;
   export let canvasName: string;
 
-  // TODO: Remove later
-  let columns = 20;
-  let gap = 1;
   $: canvasQuery = useResource(instanceId, canvasName, ResourceKind.Canvas);
 
   $: canvas = $canvasQuery.data?.canvas.spec;
 
-  $: ({ items = [] } = canvas || { items: [], columns: 24, gap: 2 });
+  $: ({ items = [] } = canvas || { items: [] });
 </script>
 
-<CanvasDashboardEmbed {columns} {items} {gap} />
+<CanvasDashboardEmbed {items} />

web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte

@@ -14,10 +14,7 @@
 
   $: canvas = $canvasQuery.data?.canvas.spec;
 
-  // TODO: Remove later
-  let columns = 20;
-  let gap = 1;
-  $: ({ items = [] } = canvas || { items: [], columns: 24, gap: 2 });
+  $: ({ items = [] } = canvas || { items: [] });
 </script>
 
-<CanvasDashboardEmbed {columns} {items} {gap} />
+<CanvasDashboardEmbed {items} />

web-common/package.json

@@ -66,6 +66,7 @@
     "d3-shape": "^3.1.0",
     "d3-time-format": "^4.1.0",
     "dompurify": "^3.1.0",
+    "gridstack": "^11.1.2",
     "jsdom": "^23.0.1",
     "json-schema": "^0.4.0",
     "lucide-svelte": "^0.298.0",

web-common/src/features/canvas/Canvas.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import CanvasDashboardPreview from "@rilldata/web-common/features/canvas/CanvasDashboardPreview.svelte";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
-  import type { Vector } from "@rilldata/web-common/features/canvas/types";
   import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import type { V1CanvasSpec } from "@rilldata/web-common/runtime-client";
   import { parseDocument } from "yaml";
@@ -11,12 +10,6 @@
   const { canvasStore, validSpecStore } = getCanvasStateManagers();
   $: selectedIndex = $canvasStore?.selectedComponentIndex;
 
-  let showGrid = true;
-
-  // TODO: Remove later when we move to new tiling system
-  const columns = 24;
-  const gap = 1;
-
   let spec: V1CanvasSpec = {
     items: [],
   };
@@ -33,16 +26,19 @@
 
   $: ({ items = [] } = spec);
 
-  async function handleDeleteEvent(
+  async function handleDelete(
     e: CustomEvent<{
       index: number;
     }>,
   ) {
+    console.log("Canvas handleComponentDelete");
     if (!e.detail.index) return;
     await deleteComponent(e.detail.index);
   }
 
   async function deleteComponent(index: number) {
+    console.log("Canvas deleteComponent");
+
     const parsedDocument = parseDocument(
       $editorContent ?? $remoteContent ?? "",
     );
@@ -51,27 +47,34 @@
     if (!items) return;
     items.delete(index);
     updateEditorContent(parsedDocument.toString(), true);
+    // updateLocalContent(parsedDocument.toString(), true);
+    // FIXME: need to rerender gridstack after node removal
     if ($autoSave) await updateComponentFile();
   }
 
-  async function handlePreviewUpdate(
+  async function handleUpdate(
     e: CustomEvent<{
       index: number;
-      position: Vector;
-      dimensions: Vector;
+      x: number;
+      y: number;
+      w: number;
+      h: number;
     }>,
   ) {
+    console.log("handlePreviewUpdate: ", e.detail);
+
     const parsedDocument = parseDocument(
       $editorContent ?? $remoteContent ?? "",
     );
     const items = parsedDocument.get("items") as any;
 
     const node = items.get(e.detail.index);
 
-    node.set("width", e.detail.dimensions[0]);
-    node.set("height", e.detail.dimensions[1]);
-    node.set("x", e.detail.position[0]);
-    node.set("y", e.detail.position[1]);
+    // NOTE: V1CanvasItem uses width, height, x, y
+    node.set("width", e.detail.w);
+    node.set("height", e.detail.h);
+    node.set("x", e.detail.x);
+    node.set("y", e.detail.y);
 
     updateEditorContent(parsedDocument.toString(), true);
 
@@ -80,13 +83,10 @@
 </script>
 
 <CanvasDashboardPreview
-  {gap}
   {items}
-  {columns}
-  {showGrid}
   bind:selectedIndex
-  on:update={handlePreviewUpdate}
-  on:delete={handleDeleteEvent}
+  on:update={handleUpdate}
+  on:delete={handleDelete}
 />
 
 <svelte:window

web-common/src/features/canvas/CanvasComponent.svelte

@@ -0,0 +1,84 @@
+<script lang="ts" context="module">
+  import { builderActions, getAttrs, type Builder } from "bits-ui";
+  import {
+    ResourceKind,
+    useResource,
+  } from "../entity-management/resource-selectors";
+  import ComponentRenderer from "@rilldata/web-common/features/canvas/components/ComponentRenderer.svelte";
+</script>
+
+<script lang="ts">
+  export let i: number;
+  export let builders: Builder[] = [];
+  export let embed = false;
+  // export let selected = false;
+  export let interacting = false;
+  // export let width: number;
+  // export let height: number;
+  // export let top: number;
+  // export let left: number;
+  export let localZIndex = 0;
+  export let componentName: string;
+  export let instanceId: string;
+
+  $: resourceQuery = useResource(
+    instanceId,
+    componentName,
+    ResourceKind.Component,
+  );
+  $: ({ data: componentResource } = $resourceQuery);
+
+  $: ({ renderer, rendererProperties } =
+    componentResource?.component?.spec ?? {});
+
+  $: title = rendererProperties?.title;
+  $: description = rendererProperties?.description;
+</script>
+
+<div
+  {...getAttrs(builders)}
+  use:builderActions={{ builders }}
+  role="presentation"
+  data-index={i}
+  class="canvas-component hover:cursor-pointer active:cursor-grab pointer-events-auto size-full"
+  class:!cursor-default={embed}
+  style:z-index={renderer === "select" ? 100 : localZIndex}
+  on:contextmenu
+  on:pointerenter
+  on:pointerleave
+>
+  <div class="size-full relative">
+    <div
+      class="size-full overflow-hidden flex flex-col flex-none"
+      class:shadow-lg={interacting}
+    >
+      <div class="size-full overflow-hidden flex flex-col gap-y-1 flex-none">
+        {#if title || description}
+          <div class="w-full h-fit flex flex-col border-b bg-white p-2">
+            {#if title}
+              <h1 class="text-slate-700">{title}</h1>
+            {/if}
+            {#if description}
+              <h2 class="text-slate-600 leading-none">{description}</h2>
+            {/if}
+          </div>
+        {/if}
+        {#if renderer && rendererProperties}
+          <ComponentRenderer {renderer} {componentName} />
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="postcss">
+  h1 {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  h2 {
+    font-size: 12px;
+    font-weight: 400;
+  }
+</style>

web-common/src/features/canvas/CanvasDashboardEmbed.svelte

@@ -1,58 +1,43 @@
 <script lang="ts">
   import { type V1CanvasItem } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import Component from "./Component.svelte";
-  import * as defaults from "./constants";
-  import DashboardWrapper from "./DashboardWrapper.svelte";
+  import CanvasComponent from "./CanvasComponent.svelte";
+  import CanvasDashboardWrapper from "./CanvasDashboardWrapper.svelte";
+  import SvelteGridStack from "./SvelteGridStack.svelte";
+  import type { GridStack } from "gridstack";
 
-  export let columns = 20;
   export let items: V1CanvasItem[];
-  export let gap = 1;
-  export let chartView = false;
+  // export let chartView = false;
 
   let contentRect: DOMRectReadOnly = new DOMRectReadOnly(0, 0, 0, 0);
+  let grid: GridStack;
+
   $: instanceId = $runtime.instanceId;
 
-  const dashboardWidth = chartView
-    ? defaults.DASHBOARD_WIDTH / 2
-    : defaults.DASHBOARD_WIDTH;
+  // const dashboardWidth = chartView
+  //   ? defaults.DASHBOARD_WIDTH / 2
+  //   : defaults.DASHBOARD_WIDTH;
 
-  $: gridWidth = contentRect.width;
-  $: scale = gridWidth / dashboardWidth;
-  $: gapSize = dashboardWidth * (gap / 1000);
-  $: gridCell = dashboardWidth / columns;
-  $: radius = gridCell * defaults.COMPONENT_RADIUS;
+  // $: gridWidth = contentRect.width;
+  // $: scale = gridWidth / dashboardWidth;
+  // $: gridCell = dashboardWidth / columns;
+  // $: gridCell = defaults.DASHBOARD_WIDTH / defaults.COLUMN_COUNT;
 
   $: maxBottom = items.reduce((max, el) => {
     const bottom = Number(el.height) + Number(el.y);
     return Math.max(max, bottom);
   }, 0);
+
+  // $: if (variables.length && canvasName) {
+  //   canvasVariablesStore.init(canvasName, variables);
+  // }
 </script>
 
-<DashboardWrapper
-  bind:contentRect
-  {scale}
-  height={maxBottom * gridCell * scale}
-  width={dashboardWidth}
->
-  {#each items as component, i (i)}
-    {@const componentName = component.component}
+<CanvasDashboardWrapper bind:contentRect height={maxBottom}>
+  <SvelteGridStack bind:grid {items} let:index let:item embed>
+    {@const componentName = item.component}
     {#if componentName}
-      <Component
-        embed
-        {i}
-        {instanceId}
-        {componentName}
-        {chartView}
-        {scale}
-        {radius}
-        padding={gapSize}
-        width={Number(component.width ?? defaults.COMPONENT_WIDTH) * gridCell}
-        height={Number(component.height ?? defaults.COMPONENT_HEIGHT) *
-          gridCell}
-        left={Number(component.x) * gridCell}
-        top={Number(component.y) * gridCell}
-      />
+      <CanvasComponent embed i={index} {instanceId} {componentName} />
     {/if}
-  {/each}
-</DashboardWrapper>
+  </SvelteGridStack>
+</CanvasDashboardWrapper>