@operato/image-marker 8.0.0-alpha.29 → 8.0.0-alpha.37

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

@@ -10,6 +10,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         super(...arguments);
         this.currentMode = 'edit';
         this.selectedShape = null;
+        // private drawingStarted: boolean = false
         this.drawing = false;
         this.startX = 0;
         this.startY = 0;
@@ -17,142 +18,14 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         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.setSelectedShape(null);
-                if (this.currentMode === 'shape') {
-                    this.startDrawing(event);
-                }
-                else {
-                    this.startPanning(event);
-                }
-            }
-            else if (event.touches.length === 2) {
-                this.startPinchZooming(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));
-            if (!this.selectedShape && distance >= minDistance) {
-                let newShape;
-                switch (this.currentShapeType) {
-                    case 'rectangle':
-                        newShape = {
-                            id: Date.now().toString(),
-                            type: 'rectangle',
-                            x: this.startX,
-                            y: this.startY,
-                            width: 0,
-                            height: 0
-                        };
-                        break;
-                    case 'circle':
-                        newShape = {
-                            id: Date.now().toString(),
-                            type: 'circle',
-                            cx: this.startX,
-                            cy: this.startY,
-                            r: 0
-                        };
-                        break;
-                    case 'triangle':
-                        newShape = {
-                            id: Date.now().toString(),
-                            type: 'triangle',
-                            x1: this.startX,
-                            y1: this.startY,
-                            width: 0,
-                            height: 0,
-                            points: `${this.startX},${this.startY} ${this.startX},${this.startY} ${this.startX},${this.startY}`
-                        };
-                        break;
-                    case 'line':
-                        newShape = {
-                            id: Date.now().toString(),
-                            type: 'line',
-                            x1: this.startX,
-                            y1: this.startY,
-                            width: 0,
-                            height: 0
-                        };
-                        break;
-                    case 'arrow':
-                        newShape = {
-                            id: Date.now().toString(),
-                            type: 'arrow',
-                            x1: this.startX,
-                            y1: this.startY,
-                            width: 0,
-                            height: 0
-                        };
-                        break;
-                    default:
-                        return;
-                }
-                this.shapes = [...this.shapes, newShape];
-                this.setSelectedShape(newShape);
-            }
-            if (this.selectedShape) {
-                switch (this.selectedShape.type) {
-                    case 'rectangle':
-                        this.selectedShape.x = Math.min(x, this.startX);
-                        this.selectedShape.y = Math.min(y, this.startY);
-                        this.selectedShape.width = Math.abs(x - this.startX);
-                        this.selectedShape.height = Math.abs(y - this.startY);
-                        break;
-                    case 'circle':
-                        const dx = x - this.selectedShape.cx;
-                        const dy = y - this.selectedShape.cy;
-                        this.selectedShape.r = Math.sqrt(dx * dx + dy * dy);
-                        break;
-                    case 'triangle':
-                        const x2 = x;
-                        const y2 = y;
-                        const x3 = this.startX - (x - this.startX);
-                        const y3 = y;
-                        this.selectedShape.points = `${this.startX},${this.startY} ${x2},${y2} ${x3},${y3}`;
-                        break;
-                    case 'line':
-                    case 'arrow':
-                        this.selectedShape.x2 = x;
-                        this.selectedShape.y2 = y;
-                        break;
-                }
-                this.requestUpdate();
-            }
-        };
-        this.onMouseUpForDrawing = (event) => {
-            event.preventDefault();
-            this.drawing = false;
-            const svg = this.svg;
-            if ('touches' in event) {
-                svg.removeEventListener('touchmove', this.onMouseMoveForDrawing);
-                svg.removeEventListener('touchend', this.onMouseUpForDrawing);
-            }
-            else {
-                svg.removeEventListener('mousemove', this.onMouseMoveForDrawing);
-                svg.removeEventListener('mouseup', this.onMouseUpForDrawing);
-            }
-            this.imageMarkerMode.setMode('edit');
-            this.requestUpdate();
-        };
-        this.onMouseMoveOnShape = (event) => {
+        this.onPointerMoveOnShape = (event) => {
             if (!this.selectedShape) {
                 return;
             }
-            if ('touches' in event && event.touches.length > 1) {
-                return;
-            }
+            // TODO check if single touch ... (멀티터치를 제외해야한다).
+            // if ('touches' in event && event.touches.length > 1) {
+            //   return
+            // }
             event.preventDefault();
             const { x, y } = this.getSvgPoint(event);
             const dx = x - this.offsetX;
@@ -190,25 +63,19 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             }
             this.requestUpdate();
         };
