update resized size to reset on target change

Author: softmarshmallow

editor/components/app-runner/vanilla-app-runner.tsx

@@ -5,12 +5,14 @@ export function VanillaRunner({
   height,
   source,
   enableInspector = true,
+  style,
 }: {
   width: string;
   height: string;
   source: string;
   componentName: string;
   enableInspector?: boolean;
+  style?: React.CSSProperties;
 }) {
   const ref = useRef<HTMLIFrameElement>();
 
@@ -79,6 +81,7 @@ export function VanillaRunner({
   return (
     <iframe
       ref={ref}
+      style={style}
       sandbox="allow-same-origin"
       srcDoc={inlinesource}
       width={width}

editor/components/canvas/interactive-canvas.tsx

@@ -6,7 +6,9 @@ import { ZoomControl } from "./controller-zoom-control";
 
 export function InteractiveCanvas({
   children,
+  defaultSize,
 }: {
+  defaultSize: { width: number; height: number };
   children?: React.ReactNode;
 }) {
   const [scale, setScale] = useState(1);
@@ -19,7 +21,9 @@ export function InteractiveCanvas({
         </Controls>
         <ScalingAreaStaticRoot>
           <ScalingArea scale={scale}>
-            <ResizableFrame scale={scale}>{children}</ResizableFrame>
+            <ResizableFrame defaultSize={defaultSize} scale={scale}>
+              {children}
+            </ResizableFrame>
           </ScalingArea>
         </ScalingAreaStaticRoot>
       </ScalableFrame>
@@ -109,15 +113,20 @@ const ScalingArea = ({
 function ResizableFrame({
   scale,
   children,
+  defaultSize,
 }: {
+  defaultSize?: { width: number; height: number };
   scale: number;
   children?: React.ReactNode;
 }) {
   return (
     <Resizable
-      style={{
-        overflow: "hidden",
-      }}
+      defaultSize={
+        defaultSize ?? {
+          width: 500,
+          height: 500,
+        }
+      }
       scale={scale}
     >
       {children}

editor/scaffolds/canvas/canvas.tsx

@@ -20,50 +20,22 @@ export function Canvas({
   return (
     <CanvasContainer id="canvas">
       <EditorAppbarFragments.Canvas />
-      {/* {preview ? (
-        <PreviewAndRunPanel
-          // key={_key_for_preview}
-          config={{
-            src: preview.scaffold.raw,
-            platform: "vanilla",
-            componentName: preview.name,
-            sceneSize: originsize && {
-              w: originsize.width,
-              h: originsize.height,
-            },
-            initialMode: "run",
-            fileid: fileid,
-            sceneid: sceneid,
-            hideModeChangeControls: true,
-          }}
-        />
-      ) : (
-        <EditorCanvasSkeleton />
-      )} */}
-      <InteractiveCanvas>
+      <InteractiveCanvas key={fileid + sceneid} defaultSize={originsize}>
         {preview ? (
-          <div
+          <VanillaRunner
+            key={preview.scaffold.raw}
             style={{
-              width: originsize.width,
-              height: originsize.height,
+              borderRadius: 4,
+              boxShadow: "0px 0px 48px #00000020",
             }}
-          >
-            <VanillaRunner
-              source={preview.scaffold.raw}
-              width={"100%"}
-              height={"100%"}
-              componentName={preview.name}
-            />
-          </div>
+            source={preview.scaffold.raw}
+            width="100%"
+            height="100%"
+            componentName={preview.name}
+          />
         ) : (
           <EditorCanvasSkeleton />
         )}
-        {/* <div
-          style={{
-            height: 812,
-            background: "white",
-          }}
-        ></div> */}
       </InteractiveCanvas>
     </CanvasContainer>
   );

editor/scaffolds/editor/skeleton.tsx

@@ -19,7 +19,7 @@ export function EditorSkeleton({ percent = 0 }: { percent?: number }) {
         <SidebarMock>
           <ListMock>
             {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
-              <MockItem1>
+              <MockItem1 key={i.toString()}>
                 <BaseHierarchyItem>
                   <Frame55>
                     <Frame52></Frame52>