tui-image-editor - npm Package Compare versions

Comparing version 3.13.0 to 3.14.0

index.d.ts

@@ -1,2 +0,2 @@
-// Type definitions for TOAST UI Image Editor v3.12.0
+// Type definitions for TOAST UI Image Editor v3.13.0
 // TypeScript Version: 3.2.2
@@ -3,0 +3,0 @@

package.json

 {
   "name": "tui-image-editor",
   "author": "NHN. FE Development Lab <[e-mail]>",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "license": "MIT",
@@ -91,3 +91,3 @@ "repository": {
   },
-  "gitHead": "6207dcc9a69f558c1dfb5c774ec0805f8fbe538b"
+  "gitHead": "e1926f6cbb4dfd3e0c3c52438d458ed1882cc4c4"
 }

src/js/action.js

 import { extend } from 'tui-code-snippet';
 import Imagetracer from '@/helper/imagetracer';
 import { isSupportFileApi, base64ToBlob, toInteger, isEmptyCropzone } from '@/util';
-import { eventNames, historyNames } from '@/consts';
+import { eventNames, historyNames, drawingModes, drawingMenuNames, zoomModes } from '@/consts';
 
@@ -56,3 +56,25 @@ export default {
     };
+    const toggleZoomMode = () => {
+      const zoomMode = this._graphics.getZoomMode();
 
+      this.stopDrawingMode();
+      if (zoomMode !== zoomModes.ZOOM) {
+        this.startDrawingMode(drawingModes.ZOOM);
+        this._graphics.startZoomInMode();
+      } else {
+        this._graphics.endZoomInMode();
+      }
+    };
+    const toggleHandMode = () => {
+      const zoomMode = this._graphics.getZoomMode();
+
+      this.stopDrawingMode();
+      if (zoomMode !== zoomModes.HAND) {
+        this.startDrawingMode(drawingModes.ZOOM);
+        this._graphics.startHandMode();
+      } else {
+        this._graphics.endHandMode();
+      }
+    };
+
     return extend(
@@ -140,2 +162,16 @@ {
         },
+        zoomIn: () => {
+          this.ui.toggleZoomButtonStatus('zoomIn');
+          this.deactivateAll();
+          toggleZoomMode();
+        },
+        zoomOut: () => {
+          this._graphics.zoomOut();
+        },
+        hand: () => {
+          this.ui.offZoomInButtonStatus();
+          this.ui.toggleZoomButtonStatus('hand');
+          this.deactivateAll();
+          toggleHandMode();
+        },
       },
