devexpress-diagram 2.0.44 → 2.0.45

package/dist/dx-diagram.css

@@ -1,7 +1,7 @@
 /*!
  * DevExpress Diagram (dx-diagram)
- * Version: 2.0.44
- * Build date: Thu Oct 21 2021
+ * Version: 2.0.45
+ * Build date: Fri Nov 12 2021
  * 
  * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
@@ -509,10 +509,11 @@
 
 .dxdi-clipboard-input,
 .dxdi-focus-input {
-  position: fixed;
+  position: absolute;
   overflow: hidden;
   left: -1000px !important;
-  top: -1000px !important; }
+  top: -1000px !important;
+  opacity: 0; }
 
 .dxdi-text-input-container {
   display: none; }

package/dist/dx-diagram.js

@@ -1,7 +1,7 @@
 /*!
  * DevExpress Diagram (dx-diagram)
- * Version: 2.0.44
- * Build date: Thu Oct 21 2021
+ * Version: 2.0.45
+ * Build date: Fri Nov 12 2021
  * 
  * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
@@ -382,7 +382,7 @@ exports.Size = Size;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectUtils = exports.GeometryUtils = exports.Utils = exports.EventDispatcher = exports.Range = exports.LineEquation = void 0;
+exports.HtmlFocusUtils = exports.ObjectUtils = exports.GeometryUtils = exports.Utils = exports.EventDispatcher = exports.Range = exports.LineEquation = void 0;
 __webpack_require__(175);
 var size_1 = __webpack_require__(2);
 var point_1 = __webpack_require__(1);
@@ -393,6 +393,7 @@ var math_1 = __webpack_require__(32);
 var vector_1 = __webpack_require__(58);
 var segment_1 = __webpack_require__(33);
 var Style_1 = __webpack_require__(27);
+var browser_1 = __webpack_require__(19);
 var LineEquation = /** @class */ (function () {
     function LineEquation(aParam, bParam, cParam) {
         this.aParam = aParam;
@@ -1073,6 +1074,50 @@ var ObjectUtils = /** @class */ (function () {
     return ObjectUtils;
 }());
 exports.ObjectUtils = ObjectUtils;
+var HtmlFocusUtils = /** @class */ (function () {
+    function HtmlFocusUtils() {
+    }
+    HtmlFocusUtils.focusWithPreventScroll = function (element) {
+        try {
+            var isPreventScrollNotSupported = browser_1.Browser.Safari;
+            var savedDocumentScrollPosition = isPreventScrollNotSupported && this.getHtmlScrollPosition();
+            element.focus({ preventScroll: true });
+            if (isPreventScrollNotSupported) {
+                var newDocumentScrollPosition = this.getHtmlScrollPosition();
+                if (!ObjectUtils.compareObjects(savedDocumentScrollPosition, newDocumentScrollPosition))
+                    this.setHtmlScrollPosition(savedDocumentScrollPosition);
+            }
+        }
+        catch (e) {
+        }
+    };
+    HtmlFocusUtils.getHtmlScrollPosition = function () {
+        return {
+            pos: this.getDocumentScrollPosition(window, document),
+            iframePos: window.top !== window && this.getDocumentScrollPosition(window.top, window.top.document)
+        };
+    };
+    HtmlFocusUtils.getDocumentScrollPosition = function (win, doc) {
+        return {
+            left: win.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft,
+            top: win.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop
+        };
+    };
+    HtmlFocusUtils.setHtmlScrollPosition = function (position) {
+        this.setDocumentScrollPosition(document, position.pos);
+        if (window.top !== window && position.iframePos)
+            this.setDocumentScrollPosition(window.top.document, position.iframePos);
+    };
+    HtmlFocusUtils.setDocumentScrollPosition = function (doc, pos) {
+        doc.documentElement.scrollTop = pos.top;
+        doc.documentElement.scrollLeft = pos.left;
+        // old Safari on iOS
+        doc.body.scrollTop = pos.top;
+        doc.body.scrollLeft = pos.left;
+    };
+    return HtmlFocusUtils;
+}());
+exports.HtmlFocusUtils = HtmlFocusUtils;
 
 
 /***/ }),
@@ -4138,7 +4183,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.raiseEvent = exports.isLeftButtonPressed = exports.RenderUtils = void 0;
 var Event_1 = __webpack_require__(14);
 var math_1 = __webpack_require__(32);
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var evt_1 = __webpack_require__(60);
 var RenderUtils = /** @class */ (function () {
     function RenderUtils() {
@@ -4309,69 +4354,6 @@ exports.RectangleShapeDescription = RectangleShapeDescription;
 
 "use strict";
 
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alignment = exports.DataLayoutOrientation = exports.LogicalDirectionKind = exports.TreeLayoutSettings = exports.LayoutSettings = void 0;
-var Connector_1 = __webpack_require__(6);
-var LayoutSettings = /** @class */ (function () {
-    function LayoutSettings(gridSize) {
-        this.orientation = DataLayoutOrientation.Vertical;
-        this.direction = LogicalDirectionKind.Forward;
-        var baseSpacing = (gridSize && gridSize * 2 > Connector_1.Connector.minOffset) ? gridSize * 2 : Connector_1.Connector.minOffset;
-        this.columnSpacing = baseSpacing;
-        this.layerSpacing = baseSpacing * 2;
-        this.containerPadding = baseSpacing * 2;
-        this.componentSpacing = baseSpacing * 2;
-    }
-    return LayoutSettings;
-}());
-exports.LayoutSettings = LayoutSettings;
-var TreeLayoutSettings = /** @class */ (function (_super) {
-    __extends(TreeLayoutSettings, _super);
-    function TreeLayoutSettings(gridSize) {
-        var _this = _super.call(this, gridSize) || this;
-        _this.alignment = Alignment.Center;
-        _this.subTreeColumnSpacing = _this.componentSpacing / 2;
-        return _this;
-    }
-    return TreeLayoutSettings;
-}(LayoutSettings));
-exports.TreeLayoutSettings = TreeLayoutSettings;
-var LogicalDirectionKind;
-(function (LogicalDirectionKind) {
-    LogicalDirectionKind[LogicalDirectionKind["Backward"] = 0] = "Backward";
-    LogicalDirectionKind[LogicalDirectionKind["Forward"] = 1] = "Forward";
-})(LogicalDirectionKind = exports.LogicalDirectionKind || (exports.LogicalDirectionKind = {}));
-var DataLayoutOrientation;
-(function (DataLayoutOrientation) {
-    DataLayoutOrientation[DataLayoutOrientation["Horizontal"] = 0] = "Horizontal";
-    DataLayoutOrientation[DataLayoutOrientation["Vertical"] = 1] = "Vertical";
-})(DataLayoutOrientation = exports.DataLayoutOrientation || (exports.DataLayoutOrientation = {}));
-var Alignment;
-(function (Alignment) {
-    Alignment[Alignment["Left"] = 0] = "Left";
-    Alignment[Alignment["Center"] = 1] = "Center";
-})(Alignment = exports.Alignment || (exports.Alignment = {}));
-
-
-/***/ }),
-/* 20 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
 Object.defineProperty(exports, "__esModule", { value: true });
 var Browser = (function () {
     function Browser() {
@@ -4592,6 +4574,69 @@ var Browser = (function () {
 exports.Browser = Browser;
 
 
+/***/ }),
+/* 20 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alignment = exports.DataLayoutOrientation = exports.LogicalDirectionKind = exports.TreeLayoutSettings = exports.LayoutSettings = void 0;
+var Connector_1 = __webpack_require__(6);
+var LayoutSettings = /** @class */ (function () {
+    function LayoutSettings(gridSize) {
+        this.orientation = DataLayoutOrientation.Vertical;
+        this.direction = LogicalDirectionKind.Forward;
+        var baseSpacing = (gridSize && gridSize * 2 > Connector_1.Connector.minOffset) ? gridSize * 2 : Connector_1.Connector.minOffset;
+        this.columnSpacing = baseSpacing;
+        this.layerSpacing = baseSpacing * 2;
+        this.containerPadding = baseSpacing * 2;
+        this.componentSpacing = baseSpacing * 2;
+    }
+    return LayoutSettings;
+}());
+exports.LayoutSettings = LayoutSettings;
+var TreeLayoutSettings = /** @class */ (function (_super) {
+    __extends(TreeLayoutSettings, _super);
+    function TreeLayoutSettings(gridSize) {
+        var _this = _super.call(this, gridSize) || this;
+        _this.alignment = Alignment.Center;
+        _this.subTreeColumnSpacing = _this.componentSpacing / 2;
+        return _this;
+    }
+    return TreeLayoutSettings;
+}(LayoutSettings));
+exports.TreeLayoutSettings = TreeLayoutSettings;
+var LogicalDirectionKind;
+(function (LogicalDirectionKind) {
+    LogicalDirectionKind[LogicalDirectionKind["Backward"] = 0] = "Backward";
+    LogicalDirectionKind[LogicalDirectionKind["Forward"] = 1] = "Forward";
+})(LogicalDirectionKind = exports.LogicalDirectionKind || (exports.LogicalDirectionKind = {}));
+var DataLayoutOrientation;
+(function (DataLayoutOrientation) {
+    DataLayoutOrientation[DataLayoutOrientation["Horizontal"] = 0] = "Horizontal";
+    DataLayoutOrientation[DataLayoutOrientation["Vertical"] = 1] = "Vertical";
+})(DataLayoutOrientation = exports.DataLayoutOrientation || (exports.DataLayoutOrientation = {}));
+var Alignment;
+(function (Alignment) {
+    Alignment[Alignment["Left"] = 0] = "Left";
+    Alignment[Alignment["Center"] = 1] = "Center";
+})(Alignment = exports.Alignment || (exports.Alignment = {}));
+
+
 /***/ }),
 /* 21 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -4806,7 +4851,7 @@ exports.ColorUtils = ColorUtils;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var common_1 = __webpack_require__(34);
 var math_1 = __webpack_require__(32);
 var string_1 = __webpack_require__(50);
@@ -5114,7 +5159,7 @@ var DomUtils = (function () {
             return getAbsolutePositionX_IE(element);
         else if (browser_1.Browser.Firefox && browser_1.Browser.Version >= 3)
             return getAbsolutePositionX_FF3(element);
-        else if (browser_1.Browser.Opera)
+        else if (browser_1.Browser.Opera && browser_1.Browser.Version <= 12)
             return getAbsolutePositionX_Opera(element);
         else if (browser_1.Browser.NetscapeFamily && (!browser_1.Browser.Firefox || browser_1.Browser.Version < 3))
             return getAbsolutePositionX_NS(element);
@@ -5429,7 +5474,7 @@ exports.SvgPrimitive = SvgPrimitive;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var encode_1 = __webpack_require__(173);
 var string_1 = __webpack_require__(50);
 var KeyUtils = (function () {
@@ -5443,6 +5488,8 @@ var KeyUtils = (function () {
             result |= ModifierKey.Ctrl;
         if (evt.shiftKey)
             result |= ModifierKey.Shift;
+        if (evt.metaKey)
+            result |= ModifierKey.Meta;
         return result;
     };
     KeyUtils.getShortcutCode = function (keyCode, isCtrlKey, isShiftKey, isAltKey, isMetaKey) {
@@ -8646,7 +8693,7 @@ exports.Diagnostics = Diagnostics;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var common_1 = __webpack_require__(34);
 var dom_1 = __webpack_require__(23);
 var touch_1 = __webpack_require__(174);
@@ -11033,7 +11080,7 @@ var Structures_1 = __webpack_require__(39);
 var ListUtils_1 = __webpack_require__(90);
 var search_1 = __webpack_require__(42);
 var point_1 = __webpack_require__(1);
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var GraphLayout_1 = __webpack_require__(139);
 var Connector_1 = __webpack_require__(6);
 var CycleRemover_1 = __webpack_require__(270);
@@ -13440,7 +13487,7 @@ var point_1 = __webpack_require__(1);
 var BaseBuilder_1 = __webpack_require__(140);
 var Structures_1 = __webpack_require__(39);
 var DiagramItem_1 = __webpack_require__(9);
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var TreeLayoutBuilder = /** @class */ (function (_super) {
     __extends(TreeLayoutBuilder, _super);
     function TreeLayoutBuilder() {
@@ -13902,7 +13949,7 @@ exports.ChangeZindexHistoryItem = ChangeZindexHistoryItem;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataLayoutParameters = exports.DataLayoutType = void 0;
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var WideTree_1 = __webpack_require__(97);
 var Sugiyama_1 = __webpack_require__(79);
 var DataLayoutType;
@@ -14089,7 +14136,7 @@ exports.ToolboxDragEventsHandlerBase = ToolboxDragEventsHandlerBase;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderManagerDragEventsHandlerBase = void 0;
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var RenderManagerDragEventsHandlerBase = /** @class */ (function () {
     function RenderManagerDragEventsHandlerBase() {
         this.isMoveLocked = false;
@@ -14188,13 +14235,13 @@ Object.defineProperty(exports, "ShapeCategories", { enumerable: true, get: funct
 Object.defineProperty(exports, "ShapeType", { enumerable: true, get: function () { return ShapeTypes_1.ShapeType; } });
 var unit_converter_1 = __webpack_require__(11);
 Object.defineProperty(exports, "UnitConverter", { enumerable: true, get: function () { return unit_converter_1.UnitConverter; } });
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 Object.defineProperty(exports, "Browser", { enumerable: true, get: function () { return browser_1.Browser; } });
 var Settings_1 = __webpack_require__(28);
 Object.defineProperty(exports, "AutoZoomMode", { enumerable: true, get: function () { return Settings_1.AutoZoomMode; } });
 var DataLayoutParameters_1 = __webpack_require__(103);
 Object.defineProperty(exports, "DataLayoutType", { enumerable: true, get: function () { return DataLayoutParameters_1.DataLayoutType; } });
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 Object.defineProperty(exports, "DataLayoutOrientation", { enumerable: true, get: function () { return LayoutSettings_1.DataLayoutOrientation; } });
 __webpack_require__(387);
 var ConnectorProperties_1 = __webpack_require__(30);
@@ -15827,7 +15874,7 @@ exports.ShapeImageIndicator = void 0;
 var EllipsePrimitive_1 = __webpack_require__(54);
 var PathPrimitive_1 = __webpack_require__(5);
 var GroupPrimitive_1 = __webpack_require__(40);
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var RectaglePrimitive_1 = __webpack_require__(21);
 var unit_converter_1 = __webpack_require__(11);
 var ShapeImageIndicator = /** @class */ (function () {
@@ -16624,7 +16671,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoLayoutTreeVerticalCommand = void 0;
 var AutoLayoutCommandBase_1 = __webpack_require__(75);
 var WideTree_1 = __webpack_require__(97);
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var AutoLayoutTreeVerticalCommand = /** @class */ (function (_super) {
     __extends(AutoLayoutTreeVerticalCommand, _super);
     function AutoLayoutTreeVerticalCommand() {
@@ -16724,7 +16771,7 @@ exports.GraphLayout = GraphLayout;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutBuilder = void 0;
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var LayoutBuilder = /** @class */ (function () {
     function LayoutBuilder(settings, graph) {
         this.settings = settings;
@@ -17051,7 +17098,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoLayoutLayeredHorizontalCommand = void 0;
 var AutoLayoutCommandBase_1 = __webpack_require__(75);
 var Sugiyama_1 = __webpack_require__(79);
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var AutoLayoutLayeredHorizontalCommand = /** @class */ (function (_super) {
     __extends(AutoLayoutLayeredHorizontalCommand, _super);
     function AutoLayoutLayeredHorizontalCommand() {
@@ -17093,7 +17140,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoLayoutTreeHorizontalCommand = void 0;
 var AutoLayoutCommandBase_1 = __webpack_require__(75);
 var WideTree_1 = __webpack_require__(97);
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var AutoLayoutTreeHorizontalCommand = /** @class */ (function (_super) {
     __extends(AutoLayoutTreeHorizontalCommand, _super);
     function AutoLayoutTreeHorizontalCommand() {
@@ -17136,7 +17183,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoLayoutLayeredVerticalCommand = void 0;
 var AutoLayoutCommandBase_1 = __webpack_require__(75);
 var Sugiyama_1 = __webpack_require__(79);
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var AutoLayoutLayeredVerticalCommand = /** @class */ (function (_super) {
     __extends(AutoLayoutLayeredVerticalCommand, _super);
     function AutoLayoutLayeredVerticalCommand() {
@@ -20329,7 +20376,7 @@ exports.EncodeUtils = EncodeUtils;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var common_1 = __webpack_require__(34);
 var TouchUtils = (function () {
     function TouchUtils() {
@@ -20436,7 +20483,7 @@ module.exports = {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var base64_1 = __webpack_require__(83);
 var common_1 = __webpack_require__(34);
 var FileUtils = (function () {
@@ -26455,7 +26502,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasExportManager = void 0;
 var unit_converter_1 = __webpack_require__(11);
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var Utils_1 = __webpack_require__(17);
 var CanvasManagerBase_1 = __webpack_require__(43);
 var RenderHelper_1 = __webpack_require__(15);
@@ -26959,7 +27006,7 @@ var Connector_1 = __webpack_require__(6);
 var AddConnectorHistoryItem_1 = __webpack_require__(64);
 var AddConnectionHistoryItem_1 = __webpack_require__(49);
 var Sugiyama_1 = __webpack_require__(79);
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var ExportImportCommandBase_1 = __webpack_require__(56);
 var ImportBPMNCommand = /** @class */ (function (_super) {
     __extends(ImportBPMNCommand, _super);
@@ -29137,7 +29184,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoLayoutTreeVerticalBottomToTopCommand = void 0;
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var AutoLayoutTreeVerticalCommand_1 = __webpack_require__(138);
 var AutoLayoutTreeVerticalBottomToTopCommand = /** @class */ (function (_super) {
     __extends(AutoLayoutTreeVerticalBottomToTopCommand, _super);
@@ -29175,7 +29222,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoLayoutTreeHorizontalRightToLeftCommand = void 0;
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var AutoLayoutTreeHorizontalCommand_1 = __webpack_require__(144);
 var AutoLayoutTreeHorizontalRightToLeftCommand = /** @class */ (function (_super) {
     __extends(AutoLayoutTreeHorizontalRightToLeftCommand, _super);
@@ -29213,7 +29260,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoLayoutLayeredVerticalBottomToTopCommand = void 0;
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var AutoLayoutLayeredVerticalCommand_1 = __webpack_require__(145);
 var AutoLayoutLayeredVerticalBottomToTopCommand = /** @class */ (function (_super) {
     __extends(AutoLayoutLayeredVerticalBottomToTopCommand, _super);
@@ -29251,7 +29298,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoLayoutLayeredHorizontalRightToLeftCommand = void 0;
-var LayoutSettings_1 = __webpack_require__(19);
+var LayoutSettings_1 = __webpack_require__(20);
 var AutoLayoutLayeredHorizontalCommand_1 = __webpack_require__(143);
 var AutoLayoutLayeredHorizontalRightToLeftCommand = /** @class */ (function (_super) {
     __extends(AutoLayoutLayeredHorizontalRightToLeftCommand, _super);
@@ -29318,7 +29365,7 @@ exports.ChangeConnectorRoutingModeCommand = ChangeConnectorRoutingModeCommand;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DiagramControl = void 0;
 var point_1 = __webpack_require__(1);
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var ModelManipulator_1 = __webpack_require__(302);
 var CommandManager_1 = __webpack_require__(81);
 var EventManager_1 = __webpack_require__(303);
@@ -29435,7 +29482,7 @@ var DiagramControl = /** @class */ (function () {
             this.render = undefined;
         }
     };
-    DiagramControl.prototype.createDocument = function (parent, scrollView) {
+    DiagramControl.prototype.createDocument = function (parent, scrollView, focusElementsParent) {
         if (!this.measurer)
             this.initMeasurer(parent);
         if (this.render)
@@ -29455,7 +29502,7 @@ var DiagramControl = /** @class */ (function () {
                 autoZoom: this.settings.autoZoom,
                 rectangle: this.model.getRectangle(true),
                 isTouchUIEnabled: this.isTouchUIEnabled
-            }, scrollView);
+            }, scrollView, focusElementsParent);
             this.createRenderManagerDragEventsHandler().attach(this.render);
             this.settings.onZoomChanged.add(this.render.view);
             this.settings.onViewChanged.add(this.render.page);
@@ -32719,7 +32766,7 @@ var Event_1 = __webpack_require__(14);
 var key_1 = __webpack_require__(26);
 var batch_updatable_1 = __webpack_require__(80);
 var ModelUtils_1 = __webpack_require__(4);
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var SELECTION_CHANGED_EVENT = 1;
 var ContextMenuHandler = /** @class */ (function (_super) {
     __extends(ContextMenuHandler, _super);
@@ -34194,7 +34241,7 @@ var READONLY_CSSCLASS = "dxdi-read-only";
 exports.LONG_TOUCH_TIMEOUT = 500;
 exports.DBL_CLICK_TIMEOUT = 500;
 var RenderManager = /** @class */ (function () {
-    function RenderManager(parent, events, measurer, settings, scrollView) {
+    function RenderManager(parent, events, measurer, settings, scrollView, focusElementsParent) {
         this.touchPositionLimit = 4;
         var mainElement = RenderHelper_1.RenderHelper.createMainElement(parent);
         this.svgElement = RenderHelper_1.RenderHelper.createSvgElement(mainElement);
@@ -34202,7 +34249,7 @@ var RenderManager = /** @class */ (function () {
         this.measurer = measurer;
         this.dom = new DOMManipulator_1.DOMManipulator(this.measurer);
         this.view = new CanvasViewManager_1.CanvasViewManager(this.scroll, this.svgElement, settings.modelSize, settings.zoomLevel, settings.autoZoom, settings.simpleView, settings.rectangle, this.dom);
-        this.input = new InputManager_1.InputManager(mainElement, this.view, events, this.measurer, settings.zoomLevel, settings.isTouchUIEnabled);
+        this.input = new InputManager_1.InputManager(mainElement, this.view, events, this.measurer, settings.zoomLevel, settings.isTouchUIEnabled, focusElementsParent);
         this.items = new CanvasItemsManager_1.CanvasItemsManager(this.view.canvasElement, settings.zoomLevel, this.dom);
         this.page = new CanvasPageManager_1.CanvasPageManager(this.view.pageElement, settings, this.dom);
         this.selection = new CanvasSelectionManager_1.CanvasSelectionManager(this.view.canvasElement, settings.zoomLevel, settings.readOnly, this.dom, settings.isTouchUIEnabled);
@@ -34619,23 +34666,25 @@ var Shape_1 = __webpack_require__(13);
 var Connector_1 = __webpack_require__(6);
 var evt_1 = __webpack_require__(60);
 var ITextMeasurer_1 = __webpack_require__(44);
-var browser_1 = __webpack_require__(20);
+var browser_1 = __webpack_require__(19);
 var unit_converter_1 = __webpack_require__(11);
 var RenderHelper_1 = __webpack_require__(15);
 var TextUtils_1 = __webpack_require__(63);
+var Utils_2 = __webpack_require__(3);
 var TEXT_INPUT_CSSCLASS = "dxdi-text-input";
 var InputManager = /** @class */ (function () {
-    function InputManager(mainElement, layoutPointResolver, eventManager, textMeasurer, actualZoom, isTouchUIEnabled) {
+    function InputManager(mainElement, layoutPointResolver, eventManager, textMeasurer, actualZoom, isTouchUIEnabled, focusElementsParent) {
         this.mainElement = mainElement;
         this.layoutPointResolver = layoutPointResolver;
         this.eventManager = eventManager;
         this.textMeasurer = textMeasurer;
         this.actualZoom = actualZoom;
         this.isTouchUIEnabled = isTouchUIEnabled;
+        this.focusElementsParent = focusElementsParent;
         this.lockedCaptureFocus = false;
         this.focused = false;
         this.focusLocked = false;
-        this.createInputElements(this.mainElement);
+        this.createInputElements(this.mainElement, this.focusElementsParent);
     }
     InputManager.prototype.detachEvents = function () {
         this.detachInputElementEvents();
@@ -34652,13 +34701,11 @@ var InputManager = /** @class */ (function () {
     };
     InputManager.prototype.captureFocus = function () {
         if (!this.lockedCaptureFocus)
-            this.inputElement.focus({ preventScroll: true });
+            Utils_2.HtmlFocusUtils.focusWithPreventScroll(this.inputElement);
     };
     InputManager.prototype.setClipboardData = function (data) {
         this.clipboardInputElement.value = data;
-        this.clipboardInputElement.focus({
-            preventScroll: true
-        });
+        Utils_2.HtmlFocusUtils.focusWithPreventScroll(this.clipboardInputElement);
         this.clipboardInputElement.select();
         document.execCommand("copy");
         this.captureFocus();
@@ -34675,9 +34722,7 @@ var InputManager = /** @class */ (function () {
             });
         else if (browser_1.Browser.IE) {
             this.clipboardInputElement.value = "";
-            this.clipboardInputElement.focus({
-                preventScroll: true
-            });
+            Utils_2.HtmlFocusUtils.focusWithPreventScroll(this.clipboardInputElement);
             this.clipboardInputElement.select();
             document.execCommand("Paste");
             callback(this.clipboardInputElement.value);
@@ -34687,10 +34732,10 @@ var InputManager = /** @class */ (function () {
     InputManager.prototype.isPasteSupportedByBrowser = function () {
         return browser_1.Browser.IE || (browser_1.Browser.WebKitFamily && navigator && navigator["clipboard"] !== undefined);
     };
-    InputManager.prototype.createInputElements = function (parent) {
-        this.createFocusInputElement(parent);
+    InputManager.prototype.createInputElements = function (parent, focusElementsParent) {
+        this.createFocusInputElement(focusElementsParent || parent);
         this.createTextInputElement(parent);
-        this.createClipboardInputElement(parent);
+        this.createClipboardInputElement(focusElementsParent || parent);
         this.attachInputElementEvents();
     };
     InputManager.prototype.setInputElementFocusHandlerMode = function () {
@@ -34705,7 +34750,7 @@ var InputManager = /** @class */ (function () {
         this.updateTextInputPadding();
         if (!this.lockedCaptureFocus) {
             var element = this.textInputElement || this.inputElement;
-            element.focus({ preventScroll: true });
+            Utils_2.HtmlFocusUtils.focusWithPreventScroll(element);
             if (element.select)
                 element.select();
         }
@@ -34841,7 +34886,7 @@ var InputManager = /** @class */ (function () {
         Utils_1.raiseEvent(evt, this.getDiagramKeyboardEvent(evt), function (e) { return _this.eventManager.onKeyDown(e); });
     };
     InputManager.prototype.onInputKeyPress = function (evt) {
-        if (evt.preventDefault)
+        if (evt.preventDefault && !(browser_1.Browser.Safari && evt.code === "KeyV"))
             evt.preventDefault(); // prevent page scroll because of hidden textarea
     };
     InputManager.prototype.onInputKeyUp = function (evt) {
@@ -40573,6 +40618,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolboxTouchDragEventsHandler = void 0;
+var Utils_1 = __webpack_require__(3);
 var ToolboxDragEventsHandlerBase_1 = __webpack_require__(105);
 var ToolboxTouchDragEventsHandler = /** @class */ (function (_super) {
     __extends(ToolboxTouchDragEventsHandler, _super);
@@ -40607,7 +40653,7 @@ var ToolboxTouchDragEventsHandler = /** @class */ (function (_super) {
         _super.prototype.detach.call(this);
     };
     ToolboxTouchDragEventsHandler.prototype.onDownCore = function (evt) {
-        this.manager.mainElement.focus();
+        Utils_1.HtmlFocusUtils.focusWithPreventScroll(this.manager.mainElement);
         this.manager.startTouchDragging();
     };
     ToolboxTouchDragEventsHandler.prototype.onElementTouchMove = function (evt) {
@@ -40644,6 +40690,7 @@ exports.ToolboxPointerDragEventsHandler = void 0;
 var dom_1 = __webpack_require__(23);
 var ToolboxDragEventsHandlerBase_1 = __webpack_require__(105);
 var IDragEventsHandler_1 = __webpack_require__(161);
+var Utils_1 = __webpack_require__(3);
 var ToolboxPointerDragEventsHandler = /** @class */ (function (_super) {
     __extends(ToolboxPointerDragEventsHandler, _super);
     function ToolboxPointerDragEventsHandler() {
@@ -40679,7 +40726,7 @@ var ToolboxPointerDragEventsHandler = /** @class */ (function (_super) {
         _super.prototype.detach.call(this);
     };
     ToolboxPointerDragEventsHandler.prototype.onDownCore = function (evt) {
-        this.manager.mainElement.focus();
+        Utils_1.HtmlFocusUtils.focusWithPreventScroll(this.manager.mainElement);
         if (this.isTouchEvent(evt))
             this.manager.startTouchDragging();
     };