add canvas support with panning & centering

Author: softmarshmallow

editor/components/canvas/controller-zoom-control.tsx

@@ -7,12 +7,14 @@ export function ZoomControl({
   scale,
   stepper,
   onChange,
+  onReset,
 }: {
   onChange: (scale: number) => void;
   resetControl?: boolean;
   select?: boolean;
   stepper?: boolean;
   scale: number;
+  onReset?: () => void;
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const displayScale = (scale * 100).toFixed(0);
@@ -56,7 +58,9 @@ export function ZoomControl({
           </Valuedisplay>
           {scale !== 1 && (
             <RefreshSharpIcon
-              onClick={() => onChange(1)}
+              onClick={() => {
+                onReset?.();
+              }}
               style={{ color: "white", fontSize: 18 }}
             />
           )}

editor/components/canvas/interactive-canvas.tsx

@@ -1,42 +1,107 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
-import { usePinch } from "@use-gesture/react";
+import { useGesture } from "@use-gesture/react";
 import { Resizable } from "re-resizable";
 import { ZoomControl } from "./controller-zoom-control";
 
+/**
+ * A React Hook that returns a delta state.
+ * When user completely stops interacting, after a short delay (600ms), set the value to false.
+ * When user starts interacting, immidiately set the value to true.
+ *
+ * the condition rather if the user is currently interacting or not is set on higher level, which this function accepts the condition as a parameter.
+ * @param interacting
+ */
+function useIsInteractingDelta(interacting: boolean) {
+  throw new Error("Not implemented");
+}
+
 export function InteractiveCanvas({
   children,
   defaultSize,
 }: {
   defaultSize: { width: number; height: number };
   children?: React.ReactNode;
 }) {
-  const [scale, setScale] = useState(1);
+  const __canvas_width = 800;
+  const __canvas_height = 900;
+  const __margin = 20;
+  const __y_start =
+    defaultSize.height < __canvas_height - __margin * 2
+      ? (__canvas_height - defaultSize.height) / 2
+      : __margin;
+  const __initial_xy = [0, __y_start] as [number, number];
+  const __initial_scale =
+    defaultSize.width > __canvas_width
+      ? (__canvas_width - __margin * 2) / defaultSize.width
+      : 1;
+
+  const [scale, setScale] = useState(__initial_scale);
+  const [xy, setXY] = useState<[number, number]>(__initial_xy);
+
+  const [isPanning, setIsPanning] = useState(false);
+  const [isZooming, setIsZooming] = useState(false);
+  const isDeltaInteracting = isPanning || isZooming;
+
+  const ref = useRef();
+
+  useGesture(
+    {
+      onPinch: (state) => {
+        setIsZooming(state.pinching);
+        setScale(Math.max(scale + state.delta[0], 0.1));
+      },
+      onWheel: ({ delta: [x, y], wheeling }) => {
+        setIsPanning(wheeling);
+        setXY([xy[0] - x / scale, xy[1] - y / scale]);
+      },
+    },
+    { target: ref }
+  );
 
   return (
     <InteractiveCanvasWrapper id="interactive-canvas">
-      <ScalableFrame onRescale={setScale} scale={scale}>
+      <div
+        id="event-listener"
+        ref={ref}
+        style={{
+          flexGrow: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
         <Controls>
-          <ZoomControl scale={scale} onChange={setScale} />
+          <ZoomControl
+            onReset={() => {
+              setScale(__initial_scale);
+              setXY(__initial_xy);
+            }}
+            scale={scale}
+            onChange={setScale}
+          />
         </Controls>
-        <ScalingAreaStaticRoot>
-          <ScalingArea scale={scale}>
-            <ResizableFrame defaultSize={defaultSize} scale={scale}>
-              {children}
-            </ResizableFrame>
-          </ScalingArea>
-        </ScalingAreaStaticRoot>
-      </ScalableFrame>
+        {/* <ScalingAreaStaticRoot> */}
+        <TransformContainer
+          scale={scale}
+          xy={xy}
+          isTransitioning={isDeltaInteracting}
+        >
+          <ResizableFrame defaultSize={defaultSize} scale={scale}>
+            {children}
+          </ResizableFrame>
+        </TransformContainer>
+        {/* </ScalingAreaStaticRoot> */}
+      </div>
     </InteractiveCanvasWrapper>
   );
 }
 
 const InteractiveCanvasWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  /* overflow-y: auto; */
-  overflow-x: hidden;
-  flex: 1;
+  overflow: hidden;
+  flex-grow: 1;
 `;
 
 const Controls = styled.div`
@@ -46,67 +111,23 @@ const Controls = styled.div`
   justify-content: flex-end;
 `;
 
-const ScalingAreaStaticRoot = styled.div`
-  display: flex;
-  align-items: flex-start; // when transform origin is top center.
-  padding-top: 20px;
-  justify-content: center;
-  align-content: flex-start;
-  align-self: stretch;
-  flex: 1;
-  max-height: 100vh; // TODO: make dynamic
-`;
-
-function ScalableFrame({
-  children,
-  scale,
-  onRescale,
-}: {
-  scale: number;
-  onRescale?: (scale: number) => void;
-  children?: React.ReactNode;
-}) {
-  const ref = useRef();
-
-  usePinch(
-    (state) => {
-      const prevscale = scale;
-      const { offset } = state;
-      const thisscale = offset[0];
-      // const newscale = thisscale - prevscale;
-      onRescale(thisscale);
-    },
-    { target: ref }
-  );
-
-  return (
-    <div
-      id="scale-event-listener"
-      ref={ref}
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        flex: 1,
-        alignItems: "center",
-        alignContent: "center",
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-const ScalingArea = ({
+const TransformContainer = ({
   scale,
   children,
+  xy,
+  isTransitioning,
 }: {
   scale: number;
+  xy: [number, number];
+  isTransitioning: boolean;
   children: React.ReactNode;
 }) => {
   return (
     <div
       style={{
-        transform: `scale(${scale})`,
+        pointerEvents: isTransitioning ? "none" : undefined,
+        transform: `scale(${scale}) translateX(${xy[0]}px) translateY(${xy[1]}px)`,
+        willChange: "transform",
         transformOrigin: "top center",
       }}
     >

editor/pages/_app.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Global, css } from "@emotion/react";
 import Head from "next/head";
 import { EditorThemeProvider } from "@editor-ui/theme";
 import { colors } from "theme";
+import { useRouter } from "next/router";
 
 function GlobalCss() {
   return (
@@ -17,6 +18,10 @@ function GlobalCss() {
           margin: 0px;
           padding: 0;
           font-family: "Helvetica Nueue", "Roboto", sans-serif;
+
+          /* for editor canvas */
+          overscroll-behavior-x: none;
+          overscroll-behavior-y: none;
         }
 
         iframe {
@@ -106,6 +111,38 @@ function SeoMeta() {
 }
 
 function EditorApp({ Component, pageProps }) {
+  const router = useRouter();
+  const _path = router.asPath.replace("/", "");
+  const analyzed = analyze_dynamic_input(_path);
+  useEffect(() => {
+    if (pageProps.statusCode == 404 && analyzed) {
+      switch (analyzed.ns) {
+        case "figma": {
+          const { file, node } = parseFileAndNodeId(_path) ?? {};
+          switch (analyzed.result) {
+            case "node": {
+              router.replace("/files/[key]/[node]", `/files/${file}/${node}`);
+              break;
+            }
+            case "file": {
+              router.replace("/files/[key]", `/files/${file}`);
+              break;
+            }
+            case "empty":
+            default: {
+              break;
+            }
+          }
+          break;
+        }
+        case "unknown":
+        default: {
+          break;
+        }
+      }
+    }
+  }, [analyzed]);
+
   return (
     <React.Fragment>
       <HeadInjection />
@@ -117,3 +154,32 @@ function EditorApp({ Component, pageProps }) {
 }
 
 export default EditorApp;
+
+import {
+  analyze as figmaurlAnalize,
+  parseFileAndNodeId,
+} from "@design-sdk/figma-url";
+
+function analyze_dynamic_input(input: string) {
+  const _isurl = isurl(input);
+  if (_isurl) {
+    return {
+      ns: "figma",
+      result: figmaurlAnalize(input),
+    };
+  }
+
+  return {
+    ns: "unknown",
+    result: input,
+  };
+}
+
+const isurl = (s: string) => {
+  try {
+    new URL(s);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};