@operato/image-marker 8.0.0-alpha.22 → 8.0.0-alpha.24

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

@@ -1,14 +1,14 @@
 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;
@@ -16,26 +16,28 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         this.offsetX = 0;
         this.offsetY = 0;
         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;
             }
+            event.preventDefault();
             const { x, y } = this.getSvgPoint(event);
             const minDistance = 5;
             const distance = Math.sqrt(Math.pow(x - this.startX, 2) + Math.pow(y - this.startY, 2));
@@ -95,8 +97,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) {
@@ -127,26 +129,26 @@ 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;
             }
+            event.preventDefault();
             const { x, y } = this.getSvgPoint(event);
             switch (this.selectedShape.type) {
                 case 'text':
@@ -179,29 +181,25 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             }
             this.requestUpdate();
         };
-        this.onShapeMouseUp = (event) => {
+        this.onMouseUpOnShape = (event) => {
+            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;
@@ -269,17 +267,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);
@@ -310,11 +308,11 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
       }
 
       svg {
-        cursor: crosshair;
+        cursor: default;
       }
 
-      svg.dragging {
-        cursor: move;
+      svg[drawing] {
+        cursor: crosshair;
       }
 
       .resize-handle {
@@ -342,6 +340,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)))}
@@ -355,6 +354,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             const { mode, shapeType } = e.detail;
             this.setMode(mode, shapeType);
         }}
+        @tap-fit-size=${() => this.resetZoom()}
         @tap-delete=${() => this.deleteSelectedShape()}
         @tap-save=${() => {
             this.dispatchEvent(new CustomEvent('shapes-changed', {
@@ -367,16 +367,14 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     `;
     }
     onSvgMouseDown(event) {
-        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') {
+        event.preventDefault();
+        this.setSelectedShape(null);
+        if (this.currentMode === 'shape') {
             this.startDrawing(event);
         }
+        else {
+            this.startPanning(event);
+        }
     }
     startDrawing(event) {
         const { x, y } = this.getSvgPoint(event);
@@ -396,18 +394,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;
@@ -432,8 +444,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>
         `;
@@ -448,8 +460,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) : ''}
         `;
@@ -463,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)}"
           ></circle>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -476,8 +488,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) : ''}
         `;
@@ -491,8 +503,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) : ''}
         `;
@@ -512,8 +536,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) : ''}
         `;
@@ -521,13 +557,17 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                 return nothing;
         }
     }
-    onShapeMouseDown(event, shape) {
+    onMouseDownOnShape(event, shape) {
+        if (this.currentMode !== 'edit') {
+            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.setSelectedShape(this.shapes.find(s => s.id == shape.id));
         const { x, y } = this.getSvgPoint(event);
         switch (shape.type) {
             case 'text':
@@ -550,12 +590,12 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         }
         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) {
@@ -605,30 +645,32 @@ 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();
-        this.selectedShape = shape;
+        event.preventDefault();
+        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) {
         event.stopPropagation();
+        event.preventDefault();
         const textElement = event.target;
         this.showTextInput(textElement, shape);
     }
@@ -735,7 +777,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();
         }
     }
@@ -749,6 +791,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);