refactor(svelte): cleanup components

packages/svelte/package.json

@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.5.6",
+    "@sveltejs/kit": "^1.9.1",
     "@sveltejs/package": "^1.0.2",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
@@ -37,11 +37,11 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
+    "prettier-plugin-svelte": "^2.9.0",
     "svelte": "^3.55.1",
-    "svelte-check": "^3.0.1",
+    "svelte-check": "^3.0.4",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
-    "vite": "^4.1.1"
+    "vite": "^4.1.4"
   }
 }

packages/svelte/src/customnodes/Custom.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Handle from '$lib/components/Handle/index.svelte';
+  import { Handle } from '$lib/components/Handle';
   import { Position } from '@reactflow/system';
 
   export let data: { label: string } = { label: 'Node' };

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import EdgeLabelRenderer from '$lib/components/EdgeLabelRenderer/index.svelte';
-  import type { BaseEdgeProps } from '$lib/types';
+  import EdgeLabelRenderer from '$lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte';
+  import type { BaseEdgeProps } from './types';
 
   type $$Props = BaseEdgeProps;
 

packages/svelte/src/lib/components/BaseEdge/index.ts

@@ -0,0 +1 @@
+export { default as BaseEdge } from './BaseEdge.svelte';

packages/svelte/src/lib/components/BaseEdge/types.ts

@@ -0,0 +1,7 @@
+import type { EdgeProps } from '$lib/types';
+
+export type BaseEdgeProps = Pick<EdgeProps, 'interactionWidth' | 'label'> & {
+  path: string;
+  labelX?: number;
+  labelY?: number;
+};

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -2,9 +2,6 @@
   import cc from 'classcat';
 
   import { useStore } from '$lib/store';
-  import type { ConnectionLineProps } from '$lib/types';
-
-  type $$Props = ConnectionLineProps;
 
   const { connectionPath, width, height, connection } = useStore();
 </script>

packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts

@@ -0,0 +1 @@
+export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -3,7 +3,7 @@
   import { Position } from '@reactflow/system';
 
   import { useStore } from '$lib/store';
-  import BezierEdge from '$lib/components/edges/StraightEdge.svelte';
+  import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
   import type { EdgeProps, EdgeLayouted } from '$lib/types';
 
   type $$Props = EdgeLayouted;

packages/svelte/src/lib/components/EdgeWrapper/index.ts

@@ -0,0 +1 @@
+export { default as EdgeWrapper } from './EdgeWrapper.svelte';

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -14,8 +14,6 @@
   export let position: $$Props['position'] = Position.Top;
   export let isConnectable: $$Props['isConnectable'] = true;
   export let isValidConnection: $$Props['isValidConnection'] = (_: Connection) => true;
-  let className: string | null = null;
-  export { className as class };
 
   const isTarget = type === 'target';
   const nodeId = getContext<string>('rf_nodeid');
@@ -80,7 +78,6 @@
     `react-flow__handle-${position}`,
     'nodrag',
     'nopan',
-    className,
     position
   ])}
   class:source={!isTarget}

packages/svelte/src/lib/components/Handle/index.ts

@@ -0,0 +1 @@
+export { default as Handle } from './Handle.svelte';

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -2,7 +2,7 @@
   import { shortcut } from '@svelte-put/shortcut';
 
   import { useStore } from '$lib/store';
-  import type { KeyHandlerProps } from './KeyHandler';
+  import type { KeyHandlerProps } from './types';
   import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
 
   const { selectionKeyPressed, deleteKeyPressed } = useStore();

packages/svelte/src/lib/components/KeyHandler/index.ts

@@ -1,2 +1,2 @@
 export { default as KeyHandler } from './KeyHandler.svelte';
-export type { KeyHandlerProps } from './KeyHandler';
+export type { KeyHandlerProps } from './types';

packages/svelte/src/lib/components/KeyHandler/types.ts

