fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
60 lines (59 loc) • 2.15 kB
JavaScript
import { util } from "fabric";
import wes from "westures";
//#region extensions/westures_integration/index.ts
/**
* Register this handler on canvas.on('pinch', pinchEventHandler);
* To get an out of the box functionality for the pinch to zoom
*/
function pinchEventHandler({ scale, target, scenePoint }) {
if (target && this.getActiveObject() === target) {
target.scaleX *= scale;
target.scaleY *= scale;
} else this.zoomToPoint(scenePoint, this.getZoom() * scale);
}
function rotateEventHandler({ rotation, target }) {
if (target && this.getActiveObject() === target) target.rotate(target.angle + util.radiansToDegrees(rotation));
}
const tripleTapGesture = (canvas) => {
return new wes.Tap(canvas.upperCanvasEl, ({ event }) => {
canvas.fireEventFromPointerEvent(event, "mouse:tripleclick", "mousetripleclick", void 0);
event.preventDefault();
}, {
numTaps: 3,
maxRetain: 400
});
};
const doubleTapGesture = (canvas) => {
return new wes.Tap(canvas.upperCanvasEl, ({ event }) => {
canvas.fireEventFromPointerEvent(event, "mouse:dblclick", "mousedblclick", void 0);
event.preventDefault();
}, {
numTaps: 2,
maxRetain: 300
});
};
const pinchGesture = (canvas) => {
return new wes.Pinch(canvas.upperCanvasEl, ({ scale, event }) => {
canvas.fireEventFromPointerEvent(event, "pinch", "pinch", { scale });
});
};
const rotateGesture = (canvas) => {
return new wes.Rotate(canvas.upperCanvasEl, ({ rotation, event }) => {
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((el, ...args) => el.removeEventListener(...args));
canvasRegion.addGesture(rotateGesture(canvas));
canvasRegion.addGesture(pinchGesture(canvas));
canvasRegion.addGesture(tripleTapGesture(canvas));
canvasRegion.addGesture(doubleTapGesture(canvas));
canvas.addOrRemove((el, ...args) => el.addEventListener(...args), true);
};
//#endregion
export { addGestures, pinchEventHandler, rotateEventHandler };
//# sourceMappingURL=index.mjs.map