sanitize

Author: softmarshmallow

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

@@ -5,7 +5,6 @@ import type {
   WebKitGestureEvent,
   SharedGestureState,
 } from "@use-gesture/react";
-import styled from "@emotion/styled";
 
 export type OnPanningHandler = Handler<"wheel", WheelEvent>;
 
@@ -135,26 +134,23 @@ export function CanvasEventTarget({
   );
 
   return (
-    <EventTargetContainer
+    <div
       style={{
+        position: "absolute",
+        inset: 0,
+        background: "transparent",
+        overflow: "hidden",
+        touchAction: "none",
         cursor: isSpacebarPressed ? "grab" : "default",
       }}
       id="gesture-event-listener"
       ref={interactionEventTargetRef}
     >
       {children}
-    </EventTargetContainer>
+    </div>
   );
 }
 
-const EventTargetContainer = styled.div`
-  position: absolute;
-  inset: 0px;
-  background: transparent;
-  overflow: hidden;
-  touch-action: none;
-`;
-
 type PlatformName = "mac" | "win" | "linux" | "other";
 
 const getCurrentPlatform = (navigator?: { platform: string }): PlatformName =>

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

@@ -1,10 +1,4 @@
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  useMemo,
-} from "react";
+import React, { useEffect, useRef, useState, useMemo } from "react";
 import { ReflectSceneNode } from "@design-sdk/figma-node";
 import styled from "@emotion/styled";
 import {
@@ -14,7 +8,7 @@ import {
   OnPointerMoveHandler,
   OnPointerDownHandler,
 } from "../canvas-event-target";
-import { get_hovering_target, centerOf } from "../math";
+import { get_hovering_target } from "../math";
 import { utils } from "@design-sdk/core";
 import { LazyFrame } from "@code-editor/canvas/lazy-frame";
 import { HudCustomRenderers, HudSurface } from "./hud-surface";
@@ -37,6 +31,7 @@ interface CanvasState {
   highlightedLayer?: string;
   selectedNodes: string[];
   readonly?: boolean;
+  initialTransform?: CanvasTransform;
 }
 
 type CanvasCustomRenderers = HudCustomRenderers & {
@@ -61,6 +56,10 @@ export function Canvas({
   onSelectNode,
   onClearSelection,
   nodes,
+  initialTransform = {
+    xy: INITIAL_XY,
+    scale: INITIAL_SCALE,
+  },
   highlightedLayer,
   selectedNodes,
   readonly = true,
@@ -73,14 +72,9 @@ export function Canvas({
   CanvasState & {
     config?: CanvsPreferences;
   }) {
-  const { center: _inicial_xy, scale: _initial_scale } = useMemo(
-    () => centerOf(null, ...nodes),
-    [nodes]
-  );
-
-  const [zoom, setZoom] = useState(_initial_scale);
+  const [zoom, setZoom] = useState(initialTransform.scale);
   const [isZooming, setIsZooming] = useState(false);
-  const [offset, setOffset] = useState<[number, number]>(_inicial_xy);
+  const [offset, setOffset] = useState<[number, number]>(initialTransform.xy);
   const nonscaled_offset: XY = [offset[0] / zoom, offset[1] / zoom]; // offset;
   const [isPanning, setIsPanning] = useState(false);
 

editor/scaffolds/canvas/canvas.tsx

@@ -60,9 +60,7 @@ export function VisualContentArea({ fileid }: { fileid: string }) {
               }}
               nodes={thisPageNodes}
               renderItem={(node) => {
-                return (
-                  <Preview key={node.id} root={design?.input} target={node} />
-                );
+                return <Preview key={node.id} target={node} />;
               }}
               renderFrameTitle={(p) => (
                 <FrameTitleRenderer

editor/scaffolds/preview/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import styled from "@emotion/styled";
 import { vanilla_presets } from "@grida/builder-config-preset";
 import { designToCode, Result } from "@designto/code";
 import { config } from "@designto/config";
@@ -8,23 +7,14 @@ import {
   MainImageRepository,
 } from "@design-sdk/core/assets-repository";
 import type { ReflectSceneNode } from "@design-sdk/figma-node";
-import { DesignInput } from "@designto/config/input";
 import { VanillaRunner } from "components/app-runner/vanilla-app-runner";
+import { colorFromFills } from "@design-sdk/core/utils/colors";
 
-export function Preview({
-  target,
-  root,
-}: {
-  root: DesignInput;
-  target: ReflectSceneNode;
-}) {
+export function Preview({ target }: { target: ReflectSceneNode }) {
   const [preview, setPreview] = useState<Result>();
 
   const on_preview_result = (result: Result) => {
-    //@ts-ignore
-    // if (result.id == targetStateRef?.current?.id) {
     setPreview(result);
-    // }
   };
 
   useEffect(() => {
@@ -80,16 +70,18 @@ export function Preview({
     }
   }, [target?.id]);
 
+  const bg = colorFromFills(target.fills);
+
   if (!preview) {
     return (
       <div
         style={{
-          width: "100%",
-          height: "100%",
-          borderRadius: 4,
-          boxShadow: "0px 0px 48px #00000020",
+          width: target.width,
+          height: target.height,
+          backgroundColor: bg ? "#" + bg.hex : "transparent",
+          borderRadius: 1,
         }}
-      ></div>
+      />
     );
   }