revised clean code DRAG and RESIZE library

index.html

@@ -81,99 +81,75 @@
 
 	</div>
 
-<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
-<script src="interact.min.js"></script>
-<!-- also found this other options:
-	https://www.webcomponents.org/element/jifalops/drag-resize
-	https://codepen.io/zz85/pen/gbOoVP -->
-
-<script type="text/javascript">
-
-function fside() {
-   var element = document.getElementById("side");
-   element.classList.toggle("sideminclicked");
-}
-
-
-interact('.resize-drag')
-  .resizable({
-    // resize from all edges and corners
-    edges: { left: true, right: true, bottom: true, top: true },
-
-    listeners: {
-      move (event) {
-        var target = event.target
-        var x = (parseFloat(target.getAttribute('data-x')) || 0)
-        var 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)
-      }
-    },
-    modifiers: [
-      // keep the edges inside the parent
-      interact.modifiers.restrictEdges({
-        outer: 'parent'
-      }),
-
-      // minimum size
-      interact.modifiers.restrictSize({
-        min: { width: 100, height: 50 }
-      })
-    ],
-
-    inertia: true
-  })
-  .draggable({
-    listeners: { move: window.dragMoveListener },
-    inertia: true,
-    modifiers: [
-      interact.modifiers.restrictRect({
-        restriction: 'parent',
-        endOnly: true
-      })
-    ]
-  })
 
+<!-- BBUTTON HIDE side pannel -->
+
+  <script type="text/javascript">
+
+    function fside() {
+      var element = document.getElementById("side");
+      element.classList.toggle("sideminclicked");
+    }
+  </script>
+
+
+<!-- DRAG and RESIZE library -->
+
+      <!-- source: https://interactjs.io/docs/installation#cdn-streamlined -->
+      <script src="interact.min.js"></script> 
+      <!-- script above same as https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js --> 
+
+      <!-- also found this other options:
+        https://www.webcomponents.org/element/jifalops/drag-resize
+        https://codepen.io/zz85/pen/gbOoVP -->
+
+  <script>
+  interact('.resize-drag')
+    .draggable({
+      onmove: window.dragMoveListener
+    })
+    .resizable({
+      preserveAspectRatio: true,
+      edges: { left: true, right: true, bottom: true, top: 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 = event.rect.width + '×' + event.rect.height;
+    });
 
   function dragMoveListener (event) {
-    var target = event.target
+      var target = event.target,
-    // keep the dragged position in the data-x/data-y attributes
+          // keep the dragged position in the data-x/data-y attributes
-    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
+          x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
-    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
+          y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
 
-    // translate the element
+      // translate the element
-    target.style.webkitTransform =
+      target.style.webkitTransform =
       target.style.transform =
-        'translate(' + x + 'px, ' + y + 'px)'
+        'translate(' + x + 'px, ' + y + 'px)';
-
+
-    // update the posiion attributes
+      // update the posiion attributes
-    target.setAttribute('data-x', x)
+      target.setAttribute('data-x', x);
-    target.setAttribute('data-y', y)
+      target.setAttribute('data-y', y);
-  }
+    }
-
+  </script>
-  reset.onclick = () => location.reload()
+
-
-  window.onunload = () => {
-    interact.debug().interactables.list.filter(i => {
-      try {
-        return document.contains(i.context())
-      } catch (e) {}
-    }).forEach(i => i.unset())
-  }	
-</script>
 
 </body>
 </html>