@@ -1,4 +1,4 @@
-import { KeyDefinition } from '$lib/types';
+import type { KeyDefinition } from '$lib/types';
 
 export type KeyHandlerProps = {
   selectionKey?: KeyDefinition;

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -2,7 +2,7 @@
   import { getRectOfNodes } from '@reactflow/utils';
 
   import { useStore } from '$lib/store';
-  import Selection from '$lib/components/Selection/index.svelte';
+  import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
 
   const { selectionRectMode, nodes, nodeOrigin, transform, updateNodePositions } = useStore();

packages/svelte/src/lib/components/NodeSelection/index.ts

@@ -0,0 +1 @@
+export { default as NodeSelection } from './NodeSelection.svelte';

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -1,36 +1,46 @@
 <script lang="ts">
   import { onMount, setContext, SvelteComponentTyped } from 'svelte';
   import cc from 'classcat';
-  import { type XYPosition, Position } from '@reactflow/system';
+  import { type XYPosition, Position, errorMessages } from '@reactflow/system';
 
   import drag from '$lib/actions/drag';
   import { useStore } from '$lib/store';
-  import DefaultNode from './DefaultNode.svelte';
-  import type { WrapNodeProps, NodeProps } from '$lib/types';
+  import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
+  import type { NodeProps } from '$lib/types';
+  import type { NodeWrapperProps } from './types';
 
-  interface $$Props extends WrapNodeProps {}
+  interface $$Props extends NodeWrapperProps {}
 
-  export let id: WrapNodeProps['id'];
-  export let data: WrapNodeProps['data'] = {};
-  export let selected: WrapNodeProps['selected'] = false;
+  export let id: NodeWrapperProps['id'];
+  export let data: NodeWrapperProps['data'] = {};
+  export let selected: NodeWrapperProps['selected'] = false;
   export let positionAbsolute: XYPosition = { x: 0, y: 0 };
   export let position: XYPosition = { x: 0, y: 0 };
   export let dragging: boolean = false;
-  export let resizeObserver: WrapNodeProps['resizeObserver'] = null;
-  export let style: WrapNodeProps['style'] = undefined;
-  export let width: WrapNodeProps['width'] = undefined;
-  export let height: WrapNodeProps['height'] = undefined;
-  export let type: WrapNodeProps['type'] = 'default';
-  export let sourcePosition: WrapNodeProps['sourcePosition'] = Position.Bottom;
-  export let targetPosition: WrapNodeProps['targetPosition'] = Position.Top;
+  export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
+  export let style: NodeWrapperProps['style'] = undefined;
+  export let width: NodeWrapperProps['width'] = undefined;
+  export let height: NodeWrapperProps['height'] = undefined;
+  export let type: NodeWrapperProps['type'] = 'default';
+  export let sourcePosition: NodeWrapperProps['sourcePosition'] = Position.Bottom
+  export let targetPosition: NodeWrapperProps['targetPosition'] = Position.Top;
+
   let className: string = '';
   export { className as class };
 
   let nodeRef: HTMLDivElement;
 
   const { nodes, transform, nodeTypes, updateNodePositions, addSelectedNodes } = useStore();
+
+  const nodeTypeValid = !!$nodeTypes[type!];
+
+  if (!nodeTypeValid) {
+    console.warn('003', errorMessages['003'](type!));
+    type = 'default';
+  }
+
   const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> =
-    $nodeTypes[type] || DefaultNode;
+    $nodeTypes[type!] || DefaultNode;
   const isSelectable = true;
   const selectNodesOnDrag = false;
   const isDraggable = true;

packages/svelte/src/lib/components/NodeWrapper/index.ts

@@ -0,0 +1 @@
+export { default as NodeWrapper } from './NodeWrapper.svelte';

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -0,0 +1,5 @@
+import type { Node } from '$lib/types';
+
+export type NodeWrapperProps = Node & {
+  resizeObserver?: ResizeObserver | null;
+};

packages/svelte/src/lib/components/Selection/index.ts

@@ -0,0 +1 @@
+export { default as Selection } from './Selection.svelte';

packages/svelte/src/lib/components/UserSelection/UserSelection.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useStore } from '$lib/store';
-  import Selection from '$lib/components/Selection/index.svelte';
+  import { Selection } from '$lib/components/Selection';
 
   const { selectionRect, selectionRectMode } = useStore();
 </script>

