@studiometa/js-toolkit 2.0.0-beta.1 → 2.0.0-beta.13

package/services/resize.js

@@ -1,75 +1,75 @@
-import Service from './Service.js';
-import debounce from '../utils/debounce.js';
-
+import Service from "./Service.js";
+import debounce from "../utils/debounce.js";
 class Resize extends Service {
+  props = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    ratio: window.innerWidth / window.innerHeight,
+    orientation: "square"
+  };
+  handler;
   init() {
     this.handler = debounce(() => {
+      this.updateProps();
       this.trigger(this.props);
     }).bind(this);
-    window.addEventListener('resize', this.handler);
+    window.addEventListener("resize", this.handler);
     return this;
   }
-
   kill() {
-    window.removeEventListener('resize', this.handler);
-    return this;
+    window.removeEventListener("resize", this.handler);
   }
-
-  get props() {
-    var props = {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      ratio: window.innerWidth / window.innerHeight,
-      orientation: 'square'
-    };
-
-    if (props.ratio > 1) {
-      props.orientation = 'landscape';
+  updateProps() {
+    this.props.width = window.innerWidth;
+    this.props.height = window.innerHeight;
+    this.props.ratio = window.innerWidth / window.innerHeight;
+    this.props.orientation = "square";
+    if (this.props.ratio > 1) {
+      this.props.orientation = "landscape";
     }
-
-    if (props.ratio < 1) {
-      props.orientation = 'portrait';
+    if (this.props.ratio < 1) {
+      this.props.orientation = "portrait";
     }
-
     if (this.breakpointElement) {
-      props.breakpoint = this.breakpoint;
-      props.breakpoints = this.breakpoints;
+      this.props.breakpoint = this.breakpoint;
+      this.props.breakpoints = this.breakpoints;
+    } else {
+      this.props.breakpoint = void 0;
+      this.props.breakpoints = void 0;
     }
-
-    return props;
+    return this.props;
   }
-
   get breakpointElement() {
-    return document.querySelector('[data-breakpoint]') || null;
+    return document.querySelector("[data-breakpoint]");
   }
-
   get breakpoint() {
-    return window.getComputedStyle(this.breakpointElement, '::before').getPropertyValue('content').replace(/"/g, '');
+    return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replace(/"/g, "");
   }
-
   get breakpoints() {
-    var breakpoints = window.getComputedStyle(this.breakpointElement, '::after').getPropertyValue('content').replace(/"/g, '');
-    return breakpoints.split(',');
+    const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replace(/"/g, "");
+    return breakpoints.split(",");
   }
-
 }
-
-var resize = null;
-export default function useResize() {
+let instance;
+let resize;
+function useResize() {
   if (!resize) {
-    resize = new Resize();
+    if (!instance) {
+      instance = new Resize();
+    }
+    const add = instance.add.bind(instance);
+    const remove = instance.remove.bind(instance);
+    const has = instance.has.bind(instance);
+    const props = instance.updateProps.bind(instance);
+    resize = {
+      add,
+      remove,
+      has,
+      props
+    };
   }
-
-  var add = resize.add.bind(resize);
-  var remove = resize.remove.bind(resize);
-  var has = resize.has.bind(resize);
-
-  var props = () => resize.props;
-
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
-}
+  return resize;
+}
+export {
+  useResize as default
+};

package/services/scroll.cjs

@@ -0,0 +1,129 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/services/scroll.js
+var scroll_exports = {};
+__export(scroll_exports, {
+  default: () => useScroll
+});
+var import_Service = __toESM(require("./Service.cjs"), 1);
+var import_debounce = __toESM(require("../utils/debounce.cjs"), 1);
+var Scroll = class extends import_Service.default {
+  props = {
+    x: window.pageXOffset,
+    y: window.pageYOffset,
+    changed: {
+      x: false,
+      y: false
+    },
+    last: {
+      x: window.pageXOffset,
+      y: window.pageYOffset
+    },
+    delta: {
+      x: 0,
+      y: 0
+    },
+    max: {
+      x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
+      y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight
+    },
+    progress: {
+      x: 0,
+      y: 0
+    },
+    direction: {
+      x: "NONE",
+      y: "NONE"
+    }
+  };
+  init() {
+    this.updateProps();
+    document.addEventListener("scroll", this, { passive: true, capture: true });
+    return this;
+  }
+  get debouncedHandler() {
+    const debounced = (0, import_debounce.default)(() => {
+      this.updateProps();
+      this.trigger(this.props);
+    }, 100);
+    Object.defineProperty(this, "debouncedHandler", {
+      value: debounced
+    });
+    return debounced;
+  }
+  handleEvent() {
+    this.updateProps();
+    this.trigger(this.props);
+    this.debouncedHandler();
+  }
+  kill() {
+    document.removeEventListener("scroll", this);
+    return this;
+  }
+  updateProps() {
+    const yLast = this.props.y;
+    const xLast = this.props.x;
+    if (window.pageYOffset !== this.props.y) {
+      this.props.y = window.pageYOffset;
+    }
+    if (window.pageXOffset !== this.props.x) {
+      this.props.x = window.pageXOffset;
+    }
+    this.props.changed.x = this.props.x !== xLast;
+    this.props.changed.y = this.props.y !== yLast;
+    this.props.last.x = xLast;
+    this.props.last.y = yLast;
+    this.props.delta.x = this.props.x - xLast;
+    this.props.delta.y = this.props.y - yLast;
+    this.props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
+    this.props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
+    this.props.progress.x = this.props.max.x === 0 ? 1 : this.props.x / this.props.max.x;
+    this.props.progress.y = this.props.max.y === 0 ? 1 : this.props.y / this.props.max.y;
+    this.props.direction.x = this.props.x > xLast ? "RIGHT" : this.props.x < xLast ? "LEFT" : "NONE";
+    this.props.direction.y = this.props.y > yLast ? "DOWN" : this.props.y < yLast ? "UP" : "NONE";
+    return this.props;
+  }
+};
+var instance;
+var scroll;
+function useScroll() {
+  if (!scroll) {
+    if (!instance) {
+      instance = new Scroll();
+    }
+    scroll = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
+  }
+  return scroll;
+}
+module.exports = __toCommonJS(scroll_exports);

package/services/scroll.d.ts

@@ -9,10 +9,10 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & ScrollService}
+ * @return {ScrollService}
  */
-export default function useScroll(): ServiceInterface & ScrollService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useScroll(): ScrollService;
+export type ScrollService = import('./index').ServiceInterface<ScrollServiceProps>;
 export type ScrollServiceProps = {
     x: number;
     y: number;
@@ -41,13 +41,3 @@ export type ScrollServiceProps = {
         y: 'UP' | 'DOWN' | 'NONE';
     };
 };
-export type ScrollService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: ScrollServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => ScrollServiceProps;
-};

package/services/scroll.js

@@ -1,112 +1,98 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import Service from './Service.js';
-import debounce from '../utils/debounce.js';
-
+import Service from "./Service.js";
+import debounce from "../utils/debounce.js";
 class Scroll extends Service {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "y", window.pageYOffset);
-
-    _defineProperty(this, "yLast", window.pageYOffset);
-
-    _defineProperty(this, "x", window.pageXOffset);
-
-    _defineProperty(this, "xLast", window.pageXOffset);
-  }
-
+  props = {
+    x: window.pageXOffset,
+    y: window.pageYOffset,
+    changed: {
+      x: false,
+      y: false
+    },
+    last: {
+      x: window.pageXOffset,
+      y: window.pageYOffset
+    },
+    delta: {
+      x: 0,
+      y: 0
+    },
+    max: {
+      x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
+      y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight
+    },
+    progress: {
+      x: 0,
+      y: 0
+    },
+    direction: {
+      x: "NONE",
+      y: "NONE"
+    }
+  };
   init() {
-    document.addEventListener('scroll', this, {
-      passive: true,
-      capture: true
-    });
+    this.updateProps();
+    document.addEventListener("scroll", this, { passive: true, capture: true });
     return this;
   }
-
   get debouncedHandler() {
-    var debounced = debounce(() => {
+    const debounced = debounce(() => {
+      this.updateProps();
       this.trigger(this.props);
-    }, 0);
-    Object.defineProperty(this, 'debouncedHandler', {
+    }, 100);
+    Object.defineProperty(this, "debouncedHandler", {
       value: debounced
     });
     return debounced;
   }
-
   handleEvent() {
+    this.updateProps();
     this.trigger(this.props);
     this.debouncedHandler();
   }
-
   kill() {
-    document.removeEventListener('scroll', this);
+    document.removeEventListener("scroll", this);
     return this;
   }
-
-  get props() {
-    this.yLast = this.y;
-    this.xLast = this.x;
-
-    if (window.pageYOffset !== this.y) {
-      this.y = window.pageYOffset;
+  updateProps() {
+    const yLast = this.props.y;
+    const xLast = this.props.x;
+    if (window.pageYOffset !== this.props.y) {
+      this.props.y = window.pageYOffset;
     }
-
-    if (window.pageXOffset !== this.x) {
-      this.x = window.pageXOffset;
+    if (window.pageXOffset !== this.props.x) {
+      this.props.x = window.pageXOffset;
     }
-
-    return {
-      x: this.x,
-      y: this.y,
-      changed: {
-        x: this.x !== this.xLast,
-        y: this.y !== this.yLast
-      },
-      last: {
-        x: this.xLast,
-        y: this.yLast
-      },
-      delta: {
-        x: this.x - this.xLast,
-        y: this.y - this.yLast
-      },
-      progress: {
-        x: this.max.x === 0 ? 1 : this.x / this.max.x,
-        y: this.max.y === 0 ? 1 : this.y / this.max.y
-      },
-      direction: {
-        x: this.x > this.xLast ? 'RIGHT' : this.x < this.xLast ? 'LEFT' : 'NONE',
-        y: this.y > this.yLast ? 'DOWN' : this.y < this.yLast ? 'UP' : 'NONE'
-      },
-      max: this.max
-    };
+    this.props.changed.x = this.props.x !== xLast;
+    this.props.changed.y = this.props.y !== yLast;
+    this.props.last.x = xLast;
+    this.props.last.y = yLast;
+    this.props.delta.x = this.props.x - xLast;
+    this.props.delta.y = this.props.y - yLast;
+    this.props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
+    this.props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
+    this.props.progress.x = this.props.max.x === 0 ? 1 : this.props.x / this.props.max.x;
+    this.props.progress.y = this.props.max.y === 0 ? 1 : this.props.y / this.props.max.y;
+    this.props.direction.x = this.props.x > xLast ? "RIGHT" : this.props.x < xLast ? "LEFT" : "NONE";
+    this.props.direction.y = this.props.y > yLast ? "DOWN" : this.props.y < yLast ? "UP" : "NONE";
+    return this.props;
   }
-
-  get max() {
-    return {
-      x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
-      y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight
-    };
-  }
-
 }
-
-var scroll = null;
-export default function useScroll() {
+let instance;
+let scroll;
+function useScroll() {
   if (!scroll) {
-    scroll = new Scroll();
+    if (!instance) {
+      instance = new Scroll();
+    }
+    scroll = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
   }
-
-  var add = scroll.add.bind(scroll);
-  var remove = scroll.remove.bind(scroll);
-  var has = scroll.has.bind(scroll);
-
-  var props = () => scroll.props;
-
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
-}
+  return scroll;
+}
+export {
+  useScroll as default
+};

package/utils/collide/boundingRectToCircle.cjs

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/utils/collide/boundingRectToCircle.js
+var boundingRectToCircle_exports = {};
+__export(boundingRectToCircle_exports, {
+  default: () => boundingRectToCircle
+});
+function boundingRectToCircle({ x, y, width, height }, force = false) {
+  if (width !== height && !force)
+    throw new Error("Initial DOMElement is not a square. Please use the force mode.");
+  return {
+    x: x + width / 2,
+    y: y + height / 2,
+    radius: (width + height) / 4
+  };
+}
+module.exports = __toCommonJS(boundingRectToCircle_exports);

package/utils/collide/boundingRectToCircle.d.ts

@@ -11,7 +11,7 @@
  * @param {Boolean} force Force usage of non-square DOMElements
  * @return {Circle} Circle object that can be used in collides functions
  */
-export default function collidePointRect({ x, y, width, height }: Partial<DOMRect>, force?: boolean): Circle;
+export default function boundingRectToCircle({ x, y, width, height }: Partial<DOMRect>, force?: boolean): Circle;
 export type Circle = {
     /**
      * Circle's x position

package/utils/collide/boundingRectToCircle.js

@@ -1,15 +1,12 @@
-export default function collidePointRect(_ref) {
-  var {
-    x,
-    y,
-    width,
-    height
-  } = _ref;
-  var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (width !== height && !force) throw new Error('Initial DOMElement is not a square. Please use the force mode.');
+function boundingRectToCircle({ x, y, width, height }, force = false) {
+  if (width !== height && !force)
+    throw new Error("Initial DOMElement is not a square. Please use the force mode.");
   return {
     x: x + width / 2,
     y: y + height / 2,
     radius: (width + height) / 4
   };
-}
+}
+export {
+  boundingRectToCircle as default
+};

package/utils/collide/collideCircleCircle.cjs

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/utils/collide/collideCircleCircle.js
+var collideCircleCircle_exports = {};
+__export(collideCircleCircle_exports, {
+  default: () => collideCircleCircle
+});
+function collideCircleCircle(circle1, circle2) {
+  const distX = circle1.x - circle2.x;
+  const distY = circle1.y - circle2.y;
+  const distance = Math.sqrt(distX * distX + distY * distY);
+  if (distance <= circle1.radius + circle2.radius) {
+    return true;
+  }
+  return false;
+}
+module.exports = __toCommonJS(collideCircleCircle_exports);

package/utils/collide/collideCircleCircle.js

@@ -1,11 +1,12 @@
-export default function collideCircleCircle(circle1, circle2) {
-  var distX = circle1.x - circle2.x;
-  var distY = circle1.y - circle2.y;
-  var distance = Math.sqrt(distX * distX + distY * distY);
-
+function collideCircleCircle(circle1, circle2) {
+  const distX = circle1.x - circle2.x;
+  const distY = circle1.y - circle2.y;
+  const distance = Math.sqrt(distX * distX + distY * distY);
   if (distance <= circle1.radius + circle2.radius) {
     return true;
   }
-
   return false;
-}
+}
+export {
+  collideCircleCircle as default
+};

package/utils/collide/collideCircleRect.cjs

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/utils/collide/collideCircleRect.js
+var collideCircleRect_exports = {};
+__export(collideCircleRect_exports, {
+  default: () => collideCircleRect
+});
+function collideCircleRect(circle, rect) {
+  let testX = circle.x;
+  let testY = circle.y;
+  if (circle.x < rect.x) {
+    testX = rect.x;
+  } else if (circle.x > rect.x + rect.width) {
+    testX = rect.x + rect.width;
+  }
+  if (circle.y < rect.y) {
+    testY = rect.y;
+  } else if (circle.y > rect.y + rect.height) {
+    testY = rect.y + rect.height;
+  }
+  const distX = circle.x - testX;
+  const distY = circle.y - testY;
+  const distance = Math.sqrt(distX * distX + distY * distY);
+  if (distance <= circle.radius) {
+    return true;
+  }
+  return false;
+}
+module.exports = __toCommonJS(collideCircleRect_exports);