fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
58 lines (57 loc) • 3.13 kB
JavaScript
import { SCALE_X, SCALE_Y, SKEW_X, SKEW_Y } from "../constants.mjs";
import { scaleCursorStyleHandler, scalingX, scalingY } from "./scale.mjs";
import { skewCursorStyleHandler, skewHandlerX, skewHandlerY } from "./skew.mjs";
//#region src/controls/scaleSkew.ts
function isAltAction(eventData, target) {
return eventData[target.canvas.altActionKey];
}
/**
* Inspect event, control and fabricObject to return the correct action name
* @param {Event} eventData the javascript event that is causing the scale
* @param {Control} control the control that is interested in the action
* @param {FabricObject} fabricObject the fabric object that is interested in the action
* @return {String} an action name
*/
const scaleOrSkewActionName = (eventData, control, fabricObject) => {
const isAlternative = isAltAction(eventData, fabricObject);
if (control.x === 0) return isAlternative ? SKEW_X : SCALE_Y;
if (control.y === 0) return isAlternative ? SKEW_Y : SCALE_X;
return "";
};
/**
* Combine skew and scale style handlers to cover fabric standard use case
* @param {Event} eventData the javascript event that is causing the scale
* @param {Control} control the control that is interested in the action
* @param {FabricObject} fabricObject the fabric object that is interested in the action
* @return {String} a valid css string for the cursor
*/
const scaleSkewCursorStyleHandler = (eventData, control, fabricObject, coord) => {
return isAltAction(eventData, fabricObject) ? skewCursorStyleHandler(eventData, control, fabricObject, coord) : scaleCursorStyleHandler(eventData, control, fabricObject, coord);
};
/**
* Composed action handler to either scale X or skew Y
* Needs to be wrapped with `wrapWithFixedAnchor` to be effective
* @param {Event} eventData javascript event that is doing the transform
* @param {Object} transform javascript object containing a series of information around the current transform
* @param {number} x current mouse x position, canvas normalized
* @param {number} y current mouse y position, canvas normalized
* @return {Boolean} true if some change happened
*/
const scalingXOrSkewingY = (eventData, transform, x, y) => {
return isAltAction(eventData, transform.target) ? skewHandlerY(eventData, transform, x, y) : scalingX(eventData, transform, x, y);
};
/**
* Composed action handler to either scale Y or skew X
* Needs to be wrapped with `wrapWithFixedAnchor` to be effective
* @param {Event} eventData javascript event that is doing the transform
* @param {Object} transform javascript object containing a series of information around the current transform
* @param {number} x current mouse x position, canvas normalized
* @param {number} y current mouse y position, canvas normalized
* @return {Boolean} true if some change happened
*/
const scalingYOrSkewingX = (eventData, transform, x, y) => {
return isAltAction(eventData, transform.target) ? skewHandlerX(eventData, transform, x, y) : scalingY(eventData, transform, x, y);
};
//#endregion
export { scaleOrSkewActionName, scaleSkewCursorStyleHandler, scalingXOrSkewingY, scalingYOrSkewingX };
//# sourceMappingURL=scaleSkew.mjs.map