withRelativePointer

Adds a movedrelative(props) hook from the pointer service, with props relative to the component's root element $el.

Usage

import { Base, withRelativePointer } from '@studiometa/js-toolkit';

export default class RelativePointer extends withRelativePointer(Base, {
  target: (instance) => instance.$el,
}) {
  static config = {
    name: 'RelativePointer',
    refs: ['item'],
  };

  /**
   * @param {import('@studiometa/js-toolkit').PointerServiceProps} props
   */
  movedrelative(props) {
    this.$refs.item.style.transform = `translate(${props.x}px, ${props.y}px)`;
  }
}

Parameters

• BaseClass (Base): The class to add draggable capabilities to
• options? ({ target?: (instance:Base) => HTMLElement }): Options to choose the target element

Return value

• Base: A child of the given class with draggable capabilities

API

Hooks

movedrelative

The movedrelative hook runs when the user moves the pointer.

Arguments

• props (PointerServiceProps): the pointer service props, relative to the target

Examples

Move a ref element

This decorator gives you the pointer position relative to the component's root element. The following example scales a ref based on the pointer position inside the component's root element.

import { Base, withRelativePointer } from '@studiometa/js-toolkit';

export default class RelativePointer extends withRelativePointer(Base) {
  static config = {
    name: 'RelativePointer',
    refs: ['item'],
  };

  /**
   * @param {import('@studiometa/js-toolkit').PointerServiceProps} props
   */
  movedrelative(props) {
    this.$refs.item.style.transform = `scale(${props.progress.x}, ${props.progress.y})`;
  }
}