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

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

@@ -15,16 +15,31 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         this.startY = 0;
         this.offsetX = 0;
         this.offsetY = 0;
-        // 마우스 이동 이벤트 핸들러 (도형 그리기 중)
-        this.onMouseMove = (event) => {
-            if (!this.drawing)
+        this.onSvgTouchStart = (event) => {
+            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.onDrawingMouseMove = (event) => {
+            if (!this.drawing) {
                 return;
+            }
             const { x, y } = this.getSvgPoint(event);
-            // 최소 거리 확인 (예: 5px 이상이어야 도형을 생성)
             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':
@@ -81,13 +96,11 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                         return;
                 }
                 this.selectedShape = newShape;
-                this.shapes = [...this.shapes, newShape]; // 새로운 도형 추가
+                this.shapes = [...this.shapes, newShape];
             }
             if (this.selectedShape) {
-                // 선택된 도형의 크기를 업데이트
                 switch (this.selectedShape.type) {
                     case 'rectangle':
-                        // x, y를 업데이트하여 음의 방향으로 드래그할 때도 사각형이 올바르게 그려지도록 함
                         this.selectedShape.x = Math.min(x, this.startX);
                         this.selectedShape.y = Math.min(y, this.startY);
                         this.selectedShape.width = Math.abs(x - this.startX);
@@ -111,14 +124,20 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                         this.selectedShape.y2 = y;
                         break;
                 }
-                this.requestUpdate(); // 화면 업데이트
+                this.requestUpdate();
             }
         };
-        this.onMouseUp = () => {
+        this.onDrawingMouseUp = (event) => {
             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;
             }
@@ -129,7 +148,6 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                 return;
             }
             const { x, y } = this.getSvgPoint(event);
-            // 마우스 이동에 따라 도형의 위치 업데이트
             switch (this.selectedShape.type) {
                 case 'text':
                 case 'rectangle':
@@ -159,26 +177,66 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                     this.selectedShape.y2 = this.selectedShape.y2 + deltaY;
                     break;
             }
-            this.requestUpdate(); // 화면 업데이트
+            this.requestUpdate();
         };
-        this.onShapeMouseUp = () => {
+        this.onShapeMouseUp = (event) => {
             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;
+            }
             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;
@@ -211,12 +269,29 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             }
             this.requestUpdate();
         };
-        this.onHandleMouseUp = () => {
+        this.onHandleMouseUp = (event) => {
             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,13 +322,25 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
       }
     `
     ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('tabindex', '0');
+        this.addEventListener('focus', this.onFocus);
+        this.addEventListener('blur', this.onBlur);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        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>
@@ -268,13 +355,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             const { mode, shapeType } = e.detail;
             this.setMode(mode, shapeType);
         }}
-        @clicked-delete=${() => {
-            if (this.selectedShape) {
-                this.shapes = this.shapes.filter(s => s.id !== this.selectedShape.id);
-                this.requestUpdate();
-            }
-        }}
-        @clicked-save=${() => {
+        @tap-delete=${() => this.deleteSelectedShape()}
+        @tap-save=${() => {
             this.dispatchEvent(new CustomEvent('shapes-changed', {
                 detail: this.shapes,
                 bubbles: true,
@@ -285,72 +367,56 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     `;
     }
     onSvgMouseDown(event) {
-        const svg = this.svg;
         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) {
         const { x, y } = this.getSvgPoint(event);
-        // currentShapeType이 'text'일 경우에만 input을 보여 텍스트 입력을 받음
         if (this.currentShapeType === 'text') {
             const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
             textElement.setAttribute('x', x.toString());
             textElement.setAttribute('y', y.toString());
-            textElement.textContent = 'ABC'; /* should not be empty space */
+            textElement.textContent = 'ABC';
             this.svg.appendChild(textElement);
-            // input 요소 생성
             requestAnimationFrame(() => {
                 this.showTextInput(textElement, null, { x, y });
             });
         }
         else {
-            // 'text'가 아닌 경우 기존 도형 그리기 동작 유지
             this.startX = x;
             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;
     }
-    // SVG 좌표계로 마우스 좌표 변환
     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);
     }
