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

package/CHANGELOG.md

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

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

@@ -13,12 +13,24 @@ export declare class BaseImageMarker extends LitElement {
         y: number;
     };
     protected initialViewBox: string;
+    private initialPinchDistance;
+    private initialZoomLevel;
     protected svg: SVGSVGElement;
     protected onImageLoad(event: Event): void;
-    protected onWheel(event: WheelEvent): void;
+    protected onSvgWheel(event: WheelEvent): void;
     protected onSvgMouseDown(event: MouseEvent): void;
-    protected onPanMouseMove: (event: MouseEvent) => void;
-    protected onPanMouseUp: () => void;
-    protected onDoubleClick(): void;
+    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 startPanning(event: MouseEvent | TouchEvent): void;
+    protected onPanMouseMove: (event: MouseEvent | TouchEvent) => void;
+    protected onPanMouseUp: (event: MouseEvent | TouchEvent) => void;
     protected renderShape(shape: Shape): import("lit-html").TemplateResult<2> | typeof nothing;
+    protected getPointFromEvent(event: MouseEvent | TouchEvent): {
+        x: number;
+        y: number;
+    };
 }

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

@@ -12,11 +12,42 @@ export class BaseImageMarker extends LitElement {
         this.isPanning = false;
         this.panStart = { x: 0, y: 0 };
         this.initialViewBox = '0 0 800 600';
+        this.initialPinchDistance = null;
+        this.initialZoomLevel = 1;
+        this.onSvgTouchStart = (event) => {
+            if (event.touches.length === 1) {
+                this.startPanning(event);
+            }
+            else if (event.touches.length === 2) {
+                this.startPinchZooming(event);
+            }
+        };
+        this.onZoomTouchMove = (event) => {
+            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;
+                this.zoomLevel = this.initialZoomLevel * scaleFactor;
+                this.applyZoom();
+            }
+        };
+        this.onZoomTouchEnd = (event) => {
+            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)
+            if (!this.isPanning) {
                 return;
-            const dx = event.clientX - this.panStart.x;
-            const dy = event.clientY - this.panStart.y;
+            }
+            const { x, y } = this.getPointFromEvent(event);
+            const dx = x - this.panStart.x;
+            const dy = y - this.panStart.y;
             const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number);
             const scaleX = vbWidth / this.svg.clientWidth;
             const scaleY = vbHeight / this.svg.clientHeight;
