Added mutationobserver to detect DOM movements and reset sensor accordingly.

marcj · marcj · commit f6144fb52192 · 2018-11-06T18:33:12.000+01:00
fixed a bug in Safari where dragdrop doesn't work with huge sensors
dimensions.
diff --git a/src/ResizeSensor.d.ts b/src/ResizeSensor.d.ts
@@ -1,6 +1,7 @@
 declare class ResizeSensor {
     constructor(element: (Element | Element[]), callback: Function);
     detach(callback: Function): void;
+    reset(element: Element | Element[]): void;
 }
 
 export default ResizeSensor;
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
@@ -131,7 +131,8 @@
             element.resizeSensor = document.createElement('div');
             element.resizeSensor.dir = 'ltr';
             element.resizeSensor.className = 'resize-sensor';
-            var style = 'position: absolute; left: -10px; top: -10px; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%';
+            var style = 'pointer-events: none; position: absolute; left: 0px; top: 0px; right: 0; bottom: 0; ' +
+                'overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%;';
             var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
 
             element.resizeSensor.style.cssText = style;
@@ -161,14 +162,17 @@
             var lastAnimationFrame = 0;
 
             var resetExpandShrink = function () {
-                expandChild.style.width = '100000px';
-                expandChild.style.height = '100000px';
+                var width = element.offsetWidth;
+                var height = element.offsetHeight;
 
-                expand.scrollLeft = 100000;
-                expand.scrollTop = 100000;
+                expandChild.style.width = (width + 10) + 'px';
+                expandChild.style.height = (height + 10) + 'px';
 
-                shrink.scrollLeft = 100000;
-                shrink.scrollTop = 100000;
+                expand.scrollLeft = width + 10;
+                expand.scrollTop = height + 10;
+
+                shrink.scrollLeft = width + 10;
+                shrink.scrollTop = height + 10;
             };
 
             var reset = function() {
@@ -248,7 +252,7 @@
         };
     };
 
-    ResizeSensor.reset = function(element, ev) {
+    ResizeSensor.reset = function(element) {
         forEachElement(element, function(elem){
             elem.resizeSensor.resetSensor();
         });
@@ -271,6 +275,27 @@
         });
     };
 
+    if (typeof MutationObserver !== "undefined") {
+        var observer = new MutationObserver(function (mutations) {
+            for (var i in mutations) {
+                var items = mutations[i].addedNodes;
+                for (var j = 0; j < items.length; j++) {
+                    if (items[j].resizeSensor) {
+                        ResizeSensor.reset(items[j]);
+                    }
+                }
+
+            }
+        });
+
+        document.addEventListener("DOMContentLoaded", function (event) {
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        });
+    }
+
     return ResizeSensor;
 
 }));
