diagram-js - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

lib/core/Canvas.js

@@ -99,3 +99,2 @@ 'use strict';
   var eventBus = this._eventBus,
-      graphicsFactory = this._graphicsFactory,
       snap = this._snap,
@@ -138,2 +137,4 @@
 
+    eventBus.fire('canvas.destroy', { svg: self._svg, viewport: self._viewport });
+
     self._svg.remove();
@@ -140,0 +141,0 @@

lib/core/ElementFactory.js

 'use strict';
 
-var _ = require('lodash');
-
-
 var Model = require('../model');
@@ -7,0 +4,0 @@

lib/core/ElementRegistry.js

@@ -0,1 +1,3 @@
+'use strict';
+
 var ELEMENT_ID = 'data-element-id';
@@ -2,0 +4,0 @@

lib/core/GraphicsFactory.js

@@ -80,5 +80,7 @@ var _ = require('lodash');
   var outerGfx = parentGfx.group().attr('class', 'djs-group'),
-      gfx = outerGfx.group().attr('class', 'djs-element djs-' + type),
-      visual = gfx.group().attr('class', 'djs-visual');
+      gfx = outerGfx.group().attr('class', 'djs-element djs-' + type);
 
+  // create visual
+  gfx.group().attr('class', 'djs-visual');
+
   return gfx;
@@ -85,0 +87,0 @@ };

lib/Diagram.js

@@ -93,4 +93,6 @@ 'use strict';
  * The main diagram-js entry point that bootstraps the diagram with the given
- * configuration. To register extensions with the diagram, pass them as Array<didi.Module> to the constructor.
+ * configuration.
  *
+ * To register extensions with the diagram, pass them as Array<didi.Module> to the constructor.
+ *
  * @class djs.Diagram
@@ -176,4 +178,4 @@ * @memberOf djs
    *
