#810 hide non active tool strip containers

packages/web/src/buttons/ToolStripContainer.svelte

@@ -1,11 +1,24 @@
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import createActivator, { isComponentActiveStore } from '../utility/createActivator';
+
+  const thisInstance = get_current_component();
+
+  export const activator = createActivator('ToolStripContainer', false);
+
+  $: isComponentActive = $isComponentActiveStore('ToolStripContainer', thisInstance);
+</script>
+
 <div class="wrapper">
   <div class="content">
     <slot />
   </div>
 
+  {#if isComponentActive}
     <div class="toolstrip">
       <slot name="toolstrip" />
     </div>
+  {/if}
 </div>
 
 <style>

packages/web/src/utility/createActivator.ts

@@ -1,9 +1,12 @@
 import { getContext } from 'svelte';
 import { get_current_component, onMount, setContext } from 'svelte/internal';
 import invalidateCommands from '../commands/invalidateCommands';
+import { writable } from 'svelte/store';
 
 const lastActiveDictionary = {};
 
+export const isComponentActiveStore = writable((key: string, component) => false as boolean);
+
 function isParent(parent, child) {
   while (child && child.activator) {
     if (parent == child) return true;
@@ -63,6 +66,10 @@ export default function createActivator(
       parentActivatorInstance.activator.activate();
     }
     // console.log('Active components', lastActiveDictionary);
+
+    isComponentActiveStore.set((key, component) => {
+      return lastActiveDictionary[key] == component;
+    });
   };
 
   const getTabVisible = () => tabVisibleValue;