@operato/image-marker 8.0.0-alpha.23 → 8.0.0-alpha.25

package/dist/src/ox-image-marker.js

@@ -1,42 +1,41 @@
 import { __decorate } from "tslib";
 import './ox-image-marker-mode';
 import { html, css, svg, nothing } from 'lit';
-import { state, customElement } from 'lit/decorators.js';
+import { query, state, customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { BaseImageMarker } from './base-image-marker';
 let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     constructor() {
         super(...arguments);
-        this.currentMode = 'select';
+        this.currentMode = 'edit';
         this.selectedShape = null;
         this.drawing = false;
         this.startX = 0;
         this.startY = 0;
         this.offsetX = 0;
         this.offsetY = 0;
+        this.shapeMoveThreshold = 10;
+        this.shapeMoveInitiated = false;
         this.onSvgTouchStart = (event) => {
             event.preventDefault();
             if (this.isDoubleTouch(event)) {
                 this.resetZoom();
             }
             if (event.touches.length === 1) {
-                this.selectedShape = null;
-                this.shapes = this.shapes.map(s => {
-                    return { ...s, selected: false };
-                });
-                if (this.currentMode === 'move') {
-                    this.startPanning(event);
-                }
-                else if (this.currentMode === 'draw') {
+                this.setSelectedShape(null);
+                if (this.currentMode === 'shape') {
                     this.startDrawing(event);
                 }
+                else {
+                    this.startPanning(event);
+                }
             }
             else if (event.touches.length === 2) {
                 this.startPinchZooming(event);
             }
         };
-        this.onDrawingMouseMove = (event) => {
+        this.onMouseMoveForDrawing = (event) => {
             if (!this.drawing) {
                 return;
             }
@@ -100,8 +99,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                     default:
                         return;
                 }
-                this.selectedShape = newShape;
                 this.shapes = [...this.shapes, newShape];
+                this.setSelectedShape(newShape);
             }
             if (this.selectedShape) {
                 switch (this.selectedShape.type) {
@@ -132,85 +131,90 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                 this.requestUpdate();
             }
         };
-        this.onDrawingMouseUp = (event) => {
+        this.onMouseUpForDrawing = (event) => {
             event.preventDefault();
             this.drawing = false;
             const svg = this.svg;
             if ('touches' in event) {
-                svg.removeEventListener('touchmove', this.onDrawingMouseMove);
-                svg.removeEventListener('touchend', this.onDrawingMouseUp);
+                svg.removeEventListener('touchmove', this.onMouseMoveForDrawing);
+                svg.removeEventListener('touchend', this.onMouseUpForDrawing);
             }
             else {
-                svg.removeEventListener('mousemove', this.onDrawingMouseMove);
-                svg.removeEventListener('mouseup', this.onDrawingMouseUp);
-            }
-            if (this.selectedShape) {
-                this.selectedShape.selected = true;
+                svg.removeEventListener('mousemove', this.onMouseMoveForDrawing);
+                svg.removeEventListener('mouseup', this.onMouseUpForDrawing);
             }
+            this.imageMarkerMode.setMode('edit');
             this.requestUpdate();
         };
-        this.onShapeMouseMove = (event) => {
+        this.onMouseMoveOnShape = (event) => {
             if (!this.selectedShape) {
                 return;
             }
+            if ('touches' in event && event.touches.length > 1) {
+                return;
+            }
             event.preventDefault();
             const { x, y } = this.getSvgPoint(event);
+            const dx = x - this.offsetX;
+            const dy = y - this.offsetY;
+            if (!this.shapeMoveInitiated) {
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < this.shapeMoveThreshold) {
+                    return;
+                }
+                this.shapeMoveInitiated = true;
+            }
+            this.offsetX = x;
+            this.offsetY = y;
             switch (this.selectedShape.type) {
                 case 'text':
                 case 'rectangle':
-                    this.selectedShape.x = x - this.offsetX;
-                    this.selectedShape.y = y - this.offsetY;
+                    this.selectedShape.x += dx;
+                    this.selectedShape.y += dy;
                     break;
                 case 'circle':
-                    this.selectedShape.cx = x - this.offsetX;
-                    this.selectedShape.cy = y - this.offsetY;
+                    this.selectedShape.cx += dx;
+                    this.selectedShape.cy += dy;
                     break;
                 case 'triangle':
                     const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
-                    const [ox, oy] = points[0];
-                    this.selectedShape.points = points
-                        .map(([px, py]) => [px - ox + x - this.offsetX, py - oy + y - this.offsetY].join(','))
-                        .join(' ');
+                    this.selectedShape.points = points.map(([px, py]) => [px + dx, py + dy].join(',')).join(' ');
                     break;
                 case 'line':
                 case 'arrow':
-                    const dxLine = x - this.offsetX;
-                    const dyLine = y - this.offsetY;
-                    const deltaX = dxLine - this.selectedShape.x1;
-                    const deltaY = dyLine - this.selectedShape.y1;
-                    this.selectedShape.x1 = dxLine;
-                    this.selectedShape.y1 = dyLine;
-                    this.selectedShape.x2 = this.selectedShape.x2 + deltaX;
-                    this.selectedShape.y2 = this.selectedShape.y2 + deltaY;
+                    this.selectedShape.x1 += dx;
+                    this.selectedShape.x2 += dx;
+                    this.selectedShape.y1 += dy;
+                    this.selectedShape.y2 += dy;
                     break;
             }
             this.requestUpdate();
         };
-        this.onShapeMouseUp = (event) => {
+        this.onMouseUpOnShape = (event) => {
+            if (!this.selectedShape) {
+                return;
+            }
+            if ('touches' in event && event.touches.length > 1) {
+                return;
+            }
             event.preventDefault();
             const svg = this.svg;
             if ('touches' in event) {
-                svg.removeEventListener('touchmove', this.onShapeMouseMove);
-                svg.removeEventListener('touchend', this.onShapeMouseUp);
+                svg.removeEventListener('touchmove', this.onMouseMoveOnShape);
+                svg.removeEventListener('touchend', this.onMouseUpOnShape);
             }
             else {
-                svg.removeEventListener('mousemove', this.onShapeMouseMove);
-                svg.removeEventListener('mouseup', this.onShapeMouseUp);
+                svg.removeEventListener('mousemove', this.onMouseMoveOnShape);
+                svg.removeEventListener('mouseup', this.onMouseUpOnShape);
             }
         };
-        this.onHandleMouseMove = (event) => {
+        this.onResizeHandleMouseMove = (event) => {
             if (!this.selectedShape) {
                 return;
             }
             event.preventDefault();
             const { x, y } = this.getSvgPoint(event);
             switch (this.selectedShape.type) {
-                // case 'text':
-                //   this.selectedShape.width = Math.abs(x - this.selectedShape.x!)
-                //   this.selectedShape.height = Math.abs(y - this.selectedShape.y!)
-                //   if (x < this.selectedShape.x!) this.selectedShape.x = x
-                //   if (y < this.selectedShape.y!) this.selectedShape.y = y
-                //   break
                 case 'rectangle':
                     const startX = this.selectedShape.x;
                     const startY = this.selectedShape.y;
@@ -278,18 +282,17 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             }
             this.requestUpdate();
         };
-        this.onHandleMouseUp = (event) => {
+        this.onResizeHandleMouseUp = (event) => {
             event.preventDefault();
             const svg = this.svg;
             if ('touches' in event) {
-                svg.removeEventListener('touchmove', this.onHandleMouseMove);
-                svg.removeEventListener('touchend', this.onHandleMouseUp);
+                svg.removeEventListener('touchmove', this.onResizeHandleMouseMove);
+                svg.removeEventListener('touchend', this.onResizeHandleMouseUp);
             }
             else {
-                svg.removeEventListener('mousemove', this.onHandleMouseMove);
-                svg.removeEventListener('mouseup', this.onHandleMouseUp);
+                svg.removeEventListener('mousemove', this.onResizeHandleMouseMove);
+                svg.removeEventListener('mouseup', this.onResizeHandleMouseUp);
             }
-            this.selectedShape = null;
         };
         this.onFocus = () => {
             this.addEventListener('keydown', this.handleKeyDown);
@@ -320,11 +323,11 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
       }
 
       svg {
-        cursor: crosshair;
+        cursor: default;
       }
 
-      svg.dragging {
-        cursor: move;
+      svg[drawing] {
+        cursor: crosshair;
       }
 
       .resize-handle {
@@ -352,6 +355,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
           @wheel=${this.onSvgWheel}
           @dblclick=${this.onSvgDoubleClick}
           viewBox=${this.viewBox}
+          ?drawing=${this.currentMode == 'shape'}
         >
           <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
           ${this.shapes.map(shape => keyed(shape.id, this.renderShape(shape)))}
@@ -379,16 +383,13 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     }
     onSvgMouseDown(event) {
         event.preventDefault();
-        this.selectedShape = null;
-        this.shapes = this.shapes.map(s => {
-            return { ...s, selected: false };
-        });
-        if (this.currentMode === 'move') {
-            this.startPanning(event);
-        }
-        else if (this.currentMode === 'draw') {
+        this.setSelectedShape(null);
+        if (this.currentMode === 'shape') {
             this.startDrawing(event);
         }
+        else {
+            this.startPanning(event);
+        }
     }
     startDrawing(event) {
         const { x, y } = this.getSvgPoint(event);
@@ -408,18 +409,32 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             this.drawing = true;
         }
         if ('touches' in event) {
-            this.svg.addEventListener('touchmove', this.onDrawingMouseMove);
-            this.svg.addEventListener('touchend', this.onDrawingMouseUp);
+            this.svg.addEventListener('touchmove', this.onMouseMoveForDrawing);
+            this.svg.addEventListener('touchend', this.onMouseUpForDrawing);
         }
         else {
-            this.svg.addEventListener('mousemove', this.onDrawingMouseMove);
-            this.svg.addEventListener('mouseup', this.onDrawingMouseUp);
+            this.svg.addEventListener('mousemove', this.onMouseMoveForDrawing);
+            this.svg.addEventListener('mouseup', this.onMouseUpForDrawing);
         }
     }
     setMode(mode, shapeType) {
+        if (mode == 'view') {
+            this.setSelectedShape(null);
+        }
         this.currentMode = mode;
         this.currentShapeType = shapeType;
     }
+    setSelectedShape(shape) {
+        this.selectedShape = shape;
+        if (!shape) {
+            this.shapes = this.shapes.map(s => {
+                return { ...s, selected: false };
+            });
+        }
+        else {
+            this.selectedShape.selected = true;
+        }
+    }
     getSvgPoint(event) {
         const { x, y } = this.getPointFromEvent(event);
         const svg = this.svg;
@@ -444,8 +459,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             y="${shape.y}"
             fill="${commonAttrs.stroke}"
             style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
-            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
+            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
             @dblclick="${(e) => this.onTextDoubleClick(e, shape)}"
           >${shape.text}</text>
         `;
@@ -460,8 +475,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
+            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
           ></rect>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -475,8 +490,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
+            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
           ></circle>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -488,8 +503,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
+            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
           ></polygon>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -503,8 +518,20 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke="${commonAttrs.stroke}"
             stroke-width="${commonAttrs['stroke-width']}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
+          ></line>
+          <line
+            x1="${shape.x1}"
+            y1="${shape.y1}"
+            x2="${shape.x2 ?? shape.x1}"
+            y2="${shape.y2 ?? shape.y1}"
+            stroke="${commonAttrs.stroke}"
+            stroke-width="25"
+            stroke-opacity="0"
+            pointer-events="stroke"
+            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
+            @mouseleave="${() => (this.svg.style.cursor = 'default')}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -524,8 +551,20 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             marker-end="url(#arrowhead-${shape.id})"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
+          ></line>
+          <line
+            x1="${shape.x1}"
+            y1="${shape.y1}"
+            x2="${shape.x2 ?? shape.x1}"
+            y2="${shape.y2 ?? shape.y1}"
+            stroke="${commonAttrs.stroke}"
+            stroke-width="25"
+            stroke-opacity="0"
+            pointer-events="stroke"
+            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
+            @mouseleave="${() => (this.svg.style.cursor = 'default')}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -533,42 +572,32 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                 return nothing;
         }
     }
-    onShapeMouseDown(event, shape) {
+    onMouseDownOnShape(event, shape) {
+        if (this.currentMode !== 'edit') {
+            return;
+        }
+        if ('touches' in event && event.touches.length > 1) {
+            return;
+        }
         event.stopPropagation();
         event.preventDefault();
         this.shapes = this.shapes.map(s => ({
             ...s,
             selected: s.id === shape.id
         }));
-        this.selectedShape = this.shapes.find(s => s.id == shape.id);
+        this.shapeMoveInitiated = false;
+        this.setSelectedShape(this.shapes.find(s => s.id == shape.id));
         const { x, y } = this.getSvgPoint(event);
-        switch (shape.type) {
-            case 'text':
-            case 'rectangle':
-            case 'circle':
-                this.offsetX = x - (shape.x || shape.cx || 0);
-                this.offsetY = y - (shape.y || shape.cy || 0);
-                break;
-            case 'triangle':
-                const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
-                const [px, py] = points[0] || [0, 0];
-                this.offsetX = x - px;
-                this.offsetY = y - py;
-                break;
-            case 'line':
-            case 'arrow':
-                this.offsetX = x - shape.x1;
-                this.offsetY = y - shape.y1;
-                break;
-        }
+        this.offsetX = x;
+        this.offsetY = y;
         const svg = this.svg;
         if ('touches' in event) {
-            svg.addEventListener('touchmove', this.onShapeMouseMove);
-            svg.addEventListener('touchend', this.onShapeMouseUp);
+            svg.addEventListener('touchmove', this.onMouseMoveOnShape);
+            svg.addEventListener('touchend', this.onMouseUpOnShape);
         }
         else {
-            svg.addEventListener('mousemove', this.onShapeMouseMove);
-            svg.addEventListener('mouseup', this.onShapeMouseUp);
+            svg.addEventListener('mousemove', this.onMouseMoveOnShape);
+            svg.addEventListener('mouseup', this.onMouseUpOnShape);
         }
     }
     renderResizeHandles(shape) {
@@ -618,27 +647,27 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
               stroke="black"
               class="resize-handle"
               style="cursor: ${handle.cursor};"
-              @mousedown="${(e) => this.onHandleMouseDown(e, shape, handle)}"
-              @touchstart="${(e) => this.onHandleMouseDown(e, shape, handle)}"
+              @mousedown="${(e) => this.onResizeHandleMouseDown(e, shape, handle)}"
+              @touchstart="${(e) => this.onResizeHandleMouseDown(e, shape, handle)}"
             ></rect>
           </g>
         `)}
     `;
     }
-    onHandleMouseDown(event, shape, handle) {
+    onResizeHandleMouseDown(event, shape, handle) {
         event.stopPropagation();
         event.preventDefault();
-        this.selectedShape = shape;
+        this.setSelectedShape(shape);
         this.offsetX = handle.x;
         this.offsetY = handle.y;
         const svg = this.svg;
         if ('touches' in event) {
-            svg.addEventListener('touchmove', this.onHandleMouseMove);
-            svg.addEventListener('touchend', this.onHandleMouseUp);
+            svg.addEventListener('touchmove', this.onResizeHandleMouseMove);
+            svg.addEventListener('touchend', this.onResizeHandleMouseUp);
         }
         else {
-            svg.addEventListener('mousemove', this.onHandleMouseMove);
-            svg.addEventListener('mouseup', this.onHandleMouseUp);
+            svg.addEventListener('mousemove', this.onResizeHandleMouseMove);
+            svg.addEventListener('mouseup', this.onResizeHandleMouseUp);
         }
     }
     onTextDoubleClick(event, shape) {
@@ -750,7 +779,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     deleteSelectedShape() {
         if (this.selectedShape) {
             this.shapes = this.shapes.filter(s => s.id !== this.selectedShape.id);
-            this.selectedShape = null;
+            this.setSelectedShape(null);
             this.requestUpdate();
         }
     }
@@ -764,6 +793,9 @@ __decorate([
 __decorate([
     state()
 ], OxImageMarker.prototype, "selectedShape", void 0);
+__decorate([
+    query('ox-image-marker-mode')
+], OxImageMarker.prototype, "imageMarkerMode", void 0);
 OxImageMarker = __decorate([
     customElement('ox-image-marker')
 ], OxImageMarker);