chore(svelte): revise useSvelteFlow example

2023-03-14 14:11:59 +01:00
parent 154be3f900
commit 1df4736203
7 changed files with 113 additions and 51 deletions
@@ -4,20 +4,24 @@
    Background,
    BackgroundVariant,
    Minimap,
-    Panel,
-    useSvelteFlow
  } from '../../lib/index';
- 
-  const svelteFlow = useSvelteFlow();
+  import Sidebar from './Sidebar.svelte';
 </script>

-<SvelteFlow>
-  <Controls />
-  <Background variant={BackgroundVariant.Dots} />
-  <Minimap />
-  <Panel position="top-right">
-    <button on:click={() => svelteFlow.zoomIn()}>zoom in</button>
-    <button on:click={() => svelteFlow.zoomOut({ duration: 1000 })}>zoom out transition</button>
-    <button on:click={() => svelteFlow.fitView()}>fitView</button>
-  </Panel>
-</SvelteFlow>
+<main>
+  <SvelteFlow
+    fitView
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+  </SvelteFlow>
+  <Sidebar />
+</main>
+
+<style>
+  main {
+    height: 100%;
+    display: flex;
+  }
+</style>