Merge pull request #82 from concord-consortium/185363141-fix-annotations

fix: Removed annotation caching [PT-185363141]
concord-consortium · Jun 25, 2024 · fcf7e48 · fcf7e48
2 parents 95fd0b4 + deea66a
commit fcf7e48
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 76 deletions.
diff --git a/app/scripts/fabric-extensions/annotations.js b/app/scripts/fabric-extensions/annotations.js
@@ -48,18 +48,16 @@ function handleAnnotations(annotationTool) {
       annotationId &&
       e.target.type === fabric.AnnotationText.prototype.type
     ) {
-      var text = fabric.Annotations.get(
-        annotationId,
-        fabric.AnnotationText.prototype.type
-      );
-      var border = fabric.Annotations.get(
-        annotationId,
-        fabric.AnnotationBorder.prototype.type
-      );
-      var arrow = fabric.Annotations.get(
-        annotationId,
-        fabric.AnnotationArrow.prototype.type
-      );
+
+      // find the associated objects
+      const objects = {};
+      canvas.forEachObject((object) => {
+        if (object.annotationId === annotationId) {
+          objects[object.type.replace("annotation-", "")] = object;
+        }
+      });
+
+      const {text, border, arrow} = objects;
       if (!text || !border || !arrow) {
         return;
       }
@@ -85,30 +83,11 @@ function handleAnnotations(annotationTool) {
       annotationId &&
       e.target.type !== fabric.AnnotationControlPoint.prototype.type
     ) {
-      var text = fabric.Annotations.get(
-        annotationId,
-        fabric.AnnotationText.prototype.type
-      );
-      var border = fabric.Annotations.get(
-        annotationId,
-        fabric.AnnotationBorder.prototype.type
-      );
-      var arrow = fabric.Annotations.get(
-        annotationId,
-        fabric.AnnotationArrow.prototype.type
-      );
-      var controlPoint = fabric.Annotations.get(
-        annotationId,
-        fabric.AnnotationControlPoint.prototype.type
-      );
-
-      if (text && e.target !== text) canvas.remove(text);
-      if (border && e.target !== border) canvas.remove(border);
-      if (arrow && e.target !== arrow) canvas.remove(arrow);
-      if (controlPoint && e.target !== controlPoint)
-        canvas.remove(controlPoint);
-
-      fabric.Annotations.remove(annotationId);
+      canvas.forEachObject((object) => {
+        if (object.annotationId === annotationId) {
+          canvas.remove(object);
+        }
+      });
     }
   });
 }
