@operato/contact 8.0.0 → 9.0.0-beta.4

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

@@ -3,57 +3,63 @@ 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';
-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 {
+import { gesture } from '@operato/utils/gesture-mixin.js';
+let OxPfpEdit = class OxPfpEdit extends gesture(LitElement) {
     constructor() {
         super(...arguments);
         this.profile = {};
-        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);
+        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 };
+        };
     }
     connectedCallback() {
         super.connectedCallback();
         FileDropHelper.set(this);
-        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('pinch', this.pinchHandler);
+        this.addEventListener('drag', this.dragHandler);
+        this.addEventListener('doubletap', this.doubleTapHandler);
+        this.addEventListener('wheel', this.wheelHandler);
         this.addEventListener('file-drop', this.dropFileHandler);
     }
     disconnectedCallback() {
-        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('pinch', this.pinchHandler);
+        this.removeEventListener('drag', this.dragHandler);
+        this.removeEventListener('doubletap', this.doubleTapHandler);
+        this.removeEventListener('wheel', this.wheelHandler);
         this.removeEventListener('file-drop', this.dropFileHandler);
         super.disconnectedCallback();
     }
@@ -97,103 +103,46 @@ let OxPfpEdit = class OxPfpEdit extends LitElement {
     set value(value) {
         this.profile = value;
     }
-    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;
+    /**
+     * 중심점을 기준으로 확대/축소
+     */
+    zoomAt(clientX, clientY, scale) {
+        const { offsetLeft, offsetTop, offsetWidth: width, offsetHeight: height } = this;
+        const centerX = offsetLeft + width / 2;
+        const centerY = offsetTop + height / 2;
         const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {};
-        const { offsetHeight, offsetWidth } = this;
+        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;
         this.profile = {
-            top: top + (y / offsetHeight) * 100,
-            left: left + (x / offsetWidth) * 100,
-            zoom,
+            top: top - (deltaY / this.offsetHeight) * 100,
+            left: left - (deltaX / this.offsetWidth) * 100,
+            zoom: newZoom,
             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.files = null;
+        this.profile = { left: 0, top: 0, zoom: 1, picture, file: imageFile };
+        fileInput.value = ''; // Clear file input after use
     }
     fit() {
-        this.profile = {
-            ...this.profile,
-            left: 0,
-            top: 0,
-            zoom: 1
-        };
+        // 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
+        }));
     }
     clear() {
         this.profile = {};
@@ -204,9 +153,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] {
@@ -265,7 +214,6 @@ OxPfpEdit.styles = css `
       overflow: hidden;
       background-color: gray;
       color: white;
-
       display: flex;
       align-items: center;
       justify-content: center;
@@ -283,7 +231,6 @@ OxPfpEdit.styles = css `
       position: absolute;
       left: 0;
       top: 0;
-
       display: flex;
       place-content: center;
     }
@@ -303,7 +250,6 @@ 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'\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"]}
+{"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"]}

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 || ''} @dblclick=${() => this.edit.fit()}>
+            ? html `<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
           <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,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"]}
+{"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"]}