Apr #2

editor-packages/editor-canvas/README.md

@@ -1 +1,29 @@
-# A Interactive canvas for runtime frames.
+# A Html5 backend Interactive canvas for runtime frames.
+
+## The system
+
+- Canvas
+- Hud
+- Event
+- Math
+- Iframe
+- Node
+- Host
+
+## General architecture
+
+- `ScaffoldCanvas` - A single component canvas that holds both renderer and eventsystem
+- `RenderOnlyCanvas + EventSystem` - A Customizable system for complex and heavy rendering. (use saperate render host with iframe)
+
+## Events
+
+gesture events
+
+- move (pan)
+- zoom (pinch)
+
+- create node
+- remove node
+- move node
+- resize node
+- rename node

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

@@ -96,6 +96,9 @@ export function CanvasEventTarget({
   const [first_wheel_event, set_first_wheel_event] =
     useState<FullGestureState<"wheel">>();
 
+  // this is a hack to prevent from onDragStart being called even when no movement is detected.
+  const [drag_start_emitted, set_drag_start_emitted] = useState(false);
+
   useGesture(
     {
       onPinch: onZooming,
@@ -150,7 +153,10 @@ export function CanvasEventTarget({
           return;
         }
 
-        onDragStart(s);
+        if (s.delta[0] || s.delta[1]) {
+          onDragStart(s);
+          set_drag_start_emitted(true);
+        }
       },
       onDrag: (s) => {
         if (isSpacebarPressed) {
@@ -161,6 +167,10 @@ export function CanvasEventTarget({
           return;
         }
 
+        if ((s.delta[0] || s.delta[1]) && !drag_start_emitted) {
+          set_drag_start_emitted(true);
+          onDragStart(s);
+        }
         onDrag(s);
       },
       onDragEnd: (s) => {
@@ -169,6 +179,7 @@ export function CanvasEventTarget({
           return;
         }
 
+        set_drag_start_emitted(false);
         onDragEnd(s);
       },
       onMouseDown: onPointerDown,

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

@@ -9,10 +9,15 @@ import {
   OnPointerDownHandler,
   OnDragHandler,
 } from "../canvas-event-target";
-import { get_hovering_target, centerOf } from "../math";
+import {
+  target_of_point,
+  centerOf,
+  edge_scrolling,
+  target_of_area,
+} from "../math";
 import { utils } from "@design-sdk/core";
 import { LazyFrame } from "@code-editor/canvas/lazy-frame";
-import { HudCustomRenderers, HudSurface } from "./hud-surface";
+import { HudCustomRenderers, HudSurface } from "../hud";
 import type { Box, XY, CanvasTransform, XYWH } from "../types";
 import type { FrameOptimizationFactors } from "../frame";
 const designq = utils.query;
@@ -89,7 +94,7 @@ export function Canvas({
   ...props
 }: {
   viewbound: Box;
-  onSelectNode?: (node?: ReflectSceneNode) => void;
+  onSelectNode?: (...node: ReflectSceneNode[]) => void;
   onClearSelection?: () => void;
 } & CanvasCustomRenderers &
   CanvasState & {
@@ -131,6 +136,7 @@ export function Canvas({
     ? [offset[0] / zoom, offset[1] / zoom]
     : [0, 0];
   const [isPanning, setIsPanning] = useState(false);
+  const [isDraggomg, setIsDragging] = useState(false);
   const [marquee, setMarquee] = useState<XYWH>(null);
 
   const cvtransform: CanvasTransform = {
@@ -151,17 +157,46 @@ export function Canvas({
     setHoveringLayer(wshighlight);
   }, [highlightedLayer]);
 
+  // area selection hook
+  useEffect(() => {
+    if (marquee) {
+      const area: XYWH = [
+        marquee[0] / zoom,
+        marquee[1] / zoom,
+        marquee[2] / zoom,
+        marquee[3] / zoom,
+      ];
+
+      const selections = target_of_area({
+        area,
+        tree: nodes,
+        contain: false,
+      });
+
+      // https://stackoverflow.com/a/19746771
+      const same =
+        selectedNodes.length === selections?.length &&
+        selectedNodes.every((value, index) => value === selections[index].id);
+
+      if (!same) {
+        onSelectNode(...selections);
+      }
+    }
+    //
+  }, [marquee]);
+
   const onPointerMove: OnPointerMoveHandler = (state) => {
-    if (isPanning || isZooming) {
+    if (isPanning || isZooming || isDraggomg) {
       // don't perform hover calculation while transforming.
       return;
     }
-    const hovering = get_hovering_target({
+    const hovering = target_of_point({
       point: state.xy,
       tree: nodes,
       zoom: zoom,
       offset: nonscaled_offset,
       margin: LAYER_HOVER_HIT_MARGIN,
+      reverse: true,
     });
 
     if (!hovering) {
@@ -223,27 +258,48 @@ export function Canvas({
     setOffset([newx, newy]);
   };
 
+  const onDragStart: OnDragHandler = (s) => {
+    onClearSelection();
+    setIsDragging(true);
+    setHoveringLayer(null);
+
+    // set the marquee start point
+    const [x, y] = s.initial;
+    const [ox, oy] = offset;
+    const [x1, y1] = [x - ox, y - oy];
+    setMarquee([x1, y1, 0, 0]);
+  };
+
   const onDrag: OnDragHandler = (s) => {
-    const [x1, y1] = s.initial;
-    const [x2, y2] = [
+    const [ox, oy] = offset;
+    const [x, y] = [
       // @ts-ignore
       s.event.clientX,
       // @ts-ignore
       s.event.clientY,
     ];
 
-    const [ox, oy] = offset;
-    const [x, y, w, h] = [
-      x1 - ox,
-      y1 - oy,
-      x2 - x1, // w
-      y2 - y1, // h
-    ];
-    setMarquee([x, y, w, h]);
+    const [x1, y1] = [x - ox, y - oy];
+
+    if (marquee) {
+      const [w, h] = [
+        x1 - marquee[0], // w
+        y1 - marquee[1], // h
+      ];
+      setMarquee([marquee[0], marquee[1], w, h]);
+    }
+
+    // edge scrolling
+    const [cx, cy] = [x, y];
+    const [dx, dy] = edge_scrolling(cx, cy, viewbound);
+    if (dx || dy) {
+      setOffset([ox + dx, oy + dy]);
+    }
   };
 
   const onDragEnd: OnDragHandler = (s) => {
     setMarquee(null);
+    setIsDragging(false);
   };
 
   const is_canvas_transforming = isPanning || isZooming;
@@ -299,8 +355,8 @@ export function Canvas({
         onPointerMoveStart={() => {}}
         onPointerMoveEnd={() => {}}
         onPointerDown={onPointerDown}
+        onDragStart={onDragStart}
         onDrag={onDrag}
-        onDragStart={() => {}} // TODO:
         onDragEnd={onDragEnd}
       >
         <HudSurface
@@ -363,7 +419,7 @@ function CanvasTransformRoot({
         width: 0,
         height: 0,
         willChange: "transform",
-        transform: `scale(${scale}) translateX(${xy[0]}px) translateY(${xy[1]}px)`,
+        transform: `scale(${scale}) translate3d(${xy[0]}px, ${xy[1]}px, 0)`,
         isolation: "isolate",
       }}
     >

editor-packages/editor-canvas/docs/commands.md

@@ -0,0 +1,7 @@
+- move back
+- move front
+
+- copy
+- paste
+- move under parent
+- lock / unlock

editor-packages/editor-canvas/docs/feature-area-selection.md

@@ -0,0 +1,25 @@
+# Area selection (Marquee selection)
+
+> This feature yet does not consider vector networks. (boolean operation)
+
+Keymode
+
+- default
+- cmd
+
+Parameters
+
+- raycast mode:
+  - hit - if the target has an intersection with the area.
+  - contain - if the target is contained in the area.
+- type
+  - frame
+  - group
+  - frame
+  - element (others)
+- is root - this only effects to the frame node.
+
+Final output for painting
+
+- selections (each selection will get a highlight)
+- bounding box (abstract group)

editor-packages/editor-canvas/docs/feature-drag-edge-scrolling.md

@@ -0,0 +1,3 @@
+# Canvas Drag Scroll (Scroll / Pan while dragging)
+
+scroll (translate) a canvas while dragging (marquee, move, resize element). if hit the edge of the canvas, the canvas will scroll.

editor-packages/editor-canvas/docs/hud.md

@@ -0,0 +1,42 @@
+# Hud system
+
+node
+
+- hover outline
+- resize knob
+- rotate knob
+- border radius knob
+- frame title
+- draft editor (text editing)
+- multiplayer cursor
+- resizing size indicator
+- rotating rotation indicator
+
+ruler & guide
+
+- ruler
+- guide (user defined guide line)
+- highlight guide (hovered, selected guide line)
+- snap line (snapping guide line)
+- layout grids (grid-template-columns)
+- spacing guide (size between 2 nodes)
+
+layout
+
+- layout placement guide (preview the place of an moving item after placement inside a certain lyout - row / col)
+
+- interaction knob
+- interaction line
+
+popover
+
+- popovers
+
+feedback (comments)
+
+- pin
+- create pin
+
+vector
+
+- TODO:

editor-packages/editor-canvas/docs/index.md

@@ -0,0 +1 @@
+# Html5 Backend Canvas docs

editor-packages/editor-canvas/flow-connections/arrow.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import type { XY } from "../types";
+
+export function Arrow({
+  b,
+  color,
+  size,
+  width,
+  direction,
+}: {
+  b: XY;
+  color: React.CSSProperties["color"];
+  size: number;
+  width: number;
+  direction: "n" | "s" | "e" | "w";
+}) {
+  return (
+    <path
+      stroke={color}
+      strokeWidth={width}
+      d={make_arrow_svg_path_data(b, direction, {
+        width: size,
+        height: size / 2,
+      })}
+    />
+  );
+}
+
+/**
+ *
+ * the result will have 3 modifiers,
+ * if the arrow is facing right, the modifiers will be:
+ * - M - starting point [edge_x - height, edge_y + width / 2]
+ * - L - edge           [edge_x, edge_y]
+ * - L - ending point   [edge_x - height, edge_y - width / 2]
+ *
+ * @param edge the edge of a arrow (triangle)
+ * @param width
+ */
+function make_arrow_svg_path_data(
+  edge: XY,
+  direction: "n" | "s" | "e" | "w",
+  { width, height }: { width: number; height: number }
+) {
+  const [x, y] = edge;
+  const w = width / 2;
+  switch (direction) {
+    case "e": {
+      return `M${x - height},${y + w} L${x},${y} L${x - height},${y - w}`;
+    }
+    case "w": {
+      return `M${x + height},${y + w} L${x},${y} L${x + height},${y - w}`;
+    }
+    case "n": {
+      return `M${x - w},${y + height} L${x},${y} L${x + w},${y + height}`;
+    }
+    case "s": {
+      return `M${x - w},${y - height} L${x},${y} L${x + w},${y - height}`;
+    }
+    default: {
+      throw new Error(`invalid direction: ${direction}`);
+    }
+  }
+}