Merge pull request #120 from gridaco/staging

Feb - React Native build support & editor UX improvements

Author: softmarshmallow

.gitmodules

@@ -9,7 +9,7 @@
 	url = https://github.com/gridaco/base-sdk
 [submodule "externals/coli"]
 	path = externals/coli
-	url = https://github.com/bridgedxyz/coli
+	url = https://github.com/gridaco/coli
 [submodule "externals/design-sdk"]
 	path = externals/design-sdk
 	url = https://github.com/gridaco/design-sdk

README.md

@@ -25,6 +25,65 @@ yarn editor
 
 update pulling - `git submodule update --init --recursive`
 
+## Platforms / Frameworks
+
+| **Frameworks**     |       |
+| ------------------ | :---: |
+| ReactJS            |  ✅   |
+| Flutter            |  ✅   |
+| React Native       |  ✅   |
+| Vanilla (html/css) |  ✅   |
+| Vue                | (wip) |
+
+| **ReactJS**         |       |
+| ------------------- | :---: |
+| `styled-components` |  ✅   |
+| `@emotion/styled`   |  ✅   |
+| css-modules         |  ✅   |
+| inline-css          |  ✅   |
+| `@mui/material`     | (wip) |
+| breakpoints         | (wip) |
+| components          | (wip) |
+
+| **ReactNative**                |       |
+| ------------------------------ | :---: |
+| `StyleSheet`                   |  ✅   |
+| `styled-components/native`     |  ✅   |
+| `@emotion/native`              |  ✅   |
+| `react-native-linear-gradient` | (wip) |
+| `react-native-svg`             | (wip) |
+| `expo`                         | (wip) |
+
+| **Vanilla** |               |
+| ----------- | :-----------: |
+| reflect-ui  | right-aligned |
+| css         |      ✅       |
+| scss        |   are neat    |
+
+| **Flutter** |       |
+| ----------- | :---: |
+| material    |  ✅   |
+| cupertino   | (wip) |
+| reflect-ui  | (wip) |
+
+| **Svelte**          |       |
+| ------------------- | :---: |
+| `styled-components` |  ✅   |
+| `@mui/material`     | (wip) |
+
+| **Vue**             |       |
+| ------------------- | :---: |
+| `styled-components` |  ✅   |
+| `@mui/material`     | (wip) |
+
+| **iOS** |       |
+| ------- | :---: |
+| SwiftUI | (wip) |
+
+| **Android**     |       |
+| --------------- | :---: |
+| Jetpack Compose | (wip) |
+
 ## What does it mean?
 
 ### By "design". What does it mean?

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

@@ -4,6 +4,7 @@ import type {
   Handler,
   WebKitGestureEvent,
   SharedGestureState,
+  FullGestureState,
 } from "@use-gesture/react";
 
 export type OnPanningHandler = Handler<"wheel", WheelEvent>;
