@zenvor/view360 4.0.0-beta.7-fork.1

package/src/control/input/PointerInput.ts

@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Component from "@egjs/component";
+import * as BROWSER from "../../const/browser";
+import { CONTROL_EVENTS } from "../../const/internal";
+import { InputEvents } from "../../type/internal";
+
+class PointerInput extends Component<InputEvents<{ x: number, y: number }, PointerEvent>> {
+  private _el: HTMLElement | null;
+  private _prevPos: [number, number];
+
+  public constructor() {
+    super();
+
+    this._el = null;
+    this._prevPos = [0, 0];
+  }
+
+  public enable(element: HTMLElement) {
+    if (this._el) return;
+
+    element.addEventListener(BROWSER.EVENTS.POINTER_DOWN, this._onPointerDown);
+    element.addEventListener(BROWSER.EVENTS.POINTER_CANCEL, this._onPointerCancel);
+
+    this._el = element;
+  }
+
+  public disable() {
+    const el = this._el;
+    if (!el) return;
+
+    el.removeEventListener(BROWSER.EVENTS.POINTER_DOWN, this._onPointerDown);
+    this._clearSubevents(el);
+
+    this._el = null;
+  }
+
+  private _clearSubevents(el: HTMLElement) {
+    el.removeEventListener(BROWSER.EVENTS.POINTER_MOVE, this._onPointerMove);
+    el.removeEventListener(BROWSER.EVENTS.POINTER_UP, this._onPointerUp);
+  }
+
+  private _onPointerDown = (evt: PointerEvent) => {
+    const el = this._el;
+
+    if (!el || !evt.isPrimary) return;
+
+    if (el.focus) {
+      el.focus();
+    } else {
+      window.focus();
+    }
+
+    this._prevPos[0] = evt.clientX;
+    this._prevPos[1] = evt.clientY;
+
+    el.setPointerCapture(evt.pointerId);
+    el.addEventListener(BROWSER.EVENTS.POINTER_MOVE, this._onPointerMove);
+    el.addEventListener(BROWSER.EVENTS.POINTER_UP, this._onPointerUp);
+
+    this.trigger(CONTROL_EVENTS.INPUT_START, {
+      srcEvent: evt,
+      isTouch: false,
+      isKeyboard: false
+    });
+  };
+
+  private _onPointerMove = (evt: PointerEvent) => {
+    if (!evt.isPrimary) return;
+
+    evt.preventDefault();
+
+    const x = evt.clientX;
+    const y = evt.clientY;
+    const prevPos = this._prevPos;
+    const deltaX = x - prevPos[0];
+    const deltaY = y - prevPos[1];
+
+    this.trigger(CONTROL_EVENTS.CHANGE, {
+      delta: {
+        x: deltaX,
+        y: deltaY
+      },
+      isTouch: false,
+      isKeyboard: false
+    });
+
+    prevPos[0] = x;
+    prevPos[1] = y;
+  };
+
+  private _onPointerUp = (evt: PointerEvent) => {
+    const el = this._el;
+    if (!el || !evt.isPrimary) return;
+
+    this._prevPos[0] = 0;
+    this._prevPos[1] = 0;
+
+    this._clearSubevents(el);
+
+    this.trigger(CONTROL_EVENTS.INPUT_END, {
+      isTouch: false,
+      isKeyboard: false,
+      scrolling: false
+    });
+  };
+
+  private _onPointerCancel = (evt: PointerEvent) => {
+    const el = this._el;
+    if (!el || !evt.isPrimary) return;
+
+    this._clearSubevents(el);
+  };
+}
+
+export default PointerInput;

package/src/control/input/TouchInput.ts