-   * events.on('diagram.init', function() {
-   *   events.fire('my-custom-event', { foo: 'BAR' });
+   * eventBus.on('diagram.init', function() {
+   *   eventBus.fire('my-custom-event', { foo: 'BAR' });
    * });
@@ -180,0 +182,0 @@ *

lib/features/change-support/ChangeSupport.js

 'use strict';
 
-var updateLine = require('../../draw/Renderer').updateLine;
-
 /**
@@ -6,0 +4,0 @@ * Adds change support to the diagram, including

lib/features/connect/Connect.js

@@ -1,3 +0,2 @@
-var LayoutUtil = require('../../layout/Util'),
-    Dom = require('../../util/Dom');
+var LayoutUtil = require('../../layout/Util');
 
@@ -4,0 +3,0 @@ var MARKER_OK = 'connect-ok',

lib/features/context-pad/ContextPad.js

@@ -156,4 +156,2 @@ 'use strict';
 
-  var self = this;
-
   _.forEach(entries, function(entry, id) {
@@ -220,3 +218,3 @@ var control = $(entry.html || '<div class="entry" draggable="true"></div>').attr('data-action', id);
       position: {
-        right: -8,
+        right: -9,
         top: -6
@@ -223,0 +221,0 @@ },

lib/features/create/Create.js

@@ -30,3 +30,3 @@
   function createVisual(shape) {
-    var group, preview;
+    var group, preview, visual;
 
@@ -39,4 +39,6 @@ group = canvas.getDefaultLayer().group().attr(styles.cls('djs-drag-group', [ 'no-events' ]));
 
+    visual = preview.group().addClass('djs-visual');
+
     // hijack renderer to draw preview
-    renderer.drawShape(preview, shape);
+    renderer.drawShape(visual, shape);
 
@@ -43,0 +45,0 @@ return group;

lib/features/interaction-events/InteractionEvents.js

 'use strict';
 
-
-var _ = require('lodash');
-
 var Snap = require('snapsvg');
 
-var GraphicsUtil = require('../../util/GraphicsUtil'),
-    Renderer = require('../../draw/Renderer'),
+var Renderer = require('../../draw/Renderer'),
     Dom = require('../../util/Dom'),
@@ -36,3 +32,3 @@ createLine = Renderer.createLine,
     stroke: 'white',
-    strokeWidth: 10
+    strokeWidth: 15
   });
@@ -57,11 +53,21 @@
 
+  var handlers = {};
+
   function mouseHandler(type) {
-    return function(event) {
-      // only indicate left mouse button=0 interactions
-      if (!event.button) {
-        fire(type, event);
-      }
-    };
+
+    var fn = handlers[type];
+
+    if (!fn) {
+      fn = handlers[type] = function(event) {
+        // only indicate left mouse button=0 interactions
+        if (!event.button) {
+          fire(type, event);
+        }
+      };
+    }
+
+    return fn;
   }
 
+
   ///// event registration
@@ -146,2 +152,18 @@
 
+  function unregisterEvents(svg) {
+
+    var node = svg.node;
+
+    Dom.off(node, 'mouseover', mouseHandler('element.hover'));
+    Dom.off(node, 'mouseout', mouseHandler('element.out'));
+    Dom.off(node, 'click', mouseHandler('element.click'));
+    Dom.off(node, 'dblclick', mouseHandler('element.dblclick'));
+    Dom.off(node, 'mousedown', mouseHandler('element.mousedown'));
+    Dom.off(node, 'mouseup', mouseHandler('element.mouseup'));
+  }
+
+  eventBus.on('canvas.destroy', function(event) {
+    unregisterEvents(event.svg);
+  });
+
   eventBus.on('canvas.init', function(event) {
@@ -155,7 +177,5 @@ registerEvents(event.svg);
         gfx = event.gfx,
-        visual = GraphicsUtil.getVisual(gfx),
-        baseEvent = { element: element, gfx: gfx };
+        hit,
+        type;
 
-    var hit, type;
-
     if (element.waypoints) {
@@ -199,2 +219,4 @@ hit = createLine(element.waypoints);
   this.fire = fire;
+
+  this.mouseHandler = mouseHandler;
 }
@@ -201,0 +223,0 @@

lib/features/modeling/cmd/AppendShapeHandler.js

 'use strict';
 
-var _ = require('lodash');
-
 var NoopHandler = require('./NoopHandler');
@@ -6,0 +4,0 @@

lib/features/modeling/cmd/CreateConnectionHandler.js

 'use strict';
 
-var _ = require('lodash');
 
-
 function CreateConnectionHandler(canvas, layouter) {
@@ -7,0 +5,0 @@ this._canvas = canvas;

lib/features/modeling/cmd/DeleteShapeHandler.js

 'use strict';
 
-var _ = require('lodash');
-
 var Collections = require('../../../util/Collections');
@@ -6,0 +4,0 @@

lib/features/modeling/cmd/helper/Move.js

@@ -59,2 +59,4 @@ var _ = require('lodash');
     } else {
+
+      // TODO: update anchor for incoming / outgoing connections
       modeling.layoutConnection(c);
@@ -61,0 +63,0 @@ }

lib/features/modeling/cmd/MoveShapeHandler.js

@@ -70,3 +70,2 @@ 'use strict';
       oldParentIndex = context.oldParentIndex,
-      currentIdx,
       delta = context.delta;
@@ -73,0 +72,0 @@

lib/features/modeling/cmd/MoveShapesHandler.js

 'use strict';
 
-var _ = require('lodash');
-
 var MoveHelper = require('./helper/Move');
@@ -6,0 +4,0 @@

lib/features/modeling/cmd/ResizeShapeHandler.js

@@ -5,5 +5,3 @@ 'use strict';
 
-var Elements = require('../../../util/Elements');
 
-
 /**
@@ -10,0 +8,0 @@ * A handler that implements reversible resizing of shapes.

lib/features/modeling/Modeling.js

@@ -32,2 +32,28 @@ 'use strict';
 
+Modeling.prototype.getHandlers = function() {
+  return {
+    'shape.create': require('./cmd/CreateShapeHandler'),
+    'shape.delete': require('./cmd/DeleteShapeHandler'),
+    'shape.move': require('./cmd/MoveShapeHandler'),
+    'shapes.move': require('./cmd/MoveShapesHandler'),
+    'shape.resize': require('./cmd/ResizeShapeHandler'),
+
+    'shape.append': require('./cmd/AppendShapeHandler'),
+
+    'label.create': require('./cmd/CreateLabelHandler'),
+
+    'connection.create': require('./cmd/CreateConnectionHandler'),
+    'connection.delete': require('./cmd/DeleteConnectionHandler'),
+    'connection.move': require('./cmd/MoveConnectionHandler'),
+    'connection.layout': require('./cmd/LayoutConnectionHandler'),
+
+    'connection.updateWaypoints': require('./cmd/UpdateWaypointsHandler'),
+
+    'connection.reconnectStart': require('./cmd/ReconnectConnectionHandler'),
+    'connection.reconnectEnd': require('./cmd/ReconnectConnectionHandler'),
+
+    'elements.delete': require('./cmd/DeleteElementsHandler')
+  };
+};
+
 /**
@@ -39,20 +65,8 @@ * Register handlers with the command stack
 Modeling.prototype.registerHandlers = function(commandStack) {
-  commandStack.registerHandler('shape.create', require('./cmd/CreateShapeHandler'));
-  commandStack.registerHandler('shape.delete', require('./cmd/DeleteShapeHandler'));
-  commandStack.registerHandler('shape.move', require('./cmd/MoveShapeHandler'));
-  commandStack.registerHandler('shapes.move', require('./cmd/MoveShapesHandler'));
-  commandStack.registerHandler('shape.resize', require('./cmd/ResizeShapeHandler'));
-
-  commandStack.registerHandler('shape.append', require('./cmd/AppendShapeHandler'));
-
-  commandStack.registerHandler('label.create', require('./cmd/CreateLabelHandler'));
-
-  commandStack.registerHandler('connection.create', require('./cmd/CreateConnectionHandler'));
-  commandStack.registerHandler('connection.delete', require('./cmd/DeleteConnectionHandler'));
-  commandStack.registerHandler('connection.move', require('./cmd/MoveConnectionHandler'));
-  commandStack.registerHandler('connection.layout', require('./cmd/LayoutConnectionHandler'));
+  _.forEach(this.getHandlers(), function(handler, id) {
+    commandStack.registerHandler(id, handler);
+  });
 };
 
 
-
 ///// modeling helpers /////////////////////////////////////////
@@ -178,2 +192,11 @@
 
+Modeling.prototype.removeElements = function(elements) {
+  var context = {
+    elements: elements
+  };
+
+  this._commandStack.execute('elements.delete', context);
+};
+
+
 Modeling.prototype.removeShape = function(shape) {
@@ -205,2 +228,31 @@ var context = {
 
+Modeling.prototype.updateWaypoints = function(connection, newWaypoints) {
+  var context = {
+    connection: connection,
+    newWaypoints: newWaypoints
+  };
+
+  this._commandStack.execute('connection.updateWaypoints', context);
+};
+
+Modeling.prototype.reconnectStart = function(connection, newSource, dockingPoint) {
+  var context = {
+    connection: connection,
+    newSource: newSource,
+    dockingPoint: dockingPoint
+  };
+
+  this._commandStack.execute('connection.reconnectStart', context);
+};
+
+Modeling.prototype.reconnectEnd = function(connection, newTarget, dockingPoint) {
+  var context = {
+    connection: connection,
+    newTarget: newTarget,
+    dockingPoint: dockingPoint
+  };
+
+  this._commandStack.execute('connection.reconnectEnd', context);
+};
+
 Modeling.prototype.connect = function(source, target, attrs) {
@@ -207,0 +259,0 @@ return this.createConnection(source, target, attrs || {}, source.parent);

lib/features/outline/Outline.js

 'use strict';
 
 var Snap = require('snapsvg');
+var getBBox = require('../../util/Elements').getBBox;
 
-var GraphicsUtil = require('../../util/GraphicsUtil');
 
-
 /**
@@ -18,3 +17,3 @@ * @class
 
-  var OUTLINE_OFFSET = 5;
+  var OUTLINE_OFFSET = 6;
 
@@ -27,3 +26,3 @@ var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
 
-  function updateOutline(outline, bounds) {
+  function updateShapeOutline(outline, bounds) {
 
@@ -38,2 +37,14 @@ outline.attr({
 
+  function updateConnectionOutline(outline, connection) {
+
+    var bbox = getBBox(connection);
+
+    outline.attr({
+      x: bbox.x - OUTLINE_OFFSET,
+      y: bbox.y - OUTLINE_OFFSET,
+      width: bbox.width + OUTLINE_OFFSET * 2,
+      height: bbox.height + OUTLINE_OFFSET * 2
+    });
+  }
+
   eventBus.on([ 'shape.added', 'shape.changed' ], function(event) {
@@ -49,5 +60,19 @@ var element = event.element,
 
-    updateOutline(outline, element);
+    updateShapeOutline(outline, element);
   });
 
+  eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
+    var element = event.element,
+        gfx     = event.gfx;
+
+    var outline = gfx.select('.djs-outline');
+
+    if (!outline) {
+      outline = createOutline(gfx, element);
+    }
+
+    updateConnectionOutline(outline, element);
+  });
+
+
 }
@@ -54,0 +79,0 @@

lib/features/overlays/Overlays.js

 'use strict';
 
 var _ = require('lodash'),
-    $ = require('jquery');
+    $ = require('jquery'),
+    getBBox = require('../../util/Elements').getBBox;
 
@@ -179,6 +180,2 @@ // document wide unique overlay ids
 
-  if (element.waypoints) {
-    throw new Error('overlays for connections are not supported');
-  }
-
   if (!overlay.position) {
@@ -271,4 +268,12 @@ throw new Error('must specifiy overlay position');
 
-  // TODO(nre): update according to element bbox (for connections)
-  html.css({ left: element.x, top: element.y });
+  var x = element.x,
+      y = element.y;
+
+  if (element.waypoints) {
+    var bbox = getBBox(element);
+    x = bbox.x;
+    y = bbox.y;
+  }
+
+  html.css({ left: x, top: y });
 };
@@ -291,7 +296,25 @@
   if (position.right !== undefined) {
-    left = position.right * -1 + element.width;
+
+    var width;
+
+    if (element.waypoints) {
+      width = getBBox(element).width;
+    } else {
+      width = element.width;
+    }
+
+    left = position.right * -1 + width;
   }
 
   if (position.bottom !== undefined) {
-    top = position.bottom * -1 + element.height;
+
+    var height;
+
+    if (element.waypoints) {
+      height = getBBox(element).height;
+    } else {
+      height = element.height;
+    }
+
+    top = position.bottom * -1 + height;
   }
@@ -326,4 +349,2 @@
   var d = viewbox.scale || 1;
-  var e = viewbox.x || 0;
-  var f = viewbox.y || 0;
 
@@ -428,34 +449,19 @@ var matrix = 'matrix(' + a + ',0,0,' + d + ',' + (-1 * viewbox.x * a) + ',' + (-1 * viewbox.y * d) + ')';
   eventBus.on([
-    'commandStack.shape.move.executed',
-    'commandStack.shape.move.reverted'
+    'element.changed'
   ], function(e) {
-    var element = e.context.shape;
+    var element = e.element;
 
-      var container = self._getOverlayContainer(element, true);
-      if (container) {
-        self._updateOverlayContainer(container);
-      }
-  });
+    var container = self._getOverlayContainer(element, true);
 
-  eventBus.on([
-    'commandStack.shape.resize.executed',
-    'commandStack.shape.resize.reverted'
-  ], function(e) {
-
-    var overlays = self._overlays;
-
-    var element = e.context.shape;
-
-    _.forEach(overlays, function(overlay) {
-      if (overlay.element.id === element.id) {
+    if (container) {
+      _.forEach(container.overlays, function(overlay) {
         self._updateOverlay(overlay);
-      }
-    });
+      });
 
-    var container = self._getOverlayContainer(element, true);
-    if (container) {
       self._updateOverlayContainer(container);
     }
+
   });
 
+
   // marker integration, simply add them on the overlays as classes, too.
@@ -462,0 +468,0 @@

lib/features/palette/Palette.js

@@ -97,4 +97,3 @@ 'use strict';
   var entriesContainer = this._container.find('.djs-palette-entries').empty(),
-      entries = this._entries = this.getEntries(),
-      self = this;
+      entries = this._entries = this.getEntries();
 
@@ -101,0 +100,0 @@ _.forEach(entries, function(entry, id) {

lib/features/resize/Resize.js

@@ -103,3 +103,2 @@ 'use strict';
         direction = context.direction,
-        newBounds,
         delta;
@@ -180,4 +179,4 @@
     // Create four drag indicators on the outline
-    var visual = group.rect(origin, origin, HANDLE_SIZE, HANDLE_SIZE).addClass(CLS_RESIZER + '-visual');
-    var hit = group.rect(origin, origin, HANDLE_HIT_SIZE, HANDLE_HIT_SIZE).addClass(CLS_RESIZER + '-hit');
+    group.rect(origin, origin, HANDLE_SIZE, HANDLE_SIZE).addClass(CLS_RESIZER + '-visual');
+    group.rect(origin, origin, HANDLE_HIT_SIZE, HANDLE_HIT_SIZE).addClass(CLS_RESIZER + '-hit');
 
@@ -265,2 +264,2 @@ var matrix = new Snap.Matrix().translate(x, y).rotate(rotation, 0, 0);
 
-module.exports = Resize;
+module.exports = Resize;

lib/features/selection/index.js

@@ -12,2 +12,2 @@ 'use strict';
   selectionBehavior: [ 'type', require('./SelectionBehavior') ]
-};
+};

lib/features/selection/Selection.js

@@ -76,4 +76,2 @@ 'use strict';
 
-  var self = this;
-
   // selection may be cleared by passing an empty array or null
@@ -93,4 +91,3 @@ // to the method
   }
-
   this._eventBus.fire('selection.changed', { oldSelection: oldSelection, newSelection: selectedElements });
-};
+};

lib/features/selection/SelectionBehavior.js

 'use strict';
 
+
 var getOriginalEvent = require('../../util/Event').getOriginal;
@@ -23,2 +24,4 @@
 
+
+  // Shift + click selection
   eventBus.on('element.click', function(event) {
@@ -30,10 +33,16 @@
     // or connections
-    if (element === canvas.getRootElement() ||
-        element.waypoints) {
-
+    if (element === canvas.getRootElement()) {
       element = null;
     }
 
-    var add = (getOriginalEvent(event) || event).shiftKey;
-    selection.select(element, add);
+    if (!selection.isSelected(element)) {
+      var ev = (getOriginalEvent(event) || event);
+      var add = ev.shiftKey;
+
+      if (!ev.altKey) {
+        selection.select(element, add);
+      }
+    } else {
+      selection.deselect(element);
+    }
   });
@@ -44,2 +53,2 @@ }
 
-module.exports = SelectionBehavior;
+module.exports = SelectionBehavior;

lib/features/selection/SelectionVisuals.js

@@ -8,3 +8,2 @@ 'use strict';
 
-
 /**
@@ -22,4 +21,6 @@ * A plugin that adds a visible selection UI to shapes and connections
  */
-function SelectionVisuals(events, canvas) {
+function SelectionVisuals(events, canvas, selection, graphicsFactory, styles) {
 
+  this._multiSelectionBox = null;
+
   function addMarker(e, cls) {
@@ -70,5 +71,8 @@ canvas.addMarker(e, cls);
   'eventBus',
-  'canvas'
+  'canvas',
+  'selection',
+  'graphicsFactory',
+  'styles'
 ];
 
 module.exports = SelectionVisuals;

lib/features/touch/TouchInteractionEvents.js

@@ -1,3 +0,2 @@
-var _ = require('lodash'),
-    Hammer = require('hammerjs'),
+var Hammer = require('hammerjs'),
     Snap = require('snapsvg'),
@@ -4,0 +3,0 @@ Dom = require('../../util/Dom'),

lib/layout/ManhattanLayout.js

@@ -5,9 +5,8 @@ 'use strict';
 
-var LayoutUtil = require('./Util');
+var LayoutUtil = require('./Util'),
+    Geometry = require('../util/Geometry');
 
 var MIN_DISTANCE = 20;
 
-var NEXT_TO = [ 'top', 'right', 'bottom', 'left' ];
 
-
 /**
@@ -225,11 +224,9 @@ * Returns the mid points for a manhattan connection between two points.
 
-    var relativeOrientation = LayoutUtil.getOrientation(points[0], points[1], 5),
-        absoluteOrientation = LayoutUtil.getOrientation(moved, other, -30);
+    // relayout if two points overlap
+    // this is most likely due to
+    return !!_.find(points, function(p, idx) {
+      var q = points[idx - 1];
 
-    if (NEXT_TO.indexOf(relativeOrientation) !== -1 &&
-        NEXT_TO.indexOf(absoluteOrientation) !== -1) {
-      return relativeOrientation !== absoluteOrientation;
-    }
-
-    return false;
+      return q && Geometry.distance(p, q) < 3;
+    });
   }
@@ -259,4 +256,4 @@
       // intersects (?) break, remove all bendpoints up to this one and relayout
-      if (LayoutUtil.isPointInRect(points[i], a, MIN_DISTANCE) ||
-          LayoutUtil.isPointInRect(points[i], b, MIN_DISTANCE)) {
+      if (Geometry.pointInRect(points[i], a, MIN_DISTANCE) ||
+          Geometry.pointInRect(points[i], b, MIN_DISTANCE)) {
 
@@ -263,0 +260,0 @@ // return sliced old connection

lib/layout/Util.js

@@ -42,14 +42,2 @@ 'use strict';
 
-function isPointInRect(p, rect, tolerance) {
-  tolerance = tolerance || 0;
-
-  return p.x > rect.x - tolerance &&
-         p.y > rect.y - tolerance &&
-         p.x < rect.x + rect.width + tolerance &&
-         p.y < rect.y + rect.height + tolerance;
-}
-
-module.exports.isPointInRect = isPointInRect;
-
-
 function pointsEqual(a, b) {
@@ -154,2 +142,3 @@ return a.x === b.x && a.y === b.y;
   return _.collect(points, function(p, idx) {
+    p = p.original || p;
     return (idx ? 'L' : 'M') + p.x + ' ' + p.y;
@@ -156,0 +145,0 @@ }).join('');

lib/navigation/movecanvas/MoveCanvas.js

@@ -1,3 +0,1 @@
-var _ = require('lodash');
-
 var Cursor = require('../../util/Cursor'),
@@ -75,3 +73,4 @@ Dom = require('../../util/Dom'),
     // left = 0
-    if (event.button) {
+    // left click + alt pressed is reserved for other use
+    if (event.button ||  event.altKey) {
       return;
@@ -97,2 +96,2 @@ }
 
-module.exports = MoveCanvas;
+module.exports = MoveCanvas;

lib/util/Elements.js

@@ -106,5 +106,2 @@ var _ = require('lodash');
 
-  var modeling = this._modeling;
-
-
   function handleConnection(c) {
@@ -156,7 +153,109 @@ if (topLevel[c.source.id] && topLevel[c.target.id]) {
 
+/**
+ * Returns the surrounding bbox for all elements in the array or the element primitive.
+ */
+function getBBox(elements, stopRecursion) {
 
+  stopRecursion = !!stopRecursion;
+  if (!_.isArray(elements)) {
+    elements = [elements];
+  }
+
+  var minX,
+      minY,
+      maxX,
+      maxY;
+
+  _.forEach(elements, function(element) {
+
+    // If element is a connection the bbox must be computed first
+    var bbox = element;
+    if (element.waypoints && !stopRecursion) {
+      bbox = getBBox(element.waypoints, true);
+    }
+
+    var x = bbox.x,
+        y = bbox.y,
+        height = bbox.height || 0,
+        width  = bbox.width  || 0;
+
+    if (x < minX || minX === undefined) {
+      minX = x;
+    }
+    if (y < minY || minY === undefined) {
+      minY = y;
+    }
+
+    if ((x + width) > maxX || maxX === undefined) {
+      maxX = x + width;
+    }
+    if ((y + height) > maxY || maxY === undefined) {
+      maxY = y + height;
+    }
+  });
+
+  return {
+    x: minX,
+    y: minY,
+    height: maxY - minY,
+    width: maxX - minX
+  };
+}
+
+
+/**
+ * Returns all elements that are enclosed from the bounding box.
+ *
+ * @param {Array<Object>} elements List of Elements to search through
+ * @param {Object} bbox the enclosing bbox.
+ * <ul>
+ *  <li>If bbox.(width|height) is not specified
+ * the method returns all elements with element.x/y &gt; bbox.x/y
+ * </li>
+ *  <li>If only bbox.x or bbox.y is specified, method return all elements with
+ *  e.x &gt; bbox.x or e.y &gt; bbox.y.</li>
+ * </ul>
+ *
+ */
+function getEnclosedElements(elements, bbox) {
+
+  var filteredElements = {};
+
+  _.forEach(elements, function(element) {
+
+    var e = element;
+
+    if (e.waypoints) {
+      e = getBBox(e);
+    }
+
+    if (!_.isNumber(bbox.y) && (e.x > bbox.x)) {
+      filteredElements[element.id] = element;
+    }
+    if (!_.isNumber(bbox.x) && (e.y > bbox.y)) {
+      filteredElements[element.id] = element;
+    }
+    if (e.x > bbox.x && e.y > bbox.y) {
+      if (_.isNumber(bbox.width) && _.isNumber(bbox.height) &&
+          e.width  + e.x < bbox.width  + bbox.x &&
+          e.height + e.y < bbox.height + bbox.y) {
+
+        filteredElements[element.id] = element;
+      } else if (!_.isNumber(bbox.width) || !_.isNumber(bbox.height)) {
+        filteredElements[element.id] = element;
+      }
+    }
+  });
+
+  return filteredElements;
+}
+
+
+
 module.exports.eachElement = eachElement;
 module.exports.selfAndDirectChildren = selfAndDirectChildren;
 module.exports.selfAndAllChildren = selfAndAllChildren;
+module.exports.getBBox = getBBox;
+module.exports.getEnclosedElements = getEnclosedElements;
 
-module.exports.getClosure = getClosure;
+module.exports.getClosure = getClosure;

lib/util/Event.js

@@ -67,2 +67,2 @@ function __preventDefault(event) {
 
-module.exports.toPoint = toPoint;
+module.exports.toPoint = toPoint;

lib/util/Text.js

@@ -197,6 +197,2 @@ 'use strict';
 
-
-  // the center x position to align against
-  var cx = box.width / 2;
-
   // the y position of the next line
@@ -203,0 +199,0 @@ var y, x;

package.json

 {
   "name": "diagram-js",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A modeling framework for the web",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -7,7 +7,9 @@ > The project is in an early development stage.
 
-[diagram-js](https://github.com/bpmn-io/diagram-js) is a toolbox for displaying and modifying diagrams on the web.
+[![Build Status](https://travis-ci.org/bpmn-io/diagram-js.svg?branch=master)](https://travis-ci.org/bpmn-io/diagram-js)
 
+A toolbox for displaying and modifying diagrams on the web.
 
-## Development
 
+## Hacking the Project
+
 To get the development setup ready execute
@@ -20,5 +22,6 @@
 
-### Building the Project
+### Testing
 
 Execute `grunt auto-test` to run the test suite in watch mode.
+
 Expose an environment variable `TEST_BROWSERS=(Chrome|Firefox|IE)` to execute the tests in a non-headless browser.
@@ -31,2 +34,7 @@
 
-We do not generate any build artifacts. Instead required parts of the library are intended to be bundled by modelers / viewers built on top of it.
+We do not generate any build artifacts. Required parts of the library should be bundled by modelers / viewers as needed instead.
+
+
+## License
+
+MIT

test/helper/index.js

@@ -5,2 +5,3 @@ 'use strict';
 var Diagram = require('../../lib/Diagram');
+var Dom    = require('../../lib/util/Dom');
 
@@ -149,2 +150,32 @@ try {
 
-module.exports.insertCSS = insertCSS;
+module.exports.insertCSS = insertCSS;
+
+
+function domMockInstall() {
+
+  Dom._on = Dom.on;
+  Dom._off = Dom.off;
+
+  Dom.on = function(element, type, fn, useCapture) {
+    element.$$listenerCount = (element.$$listenerCount || 0) + 1;
+    Dom._on(element, type, fn, useCapture);
+  };
+
+  Dom.off = function(element, type, fn, useCapture) {
+    element.$$listenerCount = (element.$$listenerCount || 0) -1;
+    Dom._off(element, type, fn, useCapture);
+  };
+}
+
+function domMockUninstall() {
+
+  Dom.on = Dom._on;
+  Dom.off = Dom._off;
+}
+
+var DomMocking = {
+  install: domMockInstall,
+  uninstall: domMockUninstall
+};
+
+module.exports.DomMocking = DomMocking;

test/spec/features/dragging/DraggingSpec.js

@@ -30,13 +30,3 @@ var _ = require('lodash');
     beforeEach(inject(function(canvas) {
-
-      var Event = Events.target(canvas._svg);
-
-      createEvent = function(data) {
-
-        var clientRect = canvas._container.getBoundingClientRect();
-        data.x += clientRect.left;
-        data.y += clientRect.top;
-
-        return Event.create(data);
-      };
+      createEvent = Events.scopedCreate(canvas);
     }));
@@ -104,4 +94,2 @@
 
-      debugger;
-
       // when
@@ -108,0 +96,0 @@ dragging.activate(createEvent({ x: 10, y: 10 }), 'foo');

test/spec/features/overlays/OverlaysSpec.js

@@ -402,3 +402,26 @@ 'use strict';
 
+    it('should position top left of shape', inject(function(overlays, canvas) {
 
+      var html = createOverlay();
+
+      var connection = canvas.addConnection({ id: 'select1', waypoints: [ { x: 10, y: 10 }, {x: 110, y: 10} ]});
+
+      // when
+      overlays.add(connection, {
+        position: {
+          left: 100,
+          top: 0
+        },
+        html: html
+      });
+
+      // then
+      expect(position(html)).toEqual({
+        top: 0,
+        left: 100
+      });
+
+    }));
+
+
     it('should position bottom right of shape', inject(function(overlays) {
@@ -647,2 +670,2 @@
 
-});
+});

test/spec/features/selection/SelectionVisualsSpec.js

@@ -9,2 +9,3 @@ 'use strict';
 var selectionModule = require('../../../../lib/features/selection');
+var overlayModule = require('../../../../lib/features/overlays');
 
@@ -23,3 +24,2 @@
   });
-
-});
+});

test/spec/util/ElementsSpec.js

@@ -114,2 +114,109 @@ 'use strict';
 
-});
+  describe('#getBBox', function() {
+
+    var shape1 = {
+      id: 'shape1',
+      x: 100,
+      y: 100,
+      height: 10,
+      width: 10
+    };
+
+    var shape2 = {
+      id: 'shape2',
+      x: 120,
+      y: 100,
+      height: 30,
+      width:  40
+    };
+
+    var shape3 = {
+      id: 'shape3',
+      x: -10,
+      y: -10,
+      height: 20,
+      width:  20
+    };
+
+    var connection1 = {
+      id: 'connection1',
+      waypoints: [ { x: 110, y: 105 }, {x: 120, y: 115} ]
+    };
+
+
+    it('should return bbox for element', function() {
+
+      //given
+      var elements = shape2;
+
+      var bbox = Elements.getBBox(elements);
+
+      expect(bbox).toEqual({
+        x: 120,
+        y: 100,
+        height: 30,
+        width:  40
+      });
+    });
+
+    it('should return bbox for connection', function() {
+
+      //given
+      var elements = connection1;
+
+      var bbox = Elements.getBBox(elements);
+
+      expect(bbox).toEqual({
+        x: 110,
+        y: 105,
+        height: 10,
+        width:  10
+      });
+    });
+
+    it('should return bbox for elements', function() {
+
+      //given
+      var elements = [shape1, shape2, connection1];
+
+      var bbox = Elements.getBBox(elements);
+
+      expect(bbox).toEqual({
+        x: 100,
+        y: 100,
+        height: 30,
+        width:  60
+      });
+    });
+
+    it('should return bbox for elements at negative x,y', function() {
+
+      //given
+      var elements = [shape1, shape2, shape3, connection1];
+
+      var bbox = Elements.getBBox(elements);
+
+      expect(bbox).toEqual({
+        x: -10,
+        y: -10,
+        height: 140,
+        width:  170
+      });
+    });
+
+    it('should return bbox for elements with a connection at the bbox border', function() {
+
+      //given
+      var elements = [shape1, connection1];
+
+      var bbox = Elements.getBBox(elements);
+
+      expect(bbox).toEqual({
+        x: 100,
+        y: 100,
+        height: 15,
+        width:  20
+      });
+    });
+  });
+});

test/util/Events.js

@@ -35,2 +35,18 @@ var _ = require('lodash');
 
-module.exports.target = target;
+module.exports.target = target;
+
+function scopedCreate(canvas) {
+
+  var E = target(canvas._svg);
+
+  return function(data) {
+
+    var clientRect = canvas._container.getBoundingClientRect();
+    data.x += clientRect.left;
+    data.y += clientRect.top;
+
+    return E.create(data);
+  };
+}
+
+module.exports.scopedCreate = scopedCreate;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

483294

increased by14.65%

Number of package files

181

increased by15.29%

Lines of code

14672

increased by16.35%

Number of lines in readme file

37

increased by23.33%

No dependency changes