Add annotation group editability

src/app/application.js

@@ -623,6 +623,8 @@ export class App {
     this.#dataController.addEventListener('annotationadd', this.#fireEvent);
     this.#dataController.addEventListener('annotationupdate', this.#fireEvent);
     this.#dataController.addEventListener('annotationremove', this.#fireEvent);
+    this.#dataController.addEventListener(
+      'annotationgroupeditablechange', this.#fireEvent);
     // create stage
     this.#stage = new Stage();
     if (typeof this.#options.binders !== 'undefined') {

src/app/drawController.js

@@ -41,6 +41,24 @@ export class DrawController {
     return this.#annotationGroup;
   }
 
+  /**
+   * Check if the annotation group is editable.
+   *
+   * @returns {boolean} True if editable.
+   */
+  isAnnotationGroupEditable() {
+    return this.#annotationGroup.isEditable();
+  }
+
+  /**
+   * Set the annotation group editability.
+   *
+   * @param {boolean} flag True to make the annotation group editable.
+   */
+  setAnnotationGroupEditable(flag) {
+    this.#annotationGroup.setEditable(flag);
+  }
+
   /**
    * Add an annotation.
    *

src/gui/drawLayer.js

@@ -515,6 +515,29 @@ export class DrawLayer {
       this.#removeAnnotationDraw(event.data);
       this.getKonvaLayer().draw();
     });
+    annotationGroup.addEventListener(
+      'annotationgroupeditablechange',
+      (event) => {
+        this.#shapeHandler.disableAndResetEditor();
+        const shapeGroups =
+          this.getCurrentPosGroup().getChildren();
+
+        if (event.data) {
+          shapeGroups.forEach((group) => {
+            if (group instanceof Konva.Group) {
+              const annotation = annotationGroup.find(group.id());
+              this.#shapeHandler.addShapeListeners(this, group, annotation);
+            }
+          });
+        } else {
+          shapeGroups.forEach((group) => {
+            if (group instanceof Konva.Group) {
+              this.#shapeHandler.removeShapeListeners(group);
+            }
+          });
+        }
+      }
+    );
 
     // create draw controller
     this.#drawController = new DrawController(annotationGroup);

src/image/annotation.js

@@ -248,6 +248,13 @@ export class AnnotationGroup {
    */
   #listenerHandler = new ListenerHandler();
 
+  /**
+   * Editable flag.
+   *
+   * @type {boolean}
+   */
+  #editable;
+
   /**
    * @param {Annotation[]} [list] Optional list, will
    *   create new if not provided.
@@ -258,6 +265,7 @@ export class AnnotationGroup {
     } else {
       this.#list = [];
     }
+    this.#editable = true;
   }
 
   /**
@@ -278,6 +286,28 @@ export class AnnotationGroup {
     return this.#list.length;
   }
 
+  /**
+   * Check if the annotation group is editable.
+   *
+   * @returns {boolean} True if editable.
+   */
+  isEditable() {
+    return this.#editable;
+  }
+
+  /**
+   * Set the annotation group editability.
+   *
+   * @param {boolean} flag True to make the annotation group editable.
+   */
+  setEditable(flag) {
+    this.#editable = flag;
+    this.#fireEvent({
+      type: 'annotationgroupeditablechange',
+      data: flag
+    });
+  }
+
   /**
    * Add a new annotation.
    *

src/tools/drawShapeHandler.js

@@ -103,9 +103,11 @@ export class DrawShapeHandler {
    * @param {DrawLayer} drawLayer The layer the shape belongs to.
    */
   setEditorShape(shape, drawLayer) {
+    const drawController = drawLayer.getDrawController();
     if (shape &&
       shape instanceof Konva.Shape &&
-      shape !== this.#shapeEditor.getShape()) {
+      shape !== this.#shapeEditor.getShape() &&
+      drawController.isAnnotationGroupEditable()) {
       // disable
       this.#shapeEditor.disable();
       // set shape