@aurigma/design-atoms - npm Package Compare versions

Comparing version 6.7.0 to 6.8.0

CanvasElementHandler.d.ts

@@ -8,7 +8,8 @@ import { SelectionHandler } from "./SelectionHandler";
 import { RotateHandler } from "./RotateHandler";
-import { TextAlignment } from "@aurigma/design-atoms-model/Product/Items";
+import { TextAlignment, TextVerticalAlignment } from "@aurigma/design-atoms-model/Product/Items";
 export interface ITextEditorElementHandler {
     addTextEditorStyles(css: string): void;
     textEditorDiv: HTMLElement;
-    showTextEditor(rectangle: RotatedRectangleF, textAlignment: TextAlignment, html: string, borderWidth: number, borderColor: string, fillColor: string, opacity: number): void;
+    textEditorInnerDiv: HTMLElement;
+    showTextEditor(rectangle: RotatedRectangleF, textAlignment: TextAlignment, html: string, borderWidth: number, borderColor: string, fillColor: string, opacity: number, verticalAlignment: TextVerticalAlignment): void;
     hideTextEditor(): string;
@@ -51,2 +52,3 @@ }
     private _textEditorDiv;
+    private _textEditorInnerDiv;
     private readonly _surfaceCanvasId;
@@ -134,3 +136,4 @@ private readonly _activeCanvasId;
     get textEditorDiv(): HTMLElement;
-    showTextEditor(rectangle: RotatedRectangleF, textAlignment: TextAlignment, html: string, borderWidth: number, borderColor: string, fillColor: string, opacity: number): void;
+    get textEditorInnerDiv(): HTMLElement;
+    showTextEditor(rectangle: RotatedRectangleF, textAlignment: TextAlignment, html: string, borderWidth: number, borderColor: string, fillColor: string, opacity: number, textVerticalAlignment: TextVerticalAlignment): void;
     hideTextEditor(): string;
@@ -137,0 +140,0 @@ private _updateTextEditorPosition;

CHANGELOG.md

 # Design Atoms Framework Changelog
 
 
+## [6.8.0] - 2021-04-02
+### Fixed
+- Support for Intelligent Mail Barcode.
+- Support for vertical alignment, auto size, and copyfitting in the WYSIWYG editor.
+- Applying `ConvertItemToPlaceholderCommand` to `BarcodeItem`.
+
+
+## [6.7.0] - 2021-03-24
+### Added
+- The possibility to convert `ShapeItem` to `PlaceholderItem` using `ItemsCommand.convertItemToPlaceholder` and `ItemsCommand.convertPlaceholderToItem`.
+- You can now manage violation settings for a single item.
+- Improved logic for checking the trim zone violation.
+
+### Fixed
+- Selecting items on the canvas with the `SelectFirstItemCommand`.
+- Event subscription.
+
+
 ## [6.6.0] - 2021-03-17
@@ -5,0 +23,0 @@ ### Added

Commands/ItemsCommands/ConvertItemToPlaceholderCommand.js

