Ivan Fontosh
497 lines
17 KiB
TypeScript
497 lines
17 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
import ReactFlow, {
|
||
Background,
|
||
Handle,
|
||
MarkerType,
|
||
Panel,
|
||
Position,
|
||
ReactFlowProvider,
|
||
useEdgesState,
|
||
useNodesState,
|
||
useReactFlow,
|
||
useStore,
|
||
type Connection,
|
||
type Edge,
|
||
type Node,
|
||
type NodeProps,
|
||
} from 'reactflow';
|
||
import 'reactflow/dist/style.css';
|
||
|
||
import { isSceneGraphEdgeRejected } from '../../../shared/graph/sceneGraphEdgeRules';
|
||
import type {
|
||
AssetId,
|
||
GraphNodeId,
|
||
Scene,
|
||
SceneGraphEdge,
|
||
SceneGraphNode,
|
||
SceneId,
|
||
} from '../../../shared/types';
|
||
import { RotatedImage } from '../../shared/RotatedImage';
|
||
import { useAssetUrl } from '../../shared/useAssetImageUrl';
|
||
|
||
import styles from './SceneGraph.module.css';
|
||
|
||
/** MIME для перетаскивания сцены из списка на граф (см. EditorApp). */
|
||
export const DND_SCENE_ID_MIME = 'application/x-dnd-scene-id';
|
||
|
||
/** Примерные размеры карточки узла — чтобы точка сброса совпадала с центром карточки. */
|
||
const SCENE_CARD_W = 220;
|
||
const SCENE_CARD_H = 248;
|
||
|
||
export type SceneGraphProps = {
|
||
sceneGraphNodes: SceneGraphNode[];
|
||
sceneGraphEdges: SceneGraphEdge[];
|
||
sceneById: Record<SceneId, Scene>;
|
||
currentSceneId: SceneId | null;
|
||
onCurrentSceneChange: (id: SceneId) => void;
|
||
onConnect: (sourceGraphNodeId: GraphNodeId, targetGraphNodeId: GraphNodeId) => void;
|
||
onDisconnect: (edgeId: string) => void;
|
||
onNodePositionCommit: (nodeId: GraphNodeId, x: number, y: number) => void;
|
||
onRemoveGraphNodes: (nodeIds: GraphNodeId[]) => void;
|
||
onRemoveGraphNode: (graphNodeId: GraphNodeId) => void;
|
||
onSetGraphNodeStart: (graphNodeId: GraphNodeId | null) => void;
|
||
onDropSceneFromList: (sceneId: SceneId, x: number, y: number) => void;
|
||
};
|
||
|
||
type SceneCardData = {
|
||
sceneId: SceneId;
|
||
title: string;
|
||
active: boolean;
|
||
previewAssetId: AssetId | null;
|
||
previewAssetType: 'image' | 'video' | null;
|
||
previewVideoAutostart: boolean;
|
||
previewRotationDeg: 0 | 90 | 180 | 270;
|
||
isStartScene: boolean;
|
||
hasSceneAudio: boolean;
|
||
previewIsVideo: boolean;
|
||
hasAnyAudioLoop: boolean;
|
||
hasAnyAudioAutoplay: boolean;
|
||
showPreviewVideoAutostart: boolean;
|
||
showPreviewVideoLoop: boolean;
|
||
};
|
||
|
||
function IconAudioBadge() {
|
||
return (
|
||
<svg className={styles.badgeGlyph} viewBox="0 0 24 24" width={14} height={14} aria-hidden>
|
||
<path fill="currentColor" d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6zM6 15a2 2 0 1 0 4 0 2 2 0 0 0-4 0z" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function IconVideoBadge() {
|
||
return (
|
||
<svg className={styles.badgeGlyph} viewBox="0 0 24 24" width={14} height={14} aria-hidden>
|
||
<path
|
||
fill="currentColor"
|
||
d="M4 6.5A2.5 2.5 0 0 1 6.5 4h7A2.5 2.5 0 0 1 16 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 4 17.5v-11zM19 8.2l-3 2.2v3.2l3 2.2V8.2z"
|
||
/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function IconLoopParam() {
|
||
return (
|
||
<svg className={styles.musicParamIcon} viewBox="0 0 24 24" width={11} height={11} aria-hidden>
|
||
<path
|
||
fill="currentColor"
|
||
d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
|
||
/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function IconAutoplayParam() {
|
||
return (
|
||
<svg className={styles.musicParamIcon} viewBox="0 0 24 24" width={11} height={11} aria-hidden>
|
||
<path fill="currentColor" d="M13 2 3 14h7v8l11-14h-8l2-8z" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
/** Иконка для «Авто превью» (видео-превью). */
|
||
function IconVideoPreviewAutostart() {
|
||
return (
|
||
<svg className={styles.musicParamIcon} viewBox="0 0 24 24" width={11} height={11} aria-hidden>
|
||
<path fill="currentColor" d="M8 5v14l11-7-11-7z" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function SceneCardNode({ data }: NodeProps<SceneCardData>) {
|
||
const url = useAssetUrl(data.previewAssetId);
|
||
const cardClass = [styles.card, data.active ? styles.cardActive : ''].filter(Boolean).join(' ');
|
||
const showCornerVideo = data.previewIsVideo;
|
||
const showCornerAudio = data.hasSceneAudio;
|
||
return (
|
||
<div className={styles.nodeWrap}>
|
||
<Handle type="target" position={Position.Top} className={styles.handle} />
|
||
<div className={cardClass}>
|
||
<div className={styles.previewShell}>
|
||
{data.isStartScene ? <div className={styles.badgeStart}>НАЧАЛО</div> : null}
|
||
{url && data.previewAssetType === 'image' ? (
|
||
<div className={styles.previewFill}>
|
||
{data.previewRotationDeg === 0 ? (
|
||
<img src={url} alt="" className={styles.imageCover} draggable={false} />
|
||
) : (
|
||
<RotatedImage
|
||
url={url}
|
||
rotationDeg={data.previewRotationDeg}
|
||
mode="cover"
|
||
style={{ width: '100%', height: '100%' }}
|
||
/>
|
||
)}
|
||
</div>
|
||
) : url && data.previewAssetType === 'video' ? (
|
||
<video
|
||
src={url}
|
||
muted
|
||
playsInline
|
||
preload="metadata"
|
||
className={styles.videoCover}
|
||
onLoadedData={(e) => {
|
||
const v = e.currentTarget;
|
||
try {
|
||
v.currentTime = 0;
|
||
v.pause();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}}
|
||
/>
|
||
) : (
|
||
<div className={styles.previewPlaceholder} aria-hidden />
|
||
)}
|
||
{showCornerVideo || showCornerAudio ? (
|
||
<div className={styles.cornerBadges}>
|
||
{showCornerVideo ? (
|
||
<span className={styles.mediaBadge} title="Видео">
|
||
<IconVideoBadge />
|
||
</span>
|
||
) : null}
|
||
{showCornerAudio ? (
|
||
<span className={styles.mediaBadge} title="Аудио">
|
||
<IconAudioBadge />
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<div className={styles.nodeBody}>
|
||
<div className={styles.title}>{data.title || 'Без названия'}</div>
|
||
{data.hasAnyAudioLoop || data.hasAnyAudioAutoplay ? (
|
||
<div className={styles.musicParams}>
|
||
{data.hasAnyAudioLoop ? (
|
||
<div className={styles.musicParam}>
|
||
<IconLoopParam />
|
||
<span>Цикл</span>
|
||
</div>
|
||
) : null}
|
||
{data.hasAnyAudioAutoplay ? (
|
||
<div className={styles.musicParam}>
|
||
<IconAutoplayParam />
|
||
<span>Автостарт</span>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
{data.showPreviewVideoAutostart || data.showPreviewVideoLoop ? (
|
||
<div className={styles.musicParams}>
|
||
{data.showPreviewVideoAutostart ? (
|
||
<div className={styles.musicParam}>
|
||
<IconVideoPreviewAutostart />
|
||
<span>Авто превью</span>
|
||
</div>
|
||
) : null}
|
||
{data.showPreviewVideoLoop ? (
|
||
<div className={styles.musicParam}>
|
||
<IconLoopParam />
|
||
<span>Цикл видео</span>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<Handle type="source" position={Position.Bottom} className={styles.handle} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const nodeTypes = { sceneCard: SceneCardNode };
|
||
|
||
function GraphZoomToolbar() {
|
||
const { zoomIn, zoomOut, fitView } = useReactFlow();
|
||
const zoom = useStore((s) => s.transform[2]);
|
||
const pct = Math.max(1, Math.round(zoom * 100));
|
||
|
||
return (
|
||
<Panel position="bottom-center" className={styles.zoomPanel}>
|
||
<div className={styles.zoomBar} role="toolbar" aria-label="Масштаб графа">
|
||
<button type="button" className={styles.zoomBtn} onClick={() => zoomIn()} aria-label="Увеличить">
|
||
+
|
||
</button>
|
||
<span className={styles.zoomPct}>{pct}%</span>
|
||
<button type="button" className={styles.zoomBtn} onClick={() => zoomOut()} aria-label="Уменьшить">
|
||
−
|
||
</button>
|
||
<span className={styles.zoomDivider} aria-hidden />
|
||
<button
|
||
type="button"
|
||
className={styles.zoomBtn}
|
||
onClick={() => fitView({ padding: 0.25 })}
|
||
aria-label="Показать всё"
|
||
title="Показать всё"
|
||
>
|
||
<svg className={styles.zoomFitIcon} viewBox="0 0 24 24" width={18} height={18} aria-hidden>
|
||
<path
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth={2}
|
||
strokeLinecap="round"
|
||
d="M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</Panel>
|
||
);
|
||
}
|
||
|
||
function SceneGraphCanvas({
|
||
sceneGraphNodes,
|
||
sceneGraphEdges,
|
||
sceneById,
|
||
currentSceneId,
|
||
onCurrentSceneChange,
|
||
onConnect,
|
||
onDisconnect,
|
||
onNodePositionCommit,
|
||
onRemoveGraphNodes,
|
||
onRemoveGraphNode,
|
||
onSetGraphNodeStart,
|
||
onDropSceneFromList,
|
||
}: SceneGraphProps) {
|
||
const { screenToFlowPosition } = useReactFlow();
|
||
const [menu, setMenu] = useState<{ x: number; y: number; graphNodeId: GraphNodeId } | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (!menu) return;
|
||
const onKey = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') setMenu(null);
|
||
};
|
||
window.addEventListener('keydown', onKey);
|
||
return () => window.removeEventListener('keydown', onKey);
|
||
}, [menu]);
|
||
|
||
const menuNodeIsStart = useMemo(() => {
|
||
if (!menu) return false;
|
||
return sceneGraphNodes.some((n) => n.id === menu.graphNodeId && n.isStartScene);
|
||
}, [menu, sceneGraphNodes]);
|
||
|
||
const desiredNodes = useMemo<Node<SceneCardData>[]>(() => {
|
||
return sceneGraphNodes.map((gn) => {
|
||
const s = sceneById[gn.sceneId];
|
||
const active = gn.sceneId === currentSceneId;
|
||
const audios = s?.media.audios ?? [];
|
||
return {
|
||
id: gn.id,
|
||
type: 'sceneCard',
|
||
position: { x: gn.x, y: gn.y },
|
||
data: {
|
||
sceneId: gn.sceneId,
|
||
title: s?.title ?? '',
|
||
active,
|
||
previewAssetId: s?.previewAssetId ?? null,
|
||
previewAssetType: s?.previewAssetType ?? null,
|
||
previewVideoAutostart: s?.previewVideoAutostart ?? false,
|
||
previewRotationDeg: s?.previewRotationDeg ?? 0,
|
||
isStartScene: gn.isStartScene,
|
||
hasSceneAudio: audios.length >= 1,
|
||
previewIsVideo: s?.previewAssetType === 'video',
|
||
hasAnyAudioLoop: audios.some((a) => a.loop),
|
||
hasAnyAudioAutoplay: audios.some((a) => a.autoplay),
|
||
showPreviewVideoAutostart: s?.previewAssetType === 'video' ? s.previewVideoAutostart : false,
|
||
showPreviewVideoLoop: s?.previewAssetType === 'video' ? s.settings.loopVideo : false,
|
||
},
|
||
style: { padding: 0, background: 'transparent', border: 'none' },
|
||
};
|
||
});
|
||
}, [currentSceneId, sceneById, sceneGraphNodes]);
|
||
|
||
const desiredEdges = useMemo<Edge[]>(() => {
|
||
return sceneGraphEdges.map((e) => ({
|
||
id: e.id,
|
||
source: e.sourceGraphNodeId,
|
||
target: e.targetGraphNodeId,
|
||
type: 'smoothstep',
|
||
animated: false,
|
||
style: { stroke: 'rgba(167,139,250,0.55)', strokeWidth: 2 },
|
||
markerEnd: { type: MarkerType.ArrowClosed, color: 'rgba(167,139,250,0.85)', strokeWidth: 2 },
|
||
}));
|
||
}, [sceneGraphEdges]);
|
||
|
||
const [nodes, setNodes, onNodesChange] = useNodesState<Node<SceneCardData>>([]);
|
||
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
|
||
|
||
useEffect(() => {
|
||
setNodes(desiredNodes as unknown as Parameters<typeof setNodes>[0]);
|
||
setEdges(desiredEdges);
|
||
}, [desiredEdges, desiredNodes, setEdges, setNodes]);
|
||
|
||
const isValidConnection = useCallback(
|
||
(conn: Connection) => {
|
||
const source = conn.source as GraphNodeId | null;
|
||
const target = conn.target as GraphNodeId | null;
|
||
if (!source || !target) return false;
|
||
return !isSceneGraphEdgeRejected(sceneGraphNodes, sceneGraphEdges, source, target);
|
||
},
|
||
[sceneGraphEdges, sceneGraphNodes],
|
||
);
|
||
|
||
const onConnectInternal = (conn: Connection) => {
|
||
const source = conn.source as GraphNodeId | null;
|
||
const target = conn.target as GraphNodeId | null;
|
||
if (!source || !target) return;
|
||
if (!isValidConnection(conn)) return;
|
||
onConnect(source, target);
|
||
};
|
||
|
||
const onDragOver = (e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
e.dataTransfer.dropEffect = 'copy';
|
||
};
|
||
|
||
const onDrop = (e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
const id = e.dataTransfer.getData(DND_SCENE_ID_MIME);
|
||
if (!id) return;
|
||
const p = screenToFlowPosition({ x: e.clientX, y: e.clientY });
|
||
onDropSceneFromList(id as SceneId, p.x - SCENE_CARD_W / 2, p.y - SCENE_CARD_H / 2);
|
||
};
|
||
|
||
const menuPosition = useMemo(() => {
|
||
if (!menu) return null;
|
||
const pad = 8;
|
||
const mw = 220;
|
||
const mh = 120;
|
||
const x = Math.max(pad, Math.min(menu.x, window.innerWidth - mw - pad));
|
||
const y = Math.max(pad, Math.min(menu.y, window.innerHeight - mh - pad));
|
||
return { x, y };
|
||
}, [menu]);
|
||
|
||
return (
|
||
<div className={styles.canvasWrap}>
|
||
<ReactFlow
|
||
nodes={nodes}
|
||
edges={edges}
|
||
nodeTypes={nodeTypes}
|
||
onNodesChange={onNodesChange}
|
||
onNodeDragStop={(_, node) => {
|
||
onNodePositionCommit(node.id as GraphNodeId, node.position.x, node.position.y);
|
||
}}
|
||
onEdgesChange={onEdgesChange}
|
||
isValidConnection={isValidConnection}
|
||
onConnect={onConnectInternal}
|
||
onEdgesDelete={(eds) => {
|
||
for (const ed of eds) {
|
||
onDisconnect(ed.id);
|
||
}
|
||
}}
|
||
onEdgeClick={(_, edge) => {
|
||
onDisconnect(edge.id);
|
||
}}
|
||
onNodesDelete={(nds) => {
|
||
onRemoveGraphNodes(nds.map((n) => n.id as GraphNodeId));
|
||
}}
|
||
onNodeClick={(_, node) => {
|
||
setMenu(null);
|
||
const d = node.data as SceneCardData;
|
||
onCurrentSceneChange(d.sceneId);
|
||
}}
|
||
onNodeContextMenu={(e, node) => {
|
||
e.preventDefault();
|
||
setMenu({ x: e.clientX, y: e.clientY, graphNodeId: node.id as GraphNodeId });
|
||
}}
|
||
onPaneClick={() => {
|
||
setMenu(null);
|
||
}}
|
||
onPaneContextMenu={(e) => {
|
||
e.preventDefault();
|
||
setMenu(null);
|
||
}}
|
||
onInit={(instance) => {
|
||
instance.fitView({ padding: 0.25 });
|
||
}}
|
||
onDragOver={onDragOver}
|
||
onDrop={onDrop}
|
||
panOnScroll
|
||
selectionOnDrag={false}
|
||
deleteKeyCode={['Backspace', 'Delete']}
|
||
proOptions={{ hideAttribution: true }}
|
||
>
|
||
<Background gap={18} size={1} color="rgba(255,255,255,0.06)" />
|
||
<GraphZoomToolbar />
|
||
</ReactFlow>
|
||
{menu && menuPosition
|
||
? createPortal(
|
||
<>
|
||
<button
|
||
type="button"
|
||
aria-label="Закрыть меню"
|
||
className={styles.menuBackdrop}
|
||
onClick={() => setMenu(null)}
|
||
/>
|
||
<div
|
||
role="menu"
|
||
tabIndex={-1}
|
||
className={styles.ctxMenu}
|
||
style={{ left: menuPosition.x, top: menuPosition.y }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Escape') setMenu(null);
|
||
}}
|
||
>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
className={styles.ctxItem}
|
||
onClick={() => {
|
||
if (menuNodeIsStart) {
|
||
onSetGraphNodeStart(null);
|
||
} else {
|
||
onSetGraphNodeStart(menu.graphNodeId);
|
||
}
|
||
setMenu(null);
|
||
}}
|
||
>
|
||
{menuNodeIsStart ? 'Снять метку «Начальная сцена»' : 'Начальная сцена'}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
className={styles.ctxItemDanger}
|
||
onClick={() => {
|
||
onRemoveGraphNode(menu.graphNodeId);
|
||
setMenu(null);
|
||
}}
|
||
>
|
||
Удалить
|
||
</button>
|
||
</div>
|
||
</>,
|
||
document.body,
|
||
)
|
||
: null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function SceneGraph(props: SceneGraphProps) {
|
||
return (
|
||
<ReactFlowProvider>
|
||
<SceneGraphCanvas {...props} />
|
||
</ReactFlowProvider>
|
||
);
|
||
}
|