chore(svelte): use prettier

packages/svelte/src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Header } from '../example-components/Header'
+  import { Header } from '../example-components/Header';
 </script>
 
 <div class="app">
@@ -19,4 +19,4 @@
   .flow {
     flex: 1;
   }
-</style>
+</style>

packages/svelte/src/routes/+page.svelte

@@ -1 +1 @@
-<div>this redirects to /overview</div>
+<div>this redirects to /overview</div>

packages/svelte/src/routes/customnode/+page.svelte

@@ -6,8 +6,10 @@
     Background,
     BackgroundVariant,
     MiniMap,
+    Position,
+    type Node,
     type NodeTypes,
-    Position
+    type Edge
   } from '../../lib/index';
   import { CustomNode } from './CustomNode';
 
@@ -15,8 +17,8 @@
     colorNode: CustomNode
   };
 
-  const bgColor = writable('#1A192B')
-  
+  const bgColor = writable('#1A192B');
+
   const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
     nodes.update((nds) =>
       nds.map((node) => {
@@ -32,75 +34,69 @@
           ...node,
           data: {
             ...node.data,
-            color,
-          },
+            color
+          }
         };
       })
     );
   };
 
-  const nodes = writable([
-  {
-    id: '1',
-    type: 'input',
-    data: { label: 'An input node' },
-    position: { x: 0, y: 50 },
-    sourcePosition: Position.Right,
-  },
-  {
-    id: '2',
-    type: 'colorNode',
-    data: { onChange: onChange, color: $bgColor },
-    style: 'border: 1px solid #777; padding: 10px',
-    position: { x: 250, y: 50 },
-  },
-  {
-    id: '3',
-    type: 'output',
-    data: { label: 'Output A' },
-    position: { x: 650, y: 25 },
-    targetPosition: Position.Left,
-  },
-  {
-    id: '4',
-    type: 'output',
-    data: { label: 'Output B' },
-    position: { x: 650, y: 120 },
-    targetPosition: Position.Left,
-  },
+  const nodes = writable<Node[]>([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'An input node' },
+      position: { x: 0, y: 50 },
+      sourcePosition: Position.Right
+    },
+    {
+      id: '2',
+      type: 'colorNode',
+      data: { onChange: onChange, color: $bgColor },
+      style: 'border: 1px solid #777; padding: 10px',
+      position: { x: 250, y: 50 }
+    },
+    {
+      id: '3',
+      type: 'output',
+      data: { label: 'Output A' },
+      position: { x: 650, y: 25 },
+      targetPosition: Position.Left
+    },
+    {
+      id: '4',
+      type: 'output',
+      data: { label: 'Output B' },
+      position: { x: 650, y: 120 },
+      targetPosition: Position.Left
+    }
   ]);
 
-  const edges = writable([
+  const edges = writable<Edge[]>([
     {
       id: 'e1-2',
       source: '1',
       target: '2',
-      animated: true,
+      animated: true
     },
     {
       id: 'e2a-3',
       source: '2',
       sourceHandle: 'a',
       target: '3',
-      animated: true,
+      animated: true
     },
     {
       id: 'e2b-4',
       source: '2',
       sourceHandle: 'b',
       target: '4',
-      animated: true,
-    },
+      animated: true
+    }
   ]);
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
-  {nodeTypes}
-  style="--bgcolor: {$bgColor}"
-  fitView
->
+<SvelteFlow {nodes} {edges} {nodeTypes} style="--bgcolor: {$bgColor}" fitView>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />

packages/svelte/src/routes/customnode/CustomNode/Custom.svelte

@@ -2,7 +2,7 @@
   import { Position } from '@xyflow/system';
   import { Handle } from '../../../lib/index';
 
-  export let data: { color: string, onChange: () => void } = { color: '#111', onChange: () => {} };
+  export let data: { color: string; onChange: () => void } = { color: '#111', onChange: () => {} };
   export let xPos: number = 0;
   export let yPos: number = 0;
 </script>
@@ -12,10 +12,5 @@
   Custom Color Picker Node: <strong>{data.color}</strong>
 </div>
 <input class="nodrag" type="color" on:input={data.onChange} value={data.color} />
-<Handle
-  type="source"
-  position={Position.Right}
-  id="a"
-  style="top: 10px;"
-/>
-<Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;"  />
+<Handle type="source" position={Position.Right} id="a" style="top: 10px;" />
+<Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;" />

packages/svelte/src/routes/drag-n-drop/Flow.svelte

@@ -10,28 +10,26 @@
   } from '../../lib/index';
   import Sidebar from './Sidebar.svelte';
 
