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

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-beta.10](https://github.com/hatiolab/operato/compare/v2.0.0-beta.9...v2.0.0-beta.10) (2024-06-08)
+
+
+### :rocket: New Features
+
+* mini-map ([a1cdac2](https://github.com/hatiolab/operato/commit/a1cdac283c57129420247c6d61b9488d2a595dc2))
+* ox-zoomable-image in mini-map module ([9f23992](https://github.com/hatiolab/operato/commit/9f2399235b318cd9b90740ae19aa6d481280d61b))
+
+
+
 ## [2.0.0-beta.0](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.158...v2.0.0-beta.0) (2024-06-01)
 
 **Note:** Version bump only for package @operato/mini-map

package/dist/src/ox-mini-map.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-let OxminimapComponent = class OxminimapComponent extends LitElement {
+let OxMiniMapComponent = class OxMiniMapComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.target = null;
@@ -10,28 +10,50 @@ let OxminimapComponent = class OxminimapComponent extends LitElement {
         this.startY = 0;
         this.initialScrollLeft = 0;
         this.initialScrollTop = 0;
+        this.observer = 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) {
         super.firstUpdated(changes);
         this.updateTarget();
-        this.checkVisibilityX();
     }
     updated(changedProperties) {
         if (changedProperties.has('target')) {
             this.updateTarget();
+            if (this.target) {
+                this.observeTarget(this.target);
+            }
         }
     }
     handleResize() {
         this.updateTarget();
-        this.checkVisibilityX();
+    }
+    observeTarget(target) {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        this.observer = new MutationObserver(() => {
+            this.updateTarget();
+        });
+        this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });
     }
     updateTarget() {
         var _a, _b;
@@ -39,108 +61,99 @@ let OxminimapComponent = class OxminimapComponent extends LitElement {
         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 scale = targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth;
-        const minimapHeight = target.scrollHeight * scale;
-        const minimapWidth = target.scrollWidth * scale;
-        const viewportHeight = target.offsetHeight * scale;
-        const viewportWidth = target.offsetWidth * scale;
+        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 = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('minimap');
         const viewport = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('viewport');
         minimap.style.width = `${minimapWidth}px`;
         minimap.style.height = `${minimapHeight}px`;
         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() {
-        var _a;
-        const parentElement = this.target || this.parentElement;
-        if (!parentElement)
-            return;
-        const parentRect = parentElement.getBoundingClientRect();
-        const minimap = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('minimap');
-        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) {
+    updateViewportPosition(scale, left, top) {
         var _a;
         const target = this.target || this.parentElement;
         if (!target) {
             return;
         }
-        const minimapViewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('viewport');
+        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 = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('viewport');
+        viewport.style.transform = `scale(${scale}) translate(${left * scaleMinimap}px, ${top * scaleMinimap}px)`;
+    }
+    handleMouseDown(event) {
+        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) {
-        var _a;
         if (!this.isDragging)
             return;
         const deltaX = event.clientX - this.startX;
         const deltaY = event.clientY - this.startY;
         const target = this.target || this.parentElement;
-        if (!target) {
+        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 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 = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('viewport');
-        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) {
-        var _a;
-        const minimapViewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('minimap');
         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>
     `;
     }
 };
-OxminimapComponent.styles = css `
+OxMiniMapComponent.styles = css `
     :host {
       display: flex;
       position: relative;
       background-color: gray;
+      width: 200px; /* 기본 너비 */
+      height: 150px; /* 기본 높이 */
     }
 
     #minimap {
@@ -149,7 +162,8 @@ OxminimapComponent.styles = css `
       left: 50%;
       transform: translate(-50%, -50%);
       box-sizing: border-box;
-
+      width: 100%;
+      height: 100%;
       background-color: var(--md-sys-color-surface);
       overflow: hidden;
     }
@@ -158,16 +172,14 @@ OxminimapComponent.styles = css `
       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);
     }
   `;
 __decorate([
     property({ type: Object })
-], OxminimapComponent.prototype, "target", void 0);
-OxminimapComponent = __decorate([
+], OxMiniMapComponent.prototype, "target", void 0);
+OxMiniMapComponent = __decorate([
     customElement('ox-mini-map')
-], OxminimapComponent);
+], OxMiniMapComponent);
 //# sourceMappingURL=ox-mini-map.js.map

package/dist/src/ox-mini-map.js.map

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

package/dist/src/ox-zoomable-image.d.ts

@@ -0,0 +1,54 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * 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>
+ */
+export declare class OxZoomableImage extends LitElement {
+    static styles: import("lit").CSSResult;
+    src?: string;
+    private zoom;
+    private left;
+    private top;
+    private minZoom;
+    private imageWidth;
+    private imageHeight;
+    private dragStart?;
+    private readonly dragEndHandler;
+    private readonly dragMoveHandler;
+    private readonly dragStartHandler;
+    private readonly wheelEventHandler;
+    private readonly resetHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
+    private calculateMinZoom;
+    private onWheelEvent;
+    private onDragStart;
+    private onDragMove;
+    private onDragEnd;
+    private onReset;
+    private updateTransform;
+    private applyBounds;
+}

package/dist/src/ox-zoomable-image.js

@@ -0,0 +1,252 @@
+import { __decorate } from "tslib";
+import { css, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+// Utility function to get the point from MouseEvent or TouchEvent
+function getPoint(e) {
+    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>
+ */
+let OxZoomableImage = class OxZoomableImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.zoom = 1; // Current zoom level
+        this.left = 0; // Horizontal position
+        this.top = 0; // Vertical position
+        this.minZoom = 1; // Minimum zoom level
+        this.imageWidth = 0;
+        this.imageHeight = 0;
+        // Event listeners bound to the component
+        this.dragEndHandler = this.onDragEnd.bind(this);
+        this.dragMoveHandler = this.onDragMove.bind(this);
+        this.dragStartHandler = this.onDragStart.bind(this);
+        this.wheelEventHandler = this.onWheelEvent.bind(this);
+        this.resetHandler = this.onReset.bind(this);
+    }
+    connectedCallback() {
+        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() {
+        // 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) {
+        // 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
+    }
+    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();
+        };
+    }
+    onWheelEvent(e) {
+        // 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
+    }
+    onDragStart(e) {
+        // Start dragging the image
+        const point = getPoint(e);
+        if (point) {
+            this.dragStart = point;
+            e.stopPropagation();
+        }
+    }
+    onDragMove(e) {
+        // 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
+    }
+    onDragEnd(e) {
+        // End the drag operation
+        if (this.dragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            this.dragStart = undefined;
+        }
+    }
+    onReset(e) {
+        // Reset zoom and position to initial state
+        this.zoom = 1;
+        this.left = 0;
+        this.top = 0;
+        this.updateTransform();
+    }
+    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)`);
+    }
+    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));
+        }
+    }
+};
+// Define CSS styles for the component
+OxZoomableImage.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;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], OxZoomableImage.prototype, "src", void 0);
+__decorate([
+    state()
+], OxZoomableImage.prototype, "zoom", void 0);
+__decorate([
+    state()
+], OxZoomableImage.prototype, "left", void 0);
+__decorate([
+    state()
+], OxZoomableImage.prototype, "top", void 0);
+__decorate([
+    state()
+], OxZoomableImage.prototype, "minZoom", void 0);
+__decorate([
+    state()
+], OxZoomableImage.prototype, "imageWidth", void 0);
+__decorate([
+    state()
+], OxZoomableImage.prototype, "imageHeight", void 0);
+OxZoomableImage = __decorate([
+    customElement('ox-zoomable-image')
+], OxZoomableImage);
+export { OxZoomableImage };
+//# sourceMappingURL=ox-zoomable-image.js.map