draggable splitter on mainscreen

packages/web/src/utility/clickOutside.ts

@@ -1,7 +1,7 @@
-export function clickOutside(node) {
+export default function clickOutside(node) {
   const handleClick = event => {
     if (node && !node.contains(event.target) && !event.defaultPrevented) {
-      node.dispatchEvent(new CustomEvent('clickOutside', node));
+      node.dispatchEvent(new CustomEvent('clickOutside'));
     }
   };
 

packages/web/src/utility/splitterDrag.ts

@@ -0,0 +1,38 @@
+export default function splitterDrag(node, axes) {
+  let resizeStart = null;
+
+  const handleResizeDown = e => {
+    resizeStart = e[axes];
+    document.addEventListener('mousemove', handleResizeMove, true);
+    document.addEventListener('mouseup', handleResizeEnd, true);
+  };
+
+  const handleResizeMove = e => {
+    e.preventDefault();
+    const diff = e[axes] - resizeStart;
+    resizeStart = e[axes];
+    node.dispatchEvent(
+      new CustomEvent('resizeSplitter', {
+        detail: diff,
+      })
+    );
+  };
+  const handleResizeEnd = e => {
+    e.preventDefault();
+    resizeStart = null;
+    document.removeEventListener('mousemove', handleResizeMove, true);
+    document.removeEventListener('mouseup', handleResizeEnd, true);
+  };
+
+  node.addEventListener('mousedown', handleResizeDown);
+
+  return {
+    destroy() {
+      node.removeEventListener('mousedown', handleResizeDown);
+      if (resizeStart != null) {
+        document.removeEventListener('mousemove', handleResizeMove, true);
+        document.removeEventListener('mouseup', handleResizeEnd, true);
+      }
+    },
+  };
+}