-  const nodes = writable(
-    [
-      {
-        id: '1',
-        type: 'input',
-        data: { label: 'Input Node' },
-        position: { x: 150, y: 5 }
-      },
-      {
-        id: '2',
-        type: 'default',
-        data: { label: 'Node' },
-        position: { x: 0, y: 150 }
-      },
-      {
-        id: '3',
-        type: 'output',
-        data: { label: 'Output Node' },
-        position: { x: 300, y: 150 }
-      }
-    ]
-  );
+  const nodes = writable([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'Input Node' },
+      position: { x: 150, y: 5 }
+    },
+    {
+      id: '2',
+      type: 'default',
+      data: { label: 'Node' },
+      position: { x: 0, y: 150 }
+    },
+    {
+      id: '3',
+      type: 'output',
+      data: { label: 'Output Node' },
+      position: { x: 300, y: 150 }
+    }
+  ]);
 
   const edges = writable([
     {
@@ -54,7 +52,7 @@
   const onDragOver = (event: DragEvent) => {
     event.preventDefault();
 
-    console.log(event)
+    console.log(event);
 
     if (event.dataTransfer) {
       event.dataTransfer.dropEffect = 'move';
@@ -71,27 +69,21 @@
     const type = event.dataTransfer.getData('application/svelteflow');
     const position = svelteFlow.project({
       x: event.clientX,
-      y: event.clientY - 40,
+      y: event.clientY - 40
     });
     const newNode: Node = {
       id: `${Math.random()}`,
       type,
       position,
-      data: { label: `${type} node` },
+      data: { label: `${type} node` }
     };
 
-    svelteFlow.nodes.update(nds => nds.concat(newNode));
+    svelteFlow.nodes.update((nds) => nds.concat(newNode));
   };
 </script>
 
 <main>
-  <SvelteFlow
-    {nodes}
-    {edges}
-    fitView
-    on:dragover={onDragOver}
-    on:drop={onDrop}
-  >
+  <SvelteFlow {nodes} {edges} fitView on:dragover={onDragOver} on:drop={onDrop}>
     <Controls />
     <Background variant={BackgroundVariant.Dots} />
     <MiniMap />
@@ -104,4 +96,4 @@
     height: 100%;
     display: flex;
   }
-</style>
+</style>

packages/svelte/src/routes/drag-n-drop/Sidebar.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import {
-    useSvelteFlow
-  } from '../../lib/index';
+  import { useSvelteFlow } from '../../lib/index';
 
   const onDragStart = (event: DragEvent, nodeType: string) => {
     if (!event.dataTransfer) {
@@ -17,7 +15,11 @@
 
 <aside>
   <div class="label">You can drag these nodes to the pane on the left.</div>
-  <div class="input-node node" on:dragstart={(event) => onDragStart(event, 'input')} draggable={true}>
+  <div
+    class="input-node node"
+    on:dragstart={(event) => onDragStart(event, 'input')}
+    draggable={true}
+  >
     Input Node
   </div>
   <div
@@ -38,7 +40,7 @@
 
 <style>
   .label {
-    margin: 0.5rem 0 .25rem 0;
+    margin: 0.5rem 0 0.25rem 0;
   }
 
   aside {
@@ -51,9 +53,9 @@
   .node {
     margin-bottom: 0.5rem;
     border: 1px solid #111;
-    padding: .5rem 1rem;
+    padding: 0.5rem 1rem;
     font-weight: 700;
     border-radius: 3px;
     cursor: grab;
   }
-</style>
+</style>

packages/svelte/src/routes/edges/+page.svelte

@@ -13,7 +13,7 @@
       id: '1',
       type: 'input',
       data: { label: 'Input 1' },
-      position: { x: 250, y: 0 },
+      position: { x: 250, y: 0 }
     },
     { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
     { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
@@ -26,26 +26,26 @@
       id: '6',
       type: 'output',
       data: { label: 'Output 6' },
-      position: { x: 50, y: 550 },
+      position: { x: 50, y: 550 }
     },
     {
       id: '7',
       type: 'output',
       data: { label: 'Output 7' },
-      position: { x: 250, y: 550 },
+      position: { x: 250, y: 550 }
     },
     {
       id: '8',
       type: 'output',
       data: { label: 'Output 8' },
-      position: { x: 525, y: 600 },
+      position: { x: 525, y: 600 }
     },
     {
       id: '9',
       type: 'output',
       data: { label: 'Output 9' },
-      position: { x: 675, y: 500 },
-    },
+      position: { x: 675, y: 500 }
+    }
   ]);
 
   const edges = writable([
@@ -53,21 +53,21 @@
       id: 'e1-2',
       source: '1',
       target: '2',
-      label: 'bezier edge (default)',
+      label: 'bezier edge (default)'
     },
     {
       id: 'e2-2a',
       source: '2',
       target: '2a',
       type: 'smoothstep',
-      label: 'smoothstep edge',
+      label: 'smoothstep edge'
     },
     {
       id: 'e2a-2b',
       source: '2a',
       target: '2b',
       type: 'simplebezier',
-      label: 'simple bezier edge',
+      label: 'simple bezier edge'
     },
     { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
     {
@@ -75,7 +75,7 @@
       source: '3',
       target: '4',
       type: 'straight',
-      label: 'straight edge',
+      label: 'straight edge'
     },
     {
       id: 'e3-3a',
@@ -83,7 +83,7 @@
       target: '3a',
       type: 'straight',
       label: 'label only edge',
-      style: 'stroke: none',
+      style: 'stroke: none'
     },
     {
       id: 'e3-5',
@@ -91,7 +91,7 @@
       target: '5',
       animated: true,
       label: 'animated styled edge',
-      style: 'stroke: red',
+      style: 'stroke: red'
     },
     {
       id: 'e5-7',
@@ -100,20 +100,20 @@
       label: 'label with styled bg',
       labelStyle: 'background: #FFCC00; color: #fff; opacity: 0.7',
       markerEnd: {
-        type: MarkerType.ArrowClosed,
-      },
+        type: MarkerType.ArrowClosed
+      }
     },
     {
       id: 'e5-8',
       source: '5',
       target: '8',
-      data: { text: 'custom edge' },
+      data: { text: 'custom edge' }
     },
     {
       id: 'e5-9',
       source: '5',
       target: '9',
-      data: { text: 'custom edge 2' },
+      data: { text: 'custom edge 2' }
     },
     {
       id: 'e5-6',
@@ -128,7 +128,7 @@
         markerUnits: 'userSpaceOnUse',
         width: 20,
         height: 20,
-        strokeWidth: 2,
+        strokeWidth: 2
       },
       markerStart: {
         type: MarkerType.ArrowClosed,
@@ -136,17 +136,13 @@
         orient: 'auto-start-reverse',
         markerUnits: 'userSpaceOnUse',
         width: 20,
-        height: 20,
-      },
-    },
+        height: 20
+      }
+    }
   ]);
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
-  fitView
->
+<SvelteFlow {nodes} {edges} fitView>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />

