@operato/mini-map 8.0.0-beta.0 → 8.0.0-beta.2

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+
+
+
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/mini-map

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/mini-map",
   "description": "Webcomponent mini-map following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -80,5 +80,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/demo/index.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        display: flex;
-        width: 100vw;
-        height: 100dvh;
-        margin: 0;
-        padding: 0;
-      }
-
-      #demo {
-        flex: 1;
-        background-color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { minimap } from '../dist/src/mini-map.js'
-
-      pulltorefresh({
-        container: document.body,
-        scrollable: document.querySelector('#demo'),
-        refresh: () => {
-          console.log('refreshed...')
-        }
-      })
-    </script>
-  </body>
-</html>

package/src/ox-mini-map.ts

@@ -1,214 +0,0 @@
-import { html, css, LitElement, PropertyValueMap } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('ox-mini-map')
-class OxMiniMapComponent extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      position: relative;
-      background-color: gray;
-      width: 200px; /* 기본 너비 */
-      height: 150px; /* 기본 높이 */
-    }
-
-    #minimap {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      background-color: var(--md-sys-color-surface);
-      overflow: hidden;
-    }
-
-    #viewport {
-      position: absolute;
-      border: 1px dashed blue;
-      box-sizing: border-box;
-      cursor: move;
-      background-color: rgba(255, 255, 255, 0.5);
-    }
-  `
-
-  @property({ type: Object }) target: HTMLElement | null = null
-  private isDragging = false
-  private startX = 0
-  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('pointermove', this.handlePointerMove.bind(this))
-    this.addEventListener('pointerup', this.handlePointerUp.bind(this))
-    if (this.target) {
-      this.observeTarget(this.target)
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    window.removeEventListener('resize', this.handleResize.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
-    }
-  }
-
-  firstUpdated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
-    super.firstUpdated(changes)
-    this.updateTarget()
-  }
-
-  updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has('target')) {
-      this.updateTarget()
-      if (this.target) {
-        this.observeTarget(this.target)
-      }
-    }
-  }
-
-  handleResize() {
-    this.updateTarget()
-  }
-
-  observeTarget(target: HTMLElement) {
-    if (this.observer) {
-      this.observer.disconnect()
-    }
-    this.observer = new MutationObserver(() => {
-      this.updateTarget()
-    })
-    this.observer.observe(target, { attributes: true, attributeFilter: ['style'] })
-  }
-
-  updateTarget() {
-    const target = this.target || this.parentElement
-    if (!target) {
-      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 scaleMinimap =
-      targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth
-
-    const minimapHeight = target.scrollHeight * scaleMinimap
-    const minimapWidth = target.scrollWidth * scaleMinimap
-
-    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
-
-    minimap.style.width = `${minimapWidth}px`
-    minimap.style.height = `${minimapHeight}px`
-
-    viewport.style.width = `${viewportWidth}px`
-    viewport.style.height = `${viewportHeight}px`
-
-    this.updateViewportPosition(scale, left, top)
-  }
-
-  updateViewportPosition(scale: number, left: number, top: number) {
-    const target = this.target || this.parentElement
-    if (!target) {
-      return
-    }
-
-    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)`
-  }
-
-  handlePointerDown(event: MouseEvent) {
-    this.isDragging = true
-    this.startX = event.clientX
-    this.startY = event.clientY
-
-    const target = this.target || this.parentElement
-    if (target) {
-      this.initialScrollLeft = target.scrollLeft
-      this.initialScrollTop = target.scrollTop
-    }
-
-    window.addEventListener('pointermove', this.handlePointerMove.bind(this))
-    window.addEventListener('pointerup', this.handlePointerUp.bind(this))
-
-    event.preventDefault()
-  }
-
-  handlePointerMove(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
-
-    const targetRatio = target.scrollHeight / target.scrollWidth
-    const thisRatio = this.offsetHeight / this.offsetWidth
-
-    const scale =
-      targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth
-
-    const scrollX = deltaX / scale
-    const scrollY = deltaY / scale
-
-    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()
-  }
-
-  handlePointerUp(event: MouseEvent) {
-    this.isDragging = false
-    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" @pointerdown=${this.handlePointerDown}></div>
-      </div>
-    `
-  }
-}

package/src/ox-zoomable-image.ts

@@ -1,217 +0,0 @@
-import { css, LitElement, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { gesture, GestureEventDoubleTap, GestureEventDrag, GestureEventPinch } from '@operato/utils/gesture-mixin.js'
-
-/**
- * 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" restrict-boundary></ox-zoomable-image>
- * </body>
- * </html>
- */
-
-@customElement('ox-zoomable-image')
-export class OxZoomableImage extends gesture(LitElement) {
-  // Define CSS styles for the component
-  static styles = css`
-    :host {
-      display: block;
-      position: relative;
-      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))
-      );
-      transform: var(--image-transform, '');
-      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 imageWidth = 0
-  @state() private imageHeight = 0
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    // Register event listeners for zooming and dragging
-    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('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()
-  }
-
-  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
-
-      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 pinchHandler = (e: GestureEventPinch) => {
-    const { scale, centerX, centerY } = e.detail
-    this.zoomAt(centerX, centerY, scale)
-  }
-
-  private zoomAt(clientX: number, clientY: number, scale: number) {
-    const { offsetLeft: left, offsetTop: top, offsetWidth: width, offsetHeight: height } = this
-
-    const centerX = left + width / 2
-    const centerY = top + height / 2
-
-    // this.imageWidth
-    // this.imageHeight
-    const dx = ((centerX - clientX) / width) * 100 * (1 - scale)
-    const dy = ((centerY - clientY) / height) * 100 * (1 - scale)
-
-    this.left += dx
-    this.top += dy
-
-    this.zoom *= scale
-  }
-
-  private wheelHandler = (e: WheelEvent): void => {
-    // Handle zoom in and out based on mouse wheel events
-    e.preventDefault()
-
-    const delta = Math.sign(e.deltaY)
-    this.zoomAt(e.clientX, e.clientY, 1 - delta / 20)
-  }
-
-  private dragHandler = (e: GestureEventDrag): void => {
-    const { deltaX, deltaY } = e.detail
-
-    this.top += deltaY
-    this.left += deltaX
-
-    this.updateTransform()
-  }
-
-  private doubleTapHandler = (e: GestureEventDoubleTap): void => {
-    // Reset zoom and position to initial state
-    this.zoom = 1
-    this.left = 0
-    this.top = 0
-  }
-
-  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', `translate(${this.left}px, ${this.top}px) scale(${this.zoom})`)
-  }
-
-  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 = (hostWidth * (1 - this.zoom)) / 2
-      minX = minX > 0 ? -minX : minX
-      var maxX = -minX
-
-      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
-      minX = Math.min(minX, -minX)
-      var maxX = -minX
-
-      var minY = (-hostHeight * (1 - this.zoom)) / 2
-      minY = minY > 0 ? -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))
-    }
-  }
-}

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

@@ -1,54 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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' },
-    restrictBoundary: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface OxZoomableImageProps {
-  src: string
-  width: number
-  height: number
-  restrictBoundary: boolean
-}
-
-const Template: Story<OxZoomableImageProps> = ({ src, width, height, restrictBoundary }: 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} ?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,
-  restrictBoundary: true
-}
-
-export const Wide = Template.bind({})
-Wide.args = {
-  src: 'https://via.placeholder.com/800x600.png', // 기본 이미지 URL을 실제 경로로 변경하세요.
-  width: 600,
-  height: 300,
-  restrictBoundary: true
-}
-
-export const CustomImage = Template.bind({})
-CustomImage.args = {
-  src: 'https://via.placeholder.com/1200x800.png', // 다른 테스트 이미지 URL을 실제 경로로 변경하세요.
-  width: 400,
-  height: 600,
-  restrictBoundary: true
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts", "*.d.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});