aboutsummaryrefslogtreecommitdiffstats
path: root/dox-sequence-diagram-ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'dox-sequence-diagram-ui/src')
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/Sequencer.jsx307
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Common.js622
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Logger.js191
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Options.js193
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/application/Application.jsx450
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx1729
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/components/popup/Popup.jsx148
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx405
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx248
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/Designer.jsx708
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/actions/Actions.jsx860
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifeline.jsx397
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/LifelineNew.jsx132
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifelines.jsx189
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Message.jsx1012
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/MessageNew.jsx126
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.jsx201
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/metadata/Metadata.jsx8
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/source/Source.jsx90
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx228
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/export/Export.jsx21
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx15
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/overlay/Overlay.jsx65
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodel.js116
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodels.js97
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Model.js864
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/demo/scenarios/Scenarios.js181
-rw-r--r--dox-sequence-diagram-ui/src/main/webapp/lib/main.jsx14
28 files changed, 4921 insertions, 4696 deletions
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/Sequencer.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/Sequencer.jsx
index fc2bfbc0e3..c0e9483e92 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/Sequencer.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/Sequencer.jsx
@@ -28,176 +28,177 @@ import '../../../../res/sdc-sequencer.scss';
* ASDC Sequencer entry point.
*/
class Sequencer extends React.Component {
+ // //////////////////////////////////////////////////////////////////////////////////////////////
- // //////////////////////////////////////////////////////////////////////////////////////////////
-
- constructor(props, context) {
- super(props, context);
-
-
- this.setMetamodel.bind(this);
- this.setModel.bind(this);
- this.getModel.bind(this);
- this.getMetamodel.bind(this);
- this.getSVG.bind(this);
- this.getDemoScenarios.bind(this);
- this.newModel.bind(this);
-
- // Parse options.
-
- this.options = new Options(props.options);
-
- // Default scenarios.
-
- const scenarios = this.getDemoScenarios();
- this.setMetamodel(scenarios.getMetamodels());
-
- // this.setModel(scenarios.getBlank());
- this.setModel(scenarios.getDimensions());
- // this.setModel(scenarios.getECOMP());
-
- }
-
- // //////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Optionally save known metamodels so that subsequent loading and unloading
- * of models needn't include the corresponding metamodel.
- * @param metamodels array of conformant metamodel JSON definitions.
- * @return this.
- */
- setMetamodel(metamodels) {
- Common.assertType(metamodels, 'Array');
- this.metamodels = new Metamodels(metamodels);
- return this;
- }
-
- // //////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Set current diagram.
- * @param modelJSON JSON diagram spec.
- * @param metamodelIdOrDefinition optional metamodel definition or reference. Defaults to
- * the model's metadata @ref, or the default (permissive) metamodel.
- * @return this.
- */
- setModel(modelJSON, metamodelIdOrDefinition) {
- Common.assertType(modelJSON, 'Object');
- const ref = (modelJSON.metadata) ? modelJSON.metadata.ref : undefined;
- const metamodel = this.getMetamodel(metamodelIdOrDefinition || ref);
- Common.assertInstanceOf(metamodel, Metamodel);
- this.model = new Model(modelJSON, metamodel);
- if (this.application) {
- this.application.setModel(this.model);
+ constructor(props, context) {
+ super(props, context);
+
+ this.setMetamodel.bind(this);
+ this.setModel.bind(this);
+ this.getModel.bind(this);
+ this.getMetamodel.bind(this);
+ this.getSVG.bind(this);
+ this.getDemoScenarios.bind(this);
+ this.newModel.bind(this);
+
+ // Parse options.
+
+ this.options = new Options(props.options);
+
+ // Default scenarios.
+
+ const scenarios = this.getDemoScenarios();
+ this.setMetamodel(scenarios.getMetamodels());
+
+ // this.setModel(scenarios.getBlank());
+ this.setModel(scenarios.getDimensions());
+ // this.setModel(scenarios.getECOMP());
}
- return this;
- }
-
- // //////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get current diagram state. At any given instant the diagram might not make *sense*
- * but it should always be syntactically valid.
- * @return current Model.
- */
- getModel() {
-
- if (this.application) {
- const model = this.application.getModel();
- if (model) {
- return model.unwrap();
- }
+
+ // //////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Optionally save known metamodels so that subsequent loading and unloading
+ * of models needn't include the corresponding metamodel.
+ * @param metamodels array of conformant metamodel JSON definitions.
+ * @return this.
+ */
+ setMetamodel(metamodels) {
+ Common.assertType(metamodels, 'Array');
+ this.metamodels = new Metamodels(metamodels);
+ return this;
}
- return this.model;
- }
-
- // //////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Extract SVG element.
- * @return stringified SVG element.
- */
- getSVG() {
- return this.application.getSVG();
- }
-
- // //////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get demo scenarios, allowing initialization in demo mode from the outside.
- * @returns {Scenarios}
- */
- getDemoScenarios() {
- return new Scenarios();
- }
-
- // //////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Create new model.
- * @param metamodelIdOrDefinition
- * @return newly-created model.
- */
- newModel(metamodelIdOrDefinition) {
- const metamodel = this.getMetamodel(metamodelIdOrDefinition);
- Common.assertInstanceOf(metamodel, Metamodel);
- const model = new Model({}, metamodel);
- if (this.application) {
- this.application.setModel(model);
+ // //////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Set current diagram.
+ * @param modelJSON JSON diagram spec.
+ * @param metamodelIdOrDefinition optional metamodel definition or reference. Defaults to
+ * the model's metadata @ref, or the default (permissive) metamodel.
+ * @return this.
+ */
+ setModel(modelJSON, metamodelIdOrDefinition) {
+ Common.assertType(modelJSON, 'Object');
+ const ref = modelJSON.metadata ? modelJSON.metadata.ref : undefined;
+ const metamodel = this.getMetamodel(metamodelIdOrDefinition || ref);
+ Common.assertInstanceOf(metamodel, Metamodel);
+ this.model = new Model(modelJSON, metamodel);
+ if (this.application) {
+ this.application.setModel(this.model);
+ }
+ return this;
}
- return model;
- }
-
- // //////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get Metamodel instance corresponding to an ID or JSON definition.
- * @param metamodelIdOrDefinition String ID or JSON definition.
- * @returns Metamodel instance.
- * @private
- */
- getMetamodel(metamodelIdOrDefinition) {
- const metamodelType = Common.getType(metamodelIdOrDefinition);
- if (metamodelType === 'Object') {
- return new Metamodel(metamodelIdOrDefinition);
+
+ // //////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get current diagram state. At any given instant the diagram might not make *sense*
+ * but it should always be syntactically valid.
+ * @return current Model.
+ */
+ getModel() {
+ if (this.application) {
+ const model = this.application.getModel();
+ if (model) {
+ return model.unwrap();
+ }
+ }
+
+ return this.model;
}
- return this.metamodels.getMetamodelOrDefault(metamodelIdOrDefinition);
- }
- // //////////////////////////////////////////////////////////////////////////////////////////////
+ // //////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Render current diagram state.
- */
- render() {
+ /**
+ * Extract SVG element.
+ * @return stringified SVG element.
+ */
+ getSVG() {
+ return this.application.getSVG();
+ }
- if (this.props.model) {
+ // //////////////////////////////////////////////////////////////////////////////////////////////
- // If a model was specified as a property, apply it. Otherwise
- // fall back to the demo model.
+ /**
+ * Get demo scenarios, allowing initialization in demo mode from the outside.
+ * @returns {Scenarios}
+ */
+ getDemoScenarios() {
+ return new Scenarios();
+ }
- const scenarios = this.getDemoScenarios();
- const metamodel = [scenarios.getBlankMetamodel(), scenarios.getECOMPMetamodel()];
- if (this.props.metamodel) {
- metamodel.push(this.props.metamodel);
- }
- this.setMetamodel(metamodel);
- this.setModel(this.props.model);
+ // //////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Create new model.
+ * @param metamodelIdOrDefinition
+ * @return newly-created model.
+ */
+ newModel(metamodelIdOrDefinition) {
+ const metamodel = this.getMetamodel(metamodelIdOrDefinition);
+ Common.assertInstanceOf(metamodel, Metamodel);
+ const model = new Model({}, metamodel);
+ if (this.application) {
+ this.application.setModel(model);
+ }
+ return model;
}
- return (
- <Application options={this.options} sequencer={this} ref={(a) => { this.application = a; }} />
- );
- }
+ // //////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get Metamodel instance corresponding to an ID or JSON definition.
+ * @param metamodelIdOrDefinition String ID or JSON definition.
+ * @returns Metamodel instance.
+ * @private
+ */
+ getMetamodel(metamodelIdOrDefinition) {
+ const metamodelType = Common.getType(metamodelIdOrDefinition);
+ if (metamodelType === 'Object') {
+ return new Metamodel(metamodelIdOrDefinition);
+ }
+ return this.metamodels.getMetamodelOrDefault(metamodelIdOrDefinition);
+ }
+ // //////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render current diagram state.
+ */
+ render() {
+ if (this.props.model) {
+ // If a model was specified as a property, apply it. Otherwise
+ // fall back to the demo model.
+
+ const scenarios = this.getDemoScenarios();
+ const metamodel = [
+ scenarios.getBlankMetamodel(),
+ scenarios.getECOMPMetamodel()
+ ];
+ if (this.props.metamodel) {
+ metamodel.push(this.props.metamodel);
+ }
+ this.setMetamodel(metamodel);
+ this.setModel(this.props.model);
+ }
+
+ return (
+ <Application
+ options={this.options}
+ sequencer={this}
+ ref={a => {
+ this.application = a;
+ }}
+ />
+ );
+ }
}
Sequencer.propTypes = {
- options: PropTypes.object.isRequired,
- model: PropTypes.object,
- metamodel: PropTypes.object,
+ options: PropTypes.object.isRequired,
+ model: PropTypes.object,
+ metamodel: PropTypes.object
};
-
export default Sequencer;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Common.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Common.js
index 7337367dca..1c6bd69dc2 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Common.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Common.js
@@ -18,339 +18,347 @@
* Common operations.
*/
export default class Common {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Retrieve and start a simple timer. Retrieve elapsed time by calling #ms().
+ * @returns {*}
+ */
+ static timer() {
+ const start = new Date().getTime();
+ return {
+ ms() {
+ return new Date().getTime() - start;
+ }
+ };
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Retrieve and start a simple timer. Retrieve elapsed time by calling #ms().
- * @returns {*}
- */
- static timer() {
- const start = new Date().getTime();
- return {
- ms() {
- return (new Date().getTime() - start);
- },
- };
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get datatype, stripping '[object Boolean]' to just 'Boolean'.
- * @param o JS object.
- * @return String like String, Number, Date, Null, Undefined, stuff like that.
- */
- static getType(o) {
- const str = Object.prototype.toString.call(o);
- const prefix = '[object ';
- if (str.substr(str, prefix.length) === prefix) {
- return str.substr(prefix.length, str.length - (prefix.length + 1));
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get datatype, stripping '[object Boolean]' to just 'Boolean'.
+ * @param o JS object.
+ * @return String like String, Number, Date, Null, Undefined, stuff like that.
+ */
+ static getType(o) {
+ const str = Object.prototype.toString.call(o);
+ const prefix = '[object ';
+ if (str.substr(str, prefix.length) === prefix) {
+ return str.substr(prefix.length, str.length - (prefix.length + 1));
+ }
+ return str;
}
- return str;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Assert that an argument was provided.
- * @param value to be checked.
- * @param message message on assertion failure.
- * @return value.
- */
- static assertNotNull(value, message = 'Unexpected null value') {
- if (!value) {
- throw new Error(message);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Assert that an argument was provided.
+ * @param value to be checked.
+ * @param message message on assertion failure.
+ * @return value.
+ */
+ static assertNotNull(value, message = 'Unexpected null value') {
+ if (!value) {
+ throw new Error(message);
+ }
+ return value;
}
- return value;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Assert argument type.
- * @param value to be checked.
- * @param expected expected type string, e,g. Number from [object Number].
- * @return value.
- */
- static assertType(value, expected) {
- const type = this.getType(value);
- if (type !== expected) {
- throw new Error(`Expected type ${expected}, got ${type}`);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Assert argument type.
+ * @param value to be checked.
+ * @param expected expected type string, e,g. Number from [object Number].
+ * @return value.
+ */
+ static assertType(value, expected) {
+ const type = this.getType(value);
+ if (type !== expected) {
+ throw new Error(`Expected type ${expected}, got ${type}`);
+ }
+ return value;
}
- return value;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Assert argument type.
- * @param value to be checked.
- * @param unexpected unexpected type string, e,g. Number from [object Number].
- * @return value.
- */
- static assertNotType(value, unexpected) {
- const type = this.getType(value);
- if (type === unexpected) {
- throw new Error(`Forbidden type "${unexpected}"`);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Assert argument type.
+ * @param value to be checked.
+ * @param unexpected unexpected type string, e,g. Number from [object Number].
+ * @return value.
+ */
+ static assertNotType(value, unexpected) {
+ const type = this.getType(value);
+ if (type === unexpected) {
+ throw new Error(`Forbidden type "${unexpected}"`);
+ }
+ return value;
}
- return value;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Assert argument is a simple JSON object, and specifically not (something like an) ES6 class.
- * @param value to be checked.
- * @return value.
- */
- static assertPlainObject(value) {
- Common.assertType(value, 'Object');
- // TODO
- /*
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Assert argument is a simple JSON object, and specifically not (something like an) ES6 class.
+ * @param value to be checked.
+ * @return value.
+ */
+ static assertPlainObject(value) {
+ Common.assertType(value, 'Object');
+ // TODO
+ /*
if (!($.isPlainObject(value))) {
throw new Error(`Expected plain object: ${value}`);
}
*/
- return value;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Assert argument type.
- * @param value to be checked.
- * @param c expected class.
- * @return value.
- */
- static assertInstanceOf(value, c) {
- Common.assertNotNull(value);
- if (!(value instanceof c)) {
- throw new Error(`Expected instanceof ${c}: ${value}`);
- }
- return value;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Assert that a string matches a regex.
- * @param value value to be tested.
- * @param re pattern to be applied.
- * @return value.
- */
- static assertMatches(value, re) {
- this.assertType(value, 'String');
- this.assertType(re, 'RegExp');
- if (!re.test(value)) {
- throw new Error(`Value ${value} doesn't match pattern ${re}`);
+ return value;
}
- return value;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Assert the value of a boolean.
- *
- * @param bool to be checked.
- * @param message optional message on assertion failure.
- * @return value.
- */
- static assertThat(bool, message) {
- if (!bool) {
- throw new Error(message || `Unexpected: ${bool}`);
- }
- return bool;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Verify that a value, generally a function arg, is a DOM element.
- * @param value to be checked.
- * @return value.
- */
- static assertHTMLElement(value) {
- if (!Common.isHTMLElement(value)) {
- throw new Error(`Expected HTMLElement: ${value}`);
- }
- return value;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Check whether a value, generally a function arg, is an HTML DOM element.
- * @param o to be checked.
- * @return true if DOM element.
- */
- static isHTMLElement(o) {
- if (typeof HTMLElement === 'object') {
- return o instanceof HTMLElement;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Assert argument type.
+ * @param value to be checked.
+ * @param c expected class.
+ * @return value.
+ */
+ static assertInstanceOf(value, c) {
+ Common.assertNotNull(value);
+ if (!(value instanceof c)) {
+ throw new Error(`Expected instanceof ${c}: ${value}`);
+ }
+ return value;
}
- return o && typeof o === 'object' && o !== null
- && o.nodeType === 1 && typeof o.nodeName === 'string';
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Check if a string is non-empty.
- * @param s string to be checked.
- * @returns false if non-blank string, true otherwise.
- */
- static isBlank(s) {
- if (Common.getType(s) === 'String') {
- return (s.trim().length === 0);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Assert that a string matches a regex.
+ * @param value value to be tested.
+ * @param re pattern to be applied.
+ * @return value.
+ */
+ static assertMatches(value, re) {
+ this.assertType(value, 'String');
+ this.assertType(re, 'RegExp');
+ if (!re.test(value)) {
+ throw new Error(`Value ${value} doesn't match pattern ${re}`);
+ }
+ return value;
}
- return true;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Detect dates that are numbers, milli/seconds since epoch..
- *
- * @param n candidate number.
- * @returns {boolean}
- */
- static isNumber(n) {
- return !isNaN(parseFloat(n)) && isFinite(n);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Parse the text output from a template to a DOM element.
- * @param txt input text.
- * @returns {Element}
- */
- static txt2dom(txt) {
- return new DOMParser().parseFromString(txt, 'image/svg+xml').documentElement;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Recursively convert a DOM element to an SVG (namespaced) element. Otherwise
- * you get HTML elements that *happen* to have SVG names, but which aren't actually SVG.
- *
- * @param node DOM node to be converted.
- * @param svg to be updated.
- * @returns {*} for chaining.
- */
- static dom2svg(node, svg) {
-
- Common.assertNotType(node, 'String');
-
- if (node.childNodes && node.childNodes.length > 0) {
-
- for (const c of node.childNodes) {
- switch (c.nodeType) {
- case document.TEXT_NODE:
- svg.text(c.nodeValue);
- break;
- default:
- break;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Assert the value of a boolean.
+ *
+ * @param bool to be checked.
+ * @param message optional message on assertion failure.
+ * @return value.
+ */
+ static assertThat(bool, message) {
+ if (!bool) {
+ throw new Error(message || `Unexpected: ${bool}`);
}
- }
-
- for (const c of node.childNodes) {
- switch (c.nodeType) {
- case document.ELEMENT_NODE:
- Common.dom2svg(c, svg.append(`svg:${c.nodeName.toLowerCase()}`));
- break;
- default:
- break;
+ return bool;
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Verify that a value, generally a function arg, is a DOM element.
+ * @param value to be checked.
+ * @return value.
+ */
+ static assertHTMLElement(value) {
+ if (!Common.isHTMLElement(value)) {
+ throw new Error(`Expected HTMLElement: ${value}`);
}
- }
+ return value;
}
- if (node.hasAttributes()) {
- for (let i = 0; i < node.attributes.length; i++) {
- const a = node.attributes.item(i);
- svg.attr(a.name, a.value);
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Check whether a value, generally a function arg, is an HTML DOM element.
+ * @param o to be checked.
+ * @return true if DOM element.
+ */
+ static isHTMLElement(o) {
+ /* eslint-disable no-undef */
+ if (typeof HTMLElement === 'object') {
+ return o instanceof HTMLElement;
+ }
+ /* eslint-enable no-undef */
+ return (
+ o &&
+ typeof o === 'object' &&
+ o !== null &&
+ o.nodeType === 1 &&
+ typeof o.nodeName === 'string'
+ );
}
- return svg;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get the lines to be shown in the label.
- *
- * @param labelText original label text.
- * @param wordWrapAt chars at which to break words.
- * @param lineWrapAt chars at which to wrap.
- * @param maximumLines lines at which to truncate.
- * @returns {Array}
- */
- static tokenize(labelText = '', wordWrapAt, lineWrapAt, maximumLines) {
-
- let l = labelText;
-
- // Hyphenate and break long words.
-
- const regex = new RegExp(`(\\w{${wordWrapAt - 1}})(?=\\w)`, 'g');
- l = l.replace(regex, '$1- ');
-
- const labelTokens = l.split(/\s+/);
- const lines = [];
- let label = '';
- for (const labelToken of labelTokens) {
- if (label.length > 0) {
- const length = label.length + labelToken.length + 1;
- if (length > lineWrapAt) {
- lines.push(label.trim());
- label = labelToken;
- continue;
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Check if a string is non-empty.
+ * @param s string to be checked.
+ * @returns false if non-blank string, true otherwise.
+ */
+ static isBlank(s) {
+ if (Common.getType(s) === 'String') {
+ return s.trim().length === 0;
}
- }
- label = `${label} ${labelToken}`;
+ return true;
}
- if (label) {
- lines.push(label.trim());
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Detect dates that are numbers, milli/seconds since epoch..
+ *
+ * @param n candidate number.
+ * @returns {boolean}
+ */
+ static isNumber(n) {
+ return !isNaN(parseFloat(n)) && isFinite(n);
}
- const truncated = lines.slice(0, maximumLines);
- if (truncated.length < lines.length) {
- let finalLine = truncated[maximumLines - 1];
- if (finalLine.length > (lineWrapAt - 4)) {
- finalLine = finalLine.substring(0, lineWrapAt - 4);
- }
- finalLine = `${finalLine} ...`;
- truncated[maximumLines - 1] = finalLine;
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Parse the text output from a template to a DOM element.
+ * @param txt input text.
+ * @returns {Element}
+ */
+ static txt2dom(txt) {
+ /* eslint-disable no-undef */
+ return new DOMParser().parseFromString(txt, 'image/svg+xml')
+ .documentElement;
+ /* eslint-enable no-undef */
}
- return truncated;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Brutally sanitize an input string. We have no syntax rules, and hence no specific
- * rules to apply, but we have very few unconstrained fields, so we can implement a
- * crude default and devolve the rest to options.
- * @param value value to be sanitized.
- * @param options control options including validation rules.
- * @param type validation type.
- * @returns {*} sanitized string.
- * @private
- */
- static sanitizeText(value, options, type) {
- const rules = Common.assertNotNull(options.validation[type]);
- let v = value || rules.defaultValue || '';
- if (rules.replace) {
- v = v.replace(rules.replace, '');
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Recursively convert a DOM element to an SVG (namespaced) element. Otherwise
+ * you get HTML elements that *happen* to have SVG names, but which aren't actually SVG.
+ *
+ * @param node DOM node to be converted.
+ * @param svg to be updated.
+ * @returns {*} for chaining.
+ */
+ static dom2svg(node, svg) {
+ Common.assertNotType(node, 'String');
+
+ if (node.childNodes && node.childNodes.length > 0) {
+ for (const c of node.childNodes) {
+ switch (c.nodeType) {
+ case document.TEXT_NODE:
+ svg.text(c.nodeValue);
+ break;
+ default:
+ break;
+ }
+ }
+
+ for (const c of node.childNodes) {
+ switch (c.nodeType) {
+ case document.ELEMENT_NODE:
+ Common.dom2svg(
+ c,
+ svg.append(`svg:${c.nodeName.toLowerCase()}`)
+ );
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ if (node.hasAttributes()) {
+ for (let i = 0; i < node.attributes.length; i++) {
+ const a = node.attributes.item(i);
+ svg.attr(a.name, a.value);
+ }
+ }
+
+ return svg;
}
- if (v.length > rules.maxLength) {
- v = `${v.substring(0, rules.maxLength)}...`;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get the lines to be shown in the label.
+ *
+ * @param labelText original label text.
+ * @param wordWrapAt chars at which to break words.
+ * @param lineWrapAt chars at which to wrap.
+ * @param maximumLines lines at which to truncate.
+ * @returns {Array}
+ */
+ static tokenize(labelText = '', wordWrapAt, lineWrapAt, maximumLines) {
+ let l = labelText;
+
+ // Hyphenate and break long words.
+
+ const regex = new RegExp(`(\\w{${wordWrapAt - 1}})(?=\\w)`, 'g');
+ l = l.replace(regex, '$1- ');
+
+ const labelTokens = l.split(/\s+/);
+ const lines = [];
+ let label = '';
+ for (const labelToken of labelTokens) {
+ if (label.length > 0) {
+ const length = label.length + labelToken.length + 1;
+ if (length > lineWrapAt) {
+ lines.push(label.trim());
+ label = labelToken;
+ continue;
+ }
+ }
+ label = `${label} ${labelToken}`;
+ }
+
+ if (label) {
+ lines.push(label.trim());
+ }
+
+ const truncated = lines.slice(0, maximumLines);
+ if (truncated.length < lines.length) {
+ let finalLine = truncated[maximumLines - 1];
+ if (finalLine.length > lineWrapAt - 4) {
+ finalLine = finalLine.substring(0, lineWrapAt - 4);
+ }
+ finalLine = `${finalLine} ...`;
+ truncated[maximumLines - 1] = finalLine;
+ }
+
+ return truncated;
}
- return v;
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Brutally sanitize an input string. We have no syntax rules, and hence no specific
+ * rules to apply, but we have very few unconstrained fields, so we can implement a
+ * crude default and devolve the rest to options.
+ * @param value value to be sanitized.
+ * @param options control options including validation rules.
+ * @param type validation type.
+ * @returns {*} sanitized string.
+ * @private
+ */
+ static sanitizeText(value, options, type) {
+ const rules = Common.assertNotNull(options.validation[type]);
+ let v = value || rules.defaultValue || '';
+ if (rules.replace) {
+ v = v.replace(rules.replace, '');
+ }
+ if (v.length > rules.maxLength) {
+ v = `${v.substring(0, rules.maxLength)}...`;
+ }
+ return v;
+ }
}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Logger.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Logger.js
index 187f49bb08..8b6ae67ca7 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Logger.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Logger.js
@@ -23,108 +23,107 @@ import Common from './Common';
* disable them for production.
*/
export default class Logger {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * No-op call so that we can leave imports in place,
+ * even when there's no debugging.
+ */
+ static noop() {
+ // Nothing.
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Set debug level.
+ * @param level threshold.
+ */
+ static setLevel(level) {
+ this.level = Logger.OFF;
+ if (Common.getType(level) === 'Number') {
+ this.level = level;
+ } else {
+ this.level = Logger[level];
+ }
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get debug level.
+ * @returns {number|*}
+ */
+ static getLevel() {
+ return this.level;
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * No-op call so that we can leave imports in place,
- * even when there's no debugging.
- */
- static noop() {
- // Nothing.
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Set debug level.
- * @param level threshold.
- */
- static setLevel(level) {
- this.level = Logger.OFF;
- if (Common.getType(level) === 'Number') {
- this.level = level;
- } else {
- this.level = Logger[level];
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Write DEBUG-level log.
+ * @param msg message or tokens.
+ */
+ static debug(...msg) {
+ if (this.level >= Logger.DEBUG) {
+ const out = this.serialize(msg);
+ console.info(`ASDCS [DEBUG] ${out}`);
+ }
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get debug level.
- * @returns {number|*}
- */
- static getLevel() {
- return this.level;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Write DEBUG-level log.
- * @param msg message or tokens.
- */
- static debug(...msg) {
- if (this.level >= Logger.DEBUG) {
- const out = this.serialize(msg);
- console.info(`ASDCS [DEBUG] ${out}`);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Write INFO-level log.
+ * @param msg message or tokens.
+ */
+ static info(...msg) {
+ if (this.level >= Logger.INFO) {
+ const out = this.serialize(msg);
+ console.info(`ASDCS [INFO] ${out}`);
+ }
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Write INFO-level log.
- * @param msg message or tokens.
- */
- static info(...msg) {
- if (this.level >= Logger.INFO) {
- const out = this.serialize(msg);
- console.info(`ASDCS [INFO] ${out}`);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Write debug.
+ * @param msg message or tokens.
+ */
+ static warn(msg) {
+ if (this.level >= Logger.WARN) {
+ const out = this.serialize(msg);
+ console.warn(`ASDCS [WARN] ${out}`);
+ }
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Write debug.
- * @param msg message or tokens.
- */
- static warn(msg) {
- if (this.level >= Logger.WARN) {
- const out = this.serialize(msg);
- console.warn(`ASDCS [WARN] ${out}`);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Write error.
+ * @param msg message or tokens.
+ */
+ static error(...msg) {
+ if (this.level >= Logger.ERROR) {
+ const out = this.serialize(msg);
+ console.error(`ASDCS [ERROR] ${out}`);
+ }
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Write error.
- * @param msg message or tokens.
- */
- static error(...msg) {
- if (this.level >= Logger.ERROR) {
- const out = this.serialize(msg);
- console.error(`ASDCS [ERROR] ${out}`);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Serialize msg.
+ * @param msg message or tokens.
+ * @returns {string}
+ */
+ static serialize(...msg) {
+ let out = '';
+ msg.forEach(token => {
+ out = `${out}${token}`;
+ });
+ return out;
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Serialize msg.
- * @param msg message or tokens.
- * @returns {string}
- */
- static serialize(...msg) {
- let out = '';
- msg.forEach((token) => {
- out = `${out}${token}`;
- });
- return out;
- }
}
// /////////////////////////////////////////////////////////////////////////////////////////////////
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Options.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Options.js
index 15897d7ee3..b054cb26e7 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Options.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/common/Options.js
@@ -23,26 +23,25 @@ import Logger from './Logger';
* and the result -- runtime options -- are available by calling #getOptions().
*/
export default class Options {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Construct options, applying defaults.
+ * @param options optional override options.
+ */
+ constructor(options = {}) {
+ this.options = _merge({}, Options.DEFAULTS, options);
+ }
- /**
- * Construct options, applying defaults.
- * @param options optional override options.
- */
- constructor(options = {}) {
- this.options = _merge({}, Options.DEFAULTS, options);
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Unwrap options.
- * @returns {*}
- */
- unwrap() {
- return this.options;
- }
+ /**
+ * Unwrap options.
+ * @returns {*}
+ */
+ unwrap() {
+ return this.options;
+ }
}
// /////////////////////////////////////////////////////////////////////////////////////////////////
@@ -51,86 +50,86 @@ export default class Options {
* Default options, overridden by anything of the same name.
*/
Options.DEFAULTS = {
- log: {
- level: Logger.WARN,
- },
- demo: false,
- useHtmlSelect: true,
- diagram: {
- svg: {
- x: 0,
- y: 0,
- width: 1600,
- height: 1200,
- margin: 50,
- floodColor: '#009fdb',
- scale: {
- height: true,
- width: true,
- minimum: 0.25,
- },
- },
- title: {
- height: 0,
- },
- metadata: false,
- lifelines: {
- header: {
- height: 225,
- width: 350,
- wrapWords: 14,
- wrapLines: 18,
- maxLines: 5,
- },
- occurrences: {
- marginTop: 50,
- marginBottom: 75,
- foreshortening: 5,
- width: 50,
- },
- spacing: {
- horizontal: 400,
- vertical: 400,
- },
- },
- messages: {
- label: {
- wrapWords: 14,
- wrapLines: 18,
- maxLines: 4,
- },
- },
- fragments: {
- leftMargin: 150,
- topMargin: 200,
- widthMargin: 300,
- heightMargin: 350,
- label: {
- wrapWords: 50,
- wrapLines: 50,
- maxLines: 2,
- },
- },
- },
- validation: {
- lifeline: {
- maxLength: 100,
- defaultValue: '',
- replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g,
- },
- message: {
- maxLength: 100,
- defaultValue: '',
- replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g,
- },
- notes: {
- maxLength: 255,
- defaultValue: '',
+ log: {
+ level: Logger.WARN
},
- guard: {
- maxLength: 80,
- defaultValue: '',
- replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g,
+ demo: false,
+ useHtmlSelect: true,
+ diagram: {
+ svg: {
+ x: 0,
+ y: 0,
+ width: 1600,
+ height: 1200,
+ margin: 50,
+ floodColor: '#009fdb',
+ scale: {
+ height: true,
+ width: true,
+ minimum: 0.25
+ }
+ },
+ title: {
+ height: 0
+ },
+ metadata: false,
+ lifelines: {
+ header: {
+ height: 225,
+ width: 350,
+ wrapWords: 14,
+ wrapLines: 18,
+ maxLines: 5
+ },
+ occurrences: {
+ marginTop: 50,
+ marginBottom: 75,
+ foreshortening: 5,
+ width: 50
+ },
+ spacing: {
+ horizontal: 400,
+ vertical: 400
+ }
+ },
+ messages: {
+ label: {
+ wrapWords: 14,
+ wrapLines: 18,
+ maxLines: 4
+ }
+ },
+ fragments: {
+ leftMargin: 150,
+ topMargin: 200,
+ widthMargin: 300,
+ heightMargin: 350,
+ label: {
+ wrapWords: 50,
+ wrapLines: 50,
+ maxLines: 2
+ }
+ }
},
- },
+ validation: {
+ lifeline: {
+ maxLength: 100,
+ defaultValue: '',
+ replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g
+ },
+ message: {
+ maxLength: 100,
+ defaultValue: '',
+ replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g
+ },
+ notes: {
+ maxLength: 255,
+ defaultValue: ''
+ },
+ guard: {
+ maxLength: 80,
+ defaultValue: '',
+ replace: /[^\-\.\+ &%#@\?\(\)\[\]<>\w\d]/g
+ }
+ }
};
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/application/Application.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/application/Application.jsx
index 6889e0ab9f..b63e69a4ed 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/application/Application.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/application/Application.jsx
@@ -28,258 +28,274 @@ import Overlay from '../overlay/Overlay';
* Application controller, also a view.
*/
class Application extends React.Component {
+ /**
+ * Construct application view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
+
+ this.sequencer = Common.assertNotNull(props.sequencer);
+ this.model = this.sequencer.getModel();
+ this.metamodel = this.sequencer.getMetamodel();
+ this.options = props.options;
+ Logger.setLevel(this.options.unwrap().log.level);
+
+ // Bindings.
+
+ this.showInfoDialog = this.showInfoDialog.bind(this);
+ this.showEditDialog = this.showEditDialog.bind(this);
+ this.showConfirmDialog = this.showConfirmDialog.bind(this);
+ this.hideOverlay = this.hideOverlay.bind(this);
+ this.onMouseMove = this.onMouseMove.bind(this);
+ this.onMouseUp = this.onMouseUp.bind(this);
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Construct application view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
-
- this.sequencer = Common.assertNotNull(props.sequencer);
- this.model = this.sequencer.getModel();
- this.metamodel = this.sequencer.getMetamodel();
- this.options = props.options;
- Logger.setLevel(this.options.unwrap().log.level);
-
- // Bindings.
-
- this.showInfoDialog = this.showInfoDialog.bind(this);
- this.showEditDialog = this.showEditDialog.bind(this);
- this.showConfirmDialog = this.showConfirmDialog.bind(this);
- this.hideOverlay = this.hideOverlay.bind(this);
- this.onMouseMove = this.onMouseMove.bind(this);
- this.onMouseUp = this.onMouseUp.bind(this);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get application options.
- * @returns JSON options, see Options.js.
- */
- getOptions() {
- return this.options.unwrap();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Set diagram name.
- * @param n diagram (human-readable) name.
- */
- setName(n) {
- this.diagram.setName(n);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Set diagram model.
- * @param model diagram instance.
- */
- setModel(model) {
-
- Common.assertNotNull(model);
-
- this.model = model;
-
- if (this.editor) {
- this.editor.render();
+ /**
+ * Get application options.
+ * @returns JSON options, see Options.js.
+ */
+ getOptions() {
+ return this.options.unwrap();
}
- if (this.diagram) {
- this.diagram.render();
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Set diagram name.
+ * @param n diagram (human-readable) name.
+ */
+ setName(n) {
+ this.diagram.setName(n);
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get Model wrapper.
- * @returns Model.
- */
- getModel() {
- return this.model;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get SVG element.
- * @returns {*}
- */
- getSVG() {
- return this.diagram.getSVG();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get top-level widget. Provides the demo toolbar with access to the public API.
- * @returns {*}
- */
- getSequencer() {
- return this.sequencer;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Present info dialog.
- * @param msg info message.
- */
- showInfoDialog(msg) {
- this.dialog.showInfoDialog(msg);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Present error dialog.
- * @param msg error message.
- */
- showErrorDialog(msg) {
- this.dialog.showErrorDialog(msg);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Present confirmation dialog.
- * @param msg info message.
- * @param cb callback function to be invoked on OK.
- */
- showConfirmDialog(msg, cb) {
- Common.assertType(cb, 'Function');
- this.dialog.showConfirmDialog(msg, cb);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Present edit (textarea) dialog.
- * @param msg prompt.
- * @param text current edit text.
- * @param cb callback function to be invoked on OK, taking the updated text
- * as an argument.
- */
- showEditDialog(msg, text, cb) {
- this.dialog.showEditDialog(msg, text, cb);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Select lifeline by ID.
- * @param id lifeline ID.
- */
- selectLifeline(id) {
- if (this.editor) {
- this.editor.selectLifeline(id);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Set diagram model.
+ * @param model diagram instance.
+ */
+ setModel(model) {
+ Common.assertNotNull(model);
+
+ this.model = model;
+
+ if (this.editor) {
+ this.editor.render();
+ }
+
+ if (this.diagram) {
+ this.diagram.render();
+ }
}
- if (this.diagram) {
- this.diagram.selectLifeline(id);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get Model wrapper.
+ * @returns Model.
+ */
+ getModel() {
+ return this.model;
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Select message by ID.
- * @param id message ID.
- */
- selectMessage(id) {
- if (this.editor) {
- this.editor.selectMessage(id);
+ /**
+ * Get SVG element.
+ * @returns {*}
+ */
+ getSVG() {
+ return this.diagram.getSVG();
}
- if (this.diagram) {
- this.diagram.selectMessage(id);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get top-level widget. Provides the demo toolbar with access to the public API.
+ * @returns {*}
+ */
+ getSequencer() {
+ return this.sequencer;
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * (Re)render just the diagram.
- */
- renderDiagram() {
- this.diagram.redraw();
- }
+ /**
+ * Present info dialog.
+ * @param msg info message.
+ */
+ showInfoDialog(msg) {
+ this.dialog.showInfoDialog(msg);
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Show overlay between application and modal dialog.
- */
- showOverlay() {
- if (this.overlay) {
- this.overlay.setVisible(true);
+ /**
+ * Present error dialog.
+ * @param msg error message.
+ */
+ showErrorDialog(msg) {
+ this.dialog.showErrorDialog(msg);
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Present confirmation dialog.
+ * @param msg info message.
+ * @param cb callback function to be invoked on OK.
+ */
+ showConfirmDialog(msg, cb) {
+ Common.assertType(cb, 'Function');
+ this.dialog.showConfirmDialog(msg, cb);
+ }
- /**
- * Hide overlay between application and modal dialog.
- */
- hideOverlay() {
- if (this.overlay) {
- this.overlay.setVisible(false);
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Present edit (textarea) dialog.
+ * @param msg prompt.
+ * @param text current edit text.
+ * @param cb callback function to be invoked on OK, taking the updated text
+ * as an argument.
+ */
+ showEditDialog(msg, text, cb) {
+ this.dialog.showEditDialog(msg, text, cb);
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Select lifeline by ID.
+ * @param id lifeline ID.
+ */
+ selectLifeline(id) {
+ if (this.editor) {
+ this.editor.selectLifeline(id);
+ }
+ if (this.diagram) {
+ this.diagram.selectLifeline(id);
+ }
+ }
- /**
- * Capture mouse move events, for resize.
- * @param event move event.
- */
- onMouseMove(event) {
- if (this.editor) {
- this.editor.onMouseMove(event);
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Select message by ID.
+ * @param id message ID.
+ */
+ selectMessage(id) {
+ if (this.editor) {
+ this.editor.selectMessage(id);
+ }
+ if (this.diagram) {
+ this.diagram.selectMessage(id);
+ }
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Propagate mouse event to the editor that manages the resize.
- */
- onMouseUp() {
- if (this.editor) {
- this.editor.onMouseUp();
+ /**
+ * (Re)render just the diagram.
+ */
+ renderDiagram() {
+ this.diagram.redraw();
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Render current model state.
- */
- render() {
+ /**
+ * Show overlay between application and modal dialog.
+ */
+ showOverlay() {
+ if (this.overlay) {
+ this.overlay.setVisible(true);
+ }
+ }
- return (
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- <div className="asdcs-control" onMouseMove={this.onMouseMove} onMouseUp={this.onMouseUp}>
+ /**
+ * Hide overlay between application and modal dialog.
+ */
+ hideOverlay() {
+ if (this.overlay) {
+ this.overlay.setVisible(false);
+ }
+ }
- <Editor application={this} ref={(r) => { this.editor = r; }} />
- <Diagram application={this} ref={(r) => { this.diagram = r; }} />
- <Dialog application={this} ref={(r) => { this.dialog = r; }} />
- <Export />
- <Overlay application={this} ref={(r) => { this.overlay = r; }} />
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- </div>
- );
- }
+ /**
+ * Capture mouse move events, for resize.
+ * @param event move event.
+ */
+ onMouseMove(event) {
+ if (this.editor) {
+ this.editor.onMouseMove(event);
+ }
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Propagate mouse event to the editor that manages the resize.
+ */
+ onMouseUp() {
+ if (this.editor) {
+ this.editor.onMouseUp();
+ }
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render current model state.
+ */
+ render() {
+ return (
+ <div
+ className="asdcs-control"
+ onMouseMove={this.onMouseMove}
+ onMouseUp={this.onMouseUp}>
+ <Editor
+ application={this}
+ ref={r => {
+ this.editor = r;
+ }}
+ />
+ <Diagram
+ application={this}
+ ref={r => {
+ this.diagram = r;
+ }}
+ />
+ <Dialog
+ application={this}
+ ref={r => {
+ this.dialog = r;
+ }}
+ />
+ <Export />
+ <Overlay
+ application={this}
+ ref={r => {
+ this.overlay = r;
+ }}
+ />
+ </div>
+ );
+ }
}
/** React properties. */
Application.propTypes = {
- options: PropTypes.object.isRequired,
- sequencer: PropTypes.object.isRequired,
+ options: PropTypes.object.isRequired,
+ sequencer: PropTypes.object.isRequired
};
export default Application;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
index b3544d7066..129a1afc2b 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
@@ -28,898 +28,1013 @@ import Popup from './components/popup/Popup';
* SVG diagram view.
*/
class Diagram extends React.Component {
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct React view.
- * @param props properties.
- * @param context context.
- */
- constructor(props, context) {
- super(props, context);
-
- this.application = Common.assertNotNull(props.application);
- this.options = this.application.getOptions().diagram;
-
- this.events = {};
- this.state = {
- height: 0,
- width: 0,
- };
-
- this.templates = {
- diagram: _template(require('./templates/diagram.html')),
- lifeline: _template(require('./templates/lifeline.html')),
- message: _template(require('./templates/message.html')),
- occurrence: _template(require('./templates/occurrence.html')),
- fragment: _template(require('./templates/fragment.html')),
- title: _template(require('./templates/title.html')),
- };
-
- this.handleResize = this.handleResize.bind(this);
- this.initialTransformX = 0;
- this.initialTransformY = 0;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Set diagram name.
- * @param n name.
- */
- setName(n) {
- this.svg.select('').text(n);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get SVG from diagram.
- * @returns {*|string}
- */
- getSVG() {
- const svg = this.svg.node().outerHTML;
- return svg.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Select message by ID.
- * @param id message ID.
- */
- selectMessage(id) {
- const sel = this.svg.selectAll('g.asdcs-diagram-message-container');
- sel.classed('asdcs-active', false);
- sel.selectAll('rect.asdcs-diagram-message-bg').attr('filter', null);
- if (id) {
- const parent = this.svg.select(`g.asdcs-diagram-message-container[data-id="${id}"]`);
- parent.classed('asdcs-active', true);
- parent.selectAll('rect.asdcs-diagram-message-bg').attr('filter', 'url(#asdcsSvgHighlight)');
- }
- this._showNotesPopup(id);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Select lifeline by ID.
- * @param id lifeline ID.
- */
- selectLifeline(id) {
- const sel = this.svg.selectAll('g.asdcs-diagram-lifeline-container');
- sel.classed('asdcs-active', false);
- sel.selectAll('rect').attr('filter', null);
- if (id) {
- const parent = this.svg.select(`g.asdcs-diagram-lifeline-container[data-id="${id}"]`);
- parent.selectAll('rect').attr('filter', 'url(#asdcsSvgHighlight)');
- parent.classed('asdcs-active', true);
- }
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle resize, including initial sizing.
- */
- handleResize() {
- if (this.wrapper) {
- const height = this.wrapper.offsetHeight;
- const width = this.wrapper.offsetWidth;
- if (this.state.height !== height || this.state.width !== width) {
- this.setState({ height, width });
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct React view.
+ * @param props properties.
+ * @param context context.
+ */
+ constructor(props, context) {
+ super(props, context);
+
+ this.application = Common.assertNotNull(props.application);
+ this.options = this.application.getOptions().diagram;
+
+ this.events = {};
+ this.state = {
+ height: 0,
+ width: 0
+ };
+
+ this.templates = {
+ diagram: _template(require('./templates/diagram.html')),
+ lifeline: _template(require('./templates/lifeline.html')),
+ message: _template(require('./templates/message.html')),
+ occurrence: _template(require('./templates/occurrence.html')),
+ fragment: _template(require('./templates/fragment.html')),
+ title: _template(require('./templates/title.html'))
+ };
+
+ this.handleResize = this.handleResize.bind(this);
+ this.initialTransformX = 0;
+ this.initialTransformY = 0;
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * (Re)render diagram.
- */
- render() {
-
- const model = this.application.getModel();
- const modelJSON = model.unwrap();
- const name = modelJSON.diagram.metadata.name;
- const options = this.application.getOptions();
- const titleHeight = options.diagram.title.height;
- const titleClass = (titleHeight && titleHeight > 0) ? `height:${titleHeight}` : 'asdcs-hidden';
-
- return (
- <div className="asdcs-diagram">
- <div className={`asdcs-diagram-name ${titleClass}`}>{name}</div>
- <div className="asdcs-diagram-svg" ref={(r) => { this.wrapper = r; }}></div>
- <Popup visible={false} ref={(r) => { this.popup = r; }} />
- </div>
- );
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- redraw() {
- this.updateSVG();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Initial render.
- */
- componentDidMount() {
- window.addEventListener('resize', this.handleResize);
- this.updateSVG();
-
- // Insurance:
-
- setTimeout(() => {
- this.handleResize();
- }, 500);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- componentWillUnmount() {
- window.removeEventListener('resize', this.handleResize);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render on update.
- */
- componentDidUpdate() {
- this.updateSVG();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Redraw SVG diagram. So far it's fast enough that it doesn't seem to matter whether
- * it's completely redrawn.
- */
- updateSVG() {
-
- if (!this.svg) {
- const svgparams = _merge({}, this.options.svg);
- this.wrapper.innerHTML = this.templates.diagram(svgparams);
- this.svg = d3.select(this.wrapper).select('svg');
- }
-
- if (this.state.height === 0) {
-
- // We'll get a resize event, and the height will be non-zero when it's actually time.
- return;
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- if (this.state.height && this.state.width) {
- const margin = this.options.svg.margin;
- const x = -margin;
- const y = -margin;
- const height = this.state.height + (margin * 2);
- const width = this.state.width + (margin * 2);
- const viewBox = `${x} ${y} ${width} ${height}`;
- this.svg.attr('viewBox', viewBox);
+ /**
+ * Set diagram name.
+ * @param n name.
+ */
+ setName(n) {
+ this.svg.select('').text(n);
}
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // If we've already rendered, then save the current scale/translate so that we
- // can reapply it after rendering.
-
- const gContentSelection = this.svg.selectAll('g.asdcs-diagram-content');
- if (gContentSelection.size() === 1) {
- const transform = gContentSelection.attr('transform');
- if (transform) {
- this.savedTransform = transform;
- }
+ /**
+ * Get SVG from diagram.
+ * @returns {*|string}
+ */
+ getSVG() {
+ const svg = this.svg.node().outerHTML;
+ return svg.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
}
- // Empty the document. We're starting again.
-
- this.svg.selectAll('.asdcs-diagram-content').remove();
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Select message by ID.
+ * @param id message ID.
+ */
+ selectMessage(id) {
+ const sel = this.svg.selectAll('g.asdcs-diagram-message-container');
+ sel.classed('asdcs-active', false);
+ sel.selectAll('rect.asdcs-diagram-message-bg').attr('filter', null);
+ if (id) {
+ const parent = this.svg.select(
+ `g.asdcs-diagram-message-container[data-id="${id}"]`
+ );
+ parent.classed('asdcs-active', true);
+ parent
+ .selectAll('rect.asdcs-diagram-message-bg')
+ .attr('filter', 'url(#asdcsSvgHighlight)');
+ }
+ this._showNotesPopup(id);
+ }
- // Extract the model.
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Select lifeline by ID.
+ * @param id lifeline ID.
+ */
+ selectLifeline(id) {
+ const sel = this.svg.selectAll('g.asdcs-diagram-lifeline-container');
+ sel.classed('asdcs-active', false);
+ sel.selectAll('rect').attr('filter', null);
+ if (id) {
+ const parent = this.svg.select(
+ `g.asdcs-diagram-lifeline-container[data-id="${id}"]`
+ );
+ parent.selectAll('rect').attr('filter', 'url(#asdcsSvgHighlight)');
+ parent.classed('asdcs-active', true);
+ }
+ }
- const model = this.application.getModel();
- if (!model) {
- return;
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle resize, including initial sizing.
+ */
+ handleResize() {
+ if (this.wrapper) {
+ const height = this.wrapper.offsetHeight;
+ const width = this.wrapper.offsetWidth;
+ if (this.state.height !== height || this.state.width !== width) {
+ this.setState({ height, width });
+ }
+ }
}
- const modelJSON = model.unwrap();
- // Extract dimension options.
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * (Re)render diagram.
+ */
+ render() {
+ const model = this.application.getModel();
+ const modelJSON = model.unwrap();
+ const name = modelJSON.diagram.metadata.name;
+ const options = this.application.getOptions();
+ const titleHeight = options.diagram.title.height;
+ const titleClass =
+ titleHeight && titleHeight > 0
+ ? `height:${titleHeight}`
+ : 'asdcs-hidden';
+
+ return (
+ <div className="asdcs-diagram">
+ <div className={`asdcs-diagram-name ${titleClass}`}>{name}</div>
+ <div
+ className="asdcs-diagram-svg"
+ ref={r => {
+ this.wrapper = r;
+ }}
+ />
+ <Popup
+ visible={false}
+ ref={r => {
+ this.popup = r;
+ }}
+ />
+ </div>
+ );
+ }
- const header = this.options.lifelines.header;
- const spacing = this.options.lifelines.spacing;
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // Make separate container elements so that we can control Z order.
+ redraw() {
+ this.updateSVG();
+ }
- const gContent = this.svg.append('g').attr('class', 'asdcs-diagram-content');
- const gLifelines = gContent.append('g').attr('class', 'asdcs-diagram-lifelines');
- const gCanvas = gContent.append('g').attr('class', 'asdcs-diagram-canvas');
- gCanvas.append('g').attr('class', 'asdcs-diagram-occurrences');
- gCanvas.append('g').attr('class', 'asdcs-diagram-fragments');
- gCanvas.append('g').attr('class', 'asdcs-diagram-messages');
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // Lifelines -----------------------------------------------------------------------------------
+ /**
+ * Initial render.
+ */
+ componentDidMount() {
+ window.addEventListener('resize', this.handleResize);
+ this.updateSVG();
- const actorsById = {};
- const positionsByMessageId = {};
- const lifelines = [];
- for (const actor of modelJSON.diagram.lifelines) {
- const x = (header.width / 2) + (lifelines.length * spacing.horizontal);
- Diagram._processLifeline(actor, x);
- lifelines.push({ x, actor });
- actorsById[actor.id] = actor;
- }
+ // Insurance:
- // Messages ------------------------------------------------------------------------------------
-
- // Analyze occurrence information.
-
- const occurrences = model.analyzeOccurrences();
- const fragments = model.analyzeFragments();
- let y = this.options.lifelines.header.height + spacing.vertical;
- let messageIndex = 0;
- for (const step of modelJSON.diagram.steps) {
- if (step.message) {
- positionsByMessageId[step.message.id] = positionsByMessageId[step.message.id] || {};
- positionsByMessageId[step.message.id].y = y;
- this._drawMessage(gCanvas, step.message, y, actorsById,
- positionsByMessageId, ++messageIndex, occurrences, fragments);
- }
- y += spacing.vertical;
+ setTimeout(() => {
+ this.handleResize();
+ }, 500);
}
- // ---------------------------------------------------------------------------------------------
-
- // Draw the actual (dashed) lifelines in a background <g>.
-
- this._drawLifelines(gLifelines, lifelines, y);
-
- // Initialize mouse event handlers.
-
- this._initMouseEvents(gLifelines, gCanvas);
-
- // Scale to fit.
-
- const bb = gContent.node().getBBox();
- this._initZoom(gContent, bb.width, bb.height);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Draw message into SVG canvas.
- * @param gCanvas container.
- * @param message message to be rendered.
- * @param y current y position.
- * @param actorsById actor lookup.
- * @param positionsByMessageId x- and y-position of each message.
- * @param messageIndex where we are in the set of messages to be rendered.
- * @param oData occurrences info.
- * @param fData fragments info.
- * @private
- */
- _drawMessage(gCanvas, message, y, actorsById, positionsByMessageId,
- messageIndex, oData, fData) {
-
- Common.assertNotNull(oData);
-
- const request = message.type === 'request';
- const fromActor = request ? actorsById[message.from] : actorsById[message.to];
- const toActor = request ? actorsById[message.to] : actorsById[message.from];
-
- if (!fromActor) {
- Logger.warn(`Cannot draw message ${JSON.stringify(message)}: 'from' not found.`);
- return;
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- if (!toActor) {
- Logger.warn(`Cannot draw message ${JSON.stringify(message)}: 'to' not found.`);
- return;
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.handleResize);
}
- // Occurrences. --------------------------------------------------------------------------------
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- if (message.occurrence) {
- Logger.debug(`Found occurrence for ${message.name}: ${JSON.stringify(message.occurrence)}`);
+ /**
+ * Render on update.
+ */
+ componentDidUpdate() {
+ this.updateSVG();
}
- const activeTo = Diagram._calcActive(oData, toActor.id);
- this._drawOccurrence(gCanvas, oData, positionsByMessageId, fromActor, message.id);
- this._drawOccurrence(gCanvas, oData, positionsByMessageId, toActor, message.id);
- const activeFrom = Diagram._calcActive(oData, fromActor.id);
-
- // Messages. -----------------------------------------------------------------------------------
-
- const gMessages = gCanvas.select('g.asdcs-diagram-messages');
-
- // Save positions for later.
-
- const positions = positionsByMessageId[message.id];
- positions.x0 = fromActor.x;
- positions.x1 = toActor.x;
-
- // Calculate.
- const leftToRight = fromActor.x < toActor.x;
- const loopback = (message.to === message.from);
- const x1 = this._calcMessageX(activeTo, toActor.x, true, leftToRight);
- const x0 = loopback ? x1 : this._calcMessageX(activeFrom, fromActor.x, false, leftToRight);
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Redraw SVG diagram. So far it's fast enough that it doesn't seem to matter whether
+ * it's completely redrawn.
+ */
+ updateSVG() {
+ if (!this.svg) {
+ const svgparams = _merge({}, this.options.svg);
+ this.wrapper.innerHTML = this.templates.diagram(svgparams);
+ this.svg = d3.select(this.wrapper).select('svg');
+ }
- let messagePath;
- if (loopback) {
+ if (this.state.height === 0) {
+ // We'll get a resize event, and the height will be non-zero when it's actually time.
- // To self.
+ return;
+ }
- messagePath = `M${x1},${y}`;
- messagePath = `${messagePath} L${x1 + 200},${y}`;
- messagePath = `${messagePath} L${x1 + 200},${y + 50}`;
- messagePath = `${messagePath} L${x1},${y + 50}`;
- } else {
+ if (this.state.height && this.state.width) {
+ const margin = this.options.svg.margin;
+ const x = -margin;
+ const y = -margin;
+ const height = this.state.height + margin * 2;
+ const width = this.state.width + margin * 2;
+ const viewBox = `${x} ${y} ${width} ${height}`;
+ this.svg.attr('viewBox', viewBox);
+ }
- // Between lifelines.
+ // If we've already rendered, then save the current scale/translate so that we
+ // can reapply it after rendering.
- messagePath = `M${x0},${y}`;
- messagePath = `${messagePath} L${x1},${y}`;
- }
+ const gContentSelection = this.svg.selectAll('g.asdcs-diagram-content');
+ if (gContentSelection.size() === 1) {
+ const transform = gContentSelection.attr('transform');
+ if (transform) {
+ this.savedTransform = transform;
+ }
+ }
- const styles = Diagram._getMessageStyles(message);
+ // Empty the document. We're starting again.
- // Split message over lines.
+ this.svg.selectAll('.asdcs-diagram-content').remove();
- const messageWithPrefix = `${messageIndex}. ${message.name}`;
- const maxLines = this.options.messages.label.maxLines;
- const wrapWords = this.options.messages.label.wrapWords;
- const wrapLines = this.options.messages.label.wrapLines;
- const messageLines = Common.tokenize(messageWithPrefix, wrapWords, wrapLines, maxLines);
+ // Extract the model.
- const messageTxt = this.templates.message({
- id: message.id,
- classes: styles.css,
- marker: styles.marker,
- dasharray: styles.dasharray,
- labels: messageLines,
- lines: maxLines,
- path: messagePath,
- index: messageIndex,
- x0, x1, y,
- });
+ const model = this.application.getModel();
+ if (!model) {
+ return;
+ }
+ const modelJSON = model.unwrap();
+
+ // Extract dimension options.
+
+ const header = this.options.lifelines.header;
+ const spacing = this.options.lifelines.spacing;
+
+ // Make separate container elements so that we can control Z order.
+
+ const gContent = this.svg
+ .append('g')
+ .attr('class', 'asdcs-diagram-content');
+ const gLifelines = gContent
+ .append('g')
+ .attr('class', 'asdcs-diagram-lifelines');
+ const gCanvas = gContent
+ .append('g')
+ .attr('class', 'asdcs-diagram-canvas');
+ gCanvas.append('g').attr('class', 'asdcs-diagram-occurrences');
+ gCanvas.append('g').attr('class', 'asdcs-diagram-fragments');
+ gCanvas.append('g').attr('class', 'asdcs-diagram-messages');
+
+ // Lifelines -----------------------------------------------------------------------------------
+
+ const actorsById = {};
+ const positionsByMessageId = {};
+ const lifelines = [];
+ for (const actor of modelJSON.diagram.lifelines) {
+ const x = header.width / 2 + lifelines.length * spacing.horizontal;
+ Diagram._processLifeline(actor, x);
+ lifelines.push({ x, actor });
+ actorsById[actor.id] = actor;
+ }
- const messageEl = Common.txt2dom(messageTxt);
- const gMessage = gMessages.append('g');
- Common.dom2svg(messageEl, gMessage);
+ // Messages ------------------------------------------------------------------------------------
+
+ // Analyze occurrence information.
+
+ const occurrences = model.analyzeOccurrences();
+ const fragments = model.analyzeFragments();
+ let y = this.options.lifelines.header.height + spacing.vertical;
+ let messageIndex = 0;
+ for (const step of modelJSON.diagram.steps) {
+ if (step.message) {
+ positionsByMessageId[step.message.id] =
+ positionsByMessageId[step.message.id] || {};
+ positionsByMessageId[step.message.id].y = y;
+ this._drawMessage(
+ gCanvas,
+ step.message,
+ y,
+ actorsById,
+ positionsByMessageId,
+ ++messageIndex,
+ occurrences,
+ fragments
+ );
+ }
+ y += spacing.vertical;
+ }
- // Set the background's bounding box to that of the text,
- // so that they fit snugly.
+ // ---------------------------------------------------------------------------------------------
- const labelBB = gMessage.select('.asdcs-diagram-message-label').node().getBBox();
- gMessage.select('.asdcs-diagram-message-label-bg')
- .attr('x', labelBB.x)
- .attr('y', labelBB.y)
- .attr('height', labelBB.height)
- .attr('width', labelBB.width);
+ // Draw the actual (dashed) lifelines in a background <g>.
- // Fragments. ----------------------------------------------------------------------------------
+ this._drawLifelines(gLifelines, lifelines, y);
- const fragment = fData[message.id];
- if (fragment) {
+ // Initialize mouse event handlers.
- // It ends on this message.
+ this._initMouseEvents(gLifelines, gCanvas);
- this._drawFragment(gCanvas, fragment, positionsByMessageId);
+ // Scale to fit.
+ const bb = gContent.node().getBBox();
+ this._initZoom(gContent, bb.width, bb.height);
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Draw message into SVG canvas.
+ * @param gCanvas container.
+ * @param message message to be rendered.
+ * @param y current y position.
+ * @param actorsById actor lookup.
+ * @param positionsByMessageId x- and y-position of each message.
+ * @param messageIndex where we are in the set of messages to be rendered.
+ * @param oData occurrences info.
+ * @param fData fragments info.
+ * @private
+ */
+ _drawMessage(
+ gCanvas,
+ message,
+ y,
+ actorsById,
+ positionsByMessageId,
+ messageIndex,
+ oData,
+ fData
+ ) {
+ Common.assertNotNull(oData);
+
+ const request = message.type === 'request';
+ const fromActor = request
+ ? actorsById[message.from]
+ : actorsById[message.to];
+ const toActor = request
+ ? actorsById[message.to]
+ : actorsById[message.from];
+
+ if (!fromActor) {
+ Logger.warn(
+ `Cannot draw message ${JSON.stringify(
+ message
+ )}: 'from' not found.`
+ );
+ return;
+ }
- /**
- * Draw a single occurrence.
- * @param gCanvas container.
- * @param oData occurrence data.
- * @param positionsByMessageId map of y positions by message ID.
- * @param actor wrapper containing lifeline ID (.id), position (.x) and name (.name).
- * @param messageId message identifier.
- * @private
- */
- _drawOccurrence(gCanvas, oData, positionsByMessageId, actor, messageId) {
+ if (!toActor) {
+ Logger.warn(
+ `Cannot draw message ${JSON.stringify(
+ message
+ )}: 'to' not found.`
+ );
+ return;
+ }
- Common.assertType(oData, 'Object');
- Common.assertType(positionsByMessageId, 'Object');
- Common.assertType(actor, 'Object');
- Common.assertType(messageId, 'String');
+ // Occurrences. --------------------------------------------------------------------------------
- const gOccurrences = gCanvas.select('g.asdcs-diagram-occurrences');
+ if (message.occurrence) {
+ Logger.debug(
+ `Found occurrence for ${message.name}: ${JSON.stringify(
+ message.occurrence
+ )}`
+ );
+ }
+ const activeTo = Diagram._calcActive(oData, toActor.id);
+ this._drawOccurrence(
+ gCanvas,
+ oData,
+ positionsByMessageId,
+ fromActor,
+ message.id
+ );
+ this._drawOccurrence(
+ gCanvas,
+ oData,
+ positionsByMessageId,
+ toActor,
+ message.id
+ );
+ const activeFrom = Diagram._calcActive(oData, fromActor.id);
+
+ // Messages. -----------------------------------------------------------------------------------
+
+ const gMessages = gCanvas.select('g.asdcs-diagram-messages');
+
+ // Save positions for later.
+
+ const positions = positionsByMessageId[message.id];
+ positions.x0 = fromActor.x;
+ positions.x1 = toActor.x;
+
+ // Calculate.
+
+ const leftToRight = fromActor.x < toActor.x;
+ const loopback = message.to === message.from;
+ const x1 = this._calcMessageX(activeTo, toActor.x, true, leftToRight);
+ const x0 = loopback
+ ? x1
+ : this._calcMessageX(activeFrom, fromActor.x, false, leftToRight);
+
+ let messagePath;
+ if (loopback) {
+ // To self.
+
+ messagePath = `M${x1},${y}`;
+ messagePath = `${messagePath} L${x1 + 200},${y}`;
+ messagePath = `${messagePath} L${x1 + 200},${y + 50}`;
+ messagePath = `${messagePath} L${x1},${y + 50}`;
+ } else {
+ // Between lifelines.
- const oOptions = this.options.lifelines.occurrences;
- const oWidth = oOptions.width;
- const oHalfWidth = oWidth / 2;
- const oForeshortening = oOptions.foreshortening;
- const oMarginTop = oOptions.marginTop;
- const oMarginBottom = oOptions.marginBottom;
- const o = oData[actor.id];
+ messagePath = `M${x0},${y}`;
+ messagePath = `${messagePath} L${x1},${y}`;
+ }
- const active = Diagram._calcActive(oData, actor.id);
+ const styles = Diagram._getMessageStyles(message);
+
+ // Split message over lines.
+
+ const messageWithPrefix = `${messageIndex}. ${message.name}`;
+ const maxLines = this.options.messages.label.maxLines;
+ const wrapWords = this.options.messages.label.wrapWords;
+ const wrapLines = this.options.messages.label.wrapLines;
+ const messageLines = Common.tokenize(
+ messageWithPrefix,
+ wrapWords,
+ wrapLines,
+ maxLines
+ );
+
+ const messageTxt = this.templates.message({
+ id: message.id,
+ classes: styles.css,
+ marker: styles.marker,
+ dasharray: styles.dasharray,
+ labels: messageLines,
+ lines: maxLines,
+ path: messagePath,
+ index: messageIndex,
+ x0,
+ x1,
+ y
+ });
+
+ const messageEl = Common.txt2dom(messageTxt);
+ const gMessage = gMessages.append('g');
+ Common.dom2svg(messageEl, gMessage);
+
+ // Set the background's bounding box to that of the text,
+ // so that they fit snugly.
+
+ const labelBB = gMessage
+ .select('.asdcs-diagram-message-label')
+ .node()
+ .getBBox();
+ gMessage
+ .select('.asdcs-diagram-message-label-bg')
+ .attr('x', labelBB.x)
+ .attr('y', labelBB.y)
+ .attr('height', labelBB.height)
+ .attr('width', labelBB.width);
- const x = (actor.x - oHalfWidth) + (active * oWidth);
- const positions = positionsByMessageId[messageId];
- const y = positions.y;
+ // Fragments. ----------------------------------------------------------------------------------
- let draw = true;
- if (o) {
+ const fragment = fData[message.id];
+ if (fragment) {
+ // It ends on this message.
- if (o.start[messageId]) {
+ this._drawFragment(gCanvas, fragment, positionsByMessageId);
+ }
+ }
- // Starting, but drawing nothing until we find the end.
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Draw a single occurrence.
+ * @param gCanvas container.
+ * @param oData occurrence data.
+ * @param positionsByMessageId map of y positions by message ID.
+ * @param actor wrapper containing lifeline ID (.id), position (.x) and name (.name).
+ * @param messageId message identifier.
+ * @private
+ */
+ _drawOccurrence(gCanvas, oData, positionsByMessageId, actor, messageId) {
+ Common.assertType(oData, 'Object');
+ Common.assertType(positionsByMessageId, 'Object');
+ Common.assertType(actor, 'Object');
+ Common.assertType(messageId, 'String');
+
+ const gOccurrences = gCanvas.select('g.asdcs-diagram-occurrences');
+
+ const oOptions = this.options.lifelines.occurrences;
+ const oWidth = oOptions.width;
+ const oHalfWidth = oWidth / 2;
+ const oForeshortening = oOptions.foreshortening;
+ const oMarginTop = oOptions.marginTop;
+ const oMarginBottom = oOptions.marginBottom;
+ const o = oData[actor.id];
+
+ const active = Diagram._calcActive(oData, actor.id);
+
+ const x = actor.x - oHalfWidth + active * oWidth;
+ const positions = positionsByMessageId[messageId];
+ const y = positions.y;
+
+ let draw = true;
+ if (o) {
+ if (o.start[messageId]) {
+ // Starting, but drawing nothing until we find the end.
+
+ o.active.push(messageId);
+ draw = false;
+ } else if (active > 0) {
+ const startMessageId = o.stop[messageId];
+ if (startMessageId) {
+ // OK, it ends here. Draw the occurrence box.
+
+ o.active.pop();
+ const foreshorteningY = active * oForeshortening;
+ const startY = positionsByMessageId[startMessageId].y;
+ const height =
+ oMarginTop +
+ oMarginBottom +
+ (y - startY) -
+ foreshorteningY * 2;
+ const oProps = {
+ x: actor.x - oHalfWidth + (active - 1) * oWidth,
+ y: startY - oMarginTop + foreshorteningY,
+ height,
+ width: oWidth
+ };
+
+ const occurrenceTxt = this.templates.occurrence(oProps);
+ const occurrenceEl = Common.txt2dom(occurrenceTxt);
+ Common.dom2svg(occurrenceEl, gOccurrences.append('g'));
+ }
+ draw = false;
+ }
+ }
- o.active.push(messageId);
- draw = false;
+ if (draw) {
+ // Seems this is a singleton occurrence. We just draw a wee box around it.
+
+ const height = oMarginTop + oMarginBottom;
+ const occurrenceProperties = {
+ x,
+ y: y - oMarginTop,
+ height,
+ width: oWidth
+ };
+ const defaultTxt = this.templates.occurrence(occurrenceProperties);
+ const defaultEl = Common.txt2dom(defaultTxt);
+ Common.dom2svg(defaultEl, gOccurrences.append('g'));
+ }
+ }
- } else if (active > 0) {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Draw box(es) around fragment(s).
+ * @param gCanvas container.
+ * @param fragment fragment definition, corresponding to its final (stop) message.
+ * @param positionsByMessageId message dimensions.
+ * @private
+ */
+ _drawFragment(gCanvas, fragment, positionsByMessageId) {
+ const optFragments = this.options.fragments;
+ const gFragments = gCanvas.select('g.asdcs-diagram-fragments');
+ const p1 = positionsByMessageId[fragment.stop];
+ if (p1 && fragment.start && fragment.start.length > 0) {
+ for (const start of fragment.start) {
+ const message = this.application
+ .getModel()
+ .getMessageById(start);
+ const bounds = this._calcFragmentBounds(
+ message,
+ fragment,
+ positionsByMessageId
+ );
+ if (bounds) {
+ const maxLines = this.options.fragments.label.maxLines;
+ const wrapWords = this.options.fragments.label.wrapWords;
+ const wrapLines = this.options.fragments.label.wrapLines;
+ const lines = Common.tokenize(
+ message.fragment.guard,
+ wrapWords,
+ wrapLines,
+ maxLines
+ );
+
+ const params = {
+ id: start,
+ x: bounds.x0 - optFragments.leftMargin,
+ y: bounds.y0 - optFragments.topMargin,
+ height:
+ bounds.y1 - bounds.y0 + optFragments.heightMargin,
+ width: bounds.x1 - bounds.x0 + optFragments.widthMargin,
+ operator: message.fragment.operator || 'alt',
+ lines
+ };
+
+ const fragmentTxt = this.templates.fragment(params);
+ const fragmentEl = Common.txt2dom(fragmentTxt);
+ const gFragment = gFragments.append('g');
+ Common.dom2svg(fragmentEl, gFragment);
+
+ const labelBB = gFragment
+ .select('.asdcs-diagram-fragment-guard')
+ .node()
+ .getBBox();
+ gFragment
+ .select('.asdcs-diagram-fragment-guard-bg')
+ .attr('x', labelBB.x)
+ .attr('y', labelBB.y)
+ .attr('height', labelBB.height)
+ .attr('width', labelBB.width);
+ } else {
+ Logger.warn(`Bad fragment: ${JSON.stringify(fragment)}`);
+ }
+ }
+ }
+ }
- const startMessageId = o.stop[messageId];
- if (startMessageId) {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ _calcFragmentBounds(startMessage, fragment, positionsByMessageId) {
+ if (startMessage) {
+ const steps = this.application.getModel().unwrap().diagram.steps;
+ const bounds = { x0: 99999, x1: 0, y0: 99999, y1: 0 };
+ let foundStart = false;
+ let foundStop = false;
+ for (const step of steps) {
+ const message = step.message;
+ if (message) {
+ if (message.id === startMessage.id) {
+ foundStart = true;
+ }
+ if (foundStart && !foundStop) {
+ const positions = positionsByMessageId[message.id];
+ if (positions) {
+ bounds.x0 = Math.min(
+ bounds.x0,
+ Math.min(positions.x0, positions.x1)
+ );
+ bounds.y0 = Math.min(bounds.y0, positions.y);
+ bounds.x1 = Math.max(
+ bounds.x1,
+ Math.max(positions.x0, positions.x1)
+ );
+ bounds.y1 = Math.max(bounds.y1, positions.y);
+ } else {
+ // This probably means it hasn't been recorded yet, which is fine, because
+ // we draw fragments from where they END.
+ foundStop = true;
+ }
+ }
+
+ if (message.id === fragment.stop) {
+ foundStop = true;
+ }
+ }
+ }
+ return bounds;
+ }
+ return undefined;
+ }
- // OK, it ends here. Draw the occurrence box.
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Draw all lifelines.
+ * @param gLifelines lifelines container.
+ * @param lifelines lifelines definitions.
+ * @param y height.
+ * @private
+ */
+ _drawLifelines(gLifelines, lifelines, y) {
+ const maxLines = this.options.lifelines.header.maxLines;
+ const wrapWords = this.options.lifelines.header.wrapWords;
+ const wrapLines = this.options.lifelines.header.wrapLines;
+
+ for (const lifeline of lifelines) {
+ const lines = Common.tokenize(
+ lifeline.actor.name,
+ wrapWords,
+ wrapLines,
+ maxLines
+ );
+ const lifelineTxt = this.templates.lifeline({
+ x: lifeline.x,
+ y0: 0,
+ y1: y,
+ lines,
+ rows: maxLines,
+ headerHeight: this.options.lifelines.header.height,
+ headerWidth: this.options.lifelines.header.width,
+ id: lifeline.actor.id
+ });
+
+ const lifelineEl = Common.txt2dom(lifelineTxt);
+ Common.dom2svg(lifelineEl, gLifelines.append('g'));
+ }
+ }
- o.active.pop();
- const foreshorteningY = active * oForeshortening;
- const startY = positionsByMessageId[startMessageId].y;
- const height = ((oMarginTop + oMarginBottom) + (y - startY)) - (foreshorteningY * 2);
- const oProps = {
- x: (actor.x - oHalfWidth) + ((active - 1) * oWidth),
- y: ((startY - oMarginTop) + foreshorteningY),
- height,
- width: oWidth,
- };
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Initialize all mouse events.
+ * @param gLifelines lifelines container.
+ * @param gCanvas top-level canvas container.
+ * @private
+ */
+ _initMouseEvents(gLifelines, gCanvas) {
+ const self = this;
+ const source = 'asdcs';
+ const origin = `${window.location.protocol}//${window.location.host}`;
+
+ let timer;
+ gLifelines
+ .selectAll('.asdcs-diagram-lifeline-selectable')
+ .on('mouseenter', function f() {
+ timer = setTimeout(() => {
+ self.application.selectLifeline(
+ d3.select(this.parentNode).attr('data-id')
+ );
+ }, 150);
+ })
+ .on('mouseleave', () => {
+ clearTimeout(timer);
+ self.application.selectLifeline();
+ })
+ .on('click', function f() {
+ const id = d3.select(this.parentNode).attr('data-id');
+ window.postMessage({ source, id, type: 'lifeline' }, origin);
+ });
+
+ gLifelines
+ .selectAll('.asdcs-diagram-lifeline-heading-box')
+ .on('mouseenter', function f() {
+ timer = setTimeout(() => {
+ self.application.selectLifeline(
+ d3.select(this.parentNode).attr('data-id')
+ );
+ }, 150);
+ })
+ .on('mouseleave', () => {
+ clearTimeout(timer);
+ self.application.selectLifeline();
+ })
+ .on('click', function f() {
+ const id = d3.select(this.parentNode).attr('data-id');
+ window.postMessage(
+ { source, id, type: 'lifelineHeader' },
+ origin
+ );
+ });
+
+ gCanvas
+ .selectAll('.asdcs-diagram-message-selectable')
+ .on('mouseenter', function f() {
+ self.events.message = { x: d3.event.pageX, y: d3.event.pageY };
+ timer = setTimeout(() => {
+ self.application.selectMessage(
+ d3.select(this.parentNode).attr('data-id')
+ );
+ }, 200);
+ })
+ .on('mouseleave', () => {
+ delete self.events.message;
+ clearTimeout(timer);
+ self.application.selectMessage();
+ })
+ .on('click', function f() {
+ const id = d3.select(this.parentNode).attr('data-id');
+ window.postMessage({ source, id, type: 'message' }, origin);
+ });
+ }
- const occurrenceTxt = this.templates.occurrence(oProps);
- const occurrenceEl = Common.txt2dom(occurrenceTxt);
- Common.dom2svg(occurrenceEl, gOccurrences.append('g'));
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get CSS classes to be applied to a message, according to whether request/response
+ * or synchronous/asynchronous.
+ * @param message message being rendered.
+ * @returns CSS class name(s).
+ * @private
+ */
+ static _getMessageStyles(message) {
+ let marker = 'asdcsDiagramArrowSolid';
+ let dasharray = '';
+ let css = 'asdcs-diagram-message';
+ if (message.type === 'request') {
+ css = `${css} asdcs-diagram-message-request`;
+ } else {
+ css = `${css} asdcs-diagram-message-response`;
+ marker = 'asdcsDiagramArrowOpen';
+ dasharray = '30, 10';
+ }
+ if (message.asynchronous) {
+ css = `${css} asdcs-diagram-message-asynchronous`;
+ marker = 'asdcsDiagramArrowOpen';
+ } else {
+ css = `${css} asdcs-diagram-message-synchronous`;
}
- draw = false;
- }
+
+ return { css, marker, dasharray };
}
- if (draw) {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Initialize or reinitialize zoom. This sets the initial zoom in the case of
+ * a re-rendering, and initializes the eventhandling in all cases.
+ *
+ * It does some fairly risky parsing of the 'transform' attribute, assuming that it
+ * can contain scale() and translate(). But only the zoom handler and us are writing
+ * the transform values, so that's probably OK.
+ *
+ * @param gContent container.
+ * @param width diagram width.
+ * @param height diagram height.
+ * @private
+ */
+ _initZoom(gContent, width, height) {
+ const zoomed = function zoomed() {
+ if (!this.initialTransformX && !this.initialTransformY) {
+ this.initialTransformX = d3.event.transform.x;
+ this.initialTransformY = d3.event.transform.y;
+ }
- // Seems this is a singleton occurrence. We just draw a wee box around it.
+ gContent.attr(
+ 'transform',
+ `translate(${d3.event.transform.x -
+ this.initialTransformX}, ${d3.event.transform.y -
+ this.initialTransformY})scale(${d3.event.transform.k}, ${
+ d3.event.transform.k
+ })`
+ );
+ };
+
+ const viewWidth = this.state.width || this.options.svg.width;
+ const viewHeight = this.state.height || this.options.svg.height;
+ const scaleMinimum = this.options.svg.scale.minimum;
+ const scaleWidth = viewWidth / width;
+ const scaleHeight = viewHeight / height;
+
+ let scale = scaleMinimum;
+ if (this.options.svg.scale.width) {
+ scale = Math.max(scale, scaleWidth);
+ }
+ if (this.options.svg.scale.height) {
+ scale = Math.min(scale, scaleHeight);
+ }
- const height = (oMarginTop + oMarginBottom);
- const occurrenceProperties = { x, y: y - oMarginTop, height, width: oWidth };
- const defaultTxt = this.templates.occurrence(occurrenceProperties);
- const defaultEl = Common.txt2dom(defaultTxt);
- Common.dom2svg(defaultEl, gOccurrences.append('g'));
- }
+ scale = Math.max(scale, scaleMinimum);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Draw box(es) around fragment(s).
- * @param gCanvas container.
- * @param fragment fragment definition, corresponding to its final (stop) message.
- * @param positionsByMessageId message dimensions.
- * @private
- */
- _drawFragment(gCanvas, fragment, positionsByMessageId) {
-
- const optFragments = this.options.fragments;
- const gFragments = gCanvas.select('g.asdcs-diagram-fragments');
- const p1 = positionsByMessageId[fragment.stop];
- if (p1 && fragment.start && fragment.start.length > 0) {
-
- for (const start of fragment.start) {
-
- const message = this.application.getModel().getMessageById(start);
- const bounds = this._calcFragmentBounds(message, fragment, positionsByMessageId);
- if (bounds) {
-
- const maxLines = this.options.fragments.label.maxLines;
- const wrapWords = this.options.fragments.label.wrapWords;
- const wrapLines = this.options.fragments.label.wrapLines;
- const lines = Common.tokenize(message.fragment.guard, wrapWords, wrapLines, maxLines);
-
- const params = {
- id: start,
- x: bounds.x0 - optFragments.leftMargin,
- y: bounds.y0 - optFragments.topMargin,
- height: (bounds.y1 - bounds.y0) + optFragments.heightMargin,
- width: (bounds.x1 - bounds.x0) + optFragments.widthMargin,
- operator: (message.fragment.operator || 'alt'),
- lines,
- };
-
- const fragmentTxt = this.templates.fragment(params);
- const fragmentEl = Common.txt2dom(fragmentTxt);
- const gFragment = gFragments.append('g');
- Common.dom2svg(fragmentEl, gFragment);
-
- const labelBB = gFragment.select('.asdcs-diagram-fragment-guard').node().getBBox();
- gFragment.select('.asdcs-diagram-fragment-guard-bg')
- .attr('x', labelBB.x)
- .attr('y', labelBB.y)
- .attr('height', labelBB.height)
- .attr('width', labelBB.width);
+ let translate = [0, 0];
+ if (this.savedTransform) {
+ const s = this.savedTransform;
+ const scaleStart = s.indexOf('scale(');
+ if (scaleStart !== -1) {
+ scale = parseFloat(s.substring(scaleStart + 6, s.length - 1));
+ }
+ const translateStart = s.indexOf('translate(');
+ if (translateStart !== -1) {
+ const spec = s.substring(
+ translateStart + 10,
+ s.indexOf(')', translateStart)
+ );
+ const tokens = spec.split(',');
+ translate = [parseFloat(tokens[0]), parseFloat(tokens[1])];
+ }
+ gContent.attr('transform', this.savedTransform);
} else {
- Logger.warn(`Bad fragment: ${JSON.stringify(fragment)}`);
+ gContent.attr('transform', `scale(${scale})`);
}
- }
- }
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- _calcFragmentBounds(startMessage, fragment, positionsByMessageId) {
- if (startMessage) {
- const steps = this.application.getModel().unwrap().diagram.steps;
- const bounds = { x0: 99999, x1: 0, y0: 99999, y1: 0 };
- let foundStart = false;
- let foundStop = false;
- for (const step of steps) {
- const message = step.message;
- if (message) {
- if (message.id === startMessage.id) {
- foundStart = true;
- }
- if (foundStart && !foundStop) {
- const positions = positionsByMessageId[message.id];
- if (positions) {
- bounds.x0 = Math.min(bounds.x0, Math.min(positions.x0, positions.x1));
- bounds.y0 = Math.min(bounds.y0, positions.y);
- bounds.x1 = Math.max(bounds.x1, Math.max(positions.x0, positions.x1));
- bounds.y1 = Math.max(bounds.y1, positions.y);
- } else {
- // This probably means it hasn't been recorded yet, which is fine, because
- // we draw fragments from where they END.
- foundStop = true;
- }
- }
- if (message.id === fragment.stop) {
- foundStop = true;
- }
- }
- }
- return bounds;
- }
- return undefined;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Draw all lifelines.
- * @param gLifelines lifelines container.
- * @param lifelines lifelines definitions.
- * @param y height.
- * @private
- */
- _drawLifelines(gLifelines, lifelines, y) {
-
- const maxLines = this.options.lifelines.header.maxLines;
- const wrapWords = this.options.lifelines.header.wrapWords;
- const wrapLines = this.options.lifelines.header.wrapLines;
-
- for (const lifeline of lifelines) {
- const lines = Common.tokenize(lifeline.actor.name, wrapWords, wrapLines, maxLines);
- const lifelineTxt = this.templates.lifeline({
- x: lifeline.x,
- y0: 0,
- y1: y,
- lines,
- rows: maxLines,
- headerHeight: this.options.lifelines.header.height,
- headerWidth: this.options.lifelines.header.width,
- id: lifeline.actor.id,
- });
-
- const lifelineEl = Common.txt2dom(lifelineTxt);
- Common.dom2svg(lifelineEl, gLifelines.append('g'));
- }
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Initialize all mouse events.
- * @param gLifelines lifelines container.
- * @param gCanvas top-level canvas container.
- * @private
- */
- _initMouseEvents(gLifelines, gCanvas) {
-
- const self = this;
- const source = 'asdcs';
- const origin = `${window.location.protocol}//${window.location.host}`;
-
- let timer;
- gLifelines.selectAll('.asdcs-diagram-lifeline-selectable')
- .on('mouseenter', function f() {
- timer = setTimeout(() => {
- self.application.selectLifeline(d3.select(this.parentNode).attr('data-id'));
- }, 150);
- })
- .on('mouseleave', () => {
- clearTimeout(timer);
- self.application.selectLifeline();
- })
- .on('click', function f() {
- const id = d3.select(this.parentNode).attr('data-id');
- window.postMessage({ source, id, type: 'lifeline' }, origin);
- });
-
- gLifelines.selectAll('.asdcs-diagram-lifeline-heading-box')
- .on('mouseenter', function f() {
- timer = setTimeout(() => {
- self.application.selectLifeline(d3.select(this.parentNode).attr('data-id'));
- }, 150);
- })
- .on('mouseleave', () => {
- clearTimeout(timer);
- self.application.selectLifeline();
- })
- .on('click', function f() {
- const id = d3.select(this.parentNode).attr('data-id');
- window.postMessage({ source, id, type: 'lifelineHeader' }, origin);
- });
-
- gCanvas.selectAll('.asdcs-diagram-message-selectable')
- .on('mouseenter', function f() {
- self.events.message = { x: d3.event.pageX, y: d3.event.pageY };
- timer = setTimeout(() => {
- self.application.selectMessage(d3.select(this.parentNode).attr('data-id'));
- }, 200);
- })
- .on('mouseleave', () => {
- delete self.events.message;
- clearTimeout(timer);
- self.application.selectMessage();
- })
- .on('click', function f() {
- const id = d3.select(this.parentNode).attr('data-id');
- window.postMessage({ source, id, type: 'message' }, origin);
- });
-
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get CSS classes to be applied to a message, according to whether request/response
- * or synchronous/asynchronous.
- * @param message message being rendered.
- * @returns CSS class name(s).
- * @private
- */
- static _getMessageStyles(message) {
-
- let marker = 'asdcsDiagramArrowSolid';
- let dasharray = '';
- let css = 'asdcs-diagram-message';
- if (message.type === 'request') {
- css = `${css} asdcs-diagram-message-request`;
- } else {
- css = `${css} asdcs-diagram-message-response`;
- marker = 'asdcsDiagramArrowOpen';
- dasharray = '30, 10';
- }
+ const zoom = d3.zoom().on('zoom', zoomed);
- if (message.asynchronous) {
- css = `${css} asdcs-diagram-message-asynchronous`;
- marker = 'asdcsDiagramArrowOpen';
- } else {
- css = `${css} asdcs-diagram-message-synchronous`;
- }
+ this.svg.call(zoom);
+ this.svg.call(zoom.scaleBy, scale);
- return { css, marker, dasharray };
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Initialize or reinitialize zoom. This sets the initial zoom in the case of
- * a re-rendering, and initializes the eventhandling in all cases.
- *
- * It does some fairly risky parsing of the 'transform' attribute, assuming that it
- * can contain scale() and translate(). But only the zoom handler and us are writing
- * the transform values, so that's probably OK.
- *
- * @param gContent container.
- * @param width diagram width.
- * @param height diagram height.
- * @private
- */
- _initZoom(gContent, width, height) {
-
- const zoomed = function zoomed() {
- if (!this.initialTransformX && !this.initialTransformY) {
- this.initialTransformX = d3.event.transform.x;
- this.initialTransformY = d3.event.transform.y;
- }
-
- gContent.attr('transform',
- `translate(${d3.event.transform.x - this.initialTransformX}, ${d3.event.transform.y
- - this.initialTransformY})scale(${d3.event.transform.k}, ${d3.event.transform.k})`);
- };
-
- const viewWidth = this.state.width || this.options.svg.width;
- const viewHeight = this.state.height || this.options.svg.height;
- const scaleMinimum = this.options.svg.scale.minimum;
- const scaleWidth = viewWidth / width;
- const scaleHeight = viewHeight / height;
-
- let scale = scaleMinimum;
- if (this.options.svg.scale.width) {
- scale = Math.max(scale, scaleWidth);
- }
- if (this.options.svg.scale.height) {
- scale = Math.min(scale, scaleHeight);
+ gContent.attr(
+ 'transform',
+ `translate(${translate[0]}, ${translate[1]})`
+ );
+ gContent.attr('transform', `scale(${scale})`);
}
- scale = Math.max(scale, scaleMinimum);
-
- let translate = [0, 0];
- if (this.savedTransform) {
- const s = this.savedTransform;
- const scaleStart = s.indexOf('scale(');
- if (scaleStart !== -1) {
- scale = parseFloat(s.substring(scaleStart + 6, s.length - 1));
- }
- const translateStart = s.indexOf('translate(');
- if (translateStart !== -1) {
- const spec = s.substring(translateStart + 10, s.indexOf(')', translateStart));
- const tokens = spec.split(',');
- translate = [parseFloat(tokens[0]), parseFloat(tokens[1])];
- }
-
- gContent.attr('transform', this.savedTransform);
- } else {
- gContent.attr('transform', `scale(${scale})`);
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Hide from the linter the fact that we're modifying the lifeline.
+ * @param lifeline to be updated with X position.
+ * @param x X position.
+ * @private
+ */
+ static _processLifeline(lifeline, x) {
+ const actor = lifeline;
+ actor.id = actor.id || actor.name;
+ actor.x = x;
}
- const zoom = d3.zoom()
- .on('zoom', zoomed);
-
- this.svg.call(zoom);
- this.svg.call(zoom.scaleBy, scale);
-
- gContent.attr('transform', `translate(${translate[0]}, ${translate[1]})`);
- gContent.attr('transform', `scale(${scale})`);
-
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Hide from the linter the fact that we're modifying the lifeline.
- * @param lifeline to be updated with X position.
- * @param x X position.
- * @private
- */
- static _processLifeline(lifeline, x) {
- const actor = lifeline;
- actor.id = actor.id || actor.name;
- actor.x = x;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Derive active occurrences for lifeline.
- * @param oData occurrences data.
- * @param lifelineId lifeline to be analyzed.
- * @returns {number}
- * @private
- */
- static _calcActive(oData, lifelineId) {
- const o = oData[lifelineId];
- let active = 0;
- if (o && o.active) {
- active = o.active.length;
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Derive active occurrences for lifeline.
+ * @param oData occurrences data.
+ * @param lifelineId lifeline to be analyzed.
+ * @returns {number}
+ * @private
+ */
+ static _calcActive(oData, lifelineId) {
+ const o = oData[lifelineId];
+ let active = 0;
+ if (o && o.active) {
+ active = o.active.length;
+ }
+ return active;
}
- return active;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Derive the X position of an occurrence on a lifeline, taking into account how
- * many occurrences are active.
- * @param active active count.
- * @param x lifeline X position; basis for offset.
- * @param arrow whether this is the arrow (to) end.
- * @param leftToRight whether this message goes left-to-right.
- * @returns {*} calculated X position for occurrence left-hand side.
- * @private
- */
- _calcMessageX(active, x, arrow, leftToRight) {
- const width = this.options.lifelines.occurrences.width;
- const halfWidth = width / 2;
- const active0 = Math.max(0, active - 1);
- let calculated = x + (active0 * width);
- if (arrow) {
- // End (ARROW).
- if (leftToRight) {
- calculated -= halfWidth;
- } else {
- calculated += halfWidth;
- }
- } else {
- // Start (NOT ARROW).
- if (leftToRight) {
- calculated += halfWidth;
- } else {
- calculated -= halfWidth;
- }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Derive the X position of an occurrence on a lifeline, taking into account how
+ * many occurrences are active.
+ * @param active active count.
+ * @param x lifeline X position; basis for offset.
+ * @param arrow whether this is the arrow (to) end.
+ * @param leftToRight whether this message goes left-to-right.
+ * @returns {*} calculated X position for occurrence left-hand side.
+ * @private
+ */
+ _calcMessageX(active, x, arrow, leftToRight) {
+ const width = this.options.lifelines.occurrences.width;
+ const halfWidth = width / 2;
+ const active0 = Math.max(0, active - 1);
+ let calculated = x + active0 * width;
+ if (arrow) {
+ // End (ARROW).
+ if (leftToRight) {
+ calculated -= halfWidth;
+ } else {
+ calculated += halfWidth;
+ }
+ } else {
+ // Start (NOT ARROW).
+ if (leftToRight) {
+ calculated += halfWidth;
+ } else {
+ calculated -= halfWidth;
+ }
+ }
+
+ return calculated;
}
- return calculated;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show popup upon hovering over a messages that has associated notes.
- * @param id
- * @private
- */
- _showNotesPopup(id) {
- if (this.popup) {
- if (id) {
- const message = this.application.getModel().getMessageById(id);
- if (message && message.notes && message.notes.length > 0 && this.events.message) {
- this.popup.setState({
- visible: true,
- left: this.events.message.x - 50,
- top: this.events.message.y + 20,
- notes: message.notes[0],
- });
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show popup upon hovering over a messages that has associated notes.
+ * @param id
+ * @private
+ */
+ _showNotesPopup(id) {
+ if (this.popup) {
+ if (id) {
+ const message = this.application.getModel().getMessageById(id);
+ if (
+ message &&
+ message.notes &&
+ message.notes.length > 0 &&
+ this.events.message
+ ) {
+ this.popup.setState({
+ visible: true,
+ left: this.events.message.x - 50,
+ top: this.events.message.y + 20,
+ notes: message.notes[0]
+ });
+ }
+ } else {
+ this.popup.setState({ visible: false, notes: '' });
+ }
}
- } else {
- this.popup.setState({ visible: false, notes: '' });
- }
}
- }
}
-
Diagram.propTypes = {
- application: PropTypes.object.isRequired,
+ application: PropTypes.object.isRequired
};
export default Diagram;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/components/popup/Popup.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/components/popup/Popup.jsx
index 8f8f859aad..a2a6582ab0 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/components/popup/Popup.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/components/popup/Popup.jsx
@@ -25,85 +25,81 @@ import iconEdit from '../../../../../../../../res/ecomp/asdc/sequencer/sprites/i
* @constructor
*/
class Popup extends React.Component {
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct react view.
- * @param props element properties (of which there are none).
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
- this.state = {
- top: 0,
- left: 0,
- visible: false,
- notes: '',
- };
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render view.
- * @returns {XML}
- */
- render() {
-
- // Build CSS + styles to position and configure popup.
-
- let top = this.state.top;
- let left = this.state.left;
-
- const popupHeight = 200;
- const popupWidth = 320;
-
- let auxCssVertical = 'top';
- let auxCssHorizontal = 'left';
-
- if (this.state.top > (window.innerHeight - popupHeight)) {
- top -= (popupHeight + 50);
- auxCssVertical = 'bottom';
- }
-
- if (this.state.left > (window.innerWidth - popupWidth)) {
- left -= (popupWidth - 80);
- auxCssHorizontal = 'right';
- }
-
- const auxCss = `asdcs-diagram-popup-${auxCssVertical}${auxCssHorizontal}`;
- const styles = {
- top,
- left,
- display: (this.state.visible ? 'block' : 'none'),
- };
-
- // Render element.
-
- let notes = this.state.notes || '';
- if (notes.length > 255) {
- notes = notes.substring(0, 255);
- notes = `${notes} ...`;
+ // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct react view.
+ * @param props element properties (of which there are none).
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
+ this.state = {
+ top: 0,
+ left: 0,
+ visible: false,
+ notes: ''
+ };
}
- return (
- <div className={`asdcs-diagram-popup ${auxCss}`} style={styles}>
- <div className="asdcs-diagram-popup-header">Notes</div>
- <div className="asdcs-diagram-popup-body">
- <div className="asdcs-icon-popup">
- <Icon glyph={iconEdit} />
- </div>
- <div className="asdcs-diagram-notes">
- <div className="asdcs-diagram-note">
- {notes}
+ // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render view.
+ * @returns {XML}
+ */
+ render() {
+ // Build CSS + styles to position and configure popup.
+
+ let top = this.state.top;
+ let left = this.state.left;
+
+ const popupHeight = 200;
+ const popupWidth = 320;
+
+ let auxCssVertical = 'top';
+ let auxCssHorizontal = 'left';
+
+ if (this.state.top > window.innerHeight - popupHeight) {
+ top -= popupHeight + 50;
+ auxCssVertical = 'bottom';
+ }
+
+ if (this.state.left > window.innerWidth - popupWidth) {
+ left -= popupWidth - 80;
+ auxCssHorizontal = 'right';
+ }
+
+ const auxCss = `asdcs-diagram-popup-${auxCssVertical}${auxCssHorizontal}`;
+ const styles = {
+ top,
+ left,
+ display: this.state.visible ? 'block' : 'none'
+ };
+
+ // Render element.
+
+ let notes = this.state.notes || '';
+ if (notes.length > 255) {
+ notes = notes.substring(0, 255);
+ notes = `${notes} ...`;
+ }
+
+ return (
+ <div className={`asdcs-diagram-popup ${auxCss}`} style={styles}>
+ <div className="asdcs-diagram-popup-header">Notes</div>
+ <div className="asdcs-diagram-popup-body">
+ <div className="asdcs-icon-popup">
+ <Icon glyph={iconEdit} />
+ </div>
+ <div className="asdcs-diagram-notes">
+ <div className="asdcs-diagram-note">{notes}</div>
+ </div>
+ </div>
+ <div className="asdcs-diagram-popup-footer" />
</div>
- </div>
- </div>
- <div className="asdcs-diagram-popup-footer"></div>
- </div>
- );
- }
+ );
+ }
}
export default Popup;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx
index d48ef3bd88..96a709948c 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx
@@ -28,211 +28,216 @@ import iconClose from '../../../../../../res/ecomp/asdc/sequencer/sprites/icons/
* configured, shown and hidden as required.
*/
class Dialog extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct view.
+ */
+ constructor(props, context) {
+ super(props, context);
+
+ this.MODE = {
+ INFO: {
+ icon: 'asdcs-icon-info',
+ heading: 'Information'
+ },
+ ERROR: {
+ icon: 'asdcs-icon-exclaim',
+ heading: 'Error'
+ },
+ EDIT: {
+ icon: 'asdcs-icon-edit',
+ heading: 'Edit',
+ edit: true,
+ confirm: true
+ },
+ CONFIRM: {
+ icon: 'asdcs-icon-question',
+ heading: 'Confirm',
+ confirm: true
+ }
+ };
+
+ this.state = {
+ mode: this.MODE.INFO,
+ message: '',
+ text: '',
+ visible: false
+ };
+
+ // Bindings.
+
+ this.onClickOK = this.onClickOK.bind(this);
+ this.onClickCancel = this.onClickCancel.bind(this);
+ this.onChangeText = this.onChangeText.bind(this);
+ this.showConfirmDialog = this.showConfirmDialog.bind(this);
+ this.showInfoDialog = this.showInfoDialog.bind(this);
+ this.showEditDialog = this.showEditDialog.bind(this);
+ this.showErrorDialog = this.showErrorDialog.bind(this);
+ this.showDialog = this.showDialog.bind(this);
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show info dialog.
+ * @param message info message.
+ */
+ showInfoDialog(message) {
+ this.showDialog(this.MODE.INFO, { message });
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show error dialog.
+ * @param message error message.
+ */
+ showErrorDialog(message) {
+ this.showDialog(this.MODE.ERROR, { message });
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show edit dialog.
+ * @param message dialog message.
+ * @param text current edit text.
+ * @param callback callback function to be invoked on OK.
+ */
+ showEditDialog(message, text, callback) {
+ this.showDialog(this.MODE.EDIT, { message, text, callback });
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show confirmation dialog.
+ * @param message dialog message.
+ * @param callback callback function to be invoked on OK.
+ */
+ showConfirmDialog(message, callback) {
+ this.showDialog(this.MODE.CONFIRM, { message, callback });
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle buttonclick.
+ */
+ onClickOK() {
+ this.props.application.hideOverlay();
+ this.setState({ visible: false });
+ if (this.callback) {
+ // So far the only thing we can return is edit text, but send it back
+ // as properties to allow for future return values.
+
+ this.callback({ text: this.state.text });
+ }
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle buttonclick.
+ */
+ onClickCancel() {
+ this.props.application.hideOverlay();
+ this.setState({ visible: false });
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle text changes.
+ * @param event update event.
+ */
+ onChangeText(event) {
+ this.setState({ text: event.target.value });
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show dialog in specified configuration.
+ * @param mode dialog mode.
+ * @param args dialog parameters, varying slightly by dialog type.
+ * @private
+ */
+ showDialog(mode, args) {
+ this.props.application.showOverlay();
+ this.callback = args.callback;
+ this.setState({
+ mode,
+ visible: true,
+ message: args.message || '',
+ text: args.text || ''
+ });
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct view.
- */
- constructor(props, context) {
-
- super(props, context);
-
- this.MODE = {
- INFO: {
- icon: 'asdcs-icon-info',
- heading: 'Information',
- },
- ERROR: {
- icon: 'asdcs-icon-exclaim',
- heading: 'Error',
- },
- EDIT: {
- icon: 'asdcs-icon-edit',
- heading: 'Edit',
- edit: true,
- confirm: true,
- },
- CONFIRM: {
- icon: 'asdcs-icon-question',
- heading: 'Confirm',
- confirm: true,
- },
- };
-
- this.state = {
- mode: this.MODE.INFO,
- message: '',
- text: '',
- visible: false,
- };
-
- // Bindings.
-
- this.onClickOK = this.onClickOK.bind(this);
- this.onClickCancel = this.onClickCancel.bind(this);
- this.onChangeText = this.onChangeText.bind(this);
- this.showConfirmDialog = this.showConfirmDialog.bind(this);
- this.showInfoDialog = this.showInfoDialog.bind(this);
- this.showEditDialog = this.showEditDialog.bind(this);
- this.showErrorDialog = this.showErrorDialog.bind(this);
- this.showDialog = this.showDialog.bind(this);
-
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show info dialog.
- * @param message info message.
- */
- showInfoDialog(message) {
- this.showDialog(this.MODE.INFO, { message });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show error dialog.
- * @param message error message.
- */
- showErrorDialog(message) {
- this.showDialog(this.MODE.ERROR, { message });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show edit dialog.
- * @param message dialog message.
- * @param text current edit text.
- * @param callback callback function to be invoked on OK.
- */
- showEditDialog(message, text, callback) {
- this.showDialog(this.MODE.EDIT, { message, text, callback });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show confirmation dialog.
- * @param message dialog message.
- * @param callback callback function to be invoked on OK.
- */
- showConfirmDialog(message, callback) {
- this.showDialog(this.MODE.CONFIRM, { message, callback });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle buttonclick.
- */
- onClickOK() {
- this.props.application.hideOverlay();
- this.setState({ visible: false });
- if (this.callback) {
-
- // So far the only thing we can return is edit text, but send it back
- // as properties to allow for future return values.
-
- this.callback({ text: this.state.text });
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render dialog into the page, initially hidden.
+ */
+ render() {
+ const dialogClass = this.state.visible ? '' : 'asdcs-hidden';
+ const cancelClass = this.callback ? '' : 'asdcs-hidden';
+ const textClass =
+ this.state.mode === this.MODE.EDIT ? '' : 'asdcs-hidden';
+
+ return (
+ <div className={`asdcs-dialog ${dialogClass}`}>
+ <div className="asdcs-dialog-header">
+ {this.state.mode.heading}
+ </div>
+ <div
+ className="asdcs-dialog-close"
+ onClick={this.onClickCancel}>
+ <Icon
+ glyph={iconClose}
+ className={this.MODE.CONFIRM.icon}
+ />
+ </div>
+ <div className={`asdcs-dialog-icon ${this.state.mode.icon}`}>
+ <Icon
+ glyph={iconQuestion}
+ className={this.MODE.CONFIRM.icon}
+ />
+ <Icon
+ glyph={iconExclaim}
+ className={this.MODE.ERROR.icon}
+ />
+ <Icon glyph={iconInfo} className={this.MODE.INFO.icon} />
+ <Icon glyph={iconEdit} className={this.MODE.EDIT.icon} />
+ </div>
+ <div className="asdcs-dialog-message">{this.state.message}</div>
+ <div className={`asdcs-dialog-text ${textClass}`}>
+ <textarea
+ maxLength="255"
+ value={this.state.text}
+ onChange={this.onChangeText}
+ />
+ </div>
+ <div className="asdcs-dialog-buttonbar">
+ <button
+ className={`asdcs-dialog-button-cancel ${cancelClass}`}
+ onClick={this.onClickCancel}>
+ Cancel
+ </button>
+ <button
+ className="asdcs-dialog-button-ok"
+ onClick={this.onClickOK}>
+ OK
+ </button>
+ </div>
+ </div>
+ );
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle buttonclick.
- */
- onClickCancel() {
- this.props.application.hideOverlay();
- this.setState({ visible: false });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle text changes.
- * @param event update event.
- */
- onChangeText(event) {
- this.setState({ text: event.target.value });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show dialog in specified configuration.
- * @param mode dialog mode.
- * @param args dialog parameters, varying slightly by dialog type.
- * @private
- */
- showDialog(mode, args) {
- this.props.application.showOverlay();
- this.callback = args.callback;
- this.setState({
- mode,
- visible: true,
- message: args.message || '',
- text: args.text || '',
- });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render dialog into the page, initially hidden.
- */
- render() {
-
- const dialogClass = (this.state.visible) ? '' : 'asdcs-hidden';
- const cancelClass = (this.callback) ? '' : 'asdcs-hidden';
- const textClass = (this.state.mode === this.MODE.EDIT) ? '' : 'asdcs-hidden';
-
- return (
- <div className={`asdcs-dialog ${dialogClass}`}>
- <div className="asdcs-dialog-header">{this.state.mode.heading}</div>
- <div className="asdcs-dialog-close" onClick={this.onClickCancel} >
- <Icon glyph={iconClose} className={this.MODE.CONFIRM.icon} />
- </div>
- <div className={`asdcs-dialog-icon ${this.state.mode.icon}`}>
- <Icon glyph={iconQuestion} className={this.MODE.CONFIRM.icon} />
- <Icon glyph={iconExclaim} className={this.MODE.ERROR.icon} />
- <Icon glyph={iconInfo} className={this.MODE.INFO.icon} />
- <Icon glyph={iconEdit} className={this.MODE.EDIT.icon} />
- </div>
- <div className="asdcs-dialog-message">
- {this.state.message}
- </div>
- <div className={`asdcs-dialog-text ${textClass}`}>
- <textarea
- maxLength="255"
- value={this.state.text}
- onChange={this.onChangeText}
- />
- </div>
- <div className="asdcs-dialog-buttonbar">
- <button
- className={`asdcs-dialog-button-cancel ${cancelClass}`}
- onClick={this.onClickCancel}
- >
- Cancel
- </button>
- <button
- className="asdcs-dialog-button-ok"
- onClick={this.onClickOK}
- >
- OK
- </button>
- </div>
- </div>
- );
- }
}
Dialog.propTypes = {
- application: PropTypes.object.isRequired,
+ application: PropTypes.object.isRequired
};
export default Dialog;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx
index 00c8f7c47c..087bc8029f 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx
@@ -26,149 +26,147 @@ import Source from './components/source/Source';
* Editor view, aggregating the designer, the code editor, the toolbar.
*/
class Editor extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Construct React view.
+ * @param props properties.
+ * @param context context.
+ */
+ constructor(props, context) {
+ super(props, context);
- /**
- * Construct React view.
- * @param props properties.
- * @param context context.
- */
- constructor(props, context) {
- super(props, context);
+ this.application = Common.assertNotNull(props.application);
+ this.demo = this.application.getOptions().demo;
- this.application = Common.assertNotNull(props.application);
- this.demo = this.application.getOptions().demo;
+ // Bindings.
- // Bindings.
+ this.selectMessage = this.selectMessage.bind(this);
+ this.selectLifeline = this.selectLifeline.bind(this);
- this.selectMessage = this.selectMessage.bind(this);
- this.selectLifeline = this.selectLifeline.bind(this);
-
- this.onMouseDown = this.onMouseDown.bind(this);
- this.onMouseUp = this.onMouseUp.bind(this);
- this.onMouseMove = this.onMouseMove.bind(this);
- }
+ this.onMouseDown = this.onMouseDown.bind(this);
+ this.onMouseUp = this.onMouseUp.bind(this);
+ this.onMouseMove = this.onMouseMove.bind(this);
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Select message by ID.
- * @param id message ID.
- */
- selectMessage(id) {
- if (this.designer) {
- this.designer.selectMessage(id);
+ /**
+ * Select message by ID.
+ * @param id message ID.
+ */
+ selectMessage(id) {
+ if (this.designer) {
+ this.designer.selectMessage(id);
+ }
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Select lifeline by ID.
- * @param id lifeline ID.
- */
- selectLifeline(id) {
- if (this.designer) {
- this.designer.selectLifeline(id);
+ /**
+ * Select lifeline by ID.
+ * @param id lifeline ID.
+ */
+ selectLifeline(id) {
+ if (this.designer) {
+ this.designer.selectLifeline(id);
+ }
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Record that we're dragging.
- */
- onMouseDown() {
- if (this.editor) {
- this.resize = {
- initialWidth: this.editor.offsetWidth,
- initialPageX: undefined,
- };
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Record that we're dragging.
+ */
+ onMouseDown() {
+ if (this.editor) {
+ this.resize = {
+ initialWidth: this.editor.offsetWidth,
+ initialPageX: undefined
+ };
+ }
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Record that we're not dragging.
- */
- onMouseUp() {
- this.resize = undefined;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Record mouse movement.
- */
- onMouseMove(event) {
- if (this.resize) {
- if (this.editor) {
- if (this.resize.initialPageX) {
- const deltaX = event.pageX - this.resize.initialPageX;
- const newWidth = this.resize.initialWidth + deltaX;
- const newWidthBounded = Math.min(800, Math.max(400, newWidth));
- this.editor.style.width = `${newWidthBounded}px`;
- } else {
- this.resize.initialPageX = event.pageX;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Record that we're not dragging.
+ */
+ onMouseUp() {
+ this.resize = undefined;
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Record mouse movement.
+ */
+ onMouseMove(event) {
+ if (this.resize) {
+ if (this.editor) {
+ if (this.resize.initialPageX) {
+ const deltaX = event.pageX - this.resize.initialPageX;
+ const newWidth = this.resize.initialWidth + deltaX;
+ const newWidthBounded = Math.min(
+ 800,
+ Math.max(400, newWidth)
+ );
+ this.editor.style.width = `${newWidthBounded}px`;
+ } else {
+ this.resize.initialPageX = event.pageX;
+ }
+ }
}
- }
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render editor.
- */
- render() {
-
- Logger.info('Editor.jsx - render()');
-
- return (
-
- <div
- className="asdcs-editor"
- ref={(r) => { this.editor = r; }}
- >
-
- <Toolbar application={this.props.application} editor={this} />
-
- <div className="asdcs-editor-content">
- <Source application={this.props.application} />
- <Designer
- application={this.props.application}
- ref={(r) => {
- if (r) {
- this.designer = r.getDecoratedComponentInstance();
- } else {
- this.designer = null;
- }
- }}
- />
- </div>
-
- <div className="asdcs-editor-statusbar">
- <div className="asdcs-editor-status"></div>
- <div className="asdcs-editor-validation"></div>
- </div>
-
- <div
- className="asdcs-editor-resize-handle"
- onMouseDown={this.onMouseDown}
- onMouseUp={this.onMouseUp}
- >
- </div>
- </div>
- );
- }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render editor.
+ */
+ render() {
+ Logger.info('Editor.jsx - render()');
+
+ return (
+ <div
+ className="asdcs-editor"
+ ref={r => {
+ this.editor = r;
+ }}>
+ <Toolbar application={this.props.application} editor={this} />
+
+ <div className="asdcs-editor-content">
+ <Source application={this.props.application} />
+ <Designer
+ application={this.props.application}
+ ref={r => {
+ if (r) {
+ this.designer = r.getDecoratedComponentInstance();
+ } else {
+ this.designer = null;
+ }
+ }}
+ />
+ </div>
+
+ <div className="asdcs-editor-statusbar">
+ <div className="asdcs-editor-status" />
+ <div className="asdcs-editor-validation" />
+ </div>
+
+ <div
+ className="asdcs-editor-resize-handle"
+ onMouseDown={this.onMouseDown}
+ onMouseUp={this.onMouseUp}
+ />
+ </div>
+ );
+ }
}
/** Element properties. */
Editor.propTypes = {
- application: PropTypes.object.isRequired,
+ application: PropTypes.object.isRequired
};
export default Editor;
-
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/Designer.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/Designer.jsx
index c67c68e4e2..09e321dd54 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/Designer.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/Designer.jsx
@@ -35,369 +35,383 @@ import iconCollapsed from '../../../../../../../../res/ecomp/asdc/sequencer/spri
* LHS design wid` view.
*/
class Designer extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
+
+ Logger.noop();
+
+ this.application = Common.assertNotNull(props.application);
+
+ this.state = {
+ lifelinesExpanded: false,
+ messagesExpanded: true,
+ activeLifelineId: undefined,
+ activeMessageId: undefined
+ };
+
+ // Bind this.
+
+ this.onToggle = this.onToggle.bind(this);
+ this.onMouseEnterLifeline = this.onMouseEnterLifeline.bind(this);
+ this.onMouseLeaveLifeline = this.onMouseLeaveLifeline.bind(this);
+ this.onMouseEnterMessage = this.onMouseEnterMessage.bind(this);
+ this.onMouseLeaveMessage = this.onMouseLeaveMessage.bind(this);
+
+ this.addMessage = this.addMessage.bind(this);
+ this.updateMessage = this.updateMessage.bind(this);
+ this.deleteMessage = this.deleteMessage.bind(this);
+ this.addLifeline = this.addLifeline.bind(this);
+ this.updateLifeline = this.updateLifeline.bind(this);
+ this.deleteLifeline = this.deleteLifeline.bind(this);
+
+ this.selectMessage = this.selectMessage.bind(this);
+ this.selectLifeline = this.selectLifeline.bind(this);
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Select message by ID.
+ * @param id message ID.
+ */
+ selectMessage(id) {
+ // TODO: scroll into view.
+
+ this.setState({ activeMessageId: id });
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Select lifeline by ID.
+ * @param id lifeline ID.
+ */
+ selectLifeline(id) {
+ // TODO: scroll into view.
+
+ this.setState({ activeLifelineId: id });
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show/hide lifelines section.
+ */
+ onToggle() {
+ const lifelinesExpanded = !this.state.lifelinesExpanded;
+ const messagesExpanded = !lifelinesExpanded;
+ this.setState({ lifelinesExpanded, messagesExpanded });
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle mouse event.
+ * @param id lifeline identifier.
+ */
+ onMouseEnterLifeline(id) {
+ this.application.selectLifeline(id);
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle mouse event.
+ */
+ onMouseLeaveLifeline() {
+ this.application.selectLifeline();
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle mouse event.
+ * @param id message identifier.
+ */
+ onMouseEnterMessage(id) {
+ this.application.selectMessage(id);
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Construct view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
+ /**
+ * Handle mouse event.
+ */
+ onMouseLeaveMessage() {
+ // Only on next selection.
+ // this.application.selectMessage();
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Add new message.
+ */
+ addMessage() {
+ if (this.application.getModel().unwrap().diagram.lifelines.length < 2) {
+ this.application.showErrorDialog(
+ 'You need at least two lifelines.'
+ );
+ return;
+ }
- Logger.noop();
-
- this.application = Common.assertNotNull(props.application);
-
- this.state = {
- lifelinesExpanded: false,
- messagesExpanded: true,
- activeLifelineId: undefined,
- activeMessageId: undefined,
- };
-
- // Bind this.
-
- this.onToggle = this.onToggle.bind(this);
- this.onMouseEnterLifeline = this.onMouseEnterLifeline.bind(this);
- this.onMouseLeaveLifeline = this.onMouseLeaveLifeline.bind(this);
- this.onMouseEnterMessage = this.onMouseEnterMessage.bind(this);
- this.onMouseLeaveMessage = this.onMouseLeaveMessage.bind(this);
-
- this.addMessage = this.addMessage.bind(this);
- this.updateMessage = this.updateMessage.bind(this);
- this.deleteMessage = this.deleteMessage.bind(this);
- this.addLifeline = this.addLifeline.bind(this);
- this.updateLifeline = this.updateLifeline.bind(this);
- this.deleteLifeline = this.deleteLifeline.bind(this);
-
- this.selectMessage = this.selectMessage.bind(this);
- this.selectLifeline = this.selectLifeline.bind(this);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Select message by ID.
- * @param id message ID.
- */
- selectMessage(id) {
-
- // TODO: scroll into view.
-
- this.setState({ activeMessageId: id });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Select lifeline by ID.
- * @param id lifeline ID.
- */
- selectLifeline(id) {
-
- // TODO: scroll into view.
-
- this.setState({ activeLifelineId: id });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show/hide lifelines section.
- */
- onToggle() {
- const lifelinesExpanded = !this.state.lifelinesExpanded;
- const messagesExpanded = !lifelinesExpanded;
- this.setState({ lifelinesExpanded, messagesExpanded });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle mouse event.
- * @param id lifeline identifier.
- */
- onMouseEnterLifeline(id) {
- this.application.selectLifeline(id);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle mouse event.
- */
- onMouseLeaveLifeline() {
- this.application.selectLifeline();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle mouse event.
- * @param id message identifier.
- */
- onMouseEnterMessage(id) {
- this.application.selectMessage(id);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle mouse event.
- */
- onMouseLeaveMessage() {
- // Only on next selection.
- // this.application.selectMessage();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Add new message.
- */
- addMessage() {
-
- if (this.application.getModel().unwrap().diagram.lifelines.length < 2) {
- this.application.showErrorDialog('You need at least two lifelines.');
- return;
+ this.application.getModel().addMessage();
+ this.forceUpdate();
+ this.application.renderDiagram();
}
- this.application.getModel().addMessage();
- this.forceUpdate();
- this.application.renderDiagram();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Apply property changes to the message identified by props.id.
- * @param props properties to be updated (excluding 'id').
- */
- updateMessage(props) {
- Common.assertPlainObject(props);
- const model = this.application.getModel();
- const message = model.getMessageById(props.id);
- if (message) {
- for (const k of Object.keys(props)) {
- if (k !== 'id') {
- message[k] = props[k];
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Apply property changes to the message identified by props.id.
+ * @param props properties to be updated (excluding 'id').
+ */
+ updateMessage(props) {
+ Common.assertPlainObject(props);
+ const model = this.application.getModel();
+ const message = model.getMessageById(props.id);
+ if (message) {
+ for (const k of Object.keys(props)) {
+ if (k !== 'id') {
+ message[k] = props[k];
+ }
+ }
}
- }
+ this.forceUpdate();
+ this.application.renderDiagram();
}
- this.forceUpdate();
- this.application.renderDiagram();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Delete message after confirmation.
- * @param id ID of message to be deleted.
- */
- deleteMessage(id) {
-
- const self = this;
- const model = this.application.getModel();
-
- const confirmComplete = function f() {
- model.deleteMessageById(id);
- self.render();
- self.application.renderDiagram();
- };
-
- this.application.showConfirmDialog('Delete this message?',
- confirmComplete);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Add new lifeline.
- */
- addLifeline() {
- this.application.getModel().addLifeline();
- this.forceUpdate();
- this.application.renderDiagram();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Apply property changes to the lifeline identified by props.id.
- * @param props properties to be updated (excluding 'id').
- */
- updateLifeline(props) {
- Common.assertPlainObject(props);
- const model = this.application.getModel();
- const lifeline = model.getLifelineById(props.id);
- if (lifeline) {
- for (const k of Object.keys(props)) {
- if (k !== 'id') {
- lifeline[k] = props[k];
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Delete message after confirmation.
+ * @param id ID of message to be deleted.
+ */
+ deleteMessage(id) {
+ const self = this;
+ const model = this.application.getModel();
+
+ const confirmComplete = function f() {
+ model.deleteMessageById(id);
+ self.render();
+ self.application.renderDiagram();
+ };
+
+ this.application.showConfirmDialog(
+ 'Delete this message?',
+ confirmComplete
+ );
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Add new lifeline.
+ */
+ addLifeline() {
+ this.application.getModel().addLifeline();
+ this.forceUpdate();
+ this.application.renderDiagram();
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Apply property changes to the lifeline identified by props.id.
+ * @param props properties to be updated (excluding 'id').
+ */
+ updateLifeline(props) {
+ Common.assertPlainObject(props);
+ const model = this.application.getModel();
+ const lifeline = model.getLifelineById(props.id);
+ if (lifeline) {
+ for (const k of Object.keys(props)) {
+ if (k !== 'id') {
+ lifeline[k] = props[k];
+ }
+ }
}
- }
+ this.forceUpdate();
+ this.application.renderDiagram();
}
- this.forceUpdate();
- this.application.renderDiagram();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Delete lifeline after confirmation.
- * @param id candidate for deletion.
- */
- deleteLifeline(id) {
-
- const self = this;
- const model = this.application.getModel();
-
- const confirmComplete = function f() {
- model.deleteLifelineById(id);
- self.forceUpdate();
- self.application.renderDiagram();
- };
- this.application.showConfirmDialog('Delete this lifeline and all its steps?',
- confirmComplete);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render designer.
- */
- render() {
-
- const application = this.props.application;
- const model = application.getModel();
- const diagram = model.unwrap().diagram;
- const metadata = diagram.metadata;
-
- const lifelinesIcon = this.state.lifelinesExpanded ? iconExpanded : iconCollapsed;
- const lifelinesClass = this.state.lifelinesExpanded ? '' : 'asdcs-hidden';
- const messagesIcon = this.state.messagesExpanded ? iconExpanded : iconCollapsed;
- const messagesClass = this.state.messagesExpanded ? '' : 'asdcs-hidden';
-
- return (
-
- <div className="asdcs-editor-designer">
- <div className="asdcs-designer-accordion">
-
- <div className="asdcs-designer-metadata-container">
- <Metadata metadata={metadata} />
- </div>
-
- <h3 onClick={this.onToggle}>Lifelines
- <div className="asdcs-designer-icon" onClick={this.onToggle}>
- <Icon glyph={lifelinesIcon} />
- </div>
- </h3>
-
- <div className={`asdcs-designer-lifelines-container ${lifelinesClass}`}>
- <Lifelines
- application={this.application}
- designer={this}
- activeLifelineId={this.state.activeLifelineId}
- />
- </div>
-
- <h3 onClick={this.onToggle}>Steps
- <div className="asdcs-designer-icon" onClick={this.onToggle}>
- <Icon glyph={messagesIcon} />
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Delete lifeline after confirmation.
+ * @param id candidate for deletion.
+ */
+ deleteLifeline(id) {
+ const self = this;
+ const model = this.application.getModel();
+
+ const confirmComplete = function f() {
+ model.deleteLifelineById(id);
+ self.forceUpdate();
+ self.application.renderDiagram();
+ };
+ this.application.showConfirmDialog(
+ 'Delete this lifeline and all its steps?',
+ confirmComplete
+ );
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render designer.
+ */
+ render() {
+ const application = this.props.application;
+ const model = application.getModel();
+ const diagram = model.unwrap().diagram;
+ const metadata = diagram.metadata;
+
+ const lifelinesIcon = this.state.lifelinesExpanded
+ ? iconExpanded
+ : iconCollapsed;
+ const lifelinesClass = this.state.lifelinesExpanded
+ ? ''
+ : 'asdcs-hidden';
+ const messagesIcon = this.state.messagesExpanded
+ ? iconExpanded
+ : iconCollapsed;
+ const messagesClass = this.state.messagesExpanded ? '' : 'asdcs-hidden';
+
+ return (
+ <div className="asdcs-editor-designer">
+ <div className="asdcs-designer-accordion">
+ <div className="asdcs-designer-metadata-container">
+ <Metadata metadata={metadata} />
+ </div>
+
+ <h3 onClick={this.onToggle}>
+ Lifelines
+ <div
+ className="asdcs-designer-icon"
+ onClick={this.onToggle}>
+ <Icon glyph={lifelinesIcon} />
+ </div>
+ </h3>
+
+ <div
+ className={`asdcs-designer-lifelines-container ${lifelinesClass}`}>
+ <Lifelines
+ application={this.application}
+ designer={this}
+ activeLifelineId={this.state.activeLifelineId}
+ />
+ </div>
+
+ <h3 onClick={this.onToggle}>
+ Steps
+ <div
+ className="asdcs-designer-icon"
+ onClick={this.onToggle}>
+ <Icon glyph={messagesIcon} />
+ </div>
+ </h3>
+
+ <div
+ className={`asdcs-designer-steps-container ${messagesClass}`}>
+ <Messages
+ application={this.application}
+ designer={this}
+ activeMessageId={this.state.activeMessageId}
+ />
+ </div>
+ </div>
+
+ <Actions
+ application={this.props.application}
+ model={model}
+ ref={r => {
+ this.actions = r;
+ }}
+ />
</div>
- </h3>
-
- <div className={`asdcs-designer-steps-container ${messagesClass}`} >
- <Messages
- application={this.application}
- designer={this}
- activeMessageId={this.state.activeMessageId}
- />
- </div>
-
- </div>
-
- <Actions
- application={this.props.application}
- model={model}
- ref={(r) => { this.actions = r; }}
- />
-
- </div>
- );
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Scroll accordion pane to make
- * @param $element focused element.
- * @private
- */
- static _scrollIntoView($element) {
- const $pane = $element.closest('.ui-accordion-content');
- const paneScrollTop = $pane.scrollTop();
- const paneHeight = $pane.height();
- const paneBottom = paneScrollTop + paneHeight;
- const elementTop = $element[0].offsetTop - $pane[0].offsetTop;
- const elementHeight = $element.height();
- const elementBottom = elementTop + elementHeight;
- if (elementBottom > paneBottom) {
- $pane.scrollTop(elementTop);
- } else if (elementTop < paneScrollTop) {
- $pane.scrollTop(elementTop);
+ );
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Scroll accordion pane to make
+ * @param $element focused element.
+ * @private
+ */
+ static _scrollIntoView($element) {
+ const $pane = $element.closest('.ui-accordion-content');
+ const paneScrollTop = $pane.scrollTop();
+ const paneHeight = $pane.height();
+ const paneBottom = paneScrollTop + paneHeight;
+ const elementTop = $element[0].offsetTop - $pane[0].offsetTop;
+ const elementHeight = $element.height();
+ const elementBottom = elementTop + elementHeight;
+ if (elementBottom > paneBottom) {
+ $pane.scrollTop(elementTop);
+ } else if (elementTop < paneScrollTop) {
+ $pane.scrollTop(elementTop);
+ }
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show actions menu.
- * @param id selected message ID.
- * @param position page coordinates.
- */
- showActions(id, position) {
- if (this.actions) {
- this.actions.show(id, position);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show actions menu.
+ * @param id selected message ID.
+ * @param position page coordinates.
+ */
+ showActions(id, position) {
+ if (this.actions) {
+ this.actions.show(id, position);
+ }
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show notes popup.
+ * @param id selected message identifier.
+ */
+ showNotes(id) {
+ const model = this.application.getModel();
+ const options = this.application.getOptions();
+ const message = model.getMessageById(id);
+ const notes =
+ message.notes && message.notes.length > 0 ? message.notes[0] : '';
+ const editComplete = function f(p) {
+ message.notes = [];
+ if (p && p.text) {
+ const sanitized = Common.sanitizeText(p.text, options, 'notes');
+ message.notes.push(sanitized);
+ }
+ };
+ this.application.showEditDialog('Notes:', notes, editComplete);
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show notes popup.
- * @param id selected message identifier.
- */
- showNotes(id) {
- const model = this.application.getModel();
- const options = this.application.getOptions();
- const message = model.getMessageById(id);
- const notes = (message.notes && (message.notes.length > 0)) ? message.notes[0] : '';
- const editComplete = function f(p) {
- message.notes = [];
- if (p && p.text) {
- const sanitized = Common.sanitizeText(p.text, options, 'notes');
- message.notes.push(sanitized);
- }
- };
- this.application.showEditDialog('Notes:', notes, editComplete);
- }
}
/** Element properties. */
Designer.propTypes = {
- application: PropTypes.object.isRequired,
+ application: PropTypes.object.isRequired
};
+/* eslint-disable new-cap */
export default DragDropContext(HTML5Backend)(Designer);
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/actions/Actions.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/actions/Actions.jsx
index 5a8343cccf..a558a14f1d 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/actions/Actions.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/actions/Actions.jsx
@@ -36,439 +36,499 @@ import iconFragmentStop from '../../../../../../../../../../res/ecomp/asdc/seque
* Action menu view.
*/
class Actions extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Construct view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
- /**
- * Construct view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
+ Logger.noop();
- Logger.noop();
+ this.state = {
+ id: undefined,
+ visible: false
+ };
- this.state = {
- id: undefined,
- visible: false,
- };
+ // Bindings.
- // Bindings.
+ this.show = this.show.bind(this);
- this.show = this.show.bind(this);
+ this.onClickOccurrenceToggle = this.onClickOccurrenceToggle.bind(this);
+ this.onClickOccurrenceFrom = this.onClickOccurrenceFrom.bind(this);
+ this.onClickOccurrenceTo = this.onClickOccurrenceTo.bind(this);
- this.onClickOccurrenceToggle = this.onClickOccurrenceToggle.bind(this);
- this.onClickOccurrenceFrom = this.onClickOccurrenceFrom.bind(this);
- this.onClickOccurrenceTo = this.onClickOccurrenceTo.bind(this);
+ this.onClickFragmentToggle = this.onClickFragmentToggle.bind(this);
+ this.onChangeFragmentGuard = this.onChangeFragmentGuard.bind(this);
+ this.onChangeFragmentOperator = this.onChangeFragmentOperator.bind(
+ this
+ );
- this.onClickFragmentToggle = this.onClickFragmentToggle.bind(this);
- this.onChangeFragmentGuard = this.onChangeFragmentGuard.bind(this);
- this.onChangeFragmentOperator = this.onChangeFragmentOperator.bind(this);
-
- this.onMouseOut = this.onMouseOut.bind(this);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Show for message.
- * @param id message ID.
- * @param position xy coordinates.
- */
- show(id, position) {
- const message = this.props.model.getMessageById(id);
-
- let occurrencesToggle = false;
- let fragmentToggle = false;
- if (message) {
-
- message.occurrences = message.occurrences || { start: [], stop: [] };
- message.occurrences.start = message.occurrences.start || [];
- message.occurrences.stop = message.occurrences.stop || [];
- message.fragment = message.fragment || {};
- message.fragment.start = message.fragment.start || false;
- message.fragment.stop = message.fragment.stop || false;
- message.fragment.guard = message.fragment.guard || '';
- message.fragment.operator = message.fragment.operator || '';
-
- const mo = message.occurrences;
- occurrencesToggle = (mo.start.length > 0 || mo.stop.length > 0);
-
- const mf = message.fragment;
- fragmentToggle = (mf.start || mf.stop);
+ this.onMouseOut = this.onMouseOut.bind(this);
}
- this.setState({
- id,
- message,
- occurrencesToggle,
- fragmentToggle,
- visible: true,
- x: position.x,
- y: position.y,
- });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Toggle occurrence state.
- */
- onClickOccurrenceToggle() {
- const message = this.state.message;
- if (message) {
- const oFromState = Actions.getOccurrenceState(message.occurrences, message.from);
- const oToState = Actions.getOccurrenceState(message.occurrences, message.to);
- const oExpanded = oFromState > 0 || oToState > 0;
- if (oExpanded) {
- this.setState({ occurrencesExpanded: true });
- } else {
- const occurrencesExpanded = !this.state.occurrencesExpanded;
- this.setState({ occurrencesExpanded });
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Show for message.
+ * @param id message ID.
+ * @param position xy coordinates.
+ */
+ show(id, position) {
+ const message = this.props.model.getMessageById(id);
+
+ let occurrencesToggle = false;
+ let fragmentToggle = false;
+ if (message) {
+ message.occurrences = message.occurrences || {
+ start: [],
+ stop: []
+ };
+ message.occurrences.start = message.occurrences.start || [];
+ message.occurrences.stop = message.occurrences.stop || [];
+ message.fragment = message.fragment || {};
+ message.fragment.start = message.fragment.start || false;
+ message.fragment.stop = message.fragment.stop || false;
+ message.fragment.guard = message.fragment.guard || '';
+ message.fragment.operator = message.fragment.operator || '';
+
+ const mo = message.occurrences;
+ occurrencesToggle = mo.start.length > 0 || mo.stop.length > 0;
+
+ const mf = message.fragment;
+ fragmentToggle = mf.start || mf.stop;
+ }
+
+ this.setState({
+ id,
+ message,
+ occurrencesToggle,
+ fragmentToggle,
+ visible: true,
+ x: position.x,
+ y: position.y
+ });
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Handle menu click.
- */
- onClickOccurrenceFrom() {
- const message = this.state.message;
- if (message) {
- Actions._toggleOccurrence(message.occurrences, message.from);
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Toggle occurrence state.
+ */
+ onClickOccurrenceToggle() {
+ const message = this.state.message;
+ if (message) {
+ const oFromState = Actions.getOccurrenceState(
+ message.occurrences,
+ message.from
+ );
+ const oToState = Actions.getOccurrenceState(
+ message.occurrences,
+ message.to
+ );
+ const oExpanded = oFromState > 0 || oToState > 0;
+ if (oExpanded) {
+ this.setState({ occurrencesExpanded: true });
+ } else {
+ const occurrencesExpanded = !this.state.occurrencesExpanded;
+ this.setState({ occurrencesExpanded });
+ }
+ }
}
- this.setState({ message });
- this.props.application.renderDiagram();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle menu click.
- */
- onClickOccurrenceTo() {
- const message = this.state.message;
- if (message) {
- Actions._toggleOccurrence(message.occurrences, message.to);
- }
- this.setState({ message });
- this.props.application.renderDiagram();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Toggle fragment.
- */
- onClickFragmentToggle() {
- const message = this.state.message;
- if (message) {
- Actions._toggleFragment(message.fragment);
- }
- this.setState({ message });
- this.props.application.renderDiagram();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle menu click.
- * @param event update event.
- */
- onChangeFragmentGuard(event) {
- const message = this.state.message;
- if (message) {
- const options = this.props.application.getOptions();
- message.fragment.guard = Common.sanitizeText(event.target.value, options, 'guard');
- }
- this.setState({ message });
- this.props.application.renderDiagram();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle menu click.
- * @param value updated value.
- */
- onChangeFragmentOperator(value) {
- const message = this.state.message;
- if (message) {
- message.fragment.operator = value.value;
- }
- this.setState({ message });
- this.props.application.renderDiagram();
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle menu click.
+ */
+ onClickOccurrenceFrom() {
+ const message = this.state.message;
+ if (message) {
+ Actions._toggleOccurrence(message.occurrences, message.from);
+ }
+ this.setState({ message });
+ this.props.application.renderDiagram();
+ }
- /**
- * Handle mouse movement.
- */
- onMouseOut() {
- this.setState({ id: -1, visible: false, x: 0, y: 0 });
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle menu click.
+ */
+ onClickOccurrenceTo() {
+ const message = this.state.message;
+ if (message) {
+ Actions._toggleOccurrence(message.occurrences, message.to);
+ }
+ this.setState({ message });
+ this.props.application.renderDiagram();
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Toggle fragment.
+ */
+ onClickFragmentToggle() {
+ const message = this.state.message;
+ if (message) {
+ Actions._toggleFragment(message.fragment);
+ }
+ this.setState({ message });
+ this.props.application.renderDiagram();
+ }
- /**
- * Render view.
- * @returns {XML}
- */
- render() {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle menu click.
+ * @param event update event.
+ */
+ onChangeFragmentGuard(event) {
+ const message = this.state.message;
+ if (message) {
+ const options = this.props.application.getOptions();
+ message.fragment.guard = Common.sanitizeText(
+ event.target.value,
+ options,
+ 'guard'
+ );
+ }
+ this.setState({ message });
+ this.props.application.renderDiagram();
+ }
- const actionsStyles = { };
- const message = this.state.message;
- if (!message || !this.state.visible) {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle menu click.
+ * @param value updated value.
+ */
+ onChangeFragmentOperator(value) {
+ const message = this.state.message;
+ if (message) {
+ message.fragment.operator = value.value;
+ }
+ this.setState({ message });
+ this.props.application.renderDiagram();
+ }
- // Invisible.
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- return (<div className="asdcs-actions" ></div>);
+ /**
+ * Handle mouse movement.
+ */
+ onMouseOut() {
+ this.setState({ id: -1, visible: false, x: 0, y: 0 });
}
- // Position and display.
-
- actionsStyles.display = 'block';
- actionsStyles.left = this.state.x - 10;
- actionsStyles.top = this.state.y - 10;
-
- const oFromState = Actions.getOccurrenceState(message.occurrences, message.from);
- const oToState = Actions.getOccurrenceState(message.occurrences, message.to);
- const fState = Actions.getFragmentState(message.fragment);
-
- const oExpanded = this.state.occurrencesExpanded || (oFromState > 0) || (oToState > 0);
- const oAuxClassName = oExpanded ? '' : 'asdcs-hidden';
-
- const fExpanded = fState !== 0;
- const fAuxClassName = fExpanded ? '' : 'asdcs-hidden';
-
- const fragmentOperatorOptions = [{
- value: 'alt',
- label: 'Alternate',
- }, {
- value: 'opt',
- label: 'Optional',
- }, {
- value: 'loop',
- label: 'Loop',
- }];
-
- const operator = message.fragment.operator || 'alt';
-
- return (
- <div
- className="asdcs-actions"
- style={actionsStyles}
- onMouseLeave={this.onMouseOut}
- >
- <div className="asdcs-actions-header">
- <div className="asdcs-actions-icon">
- <Icon glyph={iconSettings} />
- </div>
- </div>
-
- <div className="asdcs-actions-options">
-
- <div className="asdcs-actions-optiongroup asdcs-actions-optiongroup-occurrence">
- <div
- className="asdcs-actions-option asdcs-actions-option-occurrence-toggle"
- onClick={this.onClickOccurrenceToggle}
- >
- <span className="asdcs-label">Occurrence</span>
- <div className="asdcs-actions-state">
- <Icon glyph={iconCollapsed} className={oExpanded ? 'asdcs-hidden' : ''} />
- <Icon glyph={iconExpanded} className={oExpanded ? '' : 'asdcs-hidden'} />
- </div>
- </div>
- </div>
-
- <div
- className={`asdcs-actions-option asdcs-actions-option-occurrence-from ${oAuxClassName}`}
- onClick={this.onClickOccurrenceFrom}
- >
- <span className="asdcs-label">From</span>
- <div className="asdcs-actions-state">
- <span className="asdcs-annotation"></span>
- <Icon glyph={iconOccurrenceDefault} className={oFromState === 0 ? '' : 'asdcs-hidden'} />
- <Icon glyph={iconOccurrenceStart} className={oFromState === 1 ? '' : 'asdcs-hidden'} />
- <Icon glyph={iconOccurrenceStop} className={oFromState === 2 ? '' : 'asdcs-hidden'} />
- </div>
- </div>
-
- <div
- className={`asdcs-actions-option asdcs-actions-option-occurrence-to ${oAuxClassName}`}
- onClick={this.onClickOccurrenceTo}
- >
- <span className="asdcs-label">To</span>
- <div className="asdcs-actions-state">
- <span className="asdcs-annotation"></span>
- <Icon glyph={iconOccurrenceDefault} className={oToState === 0 ? '' : 'asdcs-hidden'} />
- <Icon glyph={iconOccurrenceStart} className={oToState === 1 ? '' : 'asdcs-hidden'} />
- <Icon glyph={iconOccurrenceStop} className={oToState === 2 ? '' : 'asdcs-hidden'} />
- </div>
- </div>
-
- <div className="asdcs-actions-optiongroup asdcs-actions-optiongroup-fragment">
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render view.
+ * @returns {XML}
+ */
+ render() {
+ const actionsStyles = {};
+ const message = this.state.message;
+ if (!message || !this.state.visible) {
+ // Invisible.
+
+ return <div className="asdcs-actions" />;
+ }
+
+ // Position and display.
+
+ actionsStyles.display = 'block';
+ actionsStyles.left = this.state.x - 10;
+ actionsStyles.top = this.state.y - 10;
+
+ const oFromState = Actions.getOccurrenceState(
+ message.occurrences,
+ message.from
+ );
+ const oToState = Actions.getOccurrenceState(
+ message.occurrences,
+ message.to
+ );
+ const fState = Actions.getFragmentState(message.fragment);
+
+ const oExpanded =
+ this.state.occurrencesExpanded || oFromState > 0 || oToState > 0;
+ const oAuxClassName = oExpanded ? '' : 'asdcs-hidden';
+
+ const fExpanded = fState !== 0;
+ const fAuxClassName = fExpanded ? '' : 'asdcs-hidden';
+
+ const fragmentOperatorOptions = [
+ {
+ value: 'alt',
+ label: 'Alternate'
+ },
+ {
+ value: 'opt',
+ label: 'Optional'
+ },
+ {
+ value: 'loop',
+ label: 'Loop'
+ }
+ ];
+
+ const operator = message.fragment.operator || 'alt';
+
+ return (
<div
- className="asdcs-actions-option asdcs-actions-fragment-toggle"
- onClick={this.onClickFragmentToggle}
- >
- <span className="asdcs-label">Fragment</span>
- <div className="asdcs-actions-state">
- <span className="asdcs-annotation"></span>
- <Icon glyph={iconFragmentDefault} className={fState === 0 ? '' : 'asdcs-hidden'} />
- <Icon glyph={iconFragmentStart} className={fState === 1 ? '' : 'asdcs-hidden'} />
- <Icon glyph={iconFragmentStop} className={fState === 2 ? '' : 'asdcs-hidden'} />
- </div>
+ className="asdcs-actions"
+ style={actionsStyles}
+ onMouseLeave={this.onMouseOut}>
+ <div className="asdcs-actions-header">
+ <div className="asdcs-actions-icon">
+ <Icon glyph={iconSettings} />
+ </div>
+ </div>
+
+ <div className="asdcs-actions-options">
+ <div className="asdcs-actions-optiongroup asdcs-actions-optiongroup-occurrence">
+ <div
+ className="asdcs-actions-option asdcs-actions-option-occurrence-toggle"
+ onClick={this.onClickOccurrenceToggle}>
+ <span className="asdcs-label">Occurrence</span>
+ <div className="asdcs-actions-state">
+ <Icon
+ glyph={iconCollapsed}
+ className={oExpanded ? 'asdcs-hidden' : ''}
+ />
+ <Icon
+ glyph={iconExpanded}
+ className={oExpanded ? '' : 'asdcs-hidden'}
+ />
+ </div>
+ </div>
+ </div>
+
+ <div
+ className={`asdcs-actions-option asdcs-actions-option-occurrence-from ${oAuxClassName}`}
+ onClick={this.onClickOccurrenceFrom}>
+ <span className="asdcs-label">From</span>
+ <div className="asdcs-actions-state">
+ <span className="asdcs-annotation" />
+ <Icon
+ glyph={iconOccurrenceDefault}
+ className={
+ oFromState === 0 ? '' : 'asdcs-hidden'
+ }
+ />
+ <Icon
+ glyph={iconOccurrenceStart}
+ className={
+ oFromState === 1 ? '' : 'asdcs-hidden'
+ }
+ />
+ <Icon
+ glyph={iconOccurrenceStop}
+ className={
+ oFromState === 2 ? '' : 'asdcs-hidden'
+ }
+ />
+ </div>
+ </div>
+
+ <div
+ className={`asdcs-actions-option asdcs-actions-option-occurrence-to ${oAuxClassName}`}
+ onClick={this.onClickOccurrenceTo}>
+ <span className="asdcs-label">To</span>
+ <div className="asdcs-actions-state">
+ <span className="asdcs-annotation" />
+ <Icon
+ glyph={iconOccurrenceDefault}
+ className={oToState === 0 ? '' : 'asdcs-hidden'}
+ />
+ <Icon
+ glyph={iconOccurrenceStart}
+ className={oToState === 1 ? '' : 'asdcs-hidden'}
+ />
+ <Icon
+ glyph={iconOccurrenceStop}
+ className={oToState === 2 ? '' : 'asdcs-hidden'}
+ />
+ </div>
+ </div>
+
+ <div className="asdcs-actions-optiongroup asdcs-actions-optiongroup-fragment">
+ <div
+ className="asdcs-actions-option asdcs-actions-fragment-toggle"
+ onClick={this.onClickFragmentToggle}>
+ <span className="asdcs-label">Fragment</span>
+ <div className="asdcs-actions-state">
+ <span className="asdcs-annotation" />
+ <Icon
+ glyph={iconFragmentDefault}
+ className={
+ fState === 0 ? '' : 'asdcs-hidden'
+ }
+ />
+ <Icon
+ glyph={iconFragmentStart}
+ className={
+ fState === 1 ? '' : 'asdcs-hidden'
+ }
+ />
+ <Icon
+ glyph={iconFragmentStop}
+ className={
+ fState === 2 ? '' : 'asdcs-hidden'
+ }
+ />
+ </div>
+ </div>
+ </div>
+
+ <div
+ className={`asdcs-actions-option asdcs-actions-fragment-operator ${fAuxClassName}`}>
+ <div className="asdcs-label">Operator</div>
+ <div className="asdcs-value">
+ <Select
+ className="asdcs-editable-select"
+ openOnFocus
+ clearable={false}
+ searchable={false}
+ value={operator}
+ onChange={this.onChangeFragmentOperator}
+ options={fragmentOperatorOptions}
+ />
+ </div>
+ </div>
+
+ <div
+ className={`asdcs-actions-option asdcs-actions-fragment-guard ${fAuxClassName}`}>
+ <div className="asdcs-label">Guard</div>
+ <div className="asdcs-value">
+ <input
+ className="asdcs-editable"
+ type="text"
+ size="20"
+ maxLength="80"
+ value={message.fragment.guard}
+ placeholder="Condition"
+ onChange={this.onChangeFragmentGuard}
+ />
+ </div>
+ </div>
+ </div>
+
+ <div className="asdcs-actions-footer" />
</div>
- </div>
-
- <div className={`asdcs-actions-option asdcs-actions-fragment-operator ${fAuxClassName}`}>
- <div className="asdcs-label">Operator</div>
- <div className="asdcs-value">
- <Select
- className="asdcs-editable-select"
- openOnFocus
- clearable={false}
- searchable={false}
- value={operator}
- onChange={this.onChangeFragmentOperator}
- options={fragmentOperatorOptions}
- />
- </div>
- </div>
-
- <div className={`asdcs-actions-option asdcs-actions-fragment-guard ${fAuxClassName}`}>
- <div className="asdcs-label">Guard</div>
- <div className="asdcs-value">
- <input
- className="asdcs-editable"
- type="text"
- size="20"
- maxLength="80"
- value={message.fragment.guard}
- placeholder="Condition"
- onChange={this.onChangeFragmentGuard}
- />
- </div>
- </div>
-
- </div>
-
- <div className="asdcs-actions-footer"></div>
-
- </div>
-
- );
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Toggle through three occurrence states on click.
- * @param occurrence occurrences state, updated as side-effect.
- * @param lifelineId message end that's being toggled.
- * @private
- */
- static _toggleOccurrence(occurrence, lifelineId) {
- const o = occurrence;
-
- const rm = function rm(array, value) {
- const index = array.indexOf(value);
- if (index !== -1) {
- array.splice(index, 1);
- }
- };
-
- const add = function add(array, value) {
- if (array.indexOf(value) === -1) {
- array.push(value);
- }
- };
-
- if (o.start && o.start.indexOf(lifelineId) !== -1) {
- // Start -> stop.
- rm(o.start, lifelineId);
- add(o.stop, lifelineId);
- } else if (o.stop && o.stop.indexOf(lifelineId) !== -1) {
- // Stop -> default.
- rm(o.start, lifelineId);
- rm(o.stop, lifelineId);
- } else {
- // Default -> start.
- add(o.start, lifelineId);
- rm(o.stop, lifelineId);
+ );
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Toggle fragment setting on click.
- * @param fragment
- * @private
- **/
- static _toggleFragment(fragment) {
- const f = fragment;
- if (f.start === true) {
- f.start = false;
- f.stop = true;
- } else if (f.stop === true) {
- f.stop = false;
- f.start = false;
- } else {
- f.start = true;
- f.stop = false;
- }
- f.guard = '';
- f.operator = '';
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get ternary occurrences state.
- * @param o occurrences.
- * @param lifelineId from/to lifeline ID.
- * @returns {number}
- * @private
- */
- static getOccurrenceState(o, lifelineId) {
- if (o.start.indexOf(lifelineId) !== -1) {
- return 1;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Toggle through three occurrence states on click.
+ * @param occurrence occurrences state, updated as side-effect.
+ * @param lifelineId message end that's being toggled.
+ * @private
+ */
+ static _toggleOccurrence(occurrence, lifelineId) {
+ const o = occurrence;
+
+ const rm = function rm(array, value) {
+ const index = array.indexOf(value);
+ if (index !== -1) {
+ array.splice(index, 1);
+ }
+ };
+
+ const add = function add(array, value) {
+ if (array.indexOf(value) === -1) {
+ array.push(value);
+ }
+ };
+
+ if (o.start && o.start.indexOf(lifelineId) !== -1) {
+ // Start -> stop.
+ rm(o.start, lifelineId);
+ add(o.stop, lifelineId);
+ } else if (o.stop && o.stop.indexOf(lifelineId) !== -1) {
+ // Stop -> default.
+ rm(o.start, lifelineId);
+ rm(o.stop, lifelineId);
+ } else {
+ // Default -> start.
+ add(o.start, lifelineId);
+ rm(o.stop, lifelineId);
+ }
}
- if (o.stop.indexOf(lifelineId) !== -1) {
- return 2;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Toggle fragment setting on click.
+ * @param fragment
+ * @private
+ **/
+ static _toggleFragment(fragment) {
+ const f = fragment;
+ if (f.start === true) {
+ f.start = false;
+ f.stop = true;
+ } else if (f.stop === true) {
+ f.stop = false;
+ f.start = false;
+ } else {
+ f.start = true;
+ f.stop = false;
+ }
+ f.guard = '';
+ f.operator = '';
}
- return 0;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get ternary fragment state.
- * @param f fragment.
- * @returns {number}
- * @private
- */
- static getFragmentState(f) {
- if (f.start) {
- return 1;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get ternary occurrences state.
+ * @param o occurrences.
+ * @param lifelineId from/to lifeline ID.
+ * @returns {number}
+ * @private
+ */
+ static getOccurrenceState(o, lifelineId) {
+ if (o.start.indexOf(lifelineId) !== -1) {
+ return 1;
+ }
+ if (o.stop.indexOf(lifelineId) !== -1) {
+ return 2;
+ }
+ return 0;
}
- if (f.stop) {
- return 2;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get ternary fragment state.
+ * @param f fragment.
+ * @returns {number}
+ * @private
+ */
+ static getFragmentState(f) {
+ if (f.start) {
+ return 1;
+ }
+ if (f.stop) {
+ return 2;
+ }
+ return 0;
}
- return 0;
- }
}
/** Element properties. */
Actions.propTypes = {
- application: PropTypes.object.isRequired,
- model: PropTypes.object.isRequired,
+ application: PropTypes.object.isRequired,
+ model: PropTypes.object.isRequired
};
export default Actions;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifeline.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifeline.jsx
index 86ee80f72e..09c8d92c9b 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifeline.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifeline.jsx
@@ -28,238 +28,247 @@ import iconDelete from '../../../../../../../../../../res/ecomp/asdc/sequencer/s
* LHS lifeline row view.
*/
class Lifeline extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct editor view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ active: false,
+ name: props.lifeline.name
+ };
+
+ const metamodel = Common.assertNotNull(this.props.metamodel).unwrap();
+ this.canReorder = metamodel.diagram.lifelines.constraints.reorder;
+ this.canDelete = metamodel.diagram.lifelines.constraints.delete;
+
+ // Bindings.
+
+ this.onChangeName = this.onChangeName.bind(this);
+ this.onBlurName = this.onBlurName.bind(this);
+ this.onClickDelete = this.onClickDelete.bind(this);
+ this.onMouseEnter = this.onMouseEnter.bind(this);
+ this.onMouseLeave = this.onMouseLeave.bind(this);
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct editor view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- active: false,
- name: props.lifeline.name,
- };
-
- const metamodel = Common.assertNotNull(this.props.metamodel).unwrap();
- this.canReorder = metamodel.diagram.lifelines.constraints.reorder;
- this.canDelete = metamodel.diagram.lifelines.constraints.delete;
-
- // Bindings.
-
- this.onChangeName = this.onChangeName.bind(this);
- this.onBlurName = this.onBlurName.bind(this);
- this.onClickDelete = this.onClickDelete.bind(this);
- this.onMouseEnter = this.onMouseEnter.bind(this);
- this.onMouseLeave = this.onMouseLeave.bind(this);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle name change.
- * @param event change event.
- */
- onChangeName(event) {
- this.setState({ name: event.target.value });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle name change.
- * @param event change event.
- */
- onBlurName(event) {
- const options = this.props.application.getOptions();
- const sanitized = Common.sanitizeText(event.target.value, options, 'lifeline');
- const props = {
- id: this.props.lifeline.id,
- name: sanitized,
- };
- this.props.designer.updateLifeline(props);
- this.setState({ name: sanitized });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Handle lifeline delete.
- */
- onClickDelete() {
- this.props.designer.deleteLifeline(this.props.lifeline.id);
- }
+ /**
+ * Handle name change.
+ * @param event change event.
+ */
+ onChangeName(event) {
+ this.setState({ name: event.target.value });
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle name change.
+ * @param event change event.
+ */
+ onBlurName(event) {
+ const options = this.props.application.getOptions();
+ const sanitized = Common.sanitizeText(
+ event.target.value,
+ options,
+ 'lifeline'
+ );
+ const props = {
+ id: this.props.lifeline.id,
+ name: sanitized
+ };
+ this.props.designer.updateLifeline(props);
+ this.setState({ name: sanitized });
+ }
- /**
- * Handle mouseover event.
- */
- onMouseEnter() {
- this.setState({ active: true });
- this.props.designer.onMouseEnterLifeline(this.props.lifeline.id);
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Handle lifeline delete.
+ */
+ onClickDelete() {
+ this.props.designer.deleteLifeline(this.props.lifeline.id);
+ }
- /**
- * Handle mouseleave event.
- */
- onMouseLeave() {
- this.setState({ active: false });
- this.props.designer.onMouseLeaveLifeline(this.props.lifeline.id);
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Handle mouseover event.
+ */
+ onMouseEnter() {
+ this.setState({ active: true });
+ this.props.designer.onMouseEnterLifeline(this.props.lifeline.id);
+ }
- /**
- * Get whether metadata permits reorder.
- * @returns true if reorderable.
- */
- isCanReorder() {
- return this.canReorder;
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Handle mouseleave event.
+ */
+ onMouseLeave() {
+ this.setState({ active: false });
+ this.props.designer.onMouseLeaveLifeline(this.props.lifeline.id);
+ }
- /**
- * Get whether metadata permits delete.
- * @returns true if lifeline can be deleted.
- */
- isCanDelete() {
- return this.canDelete;
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Get whether metadata permits reorder.
+ * @returns true if reorderable.
+ */
+ isCanReorder() {
+ return this.canReorder;
+ }
- /**
- * React render.
- * @returns {*}
- */
- render() {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- const id = this.props.lifeline.id;
- const activeClass = (this.props.active === true) ? 'asdcs-active' : '';
- const { connectDragSource, connectDropTarget } = this.props;
- return connectDragSource(connectDropTarget(
+ /**
+ * Get whether metadata permits delete.
+ * @returns true if lifeline can be deleted.
+ */
+ isCanDelete() {
+ return this.canDelete;
+ }
- <div
- className={`asdcs-designer-lifeline ${activeClass}`}
- data-id={id}
- onMouseEnter={this.onMouseEnter}
- onMouseLeave={this.onMouseLeave}
- >
- <table className="asdcs-designer-layout asdcs-designer-lifeline-row1">
- <tbody>
- <tr>
- <td>
- <div className="asdcs-designer-sort asdcs-designer-icon">
- <Icon glyph={iconHandle} />
- </div>
- </td>
- <td>
- <div className="asdcs-designer-lifeline-index">{this.props.lifeline.index}.</div>
- </td>
- <td>
- <div className="asdcs-designer-lifeline-name">
- <input
- type="text"
- className="asdcs-editable"
- placeholder="Unnamed"
- value={this.state.name}
- onChange={this.onChangeName}
- onBlur={this.onBlurName}
- />
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * React render.
+ * @returns {*}
+ */
+ render() {
+ const id = this.props.lifeline.id;
+ const activeClass = this.props.active === true ? 'asdcs-active' : '';
+ const { connectDragSource, connectDropTarget } = this.props;
+ return connectDragSource(
+ connectDropTarget(
+ <div
+ className={`asdcs-designer-lifeline ${activeClass}`}
+ data-id={id}
+ onMouseEnter={this.onMouseEnter}
+ onMouseLeave={this.onMouseLeave}>
+ <table className="asdcs-designer-layout asdcs-designer-lifeline-row1">
+ <tbody>
+ <tr>
+ <td>
+ <div className="asdcs-designer-sort asdcs-designer-icon">
+ <Icon glyph={iconHandle} />
+ </div>
+ </td>
+ <td>
+ <div className="asdcs-designer-lifeline-index">
+ {this.props.lifeline.index}.
+ </div>
+ </td>
+ <td>
+ <div className="asdcs-designer-lifeline-name">
+ <input
+ type="text"
+ className="asdcs-editable"
+ placeholder="Unnamed"
+ value={this.state.name}
+ onChange={this.onChangeName}
+ onBlur={this.onBlurName}
+ />
+ </div>
+ </td>
+ <td>
+ <div
+ className="asdcs-designer-delete asdcs-designer-icon"
+ onClick={this.onClickDelete}>
+ <Icon glyph={iconDelete} />
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
- </td>
- <td>
- <div className="asdcs-designer-delete asdcs-designer-icon" onClick={this.onClickDelete}>
- <Icon glyph={iconDelete} />
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- ));
- }
+ )
+ );
+ }
}
/**
* Declare properties.
*/
Lifeline.propTypes = {
- application: PropTypes.object.isRequired,
- designer: PropTypes.object.isRequired,
- lifeline: PropTypes.object.isRequired,
- active: PropTypes.bool.isRequired,
- metamodel: PropTypes.object.isRequired,
- id: PropTypes.any.isRequired,
- index: PropTypes.number.isRequired,
- lifelines: PropTypes.object.isRequired,
- isDragging: PropTypes.bool.isRequired,
- connectDragSource: PropTypes.func.isRequired,
- connectDropTarget: PropTypes.func.isRequired,
+ application: PropTypes.object.isRequired,
+ designer: PropTypes.object.isRequired,
+ lifeline: PropTypes.object.isRequired,
+ active: PropTypes.bool.isRequired,
+ metamodel: PropTypes.object.isRequired,
+ id: PropTypes.any.isRequired,
+ index: PropTypes.number.isRequired,
+ lifelines: PropTypes.object.isRequired,
+ isDragging: PropTypes.bool.isRequired,
+ connectDragSource: PropTypes.func.isRequired,
+ connectDropTarget: PropTypes.func.isRequired
};
/** DND. */
const source = {
- beginDrag(props) {
- return {
- id: props.id,
- index: props.index,
- };
- },
+ beginDrag(props) {
+ return {
+ id: props.id,
+ index: props.index
+ };
+ }
};
/** DND. */
const sourceCollect = function collection(connect, monitor) {
- return {
- connectDragSource: connect.dragSource(),
- isDragging: monitor.isDragging(),
- };
+ return {
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging()
+ };
};
/** DND. */
const target = {
- drop(props, monitor, component) {
- Common.assertNotNull(props);
- Common.assertNotNull(monitor);
- const decorated = component.getDecoratedComponentInstance();
- if (decorated) {
- const lifelines = decorated.props.lifelines;
- if (lifelines) {
- const dragIndex = monitor.getItem().index;
- const hoverIndex = lifelines.getHoverIndex();
- lifelines.onDrop(dragIndex, hoverIndex);
- }
- }
- },
- hover(props, monitor, component) {
- Common.assertNotNull(props);
- Common.assertNotNull(monitor);
- if (component) {
- const decorated = component.getDecoratedComponentInstance();
- if (decorated) {
- const lifelines = decorated.props.lifelines;
- if (lifelines) {
- lifelines.setHoverIndex(decorated.props.index);
+ drop(props, monitor, component) {
+ Common.assertNotNull(props);
+ Common.assertNotNull(monitor);
+ const decorated = component.getDecoratedComponentInstance();
+ if (decorated) {
+ const lifelines = decorated.props.lifelines;
+ if (lifelines) {
+ const dragIndex = monitor.getItem().index;
+ const hoverIndex = lifelines.getHoverIndex();
+ lifelines.onDrop(dragIndex, hoverIndex);
+ }
+ }
+ },
+ hover(props, monitor, component) {
+ Common.assertNotNull(props);
+ Common.assertNotNull(monitor);
+ if (component) {
+ const decorated = component.getDecoratedComponentInstance();
+ if (decorated) {
+ const lifelines = decorated.props.lifelines;
+ if (lifelines) {
+ lifelines.setHoverIndex(decorated.props.index);
+ }
+ }
}
- }
}
- },
};
/** DND. */
function targetCollect(connect, monitor) {
- return {
- connectDropTarget: connect.dropTarget(),
- isOver: monitor.isOver(),
- };
+ return {
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver()
+ };
}
-
+/* eslint-disable new-cap */
const wrapper1 = DragSource('lifeline', source, sourceCollect)(Lifeline);
-export default DropTarget(['lifeline', 'lifeline-new'], target, targetCollect)(wrapper1);
+export default DropTarget(['lifeline', 'lifeline-new'], target, targetCollect)(
+ wrapper1
+);
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/LifelineNew.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/LifelineNew.jsx
index a8147be370..beb6364670 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/LifelineNew.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/LifelineNew.jsx
@@ -26,88 +26,92 @@ import iconHandle from '../../../../../../../../../../res/ecomp/asdc/sequencer/s
* LHS lifeline row view.
*/
class LifelineNew extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Construct view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
- /**
- * Construct view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
+ // Bindings.
- // Bindings.
+ this.onClickAdd = this.onClickAdd.bind(this);
+ }
- this.onClickAdd = this.onClickAdd.bind(this);
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Handle click event.
+ */
+ onClickAdd() {
+ this.props.designer.addLifeline();
+ }
- /**
- * Handle click event.
- */
- onClickAdd() {
- this.props.designer.addLifeline();
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render view.
- * @returns {*}
- */
- render() {
- const { connectDragSource } = this.props;
- return connectDragSource(
- <div className="asdcs-designer-lifeline asdcs-designer-lifeline-new">
- <table className="asdcs-designer-layout asdcs-designer-lifeline-new">
- <tbody>
- <tr>
- <td>
- <div className="asdcs-designer-sort asdcs-designer-icon">
- <Icon glyph={iconHandle} />
- </div>
- </td>
- <td>
- <div className="asdcs-designer-label" onClick={this.onClickAdd}>
- Add Lifeline
- </div>
- </td>
- <td>
- <div className="asdcs-designer-icon" onClick={this.onClickAdd}>
- <Icon glyph={iconPlus} />
- </div>
- </td>
- <td>&nbsp;</td>
- </tr>
- </tbody>
- </table>
- </div>
- );
- }
+ /**
+ * Render view.
+ * @returns {*}
+ */
+ render() {
+ const { connectDragSource } = this.props;
+ return connectDragSource(
+ <div className="asdcs-designer-lifeline asdcs-designer-lifeline-new">
+ <table className="asdcs-designer-layout asdcs-designer-lifeline-new">
+ <tbody>
+ <tr>
+ <td>
+ <div className="asdcs-designer-sort asdcs-designer-icon">
+ <Icon glyph={iconHandle} />
+ </div>
+ </td>
+ <td>
+ <div
+ className="asdcs-designer-label"
+ onClick={this.onClickAdd}>
+ Add Lifeline
+ </div>
+ </td>
+ <td>
+ <div
+ className="asdcs-designer-icon"
+ onClick={this.onClickAdd}>
+ <Icon glyph={iconPlus} />
+ </div>
+ </td>
+ <td>&nbsp;</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ );
+ }
}
/** Element properties. */
LifelineNew.propTypes = {
- designer: PropTypes.object.isRequired,
- lifelines: PropTypes.object.isRequired,
- connectDragSource: PropTypes.func.isRequired,
+ designer: PropTypes.object.isRequired,
+ lifelines: PropTypes.object.isRequired,
+ connectDragSource: PropTypes.func.isRequired
};
/** DND. */
const source = {
- beginDrag(props) {
- return { id: props.id };
- },
+ beginDrag(props) {
+ return { id: props.id };
+ }
};
/** DND. */
const collect = function collection(connect, monitor) {
- return {
- connectDragSource: connect.dragSource(),
- isDragging: monitor.isDragging(),
- };
+ return {
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging()
+ };
};
-
+/* eslint-disable new-cap */
export default DragSource('lifeline-new', source, collect)(LifelineNew);
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifelines.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifelines.jsx
index 2f82fec7a0..248264b6df 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifelines.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/lifeline/Lifelines.jsx
@@ -28,111 +28,110 @@ import LifelineNew from './LifelineNew';
* @constructor
*/
class Lifelines extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
+ this.setHoverIndex = this.setHoverIndex.bind(this);
+ this.getHoverIndex = this.getHoverIndex.bind(this);
+ this.onDrop = this.onDrop.bind(this);
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
- this.setHoverIndex = this.setHoverIndex.bind(this);
- this.getHoverIndex = this.getHoverIndex.bind(this);
- this.onDrop = this.onDrop.bind(this);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Record last hover index as non-state.
- * @param index index.
- */
- setHoverIndex(index) {
- this.hoverIndex = index;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get last recorded hover index.
- * @returns {*}
- */
- getHoverIndex() {
- return this.hoverIndex;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle drop.
- * @param dragIndex dragged item index; undefined if new.
- * @param hoverIndex drop index.
- */
- onDrop(dragIndex, hoverIndex) {
- if (hoverIndex >= 0) {
- const application = this.props.application;
- const model = application.getModel();
- if (Common.isNumber(dragIndex)) {
- if (dragIndex !== hoverIndex) {
- model.reorderLifelines(dragIndex, hoverIndex);
- }
- } else {
- model.addLifeline(hoverIndex);
- }
- this.forceUpdate();
- application.renderDiagram();
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Record last hover index as non-state.
+ * @param index index.
+ */
+ setHoverIndex(index) {
+ this.hoverIndex = index;
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get last recorded hover index.
+ * @returns {*}
+ */
+ getHoverIndex() {
+ return this.hoverIndex;
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render view.
- * @returns {XML}
- */
- render() {
- const model = this.props.application.getModel();
- const metamodel = model.getMetamodel();
- const diagram = model.unwrap().diagram;
-
- const lifelines = [];
- for (const lifeline of diagram.lifelines) {
- lifelines.push(<Lifeline
- key={`l${lifeline.id}`}
- application={this.props.application}
- designer={this.props.designer}
- lifeline={lifeline}
- active={this.props.activeLifelineId === lifeline.id}
- id={lifeline.id}
- metamodel={metamodel}
- lifelines={this}
- index={lifelines.length}
- />);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle drop.
+ * @param dragIndex dragged item index; undefined if new.
+ * @param hoverIndex drop index.
+ */
+ onDrop(dragIndex, hoverIndex) {
+ if (hoverIndex >= 0) {
+ const application = this.props.application;
+ const model = application.getModel();
+ if (Common.isNumber(dragIndex)) {
+ if (dragIndex !== hoverIndex) {
+ model.reorderLifelines(dragIndex, hoverIndex);
+ }
+ } else {
+ model.addLifeline(hoverIndex);
+ }
+ this.forceUpdate();
+ application.renderDiagram();
+ }
}
- lifelines.push(<LifelineNew
- key="_l"
- designer={this.props.designer}
- lifelines={this}
- />);
-
- return (
- <div className="asdcs-designer-lifelines">
- {lifelines}
- </div>
- );
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render view.
+ * @returns {XML}
+ */
+ render() {
+ const model = this.props.application.getModel();
+ const metamodel = model.getMetamodel();
+ const diagram = model.unwrap().diagram;
+
+ const lifelines = [];
+ for (const lifeline of diagram.lifelines) {
+ lifelines.push(
+ <Lifeline
+ key={`l${lifeline.id}`}
+ application={this.props.application}
+ designer={this.props.designer}
+ lifeline={lifeline}
+ active={this.props.activeLifelineId === lifeline.id}
+ id={lifeline.id}
+ metamodel={metamodel}
+ lifelines={this}
+ index={lifelines.length}
+ />
+ );
+ }
+
+ lifelines.push(
+ <LifelineNew
+ key="_l"
+ designer={this.props.designer}
+ lifelines={this}
+ />
+ );
+
+ return <div className="asdcs-designer-lifelines">{lifelines}</div>;
+ }
}
/**
* Declare properties.
*/
Lifelines.propTypes = {
- application: PropTypes.object.isRequired,
- designer: PropTypes.object.isRequired,
- activeLifelineId: PropTypes.string,
+ application: PropTypes.object.isRequired,
+ designer: PropTypes.object.isRequired,
+ activeLifelineId: PropTypes.string
};
export default Lifelines;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Message.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Message.jsx
index a2c7f5122a..ba77e8658f 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Message.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Message.jsx
@@ -34,482 +34,480 @@ import iconResponse from '../../../../../../../../../../res/ecomp/asdc/sequencer
* LHS message row view.
*/
class Message extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ active: false,
+ name: props.message.name || ''
+ };
+
+ this.combinedOptions = [
+ {
+ value: 'REQUEST_SYNC'
+ },
+ {
+ value: 'REQUEST_ASYNC'
+ },
+ {
+ value: 'RESPONSE'
+ }
+ ];
+
+ // Bindings.
+
+ this.onChangeName = this.onChangeName.bind(this);
+ this.onBlurName = this.onBlurName.bind(this);
+ this.onChangeType = this.onChangeType.bind(this);
+ this.onChangeFrom = this.onChangeFrom.bind(this);
+ this.onChangeTo = this.onChangeTo.bind(this);
+ this.onClickDelete = this.onClickDelete.bind(this);
+ this.onClickActions = this.onClickActions.bind(this);
+ this.onClickNotes = this.onClickNotes.bind(this);
+ this.onMouseEnter = this.onMouseEnter.bind(this);
+ this.onMouseLeave = this.onMouseLeave.bind(this);
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Construct view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
+ /**
+ * Handle name change.
+ * @param event change event.
+ */
+ onChangeName(event) {
+ this.setState({ name: event.target.value });
+ }
- this.state = {
- active: false,
- name: props.message.name || '',
- };
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle name change.
+ * @param event change event.
+ */
+ onBlurName(event) {
+ const options = this.props.application.getOptions();
+ const sanitized = Common.sanitizeText(
+ event.target.value,
+ options,
+ 'message'
+ );
+ const props = {
+ id: this.props.message.id,
+ name: sanitized
+ };
+ this.props.designer.updateMessage(props);
+ this.setState({ name: sanitized });
+ }
- this.combinedOptions = [{
- value: 'REQUEST_SYNC',
- }, {
- value: 'REQUEST_ASYNC',
- }, {
- value: 'RESPONSE',
- }];
-
- // Bindings.
-
- this.onChangeName = this.onChangeName.bind(this);
- this.onBlurName = this.onBlurName.bind(this);
- this.onChangeType = this.onChangeType.bind(this);
- this.onChangeFrom = this.onChangeFrom.bind(this);
- this.onChangeTo = this.onChangeTo.bind(this);
- this.onClickDelete = this.onClickDelete.bind(this);
- this.onClickActions = this.onClickActions.bind(this);
- this.onClickNotes = this.onClickNotes.bind(this);
- this.onMouseEnter = this.onMouseEnter.bind(this);
- this.onMouseLeave = this.onMouseLeave.bind(this);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle name change.
- * @param event change event.
- */
- onChangeName(event) {
- this.setState({ name: event.target.value });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle name change.
- * @param event change event.
- */
- onBlurName(event) {
- const options = this.props.application.getOptions();
- const sanitized = Common.sanitizeText(event.target.value, options, 'message');
- const props = {
- id: this.props.message.id,
- name: sanitized,
- };
- this.props.designer.updateMessage(props);
- this.setState({ name: sanitized });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle delete.
- */
- onClickDelete() {
- this.props.designer.deleteMessage(this.props.message.id);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle menu click.
- */
- onClickActions(event) {
- this.props.designer.showActions(this.props.message.id, { x: event.pageX, y: event.pageY });
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle menu click.
- */
- onClickNotes() {
- this.props.designer.showNotes(this.props.message.id);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle selection.
- * @param value selection.
- */
- onChangeFrom(value) {
- if (value.target) {
- this.updateMessage({ from: value.target.value });
- } else {
- this.updateMessage({ from: value.value });
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle delete.
+ */
+ onClickDelete() {
+ this.props.designer.deleteMessage(this.props.message.id);
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle selection.
- * @param value selection.
- */
- onChangeTo(value) {
- if (value.target) {
- this.updateMessage({ to: value.target.value });
- } else {
- this.updateMessage({ to: value.value });
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle menu click.
+ */
+ onClickActions(event) {
+ this.props.designer.showActions(this.props.message.id, {
+ x: event.pageX,
+ y: event.pageY
+ });
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle selection.
- * @param selected selection.
- */
- onChangeType(selected) {
-
- const value = selected.target ? selected.target.value : selected.value;
- const props = {};
- if (value.indexOf('RESPONSE') !== -1) {
- props.type = 'response';
- props.asynchronous = false;
- } else {
- props.type = 'request';
- props.asynchronous = (value.indexOf('ASYNC') !== -1);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle menu click.
+ */
+ onClickNotes() {
+ this.props.designer.showNotes(this.props.message.id);
}
- this.updateMessage(props);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle mouse event.
- */
- onMouseEnter() {
- this.setState({ active: true });
- this.props.designer.onMouseEnterMessage(this.props.message.id);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle mouse event.
- */
- onMouseLeave() {
- this.setState({ active: false });
- this.props.designer.onMouseLeaveMessage(this.props.message.id);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Update message properties.
- * @param props properties updates.
- */
- updateMessage(props) {
- const update = {
- id: this.props.message.id,
- };
- for (const k of Object.keys(props)) {
- update[k] = props[k];
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle selection.
+ * @param value selection.
+ */
+ onChangeFrom(value) {
+ if (value.target) {
+ this.updateMessage({ from: value.target.value });
+ } else {
+ this.updateMessage({ from: value.value });
+ }
}
- this.props.designer.updateMessage(update);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render icon.
- * @param option selection.
- * @returns {XML}
- */
- renderOption(option) {
- if (option.value === 'RESPONSE') {
- return <Icon glyph={iconResponse} />;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle selection.
+ * @param value selection.
+ */
+ onChangeTo(value) {
+ if (value.target) {
+ this.updateMessage({ to: value.target.value });
+ } else {
+ this.updateMessage({ to: value.value });
+ }
}
- if (option.value === 'REQUEST_ASYNC') {
- return <Icon glyph={iconRequestAsync} />;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle selection.
+ * @param selected selection.
+ */
+ onChangeType(selected) {
+ const value = selected.target ? selected.target.value : selected.value;
+ const props = {};
+ if (value.indexOf('RESPONSE') !== -1) {
+ props.type = 'response';
+ props.asynchronous = false;
+ } else {
+ props.type = 'request';
+ props.asynchronous = value.indexOf('ASYNC') !== -1;
+ }
+
+ this.updateMessage(props);
}
- return <Icon glyph={iconRequestSync} />;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get request/response and asynchronous combined constant.
- * @param message message whose properties define spec.
- * @returns {*}
- */
- getMessageSpec(message) {
- if (message.type === 'response') {
- return 'RESPONSE';
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle mouse event.
+ */
+ onMouseEnter() {
+ this.setState({ active: true });
+ this.props.designer.onMouseEnterMessage(this.props.message.id);
}
- if (message.asynchronous) {
- return 'REQUEST_ASYNC';
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle mouse event.
+ */
+ onMouseLeave() {
+ this.setState({ active: false });
+ this.props.designer.onMouseLeaveMessage(this.props.message.id);
}
- return 'REQUEST_SYNC';
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * @returns {*}
- * @private
- */
- renderHTMLSelect() {
-
- const message = this.props.message;
- const from = this.props.from;
- const to = Common.assertNotNull(this.props.to);
- const messageNotesActiveClass = message.notes && message.notes.length > 0 ? 'asdcs-active' : '';
- const combinedValue = this.getMessageSpec(message);
-
- const lifelineOptions = [];
- for (const lifeline of this.props.model.unwrap().diagram.lifelines) {
- lifelineOptions.push(<option
- key={lifeline.id}
- value={lifeline.id}
- >
- {lifeline.name}
- </option>);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Update message properties.
+ * @param props properties updates.
+ */
+ updateMessage(props) {
+ const update = {
+ id: this.props.message.id
+ };
+ for (const k of Object.keys(props)) {
+ update[k] = props[k];
+ }
+ this.props.designer.updateMessage(update);
}
- const activeClass = (this.state.active || this.props.active) ? 'asdcs-active' : '';
- const { connectDragSource, connectDropTarget } = this.props;
- return connectDragSource(connectDropTarget(
- <div
- className={`asdcs-designer-message ${activeClass}`}
- data-id={message.id}
- onMouseEnter={this.onMouseEnter}
- onMouseLeave={this.onMouseLeave}
- >
-
- <table className="asdcs-designer-layout asdcs-designer-message-row1">
- <tbody>
- <tr>
- <td>
- <div className="asdcs-designer-sort asdcs-designer-icon">
- <Icon glyph={iconHandle} />
- </div>
- </td>
- <td>
- <div className="asdcs-designer-message-index">{message.index}.</div>
- </td>
- <td>
- <div className="asdcs-designer-message-name">
- <input
- type="text"
- className="asdcs-editable"
- value={this.state.name}
- placeholder="Unnamed"
- onBlur={this.onBlurName}
- onChange={this.onChangeName}
- />
- </div>
- </td>
- <td>
- <div className="asdcs-designer-actions">
- <div
- className="asdcs-designer-settings asdcs-designer-icon"
- onClick={this.onClickActions}
- >
- <Icon glyph={iconSettings} />
- </div>
- <div
- className={`asdcs-designer-notes asdcs-designer-icon ${messageNotesActiveClass}`}
- onClick={this.onClickNotes}
- >
- <Icon glyph={iconNotes} />
- </div>
- <div
- className="asdcs-designer-delete asdcs-designer-icon"
- onClick={this.onClickDelete}
- >
- <Icon glyph={iconDelete} />
- </div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table className="asdcs-designer-layout asdcs-designer-message-row2">
- <tbody>
- <tr>
- <td>
- <select
- onChange={this.onChangeFrom}
- className="asdcs-designer-select-message-from"
- value={from.id}
- onChange={this.onChangeFrom}
- >
- options={lifelineOptions}
- </select>
- </td>
- <td>
- <select
- onChange={this.onChangeFrom}
- className="asdcs-designer-select-message-type"
- value={combinedValue}
- onChange={this.onChangeType}
- >
- <option value="REQUEST_SYNC">⇾</option>
- <option value="REQUEST_ASYNC">→</option>
- <option value="RESPONSE">⇠</option>
- </select>
- </td>
- <td>
- <select
- onChange={this.onChangeFrom}
- className="asdcs-designer-select-message-to"
- value={to.id}
- onChange={this.onChangeTo}
- >
- options={lifelineOptions}
- </select>
- </td>
- </tr>
- </tbody>
- </table>
-
- </div>
- ));
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render view.
- * @returns {*}
- * @private
- */
- renderReactSelect() {
-
- const message = this.props.message;
- const from = this.props.from;
- const to = Common.assertNotNull(this.props.to);
- const messageNotesActiveClass = message.notes && message.notes.length > 0 ? 'asdcs-active' : '';
- const combinedValue = this.getMessageSpec(message);
-
- const lifelineOptions = [];
- for (const lifeline of this.props.model.unwrap().diagram.lifelines) {
- lifelineOptions.push({
- value: lifeline.id,
- label: lifeline.name,
- });
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render icon.
+ * @param option selection.
+ * @returns {XML}
+ */
+ renderOption(option) {
+ if (option.value === 'RESPONSE') {
+ return <Icon glyph={iconResponse} />;
+ }
+ if (option.value === 'REQUEST_ASYNC') {
+ return <Icon glyph={iconRequestAsync} />;
+ }
+ return <Icon glyph={iconRequestSync} />;
}
- const activeClass = (this.state.active || this.props.active) ? 'asdcs-active' : '';
- const { connectDragSource, connectDropTarget } = this.props;
- return connectDragSource(connectDropTarget(
-
- <div
- className={`asdcs-designer-message ${activeClass}`}
- data-id={message.id}
- onMouseEnter={this.onMouseEnter}
- onMouseLeave={this.onMouseLeave}
- >
-
- <table className="asdcs-designer-layout asdcs-designer-message-row1">
- <tbody>
- <tr>
- <td>
- <div className="asdcs-designer-sort asdcs-designer-icon">
- <Icon glyph={iconHandle} />
- </div>
- </td>
- <td>
- <div className="asdcs-designer-message-index">{message.index}.</div>
- </td>
- <td>
- <div className="asdcs-designer-message-name">
- <input
- type="text"
- className="asdcs-editable"
- value={this.state.name}
- placeholder="Unnamed"
- onBlur={this.onBlurName}
- onChange={this.onChangeName}
- />
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get request/response and asynchronous combined constant.
+ * @param message message whose properties define spec.
+ * @returns {*}
+ */
+ getMessageSpec(message) {
+ if (message.type === 'response') {
+ return 'RESPONSE';
+ }
+ if (message.asynchronous) {
+ return 'REQUEST_ASYNC';
+ }
+ return 'REQUEST_SYNC';
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * @returns {*}
+ * @private
+ */
+ renderHTMLSelect() {
+ const message = this.props.message;
+ const from = this.props.from;
+ const to = Common.assertNotNull(this.props.to);
+ const messageNotesActiveClass =
+ message.notes && message.notes.length > 0 ? 'asdcs-active' : '';
+ const combinedValue = this.getMessageSpec(message);
+
+ const lifelineOptions = [];
+ for (const lifeline of this.props.model.unwrap().diagram.lifelines) {
+ lifelineOptions.push(
+ <option key={lifeline.id} value={lifeline.id}>
+ {lifeline.name}
+ </option>
+ );
+ }
+
+ const activeClass =
+ this.state.active || this.props.active ? 'asdcs-active' : '';
+ const { connectDragSource, connectDropTarget } = this.props;
+ return connectDragSource(
+ connectDropTarget(
+ <div
+ className={`asdcs-designer-message ${activeClass}`}
+ data-id={message.id}
+ onMouseEnter={this.onMouseEnter}
+ onMouseLeave={this.onMouseLeave}>
+ <table className="asdcs-designer-layout asdcs-designer-message-row1">
+ <tbody>
+ <tr>
+ <td>
+ <div className="asdcs-designer-sort asdcs-designer-icon">
+ <Icon glyph={iconHandle} />
+ </div>
+ </td>
+ <td>
+ <div className="asdcs-designer-message-index">
+ {message.index}.
+ </div>
+ </td>
+ <td>
+ <div className="asdcs-designer-message-name">
+ <input
+ type="text"
+ className="asdcs-editable"
+ value={this.state.name}
+ placeholder="Unnamed"
+ onBlur={this.onBlurName}
+ onChange={this.onChangeName}
+ />
+ </div>
+ </td>
+ <td>
+ <div className="asdcs-designer-actions">
+ <div
+ className="asdcs-designer-settings asdcs-designer-icon"
+ onClick={this.onClickActions}>
+ <Icon glyph={iconSettings} />
+ </div>
+ <div
+ className={`asdcs-designer-notes asdcs-designer-icon ${messageNotesActiveClass}`}
+ onClick={this.onClickNotes}>
+ <Icon glyph={iconNotes} />
+ </div>
+ <div
+ className="asdcs-designer-delete asdcs-designer-icon"
+ onClick={this.onClickDelete}>
+ <Icon glyph={iconDelete} />
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table className="asdcs-designer-layout asdcs-designer-message-row2">
+ <tbody>
+ <tr>
+ <td>
+ <select
+ className="asdcs-designer-select-message-from"
+ value={from.id}
+ onChange={this.onChangeFrom}>
+ options={lifelineOptions}
+ </select>
+ </td>
+ <td>
+ <select
+ className="asdcs-designer-select-message-type"
+ value={combinedValue}
+ onChange={this.onChangeType}>
+ <option value="REQUEST_SYNC">⇾</option>
+ <option value="REQUEST_ASYNC">→</option>
+ <option value="RESPONSE">⇠</option>
+ </select>
+ </td>
+ <td>
+ <select
+ className="asdcs-designer-select-message-to"
+ value={to.id}
+ onChange={this.onChangeTo}>
+ options={lifelineOptions}
+ </select>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
- </td>
- <td>
- <div className="asdcs-designer-actions">
- <div
- className="asdcs-designer-settings asdcs-designer-icon"
- onClick={this.onClickActions}
- >
- <Icon glyph={iconSettings} />
- </div>
- <div
- className={`asdcs-designer-notes asdcs-designer-icon ${messageNotesActiveClass}`}
- onClick={this.onClickNotes}
- >
- <Icon glyph={iconNotes} />
- </div>
- <div
- className="asdcs-designer-delete asdcs-designer-icon"
- onClick={this.onClickDelete}
- >
- <Icon glyph={iconDelete} />
- </div>
+ )
+ );
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render view.
+ * @returns {*}
+ * @private
+ */
+ renderReactSelect() {
+ const message = this.props.message;
+ const from = this.props.from;
+ const to = Common.assertNotNull(this.props.to);
+ const messageNotesActiveClass =
+ message.notes && message.notes.length > 0 ? 'asdcs-active' : '';
+ const combinedValue = this.getMessageSpec(message);
+
+ const lifelineOptions = [];
+ for (const lifeline of this.props.model.unwrap().diagram.lifelines) {
+ lifelineOptions.push({
+ value: lifeline.id,
+ label: lifeline.name
+ });
+ }
+
+ const activeClass =
+ this.state.active || this.props.active ? 'asdcs-active' : '';
+ const { connectDragSource, connectDropTarget } = this.props;
+ return connectDragSource(
+ connectDropTarget(
+ <div
+ className={`asdcs-designer-message ${activeClass}`}
+ data-id={message.id}
+ onMouseEnter={this.onMouseEnter}
+ onMouseLeave={this.onMouseLeave}>
+ <table className="asdcs-designer-layout asdcs-designer-message-row1">
+ <tbody>
+ <tr>
+ <td>
+ <div className="asdcs-designer-sort asdcs-designer-icon">
+ <Icon glyph={iconHandle} />
+ </div>
+ </td>
+ <td>
+ <div className="asdcs-designer-message-index">
+ {message.index}.
+ </div>
+ </td>
+ <td>
+ <div className="asdcs-designer-message-name">
+ <input
+ type="text"
+ className="asdcs-editable"
+ value={this.state.name}
+ placeholder="Unnamed"
+ onBlur={this.onBlurName}
+ onChange={this.onChangeName}
+ />
+ </div>
+ </td>
+ <td>
+ <div className="asdcs-designer-actions">
+ <div
+ className="asdcs-designer-settings asdcs-designer-icon"
+ onClick={this.onClickActions}>
+ <Icon glyph={iconSettings} />
+ </div>
+ <div
+ className={`asdcs-designer-notes asdcs-designer-icon ${messageNotesActiveClass}`}
+ onClick={this.onClickNotes}>
+ <Icon glyph={iconNotes} />
+ </div>
+ <div
+ className="asdcs-designer-delete asdcs-designer-icon"
+ onClick={this.onClickDelete}>
+ <Icon glyph={iconDelete} />
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table className="asdcs-designer-layout asdcs-designer-message-row2">
+ <tbody>
+ <tr>
+ <td>
+ <Select
+ className="asdcs-editable-select asdcs-designer-editable-message-from"
+ openOnFocus
+ clearable={false}
+ searchable={false}
+ value={from.id}
+ onChange={this.onChangeFrom}
+ options={lifelineOptions}
+ />
+ </td>
+ <td>
+ <Select
+ className="asdcs-editable-select asdcs-designer-editable-message-type"
+ openOnFocus
+ clearable={false}
+ searchable={false}
+ value={combinedValue}
+ onChange={this.onChangeType}
+ options={this.combinedOptions}
+ optionRenderer={this.renderOption}
+ valueRenderer={this.renderOption}
+ />
+ </td>
+ <td>
+ <Select
+ className="asdcs-editable-select asdcs-designer-editable-message-to"
+ openOnFocus
+ clearable={false}
+ searchable={false}
+ value={to.id}
+ onChange={this.onChangeTo}
+ options={lifelineOptions}
+ />
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table className="asdcs-designer-layout asdcs-designer-message-row2">
- <tbody>
- <tr>
- <td>
- <Select
- className="asdcs-editable-select asdcs-designer-editable-message-from"
- openOnFocus
- clearable={false}
- searchable={false}
- value={from.id}
- onChange={this.onChangeFrom}
- options={lifelineOptions}
- />
- </td>
- <td>
- <Select
- className="asdcs-editable-select asdcs-designer-editable-message-type"
- openOnFocus
- clearable={false}
- searchable={false}
- value={combinedValue}
- onChange={this.onChangeType}
- options={this.combinedOptions}
- optionRenderer={this.renderOption}
- valueRenderer={this.renderOption}
- />
- </td>
- <td>
- <Select
- className="asdcs-editable-select asdcs-designer-editable-message-to"
- openOnFocus
- clearable={false}
- searchable={false}
- value={to.id}
- onChange={this.onChangeTo}
- options={lifelineOptions}
- />
- </td>
-
- </tr>
- </tbody>
- </table>
-
- </div>
- ));
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- render() {
- const options = this.props.application.getOptions();
- if (options.useHtmlSelect) {
- return this.renderHTMLSelect();
+ )
+ );
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ render() {
+ const options = this.props.application.getOptions();
+ if (options.useHtmlSelect) {
+ return this.renderHTMLSelect();
+ }
+ return this.renderReactSelect();
}
- return this.renderReactSelect();
- }
}
/**
@@ -517,72 +515,74 @@ class Message extends React.Component {
* @type {{designer: *, message: *, from: *, to: *, model: *, connectDragSource: *}}
*/
Message.propTypes = {
- application: PropTypes.object.isRequired,
- designer: PropTypes.object.isRequired,
- message: PropTypes.object.isRequired,
- active: PropTypes.bool.isRequired,
- from: PropTypes.object.isRequired,
- to: PropTypes.object.isRequired,
- model: PropTypes.object.isRequired,
- index: PropTypes.number.isRequired,
- messages: PropTypes.object.isRequired,
- connectDragSource: PropTypes.func.isRequired,
- connectDropTarget: PropTypes.func.isRequired,
+ application: PropTypes.object.isRequired,
+ designer: PropTypes.object.isRequired,
+ message: PropTypes.object.isRequired,
+ active: PropTypes.bool.isRequired,
+ from: PropTypes.object.isRequired,
+ to: PropTypes.object.isRequired,
+ model: PropTypes.object.isRequired,
+ index: PropTypes.number.isRequired,
+ messages: PropTypes.object.isRequired,
+ connectDragSource: PropTypes.func.isRequired,
+ connectDropTarget: PropTypes.func.isRequired
};
/** DND. */
const source = {
- beginDrag(props) {
- return {
- id: props.id,
- index: props.index,
- };
- },
+ beginDrag(props) {
+ return {
+ id: props.id,
+ index: props.index
+ };
+ }
};
/** DND. */
const sourceCollect = function collection(connect, monitor) {
- return {
- connectDragSource: connect.dragSource(),
- isDragging: monitor.isDragging(),
- };
+ return {
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging()
+ };
};
-
/** DND. */
const target = {
- drop(props, monitor, component) {
- Common.assertNotNull(props);
- Common.assertNotNull(monitor);
- const decorated = component.getDecoratedComponentInstance();
- if (decorated) {
- const messages = decorated.props.messages;
- if (messages) {
- const dragIndex = monitor.getItem().index;
- const hoverIndex = messages.getHoverIndex();
- messages.onDrop(dragIndex, hoverIndex);
- }
+ drop(props, monitor, component) {
+ Common.assertNotNull(props);
+ Common.assertNotNull(monitor);
+ const decorated = component.getDecoratedComponentInstance();
+ if (decorated) {
+ const messages = decorated.props.messages;
+ if (messages) {
+ const dragIndex = monitor.getItem().index;
+ const hoverIndex = messages.getHoverIndex();
+ messages.onDrop(dragIndex, hoverIndex);
+ }
+ }
+ },
+ hover(props, monitor, component) {
+ Common.assertNotNull(props);
+ Common.assertNotNull(monitor);
+ if (component) {
+ const decorated = component.getDecoratedComponentInstance();
+ if (decorated) {
+ decorated.props.messages.setHoverIndex(decorated.props.index);
+ }
+ }
}
- },
- hover(props, monitor, component) {
- Common.assertNotNull(props);
- Common.assertNotNull(monitor);
- if (component) {
- const decorated = component.getDecoratedComponentInstance();
- if (decorated) {
- decorated.props.messages.setHoverIndex(decorated.props.index);
- }
- }
- },
};
/** DND. */
function targetCollect(connect, monitor) {
- return {
- connectDropTarget: connect.dropTarget(),
- isOver: monitor.isOver(),
- };
+ return {
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver()
+ };
}
-
+/* eslint-disable new-cap */
const wrapper = DragSource('message', source, sourceCollect)(Message);
-export default DropTarget(['message', 'message-new'], target, targetCollect)(wrapper);
+export default DropTarget(['message', 'message-new'], target, targetCollect)(
+ wrapper
+);
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/MessageNew.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/MessageNew.jsx
index c47cf28a64..78e892baf8 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/MessageNew.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/MessageNew.jsx
@@ -26,82 +26,84 @@ import iconHandle from '../../../../../../../../../../res/ecomp/asdc/sequencer/s
* LHS lifeline row view.
*/
class MessageNew extends React.Component {
+ /**
+ * Construct view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
+ this.onClickAdd = this.onClickAdd.bind(this);
+ }
- /**
- * Construct view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
- this.onClickAdd = this.onClickAdd.bind(this);
- }
+ /**
+ * Handle add.
+ */
+ onClickAdd() {
+ this.props.designer.addMessage();
+ }
- /**
- * Handle add.
- */
- onClickAdd() {
- this.props.designer.addMessage();
- }
-
- /**
- * Render view.
- * @returns {*}
- */
- render() {
- const { connectDragSource } = this.props;
- return connectDragSource(
- <div className="asdcs-designer-message asdcs-designer-message-new">
- <table className="asdcs-designer-layout asdcs-designer-message-new">
- <tbody>
- <tr>
- <td>
- <div className="asdcs-designer-sort asdcs-designer-icon">
- <Icon glyph={iconHandle} />
- </div>
- </td>
- <td>
- <div className="asdcs-designer-label" onClick={this.onClickAdd}>
- Add Message
- </div>
- </td>
- <td>
- <div className="asdcs-designer-icon" onClick={this.onClickAdd}>
- <Icon glyph={iconPlus} />
- </div>
- </td>
- <td>
- &nbsp;
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- );
- }
+ /**
+ * Render view.
+ * @returns {*}
+ */
+ render() {
+ const { connectDragSource } = this.props;
+ return connectDragSource(
+ <div className="asdcs-designer-message asdcs-designer-message-new">
+ <table className="asdcs-designer-layout asdcs-designer-message-new">
+ <tbody>
+ <tr>
+ <td>
+ <div className="asdcs-designer-sort asdcs-designer-icon">
+ <Icon glyph={iconHandle} />
+ </div>
+ </td>
+ <td>
+ <div
+ className="asdcs-designer-label"
+ onClick={this.onClickAdd}>
+ Add Message
+ </div>
+ </td>
+ <td>
+ <div
+ className="asdcs-designer-icon"
+ onClick={this.onClickAdd}>
+ <Icon glyph={iconPlus} />
+ </div>
+ </td>
+ <td>&nbsp;</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ );
+ }
}
/** Element properties. */
MessageNew.propTypes = {
- designer: PropTypes.object.isRequired,
- messages: PropTypes.object.isRequired,
- connectDragSource: PropTypes.func.isRequired,
+ designer: PropTypes.object.isRequired,
+ messages: PropTypes.object.isRequired,
+ connectDragSource: PropTypes.func.isRequired
};
/** DND. */
const source = {
- beginDrag(props) {
- return { id: props.id };
- },
+ beginDrag(props) {
+ return { id: props.id };
+ }
};
/** DND. */
const collect = function collection(connect, monitor) {
- return {
- connectDragSource: connect.dragSource(),
- isDragging: monitor.isDragging(),
- };
+ return {
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging()
+ };
};
+/* eslint-disable new-cap */
export default DragSource('message-new', source, collect)(MessageNew);
-
+/* eslint-enable new-cap */
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.jsx
index 417155498e..6d2b35e41d 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.jsx
@@ -28,116 +28,113 @@ import MessageNew from './MessageNew';
* @constructor
*/
export default class Messages extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
+ this.state = {};
+ this.setHoverIndex = this.setHoverIndex.bind(this);
+ this.getHoverIndex = this.getHoverIndex.bind(this);
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
- this.state = {
- };
- this.setHoverIndex = this.setHoverIndex.bind(this);
- this.getHoverIndex = this.getHoverIndex.bind(this);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Record last hover index as non-state.
- * @param index index.
- */
- setHoverIndex(index) {
- this.hoverIndex = index;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get last recorded hover index.
- * @returns {*}
- */
- getHoverIndex() {
- return this.hoverIndex;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Handle drop.
- * @param dragIndex dragged item index; undefined if new.
- * @param hoverIndex drop index.
- */
- onDrop(dragIndex, hoverIndex) {
- if (hoverIndex >= 0) {
- const application = this.props.application;
- const model = application.getModel();
- if (Common.isNumber(dragIndex)) {
- if (dragIndex !== hoverIndex) {
- model.reorderMessages(dragIndex, hoverIndex);
- }
- } else {
- model.addMessage(hoverIndex);
- }
- this.forceUpdate();
- application.renderDiagram();
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Record last hover index as non-state.
+ * @param index index.
+ */
+ setHoverIndex(index) {
+ this.hoverIndex = index;
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render view.
- * @returns {*}
- */
- render() {
-
- const model = this.props.application.getModel();
- const diagram = model.unwrap().diagram;
-
- // Render existing messages.
-
- const messages = [];
- for (const step of diagram.steps) {
- const message = step.message;
- const from = model.getLifelineById(message.from);
- const to = model.getLifelineById(message.to);
- messages.push(<Message
- key={`m${message.id}`}
- application={this.props.application}
- designer={this.props.designer}
- message={message}
- active={this.props.activeMessageId === message.id}
- from={from}
- to={to}
- model={model}
- index={messages.length}
- messages={this}
- />);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get last recorded hover index.
+ * @returns {*}
+ */
+ getHoverIndex() {
+ return this.hoverIndex;
}
- // Render add.
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Handle drop.
+ * @param dragIndex dragged item index; undefined if new.
+ * @param hoverIndex drop index.
+ */
+ onDrop(dragIndex, hoverIndex) {
+ if (hoverIndex >= 0) {
+ const application = this.props.application;
+ const model = application.getModel();
+ if (Common.isNumber(dragIndex)) {
+ if (dragIndex !== hoverIndex) {
+ model.reorderMessages(dragIndex, hoverIndex);
+ }
+ } else {
+ model.addMessage(hoverIndex);
+ }
+ this.forceUpdate();
+ application.renderDiagram();
+ }
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render view.
+ * @returns {*}
+ */
+ render() {
+ const model = this.props.application.getModel();
+ const diagram = model.unwrap().diagram;
+
+ // Render existing messages.
+
+ const messages = [];
+ for (const step of diagram.steps) {
+ const message = step.message;
+ const from = model.getLifelineById(message.from);
+ const to = model.getLifelineById(message.to);
+ messages.push(
+ <Message
+ key={`m${message.id}`}
+ application={this.props.application}
+ designer={this.props.designer}
+ message={message}
+ active={this.props.activeMessageId === message.id}
+ from={from}
+ to={to}
+ model={model}
+ index={messages.length}
+ messages={this}
+ />
+ );
+ }
- messages.push(<MessageNew
- key="_m"
- designer={this.props.designer}
- messages={this}
- />);
+ // Render add.
- return (
- <div className="asdcs-designer-steps">
- {messages}
- </div>
- );
- }
+ messages.push(
+ <MessageNew
+ key="_m"
+ designer={this.props.designer}
+ messages={this}
+ />
+ );
+
+ return <div className="asdcs-designer-steps">{messages}</div>;
+ }
}
/** Element properties. */
Messages.propTypes = {
- application: PropTypes.object.isRequired,
- designer: PropTypes.object.isRequired,
- activeMessageId: PropTypes.string,
+ application: PropTypes.object.isRequired,
+ designer: PropTypes.object.isRequired,
+ activeMessageId: PropTypes.string
};
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/metadata/Metadata.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/metadata/Metadata.jsx
index cc1faddcba..419c728671 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/metadata/Metadata.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/metadata/Metadata.jsx
@@ -20,15 +20,11 @@ import PropTypes from 'prop-types';
* Metadata view.
*/
const Metadata = function Metadata(props) {
- return (
- <div className="asdcs-designer-metadata">
- {props.metadata.name}
- </div>
- );
+ return <div className="asdcs-designer-metadata">{props.metadata.name}</div>;
};
Metadata.propTypes = {
- metadata: PropTypes.object.isRequired,
+ metadata: PropTypes.object.isRequired
};
export default Metadata;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/source/Source.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/source/Source.jsx
index 04ea5280ba..1ba7e9f324 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/source/Source.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/source/Source.jsx
@@ -20,67 +20,69 @@ import PropTypes from 'prop-types';
* Editor view, aggregating the designer, the code editor, the toolbar.
*/
export default class Source extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct view.
- */
- constructor(props, context) {
- super(props, context);
- this.demo = this.props.application.getOptions().demo;
- }
+ /**
+ * Construct view.
+ */
+ constructor(props, context) {
+ super(props, context);
+ this.demo = this.props.application.getOptions().demo;
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Set JSON mode.
- * @param json JSON (stringified) code.
- */
- setJSON(json = '') {
- if (this.textarea) {
- this.textarea.value = json;
+ /**
+ * Set JSON mode.
+ * @param json JSON (stringified) code.
+ */
+ setJSON(json = '') {
+ if (this.textarea) {
+ this.textarea.value = json;
+ }
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Set YAML mode.
- * @param yaml YAML code.
- */
- setYAML(yaml = '') {
- if (this.textarea) {
- this.textarea.value = yaml;
+ /**
+ * Set YAML mode.
+ * @param yaml YAML code.
+ */
+ setYAML(yaml = '') {
+ if (this.textarea) {
+ this.textarea.value = yaml;
+ }
}
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- componentDidMount() {
- /*
+ componentDidMount() {
+ /*
this.cm = CodeMirror.fromTextArea(this.textarea, {
lineNumbers: true,
readOnly: true,
});
*/
- }
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Render to DOM.
- */
- render() {
- return (
- <div className="asdcs-editor-code">
- <textarea ref={(r) => { this.textarea = r; }}></textarea>
- </div>
- );
- }
+ /**
+ * Render to DOM.
+ */
+ render() {
+ return (
+ <div className="asdcs-editor-code">
+ <textarea
+ ref={r => {
+ this.textarea = r;
+ }}
+ />
+ </div>
+ );
+ }
}
Source.propTypes = {
- application: PropTypes.object.isRequired,
+ application: PropTypes.object.isRequired
};
-
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx
index 4ac9c3dfad..c32172571d 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx
@@ -26,100 +26,120 @@ import iconOpen from '../../../../../../../../res/ecomp/asdc/sequencer/sprites/i
* all you get are the buttons for toggling between JSON/YAML/Designer.
*/
export default class Toolbar extends React.Component {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct view.
+ */
+ constructor(props, context) {
+ super(props, context);
+ this.application = Common.assertType(this.props.application, 'Object');
+ this.editor = Common.assertType(this.props.editor, 'Object');
+ this.mode = 'design';
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct view.
- */
- constructor(props, context) {
- super(props, context);
- this.application = Common.assertType(this.props.application, 'Object');
- this.editor = Common.assertType(this.props.editor, 'Object');
- this.mode = 'design';
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Set editor mode, one of {design, json, yaml}.
- * @param mode
- */
- setMode(mode = 'design') {
- this.mode = mode;
- }
+ /**
+ * Set editor mode, one of {design, json, yaml}.
+ * @param mode
+ */
+ setMode(mode = 'design') {
+ this.mode = mode;
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Render into the DOM.
- */
- render() {
-
- const demo = this.application.getOptions().demo;
- const demoCss = demo ? '' : 'asdc-hide';
-
- return (
- <div className={`asdcs-editor-toolbar ${demoCss}`}>
- <div className="asdcs-editor-toolbar-demo">
- <button className="asdcs-button-new" data-title="New sequence">
- <svg>
- <use xlinkHref={iconPlus} className="asdcs-icon" />
- </svg>
- </button>
- <button className="asdcs-button-open" data-title="Open sequence">
- <svg>
- <use xlinkHref={iconOpen} className="asdcs-icon" />
- </svg>
- </button>
- <button className="asdcs-button-save" data-title="Save checkpoint">
- <svg>
- <use xlinkHref="#icon--save" className="asdcs-icon" />
- </svg>
- </button>
- <button className="asdcs-button-validate" data-title="Validate">
- <svg>
- <use xlinkHref="#icon--validate" className="asdcs-icon" />
- </svg>
- </button>
- <button className="asdcs-button-download" data-title="Download">
- <svg>
- <use xlinkHref="#icon--download" className="asdcs-icon" />
- </svg>
- </button>
- <button className="asdcs-button-upload" data-title="Upload">
- <svg>
- <use xlinkHref="#icon--upload" className="asdcs-icon" />
- </svg>
- </button>
- </div>
- <div className="asdcs-editor-toolbar-toggle">
- <button className="asdcs-button-design asdcs-button-mode asdcs-button-toggle-left">
- Design
- </button>
- <button className="asdcs-button-json asdcs-button-mode asdcs-button-toggle-center">
- JSON
- </button>
- <button className="asdcs-button-yaml asdcs-button-mode asdcs-button-toggle-right">
- YAML
- </button>
- </div>
- </div>
- );
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Render into the DOM.
+ */
+ render() {
+ const demo = this.application.getOptions().demo;
+ const demoCss = demo ? '' : 'asdc-hide';
+
+ return (
+ <div className={`asdcs-editor-toolbar ${demoCss}`}>
+ <div className="asdcs-editor-toolbar-demo">
+ <button
+ className="asdcs-button-new"
+ data-title="New sequence">
+ <svg>
+ <use xlinkHref={iconPlus} className="asdcs-icon" />
+ </svg>
+ </button>
+ <button
+ className="asdcs-button-open"
+ data-title="Open sequence">
+ <svg>
+ <use xlinkHref={iconOpen} className="asdcs-icon" />
+ </svg>
+ </button>
+ <button
+ className="asdcs-button-save"
+ data-title="Save checkpoint">
+ <svg>
+ <use
+ xlinkHref="#icon--save"
+ className="asdcs-icon"
+ />
+ </svg>
+ </button>
+ <button
+ className="asdcs-button-validate"
+ data-title="Validate">
+ <svg>
+ <use
+ xlinkHref="#icon--validate"
+ className="asdcs-icon"
+ />
+ </svg>
+ </button>
+ <button
+ className="asdcs-button-download"
+ data-title="Download">
+ <svg>
+ <use
+ xlinkHref="#icon--download"
+ className="asdcs-icon"
+ />
+ </svg>
+ </button>
+ <button className="asdcs-button-upload" data-title="Upload">
+ <svg>
+ <use
+ xlinkHref="#icon--upload"
+ className="asdcs-icon"
+ />
+ </svg>
+ </button>
+ </div>
+ <div className="asdcs-editor-toolbar-toggle">
+ <button className="asdcs-button-design asdcs-button-mode asdcs-button-toggle-left">
+ Design
+ </button>
+ <button className="asdcs-button-json asdcs-button-mode asdcs-button-toggle-center">
+ JSON
+ </button>
+ <button className="asdcs-button-yaml asdcs-button-mode asdcs-button-toggle-right">
+ YAML
+ </button>
+ </div>
+ </div>
+ );
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
* Initialize eventhandlers.
* @private
*
@@ -172,9 +192,9 @@ export default class Toolbar extends React.Component {
}
*/
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
+ /**
* Demo action.
*
_doDemoOpen() {
@@ -189,9 +209,9 @@ export default class Toolbar extends React.Component {
}
*/
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
+ /**
* Demo action.
*
_doDemoNew() {
@@ -204,9 +224,9 @@ export default class Toolbar extends React.Component {
}
*/
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
+ /**
* Demo action.
*
_doDemoSave() {
@@ -217,9 +237,9 @@ export default class Toolbar extends React.Component {
}
*/
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
+ /**
* Demo action.
*
_doDemoUpload() {
@@ -241,9 +261,9 @@ export default class Toolbar extends React.Component {
}
*/
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
+ /**
* Demo action.
*
_doDemoDownload() {
@@ -256,9 +276,9 @@ export default class Toolbar extends React.Component {
}
*/
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
+ /**
* Demo action.
*
_doDemoValidate() {
@@ -270,6 +290,6 @@ export default class Toolbar extends React.Component {
}
Toolbar.propTypes = {
- application: PropTypes.object.isRequired,
- editor: PropTypes.object.isRequired,
+ application: PropTypes.object.isRequired,
+ editor: PropTypes.object.isRequired
};
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/export/Export.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/export/Export.jsx
index 529ae92ded..a6cb4abb49 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/export/Export.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/export/Export.jsx
@@ -17,15 +17,18 @@
import React from 'react';
const Export = function Export() {
- return (
- <form className="asdcs-export" action="/ossui-svg/services/ossui/svg/export" method="post">
- <input name="svg" type="hidden" value="" />
- <input name="css" type="hidden" value="sdc/sequencer/default" />
- <input name="type" type="hidden" value="PDF" />
- <input name="height" type="hidden" value="1920" />
- <input name="width" type="hidden" value="1080" />
- </form>
- );
+ return (
+ <form
+ className="asdcs-export"
+ action="/ossui-svg/services/ossui/svg/export"
+ method="post">
+ <input name="svg" type="hidden" value="" />
+ <input name="css" type="hidden" value="sdc/sequencer/default" />
+ <input name="type" type="hidden" value="PDF" />
+ <input name="height" type="hidden" value="1920" />
+ <input name="width" type="hidden" value="1080" />
+ </form>
+ );
};
export default Export;
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx
index 6ed2d451d9..51849676e4 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx
@@ -24,18 +24,17 @@ import PropTypes from 'prop-types';
* @constructor
*/
const Icon = function Icon({ glyph, className }) {
- return (
- <svg viewBox="0 0 1000 1000" className={className} >
- <use xlinkHref={glyph} className="asdcs-icon" />
- </svg>
- );
+ return (
+ <svg viewBox="0 0 1000 1000" className={className}>
+ <use xlinkHref={glyph} className="asdcs-icon" />
+ </svg>
+ );
};
/** Declare properties. */
Icon.propTypes = {
- className: PropTypes.string,
- glyph: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ glyph: PropTypes.string.isRequired
};
export default Icon;
-
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/overlay/Overlay.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/overlay/Overlay.jsx
index 817f4f1697..7d03b468aa 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/overlay/Overlay.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/overlay/Overlay.jsx
@@ -20,42 +20,35 @@ import React from 'react';
* Overlay view.
*/
export default class Overlay extends React.Component {
+ /**
+ * Construct view.
+ * @param props element properties.
+ * @param context react context.
+ */
+ constructor(props, context) {
+ super(props, context);
+ this.state = {
+ visible: false
+ };
+ this.setVisible = this.setVisible.bind(this);
+ }
- /**
- * Construct view.
- * @param props element properties.
- * @param context react context.
- */
- constructor(props, context) {
- super(props, context);
- this.state = {
- visible: false,
- };
- this.setVisible = this.setVisible.bind(this);
- }
+ /**
+ * Set visibility.
+ * @param visible true if visible.
+ */
+ setVisible(visible) {
+ this.setState({
+ visible
+ });
+ }
- /**
- * Set visibility.
- * @param visible true if visible.
- */
- setVisible(visible) {
- this.setState({
- visible,
- });
- }
-
- /**
- * Render view.
- * @returns {XML}
- */
- render() {
- const display = this.state.visible ? 'block' : 'none';
- return (
- <div
- className="asdcs-overlay"
- style={{ display }}
- >
- </div>
- );
- }
+ /**
+ * Render view.
+ * @returns {XML}
+ */
+ render() {
+ const display = this.state.visible ? 'block' : 'none';
+ return <div className="asdcs-overlay" style={{ display }} />;
+ }
}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodel.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodel.js
index 82e8ada588..140b7ef547 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodel.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodel.js
@@ -22,73 +22,71 @@ import Common from '../common/Common';
* Rules governing what a definition can contain.
*/
export default class Metamodel {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct from JSON definition.
+ * @param json schema definition.
+ */
+ constructor(json) {
+ Common.assertType(json, 'Object');
+ const dfault = require('./templates/default.metamodel.json');
+ this.json = _merge({}, dfault, json);
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct from JSON definition.
- * @param json schema definition.
- */
- constructor(json) {
- Common.assertType(json, 'Object');
- const dfault = require('./templates/default.metamodel.json');
- this.json = _merge({}, dfault, json);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get schema identifier.
- * @returns ID.
- */
- getId() {
- return this.json.diagram.metadata.id;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Get lifeline constraints.
- * @returns {*}
- */
- getConstraints() {
- return this.json.diagram.lifelines.constraints;
- }
+ /**
+ * Get schema identifier.
+ * @returns ID.
+ */
+ getId() {
+ return this.json.diagram.metadata.id;
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Get lifeline metadata by lifeline ID.
- * @param id sought lifeline.
- * @returns lifeline if found.
- */
- getLifelineById(id) {
- for (const lifeline of this.json.diagram.lifelines.lifelines) {
- if (lifeline.id === id) {
- return lifeline;
- }
+ /**
+ * Get lifeline constraints.
+ * @returns {*}
+ */
+ getConstraints() {
+ return this.json.diagram.lifelines.constraints;
}
- return undefined;
- }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get lifeline metadata by lifeline ID.
+ * @param id sought lifeline.
+ * @returns lifeline if found.
+ */
+ getLifelineById(id) {
+ for (const lifeline of this.json.diagram.lifelines.lifelines) {
+ if (lifeline.id === id) {
+ return lifeline;
+ }
+ }
+ return undefined;
+ }
- /**
- * Get original JSON.
- * @returns JSON.
- */
- unwrap() {
- return this.json;
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Get original JSON.
+ * @returns JSON.
+ */
+ unwrap() {
+ return this.json;
+ }
- /**
- * Get default schema.
- * @returns Metamodel default (permissive) Metamodel.
- */
- static getDefault() {
- return new Metamodel({});
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Get default schema.
+ * @returns Metamodel default (permissive) Metamodel.
+ */
+ static getDefault() {
+ return new Metamodel({});
+ }
}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodels.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodels.js
index 4ecfc0b5f7..40756a8e09 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodels.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Metamodels.js
@@ -21,67 +21,64 @@ import Metamodel from './Metamodel';
* A simple lookup for schemas by ID.
*/
export default class Metamodels {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Construct metamodels from provided JSON definitions.
+ * @param metamodels JSON metamodel definitions.
+ */
+ constructor(metamodels) {
+ Common.assertType(metamodels, 'Array');
- /**
- * Construct metamodels from provided JSON definitions.
- * @param metamodels JSON metamodel definitions.
- */
- constructor(metamodels) {
+ this.lookup = {};
- Common.assertType(metamodels, 'Array');
+ // Save each metamodel. It's up to the Metamodel class to make sense of
+ // potentially nonsense metamodel definitions.
- this.lookup = {};
+ for (const json of metamodels) {
+ const metamodel = new Metamodel(json);
+ this.lookup[metamodel.getId()] = metamodel;
+ }
- // Save each metamodel. It's up to the Metamodel class to make sense of
- // potentially nonsense metamodel definitions.
+ // Set (or override) the default metamodel with the inlined one.
- for (const json of metamodels) {
- const metamodel = new Metamodel(json);
- this.lookup[metamodel.getId()] = metamodel;
+ this.lookup.$ = Metamodel.getDefault();
+ Common.assertInstanceOf(this.lookup.$, Metamodel);
}
- // Set (or override) the default metamodel with the inlined one.
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- this.lookup.$ = Metamodel.getDefault();
- Common.assertInstanceOf(this.lookup.$, Metamodel);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get Metamodel by its @id.
- * @param id identifier.
- * @returns Metamodel, or undefined if no matching metamodel found.
- */
- getMetamodel(id) {
- return this.lookup[id];
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get the default (permissive) metamodel.
- * @returns default Metamodel.
- */
- getDefault() {
- return this.lookup.$;
- }
+ /**
+ * Get Metamodel by its @id.
+ * @param id identifier.
+ * @returns Metamodel, or undefined if no matching metamodel found.
+ */
+ getMetamodel(id) {
+ return this.lookup[id];
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- /**
- * Get metamodel by its @id, falling back to the default.
- * @param id identifier.
- * @returns matching metamodel, or default.
- */
- getMetamodelOrDefault(id) {
- const metamodel = this.getMetamodel(id);
- if (metamodel) {
- return metamodel;
+ /**
+ * Get the default (permissive) metamodel.
+ * @returns default Metamodel.
+ */
+ getDefault() {
+ return this.lookup.$;
}
- return this.getDefault();
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get metamodel by its @id, falling back to the default.
+ * @param id identifier.
+ * @returns matching metamodel, or default.
+ */
+ getMetamodelOrDefault(id) {
+ const metamodel = this.getMetamodel(id);
+ if (metamodel) {
+ return metamodel;
+ }
+ return this.getDefault();
+ }
}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Model.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Model.js
index 1e68cd6034..3145506268 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Model.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/Model.js
@@ -24,489 +24,481 @@ import Metamodel from './Metamodel';
* A wrapper for a model instance.
*/
export default class Model {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct model from model JSON. JSON is assumed to be in more or less
+ * the correct structure, but it's OK if it's missing IDs.
+ *
+ * @param json initial JSON; will be updated in situ.
+ * @param metamodel Metaobject definition.
+ */
+ constructor(json, metamodel) {
+ if (metamodel) {
+ Common.assertInstanceOf(metamodel, Metamodel);
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ this.metamodel = metamodel || Metamodel.getDefault();
+ Common.assertInstanceOf(this.metamodel, Metamodel);
- /**
- * Construct model from model JSON. JSON is assumed to be in more or less
- * the correct structure, but it's OK if it's missing IDs.
- *
- * @param json initial JSON; will be updated in situ.
- * @param metamodel Metaobject definition.
- */
- constructor(json, metamodel) {
+ this.jsonschema = require('./schema/asdc_sequencer_schema.json');
+ this.templates = {
+ defaultModel: require('./templates/default.model.json'),
+ defaultMetamodel: require('./templates/default.metamodel.json')
+ };
- if (metamodel) {
- Common.assertInstanceOf(metamodel, Metamodel);
- }
+ this.model = this._preprocess(Common.assertType(json, 'Object'));
+ Common.assertPlainObject(this.model);
- this.metamodel = metamodel || Metamodel.getDefault();
- Common.assertInstanceOf(this.metamodel, Metamodel);
-
- this.jsonschema = require('./schema/asdc_sequencer_schema.json');
- this.templates = {
- defaultModel: require('./templates/default.model.json'),
- defaultMetamodel: require('./templates/default.metamodel.json'),
- };
-
- this.model = this._preprocess(Common.assertType(json, 'Object'));
- Common.assertPlainObject(this.model);
-
- this.renumber();
-
- this.addLifeline = this.addLifeline.bind(this);
- this.addMessage = this.addMessage.bind(this);
- this.renumber = this.renumber.bind(this);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Unwrap to get model object.
- * @returns {*}
- */
- unwrap() {
- return Common.assertPlainObject(this.model);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get the metamodel which defines valid states for this model.
- * @returns Metamodel definition.
- */
- getMetamodel() {
- return Common.assertInstanceOf(this.metamodel, Metamodel);
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Find lifeline by its ID.
- * @param id lifeline ID.
- * @returns lifeline object, if found.
- */
- getLifelineById(id) {
- for (const lifeline of this.model.diagram.lifelines) {
- if (lifeline.id === id) {
- return lifeline;
- }
- }
- return undefined;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get message by ID.
- * @param id message ID.
- * @returns message if matched.
- */
- getMessageById(id) {
- Common.assertNotNull(id);
- const step = this.getStepByMessageId(id);
- if (step) {
- return step.message;
+ this.renumber();
+
+ this.addLifeline = this.addLifeline.bind(this);
+ this.addMessage = this.addMessage.bind(this);
+ this.renumber = this.renumber.bind(this);
}
- return undefined;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get step by message ID.
- * @param id step ID.
- * @returns step if matched.
- */
- getStepByMessageId(id) {
- Common.assertNotNull(id);
- for (const step of this.model.diagram.steps) {
- if (step.message && step.message.id === id) {
- return step;
- }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Unwrap to get model object.
+ * @returns {*}
+ */
+ unwrap() {
+ return Common.assertPlainObject(this.model);
}
- return undefined;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Add message to steps.
- * @returns {{}}
- */
- addMessage(index) {
- const d = this.model.diagram;
- const step = {};
- step.message = {};
- step.message.id = Model._guid();
- step.message.name = '[Unnamed Message]';
- step.message.type = 'request';
- step.message.from = d.lifelines.length > 0 ? d.lifelines[0].id : -1;
- step.message.to = d.lifelines.length > 1 ? d.lifelines[1].id : -1;
- if (index >= 0) {
- d.steps.splice(index, 0, step);
- } else {
- d.steps.push(step);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get the metamodel which defines valid states for this model.
+ * @returns Metamodel definition.
+ */
+ getMetamodel() {
+ return Common.assertInstanceOf(this.metamodel, Metamodel);
}
- this.renumber();
- return step;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Delete message with ID.
- * @param id to be deleted.
- */
- deleteMessageById(id) {
- Common.assertNotNull(id);
- const step = this.getStepByMessageId(id);
- if (step) {
- const index = this.model.diagram.steps.indexOf(step);
- if (index !== -1) {
- this.model.diagram.steps.splice(index, 1);
- }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Find lifeline by its ID.
+ * @param id lifeline ID.
+ * @returns lifeline object, if found.
+ */
+ getLifelineById(id) {
+ for (const lifeline of this.model.diagram.lifelines) {
+ if (lifeline.id === id) {
+ return lifeline;
+ }
+ }
+ return undefined;
}
- this.renumber();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Add lifeline to lifelines.
- * @param index optional index.
- * @returns {{}}
- */
- addLifeline(index) {
- const lifeline = {};
- lifeline.id = Model._guid();
- lifeline.name = '[Unnamed Lifeline]';
- if (index >= 0) {
- this.model.diagram.lifelines.splice(index, 0, lifeline);
- } else {
- this.model.diagram.lifelines.push(lifeline);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get message by ID.
+ * @param id message ID.
+ * @returns message if matched.
+ */
+ getMessageById(id) {
+ Common.assertNotNull(id);
+ const step = this.getStepByMessageId(id);
+ if (step) {
+ return step.message;
+ }
+ return undefined;
}
- this.renumber();
- return lifeline;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Delete lifeline with ID.
- * @param id to be deleted.
- */
- deleteLifelineById(id) {
- Common.assertNotNull(id);
- this.deleteStepsByLifelineId(id);
- const lifeline = this.getLifelineById(id);
- if (lifeline) {
- const index = this.model.diagram.lifelines.indexOf(lifeline);
- if (index !== -1) {
- this.model.diagram.lifelines.splice(index, 1);
- }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get step by message ID.
+ * @param id step ID.
+ * @returns step if matched.
+ */
+ getStepByMessageId(id) {
+ Common.assertNotNull(id);
+ for (const step of this.model.diagram.steps) {
+ if (step.message && step.message.id === id) {
+ return step;
+ }
+ }
+ return undefined;
}
- this.renumber();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Delete all steps corresponding to lifeline.
- * @param id lifeline ID.
- */
- deleteStepsByLifelineId(id) {
- Common.assertNotNull(id);
- const steps = this.getStepsByLifelineId(id);
- for (const step of steps) {
- this.deleteMessageById(step.message.id);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Add message to steps.
+ * @returns {{}}
+ */
+ addMessage(index) {
+ const d = this.model.diagram;
+ const step = {};
+ step.message = {};
+ step.message.id = Model._guid();
+ step.message.name = '[Unnamed Message]';
+ step.message.type = 'request';
+ step.message.from = d.lifelines.length > 0 ? d.lifelines[0].id : -1;
+ step.message.to = d.lifelines.length > 1 ? d.lifelines[1].id : -1;
+ if (index >= 0) {
+ d.steps.splice(index, 0, step);
+ } else {
+ d.steps.push(step);
+ }
+ this.renumber();
+ return step;
}
- this.renumber();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get all steps corresponding to lifeline.
- * @param id lifeline ID.
- * @return steps from/to lifeline.
- */
- getStepsByLifelineId(id) {
- Common.assertNotNull(id);
- const steps = [];
- for (const step of this.model.diagram.steps) {
- if (step.message) {
- if (step.message.from === id || step.message.to === id) {
- steps.push(step);
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Delete message with ID.
+ * @param id to be deleted.
+ */
+ deleteMessageById(id) {
+ Common.assertNotNull(id);
+ const step = this.getStepByMessageId(id);
+ if (step) {
+ const index = this.model.diagram.steps.indexOf(step);
+ if (index !== -1) {
+ this.model.diagram.steps.splice(index, 1);
+ }
}
- }
+ this.renumber();
}
- return steps;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Validate model. Disabled, because we removed the jsonschema dependency.
- * @returns {Array} of validation errors, if any.
- */
- validate() {
- const errors = [];
- return errors;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Reorder messages.
- * @param index message index.
- * @param afterIndex new (after) index.
- */
- reorderMessages(index, afterIndex) {
- Common.assertType(index, 'Number');
- Common.assertType(afterIndex, 'Number');
- const steps = this.model.diagram.steps;
- const element = steps[index];
- steps.splice(index, 1);
- steps.splice(afterIndex, 0, element);
- this.renumber();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Reorder lifelines.
- * @param index lifeline index.
- * @param afterIndex new (after) index.
- */
- reorderLifelines(index, afterIndex) {
- Common.assertType(index, 'Number');
- Common.assertType(afterIndex, 'Number');
- const lifelines = this.model.diagram.lifelines;
- const element = lifelines[index];
- lifelines.splice(index, 1);
- lifelines.splice(afterIndex, 0, element);
- this.renumber();
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Renumber lifelines and messages.
- */
- renumber() {
- const modelJSON = this.unwrap();
- let stepIndex = 1;
- let lifelineIndex = 1;
- for (const step of modelJSON.diagram.steps) {
- if (step.message) {
- step.message.index = stepIndex++;
- }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Add lifeline to lifelines.
+ * @param index optional index.
+ * @returns {{}}
+ */
+ addLifeline(index) {
+ const lifeline = {};
+ lifeline.id = Model._guid();
+ lifeline.name = '[Unnamed Lifeline]';
+ if (index >= 0) {
+ this.model.diagram.lifelines.splice(index, 0, lifeline);
+ } else {
+ this.model.diagram.lifelines.push(lifeline);
+ }
+ this.renumber();
+ return lifeline;
}
- for (const lifeline of modelJSON.diagram.lifelines) {
- lifeline.index = lifelineIndex++;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Delete lifeline with ID.
+ * @param id to be deleted.
+ */
+ deleteLifelineById(id) {
+ Common.assertNotNull(id);
+ this.deleteStepsByLifelineId(id);
+ const lifeline = this.getLifelineById(id);
+ if (lifeline) {
+ const index = this.model.diagram.lifelines.indexOf(lifeline);
+ if (index !== -1) {
+ this.model.diagram.lifelines.splice(index, 1);
+ }
+ }
+ this.renumber();
}
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Build a simple, navigable dataset describing fragments.
- * @returns {{}}, indexed by (stop) message ID, describing fragments.
- */
- analyzeFragments() {
-
- const fData = {};
-
- let depth = 0;
- const modelJSON = this.unwrap();
- const open = [];
-
- const getData = function g(stop, fragment) {
- let data = fData[stop];
- if (!data) {
- data = { stop, start: [], fragment };
- fData[stop] = data;
- }
- return data;
- };
-
- const fragmentsByStart = {};
- for (const step of modelJSON.diagram.steps) {
- if (step.message && step.message.fragment) {
- const message = step.message;
- const fragment = message.fragment;
- if (fragment.start) {
- fragmentsByStart[fragment.start] = fragment;
- open.push(message.id);
- depth++;
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Delete all steps corresponding to lifeline.
+ * @param id lifeline ID.
+ */
+ deleteStepsByLifelineId(id) {
+ Common.assertNotNull(id);
+ const steps = this.getStepsByLifelineId(id);
+ for (const step of steps) {
+ this.deleteMessageById(step.message.id);
}
- if (fragment.stop) {
- if (open.length > 0) {
- getData(message.id).start.push(open.pop());
- }
- depth = Math.max(depth - 1, 0);
+ this.renumber();
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get all steps corresponding to lifeline.
+ * @param id lifeline ID.
+ * @return steps from/to lifeline.
+ */
+ getStepsByLifelineId(id) {
+ Common.assertNotNull(id);
+ const steps = [];
+ for (const step of this.model.diagram.steps) {
+ if (step.message) {
+ if (step.message.from === id || step.message.to === id) {
+ steps.push(step);
+ }
+ }
}
- }
+ return steps;
}
- if (open.length > 0) {
- for (const o of open) {
- getData(o, fragmentsByStart[o]).start.push(o);
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Validate model. Disabled, because we removed the jsonschema dependency.
+ * @returns {Array} of validation errors, if any.
+ */
+ validate() {
+ const errors = [];
+ return errors;
}
- return fData;
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Reorder messages.
+ * @param index message index.
+ * @param afterIndex new (after) index.
+ */
+ reorderMessages(index, afterIndex) {
+ Common.assertType(index, 'Number');
+ Common.assertType(afterIndex, 'Number');
+ const steps = this.model.diagram.steps;
+ const element = steps[index];
+ steps.splice(index, 1);
+ steps.splice(afterIndex, 0, element);
+ this.renumber();
+ }
- // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Reorder lifelines.
+ * @param index lifeline index.
+ * @param afterIndex new (after) index.
+ */
+ reorderLifelines(index, afterIndex) {
+ Common.assertType(index, 'Number');
+ Common.assertType(afterIndex, 'Number');
+ const lifelines = this.model.diagram.lifelines;
+ const element = lifelines[index];
+ lifelines.splice(index, 1);
+ lifelines.splice(afterIndex, 0, element);
+ this.renumber();
+ }
- /**
- * Build a simple, navigable dataset describing occurrences.
- * @returns a map, indexed by lifeline ID, of objects containing {start:[],stop:[],active[]}.
- * @private
- */
- analyzeOccurrences() {
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Renumber lifelines and messages.
+ */
+ renumber() {
+ const modelJSON = this.unwrap();
+ let stepIndex = 1;
+ let lifelineIndex = 1;
+ for (const step of modelJSON.diagram.steps) {
+ if (step.message) {
+ step.message.index = stepIndex++;
+ }
+ }
+ for (const lifeline of modelJSON.diagram.lifelines) {
+ lifeline.index = lifelineIndex++;
+ }
+ }
- const oData = {};
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- // A few inline functions. They make this method kinda lengthy, but they
- // reduce clutter in the class and keep it coherent, so it's OK.
+ /**
+ * Build a simple, navigable dataset describing fragments.
+ * @returns {{}}, indexed by (stop) message ID, describing fragments.
+ */
+ analyzeFragments() {
+ const fData = {};
- const getDataByLifelineId = function get(lifelineId) {
- if (!oData[lifelineId]) {
- oData[lifelineId] = { active: [], start: {}, stop: {} };
- }
- return oData[lifelineId];
- };
+ let depth = 0;
+ const modelJSON = this.unwrap();
+ const open = [];
- const contains = function contains(array, value) {
- return (array && (array.indexOf(value) !== -1));
- };
+ const getData = function g(stop, fragment) {
+ let data = fData[stop];
+ if (!data) {
+ data = { stop, start: [], fragment };
+ fData[stop] = data;
+ }
+ return data;
+ };
+
+ const fragmentsByStart = {};
+ for (const step of modelJSON.diagram.steps) {
+ if (step.message && step.message.fragment) {
+ const message = step.message;
+ const fragment = message.fragment;
+ if (fragment.start) {
+ fragmentsByStart[fragment.start] = fragment;
+ open.push(message.id);
+ depth++;
+ }
+ if (fragment.stop) {
+ if (open.length > 0) {
+ getData(message.id).start.push(open.pop());
+ }
+ depth = Math.max(depth - 1, 0);
+ }
+ }
+ }
- const process = function process(message, lifelineId) {
- const oRule = message.occurrences;
- if (oRule) {
+ if (open.length > 0) {
+ for (const o of open) {
+ getData(o, fragmentsByStart[o]).start.push(o);
+ }
+ }
- const oDataLifeline = getDataByLifelineId(lifelineId);
- if (oDataLifeline) {
+ return fData;
+ }
- // Record all starts.
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
- if (contains(oRule.start, lifelineId)) {
- oDataLifeline.active.push(message.id);
- oDataLifeline.start[message.id] = undefined;
- }
+ /**
+ * Build a simple, navigable dataset describing occurrences.
+ * @returns a map, indexed by lifeline ID, of objects containing {start:[],stop:[],active[]}.
+ * @private
+ */
+ analyzeOccurrences() {
+ const oData = {};
- // Reconcile with stops.
+ // A few inline functions. They make this method kinda lengthy, but they
+ // reduce clutter in the class and keep it coherent, so it's OK.
- if (contains(oRule.stop, lifelineId)) {
- const startMessageId = oDataLifeline.active.pop();
- oDataLifeline.stop[message.id] = startMessageId;
- if (startMessageId) {
- oDataLifeline.start[startMessageId] = message.id;
+ const getDataByLifelineId = function get(lifelineId) {
+ if (!oData[lifelineId]) {
+ oData[lifelineId] = { active: [], start: {}, stop: {} };
+ }
+ return oData[lifelineId];
+ };
+
+ const contains = function contains(array, value) {
+ return array && array.indexOf(value) !== -1;
+ };
+
+ const process = function process(message, lifelineId) {
+ const oRule = message.occurrences;
+ if (oRule) {
+ const oDataLifeline = getDataByLifelineId(lifelineId);
+ if (oDataLifeline) {
+ // Record all starts.
+
+ if (contains(oRule.start, lifelineId)) {
+ oDataLifeline.active.push(message.id);
+ oDataLifeline.start[message.id] = undefined;
+ }
+
+ // Reconcile with stops.
+
+ if (contains(oRule.stop, lifelineId)) {
+ const startMessageId = oDataLifeline.active.pop();
+ oDataLifeline.stop[message.id] = startMessageId;
+ if (startMessageId) {
+ oDataLifeline.start[startMessageId] = message.id;
+ }
+ }
+ }
+ }
+ };
+
+ // Analyze start and end.
+
+ const modelJSON = this.unwrap();
+ for (const step of modelJSON.diagram.steps) {
+ if (step.message) {
+ const message = step.message;
+ if (message.occurrences) {
+ process(message, message.from);
+ process(message, message.to);
+ }
}
- }
}
- }
- };
-
- // Analyze start and end.
-
- const modelJSON = this.unwrap();
- for (const step of modelJSON.diagram.steps) {
- if (step.message) {
- const message = step.message;
- if (message.occurrences) {
- process(message, message.from);
- process(message, message.to);
+
+ // Reset active. (We used it, but it's not actually for us; it's for keeping
+ // track of active occurrences when rendering the diagram.)
+
+ for (const lifelineId of Object.keys(oData)) {
+ oData[lifelineId].active = [];
}
- }
- }
- // Reset active. (We used it, but it's not actually for us; it's for keeping
- // track of active occurrences when rendering the diagram.)
+ // Reconcile the start and end (message ID) maps for each lifeline,
+ // finding a "stop" for every start. Default to starting and stopping
+ // on the same message, which is the same as no occurrence.
+
+ for (const lifelineId of Object.keys(oData)) {
+ const lifelineData = oData[lifelineId];
+ for (const startId of Object.keys(lifelineData.start)) {
+ const stopId = lifelineData.start[startId];
+ if (!stopId) {
+ lifelineData.start[startId] = startId;
+ lifelineData.stop[startId] = startId;
+ }
+ }
+ }
- for (const lifelineId of Object.keys(oData)) {
- oData[lifelineId].active = [];
+ return oData;
}
- // Reconcile the start and end (message ID) maps for each lifeline,
- // finding a "stop" for every start. Default to starting and stopping
- // on the same message, which is the same as no occurrence.
-
- for (const lifelineId of Object.keys(oData)) {
- const lifelineData = oData[lifelineId];
- for (const startId of Object.keys(lifelineData.start)) {
- const stopId = lifelineData.start[startId];
- if (!stopId) {
- lifelineData.start[startId] = startId;
- lifelineData.stop[startId] = startId;
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Preprocess model, adding IDs and whatnot.
+ * @param original to be preprocessed.
+ * @returns preprocessed JSON.
+ * @private
+ */
+ _preprocess(original) {
+ const json = _merge({}, this.templates.defaultModel, original);
+ const metamodel = this.metamodel.unwrap();
+ if (!json.diagram.metadata.ref) {
+ if (metamodel.diagram.metadata.id) {
+ json.diagram.metadata.ref = metamodel.diagram.metadata.id;
+ } else {
+ json.diagram.metadata.ref = '$';
+ }
}
- }
- }
- return oData;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Preprocess model, adding IDs and whatnot.
- * @param original to be preprocessed.
- * @returns preprocessed JSON.
- * @private
- */
- _preprocess(original) {
-
- const json = _merge({}, this.templates.defaultModel, original);
- const metamodel = this.metamodel.unwrap();
- if (!json.diagram.metadata.ref) {
- if (metamodel.diagram.metadata.id) {
- json.diagram.metadata.ref = metamodel.diagram.metadata.id;
- } else {
- json.diagram.metadata.ref = '$';
- }
- }
+ for (const lifeline of json.diagram.lifelines) {
+ lifeline.id = lifeline.id || lifeline.name;
+ }
- for (const lifeline of json.diagram.lifelines) {
- lifeline.id = lifeline.id || lifeline.name;
- }
+ for (const step of json.diagram.steps) {
+ if (step.message) {
+ step.message.id = step.message.id || Model._guid();
+ const occurrences = step.message.occurrences;
+ if (occurrences) {
+ occurrences.start = occurrences.start || [];
+ occurrences.stop = occurrences.stop || [];
+ }
+ }
+ }
- for (const step of json.diagram.steps) {
- if (step.message) {
- step.message.id = step.message.id || Model._guid();
- const occurrences = step.message.occurrences;
- if (occurrences) {
- occurrences.start = occurrences.start || [];
- occurrences.stop = occurrences.stop || [];
+ if (!json.diagram.metadata.id || json.diagram.metadata.id === '$') {
+ json.diagram.metadata.id = Model._guid();
}
- }
- }
- if (!json.diagram.metadata.id || json.diagram.metadata.id === '$') {
- json.diagram.metadata.id = Model._guid();
+ return json;
}
- return json;
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Create pseudo-UUID.
- * @returns {string}
- * @private
- */
- static _guid() {
- function s4() {
- return Math.floor((1 + Math.random()) * 0x10000)
- .toString(16)
- .substring(1);
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Create pseudo-UUID.
+ * @returns {string}
+ * @private
+ */
+ static _guid() {
+ function s4() {
+ return Math.floor((1 + Math.random()) * 0x10000)
+ .toString(16)
+ .substring(1);
+ }
+ return `${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}`;
}
- return `${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}-${s4()}`;
- }
-
}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/demo/scenarios/Scenarios.js b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/demo/scenarios/Scenarios.js
index 4130ec7ec3..74707d472c 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/demo/scenarios/Scenarios.js
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/model/demo/scenarios/Scenarios.js
@@ -18,93 +18,96 @@
* Example scenarios, for development, testing and demos.
*/
export default class Scenarios {
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Construct scenarios; read model and metamodel templates.
- */
- constructor() {
- this.templates = {
- model: {
- ecomp: require('./model/ECOMP.json'),
- blank: require('./model/BLANK.json'),
- dimensions: require('./model/DIMENSIONS.json'),
- },
- metamodel: {
- ecomp: require('./metamodel/ECOMP.json'),
- blank: require('./metamodel/BLANK.json'),
- },
- };
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get ECOMP scenario.
- * @return ECOMP scenario JSON.
- */
- getECOMP() {
- return JSON.parse(JSON.stringify(this.templates.model.ecomp));
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get ECOMP scenario metamodel.
- * @return scenario metamodel JSON.
- */
- getECOMPMetamodel() {
- return JSON.parse(JSON.stringify(this.templates.metamodel.ecomp));
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get blank scenario.
- * @return blank scenario JSON.
- */
- getBlank() {
- return JSON.parse(JSON.stringify(this.templates.model.blank));
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get empty scenario metamodel.
- * @return empty metamodel JSON.
- */
- getBlankMetamodel() {
- return JSON.parse(JSON.stringify(this.templates.metamodel.blank));
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get scenario.
- * @return scenario JSON.
- */
- getDimensions() {
- return JSON.parse(JSON.stringify(this.templates.model.dimensions));
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get scenario metamodel.
- * @return metamodel JSON.
- */
- getDimensionsMetamodel() {
- return JSON.parse(JSON.stringify(this.templates.metamodel.blank));
- }
-
- // ///////////////////////////////////////////////////////////////////////////////////////////////
-
- /**
- * Get demo metamodels.
- * @returns {*[]}
- */
- getMetamodels() {
- return [this.getBlankMetamodel(), this.getDimensionsMetamodel(), this.getECOMPMetamodel()];
- }
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Construct scenarios; read model and metamodel templates.
+ */
+ constructor() {
+ this.templates = {
+ model: {
+ ecomp: require('./model/ECOMP.json'),
+ blank: require('./model/BLANK.json'),
+ dimensions: require('./model/DIMENSIONS.json')
+ },
+ metamodel: {
+ ecomp: require('./metamodel/ECOMP.json'),
+ blank: require('./metamodel/BLANK.json')
+ }
+ };
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get ECOMP scenario.
+ * @return ECOMP scenario JSON.
+ */
+ getECOMP() {
+ return JSON.parse(JSON.stringify(this.templates.model.ecomp));
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get ECOMP scenario metamodel.
+ * @return scenario metamodel JSON.
+ */
+ getECOMPMetamodel() {
+ return JSON.parse(JSON.stringify(this.templates.metamodel.ecomp));
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get blank scenario.
+ * @return blank scenario JSON.
+ */
+ getBlank() {
+ return JSON.parse(JSON.stringify(this.templates.model.blank));
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get empty scenario metamodel.
+ * @return empty metamodel JSON.
+ */
+ getBlankMetamodel() {
+ return JSON.parse(JSON.stringify(this.templates.metamodel.blank));
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get scenario.
+ * @return scenario JSON.
+ */
+ getDimensions() {
+ return JSON.parse(JSON.stringify(this.templates.model.dimensions));
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get scenario metamodel.
+ * @return metamodel JSON.
+ */
+ getDimensionsMetamodel() {
+ return JSON.parse(JSON.stringify(this.templates.metamodel.blank));
+ }
+
+ // ///////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Get demo metamodels.
+ * @returns {*[]}
+ */
+ getMetamodels() {
+ return [
+ this.getBlankMetamodel(),
+ this.getDimensionsMetamodel(),
+ this.getECOMPMetamodel()
+ ];
+ }
}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/main.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/main.jsx
index 4b0f7d2388..1c783cb890 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/main.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/main.jsx
@@ -21,15 +21,15 @@ import '../res/ecomp/asdc/sequencer/sequencer-development.scss';
import '../res/thirdparty/react-select/react-select.min.css';
function renderApplication() {
- const shell = document.createElement('div');
- shell.setAttribute('style', 'height:100%;width:100%;margin:0;padding:0');
- document.body.appendChild(shell);
- const options = { demo: true };
- render(<Sequencer options={options} />, shell);
+ const shell = document.createElement('div');
+ shell.setAttribute('style', 'height:100%;width:100%;margin:0;padding:0');
+ document.body.appendChild(shell);
+ const options = { demo: true };
+ render(<Sequencer options={options} />, shell);
}
if (window.addEventListener) {
- window.addEventListener('DOMContentLoaded', renderApplication);
+ window.addEventListener('DOMContentLoaded', renderApplication);
} else {
- window.attachEvent('onload', renderApplication);
+ window.attachEvent('onload', renderApplication);
}