packages/svelte/src/routes/interaction/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     Controls,
     Panel,
@@ -7,7 +7,7 @@
     MiniMap,
     type OnMoveEnd,
     type Node,
-    type Edge,
+    type Edge
   } from '../../lib/index';
 
   const nodes = writable([
@@ -15,16 +15,16 @@
       id: '1',
       type: 'input',
       data: { label: 'Node 1' },
-      position: { x: 250, y: 5 },
+      position: { x: 250, y: 5 }
     },
     { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
     { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-    { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+    { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }
   ]);
 
   const edges = writable([
     { id: 'e1-2', source: '1', target: '2', animated: true },
-    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e1-3', source: '1', target: '3' }
   ]);
 
   const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
@@ -36,7 +36,6 @@
   const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
   const onMoveEnd: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
 
-
   let isSelectable = false;
   let isDraggable = false;
   let isConnectable = false;
@@ -57,13 +56,13 @@
   elementsSelectable={isSelectable}
   nodesConnectable={isConnectable}
   nodesDraggable={isDraggable}
-  zoomOnScroll={zoomOnScroll}
-  zoomOnPinch={zoomOnPinch}
-  panOnScroll={panOnScroll}
-  panOnScrollMode={panOnScrollMode}
-  zoomOnDoubleClick={zoomOnDoubleClick}
-  panOnDrag={panOnDrag}
-  onMoveEnd={onMoveEnd}
+  {zoomOnScroll}
+  {zoomOnPinch}
+  {panOnScroll}
+  {panOnScrollMode}
+  {zoomOnDoubleClick}
+  {panOnDrag}
+  {onMoveEnd}
 >
   <MiniMap />
   <Controls />
@@ -141,7 +140,9 @@
         <select
           id="panonscrollmode"
           bind:value={panOnScrollMode}
-          on:change={(event) => { panOnScrollMode = PanOnScrollMode.Free }}
+          on:change={(event) => {
+            panOnScrollMode = PanOnScrollMode.Free;
+          }}
           class="react-flow__panonscrollmode"
         >
           <option value="free">free</option>

packages/svelte/src/routes/overview/+page.svelte

@@ -34,14 +34,14 @@
       type: 'default',
       data: { label: 'Node' },
       position: { x: 0, y: 150 },
-      selectable: false,
+      selectable: false
     },
     {
       id: 'A',
       type: 'default',
       data: { label: 'Styled with class' },
       class: 'custom-style',
-      position: { x: 150, y: 150 },
+      position: { x: 150, y: 150 }
     },
     {
       id: 'D',
@@ -90,25 +90,27 @@
       id: '2-4',
       type: 'custom',
       source: '2',
-      target: '4',
+      target: '4'
     }
   ]);
 
   function updateNode() {
-    nodes.update(nds => nds.map(n => {
-      if (n.id === '1') {
-        return {
-          ...n,
-          position: { x: n.position.x + 20, y: n.position.y }
+    nodes.update((nds) =>
+      nds.map((n) => {
+        if (n.id === '1') {
+          return {
+            ...n,
+            position: { x: n.position.x + 20, y: n.position.y }
+          };
         }
-      }
 
-      return n;
-    }));
+        return n;
+      })
+    );
   }
 
   $: {
-    console.log('nodes changed', $nodes)
+    console.log('nodes changed', $nodes);
   }
 </script>
 
@@ -124,14 +126,17 @@
   initialViewport={{ x: 100, y: 100, zoom: 2 }}
   snapGrid={[25, 25]}
   on:node:click={(event) => console.log('on node click', event)}
-  on:node:mouseenter={(event) => console.log('on node enter', event)} 
+  on:node:mouseenter={(event) => console.log('on node enter', event)}
   on:node:mouseleave={(event) => console.log('on node leave', event)}
   on:edge:click={(event) => console.log('edge click', event)}
   on:connect:start={(event) => console.log('on connect start', event)}
   on:connect={(event) => console.log('on connect', event)}
   on:connect:end={(event) => console.log('on connect end', event)}
   on:pane:click={(event) => console.log('on pane click', event)}
-  on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
+  on:pane:contextmenu={(event) => {
+    event.preventDefault();
+    console.log('on pane contextmenu', event);
+  }}
 >
   <Controls />
   <Background variant={BackgroundVariant.Dots} />

packages/svelte/src/routes/overview/CustomEdge/Custom.svelte

@@ -17,7 +17,7 @@
   const svelteFlow = useSvelteFlow();
 
   function onClick() {
-    svelteFlow.edges.update(eds => eds.filter(e => e.id !== $$props.id));
+    svelteFlow.edges.update((eds) => eds.filter((e) => e.id !== $$props.id));
   }
 </script>
 
@@ -29,11 +29,10 @@
     class="edge-button"
     on:click={onClick}
   >
-  ✕
+    ✕
   </button>
 </EdgeLabelRenderer>
 
-
 <style>
   .edge-button {
     border-radius: 50%;
@@ -49,8 +48,8 @@
     cursor: pointer;
     background-color: #eee;
   }
-  
+
   .edge-button:hover {
-    box-shadow: 0 0 2px 1px rgba(0,0,0,0.12);
+    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.12);
   }
