initial chart checkin

2024-01-29 01:25:48 -04:00
parent ee021c9590
commit 29fcad1059
23 changed files with 490 additions and 42 deletions
--- a/src/components/SplitPane.vue
+++ b/src/components/SplitPane.vue
@@ -0,0 +1,146 @@
+<!-- Adapted from https://phuoc.ng/collection/html-dom/create-resizable-split-views/ -->
+
+<template>
+  <div class="container">
+    <div class="top">
+      <slot name="top"/>
+    </div>
+    <div class="resizer bg-grey-lighten-2" :data-direction="horizontal?'horizontal':'vertical'" ref="resizerElement"></div>
+    <div class="bottom">
+      <slot name="bottom"/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import {onMounted, ref} from "vue";
+
+const resizerElement = ref()
+const props = defineProps(['horizontal'])
+
+function resizable() {
+  const resizer = resizerElement.value
+  const direction = resizer.getAttribute('data-direction') || 'horizontal';
+  const prevSibling = resizer.previousElementSibling;
+  const nextSibling = resizer.nextElementSibling;
+
+  // The current position of mouse
+  let x = 0;
+  let y = 0;
+  let prevSiblingHeight = 0;
+  let prevSiblingWidth = 0;
+
+  // Handle the mousedown event
+  // that's triggered when user drags the resizer
+  const mouseDownHandler = function (e) {
+    // Get the current mouse position
+    x = e.clientX;
+    y = e.clientY;
+    const rect = prevSibling.getBoundingClientRect();
+    prevSiblingHeight = rect.height;
+    prevSiblingWidth = rect.width;
+
+    // Attach the listeners to document
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+  };
+
+  const mouseMoveHandler = function (e) {
+    // How far the mouse has been moved
+    const dx = e.clientX - x;
+    const dy = e.clientY - y;
+
+    switch (direction) {
+      case 'vertical':
+        const h =
+            ((prevSiblingHeight + dy) * 100) /
+            resizer.parentNode.getBoundingClientRect().height;
+        prevSibling.style.height = h + '%';
+        break;
+      case 'horizontal':
+      default:
+        const w =
+            ((prevSiblingWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
+        prevSibling.style.width = w + '%';
+        break;
+    }
+
+    const cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+    resizer.style.cursor = cursor;
+    document.body.style.cursor = cursor;
+
+    prevSibling.style.userSelect = 'none';
+    prevSibling.style.pointerEvents = 'none';
+
+    nextSibling.style.userSelect = 'none';
+    nextSibling.style.pointerEvents = 'none';
+  };
+
+  const mouseUpHandler = function () {
+    resizer.style.removeProperty('cursor');
+    document.body.style.removeProperty('cursor');
+
+    prevSibling.style.removeProperty('user-select');
+    prevSibling.style.removeProperty('pointer-events');
+
+    nextSibling.style.removeProperty('user-select');
+    nextSibling.style.removeProperty('pointer-events');
+
+    // Remove the handlers of mousemove and mouseup
+    document.removeEventListener('mousemove', mouseMoveHandler);
+    document.removeEventListener('mouseup', mouseUpHandler);
+  };
+
+  // Attach the handler
+  resizer.addEventListener('mousedown', mouseDownHandler);
+};
+
+onMounted(resizable)
+
+</script>
+
+
+<style scoped lang="scss">
+@use 'src/styles/vars' as *;
+
+body {
+  height: 100vh;
+  width: 100vw;
+}
+
+.container {
+  display: flex;
+  flex: 1;
+
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+.resizer[data-direction='horizontal'] {
+  background-color: #cbd5e0;
+  cursor: ew-resize;
+  height: 100%;
+  width: 2px;
+}
+
+.resizer[data-direction='vertical'] {
+  cursor: ns-resize;
+  height: 4px;
+  width: 100%;
+}
+
+.top {
+  height: 68%;
+  width: 100%;
+  min-height: 5em;
+}
+
+.bottom {
+  flex: 1;
+  width: 100%;
+  min-height: 5em;
+}
+</style>