2022.11 W45 Release

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useGesture } from "@use-gesture/react";
 import type {
   Handler,
@@ -39,24 +39,28 @@ export function CanvasEventTarget({
   onDrag,
   onDragStart,
   onDragEnd,
+  cursor,
   children,
-}: {
-  onZoomToFit?: () => void;
-  onPanning: OnPanningHandler;
-  onPanningStart: OnPanningHandler;
-  onPanningEnd: OnPanningHandler;
-  onZooming: OnZoomingHandler;
-  onZoomingStart: OnZoomingHandler;
-  onZoomingEnd: OnZoomingHandler;
-  onPointerMove: OnPointerMoveHandler;
-  onPointerMoveStart: OnPointerMoveHandler;
-  onPointerMoveEnd: OnPointerMoveHandler;
-  onPointerDown: OnPointerDownHandler;
-  onDrag: OnDragHandler;
-  onDragStart: OnDragHandler;
-  onDragEnd: OnDragHandler;
-  children?: React.ReactNode;
-}) {
+}: React.PropsWithChildren<
+  {
+    onZoomToFit?: () => void;
+    onPanning: OnPanningHandler;
+    onPanningStart: OnPanningHandler;
+    onPanningEnd: OnPanningHandler;
+    onZooming: OnZoomingHandler;
+    onZoomingStart: OnZoomingHandler;
+    onZoomingEnd: OnZoomingHandler;
+    onPointerMove: OnPointerMoveHandler;
+    onPointerMoveStart: OnPointerMoveHandler;
+    onPointerMoveEnd: OnPointerMoveHandler;
+    onPointerDown: OnPointerDownHandler;
+    onDrag: OnDragHandler;
+    onDragStart: OnDragHandler;
+    onDragEnd: OnDragHandler;
+  } & {
+    cursor?: React.CSSProperties["cursor"];
+  }
+>) {
   const interactionEventTargetRef = useRef();
 
   const [isSpacebarPressed, setIsSpacebarPressed] = useState(false);
@@ -210,7 +214,7 @@ export function CanvasEventTarget({
         inset: 0,
         overflow: "hidden",
         touchAction: "none",
-        cursor: isSpacebarPressed ? "grab" : "default",
+        cursor: isSpacebarPressed ? "grab" : cursor,
         userSelect: "none",
         WebkitUserSelect: "none",
       }}

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

@@ -81,6 +81,10 @@ interface GroupingOptions {
   disabled?: boolean;
 }
 
+interface CanvasCursorOptions {
+  cursor?: React.CSSProperties["cursor"];
+}
+
 const default_canvas_preferences: CanvsPreferences = {
   can_highlight_selected_layer: false,
   marquee: {
@@ -91,6 +95,18 @@ const default_canvas_preferences: CanvsPreferences = {
   },
 };
 
+type CanvasProps = CanvasCursorOptions & {
+  viewbound: Box;
+  onSelectNode?: (...node: ReflectSceneNode[]) => void;
+  onMoveNodeStart?: (...node: string[]) => void;
+  onMoveNode?: (delta: XY, ...node: string[]) => void;
+  onMoveNodeEnd?: (delta: XY, ...node: string[]) => void;
+  onClearSelection?: () => void;
+} & CanvasCustomRenderers &
+  CanvasState & {
+    config?: CanvsPreferences;
+  };
+
 interface HovringNode {
   node: ReflectSceneNode;
   reason: "frame-title" | "raycast" | "external";
@@ -113,18 +129,9 @@ export function Canvas({
   readonly = true,
   config = default_canvas_preferences,
   backgroundColor,
+  cursor,
   ...props
-}: {
-  viewbound: Box;
-  onSelectNode?: (...node: ReflectSceneNode[]) => void;
-  onMoveNodeStart?: (...node: string[]) => void;
-  onMoveNode?: (delta: XY, ...node: string[]) => void;
-  onMoveNodeEnd?: (delta: XY, ...node: string[]) => void;
-  onClearSelection?: () => void;
-} & CanvasCustomRenderers &
-  CanvasState & {
-    config?: CanvsPreferences;
-  }) {
+}: CanvasProps) {
   useEffect(() => {
     if (transformIntitialized) {
       return;
@@ -430,8 +437,9 @@ export function Canvas({
     <>
       <ContextMenuProvider>
         <Container
-          width={viewbound[2] - viewbound[0]}
-          height={viewbound[3] - viewbound[1]}
+        // todo: viewbound not accurate.
+        // width={viewbound[2] - viewbound[0]}
+        // height={viewbound[3] - viewbound[1]}
         >
           <CanvasEventTarget
             onPanning={onPanning}
@@ -462,6 +470,7 @@ export function Canvas({
             onDragStart={onDragStart}
             onDrag={onDrag}
             onDragEnd={onDragEnd}
+            cursor={cursor}
           >
             <HudSurface
               offset={nonscaled_offset}
@@ -505,10 +514,12 @@ export function Canvas({
   );
 }
 
-const Container = styled.div<{ width: number; height: number }>`
-  width: ${(p) => p.width}px;
-  height: ${(p) => p.height}px;
+const Container = styled.div`
+  min-width: 240px;
+  min-height: 240px;
 `;
+/* width: ${(p) => p.width}px; */
+/* height: ${(p) => p.height}px; */
 
 /**
  * 1. container positioning guide (static per selection)

editor-packages/editor-canvas/hud/hud-surface.tsx

@@ -168,8 +168,8 @@ function PositionGuides({
 }) {
   return (
     <>
-      {guides.map((guide) => {
-        return <PositionGuide a={guide.a} b={guide.b} zoom={zoom} />;
+      {guides.map((guide, i) => {
+        return <PositionGuide key={i} a={guide.a} b={guide.b} zoom={zoom} />;
       })}
     </>
   );

editor-packages/editor-canvas/overlay/guide-positioning/index.tsx

@@ -135,9 +135,10 @@ function SpacingMeterLabel({
   return (
     <MeterLabel
       label={(Math.round(length * 10) / 10).toString()}
-      background={"orange"}
+      background={"darkorange"}
       x={tx}
       y={ty}
+      weight={"bolder"}
       margin={4}
       anchor={__label_anchor_map[side]}
       zoom={zoom}
@@ -173,7 +174,7 @@ function GuideLine({
   direction,
   length,
   width,
-  color = "orange",
+  color = "darkorange",
   dashed,
 }: GuideLineProps) {
   const tl = length * zoom;
@@ -230,7 +231,7 @@ function SpacingGuideLine({
       length={length}
       direction={rotation}
       width={1}
-      color={"orange"}
+      color={"darkorange"}
     />
   );
 }
@@ -257,7 +258,7 @@ function AuxiliaryLine({
       direction={rotation}
       width={1}
       dashed
-      color={"orange"}
+      color={"darkorange"}
     />
   );
 }

editor-packages/editor-canvas/overlay/handle.tsx

@@ -1,30 +1,33 @@
 import React, { forwardRef } from "react";
 import * as k from "./k";
 
-export const Handle = forwardRef(function ({
-  color,
-  anchor,
-  box,
-  outlineWidth = 1,
-  outlineColor = "transparent",
-  size = 4,
-  borderRadius = 0,
-  cursor,
-  readonly,
-}: {
-  color: string;
-  /**
-   * the width of the outline
-   */
-  outlineWidth?: number;
-  outlineColor?: string;
-  size: number;
-  anchor: "nw" | "ne" | "sw" | "se";
-  box: [number, number, number, number];
-  borderRadius?: React.CSSProperties["borderRadius"];
-  cursor?: React.CSSProperties["cursor"];
-  readonly?: boolean;
-}) {
+export const Handle = forwardRef(function (
+  {
+    color,
+    anchor,
+    box,
+    outlineWidth = 1,
+    outlineColor = "transparent",
+    size = 4,
+    borderRadius = 0,
+    cursor,
+    readonly,
+  }: {
+    color: string;
+    /**
+     * the width of the outline
+     */
+    outlineWidth?: number;
+    outlineColor?: string;
+    size: number;
+    anchor: "nw" | "ne" | "sw" | "se";
+    box: [number, number, number, number];
+    borderRadius?: React.CSSProperties["borderRadius"];
+    cursor?: React.CSSProperties["cursor"];
+    readonly?: boolean;
+  },
+  ref
+) {
   let dx = 0;
   let dy = 0;
   switch (anchor) {

editor-packages/editor-canvas/overlay/meter-label.tsx

@@ -45,9 +45,11 @@ export function MeterLabel({
   zoom,
   margin = 0,
   zIndex = k.Z_INDEX_GUIDE_LABEL,
+  weight = 500,
 }: {
   x: number;
   y: number;
+  weight?: React.CSSProperties["fontWeight"];
   background?: React.CSSProperties["background"];
   label: string;
   anchor: "w" | "n" | "s" | "e";
@@ -98,7 +100,7 @@ export function MeterLabel({
         color: "white",
         fontSize: font_size,
         fontFamily: "Inter, sans-serif",
-        fontWeight: 500,
+        fontWeight: weight,
         textAlign: "center",
         zIndex: zIndex,
       }}

editor-packages/editor-figma-file/index.ts

@@ -0,0 +1,2 @@
+export * from "./stores";
+export * from "./repository";

editor-packages/editor-figma-file/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@editor/figma-file",
+  "version": "0.0.0"
+}

editor/repository/figma-design-repository/index.ts → editor-packages/editor-figma-file/repository.ts

@@ -1,6 +1,6 @@
 import { fetch } from "@design-sdk/figma-remote";
-import { FileResponse } from "@design-sdk/figma-remote-types";
-import { FigmaFileStore, FileResponseRecord } from "@editor/figma-file-store";
+import { FigmaFileStore, FigmaFileMetaStore } from "./stores";
+import type { FileResponseRecord } from "./stores";
 
 export type TFetchFileForApp = (
   | fetch.FetchFileGeneratorReturnType
@@ -20,23 +20,29 @@ export class FigmaDesignRepository {
   ) {}
 
   static async fetchCachedFile(fileId: string) {
+    const metastore = new FigmaFileMetaStore();
     const store = new FigmaFileStore(fileId);
     const existing = await store.get();
     if (existing) {
+      // everytime the file is consumed consider it as used, we upsert the file so that the lastUsed can be updated.
+      metastore.upsert(existing.key, existing);
       return { ...existing, __initial: false } as TFetchFileForApp;
     } else {
       throw new Error("file not found");
     }
   }
 
-  async *fetchFile(fileId: string) {
-    const store = new FigmaFileStore(fileId);
+  async *fetchFile(filekey: string) {
+    const metastore = new FigmaFileMetaStore();
+    const store = new FigmaFileStore(filekey);
     const existing = await store.get();
     if (existing) {
+      // everytime the file is consumed consider it as used, we upsert the file so that the lastUsed can be updated.
+      metastore.upsert(existing.key, existing);
       yield { ...existing, __initial: false } as TFetchFileForApp;
     }
 
-    const _iter = fetch.fetchFile({ file: fileId, auth: this.auth });
+    const _iter = fetch.fetchFile({ file: filekey, auth: this.auth });
     let next: IteratorResult<fetch.FetchFileGeneratorReturnType>;
     while ((next = await _iter.next()).done === false) {
       switch (next.value.__response_type) {
@@ -48,6 +54,7 @@ export class FigmaDesignRepository {
               __type: "file-fetched-for-app",
             } as TFetchFileForApp;
             store.upsert(next.value);
+            metastore.upsert(filekey, next.value);
           }
           break;
         case "roots":
@@ -58,6 +65,7 @@ export class FigmaDesignRepository {
               __type: "file-fetched-for-app",
             } as TFetchFileForApp;
             store.upsert(next.value);
+            metastore.upsert(filekey, next.value);
           }
           break;
         case "whole":
@@ -67,6 +75,7 @@ export class FigmaDesignRepository {
             __type: "file-fetched-for-app",
           } as TFetchFileForApp;
           store.upsert(next.value);
+          metastore.upsert(filekey, next.value);
           break;
       }
     }