vibe-editor 0.0.0 → 0.0.1

package/src/scripts/js/handlers/AnnotationChangeHandler.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const constants_1 = require("../constants");
 const interactjs_1 = require("interactjs");
 const cq = require("../utils/convenienceQueries");
 const coordinates = require("../utils/coordinates");
@@ -9,6 +8,9 @@ const coordinates = require("../utils/coordinates");
  */
 class AnnotationChangeHandler {
     constructor(containerId) {
+        this.selectColorsHandler = (function selectColorsHandler() {
+            this.setColors();
+        }).bind(this);
         // change to function after implementation
         this.selectHandler = (function selectHandler(e) {
             var target = e.target;
@@ -60,7 +62,7 @@ class AnnotationChangeHandler {
                 })
             ]
         });
-        this.textListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .annotLinkedText, #" + this.containerId + " #interactionOverlay .annotStaticText")
+        this.textListener = interactjs_1.default("#" + this.containerId + " .annotText")
             .resizable({
             // resize from all edges and corners
             edges: { left: true, right: true, bottom: true, top: true },
@@ -110,6 +112,18 @@ class AnnotationChangeHandler {
                 })
             ]
         });
+        // this.colorObserver = new MutationObserver(function(mutations){
+        //     mutations.forEach(mutation => {
+        //         if(mutation.type !== "attributes") return
+        //         if(mutation.attributeName === "selectedcolor"){
+        //            that.setColors()
+        //         }
+        //     })
+        // })
+        // this.colorObserver.observe(cq.getContainer(this.containerId).querySelector("#colorGroup"), {
+        //    attributes: true
+        // })
+        cq.getContainer(this.containerId).querySelector("#colorGroup").addEventListener("change", this.selectColorsHandler);
     }
     removeListeners() {
         var _a, _b, _c;
@@ -117,11 +131,38 @@ class AnnotationChangeHandler {
         (_a = this.shapeListener) === null || _a === void 0 ? void 0 : _a.unset();
         (_b = this.lineListener) === null || _b === void 0 ? void 0 : _b.unset();
         (_c = this.textListener) === null || _c === void 0 ? void 0 : _c.unset();
+        //this.colorObserver?.disconnect()
+        cq.getContainer(this.containerId).querySelector("#colorGroup").removeEventListener("change", this.selectColorsHandler);
     }
     resetListeners() {
         this.removeListeners();
         this.setListeners();
     }
+    /**
+     * set selected color to all marked elements
+     * color hex is set in the #colorGroup element
+     * @returns
+     */
+    setColors() {
+        var color = cq.getContainer(this.containerId).querySelector("#colorGroup").getAttribute("selectedcolor");
+        if (!color)
+            return;
+        cq.getContainer(this.containerId).querySelectorAll(".marked").forEach(m => {
+            m.style.fill = color;
+        });
+        cq.getContainer(this.containerId).querySelectorAll(".annotText.selected [contenteditable]").forEach(c => {
+            if (c.closest(".annotLinkedText")) {
+                color += "1A";
+            } //add transparency of 0.1
+            c.style.backgroundColor = color;
+            //change color in annotlist
+            const id = c.closest("g").id;
+            const annotListElement = cq.getContainer(this.containerId).querySelector(`#annotList > [refid=${id}]`);
+            if (!annotListElement)
+                return;
+            annotListElement.style.backgroundColor = color;
+        });
+    }
     // SHAPES
     dragShapeListener(event) {
         var target = event.target;
@@ -148,9 +189,13 @@ class AnnotationChangeHandler {
         pt = coordinates.transformToDOMMatrixCoordinates(target.getBoundingClientRect().x, target.getBoundingClientRect().y, cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
         var rectX = pt.x.toString(); //pt.matrixTransform(this.canvasMatrix).x.toString() 
         var rectY = pt.y.toString(); //pt.matrixTransform(this.canvasMatrix).y.toString() 
-        if (line !== null) {
+        if (line) {
             line.setAttribute("x1", rectX);
             line.setAttribute("y1", rectY);
+            var xDiff = parseFloat(line.getAttribute("x2")) - parseFloat(rectX);
+            var yDiff = parseFloat(line.getAttribute("y2")) - parseFloat(rectY);
+            line.setAttribute("x-diff", xDiff.toString());
+            line.setAttribute("y-diff", yDiff.toString());
         }
         var dragRects = targetParent === null || targetParent === void 0 ? void 0 : targetParent.querySelectorAll(".lineDragRect");
         if (dragRects.length > 0) {
@@ -165,6 +210,7 @@ class AnnotationChangeHandler {
     resizeShapeListener(event) {
         var target = event.target;
         this.interactTarget = target;
+        cq.getContainer(this.containerId).classList.add("annotMode");
         // update overal dimensions
         var pt = coordinates.getDOMMatrixCoordinates(event.rect, cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
         target.style.width = pt.width + 'px';
@@ -179,10 +225,12 @@ class AnnotationChangeHandler {
             var distY = (parseFloat(target.getAttribute('distY'))) || edy - ptDist.y; //ptDist.matrixTransform(this.canvasMatrix).y 
             target.setAttribute("distX", distX.toString());
             target.setAttribute("distY", distY.toString());
-            if (event.edges.left === true)
+            if (event.edges.left === true) {
                 target.setAttribute("x", (edx - distX).toString());
-            if (event.edges.top === true)
+            }
+            if (event.edges.top === true) {
                 target.setAttribute("y", (edy - distY).toString());
+            }
             //target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
         }
         //update attached line
@@ -194,6 +242,10 @@ class AnnotationChangeHandler {
         if (line !== null) {
             line.setAttribute("x1", rectX);
             line.setAttribute("y1", rectY);
+            var xDiff = parseFloat(line.getAttribute("x2")) - parseFloat(rectX);
+            var yDiff = parseFloat(line.getAttribute("y2")) - parseFloat(rectY);
+            line.setAttribute("x-diff", xDiff.toString());
+            line.setAttribute("y-diff", yDiff.toString());
         }
         if (dragRects.length > 0) {
             dragRects.forEach(dr => {
@@ -209,6 +261,7 @@ class AnnotationChangeHandler {
         var target = event.target.querySelector(".annotFO");
         this.interactTarget = target;
         //this.canvasMatrix = (document.getElementById("annotationCanvas") as unknown as SVGGraphicsElement).getScreenCTM().inverse()
+        cq.getContainer(this.containerId).classList.add("annotMode");
         // update overal dimensions
         var ptTL = coordinates.getDOMMatrixCoordinates(event.rect, cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
         target.style.width = ptTL.width + 'px';
@@ -223,10 +276,12 @@ class AnnotationChangeHandler {
             var distY = (parseFloat(target.getAttribute('distY'))) || edy - ptDist.y; //matrixTransform(this.canvasMatrix).y 
             target.setAttribute("distX", distX.toString());
             target.setAttribute("distY", distY.toString());
-            if (event.edges.left === true)
+            if (event.edges.left === true) {
                 target.setAttribute("x", (edx - distX).toString());
-            if (event.edges.top === true)
+            }
+            if (event.edges.top === true) {
                 target.setAttribute("y", (edy - distY).toString());
+            }
             //target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
         }
         //update attached line
@@ -238,6 +293,10 @@ class AnnotationChangeHandler {
         if (line !== null) {
             line.setAttribute("x2", rectX);
             line.setAttribute("y2", rectY);
+            var xDiff = parseFloat(rectX) - parseFloat(line.getAttribute("x1"));
+            var yDiff = parseFloat(rectY) - parseFloat(line.getAttribute("y1"));
+            line.setAttribute("x-diff", xDiff.toString());
+            line.setAttribute("y-diff", yDiff.toString());
         }
         if (dragRects.length > 0) {
             dragRects.forEach(dr => {
@@ -275,6 +334,10 @@ class AnnotationChangeHandler {
         if (line !== null) {
             line.setAttribute("x2", rectX);
             line.setAttribute("y2", rectY);
+            var xDiff = parseFloat(rectX) - parseFloat(line.getAttribute("x1"));
+            var yDiff = parseFloat(rectY) - parseFloat(line.getAttribute("y1"));
+            line.setAttribute("x-diff", xDiff.toString());
+            line.setAttribute("y-diff", yDiff.toString());
         }
         if (dragRects.length > 0) {
             dragRects.forEach(dr => {
@@ -293,6 +356,7 @@ class AnnotationChangeHandler {
         if (!this.isInteracting) {
             this.interactTarget.dispatchEvent(this.dragAnnotStartEvent);
         }
+        cq.getContainer(this.containerId).classList.add("annotMode");
         this.isInteracting = true;
         //this.canvasMatrix = (document.getElementById("annotationCanvas") as unknown as SVGGraphicsElement).getScreenCTM().inverse()
         this.dragedRect = target;
@@ -309,6 +373,10 @@ class AnnotationChangeHandler {
         if (target.classList.contains("x1")) {
             line.setAttribute("x1", rectX);
             line.setAttribute("y1", rectY);
+            var xDiff = parseFloat(line.getAttribute("x2")) - parseFloat(rectX);
+            var yDiff = parseFloat(line.getAttribute("y2")) - parseFloat(rectY);
+            line.setAttribute("x-diff", xDiff.toString());
+            line.setAttribute("y-diff", yDiff.toString());
             this.highlightNextAttachObject(target);
         }
         this.interactionOverlay.dispatchEvent(new Event("annotChanged"));
@@ -402,32 +470,38 @@ class AnnotationChangeHandler {
      * @param lineDragRect
      */
     updateAnnotationIDs(objToAttach, lineDragRect, objCoord) {
+        if (!objToAttach)
+            return;
         var line;
         var targetx;
         var targety;
         var highlightRect;
         var parentGroup = lineDragRect.closest("g");
+        document.querySelectorAll(".highlightAnnotation").forEach(h => h.classList.remove("highlightAnnotation"));
+        objToAttach.classList.add("highlightAnnotation");
         var otaBBox = objToAttach.getBoundingClientRect();
         this.annotations.some(annot => {
+            var _a;
             if (annot.sourceID = parentGroup.id) {
                 var pt = coordinates.getDOMMatrixCoordinates(otaBBox, cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
                 annot.targetID = objToAttach.id;
                 targetx = pt.x;
                 targety = pt.y;
-                // draw rect for highlighting
-                if (parentGroup.querySelector(".highlightAnnotation") === null) {
-                    highlightRect = document.createElementNS(constants_1.constants._SVGNS_, "rect");
-                    parentGroup.insertBefore(highlightRect, parentGroup.firstChild);
-                }
-                else {
-                    highlightRect = parentGroup.querySelector(".highlightAnnotation");
-                }
-                var highlightMargin = 0;
-                highlightRect.classList.add("highlightAnnotation");
-                highlightRect.setAttribute("x", (targetx - highlightMargin).toString());
-                highlightRect.setAttribute("y", (targety - highlightMargin).toString());
-                highlightRect.setAttribute("height", (pt.height + 2 * highlightMargin).toString());
-                highlightRect.setAttribute("width", (pt.width + 2 * highlightMargin).toString());
+                // // draw rect for highlighting
+                // if(parentGroup.querySelector(".highlightAnnotation") === null){
+                //     highlightRect = document.createElementNS(c._SVGNS_, "rect")
+                //     parentGroup.insertBefore(highlightRect, parentGroup.firstChild)
+                // }else{
+                //     highlightRect = parentGroup.querySelector(".highlightAnnotation")
+                // }
+                // var highlightMargin = 0
+                // highlightRect.classList.add("highlightAnnotation")
+                // highlightRect.setAttribute("x", (targetx - highlightMargin).toString())
+                // highlightRect.setAttribute("y", (targety - highlightMargin).toString())
+                // highlightRect.setAttribute("height", (pt.height + 2*highlightMargin).toString())
+                // highlightRect.setAttribute("width", (pt.width + 2*highlightMargin).toString())
+                (_a = cq.getInteractOverlay(this.containerId).querySelector(`#${annot.sourceID}`)) === null || _a === void 0 ? void 0 : _a.setAttribute("targetId", objToAttach.id);
+                annot.targetID = objToAttach.id;
                 return annot.sourceID === parentGroup.id;
             }
         });
@@ -436,10 +510,6 @@ class AnnotationChangeHandler {
             x: targetx,
             y: targety
         };
-        // this.container.querySelectorAll("*[fill=green]").forEach(fg => {
-        //     fg.removeAttribute("fill")
-        // })
-        //objToAttach.setAttribute("fill", "green")
         // some rules for custom shapes
         if (objToAttach.classList.contains("customAnnotShape")) {
             parentGroup.querySelector(".highlightAnnotation").remove();
@@ -487,6 +557,10 @@ class AnnotationChangeHandler {
         var line = this.dragedRect.closest("g").querySelector(".annotLine");
         line.setAttribute("x1", this.snapCoords.x.toString());
         line.setAttribute("y1", this.snapCoords.y.toString());
+        var xDiff = parseFloat(line.getAttribute("x2")) - this.snapCoords.x;
+        var yDiff = parseFloat(line.getAttribute("y2")) - this.snapCoords.y;
+        line.setAttribute("x-diff", xDiff.toString());
+        line.setAttribute("y-diff", yDiff.toString());
         // clean up after snap
         this.interactionOverlay.querySelector("#annotationCanvas").querySelectorAll("g").forEach(el => {
             var shapeChild = el.querySelector(".customAnnotShape");
@@ -514,42 +588,39 @@ class AnnotationChangeHandler {
         return this;
     }
     setAnnotations(annotations) {
-        var _a, _b, _c, _d;
         this.annotations = annotations;
-        var newFactor = parseInt((_b = (_a = cq.getContainer(this.containerId).querySelector("#svgContainer").style) === null || _a === void 0 ? void 0 : _a.width) === null || _b === void 0 ? void 0 : _b.split("%")[0]) || 100;
-        if (newFactor === this.factor)
-            return this;
-        var that = this;
-        function setXYWH(element) {
-            var x = parseFloat(element.getAttribute("x")) / that.factor * newFactor;
-            var y = parseFloat(element.getAttribute("y")) / that.factor * newFactor;
-            var w = parseFloat(element.getAttribute("width")) / that.factor * newFactor;
-            var h = parseFloat(element.getAttribute("height")) / that.factor * newFactor;
-            element.setAttribute("x", x.toString());
-            element.setAttribute("y", y.toString());
-            element.setAttribute("width", w.toString());
-            element.setAttribute("height", h.toString());
-        }
-        function setLineCoords(line) {
-            var x1 = parseFloat(line.getAttribute("x1")) / that.factor * newFactor;
-            var y1 = parseFloat(line.getAttribute("y1")) / that.factor * newFactor;
-            var x2 = parseFloat(line.getAttribute("x2")) / that.factor * newFactor;
-            var y2 = parseFloat(line.getAttribute("y2")) / that.factor * newFactor;
-            line.setAttribute("x1", x1.toString());
-            line.setAttribute("y1", y1.toString());
-            line.setAttribute("x2", x2.toString());
-            line.setAttribute("y2", y2.toString());
-        }
-        this.annotationCanvas.querySelectorAll(":scope > *").forEach(a => {
-            if (a.tagName === "rect") {
-                setXYWH(a);
-            }
-            else {
-                a.querySelectorAll("[x][y][width][height]").forEach(e => setXYWH(e));
-                a.querySelectorAll("line").forEach(l => setLineCoords(l));
-            }
-        });
-        that.factor = parseInt((_d = (_c = cq.getContainer(this.containerId).querySelector("#svgContainer").style) === null || _c === void 0 ? void 0 : _c.width) === null || _d === void 0 ? void 0 : _d.split("%")[0]);
+        // var newFactor = parseInt((cq.getContainer(this.containerId).querySelector("#svgContainer") as HTMLElement).style?.width?.split("%")[0]) || 100
+        // if (newFactor === this.factor) return this
+        // var that = this
+        // function setXYWH(element) {
+        //     var x = parseFloat(element.getAttribute("x")) / that.factor * newFactor
+        //     var y = parseFloat(element.getAttribute("y")) / that.factor * newFactor
+        //     var w = parseFloat(element.getAttribute("width")) / that.factor * newFactor
+        //     var h = parseFloat(element.getAttribute("height")) / that.factor * newFactor
+        //     element.setAttribute("x", x.toString())
+        //     element.setAttribute("y", y.toString())
+        //     element.setAttribute("width", w.toString())
+        //     element.setAttribute("height", h.toString())
+        // }
+        // function setLineCoords(line) {
+        //     var x1 = parseFloat(line.getAttribute("x1")) / that.factor * newFactor
+        //     var y1 = parseFloat(line.getAttribute("y1")) / that.factor * newFactor
+        //     var x2 = parseFloat(line.getAttribute("x2")) / that.factor * newFactor
+        //     var y2 = parseFloat(line.getAttribute("y2")) / that.factor * newFactor
+        //     line.setAttribute("x1", x1.toString())
+        //     line.setAttribute("y1", y1.toString())
+        //     line.setAttribute("x2", x2.toString())
+        //     line.setAttribute("y2", y2.toString())
+        // }
+        // this.annotationCanvas.querySelectorAll(":scope > *").forEach(a => {
+        //     if (a.tagName === "rect") {
+        //         setXYWH(a)
+        //     } else {
+        //         a.querySelectorAll("[x][y][width][height]").forEach(e => setXYWH(e))
+        //         a.querySelectorAll("line").forEach(l => setLineCoords(l))
+        //     }
+        // })
+        // that.factor = parseInt((cq.getContainer(this.containerId).querySelector("#svgContainer") as HTMLElement).style?.width?.split("%")[0])
         return this;
     }
     setm2s(m2s) {