fabric/dist-extensions/cropping_controls/croppingControls.mjs

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

import { controlsUtils, Control } from 'fabric';
import { changeCropHeight, changeCropWidth, changeCropX, changeCropY } from './croppingHandlers.mjs';
import { renderCornerControl } from './renderCornerControl.mjs';

const {
  scaleCursorStyleHandler
} = controlsUtils;
const cropActionName = () => 'crop';
// use this function if you want to generate new controls for every instance
const createImageCroppingControls = () => ({
  ml: new Control({
    x: -0.5,
    y: 0,
    sizeX: 4,
    sizeY: 20,
    cursorStyleHandler: scaleCursorStyleHandler,
    actionHandler: changeCropX,
    getActionName: cropActionName
  }),
  mr: new Control({
    x: 0.5,
    y: 0,
    sizeX: 4,
    sizeY: 20,
    cursorStyleHandler: scaleCursorStyleHandler,
    actionHandler: changeCropWidth,
    getActionName: cropActionName
  }),
  mb: new Control({
    x: 0,
    y: 0.5,
    sizeX: 20,
    sizeY: 4,
    cursorStyleHandler: scaleCursorStyleHandler,
    actionHandler: changeCropHeight,
    getActionName: cropActionName
  }),
  mt: new Control({
    x: 0,
    y: -0.5,
    sizeX: 20,
    sizeY: 4,
    cursorStyleHandler: scaleCursorStyleHandler,
    actionHandler: changeCropY,
    getActionName: cropActionName
  }),
  tl: new Control({
    angle: 0,
    x: -0.5,
    y: -0.5,
    sizeX: 20,
    sizeY: 4,
    render: renderCornerControl,
    cursorStyleHandler: scaleCursorStyleHandler,
    actionHandler: function () {
      const cropX = changeCropX(...arguments);
      const cropY = changeCropY(...arguments);
      return cropX || cropY;
    },
    getActionName: cropActionName
  }),
  tr: new Control({
    angle: 90,
    x: 0.5,
    y: -0.5,
    sizeX: 20,
    sizeY: 4,
    render: renderCornerControl,
    cursorStyleHandler: scaleCursorStyleHandler,
    actionHandler: function () {
      const width = changeCropWidth(...arguments);
      const cropY = changeCropY(...arguments);
      return width || cropY;
    },
    getActionName: cropActionName
  }),
  bl: new Control({
    angle: 270,
    x: -0.5,
    y: 0.5,
    sizeX: 20,
    sizeY: 4,
    render: renderCornerControl,
    cursorStyleHandler: scaleCursorStyleHandler,
    actionHandler: function () {
      const height = changeCropHeight(...arguments);
      const cropX = changeCropX(...arguments);
      return height || cropX;
    },
    getActionName: cropActionName
  }),
  br: new Control({
    angle: 180,
    x: 0.5,
    y: 0.5,
    sizeX: 20,
    sizeY: 4,
    render: renderCornerControl,
    cursorStyleHandler: scaleCursorStyleHandler,
    actionHandler: function () {
      const height = changeCropHeight(...arguments);
      const width = changeCropWidth(...arguments);
      return height || width;
    },
    getActionName: cropActionName
  })
});

export { createImageCroppingControls };
//# sourceMappingURL=croppingControls.mjs.map