bpmn-js 11.4.1 → 12.0.0

package/lib/BaseViewer.js

@@ -37,7 +37,20 @@ import {
 
 
 /**
- * @typedef { import('didi').ModuleDeclaration } Module
+ * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
+ *
+ * @typedef {import('./BaseViewer').BaseModelerOptions} BaseModelerOptions
+ * @typedef {import('./BaseViewer').ModdleElement} ModdleElement
+ * @typedef {import('./BaseViewer').ImportXMLResult} ImportXMLResult
+ * @typedef {import('./BaseViewer').ImportXMLError} ImportXMLError
+ * @typedef {import('./BaseViewer').ImportDefinitionsResult} ImportDefinitionsResult
+ * @typedef {import('./BaseViewer').ImportDefinitionsError} ImportDefinitionsError
+ * @typedef {import('./BaseViewer').ModdleElement} ModdleElement
+ * @typedef {import('./BaseViewer').ModdleElementsById} ModdleElementsById
+ * @typedef {import('./BaseViewer').OpenResult} OpenResult
+ * @typedef {import('./BaseViewer').OpenError} OpenError
+ * @typedef {import('./BaseViewer').SaveXMLOptions} SaveXMLOptions
+ * @typedef {import('./BaseViewer').SaveXMLResult} SaveXMLResult
  */
 
 /**
@@ -46,20 +59,20 @@ import {
  * Have a look at {@link Viewer}, {@link NavigatedViewer} or {@link Modeler} for
  * bundles that include actual features.
  *
- * @param {Object} [options] configuration options to pass to the viewer
- * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
- * @param {string|number} [options.width] the width of the viewer
- * @param {string|number} [options.height] the height of the viewer
- * @param {Object} [options.moddleExtensions] extension packages to provide
- * @param {Module[]} [options.modules] a list of modules to override the default modules
- * @param {Module[]} [options.additionalModules] a list of modules to use with the default modules
+ * @param {BaseModelerOptions} [options] The options to configure the viewer.
  */
 export default function BaseViewer(options) {
 
+  /**
+   * @type {BaseModelerOptions}
+   */
   options = assign({}, DEFAULT_OPTIONS, options);
 
   this._moddle = this._createModdle(options);
 
+  /**
+   * @type {HTMLElement}
+   */
   this._container = this._createContainer(options);
 
   /* <project-logo> */
@@ -73,22 +86,6 @@ export default function BaseViewer(options) {
 
 inherits(BaseViewer, Diagram);
 
-/**
-* The importXML result.
-*
-* @typedef {Object} ImportXMLResult
-*
-* @property {Array<string>} warnings
-*/
-
-/**
-* The importXML error.
-*
-* @typedef {Error} ImportXMLError
-*
-* @property {Array<string>} warnings
-*/
-
 /**
  * Parse and render a BPMN 2.0 diagram.
  *
@@ -99,7 +96,7 @@ inherits(BaseViewer, Diagram);
  *
  * During import the viewer will fire life-cycle events:
  *
- *   * import.parse.start (about to read model from xml)
+ *   * import.parse.start (about to read model from XML)
  *   * import.parse.complete (model read; may have worked or not)
  *   * import.render.start (graphical import start)
  *   * import.render.complete (graphical import finished)
@@ -107,10 +104,18 @@ inherits(BaseViewer, Diagram);
  *
  * You can use these events to hook into the life-cycle.
  *
- * @param {string} xml the BPMN 2.0 xml
- * @param {ModdleElement<BPMNDiagram>|string} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
+ * @throws {ImportXMLError} An error thrown during the import of the XML.
+ *
+ * @fires BaseViewer#ImportParseStart
+ * @fires BaseViewer#ImportParseComplete
+ * @fires Importer#ImportRenderStart
+ * @fires Importer#ImportRenderComplete
+ * @fires BaseViewer#ImportDone
+ *
+ * @param {string} xml The BPMN 2.0 XML to be imported.
+ * @param {ModdleElement|string} [bpmnDiagram] The optional diagram or Id of the BPMN diagram to open.
  *
- * Returns {Promise<ImportXMLResult, ImportXMLError>}
+ * @return {Promise<ImportXMLResult>} A promise resolving with warnings that were produced during the import.
  */
 BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(xml, bpmnDiagram) {
 
@@ -146,6 +151,14 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
 
     // hook in pre-parse listeners +
     // allow xml manipulation
+
+    /**
+     * A `import.parse.start` event.
+     *
+     * @event BaseViewer#ImportParseStart
+     * @type {Object}
+     * @property {string} xml The XML that is to be parsed.
+     */
     xml = this._emit('import.parse.start', { xml: xml }) || xml;
 
     let parseResult;
@@ -168,6 +181,18 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
 
     // hook in post parse listeners +
     // allow definitions manipulation
+
+    /**
+     * A `import.parse.complete` event.
+     *
+     * @event BaseViewer#ImportParseComplete
+     * @type {Object}
+     * @property {Error|null} error An error thrown when parsing the XML.
+     * @property {ModdleElement} definitions The definitions model element.
+     * @property {ModdleElementsById} elementsById The model elements by ID.
+     * @property {ModdleElement[]} references The referenced model elements.
+     * @property {string[]} warnings The warnings produced when parsing the XML.
+     */
     definitions = this._emit('import.parse.complete', ParseCompleteEvent({
       error: null,
       definitions: definitions,
@@ -180,6 +205,14 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
 
     aggregatedWarnings = aggregatedWarnings.concat(importResult.warnings);
 
+    /**
+     * A `import.parse.complete` event.
+     *
+     * @event BaseViewer#ImportDone
+     * @type {Object}
+     * @property {ImportXMLError|null} error An error thrown during import.
+     * @property {string[]} warnings The warnings.
+     */
     this._emit('import.done', { error: null, warnings: aggregatedWarnings });
 
     return { warnings: aggregatedWarnings };
@@ -196,21 +229,6 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
   }
 });
 
-/**
-* The importDefinitions result.
-*
-* @typedef {Object} ImportDefinitionsResult
-*
-* @property {Array<string>} warnings
-*/
-
-/**
-* The importDefinitions error.
-*
-* @typedef {Error} ImportDefinitionsError
-*
-* @property {Array<string>} warnings
-*/
 
 /**
  * Import parsed definitions and render a BPMN 2.0 diagram.
@@ -227,10 +245,12 @@ BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(x
  *
  * You can use these events to hook into the life-cycle.
  *
- * @param {ModdleElement<Definitions>} definitions parsed BPMN 2.0 definitions
- * @param {ModdleElement<BPMNDiagram>|string} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
+ * @throws {ImportDefinitionsError} An error thrown during the import of the definitions.
  *
- * Returns {Promise<ImportDefinitionsResult, ImportDefinitionsError>}
+ * @param {ModdleElement} definitions The definitions.
+ * @param {ModdleElement|string} [bpmnDiagram] The optional diagram or ID of the BPMN diagram to open.
+ *
+ * @return {Promise<ImportDefinitionsResult>} A promise resolving with warnings that were produced during the import.
  */
 BaseViewer.prototype.importDefinitions = wrapForCompatibility(async function importDefinitions(definitions, bpmnDiagram) {
   this._setDefinitions(definitions);
@@ -239,21 +259,6 @@ BaseViewer.prototype.importDefinitions = wrapForCompatibility(async function imp
   return { warnings: result.warnings };
 });
 
-/**
- * The open result.
- *
- * @typedef {Object} OpenResult
- *
- * @property {Array<string>} warnings
- */
-
-/**
-* The open error.
-*
-* @typedef {Error} OpenError
-*
-* @property {Array<string>} warnings
-*/
 
 /**
  * Open diagram of previously imported XML.
@@ -270,9 +275,11 @@ BaseViewer.prototype.importDefinitions = wrapForCompatibility(async function imp
  *
  * You can use these events to hook into the life-cycle.
  *
- * @param {string|ModdleElement<BPMNDiagram>} [bpmnDiagramOrId] id or the diagram to open
+ * @throws {OpenError} An error thrown during opening.
+ *
+ * @param {ModdleElement|string} bpmnDiagramOrId The diagram or Id of the BPMN diagram to open.
  *
- * Returns {Promise<OpenResult, OpenError>}
+ * @return {Promise<OpenResult>} A promise resolving with warnings that were produced during opening.
  */
 BaseViewer.prototype.open = wrapForCompatibility(async function open(bpmnDiagramOrId) {
 
@@ -313,14 +320,6 @@ BaseViewer.prototype.open = wrapForCompatibility(async function open(bpmnDiagram
   return { warnings };
 });
 
-/**
- * The saveXML result.
- *
- * @typedef {Object} SaveXMLResult
- *
- * @property {string} xml
- */
-
 /**
  * Export the currently displayed BPMN 2.0 diagram as
  * a BPMN 2.0 XML document.
@@ -335,11 +334,14 @@ BaseViewer.prototype.open = wrapForCompatibility(async function open(bpmnDiagram
  *
  * You can use these events to hook into the life-cycle.
  *
- * @param {Object} [options] export options
- * @param {boolean} [options.format=false] output formatted XML
- * @param {boolean} [options.preamble=true] output preamble
+ * @throws {Error} An error thrown during export.
+ *
+ * @fires BaseViewer#SaveXMLStart
+ * @fires BaseViewer#SaveXMLDone
  *
- * Returns {Promise<SaveXMLResult, Error>}
+ * @param {SaveXMLOptions} [options] The options.
+ *
+ * @return {Promise<SaveXMLResult>} A promise resolving with the XML.
  */
 BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(options) {
 
@@ -354,6 +356,14 @@ BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(optio
     }
 
     // allow to fiddle around with definitions
+
+    /**
+     * A `saveXML.start` event.
+     *
+     * @event BaseViewer#SaveXMLStart
+     * @type {Object}
+     * @property {ModdleElement} definitions The definitions model element.
+     */
     definitions = this._emit('saveXML.start', {
       definitions
     }) || definitions;
@@ -370,6 +380,14 @@ BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(optio
 
   const result = error ? { error } : { xml };
 
+  /**
+   * A `saveXML.done` event.
+   *
+   * @event BaseViewer#SaveXMLDone
+   * @type {Object}
+   * @property {Error} [error] An error thrown when saving the XML.
+   * @property {string} [xml] The saved XML.
+   */
   this._emit('saveXML.done', result);
 
   if (error) {
@@ -379,13 +397,6 @@ BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(optio
   return result;
 });
 
-/**
- * The saveSVG result.
- *
- * @typedef {Object} SaveSVGResult
- *
- * @property {string} svg
- */
 
 /**
  * Export the currently displayed BPMN 2.0 diagram as
@@ -400,11 +411,13 @@ BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(optio
  *
  * You can use these events to hook into the life-cycle.
  *
- * @param {Object} [options]
+ * @throws {Error} An error thrown during export.
  *
- * Returns {Promise<SaveSVGResult, Error>}
+ * @fires BaseViewer#SaveSVGDone
+ *
+ * @return {Promise<SaveSVGResult>} A promise resolving with the SVG.
  */
-BaseViewer.prototype.saveSVG = wrapForCompatibility(async function saveSVG(options = {}) {
+BaseViewer.prototype.saveSVG = wrapForCompatibility(async function saveSVG() {
   this._emit('saveSVG.start');
 
   let svg, err;
@@ -433,6 +446,14 @@ BaseViewer.prototype.saveSVG = wrapForCompatibility(async function saveSVG(optio
     err = e;
   }
 
+  /**
+   * A `saveSVG.done` event.
+   *
+   * @event BaseViewer#SaveSVGDone
+   * @type {Object}
+   * @property {Error} [error] An error thrown when saving the SVG.
+   * @property {string} [svg] The saved SVG.
+   */
   this._emit('saveSVG.done', {
     error: err,
     svg: svg
@@ -484,21 +505,17 @@ BaseViewer.prototype._setDefinitions = function(definitions) {
 /**
  * Return modules to instantiate with.
  *
- * @param {any} options the instance got created with
- *
- * @return {Module[]}
+ * @return {ModuleDeclaration[]} The modules.
  */
-BaseViewer.prototype.getModules = function(options) {
+BaseViewer.prototype.getModules = function() {
   return this._modules;
 };
 
 /**
  * Remove all drawn elements from the viewer.
  *
- * After calling this method the viewer can still
- * be reused for opening another diagram.
- *
- * @method BaseViewer#clear
+ * After calling this method the viewer can still be reused for opening another
+ * diagram.
  */
 BaseViewer.prototype.clear = function() {
   if (!this.getDefinitions()) {
@@ -512,8 +529,8 @@ BaseViewer.prototype.clear = function() {
 };
 
 /**
- * Destroy the viewer instance and remove all its
- * remainders from the document tree.
+ * Destroy the viewer instance and remove all its remainders from the document
+ * tree.
  */
 BaseViewer.prototype.destroy = function() {
 
@@ -525,29 +542,34 @@ BaseViewer.prototype.destroy = function() {
 };
 
 /**
- * Register an event listener
+ * Register an event listener.
  *
- * Remove a previously added listener via {@link #off(event, callback)}.
+ * Remove an event listener via {@link BaseViewer#off}.
  *
- * @param {string} event
- * @param {number} [priority]
- * @param {Function} callback
- * @param {Object} [that]
+ * @param {string|string[]} events The event(s) to listen to.
+ * @param {number} [priority] The priority with which to listen.
+ * @param {EventCallback} callback The callback.
+ * @param {*} [that] Value of `this` the callback will be called with.
  */
-BaseViewer.prototype.on = function(event, priority, callback, target) {
-  return this.get('eventBus').on(event, priority, callback, target);
+BaseViewer.prototype.on = function(events, priority, callback, that) {
+  return this.get('eventBus').on(events, priority, callback, that);
 };
 
 /**
- * De-register an event listener
+ * Remove an event listener.
  *
- * @param {string} event
- * @param {Function} callback
+ * @param {string|string[]} events The event(s).
+ * @param {Function} [callback] The callback.
  */
-BaseViewer.prototype.off = function(event, callback) {
-  this.get('eventBus').off(event, callback);
+BaseViewer.prototype.off = function(events, callback) {
+  this.get('eventBus').off(events, callback);
 };
 
+/**
+ * Attach the viewer to an HTML element.
+ *
+ * @param {HTMLElement} parentNode The parent node to attach to.
+ */
 BaseViewer.prototype.attachTo = function(parentNode) {
 
   if (!parentNode) {
@@ -574,10 +596,20 @@ BaseViewer.prototype.attachTo = function(parentNode) {
   this.get('canvas').resized();
 };
 
+/**
+ * Get the definitions model element.
+ *
+ * @returns {ModdleElement} The definitions model element.
+ */
 BaseViewer.prototype.getDefinitions = function() {
   return this._definitions;
 };
 
+/**
+ * Detach the viewer.
+ *
+ * @fires BaseViewer#DetachEvent
+ */
 BaseViewer.prototype.detach = function() {
 
   const container = this._container,
@@ -587,6 +619,12 @@ BaseViewer.prototype.detach = function() {
     return;
   }
 
+  /**
+   * A `detach` event.
+   *
+   * @event BaseViewer#DetachEvent
+   * @type {Object}
+   */
   this._emit('detach', {});
 
   parentNode.removeChild(container);
@@ -624,7 +662,7 @@ BaseViewer.prototype._init = function(container, moddle, options) {
  * @param  {string} type
  * @param  {Object} event
  *
- * @return {Object} event processing result (if any)
+ * @return {Object} The return value after calling all event listeners.
  */
 BaseViewer.prototype._emit = function(type, event) {
   return this.get('eventBus').fire(type, event);

package/lib/Modeler.d.ts

@@ -0,0 +1,15 @@
+import BaseModeler from "./BaseModeler";
+
+import { ImportXMLResult } from "./BaseViewer";
+
+export default class Modeler extends BaseModeler {
+
+  /**
+   * Create a new diagram to start modeling.
+   *
+   * @throws An error thrown during the import of the XML.
+   *
+   * @return A promise resolving with warnings that were produced during the import.
+   */
+  createDiagram(): Promise<ImportXMLResult>;
+}

package/lib/Modeler.js

@@ -20,7 +20,6 @@ import ConnectionPreviewModule from 'diagram-js/lib/features/connection-preview'
 import ContextPadModule from './features/context-pad';
 import CopyPasteModule from './features/copy-paste';
 import CreateModule from 'diagram-js/lib/features/create';
-import CreateAppendAnythingModule from './features/create-append-anything';
 import DistributeElementsModule from './features/distribute-elements';
 import EditorActionsModule from './features/editor-actions';
 import GridSnappingModule from './features/grid-snapping';
@@ -62,7 +61,8 @@ var initialDiagram =
 
 
 /**
- * @typedef { import('didi').ModuleDeclaration } Module
+ * @typedef {import('./BaseViewer').BaseModelerOptions} BaseModelerOptions
+ * @typedef {import('./BaseViewer').ImportXMLResult} ImportXMLResult
  */
 
 /**
@@ -129,13 +129,7 @@ var initialDiagram =
  * var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});
  * ```
  *
- * @param {Object} [options] configuration options to pass to the viewer
- * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
- * @param {string|number} [options.width] the width of the viewer
- * @param {string|number} [options.height] the height of the viewer
- * @param {Object} [options.moddleExtensions] extension packages to provide
- * @param {Module[]} [options.modules] a list of modules to override the default modules
- * @param {Module[]} [options.additionalModules] a list of modules to use with the default modules
+ * @param {BaseModelerOptions} [options] The options to configure the modeler.
  */
 export default function Modeler(options) {
   BaseModeler.call(this, options);
@@ -147,26 +141,12 @@ inherits(Modeler, BaseModeler);
 Modeler.Viewer = Viewer;
 Modeler.NavigatedViewer = NavigatedViewer;
 
-/**
-* The createDiagram result.
-*
-* @typedef {Object} CreateDiagramResult
-*
-* @property {Array<string>} warnings
-*/
-
-/**
-* The createDiagram error.
-*
-* @typedef {Error} CreateDiagramError
-*
-* @property {Array<string>} warnings
-*/
-
 /**
  * Create a new diagram to start modeling.
  *
- * Returns {Promise<CreateDiagramResult, CreateDiagramError>}
+ * @throws {ImportXMLError} An error thrown during the import of the XML.
+ *
+ * @return {Promise<ImportXMLResult>} A promise resolving with warnings that were produced during the import.
  */
 Modeler.prototype.createDiagram = wrapForCompatibility(function createDiagram() {
   return this.importXML(initialDiagram);
@@ -195,7 +175,6 @@ Modeler.prototype._modelingModules = [
   ContextPadModule,
   CopyPasteModule,
   CreateModule,
-  CreateAppendAnythingModule,
   DistributeElementsModule,
   EditorActionsModule,
   GridSnappingModule,

package/lib/NavigatedViewer.d.ts

@@ -0,0 +1,3 @@
+import Viewer from "./Viewer";
+
+export default class NavigatedViewer extends Viewer {}

package/lib/NavigatedViewer.js

@@ -6,11 +6,14 @@ import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
 import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
 import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
 
+/**
+ * @typedef { import('./BaseViewer').BaseViewerOptions } BaseViewerOptions
+ */
 
 /**
- * A viewer that includes mouse navigation facilities
+ * A viewer with mouse and keyboard navigation features.
  *
- * @param {Object} options
+ * @param {BaseViewerOptions} [options]
  */
 export default function NavigatedViewer(options) {
   Viewer.call(this, options);

package/lib/Viewer.d.ts

@@ -0,0 +1,3 @@
+import BaseViewer from "./BaseViewer";
+
+export default class Viewer extends BaseViewer {}

package/lib/Viewer.js

@@ -10,7 +10,7 @@ import BaseViewer from './BaseViewer';
 
 
 /**
- * @typedef { import('didi').ModuleDeclaration } Module
+ * @typedef { import('./BaseViewer').BaseViewerOptions } BaseViewerOptions
  */
 
 /**
@@ -52,13 +52,7 @@ import BaseViewer from './BaseViewer';
  * bpmnViewer.importXML(...);
  * ```
  *
- * @param {Object} [options] configuration options to pass to the viewer
- * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
- * @param {string|number} [options.width] the width of the viewer
- * @param {string|number} [options.height] the height of the viewer
- * @param {Object} [options.moddleExtensions] extension packages to provide
- * @param {Module[]} [options.modules] a list of modules to override the default modules
- * @param {Module[]} [options.additionalModules] a list of modules to use with the default modules
+ * @param {BaseViewerOptions} [options] The options to configure the viewer.
  */
 export default function Viewer(options) {
   BaseViewer.call(this, options);

package/lib/features/align-elements/dist/align-bottom-tool.svg

@@ -0,0 +1 @@
+data:image/svg+xml,data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520viewBox%253D%25220%25200%25201800%25201800%2522%253E%253Cpath%2520d%253D%2522M150%25201650h1500%2522%2520style%253D%2522stroke%253AcurrentColor%253Bstroke-width%253A100%253Bstroke-linecap%253Around%2522%252F%253E%253Crect%2520width%253D%2522600%2522%2520height%253D%25221300%2522%2520x%253D%2522150%2522%2520y%253D%2522350%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253Anone%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%2522%252F%253E%253Crect%2520width%253D%2522600%2522%2520height%253D%2522800%2522%2520x%253D%25221050%2522%2520y%253D%2522850%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253AcurrentColor%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%253Bopacity%253A.5%2522%252F%253E%253C%252Fsvg%253E

package/lib/features/align-elements/dist/align-horizontal-center-tool.svg

@@ -0,0 +1 @@
+data:image/svg+xml,data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520viewBox%253D%25220%25200%25201800%25201800%2522%253E%253Cpath%2520d%253D%2522M900%2520150v1500%2522%2520style%253D%2522stroke%253AcurrentColor%253Bstroke-width%253A100%253Bstroke-linecap%253Around%2522%252F%253E%253Crect%2520width%253D%25221300%2522%2520height%253D%2522600%2522%2520x%253D%2522250%2522%2520y%253D%2522150%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253Anone%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%2522%252F%253E%253Crect%2520width%253D%2522800%2522%2520height%253D%2522600%2522%2520x%253D%2522500%2522%2520y%253D%25221050%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253AcurrentColor%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%253Bopacity%253A.5%2522%252F%253E%253C%252Fsvg%253E

package/lib/features/align-elements/dist/align-left-tool.svg

@@ -0,0 +1 @@
+data:image/svg+xml,data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520viewBox%253D%25220%25200%25201800%25201800%2522%253E%253Cpath%2520d%253D%2522M100%2520150v1500%2522%2520style%253D%2522stroke%253AcurrentColor%253Bstroke-width%253A100%253Bstroke-linecap%253Around%2522%252F%253E%253Crect%2520width%253D%25221300%2522%2520height%253D%2522600%2522%2520x%253D%2522100%2522%2520y%253D%2522150%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253Anone%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%2522%252F%253E%253Crect%2520width%253D%2522800%2522%2520height%253D%2522600%2522%2520x%253D%2522100%2522%2520y%253D%25221050%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253AcurrentColor%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%253Bopacity%253A.5%2522%252F%253E%253C%252Fsvg%253E

package/lib/features/align-elements/dist/align-right-tool.svg

@@ -0,0 +1 @@
+data:image/svg+xml,data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520viewBox%253D%25220%25200%25201800%25201800%2522%253E%253Cpath%2520d%253D%2522M1650%2520150v1500%2522%2520style%253D%2522stroke%253AcurrentColor%253Bstroke-width%253A100%253Bstroke-linecap%253Around%2522%252F%253E%253Crect%2520width%253D%25221300%2522%2520height%253D%2522600%2522%2520x%253D%2522350%2522%2520y%253D%2522150%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253Anone%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%2522%252F%253E%253Crect%2520width%253D%2522800%2522%2520height%253D%2522600%2522%2520x%253D%2522850%2522%2520y%253D%25221050%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253AcurrentColor%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%253Bopacity%253A.5%2522%252F%253E%253C%252Fsvg%253E

package/lib/features/align-elements/dist/align-tool.svg

@@ -0,0 +1 @@
+data:image/svg+xml,data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520viewBox%253D%25220%25200%25202000%25202000%2522%253E%253Cpath%2520d%253D%2522M200%2520150v1700%2522%2520style%253D%2522stroke%253AcurrentColor%253Bstroke-width%253A100%253Bstroke-linecap%253Around%2522%252F%253E%253Crect%2520width%253D%25221300%2522%2520height%253D%2522700%2522%2520x%253D%2522500%2522%2520y%253D%2522150%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253Anone%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%2522%252F%253E%253Crect%2520width%253D%2522700%2522%2520height%253D%2522700%2522%2520x%253D%2522500%2522%2520y%253D%25221150%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253AcurrentColor%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%253Bopacity%253A.5%2522%252F%253E%253C%252Fsvg%253E

package/lib/features/align-elements/dist/align-top-tool.svg

@@ -0,0 +1 @@
+data:image/svg+xml,data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520viewBox%253D%25220%25200%25201800%25201800%2522%253E%253Cpath%2520d%253D%2522M150%2520150h1500%2522%2520style%253D%2522stroke%253AcurrentColor%253Bstroke-width%253A100%253Bstroke-linecap%253Around%2522%252F%253E%253Crect%2520width%253D%2522600%2522%2520height%253D%25221300%2522%2520x%253D%2522150%2522%2520y%253D%2522150%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253Anone%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%2522%252F%253E%253Crect%2520width%253D%2522600%2522%2520height%253D%2522800%2522%2520x%253D%25221050%2522%2520y%253D%2522150%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253AcurrentColor%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%253Bopacity%253A.5%2522%252F%253E%253C%252Fsvg%253E

package/lib/features/align-elements/dist/align-vertical-center-tool.svg

@@ -0,0 +1 @@
+data:image/svg+xml,data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520viewBox%253D%25220%25200%25201800%25201800%2522%253E%253Cpath%2520d%253D%2522M150%2520900h1500%2522%2520style%253D%2522stroke%253AcurrentColor%253Bstroke-width%253A100%253Bstroke-linecap%253Around%2522%252F%253E%253Crect%2520width%253D%2522600%2522%2520height%253D%25221300%2522%2520x%253D%2522150%2522%2520y%253D%2522250%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253Anone%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%2522%252F%253E%253Crect%2520width%253D%2522600%2522%2520height%253D%2522800%2522%2520x%253D%25221050%2522%2520y%253D%2522500%2522%2520rx%253D%25221%2522%2520style%253D%2522fill%253AcurrentColor%253Bstroke%253AcurrentColor%253Bstroke-width%253A100%253Bopacity%253A.5%2522%252F%253E%253C%252Fsvg%253E

package/lib/features/modeling/behavior/RootElementReferenceBehavior.js

@@ -87,8 +87,12 @@ export default function RootElementReferenceBehavior(
   }
 
   // create shape
-  this.executed('shape.create', function(context) {
-    var shape = context.shape;
+  this.executed([
+    'shape.create',
+    'element.updateProperties',
+    'element.updateModdleProperties'
+  ], function(context) {
+    var shape = context.shape || context.element;
 
     if (!canHaveRootElementReference(shape)) {
       return;
@@ -108,7 +112,11 @@ export default function RootElementReferenceBehavior(
     }
   }, true);
 
-  this.reverted('shape.create', function(context) {
+  this.reverted([
+    'shape.create',
+    'element.updateProperties',
+    'element.updateModdleProperties'
+  ], function(context) {
     var addedRootElement = context.addedRootElement;
 
     if (!addedRootElement) {