112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
import * as React from 'react';
|
|
import { ReactSVGPanZoom, Tool, TOOL_PAN, Value } from 'react-svg-pan-zoom';
|
|
import { Container } from './Elements/Container';
|
|
import { IContainerModel } from '../../Interfaces/IContainerModel';
|
|
import { Selector } from './Elements/Selector/Selector';
|
|
import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
|
|
import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
|
|
import { SymbolLayer } from './Elements/SymbolLayer';
|
|
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
|
import { DimensionLayer } from './Elements/DimensionLayer';
|
|
|
|
interface ISVGProps {
|
|
className?: string
|
|
viewerWidth: number
|
|
viewerHeight: number
|
|
width: number
|
|
height: number
|
|
containers: Map<string, IContainerModel>
|
|
children: IContainerModel
|
|
selected?: IContainerModel
|
|
symbols: Map<string, ISymbolModel>
|
|
selectContainer: (containerId: string) => void
|
|
}
|
|
|
|
export const ID = 'svg';
|
|
|
|
export function SVG(props: ISVGProps): JSX.Element {
|
|
const [tool, setTool] = React.useState<Tool>(TOOL_PAN);
|
|
const [value, setValue] = React.useState<Value>({} as Value);
|
|
const [scale, setScale] = React.useState<number>(value.a ?? 1);
|
|
|
|
const svgViewer = React.useRef<ReactSVGPanZoom>(null);
|
|
|
|
// Framerate limiter
|
|
const delta = React.useRef(0);
|
|
const timer = React.useRef(performance.now());
|
|
const renderCounter = React.useRef(0);
|
|
// Debug: FPS counter
|
|
// const startTimer = React.useRef(Date.now());
|
|
// console.log(renderCounter.current / ((Date.now() - startTimer.current) / 1000));
|
|
|
|
UseFitOnce(svgViewer, props.width, props.height);
|
|
|
|
const xmlns = '<http://www.w3.org/2000/svg>';
|
|
const properties = {
|
|
width: props.width,
|
|
height: props.height,
|
|
xmlns
|
|
};
|
|
|
|
let children: React.ReactNode | React.ReactNode[] = [];
|
|
children = <Container
|
|
key={`container-${props.children.properties.id}`}
|
|
containers={props.containers}
|
|
model={props.children}
|
|
depth={0}
|
|
scale={scale}
|
|
selectContainer={props.selectContainer}
|
|
/>;
|
|
|
|
return (
|
|
<div id={ID} className={props.className}>
|
|
<ReactSVGPanZoom
|
|
ref={svgViewer}
|
|
width={props.viewerWidth}
|
|
height={props.viewerHeight}
|
|
tool={tool} onChangeTool={setTool}
|
|
value={value} onChangeValue={(value: Value) => {
|
|
// Framerate limiter
|
|
const newTimer = performance.now();
|
|
delta.current += (newTimer - timer.current) / 1000;
|
|
timer.current = newTimer;
|
|
if (delta.current <= (1 / MAX_FRAMERATE)) {
|
|
return;
|
|
}
|
|
|
|
renderCounter.current = renderCounter.current + 1;
|
|
delta.current = delta.current % (1 / MAX_FRAMERATE);
|
|
setValue(value);
|
|
}}
|
|
onZoom={(event: unknown) => {
|
|
const value = event as Value;
|
|
setScale(value.a);
|
|
}}
|
|
background={'#ffffff'}
|
|
defaultTool='pan'
|
|
miniatureProps={{
|
|
position: 'left',
|
|
background: '#616264',
|
|
width: 120,
|
|
height: 120
|
|
}}
|
|
>
|
|
<svg {...properties}>
|
|
{children}
|
|
{SHOW_DIMENSIONS_PER_DEPTH
|
|
? <DepthDimensionLayer containers={props.containers} scale={scale} roots={props.children} />
|
|
: null}
|
|
<DimensionLayer containers={props.containers} scale={scale} root={props.children} />
|
|
<SymbolLayer scale={scale} symbols={props.symbols} />
|
|
<Selector containers={props.containers} scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
|
|
</svg>
|
|
</ReactSVGPanZoom>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function UseFitOnce(svgViewer: React.RefObject<ReactSVGPanZoom>, width: number, height: number): void {
|
|
React.useEffect(() => {
|
|
svgViewer?.current?.fitToViewer();
|
|
}, [svgViewer, width, height]);
|
|
}
|