Snap During Resize

lib/features/create/Create.js

@@ -19,6 +19,8 @@ import {
   translate
 } from '../../util/SvgTransformUtil';
 
+import { Shape } from '../../model';
+
 
 /**
  * Adds the ability to create new shapes via drag and drop.
@@ -165,13 +167,14 @@ export default function Create(
   // event handlers
 
   eventBus.on('create.move', function(event) {
-
     var context = event.context,
         hover = event.hover,
         shape = context.shape,
         source = context.source,
         canExecute;
 
+    ensureConstraints(event);
+
     var position = {
       x: event.x,
       y: event.y
@@ -224,16 +227,19 @@ export default function Create(
         target = context.target,
         canExecute = context.canExecute,
         attach = canExecute && canExecute.attach,
-        connect = canExecute && canExecute.connect,
-        position = {
-          x: event.x,
-          y: event.y
-        };
+        connect = canExecute && canExecute.connect;
 
     if (!canExecute) {
       return false;
     }
 
+    ensureConstraints(event);
+
+    var position = {
+      x: event.x,
+      y: event.y
+    };
+
     if (connect) {
       // invoke append if connect is set via rules
       shape = modeling.appendShape(source, shape, position, target, {
@@ -268,18 +274,28 @@ export default function Create(
 
   // API
 
-  this.start = function(event, shape, source) {
+  this.start = function(event, shape, sourceOrContext) {
+    var context;
+
+    if (!sourceOrContext || sourceOrContext instanceof Shape) {
+      context = {
+        hints: {},
+        shape: shape,
+        source: sourceOrContext
+      };
+    } else {
+      context = assign({
+        hints: {},
+        shape: shape
+      }, sourceOrContext);
+    }
 
     dragging.init(event, 'create', {
       cursor: 'grabbing',
       autoActivate: true,
       data: {
         shape: shape,
-        context: {
-          shape: shape,
-          source: source,
-          hints: {}
-        }
+        context: context
       }
     });
   };
@@ -294,3 +310,30 @@ Create.$inject = [
   'styles',
   'graphicsFactory'
 ];
+
+// helpers //////////
+
+function ensureConstraints(event) {
+  var context = event.context,
+      createConstraints = context.createConstraints;
+
+  if (!createConstraints) {
+    return;
+  }
+
+  if (createConstraints.left) {
+    event.x = Math.max(event.x, createConstraints.left);
+  }
+
+  if (createConstraints.right) {
+    event.x = Math.min(event.x, createConstraints.right);
+  }
+
+  if (createConstraints.top) {
+    event.y = Math.max(event.y, createConstraints.top);
+  }
+
+  if (createConstraints.bottom) {
+    event.y = Math.min(event.y, createConstraints.bottom);
+  }
+}

lib/features/grid-snapping/GridSnapping.js

@@ -174,30 +174,38 @@ GridSnapping.$inject = [
  *
  * @param {Object} event
  * @param {Object} event.context
- * @param {Object} [event.context.resizeConstraints]
- * @param {number} [event.context.resizeConstraints.min]
- * @param {number} [event.context.resizeConstraints.max]
  * @param {string} axis
  *
  * @returns {Object}
  */
 function getSnapConstraints(event, axis) {
   var context = event.context,
-      resizeConstraints = context.resizeConstraints;
-
-  if (!resizeConstraints) {
-    return null;
-  }
+      createConstraints = context.createConstraints,
+      resizeConstraints = context.resizeConstraints || {};
 
   var direction = context.direction;
 
-  var minResizeConstraints = resizeConstraints.min,
-      maxResizeConstraints = resizeConstraints.max;
+  var snapConstraints = null;
+
+  // create
+  if (createConstraints) {
+    snapConstraints = {};
 
-  var snapConstraints = {};
+    if (isHorizontal(axis)) {
+      snapConstraints.min = createConstraints.left;
+      snapConstraints.max = createConstraints.right;
+    } else {
+      snapConstraints.min = createConstraints.top;
+      snapConstraints.max = createConstraints.bottom;
+    }
+  }
 
   // resize
+  var minResizeConstraints = resizeConstraints.min,
+      maxResizeConstraints = resizeConstraints.max;
+
   if (minResizeConstraints) {
+    snapConstraints = {};
 
     if (isHorizontal(axis)) {
 
@@ -219,6 +227,7 @@ function getSnapConstraints(event, axis) {
   }
 
   if (maxResizeConstraints) {
+    snapConstraints = {};
 
     if (isHorizontal(axis)) {
 

lib/features/move/Move.js

@@ -149,6 +149,12 @@ export default function MoveEvents(
     delta.x = round(delta.x);
     delta.y = round(delta.y);
 
+    if (delta.x === 0 && delta.y === 0) {
+
+      // didn't move
+      return;
+    }
+
     modeling.moveElements(shapes, delta, context.target, {
       primaryShape: context.shape,
       attach: isAttach

lib/features/resize/Resize.js

@@ -122,10 +122,17 @@ export default function Resize(eventBus, rules, modeling, dragging) {
         newBounds = context.newBounds;
 
     if (canExecute) {
+
       // ensure we have actual pixel values for new bounds
       // (important when zoom level was > 1 during move)
       newBounds = roundBounds(newBounds);
 
+      if (!boundsChanged(shape, newBounds)) {
+
+        // no resize necessary
+        return;
+      }
+
       // perform the actual resize
       modeling.resizeShape(shape, newBounds);
     }
@@ -229,4 +236,13 @@ Resize.$inject = [
   'rules',
   'modeling',
   'dragging'
-];
+];
+
+// helpers //////////
+
+function boundsChanged(shape, newBounds) {
+  return shape.x !== newBounds.x ||
+    shape.y !== newBounds.y ||
+    shape.width !== newBounds.width ||
+    shape.height !== newBounds.height;
+}