ding-image-editor 3.15.3

package/src/js/component/flip.js

@@ -0,0 +1,146 @@
+import extend from 'tui-code-snippet/object/extend';
+import Component from '@/interface/component';
+import { componentNames, rejectMessages } from '@/consts';
+
+/**
+ * Flip
+ * @class Flip
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @ignore
+ */
+class Flip extends Component {
+  constructor(graphics) {
+    super(componentNames.FLIP, graphics);
+  }
+
+  /**
+   * Get current flip settings
+   * @returns {{flipX: Boolean, flipY: Boolean}}
+   */
+  getCurrentSetting() {
+    const canvasImage = this.getCanvasImage();
+
+    return {
+      flipX: canvasImage.flipX,
+      flipY: canvasImage.flipY,
+    };
+  }
+
+  /**
+   * Set flipX, flipY
+   * @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting
+   * @returns {Promise}
+   */
+  set(newSetting) {
+    const setting = this.getCurrentSetting();
+    const isChangingFlipX = setting.flipX !== newSetting.flipX;
+    const isChangingFlipY = setting.flipY !== newSetting.flipY;
+
+    if (!isChangingFlipX && !isChangingFlipY) {
+      return Promise.reject(rejectMessages.flip);
+    }
+
+    extend(setting, newSetting);
+    this.setImageProperties(setting, true);
+    this._invertAngle(isChangingFlipX, isChangingFlipY);
+    this._flipObjects(isChangingFlipX, isChangingFlipY);
+
+    return Promise.resolve({
+      flipX: setting.flipX,
+      flipY: setting.flipY,
+      angle: this.getCanvasImage().angle,
+    });
+  }
+
+  /**
+   * Invert image angle for flip
+   * @param {boolean} isChangingFlipX - Change flipX
+   * @param {boolean} isChangingFlipY - Change flipY
+   */
+  _invertAngle(isChangingFlipX, isChangingFlipY) {
+    const canvasImage = this.getCanvasImage();
+    let { angle } = canvasImage;
+
+    if (isChangingFlipX) {
+      angle *= -1;
+    }
+    if (isChangingFlipY) {
+      angle *= -1;
+    }
+    canvasImage.rotate(parseFloat(angle)).setCoords(); // parseFloat for -0 to 0
+  }
+
+  /**
+   * Flip objects
+   * @param {boolean} isChangingFlipX - Change flipX
+   * @param {boolean} isChangingFlipY - Change flipY
+   * @private
+   */
+  _flipObjects(isChangingFlipX, isChangingFlipY) {
+    const canvas = this.getCanvas();
+
+    if (isChangingFlipX) {
+      canvas.forEachObject((obj) => {
+        obj
+          .set({
+            angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0
+            flipX: !obj.flipX,
+            left: canvas.width - obj.left,
+          })
+          .setCoords();
+      });
+    }
+    if (isChangingFlipY) {
+      canvas.forEachObject((obj) => {
+        obj
+          .set({
+            angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0
+            flipY: !obj.flipY,
+            top: canvas.height - obj.top,
+          })
+          .setCoords();
+      });
+    }
+    canvas.renderAll();
+  }
+
+  /**
+   * Reset flip settings
+   * @returns {Promise}
+   */
+  reset() {
+    return this.set({
+      flipX: false,
+      flipY: false,
+    });
+  }
+
+  /**
+   * Flip x
+   * @returns {Promise}
+   */
+  flipX() {
+    const current = this.getCurrentSetting();
+
+    return this.set({
+      flipX: !current.flipX,
+      flipY: current.flipY,
+    });
+  }
+
+  /**
+   * Flip y
+   * @returns {Promise}
+   */
+  flipY() {
+    const current = this.getCurrentSetting();
+
+    return this.set({
+      flipX: current.flipX,
+      flipY: !current.flipY,
+    });
+  }
+}
+
+export default Flip;

package/src/js/component/freeDrawing.js