@@ -129,44 +108,40 @@ module.exports = handleAnnotations;
   fabric.Annotations = {
     margin: 10,
 
-    annotations: {},
-
-    set: function (id, annotation) {
-      this.annotations[id] = this.annotations[id] || {};
-      this.annotations[id][annotation.type] = annotation;
-    },
-
-    get: function (id, type) {
-      return (this.annotations[id] && this.annotations[id][type]) || undefined;
+    getObject: function (canvas, id, type) {
+      return canvas.getObjects(type).find(object => object.annotationId === id);
     },
 
-    remove: function (id, type) {
-      if (type) {
-        if (this.annotations[id]) {
-          delete this.annotations[id][type];
-        }
-      } else {
-        delete this.annotations[id];
-      }
+    getAllAnnotationIds: function (canvas) {
+      return canvas.getObjects(fabric.AnnotationText.prototype.type).reduce((acc, cur) => {
+        acc.push(cur.annotationId);
+        return acc;
+      }, []);
     },
 
     addControlPoint: function (annotationId, canvas) {
-      var controlPoint = fabric.Annotations.get(
+      var controlPoint = fabric.Annotations.getObject(
+        canvas,
         annotationId,
         fabric.AnnotationControlPoint.prototype.type
       );
       if (controlPoint) {
         return;
       }
 
-      var text = fabric.Annotations.get(
+      var text = fabric.Annotations.getObject(
+        canvas,
         annotationId,
         fabric.AnnotationText.prototype.type
       );
-      var arrow = fabric.Annotations.get(
+      var arrow = fabric.Annotations.getObject(
+        canvas,
         annotationId,
         fabric.AnnotationArrow.prototype.type
       );
+      if (!text || !arrow) {
+        return;
+      }
 
       controlPoint = new fabric.AnnotationControlPoint({
         annotationId,
@@ -182,7 +157,6 @@ module.exports = handleAnnotations;
         originX: 'center',
         originY: 'center'
       });
-      fabric.Annotations.set(annotationId, controlPoint);
 
       controlPoint.on('moving', () => {
         var p = fabric.Annotations.calcArrowPoints(text, {
@@ -199,27 +173,27 @@ module.exports = handleAnnotations;
     },
 
     removeControlPoint: function (annotationId, canvas) {
-      var controlPoint = fabric.Annotations.get(
+      var controlPoint = fabric.Annotations.getObject(
+        canvas,
         annotationId,
         fabric.AnnotationControlPoint.prototype.type
       );
       if (controlPoint) {
         controlPoint.off('moving');
-        this.remove(annotationId, fabric.AnnotationControlPoint.prototype.type);
         if (canvas.contains(controlPoint)) {
           canvas.remove(controlPoint);
         }
       }
     },
 
     addAllControlPoints: function (canvas) {
-      Object.keys(this.annotations).forEach((id) => {
+      fabric.Annotations.getAllAnnotationIds(canvas).forEach((id) => {
         fabric.Annotations.addControlPoint(id, canvas);
       });
     },
 
     removeAllControlPoints: function (canvas, exceptId) {
-      Object.keys(this.annotations).forEach((id) => {
+      fabric.Annotations.getAllAnnotationIds(canvas).forEach((id) => {
         if (id !== exceptId) {
           fabric.Annotations.removeControlPoint(id, canvas);
         }
@@ -323,7 +297,6 @@ module.exports = handleAnnotations;
         this.callSuper('initialize', text, options);
         options = options || {};
         this.set('annotationId', options.annotationId);
-        fabric.Annotations.set(options.annotationId, this);
       },
 
       containsPoint: function (point) {
@@ -335,32 +308,33 @@ module.exports = handleAnnotations;
       _renderTextCommon: function (ctx, method) {
         this.callSuper('_renderTextCommon', ctx, method);
 
-        var border = fabric.Annotations.get(
-          this.annotationId,
-          fabric.AnnotationBorder.prototype.type
-        );
+        const annotationId = this.annotationId;
+        let requestReRender = false;
+
+        const border = this.canvas.getObjects(fabric.AnnotationBorder.prototype.type).find(object => object.annotationId === annotationId);
         if (border) {
           var newRect = fabric.Annotations.calcBorderRect(this);
           if (
             border.width !== newRect.width ||
             border.height !== newRect.height
           ) {
             border.set(newRect);
-            this.canvas.requestRenderAll();
+            requestReRender = true;
           }
         }
 
-        var arrow = fabric.Annotations.get(
-          this.annotationId,
-          fabric.AnnotationArrow.prototype.type
-        );
+        const arrow = this.canvas.getObjects(fabric.AnnotationArrow.prototype.type).find(object => object.annotationId === annotationId);
         if (arrow) {
           var p = fabric.Annotations.calcArrowPoints(this, arrow);
           if (arrow.x1 !== p[0] || arrow.y1 !== p[1]) {
             arrow.set({ x1: p[0], y1: p[1] });
-            this.canvas.requestRenderAll();
+            requestReRender = true;
           }
         }
+
+        if (requestReRender) {
+          this.canvas.requestRenderAll();
+        }
       },
 
       /**
@@ -416,7 +390,6 @@ module.exports = handleAnnotations;
           lockMovementY: true,
           hoverCursor: 'default'
         });
-        fabric.Annotations.set(options.annotationId, this);
       },
 
       /**
@@ -536,7 +509,6 @@ module.exports = handleAnnotations;
           lockMovementY: true,
           hoverCursor: 'default'
         });
-        fabric.Annotations.set(options.annotationId, this);
       },
 
       /**
@@ -595,7 +567,6 @@ module.exports = handleAnnotations;
           hasControls: false,
           hasBorders: false
         });
-        fabric.Annotations.set(options.annotationId, this);
       },
 
       /**

diff --git a/app/scripts/tools/shape-tools/annotation-tool.js b/app/scripts/tools/shape-tools/annotation-tool.js
@@ -115,6 +115,8 @@ AnnotationTool.prototype.mouseDown = function (opt) {
   this.canvas.add(text);
   this.editText(text, opt.e);
   opt.e.preventDefault();
+
+  this.master.pushToHistory();
 };
 
 AnnotationTool.prototype.activate = function () {

diff --git a/dist/drawing-tool.js b/dist/drawing-tool.js