alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(svelte): cleanup components

Browse Source
This commit is contained in:
moklick
2023-03-01 11:48:08 +01:00
parent 00515e1f9b
commit 9391b36869
61 changed files with 600 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/plugins/Background/Background.svelte
+25 -21
View File
@@ -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 -1
View File
@@ -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
+10
View File
@@ -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
+9 -7
View File
@@ -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
View File
@@ -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
+8
View File
@@ -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
+34 -25
View File
@@ -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
+2 -2
View File
@@ -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
+27
View File
@@ -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;
};