ifontosh/DndGamePlayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(scene): shared zoom/pan for control and presentation

Browse Source 
Keep effects pinned to map coordinates when the viewport changes; materials/NPC overlays stay screen-fixed.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Ivan Fontosh
2026-07-23 14:08:19 +08:00
parent 2c0e6fbf09
commit eb127c11c2
13 changed files with 688 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/renderer/control/ControlApp.tsx
+149 -4
View File
@@ -8,7 +8,12 @@ import {
isNodeInSideStoryline,
listSideStoryStarts,
} from '../../shared/graph/sceneGraphLineage';
import type { GraphNodeId, Scene, SceneId } from '../../shared/types';
import type { GraphNodeId, Scene, SceneId, SceneViewCamera } from '../../shared/types';
import {
DEFAULT_SCENE_VIEW_CAMERA,
sceneViewPanBy,
sceneViewZoomAt,
} from '../../shared/types/sceneView';
import { useEditorI18n } from '../editor/i18n/EditorI18nContext';
import { isSceneDescriptionEmpty } from '../editor/sceneDescriptionHtml';
import { getDndApi } from '../shared/dndApi';
@@ -27,6 +32,7 @@ import { useMaterialsOverlayState } from '../shared/materials/useMaterialsOverla
import { NpcsSceneOverlay } from '../shared/npcs/NpcsSceneOverlay';
import { useNpcsOverlayState } from '../shared/npcs/useNpcsOverlayState';
import { SceneOverlayHost } from '../shared/sceneOverlay/SceneOverlayHost';
import { useSceneViewState } from '../shared/sceneView/useSceneViewState';
import { Button } from '../shared/ui/controls';
import { Surface } from '../shared/ui/Surface';
import { useAssetUrl } from '../shared/useAssetImageUrl';
@@ -113,6 +119,8 @@ export function ControlApp() {
const [fxState, fx] = useEffectsState();
const [effectsSfxGainUi, setEffectsSfxGainUi] = useState(() => getEffectsSfxGain());
const [sdState, sd] = useSceneDarknessState();
const [sceneView, sceneViewApi] = useSceneViewState();
const [sceneViewDraft, setSceneViewDraft] = useState<SceneViewCamera | null>(null);
const [materialsOverlay, materialsApi] = useMaterialsOverlayState();
const [npcsOverlay, npcsApi] = useNpcsOverlayState();
const [session, setSession] = useState<SessionState | null>(null);
@@ -139,7 +147,13 @@ export function ControlApp() {
const allowCampaignAudioRef = useRef<boolean>(true);
const audioUnmountRef = useRef(false);
const previewHostRef = useRef<HTMLDivElement | null>(null);
const previewFrameRef = useRef<HTMLDivElement | null>(null);
const previewVideoRef = useRef<HTMLVideoElement | null>(null);
const sceneViewRef = useRef<SceneViewCamera>(DEFAULT_SCENE_VIEW_CAMERA);
const scenePanRef = useRef<{ lastX: number; lastY: number; pointerId: number } | null>(null);
const spaceDownRef = useRef(false);
const sceneViewPublishRafRef = useRef(0);
const pendingSceneViewRef = useRef<SceneViewCamera | null>(null);
const brushRef = useRef<{
tool:
| 'fog'
@@ -649,6 +663,84 @@ export function ControlApp() {
return () => ro.disconnect();
}, []);
const activeSceneViewCamera: SceneViewCamera = sceneViewDraft ??
(sceneView
? { scale: sceneView.scale, ox: sceneView.ox, oy: sceneView.oy }
: DEFAULT_SCENE_VIEW_CAMERA);
sceneViewRef.current = activeSceneViewCamera;
useEffect(() => {
if (scenePanRef.current) return;
setSceneViewDraft(null);
}, [sceneView?.revision]);
function publishSceneViewCamera(camera: SceneViewCamera): void {
setSceneViewDraft(camera);
sceneViewRef.current = camera;
pendingSceneViewRef.current = camera;
if (sceneViewPublishRafRef.current !== 0) return;
sceneViewPublishRafRef.current = requestAnimationFrame(() => {
sceneViewPublishRafRef.current = 0;
const next = pendingSceneViewRef.current;
if (!next) return;
void sceneViewApi.dispatch({ kind: 'set', camera: next });
});
}
const publishSceneViewCameraRef = useRef(publishSceneViewCamera);
publishSceneViewCameraRef.current = publishSceneViewCamera;
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
if (e.code === 'Space') spaceDownRef.current = true;
};
const onKeyUp = (e: KeyboardEvent) => {
if (e.code === 'Space') spaceDownRef.current = false;
};
window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
return () => {
window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp);
};
}, []);
useEffect(() => {
const frame = previewFrameRef.current;
if (!frame || isVideoPreviewScene) return;
const onWheel = (e: WheelEvent) => {
e.preventDefault();
const host = previewHostRef.current;
const cr = previewContentRectRef.current;
if (!host || !cr) return;
const r = host.getBoundingClientRect();
const cam = sceneViewRef.current;
const containW = cr.w / Math.max(1e-6, cam.scale);
const containH = cr.h / Math.max(1e-6, cam.scale);
const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
const next = sceneViewZoomAt(cam, {
hostW: r.width,
hostH: r.height,
containW,
containH,
hostX: e.clientX - r.left,
hostY: e.clientY - r.top,
factor,
});
publishSceneViewCameraRef.current(next);
};
frame.addEventListener('wheel', onWheel, { passive: false });
return () => frame.removeEventListener('wheel', onWheel);
}, [isVideoPreviewScene]);
useEffect(() => {
return () => {
if (sceneViewPublishRafRef.current !== 0) {
cancelAnimationFrame(sceneViewPublishRafRef.current);
sceneViewPublishRafRef.current = 0;
}
};
}, []);
function audioStatus(group: 'scene' | 'campaign', assetId: string): { label: string; detail?: string } {
const el =
group === 'scene'
@@ -1541,11 +1633,20 @@ export function ControlApp() {
<div className={styles.spacer10} />
{isVideoPreviewScene ? <div className={styles.videoHint}>{t('control.videoBrushHint')}</div> : null}
<div className={styles.spacer10} />
<div className={styles.previewFrame}>
<div
ref={previewFrameRef}
className={styles.previewFrame}
title={
isVideoPreviewScene
? undefined
: 'Колесо — зум; перетаскивание СКМ/ПКМ или Space+ЛКМ — пан'
}
>
<div ref={previewHostRef} className={styles.previewHost}>
<ControlScenePreview
session={session}
videoRef={previewVideoRef}
viewCamera={activeSceneViewCamera}
onContentRectChange={setPreviewContentRect}
/>
</div>
@@ -1577,6 +1678,9 @@ export function ControlApp() {
/>
<div
className={styles.brushLayer}
onContextMenu={(e) => {
e.preventDefault();
}}
onPointerEnter={(e) => {
const p = toNPoint(e);
if (!p) return;
@@ -1588,6 +1692,19 @@ export function ControlApp() {
layoutBrushCursor();
}}
onPointerDown={(e) => {
const panWithPrimary = e.button === 0 && (spaceDownRef.current || e.altKey);
const isPan = e.button === 1 || e.button === 2 || panWithPrimary;
if (isPan) {
e.preventDefault();
(e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
scenePanRef.current = {
lastX: e.clientX,
lastY: e.clientY,
pointerId: e.pointerId,
};
return;
}
if (e.button !== 0) return;
const p = toNPoint(e);
if (!p) return;
cursorPosRef.current = p;
@@ -1622,6 +1739,22 @@ export function ControlApp() {
pushDraftToPixi();
}}
onPointerMove={(e) => {
const pan = scenePanRef.current;
if (pan && pan.pointerId === e.pointerId) {
const cr = previewContentRectRef.current;
if (!cr) return;
const cam = sceneViewRef.current;
const containW = cr.w / Math.max(1e-6, cam.scale);
const containH = cr.h / Math.max(1e-6, cam.scale);
const dx = e.clientX - pan.lastX;
const dy = e.clientY - pan.lastY;
pan.lastX = e.clientX;
pan.lastY = e.clientY;
publishSceneViewCamera(
sceneViewPanBy(cam, { containW, containH, dx, dy }),
);
return;
}
const p = toNPoint(e);
if (!p) return;
cursorPosRef.current = p;
@@ -1662,10 +1795,22 @@ export function ControlApp() {
}
scheduleDraftRepaint();
}}
onPointerUp={() => {
onPointerUp={(e) => {
if (scenePanRef.current?.pointerId === e.pointerId) {
scenePanRef.current = null;
const pending = pendingSceneViewRef.current;
if (pending) {
void sceneViewApi.dispatch({ kind: 'set', camera: pending });
}
return;
}
void commitStroke();
}}
onPointerCancel={() => {
onPointerCancel={(e) => {
if (scenePanRef.current?.pointerId === e.pointerId) {
scenePanRef.current = null;
return;
}
if (brushRef.current?.tool === 'exploreBrush') {
void sd.dispatch({ kind: 'draft.set', draft: null });
}
app/renderer/control/ControlScenePreview.tsx
+10 -2
View File
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { computeTimeSec } from '../../main/video/videoPlaybackStore';
import type { SessionState } from '../../shared/ipc/contracts';
import type { SceneViewCamera } from '../../shared/types';
import { useEditorI18n } from '../editor/i18n/EditorI18nContext';
import { RotatedImage } from '../shared/RotatedImage';
import { useAssetUrl } from '../shared/useAssetImageUrl';
@@ -12,6 +13,7 @@ import styles from './ControlScenePreview.module.css';
type Props = {
session: SessionState | null;
videoRef: React.RefObject<HTMLVideoElement | null>;
viewCamera?: SceneViewCamera | null;
onContentRectChange?: (rect: { x: number; y: number; w: number; h: number }) => void;
};
@@ -23,7 +25,7 @@ function fmt(sec: number): string {
return `${String(m)}:${String(r).padStart(2, '0')}`;
}
export function ControlScenePreview({ session, videoRef, onContentRectChange }: Props) {
export function ControlScenePreview({ session, videoRef, viewCamera = null, onContentRectChange }: Props) {
const { t } = useEditorI18n();
const [vp, video] = useVideoPlaybackState();
const scene =
@@ -91,7 +93,13 @@ export function ControlScenePreview({ session, videoRef, onContentRectChange }:
return (
<div className={styles.root}>
{url && scene?.previewAssetType === 'image' ? (
<RotatedImage url={url} rotationDeg={rot} mode="contain" onContentRectChange={onContentRectChange} />
<RotatedImage
url={url}
rotationDeg={rot}
mode="contain"
viewCamera={viewCamera}
onContentRectChange={onContentRectChange}
/>
) : url && isVideo ? (
<video
ref={(el) => {