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

feat: multi-material overlays, presentation guides, and release prebuilds

Browse Source 
Align control/presentation with presentation screen rect and darkness z-order; sync window titles and session window cleanup. Pack Win/Mac/Linux with npmRebuild disabled and release-native-prep for classic-level and sharp.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Ivan Fontosh
2026-08-03 11:28:18 +08:00
parent 61446dacfc
commit 2979d06f1c
41 changed files with 1060 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/main/index.ts
+10
View File
@@ -47,6 +47,7 @@ import {
createEditorWindowDeferred,
createWindows,
focusEditorWindow,
getPresentationContentSize,
getSceneDescriptionContent,
isMultiWindowOpen,
markAppQuitting,
@@ -61,6 +62,7 @@ import {
closeSceneEditorWindow,
closeNpcsWindow,
sendToAppWindows,
syncAllWindowChromeTitles,
togglePresentationFullscreen,
waitForEditorWindowReady,
warmNpcsEditorWindow,
@@ -414,6 +416,10 @@ async function main() {
closeMultiWindow();
return { ok: true };
});
registerHandler(ipcChannels.windows.syncChromeTitles, ({ localeTag }) => {
syncAllWindowChromeTitles(localeTag);
return { ok: true };
});
registerHandler(ipcChannels.windows.togglePresentationFullscreen, () => {
const isFullScreen = togglePresentationFullscreen();
return { ok: true, isFullScreen };
@@ -421,6 +427,10 @@ async function main() {
registerHandler(ipcChannels.windows.getMultiWindowState, () => {
return { open: isMultiWindowOpen() };
});
registerHandler(ipcChannels.windows.getPresentationContentSize, () => {
const size = getPresentationContentSize();
return size ?? { width: null, height: null };
});
registerHandler(ipcChannels.windows.openSceneDescription, ({ html }) => {
openSceneDescriptionWindow(html);
return { ok: true };
app/main/materials/materialsOverlayStore.ts
+129 -47
View File
@@ -1,6 +1,7 @@
import {
clampMaterialsLayout,
DEFAULT_MATERIALS_OVERLAY_LAYOUT,
defaultLegendLayoutForMaterial,
type MaterialId,
type MaterialsOverlayEvent,
type MaterialsOverlayLayout,
@@ -12,9 +13,10 @@ import {
function emptyState(): MaterialsOverlayState {
return {
revision: 1,
activeMaterialId: null,
layout: { ...DEFAULT_MATERIALS_OVERLAY_LAYOUT },
legendLayout: { ...DEFAULT_MATERIALS_OVERLAY_LAYOUT, cx: 0.82, cy: 0.5, scale: 0.85 },
activeMaterialIds: [],
layouts: {},
legendLayouts: {},
focusMaterialId: null,
zoomTool: null,
};
}
@@ -26,14 +28,12 @@ function initialLayout(rotationDeg?: number): MaterialsOverlayLayout {
});
}
function initialLegendLayout(): MaterialsOverlayLayout {
return clampMaterialsLayout({
...DEFAULT_MATERIALS_OVERLAY_LAYOUT,
cx: 0.82,
cy: 0.5,
scale: 0.85,
rotationDeg: 0,
});
function layoutFor(state: MaterialsOverlayState, materialId: MaterialId): MaterialsOverlayLayout {
return state.layouts[materialId] ?? { ...DEFAULT_MATERIALS_OVERLAY_LAYOUT };
}
function legendLayoutFor(state: MaterialsOverlayState, materialId: MaterialId): MaterialsOverlayLayout {
return state.legendLayouts[materialId] ?? defaultLegendLayoutForMaterial();
}
export class MaterialsOverlayStore {
@@ -44,14 +44,15 @@ export class MaterialsOverlayStore {
}
clear(): MaterialsOverlayState {
if (this.state.activeMaterialId === null && this.state.zoomTool === null) {
if (this.state.activeMaterialIds.length === 0 && this.state.zoomTool === null) {
return this.state;
}
this.state = {
revision: this.state.revision + 1,
activeMaterialId: null,
layout: { ...DEFAULT_MATERIALS_OVERLAY_LAYOUT },
legendLayout: initialLegendLayout(),
activeMaterialIds: [],
layouts: {},
legendLayouts: {},
focusMaterialId: null,
zoomTool: null,
};
return this.state;
@@ -61,50 +62,98 @@ export class MaterialsOverlayStore {
switch (event.kind) {
case 'hide':
return this.clear();
case 'show':
this.state = {
revision: this.state.revision + 1,
activeMaterialId: event.materialId,
layout: initialLayout(event.rotationDeg),
legendLayout: initialLegendLayout(),
zoomTool: this.state.zoomTool,
};
return this.state;
case 'toggle': {
if (this.state.activeMaterialId === event.materialId) {
return this.clear();
case 'show': {
if (this.state.activeMaterialIds.includes(event.materialId)) {
this.state = {
...this.state,
revision: this.state.revision + 1,
focusMaterialId: event.materialId,
};
return this.state;
}
this.state = {
revision: this.state.revision + 1,
activeMaterialId: event.materialId,
layout: initialLayout(event.rotationDeg),
legendLayout: initialLegendLayout(),
activeMaterialIds: [...this.state.activeMaterialIds, event.materialId],
layouts: {
...this.state.layouts,
[event.materialId]: initialLayout(event.rotationDeg),
},
legendLayouts: {
...this.state.legendLayouts,
[event.materialId]: defaultLegendLayoutForMaterial(),
},
focusMaterialId: event.materialId,
zoomTool: this.state.zoomTool,
};
return this.state;
}
case 'toggle': {
if (this.state.activeMaterialIds.includes(event.materialId)) {
const activeMaterialIds = this.state.activeMaterialIds.filter((id) => id !== event.materialId);
const layouts = { ...this.state.layouts };
const legendLayouts = { ...this.state.legendLayouts };
delete layouts[event.materialId];
delete legendLayouts[event.materialId];
const focusMaterialId =
this.state.focusMaterialId === event.materialId
? (activeMaterialIds[activeMaterialIds.length - 1] ?? null)
: this.state.focusMaterialId;
this.state = {
revision: this.state.revision + 1,
activeMaterialIds,
layouts,
legendLayouts,
focusMaterialId,
zoomTool: activeMaterialIds.length === 0 ? null : this.state.zoomTool,
};
return this.state;
}
this.state = {
revision: this.state.revision + 1,
activeMaterialIds: [...this.state.activeMaterialIds, event.materialId],
layouts: {
...this.state.layouts,
[event.materialId]: initialLayout(event.rotationDeg),
},
legendLayouts: {
...this.state.legendLayouts,
[event.materialId]: defaultLegendLayoutForMaterial(),
},
focusMaterialId: event.materialId,
zoomTool: this.state.zoomTool,
};
return this.state;
}
case 'layout.set': {
if (this.state.activeMaterialId === null) return this.state;
if (!this.state.activeMaterialIds.includes(event.materialId)) return this.state;
this.state = {
...this.state,
revision: this.state.revision + 1,
layout: clampMaterialsLayout({
...this.state.layout,
...event.layout,
}),
focusMaterialId: event.materialId,
layouts: {
...this.state.layouts,
[event.materialId]: clampMaterialsLayout({
...layoutFor(this.state, event.materialId),
...event.layout,
}),
},
};
return this.state;
}
case 'legendLayout.set': {
if (this.state.activeMaterialId === null) return this.state;
if (!this.state.activeMaterialIds.includes(event.materialId)) return this.state;
this.state = {
...this.state,
revision: this.state.revision + 1,
legendLayout: clampMaterialsLayout({
...this.state.legendLayout,
...event.layout,
rotationDeg: 0,
}),
focusMaterialId: event.materialId,
legendLayouts: {
...this.state.legendLayouts,
[event.materialId]: clampMaterialsLayout({
...legendLayoutFor(this.state, event.materialId),
...event.layout,
rotationDeg: 0,
}),
},
};
return this.state;
}
@@ -118,10 +167,18 @@ export class MaterialsOverlayStore {
return this.state;
}
case 'zoomAt': {
if (this.state.activeMaterialId === null || !this.state.zoomTool) return this.state;
if (this.state.activeMaterialIds.length === 0 || !this.state.zoomTool) return this.state;
const targetId =
(event.materialId && this.state.activeMaterialIds.includes(event.materialId)
? event.materialId
: null) ??
this.state.focusMaterialId ??
this.state.activeMaterialIds[this.state.activeMaterialIds.length - 1] ??
null;
if (!targetId) return this.state;
const factor = this.state.zoomTool === 'zoomIn' ? 1.25 : 1 / 1.25;
const layout: MaterialsOverlayLayout = zoomMaterialsLayoutAt(
this.state.layout,
layoutFor(this.state, targetId),
event.nx,
event.ny,
factor,
@@ -129,7 +186,11 @@ export class MaterialsOverlayStore {
this.state = {
...this.state,
revision: this.state.revision + 1,
layout,
focusMaterialId: targetId,
layouts: {
...this.state.layouts,
[targetId]: layout,
},
};
return this.state;
}
@@ -139,8 +200,29 @@ export class MaterialsOverlayStore {
}
ensureMaterialStillExists(materialIds: ReadonlySet<MaterialId>): MaterialsOverlayState {
const active = this.state.activeMaterialId;
if (active === null || materialIds.has(active)) return this.state;
return this.clear();
const activeMaterialIds = this.state.activeMaterialIds.filter((id) => materialIds.has(id));
if (activeMaterialIds.length === this.state.activeMaterialIds.length) return this.state;
if (activeMaterialIds.length === 0) return this.clear();
const layouts: Record<string, MaterialsOverlayLayout> = {};
const legendLayouts: Record<string, MaterialsOverlayLayout> = {};
for (const id of activeMaterialIds) {
const layout = this.state.layouts[id];
if (layout) layouts[id] = layout;
const legend = this.state.legendLayouts[id];
if (legend) legendLayouts[id] = legend;
}
const focusMaterialId =
this.state.focusMaterialId && activeMaterialIds.includes(this.state.focusMaterialId)
? this.state.focusMaterialId
: (activeMaterialIds[activeMaterialIds.length - 1] ?? null);
this.state = {
revision: this.state.revision + 1,
activeMaterialIds,
layouts,
legendLayouts,
focusMaterialId,
zoomTool: this.state.zoomTool,
};
return this.state;
}
}
app/main/project/zipStore.ts
+1 -1
View File
@@ -1044,7 +1044,7 @@ export class ZipProjectStore {
for (const asset of staged) {
assets[asset.id] = asset;
if (asset.type !== 'audio') continue;
campaignAudios.push({ assetId: asset.id, autoplay: true, loop: true });
campaignAudios.push({ assetId: asset.id, autoplay: false, loop: false });
}
return { ...p, assets, campaignAudios };
});
app/main/windows/createWindows.editorClose.test.ts
+7 -1
View File
@@ -41,7 +41,7 @@ void test('createWindows: окно описания сцены закрывае
assert.ok(src.includes('closeSceneDescriptionWindow'));
assert.ok(src.includes("createWindow('sceneDescription'"));
assert.match(src, /export function closeMultiWindow[\s\S]*closeSceneDescriptionWindow/);
assert.match(src, /kind !== 'presentation' && kind !== 'control'[\s\S]*closeSceneDescriptionWindow/);
assert.match(src, /kind !== 'presentation'[\s\S]*closeSceneDescriptionWindow/);
});
void test('createWindows: окно материалов закрывается с multi-window', () => {
@@ -63,6 +63,12 @@ void test('createWindows: окно НПС закрывается с multi-window
assert.match(src, /export function closeMultiWindow[\s\S]*closeNpcsWindow/);
});
void test('createWindows: закрытие пульта закрывает сессионные окна и презентацию', () => {
const src = readCreateWindows();
assert.match(src, /kind === 'control'/);
assert.match(src, /closePlaySessionAuxiliaryWindows[\s\S]*closePresentationWindow/);
});
void test('createWindows: production — loadFile для HTML (не только file://)', () => {
const src = readCreateWindows();
assert.ok(src.includes('loadFile'));
app/main/windows/createWindows.ts
+112 -10
View File
@@ -2,7 +2,7 @@ import path from 'node:path';
import { app, BrowserWindow, screen } from 'electron';
import { windowChromeTitle } from '../../shared/appBranding';
import { windowChromeTitle, type AppWindowKind } from '../../shared/appBranding';
import { ipcChannels } from '../../shared/ipc/contracts';
import { safeConsoleError } from '../safeConsole';
@@ -32,7 +32,16 @@ export const SESSION_STATE_WINDOW_KINDS: readonly WindowKind[] = [
const windows = new Map<WindowKind, BrowserWindow>();
/** Язык заголовков окон (из редактора); иначе `app.getLocale()`. */
let chromeLocaleTagOverride: string | null = null;
function resolveChromeLocaleTag(): string {
return chromeLocaleTagOverride ?? app.getLocale();
}
let appQuitting = false;
/** Защита от каскада close(control) ↔ close(presentation). */
let closingPlaySession = false;
let pendingSceneDescriptionHtml = '';
/** Окно материалов — только колонка списка. */
@@ -60,6 +69,35 @@ function broadcastMultiWindowStateChanged(open: boolean): void {
}
}
export function getPresentationContentSize(): { width: number; height: number } | null {
const pres = windows.get('presentation');
if (!pres || pres.isDestroyed()) return null;
const [width, height] = pres.getContentSize();
if (width <= 0 || height <= 0) return null;
return { width, height };
}
function broadcastPresentationContentSize(): void {
const size = getPresentationContentSize();
if (!size) return;
for (const w of BrowserWindow.getAllWindows()) {
if (w.isDestroyed() || w.webContents.isDestroyed()) continue;
try {
w.webContents.send(ipcChannels.windows.presentationContentSizeChanged, size);
} catch {
/* ignore */
}
}
}
function bindPresentationContentSizeTracking(win: BrowserWindow): void {
const emit = () => broadcastPresentationContentSize();
win.on('resize', emit);
win.on('enter-full-screen', emit);
win.on('leave-full-screen', emit);
win.webContents.once('did-finish-load', emit);
}
function sendSceneDescriptionContent(win: BrowserWindow, html: string): void {
if (win.isDestroyed() || win.webContents.isDestroyed()) return;
try {
@@ -91,6 +129,51 @@ export function sendToAppWindows(
}
}
function applyWindowChromeTitle(win: BrowserWindow, kind: WindowKind): void {
if (win.isDestroyed()) return;
win.setTitle(windowChromeTitle(kind as AppWindowKind, resolveChromeLocaleTag()));
}
export function syncAllWindowChromeTitles(localeTag: string): void {
chromeLocaleTagOverride = localeTag.trim() || null;
for (const [kind, win] of windows.entries()) {
applyWindowChromeTitle(win, kind);
}
}
function bindWindowChromeTitle(win: BrowserWindow, kind: WindowKind): void {
const apply = () => applyWindowChromeTitle(win, kind);
apply();
win.webContents.on('page-title-updated', (event) => {
event.preventDefault();
apply();
});
win.webContents.on('did-finish-load', () => {
apply();
});
}
/** Закрыть окна сессии, кроме редактора и его дочерних окон. */
function closePlaySessionAuxiliaryWindows(): void {
closeSceneDescriptionWindow();
closeMaterialsWindow();
closeNpcsWindow();
}
function closePresentationWindow(): void {
const pres = windows.get('presentation');
if (pres && !pres.isDestroyed()) {
pres.close();
}
}
function closeControlWindow(): void {
const ctrl = windows.get('control');
if (ctrl && !ctrl.isDestroyed()) {
ctrl.close();
}
}
function quitAppFromEditorClose(): void {
markAppQuitting();
app.quit();
@@ -272,7 +355,7 @@ function createWindow(kind: WindowKind, opts?: CreateWindowOpts): BrowserWindow
}
}
win.setTitle(windowChromeTitle(kind, app.getLocale()));
bindWindowChromeTitle(win, kind);
if (
kind === 'sceneDescription' ||
kind === 'materials' ||
@@ -307,14 +390,30 @@ function createWindow(kind: WindowKind, opts?: CreateWindowOpts): BrowserWindow
quitAppFromEditorClose();
});
}
if (kind === 'control') {
win.on('close', () => {
if (appQuitting || closingPlaySession) return;
closingPlaySession = true;
closePlaySessionAuxiliaryWindows();
closePresentationWindow();
});
}
if (kind === 'presentation') {
bindPresentationContentSizeTracking(win);
win.on('close', () => {
if (appQuitting || closingPlaySession) return;
closingPlaySession = true;
closePlaySessionAuxiliaryWindows();
closeControlWindow();
});
}
win.on('closed', () => windows.delete(kind));
win.on('closed', () => {
if (kind !== 'presentation' && kind !== 'control') return;
const open = windows.has('presentation') || windows.has('control');
if (!open) {
closeSceneDescriptionWindow();
closeMaterialsWindow();
closeNpcsWindow();
closingPlaySession = false;
closePlaySessionAuxiliaryWindows();
}
broadcastMultiWindowStateChanged(open);
});
@@ -395,16 +494,19 @@ export function openMultiWindow() {
createWindow('control', process.platform === 'darwin' ? undefined : { parent: presentation });
}
broadcastMultiWindowStateChanged(true);
broadcastPresentationContentSize();
}
export function closeMultiWindow(): void {
closeSceneDescriptionWindow();
closeMaterialsWindow();
closeNpcsWindow();
closingPlaySession = true;
closePlaySessionAuxiliaryWindows();
const pres = windows.get('presentation');
const ctrl = windows.get('control');
if (pres) pres.close();
if (ctrl) ctrl.close();
if (pres && !pres.isDestroyed()) pres.close();
if (ctrl && !ctrl.isDestroyed()) ctrl.close();
if (!windows.has('presentation') && !windows.has('control')) {
closingPlaySession = false;
}
}
export function isMultiWindowOpen(): boolean {
app/renderer/control/ControlApp.module.css
+5 -1
View File
@@ -271,6 +271,7 @@
.historyTitle {
font-weight: 800;
min-width: 0;
}
.emptyStory {
@@ -356,7 +357,7 @@
.branchGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@@ -367,6 +368,8 @@
padding: 12px;
display: grid;
gap: 10px;
min-width: 0;
max-width: 100%;
}
.branchCardHeader {
@@ -383,6 +386,7 @@
.branchName {
font-weight: 900;
min-width: 0;
}
.branchCardReturn {
app/renderer/control/ControlApp.tsx
+141 -50
View File
@@ -1,6 +1,7 @@
import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { pickEraseTargetId } from '../../shared/effectEraserHitTest';
import { fitAspectRect } from '../../shared/geometry/fitAspectRect';
import { ipcChannels } from '../../shared/ipc/contracts';
import type { SessionState } from '../../shared/ipc/contracts';
import {
@@ -8,7 +9,7 @@ import {
isNodeInSideStoryline,
listSideStoryStarts,
} from '../../shared/graph/sceneGraphLineage';
import type { GraphNodeId, Scene, SceneId, SceneViewCamera } from '../../shared/types';
import type { GraphNodeId, MaterialId, Scene, SceneId, SceneViewCamera } from '../../shared/types';
import {
DEFAULT_SCENE_VIEW_CAMERA,
sceneViewPanBy,
@@ -42,6 +43,8 @@ import { useSceneTokensSession } from '../shared/tokens/useSceneTokensSession';
import { SceneTrapsOverlay } from '../shared/traps/SceneTrapsOverlay';
import { useSceneTrapsState } from '../shared/traps/useSceneTrapsState';
import { Button } from '../shared/ui/controls';
import { EllipsisText } from '../shared/ui/EllipsisText';
import ellipsisStyles from '../shared/ui/ellipsisText.module.css';
import { Surface } from '../shared/ui/Surface';
import { useAssetUrl } from '../shared/useAssetImageUrl';
@@ -191,10 +194,25 @@ export function ControlApp() {
w: number;
h: number;
} | null>(null);
const [presentationContentSize, setPresentationContentSize] = useState<{
width: number;
height: number;
} | null>(null);
const previewContentRectRef = useRef(previewContentRect);
previewContentRectRef.current = previewContentRect;
const previewSizeRef = useRef(previewSize);
previewSizeRef.current = previewSize;
const presentationScreenRect = useMemo(() => {
if (!presentationContentSize) return null;
if (previewSize.w <= 1 || previewSize.h <= 1) return null;
return fitAspectRect(
previewSize.w,
previewSize.h,
presentationContentSize.width,
presentationContentSize.height,
);
}, [presentationContentSize, previewSize.h, previewSize.w]);
const brushCursorElRef = useRef<HTMLDivElement | null>(null);
const cursorPosRef = useRef<{ x: number; y: number } | null>(null);
const draftPaintRafRef = useRef(0);
@@ -229,12 +247,32 @@ export function ControlApp() {
}, [api]);
useEffect(() => {
return api.on(ipcChannels.windows.multiWindowStateChanged, ({ open }) => {
const refreshPresentationSize = () => {
void api.invoke(ipcChannels.windows.getPresentationContentSize, {}).then((size) => {
if (size.width == null || size.height == null) {
setPresentationContentSize(null);
return;
}
setPresentationContentSize({ width: size.width, height: size.height });
});
};
refreshPresentationSize();
const offSize = api.on(ipcChannels.windows.presentationContentSizeChanged, (size) => {
setPresentationContentSize({ width: size.width, height: size.height });
});
const offMw = api.on(ipcChannels.windows.multiWindowStateChanged, ({ open }) => {
if (!open) {
mainStoryReturnRef.current = null;
setMainStoryReturnGraphNodeId(null);
setPresentationContentSize(null);
return;
}
refreshPresentationSize();
});
return () => {
offSize();
offMw();
};
}, [api]);
useEffect(() => {
@@ -1695,7 +1733,10 @@ export function ControlApp() {
) : (
<div className={styles.historyMuted}>{t('control.passed')}</div>
)}
<div className={styles.historyTitle}>{s?.title ?? (gn ? String(gn.sceneId) : gnId)}</div>
<EllipsisText
text={s?.title ?? (gn ? String(gn.sceneId) : gnId)}
className={[styles.historyTitle, ellipsisStyles.root].join(' ')}
/>
</button>
);
})}
@@ -1759,9 +1800,6 @@ export function ControlApp() {
draft={explosionDraft}
viewport={previewContentRect}
/>
{previewContentRect ? (
<SceneDarknessOverlay state={sdState} overlayAlpha={0.5} viewport={previewContentRect} />
) : null}
<div
ref={brushCursorElRef}
className={styles.brushCursor}
@@ -1987,11 +2025,28 @@ export function ControlApp() {
</>
) : null}
{(() => {
const activeMaterial =
session?.project && materialsOverlay?.activeMaterialId
? (session.project.materials ?? []).find((m) => m.id === materialsOverlay.activeMaterialId)
: undefined;
const project = session?.project;
const materialIds = materialsOverlay?.activeMaterialIds ?? [];
const materialItems =
project && materialIds.length > 0
? materialIds
.map((id) => {
const material = (project.materials ?? []).find((m) => m.id === id);
if (!material) return null;
return {
material,
layout: materialsOverlay?.layouts[id] ?? DEFAULT_MATERIALS_OVERLAY_LAYOUT,
legendLayout:
materialsOverlay?.legendLayouts[id] ?? {
...DEFAULT_MATERIALS_OVERLAY_LAYOUT,
cx: 0.82,
cy: 0.5,
scale: 0.85,
},
};
})
.filter((x): x is NonNullable<typeof x> => x !== null)
: [];
const activeIds = npcsOverlay?.activeNpcIds ?? [];
const npcItems =
project && activeIds.length > 0
@@ -2007,9 +2062,11 @@ export function ControlApp() {
})
.filter((x): x is NonNullable<typeof x> => x !== null)
: [];
const showMaterial = Boolean(activeMaterial);
const showMaterial = materialItems.length > 0;
const showNpcs = npcItems.length > 0;
if (!showMaterial && !showNpcs) return null;
const screenRect = presentationScreenRect;
const showGuide = Boolean(screenRect) && !isVideoPreviewScene;
if (!showMaterial && !showNpcs && !showGuide) return null;
const closes = [
...(showMaterial
? [
@@ -2035,52 +2092,79 @@ export function ControlApp() {
: []),
];
const materialsZoom = materialsOverlay?.zoomTool ?? null;
const materialIdFromTarget = (target: EventTarget | null) => {
if (!(target instanceof Element)) return undefined;
const frame = target.closest('[data-material-id]');
const raw = frame?.getAttribute('data-material-id');
return raw ? (raw as MaterialId) : undefined;
};
return (
<>
{previewContentRect && currentScene?.darkenScene ? (
<SceneDarknessOverlay
state={sdState}
overlayAlpha={0.5}
viewport={previewContentRect}
style={{ zIndex: 30 }}
/>
) : null}
<SceneOverlayHost
active
active={showMaterial || showNpcs}
viewport={screenRect}
showViewportGuide={showGuide}
zoomTool={materialsZoom}
{...(materialsZoom
? {
onZoomAt: (nx: number, ny: number) => {
void materialsApi.dispatch({ kind: 'zoomAt', nx, ny });
onZoomAt: (nx: number, ny: number, evTarget?: EventTarget | null) => {
const mid = materialIdFromTarget(evTarget ?? null);
void materialsApi.dispatch({
kind: 'zoomAt',
nx,
ny,
...(mid ? { materialId: mid } : {}),
});
},
}
: {})}
closes={closes}
>
{showMaterial && activeMaterial ? (
<MaterialOverlay
embedded
assetId={activeMaterial.assetId}
layout={materialsOverlay?.layout ?? DEFAULT_MATERIALS_OVERLAY_LAYOUT}
editable
zoomTool={materialsZoom}
rotateLabel={t('materials.rotateOverlay')}
onLayoutChange={(layout) => {
void materialsApi.dispatch({ kind: 'layout.set', layout });
}}
{...(activeMaterial.legend?.enabled
? { legendMarkers: activeMaterial.legend.markers ?? [] }
: {})}
/>
) : null}
{showMaterial && activeMaterial?.legend?.enabled ? (
<MaterialLegendPanel
legend={activeMaterial.legend}
layout={
materialsOverlay?.legendLayout ?? {
...DEFAULT_MATERIALS_OVERLAY_LAYOUT,
cx: 0.82,
cy: 0.5,
scale: 0.85,
}
}
editable
onLayoutChange={(layout) => {
void materialsApi.dispatch({ kind: 'legendLayout.set', layout });
}}
/>
) : null}
{materialItems.map(({ material, layout, legendLayout }) => (
<React.Fragment key={material.id}>
<MaterialOverlay
embedded
assetId={material.assetId}
materialId={material.id}
layout={layout}
editable
zoomTool={materialsZoom}
rotateLabel={t('materials.rotateOverlay')}
onLayoutChange={(nextLayout) => {
void materialsApi.dispatch({
kind: 'layout.set',
materialId: material.id,
layout: nextLayout,
});
}}
{...(material.legend?.enabled
? { legendMarkers: material.legend.markers ?? [] }
: {})}
/>
{material.legend?.enabled ? (
<MaterialLegendPanel
legend={material.legend}
layout={legendLayout}
editable
onLayoutChange={(nextLayout) => {
void materialsApi.dispatch({
kind: 'legendLayout.set',
materialId: material.id,
layout: nextLayout,
});
}}
/>
) : null}
</React.Fragment>
))}
{showNpcs ? (
<NpcsSceneOverlay
embedded
@@ -2093,6 +2177,7 @@ export function ControlApp() {
/>
) : null}
</SceneOverlayHost>
</>
);
})()}
</div>
@@ -2106,7 +2191,10 @@ export function ControlApp() {
<div className={styles.branchCardHeader}>
<div className={styles.branchOption}>{t('control.option', { n: '1' })}</div>
</div>
<div className={styles.branchName}>{returnSceneTitle}</div>
<EllipsisText
text={returnSceneTitle}
className={[styles.branchName, ellipsisStyles.root].join(' ')}
/>
<Button variant="primary" onClick={returnToMainStoryline}>
{t('control.returnToMainStory')}
</Button>
@@ -2119,7 +2207,10 @@ export function ControlApp() {
{t('control.option', { n: String(i + 1 + branchOptionOffset) })}
</div>
</div>
<div className={styles.branchName}>{o.scene.title || t('control.unnamed')}</div>
<EllipsisText
text={o.scene.title || t('control.unnamed')}
className={[styles.branchName, ellipsisStyles.root].join(' ')}
/>
<Button
variant="primary"
onClick={() =>
app/renderer/control/ControlScenePreview.tsx
+10 -4
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useState } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { computeTimeSec } from '../../main/video/videoPlaybackStore';
import type { SessionState } from '../../shared/ipc/contracts';
@@ -35,6 +35,7 @@ export function ControlScenePreview({ session, videoRef, viewCamera = null, onCo
const isVideo = scene?.previewAssetType === 'video';
const assetId = scene?.previewAssetType === 'video' ? scene.previewAssetId : null;
const autostart = scene?.previewVideoAutostart ?? false;
const lastTargetRef = useRef<{ sceneKey: string; assetId: string; autostart: boolean } | null>(null);
const [tick, setTick] = useState(0);
const dur = useMemo(
@@ -61,14 +62,18 @@ export function ControlScenePreview({ session, videoRef, viewCamera = null, onCo
useEffect(() => {
if (!isVideo) return;
if (!assetId) return;
// `target.set` bumps revision and resets anchors; avoid firing on every render.
if (vp?.targetAssetId === assetId) return;
const sceneKey = session?.project?.currentGraphNodeId ?? session?.currentSceneId ?? '';
const prev = lastTargetRef.current;
if (prev && prev.sceneKey === sceneKey && prev.assetId === assetId && prev.autostart === autostart) {
return;
}
lastTargetRef.current = { sceneKey, assetId, autostart };
void video.dispatch({
kind: 'target.set',
assetId,
autostart,
});
}, [assetId, isVideo, autostart, vp?.targetAssetId, video]);
}, [assetId, isVideo, autostart, session?.currentSceneId, session?.project?.currentGraphNodeId, video]);
useEffect(() => {
const v = videoRef.current;
@@ -108,6 +113,7 @@ export function ControlScenePreview({ session, videoRef, viewCamera = null, onCo
className={styles.video}
src={url}
playsInline
loop={Boolean(scene?.settings?.loopVideo)}
preload="auto"
onTimeUpdate={() => setTick((x) => x + 1)}
onLoadedMetadata={() => setTick((x) => x + 1)}
app/renderer/editor/EditorApp.module.css
+27
View File
@@ -946,6 +946,33 @@
flex-wrap: wrap;
}
.actionsRowHalf {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
}
.actionsRowHalf > span {
display: flex;
min-width: 0;
width: 100%;
flex: 1 1 0;
}
.actionsRowHalf > span > button {
flex: 1 1 auto;
width: 100%;
}
.actionsRowVideoChecks {
display: flex;
flex-wrap: wrap;
gap: 12px;
width: 100%;
align-items: center;
}
.checkboxLabel {
display: flex;
gap: 8px;
app/renderer/editor/EditorApp.tsx
+27 -11
View File
@@ -1096,6 +1096,7 @@ export function EditorApp() {
previewAssetId={sc?.previewAssetId ?? null}
previewAssetType={sc?.previewAssetType ?? null}
previewVideoAutostart={sc?.previewVideoAutostart ?? false}
previewVideoLoop={sc?.settings.loopVideo ?? false}
previewRotationDeg={sc?.previewRotationDeg ?? 0}
darkenScene={sc?.darkenScene ?? false}
previewBusy={previewBusy}
@@ -1108,6 +1109,9 @@ export function EditorApp() {
onPreviewVideoAutostartChange={(next) =>
void actions.updateScene(sid, { previewVideoAutostart: next })
}
onPreviewVideoLoopChange={(next) =>
void actions.updateScene(sid, { settings: { loopVideo: next } })
}
onDarkenSceneChange={(next) => void actions.updateScene(sid, { darkenScene: next })}
onTitleChange={(title) => void actions.updateScene(sid, { title })}
onDescriptionChange={(description) =>
@@ -2322,6 +2326,7 @@ type SceneInspectorProps = {
previewAssetId: AssetId | null;
previewAssetType: 'image' | 'video' | null;
previewVideoAutostart: boolean;
previewVideoLoop: boolean;
previewRotationDeg: 0 | 90 | 180 | 270;
darkenScene: boolean;
previewBusy: boolean;
@@ -2330,6 +2335,7 @@ type SceneInspectorProps = {
audioRefs: SceneAudioRef[];
onAudioRefsChange: (next: SceneAudioRef[]) => void;
onPreviewVideoAutostartChange: (next: boolean) => void;
onPreviewVideoLoopChange: (next: boolean) => void;
onDarkenSceneChange: (next: boolean) => void;
onTitleChange: (v: string) => void;
onDescriptionChange: (v: string) => void;
@@ -2456,6 +2462,7 @@ function SceneInspector({
previewAssetId,
previewAssetType,
previewVideoAutostart,
previewVideoLoop,
previewRotationDeg,
darkenScene,
previewBusy,
@@ -2464,6 +2471,7 @@ function SceneInspector({
audioRefs,
onAudioRefsChange,
onPreviewVideoAutostartChange,
onPreviewVideoLoopChange,
onDarkenSceneChange,
onTitleChange,
onDescriptionChange,
@@ -2578,7 +2586,7 @@ function SceneInspector({
muted
playsInline
autoPlay={previewVideoAutostart}
loop
loop={previewVideoLoop}
preload="metadata"
className={styles.videoCover}
/>
@@ -2595,12 +2603,14 @@ function SceneInspector({
</div>
) : null}
</div>
<div className={styles.actionsRow}>
<div className={styles.actionsRowHalf}>
<Button variant="primary" disabled={previewBusy} onClick={onImportPreview}>
{previewAssetId ? t('scene.change') : t('campaign.upload')}
</Button>
{previewAssetId ? <Button onClick={onClearPreview}>{t('scene.clear')}</Button> : null}
{previewAssetId && previewAssetType === 'video' ? (
{previewAssetId ? <Button onClick={onClearPreview}>{t('scene.clear')}</Button> : <span aria-hidden />}
</div>
{previewAssetId && previewAssetType === 'video' ? (
<div className={styles.actionsRowVideoChecks}>
<label className={styles.checkboxLabel}>
<input
type="checkbox"
@@ -2609,8 +2619,19 @@ function SceneInspector({
/>
<span className={styles.spanSm}>{t('scene.autostart')}</span>
</label>
) : null}
{previewAssetId && previewAssetType === 'image' ? (
<label className={styles.checkboxLabel}>
<input
type="checkbox"
checked={previewVideoLoop}
onChange={(e) => onPreviewVideoLoopChange(e.target.checked)}
/>
<span className={styles.spanSm}>{t('campaign.loop')}</span>
</label>
</div>
) : null}
{previewAssetId && previewAssetType === 'image' ? (
<>
<div className={styles.spacer6} />
<Button
onClick={() => {
const next = ((previewRotationDeg + 90) % 360) as 0 | 90 | 180 | 270;
@@ -2619,10 +2640,6 @@ function SceneInspector({
>
{t('scene.rotate')}
</Button>
) : null}
</div>
{previewAssetId && previewAssetType === 'image' ? (
<>
<div className={styles.spacer6} />
<label className={styles.checkboxLabel}>
<input
@@ -2879,7 +2896,6 @@ function SceneListCard({
</div>
<div className={styles.sceneCardBody}>
<div className={styles.sceneCardHeader}>
{scene.active ? <div className={styles.badgeCurrent}>{t('sceneCard.current')}</div> : null}
<div
ref={titleRef}
className={styles.sceneCardTitle}
app/renderer/editor/MaterialLegendEditor.module.css
+11
View File
@@ -15,6 +15,17 @@
flex-wrap: wrap;
}
.legendHeadRow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
}
.legendHeadRow .row {
margin: 0;
}
.hint {
font-size: 12px;
opacity: 0.7;
app/renderer/editor/MaterialLegendEditor.tsx
+13 -4
View File
@@ -27,6 +27,8 @@ type Props = {
/** Крупная карта (окно «Материалы»). */
largeMap?: boolean;
onChange: (legend: MaterialLegend) => void;
onRotate?: () => void;
rotateLabel?: string;
};
type DragMode =
@@ -55,6 +57,8 @@ export function MaterialLegendEditor({
rotationDeg = 0,
largeMap = false,
onChange,
onRotate,
rotateLabel = 'Повернуть',
}: Props) {
const [draft, setDraft] = useState<MaterialLegend>(() => cloneLegend(legend));
const [activeItemId, setActiveItemId] = useState<string | null>(null);
@@ -404,10 +408,15 @@ export function MaterialLegendEditor({
<div className={[styles.legendBlock, largeMap ? styles.legendBlockLarge : ''].filter(Boolean).join(' ')}>
{largeMap ? mapBlock : null}
<label className={styles.row}>
<input type="checkbox" checked={draft.enabled} onChange={(e) => setEnabled(e.target.checked)} />
<span>Легенда</span>
</label>
<div className={styles.legendHeadRow}>
{onRotate ? (
<Button onClick={onRotate}>{rotateLabel}</Button>
) : null}
<label className={styles.row}>
<input type="checkbox" checked={draft.enabled} onChange={(e) => setEnabled(e.target.checked)} />
<span>Легенда</span>
</label>
</div>
{draft.enabled ? (
<>
app/renderer/editor/MaterialsBrowser.tsx
+15 -4
View File
@@ -19,7 +19,7 @@ export type MaterialsBrowserProps = {
mode: 'editor' | 'runtime';
selectedId: MaterialId | null;
onSelect: (id: MaterialId | null) => void;
activeMaterialId?: MaterialId | null;
activeMaterialIds?: readonly MaterialId[];
onAdd?: () => void;
onEdit?: (material: ProjectMaterial) => void;
onDelete?: (materialId: MaterialId) => Promise<void>;
@@ -40,7 +40,7 @@ export function MaterialsBrowser({
mode,
selectedId,
onSelect,
activeMaterialId = null,
activeMaterialIds = [],
onAdd,
onEdit,
onDelete,
@@ -74,6 +74,7 @@ export function MaterialsBrowser({
return () => window.removeEventListener('mousedown', onDown);
}, [menuFor]);
const activeSet = useMemo(() => new Set(activeMaterialIds), [activeMaterialIds]);
const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
if (!q) return materials;
@@ -126,7 +127,7 @@ export function MaterialsBrowser({
key={m.id}
material={m}
selected={m.id === selectedId}
active={m.id === activeMaterialId}
active={activeSet.has(m.id)}
showMenu={mode === 'editor'}
dragging={dragId === m.id}
dropPlace={dropPlace?.id === m.id ? dropPlace.place : null}
@@ -200,6 +201,16 @@ export function MaterialsBrowser({
legend={selected.legend}
previewUrl={selectedUrl}
rotationDeg={selected.rotationDeg ?? 0}
rotateLabel={t('scene.rotate')}
onRotate={
onRotate
? () => {
const cur = selected.rotationDeg ?? 0;
const next = ((cur + 90) % 360) as 0 | 90 | 180 | 270;
onRotate(selected.id, next);
}
: undefined
}
onChange={(next) => {
void onLegendChange(selected.id, next);
}}
@@ -220,7 +231,7 @@ export function MaterialsBrowser({
)}
</div>
)}
{selected && onRotate ? (
{selected && onRotate && !onLegendChange ? (
<div className={matStyles.previewActions}>
<Button
onClick={() => {
app/renderer/editor/MaterialsModals.module.css
+22
View File
@@ -33,6 +33,28 @@
.browserToolbarRow > * {
width: 100%;
min-width: 0;
display: flex;
flex: 1 1 0;
}
.browserToolbarRow > * > button {
flex: 1 1 auto;
width: 100%;
min-width: 0;
}
.browserToolbarZoomRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.browserToolbarFullBtn {
width: 100%;
}
.browserToolbarFullBtn > button {
width: 100%;
}
.browserToolbarHint {
app/renderer/editor/graph/SceneGraph.module.css
+1
View File
@@ -147,6 +147,7 @@
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.02em;
min-width: 0;
}
.musicParams {
app/renderer/editor/graph/SceneGraph.tsx
+3 -1
View File
@@ -27,6 +27,8 @@ import {
} from '../../../shared/graph/sceneGraphLineage';
import type { AssetId, GraphNodeId, SceneGraphEdge, SceneGraphNode, SceneId } from '../../../shared/types';
import { RotatedImage } from '../../shared/RotatedImage';
import { EllipsisText } from '../../shared/ui/EllipsisText';
import ellipsisStyles from '../../shared/ui/ellipsisText.module.css';
import { useAssetUrl } from '../../shared/useAssetImageUrl';
import styles from './SceneGraph.module.css';
@@ -293,7 +295,7 @@ function SceneCardNode({ data }: NodeProps<SceneCardData>) {
) : null}
</div>
<div className={styles.nodeBody}>
<div className={styles.title}>{data.title || ui.untitled}</div>
<EllipsisText text={data.title || ui.untitled} className={[styles.title, ellipsisStyles.root].join(' ')} />
{data.hasAnyAudioLoop || data.hasAnyAudioAutoplay ? (
<div className={styles.musicParams}>
{data.hasAnyAudioLoop ? (
app/renderer/editor/i18n/EditorI18nContext.tsx
+11
View File
@@ -7,6 +7,8 @@ import {
translateEditorMessage,
type EditorLocale,
} from './editorMessages';
import { getDndApi } from '../../shared/dndApi';
import { ipcChannels } from '../../../shared/ipc/contracts';
type EditorI18nContextValue = {
locale: EditorLocale;
@@ -36,6 +38,15 @@ export function EditorI18nProvider({ children }: { children: React.ReactNode })
}
}, []);
useEffect(() => {
const tag = locale === 'ru' ? 'ru-RU' : 'en-US';
try {
void getDndApi().invoke(ipcChannels.windows.syncChromeTitles, { localeTag: tag });
} catch {
// preload ещё не готов (редко при первом кадре)
}
}, [locale]);
// Другие окна Electron (пульт, материалы) подхватывают смену языка из редактора.
useEffect(() => {
const onStorage = (e: StorageEvent) => {
app/renderer/editor/i18n/editorMessages.ts
+2 -2
View File
@@ -406,7 +406,7 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
'materials.dropHint': 'Перетащите изображение (PNG, JPG, WebP)',
'materials.tileMenu': 'Меню материала',
'materials.windowEmpty': 'Добавьте материалы в редакторе.',
'materials.closeOverlay': 'Закрыть материал',
'materials.closeOverlay': 'Закрыть материалы',
'materials.rotateOverlay': 'Повернуть',
'materials.deleteTitle': 'Удаление материала',
'materials.deleteConfirm': 'Вы уверены, что хотите удалить материал «{name}»?',
@@ -977,7 +977,7 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
'materials.dropHint': 'Drop an image (PNG, JPG, WebP)',
'materials.tileMenu': 'Material menu',
'materials.windowEmpty': 'Add materials in the editor.',
'materials.closeOverlay': 'Close material',
'materials.closeOverlay': 'Close materials',
'materials.rotateOverlay': 'Rotate',
'materials.deleteTitle': 'Delete material',
'materials.deleteConfirm': 'Are you sure you want to delete material “{name}”?',
app/renderer/materials/MaterialsApp.tsx
+18 -16
View File
@@ -59,7 +59,7 @@ export function MaterialsApp() {
useEffect(() => {
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
if (overlay?.activeMaterialId) {
if ((overlay?.activeMaterialIds?.length ?? 0) > 0) {
void overlayApi.dispatch({ kind: 'hide' });
return;
}
@@ -72,10 +72,10 @@ export function MaterialsApp() {
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [overlay?.activeMaterialId, overlay?.zoomTool, overlayApi]);
}, [overlay?.activeMaterialIds, overlay?.zoomTool, overlayApi]);
const materials = session?.project?.materials ?? [];
const activeId = overlay?.activeMaterialId ?? null;
const activeIds = overlay?.activeMaterialIds ?? [];
const zoomTool = overlay?.zoomTool ?? null;
return (
@@ -88,7 +88,7 @@ export function MaterialsApp() {
materials={materials}
selectedId={selectedId}
onSelect={onSelect}
activeMaterialId={activeId}
activeMaterialIds={activeIds}
onTileActivate={(id) => {
const mat = materials.find((m) => m.id === id);
void overlayApi.dispatch({
@@ -99,7 +99,7 @@ export function MaterialsApp() {
}}
toolbar={
<>
<div className={matStyles.browserToolbarRow}>
<div className={matStyles.browserToolbarZoomRow}>
<Button
variant={zoomTool === 'zoomIn' ? 'primary' : 'ghost'}
iconOnly
@@ -131,17 +131,19 @@ export function MaterialsApp() {
<ZoomOutIcon />
</Button>
</div>
{activeId ? (
<Button
title={t('materials.closeOverlay')}
ariaLabel={t('materials.closeOverlay')}
tooltipPlacement="bottom"
onClick={() => {
void overlayApi.dispatch({ kind: 'hide' });
}}
>
{t('materials.closeOverlay')}
</Button>
{activeIds.length > 0 ? (
<div className={matStyles.browserToolbarFullBtn}>
<Button
title={t('materials.closeOverlay')}
ariaLabel={t('materials.closeOverlay')}
tooltipPlacement="bottom"
onClick={() => {
void overlayApi.dispatch({ kind: 'hide' });
}}
>
{t('materials.closeOverlay')}
</Button>
</div>
) : null}
<div className={matStyles.browserToolbarHint}>
{zoomTool === 'zoomIn'
app/renderer/npcs/NpcsApp.tsx
+73 -1
View File
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { ipcChannels, type SessionState } from '../../shared/ipc/contracts';
import { buildNpcGroupForest, type NpcGroupTreeNode } from '../../shared/npcs/npcGroups';
import type { NpcGroupId, NpcId, ProjectNpc } from '../../shared/types';
import matStyles from '../editor/MaterialsModals.module.css';
import { useEditorI18n } from '../editor/i18n/EditorI18nContext';
import { sanitizeSceneDescriptionHtml } from '../editor/sceneDescriptionHtml';
import { getDndApi } from '../shared/dndApi';
@@ -12,6 +13,32 @@ import { useAssetUrl } from '../shared/useAssetImageUrl';
import styles from './NpcsApp.module.css';
function ZoomInIcon() {
return (
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden>
<circle cx="10.5" cy="10.5" r="6.25" fill="none" stroke="currentColor" strokeWidth="1.8" />
<path d="M15.2 15.2 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
<path
d="M10.5 7.8v5.4M7.8 10.5h5.4"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
/>
</svg>
);
}
function ZoomOutIcon() {
return (
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden>
<circle cx="10.5" cy="10.5" r="6.25" fill="none" stroke="currentColor" strokeWidth="1.8" />
<path d="M15.2 15.2 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
<path d="M7.8 10.5h5.4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
</svg>
);
}
/** Убрать пустые ветки групп (удобно при поиске). */
function pruneEmptyGroupNodes(nodes: NpcGroupTreeNode[]): NpcGroupTreeNode[] {
const out: NpcGroupTreeNode[] = [];
@@ -137,12 +164,18 @@ export function NpcsApp() {
void overlayApi.dispatch({ kind: 'hide' });
return;
}
if (overlay?.zoomTool) {
void overlayApi.dispatch({ kind: 'zoomTool.set', tool: null });
return;
}
window.close();
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [hasActive, overlayApi]);
}, [hasActive, overlay?.zoomTool, overlayApi]);
const zoomTool = overlay?.zoomTool ?? null;
const npcs = useMemo(() => session?.project?.npcs ?? [], [session?.project?.npcs]);
const npcGroups = useMemo(() => session?.project?.npcGroups ?? [], [session?.project?.npcGroups]);
@@ -215,6 +248,45 @@ export function NpcsApp() {
return (
<div className={styles.page}>
<div className={styles.toolbar}>
<div className={matStyles.browserToolbarRow}>
<Button
variant={zoomTool === 'zoomIn' ? 'primary' : 'ghost'}
iconOnly
title={t('npcs.zoomIn')}
ariaLabel={t('npcs.zoomIn')}
tooltipPlacement="bottom"
onClick={() => {
void overlayApi.dispatch({
kind: 'zoomTool.set',
tool: zoomTool === 'zoomIn' ? null : 'zoomIn',
});
}}
>
<ZoomInIcon />
</Button>
<Button
variant={zoomTool === 'zoomOut' ? 'primary' : 'ghost'}
iconOnly
title={t('npcs.zoomOut')}
ariaLabel={t('npcs.zoomOut')}
tooltipPlacement="bottom"
onClick={() => {
void overlayApi.dispatch({
kind: 'zoomTool.set',
tool: zoomTool === 'zoomOut' ? null : 'zoomOut',
});
}}
>
<ZoomOutIcon />
</Button>
</div>
<div className={matStyles.browserToolbarHint}>
{zoomTool === 'zoomIn'
? t('npcs.zoomInHint')
: zoomTool === 'zoomOut'
? t('npcs.zoomOutHint')
: t('npcs.zoomIdleHint')}
</div>
<div className={styles.toolbarRow}>
<Button
title={t('npcs.closeOverlay')}
app/renderer/sceneEditor/SceneEditorApp.module.css
+22 -7
View File
@@ -11,10 +11,11 @@
.sidebar {
border-right: 1px solid var(--stroke, #2a2f3a);
padding: 12px;
overflow: auto;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
}
.sideTitle {
@@ -23,6 +24,25 @@
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.85;
flex-shrink: 0;
min-width: 0;
}
.hint {
font-size: 12px;
opacity: 0.65;
line-height: 1.35;
flex-shrink: 0;
}
.accordionScroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 12px;
}
.accordion {
@@ -30,6 +50,7 @@
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
flex-shrink: 0;
}
.accordionHead {
@@ -147,12 +168,6 @@
font-weight: 600;
}
.hint {
font-size: 12px;
opacity: 0.65;
line-height: 1.35;
}
.stage {
position: relative;
min-width: 0;
app/renderer/sceneEditor/SceneEditorApp.tsx
+8 -1
View File
@@ -25,6 +25,8 @@ import {
import { sceneViewPanBy, sceneViewZoomAt } from '../../shared/types/sceneView';
import editorStyles from '../editor/EditorApp.module.css';
import { getDndApi } from '../shared/dndApi';
import { EllipsisText } from '../shared/ui/EllipsisText';
import ellipsisStyles from '../shared/ui/ellipsisText.module.css';
import { SceneGridOverlay } from '../shared/grid/SceneGridOverlay';
import { RotatedImage } from '../shared/RotatedImage';
import { useAppTokens } from '../shared/tokens/useAppTokens';
@@ -318,11 +320,15 @@ export function SceneEditorApp() {
return (
<div className={styles.page}>
<aside className={styles.sidebar}>
<div className={styles.sideTitle}>{scene?.title ?? 'Сцена'}</div>
<EllipsisText
text={scene?.title ?? 'Сцена'}
className={[styles.sideTitle, ellipsisStyles.root].join(' ')}
/>
<div className={styles.hint}>
Колесо — зум. СКМ / Space+ЛКМ — пан. Delete — удалить выбранное.
</div>
<div className={styles.accordionScroll}>
<div className={styles.accordion}>
<button type="button" className={styles.accordionHead} onClick={() => setGridOpen((v) => !v)}>
Сетка {gridOpen ? '▾' : '▸'}
@@ -461,6 +467,7 @@ export function SceneEditorApp() {
Очистить сцену
</Button>
</div>
</div>
</aside>
<div className={styles.stage}>
app/renderer/shared/PresentationView.tsx
+31 -23
View File
@@ -56,11 +56,21 @@ export function PresentationView({
);
const scene =
session?.project && session.currentSceneId ? session.project.scenes[session.currentSceneId] : undefined;
const activeMaterial =
session?.project && materialsOverlay?.activeMaterialId
? (session.project.materials ?? []).find((m) => m.id === materialsOverlay.activeMaterialId)
: undefined;
const project = session?.project;
const activeMaterialItems =
project && (materialsOverlay?.activeMaterialIds?.length ?? 0) > 0
? (materialsOverlay?.activeMaterialIds ?? [])
.map((id) => {
const material = (project.materials ?? []).find((m) => m.id === id);
if (!material) return null;
return {
material,
layout: materialsOverlay?.layouts[id] ?? DEFAULT_MATERIALS_OVERLAY_LAYOUT,
legendLayout: materialsOverlay?.legendLayouts[id] ?? DEFAULT_MATERIALS_OVERLAY_LAYOUT,
};
})
.filter((x): x is NonNullable<typeof x> => x !== null)
: [];
const activeNpcItems =
project && (npcsOverlay?.activeNpcIds?.length ?? 0) > 0
? (npcsOverlay?.activeNpcIds ?? [])
@@ -156,7 +166,7 @@ export function PresentationView({
src={originalUrl}
muted
playsInline
loop={false}
loop={Boolean(scene?.settings?.loopVideo)}
preload="auto"
onError={() => {
// noop: status surfaced in control app; keep presentation clean
@@ -200,25 +210,23 @@ export function PresentationView({
<ExplosionVideoOverlay state={fxState} viewport={contentRect} />
) : null}
{showEffects && scene?.previewAssetType === 'image' && scene.darkenScene && contentRect ? (
<SceneDarknessOverlay state={sdState} overlayAlpha={1} viewport={contentRect} />
<SceneDarknessOverlay state={sdState} overlayAlpha={1} viewport={contentRect} style={{ zIndex: 30 }} />
) : null}
<SceneOverlayHost active={Boolean(activeMaterial) || activeNpcItems.length > 0}>
{activeMaterial ? (
<MaterialOverlay
embedded
assetId={activeMaterial.assetId}
layout={materialsOverlay?.layout ?? DEFAULT_MATERIALS_OVERLAY_LAYOUT}
{...(activeMaterial.legend?.enabled
? { legendMarkers: activeMaterial.legend.markers ?? [] }
: {})}
/>
) : null}
{activeMaterial?.legend?.enabled ? (
<MaterialLegendPanel
legend={activeMaterial.legend}
layout={materialsOverlay?.legendLayout ?? DEFAULT_MATERIALS_OVERLAY_LAYOUT}
/>
) : null}
<SceneOverlayHost active={activeMaterialItems.length > 0 || activeNpcItems.length > 0}>
{activeMaterialItems.map(({ material, layout, legendLayout }) => (
<React.Fragment key={material.id}>
<MaterialOverlay
embedded
assetId={material.assetId}
layout={layout}
materialId={material.id}
{...(material.legend?.enabled ? { legendMarkers: material.legend.markers ?? [] } : {})}
/>
{material.legend?.enabled ? (
<MaterialLegendPanel legend={material.legend} layout={legendLayout} />
) : null}
</React.Fragment>
))}
{activeNpcItems.length > 0 ? <NpcsSceneOverlay embedded items={activeNpcItems} /> : null}
</SceneOverlayHost>
{showTitle ? (
app/renderer/shared/materials/MaterialOverlay.module.css
+9
View File
@@ -17,6 +17,15 @@
pointer-events: none;
}
.viewportGuide {
position: absolute;
inset: 0;
border: 2px solid rgba(245, 197, 66, 0.55);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
pointer-events: none;
z-index: 0;
}
.captureZoom {
pointer-events: auto;
}
app/renderer/shared/materials/MaterialOverlay.tsx
+4 -1
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import type { AssetId, MaterialsOverlayLayout, MaterialsZoomTool, NpcsZoomTool } from '../../../shared/types';
import type { AssetId, MaterialId, MaterialsOverlayLayout, MaterialsZoomTool, NpcsZoomTool } from '../../../shared/types';
import { DEFAULT_MATERIALS_OVERLAY_LAYOUT } from '../../../shared/types';
import { useSceneOverlayView } from '../sceneOverlay/SceneOverlayViewContext';
import { useAssetUrl } from '../useAssetImageUrl';
@@ -12,6 +12,7 @@ type Corner = 'nw' | 'ne' | 'sw' | 'se';
type MaterialOverlayProps = {
assetId: AssetId | null;
layout: MaterialsOverlayLayout;
materialId?: MaterialId;
editable?: boolean;
zoomTool?: MaterialsZoomTool | NpcsZoomTool;
showClose?: boolean;
@@ -92,6 +93,7 @@ function localToScreenOffset(localX: number, localY: number, rotationDeg: number
export function MaterialOverlay({
assetId,
layout,
materialId,
editable = false,
zoomTool = null,
showClose = false,
@@ -366,6 +368,7 @@ export function MaterialOverlay({
<div
className={[styles.frame, editable && !zoomTool ? styles.frameEditable : ''].filter(Boolean).join(' ')}
data-overlay-kind="material"
{...(materialId ? { 'data-material-id': materialId } : {})}
style={{
left,
top,
app/renderer/shared/sceneOverlay/SceneOverlayHost.tsx
+10 -1
View File
@@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
import type { MaterialsZoomTool, NpcsZoomTool } from '../../../shared/types';
import styles from '../materials/MaterialOverlay.module.css';
import { overlayRootStyle, type SceneOverlayViewport } from './overlayViewport';
import { SceneOverlayViewContext } from './SceneOverlayViewContext';
export type SceneOverlayCloseAction = {
@@ -14,6 +15,10 @@ export type SceneOverlayCloseAction = {
type SceneOverlayHostProps = {
/** Есть ли что показывать (материал и/или NPC). */
active: boolean;
/** Область картинки сцены (contain); координаты относительно родителя. */
viewport?: SceneOverlayViewport | null;
/** Рамка видимой области (предпросмотр пульта). */
showViewportGuide?: boolean;
zoomTool?: MaterialsZoomTool | NpcsZoomTool;
onZoomAt?: (nx: number, ny: number, target: EventTarget | null) => void;
closes?: readonly SceneOverlayCloseAction[];
@@ -26,6 +31,8 @@ type SceneOverlayHostProps = {
*/
export function SceneOverlayHost({
active,
viewport = null,
showViewportGuide = false,
zoomTool = null,
onZoomAt,
closes = [],
@@ -58,7 +65,7 @@ export function SceneOverlayHost({
const ctx = useMemo(() => ({ rootRef, view }), [view]);
if (!active) return null;
if (!active && !showViewportGuide) return null;
const captureZoom = Boolean(zoomTool && onZoomAt);
const zoomCursor =
@@ -81,6 +88,7 @@ export function SceneOverlayHost({
className={[styles.root, styles.hostHitThrough, captureZoom ? styles.captureZoom : '', zoomCursor]
.filter(Boolean)
.join(' ')}
style={overlayRootStyle(viewport)}
role="presentation"
onClick={(e) => {
if (!captureZoom || !onZoomAt) return;
@@ -89,6 +97,7 @@ export function SceneOverlayHost({
onZoomAt(nx, ny, e.target);
}}
>
{showViewportGuide ? <div className={styles.viewportGuide} aria-hidden /> : null}
<div className={styles.dim} />
{children}
{closes.length > 0 ? (
app/renderer/shared/sceneOverlay/overlayViewport.ts
+21
View File
@@ -0,0 +1,21 @@
import type { CSSProperties } from 'react';
export type SceneOverlayViewport = {
x: number;
y: number;
w: number;
h: number;
};
export function overlayRootStyle(viewport: SceneOverlayViewport | null | undefined): CSSProperties | undefined {
if (!viewport || viewport.w <= 0 || viewport.h <= 0) return undefined;
return {
left: viewport.x,
top: viewport.y,
width: viewport.w,
height: viewport.h,
right: 'auto',
bottom: 'auto',
overflow: 'hidden',
};
}
app/renderer/shared/ui/EllipsisText.tsx
+33
View File
@@ -0,0 +1,33 @@
import React, { useCallback, useRef, useState } from 'react';
type Props = {
text: string;
className?: string;
};
/** Однострочный текст с ellipsis; полный title при обрезке. */
export function EllipsisText({ text, className }: Props) {
const ref = useRef<HTMLDivElement | null>(null);
const [title, setTitle] = useState<string | undefined>(undefined);
const syncTitle = useCallback(() => {
const el = ref.current;
if (!el) {
setTitle(undefined);
return;
}
setTitle(el.scrollWidth > el.clientWidth + 1 ? text : undefined);
}, [text]);
return (
<div
ref={ref}
className={className}
title={title}
onMouseEnter={syncTitle}
onMouseLeave={() => setTitle(undefined)}
>
{text}
</div>
);
}
app/renderer/shared/ui/ellipsisText.module.css
+6
View File
@@ -0,0 +1,6 @@
.root {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
app/shared/appBranding.ts
+7 -5
View File
@@ -12,7 +12,7 @@ export function appDisplayNameForLocale(localeTag: string): string {
return APP_DISPLAY_NAME_EN;
}
/** Префикс заголовка окон: `TTRPG - Редактор`. */
/** Префикс заголовка окон (EN): `TTRPG - Editor`. RU — полное имя «НРИ Плеер». */
export const APP_WINDOW_BRAND = 'TTRPG';
export type AppWindowKind =
@@ -27,9 +27,9 @@ export type AppWindowKind =
| 'npcs';
const WINDOW_SUFFIX: Record<AppWindowKind, { ru: string; en: string }> = {
editor: { ru: 'Редактор', en: 'Editor' },
editor: { ru: 'Редактор компании', en: 'Campaign editor' },
presentation: { ru: 'Презентация', en: 'Presentation' },
control: { ru: 'Пульт', en: 'Control' },
control: { ru: 'Пульт управления', en: 'Control deck' },
boot: { ru: 'Загрузка', en: 'Loading' },
sceneDescription: { ru: 'Описание сцены', en: 'Scene description' },
materials: { ru: 'Материалы', en: 'Materials' },
@@ -40,8 +40,10 @@ const WINDOW_SUFFIX: Record<AppWindowKind, { ru: string; en: string }> = {
export function windowChromeTitle(kind: AppWindowKind, localeTag: string): string {
const tag = localeTag.trim().toLowerCase();
const suffix = tag.startsWith('ru') ? WINDOW_SUFFIX[kind].ru : WINDOW_SUFFIX[kind].en;
return `${APP_WINDOW_BRAND} - ${suffix}`;
const ru = tag.startsWith('ru');
const prefix = ru ? APP_DISPLAY_NAME_RU : APP_WINDOW_BRAND;
const suffix = ru ? WINDOW_SUFFIX[kind].ru : WINDOW_SUFFIX[kind].en;
return `${prefix} - ${suffix}`;
}
/** Подписи фильтров в системных диалогах выбора файла (main process). */
app/shared/geometry/fitAspectRect.ts
+22
View File
@@ -0,0 +1,22 @@
/** Вписать прямоугольник целевого аспекта в бокс (как object-fit: contain). */
export function fitAspectRect(
boxW: number,
boxH: number,
aspectW: number,
aspectH: number,
): { x: number; y: number; w: number; h: number } {
const bw = Math.max(1, boxW);
const bh = Math.max(1, boxH);
const aw = Math.max(1, aspectW);
const ah = Math.max(1, aspectH);
const boxAspect = bw / bh;
const targetAspect = aw / ah;
if (boxAspect > targetAspect) {
const h = bh;
const w = h * targetAspect;
return { x: (bw - w) / 2, y: 0, w, h };
}
const w = bw;
const h = w / targetAspect;
return { x: 0, y: (bh - h) / 2, w, h };
}
app/shared/ipc/contracts.ts
+12
View File
@@ -135,6 +135,9 @@ export const ipcChannels = {
closeNpcs: 'windows.closeNpcs',
openSceneEditor: 'windows.openSceneEditor',
closeSceneEditor: 'windows.closeSceneEditor',
syncChromeTitles: 'windows.syncChromeTitles',
getPresentationContentSize: 'windows.getPresentationContentSize',
presentationContentSizeChanged: 'windows.presentationContentSizeChanged',
},
session: {
stateChanged: 'session.stateChanged',
@@ -257,6 +260,7 @@ export type IpcEventMap = {
[ipcChannels.video.stateChanged]: { state: VideoPlaybackState };
[ipcChannels.license.statusChanged]: { snapshot: LicenseSnapshot };
[ipcChannels.windows.multiWindowStateChanged]: { open: boolean };
[ipcChannels.windows.presentationContentSizeChanged]: { width: number; height: number };
[ipcChannels.windows.sceneDescriptionContent]: { html: string };
[ipcChannels.project.importZipProgress]: ZipProgressEvent;
[ipcChannels.project.exportZipProgress]: ZipProgressEvent;
@@ -588,6 +592,10 @@ export type IpcInvokeMap = {
req: Record<string, never>;
res: { open: boolean };
};
[ipcChannels.windows.getPresentationContentSize]: {
req: Record<string, never>;
res: { width: number; height: number } | { width: null; height: null };
};
[ipcChannels.windows.openSceneDescription]: {
req: { html: string };
res: { ok: true };
@@ -632,6 +640,10 @@ export type IpcInvokeMap = {
req: Record<string, never>;
res: { ok: true };
};
[ipcChannels.windows.syncChromeTitles]: {
req: { localeTag: string };
res: { ok: true };
};
[ipcChannels.materialsOverlay.getState]: {
req: Record<string, never>;
res: { state: MaterialsOverlayState };
app/shared/package.build.test.ts
+10
View File
@@ -11,6 +11,7 @@ void test('package.json: конфиг electron-builder (mac/win/linux)', () => {
build: {
appId: string;
asar: boolean;
npmRebuild: boolean;
asarUnpack: string[];
extraResources: { from: string; to: string }[];
mac: { target: unknown; artifactName?: string };
@@ -25,6 +26,11 @@ void test('package.json: конфиг electron-builder (mac/win/linux)', () => {
assert.ok(pkg.build);
assert.equal(pkg.build.appId, 'com.ttrpgplayer.app');
assert.equal(pkg.build.asar, true, 'релизный артефакт: app.asar без «голого» дерева dist в .app/.exe');
assert.equal(
pkg.build.npmRebuild,
false,
'N-API prebuilds (classic-level, sharp @img) — без node-gyp / Visual Studio на pack',
);
assert.ok(Array.isArray(pkg.build.asarUnpack));
assert.ok(pkg.build.asarUnpack.some((p) => p.includes('preload')));
assert.ok(Array.isArray(pkg.build.extraResources));
@@ -56,6 +62,10 @@ void test('package.json: конфиг electron-builder (mac/win/linux)', () => {
pkg.build.asarUnpack.some((p) => p.includes('@img')),
'sharp native binaries live under node_modules/@img',
);
assert.ok(
pkg.build.asarUnpack.some((p) => p.includes('classic-level')),
'Foundry DB: classic-level stays unpacked with its prebuilds',
);
});
void test('package.json: pack:mac runs release-mac-prep before electron-builder', () => {
app/shared/types/materials.ts
+23 -8
View File
@@ -14,13 +14,14 @@ export type MaterialsOverlayLayout = {
export type MaterialsZoomTool = 'zoomIn' | 'zoomOut' | null;
/** Session-only: какой материал сейчас показан поверх сцены. */
/** Session-only: какие материалы сейчас показаны поверх сцены. */
export type MaterialsOverlayState = {
revision: number;
activeMaterialId: MaterialId | null;
layout: MaterialsOverlayLayout;
/** Раскладка блока описаний легенды (если материал с легендой). */
legendLayout: MaterialsOverlayLayout;
activeMaterialIds: MaterialId[];
layouts: Record<string, MaterialsOverlayLayout>;
/** Раскладка блока описаний легенды по materialId. */
legendLayouts: Record<string, MaterialsOverlayLayout>;
focusMaterialId: MaterialId | null;
zoomTool: MaterialsZoomTool;
};
@@ -35,10 +36,10 @@ export type MaterialsOverlayEvent =
| { kind: 'show'; materialId: MaterialId; rotationDeg?: number }
| { kind: 'hide' }
| { kind: 'toggle'; materialId: MaterialId; rotationDeg?: number }
| { kind: 'layout.set'; layout: MaterialsOverlayLayout }
| { kind: 'legendLayout.set'; layout: MaterialsOverlayLayout }
| { kind: 'layout.set'; materialId: MaterialId; layout: MaterialsOverlayLayout }
| { kind: 'legendLayout.set'; materialId: MaterialId; layout: MaterialsOverlayLayout }
| { kind: 'zoomTool.set'; tool: MaterialsZoomTool }
| { kind: 'zoomAt'; nx: number; ny: number };
| { kind: 'zoomAt'; nx: number; ny: number; materialId?: MaterialId };
/** Нормализация угла в диапазон [0, 360). */
export function normalizeMaterialsRotation(deg: number): number {
@@ -73,3 +74,17 @@ export function zoomMaterialsLayoutAt(
scale: clamped.scale,
});
}
function initialLegendLayout(): MaterialsOverlayLayout {
return clampMaterialsLayout({
...DEFAULT_MATERIALS_OVERLAY_LAYOUT,
cx: 0.82,
cy: 0.5,
scale: 0.85,
rotationDeg: 0,
});
}
export function defaultLegendLayoutForMaterial(): MaterialsOverlayLayout {
return initialLegendLayout();
}