chore(svelte): run prettier

2023-02-28 12:48:52 +01:00
parent 62a6278682
commit dda21e1fd2
64 changed files with 1669 additions and 1646 deletions
@@ -1,5 +1,4 @@
 {
-	"useTabs": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100,
@@ -10,11 +10,7 @@
 </script>

 {#if $connectionPath}
-  <svg
-    width={$width}
-    height={$height}
-    class="react-flow__connectionline"
-  >
+  <svg width={$width} height={$height} class="react-flow__connectionline">
    <g class={cc(['react-flow__connection', $connection.status])}>
      <path d={$connectionPath} fill="none" class="react-flow__connection-path" />
    </g>
@@ -1,7 +1,7 @@
 <script lang="ts">
  import portal from '$lib/actions/portal';

-  type $$Props = {}
+  type $$Props = {};
 </script>

 <div use:portal={'.react-flow__edgelabel-renderer'}>
@@ -38,7 +38,7 @@
    // @todo add props
    // onConnectAction?.(edgeParams);
    // onConnect?.(edgeParams);
-    };
+  }

  function onPointerDown(event: MouseEvent | TouchEvent) {
    const isMouseTriggered = isMouseEvent(event);
@@ -58,7 +58,7 @@
        onConnect: onConnectExtended,
        updateConnection,
        cancelConnection,
-          panBy,
+        panBy
      });
    }

@@ -67,7 +67,7 @@
    // } else {
    //   onTouchStart?.(event);
    // }
-    };
+  }
 </script>

 <div
@@ -92,7 +92,6 @@
  <slot />
 </div>

-
 <style>
  .react-flow__handle {
    position: absolute;
@@ -2,7 +2,7 @@
  import { shortcut } from '@svelte-put/shortcut';

  import { useStore } from '$lib/store';
-  import type { KeyHandlerProps } from './KeyHandler'
+  import type { KeyHandlerProps } from './KeyHandler';
  import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';

  const { selectionKeyPressed, deleteKeyPressed } = useStore();
@@ -25,19 +25,43 @@

 <svelte:window
  use:shortcut={{
-    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressed.set(true) }],
+    trigger: [
+      {
+        key: selectionKeyString,
+        modifier: selectionKeyModifier,
+        callback: () => selectionKeyPressed.set(true)
+      }
+    ],
    type: 'keydown'
  }}
  use:shortcut={{
-    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressed.set(false) }],
+    trigger: [
+      {
+        key: selectionKeyString,
+        modifier: selectionKeyModifier,
+        callback: () => selectionKeyPressed.set(false)
+      }
+    ],
    type: 'keyup'
  }}
  use:shortcut={{
-    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressed.set(true) }],
+    trigger: [
+      {
+        key: deleteKeyString,
+        modifier: deleteKeyModifier,
+        callback: () => deleteKeyPressed.set(true)
+      }
+    ],
    type: 'keydown'
  }}
  use:shortcut={{
-    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressed.set(false) }],
+    trigger: [
+      {
+        key: deleteKeyString,
+        modifier: deleteKeyModifier,
+        callback: () => deleteKeyPressed.set(false)
+      }
+    ],
    type: 'keyup'
  }}
 />
@@ -3,11 +3,11 @@

  import { useStore } from '$lib/store';
  import Selection from '$lib/components/Selection/index.svelte';
-  import drag  from '$lib/actions/drag'
+  import drag from '$lib/actions/drag';

  const { selectionRectMode, nodes, nodeOrigin, transform, updateNodePositions } = useStore();

-  $: selectedNodes = $nodes.filter(n => n.selected);
+  $: selectedNodes = $nodes.filter((n) => n.selected);
  $: rect = getRectOfNodes(selectedNodes, $nodeOrigin);
 </script>

@@ -11,11 +11,7 @@
  export let interactionWidth: $$Props['interactionWidth'] = 20;
 </script>

-<path
-  d={path}
-  fill="none"
-  class="react-flow__edge-path"
-/>
+<path d={path} fill="none" class="react-flow__edge-path" />

 {#if interactionWidth}
  <path
@@ -12,13 +12,8 @@
    targetX: $$props.targetX,
    targetY: $$props.targetY,
    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
+    targetPosition: $$props.targetPosition
  });
 </script>

