diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index b1748b822..3914a60db 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -5904,14 +5904,17 @@ iframe.preview-frame { 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 { +.game-resource-card-media-control { transform: scale(var(--genarrative-image-canvas-inverse-scale, 1)); transform-origin: center; } +.game-resource-card-placeholder > svg *, +.game-resource-card-version-visual > svg *, +.game-resource-card-audio-visual > svg * { + stroke-width: calc(2px * var(--genarrative-image-canvas-inverse-scale, 1)); +} + .game-resource-card-open { position: absolute; z-index: 1; diff --git a/packages/image-canvas-react/src/CanvasWorld.tsx b/packages/image-canvas-react/src/CanvasWorld.tsx index 4dd6bd889..d5ab20e97 100644 --- a/packages/image-canvas-react/src/CanvasWorld.tsx +++ b/packages/image-canvas-react/src/CanvasWorld.tsx @@ -4,6 +4,8 @@ import { } from '@genarrative/image-canvas-core'; import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'; +const CANVAS_RENDER_SUPERSAMPLE = 2; + export function CanvasWorld({ children, className = '', @@ -28,12 +30,22 @@ export function CanvasWorld({ ...style, width: worldSize, height: worldSize, - transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewportScale})`, + transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewportScale / CANVAS_RENDER_SUPERSAMPLE})`, '--genarrative-image-canvas-inverse-scale': String(1 / viewportScale), } as CSSProperties } > - {children} +