@@ -528,15 +564,20 @@ this._commonAction()
   _commonAction() {
+    const { TEXT, CROPPER, SHAPE, ZOOM } = drawingModes;
+
     return {
       modeChange: (menu) => {
         switch (menu) {
-          case 'text':
-            this._changeActivateMode('TEXT');
+          case drawingMenuNames.TEXT:
+            this._changeActivateMode(TEXT);
             break;
-          case 'crop':
-            this.startDrawingMode('CROPPER');
+          case drawingMenuNames.CROP:
+            this.startDrawingMode(CROPPER);
             break;
-          case 'shape':
-            this._changeActivateMode('SHAPE');
+          case drawingMenuNames.SHAPE:
+            this._changeActivateMode(SHAPE);
             this.setDrawingShape(this.ui.shape.type, this.ui.shape.options);
             break;
+          case drawingMenuNames.ZOOM:
+            this.startDrawingMode(ZOOM);
+            break;
           default:
@@ -543,0 +584,0 @@ break;

src/js/consts.js

@@ -8,2 +8,8 @@ /**
 /**
+ * Help features for zoom
+ * @type {Array.<string>}
+ */
+export const ZOOM_HELP_MENUS = ['zoomIn', 'zoomOut', 'hand'];
+
+/**
  * Help features for command
@@ -24,3 +30,3 @@ * @type {Array.<string>}
  */
-export const HELP_MENUS = [...COMMAND_HELP_MENUS, ...DELETE_HELP_MENUS];
+export const HELP_MENUS = [...ZOOM_HELP_MENUS, ...COMMAND_HELP_MENUS, ...DELETE_HELP_MENUS];
 
@@ -78,3 +84,4 @@ /**
   'FILTER',
-  'SHAPE'
+  'SHAPE',
+  'ZOOM'
 );
@@ -163,2 +170,5 @@
   AFTER_REDO: 'afterRedo',
+  ZOOM_CHANGED: 'zoomChanged',
+  HAND_STARTED: 'handStarted',
+  HAND_STOPPED: 'handStopped',
 };
@@ -197,6 +207,28 @@
   'SHAPE',
-  'ICON'
+  'ICON',
+  'ZOOM'
 );
 
 /**
+ * Menu names with drawing mode
+ * @type {Object.<string, string>}
+ */
+export const drawingMenuNames = {
+  TEXT: 'text',
+  CROP: 'crop',
+  SHAPE: 'shape',
+  ZOOM: 'zoom',
+};
+
+/**
+ * Zoom modes
+ * @type {Object.<string, string>}
+ */
+export const zoomModes = {
+  DEFAULT: 'normal',
+  ZOOM: 'zoom',
+  HAND: 'hand',
+};
+
+/**
  * Shortcut key values
@@ -215,2 +247,3 @@ * @type {Object.<string, number>}
   ARROW_UP: 38,
+  SPACE: 32,
 };
@@ -217,0 +250,0 @@

src/js/graphics.js

@@ -17,2 +17,3 @@ /**
 import Shape from '@/component/shape';
+import Zoom from '@/component/zoom';
 import CropperDrawingMode from '@/drawingMode/cropper';
@@ -24,2 +25,3 @@ import FreeDrawingMode from '@/drawingMode/freeDrawing';
 import IconDrawingMode from '@/drawingMode/icon';
+import ZoomDrawingMode from '@/drawingMode/zoom';
 import {
@@ -442,2 +444,77 @@ makeSelectionUndoData,
   /**
+   * Change zoom of canvas
+   * @param {{x: number, y: number}} center - center of zoom
+   * @param {number} zoomLevel - zoom level
+   */
+  zoom({ x, y }, zoomLevel) {
+    const zoom = this.getComponent(components.ZOOM);
+
+    zoom.zoom({ x, y }, zoomLevel);
+  }
+
+  /**
+   * Get zoom mode
+   * @returns {string}
+   */
+  getZoomMode() {
+    const zoom = this.getComponent(components.ZOOM);
+
+    return zoom.mode;
+  }
+
+  /**
+   * Start zoom-in mode
+   */
+  startZoomInMode() {
+    const zoom = this.getComponent(components.ZOOM);
+
+    zoom.startZoomInMode();
+  }
+
+  /**
+   * Stop zoom-in mode
+   */
+  endZoomInMode() {
+    const zoom = this.getComponent(components.ZOOM);
+
+    zoom.endZoomInMode();
+  }
+
+  /**
+   * Zoom out one step
+   */
+  zoomOut() {
+    const zoom = this.getComponent(components.ZOOM);
+
+    zoom.zoomOut();
+  }
+
+  /**
+   * Start hand mode
+   */
+  startHandMode() {
+    const zoom = this.getComponent(components.ZOOM);
+
+    zoom.startHandMode();
+  }
+
+  /**
+   * Stop hand mode
+   */
+  endHandMode() {
+    const zoom = this.getComponent(components.ZOOM);
+
+    zoom.endHandMode();
+  }
+
+  /**
+   * Zoom reset
+   */
+  resetZoom() {
+    const zoom = this.getComponent(components.ZOOM);
+
+    zoom.resetZoom();
+  }
+
+  /**
    * To data url from canvas
@@ -556,3 +633,2 @@ * @param {Object} options - options for toDataURL
    * @returns {fabric.Canvas}
-   * @private
    */
@@ -901,2 +977,3 @@ getCanvas() {
     this._register(this._drawingModeMap, new IconDrawingMode());
+    this._register(this._drawingModeMap, new ZoomDrawingMode());
   }
@@ -919,2 +996,3 @@
     this._register(this._componentMap, new Shape(this));
+    this._register(this._componentMap, new Zoom(this));
   }
@@ -921,0 +999,0 @@

src/js/imageEditor.js

@@ -288,2 +288,4 @@ /**
       AFTER_REDO,
+      HAND_STARTED,
+      HAND_STOPPED,
     } = events;
@@ -313,5 +315,10 @@
     if (this.ui) {
+      const canvas = this._graphics.getCanvas();
+
       this._invoker.on(EXECUTE_COMMAND, (command) => this.ui.fire(EXECUTE_COMMAND, command));
       this._invoker.on(AFTER_UNDO, (command) => this.ui.fire(AFTER_UNDO, command));
       this._invoker.on(AFTER_REDO, (command) => this.ui.fire(AFTER_REDO, command));
+
+      canvas.on(HAND_STARTED, () => this.ui.fire(HAND_STARTED));
+      canvas.on(HAND_STOPPED, () => this.ui.fire(HAND_STOPPED));
     }
@@ -680,2 +687,19 @@ }
   /**
+   * Zoom
+   * @param {number} x - x axis of center point for zoom
+   * @param {number} y - y axis of center point for zoom
+   * @param {number} zoomLevel - level of zoom(1.0 ~ 5.0)
+   */
+  zoom({ x, y, zoomLevel }) {
+    this._graphics.zoom({ x, y }, zoomLevel);
+  }
+
+  /**
+   * Reset zoom. Change zoom level to 1.0
+   */
+  resetZoom() {
+    this._graphics.resetZoom();
+  }
+
+  /**
    * Load image from file
@@ -682,0 +706,0 @@ * @param {File} imgFile - Image file

src/js/interface/drawingMode.js

@@ -46,3 +46,3 @@ /**
    */
-  stop() {
+  end() {
     throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'stop'));
@@ -49,0 +49,0 @@ }

src/js/ui.js

 import snippet from 'tui-code-snippet';
 import { getSelector, assignmentForDestroy, cls, getHistoryTitle, isSilentCommand } from '@/util';
-import { COMMAND_HELP_MENUS, DELETE_HELP_MENUS, eventNames, HELP_MENUS } from '@/consts';
+import {
+  ZOOM_HELP_MENUS,
+  COMMAND_HELP_MENUS,
+  DELETE_HELP_MENUS,
+  eventNames,
+  HELP_MENUS,
+} from '@/consts';
 import mainContainer from '@/ui/template/mainContainer';
@@ -33,2 +39,3 @@ import controls from '@/ui/template/controls';
 const { CustomEvents } = snippet;
+
 const BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300';
@@ -38,2 +45,8 @@ const HISTORY_MENU = 'history';
 
+const CLASS_NAME_ON = 'on';
+const ZOOM_BUTTON_TYPE = {
+  ZOOM_IN: 'zoomIn',
+  HAND: 'hand',
+};
+
 /**
@@ -78,2 +91,3 @@ * Ui class
     this._attachHistoryEvent();
+    this._attachZoomEvent();
   }
@@ -173,2 +187,37 @@
   /**
+   * Toggle zoom button status
+   * @param {string} type - type of zoom button
+   */
+  toggleZoomButtonStatus(type) {
+    const targetClassList = this._buttonElements[type].classList;
+
+    targetClassList.toggle(CLASS_NAME_ON);
+
+    if (type === ZOOM_BUTTON_TYPE.ZOOM_IN) {
+      this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList.remove(CLASS_NAME_ON);
+    } else {
+      this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList.remove(CLASS_NAME_ON);
+    }
+  }
+
+  /**
+   * Turn off zoom-in button status
+   */
+  offZoomInButtonStatus() {
+    const zoomInClassList = this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList;
+
+    zoomInClassList.remove(CLASS_NAME_ON);
+  }
+
+  /**
+   * Change hand button status
+   * @param {boolean} enabled - status to change
+   */
+  changeHandButtonStatus(enabled) {
+    const handClassList = this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList;
+
+    handClassList[enabled ? 'add' : 'remove'](CLASS_NAME_ON);
+  }
+
+  /**
    * Change help button status
@@ -266,2 +315,14 @@ * @param {string} buttonType - target button type
   /**
+   * Attach zoom event
+   * @private
+   */
+  _attachZoomEvent() {
+    this.on(eventNames.HAND_STARTED, () => {
+      this.offZoomInButtonStatus();
+      this.changeHandButtonStatus(true);
+    });
+    this.on(eventNames.HAND_STOPPED, () => this.changeHandButtonStatus(false));
+  }
+
+  /**
    * Make primary ui dom element
@@ -322,5 +383,17 @@ * @param {string|HTMLElement} element - Wrapper's element or selector
     });
+
+    this._activateZoomMenus();
   }
 
   /**
+   * Activate help menus for zoom.
+   * @private
+   */
+  _activateZoomMenus() {
+    snippet.forEach(ZOOM_HELP_MENUS, (menu) => {
+      this.changeHelpButtonEnabled(menu, true);
+    });
+  }
+
+  /**
    * make array for help menu output, including partitions.
@@ -331,3 +404,3 @@ * @returns {Array}
   _makeHelpMenuWithPartition() {
-    return [...COMMAND_HELP_MENUS, '', ...DELETE_HELP_MENUS];
+    return [...ZOOM_HELP_MENUS, '', ...COMMAND_HELP_MENUS, '', ...DELETE_HELP_MENUS];
   }
@@ -334,0 +407,0 @@

src/js/ui/history.js

@@ -5,5 +5,5 @@ import Panel from '@/ui/panelMenu';
 
-const HISTORY_ITEM_CLASS_NAME = 'history-item';
-const SELECTED_ITEM_CLASS_NAME = 'selected-item';
-const DISABLED_ITEM_CLASS_NAME = 'disabled-item';
+const historyClassName = 'history-item';
+const selectedClassName = 'selected-item';
+const disabledClassName = 'disabled-item';
 
@@ -109,3 +109,3 @@ /**
     const { target } = event;
-    const item = target.closest(`.${HISTORY_ITEM_CLASS_NAME}`);
+    const item = target.closest(`.${historyClassName}`);
 
@@ -116,3 +116,3 @@ if (!item) {
 
-    const index = parseInt(item.getAttribute('data-index'), 10);
+    const index = Number.parseInt(item.getAttribute('data-index'), 10);
 
@@ -136,9 +136,9 @@ if (index !== this._historyIndex) {
     for (let i = 0; i < this.getListLength(); i += 1) {
-      this.removeClass(i, SELECTED_ITEM_CLASS_NAME);
-      this.removeClass(i, DISABLED_ITEM_CLASS_NAME);
+      this.removeClass(i, selectedClassName);
+      this.removeClass(i, disabledClassName);
       if (i > index) {
-        this.addClass(i, DISABLED_ITEM_CLASS_NAME);
+        this.addClass(i, disabledClassName);
       }
     }
-    this.addClass(index, SELECTED_ITEM_CLASS_NAME);
+    this.addClass(index, selectedClassName);
   }
@@ -145,0 +145,0 @@

src/js/util.js

@@ -35,7 +35,4 @@ /**
 export function clamp(value, minValue, maxValue) {
-  let temp;
   if (minValue > maxValue) {
-    temp = minValue;
-    minValue = maxValue;
-    maxValue = temp;
+    [minValue, maxValue] = [maxValue, minValue];
   }
@@ -42,0 +39,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4401648

increased by4.54%

Number of package files

366

increased by4.27%

Lines of code

41431

increased by4.84%

No dependency changes