fabric/dist-extensions/cropping_controls/enterCropMode.mjs

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

import { cropPanMoveHandler, renderGhostImage } from "./croppingHandlers.mjs";
import { createImageCroppingControls } from "./croppingControls.mjs";
//#region extensions/cropping_controls/enterCropMode.ts
/**
* Coordinates the change to image to enter crop mode and returns
* a function to exit crop mode
* This is a basic example for demos and your project may need persistent crop state,
* in that case make your own function.
*/
const enterCropMode = function enterCropMode({ target }) {
	var _fabricImage$canvas2;
	const fabricImage = target;
	const { controls, padding } = fabricImage;
	fabricImage.padding = 0;
	fabricImage.controls = createImageCroppingControls();
	fabricImage.on("moving", cropPanMoveHandler);
	fabricImage.on("before:render", renderGhostImage);
	fabricImage.setCoords();
	const exitCropMode = () => {
		var _fabricImage$canvas;
		fabricImage.padding = padding;
		fabricImage.off("moving", cropPanMoveHandler);
		fabricImage.off("before:render", renderGhostImage);
		fabricImage.controls = controls;
		fabricImage.setCoords();
		fabricImage.once("mousedblclick", enterCropMode);
		(_fabricImage$canvas = fabricImage.canvas) === null || _fabricImage$canvas === void 0 || _fabricImage$canvas.requestRenderAll();
	};
	fabricImage.once("mousedblclick", exitCropMode);
	(_fabricImage$canvas2 = fabricImage.canvas) === null || _fabricImage$canvas2 === void 0 || _fabricImage$canvas2.requestRenderAll();
};
//#endregion
export { enterCropMode };

//# sourceMappingURL=enterCropMode.mjs.map