@aurigma/design-atoms - npm Package Compare versions

Comparing version 7.1.2 to 7.1.3

Canvas.d.ts

@@ -153,5 +153,6 @@ import * as TextWhizz from "@aurigma/text-whizz/TextWhizzJS";
     translations: Translations;
-    canvasItemHoverEnabled: boolean;
     /** @internal */
     constructor(viewer: Viewer);
+    get canvasItemHoverEnabled(): boolean;
+    set canvasItemHoverEnabled(value: boolean);
     get canvasElementSize(): {
@@ -325,2 +326,5 @@ width?: number;
     get isSelectionResizing(): boolean;
+    get isSelectionRotating(): boolean;
+    get isSelectionDragging(): boolean;
+    get isSelectionIdle(): boolean;
     get designAtomsApiClient(): IDesignAtomsApiClient;
@@ -327,0 +331,0 @@ get frontEndTextRenderingEnabled(): boolean;

Canvas/CanvasRendererStyle.d.ts

@@ -10,3 +10,9 @@ import { SelectionStyleConfig, HoverStyle, SpotlightStyle, RubberbandStyle } from "../Viewer";
     private _rotationGripLineLength;
+    private _baselineColor;
+    private _canvasItemHoverEnabled;
     constructor();
+    get canvasItemHoverEnabled(): boolean;
+    set canvasItemHoverEnabled(value: boolean);
+    get baselineColor(): string;
+    set baselineColor(value: string);
     get rotationGripSize(): number;
@@ -13,0 +19,0 @@ set rotationGripSize(value: number);

Canvas/CanvasRendererStyle.js

@@ -28,3 +28,24 @@ import { SelectionStyleConfig, HoverStyle, SpotlightStyle, RubberbandStyle } from "../Viewer";
         this.rubberband.dashPattern = [2, 2];
+        this.baselineColor = "rgb(48, 194, 255)";
     }
