@yoobic/yobi 8.7.17 → 8.7.18

package/dist/collection/components/3.organisms/photo-editor/photo-editor.js

@@ -49,9 +49,8 @@ export class YooPhotoEditorComponent {
     this.backgroundText = 'off';
     this.alignText = 'center';
     this.animationDelay = this.animated ? ANIMATION_DELAY : 0;
-    this.drawingsStackIndex = -1;
-    this.baseDrawingsStack = [];
-    this.drawingsStack = [];
+    this.undoList = [];
+    this.redoList = [];
     this.editable = false;
     this.displayAnnotations = true;
     this.zoomable = undefined;
@@ -92,17 +91,17 @@ export class YooPhotoEditorComponent {
   }
   get menuOptions() {
     var _a, _b, _c, _d;
-    const clearable = (((_a = this.canvasElement) === null || _a === void 0 ? void 0 : _a.width) && !isCanvasBlank(this.canvasContext)) || !!((_c = (_b = this.annotations) === null || _b === void 0 ? void 0 : _b.filter(a => !isAnnotationDeleted(a))) === null || _c === void 0 ? void 0 : _c.length);
+    const clearable = (((_a = this.canvasElement) === null || _a === void 0 ? void 0 : _a.width) && !isCanvasBlank(this.canvasContext)) || !!((_c = (_b = this.annotations) === null || _b === void 0 ? void 0 : _b.filter((a) => !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: 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
       }
     });
   }
@@ -223,10 +222,10 @@ export class YooPhotoEditorComponent {
         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;
@@ -236,11 +235,11 @@ export class YooPhotoEditorComponent {
       .map((a) => a === null || a === void 0 ? void 0 : a[propName]));
     const hasTextChanged = !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) && !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() {
@@ -264,10 +263,29 @@ export class YooPhotoEditorComponent {
   }
   get hasEmptyAnnotation() {
     var _a, _b, _c, _d, _e;
-    return !!this.annotations.find(a => 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) => 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) {
+          drawImageOnCanvas(popList.pop(), this.canvasContext);
+          this.drawActions.saveState(pushList);
+          forceUpdate(this);
+        }
+      },
       startDraw: (ev) => {
         if (this.canDraw && ev) {
           this.hasImageBeenCleaned = false;
@@ -277,6 +295,7 @@ export class YooPhotoEditorComponent {
           this.canvasContext.strokeStyle = 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;
         }
       },
@@ -290,9 +309,7 @@ export class YooPhotoEditorComponent {
       },
       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();
@@ -306,7 +323,6 @@ export class YooPhotoEditorComponent {
       discardChanges: async () => {
         this.isLoading = true;
         await this.restoreSavedAnnotations();
-        await this.initDrawingsStack();
         this.toggleSaveButton(false);
         this.toggleColorSelector(false);
         this.switchMode();
@@ -324,7 +340,7 @@ export class YooPhotoEditorComponent {
       },
       clearImage: () => {
         clearCanvas(this.canvasContext);
-        this.annotations = this.annotations.map(a => updateAnnotationLocal(a, Object.assign({ isDeleted: true, isFocused: false })));
+        this.annotations = this.annotations.map((a) => updateAnnotationLocal(a, Object.assign({ isDeleted: true, isFocused: false })));
         this.hasImageBeenCleaned = true;
         this.toggleSaveButton(true);
       },
@@ -410,10 +426,8 @@ export class YooPhotoEditorComponent {
     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() {
@@ -429,18 +443,26 @@ export class YooPhotoEditorComponent {
   }
   resizeSrc(sourceSrc, options) {
     var _a;
-    return sourceSrc && cloudinary(sourceSrc, {
-      ...this.cloudinaryOptions, fit: true, noRatio: true,
-      ...options || {},
-      ...(!isWeb(this.host) && {
-        width: ((_a = this.cloudinaryOptions) === null || _a === void 0 ? void 0 : _a.width) || this.maxImageSize.width
-      })
-    });
+    return (sourceSrc &&
+      cloudinary(sourceSrc, {
+        ...this.cloudinaryOptions,
+        fit: true,
+        noRatio: true,
+        ...(options || {}),
+        ...(!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 getImageSize(this.finalSrc);
-    imageSize.width > this.maxImageSize.width && (imageSize = await getResizedImageSize({ imgSize: imageSize, maxWidth: this.maxImageSize.width, maxHeight: this.maxImageSize.height }));
+    let imageSize = naturalImageSize || (await getImageSize(this.finalSrc));
+    imageSize.width > this.maxImageSize.width &&
+      (imageSize = await getResizedImageSize({
+        imgSize: imageSize,
+        maxWidth: this.maxImageSize.width,
+        maxHeight: this.maxImageSize.height
+      }));
     this.imageSize = {
       natural: imageSize,
       get scaleFactor() {
@@ -483,11 +505,16 @@ export class YooPhotoEditorComponent {
         if (!isEqual(canvasRect, newCanvasRect) && this.isEditorInViewPort) {
           canvasRect = newCanvasRect;
           this.canvasContext = 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 {
@@ -498,17 +525,6 @@ export class YooPhotoEditorComponent {
       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;
@@ -543,7 +559,11 @@ export class YooPhotoEditorComponent {
     }
   }
   getDrawingsUrl() {
-    return !isCanvasBlank(this.canvasContext) ? isOffline() ? Promise.resolve(this.currentDrawings) : getAsyncExtraData({ type: 'media-upload', params: { mediaData: this.currentDrawings } }) : Promise.resolve('');
+    return !isCanvasBlank(this.canvasContext)
+      ? isOffline()
+        ? Promise.resolve(this.currentDrawings)
+        : getAsyncExtraData({ type: 'media-upload', params: { mediaData: this.currentDrawings } })
+      : Promise.resolve('');
   }
   async displayDrawings(drawings = this.drawings) {
     try {
@@ -564,16 +584,14 @@ export class YooPhotoEditorComponent {
   }
   async alertInvalidUrl() {
     if (!this.isPreview) {
-      const shouldClose = await showAlert({ header: 'ERROR', buttonText: [translate('CONTINUE'), translate('CLOSE')], message: translate('INVALIDURLBODY') });
+      const shouldClose = await showAlert({
+        header: 'ERROR',
+        buttonText: [translate('CONTINUE'), translate('CLOSE')],
+        message: 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());
@@ -605,25 +623,19 @@ export class YooPhotoEditorComponent {
     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);
@@ -650,9 +662,10 @@ export class YooPhotoEditorComponent {
         this.hideAllTooltips();
         isDeleting = Draggable.hitTest(this.activeElement, this.actionButtonElement.delete, '35%');
         this.actionButtonElement.delete.classList.toggle('hit', isDeleting);
-        gsapTo(this.activeElement, this.animationDelay, { scale: isDeleting ? .25 : 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);
         gsapFrom(this.activeElement, ANIMATION_DELAY, { x, y });
@@ -672,11 +685,17 @@ export class YooPhotoEditorComponent {
         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 [];
@@ -710,7 +729,7 @@ export class YooPhotoEditorComponent {
       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 scaleUpAnimation(newElement, this.animationDelay / 2);
+        isTextBox && (await scaleUpAnimation(newElement, this.animationDelay / 2));
         if (newElement) {
           this.hasImageBeenCleaned = false;
           this.draggables.push(this.getDraggables([newElement])[0]);
@@ -721,7 +740,7 @@ export class YooPhotoEditorComponent {
       }
     }
   }
-  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;
@@ -744,9 +763,7 @@ export class YooPhotoEditorComponent {
     }
   }
   updatePosition() {
-    const centerCoords = this.textEditorElement
-      ? getAbsoluteCenter(this.activeElement, this.imageBounds)
-      : getRelativeCenter(this.activeElement, this.imageBounds);
+    const centerCoords = this.textEditorElement ? getAbsoluteCenter(this.activeElement, this.imageBounds) : getRelativeCenter(this.activeElement, this.imageBounds);
     const getBoundAxis = () => (this.textEditorElement ? ['left', 'top'] : ['x', 'y']);
     this.activeElement &&
       gsapSet(this.activeElement, {
@@ -816,8 +833,8 @@ export class YooPhotoEditorComponent {
     }
     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() {
@@ -904,20 +921,23 @@ export class YooPhotoEditorComponent {
   async showActionDialog(action, type) {
     await this.unfocusAnnotation();
     const translations = [type, 'YOOBICKEEP', 'DISCARD', 'AREYOUSURE'];
-    showAlert({ header: translate(translations[0]), buttonText: [translate(translations[1]), translate(translations[2])], message: translate(translations[3]) }).then((discardChanges) => {
+    showAlert({
+      header: translate(translations[0]),
+      buttonText: [translate(translations[1]), translate(translations[2])],
+      message: translate(translations[3])
+    }).then((discardChanges) => {
       if (discardChanges && isFunction(this.editorActions[action])) {
         this.editorActions[action]();
       }
     });
   }
   async restoreSavedAnnotations(type) {
-    await Promise.all([Promise.resolve(this.displayDrawings()), ...this.savedAnnotationElements.map(e => e && gsapSet(e, { clearProps: 'transform' }))]);
+    await Promise.all([Promise.resolve(this.displayDrawings()), ...this.savedAnnotationElements.map((e) => e && gsapSet(e, { clearProps: 'transform' }))]);
     this.annotations = cloneDeep(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;
   }
@@ -929,19 +949,20 @@ export class YooPhotoEditorComponent {
       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]) && 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]) && 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']);
-          isWeb(this.host) ?
-            showContextMenu(ev, {
+          isWeb(this.host)
+            ? showContextMenu(ev, {
               hostElement: ev === null || ev === void 0 ? void 0 : ev.target,
               contentButtons: actions
-            }) : showActionSheet(actions, null, {}, null, ev);
+            })
+            : 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);
@@ -980,16 +1001,12 @@ export class YooPhotoEditorComponent {
         // Draw Actions
         case EEditorActions.undo:
           {
-            this.drawingsStackIndex--;
-            this.displayDrawings(this.drawingsStack[this.drawingsStackIndex]);
-            forceUpdate(this);
+            this.drawActions.undo();
           }
           break;
         case EEditorActions.redo:
           {
-            this.drawingsStackIndex++;
-            this.displayDrawings(this.drawingsStack[this.drawingsStackIndex]);
-            forceUpdate(this);
+            this.drawActions.redo();
           }
           break;
         // Close Actions
@@ -1013,15 +1030,15 @@ export class YooPhotoEditorComponent {
   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();
@@ -1041,14 +1058,14 @@ export class YooPhotoEditorComponent {
   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 = formatAnnotationsForExport(this.annotations.filter(a => isAnnotationValid(a)), this.annotationsContainerElement);
+      this.annotations = formatAnnotationsForExport(this.annotations.filter((a) => isAnnotationValid(a)), this.annotationsContainerElement);
     }
     if (this.changes.drawings || this.hasImageBeenCleaned) {
-      this.drawings = this.hasImageBeenCleaned ? '' : await this.getDrawingsUrl();
-      await this.initDrawingsStack();
+      this.drawings = this.hasImageBeenCleaned || isCanvasBlank(this.canvasContext) ? '' : await this.getDrawingsUrl();
     }
     this.savedAnnotations = cloneDeep(this.annotations);
     const savedChanges = {
@@ -1056,7 +1073,7 @@ export class YooPhotoEditorComponent {
       annotations: removeLocalsFromAnnotations(this.annotations)
     };
     this.saveChanges.emit(savedChanges);
-    await Promise.all((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.map(e => gsapSet(e, { clearProps: 'transform' })));
+    await Promise.all((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.map((e) => gsapSet(e, { clearProps: 'transform' })));
     if (this.hasExtraActions && !this.showSaveInitial && !this.submitButton) {
       await this.switchBackToExtras();
     }
@@ -1082,7 +1099,7 @@ export class YooPhotoEditorComponent {
     }
     else {
       if (this.hasEmptyAnnotation) {
-        this.annotations = this.annotations.filter(a => !isAnnotationEmpty(a));
+        this.annotations = this.annotations.filter((a) => !isAnnotationEmpty(a));
         shouldSwitchBackToToolsMode = this.isDotMode;
       }
       if (this.hasFocusingAnnotation) {
@@ -1145,14 +1162,14 @@ export class YooPhotoEditorComponent {
   }
   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() {
@@ -1163,12 +1180,12 @@ export class YooPhotoEditorComponent {
       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 && 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 && (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) => {
@@ -1176,40 +1193,43 @@ export class YooPhotoEditorComponent {
         this.size = ev.detail;
         this.updateSize();
         this.tidyRange();
-      } }, h("div", { class: "triangle", slot: "start" }));
+      } }, h("div", { class: "triangle", slot: "start" }))));
   }
   renderTextEditor() {
-    return (h("div", { id: "text-editor", class: "focused", contenteditable: true, ref: (el) => (this.textEditorElement = el), onInput: () => this.updatePosition() }));
+    return h("div", { id: "text-editor", class: "focused", contenteditable: true, ref: (el) => (this.textEditorElement = el), onInput: () => this.updatePosition() });
   }
   renderTextbox(textbox) {
     var _a;
-    return 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: () => focusContentEditable(this.activeElement), onType: (ev) => {
+    return (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: () => 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 h(Dot, { annotation: dot, readonly: this.isReadonly, isWeb: isWeb(this.host), disableTooltip: disableTooltip, tooltipProps: { showOnCreate: !disableTooltip && this.isDotMode }, hidden: this.isLoading, onAnnotationClick: (ev) => this.clickAnnotation(ev, dot), onDotSave: () => this.unfocusAnnotation() });
+    return (h(Dot, { annotation: dot, readonly: this.isReadonly, isWeb: 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 && (h("div", { id: "overlay", style: (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized, onClick: (ev) => this.overlayClick(ev) }, this.isDotCreateMode && h("div", null, translate('TAPTOINSERTCOMMENT')), this.isTextCreateMode && this.renderTextEditor()));
+    return (this.isCreateMode && (h("div", { id: "overlay", style: (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized, onClick: (ev) => this.overlayClick(ev) }, this.isDotCreateMode && h("div", null, translate('TAPTOINSERTCOMMENT')), this.isTextCreateMode && this.renderTextEditor())));
   }
   renderHeader() {
-    return this.navbarVisiblity !== 'disabled' && !this.isPreview && 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 && (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) && (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) && (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 (h("yoo-img", { instant: true, id: "src", src: this.finalSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false, ...((this.isPreview && !this.isImageZoomable) && {
+    return (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);
@@ -1217,12 +1237,12 @@ export class YooPhotoEditorComponent {
       }, 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 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 (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') && h(Actions, { submitButton: this.submitButton, onActionClick: (ev, btnContent) => this.optionsClick(ev, btnContent) });
@@ -1240,7 +1260,8 @@ export class YooPhotoEditorComponent {
   renderFooter() {
     const selectedColor = this.isTextCreateMode ? 'light' : this.isDotCreateMode ? 'success' : this.color;
     const hasDescription = !!this.description && this.isReadonly;
-    return (!this.isPreview && (!this.isReadonly || hasDescription) && (h("footer", { class: { 'has-description': hasDescription }, ref: (el => this.footerElement = el) }, hasDescription && h("div", { class: "description-container" }, this.description), !this.isReadonly && 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) && (h("footer", { class: { 'has-description': hasDescription }, ref: (el) => (this.footerElement = el) }, hasDescription && h("div", { class: "description-container" }, this.description), !this.isReadonly && (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 (h(Host, { class: { 'swiper-no-swiping': !this.isReadonly, ...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()));

package/dist/collection/components/form/form-audience/form-audience.css

@@ -208,6 +208,11 @@ svg:not(:root) {
   flex-direction: column;
   height: 100%;
 }
+:host .outer-container .more-icon {
+  position: absolute;
+  top: var(--spacing-16, 1rem);
+  right: var(--spacing-16, 1rem);
+}
 :host .outer-container yoo-tabs {
   --height-tabs: 2.5rem;
   --tab-padding: 0 var(--spacing-16, 1rem) 0 0;