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

48
src/Components/SVG/SVGReactPanZoom/ui-toolbar/toolbar.tsx
View file

@ -1,5 +1,12 @@
import { ArrowsPointingOutIcon, CursorArrowRaysIcon, HandRaisedIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon } from '@heroicons/react/24/outline';
import {
ArrowsPointingOutIcon,
CursorArrowRaysIcon,
HandRaisedIcon,
MagnifyingGlassMinusIcon,
MagnifyingGlassPlusIcon
} from '@heroicons/react/24/outline';
import React from 'react';
import { fromObject, scale, transform, translate } from 'transformation-matrix';
import {
fitToViewer,
@ -10,9 +17,7 @@ import {
TOOL_NONE,
TOOL_PAN,
TOOL_ZOOM_IN,
TOOL_ZOOM_OUT,
ALIGN_LEFT,
ALIGN_TOP,
TOOL_ZOOM_OUT, ALIGN_LEFT, ALIGN_TOP,
type Value,
type Tool,
type ALIGN_BOTTOM,
@ -22,7 +27,7 @@ import {
} from 'react-svg-pan-zoom';
import { ToolbarButton } from './toolbar-button';
interface IToolbarProps {
export interface IToolbarProps {
tool: Tool
value: Value
onChangeValue: (value: Value) => void
@ -31,6 +36,19 @@ interface IToolbarProps {
position?: ToolbarPosition | undefined
SVGAlignX?: typeof ALIGN_CENTER | typeof ALIGN_LEFT | typeof ALIGN_RIGHT | undefined
SVGAlignY?: typeof ALIGN_CENTER | typeof ALIGN_TOP | typeof ALIGN_BOTTOM | undefined
fittingScale?: number | undefined
}
/**
* Change value
* @param value
* @param patch
* @param action
* @returns {Object}
*/
function set(value: Value, patch: object, action = null): Value {
value = Object.assign({}, value, patch, { lastAction: action });
return Object.freeze(value);
}
export function Toolbar({
@ -41,7 +59,8 @@ export function Toolbar({
activeToolColor = '#1CA6FC',
position = POSITION_RIGHT,
SVGAlignX = ALIGN_LEFT,
SVGAlignY = ALIGN_TOP
SVGAlignY = ALIGN_TOP,
fittingScale = undefined
}: IToolbarProps): JSX.Element {
function handleChangeTool(event: React.MouseEvent | React.TouchEvent, tool: Tool): void {
onChangeTool(tool);
@ -50,7 +69,22 @@ export function Toolbar({
};
function handleFit(event: React.MouseEvent | React.TouchEvent): void {
onChangeValue(fitToViewer(value, SVGAlignX, SVGAlignY));
let fittedValue: Value = fitToViewer(value, SVGAlignX, SVGAlignY);
if (fittingScale !== undefined) {
const { viewerWidth, viewerHeight } = fittedValue;
const matrix = transform(
fromObject(fittedValue),
translate(viewerWidth, viewerHeight),
scale(fittingScale, fittingScale),
translate(-viewerWidth, -viewerHeight)
);
fittedValue = set(fittedValue, {
...matrix
});
}
onChangeValue(fittedValue);
event.stopPropagation();
event.preventDefault();
};