packages/svelte/src/lib/components/UserSelection/index.ts

@@ -0,0 +1 @@
+export { default as UserSelection } from './UserSelection.svelte';

packages/svelte/src/lib/components/edges/BezierEdge.svelte

@@ -2,7 +2,7 @@
   import { getBezierPath } from '@reactflow/edge-utils';
 
   import type { EdgeProps } from '$lib/types';
-  import BaseEdge from './BaseEdge.svelte';
+  import { BaseEdge } from '$lib/components/BaseEdge';
 
   type $$Props = EdgeProps;
 

packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte

@@ -2,7 +2,7 @@
   import { getSmoothStepPath } from '@reactflow/edge-utils';
 
   import type { EdgeProps } from '$lib/types';
-  import BaseEdge from './BaseEdge.svelte';
+  import { BaseEdge } from '$lib/components/BaseEdge';
 
   type $$Props = EdgeProps;
 

packages/svelte/src/lib/components/edges/StraightEdge.svelte

@@ -2,7 +2,7 @@
   import { getStraightPath } from '@reactflow/edge-utils';
 
   import type { EdgeProps } from '$lib/types';
-  import BaseEdge from './BaseEdge.svelte';
+  import { BaseEdge } from '$lib/components/BaseEdge';
 
   type $$Props = EdgeProps;
 

packages/svelte/src/lib/components/nodes/DefaultNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Position } from '@reactflow/system';
 
-  import Handle from '$lib/components/Handle/index.svelte';
+  import { Handle } from '$lib/components/Handle';
   import type { NodeProps } from '$lib/types';
 
   interface $$Props extends NodeProps<{ label: string }> {}

packages/svelte/src/lib/components/nodes/InputNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Position } from '@reactflow/system';
 
-  import Handle from '$lib/components/Handle/index.svelte';
+  import { Handle } from '$lib/components/Handle';
 
   export let data: { label: string } = { label: 'Node' };
   export let isConnectable: boolean = true;

packages/svelte/src/lib/components/nodes/OutputNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Position } from '@reactflow/system';
 
-  import Handle from '$lib/components/Handle/index.svelte';
+  import { Handle } from '$lib/components/Handle';
 
   export let data: { label: string } = { label: 'Node' };
   export let isConnectable: boolean = true;

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import EdgeWrapper from '$lib/components/edges/EdgeWrapper.svelte';
+  import { EdgeWrapper } from '$lib/components/EdgeWrapper';
   import { useStore } from '$lib/store';
 
   const { edgesLayouted, width, height } = useStore();

packages/svelte/src/lib/container/EdgeRenderer/index.ts

@@ -0,0 +1 @@
+export { default as EdgeRenderer } from './EdgeRenderer.svelte';

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
 
-  import NodeWrapper from '$lib/components/nodes/NodeWrapper.svelte';
+  import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
 
   const { nodes, updateNodeDimensions } = useStore();

packages/svelte/src/lib/container/NodeRenderer/index.ts

@@ -0,0 +1 @@
+export { default as NodeRenderer } from './NodeRenderer.svelte';

packages/svelte/src/lib/container/Pane/index.ts

@@ -0,0 +1 @@
+export { default as Pane } from './Pane.svelte';

packages/svelte/src/lib/container/Panel/Panel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import cc from 'classcat';
-  import type { PanelProps } from './Panel';
+  import type { PanelProps } from './types';
 
   interface $$Props extends PanelProps {}
 

packages/svelte/src/lib/container/Panel/index.ts

@@ -0,0 +1,2 @@
+export { default as Panel } from './Panel.svelte';
+export type { PanelProps } from './types';

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -4,16 +4,16 @@
   import cc from 'classcat';
 
   import { key, createStore } from '$lib/store';
