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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-alpha.18](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.17...v8.0.0-alpha.18) (2024-10-04)
+
+
+### :bug: Bug Fix
+
+* ox-image-marker ([ae56c0a](https://github.com/hatiolab/operato/commit/ae56c0a28af20d029e907181af0babe63526cae5))
+
+
+
+## [8.0.0-alpha.17](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.16...v8.0.0-alpha.17) (2024-10-04)
+
+
+### :bug: Bug Fix
+
+* ox-image-marker ([7393507](https://github.com/hatiolab/operato/commit/73935070ba969772cdf6e8c1eff90b0379f535b1))
+
+
+
 ## [8.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.9...v8.0.0-alpha.10) (2024-09-18)
 
 

package/dist/src/ox-image-marker.d.ts

@@ -12,6 +12,10 @@ export declare class OxImageMarker extends BaseImageMarker {
     private startY;
     private offsetX;
     private offsetY;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleKeyDown;
+    private deleteSelectedShape;
     render(): import("lit-html").TemplateResult<1>;
     protected onSvgMouseDown(event: MouseEvent): void;
     private startShapeDragging;
@@ -30,4 +34,7 @@ export declare class OxImageMarker extends BaseImageMarker {
     private onHandleMouseMove;
     private onHandleMouseUp;
     private onTextDoubleClick;
+    private showTextInput;
+    private adjustInputWidth;
+    private measureTextWidth;
 }

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

@@ -15,53 +15,119 @@ 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.onMouseMove = (event) => {
-            if (!this.drawing || !this.selectedShape)
+            if (!this.drawing)
                 return;
             const { x, y } = this.getSvgPoint(event);
-            switch (this.selectedShape.type) {
-                case 'text':
-                    break;
-                case 'rectangle':
-                    this.selectedShape.width = x - this.startX;
-                    this.selectedShape.height = 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;
+            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.selectedShape = newShape;
+                this.shapes = [...this.shapes, 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.requestUpdate();
         };
-        // 마우스 업 이벤트 핸들러 (도형 그리기 종료)
         this.onMouseUp = () => {
             this.drawing = false;
             const svg = this.svg;
             svg.removeEventListener('mousemove', this.onMouseMove);
             svg.removeEventListener('mouseup', this.onMouseUp);
-            this.selectedShape.selected = true;
+            if (this.selectedShape) {
+                this.selectedShape.selected = true;
+            }
             this.requestUpdate();
         };
         this.onShapeMouseMove = (event) => {
-            if (!this.selectedShape) {
+            if (!this.selectedShape)
                 return;
-            }
             const { x, y } = this.getSvgPoint(event);
-            // 마우스 이동에 따라 도형의 위치 업데이트
             switch (this.selectedShape.type) {
                 case 'text':
                 case 'rectangle':
@@ -91,7 +157,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
                     this.selectedShape.y2 = this.selectedShape.y2 + deltaY;
                     break;
             }
-            this.requestUpdate(); // 화면 업데이트
+            this.requestUpdate();
         };
         this.onShapeMouseUp = () => {
             const svg = this.svg;
@@ -179,6 +245,23 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
       }
     `
     ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // 키다운 이벤트 리스너 추가
+        window.addEventListener('keydown', this.handleKeyDown);
+    }
+    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();
+        }
+    }
     render() {
         return html `
       <div class="container">
@@ -200,12 +283,7 @@ 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-delete=${() => this.deleteSelectedShape()}
         @clicked-save=${() => {
             this.dispatchEvent(new CustomEvent('shapes-changed', {
                 detail: this.shapes,
@@ -249,82 +327,27 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         }
     }
     startDrawing(event) {
-        this.drawing = true;
         const { x, y } = this.getSvgPoint(event);
-        this.startX = x;
-        this.startY = y;
-        let newShape;
-        switch (this.currentShapeType) {
-            case 'text':
-                newShape = {
-                    id: Date.now().toString(),
-                    type: 'text',
-                    x: this.startX,
-                    y: this.startY,
-                    text: 'ABC'
-                };
-                break;
-            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;
+        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';
+            this.svg.appendChild(textElement);
+            requestAnimationFrame(() => {
+                this.showTextInput(textElement, null, { x, y });
+            });
+        }
+        else {
+            this.startX = x;
+            this.startY = y;
+            this.drawing = true;
         }
-        this.selectedShape = newShape;
-        this.shapes = [...this.shapes, newShape];
     }
     setMode(mode, shapeType) {
         this.currentMode = mode;
         this.currentShapeType = shapeType;
     }
-    // SVG 좌표계로 마우스 좌표 변환
     getSvgPoint(event) {
         const svg = this.svg;
         const point = svg.createSVGPoint();
@@ -333,23 +356,21 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         const ctm = svg.getScreenCTM().inverse();
         return point.matrixTransform(ctm);
     }
-    // 도형 렌더링 함수
     renderShape(shape) {
         const commonAttrs = {
             stroke: shape.selected ? 'blue' : 'red',
-            'stroke-width': shape.selected ? 2 : 1,
+            'stroke-width': 1,
             fill: 'transparent',
             cursor: 'pointer'
         };
         switch (shape.type) {
             case 'text':
                 return svg `
-          
           <text
             x="${shape.x}"
             y="${shape.y}"
             fill="${commonAttrs.stroke}"
-            style="cursor: ${commonAttrs.cursor}; font-size: 16px; text-decoration: ${shape.selected ? 'underline' : 'none'};"
+            style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
             @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
             @dblclick="${(e) => this.onTextDoubleClick(e, shape)}"
           >${shape.text}</text>
@@ -440,7 +461,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':
@@ -461,15 +481,13 @@ 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) {
+        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;
@@ -539,33 +557,109 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
     }
     onTextDoubleClick(event, shape) {
         event.stopPropagation();
-        var input = document.createElement('input');
+        const textElement = event.target;
+        this.showTextInput(textElement, shape);
+    }
+    showTextInput(textElement, shape = null, options) {
+        const input = document.createElement('input');
         input.style.position = 'absolute';
-        input.style.left = `${event.clientX}px`;
-        input.style.top = `${event.clientY}px`;
-        input.value = shape.text || '';
+        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.style.left = `${screenX}px`;
+        input.style.top = `${screenY}px`;
+        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.style.fontSize = `${fontSize}px`;
+        input.style.fontFamily = fontFamily;
+        input.style.fontWeight = fontWeight;
+        input.style.color = textColor;
+        input.style.lineHeight = `${lineHeight}px`;
+        input.style.padding = '0';
+        input.style.margin = '0';
+        input.style.border = 'none';
+        input.style.outline = 'none';
+        input.style.background = 'transparent';
+        if (shape) {
+            input.value = shape.text || '';
+        }
+        textElement.style.visibility = 'hidden';
         document.body.appendChild(input);
-        input.focus();
+        this.adjustInputWidth(input);
+        requestAnimationFrame(() => input.focus());
+        input.addEventListener('input', () => {
+            this.adjustInputWidth(input);
+        });
         input.addEventListener('keydown', e => {
             if (e.key === 'Enter') {
-                shape.text = input.value;
+                const textValue = input.value.trim();
+                if (textValue) {
+                    if (shape) {
+                        shape.text = textValue;
+                    }
+                    else {
+                        const newShape = {
+                            id: Date.now().toString(),
+                            type: 'text',
+                            x: options.x,
+                            y: options.y,
+                            text: textValue
+                        };
+                        this.shapes = [...this.shapes, newShape];
+                    }
+                }
+                else if (shape) {
+                    this.shapes = this.shapes.filter(s => s.id !== shape.id);
+                }
                 document.body.removeChild(input);
-                input = null;
+                if (!shape) {
+                    this.svg.removeChild(textElement);
+                }
+                else {
+                    textElement.style.visibility = 'visible';
+                }
                 this.requestUpdate();
             }
             else if (e.key === 'Escape') {
                 document.body.removeChild(input);
-                input = null;
-                this.requestUpdate();
+                if (!shape) {
+                    this.svg.removeChild(textElement);
+                }
+                else {
+                    textElement.style.visibility = 'visible';
+                }
             }
         });
         input.addEventListener('blur', () => {
             requestAnimationFrame(() => {
-                input && document.body.removeChild(input);
-                input = null;
+                if (!shape) {
+                    this.svg.removeChild(textElement);
+                }
+                else {
+                    textElement.style.visibility = 'visible';
+                }
+                if (input.parentElement) {
+                    document.body.removeChild(input);
+                }
             });
         });
     }
+    adjustInputWidth(input) {
+        const minWidth = 50;
+        const textWidth = this.measureTextWidth(input.value || input.placeholder, input);
+        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;
+    }
 };
 __decorate([
     state()