UNPKG

fabric

Version:

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

fabricjs.com

fabricjs/fabric.js

1 lines • 8.12 kB
1
{"version":3,"file":"croppingControls.mjs","names":[],"sources":["../../extensions/cropping_controls/croppingControls.ts"],"sourcesContent":["import { Control, controlsUtils } from 'fabric';\nimport {\n changeCropHeight,\n changeCropWidth,\n changeCropX,\n changeCropY,\n ghostScalePositionHandler,\n scaleEquallyCropGenerator,\n changeWidthAndScaleToCover,\n changeHeightAndScaleToCover,\n withFlip,\n withCornerFlip,\n} from './croppingHandlers';\nimport {\n renderCornerControl,\n renderRoundedSegmentControl,\n shouldActivateCorner,\n} from './controlRendering';\n\nconst { scaleCursorStyleHandler } = controlsUtils;\n\nconst cropActionName = () => 'crop';\n\n// use this function if you want to generate new controls for every instance\nexport const createImageCroppingControls = () => ({\n // scaling image\n tls: new Control({\n x: -0.5,\n y: -0.5,\n cursorStyleHandler: scaleCursorStyleHandler,\n positionHandler: ghostScalePositionHandler,\n actionHandler: scaleEquallyCropGenerator(-0.5, -0.5),\n }),\n brs: new Control({\n x: 0.5,\n y: 0.5,\n cursorStyleHandler: scaleCursorStyleHandler,\n positionHandler: ghostScalePositionHandler,\n actionHandler: scaleEquallyCropGenerator(0.5, 0.5),\n }),\n trs: new Control({\n x: 0.5,\n y: -0.5,\n cursorStyleHandler: scaleCursorStyleHandler,\n positionHandler: ghostScalePositionHandler,\n actionHandler: scaleEquallyCropGenerator(0.5, -0.5),\n }),\n bls: new Control({\n x: -0.5,\n y: 0.5,\n cursorStyleHandler: scaleCursorStyleHandler,\n positionHandler: ghostScalePositionHandler,\n actionHandler: scaleEquallyCropGenerator(-0.5, 0.5),\n }),\n // cropping image\n mlc: new Control({\n x: -0.5,\n y: 0,\n angle: 90,\n sizeX: 8,\n sizeY: 16,\n render: renderRoundedSegmentControl,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: withFlip(changeCropX, changeCropWidth, 'flipX'),\n getActionName: cropActionName,\n }),\n\n mrc: new Control({\n x: 0.5,\n y: 0,\n angle: 90,\n sizeX: 8,\n sizeY: 16,\n render: renderRoundedSegmentControl,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: withFlip(changeCropWidth, changeCropX, 'flipX'),\n getActionName: cropActionName,\n }),\n\n mbc: new Control({\n x: 0,\n y: 0.5,\n angle: 0,\n sizeX: 16,\n sizeY: 8,\n render: renderRoundedSegmentControl,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: withFlip(changeCropHeight, changeCropY, 'flipY'),\n getActionName: cropActionName,\n }),\n\n mtc: new Control({\n x: 0,\n y: -0.5,\n angle: 0,\n sizeX: 16,\n sizeY: 8,\n render: renderRoundedSegmentControl,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: withFlip(changeCropY, changeCropHeight, 'flipY'),\n getActionName: cropActionName,\n }),\n\n tlc: new Control({\n angle: 0,\n x: -0.5,\n y: -0.5,\n sizeX: 12,\n sizeY: 8,\n render: renderCornerControl,\n shouldActivate: shouldActivateCorner,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: withCornerFlip(\n changeCropX,\n changeCropWidth,\n changeCropY,\n changeCropHeight,\n ),\n getActionName: cropActionName,\n }),\n\n trc: new Control({\n angle: 90,\n x: 0.5,\n y: -0.5,\n sizeX: 12,\n sizeY: 8,\n render: renderCornerControl,\n shouldActivate: shouldActivateCorner,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: withCornerFlip(\n changeCropWidth,\n changeCropX,\n changeCropY,\n changeCropHeight,\n ),\n getActionName: cropActionName,\n }),\n\n blc: new Control({\n angle: 270,\n x: -0.5,\n y: 0.5,\n sizeX: 12,\n sizeY: 8,\n render: renderCornerControl,\n shouldActivate: shouldActivateCorner,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: withCornerFlip(\n changeCropX,\n changeCropWidth,\n changeCropHeight,\n changeCropY,\n ),\n getActionName: cropActionName,\n }),\n\n brc: new Control({\n angle: 180,\n x: 0.5,\n y: 0.5,\n sizeX: 12,\n sizeY: 8,\n render: renderCornerControl,\n shouldActivate: shouldActivateCorner,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: withCornerFlip(\n changeCropWidth,\n changeCropX,\n changeCropHeight,\n changeCropY,\n ),\n getActionName: cropActionName,\n }),\n});\n\nconst edgeActionName = () => 'resizing';\n\n// resize + fallback scale controls - resize within crop bounds, then uniform scale when bounds reached\nexport const createImageResizeControlsWithScaleToCover = () => ({\n mle: new Control({\n x: -0.5,\n y: 0,\n angle: 90,\n sizeX: 8,\n sizeY: 16,\n render: renderRoundedSegmentControl,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: changeWidthAndScaleToCover,\n getActionName: edgeActionName,\n }),\n\n mre: new Control({\n x: 0.5,\n y: 0,\n angle: 90,\n sizeX: 8,\n sizeY: 16,\n render: renderRoundedSegmentControl,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: changeWidthAndScaleToCover,\n getActionName: edgeActionName,\n }),\n\n mte: new Control({\n x: 0,\n y: -0.5,\n angle: 0,\n sizeX: 16,\n sizeY: 8,\n render: renderRoundedSegmentControl,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: changeHeightAndScaleToCover,\n getActionName: edgeActionName,\n }),\n\n mbe: new Control({\n x: 0,\n y: 0.5,\n angle: 0,\n sizeX: 16,\n sizeY: 8,\n render: renderRoundedSegmentControl,\n cursorStyleHandler: scaleCursorStyleHandler,\n actionHandler: changeHeightAndScaleToCover,\n getActionName: edgeActionName,\n }),\n});\n"],"mappings":";;;;AAmBA,MAAM,EAAE,4BAA4B;AAEpC,MAAM,uBAAuB;AAG7B,MAAa,qCAAqC;CAEhD,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,oBAAoB;EACpB,iBAAiB;EACjB,eAAe,0BAA0B,KAAM,IAAK;EACrD,CAAC;CACF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,oBAAoB;EACpB,iBAAiB;EACjB,eAAe,0BAA0B,IAAK,GAAI;EACnD,CAAC;CACF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,oBAAoB;EACpB,iBAAiB;EACjB,eAAe,0BAA0B,IAAK,IAAK;EACpD,CAAC;CACF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,oBAAoB;EACpB,iBAAiB;EACjB,eAAe,0BAA0B,KAAM,GAAI;EACpD,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,oBAAoB;EACpB,eAAe,SAAS,aAAa,iBAAiB,QAAQ;EAC9D,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,oBAAoB;EACpB,eAAe,SAAS,iBAAiB,aAAa,QAAQ;EAC9D,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,oBAAoB;EACpB,eAAe,SAAS,kBAAkB,aAAa,QAAQ;EAC/D,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,oBAAoB;EACpB,eAAe,SAAS,aAAa,kBAAkB,QAAQ;EAC/D,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,OAAO;EACP,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,QAAQ;EACR,gBAAgB;EAChB,oBAAoB;EACpB,eAAe,eACb,aACA,iBACA,aACA,iBACD;EACD,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,OAAO;EACP,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,QAAQ;EACR,gBAAgB;EAChB,oBAAoB;EACpB,eAAe,eACb,iBACA,aACA,aACA,iBACD;EACD,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,OAAO;EACP,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,QAAQ;EACR,gBAAgB;EAChB,oBAAoB;EACpB,eAAe,eACb,aACA,iBACA,kBACA,YACD;EACD,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,OAAO;EACP,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,QAAQ;EACR,gBAAgB;EAChB,oBAAoB;EACpB,eAAe,eACb,iBACA,aACA,kBACA,YACD;EACD,eAAe;EAChB,CAAC;CACH;AAED,MAAM,uBAAuB;AAG7B,MAAa,mDAAmD;CAC9D,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,oBAAoB;EACpB,eAAe;EACf,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,oBAAoB;EACpB,eAAe;EACf,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,oBAAoB;EACpB,eAAe;EACf,eAAe;EAChB,CAAC;CAEF,KAAK,IAAI,QAAQ;EACf,GAAG;EACH,GAAG;EACH,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,oBAAoB;EACpB,eAAe;EACf,eAAe;EAChB,CAAC;CACH"}