-        this.onMouseUpOnShape = (event) => {
+        this.onPointerUpOnShape = (event) => {
             if (!this.selectedShape) {
                 return;
             }
-            if ('touches' in event && event.touches.length > 1) {
-                return;
-            }
+            // TODO
+            // if ('touches' in event && event.touches.length > 1) {
+            //   return
+            // }
             event.preventDefault();
-            const svg = this.svg;
-            if ('touches' in event) {
-                svg.removeEventListener('touchmove', this.onMouseMoveOnShape);
-                svg.removeEventListener('touchend', this.onMouseUpOnShape);
-            }
-            else {
-                svg.removeEventListener('mousemove', this.onMouseMoveOnShape);
-                svg.removeEventListener('mouseup', this.onMouseUpOnShape);
-            }
+            document.removeEventListener('pointermove', this.onPointerMoveOnShape);
+            document.removeEventListener('pointerup', this.onPointerUpOnShape);
         };
-        this.onResizeHandleMouseMove = (event) => {
+        this.onResizeHandlePointerMove = (event) => {
             if (!this.selectedShape) {
                 return;
             }
@@ -282,17 +149,10 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             }
             this.requestUpdate();
         };
-        this.onResizeHandleMouseUp = (event) => {
+        this.onResizeHandlePointerUp = (event) => {
             event.preventDefault();
-            const svg = this.svg;
-            if ('touches' in event) {
-                svg.removeEventListener('touchmove', this.onResizeHandleMouseMove);
-                svg.removeEventListener('touchend', this.onResizeHandleMouseUp);
-            }
-            else {
-                svg.removeEventListener('mousemove', this.onResizeHandleMouseMove);
-                svg.removeEventListener('mouseup', this.onResizeHandleMouseUp);
-            }
+            document.removeEventListener('pointermove', this.onResizeHandlePointerMove);
+            document.removeEventListener('pointerup', this.onResizeHandlePointerUp);
         };
         this.onFocus = () => {
             this.addEventListener('keydown', this.handleKeyDown);
@@ -350,14 +210,15 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         return html `
       <div class="container">
         <svg
-          @mousedown=${this.onSvgMouseDown}
-          @touchstart=${this.onSvgTouchStart}
           @wheel=${this.onSvgWheel}
-          @dblclick=${this.onSvgDoubleClick}
+          @doubletap=${this.onSvgDoubleTap}
+          @pinch=${this.onSvgPinch}
+          @drag=${this.onSvgDrag}
+          @click=${this.onSvgClick}
           viewBox=${this.viewBox}
           ?drawing=${this.currentMode == 'shape'}
         >
-          <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
+          <image href=${this.currentImage} @load=${this.onImageLoad}></image>
           ${this.shapes.map(shape => keyed(shape.id, this.renderShape(shape)))}
         </svg>
       </div>
@@ -369,7 +230,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             const { mode, shapeType } = e.detail;
             this.setMode(mode, shapeType);
         }}
-        @tap-fit-size=${() => this.resetZoom()}
+        @tap-fit-size=${() => this.reset()}
         @tap-delete=${() => this.deleteSelectedShape()}
         @tap-save=${() => {
             this.dispatchEvent(new CustomEvent('shapes-changed', {
@@ -381,48 +242,152 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
       ></ox-image-marker-mode>
     `;
     }
-    onSvgMouseDown(event) {
-        event.preventDefault();
-        this.setSelectedShape(null);
+    setMode(mode, shapeType) {
+        if (mode == 'view') {
+            this.setSelectedShape(null);
+        }
+        this.currentMode = mode;
+        this.currentShapeType = shapeType;
+    }
+    onSvgPinch(e) {
+        e.stopPropagation();
+        const { scale, centerX, centerY } = e.detail;
+        this.zoom(scale, centerX, centerY);
+    }
+    onSvgDrag(e) {
+        const { deltaX, deltaY, end } = e.detail;
         if (this.currentMode === 'shape') {
-            this.startDrawing(event);
+            this.drawShape(e);
         }
         else {
-            this.startPanning(event);
+            const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number);
+            const scaleX = vbWidth / this.svg.clientWidth;
+            const scaleY = vbHeight / this.svg.clientHeight;
+            const scale = Math.max(scaleX, scaleY);
+            const newVbX = vbX - deltaX * scale;
+            const newVbY = vbY - deltaY * scale;
+            this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`;
+            this.debouncedUpdateImage();
         }
     }
-    startDrawing(event) {
-        const { x, y } = this.getSvgPoint(event);
-        if (this.currentShapeType === 'text') {
+    onSvgClick(e) {
+        if (this.currentMode === 'shape' && this.currentShapeType === 'text') {
+            const { x, y } = this.getSvgPoint(e);
             const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
             textElement.setAttribute('x', x.toString());
             textElement.setAttribute('y', y.toString());
             textElement.textContent = 'ABC';
             this.svg.appendChild(textElement);
-            requestAnimationFrame(() => {
-                this.showTextInput(textElement, null, { x, y });
-            });
+            /* 강제 지연은 iOS에서 input focus를 받지 못하는 현상이 있다. */
+            this.showTextInput(textElement, null, { x, y });
+            this.imageMarkerMode.setMode('edit');
         }
-        else {
+    }
+    drawShape(e) {
+        const { end } = e.detail;
+        const { x, y } = this.getSvgPoint(e);
+        if (!this.drawing) {
             this.startX = x;
             this.startY = y;
+            this.setSelectedShape(null);
             this.drawing = true;
         }
-        if ('touches' in event) {
-            this.svg.addEventListener('touchmove', this.onMouseMoveForDrawing);
-            this.svg.addEventListener('touchend', this.onMouseUpForDrawing);
-        }
-        else {
-            this.svg.addEventListener('mousemove', this.onMouseMoveForDrawing);
-            this.svg.addEventListener('mouseup', this.onMouseUpForDrawing);
-        }
-    }
-    setMode(mode, shapeType) {
-        if (mode == 'view') {
-            this.setSelectedShape(null);
+        else if (this.drawing) {
+            const minDistance = 5;
+            const distance = Math.sqrt(Math.pow(x - this.startX, 2) + Math.pow(y - this.startY, 2));
+            if (!this.selectedShape && distance >= minDistance) {
+                let newShape;
+                switch (this.currentShapeType) {
+                    case 'rectangle':
+                        newShape = {
+                            id: Date.now().toString(),
+                            type: 'rectangle',
+                            x: this.startX,
+                            y: this.startY,
+                            width: 0,
+                            height: 0
+                        };
+                        break;
+                    case 'circle':
+                        newShape = {
+                            id: Date.now().toString(),
+                            type: 'circle',
+                            cx: this.startX,
+                            cy: this.startY,
+                            r: 0
+                        };
+                        break;
+                    case 'triangle':
+                        newShape = {
+                            id: Date.now().toString(),
+                            type: 'triangle',
+                            x1: this.startX,
+                            y1: this.startY,
+                            width: 0,
+                            height: 0,
+                            points: `${this.startX},${this.startY} ${this.startX},${this.startY} ${this.startX},${this.startY}`
+                        };
+                        break;
+                    case 'line':
+                        newShape = {
+                            id: Date.now().toString(),
+                            type: 'line',
+                            x1: this.startX,
+                            y1: this.startY,
+                            width: 0,
+                            height: 0
+                        };
+                        break;
+                    case 'arrow':
+                        newShape = {
+                            id: Date.now().toString(),
+                            type: 'arrow',
+                            x1: this.startX,
+                            y1: this.startY,
+                            width: 0,
+                            height: 0
+                        };
+                        break;
+                    default:
+                        return;
+                }
+                this.shapes = [...this.shapes, newShape];
+                this.setSelectedShape(newShape);
+            }
+            if (this.selectedShape) {
+                switch (this.selectedShape.type) {
+                    case 'rectangle':
+                        this.selectedShape.x = Math.min(x, this.startX);
+                        this.selectedShape.y = Math.min(y, this.startY);
+                        this.selectedShape.width = Math.abs(x - this.startX);
+                        this.selectedShape.height = Math.abs(y - this.startY);
+                        break;
+                    case 'circle':
+                        const dx = x - this.selectedShape.cx;
+                        const dy = y - this.selectedShape.cy;
+                        this.selectedShape.r = Math.sqrt(dx * dx + dy * dy);
+                        break;
+                    case 'triangle':
+                        const x2 = x;
+                        const y2 = y;
+                        const x3 = this.startX - (x - this.startX);
+                        const y3 = y;
+                        this.selectedShape.points = `${this.startX},${this.startY} ${x2},${y2} ${x3},${y3}`;
+                        break;
+                    case 'line':
+                    case 'arrow':
+                        this.selectedShape.x2 = x;
+                        this.selectedShape.y2 = y;
+                        break;
+                }
+                this.requestUpdate();
+            }
+            if (end) {
+                this.drawing = false;
+                this.imageMarkerMode.setMode('edit');
+                this.requestUpdate();
+            }
         }
-        this.currentMode = mode;
-        this.currentShapeType = shapeType;
     }
     setSelectedShape(shape) {
         this.selectedShape = shape;
@@ -459,8 +424,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             y="${shape.y}"
             fill="${commonAttrs.stroke}"
             style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
-            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e) => this.onPointerDownOnShape(e, shape)}"
             @dblclick="${(e) => this.onTextDoubleClick(e, shape)}"
           >${shape.text}</text>
         `;
@@ -475,8 +439,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e) => this.onPointerDownOnShape(e, shape)}"
           ></rect>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -490,8 +453,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e) => this.onPointerDownOnShape(e, shape)}"
           ></circle>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -503,8 +465,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e) => this.onPointerDownOnShape(e, shape)}"
           ></polygon>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -528,8 +489,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="25"
             stroke-opacity="0"
             pointer-events="stroke"
