2022W49 - Isolated Inspection mode & Improved Scenes Management (WIP)

CONTRIBUTING.md

@@ -14,6 +14,11 @@ yarn editor
 - 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?
+## QnA
 
-6626 is from `69 68 2 67` Which is a decimal representation of ED2C(Engine: Design 2 Code)
+- Why 6626? - 6626 is from `69 68 2 67` Which is a decimal representation of ED2C(Engine: Design 2 Code)
+
+## Utilities
+
+- npx npkill to clean all node_modules folders
+- clean: `npx npkill && rm -rf yarn.lock`

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

@@ -35,6 +35,7 @@ import {
   MenuItem,
 } from "@editor-ui/context-menu";
 import styled from "@emotion/styled";
+import toast from "react-hot-toast";
 
 interface CanvasState {
   pageid: string;
@@ -44,6 +45,10 @@ interface CanvasState {
   highlightedLayer?: string;
   selectedNodes: string[];
   readonly?: boolean;
+  /**
+   * displays the debug info on the canvas.
+   */
+  debug?: boolean;
   /**
    * when provided, it will override the saved value or centering logic and use this transform as initial instead.
    *
@@ -101,6 +106,10 @@ const default_canvas_preferences: CanvsPreferences = {
 
 type CanvasProps = CanvasFocusProps &
   CanvasCursorOptions & {
+    /**
+     * canvas view bound.
+     * [(x1) left, (y1) top, (x2) right, (y2) bottom]
+     */
     viewbound: Box;
     onSelectNode?: (...node: ReflectSceneNode[]) => void;
     onMoveNodeStart?: (...node: string[]) => void;
@@ -158,6 +167,7 @@ export function Canvas({
   initialTransform,
   highlightedLayer,
   selectedNodes,
+  debug,
   readonly = true,
   config = default_canvas_preferences,
   backgroundColor,
@@ -225,7 +235,9 @@ export function Canvas({
     setZoom(_focus_center.scale);
   }, [...focus, focusRefreshKey, viewboundmeasured]);
 
-  const [transformIntitialized, setTransformInitialized] = useState(false);
+  const [transformIntitialized, setTransformInitialized] = useState(
+    !!initialTransform
+  );
   const [zoom, setZoom] = useState(initialTransform?.scale || 1);
   const [isZooming, setIsZooming] = useState(false);
   const [offset, setOffset] = useState<[number, number]>(
@@ -429,19 +441,25 @@ export function Canvas({
       onMoveNode?.([dx / zoom, dy / zoom], ...selectedNodes);
     }
 
-    if (marquee) {
-      const [w, h] = [
-        x1 - marquee[0], // w
-        y1 - marquee[1], // h
-      ];
-      setMarquee([marquee[0], marquee[1], w, h]);
-    }
+    if (config.marquee.disabled) {
+      // skip
+    } else {
+      // edge scrolling
+      // edge scrolling is only enabled when config#marquee is enabled
+      const [cx, cy] = [x, y];
+      const [dx, dy] = edge_scrolling(cx, cy, viewbound);
+      if (dx || dy) {
+        setOffset([ox + dx, oy + dy]);
+      }
 
-    // edge scrolling
-    const [cx, cy] = [x, y];
-    const [dx, dy] = edge_scrolling(cx, cy, viewbound);
-    if (dx || dy) {
-      setOffset([ox + dx, oy + dy]);
+      // update marquee & following selections via effect
+      if (marquee) {
+        const [w, h] = [
+          x1 - marquee[0], // w
+          y1 - marquee[1], // h
+        ];
+        setMarquee([marquee[0], marquee[1], w, h]);
+      }
     }
   };
 
@@ -504,11 +522,35 @@ export function Canvas({
   return (
     <>
       <>
+        {debug === true && (
+          <Debug
+            infos={[
+              { label: "zoom", value: zoom },
+              { label: "offset", value: offset.join(", ") },
+              { label: "isPanning", value: isPanning },
+              { label: "isZooming", value: isZooming },
+              { label: "isDragging", value: isDragging },
+              { label: "isMovingSelections", value: isMovingSelections },
+              { label: "isTransforming", value: is_canvas_transforming },
+              { label: "selectedNodes", value: selectedNodes.join(", ") },
+              { label: "hoveringLayer", value: hoveringLayer?.node?.id },
+              { label: "marquee", value: marquee?.join(", ") },
+              { label: "viewbound", value: viewbound.join(", ") },
+              {
+                label: "initial-transform (xy)",
+                value: initialTransform ? initialTransform.xy.join(", ") : null,
+              },
+              {
+                label: "initial-transform (zoom)",
+                value: initialTransform ? initialTransform.scale : null,
+              },
+            ]}
+          />
+        )}
         {/* <ContextMenuProvider> */}
         <Container
-        // todo: viewbound not accurate.
-        // width={viewbound[2] - viewbound[0]}
-        // height={viewbound[3] - viewbound[1]}
+          width={viewbound[2] - viewbound[0]}
+          height={viewbound[3] - viewbound[1]}
         >
           <CanvasEventTarget
             onPanning={onPanning}
@@ -524,6 +566,7 @@ export function Canvas({
               // const newoffset = zoomToFit(viewbound, offset, zoom, 1);
               // setOffset(newoffset);
               _canvas_state_store.saveLastTransform(cvtransform);
+              toast("Zoom to 100%");
             }}
             onZooming={onZooming}
             onZoomingStart={() => {
@@ -585,12 +628,10 @@ export function Canvas({
   );
 }
 
-const Container = styled.div`
-  min-width: 240px;
-  min-height: 240px;
+const Container = styled.div<{ width: number; height: number }>`
+  /* width: ${(p) => p.width}px; */
+  /* height: ${(p) => p.height}px; */
 `;
-/* width: ${(p) => p.width}px; */
-/* height: ${(p) => p.height}px; */
 
 /**
  * 1. container positioning guide (static per selection)
@@ -713,9 +754,10 @@ function DisableBackdropFilter({ children }: { children: React.ReactNode }) {
 function CanvasBackground({ backgroundColor }: { backgroundColor?: string }) {
   return (
     <div
+      id="canvas-background"
       style={{
         zIndex: -2,
-        position: "fixed",
+        position: "absolute",
         top: 0,
         left: 0,
         width: "100%",
@@ -786,3 +828,39 @@ const viewbound_not_measured = (viewbound: Box) => {
       viewbound[3] === 0)
   );
 };
+
+function Debug({
+  infos,
+}: {
+  infos: { label: string; value: string | number | boolean }[];
+}) {
+  return (
+    <DebugInfoContainer>
+      {infos.map(({ label, value }, i) => {
+        if (value === undefined || value === null) {
+          return <></>;
+        }
+        return (
+          <div key={i}>
+            {label}: {JSON.stringify(value)}
+          </div>
+        );
+      })}
+    </DebugInfoContainer>
+  );
+}
+
+const DebugInfoContainer = styled.div`
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+  color: white;
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  font-family: monospace;
+  line-height: 1.2;
+  white-space: pre;
+`;

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

@@ -63,6 +63,11 @@ export function centerOf(
     vbcenter[1] - boxcenter[1] * scale,
   ];
 
+  // apply viewbound's offset to the translate.
+  // (this works, but not fully tested)
+  translate[0] -= viewbound[0];
+  translate[1] -= viewbound[1];
+
   return {
     box: box,
     center: boxcenter,

editor-packages/editor-canvas/math/viewbound-edge-scrolling.ts

@@ -16,7 +16,7 @@
  *
  * @param cx x coordinate of the cursor
  * @param cy y coordinate of the cursor
- * @param viewbound the viewbound of the canvas (l, t, b, r)
+ * @param viewbound the viewbound of the canvas (l x1, t y1, r x2, b y2)
  * @param margin the margin value (default 40px)
  * @param factor the returned value will be multiplied by this factor (default 1/4)
  *
@@ -29,7 +29,7 @@ export function edge_scrolling(
   margin = 40,
   factor = 1 / 4
 ): [number, number] {
-  const [l, t, b, r] = viewbound;
+  const [l, t, r, b] = viewbound;
   let [dx, dy] = [0, 0];
 
   if (cx < l + margin) {

editor-packages/editor-dashboard/components/dashbaord-grid-placement-auxilary-drop-guide.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import styled from "@emotion/styled";
+import assert from "assert";
+
+export type AuxilaryGridDropGuideLeftOrRightSpecification = {
+  left?: boolean;
+  right?: boolean;
+};
+type AuxilaryGridDropGuide = AuxilaryGridDropGuideLeftOrRightSpecification & {
+  onClick?: () => void;
+  over?: boolean;
+};
+
+/**
+ * This is a guide placed between items
+ *
+ * Functions
+ * 1. Highlight on drop
+ * 2. Highlight on hover (if new section can be created)
+ */
+export const AuxilaryDashbaordGridPlacementGuide = React.forwardRef(function (
+  { left, right, over, onClick }: AuxilaryGridDropGuide,
+  ref: React.Ref<HTMLDivElement>
+) {
+  assert(left !== right, 'You can only have one of "left" or "right"');
+
+  return (
+    <Guide
+      ref={ref}
+      onClick={onClick}
+      data-over={over}
+      data-left={left}
+      data-right={right}
+    />
+  );
+});
+
+const GUIDE_MARGIN = 4;
+const GUIDE_ACCESSIBLE_WIDTH = 32;
+
+const Guide = styled.div`
+  --guide-margin-vertical: 24px;
+  --color-highlight: rgb(0, 179, 255);
+
+  position: absolute;
+  width: ${GUIDE_ACCESSIBLE_WIDTH}px;
+  top: var(--guide-margin-vertical);
+  bottom: calc(var(--guide-margin-vertical) + 44px);
+
+  &[data-left="true"] {
+    left: ${-(GUIDE_MARGIN + GUIDE_ACCESSIBLE_WIDTH)}px;
+  }
+
+  &[data-right="true"] {
+    right: ${-(GUIDE_MARGIN + GUIDE_ACCESSIBLE_WIDTH)}px;
+  }
+
+  ::after {
+    content: "";
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    /* center under parent */
+    left: 50%;
+
+    width: 2px;
+    height: 100%;
+    background: var(--color-highlight);
+
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &[data-over="true"] {
+    ::after {
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    ::after {
+      opacity: 1;
+    }
+  }
+`;

editor-packages/editor-dashboard/components/dashboard-item-card-scene.tsx

@@ -7,6 +7,8 @@ import {
   DashboardItemCardProps,
 } from "./dashboard-item-card";
 
+const MAX_WIDTH = 240;
+
 type SceneMeta = {
   id: string;
   filekey: string;
@@ -34,6 +36,7 @@ function SceneCardPreview({
   return (
     <div
       ref={visibilityRef}
+      className="scale-on-over"
       style={{
         height: height * scale,
         width: maxWidth,
@@ -79,7 +82,7 @@ export const SceneCard = React.forwardRef(function (
       {...props}
       label={scene.name}
       icon={<SceneNodeIcon type={scene.type} color="white" />}
-      preview={<SceneCardPreview scene={scene} maxWidth={300} />}
+      preview={<SceneCardPreview scene={scene} maxWidth={MAX_WIDTH} />}
     />
   );
 });

editor-packages/editor-dashboard/components/dashboard-item-card.tsx

@@ -114,6 +114,7 @@ const Card = styled.div`
 `;
 
 const PreviewContainer = styled.div`
+  --color-highlight: rgb(0, 179, 255);
   outline: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   overflow: hidden;
@@ -136,20 +137,31 @@ const PreviewContainer = styled.div`
     transition: all 0.2s ease-in-out;
   }
 
+  .scale-on-over {
+    overflow: hidden;
+    will-change: transform;
+    transition: all 0.2s ease-in-out;
+  }
+
   &[data-selected="true"] {
-    outline: 4px solid rgb(0, 179, 255);
+    outline: 4px solid var(--color-highlight);
 
     #overlay {
       display: block;
     }
   }
 
   &[data-over="true"] {
-    outline: 4px solid rgb(0, 179, 255);
+    outline: 4px solid var(--color-highlight);
 
     #view {
       opacity: 0.5;
     }
+
+    .scale-on-over {
+      border-radius: 5px;
+      transform: scale(0.85);
+    }
   }
 
   transition: all 0.2s ease-in-out;