hyperdom-interactjs - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

index.js

 var hyperdom = require('hyperdom');
 var interact = require('interact.js');
+var closest = require('element-closest');
 
@@ -16,8 +17,14 @@ var translateReg = /translate\((-?[\d\.]+)px,\s*(-?[\d\.]+)px\)/i;
           element.style.transform = writeTransform(transform);
+          if (transform.width) {
+            element.style.width = transform.width;
+          }
+          if (transform.height) {
+            element.style.height = transform.height;
+          }
         }
         if (options.draggable) {
-          var opts = (options.draggable === true) ?
+          var dragOpts = (options.draggable === true) ?
             {} : options.draggable || {};
-          opts.onmove = hyperdom.html.refreshify(makeDragMoveListener(binding));
-          var draggable = interact(element).draggable(opts);
+          dragOpts.onmove = hyperdom.html.refreshify(makeDragMoveListener(binding));
+          var draggable = interact(element).draggable(dragOpts);
           if (options.withDraggable) {
@@ -27,2 +34,11 @@ options.withDraggable(draggable);
         }
+        if (options.resizable) {
+          var resizeOpts = (options.resizable === true) ?
+            {} : options.resizable || {};
+          resizeOpts.onmove = hyperdom.html.refreshify(makeResizeListener(binding));
+          var resizable = interact(element).resizable(resizeOpts);
+          if (options.withResizable) {
+            options.withResizable(resizable);
+          }
+        }
         if (options.rotatable || options.scalable) {
@@ -56,3 +72,3 @@ var gesturable = interact(element).gesturable({
 function writeTransform(t) {
-  return "translate(" + t.x + "px," + t.y + "px) scale(" + t.scale + ") rotate(" + t.rotation + "deg)";
+  return 'translate(' + t.x + 'px,' + t.y + 'px) scale(' + t.scale + ') rotate(' + t.rotation + 'deg)';
 }
@@ -68,17 +84,17 @@
   var target = event.target;
-  var scaledContainer = document.getElementsByClassName('js-interact-scaled-container')[0];
-  if (scaledContainer) {
-    var existingScale = scaledContainer.style.transform.match(scaleReg);
-    var scaleValue = Number(existingScale[1]);
-  }
   var x, y;
   var transform = target.style.transform || target.style.webkitTransform;
-  var existing = transform.match(translateReg);
-  if (existing) {
-    x = Number(existing[1]);
-    y = Number(existing[2]);
+  var existingTranslate = transform.match(translateReg);
+  if (existingTranslate) {
+    x = Number(existingTranslate[1]);
+    y = Number(existingTranslate[2]);
   } else {
     x = y = 0;
   }
+
+  // Account for scaled container when dragging
+  var scaledContainer = target.closest('.js-interact-scaled-container');
   if (scaledContainer) {
+    var existingScale = scaledContainer.style.transform.match(scaleReg);
+    var scaleValue = Number(existingScale[1]);
     x += event.dx / scaleValue;
@@ -90,4 +106,5 @@ y += event.dy / scaleValue;
   }
+
   var newTranslate = 'translate(' + x + 'px, ' + y + 'px)';
-  if (existing) {
+  if (existingTranslate) {
     target.style.webkitTransform = target.style.transform = transform.replace(translateReg, newTranslate);
@@ -99,9 +116,51 @@ } else {
   if (binding) {
-    var transform = binding.get() || {};
-    transform.x = x;
-    transform.y = y;
-    binding.set(transform);
+    var bindingTransform = binding.get() || {};
+    bindingTransform.x = x;
+    bindingTransform.y = y;
+    binding.set(bindingTransform);
   }
 }
 
+function makeResizeListener(binding) {
+  return function(event) {
+    resizeListener(event, binding);
+  }
+}
+
+function resizeListener(event, binding) {
+  var target = event.target;
+  var scaledContainer = target.closest('.js-interact-scaled-container');
+  var existingObjectTransform = target.style.transform || target.style.webkitTransform;
+  var existingObjectScale = existingObjectTransform.match(scaleReg);
+
+  if (existingObjectScale) {
+    var existingObjectScaleValue = Number(existingObjectScale[1]);
+  }
+
+  if (scaledContainer) {
+    var containerScale = scaledContainer.style.transform.match(scaleReg);
+    var containerScaleValue = Number(containerScale[1]);
+    if (existingObjectScale) {
+      target.style.width  = (event.rect.width / existingObjectScaleValue) / containerScaleValue + 'px';
+      target.style.height = (event.rect.height / existingObjectScaleValue) / containerScaleValue + 'px';
+    } else {
+      target.style.width  = event.rect.width / containerScaleValue + 'px';
+      target.style.height = event.rect.height / containerScaleValue + 'px';
+    }
+  } else if (existingObjectScale) {
+    target.style.width  = event.rect.width / existingObjectScaleValue + 'px';
+    target.style.height = event.rect.height / existingObjectScaleValue + 'px';
+  } else {
+    target.style.width  = event.rect.width + 'px';
+    target.style.height = event.rect.height + 'px';
+  }
+
+  if (binding) {
+    var bindingTransform = binding.get() || {};
+    bindingTransform.width = event.rect.width;
+    bindingTransform.height = event.rect.height;
+    binding.set(bindingTransform);
+  }
+}
+
 function makeGestureMoveListener(options, binding) {
@@ -122,5 +181,5 @@ return function(event) {
   var transform = target.style.transform || target.style.webkitTransform;
-  var existing = transform.match(rotateReg);
-  if (existing) {
-    rotation = Number(existing[1]);
+  var existingRotate = transform.match(rotateReg);
+  if (existingRotate) {
+    rotation = Number(existingRotate[1]);
   } else {
@@ -130,12 +189,13 @@ rotation = 0;
   rotation += event.da;
-  var newTranslate = 'rotate(' + rotation + 'deg)';
-  if (existing) {
-    target.style.webkitTransform = target.style.transform = transform.replace(rotateReg, newTranslate);
+  var newRotate = 'rotate(' + rotation + 'deg)';
+  if (existingRotate) {
+    target.style.webkitTransform = target.style.transform = transform.replace(rotateReg, newRotate);
   } else {
-    target.style.webkitTransform = target.style.transform = transform + ' ' + newTranslate;
+    target.style.webkitTransform = target.style.transform = transform + ' ' + newRotate;
   }
 
   if (binding) {
-    var transform = binding.get() || {};
-    transform.rotation = rotation;
+    var bindingTransform = binding.get() || {};
+    bindingTransform.rotation = rotation;
+    binding.set(bindingTransform);
   }
@@ -148,5 +208,5 @@ }
   var transform = target.style.transform || target.style.webkitTransform;
-  var existing = transform.match(scaleReg);
-  if (existing) {
-    scale = Number(existing[1]);
+  var existingScale = transform.match(scaleReg);
+  if (existingScale) {
+    scale = Number(existingScale[1]);
   } else {
@@ -156,13 +216,14 @@ scale = 1;
   scale += event.ds;
-  var newTranslate = 'scale(' + scale + ')';
-  if (existing) {
-    target.style.webkitTransform = target.style.transform = transform.replace(scaleReg, newTranslate);
+  var newScale = 'scale(' + scale + ')';
+  if (existingScale) {
+    target.style.webkitTransform = target.style.transform = transform.replace(scaleReg, newScale);
   } else {
-    target.style.webkitTransform = target.style.transform = transform + ' ' + newTranslate;
+    target.style.webkitTransform = target.style.transform = transform + ' ' + newScale;
   }
 
   if (binding) {
-    var transform = binding.get() || {};
-    transform.scale = scale;
+    var bindingTransform = binding.get() || {};
+    bindingTransform.scale = scale;
+    binding.set(bindingTransform);
   }
 }

package.json

 {
   "name": "hyperdom-interactjs",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "multi-touch gestures for hyperdom using interact.js",
@@ -8,3 +8,3 @@ "main": "index.js",
     "example": "browserify example/example.js > example/bundle.js",
-    "watch": "watchify example/example.js -o example/bundle.js"
+    "watch": "watchify example/example.js -o example/bundle.js -v"
   },
@@ -18,2 +18,3 @@ "keywords": [
   "dependencies": {
+    "element-closest": "2.0.2",
     "interact.js": "1.2.8"
@@ -26,4 +27,5 @@ },
     "browserify": "13.0.1",
-    "watchify": "3.7.0",
-    "hyperdom": "0.2.0"
+    "eslint": "3.16.1",
+    "hyperdom": "0.2.0",
+    "watchify": "3.7.0"
   },
@@ -30,0 +32,0 @@ "author": "Josh Chisholm <[e-mail]>",

README.md

 # hyperdom-interactjs
 
-Multi-touch gestures for hyperdom.
+Use [interact.js](http://interactjs.io/) through [hyperdom](https://github.com/featurist/hyperdom).
 
@@ -12,3 +12,6 @@ [Demo](http://featurist.co.uk/hyperdom-interactjs)
   return h('.page',
-    interact({ binding: [model, 'animal'], draggable: true },
+    interact({
+        binding: [model, 'animal'],
+        draggable: true
+      },
       h('.red', 'Animal')
@@ -49,2 +52,55 @@ ),
     }, h('.bucket', 'Bucket')),
+    h('.object-container',
+      interact({
+          binding: [model, 'restricted'],
+          draggable: {
+            restrict: {
+              restriction: 'parent',
+              endOnly: true,
+              elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+            }
+          },
+          resizable: {
+            edges: { left: true, right: true, bottom: true, top: true }
+          },
+          rotatable: true,
+          scalable: true
+        },
+        h('.pink', 'Restricted')
+      )
+    ),
+    h('.scaled-container.js-interact-scaled-container', {
+      style: { transform: 'scale(1.6)' }
+    },
+      interact({
+          binding: [model, 'scaledContainer'],
+          draggable: {
+            restrict: {
+              restriction: 'parent',
+              endOnly: true,
+              elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+            }
+          },
+          resizable: {
+            preserveAspectRatio: true,
+            edges: { left: true, right: true, bottom: true, top: true }
+          },
+          rotatable: true,
+          scalable: true
+        },
+        h('.pink', 'Scaled')
+      )
+    ),
+    interact({
+        binding: [model, 'resizable'],
+        draggable: true,
+        resizable: {
+          preserveAspectRatio: true,
+          edges: { left: true, right: true, bottom: true, top: true }
+        },
+        rotatable: true,
+        scalable: true
+      },
+      h('.turquoise', 'Resizable')
+    ),
     h('pre', JSON.stringify(model, null, 2))
@@ -55,6 +111,13 @@ );
 var model = {
-  animal:    { x: 0,  y: 0, scale: 1.1, rotation: 1  },
-  vegetable: { x: 30, y: 0, scale: 1.0, rotation: 0  },
-  mineral:   { x: 60, y: 0, scale: 1.1, rotation: -3, moves: 0, gestures: 0 }
+  animal:     { x: 0,  y: 0, scale: 1.1, rotation: 1 },
+  vegetable:  { x: 30, y: 0, scale: 1.0, rotation: 0 },
+  mineral:    { x: 60, y: 0, scale: 1.1, rotation: -3, moves: 0, gestures: 0 },
+  restricted: { x: 30, y: 0, scale: 1.0, rotation: 0 },
+  scaledContainer:  { x: 30, y: 0, scale: 1.2, rotation: 0 },
+  resizable:  { x: 600, y: -400, scale: 2.0, rotation: 0 }
 }
 ```
+
+## Additional Features
+
+- Adding `.js-interact-scaled-container` to a [scaled](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale) container around the elements will fix the [dragging/resizing issue](https://github.com/taye/interact.js/issues/137).

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

11500

increased by64.05%

Lines of code

199

increased by37.24%

Number of lines in readme file

121

increased by108.62%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

4

increased by33.33%

Dependency changes

• + Addedelement-closest@2.0.2

• + Addedelement-closest@2.0.2(transitive)