@@ -0,0 +1,144 @@
+import { fabric } from 'fabric';
+import Component from '@/interface/component';
+import { componentNames } from '@/consts';
+
+/**
+ * FreeDrawing
+ * @class FreeDrawing
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @ignore
+ */
+class FreeDrawing extends Component {
+  constructor(graphics) {
+    super(componentNames.FREE_DRAWING, graphics);
+
+    /**
+     * Brush width
+     * @type {number}
+     */
+    this.width = 12;
+
+    /**
+     * fabric.Color instance for brush color
+     * @type {fabric.Color}
+     */
+    this.oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');
+    this._handlers = {
+      mousedown: this._onFabricMouseDown.bind(this),
+      mousemove: this._onFabricMouseMove.bind(this),
+      mouseup: this._onFabricMouseUp.bind(this),
+    };
+  }
+
+  /**
+   * Start free drawing mode
+   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
+   */
+  start(setting) {
+    console.log(setting);
+    if (setting?.masik) {
+      this.startMasik();
+    } else {
+      const canvas = this.getCanvas();
+      canvas.isDrawingMode = true;
+      this.setBrush(setting);
+    }
+  }
+
+  /**
+   * 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 free drawing mode
+   */
+  end() {
+    const canvas = this.getCanvas();
+    canvas.isDrawingMode = false;
+    canvas.selection = true;
+    canvas.off('mouse:down', this._handlers.mousedown);
+  }
+
+  /**
+   * Set masik
+   */
+  startMasik() {
+    const canvas = this.getCanvas();
+    canvas.selection = false;
+    canvas.on('mouse:down', this._handlers.mousedown);
+  }
+
+  /**
+   * MouseDown event handler on canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseDown() {
+    const canvas = this.getCanvas();
+    canvas.on({
+      'mouse:move': this._handlers.mousemove,
+      'mouse:up': this._handlers.mouseup,
+    });
+  }
+
+  /**
+   * MouseDown event handler on canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseMove(fEvent) {
+    const canvas = this.getCanvas();
+    const blockSize = 20;
+    const startPoints = canvas.getPointer(fEvent.e);
+    const startX = startPoints.x;
+    const startY = startPoints.y;
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.getImageData(startX, startY, blockSize, blockSize);
+    const { data } = imageData;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    for (let i = 0; i < data.length; i += 4) {
+      r += data[i];
+      g += data[i + 1];
+      b += data[i + 2];
+    }
+    r = Math.floor(r / (blockSize * blockSize));
+    g = Math.floor(g / (blockSize * blockSize));
+    b = Math.floor(b / (blockSize * blockSize));
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = r;
+      data[i + 1] = g;
+      data[i + 2] = b;
+      data[i + 3] = 255; // Alpha值
+    }
+    ctx.putImageData(imageData, startX, startY);
+  }
+
+  /**
+   * MouseUp event handler on canvas
+   * @private
+   */
+  _onFabricMouseUp() {
+    const canvas = this.getCanvas();
+    canvas.off({
+      'mouse:move': this._handlers.mousemove,
+      'mouse:up': this._handlers.mouseup,
+    });
+  }
+}
+
+export default FreeDrawing;

package/src/js/component/icon.js

@@ -0,0 +1,246 @@
+import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
+import forEach from 'tui-code-snippet/collection/forEach';
+import Component from '@/interface/component';
+import { eventNames as events, rejectMessages, componentNames, fObjectOptions } from '@/consts';
+
+const pathMap = {
+  arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z',
+  cancel:
+    'M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 ' +
+    'L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z',
+};
+
+/**
+ * Icon
+ * @class Icon
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @ignore
+ */
+class Icon extends Component {
+  constructor(graphics) {
+    super(componentNames.ICON, graphics);
+
+    /**
+     * Default icon color
+     * @type {string}
+     */
+    this._oColor = '#000000';
+
+    /**
+     * Path value of each icon type
+     * @type {Object}
+     */
+    this._pathMap = pathMap;
+
+    /**
+     * Type of the drawing icon
+     * @type {string}
+     * @private
+     */
+    this._type = null;
+
+    /**
+     * Color of the drawing icon
+     * @type {string}
+     * @private
+     */
+    this._iconColor = null;
+
+    /**
+     * Event handler list
+     * @type {Object}
+     * @private
+     */
+    this._handlers = {
+      mousedown: this._onFabricMouseDown.bind(this),
+      mousemove: this._onFabricMouseMove.bind(this),
+      mouseup: this._onFabricMouseUp.bind(this),
+    };
+  }
+
+  /**
+   * Set states of the current drawing shape
+   * @ignore
+   * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)
+   * @param {string} iconColor - Icon foreground color
+   */
+  setStates(type, iconColor) {
+    this._type = type;
+    this._iconColor = iconColor;
+  }
+
+  /**
+   * Start to draw the icon on canvas
+   * @ignore
+   */
+  start() {
+    const canvas = this.getCanvas();
+    canvas.selection = false;
+    canvas.on('mouse:down', this._handlers.mousedown);
+  }
+
+  /**
+   * End to draw the icon on canvas
+   * @ignore
+   */
+  end() {
+    const canvas = this.getCanvas();
+
+    canvas.selection = true;
+    canvas.off({
+      'mouse:down': this._handlers.mousedown,
+    });
+  }
+
+  /**
+   * Add icon
+   * @param {string} type - Icon type
+   * @param {Object} options - Icon options
+   *      @param {string} [options.fill] - Icon foreground color
+   *      @param {string} [options.left] - Icon x position
+   *      @param {string} [options.top] - Icon y position
+   * @returns {Promise}
+   */
+  add(type, options) {
+    return new Promise((resolve, reject) => {
+      const canvas = this.getCanvas();
+      const path = this._pathMap[type];
+      const selectionStyle = fObjectOptions.SELECTION_STYLE;
+      const icon = path ? this._createIcon(path) : null;
+      this._icon = icon;
+
+      if (!icon) {
+        reject(rejectMessages.invalidParameters);
+      }
+
+      icon.set(
+        extend(
+          {
+            type: 'icon',
+            fill: this._oColor,
+          },
+          selectionStyle,
+          options,
+          this.graphics.controlStyle
+        )
+      );
+
+      canvas.add(icon).setActiveObject(icon);
+
+      resolve(this.graphics.createObjectProperties(icon));
+    });
+  }
+
+  /**
+   * Register icon paths
+   * @param {{key: string, value: string}} pathInfos - Path infos
+   */
+  registerPaths(pathInfos) {
+    forEach(
+      pathInfos,
+      (path, type) => {
+        this._pathMap[type] = path;
+      },
+      this
+    );
+  }
+
+  /**
+   * Set icon object color
+   * @param {string} color - Color to set
+   * @param {fabric.Path}[obj] - Current activated path object
+   */
+  setColor(color, obj) {
+    this._oColor = color;
+
+    if (obj && obj.get('type') === 'icon') {
+      obj.set({ fill: this._oColor });
+      this.getCanvas().renderAll();
+    }
+  }
+
+  /**
+   * Get icon color
+   * @param {fabric.Path}[obj] - Current activated path object
+   * @returns {string} color
+   */
+  getColor(obj) {
+    return obj.fill;
+  }
+
+  /**
+   * Create icon object
+   * @param {string} path - Path value to create icon
+   * @returns {fabric.Path} Path object
+   */
+  _createIcon(path) {
+    return new fabric.Path(path);
+  }
+
+  /**
+   * MouseDown event handler on canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseDown(fEvent) {
+    const canvas = this.getCanvas();
+
+    this._startPoint = canvas.getPointer(fEvent.e);
+    const { x: left, y: top } = this._startPoint;
+
+    this.add(this._type, {
+      left,
+      top,
+      fill: this._iconColor,
+    }).then(() => {
+      this.fire(events.ADD_OBJECT, this.graphics.createObjectProperties(this._icon));
+      canvas.on('mouse:move', this._handlers.mousemove);
+      canvas.on('mouse:up', this._handlers.mouseup);
+    });
+  }
+
+  /**
+   * MouseMove event handler on canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseMove(fEvent) {
+    const canvas = this.getCanvas();
+
+    if (!this._icon) {
+      return;
+    }
+    const moveOriginPointer = canvas.getPointer(fEvent.e);
+
+    const scaleX = (moveOriginPointer.x - this._startPoint.x) / this._icon.width;
+    const scaleY = (moveOriginPointer.y - this._startPoint.y) / this._icon.height;
+
+    this._icon.set({
+      scaleX: Math.abs(scaleX * 2),
+      scaleY: Math.abs(scaleY * 2),
+    });
+
+    this._icon.setCoords();
+    canvas.renderAll();
+  }
+
+  /**
+   * MouseUp event handler on canvas
+   * @private
+   */
+  _onFabricMouseUp() {
+    const canvas = this.getCanvas();
+
+    this.fire(events.OBJECT_ADDED, this.graphics.createObjectProperties(this._icon));
+
+    this._icon = null;
+
+    canvas.off('mouse:down', this._handlers.mousedown);
+    canvas.off('mouse:move', this._handlers.mousemove);
+    canvas.off('mouse:up', this._handlers.mouseup);
+  }
+}
+
+export default Icon;

