ding-image-editor 3.15.3

package/src/js/extension/arrowLine.js

@@ -0,0 +1,172 @@
+import { fabric } from 'fabric';
+
+const ARROW_ANGLE = 30;
+const CHEVRON_SIZE_RATIO = 2.7;
+const TRIANGLE_SIZE_RATIO = 1.7;
+const RADIAN_CONVERSION_VALUE = 180;
+
+const ArrowLine = fabric.util.createClass(
+  fabric.Line,
+  /** @lends Convolute.prototype */ {
+    /**
+     * Line type
+     * @param {String} type
+     * @default
+     */
+    type: 'line',
+
+    /**
+     * Constructor
+     * @param {Array} [points] Array of points
+     * @param {Object} [options] Options object
+     * @override
+     */
+    initialize(points, options = {}) {
+      this.callSuper('initialize', points, options);
+
+      this.arrowType = options.arrowType;
+    },
+
+    /**
+     * Render ArrowLine
+     * @private
+     * @override
+     */
+    _render(ctx) {
+      const { x1: fromX, y1: fromY, x2: toX, y2: toY } = this.calcLinePoints();
+      const linePosition = {
+        fromX,
+        fromY,
+        toX,
+        toY,
+      };
+      this.ctx = ctx;
+      ctx.lineWidth = this.strokeWidth;
+
+      this._renderBasicLinePath(linePosition);
+      this._drawDecoratorPath(linePosition);
+
+      this._renderStroke(ctx);
+    },
+
+    /**
+     * Render Basic line path
+     * @param {Object} linePosition - line position
+     *  @param {number} option.fromX - line start position x
+     *  @param {number} option.fromY - line start position y
+     *  @param {number} option.toX - line end position x
+     *  @param {number} option.toY - line end position y
+     * @private
+     */
+    _renderBasicLinePath({ fromX, fromY, toX, toY }) {
+      this.ctx.beginPath();
+      this.ctx.moveTo(fromX, fromY);
+      this.ctx.lineTo(toX, toY);
+    },
+
+    /**
+     * Render Arrow Head
+     * @param {Object} linePosition - line position
+     *  @param {number} option.fromX - line start position x
+     *  @param {number} option.fromY - line start position y
+     *  @param {number} option.toX - line end position x
+     *  @param {number} option.toY - line end position y
+     * @private
+     */
+    _drawDecoratorPath(linePosition) {
+      this._drawDecoratorPathType('head', linePosition);
+      this._drawDecoratorPathType('tail', linePosition);
+    },
+
+    /**
+     * Render Arrow Head
+     * @param {string} type - 'head' or 'tail'
+     * @param {Object} linePosition - line position
+     *  @param {number} option.fromX - line start position x
+     *  @param {number} option.fromY - line start position y
+     *  @param {number} option.toX - line end position x
+     *  @param {number} option.toY - line end position y
+     * @private
+     */
+    _drawDecoratorPathType(type, linePosition) {
+      switch (this.arrowType[type]) {
+        case 'triangle':
+          this._drawTrianglePath(type, linePosition);
+          break;
+        case 'chevron':
+          this._drawChevronPath(type, linePosition);
+          break;
+        default:
+          break;
+      }
+    },
+
+    /**
+     * Render Triangle Head
+     * @param {string} type - 'head' or 'tail'
+     * @param {Object} linePosition - line position
+     *  @param {number} option.fromX - line start position x
+     *  @param {number} option.fromY - line start position y
+     *  @param {number} option.toX - line end position x
+     *  @param {number} option.toY - line end position y
+     * @private
+     */
+    _drawTrianglePath(type, linePosition) {
+      const decorateSize = this.ctx.lineWidth * TRIANGLE_SIZE_RATIO;
+
+      this._drawChevronPath(type, linePosition, decorateSize);
+      this.ctx.closePath();
+    },
+
+    /**
+     * Render Chevron Head
+     * @param {string} type - 'head' or 'tail'
+     * @param {Object} linePosition - line position
+     *  @param {number} option.fromX - line start position x
+     *  @param {number} option.fromY - line start position y
+     *  @param {number} option.toX - line end position x
+     *  @param {number} option.toY - line end position y
+     * @param {number} decorateSize - decorate size
+     * @private
+     */
+    _drawChevronPath(type, { fromX, fromY, toX, toY }, decorateSize) {
+      const { ctx } = this;
+      if (!decorateSize) {
+        decorateSize = this.ctx.lineWidth * CHEVRON_SIZE_RATIO;
+      }
+
+      const [standardX, standardY] = type === 'head' ? [fromX, fromY] : [toX, toY];
+      const [compareX, compareY] = type === 'head' ? [toX, toY] : [fromX, fromY];
+
+      const angle =
+        (Math.atan2(compareY - standardY, compareX - standardX) * RADIAN_CONVERSION_VALUE) /
+        Math.PI;
+      const rotatedPosition = (changeAngle) =>
+        this.getRotatePosition(decorateSize, changeAngle, {
+          x: standardX,
+          y: standardY,
+        });
+
+      ctx.moveTo(...rotatedPosition(angle + ARROW_ANGLE));
+      ctx.lineTo(standardX, standardY);
+      ctx.lineTo(...rotatedPosition(angle - ARROW_ANGLE));
+    },
+
+    /**
+     * return position from change angle.
+     * @param {number} distance - change distance
+     * @param {number} angle - change angle
+     * @param {Object} referencePosition - reference position
+     * @returns {Array}
+     * @private
+     */
+    getRotatePosition(distance, angle, referencePosition) {
+      const radian = (angle * Math.PI) / RADIAN_CONVERSION_VALUE;
+      const { x, y } = referencePosition;
+
+      return [distance * Math.cos(radian) + x, distance * Math.sin(radian) + y];
+    },
+  }
+);
+
+export default ArrowLine;

