Merge pull request #188 from gridaco/staging

Coding playground & transpiler updates

Author: softmarshmallow

CONTRIBUTING.md

@@ -1,4 +1,3 @@
-
 # Installation & Build
 
 ```
@@ -8,20 +7,13 @@ yarn
 yarn editor
 ```
 
-
-## Setup credentials for development
-
-visit http://localhost:6626/preferences/access-tokens and set pats for api calls
-
-
 ## Structure
 
 - editor - visual editor for development
 - editor-packages - editor related packages
 - packages - core packages contributing to the code-gen logic
 - externals - external foundational packages, like [reflect-core](https://github.com/reflect-ui/reflect-core-ts)
 
-
 # Why 6626?
 
 6626 is from `69 68 2 67` Which is a decimal representation of ED2C(Engine: Design 2 Code)

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

@@ -9,6 +9,10 @@ import type {
 
 export type OnPanningHandler = Handler<"wheel", WheelEvent>;
 
+export type OnPanningStartHandler = () => void;
+
+export type OnPanningEndHandler = () => void;
+
 export type OnZoomingHandler = Handler<
   "pinch",
   WheelEvent | PointerEvent | TouchEvent | WebKitGestureEvent
@@ -45,8 +49,8 @@ export function CanvasEventTarget({
   {
     onZoomToFit?: () => void;
     onPanning: OnPanningHandler;
-    onPanningStart: OnPanningHandler;
-    onPanningEnd: OnPanningHandler;
+    onPanningStart: OnPanningStartHandler;
+    onPanningEnd: OnPanningEndHandler;
     onZooming: OnZoomingHandler;
     onZoomingStart: OnZoomingHandler;
     onZoomingEnd: OnZoomingHandler;
@@ -64,37 +68,68 @@ export function CanvasEventTarget({
   const interactionEventTargetRef = useRef();
 
   const [isSpacebarPressed, setIsSpacebarPressed] = useState(false);
+  const [isAuxPressed, setIsAuxPressed] = useState(false);
+
+  const panningMetaKeyPressed = isSpacebarPressed || isAuxPressed;
+
   let platform: PlatformName = "other";
   useEffect(() => {
     platform = getCurrentPlatform(window.navigator);
   });
 
   useEffect(() => {
     const kd = (e) => {
-      // if spacebar is pressed, enable panning wirt dragging.
+      // if spacebar is pressed, enable panning with dragging.
       if (e.code === "Space") {
         setIsSpacebarPressed(true);
       }
+
       // if shift + 0
       else if (e.code === "Digit0" && e.shiftKey) {
         onZoomToFit?.();
       }
     };
     const ku = (e) => {
+      // space bar
       if (e.code === "Space") {
         setIsSpacebarPressed(false);
       }
     };
+    const md = (e) => {
+      // mouse weehl (physical) - as well as space bar, mouse wheel + drag will enable panning.
+      if (e.button === 1) {
+        setIsAuxPressed(true);
+      }
+    };
+
+    const mu = (e) => {
+      // mouse wheel (physical)
+      if (e.button === 1) {
+        setIsAuxPressed(false);
+      }
+    };
 
     document.addEventListener("keydown", kd);
     document.addEventListener("keyup", ku);
+    document.addEventListener("mousedown", md);
+    document.addEventListener("mouseup", mu);
 
     return () => {
       document.removeEventListener("keydown", kd);
       document.removeEventListener("keyup", ku);
+      document.removeEventListener("mousedown", md);
+      document.removeEventListener("mouseup", mu);
     };
   }, []);
 
+  useEffect(() => {
+    if (isAuxPressed) {
+      onPanningStart?.();
+    } else {
+      onPanningEnd?.();
+    }
+  }, [isAuxPressed]);
+
   const transform_wheel_to_zoom = (s) => {
     return {
       ...s,
@@ -148,18 +183,30 @@ export function CanvasEventTarget({
       },
       onWheelStart: (s) => {
         set_first_wheel_event(s);
-        onPanningStart(s);
+        onPanningStart();
         s.event.stopPropagation();
         s.event.preventDefault();
       },
       onWheelEnd: (s) => {
         set_first_wheel_event(undefined);
-        onPanningEnd(s);
+        onPanningEnd();
+      },
+      onMove: (s) => {
+        if (isAuxPressed) {
+          // @ts-ignore
+          onPanning({
+            ...s,
+            // reverse delta
+            delta: [-s.delta[0], -s.delta[1]],
+          });
+          return;
+        } else {
+          onPointerMove(s);
+        }
       },
-      onMove: onPointerMove,
       onDragStart: (s) => {
-        if (isSpacebarPressed) {
-          onPanningStart(s as any);
+        if (panningMetaKeyPressed) {
+          onPanningStart();
           return;
         }
 
@@ -169,7 +216,7 @@ export function CanvasEventTarget({
         }
       },
       onDrag: (s) => {
-        if (isSpacebarPressed) {
+        if (panningMetaKeyPressed) {
           onPanning({
             ...s,
             delta: [-s.delta[0], -s.delta[1]],
@@ -184,8 +231,8 @@ export function CanvasEventTarget({
         onDrag(s);
       },
       onDragEnd: (s) => {
-        if (isSpacebarPressed) {
-          onPanningEnd(s as any);
+        if (panningMetaKeyPressed) {
+          onPanningEnd();
           return;
         }
 
@@ -214,7 +261,7 @@ export function CanvasEventTarget({
         inset: 0,
         overflow: "hidden",
         touchAction: "none",
-        cursor: isSpacebarPressed ? "grab" : cursor,
+        cursor: panningMetaKeyPressed ? "grab" : cursor,
         userSelect: "none",
         WebkitUserSelect: "none",
       }}

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

@@ -29,7 +29,10 @@ import {
   CANVAS_INITIAL_SCALE,
   CANVAS_MIN_ZOOM,
 } from "../k";
-import { ContextMenuRoot as ContextMenu } from "@editor-ui/context-menu";
+import {
+  ContextMenuRoot as ContextMenu,
+  MenuItem,
+} from "@editor-ui/context-menu";
 import styled from "@emotion/styled";
 
 interface CanvasState {
@@ -435,7 +438,8 @@ export function Canvas({
 
   return (
     <>
-      <ContextMenuProvider>
+      <>
+        {/* <ContextMenuProvider> */}
         <Container
         // todo: viewbound not accurate.
         // width={viewbound[2] - viewbound[0]}
@@ -505,7 +509,8 @@ export function Canvas({
             />
           </CanvasEventTarget>
         </Container>
-      </ContextMenuProvider>
+        {/* </ContextMenuProvider> */}
+      </>
       <CanvasBackground backgroundColor={backgroundColor} />
       <CanvasTransformRoot scale={zoom} xy={nonscaled_offset}>
         <DisableBackdropFilter>{items}</DisableBackdropFilter>
@@ -600,18 +605,20 @@ function position_guide({
 }
 
 function ContextMenuProvider({ children }: React.PropsWithChildren<{}>) {
+  const items: MenuItem<string>[] = [
+    { title: "Show all layers", value: "canvas-focus-all-to-fit" },
+    "separator",
+    { title: "Run", value: "run" },
+    { title: "Deploy", value: "deploy-to-vercel" },
+    { title: "Open in Figma", value: "open-in-figma" },
+    { title: "Get sharable link", value: "make-sharable-link" },
+    { title: "Copy CSS", value: "make-css" },
+    { title: "Refresh (fetch from origin)", value: "refresh" },
+  ];
+
   return (
     <ContextMenu
-      items={[
-        { title: "Show all layers", value: "canvas-focus-all-to-fit" },
-        "separator",
-        { title: "Run", value: "run" },
-        { title: "Deploy", value: "deploy-to-vercel" },
-        { title: "Open in Figma", value: "open-in-figma" },
-        { title: "Get sharable link", value: "make-sharable-link" },
-        { title: "Copy CSS", value: "make-css" },
-        { title: "Refresh (fetch from origin)", value: "refresh" },
-      ]}
+      items={items}
       onSelect={(v) => {
         console.log("exec canvas cmd", v);
       }}

editor-packages/editor-canvas/math/target-of-point.ts

@@ -36,6 +36,9 @@ export function target_of_point<T extends Tree>(
   },
   depth = 0
 ): T | undefined {
+  // prevalidators
+  if (!tree) return;
+
   const [ox, oy] = offset;
 
   const items = reverse ? Array.from(tree).reverse() : tree;

editor-packages/editor-module-icons/index.ts

@@ -0,0 +1,7 @@
+export { Css3Icon } from "./module-css3-icon";
+export { ExpoIcon } from "./module-expo-icon";
+export { Html5Icon } from "./module-html5-icon";
+export { FlutterIcon } from "./module-icon-flutter";
+export { ReactIcon } from "./module-icon-react";
+export { SolidJsIcon } from "./module-icon-solid";
+export { SvelteIcon } from "./module-icon-svelte";

editor-packages/editor-module-icons/module-css3-icon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export function Css3Icon({
+  size,
+  color,
+}: {
+  size: number;
+  color: React.CSSProperties["color"];
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M54.1947 56.4142L59.2001 0.341797H4.2583L9.25833 56.423L31.6956 62.6517L54.1947 56.4142ZM31.7052 11.8059H31.7051H14.4818L15.1071 18.6841L31.7052 18.6841L31.7289 18.6841L41.3972 18.6841L40.7713 25.7274H31.7052V25.7279H15.7206L16.337 32.606H31.729V32.6055H40.1749L39.3765 41.5259L31.7052 43.5964V43.5965L31.6991 43.5981L24.0389 41.5297L23.5492 36.0441H19.8269H16.6447L17.6083 46.8437L31.6976 50.755L31.7293 50.7462V50.7456L45.8057 46.8443L45.9092 45.6823L47.5255 27.5744L47.6933 25.7274L48.935 11.8059H31.7289H31.7052Z"
+        fill={color}
+      />
+    </svg>
+  );
+}

editor-packages/editor-module-icons/module-expo-icon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export function ExpoIcon({
+  size,
+  color,
+}: {
+  size: number;
+  color: React.CSSProperties["color"];
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M31.0303 25.3423C31.5383 24.5937 32.094 24.4984 32.5455 24.4984C32.9966 24.4984 33.7478 24.5937 34.2559 25.3423C38.2592 30.8419 44.868 41.7956 49.743 49.8763C52.9218 55.146 55.3635 59.193 55.8645 59.7081C57.7448 61.6418 60.3242 60.4363 61.8227 58.2436C63.2982 56.0843 63.7074 54.5682 63.7074 52.9506C63.7074 51.8489 42.3327 12.0956 40.1801 8.78659C38.11 5.60424 37.4356 4.80005 33.8922 4.80005H31.2408C27.7085 4.80005 27.1978 5.6038 25.1277 8.78659C22.9751 12.096 1.59998 51.8489 1.59998 52.951C1.59998 54.5682 2.00958 56.0843 3.48467 58.2431C4.9836 60.4368 7.56302 61.6418 9.44329 59.7085C9.94426 59.193 12.386 55.146 15.5652 49.8763C20.4394 41.7956 27.027 30.8419 31.0303 25.3423Z"
+        fill={color}
+      />
+    </svg>
+  );
+}

editor-packages/editor-module-icons/module-html5-icon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export function Html5Icon({
+  size,
+  color,
+}: {
+  size: number;
+  color: React.CSSProperties["color"];
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 0L9.13369 57.6218L32.1731 64L55.3058 57.5907L60.4395 0H4ZM14.0631 11.776H31.7665H31.7977H49.4699L48.8166 18.8387H31.7977H31.7665H21.8103L22.4637 26.0726H31.7665H31.7977H48.1787L46.2341 47.7585L31.7977 51.7635V51.8033L17.2989 47.7585L16.3033 36.6666H23.3971L23.8949 42.3137L31.7821 44.4252L39.6537 42.3137L40.4782 33.1353H31.7665V33.1197H15.9921L14.0631 11.776Z"
+        fill={color}
+      />
+    </svg>
+  );
+}

editor-packages/editor-module-icons/module-icon-flutter.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export function FlutterIcon({
+  size,
+  color,
+}: {
+  size: number;
+  color: React.CSSProperties["color"];
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M37.3859 1.62127L56.6024 1.6001L24.3624 33.8236L15.96 42.1789L6.40002 32.6072L37.3859 1.62127ZM37.2071 30.393C37.3835 30.1601 37.6646 30.1731 37.9373 30.1857H37.9373C38.0502 30.1909 38.1616 30.196 38.2636 30.1836L56.5859 30.1883L39.8873 46.8705L39.9271 46.9126L30.28 56.4702L20.6989 46.8867L30.2777 37.3196L30.2779 37.3199L37.2071 30.393ZM39.9272 46.9126L30.2801 56.4702L36.9578 63.1549C37.0023 63.1944 37.0466 63.2387 37.0916 63.2837C37.2775 63.4694 37.477 63.6687 37.7648 63.6044C40.9024 63.5973 44.04 63.5985 47.1779 63.5997C50.3159 63.6008 53.4542 63.602 56.593 63.595L39.9272 46.9126Z"
+        fill={color}
+      />
+    </svg>
+  );
+}