-  import Zoom from '$lib/container/Zoom/index.svelte';
-  import Pane from '$lib/container/Pane/index.svelte';
-  import Viewport from '$lib/container/Viewport.svelte';
-  import NodeRenderer from '$lib/container/NodeRenderer/index.svelte';
-  import EdgeRenderer from '$lib/container/EdgeRenderer/index.svelte';
-  import UserSelection from '$lib/components/UserSelection/index.svelte';
-  import NodeSelection from '$lib/components/NodeSelection/index.svelte';
+  import { Zoom } from '$lib/container/Zoom';
+  import { Pane } from '$lib/container/Pane';
+  import { Viewport } from '$lib/container/Viewport';
+  import { NodeRenderer } from '$lib/container/NodeRenderer';
+  import { EdgeRenderer } from '$lib/container/EdgeRenderer';
+  import { UserSelection } from '$lib/components/UserSelection';
+  import { NodeSelection } from '$lib/components/NodeSelection';
   import { KeyHandler } from '$lib/components/KeyHandler';
   import { ConnectionLine } from '$lib/components/ConnectionLine';
-  import type { SvelteFlowProps } from '$lib/types';
+  import type { SvelteFlowProps } from './types';
 
   type $$Props = SvelteFlowProps;
 
@@ -36,6 +36,7 @@
     nodeTypes
   });
 
+
   setContext(key, {
     getStore: () => store
   });

packages/svelte/src/lib/container/SvelteFlow/index.ts

@@ -0,0 +1,2 @@
+export { default as SvelteFlow } from './SvelteFlow.svelte';
+export type { SvelteFlowProps } from './types';

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -0,0 +1,17 @@
+import type { ConnectionLineType } from '@reactflow/system';
+
+import type { Edge, Node, NodeTypes, KeyDefinition } from '$lib/types';
+
+export type SvelteFlowProps = {
+  nodes: Node[];
+  edges: Edge[];
+
+  connectionLineType?: ConnectionLineType;
+  selectionKey?: KeyDefinition;
+  deleteKey?: KeyDefinition;
+  nodeTypes?: NodeTypes;
+  fitView?: boolean;
+  class?: string;
+  style?: string;
+  id?: string;
+};

packages/svelte/src/lib/container/Viewport/index.ts

@@ -0,0 +1 @@
+export { default as Viewport } from './Viewport.svelte';

packages/svelte/src/lib/container/Zoom/index.ts

@@ -0,0 +1 @@
+export { default as Zoom } from './Zoom.svelte';

packages/svelte/src/lib/index.ts

@@ -1,10 +1,11 @@
-import SvelteFlow from '$lib/container/SvelteFlow.svelte';
+import { SvelteFlow, type SvelteFlowProps } from '$lib/container/SvelteFlow';
 export { Controls, ControlButton } from '$lib/plugins/Controls';
 export { Background, BackgroundVariant } from '$lib/plugins/Background';
 export { Minimap } from '$lib/plugins/Minimap';
-export { default as Panel } from '$lib/container/Panel/index.svelte';
+export { Panel, type PanelProps } from '$lib/container/Panel';
 
 export * from '$lib/types';
 export * from '$lib/utils';
 
+export type { SvelteFlowProps };
 export default SvelteFlow;

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -1,20 +1,4 @@
-<script lang="ts">
-  import cc from 'classcat';
-
-  import DotPattern from './DotPattern.svelte';
-  import LinePattern from './LinePattern.svelte';
-  import { useStore } from '$lib/store';
-  import { BackgroundVariant } from './types';
-
-  export let variant: BackgroundVariant = BackgroundVariant.Dots;
-  export let gap = 20;
-  export let size: number = 1;
-  export let lineWidth = 1;
-  export let color: string = '#ccc';
-
-  let className: string = '';
-  export { className as class };
-
+<script labg="ts" context="module">
   const defaultColor = {
     [BackgroundVariant.Dots]: '#91919a',
     [BackgroundVariant.Lines]: '#eee',
@@ -26,13 +10,33 @@
     [BackgroundVariant.Lines]: 1,
     [BackgroundVariant.Cross]: 6
   };
