updat initial canvas positioning (incomplete)

Author: softmarshmallow

editor-packages/editor-canvas/canvas-event-target/canvas-event-target.tsx

@@ -140,6 +140,7 @@ export function CanvasEventTarget({
     {
       target: interactionEventTargetRef,
       eventOptions: {
+        // passive to false to raise `e.preventDefault()` and `e.stopPropagation()`. - this will prevent the browser from scrolling the page, navigating with swipe gesture (safari, firefox).
         passive: false,
       },
     }

editor-packages/editor-canvas/canvas/canvas.tsx

@@ -8,11 +8,11 @@ import {
   OnPointerMoveHandler,
   OnPointerDownHandler,
 } from "../canvas-event-target";
-import { get_hovering_target } from "../math";
+import { get_hovering_target, centerOf } from "../math";
 import { utils } from "@design-sdk/core";
 import { LazyFrame } from "@code-editor/canvas/lazy-frame";
 import { HudCustomRenderers, HudSurface } from "./hud-surface";
-import type { XY, XYWH, CanvasTransform } from "../types";
+import type { Box, XY, CanvasTransform } from "../types";
 import type { FrameOptimizationFactors } from "../frame";
 const designq = utils.query;
 
@@ -28,6 +28,13 @@ interface CanvasState {
   highlightedLayer?: string;
   selectedNodes: string[];
   readonly?: boolean;
+  /**
+   * when provided, it will override the saved value or centering logic and use this transform as initial instead.
+   *
+   * Canvas automatically saves the last transform and also automatically calculates the initial transform based on the input's complexity.
+   *
+   * @default undefined
+   */
   initialTransform?: CanvasTransform;
 }
 
@@ -52,7 +59,69 @@ interface HovringNode {
   reason: "frame-title" | "raycast" | "external";
 }
 
+function auto_initial_transform(
+  viewbound: Box,
+  nodes: ReflectSceneNode[]
+): CanvasTransform {
+  const _default = {
+    scale: INITIAL_SCALE,
+    xy: INITIAL_XY,
+  };
+
+  if (!nodes || viewbound_not_measured(viewbound)) {
+    return _default;
+  }
+
+  const fit_single_node = (n: ReflectSceneNode) => {
+    return centerOf(viewbound, n);
+  };
+
+  if (nodes.length === 0) {
+    return _default;
+  } else if (nodes.length === 1) {
+    // return center the node
+    const c = fit_single_node(nodes[0]);
+    return {
+      xy: c.translate,
+      scale: c.scale,
+    };
+  } else if (nodes.length < 20) {
+    // fit bounds
+    const c = centerOf(viewbound, ...nodes);
+    return {
+      xy: c.translate,
+      scale: c.scale,
+    };
+  } else {
+    // if more than 20 nodes, just center the first one. why? -> loading all frames at once will slow down the canvas, and in most cases, we don't have to show the whole content of the canvas.
+    // fit first item
+    const c = fit_single_node(nodes[0]);
+    return {
+      xy: c.translate,
+      scale: c.scale,
+    };
+  }
+
+  return _default;
+}
+
+/**
+ * when viewbound is not measured, it means the canvas is not ready to render. and the value will be `[0,0,0,0]` (from react-use-measure)
+ * @param viewbound visible canvas area bound
+ * @returns
+ */
+const viewbound_not_measured = (viewbound: Box) => {
+  return (
+    !viewbound ||
+    (viewbound[0] === 0 &&
+      viewbound[1] === 0 &&
+      viewbound[2] === 0 &&
+      viewbound[3] === 0)
+  );
+};
+
 export function Canvas({
+  viewbound,
   renderItem,
   onSelectNode,
   onClearSelection,
@@ -66,24 +135,48 @@ export function Canvas({
   config = default_canvas_preferences,
   ...props
 }: {
+  viewbound: Box;
   onSelectNode?: (node?: ReflectSceneNode) => void;
   onClearSelection?: () => void;
 } & CanvasCustomRenderers &
   CanvasState & {
     config?: CanvsPreferences;
   }) {
-  const _canvas_state_store = new CanvasStateStore(filekey, pageid);
+  const _canvas_state_store = useMemo(
+    () => new CanvasStateStore(filekey, pageid),
+    [filekey, pageid]
+  );
 
-  initialTransform = initialTransform ??
-    _canvas_state_store.getLastTransform() ?? {
-      scale: INITIAL_SCALE,
-      xy: INITIAL_XY,
-    };
+  useEffect(() => {
+    if (transformIntitialized) {
+      return;
+    }
+
+    const _last_knwon = _canvas_state_store.getLastTransform();
+    if (_last_knwon) {
+      setZoom(_last_knwon.scale);
+      setOffset(_last_knwon.xy);
+      setTransformInitialized(true);
+      return;
+    }
 
-  const [zoom, setZoom] = useState(initialTransform.scale);
+    if (viewbound_not_measured(viewbound)) {
+      return;
+    }
+
+    const t = auto_initial_transform(viewbound, nodes);
+    setZoom(t.scale);
+    setOffset(t.xy);
+    setTransformInitialized(true);
+  }, [viewbound]);
+
+  const [transformIntitialized, setTransformInitialized] = useState(false);
+  const [zoom, setZoom] = useState(initialTransform?.scale);
   const [isZooming, setIsZooming] = useState(false);
-  const [offset, setOffset] = useState<[number, number]>(initialTransform.xy);
-  const nonscaled_offset: XY = [offset[0] / zoom, offset[1] / zoom]; // offset;
+  const [offset, setOffset] = useState<[number, number]>(initialTransform?.xy);
+  const nonscaled_offset: XY = offset
+    ? [offset[0] / zoom, offset[1] / zoom]
+    : [0, 0];
   const [isPanning, setIsPanning] = useState(false);
   const cvtransform: CanvasTransform = {
     scale: zoom,
@@ -176,6 +269,10 @@ export function Canvas({
     ?.map((id) => designq.find_node_by_id_under_inpage_nodes(id, nodes))
     .filter(Boolean);
 
+  if (!transformIntitialized) {
+    return <></>;
+  }
+
   return (
     <>
       <CanvasEventTarget

editor-packages/editor-canvas/math/center-of.ts

@@ -1,3 +1,5 @@
+import type { Box, XY } from "../types";
+
 type Rect = {
   x: number;
   y: number;
@@ -6,8 +8,6 @@ type Rect = {
   rotation: number;
 };
 
-type Box = [number, number, number, number];
-
 /**
  * get center of a list of rectangles and the scale factor to fit them all.
  *
@@ -16,43 +16,70 @@ type Box = [number, number, number, number];
  * the output is a bounding box x1, y1, x2, y2 and scale.
  */
 export function centerOf(
-  bound: Box,
+  viewbound: Box,
   ...rects: Rect[]
 ): {
   box: Box;
-  center: [number, number];
+  center: XY;
+  translate: XY;
   scale: number;
 } {
+  console.log("get center of", rects, "in", viewbound);
   if (!rects || rects.length === 0) {
     return {
-      box: [0, 0, 0, 0],
+      box: viewbound,
       center: [0, 0],
+      translate: [
+        viewbound[0] + (viewbound[0] + viewbound[2]) / 2,
+        viewbound[1] + (viewbound[1] + viewbound[3]) / 2,
+      ],
       scale: 1,
     };
   }
 
+  const [x1, y1, x2, y2] = bound(...rects);
+  // box containing the rects.
+  const box: Box = [x1, y1, x2, y2];
+  // center of the box, viewbound not considered.
+  const boxcenter: XY = [(x1 + x2) / 2, (y1 + y2) / 2];
+  // scale factor to fix the box to the viewbound.
+  const scale = scaleToFit(box, viewbound);
+  // center of the viewbound.
+  const vbcenter: XY = [
+    viewbound[0] + (viewbound[0] + viewbound[2]) / 2,
+    viewbound[1] + (viewbound[1] + viewbound[3]) / 2,
+  ];
+
+  // translate x, y to center the box's center into the viewbound's center considering the scale.
+  const translate: XY = [
+    vbcenter[0] - boxcenter[0] * scale,
+    vbcenter[1] - boxcenter[1] * scale,
+  ];
+
+  console.log(translate, scale);
+
+  return {
+    box: box,
+    center: boxcenter,
+    translate: translate,
+    scale: scale,
+  };
+}
+
+function bound(...rects: Rect[]): Box {
   let x1 = Infinity;
   let y1 = Infinity;
   let x2 = -Infinity;
   let y2 = -Infinity;
-
   for (const rect of rects) {
-    const { x, y, width: w, height: h, rotation: r } = rect;
-    const [cx, cy] = rotate(x + w / 2, y + h / 2, r);
-    x1 = Math.min(x1, cx - w / 2);
-    y1 = Math.min(y1, cy - h / 2);
-    x2 = Math.max(x2, cx + w / 2);
-    y2 = Math.max(y2, cy + h / 2);
+    const { x, y, width: w, height: h } = rect;
+    // TODO: handle rotation. (no rotation for now)
+    x1 = Math.min(x1, x);
+    y1 = Math.min(y1, y);
+    x2 = Math.max(x2, x + w);
+    y2 = Math.max(y2, y + h);
   }
-  const ww = x2 - x1;
-  const hh = y2 - y1;
-  const box: Box = [x1, y1, x2, y2];
-
-  return {
-    box: box,
-    center: [(x1 + x2) / 2, (y1 + y2) / 2],
-    scale: scaleToFit(bound, box),
-  };
+  return [x1, y1, x2, y2];
 }
 
 function rotate(x: number, y: number, r: number): [number, number] {

editor-packages/editor-canvas/types/index.ts

@@ -4,3 +4,4 @@ export type CanvasTransform = {
   scale: number;
   xy: XY;
 };
+export type Box = [number, number, number, number];

editor/next.config.js

@@ -111,7 +111,7 @@ module.exports = withTM({
       },
       {
         source: "/files/:key/:id",
-        destination: "/files/:key",
+        destination: "/files/:key?node=:id",
         permanent: false,
       },
     ];

editor/pages/_development/editor-canvas/index.tsx

@@ -12,6 +12,16 @@ export default function EditorCanvasDevPage() {
       <Canvas
         filekey="unknown"
         pageid="1"
+        viewbound={[
+          0,
+          0,
+          window.innerWidth ||
+            document.documentElement.clientWidth ||
+            document.body.clientWidth,
+          window.innerHeight ||
+            document.documentElement.clientHeight ||
+            document.body.clientHeight,
+        ]}
         selectedNodes={[]}
         nodes={[]}
         renderItem={function (node): React.ReactNode {

editor/scaffolds/canvas/canvas.tsx

@@ -4,15 +4,18 @@ import { EditorAppbarFragments } from "components/editor";
 import { Canvas } from "@code-editor/canvas";
 import { useEditorState, useWorkspace } from "core/states";
 import { Preview } from "scaffolds/preview";
+import useMeasure from "react-use-measure";
 import { useDispatch } from "core/dispatch";
 import { FrameTitleRenderer } from "./render/frame-title";
 import { IsolateModeCanvas } from "./isolate-mode";
 
 /**
  * Statefull canvas segment that contains canvas as a child, with state-data connected.
  */
-export function VisualContentArea({ fileid }: { fileid: string }) {
+export function VisualContentArea() {
   const [state] = useEditorState();
+  const [canvasSizingRef, canvasBounds] = useMeasure();
+
   const { highlightedLayer, highlightLayer } = useWorkspace();
   const dispatch = useDispatch();
 
@@ -29,7 +32,7 @@ export function VisualContentArea({ fileid }: { fileid: string }) {
   const [mode, setMode] = useState<"full" | "isolate">("full");
 
   return (
-    <CanvasContainer id="canvas">
+    <CanvasContainer ref={canvasSizingRef} id="canvas">
       {/* <EditorAppbarFragments.Canvas /> */}
 
       {isEmptyPage ? (
@@ -50,6 +53,12 @@ export function VisualContentArea({ fileid }: { fileid: string }) {
           >
             <Canvas
               key={selectedPage}
+              viewbound={[
+                canvasBounds.left,
+                canvasBounds.top,
+                canvasBounds.bottom,
+                canvasBounds.right,
+              ]}
               filekey={state.design.key}
               pageid={selectedPage}
               selectedNodes={selectedNodes.filter(Boolean)}
@@ -84,6 +93,5 @@ export function VisualContentArea({ fileid }: { fileid: string }) {
 const CanvasContainer = styled.div`
   display: flex;
   flex-direction: column;
-  max-width: calc((100vw - 200px) * 0.6); // TODO: make this dynamic
   height: 100%;
 `;

editor/scaffolds/editor/editor.tsx

@@ -78,7 +78,7 @@ export function Editor({
       >
         <WorkspaceContentPanelGridLayout>
           <WorkspaceContentPanel flex={6}>
-            <Canvas key={_refreshkey} fileid={state?.design?.key} />
+            <Canvas key={_refreshkey} />
           </WorkspaceContentPanel>
           <WorkspaceContentPanel
             hidden={state.selectedNodes.length === 0}

editor/scaffolds/preview/index.tsx

@@ -63,6 +63,11 @@ export function Preview({
     : null;
 
   const on_preview_result = (result: Result, __image: boolean) => {
+    if (preview) {
+      if (preview.code === result.code) {
+        return;
+      }
+    }
     setPreview(result);
     cache.set(target.filekey, { ...result, __image });
   };