@@ -61,5 +61,6 @@ var __extends = (this && this.__extends) || (function () {
     ConvertItemToPlaceholderCommand.prototype._executeCommandBody = function () {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function () {
             var item, placeholder;
-            return __generator(this, function (_a) {
+            return __generator(this, function (_c) {
                 item = this._args.item;
@@ -85,2 +86,3 @@ if (item == null)
                     placeholder.isStubContent = true;
+                    placeholder.barcodeFormat = (_b = (_a = item) === null || _a === void 0 ? void 0 : _a.barcodeFormat) !== null && _b !== void 0 ? _b : null;
                 }
@@ -87,0 +89,0 @@ else {

Commands/ProductCommand/ResizeCommand.js

@@ -103,3 +103,3 @@ var __extends = (this && this.__extends) || (function () {
                         itemHandlers.forEach(function (handler) {
-                            handler._startTransform();
+                            handler.startTransform();
                             handler.beginUpdate();
@@ -106,0 +106,0 @@ });

InPlace/ITextEditor.d.ts

 import { Color } from "@aurigma/design-atoms-model/Colors";
 import { IFontSettings } from "@aurigma/design-atoms-model/Product/Interfaces";
-import { TextAlignment } from "@aurigma/design-atoms-model/Product/Items/TextEnums";
+import { TextAlignment, TextVerticalAlignment } from "@aurigma/design-atoms-model/Product/Items/TextEnums";
 import { EventObject } from "@aurigma/design-atoms-model/EventObject";
@@ -48,2 +48,3 @@ import { RotatedRectangleF, IPoint, Transform } from "@aurigma/design-atoms-model/Math";
     transform?: Transform;
+    textVerticalAlignment?: TextVerticalAlignment;
 };
@@ -50,0 +51,0 @@ export interface ITextEditor {

InPlace/Mobile/MobileTextEditor.d.ts

@@ -33,2 +33,3 @@ import { EventObject } from "@aurigma/design-atoms-model/EventObject";
     private get _div();
+    private get _innerDiv();
     private _updateColors;
@@ -35,0 +36,0 @@ private _findUsedColor;

InPlace/Mobile/MobileTextEditor.js

@@ -62,2 +62,5 @@ var __values = (this && this.__values) || function(o) {
     ]);
+    CommandKeys.verticalAlignmentTop = "verticalAlignmentTop";
+    CommandKeys.verticalAlignmentCenter = "verticalAlignmentCenter";
+    CommandKeys.verticalAlignmentBottom = "verticalAlignmentBottom";
     //custom paragraph
@@ -70,2 +73,3 @@ CommandKeys.alignment = "alignment";
     CommandKeys.rightIndent = "right-indent";
+    CommandKeys.verticalAlignment = "vertical-alignment";
     //custom span
@@ -130,6 +134,6 @@ CommandKeys.fontSize = "fontSize";
         var html = new XmlToHtmlConverter(this._manager, this._fontService, this._useSimpleFontList, this._previewScale).convert(data.text);
-        this._elementHandler.showTextEditor(data.rectangle, data.textAlignment, html, data.borderWidth, data.borderColor, data.fillColor, data.opacity);
+        this._elementHandler.showTextEditor(data.rectangle, data.textAlignment, html, data.borderWidth, data.borderColor, data.fillColor, data.opacity, data.textVerticalAlignment);
         this._setDefaultStyles(data.defaultInlineStyle, data.defaultParagraphStyle);
-        this._div.addEventListener("input", function (e /* InputEvent */) {
-            if (!_this._div.innerHTML.startsWith("<p")) {
+        this._innerDiv.addEventListener("input", function (e /* InputEvent */) {
+            if (!_this._innerDiv.innerHTML.startsWith("<p")) {
                 document.execCommand("selectAll");
@@ -161,3 +165,3 @@ document.execCommand("formatblock", false, "p");
         }
-        this._div.addEventListener("paste", function (e) {
+        this._innerDiv.addEventListener("paste", function (e) {
             e.preventDefault();
@@ -172,3 +176,3 @@ var text = e.clipboardData.getData("text/plain");
         var text = this._elementHandler.hideTextEditor();
-        var defaultFontValue = HtmlToXmlConverter.getElementFontValue(this._div);
+        var defaultFontValue = HtmlToXmlConverter.getElementFontValue(this._innerDiv);
         var xml = new HtmlToXmlConverter(this._manager, this._fontService, this._useSimpleFontList, this._previewScale, defaultFontValue).convert(text);
@@ -207,5 +211,12 @@ this._manager = null;
     });
+    Object.defineProperty(MobileTextEditor.prototype, "_innerDiv", {
+        get: function () {
+            return this._elementHandler.textEditorInnerDiv;
+        },
+        enumerable: true,
+        configurable: true
+    });
     MobileTextEditor.prototype._updateColors = function () {
         var _this = this;
-        var spans = this._div.querySelectorAll("span[style*=color]");
+        var spans = this._innerDiv.querySelectorAll("span[style*=color]");
         spans.forEach(function (span) {
@@ -231,5 +242,5 @@ if (Utils.isNullOrEmptyOrWhiteSpace(span.style.color))
         var range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
-        if (range != null && this._div.contains(range.commonAncestorContainer))
+        if (range != null && this._innerDiv.contains(range.commonAncestorContainer))
             return;
-        this._div.focus();
+        this._innerDiv.focus();
         selection.removeAllRanges();
@@ -240,7 +251,7 @@ selection.addRange(this._range);
         if (updateStyle === void 0) { updateStyle = true; }
-        if (this._div == null)
+        if (this._innerDiv == null)
             return;
         var selection = document.getSelection();
         var range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
-        if (range != null && this._div.contains(range.commonAncestorContainer)) {
+        if (range != null && this._innerDiv.contains(range.commonAncestorContainer)) {
             this._range = range;
@@ -276,3 +287,3 @@ if (updateStyle)
         var _this = this;
-        if (this._range == null || this._range.startContainer == this._div)
+        if (this._range == null || this._range.startContainer == this._innerDiv)
             return false;
@@ -288,3 +299,3 @@ var inlineStyle = this._getDefaultInlineStyle();
                 var colors = TreeConverter.styleToDict(colorDataAttribute != null ? colorDataAttribute.value : null);
-                var fontValue = HtmlToXmlConverter.getElementFontValue(element, _this._div);
+                var fontValue = HtmlToXmlConverter.getElementFontValue(element, _this._innerDiv);
                 if (fontValue != null) {
@@ -357,3 +368,3 @@ var fontParams = HtmlToXmlConverter.getFontSettings(fontValue, _this._fontService, _this._useSimpleFontList);
         var _this = this;
-        if (this._range == null || this._range.startContainer == this._div)
+        if (this._range == null || this._range.startContainer == this._innerDiv)
             return false;
@@ -510,3 +521,3 @@ var paragraphStyle = this._getDefaultParagraphStyle();
             if (commands.length == 1 && CommandKeys.documentCommands.includes(command.key)) {
-                this._div.focus();
+                this._innerDiv.focus();
                 document.execCommand(command.key, false, command.value);
@@ -571,3 +582,3 @@ }
         var selection = document.getSelection();
-        var newDiv = this._div.cloneNode();
+        var newDiv = this._innerDiv.cloneNode();
         var isFullySelectedSpan = function (s) {
@@ -630,3 +641,3 @@ if (selection.containsNode(s, false) || !s.hasChildNodes())
         };
-        this._div.childNodes.forEach(function (p) {
+        this._innerDiv.childNodes.forEach(function (p) {
             if (selection.containsNode(p, true)) {
@@ -641,3 +652,3 @@ var newP = p.cloneNode(false);
         });
-        this._div.focus();
+        this._innerDiv.focus();
         document.execCommand("selectAll");
@@ -654,3 +665,3 @@ document.execCommand("insertHTML", false, newDiv.innerHTML);
         var newDiv = this._div.cloneNode();
-        this._div.childNodes.forEach(function (p) {
+        this._innerDiv.childNodes.forEach(function (p) {
             if (!_this._isParagraph(p))
@@ -663,3 +674,3 @@ return;
         });
-        this._div.focus();
+        this._innerDiv.focus();
         document.execCommand("selectAll");
@@ -754,3 +765,3 @@ document.execCommand("insertHTML", false, newDiv.innerHTML);
         var paragraphCommands = this._paragraphStyleToCommands(paragraphStyle, false);
-        this._applyCommands(this._div, __spread(inlineCommands, paragraphCommands));
+        this._applyCommands(this._innerDiv, __spread(inlineCommands, paragraphCommands));
     };
@@ -757,0 +768,0 @@ MobileTextEditor.prototype._getDefaultInlineStyle = function () {

InPlace/TextEditor.d.ts

 import { EventObject } from "@aurigma/design-atoms-model/EventObject";
-import { TextAlignment } from "@aurigma/design-atoms-model/Product/Items/TextEnums";
+import { TextAlignment, TextVerticalAlignment } from "@aurigma/design-atoms-model/Product/Items/TextEnums";
 import { TextManager } from "./TextManager";
@@ -68,3 +68,4 @@ import { ITextEditor, IInlineStyle, IParagraphStyle, EditorInitData } from "./ITextEditor";
     static alignmentToTextWhizzAlignment(alignment: TextAlignment, textWhizz: typeof TextWhizz): TextWhizz.TextAlignment;
+    static verticalAlignmentToTextWhizz(verticalAlignment: TextVerticalAlignment, textWhizz: typeof TextWhizz): TextWhizz.VerticalAlignment;
     private _textWhizzAlignmentToAlignment;
 }

InPlace/TextEditor.js

 import { RgbColor } from "@aurigma/design-atoms-model/Colors";
 import { PointF, EqualsOfFloatNumbers } from "@aurigma/design-atoms-model/Math";
 import { EventObject } from "@aurigma/design-atoms-model/EventObject";
-import { TextAlignment } from "@aurigma/design-atoms-model/Product/Items/TextEnums";
+import { TextAlignment, TextVerticalAlignment } from "@aurigma/design-atoms-model/Product/Items/TextEnums";
 import { TextManager } from "./TextManager";
@@ -613,2 +613,14 @@ import { Keys } from "../Utils/Keys";
     };
+    TextEditor.verticalAlignmentToTextWhizz = function (verticalAlignment, textWhizz) {
+        switch (verticalAlignment) {
+            case TextVerticalAlignment.Top:
+                return textWhizz.VerticalAlignment.top;
+            case TextVerticalAlignment.Center:
+                return textWhizz.VerticalAlignment.center;
+            case TextVerticalAlignment.Bottom:
+                return textWhizz.VerticalAlignment.bottom;
+            default:
+                return textWhizz.VerticalAlignment.top;
+        }
+    };
     TextEditor.prototype._textWhizzAlignmentToAlignment = function (alignment) {
@@ -615,0 +627,0 @@ switch (alignment) {

InPlace/TextManager.d.ts

@@ -22,2 +22,4 @@ import { Color } from "@aurigma/design-atoms-model/Colors";
     private readonly _enteredEditModeEvent;
+    private readonly _textProcessor;
+    private _isDisposed;
     private _textHandler;
@@ -68,2 +70,3 @@ private _isCropped;
     measureText(extendToBlackBox?: boolean): RectangleF;
+    measureTextFrame(useActiveText?: boolean): RectangleF;
     clearText(): void;
@@ -75,3 +78,3 @@ private _isBounded;
     drawSelection(selection: TextWhizz.TextRange): void;
-    private get _isMobile();
+    get isMobile(): boolean;
     private _getFormattedText;
@@ -85,2 +88,3 @@ private _onMobileTextEditorInitialized;
     enterEditMode(x: number, y: number): void;
+    onTextEditorTextChanged(newText: string): boolean;
     exitEditMode(stayActive?: boolean): void;
@@ -92,2 +96,3 @@ updateItemHandler(selection?: TextWhizz.TextRange): void;
     static createException(e: number, textWhizz: typeof TextWhizz): Exception;
+    dispose(): void;
 }

InPlace/TextManager.js

@@ -1,40 +0,4 @@
-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 { RgbColor } from "@aurigma/design-atoms-model/Colors";
 import { Exception } from "@aurigma/design-atoms-model/Exception";
-import { BoundedTextItem, PathBoundedTextItem, PlainTextItem } from "@aurigma/design-atoms-model/Product/Items";
+import { BoundedTextItem, OverflowStrategy, PathBoundedTextItem, PlainTextItem } from "@aurigma/design-atoms-model/Product/Items";
 import { PointF, RectangleF, EqualsOfFloatNumbers } from "@aurigma/design-atoms-model/Math";
@@ -44,3 +8,3 @@ import { Cursor } from "../Utils/Common";
 import { MobileTextEditor } from "./Mobile/MobileTextEditor";
-import { NewPlainTextItemHandler, NewCurvedTextItemHandler } from "../ItemHandlers";
+import { NewPlainTextItemHandler, NewCurvedTextItemHandler, NewBoundedTextItemHandler } from "../ItemHandlers";
 import { EventObject, EventWithSenderArg } from "@aurigma/design-atoms-model/EventObject";
@@ -51,2 +15,3 @@ import { ItemUtils } from "../Utils/ItemUtils";
 import { OpenTypeFeature } from "@aurigma/design-atoms-model/Product/Items/OpenTypeFeature";
+import { TextProcessor } from "../Utils/TextProcessor";
 var TextManager = /** @class */ (function () {
@@ -61,2 +26,4 @@ //TODO: settings for selection and cursor colors
         this._enteredEditModeEvent = new EventWithSenderArg();
+        this._textProcessor = new TextProcessor();
+        this._isDisposed = false;
         this._failed = false;
@@ -133,4 +100,6 @@ this._initialFormattedText = null;
             return;
-        if (this._state === "static" && this._isStaticTextImageValid || this._isMobile && this._state == "inEdit")
+        if (this._state === "static" && this._isStaticTextImageValid || this.isMobile && this._state == "inEdit")
             this._textRenderer.clearText();
+        else if (!this.isMobile)
+            this.updateText("frame");
         this._redrawText();
@@ -169,3 +138,2 @@ };
             return this._enteredEditModeEvent;
-            ;
         },
@@ -248,3 +216,3 @@ enumerable: true,
             return;
-        if (!this._isMobile && trigger === "text" && this._itemHandler.item.text === this._getFormattedText())
+        if (!this.isMobile && trigger === "text" && this._itemHandler.item.text === this._getFormattedText())
             return;
@@ -255,3 +223,3 @@ this._ready = false;
                 this._textHandler = new this._textWhizz.TextHandler(this._fontRegistry, 72);
-                this._itemHandler.initTextWhizzHandler(this._textHandler);
+                this._itemHandler.initTextWhizzHandler(this._textHandler, null, false);
             }
@@ -276,3 +244,3 @@ else if (trigger === "frame") {
         this._redrawText(true);
-        if (this._state == "inEdit" && this._isMobile) {
+        if (this._state == "inEdit" && this.isMobile) {
             this.exitEditMode();
@@ -310,3 +278,3 @@ this.enterEditMode(0, 0);
             var emptyTextHandler = new this._textWhizz.TextHandler(this._fontRegistry, 72);
-            this._itemHandler.initTextWhizzHandler(emptyTextHandler, "X");
+            this._itemHandler.initTextWhizzHandler(emptyTextHandler, "X", true);
             rectangle = emptyTextHandler.getBounds();
@@ -317,2 +285,21 @@ }
     };
+    TextManager.prototype.measureTextFrame = function (useActiveText) {
+        if (useActiveText === void 0) { useActiveText = false; }
+        var textHandler = null;
+        ;
+        try {
+            textHandler = new this._textWhizz.TextHandler(this._fontRegistry, 72);
+            var originalText = this._itemHandler.getTextForRendering();
+            var text = useActiveText
+                ? this._getFormattedText()
+                : this._textProcessor.getTextForFrameMeasure(originalText);
+            this._itemHandler.initTextWhizzHandler(textHandler, text, true);
+        }
+        catch (e) {
+            throw TextManager.createException(e, this._textWhizz);
+        }
+        var scale = this._itemHandler.item.previewScale;
+        var rectangle = textHandler.getBounds();
+        return new RectangleF(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+    };
     TextManager.prototype.clearText = function () {
@@ -325,24 +312,11 @@ this._textRenderer.clearText();
     TextManager.prototype._redrawText = function (redrawCanvas) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!(this._state === "static")) return [3 /*break*/, 3];
-                        if (!!this._isStaticTextImageValid) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this._updateStaticTextImage()];
-                    case 1:
-                        _a.sent();
-                        _a.label = 2;
-                    case 2: return [3 /*break*/, 4];
-                    case 3:
-                        if (this._state === "active" || !this._isMobile) {
-                            this._throttleRedrawText();
-                            if (redrawCanvas)
-                                this._canvas.redrawDesign();
-                        }
-                        _a.label = 4;
-                    case 4: return [2 /*return*/];
-                }
-            });
-        });
+        if (this._state === "static") {
+            if (!this._isStaticTextImageValid)
+                this._updateStaticTextImage();
+        }
+        else if (this._state === "active" || !this.isMobile) {
+            this._throttleRedrawText();
+            if (redrawCanvas)
+                this._canvas.redrawDesign();
+        }
     };
@@ -358,2 +332,4 @@ TextManager.prototype._updateStaticTextImage = function () {
         var _a;
+        if (this._isDisposed)
+            return;
         var item = this._itemHandler.item;
@@ -372,3 +348,3 @@ var useOpacityMultiplier = !this.isInEdit;
     };
-    Object.defineProperty(TextManager.prototype, "_isMobile", {
+    Object.defineProperty(TextManager.prototype, "isMobile", {
         get: function () {
@@ -393,3 +369,3 @@ return this._textEditor instanceof MobileTextEditor;
         if (type === "dblclick" && this._state !== "inEdit") {
-            if (this._isMobile && !this._textEditor.ready) {
+            if (this.isMobile && !this._textEditor.ready) {
                 this._textEditor.initialized.remove(this._onMobileTextEditorInitialized);
@@ -403,3 +379,3 @@ this._textEditor.initialized.add(this._onMobileTextEditorInitialized);
         }
-        else if (!this._isMobile)
+        else if (!this.isMobile)
             this._textEditor.processMouseEvent(e);
@@ -431,3 +407,4 @@ this._canvas.viewer.setCursor(mouseOverCurrent ? Cursor.text : Cursor.defaultCursor, false);
             textFormattingEnabled: ItemUtils.getAllowTextFormatting(item, this._canvas.viewer.textFormattingEnabled),
-            transform: item.transform
+            transform: item.transform,
+            textVerticalAlignment: item instanceof BoundedTextItem ? item.verticalAlignment : null
         };
@@ -516,2 +493,10 @@ return data;
     };
+    TextManager.prototype.onTextEditorTextChanged = function (newText) {
+        var changed = this._initialFormattedText !== newText;
+        if (changed) {
+            this._isStaticTextImageValid = false;
+            this._itemHandler.item.text = newText;
+        }
+        return changed;
+    };
     TextManager.prototype.exitEditMode = function (stayActive) {
@@ -522,7 +507,3 @@ if (stayActive === void 0) { stayActive = false; }
         var newText = this._textEditor.hide();
-        var changed = this._initialFormattedText !== newText;
-        if (changed) {
-            this._isStaticTextImageValid = false;
-            this._itemHandler.item.text = newText;
-        }
+        this.onTextEditorTextChanged(newText);
         if (this._itemHandler.isEmptyTextPlaceholder()) {
@@ -543,2 +524,15 @@ this._textHandler.getCursor().insertText(this._itemHandler.item.originalText);
         }
+        else if (this._itemHandler instanceof NewBoundedTextItemHandler &&
+            this._itemHandler.item instanceof BoundedTextItem && this._itemHandler.item.overflowStrategy == OverflowStrategy.ExpandBox) {
+            var currentRect = this._itemHandler.rectangle.toRectangleF();
+            var measuredRect = this.measureTextFrame(true);
+            if (measuredRect.height > currentRect.height) {
+                currentRect.height = measuredRect.height;
+            }
+            this._itemHandler.updateRectangle(currentRect);
+            this._itemHandler.updateTextWhizzFrames(this._textHandler);
+            this._canvas.redrawDesign();
+            this._canvas.updateSelection();
+            this._itemHandler.raiseChanged();
+        }
         else
@@ -582,2 +576,6 @@ this._itemHandler.raiseChanged();
     };
+    TextManager.prototype.dispose = function () {
+        this.clearText();
+        this._isDisposed = true;
+    };
     return TextManager;
@@ -584,0 +582,0 @@ }());

ItemHandlers/BaseRectangleItemHandler.d.ts

@@ -1,2 +0,2 @@
-import { EventWithSenderArg } from "@aurigma/design-atoms-model/EventObject";
+import { EventWithAutoSenderArg, EventWithSenderArg } from "@aurigma/design-atoms-model/EventObject";
 import { ItemHandler } from "./ItemHandler";
@@ -21,2 +21,3 @@ import { Canvas, HitTestResult } from "../Canvas";
     private _throttleSizeChanging;
+    private _transformChanging;
     protected _violationWarningButton: HTMLElement;
@@ -31,2 +32,3 @@ protected _violationWarningButtonClickHandler: any;
     protected _getBoundsMargin(): number;
+    get transformChanging(): EventWithAutoSenderArg<BaseRectangleItemHandler, any>;
     getControlBounds(): RectangleF;
@@ -52,4 +54,6 @@ getControlCenter(): PointF;
     hitTest(point: PointF): HitTestResult;
+    protected _calculateTransformedRectangle(startRectangle: RotatedRectangleF, endRectangle: RotatedRectangleF): RotatedRectangleF;
+    protected _onTransformRectangle(startRectangle: RotatedRectangleF, endRectangle: RotatedRectangleF, highlightOnly: boolean): void;
     _transformRectangle(startRectangle: RotatedRectangleF, endRectangle: RotatedRectangleF, highlightOnly?: boolean): void;
-    _startTransform(): void;
+    startTransform(operation?: HitTestResult): void;
     endTransform(changed: boolean, resized: boolean, supressOnChanged?: boolean): void;
@@ -56,0 +60,0 @@ protected _endTransform(changed: boolean, resized: boolean, supressOnChanged?: boolean): void;

ItemHandlers/BaseRectangleItemHandler.js

@@ -50,3 +50,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { EventWithSenderArg } from "@aurigma/design-atoms-model/EventObject";
+import { EventWithAutoSenderArg, EventWithSenderArg } from "@aurigma/design-atoms-model/EventObject";
 import { ItemHandler } from "./ItemHandler";
@@ -69,2 +69,3 @@ import { ContentType } from "./ContentType";
         _this.editToolbarButton = null;
+        _this._transformChanging = new EventWithAutoSenderArg(_this);
         _this._doubleClickEvent = new EventWithSenderArg();
@@ -134,2 +135,9 @@ _this._clickEvent = new EventWithSenderArg();
     };
+    Object.defineProperty(BaseRectangleItemHandler.prototype, "transformChanging", {
+        get: function () {
+            return this._transformChanging;
+        },
+        enumerable: true,
+        configurable: true
+    });
     BaseRectangleItemHandler.prototype.getControlBounds = function () {
@@ -261,7 +269,3 @@ var maxX = Math.max(this._controlPoints[0].x, this._controlPoints[1].x);
     };
-    BaseRectangleItemHandler.prototype._transformRectangle = function (startRectangle, endRectangle, highlightOnly) {
-        if (highlightOnly === void 0) { highlightOnly = false; }
-        //Transform rectangle relatively global start and end rectangles
-        if (startRectangle == null || endRectangle == null || this._startRectangle == null)
-            return;
+    BaseRectangleItemHandler.prototype._calculateTransformedRectangle = function (startRectangle, endRectangle) {
         var newRectangle;
@@ -275,3 +279,14 @@ if (this._startRectangle.equals(startRectangle)) {
         }
+        return newRectangle;
+    };
+    BaseRectangleItemHandler.prototype._onTransformRectangle = function (startRectangle, endRectangle, highlightOnly) {
+        //Transform rectangle relatively global start and end rectangles
+        if (startRectangle == null || endRectangle == null || this._startRectangle == null)
+            return;
+        var newRectangle = this._calculateTransformedRectangle(startRectangle, endRectangle);
         this.setRectangle(newRectangle, true);
+    };
+    BaseRectangleItemHandler.prototype._transformRectangle = function (startRectangle, endRectangle, highlightOnly) {
+        if (highlightOnly === void 0) { highlightOnly = false; }
+        this._onTransformRectangle(startRectangle, endRectangle, highlightOnly);
         var canvas = this.canvas;
@@ -286,4 +301,4 @@ if (canvas != null)
     };
-    BaseRectangleItemHandler.prototype._startTransform = function () {
-        _super.prototype._startTransform.call(this);
+    BaseRectangleItemHandler.prototype.startTransform = function (operation) {
+        _super.prototype.startTransform.call(this, operation);
         this._startRectangle = this.rectangle;
@@ -296,2 +311,3 @@ var canvas = this.canvas;
         if (supressOnChanged === void 0) { supressOnChanged = false; }
+        _super.prototype.endTransform.call(this, changed, resized, supressOnChanged);
         this._endTransform(changed, resized, supressOnChanged);
@@ -298,0 +314,0 @@ };

ItemHandlers/GroupItemHandler.d.ts

@@ -7,2 +7,3 @@ import { ItemHandler } from "./ItemHandler";
 import * as TextWhizz from "@aurigma/text-whizz/TextWhizzJS";
+import { HitTestResult } from "../Canvas";
 export declare type HandlerUpdateFunc = (handler: ItemHandler) => boolean;
@@ -48,7 +49,7 @@ export interface IContainerItemHandler {
     updateNestedItemHandlers(updateFunc: HandlerUpdateFunc): boolean;
-    _transformRectangle(startRectangle: RotatedRectangleF, endRectangle: RotatedRectangleF, highlightOnly?: boolean): void;
+    protected _onTransformRectangle(startRectangle: RotatedRectangleF, endRectangle: RotatedRectangleF, highlightOnly: boolean): void;
     update(): void;
     quickUpdate(): void;
     _onResized(): boolean;
-    _startTransform(): void;
+    startTransform(operation?: HitTestResult): void;
     _endTransform(changed: any, resized: any, supressOnChanged?: boolean): void;
@@ -55,0 +56,0 @@ protected _transformChanged(): void;

ItemHandlers/GroupItemHandler.js

@@ -238,5 +238,4 @@ var __extends = (this && this.__extends) || (function () {
     };
-    GroupItemHandler.prototype._transformRectangle = function (startRectangle, endRectangle, highlightOnly) {
-        if (highlightOnly === void 0) { highlightOnly = false; }
-        _super.prototype._transformRectangle.call(this, startRectangle, endRectangle, highlightOnly);
+    GroupItemHandler.prototype._onTransformRectangle = function (startRectangle, endRectangle, highlightOnly) {
+        _super.prototype._onTransformRectangle.call(this, startRectangle, endRectangle, highlightOnly);
         this.itemHandlers.forEach(function (itemHandler) { return itemHandler._transformRectangle(startRectangle, endRectangle, highlightOnly); });
@@ -256,5 +255,5 @@ };
     };
-    GroupItemHandler.prototype._startTransform = function () {
-        this.applyToItems(function (itemHandler) { return itemHandler._startTransform(); });
-        _super.prototype._startTransform.call(this);
+    GroupItemHandler.prototype.startTransform = function (operation) {
+        this.applyToItems(function (itemHandler) { return itemHandler.startTransform(operation); });
+        _super.prototype.startTransform.call(this, operation);
     };
@@ -261,0 +260,0 @@ GroupItemHandler.prototype._endTransform = function (changed, resized, supressOnChanged) {

ItemHandlers/HandlerFactoryByItem.js

@@ -1,2 +0,2 @@
-import { BaseTextItem, RectangleItem, ImageItem, PlaceholderItem, BarcodeItem, BoundedTextItem, CurvedTextItem, PathBoundedTextItem, ShapeItem, LineItem, PolylineItem, PlainTextItem, DashedLineItem, AutoScaledTextItem, GridItem, EllipseItem, GroupItem, ClipartItem, ArchedTextItem, LayoutItem, TextVerticalAlignment, OverflowStrategy } from "@aurigma/design-atoms-model/Product/Items";
+import { BaseTextItem, RectangleItem, ImageItem, PlaceholderItem, BarcodeItem, BoundedTextItem, CurvedTextItem, PathBoundedTextItem, ShapeItem, LineItem, PolylineItem, PlainTextItem, DashedLineItem, AutoScaledTextItem, GridItem, EllipseItem, GroupItem, ClipartItem, ArchedTextItem, LayoutItem } from "@aurigma/design-atoms-model/Product/Items";
 import { RectangleItemHandler } from "./RectangleItemHandler";
@@ -321,13 +321,6 @@ import { ImageItemHandler } from "./ImageItemHandler";
             }
-            if (item.verticalAlignment !== TextVerticalAlignment.Top) {
-                this._logUseOldItemHandler(item, "verticalAlignment", item.verticalAlignment);
+            if (item.scheduledFitMode != null) {
+                this._logUseOldItemHandler(item, "scheduledFitMode", item.scheduledFitMode);
                 return true;
             }
-            if (item.scheduledFitMode != null || item.overflowStrategy !== OverflowStrategy.Clip) {
-                if (item.scheduledFitMode != null)
-                    this._logUseOldItemHandler(item, "scheduledFitMode", item.scheduledFitMode);
-                if (item.overflowStrategy != null)
-                    this._logUseOldItemHandler(item, "overflowStrategy", item.overflowStrategy);
-                return true;
-            }
             if (item.characterLimit > 0) {
@@ -334,0 +327,0 @@ this._logUseOldItemHandler(item, "characterLimit", item.characterLimit);

ItemHandlers/ItemHandler.d.ts

@@ -34,2 +34,3 @@ import { Utils } from "../Utils/Common";
     private _skippedPropertyName;
+    protected _transformOperation: HitTestResult;
     constructor(item?: Item);
@@ -119,3 +120,5 @@ set item(item: Item);
     protected _updateActiveWebServiceCall(callPromise: Utils.ICancelablePromise<any>): Promise<void>;
-    _startTransform(): void;
+    _startTransform(operation?: HitTestResult): void;
+    startTransform(operation?: HitTestResult): void;
+    endTransform(changed: boolean, resized: boolean, supressOnChanged?: boolean): void;
     private _cancelWebServiceCall;
@@ -122,0 +125,0 @@ protected _handlerUpdated: Deferred<void>;

ItemHandlers/ItemHandler.js

@@ -62,2 +62,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         this._skippedPropertyName = null;
+        this._transformOperation = null;
         this._baseOnItemPropertyChanged = function (sender, propertyName) {
@@ -730,5 +731,14 @@ if (_this._skipPropertyChanged) {
     };
-    ItemHandler.prototype._startTransform = function () {
+    // DEPRECATED - use startTransform() 
+    ItemHandler.prototype._startTransform = function (operation) {
+        this.startTransform(operation);
+    };
+    ItemHandler.prototype.startTransform = function (operation) {
+        this._transformOperation = operation;
         this._cancelWebServiceCall();
     };
+    ItemHandler.prototype.endTransform = function (changed, resized, supressOnChanged) {
+        if (supressOnChanged === void 0) { supressOnChanged = false; }
+        this._transformOperation = null;
+    };
     ItemHandler.prototype._cancelWebServiceCall = function () {
@@ -735,0 +745,0 @@ if (this._activeWebServiceCall == null)

ItemHandlers/LayoutItemHandler.d.ts

@@ -8,2 +8,3 @@ import { LayoutItem, AutoLayoutOrientation, AutoLayoutAlignItems, AutoLayoutJustifyContent, Item } from "@aurigma/design-atoms-model/Product/Items";
 import * as TextWhizz from "@aurigma/text-whizz/TextWhizzJS";
+import { HitTestResult } from "../Canvas";
 export declare class LayoutItemHandler extends GroupItemHandler implements IGroupHandler {
@@ -30,3 +31,3 @@ private _history;
     private _transformStarted;
-    _startTransform(): void;
+    startTransform(operation?: HitTestResult): void;
     _onResized(): boolean;
@@ -33,0 +34,0 @@ _endTransform(changed: any, resized: any, suppressOnChanged: any): Promise<void>;

ItemHandlers/LayoutItemHandler.js

@@ -179,3 +179,3 @@ var __extends = (this && this.__extends) || (function () {
     };
-    LayoutItemHandler.prototype._startTransform = function () {
+    LayoutItemHandler.prototype.startTransform = function (operation) {
         this._originalHeight = this.height;
@@ -185,3 +185,3 @@ this._transformStarted = true;
             this._layoutHandler.ignoreLayoutApply = true;
-        _super.prototype._startTransform.call(this);
+        _super.prototype.startTransform.call(this, operation);
     };
@@ -188,0 +188,0 @@ LayoutItemHandler.prototype._onResized = function () {

ItemHandlers/NewBaseTextItemHandler.d.ts

@@ -22,2 +22,3 @@ import { RectangleF, PointF, Path, RotatedRectangleF, Transform } from "@aurigma/design-atoms-model/Math";
     set item(item: BaseTextItem);
+    get isInEdit(): boolean;
     isEmpty(): boolean;
@@ -66,5 +67,5 @@ isEmptyTextPlaceholder(): boolean;
     private _onTextManagerExitedEditMode;
-    private _getTextForRendering;
-    initTextWhizzHandler(handler: TextWhizz.TextHandler, text?: string): void;
-    protected abstract _addTextWhizzFrames(handler: TextWhizz.TextHandler): void;
+    getTextForRendering(): string;
+    initTextWhizzHandler(handler: TextWhizz.TextHandler, text: string, isMeasureFrame: boolean): void;
+    protected abstract _addTextWhizzFrames(handler: TextWhizz.TextHandler, isMeasureFrame: boolean): void;
     abstract setTextWhizzWrappingPath(handler: TextWhizz.TextHandler): void;
@@ -71,0 +72,0 @@ abstract updateTextWhizzFrames(handler: TextWhizz.TextHandler): void;

ItemHandlers/NewBaseTextItemHandler.js

@@ -134,2 +134,10 @@ var __extends = (this && this.__extends) || (function () {
     });
+    Object.defineProperty(NewBaseTextItemHandler.prototype, "isInEdit", {
+        get: function () {
+            var _a;
+            return (_a = this._textManager) === null || _a === void 0 ? void 0 : _a.isInEdit;
+        },
+        enumerable: true,
+        configurable: true
+    });
     NewBaseTextItemHandler.prototype.isEmpty = function () {
@@ -304,3 +312,3 @@ return this.item.isEmpty() && !this._textManager.isInEdit;
         var transform = rectangle.getTransform(controlBounds);
-        if (!transform.equals(this.item.transform, 0.1)) {
+        if (!transform.equals(this.item.transform)) {
             this.item.setTransform(transform, supressOnChanged);
@@ -440,6 +448,6 @@ if ((_a = this._textManager) === null || _a === void 0 ? void 0 : _a.isActive) {
     });
-    NewBaseTextItemHandler.prototype._getTextForRendering = function () {
+    NewBaseTextItemHandler.prototype.getTextForRendering = function () {
         return this.isEmptyTextPlaceholder() ? this.item.originalText : this.item.text;
     };
-    NewBaseTextItemHandler.prototype.initTextWhizzHandler = function (handler, text) {
+    NewBaseTextItemHandler.prototype.initTextWhizzHandler = function (handler, text, isMeasureFrame) {
         var e_1, _a, e_2, _b;
@@ -510,5 +518,5 @@ if (text === void 0) { text = null; }
         handler.setDefaultParagraphStyle(paragraphStyle);
-        this._addTextWhizzFrames(handler);
+        this._addTextWhizzFrames(handler, isMeasureFrame);
         this.setTextWhizzWrappingPath(handler);
-        handler.getCursor().insertText(text !== null && text !== void 0 ? text : this._getTextForRendering());
+        handler.getCursor().insertText(text !== null && text !== void 0 ? text : this.getTextForRendering());
     };
@@ -661,3 +669,3 @@ NewBaseTextItemHandler.prototype._beforeFrontEndUpdate = function () {
         (_b = this._textManager) === null || _b === void 0 ? void 0 : _b.enteredEditModeEvent.remove(this._onTextManagerEnteredEditMode);
-        (_c = this._textManager) === null || _c === void 0 ? void 0 : _c.clearText();
+        (_c = this._textManager) === null || _c === void 0 ? void 0 : _c.dispose();
         this._imageContainer.dispose();
@@ -664,0 +672,0 @@ _super.prototype.dispose.call(this);

ItemHandlers/NewBoundedTextItemHandler.d.ts

@@ -1,2 +0,2 @@
-import { Path, RotatedRectangleF, Transform, PointF } from "@aurigma/design-atoms-model/Math";
+import { Path, RectangleF, RotatedRectangleF, Transform, PointF } from "@aurigma/design-atoms-model/Math";
 import { BoundedTextItem, PathBoundedTextItem, BaseTextItem } from "@aurigma/design-atoms-model/Product/Items";
@@ -17,7 +17,14 @@ import { NewBaseTextItemHandler } from "./NewBaseTextItemHandler";
     getTextWrappingPath(): Path;
+    protected _onTransformRectangle(startRectangle: RotatedRectangleF, endRectangle: RotatedRectangleF, highlightOnly: boolean): void;
+    private _validateRect;
+    private _validateRectAndSet;
+    setRectangleValidated(rectangle?: RotatedRectangleF): void;
+    setRectangle(rectangle: RotatedRectangleF, suppressOnChanged?: boolean): void;
+    updateRectangle(rectangle: RectangleF): void;
     getTextRectangle(): RotatedRectangleF;
     get drawingRectangle(): RotatedRectangleF;
-    protected _addTextWhizzFrames(handler: TextWhizz.TextHandler): void;
+    protected _addTextWhizzFrames(handler: TextWhizz.TextHandler, isMeasureFrame: boolean): void;
     setTextWhizzWrappingPath(handler: TextWhizz.TextHandler): void;
     updateTextWhizzFrames(handler: TextWhizz.TextHandler): void;
+    private _calculateIsLargeRect;
     private _createTextWhizzFrame;
@@ -24,0 +31,0 @@ protected _applyTransform(item: BaseTextItem, transform: Transform, center: PointF): void;

ItemHandlers/NewBoundedTextItemHandler.js

@@ -26,5 +26,8 @@ var __extends = (this && this.__extends) || (function () {
 import { EqualsOfFloatNumbers, Path, RotatedRectangleF } from "@aurigma/design-atoms-model/Math";
-import { BoundedTextItem, PathBoundedTextItem, WrappingMode, FirstBaselineOffset } from "@aurigma/design-atoms-model/Product/Items";
+import { BoundedTextItem, PathBoundedTextItem, WrappingMode, FirstBaselineOffset, OverflowStrategy } from "@aurigma/design-atoms-model/Product/Items";
 import { NewBaseTextItemHandler } from "./NewBaseTextItemHandler";
+import { ResizeHelper } from "../SelectionHandler";
 import { Graphics } from "../Graphics";
+import { TextEditor } from "../InPlace/TextEditor";
+import { equalsOfFloatNumbers } from "../Utils/Math";
 var NewBoundedTextItemHandler = /** @class */ (function (_super) {
@@ -50,3 +53,7 @@ __extends(NewBoundedTextItemHandler, _super);
         if (this.item instanceof BoundedTextItem) {
-            var rect = this.item.textRectangle;
+            var rect = null;
+            if (this._textManager.isInEdit)
+                rect = this.rectangle.toRectangleF();
+            else
+                rect = this.item.textRectangle;
             return [Path.rectangle(rect.left, rect.top, rect.width, rect.height)];
@@ -129,6 +136,61 @@ }
     };
+    NewBoundedTextItemHandler.prototype._onTransformRectangle = function (startRectangle, endRectangle, highlightOnly) {
+        var _a;
+        if (startRectangle == null || endRectangle == null || this._startRectangle == null)
+            return;
+        var newRectangle = this._calculateTransformedRectangle(startRectangle, endRectangle);
+        this.setRectangle(newRectangle, true);
+        (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.redraw();
+    };
+    NewBoundedTextItemHandler.prototype._validateRect = function (newRectangle) {
+        var _a;
+        if (this._textManager === null)
+            return null;
+        if (this.item instanceof BoundedTextItem && this.item.overflowStrategy == OverflowStrategy.ExpandBox) {
+            var measuredRect = this._textManager.measureTextFrame();
+            if (measuredRect.height > newRectangle.height) {
+                var delta = measuredRect.height - newRectangle.height;
+                if (equalsOfFloatNumbers(delta, 0))
+                    return null;
+                var incRect = newRectangle.clone();
+                if (((_a = this._transformOperation) === null || _a === void 0 ? void 0 : _a.resize) && ResizeHelper.isTopResizeGrip(this._transformOperation.resizeIndex))
+                    delta *= -1;
+                incRect.centerY += delta / 2;
+                incRect.height = measuredRect.height;
+                return incRect;
+            }
+        }
+        return null;
+    };
+    NewBoundedTextItemHandler.prototype._validateRectAndSet = function (rectangle, suppressOnChanged) {
+        var validRect = this._validateRect(rectangle);
+        if (validRect != null) {
+            _super.prototype.setRectangle.call(this, validRect, suppressOnChanged);
+            this.update();
+        }
+        else {
+            _super.prototype.setRectangle.call(this, rectangle, suppressOnChanged);
+        }
+    };
+    NewBoundedTextItemHandler.prototype.setRectangleValidated = function (rectangle) {
+        if (rectangle === void 0) { rectangle = null; }
+        if (rectangle == null)
+            rectangle = this.rectangle;
+        this._validateRectAndSet(rectangle, true);
+    };
+    NewBoundedTextItemHandler.prototype.setRectangle = function (rectangle, suppressOnChanged) {
+        this._validateRectAndSet(rectangle, suppressOnChanged);
+    };
+    NewBoundedTextItemHandler.prototype.updateRectangle = function (rectangle) {
+        _super.prototype.updateRectangle.call(this, rectangle);
+        this.setRectangleValidated();
+    };
     NewBoundedTextItemHandler.prototype.getTextRectangle = function () {
         var _a;
         var center = this.getControlCenter();
-        var rectangle = RotatedRectangleF.fromRectangleF(((_a = this._textManager) === null || _a === void 0 ? void 0 : _a.ready) ? this._textManager.measureText() : this.item.sourceRectangle);
+        var rectangle;
+        if ((_a = this._textManager) === null || _a === void 0 ? void 0 : _a.ready)
+            rectangle = RotatedRectangleF.fromRectangleF(this._textManager.measureText());
+        else
+            rectangle = RotatedRectangleF.fromRectangleF(this.item.sourceRectangle);
         rectangle.transform(this.item.transform.clone(), center);
@@ -152,3 +214,3 @@ return rectangle;
     });
-    NewBoundedTextItemHandler.prototype._addTextWhizzFrames = function (handler) {
+    NewBoundedTextItemHandler.prototype._addTextWhizzFrames = function (handler, isMeasureFrame) {
         var e_1, _a;
@@ -158,3 +220,3 @@ try {
                 var frame = _c.value;
-                handler.addFrame(this._createTextWhizzFrame(frame));
+                handler.addFrame(this._createTextWhizzFrame(frame, isMeasureFrame));
             }
@@ -195,5 +257,5 @@ }
             if (i < framesCount)
-                handler.replaceFrame(this._createTextWhizzFrame(path), i);
+                handler.replaceFrame(this._createTextWhizzFrame(path, false), i);
             else
-                handler.addFrame(this._createTextWhizzFrame(path));
+                handler.addFrame(this._createTextWhizzFrame(path, false));
         }
@@ -206,4 +268,10 @@ if (framesCount > itemFrames.length) {
         }
+        this.setRectangleValidated();
     };
-    NewBoundedTextItemHandler.prototype._createTextWhizzFrame = function (path) {
+    NewBoundedTextItemHandler.prototype._calculateIsLargeRect = function () {
+        var measuredRect = this._textManager.measureTextFrame();
+        var isLargeRect = measuredRect.height < this.rectangle.height;
+        return isLargeRect;
+    };
+    NewBoundedTextItemHandler.prototype._createTextWhizzFrame = function (path, isMeasureFrame) {
         var frame = new this._textWhizz.ShapeTextFrame();
@@ -213,2 +281,17 @@ frame.shape = this._pathToTextWhizzPath(path);
         frame.firstBaselineMinOffset = this.item.firstBaselineMinOffset;
+        if (this.item instanceof BoundedTextItem) {
+            if (this.item.overflowStrategy == OverflowStrategy.ExpandBox) {
+                var isLargeRect = (isMeasureFrame) ? false : this._calculateIsLargeRect();
+                if (!isLargeRect)
+                    frame.autoSizeMode = this._textWhizz.AutoSizeMode.heightOnly;
+                else
+                    frame.verticalAlignment = TextEditor.verticalAlignmentToTextWhizz(this.item.verticalAlignment, this._textWhizz);
+            }
+            else
+                frame.verticalAlignment = TextEditor.verticalAlignmentToTextWhizz(this.item.verticalAlignment, this._textWhizz);
+            if (this.item.overflowStrategy == OverflowStrategy.FitToBox)
+                frame.copyFittingMode = this._textWhizz.CopyFittingMode.fitToBox;
+            if (this.item.overflowStrategy == OverflowStrategy.FitToWidth)
+                frame.copyFittingMode = this._textWhizz.CopyFittingMode.fitToWidth;
+        }
         var scale = this.item.previewScale;
@@ -215,0 +298,0 @@ if (!EqualsOfFloatNumbers(scale, 1))

ItemHandlers/PlaceholderItemHandler.d.ts

@@ -10,3 +10,3 @@ import { ItemHandler } from "./ItemHandler";
 import { PlaceholderItem } from "@aurigma/design-atoms-model/Product/Items";
-import { Canvas } from "../Canvas";
+import { Canvas, HitTestResult } from "../Canvas";
 import * as TextWhizz from "@aurigma/text-whizz/TextWhizzJS";
@@ -78,4 +78,4 @@ export declare class PlaceholderItemHandler extends ShapeItemHandler {
     protected _onRemovedFromCanvas(canvas: any): void;
-    _transformRectangle(startRectangle: any, endRectangle: any): void;
-    _startTransform(): void;
+    protected _onTransformRectangle(startRectangle: any, endRectangle: any, highlightOnly: boolean): void;
+    startTransform(operation?: HitTestResult): void;
     endTransform(changed: boolean, resized: boolean): void;
@@ -82,0 +82,0 @@ protected _endTransform(changed: boolean, resized: boolean, supressOnChanged?: boolean): void;

ItemHandlers/PlaceholderItemHandler.js

@@ -421,5 +421,5 @@ var __extends = (this && this.__extends) || (function () {
     };
-    PlaceholderItemHandler.prototype._transformRectangle = function (startRectangle, endRectangle) {
+    PlaceholderItemHandler.prototype._onTransformRectangle = function (startRectangle, endRectangle, highlightOnly) {
         this._previousRectangle = this.rectangle;
-        _super.prototype._transformRectangle.call(this, startRectangle, endRectangle);
+        _super.prototype._onTransformRectangle.call(this, startRectangle, endRectangle, highlightOnly);
         if (!this.isEmptyContent() && this.content.startRectangle != null) {
@@ -449,4 +449,4 @@ if (this.item.isStubContent && this.item.fixedStubContentSize && !this.editing) {
     };
-    PlaceholderItemHandler.prototype._startTransform = function () {
-        _super.prototype._startTransform.call(this);
+    PlaceholderItemHandler.prototype.startTransform = function (operation) {
+        _super.prototype.startTransform.call(this, operation);
         if (this.editing) {
@@ -453,0 +453,0 @@ this._startRectangle = this._content.rectangle;

package.json

 {
-  "version": "6.7.0",
+  "version": "6.8.0",
   "name": "@aurigma/design-atoms",
@@ -22,4 +22,4 @@ "license": "SEE LICENSE IN License.md",
   "dependencies": {
-    "@aurigma/design-atoms-model": "6.4.0",
-    "@aurigma/text-whizz": "^1.2.134",
+    "@aurigma/design-atoms-model": "6.5.0",
+    "@aurigma/text-whizz": "^1.2.143",
     "clone": "2.1.1",
@@ -26,0 +26,0 @@ "json-cycle": "1.3.0",

SelectionHandler.d.ts

@@ -110,1 +110,9 @@ import { Canvas, HitTestResult } from "./Canvas";
 }
+export declare class ResizeHelper {
+    static isLeftResizeGrip(index: number): boolean;
+    static isTopResizeGrip(index: number): boolean;
+    static isRightResizeGrip(index: number): boolean;
+    static isBottomResizeGrip(index: number): boolean;
+    static isCornerResizeGrip(index: number): boolean;
+    static isEdgeResizeGrip(index: number): boolean;
+}

SelectionHandler.js

@@ -248,11 +248,11 @@ import { PointF, RotatedRectangleF, RectangleF, EqualsOfFloatNumbers, getTriangleAngle, normalizeAngle } from "@aurigma/design-atoms-model/Math";
             var index = result.resizeIndex;
-            var edgeArbitraryResize = (index === 5 || index === 6 || index === 7 || index === 8) &&
+            var edgeArbitraryResize = ResizeHelper.isEdgeResizeGrip(index) &&
                 this._getEdgeResize(permissions, currentItemHandler);
-            var cornerArbitraryResize = (index === 1 || index === 2 || index === 3 || index === 4) &&
+            var cornerArbitraryResize = ResizeHelper.isCornerResizeGrip(index) &&
                 this._getCornerResize(permissions, currentItemHandler, false, ResizeGripsPermissions.arbitrary);
-            var cornerArbitraryResizeInvertedShift = (index === 1 || index === 2 || index === 3 || index === 4) &&
+            var cornerArbitraryResizeInvertedShift = ResizeHelper.isCornerResizeGrip(index) &&
                 this._getCornerResize(permissions, currentItemHandler, true, ResizeGripsPermissions.arbitrary);
-            var cornerProportionalResize = (index === 1 || index === 2 || index === 3 || index === 4) &&
+            var cornerProportionalResize = ResizeHelper.isCornerResizeGrip(index) &&
                 this._getCornerResize(permissions, currentItemHandler, false, ResizeGripsPermissions.proportional);
-            var cornerProportionalResizeInvertedShift = (index === 1 || index === 2 || index === 3 || index === 4) &&
+            var cornerProportionalResizeInvertedShift = ResizeHelper.isCornerResizeGrip(index) &&
                 this._getCornerResize(permissions, currentItemHandler, true, ResizeGripsPermissions.proportional);
@@ -522,3 +522,3 @@ result.arbitraryResize = edgeArbitraryResize || cornerArbitraryResize;
             if (baseRectangleHandler.startRectangle == null)
-                baseRectangleHandler._startTransform();
+                baseRectangleHandler.startTransform();
             baseRectangleHandler._transformRectangle(startRectangle, endRectangle, true);
@@ -560,3 +560,3 @@ }
         for (var i = 0; i < this._itemHandlers.length; i++) {
-            this._itemHandlers.getItem(i)._startTransform();
+            this._itemHandlers.getItem(i).startTransform(this._operation);
         }
@@ -739,3 +739,3 @@ };
             r = this._constrainRectangleToSnapLines(r, arbitraryResize);
-        this._updateRectangle(r);
+        this._updateRectangle(r, false, this._operation.resizeIndex);
     };
@@ -882,3 +882,3 @@ SelectionHandler.prototype._drag = function (point, isCtrl) {
     };
-    SelectionHandler.prototype._updateRectangle = function (rectangle, ignoreConstraint) {
+    SelectionHandler.prototype._updateRectangle = function (rectangle, ignoreConstraint, resizeGripIndex) {
         if (ignoreConstraint === void 0) { ignoreConstraint = false; }
@@ -895,2 +895,3 @@ var contentEditingPlaceholder = this._canvas.contentEditingPlaceholderItemHandler;
         }
+        this.update();
     };
@@ -1020,2 +1021,26 @@ SelectionHandler.prototype._getRectWithFrames = function (rectangle) {
 export { SelectionHandler };
+var ResizeHelper = /** @class */ (function () {
+    function ResizeHelper() {
+    }
+    ResizeHelper.isLeftResizeGrip = function (index) {
+        return index === 1 || index === 4 || index === 5;
+    };
+    ResizeHelper.isTopResizeGrip = function (index) {
+        return index === 1 || index === 2 || index === 6;
+    };
+    ResizeHelper.isRightResizeGrip = function (index) {
+        return index === 2 || index === 3 || index === 7;
+    };
+    ResizeHelper.isBottomResizeGrip = function (index) {
+        return index === 3 || index === 4 || index === 8;
+    };
+    ResizeHelper.isCornerResizeGrip = function (index) {
+        return index === 1 || index === 2 || index === 3 || index === 4;
+    };
+    ResizeHelper.isEdgeResizeGrip = function (index) {
+        return index === 5 || index === 6 || index === 7 || index === 8;
+    };
+    return ResizeHelper;
+}());
+export { ResizeHelper };
 //# sourceMappingURL=SelectionHandler.js.map

Services/ItemsDataApplier.d.ts

@@ -1,2 +0,2 @@
-import { Item } from "@aurigma/design-atoms-model/Product/Items";
+import { Item, BarcodeFormat, Size } from "@aurigma/design-atoms-model/Product/Items";
 import { IItemData } from "./ItemsDataApplierInterfaces";
@@ -38,2 +38,3 @@ import { ProductHandler } from "./ProductHandler";
     private _calcNewGroupBounds;
+    static getBarcodeRatio(barcodeFormat: BarcodeFormat): Size;
 }
@@ -40,0 +41,0 @@ export interface IApplyParams {

Services/VariableItemHelper.d.ts

@@ -1,2 +0,2 @@
-import { ShapeItem, RectangleItem, EllipseItem, ImageItem, BaseTextItem, BaseItem, PlaceholderItem, Item, GroupItem, BarcodeFormat, BarcodeSubType } from "@aurigma/design-atoms-model/Product/Items";
+import { ShapeItem, RectangleItem, EllipseItem, ImageItem, BaseTextItem, BaseItem, PlaceholderItem, Item, GroupItem, BarcodeItem, BarcodeFormat, BarcodeSubType } from "@aurigma/design-atoms-model/Product/Items";
 import { Product } from "@aurigma/design-atoms-model/Product";
@@ -28,2 +28,3 @@ import { Canvas } from "../Canvas";
     static getVariablesFromPlaceholderItem(item: PlaceholderItem): IVariable[];
+    static getVariablesFromBarcodeItem(item: BarcodeItem, ignoreIsVariableMarker?: boolean): IBarcodeVariable[];
     static getVariablesFromTextItem(item: BaseTextItem): IVariable[];
@@ -36,6 +37,6 @@ static getInterpolationVariables(textItem: BaseTextItem): IInterpolationPlaceholderVariable[];
     value: string;
-    type: "Image" | "ImagePlaceholder" | "Text" | "InString" | "BarcodePlaceholder";
+    type: "Image" | "ImagePlaceholder" | "Text" | "InString" | "BarcodePlaceholder" | "Barcode";
 }
 export interface IBarcodeVariable extends IVariable {
-    type: "BarcodePlaceholder";
+    type: "BarcodePlaceholder" | "Barcode";
     barcodeFormat: BarcodeFormat;
@@ -42,0 +43,0 @@ barcodeSubType: BarcodeSubType;

Services/VariableItemHelper.js

@@ -1,2 +0,13 @@
-import { ShapeItem, RectangleItem, EllipseItem, ImageItem, BaseTextItem, PlaceholderItem, ContentItem, GroupItem } from "@aurigma/design-atoms-model/Product/Items";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { ShapeItem, RectangleItem, EllipseItem, ImageItem, BaseTextItem, PlaceholderItem, ContentItem, GroupItem, BarcodeItem } from "@aurigma/design-atoms-model/Product/Items";
 import * as _ from "underscore";
@@ -93,2 +104,4 @@ import { ItemUtils } from "../Utils/ItemUtils";
                 variables = VariableItemHelper.getVariablesFromPlaceholderItem(item);
+            else if (item instanceof BarcodeItem)
+                variables = VariableItemHelper.getVariablesFromBarcodeItem(item);
             else if (item instanceof ImageItem)
@@ -136,12 +149,18 @@ variables = VariableItemHelper.getVariablesFromImageItem(item);
             var content = item.content;
-            return [{
-                    name: item.name,
-                    type: "BarcodePlaceholder",
-                    barcodeFormat: item.barcodeFormat,
-                    barcodeSubType: content.barcodeSubType,
-                    value: content.barcodeContent
-                }];
+            return [__assign(__assign({}, this.getVariablesFromBarcodeItem(content, true)[0]), { name: item.name, type: "BarcodePlaceholder" })];
         }
         return [{ name: item.name, type: "ImagePlaceholder", value: null }];
     };
+    VariableItemHelper.getVariablesFromBarcodeItem = function (item, ignoreIsVariableMarker) {
+        if (ignoreIsVariableMarker === void 0) { ignoreIsVariableMarker = false; }
+        if (!ignoreIsVariableMarker && !item.isVariable)
+            return null;
+        return [{
+                name: item.name,
+                type: "Barcode",
+                barcodeFormat: item.barcodeFormat,
+                barcodeSubType: item.barcodeSubType,
+                value: item.barcodeContent
+            }];
+    };
     VariableItemHelper.getVariablesFromTextItem = function (item) {
@@ -148,0 +167,0 @@ var result = [];

Utils/ItemUtils.js

@@ -91,2 +91,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import { SetImageMetadataCommand } from "../Commands/ItemsCommands/SetImageMetadataCommand";
+import { ItemsDataApplier } from "../Services/ItemsDataApplier";
 var ItemUtils = /** @class */ (function () {
@@ -530,4 +531,3 @@ function ItemUtils() {
             var barcodeRect = rect.clone();
-            var isSquareCode = metadata.barcodeFormat === BarcodeFormat.QR_CODE || metadata.barcodeFormat === BarcodeFormat.DATA_MATRIX;
-            var newRectSize = fitSizeToSize(new Size(isSquareCode ? 1 : 2.5, 1), new Size(rect.width, rect.height));
+            var newRectSize = fitSizeToSize(ItemsDataApplier.getBarcodeRatio(metadata.barcodeFormat), new Size(rect.width, rect.height));
             barcodeRect.width = newRectSize.width;
@@ -534,0 +534,0 @@ barcodeRect.height = newRectSize.height;

No alert changes

Improved metrics

Total package byte prevSize

3480488

increased by0.77%

Number of package files

581

increased by1.04%

Lines of code

46365

increased by0.71%

Dependency changes

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

• Updated@aurigma/text-whizz@^1.2.143