@@ -15,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;
@@ -32,6 +35,9 @@ export function CanvasEventTarget({
   onPointerMoveStart,
   onPointerMoveEnd,
   onPointerDown,
+  onDrag,
+  onDragStart,
+  onDragEnd,
   children,
 }: {
   onPanning: OnPanningHandler;
@@ -44,6 +50,9 @@ export function CanvasEventTarget({
   onPointerMoveStart: OnPointerMoveHandler;
   onPointerMoveEnd: OnPointerMoveHandler;
   onPointerDown: OnPointerDownHandler;
+  onDrag: OnDragHandler;
+  onDragStart: OnDragHandler;
+  onDragEnd: OnDragHandler;
   children?: React.ReactNode;
 }) {
   const interactionEventTargetRef = useRef();
@@ -84,6 +93,9 @@ export function CanvasEventTarget({
     };
   };
 
+  const [first_wheel_event, set_first_wheel_event] =
+    useState<FullGestureState<"wheel">>();
+
   useGesture(
     {
       onPinch: onZooming,
@@ -99,40 +111,65 @@ export function CanvasEventTarget({
           return;
         } else {
           // only for mac
-          if (s.metaKey) {
+          // TODO: on firefox, cmd + scroll resizes the window zoom level. this should be prevented.
+          if (s.metaKey && first_wheel_event?.metaKey) {
             onZooming(transform_wheel_to_zoom(s));
-            // TODO: on firefox, cmd + scroll resizes the window zoom level. this should be prevented.
             return;
           }
+          if (first_wheel_event && first_wheel_event.metaKey) {
+            if (
+              Math.sign(first_wheel_event.direction[0]) ==
+              Math.sign(s.direction[0])
+            ) {
+              onZooming(transform_wheel_to_zoom(s));
+              return;
+            } else {
+              // direction inverted, setting new state.
+              set_first_wheel_event(s);
+            }
+          }
         }
         onPanning(s);
         s.event.stopPropagation();
         s.event.preventDefault();
       },
       onWheelStart: (s) => {
+        set_first_wheel_event(s);
         onPanningStart(s);
         s.event.stopPropagation();
         s.event.preventDefault();
       },
-      onWheelEnd: onPanningEnd,
+      onWheelEnd: (s) => {
+        set_first_wheel_event(undefined);
+        onPanningEnd(s);
+      },
       onMove: onPointerMove,
       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;
 
@@ -48,10 +49,23 @@ type CanvasCustomRenderers = HudCustomRenderers & {
 
 interface CanvsPreferences {
   can_highlight_selected_layer?: boolean;
+  marquee: MarqueeOprions;
+}
+
+interface MarqueeOprions {
+  /**
+   * disable marquee - events and selection with dragging.
+   *
+   * @default false
+   */
+  disabled?: boolean;
 }
 
 const default_canvas_preferences: CanvsPreferences = {
   can_highlight_selected_layer: false,
+  marquee: {
+    disabled: false,
+  },
 };
 
 interface HovringNode {
@@ -117,6 +131,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 +223,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))
@@ -217,6 +256,9 @@ export function Canvas({
       node["filekey"] = filekey;
       return (
         <LazyFrame key={node.id} xy={[node.x, node.y]} size={node}>
+          {/* 👇 dev only (for performance tracking) 👇 */}
+          {/* <div style={{ width: "100%", height: "100%", background: "grey" }} /> */}
+          {/* 👆 ----------------------------------- 👆 */}
           {renderItem({
             node: node as ReflectSceneNode & { filekey: string },
             zoom, // ? use scaled_zoom ?
@@ -257,12 +299,17 @@ 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}
+          disableMarquee={config.marquee.disabled}
+          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,8 @@ export function HudSurface({
   readonly,
   onSelectNode,
   onHoverNode,
+  marquee,
+  disableMarquee = false,
   //
   renderFrameTitle = frame_title_default_renderer,
 }: {
@@ -43,6 +45,8 @@ export function HudSurface({
   labelDisplayNodes: DisplayNodeMeta[];
   selectedNodes: DisplayNodeMeta[];
   hide: boolean;
+  marquee?: XYWH;
+  disableMarquee?: boolean;
   readonly: boolean;
 } & HudControls &
   HudCustomRenderers) {
@@ -63,6 +67,7 @@ export function HudSurface({
       }}
       id="hud-surface"
     >
+      {!disableMarquee && marquee && <Marquee rect={marquee} />}
       {!hide && (
         <>
           {labelDisplayNodes &&

editor-packages/editor-canvas/marquee/README.md

@@ -0,0 +1,3 @@
+# Marquee (Drag selection)
+
+This directory only contributes to the drawn visible area of the drag, not contributes or contains any logic related to selection calculation. - VIEW ONLY COMPONENT.

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>
+  );
+}

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

@@ -55,8 +55,6 @@ export function centerOf(
     vbcenter[1] - boxcenter[1] * scale,
   ];
 
-  console.log(translate, scale);
-
   return {
     box: box,
     center: boxcenter,