Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Diagram - the onOptionChanged event isn't raised for the "hasChanges" option if the control is bound (T883021) #12864

Merged
merged 2 commits into from
Apr 24, 2020
Merged

Diagram - the onOptionChanged event isn't raised for the "hasChanges" option if the control is bound (T883021) #12864

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
18273b1
Diagram - the onOptionChanged event isn't raised for the "hasChanges"…
Apr 24, 2020
88e14b4
Fix test
Apr 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion js/ui/diagram/diagram.options_update.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,12 @@ class DiagramOptionsUpdateBar extends DiagramBar {
}
};
this.commandOptions[DiagramCommand.ViewUnits] = 'viewUnits';
this.commandOptions[DiagramCommand.PageSize] = 'pageSize';
this.commandOptions[DiagramCommand.PageSize] = function(value) {
const pageSize = this._getOption('pageSize');
if(pageSize === undefined || pageSize.width !== value.width || pageSize.height !== value.height) {
this._setOption('pageSize', value);
}
};
this.commandOptions[DiagramCommand.PageLandscape] = function(value) {
this._setOption('pageOrientation', value ? 'landscape' : 'portrait');
};
Expand Down
13 changes: 7 additions & 6 deletions js/ui/diagram/ui.diagram.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const DIAGRAM_DEFAULT_UNIT = 'in';
const DIAGRAM_DEFAULT_ZOOMLEVEL = 1;
const DIAGRAM_DEFAULT_AUTOZOOM_MODE = 'disabled';
const DIAGRAM_DEFAULT_PAGE_ORIENTATION = 'portrait';
const DIAGRAM_DEFAULT_PAGE_COLOR = 'white';
const DIAGRAM_DEFAULT_PAGE_COLOR = '#ffffff';