@@ -0,0 +1,138 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Component from "@egjs/component";
+import * as BROWSER from "../../const/browser";
+import { CONTROL_EVENTS } from "../../const/internal";
+import { InputEvents } from "../../type/internal";
+import { isFullscreen } from "../../utils";
+
+class TouchInput extends Component<InputEvents<{ x: number, y: number }, TouchEvent>> {
+  private _el: HTMLElement | null;
+  private _prevPos: [number, number];
+  private _isFirstTouch: boolean;
+  private _scrolling: boolean;
+  private _scrollable: boolean;
+
+  public get scrollable() { return this._scrollable; }
+  public set scrollable(val: boolean) { this._scrollable = val; }
+
+  public constructor() {
+    super();
+
+    this._el = null;
+    this._prevPos = [0, 0];
+    this._isFirstTouch = false;
+    this._scrolling = false;
+    this._scrollable = false;
+  }
+
+  public enable(element: HTMLElement) {
+    if (this._el) return;
+
+    element.addEventListener(BROWSER.EVENTS.TOUCH_START, this._onTouchStart, { passive: false });
+    element.addEventListener(BROWSER.EVENTS.TOUCH_MOVE, this._onTouchMove, { passive: false });
+    element.addEventListener(BROWSER.EVENTS.TOUCH_END, this._onTouchEnd);
+
+    this._el = element;
+  }
+
+  public disable() {
+    const element = this._el;
+    if (!element) return;
+
+    element.removeEventListener(BROWSER.EVENTS.TOUCH_START, this._onTouchStart);
+    element.removeEventListener(BROWSER.EVENTS.TOUCH_MOVE, this._onTouchMove);
+    element.removeEventListener(BROWSER.EVENTS.TOUCH_END, this._onTouchEnd);
+
+    this._el = null;
+  }
+
+  private _onTouchStart = (evt: TouchEvent) => {
+    if (evt.touches.length > 1 || this._scrolling) return;
+
+    const touch = evt.touches[0];
+
+    this._isFirstTouch = true;
+    this._prevPos[0] = touch.clientX;
+    this._prevPos[1] = touch.clientY;
+
+    this.trigger(CONTROL_EVENTS.INPUT_START, {
+      srcEvent: evt,
+      isTouch: true,
+      isKeyboard: false
+    });
+  };
+
+  private _onTouchMove = (evt: TouchEvent) => {
+    // Only the one finger motion should be considered
+    if (evt.touches.length > 1 || this._scrolling) return;
+
+    const touch = evt.touches[0];
+    const scrollable = this._scrollable;
+    const prevPos = this._prevPos;
+
+    const x = touch.clientX;
+    const y = touch.clientY;
+    const deltaX = x - prevPos[0];
+    const deltaY = y - prevPos[1];
+
+    if (this._isFirstTouch) {
+      if (scrollable && !isFullscreen()) {
+        if (Math.abs(deltaY) > Math.abs(deltaX)) {
+          // Assume Scrolling
+          this._scrolling = true;
+          return;
+        }
+      }
+
+      this._isFirstTouch = false;
+    }
+
+    if (evt.cancelable !== false) {
+      evt.preventDefault();
+    }
+
+    this.trigger(CONTROL_EVENTS.CHANGE, {
+      delta: {
+        x: deltaX,
+        y: deltaY
+      },
+      isTouch: true,
+      isKeyboard: false
+    });
+
+    prevPos[0] = x;
+    prevPos[1] = y;
+  };
+
+  private _onTouchEnd = (evt: TouchEvent) => {
+    if (evt.touches.length !== 0) return;
+
+    const touch = evt.touches[0];
+    const prevPos = this._prevPos;
+
+    if (touch) {
+      prevPos[0] = touch.clientX;
+      prevPos[1] = touch.clientY;
+    } else {
+      prevPos[0] = 0;
+      prevPos[1] = 0;
+
+      this.trigger(CONTROL_EVENTS.INPUT_END, {
+        isTouch: true,
+        isKeyboard: false,
+        scrolling: this._scrolling
+      });
+    }
+
+    if (evt.cancelable !== false) {
+      evt.preventDefault();
+    }
+
+    this._scrolling = false;
+  };
+}
+
+export default TouchInput;

package/src/control/input/WheelInput.ts