diff --git a/tests/mutation/app.js b/tests/mutation/app.js
@@ -0,0 +1,75 @@
+var __values = (this && this.__values) || function (o) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
+    if (m) return m.call(o);
+    return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+};
+var e_1, _a, e_2, _b;
+var state = {
+    dragged: null
+};
+var i = 0;
+try {
+    for (var _c = __values(document.getElementsByClassName('drag')), _d = _c.next(); !_d.done; _d = _c.next()) {
+        var item = _d.value;
+        i++;
+        item.setAttribute('draggable', 'true');
+        item.setAttribute('id', 'drag-' + i);
+        (function (element) {
+            var title = 'Drag me #' + i;
+            element.setAttribute('data-label', title);
+            new ResizeSensor(element, function (size) {
+                element.setAttribute('data-label', title + " (" + size.width + "x" + size.height + ")");
+            });
+        })(item);
+        item.addEventListener('dragstart', function (event) {
+            state.dragged = event.target;
+            event.dataTransfer.setData('text', 'thanks firefox');
+            event.dataTransfer.dropEffect = 'move';
+        });
+    }
+}
+catch (e_1_1) { e_1 = { error: e_1_1 }; }
+finally {
+    try {
+        if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+    }
+    finally { if (e_1) throw e_1.error; }
+}
+var _loop_1 = function (item) {
+    (function (element) {
+        item.addEventListener('drop', function (event) {
+            event.preventDefault();
+            item.classList.remove('drag-hover');
+            state.dragged.parentNode.removeChild(state.dragged);
+            element.appendChild(state.dragged);
+            state.dragged = null;
+        });
+    })(item);
+    item.addEventListener('dragleave', function (event) {
+        item.classList.remove('drag-hover');
+    });
+    item.addEventListener('dragover', function (event) {
+        item.classList.add('drag-hover');
+    });
+    item.addEventListener('dragover', function (event) {
+        event.preventDefault();
+    });
+};
+try {
+    for (var _e = __values(document.getElementsByClassName('container')), _f = _e.next(); !_f.done; _f = _e.next()) {
+        var item = _f.value;
+        _loop_1(item);
+    }
+}
+catch (e_2_1) { e_2 = { error: e_2_1 }; }
+finally {
+    try {
+        if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+    }
+    finally { if (e_2) throw e_2.error; }
+}
diff --git a/tests/mutation/app.ts b/tests/mutation/app.ts
@@ -0,0 +1,56 @@
+declare const ResizeSensor;
+
+const state: {
+    dragged: Element
+} = {
+    dragged: null
+};
+
+let i = 0;
+
+for (const item of document.getElementsByClassName('drag')) {
+    i++;
+    item.setAttribute('draggable', 'true');
+    item.setAttribute('id', 'drag-' + i);
+
+    (element => {
+        const title = 'Drag me #' + i;
+        element.setAttribute('data-label', title);
+
+        new ResizeSensor(element, (size) => {
+            element.setAttribute('data-label', `${title} (${size.width}x${size.height})`);
+        });
+    })(item);
+
+    item.addEventListener('dragstart', (event: DragEvent) => {
+        state.dragged = <Element>event.target;
+        event.dataTransfer.setData('text', 'thanks firefox');
+        event.dataTransfer.dropEffect = 'move';
+    });
+}
+
+for (const item of document.getElementsByClassName('container')) {
+    (element => {
+        item.addEventListener('drop', (event) => {
+            event.preventDefault();
+            item.classList.remove('drag-hover');
+
+            state.dragged.parentNode.removeChild(state.dragged);
+            element.appendChild(state.dragged);
+
+            state.dragged = null;
+        });
+    })(item);
+
+    item.addEventListener('dragleave', (event) => {
+        item.classList.remove('drag-hover');
+    });
+
+    item.addEventListener('dragover', (event) => {
+        item.classList.add('drag-hover');
+    });
+
+    item.addEventListener('dragover', (event) => {
+        event.preventDefault();
+    });
+}
diff --git a/tests/mutation/index.html b/tests/mutation/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8" />
+    <style type="text/css">
+        body {
+            background-color: #fafafa;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        .container {
+            margin: 15px;
+            padding: 15px;
+            border: 1px solid silver;
+            border-radius: 3px;
+            min-height: 250px;
+            background-color: rgba(255, 255, 255, 0.86);
+        }
+
+        .container.drag-hover {
+            border: 1px solid red;
+            background-color: rgba(255, 125, 15, 0.18);
+        }
+
+        @keyframes wrapple {
+            0%, 100% {
+                width: 150px;
+                height: 150px;
+            }
+
+            50% {
+                width: 120px;
+                height: 120px;
+            }
+        }
+
+        .drag {
+            border: 1px solid silver;
+            border-radius: 5px;
+            margin: 15px;
+            width: 150px;
+            height: 150px;
+            background-color: #d1ffff;
+            animation-name: wrapple;
+            animation-duration: 4s;
+            animation-iteration-count: infinite;
+
+            display: inline-flex;
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .drag::after {
+            font-size: 12px;
+            content: attr(data-label);
+        }
+    </style>
+
+    <script src="../../src/ResizeSensor.js"></script>
+</head>
+<body>
+<div id="container1" class="container">
+    <div class="drag" draggable="true"></div>
+    <div class="drag"></div>
+</div>
+
+<div id="container2" class="container">
+    <div class="drag"></div>
+    <div class="drag"></div>
+</div>
+
+<script type="application/javascript" src="./app.js"></script>
+</body>
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "downlevelIteration": true,
+    "lib" : ["dom","es6","dom.iterable","scripthost", "es2015.iterable", "es2015.collection"]
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`declare class ResizeSensor {`
`2`	`2`	`constructor(element: (Element \| Element[]), callback: Function);`
`3`	`3`	`detach(callback: Function): void;`
	`4`	`+ reset(element: Element \| Element[]): void;`
`4`	`5`	`}`
`5`	`6`
`6`	`7`	`export default ResizeSensor;`