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

Add fittingScale to toolbar + Add transformation-matrix to dependencies

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-17 12:46:55 +01:00
parent 4bb9e44b84
commit 61807b621f
4 changed files with 56 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import * as React from 'react';
import { ReactSVGPanZoom, type Tool, TOOL_PAN, type Value } from 'react-svg-pan-zoom';
import { ReactSVGPanZoom, type Tool, TOOL_PAN, type Value, ALIGN_CENTER } from 'react-svg-pan-zoom';
import { Container } from './Elements/Container';
import { IContainerModel } from '../../Interfaces/IContainerModel';
import { SelectorContainer } from './Elements/SelectorContainer/SelectorContainer';
@ -8,7 +8,7 @@ import { SymbolLayer } from './Elements/SymbolLayer';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
import { DimensionLayer } from './Elements/DimensionLayer';
import { SelectorSymbol } from './Elements/SelectorSymbol/SelectorSymbol';
import { Toolbar } from './SVGReactPanZoom/ui-toolbar/toolbar';
import { IToolbarProps, Toolbar } from './SVGReactPanZoom/ui-toolbar/toolbar';
interface ISVGProps {
className?: string
@ -121,7 +121,14 @@ export function SVG(props: ISVGProps): JSX.Element {
width: 120,
height: 120
}}
customToolbar={Toolbar}
customToolbar={(props: IToolbarProps) => (
<Toolbar
{...props}
SVGAlignX={ALIGN_CENTER}
SVGAlignY={ALIGN_CENTER}
fittingScale={0.8}
/>
)}
>
<svg {...properties}>
{children}
@ -135,7 +142,7 @@ export function SVG(props: ISVGProps): JSX.Element {
}
function UseFitOnce(svgViewer: React.RefObject<ReactSVGPanZoom>, width: number, height: number): void {
React.useEffect(() => {
React.useCallback(() => {
// TODO: Fix this
svgViewer?.current?.setPointOnViewerCenter(width / 2, height / 2, 0.8);
}, [svgViewer, width, height]);