+    Object.defineProperty(CanvasRendererStyle.prototype, "canvasItemHoverEnabled", {
+        get: function () {
+            return this._canvasItemHoverEnabled;
+        },
+        set: function (value) {
+            this._canvasItemHoverEnabled = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CanvasRendererStyle.prototype, "baselineColor", {
+        get: function () {
+            return this._baselineColor;
+        },
+        set: function (value) {
+            this._baselineColor = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(CanvasRendererStyle.prototype, "rotationGripSize", {
@@ -31,0 +52,0 @@ get: function () {

CanvasRenderer.js

@@ -51,2 +51,4 @@ var __assign = (this && this.__assign) || function () {
 import { equalsOfFloatNumbers } from "./Utils/Math";
+import { parseMargin } from "./Utils";
+import { Margin } from "@aurigma/design-atoms-model/Math/Margin";
 var CanvasRenderer = /** @class */ (function () {
@@ -134,3 +136,3 @@ function CanvasRenderer(_selection, _dndHandler, handlerConfiguration, _rubberbandHandler, _viewportHandler, _spotlightHandler, _hoverHandler, _snapLinesHandler, _canvasElementHandler, _interactiveZonesHandler) {
             return;
-        this._getItemHandlersByRenderState(layers, RenderState.Active)
+        this._getItemHandlersByRenderState(layers, RenderState.Active, false)
             .forEach(function (i) { return _this._drawHandler(i, activeCtx, productHandler, workspace, offset); });
@@ -187,7 +189,7 @@ var selectedItemHandlers = this._selection.selectedItemHandlers;
         };
-        this._getItemHandlersByRenderState(layers, RenderState.Bottom).forEach(function (i) {
+        this._getItemHandlersByRenderState(layers, RenderState.Bottom, false).forEach(function (i) {
             drawMockupWorkaroundMargin(i.layer.container, surfaceCtx);
             _this._drawHandler(i, surfaceCtx, productHandler, workspace, offset);
         });
-        this._getItemHandlersByRenderState(layers, RenderState.Top).forEach(function (i) {
+        this._getItemHandlersByRenderState(layers, RenderState.Top, false).forEach(function (i) {
             drawMockupWorkaroundMargin(i.layer.container, inactiveCtx);
@@ -279,8 +281,12 @@ _this._drawHandler(i, inactiveCtx, productHandler, workspace, offset);
         var scaleFactor = this._getScaleFactor(ctx);
+        var activeZone = this._interactiveZonesHandler.activeZone;
+        var highlightedZone = this._interactiveZonesHandler.highlightZone;
         try {
             for (var zones_1 = __values(zones), zones_1_1 = zones_1.next(); !zones_1_1.done; zones_1_1 = zones_1.next()) {
                 var zone = zones_1_1.value;
-                var isActive = zone === this._interactiveZonesHandler.activeZone;
-                var isHover = zone === this._interactiveZonesHandler.highlightZone;
-                this._drawInteractiveZone(ctx, zone, isActive, isHover, scaleFactor);
+                if (zone == activeZone)
+                    continue;
+                if (zone == highlightedZone)
+                    continue;
+                this._drawInteractiveZone(ctx, zone, false, false, scaleFactor);
             }
@@ -295,2 +301,8 @@ }
         }
+        if (activeZone != null && activeZone != highlightedZone)
+            this._drawInteractiveZone(ctx, activeZone, true, false, scaleFactor);
+        if (highlightedZone != null && highlightedZone != activeZone)
+            this._drawInteractiveZone(ctx, highlightedZone, false, true, scaleFactor);
+        if (activeZone != null && activeZone == highlightedZone)
+            this._drawInteractiveZone(ctx, activeZone, true, true, scaleFactor);
     };
@@ -317,3 +329,3 @@ CanvasRenderer.prototype._drawInteractiveZone = function (ctx, zone, isActive, isHover, scaleFactor) {
             var _g = this._getLabelPosition(zone, style, matrix), point = _g.point, align = _g.align, baseline = _g.baseline;
-            var margin = (_c = style.labelMargin) !== null && _c !== void 0 ? _c : 3;
+            var margin = parseMargin((_c = style.labelMargin) !== null && _c !== void 0 ? _c : 3);
             var labelColor = (_d = style.labelColor) !== null && _d !== void 0 ? _d : "black";
@@ -323,3 +335,3 @@ var font = (_e = style.labelFont) !== null && _e !== void 0 ? _e : "Roboto";
             var fontSize = ((_f = style.labelFontSize) !== null && _f !== void 0 ? _f : 24) * pxRatioRounded;
-            Graphics.text(ctx, title, point, fontSize + "pt " + font, labelColor, null, 0, null, align, baseline, style.labelBackgroundColor, null, null, margin, margin);
+            Graphics.text(ctx, title, point, fontSize + "pt " + font, labelColor, null, 0, null, align, baseline, style.labelBackgroundColor, null, null, margin);
             ctx.setTransform(transform);
@@ -333,4 +345,4 @@ }
         if (style.labelPosition == InteractiveZoneLabelPosition.outside) {
-            var margin = (_a = style.labelMargin) !== null && _a !== void 0 ? _a : 3;
-            var pt = boundsRect.getUpperLeftCorner().translate(margin, -margin + 1);
+            var margin = parseMargin((_a = style.labelMargin) !== null && _a !== void 0 ? _a : 3);
+            var pt = boundsRect.getUpperLeftCorner().translate(margin.left - 1, -margin.bottom + 1);
             return { point: pt, align: "left", baseline: "bottom" };
@@ -551,2 +563,4 @@ }
     CanvasRenderer.prototype._drawHover = function (ctx) {
+        if (!this.style.canvasItemHoverEnabled)
+            return;
         if (this._selection.selectedItemHandlers.contains(this._hoverHandler.currentHandler))
@@ -808,3 +822,3 @@ return;
         var fontsize = 14 * pxRatioRounded;
-        Graphics.text(renderingContext, message, pt, "normal " + fontsize + "px Roboto", "rgba(255,255,255,0.8)", "rgba(255,255,255,0.8)", 0, width - 48 * pxRatioRounded, "center", "bottom", backgroundColor, null, 0, 16 * pxRatioRounded, 8 * pxRatioRounded, 8 * pxRatioRounded);
+        Graphics.text(renderingContext, message, pt, "normal " + fontsize + "px Roboto", "rgba(255,255,255,0.8)", "rgba(255,255,255,0.8)", 0, width - 48 * pxRatioRounded, "center", "bottom", backgroundColor, null, 0, new Margin({ horizontal: 16, vertical: 8 }), 8 * pxRatioRounded);
     };
@@ -835,5 +849,3 @@ CanvasRenderer.prototype._drawVerticalLine = function (context, xAnchor, color, points) {
     CanvasRenderer.prototype._drawSnapLineMark = function (context, pt, lineWidth, color) {
-        var sz = this._snapLineMarkSize;
-        Graphics.drawLine(context, pt.x - sz, pt.y - sz, pt.x + sz, pt.y + sz, lineWidth, color);
-        Graphics.drawLine(context, pt.x + sz, pt.y - sz, pt.x - sz, pt.y + sz, lineWidth, color);
+        Graphics.drawCross(context, pt.x, pt.y, this._snapLineMarkSize * 2, lineWidth, color);
     };
@@ -840,0 +852,0 @@ CanvasRenderer.prototype._drawHorizontalLine = function (context, yAnchor, color, points) {

Graphics.d.ts

 import { PointF, RotatedRectangleF, Path, RectangleF, Transform } from "@aurigma/design-atoms-model/Math";
+import { Margin } from "@aurigma/design-atoms-model/Math/Margin";
 export declare abstract class Graphics {
+    static drawCross(ctx: CanvasRenderingContext2D, x: number, y: number, size: number, width: number, baselineColor: string): void;
     static drawLine(ctx: CanvasRenderingContext2D, x: number, y: number, x1: number, y1: number, lineWidth: number, lineColor: any, opacity?: number, dashWidth?: number[]): void;
@@ -17,3 +19,3 @@ static drawDashedLine(ctx: CanvasRenderingContext2D, x0: any, y0: any, x1: any, y1: any, lineWidth: any, color: any, altColor: any, dashWidth: any, altDashWidth: any, opacity?: number): void;
     private static _drawTextBackground;
-    static text(ctx: CanvasRenderingContext2D, text: string, point: PointF, font: string, fillColor?: string, strokeColor?: string, angle?: number, maxWidth?: any, textAlign?: CanvasTextAlign, textBaseline?: CanvasTextBaseline, background?: string, border?: string, borderWidth?: number, backgroundMarginHorizontal?: number, backgroundMarginVertical?: number, backgroundCornerRadius?: number): void;
+    static text(ctx: CanvasRenderingContext2D, text: string, point: PointF, font: string, fillColor?: string, strokeColor?: string, angle?: number, maxWidth?: any, textAlign?: CanvasTextAlign, textBaseline?: CanvasTextBaseline, background?: string, border?: string, borderWidth?: number, backgroundMargin?: Margin, backgroundCornerRadius?: number): void;
     private static _splitTextToLines;
@@ -20,0 +22,0 @@ static isFullTransparentColor(color: any): boolean;

Graphics.js

@@ -22,7 +22,13 @@ var __read = (this && this.__read) || function (o, n) {
 // ReSharper disable once InconsistentNaming
-import { PointF, EqualsOfFloatNumbers, ConvertDegreeToRadian, Path, Transform, SizeF } from "@aurigma/design-atoms-model/Math";
+import { PointF, EqualsOfFloatNumbers, ConvertDegreeToRadian, RotatedRectangleF, Path, Transform, SizeF } from "@aurigma/design-atoms-model/Math";
 import { NotImplementedException } from "@aurigma/design-atoms-model/Exception";
+import { Margin } from "@aurigma/design-atoms-model/Math/Margin";
 var Graphics = /** @class */ (function () {
     function Graphics() {
     }
+    Graphics.drawCross = function (ctx, x, y, size, width, baselineColor) {
+        var rect = new RotatedRectangleF(x, y, size, size).toRectangleF();
+        Graphics.drawLine(ctx, rect.left, rect.top, rect.right, rect.bottom, width, baselineColor);
+        Graphics.drawLine(ctx, rect.left, rect.bottom, rect.right, rect.top, width, baselineColor);
+    };
     Graphics.drawLine = function (ctx, x, y, x1, y1, lineWidth, lineColor, opacity, dashWidth) {
@@ -363,3 +369,3 @@ if (opacity === void 0) { opacity = 1; }
     };
-    Graphics._drawTextBackground = function (ctx, left, right, top, bottom, background, border, borderWidth, marginHorizontal, marginVertical, cornerRadius) {
+    Graphics._drawTextBackground = function (ctx, left, right, top, bottom, background, border, borderWidth, margin, cornerRadius) {
         var width = right - left;
@@ -372,6 +378,6 @@ var height = bottom - top;
         }
-        var rectPath = Path.roundedRectangle(left - marginHorizontal, top - marginVertical, width + marginHorizontal * 2, height + marginVertical * 2, radiuses);
+        var rectPath = Path.roundedRectangle(left - margin.left, top - margin.top, width + margin.left + margin.right, height + margin.top + margin.bottom, radiuses);
         Graphics.path(ctx, rectPath, new PointF(), new Transform(), background, borderWidth, border, 1, []);
     };
-    Graphics.text = function (ctx, text, point, font, fillColor, strokeColor, angle, maxWidth, textAlign, textBaseline, background, border, borderWidth, backgroundMarginHorizontal, backgroundMarginVertical, backgroundCornerRadius) {
+    Graphics.text = function (ctx, text, point, font, fillColor, strokeColor, angle, maxWidth, textAlign, textBaseline, background, border, borderWidth, backgroundMargin, backgroundCornerRadius) {
         if (fillColor === void 0) { fillColor = null; }
@@ -386,4 +392,3 @@ if (strokeColor === void 0) { strokeColor = null; }
         if (borderWidth === void 0) { borderWidth = 0; }
-        if (backgroundMarginHorizontal === void 0) { backgroundMarginHorizontal = 0; }
-        if (backgroundMarginVertical === void 0) { backgroundMarginVertical = 0; }
+        if (backgroundMargin === void 0) { backgroundMargin = new Margin(0); }
         if (backgroundCornerRadius === void 0) { backgroundCornerRadius = 0; }
@@ -445,3 +450,3 @@ if (background != null && (textBaseline != "bottom" && textBaseline != "middle"))
             if (background || (border != null && borderWidth > 0)) {
-                this._drawTextBackground(ctx, -widestMetrics_1.actualBoundingBoxLeft, widestMetrics_1.actualBoundingBoxRight, -actualBoundingBoxAscent_1, actualBoundingBoxDescent_1, background, border, borderWidth, backgroundMarginHorizontal, backgroundMarginVertical, backgroundCornerRadius);
+                this._drawTextBackground(ctx, -widestMetrics_1.actualBoundingBoxLeft, widestMetrics_1.actualBoundingBoxRight, -actualBoundingBoxAscent_1, actualBoundingBoxDescent_1, background, border, borderWidth, backgroundMargin, backgroundCornerRadius);
             }
@@ -448,0 +453,0 @@ lines.forEach(function (a, i) {

ICanvas.d.ts

@@ -23,2 +23,4 @@ import * as TextWhizz from "@aurigma/text-whizz/TextWhizzJS";
 import { LayerCollection } from "./LayerCollection";
+import { CanvasRendererStyle } from "./Canvas/CanvasRendererStyle";
+import { IHoverHandler } from "./Canvas/Interfaces";
 export declare type ItemHandlerType = typeof PlaceholderItemHandler | typeof ImageItemHandler | typeof ItemHandler | typeof PlainTextItemHandler | typeof RectangleItemHandler | typeof ShapeItemHandler | typeof BaseTextItemHandler | typeof NewBaseTextItemHandler;
@@ -70,2 +72,5 @@ export declare type GetItemHandlersOptions = {
     isSelectionResizing: boolean;
+    isSelectionRotating: boolean;
+    isSelectionDragging: boolean;
+    isSelectionIdle: boolean;
     fontRegistry: FontRegistry;
@@ -78,2 +83,4 @@ viewerConfiguration: IViewerConfiguration | null;
     mul: number;
+    style: CanvasRendererStyle;
+    hoverHandler: IHoverHandler;
     getData(forService?: boolean, layerId?: string): CanvasData;
@@ -80,0 +87,0 @@ updateSelection(force?: boolean): void;

InPlace/ITextEditorController.d.ts

@@ -38,3 +38,3 @@ import { EventWithSenderArg } from "@aurigma/design-atoms-model/EventObject";
     clearText(): void;
-    updateText(source: string): Promise<void>;
+    updateText(source: string, force?: boolean): Promise<void>;
     transformText(transform: Transform): void;
@@ -41,0 +41,0 @@ measureText(extendToBlackBox?: boolean): RectangleF;

InPlace/TextEditorController.d.ts

@@ -76,3 +76,3 @@ import { RectangleF, Transform } from "@aurigma/design-atoms-model/Math";
     clearText(): void;
-    updateText(trigger: string): Promise<void>;
+    updateText(trigger: string, force?: boolean): Promise<void>;
     transformText(transform: Transform): void;
@@ -79,0 +79,0 @@ measureText(extendToBlackBox?: boolean): RectangleF;

InPlace/TextEditorController.js

@@ -373,3 +373,3 @@ var __assign = (this && this.__assign) || function () {
                         point = { x: x, y: y };
-                        if (!(this._textEditor instanceof NewTextEditor && !this._itemHandler.item.transform.isEmpty)) return [3 /*break*/, 2];
+                        if (!!this._itemHandler.item.transform.isEmpty) return [3 /*break*/, 2];
                         return [4 /*yield*/, this._itemHandler.frontEndUpdate()];
@@ -438,3 +438,4 @@ case 1:
             }
-            this._itemHandler.updateRectangle(handlerRect);
+            this._itemHandler.updateRectangle(handlerRect, true);
+            this._tw.textHandler.setTextFrames(this._itemHandler.getFramesData(), false);
             this._canvas.redrawDesign();
@@ -448,6 +449,6 @@ }
                     updateRect.height = frame.height + 1.5;
-                    this._itemHandler.updateRectangle(updateRect);
+                    this._itemHandler.updateRectangle(updateRect, true);
                 }
                 else {
-                    this._itemHandler.updateRectangle(this._initialBoundedRect);
+                    this._itemHandler.updateRectangle(this._initialBoundedRect, true);
                 }
@@ -568,7 +569,8 @@ }
     };
-    TextEditorController.prototype.updateText = function (trigger) {
+    TextEditorController.prototype.updateText = function (trigger, force) {
+        if (force === void 0) { force = false; }
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, this._updateText(this._getUpdateTextTrigger(trigger))];
+                    case 0: return [4 /*yield*/, this._updateText(this._getUpdateTextTrigger(trigger), force)];
                     case 1:
@@ -916,5 +918,6 @@ _a.sent();
     };
-    TextEditorController.prototype._updateText = function (trigger) {
+    TextEditorController.prototype._updateText = function (trigger, force) {
+        if (force === void 0) { force = false; }
         return __awaiter(this, void 0, void 0, function () {
-            var toCheckTextChanged, itemText, currentText, isTextActual, waitUpdatePromise, framesData, wrappingPathData, e_1, previewScale, textRectangle;
+            var toCheckTextChanged, itemText, currentText, isTextActual, waitUpdatePromise, framesData, wrappingPathData, e_1, previewScale, textRectangle, updateFromTextEdit;
             return __generator(this, function (_a) {
@@ -925,3 +928,3 @@ switch (_a.label) {
                             return [2 /*return*/];
-                        toCheckTextChanged = !this.isMobile && trigger === UpdateTextTriggerType.Text;
+                        toCheckTextChanged = !this.isMobile && trigger === UpdateTextTriggerType.Text && !force;
                         if (toCheckTextChanged) {
@@ -988,3 +991,4 @@ itemText = this._itemHandler.item.text;
                         textRectangle = this._tw.textMeasurer.measureText(previewScale, false);
-                        this._itemHandler.updateRectangle(textRectangle);
+                        updateFromTextEdit = trigger === UpdateTextTriggerType.Text;
+                        this._itemHandler.updateRectangle(textRectangle, updateFromTextEdit);
                         this._redrawText();
@@ -991,0 +995,0 @@ if (!this.isMobile) return [3 /*break*/, 12];

Input/InputHandler/Default/DefaultMouseInputHandler.js

@@ -67,14 +67,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                         this._itemHandlerHoverHandler.onHover(handlers);
-                        if (this._canvas.canvasItemHoverEnabled) {
-                            if (this._selectionHandler.isIdle) {
-                                itemToSelect = this._pointerInputHandler.getItemToSelect(params.workspace, true);
-                                if (itemToSelect == null)
-                                    this._hoverHandler.hide();
-                                else
-                                    this._hoverHandler.show(this._canvas.handlerFactory.get(itemToSelect));
-                            }
-                            else {
+                        if (this._selectionHandler.isIdle) {
+                            itemToSelect = this._pointerInputHandler.getItemToSelect(params.workspace, true);
+                            if (itemToSelect == null)
                                 this._hoverHandler.hide();
-                            }
+                            else
+                                this._hoverHandler.show(this._canvas.handlerFactory.get(itemToSelect));
                         }
+                        else {
+                            this._hoverHandler.hide();
+                        }
                         this._updateCursor(params);
@@ -81,0 +79,0 @@ return [2 /*return*/];

ItemHandlers/BaseTextItemHandler.js

@@ -179,3 +179,5 @@ var __extends = (this && this.__extends) || (function () {
             }
-            this.item.text = textLines.join("\n");
+            var result = textLines.join("\n");
+            if (text != result)
+                this.item.text = result;
         }
@@ -182,0 +184,0 @@ };

ItemHandlers/index.d.ts

@@ -26,2 +26,3 @@ export * from "./Effects";
 export * from "./ItemHandlerData";
+export * from "./ItemHandlerState";
 export * from "./ItemHandlersCollection";
@@ -28,0 +29,0 @@ export * from "./LayoutItemHandler";

ItemHandlers/index.js

@@ -26,2 +26,3 @@ export * from "./Effects";
 export * from "./ItemHandlerData";
+export * from "./ItemHandlerState";
 export * from "./ItemHandlersCollection";
@@ -28,0 +29,0 @@ export * from "./LayoutItemHandler";

ItemHandlers/LayoutItemHandler.js

@@ -140,2 +140,3 @@ var __extends = (this && this.__extends) || (function () {
             _this._updateVisibilityState();
+            _this.applyLayout(sender);
         };
@@ -142,0 +143,0 @@ _this._onItemHandlerEnteredEditMode = function (sender) {

ItemHandlers/NewBaseTextItemHandler.d.ts

@@ -16,2 +16,3 @@ import { RectangleF, PointF, Path, RotatedRectangleF, Transform } from "@aurigma/design-atoms-model/Math";
 import { ICanvas } from "../ICanvas";
+import { ItemHandlerState } from "./ItemHandlerState";
 export interface ITextEditorControllerFactory {
@@ -64,3 +65,3 @@ create(itemHandler: NewBaseTextItemHandler, textWhizz: typeof TextWhizz): ITextEditorController;
     setRectangle(rectangle: RotatedRectangleF, supressOnChanged?: boolean): void;
-    updateRectangle(rectangle: RectangleF): void;
+    updateRectangle(rectangle: RectangleF, updateFromTextEdit: boolean): void;
     redrawActiveText(): void;
@@ -77,2 +78,3 @@ drawItemHandler(itemHandlerCtx: CanvasRenderingContext2D): void;
     protected _isReady(): boolean;
+    protected _drawHandlerEffects(ctx: CanvasRenderingContext2D): void;
     protected _getColors(): Color[];
@@ -110,2 +112,5 @@ protected _updateImpl(beforeUpdate?: Function, afterUpdate?: Function, trigger?: string): Promise<void>;
     private _getFonts;
+    protected _needToDrawBaseline(): boolean;
+    protected _getBaselineDrawStates(): ItemHandlerState[];
+    protected _getCurrentState(): ItemHandlerState;
 }

ItemHandlers/NewBaseTextItemHandler.js

@@ -96,2 +96,3 @@ var __extends = (this && this.__extends) || (function () {
 import { AsyncHelper } from "../Utils/AsyncHelper";
+import { ItemHandlerState } from "./ItemHandlerState";
 var NewBaseTextItemHandler = /** @class */ (function (_super) {
@@ -391,3 +392,3 @@ __extends(NewBaseTextItemHandler, _super);
     };
-    NewBaseTextItemHandler.prototype.updateRectangle = function (rectangle) {
+    NewBaseTextItemHandler.prototype.updateRectangle = function (rectangle, updateFromTextEdit) {
         var changed = false;
@@ -424,5 +425,4 @@ this._modifyItem(function (i) {
         var _a, _b;
-        if (itemHandlerCtx == null || this.canvas == null || this._textWhizz == null) {
+        if (itemHandlerCtx == null || this.canvas == null || this._textWhizz == null)
             return;
-        }
         if (!this._isReadyToDraw) {
@@ -433,4 +433,2 @@ this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
         var renderForEyeDropper = this.ready && !((_a = this._textEditorController) === null || _a === void 0 ? void 0 : _a.isStatic) && this.canvas.isSelectionLocked;
-        if (this._isMobileTextEditorActive && !renderForEyeDropper)
-            return;
         if (this._hasVectorMask() && !renderForEyeDropper) {
@@ -440,15 +438,18 @@ itemHandlerCtx.save();
         }
-        var opacityMultiplier = this.isEmptyTextPlaceholder() ? 0.5 : 1;
-        this.renderFill(itemHandlerCtx, opacityMultiplier);
-        if (!this.ready || ((_b = this._textEditorController) === null || _b === void 0 ? void 0 : _b.isStatic) || renderForEyeDropper) {
-            try {
-                TextRenderer.renderTextImage(this, this._imageContainer, null, itemHandlerCtx, opacityMultiplier, TextRenderer.staticCanvasMargin);
+        if (!this._isMobileTextEditorActive || renderForEyeDropper) {
+            var opacityMultiplier = this.isEmptyTextPlaceholder() ? 0.5 : 1;
+            this.renderFill(itemHandlerCtx, opacityMultiplier);
+            if (!this.ready || ((_b = this._textEditorController) === null || _b === void 0 ? void 0 : _b.isStatic) || renderForEyeDropper) {
+                try {
+                    TextRenderer.renderTextImage(this, this._imageContainer, null, itemHandlerCtx, opacityMultiplier, TextRenderer.staticCanvasMargin);
+                }
+                catch (e) {
+                    console.error(e);
+                }
             }
-            catch (e) {
-                console.error(e);
-            }
+            this.renderStroke(itemHandlerCtx, opacityMultiplier);
         }
-        this.renderStroke(itemHandlerCtx, opacityMultiplier);
         if (this._hasVectorMask() && !renderForEyeDropper)
             itemHandlerCtx.restore();
+        this._drawHandlerEffects(itemHandlerCtx);
     };
@@ -520,2 +521,3 @@ NewBaseTextItemHandler.prototype.clearImageContainer = function () {
     };
+    NewBaseTextItemHandler.prototype._drawHandlerEffects = function (ctx) { };
     NewBaseTextItemHandler.prototype._getColors = function () {
@@ -846,2 +848,29 @@ var _a;
     };
+    NewBaseTextItemHandler.prototype._needToDrawBaseline = function () {
+        if (this.isInEdit && this.textEditor.disableDrawBaseline)
+            return false;
+        var states = this._getBaselineDrawStates();
+        var currentState = this._getCurrentState();
+        if (states.includes(currentState))
+            return true;
+    };
+    NewBaseTextItemHandler.prototype._getBaselineDrawStates = function () {
+        return [];
+    };
+    NewBaseTextItemHandler.prototype._getCurrentState = function () {
+        if (this.isInEdit)
+            return ItemHandlerState.edit;
+        if (this.canvas.isItemHandlerSelected(this)) {
+            if (this.canvas.isSelectionResizing)
+                return ItemHandlerState.resize;
+            if (this.canvas.isSelectionDragging)
+                return ItemHandlerState.move;
+            if (this.canvas.isSelectionRotating)
+                return ItemHandlerState.rotate;
+            return ItemHandlerState.select;
+        }
+        if (this.canvas.hoverHandler.currentHandler == this)
+            return ItemHandlerState.hover;
+        return ItemHandlerState.idle;
+    };
     NewBaseTextItemHandler.typeName = "NewBaseTextItemHandler";
@@ -848,0 +877,0 @@ return NewBaseTextItemHandler;

ItemHandlers/NewCurvedTextItemHandler.d.ts

 import { CurvedTextItem, BaseTextItem } from "@aurigma/design-atoms-model/Product/Items";
 import { ITextEditorControllerFactory, NewBaseTextItemHandler } from "./NewBaseTextItemHandler";
-import { Transform, PointF } from "@aurigma/design-atoms-model/Math";
+import { Transform, PointF, RectangleF } from "@aurigma/design-atoms-model/Math";
 import * as TextWhizz from "@aurigma/text-whizz/TextWhizzJS";
@@ -9,2 +9,3 @@ import { ITextFrameData, IWrappingPathData } from "@aurigma/design-atoms-text/TextEditor/Interfaces";
 import { FontRegistry } from "../InPlace";
+import { ItemHandlerState } from "./ItemHandlerState";
 export declare class NewCurvedTextItemHandler extends NewBaseTextItemHandler {
@@ -24,2 +25,6 @@ static readonly typeName: string;
     private _createTextWhizzFrame;
+    updateRectangle(rectangle: RectangleF, updateFromTextEdit: boolean): Promise<void>;
+    protected _drawHandlerEffects(ctx: CanvasRenderingContext2D): void;
+    protected _getBaselineDrawStates(): ItemHandlerState[];
+    protected _drawBaseline(ctx: CanvasRenderingContext2D): void;
 }

ItemHandlers/NewCurvedTextItemHandler.js

@@ -14,7 +14,47 @@ var __extends = (this && this.__extends) || (function () {
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import { CurvedTextItem } from "@aurigma/design-atoms-model/Product/Items";
 import { NewBaseTextItemHandler } from "./NewBaseTextItemHandler";
-import { EqualsOfFloatNumbers } from "@aurigma/design-atoms-model/Math";
+import { EqualsOfFloatNumbers, RotatedRectangleF } from "@aurigma/design-atoms-model/Math";
 import { TextFrameType } from "@aurigma/design-atoms-text/TextEditor/Enums/TextFrameType";
-import { toTextWhizzPath } from "@aurigma/design-atoms-text/Utils/PathUtils";
+import { getPathFirstPoint, getPathLastPoint, toTextWhizzPath } from "@aurigma/design-atoms-text/Utils/PathUtils";
+import { Graphics } from "../Graphics";
+import Environment from "@aurigma/design-atoms-model/Utils/Environment";
+import { rectangleEquals } from "../Utils/Math";
+import { ItemHandlerState } from "./ItemHandlerState";
 var NewCurvedTextItemHandler = /** @class */ (function (_super) {
@@ -105,2 +145,59 @@ __extends(NewCurvedTextItemHandler, _super);
     };
+    NewCurvedTextItemHandler.prototype.updateRectangle = function (rectangle, updateFromTextEdit) {
+        return __awaiter(this, void 0, void 0, function () {
+            var inRect, textRect, angle, oldCenter, newCenter, oldPath, rectangleChanged;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!updateFromTextEdit)
+                            return [2 /*return*/, _super.prototype.updateRectangle.call(this, rectangle, updateFromTextEdit)];
+                        inRect = rectangle.clone();
+                        textRect = RotatedRectangleF.fromRectangleF(rectangle);
+                        angle = this.item.transform.angle;
+                        oldCenter = this.rectangle.center;
+                        newCenter = rectangle.clone().center;
+                        oldPath = this.item.textPath.clone();
+                        oldPath.rotateAt(angle, oldCenter);
+                        textRect.rotateAt(angle, oldCenter);
+                        newCenter.rotateAt(this.item.transform.angle, oldCenter);
+                        oldPath.rotateAt(-angle, newCenter);
+                        textRect.rotateAt(-angle, newCenter);
+                        this.item.setTextPath(oldPath, true);
+                        rectangle = textRect.toRectangleF();
+                        _super.prototype.updateRectangle.call(this, rectangle, updateFromTextEdit);
+                        rectangleChanged = !rectangleEquals(inRect, rectangle);
+                        if (!(rectangleChanged && this.textEditor == null)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.textEditorController.waitUpdate()];
+                    case 1:
+                        _a.sent();
+                        this.textEditorController.updateText("text", true);
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    NewCurvedTextItemHandler.prototype._drawHandlerEffects = function (ctx) {
+        if (this._needToDrawBaseline())
+            this._drawBaseline(ctx);
+    };
+    NewCurvedTextItemHandler.prototype._getBaselineDrawStates = function () {
+        var _a;
+        return (_a = this.canvas.viewerConfiguration.curvedTextBaselineDrawStates) !== null && _a !== void 0 ? _a : [ItemHandlerState.edit, ItemHandlerState.select, ItemHandlerState.hover, ItemHandlerState.move, ItemHandlerState.resize, ItemHandlerState.rotate];
+    };
+    NewCurvedTextItemHandler.prototype._drawBaseline = function (ctx) {
+        var _a;
+        var scale = Environment.screenDpi * this.canvas.workspace.zoom / 72;
+        var transform = this.item.transform.clone();
+        var path = this.item.textPath;
+        var center = this.getControlCenter();
+        var baselineColor = (_a = this.canvas.style) === null || _a === void 0 ? void 0 : _a.baselineColor;
+        Graphics.drawPath(ctx, path, center, transform, 1 / scale, baselineColor, 1);
+        var pt1 = getPathFirstPoint(path).clone();
+        var pt2 = getPathLastPoint(path).clone();
+        pt1.transform(transform, center);
+        pt2.transform(transform, center);
+        Graphics.drawCross(ctx, pt1.x, pt1.y, 4 / scale, 1 / scale, baselineColor);
+        Graphics.drawCross(ctx, pt2.x, pt2.y, 4 / scale, 1 / scale, baselineColor);
+    };
     NewCurvedTextItemHandler.typeName = "NewCurvedTextItemHandler";
@@ -107,0 +204,0 @@ return NewCurvedTextItemHandler;

ItemHandlers/NewPlainTextItemHandler.d.ts

 import { PlainTextItem, BaseTextItem } from "@aurigma/design-atoms-model/Product/Items";
 import { ITextEditorControllerFactory, NewBaseTextItemHandler } from "./NewBaseTextItemHandler";
-import { Transform, PointF } from "@aurigma/design-atoms-model/Math";
+import { Transform, PointF, RectangleF } from "@aurigma/design-atoms-model/Math";
 import * as TextWhizz from "@aurigma/text-whizz/TextWhizzJS";
@@ -29,2 +29,3 @@ import { IPermissions } from "../Permission";
     private _createTextWhizzFrame;
+    updateRectangle(rectangle: RectangleF, updateFromTextEdit: boolean): Promise<void>;
 }

ItemHandlers/NewPlainTextItemHandler.js

@@ -14,6 +14,43 @@ var __extends = (this && this.__extends) || (function () {
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import { PlainTextItem } from "@aurigma/design-atoms-model/Product/Items";
 import { NewBaseTextItemHandler } from "./NewBaseTextItemHandler";
-import { EqualsOfFloatNumbers } from "@aurigma/design-atoms-model/Math";
+import { EqualsOfFloatNumbers, RotatedRectangleF } from "@aurigma/design-atoms-model/Math";
 import { TextFrameType } from "@aurigma/design-atoms-text/TextEditor/Enums/TextFrameType";
+import { rectangleEquals } from "../Utils/Math";
 var NewPlainTextItemHandler = /** @class */ (function (_super) {
@@ -114,2 +151,36 @@ __extends(NewPlainTextItemHandler, _super);
     };
+    NewPlainTextItemHandler.prototype.updateRectangle = function (rectangle, updateFromTextEdit) {
+        return __awaiter(this, void 0, void 0, function () {
+            var inRect, textRect, angle, oldCenter, newCenter, oldBaselineLocation, rectangleChanged;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!updateFromTextEdit)
+                            return [2 /*return*/, _super.prototype.updateRectangle.call(this, rectangle, updateFromTextEdit)];
+                        inRect = rectangle.clone();
+                        textRect = RotatedRectangleF.fromRectangleF(rectangle);
+                        angle = this.item.transform.angle;
+                        oldCenter = this.rectangle.center;
+                        newCenter = rectangle.clone().center;
+                        oldBaselineLocation = this.item.baselineLocation.clone();
+                        oldBaselineLocation.rotateAt(angle, oldCenter);
+                        textRect.rotateAt(angle, oldCenter);
+                        newCenter.rotateAt(this.item.transform.angle, oldCenter);
+                        oldBaselineLocation.rotateAt(-angle, newCenter);
+                        textRect.rotateAt(-angle, newCenter);
+                        this.item.setBaselineLocation(oldBaselineLocation, true);
+                        rectangle = textRect.toRectangleF();
+                        _super.prototype.updateRectangle.call(this, rectangle, updateFromTextEdit);
+                        rectangleChanged = !rectangleEquals(inRect, rectangle);
+                        if (!(rectangleChanged && this.textEditor == null)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.textEditorController.waitUpdate()];
+                    case 1:
+                        _a.sent();
+                        this.textEditorController.updateText("text", true);
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
     NewPlainTextItemHandler.typeName = "NewPlainTextItemHandler";
@@ -116,0 +187,0 @@ return NewPlainTextItemHandler;

package.json

 {
-  "version": "7.1.2",
+  "version": "7.1.3",
   "name": "@aurigma/design-atoms",
@@ -22,4 +22,4 @@ "license": "SEE LICENSE IN License.md",
   "dependencies": {
-    "@aurigma/design-atoms-model": "7.0.5",
-    "@aurigma/design-atoms-text": "7.1.2",
+    "@aurigma/design-atoms-model": "7.0.6",
+    "@aurigma/design-atoms-text": "7.1.3",
     "@aurigma/text-whizz": "1.6.36",
@@ -26,0 +26,0 @@ "clone": "2.1.1",

Services/ProductPreview/AutoPreviewContainersSource.d.ts

@@ -10,2 +10,3 @@ import { Container, Surface } from "@aurigma/design-atoms-model";
     private readonly _debounceUpdateContainers;
+    private _blockUpdate;
     constructor(sourceSurface: Surface, itemsComparer: IItemsComparer);
@@ -16,3 +17,3 @@ private get _sourceContainers();
     removePreviewContainersChanged(listener: (data: any) => any): void;
-    ensureUpdated(): void;
+    ensureUpdatedAndExecuteAsync(asyncCallback: () => Promise<void>): Promise<void>;
     private _subscribeToContainersChanged;
@@ -19,0 +20,0 @@ private _subscribeToItemCollectionsChanged;

Services/ProductPreview/AutoPreviewContainersSource.js

@@ -0,1 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __read = (this && this.__read) || function (o, n) {
@@ -37,2 +73,3 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
         var _this = this;
+        this._blockUpdate = false;
         this._onContainerItemAdded = function (data) {
@@ -56,3 +93,7 @@ _this._debounceUpdateContainers();
         this._previewContainersChanged = new EventObject();
-        this._debounceUpdateContainers = _.debounce(function () { return _this._updateContainers(); }, 100);
+        this._debounceUpdateContainers = _.debounce(function () {
+            if (!_this._blockUpdate) {
+                _this._updateContainers();
+            }
+        }, 100);
         this._subscribeToContainersChanged();
@@ -78,5 +119,18 @@ this._subscribeToItemCollectionsChanged();
     };
-    AutoPreviewContainersSource.prototype.ensureUpdated = function () {
-        this._debounceUpdateContainers.cancel();
-        this._updateContainers();
+    AutoPreviewContainersSource.prototype.ensureUpdatedAndExecuteAsync = function (asyncCallback) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this._debounceUpdateContainers.cancel();
+                        this._blockUpdate = true;
+                        this._updateContainers();
+                        return [4 /*yield*/, asyncCallback()];
+                    case 1:
+                        _a.sent();
+                        this._blockUpdate = false;
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
@@ -183,6 +237,10 @@ AutoPreviewContainersSource.prototype._subscribeToContainersChanged = function () {
         });
-        toAdd.forEach(function (item) { return resultArray.push(sourceArray.find(function (i) { return i.id === item.id; }).clone()); });
-        toRemove.forEach(function (id) { return resultArray.splice(resultArray.findIndex(function (i) { return i.id === id; }), 1); });
-        var resultItemsById = new Map(resultArray.map(function (i) { return [i.id, i]; }));
-        destination.setRange(sourceIds.map(function (id) { return resultItemsById.get(id); }));
+        toAdd.forEach(function (item) { return destination.insertAt(item.index, sourceArray.find(function (i) { return i.id === item.id; }).clone()); });
+        toRemove.forEach(function (id) { return destination.removeAt(destination.indexOf(function (i) { return i.id === id; })); });
+        sourceIds.forEach(function (id, index) {
+            var indexOld = destination.indexOf(function (item) { return item.id === id; });
+            if (indexOld !== index) {
+                destination.move(indexOld, index);
+            }
+        });
     };
@@ -189,0 +247,0 @@ return AutoPreviewContainersSource;

Services/ProductPreview/Interfaces/IPreviewContainersSource.d.ts

@@ -6,3 +6,3 @@ import { Container, Surface } from "@aurigma/design-atoms-model";
     removePreviewContainersChanged(listener: (data: any) => any): void;
-    ensureUpdated(): void;
+    ensureUpdatedAndExecuteAsync(asyncCallback: () => Promise<void>): Promise<void>;
 }
@@ -9,0 +9,0 @@ export interface IPreviewContainersSourceFactory {

Services/ProductPreview/PreviewCanvas.d.ts

@@ -15,2 +15,4 @@ import { PointF, Item, RectangleF, Surface } from "@aurigma/design-atoms-model";
 import { IPreviewContainersSourceFactory } from "./Interfaces/IPreviewContainersSource";
+import { CanvasRendererStyle } from "../../Canvas/CanvasRendererStyle";
+import { IHoverHandler } from "../../Canvas/Interfaces";
 export interface IWaitClockRenderer {
@@ -35,2 +37,3 @@ drawWaitClock(context: CanvasRenderingContext2D, center: PointF, mul: number): void;
     private readonly _handlerFactory;
+    private readonly _style;
     constructor(sourceSurface: Surface, previewContainersSourceFactory: IPreviewContainersSourceFactory, zoom: number, mul: number, renderer: IWaitClockRenderer, designAtomsApiClient: IDesignAtomsApiClient, colorPreviewService: IListenableColorPreviewService, service: Service, viewerConfigurationContext: IViewerConfigurationContext);
@@ -68,2 +71,5 @@ get layers(): LayerCollection;
     get isSelectionResizing(): boolean;
+    get isSelectionDragging(): boolean;
+    get isSelectionRotating(): boolean;
+    get isSelectionIdle(): boolean;
     get viewerConfiguration(): IViewerConfiguration;
@@ -106,2 +112,4 @@ get offset(): PointF;
     get sourceSurface(): Surface;
+    get style(): CanvasRendererStyle;
+    get hoverHandler(): IHoverHandler;
     private get _workspaceSize();
@@ -144,2 +152,3 @@ private get _allItemHandlers();
     waitUpdate(itemHandlers?: ItemHandler[]): Promise<void[]>;
+    waitUpdateAndExecute(callback: () => void): Promise<void>;
     onLayerTextureLoaded(): void;
@@ -146,0 +155,0 @@ pauseUpdateTexts(): void;

Services/ProductPreview/PreviewCanvas.js

@@ -56,2 +56,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import { Layer } from "../../Layer";
+import { CanvasRendererStyle } from "../../Canvas/CanvasRendererStyle";
 var PreviewCanvas = /** @class */ (function () {
@@ -87,2 +88,3 @@ function PreviewCanvas(sourceSurface, previewContainersSourceFactory, zoom, mul, renderer, designAtomsApiClient, colorPreviewService, service, viewerConfigurationContext) {
         this._updateLayers();
+        this._style = new CanvasRendererStyle();
     }
@@ -283,8 +285,21 @@ Object.defineProperty(PreviewCanvas.prototype, "layers", {
     Object.defineProperty(PreviewCanvas.prototype, "isSelectionResizing", {
-        get: function () {
-            return false;
-        },
+        get: function () { return false; },
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PreviewCanvas.prototype, "isSelectionDragging", {
+        get: function () { return false; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PreviewCanvas.prototype, "isSelectionRotating", {
+        get: function () { return false; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PreviewCanvas.prototype, "isSelectionIdle", {
+        get: function () { return false; },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(PreviewCanvas.prototype, "viewerConfiguration", {
@@ -549,2 +564,16 @@ get: function () {
     });
+    Object.defineProperty(PreviewCanvas.prototype, "style", {
+        get: function () {
+            return this._style;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PreviewCanvas.prototype, "hoverHandler", {
+        get: function () {
+            return null;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(PreviewCanvas.prototype, "_workspaceSize", {
@@ -646,3 +675,2 @@ get: function () {
         var _this = this;
-        this._previewContainersSource.ensureUpdated();
         var allItemHandlers = itemHandlers !== null && itemHandlers !== void 0 ? itemHandlers : this._allItemHandlers;
@@ -665,2 +693,25 @@ return Promise.all(allItemHandlers
     };
+    PreviewCanvas.prototype.waitUpdateAndExecute = function (callback) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this._previewContainersSource.ensureUpdatedAndExecuteAsync(function () { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, this.waitUpdate()];
+                                    case 1:
+                                        _a.sent();
+                                        callback();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     PreviewCanvas.prototype.onLayerTextureLoaded = function () {
@@ -667,0 +718,0 @@ };

Services/ProductPreview/ProductPreviewRenderer.d.ts

@@ -20,3 +20,3 @@ import { Container, IPoint, ISize, Product } from "@aurigma/design-atoms-model";
     render(canvas: HTMLCanvasElement, surfaceIndex: number, containersFilter?: (container: Container) => boolean, previewSize?: ISize, previewOffset?: IPoint): void;
-    waitUpdate(): Promise<void>;
+    waitUpdateAndExecute(surfaceIndex: number, callback: () => void): Promise<void>;
     dispose(): void;
@@ -23,0 +23,0 @@ private _getLayersToDraw;

Services/ProductPreview/ProductPreviewRenderer.js

@@ -112,7 +112,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     };
-    ProductPreviewRenderer.prototype.waitUpdate = function () {
+    ProductPreviewRenderer.prototype.waitUpdateAndExecute = function (surfaceIndex, callback) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, Promise.all(this._canvases.toArray().map(function (surface) { return surface.waitUpdate(); }))];
+                    case 0: return [4 /*yield*/, this._canvases.get(surfaceIndex).waitUpdateAndExecute(callback)];
                     case 1:
@@ -119,0 +119,0 @@ _a.sent();

Services/ProductPreview/ProductPreviewService.js

@@ -78,2 +78,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
             var surface, preview, ignoreContainers, _a, size, offset;
+            var _this = this;
             return __generator(this, function (_b) {
@@ -98,6 +99,7 @@ switch (_b.label) {
                         _a = this._getPreviewSizeAndOffset(surface, options), size = _a.size, offset = _a.offset;
-                        return [4 /*yield*/, this._productPreviewRenderer.waitUpdate()];
+                        return [4 /*yield*/, this._productPreviewRenderer.waitUpdateAndExecute(surfaceIndex, function () {
+                                _this._productPreviewRenderer.render(preview, surfaceIndex, function (container) { return !(ignoreContainers === null || ignoreContainers === void 0 ? void 0 : ignoreContainers.includes(container.id)); }, size, offset);
+                            })];
                     case 1:
                         _b.sent();
-                        this._productPreviewRenderer.render(preview, surfaceIndex, function (container) { return !(ignoreContainers === null || ignoreContainers === void 0 ? void 0 : ignoreContainers.includes(container.id)); }, size, offset);
                         return [4 /*yield*/, new Promise(function (resolve) {
@@ -104,0 +106,0 @@ preview.toBlob(function (blob) { return resolve(blob); });

Utils/index.d.ts

@@ -6,1 +6,2 @@ export * from './Ajax';
 export * from './CoordinatesConvertUtils';
+export * from './MarginParser';

Utils/index.js

@@ -6,2 +6,3 @@ export * from './Ajax';
 export * from './CoordinatesConvertUtils';
+export * from './MarginParser';
 //# sourceMappingURL=index.js.map

Viewer/InteractiveZonesHandler.d.ts

@@ -6,2 +6,3 @@ import { InteractiveZone, PointF, Surface, RectangleF, EventObject } from "@aurigma/design-atoms-model";
 import { IInteractiveZoneStateStyle, IInteractiveZonesStyles } from "./Interfaces/ICanvasStyle";
+import { ISelectionHandler } from "../Services";
 export declare class InteractiveZonesHandler implements IInteractiveZonesHandler {
@@ -11,2 +12,3 @@ private _styles;
     private _inputManager;
+    private _selectionHandler;
     private _textWhizz;
@@ -23,2 +25,3 @@ private _stateChangedEvent;
     setInputManager(inputManager: IInputManager): void;
+    setSelectionHandler(selection: ISelectionHandler): void;
     setTextWhizz(textWhizz: typeof TextWhizz): void;
@@ -25,0 +28,0 @@ setStyles(styles: IInteractiveZonesStyles): void;

Viewer/InteractiveZonesHandler.js

@@ -28,2 +28,4 @@ var __values = (this && this.__values) || function(o) {
         this._onInput = function (params) {
+            var _a, _b;
+            var isRotating = (_b = (_a = _this._selectionHandler) === null || _a === void 0 ? void 0 : _a.isRotating) !== null && _b !== void 0 ? _b : false;
             if (params.type == InputType.Hover) {
@@ -33,3 +35,3 @@ var pointerParams = params;
                 _this.highlightZone = zone;
-                if (pointerParams.button == Button.Primary)
+                if (pointerParams.button == Button.Primary && !isRotating)
                     _this.activeZone = zone;
@@ -39,3 +41,3 @@ }
                 var pointerParams = params;
-                if (pointerParams.button == Button.Primary) {
+                if (pointerParams.button == Button.Primary && !isRotating) {
                     var zone = _this._getZoneByPoint(pointerParams.workspace);
@@ -78,2 +80,5 @@ _this.activeZone = zone;
     };
+    InteractiveZonesHandler.prototype.setSelectionHandler = function (selection) {
+        this._selectionHandler = selection;
+    };
     InteractiveZonesHandler.prototype.setTextWhizz = function (textWhizz) {
@@ -80,0 +85,0 @@ this._textWhizz = textWhizz;

Viewer/Interfaces/ICanvasStyle.d.ts

@@ -23,3 +23,3 @@ export interface ICanvasStyle {
     labelFontSize?: number;
-    labelMargin?: number;
+    labelMargin?: number | string;
     labelTitle?: string;
@@ -26,0 +26,0 @@ showLabel?: boolean;

Viewer/Interfaces/IInteractiveZonesHandler.d.ts

@@ -5,2 +5,3 @@ import { InteractiveZone, Surface, RectangleF, EventObject, PointF } from "@aurigma/design-atoms-model";
 import { IInteractiveZoneStateStyle, IInteractiveZonesStyles } from "./ICanvasStyle";
+import { ISelectionHandler } from "../../Services";
 export interface IInteractiveZonesStateChangedEventArgs {
@@ -11,4 +12,4 @@ active: InteractiveZone;
 export interface IInteractiveZonesHandler {
+    stateChangedEvent: EventObject<IInteractiveZonesStateChangedEventArgs>;
     currentSurface: Surface;
-    stateChangedEvent: EventObject<IInteractiveZonesStateChangedEventArgs>;
     interactiveZones: InteractiveZone[];
@@ -22,2 +23,3 @@ activeZone: InteractiveZone;
     setInputManager(inputManager: IInputManager): any;
+    setSelectionHandler(selection: ISelectionHandler): unknown;
     setTextWhizz(textWhizz: typeof TextWhizz): any;
@@ -24,0 +26,0 @@ setOffset(offset: PointF): any;

Viewer/Interfaces/IViewerConfiguration.d.ts

@@ -15,2 +15,3 @@ import { IProductThemeConfig } from "@aurigma/design-atoms-model";
 import { IRenderingConfig } from "../../IRenderingConfig";
+import { ItemHandlerState } from "../../ItemHandlers/ItemHandlerState";
 export interface IViewerConfiguration {
@@ -40,2 +41,3 @@ stubImages?: IStubImagesConfig;
     apiClientConfiguration: IApiClientConfiguration;
+    curvedTextBaselineDrawStates?: ItemHandlerState[];
 }

Viewer/ViewerConfiguration.d.ts

@@ -8,2 +8,3 @@ import { ISnapLinesConfiguration } from "./SnapLinesHandler";
 import { IRenderingConfig } from "../IRenderingConfig";
+import { ItemHandlerState } from "../ItemHandlers/ItemHandlerState";
 export declare class ViewerConfiguration implements IViewerConfiguration {
@@ -35,2 +36,3 @@ renderingConfig: IRenderingConfig;
     apiClientConfiguration: IApiClientConfiguration;
+    curvedTextBaselineDrawStates?: ItemHandlerState[];
     constructor(conf: IViewerConfiguration);
@@ -37,0 +39,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4688099

increased by0.82%

Number of package files

1131

increased by0.53%

Lines of code

62253

increased by0.83%

Dependency changes

• + Added@aurigma/design-atoms-model@7.0.6(transitive)

• + Added@aurigma/design-atoms-text@7.1.3(transitive)

• - Removed@aurigma/design-atoms-model@7.0.5(transitive)

• - Removed@aurigma/design-atoms-text@7.1.2(transitive)

• Updated@aurigma/design-atoms-model@7.0.6

• Updated@aurigma/design-atoms-text@7.1.3