-    // 도형 렌더링 함수
     renderShape(shape) {
         const commonAttrs = {
             stroke: shape.selected ? 'blue' : 'red',
@@ -367,6 +433,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>
         `;
@@ -382,6 +449,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) : ''}
         `;
@@ -396,6 +464,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) : ''}
         `;
@@ -408,6 +477,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) : ''}
         `;
@@ -422,6 +492,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) : ''}
         `;
@@ -442,6 +513,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,7 +528,6 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             selected: s.id === shape.id
         }));
         this.selectedShape = this.shapes.find(s => s.id == shape.id);
-        // 마우스 클릭 좌표와 도형의 현재 좌표 차이 계산
         const { x, y } = this.getSvgPoint(event);
         switch (shape.type) {
             case 'text':
@@ -477,19 +548,15 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                 this.offsetY = y - shape.y1;
                 break;
         }
-        // 드래그 이벤트 리스너 추가
         const svg = this.svg;
-        svg.addEventListener('mousemove', this.onShapeMouseMove);
-        svg.addEventListener('mouseup', this.onShapeMouseUp);
-    }
-    getScale() {
-        if (!this.svg) {
-            return 1;
+        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);
         }
-        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);
     }
     renderResizeHandles(shape) {
         let handles = [];
@@ -539,6 +606,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>
         `)}
@@ -550,8 +618,14 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         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();
@@ -559,26 +633,20 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         this.showTextInput(textElement, shape);
     }
     showTextInput(textElement, shape = null, options) {
-        // input 요소 생성
         const input = document.createElement('input');
         input.style.position = 'absolute';
-        // SVG 텍스트의 CTM 얻기
         const ctm = textElement.getScreenCTM() || { a: 1, e: 0, d: 1, f: 0 };
         const bbox = textElement.getBBox();
-        // 텍스트의 화면 위치 계산
         const screenX = bbox.x * ctm.a + ctm.e;
         const screenY = bbox.y * ctm.d + ctm.f;
-        // input 위치 조정 (scale과 transform을 고려한 정확한 좌표로 변환)
         input.style.left = `${screenX}px`;
         input.style.top = `${screenY}px`;
-        // 텍스트 폰트 스타일을 가져와 input에 적용
         const computedStyle = window.getComputedStyle(textElement);
         const fontSize = parseFloat(computedStyle.fontSize) * ctm.a;
         const fontFamily = computedStyle.fontFamily;
         const fontWeight = computedStyle.fontWeight;
         const textColor = computedStyle.fill || computedStyle.color;
         const lineHeight = parseFloat(computedStyle.lineHeight) * ctm.d;
-        // input 스타일을 텍스트와 일치시킴
         input.style.fontSize = `${fontSize}px`;
         input.style.fontFamily = fontFamily;
         input.style.fontWeight = fontWeight;
@@ -592,13 +660,10 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         if (shape) {
             input.value = shape.text || '';
         }
-        // SVG 텍스트 숨김
         textElement.style.visibility = 'hidden';
-        // input 요소를 추가하고, 텍스트 길이에 따라 너비 조정
         document.body.appendChild(input);
-        this.adjustInputWidth(input); // 최초 너비 조정
+        this.adjustInputWidth(input);
         requestAnimationFrame(() => input.focus());
-        // 입력 중에 동적으로 input의 너비 조정
         input.addEventListener('input', () => {
             this.adjustInputWidth(input);
         });
@@ -656,19 +721,24 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
             });
         });
     }
-    // 텍스트 길이에 맞춰 input 박스의 너비를 조정하는 함수 (최소 길이 유지)
     adjustInputWidth(input) {
-        const minWidth = 50; // 최소 너비 (픽셀 단위로 설정)
+        const minWidth = 50;
         const textWidth = this.measureTextWidth(input.value || input.placeholder, input);
-        input.style.width = `${Math.max(textWidth + 10, minWidth)}px`; // 텍스트 길이 + 여유 공간, 최소 너비 적용
+        input.style.width = `${Math.max(textWidth + 10, minWidth)}px`;
     }
-    // 텍스트 길이를 측정하는 함수
     measureTextWidth(text, input) {
         const canvas = document.createElement('canvas');
         const context = canvas.getContext('2d');
         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()