ding-image-editor 3.15.3

package/src/js/component/line.js

@@ -0,0 +1,205 @@
+import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
+import Component from '@/interface/component';
+import ArrowLine from '@/extension/arrowLine';
+import { eventNames, componentNames, fObjectOptions } from '@/consts';
+
+/**
+ * Line
+ * @class Line
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @ignore
+ */
+class Line extends Component {
+  constructor(graphics) {
+    super(componentNames.LINE, graphics);
+
+    /**
+     * Brush width
+     * @type {number}
+     * @private
+     */
+    this._width = 12;
+
+    /**
+     * fabric.Color instance for brush color
+     * @type {fabric.Color}
+     * @private
+     */
+    this._oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');
+
+    /**
+     * Listeners
+     * @type {object.<string, function>}
+     * @private
+     */
+    this._listeners = {
+      mousedown: this._onFabricMouseDown.bind(this),
+      mousemove: this._onFabricMouseMove.bind(this),
+      mouseup: this._onFabricMouseUp.bind(this),
+    };
+  }
+
+  /**
+   * Start drawing line mode
+   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
+   */
+  setHeadOption(setting) {
+    const {
+      arrowType = {
+        head: null,
+        tail: null,
+      },
+    } = setting;
+
+    this._arrowType = arrowType;
+  }
+
+  /**
+   * Start drawing line mode
+   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
+   */
+  start(setting = {}) {
+    const canvas = this.getCanvas();
+
+    canvas.defaultCursor = 'crosshair';
+    canvas.selection = false;
+
+    this.setHeadOption(setting);
+    this.setBrush(setting);
+
+    canvas.forEachObject((obj) => {
+      obj.set({
+        evented: false,
+      });
+    });
+
+    canvas.on({
+      'mouse:down': this._listeners.mousedown,
+    });
+  }
+
+  /**
+   * Set brush
+   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
+   */
+  setBrush(setting) {
+    const brush = this.getCanvas().freeDrawingBrush;
+
+    setting = setting || {};
+    this._width = setting.width || this._width;
+
+    if (setting.color) {
+      this._oColor = new fabric.Color(setting.color);
+    }
+    brush.width = this._width;
+    brush.color = this._oColor.toRgba();
+  }
+
+  /**
+   * End drawing line mode
+   */
+  end() {
+    const canvas = this.getCanvas();
+
+    canvas.defaultCursor = 'default';
+    canvas.selection = true;
+
+    canvas.forEachObject((obj) => {
+      obj.set({
+        evented: true,
+      });
+    });
+
+    canvas.off('mouse:down', this._listeners.mousedown);
+  }
+
+  /**
+   * Mousedown event handler in fabric canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseDown(fEvent) {
+    const canvas = this.getCanvas();
+    const { x, y } = canvas.getPointer(fEvent.e);
+    const points = [x, y, x, y];
+
+    this._line = new ArrowLine(points, {
+      stroke: this._oColor.toRgba(),
+      strokeWidth: this._width,
+      arrowType: this._arrowType,
+      evented: false,
+    });
+
+    this._line.set(fObjectOptions.SELECTION_STYLE);
+
+    canvas.add(this._line);
+
+    canvas.on({
+      'mouse:move': this._listeners.mousemove,
+      'mouse:up': this._listeners.mouseup,
+    });
+
+    this.fire(eventNames.ADD_OBJECT, this._createLineEventObjectProperties());
+  }
+
+  /**
+   * Mousemove event handler in fabric canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseMove(fEvent) {
+    const canvas = this.getCanvas();
+    const pointer = canvas.getPointer(fEvent.e);
+
+    this._line.set({
+      x2: pointer.x,
+      y2: pointer.y,
+    });
+
+    this._line.setCoords();
+
+    canvas.renderAll();
+  }
+
+  /**
+   * Mouseup event handler in fabric canvas
+   * @private
+   */
+  _onFabricMouseUp() {
+    const canvas = this.getCanvas();
+
+    this.fire(eventNames.OBJECT_ADDED, this._createLineEventObjectProperties());
+
+    this._line = null;
+
+    canvas.off({
+      'mouse:move': this._listeners.mousemove,
+      'mouse:up': this._listeners.mouseup,
+    });
+  }
+
+  /**
+   * create line event object properties
+   * @returns {Object} properties line object
+   * @private
+   */
+  _createLineEventObjectProperties() {
+    const params = this.graphics.createObjectProperties(this._line);
+    const { x1, x2, y1, y2 } = this._line;
+
+    return extend({}, params, {
+      startPosition: {
+        x: x1,
+        y: y1,
+      },
+      endPosition: {
+        x: x2,
+        y: y2,
+      },
+    });
+  }
+}
+
+export default Line;

package/src/js/component/resize.js

