资源页复用共享 CanvasWorld

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

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

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>