Input output target refactoring

README.md

@@ -39,7 +39,7 @@ You can directly download the files and start using the ES6 modules:
 #### ES modules
 
 ```javascript
-import { GPUCurtains } from 'path/to/dist/gpu-curtains.mjs'
+import { GPUCurtains } from 'path/to/dist/esm/index.mjs'
 
 window.addEventListener('load', async () => {
   // set our main GPUCurtains instance

dist/esm/core/DOM/DOMElement.mjs

@@ -0,0 +1,107 @@
+import { resizeManager } from '../../utils/ResizeManager.mjs';
+import { throwError } from '../../utils/utils.mjs';
+
+class DOMElement {
+  /**
+   * DOMElement constructor
+   * @param parameters - {@link DOMElementParams | parameters} used to create our DOMElement
+   */
+  constructor({
+    element = document.body,
+    priority = 1,
+    onSizeChanged = (boundingRect = null) => {
+    },
+    onPositionChanged = (boundingRect = null) => {
+    }
+  } = {}) {
+    if (typeof element === "string") {
+      this.element = document.querySelector(element);
+      if (!this.element) {
+        const notFoundEl = typeof element === "string" ? `'${element}' selector` : `${element} HTMLElement`;
+        throwError(`DOMElement: corresponding ${notFoundEl} not found.`);
+      }
+    } else {
+      this.element = element;
+    }
+    this.priority = priority;
+    this.isResizing = false;
+    this.onSizeChanged = onSizeChanged;
+    this.onPositionChanged = onPositionChanged;
+    this.resizeManager = resizeManager;
+    this.resizeManager.observe({
+      element: this.element,
+      priority: this.priority,
+      callback: () => {
+        this.setSize();
+      }
+    });
+    this.setSize();
+  }
+  /**
+   * Check whether 2 bounding rectangles are equals
+   * @param rect1 - first bounding rectangle
+   * @param rect2 - second bounding rectangle
+   * @returns - whether the rectangles are equals or not
+   */
+  compareBoundingRect(rect1, rect2) {
+    return !["x", "y", "left", "top", "right", "bottom", "width", "height"].some((k) => rect1[k] !== rect2[k]);
+  }
+  /**
+   * Get our element bounding rectangle
+   */
+  get boundingRect() {
+    return this._boundingRect;
+  }
+  /**
+   * Set our element bounding rectangle
+   * @param boundingRect - new bounding rectangle
+   */
+  set boundingRect(boundingRect) {
+    const isSameRect = !!this.boundingRect && this.compareBoundingRect(boundingRect, this.boundingRect);
+    this._boundingRect = {
+      top: boundingRect.top,
+      right: boundingRect.right,
+      bottom: boundingRect.bottom,
+      left: boundingRect.left,
+      width: boundingRect.width,
+      height: boundingRect.height,
+      x: boundingRect.x,
+      y: boundingRect.y
+    };
+    if (!isSameRect) {
+      this.onSizeChanged(this.boundingRect);
+    }
+  }
+  /**
+   * Update our element bounding rectangle because the scroll position has changed
+   * @param delta - scroll delta values along X and Y axis
+   */
+  updateScrollPosition(delta = { x: 0, y: 0 }) {
+    if (this.isResizing)
+      return;
+    this._boundingRect.top += delta.y;
+    this._boundingRect.left += delta.x;
+    if (delta.x || delta.y) {
+      this.onPositionChanged(this.boundingRect);
+    }
+  }
+  /**
+   * Set our element bounding rectangle, either by a value or a getBoundingClientRect call
+   * @param boundingRect - new bounding rectangle
+   */
+  setSize(boundingRect = null) {
+    if (!this.element)
+      return;
+    this.boundingRect = boundingRect ?? this.element.getBoundingClientRect();
+    this.isResizing = false;
+  }
+  /**
+   * Destroy our DOMElement - remove from resize observer and clear throttle timeout
+   */
+  destroy() {
+    this.resizeManager.unobserve(this.element);
+  }
+}
+
+export { DOMElement };
+//# sourceMappingURL=DOMElement.mjs.map

dist/esm/core/DOM/DOMFrustum.mjs

@@ -0,0 +1,113 @@
+import { Box3 } from '../../math/Box3.mjs';
+import { Mat4 } from '../../math/Mat4.mjs';
+
+const defaultDOMFrustumMargins = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+class DOMFrustum {
+  /**
+   * DOMFrustum constructor
+   * @param {DOMFrustumParams} parameters - {@link DOMFrustumParams | parameters} used to create our {@link DOMFrustum}
+   */
+  constructor({
+    boundingBox = new Box3(),
+    modelViewProjectionMatrix = new Mat4(),
+    containerBoundingRect = {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0
+    },
+    DOMFrustumMargins = defaultDOMFrustumMargins,
+    onReEnterView = () => {
+    },
+    onLeaveView = () => {
+    }
+  }) {
+    this.boundingBox = boundingBox;
+    this.modelViewProjectionMatrix = modelViewProjectionMatrix;
+    this.containerBoundingRect = containerBoundingRect;
+    this.DOMFrustumMargins = { ...defaultDOMFrustumMargins, ...DOMFrustumMargins };
+    this.projectedBoundingRect = {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0
+    };
+    this.onReEnterView = onReEnterView;
+    this.onLeaveView = onLeaveView;
+    this.isIntersecting = false;
+    this.shouldUpdate = false;
+  }
+  /**
+   * Set our {@link containerBoundingRect} (called on resize)
+   * @param boundingRect - new bounding rectangle
+   */
+  setContainerBoundingRect(boundingRect) {
+    this.containerBoundingRect = boundingRect;
+  }
+  /**
+   * Get our DOM frustum bounding rectangle, i.e. our {@link containerBoundingRect} with the {@link DOMFrustumMargins} applied
+   * @readonly
+   */
+  get DOMFrustumBoundingRect() {
+    return {
+      top: this.projectedBoundingRect.top - this.DOMFrustumMargins.top,
+      right: this.projectedBoundingRect.right + this.DOMFrustumMargins.right,
+      bottom: this.projectedBoundingRect.bottom + this.DOMFrustumMargins.bottom,
+      left: this.projectedBoundingRect.left - this.DOMFrustumMargins.left
+    };
+  }
+  /**
+   * Applies all {@link modelViewProjectionMatrix} transformations to our {@link boundingBox} and then check against intersections
+   */
+  computeProjectedToDocumentCoords() {
+    const projectedBox = this.boundingBox.applyMat4(this.modelViewProjectionMatrix);
+    projectedBox.min.x = (projectedBox.min.x + 1) * 0.5;
+    projectedBox.max.x = (projectedBox.max.x + 1) * 0.5;
+    projectedBox.min.y = 1 - (projectedBox.min.y + 1) * 0.5;
+    projectedBox.max.y = 1 - (projectedBox.max.y + 1) * 0.5;
+    const { width, height, top, left } = this.containerBoundingRect;
+    this.projectedBoundingRect = {
+      left: projectedBox.min.x * width + left,
+      x: projectedBox.min.x * width + left,
+      top: projectedBox.max.y * height + top,
+      y: projectedBox.max.y * height + top,
+      right: projectedBox.max.x * width + left,
+      bottom: projectedBox.min.y * height + top,
+      width: projectedBox.max.x * width + left - (projectedBox.min.x * width + left),
+      height: projectedBox.min.y * height + top - (projectedBox.max.y * height + top)
+    };
+    this.intersectsContainer();
+  }
+  /**
+   * Check whether our {@link projectedBoundingRect} intersects with our {@link DOMFrustumBoundingRect}
+   */
+  intersectsContainer() {
+    if (Math.round(this.DOMFrustumBoundingRect.right) <= this.containerBoundingRect.left || Math.round(this.DOMFrustumBoundingRect.left) >= this.containerBoundingRect.left + this.containerBoundingRect.width || Math.round(this.DOMFrustumBoundingRect.bottom) <= this.containerBoundingRect.top || Math.round(this.DOMFrustumBoundingRect.top) >= this.containerBoundingRect.top + this.containerBoundingRect.height) {
+      if (this.isIntersecting) {
+        this.onLeaveView();
+      }
+      this.isIntersecting = false;
+    } else {
+      if (!this.isIntersecting) {
+        this.onReEnterView();
+      }
+      this.isIntersecting = true;
+    }
+  }
+}
+
+export { DOMFrustum };
+//# sourceMappingURL=DOMFrustum.mjs.map