dxDiagram - fix bubble mousedown events, scrollbar (T1305123, T1304998) (#31152)

Author: romanresh

apps/demos/testing/etalons/Diagram-ItemSelection (fluent.blue.light).png

@@ -47,6 +47,7 @@ const DIAGRAM_FLOATING_TOOLBAR_CONTAINER_CLASS = DIAGRAM_CLASS + '-floating-tool
 const DIAGRAM_PROPERTIES_PANEL_TOOLBAR_CONTAINER_CLASS = DIAGRAM_CLASS + '-properties-panel-toolbar-container';
 const DIAGRAM_LOADING_INDICATOR_CLASS = DIAGRAM_CLASS + '-loading-indicator';
 const DIAGRAM_FLOATING_PANEL_OFFSET = 12;
+const DIAGRAM_PROPERTIES_PANEL_NS_OFFSET = 16;
 
 const DIAGRAM_DEFAULT_UNIT = 'in';
 const DIAGRAM_DEFAULT_ZOOMLEVEL = 1;
@@ -474,21 +475,22 @@ class Diagram extends Widget {
     }
     _updatePropertiesToolbarPosition($container, $parent, isServerSide) {
         if(isServerSide) return;
-
+        const offset = this.option('useNativeScrolling') ? DIAGRAM_PROPERTIES_PANEL_NS_OFFSET : DIAGRAM_FLOATING_PANEL_OFFSET;
         positionUtils.setup($container, {
             my: 'right bottom',
             at: 'right bottom',
             of: $parent,
-            offset: '-' + DIAGRAM_FLOATING_PANEL_OFFSET + ' -' + DIAGRAM_FLOATING_PANEL_OFFSET
+            offset: `-${offset}px -${offset}px`
         });
     }
     _renderPropertiesPanel($parent) {
         const isServerSide = !hasWindow();
         const $propertiesPanel = $('<div>')
             .appendTo($parent);
 
-        const offsetX = DIAGRAM_FLOATING_PANEL_OFFSET;
-        const offsetY = 2 * DIAGRAM_FLOATING_PANEL_OFFSET + (!isServerSide ? getOuterHeight(this._propertiesToolbar.$element()) : 0);
+        const offset = this.option('useNativeScrolling') ? DIAGRAM_PROPERTIES_PANEL_NS_OFFSET : DIAGRAM_FLOATING_PANEL_OFFSET;
+        const offsetX = offset;
+        const offsetY = 2 * offset + (!isServerSide ? getOuterHeight(this._propertiesToolbar.$element()) : 0);
         this._propertiesPanel = this._createComponent($propertiesPanel, DiagramPropertiesPanel, {
             isMobileView: this.isMobileScreenSize(),
             isVisible: this._isPropertiesPanelVisible(),

apps/demos/testing/etalons/Diagram-ItemSelection (material.blue.light).png

@@ -333,8 +333,8 @@ QUnit.module('Options', {
         assert.equal(this.instance._diagramInstance.model.units, 0);
     });
     test('should change pageSize property', function(assert) {
-        assert.equal(this.instance._diagramInstance.model.pageSize.width, 8391);
-        assert.equal(this.instance._diagramInstance.model.pageSize.height, 11906);
+        assert.equal(this.instance._diagramInstance.model.pageSize.width, 8400);
+        assert.equal(this.instance._diagramInstance.model.pageSize.height, 11910);
         this.instance.option('pageSize', { width: 3, height: 5 });
         assert.equal(this.instance._diagramInstance.model.pageSize.width, 4320);
         assert.equal(this.instance._diagramInstance.model.pageSize.height, 7200);
@@ -351,8 +351,8 @@ QUnit.module('Options', {
         assert.equal(this.onOptionChanged.getCalls().length, 3); // +hasChanges
     });
     test('should change pageSize object property', function(assert) {
-        assert.equal(this.instance._diagramInstance.model.pageSize.width, 8391);
-        assert.equal(this.instance._diagramInstance.model.pageSize.height, 11906);
+        assert.equal(this.instance._diagramInstance.model.pageSize.width, 8400);
+        assert.equal(this.instance._diagramInstance.model.pageSize.height, 11910);
         assert.equal(this.instance._diagramInstance.settings.pageSizeItems.length, 11);
         this.instance.option('pageSize', { width: 3, height: 5, items: [{ width: 3, height: 5, text: 'A10' }] });
         assert.equal(this.instance._diagramInstance.model.pageSize.width, 4320);
@@ -752,8 +752,8 @@ QUnit.module('Options (initially set)', {
 
         assert.ok(instance._diagramInstance.settings.readOnly);
         assert.equal(instance._diagramInstance.model.pageColor, -1); // FFFFFF
-        assert.equal(instance._diagramInstance.model.pageSize.width, 8391);
-        assert.equal(instance._diagramInstance.model.pageSize.height, 11906);
+        assert.equal(instance._diagramInstance.model.pageSize.width, 8400);
+        assert.equal(instance._diagramInstance.model.pageSize.height, 11910);
         assert.ok(instance._diagramInstance.settings.snapToGrid);
     });
 });

apps/demos/testing/etalons/Diagram-ItemSelection.png

@@ -5,6 +5,6 @@ packages:
   - 'packages/devextreme/artifacts/npm/devextreme-dist'
 
 catalog:
-  devexpress-diagram: 2.2.19
+  devexpress-diagram: 2.2.24
   devexpress-gantt: 4.1.62
   devextreme-quill: 1.7.4