-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {...$$props}
-/>
+<BaseEdge {path} {labelX} {labelY} {...$$props} />
@@ -26,11 +26,7 @@
  const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypes[type!] || BezierEdge;
 </script>

-<g
-  class="react-flow__edge"
-  class:animated
-  data-id={id}
->
+<g class="react-flow__edge" class:animated data-id={id}>
  <svelte:component
    this={edgeComponent}
    {id}
@@ -12,13 +12,8 @@
    targetX: $$props.targetX,
    targetY: $$props.targetY,
    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
+    targetPosition: $$props.targetPosition
  });
 </script>

-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {...$$props}
-/>
+<BaseEdge {path} {labelX} {labelY} {...$$props} />
@@ -10,13 +10,8 @@
    sourceX: $$props.sourceX,
    sourceY: $$props.sourceY,
    targetX: $$props.targetX,
-    targetY: $$props.targetY,
+    targetY: $$props.targetY
  });
 </script>

-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {...$$props}
-/>
+<BaseEdge {path} {labelX} {labelY} {...$$props} />
@@ -10,4 +10,3 @@

 {data?.label}
 <Handle type="source" position={sourcePosition} />
-
@@ -3,7 +3,7 @@
  import cc from 'classcat';
  import { type XYPosition, Position } from '@reactflow/system';

-  import drag  from '$lib/actions/drag'
+  import drag from '$lib/actions/drag';
  import { useStore } from '$lib/store';
  import DefaultNode from './DefaultNode.svelte';
  import type { WrapNodeProps, NodeProps } from '$lib/types';
@@ -29,7 +29,8 @@
  let nodeRef: HTMLDivElement;

  const { nodes, transform, nodeTypes, updateNodePositions, addSelectedNodes } = useStore();
-  const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> = $nodeTypes[type] || DefaultNode;
+  const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> =
+    $nodeTypes[type] || DefaultNode;
  const isSelectable = true;
  const selectNodesOnDrag = false;
  const isDraggable = true;
@@ -41,7 +42,7 @@

    return () => {
      resizeObserver?.unobserve(nodeRef);
-    }
+    };
  });

  function onSelectNodeHandler(event: MouseEvent) {
@@ -54,15 +55,15 @@
    //   const node = store.getState().nodeInternals.get(id)!;
    //   onClick(event, { ...node });
    // }
-  };
+  }
 </script>

 <div
  use:drag={{ nodeId: id, nodes, transform, updateNodePositions }}
  class={cc(['react-flow__node', `react-flow__node-${type}`, className])}
  class:initializing={!width && !height}
-  class:dragging={dragging}
-  class:selected={selected}
+  class:dragging
+  class:selected
  bind:this={nodeRef}
  on:click={onSelectNodeHandler}
  style:transform={`translate(${positionAbsolute.x}px, ${positionAbsolute.y}px)`}
@@ -10,4 +10,3 @@

 {data?.label}
 <Handle type="target" position={targetPosition} />
-
@@ -5,11 +5,7 @@
  const { edgesLayouted, width, height } = useStore();
 </script>

-
-<svg
-  width={$width}
-  height={$height}
-  class="react-flow__edges"
+<svg width={$width} height={$height} class="react-flow__edges">
  {#each $edgesLayouted as edge (edge.id)}
    <EdgeWrapper {...edge} />
  {/each}
@@ -5,12 +5,15 @@
  import { useStore } from '$lib/store';

  const { nodes, updateNodeDimensions } = useStore();
-  const resizeObserver: ResizeObserver | null = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver((entries: ResizeObserverEntry[]) => {
+  const resizeObserver: ResizeObserver | null =
+    typeof ResizeObserver === 'undefined'
+      ? null
+      : new ResizeObserver((entries: ResizeObserverEntry[]) => {
          const updates = entries.map((entry: ResizeObserverEntry) => ({
            id: entry.target.getAttribute('data-id') as string,
            nodeElement: entry.target as HTMLDivElement,
-      forceUpdate: true,
-    }))
+            forceUpdate: true
+          }));

          updateNodeDimensions(updates);
        });
