@operato/mini-map 2.0.0-beta.0 → 2.0.0-beta.11

package/src/ox-mini-map.ts

@@ -2,12 +2,14 @@ import { html, css, LitElement, PropertyValueMap } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 @customElement('ox-mini-map')
-class OxminimapComponent extends LitElement {
+class OxMiniMapComponent extends LitElement {
   static styles = css`
     :host {
       display: flex;
       position: relative;
       background-color: gray;
+      width: 200px; /* 기본 너비 */
+      height: 150px; /* 기본 높이 */
     }
 
     #minimap {
@@ -16,7 +18,8 @@ class OxminimapComponent extends LitElement {
       left: 50%;
       transform: translate(-50%, -50%);
       box-sizing: border-box;
-
+      width: 100%;
+      height: 100%;
       background-color: var(--md-sys-color-surface);
       overflow: hidden;
     }
@@ -25,10 +28,8 @@ class OxminimapComponent extends LitElement {
       position: absolute;
       border: 1px dashed blue;
       box-sizing: border-box;
-      pointer-events: none;
-      background-color: var(--md-sys-color-surface);
-      pointer-events: auto;
       cursor: move;
+      background-color: rgba(255, 255, 255, 0.5);
     }
   `
 
@@ -38,33 +39,55 @@ class OxminimapComponent extends LitElement {
   private startY = 0
   private initialScrollLeft = 0
   private initialScrollTop = 0
+  private observer: MutationObserver | null = null
 
   connectedCallback() {
     super.connectedCallback()
     window.addEventListener('resize', this.handleResize.bind(this))
+    this.addEventListener('mousemove', this.handleMouseMove.bind(this))
+    this.addEventListener('mouseup', this.handleMouseUp.bind(this))
+    if (this.target) {
+      this.observeTarget(this.target)
+    }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
     window.removeEventListener('resize', this.handleResize.bind(this))
+    window.removeEventListener('mousemove', this.handleMouseMove.bind(this))
+    window.removeEventListener('mouseup', this.handleMouseUp.bind(this))
+    if (this.observer) {
+      this.observer.disconnect()
+      this.observer = null
+    }
   }
 
   firstUpdated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
     super.firstUpdated(changes)
-
     this.updateTarget()
-    this.checkVisibilityX()
   }
 
   updated(changedProperties: Map<string, any>) {
     if (changedProperties.has('target')) {
       this.updateTarget()
+      if (this.target) {
+        this.observeTarget(this.target)
+      }
     }
   }
 
   handleResize() {
     this.updateTarget()
-    this.checkVisibilityX()
+  }
+
+  observeTarget(target: HTMLElement) {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+    this.observer = new MutationObserver(() => {
+      this.updateTarget()
+    })
+    this.observer.observe(target, { attributes: true, attributeFilter: ['style'] })
   }
 
   updateTarget() {
@@ -73,17 +96,35 @@ class OxminimapComponent extends LitElement {
       return
     }
 
+    const targetStyle = window.getComputedStyle(target)
+    const transform = targetStyle.transform
+    const scaleMatch = /scale\(([^,]+),?([^)]+)?\)/.exec(transform)
+    const leftMatch = /translate\(([^,]+)px, ?([^)]+)?px\)/.exec(transform)
+
+    let scale = 1
+    let left = 0
+    let top = 0
+
+    if (scaleMatch) {
+      scale = parseFloat(scaleMatch[1])
+    }
+
+    if (leftMatch) {
+      left = parseFloat(leftMatch[1])
+      top = parseFloat(leftMatch[2] || '0')
+    }
+
     const targetRatio = target.scrollHeight / target.scrollWidth
     const thisRatio = this.offsetHeight / this.offsetWidth
 
-    const scale =
+    const scaleMinimap =
       targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth
 
-    const minimapHeight = target.scrollHeight * scale
-    const minimapWidth = target.scrollWidth * scale
+    const minimapHeight = target.scrollHeight * scaleMinimap
+    const minimapWidth = target.scrollWidth * scaleMinimap
 
-    const viewportHeight = target.offsetHeight * scale
-    const viewportWidth = target.offsetWidth * scale
+    const viewportHeight = target.clientHeight * scaleMinimap
+    const viewportWidth = target.clientWidth * scaleMinimap
 
     const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement
     const viewport = this.shadowRoot?.getElementById('viewport') as HTMLElement
@@ -94,56 +135,50 @@ class OxminimapComponent extends LitElement {
     viewport.style.width = `${viewportWidth}px`
     viewport.style.height = `${viewportHeight}px`
 
-    const viewportLeft = target.scrollLeft * scale
-    const viewportTop = target.scrollTop * scale
-
-    viewport.style.width = `${viewportWidth}px`
-    viewport.style.height = `${viewportHeight}px`
-    viewport.style.left = `${viewportLeft}px`
-    viewport.style.top = `${viewportTop}px`
-  }
-
-  checkVisibilityX() {
-    const parentElement = this.target || this.parentElement
-    if (!parentElement) return
-
-    const parentRect = parentElement.getBoundingClientRect()
-    const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement
-    if (parentRect.width >= minimap.offsetWidth && parentRect.height >= minimap.offsetHeight) {
-      this.style.display = 'block'
-    } else {
-      this.style.display = 'none'
-    }
+    this.updateViewportPosition(scale, left, top)
   }
 
-  handleMouseDown(event: MouseEvent) {
+  updateViewportPosition(scale: number, left: number, top: number) {
     const target = this.target || this.parentElement
-
     if (!target) {
       return
     }
 
-    const minimapViewport = this.shadowRoot?.getElementById('viewport') as HTMLElement
+    const targetRatio = target.scrollHeight / target.scrollWidth
+    const thisRatio = this.offsetHeight / this.offsetWidth
+
+    const scaleMinimap =
+      targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth
+
+    const viewport = this.shadowRoot?.getElementById('viewport') as HTMLElement
+    viewport.style.transform = `scale(${scale}) translate(${left * scaleMinimap}px, ${top * scaleMinimap}px)`
+  }
+
+  handleMouseDown(event: MouseEvent) {
+    this.isDragging = true
     this.startX = event.clientX
     this.startY = event.clientY
-    this.initialScrollLeft = target.scrollLeft || 0
-    this.initialScrollTop = target.scrollTop || 0
-    this.isDragging = true
-    minimapViewport.classList.add('dragging')
+
+    const target = this.target || this.parentElement
+    if (target) {
+      this.initialScrollLeft = target.scrollLeft
+      this.initialScrollTop = target.scrollTop
+    }
+
+    window.addEventListener('mousemove', this.handleMouseMove.bind(this))
+    window.addEventListener('mouseup', this.handleMouseUp.bind(this))
+
     event.preventDefault()
-    event.stopPropagation()
   }
 
   handleMouseMove(event: MouseEvent) {
     if (!this.isDragging) return
+
     const deltaX = event.clientX - this.startX
     const deltaY = event.clientY - this.startY
 
     const target = this.target || this.parentElement
-
-    if (!target) {
-      return
-    }
+    if (!target) return
 
     const targetRatio = target.scrollHeight / target.scrollWidth
     const thisRatio = this.offsetHeight / this.offsetWidth
@@ -151,44 +186,28 @@ class OxminimapComponent extends LitElement {
     const scale =
       targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth
 
-    const targetRect = target.getBoundingClientRect()
-    const viewportWidth = (targetRect.width * target.clientWidth) / target.scrollWidth
-    const viewportHeight = (targetRect.height * target.clientHeight) / target.scrollHeight
     const scrollX = deltaX / scale
     const scrollY = deltaY / scale
-    target.scrollTo(this.initialScrollLeft + scrollX, this.initialScrollTop + scrollY)
-    const minimapViewport = this.shadowRoot?.getElementById('viewport') as HTMLElement
-    minimapViewport.style.left = `${Math.max(
-      0,
-      Math.min(event.clientX - viewportWidth / 2, target.clientWidth - viewportWidth)
-    )}px`
-    minimapViewport.style.top = `${Math.max(
-      0,
-      Math.min(event.clientY - viewportHeight / 2, target.clientHeight - viewportHeight)
-    )}px`
 
-    this.updateTarget()
+    target.scrollLeft = this.initialScrollLeft + scrollX
+    target.scrollTop = this.initialScrollTop + scrollY
+
+    this.updateViewportPosition(1, target.scrollLeft, target.scrollTop) // Assuming no additional transform during drag
+
     event.preventDefault()
-    event.stopPropagation()
   }
 
   handleMouseUp(event: MouseEvent) {
-    const minimapViewport = this.shadowRoot?.getElementById('minimap') as HTMLElement
     this.isDragging = false
-    minimapViewport.classList.remove('dragging')
+    window.removeEventListener('mousemove', this.handleMouseMove.bind(this))
+    window.removeEventListener('mouseup', this.handleMouseUp.bind(this))
     event.preventDefault()
-    event.stopPropagation()
   }
 
   render() {
     return html`
       <div id="minimap">
-        <div
-          id="viewport"
-          @mousedown=${this.handleMouseDown}
-          @mousemove=${this.handleMouseMove}
-          @mouseup=${this.handleMouseUp}
-        ></div>
+        <div id="viewport" @mousedown=${this.handleMouseDown}></div>
       </div>
     `
   }

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 = {}