资源页复用共享 CanvasWorld

移除项目开发页自有 world 变换与动态矩形尺寸

通过共享 CanvasWorld 提供资源卡控件反向缩放变量

apps/ai-game-creator-shell/src/styles.css

@@ -5900,6 +5900,16 @@ iframe.preview-frame {
   text-overflow: ellipsis;
   white-space: nowrap;
   box-shadow: 0 8px 18px rgb(96 62 47 / 20%);
+  transform: scale(var(--genarrative-image-canvas-inverse-scale, 1));
+  transform-origin: top right;
+}
+
+.game-resource-card-media-control,
+.game-resource-card-placeholder > svg,
+.game-resource-card-version-visual > svg,
+.game-resource-card-audio-visual > svg {
+  transform: scale(var(--genarrative-image-canvas-inverse-scale, 1));
+  transform-origin: center;
 }
 
 .game-resource-card-open {

apps/ai-game-creator-shell/src/view/project-development/index.tsx

@@ -3,6 +3,7 @@ import {
   type CanvasViewport,
   resolveViewportFromWheel,
 } from '@genarrative/image-canvas-core';
+import { CanvasWorld } from '@genarrative/image-canvas-react';
 import {
   Code2,
   FileText,
@@ -4906,17 +4907,12 @@ export default function ProjectDevelopmentView({
                             >
                               <RotateCcw size={15} aria-hidden="true" />
                             </button>
-                            <div
+                            <CanvasWorld
                               className="game-resource-page-world"
+                              viewport={activeResourceCanvasViewport}
                               data-resource-boundary={`${resourceCanvasNavigationBounds.x},${resourceCanvasNavigationBounds.y},${resourceCanvasNavigationBounds.width},${resourceCanvasNavigationBounds.height}`}
                               data-resource-fit-boundary={`${resourceCanvasFitBounds.x},${resourceCanvasFitBounds.y},${resourceCanvasFitBounds.width},${resourceCanvasFitBounds.height}`}
                               data-resource-viewport={`${activeResourceCanvasViewport.x},${activeResourceCanvasViewport.y},${activeResourceCanvasViewport.scale}`}
-                              style={{
-                                width: `${resourceCanvasNavigationBounds.width}px`,
-                                height: `${resourceCanvasNavigationBounds.height}px`,
-                                transform: `translate(${activeResourceCanvasViewport.x}px, ${activeResourceCanvasViewport.y}px) scale(${activeResourceCanvasViewport.scale})`,
-                                transformOrigin: '0 0',
-                              }}
                             >
                               {sortMode === 'dependency' ? (
                                 <ResourceDependencyOverlay
@@ -5016,7 +5012,7 @@ export default function ProjectDevelopmentView({
                                   />
                                 );
                               })}
-                            </div>
+                            </CanvasWorld>
                             {(
                               visibleResourcesByCategory.get(
                                 activePageCategory,

packages/image-canvas-react/src/CanvasWorld.tsx

@@ -2,7 +2,7 @@ import {
   CANVAS_WORLD_SIZE,
   type CanvasViewport,
 } from '@genarrative/image-canvas-core';
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 
 export function CanvasWorld({
   children,
@@ -16,16 +16,22 @@ export function CanvasWorld({
   viewport: CanvasViewport;
   worldSize?: number;
 }) {
+  const viewportScale =
+    Number.isFinite(viewport.scale) && viewport.scale > 0 ? viewport.scale : 1;
+
   return (
     <div
       {...props}
       className={`genarrative-image-canvas__world ${className}`.trim()}
-      style={{
-        ...style,
-        width: worldSize,
-        height: worldSize,
-        transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.scale})`,
-      }}
+      style={
+        {
+          ...style,
+          width: worldSize,
+          height: worldSize,
+          transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewportScale})`,
+          '--genarrative-image-canvas-inverse-scale': String(1 / viewportScale),
+        } as CSSProperties
+      }
     >
       {children}
     </div>