@operato/image-marker 9.0.0-beta.10 → 9.0.0-beta.14

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.
 
+## [9.0.0-beta.14](https://github.com/hatiolab/operato/compare/v9.0.0-beta.13...v9.0.0-beta.14) (2025-01-27)
+
+
+### :rocket: New Features
+
+* module property-panel ([d78e4cf](https://github.com/hatiolab/operato/commit/d78e4cf7080b95fa74e61b42094b9f3f59f1409b))
+
+
+
+## [9.0.0-beta.11](https://github.com/hatiolab/operato/compare/v9.0.0-beta.10...v9.0.0-beta.11) (2025-01-25)
+
+
+### :bug: Bug Fix
+
+* tsconfig option useDefineForClassFields=false ([0d77c0a](https://github.com/hatiolab/operato/commit/0d77c0aa620282c65b3c05f8e0b559e82836b6ab))
+
+
+
 ## [9.0.0-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
 
 

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

@@ -5,7 +5,20 @@ import { debounce } from 'lodash-es';
 import { GestureHelper } from '@operato/utils/gesture-helper.js';
 import { DefaultImageProvider } from './default-image-provider.js';
 export class BaseImageMarker extends LitElement {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        this.imageUrl = '';
+        this.shapes = [];
+        this.viewBox = '0 0 800 600';
+        this.zoomLevel = 1;
+        this.imageProvider = new DefaultImageProvider();
+        this.debouncedUpdateImage = debounce(this.updateImage.bind(this), 300);
+        this.zoomFactor = 0.1;
+        this.zoomThreshold = 0.05;
+        this.initialViewBox = null;
+        this.gestureHelper = null;
+    }
+    static { this.styles = [
         css `
       :host {
         display: flex;
@@ -30,20 +43,7 @@ export class BaseImageMarker extends LitElement {
         cursor: pointer;
       }
     `
-    ];
-    imageUrl = '';
-    shapes = [];
-    currentImage;
-    viewBox = '0 0 800 600';
-    zoomLevel = 1;
-    imageProvider = new DefaultImageProvider();
-    debouncedUpdateImage = debounce(this.updateImage.bind(this), 300);
-    zoomFactor = 0.1;
-    zoomThreshold = 0.05;
-    initialViewBox = null;
-    svg;
-    image;
-    gestureHelper = null;
+    ]; }
     connectedCallback() {
         super.connectedCallback();
         requestAnimationFrame(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"base-image-marker.js","sourceRoot":"","sources":["../../src/base-image-marker.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, svg, nothing, PropertyValues } from 'lit'\nimport { property, state, query } from 'lit/decorators.js'\nimport { debounce } from 'lodash-es'\n\nimport {\n  GestureEventDoubleTap,\n  GestureEventDrag,\n  GestureEventPinch,\n  GestureHelper\n} from '@operato/utils/gesture-helper.js'\nimport { ImageProvider, Shape } from './types.js'\nimport { DefaultImageProvider } from './default-image-provider.js'\n\nexport class BaseImageMarker extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      .container {\n        flex: 1;\n        position: relative;\n      }\n\n      svg {\n        position: absolute;\n        top: 0;\n        left: 0;\n        cursor: pointer;\n        width: 100%;\n        height: 100%;\n        touch-action: none;\n      }\n\n      .link:hover {\n        cursor: pointer;\n      }\n    `\n  ]\n\n  @property({ type: String }) imageUrl: string = ''\n  @property({ type: Array }) shapes: Shape[] = []\n\n  @state() protected currentImage?: string\n  @state() protected viewBox = '0 0 800 600'\n  @state() protected zoomLevel = 1\n  @state() private imageProvider?: ImageProvider = new DefaultImageProvider()\n\n  protected debouncedUpdateImage = debounce(this.updateImage.bind(this), 300)\n  protected zoomFactor = 0.1\n  protected zoomThreshold = 0.05\n\n  protected initialViewBox: string | null = null\n\n  @query('svg') protected svg!: SVGSVGElement\n  @query('image') protected image!: SVGImageElement\n\n  private gestureHelper: GestureHelper | null = null\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    requestAnimationFrame(() => {\n      this.gestureHelper = new GestureHelper(this.svg)\n    })\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    this.gestureHelper?.dispose()\n    this.gestureHelper = null\n  }\n\n  protected updated(changes: PropertyValues): void {\n    if (changes.has('imageUrl') || changes.has('imageProvider')) {\n      this.zoomLevel = 1\n      this.initialViewBox = null\n      this.updateImage()\n    }\n  }\n\n  public setImageProvider(provider: ImageProvider) {\n    this.imageProvider = provider\n  }\n\n  protected onImageLoad(event: Event) {\n    const element = event.target as SVGImageElement\n    const img = new Image()\n\n    img.onload = () => {\n      const width = img.naturalWidth\n      const height = img.naturalHeight\n\n      if (!this.initialViewBox) {\n        this.initialViewBox = `0 0 ${width} ${height}`\n        this.viewBox = this.initialViewBox\n\n        element.setAttribute('width', width.toString())\n        element.setAttribute('height', height.toString())\n        element.setAttribute('preserveAspectRatio', 'xMidYMid meet')\n      } else {\n        const [initialX, initialY, initialWidth, initialHeight] = this.initialViewBox.split(' ').map(Number)\n        const scale = initialWidth / width\n\n        element.setAttribute('width', (width * scale).toString())\n        element.setAttribute('height', (height * scale).toString())\n      }\n    }\n\n    img.src = this.currentImage!\n  }\n\n  protected async updateImage() {\n    if (!this.imageProvider) {\n      throw new Error('ImageProvider is not set')\n    }\n\n    if (!this.imageUrl) {\n      return\n    }\n\n    const options = {\n      id: this.imageUrl, // 이미지 ID는 imageUrl 속성을 사용\n      scale: this.zoomLevel, // scale은 zoomLevel 속성을 사용\n      offsetX: 0, // offsetX는 0으로 설정\n      offsetY: 0, // offsetY는 0으로 설정\n      currentImage: this.currentImage // 기존 이미지 객체 전달\n    }\n\n    this.currentImage = await this.imageProvider.getImage(options)\n  }\n\n  protected onSvgWheel(event: WheelEvent) {\n    event.preventDefault()\n\n    const { offsetX, offsetY, deltaY } = event\n    const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor\n\n    this.zoom(scale, offsetX, offsetY)\n  }\n\n  protected onSvgPinch(e: GestureEventPinch) {\n    e.stopPropagation()\n\n    const { scale, centerX, centerY } = e.detail\n\n    console.log('pinch', e.detail)\n\n    this.zoom(scale, centerX, centerY)\n  }\n\n  protected onSvgDoubleTap(e: GestureEventDoubleTap) {\n    e.stopPropagation()\n\n    this.reset()\n  }\n\n  protected onSvgDrag(e: GestureEventDrag) {\n    const { deltaX, deltaY } = e.detail\n    console.log('drag', e.detail)\n\n    const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n\n    const scaleX = vbWidth / this.svg.clientWidth\n    const scaleY = vbHeight / this.svg.clientHeight\n    const scale = Math.max(scaleX, scaleY)\n\n    const newVbX = vbX - deltaX * scale\n    const newVbY = vbY - deltaY * scale\n\n    this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`\n\n    this.debouncedUpdateImage()\n  }\n\n  zoom(scale: number, offsetX: number, offsetY: number) {\n    if (Math.abs(scale) > this.zoomThreshold) {\n      this.zoomLevel *= scale\n\n      const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n      const mouseX = vbX + (offsetX / this.svg.clientWidth) * vbWidth\n      const mouseY = vbY + (offsetY / this.svg.clientHeight) * vbHeight\n\n      const newVbWidth = vbWidth / scale\n      const newVbHeight = vbHeight / scale\n\n      const newVbX = mouseX - (offsetX / this.svg.clientWidth) * newVbWidth\n      const newVbY = mouseY - (offsetY / this.svg.clientHeight) * newVbHeight\n\n      this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`\n\n      this.debouncedUpdateImage()\n    }\n  }\n\n  public reset() {\n    if (!this.initialViewBox) {\n      this.zoomLevel = 1\n      return\n    }\n\n    this.viewBox = this.initialViewBox!\n    this.zoomLevel = 1\n\n    this.debouncedUpdateImage()\n  }\n\n  protected handleLinkClick(shape: Shape) {\n    this.dispatchEvent(\n      new CustomEvent('link-clicked', {\n        detail: { id: shape.id, link: shape.link },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  protected renderShape(shape: Shape) {\n    const commonAttrs = {\n      stroke: 'red',\n      'stroke-width': 1,\n      fill: 'transparent'\n    }\n\n    switch (shape.type) {\n      case 'text':\n        return svg`<text x=\"${shape.x}\" y=\"${shape.y}\" text-anchor=\"middle\" alignment-baseline=\"middle\" fill=\"black\">${shape.text}</text>`\n      case 'rectangle':\n        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}\"></rect>`\n      case 'circle':\n        return svg`<circle cx=\"${shape.cx}\" cy=\"${shape.cy}\" r=\"${shape.r}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" fill=\"${commonAttrs.fill}\"></circle>`\n      case 'line':\n        return svg`<line x1=\"${shape.x1}\" y1=\"${shape.y1}\" x2=\"${shape.x2}\" y2=\"${shape.y2}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\"></line>`\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 x1=\"${shape.x1}\" y1=\"${shape.y1}\" x2=\"${shape.x2}\" y2=\"${shape.y2}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" marker-end=\"url(#arrowhead-${shape.id})\"></line>`\n      case 'link':\n        return svg`\n          <rect class=\"link\" x=\"${shape.x}\" y=\"${shape.y}\" width=\"${shape.width}\" height=\"${shape.height}\" \n            stroke=\"${commonAttrs.stroke}\" stroke-width=\"0\" \n            fill=\"${commonAttrs.stroke}\" fill-opacity=\"0.3\" @click=\"${() => this.handleLinkClick(shape)}\">\n          </rect>`\n      default:\n        return nothing\n    }\n  }\n\n  protected getPointFromEvent(event: MouseEvent | PointerEvent | GestureEventDrag) {\n    if ('clientX' in event) {\n      return {\n        x: event.clientX,\n        y: event.clientY\n      }\n    } else {\n      const { clientX, clientY } = event.detail\n      return {\n        x: clientX,\n        y: clientY\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"base-image-marker.js","sourceRoot":"","sources":["../../src/base-image-marker.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, svg, nothing, PropertyValues } from 'lit'\nimport { property, state, query } from 'lit/decorators.js'\nimport { debounce } from 'lodash-es'\n\nimport {\n  GestureEventDoubleTap,\n  GestureEventDrag,\n  GestureEventPinch,\n  GestureHelper\n} from '@operato/utils/gesture-helper.js'\nimport { ImageProvider, Shape } from './types.js'\nimport { DefaultImageProvider } from './default-image-provider.js'\n\nexport class BaseImageMarker extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      .container {\n        flex: 1;\n        position: relative;\n      }\n\n      svg {\n        position: absolute;\n        top: 0;\n        left: 0;\n        cursor: pointer;\n        width: 100%;\n        height: 100%;\n        touch-action: none;\n      }\n\n      .link:hover {\n        cursor: pointer;\n      }\n    `\n  ]\n\n  @property({ type: String }) imageUrl: string = ''\n  @property({ type: Array }) shapes: Shape[] = []\n\n  @state() protected currentImage?: string\n  @state() protected viewBox = '0 0 800 600'\n  @state() protected zoomLevel = 1\n  @state() private imageProvider?: ImageProvider = new DefaultImageProvider()\n\n  protected debouncedUpdateImage = debounce(this.updateImage.bind(this), 300)\n  protected zoomFactor = 0.1\n  protected zoomThreshold = 0.05\n\n  protected initialViewBox: string | null = null\n\n  @query('svg') protected svg!: SVGSVGElement\n  @query('image') protected image!: SVGImageElement\n\n  private gestureHelper: GestureHelper | null = null\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    requestAnimationFrame(() => {\n      this.gestureHelper = new GestureHelper(this.svg)\n    })\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    this.gestureHelper?.dispose()\n    this.gestureHelper = null\n  }\n\n  protected updated(changes: PropertyValues): void {\n    if (changes.has('imageUrl') || changes.has('imageProvider')) {\n      this.zoomLevel = 1\n      this.initialViewBox = null\n      this.updateImage()\n    }\n  }\n\n  public setImageProvider(provider: ImageProvider) {\n    this.imageProvider = provider\n  }\n\n  protected onImageLoad(event: Event) {\n    const element = event.target as SVGImageElement\n    const img = new Image()\n\n    img.onload = () => {\n      const width = img.naturalWidth\n      const height = img.naturalHeight\n\n      if (!this.initialViewBox) {\n        this.initialViewBox = `0 0 ${width} ${height}`\n        this.viewBox = this.initialViewBox\n\n        element.setAttribute('width', width.toString())\n        element.setAttribute('height', height.toString())\n        element.setAttribute('preserveAspectRatio', 'xMidYMid meet')\n      } else {\n        const [initialX, initialY, initialWidth, initialHeight] = this.initialViewBox.split(' ').map(Number)\n        const scale = initialWidth / width\n\n        element.setAttribute('width', (width * scale).toString())\n        element.setAttribute('height', (height * scale).toString())\n      }\n    }\n\n    img.src = this.currentImage!\n  }\n\n  protected async updateImage() {\n    if (!this.imageProvider) {\n      throw new Error('ImageProvider is not set')\n    }\n\n    if (!this.imageUrl) {\n      return\n    }\n\n    const options = {\n      id: this.imageUrl, // 이미지 ID는 imageUrl 속성을 사용\n      scale: this.zoomLevel, // scale은 zoomLevel 속성을 사용\n      offsetX: 0, // offsetX는 0으로 설정\n      offsetY: 0, // offsetY는 0으로 설정\n      currentImage: this.currentImage // 기존 이미지 객체 전달\n    }\n\n    this.currentImage = await this.imageProvider.getImage(options)\n  }\n\n  protected onSvgWheel(event: WheelEvent) {\n    event.preventDefault()\n\n    const { offsetX, offsetY, deltaY } = event\n    const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor\n\n    this.zoom(scale, offsetX, offsetY)\n  }\n\n  protected onSvgPinch(e: GestureEventPinch) {\n    e.stopPropagation()\n\n    const { scale, centerX, centerY } = e.detail\n\n    console.log('pinch', e.detail)\n\n    this.zoom(scale, centerX, centerY)\n  }\n\n  protected onSvgDoubleTap(e: GestureEventDoubleTap) {\n    e.stopPropagation()\n\n    this.reset()\n  }\n\n  protected onSvgDrag(e: GestureEventDrag) {\n    const { deltaX, deltaY } = e.detail\n    console.log('drag', e.detail)\n\n    const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n\n    const scaleX = vbWidth / this.svg.clientWidth\n    const scaleY = vbHeight / this.svg.clientHeight\n    const scale = Math.max(scaleX, scaleY)\n\n    const newVbX = vbX - deltaX * scale\n    const newVbY = vbY - deltaY * scale\n\n    this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`\n\n    this.debouncedUpdateImage()\n  }\n\n  zoom(scale: number, offsetX: number, offsetY: number) {\n    if (Math.abs(scale) > this.zoomThreshold) {\n      this.zoomLevel *= scale\n\n      const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n      const mouseX = vbX + (offsetX / this.svg.clientWidth) * vbWidth\n      const mouseY = vbY + (offsetY / this.svg.clientHeight) * vbHeight\n\n      const newVbWidth = vbWidth / scale\n      const newVbHeight = vbHeight / scale\n\n      const newVbX = mouseX - (offsetX / this.svg.clientWidth) * newVbWidth\n      const newVbY = mouseY - (offsetY / this.svg.clientHeight) * newVbHeight\n\n      this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`\n\n      this.debouncedUpdateImage()\n    }\n  }\n\n  public reset() {\n    if (!this.initialViewBox) {\n      this.zoomLevel = 1\n      return\n    }\n\n    this.viewBox = this.initialViewBox!\n    this.zoomLevel = 1\n\n    this.debouncedUpdateImage()\n  }\n\n  protected handleLinkClick(shape: Shape) {\n    this.dispatchEvent(\n      new CustomEvent('link-clicked', {\n        detail: { id: shape.id, link: shape.link },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  protected renderShape(shape: Shape) {\n    const commonAttrs = {\n      stroke: 'red',\n      'stroke-width': 1,\n      fill: 'transparent'\n    }\n\n    switch (shape.type) {\n      case 'text':\n        return svg`<text x=\"${shape.x}\" y=\"${shape.y}\" text-anchor=\"middle\" alignment-baseline=\"middle\" fill=\"black\">${shape.text}</text>`\n      case 'rectangle':\n        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}\"></rect>`\n      case 'circle':\n        return svg`<circle cx=\"${shape.cx}\" cy=\"${shape.cy}\" r=\"${shape.r}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" fill=\"${commonAttrs.fill}\"></circle>`\n      case 'line':\n        return svg`<line x1=\"${shape.x1}\" y1=\"${shape.y1}\" x2=\"${shape.x2}\" y2=\"${shape.y2}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\"></line>`\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 x1=\"${shape.x1}\" y1=\"${shape.y1}\" x2=\"${shape.x2}\" y2=\"${shape.y2}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" marker-end=\"url(#arrowhead-${shape.id})\"></line>`\n      case 'link':\n        return svg`\n          <rect class=\"link\" x=\"${shape.x}\" y=\"${shape.y}\" width=\"${shape.width}\" height=\"${shape.height}\" \n            stroke=\"${commonAttrs.stroke}\" stroke-width=\"0\" \n            fill=\"${commonAttrs.stroke}\" fill-opacity=\"0.3\" @click=\"${() => this.handleLinkClick(shape)}\">\n          </rect>`\n      default:\n        return nothing\n    }\n  }\n\n  protected getPointFromEvent(event: MouseEvent | PointerEvent | GestureEventDrag) {\n    if ('clientX' in event) {\n      return {\n        x: event.clientX,\n        y: event.clientY\n      }\n    } else {\n      const { clientX, clientY } = event.detail\n      return {\n        x: clientX,\n        y: clientY\n      }\n    }\n  }\n}\n"]}

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

@@ -3,7 +3,11 @@ import '@material/web/icon/icon.js';
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let OxImageMarkerMode = class OxImageMarkerMode extends LitElement {
-    static styles = css `
+    constructor() {
+        super(...arguments);
+        this.currentMode = 'edit';
+    }
+    static { this.styles = css `
     :host {
       display: flex;
       flex-direction: column;
@@ -33,9 +37,7 @@ let OxImageMarkerMode = class OxImageMarkerMode extends LitElement {
     .palette [selected] {
       background-color: #d0d0d0;
     }
-  `;
-    currentMode = 'edit';
-    currentShapeType;
+  `; }
     render() {
         return html `
       <div class="palette">

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

@@ -1 +1 @@
-{"version":3,"file":"ox-image-marker-mode.js","sourceRoot":"","sources":["../../src/ox-image-marker-mode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ImageMarkerMode, ShapeType } from './types.js'\n\n@customElement('ox-image-marker-mode')\nexport class OxImageMarkerMode extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-medium);\n    }\n\n    .palette {\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-small);\n      justify-content: center;\n      margin: var(--spacing-medium);\n\n      --md-icon-size: 16px;\n    }\n\n    .palette > * {\n      padding: var(--spacing-small);\n      cursor: pointer;\n      background-color: #f0f0f0;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      width: 12px;\n      height: 12px;\n    }\n\n    .palette [selected] {\n      background-color: #d0d0d0;\n    }\n  `\n\n  @property({ type: String }) currentMode: ImageMarkerMode = 'edit'\n  @property({ type: String }) currentShapeType?: ShapeType\n\n  render() {\n    return html`\n      <div class=\"palette\">\n        <md-icon\n          title=\"Edit or View\"\n          ?selected=${this.currentMode !== 'shape'}\n          @click=${() => this.setMode(this.currentMode !== 'edit' ? 'edit' : 'view')}\n          >${this.currentMode !== 'view' ? 'brush' : 'drag_pan'}</md-icon\n        >\n\n        <md-icon\n          title=\"Text\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'text'}\n          @click=${() => this.setShape('text')}\n          >match_case</md-icon\n        >\n\n        <md-icon\n          title=\"Rectangle\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'rectangle'}\n          @click=${() => this.setShape('rectangle')}\n          >rectangle</md-icon\n        >\n\n        <md-icon\n          title=\"Circle\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'circle'}\n          @click=${() => this.setShape('circle')}\n          >circle</md-icon\n        >\n\n        <md-icon\n          title=\"Triangle\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'triangle'}\n          @click=${() => this.setShape('triangle')}\n          >change_history</md-icon\n        >\n\n        <md-icon\n          title=\"Line\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'line'}\n          @click=${() => this.setShape('line')}\n          >shape_line</md-icon\n        >\n\n        <md-icon\n          title=\"Arrow\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'arrow'}\n          @click=${() => this.setShape('arrow')}\n          >line_end_arrow</md-icon\n        >\n      </div>\n\n      <div class=\"palette\">\n        <md-icon title=\"Fit size\" @click=${() => this.onClickFitSize()}>recenter</md-icon>\n      </div>\n\n      <div class=\"palette\">\n        <md-icon title=\"Delete\" @click=${() => this.onClickDelete()}>delete</md-icon>\n        <md-icon title=\"Save\" @click=${() => this.onClickSave()}>save</md-icon>\n      </div>\n    `\n  }\n\n  public setMode(mode: ImageMarkerMode) {\n    this.currentMode = mode\n\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        detail: { mode: this.currentMode, shapeType: this.currentShapeType },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  protected setShape(shapeType: ShapeType) {\n    this.currentMode = 'shape'\n    this.currentShapeType = shapeType\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        detail: { mode: 'shape', shapeType: this.currentShapeType },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onClickDelete() {\n    this.dispatchEvent(\n      new CustomEvent('tap-delete', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onClickSave() {\n    this.dispatchEvent(\n      new CustomEvent('tap-save', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onClickFitSize() {\n    this.dispatchEvent(\n      new CustomEvent('tap-fit-size', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-image-marker-mode.js","sourceRoot":"","sources":["../../src/ox-image-marker-mode.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAiCuB,gBAAW,GAAoB,MAAM,CAAA;IAqHnE,CAAC;aArJQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BlB,AA9BY,CA8BZ;IAKD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;sBAIO,IAAI,CAAC,WAAW,KAAK,OAAO;mBAC/B,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;aACvE,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU;;;;;sBAKzC,IAAI,CAAC,WAAW,KAAK,OAAO,IAAI,IAAI,CAAC,gBAAgB,KAAK,MAAM;mBACnE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;sBAMxB,IAAI,CAAC,WAAW,KAAK,OAAO,IAAI,IAAI,CAAC,gBAAgB,KAAK,WAAW;mBACxE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;;;;;;sBAM7B,IAAI,CAAC,WAAW,KAAK,OAAO,IAAI,IAAI,CAAC,gBAAgB,KAAK,QAAQ;mBACrE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;;;;;;sBAM1B,IAAI,CAAC,WAAW,KAAK,OAAO,IAAI,IAAI,CAAC,gBAAgB,KAAK,UAAU;mBACvE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;;;;;;sBAM5B,IAAI,CAAC,WAAW,KAAK,OAAO,IAAI,IAAI,CAAC,gBAAgB,KAAK,MAAM;mBACnE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;sBAMxB,IAAI,CAAC,WAAW,KAAK,OAAO,IAAI,IAAI,CAAC,gBAAgB,KAAK,OAAO;mBACpE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;;;;;;2CAMJ,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;;;;yCAI7B,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;uCAC5B,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;;KAE1D,CAAA;IACH,CAAC;IAEM,OAAO,CAAC,IAAqB;QAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;QAEvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE;YACpE,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAES,QAAQ,CAAC,SAAoB;QACrC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAA;QAC1B,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAA;QACjC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE;YAC3D,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE;YAC1B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AApH2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAsC;AACrC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAA6B;AAlC7C,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAsJ7B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ImageMarkerMode, ShapeType } from './types.js'\n\n@customElement('ox-image-marker-mode')\nexport class OxImageMarkerMode extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-medium);\n    }\n\n    .palette {\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-small);\n      justify-content: center;\n      margin: var(--spacing-medium);\n\n      --md-icon-size: 16px;\n    }\n\n    .palette > * {\n      padding: var(--spacing-small);\n      cursor: pointer;\n      background-color: #f0f0f0;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      width: 12px;\n      height: 12px;\n    }\n\n    .palette [selected] {\n      background-color: #d0d0d0;\n    }\n  `\n\n  @property({ type: String }) currentMode: ImageMarkerMode = 'edit'\n  @property({ type: String }) currentShapeType?: ShapeType\n\n  render() {\n    return html`\n      <div class=\"palette\">\n        <md-icon\n          title=\"Edit or View\"\n          ?selected=${this.currentMode !== 'shape'}\n          @click=${() => this.setMode(this.currentMode !== 'edit' ? 'edit' : 'view')}\n          >${this.currentMode !== 'view' ? 'brush' : 'drag_pan'}</md-icon\n        >\n\n        <md-icon\n          title=\"Text\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'text'}\n          @click=${() => this.setShape('text')}\n          >match_case</md-icon\n        >\n\n        <md-icon\n          title=\"Rectangle\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'rectangle'}\n          @click=${() => this.setShape('rectangle')}\n          >rectangle</md-icon\n        >\n\n        <md-icon\n          title=\"Circle\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'circle'}\n          @click=${() => this.setShape('circle')}\n          >circle</md-icon\n        >\n\n        <md-icon\n          title=\"Triangle\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'triangle'}\n          @click=${() => this.setShape('triangle')}\n          >change_history</md-icon\n        >\n\n        <md-icon\n          title=\"Line\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'line'}\n          @click=${() => this.setShape('line')}\n          >shape_line</md-icon\n        >\n\n        <md-icon\n          title=\"Arrow\"\n          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'arrow'}\n          @click=${() => this.setShape('arrow')}\n          >line_end_arrow</md-icon\n        >\n      </div>\n\n      <div class=\"palette\">\n        <md-icon title=\"Fit size\" @click=${() => this.onClickFitSize()}>recenter</md-icon>\n      </div>\n\n      <div class=\"palette\">\n        <md-icon title=\"Delete\" @click=${() => this.onClickDelete()}>delete</md-icon>\n        <md-icon title=\"Save\" @click=${() => this.onClickSave()}>save</md-icon>\n      </div>\n    `\n  }\n\n  public setMode(mode: ImageMarkerMode) {\n    this.currentMode = mode\n\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        detail: { mode: this.currentMode, shapeType: this.currentShapeType },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  protected setShape(shapeType: ShapeType) {\n    this.currentMode = 'shape'\n    this.currentShapeType = shapeType\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        detail: { mode: 'shape', shapeType: this.currentShapeType },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onClickDelete() {\n    this.dispatchEvent(\n      new CustomEvent('tap-delete', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onClickSave() {\n    this.dispatchEvent(\n      new CustomEvent('tap-save', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onClickFitSize() {\n    this.dispatchEvent(\n      new CustomEvent('tap-fit-size', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

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

@@ -6,7 +6,167 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { BaseImageMarker } from './base-image-marker.js';
 let OxImageMarker = class OxImageMarker extends BaseImageMarker {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        this.currentMode = 'edit';
+        this.selectedShape = null;
+        // private drawingStarted: boolean = false
+        this.drawing = false;
+        this.startX = 0;
+        this.startY = 0;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.shapeMoveThreshold = 10;
+        this.shapeMoveInitiated = false;
+        this.onPointerMoveOnShape = (event) => {
+            if (!this.selectedShape) {
+                return;
+            }
+            // TODO check if single touch ... (멀티터치를 제외해야한다).
+            // if ('touches' in event && event.touches.length > 1) {
+            //   return
+            // }
+            event.preventDefault();
+            const { x, y } = this.getSvgPoint(event);
+            const dx = x - this.offsetX;
+            const dy = y - this.offsetY;
+            if (!this.shapeMoveInitiated) {
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < this.shapeMoveThreshold) {
+                    return;
+                }
+                this.shapeMoveInitiated = true;
+            }
+            this.offsetX = x;
+            this.offsetY = y;
+            switch (this.selectedShape.type) {
+                case 'text':
+                case 'rectangle':
+                    this.selectedShape.x += dx;
+                    this.selectedShape.y += dy;
+                    break;
+                case 'circle':
+                    this.selectedShape.cx += dx;
+                    this.selectedShape.cy += dy;
+                    break;
+                case 'triangle':
+                    const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
+                    this.selectedShape.points = points.map(([px, py]) => [px + dx, py + dy].join(',')).join(' ');
+                    break;
+                case 'line':
+                case 'arrow':
+                    this.selectedShape.x1 += dx;
+                    this.selectedShape.x2 += dx;
+                    this.selectedShape.y1 += dy;
+                    this.selectedShape.y2 += dy;
+                    break;
+            }
+            this.requestUpdate();
+        };
+        this.onPointerUpOnShape = (event) => {
+            if (!this.selectedShape) {
+                return;
+            }
+            // TODO
+            // if ('touches' in event && event.touches.length > 1) {
+            //   return
+            // }
+            event.preventDefault();
+            document.removeEventListener('pointermove', this.onPointerMoveOnShape);
+            document.removeEventListener('pointerup', this.onPointerUpOnShape);
+        };
+        this.onResizeHandlePointerMove = (event) => {
+            if (!this.selectedShape) {
+                return;
+            }
+            event.preventDefault();
+            const { x, y } = this.getSvgPoint(event);
+            switch (this.selectedShape.type) {
+                case 'rectangle':
+                    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;
+                        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;
+                    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.onResizeHandlePointerUp = (event) => {
+            event.preventDefault();
+            document.removeEventListener('pointermove', this.onResizeHandlePointerMove);
+            document.removeEventListener('pointerup', this.onResizeHandlePointerUp);
+        };
+        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,
         css `
       :host {
@@ -34,19 +194,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         cursor: nwse-resize;
       }
     `
-    ];
-    currentShapeType;
-    currentMode = 'edit';
-    selectedShape = null;
-    imageMarkerMode;
-    // private drawingStarted: boolean = false
-    drawing = false;
-    startX = 0;
-    startY = 0;
-    offsetX = 0;
-    offsetY = 0;
-    shapeMoveThreshold = 10;
-    shapeMoveInitiated = false;
+    ]; }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('tabindex', '0');
@@ -413,63 +561,6 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         document.addEventListener('pointermove', this.onPointerMoveOnShape);
         document.addEventListener('pointerup', this.onPointerUpOnShape);
     }
-    onPointerMoveOnShape = (event) => {
-        if (!this.selectedShape) {
-            return;
-        }
-        // TODO check if single touch ... (멀티터치를 제외해야한다).
-        // if ('touches' in event && event.touches.length > 1) {
-        //   return
-        // }
-        event.preventDefault();
-        const { x, y } = this.getSvgPoint(event);
-        const dx = x - this.offsetX;
-        const dy = y - this.offsetY;
-        if (!this.shapeMoveInitiated) {
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            if (distance < this.shapeMoveThreshold) {
-                return;
-            }
-            this.shapeMoveInitiated = true;
-        }
-        this.offsetX = x;
-        this.offsetY = y;
-        switch (this.selectedShape.type) {
-            case 'text':
-            case 'rectangle':
-                this.selectedShape.x += dx;
-                this.selectedShape.y += dy;
-                break;
-            case 'circle':
-                this.selectedShape.cx += dx;
-                this.selectedShape.cy += dy;
-                break;
-            case 'triangle':
-                const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
-                this.selectedShape.points = points.map(([px, py]) => [px + dx, py + dy].join(',')).join(' ');
-                break;
-            case 'line':
-            case 'arrow':
-                this.selectedShape.x1 += dx;
-                this.selectedShape.x2 += dx;
-                this.selectedShape.y1 += dy;
-                this.selectedShape.y2 += dy;
-                break;
-        }
-        this.requestUpdate();
-    };
-    onPointerUpOnShape = (event) => {
-        if (!this.selectedShape) {
-            return;
-        }
-        // TODO
-        // if ('touches' in event && event.touches.length > 1) {
-        //   return
-        // }
-        event.preventDefault();
-        document.removeEventListener('pointermove', this.onPointerMoveOnShape);
-        document.removeEventListener('pointerup', this.onPointerUpOnShape);
-    };
     renderResizeHandles(shape) {
         let handles = [];
         switch (shape.type) {
@@ -532,85 +623,6 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         document.addEventListener('pointermove', this.onResizeHandlePointerMove);
         document.addEventListener('pointerup', this.onResizeHandlePointerUp);
     }
-    onResizeHandlePointerMove = (event) => {
-        if (!this.selectedShape) {
-            return;
-        }
-        event.preventDefault();
-        const { x, y } = this.getSvgPoint(event);
-        switch (this.selectedShape.type) {
-            case 'rectangle':
-                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;
-                    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;
-                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();
-    };
-    onResizeHandlePointerUp = (event) => {
-        event.preventDefault();
-        document.removeEventListener('pointermove', this.onResizeHandlePointerMove);
-        document.removeEventListener('pointerup', this.onResizeHandlePointerUp);
-    };
     onTextDoubleClick(event, shape) {
         event.stopPropagation();
         event.preventDefault();
@@ -718,17 +730,6 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
         context.font = window.getComputedStyle(input).font;
         return context.measureText(text).width;
     }
-    onFocus = () => {
-        this.addEventListener('keydown', this.handleKeyDown);
-    };
-    onBlur = () => {
-        this.removeEventListener('keydown', this.handleKeyDown);
-    };
-    handleKeyDown = (event) => {
-        if ((event.key === 'Delete' || event.key === 'Backspace') && this.selectedShape) {
-            this.deleteSelectedShape();
-        }
-    };
     deleteSelectedShape() {
         if (this.selectedShape) {
             this.shapes = this.shapes.filter(s => s.id !== this.selectedShape.id);