Add custom toolbar

2023-02-17 11:53:19 +01:00 · 2023-02-17 11:53:19 +01:00 · b3338b0167
commit b3338b0167
parent 4053763e44
11 changed files with 319 additions and 0 deletions
--- a/src/Components/SVG/SVGReactPanZoom/ui-toolbar/toolbar.tsx
+++ b/src/Components/SVG/SVGReactPanZoom/ui-toolbar/toolbar.tsx
@ -0,0 +1,134 @@
+import React from 'react';
+
+import {
+  fitToViewer,
+  POSITION_TOP,
+  POSITION_BOTTOM,
+  POSITION_LEFT,
+  POSITION_RIGHT,
+  TOOL_NONE,
+  TOOL_PAN,
+  TOOL_ZOOM_IN,
+  TOOL_ZOOM_OUT,
+  ALIGN_LEFT,
+  ALIGN_TOP,
+  type Value,
+  type Tool,
+  type ALIGN_BOTTOM,
+  type ALIGN_CENTER,
+  type ALIGN_RIGHT,
+  type ToolbarPosition
+} from 'react-svg-pan-zoom';
+import { IconCursor } from './icon-cursor';
+import { IconFit } from './icon-fit';
+import { IconPan } from './icon-pan';
+import { IconZoomIn } from './icon-zoom-in';
+import { IconZoomOut } from './icon-zoom-out';
+import { ToolbarButton } from './toolbar-button';
+
+interface IToolbarProps {
+  tool: Tool
+  value: Value
+  onChangeValue: (value: Value) => void
+  onChangeTool: (tool: Tool) => void
+  activeToolColor?: string
+  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
+}
+
+export function Toolbar({
+  tool,
+  value,
+  onChangeValue,
+  onChangeTool,
+  activeToolColor = '#1CA6FC',
+  position = POSITION_RIGHT,
+  SVGAlignX = ALIGN_LEFT,
+  SVGAlignY = ALIGN_TOP
+}: IToolbarProps): JSX.Element {
+  function handleChangeTool(event: React.MouseEvent | React.TouchEvent, tool: Tool): void {
+    onChangeTool(tool);
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
+  function handleFit(event: React.MouseEvent | React.TouchEvent): void {
+    onChangeValue(fitToViewer(value, SVGAlignX, SVGAlignY));
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
+  const isHorizontal = [POSITION_TOP, POSITION_BOTTOM].includes(position);
+
+  const style: React.CSSProperties = {
+    // position
+    position: 'absolute',
+    transform: [POSITION_TOP, POSITION_BOTTOM].includes(position) ? 'translate(-50%, 0px)' : 'none',
+    top: [POSITION_LEFT, POSITION_RIGHT, POSITION_TOP].includes(position) ? '5px' : 'unset',
+    left: [POSITION_TOP, POSITION_BOTTOM].includes(position) ? '50%' : (POSITION_LEFT === position ? '5px' : 'unset'),
+    right: [POSITION_RIGHT].includes(position) ? '5px' : 'unset',
+    bottom: [POSITION_BOTTOM].includes(position) ? '5px' : 'unset',
+
+    // inner styling
+    backgroundColor: 'rgba(19, 20, 22, 0.90)',
+    borderRadius: '2px',
+    display: 'flex',
+    flexDirection: isHorizontal ? 'row' : 'column',
+    padding: isHorizontal ? '1px 2px' : '2px 1px'
+  };
+
+  return (
+    <div style={style} role="toolbar">
+      <ToolbarButton
+        toolbarPosition={position}
+        active={tool === TOOL_NONE}
+        activeColor={activeToolColor}
+        name="unselect-tools"
+        title="Selection"
+        onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_NONE); } }>
+        <IconCursor/>
+      </ToolbarButton>
+
+      <ToolbarButton
+        toolbarPosition={position}
+        active={tool === TOOL_PAN}
+        activeColor={activeToolColor}
+        name="select-tool-pan"
+        title="Pan"
+        onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_PAN); } }>
+        <IconPan/>
+      </ToolbarButton>
+
+      <ToolbarButton
+        toolbarPosition={position}
+        active={tool === TOOL_ZOOM_IN}
+        activeColor={activeToolColor}
+        name="select-tool-zoom-in"
+        title="Zoom in"
+        onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_ZOOM_IN); } }>
+        <IconZoomIn/>
+      </ToolbarButton>
+
+      <ToolbarButton
+        toolbarPosition={position}
+        active={tool === TOOL_ZOOM_OUT}
+        activeColor={activeToolColor}
+        name="select-tool-zoom-out"
+        title="Zoom out"
+        onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_ZOOM_OUT); } }>
+        <IconZoomOut/>
+      </ToolbarButton>
+
+      <ToolbarButton
+        toolbarPosition={position}
+        active={false}
+        activeColor={activeToolColor}
+        name="fit-to-viewer"
+        title="Fit to viewer"
+        onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleFit(event); } }>
+        <IconFit/>
+      </ToolbarButton>
+    </div>
+  );
+}