@operato/contact 8.0.0-beta.2 → 8.1.0

package/dist/src/ox-pfp-edit.js

@@ -3,63 +3,57 @@ import '@material/web/icon/icon.js';
 import { html, css, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { FileDropHelper } from '@operato/utils';
-import { gesture } from '@operato/utils/gesture-mixin.js';
-let OxPfpEdit = class OxPfpEdit extends gesture(LitElement) {
+function getPoint(e) {
+    var _a;
+    if (e.button == 0) {
+        return {
+            x: e.clientX,
+            y: e.clientY
+        };
+    }
+    else if (((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) == 1) {
+        const touch = e.touches[0];
+        return {
+            x: touch.clientX,
+            y: touch.clientY
+        };
+    }
+    else {
+        return;
+    }
+}
+let OxPfpEdit = class OxPfpEdit extends LitElement {
     constructor() {
         super(...arguments);
         this.profile = {};
-        this.doubleTapHandler = (e) => {
-            this.fit();
-        };
-        this.wheelHandler = (e) => {
-            e.preventDefault();
-            const delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
-            const scale = 1 - delta / 20;
-            // wheel 이벤트가 발생한 포인터 위치를 중심으로 줌
-            this.zoomAt(e.clientX, e.clientY, scale);
-        };
-        this.dragHandler = (e) => {
-            const { deltaX, deltaY } = e.detail;
-            const { offsetHeight, offsetWidth } = this;
-            const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {};
-            this.profile = {
-                top: top + (deltaY / offsetHeight) * 100,
-                left: left + (deltaX / offsetWidth) * 100,
-                zoom,
-                picture,
-                file
-            };
-            this.dispatchEvent(new CustomEvent('change', {
-                detail: this.profile
-            }));
-        };
-        this.pinchHandler = (e) => {
-            const { scale, centerX, centerY } = e.detail;
-            this.zoomAt(centerX, centerY, scale);
-        };
-        this.dropFileHandler = (e) => {
-            const dropFiles = e.detail;
-            const imageFile = dropFiles[0];
-            if (!imageFile)
-                return;
-            const picture = URL.createObjectURL(imageFile);
-            this.profile = { left: 0, top: 0, zoom: 1, picture, file: imageFile };
-        };
+        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.dropFileHandler = this.onDropFile.bind(this);
     }
     connectedCallback() {
         super.connectedCallback();
         FileDropHelper.set(this);
-        this.addEventListener('pinch', this.pinchHandler);
-        this.addEventListener('drag', this.dragHandler);
-        this.addEventListener('doubletap', this.doubleTapHandler);
-        this.addEventListener('wheel', this.wheelHandler);
+        this.addEventListener('mousewheel', this.wheelEventHandler, false);
+        this.addEventListener('mousedown', this.dragStartHandler);
+        this.addEventListener('touchstart', this.dragStartHandler);
+        document.addEventListener('mouseup', this.dragEndHandler);
+        document.addEventListener('touchend', this.dragEndHandler);
+        document.addEventListener('touchcancel', this.dragEndHandler);
+        document.addEventListener('mousemove', this.dragMoveHandler);
+        document.addEventListener('touchmove', this.dragMoveHandler);
         this.addEventListener('file-drop', this.dropFileHandler);
     }
     disconnectedCallback() {
-        this.removeEventListener('pinch', this.pinchHandler);
-        this.removeEventListener('drag', this.dragHandler);
-        this.removeEventListener('doubletap', this.doubleTapHandler);
-        this.removeEventListener('wheel', this.wheelHandler);
+        this.removeEventListener('mousewheel', this.wheelEventHandler, false);
+        this.removeEventListener('mousedown', this.dragStartHandler);
+        this.removeEventListener('touchstart', this.dragStartHandler);
+        document.removeEventListener('mouseup', this.dragEndHandler);
+        document.removeEventListener('touchend', this.dragEndHandler);
+        document.removeEventListener('touchcancel', this.dragEndHandler);
+        document.removeEventListener('mousemove', this.dragMoveHandler);
+        document.removeEventListener('touchmove', this.dragMoveHandler);
         this.removeEventListener('file-drop', this.dropFileHandler);
         super.disconnectedCallback();
     }
@@ -103,46 +97,103 @@ let OxPfpEdit = class OxPfpEdit extends gesture(LitElement) {
     set value(value) {
         this.profile = value;
     }
-    /**
-     * 중심점을 기준으로 확대/축소
-     */
-    zoomAt(clientX, clientY, scale) {
-        const { offsetLeft, offsetTop, offsetWidth: width, offsetHeight: height } = this;
-        const centerX = offsetLeft + width / 2;
-        const centerY = offsetTop + height / 2;
+    onWheelEvent(e) {
+        e.preventDefault();
+        var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
+        const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {};
+        this.profile = {
+            top,
+            left,
+            zoom: zoom * (1 - delta / 20),
+            picture,
+            file
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.profile
+        }));
+    }
+    onDragStart(e) {
+        const point = getPoint(e);
+        if (point) {
+            this.dragStart = point;
+            e.stopPropagation();
+            return false;
+        }
+    }
+    onDragMove(e) {
+        if (!this.dragStart) {
+            return false;
+        }
+        const point = getPoint(e);
+        if (!point) {
+            return false;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        const dragStart = point;
+        var { x, y } = point;
+        x -= this.dragStart.x;
+        y -= this.dragStart.y;
+        this.dragStart = dragStart;
         const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {};
-        const rect = this.getBoundingClientRect();
-        const relativeX = (centerX - rect.left) / this.offsetWidth;
-        const relativeY = (centerY - rect.top) / this.offsetHeight;
-        const newZoom = zoom * scale;
-        const deltaX = (relativeX * this.offsetWidth * (1 - scale)) / newZoom;
-        const deltaY = (relativeY * this.offsetHeight * (1 - scale)) / newZoom;
+        const { offsetHeight, offsetWidth } = this;
         this.profile = {
-            top: top - (deltaY / this.offsetHeight) * 100,
-            left: left - (deltaX / this.offsetWidth) * 100,
-            zoom: newZoom,
+            top: top + (y / offsetHeight) * 100,
+            left: left + (x / offsetWidth) * 100,
+            zoom,
             picture,
             file
         };
         this.dispatchEvent(new CustomEvent('change', {
             detail: this.profile
         }));
+        return false;
+    }
+    onDragEnd(e) {
+        if (this.dragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            delete this.dragStart;
+        }
+    }
+    onDropFile(e) {
+        const dropFiles = e.detail;
+        const imageFile = dropFiles[0];
+        if (!imageFile) {
+            return;
+        }
+        const picture = URL.createObjectURL(imageFile);
+        this.profile = {
+            left: 0,
+            top: 0,
+            zoom: 1,
+            picture,
+            file: imageFile
+        };
     }
     onChangeFile(e) {
         const fileInput = e.currentTarget;
         const imageFile = [...Array.from(fileInput.files)][0];
-        if (!imageFile)
+        if (!imageFile) {
             return;
+        }
         const picture = URL.createObjectURL(imageFile);
-        this.profile = { left: 0, top: 0, zoom: 1, picture, file: imageFile };
-        fileInput.value = ''; // Clear file input after use
+        this.profile = {
+            left: 0,
+            top: 0,
+            zoom: 1,
+            picture,
+            file: imageFile
+        };
+        fileInput.files = null;
     }
     fit() {
-        // Fit the image to the full container size and centered
-        this.profile = { ...this.profile, left: 0, top: 0, zoom: 1 };
-        this.dispatchEvent(new CustomEvent('change', {
-            detail: this.profile
-        }));
+        this.profile = {
+            ...this.profile,
+            left: 0,
+            top: 0,
+            zoom: 1
+        };
     }
     clear() {
         this.profile = {};
@@ -153,9 +204,9 @@ OxPfpEdit.styles = css `
       display: inline-block;
       overflow: hidden;
       aspect-ratio: 1 / 1;
+
       height: var(--ox-pfp-size, 100px);
       width: var(--ox-pfp-size, 100px);
-      touch-action: none;
     }
 
     [content] {
@@ -214,6 +265,7 @@ OxPfpEdit.styles = css `
       overflow: hidden;
       background-color: gray;
       color: white;
+
       display: flex;
       align-items: center;
       justify-content: center;
@@ -231,6 +283,7 @@ OxPfpEdit.styles = css `
       position: absolute;
       left: 0;
       top: 0;
+
       display: flex;
       place-content: center;
     }
@@ -250,6 +303,7 @@ OxPfpEdit.styles = css `
 
     md-icon {
       align-self: center;
+
       color: var(--file-uploader-icon-color, black);
       --md-icon-size: var(--file-uploader-icon-size, 24px);
     }

package/dist/src/ox-pfp-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view'\nimport { FileDropHelper } from '@operato/utils'\nimport { gesture, GestureEventDoubleTap, GestureEventDrag, GestureEventPinch } from '@operato/utils/gesture-mixin.js'\n\n@customElement('ox-pfp-edit')\nexport class OxPfpEdit extends gesture(LitElement) {\n  static styles = css`\n    :host {\n      display: inline-block;\n      overflow: hidden;\n      aspect-ratio: 1 / 1;\n      height: var(--ox-pfp-size, 100px);\n      width: var(--ox-pfp-size, 100px);\n      touch-action: none;\n    }\n\n    [content] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n\n    [circle] {\n      width: 90%;\n      height: 90%;\n      position: relative;\n    }\n\n    [circle]::after {\n      position: absolute;\n      content: '';\n      width: 100%;\n      height: 100%;\n      box-shadow: 0 0 0 1000px lightgray;\n      border-radius: 50%;\n      opacity: 0.9;\n    }\n\n    [circle]::before {\n      content: '';\n      display: block;\n      position: absolute;\n      text-align: left;\n      line-height: 24px;\n      top: 0;\n      right: 0;\n      width: 100%;\n      height: 100%;\n      background-repeat: no-repeat;\n      background-image: var(\n        --background-image,\n        linear-gradient(\n          var(--md-sys-color-on-primary-container, lightgray),\n          var(--md-sys-color-on-primary-container, lightgray)\n        )\n      );\n      transform: var(--image-transform, '');\n      background-size: 100% 100%;\n    }\n\n    [monogram] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 1px solid darkgray;\n      box-sizing: border-box;\n      padding: 0;\n      overflow: hidden;\n      background-color: gray;\n      color: white;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    [monogram] div {\n      flex: 1;\n      text-transform: uppercase;\n      font-size: 2em;\n      font-family: system-ui;\n      text-align: center;\n    }\n\n    [file-load] {\n      position: absolute;\n      left: 0;\n      top: 0;\n      display: flex;\n      place-content: center;\n    }\n\n    [file-load]:hover {\n      opacity: 50%;\n    }\n\n    #input-file {\n      display: none;\n    }\n\n    label {\n      display: flex;\n      align-content: center;\n    }\n\n    md-icon {\n      align-self: center;\n      color: var(--file-uploader-icon-color, black);\n      --md-icon-size: var(--file-uploader-icon-size, 24px);\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @query('[circle]') circle!: HTMLDivElement\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    FileDropHelper.set(this)\n\n    this.addEventListener('pinch', this.pinchHandler as EventListener)\n    this.addEventListener('drag', this.dragHandler as EventListener)\n    this.addEventListener('doubletap', this.doubleTapHandler as EventListener)\n    this.addEventListener('wheel', this.wheelHandler as EventListener)\n    this.addEventListener('file-drop', this.dropFileHandler)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('pinch', this.pinchHandler as EventListener)\n    this.removeEventListener('drag', this.dragHandler as EventListener)\n    this.removeEventListener('doubletap', this.doubleTapHandler as EventListener)\n    this.removeEventListener('wheel', this.wheelHandler as EventListener)\n    this.removeEventListener('file-drop', this.dropFileHandler)\n    super.disconnectedCallback()\n  }\n\n  render() {\n    return html`\n      <div content>\n        ${this.profile?.picture\n          ? html`<div circle></div>`\n          : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n      </div>\n\n      <div file-load>\n        <label>\n          <input\n            id=\"input-file\"\n            type=\"file\"\n            accept=\"image/*\"\n            hidden\n            capture=\"environment\"\n            @change=${(e: Event) => this.onChangeFile(e)}\n          />\n          <md-icon title=\"select image\">image_search</md-icon>\n        </label>\n      </div>\n\n      <slot></slot>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n    if (picture) {\n      const style = this.style\n      style.setProperty('--background-image', `url('${picture}')`)\n      style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n    }\n  }\n\n  get value() {\n    return this.profile\n  }\n\n  set value(value: Profile) {\n    this.profile = value\n  }\n\n  private doubleTapHandler = (e: GestureEventDoubleTap) => {\n    this.fit()\n  }\n\n  private wheelHandler = (e: WheelEvent) => {\n    e.preventDefault()\n\n    const delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail))\n    const scale = 1 - delta / 20\n\n    // wheel 이벤트가 발생한 포인터 위치를 중심으로 줌\n    this.zoomAt(e.clientX, e.clientY, scale)\n  }\n\n  dragHandler = (e: GestureEventDrag) => {\n    const { deltaX, deltaY } = e.detail\n    const { offsetHeight, offsetWidth } = this\n    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n\n    this.profile = {\n      top: top + (deltaY / offsetHeight) * 100,\n      left: left + (deltaX / offsetWidth) * 100,\n      zoom,\n      picture,\n      file\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\n  }\n\n  pinchHandler = (e: GestureEventPinch) => {\n    const { scale, centerX, centerY } = e.detail\n    this.zoomAt(centerX, centerY, scale)\n  }\n\n  /**\n   * 중심점을 기준으로 확대/축소\n   */\n  private zoomAt(clientX: number, clientY: number, scale: number) {\n    const { offsetLeft, offsetTop, offsetWidth: width, offsetHeight: height } = this\n\n    const centerX = offsetLeft + width / 2\n    const centerY = offsetTop + height / 2\n\n    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n\n    const rect = this.getBoundingClientRect()\n\n    const relativeX = (centerX - rect.left) / this.offsetWidth\n    const relativeY = (centerY - rect.top) / this.offsetHeight\n\n    const newZoom = zoom * scale\n\n    const deltaX = (relativeX * this.offsetWidth * (1 - scale)) / newZoom\n    const deltaY = (relativeY * this.offsetHeight * (1 - scale)) / newZoom\n\n    this.profile = {\n      top: top - (deltaY / this.offsetHeight) * 100,\n      left: left - (deltaX / this.offsetWidth) * 100,\n      zoom: newZoom,\n      picture,\n      file\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\n  }\n\n  dropFileHandler = (e: Event) => {\n    const dropFiles = (e as CustomEvent).detail\n    const imageFile = dropFiles[0]\n    if (!imageFile) return\n\n    const picture = URL.createObjectURL(imageFile)\n    this.profile = { left: 0, top: 0, zoom: 1, picture, file: imageFile }\n  }\n\n  onChangeFile(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const imageFile = [...Array.from(fileInput.files as FileList)][0]\n    if (!imageFile) return\n\n    const picture = URL.createObjectURL(imageFile)\n    this.profile = { left: 0, top: 0, zoom: 1, picture, file: imageFile }\n\n    fileInput.value = '' // Clear file input after use\n  }\n\n  fit() {\n    // Fit the image to the full container size and centered\n    this.profile = { ...this.profile, left: 0, top: 0, zoom: 1 }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\n  }\n\n  clear() {\n    this.profile = {}\n  }\n}\n"]}
+{"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view'\nimport { FileDropHelper } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n  if ((e as MouseEvent).button == 0) {\n    return {\n      x: (e as MouseEvent).clientX,\n      y: (e as MouseEvent).clientY\n    }\n  } else if ((e as TouchEvent).touches?.length == 1) {\n    const touch = (e as TouchEvent).touches[0]\n    return {\n      x: touch.clientX,\n      y: touch.clientY\n    }\n  } else {\n    return\n  }\n}\n\n@customElement('ox-pfp-edit')\nexport class OxPfpEdit extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n      overflow: hidden;\n      aspect-ratio: 1 / 1;\n\n      height: var(--ox-pfp-size, 100px);\n      width: var(--ox-pfp-size, 100px);\n    }\n\n    [content] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n\n    [circle] {\n      width: 90%;\n      height: 90%;\n      position: relative;\n    }\n\n    [circle]::after {\n      position: absolute;\n      content: '';\n      width: 100%;\n      height: 100%;\n      box-shadow: 0 0 0 1000px lightgray;\n      border-radius: 50%;\n      opacity: 0.9;\n    }\n\n    [circle]::before {\n      content: '';\n      display: block;\n      position: absolute;\n      text-align: left;\n      line-height: 24px;\n      top: 0;\n      right: 0;\n      width: 100%;\n      height: 100%;\n      background-repeat: no-repeat;\n      background-image: var(\n        --background-image,\n        linear-gradient(\n          var(--md-sys-color-on-primary-container, lightgray),\n          var(--md-sys-color-on-primary-container, lightgray)\n        )\n      );\n      transform: var(--image-transform, '');\n      background-size: 100% 100%;\n    }\n\n    [monogram] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 1px solid darkgray;\n      box-sizing: border-box;\n      padding: 0;\n      overflow: hidden;\n      background-color: gray;\n      color: white;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    [monogram] div {\n      flex: 1;\n      text-transform: uppercase;\n      font-size: 2em;\n      font-family: system-ui;\n      text-align: center;\n    }\n\n    [file-load] {\n      position: absolute;\n      left: 0;\n      top: 0;\n\n      display: flex;\n      place-content: center;\n    }\n\n    [file-load]:hover {\n      opacity: 50%;\n    }\n\n    #input-file {\n      display: none;\n    }\n\n    label {\n      display: flex;\n      align-content: center;\n    }\n\n    md-icon {\n      align-self: center;\n\n      color: var(--file-uploader-icon-color, black);\n      --md-icon-size: var(--file-uploader-icon-size, 24px);\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @query('[circle]') circle!: HTMLDivElement\n\n  private dragStart?: { x: number; y: number }\n\n  private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n  private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n  private dragStartHandler = this.onDragStart.bind(this) as EventListener\n  private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener\n  private dropFileHandler = this.onDropFile.bind(this) as EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    FileDropHelper.set(this)\n\n    this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.addEventListener('mousedown', this.dragStartHandler)\n    this.addEventListener('touchstart', this.dragStartHandler)\n\n    document.addEventListener('mouseup', this.dragEndHandler)\n    document.addEventListener('touchend', this.dragEndHandler)\n    document.addEventListener('touchcancel', this.dragEndHandler)\n    document.addEventListener('mousemove', this.dragMoveHandler)\n    document.addEventListener('touchmove', this.dragMoveHandler)\n\n    this.addEventListener('file-drop', this.dropFileHandler)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.removeEventListener('mousedown', this.dragStartHandler!)\n    this.removeEventListener('touchstart', this.dragStartHandler!)\n\n    document.removeEventListener('mouseup', this.dragEndHandler!)\n    document.removeEventListener('touchend', this.dragEndHandler!)\n    document.removeEventListener('touchcancel', this.dragEndHandler!)\n    document.removeEventListener('mousemove', this.dragMoveHandler!)\n    document.removeEventListener('touchmove', this.dragMoveHandler!)\n\n    this.removeEventListener('file-drop', this.dropFileHandler)\n\n    super.disconnectedCallback()\n  }\n\n  render() {\n    return html`\n      <div content>\n        ${this.profile?.picture\n          ? html`<div circle></div>`\n          : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n      </div>\n\n      <div file-load>\n        <label>\n          <input\n            id=\"input-file\"\n            type=\"file\"\n            accept=\"image/*\"\n            hidden\n            capture=\"environment\"\n            @change=${(e: Event) => this.onChangeFile(e)}\n          />\n          <md-icon title=\"select image\">image_search</md-icon>\n        </label>\n      </div>\n\n      <slot></slot>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n    if (picture) {\n      const style = this.style\n\n      style.setProperty('--background-image', `url('${picture}')`)\n      style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n    }\n  }\n\n  get value() {\n    return this.profile\n  }\n\n  set value(value: Profile) {\n    this.profile = value\n  }\n\n  onWheelEvent(e: Event) {\n    e.preventDefault()\n\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n    this.profile = {\n      top,\n      left,\n      zoom: zoom * (1 - delta / 20),\n      picture,\n      file\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\n  }\n\n  onDragStart(e: Event) {\n    const point = getPoint(e)\n\n    if (point) {\n      this.dragStart = point\n      e.stopPropagation()\n      return false\n    }\n  }\n\n  onDragMove(e: Event) {\n    if (!this.dragStart) {\n      return false\n    }\n\n    const point = getPoint(e)\n\n    if (!point) {\n      return false\n    }\n\n    e.stopPropagation()\n    e.preventDefault()\n\n    const dragStart = point\n    var { x, y } = point\n\n    x -= this.dragStart.x\n    y -= this.dragStart.y\n\n    this.dragStart = dragStart\n\n    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n    const { offsetHeight, offsetWidth } = this\n\n    this.profile = {\n      top: top + (y / offsetHeight) * 100,\n      left: left + (x / offsetWidth) * 100,\n      zoom,\n      picture,\n      file\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\n\n    return false\n  }\n\n  onDragEnd(e: Event) {\n    if (this.dragStart) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      delete this.dragStart\n    }\n  }\n\n  onDropFile(e: Event) {\n    const dropFiles = (e as CustomEvent).detail\n    const imageFile = dropFiles[0]\n    if (!imageFile) {\n      return\n    }\n\n    const picture = URL.createObjectURL(imageFile)\n\n    this.profile = {\n      left: 0,\n      top: 0,\n      zoom: 1,\n      picture,\n      file: imageFile\n    }\n  }\n\n  onChangeFile(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const imageFile = [...Array.from(fileInput.files as FileList)][0]\n    if (!imageFile) {\n      return\n    }\n\n    const picture = URL.createObjectURL(imageFile)\n\n    this.profile = {\n      left: 0,\n      top: 0,\n      zoom: 1,\n      picture,\n      file: imageFile\n    }\n\n    fileInput.files = null\n  }\n\n  fit() {\n    this.profile = {\n      ...this.profile,\n      left: 0,\n      top: 0,\n      zoom: 1\n    }\n  }\n\n  clear() {\n    this.profile = {}\n  }\n}\n"]}

package/dist/src/ox-pfp.js

@@ -12,7 +12,7 @@ let OxPfp = class OxPfp extends LitElement {
     }
     render() {
         return this.editMode
-            ? html `<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
+            ? html `<ox-pfp-edit .profile=${this.profile} name=${this.name || ''} @dblclick=${() => this.edit.fit()}>
           <md-icon title="clear" icon="clear" @click=${() => this.edit.clear()}>delete</md-icon>
           <md-icon
             title="save"

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

@@ -1 +1 @@
-{"version":3,"file":"ox-pfp.js","sourceRoot":"","sources":["../../src/ox-pfp.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,kBAAkB,CAAA;AACzB,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKlE,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAkDuB,YAAO,GAAY,EAAE,CAAA;QAGxC,aAAQ,GAAa,KAAK,CAAA;IA8BrC,CAAC;IA1BC,MAAM;QACJ,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE;uDAClB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;;;qBAIzD,GAAG,EAAE;gBACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;gBAChC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;gBACrB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE,IAAI,CAAC,OAAO;iBACrB,CAAC,CACH,CAAA;YACH,CAAC;;;yDAG4C,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;wBAC9D;YAClB,CAAC,CAAC,IAAI,CAAA;kCACsB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE;uDACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;SAE1E,CAAA;IACP,CAAC;;AAjFM,YAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+ClB,AA/CY,CA+CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAc;AAEhC;IAAR,KAAK,EAAE;uCAA2B;AAEb;IAArB,KAAK,CAAC,aAAa,CAAC;mCAAiB;AAvD3B,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAmFjB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport './ox-pfp-edit.js'\nimport './ox-pfp-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view.js'\nimport { OxPfpEdit } from './ox-pfp-edit.js'\n\n@customElement('ox-pfp')\nexport class OxPfp extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      aspect-ratio: 1 / 1;\n\n      height: var(--ox-pfp-size, 100px);\n      width: var(--ox-pfp-size, 100px);\n    }\n\n    ox-pfp-edit,\n    ox-pfp-view {\n      position: relative;\n    }\n\n    [buttons] {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      display: flex;\n    }\n\n    md-icon {\n      position: absolute;\n\n      color: var(--md-sys-color-primary);\n      --md-icon-size: 24px;\n    }\n\n    md-icon[icon='save'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    md-icon[icon='edit'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    md-icon[icon='cancel'] {\n      top: 0;\n      right: 0;\n    }\n\n    md-icon[icon='clear'] {\n      bottom: 0;\n      left: 0;\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @state() editMode?: boolean = false\n\n  @query('ox-pfp-edit') edit!: OxPfpEdit\n\n  render() {\n    return this.editMode\n      ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>\n          <md-icon title=\"clear\" icon=\"clear\" @click=${() => this.edit.clear()}>delete</md-icon>\n          <md-icon\n            title=\"save\"\n            icon=\"save\"\n            @click=${() => {\n              this.profile = this.edit.profile\n              this.editMode = false\n              this.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: this.profile\n                })\n              )\n            }}\n            >save</md-icon\n          >\n          <md-icon title=\"cancel\" icon=\"cancel\" @click=${() => (this.editMode = false)}>cancel</md-icon>\n        </ox-pfp-edit> `\n      : html`\n          <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>\n            <md-icon title=\"edit\" icon=\"edit\" @click=${() => (this.editMode = true)}>edit</md-icon>\n          </ox-pfp-view>\n        `\n  }\n}\n"]}
+{"version":3,"file":"ox-pfp.js","sourceRoot":"","sources":["../../src/ox-pfp.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,kBAAkB,CAAA;AACzB,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKlE,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAkDuB,YAAO,GAAY,EAAE,CAAA;QAGxC,aAAQ,GAAa,KAAK,CAAA;IA8BrC,CAAC;IA1BC,MAAM;QACJ,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE,cAAc,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;uDACrD,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;;;qBAIzD,GAAG,EAAE;gBACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;gBAChC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;gBACrB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE,IAAI,CAAC,OAAO;iBACrB,CAAC,CACH,CAAA;YACH,CAAC;;;yDAG4C,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;wBAC9D;YAClB,CAAC,CAAC,IAAI,CAAA;kCACsB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE;uDACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;SAE1E,CAAA;IACP,CAAC;;AAjFM,YAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+ClB,AA/CY,CA+CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAc;AAEhC;IAAR,KAAK,EAAE;uCAA2B;AAEb;IAArB,KAAK,CAAC,aAAa,CAAC;mCAAiB;AAvD3B,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAmFjB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport './ox-pfp-edit.js'\nimport './ox-pfp-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view.js'\nimport { OxPfpEdit } from './ox-pfp-edit.js'\n\n@customElement('ox-pfp')\nexport class OxPfp extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      aspect-ratio: 1 / 1;\n\n      height: var(--ox-pfp-size, 100px);\n      width: var(--ox-pfp-size, 100px);\n    }\n\n    ox-pfp-edit,\n    ox-pfp-view {\n      position: relative;\n    }\n\n    [buttons] {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      display: flex;\n    }\n\n    md-icon {\n      position: absolute;\n\n      color: var(--md-sys-color-primary);\n      --md-icon-size: 24px;\n    }\n\n    md-icon[icon='save'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    md-icon[icon='edit'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    md-icon[icon='cancel'] {\n      top: 0;\n      right: 0;\n    }\n\n    md-icon[icon='clear'] {\n      bottom: 0;\n      left: 0;\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @state() editMode?: boolean = false\n\n  @query('ox-pfp-edit') edit!: OxPfpEdit\n\n  render() {\n    return this.editMode\n      ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''} @dblclick=${() => this.edit.fit()}>\n          <md-icon title=\"clear\" icon=\"clear\" @click=${() => this.edit.clear()}>delete</md-icon>\n          <md-icon\n            title=\"save\"\n            icon=\"save\"\n            @click=${() => {\n              this.profile = this.edit.profile\n              this.editMode = false\n              this.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: this.profile\n                })\n              )\n            }}\n            >save</md-icon\n          >\n          <md-icon title=\"cancel\" icon=\"cancel\" @click=${() => (this.editMode = false)}>cancel</md-icon>\n        </ox-pfp-edit> `\n      : html`\n          <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>\n            <md-icon title=\"edit\" icon=\"edit\" @click=${() => (this.editMode = true)}>edit</md-icon>\n          </ox-pfp-view>\n        `\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class OxZoomableImage extends LitElement {
+    static styles: import("lit").CSSResult;
+    src?: string;
+    zoom: number;
+    left: number;
+    top: number;
+    private dragStart?;
+    private dragEndHandler;
+    private dragMoveHandler;
+    private dragStartHandler;
+    private wheelEventHandler;
+    private resetHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
+    onWheelEvent(e: MouseEvent): void;
+    onDragStart(e: Event): false | undefined;
+    onDragMove(e: Event): boolean;
+    onDragEnd(e: Event): void;
+    onReset(e: Event): void;
+}

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

@@ -0,0 +1,155 @@
+import { __decorate } from "tslib";
+import { css, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+function getPoint(e) {
+    var _a;
+    if (e.button == 0) {
+        return {
+            x: e.clientX,
+            y: e.clientY
+        };
+    }
+    else if (((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) == 1) {
+        const touch = e.touches[0];
+        return {
+            x: touch.clientX,
+            y: touch.clientY
+        };
+    }
+    else {
+        return;
+    }
+}
+let OxZoomableImage = class OxZoomableImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.zoom = 1;
+        this.left = 0;
+        this.top = 0;
+        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();
+        this.addEventListener('mousewheel', this.wheelEventHandler, false);
+        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);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('mousewheel', this.wheelEventHandler, false);
+        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) {
+        const style = this.style;
+        if (changes.has('src') && this.src) {
+            style.setProperty('--background-image', `url('${this.src}')`);
+        }
+        style.setProperty('--image-transform', `translate(${this.left}%, ${this.top}%) scale(${this.zoom}, ${this.zoom})`);
+    }
+    onWheelEvent(e) {
+        e.preventDefault();
+        var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
+        this.zoom *= 1 - delta / 20;
+    }
+    onDragStart(e) {
+        const point = getPoint(e);
+        if (point) {
+            this.dragStart = point;
+            e.stopPropagation();
+            return false;
+        }
+    }
+    onDragMove(e) {
+        if (!this.dragStart) {
+            return false;
+        }
+        const point = getPoint(e);
+        if (!point) {
+            return false;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        const dragStart = point;
+        var { x, y } = point;
+        x -= this.dragStart.x;
+        y -= this.dragStart.y;
+        this.dragStart = dragStart;
+        const { offsetHeight, offsetWidth } = this;
+        this.top += (y / offsetHeight) * 100;
+        this.left += (x / offsetWidth) * 100;
+        return false;
+    }
+    onDragEnd(e) {
+        if (this.dragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            delete this.dragStart;
+        }
+    }
+    onReset(e) {
+        this.zoom = 1;
+        this.left = 0;
+        this.top = 0;
+    }
+};
+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-size: 100% 100%;
+    }
+  `;
+__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);
+OxZoomableImage = __decorate([
+    customElement('ox-zoomable-image')
+], OxZoomableImage);
+export { OxZoomableImage };
+//# sourceMappingURL=ox-zoomable-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-zoomable-image.js","sourceRoot":"","sources":["../../src/ox-zoomable-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n  if ((e as MouseEvent).button == 0) {\n    return {\n      x: (e as MouseEvent).clientX,\n      y: (e as MouseEvent).clientY\n    }\n  } else if ((e as TouchEvent).touches?.length == 1) {\n    const touch = (e as TouchEvent).touches[0]\n    return {\n      x: touch.clientX,\n      y: touch.clientY\n    }\n  } else {\n    return\n  }\n}\n\n@customElement('ox-zoomable-image')\nexport class OxZoomableImage extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    :host::before {\n      content: '';\n      display: block;\n\n      position: absolute;\n      top: 0;\n      right: 0;\n      width: 100%;\n      height: 100%;\n\n      background-image: var(\n        --background-image,\n        linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))\n      );\n      transform: var(--image-transform, '');\n      background-size: 100% 100%;\n    }\n  `\n\n  @property({ type: String }) src?: string\n\n  @state() zoom: number = 1\n  @state() left: number = 0\n  @state() top: number = 0\n\n  private dragStart?: { x: number; y: number }\n\n  private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n  private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n  private dragStartHandler = this.onDragStart.bind(this) as EventListener\n  private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener\n  private resetHandler = this.onReset.bind(this) as EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.addEventListener('mousedown', this.dragStartHandler)\n    this.addEventListener('touchstart', this.dragStartHandler)\n    this.addEventListener('dblclick', this.resetHandler)\n\n    document.addEventListener('mouseup', this.dragEndHandler)\n    document.addEventListener('touchend', this.dragEndHandler)\n    document.addEventListener('touchcancel', this.dragEndHandler)\n    document.addEventListener('mousemove', this.dragMoveHandler)\n    document.addEventListener('touchmove', this.dragMoveHandler)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.removeEventListener('mousedown', this.dragStartHandler!)\n    this.removeEventListener('touchstart', this.dragStartHandler!)\n    this.removeEventListener('dblclick', this.resetHandler!)\n\n    document.removeEventListener('mouseup', this.dragEndHandler!)\n    document.removeEventListener('touchend', this.dragEndHandler!)\n    document.removeEventListener('touchcancel', this.dragEndHandler!)\n    document.removeEventListener('mousemove', this.dragMoveHandler!)\n    document.removeEventListener('touchmove', this.dragMoveHandler!)\n\n    super.disconnectedCallback()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const style = this.style\n\n    if (changes.has('src') && this.src) {\n      style.setProperty('--background-image', `url('${this.src}')`)\n    }\n\n    style.setProperty('--image-transform', `translate(${this.left}%, ${this.top}%) scale(${this.zoom}, ${this.zoom})`)\n  }\n\n  onWheelEvent(e: MouseEvent) {\n    e.preventDefault()\n\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n    this.zoom *= 1 - delta / 20\n  }\n\n  onDragStart(e: Event) {\n    const point = getPoint(e)\n\n    if (point) {\n      this.dragStart = point\n      e.stopPropagation()\n      return false\n    }\n  }\n\n  onDragMove(e: Event) {\n    if (!this.dragStart) {\n      return false\n    }\n\n    const point = getPoint(e)\n\n    if (!point) {\n      return false\n    }\n\n    e.stopPropagation()\n    e.preventDefault()\n\n    const dragStart = point\n    var { x, y } = point\n\n    x -= this.dragStart.x\n    y -= this.dragStart.y\n\n    this.dragStart = dragStart\n\n    const { offsetHeight, offsetWidth } = this\n\n    this.top += (y / offsetHeight) * 100\n    this.left += (x / offsetWidth) * 100\n\n    return false\n  }\n\n  onDragEnd(e: Event) {\n    if (this.dragStart) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      delete this.dragStart\n    }\n  }\n\n  onReset(e: Event) {\n    this.zoom = 1\n    this.left = 0\n    this.top = 0\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+import '@operato/i18n';
+import '../src/ox-zoomable-image.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        src: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    src?: string;
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,27 @@
+import '@operato/i18n';
+import '../src/ox-zoomable-image.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-zoomable-image',
+    component: 'ox-zoomable-image',
+    argTypes: {
+        src: { control: 'text' }
+    }
+};
+const Template = ({ src = '' }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
+  <link href="/themes/form-theme.css" rel="stylesheet" />
+
+  <div style="height: 300px">
+    <ox-zoomable-image src=${src} style="width: 300px; height: 300px"> </ox-zoomable-image>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    src: '/assets/sample-image.png'
+};
+//# sourceMappingURL=ox-zoomable-image.stories.js.map

package/dist/stories/ox-zoomable-image.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-zoomable-image.stories.js","sourceRoot":"","sources":["../../stories/ox-zoomable-image.stories.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KACzB;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,GAAG,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;6BASrC,GAAG;;CAE/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,GAAG,EAAE,0BAA0B;CAChC,CAAA","sourcesContent":["import '@operato/i18n'\nimport '../src/ox-zoomable-image.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-zoomable-image',\n  component: 'ox-zoomable-image',\n  argTypes: {\n    src: { control: 'text' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  src?: string\n}\n\nconst Template: Story<ArgTypes> = ({ src = '' }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <div style=\"height: 300px\">\n    <ox-zoomable-image src=${src} style=\"width: 300px; height: 300px\"> </ox-zoomable-image>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  src: '/assets/sample-image.png'\n}\n"]}