ding-image-editor 3.15.3

package/src/js/helper/selectionModifyHelper.js

@@ -0,0 +1,86 @@
+import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
+
+/**
+ * Cached selection's info
+ * @type {Array}
+ * @private
+ */
+let cachedUndoDataForChangeDimension = null;
+
+/**
+ * Set cached undo data
+ * @param {Array} undoData - selection object
+ * @private
+ */
+export function setCachedUndoDataForDimension(undoData) {
+  cachedUndoDataForChangeDimension = undoData;
+}
+
+/**
+ * Get cached undo data
+ * @returns {Object} cached undo data
+ * @private
+ */
+export function getCachedUndoDataForDimension() {
+  return cachedUndoDataForChangeDimension;
+}
+
+/**
+ * Make undo data
+ * @param {fabric.Object} obj - selection object
+ * @param {Function} undoDatumMaker - make undo datum
+ * @returns {Array} undoData
+ * @private
+ */
+export function makeSelectionUndoData(obj, undoDatumMaker) {
+  let undoData;
+
+  if (obj.type === 'activeSelection') {
+    undoData = obj.getObjects().map((item) => {
+      const { angle, left, top, scaleX, scaleY, width, height } = item;
+
+      fabric.util.addTransformToObject(item, obj.calcTransformMatrix());
+      const result = undoDatumMaker(item);
+
+      item.set({
+        angle,
+        left,
+        top,
+        width,
+        height,
+        scaleX,
+        scaleY,
+      });
+
+      return result;
+    });
+  } else {
+    undoData = [undoDatumMaker(obj)];
+  }
+
+  return undoData;
+}
+
+/**
+ * Make undo datum
+ * @param {number} id - object id
+ * @param {fabric.Object} obj - selection object
+ * @param {boolean} isSelection - whether or not object is selection
+ * @returns {Object} undo datum
+ * @private
+ */
+export function makeSelectionUndoDatum(id, obj, isSelection) {
+  return isSelection
+    ? {
+        id,
+        width: obj.width,
+        height: obj.height,
+        top: obj.top,
+        left: obj.left,
+        angle: obj.angle,
+        scaleX: obj.scaleX,
+        scaleY: obj.scaleY,
+      }
+    : extend({ id }, obj);
+}

package/src/js/helper/shapeFilterFillHelper.js

