@yoobic/yobi 8.1.0-30 → 8.1.0-31

package/dist/cjs/{draggable-dots-helpers-37497e75.js → draggable-dots-helpers-baee58b9.js}

@@ -317,8 +317,9 @@ function centerAnnotation(annotation, containerElement) {
     const imageBounding = containerElement.getBoundingClientRect();
     const activeElementBounding = element.getBoundingClientRect();
     const getAbsoluteCenter = (axis) => {
+      var _a;
       const isX = axis === 'x';
-      return (getDraggable(element)[axis] +
+      return lodash.isFinite((_a = getDraggable(element)) === null || _a === void 0 ? void 0 : _a[axis]) && (getDraggable(element)[axis] +
         imageBounding[isX ? 'width' : 'height'] / 2 +
         imageBounding[axis] -
         (activeElementBounding[axis] + activeElementBounding[isX ? 'width' : 'height'] / 2));

package/dist/cjs/yoo-form-image-tagging-creator.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-f4b5bbb5.js');
 require('./index-4c9e171d.js');
 const annotationsHelpers = require('./annotations-helpers-48180ded.js');
 const commonHelpers = require('./common-helpers-861856bf.js');
-const draggableDotsHelpers = require('./draggable-dots-helpers-37497e75.js');
+const draggableDotsHelpers = require('./draggable-dots-helpers-baee58b9.js');
 const overlays = require('./overlays-29c8808e.js');
 require('./lodash-a046a0e1.js');
 require('./index-ce0514fc.js');

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

@@ -9,7 +9,7 @@ const index$1 = require('./index-4c9e171d.js');
 const lodash = require('./lodash-a046a0e1.js');
 const annotationsHelpers = require('./annotations-helpers-48180ded.js');
 const commonHelpers = require('./common-helpers-861856bf.js');
-const draggableDotsHelpers = require('./draggable-dots-helpers-37497e75.js');
+const draggableDotsHelpers = require('./draggable-dots-helpers-baee58b9.js');
 const formInputHelpers = require('./form-input-helpers-127e9fa0.js');
 require('./index-ce0514fc.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -412,7 +412,7 @@ let YooPhotoEditorComponent = class {
     };
   }
   get imageSizeStyle() {
-    const getSize = (type) => { var _a; return (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a[type]; };
+    const getSize = (type) => this.imageSize[type];
     const getStyle = (type) => {
       var _a, _b;
       return ({
@@ -420,7 +420,7 @@ let YooPhotoEditorComponent = class {
         width: `${(_b = getSize(type)) === null || _b === void 0 ? void 0 : _b.width}px`
       });
     };
-    return {
+    return this.imageSize && {
       natural: getStyle('natural'),
       resized: getStyle('resized')
     };
@@ -579,16 +579,18 @@ let YooPhotoEditorComponent = class {
       this.hasDoneBeenClicked = newValue === 'tools';
       this.toggleSaveButton();
       this.toggleColorSelector();
-      this.toggleDraggableAnnotations();
     }
   }
+  componentDidRender() {
+    this.toggleDraggableAnnotations();
+    this.updateDraggableBoundings();
+  }
   disconnectedCallback() {
     this.toggleKeyboardListeners(false);
     !this.isPreview && overlays.setStatusBarDarkMode(false);
   }
   initEditor() {
     this.initResizeObserver();
-    this.toggleDraggableAnnotations();
     this.toggleKeyboardListeners(true);
     !this.isPreview && overlays.setStatusBarDarkMode(true);
     this.savedAnnotationElements = lodash.cloneDeep(this.annotationElements);
@@ -637,7 +639,6 @@ let YooPhotoEditorComponent = class {
     if (!this.isReadonly) {
       this.showActiveTooltip();
       this.toggleShowNavbar(this.navbarVisiblity !== 'hidden');
-      this.toggleDraggableAnnotations();
       formInputHelpers.focusContentEditable(this.activeElement);
       if (this.hasAnnotationBeenCreated) {
         this.attachNewAnnotation();
@@ -739,7 +740,6 @@ let YooPhotoEditorComponent = class {
         this.blockMoves.emit(true);
         if (this.activeElement) {
           this.toggleShowNavbar(false);
-          this.updateDraggableBoundings();
           this.bottomContainerElement.classList.remove('active');
           getActionButton().validate.classList.remove('active');
           getActionButton().delete.classList.add('active');
@@ -954,7 +954,6 @@ let YooPhotoEditorComponent = class {
     const borderColor = this.isDotEditMode ? defaultAnnotationTextColor : 'none';
     if (this.isTextMode) {
       this.updateAnnotationStyle('textColor', color);
-      //   focusContentEditable(this.activeElement);
     }
     el && Object.assign(el.style, { borderColor, color, backgroundColor });
     this.updateAnnotationStyle('backgroundColor', backgroundColor);
@@ -1054,18 +1053,17 @@ let YooPhotoEditorComponent = class {
   }
   createTextBox() {
     var _a, _b, _c, _d, _e;
+    const getPercentPosition = (bound) => {
+      return ((this.imageBounds[bound] / 2 - this.activeElement[`client${lodash.capitalize(bound)}`] / 2) / this.imageBounds[bound]) * 100;
+    };
     this.isTextCreateMode = false;
     this.hasAnnotationBeenCreated = true;
     this.annotations.push({
       ...draggableDotsHelpers.createBaseAnnotation('text'),
       text: ((_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.innerText) || '',
-      _local: {
-        transform: {
-          current: {
-            x: parseFloat(this.activeElement.style.left),
-            y: parseFloat(this.activeElement.style.top)
-          }
-        }
+      coords: {
+        percentX: getPercentPosition('width'),
+        percentY: getPercentPosition('height')
       },
       styles: {
         fontSize: this.size || draggableDotsHelpers.SLIDER_THRESHOLD.text.default,
@@ -1209,6 +1207,7 @@ let YooPhotoEditorComponent = class {
     (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.forEach(e => {
       if (e) {
         e.classList.remove('hidden');
+        e.classList.toggle('draggable', enableDraggable);
         overlays.Draggable.get(e) ? overlays.Draggable.get(e)[enableDraggable ? 'enable' : 'disable']() : this.getDraggableActions(e)[enableDraggable ? 'enable' : 'disable']();
         //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));
@@ -1382,8 +1381,8 @@ let YooPhotoEditorComponent = class {
     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;
-    return !this.isLoading && (this.displayAnnotations || !this.isReadonly) && (index.h("section", { class: "annotations", style: this.imageSizeStyle.resized, ref: el => this.annotationsContainerElement = el }, (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.map(a => a && (a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))));
+    var _a, _b, _c;
+    return !this.isLoading && ((_b = (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized) === null || _b === void 0 ? void 0 : _b.width) && (this.displayAnnotations || !this.isReadonly) && (index.h("section", { class: "annotations", style: this.imageSizeStyle.resized, ref: el => this.annotationsContainerElement = el }, (_c = this.annotations) === null || _c === void 0 ? void 0 : _c.map(a => (a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))));
   }
   renderSrcCanvas() {
     return index.h("canvas", { id: "src", onClick: (ev) => ev.preventDefault(), ref: el => this.canvasSrcElement = el, ...this.computedImageSize });

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

@@ -250,8 +250,9 @@ function centerAnnotation(annotation, containerElement) {
     const imageBounding = containerElement.getBoundingClientRect();
     const activeElementBounding = element.getBoundingClientRect();
     const getAbsoluteCenter = (axis) => {
+      var _a;
       const isX = axis === 'x';
-      return (getDraggable(element)[axis] +
+      return isFinite((_a = getDraggable(element)) === null || _a === void 0 ? void 0 : _a[axis]) && (getDraggable(element)[axis] +
         imageBounding[isX ? 'width' : 'height'] / 2 +
         imageBounding[axis] -
         (activeElementBounding[axis] + activeElementBounding[isX ? 'width' : 'height'] / 2));

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

@@ -18,7 +18,7 @@ import { ScreenOrientation } from '@ionic-native/screen-orientation';
 import { TapticEngine } from '@ionic-native/taptic-engine';
 import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMedia, getResizedImageSize, getTransformInfos, gsapSet, gsapTo, isIOS, isNativeMobile, isWeb, resizeObserve, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
-import { cloneDeep, isEqual, isFunction } from 'lodash-es';
+import { capitalize, cloneDeep, isEqual, isFunction } from 'lodash-es';
 import { getElement, getPointerCoordinates, isAnnotationDeleted, isAnnotationEmpty, isAnnotationFocused, isAnnotationValid, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
 import { cloudinary } from '../../../utils/helpers/common-helpers';
 import { createDot, getDotInnerElement, getDotToolTipElement, hideAllDotTooltips, setDotIndexes, showDotTooltip } from '../../../utils/helpers/draggable-dots-helpers';
@@ -239,7 +239,7 @@ export class YooPhotoEditorComponent {
     };
   }
   get imageSizeStyle() {
-    const getSize = (type) => { var _a; return (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a[type]; };
+    const getSize = (type) => this.imageSize[type];
     const getStyle = (type) => {
       var _a, _b;
       return ({
@@ -247,7 +247,7 @@ export class YooPhotoEditorComponent {
         width: `${(_b = getSize(type)) === null || _b === void 0 ? void 0 : _b.width}px`
       });
     };
-    return {
+    return this.imageSize && {
       natural: getStyle('natural'),
       resized: getStyle('resized')
     };
@@ -406,16 +406,18 @@ export class YooPhotoEditorComponent {
       this.hasDoneBeenClicked = newValue === 'tools';
       this.toggleSaveButton();
       this.toggleColorSelector();
-      this.toggleDraggableAnnotations();
     }
   }
+  componentDidRender() {
+    this.toggleDraggableAnnotations();
+    this.updateDraggableBoundings();
+  }
   disconnectedCallback() {
     this.toggleKeyboardListeners(false);
     !this.isPreview && setStatusBarDarkMode(false);
   }
   initEditor() {
     this.initResizeObserver();
-    this.toggleDraggableAnnotations();
     this.toggleKeyboardListeners(true);
     !this.isPreview && setStatusBarDarkMode(true);
     this.savedAnnotationElements = cloneDeep(this.annotationElements);
@@ -464,7 +466,6 @@ export class YooPhotoEditorComponent {
     if (!this.isReadonly) {
       this.showActiveTooltip();
       this.toggleShowNavbar(this.navbarVisiblity !== 'hidden');
-      this.toggleDraggableAnnotations();
       focusContentEditable(this.activeElement);
       if (this.hasAnnotationBeenCreated) {
         this.attachNewAnnotation();
@@ -566,7 +567,6 @@ export class YooPhotoEditorComponent {
         this.blockMoves.emit(true);
         if (this.activeElement) {
           this.toggleShowNavbar(false);
-          this.updateDraggableBoundings();
           this.bottomContainerElement.classList.remove('active');
           getActionButton().validate.classList.remove('active');
           getActionButton().delete.classList.add('active');
@@ -781,7 +781,6 @@ export class YooPhotoEditorComponent {
     const borderColor = this.isDotEditMode ? defaultAnnotationTextColor : 'none';
     if (this.isTextMode) {
       this.updateAnnotationStyle('textColor', color);
-      //   focusContentEditable(this.activeElement);
     }
     el && Object.assign(el.style, { borderColor, color, backgroundColor });
     this.updateAnnotationStyle('backgroundColor', backgroundColor);
@@ -881,18 +880,17 @@ export class YooPhotoEditorComponent {
   }
   createTextBox() {
     var _a, _b, _c, _d, _e;
+    const getPercentPosition = (bound) => {
+      return ((this.imageBounds[bound] / 2 - this.activeElement[`client${capitalize(bound)}`] / 2) / this.imageBounds[bound]) * 100;
+    };
     this.isTextCreateMode = false;
     this.hasAnnotationBeenCreated = true;
     this.annotations.push({
       ...createBaseAnnotation('text'),
       text: ((_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.innerText) || '',
-      _local: {
-        transform: {
-          current: {
-            x: parseFloat(this.activeElement.style.left),
-            y: parseFloat(this.activeElement.style.top)
-          }
-        }
+      coords: {
+        percentX: getPercentPosition('width'),
+        percentY: getPercentPosition('height')
       },
       styles: {
         fontSize: this.size || SLIDER_THRESHOLD.text.default,
@@ -1036,6 +1034,7 @@ export class YooPhotoEditorComponent {
     (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.forEach(e => {
       if (e) {
         e.classList.remove('hidden');
+        e.classList.toggle('draggable', enableDraggable);
         Draggable.get(e) ? Draggable.get(e)[enableDraggable ? 'enable' : 'disable']() : this.getDraggableActions(e)[enableDraggable ? 'enable' : 'disable']();
         //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));
@@ -1211,8 +1210,8 @@ export class YooPhotoEditorComponent {
     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;
-    return !this.isLoading && (this.displayAnnotations || !this.isReadonly) && (h("section", { class: "annotations", style: this.imageSizeStyle.resized, ref: el => this.annotationsContainerElement = el }, (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.map(a => a && (a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))));
+    var _a, _b, _c;
+    return !this.isLoading && ((_b = (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized) === null || _b === void 0 ? void 0 : _b.width) && (this.displayAnnotations || !this.isReadonly) && (h("section", { class: "annotations", style: this.imageSizeStyle.resized, ref: el => this.annotationsContainerElement = el }, (_c = this.annotations) === null || _c === void 0 ? void 0 : _c.map(a => (a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))));
   }
   renderSrcCanvas() {
     return h("canvas", { id: "src", onClick: (ev) => ev.preventDefault(), ref: el => this.canvasSrcElement = el, ...this.computedImageSize });

package/dist/design-system/{draggable-dots-helpers-176a6be5.js → draggable-dots-helpers-1673d7b0.js}

@@ -315,8 +315,9 @@ function centerAnnotation(annotation, containerElement) {
     const imageBounding = containerElement.getBoundingClientRect();
     const activeElementBounding = element.getBoundingClientRect();
     const getAbsoluteCenter = (axis) => {
+      var _a;
       const isX = axis === 'x';
-      return (getDraggable(element)[axis] +
+      return isFinite((_a = getDraggable(element)) === null || _a === void 0 ? void 0 : _a[axis]) && (getDraggable(element)[axis] +
         imageBounding[isX ? 'width' : 'height'] / 2 +
         imageBounding[axis] -
         (activeElementBounding[axis] + activeElementBounding[isX ? 'width' : 'height'] / 2));

package/dist/design-system/yoo-form-image-tagging-creator.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, j as createEvent, f as forceUpdate, h, i as Host
 import './index-ae75c8a9.js';
 import { a as isAnnotationValid, b as getElement, c as getAnnotationPositionStyle } from './annotations-helpers-5c6b2931.js';
 import { h as showImageCropper, b as getAppContext } from './common-helpers-0d2e02ce.js';
-import { g as getDotToolTipElement, a as getDotInnerElement, s as setDotIndexes, h as hideAllDotTooltips, c as createDot, b as showDotTooltip, d as hideAllUnFocusedTooltips, e as getAnnotation, f as formatAnnotationForExport, r as reorderDotIndexes, i as deleteDot, j as saveTooltipContent, k as deleteEmptyDots } from './draggable-dots-helpers-176a6be5.js';
+import { g as getDotToolTipElement, a as getDotInnerElement, s as setDotIndexes, h as hideAllDotTooltips, c as createDot, b as showDotTooltip, d as hideAllUnFocusedTooltips, e as getAnnotation, f as formatAnnotationForExport, r as reorderDotIndexes, i as deleteDot, j as saveTooltipContent, k as deleteEmptyDots } from './draggable-dots-helpers-1673d7b0.js';
 import { am as isFile, bb as blobToBase64, aA as getUUID, x as debounce, aD as gsapSet, aC as gsapTo, bc as scaleUpAnimation, aB as Draggable, b4 as isTranslationKey, t as translate } from './overlays-ded00ddd.js';
 import './lodash-814bf2cd.js';
 import './index-ce250cb7.js';

package/dist/design-system/yoo-photo-editor.entry.js

@@ -2,10 +2,10 @@ import { h, r as registerInstance, j as createEvent, f as forceUpdate, i as Host
 import { cp as getContrastColorName, t as translate, m as isNativeMobile, eS as getTransformInfos, w as isWeb, N as closeModal, cn as setStatusBarDarkMode, S as ScreenOrientation, b8 as getMedia, L as cleanupWKWebViewFilePath, b9 as getImageSize, ba as getResizedImageSize, eT as getImageScaleFactor, J as getAsyncExtraData, ae as showAlert, aB as Draggable, aC as gsapTo, B as isIOS, ab as enableKeyboardResize, bc as scaleUpAnimation, e as getCssColor, aD as gsapSet, bd as getContrastColor, cW as showContextMenu, af as showActionSheet } from './overlays-ded00ddd.js';
 import { T as TapticEngine } from './index-2beb9cd0.js';
 import { r as resizeObserve } from './index-ae75c8a9.js';
-import { i as isFunction, z as isEqual, B as cloneDeep } from './lodash-814bf2cd.js';
+import { i as isFunction, z as isEqual, B as cloneDeep, y as capitalize } from './lodash-814bf2cd.js';
 import { a as isAnnotationValid, d as isAnnotationDeleted, b as getElement, h as isAnnotationFocused, i as isAnnotationEmpty, j as isElementInsideContainer, e as getPointerCoordinates } from './annotations-helpers-5c6b2931.js';
 import { v as cloudinary } from './common-helpers-0d2e02ce.js';
-import { l as getAnnotationStyle, j as saveTooltipContent, B as BUTTONS_CONFIG, A as ANIMATION_DELAY, m as isCanvasBlank, n as getPredefinedTexts, o as getBoundingClient, g as getDotToolTipElement, a as getDotInnerElement, S as SLIDER_THRESHOLD, L as LOADING_DELAY, h as hideAllDotTooltips, p as prepareAnnotationsData, s as setDotIndexes, q as drawImageOnCanvas, t as focusAnnotation, e as getAnnotation, u as updateAnnotationLocal, I as INIT_COORDS, v as setAnnotationPositionToClosestEdge, w as getAnnotationDraggableBounds, x as getFormattedAnnotationSize, y as getAbsoluteCenter, z as getRelativeCenter, C as showPredefinedTextsDialog, c as createDot, D as DOT_RADIUS, E as createBaseAnnotation, F as removeLocalsFromAnnotations, G as EEditorActions, b as showDotTooltip, H as formatAnnotationsForExport, J as deCenterAnnotation } from './draggable-dots-helpers-176a6be5.js';
+import { l as getAnnotationStyle, j as saveTooltipContent, B as BUTTONS_CONFIG, A as ANIMATION_DELAY, m as isCanvasBlank, n as getPredefinedTexts, o as getBoundingClient, g as getDotToolTipElement, a as getDotInnerElement, S as SLIDER_THRESHOLD, L as LOADING_DELAY, h as hideAllDotTooltips, p as prepareAnnotationsData, s as setDotIndexes, q as drawImageOnCanvas, t as focusAnnotation, e as getAnnotation, u as updateAnnotationLocal, I as INIT_COORDS, v as setAnnotationPositionToClosestEdge, w as getAnnotationDraggableBounds, x as getFormattedAnnotationSize, y as getAbsoluteCenter, z as getRelativeCenter, C as showPredefinedTextsDialog, c as createDot, D as DOT_RADIUS, E as createBaseAnnotation, F as removeLocalsFromAnnotations, G as EEditorActions, b as showDotTooltip, H as formatAnnotationsForExport, J as deCenterAnnotation } from './draggable-dots-helpers-1673d7b0.js';
 import { l as focusContentEditable } from './form-input-helpers-425e0818.js';
 import './index-ce250cb7.js';
 import './_commonjsHelpers-bda24d0a.js';
@@ -408,7 +408,7 @@ let YooPhotoEditorComponent = class {
     };
   }
   get imageSizeStyle() {
-    const getSize = (type) => { var _a; return (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a[type]; };
+    const getSize = (type) => this.imageSize[type];
     const getStyle = (type) => {
       var _a, _b;
       return ({
@@ -416,7 +416,7 @@ let YooPhotoEditorComponent = class {
         width: `${(_b = getSize(type)) === null || _b === void 0 ? void 0 : _b.width}px`
       });
     };
-    return {
+    return this.imageSize && {
       natural: getStyle('natural'),
       resized: getStyle('resized')
     };
@@ -575,16 +575,18 @@ let YooPhotoEditorComponent = class {
       this.hasDoneBeenClicked = newValue === 'tools';
       this.toggleSaveButton();
       this.toggleColorSelector();
-      this.toggleDraggableAnnotations();
     }
   }
+  componentDidRender() {
+    this.toggleDraggableAnnotations();
+    this.updateDraggableBoundings();
+  }
   disconnectedCallback() {
     this.toggleKeyboardListeners(false);
     !this.isPreview && setStatusBarDarkMode(false);
   }
   initEditor() {
     this.initResizeObserver();
-    this.toggleDraggableAnnotations();
     this.toggleKeyboardListeners(true);
     !this.isPreview && setStatusBarDarkMode(true);
     this.savedAnnotationElements = cloneDeep(this.annotationElements);
@@ -633,7 +635,6 @@ let YooPhotoEditorComponent = class {
     if (!this.isReadonly) {
       this.showActiveTooltip();
       this.toggleShowNavbar(this.navbarVisiblity !== 'hidden');
-      this.toggleDraggableAnnotations();
       focusContentEditable(this.activeElement);
       if (this.hasAnnotationBeenCreated) {
         this.attachNewAnnotation();
@@ -735,7 +736,6 @@ let YooPhotoEditorComponent = class {
         this.blockMoves.emit(true);
         if (this.activeElement) {
           this.toggleShowNavbar(false);
-          this.updateDraggableBoundings();
           this.bottomContainerElement.classList.remove('active');
           getActionButton().validate.classList.remove('active');
           getActionButton().delete.classList.add('active');
@@ -950,7 +950,6 @@ let YooPhotoEditorComponent = class {
     const borderColor = this.isDotEditMode ? defaultAnnotationTextColor : 'none';
     if (this.isTextMode) {
       this.updateAnnotationStyle('textColor', color);
-      //   focusContentEditable(this.activeElement);
     }
     el && Object.assign(el.style, { borderColor, color, backgroundColor });
     this.updateAnnotationStyle('backgroundColor', backgroundColor);
@@ -1050,18 +1049,17 @@ let YooPhotoEditorComponent = class {
   }
   createTextBox() {
     var _a, _b, _c, _d, _e;
+    const getPercentPosition = (bound) => {
+      return ((this.imageBounds[bound] / 2 - this.activeElement[`client${capitalize(bound)}`] / 2) / this.imageBounds[bound]) * 100;
+    };
     this.isTextCreateMode = false;
     this.hasAnnotationBeenCreated = true;
     this.annotations.push({
       ...createBaseAnnotation('text'),
       text: ((_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.innerText) || '',
-      _local: {
-        transform: {
-          current: {
-            x: parseFloat(this.activeElement.style.left),
-            y: parseFloat(this.activeElement.style.top)
-          }
-        }
+      coords: {
+        percentX: getPercentPosition('width'),
+        percentY: getPercentPosition('height')
       },
       styles: {
         fontSize: this.size || SLIDER_THRESHOLD.text.default,
@@ -1205,6 +1203,7 @@ let YooPhotoEditorComponent = class {
     (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.forEach(e => {
       if (e) {
         e.classList.remove('hidden');
+        e.classList.toggle('draggable', enableDraggable);
         Draggable.get(e) ? Draggable.get(e)[enableDraggable ? 'enable' : 'disable']() : this.getDraggableActions(e)[enableDraggable ? 'enable' : 'disable']();
         //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));
@@ -1378,8 +1377,8 @@ let YooPhotoEditorComponent = class {
     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;
-    return !this.isLoading && (this.displayAnnotations || !this.isReadonly) && (h("section", { class: "annotations", style: this.imageSizeStyle.resized, ref: el => this.annotationsContainerElement = el }, (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.map(a => a && (a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))));
+    var _a, _b, _c;
+    return !this.isLoading && ((_b = (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized) === null || _b === void 0 ? void 0 : _b.width) && (this.displayAnnotations || !this.isReadonly) && (h("section", { class: "annotations", style: this.imageSizeStyle.resized, ref: el => this.annotationsContainerElement = el }, (_c = this.annotations) === null || _c === void 0 ? void 0 : _c.map(a => (a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))));
   }
   renderSrcCanvas() {
     return h("canvas", { id: "src", onClick: (ev) => ev.preventDefault(), ref: el => this.canvasSrcElement = el, ...this.computedImageSize });

package/dist/esm/{draggable-dots-helpers-176a6be5.js → draggable-dots-helpers-1673d7b0.js}

@@ -315,8 +315,9 @@ function centerAnnotation(annotation, containerElement) {
     const imageBounding = containerElement.getBoundingClientRect();
     const activeElementBounding = element.getBoundingClientRect();
     const getAbsoluteCenter = (axis) => {
+      var _a;
       const isX = axis === 'x';
-      return (getDraggable(element)[axis] +
+      return isFinite((_a = getDraggable(element)) === null || _a === void 0 ? void 0 : _a[axis]) && (getDraggable(element)[axis] +
         imageBounding[isX ? 'width' : 'height'] / 2 +
         imageBounding[axis] -
         (activeElementBounding[axis] + activeElementBounding[isX ? 'width' : 'height'] / 2));

package/dist/esm/yoo-form-image-tagging-creator.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, j as createEvent, f as forceUpdate, h, i as Host
 import './index-ae75c8a9.js';
 import { a as isAnnotationValid, b as getElement, c as getAnnotationPositionStyle } from './annotations-helpers-5c6b2931.js';
 import { h as showImageCropper, b as getAppContext } from './common-helpers-0d2e02ce.js';
-import { g as getDotToolTipElement, a as getDotInnerElement, s as setDotIndexes, h as hideAllDotTooltips, c as createDot, b as showDotTooltip, d as hideAllUnFocusedTooltips, e as getAnnotation, f as formatAnnotationForExport, r as reorderDotIndexes, i as deleteDot, j as saveTooltipContent, k as deleteEmptyDots } from './draggable-dots-helpers-176a6be5.js';
+import { g as getDotToolTipElement, a as getDotInnerElement, s as setDotIndexes, h as hideAllDotTooltips, c as createDot, b as showDotTooltip, d as hideAllUnFocusedTooltips, e as getAnnotation, f as formatAnnotationForExport, r as reorderDotIndexes, i as deleteDot, j as saveTooltipContent, k as deleteEmptyDots } from './draggable-dots-helpers-1673d7b0.js';
 import { am as isFile, bb as blobToBase64, aA as getUUID, x as debounce, aD as gsapSet, aC as gsapTo, bc as scaleUpAnimation, aB as Draggable, b4 as isTranslationKey, t as translate } from './overlays-ded00ddd.js';
 import './lodash-814bf2cd.js';
 import './index-ce250cb7.js';

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

@@ -2,10 +2,10 @@ import { h, r as registerInstance, j as createEvent, f as forceUpdate, i as Host
 import { cp as getContrastColorName, t as translate, m as isNativeMobile, eS as getTransformInfos, w as isWeb, N as closeModal, cn as setStatusBarDarkMode, S as ScreenOrientation, b8 as getMedia, L as cleanupWKWebViewFilePath, b9 as getImageSize, ba as getResizedImageSize, eT as getImageScaleFactor, J as getAsyncExtraData, ae as showAlert, aB as Draggable, aC as gsapTo, B as isIOS, ab as enableKeyboardResize, bc as scaleUpAnimation, e as getCssColor, aD as gsapSet, bd as getContrastColor, cW as showContextMenu, af as showActionSheet } from './overlays-ded00ddd.js';
 import { T as TapticEngine } from './index-2beb9cd0.js';
 import { r as resizeObserve } from './index-ae75c8a9.js';
-import { i as isFunction, z as isEqual, B as cloneDeep } from './lodash-814bf2cd.js';
+import { i as isFunction, z as isEqual, B as cloneDeep, y as capitalize } from './lodash-814bf2cd.js';
 import { a as isAnnotationValid, d as isAnnotationDeleted, b as getElement, h as isAnnotationFocused, i as isAnnotationEmpty, j as isElementInsideContainer, e as getPointerCoordinates } from './annotations-helpers-5c6b2931.js';
 import { v as cloudinary } from './common-helpers-0d2e02ce.js';
-import { l as getAnnotationStyle, j as saveTooltipContent, B as BUTTONS_CONFIG, A as ANIMATION_DELAY, m as isCanvasBlank, n as getPredefinedTexts, o as getBoundingClient, g as getDotToolTipElement, a as getDotInnerElement, S as SLIDER_THRESHOLD, L as LOADING_DELAY, h as hideAllDotTooltips, p as prepareAnnotationsData, s as setDotIndexes, q as drawImageOnCanvas, t as focusAnnotation, e as getAnnotation, u as updateAnnotationLocal, I as INIT_COORDS, v as setAnnotationPositionToClosestEdge, w as getAnnotationDraggableBounds, x as getFormattedAnnotationSize, y as getAbsoluteCenter, z as getRelativeCenter, C as showPredefinedTextsDialog, c as createDot, D as DOT_RADIUS, E as createBaseAnnotation, F as removeLocalsFromAnnotations, G as EEditorActions, b as showDotTooltip, H as formatAnnotationsForExport, J as deCenterAnnotation } from './draggable-dots-helpers-176a6be5.js';
+import { l as getAnnotationStyle, j as saveTooltipContent, B as BUTTONS_CONFIG, A as ANIMATION_DELAY, m as isCanvasBlank, n as getPredefinedTexts, o as getBoundingClient, g as getDotToolTipElement, a as getDotInnerElement, S as SLIDER_THRESHOLD, L as LOADING_DELAY, h as hideAllDotTooltips, p as prepareAnnotationsData, s as setDotIndexes, q as drawImageOnCanvas, t as focusAnnotation, e as getAnnotation, u as updateAnnotationLocal, I as INIT_COORDS, v as setAnnotationPositionToClosestEdge, w as getAnnotationDraggableBounds, x as getFormattedAnnotationSize, y as getAbsoluteCenter, z as getRelativeCenter, C as showPredefinedTextsDialog, c as createDot, D as DOT_RADIUS, E as createBaseAnnotation, F as removeLocalsFromAnnotations, G as EEditorActions, b as showDotTooltip, H as formatAnnotationsForExport, J as deCenterAnnotation } from './draggable-dots-helpers-1673d7b0.js';
 import { l as focusContentEditable } from './form-input-helpers-425e0818.js';
 import './index-ce250cb7.js';
 import './_commonjsHelpers-bda24d0a.js';
@@ -408,7 +408,7 @@ let YooPhotoEditorComponent = class {
     };
   }
   get imageSizeStyle() {
-    const getSize = (type) => { var _a; return (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a[type]; };
+    const getSize = (type) => this.imageSize[type];
     const getStyle = (type) => {
       var _a, _b;
       return ({
@@ -416,7 +416,7 @@ let YooPhotoEditorComponent = class {
         width: `${(_b = getSize(type)) === null || _b === void 0 ? void 0 : _b.width}px`
       });
     };
-    return {
+    return this.imageSize && {
       natural: getStyle('natural'),
       resized: getStyle('resized')
     };
@@ -575,16 +575,18 @@ let YooPhotoEditorComponent = class {
       this.hasDoneBeenClicked = newValue === 'tools';
       this.toggleSaveButton();
       this.toggleColorSelector();
-      this.toggleDraggableAnnotations();
     }
   }
+  componentDidRender() {
+    this.toggleDraggableAnnotations();
+    this.updateDraggableBoundings();
+  }
   disconnectedCallback() {
     this.toggleKeyboardListeners(false);
     !this.isPreview && setStatusBarDarkMode(false);
   }
   initEditor() {
     this.initResizeObserver();
-    this.toggleDraggableAnnotations();
     this.toggleKeyboardListeners(true);
     !this.isPreview && setStatusBarDarkMode(true);
     this.savedAnnotationElements = cloneDeep(this.annotationElements);
@@ -633,7 +635,6 @@ let YooPhotoEditorComponent = class {
     if (!this.isReadonly) {
       this.showActiveTooltip();
       this.toggleShowNavbar(this.navbarVisiblity !== 'hidden');
-      this.toggleDraggableAnnotations();
       focusContentEditable(this.activeElement);
       if (this.hasAnnotationBeenCreated) {
         this.attachNewAnnotation();
@@ -735,7 +736,6 @@ let YooPhotoEditorComponent = class {
         this.blockMoves.emit(true);
         if (this.activeElement) {
           this.toggleShowNavbar(false);
-          this.updateDraggableBoundings();
           this.bottomContainerElement.classList.remove('active');
           getActionButton().validate.classList.remove('active');
           getActionButton().delete.classList.add('active');
@@ -950,7 +950,6 @@ let YooPhotoEditorComponent = class {
     const borderColor = this.isDotEditMode ? defaultAnnotationTextColor : 'none';
     if (this.isTextMode) {
       this.updateAnnotationStyle('textColor', color);
-      //   focusContentEditable(this.activeElement);
     }
     el && Object.assign(el.style, { borderColor, color, backgroundColor });
     this.updateAnnotationStyle('backgroundColor', backgroundColor);
@@ -1050,18 +1049,17 @@ let YooPhotoEditorComponent = class {
   }
   createTextBox() {
     var _a, _b, _c, _d, _e;
+    const getPercentPosition = (bound) => {
+      return ((this.imageBounds[bound] / 2 - this.activeElement[`client${capitalize(bound)}`] / 2) / this.imageBounds[bound]) * 100;
+    };
     this.isTextCreateMode = false;
     this.hasAnnotationBeenCreated = true;
     this.annotations.push({
       ...createBaseAnnotation('text'),
       text: ((_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.innerText) || '',
-      _local: {
-        transform: {
-          current: {
-            x: parseFloat(this.activeElement.style.left),
-            y: parseFloat(this.activeElement.style.top)
-          }
-        }
+      coords: {
+        percentX: getPercentPosition('width'),
+        percentY: getPercentPosition('height')
       },
       styles: {
         fontSize: this.size || SLIDER_THRESHOLD.text.default,
@@ -1205,6 +1203,7 @@ let YooPhotoEditorComponent = class {
     (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.forEach(e => {
       if (e) {
         e.classList.remove('hidden');
+        e.classList.toggle('draggable', enableDraggable);
         Draggable.get(e) ? Draggable.get(e)[enableDraggable ? 'enable' : 'disable']() : this.getDraggableActions(e)[enableDraggable ? 'enable' : 'disable']();
         //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));
@@ -1378,8 +1377,8 @@ let YooPhotoEditorComponent = class {
     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;
-    return !this.isLoading && (this.displayAnnotations || !this.isReadonly) && (h("section", { class: "annotations", style: this.imageSizeStyle.resized, ref: el => this.annotationsContainerElement = el }, (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.map(a => a && (a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))));
+    var _a, _b, _c;
+    return !this.isLoading && ((_b = (_a = this.imageSizeStyle) === null || _a === void 0 ? void 0 : _a.resized) === null || _b === void 0 ? void 0 : _b.width) && (this.displayAnnotations || !this.isReadonly) && (h("section", { class: "annotations", style: this.imageSizeStyle.resized, ref: el => this.annotationsContainerElement = el }, (_c = this.annotations) === null || _c === void 0 ? void 0 : _c.map(a => (a === null || a === void 0 ? void 0 : a.type) === 'dot' ? this.renderDot(a) : this.renderTextbox(a))));
   }
   renderSrcCanvas() {
     return h("canvas", { id: "src", onClick: (ev) => ev.preventDefault(), ref: el => this.canvasSrcElement = el, ...this.computedImageSize });

package/dist/types/components/3.organisms/photo-editor/photo-editor.d.ts

@@ -231,6 +231,7 @@ export declare class YooPhotoEditorComponent implements ComponentInterface {
   componentDidLoad(): void;
   componentDidUpdate(): void;
   componentShouldUpdate(...args: any[]): void;
+  componentDidRender(): void;
   disconnectedCallback(): void;
   private initEditor;
   private prepareSrc;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoobic/yobi",
-  "version": "8.1.0-30",
+  "version": "8.1.0-31",
   "description": "Yobi - Yoobic Design System",
   "module": "dist/index.js",
   "main": "dist/index.cjs.js",