package/src/js/extension/blur.js

@@ -0,0 +1,29 @@
+import { fabric } from 'fabric';
+
+/**
+ * Blur object
+ * @class Blur
+ * @extends {fabric.Image.filters.Convolute}
+ * @ignore
+ */
+const Blur = fabric.util.createClass(
+  fabric.Image.filters.Convolute,
+  /** @lends Convolute.prototype */ {
+    /**
+     * Filter type
+     * @param {String} type
+     * @default
+     */
+    type: 'Blur',
+
+    /**
+     * constructor
+     * @override
+     */
+    initialize() {
+      this.matrix = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9];
+    },
+  }
+);
+
+export default Blur;

package/src/js/extension/colorFilter.js

@@ -0,0 +1,104 @@
+import { fabric } from 'fabric';
+
+/**
+ * ColorFilter object
+ * @class ColorFilter
+ * @extends {fabric.Image.filters.BaseFilter}
+ * @ignore
+ */
+const ColorFilter = fabric.util.createClass(
+  fabric.Image.filters.BaseFilter,
+  /** @lends BaseFilter.prototype */ {
+    /**
+     * Filter type
+     * @param {String} type
+     * @default
+     */
+    type: 'ColorFilter',
+
+    /**
+     * Constructor
+     * @member fabric.Image.filters.ColorFilter.prototype
+     * @param {Object} [options] Options object
+     * @param {Number} [options.color='#FFFFFF'] Value of color (0...255)
+     * @param {Number} [options.threshold=45] Value of threshold (0...255)
+     * @override
+     */
+    initialize(options) {
+      if (!options) {
+        options = {};
+      }
+      this.color = options.color || '#FFFFFF';
+      this.threshold = options.threshold || 45;
+      this.x = options.x || null;
+      this.y = options.y || null;
+    },
+
+    /**
+     * Applies filter to canvas element
+     * @param {Object} canvas Canvas object passed by fabric
+     */
+    // eslint-disable-next-line complexity
+    applyTo(canvas) {
+      const { canvasEl } = canvas;
+      const context = canvasEl.getContext('2d');
+      const imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height);
+      const { data } = imageData;
+      const { threshold } = this;
+      let filterColor = fabric.Color.sourceFromHex(this.color);
+      let i, len;
+
+      if (this.x && this.y) {
+        filterColor = this._getColor(imageData, this.x, this.y);
+      }
+
+      for (i = 0, len = data.length; i < len; i += 4) {
+        if (
+          this._isOutsideThreshold(data[i], filterColor[0], threshold) ||
+          this._isOutsideThreshold(data[i + 1], filterColor[1], threshold) ||
+          this._isOutsideThreshold(data[i + 2], filterColor[2], threshold)
+        ) {
+          continue;
+        }
+        data[i] = data[i + 1] = data[i + 2] = data[i + 3] = 0;
+      }
+      context.putImageData(imageData, 0, 0);
+    },
+
+    /**
+     * Check color if it is within threshold
+     * @param {Number} color1 source color
+     * @param {Number} color2 filtering color
+     * @param {Number} threshold threshold
+     * @returns {boolean} true if within threshold or false
+     */
+    _isOutsideThreshold(color1, color2, threshold) {
+      const diff = color1 - color2;
+
+      return Math.abs(diff) > threshold;
+    },
+
+    /**
+     * Get color at (x, y)
+     * @param {Object} imageData of canvas
+     * @param {Number} x left position
+     * @param {Number} y top position
+     * @returns {Array} color array
+     */
+    _getColor(imageData, x, y) {
+      const color = [0, 0, 0, 0];
+      const { data, width } = imageData;
+      const bytes = 4;
+      const position = (width * y + x) * bytes;
+
+      color[0] = data[position];
+      color[1] = data[position + 1];
+      color[2] = data[position + 2];
+      color[3] = data[position + 3];
+
+      return color;
+    },
+  }
+);
+
+export default ColorFilter;