fabric/dist-extensions/westures_integration/index.mjs

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

import wes from 'westures';
import { util } from 'fabric';

/**
 * Register this handler on canvas.on('pinch', pinchEventHandler);
 * To get an out of the box functionality for the pinch to zoom
 */
function pinchEventHandler(_ref) {
  let {
    scale,
    target,
    scenePoint
  } = _ref;
  if (target && this.getActiveObject() === target) {
    // if we are pinching on the active object, let's scale it
    target.scaleX *= scale;
    target.scaleY *= scale;
  } else {
    this.zoomToPoint(scenePoint, this.getZoom() * scale);
  }
}
function rotateEventHandler(_ref2) {
  let {
    rotation,
    target
  } = _ref2;
  if (target && this.getActiveObject() === target) {
    target.rotate(target.angle + util.radiansToDegrees(rotation));
  }
}
const tripleTapGesture = canvas => {
  return new wes.Tap(canvas.upperCanvasEl, _ref3 => {
    let {
      event
    } = _ref3;
    canvas.fireEventFromPointerEvent(event, 'mouse:tripleclick', 'mousetripleclick', undefined);
    event.preventDefault();
  }, {
    numTaps: 3,
    maxRetain: 400
  });
};
const doubleTapGesture = canvas => {
  return new wes.Tap(canvas.upperCanvasEl, _ref4 => {
    let {
      event
    } = _ref4;
    canvas.fireEventFromPointerEvent(event, 'mouse:dblclick', 'mousedblclick', undefined);
    event.preventDefault();
  }, {
    numTaps: 2,
    maxRetain: 300
  });
};
const pinchGesture = canvas => {
  return new wes.Pinch(canvas.upperCanvasEl, _ref5 => {
    let {
      scale,
      event
    } = _ref5;
    canvas.fireEventFromPointerEvent(event, 'pinch', 'pinch', {
      scale
    });
  });
};
const rotateGesture = canvas => {
  return new wes.Rotate(canvas.upperCanvasEl, _ref6 => {
    let {
      rotation,
      event
    } = _ref6;
    canvas.fireEventFromPointerEvent(event, 'rotate', 'rotate', {
      rotation
    });
  });
};

/**
 * Add a serie of gestures recognition on the canvas
 */
const addGestures = canvas => {
  const canvasRegion = new wes.Region(canvas.upperCanvasEl);
  canvas.addOrRemove(function (el) {
    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      args[_key - 1] = arguments[_key];
    }
    return el.removeEventListener(...args);
  });
  canvasRegion.addGesture(rotateGesture(canvas));
  canvasRegion.addGesture(pinchGesture(canvas));
  canvasRegion.addGesture(tripleTapGesture(canvas));
  canvasRegion.addGesture(doubleTapGesture(canvas));
  // add back events, excluding the click one
  canvas.addOrRemove(function (el) {
    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
      args[_key2 - 1] = arguments[_key2];
    }
    return el.addEventListener(...args);
  }, true);
};

export { addGestures, doubleTapGesture, pinchEventHandler, pinchGesture, rotateEventHandler, rotateGesture, tripleTapGesture };
//# sourceMappingURL=index.mjs.map