@recogito/metaphor-annotation-plugin 0.0.0-stage → 0.0.11-beta.0

package/dist/pages/_components/ImageMetaphorView/components/MetadataPanel/MetadataPanel.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { XIcon, ImagesIcon, InfoIcon } from '@phosphor-icons/react';
+import { useAnnotator } from '@annotorious/react';
+import { clearSelectionURLHash } from '@recogito/studio-sdk/components';
+import { Tabs, TabsList, TabsTrigger, TabsContent, } from '../../../shared/components';
+import { Contents } from './Contents';
+import { Info } from './Info';
+export const MetadataPanel = (props) => {
+    const { t } = useTranslation();
+    const [tab, setTab] = useState('contents');
+    const anno = useAnnotator();
+    const onSelectCanvas = (canvas) => {
+        if (canvas.id === props.currentCanvas?.id)
+            return;
+        // deselect annotations (and clear the selection hash, so we don't get
+        // looped back) before the canvas-switch remount
+        clearSelectionURLHash();
+        anno?.cancelSelected();
+        props.onSelectCanvas(canvas);
+    };
+    const headingRef = useRef(null);
+    const wasOpen = useRef(props.open);
+    useEffect(() => {
+        // return focus to panel heading on re-open for accessibility
+        if (props.open && !wasOpen.current) {
+            headingRef.current?.focus();
+        }
+        wasOpen.current = props.open;
+    }, [props.open]);
+    return (_jsxs("aside", { id: 'metadata-panel', inert: !props.open, "data-open": props.open, children: [_jsx("h2", { className: 'sr-only', children: t('Document navigation and metadata') }), _jsxs("div", { className: 'header', children: [_jsx("h3", { ref: headingRef, tabIndex: -1, children: props.document.name }), _jsx("button", { "aria-label": t('Close navigation/metadata panel'), "aria-expanded": props.open, "aria-controls": 'metadata-panel', className: 'unstyled icon-only', onClick: () => props.onOpenChange(false), type: 'button', children: _jsx(XIcon, { size: 16 }) })] }), _jsxs(Tabs, { value: tab, onValueChange: (val) => setTab(val), className: 'metadata-tabs-root', children: [_jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: 'contents', children: [_jsx(ImagesIcon, { weight: 'bold', "aria-hidden": 'true' }), _jsx("span", { className: 'tab-label', children: t('Contents') })] }), _jsxs(TabsTrigger, { value: 'info', children: [_jsx(InfoIcon, { weight: 'bold', "aria-hidden": 'true' }), _jsx("span", { className: 'tab-label', children: t('Info') })] })] }), _jsx(TabsContent, { value: 'contents', className: 'metadata-tab-content', children: _jsx("nav", { className: 'metadata-panel-body', "aria-label": t('Contents'), children: _jsx(Contents, { canvases: props.canvases, currentCanvas: props.currentCanvas, image: props.image, documentName: props.document.name, authToken: props.authToken, onSelectCanvas: onSelectCanvas, activeUsers: props.activeUsers }) }) }), _jsx(TabsContent, { value: 'info', className: 'metadata-tab-content', children: _jsx("div", { className: 'metadata-panel-body', children: _jsx(Info, { document: props.document, manifest: props.manifest }) }) })] })] }));
+};

package/dist/pages/_components/ImageMetaphorView/components/MetadataPanel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MetadataPanel';
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/MetadataPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/MetadataPanel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/MetadataPanel/index.js

@@ -0,0 +1 @@
+export * from './MetadataPanel';

package/dist/pages/_components/ImageMetaphorView/components/ShapeToolbar/ShapeToolbar.d.ts

