ding-image-editor 3.15.3

package/src/js/component/cropper.js

@@ -0,0 +1,407 @@
+import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
+import Component from '@/interface/component';
+import Cropzone from '@/extension/cropzone';
+import { keyCodes, componentNames, CROPZONE_DEFAULT_OPTIONS } from '@/consts';
+import { clamp, fixFloatingPoint } from '@/util';
+
+const MOUSE_MOVE_THRESHOLD = 10;
+const DEFAULT_OPTION = {
+  presetRatio: null,
+  top: -10,
+  left: -10,
+  height: 1,
+  width: 1,
+};
+
+/**
+ * Cropper components
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @class Cropper
+ * @ignore
+ */
+class Cropper extends Component {
+  constructor(graphics) {
+    super(componentNames.CROPPER, graphics);
+
+    /**
+     * Cropzone
+     * @type {Cropzone}
+     * @private
+     */
+    this._cropzone = null;
+
+    /**
+     * StartX of Cropzone
+     * @type {number}
+     * @private
+     */
+    this._startX = null;
+
+    /**
+     * StartY of Cropzone
+     * @type {number}
+     * @private
+     */
+    this._startY = null;
+
+    /**
+     * State whether shortcut key is pressed or not
+     * @type {boolean}
+     * @private
+     */
+    this._withShiftKey = false;
+
+    /**
+     * Listeners
+     * @type {object.<string, function>}
+     * @private
+     */
+    this._listeners = {
+      keydown: this._onKeyDown.bind(this),
+      keyup: this._onKeyUp.bind(this),
+      mousedown: this._onFabricMouseDown.bind(this),
+      mousemove: this._onFabricMouseMove.bind(this),
+      mouseup: this._onFabricMouseUp.bind(this),
+    };
+  }
+
+  /**
+   * Start cropping
+   */
+  start() {
+    if (this._cropzone) {
+      return;
+    }
+    const canvas = this.getCanvas();
+
+    canvas.forEachObject((obj) => {
+      // {@link http://fabricjs.com/docs/fabric.Object.html#evented}
+      obj.evented = false;
+    });
+
+    this._cropzone = new Cropzone(
+      canvas,
+      extend(
+        {
+          left: 0,
+          top: 0,
+          width: 0.5,
+          height: 0.5,
+          strokeWidth: 0, // {@link https://github.com/kangax/fabric.js/issues/2860}
+          cornerSize: 10,
+          cornerColor: 'black',
+          fill: 'transparent',
+        },
+        CROPZONE_DEFAULT_OPTIONS,
+        this.graphics.cropSelectionStyle
+      )
+    );
+
+    canvas.discardActiveObject();
+    canvas.add(this._cropzone);
+    canvas.on('mouse:down', this._listeners.mousedown);
+    canvas.selection = false;
+    canvas.defaultCursor = 'crosshair';
+
+    fabric.util.addListener(document, 'keydown', this._listeners.keydown);
+    fabric.util.addListener(document, 'keyup', this._listeners.keyup);
+  }
+
+  /**
+   * End cropping
+   */
+  end() {
+    const canvas = this.getCanvas();
+    const cropzone = this._cropzone;
+
+    if (!cropzone) {
+      return;
+    }
+    canvas.remove(cropzone);
+    canvas.selection = true;
+    canvas.defaultCursor = 'default';
+    canvas.off('mouse:down', this._listeners.mousedown);
+    canvas.forEachObject((obj) => {
+      obj.evented = true;
+    });
+
+    this._cropzone = null;
+
+    fabric.util.removeListener(document, 'keydown', this._listeners.keydown);
+    fabric.util.removeListener(document, 'keyup', this._listeners.keyup);
+  }
+
+  /**
+   * Change cropzone visible
+   * @param {boolean} visible - cropzone visible state
+   */
+  changeVisibility(visible) {
+    if (this._cropzone) {
+      this._cropzone.set({ visible });
+    }
+  }
+
+  /**
+   * onMousedown handler in fabric canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
+   * @private
+   */
+  _onFabricMouseDown(fEvent) {
+    const canvas = this.getCanvas();
+
+    if (fEvent.target) {
+      return;
+    }
+
+    canvas.selection = false;
+    const coord = canvas.getPointer(fEvent.e);
+
+    this._startX = coord.x;
+    this._startY = coord.y;
+
+    canvas.on({
+      'mouse:move': this._listeners.mousemove,
+      'mouse:up': this._listeners.mouseup,
+    });
+  }
+
+  /**
+   * onMousemove handler in fabric canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
+   * @private
+   */
+  _onFabricMouseMove(fEvent) {
+    const canvas = this.getCanvas();
+    const pointer = canvas.getPointer(fEvent.e);
+    const { x, y } = pointer;
+    const cropzone = this._cropzone;
+
+    if (Math.abs(x - this._startX) + Math.abs(y - this._startY) > MOUSE_MOVE_THRESHOLD) {
+      canvas.remove(cropzone);
+      cropzone.set(this._calcRectDimensionFromPoint(x, y, cropzone.presetRatio));
+
+      canvas.add(cropzone);
+      canvas.setActiveObject(cropzone);
+    }
+  }
+
+  /**
+   * Get rect dimension setting from Canvas-Mouse-Position(x, y)
+   * @param {number} x - Canvas-Mouse-Position x
+   * @param {number} y - Canvas-Mouse-Position Y
+   * @param {number|null} presetRatio - fixed aspect ratio (width/height) of the cropzone (null if not set)
+   * @returns {{left: number, top: number, width: number, height: number}}
+   * @private
+   */
+  _calcRectDimensionFromPoint(x, y, presetRatio = null) {
+    const canvas = this.getCanvas();
+    const canvasWidth = canvas.getWidth();
+    const canvasHeight = canvas.getHeight();
+    const startX = this._startX;
+    const startY = this._startY;
+    let left = clamp(x, 0, startX);
+    let top = clamp(y, 0, startY);
+    let width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left
+    let height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top
+
+    if (this._withShiftKey && !presetRatio) {
+      // make fixed ratio cropzone
+      if (width > height) {
+        height = width;
+      } else if (height > width) {
+        width = height;
+      }
+
+      if (startX >= x) {
+        left = startX - width;
+      }
+
+      if (startY >= y) {
+        top = startY - height;
+      }
+    } else if (presetRatio) {
+      // Restrict cropzone to given presetRatio
+      height = width / presetRatio;
+
+      // If moving in a direction where the top left corner moves (ie. top-left, bottom-left, top-right)
+      // the left and/or top values has to be changed based on the new height/width
+      if (startX >= x) {
+        left = clamp(startX - width, 0, canvasWidth);
+      }
+
+      if (startY >= y) {
+        top = clamp(startY - height, 0, canvasHeight);
+      }
+
+      // Check if the new height is too large
+      if (top + height > canvasHeight) {
+        height = canvasHeight - top; // Set height to max available height
+        width = height * presetRatio; // Restrict cropzone to given presetRatio based on the new height
+
+        // If moving in a direction where the top left corner moves (ie. top-left, bottom-left, top-right)
+        // the left and/or top values has to be changed based on the new height/width
+        if (startX >= x) {
+          left = clamp(startX - width, 0, canvasWidth);
+        }
+
+        if (startY >= y) {
+          top = clamp(startY - height, 0, canvasHeight);
+        }
+      }
+    }
+
+    return {
+      left,
+      top,
+      width,
+      height,
+    };
+  }
+
+  /**
+   * onMouseup handler in fabric canvas
+   * @private
+   */
+  _onFabricMouseUp() {
+    const cropzone = this._cropzone;
+    const listeners = this._listeners;
+    const canvas = this.getCanvas();
+
+    canvas.setActiveObject(cropzone);
+    canvas.off({
+      'mouse:move': listeners.mousemove,
+      'mouse:up': listeners.mouseup,
+    });
+  }
+
+  /**
+   * Get cropped image data
+   * @param {Object} cropRect cropzone rect
+   *  @param {Number} cropRect.left left position
+   *  @param {Number} cropRect.top top position
+   *  @param {Number} cropRect.width width
+   *  @param {Number} cropRect.height height
+   * @returns {?{imageName: string, url: string}} cropped Image data
+   */
+  getCroppedImageData(cropRect) {
+    const canvas = this.getCanvas();
+    const containsCropzone = canvas.contains(this._cropzone);
+    if (!cropRect) {
+      return null;
+    }
+
+    if (containsCropzone) {
+      canvas.remove(this._cropzone);
+    }
+
+    const imageData = {
+      imageName: this.getImageName(),
+      url: canvas.toDataURL(cropRect),
+    };
+
+    if (containsCropzone) {
+      canvas.add(this._cropzone);
+    }
+
+    return imageData;
+  }
+
+  /**
+   * Get cropped rect
+   * @returns {Object} rect
+   */
+  getCropzoneRect() {
+    const cropzone = this._cropzone;
+
+    if (!cropzone.isValid()) {
+      return null;
+    }
+
+    return {
+      left: cropzone.left,
+      top: cropzone.top,
+      width: cropzone.width,
+      height: cropzone.height,
+    };
+  }
+
+  /**
+   * Set a cropzone square
+   * @param {number} [presetRatio] - preset ratio
+   */
+  setCropzoneRect(presetRatio) {
+    const canvas = this.getCanvas();
+    const cropzone = this._cropzone;
+
+    canvas.discardActiveObject();
+    canvas.selection = false;
+    canvas.remove(cropzone);
+
+    cropzone.set(presetRatio ? this._getPresetPropertiesForCropSize(presetRatio) : DEFAULT_OPTION);
+
+    canvas.add(cropzone);
+    canvas.selection = true;
+
+    if (presetRatio) {
+      canvas.setActiveObject(cropzone);
+    }
+  }
+
+  /**
+   * get a cropzone square info
+   * @param {number} presetRatio - preset ratio
+   * @returns {{presetRatio: number, left: number, top: number, width: number, height: number}}
+   * @private
+   */
+  _getPresetPropertiesForCropSize(presetRatio) {
+    const canvas = this.getCanvas();
+    const originalWidth = canvas.getWidth();
+    const originalHeight = canvas.getHeight();
+
+    const standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;
+    const getScale = (value, orignalValue) => (value > orignalValue ? orignalValue / value : 1);
+
+    let width = standardSize * presetRatio;
+    let height = standardSize;
+
+    const scaleWidth = getScale(width, originalWidth);
+    [width, height] = [width, height].map((sizeValue) => sizeValue * scaleWidth);
+
+    const scaleHeight = getScale(height, originalHeight);
+    [width, height] = [width, height].map((sizeValue) => fixFloatingPoint(sizeValue * scaleHeight));
+
+    return {
+      presetRatio,
+      top: (originalHeight - height) / 2,
+      left: (originalWidth - width) / 2,
+      width,
+      height,
+    };
+  }
+
+  /**
+   * Keydown event handler
+   * @param {KeyboardEvent} e - Event object
+   * @private
+   */
+  _onKeyDown(e) {
+    if (e.keyCode === keyCodes.SHIFT) {
+      this._withShiftKey = true;
+    }
+  }
+
+  /**
+   * Keyup event handler
+   * @param {KeyboardEvent} e - Event object
+   * @private
+   */
+  _onKeyUp(e) {
+    if (e.keyCode === keyCodes.SHIFT) {
+      this._withShiftKey = false;
+    }
+  }
+}
+
+export default Cropper;

