ding-image-editor 3.15.3

package/src/js/interface/command.js

@@ -0,0 +1,131 @@
+import extend from 'tui-code-snippet/object/extend';
+import errorMessage from '@/factory/errorMessage';
+
+const createMessage = errorMessage.create;
+const errorTypes = errorMessage.types;
+
+/**
+ * Command class
+ * @class
+ * @param {{name:function, execute: function, undo: function,
+ *          executeCallback: function, undoCallback: function}} actions - Command actions
+ * @param {Array} args - passing arguments on execute, undo
+ * @ignore
+ */
+class Command {
+  constructor(actions, args) {
+    /**
+     * command name
+     * @type {string}
+     */
+    this.name = actions.name;
+
+    /**
+     * arguments
+     * @type {Array}
+     */
+    this.args = args;
+
+    /**
+     * Execute function
+     * @type {function}
+     */
+    this.execute = actions.execute;
+
+    /**
+     * Undo function
+     * @type {function}
+     */
+    this.undo = actions.undo;
+
+    /**
+     * executeCallback
+     * @type {function}
+     */
+    this.executeCallback = actions.executeCallback || null;
+
+    /**
+     * undoCallback
+     * @type {function}
+     */
+    this.undoCallback = actions.undoCallback || null;
+
+    /**
+     * data for undo
+     * @type {Object}
+     */
+    this.undoData = {};
+  }
+
+  /**
+   * Execute action
+   * @param {Object.<string, Component>} compMap - Components injection
+   * @abstract
+   */
+  execute() {
+    throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'execute'));
+  }
+
+  /**
+   * Undo action
+   * @param {Object.<string, Component>} compMap - Components injection
+   * @abstract
+   */
+  undo() {
+    throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'undo'));
+  }
+
+  /**
+   * command for redo if undoData exists
+   * @returns {boolean} isRedo
+   */
+  get isRedo() {
+    return Object.keys(this.undoData).length > 0;
+  }
+
+  /**
+   * Set undoData action
+   * @param {Object} undoData - maked undo data
+   * @param {Object} cachedUndoDataForSilent - cached undo data
+   * @param {boolean} isSilent - is silent execution or not
+   * @returns {Object} cachedUndoDataForSilent
+   */
+  setUndoData(undoData, cachedUndoDataForSilent, isSilent) {
+    if (cachedUndoDataForSilent) {
+      undoData = cachedUndoDataForSilent;
+    }
+
+    if (!isSilent) {
+      extend(this.undoData, undoData);
+      cachedUndoDataForSilent = null;
+    } else if (!cachedUndoDataForSilent) {
+      cachedUndoDataForSilent = undoData;
+    }
+
+    return cachedUndoDataForSilent;
+  }
+
+  /**
+   * Attach execute callabck
+   * @param {function} callback - Callback after execution
+   * @returns {Command} this
+   */
+  setExecuteCallback(callback) {
+    this.executeCallback = callback;
+
+    return this;
+  }
+
+  /**
+   * Attach undo callback
+   * @param {function} callback - Callback after undo
+   * @returns {Command} this
+   */
+  setUndoCallback(callback) {
+    this.undoCallback = callback;
+
+    return this;
+  }
+}
+
+export default Command;

package/src/js/interface/component.js

