From 8cf014efa40ca16e348560d6043acc780a6fbc83 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 6 Mar 2021 08:52:35 +0100
Subject: [PATCH] splitters

---
 packages/web/src/datagrid/DataGrid.svelte     | 24 +++++++-
 .../src/elements/HorizontalSplitter.svelte    | 59 +++++++++++++++++++
 .../web/src/elements/VerticalSplitter.svelte  | 52 ++++++++++++++++
 3 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 packages/web/src/elements/HorizontalSplitter.svelte
 create mode 100644 packages/web/src/elements/VerticalSplitter.svelte

diff --git a/packages/web/src/datagrid/DataGrid.svelte b/packages/web/src/datagrid/DataGrid.svelte
index 2d28f7558..315cd2cbc 100644
--- a/packages/web/src/datagrid/DataGrid.svelte
+++ b/packages/web/src/datagrid/DataGrid.svelte
@@ -1,6 +1,28 @@
 <script lang="ts">
+  import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
+  import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
+
   export let config;
   export let gridCoreComponent;
+  export let showReferences = true;
 </script>
 
-<svelte:component this={gridCoreComponent} {...$$props} />
+<HorizontalSplitter initialValue="300px">
+  <div class="left" slot="1">
+    <WidgetColumnBar>
+      <WidgetColumnBarItem title="Columns" name="columns" height={showReferences ? '40%' : '60%'} />
+    </WidgetColumnBar>
+  </div>
+  <div slot="2">
+    <svelte:component this={gridCoreComponent} {...$$props} />
+  </div>
+</HorizontalSplitter>
+
+<style>
+  .left {
+    display: flex;
+    flex: 1;
+    background-color: var(--theme-bg-0);
+  }
+</style>
diff --git a/packages/web/src/elements/HorizontalSplitter.svelte b/packages/web/src/elements/HorizontalSplitter.svelte
new file mode 100644
index 000000000..69e65b381
--- /dev/null
+++ b/packages/web/src/elements/HorizontalSplitter.svelte
@@ -0,0 +1,59 @@
+<script context="module">
+  export function computeSplitterSize(initialValue, clientSize) {
+    if (_.isString(initialValue) && initialValue.endsWith('px')) return parseInt(initialValue.slice(0, -2));
+    if (_.isString(initialValue) && initialValue.endsWith('%'))
+      return (clientSize * parseFloat(initialValue.slice(0, -1))) / 100;
+    return clientSize / 2;
+  }
+</script>
+
+<script>
+  import _ from 'lodash';
+
+  import splitterDrag from '../utility/splitterDrag';
+
+  export let isSplitter = true;
+  export let initialValue = undefined;
+
+  let size = 0;
+  let clientWidth;
+
+  $: size = computeSplitterSize(initialValue, clientWidth);
+</script>
+
+<div class="container" bind:clientWidth>
+  <div class="child1" style={isSplitter ? `width:${size}px; min-width:${size}px; max-width:${size}px}` : `flex:1`}>
+    <slot name="1" />
+  </div>
+  {#if isSplitter}
+    <div class="horizontal-split-handle" use:splitterDrag={'clientX'} on:resizeSplitter={e => (size += e.detail)} />
+    <div class="child2">
+      <slot name="2" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    flex: 1;
+    display: flex;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  .child1 {
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .child2 {
+    flex: 1;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+</style>
diff --git a/packages/web/src/elements/VerticalSplitter.svelte b/packages/web/src/elements/VerticalSplitter.svelte
new file mode 100644
index 000000000..6caea4d3a
--- /dev/null
+++ b/packages/web/src/elements/VerticalSplitter.svelte
@@ -0,0 +1,52 @@
+<script>
+  import _ from 'lodash';
+
+  import splitterDrag from '../utility/splitterDrag';
+  import { computeSplitterSize } from './HorizontalSplitter.svelte';
+
+  export let isSplitter = true;
+  export let initialValue = undefined;
+
+  let size = 0;
+  let clientHeight;
+
+  $: size = computeSplitterSize(initialValue, clientHeight);
+</script>
+
+<div class="container" bind:clientHeight>
+  <div class="child1" style={isSplitter ? `height:${size}px; min-height:${size}px; max-height:${size}px}` : `flex:1`}>
+    <slot name="1" />
+  </div>
+  {#if isSplitter}
+    <div class="vertical-split-handle" use:splitterDrag={'clientY'} on:resizeSplitter={e => (size += e.detail)} />
+    <div class="child2">
+      <slot name="2" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    flex: 1;
+    display: flex;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    flex-direction: column;
+  }
+
+  .child1 {
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .child2 {
+    flex: 1;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+</style>