diff --git a/src/lib/components/Anchor/Anchor.svelte b/src/lib/components/Anchor/Anchor.svelte index 9beeffb15..87536add6 100644 --- a/src/lib/components/Anchor/Anchor.svelte +++ b/src/lib/components/Anchor/Anchor.svelte @@ -63,6 +63,8 @@ export let id: string | number = 0; export let input = false; export let output = false; + export let dataType: string | string[] | undefined = undefined; + /** * @default dependent on `input` and `output` props * @description When `true`, the Anchor will accept multiple connections. This is set to true by default @@ -142,7 +144,8 @@ direction, dynamic, key, - edgeColor + edgeColor, + dataType ); anchors.add(anchor, anchor.id); @@ -402,6 +405,14 @@ attemptConnection(source, target, e); } + // Check if the data types of the source and target anchors are compatible + function matchDataTypes(source: Anchor, target: Anchor): boolean { + if (!source.dataType || !target.dataType) return true; + const sourceDataType = Array.isArray(source.dataType) ? source.dataType : [source.dataType]; + const targetDataType = Array.isArray(target.dataType) ? target.dataType : [target.dataType]; + return sourceDataType.some((type) => targetDataType.includes(type)); + } + // Updates the connected anchors set on source and target // Creates the edge and add it to the store function connectAnchors(source: Anchor, target: Anchor) { @@ -409,6 +420,9 @@ if (source === target) return false; // Don't connect if the anchors are already connected if (get(source.connected).has(anchor)) return false; + // Don't connect if not compatible data types + if (!matchDataTypes(source, target)) return false; + const edgeConfig: EdgeConfig = { color: edgeColor, label: { text: edgeLabel } diff --git a/src/lib/types/anchor.ts b/src/lib/types/anchor.ts index 4f4471b8d..a46bffa51 100644 --- a/src/lib/types/anchor.ts +++ b/src/lib/types/anchor.ts @@ -35,6 +35,8 @@ export interface Anchor { | ReturnType | null; node: Node; + // Data Type to check connection compatibility + dataType: string | string[] | null; } export type Direction = 'north' | 'south' | 'east' | 'west' | 'self'; diff --git a/src/lib/utils/creators/createAnchor.ts b/src/lib/utils/creators/createAnchor.ts index d163346d4..5efd90514 100644 --- a/src/lib/utils/creators/createAnchor.ts +++ b/src/lib/utils/creators/createAnchor.ts @@ -21,7 +21,8 @@ export function createAnchor( edgeColor?: | Writable | CustomWritable - | Readable + | Readable, + dataType?: string | string[] | null ): Anchor { const { width, height } = dimensions; const { x, y } = position; @@ -70,6 +71,7 @@ export function createAnchor( } ); const rotation = derived([node.rotation], ([$rotation]) => $rotation); + return { id, position: anchorPosition, @@ -86,6 +88,7 @@ export function createAnchor( inputKey: key || null, edgeColor: edgeColor || writable(null), rotation, - node + node, + dataType: dataType || null }; } diff --git a/src/routes/compatibility/+page.svelte b/src/routes/compatibility/+page.svelte new file mode 100644 index 000000000..66c064778 --- /dev/null +++ b/src/routes/compatibility/+page.svelte @@ -0,0 +1,93 @@ + + + + + {#each Array(nodes) as _, i} + +
+
+ +
+ + +
+ + +
+ +
+
+ +
+ + + +
+ +
+
+ + {/each} + + + +