+</script>
+
+<script lang="ts">
+  import cc from 'classcat';
+
+  import DotPattern from './DotPattern.svelte';
+  import LinePattern from './LinePattern.svelte';
+  import { useStore } from '$lib/store';
+  import { BackgroundVariant, type BackgroundProps } from './types';
+
+  type $$Props = BackgroundProps; 
+
+  export let variant: $$Props['variant'] = BackgroundVariant.Dots;
+  export let gap: $$Props['gap'] = 20;
+  export let size: $$Props['size'] = 1;
+  export let lineWidth: $$Props['lineWidth'] = 1;
+  export let color: $$Props['color'] = '#ccc';
+  export let style: $$Props['style'] = '';
+  let className: $$Props['class'] = '';
+  export { className as class };
 
   const { transform, id } = useStore();
-  const patternColor = color || defaultColor[variant];
-  const patternSize = size || defaultSize[variant];
+  const patternColor = color || defaultColor[variant!];
+  const patternSize = size || defaultSize[variant!];
   const isDots = variant === BackgroundVariant.Dots;
   const isCross = variant === BackgroundVariant.Cross;
-  const gapXY: number[] = Array.isArray(gap) ? gap : [gap, gap];
+  const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];
 
   $: patternId = `background-pattern-${$id}`;
   $: scaledGap = [gapXY[0] * $transform[2] || 1, gapXY[1] * $transform[2] || 1];
@@ -43,7 +47,7 @@
     : [patternDimensions[0] / 2, patternDimensions[1] / 2];
 </script>
 
-<svg class={cc(['react-flow__background', className])}>
+<svg class={cc(['react-flow__background', className])} style={style}>
   <pattern
     id={patternId}
     x={$transform[0] % scaledGap[0]}

packages/svelte/src/lib/plugins/Background/index.ts

@@ -1,2 +1,2 @@
-export { BackgroundVariant } from './types';
+export { BackgroundVariant, type BackgroundProps } from './types';
 export { default as Background } from './Background.svelte';

packages/svelte/src/lib/plugins/Background/types.ts

@@ -3,3 +3,13 @@ export enum BackgroundVariant {
   Dots = 'dots',
   Cross = 'cross'
 }
+
+export type BackgroundProps = {
+  color?: string;
+  class?: string;
+  gap?: number | [number, number];
+  size?: number;
+  lineWidth?: number;
+  variant?: BackgroundVariant;
+  style?: string;
+};

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import type { PanelPosition } from '@reactflow/system';
-
-  import Panel from '$lib/container/Panel/index.svelte';
+  import Panel from '$lib/container/Panel/Panel.svelte';
   import { useStore } from '$lib/store';
   import ControlButton from './ControlButton.svelte';
   import PlusIcon from './Icons/Plus.svelte';
@@ -10,10 +8,14 @@
   import LockIcon from './Icons/Lock.svelte';
   import UnlockIcon from './Icons/Unlock.svelte';
 
-  export let position: PanelPosition = 'bottom-left';
-  export let showZoom = true;
-  export let showFitView = true;
-  export let showInteractive = true;
+  import type { ControlsProps } from './types';
+
+  type $$Props = ControlsProps;
+
+  export let position: $$Props['position'] = 'bottom-left';
+  export let showZoom: $$Props['showZoom'] = true;
+  export let showFitView: $$Props['showFitView'] = true;
+  export let showInteractive: $$Props['showInteractive'] = true;
 
   const { zoomIn, zoomOut, fitView } = useStore();
 

packages/svelte/src/lib/plugins/Controls/index.ts

@@ -1,2 +1,3 @@
 export { default as Controls } from './Controls.svelte';
 export { default as ControlButton } from './ControlButton.svelte';
+export { type ControlsProps } from './types';

packages/svelte/src/lib/plugins/Controls/types.ts