package/src/js/component/imageLoader.js

@@ -0,0 +1,84 @@
+import Component from '@/interface/component';
+import { componentNames, rejectMessages } from '@/consts';
+
+const imageOption = {
+  padding: 0,
+  crossOrigin: 'Anonymous',
+};
+
+/**
+ * ImageLoader components
+ * @extends {Component}
+ * @class ImageLoader
+ * @param {Graphics} graphics - Graphics instance
+ * @ignore
+ */
+class ImageLoader extends Component {
+  constructor(graphics) {
+    super(componentNames.IMAGE_LOADER, graphics);
+  }
+
+  /**
+   * Load image from url
+   * @param {?string} imageName - File name
+   * @param {?(fabric.Image|string)} img - fabric.Image instance or URL of an image
+   * @returns {Promise}
+   */
+  load(imageName, img) {
+    let promise;
+
+    if (!imageName && !img) {
+      // Back to the initial state, not error.
+      const canvas = this.getCanvas();
+
+      canvas.backgroundImage = null;
+      canvas.renderAll();
+
+      promise = new Promise((resolve) => {
+        this.setCanvasImage('', null);
+        resolve();
+      });
+    } else {
+      promise = this._setBackgroundImage(img).then((oImage) => {
+        this.setCanvasImage(imageName, oImage);
+        this.adjustCanvasDimension();
+
+        return oImage;
+      });
+    }
+
+    return promise;
+  }
+
+  /**
+   * Set background image
+   * @param {?(fabric.Image|String)} img fabric.Image instance or URL of an image to set background to
+   * @returns {Promise}
+   * @private
+   */
+  _setBackgroundImage(img) {
+    if (!img) {
+      return Promise.reject(rejectMessages.loadImage);
+    }
+
+    return new Promise((resolve, reject) => {
+      const canvas = this.getCanvas();
+
+      canvas.setBackgroundImage(
+        img,
+        () => {
+          const oImage = canvas.backgroundImage;
+
+          if (oImage && oImage.getElement()) {
+            resolve(oImage);
+          } else {
+            reject(rejectMessages.loadingImageFailed);
+          }
+        },
+        imageOption
+      );
+    });
+  }
+}
+
+export default ImageLoader;