@yoobic/yobi 8.7.17 → 8.7.18

package/dist/cjs/yoo-photo-editor.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e5fa8107.js');
-const index$1 = require('./index-47657672.js');
-require('./index-f0ff9db0.js');
-const annotationsHelpers = require('./annotations-helpers-7d66a875.js');
-const commonHelpers = require('./common-helpers-a9bda4a5.js');
-const photoEditor_helpers = require('./photo-editor.helpers-9a039f77.js');
-const formInputHelpers = require('./form-input-helpers-42f7f321.js');
-const hapticHelpers = require('./haptic-helpers-1c059ed4.js');
+const index$1 = require('./index-d269cf34.js');
+require('./index-0e9a338c.js');
+const annotationsHelpers = require('./annotations-helpers-3423af7a.js');
+const commonHelpers = require('./common-helpers-438f33b8.js');
+const photoEditor_helpers = require('./photo-editor.helpers-e3ad52d2.js');
+const formInputHelpers = require('./form-input-helpers-44f457fb.js');
+const hapticHelpers = require('./haptic-helpers-9aaf463b.js');
 const lodash = require('./lodash-036555ce.js');
 require('./index-3d49ff1c.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -45,6 +45,7 @@ class Menu {
   constructor(config) {
     this.getOptions = () => {
       var _a, _b;
+      const { undoList, redoList } = this.config.drawings;
       return {
         extras: {
           start: [this.closeOption],
@@ -68,13 +69,10 @@ class Menu {
           end: [this.validateOption]
         },
         draw: {
-          start: this.formatOptions(['undo', 'redo']).map((opt, i) => {
-            var _a;
-            return ({
-              ...opt,
-              disabled: !i ? this.drawingsState['index'] <= 0 : this.drawingsState['index'] >= ((_a = this.drawingsState['stack']) === null || _a === void 0 ? void 0 : _a.length) - 1
-            });
-          }),
+          start: this.formatOptions(['undo', 'redo']).map((opt, i) => ({
+            ...opt,
+            disabled: !i ? !undoList.length : !redoList.length
+          })),
           end: [this.validateOption]
         },
         annotate: {
@@ -102,9 +100,6 @@ class Menu {
   get eraserOption() {
     return { icon: 'rubber', disabled: !this.config.clearable };
   }
-  get drawingsState() {
-    return this.config.drawings;
-  }
   get activeStyles() {
     return this.config.activeStyles;
   }
@@ -181,9 +176,8 @@ const YooPhotoEditorComponent = class {
     this.backgroundText = 'off';
     this.alignText = 'center';
     this.animationDelay = this.animated ? photoEditor_helpers.ANIMATION_DELAY : 0;
-    this.drawingsStackIndex = -1;
-    this.baseDrawingsStack = [];
-    this.drawingsStack = [];
+    this.undoList = [];
+    this.redoList = [];
     this.editable = false;
     this.displayAnnotations = true;
     this.zoomable = undefined;
@@ -224,17 +218,17 @@ const YooPhotoEditorComponent = class {
   }
   get menuOptions() {
     var _a, _b, _c, _d;
-    const clearable = (((_a = this.canvasElement) === null || _a === void 0 ? void 0 : _a.width) && !photoEditor_helpers.isCanvasBlank(this.canvasContext)) || !!((_c = (_b = this.annotations) === null || _b === void 0 ? void 0 : _b.filter(a => !annotationsHelpers.isAnnotationDeleted(a))) === null || _c === void 0 ? void 0 : _c.length);
+    const clearable = (((_a = this.canvasElement) === null || _a === void 0 ? void 0 : _a.width) && !photoEditor_helpers.isCanvasBlank(this.canvasContext)) || !!((_c = (_b = this.annotations) === null || _b === void 0 ? void 0 : _b.filter((a) => !annotationsHelpers.isAnnotationDeleted(a))) === null || _c === void 0 ? void 0 : _c.length);
     return new Menu({
       clearable,
       readonly: this.isReadonly,
-      ...(this.hasCloseInMode && { closeIcon: (this.hasBackButton || this.hasExtraActions) ? 'left' : 'close' }),
+      ...(this.hasCloseInMode && { closeIcon: this.hasBackButton || this.hasExtraActions ? 'left' : 'close' }),
       ...(this.hasExtraActions && { extrasActions: this.extraActions }),
       predefinedText: photoEditor_helpers.getPredefinedTexts(),
       activeStyles: (_d = this.activeAnnotation) === null || _d === void 0 ? void 0 : _d.styles,
       drawings: {
-        index: this.drawingsStackIndex,
-        stack: this.drawingsStack
+        undoList: this.undoList,
+        redoList: this.redoList
       }
     });
   }
@@ -355,10 +349,10 @@ const YooPhotoEditorComponent = class {
         width: `${(_b = getSize(type)) === null || _b === void 0 ? void 0 : _b.width}px`
       });
     };
-    return this.imageSize && {
+    return (this.imageSize && {
       natural: getStyle('natural'),
       resized: getStyle('resized')
-    };
+    });
   }
   get changes() {
     var _a, _b, _c, _d;
@@ -368,11 +362,11 @@ const YooPhotoEditorComponent = class {
       .map((a) => a === null || a === void 0 ? void 0 : a[propName]));
     const hasTextChanged = !lodash.isEqual(this.savedAnnotations.map((a) => a === null || a === void 0 ? void 0 : a.text).sort(), (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.filter((a) => (a === null || a === void 0 ? void 0 : a.text) && !annotationsHelpers.isAnnotationDeleted(a)).map((a) => a === null || a === void 0 ? void 0 : a.text).sort());
     const hasStylesChanged = checkChanges('styles');
-    const hasTransformChanged = !!((_b = this.annotationElements) === null || _b === void 0 ? void 0 : _b.filter(a => !!a.style.transform.includes('translate') && a.style.transform !== 'translate3d(0px, 0px, 0px)').length);
+    const hasTransformChanged = !!((_b = this.annotationElements) === null || _b === void 0 ? void 0 : _b.filter((a) => !!a.style.transform.includes('translate') && a.style.transform !== 'translate3d(0px, 0px, 0px)').length);
     const hasCoordsChanged = checkChanges('coords');
     return {
-      drawings: this.drawingsStack[this.drawingsStackIndex] !== this.savedDrawings,
-      annotations: !!(hasTextChanged || hasStylesChanged || (hasTransformChanged || hasCoordsChanged)) || (((_c = this.savedAnnotations) === null || _c === void 0 ? void 0 : _c.length) !== ((_d = this.annotations) === null || _d === void 0 ? void 0 : _d.length))
+      drawings: this.currentDrawings !== this.savedDrawings,
+      annotations: !!(hasTextChanged || hasStylesChanged || hasTransformChanged || hasCoordsChanged) || ((_c = this.savedAnnotations) === null || _c === void 0 ? void 0 : _c.length) !== ((_d = this.annotations) === null || _d === void 0 ? void 0 : _d.length)
     };
   }
   get currentDrawings() {
@@ -396,10 +390,29 @@ const YooPhotoEditorComponent = class {
   }
   get hasEmptyAnnotation() {
     var _a, _b, _c, _d, _e;
-    return !!this.annotations.find(a => annotationsHelpers.isAnnotationEmpty(a)) && !((_e = (_d = (_c = (_b = (_a = this.activeDotElement) === null || _a === void 0 ? void 0 : _a.tooltipElement) === null || _b === void 0 ? void 0 : _b['_tippy']) === null || _c === void 0 ? void 0 : _c.popper) === null || _d === void 0 ? void 0 : _d.querySelector('.text-content')) === null || _e === void 0 ? void 0 : _e.textContent);
+    return !!this.annotations.find((a) => annotationsHelpers.isAnnotationEmpty(a)) && !((_e = (_d = (_c = (_b = (_a = this.activeDotElement) === null || _a === void 0 ? void 0 : _a.tooltipElement) === null || _b === void 0 ? void 0 : _b['_tippy']) === null || _c === void 0 ? void 0 : _c.popper) === null || _d === void 0 ? void 0 : _d.querySelector('.text-content')) === null || _e === void 0 ? void 0 : _e.textContent);
   }
   get drawActions() {
     return {
+      undo: () => {
+        this.drawActions.restoreState(this.undoList, this.redoList);
+      },
+      redo: () => {
+        this.drawActions.restoreState(this.redoList, this.undoList);
+      },
+      saveState: (drawings) => {
+        const list = drawings || this.undoList;
+        if (!list.includes(this.currentDrawings)) {
+          list.push(this.currentDrawings);
+        }
+      },
+      restoreState: (popList, pushList) => {
+        if (popList === null || popList === void 0 ? void 0 : popList.length) {
+          photoEditor_helpers.drawImageOnCanvas(popList.pop(), this.canvasContext);
+          this.drawActions.saveState(pushList);
+          index.forceUpdate(this);
+        }
+      },
       startDraw: (ev) => {
         if (this.canDraw && ev) {
           this.hasImageBeenCleaned = false;
@@ -409,6 +422,7 @@ const YooPhotoEditorComponent = class {
           this.canvasContext.strokeStyle = index$1.getCssColor(this.color, this.color);
           this.canvasContext.lineCap = this.canvasContext.lineJoin = 'round';
           this.canvasContext.moveTo(this.drawCoordinates.x, this.drawCoordinates.y);
+          this.drawActions.saveState();
           this.isDrawing = true;
         }
       },
@@ -422,9 +436,7 @@ const YooPhotoEditorComponent = class {
       },
       stopDraw: (ev) => {
         if (this.canDraw && this.isDrawing && ev) {
-          if ((ev === null || ev === void 0 ? void 0 : ev.type) !== 'pointerleave' && this.isDrawing) {
-            this.pushDrawings();
-          }
+          ev.stopPropagation();
           this.isDrawing = false;
           this.hasPencilBeenReleased = true;
           this.canvasContext.closePath();
@@ -438,7 +450,6 @@ const YooPhotoEditorComponent = class {
       discardChanges: async () => {
         this.isLoading = true;
         await this.restoreSavedAnnotations();
-        await this.initDrawingsStack();
         this.toggleSaveButton(false);
         this.toggleColorSelector(false);
         this.switchMode();
@@ -456,7 +467,7 @@ const YooPhotoEditorComponent = class {
       },
       clearImage: () => {
         photoEditor_helpers.clearCanvas(this.canvasContext);
-        this.annotations = this.annotations.map(a => photoEditor_helpers.updateAnnotationLocal(a, Object.assign({ isDeleted: true, isFocused: false })));
+        this.annotations = this.annotations.map((a) => photoEditor_helpers.updateAnnotationLocal(a, Object.assign({ isDeleted: true, isFocused: false })));
         this.hasImageBeenCleaned = true;
         this.toggleSaveButton(true);
       },
@@ -542,10 +553,8 @@ const YooPhotoEditorComponent = class {
     this.virtualSrcCanvasContext = null;
     this.screenOrientationSubscription = null;
     this.canvasContext = null;
-    this.draggables = (_e = (_d = this.draggables) === null || _d === void 0 ? void 0 : _d.map(draggable => draggable === null || draggable === void 0 ? void 0 : draggable.kill())) === null || _e === void 0 ? void 0 : _e.filter(Boolean);
+    this.draggables = (_e = (_d = this.draggables) === null || _d === void 0 ? void 0 : _d.map((draggable) => draggable === null || draggable === void 0 ? void 0 : draggable.kill())) === null || _e === void 0 ? void 0 : _e.filter(Boolean);
     this.draggables = null;
-    this.baseDrawingsStack = null;
-    this.drawingsStack = null;
     (_g = (_f = this.collapseRangeTimeout) === null || _f === void 0 ? void 0 : _f.unref) === null || _g === void 0 ? void 0 : _g.call(_f);
   }
   initEditor() {
@@ -561,18 +570,26 @@ const YooPhotoEditorComponent = class {
   }
   resizeSrc(sourceSrc, options) {
     var _a;
-    return sourceSrc && commonHelpers.cloudinary(sourceSrc, {
-      ...this.cloudinaryOptions, fit: true, noRatio: true,
-      ...options || {},
-      ...(!index$1.isWeb(this.host) && {
-        width: ((_a = this.cloudinaryOptions) === null || _a === void 0 ? void 0 : _a.width) || this.maxImageSize.width
-      })
-    });
+    return (sourceSrc &&
+      commonHelpers.cloudinary(sourceSrc, {
+        ...this.cloudinaryOptions,
+        fit: true,
+        noRatio: true,
+        ...(options || {}),
+        ...(!index$1.isWeb(this.host) && {
+          width: ((_a = this.cloudinaryOptions) === null || _a === void 0 ? void 0 : _a.width) || this.maxImageSize.width
+        })
+      }));
   }
   async getImageSize(naturalImageSize) {
     const { width, height } = this.maxViewport;
-    let imageSize = naturalImageSize || await index$1.getImageSize(this.finalSrc);
-    imageSize.width > this.maxImageSize.width && (imageSize = await index$1.getResizedImageSize({ imgSize: imageSize, maxWidth: this.maxImageSize.width, maxHeight: this.maxImageSize.height }));
+    let imageSize = naturalImageSize || (await index$1.getImageSize(this.finalSrc));
+    imageSize.width > this.maxImageSize.width &&
+      (imageSize = await index$1.getResizedImageSize({
+        imgSize: imageSize,
+        maxWidth: this.maxImageSize.width,
+        maxHeight: this.maxImageSize.height
+      }));
     this.imageSize = {
       natural: imageSize,
       get scaleFactor() {
@@ -615,11 +632,16 @@ const YooPhotoEditorComponent = class {
         if (!lodash.isEqual(canvasRect, newCanvasRect) && this.isEditorInViewPort) {
           canvasRect = newCanvasRect;
           this.canvasContext = photoEditor_helpers.getCanvasContext(this.canvasElement);
-          this.isImageEditable && (this.baseDrawingsStack = [this.currentDrawings]);
-          this.isImageEditable && (this.draggables = this.getDraggables());
+          if (this.isImageEditable) {
+            this.undoList = [];
+            this.redoList = [];
+            this.draggables = this.getDraggables();
+            this.drawings && this.drawActions.saveState();
+          }
           this.initVirtualCanvasSrcContext();
           this.toggleDraggableAnnotations();
-          await this.initDrawingsStack();
+          await this.displayDrawings();
+          this.savedDrawings = this.currentDrawings;
           this.isLoading = false;
         }
         else {
@@ -630,17 +652,6 @@ const YooPhotoEditorComponent = class {
       this.canvasMutationObserver.observe(this.canvasElement, { attributes: true, attributeOldValue: true, attributeFilter: ['width', 'height'] });
     }
   }
-  async initDrawingsStack() {
-    if (this.isImageEditable) {
-      this.drawingsStack = [...this.baseDrawingsStack];
-      this.drawingsStackIndex = 0;
-    }
-    this.drawings && await this.displayDrawings();
-    if (this.isImageEditable) {
-      this.pushDrawings();
-      this.savedDrawings = this.currentDrawings;
-    }
-  }
   initVirtualCanvasSrcContext() {
     if (this.imageSize && !this.isReadonly) {
       const { natural, scaleFactor } = this.imageSize;
@@ -675,7 +686,11 @@ const YooPhotoEditorComponent = class {
     }
   }
   getDrawingsUrl() {
-    return !photoEditor_helpers.isCanvasBlank(this.canvasContext) ? index$1.isOffline() ? Promise.resolve(this.currentDrawings) : index$1.getAsyncExtraData({ type: 'media-upload', params: { mediaData: this.currentDrawings } }) : Promise.resolve('');
+    return !photoEditor_helpers.isCanvasBlank(this.canvasContext)
+      ? index$1.isOffline()
+        ? Promise.resolve(this.currentDrawings)
+        : index$1.getAsyncExtraData({ type: 'media-upload', params: { mediaData: this.currentDrawings } })
+      : Promise.resolve('');
   }
   async displayDrawings(drawings = this.drawings) {
     try {
@@ -696,16 +711,14 @@ const YooPhotoEditorComponent = class {
   }
   async alertInvalidUrl() {
     if (!this.isPreview) {
-      const shouldClose = await index$1.showAlert({ header: 'ERROR', buttonText: [index$1.translate('CONTINUE'), index$1.translate('CLOSE')], message: index$1.translate('INVALIDURLBODY') });
+      const shouldClose = await index$1.showAlert({
+        header: 'ERROR',
+        buttonText: [index$1.translate('CONTINUE'), index$1.translate('CLOSE')],
+        message: index$1.translate('INVALIDURLBODY')
+      });
       shouldClose ? this.close() : (this.isLoading = false);
     }
   }
-  pushDrawings(drawings = this.currentDrawings) {
-    if (drawings && !this.drawingsStack.includes(drawings)) {
-      this.drawingsStackIndex++;
-      this.drawingsStack.push(this.currentDrawings);
-    }
-  }
   clearFocus() {
     var _a;
     this.isTextEditMode && ((_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur());
@@ -737,25 +750,19 @@ const YooPhotoEditorComponent = class {
     this.toggleDraggableAnnotations();
     this.selectAnnotation();
   }
-  clickAnnotation(ev, annotation) {
-    var _a;
-    if (this.isReadonly) {
-      this.imageClicked.emit(true);
-    }
-    else if (annotation) {
-      if (!((_a = annotation === null || annotation === void 0 ? void 0 : annotation._local) === null || _a === void 0 ? void 0 : _a.isFocusing)) {
-        this.lastMode = this.mode;
-        this.activeAnnotation = annotation;
-        this.focusAnnotation();
-      }
-      else {
-        ev.stopPropagation();
-      }
-    }
-  }
   getDraggables(annotationElements = this.annotationElements) {
     if (annotationElements === null || annotationElements === void 0 ? void 0 : annotationElements.length) {
       let isDeleting = false;
+      const clickAction = (ev) => {
+        var _a, _b;
+        if (!((_b = (_a = this.activeAnnotation) === null || _a === void 0 ? void 0 : _a._local) === null || _b === void 0 ? void 0 : _b.isFocusing)) {
+          this.lastMode = this.mode;
+          this.focusAnnotation();
+        }
+        else {
+          ev.stopPropagation();
+        }
+      };
       const pressAction = ({ x, y, applyBounds, target }) => {
         var _a, _b, _c;
         applyBounds(this.host);
@@ -782,9 +789,10 @@ const YooPhotoEditorComponent = class {
         this.hideAllTooltips();
         isDeleting = index$1.Draggable.hitTest(this.activeElement, this.actionButtonElement.delete, '35%');
         this.actionButtonElement.delete.classList.toggle('hit', isDeleting);
-        index$1.gsapTo(this.activeElement, this.animationDelay, { scale: isDeleting ? .25 : 1 });
+        index$1.gsapTo(this.activeElement, this.animationDelay, { scale: isDeleting ? 0.25 : 1 });
       };
-      const dragEndAction = async ({ x, y, applyBounds, update }) => {
+      const dragEndAction = async ({ x, y, applyBounds, update, pointerEvent }) => {
+        pointerEvent.stopPropagation();
         applyBounds(this.annotationsContainerElement);
         update(true);
         index$1.gsapFrom(this.activeElement, photoEditor_helpers.ANIMATION_DELAY, { x, y });
@@ -804,11 +812,17 @@ const YooPhotoEditorComponent = class {
         type: 'x,y',
         bounds: this.annotationsContainerElement,
         zIndexBoost: false,
-        allowEventDefault: true,
-        onPress() { pressAction(this); },
+        onClick() {
+          clickAction(this.pointerEvent);
+        },
+        onPress() {
+          pressAction(this);
+        },
         onDragStart: dragStartAction,
         onDrag: dragAction,
-        onDragEnd() { dragEndAction(this); }
+        onDragEnd() {
+          dragEndAction(this);
+        }
       });
     }
     return [];
@@ -842,7 +856,7 @@ const YooPhotoEditorComponent = class {
       const isTextBox = newAnnotation.type === 'text';
       const newElement = (_d = (_c = (_b = this[`${isTextBox ? 'textbox' : 'dot'}Elements`]) === null || _b === void 0 ? void 0 : _b.filter((el) => el)) === null || _c === void 0 ? void 0 : _c.slice(-1)) === null || _d === void 0 ? void 0 : _d[0];
       if (newElement && this.annotationsContainerElement) {
-        isTextBox && await index$1.scaleUpAnimation(newElement, this.animationDelay / 2);
+        isTextBox && (await index$1.scaleUpAnimation(newElement, this.animationDelay / 2));
         if (newElement) {
           this.hasImageBeenCleaned = false;
           this.draggables.push(this.getDraggables([newElement])[0]);
@@ -853,7 +867,7 @@ const YooPhotoEditorComponent = class {
       }
     }
   }
-  switchMode(newMode = (this.hasExtraActions && this.isReadonly) ? 'extras' : 'tools') {
+  switchMode(newMode = this.hasExtraActions && this.isReadonly ? 'extras' : 'tools') {
     if (newMode !== this.mode) {
       this.lastMode = this.mode;
       this.mode = newMode;
@@ -876,9 +890,7 @@ const YooPhotoEditorComponent = class {
     }
   }
   updatePosition() {
-    const centerCoords = this.textEditorElement
-      ? photoEditor_helpers.getAbsoluteCenter(this.activeElement, this.imageBounds)
-      : photoEditor_helpers.getRelativeCenter(this.activeElement, this.imageBounds);
+    const centerCoords = this.textEditorElement ? photoEditor_helpers.getAbsoluteCenter(this.activeElement, this.imageBounds) : photoEditor_helpers.getRelativeCenter(this.activeElement, this.imageBounds);
     const getBoundAxis = () => (this.textEditorElement ? ['left', 'top'] : ['x', 'y']);
     this.activeElement &&
       index$1.gsapSet(this.activeElement, {
@@ -948,8 +960,8 @@ const YooPhotoEditorComponent = class {
     }
     else {
       // Mobile & Emulate
-      ['ontouchstart', 'onpointerdown'].forEach((evName) => this.cursorPickerElement[evName] = leavePicker);
-      ['ontouchmove', 'onpointermove'].forEach((evName) => this.imageElement[evName] = enterPicker);
+      ['ontouchstart', 'onpointerdown'].forEach((evName) => (this.cursorPickerElement[evName] = leavePicker));
+      ['ontouchmove', 'onpointermove'].forEach((evName) => (this.imageElement[evName] = enterPicker));
     }
   }
   toggleTextAlign() {
@@ -1036,20 +1048,23 @@ const YooPhotoEditorComponent = class {
   async showActionDialog(action, type) {
     await this.unfocusAnnotation();
     const translations = [type, 'YOOBICKEEP', 'DISCARD', 'AREYOUSURE'];
-    index$1.showAlert({ header: index$1.translate(translations[0]), buttonText: [index$1.translate(translations[1]), index$1.translate(translations[2])], message: index$1.translate(translations[3]) }).then((discardChanges) => {
+    index$1.showAlert({
+      header: index$1.translate(translations[0]),
+      buttonText: [index$1.translate(translations[1]), index$1.translate(translations[2])],
+      message: index$1.translate(translations[3])
+    }).then((discardChanges) => {
       if (discardChanges && lodash.isFunction(this.editorActions[action])) {
         this.editorActions[action]();
       }
     });
   }
   async restoreSavedAnnotations(type) {
-    await Promise.all([Promise.resolve(this.displayDrawings()), ...this.savedAnnotationElements.map(e => e && index$1.gsapSet(e, { clearProps: 'transform' }))]);
+    await Promise.all([Promise.resolve(this.displayDrawings()), ...this.savedAnnotationElements.map((e) => e && index$1.gsapSet(e, { clearProps: 'transform' }))]);
     this.annotations = lodash.cloneDeep(photoEditor_helpers.removeLocalsFromAnnotations(!type ? this.savedAnnotations : this.savedDots.concat(this.textboxes)));
   }
   async switchBackToExtras() {
     this.isReadonly = true;
     this.switchFromEditable.emit(true);
-    await this.initDrawingsStack();
     this.switchMode('extras');
     this.isLoading = false;
   }
@@ -1061,19 +1076,20 @@ const YooPhotoEditorComponent = class {
       const isIcon = clickedElement.tagName === 'YOO-ICON';
       content = isIcon ? clickedElement['name'] : content;
       const actionName = isIcon ? clickedElement.name : (_a = content === null || content === void 0 ? void 0 : content.toLowerCase()) === null || _a === void 0 ? void 0 : _a.replace('yoobic', '');
-      const getEntity = (button, type) => (button === null || button === void 0 ? void 0 : button[type]) && lodash.isFunction(button[type]) ? button[type]() : button[type];
-      const extraAction = (_b = (this.extraActions || [])) === null || _b === void 0 ? void 0 : _b.find(xa => { var _a, _b; return ((_a = getEntity(xa, 'icon')) === null || _a === void 0 ? void 0 : _a.includes(content)) || ((_b = getEntity(xa, 'content')) === null || _b === void 0 ? void 0 : _b.includes(xa === null || xa === void 0 ? void 0 : xa.icon)); });
+      const getEntity = (button, type) => ((button === null || button === void 0 ? void 0 : button[type]) && lodash.isFunction(button[type]) ? button[type]() : button[type]);
+      const extraAction = (_b = (this.extraActions || [])) === null || _b === void 0 ? void 0 : _b.find((xa) => { var _a, _b; return ((_a = getEntity(xa, 'icon')) === null || _a === void 0 ? void 0 : _a.includes(content)) || ((_b = getEntity(xa, 'content')) === null || _b === void 0 ? void 0 : _b.includes(xa === null || xa === void 0 ? void 0 : xa.icon)); });
       if (extraAction) {
         if (extraAction.icon === 'photo-annotated') {
           this.isReadonly = false;
         }
         else if ((extraAction === null || extraAction === void 0 ? void 0 : extraAction['subActions']) || (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subMenu'])) {
           const actions = (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subActions']) || (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subMenu']);
-          index$1.isWeb(this.host) ?
-            index$1.showContextMenu(ev, {
+          index$1.isWeb(this.host)
+            ? index$1.showContextMenu(ev, {
               hostElement: ev === null || ev === void 0 ? void 0 : ev.target,
               contentButtons: actions
-            }) : index$1.showActionSheet(actions, null, {}, null, ev);
+            })
+            : index$1.showActionSheet(actions, null, {}, null, ev);
         }
         else {
           (_c = extraAction === null || extraAction === void 0 ? void 0 : extraAction.handler) === null || _c === void 0 ? void 0 : _c.call(extraAction, ev);
@@ -1112,16 +1128,12 @@ const YooPhotoEditorComponent = class {
         // Draw Actions
         case photoEditor_helpers.EEditorActions.undo:
           {
-            this.drawingsStackIndex--;
-            this.displayDrawings(this.drawingsStack[this.drawingsStackIndex]);
-            index.forceUpdate(this);
+            this.drawActions.undo();
           }
           break;
         case photoEditor_helpers.EEditorActions.redo:
           {
-            this.drawingsStackIndex++;
-            this.displayDrawings(this.drawingsStack[this.drawingsStackIndex]);
-            index.forceUpdate(this);
+            this.drawActions.redo();
           }
           break;
         // Close Actions
@@ -1145,15 +1157,15 @@ const YooPhotoEditorComponent = class {
   toggleDraggableAnnotations() {
     var _a, _b, _c;
     if ((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.length) {
-      this.annotationElements.forEach(e => {
+      this.annotationElements.forEach((e) => {
         if (e) {
           e.classList.remove('hidden');
           //bypass fix gsap draggable auto-generating user-select on editing a focusing textbox
-          ['user-select', '-webkit-user-select', '-moz-user-select'].forEach(us => e.style.removeProperty(us));
+          ['user-select', '-webkit-user-select', '-moz-user-select'].forEach((us) => e.style.removeProperty(us));
         }
       });
       !((_b = this.draggables) === null || _b === void 0 ? void 0 : _b.length) && (this.draggables = this.getDraggables());
-      (_c = this.draggables) === null || _c === void 0 ? void 0 : _c.forEach(draggable => {
+      (_c = this.draggables) === null || _c === void 0 ? void 0 : _c.forEach((draggable) => {
         if (draggable) {
           if (this.isReadonly || this.hasFocusingAnnotation) {
             draggable.disable();
@@ -1173,14 +1185,14 @@ const YooPhotoEditorComponent = class {
   async save() {
     var _a, _b;
     this.isLoading = true;
+    this.redoList = [];
     this.actionButtonElement.validate.classList.remove('active');
     this.footerElement.style.removeProperty('transform');
     if (this.changes.annotations) {
-      this.annotations = photoEditor_helpers.formatAnnotationsForExport(this.annotations.filter(a => annotationsHelpers.isAnnotationValid(a)), this.annotationsContainerElement);
+      this.annotations = photoEditor_helpers.formatAnnotationsForExport(this.annotations.filter((a) => annotationsHelpers.isAnnotationValid(a)), this.annotationsContainerElement);
     }
     if (this.changes.drawings || this.hasImageBeenCleaned) {
-      this.drawings = this.hasImageBeenCleaned ? '' : await this.getDrawingsUrl();
-      await this.initDrawingsStack();
+      this.drawings = this.hasImageBeenCleaned || photoEditor_helpers.isCanvasBlank(this.canvasContext) ? '' : await this.getDrawingsUrl();
     }
     this.savedAnnotations = lodash.cloneDeep(this.annotations);
     const savedChanges = {
@@ -1188,7 +1200,7 @@ const YooPhotoEditorComponent = class {
       annotations: photoEditor_helpers.removeLocalsFromAnnotations(this.annotations)
     };
     this.saveChanges.emit(savedChanges);
-    await Promise.all((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.map(e => index$1.gsapSet(e, { clearProps: 'transform' })));
+    await Promise.all((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.map((e) => index$1.gsapSet(e, { clearProps: 'transform' })));
     if (this.hasExtraActions && !this.showSaveInitial && !this.submitButton) {
       await this.switchBackToExtras();
     }
@@ -1214,7 +1226,7 @@ const YooPhotoEditorComponent = class {
     }
     else {
       if (this.hasEmptyAnnotation) {
-        this.annotations = this.annotations.filter(a => !annotationsHelpers.isAnnotationEmpty(a));
+        this.annotations = this.annotations.filter((a) => !annotationsHelpers.isAnnotationEmpty(a));
         shouldSwitchBackToToolsMode = this.isDotMode;
       }
       if (this.hasFocusingAnnotation) {
@@ -1277,14 +1289,14 @@ const YooPhotoEditorComponent = class {
   }
   toggleAnnotationsVisibility(show) {
     var _a, _b;
-    (_b = (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.filter(e => { var _a; return e.id !== ((_a = this.activeAnnotation) === null || _a === void 0 ? void 0 : _a._id); })) === null || _b === void 0 ? void 0 : _b.forEach(e => show ? e.removeAttribute('hidden') : e.setAttribute('hidden', 'true'));
+    (_b = (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.filter((e) => { var _a; return e.id !== ((_a = this.activeAnnotation) === null || _a === void 0 ? void 0 : _a._id); })) === null || _b === void 0 ? void 0 : _b.forEach((e) => (show ? e.removeAttribute('hidden') : e.setAttribute('hidden', 'true')));
   }
   onImageZoom(ev) {
     var _a;
     if (this.isReadonly) {
       const isZooming = ev === null || ev === void 0 ? void 0 : ev.detail;
       this.imageZoomed.emit(isZooming);
-      (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.forEach(e => isZooming ? e.setAttribute('hidden', 'true') : e.removeAttribute('hidden'));
+      (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.forEach((e) => (isZooming ? e.setAttribute('hidden', 'true') : e.removeAttribute('hidden')));
     }
   }
   async unfocusAnnotation() {
@@ -1295,12 +1307,12 @@ const YooPhotoEditorComponent = class {
       this.isTextEditMode && this.clearFocus();
       !this.hasDotBeenSaved && (this.activeAnnotation = null);
       this.toggleDraggableAnnotations();
-      this.switchMode((this.isDotEditMode && !this.hasDoneBeenClicked) ? 'annotate' : 'tools');
+      this.switchMode(this.isDotEditMode && !this.hasDoneBeenClicked ? 'annotate' : 'tools');
     }
     return Promise.resolve();
   }
   renderSlider() {
-    return !this.isReadonly && index.h("yoo-range", { direction: "rtl", "data-status": (this.isEditMode && !this.isDotMode) ? ERangeStatus.active : ERangeStatus.hidden, min: this.sizes.min, max: this.sizes.max, orientation: "vertical", ref: (el) => (this.rangeElement = el), value: this.size || this.sizes.default, onClick: ev => ev.stopPropagation(), onTransitionEnd: () => !this.isReadonly && this.tidyRange(), onKnobPressed: () => {
+    return (!this.isReadonly && (index.h("yoo-range", { direction: "rtl", "data-status": this.isEditMode && !this.isDotMode ? ERangeStatus.active : ERangeStatus.hidden, min: this.sizes.min, max: this.sizes.max, orientation: "vertical", ref: (el) => (this.rangeElement = el), value: this.size || this.sizes.default, onClick: (ev) => ev.stopPropagation(), onTransitionEnd: () => !this.isReadonly && this.tidyRange(), onKnobPressed: () => {
         this.rangeElement.dataset.status = ERangeStatus.active;
         clearTimeout(this.collapseRangeTimeout);
       }, onValueChanged: ({ detail }) => this.changeSize(detail), onKnobReleased: (ev) => {
@@ -1308,40 +1320,43 @@ const YooPhotoEditorComponent = class {
         this.size = ev.detail;
         this.updateSize();
         this.tidyRange();
-      } }, index.h("div", { class: "triangle", slot: "start" }));
+      } }, index.h("div", { class: "triangle", slot: "start" }))));
   }
   renderTextEditor() {
-    return (index.h("div", { id: "text-editor", class: "focused", contenteditable: true, ref: (el) => (this.textEditorElement = el), onInput: () => this.updatePosition() }));
+    return index.h("div", { id: "text-editor", class: "focused", contenteditable: true, ref: (el) => (this.textEditorElement = el), onInput: () => this.updatePosition() });
   }
   renderTextbox(textbox) {
     var _a;
-    return index.h(Textbox, { annotation: textbox, readonly: this.isReadonly, imageSize: (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized, hidden: this.isLoading, onAnnotationClick: (ev) => this.clickAnnotation(ev, textbox), onFocus: () => formInputHelpers.focusContentEditable(this.activeElement), onType: (ev) => {
+    return (index.h(Textbox, { annotation: textbox, readonly: this.isReadonly, imageSize: (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized, hidden: this.isLoading, onAnnotationClick: () => this.isReadonly && this.imageClicked.emit(true), onFocus: () => formInputHelpers.focusContentEditable(this.activeElement), onType: (ev) => {
         if (ev && this.activeAnnotation) {
           this.activeAnnotation.text = this.activeElement.innerText;
           this.updatePosition();
           this.updateSize();
         }
-      } });
+      } }));
   }
   renderDot(dot) {
     const disableTooltip = this.isPreview && !this.isImageZoomable;
-    return index.h(Dot, { annotation: dot, readonly: this.isReadonly, isWeb: index$1.isWeb(this.host), disableTooltip: disableTooltip, tooltipProps: { showOnCreate: !disableTooltip && this.isDotMode }, hidden: this.isLoading, onAnnotationClick: (ev) => this.clickAnnotation(ev, dot), onDotSave: () => this.unfocusAnnotation() });
+    return (index.h(Dot, { annotation: dot, readonly: this.isReadonly, isWeb: index$1.isWeb(this.host), disableTooltip: disableTooltip, tooltipProps: { showOnCreate: !disableTooltip && this.isDotMode }, hidden: this.isLoading, onAnnotationClick: () => this.isReadonly && this.imageClicked.emit(true), onDotSave: () => this.unfocusAnnotation() }));
   }
   renderOverlay() {
     var _a;
-    return this.isCreateMode && (index.h("div", { id: "overlay", style: (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized, onClick: (ev) => this.overlayClick(ev) }, this.isDotCreateMode && index.h("div", null, index$1.translate('TAPTOINSERTCOMMENT')), this.isTextCreateMode && this.renderTextEditor()));
+    return (this.isCreateMode && (index.h("div", { id: "overlay", style: (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized, onClick: (ev) => this.overlayClick(ev) }, this.isDotCreateMode && index.h("div", null, index$1.translate('TAPTOINSERTCOMMENT')), this.isTextCreateMode && this.renderTextEditor())));
   }
   renderHeader() {
-    return this.navbarVisiblity !== 'disabled' && !this.isPreview && index.h(Navbar, { visibility: this.navbarVisiblity, animated: this.mode !== this.lastMode, currentOptions: this.menuOptions.getOptions()[this.mode], onOptionClick: (ev, btnContent) => this.optionsClick(ev, btnContent) });
+    return (this.navbarVisiblity !== 'disabled' &&
+      !this.isPreview && (index.h(Navbar, { visibility: this.navbarVisiblity, animated: this.mode !== this.lastMode, currentOptions: this.menuOptions.getOptions()[this.mode], onOptionClick: (ev, btnContent) => this.optionsClick(ev, btnContent) })));
   }
   renderAnnotations() {
     var _a, _b;
-    return this.isEditorInViewPort && (this.displayAnnotations || !this.isReadonly) && (index.h("section", { id: "annotations", style: (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized, ref: el => this.annotationsContainerElement = el }, (_b = this.annotations) === null || _b === void 0 ? void 0 : _b.map(a => (a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))));
+    return (this.isEditorInViewPort &&
+      (this.displayAnnotations || !this.isReadonly) && (index.h("section", { id: "annotations", style: (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized, ref: (el) => (this.annotationsContainerElement = el) }, (_b = this.annotations) === null || _b === void 0 ? void 0 : _b.map((a) => ((a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))))));
   }
   renderImage() {
     var _a, _b;
     const { width, height } = ((_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized) || {};
-    return (index.h("yoo-img", { instant: true, id: "src", src: this.finalSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false, ...((this.isPreview && !this.isImageZoomable) && {
+    return (index.h("yoo-img", { instant: true, id: "src", src: this.finalSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false, ...(this.isPreview &&
+        !this.isImageZoomable && {
         cloudinaryOptions: { width, height, noRatio: true, fit: true }
       }), onLoaded: async ({ detail }) => {
         await this.prepareImageSize(detail);
@@ -1349,12 +1364,12 @@ const YooPhotoEditorComponent = class {
       }, onErrored: () => {
         this.alertInvalidUrl();
         this.isLoading = false;
-      }, ref: el => this.imageElement = el, style: (_b = this.imageSizeStyle) === null || _b === void 0 ? void 0 : _b.natural }));
+      }, ref: (el) => (this.imageElement = el), style: (_b = this.imageSizeStyle) === null || _b === void 0 ? void 0 : _b.natural }));
   }
   renderCanvas() {
     var _a;
     const { startDraw, draw, stopDraw } = this.drawActions;
-    return index.h("canvas", { id: "drawings", ...(this.isEditorInViewPort && ((_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.natural)), ref: el => this.canvasElement = el, onClick: (ev) => ev && this.canvasClick(ev), onPointerDown: startDraw, onPointerMove: draw, onPointerUp: stopDraw, onPointerLeave: stopDraw, onPointerCancel: stopDraw });
+    return (index.h("canvas", { id: "drawings", ...(this.isEditorInViewPort && ((_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.natural)), ref: (el) => (this.canvasElement = el), onClick: (ev) => ev && this.canvasClick(ev), onPointerDown: startDraw, onPointerMove: draw, onPointerUp: stopDraw, onPointerLeave: stopDraw, onPointerCancel: stopDraw }));
   }
   renderActionButtons() {
     return (!this.isReadonly || this.submitView === 'extras') && index.h(Actions, { submitButton: this.submitButton, onActionClick: (ev, btnContent) => this.optionsClick(ev, btnContent) });
@@ -1372,7 +1387,8 @@ const YooPhotoEditorComponent = class {
   renderFooter() {
     const selectedColor = this.isTextCreateMode ? 'light' : this.isDotCreateMode ? 'success' : this.color;
     const hasDescription = !!this.description && this.isReadonly;
-    return (!this.isPreview && (!this.isReadonly || hasDescription) && (index.h("footer", { class: { 'has-description': hasDescription }, ref: (el => this.footerElement = el) }, hasDescription && index.h("div", { class: "description-container" }, this.description), !this.isReadonly && index.h("yoo-color-selector", { disablePicker: this.isTextCreateMode || this.isDotCreateMode, selectedColor: selectedColor, ref: (el) => (this.colorSelectorElement = el), onPickerSelected: () => this.onPickColor(), onColorSelected: (event) => this.onSelectColor(event === null || event === void 0 ? void 0 : event.detail) }))));
+    return (!this.isPreview &&
+      (!this.isReadonly || hasDescription) && (index.h("footer", { class: { 'has-description': hasDescription }, ref: (el) => (this.footerElement = el) }, hasDescription && index.h("div", { class: "description-container" }, this.description), !this.isReadonly && (index.h("yoo-color-selector", { disablePicker: this.isTextCreateMode || this.isDotCreateMode, selectedColor: selectedColor, ref: (el) => (this.colorSelectorElement = el), onPickerSelected: () => this.onPickColor(), onColorSelected: (event) => this.onSelectColor(event === null || event === void 0 ? void 0 : event.detail) })))));
   }
   render() {
     return (index.h(index.Host, { class: { 'swiper-no-swiping': !this.isReadonly, ...commonHelpers.getAppContext(this.host) }, ...(this.isPreview && !this.isImageZoomable && this.imageSizeStyle), onClick: (ev) => this.outsideImageClick(ev) }, this.renderHeader(), this.renderContent(), this.renderFooter(), this.renderSlider(), this.renderActionButtons(), this.renderLoader()));