@abidibo/react-cam-roi 0.2.8 → 0.4.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 CHANGED
@@ -195,6 +195,7 @@ export type Configuration = {
195
195
  options: {
196
196
  hideForbiddenTools?: boolean // hide tools controllers for shapes that cannot be drawn
197
197
  description?: string // optional initial text shown in the editor
198
+ viewMainParameters?: boolean // show main parameters readonly form
198
199
  }
199
200
  }
200
201
 
@@ -248,6 +249,7 @@ export const configuration: Configuration = {
248
249
  options?: {
249
250
  hideForbiddenTools?: boolean,
250
251
  description?: string,
252
+ viewMainParameters?: boolean
251
253
  }
252
254
  }
253
255
  ```
@@ -664,6 +666,15 @@ There are components that cannot be overridden. But still you can use classes to
664
666
  - `react-cam-roi-top-bar-light`
665
667
  - `react-cam-roi-top-bar-dark`
666
668
 
669
+ #### Main parameters view
670
+
671
+ - `react-cam-roi-main-parameters-view`
672
+ - `react-cam-roi-main-parameters-view-light`
673
+ - `react-cam-roi-main-parameters-view-dark`
674
+ - `react-cam-roi-main-parameters-button`
675
+ - `react-cam-roi-main-parameters-button-light`
676
+ - `react-cam-roi-main-parameters-button-dark`
677
+
667
678
  #### Canvas wrapper
668
679
 
669
680
  - `react-cam-roi-canvas-wrapper`
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  .button-dark {
22
- background-color: #383838;
22
+ background-color: #474747;
23
23
  color: white;
24
24
  }
25
25
 
@@ -5,3 +5,20 @@
5
5
  justify-content: flex-end;
6
6
  margin-bottom: .5rem;
7
7
  }
8
+
9
+ .main-parameters-view {
10
+ padding: 1rem;
11
+ }
12
+ .main-parameters-view-light {
13
+ background-color: #eee;
14
+ }
15
+ .main-parameters-view-dark {
16
+ background-color: #333;
17
+ color: #fff;
18
+ }
19
+
20
+ .main-parameters-button {
21
+ display: flex;
22
+ justify-content: flex-end;
23
+ }
24
+
@@ -1,2 +1,2 @@
1
- .IconButton-module_icon-button__T7a-e{border-radius:50%;cursor:pointer;display:inline-block;line-height:0;padding:.5rem}.IconButton-module_icon-button-light__ZNyjL:hover{background-color:rgba(0,0,0,.1)}.IconButton-module_icon-button-dark__nwcCW:hover{background-color:hsla(0,0%,100%,.1)}.IconButton-module_icon-button-disabled__a9y4V{cursor:not-allowed;opacity:.5}.Modal-module_modal-overlay__AX73T{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9000}.Modal-module_modal-overlay-light__XGI4c{background-color:hsla(0,0%,100%,.7)}.Modal-module_modal-overlay-dark__o-3S1{background-color:rgba(0,0,0,.7)}.Modal-module_modal__JutQb{border-radius:5px;max-height:80%;max-width:80%;overflow:auto;padding:20px}.Modal-module_modal__JutQb:focus-visible{outline:none}.Modal-module_modal-light__tJ5iM{background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.2);color:#000}.Modal-module_modal-dark__ToNtQ{background-color:#333;box-shadow:0 0 10px hsla(0,0%,100%,.2);color:#fff}.Modal-module_modal-xs__ZpG0m{width:400px}.Modal-module_modal-sm__ZR3WM{width:600px}.Modal-module_modal-md__cekju{width:800px}.Modal-module_modal-lg__As-E0{width:1000px}.Modal-module_modal-xl__tBTZS{width:1200px}.Modal-module_modal-header__tayxk{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.Modal-module_modal-title__0SHNZ{font-size:1.5rem;font-weight:700;margin:0}.Modal-module_modal-title-light__txH-X{color:#000}.Modal-module_modal-title-dark__72qJi{color:#fff}.Modal-module_modal-footer__XwwRD{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}.TextField-module_text-field__i1lgc{border-radius:.25rem;box-sizing:border-box;padding:.5rem;width:100%}.TextField-module_text-field__i1lgc:focus-visible{border:1px solid #1976d2;outline:none}.TextField-module_text-field-light__F5sz2{background-color:#fff;border:1px solid #ccc;color:#333}.TextField-module_text-field-dark__mGGSs{background-color:#333;border:1px solid #666;color:#fff}.TextField-module_text-field-error__6cqOv{border:1px solid #d32f2f}.TextField-module_text-field-label__Jjdem{display:block;font-weight:700;margin:0 0 1rem}.TextField-module_text-field-label-error__FTZnh{color:#d32f2f}.TextField-module_text-field-helper-text__E9vmk{font-size:.9rem;font-style:italic;margin-top:.5rem}.TextField-module_text-field-helper-text-error__48hRk{color:#d32f2f}.NumberField-module_number-field__Sg83r{border-radius:.25rem;box-sizing:border-box;padding:.5rem;width:100%}.NumberField-module_number-field__Sg83r:focus-visible{border:1px solid #1976d2;outline:none}.NumberField-module_number-field-light__-13Kl{background-color:#fff;border:1px solid #ccc;color:#333}.NumberField-module_number-field-dark__6br67{background-color:#333;border:1px solid #666;color:#fff}.NumberField-module_number-field-error__MuNs5{border:1px solid #d32f2f}.NumberField-module_number-field-label__-E8z7{display:block;font-weight:700;margin:0 0 1rem}.NumberField-module_number-field-label-error__nDs97{color:#d32f2f}.NumberField-module_number-field-helper-text__UNMnr{font-size:.9rem;font-style:italic;padding-top:.5rem}.NumberField-module_number-field-helper-text-error__QW1b-{color:#d32f2f}.BoolField-module_bool-field__-Qg7I{border-radius:.25rem;box-sizing:border-box;padding:.5rem}.BoolField-module_bool-field__-Qg7I:focus-visible{border:1px solid #1976d2;outline:none}.BoolField-module_bool-field-light__CHITs{background-color:#fff;border:1px solid #ccc;color:#333}.BoolField-module_bool-field-dark__gy9uQ{background-color:#333;border:1px solid #666;color:#fff}.BoolField-module_bool-field-error__qJV-E{border:1px solid #d32f2f}.BoolField-module_bool-field-label__LZbjy{display:block;font-weight:700;margin:0 0 1rem}.BoolField-module_bool-field-label-error__gBzdk{color:#d32f2f}.BoolField-module_bool-field-helper-text__fH8fC{font-size:.9rem;font-style:italic;margin-top:.5rem}.BoolField-module_bool-field-helper-text-error__McdWn{color:#d32f2f}.EnumField-module_enum-field__szaEn{border-radius:.25rem;box-sizing:border-box;padding:.5rem;width:100%}.EnumField-module_enum-field__szaEn:focus-visible{border:1px solid #1976d2;outline:none}.EnumField-module_enum-field-light__vWmLt{background-color:#fff;border:1px solid #ccc;color:#333}.EnumField-module_enum-field-dark__fDZ4K{background-color:#333;border:1px solid #666;color:#fff}.EnumField-module_enum-field-error__Kagoh{border:1px solid #d32f2f}.EnumField-module_enum-field-label__o1dg0{display:block;font-weight:700;margin:0 0 1rem}.EnumField-module_enum-field-label-error__O2ayN{color:#d32f2f}.EnumField-module_enum-field-helper-text__nRzmi{font-size:.9rem;font-style:italic;margin-top:.5rem}.EnumField-module_enum-field-helper-text-error__ukfl1{color:#d32f2f}.Button-module_button__MSSZa{align-items:center;border:none;border-radius:4px;color:#000;cursor:pointer;display:flex;font-size:16px;gap:.5rem;margin:4px 2px;padding:.5rem 1rem;text-align:center;text-decoration:none}.Button-module_button-light__u6BIN{background-color:#c7c7c7;color:#000}.Button-module_button-dark__3wtFc{background-color:#383838;color:#fff}.Button-module_button-disabled__s9jaY{cursor:not-allowed;opacity:.5}.Loader-module_loader__6JyG7{animation:Loader-module_spin__ZcV1b 1s linear infinite;border-radius:50%;height:40px;width:40px}.Loader-module_loader-light__WlXKM{border:10px solid #f3f3f3;border-top-color:#3498db}.Loader-module_loader-dark__mW1w5{border:10px solid #333;border-top-color:#3498db}@keyframes Loader-module_spin__ZcV1b{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Header-module_header__1FVtV{align-items:flex-start;display:flex;justify-content:space-between;padding:.5rem}.Header-module_header-light__Vqkzy{background-color:#ddd}.Header-module_header-dark__IuBJ1{background-color:#222}.Header-module_header-info__7BSAi{padding:.5rem}.Header-module_header-info-light__u9GgZ{background-color:#ddd;color:#000}.Header-module_header-info-dark__JWxIy{background-color:#222;color:#fff}.RoiEditor-module_canvas-wrapper__q0gQg{background-repeat:no-repeat;background-size:contain;position:relative}.ParametersModalForm-module_form__WXebJ{display:flex;flex-direction:column;gap:1rem}.ShapesList-module_shapes-table__sx5Xp{border-collapse:collapse;width:100%}.ShapesList-module_shapes-table__sx5Xp tr{cursor:pointer}.ShapesList-module_shapes-table__sx5Xp th{padding:.8rem .3rem;text-align:left}.ShapesList-module_shapes-table__sx5Xp td{padding:0 .3rem}.ShapesList-module_shapes-table__sx5Xp tr td:last-child,.ShapesList-module_shapes-table__sx5Xp tr th:last-child{text-align:right}.ShapesList-module_shapes-table-light__TbtKn{background-color:#eee;color:#000}.ShapesList-module_shapes-table-dark__siyhV{background-color:#333;color:#fff}.ShapesList-module_shapes-row-selected-light__-0gaE{background-color:#ccc}.ShapesList-module_shapes-row-selected-dark__bGR3a{background-color:#666}.ShapesList-module_shapes-row-even-light__2eUZX{background-color:#f7f7f7}.ShapesList-module_shapes-row-even-dark__eyECv{background-color:#444}.ShapesList-module_shapes-row-odd-light__vZzPj{background-color:#f0f0f0}.ShapesList-module_shapes-row-odd-dark__TWGAu{background-color:#555}.ShapesList-module_shapesTableName__9Q6i1{align-items:center;display:flex}.ShapesList-module_shapesTableColor__Iyd33{border:1px solid #000;border-radius:50%;box-sizing:border-box;display:inline-block;height:24px;margin-right:.5rem;width:24px}.ColorPicker-module_colorpickerWrapper__qONC-{display:flex;flex-wrap:nowrap;gap:.2rem}.ColorPicker-module_colorpicker-button__Tvdcw{border-radius:50%;box-sizing:border-box;cursor:pointer;height:24px;width:24px}.ColorPicker-module_colorpicker-button-active__zwhHp{border:2px solid red}.Toolbar-module_toolbar__ywNcv{align-items:center;display:flex;padding:.5rem}.Toolbar-module_toolbar-light__aJtaH{background-color:#eee}.Toolbar-module_toolbar-dark__9iO4U{background-color:#333}.Toolbar-module_toolbar-helper__DBw3v{padding:.5rem}.Toolbar-module_toolbar-helper-light__Z4PLG{background-color:#f7f7f7;color:#000}.Toolbar-module_toolbar-helper-dark__AEXUy{background-color:#222;color:#fff}.Toolbar-module_toolbar-spacer__qPxmN{height:20px;margin:0 .5rem;width:1px}.Toolbar-module_toolbar-spacer-light__2CNYP{background-color:#ccc}.Toolbar-module_toolbar-spacer-dark__cW0Rj{background-color:#555}.TopBar-module_top-bar__9oCUR{align-items:center;display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:.5rem}
1
+ .IconButton-module_icon-button__T7a-e{border-radius:50%;cursor:pointer;display:inline-block;line-height:0;padding:.5rem}.IconButton-module_icon-button-light__ZNyjL:hover{background-color:rgba(0,0,0,.1)}.IconButton-module_icon-button-dark__nwcCW:hover{background-color:hsla(0,0%,100%,.1)}.IconButton-module_icon-button-disabled__a9y4V{cursor:not-allowed;opacity:.5}.Modal-module_modal-overlay__AX73T{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9000}.Modal-module_modal-overlay-light__XGI4c{background-color:hsla(0,0%,100%,.7)}.Modal-module_modal-overlay-dark__o-3S1{background-color:rgba(0,0,0,.7)}.Modal-module_modal__JutQb{border-radius:5px;max-height:80%;max-width:80%;overflow:auto;padding:20px}.Modal-module_modal__JutQb:focus-visible{outline:none}.Modal-module_modal-light__tJ5iM{background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.2);color:#000}.Modal-module_modal-dark__ToNtQ{background-color:#333;box-shadow:0 0 10px hsla(0,0%,100%,.2);color:#fff}.Modal-module_modal-xs__ZpG0m{width:400px}.Modal-module_modal-sm__ZR3WM{width:600px}.Modal-module_modal-md__cekju{width:800px}.Modal-module_modal-lg__As-E0{width:1000px}.Modal-module_modal-xl__tBTZS{width:1200px}.Modal-module_modal-header__tayxk{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.Modal-module_modal-title__0SHNZ{font-size:1.5rem;font-weight:700;margin:0}.Modal-module_modal-title-light__txH-X{color:#000}.Modal-module_modal-title-dark__72qJi{color:#fff}.Modal-module_modal-footer__XwwRD{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}.TextField-module_text-field__i1lgc{border-radius:.25rem;box-sizing:border-box;padding:.5rem;width:100%}.TextField-module_text-field__i1lgc:focus-visible{border:1px solid #1976d2;outline:none}.TextField-module_text-field-light__F5sz2{background-color:#fff;border:1px solid #ccc;color:#333}.TextField-module_text-field-dark__mGGSs{background-color:#333;border:1px solid #666;color:#fff}.TextField-module_text-field-error__6cqOv{border:1px solid #d32f2f}.TextField-module_text-field-label__Jjdem{display:block;font-weight:700;margin:0 0 1rem}.TextField-module_text-field-label-error__FTZnh{color:#d32f2f}.TextField-module_text-field-helper-text__E9vmk{font-size:.9rem;font-style:italic;margin-top:.5rem}.TextField-module_text-field-helper-text-error__48hRk{color:#d32f2f}.NumberField-module_number-field__Sg83r{border-radius:.25rem;box-sizing:border-box;padding:.5rem;width:100%}.NumberField-module_number-field__Sg83r:focus-visible{border:1px solid #1976d2;outline:none}.NumberField-module_number-field-light__-13Kl{background-color:#fff;border:1px solid #ccc;color:#333}.NumberField-module_number-field-dark__6br67{background-color:#333;border:1px solid #666;color:#fff}.NumberField-module_number-field-error__MuNs5{border:1px solid #d32f2f}.NumberField-module_number-field-label__-E8z7{display:block;font-weight:700;margin:0 0 1rem}.NumberField-module_number-field-label-error__nDs97{color:#d32f2f}.NumberField-module_number-field-helper-text__UNMnr{font-size:.9rem;font-style:italic;padding-top:.5rem}.NumberField-module_number-field-helper-text-error__QW1b-{color:#d32f2f}.BoolField-module_bool-field__-Qg7I{border-radius:.25rem;box-sizing:border-box;padding:.5rem}.BoolField-module_bool-field__-Qg7I:focus-visible{border:1px solid #1976d2;outline:none}.BoolField-module_bool-field-light__CHITs{background-color:#fff;border:1px solid #ccc;color:#333}.BoolField-module_bool-field-dark__gy9uQ{background-color:#333;border:1px solid #666;color:#fff}.BoolField-module_bool-field-error__qJV-E{border:1px solid #d32f2f}.BoolField-module_bool-field-label__LZbjy{display:block;font-weight:700;margin:0 0 1rem}.BoolField-module_bool-field-label-error__gBzdk{color:#d32f2f}.BoolField-module_bool-field-helper-text__fH8fC{font-size:.9rem;font-style:italic;margin-top:.5rem}.BoolField-module_bool-field-helper-text-error__McdWn{color:#d32f2f}.EnumField-module_enum-field__szaEn{border-radius:.25rem;box-sizing:border-box;padding:.5rem;width:100%}.EnumField-module_enum-field__szaEn:focus-visible{border:1px solid #1976d2;outline:none}.EnumField-module_enum-field-light__vWmLt{background-color:#fff;border:1px solid #ccc;color:#333}.EnumField-module_enum-field-dark__fDZ4K{background-color:#333;border:1px solid #666;color:#fff}.EnumField-module_enum-field-error__Kagoh{border:1px solid #d32f2f}.EnumField-module_enum-field-label__o1dg0{display:block;font-weight:700;margin:0 0 1rem}.EnumField-module_enum-field-label-error__O2ayN{color:#d32f2f}.EnumField-module_enum-field-helper-text__nRzmi{font-size:.9rem;font-style:italic;margin-top:.5rem}.EnumField-module_enum-field-helper-text-error__ukfl1{color:#d32f2f}.Button-module_button__MSSZa{align-items:center;border:none;border-radius:4px;color:#000;cursor:pointer;display:flex;font-size:16px;gap:.5rem;margin:4px 2px;padding:.5rem 1rem;text-align:center;text-decoration:none}.Button-module_button-light__u6BIN{background-color:#c7c7c7;color:#000}.Button-module_button-dark__3wtFc{background-color:#474747;color:#fff}.Button-module_button-disabled__s9jaY{cursor:not-allowed;opacity:.5}.Loader-module_loader__6JyG7{animation:Loader-module_spin__ZcV1b 1s linear infinite;border-radius:50%;height:40px;width:40px}.Loader-module_loader-light__WlXKM{border:10px solid #f3f3f3;border-top-color:#3498db}.Loader-module_loader-dark__mW1w5{border:10px solid #333;border-top-color:#3498db}@keyframes Loader-module_spin__ZcV1b{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Header-module_header__1FVtV{align-items:flex-start;display:flex;justify-content:space-between;padding:.5rem}.Header-module_header-light__Vqkzy{background-color:#ddd}.Header-module_header-dark__IuBJ1{background-color:#222}.Header-module_header-info__7BSAi{padding:.5rem}.Header-module_header-info-light__u9GgZ{background-color:#ddd;color:#000}.Header-module_header-info-dark__JWxIy{background-color:#222;color:#fff}.RoiEditor-module_canvas-wrapper__q0gQg{background-repeat:no-repeat;background-size:contain;position:relative}.ParametersModalForm-module_form__WXebJ{display:flex;flex-direction:column;gap:1rem}.ShapesList-module_shapes-table__sx5Xp{border-collapse:collapse;width:100%}.ShapesList-module_shapes-table__sx5Xp tr{cursor:pointer}.ShapesList-module_shapes-table__sx5Xp th{padding:.8rem .3rem;text-align:left}.ShapesList-module_shapes-table__sx5Xp td{padding:0 .3rem}.ShapesList-module_shapes-table__sx5Xp tr td:last-child,.ShapesList-module_shapes-table__sx5Xp tr th:last-child{text-align:right}.ShapesList-module_shapes-table-light__TbtKn{background-color:#eee;color:#000}.ShapesList-module_shapes-table-dark__siyhV{background-color:#333;color:#fff}.ShapesList-module_shapes-row-selected-light__-0gaE{background-color:#ccc}.ShapesList-module_shapes-row-selected-dark__bGR3a{background-color:#666}.ShapesList-module_shapes-row-even-light__2eUZX{background-color:#f7f7f7}.ShapesList-module_shapes-row-even-dark__eyECv{background-color:#444}.ShapesList-module_shapes-row-odd-light__vZzPj{background-color:#f0f0f0}.ShapesList-module_shapes-row-odd-dark__TWGAu{background-color:#555}.ShapesList-module_shapesTableName__9Q6i1{align-items:center;display:flex}.ShapesList-module_shapesTableColor__Iyd33{border:1px solid #000;border-radius:50%;box-sizing:border-box;display:inline-block;height:24px;margin-right:.5rem;width:24px}.ColorPicker-module_colorpickerWrapper__qONC-{display:flex;flex-wrap:nowrap;gap:.2rem}.ColorPicker-module_colorpicker-button__Tvdcw{border-radius:50%;box-sizing:border-box;cursor:pointer;height:24px;width:24px}.ColorPicker-module_colorpicker-button-active__zwhHp{border:2px solid red}.Toolbar-module_toolbar__ywNcv{align-items:center;display:flex;padding:.5rem}.Toolbar-module_toolbar-light__aJtaH{background-color:#eee}.Toolbar-module_toolbar-dark__9iO4U{background-color:#333}.Toolbar-module_toolbar-helper__DBw3v{padding:.5rem}.Toolbar-module_toolbar-helper-light__Z4PLG{background-color:#f7f7f7;color:#000}.Toolbar-module_toolbar-helper-dark__AEXUy{background-color:#222;color:#fff}.Toolbar-module_toolbar-spacer__qPxmN{height:20px;margin:0 .5rem;width:1px}.Toolbar-module_toolbar-spacer-light__2CNYP{background-color:#ccc}.Toolbar-module_toolbar-spacer-dark__cW0Rj{background-color:#555}.TopBar-module_top-bar__9oCUR{align-items:center;display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:.5rem}.TopBar-module_main-parameters-view__f-0SX{padding:1rem}.TopBar-module_main-parameters-view-light__o-dbi{background-color:#eee}.TopBar-module_main-parameters-view-dark__FnEnj{background-color:#333;color:#fff}.TopBar-module_main-parameters-button__9JX--{display:flex;justify-content:flex-end}
2
2
  /*# sourceMappingURL=index.cjs.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["IconButton.module.css","Modal.module.css","TextField.module.css","NumberField.module.css","BoolField.module.css","EnumField.module.css","Button.module.css","Loader.module.css","Header.module.css","RoiEditor.module.css","ParametersModalForm.module.css","ShapesList.module.css","ColorPicker.module.css","Toolbar.module.css","TopBar.module.css"],"names":[],"mappings":"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","file":"index.cjs.css","sourcesContent":[".icon-button {\n display: inline-block;\n border-radius: 50%;\n line-height: 0;\n padding: 0.5rem;\n cursor: pointer;\n}\n\n.icon-button-light:hover {\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.icon-button-dark:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.icon-button-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n",".modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9000;\n}\n\n.modal-overlay-light {\n background-color: rgba(255, 255, 255, 0.7);\n}\n\n.modal-overlay-dark {\n background-color: rgba(0, 0, 0, 0.7);\n}\n\n.modal {\n max-width: 80%;\n max-height: 80%;\n overflow: auto;\n padding: 20px;\n border-radius: 5px;\n}\n\n.modal:focus-visible {\n outline: none;\n}\n\n.modal-light {\n background-color: #fff;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n color: #000;\n}\n\n.modal-dark {\n background-color: #333;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);\n color: #fff;\n}\n\n.modal-xs {\n width: 400px;\n}\n\n.modal-sm {\n width: 600px;\n}\n\n.modal-md {\n width: 800px;\n}\n\n.modal-lg {\n width: 1000px;\n}\n\n.modal-xl {\n width: 1200px;\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.modal-title {\n font-size: 1.5rem;\n font-weight: bold;\n margin: 0;\n}\n\n.modal-title-light {\n color: #000;\n}\n\n.modal-title-dark {\n color: #fff;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-end;\n margin-top: 1rem;\n gap: .5rem;\n}\n\n","/*\n.text-field-wrapper {\n margin-bottom: 2rem;\n}\n.text-field-wrapper-light {\n}\n.text-field-wrapper-dark {\n}\n*/\n\n.text-field {\n border-radius: 0.25rem;\n box-sizing: border-box;\n padding: 0.5rem;\n width: 100%;\n}\n.text-field:focus-visible {\n outline: none;\n border: 1px solid #1976d2;\n}\n.text-field-light {\n background-color: #fff;\n color: #333;\n border: 1px solid #ccc;\n}\n.text-field-dark {\n background-color: #333;\n border: 1px solid #666;\n color: #fff;\n}\n.text-field-error {\n border: 1px solid #d32f2f;\n}\n.text-field-label {\n font-weight: bold;\n display: block;\n margin: 0 0 1rem 0;\n}\n/*\n.text-fiel-label-light {\n}\n.text-field-label-dark {\n}\n*/\n.text-field-label-error {\n color: #d32f2f;\n}\n.text-field-helper-text {\n font-style: italic;\n font-size: 0.9rem;\n margin-top: 0.5rem;\n}\n/*\n.text-field-helper-text-light {\n}\n.text-field-helper-text-dark {\n}\n*/\n.text-field-helper-text-error {\n color: #d32f2f;\n}\n","/*\n.number-field-wrapper {\n}\n.number-field-wrapper-light {\n}\n.number-field-wrapper-dark {\n}\n*/\n\n.number-field {\n border-radius: 0.25rem;\n box-sizing: border-box;\n padding: 0.5rem;\n width: 100%;\n}\n.number-field:focus-visible {\n outline: none;\n border: 1px solid #1976d2;\n}\n.number-field-light {\n background-color: #fff;\n color: #333;\n border: 1px solid #ccc;\n}\n.number-field-dark {\n background-color: #333;\n border: 1px solid #666;\n color: #fff;\n}\n.number-field-error {\n border: 1px solid #d32f2f;\n}\n.number-field-label {\n font-weight: bold;\n display: block;\n margin: 0 0 1rem 0;\n}\n/*\n.text-fiel-label-light {\n}\n.number-field-label-dark {\n}\n*/\n.number-field-label-error {\n color: #d32f2f;\n}\n.number-field-helper-text {\n font-style: italic;\n font-size: 0.9rem;\n padding-top: 0.5rem;\n}\n/*\n.number-field-helper-text-light {\n}\n.number-field-helper-text-dark {\n}\n*/\n.number-field-helper-text-error {\n color: #d32f2f;\n}\n","/*\n.bool-field-wrapper {\n margin-bottom: 2rem;\n}\n.bool-field-wrapper-light {\n}\n.bool-field-wrapper-dark {\n}\n*/\n\n.bool-field {\n border-radius: 0.25rem;\n box-sizing: border-box;\n padding: 0.5rem;\n}\n.bool-field:focus-visible {\n outline: none;\n border: 1px solid #1976d2;\n}\n.bool-field-light {\n background-color: #fff;\n color: #333;\n border: 1px solid #ccc;\n}\n.bool-field-dark {\n background-color: #333;\n border: 1px solid #666;\n color: #fff;\n}\n.bool-field-error {\n border: 1px solid #d32f2f;\n}\n.bool-field-label {\n font-weight: bold;\n display: block;\n margin: 0 0 1rem 0;\n}\n/*\n.text-fiel-label-light {\n}\n.bool-field-label-dark {\n}\n*/\n.bool-field-label-error {\n color: #d32f2f;\n}\n.bool-field-helper-text {\n font-style: italic;\n font-size: 0.9rem;\n margin-top: 0.5rem;\n}\n/*\n.bool-field-helper-text-light {\n}\n.bool-field-helper-text-dark {\n}\n*/\n.bool-field-helper-text-error {\n color: #d32f2f;\n}\n","/*\n.enum-field-wrapper {\n margin-bottom: 2rem;\n}\n.enum-field-wrapper-light {\n}\n.enum-field-wrapper-dark {\n}\n*/\n\n.enum-field {\n border-radius: 0.25rem;\n box-sizing: border-box;\n padding: 0.5rem;\n width: 100%;\n}\n.enum-field:focus-visible {\n outline: none;\n border: 1px solid #1976d2;\n}\n.enum-field-light {\n background-color: #fff;\n color: #333;\n border: 1px solid #ccc;\n}\n.enum-field-dark {\n background-color: #333;\n border: 1px solid #666;\n color: #fff;\n}\n.enum-field-error {\n border: 1px solid #d32f2f;\n}\n.enum-field-label {\n font-weight: bold;\n display: block;\n margin: 0 0 1rem 0;\n}\n/*\n.text-fiel-label-light {\n}\n.enum-field-label-dark {\n}\n*/\n.enum-field-label-error {\n color: #d32f2f;\n}\n.enum-field-helper-text {\n font-style: italic;\n font-size: 0.9rem;\n margin-top: 0.5rem;\n}\n/*\n.enum-field-helper-text-light {\n}\n.enum-field-helper-text-dark {\n}\n*/\n.enum-field-helper-text-error {\n color: #d32f2f;\n}\n",".button {\n align-items: center;\n border: none;\n border-radius: 4px;\n color: black;\n padding: .5rem 1rem;\n text-align: center;\n text-decoration: none;\n display: flex;\n font-size: 16px;\n gap: .5rem;\n margin: 4px 2px;\n cursor: pointer;\n}\n\n.button-light {\n background-color: #c7c7c7;\n color: black;\n}\n\n.button-dark {\n background-color: #383838;\n color: white;\n}\n\n.button-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n",".loader {\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n}\n\n.loader-light {\n border: 10px solid #f3f3f3;\n border-top: 10px solid #3498db;\n}\n\n.loader-dark {\n border: 10px solid #333;\n border-top: 10px solid #3498db;\n}\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n} \n",".header {\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n padding: .5rem;\n}\n\n.header-light {\n background-color: #ddd;;\n}\n\n.header-dark {\n background-color: #222;\n}\n\n.header-info {\n padding: .5rem;\n}\n.header-info-light {\n background-color: #ddd;;\n color: #000;\n}\n.header-info-dark {\n background-color: #222;\n color: #fff;\n}\n",".canvas-wrapper {\n background-size: contain;\n background-repeat: no-repeat;\n position: relative;\n}\n",".form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n",".shapes-table {\n border-collapse: collapse;\n width: 100%;\n}\n\n.shapes-table tr {\n cursor: pointer;\n}\n\n.shapes-table th {\n padding: .8rem .3rem;\n text-align: left;\n}\n\n.shapes-table td {\n padding: 0 .3rem;\n}\n\n.shapes-table tr td:last-child,\n.shapes-table tr th:last-child {\n text-align: right;\n}\n\n.shapes-table-light {\n background-color: #eee;\n color: #000;\n}\n\n.shapes-table-dark {\n background-color: #333;\n color: #fff;\n}\n\n.shapes-row-selected-light {\n background-color: #ccc;\n}\n\n.shapes-row-selected-dark {\n background-color: #666;\n}\n\n.shapes-row-even-light {\n background-color: #f7f7f7;\n}\n\n.shapes-row-even-dark {\n background-color: #444;\n}\n\n.shapes-row-odd-light {\n background-color: #f0f0f0;\n}\n\n.shapes-row-odd-dark {\n background-color: #555;\n}\n\n.shapesTableName {\n display: flex;\n align-items: center;\n}\n\n.shapesTableColor {\n border: 1px solid #000;\n box-sizing: border-box;\n display: inline-block;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n margin-right: .5rem;\n}\n",".colorpickerWrapper {\n display: flex;\n flex-wrap: nowrap;\n gap: .2rem;\n}\n\n.colorpicker-button {\n box-sizing: border-box;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n cursor: pointer;\n}\n\n.colorpicker-button-active {\n border: 2px solid red;\n}\n",".toolbar {\n align-items: center;\n display: flex;\n padding: .5rem;\n}\n\n.toolbar-light {\n background-color: #eee;;\n}\n\n.toolbar-dark {\n background-color: #333;\n}\n\n.toolbar-helper {\n padding: .5rem;\n}\n\n.toolbar-helper-light {\n background-color: #f7f7f7;;\n color: #000;\n}\n\n.toolbar-helper-dark {\n background-color: #222;\n color: #fff;\n}\n\n.toolbar-spacer {\n height: 20px;\n margin: 0 .5rem;\n width: 1px;\n}\n\n.toolbar-spacer-light {\n background-color: #ccc;\n}\n\n.toolbar-spacer-dark {\n background-color: #555;\n}\n",".top-bar {\n align-items: center;\n display: flex;\n gap: .5rem;\n justify-content: flex-end;\n margin-bottom: .5rem;\n}\n"]}
1
+ {"version":3,"sources":["IconButton.module.css","Modal.module.css","TextField.module.css","NumberField.module.css","BoolField.module.css","EnumField.module.css","Button.module.css","Loader.module.css","Header.module.css","RoiEditor.module.css","ParametersModalForm.module.css","ShapesList.module.css","ColorPicker.module.css","Toolbar.module.css","TopBar.module.css"],"names":[],"mappings":"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E,2BAA4B,CAD5B,uBAAwB,CAExB,iBACF,CCJA,wCACE,YAAa,CACb,qBAAsB,CACtB,QACF,CCJA,uCACE,wBAAyB,CACzB,UACF,CAEA,0CACE,cACF,CAEA,0CACE,mBAAoB,CACpB,eACF,CAEA,0CACE,eACF,CAEA,gHAEE,gBACF,CAEA,6CACE,qBAAsB,CACtB,UACF,CAEA,4CACE,qBAAsB,CACtB,UACF,CAEA,oDACE,qBACF,CAEA,mDACE,qBACF,CAEA,gDACE,wBACF,CAEA,+CACE,qBACF,CAEA,+CACE,wBACF,CAEA,8CACE,qBACF,CAEA,0CAEE,kBAAmB,CADnB,YAEF,CAEA,2CACE,qBAAsB,CAKtB,iBAAkB,CAJlB,qBAAsB,CACtB,oBAAqB,CAErB,WAAY,CAEZ,kBAAmB,CAHnB,UAIF,CCtEA,8CACE,YAAa,CACb,gBAAiB,CACjB,SACF,CAEA,8CAIE,iBAAkB,CAHlB,qBAAsB,CAItB,cAAe,CAFf,WAAY,CADZ,UAIF,CAEA,qDACE,oBACF,CChBA,+BACE,kBAAmB,CACnB,YAAa,CACb,aACF,CAEA,qCACE,qBACF,CAEA,oCACE,qBACF,CAEA,sCACE,aACF,CAEA,4CACE,wBAAyB,CACzB,UACF,CAEA,2CACE,qBAAsB,CACtB,UACF,CAEA,sCACE,WAAY,CACZ,cAAe,CACf,SACF,CAEA,4CACE,qBACF,CAEA,2CACE,qBACF,CCxCA,8BACE,kBAAmB,CACnB,YAAa,CACb,SAAU,CACV,wBAAyB,CACzB,mBACF,CAEA,2CACE,YACF,CACA,iDACE,qBACF,CACA,gDACE,qBAAsB,CACtB,UACF,CAEA,6CACE,YAAa,CACb,wBACF","file":"index.cjs.css","sourcesContent":[".icon-button {\n display: inline-block;\n border-radius: 50%;\n line-height: 0;\n padding: 0.5rem;\n cursor: pointer;\n}\n\n.icon-button-light:hover {\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.icon-button-dark:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.icon-button-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n",".modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9000;\n}\n\n.modal-overlay-light {\n background-color: rgba(255, 255, 255, 0.7);\n}\n\n.modal-overlay-dark {\n background-color: rgba(0, 0, 0, 0.7);\n}\n\n.modal {\n max-width: 80%;\n max-height: 80%;\n overflow: auto;\n padding: 20px;\n border-radius: 5px;\n}\n\n.modal:focus-visible {\n outline: none;\n}\n\n.modal-light {\n background-color: #fff;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n color: #000;\n}\n\n.modal-dark {\n background-color: #333;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);\n color: #fff;\n}\n\n.modal-xs {\n width: 400px;\n}\n\n.modal-sm {\n width: 600px;\n}\n\n.modal-md {\n width: 800px;\n}\n\n.modal-lg {\n width: 1000px;\n}\n\n.modal-xl {\n width: 1200px;\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.modal-title {\n font-size: 1.5rem;\n font-weight: bold;\n margin: 0;\n}\n\n.modal-title-light {\n color: #000;\n}\n\n.modal-title-dark {\n color: #fff;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-end;\n margin-top: 1rem;\n gap: .5rem;\n}\n\n","/*\n.text-field-wrapper {\n margin-bottom: 2rem;\n}\n.text-field-wrapper-light {\n}\n.text-field-wrapper-dark {\n}\n*/\n\n.text-field {\n border-radius: 0.25rem;\n box-sizing: border-box;\n padding: 0.5rem;\n width: 100%;\n}\n.text-field:focus-visible {\n outline: none;\n border: 1px solid #1976d2;\n}\n.text-field-light {\n background-color: #fff;\n color: #333;\n border: 1px solid #ccc;\n}\n.text-field-dark {\n background-color: #333;\n border: 1px solid #666;\n color: #fff;\n}\n.text-field-error {\n border: 1px solid #d32f2f;\n}\n.text-field-label {\n font-weight: bold;\n display: block;\n margin: 0 0 1rem 0;\n}\n/*\n.text-fiel-label-light {\n}\n.text-field-label-dark {\n}\n*/\n.text-field-label-error {\n color: #d32f2f;\n}\n.text-field-helper-text {\n font-style: italic;\n font-size: 0.9rem;\n margin-top: 0.5rem;\n}\n/*\n.text-field-helper-text-light {\n}\n.text-field-helper-text-dark {\n}\n*/\n.text-field-helper-text-error {\n color: #d32f2f;\n}\n","/*\n.number-field-wrapper {\n}\n.number-field-wrapper-light {\n}\n.number-field-wrapper-dark {\n}\n*/\n\n.number-field {\n border-radius: 0.25rem;\n box-sizing: border-box;\n padding: 0.5rem;\n width: 100%;\n}\n.number-field:focus-visible {\n outline: none;\n border: 1px solid #1976d2;\n}\n.number-field-light {\n background-color: #fff;\n color: #333;\n border: 1px solid #ccc;\n}\n.number-field-dark {\n background-color: #333;\n border: 1px solid #666;\n color: #fff;\n}\n.number-field-error {\n border: 1px solid #d32f2f;\n}\n.number-field-label {\n font-weight: bold;\n display: block;\n margin: 0 0 1rem 0;\n}\n/*\n.text-fiel-label-light {\n}\n.number-field-label-dark {\n}\n*/\n.number-field-label-error {\n color: #d32f2f;\n}\n.number-field-helper-text {\n font-style: italic;\n font-size: 0.9rem;\n padding-top: 0.5rem;\n}\n/*\n.number-field-helper-text-light {\n}\n.number-field-helper-text-dark {\n}\n*/\n.number-field-helper-text-error {\n color: #d32f2f;\n}\n","/*\n.bool-field-wrapper {\n margin-bottom: 2rem;\n}\n.bool-field-wrapper-light {\n}\n.bool-field-wrapper-dark {\n}\n*/\n\n.bool-field {\n border-radius: 0.25rem;\n box-sizing: border-box;\n padding: 0.5rem;\n}\n.bool-field:focus-visible {\n outline: none;\n border: 1px solid #1976d2;\n}\n.bool-field-light {\n background-color: #fff;\n color: #333;\n border: 1px solid #ccc;\n}\n.bool-field-dark {\n background-color: #333;\n border: 1px solid #666;\n color: #fff;\n}\n.bool-field-error {\n border: 1px solid #d32f2f;\n}\n.bool-field-label {\n font-weight: bold;\n display: block;\n margin: 0 0 1rem 0;\n}\n/*\n.text-fiel-label-light {\n}\n.bool-field-label-dark {\n}\n*/\n.bool-field-label-error {\n color: #d32f2f;\n}\n.bool-field-helper-text {\n font-style: italic;\n font-size: 0.9rem;\n margin-top: 0.5rem;\n}\n/*\n.bool-field-helper-text-light {\n}\n.bool-field-helper-text-dark {\n}\n*/\n.bool-field-helper-text-error {\n color: #d32f2f;\n}\n","/*\n.enum-field-wrapper {\n margin-bottom: 2rem;\n}\n.enum-field-wrapper-light {\n}\n.enum-field-wrapper-dark {\n}\n*/\n\n.enum-field {\n border-radius: 0.25rem;\n box-sizing: border-box;\n padding: 0.5rem;\n width: 100%;\n}\n.enum-field:focus-visible {\n outline: none;\n border: 1px solid #1976d2;\n}\n.enum-field-light {\n background-color: #fff;\n color: #333;\n border: 1px solid #ccc;\n}\n.enum-field-dark {\n background-color: #333;\n border: 1px solid #666;\n color: #fff;\n}\n.enum-field-error {\n border: 1px solid #d32f2f;\n}\n.enum-field-label {\n font-weight: bold;\n display: block;\n margin: 0 0 1rem 0;\n}\n/*\n.text-fiel-label-light {\n}\n.enum-field-label-dark {\n}\n*/\n.enum-field-label-error {\n color: #d32f2f;\n}\n.enum-field-helper-text {\n font-style: italic;\n font-size: 0.9rem;\n margin-top: 0.5rem;\n}\n/*\n.enum-field-helper-text-light {\n}\n.enum-field-helper-text-dark {\n}\n*/\n.enum-field-helper-text-error {\n color: #d32f2f;\n}\n",".button {\n align-items: center;\n border: none;\n border-radius: 4px;\n color: black;\n padding: .5rem 1rem;\n text-align: center;\n text-decoration: none;\n display: flex;\n font-size: 16px;\n gap: .5rem;\n margin: 4px 2px;\n cursor: pointer;\n}\n\n.button-light {\n background-color: #c7c7c7;\n color: black;\n}\n\n.button-dark {\n background-color: #474747;\n color: white;\n}\n\n.button-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n",".loader {\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n}\n\n.loader-light {\n border: 10px solid #f3f3f3;\n border-top: 10px solid #3498db;\n}\n\n.loader-dark {\n border: 10px solid #333;\n border-top: 10px solid #3498db;\n}\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n} \n",".header {\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n padding: .5rem;\n}\n\n.header-light {\n background-color: #ddd;;\n}\n\n.header-dark {\n background-color: #222;\n}\n\n.header-info {\n padding: .5rem;\n}\n.header-info-light {\n background-color: #ddd;;\n color: #000;\n}\n.header-info-dark {\n background-color: #222;\n color: #fff;\n}\n",".canvas-wrapper {\n background-size: contain;\n background-repeat: no-repeat;\n position: relative;\n}\n",".form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n",".shapes-table {\n border-collapse: collapse;\n width: 100%;\n}\n\n.shapes-table tr {\n cursor: pointer;\n}\n\n.shapes-table th {\n padding: .8rem .3rem;\n text-align: left;\n}\n\n.shapes-table td {\n padding: 0 .3rem;\n}\n\n.shapes-table tr td:last-child,\n.shapes-table tr th:last-child {\n text-align: right;\n}\n\n.shapes-table-light {\n background-color: #eee;\n color: #000;\n}\n\n.shapes-table-dark {\n background-color: #333;\n color: #fff;\n}\n\n.shapes-row-selected-light {\n background-color: #ccc;\n}\n\n.shapes-row-selected-dark {\n background-color: #666;\n}\n\n.shapes-row-even-light {\n background-color: #f7f7f7;\n}\n\n.shapes-row-even-dark {\n background-color: #444;\n}\n\n.shapes-row-odd-light {\n background-color: #f0f0f0;\n}\n\n.shapes-row-odd-dark {\n background-color: #555;\n}\n\n.shapesTableName {\n display: flex;\n align-items: center;\n}\n\n.shapesTableColor {\n border: 1px solid #000;\n box-sizing: border-box;\n display: inline-block;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n margin-right: .5rem;\n}\n",".colorpickerWrapper {\n display: flex;\n flex-wrap: nowrap;\n gap: .2rem;\n}\n\n.colorpicker-button {\n box-sizing: border-box;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n cursor: pointer;\n}\n\n.colorpicker-button-active {\n border: 2px solid red;\n}\n",".toolbar {\n align-items: center;\n display: flex;\n padding: .5rem;\n}\n\n.toolbar-light {\n background-color: #eee;;\n}\n\n.toolbar-dark {\n background-color: #333;\n}\n\n.toolbar-helper {\n padding: .5rem;\n}\n\n.toolbar-helper-light {\n background-color: #f7f7f7;;\n color: #000;\n}\n\n.toolbar-helper-dark {\n background-color: #222;\n color: #fff;\n}\n\n.toolbar-spacer {\n height: 20px;\n margin: 0 .5rem;\n width: 1px;\n}\n\n.toolbar-spacer-light {\n background-color: #ccc;\n}\n\n.toolbar-spacer-dark {\n background-color: #555;\n}\n",".top-bar {\n align-items: center;\n display: flex;\n gap: .5rem;\n justify-content: flex-end;\n margin-bottom: .5rem;\n}\n\n.main-parameters-view {\n padding: 1rem;\n}\n.main-parameters-view-light {\n background-color: #eee;\n}\n.main-parameters-view-dark {\n background-color: #333;\n color: #fff;\n}\n\n.main-parameters-button {\n display: flex;\n justify-content: flex-end;\n}\n\n"]}
package/dist/index.cjs.js CHANGED
@@ -1380,7 +1380,7 @@ var RoleField = function (_a) {
1380
1380
 
1381
1381
  var ParameterField = function (_a) {
1382
1382
  var _b, _c;
1383
- var value = _a.value, onChange = _a.onChange, parameter = _a.parameter, errors = _a.errors;
1383
+ var value = _a.value, onChange = _a.onChange, parameter = _a.parameter, errors = _a.errors, readOnly = _a.readOnly;
1384
1384
  var _d = React.useContext(UiContext), TextField = _d.TextField, NumberField = _d.NumberField, BoolField = _d.BoolField, EnumField = _d.EnumField, strings = _d.strings;
1385
1385
  var props = {
1386
1386
  required: parameter.required,
@@ -1392,12 +1392,12 @@ var ParameterField = function (_a) {
1392
1392
  };
1393
1393
  switch (parameter.type) {
1394
1394
  case 'string':
1395
- return ((_b = parameter.options) === null || _b === void 0 ? void 0 : _b.length) ? (jsxRuntime.jsx(EnumField, __assign({ value: value, onChange: function (v) { return onChange(v); }, options: parameter.options, multiple: parameter.multiple }, props))) : (jsxRuntime.jsx(TextField, __assign({ type: "text", value: value, onChange: function (v) { return onChange(v); } }, props)));
1395
+ return ((_b = parameter.options) === null || _b === void 0 ? void 0 : _b.length) ? (jsxRuntime.jsx(EnumField, __assign({ value: value, onChange: function (v) { return onChange(v); }, options: parameter.options, multiple: parameter.multiple, disabled: readOnly }, props))) : (jsxRuntime.jsx(TextField, __assign({ type: "text", readOnly: readOnly, value: value, onChange: function (v) { return onChange(v); } }, props)));
1396
1396
  case 'int':
1397
1397
  case 'float':
1398
- return ((_c = parameter.options) === null || _c === void 0 ? void 0 : _c.length) ? (jsxRuntime.jsx(EnumField, __assign({ value: value, onChange: function (v) { return onChange(v); }, options: parameter.options, multiple: parameter.multiple }, props))) : (jsxRuntime.jsx(NumberField, __assign({ value: value, onChange: function (v) { return onChange(v); } }, props)));
1398
+ return ((_c = parameter.options) === null || _c === void 0 ? void 0 : _c.length) ? (jsxRuntime.jsx(EnumField, __assign({ value: value, onChange: function (v) { return onChange(v); }, options: parameter.options, multiple: parameter.multiple, disabled: readOnly }, props))) : (jsxRuntime.jsx(NumberField, __assign({ value: value, readOnly: readOnly, onChange: function (v) { return onChange(v); } }, props)));
1399
1399
  case 'bool':
1400
- return jsxRuntime.jsx(BoolField, __assign({ checked: value, onChange: function (v) { return onChange(v); } }, props));
1400
+ return jsxRuntime.jsx(BoolField, __assign({ checked: value, disabled: readOnly, onChange: function (v) { return onChange(v); } }, props));
1401
1401
  default:
1402
1402
  return null;
1403
1403
  }
@@ -1406,11 +1406,15 @@ var ParameterField = function (_a) {
1406
1406
  var styles$4 = {"form":"ParametersModalForm-module_form__WXebJ"};
1407
1407
 
1408
1408
  var ParametersModalForm = function (_a) {
1409
- var title = _a.title, onClose = _a.onClose, parameters = _a.parameters, data = _a.data, onSubmit = _a.onSubmit, shapeType = _a.shapeType, shapeName = _a.shapeName, shapeRole = _a.shapeRole;
1409
+ var title = _a.title, onClose = _a.onClose, parameters = _a.parameters, data = _a.data, onSubmit = _a.onSubmit, shapeType = _a.shapeType, shapeName = _a.shapeName, shapeRole = _a.shapeRole, noModal = _a.noModal, readOnly = _a.readOnly;
1410
1410
  var _b = React.useContext(UiContext), Modal = _b.Modal, TextField = _b.TextField, strings = _b.strings;
1411
1411
  var _c = React.useState(shapeName !== null && shapeName !== void 0 ? shapeName : ''), name = _c[0], setName = _c[1];
1412
1412
  var _d = React.useState(shapeRole !== null && shapeRole !== void 0 ? shapeRole : ''), role = _d[0], setRole = _d[1];
1413
1413
  var _e = useParametersForm(data), fields = _e.fields, setField = _e.setField, errors = _e.errors, setErrors = _e.setErrors;
1414
+ var readonlyFields = data.reduce(function (acc, p) {
1415
+ var _a;
1416
+ return (__assign(__assign({}, acc), (_a = {}, _a[p.codename] = p.value, _a)));
1417
+ }, {});
1414
1418
  var handleSubmit = function () {
1415
1419
  if (shapeType && name === '') {
1416
1420
  setErrors({ name: strings.requiredField });
@@ -1425,19 +1429,20 @@ var ParametersModalForm = function (_a) {
1425
1429
  }
1426
1430
  }
1427
1431
  };
1428
- return (jsxRuntime.jsx(Modal, { onClose: onClose, title: title, isOpen: true, maxWidth: "sm", onSubmit: handleSubmit, children: jsxRuntime.jsxs("div", { className: css('form', styles$4, null), children: [shapeType && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextField, { required: true, label: strings.name, type: "text", value: name, onChange: setName, error: !!errors.name, helperText: errors.name }), jsxRuntime.jsx(RoleField, { required: true, value: role, onChange: setRole, error: !!errors.name, helperText: errors.name, shapeType: shapeType })] })), parameters.map(function (parameter) {
1429
- switch (parameter.type) {
1430
- case 'string':
1431
- return (jsxRuntime.jsx(ParameterField, { value: String(fields[parameter.codename]), onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
1432
- case 'int':
1433
- case 'float':
1434
- return (jsxRuntime.jsx(ParameterField, { value: fields[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
1435
- case 'bool':
1436
- return (jsxRuntime.jsx(ParameterField, { value: fields[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
1437
- default:
1438
- return null;
1439
- }
1440
- })] }) }));
1432
+ var form = (jsxRuntime.jsxs("div", { className: css('form', styles$4, null), children: [shapeType && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextField, { required: true, label: strings.name, type: "text", value: name, onChange: setName, error: !!errors.name, helperText: errors.name, readOnly: readOnly }), jsxRuntime.jsx(RoleField, { required: true, value: role, onChange: setRole, error: !!errors.name, helperText: errors.name, shapeType: shapeType, readOnly: readOnly, disabled: readOnly })] })), parameters.map(function (parameter) {
1433
+ switch (parameter.type) {
1434
+ case 'string':
1435
+ return (jsxRuntime.jsx(ParameterField, { value: String((readOnly ? readonlyFields : fields)[parameter.codename]), onChange: setField(parameter.codename), parameter: parameter, errors: errors, readOnly: readOnly }, parameter.codename));
1436
+ case 'int':
1437
+ case 'float':
1438
+ return (jsxRuntime.jsx(ParameterField, { value: (readOnly ? readonlyFields : fields)[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors, readOnly: readOnly }, parameter.codename));
1439
+ case 'bool':
1440
+ return (jsxRuntime.jsx(ParameterField, { value: (readOnly ? readonlyFields : fields)[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors, readOnly: readOnly }, parameter.codename));
1441
+ default:
1442
+ return null;
1443
+ }
1444
+ })] }));
1445
+ return noModal ? form : jsxRuntime.jsx(Modal, { onClose: onClose, title: title, isOpen: true, maxWidth: "sm", onSubmit: handleSubmit, children: form });
1441
1446
  };
1442
1447
 
1443
1448
  var styles$3 = {"shapes-table":"ShapesList-module_shapes-table__sx5Xp","shapes-table-light":"ShapesList-module_shapes-table-light__TbtKn","shapes-table-dark":"ShapesList-module_shapes-table-dark__siyhV","shapes-row-selected-light":"ShapesList-module_shapes-row-selected-light__-0gaE","shapes-row-selected-dark":"ShapesList-module_shapes-row-selected-dark__bGR3a","shapes-row-even-light":"ShapesList-module_shapes-row-even-light__2eUZX","shapes-row-even-dark":"ShapesList-module_shapes-row-even-dark__eyECv","shapes-row-odd-light":"ShapesList-module_shapes-row-odd-light__vZzPj","shapes-row-odd-dark":"ShapesList-module_shapes-row-odd-dark__TWGAu","shapesTableName":"ShapesList-module_shapesTableName__9Q6i1","shapesTableColor":"ShapesList-module_shapesTableColor__Iyd33"};
@@ -1558,18 +1563,19 @@ var Toolbar = function () {
1558
1563
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: css('toolbar', styles$1, themeMode), children: enableRois(configuration) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsxRuntime.jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || polylineEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsxRuntime.jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsxRuntime.jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) })), (!hideForbiddenTools || rectangleEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: jsxRuntime.jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })), jsxRuntime.jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (jsxRuntime.jsx("div", { className: css('toolbar-helper', styles$1, themeMode), children: jsxRuntime.jsxs(Typography, { children: [strings[activeTool], ": ", strings["".concat(activeTool, "HelpText")]] }) }))] }));
1559
1564
  };
1560
1565
 
1561
- var styles = {"top-bar":"TopBar-module_top-bar__9oCUR"};
1566
+ var styles = {"top-bar":"TopBar-module_top-bar__9oCUR","main-parameters-view":"TopBar-module_main-parameters-view__f-0SX","main-parameters-view-light":"TopBar-module_main-parameters-view-light__o-dbi","main-parameters-view-dark":"TopBar-module_main-parameters-view-dark__FnEnj","main-parameters-button":"TopBar-module_main-parameters-button__9JX--"};
1562
1567
 
1563
1568
  var TopBar = function () {
1564
- var _a = React.useContext(UiContext), themeMode = _a.themeMode, AnnotateIcon = _a.AnnotateIcon, Button = _a.Button, primaryFgColor = _a.primaryFgColor, strings = _a.strings;
1565
- var _b = useEditorContext(), configuration = _b.configuration, onSubmit = _b.onSubmit, metadata = _b.metadata, setMetadata = _b.setMetadata;
1566
- var _c = React.useState({ isOpen: false }), form = _c[0], setForm = _c[1];
1569
+ var _a, _b;
1570
+ var _c = React.useContext(UiContext), themeMode = _c.themeMode, AnnotateIcon = _c.AnnotateIcon, Button = _c.Button, primaryFgColor = _c.primaryFgColor, strings = _c.strings;
1571
+ var _d = useEditorContext(), configuration = _d.configuration, onSubmit = _d.onSubmit, metadata = _d.metadata, setMetadata = _d.setMetadata;
1572
+ var _e = React.useState({ isOpen: false }), form = _e[0], setForm = _e[1];
1567
1573
  var iconColor = themeMode === 'light' ? 'black' : 'white';
1568
1574
  var handleSubmitMetadata = function (data) {
1569
1575
  setMetadata(__assign(__assign({}, metadata), { parameters: data }));
1570
1576
  setForm({ isOpen: false });
1571
1577
  };
1572
- return (jsxRuntime.jsxs("div", { className: css('top-bar', styles, themeMode), children: [enableMainMetadata(configuration) && (jsxRuntime.jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsxRuntime.jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] })), jsxRuntime.jsxs(Button, { primary: true, onClick: onSubmit, children: [jsxRuntime.jsx(SaveIcon, { color: primaryFgColor }), " ", strings.save] }), form.isOpen && (jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata }))] }));
1578
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: css('top-bar', styles, themeMode), children: [enableMainMetadata(configuration) && !((_a = configuration.options) === null || _a === void 0 ? void 0 : _a.viewMainParameters) && (jsxRuntime.jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsxRuntime.jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] })), jsxRuntime.jsxs(Button, { primary: true, onClick: onSubmit, children: [jsxRuntime.jsx(SaveIcon, { color: primaryFgColor }), " ", strings.save] }), form.isOpen && (jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata }))] }), enableMainMetadata(configuration) && ((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.viewMainParameters) && (jsxRuntime.jsxs("div", { className: css('main-parameters-view', styles, themeMode), children: [jsxRuntime.jsx("div", { className: css('main-parameters-button', styles, themeMode), children: jsxRuntime.jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsxRuntime.jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] }) }), jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata, readOnly: true, noModal: true })] }))] }));
1573
1579
  };
1574
1580
 
1575
1581
  // https://github.com/n-mazaheri/image-editor