update 2019-02-21

konvajs · Feb 21, 2019 · 6ec41ff · 6ec41ff
1 parent dc8e50a
commit 6ec41ff
Showing 1 changed file with 76 additions and 81 deletions.
diff --git a/source/downloads/code/sandbox/Collision_Detection.html b/source/downloads/code/sandbox/Collision_Detection.html
@@ -1,99 +1,94 @@
 <!DOCTYPE html>
 <html>
-
-<head>
+  <head>
     <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Konva Drag and Drop Collision Detection Demo</title>
     <style>
-        body {
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-            background-color: #F0F0F0;
-        }
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        background-color: #f0f0f0;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="container"></div>
     <script>
-        var width = window.innerWidth;
-        var height = window.innerHeight;
-
-        var stage = new Konva.Stage({
-            container: 'container',
-            width: width,
-            height: height
-        });
+      var width = window.innerWidth;
+      var height = window.innerHeight;
 
-        var layer = new Konva.Layer();
-        stage.add(layer);
+      var stage = new Konva.Stage({
+        container: 'container',
+        width: width,
+        height: height
+      });
 
-        function createShape() {
-            var group = new Konva.Group({
-                x: Math.random() * width,
-                y: Math.random() * height,
-                draggable: true
-            });
-            var shape = new Konva.Rect({
-                width: 30 + Math.random() * 30,
-                height: 30 + Math.random() * 30,
-                fill: 'green',
-                rotation: 360 * Math.random(),
-                name: 'fillShape'
-            });
-            group.add(shape);
+      var layer = new Konva.Layer();
+      stage.add(layer);
 
-            var boundingBox = shape.getClientRect({ relativeTo: group });
-
-            var box = new Konva.Rect({
-                x: boundingBox.x,
-                y: boundingBox.y,
-                width: boundingBox.width,
-                height: boundingBox.height,
-                stroke: 'red',
-                strokeWidth: 1
-            });
-            group.add(box);
-            return group;
-        }
+      function createShape() {
+        var group = new Konva.Group({
+          x: Math.random() * width,
+          y: Math.random() * height,
+          draggable: true
+        });
+        var shape = new Konva.Rect({
+          width: 30 + Math.random() * 30,
+          height: 30 + Math.random() * 30,
+          fill: 'grey',
+          rotation: 360 * Math.random(),
+          name: 'fillShape'
+        });
+        group.add(shape);
 
-        for (var i = 0; i < 10; i++) {
-            layer.add(createShape());
-        }
-        layer.draw();
+        var boundingBox = shape.getClientRect({ relativeTo: group });
 
-        layer.on('dragmove', function (e) {
-            var target = e.target;
-            var targetRect = e.target.getClientRect();
-            layer.children.each(function (group) {
-                // do not check intersection with itself
-                if (group === target) {
-                    return;
-                }
-                if (haveIntersection(group.getClientRect(), targetRect)) {
-                    group.findOne('.fillShape').fill('red');
-                } else {
-                    group.findOne('.fillShape').fill('green');
-                }
-                // do not need to call layer.draw() here
-                // because it will be called by dragmove action
-            });
-        })
+        var box = new Konva.Rect({
+          x: boundingBox.x,
+          y: boundingBox.y,
+          width: boundingBox.width,
+          height: boundingBox.height,
+          stroke: 'red',
+          strokeWidth: 1
+        });
+        group.add(box);
+        return group;
+      }
 
+      for (var i = 0; i < 10; i++) {
+        layer.add(createShape());
+      }
+      layer.draw();
 
+      layer.on('dragmove', function(e) {
+        var target = e.target;
+        var targetRect = e.target.getClientRect();
+        layer.children.each(function(group) {
+          // do not check intersection with itself
+          if (group === target) {
+            return;
+          }
+          if (haveIntersection(group.getClientRect(), targetRect)) {
+            group.findOne('.fillShape').fill('red');
+          } else {
+            group.findOne('.fillShape').fill('grey');
+          }
+          // do not need to call layer.draw() here
+          // because it will be called by dragmove action
+        });
+      });
 
-        function haveIntersection(r1, r2) {
-            return !(
-                r2.x > r1.x + r1.width ||
-                r2.x + r2.width < r1.x ||
-                r2.y > r1.y + r1.height ||
-                r2.y + r2.height < r1.y
-            );
-        }
+      function haveIntersection(r1, r2) {
+        return !(
+          r2.x > r1.x + r1.width ||
+          r2.x + r2.width < r1.x ||
+          r2.y > r1.y + r1.height ||
+          r2.y + r2.height < r1.y
+        );
+      }
     </script>
-
-</body>
-
-</html>
+  </body>
+</html>