Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 182: Implement Scale for text, Selector and Dimension

Browse source
This commit is contained in:
Eric Nguyen 2022-09-09 16:00:13 +00:00
parent b8d3e9f1e9
commit 063467fb58
7 changed files with 75 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/Components/SVG/SVG.tsx
View file

@ -56,6 +56,8 @@ 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);
const svgViewer = React.useRef<ReactSVGPanZoom>(null);
// Framerate limiter
@ -78,9 +80,18 @@ export function SVG(props: ISVGProps): JSX.Element {
let children: React.ReactNode | React.ReactNode[] = [];
if (Array.isArray(props.children)) {
children = props.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
children = props.children.map(child =>
<Container
key={`container-${child.properties.id}`}
model={child}
scale={scale}
/>);
} else if (props.children !== null) {
children = <Container key={`container-${props.children.properties.id}`} model={props.children} />;
children = <Container
key={`container-${props.children.properties.id}`}
model={props.children}
scale={scale}
/>;
}
return (
@ -103,6 +114,10 @@ export function SVG(props: ISVGProps): JSX.Element {
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={{
@ -115,10 +130,10 @@ export function SVG(props: ISVGProps): JSX.Element {
<svg {...properties}>
{children}
{SHOW_DIMENSIONS_PER_DEPTH
? <DepthDimensionLayer roots={props.children} />
? <DepthDimensionLayer scale={scale} roots={props.children} />
: null}
<SymbolLayer symbols={props.symbols} />
<Selector selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
<Selector scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
</svg>
</ReactSVGPanZoom>
</div>