-            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e) => this.onPointerDownOnShape(e, shape)}"
             @mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
             @mouseleave="${() => (this.svg.style.cursor = 'default')}"
           ></line>
@@ -561,10 +521,10 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="25"
             stroke-opacity="0"
             pointer-events="stroke"
-            @mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
+            @mousedown="${(e) => this.onPointerDownOnShape(e, shape)}"
             @mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
             @mouseleave="${() => (this.svg.style.cursor = 'default')}"
+            @pointerdown="${(e) => this.currentMode == 'edit' && e.stopPropagation()}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -572,13 +532,14 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                 return nothing;
         }
     }
-    onMouseDownOnShape(event, shape) {
+    onPointerDownOnShape(event, shape) {
         if (this.currentMode !== 'edit') {
             return;
         }
-        if ('touches' in event && event.touches.length > 1) {
-            return;
-        }
+        // TODO check if single touch ... (멀티터치를 제외해야한다).
+        // if ('touches' in event && event.touches.length > 1) {
+        //   return
+        // }
         event.stopPropagation();
         event.preventDefault();
         this.shapes = this.shapes.map(s => ({
@@ -590,15 +551,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         const { x, y } = this.getSvgPoint(event);
         this.offsetX = x;
         this.offsetY = y;
-        const svg = this.svg;
-        if ('touches' in event) {
-            svg.addEventListener('touchmove', this.onMouseMoveOnShape);
-            svg.addEventListener('touchend', this.onMouseUpOnShape);
-        }
-        else {
-            svg.addEventListener('mousemove', this.onMouseMoveOnShape);
-            svg.addEventListener('mouseup', this.onMouseUpOnShape);
-        }
+        document.addEventListener('pointermove', this.onPointerMoveOnShape);
+        document.addEventListener('pointerup', this.onPointerUpOnShape);
     }
     renderResizeHandles(shape) {
         let handles = [];
@@ -647,28 +601,20 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
               stroke="black"
               class="resize-handle"
               style="cursor: ${handle.cursor};"
-              @mousedown="${(e) => this.onResizeHandleMouseDown(e, shape, handle)}"
-              @touchstart="${(e) => this.onResizeHandleMouseDown(e, shape, handle)}"
+              @pointerdown="${(e) => this.onResizeHandlePointerDown(e, shape, handle)}"
             ></rect>
           </g>
         `)}
     `;
     }
-    onResizeHandleMouseDown(event, shape, handle) {
+    onResizeHandlePointerDown(event, shape, handle) {
         event.stopPropagation();
         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.onResizeHandleMouseMove);
-            svg.addEventListener('touchend', this.onResizeHandleMouseUp);
-        }
-        else {
-            svg.addEventListener('mousemove', this.onResizeHandleMouseMove);
-            svg.addEventListener('mouseup', this.onResizeHandleMouseUp);
-        }
+        document.addEventListener('pointermove', this.onResizeHandlePointerMove);
+        document.addEventListener('pointerup', this.onResizeHandlePointerUp);
     }
     onTextDoubleClick(event, shape) {
         event.stopPropagation();
@@ -707,7 +653,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         textElement.style.visibility = 'hidden';
         document.body.appendChild(input);
         this.adjustInputWidth(input);
-        requestAnimationFrame(() => input.focus());
+        /* iOS에서는 딜레이를 주었을 때 focus()를 받지 못하는 현상이 있으므로, delay 없이 바로 focus를 설정함. */
+        input.focus();
         input.addEventListener('input', () => {
             this.adjustInputWidth(input);
         });