@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,150 +0,0 @@
|
|
1
|
-
import { formatString } from '../../Utils';
|
2
|
-
import { OperatorEnum, } from './Types';
|
3
|
-
export const notify = {
|
4
|
-
info: (message) => alert(`Info: ${message}`),
|
5
|
-
warn: (message) => alert(`Warning: ${message}`),
|
6
|
-
error: (message) => alert(`Error: ${message}`),
|
7
|
-
success: (message) => alert(`Success: ${message}`),
|
8
|
-
};
|
9
|
-
export const enableRois = (configuration) => {
|
10
|
-
return configuration.rois.length > 0;
|
11
|
-
};
|
12
|
-
export const enableMainMetadata = (configuration) => {
|
13
|
-
return configuration.parameters.length > 0;
|
14
|
-
};
|
15
|
-
export const canDrawShape = (configuration, shapeType, shapes, notify, message) => {
|
16
|
-
const rule = configuration.rois.find((roi) => roi.type === shapeType);
|
17
|
-
// no rule
|
18
|
-
if (!rule || !rule.multiplicity || Object.keys(rule.multiplicity).length === 0) {
|
19
|
-
return true;
|
20
|
-
}
|
21
|
-
const currentShapeCount = Object.values(shapes).filter((s) => s.type === shapeType).length;
|
22
|
-
let res = true;
|
23
|
-
switch (rule.multiplicity.operator) {
|
24
|
-
case OperatorEnum.Eq:
|
25
|
-
case OperatorEnum.Lte:
|
26
|
-
res = currentShapeCount + 1 <= rule.multiplicity.threshold;
|
27
|
-
break;
|
28
|
-
case OperatorEnum.Lt:
|
29
|
-
res = currentShapeCount + 1 < rule.multiplicity.threshold;
|
30
|
-
break;
|
31
|
-
default:
|
32
|
-
return true;
|
33
|
-
}
|
34
|
-
if (!res && notify) {
|
35
|
-
notify.warn(message);
|
36
|
-
}
|
37
|
-
return res;
|
38
|
-
};
|
39
|
-
export const validateParametersForm = (parameters, fields, setErrors) => {
|
40
|
-
const err = {};
|
41
|
-
parameters.forEach((p) => {
|
42
|
-
if (p.required && isEmpty(fields[p.codename])) {
|
43
|
-
err[p.codename] = 'requiredField';
|
44
|
-
}
|
45
|
-
});
|
46
|
-
if (Object.keys(err).length > 0) {
|
47
|
-
setErrors(err);
|
48
|
-
return false;
|
49
|
-
}
|
50
|
-
return true;
|
51
|
-
};
|
52
|
-
const isEmpty = (v) => {
|
53
|
-
if (typeof v === 'string') {
|
54
|
-
return v.length === 0;
|
55
|
-
}
|
56
|
-
if (Array.isArray(v)) {
|
57
|
-
return v.length === 0;
|
58
|
-
}
|
59
|
-
return v === null || v === undefined;
|
60
|
-
};
|
61
|
-
export const validate = (configuration, shapes, metadata, strings) => {
|
62
|
-
const errors = [];
|
63
|
-
// check main parameters
|
64
|
-
if (configuration.parameters.length) {
|
65
|
-
if (metadata.parameters.find((p) => { var _a; return ((_a = configuration.parameters.find((p2) => p2.codename === p.codename)) === null || _a === void 0 ? void 0 : _a.required) && isEmpty(p.value); })) {
|
66
|
-
errors.push(strings.missingRequiredValuesInMainParameters);
|
67
|
-
}
|
68
|
-
}
|
69
|
-
// check rois number
|
70
|
-
configuration.rois.forEach((roi) => {
|
71
|
-
// check multiplicity
|
72
|
-
if (roi.multiplicity) {
|
73
|
-
switch (roi.multiplicity.operator) {
|
74
|
-
case OperatorEnum.Eq:
|
75
|
-
if (Object.values(shapes).filter((s) => s.type === roi.type).length !== roi.multiplicity.threshold) {
|
76
|
-
errors.push(formatString(strings.shapesOfTypeShouldBeEqualToThreshold, {
|
77
|
-
type: String(roi.type),
|
78
|
-
threshold: roi.multiplicity.threshold,
|
79
|
-
}));
|
80
|
-
}
|
81
|
-
break;
|
82
|
-
case OperatorEnum.Lt:
|
83
|
-
if (Object.values(shapes).filter((s) => s.type === roi.type).length >= roi.multiplicity.threshold) {
|
84
|
-
errors.push(formatString(strings.shapesOfTypeShouldBeLessThanThreshold, {
|
85
|
-
type: String(roi.type),
|
86
|
-
threshold: roi.multiplicity.threshold,
|
87
|
-
}));
|
88
|
-
}
|
89
|
-
break;
|
90
|
-
case OperatorEnum.Lte:
|
91
|
-
if (Object.values(shapes).filter((s) => s.type === roi.type).length > roi.multiplicity.threshold) {
|
92
|
-
errors.push(formatString(strings.shapesOfTypeShouldBeLessThanOrEqualToThreshold, {
|
93
|
-
type: String(roi.type),
|
94
|
-
threshold: roi.multiplicity.threshold,
|
95
|
-
}));
|
96
|
-
}
|
97
|
-
break;
|
98
|
-
case OperatorEnum.Gt:
|
99
|
-
if (Object.values(shapes).filter((s) => s.type === roi.type).length <= roi.multiplicity.threshold) {
|
100
|
-
errors.push(formatString(strings.shapesOfTypeShouldBeGreaterThanThreshold, {
|
101
|
-
type: String(roi.type),
|
102
|
-
threshold: roi.multiplicity.threshold,
|
103
|
-
}));
|
104
|
-
}
|
105
|
-
break;
|
106
|
-
case OperatorEnum.Gte:
|
107
|
-
if (Object.values(shapes).filter((s) => s.type === roi.type).length < roi.multiplicity.threshold) {
|
108
|
-
errors.push(formatString(strings.shapesOfTypeShouldBeGreaterThanOrEqualToThreshold, {
|
109
|
-
type: String(roi.type),
|
110
|
-
threshold: roi.multiplicity.threshold,
|
111
|
-
}));
|
112
|
-
}
|
113
|
-
}
|
114
|
-
}
|
115
|
-
});
|
116
|
-
// check rois metadata
|
117
|
-
Object.keys(shapes).forEach((shapeId) => {
|
118
|
-
var _a, _b;
|
119
|
-
const type = shapes[shapeId].type;
|
120
|
-
const confParameters = (_b = (_a = configuration.rois.find((r) => r.type === type)) === null || _a === void 0 ? void 0 : _a.parameters) !== null && _b !== void 0 ? _b : [];
|
121
|
-
confParameters.forEach((p) => {
|
122
|
-
var _a, _b;
|
123
|
-
if (p.required &&
|
124
|
-
isEmpty((_b = (_a = metadata.rois.find((r) => r.id === shapeId)) === null || _a === void 0 ? void 0 : _a.parameters.find((p) => p.codename === p.codename)) === null || _b === void 0 ? void 0 : _b.value)) {
|
125
|
-
errors.push(strings.missingRequiredValuesInShapeParameters.replace('{id}', shapeId));
|
126
|
-
}
|
127
|
-
});
|
128
|
-
});
|
129
|
-
return [errors.length === 0, errors];
|
130
|
-
};
|
131
|
-
export const fabricShapeToOutputShape = (shape, type) => {
|
132
|
-
switch (type) {
|
133
|
-
case "rect" /* ToolEnum.Rectangle */:
|
134
|
-
return {
|
135
|
-
top: shape.top,
|
136
|
-
left: shape.left,
|
137
|
-
width: shape.width,
|
138
|
-
height: shape.height,
|
139
|
-
color: shape.stroke,
|
140
|
-
};
|
141
|
-
case "polygon" /* ToolEnum.Polygon */:
|
142
|
-
case "polyline" /* ToolEnum.Polyline */:
|
143
|
-
return {
|
144
|
-
points: shape.get('points'),
|
145
|
-
top: shape.top,
|
146
|
-
left: shape.left,
|
147
|
-
color: shape.stroke,
|
148
|
-
};
|
149
|
-
}
|
150
|
-
};
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import { Configuration, Output } from './Types';
|
2
|
-
export type RoiEditorProps = {
|
3
|
-
imageUrl: string;
|
4
|
-
configuration: Configuration;
|
5
|
-
onSubmit: (data: Output) => void;
|
6
|
-
initialData?: Output;
|
7
|
-
editorId: string;
|
8
|
-
};
|
9
|
-
declare const RoiEditor: React.FC<RoiEditorProps>;
|
10
|
-
export default RoiEditor;
|
@@ -1,78 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { useCallback, useContext, useState } from 'react';
|
3
|
-
import EditorProvider from '../../Providers/EditorProvider';
|
4
|
-
import { UiContext } from '../../Providers/UiProvider';
|
5
|
-
import { css, log } from '../../Utils';
|
6
|
-
import { Loader } from '../Loader';
|
7
|
-
import Canvas from './Canvas';
|
8
|
-
import { useCanvasSize } from './Hooks';
|
9
|
-
import styles from './RoiEditor.module.css';
|
10
|
-
import ShapesList from './ShapesList';
|
11
|
-
import Toolbar from './Toolbar';
|
12
|
-
import { fabricShapeToOutputShape, validate } from './Utils';
|
13
|
-
import Header from './Header';
|
14
|
-
// https://github.com/n-mazaheri/image-editor
|
15
|
-
const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData, editorId }) => {
|
16
|
-
var _a, _b, _c;
|
17
|
-
const { themeMode, enableLogs, pickerColors, strings, notify } = useContext(UiContext);
|
18
|
-
const { imageSize, canvasSize, wrapperRef, isReady } = useCanvasSize(imageUrl);
|
19
|
-
const [activeTool, setActiveTool] = useState("pointer" /* ToolEnum.Pointer */);
|
20
|
-
const [activeColor, setActiveColor] = useState(pickerColors[0]);
|
21
|
-
const [metadata, setMetadata] = useState({
|
22
|
-
parameters: [
|
23
|
-
...((_a = configuration.parameters.map((p) => {
|
24
|
-
const initial = initialData === null || initialData === void 0 ? void 0 : initialData.parameters.find((p) => p.codename === p.codename);
|
25
|
-
return {
|
26
|
-
codename: p.codename,
|
27
|
-
value: initial ? initial.value : p.value,
|
28
|
-
};
|
29
|
-
})) !== null && _a !== void 0 ? _a : []),
|
30
|
-
],
|
31
|
-
rois: [],
|
32
|
-
});
|
33
|
-
const [shapes, setShapes] = useState({});
|
34
|
-
const addShape = useCallback((id, type, shape) => setShapes(Object.assign(Object.assign({}, shapes), { [id]: { type, shape } })), [shapes]);
|
35
|
-
const addShapes = useCallback((s) => setShapes(Object.assign(Object.assign({}, shapes), s.reduce((r, s) => (Object.assign(Object.assign({}, r), { [s.id]: s })), {}))), [shapes]);
|
36
|
-
const removeShape = useCallback((id) => {
|
37
|
-
const newShapes = Object.assign({}, shapes);
|
38
|
-
delete newShapes[id];
|
39
|
-
setShapes(newShapes);
|
40
|
-
setMetadata(Object.assign(Object.assign({}, metadata), { rois: metadata.rois.filter((r) => r.id !== id) }));
|
41
|
-
}, [shapes, metadata]);
|
42
|
-
// TODO: go with percentage coordinates or pixel coordinates but relative to original image
|
43
|
-
const handleSubmit = useCallback(() => {
|
44
|
-
var _a, _b;
|
45
|
-
const [isValid, errors] = validate(configuration, shapes, metadata, strings);
|
46
|
-
if (isValid) {
|
47
|
-
onSubmit({
|
48
|
-
parameters: (_b = (_a = metadata.parameters) === null || _a === void 0 ? void 0 : _a.map((p) => ({ codename: p.codename, value: p.value }))) !== null && _b !== void 0 ? _b : [],
|
49
|
-
rois: Object.keys(shapes).map((shapeId) => {
|
50
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
51
|
-
return ({
|
52
|
-
parameters: (_c = (_b = (_a = metadata.rois
|
53
|
-
.find((r) => r.id === shapeId)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b.map((p) => ({ codename: p.codename, value: p.value }))) !== null && _c !== void 0 ? _c : [],
|
54
|
-
name: (_e = (_d = metadata.rois.find((r) => r.id === shapeId)) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : '',
|
55
|
-
role: (_g = (_f = metadata.rois.find((r) => r.id === shapeId)) === null || _f === void 0 ? void 0 : _f.role) !== null && _g !== void 0 ? _g : '',
|
56
|
-
type: shapes[shapeId].type,
|
57
|
-
shape: fabricShapeToOutputShape(shapes[shapeId].shape, shapes[shapeId].shape.type),
|
58
|
-
});
|
59
|
-
}),
|
60
|
-
});
|
61
|
-
}
|
62
|
-
else {
|
63
|
-
notify.error(strings.invalidSubmission + '\n' + errors.map((e) => `- ${e}`).join('\n'));
|
64
|
-
}
|
65
|
-
}, [onSubmit, configuration, shapes, metadata, strings, notify]);
|
66
|
-
log('info', enableLogs, 'react-cam-roi', 'active tool', activeTool);
|
67
|
-
log('info', enableLogs, 'react-cam-roi', 'canvas size', canvasSize);
|
68
|
-
log('info', enableLogs, 'react-cam-roi', 'metadata', metadata);
|
69
|
-
if (!isReady) {
|
70
|
-
return _jsx(Loader, {});
|
71
|
-
}
|
72
|
-
return (_jsx(EditorProvider, { editorId: editorId, hideForbiddenTools: (_c = (_b = configuration.options) === null || _b === void 0 ? void 0 : _b.hideForbiddenTools) !== null && _c !== void 0 ? _c : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, shapes: shapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: _jsxs("div", { style: { maxWidth: '100%', width: `${imageSize.width}px` }, ref: wrapperRef, children: [_jsx(Header, {}), _jsx(Toolbar, {}), _jsx("div", { className: css('canvasWrapper', styles, themeMode), style: {
|
73
|
-
width: `${canvasSize.width}px`,
|
74
|
-
height: `${canvasSize.height}px`,
|
75
|
-
backgroundImage: `url(${imageUrl})`,
|
76
|
-
}, children: _jsx(Canvas, { canvasSize: canvasSize, initialData: initialData }) }), _jsx(ShapesList, {})] }) }));
|
77
|
-
};
|
78
|
-
export default RoiEditor;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { FieldProps } from '../Types';
|
2
|
-
import { ShapeType } from './RoiEditor/Types';
|
3
|
-
type RoleFieldProps = Omit<FieldProps<string>, 'readonly' | 'label'> & {
|
4
|
-
shapeType: ShapeType;
|
5
|
-
};
|
6
|
-
declare const RoleField: React.FC<RoleFieldProps>;
|
7
|
-
export default RoleField;
|
@@ -1,35 +0,0 @@
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
-
var t = {};
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
-
t[p] = s[p];
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
-
t[p[i]] = s[p[i]];
|
9
|
-
}
|
10
|
-
return t;
|
11
|
-
};
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
13
|
-
import { useContext, useEffect } from 'react';
|
14
|
-
import { useEditorContext } from '../Providers/EditorProvider';
|
15
|
-
import { UiContext } from '../Providers/UiProvider';
|
16
|
-
import EnumField from './EnumField';
|
17
|
-
import { humanize } from '../Utils';
|
18
|
-
const RoleField = (_a) => {
|
19
|
-
var { onChange, value, required, shapeType } = _a, props = __rest(_a, ["onChange", "value", "required", "shapeType"]);
|
20
|
-
const { strings } = useContext(UiContext);
|
21
|
-
const { configuration } = useEditorContext();
|
22
|
-
const options = [];
|
23
|
-
(configuration.rois || []).filter(r => r.type === shapeType).forEach((r) => {
|
24
|
-
if (!options.includes(r.role)) {
|
25
|
-
options.push(r.role);
|
26
|
-
}
|
27
|
-
});
|
28
|
-
useEffect(() => {
|
29
|
-
if (required) {
|
30
|
-
onChange(options[0]);
|
31
|
-
}
|
32
|
-
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
33
|
-
return (_jsx(EnumField, Object.assign({ required: required, label: strings.role, value: value, onChange: (value) => onChange(value), options: options.map((o) => ({ value: o, label: humanize(o) })) }, props)));
|
34
|
-
};
|
35
|
-
export default RoleField;
|
@@ -1,61 +0,0 @@
|
|
1
|
-
/*
|
2
|
-
.text-field-wrapper {
|
3
|
-
margin-bottom: 2rem;
|
4
|
-
}
|
5
|
-
.text-field-wrapper-light {
|
6
|
-
}
|
7
|
-
.text-field-wrapper-dark {
|
8
|
-
}
|
9
|
-
*/
|
10
|
-
|
11
|
-
.text-field {
|
12
|
-
border-radius: 0.25rem;
|
13
|
-
box-sizing: border-box;
|
14
|
-
padding: 0.5rem;
|
15
|
-
width: 100%;
|
16
|
-
}
|
17
|
-
.text-field:focus-visible {
|
18
|
-
outline: none;
|
19
|
-
border: 1px solid #1976d2;
|
20
|
-
}
|
21
|
-
.text-field-light {
|
22
|
-
background-color: #fff;
|
23
|
-
color: #333;
|
24
|
-
border: 1px solid #ccc;
|
25
|
-
}
|
26
|
-
.text-field-dark {
|
27
|
-
background-color: #333;
|
28
|
-
border: 1px solid #666;
|
29
|
-
color: #fff;
|
30
|
-
}
|
31
|
-
.text-field-error {
|
32
|
-
border: 1px solid #d32f2f;
|
33
|
-
}
|
34
|
-
.text-field-label {
|
35
|
-
font-weight: bold;
|
36
|
-
display: block;
|
37
|
-
margin: 0 0 1rem 0;
|
38
|
-
}
|
39
|
-
/*
|
40
|
-
.text-fiel-label-light {
|
41
|
-
}
|
42
|
-
.text-field-label-dark {
|
43
|
-
}
|
44
|
-
*/
|
45
|
-
.text-field-label-error {
|
46
|
-
color: #d32f2f;
|
47
|
-
}
|
48
|
-
.text-field-helper-text {
|
49
|
-
font-style: italic;
|
50
|
-
font-size: 0.9rem;
|
51
|
-
margin-top: 0.5rem;
|
52
|
-
}
|
53
|
-
/*
|
54
|
-
.text-field-helper-text-light {
|
55
|
-
}
|
56
|
-
.text-field-helper-text-dark {
|
57
|
-
}
|
58
|
-
*/
|
59
|
-
.text-field-helper-text-error {
|
60
|
-
color: #d32f2f;
|
61
|
-
}
|
@@ -1,13 +0,0 @@
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { useContext } from 'react';
|
3
|
-
import { UiContext } from '../../Providers/UiProvider';
|
4
|
-
import { css } from '../../Utils';
|
5
|
-
import styles from './TextField.module.css';
|
6
|
-
const TextField = ({ onChange, type = 'text', value, label, helperText, error, required = false, readOnly = false, disabled = false, }) => {
|
7
|
-
const { themeMode, Typography } = useContext(UiContext);
|
8
|
-
const handleChange = (e) => {
|
9
|
-
onChange(e.target.value);
|
10
|
-
};
|
11
|
-
return (_jsxs("div", { className: css('text-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('text-field-label', styles, themeMode)} ${error ? css('text-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsx("input", { type: type, className: `${css('text-field', styles, themeMode)} ${error ? css('text-field-error', styles, null) : ''}`, onChange: handleChange, value: value, readOnly: readOnly, disabled: disabled }), helperText && (_jsx(Typography, { component: 'div', className: `${css('text-field-helper-text', styles, themeMode)} ${error ? css('text-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
|
12
|
-
};
|
13
|
-
export default TextField;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const Typography = ({ children, style = {}, className = '', component = 'span' }) => {
|
3
|
-
const Tag = component;
|
4
|
-
return _jsx(Tag, { className: className, style: style, children: children });
|
5
|
-
};
|
6
|
-
export default Typography;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const AnnotateIcon = ({ color = 'black', style = {} }) => {
|
3
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "M280-280h84l240-238-86-86-238 238v86Zm352-266 42-44q6-6 6-14t-6-14l-56-56q-6-6-14-6t-14 6l-44 42 86 86ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h168q13-36 43.5-58t68.5-22q38 0 68.5 22t43.5 58h168q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm280-590q13 0 21.5-8.5T510-820q0-13-8.5-21.5T480-850q-13 0-21.5 8.5T450-820q0 13 8.5 21.5T480-790ZM200-200v-560 560Z" }) }));
|
4
|
-
};
|
5
|
-
export default AnnotateIcon;
|
package/dist/Icons/CloseIcon.js
DELETED
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const CloseIcon = ({ color = 'black', style = {} }) => {
|
3
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" }) }));
|
4
|
-
};
|
5
|
-
export default CloseIcon;
|
package/dist/Icons/CopyIcon.d.ts
DELETED
package/dist/Icons/CopyIcon.js
DELETED
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const CopyIcon = ({ color = 'black', style = {} }) => {
|
3
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", width: "24px", viewBox: "0 -960 960 960", style: style, children: _jsx("path", { fill: color, d: "M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" }) }));
|
4
|
-
};
|
5
|
-
export default CopyIcon;
|
package/dist/Icons/DeleteIcon.js
DELETED
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const DeleteIcon = ({ color = 'black', style = {} }) => {
|
3
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" }) }));
|
4
|
-
};
|
5
|
-
export default DeleteIcon;
|
package/dist/Icons/EditIcon.d.ts
DELETED
package/dist/Icons/EditIcon.js
DELETED
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const EditIcon = ({ color = 'black', style = {} }) => {
|
3
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" }) }));
|
4
|
-
};
|
5
|
-
export default EditIcon;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const PointerIcon = ({ color = 'black', style = { height: '32px' } }) => {
|
3
|
-
return (_jsx("svg", { style: style, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 25 25", children: _jsx("path", { fill: color, d: "M13.3891,20.923l-3.1995-6.8869-3.47,4.8454V4.077l11.5606,9.0859h-5.9695l3.1679,6.7828-2.0893.9773h-.0002Z" }) }));
|
4
|
-
};
|
5
|
-
export default PointerIcon;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const PolygonIcon = ({ color = 'black', style = { height: '32px' } }) => {
|
3
|
-
return (_jsx("svg", { style: style, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 25 25", children: _jsx("path", { fill: color, d: "M17.3836,17.058v-2.9301h2.1705v4.341l-9.7673,4.341-7.5967-7.5968L6.5311,5.4459h4.341v2.1705h-2.9301l-3.1472,7.1627,5.4263,5.4263,7.1627-3.1472M22.8099,5.4459v2.1705h-3.2558v3.2558h-2.1705v-3.2558h-3.2558v-2.1705h3.2558v-3.2558h2.1705v3.2558h3.2558Z" }) }));
|
4
|
-
};
|
5
|
-
export default PolygonIcon;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
const PolylineIcon = ({ color = 'black', style = { height: '32px' } }) => {
|
3
|
-
return (_jsxs("svg", { style: style, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 25 25", children: [_jsx("polygon", { fill: color, points: "20.5216 8.6492 20.5216 5.4658 18.3992 5.4658 18.3992 8.6492 15.2159 8.6492 15.2159 10.7715 18.3992 10.7715 18.3992 13.955 20.5216 13.955 20.5216 10.7715 23.705 10.7715 23.705 8.6492 20.5216 8.6492" }), _jsx("polygon", { fill: color, points: "12.3027 17.2 7.011 14.4951 7.011 11.5067 8.9251 9.2929 13.103 9.2929 13.103 3.577 7.3871 3.577 7.3871 7.7797 4.7908 10.7826 1.295 10.7826 1.295 16.4985 6.2004 16.4985 12.3027 19.6175 12.3027 21.423 18.0186 21.423 18.0186 15.7071 12.3027 15.7071 12.3027 17.2" })] }));
|
4
|
-
};
|
5
|
-
export default PolylineIcon;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const RectangleIcon = ({ color = 'black', style = { height: '32px' } }) => {
|
3
|
-
return (_jsx("svg", { style: style, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 25 25", children: _jsx("path", { fill: color, d: "M19.5541,7.0738h3.2558v2.1705h-3.2558v3.2558h-2.1705v-3.2558h-3.2558v-2.1705h3.2558v-3.2558h2.1705v3.2558M17.3836,19.0115v-3.2558h2.1705v5.4263H2.1901V7.0738h8.682v2.1705h-6.5115v9.7673h13.023,0Z" }) }));
|
4
|
-
};
|
5
|
-
export default RectangleIcon;
|
package/dist/Icons/SaveIcon.d.ts
DELETED
package/dist/Icons/SaveIcon.js
DELETED
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const SaveIcon = ({ color = 'black', style = {} }) => {
|
3
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z" }) }));
|
4
|
-
};
|
5
|
-
export default SaveIcon;
|
package/dist/Icons/SelectIcon.js
DELETED
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const SelectIcon = ({ color = 'black', style = {} }) => {
|
3
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "m320-410 79-110h170L320-716v306ZM551-80 406-392 240-160v-720l560 440H516l144 309-109 51ZM399-520Z" }) }));
|
4
|
-
};
|
5
|
-
export default SelectIcon;
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import { PropsWithChildren } from 'react';
|
2
|
-
import { Configuration, Metadata, Shape, Shapes, ShapeType, ToolEnum } from '../Components/RoiEditor/Types';
|
3
|
-
type EditorContextType = {
|
4
|
-
hideForbiddenTools: boolean;
|
5
|
-
activeTool: ToolEnum;
|
6
|
-
setActiveTool: (tool: ToolEnum) => void;
|
7
|
-
activeColor: string;
|
8
|
-
setActiveColor: (color: string) => void;
|
9
|
-
shapes: Shapes;
|
10
|
-
addShape: (id: string, type: ShapeType, shape: Shape) => void;
|
11
|
-
addShapes: (shapes: {
|
12
|
-
id: string;
|
13
|
-
type: ShapeType;
|
14
|
-
shape: Shape;
|
15
|
-
}[]) => void;
|
16
|
-
removeShape: (id: string) => void;
|
17
|
-
configuration: Configuration;
|
18
|
-
metadata: Metadata;
|
19
|
-
setMetadata: (data: Metadata) => void;
|
20
|
-
onSubmit: () => void;
|
21
|
-
editorId: string;
|
22
|
-
};
|
23
|
-
export declare const EditorContext: import("react").Context<EditorContextType | undefined>;
|
24
|
-
export declare function useEditorContext(): EditorContextType;
|
25
|
-
declare const EditorProvider: ({ children, editorId, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
|
26
|
-
export default EditorProvider;
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { createContext, useContext } from 'react';
|
3
|
-
export const EditorContext = createContext(undefined); // eslint-disable-line
|
4
|
-
export function useEditorContext() {
|
5
|
-
const context = useContext(EditorContext);
|
6
|
-
if (context === undefined) {
|
7
|
-
throw new Error('useEditorContext must be within a EditorProvider');
|
8
|
-
}
|
9
|
-
return context;
|
10
|
-
}
|
11
|
-
const EditorProvider = ({ children, editorId, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }) => {
|
12
|
-
return (_jsx(EditorContext.Provider, { value: {
|
13
|
-
editorId,
|
14
|
-
hideForbiddenTools,
|
15
|
-
activeTool,
|
16
|
-
setActiveTool,
|
17
|
-
activeColor,
|
18
|
-
setActiveColor,
|
19
|
-
shapes,
|
20
|
-
addShape,
|
21
|
-
addShapes,
|
22
|
-
removeShape,
|
23
|
-
configuration,
|
24
|
-
metadata,
|
25
|
-
setMetadata,
|
26
|
-
onSubmit,
|
27
|
-
}, children: children }));
|
28
|
-
};
|
29
|
-
export default EditorProvider;
|