devexpress-diagram 2.1.43 → 2.1.44

package/dist/dx-diagram.css

@@ -1,9 +1,9 @@
 /*!
  * DevExpress Diagram (dx-diagram)
- * Version: 2.1.43
- * Build date: Wed Dec 29 2021
+ * Version: 2.1.44
+ * Build date: Wed Jan 12 2022
  * 
- * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
+ * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
  */
 .dxdi-control {

package/dist/dx-diagram.js

@@ -1,9 +1,9 @@
 /*!
  * DevExpress Diagram (dx-diagram)
- * Version: 2.1.43
- * Build date: Wed Dec 29 2021
+ * Version: 2.1.44
+ * Build date: Wed Jan 12 2022
  * 
- * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
+ * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3912,11 +3912,10 @@ var DiagramMouseEventBase = /** @class */ (function (_super) {
 exports.DiagramMouseEventBase = DiagramMouseEventBase;
 var DiagramMouseEvent = /** @class */ (function (_super) {
     __extends(DiagramMouseEvent, _super);
-    function DiagramMouseEvent(modifiers, button, pagePoint, offsetPoint, modelPoint, source, touches, pointerType) {
+    function DiagramMouseEvent(modifiers, button, offsetPoint, modelPoint, source, touches, pointerType) {
         if (touches === void 0) { touches = []; }
         var _this = _super.call(this, modifiers, offsetPoint, modelPoint, source) || this;
         _this.button = button;
-        _this.pagePoint = pagePoint;
         _this.touches = touches;
         _this.pointerType = pointerType;
         _this.scrollX = 0;
@@ -3944,13 +3943,6 @@ var DiagramMouseEvent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DiagramMouseEvent.prototype.clone = function () {
-        return new DiagramMouseEvent(this.modifiers, this.button, this.pagePoint.clone(), this.offsetPoint.clone(), this.modelPoint.clone(), this.source, this.cloneTouches(), this.pointerType);
-    };
-    DiagramMouseEvent.prototype.cloneTouches = function () {
-        if (common_1.isDefined(this.touches))
-            return this.touches.map(function (t) { return new DiagramMouseEventTouch(t.offsetPoint.clone(), t.modelPoint.clone()); });
-    };
     return DiagramMouseEvent;
 }(DiagramMouseEventBase));
 exports.DiagramMouseEvent = DiagramMouseEvent;
@@ -17870,10 +17862,6 @@ var MouseHandlerDragDiagramItemStateBase = /** @class */ (function (_super) {
     };
     MouseHandlerDragDiagramItemStateBase.prototype.onMouseMove = function (evt) {
         this.mouseMoveEvent = evt;
-        if (evt.button !== Event_1.MouseButton.Left) {
-            this.cancelChanges();
-            this.handler.switchToDefaultState();
-        }
         if (!this.canApplyChangesOnMouseMove(this.startPoint, evt.modelPoint))
             return;
         if (this.handler.canCopySelectedItems(evt))
@@ -17887,6 +17875,8 @@ var MouseHandlerDragDiagramItemStateBase = /** @class */ (function (_super) {
         this.onApplyChanges(evt);
         this.onAfterApplyChanges();
         this.updateContainers(evt);
+        if (evt.button !== Event_1.MouseButton.Left)
+            this.handler.switchToDefaultState();
     };
     MouseHandlerDragDiagramItemStateBase.prototype.updateContainers = function (evt) {
         this.visualizerManager.setExtensionLines(this.selection.getSelectedShapes(false, true));
@@ -30662,9 +30652,6 @@ var EventManager = /** @class */ (function () {
             this.control.captureFocus();
         }
     };
-    EventManager.prototype.onDragOverFromToolbox = function (evt) {
-        this.mouseHandler.onMouseMove(evt);
-    };
     EventManager.prototype.onDragEndFromToolbox = function (evt) {
         if (this.draggingEvent) {
             delete this.draggingEvent;
@@ -34380,58 +34367,57 @@ var RenderManager = /** @class */ (function () {
         this.selection.clear();
     };
     RenderManager.prototype.onMouseEnter = function (evt) {
-        var diagramEvt = this.createDiagramMouseEvent(evt, this.getEventSourceByEvent(evt));
+        var diagramEvt = this.createInnerDiagramMouseEvent(evt, this.getEventSourceByEvent(evt));
         this.events.onMouseEnter(diagramEvt);
         this.preventEvent(evt, diagramEvt);
     };
     RenderManager.prototype.onMouseLeave = function (evt) {
-        var diagramEvt = this.createDiagramMouseEvent(evt, this.getEventSourceByEvent(evt));
+        var diagramEvt = this.createInnerDiagramMouseEvent(evt, this.getEventSourceByEvent(evt));
         this.stopScrolling();
         this.events.onMouseLeave(diagramEvt);
         this.preventEvent(evt, diagramEvt);
     };
     RenderManager.prototype.onMouseDown = function (evt) {
         this.lastDownMouseElement = this.getEventSourceByEvent(evt);
-        this.lastDownMouseEvent = this.createDiagramMouseEvent(evt, this.lastDownMouseElement);
+        this.lastDownMouseEvent = this.createInnerDiagramMouseEvent(evt, this.lastDownMouseElement);
         this.onMouseDownCore(this.lastDownMouseEvent);
         this.preventEvent(evt, this.lastDownMouseEvent);
     };
     RenderManager.prototype.onTouchDown = function (evt) {
         this.lastDownMouseElement = this.getEventSourceByEvent(evt);
-        this.lastDownMouseEvent = this.createDiagramMouseEvent(evt, this.lastDownMouseElement);
+        this.lastDownMouseEvent = this.createInnerDiagramMouseEvent(evt, this.lastDownMouseElement);
         this.onMouseDownCore(this.lastDownMouseEvent);
         this.emulateLongTouchEvent(this.lastDownMouseEvent);
         this.preventEvent(evt, this.lastDownMouseEvent);
     };
     RenderManager.prototype.onMouseMove = function (evt) {
-        var diagramEvt = this.createDiagramMouseEvent(evt, this.getEventSourceByEvent(evt));
-        this.onMoveCore(diagramEvt);
+        this.onBeforeMouseMove();
+        var diagramEvt = common_1.isDefined(this.toolboxDraggingObject) ?
+            this.onDragFromToolbox(evt, this.getEventSourceByEvent(evt)) :
+            this.onInnerMove(evt, this.getEventSourceByEvent(evt));
         this.preventEvent(evt, diagramEvt);
     };
     RenderManager.prototype.onTouchMove = function (evt) {
-        var diagramEvt = this.createDiagramMouseEvent(evt, this.getEventSourceByPosition(evt));
-        this.onMoveCore(diagramEvt);
-        this.preventEvent(evt, diagramEvt);
-        if (this.lastDownMouseEvent) {
-            var offsetPoint = diagramEvt.actualOffsetPoint;
-            var startOffsetPoint = this.lastDownMouseEvent.actualOffsetPoint;
-            if (startOffsetPoint && offsetPoint)
-                if ((Math.abs(startOffsetPoint.x - offsetPoint.x) > this.touchPositionLimit ||
-                    Math.abs(startOffsetPoint.y - offsetPoint.y) > this.touchPositionLimit))
-                    this.resetTimers();
+        this.onBeforeMouseMove();
+        if (common_1.isDefined(this.toolboxDraggingObject))
+            this.preventEvent(evt, this.onDragFromToolbox(evt, this.getEventSourceByPosition(evt)));
+        else {
+            var diagramEvt = this.onInnerMove(evt, this.getEventSourceByPosition(evt));
+            this.onAfterTouchMove(diagramEvt);
+            this.preventEvent(evt, diagramEvt);
         }
     };
     RenderManager.prototype.onMouseUp = function (evt) {
         this.stopScrolling();
         if (common_1.isDefined(this.lastDownMouseEvent)) {
-            var diagramEvt = this.createDiagramMouseEvent(evt, this.lastDownMouseElement);
+            var diagramEvt = this.createInnerDiagramMouseEvent(evt, this.lastDownMouseElement);
             this.preventDiagramEventByImage(this.lastDownMouseElement, diagramEvt);
             this.events.onMouseUp(diagramEvt);
             this.emulateClickEvents(diagramEvt);
             this.preventEvent(evt, diagramEvt);
         }
         else {
-            var diagramEvt = this.createDiagramMouseEvent(evt, this.getEventSourceByEvent(evt));
+            var diagramEvt = this.createInnerDiagramMouseEvent(evt, this.getEventSourceByEvent(evt));
             this.events.onMouseUp(diagramEvt);
             this.resetTimers();
             this.preventEvent(evt, diagramEvt);
@@ -34513,12 +34499,12 @@ var RenderManager = /** @class */ (function () {
         var scrollContainer = this.getScrollContainer();
         return new point_1.Point(dom_1.DomUtils.getAbsolutePositionX(scrollContainer) + pos.x, dom_1.DomUtils.getAbsolutePositionY(scrollContainer) + pos.y);
     };
-    RenderManager.prototype.hasDiagramPoint = function (evt) {
-        if (!this.diagramRectangle)
+    RenderManager.prototype.hasViewPoint = function (pagePoint) {
+        if (!this.viewRectangle)
             return false;
-        var x = evt.pagePoint.x - this.diagramRectangle.x;
-        var y = evt.pagePoint.y - this.diagramRectangle.y;
-        return x >= 0 && y >= 0 && x <= this.diagramRectangle.width && y <= this.diagramRectangle.height;
+        var x = pagePoint.x - this.viewRectangle.x;
+        var y = pagePoint.y - this.viewRectangle.y;
+        return x >= 0 && y >= 0 && x <= this.viewRectangle.width && y <= this.viewRectangle.height;
     };
     RenderManager.prototype.attachEvents = function () {
         this.onMouseWheelHandler = this.onMouseWheel.bind(this);
@@ -34549,57 +34535,65 @@ var RenderManager = /** @class */ (function () {
         this.captureFocus(this.events.canFinishTextEditing());
         this.preventDiagramEvent(evt);
     };
-    RenderManager.prototype.onMoveCore = function (evt) {
-        if (!common_1.isDefined(this.diagramRectangle))
-            this.diagramRectangle = this.createDiagramRectangle();
+    RenderManager.prototype.onBeforeMouseMove = function () {
+        if (this.isStartedDrag)
+            return;
+        if (!common_1.isDefined(this.viewRectangle))
+            this.viewRectangle = this.createViewRectangle();
         if (!common_1.isDefined(this.toolboxDraggingObject))
             this.toolboxDraggingObject = this.events.getToolboxDraggingObject();
-        if (common_1.isDefined(this.toolboxDraggingObject))
-            this.onDragFromToolbox(evt);
-        else
-            this.onInnerMove(evt);
     };
-    RenderManager.prototype.onDragFromToolbox = function (evt) {
+    RenderManager.prototype.onAfterTouchMove = function (diagramEvt) {
+        if (this.lastDownMouseEvent) {
+            var offsetPoint = diagramEvt.actualOffsetPoint;
+            var startOffsetPoint = this.lastDownMouseEvent.actualOffsetPoint;
+            if (startOffsetPoint && offsetPoint)
+                if ((Math.abs(startOffsetPoint.x - offsetPoint.x) > this.touchPositionLimit ||
+                    Math.abs(startOffsetPoint.y - offsetPoint.y) > this.touchPositionLimit))
+                    this.resetTimers();
+        }
+    };
+    RenderManager.prototype.onDragFromToolbox = function (evt, element) {
         var _this = this;
-        if (!common_1.isDefined(evt.source) || evt.source.type <= 1)
-            evt.source = new Event_1.MouseEventSource(this.getMouseEventElementTypeFromToolbox(evt));
-        if (evt.button !== Event_1.MouseButton.Left) {
+        if (!Utils_1.isLeftButtonPressed(evt)) {
             this.stopScrolling();
-            this.events.onDragEndFromToolbox(evt);
+            var diagramEvt = this.createDiagramMouseEventFromToolbox(evt, element);
+            this.events.onDragEndFromToolbox(diagramEvt);
             this.resetTimers();
             this.clearDrag();
-            return;
+            return diagramEvt;
         }
         if (this.isStartedDrag) {
-            this.continueScrolling(evt, function () { return _this.events.onDragOverFromToolbox(evt); });
-            this.events.onDragOverFromToolbox(evt);
-            return;
+            this.continueScrolling(evt, function () { return _this.onMouseMoveCore(_this.createDiagramMouseEventFromToolbox(evt, element)); });
+            var diagramEvt = this.createDiagramMouseEventFromToolbox(evt, element);
+            this.onMouseMoveCore(diagramEvt);
+            return diagramEvt;
         }
         this.isStartedDrag = true;
         setTimeout(function () { return _this.startScrolling(); }, START_SCROLLING_TIMEOUT);
         this.events.onDragStartFromToolbox(this.toolboxDraggingObject.evt);
     };
-    RenderManager.prototype.onInnerMove = function (evt) {
+    RenderManager.prototype.onInnerMove = function (evt, element) {
         var _this = this;
-        if (!common_1.isDefined(this.lastDownMouseEvent)) {
+        if (!common_1.isDefined(this.lastDownMouseEvent))
             this.stopScrolling();
-            this.events.onMouseMove(evt);
-            return;
-        }
-        if (!this.isStartedDrag) {
+        else if (!this.isStartedDrag) {
             this.isStartedDrag = true;
             setTimeout(function () { return _this.startScrolling(); }, START_SCROLLING_TIMEOUT);
-            this.events.onMouseMove(evt);
-            return;
         }
-        if (evt.button === Event_1.MouseButton.Left) {
-            this.continueScrolling(evt, function () { return _this.events.onMouseMove(evt); });
-            this.events.onMouseMove(evt);
-            return;
+        else if (Utils_1.isLeftButtonPressed(evt))
+            this.continueScrolling(evt, function () { return _this.onMouseMoveCore(_this.createInnerDiagramMouseEvent(evt, element)); });
+        else {
+            this.stopScrolling();
+            this.resetTimers();
+            this.clearDrag();
         }
-        this.stopScrolling();
-        this.resetTimers();
-        this.clearDrag();
+        var diagramEvt = this.createInnerDiagramMouseEvent(evt, element);
+        this.onMouseMoveCore(diagramEvt);
+        return diagramEvt;
+    };
+    RenderManager.prototype.onMouseMoveCore = function (evt) {
+        this.events.onMouseMove(evt);
     };
     RenderManager.prototype.emulateLongTouchEvent = function (evt) {
         var _this = this;
@@ -34636,7 +34630,7 @@ var RenderManager = /** @class */ (function () {
         delete this.lastDownMouseEvent;
         delete this.lastDownMouseElement;
         delete this.toolboxDraggingObject;
-        delete this.diagramRectangle;
+        delete this.viewRectangle;
         delete this.isStartedDrag;
     };
     RenderManager.prototype.resetTimers = function () {
@@ -34671,7 +34665,7 @@ var RenderManager = /** @class */ (function () {
         evt.preventDefault = true;
     };
     RenderManager.prototype.preventEvent = function (evt, diagramEvt) {
-        diagramEvt.preventEvent(evt);
+        diagramEvt && diagramEvt.preventEvent(evt);
     };
     RenderManager.prototype.startScrolling = function () {
         this.autoScroll.startScrolling(this.svgElement);
@@ -34687,17 +34681,17 @@ var RenderManager = /** @class */ (function () {
         if (can)
             this.input.captureFocus();
     };
-    RenderManager.prototype.createDiagramRectangle = function () {
+    RenderManager.prototype.createViewRectangle = function () {
         var scrollContainer = this.getScrollContainer();
         var size = this.scroll.getSize();
         return new rectangle_1.Rectangle(dom_1.DomUtils.getAbsolutePositionX(scrollContainer), dom_1.DomUtils.getAbsolutePositionY(scrollContainer), size.width, size.height);
     };
     RenderManager.prototype.createRelativePoint = function (evt) {
-        var pagePoint = evt.pagePoint;
-        return new point_1.Point(pagePoint.x - this.diagramRectangle.x, pagePoint.y - this.diagramRectangle.y);
+        var pagePoint = this.createPagePoint(evt);
+        return new point_1.Point(pagePoint.x - this.viewRectangle.x, pagePoint.y - this.viewRectangle.y);
     };
-    RenderManager.prototype.getMouseEventElementTypeFromToolbox = function (evt) {
-        if (this.hasDiagramPoint(evt) && this.toolboxDraggingObject.isLeavedToolbox(evt.offsetPoint))
+    RenderManager.prototype.getMouseEventElementTypeFromToolbox = function (pagePoint, offsetPoint) {
+        if (this.hasViewPoint(pagePoint) && this.toolboxDraggingObject.isLeavedToolbox(offsetPoint))
             return Event_1.MouseEventElementType.Document;
         return Event_1.MouseEventElementType.Undefined;
     };
@@ -34710,12 +34704,30 @@ var RenderManager = /** @class */ (function () {
     RenderManager.prototype.getEventSourceByPosition = function (evt) {
         return evt_1.EvtUtils.getEventSourceByPosition(evt);
     };
-    RenderManager.prototype.createDiagramMouseEvent = function (evt, element) {
+    RenderManager.prototype.createDiagramMouseEventFromToolbox = function (evt, element) {
         var offsetPoint = this.getOffsetPointByEvent(evt);
-        return new Event_1.DiagramMouseEvent(key_1.KeyUtils.getKeyModifiers(evt), Utils_1.isLeftButtonPressed(evt) ? Event_1.MouseButton.Left : Event_1.MouseButton.Right, new point_1.Point(evt.pageX, evt.pageY), offsetPoint, this.view.getModelPoint(offsetPoint), this.getEventSource(element), this.createDiagramMouseEventTouches(evt["touches"]), evt.pointerType);
+        return this.createDiagramMouseEventCore(evt, offsetPoint, this.createEventSourceFromToolbox(evt, offsetPoint, element));
+    };
+    RenderManager.prototype.createEventSourceFromToolbox = function (evt, offsetPoint, element) {
+        var source = this.getEventSource(element);
+        if (!common_1.isDefined(source) || source.type <= 1)
+            return new Event_1.MouseEventSource(this.getMouseEventElementTypeFromToolbox(this.createPagePoint(evt), offsetPoint));
+        return source;
+    };
+    RenderManager.prototype.createInnerDiagramMouseEvent = function (evt, element) {
+        return this.createDiagramMouseEventCore(evt, this.getOffsetPointByEvent(evt), this.getEventSource(element));
+    };
+    RenderManager.prototype.createDiagramMouseEventCore = function (evt, offsetPoint, source) {
+        return new Event_1.DiagramMouseEvent(key_1.KeyUtils.getKeyModifiers(evt), this.createMouseButton(evt), offsetPoint, this.view.getModelPoint(offsetPoint), source, this.createDiagramMouseEventTouches(evt["touches"]), evt.pointerType);
+    };
+    RenderManager.prototype.createMouseButton = function (evt) {
+        return Utils_1.isLeftButtonPressed(evt) ? Event_1.MouseButton.Left : Event_1.MouseButton.Right;
+    };
+    RenderManager.prototype.createPagePoint = function (evt) {
+        return new point_1.Point(evt.pageX, evt.pageY);
     };
     RenderManager.prototype.createDiagramContextMenuEvent = function (evt) {
-        return new Event_1.DiagramContextMenuEvent(key_1.KeyUtils.getKeyModifiers(evt), new point_1.Point(evt.pageX, evt.pageY), this.view.getModelPoint(this.getOffsetPointByEvent(evt)));
+        return new Event_1.DiagramContextMenuEvent(key_1.KeyUtils.getKeyModifiers(evt), this.createPagePoint(evt), this.view.getModelPoint(this.getOffsetPointByEvent(evt)));
     };
     RenderManager.prototype.createDiagramWheelEvent = function (evt) {
         var offsetPoint = this.getOffsetPointByEvent(evt);

package/dist/dx-diagram.min.css

@@ -1,8 +1,8 @@
 /*!
  * DevExpress Diagram (dx-diagram.min)
- * Version: 2.1.43
- * Build date: Wed Dec 29 2021
+ * Version: 2.1.44
+ * Build date: Wed Jan 12 2022
  * 
- * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
+ * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
  */.dxdi-control{overflow:visible;box-sizing:border-box;position:relative}.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll{cursor:grab!important}.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll .shape,.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll .shape-expand-btn,.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll text{cursor:grab}.dxdi-control.dxdi-read-only .dxdi-canvas .shape,.dxdi-control.dxdi-read-only .dxdi-canvas .shape-expand-btn,.dxdi-control.dxdi-read-only .dxdi-canvas text{cursor:default}.dxdi-control .dxdi-canvas{display:block;background-color:#d9d9d9;transform-origin:0 0;overflow:hidden}.dxdi-canvas.dxdi-drag-scroll{cursor:grab!important}.dxdi-canvas.dxdi-drag-scroll .connection-point,.dxdi-canvas.dxdi-drag-scroll .connector,.dxdi-canvas.dxdi-drag-scroll .connector-side-mark.horizontal,.dxdi-canvas.dxdi-drag-scroll .connector-side-mark.vertical,.dxdi-canvas.dxdi-drag-scroll .connector text,.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="4"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="5"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="1"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="2"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="3"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="4"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="5"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="6"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="7"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="8"],.dxdi-canvas.dxdi-drag-scroll .shape,.dxdi-canvas.dxdi-drag-scroll .shape .shape-expand-btn{cursor:grab}.dxdi-canvas *{user-select:none}.dxdi-canvas text{font-family:arial,helvetica,sans-serif;font-size:10pt}.dxdi-canvas .page{fill:#fff}.dxdi-canvas .pages-grid-line{fill:none;stroke:rgba(0,0,0,.15);stroke-dasharray:8;stroke-width:2}.dxdi-canvas .grid-inner-line,.dxdi-canvas .grid-outer-line{fill:none}.dxdi-canvas .grid-outer-line{stroke:rgba(0,0,0,.1)}.dxdi-canvas .grid-inner-line{stroke:rgba(0,0,0,.05)}.dxdi-canvas .shape,.dxdi-canvas .toolbox-item{pointer-events:bounding-box}.dxdi-canvas .shape ellipse,.dxdi-canvas .shape line,.dxdi-canvas .shape path,.dxdi-canvas .shape rect,.dxdi-canvas .toolbox-item ellipse,.dxdi-canvas .toolbox-item line,.dxdi-canvas .toolbox-item path,.dxdi-canvas .toolbox-item rect{fill:#fff;stroke-width:2;stroke:#000}.dxdi-canvas .shape text,.dxdi-canvas .toolbox-item text{fill:#000;text-anchor:middle}.dxdi-canvas .shape rect.selector,.dxdi-canvas .toolbox-item rect.selector{stroke-width:48;stroke:transparent;fill:transparent;pointer-events:auto}.dxdi-canvas .shape.not-valid ellipse,.dxdi-canvas .shape.not-valid line,.dxdi-canvas .shape.not-valid path,.dxdi-canvas .shape.not-valid rect{stroke:red}.dxdi-canvas .shape{cursor:move}.dxdi-canvas .shape.text-input>text{display:none}.dxdi-canvas .shape.container>rect:first-child{fill:none}.dxdi-canvas .shape .shape-expand-btn{cursor:pointer}.dxdi-canvas .shape .shape-expand-btn>path,.dxdi-canvas .shape .shape-expand-btn>rect{stroke-dasharray:initial!important}.dxdi-canvas .shape .shape-expand-btn>path{stroke-width:2!important}.dxdi-canvas .shape .dxdi-image .dxdi-spinner{animation:loading-spinner 1s linear infinite}.dxdi-canvas .shape .dxdi-image .dxdi-spinner ellipse{stroke:#000;stroke-opacity:.2}.dxdi-canvas .shape .dxdi-image .dxdi-spinner path{stroke:#fd7010;stroke-linecap:round}.dxdi-canvas .shape .dxdi-image .dxdi-spinner ellipse,.dxdi-canvas .shape .dxdi-image .dxdi-spinner path{fill:none;stroke-width:5}@keyframes loading-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.dxdi-canvas .shape .dxdi-image .dxdi-user .dxdi-background{fill:#000;opacity:.2;stroke:none}.dxdi-canvas .shape .dxdi-image .dxdi-user ellipse,.dxdi-canvas .shape .dxdi-image .dxdi-user path{fill:#fff;stroke:none}.dxdi-canvas .shape .dxdi-image .dxdi-warning ellipse{stroke:none;fill:#ee1616}.dxdi-canvas .shape .dxdi-image .dxdi-warning rect{stroke:none;fill:#fff}.dxdi-canvas .shape.locked,.dxdi-canvas .shape.locked+.container-children .shape,.dxdi-canvas .shape.locked+.container-children .shape .shape-expand-btn,.dxdi-canvas .shape.locked .shape-expand-btn{cursor:inherit!important}.dxdi-canvas .container-children .shape .selector{stroke-width:8}.dxdi-canvas .toolbox-item{cursor:pointer}.dxdi-canvas .toolbox-item .selector{stroke-width:0!important}.dxdi-canvas .connector line,.dxdi-canvas .connector path{stroke-width:2;stroke:#000;stroke-linejoin:round;pointer-events:stroke}.dxdi-canvas .connector path:not(.outlined-line-ending):not(.filled-line-ending){fill:none!important}.dxdi-canvas .connector path.outlined-line-ending{fill:#fff}.dxdi-canvas .connector path.filled-line-ending{fill:#000}.dxdi-canvas .connector line.selector,.dxdi-canvas .connector path.selector{stroke-width:16;stroke:transparent}.dxdi-canvas .connector text{cursor:move;fill:#000;text-anchor:middle}.dxdi-canvas .connector .text-filter-flood{flood-color:#fff}.dxdi-canvas .connector.not-valid line,.dxdi-canvas .connector.not-valid path{stroke:red}.dxdi-canvas .connector.can-move{cursor:move}.dxdi-canvas .connection-mark,.dxdi-canvas .connection-point,.dxdi-canvas .connector-point-mark,.dxdi-canvas .connector-side-mark,.dxdi-canvas .geometry-mark,.dxdi-canvas .selection-mark{fill:#fff;stroke-width:2}.dxdi-canvas .selection-mark{stroke:#1e90ff}.dxdi-canvas .selection-mark[data-type="9"][data-value="1"]{cursor:nw-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="2"]{cursor:ne-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="3"]{cursor:se-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="4"]{cursor:sw-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="5"]{cursor:n-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="6"]{cursor:e-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="7"]{cursor:s-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="8"]{cursor:w-resize}.dxdi-canvas .selection-mark[data-type="4"],.dxdi-canvas .selection-mark[data-type="5"]{cursor:move}.dxdi-canvas .locked-selection-mark{fill:#fff;stroke-width:1;stroke:#666}.dxdi-canvas .geometry-mark{cursor:pointer;stroke:#daa520}.dxdi-canvas .connection-target,.dxdi-canvas .container-target{fill:transparent;stroke:orchid;stroke-width:2;pointer-events:none}.dxdi-canvas .connection-point{cursor:crosshair;stroke:orchid}.dxdi-canvas .connection-point.not-valid{stroke:grey;display:none}.dxdi-canvas .connection-mark{cursor:crosshair;stroke:orchid}.dxdi-canvas .connection-mark.selector,.dxdi-canvas .connection-point.selector{stroke-width:10px;stroke:transparent;fill:transparent}.dxdi-canvas .connection-mark.active,.dxdi-canvas .connection-point.active{fill:orchid}.dxdi-canvas .connector-point-mark,.dxdi-canvas .connector-side-mark{cursor:move;stroke:#1e90ff}.dxdi-canvas .connector-point-mark.disabled{cursor:default;display:none}.dxdi-canvas .connector-side-mark{fill:#1e90ff}.dxdi-canvas .connector-side-mark.vertical{cursor:col-resize}.dxdi-canvas .connector-side-mark.horizontal{cursor:row-resize}.dxdi-canvas .item-selection-rect,.dxdi-canvas .items-selection-rect{fill:transparent;stroke-width:1;stroke:#1e90ff;stroke-dasharray:2px;pointer-events:none}.dxdi-canvas .items-selection-rect{fill:rgba(30,144,255,.02)}.dxdi-canvas .item-multi-selection-rect{fill:rgba(30,144,255,.02);stroke-width:1;stroke:#1e90ff;pointer-events:none}.dxdi-canvas .selection-rect{fill:rgba(30,144,255,.2);stroke-width:1;stroke:#1e90ff;pointer-events:none}.dxdi-canvas .connector-multi-selection,.dxdi-canvas .connector-selection{fill:transparent;stroke-width:1;stroke:#1e90ff;pointer-events:none}.dxdi-canvas .connector-multi-selection.text,.dxdi-canvas .connector-selection.text{fill:transparent;stroke-width:1}.dxdi-canvas .connector-selection{stroke-dasharray:2px}.dxdi-canvas .connector-selection-mask rect{fill:#000}.dxdi-canvas .connector-selection-mask rect.background{fill:#fff}.dxdi-canvas .connector-selection-mask line,.dxdi-canvas .connector-selection-mask path{fill:#fff;stroke:#000;stroke-width:4}.dxdi-canvas .connector-selection-mask text{text-anchor:middle}.dxdi-canvas .extension-line path{stroke:#1e90ff;stroke-width:1}.dxdi-canvas .extension-line path.size-line{stroke-dasharray:4px}.dxdi-canvas .extension-line text{fill:#1e90ff;font-size:.8em;text-anchor:middle}.dxdi-canvas .extension-line.center>path.size-line,.dxdi-canvas .extension-line.page>path.size-line{stroke-dasharray:0}.dxdi-canvas .extension-line:not(.center)>path:not(:first-child){display:none}.dxdi-canvas .resize-info text{fill:rgba(0,0,0,.8);font-size:.8em;text-anchor:middle}.dxdi-canvas .resize-info rect{fill:#fff;stroke:rgba(0,0,0,.3);stroke-width:1}.dxdi-canvas .dxdi-active-selection .shape{cursor:default}.dxdi-control:not(.focused) .dxdi-canvas .geometry-mark,.dxdi-control:not(.focused) .dxdi-canvas .selection-mark{stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .item-selection-rect,.dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect{fill:transparent;stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect{fill:hsla(0,0%,56.5%,.02)}.dxdi-control:not(.focused) .dxdi-canvas .item-multi-selection-rect{fill:hsla(0,0%,56.5%,.02);stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .connection-mark,.dxdi-control:not(.focused) .dxdi-canvas .connection-mark.selector,.dxdi-control:not(.focused) .dxdi-canvas .connection-point,.dxdi-control:not(.focused) .dxdi-canvas .connection-point.selector{display:none}.dxdi-control:not(.focused) .dxdi-canvas .connector-multi-selection,.dxdi-control:not(.focused) .dxdi-canvas .connector-point-mark,.dxdi-control:not(.focused) .dxdi-canvas .connector-selection,.dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark{stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark{fill:#666}.dxdi-dragging,.dxdi-dragging *{user-select:none}.dxdi-touch-action{touch-action:none}.dxdi-canvas.export *{cursor:inherit!important;pointer-events:all!important}.dxdi-toolbox,.dxdi-toolbox svg{user-select:none;outline:none}.dxdi-toolbox,.dxdi-toolbox-drag-item .dxdi-canvas,.dxdi-toolbox .dxdi-canvas{width:100%;height:100%}.dxdi-toolbox .dxdi-canvas .toolbox-item ellipse,.dxdi-toolbox .dxdi-canvas .toolbox-item line,.dxdi-toolbox .dxdi-canvas .toolbox-item path,.dxdi-toolbox .dxdi-canvas .toolbox-item rect{fill:transparent;stroke:currentColor}.dxdi-toolbox .dxdi-canvas .toolbox-item .dxdi-image-placeholder{opacity:.75;fill:currentColor;stroke:none}.dxdi-toolbox .dxdi-canvas .toolbox-item .dxdi-shape-text{opacity:.25}.dxdi-toolbox-drag-item .dxdi-canvas text,.dxdi-toolbox .dxdi-canvas .toolbox-item text{font-weight:700;font-family:Segoe UI,Helvetica Neue,Helvetica,arial,sans-serif;fill:currentColor}.dxdi-toolbox-drag-item .dxdi-canvas .dxdi-image-placeholder{opacity:.75;fill:currentColor;stroke:none}.dxdi-toolbox-drag-item .dxdi-canvas .dxdi-shape-text{display:none}.dxdi-toolbox .toolbox-text-item{cursor:pointer;user-select:none;margin:0 0 .6em}.dxdi-toolbox-drag-item,.dxdi-toolbox-drag-text-item{font-family:arial,helvetica,sans-serif;font-size:10pt;color:#000;position:absolute;z-index:10000;pointer-events:none!important}.dxdi-toolbox-drag-item *,.dxdi-toolbox-drag-text-item *{pointer-events:none!important}.dxdi-toolbox-drag-item text{pointer-events:none}.dxdi-toolbox-drag-text-item{background-color:#fff;border:2px solid #000;padding:.5em}.dxdi-tb-drag-captured{display:none}.dxdi-focus-input,.dxdi-text-input,.dxdi-text-input-container{padding:0;outline:none;border:none;resize:none}.dxdi-clipboard-input,.dxdi-focus-input{position:absolute;overflow:hidden;left:-1000px!important;top:-1000px!important;opacity:0}.dxdi-text-input-container{display:none}.dxdi-text-input-container.connector-text,.dxdi-text-input-container.shape-text{display:inherit;position:absolute;overflow:hidden;background-color:transparent;transform-origin:0 0}.dxdi-text-input-container.shape-text .dxdi-text-input{display:table-cell;overflow:hidden;padding:1px 0 0;outline:none;background-color:transparent;font-family:arial,helvetica,sans-serif;font-size:10pt;color:#000;line-height:1.1em;text-align:center;vertical-align:middle}.dxdi-text-input-container.connector-text{overflow:visible}.dxdi-text-input-container.connector-text .dxdi-text-input{padding:2px;outline:none;height:calc(1.1em + 6px);width:calc(8em + 6px);margin-top:calc(-.55em - 3px);margin-left:calc(-4em - 3px);background-color:#fff;border:1px solid #1e90ff;font-family:arial,helvetica,sans-serif;font-size:10pt;color:#000;line-height:1.1em;text-align:center;vertical-align:middle;overflow:hidden}.dxdi-page-shadow{fill:grey}