Merge pull request #191 from gridaco/staging

2022W48 Improved Dashboard interface & new 3D Inspector

Author: softmarshmallow

…affolds/preview-canvas/image-preview.tsx …rer-bitmap/figma-node-bitmap-preview.tsxeditor/scaffolds/preview-canvas/image-preview.tsx renamed to editor-packages/editor-canvas-renderer-bitmap/figma-node-bitmap-preview.tsx editor/scaffolds/preview-canvas/image-preview.tsx renamed to editor-packages/editor-canvas-renderer-bitmap/figma-node-bitmap-preview.tsx

@@ -1,27 +1,62 @@
 import React, { useState, useEffect } from "react";
-import { ReflectSceneNode } from "@design-sdk/figma-node";
+import type { ReflectSceneNode } from "@design-sdk/figma-node";
 import type { FrameOptimizationFactors } from "@code-editor/canvas/frame";
-import { blurred_bg_fill } from "./util";
+import { blurred_bg_fill } from "@code-editor/canvas-renderer-core";
 import { CircularProgress } from "@mui/material";
-import { useFigmaImageService } from "scaffolds/editor";
+
+interface BitmapPreviewService {
+  fetch: (
+    id: string,
+    options?: {
+      scale?: number;
+    }
+  ) => Promise<string>;
+}
+
+const Context = React.createContext<BitmapPreviewService>(null);
+
+const usefigmaBitmapPreviewService = () => {
+  const context = React.useContext(Context);
+  if (!context || typeof context.fetch !== "function") {
+    throw new Error(
+      "Bitmap service is not available. Are you sure you have an <FigmaNodeBitmapPreviewServiceProvider> above your consumers?"
+    );
+  }
+  return context;
+};
+
+export function FigmaNodeBitmapPreviewServiceProvider({
+  children,
+  service,
+}: React.PropsWithChildren<{ service: BitmapPreviewService }>) {
+  return <Context.Provider value={service}>{children}</Context.Provider>;
+}
+
+type TargetSceneMeta = {
+  id: string;
+  filekey: ReflectSceneNode["filekey"];
+  name: string;
+  width: number;
+  height: number;
+};
 
 /**
  * 1 = 1 scale
  * s = 0.2 scale
  */
 type ImageSizeVariant = "1" | "s";
 
-export function FigmaStaticImageFrameView({
+export function FigmaNodeBitmapView({
   target,
   zoom,
   inViewport,
   background,
 }: {
-  target: ReflectSceneNode;
+  target: TargetSceneMeta;
 } & FrameOptimizationFactors & {
     background?: React.CSSProperties["background"];
   }) {
-  const service = useFigmaImageService();
+  const service = usefigmaBitmapPreviewService();
   const { filekey: _fk, id, width, height } = target;
   const filekey = _fk as string;
 
@@ -44,19 +79,17 @@ export function FigmaStaticImageFrameView({
 
     if (service) {
       service
-        .fetch(id, {
-          debounce: true,
-          ensure: true,
-        })
+        .fetch(id)
         .then((res) => {
-          const src = res[id];
+          const src = res;
           set_image(src);
         })
         .catch(console.error);
     }
   }, [filekey, id, service, inViewport]);
 
-  const bg_color_str = blurred_bg_fill(target);
+  const bg_color_str =
+    "fills" in target ? blurred_bg_fill(target["fills"] as any) : "white";
 
   return (
     <div

editor-packages/editor-canvas-renderer-bitmap/index.ts

@@ -0,0 +1,4 @@
+export {
+  FigmaNodeBitmapPreviewServiceProvider,
+  FigmaNodeBitmapView,
+} from "./figma-node-bitmap-preview";

editor-packages/editor-canvas-renderer-bitmap/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@code-editor/canvas-renderer-bitmap",
+  "version": "0.0.0"
+}

…ckages/editor-module-icons/tsconfig.json …tor-canvas-renderer-bitmap/tsconfig.jsoneditor-packages/editor-module-icons/tsconfig.json renamed to editor-packages/editor-canvas-renderer-bitmap/tsconfig.json editor-packages/editor-module-icons/tsconfig.json renamed to editor-packages/editor-canvas-renderer-bitmap/tsconfig.json

@@ -0,0 +1 @@
+export * from "./util";

editor-packages/editor-canvas-renderer-core/index.ts

@@ -0,0 +1,4 @@
+{
+  "name": "@code-editor/canvas-renderer-core",
+  "version": "0.0.0"
+}

editor-packages/editor-canvas-renderer-core/package.json

@@ -0,0 +1,8 @@
+import { colorFromFills } from "@design-sdk/core/utils";
+import type { Paint } from "@design-sdk/figma";
+
+export const blurred_bg_fill = (fills: ReadonlyArray<Paint>) => {
+  const __bg = colorFromFills(fills);
+  const bg_color_str = __bg ? "#" + __bg.hex : "transparent";
+  return bg_color_str;
+};

editor-packages/editor-canvas-renderer-core/util.ts

@@ -16,6 +16,7 @@ import {
   target_of_area,
   boundingbox,
   is_point_inside_box,
+  zoomToFit,
 } from "../math";
 import q from "@design-sdk/query";
 import { LazyFrame } from "@code-editor/canvas/lazy-frame";
@@ -121,6 +122,11 @@ type CanvasFocusProps = {
   focusRefreshkey?: string;
 };
 
+type CanvasFocusSnap = {
+  damping?: number;
+  bounds?: Box;
+};
+
 interface HovringNode {
   node: ReflectSceneNode;
   reason: "frame-title" | "raycast" | "external";
@@ -515,7 +521,8 @@ export function Canvas({
             }}
             onZoomToFit={() => {
               setZoom(1);
-              // setOffset([newx, newy]); // TODO: set offset to center of the viewport
+              // const newoffset = zoomToFit(viewbound, offset, zoom, 1);
+              // setOffset(newoffset);
               _canvas_state_store.saveLastTransform(cvtransform);
             }}
             onZooming={onZooming}

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

@@ -1,6 +1,7 @@
 export * from "./bounding-box";
 export * from "./target-of-area";
 export * from "./target-of-point";
-export * from "./guide-spacing"
+export * from "./guide-spacing";
 export * from "./center-of";
-export * from "./viewbound-edge-scrolling";
+export * from "./viewbound-edge-scrolling";
+export * from "./zoom-to-fit";

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

@@ -0,0 +1,28 @@
+import type { Box, XY } from "../types";
+
+/**
+ * this function provides a new offset for the canvas when user executes zoom-to-fit action, which resetting the canvas zoom to 1.
+ * the givven factors are.
+ * @param viewbound the viewbound of the canvas.
+ * @param offset the current offset of the canvas.
+ * @param scale the current scale of the canvas.
+ * @param newScale the new scale of the canvas. @default 1
+ *
+ * @returns the new offset of the canvas.
+ *
+ * @deprecated not tested
+ */
+export function zoomToFit(
+  viewbound: Box,
+  offset: XY,
+  scale: number,
+  newScale: number = 1
+): XY {
+  const [x, y, w, h] = viewbound;
+  const [ox, oy] = offset;
+  const newOffset: XY = [
+    (x + w / 2) * (1 - newScale / scale) + ox,
+    (y + h / 2) * (1 - newScale / scale) + oy,
+  ];
+  return newOffset;
+}