ding-image-editor 3.15.3

package/src/js/command/addIcon.js

@@ -0,0 +1,42 @@
+import commandFactory from '@/factory/command';
+import { componentNames, commandNames } from '@/consts';
+
+const { ICON } = componentNames;
+
+const command = {
+  name: commandNames.ADD_ICON,
+
+  /**
+   * Add an icon
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)
+   * @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}
+   */
+  execute(graphics, type, options) {
+    const iconComp = graphics.getComponent(ICON);
+
+    return iconComp.add(type, options).then((objectProps) => {
+      this.undoData.object = graphics.getObject(objectProps.id);
+
+      return objectProps;
+    });
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    graphics.remove(this.undoData.object);
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/addImageObject.js

@@ -0,0 +1,34 @@
+import commandFactory from '@/factory/command';
+import { commandNames } from '@/consts';
+
+const command = {
+  name: commandNames.ADD_IMAGE_OBJECT,
+
+  /**
+   * Add an image object
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} imgUrl - Image url to make object
+   * @returns {Promise}
+   */
+  execute(graphics, imgUrl) {
+    return graphics.addImageObject(imgUrl).then((objectProps) => {
+      this.undoData.object = graphics.getObject(objectProps.id);
+
+      return objectProps;
+    });
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    graphics.remove(this.undoData.object);
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/addObject.js

@@ -0,0 +1,43 @@
+import commandFactory from '@/factory/command';
+import { commandNames, rejectMessages } from '@/consts';
+
+const command = {
+  name: commandNames.ADD_OBJECT,
+
+  /**
+   * Add an object
+   * @param {Graphics} graphics - Graphics instance
+   * @param {Object} object - Fabric object
+   * @returns {Promise}
+   */
+  execute(graphics, object) {
+    return new Promise((resolve, reject) => {
+      if (!graphics.contains(object)) {
+        graphics.add(object);
+        resolve(object);
+      } else {
+        reject(rejectMessages.addedObject);
+      }
+    });
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @param {Object} object - Fabric object
+   * @returns {Promise}
+   */
+  undo(graphics, object) {
+    return new Promise((resolve, reject) => {
+      if (graphics.contains(object)) {
+        graphics.remove(object);
+        resolve(object);
+      } else {
+        reject(rejectMessages.noObject);
+      }
+    });
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/addShape.js

@@ -0,0 +1,51 @@
+import commandFactory from '@/factory/command';
+import { componentNames, commandNames } from '@/consts';
+
+const { SHAPE } = componentNames;
+
+const command = {
+  name: commandNames.ADD_SHAPE,
+
+  /**
+   * Add a shape
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')
+   * @param {Object} options - Shape options
+   *      @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')
+   *      @param {string} [options.stroke] - Shape outline color
+   *      @param {number} [options.strokeWidth] - Shape outline width
+   *      @param {number} [options.width] - Width value (When type option is 'rect', this options can use)
+   *      @param {number} [options.height] - Height value (When type option is 'rect', this options can use)
+   *      @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)
+   *      @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
+   *      @param {number} [options.left] - Shape x position
+   *      @param {number} [options.top] - Shape y position
+   *      @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
+   * @returns {Promise}
+   */
+  execute(graphics, type, options) {
+    const shapeComp = graphics.getComponent(SHAPE);
+
+    return shapeComp.add(type, options).then((objectProps) => {
+      const { id } = objectProps;
+
+      this.undoData.object = graphics.getObject(id);
+
+      return objectProps;
+    });
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    graphics.remove(this.undoData.object);
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/addText.js

@@ -0,0 +1,73 @@
+import commandFactory from '@/factory/command';
+import { componentNames, commandNames, rejectMessages } from '@/consts';
+import {
+  setCachedUndoDataForDimension,
+  makeSelectionUndoData,
+  makeSelectionUndoDatum,
+} from '@/helper/selectionModifyHelper';
+
+const { TEXT } = componentNames;
+
+const command = {
+  name: commandNames.ADD_TEXT,
+
+  /**
+   * Add a text object
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} text - Initial input text
+   * @param {Object} [options] Options for text styles
+   *     @param {Object} [options.styles] Initial styles
+   *         @param {string} [options.styles.fill] Color
+   *         @param {string} [options.styles.fontFamily] Font type for text
+   *         @param {number} [options.styles.fontSize] Size
+   *         @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)
+   *         @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)
+   *         @param {string} [options.styles.textAlign] Type of text align (left / center / right)
+   *         @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)
+   *     @param {{x: number, y: number}} [options.position] - Initial position
+   * @returns {Promise}
+   */
+  execute(graphics, text, options) {
+    const textComp = graphics.getComponent(TEXT);
+
+    if (this.undoData.object) {
+      const undoObject = this.undoData.object;
+
+      return new Promise((resolve, reject) => {
+        if (!graphics.contains(undoObject)) {
+          graphics.add(undoObject);
+          resolve(undoObject);
+        } else {
+          reject(rejectMessages.redo);
+        }
+      });
+    }
+
+    return textComp.add(text, options).then((objectProps) => {
+      const { id } = objectProps;
+      const textObject = graphics.getObject(id);
+
+      this.undoData.object = textObject;
+
+      setCachedUndoDataForDimension(
+        makeSelectionUndoData(textObject, () => makeSelectionUndoDatum(id, textObject, false))
+      );
+
+      return objectProps;
+    });
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    graphics.remove(this.undoData.object);
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/applyFilter.js

@@ -0,0 +1,95 @@
+import extend from 'tui-code-snippet/object/extend';
+import commandFactory from '@/factory/command';
+import { componentNames, rejectMessages, commandNames } from '@/consts';
+
+const { FILTER } = componentNames;
+
+/**
+ * Cached data for undo
+ * @type {Object}
+ */
+let cachedUndoDataForSilent = null;
+
+/**
+ * Make undoData
+ * @param {string} type - Filter type
+ * @param {Object} prevfilterOption - prev Filter options
+ * @param {Object} options - Filter options
+ * @returns {object} - undo data
+ */
+function makeUndoData(type, prevfilterOption, options) {
+  const undoData = {};
+
+  if (type === 'mask') {
+    undoData.object = options.mask;
+  }
+
+  undoData.options = prevfilterOption;
+
+  return undoData;
+}
+
+const command = {
+  name: commandNames.APPLY_FILTER,
+
+  /**
+   * Apply a filter into an image
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} type - Filter type
+   * @param {Object} options - Filter options
+   *  @param {number} options.maskObjId - masking image object id
+   * @param {boolean} isSilent - is silent execution or not
+   * @returns {Promise}
+   */
+  execute(graphics, type, options, isSilent) {
+    const filterComp = graphics.getComponent(FILTER);
+
+    if (type === 'mask') {
+      const maskObj = graphics.getObject(options.maskObjId);
+
+      if (!(maskObj && maskObj.isType('image'))) {
+        return Promise.reject(rejectMessages.invalidParameters);
+      }
+
+      extend(options, { mask: maskObj });
+      graphics.remove(options.mask);
+    }
+    if (!this.isRedo) {
+      const prevfilterOption = filterComp.getOptions(type);
+      const undoData = makeUndoData(type, prevfilterOption, options);
+
+      cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);
+    }
+
+    return filterComp.add(type, options);
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} type - Filter type
+   * @returns {Promise}
+   */
+  undo(graphics, type) {
+    const filterComp = graphics.getComponent(FILTER);
+
+    if (type === 'mask') {
+      const mask = this.undoData.object;
+      graphics.add(mask);
+      graphics.setActiveObject(mask);
+
+      return filterComp.remove(type);
+    }
+
+    // options changed case
+    if (this.undoData.options) {
+      return filterComp.add(type, this.undoData.options);
+    }
+
+    // filter added case
+    return filterComp.remove(type);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/changeIconColor.js

@@ -0,0 +1,48 @@
+import commandFactory from '@/factory/command';
+import { componentNames, rejectMessages, commandNames } from '@/consts';
+
+const { ICON } = componentNames;
+
+const command = {
+  name: commandNames.CHANGE_ICON_COLOR,
+
+  /**
+   * Change icon color
+   * @param {Graphics} graphics - Graphics instance
+   * @param {number} id - object id
+   * @param {string} color - Color for icon
+   * @returns {Promise}
+   */
+  execute(graphics, id, color) {
+    return new Promise((resolve, reject) => {
+      const iconComp = graphics.getComponent(ICON);
+      const targetObj = graphics.getObject(id);
+
+      if (!targetObj) {
+        reject(rejectMessages.noObject);
+      }
+
+      this.undoData.object = targetObj;
+      this.undoData.color = iconComp.getColor(targetObj);
+      iconComp.setColor(color, targetObj);
+      resolve();
+    });
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const iconComp = graphics.getComponent(ICON);
+    const { object: icon, color } = this.undoData;
+
+    iconComp.setColor(color, icon);
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/changeSelection.js

@@ -0,0 +1,31 @@
+import commandFactory from '@/factory/command';
+import { commandNames } from '@/consts';
+import { getCachedUndoDataForDimension } from '@/helper/selectionModifyHelper';
+
+const command = {
+  name: commandNames.CHANGE_SELECTION,
+
+  execute(graphics, props) {
+    if (this.isRedo) {
+      props.forEach((prop) => {
+        graphics.setObjectProperties(prop.id, prop);
+      });
+    } else {
+      this.undoData = getCachedUndoDataForDimension();
+    }
+
+    return Promise.resolve();
+  },
+
+  undo(graphics) {
+    this.undoData.forEach((datum) => {
+      graphics.setObjectProperties(datum.id, datum);
+    });
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/changeShape.js

@@ -0,0 +1,84 @@
+import forEachOwnProperties from 'tui-code-snippet/collection/forEachOwnProperties';
+import commandFactory from '@/factory/command';
+import { componentNames, rejectMessages, commandNames } from '@/consts';
+
+const { SHAPE } = componentNames;
+
+/**
+ * Cached data for undo
+ * @type {Object}
+ */
+let cachedUndoDataForSilent = null;
+
+/**
+ * Make undoData
+ * @param {object} options - shape options
+ * @param {Component} targetObj - shape component
+ * @returns {object} - undo data
+ */
+function makeUndoData(options, targetObj) {
+  const undoData = {
+    object: targetObj,
+    options: {},
+  };
+
+  forEachOwnProperties(options, (value, key) => {
+    undoData.options[key] = targetObj[key];
+  });
+
+  return undoData;
+}
+
+const command = {
+  name: commandNames.CHANGE_SHAPE,
+
+  /**
+   * Change a shape
+   * @param {Graphics} graphics - Graphics instance
+   * @param {number} id - object id
+   * @param {Object} options - Shape options
+   *      @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')
+   *      @param {string} [options.stroke] - Shape outline color
+   *      @param {number} [options.strokeWidth] - Shape outline width
+   *      @param {number} [options.width] - Width value (When type option is 'rect', this options can use)
+   *      @param {number} [options.height] - Height value (When type option is 'rect', this options can use)
+   *      @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)
+   *      @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
+   *      @param {number} [options.left] - Shape x position
+   *      @param {number} [options.top] - Shape y position
+   *      @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
+   * @param {boolean} isSilent - is silent execution or not
+   * @returns {Promise}
+   */
+  execute(graphics, id, options, isSilent) {
+    const shapeComp = graphics.getComponent(SHAPE);
+    const targetObj = graphics.getObject(id);
+
+    if (!targetObj) {
+      return Promise.reject(rejectMessages.noObject);
+    }
+
+    if (!this.isRedo) {
+      const undoData = makeUndoData(options, targetObj);
+
+      cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);
+    }
+
+    return shapeComp.change(targetObj, options);
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const shapeComp = graphics.getComponent(SHAPE);
+    const { object: shape, options } = this.undoData;
+
+    return shapeComp.change(shape, options);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/changeText.js

@@ -0,0 +1,44 @@
+import commandFactory from '@/factory/command';
+import { componentNames, rejectMessages, commandNames } from '@/consts';
+
+const { TEXT } = componentNames;
+
+const command = {
+  name: commandNames.CHANGE_TEXT,
+
+  /**
+   * Change a text
+   * @param {Graphics} graphics - Graphics instance
+   * @param {number} id - object id
+   * @param {string} text - Changing text
+   * @returns {Promise}
+   */
+  execute(graphics, id, text) {
+    const textComp = graphics.getComponent(TEXT);
+    const targetObj = graphics.getObject(id);
+
+    if (!targetObj) {
+      return Promise.reject(rejectMessages.noObject);
+    }
+
+    this.undoData.object = targetObj;
+    this.undoData.text = textComp.getText(targetObj);
+
+    return textComp.change(targetObj, text);
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const textComp = graphics.getComponent(TEXT);
+    const { object: textObj, text } = this.undoData;
+
+    return textComp.change(textObj, text);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/changeTextStyle.js

@@ -0,0 +1,80 @@
+import forEachOwnProperties from 'tui-code-snippet/collection/forEachOwnProperties';
+import commandFactory from '@/factory/command';
+import { componentNames, rejectMessages, commandNames } from '@/consts';
+
+const { TEXT } = componentNames;
+
+/**
+ * Cached data for undo
+ * @type {Object}
+ */
+let cachedUndoDataForSilent = null;
+
+/**
+ * Make undoData
+ * @param {object} styles - text styles
+ * @param {Component} targetObj - text component
+ * @returns {object} - undo data
+ */
+function makeUndoData(styles, targetObj) {
+  const undoData = {
+    object: targetObj,
+    styles: {},
+  };
+  forEachOwnProperties(styles, (value, key) => {
+    const undoValue = targetObj[key];
+    undoData.styles[key] = undoValue;
+  });
+
+  return undoData;
+}
+
+const command = {
+  name: commandNames.CHANGE_TEXT_STYLE,
+
+  /**
+   * Change text styles
+   * @param {Graphics} graphics - Graphics instance
+   * @param {number} id - object id
+   * @param {Object} styles - text styles
+   *     @param {string} [styles.fill] Color
+   *     @param {string} [styles.fontFamily] Font type for text
+   *     @param {number} [styles.fontSize] Size
+   *     @param {string} [styles.fontStyle] Type of inclination (normal / italic)
+   *     @param {string} [styles.fontWeight] Type of thicker or thinner looking (normal / bold)
+   *     @param {string} [styles.textAlign] Type of text align (left / center / right)
+   *     @param {string} [styles.textDecoration] Type of line (underline / line-through / overline)
+   * @param {boolean} isSilent - is silent execution or not
+   * @returns {Promise}
+   */
+  execute(graphics, id, styles, isSilent) {
+    const textComp = graphics.getComponent(TEXT);
+    const targetObj = graphics.getObject(id);
+
+    if (!targetObj) {
+      return Promise.reject(rejectMessages.noObject);
+    }
+    if (!this.isRedo) {
+      const undoData = makeUndoData(styles, targetObj);
+
+      cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);
+    }
+
+    return textComp.setStyle(targetObj, styles);
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const textComp = graphics.getComponent(TEXT);
+    const { object: textObj, styles } = this.undoData;
+
+    return textComp.setStyle(textObj, styles);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/clearObjects.js

@@ -0,0 +1,33 @@
+import commandFactory from '@/factory/command';
+import { commandNames } from '@/consts';
+
+const command = {
+  name: commandNames.CLEAR_OBJECTS,
+
+  /**
+   * Clear all objects without background (main) image
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  execute(graphics) {
+    return new Promise((resolve) => {
+      this.undoData.objects = graphics.removeAll();
+      resolve();
+    });
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   * @ignore
+   */
+  undo(graphics) {
+    graphics.add(this.undoData.objects);
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/flip.js

@@ -0,0 +1,36 @@
+import commandFactory from '@/factory/command';
+import { componentNames, commandNames } from '@/consts';
+
+const { FLIP } = componentNames;
+
+const command = {
+  name: commandNames.FLIP_IMAGE,
+
+  /**
+   * flip an image
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} type - 'flipX' or 'flipY' or 'reset'
+   * @returns {Promise}
+   */
+  execute(graphics, type) {
+    const flipComp = graphics.getComponent(FLIP);
+
+    this.undoData.setting = flipComp.getCurrentSetting();
+
+    return flipComp[type]();
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const flipComp = graphics.getComponent(FLIP);
+
+    return flipComp.set(this.undoData.setting);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;