ding-image-editor 3.15.3

package/src/js/command/loadImage.js

@@ -0,0 +1,58 @@
+import commandFactory from '@/factory/command';
+import { componentNames, commandNames } from '@/consts';
+
+const { IMAGE_LOADER } = componentNames;
+
+const command = {
+  name: commandNames.LOAD_IMAGE,
+
+  /**
+   * Load a background (main) image
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} imageName - Image name
+   * @param {string} imgUrl - Image Url
+   * @returns {Promise}
+   */
+  execute(graphics, imageName, imgUrl) {
+    const loader = graphics.getComponent(IMAGE_LOADER);
+    const prevImage = loader.getCanvasImage();
+    const prevImageWidth = prevImage ? prevImage.width : 0;
+    const prevImageHeight = prevImage ? prevImage.height : 0;
+    const objects = graphics.removeAll(true).filter((objectItem) => objectItem.type !== 'cropzone');
+
+    objects.forEach((objectItem) => {
+      objectItem.evented = true;
+    });
+
+    this.undoData = {
+      name: loader.getImageName(),
+      image: prevImage,
+      objects,
+    };
+
+    return loader.load(imageName, imgUrl).then((newImage) => ({
+      oldWidth: prevImageWidth,
+      oldHeight: prevImageHeight,
+      newWidth: newImage.width,
+      newHeight: newImage.height,
+    }));
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const loader = graphics.getComponent(IMAGE_LOADER);
+    const { objects, name, image } = this.undoData;
+
+    graphics.removeAll(true);
+    graphics.add(objects);
+
+    return loader.load(name, image);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/removeFilter.js

@@ -0,0 +1,38 @@
+import commandFactory from '@/factory/command';
+import { componentNames, commandNames } from '@/consts';
+
+const { FILTER } = componentNames;
+
+const command = {
+  name: commandNames.REMOVE_FILTER,
+
+  /**
+   * Remove a filter from an image
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} type - Filter type
+   * @returns {Promise}
+   */
+  execute(graphics, type) {
+    const filterComp = graphics.getComponent(FILTER);
+
+    this.undoData.options = filterComp.getOptions(type);
+
+    return filterComp.remove(type);
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} type - Filter type
+   * @returns {Promise}
+   */
+  undo(graphics, type) {
+    const filterComp = graphics.getComponent(FILTER);
+    const { options } = this.undoData;
+
+    return filterComp.add(type, options);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/removeObject.js

@@ -0,0 +1,37 @@
+import commandFactory from '@/factory/command';
+import { commandNames, rejectMessages } from '@/consts';
+
+const command = {
+  name: commandNames.REMOVE_OBJECT,
+
+  /**
+   * Remove an object
+   * @param {Graphics} graphics - Graphics instance
+   * @param {number} id - object id
+   * @returns {Promise}
+   */
+  execute(graphics, id) {
+    return new Promise((resolve, reject) => {
+      this.undoData.objects = graphics.removeObjectById(id);
+      if (this.undoData.objects.length) {
+        resolve();
+      } else {
+        reject(rejectMessages.noObject);
+      }
+    });
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    graphics.add(this.undoData.objects);
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/resize.js

@@ -0,0 +1,41 @@
+import commandFactory from '@/factory/command';
+import { componentNames, commandNames } from '@/consts';
+
+const { RESIZE } = componentNames;
+
+const command = {
+  name: commandNames.RESIZE_IMAGE,
+
+  /**
+   * Resize an image
+   * @param {Graphics} graphics - Graphics instance
+   * @param {object} dimensions - Image Dimensions
+   * @returns {Promise}
+   */
+  execute(graphics, dimensions) {
+    const resizeComp = graphics.getComponent(RESIZE);
+
+    let originalDimensions = resizeComp.getOriginalDimensions();
+    if (!originalDimensions) {
+      originalDimensions = resizeComp.getCurrentDimensions();
+    }
+
+    this.undoData.dimensions = originalDimensions;
+
+    return resizeComp.resize(dimensions);
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const resizeComp = graphics.getComponent(RESIZE);
+
+    return resizeComp.resize(this.undoData.dimensions);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/resizeCanvasDimension.js

@@ -0,0 +1,40 @@
+import commandFactory from '@/factory/command';
+import { commandNames } from '@/consts';
+
+const command = {
+  name: commandNames.RESIZE_CANVAS_DIMENSION,
+
+  /**
+   * resize the canvas with given dimension
+   * @param {Graphics} graphics - Graphics instance
+   * @param {{width: number, height: number}} dimension - Max width & height
+   * @returns {Promise}
+   */
+  execute(graphics, dimension) {
+    return new Promise((resolve) => {
+      this.undoData.size = {
+        width: graphics.cssMaxWidth,
+        height: graphics.cssMaxHeight,
+      };
+
+      graphics.setCssMaxDimension(dimension);
+      graphics.adjustCanvasDimension();
+      resolve();
+    });
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    graphics.setCssMaxDimension(this.undoData.size);
+    graphics.adjustCanvasDimension();
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/rotate.js

@@ -0,0 +1,64 @@
+import commandFactory from '@/factory/command';
+import { componentNames, commandNames } from '@/consts';
+
+const { ROTATION } = componentNames;
+
+/**
+ * Cached data for undo
+ * @type {Object}
+ */
+let cachedUndoDataForSilent = null;
+
+/**
+ * Make undo data
+ * @param {Component} rotationComp - rotation component
+ * @returns {object} - undodata
+ */
+function makeUndoData(rotationComp) {
+  return {
+    angle: rotationComp.getCurrentAngle(),
+  };
+}
+
+const command = {
+  name: commandNames.ROTATE_IMAGE,
+
+  /**
+   * Rotate an image
+   * @param {Graphics} graphics - Graphics instance
+   * @param {string} type - 'rotate' or 'setAngle'
+   * @param {number} angle - angle value (degree)
+   * @param {boolean} isSilent - is silent execution or not
+   * @returns {Promise}
+   */
+  execute(graphics, type, angle, isSilent) {
+    const rotationComp = graphics.getComponent(ROTATION);
+
+    if (!this.isRedo) {
+      const undoData = makeUndoData(rotationComp);
+
+      cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);
+    }
+
+    return rotationComp[type](angle);
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const rotationComp = graphics.getComponent(ROTATION);
+    const [, type, angle] = this.args;
+
+    if (type === 'setAngle') {
+      return rotationComp[type](this.undoData.angle);
+    }
+
+    return rotationComp.rotate(-angle);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/setObjectPosition.js

@@ -0,0 +1,50 @@
+import commandFactory from '@/factory/command';
+import { commandNames, rejectMessages } from '@/consts';
+
+const command = {
+  name: commandNames.SET_OBJECT_POSITION,
+
+  /**
+   * Set object properties
+   * @param {Graphics} graphics - Graphics instance
+   * @param {number} id - object id
+   * @param {Object} posInfo - position object
+   *  @param {number} posInfo.x - x position
+   *  @param {number} posInfo.y - y position
+   *  @param {string} posInfo.originX - can be 'left', 'center', 'right'
+   *  @param {string} posInfo.originY - can be 'top', 'center', 'bottom'
+   * @returns {Promise}
+   */
+  execute(graphics, id, posInfo) {
+    const targetObj = graphics.getObject(id);
+
+    if (!targetObj) {
+      return Promise.reject(rejectMessages.noObject);
+    }
+
+    this.undoData.objectId = id;
+    this.undoData.props = graphics.getObjectProperties(id, ['left', 'top']);
+
+    graphics.setObjectPosition(id, posInfo);
+    graphics.renderAll();
+
+    return Promise.resolve();
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const { objectId, props } = this.undoData;
+
+    graphics.setObjectProperties(objectId, props);
+    graphics.renderAll();
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

package/src/js/command/setObjectProperties.js

@@ -0,0 +1,55 @@
+import forEachOwnProperties from 'tui-code-snippet/collection/forEachOwnProperties';
+import commandFactory from '@/factory/command';
+import { commandNames, rejectMessages } from '@/consts';
+
+const command = {
+  name: commandNames.SET_OBJECT_PROPERTIES,
+
+  /**
+   * Set object properties
+   * @param {Graphics} graphics - Graphics instance
+   * @param {number} id - object id
+   * @param {Object} props - properties
+   *     @param {string} [props.fill] Color
+   *     @param {string} [props.fontFamily] Font type for text
+   *     @param {number} [props.fontSize] Size
+   *     @param {string} [props.fontStyle] Type of inclination (normal / italic)
+   *     @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold)
+   *     @param {string} [props.textAlign] Type of text align (left / center / right)
+   *     @param {string} [props.textDecoration] Type of line (underline / line-through / overline)
+   * @returns {Promise}
+   */
+  execute(graphics, id, props) {
+    const targetObj = graphics.getObject(id);
+
+    if (!targetObj) {
+      return Promise.reject(rejectMessages.noObject);
+    }
+
+    this.undoData.props = {};
+    forEachOwnProperties(props, (value, key) => {
+      this.undoData.props[key] = targetObj[key];
+    });
+
+    graphics.setObjectProperties(id, props);
+
+    return Promise.resolve();
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @param {number} id - object id
+   * @returns {Promise}
+   */
+  undo(graphics, id) {
+    const { props } = this.undoData;
+
+    graphics.setObjectProperties(id, props);
+
+    return Promise.resolve();
+  },
+};
+
+commandFactory.register(command);
+
+export default command;