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
@@ -4,7 +4,7 @@
  import DotPattern from './DotPattern.svelte';
  import LinePattern from './LinePattern.svelte';
  import { useStore } from '$lib/store';
-	import { BackgroundVariant } from './types';
+  import { BackgroundVariant } from './types';

  export let variant: BackgroundVariant = BackgroundVariant.Dots;
  export let gap = 20;
@@ -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();
@@ -43,7 +43,7 @@
    : [patternDimensions[0] / 2, patternDimensions[1] / 2];
 </script>

-<svg class={cc(['react-flow__background', className])} >
+<svg class={cc(['react-flow__background', className])}>
  <pattern
    id={patternId}
    x={$transform[0] % scaledGap[0]}
@@ -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})`} />
@@ -72,4 +72,4 @@
    pointer-events: none;
    z-index: -1;
  }
-</style>
+</style>
@@ -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} />
+<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]}`}
+/>
@@ -1,5 +1,5 @@
 export enum BackgroundVariant {
-	Lines = 'lines',
-	Dots = 'dots',
-	Cross = 'cross'
+  Lines = 'lines',
+  Dots = 'dots',
+  Cross = 'cross'
 }
@@ -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>

@@ -31,4 +36,4 @@
    max-width: 12px;
    max-height: 12px;
  }
-</style>
+</style>
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PanelPosition } from '@reactflow/system';
+  import type { PanelPosition } from '@reactflow/system';

  import Panel from '$lib/container/Panel/index.svelte';
  import { useStore } from '$lib/store';
@@ -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}
@@ -85,4 +83,4 @@
      {#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}
    </svelte:component>
  {/if}
-</Panel>
+</Panel>
@@ -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" />
-</svg>
+  <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" />
-</svg>
+  <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,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
  <path d="M0 0h32v4.2H0z" />
-</svg>
+</svg>
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
-</svg>
+</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" />
-</svg>
+  <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>
@@ -1,10 +1,10 @@
 <script lang="ts">
  import cc from 'classcat';
-	import type { PanelPosition, Rect, Node } from '@reactflow/system';
-	import { getBoundsOfRects, getNodePositionWithOrigin, getRectOfNodes } from '@reactflow/utils';
+  import type { PanelPosition, Rect, Node } from '@reactflow/system';
+  import { getBoundsOfRects, getNodePositionWithOrigin, getRectOfNodes } from '@reactflow/utils';

  import { useStore } from '$lib/store';
-	import Panel from '$lib/container/Panel/index.svelte';
+  import Panel from '$lib/container/Panel/index.svelte';
  import MinimapNode from './MinimapNode.svelte';

  let position: PanelPosition = 'bottom-right';
@@ -27,22 +27,25 @@
  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;  
+  $: elementHeight = (style?.height as number) ?? defaultHeight;
  $: scaledWidth = boundingRect.width / elementWidth;
  $: scaledHeight = boundingRect.height / elementHeight;
  $: viewScale = Math.max(scaledWidth, scaledHeight);
@@ -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}
@@ -65,7 +72,7 @@
  >
    {#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}

-    {#each $nodes as node(node.id)}
+    {#each $nodes as node (node.id)}
      {#if node.width && node.height}
        {@const pos = getNodePositionWithOrigin(node, $nodeOrigin).positionAbsolute}
        <MinimapNode
@@ -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"
@@ -94,4 +103,4 @@
      pointer-events="none"
    />
  </svg>
-</Panel>
+</Panel>
@@ -20,14 +20,14 @@

 <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}
-/>
+/>