@operato/mini-map 2.0.0-alpha.57 → 2.0.0-beta.10

package/src/ox-zoomable-image.ts

@@ -0,0 +1,256 @@
+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
+}
+
+/**
+ * Example usage:
+ *
+ * <html>
+ * <head>
+ *   <script type="module" src="path/to/ox-zoomable-image.js"></script>
+ *   <style>
+ *     body {
+ *       margin: 0;
+ *       overflow: hidden;
+ *       display: flex;
+ *       justify-content: center;
+ *       align-items: center;
+ *       height: 100vh;
+ *     }
+ *     ox-zoomable-image {
+ *       width: 80%;
+ *       height: 80%;
+ *     }
+ *   </style>
+ * </head>
+ * <body>
+ *   <ox-zoomable-image src="path/to/your/image.jpg"></ox-zoomable-image>
+ * </body>
+ * </html>
+ */
+
+@customElement('ox-zoomable-image')
+export class OxZoomableImage extends LitElement {
+  // Define CSS styles for the component
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    :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))
+      );
+      transform: var(--image-transform, '');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+  `
+
+  @property({ type: String }) src?: string // Source URL for the image
+  @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.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)
+
+    super.disconnectedCallback()
+  }
+
+  updated(changes: PropertyValues<this>): void {
+    // Update the background image and transform style when properties change
+    if (changes.has('src') && this.src) {
+      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
+  }
+
+  private calculateMinZoom() {
+    // Calculate the minimum zoom level to ensure the image always fills the container
+    const img = new Image()
+    img.src = this.src || ''
+    img.onload = () => {
+      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
+      }
+      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
+
+    // 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)
+
+    this.zoom = newZoom
+    this.applyBounds() // Ensure the image stays within bounds
+    this.updateTransform() // Apply the new zoom and position
+  }
+
+  private onDragStart(e: MouseEvent | TouchEvent): void {
+    // Start dragging the image
+    const point = getPoint(e)
+    if (point) {
+      this.dragStart = point
+      e.stopPropagation()
+    }
+  }
+
+  private onDragMove(e: MouseEvent | TouchEvent): void {
+    // Move the image based on drag events
+    if (!this.dragStart) return
+
+    const point = getPoint(e)
+    if (!point) return
+
+    e.stopPropagation()
+    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
+  }
+
+  private onDragEnd(e: Event): void {
+    // End the drag operation
+    if (this.dragStart) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.dragStart = undefined
+    }
+  }
+
+  private onReset(e: Event): void {
+    // Reset zoom and position to initial state
+    this.zoom = 1
+    this.left = 0
+    this.top = 0
+    this.updateTransform()
+  }
+
+  private updateTransform() {
+    // Apply the current zoom and position to the image
+    this.style.setProperty('--image-transform', `scale(${this.zoom}) translate(${this.left}px, ${this.top}px)`)
+  }
+
+  private applyBounds() {
+    // Ensure the image stays within the bounds of the container
+    const hostWidth = this.offsetWidth
+    const hostHeight = this.offsetHeight
+
+    const aspectRatio = this.imageHeight / this.imageWidth
+    const hostAspectRatio = hostHeight / hostWidth
+
+    if (aspectRatio < hostAspectRatio) {
+      /* image ratio is wider than host */
+      var minX = Math.min(0, (-hostWidth * (this.zoom - 1)) / 2 / this.zoom)
+      var maxX = -minX
+
+      var minY = (hostHeight - hostWidth * aspectRatio * this.zoom) / 2 / this.zoom
+      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
+      minX = Math.min(minX, -minX)
+      var maxX = -minX
+
+      var minY = Math.min(0, (-hostHeight * (this.zoom - 1)) / 2 / this.zoom)
+      var maxY = -minY
+
+      this.left = Math.max(minX, Math.min(this.left, maxX))
+      this.top = Math.max(minY, Math.min(this.top, maxY))
+    }
+  }
+}

package/stories/ox-mini-map.stories.ts

@@ -0,0 +1,54 @@
+import { html, TemplateResult } from 'lit'
+import '../src/ox-mini-map.js'
+
+export default {
+  title: 'MiniMap',
+  component: 'ox-mini-map',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <style>
+    #parent {
+      padding: 0;
+      margin: 0;
+      width: 600px;
+      height: 400px;
+      background-color: red;
+      position: relative; /* Make the parent element the reference for the mini map */
+      overflow: auto;
+    }
+
+    #content {
+      flex: 1;
+      width: 1200px;
+      height: 1000px;
+      background-image: url('https://via.placeholder.com/800x600.png'); /* Fix the background image URL */
+      background-size: cover;
+    }
+
+    ox-mini-map {
+      position: fixed; /* Fix to the bottom right of the parent element */
+      width: 160px;
+      height: 120px;
+      bottom: 10px;
+      right: 10px;
+    }
+  </style>
+
+  <div id="parent">
+    <div id="content"></div>
+    <ox-mini-map .target=${document.getElementById('parent')}></ox-mini-map>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}

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

@@ -0,0 +1,58 @@
+import { html, TemplateResult } from 'lit-html'
+import '../src/ox-zoomable-image' // 경로를 실제 경로로 변경하세요.
+
+export default {
+  title: 'OxZoomableImage',
+  component: 'ox-zoomable-image',
+  argTypes: {
+    src: { control: 'text' },
+    width: { control: 'number' },
+    height: { control: 'number' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface OxZoomableImageProps {
+  src: string
+  width: number
+  height: number
+}
+
+const Template: Story<OxZoomableImageProps> = ({ src, width, height }: OxZoomableImageProps) => html`
+  <style>
+    ox-zoomable-image {
+      width: ${width}px;
+      height: ${height}px;
+      background-color: red;
+      padding: 0;
+      margin: 100px;
+    }
+  </style>
+  <ox-zoomable-image src=${src}></ox-zoomable-image>
+`
+
+export const Default = Template.bind({})
+Default.args = {
+  src: 'https://via.placeholder.com/800x600.png', // 기본 이미지 URL을 실제 경로로 변경하세요.
+  width: 400,
+  height: 600
+}
+
+export const Wide = Template.bind({})
+Wide.args = {
+  src: 'https://via.placeholder.com/800x600.png', // 기본 이미지 URL을 실제 경로로 변경하세요.
+  width: 600,
+  height: 300
+}
+
+export const CustomImage = Template.bind({})
+CustomImage.args = {
+  src: 'https://via.placeholder.com/1200x800.png', // 다른 테스트 이미지 URL을 실제 경로로 변경하세요.
+  width: 400,
+  height: 600
+}

package/dist/stories/index.stories.js

@@ -1,16 +0,0 @@
-import { html } from 'lit';
-import '../src/ox-mini-map.js';
-export default {
-    title: 'MiniMap',
-    component: 'mini-map',
-    argTypes: {}
-};
-const Template = ({}) => html `
-  <div id="parent" style="overflow: auto; width: 100%; height: 500px;">
-    <div id="content" style="width: 1200px; height: 1000px"></div>
-    <ox-mini-map style="width: 100px; height: 100px; position: absolute; bottom: 10px; right: 10px;"> </ox-mini-map>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {};
-//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,uBAAuB,CAAA;AAE9B,eAAe;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;CAKvD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport '../src/ox-mini-map.js'\n\nexport default {\n  title: 'MiniMap',\n  component: 'mini-map',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <div id=\"parent\" style=\"overflow: auto; width: 100%; height: 500px;\">\n    <div id=\"content\" style=\"width: 1200px; height: 1000px\"></div>\n    <ox-mini-map style=\"width: 100px; height: 100px; position: absolute; bottom: 10px; right: 10px;\"> </ox-mini-map>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/stories/index.stories.ts

@@ -1,26 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import '../src/ox-mini-map.js'
-
-export default {
-  title: 'MiniMap',
-  component: 'mini-map',
-  argTypes: {}
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
-  <div id="parent" style="overflow: auto; width: 100%; height: 500px;">
-    <div id="content" style="width: 1200px; height: 1000px"></div>
-    <ox-mini-map style="width: 100px; height: 100px; position: absolute; bottom: 10px; right: 10px;"> </ox-mini-map>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}