5dbcebf7a2
- Fix router import path in main.js - Handle Django REST Framework pagination format in API calls - Add getTemplates function to project API - Restart frontend development server
60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
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
|