@@ -0,0 +1,127 @@
+/**
+ * Component interface
+ * @class
+ * @param {string} name - component name
+ * @param {Graphics} graphics - Graphics instance
+ * @ignore
+ */
+class Component {
+  constructor(name, graphics) {
+    /**
+     * Component name
+     * @type {string}
+     */
+    this.name = name;
+
+    /**
+     * Graphics instance
+     * @type {Graphics}
+     */
+    this.graphics = graphics;
+  }
+
+  /**
+   * Fire Graphics event
+   * @returns {Object} return value
+   */
+  fire(...args) {
+    const context = this.graphics;
+
+    return this.graphics.fire.apply(context, args);
+  }
+
+  /**
+   * Save image(background) of canvas
+   * @param {string} name - Name of image
+   * @param {fabric.Image} oImage - Fabric image instance
+   */
+  setCanvasImage(name, oImage) {
+    this.graphics.setCanvasImage(name, oImage);
+  }
+
+  /**
+   * Returns canvas element of fabric.Canvas[[lower-canvas]]
+   * @returns {HTMLCanvasElement}
+   */
+  getCanvasElement() {
+    return this.graphics.getCanvasElement();
+  }
+
+  /**
+   * Get fabric.Canvas instance
+   * @returns {fabric.Canvas}
+   */
+  getCanvas() {
+    return this.graphics.getCanvas();
+  }
+
+  /**
+   * Get canvasImage (fabric.Image instance)
+   * @returns {fabric.Image}
+   */
+  getCanvasImage() {
+    return this.graphics.getCanvasImage();
+  }
+
+  /**
+   * Get image name
+   * @returns {string}
+   */
+  getImageName() {
+    return this.graphics.getImageName();
+  }
+
+  /**
+   * Get image editor
+   * @returns {ImageEditor}
+   */
+  getEditor() {
+    return this.graphics.getEditor();
+  }
+
+  /**
+   * Return component name
+   * @returns {string}
+   */
+  getName() {
+    return this.name;
+  }
+
+  /**
+   * Set image properties
+   * @param {Object} setting - Image properties
+   * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas
+   */
+  setImageProperties(setting, withRendering) {
+    this.graphics.setImageProperties(setting, withRendering);
+  }
+
+  /**
+   * Set canvas dimension - css only
+   * @param {Object} dimension - Canvas css dimension
+   */
+  setCanvasCssDimension(dimension) {
+    this.graphics.setCanvasCssDimension(dimension);
+  }
+
+  /**
+   * Set canvas dimension - css only
+   * @param {Object} dimension - Canvas backstore dimension
+   */
+  setCanvasBackstoreDimension(dimension) {
+    this.graphics.setCanvasBackstoreDimension(dimension);
+  }
+
+  /**
+   * Adjust canvas dimension with scaling image
+   */
+  adjustCanvasDimension() {
+    this.graphics.adjustCanvasDimension();
+  }
+
+  adjustCanvasDimensionBase() {
+    this.graphics.adjustCanvasDimensionBase();
+  }
+}
+
+export default Component;

package/src/js/interface/drawingMode.js

@@ -0,0 +1,47 @@
+import errorMessage from '@/factory/errorMessage';
+
+const createMessage = errorMessage.create;
+const errorTypes = errorMessage.types;
+
+/**
+ * DrawingMode interface
+ * @class
+ * @param {string} name - drawing mode name
+ * @ignore
+ */
+class DrawingMode {
+  constructor(name) {
+    /**
+     * the name of drawing mode
+     * @type {string}
+     */
+    this.name = name;
+  }
+
+  /**
+   * Get this drawing mode name;
+   * @returns {string} drawing mode name
+   */
+  getName() {
+    return this.name;
+  }
+
+  /**
+   * start this drawing mode
+   * @param {Object} options - drawing mode options
+   * @abstract
+   */
+  start() {
+    throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'start'));
+  }
+
+  /**
+   * stop this drawing mode
+   * @abstract
+   */
+  end() {
+    throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'stop'));
+  }
+}
+
+export default DrawingMode;

package/src/js/invoker.js