@@ -0,0 +1,564 @@
+import { fabric } from 'fabric';
+import forEach from 'tui-code-snippet/collection/forEach';
+import extend from 'tui-code-snippet/object/extend';
+import resizeHelper from '@/helper/shapeResizeHelper';
+import { capitalizeString, flipObject, setCustomProperty, getCustomProperty } from '@/util';
+
+const FILTER_OPTION_MAP = {
+  pixelate: 'blocksize',
+  blur: 'blur',
+};
+const POSITION_DIMENSION_MAP = {
+  x: 'width',
+  y: 'height',
+};
+
+const FILTER_NAME_VALUE_MAP = flipObject(FILTER_OPTION_MAP);
+
+/**
+ * Cached canvas image element for fill image
+ * @type {boolean}
+ * @private
+ */
+let cachedCanvasImageElement = null;
+
+/**
+ * Get background image of fill
+ * @param {fabric.Object} shapeObj - Shape object
+ * @returns {fabric.Image}
+ * @private
+ */
+export function getFillImageFromShape(shapeObj) {
+  const { patternSourceCanvas } = getCustomProperty(shapeObj, 'patternSourceCanvas');
+  const [fillImage] = patternSourceCanvas.getObjects();
+
+  return fillImage;
+}
+
+/**
+ * Reset the image position in the filter type fill area.
+ * @param {fabric.Object} shapeObj - Shape object
+ * @private
+ */
+export function rePositionFilterTypeFillImage(shapeObj) {
+  const { angle, flipX, flipY } = shapeObj;
+  const fillImage = getFillImageFromShape(shapeObj);
+  const rotatedShapeCornerDimension = getRotatedDimension(shapeObj);
+  const { right, bottom } = rotatedShapeCornerDimension;
+  let { width, height } = rotatedShapeCornerDimension;
+  const diffLeft = (width - shapeObj.width) / 2;
+  const diffTop = (height - shapeObj.height) / 2;
+  const cropX = shapeObj.left - shapeObj.width / 2 - diffLeft;
+  const cropY = shapeObj.top - shapeObj.height / 2 - diffTop;
+  let left = width / 2 - diffLeft;
+  let top = height / 2 - diffTop;
+  const fillImageMaxSize = Math.max(width, height) + Math.max(diffLeft, diffTop);
+
+  [left, top, width, height] = calculateFillImageDimensionOutsideCanvas({
+    shapeObj,
+    left,
+    top,
+    width,
+    height,
+    cropX,
+    cropY,
+    flipX,
+    flipY,
+    right,
+    bottom,
+  });
+
+  fillImage.set({
+    angle: flipX === flipY ? -angle : angle,
+    left,
+    top,
+    width,
+    height,
+    cropX,
+    cropY,
+    flipX,
+    flipY,
+  });
+
+  setCustomProperty(fillImage, { fillImageMaxSize });
+}
+
+/**
+ * Make filter option from fabric image
+ * @param {fabric.Image} imageObject - fabric image object
+ * @returns {object}
+ */
+export function makeFilterOptionFromFabricImage(imageObject) {
+  return imageObject.filters.map((filter) => {
+    const [key] = Object.keys(filter);
+
+    return {
+      [FILTER_NAME_VALUE_MAP[key]]: filter[key],
+    };
+  });
+}
+
+/**
+ * Calculate fill image position and size for out of Canvas
+ * @param {Object} options - options for position dimension calculate
+ *   @param {fabric.Object} shapeObj - shape object
+ *   @param {number} left - original left position
+ *   @param {number} top - original top position
+ *   @param {number} width - image width
+ *   @param {number} height - image height
+ *   @param {number} cropX - image cropX
+ *   @param {number} cropY - image cropY
+ *   @param {boolean} flipX - shape flipX
+ *   @param {boolean} flipY - shape flipY
+ * @returns {Object}
+ */
+function calculateFillImageDimensionOutsideCanvas({
+  shapeObj,
+  left,
+  top,
+  width,
+  height,
+  cropX,
+  cropY,
+  flipX,
+  flipY,
+  right,
+  bottom,
+}) {
+  const overflowAreaPositionFixer = (type, outDistance, imageLeft, imageTop) =>
+    calculateDistanceOverflowPart({
+      type,
+      outDistance,
+      shapeObj,
+      flipX,
+      flipY,
+      left: imageLeft,
+      top: imageTop,
+    });
+  const [originalWidth, originalHeight] = [width, height];
+
+  [left, top, width, height] = calculateDimensionLeftTopEdge(overflowAreaPositionFixer, {
+    left,
+    top,
+    width,
+    height,
+    cropX,
+    cropY,
+  });
+
+  [left, top, width, height] = calculateDimensionRightBottomEdge(overflowAreaPositionFixer, {
+    left,
+    top,
+    insideCanvasRealImageWidth: width,
+    insideCanvasRealImageHeight: height,
+    right,
+    bottom,
+    cropX,
+    cropY,
+    originalWidth,
+    originalHeight,
+  });
+
+  return [left, top, width, height];
+}
+
+/**
+ * Calculate fill image position and size for for right bottom edge
+ * @param {Function} overflowAreaPositionFixer - position fixer
+ * @param {Object} options - options for position dimension calculate
+ *   @param {fabric.Object} shapeObj - shape object
+ *   @param {number} left - original left position
+ *   @param {number} top - original top position
+ *   @param {number} width - image width
+ *   @param {number} height - image height
+ *   @param {number} right - image right
+ *   @param {number} bottom - image bottom
+ *   @param {number} cropX - image cropX
+ *   @param {number} cropY - image cropY
+ *   @param {boolean} originalWidth - image original width
+ *   @param {boolean} originalHeight - image original height
+ * @returns {Object}
+ */
+function calculateDimensionRightBottomEdge(
+  overflowAreaPositionFixer,
+  {
+    left,
+    top,
+    insideCanvasRealImageWidth,
+    insideCanvasRealImageHeight,
+    right,
+    bottom,
+    cropX,
+    cropY,
+    originalWidth,
+    originalHeight,
+  }
+) {
+  let [width, height] = [insideCanvasRealImageWidth, insideCanvasRealImageHeight];
+  const { width: canvasWidth, height: canvasHeight } = cachedCanvasImageElement;
+
+  if (right > canvasWidth && cropX > 0) {
+    width = originalWidth - Math.abs(right - canvasWidth);
+  }
+  if (bottom > canvasHeight && cropY > 0) {
+    height = originalHeight - Math.abs(bottom - canvasHeight);
+  }
+
+  const diff = {
+    x: (insideCanvasRealImageWidth - width) / 2,
+    y: (insideCanvasRealImageHeight - height) / 2,
+  };
+
+  forEach(['x', 'y'], (type) => {
+    const cropDistance2 = diff[type];
+    if (cropDistance2 > 0) {
+      [left, top] = overflowAreaPositionFixer(type, cropDistance2, left, top);
+    }
+  });
+
+  return [left, top, width, height];
+}
+
+/**
+ * Calculate fill image position and size for for left top
+ * @param {Function} overflowAreaPositionFixer - position fixer
+ * @param {Object} options - options for position dimension calculate
+ *   @param {fabric.Object} shapeObj - shape object
+ *   @param {number} left - original left position
+ *   @param {number} top - original top position
+ *   @param {number} width - image width
+ *   @param {number} height - image height
+ *   @param {number} cropX - image cropX
+ *   @param {number} cropY - image cropY
+ * @returns {Object}
+ */
+function calculateDimensionLeftTopEdge(
+  overflowAreaPositionFixer,
+  { left, top, width, height, cropX, cropY }
+) {
+  const dimension = {
+    width,
+    height,
+  };
+
+  forEach(['x', 'y'], (type) => {
+    const cropDistance = type === 'x' ? cropX : cropY;
+    const compareSize = dimension[POSITION_DIMENSION_MAP[type]];
+    const standardSize = cachedCanvasImageElement[POSITION_DIMENSION_MAP[type]];
+
+    if (compareSize > standardSize) {
+      const outDistance = (compareSize - standardSize) / 2;
+
+      dimension[POSITION_DIMENSION_MAP[type]] = standardSize;
+      [left, top] = overflowAreaPositionFixer(type, outDistance, left, top);
+    }
+    if (cropDistance < 0) {
+      [left, top] = overflowAreaPositionFixer(type, cropDistance, left, top);
+    }
+  });
+
+  return [left, top, dimension.width, dimension.height];
+}
+
+/**
+ * Make fill property of dynamic pattern type
+ * @param {fabric.Image} canvasImage - canvas background image
+ * @param {Array} filterOption - filter option
+ * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas
+ * @returns {Object}
+ */
+export function makeFillPatternForFilter(canvasImage, filterOption, patternSourceCanvas) {
+  const copiedCanvasElement = getCachedCanvasImageElement(canvasImage);
+  const fillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption);
+  patternSourceCanvas.add(fillImage);
+
+  const fabricProperty = {
+    fill: new fabric.Pattern({
+      source: patternSourceCanvas.getElement(),
+      repeat: 'no-repeat',
+    }),
+  };
+
+  setCustomProperty(fabricProperty, { patternSourceCanvas });
+
+  return fabricProperty;
+}
+
+/**
+ * Reset fill pattern canvas
+ * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas
+ */
+export function resetFillPatternCanvas(patternSourceCanvas) {
+  const [innerImage] = patternSourceCanvas.getObjects();
+  let { fillImageMaxSize } = getCustomProperty(innerImage, 'fillImageMaxSize');
+  fillImageMaxSize = Math.max(1, fillImageMaxSize);
+
+  patternSourceCanvas.setDimensions({
+    width: fillImageMaxSize,
+    height: fillImageMaxSize,
+  });
+  patternSourceCanvas.renderAll();
+}
+
+/**
+ * Remake filter pattern image source
+ * @param {fabric.Object} shapeObj - Shape object
+ * @param {fabric.Image} canvasImage - canvas background image
+ */
+export function reMakePatternImageSource(shapeObj, canvasImage) {
+  const { patternSourceCanvas } = getCustomProperty(shapeObj, 'patternSourceCanvas');
+  const [fillImage] = patternSourceCanvas.getObjects();
+  const filterOption = makeFilterOptionFromFabricImage(fillImage);
+
+  patternSourceCanvas.remove(fillImage);
+
+  const copiedCanvasElement = getCachedCanvasImageElement(canvasImage, true);
+  const newFillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption);
+
+  patternSourceCanvas.add(newFillImage);
+}
+
+/**
+ * Calculate a point line outside the canvas.
+ * @param {fabric.Image} canvasImage - canvas background image
+ * @param {boolean} reset - default is false
+ * @returns {HTMLImageElement}
+ */
+export function getCachedCanvasImageElement(canvasImage, reset = false) {
+  if (!cachedCanvasImageElement || reset) {
+    cachedCanvasImageElement = canvasImage.toCanvasElement();
+  }
+
+  return cachedCanvasImageElement;
+}
+
+/**
+ * Calculate fill image position for out of Canvas
+ * @param {string} type - 'x' or 'y'
+ * @param {fabric.Object} shapeObj - shape object
+ * @param {number} outDistance - distance away
+ * @param {number} left - original left position
+ * @param {number} top - original top position
+ * @returns {Array}
+ */
+function calculateDistanceOverflowPart({ type, shapeObj, outDistance, left, top, flipX, flipY }) {
+  const shapePointNavigation = getShapeEdgePoint(shapeObj);
+  const shapeNeighborPointNavigation = [
+    [1, 2],
+    [0, 3],
+    [0, 3],
+    [1, 2],
+  ];
+  const linePointsOutsideCanvas = calculateLinePointsOutsideCanvas(
+    type,
+    shapePointNavigation,
+    shapeNeighborPointNavigation
+  );
+  const reatAngles = calculateLineAngleOfOutsideCanvas(
+    type,
+    shapePointNavigation,
+    linePointsOutsideCanvas
+  );
+  const { startPointIndex } = linePointsOutsideCanvas;
+  const diffPosition = getReversePositionForFlip({
+    outDistance,
+    startPointIndex,
+    flipX,
+    flipY,
+    reatAngles,
+  });
+
+  return [left + diffPosition.left, top + diffPosition.top];
+}
+
+/**
+ * Calculate fill image position for out of Canvas
+ * @param {number} outDistance - distance away
+ * @param {boolean} flipX - flip x statux
+ * @param {boolean} flipY - flip y statux
+ * @param {Array} reatAngles - Line angle of the rectangle vertex.
+ * @returns {Object} diffPosition
+ */
+function getReversePositionForFlip({ outDistance, startPointIndex, flipX, flipY, reatAngles }) {
+  const rotationChangePoint1 = outDistance * Math.cos((reatAngles[0] * Math.PI) / 180);
+  const rotationChangePoint2 = outDistance * Math.cos((reatAngles[1] * Math.PI) / 180);
+  const isForward = startPointIndex === 2 || startPointIndex === 3;
+  const diffPosition = {
+    top: isForward ? rotationChangePoint1 : rotationChangePoint2,
+    left: isForward ? rotationChangePoint2 : rotationChangePoint1,
+  };
+
+  if (isReverseLeftPositionForFlip(startPointIndex, flipX, flipY)) {
+    diffPosition.left = diffPosition.left * -1;
+  }
+  if (isReverseTopPositionForFlip(startPointIndex, flipX, flipY)) {
+    diffPosition.top = diffPosition.top * -1;
+  }
+
+  return diffPosition;
+}
+
+/**
+ * Calculate a point line outside the canvas.
+ * @param {string} type - 'x' or 'y'
+ * @param {Array} shapePointNavigation - shape edge positions
+ *   @param {Object} shapePointNavigation.lefttop - left top position
+ *   @param {Object} shapePointNavigation.righttop - right top position
+ *   @param {Object} shapePointNavigation.leftbottom - lefttop position
+ *   @param {Object} shapePointNavigation.rightbottom - rightbottom position
+ * @param {Array} shapeNeighborPointNavigation - Array to find adjacent edges.
+ * @returns {Object}
+ */
+function calculateLinePointsOutsideCanvas(
+  type,
+  shapePointNavigation,
+  shapeNeighborPointNavigation
+) {
+  let minimumPoint = 0;
+  let minimumPointIndex = 0;
+  forEach(shapePointNavigation, (point, index) => {
+    if (point[type] < minimumPoint) {
+      minimumPoint = point[type];
+      minimumPointIndex = index;
+    }
+  });
+
+  const [endPointIndex1, endPointIndex2] = shapeNeighborPointNavigation[minimumPointIndex];
+
+  return {
+    startPointIndex: minimumPointIndex,
+    endPointIndex1,
+    endPointIndex2,
+  };
+}
+
+/**
+ * Calculate a point line outside the canvas.
+ * @param {string} type - 'x' or 'y'
+ * @param {Array} shapePointNavigation - shape edge positions
+ *   @param {object} shapePointNavigation.lefttop - left top position
+ *   @param {object} shapePointNavigation.righttop - right top position
+ *   @param {object} shapePointNavigation.leftbottom - lefttop position
+ *   @param {object} shapePointNavigation.rightbottom - rightbottom position
+ * @param {Object} linePointsOfOneVertexIndex - Line point of one vertex
+ *   @param {Object} linePointsOfOneVertexIndex.startPoint - start point index
+ *   @param {Object} linePointsOfOneVertexIndex.endPointIndex1 - end point index
+ *   @param {Object} linePointsOfOneVertexIndex.endPointIndex2 - end point index
+ * @returns {Object}
+ */
+function calculateLineAngleOfOutsideCanvas(type, shapePointNavigation, linePointsOfOneVertexIndex) {
+  const { startPointIndex, endPointIndex1, endPointIndex2 } = linePointsOfOneVertexIndex;
+  const horizontalVerticalAngle = type === 'x' ? 180 : 270;
+
+  return [endPointIndex1, endPointIndex2].map((pointIndex) => {
+    const startPoint = shapePointNavigation[startPointIndex];
+    const endPoint = shapePointNavigation[pointIndex];
+    const diffY = startPoint.y - endPoint.y;
+    const diffX = startPoint.x - endPoint.x;
+
+    return (Math.atan2(diffY, diffX) * 180) / Math.PI - horizontalVerticalAngle;
+  });
+}
+
+/* eslint-disable complexity */
+/**
+ * Calculate a point line outside the canvas for horizontal.
+ * @param {number} startPointIndex - start point index
+ * @param {boolean} flipX - flip x statux
+ * @param {boolean} flipY - flip y statux
+ * @returns {boolean} flipY - flip y statux
+ */
+function isReverseLeftPositionForFlip(startPointIndex, flipX, flipY) {
+  return (
+    (((!flipX && flipY) || (!flipX && !flipY)) && startPointIndex === 0) ||
+    (((flipX && flipY) || (flipX && !flipY)) && startPointIndex === 1) ||
+    (((!flipX && !flipY) || (!flipX && flipY)) && startPointIndex === 2) ||
+    (((flipX && !flipY) || (flipX && flipY)) && startPointIndex === 3)
+  );
+}
+/* eslint-enable complexity */
+
+/* eslint-disable complexity */
+/**
+ * Calculate a point line outside the canvas for vertical.
+ * @param {number} startPointIndex - start point index
+ * @param {boolean} flipX - flip x statux
+ * @param {boolean} flipY - flip y statux
+ * @returns {boolean} flipY - flip y statux
+ */
+function isReverseTopPositionForFlip(startPointIndex, flipX, flipY) {
+  return (
+    (((flipX && !flipY) || (!flipX && !flipY)) && startPointIndex === 0) ||
+    (((!flipX && !flipY) || (flipX && !flipY)) && startPointIndex === 1) ||
+    (((flipX && flipY) || (!flipX && flipY)) && startPointIndex === 2) ||
+    (((!flipX && flipY) || (flipX && flipY)) && startPointIndex === 3)
+  );
+}
+/* eslint-enable complexity */
+
+/**
+ * Shape edge points
+ * @param {fabric.Object} shapeObj - Selected shape object on canvas
+ * @returns {Array} shapeEdgePoint - shape edge positions
+ */
+function getShapeEdgePoint(shapeObj) {
+  return [
+    shapeObj.getPointByOrigin('left', 'top'),
+    shapeObj.getPointByOrigin('right', 'top'),
+    shapeObj.getPointByOrigin('left', 'bottom'),
+    shapeObj.getPointByOrigin('right', 'bottom'),
+  ];
+}
+
+/**
+ * Rotated shape dimension
+ * @param {fabric.Object} shapeObj - Shape object
+ * @returns {Object} Rotated shape dimension
+ */
+function getRotatedDimension(shapeObj) {
+  const [{ x: ax, y: ay }, { x: bx, y: by }, { x: cx, y: cy }, { x: dx, y: dy }] =
+    getShapeEdgePoint(shapeObj);
+
+  const left = Math.min(ax, bx, cx, dx);
+  const top = Math.min(ay, by, cy, dy);
+  const right = Math.max(ax, bx, cx, dx);
+  const bottom = Math.max(ay, by, cy, dy);
+
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+  };
+}
+
+/**
+ * Make fill image
+ * @param {HTMLImageElement} copiedCanvasElement - html image element
+ * @param {number} currentCanvasImageAngle - current canvas angle
+ * @param {Array} filterOption - filter option
+ * @returns {fabric.Image}
+ * @private
+ */
+function makeFillImage(copiedCanvasElement, currentCanvasImageAngle, filterOption) {
+  const fillImage = new fabric.Image(copiedCanvasElement);
+
+  forEach(extend({}, ...filterOption), (value, key) => {
+    const fabricFilterClassName = capitalizeString(key);
+    const filter = new fabric.Image.filters[fabricFilterClassName]({
+      [FILTER_OPTION_MAP[key]]: value,
+    });
+    fillImage.filters.push(filter);
+  });
+  fillImage.applyFilters();
+
+  setCustomProperty(fillImage, {
+    originalAngle: currentCanvasImageAngle,
+    fillImageMaxSize: Math.max(fillImage.width, fillImage.height),
+  });
+  resizeHelper.adjustOriginToCenter(fillImage);
+
+  return fillImage;
+}