bpmn-js 10.2.1 → 10.3.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v10.2.1
+ * bpmn-js - bpmn-modeler v10.3.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2022-10-17
+ * Date: 2022-11-11
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -4278,6 +4278,8 @@
 
   var intersect = findPathIntersections;
 
+  var intersectPaths = intersect;
+
   function roundBounds(bounds) {
     return {
       x: Math.round(bounds.x),
@@ -4514,7 +4516,7 @@
 
 
   function getIntersections(a, b) {
-    return intersect(a, b);
+    return intersectPaths(a, b);
   }
 
 
@@ -28699,6 +28701,8 @@
     middle: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M150%20900h1500%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22250%22%20width%3D%22600%22%20height%3D%221300%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%22500%22%20width%3D%22600%22%20height%3D%22800%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E'
   };
 
+  var ICONS$1 = icons$1;
+
   var LOW_PRIORITY$l = 900;
 
   /**
@@ -28742,7 +28746,7 @@
       'align-elements': {
         group: 'align-elements',
         title: self._translate('Align elements'),
-        imageUrl: icons$1['align'],
+        imageUrl: ICONS$1['align'],
         action: {
           click: function(event, elements) {
             var position = self._getMenuPosition(elements);
@@ -28836,7 +28840,7 @@
         group: 'align',
         title: translate('Align elements ' + alignment),
         className: 'bjs-align-elements-menu-entry',
-        imageUrl: icons$1[alignment],
+        imageUrl: ICONS$1[alignment],
         action: function(event, entry) {
           alignElements.trigger(elements, alignment);
           popupMenu.close();
@@ -30898,7 +30902,7 @@
 
   function getPathIntersection(waypoints, reference) {
 
-    var intersections = intersect(circlePath(reference, INTERSECTION_THRESHOLD$1), linePath(waypoints));
+    var intersections = intersectPaths(circlePath(reference, INTERSECTION_THRESHOLD$1), linePath(waypoints));
 
     var a = intersections[0],
         b = intersections[intersections.length - 1],
@@ -34897,7 +34901,7 @@
       }
 
       // attachers (priority = 2)
-      if (isAttacher$1(element)) {
+      if (isAttacher$2(element)) {
         descriptor.priority = 2;
 
         descriptor.host = element.host.id;
@@ -35359,7 +35363,7 @@
 
   // helpers //////////
 
-  function isAttacher$1(element) {
+  function isAttacher$2(element) {
     return !!element.host;
   }
 
@@ -38865,6 +38869,8 @@
     vertical: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linejoin%3Around%22%20d%3D%22M400%201350H150V450h250%22%2F%3E%3Crect%20x%3D%22450%22%20y%3D%22150%22%20width%3D%221200%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22450%22%20y%3D%221050%22%20width%3D%22800%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
   };
 
+  var ICONS = icons;
+
   var LOW_PRIORITY$g = 900;
 
   /**
@@ -38911,7 +38917,7 @@
         group: 'distribute',
         title: translate('Distribute elements horizontally'),
         className: 'bjs-align-elements-menu-entry',
-        imageUrl: icons['horizontal'],
+        imageUrl: ICONS['horizontal'],
         action: function(event, entry) {
           distributeElements.trigger(elements, 'horizontal');
           popupMenu.close();
@@ -38920,7 +38926,7 @@
       'distribute-elements-vertical': {
         group: 'distribute',
         title: translate('Distribute elements vertically'),
-        imageUrl: icons['vertical'],
+        imageUrl: ICONS['vertical'],
         action: function(event, entry) {
           distributeElements.trigger(elements, 'vertical');
           popupMenu.close();
@@ -48486,2407 +48492,2572 @@
     bpmnOrderingProvider: [ 'type', BpmnOrderingProvider ]
   };
 
+  var LOW_PRIORITY$6 = 250;
+
   /**
-   * A service that offers un- and redoable execution of commands.
-   *
-   * The command stack is responsible for executing modeling actions
-   * in a un- and redoable manner. To do this it delegates the actual
-   * command execution to {@link CommandHandler}s.
-   *
-   * Command handlers provide {@link CommandHandler#execute(ctx)} and
-   * {@link CommandHandler#revert(ctx)} methods to un- and redo a command
-   * identified by a command context.
-   *
-   *
-   * ## Life-Cycle events
-   *
-   * In the process the command stack fires a number of life-cycle events
-   * that other components to participate in the command execution.
-   *
-   *    * preExecute
-   *    * preExecuted
-   *    * execute
-   *    * executed
-   *    * postExecute
-   *    * postExecuted
-   *    * revert
-   *    * reverted
-   *
-   * A special event is used for validating, whether a command can be
-   * performed prior to its execution.
-   *
-   *    * canExecute
-   *
-   * Each of the events is fired as `commandStack.{eventName}` and
-   * `commandStack.{commandName}.{eventName}`, respectively. This gives
-   * components fine grained control on where to hook into.
-   *
-   * The event object fired transports `command`, the name of the
-   * command and `context`, the command context.
-   *
-   *
-   * ## Creating Command Handlers
-   *
-   * Command handlers should provide the {@link CommandHandler#execute(ctx)}
-   * and {@link CommandHandler#revert(ctx)} methods to implement
-   * redoing and undoing of a command.
-   *
-   * A command handler _must_ ensure undo is performed properly in order
-   * not to break the undo chain. It must also return the shapes that
-   * got changed during the `execute` and `revert` operations.
-   *
-   * Command handlers may execute other modeling operations (and thus
-   * commands) in their `preExecute` and `postExecute` phases. The command
-   * stack will properly group all commands together into a logical unit
-   * that may be re- and undone atomically.
-   *
-   * Command handlers must not execute other commands from within their
-   * core implementation (`execute`, `revert`).
-   *
-   *
-   * ## Change Tracking
-   *
-   * During the execution of the CommandStack it will keep track of all
-   * elements that have been touched during the command's execution.
-   *
-   * At the end of the CommandStack execution it will notify interested
-   * components via an 'elements.changed' event with all the dirty
-   * elements.
-   *
-   * The event can be picked up by components that are interested in the fact
-   * that elements have been changed. One use case for this is updating
-   * their graphical representation after moving / resizing or deletion.
-   *
-   * @see CommandHandler
+   * The tool manager acts as middle-man between the available tool's and the Palette,
+   * it takes care of making sure that the correct active state is set.
    *
-   * @param {EventBus} eventBus
-   * @param {Injector} injector
+   * @param  {Object}    eventBus
+   * @param  {Object}    dragging
    */
-  function CommandStack(eventBus, injector) {
+  function ToolManager(eventBus, dragging) {
+    this._eventBus = eventBus;
+    this._dragging = dragging;
 
-    /**
-     * A map of all registered command handlers.
-     *
-     * @type {Object}
-     */
-    this._handlerMap = {};
+    this._tools = [];
+    this._active = null;
+  }
 
-    /**
-     * A stack containing all re/undoable actions on the diagram
-     *
-     * @type {Array<Object>}
-     */
-    this._stack = [];
+  ToolManager.$inject = [ 'eventBus', 'dragging' ];
 
-    /**
-     * The current index on the stack
-     *
-     * @type {number}
-     */
-    this._stackIdx = -1;
+  ToolManager.prototype.registerTool = function(name, events) {
+    var tools = this._tools;
 
-    /**
-     * Current active commandStack execution
-     *
-     * @type {Object}
-     * @property {Object[]} actions
-     * @property {Object[]} dirty
-     * @property { 'undo' | 'redo' | 'clear' | 'execute' | null } trigger the cause of the current excecution
-     */
-    this._currentExecution = {
-      actions: [],
-      dirty: [],
-      trigger: null
-    };
+    if (!events) {
+      throw new Error('A tool has to be registered with it\'s "events"');
+    }
 
+    tools.push(name);
 
-    this._injector = injector;
-    this._eventBus = eventBus;
+    this.bindEvents(name, events);
+  };
 
-    this._uid = 1;
+  ToolManager.prototype.isActive = function(tool) {
+    return tool && this._active === tool;
+  };
 
-    eventBus.on([
-      'diagram.destroy',
-      'diagram.clear'
-    ], function() {
-      this.clear(false);
-    }, this);
-  }
+  ToolManager.prototype.length = function(tool) {
+    return this._tools.length;
+  };
 
-  CommandStack.$inject = [ 'eventBus', 'injector' ];
+  ToolManager.prototype.setActive = function(tool) {
+    var eventBus = this._eventBus;
 
+    if (this._active !== tool) {
+      this._active = tool;
 
-  /**
-   * Execute a command
-   *
-   * @param {string} command the command to execute
-   * @param {Object} context the environment to execute the command in
-   */
-  CommandStack.prototype.execute = function(command, context) {
-    if (!command) {
-      throw new Error('command required');
+      eventBus.fire('tool-manager.update', { tool: tool });
     }
+  };
 
-    this._currentExecution.trigger = 'execute';
+  ToolManager.prototype.bindEvents = function(name, events) {
+    var eventBus = this._eventBus,
+        dragging = this._dragging;
 
-    const action = { command: command, context: context };
+    var eventsToRegister = [];
 
-    this._pushAction(action);
-    this._internalExecute(action);
-    this._popAction(action);
-  };
+    eventBus.on(events.tool + '.init', function(event) {
+      var context = event.context;
 
+      // Active tools that want to reactivate themselves must do this explicitly
+      if (!context.reactivate && this.isActive(name)) {
+        this.setActive(null);
 
-  /**
-   * Ask whether a given command can be executed.
-   *
-   * Implementors may hook into the mechanism on two ways:
-   *
-   *   * in event listeners:
-   *
-   *     Users may prevent the execution via an event listener.
-   *     It must prevent the default action for `commandStack.(<command>.)canExecute` events.
-   *
-   *   * in command handlers:
-   *
-   *     If the method {@link CommandHandler#canExecute} is implemented in a handler
-   *     it will be called to figure out whether the execution is allowed.
-   *
-   * @param  {string} command the command to execute
-   * @param  {Object} context the environment to execute the command in
-   *
-   * @return {boolean} true if the command can be executed
-   */
-  CommandStack.prototype.canExecute = function(command, context) {
+        dragging.cancel();
+        return;
+      }
 
-    const action = { command: command, context: context };
+      this.setActive(name);
 
-    const handler = this._getHandler(command);
+    }, this);
 
-    let result = this._fire(command, 'canExecute', action);
+    // Todo[ricardo]: add test cases
+    forEach$1(events, function(event) {
+      eventsToRegister.push(event + '.ended');
+      eventsToRegister.push(event + '.canceled');
+    });
 
-    // handler#canExecute will only be called if no listener
-    // decided on a result already
-    if (result === undefined) {
-      if (!handler) {
-        return false;
+    eventBus.on(eventsToRegister, LOW_PRIORITY$6, function(event) {
+
+      // We defer the de-activation of the tool to the .activate phase,
+      // so we're able to check if we want to toggle off the current
+      // active tool or switch to a new one
+      if (!this._active) {
+        return;
       }
 
-      if (handler.canExecute) {
-        result = handler.canExecute(context);
+      if (isPaletteClick(event)) {
+        return;
       }
-    }
 
-    return result;
+      this.setActive(null);
+    }, this);
+
   };
 
 
+  // helpers ///////////////
+
   /**
-   * Clear the command stack, erasing all undo / redo history
+   * Check if a given event is a palette click event.
+   *
+   * @param {EventBus.Event} event
+   *
+   * @return {boolean}
    */
-  CommandStack.prototype.clear = function(emit) {
-    this._stack.length = 0;
-    this._stackIdx = -1;
+  function isPaletteClick(event) {
+    var target = event.originalEvent && event.originalEvent.target;
 
-    if (emit !== false) {
-      this._fire('changed', { trigger: 'clear' });
-    }
-  };
+    return target && closest(target, '.group[data-group="tools"]');
+  }
 
+  var ToolManagerModule = {
+    __depends__: [
+      DraggingModule
+    ],
+    __init__: [ 'toolManager' ],
+    toolManager: [ 'type', ToolManager ]
+  };
 
   /**
-   * Undo last command(s)
+   * Return direction given axis and delta.
+   *
+   * @param {string} axis
+   * @param {number} delta
+   *
+   * @return {string}
    */
-  CommandStack.prototype.undo = function() {
-    let action = this._getUndoAction(),
-        next;
-
-    if (action) {
-      this._currentExecution.trigger = 'undo';
-
-      this._pushAction(action);
+  function getDirection(axis, delta) {
 
-      while (action) {
-        this._internalUndo(action);
-        next = this._getUndoAction();
+    if (axis === 'x') {
+      if (delta > 0) {
+        return 'e';
+      }
 
-        if (!next || next.id !== action.id) {
-          break;
-        }
+      if (delta < 0) {
+        return 'w';
+      }
+    }
 
-        action = next;
+    if (axis === 'y') {
+      if (delta > 0) {
+        return 's';
       }
 
-      this._popAction();
+      if (delta < 0) {
+        return 'n';
+      }
     }
-  };
 
+    return null;
+  }
 
   /**
-   * Redo last command(s)
+   * Returns connections whose waypoints are to be updated. Waypoints are to be updated if start
+   * or end is to be moved or resized.
+   *
+   * @param {Array<djs.model.Shape} movingShapes
+   * @param {Array<djs.model.Shape} resizingShapes
+   *
+   * @returns {Array<djs.model.Connection>}
    */
-  CommandStack.prototype.redo = function() {
-    let action = this._getRedoAction(),
-        next;
+  function getWaypointsUpdatingConnections(movingShapes, resizingShapes) {
+    var waypointsUpdatingConnections = [];
 
-    if (action) {
-      this._currentExecution.trigger = 'redo';
+    forEach$1(movingShapes.concat(resizingShapes), function(shape) {
+      var incoming = shape.incoming,
+          outgoing = shape.outgoing;
 
-      this._pushAction(action);
+      forEach$1(incoming.concat(outgoing), function(connection) {
+        var source = connection.source,
+            target = connection.target;
 
-      while (action) {
-        this._internalExecute(action, true);
-        next = this._getRedoAction();
+        if (includes$4(movingShapes, source) ||
+          includes$4(movingShapes, target) ||
+          includes$4(resizingShapes, source) ||
+          includes$4(resizingShapes, target)) {
 
-        if (!next || next.id !== action.id) {
-          break;
+          if (!includes$4(waypointsUpdatingConnections, connection)) {
+            waypointsUpdatingConnections.push(connection);
+          }
         }
+      });
+    });
 
-        action = next;
-      }
-
-      this._popAction();
-    }
-  };
+    return waypointsUpdatingConnections;
+  }
 
+  function includes$4(array, item) {
+    return array.indexOf(item) !== -1;
+  }
 
   /**
-   * Register a handler instance with the command stack
+   * Resize bounds.
    *
-   * @param {string} command
-   * @param {CommandHandler} handler
-   */
-  CommandStack.prototype.register = function(command, handler) {
-    this._setHandler(command, handler);
-  };
-
-
-  /**
-   * Register a handler type with the command stack
-   * by instantiating it and injecting its dependencies.
+   * @param {Object} bounds
+   * @param {number} bounds.x
+   * @param {number} bounds.y
+   * @param {number} bounds.width
+   * @param {number} bounds.height
+   * @param {string} direction
+   * @param {Object} delta
+   * @param {number} delta.x
+   * @param {number} delta.y
    *
-   * @param {string} command
-   * @param {Function} a constructor for a {@link CommandHandler}
+   * @return {Object}
    */
-  CommandStack.prototype.registerHandler = function(command, handlerCls) {
+  function resizeBounds(bounds, direction, delta) {
+    var x = bounds.x,
+        y = bounds.y,
+        width = bounds.width,
+        height = bounds.height,
+        dx = delta.x,
+        dy = delta.y;
 
-    if (!command || !handlerCls) {
-      throw new Error('command and handlerCls must be defined');
+    switch (direction) {
+    case 'n':
+      return {
+        x: x,
+        y: y + dy,
+        width: width,
+        height: height - dy
+      };
+    case 's':
+      return {
+        x: x,
+        y: y,
+        width: width,
+        height: height + dy
+      };
+    case 'w':
+      return {
+        x: x + dx,
+        y: y,
+        width: width - dx,
+        height: height
+      };
+    case 'e':
+      return {
+        x: x,
+        y: y,
+        width: width + dx,
+        height: height
+      };
+    default:
+      throw new Error('unknown direction: ' + direction);
     }
+  }
 
-    const handler = this._injector.instantiate(handlerCls);
-    this.register(command, handler);
-  };
-
-  CommandStack.prototype.canUndo = function() {
-    return !!this._getUndoAction();
-  };
+  var abs$1 = Math.abs,
+      round$4 = Math.round;
 
-  CommandStack.prototype.canRedo = function() {
-    return !!this._getRedoAction();
+  var AXIS_TO_DIMENSION = {
+    x: 'width',
+    y: 'height'
   };
 
-  // stack access  //////////////////////
+  var CURSOR_CROSSHAIR = 'crosshair';
 
-  CommandStack.prototype._getRedoAction = function() {
-    return this._stack[this._stackIdx + 1];
+  var DIRECTION_TO_TRBL = {
+    n: 'top',
+    w: 'left',
+    s: 'bottom',
+    e: 'right'
   };
 
+  var HIGH_PRIORITY$5 = 1500;
 
-  CommandStack.prototype._getUndoAction = function() {
-    return this._stack[this._stackIdx];
+  var DIRECTION_TO_OPPOSITE = {
+    n: 's',
+    w: 'e',
+    s: 'n',
+    e: 'w'
   };
 
+  var PADDING = 20;
 
-  // internal functionality //////////////////////
-
-  CommandStack.prototype._internalUndo = function(action) {
-    const command = action.command,
-          context = action.context;
 
-    const handler = this._getHandler(command);
+  /**
+   * Add or remove space by moving and resizing elements.
+   *
+   * @param {Canvas} canvas
+   * @param {Dragging} dragging
+   * @param {EventBus} eventBus
+   * @param {Modeling} modeling
+   * @param {Rules} rules
+   * @param {ToolManager} toolManager
+   * @param {Mouse} mouse
+   */
+  function SpaceTool(
+      canvas, dragging, eventBus,
+      modeling, rules, toolManager,
+      mouse) {
 
-    // guard against illegal nested command stack invocations
-    this._atomicDo(() => {
-      this._fire(command, 'revert', action);
+    this._canvas = canvas;
+    this._dragging = dragging;
+    this._eventBus = eventBus;
+    this._modeling = modeling;
+    this._rules = rules;
+    this._toolManager = toolManager;
+    this._mouse = mouse;
 
-      if (handler.revert) {
-        this._markDirty(handler.revert(context));
-      }
+    var self = this;
 
-      this._revertedAction(action);
+    toolManager.registerTool('space', {
+      tool: 'spaceTool.selection',
+      dragging: 'spaceTool'
+    });
 
-      this._fire(command, 'reverted', action);
+    eventBus.on('spaceTool.selection.end', function(event) {
+      eventBus.once('spaceTool.selection.ended', function() {
+        self.activateMakeSpace(event.originalEvent);
+      });
     });
-  };
 
+    eventBus.on('spaceTool.move', HIGH_PRIORITY$5 , function(event) {
+      var context = event.context,
+          initialized = context.initialized;
 
-  CommandStack.prototype._fire = function(command, qualifier, event) {
-    if (arguments.length < 3) {
-      event = qualifier;
-      qualifier = null;
-    }
+      if (!initialized) {
+        initialized = context.initialized = self.init(event, context);
+      }
 
-    const names = qualifier ? [ command + '.' + qualifier, qualifier ] : [ command ];
-    let result;
+      if (initialized) {
+        ensureConstraints(event);
+      }
+    });
 
-    event = this._eventBus.createEvent(event);
+    eventBus.on('spaceTool.end', function(event) {
+      var context = event.context,
+          axis = context.axis,
+          direction = context.direction,
+          movingShapes = context.movingShapes,
+          resizingShapes = context.resizingShapes,
+          start = context.start;
 
-    for (const name of names) {
-      result = this._eventBus.fire('commandStack.' + name, event);
+      if (!context.initialized) {
+        return;
+      }
 
-      if (event.cancelBubble) {
-        break;
-      }
-    }
-
-    return result;
-  };
+      ensureConstraints(event);
 
-  CommandStack.prototype._createId = function() {
-    return this._uid++;
-  };
+      var delta = {
+        x: 0,
+        y: 0
+      };
 
-  CommandStack.prototype._atomicDo = function(fn) {
+      delta[ axis ] = round$4(event[ 'd' + axis ]);
 
-    const execution = this._currentExecution;
+      self.makeSpace(movingShapes, resizingShapes, delta, direction, start);
 
-    execution.atomic = true;
+      eventBus.once('spaceTool.ended', function(event) {
 
-    try {
-      fn();
-    } finally {
-      execution.atomic = false;
-    }
-  };
+        // activate space tool selection after make space
+        self.activateSelection(event.originalEvent, true, true);
+      });
+    });
+  }
 
-  CommandStack.prototype._internalExecute = function(action, redo) {
-    const command = action.command,
-          context = action.context;
+  SpaceTool.$inject = [
+    'canvas',
+    'dragging',
+    'eventBus',
+    'modeling',
+    'rules',
+    'toolManager',
+    'mouse'
+  ];
 
-    const handler = this._getHandler(command);
+  /**
+   * Activate space tool selection.
+   *
+   * @param {Object} event
+   * @param {boolean} autoActivate
+   */
+  SpaceTool.prototype.activateSelection = function(event, autoActivate, reactivate) {
+    this._dragging.init(event, 'spaceTool.selection', {
+      autoActivate: autoActivate,
+      cursor: CURSOR_CROSSHAIR,
+      data: {
+        context: {
+          reactivate: reactivate
+        }
+      },
+      trapClick: false
+    });
+  };
 
-    if (!handler) {
-      throw new Error('no command handler registered for <' + command + '>');
-    }
+  /**
+   * Activate space tool make space.
+   *
+   * @param  {MouseEvent} event
+   */
+  SpaceTool.prototype.activateMakeSpace = function(event) {
+    this._dragging.init(event, 'spaceTool', {
+      autoActivate: true,
+      cursor: CURSOR_CROSSHAIR,
+      data: {
+        context: {}
+      }
+    });
+  };
 
-    this._pushAction(action);
+  /**
+   * Make space.
+   *
+   * @param  {Array<djs.model.Shape>} movingShapes
+   * @param  {Array<djs.model.Shape>} resizingShapes
+   * @param  {Object} delta
+   * @param  {number} delta.x
+   * @param  {number} delta.y
+   * @param  {string} direction
+   * @param  {number} start
+   */
+  SpaceTool.prototype.makeSpace = function(movingShapes, resizingShapes, delta, direction, start) {
+    return this._modeling.createSpace(movingShapes, resizingShapes, delta, direction, start);
+  };
 
-    if (!redo) {
-      this._fire(command, 'preExecute', action);
+  /**
+   * Initialize make space and return true if that was successful.
+   *
+   * @param {Object} event
+   * @param {Object} context
+   *
+   * @return {boolean}
+   */
+  SpaceTool.prototype.init = function(event, context) {
+    var axis = abs$1(event.dx) > abs$1(event.dy) ? 'x' : 'y',
+        delta = event[ 'd' + axis ],
+        start = event[ axis ] - delta;
 
-      if (handler.preExecute) {
-        handler.preExecute(context);
-      }
+    if (abs$1(delta) < 5) {
+      return false;
+    }
 
-      this._fire(command, 'preExecuted', action);
+    // invert delta to remove space when moving left
+    if (delta < 0) {
+      delta *= -1;
     }
 
-    // guard against illegal nested command stack invocations
-    this._atomicDo(() => {
+    // invert delta to add/remove space when removing/adding space if modifier key is pressed
+    if (hasPrimaryModifier(event)) {
+      delta *= -1;
+    }
 
-      this._fire(command, 'execute', action);
+    var direction = getDirection(axis, delta);
 
-      if (handler.execute) {
+    var root = this._canvas.getRootElement();
 
-        // actual execute + mark return results as dirty
-        this._markDirty(handler.execute(context));
-      }
+    var children = selfAndAllChildren(root, true);
 
-      // log to stack
-      this._executedAction(action, redo);
+    var elements = this.calculateAdjustments(children, axis, delta, start);
 
-      this._fire(command, 'executed', action);
+    var minDimensions = this._eventBus.fire('spaceTool.getMinDimensions', {
+      axis: axis,
+      direction: direction,
+      shapes: elements.resizingShapes,
+      start: start
     });
 
-    if (!redo) {
-      this._fire(command, 'postExecute', action);
+    var spaceToolConstraints = getSpaceToolConstraints(elements, axis, direction, start, minDimensions);
 
-      if (handler.postExecute) {
-        handler.postExecute(context);
+    assign$1(
+      context,
+      elements,
+      {
+        axis: axis,
+        direction: direction,
+        spaceToolConstraints: spaceToolConstraints,
+        start: start
       }
+    );
 
-      this._fire(command, 'postExecuted', action);
-    }
+    set('resize-' + (axis === 'x' ? 'ew' : 'ns'));
 
-    this._popAction(action);
+    return true;
   };
 
+  /**
+   * Get elements to be moved and resized.
+   *
+   * @param  {Array<djs.model.Shape>} elements
+   * @param  {string} axis
+   * @param  {number} delta
+   * @param  {number} start
+   *
+   * @return {Object}
+   */
+  SpaceTool.prototype.calculateAdjustments = function(elements, axis, delta, start) {
+    var rules = this._rules;
 
-  CommandStack.prototype._pushAction = function(action) {
+    var movingShapes = [],
+        resizingShapes = [];
 
-    const execution = this._currentExecution,
-          actions = execution.actions;
+    var attachers = [],
+        connections = [];
 
-    const baseAction = actions[0];
+    function moveShape(shape) {
+      if (!movingShapes.includes(shape)) {
+        movingShapes.push(shape);
+      }
 
-    if (execution.atomic) {
-      throw new Error('illegal invocation in <execute> or <revert> phase (action: ' + action.command + ')');
-    }
+      var label = shape.label;
 
-    if (!action.id) {
-      action.id = (baseAction && baseAction.id) || this._createId();
+      // move external label if its label target is moving
+      if (label && !movingShapes.includes(label)) {
+        movingShapes.push(label);
+      }
     }
 
-    actions.push(action);
-  };
+    function resizeShape(shape) {
+      if (!resizingShapes.includes(shape)) {
+        resizingShapes.push(shape);
+      }
+    }
 
+    forEach$1(elements, function(element) {
+      if (!element.parent || isLabel$2(element)) {
+        return;
+      }
 
-  CommandStack.prototype._popAction = function() {
-    const execution = this._currentExecution,
-          trigger = execution.trigger,
-          actions = execution.actions,
-          dirty = execution.dirty;
+      // handle connections separately
+      if (isConnection$7(element)) {
+        connections.push(element);
 
-    actions.pop();
+        return;
+      }
 
-    if (!actions.length) {
-      this._eventBus.fire('elements.changed', { elements: uniqueBy('id', dirty.reverse()) });
+      var shapeStart = element[ axis ],
+          shapeEnd = shapeStart + element[ AXIS_TO_DIMENSION[ axis ] ];
 
-      dirty.length = 0;
+      // handle attachers separately
+      if (isAttacher$1(element)
+        && ((delta > 0 && getMid(element)[ axis ] > start)
+          || (delta < 0 && getMid(element)[ axis ] < start))) {
+        attachers.push(element);
 
-      this._fire('changed', { trigger: trigger });
+        return;
+      }
 
-      execution.trigger = null;
-    }
-  };
+      // move shape if its start is after space tool
+      if ((delta > 0 && shapeStart > start)
+        || (delta < 0 && shapeEnd < start)) {
+        moveShape(element);
 
+        return;
+      }
 
-  CommandStack.prototype._markDirty = function(elements) {
-    const execution = this._currentExecution;
+      // resize shape if it's resizable and its start is before and its end is after space tool
+      if (shapeStart < start
+        && shapeEnd > start
+        && rules.allowed('shape.resize', { shape: element })
+      ) {
+        resizeShape(element);
 
-    if (!elements) {
-      return;
-    }
+        return;
+      }
+    });
 
-    elements = isArray$3(elements) ? elements : [ elements ];
+    // move attacher if its host is moving
+    forEach$1(movingShapes, function(shape) {
+      var attachers = shape.attachers;
 
-    execution.dirty = execution.dirty.concat(elements);
-  };
+      if (attachers) {
+        forEach$1(attachers, function(attacher) {
+          moveShape(attacher);
+        });
+      }
+    });
 
+    var allShapes = movingShapes.concat(resizingShapes);
 
-  CommandStack.prototype._executedAction = function(action, redo) {
-    const stackIdx = ++this._stackIdx;
+    // move attacher if its mid is after space tool and its host is moving or resizing
+    forEach$1(attachers, function(attacher) {
+      var host = attacher.host;
 
-    if (!redo) {
-      this._stack.splice(stackIdx, this._stack.length, action);
-    }
-  };
+      if (includes$3(allShapes, host)) {
+        moveShape(attacher);
+      }
+    });
 
+    allShapes = movingShapes.concat(resizingShapes);
 
-  CommandStack.prototype._revertedAction = function(action) {
-    this._stackIdx--;
-  };
+    // move external label if its label target's (connection) source and target are moving
+    forEach$1(connections, function(connection) {
+      var source = connection.source,
+          target = connection.target,
+          label = connection.label;
 
+      if (includes$3(allShapes, source)
+        && includes$3(allShapes, target)
+        && label) {
+        moveShape(label);
+      }
+    });
 
-  CommandStack.prototype._getHandler = function(command) {
-    return this._handlerMap[command];
+    return {
+      movingShapes: movingShapes,
+      resizingShapes: resizingShapes
+    };
   };
 
-  CommandStack.prototype._setHandler = function(command, handler) {
-    if (!command || !handler) {
-      throw new Error('command and handler required');
-    }
+  SpaceTool.prototype.toggle = function() {
 
-    if (this._handlerMap[command]) {
-      throw new Error('overriding handler for command <' + command + '>');
+    if (this.isActive()) {
+      return this._dragging.cancel();
     }
 
-    this._handlerMap[command] = handler;
-  };
+    var mouseEvent = this._mouse.getLastMoveEvent();
 
-  var CommandModule = {
-    commandStack: [ 'type', CommandStack ]
+    this.activateSelection(mouseEvent, !!mouseEvent);
   };
 
-  // document wide unique tooltip ids
-  var ids = new IdGenerator('tt');
-
+  SpaceTool.prototype.isActive = function() {
+    var context = this._dragging.context();
 
-  function createRoot(parentNode) {
-    var root = domify$1(
-      '<div class="djs-tooltip-container" />'
-    );
+    if (context) {
+      return /^spaceTool/.test(context.prefix);
+    }
 
-    assign(root, {
-      position: 'absolute',
-      width: '0',
-      height: '0'
-    });
+    return false;
+  };
 
-    parentNode.insertBefore(root, parentNode.firstChild);
+  // helpers //////////
 
-    return root;
+  function addPadding(trbl) {
+    return {
+      top: trbl.top - PADDING,
+      right: trbl.right + PADDING,
+      bottom: trbl.bottom + PADDING,
+      left: trbl.left - PADDING
+    };
   }
 
+  function ensureConstraints(event) {
+    var context = event.context,
+        spaceToolConstraints = context.spaceToolConstraints;
 
-  function setPosition(el, x, y) {
-    assign(el, { left: x + 'px', top: y + 'px' });
-  }
+    if (!spaceToolConstraints) {
+      return;
+    }
 
-  function setVisible(el, visible) {
-    el.style.display = visible === false ? 'none' : '';
-  }
+    var x, y;
 
+    if (isNumber(spaceToolConstraints.left)) {
+      x = Math.max(event.x, spaceToolConstraints.left);
 
-  var tooltipClass = 'djs-tooltip',
-      tooltipSelector = '.' + tooltipClass;
+      event.dx = event.dx + x - event.x;
+      event.x = x;
+    }
 
-  /**
-   * A service that allows users to render tool tips on the diagram.
-   *
-   * The tooltip service will take care of updating the tooltip positioning
-   * during navigation + zooming.
-   *
-   * @example
-   *
-   * ```javascript
-   *
-   * // add a pink badge on the top left of the shape
-   * tooltips.add({
-   *   position: {
-   *     x: 50,
-   *     y: 100
-   *   },
-   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
-   * });
-   *
-   * // or with optional life span
-   * tooltips.add({
-   *   position: {
-   *     top: -5,
-   *     left: -5
-   *   },
-   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>',
-   *   ttl: 2000
-   * });
-   *
-   * // remove a tool tip
-   * var id = tooltips.add(...);
-   * tooltips.remove(id);
-   * ```
-   *
-   * @param {EventBus} eventBus
-   * @param {Canvas} canvas
-   */
-  function Tooltips(eventBus, canvas) {
+    if (isNumber(spaceToolConstraints.right)) {
+      x = Math.min(event.x, spaceToolConstraints.right);
 
-    this._eventBus = eventBus;
-    this._canvas = canvas;
+      event.dx = event.dx + x - event.x;
+      event.x = x;
+    }
 
-    this._ids = ids;
+    if (isNumber(spaceToolConstraints.top)) {
+      y = Math.max(event.y, spaceToolConstraints.top);
 
-    this._tooltipDefaults = {
-      show: {
-        minZoom: 0.7,
-        maxZoom: 5.0
-      }
-    };
+      event.dy = event.dy + y - event.y;
+      event.y = y;
+    }
 
-    /**
-     * Mapping tooltipId -> tooltip
-     */
-    this._tooltips = {};
+    if (isNumber(spaceToolConstraints.bottom)) {
+      y = Math.min(event.y, spaceToolConstraints.bottom);
 
-    // root html element for all tooltips
-    this._tooltipRoot = createRoot(canvas.getContainer());
+      event.dy = event.dy + y - event.y;
+      event.y = y;
+    }
+  }
 
+  function getSpaceToolConstraints(elements, axis, direction, start, minDimensions) {
+    var movingShapes = elements.movingShapes,
+        resizingShapes = elements.resizingShapes;
 
-    var self = this;
+    if (!resizingShapes.length) {
+      return;
+    }
 
-    delegate.bind(this._tooltipRoot, tooltipSelector, 'mousedown', function(event) {
-      event.stopPropagation();
-    });
+    var spaceToolConstraints = {},
+        min,
+        max;
 
-    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseover', function(event) {
-      self.trigger('mouseover', event);
-    });
+    forEach$1(resizingShapes, function(resizingShape) {
+      var attachers = resizingShape.attachers,
+          children = resizingShape.children;
 
-    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseout', function(event) {
-      self.trigger('mouseout', event);
-    });
+      var resizingShapeBBox = asTRBL(resizingShape);
 
-    this._init();
-  }
+      // find children that are not moving or resizing
+      var nonMovingResizingChildren = filter(children, function(child) {
+        return !isConnection$7(child) &&
+          !isLabel$2(child) &&
+          !includes$3(movingShapes, child) &&
+          !includes$3(resizingShapes, child);
+      });
 
+      // find children that are moving
+      var movingChildren = filter(children, function(child) {
+        return !isConnection$7(child) && !isLabel$2(child) && includes$3(movingShapes, child);
+      });
 
-  Tooltips.$inject = [ 'eventBus', 'canvas' ];
+      var minOrMax,
+          nonMovingResizingChildrenBBox,
+          movingChildrenBBox,
+          movingAttachers = [],
+          nonMovingAttachers = [],
+          movingAttachersBBox,
+          movingAttachersConstraint,
+          nonMovingAttachersBBox,
+          nonMovingAttachersConstraint;
 
+      if (nonMovingResizingChildren.length) {
+        nonMovingResizingChildrenBBox = addPadding(asTRBL(getBBox(nonMovingResizingChildren)));
 
-  /**
-   * Adds a HTML tooltip to the diagram
-   *
-   * @param {Object}               tooltip   the tooltip configuration
-   *
-   * @param {string|DOMElement}    tooltip.html                 html element to use as an tooltip
-   * @param {Object}               [tooltip.show]               show configuration
-   * @param {number}               [tooltip.show.minZoom]       minimal zoom level to show the tooltip
-   * @param {number}               [tooltip.show.maxZoom]       maximum zoom level to show the tooltip
-   * @param {Object}               tooltip.position             where to attach the tooltip
-   * @param {number}               [tooltip.position.left]      relative to element bbox left attachment
-   * @param {number}               [tooltip.position.top]       relative to element bbox top attachment
-   * @param {number}               [tooltip.position.bottom]    relative to element bbox bottom attachment
-   * @param {number}               [tooltip.position.right]     relative to element bbox right attachment
-   * @param {number}               [tooltip.timeout=-1]
-   *
-   * @return {string}              id that may be used to reference the tooltip for update or removal
-   */
-  Tooltips.prototype.add = function(tooltip) {
+        minOrMax = start -
+          resizingShapeBBox[ DIRECTION_TO_TRBL[ direction ] ] +
+          nonMovingResizingChildrenBBox[ DIRECTION_TO_TRBL[ direction ] ];
 
-    if (!tooltip.position) {
-      throw new Error('must specifiy tooltip position');
-    }
+        if (direction === 'n') {
+          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
+        } else if (direction === 'w') {
+          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
+        } else if (direction === 's') {
+          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
+        } else if (direction === 'e') {
+          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
+        }
+      }
 
-    if (!tooltip.html) {
-      throw new Error('must specifiy tooltip html');
-    }
+      if (movingChildren.length) {
+        movingChildrenBBox = addPadding(asTRBL(getBBox(movingChildren)));
 
-    var id = this._ids.next();
+        minOrMax = start -
+          movingChildrenBBox[ DIRECTION_TO_TRBL[ DIRECTION_TO_OPPOSITE[ direction ] ] ] +
+          resizingShapeBBox[ DIRECTION_TO_TRBL[ DIRECTION_TO_OPPOSITE[ direction ] ] ];
 
-    tooltip = assign$1({}, this._tooltipDefaults, tooltip, {
-      id: id
-    });
+        if (direction === 'n') {
+          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
+        } else if (direction === 'w') {
+          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
+        } else if (direction === 's') {
+          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
+        } else if (direction === 'e') {
+          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
+        }
+      }
 
-    this._addTooltip(tooltip);
+      if (attachers && attachers.length) {
+        attachers.forEach(function(attacher) {
+          if (includes$3(movingShapes, attacher)) {
+            movingAttachers.push(attacher);
+          } else {
+            nonMovingAttachers.push(attacher);
+          }
+        });
 
-    if (tooltip.timeout) {
-      this.setTimeout(tooltip);
-    }
+        if (movingAttachers.length) {
+          movingAttachersBBox = asTRBL(getBBox(movingAttachers.map(getMid)));
 
-    return id;
-  };
+          movingAttachersConstraint = resizingShapeBBox[ DIRECTION_TO_TRBL[ DIRECTION_TO_OPPOSITE[ direction ] ] ]
+                - (movingAttachersBBox[ DIRECTION_TO_TRBL[ DIRECTION_TO_OPPOSITE[ direction ] ] ] - start);
+        }
 
-  Tooltips.prototype.trigger = function(action, event) {
+        if (nonMovingAttachers.length) {
+          nonMovingAttachersBBox = asTRBL(getBBox(nonMovingAttachers.map(getMid)));
 
-    var node = event.delegateTarget || event.target;
+          nonMovingAttachersConstraint = nonMovingAttachersBBox[ DIRECTION_TO_TRBL[ direction ] ]
+                - (resizingShapeBBox[ DIRECTION_TO_TRBL[ direction ] ] - start);
+        }
 
-    var tooltip = this.get(attr$1(node, 'data-tooltip-id'));
+        if (direction === 'n') {
+          minOrMax = Math.min(movingAttachersConstraint || Infinity, nonMovingAttachersConstraint || Infinity);
 
-    if (!tooltip) {
-      return;
-    }
+          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
+        } else if (direction === 'w') {
+          minOrMax = Math.min(movingAttachersConstraint || Infinity, nonMovingAttachersConstraint || Infinity);
 
-    if (action === 'mouseover' && tooltip.timeout) {
-      this.clearTimeout(tooltip);
-    }
+          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
+        } else if (direction === 's') {
+          minOrMax = Math.max(movingAttachersConstraint || -Infinity, nonMovingAttachersConstraint || -Infinity);
 
-    if (action === 'mouseout' && tooltip.timeout) {
+          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
+        } else if (direction === 'e') {
+          minOrMax = Math.max(movingAttachersConstraint || -Infinity, nonMovingAttachersConstraint || -Infinity);
 
-      // cut timeout after mouse out
-      tooltip.timeout = 1000;
+          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
+        }
+      }
 
-      this.setTimeout(tooltip);
-    }
-  };
+      var resizingShapeMinDimensions = minDimensions && minDimensions[ resizingShape.id ];
 
-  /**
-   * Get a tooltip with the given id
-   *
-   * @param {string} id
-   */
-  Tooltips.prototype.get = function(id) {
+      if (resizingShapeMinDimensions) {
 
-    if (typeof id !== 'string') {
-      id = id.id;
-    }
+        if (direction === 'n') {
+          minOrMax = start +
+            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] -
+            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];
 
-    return this._tooltips[id];
-  };
+          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
+        } else if (direction === 'w') {
+          minOrMax = start +
+            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] -
+            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];
 
-  Tooltips.prototype.clearTimeout = function(tooltip) {
+          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
+        } else if (direction === 's') {
+          minOrMax = start -
+            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] +
+            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];
 
-    tooltip = this.get(tooltip);
+          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
+        } else if (direction === 'e') {
+          minOrMax = start -
+            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] +
+            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];
 
-    if (!tooltip) {
-      return;
-    }
+          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
+        }
+      }
+    });
 
-    var removeTimer = tooltip.removeTimer;
+    return spaceToolConstraints;
+  }
 
-    if (removeTimer) {
-      clearTimeout(removeTimer);
-      tooltip.removeTimer = null;
-    }
-  };
+  function includes$3(array, item) {
+    return array.indexOf(item) !== -1;
+  }
 
-  Tooltips.prototype.setTimeout = function(tooltip) {
+  function isAttacher$1(element) {
+    return !!element.host;
+  }
 
-    tooltip = this.get(tooltip);
+  function isConnection$7(element) {
+    return !!element.waypoints;
+  }
 
-    if (!tooltip) {
-      return;
-    }
+  function isLabel$2(element) {
+    return !!element.labelTarget;
+  }
 
-    this.clearTimeout(tooltip);
+  var MARKER_DRAGGING$1 = 'djs-dragging',
+      MARKER_RESIZING = 'djs-resizing';
 
-    var self = this;
+  var LOW_PRIORITY$5 = 250;
+
+  var max = Math.max;
 
-    tooltip.removeTimer = setTimeout(function() {
-      self.remove(tooltip);
-    }, tooltip.timeout);
-  };
 
   /**
-   * Remove an tooltip with the given id
+   * Provides previews for selecting/moving/resizing shapes when creating/removing space.
    *
-   * @param {string} id
+   * @param {EventBus} eventBus
+   * @param {ElementRegistry} elementRegistry
+   * @param {Canvas} canvas
+   * @param {Styles} styles
    */
-  Tooltips.prototype.remove = function(id) {
-
-    var tooltip = this.get(id);
-
-    if (tooltip) {
-      remove$2(tooltip.html);
-      remove$2(tooltip.htmlContainer);
+  function SpaceToolPreview(
+      eventBus, elementRegistry, canvas,
+      styles, previewSupport) {
 
-      delete tooltip.htmlContainer;
+    function addPreviewGfx(collection, dragGroup) {
+      forEach$1(collection, function(element) {
+        previewSupport.addDragger(element, dragGroup);
 
-      delete this._tooltips[tooltip.id];
+        canvas.addMarker(element, MARKER_DRAGGING$1);
+      });
     }
-  };
 
+    // add crosshair
+    eventBus.on('spaceTool.selection.start', function(event) {
+      var space = canvas.getLayer('space'),
+          context = event.context;
 
-  Tooltips.prototype.show = function() {
-    setVisible(this._tooltipRoot);
-  };
+      var orientation = {
+        x: 'M 0,-10000 L 0,10000',
+        y: 'M -10000,0 L 10000,0'
+      };
 
+      var crosshairGroup = create$1('g');
+      attr(crosshairGroup, styles.cls('djs-crosshair-group', [ 'no-events' ]));
 
-  Tooltips.prototype.hide = function() {
-    setVisible(this._tooltipRoot, false);
-  };
+      append(space, crosshairGroup);
 
+      // horizontal path
+      var pathX = create$1('path');
+      attr(pathX, 'd', orientation.x);
+      classes(pathX).add('djs-crosshair');
 
-  Tooltips.prototype._updateRoot = function(viewbox) {
-    var a = viewbox.scale || 1;
-    var d = viewbox.scale || 1;
+      append(crosshairGroup, pathX);
 
-    var matrix = 'matrix(' + a + ',0,0,' + d + ',' + (-1 * viewbox.x * a) + ',' + (-1 * viewbox.y * d) + ')';
+      // vertical path
+      var pathY = create$1('path');
+      attr(pathY, 'd', orientation.y);
+      classes(pathY).add('djs-crosshair');
 
-    this._tooltipRoot.style.transform = matrix;
-    this._tooltipRoot.style['-ms-transform'] = matrix;
-  };
+      append(crosshairGroup, pathY);
 
+      context.crosshairGroup = crosshairGroup;
+    });
 
-  Tooltips.prototype._addTooltip = function(tooltip) {
+    // update crosshair
+    eventBus.on('spaceTool.selection.move', function(event) {
+      var crosshairGroup = event.context.crosshairGroup;
 
-    var id = tooltip.id,
-        html = tooltip.html,
-        htmlContainer,
-        tooltipRoot = this._tooltipRoot;
+      translate$2(crosshairGroup, event.x, event.y);
+    });
 
-    // unwrap jquery (for those who need it)
-    if (html.get && html.constructor.prototype.jquery) {
-      html = html.get(0);
-    }
+    // remove crosshair
+    eventBus.on('spaceTool.selection.cleanup', function(event) {
+      var context = event.context,
+          crosshairGroup = context.crosshairGroup;
 
-    // create proper html elements from
-    // tooltip HTML strings
-    if (isString(html)) {
-      html = domify$1(html);
-    }
+      if (crosshairGroup) {
+        remove$1(crosshairGroup);
+      }
+    });
 
-    htmlContainer = domify$1('<div data-tooltip-id="' + id + '" class="' + tooltipClass + '">');
-    assign(htmlContainer, { position: 'absolute' });
+    // add and update move/resize previews
+    eventBus.on('spaceTool.move', LOW_PRIORITY$5, function(event) {
 
-    htmlContainer.appendChild(html);
+      var context = event.context,
+          line = context.line,
+          axis = context.axis,
+          movingShapes = context.movingShapes,
+          resizingShapes = context.resizingShapes;
 
-    if (tooltip.type) {
-      classes$1(htmlContainer).add('djs-tooltip-' + tooltip.type);
-    }
+      if (!context.initialized) {
+        return;
+      }
 
-    if (tooltip.className) {
-      classes$1(htmlContainer).add(tooltip.className);
-    }
+      if (!context.dragGroup) {
+        var spaceLayer = canvas.getLayer('space');
 
-    tooltip.htmlContainer = htmlContainer;
+        line = create$1('path');
+        attr(line, 'd', 'M0,0 L0,0');
+        classes(line).add('djs-crosshair');
 
-    tooltipRoot.appendChild(htmlContainer);
+        append(spaceLayer, line);
 
-    this._tooltips[id] = tooltip;
+        context.line = line;
 
-    this._updateTooltip(tooltip);
-  };
+        var dragGroup = create$1('g');
+        attr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));
 
+        append(canvas.getActiveLayer(), dragGroup);
 
-  Tooltips.prototype._updateTooltip = function(tooltip) {
+        // shapes
+        addPreviewGfx(movingShapes, dragGroup);
 
-    var position = tooltip.position,
-        htmlContainer = tooltip.htmlContainer;
+        // connections
+        var movingConnections = context.movingConnections = elementRegistry.filter(function(element) {
+          var sourceIsMoving = false;
 
-    // update overlay html based on tooltip x, y
+          forEach$1(movingShapes, function(shape) {
+            forEach$1(shape.outgoing, function(connection) {
+              if (element === connection) {
+                sourceIsMoving = true;
+              }
+            });
+          });
 
-    setPosition(htmlContainer, position.x, position.y);
-  };
+          var targetIsMoving = false;
 
+          forEach$1(movingShapes, function(shape) {
+            forEach$1(shape.incoming, function(connection) {
+              if (element === connection) {
+                targetIsMoving = true;
+              }
+            });
+          });
 
-  Tooltips.prototype._updateTooltipVisibilty = function(viewbox) {
+          var sourceIsResizing = false;
 
-    forEach$1(this._tooltips, function(tooltip) {
-      var show = tooltip.show,
-          htmlContainer = tooltip.htmlContainer,
-          visible = true;
+          forEach$1(resizingShapes, function(shape) {
+            forEach$1(shape.outgoing, function(connection) {
+              if (element === connection) {
+                sourceIsResizing = true;
+              }
+            });
+          });
 
-      if (show) {
-        if (show.minZoom > viewbox.scale ||
-            show.maxZoom < viewbox.scale) {
-          visible = false;
-        }
+          var targetIsResizing = false;
 
-        setVisible(htmlContainer, visible);
-      }
-    });
-  };
+          forEach$1(resizingShapes, function(shape) {
+            forEach$1(shape.incoming, function(connection) {
+              if (element === connection) {
+                targetIsResizing = true;
+              }
+            });
+          });
 
-  Tooltips.prototype._init = function() {
+          return isConnection$6(element)
+            && (sourceIsMoving || sourceIsResizing)
+            && (targetIsMoving || targetIsResizing);
+        });
 
-    var self = this;
 
-    // scroll/zoom integration
+        addPreviewGfx(movingConnections, dragGroup);
 
-    function updateViewbox(viewbox) {
-      self._updateRoot(viewbox);
-      self._updateTooltipVisibilty(viewbox);
+        context.dragGroup = dragGroup;
+      }
 
-      self.show();
-    }
+      if (!context.frameGroup) {
+        var frameGroup = create$1('g');
+        attr(frameGroup, styles.cls('djs-frame-group', [ 'no-events' ]));
 
-    this._eventBus.on('canvas.viewbox.changing', function(event) {
-      self.hide();
-    });
+        append(canvas.getActiveLayer(), frameGroup);
 
-    this._eventBus.on('canvas.viewbox.changed', function(event) {
-      updateViewbox(event.viewbox);
-    });
-  };
+        var frames = [];
 
-  var TooltipsModule = {
-    __init__: [ 'tooltips' ],
-    tooltips: [ 'type', Tooltips ]
-  };
+        forEach$1(resizingShapes, function(shape) {
+          var frame = previewSupport.addFrame(shape, frameGroup);
 
-  /**
-   * Remove from the beginning of a collection until it is empty.
-   *
-   * This is a null-safe operation that ensures elements
-   * are being removed from the given collection until the
-   * collection is empty.
-   *
-   * The implementation deals with the fact that a remove operation
-   * may touch, i.e. remove multiple elements in the collection
-   * at a time.
-   *
-   * @param {Array<Object>} [collection]
-   * @param {Function} removeFn
-   *
-   * @return {Array<Object>} the cleared collection
-   */
-  function saveClear(collection, removeFn) {
+          var initialBounds = frame.getBBox();
 
-    if (typeof removeFn !== 'function') {
-      throw new Error('removeFn iterator must be a function');
-    }
+          frames.push({
+            element: frame,
+            initialBounds: initialBounds
+          });
 
-    if (!collection) {
-      return;
-    }
+          canvas.addMarker(shape, MARKER_RESIZING);
+        });
 
-    var e;
+        context.frameGroup = frameGroup;
+        context.frames = frames;
+      }
 
-    while ((e = collection[0])) {
-      removeFn(e);
-    }
+      var orientation = {
+        x: 'M' + event.x + ', -10000 L' + event.x + ', 10000',
+        y: 'M -10000, ' + event.y + ' L 10000, ' + event.y
+      };
 
-    return collection;
-  }
+      attr(line, { d: orientation[ axis ] });
 
-  var LOW_PRIORITY$6 = 250,
-      HIGH_PRIORITY$5 = 1400;
+      var opposite = { x: 'y', y: 'x' };
+      var delta = { x: event.dx, y: event.dy };
+      delta[ opposite[ context.axis ] ] = 0;
 
+      // update move previews
+      translate$2(context.dragGroup, delta.x, delta.y);
 
-  /**
-   * A handler that makes sure labels are properly moved with
-   * their label targets.
-   *
-   * @param {didi.Injector} injector
-   * @param {EventBus} eventBus
-   * @param {Modeling} modeling
-   */
-  function LabelSupport(injector, eventBus, modeling) {
+      // update resize previews
+      forEach$1(context.frames, function(frame) {
+        var element = frame.element,
+            initialBounds = frame.initialBounds,
+            width,
+            height;
 
-    CommandInterceptor.call(this, eventBus);
+        if (context.direction === 'e') {
+          attr(element, {
+            width: max(initialBounds.width + delta.x, 5)
+          });
+        } else {
+          width = max(initialBounds.width - delta.x, 5);
 
-    var movePreview = injector.get('movePreview', false);
+          attr(element, {
+            width: width,
+            x: initialBounds.x + initialBounds.width - width
+          });
+        }
 
-    // remove labels from the collection that are being
-    // moved with other elements anyway
-    eventBus.on('shape.move.start', HIGH_PRIORITY$5, function(e) {
+        if (context.direction === 's') {
+          attr(element, {
+            height: max(initialBounds.height + delta.y, 5)
+          });
+        } else {
+          height = max(initialBounds.height - delta.y, 5);
 
-      var context = e.context,
-          shapes = context.shapes,
-          validatedShapes = context.validatedShapes;
+          attr(element, {
+            height: height,
+            y: initialBounds.y + initialBounds.height - height
+          });
+        }
+      });
 
-      context.shapes = removeLabels(shapes);
-      context.validatedShapes = removeLabels(validatedShapes);
     });
 
-    // add labels to visual's group
-    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$6, function(e) {
-
-      var context = e.context,
-          shapes = context.shapes;
-
-      var labels = [];
-
-      forEach$1(shapes, function(element) {
-
-        forEach$1(element.labels, function(label) {
+    // remove move/resize previews
+    eventBus.on('spaceTool.cleanup', function(event) {
 
-          if (!label.hidden && context.shapes.indexOf(label) === -1) {
-            labels.push(label);
-          }
+      var context = event.context,
+          movingShapes = context.movingShapes,
+          movingConnections = context.movingConnections,
+          resizingShapes = context.resizingShapes,
+          line = context.line,
+          dragGroup = context.dragGroup,
+          frameGroup = context.frameGroup;
 
-          if (element.labelTarget) {
-            labels.push(element);
-          }
-        });
+      // moving shapes
+      forEach$1(movingShapes, function(shape) {
+        canvas.removeMarker(shape, MARKER_DRAGGING$1);
       });
 
-      forEach$1(labels, function(label) {
-        movePreview.makeDraggable(context, label, true);
+      // moving connections
+      forEach$1(movingConnections, function(connection) {
+        canvas.removeMarker(connection, MARKER_DRAGGING$1);
       });
 
-    });
-
-    // add all labels to move closure
-    this.preExecuted('elements.move', HIGH_PRIORITY$5, function(e) {
-      var context = e.context,
-          closure = context.closure,
-          enclosedElements = closure.enclosedElements;
-
-      var enclosedLabels = [];
-
-      // find labels that are not part of
-      // move closure yet and add them
-      forEach$1(enclosedElements, function(element) {
-        forEach$1(element.labels, function(label) {
+      if (dragGroup) {
+        remove$1(line);
+        remove$1(dragGroup);
+      }
 
-          if (!enclosedElements[label.id]) {
-            enclosedLabels.push(label);
-          }
-        });
+      forEach$1(resizingShapes, function(shape) {
+        canvas.removeMarker(shape, MARKER_RESIZING);
       });
 
-      closure.addAll(enclosedLabels);
+      if (frameGroup) {
+        remove$1(frameGroup);
+      }
     });
+  }
 
-
-    this.preExecute([
-      'connection.delete',
-      'shape.delete'
-    ], function(e) {
-
-      var context = e.context,
-          element = context.connection || context.shape;
-
-      saveClear(element.labels, function(label) {
-        modeling.removeShape(label, { nested: true });
-      });
-    });
+  SpaceToolPreview.$inject = [
+    'eventBus',
+    'elementRegistry',
+    'canvas',
+    'styles',
+    'previewSupport'
+  ];
 
 
-    this.execute('shape.delete', function(e) {
+  // helpers //////////////////////
 
-      var context = e.context,
-          shape = context.shape,
-          labelTarget = shape.labelTarget;
+  /**
+   * Checks if an element is a connection.
+   */
+  function isConnection$6(element) {
+    return element.waypoints;
+  }
 
-      // unset labelTarget
-      if (labelTarget) {
-        context.labelTargetIndex = indexOf(labelTarget.labels, shape);
-        context.labelTarget = labelTarget;
+  var SpaceToolModule$1 = {
+    __init__: [ 'spaceToolPreview' ],
+    __depends__: [
+      DraggingModule,
+      RulesModule$1,
+      ToolManagerModule,
+      PreviewSupportModule,
+      MouseModule
+    ],
+    spaceTool: [ 'type', SpaceTool ],
+    spaceToolPreview: [ 'type', SpaceToolPreview ]
+  };
 
-        shape.labelTarget = null;
-      }
-    });
+  function BpmnSpaceTool(injector) {
+    injector.invoke(SpaceTool, this);
+  }
 
-    this.revert('shape.delete', function(e) {
+  BpmnSpaceTool.$inject = [
+    'injector'
+  ];
 
-      var context = e.context,
-          shape = context.shape,
-          labelTarget = context.labelTarget,
-          labelTargetIndex = context.labelTargetIndex;
+  e(BpmnSpaceTool, SpaceTool);
 
-      // restore labelTarget
-      if (labelTarget) {
-        add(labelTarget.labels, shape, labelTargetIndex);
+  BpmnSpaceTool.prototype.calculateAdjustments = function(elements, axis, delta, start) {
+    var adjustments = SpaceTool.prototype.calculateAdjustments.call(this, elements, axis, delta, start);
 
-        shape.labelTarget = labelTarget;
-      }
+    // do not resize text annotations
+    adjustments.resizingShapes = adjustments.resizingShapes.filter(function(shape) {
+      return !is$1(shape, 'bpmn:TextAnnotation');
     });
 
-  }
-
-  e(LabelSupport, CommandInterceptor);
-
-  LabelSupport.$inject = [
-    'injector',
-    'eventBus',
-    'modeling'
-  ];
+    return adjustments;
+  };
 
+  var SpaceToolModule = {
+    __depends__: [ SpaceToolModule$1 ],
+    spaceTool: [ 'type', BpmnSpaceTool ]
+  };
 
   /**
-   * Return a filtered list of elements that do not
-   * contain attached elements with hosts being part
-   * of the selection.
+   * A service that offers un- and redoable execution of commands.
    *
-   * @param  {Array<djs.model.Base>} elements
+   * The command stack is responsible for executing modeling actions
+   * in a un- and redoable manner. To do this it delegates the actual
+   * command execution to {@link CommandHandler}s.
    *
-   * @return {Array<djs.model.Base>} filtered
+   * Command handlers provide {@link CommandHandler#execute(ctx)} and
+   * {@link CommandHandler#revert(ctx)} methods to un- and redo a command
+   * identified by a command context.
+   *
+   *
+   * ## Life-Cycle events
+   *
+   * In the process the command stack fires a number of life-cycle events
+   * that other components to participate in the command execution.
+   *
+   *    * preExecute
+   *    * preExecuted
+   *    * execute
+   *    * executed
+   *    * postExecute
+   *    * postExecuted
+   *    * revert
+   *    * reverted
+   *
+   * A special event is used for validating, whether a command can be
+   * performed prior to its execution.
+   *
+   *    * canExecute
+   *
+   * Each of the events is fired as `commandStack.{eventName}` and
+   * `commandStack.{commandName}.{eventName}`, respectively. This gives
+   * components fine grained control on where to hook into.
+   *
+   * The event object fired transports `command`, the name of the
+   * command and `context`, the command context.
+   *
+   *
+   * ## Creating Command Handlers
+   *
+   * Command handlers should provide the {@link CommandHandler#execute(ctx)}
+   * and {@link CommandHandler#revert(ctx)} methods to implement
+   * redoing and undoing of a command.
+   *
+   * A command handler _must_ ensure undo is performed properly in order
+   * not to break the undo chain. It must also return the shapes that
+   * got changed during the `execute` and `revert` operations.
+   *
+   * Command handlers may execute other modeling operations (and thus
+   * commands) in their `preExecute` and `postExecute` phases. The command
+   * stack will properly group all commands together into a logical unit
+   * that may be re- and undone atomically.
+   *
+   * Command handlers must not execute other commands from within their
+   * core implementation (`execute`, `revert`).
+   *
+   *
+   * ## Change Tracking
+   *
+   * During the execution of the CommandStack it will keep track of all
+   * elements that have been touched during the command's execution.
+   *
+   * At the end of the CommandStack execution it will notify interested
+   * components via an 'elements.changed' event with all the dirty
+   * elements.
+   *
+   * The event can be picked up by components that are interested in the fact
+   * that elements have been changed. One use case for this is updating
+   * their graphical representation after moving / resizing or deletion.
+   *
+   * @see CommandHandler
+   *
+   * @param {EventBus} eventBus
+   * @param {Injector} injector
    */
-  function removeLabels(elements) {
+  function CommandStack(eventBus, injector) {
 
-    return filter(elements, function(element) {
+    /**
+     * A map of all registered command handlers.
+     *
+     * @type {Object}
+     */
+    this._handlerMap = {};
 
-      // filter out labels that are move together
-      // with their label targets
-      return elements.indexOf(element.labelTarget) === -1;
-    });
+    /**
+     * A stack containing all re/undoable actions on the diagram
+     *
+     * @type {Array<Object>}
+     */
+    this._stack = [];
+
+    /**
+     * The current index on the stack
+     *
+     * @type {number}
+     */
+    this._stackIdx = -1;
+
+    /**
+     * Current active commandStack execution
+     *
+     * @type {Object}
+     * @property {Object[]} actions
+     * @property {Object[]} dirty
+     * @property { 'undo' | 'redo' | 'clear' | 'execute' | null } trigger the cause of the current excecution
+     */
+    this._currentExecution = {
+      actions: [],
+      dirty: [],
+      trigger: null
+    };
+
+
+    this._injector = injector;
+    this._eventBus = eventBus;
+
+    this._uid = 1;
+
+    eventBus.on([
+      'diagram.destroy',
+      'diagram.clear'
+    ], function() {
+      this.clear(false);
+    }, this);
   }
 
-  var LabelSupportModule = {
-    __init__: [ 'labelSupport' ],
-    labelSupport: [ 'type', LabelSupport ]
-  };
+  CommandStack.$inject = [ 'eventBus', 'injector' ];
 
-  var LOW_PRIORITY$5 = 251,
-      HIGH_PRIORITY$4 = 1401;
 
-  var MARKER_ATTACH$1 = 'attach-ok';
+  /**
+   * Execute a command
+   *
+   * @param {string} command the command to execute
+   * @param {Object} context the environment to execute the command in
+   */
+  CommandStack.prototype.execute = function(command, context) {
+    if (!command) {
+      throw new Error('command required');
+    }
+
+    this._currentExecution.trigger = 'execute';
+
+    const action = { command: command, context: context };
+
+    this._pushAction(action);
+    this._internalExecute(action);
+    this._popAction(action);
+  };
 
 
   /**
-   * Adds the notion of attached elements to the modeler.
+   * Ask whether a given command can be executed.
    *
-   * Optionally depends on `diagram-js/lib/features/move` to render
-   * the attached elements during move preview.
+   * Implementors may hook into the mechanism on two ways:
    *
-   * Optionally depends on `diagram-js/lib/features/label-support`
-   * to render attached labels during move preview.
+   *   * in event listeners:
    *
-   * @param {didi.Injector} injector
-   * @param {EventBus} eventBus
-   * @param {Canvas} canvas
-   * @param {Rules} rules
-   * @param {Modeling} modeling
+   *     Users may prevent the execution via an event listener.
+   *     It must prevent the default action for `commandStack.(<command>.)canExecute` events.
+   *
+   *   * in command handlers:
+   *
+   *     If the method {@link CommandHandler#canExecute} is implemented in a handler
+   *     it will be called to figure out whether the execution is allowed.
+   *
+   * @param  {string} command the command to execute
+   * @param  {Object} context the environment to execute the command in
+   *
+   * @return {boolean} true if the command can be executed
    */
-  function AttachSupport(injector, eventBus, canvas, rules, modeling) {
-
-    CommandInterceptor.call(this, eventBus);
+  CommandStack.prototype.canExecute = function(command, context) {
 
-    var movePreview = injector.get('movePreview', false);
+    const action = { command: command, context: context };
 
+    const handler = this._getHandler(command);
 
-    // remove all the attached elements from the shapes to be validated
-    // add all the attached shapes to the overall list of moved shapes
-    eventBus.on('shape.move.start', HIGH_PRIORITY$4, function(e) {
+    let result = this._fire(command, 'canExecute', action);
 
-      var context = e.context,
-          shapes = context.shapes,
-          validatedShapes = context.validatedShapes;
+    // handler#canExecute will only be called if no listener
+    // decided on a result already
+    if (result === undefined) {
+      if (!handler) {
+        return false;
+      }
 
-      context.shapes = addAttached(shapes);
+      if (handler.canExecute) {
+        result = handler.canExecute(context);
+      }
+    }
 
-      context.validatedShapes = removeAttached(validatedShapes);
-    });
+    return result;
+  };
 
-    // add attachers to the visual's group
-    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$5, function(e) {
 
-      var context = e.context,
-          shapes = context.shapes,
-          attachers = getAttachers(shapes);
+  /**
+   * Clear the command stack, erasing all undo / redo history
+   */
+  CommandStack.prototype.clear = function(emit) {
+    this._stack.length = 0;
+    this._stackIdx = -1;
 
-      forEach$1(attachers, function(attacher) {
-        movePreview.makeDraggable(context, attacher, true);
+    if (emit !== false) {
+      this._fire('changed', { trigger: 'clear' });
+    }
+  };
 
-        forEach$1(attacher.labels, function(label) {
-          movePreview.makeDraggable(context, label, true);
-        });
-      });
-    });
 
-    // add attach-ok marker to current host
-    movePreview && eventBus.on('shape.move.start', function(event) {
-      var context = event.context,
-          shapes = context.shapes;
+  /**
+   * Undo last command(s)
+   */
+  CommandStack.prototype.undo = function() {
+    let action = this._getUndoAction(),
+        next;
 
-      if (shapes.length !== 1) {
-        return;
-      }
+    if (action) {
+      this._currentExecution.trigger = 'undo';
 
-      var shape = shapes[0];
+      this._pushAction(action);
 
-      var host = shape.host;
+      while (action) {
+        this._internalUndo(action);
+        next = this._getUndoAction();
 
-      if (host) {
-        canvas.addMarker(host, MARKER_ATTACH$1);
+        if (!next || next.id !== action.id) {
+          break;
+        }
 
-        eventBus.once([
-          'shape.move.out',
-          'shape.move.cleanup'
-        ], function() {
-          canvas.removeMarker(host, MARKER_ATTACH$1);
-        });
+        action = next;
       }
-    });
 
-    // add all attachers to move closure
-    this.preExecuted('elements.move', HIGH_PRIORITY$4, function(e) {
-      var context = e.context,
-          closure = context.closure,
-          shapes = context.shapes,
-          attachers = getAttachers(shapes);
+      this._popAction();
+    }
+  };
 
-      forEach$1(attachers, function(attacher) {
-        closure.add(attacher, closure.topLevel[attacher.host.id]);
-      });
-    });
 
-    // perform the attaching after shapes are done moving
-    this.postExecuted('elements.move', function(e) {
+  /**
+   * Redo last command(s)
+   */
+  CommandStack.prototype.redo = function() {
+    let action = this._getRedoAction(),
+        next;
 
-      var context = e.context,
-          shapes = context.shapes,
-          newHost = context.newHost,
-          attachers;
+    if (action) {
+      this._currentExecution.trigger = 'redo';
 
-      // only single elements can be attached
-      // multiply elements can be detached
-      if (newHost && shapes.length !== 1) {
-        return;
-      }
+      this._pushAction(action);
 
-      if (newHost) {
-        attachers = shapes;
-      } else {
+      while (action) {
+        this._internalExecute(action, true);
+        next = this._getRedoAction();
 
-        // find attachers moved without host
-        attachers = filter(shapes, function(shape) {
-          var host = shape.host;
+        if (!next || next.id !== action.id) {
+          break;
+        }
 
-          return isAttacher(shape) && !includes$4(shapes, host);
-        });
+        action = next;
       }
 
-      forEach$1(attachers, function(attacher) {
-        modeling.updateAttachment(attacher, newHost);
-      });
-    });
+      this._popAction();
+    }
+  };
 
-    // ensure invalid attachment connections are removed
-    this.postExecuted('elements.move', function(e) {
 
-      var shapes = e.context.shapes;
+  /**
+   * Register a handler instance with the command stack
+   *
+   * @param {string} command
+   * @param {CommandHandler} handler
+   */
+  CommandStack.prototype.register = function(command, handler) {
+    this._setHandler(command, handler);
+  };
 
-      forEach$1(shapes, function(shape) {
 
-        forEach$1(shape.attachers, function(attacher) {
+  /**
+   * Register a handler type with the command stack
+   * by instantiating it and injecting its dependencies.
+   *
+   * @param {string} command
+   * @param {Function} a constructor for a {@link CommandHandler}
+   */
+  CommandStack.prototype.registerHandler = function(command, handlerCls) {
 
-          // remove invalid outgoing connections
-          forEach$1(attacher.outgoing.slice(), function(connection) {
-            var allowed = rules.allowed('connection.reconnect', {
-              connection: connection,
-              source: connection.source,
-              target: connection.target
-            });
+    if (!command || !handlerCls) {
+      throw new Error('command and handlerCls must be defined');
+    }
 
-            if (!allowed) {
-              modeling.removeConnection(connection);
-            }
-          });
+    const handler = this._injector.instantiate(handlerCls);
+    this.register(command, handler);
+  };
 
-          // remove invalid incoming connections
-          forEach$1(attacher.incoming.slice(), function(connection) {
-            var allowed = rules.allowed('connection.reconnect', {
-              connection: connection,
-              source: connection.source,
-              target: connection.target
-            });
+  CommandStack.prototype.canUndo = function() {
+    return !!this._getUndoAction();
+  };
 
-            if (!allowed) {
-              modeling.removeConnection(connection);
-            }
-          });
-        });
-      });
-    });
+  CommandStack.prototype.canRedo = function() {
+    return !!this._getRedoAction();
+  };
 
-    this.postExecute('shape.create', function(e) {
-      var context = e.context,
-          shape = context.shape,
-          host = context.host;
+  // stack access  //////////////////////
 
-      if (host) {
-        modeling.updateAttachment(shape, host);
-      }
-    });
+  CommandStack.prototype._getRedoAction = function() {
+    return this._stack[this._stackIdx + 1];
+  };
 
-    // update attachments if the host is replaced
-    this.postExecute('shape.replace', function(e) {
 
-      var context = e.context,
-          oldShape = context.oldShape,
-          newShape = context.newShape;
+  CommandStack.prototype._getUndoAction = function() {
+    return this._stack[this._stackIdx];
+  };
 
-      // move the attachers to the new host
-      saveClear(oldShape.attachers, function(attacher) {
-        var allowed = rules.allowed('elements.move', {
-          target: newShape,
-          shapes: [ attacher ]
-        });
 
-        if (allowed === 'attach') {
-          modeling.updateAttachment(attacher, newShape);
-        } else {
-          modeling.removeShape(attacher);
-        }
-      });
+  // internal functionality //////////////////////
 
-      // move attachers if new host has different size
-      if (newShape.attachers.length) {
+  CommandStack.prototype._internalUndo = function(action) {
+    const command = action.command,
+          context = action.context;
 
-        forEach$1(newShape.attachers, function(attacher) {
-          var delta = getNewAttachShapeDelta(attacher, oldShape, newShape);
-          modeling.moveShape(attacher, delta, attacher.parent);
-        });
+    const handler = this._getHandler(command);
+
+    // guard against illegal nested command stack invocations
+    this._atomicDo(() => {
+      this._fire(command, 'revert', action);
+
+      if (handler.revert) {
+        this._markDirty(handler.revert(context));
       }
 
+      this._revertedAction(action);
+
+      this._fire(command, 'reverted', action);
     });
+  };
 
-    // move shape on host resize
-    this.postExecute('shape.resize', function(event) {
-      var context = event.context,
-          shape = context.shape,
-          oldBounds = context.oldBounds,
-          newBounds = context.newBounds,
-          attachers = shape.attachers,
-          hints = context.hints || {};
 
-      if (hints.attachSupport === false) {
-        return;
-      }
+  CommandStack.prototype._fire = function(command, qualifier, event) {
+    if (arguments.length < 3) {
+      event = qualifier;
+      qualifier = null;
+    }
 
-      forEach$1(attachers, function(attacher) {
-        var delta = getNewAttachShapeDelta(attacher, oldBounds, newBounds);
+    const names = qualifier ? [ command + '.' + qualifier, qualifier ] : [ command ];
+    let result;
 
-        modeling.moveShape(attacher, delta, attacher.parent);
+    event = this._eventBus.createEvent(event);
 
-        forEach$1(attacher.labels, function(label) {
-          modeling.moveShape(label, delta, label.parent);
-        });
-      });
-    });
+    for (const name of names) {
+      result = this._eventBus.fire('commandStack.' + name, event);
 
-    // remove attachments
-    this.preExecute('shape.delete', function(event) {
+      if (event.cancelBubble) {
+        break;
+      }
+    }
 
-      var shape = event.context.shape;
+    return result;
+  };
 
-      saveClear(shape.attachers, function(attacher) {
-        modeling.removeShape(attacher);
-      });
+  CommandStack.prototype._createId = function() {
+    return this._uid++;
+  };
 
-      if (shape.host) {
-        modeling.updateAttachment(shape, null);
-      }
-    });
-  }
+  CommandStack.prototype._atomicDo = function(fn) {
 
-  e(AttachSupport, CommandInterceptor);
+    const execution = this._currentExecution;
 
-  AttachSupport.$inject = [
-    'injector',
-    'eventBus',
-    'canvas',
-    'rules',
-    'modeling'
-  ];
+    execution.atomic = true;
 
+    try {
+      fn();
+    } finally {
+      execution.atomic = false;
+    }
+  };
 
-  /**
-   * Return attachers of the given shapes
-   *
-   * @param {Array<djs.model.Base>} shapes
-   * @return {Array<djs.model.Base>}
-   */
-  function getAttachers(shapes) {
-    return flatten(map$1(shapes, function(s) {
-      return s.attachers || [];
-    }));
-  }
+  CommandStack.prototype._internalExecute = function(action, redo) {
+    const command = action.command,
+          context = action.context;
 
-  /**
-   * Return a combined list of elements and
-   * attachers.
-   *
-   * @param {Array<djs.model.Base>} elements
-   * @return {Array<djs.model.Base>} filtered
-   */
-  function addAttached(elements) {
-    var attachers = getAttachers(elements);
+    const handler = this._getHandler(command);
 
-    return unionBy('id', elements, attachers);
-  }
+    if (!handler) {
+      throw new Error('no command handler registered for <' + command + '>');
+    }
 
-  /**
-   * Return a filtered list of elements that do not
-   * contain attached elements with hosts being part
-   * of the selection.
-   *
-   * @param  {Array<djs.model.Base>} elements
-   *
-   * @return {Array<djs.model.Base>} filtered
-   */
-  function removeAttached(elements) {
+    this._pushAction(action);
 
-    var ids = groupBy(elements, 'id');
+    if (!redo) {
+      this._fire(command, 'preExecute', action);
 
-    return filter(elements, function(element) {
-      while (element) {
+      if (handler.preExecute) {
+        handler.preExecute(context);
+      }
 
-        // host in selection
-        if (element.host && ids[element.host.id]) {
-          return false;
-        }
+      this._fire(command, 'preExecuted', action);
+    }
 
-        element = element.parent;
+    // guard against illegal nested command stack invocations
+    this._atomicDo(() => {
+
+      this._fire(command, 'execute', action);
+
+      if (handler.execute) {
+
+        // actual execute + mark return results as dirty
+        this._markDirty(handler.execute(context));
       }
 
-      return true;
+      // log to stack
+      this._executedAction(action, redo);
+
+      this._fire(command, 'executed', action);
     });
-  }
 
-  function isAttacher(shape) {
-    return !!shape.host;
-  }
+    if (!redo) {
+      this._fire(command, 'postExecute', action);
 
-  function includes$4(array, item) {
-    return array.indexOf(item) !== -1;
-  }
+      if (handler.postExecute) {
+        handler.postExecute(context);
+      }
 
-  var AttachSupportModule = {
-    __depends__: [
-      RulesModule$1
-    ],
-    __init__: [ 'attachSupport' ],
-    attachSupport: [ 'type', AttachSupport ]
-  };
+      this._fire(command, 'postExecuted', action);
+    }
 
-  var LOW_PRIORITY$4 = 250;
+    this._popAction(action);
+  };
 
-  /**
-   * The tool manager acts as middle-man between the available tool's and the Palette,
-   * it takes care of making sure that the correct active state is set.
-   *
-   * @param  {Object}    eventBus
-   * @param  {Object}    dragging
-   */
-  function ToolManager(eventBus, dragging) {
-    this._eventBus = eventBus;
-    this._dragging = dragging;
 
-    this._tools = [];
-    this._active = null;
-  }
+  CommandStack.prototype._pushAction = function(action) {
 
-  ToolManager.$inject = [ 'eventBus', 'dragging' ];
+    const execution = this._currentExecution,
+          actions = execution.actions;
 
-  ToolManager.prototype.registerTool = function(name, events) {
-    var tools = this._tools;
+    const baseAction = actions[0];
 
-    if (!events) {
-      throw new Error('A tool has to be registered with it\'s "events"');
+    if (execution.atomic) {
+      throw new Error('illegal invocation in <execute> or <revert> phase (action: ' + action.command + ')');
     }
 
-    tools.push(name);
+    if (!action.id) {
+      action.id = (baseAction && baseAction.id) || this._createId();
+    }
 
-    this.bindEvents(name, events);
+    actions.push(action);
   };
 
-  ToolManager.prototype.isActive = function(tool) {
-    return tool && this._active === tool;
+
+  CommandStack.prototype._popAction = function() {
+    const execution = this._currentExecution,
+          trigger = execution.trigger,
+          actions = execution.actions,
+          dirty = execution.dirty;
+
+    actions.pop();
+
+    if (!actions.length) {
+      this._eventBus.fire('elements.changed', { elements: uniqueBy('id', dirty.reverse()) });
+
+      dirty.length = 0;
+
+      this._fire('changed', { trigger: trigger });
+
+      execution.trigger = null;
+    }
   };
 
-  ToolManager.prototype.length = function(tool) {
-    return this._tools.length;
+
+  CommandStack.prototype._markDirty = function(elements) {
+    const execution = this._currentExecution;
+
+    if (!elements) {
+      return;
+    }
+
+    elements = isArray$3(elements) ? elements : [ elements ];
+
+    execution.dirty = execution.dirty.concat(elements);
   };
 
-  ToolManager.prototype.setActive = function(tool) {
-    var eventBus = this._eventBus;
 
-    if (this._active !== tool) {
-      this._active = tool;
+  CommandStack.prototype._executedAction = function(action, redo) {
+    const stackIdx = ++this._stackIdx;
 
-      eventBus.fire('tool-manager.update', { tool: tool });
+    if (!redo) {
+      this._stack.splice(stackIdx, this._stack.length, action);
     }
   };
 
-  ToolManager.prototype.bindEvents = function(name, events) {
-    var eventBus = this._eventBus,
-        dragging = this._dragging;
 
-    var eventsToRegister = [];
+  CommandStack.prototype._revertedAction = function(action) {
+    this._stackIdx--;
+  };
 
-    eventBus.on(events.tool + '.init', function(event) {
-      var context = event.context;
 
-      // Active tools that want to reactivate themselves must do this explicitly
-      if (!context.reactivate && this.isActive(name)) {
-        this.setActive(null);
+  CommandStack.prototype._getHandler = function(command) {
+    return this._handlerMap[command];
+  };
 
-        dragging.cancel();
-        return;
-      }
+  CommandStack.prototype._setHandler = function(command, handler) {
+    if (!command || !handler) {
+      throw new Error('command and handler required');
+    }
 
-      this.setActive(name);
+    if (this._handlerMap[command]) {
+      throw new Error('overriding handler for command <' + command + '>');
+    }
 
-    }, this);
+    this._handlerMap[command] = handler;
+  };
 
-    // Todo[ricardo]: add test cases
-    forEach$1(events, function(event) {
-      eventsToRegister.push(event + '.ended');
-      eventsToRegister.push(event + '.canceled');
-    });
+  var CommandModule = {
+    commandStack: [ 'type', CommandStack ]
+  };
 
-    eventBus.on(eventsToRegister, LOW_PRIORITY$4, function(event) {
+  // document wide unique tooltip ids
+  var ids = new IdGenerator('tt');
 
-      // We defer the de-activation of the tool to the .activate phase,
-      // so we're able to check if we want to toggle off the current
-      // active tool or switch to a new one
-      if (!this._active) {
-        return;
-      }
 
-      if (isPaletteClick(event)) {
-        return;
-      }
+  function createRoot(parentNode) {
+    var root = domify$1(
+      '<div class="djs-tooltip-container" />'
+    );
 
-      this.setActive(null);
-    }, this);
+    assign(root, {
+      position: 'absolute',
+      width: '0',
+      height: '0'
+    });
 
-  };
+    parentNode.insertBefore(root, parentNode.firstChild);
 
+    return root;
+  }
 
-  // helpers ///////////////
 
-  /**
-   * Check if a given event is a palette click event.
-   *
-   * @param {EventBus.Event} event
-   *
-   * @return {boolean}
-   */
-  function isPaletteClick(event) {
-    var target = event.originalEvent && event.originalEvent.target;
+  function setPosition(el, x, y) {
+    assign(el, { left: x + 'px', top: y + 'px' });
+  }
 
-    return target && closest(target, '.group[data-group="tools"]');
+  function setVisible(el, visible) {
+    el.style.display = visible === false ? 'none' : '';
   }
 
-  var ToolManagerModule = {
-    __depends__: [
-      DraggingModule
-    ],
-    __init__: [ 'toolManager' ],
-    toolManager: [ 'type', ToolManager ]
-  };
+
+  var tooltipClass = 'djs-tooltip',
+      tooltipSelector = '.' + tooltipClass;
 
   /**
-   * Return direction given axis and delta.
+   * A service that allows users to render tool tips on the diagram.
    *
-   * @param {string} axis
-   * @param {number} delta
+   * The tooltip service will take care of updating the tooltip positioning
+   * during navigation + zooming.
    *
-   * @return {string}
+   * @example
+   *
+   * ```javascript
+   *
+   * // add a pink badge on the top left of the shape
+   * tooltips.add({
+   *   position: {
+   *     x: 50,
+   *     y: 100
+   *   },
+   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
+   * });
+   *
+   * // or with optional life span
+   * tooltips.add({
+   *   position: {
+   *     top: -5,
+   *     left: -5
+   *   },
+   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>',
+   *   ttl: 2000
+   * });
+   *
+   * // remove a tool tip
+   * var id = tooltips.add(...);
+   * tooltips.remove(id);
+   * ```
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
    */
-  function getDirection(axis, delta) {
+  function Tooltips(eventBus, canvas) {
 
-    if (axis === 'x') {
-      if (delta > 0) {
-        return 'e';
-      }
+    this._eventBus = eventBus;
+    this._canvas = canvas;
 
-      if (delta < 0) {
-        return 'w';
-      }
-    }
+    this._ids = ids;
 
-    if (axis === 'y') {
-      if (delta > 0) {
-        return 's';
+    this._tooltipDefaults = {
+      show: {
+        minZoom: 0.7,
+        maxZoom: 5.0
       }
+    };
 
-      if (delta < 0) {
-        return 'n';
-      }
-    }
+    /**
+     * Mapping tooltipId -> tooltip
+     */
+    this._tooltips = {};
 
-    return null;
+    // root html element for all tooltips
+    this._tooltipRoot = createRoot(canvas.getContainer());
+
+
+    var self = this;
+
+    delegate.bind(this._tooltipRoot, tooltipSelector, 'mousedown', function(event) {
+      event.stopPropagation();
+    });
+
+    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseover', function(event) {
+      self.trigger('mouseover', event);
+    });
+
+    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseout', function(event) {
+      self.trigger('mouseout', event);
+    });
+
+    this._init();
   }
 
+
+  Tooltips.$inject = [ 'eventBus', 'canvas' ];
+
+
   /**
-   * Returns connections whose waypoints are to be updated. Waypoints are to be updated if start
-   * or end is to be moved or resized.
+   * Adds a HTML tooltip to the diagram
    *
-   * @param {Array<djs.model.Shape} movingShapes
-   * @param {Array<djs.model.Shape} resizingShapes
+   * @param {Object}               tooltip   the tooltip configuration
    *
-   * @returns {Array<djs.model.Connection>}
+   * @param {string|DOMElement}    tooltip.html                 html element to use as an tooltip
+   * @param {Object}               [tooltip.show]               show configuration
+   * @param {number}               [tooltip.show.minZoom]       minimal zoom level to show the tooltip
+   * @param {number}               [tooltip.show.maxZoom]       maximum zoom level to show the tooltip
+   * @param {Object}               tooltip.position             where to attach the tooltip
+   * @param {number}               [tooltip.position.left]      relative to element bbox left attachment
+   * @param {number}               [tooltip.position.top]       relative to element bbox top attachment
+   * @param {number}               [tooltip.position.bottom]    relative to element bbox bottom attachment
+   * @param {number}               [tooltip.position.right]     relative to element bbox right attachment
+   * @param {number}               [tooltip.timeout=-1]
+   *
+   * @return {string}              id that may be used to reference the tooltip for update or removal
    */
-  function getWaypointsUpdatingConnections(movingShapes, resizingShapes) {
-    var waypointsUpdatingConnections = [];
+  Tooltips.prototype.add = function(tooltip) {
 
-    forEach$1(movingShapes.concat(resizingShapes), function(shape) {
-      var incoming = shape.incoming,
-          outgoing = shape.outgoing;
+    if (!tooltip.position) {
+      throw new Error('must specifiy tooltip position');
+    }
 
-      forEach$1(incoming.concat(outgoing), function(connection) {
-        var source = connection.source,
-            target = connection.target;
+    if (!tooltip.html) {
+      throw new Error('must specifiy tooltip html');
+    }
 
-        if (includes$3(movingShapes, source) ||
-          includes$3(movingShapes, target) ||
-          includes$3(resizingShapes, source) ||
-          includes$3(resizingShapes, target)) {
+    var id = this._ids.next();
 
-          if (!includes$3(waypointsUpdatingConnections, connection)) {
-            waypointsUpdatingConnections.push(connection);
-          }
-        }
-      });
+    tooltip = assign$1({}, this._tooltipDefaults, tooltip, {
+      id: id
     });
 
-    return waypointsUpdatingConnections;
-  }
+    this._addTooltip(tooltip);
 
-  function includes$3(array, item) {
-    return array.indexOf(item) !== -1;
-  }
+    if (tooltip.timeout) {
+      this.setTimeout(tooltip);
+    }
+
+    return id;
+  };
+
+  Tooltips.prototype.trigger = function(action, event) {
+
+    var node = event.delegateTarget || event.target;
+
+    var tooltip = this.get(attr$1(node, 'data-tooltip-id'));
+
+    if (!tooltip) {
+      return;
+    }
+
+    if (action === 'mouseover' && tooltip.timeout) {
+      this.clearTimeout(tooltip);
+    }
+
+    if (action === 'mouseout' && tooltip.timeout) {
+
+      // cut timeout after mouse out
+      tooltip.timeout = 1000;
+
+      this.setTimeout(tooltip);
+    }
+  };
 
   /**
-   * Resize bounds.
-   *
-   * @param {Object} bounds
-   * @param {number} bounds.x
-   * @param {number} bounds.y
-   * @param {number} bounds.width
-   * @param {number} bounds.height
-   * @param {string} direction
-   * @param {Object} delta
-   * @param {number} delta.x
-   * @param {number} delta.y
+   * Get a tooltip with the given id
    *
-   * @return {Object}
+   * @param {string} id
    */
-  function resizeBounds(bounds, direction, delta) {
-    var x = bounds.x,
-        y = bounds.y,
-        width = bounds.width,
-        height = bounds.height,
-        dx = delta.x,
-        dy = delta.y;
+  Tooltips.prototype.get = function(id) {
 
-    switch (direction) {
-    case 'n':
-      return {
-        x: x,
-        y: y + dy,
-        width: width,
-        height: height - dy
-      };
-    case 's':
-      return {
-        x: x,
-        y: y,
-        width: width,
-        height: height + dy
-      };
-    case 'w':
-      return {
-        x: x + dx,
-        y: y,
-        width: width - dx,
-        height: height
-      };
-    case 'e':
-      return {
-        x: x,
-        y: y,
-        width: width + dx,
-        height: height
-      };
-    default:
-      throw new Error('unknown direction: ' + direction);
+    if (typeof id !== 'string') {
+      id = id.id;
+    }
+
+    return this._tooltips[id];
+  };
+
+  Tooltips.prototype.clearTimeout = function(tooltip) {
+
+    tooltip = this.get(tooltip);
+
+    if (!tooltip) {
+      return;
     }
-  }
 
-  var abs$1 = Math.abs,
-      round$4 = Math.round;
+    var removeTimer = tooltip.removeTimer;
 
-  var AXIS_TO_DIMENSION = {
-    x: 'width',
-    y: 'height'
+    if (removeTimer) {
+      clearTimeout(removeTimer);
+      tooltip.removeTimer = null;
+    }
   };
 
-  var CURSOR_CROSSHAIR = 'crosshair';
+  Tooltips.prototype.setTimeout = function(tooltip) {
 
-  var DIRECTION_TO_TRBL = {
-    n: 'top',
-    w: 'left',
-    s: 'bottom',
-    e: 'right'
-  };
+    tooltip = this.get(tooltip);
 
-  var HIGH_PRIORITY$3 = 1500;
+    if (!tooltip) {
+      return;
+    }
 
-  var DIRECTION_TO_OPPOSITE = {
-    n: 's',
-    w: 'e',
-    s: 'n',
-    e: 'w'
-  };
+    this.clearTimeout(tooltip);
 
-  var PADDING = 20;
+    var self = this;
 
+    tooltip.removeTimer = setTimeout(function() {
+      self.remove(tooltip);
+    }, tooltip.timeout);
+  };
 
   /**
-   * Add or remove space by moving and resizing elements.
+   * Remove an tooltip with the given id
    *
-   * @param {Canvas} canvas
-   * @param {Dragging} dragging
-   * @param {EventBus} eventBus
-   * @param {Modeling} modeling
-   * @param {Rules} rules
-   * @param {ToolManager} toolManager
-   * @param {Mouse} mouse
+   * @param {string} id
    */
-  function SpaceTool(
-      canvas, dragging, eventBus,
-      modeling, rules, toolManager,
-      mouse) {
-
-    this._canvas = canvas;
-    this._dragging = dragging;
-    this._eventBus = eventBus;
-    this._modeling = modeling;
-    this._rules = rules;
-    this._toolManager = toolManager;
-    this._mouse = mouse;
-
-    var self = this;
+  Tooltips.prototype.remove = function(id) {
 
-    toolManager.registerTool('space', {
-      tool: 'spaceTool.selection',
-      dragging: 'spaceTool'
-    });
+    var tooltip = this.get(id);
 
-    eventBus.on('spaceTool.selection.end', function(event) {
-      eventBus.once('spaceTool.selection.ended', function() {
-        self.activateMakeSpace(event.originalEvent);
-      });
-    });
+    if (tooltip) {
+      remove$2(tooltip.html);
+      remove$2(tooltip.htmlContainer);
 
-    eventBus.on('spaceTool.move', HIGH_PRIORITY$3 , function(event) {
-      var context = event.context,
-          initialized = context.initialized;
+      delete tooltip.htmlContainer;
 
-      if (!initialized) {
-        initialized = context.initialized = self.init(event, context);
-      }
+      delete this._tooltips[tooltip.id];
+    }
+  };
 
-      if (initialized) {
-        ensureConstraints(event);
-      }
-    });
 
-    eventBus.on('spaceTool.end', function(event) {
-      var context = event.context,
-          axis = context.axis,
-          direction = context.direction,
-          movingShapes = context.movingShapes,
-          resizingShapes = context.resizingShapes,
-          start = context.start;
+  Tooltips.prototype.show = function() {
+    setVisible(this._tooltipRoot);
+  };
 
-      if (!context.initialized) {
-        return;
-      }
 
-      ensureConstraints(event);
+  Tooltips.prototype.hide = function() {
+    setVisible(this._tooltipRoot, false);
+  };
 
-      var delta = {
-        x: 0,
-        y: 0
-      };
 
-      delta[ axis ] = round$4(event[ 'd' + axis ]);
+  Tooltips.prototype._updateRoot = function(viewbox) {
+    var a = viewbox.scale || 1;
+    var d = viewbox.scale || 1;
 
-      self.makeSpace(movingShapes, resizingShapes, delta, direction, start);
+    var matrix = 'matrix(' + a + ',0,0,' + d + ',' + (-1 * viewbox.x * a) + ',' + (-1 * viewbox.y * d) + ')';
 
-      eventBus.once('spaceTool.ended', function(event) {
+    this._tooltipRoot.style.transform = matrix;
+    this._tooltipRoot.style['-ms-transform'] = matrix;
+  };
 
-        // activate space tool selection after make space
-        self.activateSelection(event.originalEvent, true, true);
-      });
-    });
-  }
 
-  SpaceTool.$inject = [
-    'canvas',
-    'dragging',
-    'eventBus',
-    'modeling',
-    'rules',
-    'toolManager',
-    'mouse'
-  ];
+  Tooltips.prototype._addTooltip = function(tooltip) {
 
-  /**
-   * Activate space tool selection.
-   *
-   * @param {Object} event
-   * @param {boolean} autoActivate
-   */
-  SpaceTool.prototype.activateSelection = function(event, autoActivate, reactivate) {
-    this._dragging.init(event, 'spaceTool.selection', {
-      autoActivate: autoActivate,
-      cursor: CURSOR_CROSSHAIR,
-      data: {
-        context: {
-          reactivate: reactivate
-        }
-      },
-      trapClick: false
-    });
-  };
+    var id = tooltip.id,
+        html = tooltip.html,
+        htmlContainer,
+        tooltipRoot = this._tooltipRoot;
 
-  /**
-   * Activate space tool make space.
-   *
-   * @param  {MouseEvent} event
-   */
-  SpaceTool.prototype.activateMakeSpace = function(event) {
-    this._dragging.init(event, 'spaceTool', {
-      autoActivate: true,
-      cursor: CURSOR_CROSSHAIR,
-      data: {
-        context: {}
-      }
-    });
-  };
+    // unwrap jquery (for those who need it)
+    if (html.get && html.constructor.prototype.jquery) {
+      html = html.get(0);
+    }
 
-  /**
-   * Make space.
-   *
-   * @param  {Array<djs.model.Shape>} movingShapes
-   * @param  {Array<djs.model.Shape>} resizingShapes
-   * @param  {Object} delta
-   * @param  {number} delta.x
-   * @param  {number} delta.y
-   * @param  {string} direction
-   * @param  {number} start
-   */
-  SpaceTool.prototype.makeSpace = function(movingShapes, resizingShapes, delta, direction, start) {
-    return this._modeling.createSpace(movingShapes, resizingShapes, delta, direction, start);
-  };
+    // create proper html elements from
+    // tooltip HTML strings
+    if (isString(html)) {
+      html = domify$1(html);
+    }
 
-  /**
-   * Initialize make space and return true if that was successful.
-   *
-   * @param {Object} event
-   * @param {Object} context
-   *
-   * @return {boolean}
-   */
-  SpaceTool.prototype.init = function(event, context) {
-    var axis = abs$1(event.dx) > abs$1(event.dy) ? 'x' : 'y',
-        delta = event[ 'd' + axis ],
-        start = event[ axis ] - delta;
+    htmlContainer = domify$1('<div data-tooltip-id="' + id + '" class="' + tooltipClass + '">');
+    assign(htmlContainer, { position: 'absolute' });
 
-    if (abs$1(delta) < 5) {
-      return false;
-    }
+    htmlContainer.appendChild(html);
 
-    // invert delta to remove space when moving left
-    if (delta < 0) {
-      delta *= -1;
+    if (tooltip.type) {
+      classes$1(htmlContainer).add('djs-tooltip-' + tooltip.type);
     }
 
-    // invert delta to add/remove space when removing/adding space if modifier key is pressed
-    if (hasPrimaryModifier(event)) {
-      delta *= -1;
+    if (tooltip.className) {
+      classes$1(htmlContainer).add(tooltip.className);
     }
 
-    var direction = getDirection(axis, delta);
+    tooltip.htmlContainer = htmlContainer;
 
-    var root = this._canvas.getRootElement();
+    tooltipRoot.appendChild(htmlContainer);
 
-    var children = selfAndAllChildren(root, true);
+    this._tooltips[id] = tooltip;
 
-    var elements = this.calculateAdjustments(children, axis, delta, start);
+    this._updateTooltip(tooltip);
+  };
 
-    var minDimensions = this._eventBus.fire('spaceTool.getMinDimensions', {
-      axis: axis,
-      direction: direction,
-      shapes: elements.resizingShapes,
-      start: start
-    });
 
-    var spaceToolConstraints = getSpaceToolConstraints(elements, axis, direction, start, minDimensions);
+  Tooltips.prototype._updateTooltip = function(tooltip) {
 
-    assign$1(
-      context,
-      elements,
-      {
-        axis: axis,
-        direction: direction,
-        spaceToolConstraints: spaceToolConstraints,
-        start: start
-      }
-    );
+    var position = tooltip.position,
+        htmlContainer = tooltip.htmlContainer;
 
-    set('resize-' + (axis === 'x' ? 'ew' : 'ns'));
+    // update overlay html based on tooltip x, y
 
-    return true;
+    setPosition(htmlContainer, position.x, position.y);
   };
 
-  /**
-   * Get elements to be moved and resized.
-   *
-   * @param  {Array<djs.model.Shape>} elements
-   * @param  {string} axis
-   * @param  {number} delta
-   * @param  {number} start
-   *
-   * @return {Object}
-   */
-  SpaceTool.prototype.calculateAdjustments = function(elements, axis, delta, start) {
-    var rules = this._rules;
 
-    var movingShapes = [],
-        resizingShapes = [];
+  Tooltips.prototype._updateTooltipVisibilty = function(viewbox) {
 
-    forEach$1(elements, function(element) {
-      if (!element.parent || isConnection$7(element)) {
-        return;
-      }
+    forEach$1(this._tooltips, function(tooltip) {
+      var show = tooltip.show,
+          htmlContainer = tooltip.htmlContainer,
+          visible = true;
 
-      var shapeStart = element[ axis ],
-          shapeEnd = shapeStart + element[ AXIS_TO_DIMENSION[ axis ] ];
+      if (show) {
+        if (show.minZoom > viewbox.scale ||
+            show.maxZoom < viewbox.scale) {
+          visible = false;
+        }
 
-      // shape to be moved
-      if ((delta > 0 && shapeStart > start) || (delta < 0 && shapeEnd < start)) {
-        return movingShapes.push(element);
+        setVisible(htmlContainer, visible);
       }
+    });
+  };
 
-      // shape to be resized
-      if (shapeStart < start &&
-        shapeEnd > start &&
-        rules.allowed('shape.resize', { shape: element })
-      ) {
+  Tooltips.prototype._init = function() {
 
-        return resizingShapes.push(element);
-      }
-    });
+    var self = this;
 
-    return {
-      movingShapes: movingShapes,
-      resizingShapes: resizingShapes
-    };
-  };
+    // scroll/zoom integration
 
-  SpaceTool.prototype.toggle = function() {
+    function updateViewbox(viewbox) {
+      self._updateRoot(viewbox);
+      self._updateTooltipVisibilty(viewbox);
 
-    if (this.isActive()) {
-      return this._dragging.cancel();
+      self.show();
     }
 
-    var mouseEvent = this._mouse.getLastMoveEvent();
+    this._eventBus.on('canvas.viewbox.changing', function(event) {
+      self.hide();
+    });
 
-    this.activateSelection(mouseEvent, !!mouseEvent);
+    this._eventBus.on('canvas.viewbox.changed', function(event) {
+      updateViewbox(event.viewbox);
+    });
   };
 
-  SpaceTool.prototype.isActive = function() {
-    var context = this._dragging.context();
-
-    return context && /^spaceTool/.test(context.prefix);
+  var TooltipsModule = {
+    __init__: [ 'tooltips' ],
+    tooltips: [ 'type', Tooltips ]
   };
 
-  // helpers //////////
-
-  function addPadding(trbl) {
-    return {
-      top: trbl.top - PADDING,
-      right: trbl.right + PADDING,
-      bottom: trbl.bottom + PADDING,
-      left: trbl.left - PADDING
-    };
-  }
+  /**
+   * Remove from the beginning of a collection until it is empty.
+   *
+   * This is a null-safe operation that ensures elements
+   * are being removed from the given collection until the
+   * collection is empty.
+   *
+   * The implementation deals with the fact that a remove operation
+   * may touch, i.e. remove multiple elements in the collection
+   * at a time.
+   *
+   * @param {Array<Object>} [collection]
+   * @param {Function} removeFn
+   *
+   * @return {Array<Object>} the cleared collection
+   */
+  function saveClear(collection, removeFn) {
 
-  function ensureConstraints(event) {
-    var context = event.context,
-        spaceToolConstraints = context.spaceToolConstraints;
+    if (typeof removeFn !== 'function') {
+      throw new Error('removeFn iterator must be a function');
+    }
 
-    if (!spaceToolConstraints) {
+    if (!collection) {
       return;
     }
 
-    var x, y;
-
-    if (isNumber(spaceToolConstraints.left)) {
-      x = Math.max(event.x, spaceToolConstraints.left);
+    var e;
 
-      event.dx = event.dx + x - event.x;
-      event.x = x;
+    while ((e = collection[0])) {
+      removeFn(e);
     }
 
-    if (isNumber(spaceToolConstraints.right)) {
-      x = Math.min(event.x, spaceToolConstraints.right);
+    return collection;
+  }
 
-      event.dx = event.dx + x - event.x;
-      event.x = x;
-    }
+  var LOW_PRIORITY$4 = 250,
+      HIGH_PRIORITY$4 = 1400;
 
-    if (isNumber(spaceToolConstraints.top)) {
-      y = Math.max(event.y, spaceToolConstraints.top);
 
-      event.dy = event.dy + y - event.y;
-      event.y = y;
-    }
+  /**
+   * A handler that makes sure labels are properly moved with
+   * their label targets.
+   *
+   * @param {didi.Injector} injector
+   * @param {EventBus} eventBus
+   * @param {Modeling} modeling
+   */
+  function LabelSupport(injector, eventBus, modeling) {
 
-    if (isNumber(spaceToolConstraints.bottom)) {
-      y = Math.min(event.y, spaceToolConstraints.bottom);
+    CommandInterceptor.call(this, eventBus);
 
-      event.dy = event.dy + y - event.y;
-      event.y = y;
-    }
-  }
+    var movePreview = injector.get('movePreview', false);
 
-  function getSpaceToolConstraints(elements, axis, direction, start, minDimensions) {
-    var movingShapes = elements.movingShapes,
-        resizingShapes = elements.resizingShapes;
+    // remove labels from the collection that are being
+    // moved with other elements anyway
+    eventBus.on('shape.move.start', HIGH_PRIORITY$4, function(e) {
 
-    if (!resizingShapes.length) {
-      return;
-    }
+      var context = e.context,
+          shapes = context.shapes,
+          validatedShapes = context.validatedShapes;
 
-    var spaceToolConstraints = {},
-        min,
-        max;
+      context.shapes = removeLabels(shapes);
+      context.validatedShapes = removeLabels(validatedShapes);
+    });
 
-    forEach$1(resizingShapes, function(resizingShape) {
-      var resizingShapeBBox = asTRBL(resizingShape);
+    // add labels to visual's group
+    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$4, function(e) {
 
-      // find children that are not moving or resizing
-      var nonMovingResizingChildren = filter(resizingShape.children, function(child) {
-        return !isConnection$7(child) &&
-          !isLabel$2(child) &&
-          !includes$2(movingShapes, child) &&
-          !includes$2(resizingShapes, child);
+      var context = e.context,
+          shapes = context.shapes;
+
+      var labels = [];
+
+      forEach$1(shapes, function(element) {
+
+        forEach$1(element.labels, function(label) {
+
+          if (!label.hidden && context.shapes.indexOf(label) === -1) {
+            labels.push(label);
+          }
+
+          if (element.labelTarget) {
+            labels.push(element);
+          }
+        });
       });
 
-      // find children that are moving
-      var movingChildren = filter(resizingShape.children, function(child) {
-        return !isConnection$7(child) && !isLabel$2(child) && includes$2(movingShapes, child);
+      forEach$1(labels, function(label) {
+        movePreview.makeDraggable(context, label, true);
       });
 
-      var minOrMax,
-          nonMovingResizingChildrenBBox,
-          movingChildrenBBox;
+    });
 
-      if (nonMovingResizingChildren.length) {
-        nonMovingResizingChildrenBBox = addPadding(asTRBL(getBBox(nonMovingResizingChildren)));
+    // add all labels to move closure
+    this.preExecuted('elements.move', HIGH_PRIORITY$4, function(e) {
+      var context = e.context,
+          closure = context.closure,
+          enclosedElements = closure.enclosedElements;
 
-        minOrMax = start -
-          resizingShapeBBox[ DIRECTION_TO_TRBL[ direction ] ] +
-          nonMovingResizingChildrenBBox[ DIRECTION_TO_TRBL[ direction ] ];
+      var enclosedLabels = [];
 
-        if (direction === 'n') {
-          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
-        } else if (direction === 'w') {
-          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
-        } else if (direction === 's') {
-          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
-        } else if (direction === 'e') {
-          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
-        }
-      }
+      // find labels that are not part of
+      // move closure yet and add them
+      forEach$1(enclosedElements, function(element) {
+        forEach$1(element.labels, function(label) {
 
-      if (movingChildren.length) {
-        movingChildrenBBox = addPadding(asTRBL(getBBox(movingChildren)));
+          if (!enclosedElements[label.id]) {
+            enclosedLabels.push(label);
+          }
+        });
+      });
 
-        minOrMax = start -
-          movingChildrenBBox[ DIRECTION_TO_TRBL[ DIRECTION_TO_OPPOSITE[ direction ] ] ] +
-          resizingShapeBBox[ DIRECTION_TO_TRBL[ DIRECTION_TO_OPPOSITE[ direction ] ] ];
+      closure.addAll(enclosedLabels);
+    });
 
-        if (direction === 'n') {
-          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
-        } else if (direction === 'w') {
-          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
-        } else if (direction === 's') {
-          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
-        } else if (direction === 'e') {
-          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
-        }
-      }
 
-      var resizingShapeMinDimensions = minDimensions && minDimensions[ resizingShape.id ];
+    this.preExecute([
+      'connection.delete',
+      'shape.delete'
+    ], function(e) {
+
+      var context = e.context,
+          element = context.connection || context.shape;
+
+      saveClear(element.labels, function(label) {
+        modeling.removeShape(label, { nested: true });
+      });
+    });
+
+
+    this.execute('shape.delete', function(e) {
+
+      var context = e.context,
+          shape = context.shape,
+          labelTarget = shape.labelTarget;
+
+      // unset labelTarget
+      if (labelTarget) {
+        context.labelTargetIndex = indexOf(labelTarget.labels, shape);
+        context.labelTarget = labelTarget;
 
-      if (resizingShapeMinDimensions) {
-        if (direction === 'n') {
-          minOrMax = start +
-            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] -
-            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];
+        shape.labelTarget = null;
+      }
+    });
 
-          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
-        } else if (direction === 'w') {
-          minOrMax = start +
-            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] -
-            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];
+    this.revert('shape.delete', function(e) {
 
-          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
-        } else if (direction === 's') {
-          minOrMax = start -
-            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] +
-            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];
+      var context = e.context,
+          shape = context.shape,
+          labelTarget = context.labelTarget,
+          labelTargetIndex = context.labelTargetIndex;
 
-          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
-        } else if (direction === 'e') {
-          minOrMax = start -
-            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] +
-            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];
+      // restore labelTarget
+      if (labelTarget) {
+        add(labelTarget.labels, shape, labelTargetIndex);
 
-          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
-        }
+        shape.labelTarget = labelTarget;
       }
     });
 
-    return spaceToolConstraints;
   }
 
-  function includes$2(array, item) {
-    return array.indexOf(item) !== -1;
-  }
+  e(LabelSupport, CommandInterceptor);
 
-  function isConnection$7(element) {
-    return !!element.waypoints;
-  }
+  LabelSupport.$inject = [
+    'injector',
+    'eventBus',
+    'modeling'
+  ];
 
-  function isLabel$2(element) {
-    return !!element.labelTarget;
+
+  /**
+   * Return a filtered list of elements that do not
+   * contain attached elements with hosts being part
+   * of the selection.
+   *
+   * @param  {Array<djs.model.Base>} elements
+   *
+   * @return {Array<djs.model.Base>} filtered
+   */
+  function removeLabels(elements) {
+
+    return filter(elements, function(element) {
+
+      // filter out labels that are move together
+      // with their label targets
+      return elements.indexOf(element.labelTarget) === -1;
+    });
   }
 
-  var MARKER_DRAGGING$1 = 'djs-dragging',
-      MARKER_RESIZING = 'djs-resizing';
+  var LabelSupportModule = {
+    __init__: [ 'labelSupport' ],
+    labelSupport: [ 'type', LabelSupport ]
+  };
 
-  var LOW_PRIORITY$3 = 250;
+  var LOW_PRIORITY$3 = 251,
+      HIGH_PRIORITY$3 = 1401;
 
-  var max = Math.max;
+  var MARKER_ATTACH$1 = 'attach-ok';
 
 
   /**
-   * Provides previews for selecting/moving/resizing shapes when creating/removing space.
+   * Adds the notion of attached elements to the modeler.
+   *
+   * Optionally depends on `diagram-js/lib/features/move` to render
+   * the attached elements during move preview.
+   *
+   * Optionally depends on `diagram-js/lib/features/label-support`
+   * to render attached labels during move preview.
    *
+   * @param {didi.Injector} injector
    * @param {EventBus} eventBus
-   * @param {ElementRegistry} elementRegistry
    * @param {Canvas} canvas
-   * @param {Styles} styles
+   * @param {Rules} rules
+   * @param {Modeling} modeling
    */
-  function SpaceToolPreview(
-      eventBus, elementRegistry, canvas,
-      styles, previewSupport) {
+  function AttachSupport(injector, eventBus, canvas, rules, modeling) {
 
-    function addPreviewGfx(collection, dragGroup) {
-      forEach$1(collection, function(element) {
-        previewSupport.addDragger(element, dragGroup);
+    CommandInterceptor.call(this, eventBus);
 
-        canvas.addMarker(element, MARKER_DRAGGING$1);
-      });
-    }
+    var movePreview = injector.get('movePreview', false);
 
-    // add crosshair
-    eventBus.on('spaceTool.selection.start', function(event) {
-      var space = canvas.getLayer('space'),
-          context = event.context;
 
-      var orientation = {
-        x: 'M 0,-10000 L 0,10000',
-        y: 'M -10000,0 L 10000,0'
-      };
+    // remove all the attached elements from the shapes to be validated
+    // add all the attached shapes to the overall list of moved shapes
+    eventBus.on('shape.move.start', HIGH_PRIORITY$3, function(e) {
 
-      var crosshairGroup = create$1('g');
-      attr(crosshairGroup, styles.cls('djs-crosshair-group', [ 'no-events' ]));
+      var context = e.context,
+          shapes = context.shapes,
+          validatedShapes = context.validatedShapes;
 
-      append(space, crosshairGroup);
+      context.shapes = addAttached(shapes);
 
-      // horizontal path
-      var pathX = create$1('path');
-      attr(pathX, 'd', orientation.x);
-      classes(pathX).add('djs-crosshair');
+      context.validatedShapes = removeAttached(validatedShapes);
+    });
 
-      append(crosshairGroup, pathX);
+    // add attachers to the visual's group
+    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$3, function(e) {
 
-      // vertical path
-      var pathY = create$1('path');
-      attr(pathY, 'd', orientation.y);
-      classes(pathY).add('djs-crosshair');
+      var context = e.context,
+          shapes = context.shapes,
+          attachers = getAttachers(shapes);
 
-      append(crosshairGroup, pathY);
+      forEach$1(attachers, function(attacher) {
+        movePreview.makeDraggable(context, attacher, true);
 
-      context.crosshairGroup = crosshairGroup;
+        forEach$1(attacher.labels, function(label) {
+          movePreview.makeDraggable(context, label, true);
+        });
+      });
     });
 
-    // update crosshair
-    eventBus.on('spaceTool.selection.move', function(event) {
-      var crosshairGroup = event.context.crosshairGroup;
+    // add attach-ok marker to current host
+    movePreview && eventBus.on('shape.move.start', function(event) {
+      var context = event.context,
+          shapes = context.shapes;
 
-      translate$2(crosshairGroup, event.x, event.y);
-    });
+      if (shapes.length !== 1) {
+        return;
+      }
 
-    // remove crosshair
-    eventBus.on('spaceTool.selection.cleanup', function(event) {
-      var context = event.context,
-          crosshairGroup = context.crosshairGroup;
+      var shape = shapes[0];
 
-      if (crosshairGroup) {
-        remove$1(crosshairGroup);
+      var host = shape.host;
+
+      if (host) {
+        canvas.addMarker(host, MARKER_ATTACH$1);
+
+        eventBus.once([
+          'shape.move.out',
+          'shape.move.cleanup'
+        ], function() {
+          canvas.removeMarker(host, MARKER_ATTACH$1);
+        });
       }
     });
 
-    // add and update move/resize previews
-    eventBus.on('spaceTool.move', LOW_PRIORITY$3, function(event) {
+    // add all attachers to move closure
+    this.preExecuted('elements.move', HIGH_PRIORITY$3, function(e) {
+      var context = e.context,
+          closure = context.closure,
+          shapes = context.shapes,
+          attachers = getAttachers(shapes);
 
-      var context = event.context,
-          line = context.line,
-          axis = context.axis,
-          movingShapes = context.movingShapes,
-          resizingShapes = context.resizingShapes;
+      forEach$1(attachers, function(attacher) {
+        closure.add(attacher, closure.topLevel[attacher.host.id]);
+      });
+    });
 
-      if (!context.initialized) {
+    // perform the attaching after shapes are done moving
+    this.postExecuted('elements.move', function(e) {
+
+      var context = e.context,
+          shapes = context.shapes,
+          newHost = context.newHost,
+          attachers;
+
+      // only single elements can be attached
+      // multiply elements can be detached
+      if (newHost && shapes.length !== 1) {
         return;
       }
 
-      if (!context.dragGroup) {
-        var spaceLayer = canvas.getLayer('space');
+      if (newHost) {
+        attachers = shapes;
+      } else {
 
-        line = create$1('path');
-        attr(line, 'd', 'M0,0 L0,0');
-        classes(line).add('djs-crosshair');
+        // find attachers moved without host
+        attachers = filter(shapes, function(shape) {
+          var host = shape.host;
 
-        append(spaceLayer, line);
+          return isAttacher(shape) && !includes$2(shapes, host);
+        });
+      }
 
-        context.line = line;
+      forEach$1(attachers, function(attacher) {
+        modeling.updateAttachment(attacher, newHost);
+      });
+    });
 
-        var dragGroup = create$1('g');
-        attr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));
+    // ensure invalid attachment connections are removed
+    this.postExecuted('elements.move', function(e) {
 
-        append(canvas.getActiveLayer(), dragGroup);
+      var shapes = e.context.shapes;
 
-        // shapes
-        addPreviewGfx(movingShapes, dragGroup);
+      forEach$1(shapes, function(shape) {
 
-        // connections
-        var movingConnections = context.movingConnections = elementRegistry.filter(function(element) {
-          var sourceIsMoving = false;
+        forEach$1(shape.attachers, function(attacher) {
 
-          forEach$1(movingShapes, function(shape) {
-            forEach$1(shape.outgoing, function(connection) {
-              if (element === connection) {
-                sourceIsMoving = true;
-              }
+          // remove invalid outgoing connections
+          forEach$1(attacher.outgoing.slice(), function(connection) {
+            var allowed = rules.allowed('connection.reconnect', {
+              connection: connection,
+              source: connection.source,
+              target: connection.target
             });
-          });
-
-          var targetIsMoving = false;
 
-          forEach$1(movingShapes, function(shape) {
-            forEach$1(shape.incoming, function(connection) {
-              if (element === connection) {
-                targetIsMoving = true;
-              }
-            });
+            if (!allowed) {
+              modeling.removeConnection(connection);
+            }
           });
 
-          var sourceIsResizing = false;
-
-          forEach$1(resizingShapes, function(shape) {
-            forEach$1(shape.outgoing, function(connection) {
-              if (element === connection) {
-                sourceIsResizing = true;
-              }
+          // remove invalid incoming connections
+          forEach$1(attacher.incoming.slice(), function(connection) {
+            var allowed = rules.allowed('connection.reconnect', {
+              connection: connection,
+              source: connection.source,
+              target: connection.target
             });
-          });
-
-          var targetIsResizing = false;
 
-          forEach$1(resizingShapes, function(shape) {
-            forEach$1(shape.incoming, function(connection) {
-              if (element === connection) {
-                targetIsResizing = true;
-              }
-            });
+            if (!allowed) {
+              modeling.removeConnection(connection);
+            }
           });
-
-          return isConnection$6(element)
-            && (sourceIsMoving || sourceIsResizing)
-            && (targetIsMoving || targetIsResizing);
         });
+      });
+    });
 
+    this.postExecute('shape.create', function(e) {
+      var context = e.context,
+          shape = context.shape,
+          host = context.host;
 
-        addPreviewGfx(movingConnections, dragGroup);
-
-        context.dragGroup = dragGroup;
+      if (host) {
+        modeling.updateAttachment(shape, host);
       }
+    });
 
-      if (!context.frameGroup) {
-        var frameGroup = create$1('g');
-        attr(frameGroup, styles.cls('djs-frame-group', [ 'no-events' ]));
-
-        append(canvas.getActiveLayer(), frameGroup);
+    // update attachments if the host is replaced
+    this.postExecute('shape.replace', function(e) {
 
-        var frames = [];
+      var context = e.context,
+          oldShape = context.oldShape,
+          newShape = context.newShape;
 
-        forEach$1(resizingShapes, function(shape) {
-          var frame = previewSupport.addFrame(shape, frameGroup);
+      // move the attachers to the new host
+      saveClear(oldShape.attachers, function(attacher) {
+        var allowed = rules.allowed('elements.move', {
+          target: newShape,
+          shapes: [ attacher ]
+        });
 
-          var initialBounds = frame.getBBox();
+        if (allowed === 'attach') {
+          modeling.updateAttachment(attacher, newShape);
+        } else {
+          modeling.removeShape(attacher);
+        }
+      });
 
-          frames.push({
-            element: frame,
-            initialBounds: initialBounds
-          });
+      // move attachers if new host has different size
+      if (newShape.attachers.length) {
 
-          canvas.addMarker(shape, MARKER_RESIZING);
+        forEach$1(newShape.attachers, function(attacher) {
+          var delta = getNewAttachShapeDelta(attacher, oldShape, newShape);
+          modeling.moveShape(attacher, delta, attacher.parent);
         });
-
-        context.frameGroup = frameGroup;
-        context.frames = frames;
       }
 
-      var orientation = {
-        x: 'M' + event.x + ', -10000 L' + event.x + ', 10000',
-        y: 'M -10000, ' + event.y + ' L 10000, ' + event.y
-      };
-
-      attr(line, { d: orientation[ axis ] });
-
-      var opposite = { x: 'y', y: 'x' };
-      var delta = { x: event.dx, y: event.dy };
-      delta[ opposite[ context.axis ] ] = 0;
-
-      // update move previews
-      translate$2(context.dragGroup, delta.x, delta.y);
+    });
 
-      // update resize previews
-      forEach$1(context.frames, function(frame) {
-        var element = frame.element,
-            initialBounds = frame.initialBounds,
-            width,
-            height;
+    // move shape on host resize
+    this.postExecute('shape.resize', function(event) {
+      var context = event.context,
+          shape = context.shape,
+          oldBounds = context.oldBounds,
+          newBounds = context.newBounds,
+          attachers = shape.attachers,
+          hints = context.hints || {};
 
-        if (context.direction === 'e') {
-          attr(element, {
-            width: max(initialBounds.width + delta.x, 5)
-          });
-        } else {
-          width = max(initialBounds.width - delta.x, 5);
+      if (hints.attachSupport === false) {
+        return;
+      }
 
-          attr(element, {
-            width: width,
-            x: initialBounds.x + initialBounds.width - width
-          });
-        }
+      forEach$1(attachers, function(attacher) {
+        var delta = getNewAttachShapeDelta(attacher, oldBounds, newBounds);
 
-        if (context.direction === 's') {
-          attr(element, {
-            height: max(initialBounds.height + delta.y, 5)
-          });
-        } else {
-          height = max(initialBounds.height - delta.y, 5);
+        modeling.moveShape(attacher, delta, attacher.parent);
 
-          attr(element, {
-            height: height,
-            y: initialBounds.y + initialBounds.height - height
-          });
-        }
+        forEach$1(attacher.labels, function(label) {
+          modeling.moveShape(label, delta, label.parent);
+        });
       });
-
     });
 
-    // remove move/resize previews
-    eventBus.on('spaceTool.cleanup', function(event) {
-
-      var context = event.context,
-          movingShapes = context.movingShapes,
-          movingConnections = context.movingConnections,
-          resizingShapes = context.resizingShapes,
-          line = context.line,
-          dragGroup = context.dragGroup,
-          frameGroup = context.frameGroup;
-
-      // moving shapes
-      forEach$1(movingShapes, function(shape) {
-        canvas.removeMarker(shape, MARKER_DRAGGING$1);
-      });
-
-      // moving connections
-      forEach$1(movingConnections, function(connection) {
-        canvas.removeMarker(connection, MARKER_DRAGGING$1);
-      });
+    // remove attachments
+    this.preExecute('shape.delete', function(event) {
 
-      if (dragGroup) {
-        remove$1(line);
-        remove$1(dragGroup);
-      }
+      var shape = event.context.shape;
 
-      forEach$1(resizingShapes, function(shape) {
-        canvas.removeMarker(shape, MARKER_RESIZING);
+      saveClear(shape.attachers, function(attacher) {
+        modeling.removeShape(attacher);
       });
 
-      if (frameGroup) {
-        remove$1(frameGroup);
+      if (shape.host) {
+        modeling.updateAttachment(shape, null);
       }
     });
   }
 
-  SpaceToolPreview.$inject = [
+  e(AttachSupport, CommandInterceptor);
+
+  AttachSupport.$inject = [
+    'injector',
     'eventBus',
-    'elementRegistry',
     'canvas',
-    'styles',
-    'previewSupport'
+    'rules',
+    'modeling'
   ];
 
 
-  // helpers //////////////////////
+  /**
+   * Return attachers of the given shapes
+   *
+   * @param {Array<djs.model.Base>} shapes
+   * @return {Array<djs.model.Base>}
+   */
+  function getAttachers(shapes) {
+    return flatten(map$1(shapes, function(s) {
+      return s.attachers || [];
+    }));
+  }
 
   /**
-   * Checks if an element is a connection.
+   * Return a combined list of elements and
+   * attachers.
+   *
+   * @param {Array<djs.model.Base>} elements
+   * @return {Array<djs.model.Base>} filtered
    */
-  function isConnection$6(element) {
-    return element.waypoints;
+  function addAttached(elements) {
+    var attachers = getAttachers(elements);
+
+    return unionBy('id', elements, attachers);
   }
 
-  var SpaceToolModule = {
-    __init__: [ 'spaceToolPreview' ],
+  /**
+   * Return a filtered list of elements that do not
+   * contain attached elements with hosts being part
+   * of the selection.
+   *
+   * @param  {Array<djs.model.Base>} elements
+   *
+   * @return {Array<djs.model.Base>} filtered
+   */
+  function removeAttached(elements) {
+
+    var ids = groupBy(elements, 'id');
+
+    return filter(elements, function(element) {
+      while (element) {
+
+        // host in selection
+        if (element.host && ids[element.host.id]) {
+          return false;
+        }
+
+        element = element.parent;
+      }
+
+      return true;
+    });
+  }
+
+  function isAttacher(shape) {
+    return !!shape.host;
+  }
+
+  function includes$2(array, item) {
+    return array.indexOf(item) !== -1;
+  }
+
+  var AttachSupportModule = {
     __depends__: [
-      DraggingModule,
-      RulesModule$1,
-      ToolManagerModule,
-      PreviewSupportModule,
-      MouseModule
+      RulesModule$1
     ],
-    spaceTool: [ 'type', SpaceTool ],
-    spaceToolPreview: [ 'type', SpaceToolPreview ]
+    __init__: [ 'attachSupport' ],
+    attachSupport: [ 'type', AttachSupport ]
   };
 
   function BpmnFactory(moddle) {
@@ -53554,9 +53725,7 @@
           target = connection.target,
           waypoints = copyWaypoints(connection),
           axis = getAxisFromDirection(direction),
-          layoutHints = {
-            labelBehavior: false
-          };
+          layoutHints = {};
 
       if (includes$1(affectedShapes, source) && includes$1(affectedShapes, target)) {