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

package/src/base-image-marker.ts

@@ -36,6 +36,8 @@ export class BaseImageMarker extends LitElement {
   protected isPanning = false
   protected panStart = { x: 0, y: 0 }
   protected initialViewBox = '0 0 800 600'
+  private initialPinchDistance: number | null = null
+  private initialZoomLevel: number = 1
 
   @query('svg') protected svg!: SVGSVGElement
 
@@ -50,7 +52,7 @@ export class BaseImageMarker extends LitElement {
     img.src = this.imageUrl
   }
 
-  protected onWheel(event: WheelEvent) {
+  protected onSvgWheel(event: WheelEvent) {
     event.preventDefault()
 
     const { offsetX, offsetY, deltaY } = event
@@ -71,21 +73,99 @@ export class BaseImageMarker extends LitElement {
   }
 
   protected onSvgMouseDown(event: MouseEvent) {
-    const svg = this.svg
+    this.startPanning(event)
 
-    this.isPanning = true
-    this.panStart = { x: event.clientX, y: event.clientY }
-    svg.classList.add('dragging')
+    this.svg.addEventListener('mousemove', this.onPanMouseMove)
+    this.svg.addEventListener('mouseup', this.onPanMouseUp)
+  }
+
+  protected onSvgTouchStart = (event: TouchEvent) => {
+    if (event.touches.length === 1) {
+      this.startPanning(event)
+    } else if (event.touches.length === 2) {
+      this.startPinchZooming(event)
+    }
+  }
+
+  protected startPinchZooming(event: TouchEvent) {
+    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)
+  }
 
-    svg.addEventListener('mousemove', this.onPanMouseMove)
-    svg.addEventListener('mouseup', this.onPanMouseUp)
+  protected onZoomTouchMove = (event: TouchEvent) => {
+    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()
+    }
   }
 
-  protected onPanMouseMove = (event: MouseEvent) => {
-    if (!this.isPanning) return
+  protected onZoomTouchEnd = (event: TouchEvent) => {
+    if (event.touches.length < 2) {
+      this.initialPinchDistance = null
+    }
 
-    const dx = event.clientX - this.panStart.x
-    const dy = event.clientY - this.panStart.y
+    this.svg.removeEventListener('touchmove', this.onZoomTouchMove)
+    this.svg.removeEventListener('touchend', this.onZoomTouchEnd)
+  }
+
+  protected 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}`
+  }
+
+  protected onSvgDoubleClick() {
+    this.viewBox = this.initialViewBox
+    this.zoomLevel = 1
+  }
+
+  protected startPanning(event: MouseEvent | TouchEvent) {
+    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)
+    }
+  }
+
+  protected onPanMouseMove = (event: MouseEvent | TouchEvent) => {
+    if (!this.isPanning) {
+      return
+    }
+
+    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
@@ -96,21 +176,22 @@ export class BaseImageMarker extends LitElement {
     const newVbY = vbY - dy * scale
 
     this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`
-    this.panStart = { x: event.clientX, y: event.clientY }
+    this.panStart = { x, y }
   }
 
-  protected onPanMouseUp = () => {
+  protected onPanMouseUp = (event: MouseEvent | TouchEvent) => {
     const svg = this.svg
 
     this.isPanning = false
     svg.classList.remove('dragging')
-    svg.removeEventListener('mousemove', this.onPanMouseMove)
-    svg.removeEventListener('mouseup', this.onPanMouseUp)
-  }
 
-  protected onDoubleClick() {
-    this.viewBox = this.initialViewBox
-    this.zoomLevel = 1
+    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)
+    }
   }
 
   protected renderShape(shape: Shape) {
@@ -141,4 +222,18 @@ export class BaseImageMarker extends LitElement {
         return nothing
     }
   }
+
+  protected getPointFromEvent(event: MouseEvent | TouchEvent) {
+    if ('touches' in event) {
+      return {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY
+      }
+    } else {
+      return {
+        x: event.clientX,
+        y: event.clientY
+      }
+    }
+  }
 }

package/src/ox-image-marker-mode.ts

@@ -127,7 +127,7 @@ export class OxImageMarkerMode extends LitElement {
 
   private onClickDelete() {
     this.dispatchEvent(
-      new CustomEvent('clicked-delete', {
+      new CustomEvent('tap-delete', {
         bubbles: true,
         composed: true
       })
@@ -136,7 +136,7 @@ export class OxImageMarkerMode extends LitElement {
 
   private onClickSave() {
     this.dispatchEvent(
-      new CustomEvent('clicked-save', {
+      new CustomEvent('tap-save', {
         bubbles: true,
         composed: true
       })

package/src/ox-image-marker-view.ts

@@ -9,9 +9,9 @@ export 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>