Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

:feat: added datatypes to handle in order to check handles compat… #508

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

:feat: added datatypes to handle in order to check handles compat… #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion src/lib/components/Anchor/Anchor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -142,7 +144,8 @@
direction,
dynamic,
key,
edgeColor
edgeColor,
dataType
);
anchors.add(anchor, anchor.id);

Expand Down Expand Up @@ -402,13 +405,24 @@
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) {
// Don't connect an anchor to itself
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 }
Expand Down
2 changes: 2 additions & 0 deletions src/lib/types/anchor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export interface Anchor {
| ReturnType<typeof generateOutput>
| null;
node: Node;
// Data Type to check connection compatibility
dataType: string | string[] | null;
}

export type Direction = 'north' | 'south' | 'east' | 'west' | 'self';
Expand Down
7 changes: 5 additions & 2 deletions src/lib/utils/creators/createAnchor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export function createAnchor(
edgeColor?:
| Writable<CSSColorString | null>
| CustomWritable<CSSColorString>
| Readable<CSSColorString>
| Readable<CSSColorString>,
dataType?: string | string[] | null
): Anchor {
const { width, height } = dimensions;
const { x, y } = position;
Expand Down Expand Up @@ -70,6 +71,7 @@ export function createAnchor(
}
);
const rotation = derived([node.rotation], ([$rotation]) => $rotation);

return {
id,
position: anchorPosition,
Expand All @@ -86,6 +88,7 @@ export function createAnchor(
inputKey: key || null,
edgeColor: edgeColor || writable(null),
rotation,
node
node,
dataType: dataType || null
};
}
93 changes: 93 additions & 0 deletions src/routes/compatibility/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<script lang="ts">
import { Svelvet, Minimap, Node, Anchor } from '$lib';
import CustomEdge from '../../example-components/CustomEdge.svelte';
import ColorAnchor from '../../example-components/sandbox/ColorAnchor.svelte';

const nodes: number = 3;
</script>

<body>
<Svelvet fitView>
{#each Array(nodes) as _, i}
<Node label={`Node ${i + 1}`} position={{ x: 200 * i, y: 200 * i }} TD>
<div class="node">
<div class="inputs">
<Anchor input dataType={'image'} let:hovering>
<div class="my-anchor red" class:hovering />
</Anchor>
<Anchor input dataType={['image', 'tabular']} let:hovering>
<div class="my-anchor redblue" class:hovering />
</Anchor>
<Anchor input dataType={'tabular'} let:hovering>
<div class="my-anchor blue" class:hovering />
</Anchor>
</div>
<div class="outputs">
<Anchor output dataType={'tabular'} let:hovering>
<div class="my-anchor blue" class:hovering />
</Anchor>

<Anchor output dataType={'image'} let:hovering>
<div class="my-anchor red" class:hovering />
</Anchor>
</div>
</div>
</Node>
{/each}
</Svelvet>
</body>

<style>
body {
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}

.node {
width: 200px;
height: 100px;
background-color: #fafafa;
position: relative;
}
.node .inputs {
position: absolute;
top: 5%;
left: -10px;
height: 90%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.node .outputs {
position: absolute;
top: 5%;
right: 0;
height: 90%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.my-anchor {
width: 18px;
height: 18px;
border-radius: 50%;
}
.my-anchor.hovering {
transform: scale(1.2);
}
.my-anchor.red {
background-color: #ef5350;
}
.my-anchor.blue {
background-color: #42a5f5;
}
.my-anchor.redblue {
background: linear-gradient(90deg, rgba(239, 83, 80, 1) 0%, rgba(66, 165, 245, 1) 100%);
}
</style>