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

Implement export as SVG (#14)
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/14
This commit is contained in:
Siklos 2022-08-05 12:10:58 -04:00
parent c265659b2d
commit 8e34d6b72a
4 changed files with 90 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@ interface ISVGState {
export class SVG extends React.PureComponent<ISVGProps> {
public state: ISVGState;
public svg: React.RefObject<SVGSVGElement>;
public static ID = 'svg';
constructor(props: ISVGProps) {
super(props);
@ -29,7 +29,6 @@ export class SVG extends React.PureComponent<ISVGProps> {
} as Value,
tool: TOOL_PAN
};
this.svg = React.createRef<SVGSVGElement>();
}
render() {
@ -49,25 +48,28 @@ export class SVG extends React.PureComponent<ISVGProps> {
}
return (
<ReactSVGPanZoom
width={window.innerWidth}
height={window.innerHeight}
background={'#ffffff'}
defaultTool='pan'
value={this.state.value} onChangeValue={value => this.setState({ value })}
tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
miniatureProps={{
position: 'left',
background: '#616264',
width: window.innerWidth - 12,
height: 120
}}
>
<svg ref={this.svg} {...properties}>
{ children }
<Selector selected={this.props.selected} />
</svg>
</ReactSVGPanZoom>
<div id={SVG.ID}>
<ReactSVGPanZoom
width={window.innerWidth}
height={window.innerHeight}
background={'#ffffff'}
defaultTool='pan'
value={this.state.value} onChangeValue={value => this.setState({ value })}
tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
miniatureProps={{
position: 'left',
background: '#616264',
width: window.innerWidth - 12,
height: 120
}}
>
<svg {...properties}>
{ children }
<Selector selected={this.props.selected} />
</svg>
</ReactSVGPanZoom>
</div>
);
};
}