@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
|
-
};
|