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

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

@@ -15,14 +15,32 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         this.startY = 0;
         this.offsetX = 0;
         this.offsetY = 0;
-        this.handleKeyDown = (event) => {
-            if ((event.key === 'Delete' || event.key === 'Backspace') && this.selectedShape) {
-                this.deleteSelectedShape();
+        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.startDrawing(event);
+                }
+            }
+            else if (event.touches.length === 2) {
+                this.startPinchZooming(event);
             }
         };
-        this.onMouseMove = (event) => {
-            if (!this.drawing)
+        this.onDrawingMouseMove = (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));
@@ -114,19 +132,28 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                 this.requestUpdate();
             }
         };
-        this.onMouseUp = () => {
+        this.onDrawingMouseUp = (event) => {
+            event.preventDefault();
             this.drawing = false;
             const svg = this.svg;
-            svg.removeEventListener('mousemove', this.onMouseMove);
-            svg.removeEventListener('mouseup', this.onMouseUp);
+            if ('touches' in event) {
+                svg.removeEventListener('touchmove', this.onDrawingMouseMove);
+                svg.removeEventListener('touchend', this.onDrawingMouseUp);
+            }
+            else {
+                svg.removeEventListener('mousemove', this.onDrawingMouseMove);
+                svg.removeEventListener('mouseup', this.onDrawingMouseUp);
+            }
             if (this.selectedShape) {
                 this.selectedShape.selected = true;
             }
             this.requestUpdate();
         };
         this.onShapeMouseMove = (event) => {
-            if (!this.selectedShape)
+            if (!this.selectedShape) {
                 return;
+            }
+            event.preventDefault();
             const { x, y } = this.getSvgPoint(event);
             switch (this.selectedShape.type) {
                 case 'text':
@@ -159,24 +186,66 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             }
             this.requestUpdate();
         };
-        this.onShapeMouseUp = () => {
+        this.onShapeMouseUp = (event) => {
+            event.preventDefault();
             const svg = this.svg;
-            svg.removeEventListener('mousemove', this.onShapeMouseMove);
-            svg.removeEventListener('mouseup', this.onShapeMouseUp);
+            if ('touches' in event) {
+                svg.removeEventListener('touchmove', this.onShapeMouseMove);
+                svg.removeEventListener('touchend', this.onShapeMouseUp);
+            }
+            else {
+                svg.removeEventListener('mousemove', this.onShapeMouseMove);
+                svg.removeEventListener('mouseup', this.onShapeMouseUp);
+            }
         };
         this.onHandleMouseMove = (event) => {
-            if (!this.selectedShape)
+            if (!this.selectedShape) {
                 return;
+            }
+            event.preventDefault();
             const { x, y } = this.getSvgPoint(event);
             switch (this.selectedShape.type) {
-                case 'text':
+                // 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':
-                    this.selectedShape.width = Math.abs(x - this.selectedShape.x);
-                    this.selectedShape.height = Math.abs(y - this.selectedShape.y);
-                    if (x < this.selectedShape.x)
+                    const startX = this.selectedShape.x;
+                    const startY = this.selectedShape.y;
+                    const width = this.selectedShape.width;
+                    const height = this.selectedShape.height;
+                    // 핸들의 좌표에 따라 너비 및 높이 조정
+                    if (this.offsetX === startX && this.offsetY === startY) {
+                        // 상좌 핸들 (왼쪽 위)
                         this.selectedShape.x = x;
-                    if (y < this.selectedShape.y)
                         this.selectedShape.y = y;
+                        this.selectedShape.width = width + (startX - x);
+                        this.selectedShape.height = height + (startY - y);
+                    }
+                    else if (this.offsetX === startX + width && this.offsetY === startY) {
+                        // 상우 핸들 (오른쪽 위)
+                        this.selectedShape.y = y;
+                        this.selectedShape.width = Math.abs(x - startX);
+                        this.selectedShape.height = height + (startY - y);
+                    }
+                    else if (this.offsetX === startX && this.offsetY === startY + height) {
+                        // 하좌 핸들 (왼쪽 아래)
+                        this.selectedShape.x = x;
+                        this.selectedShape.width = width + (startX - x);
+                        this.selectedShape.height = Math.abs(y - startY);
+                    }
+                    else if (this.offsetX === startX + width && this.offsetY === startY + height) {
+                        // 하우 핸들 (오른쪽 아래)
+                        this.selectedShape.width = Math.abs(x - startX);
+                        this.selectedShape.height = Math.abs(y - startY);
+                    }
+                    // 최소 너비 및 높이 유지
+                    this.selectedShape.width = Math.max(10, this.selectedShape.width);
+                    this.selectedShape.height = Math.max(10, this.selectedShape.height);
+                    this.offsetX = x;
+                    this.offsetY = y;
                     break;
                 case 'circle':
                     const dx = x - this.selectedShape.cx;
@@ -209,12 +278,30 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             }
             this.requestUpdate();
         };
-        this.onHandleMouseUp = () => {
+        this.onHandleMouseUp = (event) => {
+            event.preventDefault();
             const svg = this.svg;
-            svg.removeEventListener('mousemove', this.onHandleMouseMove);
-            svg.removeEventListener('mouseup', this.onHandleMouseUp);
+            if ('touches' in event) {
+                svg.removeEventListener('touchmove', this.onHandleMouseMove);
+                svg.removeEventListener('touchend', this.onHandleMouseUp);
+            }
+            else {
+                svg.removeEventListener('mousemove', this.onHandleMouseMove);
+                svg.removeEventListener('mouseup', this.onHandleMouseUp);
+            }
             this.selectedShape = null;
         };
+        this.onFocus = () => {
+            this.addEventListener('keydown', this.handleKeyDown);
+        };
+        this.onBlur = () => {
+            this.removeEventListener('keydown', this.handleKeyDown);
+        };
+        this.handleKeyDown = (event) => {
+            if ((event.key === 'Delete' || event.key === 'Backspace') && this.selectedShape) {
+                this.deleteSelectedShape();
+            }
+        };
     }
     static { this.styles = [
         ...BaseImageMarker.styles,
@@ -247,28 +334,23 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     ]; }
     connectedCallback() {
         super.connectedCallback();
-        // 키다운 이벤트 리스너 추가
-        window.addEventListener('keydown', this.handleKeyDown);
+        this.setAttribute('tabindex', '0');
+        this.addEventListener('focus', this.onFocus);
+        this.addEventListener('blur', this.onBlur);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        // 키다운 이벤트 리스너 제거
-        window.removeEventListener('keydown', this.handleKeyDown);
-    }
-    deleteSelectedShape() {
-        if (this.selectedShape) {
-            this.shapes = this.shapes.filter(s => s.id !== this.selectedShape.id);
-            this.selectedShape = null;
-            this.requestUpdate();
-        }
+        this.removeEventListener('focus', this.onFocus);
+        this.removeEventListener('blur', this.onBlur);
     }
     render() {
         return html `
       <div class="container">
         <svg
           @mousedown=${this.onSvgMouseDown}
-          @wheel=${this.onWheel}
-          @dblclick=${this.onDoubleClick}
+          @touchstart=${this.onSvgTouchStart}
+          @wheel=${this.onSvgWheel}
+          @dblclick=${this.onSvgDoubleClick}
           viewBox=${this.viewBox}
         >
           <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
@@ -283,8 +365,9 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             const { mode, shapeType } = e.detail;
             this.setMode(mode, shapeType);
         }}
-        @clicked-delete=${() => this.deleteSelectedShape()}
-        @clicked-save=${() => {
+        @tap-fit-size=${() => this.resetZoom()}
+        @tap-delete=${() => this.deleteSelectedShape()}
+        @tap-save=${() => {
             this.dispatchEvent(new CustomEvent('shapes-changed', {
                 detail: this.shapes,
                 bubbles: true,
@@ -295,35 +378,16 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     `;
     }
     onSvgMouseDown(event) {
-        const svg = this.svg;
+        event.preventDefault();
         this.selectedShape = null;
         this.shapes = this.shapes.map(s => {
             return { ...s, selected: false };
         });
-        this.selectedShape = null;
         if (this.currentMode === 'move') {
-            this.isPanning = true;
-            this.panStart = { x: event.clientX, y: event.clientY };
-            svg.classList.add('dragging');
-            svg.addEventListener('mousemove', this.onPanMouseMove);
-            svg.addEventListener('mouseup', this.onPanMouseUp);
-        }
-        else if (this.currentMode === 'select') {
-            this.startShapeDragging(event);
-            svg.addEventListener('mousemove', this.onShapeMouseMove);
-            svg.addEventListener('mouseup', this.onShapeMouseUp);
+            this.startPanning(event);
         }
         else if (this.currentMode === 'draw') {
             this.startDrawing(event);
-            svg.addEventListener('mousemove', this.onMouseMove);
-            svg.addEventListener('mouseup', this.onMouseUp);
-        }
-    }
-    startShapeDragging(event) {
-        const { x, y } = this.getSvgPoint(event);
-        if (this.selectedShape) {
-            this.offsetX = x - (this.selectedShape.x || this.selectedShape.cx || 0);
-            this.offsetY = y - (this.selectedShape.y || this.selectedShape.cy || 0);
         }
     }
     startDrawing(event) {
@@ -343,16 +407,25 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             this.startY = y;
             this.drawing = true;
         }
+        if ('touches' in event) {
+            this.svg.addEventListener('touchmove', this.onDrawingMouseMove);
+            this.svg.addEventListener('touchend', this.onDrawingMouseUp);
+        }
+        else {
+            this.svg.addEventListener('mousemove', this.onDrawingMouseMove);
+            this.svg.addEventListener('mouseup', this.onDrawingMouseUp);
+        }
     }
     setMode(mode, shapeType) {
         this.currentMode = mode;
         this.currentShapeType = shapeType;
     }
     getSvgPoint(event) {
+        const { x, y } = this.getPointFromEvent(event);
         const svg = this.svg;
         const point = svg.createSVGPoint();
-        point.x = event.clientX;
-        point.y = event.clientY;
+        point.x = x;
+        point.y = y;
         const ctm = svg.getScreenCTM().inverse();
         return point.matrixTransform(ctm);
     }
@@ -372,6 +445,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             fill="${commonAttrs.stroke}"
             style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
             @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
             @dblclick="${(e) => this.onTextDoubleClick(e, shape)}"
           >${shape.text}</text>
         `;
@@ -387,6 +461,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
           ></rect>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -401,6 +476,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
           ></circle>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -413,6 +489,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
           ></polygon>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -427,6 +504,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -447,6 +525,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             marker-end="url(#arrowhead-${shape.id})"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e) => this.onShapeMouseDown(e, shape)}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `;
@@ -456,6 +535,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     }
     onShapeMouseDown(event, shape) {
         event.stopPropagation();
+        event.preventDefault();
         this.shapes = this.shapes.map(s => ({
             ...s,
             selected: s.id === shape.id
@@ -482,16 +562,14 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                 break;
         }
         const svg = this.svg;
-        svg.addEventListener('mousemove', this.onShapeMouseMove);
-        svg.addEventListener('mouseup', this.onShapeMouseUp);
-    }
-    getScale() {
-        if (!this.svg)
-            return 1;
-        const [vbWidth, vbHeight] = this.viewBox.split(' ').map(Number);
-        const scaleX = vbWidth / this.svg.clientWidth;
-        const scaleY = vbHeight / this.svg.clientHeight;
-        return Math.max(scaleX, scaleY);
+        if ('touches' in event) {
+            svg.addEventListener('touchmove', this.onShapeMouseMove);
+            svg.addEventListener('touchend', this.onShapeMouseUp);
+        }
+        else {
+            svg.addEventListener('mousemove', this.onShapeMouseMove);
+            svg.addEventListener('mouseup', this.onShapeMouseUp);
+        }
     }
     renderResizeHandles(shape) {
         let handles = [];
@@ -541,6 +619,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
               class="resize-handle"
               style="cursor: ${handle.cursor};"
               @mousedown="${(e) => this.onHandleMouseDown(e, shape, handle)}"
+              @touchstart="${(e) => this.onHandleMouseDown(e, shape, handle)}"
             ></rect>
           </g>
         `)}
@@ -548,15 +627,23 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     }
     onHandleMouseDown(event, shape, handle) {
         event.stopPropagation();
+        event.preventDefault();
         this.selectedShape = shape;
         this.offsetX = handle.x;
         this.offsetY = handle.y;
         const svg = this.svg;
-        svg.addEventListener('mousemove', this.onHandleMouseMove);
-        svg.addEventListener('mouseup', this.onHandleMouseUp);
+        if ('touches' in event) {
+            svg.addEventListener('touchmove', this.onHandleMouseMove);
+            svg.addEventListener('touchend', this.onHandleMouseUp);
+        }
+        else {
+            svg.addEventListener('mousemove', this.onHandleMouseMove);
+            svg.addEventListener('mouseup', this.onHandleMouseUp);
+        }
     }
     onTextDoubleClick(event, shape) {
         event.stopPropagation();
+        event.preventDefault();
         const textElement = event.target;
         this.showTextInput(textElement, shape);
     }
@@ -660,6 +747,13 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         context.font = window.getComputedStyle(input).font;
         return context.measureText(text).width;
     }
+    deleteSelectedShape() {
+        if (this.selectedShape) {
+            this.shapes = this.shapes.filter(s => s.id !== this.selectedShape.id);
+            this.selectedShape = null;
+            this.requestUpdate();
+        }
+    }
 };
 __decorate([
     state()