feat: Hide/Unhide added edits

apps/image-editor/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for TOAST UI Image Editor v3.15.2
+// Type definitions for TOAST UI Image Editor v3.15.3
 // TypeScript Version: 3.2.2
 
 declare namespace tuiImageEditor {
@@ -264,6 +264,7 @@ declare namespace tuiImageEditor {
     constructor(wrapper: string | Element, options: IOptions);
     public ui: UI;
 
+    public hideAllObjects(yes: boolean): void;
     public addIcon(type: string, options?: IIconOptions): Promise<IObjectProps>;
     public addImageObject(imgUrl: string): Promise<void>;
     public addShape(type: string, options?: IShapeOptions): Promise<IObjectProps>;

apps/image-editor/src/js/action.js

@@ -180,6 +180,29 @@ export default {
           this.deactivateAll();
           toggleHandMode();
         },
+        hideunhide: (e) => {
+          if (!this._graphics.hasObjects()) {
+            this.ui.changeHelpButtonEnabled('hideunhide', false);
+
+            return;
+          }
+          this.ui.changeHelpButtonEnabled('hideunhide', true);
+
+          const { children } = e.currentTarget.firstChild;
+          Array.from(children).forEach((useElement) => {
+            const currentHref = useElement.getAttribute('xlink:href');
+            e.currentTarget.style.width = '128px';
+            if (currentHref === '#ic-hideunhide') {
+              useElement.setAttribute('xlink:href', '#ic-hideunhide-off');
+              e.currentTarget.setAttribute('tooltip-content', 'Show all annotations');
+              this._graphics.hideObjects(true);
+            } else {
+              useElement.setAttribute('xlink:href', '#ic-hideunhide');
+              e.currentTarget.setAttribute('tooltip-content', 'Hide all annotations');
+              this._graphics.hideObjects(false);
+            }
+          });
+        },
       },
       this._commonAction()
     );

apps/image-editor/src/js/consts.js

@@ -18,6 +18,12 @@ export const COMMAND_HELP_MENUS = ['history', 'undo', 'redo', 'reset'];
  */
 export const DELETE_HELP_MENUS = ['delete', 'deleteAll'];
 
+/**
+ * Help features for Hide Unhide
+ * @type {Array.<string>}
+ */
+export const HIDE_UNHIDE_MENU = ['hideunhide'];
+
 /**
  * Editor help features
  * @type {Array.<string>}

apps/image-editor/src/js/graphics.js

@@ -234,6 +234,21 @@ class Graphics {
     return this._canvas.contains(target);
   }
 
+  /**
+   * Hide or Unhide the added objects
+   * @param {boolean} yes - yes to hide and no to unhide
+   */
+  hideObjects(yes) {
+    const getAllObjects = this._canvas.getObjects().slice();
+    getAllObjects.forEach((o) => {
+      o.set({ visible: !yes });
+      o.selectable = !yes;
+      o.hasControls = !yes;
+      o.hasBorders = !yes;
+    });
+    this._canvas.renderAll();
+  }
+
   /**
    * Gets all objects or group
    * @returns {Array} all objects, shallow copy

apps/image-editor/src/js/imageEditor.js

@@ -1375,6 +1375,16 @@ class ImageEditor {
     this.fire(SELECTION_CREATED, eventTarget);
   }
 
+  /**
+   * Hide or Unhide all added objects
+   * @param {boolean} yes - true for hide, false for unhide
+   * @example
+   * imageEditor.hideAllObjects(true);
+   */
+  hideAllObjects(yes) {
+    return this._graphics.hideObjects(yes);
+  }
+
   /**
    * Register custom icons
    * @param {{iconType: string, pathValue: string}} infos - Infos to register icons

apps/image-editor/src/js/ui.js

@@ -458,6 +458,22 @@ class Ui {
     btnElement.className = `tie-btn-${menuName} ${cls('item')} ${menuType}`;
     btnElement.innerHTML = menuItemHtml;
 
+    if (menuName === 'hideunhide' || menuName === 'hideunhide-off') {
+      btnElement.style.display = 'inline-flex';
+      btnElement.style.alignItems = 'center';
+      btnElement.style.width = '128px';
+
+      const btnLabel = document.createElement('label');
+      const value = 'View or hide annotation(s)';
+
+      btnLabel.setAttribute('value', value);
+      btnLabel.innerText = 'Annotation ';
+      btnLabel.style.marginLeft = '8px';
+      btnLabel.style.cursor = 'pointer';
+
+      btnElement.appendChild(btnLabel);
+    }
+
     if (menuType === 'normal') {
       this._menuBarElement.appendChild(btnElement);
     } else {
@@ -551,6 +567,9 @@ class Ui {
    * @private
    */
   _addTooltipAttribute(element, tooltipName) {
+    if (tooltipName === 'hideunhide') {
+      tooltipName = 'Hide all annotations';
+    }
     element.setAttribute(
       'tooltip-content',
       this._locale.localize(tooltipName.replace(/^[a-z]/g, ($0) => $0.toUpperCase()))