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

chore(svelte): run prettier

Browse Source
This commit is contained in:
moklick
2023-02-28 12:48:52 +01:00
parent 62a6278682
commit dda21e1fd2
64 changed files with 1669 additions and 1646 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/container/EdgeRenderer/index.svelte
+4 -8
View File
@@ -1,15 +1,11 @@
<script lang="ts">
<script lang="ts">
import EdgeWrapper from '$lib/components/edges/EdgeWrapper.svelte';
import { useStore } from '$lib/store';
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}
@@ -25,4 +21,4 @@
pointer-events: none;
overflow: visible;
}
}
</style>
packages/svelte/src/lib/container/EdgeRenderer/utils.ts
+80 -80
View File
@@ -1,105 +1,105 @@
import {
type NodeHandleBounds,
type Rect,
type Node,
type HandleElement,
type XYPosition,
Position,
internalsSymbol
type NodeHandleBounds,
type Rect,
type Node,
type HandleElement,
type XYPosition,
Position,
internalsSymbol
} from '@reactflow/system';
export function getNodeData(node?: Node): [Rect, NodeHandleBounds | null, boolean] {
const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
const isValid =
handleBounds &&
node?.width &&
node?.height &&
typeof node?.positionAbsolute?.x !== 'undefined' &&
typeof node?.positionAbsolute?.y !== 'undefined';
const isValid =
handleBounds &&
node?.width &&
node?.height &&
typeof node?.positionAbsolute?.x !== 'undefined' &&
typeof node?.positionAbsolute?.y !== 'undefined';
return [
{
x: node?.positionAbsolute?.x || 0,
y: node?.positionAbsolute?.y || 0,
width: node?.width || 0,
height: node?.height || 0
},
handleBounds,
!!isValid
];
return [
{
x: node?.positionAbsolute?.x || 0,
y: node?.positionAbsolute?.y || 0,
width: node?.width || 0,
height: node?.height || 0
},
handleBounds,
!!isValid
];
}
export function getHandlePosition(
position: Position,
nodeRect: Rect,
handle: HandleElement | null = null
position: Position,
nodeRect: Rect,
handle: HandleElement | null = null
): XYPosition {
const x = (handle?.x || 0) + nodeRect.x;
const y = (handle?.y || 0) + nodeRect.y;
const width = handle?.width || nodeRect.width;
const height = handle?.height || nodeRect.height;
const x = (handle?.x || 0) + nodeRect.x;
const y = (handle?.y || 0) + nodeRect.y;
const width = handle?.width || nodeRect.width;
const height = handle?.height || nodeRect.height;
switch (position) {
case Position.Top:
return {
x: x + width / 2,
y
};
case Position.Right:
return {
x: x + width,
y: y + height / 2
};
case Position.Bottom:
return {
x: x + width / 2,
y: y + height
};
case Position.Left:
return {
x,
y: y + height / 2
};
}
switch (position) {
case Position.Top:
return {
x: x + width / 2,
y
};
case Position.Right:
return {
x: x + width,
y: y + height / 2
};
case Position.Bottom:
return {
x: x + width / 2,
y: y + height
};
case Position.Left:
return {
x,
y: y + height / 2
};
}
}
export function getHandle(bounds: HandleElement[], handleId?: string | null): HandleElement | null {
if (!bounds) {
return null;
}
if (!bounds) {
return null;
}
if (handleId) {
return bounds.find((d) => d.id === handleId)!;
} else if (bounds.length === 1) {
return bounds[0];
}
if (handleId) {
return bounds.find((d) => d.id === handleId)!;
} else if (bounds.length === 1) {
return bounds[0];
}
return null;
return null;
}
export type EdgePosition = {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
};
export function getEdgePositions(
sourceNodeRect: Rect,
sourceHandle: HandleElement,
sourcePosition: Position,
targetNodeRect: Rect,
targetHandle: HandleElement,
targetPosition: Position
sourceNodeRect: Rect,
sourceHandle: HandleElement,
sourcePosition: Position,
targetNodeRect: Rect,
targetHandle: HandleElement,
targetPosition: Position
): EdgePosition {
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNodeRect, sourceHandle);
const targetHandlePos = getHandlePosition(targetPosition, targetNodeRect, targetHandle);
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNodeRect, sourceHandle);
const targetHandlePos = getHandlePosition(targetPosition, targetNodeRect, targetHandle);
return {
sourceX: sourceHandlePos.x,
sourceY: sourceHandlePos.y,
targetX: targetHandlePos.x,
targetY: targetHandlePos.y
};
return {
sourceX: sourceHandlePos.x,
sourceY: sourceHandlePos.y,
targetX: targetHandlePos.x,
targetY: targetHandlePos.y
};
}
packages/svelte/src/lib/container/NodeRenderer/index.svelte
+12 -9
View File
@@ -5,15 +5,18 @@
import { useStore } from '$lib/store';
const { nodes, updateNodeDimensions } = useStore();
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,
}))
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
}));
updateNodeDimensions(updates);
});
updateNodeDimensions(updates);
});
onDestroy(() => {
resizeObserver?.disconnect();
@@ -33,4 +36,4 @@
pointer-events: none;
transform-origin: 0 0;
}
</style>
</style>
packages/svelte/src/lib/container/Pane/index.svelte
+30 -25
View File
@@ -10,7 +10,7 @@
handler?.(event);
};
};
}
export function toggleSelected<Item extends Node | Edge>(ids: string[]) {
return (item: Item) => {
@@ -19,39 +19,48 @@
if (item.selected !== isSelected) {
return {
...item,
selected: isSelected,
selected: isSelected
};
}
return item;
}
};
}
</script>
<script lang="ts">
import { useStore } from '$lib/store';
import { SelectionMode, type Node, type Edge } from '@reactflow/system';
import { getConnectedEdges, getEventPosition, getNodesInside } from '@reactflow/utils';
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 container: HTMLDivElement;
let containerBounds: DOMRect | null = null;
let selectedNodes: Node[] = [];
$: isSelecting = $selectionKeyPressed;
$: hasActiveSelection = elementsSelectable && (isSelecting || $selectionRectMode === 'user');
function onClick (event: MouseEvent) {
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);
}
@@ -156,7 +161,7 @@
class:selection={isSelecting}
on:click={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
on:mousedown={hasActiveSelection ? onMouseDown : undefined}
on:mousemove={hasActiveSelection? onMouseMove : undefined}
on:mousemove={hasActiveSelection ? onMouseMove : undefined}
on:mouseup={hasActiveSelection ? onMouseUp : undefined}
on:mouseleave={hasActiveSelection ? onMouseLeave : undefined}
>
@@ -181,4 +186,4 @@
.dragging {
cursor: grabbing;
}
</style>
</style>
packages/svelte/src/lib/container/Panel/Panel.d.ts
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
import type { PanelPosition } from '@reactflow/system';
export type PanelProps = {
position?: PanelPosition;
style?: string;
class?: string;
position?: PanelPosition;
style?: string;
class?: string;
};
packages/svelte/src/lib/container/Panel/index.svelte
+3 -6
View File
@@ -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>
@@ -46,4 +43,4 @@
left: 50%;
transform: translateX(-50%);
}
</style>
</style>
packages/svelte/src/lib/container/SvelteFlow.svelte
+6 -7
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import { setContext, onMount } from 'svelte'
import { setContext, onMount } from 'svelte';
import cc from 'classcat';
import { key, createStore } from '$lib/store';
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';
@@ -12,7 +12,7 @@
import NodeSelection from '$lib/components/NodeSelection/index.svelte';
import { KeyHandler } from '$lib/components/KeyHandler';
import { ConnectionLine } from '$lib/components/ConnectionLine';
import type { SvelteFlowProps } from '$lib/types';
import type { SvelteFlowProps } from '$lib/types';
type $$Props = SvelteFlowProps;
@@ -51,7 +51,6 @@
});
});
// $: {
// const updatableProps = {
// defaultEdgeOptions,
@@ -69,7 +68,7 @@
// ...state,
// [key]: valuesToUpdate[key],
// }));
// });
// }
@@ -86,7 +85,7 @@
{...$$restProps}
class={cc(['react-flow', className])}
data-testid="rf__wrapper"
id={id}
{id}
bind:this={domNode}
>
<KeyHandler {selectionKey} {deleteKey} />
@@ -127,4 +126,4 @@
pointer-events: none;
user-select: none;
}
</style>
</style>
packages/svelte/src/lib/container/Viewport.svelte
+3 -3
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import { useStore } from '$lib/store';
import { useStore } from '$lib/store';
const { transform } = useStore();
</script>
<div
class="react-flow__viewport"
class="react-flow__viewport"
style="transform: translate({$transform[0]}px, {$transform[1]}px) scale({$transform[2]})"
>
<slot />
@@ -22,4 +22,4 @@
z-index: 2;
pointer-events: none;
}
</style>
</style>
packages/svelte/src/lib/container/Zoom/index.svelte
+1 -1
View File
@@ -20,4 +20,4 @@
left: 0;
z-index: 4;
}
</style>
</style>