@operato/image-marker 8.0.0-alpha.18 → 8.0.0-alpha.23

package/src/base-image-marker.ts

@@ -36,6 +36,9 @@ 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
+  private lastTouchEnd: number = 0
 
   @query('svg') protected svg!: SVGSVGElement
 
@@ -50,7 +53,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 +74,126 @@ export class BaseImageMarker extends LitElement {
   }
 
   protected onSvgMouseDown(event: MouseEvent) {
-    const svg = this.svg
+    event.preventDefault()
+
+    this.startPanning(event)
+
+    this.svg.addEventListener('mousemove', this.onPanMouseMove)
+    this.svg.addEventListener('mouseup', this.onPanMouseUp)
+  }
+
+  protected isDoubleTouch(event: TouchEvent) {
+    const currentTime = new Date().getTime()
+    const tapLength = currentTime - this.lastTouchEnd
+
+    const result = tapLength < 300 && event.touches.length == 1
+    this.lastTouchEnd = currentTime
+
+    return result
+  }
+
+  protected onSvgTouchStart = (event: TouchEvent) => {
+    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)
+    }
+  }
+
+  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)
+  }
+
+  protected onZoomTouchMove = (event: TouchEvent) => {
+    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
+      this.zoomLevel = this.initialZoomLevel * scaleFactor
+
+      this.applyZoom()
+    }
+  }
+
+  protected onZoomTouchEnd = (event: TouchEvent) => {
+    event.preventDefault()
+
+    if (event.touches.length < 2) {
+      this.initialPinchDistance = null
+    }
+
+    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.resetZoom()
+  }
+
+  protected resetZoom() {
+    this.viewBox = this.initialViewBox
+    this.zoomLevel = 1
+  }
+
+  protected startPanning(event: MouseEvent | TouchEvent) {
+    const { x, y } = this.getPointFromEvent(event)
 
     this.isPanning = true
-    this.panStart = { x: event.clientX, y: event.clientY }
-    svg.classList.add('dragging')
+    this.panStart = { x, y }
+    this.svg.classList.add('dragging')
 
-    svg.addEventListener('mousemove', this.onPanMouseMove)
-    svg.addEventListener('mouseup', this.onPanMouseUp)
+    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) => {
-    if (!this.isPanning) return
+  protected onPanMouseMove = (event: MouseEvent | TouchEvent) => {
+    if (!this.isPanning) {
+      return
+    }
+    event.preventDefault()
+
+    const { x, y } = this.getPointFromEvent(event)
 
-    const dx = event.clientX - this.panStart.x
-    const dy = event.clientY - this.panStart.y
+    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 +204,24 @@ 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) => {
+    event.preventDefault()
+
     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 +252,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

@@ -94,6 +94,10 @@ export class OxImageMarkerMode extends LitElement {
         >
       </div>
 
+      <div class="palette">
+        <md-icon title="Fit size" @click=${() => this.onClickFitSize()}>recenter</md-icon>
+      </div>
+
       <div class="palette">
         <md-icon title="Delete" @click=${() => this.onClickDelete()}>delete</md-icon>
         <md-icon title="Save" @click=${() => this.onClickSave()}>save</md-icon>
@@ -127,7 +131,7 @@ export class OxImageMarkerMode extends LitElement {
 
   private onClickDelete() {
     this.dispatchEvent(
-      new CustomEvent('clicked-delete', {
+      new CustomEvent('tap-delete', {
         bubbles: true,
         composed: true
       })
@@ -136,7 +140,16 @@ export class OxImageMarkerMode extends LitElement {
 
   private onClickSave() {
     this.dispatchEvent(
-      new CustomEvent('clicked-save', {
+      new CustomEvent('tap-save', {
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  private onClickFitSize() {
+    this.dispatchEvent(
+      new CustomEvent('tap-fit-size', {
         bubbles: true,
         composed: true
       })

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

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