-</style>
+</style>

packages/svelte/src/routes/stress/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     Controls,
     Background,
@@ -26,7 +26,7 @@
         id,
         data,
         position,
-        type: 'default',
+        type: 'default'
       };
       nodeItems.push(node);
 
@@ -34,7 +34,7 @@
         const edge = {
           id: `${source.id}-${id}`,
           source: source.id,
-          target: id,
+          target: id
         };
         edgeItems.push(edge);
       }
@@ -47,12 +47,7 @@
   const edges = writable(edgeItems);
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
-  fitView
-  minZoom={0.2}
->
+<SvelteFlow {nodes} {edges} fitView minZoom={0.2}>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />

packages/svelte/src/routes/subflows/+page.svelte

@@ -1,31 +1,32 @@
 <script lang="ts">
-    import { writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     Controls,
     Background,
     BackgroundVariant,
     MiniMap,
     type NodeTypes,
+    type Node
   } from '../../lib/index';
   import { DebugNode } from './DebugNode';
-  
+
   const nodeTypes: NodeTypes = {
-    default: DebugNode,
+    default: DebugNode
   };
 
-  const nodes = writable([
+  const nodes = writable<Node[]>([
     {
       id: '1',
       type: 'input',
       data: { label: 'Node 1' },
       position: { x: 250, y: 5 },
-      origin: [0.5, 0.5],
+      origin: [0.5, 0.5]
     },
     {
       id: '4',
       data: { label: 'Node 4' },
       position: { x: 100, y: 200 },
-      style: "width:500px; height:300px;"
+      style: 'width:500px; height:300px;'
     },
     {
       id: '4a',
@@ -34,96 +35,89 @@
       parentNode: '4',
       extent: [
         [0, 0],
-        [100, 100],
-      ],
+        [100, 100]
+      ]
     },
     {
       id: '4b',
       data: { label: 'Node 4b' },
       position: { x: 100, y: 60 },
-      style: "width: 300px; height: 200px;",
-      parentNode: '4',
+      style: 'width: 300px; height: 200px;',
+      parentNode: '4'
     },
     {
       id: '4b1',
       data: { label: 'Node 4b1' },
       position: { x: 40, y: 20 },
-      parentNode: '4b',
+      parentNode: '4b'
     },
     {
       id: '4b2',
       data: { label: 'Node 4b2' },
       position: { x: 20, y: 100 },
-      parentNode: '4b',
+      parentNode: '4b'
     },
     {
       id: '5',
       type: 'group',
       data: { label: 'Node 5' },
       position: { x: 650, y: 250 },
-      style: "width: 400px; height: 150px",
-      zIndex: 1000,
+      style: 'width: 400px; height: 150px',
+      zIndex: 1000
     },
     {
       id: '5a',
       data: { label: 'Node 5a' },
       position: { x: 0, y: 0 },
       parentNode: '5',
-      extent: 'parent',
+      extent: 'parent'
     },
     {
       id: '5b',
       data: { label: 'Node 5b' },
       position: { x: 225, y: 50 },
       parentNode: '5',
-      expandParent: true,
+      expandParent: true
     },
     {
       id: '2',
       data: { label: 'Node 2' },
-      position: { x: 100, y: 100 },
+      position: { x: 100, y: 100 }
     },
     {
       id: '3',
       data: { label: 'Node 3' },
-      position: { x: 400, y: 100 },
+      position: { x: 400, y: 100 }
     }
   ]);
 
   const edges = writable([
     {
-    id: 'e1-2',
-    source: '1',
-    target: '2',
-    // markerEnd: {
-    //   type: MarkerType.Arrow,
-    //   strokeWidth: 2,
-    //   width: 15,
-    //   height: 15,
-    //   color: '#f00',
-    // },
-  },
-  { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
-  { id: 'e3-4b', source: '3', target: '4b' },
-  { id: 'e4a-4b1', source: '4a', target: '4b1' },
-  { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
-  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+      id: 'e1-2',
+      source: '1',
+      target: '2'
+      // markerEnd: {
+      //   type: MarkerType.Arrow,
+      //   strokeWidth: 2,
+      //   width: 15,
+      //   height: 15,
+      //   color: '#f00',
+      // },
+    },
+    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
+    { id: 'e3-4b', source: '3', target: '4b' },
+    { id: 'e4a-4b1', source: '4a', target: '4b1' },
+    { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
+    { id: 'e4b1-4b2', source: '4b1', target: '4b2' }
   ]);
 
   $: {
-    console.log($nodes)
+    console.log($nodes);
   }
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
-  {nodeTypes}
-  fitView
-  minZoom={0.1}
-  maxZoom={2.5}
->
+<SvelteFlow {nodes} {edges} {nodeTypes} fitView minZoom={0.1} maxZoom={2.5}>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />
@@ -131,6 +125,6 @@
 
 <style>
   :global(.svelte-flow .svelte-flow__node.parent) {
-    background-color: rgba(220,220,255,0.4)
+    background-color: rgba(220, 220, 255, 0.4);
   }
 </style>

packages/svelte/src/routes/usesvelteflow/Flow.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import SvelteFlow, {
-    Controls,
-    Background,
-    BackgroundVariant,
-    MiniMap,
-  } from '../../lib/index';
+  import SvelteFlow, { Controls, Background, BackgroundVariant, MiniMap } from '../../lib/index';
   import Sidebar from './Sidebar.svelte';
 
   const nodes = writable([
@@ -47,11 +42,7 @@
 </script>
 
 <main>
-  <SvelteFlow
-    {nodes}
-    {edges}
-    fitView
-  >
+  <SvelteFlow {nodes} {edges} fitView>
     <Controls />
     <Background variant={BackgroundVariant.Dots} />
     <MiniMap />
@@ -64,4 +55,4 @@
     height: 100%;
     display: flex;
   }
-</style>
+</style>

packages/svelte/src/routes/usesvelteflow/Sidebar.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
-  import {
-    useSvelteFlow
-  } from '../../lib/index';
+  import { useSvelteFlow } from '../../lib/index';
 
-  const { zoomIn, zoomOut, setZoom, fitView, setCenter, setViewport, getViewport, viewport, nodes } = useSvelteFlow();
+  const {
+    zoomIn,
+    zoomOut,
+    setZoom,
+    fitView,
+    setCenter,
+    setViewport,
+    getViewport,
+    viewport,
+    nodes
+  } = useSvelteFlow();
 </script>
 
 <aside>
@@ -22,13 +30,15 @@
   {/each}
 
   <div class="label">Viewport:</div>
-  <div>x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}</div>
+  <div>
+    x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}
+  </div>
 </aside>
 
 <style>
   .label {
     font-weight: 700;
-    margin: 0.5rem 0 .25rem 0;
+    margin: 0.5rem 0 0.25rem 0;
   }
 
   aside {
@@ -43,4 +53,4 @@
     margin-bottom: 0.5rem;
     font-size: 12px;
   }
-</style>
+</style>