const DIAGRAM_MAX_MOBILE_WINDOW_WIDTH = 576;
const DIAGRAM_TOOLBOX_ITEM_SPACING = 12;
Expand All @@ -73,8 +73,6 @@ class Diagram extends Widget {
this._initDiagram();

this._createCustomCommand();

this.optionsUpdateBar = new DiagramOptionsUpdateBar(this);
}
_initMarkup() {
super._initMarkup();
Expand Down Expand Up @@ -167,8 +165,6 @@ class Diagram extends Widget {
this._updateFullscreenState();
}

this._diagramInstance.registerBar(this.optionsUpdateBar);

if(hasWindow()) {
resizeCallbacks.add(() => {
this._killBrowserResizeTimer();
Expand Down Expand Up @@ -716,6 +712,9 @@ class Diagram extends Widget {
this._updateZoomLevelItemsState();
}

this.optionsUpdateBar = new DiagramOptionsUpdateBar(this);
this._diagramInstance.registerBar(this.optionsUpdateBar);

this._updateCustomShapes(this._getCustomShapes());
this._refreshDataSources();
}
Expand Down Expand Up @@ -2083,7 +2082,9 @@ class Diagram extends Widget {
}

_raiseDataChangeAction() {
this.option('hasChanges', true);
if(this._initialized) {
this.option('hasChanges', true);
}
}
_raiseEdgeInsertedAction(data, callback, errorCallback) {
if(this._edgesOption) {
Expand Down
10 changes: 0 additions & 10 deletions testing/tests/DevExpress.ui.widgets/diagramParts/clientSideEvents.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,14 +81,4 @@ QUnit.module('ClientSideEvents', {
assert.equal(clickedItem.fromKey, '123');
assert.equal(clickedItem.toKey, '345');
});

test('hasChanges changes on import or editing of an unbound diagram', function(assert) {
assert.equal(this.instance.option('hasChanges'), false, 'on init');
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.Import).execute(Consts.SIMPLE_DIAGRAM);
assert.equal(this.instance.option('hasChanges'), true, 'on import');
this.instance.option('hasChanges', false);
this.instance._diagramInstance.selection.set(['107']);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.Bold).execute(true);
assert.equal(this.instance.option('hasChanges'), true, 'on edit');
});
});
104 changes: 103 additions & 1 deletion testing/tests/DevExpress.ui.widgets/diagramParts/options.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,38 @@ import $ from 'jquery';
const { test } = QUnit;
import 'common.css!';
import 'ui/diagram';

import { DiagramCommand, DataLayoutType } from 'devexpress-diagram';
import { Consts } from '../../../helpers/diagramHelpers.js';

const moduleConfig = {
beforeEach: function() {
this.$element = $('#diagram').dxDiagram();
this.onOptionChanged = sinon.spy();
this.$element = $('#diagram').dxDiagram({
onOptionChanged: this.onOptionChanged
});
this.instance = this.$element.dxDiagram('instance');
}
};

const moduleConfigWithBoundDiagram = {
beforeEach: function() {
this.onOptionChanged = sinon.spy();
this.$element = $('#diagram').dxDiagram({
onOptionChanged: this.onOptionChanged,
nodes: {
dataSource: [
{
id: '1',
text: 'text1'
},
{
id: '2',
text: 'text2'
}
]
}
});
this.instance = this.$element.dxDiagram('instance');
}
};
Expand All @@ -28,8 +55,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync zoomLevel property', function(assert) {
assert.equal(this.instance.option('zoomLevel'), 1);
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.ZoomLevel).execute(1.5);
assert.equal(this.instance.option('zoomLevel'), 1.5);
assert.ok(this.onOptionChanged.called);
});
test('should change zoomLevel object property', function(assert) {
assert.equal(this.instance._diagramInstance.settings.zoomLevel, 1);
Expand All @@ -42,10 +71,13 @@ QUnit.module('Options', moduleConfig, () => {
assert.equal(this.instance._diagramInstance.settings.zoomLevelItems.length, 2);
});
test('should sync zoomLevel object property', function(assert) {
assert.notOk(this.onOptionChanged.called);
this.instance.option('zoomLevel', { value: 1.5, items: [ 1, 1.5, 2 ] });
assert.equal(this.instance.option('zoomLevel.value'), 1.5);
assert.ok(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.ZoomLevel).execute(2);
assert.equal(this.instance.option('zoomLevel.value'), 2);
assert.equal(this.onOptionChanged.getCalls().length, 2);
});
test('should change autoZoom property', function(assert) {
assert.equal(this.instance._diagramInstance.settings.autoZoom, 0);
Expand All @@ -58,8 +90,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync autoZoom property', function(assert) {
assert.equal(this.instance.option('autoZoomMode'), 'disabled');
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.SwitchAutoZoom).execute(1);
assert.equal(this.instance.option('autoZoomMode'), 'fitContent');
assert.ok(this.onOptionChanged.called);
});
test('should change fullScreen property', function(assert) {
assert.notOk(this.instance._diagramInstance.settings.fullscreen);
Expand All @@ -70,8 +104,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync fullScreen property', function(assert) {
assert.equal(this.instance.option('fullScreen'), false);
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.Fullscreen).execute(true);
assert.equal(this.instance.option('fullScreen'), true);
assert.ok(this.onOptionChanged.called);
});
test('should change showGrid property', function(assert) {
assert.ok(this.instance._diagramInstance.settings.showGrid);
Expand All @@ -82,8 +118,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync showGrid property', function(assert) {
assert.equal(this.instance.option('showGrid'), true);
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.ShowGrid).execute(false);
assert.equal(this.instance.option('showGrid'), false);
assert.ok(this.onOptionChanged.called);
});
test('should change snapToGrid property', function(assert) {
assert.ok(this.instance._diagramInstance.settings.snapToGrid);
Expand All @@ -94,8 +132,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync snapToGrid property', function(assert) {
assert.equal(this.instance.option('snapToGrid'), true);
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.SnapToGrid).execute(false);
assert.equal(this.instance.option('snapToGrid'), false);
assert.ok(this.onOptionChanged.called);
});
test('should change gridSize property', function(assert) {
assert.equal(this.instance._diagramInstance.settings.gridSize, 180);
Expand All @@ -106,8 +146,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync gridSize property', function(assert) {
assert.equal(this.instance.option('gridSize'), 0.125);
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.GridSize).execute(0.25);
assert.equal(this.instance.option('gridSize'), 0.25);
assert.ok(this.onOptionChanged.called);
});
test('should change gridSize object property', function(assert) {
assert.equal(this.instance._diagramInstance.settings.gridSize, 180);
Expand All @@ -120,10 +162,13 @@ QUnit.module('Options', moduleConfig, () => {
assert.equal(this.instance._diagramInstance.settings.gridSizeItems.length, 2);
});
test('should sync gridSize object property', function(assert) {
assert.notOk(this.onOptionChanged.called);
this.instance.option('gridSize', { value: 0.25, items: [0.125, 0.25, 1] });
assert.ok(this.onOptionChanged.called);
assert.equal(this.instance.option('gridSize.value'), 0.25);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.GridSize).execute(1);
assert.equal(this.instance.option('gridSize.value'), 1);
assert.equal(this.onOptionChanged.getCalls().length, 2);
});
test('should change viewUnits property', function(assert) {
assert.equal(this.instance._diagramInstance.settings.viewUnits, 0);
Expand All @@ -134,8 +179,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync viewUnits property', function(assert) {
assert.equal(this.instance.option('viewUnits'), 'in');
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.ViewUnits).execute(1);
assert.equal(this.instance.option('viewUnits'), 'cm');
assert.ok(this.onOptionChanged.called);
});
test('should change units property', function(assert) {
assert.equal(this.instance._diagramInstance.model.units, 0);
Expand All @@ -152,12 +199,15 @@ QUnit.module('Options', moduleConfig, () => {
assert.equal(this.instance._diagramInstance.model.pageSize.height, 7200);
});
test('should sync pageSize property', function(assert) {
assert.notOk(this.onOptionChanged.called);
this.instance.option('pageSize', { width: 3, height: 5 });
assert.equal(this.instance.option('pageSize.width'), 3);
assert.equal(this.instance.option('pageSize.height'), 5);
assert.equal(this.onOptionChanged.getCalls().length, 2); // +hasChanges
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.PageSize).execute({ width: 4, height: 6 });
assert.equal(this.instance.option('pageSize.width'), 4);
assert.equal(this.instance.option('pageSize.height'), 6);
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);
Expand All @@ -169,12 +219,15 @@ QUnit.module('Options', moduleConfig, () => {
assert.equal(this.instance._diagramInstance.settings.pageSizeItems.length, 1);
});
test('should sync pageSize object property', function(assert) {
assert.notOk(this.onOptionChanged.called);
this.instance.option('pageSize', { width: 3, height: 5, items: [{ width: 3, height: 5, text: 'A10' }, { width: 4, height: 6, text: 'A11' }] });
assert.equal(this.instance.option('pageSize.width'), 3);
assert.equal(this.instance.option('pageSize.height'), 5);
assert.equal(this.onOptionChanged.getCalls().length, 2); // +hasChanges
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.PageSize).execute({ width: 4, height: 6 });
assert.equal(this.instance.option('pageSize.width'), 4);
assert.equal(this.instance.option('pageSize.height'), 6);
assert.equal(this.onOptionChanged.getCalls().length, 3); // +hasChanges
});
test('should change pageOrientation property', function(assert) {
assert.equal(this.instance._diagramInstance.model.pageLandscape, false);
Expand All @@ -185,8 +238,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync pageOrientation property', function(assert) {
assert.equal(this.instance.option('pageOrientation'), 'portrait');
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.PageLandscape).execute(1);
assert.equal(this.instance.option('pageOrientation'), 'landscape');
assert.equal(this.onOptionChanged.getCalls().length, 2); // +hasChanges
});
test('should change pageColor property', function(assert) {
assert.equal(this.instance._diagramInstance.model.pageColor, -1); // FFFFFF
Expand All @@ -197,8 +252,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync pageColor property', function(assert) {
assert.equal(this.instance.option('pageColor'), '#ffffff');
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.PageColor).execute('red');
assert.equal(this.instance.option('pageColor'), '#ff0000'); // FF0000
assert.equal(this.onOptionChanged.getCalls().length, 2); // +hasChanges
});
test('should change simpleView property', function(assert) {
assert.equal(this.instance._diagramInstance.settings.simpleView, false);
Expand All @@ -209,8 +266,10 @@ QUnit.module('Options', moduleConfig, () => {
});
test('should sync simpleView property', function(assert) {
assert.equal(this.instance.option('simpleView'), false);
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.ToggleSimpleView).execute(true);
assert.equal(this.instance.option('simpleView'), true);
assert.ok(this.onOptionChanged.called);
});

test('should change defaultItemProperties', function(assert) {
Expand Down Expand Up @@ -352,4 +411,47 @@ QUnit.module('Options', moduleConfig, () => {
]);
assert.equal(Object.keys(descriptions).length, 44);
});

test('hasChanges changes on import or editing of an unbound diagram', function(assert) {
assert.equal(this.instance.option('hasChanges'), false, 'on init');
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.Import).execute(Consts.SIMPLE_DIAGRAM);
assert.equal(this.instance.option('hasChanges'), true, 'on import');
assert.ok(this.onOptionChanged.called);
this.instance.option('hasChanges', false);
this.instance._diagramInstance.selection.set(['107']);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.Bold).execute(true);
assert.equal(this.instance.option('hasChanges'), true, 'on edit');
});
test('hasChanges changes on data bind a diagram', function(assert) {
assert.equal(this.instance.option('hasChanges'), false, 'on init');
assert.notOk(this.onOptionChanged.called);
this.instance.option('nodes.dataSource', [
{
id: '1',
text: 'text1'
},
{
id: '2',
text: 'text2'
}
]);
assert.equal(this.instance.option('hasChanges'), true, 'on data bind');
assert.ok(this.onOptionChanged.called);
this.instance.option('hasChanges', false);
this.instance._diagramInstance.selection.set(['1']);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.Bold).execute(true);
assert.equal(this.instance.option('hasChanges'), true, 'on edit');
});
});

QUnit.module('Options with bound diagram', moduleConfigWithBoundDiagram, () => {
test('hasChanges changes on a data bound diagram', function(assert) {
assert.equal(this.instance.option('hasChanges'), false, 'on init');
assert.notOk(this.onOptionChanged.called);
this.instance._diagramInstance.selection.set(['1']);
this.instance._diagramInstance.commandManager.getCommand(DiagramCommand.Bold).execute(true);
assert.equal(this.instance.option('hasChanges'), true, 'on edit');
assert.ok(this.onOptionChanged.called);
});
});