@@ -0,0 +1,8 @@
+import type { PanelPosition } from '@reactflow/system';
+
+export type ControlsProps = {
+  position: PanelPosition;
+  showZoom: boolean;
+  showFitView: boolean;
+  showInteractive: boolean;
+};

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -1,34 +1,43 @@
+<script lang="ts" context="module">
+  declare const window: any;
+
+  const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
+    func instanceof Function ? func : () => func;
+</script>
+
 <script lang="ts">
   import cc from 'classcat';
-  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';
   import MinimapNode from './MinimapNode.svelte';
+  import type { GetMiniMapNodeAttribute, MiniMapProps } from './types';
 
-  let position: PanelPosition = 'bottom-right';
-  let ariaLabel: string = 'Mini map';
-  let className: string = '';
-  let style: Record<string, unknown> = {};
-  let nodeStrokeColor: string = 'transparent';
-  let nodeColor: string = '#e2e2e2';
-  let nodeClassName: string = '';
-  let nodeBorderRadius: number = 5;
-  let nodeStrokeWidth: number = 2;
-  let bgColor: string = '#fff';
-  let maskColor: string = 'rgb(240, 240, 240, 0.6)';
-  let maskStrokeColor: string = 'none';
-  let maskStrokeWidth: number = 1;
+  type $$Props = MiniMapProps;
+
+  let position: $$Props['position']  = 'bottom-right';
+  let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
+  let style: $$Props['style'] = '';
+  let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
+  let nodeColor: $$Props['nodeColor'] = '#e2e2e2';
+  let nodeClassName: $$Props['nodeClassName'] = '';
+  let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
+  let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
+  let bgColor: $$Props['bgColor'] = '#fff';
+  let maskColor: $$Props['maskColor'] = 'rgb(240, 240, 240, 0.6)';
+  let maskStrokeColor: $$Props['maskStrokeColor'] = 'none';
+  let maskStrokeWidth: $$Props['maskStrokeWidth'] = 1;
+  let width: $$Props['width'] = undefined;
+  let height: $$Props['height'] = undefined;
+  let className: $$Props['class'] = '';
   export { className as class };
 
   const defaultWidth = 200;
   const defaultHeight = 150;
-  const { nodes, transform, width, height, nodeOrigin, id } = useStore();
+  const { nodes, transform, width: containerWidth, height: containerHeight, nodeOrigin, id } = useStore();
 
-  type GetMiniMapNodeAttribute = (node: Node) => string;
-  const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
-    func instanceof Function ? func : () => func;
+  
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
   const nodeClassNameFunc = getAttrFunction(nodeClassName);
@@ -39,13 +48,13 @@
   $: viewBB = {
     x: -$transform[0] / $transform[2],
     y: -$transform[1] / $transform[2],
-    width: $width / $transform[2],
-    height: $height / $transform[2]
-  } as Rect;
+    width: $containerWidth / $transform[2],
+    height: $containerHeight / $transform[2]
+  };
   $: boundingRect =
     $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes, $nodeOrigin), viewBB) : viewBB;
-  $: elementWidth = (style?.width as number) ?? defaultWidth;
-  $: elementHeight = (style?.height as number) ?? defaultHeight;
+  $: elementWidth = width ?? defaultWidth;
+  $: elementHeight = height ?? defaultHeight;
   $: scaledWidth = boundingRect.width / elementWidth;
   $: scaledHeight = boundingRect.height / elementHeight;
   $: viewScale = Math.max(scaledWidth, scaledHeight);
@@ -61,7 +70,7 @@
 <Panel
   {position}
   class={cc(['react-flow__minimap', className])}
-  style={`background-color: ${bgColor};`}
+  style={`background-color: ${bgColor}; ${style}`}
 >
   <svg
     width={elementWidth}

packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte

@@ -5,11 +5,11 @@
   export let y: number;
   export let width: number = 0;
   export let height: number = 0;
-  export let borderRadius: number;
+  export let borderRadius: number = 5;
   export let color: string;
   export let shapeRendering: string;
   export let strokeColor: string;
