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

Merge branch 'next' into fix-selection-key

Browse Source
This commit is contained in:
moklick
2024-01-23 10:06:40 +01:00
parent 601c7f1c15 8a9f8127b5
commit f06aeea20a
29 changed files with 214 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+4 -11
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import cc from 'classcat';
import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
import type { BaseEdgeProps } from './types';
import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
type $$Props = BaseEdgeProps;
@@ -18,7 +18,6 @@
let className: $$Props['class'] = undefined;
export { className as class };
// @todo, why is interactionWidth undefined after first re-render?
let interactionWidthValue = interactionWidth === undefined ? 20 : interactionWidth;
</script>
@@ -43,13 +42,7 @@
{/if}
{#if label}
<EdgeLabelRenderer>
<div
class="svelte-flow__edge-label"
style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
style={labelStyle}
>
{label}
</div>
</EdgeLabelRenderer>
<EdgeLabel x={labelX} y={labelY} style={labelStyle}>
{label}
</EdgeLabel>
{/if}
packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts">
import { getContext } from 'svelte';
import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
import { useHandleEdgeSelect } from '$lib/hooks/useHandleEdgeSelect';
import type { BaseEdgeProps } from '$lib/components/BaseEdge/types';
export let style: BaseEdgeProps['labelStyle'] = undefined;
export let x: BaseEdgeProps['labelX'] = undefined;
export let y: BaseEdgeProps['labelY'] = undefined;
const handleEdgeSelect = useHandleEdgeSelect();
const id = getContext<string>('svelteflow__edge_id');
</script>
<EdgeLabelRenderer>
<div
class="svelte-flow__edge-label"
style:transform="translate(-50%, -50%) translate({x}px,{y}px)"
style={'pointer-events: all;' + style}
on:click={() => {
if (id) handleEdgeSelect(id);
}}
>
<slot />
</div>
</EdgeLabelRenderer>
packages/svelte/src/lib/components/EdgeLabel/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as EdgeLabel } from './EdgeLabel.svelte';
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+13 -32
View File
@@ -1,14 +1,14 @@
<svelte:options immutable />
<script lang="ts">
import { createEventDispatcher, setContext } from 'svelte';
import cc from 'classcat';
import { createEventDispatcher } from 'svelte';
import { errorMessages, getMarkerId } from '@xyflow/system';
import { getMarkerId } from '@xyflow/system';
import { useStore } from '$lib/store';
import { BezierEdgeInternal } from '$lib/components/edges';
import type { EdgeLayouted, Edge } from '$lib/types';
import { get } from 'svelte/store';
import { useHandleEdgeSelect } from '$lib/hooks/useHandleEdgeSelect';
type $$Props = EdgeLayouted;
@@ -22,7 +22,6 @@
export let animated: $$Props['animated'] = false;
export let selected: $$Props['selected'] = false;
export let selectable: $$Props['selectable'] = true;
export let hidden: $$Props['hidden'] = false;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
@@ -43,16 +42,9 @@
let className: string = '';
export { className as class };
const {
edges,
edgeTypes,
flowId,
selectionRect,
selectionRectMode,
multiselectionKeyPressed,
addSelectedEdges,
unselectNodesAndEdges
} = useStore();
setContext('svelteflow__edge_id', id);
const { edgeLookup, edgeTypes, flowId } = useStore();
const dispatch = createEventDispatcher<{
edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
edgecontextmenu: { edge: Edge; event: MouseEvent };
@@ -62,30 +54,19 @@
$: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
$: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
const handleEdgeSelect = useHandleEdgeSelect();
function onClick(event: MouseEvent | TouchEvent) {
const edge = $edges.find((e) => e.id === id);
const edge = $edgeLookup.get(id);
if (!edge) {
console.warn('012', errorMessages['error012'](id));
return;
if (edge) {
handleEdgeSelect(id);
dispatch('edgeclick', { event, edge });
}
if (selectable) {
selectionRect.set(null);
selectionRectMode.set(null);
if (!edge.selected) {
addSelectedEdges([id]);
} else if (edge.selected && get(multiselectionKeyPressed)) {
unselectNodesAndEdges({ nodes: [], edges: [edge] });
}
}
dispatch('edgeclick', { event, edge });
}
function onContextMenu(event: MouseEvent) {
const edge = $edges.find((e) => e.id === id);
const edge = $edgeLookup.get(id);
if (edge) {
dispatch('edgecontextmenu', { event, edge });
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+1 -8
View File
@@ -24,12 +24,6 @@
</svg>
{#each $visibleEdges as edge (edge.id)}
{@const edgeType = edge.type || 'default'}
{@const selectable = !!(
edge.selectable ||
($elementsSelectable && typeof edge.selectable === 'undefined')
)}
<EdgeWrapper
id={edge.id}
source={edge.source}
@@ -54,9 +48,8 @@
ariaLabel={edge.ariaLabel}
interactionWidth={edge.interactionWidth}
class={edge.class}
type={edgeType}
type={edge.type || 'default'}
zIndex={edge.zIndex}
{selectable}
on:edgeclick
on:edgecontextmenu
/>
packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts
+39
View File
@@ -0,0 +1,39 @@
import { get } from 'svelte/store';
import { errorMessages } from '@xyflow/system';
import { useStore } from '$lib/store';
export function useHandleEdgeSelect() {
const {
edgeLookup,
selectionRect,
selectionRectMode,
multiselectionKeyPressed,
addSelectedEdges,
unselectNodesAndEdges,
elementsSelectable
} = useStore();
return (id: string) => {
const edge = get(edgeLookup).get(id);
if (!edge) {
console.warn('012', errorMessages['error012'](id));
return;
}
const selectable =
edge.selectable || (get(elementsSelectable) && typeof edge.selectable === 'undefined');
if (selectable) {
selectionRect.set(null);
selectionRectMode.set(null);
if (!edge.selected) {
addSelectedEdges([id]);
} else if (edge.selected && get(multiselectionKeyPressed)) {
unselectNodesAndEdges({ nodes: [], edges: [edge] });
}
}
};
}
packages/svelte/src/lib/hooks/useSvelteFlow.ts
+25 -1
View File
@@ -29,6 +29,10 @@ import { isNode } from '$lib/utils';
export function useSvelteFlow(): {
zoomIn: ZoomInOut;
zoomOut: ZoomInOut;
getNode: (id: string) => Node | undefined;
getNodes: (ids?: string[]) => Node[];
getEdge: (id: string) => Edge | undefined;
getEdges: (ids?: string[]) => Edge[];
setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
getZoom: () => number;
setCenter: (x: number, y: number, options?: SetCenterOptions) => void;
@@ -82,7 +86,9 @@ export function useSvelteFlow(): {
panZoom,
nodes,
edges,
domNode
domNode,
nodeLookup,
edgeLookup
} = useStore();
const getNodeRect = (
@@ -121,6 +127,10 @@ export function useSvelteFlow(): {
return {
zoomIn,
zoomOut,
getNode: (id) => get(nodeLookup).get(id),
getNodes: (ids) => (ids === undefined ? get(nodes) : getElements(get(nodeLookup), ids)),
getEdge: (id) => get(edgeLookup).get(id),
getEdges: (ids) => (ids === undefined ? get(edges) : getElements(get(edgeLookup), ids)),
setZoom: (zoomLevel, options) => {
get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration });
},
@@ -295,3 +305,17 @@ export function useSvelteFlow(): {
viewport
};
}
function getElements<EdgeOrNode>(lookup: Map<string, EdgeOrNode>, ids: string[]) {
const result = [];
for (const id of ids) {
const element = lookup.get(id);
if (element) {
result.push(element);
}
}
return result;
}
packages/svelte/src/lib/index.ts
-1
View File
@@ -79,7 +79,6 @@ export {
type OnError,
type NodeProps,
type NodeOrigin,
type OnNodeDrag,
type OnSelectionDrag,
Position,
type XYPosition,
packages/svelte/src/lib/store/index.ts
+1 -2
View File
@@ -15,7 +15,6 @@ import {
type XYPosition,
type CoordinateExtent,
type UpdateConnection,
type NodeBase,
type NodeDragItem,
errorMessages
} from '@xyflow/system';
@@ -67,7 +66,7 @@ export function createStore({
const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
store.nodes.update((nds) => {
return nds.map((node) => {
const nodeDragItem = (nodeDragItems as Array<NodeBase | NodeDragItem>).find(
const nodeDragItem = (nodeDragItems as Array<Node | NodeDragItem>).find(
(ndi) => ndi.id === node.id
);
packages/svelte/src/styles/base.css
-9
View File
@@ -2,16 +2,7 @@
@import '../../../system/src/styles/init.css';
@import '../../../system/src/styles/base.css';
.svelte-flow {
--edge-label-color-default: inherit;
}
.svelte-flow.dark {
--edge-label-color-default: #f8f8f8;
}
.svelte-flow__edge-label {
text-align: center;
position: absolute;
color: var(--edge-label-color, var(--edge-label-color-default));
}
packages/svelte/src/styles/style.css
+4 -9
View File
@@ -3,19 +3,14 @@
@import '../../../system/src/styles/style.css';
@import '../../../system/src/styles/node-resizer.css';
.svelte-flow {
--edge-label-color-default: inherit;
}
.svelte-flow.dark {
--edge-label-color-default: #f8f8f8;
}
.svelte-flow__edge-label {
text-align: center;
position: absolute;
padding: 2px;
font-size: 10px;
color: var(--edge-label-color, var(--edge-label-color-default));
cursor: pointer;
color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.svelte-flow__nodes {