@operato/mini-map 7.1.1 → 8.0.0-alpha.29

package/src/ox-mini-map.ts

@@ -44,8 +44,8 @@ class OxMiniMapComponent extends LitElement {
   connectedCallback() {
     super.connectedCallback()
     window.addEventListener('resize', this.handleResize.bind(this))
-    this.addEventListener('mousemove', this.handleMouseMove.bind(this))
-    this.addEventListener('mouseup', this.handleMouseUp.bind(this))
+    this.addEventListener('pointermove', this.handlePointerMove.bind(this))
+    this.addEventListener('pointerup', this.handlePointerUp.bind(this))
     if (this.target) {
       this.observeTarget(this.target)
     }
@@ -54,8 +54,8 @@ class OxMiniMapComponent extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback()
     window.removeEventListener('resize', this.handleResize.bind(this))
-    window.removeEventListener('mousemove', this.handleMouseMove.bind(this))
-    window.removeEventListener('mouseup', this.handleMouseUp.bind(this))
+    window.removeEventListener('pointermove', this.handlePointerMove.bind(this))
+    window.removeEventListener('pointerup', this.handlePointerUp.bind(this))
     if (this.observer) {
       this.observer.disconnect()
       this.observer = null
@@ -154,7 +154,7 @@ class OxMiniMapComponent extends LitElement {
     viewport.style.transform = `scale(${scale}) translate(${left * scaleMinimap}px, ${top * scaleMinimap}px)`
   }
 
-  handleMouseDown(event: MouseEvent) {
+  handlePointerDown(event: MouseEvent) {
     this.isDragging = true
     this.startX = event.clientX
     this.startY = event.clientY
@@ -165,13 +165,13 @@ class OxMiniMapComponent extends LitElement {
       this.initialScrollTop = target.scrollTop
     }
 
-    window.addEventListener('mousemove', this.handleMouseMove.bind(this))
-    window.addEventListener('mouseup', this.handleMouseUp.bind(this))
+    window.addEventListener('pointermove', this.handlePointerMove.bind(this))
+    window.addEventListener('pointerup', this.handlePointerUp.bind(this))
 
     event.preventDefault()
   }
 
-  handleMouseMove(event: MouseEvent) {
+  handlePointerMove(event: MouseEvent) {
     if (!this.isDragging) return
 
     const deltaX = event.clientX - this.startX
@@ -197,17 +197,17 @@ class OxMiniMapComponent extends LitElement {
     event.preventDefault()
   }
 
-  handleMouseUp(event: MouseEvent) {
+  handlePointerUp(event: MouseEvent) {
     this.isDragging = false
-    window.removeEventListener('mousemove', this.handleMouseMove.bind(this))
-    window.removeEventListener('mouseup', this.handleMouseUp.bind(this))
+    window.removeEventListener('pointermove', this.handlePointerMove.bind(this))
+    window.removeEventListener('pointerup', this.handlePointerUp.bind(this))
     event.preventDefault()
   }
 
   render() {
     return html`
       <div id="minimap">
-        <div id="viewport" @mousedown=${this.handleMouseDown}></div>
+        <div id="viewport" @pointerdown=${this.handlePointerDown}></div>
       </div>
     `
   }

package/src/ox-zoomable-image.ts

@@ -1,16 +1,7 @@
 import { css, LitElement, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
-// Utility function to get the point from MouseEvent or TouchEvent
-function getPoint(e: MouseEvent | TouchEvent): { x: number; y: number } | undefined {
-  if (e instanceof MouseEvent && e.button === 0) {
-    return { x: e.clientX, y: e.clientY }
-  } else if (e instanceof TouchEvent && e.touches.length === 1) {
-    const touch = e.touches[0]
-    return { x: touch.clientX, y: touch.clientY }
-  }
-  return undefined
-}
+import { gesture, GestureEventDoubleTap, GestureEventDrag, GestureEventPinch } from '@operato/utils/gesture-mixin.js'
 
 /**
  * Example usage:
@@ -34,13 +25,13 @@ function getPoint(e: MouseEvent | TouchEvent): { x: number; y: number } | undefi
  *   </style>
  * </head>
  * <body>
- *   <ox-zoomable-image src="path/to/your/image.jpg"></ox-zoomable-image>
+ *   <ox-zoomable-image src="path/to/your/image.jpg" restrict-boundary></ox-zoomable-image>
  * </body>
  * </html>
  */
 
 @customElement('ox-zoomable-image')
-export class OxZoomableImage extends LitElement {
+export class OxZoomableImage extends gesture(LitElement) {
   // Define CSS styles for the component
   static styles = css`
     :host {
@@ -49,16 +40,20 @@ export class OxZoomableImage extends LitElement {
       width: 100%;
       height: 100%;
       overflow: hidden;
+
+      touch-action: none;
     }
 
     :host::before {
       content: '';
       display: block;
+
       position: absolute;
       top: 0;
       right: 0;
       width: 100%;
       height: 100%;
+
       background-image: var(
         --background-image,
         linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))
@@ -67,56 +62,38 @@ export class OxZoomableImage extends LitElement {
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
+
+      touch-action: none;
     }
   `
 
   @property({ type: String }) src?: string // Source URL for the image
+  @property({ type: Boolean, attribute: 'restrict-boundary' }) restrictBoundary: boolean = false // Ensure the image stays within bounds
+
   @state() private zoom = 1 // Current zoom level
   @state() private left = 0 // Horizontal position
   @state() private top = 0 // Vertical position
-  @state() private minZoom = 1 // Minimum zoom level
   @state() private imageWidth = 0
   @state() private imageHeight = 0
 
-  private dragStart?: { x: number; y: number } // Starting point of drag
-
-  // Event listeners bound to the component
-  private readonly dragEndHandler = this.onDragEnd.bind(this) as EventListener
-  private readonly dragMoveHandler = this.onDragMove.bind(this) as EventListener
-  private readonly dragStartHandler = this.onDragStart.bind(this) as EventListener
-  private readonly wheelEventHandler = this.onWheelEvent.bind(this) as EventListener
-  private readonly resetHandler = this.onReset.bind(this) as EventListener
-
   connectedCallback(): void {
     super.connectedCallback()
 
     // Register event listeners for zooming and dragging
-    this.addEventListener('wheel', this.wheelEventHandler)
-    this.addEventListener('mousedown', this.dragStartHandler)
-    this.addEventListener('touchstart', this.dragStartHandler)
-    this.addEventListener('dblclick', this.resetHandler)
-
-    document.addEventListener('mouseup', this.dragEndHandler)
-    document.addEventListener('touchend', this.dragEndHandler)
-    document.addEventListener('touchcancel', this.dragEndHandler)
-    document.addEventListener('mousemove', this.dragMoveHandler)
-    document.addEventListener('touchmove', this.dragMoveHandler)
+    this.addEventListener('pinch', this.pinchHandler as EventListener)
+    this.addEventListener('drag', this.dragHandler as EventListener)
+    this.addEventListener('doubletap', this.doubleTapHandler as EventListener)
+    this.addEventListener('wheel', this.wheelHandler as EventListener)
 
     this.calculateMinZoom() // Calculate the minimum zoom level based on the image and container size
   }
 
   disconnectedCallback(): void {
     // Remove event listeners when the component is disconnected
-    this.removeEventListener('wheel', this.wheelEventHandler)
-    this.removeEventListener('mousedown', this.dragStartHandler)
-    this.removeEventListener('touchstart', this.dragStartHandler)
-    this.removeEventListener('dblclick', this.resetHandler)
-
-    document.removeEventListener('mouseup', this.dragEndHandler)
-    document.removeEventListener('touchend', this.dragEndHandler)
-    document.removeEventListener('touchcancel', this.dragEndHandler)
-    document.removeEventListener('mousemove', this.dragMoveHandler)
-    document.removeEventListener('touchmove', this.dragMoveHandler)
+    this.removeEventListener('pinch', this.pinchHandler as EventListener)
+    this.removeEventListener('drag', this.dragHandler as EventListener)
+    this.removeEventListener('doubletap', this.doubleTapHandler as EventListener)
+    this.removeEventListener('wheel', this.wheelHandler as EventListener)
 
     super.disconnectedCallback()
   }
@@ -127,6 +104,7 @@ export class OxZoomableImage extends LitElement {
       this.style.setProperty('--background-image', `url('${this.src}')`)
       this.calculateMinZoom() // Recalculate the minimum zoom level when the source changes
     }
+
     this.updateTransform() // Apply the current zoom and position
   }
 
@@ -138,88 +116,69 @@ export class OxZoomableImage extends LitElement {
       this.imageWidth = img.width
       this.imageHeight = img.height
 
-      const aspectRatio = img.width / img.height
-      const hostAspectRatio = this.offsetWidth / this.offsetHeight
-      if (aspectRatio < hostAspectRatio) {
-        this.minZoom = this.offsetHeight / img.height
-      } else {
-        this.minZoom = this.offsetWidth / img.width
-      }
+      console.log(this.imageWidth, this.imageHeight)
+
       this.zoom = 1 // this.minZoom
       this.left = 0 // Center the image
       this.top = 0 // Center the image
+
       this.updateTransform()
     }
   }
 
-  private onWheelEvent(e: WheelEvent): void {
-    // Handle zoom in and out based on mouse wheel events
-    e.preventDefault()
-    const delta = Math.sign(e.deltaY)
-    const newZoom = Math.max(1, this.zoom * (1 - delta / 20))
-    const zoomFactor = newZoom / this.zoom
-
-    const rect = this.getBoundingClientRect()
-    const offsetX = e.clientX - rect.left - rect.width / 2
-    const offsetY = e.clientY - rect.top - rect.height / 2
+  private pinchHandler = (e: GestureEventPinch) => {
+    const { scale, centerX, centerY } = e.detail
+    this.zoomAt(centerX, centerY, scale)
+  }
 
-    // Adjust the position to zoom in/out relative to the center of the client rect
-    this.left -= offsetX * (zoomFactor - 1)
-    this.top -= offsetY * (zoomFactor - 1)
+  private zoomAt(clientX: number, clientY: number, scale: number) {
+    const { offsetLeft: left, offsetTop: top, offsetWidth: width, offsetHeight: height } = this
 
-    this.zoom = newZoom
-    this.applyBounds() // Ensure the image stays within bounds
-    this.updateTransform() // Apply the new zoom and position
-  }
+    const centerX = left + width / 2
+    const centerY = top + height / 2
 
-  private onDragStart(e: MouseEvent | TouchEvent): void {
-    // Start dragging the image
-    const point = getPoint(e)
-    if (point) {
-      this.dragStart = point
-      e.stopPropagation()
-    }
-  }
+    // this.imageWidth
+    // this.imageHeight
+    const dx = ((centerX - clientX) / width) * 100 * (1 - scale)
+    const dy = ((centerY - clientY) / height) * 100 * (1 - scale)
 
-  private onDragMove(e: MouseEvent | TouchEvent): void {
-    // Move the image based on drag events
-    if (!this.dragStart) return
+    this.left += dx
+    this.top += dy
 
-    const point = getPoint(e)
-    if (!point) return
+    this.zoom *= scale
+  }
 
-    e.stopPropagation()
+  private wheelHandler = (e: WheelEvent): void => {
+    // Handle zoom in and out based on mouse wheel events
     e.preventDefault()
 
-    const { x, y } = point
-    this.left += x - this.dragStart.x
-    this.top += y - this.dragStart.y
-
-    this.dragStart = point
-    this.applyBounds() // Ensure the image stays within bounds
-    this.updateTransform() // Apply the new position
+    const delta = Math.sign(e.deltaY)
+    this.zoomAt(e.clientX, e.clientY, 1 - delta / 20)
   }
 
-  private onDragEnd(e: Event): void {
-    // End the drag operation
-    if (this.dragStart) {
-      e.stopPropagation()
-      e.preventDefault()
-      this.dragStart = undefined
-    }
+  private dragHandler = (e: GestureEventDrag): void => {
+    const { deltaX, deltaY } = e.detail
+
+    this.top += deltaY
+    this.left += deltaX
+
+    this.updateTransform()
   }
 
-  private onReset(e: Event): void {
+  private doubleTapHandler = (e: GestureEventDoubleTap): void => {
     // Reset zoom and position to initial state
     this.zoom = 1
     this.left = 0
     this.top = 0
-    this.updateTransform()
   }
 
   private updateTransform() {
+    if (this.restrictBoundary) {
+      this.applyBounds() // Ensure the image stays within bounds
+    }
+
     // Apply the current zoom and position to the image
-    this.style.setProperty('--image-transform', `scale(${this.zoom}) translate(${this.left}px, ${this.top}px)`)
+    this.style.setProperty('--image-transform', `translate(${this.left}px, ${this.top}px) scale(${this.zoom})`)
   }
 
   private applyBounds() {
@@ -232,21 +191,21 @@ export class OxZoomableImage extends LitElement {
 
     if (aspectRatio < hostAspectRatio) {
       /* image ratio is wider than host */
-      var minX = Math.min(0, (-hostWidth * (this.zoom - 1)) / 2 / this.zoom)
+      var minX = Math.min(0, (-hostWidth * (1 - this.zoom)) / 2)
       var maxX = -minX
 
-      var minY = (hostHeight - hostWidth * aspectRatio * this.zoom) / 2 / this.zoom
+      var minY = (hostHeight - hostWidth * aspectRatio * this.zoom) / 2
       minY = Math.min(minY, -minY)
       var maxY = -minY
 
       this.left = Math.max(minX, Math.min(this.left, maxX))
       this.top = Math.max(minY, Math.min(this.top, maxY))
     } else {
-      var minX = (hostWidth - (hostHeight / aspectRatio) * this.zoom) / 2 / this.zoom
+      var minX = (hostWidth - (hostHeight / aspectRatio) * this.zoom) / 2
       minX = Math.min(minX, -minX)
       var maxX = -minX
 
-      var minY = Math.min(0, (-hostHeight * (this.zoom - 1)) / 2 / this.zoom)
+      var minY = Math.min(0, (-hostHeight * (1 - this.zoom)) / 2)
       var maxY = -minY
 
       this.left = Math.max(minX, Math.min(this.left, maxX))

package/stories/ox-zoomable-image.stories.ts

@@ -7,7 +7,8 @@ export default {
   argTypes: {
     src: { control: 'text' },
     width: { control: 'number' },
-    height: { control: 'number' }
+    height: { control: 'number' },
+    restrictBoundary: { control: 'boolean' }
   }
 }
 
@@ -21,9 +22,10 @@ interface OxZoomableImageProps {
   src: string
   width: number
   height: number
+  restrictBoundary: boolean
 }
 
-const Template: Story<OxZoomableImageProps> = ({ src, width, height }: OxZoomableImageProps) => html`
+const Template: Story<OxZoomableImageProps> = ({ src, width, height, restrictBoundary }: OxZoomableImageProps) => html`
   <style>
     ox-zoomable-image {
       width: ${width}px;
@@ -33,26 +35,29 @@ const Template: Story<OxZoomableImageProps> = ({ src, width, height }: OxZoomabl
       margin: 100px;
     }
   </style>
-  <ox-zoomable-image src=${src}></ox-zoomable-image>
+  <ox-zoomable-image src=${src} ?restrict-boundary=${restrictBoundary}></ox-zoomable-image>
 `
 
 export const Default = Template.bind({})
 Default.args = {
   src: 'https://via.placeholder.com/800x600.png', // 기본 이미지 URL을 실제 경로로 변경하세요.
   width: 400,
-  height: 600
+  height: 600,
+  restrictBoundary: true
 }
 
 export const Wide = Template.bind({})
 Wide.args = {
   src: 'https://via.placeholder.com/800x600.png', // 기본 이미지 URL을 실제 경로로 변경하세요.
   width: 600,
-  height: 300
+  height: 300,
+  restrictBoundary: true
 }
 
 export const CustomImage = Template.bind({})
 CustomImage.args = {
   src: 'https://via.placeholder.com/1200x800.png', // 다른 테스트 이미지 URL을 실제 경로로 변경하세요.
   width: 400,
-  height: 600
+  height: 600,
+  restrictBoundary: true
 }