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

Fix #342 fix canvas component #342

Merged
merged 10 commits into from
Jan 22, 2025
Merged

Fix #342 fix canvas component #342

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
995742f
check for multi edges on create instead per render
Anchel123 Jan 1, 2025
3cf7586
commit
Anchel123 Jan 6, 2025
bde842e
commit
Anchel123 Jan 6, 2025
6efd861
expand only on the seconde click
Anchel123 Jan 8, 2025
9e2cf1f
fix zoom on search and in path
Anchel123 Jan 8, 2025
1737651
commit
Anchel123 Jan 19, 2025
bed88d3
commit
Anchel123 Jan 20, 2025
95518d4
commit
Anchel123 Jan 20, 2025
8e5dc72
fix test errors
Naseem77 Jan 21, 2025
17d8fd8
Remove 'spin' animation from config
gkorland Jan 22, 2025
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
21 changes: 0 additions & 21 deletions app/components/graphView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,20 +221,7 @@ export default function GraphView({

if (!start.x || !start.y || !end.x || !end.y) return

const sameNodesLinks = graph.Elements.links.filter(l => (l.source.id === start.id && l.target.id === end.id) || (l.target.id === start.id && l.source.id === end.id))
const index = sameNodesLinks.findIndex(l => l.id === link.id) || 0
const even = index % 2 === 0
let curve

if (start.id === end.id) {
if (even) {
curve = Math.floor(-(index / 2)) - 3
} else {
curve = Math.floor((index + 1) / 2) + 2
}

link.curve = curve * 0.1

const radius = NODE_SIZE * link.curve * 6.2;
const angleOffset = -Math.PI / 4; // 45 degrees offset for text alignment
const textX = start.x + radius * Math.cos(angleOffset);
Expand All @@ -244,14 +231,6 @@ export default function GraphView({
ctx.translate(textX, textY);
ctx.rotate(-angleOffset);
} else {
if (even) {
curve = Math.floor(-(index / 2))
} else {
curve = Math.floor((index + 1) / 2)
}

link.curve = curve * 0.1

const midX = (start.x + end.x) / 2 + (end.y - start.y) * (link.curve / 2);
const midY = (start.y + end.y) / 2 + (start.x - end.x) * (link.curve / 2);

Expand Down
66 changes: 61 additions & 5 deletions app/components/model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const COLORS_ORDER = [
"#80E6E6",
]

export function getCategoryColorValue(index: number): string {
export function getCategoryColorValue(index: number = 0): string {
return COLORS_ORDER[index % COLORS_ORDER.length]
}

Expand Down Expand Up @@ -176,13 +176,41 @@ export class Graph {
return
}

let sourceId = edgeData.src_node;
let destinationId = edgeData.dest_node
let source = this.nodesMap.get(edgeData.src_node)
let target = this.nodesMap.get(edgeData.dest_node)

if (!source) {
source = {
id: edgeData.src_node,
name: edgeData.src_node,
color: getCategoryColorValue(),
category: "",
expand: false,
visible: true,
collapsed,
isPath: !!path,
isPathSelected: path?.start?.id === edgeData.src_node || path?.end?.id === edgeData.src_node
}
}

if (!target) {
target = {
id: edgeData.dest_node,
name: edgeData.dest_node,
color: getCategoryColorValue(),
category: "",
expand: false,
visible: true,
collapsed,
isPath: !!path,
isPathSelected: path?.start?.id === edgeData.dest_node || path?.end?.id === edgeData.dest_node
}
}

link = {
id: edgeData.id,
source: sourceId,
target: destinationId,
source,
target,
label: edgeData.relation,
visible: true,
expand: false,
Expand All @@ -196,6 +224,34 @@ export class Graph {
newElements.links.push(link)
})

newElements.links.forEach(link => {
const start = link.source
const end = link.target
const sameNodesLinks = this.Elements.links.filter(l => (l.source.id === start.id && l.target.id === end.id) || (l.target.id === start.id && l.source.id === end.id))
const index = sameNodesLinks.findIndex(l => l.id === link.id) || 0
const even = index % 2 === 0
let curve

if (start.id === end.id) {
if (even) {
curve = Math.floor(-(index / 2)) - 3
} else {
curve = Math.floor((index + 1) / 2) + 2
}
} else {
console.log(link.curve)
if (even) {
curve = Math.floor(-(index / 2))
} else {
curve = Math.floor((index + 1) / 2)
}

}

link.curve = curve * 0.1
})


return newElements
}

Expand Down
Loading