@@ -0,0 +1,103 @@
+import Component from '@/interface/component';
+import { componentNames } from '@/consts';
+
+/**
+ * Resize components
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @class Resize
+ * @ignore
+ */
+class Resize extends Component {
+  constructor(graphics) {
+    super(componentNames.RESIZE, graphics);
+
+    /**
+     * Current dimensions
+     * @type {Object}
+     * @private
+     */
+    this._dimensions = null;
+
+    /**
+     * Original dimensions
+     * @type {Object}
+     * @private
+     */
+    this._originalDimensions = null;
+  }
+
+  /**
+   * Get current dimensions
+   * @returns {object}
+   */
+  getCurrentDimensions() {
+    const canvasImage = this.getCanvasImage();
+    if (!this._dimensions && canvasImage) {
+      const { width, height } = canvasImage;
+      this._dimensions = { width, height };
+    }
+
+    return this._dimensions;
+  }
+
+  /**
+   * Get original dimensions
+   * @returns {object}
+   */
+  getOriginalDimensions() {
+    return this._originalDimensions;
+  }
+
+  /**
+   * Set original dimensions
+   * @param {object} dimensions - Dimensions
+   */
+  setOriginalDimensions(dimensions) {
+    this._originalDimensions = dimensions;
+  }
+
+  /**
+   * Resize Image
+   * @param {Object} dimensions - Resize dimensions
+   * @returns {Promise}
+   */
+  resize(dimensions) {
+    const canvasImage = this.getCanvasImage();
+    const { width, height, scaleX, scaleY } = canvasImage;
+    const { width: dimensionsWidth, height: dimensionsHeight } = dimensions;
+
+    const scaleValues = {
+      scaleX: dimensionsWidth ? dimensionsWidth / width : scaleX,
+      scaleY: dimensionsHeight ? dimensionsHeight / height : scaleY,
+    };
+
+    if (scaleX !== scaleValues.scaleX || scaleY !== scaleValues.scaleY) {
+      canvasImage.set(scaleValues).setCoords();
+
+      this._dimensions = {
+        width: canvasImage.width * canvasImage.scaleX,
+        height: canvasImage.height * canvasImage.scaleY,
+      };
+    }
+
+    this.adjustCanvasDimensionBase();
+
+    return Promise.resolve();
+  }
+
+  /**
+   * Start resizing
+   */
+  start() {
+    const dimensions = this.getCurrentDimensions();
+    this.setOriginalDimensions(dimensions);
+  }
+
+  /**
+   * End resizing
+   */
+  end() {}
+}
+
+export default Resize;

package/src/js/component/rotation.js

@@ -0,0 +1,91 @@
+import { fabric } from 'fabric';
+import Component from '@/interface/component';
+import { componentNames } from '@/consts';
+
+/**
+ * Image Rotation component
+ * @class Rotation
+ * @extends {Component}
+ * @param {Graphics} graphics - Graphics instance
+ * @ignore
+ */
+class Rotation extends Component {
+  constructor(graphics) {
+    super(componentNames.ROTATION, graphics);
+  }
+
+  /**
+   * Get current angle
+   * @returns {Number}
+   */
+  getCurrentAngle() {
+    return this.getCanvasImage().angle;
+  }
+
+  /**
+   * Set angle of the image
+   *
+   *  Do not call "this.setImageProperties" for setting angle directly.
+   *  Before setting angle, The originX,Y of image should be set to center.
+   *      See "http://fabricjs.com/docs/fabric.Object.html#setAngle"
+   *
+   * @param {number} angle - Angle value
+   * @returns {Promise}
+   */
+  setAngle(angle) {
+    const oldAngle = this.getCurrentAngle() % 360; // The angle is lower than 2*PI(===360 degrees)
+
+    angle %= 360;
+
+    const canvasImage = this.getCanvasImage();
+    const oldImageCenter = canvasImage.getCenterPoint();
+    canvasImage.set({ angle }).setCoords();
+    this.adjustCanvasDimension();
+    const newImageCenter = canvasImage.getCenterPoint();
+    this._rotateForEachObject(oldImageCenter, newImageCenter, angle - oldAngle);
+
+    return Promise.resolve(angle);
+  }
+
+  /**
+   * Rotate for each object
+   * @param {fabric.Point} oldImageCenter - Image center point before rotation
+   * @param {fabric.Point} newImageCenter - Image center point after rotation
+   * @param {number} angleDiff - Image angle difference after rotation
+   * @private
+   */
+  _rotateForEachObject(oldImageCenter, newImageCenter, angleDiff) {
+    const canvas = this.getCanvas();
+    const centerDiff = {
+      x: oldImageCenter.x - newImageCenter.x,
+      y: oldImageCenter.y - newImageCenter.y,
+    };
+
+    canvas.forEachObject((obj) => {
+      const objCenter = obj.getCenterPoint();
+      const radian = fabric.util.degreesToRadians(angleDiff);
+      const newObjCenter = fabric.util.rotatePoint(objCenter, oldImageCenter, radian);
+
+      obj.set({
+        left: newObjCenter.x - centerDiff.x,
+        top: newObjCenter.y - centerDiff.y,
+        angle: (obj.angle + angleDiff) % 360,
+      });
+      obj.setCoords();
+    });
+    canvas.renderAll();
+  }
+
+  /**
+   * Rotate the image
+   * @param {number} additionalAngle - Additional angle
+   * @returns {Promise}
+   */
+  rotate(additionalAngle) {
+    const current = this.getCurrentAngle();
+
+    return this.setAngle(current + additionalAngle);
+  }
+}
+
+export default Rotation;