@@ -10,7 +10,7 @@

      handler?.(event);
    };
-  };
+  }

  export function toggleSelected<Item extends Node | Edge>(ids: string[]) {
    return (item: Item) => {
@@ -19,12 +19,12 @@
      if (item.selected !== isSelected) {
        return {
          ...item,
-          selected: isSelected,
+          selected: isSelected
        };
      }

      return item;
-    }
+    };
  }
 </script>

@@ -33,25 +33,34 @@
  import { SelectionMode, type Node, type Edge } from '@reactflow/system';
  import { getConnectedEdges, getEventPosition, getNodesInside } from '@reactflow/utils';

-  const { nodes, edges, transform, nodeOrigin, dragging, selectionRect, selectionRectMode, selectionKeyPressed, resetSelectedElements } = useStore();
+  const {
+    nodes,
+    edges,
+    transform,
+    nodeOrigin,
+    dragging,
+    selectionRect,
+    selectionRectMode,
+    selectionKeyPressed,
+    resetSelectedElements
+  } = useStore();

  // @todo take from props
  const elementsSelectable = true;
-  const selectionMode = SelectionMode.Partial
+  const selectionMode = SelectionMode.Partial;

  let container: HTMLDivElement;
-  let containerBounds: DOMRect | null = null
+  let containerBounds: DOMRect | null = null;
  let selectedNodes: Node[] = [];

  $: isSelecting = $selectionKeyPressed;
  $: hasActiveSelection = elementsSelectable && (isSelecting || $selectionRectMode === 'user');

-
  function onClick(event: MouseEvent) {
    // onPaneClick?.(event);

    resetSelectedElements();
-    selectionRectMode.set(null)
+    selectionRectMode.set(null);
  }

  function onMouseDown(event: MouseEvent) {
@@ -80,11 +89,8 @@
      y
    });

-   
    // onSelectionStart?.(event);
-  };
-
-
+  }

  function onMouseMove(event: MouseEvent) {
    if (!isSelecting || !containerBounds || !$selectionRect) {
@@ -98,11 +104,11 @@
      x: mousePos.x < startX ? mousePos.x : startX,
      y: mousePos.y < startY ? mousePos.y : startY,
      width: Math.abs(mousePos.x - startX),
-      height: Math.abs(mousePos.y - startY),
+      height: Math.abs(mousePos.y - startY)
    };

    selectedNodes = getNodesInside(
-      new Map($nodes.map(node => [node.id, node])),
+      new Map($nodes.map((node) => [node.id, node])),
      nextUserSelectRect,
      $transform,
      selectionMode === SelectionMode.Partial,
@@ -112,8 +118,8 @@
    const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
    const selectedNodeIds = selectedNodes.map((n) => n.id);

-    nodes.update(nodes => nodes.map(toggleSelected(selectedNodeIds)));
-    edges.update(edges => edges.map(toggleSelected(selectedEdgeIds)));
+    nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
+    edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));

    selectionRectMode.set('user');
    selectionRect.set(nextUserSelectRect);
@@ -135,7 +141,6 @@
      selectionRectMode.set('nodes');
    }

-    
    // onSelectionEnd?.(event);
  }

@@ -7,15 +7,12 @@
  export let position: $$Props['position'] = 'top-right';
  export let style: $$Props['style'] = '';
  let className: $$Props['class'] = undefined;
-  export { className as class }
+  export { className as class };

  $: positionClasses = `${position}`.split('-');
 </script>

-<div
-  class={cc(['react-flow__panel', className, ...positionClasses])}
-  style={style}
->
+<div class={cc(['react-flow__panel', className, ...positionClasses])} {style}>
  <slot />
 </div>

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { setContext, onMount } from 'svelte'
+  import { setContext, onMount } from 'svelte';
  import cc from 'classcat';

  import { key, createStore } from '$lib/store';
@@ -51,7 +51,6 @@
    });
  });

-
  // $: {
  //   const updatableProps = {
  //     defaultEdgeOptions,
