code cleanup, changed var to let or const, interactjs rtl test

Author: gmsa

src/App.vue

@@ -47,8 +47,6 @@
                            :y="item.y"
                            :w="item.w"
                            :h="item.h"
-                           :min-w="2"
-                           :min-h="2"
                            :i="item.i"
                            @resize="resize"
                            @move="move"
@@ -164,17 +162,17 @@
                 this.layout.splice(this.layout.indexOf(item), 1);
             },
             addItem: function() {
-                var self = this;
+                let self = this;
                 //console.log("### LENGTH: " + this.layout.length);
-                var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
+                let item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
                 this.index++;
                 this.layout.push(item);
             },
             move: function(i, newX, newY){
-                console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
+                // console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
             },
-            resize: function(i, newH, newW){
-                console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
+            resize: function(i, newH, newW, newHPx, newWPx){
+                console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
             },
             moved: function(i, newX, newY){
                 console.log("### MOVED i=" + i + ", X=" + newX + ", Y=" + newY);

src/GridItem.vue

@@ -86,7 +86,7 @@
     import {getDocumentDir} from "./DOM";
     //    var eventBus = require('./eventBus');
 
-    var interact = require("interactjs");
+    let interact = require("interactjs");
 
     export default {
         name: "GridItem",
@@ -224,7 +224,7 @@
             }
         },
         created () {
-            var self = this;
+            let self = this;
 
             // Accessible refernces of functions for removing in beforeDestroy
             self.updateWidthHandler = function (width) {
@@ -271,7 +271,7 @@
             this.rtl = getDocumentDir();
         },
         beforeDestroy: function(){
-            var self = this;
+            let self = this;
             //Remove listeners
             this.eventBus.$off('updateWidth', self.updateWidthHandler);
             this.eventBus.$off('compact', self.compactHandler);
@@ -363,7 +363,7 @@
                 this.createStyle();
             },
             renderRtl: function () {
-                console.log("### renderRtl");
+                // console.log("### renderRtl");
                 this.tryMakeResizable();
                 this.createStyle();
             }
@@ -389,7 +389,7 @@
                   this.innerX = this.x;
                   this.innerW = this.w;
                 }
-                var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
+                let pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
 
 
                 if (this.isDragging) {
@@ -434,11 +434,12 @@
                 const {x, y} = position;
 
                 const newSize = {width: 0, height: 0};
+                let pos;
                 switch (event.type) {
                     case "resizestart":
                         this.previousW = this.innerW;
                         this.previousH = this.innerH;
-                        var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
+                        pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
                         newSize.width = pos.width;
                         newSize.height = pos.height;
                         this.resizing = newSize;
@@ -459,7 +460,7 @@
                         break;
                     case "resizeend":
                         //console.log("### resize end => x=" +this.innerX + " y=" + this.innerY + " w=" + this.innerW + " h=" + this.innerH);
-                        var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
+                        pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
                         newSize.width = pos.width;
                         newSize.height = pos.height;
 //                        console.log("### resize end => " + JSON.stringify(newSize));
@@ -469,7 +470,7 @@
                 }
 
                 // Get new WH
-                var pos = this.calcWH(newSize.height, newSize.width);
+                pos = this.calcWH(newSize.height, newSize.width);
                 if (pos.w < this.minW) {
                     pos.w = this.minW;
                 }
@@ -684,7 +685,8 @@
                     // console.log("### MIN " + JSON.stringify(minimum));
 
                     const opts = {
-                        preserveAspectRatio: false,
+                        preserveAspectRatio: true,
+                        // allowFrom: "." + this.resizableHandleClass,
                         edges: {
                             left: false,
                             right: "." + this.resizableHandleClass,

src/GridLayout.vue

@@ -100,7 +100,7 @@
             };
         },
         created () {
-            var self = this;
+            const self = this;
 
             // Accessible refernces of functions for removing in beforeDestroy
             self.resizeEventHandler = function(eventType, i, x, y, h, w) {
@@ -125,7 +125,7 @@
         mounted: function() {
             this.$nextTick(function () {
                 validateLayout(this.layout);
-                var self = this;
+                const self = this;
                 this.$nextTick(function() {
                     if (self.width === null) {
                         self.onWindowResize();
@@ -136,7 +136,7 @@
 
                     self.updateHeight();
                     self.$nextTick(function () {
-                        var erd = elementResizeDetectorMaker({
+                        const erd = elementResizeDetectorMaker({
                             strategy: "scroll" //<- For ultra performance.
                         });
                         erd.listenTo(self.$refs.item, function (element) {
@@ -174,7 +174,7 @@
         },
         methods: {
             onWindowLoad: function(){
-                var self = this;
+                const self = this;
 
                 if (self.width === null) {
                     self.onWindowResize();
@@ -185,7 +185,7 @@
 
                 self.updateHeight();
                 self.$nextTick(function () {
-                    var erd = elementResizeDetectorMaker({
+                    const erd = elementResizeDetectorMaker({
                         strategy: "scroll" //<- For ultra performance.
                     });
                     erd.listenTo(self.$refs.item, function (element) {
@@ -236,7 +236,7 @@
                     });
                 }
                 //console.log(eventName + " id=" + id + ", x=" + x + ", y=" + y);
-                var l = getLayoutItem(this.layout, id);
+                let l = getLayoutItem(this.layout, id);
                 //GetLayoutItem sometimes returns null object
                 if (l === undefined || l === null){
                     l = {x:0, y:0}
@@ -269,7 +269,7 @@
                         this.isDragging = false;
                     });
                 }
-                var l = getLayoutItem(this.layout, id);
+                let l = getLayoutItem(this.layout, id);
                 //GetLayoutItem sometimes return null object
                 if (l === undefined || l === null){
                     l = {h:0, w:0}

test/interact-test.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Interact TEST</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <style>
+        .resize-drag {
+            background-color: #29e;
+            color: white;
+            font-size: 20px;
+            font-family: sans-serif;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 30px 20px;
+
+            width: 120px;
+
+            /* This makes things *much* easier */
+            box-sizing: border-box;
+        }
+
+        .resize-container {
+            display: inline-block;
+            background-color: #cccccc;
+            width: 400px;
+            height: 400px;
+        }
+    </style>
+</head>
+<body>
+<div class="resize-container">
+    <div class="resize-drag">
+        Resize from any edge or corner
+    </div>
+</div>
+<script src="../node_modules/interactjs/dist/interact.js"></script>
+<script src="interact-test.js"></script>
+</body>
+</html>

test/interact-test.js

@@ -0,0 +1,65 @@
+function dragMoveListener (event) {
+    var target = event.target,
+        // keep the dragged position in the data-x/data-y attributes
+        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
+        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+
+    // translate the element
+    target.style.webkitTransform =
+        target.style.transform =
+            'translate(' + x + 'px, ' + y + 'px)';
+
+    // update the posiion attributes
+    target.setAttribute('data-x', x);
+    target.setAttribute('data-y', y);
+}
+
+// this is used later in the resizing and gesture demos
+window.dragMoveListener = dragMoveListener;
+
+
+interact('.resize-drag')
+    .draggable({
+        onmove: window.dragMoveListener,
+        restrict: {
+            restriction: 'parent',
+            elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+        },
+    })
+    .resizable({
+        // resize from all edges and corners
+        edges: { left: true, right: true, bottom: true, top: true },
+
+        // keep the edges inside the parent
+        restrictEdges: {
+            outer: 'parent',
+            endOnly: true,
+        },
+
+        // minimum size
+        restrictSize: {
+            min: { width: 100, height: 50 },
+        },
+
+        inertia: true,
+    })
+    .on('resizemove', function (event) {
+        var target = event.target,
+            x = (parseFloat(target.getAttribute('data-x')) || 0),
+            y = (parseFloat(target.getAttribute('data-y')) || 0);
+
+        // update the element's style
+        target.style.width  = event.rect.width + 'px';
+        target.style.height = event.rect.height + 'px';
+
+        // translate when resizing from top or left edges
+        x += event.deltaRect.left;
+        y += event.deltaRect.top;
+
+        target.style.webkitTransform = target.style.transform =
+            'translate(' + x + 'px,' + y + 'px)';
+
+        target.setAttribute('data-x', x);
+        target.setAttribute('data-y', y);
+        target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height);
+    });