@operato/image-marker 8.0.0-alpha.33 → 8.0.0-alpha.37

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 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.37](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.36...v8.0.0-alpha.37) (2024-10-20)
+
+
+### :bug: Bug Fix
+
+* pointer-event & pointer-event for ox-image-marker ([c503d0a](https://github.com/hatiolab/operato/commit/c503d0a235ddadd97fdcd84ae98a303a7ffe7a6f))
+* update dev-dependencies version ([d6fe342](https://github.com/hatiolab/operato/commit/d6fe342de738c6bad3528550a862b5a1d2573161))
+
+
+
 ## [8.0.0-alpha.33](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.32...v8.0.0-alpha.33) (2024-10-14)
 
 **Note:** Version bump only for package @operato/image-marker

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

@@ -1,41 +1,34 @@
-import { LitElement, nothing } from 'lit';
-import { Shape } from './types';
+import { LitElement, nothing, PropertyValues } from 'lit';
+import { GestureEventDoubleTap, GestureEventDrag, GestureEventPinch } from '@operato/utils/gesture-helper.js';
+import { ImageProvider, Shape } from './types';
 export declare class BaseImageMarker extends LitElement {
     static styles: import("lit").CSSResult[];
     imageUrl: string;
     shapes: Shape[];
+    protected currentImage?: string;
     protected viewBox: string;
     protected zoomLevel: number;
+    private imageProvider?;
+    protected debouncedUpdateImage: import("lodash").DebouncedFunc<() => Promise<void>>;
     protected zoomFactor: number;
     protected zoomThreshold: number;
-    protected isPanning: boolean;
-    protected panStart: {
-        x: number;
-        y: number;
-    };
-    protected panInitiated: boolean;
-    protected panThreshold: number;
-    protected initialViewBox: string;
-    private initialPinchDistance;
-    private initialZoomLevel;
-    private lastTouchEnd;
+    protected initialViewBox: string | null;
     protected svg: SVGSVGElement;
+    private gestureHelper;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changes: PropertyValues): void;
+    setImageProvider(provider: ImageProvider): void;
     protected onImageLoad(event: Event): void;
+    protected updateImage(): Promise<void>;
     protected onSvgWheel(event: WheelEvent): void;
-    protected onSvgMouseDown(event: MouseEvent): void;
-    protected isDoubleTouch(event: TouchEvent): boolean;
-    protected onSvgTouchStart: (event: TouchEvent) => void;
-    protected startPinchZooming(event: TouchEvent): void;
-    protected onZoomTouchMove: (event: TouchEvent) => void;
-    protected onZoomTouchEnd: (event: TouchEvent) => void;
-    protected applyZoom(): void;
-    protected onSvgDoubleClick(): void;
-    protected resetZoom(): void;
-    protected startPanning(event: MouseEvent | TouchEvent): void;
-    protected onPanMouseMove: (event: MouseEvent | TouchEvent) => void;
-    protected onPanMouseUp: (event: MouseEvent | TouchEvent) => void;
+    protected onSvgPinch(e: GestureEventPinch): void;
+    protected onSvgDoubleTap(e: GestureEventDoubleTap): void;
+    protected onSvgDrag(e: GestureEventDrag): void;
+    zoom(scale: number, offsetX: number, offsetY: number): void;
+    protected reset(): void;
     protected renderShape(shape: Shape): import("lit-html").TemplateResult<2> | typeof nothing;
-    protected getPointFromEvent(event: MouseEvent | TouchEvent): {
+    protected getPointFromEvent(event: MouseEvent | PointerEvent | GestureEventDrag): {
         x: number;
         y: number;
     };

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

@@ -1,6 +1,9 @@
 import { __decorate } from "tslib";
 import { LitElement, css, svg, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
+import { debounce } from 'lodash-es';
+import { GestureHelper } from '@operato/utils/gesture-helper.js';
+import { DefaultImageProvider } from './default-image-provider';
 export class BaseImageMarker extends LitElement {
     constructor() {
         super(...arguments);
@@ -8,87 +11,12 @@ export class BaseImageMarker extends LitElement {
         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.isPanning = false;
-        this.panStart = { x: 0, y: 0 };
-        this.panInitiated = false;
-        this.panThreshold = 20;
-        this.initialViewBox = '0 0 800 600';
-        this.initialPinchDistance = null;
-        this.initialZoomLevel = 1;
-        this.lastTouchEnd = 0;
-        this.onSvgTouchStart = (event) => {
-            event.preventDefault();
-            if (this.isDoubleTouch(event)) {
-                this.resetZoom();
-            }
-            if (event.touches.length === 1) {
-                this.startPanning(event);
-            }
-            else if (event.touches.length === 2) {
-                this.startPinchZooming(event);
-            }
-        };
-        this.onZoomTouchMove = (event) => {
-            event.preventDefault();
-            if (event.touches.length === 2 && this.initialPinchDistance) {
-                const touch1 = event.touches[0];
-                const touch2 = event.touches[1];
-                const dx = touch2.clientX - touch1.clientX;
-                const dy = touch2.clientY - touch1.clientY;
-                const currentPinchDistance = Math.sqrt(dx * dx + dy * dy);
-                const scaleFactor = currentPinchDistance / this.initialPinchDistance;
-                // 줌 threshold 확인 후 줌 적용
-                if (Math.abs(scaleFactor - 1) > this.zoomThreshold) {
-                    this.zoomLevel = this.initialZoomLevel * scaleFactor;
-                    this.applyZoom();
-                }
-            }
-        };
-        this.onZoomTouchEnd = (event) => {
-            event.preventDefault();
-            if (event.touches.length < 2) {
-                this.initialPinchDistance = null;
-            }
-            this.svg.removeEventListener('touchmove', this.onZoomTouchMove);
-            this.svg.removeEventListener('touchend', this.onZoomTouchEnd);
-        };
-        this.onPanMouseMove = (event) => {
-            if (!this.isPanning) {
-                return;
-            }
-            event.preventDefault();
-            const { x, y } = this.getPointFromEvent(event);
-            const dx = x - this.panStart.x;
-            const dy = y - this.panStart.y;
-            if (!this.panInitiated && Math.sqrt(dx * dx + dy * dy) < this.panThreshold) {
-                return;
-            }
-            this.panInitiated = true;
-            const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number);
-            const scaleX = vbWidth / this.svg.clientWidth;
-            const scaleY = vbHeight / this.svg.clientHeight;
-            const scale = Math.max(scaleX, scaleY);
-            const newVbX = vbX - dx * scale;
-            const newVbY = vbY - dy * scale;
-            this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`;
-            this.panStart = { x, y };
-        };
-        this.onPanMouseUp = (event) => {
-            event.preventDefault();
-            const svg = this.svg;
-            this.isPanning = false;
-            svg.classList.remove('dragging');
-            if ('touches' in event) {
-                svg.removeEventListener('touchmove', this.onPanMouseMove);
-                svg.removeEventListener('touchend', this.onPanMouseUp);
-            }
-            else {
-                svg.removeEventListener('mousemove', this.onPanMouseMove);
-                svg.removeEventListener('mouseup', this.onPanMouseUp);
-            }
-        };
+        this.initialViewBox = null;
+        this.gestureHelper = null;
     }
     static { this.styles = [
         css `
@@ -108,24 +36,89 @@ export class BaseImageMarker extends LitElement {
         cursor: pointer;
         width: 100%;
         height: 100%;
+        touch-action: none;
       }
     `
     ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        requestAnimationFrame(() => {
+            this.gestureHelper = new GestureHelper(this.svg);
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.gestureHelper?.dispose();
+        this.gestureHelper = null;
+    }
+    updated(changes) {
+        if (changes.has('imageUrl') || changes.has('imageProvider')) {
+            this.initialViewBox = null;
+            this.updateImage();
+        }
+    }
+    setImageProvider(provider) {
+        this.imageProvider = provider;
+    }
     onImageLoad(event) {
         const img = new Image();
         img.onload = () => {
-            const width = img.naturalWidth;
-            const height = img.naturalHeight;
-            this.viewBox = `0 0 ${width} ${height}`;
-            this.initialViewBox = `0 0 ${width} ${height}`;
+            const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number);
+            if (!this.initialViewBox) {
+                const width = img.naturalWidth;
+                const height = img.naturalHeight;
+                this.initialViewBox = `0 0 ${width} ${height}`;
+                this.viewBox = this.initialViewBox;
+            }
+            else {
+                this.viewBox = `${vbX} ${vbY} ${vbWidth} ${vbHeight}`;
+            }
+        };
+        img.src = this.currentImage;
+    }
+    async updateImage() {
+        if (!this.imageProvider) {
+            throw new Error('ImageProvider is not set');
+        }
+        const options = {
+            id: this.imageUrl, // 이미지 ID는 imageUrl 속성을 사용
+            scale: this.zoomLevel, // scale은 zoomLevel 속성을 사용
+            offsetX: 0, // offsetX는 0으로 설정
+            offsetY: 0, // offsetY는 0으로 설정
+            currentImage: this.currentImage // 기존 이미지 객체 전달
         };
-        img.src = this.imageUrl;
+        this.currentImage = await this.imageProvider.getImage(options);
     }
     onSvgWheel(event) {
         event.preventDefault();
         const { offsetX, offsetY, deltaY } = event;
         const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor;
-        if (Math.abs(scale - 1) > this.zoomThreshold) {
+        this.zoom(scale, offsetX, offsetY);
+    }
+    onSvgPinch(e) {
+        e.stopPropagation();
+        const { scale, centerX, centerY } = e.detail;
+        console.log('pinch', e.detail);
+        this.zoom(scale, centerX, centerY);
+    }
+    onSvgDoubleTap(e) {
+        e.stopPropagation();
+        this.reset();
+    }
+    onSvgDrag(e) {
+        const { deltaX, deltaY } = e.detail;
+        console.log('drag', e.detail);
+        const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number);
+        const scaleX = vbWidth / this.svg.clientWidth;
+        const scaleY = vbHeight / this.svg.clientHeight;
+        const scale = Math.max(scaleX, scaleY);
+        const newVbX = vbX - deltaX * scale;
+        const newVbY = vbY - deltaY * scale;
+        this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`;
+        this.debouncedUpdateImage();
+    }
+    zoom(scale, offsetX, offsetY) {
+        if (Math.abs(scale) > this.zoomThreshold) {
             this.zoomLevel *= scale;
             const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number);
             const mouseX = vbX + (offsetX / this.svg.clientWidth) * vbWidth;
@@ -135,61 +128,13 @@ export class BaseImageMarker extends LitElement {
             const newVbX = mouseX - (offsetX / this.svg.clientWidth) * newVbWidth;
             const newVbY = mouseY - (offsetY / this.svg.clientHeight) * newVbHeight;
             this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`;
+            this.debouncedUpdateImage();
         }
     }
-    onSvgMouseDown(event) {
-        event.preventDefault();
-        this.startPanning(event);
-        this.svg.addEventListener('mousemove', this.onPanMouseMove);
-        this.svg.addEventListener('mouseup', this.onPanMouseUp);
-    }
-    isDoubleTouch(event) {
-        const currentTime = new Date().getTime();
-        const tapLength = currentTime - this.lastTouchEnd;
-        const result = tapLength < 300 && event.touches.length == 1;
-        this.lastTouchEnd = currentTime;
-        return result;
-    }
-    startPinchZooming(event) {
-        const touch1 = event.touches[0];
-        const touch2 = event.touches[1];
-        const dx = touch2.clientX - touch1.clientX;
-        const dy = touch2.clientY - touch1.clientY;
-        this.initialPinchDistance = Math.sqrt(dx * dx + dy * dy);
-        this.initialZoomLevel = this.zoomLevel;
-        this.svg.addEventListener('touchmove', this.onZoomTouchMove);
-        this.svg.addEventListener('touchend', this.onZoomTouchEnd);
-    }
-    applyZoom() {
-        const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number);
-        const initialViewBoxNumbers = this.initialViewBox.split(' ').map(Number);
-        const newVbWidth = initialViewBoxNumbers[2] / this.zoomLevel;
-        const newVbHeight = initialViewBoxNumbers[3] / this.zoomLevel;
-        const newVbX = vbX + (vbWidth - newVbWidth) / 2;
-        const newVbY = vbY + (vbHeight - newVbHeight) / 2;
-        this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`;
-    }
-    onSvgDoubleClick() {
-        this.resetZoom();
-    }
-    resetZoom() {
+    reset() {
         this.viewBox = this.initialViewBox;
         this.zoomLevel = 1;
-    }
-    startPanning(event) {
-        const { x, y } = this.getPointFromEvent(event);
-        this.isPanning = true;
-        this.panStart = { x, y };
-        this.panInitiated = false; // 팬 동작이 아직 시작되지 않았음을 나타냄
-        this.svg.classList.add('dragging');
-        if ('touches' in event) {
-            this.svg.addEventListener('touchmove', this.onPanMouseMove);
-            this.svg.addEventListener('touchend', this.onPanMouseUp);
-        }
-        else {
-            this.svg.addEventListener('mousemove', this.onPanMouseMove);
-            this.svg.addEventListener('mouseup', this.onPanMouseUp);
-        }
+        this.debouncedUpdateImage();
     }
     renderShape(shape) {
         const commonAttrs = {
@@ -219,16 +164,17 @@ export class BaseImageMarker extends LitElement {
         }
     }
     getPointFromEvent(event) {
-        if ('touches' in event) {
+        if ('clientX' in event) {
             return {
-                x: event.touches[0].clientX,
-                y: event.touches[0].clientY
+                x: event.clientX,
+                y: event.clientY
             };
         }
         else {
+            const { clientX, clientY } = event.detail;
             return {
-                x: event.clientX,
-                y: event.clientY
+                x: clientX,
+                y: clientY
             };
         }
     }
@@ -239,12 +185,18 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], BaseImageMarker.prototype, "shapes", void 0);
+__decorate([
+    state()
+], BaseImageMarker.prototype, "currentImage", void 0);
 __decorate([
     state()
 ], BaseImageMarker.prototype, "viewBox", void 0);
 __decorate([
     state()
 ], BaseImageMarker.prototype, "zoomLevel", void 0);
+__decorate([
+    state()
+], BaseImageMarker.prototype, "imageProvider", void 0);
 __decorate([
     query('svg')
 ], BaseImageMarker.prototype, "svg", void 0);

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 } from 'lit'\nimport { property, state, query } from 'lit/decorators.js'\n\nimport { Shape } from './types'\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      }\n    `\n  ]\n\n  @property({ type: String }) imageUrl: string = ''\n  @property({ type: Array }) shapes: Shape[] = []\n\n  @state() protected viewBox = '0 0 800 600'\n  @state() protected zoomLevel = 1\n\n  protected zoomFactor = 0.1\n  protected zoomThreshold = 0.05\n  protected isPanning = false\n  protected panStart = { x: 0, y: 0 }\n  protected panInitiated = false\n  protected panThreshold = 20\n\n  protected initialViewBox = '0 0 800 600'\n  private initialPinchDistance: number | null = null\n  private initialZoomLevel: number = 1\n  private lastTouchEnd: number = 0\n\n  @query('svg') protected svg!: SVGSVGElement\n\n  protected onImageLoad(event: Event) {\n    const img = new Image()\n    img.onload = () => {\n      const width = img.naturalWidth\n      const height = img.naturalHeight\n      this.viewBox = `0 0 ${width} ${height}`\n      this.initialViewBox = `0 0 ${width} ${height}`\n    }\n    img.src = this.imageUrl\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    if (Math.abs(scale - 1) > 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  }\n\n  protected onSvgMouseDown(event: MouseEvent) {\n    event.preventDefault()\n\n    this.startPanning(event)\n\n    this.svg.addEventListener('mousemove', this.onPanMouseMove)\n    this.svg.addEventListener('mouseup', this.onPanMouseUp)\n  }\n\n  protected isDoubleTouch(event: TouchEvent) {\n    const currentTime = new Date().getTime()\n    const tapLength = currentTime - this.lastTouchEnd\n\n    const result = tapLength < 300 && event.touches.length == 1\n    this.lastTouchEnd = currentTime\n\n    return result\n  }\n\n  protected onSvgTouchStart = (event: TouchEvent) => {\n    event.preventDefault()\n\n    if (this.isDoubleTouch(event)) {\n      this.resetZoom()\n    }\n\n    if (event.touches.length === 1) {\n      this.startPanning(event)\n    } else if (event.touches.length === 2) {\n      this.startPinchZooming(event)\n    }\n  }\n\n  protected startPinchZooming(event: TouchEvent) {\n    const touch1 = event.touches[0]\n    const touch2 = event.touches[1]\n\n    const dx = touch2.clientX - touch1.clientX\n    const dy = touch2.clientY - touch1.clientY\n\n    this.initialPinchDistance = Math.sqrt(dx * dx + dy * dy)\n    this.initialZoomLevel = this.zoomLevel\n\n    this.svg.addEventListener('touchmove', this.onZoomTouchMove)\n    this.svg.addEventListener('touchend', this.onZoomTouchEnd)\n  }\n\n  protected onZoomTouchMove = (event: TouchEvent) => {\n    event.preventDefault()\n\n    if (event.touches.length === 2 && this.initialPinchDistance) {\n      const touch1 = event.touches[0]\n      const touch2 = event.touches[1]\n      const dx = touch2.clientX - touch1.clientX\n      const dy = touch2.clientY - touch1.clientY\n      const currentPinchDistance = Math.sqrt(dx * dx + dy * dy)\n\n      const scaleFactor = currentPinchDistance / this.initialPinchDistance\n\n      // 줌 threshold 확인 후 줌 적용\n      if (Math.abs(scaleFactor - 1) > this.zoomThreshold) {\n        this.zoomLevel = this.initialZoomLevel * scaleFactor\n        this.applyZoom()\n      }\n    }\n  }\n\n  protected onZoomTouchEnd = (event: TouchEvent) => {\n    event.preventDefault()\n\n    if (event.touches.length < 2) {\n      this.initialPinchDistance = null\n    }\n\n    this.svg.removeEventListener('touchmove', this.onZoomTouchMove)\n    this.svg.removeEventListener('touchend', this.onZoomTouchEnd)\n  }\n\n  protected applyZoom() {\n    const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n    const initialViewBoxNumbers = this.initialViewBox.split(' ').map(Number)\n    const newVbWidth = initialViewBoxNumbers[2] / this.zoomLevel\n    const newVbHeight = initialViewBoxNumbers[3] / this.zoomLevel\n    const newVbX = vbX + (vbWidth - newVbWidth) / 2\n    const newVbY = vbY + (vbHeight - newVbHeight) / 2\n\n    this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`\n  }\n\n  protected onSvgDoubleClick() {\n    this.resetZoom()\n  }\n\n  protected resetZoom() {\n    this.viewBox = this.initialViewBox\n    this.zoomLevel = 1\n  }\n\n  protected startPanning(event: MouseEvent | TouchEvent) {\n    const { x, y } = this.getPointFromEvent(event)\n\n    this.isPanning = true\n    this.panStart = { x, y }\n    this.panInitiated = false // 팬 동작이 아직 시작되지 않았음을 나타냄\n    this.svg.classList.add('dragging')\n\n    if ('touches' in event) {\n      this.svg.addEventListener('touchmove', this.onPanMouseMove)\n      this.svg.addEventListener('touchend', this.onPanMouseUp)\n    } else {\n      this.svg.addEventListener('mousemove', this.onPanMouseMove)\n      this.svg.addEventListener('mouseup', this.onPanMouseUp)\n    }\n  }\n\n  protected onPanMouseMove = (event: MouseEvent | TouchEvent) => {\n    if (!this.isPanning) {\n      return\n    }\n    event.preventDefault()\n\n    const { x, y } = this.getPointFromEvent(event)\n\n    const dx = x - this.panStart.x\n    const dy = y - this.panStart.y\n\n    if (!this.panInitiated && Math.sqrt(dx * dx + dy * dy) < this.panThreshold) {\n      return\n    }\n\n    this.panInitiated = true\n\n    const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\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 - dx * scale\n    const newVbY = vbY - dy * scale\n\n    this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`\n    this.panStart = { x, y }\n  }\n\n  protected onPanMouseUp = (event: MouseEvent | TouchEvent) => {\n    event.preventDefault()\n\n    const svg = this.svg\n\n    this.isPanning = false\n    svg.classList.remove('dragging')\n\n    if ('touches' in event) {\n      svg.removeEventListener('touchmove', this.onPanMouseMove)\n      svg.removeEventListener('touchend', this.onPanMouseUp)\n    } else {\n      svg.removeEventListener('mousemove', this.onPanMouseMove)\n      svg.removeEventListener('mouseup', this.onPanMouseUp)\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      default:\n        return nothing\n    }\n  }\n\n  protected getPointFromEvent(event: MouseEvent | TouchEvent) {\n    if ('touches' in event) {\n      return {\n        x: event.touches[0].clientX,\n        y: event.touches[0].clientY\n      }\n    } else {\n      return {\n        x: event.clientX,\n        y: event.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'\nimport { DefaultImageProvider } from './default-image-provider'\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  ]\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\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.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 img = new Image()\n\n    img.onload = () => {\n      const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n\n      if (!this.initialViewBox) {\n        const width = img.naturalWidth\n        const height = img.naturalHeight\n\n        this.initialViewBox = `0 0 ${width} ${height}`\n        this.viewBox = this.initialViewBox\n      } else {\n        this.viewBox = `${vbX} ${vbY} ${vbWidth} ${vbHeight}`\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    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  protected reset() {\n    this.viewBox = this.initialViewBox!\n    this.zoomLevel = 1\n\n    this.debouncedUpdateImage()\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      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/default-image-provider.d.ts

@@ -0,0 +1,4 @@
+import { ImageOptions, ImageProvider } from './types';
+export declare class DefaultImageProvider implements ImageProvider {
+    getImage(options: ImageOptions): Promise<string>;
+}

package/dist/src/default-image-provider.js

@@ -0,0 +1,6 @@
+export class DefaultImageProvider {
+    async getImage(options) {
+        return options.id;
+    }
+}
+//# sourceMappingURL=default-image-provider.js.map

package/dist/src/default-image-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-image-provider.js","sourceRoot":"","sources":["../../src/default-image-provider.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,oBAAoB;IAC/B,KAAK,CAAC,QAAQ,CAAC,OAAqB;QAClC,OAAO,OAAO,CAAC,EAAE,CAAA;IACnB,CAAC;CACF","sourcesContent":["import { ImageOptions, ImageProvider } from './types'\n\nexport class DefaultImageProvider implements ImageProvider {\n  async getImage(options: ImageOptions): Promise<string> {\n    return options.id\n  }\n}\n"]}

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

@@ -8,12 +8,12 @@ let OxImageMarkerView = class OxImageMarkerView extends BaseImageMarker {
       <div class="container">
         <svg
           @wheel=${this.onSvgWheel}
-          @mousedown=${this.onSvgMouseDown}
-          @touchstart=${this.onSvgTouchStart}
-          @dblclick=${this.onSvgDoubleClick}
+          @doubletap=${this.onSvgDoubleTap}
+          @pinch=${this.onSvgPinch}
+          @drag=${this.onSvgDrag}
           viewBox=${this.viewBox}
         >
-          <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
+          <image href=${this.currentImage} @load=${this.onImageLoad}></image>
           ${this.shapes.map(shape => this.renderShape(shape))}
         </svg>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"ox-image-marker-view.js","sourceRoot":"","sources":["../../src/ox-image-marker-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAGjD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IACpD,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,UAAU;uBACX,IAAI,CAAC,cAAc;wBAClB,IAAI,CAAC,eAAe;sBACtB,IAAI,CAAC,gBAAgB;oBACvB,IAAI,CAAC,OAAO;;wBAER,IAAI,CAAC,QAAQ,UAAU,IAAI,CAAC,WAAW;YACnD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;;;KAGxD,CAAA;IACH,CAAC;CACF,CAAA;AAjBY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAiB7B","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { BaseImageMarker } from './base-image-marker.js'\n\n@customElement('ox-image-marker-view')\nexport class OxImageMarkerView extends BaseImageMarker {\n  render() {\n    return html`\n      <div class=\"container\">\n        <svg\n          @wheel=${this.onSvgWheel}\n          @mousedown=${this.onSvgMouseDown}\n          @touchstart=${this.onSvgTouchStart}\n          @dblclick=${this.onSvgDoubleClick}\n          viewBox=${this.viewBox}\n        >\n          <image href=${this.imageUrl} @load=${this.onImageLoad}></image>\n          ${this.shapes.map(shape => this.renderShape(shape))}\n        </svg>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-image-marker-view.js","sourceRoot":"","sources":["../../src/ox-image-marker-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAGjD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IACpD,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,UAAU;uBACX,IAAI,CAAC,cAAc;mBACvB,IAAI,CAAC,UAAU;kBAChB,IAAI,CAAC,SAAS;oBACZ,IAAI,CAAC,OAAO;;wBAER,IAAI,CAAC,YAAY,UAAU,IAAI,CAAC,WAAW;YACvD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;;;KAGxD,CAAA;IACH,CAAC;CACF,CAAA;AAjBY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAiB7B","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { BaseImageMarker } from './base-image-marker.js'\n\n@customElement('ox-image-marker-view')\nexport class OxImageMarkerView extends BaseImageMarker {\n  render() {\n    return html`\n      <div class=\"container\">\n        <svg\n          @wheel=${this.onSvgWheel}\n          @doubletap=${this.onSvgDoubleTap}\n          @pinch=${this.onSvgPinch}\n          @drag=${this.onSvgDrag}\n          viewBox=${this.viewBox}\n        >\n          <image href=${this.currentImage} @load=${this.onImageLoad}></image>\n          ${this.shapes.map(shape => this.renderShape(shape))}\n        </svg>\n      </div>\n    `\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import './ox-image-marker-mode';
 import { nothing } from 'lit';
+import { GestureEventDrag, GestureEventPinch } from '@operato/utils/gesture-helper.js';
 import { Shape } from './types';
 import { BaseImageMarker } from './base-image-marker';
 import { OxImageMarkerMode } from './ox-image-marker-mode';
@@ -19,22 +20,21 @@ export declare class OxImageMarker extends BaseImageMarker {
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    protected onSvgMouseDown(event: MouseEvent): void;
-    protected onSvgTouchStart: (event: TouchEvent) => void;
-    private startDrawing;
     private setMode;
-    private onMouseMoveForDrawing;
-    private onMouseUpForDrawing;
+    protected onSvgPinch(e: GestureEventPinch): void;
+    protected onSvgDrag(e: GestureEventDrag): void;
+    protected onSvgClick(e: MouseEvent): void;
+    private drawShape;
     private setSelectedShape;
     private getSvgPoint;
     protected renderShape(shape: Shape): import("lit-html").TemplateResult<2> | typeof nothing;
-    private onMouseDownOnShape;
-    private onMouseMoveOnShape;
-    private onMouseUpOnShape;
+    private onPointerDownOnShape;
+    private onPointerMoveOnShape;
+    private onPointerUpOnShape;
     private renderResizeHandles;
-    private onResizeHandleMouseDown;
-    private onResizeHandleMouseMove;
-    private onResizeHandleMouseUp;
+    private onResizeHandlePointerDown;
+    private onResizeHandlePointerMove;
+    private onResizeHandlePointerUp;
     private onTextDoubleClick;
     private showTextInput;
     private adjustInputWidth;