1 line
10 KiB
Plaintext
1 line
10 KiB
Plaintext
|
{"version":3,"file":"skew.mjs","names":[],"sources":["../../../src/controls/skew.ts"],"sourcesContent":["import type {\n ControlCursorCallback,\n TPointerEvent,\n Transform,\n TransformActionHandler,\n} from '../EventTypeDefs';\nimport { resolveOrigin } from '../util/misc/resolveOrigin';\nimport { Point } from '../Point';\nimport type { TAxis, TAxisKey } from '../typedefs';\nimport {\n degreesToRadians,\n radiansToDegrees,\n} from '../util/misc/radiansDegreesConversion';\nimport {\n findCornerQuadrant,\n getLocalPoint,\n isLocked,\n NOT_ALLOWED_CURSOR,\n} from './util';\nimport { wrapWithFireEvent } from './wrapWithFireEvent';\nimport { wrapWithFixedAnchor } from './wrapWithFixedAnchor';\nimport {\n CENTER,\n SCALE_X,\n SCALE_Y,\n SKEWING,\n SKEW_X,\n SKEW_Y,\n} from '../constants';\n\nexport type SkewTransform = Transform & { skewingSide: -1 | 1 };\n\nconst AXIS_KEYS: Record<\n TAxis,\n {\n counterAxis: TAxis;\n scale: TAxisKey<'scale'>;\n skew: TAxisKey<'skew'>;\n lockSkewing: TAxisKey<'lockSkewing'>;\n origin: TAxisKey<'origin'>;\n flip: TAxisKey<'flip'>;\n }\n> = {\n x: {\n counterAxis: 'y',\n scale: SCALE_X,\n skew: SKEW_X,\n lockSkewing: 'lockSkewingX',\n origin: 'originX',\n flip: 'flipX',\n },\n y: {\n counterAxis: 'x',\n scale: SCALE_Y,\n skew: SKEW_Y,\n lockSkewing: 'lockSkewingY',\n origin: 'originY',\n flip: 'flipY',\n },\n};\n\nconst skewMap = ['ns', 'nesw', 'ew', 'nwse'];\n\n/**\n * return the correct cursor style for the skew action\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {Control} control the control that is interested in the action\n * @param {FabricObject} fabricObject the fabric object that is interested in the action\n * @return {String} a valid css string for the cursor\n */\nexport const skewCursorStyleHandler: ControlCursorCallback = (\n eventData,\n control,\n fabricObject,\n coord,\n) => {\n if (control.x !== 0 && isLocked(fabricObject, 'lockSkewingY')) {\n return NOT_ALLOWED_CURSOR;\n }\n if (control.y !== 0 && isLocked(fabricObject, 'lockSkewingX')) {\n return NOT_ALLOWED_CURSOR;\n }\n const n = findCornerQuadrant(fabricObject, control, coord) % 4;\n return `${skewMap[n]}-resize`;\n};\n\n/**\n * Since skewing is applied before scaling, calculations are done in a scaleless plane\n * @see https://github.com/fabricjs/fabric.js/pull/8380\n */\nfunction skewObject(\n axis: TAxis,\n { target, ex, ey, skewingSide, ...transform }: SkewTransform,\n pointer: Point,\n) {\n const { skew: skewKey } = AXIS_KEYS[axis],\n offset = pointer\n .subtract(new Point(ex, ey))\n .divide(new Point(target.scaleX, target.scaleY))[axis],\n skewingBefore = target[skewKey],\n skewingStart = transform[skewKey],\n shearingStart = Math.tan(degreesToRadians(skewingStart)),\n // let a, b be the size of target\n // let a' be the value of a after applying skewing\n // then:\n // a' = a + b * skewA => skewA = (a' - a) / b\n // the value b is tricky since skewY is applied before skewX\n b =\n axis === 'y'\n ? target._getTransformedDimensions({\n scaleX: 1,\n scaleY: 1,\n // since skewY is applied before skewX, b (=width) is not affected by skewX\n skewX: 0,\n }).x\n : target._getTransformedDimensions({\n scaleX: 1,\n scaleY: 1,\n }).y;\n\n const shearing =\n (2 * offset * skewingSide) /\n // we max out fractions to safeguard from asymptotic behavior\n Math.max(b, 1) +\n // add starting state\n shearingStart;\n\n const skewing = radiansToDegrees(Math.atan(shearing));\n\n target.set(skewKey, skewing);\n const changed = skewingBefore !== target[skewKey];\n\n if (changed && axis === 'y') {\n // we don't want skewing to affect scaleX\n // so we factor it by the inverse skewing diff to make it seem unchanged to the viewer\n const { skewX, scaleX } = target,\n dimBefore = target._getTransformedDimensions({ skewY: skewin
|