add marquee

Author: softmarshmallow

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

@@ -16,6 +16,8 @@ export type OnZoomingHandler = Handler<
 
 export type OnPointerMoveHandler = Handler<"move">;
 
+export type OnDragHandler = Handler<"drag">;
+
 export type OnPointerDownHandler = (
   e: { event: React.MouseEvent<EventTarget, MouseEvent> } & SharedGestureState
 ) => void;
@@ -33,6 +35,9 @@ export function CanvasEventTarget({
   onPointerMoveStart,
   onPointerMoveEnd,
   onPointerDown,
+  onDrag,
+  onDragStart,
+  onDragEnd,
   children,
 }: {
   onPanning: OnPanningHandler;
@@ -45,6 +50,9 @@ export function CanvasEventTarget({
   onPointerMoveStart: OnPointerMoveHandler;
   onPointerMoveEnd: OnPointerMoveHandler;
   onPointerDown: OnPointerDownHandler;
+  onDrag: OnDragHandler;
+  onDragStart: OnDragHandler;
+  onDragEnd: OnDragHandler;
   children?: React.ReactNode;
 }) {
   const interactionEventTargetRef = useRef();
@@ -139,20 +147,29 @@ export function CanvasEventTarget({
       onDragStart: (s) => {
         if (isSpacebarPressed) {
           onPanningStart(s as any);
+          return;
         }
+
+        onDragStart(s);
       },
       onDrag: (s) => {
         if (isSpacebarPressed) {
           onPanning({
             ...s,
             delta: [-s.delta[0], -s.delta[1]],
           } as any);
+          return;
         }
+
+        onDrag(s);
       },
       onDragEnd: (s) => {
         if (isSpacebarPressed) {
           onPanningEnd(s as any);
+          return;
         }
+
+        onDragEnd(s);
       },
       onMouseDown: onPointerDown,
       onMoveStart: onPointerMoveStart,

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

@@ -7,12 +7,13 @@ import {
   OnZoomingHandler,
   OnPointerMoveHandler,
   OnPointerDownHandler,
+  OnDragHandler,
 } from "../canvas-event-target";
 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 { Box, XY, CanvasTransform } from "../types";
+import type { Box, XY, CanvasTransform, XYWH } from "../types";
 import type { FrameOptimizationFactors } from "../frame";
 const designq = utils.query;
 
@@ -117,6 +118,8 @@ export function Canvas({
     ? [offset[0] / zoom, offset[1] / zoom]
     : [0, 0];
   const [isPanning, setIsPanning] = useState(false);
+  const [marquee, setMarquee] = useState<XYWH>(null);
+
   const cvtransform: CanvasTransform = {
     scale: zoom,
     xy: offset,
@@ -207,6 +210,29 @@ export function Canvas({
     setOffset([newx, newy]);
   };
 
+  const onDrag: OnDragHandler = (s) => {
+    const [x1, y1] = s.initial;
+    const [x2, y2] = [
+      // @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 onDragEnd: OnDragHandler = (s) => {
+    setMarquee(null);
+  };
+
   const is_canvas_transforming = isPanning || isZooming;
   const selected_nodes = selectedNodes
     ?.map((id) => designq.find_node_by_id_under_inpage_nodes(id, nodes))
@@ -257,12 +283,16 @@ export function Canvas({
         onPointerMoveStart={() => {}}
         onPointerMoveEnd={() => {}}
         onPointerDown={onPointerDown}
+        onDrag={onDrag}
+        onDragStart={() => {}} // TODO:
+        onDragEnd={onDragEnd}
       >
         <HudSurface
           offset={nonscaled_offset}
           zoom={zoom}
           hide={is_canvas_transforming}
           readonly={readonly}
+          marquee={marquee}
           labelDisplayNodes={nodes}
           selectedNodes={selected_nodes}
           highlights={

editor-packages/editor-canvas/canvas/hud-surface.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { HoverOutlineHighlight, ReadonlySelectHightlight } from "../overlay";
 import { FrameTitle, FrameTitleProps } from "../frame-title";
 import type { XY, XYWH } from "../types";
-
+import { Marquee } from "../marquee";
 interface HudControls {
   onSelectNode: (node: string) => void;
   onHoverNode: (node: string) => void;
@@ -34,6 +34,7 @@ export function HudSurface({
   readonly,
   onSelectNode,
   onHoverNode,
+  marquee,
   //
   renderFrameTitle = frame_title_default_renderer,
 }: {
@@ -43,6 +44,7 @@ export function HudSurface({
   labelDisplayNodes: DisplayNodeMeta[];
   selectedNodes: DisplayNodeMeta[];
   hide: boolean;
+  marquee?: XYWH;
   readonly: boolean;
 } & HudControls &
   HudCustomRenderers) {
@@ -63,6 +65,7 @@ export function HudSurface({
       }}
       id="hud-surface"
     >
+      {marquee && <Marquee rect={marquee} />}
       {!hide && (
         <>
           {labelDisplayNodes &&

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

@@ -0,0 +1 @@
+export { Marquee } from "./marquee";

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

@@ -0,0 +1,39 @@
+import React from "react";
+import type { XYWH } from "../types";
+
+const canvasSelectionRectBackgroundColor = "rgba(0, 87, 255, 0.15)";
+const canvasSelectionRectBorderColor = "rgb(0, 87, 255)";
+
+export function Marquee({ rect }: { rect: XYWH }) {
+  const [x, y, ow, oh] = rect;
+
+  let [w, h, r] = [ow, oh, 0];
+  if (w < 0 && h >= 0) {
+    w = oh;
+    h = ow;
+    r = 90;
+  } else if (h < 0 && w >= 0) {
+    r = -90;
+    w = oh;
+    h = ow;
+  } else if (w < 0 && h < 0) {
+    r = 180;
+  } else {
+    r = 0;
+  }
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        backgroundColor: canvasSelectionRectBackgroundColor,
+        width: Math.abs(w),
+        height: Math.abs(h),
+        willChange: "transform, opacity",
+        transformOrigin: "0px 0px",
+        transform: `translateX(${x}px) translateY(${y}px) rotate(${r}deg)`,
+        border: `${canvasSelectionRectBorderColor} 1px solid`,
+      }}
+    ></div>
+  );
+}