@@ -24,14 +55,20 @@ export class BaseImageMarker extends LitElement {
             const newVbX = vbX - dx * scale;
             const newVbY = vbY - dy * scale;
             this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`;
-            this.panStart = { x: event.clientX, y: event.clientY };
+            this.panStart = { x, y };
         };
-        this.onPanMouseUp = () => {
+        this.onPanMouseUp = (event) => {
             const svg = this.svg;
             this.isPanning = false;
             svg.classList.remove('dragging');
-            svg.removeEventListener('mousemove', this.onPanMouseMove);
-            svg.removeEventListener('mouseup', this.onPanMouseUp);
+            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);
+            }
         };
     }
     static { this.styles = [
@@ -65,7 +102,7 @@ export class BaseImageMarker extends LitElement {
         };
         img.src = this.imageUrl;
     }
-    onWheel(event) {
+    onSvgWheel(event) {
         event.preventDefault();
         const { offsetX, offsetY, deltaY } = event;
         const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor;
@@ -80,17 +117,47 @@ export class BaseImageMarker extends LitElement {
         this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`;
     }
     onSvgMouseDown(event) {
-        const svg = this.svg;
-        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);
+        this.startPanning(event);
+        this.svg.addEventListener('mousemove', this.onPanMouseMove);
+        this.svg.addEventListener('mouseup', this.onPanMouseUp);
+    }
+    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}`;
     }
-    onDoubleClick() {
+    onSvgDoubleClick() {
         this.viewBox = this.initialViewBox;
         this.zoomLevel = 1;
     }
+    startPanning(event) {
+        const { x, y } = this.getPointFromEvent(event);
+        this.isPanning = true;
+        this.panStart = { x, y };
+        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);
+        }
+    }
     renderShape(shape) {
         const commonAttrs = {
             stroke: 'red',
@@ -118,6 +185,20 @@ export class BaseImageMarker extends LitElement {
                 return nothing;
         }
     }
+    getPointFromEvent(event) {
+        if ('touches' in event) {
+            return {
+                x: event.touches[0].clientX,
+                y: event.touches[0].clientY
+            };
+        }
+        else {
+            return {
+                x: event.clientX,
+                y: event.clientY
+            };
+        }
+    }
 }
 __decorate([
     property({ type: String })

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 isPanning = false\n  protected panStart = { x: 0, y: 0 }\n  protected initialViewBox = '0 0 800 600'\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 onWheel(event: WheelEvent) {\n    event.preventDefault()\n\n    const { offsetX, offsetY, deltaY } = event\n    const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor\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  protected onSvgMouseDown(event: MouseEvent) {\n    const svg = this.svg\n\n    this.isPanning = true\n    this.panStart = { x: event.clientX, y: event.clientY }\n    svg.classList.add('dragging')\n\n    svg.addEventListener('mousemove', this.onPanMouseMove)\n    svg.addEventListener('mouseup', this.onPanMouseUp)\n  }\n\n  protected onPanMouseMove = (event: MouseEvent) => {\n    if (!this.isPanning) return\n\n    const dx = event.clientX - this.panStart.x\n    const dy = event.clientY - this.panStart.y\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: event.clientX, y: event.clientY }\n  }\n\n  protected onPanMouseUp = () => {\n    const svg = this.svg\n\n    this.isPanning = false\n    svg.classList.remove('dragging')\n    svg.removeEventListener('mousemove', this.onPanMouseMove)\n    svg.removeEventListener('mouseup', this.onPanMouseUp)\n  }\n\n  protected onDoubleClick() {\n    this.viewBox = this.initialViewBox\n    this.zoomLevel = 1\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"]}
+{"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 isPanning = false\n  protected panStart = { x: 0, y: 0 }\n  protected initialViewBox = '0 0 800 600'\n  private initialPinchDistance: number | null = null\n  private initialZoomLevel: number = 1\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    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  protected onSvgMouseDown(event: MouseEvent) {\n    this.startPanning(event)\n\n    this.svg.addEventListener('mousemove', this.onPanMouseMove)\n    this.svg.addEventListener('mouseup', this.onPanMouseUp)\n  }\n\n  protected onSvgTouchStart = (event: TouchEvent) => {\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    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      this.zoomLevel = this.initialZoomLevel * scaleFactor\n\n      this.applyZoom()\n    }\n  }\n\n  protected onZoomTouchEnd = (event: TouchEvent) => {\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.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.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\n    const { x, y } = this.getPointFromEvent(event)\n\n    const dx = x - this.panStart.x\n    const dy = y - this.panStart.y\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    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"]}

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

@@ -115,13 +115,13 @@ let OxImageMarkerMode = class OxImageMarkerMode extends LitElement {
         }));
     }
     onClickDelete() {
-        this.dispatchEvent(new CustomEvent('clicked-delete', {
+        this.dispatchEvent(new CustomEvent('tap-delete', {
             bubbles: true,
             composed: true
         }));
     }
     onClickSave() {
-        this.dispatchEvent(new CustomEvent('clicked-save', {
+        this.dispatchEvent(new CustomEvent('tap-save', {
             bubbles: true,
             composed: true
         }));

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'\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 = 'select'\n  @property({ type: String }) currentShapeType?: ShapeType\n\n  render() {\n    return html`\n      <div class=\"palette\">\n        <md-icon\n          title=\"Move or Select\"\n          ?selected=${this.currentMode !== 'draw'}\n          @click=${() => this.setMode(this.currentMode !== 'select' ? 'select' : 'move')}\n          >${this.currentMode !== 'move' ? 'select' : 'drag_pan'}</md-icon\n        >\n\n        <md-icon\n          title=\"Text\"\n          ?selected=${this.currentMode === 'draw' && 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 === 'draw' && this.currentShapeType === 'rectangle'}\n          @click=${() => this.setShape('rectangle')}\n          >rectangle</md-icon\n        >\n\n        <md-icon\n          title=\"Circle\"\n          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'circle'}\n          @click=${() => this.setShape('circle')}\n          >circle</md-icon\n        >\n\n        <md-icon\n          title=\"Triangle\"\n          ?selected=${this.currentMode === 'draw' && 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 === 'draw' && 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 === 'draw' && 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=\"Delete\" @click=${() => this.onClickDelete()}>delete</md-icon>\n        <md-icon title=\"Save\" @click=${() => this.onClickSave()}>save</md-icon>\n      </div>\n    `\n  }\n\n  private 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  private setShape(shapeType: ShapeType) {\n    this.currentMode = 'draw'\n    this.currentShapeType = shapeType\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        detail: { mode: 'draw', shapeType: this.currentShapeType },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onClickDelete() {\n    this.dispatchEvent(\n      new CustomEvent('clicked-delete', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onClickSave() {\n    this.dispatchEvent(\n      new CustomEvent('clicked-save', {\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":"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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'\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 = 'select'\n  @property({ type: String }) currentShapeType?: ShapeType\n\n  render() {\n    return html`\n      <div class=\"palette\">\n        <md-icon\n          title=\"Move or Select\"\n          ?selected=${this.currentMode !== 'draw'}\n          @click=${() => this.setMode(this.currentMode !== 'select' ? 'select' : 'move')}\n          >${this.currentMode !== 'move' ? 'select' : 'drag_pan'}</md-icon\n        >\n\n        <md-icon\n          title=\"Text\"\n          ?selected=${this.currentMode === 'draw' && 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 === 'draw' && this.currentShapeType === 'rectangle'}\n          @click=${() => this.setShape('rectangle')}\n          >rectangle</md-icon\n        >\n\n        <md-icon\n          title=\"Circle\"\n          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'circle'}\n          @click=${() => this.setShape('circle')}\n          >circle</md-icon\n        >\n\n        <md-icon\n          title=\"Triangle\"\n          ?selected=${this.currentMode === 'draw' && 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 === 'draw' && 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 === 'draw' && 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=\"Delete\" @click=${() => this.onClickDelete()}>delete</md-icon>\n        <md-icon title=\"Save\" @click=${() => this.onClickSave()}>save</md-icon>\n      </div>\n    `\n  }\n\n  private 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  private setShape(shapeType: ShapeType) {\n    this.currentMode = 'draw'\n    this.currentShapeType = shapeType\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        detail: { mode: 'draw', 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"]}

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

