How to use pointer-tracker - 3 common examples

To help you get started, we’ve selected a few pointer-tracker examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github GoogleChromeLabs / squoosh / src / components / Output / custom-els / PinchZoom / index.ts View on Github external
constructor() {
    super();

    // Watch for children changes.
    // Note this won't fire for initial contents,
    // so _stageElChange is also called in connectedCallback.
    new MutationObserver(() => this._stageElChange())
      .observe(this, { childList: true });

    // Watch for pointers
    const pointerTracker: PointerTracker = new PointerTracker(this, {
      start: (pointer, event) => {
        // We only want to track 2 pointers at most
        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl) return false;
        event.preventDefault();
        return true;
      },
      move: (previousPointers) => {
        this._onPointerMove(previousPointers, pointerTracker.currentPointers);
      },
    });

    this.addEventListener('wheel', event => this._onWheel(event));
  }
github GoogleChromeLabs / squoosh / src / components / Output / custom-els / TwoUp / index.ts View on Github external
// Watch for children changes.
    // Note this won't fire for initial contents,
    // so _childrenChange is also called in connectedCallback.
    new MutationObserver(() => this._childrenChange())
      .observe(this, { childList: true });

    // Watch for element size changes.
    if ('ResizeObserver' in window) {
      new ResizeObserver(() => this._resetPosition())
        .observe(this);
    } else {
      window.addEventListener('resize', () => this._resetPosition());
    }

    // Watch for pointers on the handle.
    const pointerTracker: PointerTracker = new PointerTracker(this._handle, {
      start: (_, event) => {
        // We only want to track 1 pointer.
        if (pointerTracker.currentPointers.length === 1) return false;
        event.preventDefault();
        this._positionOnPointerStart = this._position;
        return true;
      },
      move: () => {
        this._pointerChange(
          pointerTracker.startPointers[0],
          pointerTracker.currentPointers[0],
        );
      },
    });
  }
github GoogleChromeLabs / squoosh / src / custom-els / RangeInput / index.ts View on Github external
constructor() {
    super();
    this._input = document.createElement('input');
    this._input.type = 'range';
    this._input.className = style.input;

    const tracker = new PointerTracker(this._input, {
      start: (): boolean => {
        if (tracker.currentPointers.length !== 0) return false;
        this._input.classList.add(style.touchActive);
        return true;
      },
      end: () => {
        this._input.classList.remove(style.touchActive);
      },
    });

    for (const event of RETARGETED_EVENTS) {
      this._input.addEventListener(event, this._retargetEvent, true);
    }

    for (const event of UPDATE_EVENTS) {
      this._input.addEventListener(event, this._update, true);

pointer-tracker

Track mouse/touch/pointer events through one interface

Apache-2.0
Latest version published 3 years ago

Package Health Score

48 / 100
Full package analysis

Popular pointer-tracker functions