@studiometa/js-toolkit 2.0.0-beta.4 → 2.0.0-beta.8

package/services/drag.d.ts

@@ -1,5 +1,5 @@
 /**
- * Use the pointer.
+ * Use the drag service.
  *
  * ```js
  * import { useDrag } from '@studiometa/js-toolkit/services';
@@ -12,10 +12,10 @@
  *
  * @param {HTMLElement} target
  * @param {DragServiceOptions} options
- * @return {ServiceInterface & DragService}
+ * @return {DragService}
  */
-export default function useDrag(target: HTMLElement, options: DragServiceOptions): ServiceInterface & DragService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useDrag(target: HTMLElement, options: DragServiceOptions): DragService;
+export type DragService = import('./index').ServiceInterface<DragServiceProps>;
 export type PointerServiceProps = import('./pointer.js').PointerServiceProps;
 export type DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
 export type DragServiceProps = {
@@ -75,17 +75,3 @@ export type DragServiceProps = {
 export type DragServiceOptions = {
     dampFactor?: number | undefined;
 };
-export type DragService = {
-    /**
-     *   Add a callback function to the service. The key must be the HTML element targeted by the drag.
-     */
-    add: (target: HTMLElement, callback: (props: DragServiceProps) => void, options?: DragServiceOptions) => void;
-    /**
-     *   Remove a callback function to the service.
-     */
-    remove: (target: HTMLElement) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => DragServiceProps;
-};

package/services/drag.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import Service from './Service.js';
 import usePointer from './pointer.js';
@@ -24,36 +24,29 @@ class Drag extends Service {
 
     _defineProperty(this, "id", void 0);
 
-    _defineProperty(this, "target", void 0);
-
-    _defineProperty(this, "mode", void 0);
-
-    _defineProperty(this, "isGrabbing", false);
-
-    _defineProperty(this, "hasInertia", false);
-
-    _defineProperty(this, "x", 0);
-
-    _defineProperty(this, "y", 0);
-
-    _defineProperty(this, "delta", {
-      x: 0,
-      y: 0
-    });
-
-    _defineProperty(this, "origin", {
-      x: 0,
-      y: 0
-    });
-
-    _defineProperty(this, "distance", {
-      x: 0,
-      y: 0
-    });
-
-    _defineProperty(this, "final", {
+    _defineProperty(this, "props", {
+      target: null,
+      mode: undefined,
+      isGrabbing: false,
+      hasInertia: false,
       x: 0,
-      y: 0
+      y: 0,
+      delta: {
+        x: 0,
+        y: 0
+      },
+      origin: {
+        x: 0,
+        y: 0
+      },
+      distance: {
+        x: 0,
+        y: 0
+      },
+      final: {
+        x: 0,
+        y: 0
+      }
     });
 
     _defineProperty(this, "options", {
@@ -62,7 +55,7 @@ class Drag extends Service {
 
     instanceIds += 1;
     this.id = "drag-".concat(instanceIds);
-    this.target = target;
+    this.props.target = target;
     this.options = _objectSpread(_objectSpread({}, this.options), options);
     this.pointerHandler = this.pointerHandler.bind(this);
     this.rafHandler = this.rafHandler.bind(this);
@@ -73,16 +66,16 @@ class Drag extends Service {
     var options = {
       passive: true
     };
-    this.target.addEventListener('mousedown', this, options);
-    this.target.addEventListener('touchstart', this, options);
+    this.props.target.addEventListener('mousedown', this, options);
+    this.props.target.addEventListener('touchstart', this, options);
     var pointer = usePointer();
     pointer.add(this.id, this.pointerHandler);
     return this;
   }
 
   kill() {
-    this.target.removeEventListener('mousemove', this);
-    this.target.removeEventListener('touchmove', this);
+    this.props.target.removeEventListener('mousemove', this);
+    this.props.target.removeEventListener('touchmove', this);
     var pointer = usePointer();
     pointer.remove(this.id);
     return this;
@@ -95,27 +88,27 @@ class Drag extends Service {
   }
 
   start(x, y) {
-    this.x = x;
-    this.y = y;
-    this.origin.x = x;
-    this.origin.y = y;
-    this.delta.x = 0;
-    this.delta.y = 0;
-    this.distance.x = 0;
-    this.distance.y = 0;
-    this.final.x = x;
-    this.final.y = y;
-    this.mode = MODES.START;
-    this.isGrabbing = true;
+    this.props.x = x;
+    this.props.y = y;
+    this.props.origin.x = x;
+    this.props.origin.y = y;
+    this.props.delta.x = 0;
+    this.props.delta.y = 0;
+    this.props.distance.x = 0;
+    this.props.distance.y = 0;
+    this.props.final.x = x;
+    this.props.final.y = y;
+    this.props.mode = MODES.START;
+    this.props.isGrabbing = true;
     this.trigger(this.props);
   }
 
   drop() {
-    this.isGrabbing = false;
-    this.mode = MODES.DROP;
-    this.hasInertia = true;
-    this.final.x = inertiaFinalValue(this.x, this.delta.x, this.options.dampFactor);
-    this.final.y = inertiaFinalValue(this.y, this.delta.y, this.options.dampFactor);
+    this.props.isGrabbing = false;
+    this.props.mode = MODES.DROP;
+    this.props.hasInertia = true;
+    this.props.final.x = inertiaFinalValue(this.props.x, this.props.delta.x, this.options.dampFactor);
+    this.props.final.y = inertiaFinalValue(this.props.y, this.props.delta.y, this.options.dampFactor);
     this.trigger(this.props);
     setTimeout(() => {
       var raf = useRaf();
@@ -126,45 +119,45 @@ class Drag extends Service {
 
   stop() {
     useRaf().remove(this.id);
-    this.hasInertia = false;
-    this.mode = MODES.STOP;
+    this.props.hasInertia = false;
+    this.props.mode = MODES.STOP;
     this.trigger(this.props);
   }
 
   rafHandler() {
-    if (!this.isGrabbing) {
-      this.x += this.delta.x;
-      this.y += this.delta.y;
-      this.distance.x = this.x - this.origin.x;
-      this.distance.y = this.y - this.origin.y;
-      this.delta.x *= this.options.dampFactor;
-      this.delta.y *= this.options.dampFactor;
-
-      if (this.mode !== MODES.INERTIA) {
-        this.mode = MODES.INERTIA;
+    if (!this.props.isGrabbing) {
+      this.props.x += this.props.delta.x;
+      this.props.y += this.props.delta.y;
+      this.props.distance.x = this.props.x - this.props.origin.x;
+      this.props.distance.y = this.props.y - this.props.origin.y;
+      this.props.delta.x *= this.options.dampFactor;
+      this.props.delta.y *= this.options.dampFactor;
+
+      if (this.props.mode !== MODES.INERTIA) {
+        this.props.mode = MODES.INERTIA;
       }
 
       this.trigger(this.props);
 
-      if (Math.abs(this.delta.x) < 0.1 && Math.abs(this.delta.y) < 0.1) {
+      if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
         this.stop();
       }
     }
   }
 
   pointerHandler(props) {
-    if (this.isGrabbing) {
-      this.x = props.x;
-      this.y = props.y;
-      this.delta.x = props.delta.x;
-      this.delta.y = props.delta.y;
-      this.final.x = props.x;
-      this.final.y = props.y;
-      this.distance.x = this.x - this.origin.x;
-      this.distance.y = this.y - this.origin.y;
-
-      if (this.mode !== MODES.DRAG) {
-        this.mode = MODES.DRAG;
+    if (this.props.isGrabbing) {
+      this.props.x = props.x;
+      this.props.y = props.y;
+      this.props.delta.x = props.delta.x;
+      this.props.delta.y = props.delta.y;
+      this.props.final.x = props.x;
+      this.props.final.y = props.y;
+      this.props.distance.x = this.props.x - this.props.origin.x;
+      this.props.distance.y = this.props.y - this.props.origin.y;
+
+      if (this.props.mode !== MODES.DRAG) {
+        this.props.mode = MODES.DRAG;
       }
 
       this.trigger(this.props);
@@ -175,19 +168,8 @@ class Drag extends Service {
     }
   }
 
-  get props() {
-    return {
-      target: this.target,
-      mode: this.mode,
-      isGrabbing: this.isGrabbing,
-      hasInertia: this.hasInertia,
-      x: this.x,
-      y: this.y,
-      delta: this.delta,
-      origin: this.origin,
-      distance: this.distance,
-      final: this.final
-    };
+  updateProps() {
+    return this.props;
   }
 
 }
@@ -197,20 +179,15 @@ export default function useDrag(target, options) {
   var drag = instances.get(target);
 
   if (!drag) {
-    drag = new Drag(target, options);
+    var instance = new Drag(target, options);
+    drag = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
     instances.set(target, drag);
   }
 
-  var add = drag.add.bind(drag);
-  var remove = drag.remove.bind(drag);
-  var has = drag.has.bind(drag);
-
-  var props = () => drag.props;
-
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
+  return drag;
 }

package/services/index.d.ts

@@ -1,4 +1,4 @@
-export type ServiceInterface = {
+export type ServiceInterface<T> = {
     /**
      *   Remove a function from the resize service by its key.
      */
@@ -6,11 +6,15 @@ export type ServiceInterface = {
     /**
      *   Add a callback to the service. The callback will receive the current service props as parameter.
      */
-    add: (key: string, cb: (props: any) => void) => boolean;
+    add: (key: string, cb: (props: T) => void) => void;
     /**
      *   Test if the service has alreaydy a callback for the given key.
      */
     has: (key: string) => boolean;
+    /**
+     *   Get the service's props.
+     */
+    props: () => T;
 };
 import useKey from "./key.js";
 import usePointer from "./pointer.js";

package/services/key.d.ts

@@ -9,13 +9,14 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & KeyService}
+ * @return {KeyService}
  */
-export default function useKey(): ServiceInterface & KeyService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useKey(): KeyService;
+export type KeyService = import('./index').ServiceInterface<KeyServiceProps>;
 export type KeyServiceProps = {
     event: KeyboardEvent;
     triggered: number;
+    direction: 'up' | 'down' | 'none';
     isUp: boolean;
     isDown: boolean;
     ENTER: boolean;
@@ -27,13 +28,3 @@ export type KeyServiceProps = {
     RIGHT: boolean;
     DOWN: boolean;
 };
-export type KeyService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: KeyServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => KeyServiceProps;
-};

package/services/key.js

@@ -1,9 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import Service from './Service.js';
 import keyCodes from '../utils/keyCodes.js';
 
@@ -11,79 +6,83 @@ class Key extends Service {
   constructor() {
     super(...arguments);
 
-    _defineProperty(this, "event", {});
-
-    _defineProperty(this, "triggered", 0);
-
-    _defineProperty(this, "previousEvent", {});
+    _defineProperty(this, "previousEvent", void 0);
+
+    _defineProperty(this, "props", {
+      event: null,
+      triggered: 0,
+      isUp: false,
+      isDown: false,
+      ENTER: false,
+      SPACE: false,
+      TAB: false,
+      ESC: false,
+      LEFT: false,
+      UP: false,
+      RIGHT: false,
+      DOWN: false,
+      direction: 'none'
+    });
   }
 
   init() {
-    this.handler = event => {
-      this.event = event;
-      this.trigger(this.props);
-    };
+    document.addEventListener('keydown', this);
+    document.addEventListener('keyup', this);
+  }
 
-    document.addEventListener('keydown', this.handler, {
-      passive: false
-    });
-    document.addEventListener('keyup', this.handler, {
-      passive: false
-    });
-    return this;
+  handleEvent(event) {
+    this.updateProps(event);
+    this.trigger(this.props);
   }
 
   kill() {
-    document.removeEventListener('keydown', this.handler);
-    document.removeEventListener('keyup', this.handler);
-    return this;
+    document.removeEventListener('keydown', this);
+    document.removeEventListener('keyup', this);
   }
 
-  get props() {
-    var keys = Object.entries(keyCodes).reduce((acc, _ref) => {
+  updateProps(event) {
+    var _this$previousEvent;
+
+    this.props.event = event;
+    Object.entries(keyCodes).forEach(_ref => {
       var [name, code] = _ref;
-      acc[name] = code === this.event.keyCode;
-      return acc;
-    }, {});
+      this.props[name] = code === event.keyCode;
+    });
 
-    if (!this.previousEvent.type) {
-      this.triggered = 0;
+    if (!this.previousEvent) {
+      this.props.triggered = 0;
     }
 
-    if (this.event.type === 'keydown' && this.previousEvent.type === 'keydown') {
-      this.triggered += 1;
+    if (this.props.event.type === 'keydown' && ((_this$previousEvent = this.previousEvent) === null || _this$previousEvent === void 0 ? void 0 : _this$previousEvent.type) === 'keydown') {
+      this.props.triggered += 1;
     } else {
-      this.triggered = 1;
+      this.props.triggered = 1;
     }
 
-    this.previousEvent = this.event;
-    return _objectSpread({
-      event: this.event,
-      triggered: this.triggered,
-      direction: this.event.type === 'keydown' ? 'down' : 'up',
-      isUp: this.event.type === 'keyup',
-      isDown: this.event.type === 'keydown'
-    }, keys);
+    this.previousEvent = this.props.event;
+    this.props.direction = this.props.event.type === 'keydown' ? 'down' : 'up';
+    this.props.isUp = this.props.event.type === 'keyup';
+    this.props.isDown = this.props.event.type === 'keydown';
+    return this.props;
   }
 
 }
 
-var key = null;
+var instance;
+var key;
 export default function useKey() {
   if (!key) {
-    key = new Key();
-  }
-
-  var add = key.add.bind(key);
-  var remove = key.remove.bind(key);
-  var has = key.has.bind(key);
+    if (!instance) {
+      instance = new Key();
+    }
 
-  var props = () => key.props;
+    key = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
+  }
 
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
+  return key;
 }

package/services/load.d.ts

@@ -9,20 +9,10 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & LoadService}
+ * @return {LoadService}
  */
-export default function useLoad(): ServiceInterface & LoadService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useLoad(): LoadService;
+export type LoadService = import('./index').ServiceInterface<LoadServiceProps>;
 export type LoadServiceProps = {
     time: DOMHighResTimeStamp;
 };
-export type LoadService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: LoadServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => LoadServiceProps;
-};

package/services/load.js

@@ -1,44 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import Service from './Service.js';
 
 class Load extends Service {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "props", {
+      time: window.performance.now()
+    });
+  }
+
   init() {
-    this.handler = () => {
-      this.trigger(this.props);
-    };
+    window.addEventListener('load', this);
+  }
 
-    window.addEventListener('load', this.handler);
-    return this;
+  handleEvent() {
+    this.updateProps();
+    this.trigger(this.props);
   }
 
   kill() {
-    window.removeEventListener('load', this.handler);
-    return this;
+    window.removeEventListener('load', this);
   }
 
-  get props() {
-    return {};
+  updateProps() {
+    this.props.time = window.performance.now();
+    return this.props;
   }
 
 }
 
-var instance = null;
+var instance;
+var load;
 export default function useLoad() {
-  if (!instance) {
-    instance = new Load();
-  }
-
-  var add = instance.add.bind(instance);
-  var remove = instance.remove.bind(instance);
-  var has = instance.has.bind(instance);
-
-  function props() {
-    return instance.props;
+  if (!load) {
+    if (!instance) {
+      instance = new Load();
+    }
+
+    load = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
   }
 
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
+  return load;
 }

package/services/pointer.d.ts

@@ -9,10 +9,11 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & PointerService}
+ * @todo Add element as parameter to get the pointer position relatively from.
+ * @return {PointerService}
  */
-export default function usePointer(): ServiceInterface & PointerService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function usePointer(): PointerService;
+export type PointerService = import('./index').ServiceInterface<PointerServiceProps>;
 export type PointerServiceProps = {
     event: MouseEvent | TouchEvent;
     isDown: boolean;
@@ -39,13 +40,3 @@ export type PointerServiceProps = {
         y: number;
     };
 };
-export type PointerService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: PointerServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => PointerServiceProps;
-};