@@ -0,0 +1,9 @@
+import { type ImageAnnotation } from '@annotorious/react';
+interface ShapeToolbarProps {
+    annotation: ImageAnnotation;
+    editable: boolean;
+    onClickAdvanced(): void;
+}
+export declare const ShapeToolbar: (props: ShapeToolbarProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ShapeToolbar.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/ShapeToolbar/ShapeToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/ShapeToolbar/ShapeToolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,eAAe,EAErB,MAAM,oBAAoB,CAAC;AAG5B,UAAU,iBAAiB;IACzB,UAAU,EAAE,eAAe,CAAC;IAG5B,QAAQ,EAAE,OAAO,CAAC;IAElB,eAAe,IAAI,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA2FpD,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/ShapeToolbar/ShapeToolbar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { TagIcon, TrashIcon, DotsThreeIcon, XIcon } from '@phosphor-icons/react';
+import { createBody, useAnnotationStore, } from '@annotorious/react';
+import { getCategoryColor, SetCategory } from '../shared';
+export const ShapeToolbar = (props) => {
+    const { t } = useTranslation();
+    const store = useAnnotationStore();
+    const category = useMemo(() => props.annotation.bodies.find((b) => b.purpose === 'classifying')?.value, [props.annotation]);
+    const onSetCategory = (value) => store?.addBody(createBody(props.annotation, { purpose: 'classifying', value }));
+    const onClearCategory = () => {
+        const body = props.annotation.bodies.find((b) => b.purpose === 'classifying');
+        if (body)
+            store?.deleteBody(body);
+    };
+    const onDelete = () => store?.deleteAnnotation(props.annotation.id);
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs("div", { className: 'ia-shape-toolbar', children: [category ? (_jsxs("div", { className: 'ia-category-chip', style: { backgroundColor: getCategoryColor(category) }, children: [_jsx("span", { children: category }), props.editable && (_jsx("button", { className: 'unstyled icon-only', "aria-label": t('Clear class'), onClick: onClearCategory, children: _jsx(XIcon, {}) }))] })) : props.editable && (_jsx(SetCategory, { onSetCategory: onSetCategory, children: _jsx("button", { className: 'compact', "aria-label": t('Add concept tag'), children: _jsx(TagIcon, { size: 16 }) }) })), props.editable && (_jsxs(_Fragment, { children: [_jsx("span", { className: 'ia-shape-toolbar-sep' }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('Delete annotation'), onClick: onDelete, children: _jsx(TrashIcon, { size: 16 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Delete annotation'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] })), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('More'), onClick: props.onClickAdvanced, children: _jsx(DotsThreeIcon, { size: 16 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('More'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] }) }));
+};

package/dist/pages/_components/ImageMetaphorView/components/ShapeToolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ShapeToolbar';
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/ShapeToolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/ShapeToolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/ShapeToolbar/index.js

@@ -0,0 +1 @@
+export * from './ShapeToolbar';

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/ImageMoreTools.d.ts

@@ -0,0 +1,11 @@
+import type { ArrowsVisibility } from '@annotorious/plugin-arrows-react';
+import { type PrivacyMode } from '../../../shared/components/EditorToolbar';
+interface ImageMoreToolsProps {
+    privacy: PrivacyMode;
+    arrowsVisibility: ArrowsVisibility;
+    onChangePrivacy(mode: PrivacyMode): void;
+    onSetArrowsVisibility(visibility: ArrowsVisibility): void;
+}
+export declare const ImageMoreTools: (props: ImageMoreToolsProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ImageMoreTools.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/ImageMoreTools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageMoreTools.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/Toolbar/ImageMoreTools.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAEL,KAAK,WAAW,EACjB,MAAM,0CAA0C,CAAC;AAGlD,UAAU,mBAAmB;IAC3B,OAAO,EAAE,WAAW,CAAC;IAErB,gBAAgB,EAAE,gBAAgB,CAAC;IAEnC,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IAEzC,qBAAqB,CAAC,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCAyFxD,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/ImageMoreTools.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import * as Popover from '@radix-ui/react-popover';
+import { ArrowClockwiseIcon, ArrowCounterClockwiseIcon, DotsThreeVerticalIcon, EyeSlashIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, } from '@phosphor-icons/react';
+import { useViewer } from '@annotorious/react';
+import { PrivacySelector, } from '../../../shared/components/EditorToolbar';
+import { ToolbarButton } from './Toolbar';
+export const ImageMoreTools = (props) => {
+    const { t } = useTranslation();
+    const viewer = useViewer();
+    const onZoom = (factor) => viewer?.viewport?.zoomBy(factor);
+    const onRotate = (degrees) => viewer?.viewport?.rotateBy(degrees);
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs(Popover.Root, { children: [_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Popover.Trigger, { asChild: true, children: _jsx("button", { className: 'unstyled toolbar-btn icon-only', "aria-label": t('More tools'), children: _jsx(DotsThreeVerticalIcon, { weight: 'bold', "aria-hidden": 'true' }) }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('More tools'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { className: 'ia-shape-toolbar', align: 'end', sideOffset: 6, children: [_jsx(PrivacySelector, { mode: props.privacy, onChangeMode: props.onChangePrivacy }), _jsx(ToolbarButton, { className: 'unstyled toolbar-btn icon-only', label: t('Zoom in'), onClick: () => onZoom(2), children: _jsx(MagnifyingGlassPlusIcon, { weight: 'bold', "aria-hidden": 'true' }) }), _jsx(ToolbarButton, { className: 'unstyled toolbar-btn icon-only', label: t('Zoom out'), onClick: () => onZoom(0.5), children: _jsx(MagnifyingGlassMinusIcon, { weight: 'bold', "aria-hidden": 'true' }) }), _jsx(ToolbarButton, { className: 'unstyled toolbar-btn icon-only', label: t('Rotate counter-clockwise'), onClick: () => onRotate(-90), children: _jsx(ArrowCounterClockwiseIcon, { weight: 'bold', "aria-hidden": 'true' }) }), _jsx(ToolbarButton, { className: 'unstyled toolbar-btn icon-only', label: t('Rotate clockwise'), onClick: () => onRotate(90), children: _jsx(ArrowClockwiseIcon, { weight: 'bold', "aria-hidden": 'true' }) }), _jsx("span", { className: 'ia-shape-toolbar-sep' }), _jsx(ToolbarButton, { className: 'unstyled toolbar-btn icon-only', label: t('Hide relations'), active: props.arrowsVisibility !== 'ALWAYS', onClick: () => props.onSetArrowsVisibility(props.arrowsVisibility === 'ALWAYS' ? 'HOVER_OR_SELECT' : 'ALWAYS'), children: _jsx(EyeSlashIcon, { weight: 'bold', "aria-hidden": 'true' }) })] }) })] }) }));
+};

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/Toolbar.css

@@ -0,0 +1,105 @@
+.image-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.image-tools :is(button, a.button) + :is(button, a.button) {
+  margin-left: 0;
+}
+
+.image-tools .image-toolbar-separator {
+  width: 1px;
+  align-self: stretch;
+  margin: 6px 4px;
+  background-color: var(--gray-200);
+}
+
+.image-tools button.compact.active {
+  background-color: var(--bright-blue);
+  border-color: var(--bright-blue);
+  color: #fff;
+}
+
+.image-tools button.compact.active svg {
+  color: #fff;
+}
+
+.ia-tool-selector {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ia-shape-control {
+  display: inline-flex;
+  align-items: stretch;
+  height: 38px;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--border-radius);
+  background-color: var(--gray-50);
+  color: var(--font-dark);
+  overflow: hidden;
+}
+
+.ia-shape-control.active {
+  background-color: var(--bright-blue);
+  border-color: var(--bright-blue);
+  color: #fff;
+}
+
+.ia-shape-control button.ia-shape-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  width: 96px;
+  padding: 0 8px 0 10px;
+  color: inherit;
+  font-size: var(--font-tiny);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.ia-shape-control button.ia-shape-caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  padding: 0;
+  border-left: 1px solid var(--gray-300);
+  color: inherit;
+  cursor: pointer;
+}
+
+.ia-shape-control.active button.ia-shape-caret {
+  border-left-color: rgba(255, 255, 255, 0.4);
+}
+
+.ia-shape-control button.ia-shape-label:hover,
+.ia-shape-control button.ia-shape-caret:hover {
+  box-shadow: inset 0 0 0 150px rgba(0, 0, 0, 0.06);
+}
+
+.ia-shape-control button.ia-shape-label svg,
+.ia-shape-control button.ia-shape-caret svg {
+  color: inherit;
+  top: 0;
+  margin: 0;
+}
+
+.ia-shape-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ia-tool-dropdown .select-item {
+  padding-left: 10px;
+}
+
+/* Toggle buttons in the more tools popover (e.g. hide relations) */
+.ia-shape-toolbar button.toolbar-btn.active {
+  background-color: var(--bright-blue);
+  color: #fff;
+}

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import { type ArrowsPluginMode } from '@annotorious/plugin-arrows-react';
+export type Tool = 'rectangle' | 'polygon' | 'ellipse' | 'path' | 'intelligent-scissors';
+interface ToolbarProps {
+    tool: Tool;
+    drawingEnabled: boolean;
+    arrowsMode: ArrowsPluginMode;
+    onChangeTool(tool: Tool): void;
+    onSetDrawingEnabled(enabled: boolean): void;
+    onSetArrowsMode(mode: ArrowsPluginMode): void;
+}
+interface ToolbarButtonProps {
+    label: string;
+    active?: boolean;
+    className?: string;
+    onClick(): void;
+    children: ReactNode;
+}
+export declare const ToolbarButton: (props: ToolbarButtonProps) => import("react").JSX.Element;
+export declare const Toolbar: (props: ToolbarProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBlD,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,kCAAkC,CAAC;AAE1C,MAAM,MAAM,IAAI,GACZ,WAAW,GACX,SAAS,GACT,SAAS,GACT,MAAM,GACN,sBAAsB,CAAC;AAE3B,UAAU,YAAY;IACpB,IAAI,EAAE,IAAI,CAAC;IAEX,cAAc,EAAE,OAAO,CAAC;IAExB,UAAU,EAAE,gBAAgB,CAAC;IAE7B,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAE/B,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAE5C,eAAe,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC/C;AAUD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,IAAI,IAAI,CAAC;IAEhB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAqBtD,CAAC;AA6EF,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,gCA2D1C,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/Toolbar.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import * as Select from '@radix-ui/react-select';
+import { ArrowsLeftRightIcon, CaretDownIcon, CircleIcon, CursorIcon, PenNibIcon, PolygonIcon, RectangleIcon, ScissorsIcon, } from '@phosphor-icons/react';
+import { useAnnotator, } from '@annotorious/react';
+import { isArrowAnnotation, } from '@annotorious/plugin-arrows-react';
+const SHAPES = [
+    { tool: 'rectangle', label: 'Box', Icon: RectangleIcon },
+    { tool: 'polygon', label: 'Polygon', Icon: PolygonIcon },
+    { tool: 'ellipse', label: 'Ellipse', Icon: CircleIcon },
+    { tool: 'path', label: 'Path', Icon: PenNibIcon },
+    { tool: 'intelligent-scissors', label: 'Scissors', Icon: ScissorsIcon },
+];
+export const ToolbarButton = (props) => (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: [props.className ?? 'compact', props.active ? 'active' : '']
+                    .filter(Boolean)
+                    .join(' '), "aria-pressed": props.active, "aria-label": props.label, onClick: props.onClick, children: props.children }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [props.label, _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }));
+const ToolSelector = (props) => {
+    const { t } = useTranslation();
+    const current = SHAPES.find((s) => s.tool === props.tool) ?? SHAPES[0];
+    const CurrentIcon = current.Icon;
+    return (_jsxs("div", { className: 'ia-tool-selector', children: [_jsx(ToolbarButton, { label: t('Move & select'), active: !props.drawingEnabled && props.arrowsMode !== 'draw', onClick: () => props.onSetDrawingEnabled(false), children: _jsx(CursorIcon, { size: 18 }) }), _jsxs(Select.Root, { value: props.tool, onValueChange: (value) => {
+                    props.onChangeTool(value);
+                    props.onSetDrawingEnabled(true);
+                }, children: [_jsxs("div", { className: `ia-shape-control${props.drawingEnabled ? ' active' : ''}`, children: [_jsxs("button", { className: 'unstyled ia-shape-label', onClick: () => props.onSetDrawingEnabled(true), children: [_jsx(CurrentIcon, { size: 16 }), _jsx("span", { children: t(current.label) })] }), _jsx(Select.Trigger, { className: 'unstyled ia-shape-caret', "aria-label": t('Select shape'), children: _jsx(Select.Icon, { children: _jsx(CaretDownIcon, { size: 12, weight: 'bold' }) }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: 'select-content ia-tool-dropdown', position: 'popper', sideOffset: 4, align: 'end', children: _jsx(Select.Viewport, { className: 'select-viewport', children: SHAPES.map(({ tool, label, Icon }) => (_jsx(Select.Item, { value: tool, className: 'select-item', children: _jsx(Select.ItemText, { children: _jsxs("span", { className: 'ia-shape-option', children: [_jsx(Icon, { size: 14 }), " ", t(label)] }) }) }, tool))) }) }) })] })] }));
+};
+export const Toolbar = (props) => {
+    const { t } = useTranslation();
+    const anno = useAnnotator();
+    // Toolbar behavior: auto-reset after createAnnotation, and select new arrows
+    useEffect(() => {
+        if (!anno)
+            return;
+        const onCreateAnnotation = (a) => {
+            props.onSetDrawingEnabled(false);
+            props.onSetArrowsMode('select');
+            if (isArrowAnnotation(a))
+                anno.setSelected(a.id);
+        };
+        anno.on('createAnnotation', onCreateAnnotation);
+        return () => {
+            anno.off('createAnnotation', onCreateAnnotation);
+        };
+    }, [anno, props.onSetDrawingEnabled, props.onSetArrowsMode]);
+    // Shape drawing and arrow drawing are mutually exclusive
+    const onSetDrawingEnabled = (enabled) => {
+        props.onSetArrowsMode('select');
+        props.onSetDrawingEnabled(enabled);
+    };
+    const onToggleArrows = () => {
+        if (props.arrowsMode === 'draw') {
+            props.onSetArrowsMode('select');
+        }
+        else {
+            props.onSetDrawingEnabled(false);
+            props.onSetArrowsMode('draw');
+        }
+    };
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs("div", { className: 'image-tools', children: [_jsx(ToolSelector, { tool: props.tool, drawingEnabled: props.drawingEnabled, arrowsMode: props.arrowsMode, onChangeTool: props.onChangeTool, onSetDrawingEnabled: onSetDrawingEnabled }), _jsx(ToolbarButton, { label: t('Draw arrows'), active: props.arrowsMode === 'draw', onClick: onToggleArrows, children: _jsx(ArrowsLeftRightIcon, { size: 18 }) })] }) }));
+};

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Toolbar';
+export * from './ImageMoreTools';
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/Toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/Toolbar/index.js

@@ -0,0 +1,2 @@
+export * from './Toolbar';
+export * from './ImageMoreTools';