@@ -0,0 +1,292 @@
+import isString from 'tui-code-snippet/type/isString';
+import CustomEvents from 'tui-code-snippet/customEvents/customEvents';
+import commandFactory from '@/factory/command';
+import { isFunction } from '@/util';
+import { eventNames, rejectMessages } from '@/consts';
+
+/**
+ * Invoker
+ * @class
+ * @ignore
+ */
+class Invoker {
+  constructor() {
+    /**
+     * Undo stack
+     * @type {Array.<Command>}
+     * @private
+     */
+    this._undoStack = [];
+
+    /**
+     * Redo stack
+     * @type {Array.<Command>}
+     * @private
+     */
+    this._redoStack = [];
+
+    /**
+     * Lock-flag for executing command
+     * @type {boolean}
+     * @private
+     */
+    this._isLocked = false;
+
+    this._isSilent = false;
+  }
+
+  /**
+   * Invoke command execution
+   * @param {Command} command - Command
+   * @param {boolean} [isRedo=false] - check if command is redo
+   * @returns {Promise}
+   * @private
+   */
+  _invokeExecution(command, isRedo = false) {
+    this.lock();
+
+    let { args } = command;
+    if (!args) {
+      args = [];
+    }
+
+    return command
+      .execute(...args)
+      .then((value) => {
+        if (!this._isSilent) {
+          this.pushUndoStack(command);
+
+          this.fire(isRedo ? eventNames.AFTER_REDO : eventNames.EXECUTE_COMMAND, command);
+        }
+        this.unlock();
+        if (isFunction(command.executeCallback)) {
+          command.executeCallback(value);
+        }
+
+        return value;
+      })
+      ['catch']((message) => {
+        this.unlock();
+
+        return Promise.reject(message);
+      });
+  }
+
+  /**
+   * Invoke command undo
+   * @param {Command} command - Command
+   * @returns {Promise}
+   * @private
+   */
+  _invokeUndo(command) {
+    this.lock();
+
+    let { args } = command;
+    if (!args) {
+      args = [];
+    }
+
+    return command
+      .undo(...args)
+      .then((value) => {
+        this.pushRedoStack(command);
+        this.fire(eventNames.AFTER_UNDO, command);
+        this.unlock();
+        if (isFunction(command.undoCallback)) {
+          command.undoCallback(value);
+        }
+
+        return value;
+      })
+      ['catch']((message) => {
+        this.unlock();
+
+        return Promise.reject(message);
+      });
+  }
+
+  /**
+   * fire REDO_STACK_CHANGED event
+   * @private
+   */
+  _fireRedoStackChanged() {
+    this.fire(eventNames.REDO_STACK_CHANGED, this._redoStack.length);
+  }
+
+  /**
+   * fire UNDO_STACK_CHANGED event
+   * @private
+   */
+  _fireUndoStackChanged() {
+    this.fire(eventNames.UNDO_STACK_CHANGED, this._undoStack.length);
+  }
+
+  /**
+   * Lock this invoker
+   */
+  lock() {
+    this._isLocked = true;
+  }
+
+  /**
+   * Unlock this invoker
+   */
+  unlock() {
+    this._isLocked = false;
+  }
+
+  executeSilent(...args) {
+    this._isSilent = true;
+
+    return this.execute(...args, this._isSilent).then(() => {
+      this._isSilent = false;
+    });
+  }
+
+  /**
+   * Invoke command
+   * Store the command to the undoStack
+   * Clear the redoStack
+   * @param {String} commandName - Command name
+   * @param {...*} args - Arguments for creating command
+   * @returns {Promise}
+   */
+  execute(...args) {
+    if (this._isLocked) {
+      return Promise.reject(rejectMessages.isLock);
+    }
+
+    let [command] = args;
+    if (isString(command)) {
+      command = commandFactory.create(...args);
+    }
+
+    return this._invokeExecution(command).then((value) => {
+      this.clearRedoStack();
+
+      return value;
+    });
+  }
+
+  /**
+   * Undo command
+   * @returns {Promise}
+   */
+  undo() {
+    let command = this._undoStack.pop();
+    let promise;
+    let message = '';
+
+    if (command && this._isLocked) {
+      this.pushUndoStack(command, true);
+      command = null;
+    }
+    if (command) {
+      if (this.isEmptyUndoStack()) {
+        this._fireUndoStackChanged();
+      }
+      promise = this._invokeUndo(command);
+    } else {
+      message = rejectMessages.undo;
+      if (this._isLocked) {
+        message = `${message} Because ${rejectMessages.isLock}`;
+      }
+      promise = Promise.reject(message);
+    }
+
+    return promise;
+  }
+
+  /**
+   * Redo command
+   * @returns {Promise}
+   */
+  redo() {
+    let command = this._redoStack.pop();
+    let promise;
+    let message = '';
+
+    if (command && this._isLocked) {
+      this.pushRedoStack(command, true);
+      command = null;
+    }
+    if (command) {
+      if (this.isEmptyRedoStack()) {
+        this._fireRedoStackChanged();
+      }
+      promise = this._invokeExecution(command, true);
+    } else {
+      message = rejectMessages.redo;
+      if (this._isLocked) {
+        message = `${message} Because ${rejectMessages.isLock}`;
+      }
+      promise = Promise.reject(message);
+    }
+
+    return promise;
+  }
+
+  /**
+   * Push undo stack
+   * @param {Command} command - command
+   * @param {boolean} [isSilent] - Fire event or not
+   */
+  pushUndoStack(command, isSilent) {
+    this._undoStack.push(command);
+    if (!isSilent) {
+      this._fireUndoStackChanged();
+    }
+  }
+
+  /**
+   * Push redo stack
+   * @param {Command} command - command
+   * @param {boolean} [isSilent] - Fire event or not
+   */
+  pushRedoStack(command, isSilent) {
+    this._redoStack.push(command);
+    if (!isSilent) {
+      this._fireRedoStackChanged();
+    }
+  }
+
+  /**
+   * Return whether the redoStack is empty
+   * @returns {boolean}
+   */
+  isEmptyRedoStack() {
+    return this._redoStack.length === 0;
+  }
+
+  /**
+   * Return whether the undoStack is empty
+   * @returns {boolean}
+   */
+  isEmptyUndoStack() {
+    return this._undoStack.length === 0;
+  }
+
+  /**
+   * Clear undoStack
+   */
+  clearUndoStack() {
+    if (!this.isEmptyUndoStack()) {
+      this._undoStack = [];
+      this._fireUndoStackChanged();
+    }
+  }
+
+  /**
+   * Clear redoStack
+   */
+  clearRedoStack() {
+    if (!this.isEmptyRedoStack()) {
+      this._redoStack = [];
+      this._fireRedoStackChanged();
+    }
+  }
+}
+
+CustomEvents.mixin(Invoker);
+
+export default Invoker;