fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
179 lines (178 loc) • 4.93 kB
JavaScript
import { changeCropHeight, changeCropWidth, changeCropX, changeCropY, changeHeightAndScaleToCover, changeWidthAndScaleToCover, ghostScalePositionHandler, scaleEquallyCropGenerator, withCornerFlip, withFlip } from "./croppingHandlers.mjs";
import { renderCornerControl, renderRoundedSegmentControl, shouldActivateCorner } from "./controlRendering.mjs";
import { Control, controlsUtils } from "fabric";
//#region extensions/cropping_controls/croppingControls.ts
const { scaleCursorStyleHandler } = controlsUtils;
const cropActionName = () => "crop";
const createImageCroppingControls = () => ({
tls: new Control({
x: -.5,
y: -.5,
cursorStyleHandler: scaleCursorStyleHandler,
positionHandler: ghostScalePositionHandler,
actionHandler: scaleEquallyCropGenerator(-.5, -.5)
}),
brs: new Control({
x: .5,
y: .5,
cursorStyleHandler: scaleCursorStyleHandler,
positionHandler: ghostScalePositionHandler,
actionHandler: scaleEquallyCropGenerator(.5, .5)
}),
trs: new Control({
x: .5,
y: -.5,
cursorStyleHandler: scaleCursorStyleHandler,
positionHandler: ghostScalePositionHandler,
actionHandler: scaleEquallyCropGenerator(.5, -.5)
}),
bls: new Control({
x: -.5,
y: .5,
cursorStyleHandler: scaleCursorStyleHandler,
positionHandler: ghostScalePositionHandler,
actionHandler: scaleEquallyCropGenerator(-.5, .5)
}),
mlc: new Control({
x: -.5,
y: 0,
angle: 90,
sizeX: 8,
sizeY: 16,
render: renderRoundedSegmentControl,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: withFlip(changeCropX, changeCropWidth, "flipX"),
getActionName: cropActionName
}),
mrc: new Control({
x: .5,
y: 0,
angle: 90,
sizeX: 8,
sizeY: 16,
render: renderRoundedSegmentControl,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: withFlip(changeCropWidth, changeCropX, "flipX"),
getActionName: cropActionName
}),
mbc: new Control({
x: 0,
y: .5,
angle: 0,
sizeX: 16,
sizeY: 8,
render: renderRoundedSegmentControl,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: withFlip(changeCropHeight, changeCropY, "flipY"),
getActionName: cropActionName
}),
mtc: new Control({
x: 0,
y: -.5,
angle: 0,
sizeX: 16,
sizeY: 8,
render: renderRoundedSegmentControl,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: withFlip(changeCropY, changeCropHeight, "flipY"),
getActionName: cropActionName
}),
tlc: new Control({
angle: 0,
x: -.5,
y: -.5,
sizeX: 12,
sizeY: 8,
render: renderCornerControl,
shouldActivate: shouldActivateCorner,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: withCornerFlip(changeCropX, changeCropWidth, changeCropY, changeCropHeight),
getActionName: cropActionName
}),
trc: new Control({
angle: 90,
x: .5,
y: -.5,
sizeX: 12,
sizeY: 8,
render: renderCornerControl,
shouldActivate: shouldActivateCorner,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: withCornerFlip(changeCropWidth, changeCropX, changeCropY, changeCropHeight),
getActionName: cropActionName
}),
blc: new Control({
angle: 270,
x: -.5,
y: .5,
sizeX: 12,
sizeY: 8,
render: renderCornerControl,
shouldActivate: shouldActivateCorner,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: withCornerFlip(changeCropX, changeCropWidth, changeCropHeight, changeCropY),
getActionName: cropActionName
}),
brc: new Control({
angle: 180,
x: .5,
y: .5,
sizeX: 12,
sizeY: 8,
render: renderCornerControl,
shouldActivate: shouldActivateCorner,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: withCornerFlip(changeCropWidth, changeCropX, changeCropHeight, changeCropY),
getActionName: cropActionName
})
});
const edgeActionName = () => "resizing";
const createImageResizeControlsWithScaleToCover = () => ({
mle: new Control({
x: -.5,
y: 0,
angle: 90,
sizeX: 8,
sizeY: 16,
render: renderRoundedSegmentControl,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: changeWidthAndScaleToCover,
getActionName: edgeActionName
}),
mre: new Control({
x: .5,
y: 0,
angle: 90,
sizeX: 8,
sizeY: 16,
render: renderRoundedSegmentControl,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: changeWidthAndScaleToCover,
getActionName: edgeActionName
}),
mte: new Control({
x: 0,
y: -.5,
angle: 0,
sizeX: 16,
sizeY: 8,
render: renderRoundedSegmentControl,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: changeHeightAndScaleToCover,
getActionName: edgeActionName
}),
mbe: new Control({
x: 0,
y: .5,
angle: 0,
sizeX: 16,
sizeY: 8,
render: renderRoundedSegmentControl,
cursorStyleHandler: scaleCursorStyleHandler,
actionHandler: changeHeightAndScaleToCover,
getActionName: edgeActionName
})
});
//#endregion
export { createImageCroppingControls, createImageResizeControlsWithScaleToCover };
//# sourceMappingURL=croppingControls.mjs.map