update bitmap renderer interface

Author: softmarshmallow

editor-packages/editor-canvas-renderer-bitmap/figma-node-bitmap-preview.tsx

@@ -1,5 +1,5 @@
 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 "@code-editor/canvas-renderer-core";
 import { CircularProgress } from "@mui/material";
@@ -32,6 +32,14 @@ export function FigmaNodeBitmapPreviewServiceProvider({
   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
@@ -44,7 +52,7 @@ export function FigmaNodeBitmapView({
   inViewport,
   background,
 }: {
-  target: ReflectSceneNode;
+  target: TargetSceneMeta;
 } & FrameOptimizationFactors & {
     background?: React.CSSProperties["background"];
   }) {
@@ -80,7 +88,8 @@ export function FigmaNodeBitmapView({
     }
   }, [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-core/util.ts

@@ -1,8 +1,8 @@
 import { colorFromFills } from "@design-sdk/core/utils";
-import type { ReflectSceneNode } from "@design-sdk/figma-node";
+import type { Paint } from "@design-sdk/figma";
 
-export const blurred_bg_fill = (target: ReflectSceneNode) => {
-  const __bg = colorFromFills(target.fills);
+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/scaffolds/preview-canvas/vanilla-preview-async.tsx

@@ -140,7 +140,7 @@ export function D2CVanillaPreview({
     }
   }, [target?.id, isZooming, isPanning]);
 
-  const bg_color_str = blurred_bg_fill(target);
+  const bg_color_str = blurred_bg_fill(target.fills);
 
   return (
     <PreviewContent

editor/scaffolds/preview-canvas/vanilla-preview-webworker.tsx

@@ -8,7 +8,7 @@ import { preview as wwpreview } from "../code/code-worker-messenger";
 
 export function WebWorkerD2CVanillaPreview({ target }: VanillaPreviewProps) {
   const [preview, setPreview] = useState<Result>();
-  const bg_color_str = blurred_bg_fill(target);
+  const bg_color_str = blurred_bg_fill(target.fills);
 
   useEffect(() => {
     if (preview) {