@evercam/ui 1.0.0-preview-fix-timeline-labels-b5096fc7b → 1.0.0-preview-addingZoomToAreaSelector-d22180b4f

package/dist/components/EPolygonOverlay.vue.d.ts

@@ -17,6 +17,9 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
         left: number;
         top: number;
     };
+    mouseDownX: number;
+    mouseDownY: number;
+    dragThreshold: number;
 }, {
     onResize(): void;
     getRelativePosition(event: MouseEvent): {
@@ -34,6 +37,10 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
     distanceToLineSegment(p1: Point, p2: Point, p: Point): number;
     saveSelection(): void;
 }, {
+    scaledNodeSize: number;
+    scaledStrokeWidth: number;
+    scaledStrokeDasharray: string;
+    scaledThinStrokeWidth: number;
     controlsStyles: Record<string, string>;
     polygonPosition: {
         left: number;

package/dist/index.d.ts

@@ -1324,6 +1324,9 @@ export declare const components: {
             left: number;
             top: number;
         };
+        mouseDownX: number;
+        mouseDownY: number;
+        dragThreshold: number;
     }, {
         onResize(): void;
         getRelativePosition(event: MouseEvent): {
@@ -1341,6 +1344,10 @@ export declare const components: {
         distanceToLineSegment(p1: import('./types').Point, p2: import('./types').Point, p: import('./types').Point): number;
         saveSelection(): void;
     }, {
+        scaledNodeSize: number;
+        scaledStrokeWidth: number;
+        scaledStrokeDasharray: string;
+        scaledThinStrokeWidth: number;
         controlsStyles: Record<string, string>;
         polygonPosition: {
             left: number;

package/dist/index.mjs

@@ -21968,10 +21968,31 @@ const bd = Cd.exports, xd = F.extend({
       strokeDasharray: "5,5",
       width: null,
       height: null,
-      containerRect: {}
+      containerRect: {},
+      mouseDownX: null,
+      mouseDownY: null,
+      dragThreshold: 5
     };
   },
   computed: {
+    scaledNodeSize() {
+      return Math.max(4, this.nodeSize / this.scale);
+    },
+    scaledStrokeWidth() {
+      return Math.max(1, 2 / this.scale);
+    },
+    scaledStrokeDasharray() {
+      if (!this.strokeDasharray || !this.scale)
+        return this.strokeDasharray;
+      const t = 2, e = 12;
+      return this.strokeDasharray.split(",").map((r) => {
+        const n = Number(r) / this.scale;
+        return Math.max(t, Math.min(e, n));
+      }).join(",");
+    },
+    scaledThinStrokeWidth() {
+      return 1 / this.scale;
+    },
     controlsStyles() {
       const t = this.polygonPosition;
       if (!t)
@@ -22048,7 +22069,7 @@ const bd = Cd.exports, xd = F.extend({
     },
     handleMouseDown(t) {
       const e = this.$refs.container, r = e.getBoundingClientRect();
-      e.contains(t.target) && this.isRectangle && (this.points = [], this.startX = (t.clientX - r.left) / this.scale, this.startY = (t.clientY - r.top) / this.scale, this.currentX = this.startX, this.currentY = this.startY, this.isMouseDown = !0);
+      e.contains(t.target) && (this.mouseDownX = t.clientX, this.mouseDownY = t.clientY, this.isRectangle && (this.points = [], this.startX = (t.clientX - r.left) / this.scale, this.startY = (t.clientY - r.top) / this.scale, this.currentX = this.startX, this.currentY = this.startY, this.isMouseDown = !0));
     },
     handleMouseMove(t) {
       const { x: e, y: r } = this.getRelativePosition(t);
@@ -22062,14 +22083,14 @@ const bd = Cd.exports, xd = F.extend({
       const { x: e, y: r, container: n } = this.getRelativePosition(t);
       if (this.isRectangle && this.isMouseDown) {
         this.isMouseDown = !1;
-        const s = Math.min(this.startY, this.currentY), i = Math.min(this.startX, this.currentX), a = Math.max(this.startX, this.currentX), c = Math.max(this.startY, this.currentY);
-        if (i === a || s === c)
+        const a = Math.min(this.startY, this.currentY), c = Math.min(this.startX, this.currentX), o = Math.max(this.startX, this.currentX), l = Math.max(this.startY, this.currentY);
+        if (c === o || a === l)
           return;
         this.points = [
-          { x: i, y: s },
-          { x: a, y: s },
-          { x: a, y: c },
-          { x: i, y: c }
+          { x: c, y: a },
+          { x: o, y: a },
+          { x: o, y: l },
+          { x: c, y: l }
         ];
         return;
       }
@@ -22077,7 +22098,10 @@ const bd = Cd.exports, xd = F.extend({
         this.isDraggingPoint = !1, this.draggingPointIndex = -1;
         return;
       }
-      n.contains(t.target) && this.insertPoint({ x: e, y: r });
+      if (!n.contains(t.target))
+        return;
+      const s = Math.abs(t.clientX - this.mouseDownX), i = Math.abs(t.clientY - this.mouseDownY);
+      s > this.dragThreshold || i > this.dragThreshold || this.insertPoint({ x: e, y: r });
     },
     removePoint(t) {
       this.points.splice(t, 1);
@@ -22127,8 +22151,8 @@ var wd = function() {
     }, click: function(a) {
       return a.stopPropagation(), e.$emit("polygon-select", i);
     } } });
-  }), r("text", [e._v("test")])], 2) : r("svg", { staticClass: "polygon-overlay" }, [e.useMask && e.points.length > 2 ? [r("defs", [r("mask", { attrs: { id: "polygon-mask" } }, [r("rect", { attrs: { width: "100%", height: "100%", fill: "white" } }), r("polygon", { attrs: { points: e.polygonPoints, fill: "black" } })]), r("mask", { attrs: { id: "stroke-mask" } }, [r("rect", { attrs: { width: "100%", height: "100%", fill: "white" } }), r("polygon", { attrs: { points: e.polygonPoints, fill: "black" } })])]), r("rect", { attrs: { width: "100%", height: "100%", fill: "rgba(0,0,0,0.5)", mask: "url(#polygon-mask)" } }), r("polygon", { staticStyle: { filter: "blur(4px)" }, attrs: { points: e.polygonPoints, fill: "none", stroke: "#029eff", "stroke-width": "1", mask: "url(#stroke-mask)" } }, [r("animate", { attrs: { attributeName: "opacity", values: "0.67;0.8;0.67", dur: "1.5s", repeatCount: "indefinite" } }), r("animate", { attrs: { attributeName: "stroke-width", values: "1;6;1", dur: "1.5s", repeatCount: "indefinite" } })])] : e._e(), e.points.length > 2 ? r("polygon", { staticStyle: { animation: "border-dance 1s infinite linear" }, attrs: { points: e.polygonPoints, fill: e.useMask ? "transparent" : e.fillColor, stroke: e.lineColor, "stroke-width": "2", "stroke-dasharray": e.strokeDasharray } }) : e._e(), e.points.length === 2 ? r("line", { attrs: { x1: e.points[0].x, y1: e.points[0].y, x2: e.points[1].x, y2: e.points[1].y, stroke: e.lineColor, "stroke-width": "2", "stroke-dasharray": e.strokeDasharray } }) : e._e(), e._l(e.points, function(s, i) {
-    return r("circle", { directives: [{ name: "show", rawName: "v-show", value: !e.isReadOnly, expression: "!isReadOnly" }], key: i, staticClass: "polygon-point", attrs: { cx: s.x, cy: s.y, r: e.nodeSize, fill: e.lineColor, stroke: "white", "stroke-width": "2" }, on: { click: function(a) {
+  }), r("text", [e._v("test")])], 2) : r("svg", { staticClass: "polygon-overlay" }, [e.useMask && e.points.length > 2 ? [r("defs", [r("mask", { attrs: { id: "polygon-mask" } }, [r("rect", { attrs: { width: "100%", height: "100%", fill: "white" } }), r("polygon", { attrs: { points: e.polygonPoints, fill: "black" } })]), r("mask", { attrs: { id: "stroke-mask" } }, [r("rect", { attrs: { width: "100%", height: "100%", fill: "white" } }), r("polygon", { attrs: { points: e.polygonPoints, fill: "black" } })])]), r("rect", { attrs: { width: "100%", height: "100%", fill: "rgba(0,0,0,0.5)", mask: "url(#polygon-mask)" } }), r("polygon", { staticStyle: { filter: "blur(4px)" }, attrs: { points: e.polygonPoints, fill: "none", stroke: "#029eff", "stroke-width": "1", mask: "url(#stroke-mask)" } }, [r("animate", { attrs: { attributeName: "opacity", values: "0.67;0.8;0.67", dur: "1.5s", repeatCount: "indefinite" } }), r("animate", { attrs: { attributeName: "stroke-width", values: "1;6;1", dur: "1.5s", repeatCount: "indefinite" } })])] : e._e(), e.points.length > 2 ? r("polygon", { staticStyle: { animation: "border-dance 1s infinite linear" }, attrs: { points: e.polygonPoints, fill: e.useMask ? "transparent" : e.fillColor, stroke: e.lineColor, "stroke-width": e.scaledStrokeWidth, "stroke-dasharray": e.scaledStrokeDasharray } }) : e._e(), e.points.length === 2 ? r("line", { attrs: { x1: e.points[0].x, y1: e.points[0].y, x2: e.points[1].x, y2: e.points[1].y, stroke: e.lineColor, "stroke-width": e.scaledStrokeWidth, "stroke-dasharray": e.strokeDasharray } }) : e._e(), e._l(e.points, function(s, i) {
+    return r("circle", { key: i, staticClass: "polygon-point", attrs: { cx: s.x, cy: s.y, r: e.scaledNodeSize, fill: e.lineColor, stroke: "white", "stroke-width": e.scaledStrokeWidth }, on: { click: function(a) {
       return a.shiftKey ? e.removePoint(i) : null;
     }, mousedown: function(a) {
       return a.stopPropagation(), e.startDraggingPoint(a, i);