fabric/dist/src/controls/changeWidth.mjs

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

import { RESIZING } from '../constants.mjs';
import { resolveOrigin } from '../util/misc/resolveOrigin.mjs';
import { getLocalPoint, isTransformCentered } from './util.mjs';
import { wrapWithFireEvent } from './wrapWithFireEvent.mjs';
import { wrapWithFixedAnchor } from './wrapWithFixedAnchor.mjs';

const changeObjectDimensionGen = (dimension, origin, xorY, scale) => (eventData, transform, x, y) => {
  const localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y);
  const localPointValue = localPoint[xorY];
  //  make sure the control changes width ONLY from it's side of target
  const originValue = resolveOrigin(transform[origin]);
  if (originValue === 0 || originValue > 0 && localPointValue < 0 || originValue < 0 && localPointValue > 0) {
    const {
        target
      } = transform,
      strokePadding = target.strokeWidth / (target.strokeUniform ? target[scale] : 1),
      multiplier = isTransformCentered(transform) ? 2 : 1,
      oldWidth = target[dimension],
      newWidth = Math.abs(localPointValue * multiplier / target[scale]) - strokePadding;
    target.set(dimension, Math.max(newWidth, 1));
    //  check against actual target width in case `newWidth` was rejected
    return oldWidth !== target[dimension];
  }
  return false;
};

/**
 * Action handler to change object's width
 * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
 * You want to use this only if you are building a new control handler and you want
 * to reuse some logic. use "changeWidth" if you are looking to just use a control for width
 * @param {Event} eventData javascript event that is doing the transform
 * @param {Object} transform javascript object containing a series of information around the current transform
 * @param {number} x current mouse x position, canvas normalized
 * @param {number} y current mouse y position, canvas normalized
 * @return {Boolean} true if some change happened
 */
const changeObjectWidth = changeObjectDimensionGen('width', 'originX', 'x', 'scaleX');

/**
 * Action handler to change object's height
 * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
 * You want to use this only if you are building a new control handler and you want
 * to reuse some logic. use "changeHeight" if you are looking to just use a control for height
 * @param {Event} eventData javascript event that is doing the transform
 * @param {Object} transform javascript object containing a series of information around the current transform
 * @param {number} x current mouse x position, canvas normalized
 * @param {number} y current mouse y position, canvas normalized
 * @return {Boolean} true if some change happened
 */
const changeObjectHeight = changeObjectDimensionGen('height', 'originY', 'y', 'scaleY');

/**
 * Control handler for changing width
 */
const changeWidth = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(changeObjectWidth));

/**
 * Control handler for changing height
 */
const changeHeight = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(changeObjectHeight));

export { changeHeight, changeObjectDimensionGen, changeObjectHeight, changeObjectWidth, changeWidth };
//# sourceMappingURL=changeWidth.mjs.map