@operato/image-marker 8.0.0-alpha.10

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

@@ -0,0 +1,583 @@
+import { __decorate } from "tslib";
+import './ox-image-marker-mode';
+import { html, css, svg, nothing } from 'lit';
+import { 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.selectedShape = null;
+        this.drawing = false;
+        this.startX = 0;
+        this.startY = 0;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        // 마우스 이동 이벤트 핸들러 (도형 그리기 중)
+        this.onMouseMove = (event) => {
+            if (!this.drawing || !this.selectedShape)
+                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;
+            }
+            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;
+            this.requestUpdate();
+        };
+        this.onShapeMouseMove = (event) => {
+            if (!this.selectedShape) {
+                return;
+            }
+            const { x, y } = this.getSvgPoint(event);
+            // 마우스 이동에 따라 도형의 위치 업데이트
+            switch (this.selectedShape.type) {
+                case 'text':
+                case 'rectangle':
+                    this.selectedShape.x = x - this.offsetX;
+                    this.selectedShape.y = y - this.offsetY;
+                    break;
+                case 'circle':
+                    this.selectedShape.cx = x - this.offsetX;
+                    this.selectedShape.cy = y - this.offsetY;
+                    break;
+                case 'triangle':
+                    const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
+                    const [ox, oy] = points[0];
+                    this.selectedShape.points = points
+                        .map(([px, py]) => [px - ox + x - this.offsetX, py - oy + y - this.offsetY].join(','))
+                        .join(' ');
+                    break;
+                case 'line':
+                case 'arrow':
+                    const dxLine = x - this.offsetX;
+                    const dyLine = y - this.offsetY;
+                    const deltaX = dxLine - this.selectedShape.x1;
+                    const deltaY = dyLine - this.selectedShape.y1;
+                    this.selectedShape.x1 = dxLine;
+                    this.selectedShape.y1 = dyLine;
+                    this.selectedShape.x2 = this.selectedShape.x2 + deltaX;
+                    this.selectedShape.y2 = this.selectedShape.y2 + deltaY;
+                    break;
+            }
+            this.requestUpdate(); // 화면 업데이트
+        };
+        this.onShapeMouseUp = () => {
+            const svg = this.svg;
+            svg.removeEventListener('mousemove', this.onShapeMouseMove);
+            svg.removeEventListener('mouseup', this.onShapeMouseUp);
+        };
+        this.onHandleMouseMove = (event) => {
+            if (!this.selectedShape)
+                return;
+            const { x, y } = this.getSvgPoint(event);
+            switch (this.selectedShape.type) {
+                case 'text':
+                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)
+                        this.selectedShape.x = x;
+                    if (y < this.selectedShape.y)
+                        this.selectedShape.y = y;
+                    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 points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
+                    const index = points.findIndex(([px, py]) => px === this.offsetX && py === this.offsetY);
+                    if (index !== -1) {
+                        points[index] = [x, y];
+                        this.selectedShape.points = points.map(p => p.join(',')).join(' ');
+                        this.offsetX = x;
+                        this.offsetY = y;
+                    }
+                    break;
+                case 'line':
+                case 'arrow':
+                    if (this.offsetX === this.selectedShape.x1 && this.offsetY === this.selectedShape.y1) {
+                        this.selectedShape.x1 = x;
+                        this.selectedShape.y1 = y;
+                    }
+                    else if (this.offsetX === this.selectedShape.x2 && this.offsetY === this.selectedShape.y2) {
+                        this.selectedShape.x2 = x;
+                        this.selectedShape.y2 = y;
+                    }
+                    this.offsetX = x;
+                    this.offsetY = y;
+                    break;
+            }
+            this.requestUpdate();
+        };
+        this.onHandleMouseUp = () => {
+            const svg = this.svg;
+            svg.removeEventListener('mousemove', this.onHandleMouseMove);
+            svg.removeEventListener('mouseup', this.onHandleMouseUp);
+            this.selectedShape = null;
+        };
+    }
+    static { this.styles = [
+        ...BaseImageMarker.styles,
+        css `
+      :host {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 100%;
+      }
+
+      ox-image-marker-mode {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+
+      svg {
+        cursor: crosshair;
+      }
+
+      svg.dragging {
+        cursor: move;
+      }
+
+      .resize-handle {
+        cursor: nwse-resize;
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <div class="container">
+        <svg
+          @mousedown=${this.onSvgMouseDown}
+          @wheel=${this.onWheel}
+          @dblclick=${this.onDoubleClick}
+          viewBox=${this.viewBox}
+        >
+          <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
+          ${this.shapes.map(shape => keyed(shape.id, this.renderShape(shape)))}
+        </svg>
+      </div>
+
+      <ox-image-marker-mode
+        currentMode=${this.currentMode}
+        currentShapeType=${ifDefined(this.currentShapeType)}
+        @mode-changed=${(e) => {
+            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=${() => {
+            this.dispatchEvent(new CustomEvent('shapes-changed', {
+                detail: this.shapes,
+                bubbles: true,
+                composed: true
+            }));
+        }}
+      ></ox-image-marker-mode>
+    `;
+    }
+    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);
+        }
+        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) {
+        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;
+        }
+        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();
+        point.x = event.clientX;
+        point.y = event.clientY;
+        const ctm = svg.getScreenCTM().inverse();
+        return point.matrixTransform(ctm);
+    }
+    // 도형 렌더링 함수
+    renderShape(shape) {
+        const commonAttrs = {
+            stroke: shape.selected ? 'blue' : 'red',
+            'stroke-width': shape.selected ? 2 : 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'};"
+            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+            @dblclick="${(e) => this.onTextDoubleClick(e, shape)}"
+          >${shape.text}</text>
+        `;
+            case 'rectangle':
+                return svg `
+          <rect
+            x="${shape.x}"
+            y="${shape.y}"
+            width="${shape.width}"
+            height="${shape.height}"
+            stroke="${commonAttrs.stroke}"
+            stroke-width="${commonAttrs['stroke-width']}"
+            fill="${commonAttrs.fill}"
+            style="cursor: ${commonAttrs.cursor}"
+            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+          ></rect>
+          ${shape.selected ? this.renderResizeHandles(shape) : ''}
+        `;
+            case 'circle':
+                return svg `
+          <circle
+            cx="${shape.cx}"
+            cy="${shape.cy}"
+            r="${shape.r}"
+            stroke="${commonAttrs.stroke}"
+            stroke-width="${commonAttrs['stroke-width']}"
+            fill="${commonAttrs.fill}"
+            style="cursor: ${commonAttrs.cursor}"
+            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+          ></circle>
+          ${shape.selected ? this.renderResizeHandles(shape) : ''}
+        `;
+            case 'triangle':
+                return svg `
+          <polygon
+            points="${shape.points}"
+            stroke="${commonAttrs.stroke}"
+            stroke-width="${commonAttrs['stroke-width']}"
+            fill="${commonAttrs.fill}"
+            style="cursor: ${commonAttrs.cursor}"
+            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+          ></polygon>
+          ${shape.selected ? this.renderResizeHandles(shape) : ''}
+        `;
+            case 'line':
+                return svg `
+          <line
+            x1="${shape.x1}"
+            y1="${shape.y1}"
+            x2="${shape.x2 ?? shape.x1}"
+            y2="${shape.y2 ?? shape.y1}"
+            stroke="${commonAttrs.stroke}"
+            stroke-width="${commonAttrs['stroke-width']}"
+            style="cursor: ${commonAttrs.cursor}"
+            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+          ></line>
+          ${shape.selected ? this.renderResizeHandles(shape) : ''}
+        `;
+            case 'arrow':
+                return svg `
+          <defs>
+            <marker id="arrowhead-${shape.id}" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+              <polygon points="0 0, 10 3.5, 0 7" fill="${commonAttrs.stroke}"></polygon>
+            </marker>
+          </defs>
+          <line
+            x1="${shape.x1}"
+            y1="${shape.y1}"
+            x2="${shape.x2 ?? shape.x1}"
+            y2="${shape.y2 ?? shape.y1}"
+            stroke="${commonAttrs.stroke}"
+            stroke-width="${commonAttrs['stroke-width']}"
+            marker-end="url(#arrowhead-${shape.id})"
+            style="cursor: ${commonAttrs.cursor}"
+            @mousedown="${(e) => this.onShapeMouseDown(e, shape)}"
+          ></line>
+          ${shape.selected ? this.renderResizeHandles(shape) : ''}
+        `;
+            default:
+                return nothing;
+        }
+    }
+    onShapeMouseDown(event, shape) {
+        event.stopPropagation();
+        this.shapes = this.shapes.map(s => ({
+            ...s,
+            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':
+            case 'rectangle':
+            case 'circle':
+                this.offsetX = x - (shape.x || shape.cx || 0);
+                this.offsetY = y - (shape.y || shape.cy || 0);
+                break;
+            case 'triangle':
+                const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
+                const [px, py] = points[0] || [0, 0];
+                this.offsetX = x - px;
+                this.offsetY = y - py;
+                break;
+            case 'line':
+            case 'arrow':
+                this.offsetX = x - shape.x1;
+                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;
+        }
+        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 = [];
+        switch (shape.type) {
+            case 'text':
+            case 'rectangle':
+                handles = [
+                    { x: shape.x, y: shape.y, cursor: 'nwse-resize' },
+                    { x: shape.x + shape.width, y: shape.y, cursor: 'nesw-resize' },
+                    { x: shape.x, y: shape.y + shape.height, cursor: 'nesw-resize' },
+                    { x: shape.x + shape.width, y: shape.y + shape.height, cursor: 'nwse-resize' }
+                ];
+                break;
+            case 'circle':
+                handles = [
+                    { x: shape.cx + shape.r, y: shape.cy, cursor: 'ew-resize' },
+                    { x: shape.cx - shape.r, y: shape.cy, cursor: 'ew-resize' },
+                    { x: shape.cx, y: shape.cy + shape.r, cursor: 'ns-resize' },
+                    { x: shape.cx, y: shape.cy - shape.r, cursor: 'ns-resize' }
+                ];
+                break;
+            case 'triangle':
+                const points = shape.points.split(' ').map(p => p.split(',').map(Number));
+                handles = points.map(([x, y]) => ({ x, y, cursor: 'move' }));
+                break;
+            case 'line':
+            case 'arrow':
+                handles = [
+                    { x: shape.x1, y: shape.y1, cursor: 'move' },
+                    { x: shape.x2, y: shape.y2, cursor: 'move' }
+                ];
+                break;
+        }
+        return svg `
+      ${handles.map(handle => svg `
+          <g
+            class="resize-handle-group"
+            style="transform: translate(${handle.x}px, ${handle.y}px) scale(${1 / this.zoomLevel});"
+          >
+            <rect
+              x="-5"
+              y="-5"
+              width="10"
+              height="10"
+              fill="white"
+              stroke="black"
+              class="resize-handle"
+              style="cursor: ${handle.cursor};"
+              @mousedown="${(e) => this.onHandleMouseDown(e, shape, handle)}"
+            ></rect>
+          </g>
+        `)}
+    `;
+    }
+    onHandleMouseDown(event, shape, handle) {
+        event.stopPropagation();
+        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);
+    }
+    onTextDoubleClick(event, shape) {
+        event.stopPropagation();
+        var input = document.createElement('input');
+        input.style.position = 'absolute';
+        input.style.left = `${event.clientX}px`;
+        input.style.top = `${event.clientY}px`;
+        input.value = shape.text || '';
+        document.body.appendChild(input);
+        input.focus();
+        input.addEventListener('keydown', e => {
+            if (e.key === 'Enter') {
+                shape.text = input.value;
+                document.body.removeChild(input);
+                input = null;
+                this.requestUpdate();
+            }
+            else if (e.key === 'Escape') {
+                document.body.removeChild(input);
+                input = null;
+                this.requestUpdate();
+            }
+        });
+        input.addEventListener('blur', () => {
+            requestAnimationFrame(() => {
+                input && document.body.removeChild(input);
+                input = null;
+            });
+        });
+    }
+};
+__decorate([
+    state()
+], OxImageMarker.prototype, "currentShapeType", void 0);
+__decorate([
+    state()
+], OxImageMarker.prototype, "currentMode", void 0);
+__decorate([
+    state()
+], OxImageMarker.prototype, "selectedShape", void 0);
+OxImageMarker = __decorate([
+    customElement('ox-image-marker')
+], OxImageMarker);
+export { OxImageMarker };
+//# sourceMappingURL=ox-image-marker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-image-marker.js","sourceRoot":"","sources":["../../src/ox-image-marker.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-image-marker-mode'\n\nimport { html, css, svg, nothing } from 'lit'\nimport { property, state, customElement, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { ImageMarkerMode, Shape, ShapeType } from './types'\nimport { BaseImageMarker } from './base-image-marker'\n\n@customElement('ox-image-marker')\nexport class OxImageMarker extends BaseImageMarker {\n  static styles = [\n    ...BaseImageMarker.styles,\n    css`\n      :host {\n        position: relative;\n        display: flex;\n        width: 100%;\n        height: 100%;\n      }\n\n      ox-image-marker-mode {\n        position: absolute;\n        top: 0;\n        right: 0;\n      }\n\n      svg {\n        cursor: crosshair;\n      }\n\n      svg.dragging {\n        cursor: move;\n      }\n\n      .resize-handle {\n        cursor: nwse-resize;\n      }\n    `\n  ]\n\n  @state() private currentShapeType?: ShapeType\n  @state() private currentMode: ImageMarkerMode = 'select'\n  @state() private selectedShape: Shape | null = null\n\n  private drawing = false\n  private startX = 0\n  private startY = 0\n  private offsetX = 0\n  private offsetY = 0\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <svg\n          @mousedown=${this.onSvgMouseDown}\n          @wheel=${this.onWheel}\n          @dblclick=${this.onDoubleClick}\n          viewBox=${this.viewBox}\n        >\n          <image href=${this.imageUrl} @load=${this.onImageLoad}></image>\n          ${this.shapes.map(shape => keyed(shape.id, this.renderShape(shape)))}\n        </svg>\n      </div>\n\n      <ox-image-marker-mode\n        currentMode=${this.currentMode}\n        currentShapeType=${ifDefined(this.currentShapeType)}\n        @mode-changed=${(e: CustomEvent) => {\n          const { mode, shapeType } = e.detail\n          this.setMode(mode, shapeType)\n        }}\n        @clicked-delete=${() => {\n          if (this.selectedShape) {\n            this.shapes = this.shapes.filter(s => s.id !== this.selectedShape!.id)\n            this.requestUpdate()\n          }\n        }}\n        @clicked-save=${() => {\n          this.dispatchEvent(\n            new CustomEvent('shapes-changed', {\n              detail: this.shapes,\n              bubbles: true,\n              composed: true\n            })\n          )\n        }}\n      ></ox-image-marker-mode>\n    `\n  }\n\n  protected onSvgMouseDown(event: MouseEvent) {\n    const svg = this.svg\n\n    this.selectedShape = null\n    this.shapes = this.shapes.map(s => {\n      return { ...s, selected: false }\n    })\n\n    this.selectedShape = null\n    if (this.currentMode === 'move') {\n      this.isPanning = true\n      this.panStart = { x: event.clientX, y: event.clientY }\n      svg.classList.add('dragging')\n      svg.addEventListener('mousemove', this.onPanMouseMove)\n      svg.addEventListener('mouseup', this.onPanMouseUp)\n    } else if (this.currentMode === 'select') {\n      this.startShapeDragging(event)\n      svg.addEventListener('mousemove', this.onShapeMouseMove)\n      svg.addEventListener('mouseup', this.onShapeMouseUp)\n    } else if (this.currentMode === 'draw') {\n      this.startDrawing(event)\n      svg.addEventListener('mousemove', this.onMouseMove)\n      svg.addEventListener('mouseup', this.onMouseUp)\n    }\n  }\n\n  private startShapeDragging(event: MouseEvent) {\n    const { x, y } = this.getSvgPoint(event)\n    if (this.selectedShape) {\n      this.offsetX = x - (this.selectedShape.x || this.selectedShape.cx || 0)\n      this.offsetY = y - (this.selectedShape.y || this.selectedShape.cy || 0)\n    }\n  }\n\n  private startDrawing(event: MouseEvent) {\n    this.drawing = true\n    const { x, y } = this.getSvgPoint(event)\n    this.startX = x\n    this.startY = y\n\n    let newShape: Shape\n    switch (this.currentShapeType) {\n      case 'text':\n        newShape = {\n          id: Date.now().toString(),\n          type: 'text',\n          x: this.startX,\n          y: this.startY,\n          text: 'ABC'\n        }\n        break\n      case 'rectangle':\n        newShape = {\n          id: Date.now().toString(),\n          type: 'rectangle',\n          x: this.startX,\n          y: this.startY,\n          width: 0,\n          height: 0\n        }\n        break\n      case 'circle':\n        newShape = {\n          id: Date.now().toString(),\n          type: 'circle',\n          cx: this.startX,\n          cy: this.startY,\n          r: 0\n        }\n        break\n      case 'triangle':\n        newShape = {\n          id: Date.now().toString(),\n          type: 'triangle',\n          x1: this.startX,\n          y1: this.startY,\n          width: 0,\n          height: 0,\n          points: `${this.startX},${this.startY} ${this.startX},${this.startY} ${this.startX},${this.startY}`\n        }\n        break\n      case 'line':\n        newShape = {\n          id: Date.now().toString(),\n          type: 'line',\n          x1: this.startX,\n          y1: this.startY,\n          width: 0,\n          height: 0\n        }\n        break\n      case 'arrow':\n        newShape = {\n          id: Date.now().toString(),\n          type: 'arrow',\n          x1: this.startX,\n          y1: this.startY,\n          width: 0,\n          height: 0\n        }\n        break\n      default:\n        return\n    }\n\n    this.selectedShape = newShape\n    this.shapes = [...this.shapes, newShape]\n  }\n\n  private setMode(mode: ImageMarkerMode, shapeType: ShapeType) {\n    this.currentMode = mode\n    this.currentShapeType = shapeType\n  }\n\n  // 마우스 이동 이벤트 핸들러 (도형 그리기 중)\n  private onMouseMove = (event: MouseEvent) => {\n    if (!this.drawing || !this.selectedShape) return\n    const { x, y } = this.getSvgPoint(event)\n\n    switch (this.selectedShape.type) {\n      case 'text':\n        break\n      case 'rectangle':\n        this.selectedShape.width = x - this.startX\n        this.selectedShape.height = y - this.startY\n        break\n      case 'circle':\n        const dx = x - this.selectedShape.cx!\n        const dy = y - this.selectedShape.cy!\n        this.selectedShape.r = Math.sqrt(dx * dx + dy * dy)\n        break\n      case 'triangle':\n        const x2 = x\n        const y2 = y\n        const x3 = this.startX - (x - this.startX)\n        const y3 = y\n        this.selectedShape.points = `${this.startX},${this.startY} ${x2},${y2} ${x3},${y3}`\n        break\n      case 'line':\n      case 'arrow':\n        this.selectedShape.x2 = x\n        this.selectedShape.y2 = y\n        break\n    }\n\n    this.requestUpdate()\n  }\n\n  // 마우스 업 이벤트 핸들러 (도형 그리기 종료)\n  private onMouseUp = () => {\n    this.drawing = false\n    const svg = this.svg as SVGSVGElement\n    svg.removeEventListener('mousemove', this.onMouseMove)\n    svg.removeEventListener('mouseup', this.onMouseUp)\n\n    this.selectedShape!.selected = true\n    this.requestUpdate()\n  }\n\n  // SVG 좌표계로 마우스 좌표 변환\n  private getSvgPoint(event: MouseEvent) {\n    const svg = this.svg\n    const point = svg.createSVGPoint()\n    point.x = event.clientX\n    point.y = event.clientY\n    const ctm = svg.getScreenCTM()!.inverse()\n    return point.matrixTransform(ctm)\n  }\n\n  // 도형 렌더링 함수\n  protected renderShape(shape: Shape) {\n    const commonAttrs = {\n      stroke: shape.selected ? 'blue' : 'red',\n      'stroke-width': shape.selected ? 2 : 1,\n      fill: 'transparent',\n      cursor: 'pointer'\n    }\n\n    switch (shape.type) {\n      case 'text':\n        return svg`\n          \n          <text\n            x=\"${shape.x!}\"\n            y=\"${shape.y!}\"\n            fill=\"${commonAttrs.stroke}\"\n            style=\"cursor: ${commonAttrs.cursor}; font-size: 16px; text-decoration: ${shape.selected ? 'underline' : 'none'};\"\n            @mousedown=\"${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}\"\n            @dblclick=\"${(e: MouseEvent) => this.onTextDoubleClick(e, shape)}\"\n          >${shape.text}</text>\n        `\n\n      case 'rectangle':\n        return svg`\n          <rect\n            x=\"${shape.x!}\"\n            y=\"${shape.y!}\"\n            width=\"${shape.width!}\"\n            height=\"${shape.height!}\"\n            stroke=\"${commonAttrs.stroke}\"\n            stroke-width=\"${commonAttrs['stroke-width']}\"\n            fill=\"${commonAttrs.fill}\"\n            style=\"cursor: ${commonAttrs.cursor}\"\n            @mousedown=\"${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}\"\n          ></rect>\n          ${shape.selected ? this.renderResizeHandles(shape) : ''}\n        `\n\n      case 'circle':\n        return svg`\n          <circle\n            cx=\"${shape.cx!}\"\n            cy=\"${shape.cy!}\"\n            r=\"${shape.r!}\"\n            stroke=\"${commonAttrs.stroke}\"\n            stroke-width=\"${commonAttrs['stroke-width']}\"\n            fill=\"${commonAttrs.fill}\"\n            style=\"cursor: ${commonAttrs.cursor}\"\n            @mousedown=\"${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}\"\n          ></circle>\n          ${shape.selected ? this.renderResizeHandles(shape) : ''}\n        `\n\n      case 'triangle':\n        return svg`\n          <polygon\n            points=\"${shape.points!}\"\n            stroke=\"${commonAttrs.stroke}\"\n            stroke-width=\"${commonAttrs['stroke-width']}\"\n            fill=\"${commonAttrs.fill}\"\n            style=\"cursor: ${commonAttrs.cursor}\"\n            @mousedown=\"${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}\"\n          ></polygon>\n          ${shape.selected ? this.renderResizeHandles(shape) : ''}\n        `\n\n      case 'line':\n        return svg`\n          <line\n            x1=\"${shape.x1!}\"\n            y1=\"${shape.y1!}\"\n            x2=\"${shape.x2 ?? shape.x1}\"\n            y2=\"${shape.y2 ?? shape.y1}\"\n            stroke=\"${commonAttrs.stroke}\"\n            stroke-width=\"${commonAttrs['stroke-width']}\"\n            style=\"cursor: ${commonAttrs.cursor}\"\n            @mousedown=\"${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}\"\n          ></line>\n          ${shape.selected ? this.renderResizeHandles(shape) : ''}\n        `\n\n      case 'arrow':\n        return svg`\n          <defs>\n            <marker id=\"arrowhead-${shape.id}\" markerWidth=\"10\" markerHeight=\"7\" refX=\"10\" refY=\"3.5\" orient=\"auto\">\n              <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"${commonAttrs.stroke}\"></polygon>\n            </marker>\n          </defs>\n          <line\n            x1=\"${shape.x1!}\"\n            y1=\"${shape.y1!}\"\n            x2=\"${shape.x2 ?? shape.x1}\"\n            y2=\"${shape.y2 ?? shape.y1}\"\n            stroke=\"${commonAttrs.stroke}\"\n            stroke-width=\"${commonAttrs['stroke-width']}\"\n            marker-end=\"url(#arrowhead-${shape.id})\"\n            style=\"cursor: ${commonAttrs.cursor}\"\n            @mousedown=\"${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}\"\n          ></line>\n          ${shape.selected ? this.renderResizeHandles(shape) : ''}\n        `\n\n      default:\n        return nothing\n    }\n  }\n\n  private onShapeMouseDown(event: MouseEvent, shape: Shape) {\n    event.stopPropagation()\n\n    this.shapes = this.shapes.map(s => ({\n      ...s,\n      selected: s.id === shape.id\n    }))\n\n    this.selectedShape = this.shapes.find(s => s.id == shape.id)!\n\n    // 마우스 클릭 좌표와 도형의 현재 좌표 차이 계산\n    const { x, y } = this.getSvgPoint(event)\n\n    switch (shape.type) {\n      case 'text':\n      case 'rectangle':\n      case 'circle':\n        this.offsetX = x - (shape.x || shape.cx || 0)\n        this.offsetY = y - (shape.y || shape.cy || 0)\n        break\n\n      case 'triangle':\n        const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))\n        const [px, py] = points[0] || [0, 0]\n\n        this.offsetX = x - px\n        this.offsetY = y - py\n\n        break\n\n      case 'line':\n      case 'arrow':\n        this.offsetX = x - shape.x1!\n        this.offsetY = y - shape.y1!\n        break\n    }\n\n    // 드래그 이벤트 리스너 추가\n    const svg = this.svg as SVGSVGElement\n    svg.addEventListener('mousemove', this.onShapeMouseMove)\n    svg.addEventListener('mouseup', this.onShapeMouseUp)\n  }\n\n  private onShapeMouseMove = (event: MouseEvent) => {\n    if (!this.selectedShape) {\n      return\n    }\n\n    const { x, y } = this.getSvgPoint(event)\n\n    // 마우스 이동에 따라 도형의 위치 업데이트\n    switch (this.selectedShape.type) {\n      case 'text':\n      case 'rectangle':\n        this.selectedShape.x = x - this.offsetX\n        this.selectedShape.y = y - this.offsetY\n        break\n      case 'circle':\n        this.selectedShape.cx = x - this.offsetX\n        this.selectedShape.cy = y - this.offsetY\n        break\n      case 'triangle':\n        const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))\n        const [ox, oy] = points[0]\n\n        this.selectedShape.points = points\n          .map(([px, py]) => [px - ox + x - this.offsetX, py - oy + y - this.offsetY].join(','))\n          .join(' ')\n        break\n      case 'line':\n      case 'arrow':\n        const dxLine = x - this.offsetX\n        const dyLine = y - this.offsetY\n        const deltaX = dxLine - this.selectedShape.x1!\n        const deltaY = dyLine - this.selectedShape.y1!\n        this.selectedShape.x1 = dxLine\n        this.selectedShape.y1 = dyLine\n        this.selectedShape.x2 = this.selectedShape.x2! + deltaX\n        this.selectedShape.y2 = this.selectedShape.y2! + deltaY\n        break\n    }\n\n    this.requestUpdate() // 화면 업데이트\n  }\n\n  private onShapeMouseUp = () => {\n    const svg = this.svg as SVGSVGElement\n    svg.removeEventListener('mousemove', this.onShapeMouseMove)\n    svg.removeEventListener('mouseup', this.onShapeMouseUp)\n  }\n\n  private getScale(): number {\n    if (!this.svg) {\n      return 1\n    }\n\n    const [vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n\n    const scaleX = vbWidth / this.svg.clientWidth\n    const scaleY = vbHeight / this.svg.clientHeight\n\n    return Math.max(scaleX, scaleY)\n  }\n\n  private renderResizeHandles(shape: Shape) {\n    let handles: Array<{ x: number; y: number; cursor: string }> = []\n\n    switch (shape.type) {\n      case 'text':\n      case 'rectangle':\n        handles = [\n          { x: shape.x!, y: shape.y!, cursor: 'nwse-resize' },\n          { x: shape.x! + shape.width!, y: shape.y!, cursor: 'nesw-resize' },\n          { x: shape.x!, y: shape.y! + shape.height!, cursor: 'nesw-resize' },\n          { x: shape.x! + shape.width!, y: shape.y! + shape.height!, cursor: 'nwse-resize' }\n        ]\n        break\n      case 'circle':\n        handles = [\n          { x: shape.cx! + shape.r!, y: shape.cy!, cursor: 'ew-resize' },\n          { x: shape.cx! - shape.r!, y: shape.cy!, cursor: 'ew-resize' },\n          { x: shape.cx!, y: shape.cy! + shape.r!, cursor: 'ns-resize' },\n          { x: shape.cx!, y: shape.cy! - shape.r!, cursor: 'ns-resize' }\n        ]\n        break\n      case 'triangle':\n        const points = shape.points!.split(' ').map(p => p.split(',').map(Number))\n        handles = points.map(([x, y]) => ({ x, y, cursor: 'move' }))\n        break\n      case 'line':\n      case 'arrow':\n        handles = [\n          { x: shape.x1!, y: shape.y1!, cursor: 'move' },\n          { x: shape.x2!, y: shape.y2!, cursor: 'move' }\n        ]\n        break\n    }\n\n    return svg`\n      ${handles.map(\n        handle => svg`\n          <g\n            class=\"resize-handle-group\"\n            style=\"transform: translate(${handle.x}px, ${handle.y}px) scale(${1 / this.zoomLevel});\"\n          >\n            <rect\n              x=\"-5\"\n              y=\"-5\"\n              width=\"10\"\n              height=\"10\"\n              fill=\"white\"\n              stroke=\"black\"\n              class=\"resize-handle\"\n              style=\"cursor: ${handle.cursor};\"\n              @mousedown=\"${(e: MouseEvent) => this.onHandleMouseDown(e, shape, handle)}\"\n            ></rect>\n          </g>\n        `\n      )}\n    `\n  }\n\n  private onHandleMouseDown(event: MouseEvent, shape: Shape, handle: any) {\n    event.stopPropagation()\n    this.selectedShape = shape\n    this.offsetX = handle.x\n    this.offsetY = handle.y\n    const svg = this.svg as SVGSVGElement\n    svg.addEventListener('mousemove', this.onHandleMouseMove)\n    svg.addEventListener('mouseup', this.onHandleMouseUp)\n  }\n\n  private onHandleMouseMove = (event: MouseEvent) => {\n    if (!this.selectedShape) return\n    const { x, y } = this.getSvgPoint(event)\n\n    switch (this.selectedShape.type) {\n      case 'text':\n      case 'rectangle':\n        this.selectedShape.width = Math.abs(x - this.selectedShape.x!)\n        this.selectedShape.height = Math.abs(y - this.selectedShape.y!)\n        if (x < this.selectedShape.x!) this.selectedShape.x = x\n        if (y < this.selectedShape.y!) this.selectedShape.y = y\n        break\n      case 'circle':\n        const dx = x - this.selectedShape.cx!\n        const dy = y - this.selectedShape.cy!\n        this.selectedShape.r = Math.sqrt(dx * dx + dy * dy)\n        break\n      case 'triangle':\n        const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))\n        const index = points.findIndex(([px, py]) => px === this.offsetX && py === this.offsetY)\n        if (index !== -1) {\n          points[index] = [x, y]\n          this.selectedShape.points = points.map(p => p.join(',')).join(' ')\n          this.offsetX = x\n          this.offsetY = y\n        }\n        break\n      case 'line':\n      case 'arrow':\n        if (this.offsetX === this.selectedShape.x1 && this.offsetY === this.selectedShape.y1) {\n          this.selectedShape.x1 = x\n          this.selectedShape.y1 = y\n        } else if (this.offsetX === this.selectedShape.x2 && this.offsetY === this.selectedShape.y2) {\n          this.selectedShape.x2 = x\n          this.selectedShape.y2 = y\n        }\n        this.offsetX = x\n        this.offsetY = y\n        break\n    }\n\n    this.requestUpdate()\n  }\n\n  private onHandleMouseUp = () => {\n    const svg = this.svg as SVGSVGElement\n    svg.removeEventListener('mousemove', this.onHandleMouseMove)\n    svg.removeEventListener('mouseup', this.onHandleMouseUp)\n    this.selectedShape = null\n  }\n\n  private onTextDoubleClick(event: MouseEvent, shape: Shape) {\n    event.stopPropagation()\n\n    var input: HTMLInputElement | null = document.createElement('input')\n    input.style.position = 'absolute'\n    input.style.left = `${event.clientX}px`\n    input.style.top = `${event.clientY}px`\n    input.value = shape.text || ''\n    document.body.appendChild(input)\n    input.focus()\n\n    input.addEventListener('keydown', e => {\n      if (e.key === 'Enter') {\n        shape.text = input!.value\n        document.body.removeChild(input!)\n        input = null\n\n        this.requestUpdate()\n      } else if (e.key === 'Escape') {\n        document.body.removeChild(input!)\n        input = null\n\n        this.requestUpdate()\n      }\n    })\n\n    input.addEventListener('blur', () => {\n      requestAnimationFrame(() => {\n        input && document.body.removeChild(input)\n        input = null\n      })\n    })\n  }\n}\n"]}