@@ -86,7 +85,7 @@
  {...$$restProps}
  class={cc(['react-flow', className])}
  data-testid="rf__wrapper"
-  id={id}
+  {id}
  bind:this={domNode}
 >
  <KeyHandler {selectionKey} {deleteKey} />
@@ -18,13 +18,13 @@
  const defaultColor = {
    [BackgroundVariant.Dots]: '#91919a',
    [BackgroundVariant.Lines]: '#eee',
-    [BackgroundVariant.Cross]: '#e2e2e2',
+    [BackgroundVariant.Cross]: '#e2e2e2'
  };

  const defaultSize = {
    [BackgroundVariant.Dots]: 1,
    [BackgroundVariant.Lines]: 1,
-    [BackgroundVariant.Cross]: 6,
+    [BackgroundVariant.Cross]: 6
  };

  const { transform, id } = useStore();
@@ -56,7 +56,7 @@
    {#if isDots}
      <DotPattern color={patternColor} radius={scaledSize / 2} />
    {:else}
-      <LinePattern dimensions={patternDimensions } color={patternColor} lineWidth={lineWidth} />
+      <LinePattern dimensions={patternDimensions} color={patternColor} {lineWidth} />
    {/if}
  </pattern>
  <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
@@ -1,6 +1,6 @@
 <script lang="ts">
  export let radius = 5;
-  export let color = "#000";
+  export let color = '#000';
 </script>

 <circle cx={radius} cy={radius} r={radius} fill={color} />
@@ -1,13 +1,11 @@
 <script lang="ts">
  export let lineWidth = 1;
-  export let color = "#777";
+  export let color = '#777';
  export let dimensions: [number, number];
 </script>

 <path
  stroke={color}
  stroke-width={lineWidth}
-  d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${
-    dimensions[0]
-  }`}
+  d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
 />
@@ -3,10 +3,15 @@

  let className: string;

-  export { className as class }
+  export { className as class };
 </script>

-<button type="button" on:click class={cc(['react-flow__controls-button', className])} {...$$restProps} >
+<button
+  type="button"
+  on:click
+  class={cc(['react-flow__controls-button', className])}
+  {...$$restProps}
+>
  <slot class="button-svg" />
 </button>

@@ -37,13 +37,11 @@
    //   nodesConnectable: !isInteractive,
    //   elementsSelectable: !isInteractive,
    // });
-
    // onInteractiveChange?.(!isInteractive);
  };
-
 </script>

-<Panel class="react-flow__controls" position={position}>
+<Panel class="react-flow__controls" {position}>
  {#if showZoom}
    <ControlButton
      on:click={onZoomInHandler}
@@ -1,3 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
-  <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
+  <path
+    d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"
+  />
 </svg>
@@ -1,3 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
-  <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
+  <path
+    d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"
+  />
 </svg>
@@ -1,3 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
-  <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
+  <path
+    d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"
+  />
 </svg>
@@ -27,20 +27,23 @@
  const { nodes, transform, width, height, nodeOrigin, id } = useStore();

  type GetMiniMapNodeAttribute = (node: Node) => string;
-  const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
+  const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
+    func instanceof Function ? func : () => func;
  const nodeColorFunc = getAttrFunction(nodeColor);
  const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
  const nodeClassNameFunc = getAttrFunction(nodeClassName);
-  const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
+  const shapeRendering =
+    typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
  const labelledBy = `react-flow__minimap-desc-${$id}`;

  $: viewBB = {
    x: -$transform[0] / $transform[2],
    y: -$transform[1] / $transform[2],
    width: $width / $transform[2],
-    height: $height / $transform[2],
+    height: $height / $transform[2]
  } as Rect;
-  $: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes, $nodeOrigin), viewBB) : viewBB
+  $: boundingRect =
+    $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes, $nodeOrigin), viewBB) : viewBB;
  $: elementWidth = (style?.width as number) ?? defaultWidth;
  $: elementHeight = (style?.height as number) ?? defaultHeight;
  $: scaledWidth = boundingRect.width / elementWidth;
@@ -55,7 +58,11 @@
  $: viewboxHeight = viewHeight + offset * 2;
 </script>

-<Panel position={position} class={cc(['react-flow__minimap', className])} style={`background-color: ${bgColor};`}>
+<Panel
+  {position}
+  class={cc(['react-flow__minimap', className])}
+  style={`background-color: ${bgColor};`}
+>
  <svg
    width={elementWidth}
    height={elementHeight}
@@ -77,7 +84,7 @@
          borderRadius={nodeBorderRadius}
          strokeColor={nodeStrokeColorFunc(node)}
          strokeWidth={nodeStrokeWidth}
-          shapeRendering={shapeRendering}
+          {shapeRendering}
          class={nodeClassNameFunc(node)}
          style={{}}
        />
@@ -85,7 +92,9 @@
    {/each}
    <path
      class="react-flow__minimap-mask"
-      d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${viewboxHeight + offset * 2}h${-viewboxWidth - offset * 2}z
+      d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${viewboxHeight + offset * 2}h${
+        -viewboxWidth - offset * 2
+      }z
    M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
      fill={maskColor}
      fill-rule="evenodd"
@@ -20,13 +20,13 @@

 <rect
  class={cc(['react-flow__minimap-node', className])}
-  x={x}
-  y={y}
+  {x}
+  {y}
  rx={borderRadius}
  ry={borderRadius}
-  width={width}
-  height={height}
-  fill={fill}
+  {width}
+  {height}
+  {fill}
  stroke={strokeColor}
  stroke-width={strokeWidth}
  shape-rendering={shapeRendering}
@@ -1,10 +1,16 @@
 <script lang="ts">
  import type { Node, Edge, NodeTypes } from '../lib/types';
-  import SvelteFlow, { Controls, Background, BackgroundVariant, Minimap, Panel } from '../lib/index';
+  import SvelteFlow, {
+    Controls,
+    Background,
+    BackgroundVariant,
+    Minimap,
+    Panel
+  } from '../lib/index';
  import CustomNode from '../customnodes/Custom.svelte';

  const nodeTypes: NodeTypes = {
-    custom: CustomNode,
+    custom: CustomNode
  };

  // const yNodes = 10;
@@ -13,8 +19,6 @@
  // const nodes: Node[] = [];
  // const edges: Edge[] = [];

-
-
  // let source = null;

  // for (let y = 0; y < yNodes; y++) {
@@ -43,60 +47,69 @@
  //   }
  // }

-  let nodes: Node<{ label: string }>[] = [{
+  let nodes: Node<{ label: string }>[] = [
+    {
      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 },
-  }, {
+      position: { x: 0, y: 150 }
+    },
+    {
      id: 'A',
      type: 'default',
      data: { label: 'Styled with class' },
      class: 'custom-style',
-    position: { x: 150, y: 150 },
-  }, {
+      position: { x: 150, y: 150 }
+    },
+    {
      id: '3',
      type: 'output',
      data: { label: 'Output Node' },
-    position: { x: 300, y: 150 },
+      position: { x: 300, y: 150 }
    },
    {
      id: 'B',
      type: 'default',
      data: { label: 'Styled with style' },
      style: 'border: 2px solid #ff5050;',
-    position: { x: 450, y: 150 },
+      position: { x: 450, y: 150 }
    },
    {
      id: '4',
      type: 'custom',
      data: { label: 'Custom Node' },
-    position: { x: 150, y: 300 },
-  }];
+      position: { x: 150, y: 300 }
+    }
+  ];

-  let edges: Edge[] = [{
+  let edges: Edge[] = [
+    {
      id: '1-2',
      type: 'default',
      source: '1',
      target: '2',
      label: 'Edge Text'
-  }, {
+    },
+    {
      id: '1-3',
      type: 'smoothstep',
      source: '1',
      target: '3'
-  }, {
+    },
+    {
      id: '2-4',
      type: 'default',
      source: '2',
      target: '4',
      animated: true
-  }];
+    }
+  ];

  function updateNode() {
    nodes[0].position = { x: nodes[0].position.x + 20, y: nodes[0].position.y };