package/src/js/component/filter.js

@@ -0,0 +1,229 @@
+import isUndefined from 'tui-code-snippet/type/isUndefined';
+import extend from 'tui-code-snippet/object/extend';
+import forEach from 'tui-code-snippet/collection/forEach';
+import { fabric } from 'fabric';
+import Component from '@/interface/component';
+import { rejectMessages, componentNames } from '@/consts';
+import Mask from '@/extension/mask';
+import Sharpen from '@/extension/sharpen';
+import Emboss from '@/extension/emboss';
+import ColorFilter from '@/extension/colorFilter';
+
+const { filters } = fabric.Image;
+
+filters.Mask = Mask;
+filters.Sharpen = Sharpen;
+filters.Emboss = Emboss;
+filters.ColorFilter = ColorFilter;
+
+/**
+ * Filter
+ * @class Filter
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @ignore
+ */
+class Filter extends Component {
+  constructor(graphics) {
+    super(componentNames.FILTER, graphics);
+  }
+
+  /**
+   * Add filter to source image (a specific filter is added on fabric.js)
+   * @param {string} type - Filter type
+   * @param {Object} [options] - Options of filter
+   * @returns {Promise}
+   */
+  add(type, options) {
+    return new Promise((resolve, reject) => {
+      const sourceImg = this._getSourceImage();
+      const canvas = this.getCanvas();
+      let imgFilter = this._getFilter(sourceImg, type);
+      if (!imgFilter) {
+        imgFilter = this._createFilter(sourceImg, type, options);
+      }
+
+      if (!imgFilter) {
+        reject(rejectMessages.invalidParameters);
+      }
+
+      this._changeFilterValues(imgFilter, options);
+
+      this._apply(sourceImg, () => {
+        canvas.renderAll();
+        resolve({
+          type,
+          action: 'add',
+          options,
+        });
+      });
+    });
+  }
+
+  /**
+   * Remove filter to source image
+   * @param {string} type - Filter type
+   * @returns {Promise}
+   */
+  remove(type) {
+    return new Promise((resolve, reject) => {
+      const sourceImg = this._getSourceImage();
+      const canvas = this.getCanvas();
+      const options = this.getOptions(type);
+
+      if (!sourceImg.filters.length) {
+        reject(rejectMessages.unsupportedOperation);
+      }
+
+      this._removeFilter(sourceImg, type);
+
+      this._apply(sourceImg, () => {
+        canvas.renderAll();
+        resolve({
+          type,
+          action: 'remove',
+          options,
+        });
+      });
+    });
+  }
+
+  /**
+   * Whether this has the filter or not
+   * @param {string} type - Filter type
+   * @returns {boolean} true if it has the filter
+   */
+  hasFilter(type) {
+    return !!this._getFilter(this._getSourceImage(), type);
+  }
+
+  /**
+   * Get a filter options
+   * @param {string} type - Filter type
+   * @returns {Object} filter options or null if there is no that filter
+   */
+  getOptions(type) {
+    const sourceImg = this._getSourceImage();
+    const imgFilter = this._getFilter(sourceImg, type);
+    if (!imgFilter) {
+      return null;
+    }
+
+    return extend({}, imgFilter.options);
+  }
+
+  /**
+   * Change filter values
+   * @param {Object} imgFilter object of filter
+   * @param {Object} options object
+   * @private
+   */
+  _changeFilterValues(imgFilter, options) {
+    forEach(options, (value, key) => {
+      if (!isUndefined(imgFilter[key])) {
+        imgFilter[key] = value;
+      }
+    });
+    forEach(imgFilter.options, (value, key) => {
+      if (!isUndefined(options[key])) {
+        imgFilter.options[key] = options[key];
+      }
+    });
+  }
+
+  /**
+   * Apply filter
+   * @param {fabric.Image} sourceImg - Source image to apply filter
+   * @param {function} callback - Executed function after applying filter
+   * @private
+   */
+  _apply(sourceImg, callback) {
+    sourceImg.filters.push();
+    const result = sourceImg.applyFilters();
+    if (result) {
+      callback();
+    }
+  }
+
+  /**
+   * Get source image on canvas
+   * @returns {fabric.Image} Current source image on canvas
+   * @private
+   */
+  _getSourceImage() {
+    return this.getCanvasImage();
+  }
+
+  /**
+   * Create filter instance
+   * @param {fabric.Image} sourceImg - Source image to apply filter
+   * @param {string} type - Filter type
+   * @param {Object} [options] - Options of filter
+   * @returns {Object} Fabric object of filter
+   * @private
+   */
+  _createFilter(sourceImg, type, options) {
+    let filterObj;
+    // capitalize first letter for matching with fabric image filter name
+    const fabricType = this._getFabricFilterType(type);
+    const ImageFilter = fabric.Image.filters[fabricType];
+    if (ImageFilter) {
+      filterObj = new ImageFilter(options);
+      filterObj.options = options;
+      sourceImg.filters.push(filterObj);
+    }
+
+    return filterObj;
+  }
+
+  /**
+   * Get applied filter instance
+   * @param {fabric.Image} sourceImg - Source image to apply filter
+   * @param {string} type - Filter type
+   * @returns {Object} Fabric object of filter
+   * @private
+   */
+  _getFilter(sourceImg, type) {
+    let imgFilter = null;
+
+    if (sourceImg) {
+      const fabricType = this._getFabricFilterType(type);
+      const { length } = sourceImg.filters;
+      let item, i;
+
+      for (i = 0; i < length; i += 1) {
+        item = sourceImg.filters[i];
+        if (item.type === fabricType) {
+          imgFilter = item;
+          break;
+        }
+      }
+    }
+
+    return imgFilter;
+  }
+
+  /**
+   * Remove applied filter instance
+   * @param {fabric.Image} sourceImg - Source image to apply filter
+   * @param {string} type - Filter type
+   * @private
+   */
+  _removeFilter(sourceImg, type) {
+    const fabricType = this._getFabricFilterType(type);
+    sourceImg.filters = sourceImg.filters.filter((value) => value.type !== fabricType);
+  }
+
+  /**
+   * Change filter class name to fabric's, especially capitalizing first letter
+   * @param {string} type - Filter type
+   * @example
+   * 'grayscale' -> 'Grayscale'
+   * @returns {string} Fabric filter class name
+   */
+  _getFabricFilterType(type) {
+    return type.charAt(0).toUpperCase() + type.slice(1);
+  }
+}
+
+export default Filter;