@@ -7,9 +7,9 @@ let OxImageMarkerView = class OxImageMarkerView extends BaseImageMarker {
         return html `
       <div class="container">
         <svg
-          @wheel=${this.onWheel}
+          @wheel=${this.onSvgWheel}
           @mousedown=${this.onSvgMouseDown}
-          @dblclick=${this.onDoubleClick}
+          @dblclick=${this.onSvgDoubleClick}
           viewBox=${this.viewBox}
         >
           <image href=${this.imageUrl} @load=${this.onImageLoad}></image>

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,OAAO;uBACR,IAAI,CAAC,cAAc;sBACpB,IAAI,CAAC,aAAa;oBACpB,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;AAhBY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAgB7B","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.onWheel}\n          @mousedown=${this.onSvgMouseDown}\n          @dblclick=${this.onDoubleClick}\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;sBACpB,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;AAhBY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAgB7B","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          @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"]}

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

@@ -12,19 +12,20 @@ export declare class OxImageMarker extends BaseImageMarker {
     private startY;
     private offsetX;
     private offsetY;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     protected onSvgMouseDown(event: MouseEvent): void;
-    private startShapeDragging;
+    protected onSvgTouchStart: (event: TouchEvent) => void;
     private startDrawing;
     private setMode;
-    private onMouseMove;
-    private onMouseUp;
+    private onDrawingMouseMove;
+    private onDrawingMouseUp;
     private getSvgPoint;
     protected renderShape(shape: Shape): import("lit-html").TemplateResult<2> | typeof nothing;
     private onShapeMouseDown;
     private onShapeMouseMove;
     private onShapeMouseUp;
-    private getScale;
     private renderResizeHandles;
     private onHandleMouseDown;
     private onHandleMouseMove;
@@ -33,4 +34,8 @@ export declare class OxImageMarker extends BaseImageMarker {
     private showTextInput;
     private adjustInputWidth;
     private measureTextWidth;
+    private onFocus;
+    private onBlur;
+    private handleKeyDown;
+    private deleteSelectedShape;
 }