add initial canvas positioning by its' content bounding

Author: softmarshmallow

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

@@ -14,7 +14,11 @@ import {
   OnPointerMoveHandler,
   OnPointerDownHandler,
 } from "../canvas-event-target";
-import { transform_by_zoom_delta, get_hovering_target } from "../math";
+import {
+  transform_by_zoom_delta,
+  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";
@@ -73,9 +77,14 @@ export function Canvas({
   CanvasState & {
     config?: CanvsPreferences;
   }) {
-  const [zoom, setZoom] = useState(INITIAL_SCALE);
+  const { center: _inicial_xy, scale: _initial_scale } = useMemo(
+    () => centerOf(null, ...nodes),
+    [nodes]
+  );
+
+  const [zoom, setZoom] = useState(_initial_scale);
   const [isZooming, setIsZooming] = useState(false);
-  const [xy, setXY] = useState<[number, number]>(INITIAL_XY);
+  const [xy, setXY] = useState<[number, number]>(_inicial_xy);
   const [isPanning, setIsPanning] = useState(false);
 
   const node = (id) => designq.find_node_by_id_under_inpage_nodes(id, nodes);
@@ -89,7 +98,6 @@ export function Canvas({
 
   useEffect(() => {
     setHoveringLayer(wshighlight);
-    // console.log("wshighlight", wshighlight, highlightedLayer);
   }, [highlightedLayer]);
 
   const onPointerMove: OnPointerMoveHandler = (state) => {

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

@@ -0,0 +1,76 @@
+type Rect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+};
+
+type Box = [number, number, number, number];
+
+/**
+ * get center of a list of rectangles and the scale factor to fit them all.
+ *
+ * the rectangle contains x, y, w, h and rotation as r.
+ *
+ * the output is a bounding box x1, y1, x2, y2 and scale.
+ */
+export function centerOf(
+  bound: Box,
+  ...rects: Rect[]
+): {
+  box: Box;
+  center: [number, number];
+  scale: number;
+} {
+  if (!rects || rects.length === 0) {
+    return {
+      box: [0, 0, 0, 0],
+      center: [0, 0],
+      scale: 1,
+    };
+  }
+
+  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 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),
+  };
+}
+
+function rotate(x: number, y: number, r: number): [number, number] {
+  const cos = Math.cos(r);
+  const sin = Math.sin(r);
+  return [x * cos - y * sin, x * sin + y * cos];
+}
+
+function scaleToFit(a: Box, b: Box): number {
+  if (!a || !b) {
+    return 1;
+  }
+  const [ax1, ay1, ax2, ay2] = a;
+  const [bx1, by1, bx2, by2] = b;
+  const aw = ax2 - ax1;
+  const ah = ay2 - ay1;
+  const bw = bx2 - bx1;
+  const bh = by2 - by1;
+  const scale = Math.min(bw / aw, bh / ah);
+  return scale;
+}

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

@@ -1,2 +1,3 @@
 export * from "./gesture-transform";
 export * from "./hovering-target";
+export * from "./center-of";

editor/scaffolds/canvas/canvas.tsx

@@ -22,7 +22,7 @@ export function VisualContentArea({ fileid }: { fileid: string }) {
     ? state.design.pages
         .find((p) => p.id == selectedPage)
         .children.filter(Boolean)
-    : null;
+    : [];
 
   const isEmptyPage = thisPageNodes?.length === 0;