@abidibo/react-cam-roi 0.0.13 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -19
- package/package.json +28 -1
- package/dist/Components/BoolField/BoolField.module.css +0 -60
- package/dist/Components/BoolField/index.d.ts +0 -5
- package/dist/Components/BoolField/index.js +0 -13
- package/dist/Components/Button/Button.module.css +0 -29
- package/dist/Components/Button/index.d.ts +0 -8
- package/dist/Components/Button/index.js +0 -15
- package/dist/Components/EnumField/EnumField.module.css +0 -61
- package/dist/Components/EnumField/index.d.ts +0 -10
- package/dist/Components/EnumField/index.js +0 -16
- package/dist/Components/IconButton/IconButton.module.css +0 -20
- package/dist/Components/IconButton/index.d.ts +0 -7
- package/dist/Components/IconButton/index.js +0 -10
- package/dist/Components/Loader/Loader.module.css +0 -25
- package/dist/Components/Loader/index.d.ts +0 -1
- package/dist/Components/Loader/index.js +0 -9
- package/dist/Components/Modal/Modal.module.css +0 -92
- package/dist/Components/Modal/index.d.ts +0 -10
- package/dist/Components/Modal/index.js +0 -16
- package/dist/Components/NumberField/NumberField.module.css +0 -60
- package/dist/Components/NumberField/index.d.ts +0 -3
- package/dist/Components/NumberField/index.js +0 -13
- package/dist/Components/RoiEditor/Canvas.d.ts +0 -10
- package/dist/Components/RoiEditor/Canvas.js +0 -28
- package/dist/Components/RoiEditor/ColorPicker.d.ts +0 -5
- package/dist/Components/RoiEditor/ColorPicker.js +0 -12
- package/dist/Components/RoiEditor/ColorPicker.module.css +0 -17
- package/dist/Components/RoiEditor/Header.d.ts +0 -2
- package/dist/Components/RoiEditor/Header.js +0 -22
- package/dist/Components/RoiEditor/Header.module.css +0 -32
- package/dist/Components/RoiEditor/Hooks.d.ts +0 -35
- package/dist/Components/RoiEditor/Hooks.js +0 -321
- package/dist/Components/RoiEditor/ParameterField.d.ts +0 -9
- package/dist/Components/RoiEditor/ParameterField.js +0 -27
- package/dist/Components/RoiEditor/ParametersModalForm/ParametersModalForm.module.css +0 -5
- package/dist/Components/RoiEditor/ParametersModalForm/index.d.ts +0 -16
- package/dist/Components/RoiEditor/ParametersModalForm/index.js +0 -40
- package/dist/Components/RoiEditor/Polygon.d.ts +0 -18
- package/dist/Components/RoiEditor/Polygon.js +0 -77
- package/dist/Components/RoiEditor/Polyline.d.ts +0 -28
- package/dist/Components/RoiEditor/Polyline.js +0 -75
- package/dist/Components/RoiEditor/Rectangle.d.ts +0 -21
- package/dist/Components/RoiEditor/Rectangle.js +0 -73
- package/dist/Components/RoiEditor/RoiEditor.module.css +0 -5
- package/dist/Components/RoiEditor/RoisInfo.d.ts +0 -2
- package/dist/Components/RoiEditor/RoisInfo.js +0 -43
- package/dist/Components/RoiEditor/ShapesList.d.ts +0 -2
- package/dist/Components/RoiEditor/ShapesList.js +0 -77
- package/dist/Components/RoiEditor/ShapesList.module.css +0 -67
- package/dist/Components/RoiEditor/Toolbar.d.ts +0 -2
- package/dist/Components/RoiEditor/Toolbar.js +0 -25
- package/dist/Components/RoiEditor/Toolbar.module.css +0 -41
- package/dist/Components/RoiEditor/Types.d.ts +0 -119
- package/dist/Components/RoiEditor/Types.js +0 -15
- package/dist/Components/RoiEditor/Utils.d.ts +0 -22
- package/dist/Components/RoiEditor/Utils.js +0 -150
- package/dist/Components/RoiEditor/index.d.ts +0 -10
- package/dist/Components/RoiEditor/index.js +0 -78
- package/dist/Components/RoleField.d.ts +0 -7
- package/dist/Components/RoleField.js +0 -35
- package/dist/Components/TextField/TextField.module.css +0 -61
- package/dist/Components/TextField/index.d.ts +0 -6
- package/dist/Components/TextField/index.js +0 -13
- package/dist/Components/Typography/index.d.ts +0 -9
- package/dist/Components/Typography/index.js +0 -6
- package/dist/Icons/AnnotateIcon.d.ts +0 -6
- package/dist/Icons/AnnotateIcon.js +0 -5
- package/dist/Icons/CloseIcon.d.ts +0 -6
- package/dist/Icons/CloseIcon.js +0 -5
- package/dist/Icons/CopyIcon.d.ts +0 -6
- package/dist/Icons/CopyIcon.js +0 -5
- package/dist/Icons/DeleteIcon.d.ts +0 -6
- package/dist/Icons/DeleteIcon.js +0 -5
- package/dist/Icons/EditIcon.d.ts +0 -6
- package/dist/Icons/EditIcon.js +0 -5
- package/dist/Icons/PointerIcon.d.ts +0 -6
- package/dist/Icons/PointerIcon.js +0 -5
- package/dist/Icons/PolygonIcon.d.ts +0 -6
- package/dist/Icons/PolygonIcon.js +0 -5
- package/dist/Icons/PolylineIcon.d.ts +0 -6
- package/dist/Icons/PolylineIcon.js +0 -5
- package/dist/Icons/RectangleIcon.d.ts +0 -6
- package/dist/Icons/RectangleIcon.js +0 -5
- package/dist/Icons/SaveIcon.d.ts +0 -6
- package/dist/Icons/SaveIcon.js +0 -5
- package/dist/Icons/SelectIcon.d.ts +0 -6
- package/dist/Icons/SelectIcon.js +0 -5
- package/dist/Providers/EditorProvider.d.ts +0 -26
- package/dist/Providers/EditorProvider.js +0 -29
- package/dist/Providers/UiProvider.d.ts +0 -84
- package/dist/Providers/UiProvider.js +0 -107
- package/dist/Types.d.ts +0 -10
- package/dist/Types.js +0 -1
- package/dist/Utils/Dispatcher.d.ts +0 -16
- package/dist/Utils/Dispatcher.js +0 -65
- package/dist/Utils/index.d.ts +0 -4
- package/dist/Utils/index.js +0 -14
- package/dist/index.d.ts +0 -4
- package/dist/index.js +0 -4
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import * as fabric from 'fabric';
|
|
2
|
-
import { FabricEvent } from './Types';
|
|
3
|
-
export declare const handleMouseDownPolyline: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
|
|
4
|
-
x: number;
|
|
5
|
-
y: number;
|
|
6
|
-
}[], setPoints: (v: {
|
|
7
|
-
x: number;
|
|
8
|
-
y: number;
|
|
9
|
-
}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
|
|
10
|
-
export declare const handleMouseMovePolyline: (event: FabricEvent, canvas: fabric.Canvas, isDrawing: boolean, lines: fabric.Line[]) => void;
|
|
11
|
-
export declare const handleDoubleClickPolyline: (editorId: string, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
|
|
12
|
-
x: number;
|
|
13
|
-
y: number;
|
|
14
|
-
}[], setPoints: (v: {
|
|
15
|
-
x: number;
|
|
16
|
-
y: number;
|
|
17
|
-
}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
|
|
18
|
-
export declare const copyPolyline: (editorId: string, canvas: fabric.Canvas, polyline: fabric.Polyline) => fabric.Polyline<{
|
|
19
|
-
top: number;
|
|
20
|
-
left: number;
|
|
21
|
-
fill: string;
|
|
22
|
-
stroke: string | fabric.TFiller | null;
|
|
23
|
-
strokeWidth: number;
|
|
24
|
-
selectable: false;
|
|
25
|
-
hasControls: true;
|
|
26
|
-
hoverCursor: string;
|
|
27
|
-
id: string;
|
|
28
|
-
}, fabric.SerializedPolylineProps, fabric.ObjectEvents>;
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import * as fabric from 'fabric';
|
|
2
|
-
import { v4 as uuidv4 } from 'uuid';
|
|
3
|
-
import Dispatcher from '../../Utils/Dispatcher';
|
|
4
|
-
const addPoint = (event, canvas, color, points, setPoints, lines, setLines) => {
|
|
5
|
-
const pointer = canvas.getScenePoint(event.e);
|
|
6
|
-
const newPoint = { x: pointer.x, y: pointer.y };
|
|
7
|
-
const newPolylinePoints = [...points, newPoint];
|
|
8
|
-
setPoints(newPolylinePoints);
|
|
9
|
-
if (newPolylinePoints.length > 0) {
|
|
10
|
-
const line = new fabric.Line([
|
|
11
|
-
newPolylinePoints[newPolylinePoints.length - 1].x,
|
|
12
|
-
newPolylinePoints[newPolylinePoints.length - 1].y,
|
|
13
|
-
pointer.x,
|
|
14
|
-
pointer.y,
|
|
15
|
-
], {
|
|
16
|
-
stroke: color,
|
|
17
|
-
strokeWidth: 2,
|
|
18
|
-
strokeUniform: true,
|
|
19
|
-
selectable: false,
|
|
20
|
-
hasControls: false,
|
|
21
|
-
});
|
|
22
|
-
canvas.add(line);
|
|
23
|
-
setLines([...lines, line]);
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
export const handleMouseDownPolyline = (event, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines) => {
|
|
27
|
-
setIsDrawing(true);
|
|
28
|
-
addPoint(event, canvas, activeColor, points, setPoints, lines, setLines);
|
|
29
|
-
};
|
|
30
|
-
export const handleMouseMovePolyline = (event, canvas, isDrawing, lines) => {
|
|
31
|
-
if (isDrawing && lines.length > 0) {
|
|
32
|
-
const pointer = canvas.getScenePoint(event.e);
|
|
33
|
-
lines[lines.length - 1].set({ x2: pointer.x, y2: pointer.y });
|
|
34
|
-
canvas.renderAll();
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
export const handleDoubleClickPolyline = (editorId, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines) => {
|
|
38
|
-
if (points.length > 2) {
|
|
39
|
-
const id = uuidv4();
|
|
40
|
-
const polyline = new fabric.Polyline(points, {
|
|
41
|
-
fill: 'transparent',
|
|
42
|
-
stroke: activeColor,
|
|
43
|
-
strokeWidth: 2,
|
|
44
|
-
selectable: false,
|
|
45
|
-
hasControls: true,
|
|
46
|
-
lockRotation: false,
|
|
47
|
-
id,
|
|
48
|
-
});
|
|
49
|
-
canvas.add(polyline);
|
|
50
|
-
Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polyline" /* ToolEnum.Polyline */, shape: polyline });
|
|
51
|
-
setPoints([]);
|
|
52
|
-
for (const line of lines) {
|
|
53
|
-
canvas.remove(line); // Remove temporary lines
|
|
54
|
-
}
|
|
55
|
-
setLines([]);
|
|
56
|
-
setIsDrawing(false);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
export const copyPolyline = (editorId, canvas, polyline) => {
|
|
60
|
-
const id = uuidv4();
|
|
61
|
-
const copy = new fabric.Polyline(polyline.points, {
|
|
62
|
-
top: polyline.top + 10,
|
|
63
|
-
left: polyline.left + 10,
|
|
64
|
-
fill: 'transparent',
|
|
65
|
-
stroke: polyline.stroke,
|
|
66
|
-
strokeWidth: polyline.strokeWidth,
|
|
67
|
-
selectable: false,
|
|
68
|
-
hasControls: true,
|
|
69
|
-
hoverCursor: 'default',
|
|
70
|
-
id,
|
|
71
|
-
});
|
|
72
|
-
canvas.add(copy);
|
|
73
|
-
Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polyline" /* ToolEnum.Polyline */, shape: copy });
|
|
74
|
-
return copy;
|
|
75
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as fabric from 'fabric';
|
|
2
|
-
import { FabricEvent, Shape } from './Types';
|
|
3
|
-
export declare const handleMouseDownRect: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setOriginX: (v: number) => void, setOriginY: (v: number) => void, setShape: (v: Shape) => void, setIsDrawing: (v: boolean) => void) => void;
|
|
4
|
-
export declare const handleMouseMoveRect: (event: FabricEvent, canvas: fabric.Canvas, originX: number, originY: number, shape: Shape, isDrawing: boolean) => void;
|
|
5
|
-
export declare const handleMouseUpRect: (editorId: string, canvas: fabric.Canvas, setIsDrawing: (v: boolean) => void, shape: Shape, setShape: (v: Shape | null) => void) => void;
|
|
6
|
-
export declare const copyRectangle: (editorId: string, canvas: fabric.Canvas, rectangle: fabric.Rect) => fabric.Rect<{
|
|
7
|
-
left: number;
|
|
8
|
-
top: number;
|
|
9
|
-
originX: "left";
|
|
10
|
-
originY: "top";
|
|
11
|
-
width: number;
|
|
12
|
-
height: number;
|
|
13
|
-
fill: string;
|
|
14
|
-
stroke: string | fabric.TFiller | null;
|
|
15
|
-
strokeWidth: number;
|
|
16
|
-
strokeUniform: true;
|
|
17
|
-
selectable: false;
|
|
18
|
-
hasControls: true;
|
|
19
|
-
hoverCursor: string;
|
|
20
|
-
id: string;
|
|
21
|
-
}, fabric.SerializedRectProps, fabric.ObjectEvents>;
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import * as fabric from 'fabric';
|
|
2
|
-
import { v4 as uuidv4 } from 'uuid';
|
|
3
|
-
import Dispatcher from '../../Utils/Dispatcher';
|
|
4
|
-
export const handleMouseDownRect = (event, canvas, activeColor, setOriginX, setOriginY, setShape, setIsDrawing) => {
|
|
5
|
-
const pointer = canvas.getScenePoint(event.e);
|
|
6
|
-
setOriginX(pointer.x);
|
|
7
|
-
setOriginY(pointer.y);
|
|
8
|
-
const id = uuidv4();
|
|
9
|
-
const newRectangle = new fabric.Rect({
|
|
10
|
-
left: pointer.x,
|
|
11
|
-
top: pointer.y,
|
|
12
|
-
originX: 'left',
|
|
13
|
-
originY: 'top',
|
|
14
|
-
width: 0,
|
|
15
|
-
height: 0,
|
|
16
|
-
fill: 'transparent',
|
|
17
|
-
stroke: activeColor,
|
|
18
|
-
strokeWidth: 2,
|
|
19
|
-
strokeUniform: true,
|
|
20
|
-
selectable: false,
|
|
21
|
-
hasControls: true,
|
|
22
|
-
hoverCursor: 'default',
|
|
23
|
-
id,
|
|
24
|
-
});
|
|
25
|
-
canvas.add(newRectangle);
|
|
26
|
-
setShape(newRectangle);
|
|
27
|
-
setIsDrawing(true);
|
|
28
|
-
};
|
|
29
|
-
export const handleMouseMoveRect = (event, canvas, originX, originY, shape, isDrawing) => {
|
|
30
|
-
if (isDrawing && shape) {
|
|
31
|
-
const pointer = canvas.getScenePoint(event.e);
|
|
32
|
-
shape.set({
|
|
33
|
-
width: Math.abs(originX - pointer.x),
|
|
34
|
-
height: Math.abs(originY - pointer.y),
|
|
35
|
-
});
|
|
36
|
-
if (originX > pointer.x) {
|
|
37
|
-
shape.set({ left: pointer.x });
|
|
38
|
-
}
|
|
39
|
-
if (originY > pointer.y) {
|
|
40
|
-
shape.set({ top: pointer.y });
|
|
41
|
-
}
|
|
42
|
-
canvas.renderAll();
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
export const handleMouseUpRect = (editorId, canvas, setIsDrawing, shape, setShape) => {
|
|
46
|
-
setIsDrawing(false);
|
|
47
|
-
shape.setCoords();
|
|
48
|
-
Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id: shape.id, type: "rect" /* ToolEnum.Rectangle */, shape });
|
|
49
|
-
setShape(null);
|
|
50
|
-
canvas.defaultCursor = 'default';
|
|
51
|
-
};
|
|
52
|
-
export const copyRectangle = (editorId, canvas, rectangle) => {
|
|
53
|
-
const id = uuidv4();
|
|
54
|
-
const copy = new fabric.Rect({
|
|
55
|
-
left: rectangle.left + 10,
|
|
56
|
-
top: rectangle.top + 10,
|
|
57
|
-
originX: 'left',
|
|
58
|
-
originY: 'top',
|
|
59
|
-
width: rectangle.width,
|
|
60
|
-
height: rectangle.height,
|
|
61
|
-
fill: 'transparent',
|
|
62
|
-
stroke: rectangle.stroke,
|
|
63
|
-
strokeWidth: rectangle.strokeWidth,
|
|
64
|
-
strokeUniform: true,
|
|
65
|
-
selectable: false,
|
|
66
|
-
hasControls: true,
|
|
67
|
-
hoverCursor: 'default',
|
|
68
|
-
id,
|
|
69
|
-
});
|
|
70
|
-
canvas.add(copy);
|
|
71
|
-
Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "rect" /* ToolEnum.Rectangle */, shape: copy });
|
|
72
|
-
return copy;
|
|
73
|
-
};
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
import { useEditorContext } from '../../Providers/EditorProvider';
|
|
4
|
-
import { UiContext } from '../../Providers/UiProvider';
|
|
5
|
-
import { OperatorEnum } from './Types';
|
|
6
|
-
import { formatString, humanize } from '../../Utils';
|
|
7
|
-
const RoisInfo = () => {
|
|
8
|
-
var _a;
|
|
9
|
-
const { strings, Typography } = useContext(UiContext);
|
|
10
|
-
const { configuration } = useEditorContext();
|
|
11
|
-
if (!((_a = configuration.rois) === null || _a === void 0 ? void 0 : _a.length))
|
|
12
|
-
return null;
|
|
13
|
-
return (_jsxs("div", { children: [_jsxs(Typography, { component: "div", children: [strings.roisToBeDrawn, ":"] }), _jsx("ul", { children: configuration.rois.map(r => {
|
|
14
|
-
var _a, _b;
|
|
15
|
-
let rule;
|
|
16
|
-
const data = {
|
|
17
|
-
role: humanize(r.role),
|
|
18
|
-
type: r.type,
|
|
19
|
-
threshold: (_a = r.multiplicity) === null || _a === void 0 ? void 0 : _a.threshold,
|
|
20
|
-
};
|
|
21
|
-
switch ((_b = r.multiplicity) === null || _b === void 0 ? void 0 : _b.operator) {
|
|
22
|
-
case OperatorEnum.Eq:
|
|
23
|
-
rule = formatString(strings.roiMultiplicityEqRule, data);
|
|
24
|
-
break;
|
|
25
|
-
case OperatorEnum.Lt:
|
|
26
|
-
rule = formatString(strings.roiMultiplicityLtRule, data);
|
|
27
|
-
break;
|
|
28
|
-
case OperatorEnum.Lte:
|
|
29
|
-
rule = formatString(strings.roiMultiplicityLteRule, data);
|
|
30
|
-
break;
|
|
31
|
-
case OperatorEnum.Gt:
|
|
32
|
-
rule = formatString(strings.roiMultiplicityGtRule, data);
|
|
33
|
-
break;
|
|
34
|
-
case OperatorEnum.Gte:
|
|
35
|
-
rule = formatString(strings.roiMultiplicityGteRule, data);
|
|
36
|
-
break;
|
|
37
|
-
default:
|
|
38
|
-
rule = formatString(strings.roiMultiplicityNoRule, data);
|
|
39
|
-
}
|
|
40
|
-
return (_jsx("li", { children: rule }, r.role));
|
|
41
|
-
}) })] }));
|
|
42
|
-
};
|
|
43
|
-
export default RoisInfo;
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useContext, useEffect, useState } from 'react';
|
|
3
|
-
import { useEditorContext } from '../../Providers/EditorProvider';
|
|
4
|
-
import { UiContext } from '../../Providers/UiProvider';
|
|
5
|
-
import { css, humanize } from '../../Utils';
|
|
6
|
-
import Dispatcher from '../../Utils/Dispatcher';
|
|
7
|
-
import ParametersModalForm from './ParametersModalForm';
|
|
8
|
-
import styles from './ShapesList.module.css';
|
|
9
|
-
const ShapesList = () => {
|
|
10
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
11
|
-
const { strings, Typography, IconButton, DeleteIcon, AnnotateIcon, SelectIcon, CopyIcon, themeMode } = useContext(UiContext);
|
|
12
|
-
const { shapes, removeShape, configuration, metadata, setMetadata, addShape, editorId } = useEditorContext();
|
|
13
|
-
const [selected, setSelected] = useState([]);
|
|
14
|
-
const [form, setForm] = useState({
|
|
15
|
-
isOpen: false,
|
|
16
|
-
shapeId: '',
|
|
17
|
-
type: null,
|
|
18
|
-
shape: null,
|
|
19
|
-
});
|
|
20
|
-
// open metadata form immediately after drawing the shape
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
const openForm = (_, { id, type, shape }) => {
|
|
23
|
-
setForm({ isOpen: true, shapeId: id, type, shape });
|
|
24
|
-
};
|
|
25
|
-
Dispatcher.register(`canvas:${editorId}:shapeAdded`, openForm);
|
|
26
|
-
return () => {
|
|
27
|
-
Dispatcher.unregister(`canvas:${editorId}:shapeAdded`, openForm);
|
|
28
|
-
};
|
|
29
|
-
}, [editorId]);
|
|
30
|
-
useEffect(() => {
|
|
31
|
-
const setSelectedShapes = (_, event) => { var _a; return setSelected((_a = event === null || event === void 0 ? void 0 : event.map((s) => s.id)) !== null && _a !== void 0 ? _a : []); };
|
|
32
|
-
Dispatcher.register(`canvas:${editorId}:shapeSelected`, setSelectedShapes);
|
|
33
|
-
return () => {
|
|
34
|
-
Dispatcher.unregister(`canvas:${editorId}:shapeSelected`, setSelectedShapes);
|
|
35
|
-
};
|
|
36
|
-
}, [shapes, editorId]);
|
|
37
|
-
const handleCopyShape = (id) => (evt) => {
|
|
38
|
-
evt.stopPropagation();
|
|
39
|
-
Dispatcher.emit(`canvas:${editorId}:copyShape`, id);
|
|
40
|
-
};
|
|
41
|
-
const handleRemoveShape = (id) => () => {
|
|
42
|
-
Dispatcher.emit(`canvas:${editorId}:removeShape`, id);
|
|
43
|
-
removeShape(id);
|
|
44
|
-
};
|
|
45
|
-
const handleSelectShape = (id) => () => {
|
|
46
|
-
Dispatcher.emit(`canvas:${editorId}:selectShape`, id);
|
|
47
|
-
};
|
|
48
|
-
const handleEditShapeMetadata = (id) => () => {
|
|
49
|
-
setForm({ isOpen: true, shapeId: id, type: null, shape: null });
|
|
50
|
-
};
|
|
51
|
-
const handleSubmitMetadata = (shapeId) => (data, properties) => {
|
|
52
|
-
// if in creation mode, add the shape
|
|
53
|
-
if (form.type !== null) {
|
|
54
|
-
addShape(shapeId, form.type, form.shape);
|
|
55
|
-
}
|
|
56
|
-
setMetadata(Object.assign(Object.assign({}, metadata), { rois: [...metadata.rois.filter((r) => r.id !== shapeId), Object.assign({ id: shapeId, parameters: data }, properties)] }));
|
|
57
|
-
setForm({ isOpen: false, shapeId: '', type: null, shape: null });
|
|
58
|
-
};
|
|
59
|
-
const handleCloseMetadataForm = () => {
|
|
60
|
-
// if in creation mode do not add shape and delete shape from canvas
|
|
61
|
-
if (form.type !== null) {
|
|
62
|
-
Dispatcher.emit(`canvas:${editorId}:removeShape`, form.shapeId);
|
|
63
|
-
}
|
|
64
|
-
setForm({ isOpen: false, shapeId: '', type: null, shape: null });
|
|
65
|
-
};
|
|
66
|
-
const iconColor = themeMode === 'light' ? 'black' : 'white';
|
|
67
|
-
return (_jsxs(_Fragment, { children: [_jsxs("table", { className: css('shapes-table', styles, themeMode), children: [Object.keys(shapes).length > 0 && (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.name }) }), _jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.role }) }), _jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.type }) }), _jsx("th", {})] }) })), _jsx("tbody", { children: Object.keys(shapes).map((id, idx) => {
|
|
68
|
-
var _a;
|
|
69
|
-
const m = metadata.rois.find((roi) => roi.id === id);
|
|
70
|
-
return (_jsxs("tr", { onClick: handleSelectShape(id), className: selected.indexOf(id) > -1
|
|
71
|
-
? css('shapes-row-selected', styles, themeMode)
|
|
72
|
-
: idx % 2 === 0
|
|
73
|
-
? css('shapes-row-even', styles, themeMode)
|
|
74
|
-
: css('shapes-row-odd', styles, themeMode), children: [_jsx("td", { children: _jsxs("div", { className: styles.shapesTableName, children: [_jsx("div", { className: styles.shapesTableColor, style: { backgroundColor: shapes[id].shape.stroke } }), _jsx(Typography, { children: m === null || m === void 0 ? void 0 : m.name })] }) }), _jsx("td", { children: _jsx(Typography, { children: humanize((_a = m === null || m === void 0 ? void 0 : m.role) !== null && _a !== void 0 ? _a : '') }) }), _jsx("td", { children: _jsx(Typography, { children: strings[shapes[id].type] }) }), _jsxs("td", { children: [_jsx(IconButton, { onClick: handleSelectShape(id), children: _jsx(SelectIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleCopyShape(id), children: _jsx(CopyIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleEditShapeMetadata(id), children: _jsx(AnnotateIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleRemoveShape(id), children: _jsx(DeleteIcon, { color: iconColor }) })] })] }, id));
|
|
75
|
-
}) })] }), form.isOpen && (_jsx(ParametersModalForm, { shapeType: form.type || shapes[form.shapeId].type, shapeName: (_b = (_a = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '', shapeRole: (_d = (_c = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _c === void 0 ? void 0 : _c.role) !== null && _d !== void 0 ? _d : '', parameters: (_f = (_e = configuration.rois.find((roi) => roi.type === (form.type || shapes[form.shapeId].type))) === null || _e === void 0 ? void 0 : _e.parameters) !== null && _f !== void 0 ? _f : [], data: (_k = (_h = (_g = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _g === void 0 ? void 0 : _g.parameters) !== null && _h !== void 0 ? _h : (_j = configuration.rois.find((roi) => roi.type === (form.type || shapes[form.shapeId].type))) === null || _j === void 0 ? void 0 : _j.parameters) !== null && _k !== void 0 ? _k : [], title: strings.shapeParametersMetadata, onClose: handleCloseMetadataForm, onSubmit: handleSubmitMetadata(form.shapeId) }))] }));
|
|
76
|
-
};
|
|
77
|
-
export default ShapesList;
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
.shapes-table {
|
|
2
|
-
border-collapse: collapse;
|
|
3
|
-
width: 100%;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.shapes-table th {
|
|
7
|
-
padding: .8rem .3rem;
|
|
8
|
-
text-align: left;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.shapes-table td {
|
|
12
|
-
padding: 0 .3rem;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.shapes-table tr td:last-child,
|
|
16
|
-
.shapes-table tr th:last-child {
|
|
17
|
-
text-align: right;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.shapes-table-light {
|
|
21
|
-
background-color: #eee;
|
|
22
|
-
color: #000;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.shapes-table-dark {
|
|
26
|
-
background-color: #333;
|
|
27
|
-
color: #fff;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.shapes-row-selected-light {
|
|
31
|
-
background-color: #ccc;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.shapes-row-selected-dark {
|
|
35
|
-
background-color: #666;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.shapes-row-even-light {
|
|
39
|
-
background-color: #f7f7f7;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.shapes-row-even-dark {
|
|
43
|
-
background-color: #444;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.shapes-row-odd-light {
|
|
47
|
-
background-color: #f0f0f0;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.shapes-row-odd-dark {
|
|
51
|
-
background-color: #555;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.shapesTableName {
|
|
55
|
-
display: flex;
|
|
56
|
-
align-items: center;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.shapesTableColor {
|
|
60
|
-
border: 1px solid #000;
|
|
61
|
-
box-sizing: border-box;
|
|
62
|
-
display: inline-block;
|
|
63
|
-
width: 24px;
|
|
64
|
-
height: 24px;
|
|
65
|
-
border-radius: 50%;
|
|
66
|
-
margin-right: .5rem;
|
|
67
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
import PointerIcon from '../../Icons/PointerIcon';
|
|
4
|
-
import PolygonIcon from '../../Icons/PolygonIcon';
|
|
5
|
-
import PolylineIcon from '../../Icons/PolylineIcon';
|
|
6
|
-
import RectangleIcon from '../../Icons/RectangleIcon';
|
|
7
|
-
import { useEditorContext } from '../../Providers/EditorProvider';
|
|
8
|
-
import { UiContext } from '../../Providers/UiProvider';
|
|
9
|
-
import { css } from '../../Utils';
|
|
10
|
-
import ColorPicker from './ColorPicker';
|
|
11
|
-
import styles from './Toolbar.module.css';
|
|
12
|
-
import { enableRois } from './Utils';
|
|
13
|
-
const Toolbar = () => {
|
|
14
|
-
var _a;
|
|
15
|
-
const { IconButton, themeMode, primaryColor, Typography, strings } = useContext(UiContext);
|
|
16
|
-
const { activeTool, setActiveTool, configuration } = useEditorContext();
|
|
17
|
-
const iconColor = (tool) => (tool === activeTool ? primaryColor : themeMode === 'light' ? 'black' : 'white');
|
|
18
|
-
const setTool = (tool) => () => setActiveTool(tool);
|
|
19
|
-
const hideForbiddenTools = (_a = configuration.options) === null || _a === void 0 ? void 0 : _a.hideForbiddenTools;
|
|
20
|
-
const polylineEnabled = configuration.rois.find((r) => r.type === "polyline" /* ToolEnum.Polyline */);
|
|
21
|
-
const polygonEnabled = configuration.rois.find((r) => r.type === "polygon" /* ToolEnum.Polygon */);
|
|
22
|
-
const rectangleEnabled = configuration.rois.find((r) => r.type === "rect" /* ToolEnum.Rectangle */);
|
|
23
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", { className: css('toolbar', styles, themeMode), children: enableRois(configuration) && (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: _jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || polylineEnabled) && (_jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: _jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (_jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: _jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) })), (!hideForbiddenTools || rectangleEnabled) && (_jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: _jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })), _jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (_jsx("div", { className: css('toolbar-helper', styles, themeMode), children: _jsxs(Typography, { children: [strings[activeTool], ": ", strings[`${activeTool}HelpText`]] }) }))] }));
|
|
24
|
-
};
|
|
25
|
-
export default Toolbar;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
.toolbar {
|
|
2
|
-
align-items: center;
|
|
3
|
-
display: flex;
|
|
4
|
-
padding: .5rem;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.toolbar-light {
|
|
8
|
-
background-color: #eee;;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.toolbar-dark {
|
|
12
|
-
background-color: #333;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.toolbar-helper {
|
|
16
|
-
padding: .5rem;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.toolbar-helper-light {
|
|
20
|
-
background-color: #f7f7f7;;
|
|
21
|
-
color: #000;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.toolbar-helper-dark {
|
|
25
|
-
background-color: #222;
|
|
26
|
-
color: #fff;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.toolbar-spacer {
|
|
30
|
-
height: 20px;
|
|
31
|
-
margin: 0 .5rem;
|
|
32
|
-
width: 1px;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.toolbar-spacer-light {
|
|
36
|
-
background-color: #ccc;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.toolbar-spacer-dark {
|
|
40
|
-
background-color: #555;
|
|
41
|
-
}
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import * as fabric from 'fabric';
|
|
2
|
-
export declare const enum ToolEnum {
|
|
3
|
-
Pointer = "pointer",
|
|
4
|
-
Polyline = "polyline",
|
|
5
|
-
Polygon = "polygon",
|
|
6
|
-
Rectangle = "rect"
|
|
7
|
-
}
|
|
8
|
-
export type ShapeType = ToolEnum.Polyline | ToolEnum.Polygon | ToolEnum.Rectangle;
|
|
9
|
-
export type Shape = (fabric.Rect | fabric.Polygon | fabric.Polyline) & {
|
|
10
|
-
id?: string;
|
|
11
|
-
};
|
|
12
|
-
export type Shapes = Record<string, {
|
|
13
|
-
type: ShapeType;
|
|
14
|
-
shape: Shape;
|
|
15
|
-
}>;
|
|
16
|
-
export type FabricEvent = fabric.TPointerEventInfo<fabric.TPointerEvent>;
|
|
17
|
-
export type FabricSelectionEvent = Partial<fabric.TEvent> & {
|
|
18
|
-
selected: fabric.Object[];
|
|
19
|
-
};
|
|
20
|
-
export type IAddShape = (id: string, type: ShapeType, shape: Shape) => void;
|
|
21
|
-
export declare enum DataTypeEnum {
|
|
22
|
-
Integer = "int",
|
|
23
|
-
Float = "float",
|
|
24
|
-
String = "string",
|
|
25
|
-
Boolean = "bool"
|
|
26
|
-
}
|
|
27
|
-
export declare enum OperatorEnum {
|
|
28
|
-
Lt = "lt",
|
|
29
|
-
Lte = "lte",
|
|
30
|
-
Gt = "gt",
|
|
31
|
-
Gte = "gte",
|
|
32
|
-
Eq = "eq"
|
|
33
|
-
}
|
|
34
|
-
export type ConfigurationParameter = {
|
|
35
|
-
codename: string;
|
|
36
|
-
label: string;
|
|
37
|
-
description: string;
|
|
38
|
-
unit: string;
|
|
39
|
-
type: DataTypeEnum;
|
|
40
|
-
options: {
|
|
41
|
-
value: number | string;
|
|
42
|
-
label: string;
|
|
43
|
-
}[];
|
|
44
|
-
multiple?: boolean;
|
|
45
|
-
required: boolean;
|
|
46
|
-
value: number | string | boolean | string[] | number[] | null;
|
|
47
|
-
};
|
|
48
|
-
export type RoiConfiguration = {
|
|
49
|
-
role: string;
|
|
50
|
-
type: Omit<ShapeType, 'pointer'>;
|
|
51
|
-
multiplicity: {
|
|
52
|
-
operator: OperatorEnum;
|
|
53
|
-
threshold: number;
|
|
54
|
-
};
|
|
55
|
-
parameters: ConfigurationParameter[];
|
|
56
|
-
};
|
|
57
|
-
export type Configuration = {
|
|
58
|
-
parameters: ConfigurationParameter[];
|
|
59
|
-
rois: RoiConfiguration[];
|
|
60
|
-
options?: {
|
|
61
|
-
hideForbiddenTools?: boolean;
|
|
62
|
-
description?: string;
|
|
63
|
-
};
|
|
64
|
-
};
|
|
65
|
-
export interface INotify {
|
|
66
|
-
info: (message: string) => void;
|
|
67
|
-
warn: (message: string) => void;
|
|
68
|
-
error: (message: string) => void;
|
|
69
|
-
success: (message: string) => void;
|
|
70
|
-
}
|
|
71
|
-
export type Metadata = {
|
|
72
|
-
parameters: OutputParameter[];
|
|
73
|
-
rois: {
|
|
74
|
-
id: string;
|
|
75
|
-
parameters: OutputParameter[];
|
|
76
|
-
name: string;
|
|
77
|
-
role: string;
|
|
78
|
-
}[];
|
|
79
|
-
};
|
|
80
|
-
export type OutputShapeRect = {
|
|
81
|
-
top: number;
|
|
82
|
-
left: number;
|
|
83
|
-
width: number;
|
|
84
|
-
height: number;
|
|
85
|
-
color: string;
|
|
86
|
-
};
|
|
87
|
-
export type OutputShapePolyline = {
|
|
88
|
-
points: {
|
|
89
|
-
x: number;
|
|
90
|
-
y: number;
|
|
91
|
-
}[];
|
|
92
|
-
top: number;
|
|
93
|
-
left: number;
|
|
94
|
-
color: string;
|
|
95
|
-
};
|
|
96
|
-
export type OutputShapePolygon = {
|
|
97
|
-
points: {
|
|
98
|
-
x: number;
|
|
99
|
-
y: number;
|
|
100
|
-
}[];
|
|
101
|
-
top: number;
|
|
102
|
-
left: number;
|
|
103
|
-
color: string;
|
|
104
|
-
};
|
|
105
|
-
export interface OutputParameter {
|
|
106
|
-
codename: string;
|
|
107
|
-
value: number | string | boolean | string[] | number[] | null;
|
|
108
|
-
}
|
|
109
|
-
export interface OutputRoi {
|
|
110
|
-
parameters: OutputParameter[];
|
|
111
|
-
type: ShapeType;
|
|
112
|
-
name: string;
|
|
113
|
-
role: string;
|
|
114
|
-
shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon;
|
|
115
|
-
}
|
|
116
|
-
export interface Output {
|
|
117
|
-
parameters: OutputParameter[];
|
|
118
|
-
rois: OutputRoi[];
|
|
119
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export var DataTypeEnum;
|
|
2
|
-
(function (DataTypeEnum) {
|
|
3
|
-
DataTypeEnum["Integer"] = "int";
|
|
4
|
-
DataTypeEnum["Float"] = "float";
|
|
5
|
-
DataTypeEnum["String"] = "string";
|
|
6
|
-
DataTypeEnum["Boolean"] = "bool";
|
|
7
|
-
})(DataTypeEnum || (DataTypeEnum = {}));
|
|
8
|
-
export var OperatorEnum;
|
|
9
|
-
(function (OperatorEnum) {
|
|
10
|
-
OperatorEnum["Lt"] = "lt";
|
|
11
|
-
OperatorEnum["Lte"] = "lte";
|
|
12
|
-
OperatorEnum["Gt"] = "gt";
|
|
13
|
-
OperatorEnum["Gte"] = "gte";
|
|
14
|
-
OperatorEnum["Eq"] = "eq";
|
|
15
|
-
})(OperatorEnum || (OperatorEnum = {}));
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { Configuration, ConfigurationParameter, INotify, Metadata, Shape, Shapes, ShapeType, ToolEnum } from './Types';
|
|
2
|
-
export declare const notify: INotify;
|
|
3
|
-
export declare const enableRois: (configuration: Configuration) => boolean;
|
|
4
|
-
export declare const enableMainMetadata: (configuration: Configuration) => boolean;
|
|
5
|
-
export declare const canDrawShape: (configuration: Configuration, shapeType: Omit<ToolEnum, ToolEnum.Pointer>, shapes: Shapes, notify: INotify, message: string) => boolean;
|
|
6
|
-
export declare const validateParametersForm: (parameters: ConfigurationParameter[], fields: Record<string, unknown>, setErrors: (errors: Record<string, string>) => void) => boolean;
|
|
7
|
-
export declare const validate: (configuration: Configuration, shapes: Shapes, metadata: Metadata, strings: Record<string, string>) => [boolean, string[]];
|
|
8
|
-
export declare const fabricShapeToOutputShape: (shape: Shape, type: ShapeType) => {
|
|
9
|
-
top: number;
|
|
10
|
-
left: number;
|
|
11
|
-
width: number;
|
|
12
|
-
height: number;
|
|
13
|
-
color: string;
|
|
14
|
-
points?: undefined;
|
|
15
|
-
} | {
|
|
16
|
-
points: any;
|
|
17
|
-
top: number;
|
|
18
|
-
left: number;
|
|
19
|
-
color: string;
|
|
20
|
-
width?: undefined;
|
|
21
|
-
height?: undefined;
|
|
22
|
-
};
|