2022W48 Improved Dashboard interface & new 3D Inspector #191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

softmarshmallow merged 41 commits into main from staging

Nov 22, 2022

...caffolds/preview-canvas/image-preview.tsx → ...erer-bitmap/figma-node-bitmap-preview.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

-Original file line number
+Diff line change
@@ -0,0 +1,4 @@
+    export {
+      FigmaNodeBitmapPreviewServiceProvider,
+      FigmaNodeBitmapView,
+    } from "./figma-node-bitmap-preview";

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

-Original file line number
+Diff line change
@@ -0,0 +1,4 @@
+    {
+      "name": "@code-editor/canvas-renderer-bitmap",
+      "version": "0.0.0"
+    }

0 ...ackages/editor-module-icons/tsconfig.json → ...itor-canvas-renderer-bitmap/tsconfig.json

File renamed without changes.

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

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from "./util";

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

-Original file line number
+Diff line change
@@ -0,0 +1,4 @@
+    {
+      "name": "@code-editor/canvas-renderer-core",
+      "version": "0.0.0"
+    }

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

-Original file line number
+Diff line change
@@ -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/canvas/canvas.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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";
@@ Expand Down Expand Up / @@ -121,6 +122,11 @@ type CanvasFocusProps = { @@
       focusRefreshkey?: string;
     };
+    type CanvasFocusSnap = {
+      damping?: number;
+      bounds?: Box;
+    };
     interface HovringNode {
       node: ReflectSceneNode;
       reason: "frame-title" | "raycast" | "external";
@@ Expand Down Expand Up / @@ -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}
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -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/zoom-to-fit.ts

-Original file line number
+Diff line change
@@ -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;
+    }

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

-Original file line number
+Diff line change
@@ -0,0 +1,57 @@
+    import React from "react";
+    import { SquareIcon } from "@radix-ui/react-icons";
+    import {
+      DashboardItemCard,
+      DashboardItemCardProps,
+    } from "./dashboard-item-card";
+    import { DashboardFolderItem } from "../core";
+    function FolderCardPreview() {
+      return (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: 160,
+            width: 300,
+            boxSizing: "border-box",
+          }}
+        >
+          <img
+            style={{
+              height: "100%",
+              width: 120,
+              margin: "auto",
+              objectFit: "contain",
+              objectPosition: "center",
+            }}
+            src="/assets/mac-folder-icon.png"
+          />
+        </div>
+      );
+      //
+    }
+    export type FolderCardProps = Omit<
+      DashboardItemCardProps,
+      "icon" | "preview" | "label"
+    > &
+      Omit<DashboardFolderItem, "$type">;
+    export const FolderCard = React.forwardRef(function (
+      { name, ...props }: FolderCardProps,
+      ref: React.Ref<HTMLDivElement>
+    ) {
+      return (
+        <DashboardItemCard
+          ref={ref}
+          id={props.id}
+          {...props}
+          label={name}
+          icon={<SquareIcon color="white" />}
+          preview={<FolderCardPreview />}
+        />
+      );
+    });

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

-Original file line number
+Diff line change
@@ -0,0 +1,85 @@
+    import React, { useRef } from "react";
+    import { FigmaNodeBitmapView } from "@code-editor/canvas-renderer-bitmap";
+    import { SceneNodeIcon } from "@code-editor/node-icons";
+    import { useInViewport } from "react-in-viewport";
+    import {
+      DashboardItemCard,
+      DashboardItemCardProps,
+    } from "./dashboard-item-card";
+    type SceneMeta = {
+      id: string;
+      filekey: string;
+      name: string;
+      width: number;
+      height: number;
+      type: any;
+    };
+    function SceneCardPreview({
+      maxWidth,
+      scene,
+    }: {
+      maxWidth: number;
+      scene: SceneMeta;
+    }) {
+      const visibilityRef = useRef();
+      const { enterCount } = useInViewport(visibilityRef);
+      // max allowed zoom = 1
+      const scale = Math.min(maxWidth / scene.width, 1);
+      const { height, type } = scene;
+      return (
+        <div
+          ref={visibilityRef}
+          style={{
+            height: height * scale,
+            width: maxWidth,
+          }}
+        >
+          {/* transformer */}
+          <div
+            id="view"
+            style={{
+              transform: `scale(${scale})`,
+            }}
+          >
+            <FigmaNodeBitmapView
+              background={"white"}
+              key={scene.id}
+              target={scene}
+              isPanning={false}
+              isZooming={false}
+              zoom={null}
+              inViewport={enterCount > 0}
+              focused={false}
+            />
+          </div>
+        </div>
+      );
+      //
+    }
+    export interface SceneCardProps
+      extends Omit<DashboardItemCardProps, "icon" | "preview" | "label"> {
+      scene: SceneMeta;
+    }
+    export const SceneCard = React.forwardRef(function (
+      { scene, ...props }: SceneCardProps,
+      ref: React.Ref<HTMLDivElement>
+    ) {
+      return (
+        <DashboardItemCard
+          ref={ref}
+          id={props.id}
+          {...props}
+          label={scene.name}
+          icon={<SceneNodeIcon type={scene.type} color="white" />}
+          preview={<SceneCardPreview scene={scene} maxWidth={300} />}
+        />
+      );
+    });

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

2022W48 Improved Dashboard interface & new 3D Inspector #191

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!