@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Component from "@egjs/component";
+import * as BROWSER from "../../const/browser";
+import { CONTROL_EVENTS, DEFAULT_ANIMATION_DURATION } from "../../const/internal";
+import { InputEvents } from "../../type/internal";
+
+class WheelInput extends Component<InputEvents<number, WheelEvent>> {
+  private _el: HTMLElement | null;
+  private _scrollable: boolean;
+  private _baseScale: number;
+  private _inputTimer: number;
+
+  public get scrollable() { return this._scrollable; }
+  public set scrollable(val: boolean) { this._scrollable = val; }
+
+  public constructor() {
+    super();
+
+    this._el = null;
+    this._baseScale = 0.04;
+    this._scrollable = false;
+    this._inputTimer = -1;
+  }
+
+  public enable(element: HTMLElement) {
+    if (this._el) return;
+
+    element.addEventListener(BROWSER.EVENTS.WHEEL, this._onWheel, { passive: false, capture: false });
+
+    this._el = element;
+    this._clearTimer();
+  }
+
+  public disable() {
+    const element = this._el;
+    if (!element) return;
+
+    element.removeEventListener(BROWSER.EVENTS.WHEEL, this._onWheel, false);
+
+    this._el = null;
+    this._clearTimer();
+  }
+
+  private _onWheel = (evt: WheelEvent) => {
+    const scrollable = this._scrollable;
+
+    if (evt.deltaY === 0 || scrollable) return;
+
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    if (this._inputTimer < 0) {
+      this.trigger(CONTROL_EVENTS.INPUT_START, {
+        srcEvent: evt,
+        isTouch: false,
+        isKeyboard: false
+      });
+    } else {
+      this._clearTimer();
+    }
+
+    const delta = this._baseScale * evt.deltaY;
+
+    this.trigger(CONTROL_EVENTS.CHANGE, {
+      delta,
+      isTouch: false,
+      isKeyboard: false
+    });
+
+    this._inputTimer = window.setTimeout(() => {
+      this.trigger(CONTROL_EVENTS.INPUT_END, {
+        isTouch: false,
+        isKeyboard: false,
+        scrolling: false
+      });
+      this._inputTimer = -1;
+    }, DEFAULT_ANIMATION_DURATION);
+  };
+
+  private _clearTimer() {
+    window.clearTimeout(this._inputTimer);
+    this._inputTimer = -1;
+  }
+}
+
+export default WheelInput;

package/src/core/AutoResizer.ts

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import * as BROWSER from "../const/browser";
+
+/**
+ * Automatic resizer that uses both ResizeObserver and window resize event
+ */
+class AutoResizer {
+  private _enabled: boolean;
+  private _resizeObserver: ResizeObserver | null;
+  private _useResizeObserver: boolean;
+  private _onResize: () => any;
+
+  public get useResizeObserver() { return this._useResizeObserver; }
+
+  /**
+   * Returns whether AutoResizer is enabled
+   */
+  public get enabled() { return this._enabled; }
+
+  /** */
+  public constructor(useResizeObserver: boolean, onResize: () => any) {
+    this._useResizeObserver = useResizeObserver;
+
+    this._enabled = false;
+    this._resizeObserver = null;
+    this._onResize = onResize;
+  }
+
+  /**
+   * Enable resizer
+   */
+  public enable(element: HTMLElement): this {
+    if (this._enabled) {
+      this.disable();
+    }
+
+    if (this._useResizeObserver && !!window.ResizeObserver) {
+      const bbox = element.getBoundingClientRect();
+      const resizeImmediate = bbox.width !== 0 || bbox.height !== 0;
+
+      const resizeObserver = new ResizeObserver(resizeImmediate ? this._skipFirstResize : this._onResize);
+
+      resizeObserver.observe(element);
+
+      this._resizeObserver = resizeObserver;
+    } else {
+      window.addEventListener(BROWSER.EVENTS.RESIZE, this._onResize);
+    }
+
+    this._enabled = true;
+
+    return this;
+  }
+
+  /**
+   * Disable resizer
+   */
+  public disable(): this {
+    if (!this._enabled) return this;
+
+    const resizeObserver = this._resizeObserver;
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      this._resizeObserver = null;
+    } else {
+      window.removeEventListener(BROWSER.EVENTS.RESIZE, this._onResize);
+    }
+
+    this._enabled = false;
+
+    return this;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _skipFirstResize = (() => {
+    let isFirstResize = true;
+
+    return (() => {
+      if (isFirstResize) {
+        isFirstResize = false;
+
+        return;
+      }
+      this._onResize();
+    });
+  })();
+}
+
+export default AutoResizer;