-  export let strokeWidth: number;
+  export let strokeWidth: number = 2;
   export let style: Record<string, string>;
   let className: string = '';
   export { className as class };

packages/svelte/src/lib/plugins/Minimap/types.ts

@@ -0,0 +1,27 @@
+import type { PanelPosition } from '@reactflow/system';
+
+import type { Node } from '$lib/types';
+
+export type GetMiniMapNodeAttribute = (node: Node) => string;
+
+export type MiniMapProps = {
+  bgColor?: string;
+  nodeColor?: string | GetMiniMapNodeAttribute;
+  nodeStrokeColor?: string | GetMiniMapNodeAttribute;
+  nodeClassName?: string | GetMiniMapNodeAttribute;
+  nodeBorderRadius?: number;
+  nodeStrokeWidth?: number;
+  maskColor?: string;
+  maskStrokeColor?: string;
+  maskStrokeWidth?: number;
+  position?: PanelPosition;
+  class?: string;
+  style?: string;
+  ariaLabel?: string | null;
+  width?: number;
+  height?: number;
+  // onClick?: (event: MouseEvent, position: XYPosition) => void;
+  // onNodeClick?: (event: MouseEvent, node: Node) => void;
+  // pannable?: boolean;
+  // zoomable?: boolean;
+};

packages/svelte/src/lib/store/edges-layouted.ts

@@ -6,11 +6,11 @@ import type { EdgeLayouted } from '$lib/types';
 import type { SvelteFlowStoreState } from './types';
 
 export function getEdgesLayouted(store: SvelteFlowStoreState) {
-  return derived([store.edges, store.nodes], ([$edges, $nodes]) => {
-    return $edges
+  return derived([store.edges, store.nodes], ([edges, nodes]) => {
+    return edges
       .map((edge) => {
-        const sourceNode = $nodes.find((node) => node.id === edge.source);
-        const targetNode = $nodes.find((node) => node.id === edge.target);
+        const sourceNode = nodes.find((node) => node.id === edge.source);
+        const targetNode = nodes.find((node) => node.id === edge.target);
         const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(sourceNode);
         const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(targetNode);
 

packages/svelte/src/lib/types/edges.ts

@@ -57,10 +57,4 @@ export type EdgeProps = Pick<
   | 'interactionWidth'
 >;
 
-export type BaseEdgeProps = Pick<EdgeProps, 'interactionWidth' | 'label'> & {
-  path: string;
-  labelX?: number;
-  labelY?: number;
-};
-
 export type EdgeTypes = Record<string, typeof SvelteComponentTyped<EdgeProps>>;

packages/svelte/src/lib/types/general.ts

@@ -1,7 +1,5 @@
 import type { ShortcutModifierDefinition } from '@svelte-put/shortcut';
-import type { ConnectionLineType, HandleType, XYPosition } from '@reactflow/system';
-
-import type { Node, NodeTypes, Edge } from '.';
+import type { HandleType, XYPosition } from '@reactflow/system';
 
 export type KeyModifier = ShortcutModifierDefinition;
 export type KeyDefinitionObject = { key: string; modifier?: KeyModifier };
@@ -14,19 +12,3 @@ export type ConnectionData = {
   handleType: HandleType | null;
   status: string | null;
 };
-
-export type ConnectionLineProps = {};
-
-export type SvelteFlowProps = {
-  nodes: Node[];
-  edges: Edge[];
-
-  connectionLineType?: ConnectionLineType;
-  selectionKey?: KeyDefinition;
-  deleteKey?: KeyDefinition;
-  nodeTypes?: NodeTypes;
-  fitView?: boolean;
-  class?: string;
-  style?: string;
-  id?: string;
-};

packages/svelte/src/lib/types/nodes.ts

@@ -24,8 +24,4 @@ export type NodeProps<NodeData = any> = Pick<
   isConnectable?: boolean;
 };
 
-export type WrapNodeProps = Node & {
-  resizeObserver?: ResizeObserver | null;
-};
-
 export type NodeTypes = Record<string, typeof SvelteComponentTyped<Partial<NodeProps>>>;