SYNC: widgetcolumnbar refactor

packages/web/src/widgets/WidgetColumnBar.svelte

@@ -1,38 +1,99 @@
 <script lang="ts">
-  import { setContext } from 'svelte';
+  import { onMount, setContext } from 'svelte';
   import { writable } from 'svelte/store';
-  import createRef from '../utility/createRef';
+  import _ from 'lodash';
 
   export let hidden = false;
 
   let definitions = [];
-  const dynamicPropsCollection = [];
   let clientHeight;
 
-  const widgetColumnBarHeight = writable(0);
+  // const widgetColumnBarHeight = writable(0);
+  const widgetColumnBarComputed = writable({});
+  let deltaHeights = {};
 
-  setContext('widgetColumnBarHeight', widgetColumnBarHeight);
-  setContext('pushWidgetItemDefinition', (item, dynamicProps) => {
-    dynamicPropsCollection.push(dynamicProps);
-    definitions = [...definitions, item];
-    return definitions.length - 1;
+  // setContext('widgetColumnBarHeight', widgetColumnBarHeight);
+  setContext('pushWidgetItemDefinition', (name, item) => {
+    definitions = {
+      ...definitions,
+      [name]: {
+        ...item,
+        name,
+        index: definitions.length,
+      },
+    };
   });
-  setContext('updateWidgetItemDefinition', (index, item) => {
-    definitions[index] = item;
+  setContext('updateWidgetItemDefinition', (name, item) => {
+    definitions = {
+      ...definitions,
+      [name]: { ...definitions[name], ...item },
+    };
   });
+  setContext('widgetResizeItem', (name, deltaHeight) => {
+    deltaHeights = {
+      ...deltaHeights,
+      [name]: (deltaHeights[name] || 0) + deltaHeight,
+    };
+    recompute(definitions);
+  });
+  setContext('widgetColumnBarComputed', widgetColumnBarComputed);
 
-  $: $widgetColumnBarHeight = clientHeight;
+  // $: $widgetColumnBarHeight = clientHeight;
 
-  $: computeDynamicProps(definitions);
+  $: recompute(definitions);
 
-  function computeDynamicProps(defs: any[]) {
-    const visibleItemsCount = defs.filter(x => !x.collapsed && !x.skip).length;
-    for (let index = 0; index < defs.length; index++) {
-      const definition = defs[index];
-      const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip && x.positiveCondition);
-      dynamicPropsCollection[index].set({ splitterVisible, visibleItemsCount });
+  function recompute(defs: any) {
+    const visibleItems = _.values(defs)
+      .filter(x => !x.collapsed && !x.skip)
+      .map(x => x.name);
+    const visibleItemsCount = visibleItems.length;
+
+    const computed = {};
+
+    let totalFixedHeight = 0;
+    let totalFlexibleItems = 0;
+    for (const key of visibleItems) {
+      const def = defs[key];
+      if (def.height != null) {
+        let height = 0;
+        if (_.isString(def.height) && def.height.endsWith('px')) height = parseInt(def.height.slice(0, -2));
+        else if (_.isString(def.height) && def.height.endsWith('%'))
+          height = (clientHeight * parseFloat(def.height.slice(0, -1))) / 100;
+        else height = parseInt(def.height);
+        totalFixedHeight += height;
+      } else {
+        totalFlexibleItems++;
+      }
     }
+
+    const remainingHeight = clientHeight - totalFixedHeight;
+    let visibleIndex = 0;
+    for (const key of visibleItems) {
+      const def = defs[key];
+      let size = 0;
+      if (def.height != null) {
+        if (_.isString(def.height) && def.height.endsWith('px')) size = parseInt(def.height.slice(0, -2));
+        else if (_.isString(def.height) && def.height.endsWith('%'))
+          size = (clientHeight * parseFloat(def.height.slice(0, -1))) / 100;
+        else size = parseInt(def.height);
+      } else {
+        size = remainingHeight / totalFlexibleItems;
+      }
+      size += deltaHeights[key] || 0;
+      computed[key] = {
+        size,
+        splitterVisible: visibleItemsCount > 1 && visibleIndex < visibleItemsCount - 1,
+        visibleItemsCount,
+      };
+      visibleIndex++;
+    }
+
+    $widgetColumnBarComputed = computed;
   }
+
+  onMount(() => {
+    recompute(definitions);
+  });
 </script>
 
 <div class="main-container" bind:clientHeight class:hidden>