From fdc10d5b5631fbafa3b958b11281bebc806d34ae Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-braunschweig.de>
Date: Wed, 13 Jul 2022 14:41:06 +0200
Subject: [PATCH] Adjusts custom rendering
---
src/editor/js/components/editor.tsx | 15 ++++++++++-----
src/editor/js/structures/graph/graphelement.ts | 2 ++
2 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index c6babe2..68f633b 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -185,7 +185,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
* @returns True, if element should be highlighted.
*/
private isHighlighted(element: GraphElement): boolean {
- if (this.state.selectedNode == undefined) {
+ if (this.state.selectedNode == undefined || element == undefined) {
// Default to false if nothing selected.
return false;
}
@@ -196,9 +196,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
} else if (element.link) {
// Is link
// Is it one of the adjacent links?
- const found = this.state.selectedNode.links.find(
- this.state.selectedNode.equals
- );
+ const found = this.state.selectedNode.links.find(element.equals);
return found !== undefined;
} else {
return false;
@@ -297,7 +295,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
// TODO: Render label as always visible
}
- private handleLinkCanvasObject(link: any, ctx: any): any {
+ private handleLinkCanvasObject(link: any, ctx: any, globalScale: any): any {
// Links already initialized?
if (link.source.x === undefined) {
return undefined;
@@ -315,10 +313,17 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
gradient.addColorStop("0", link.target.type.color);
gradient.addColorStop("1", link.source.type.color);
+ let lineWidth = 0.5;
+ if (this.isHighlighted(link)) {
+ lineWidth = 3;
+ }
+ lineWidth /= globalScale; // Scale with zoom
+
ctx.beginPath();
ctx.moveTo(link.source.x, link.source.y);
ctx.lineTo(link.target.x, link.target.y);
ctx.strokeStyle = gradient;
+ ctx.lineWidth = lineWidth;
ctx.stroke();
// Only render strokes on last link
diff --git a/src/editor/js/structures/graph/graphelement.ts b/src/editor/js/structures/graph/graphelement.ts
index 24bf89f..6a572b9 100644
--- a/src/editor/js/structures/graph/graphelement.ts
+++ b/src/editor/js/structures/graph/graphelement.ts
@@ -12,6 +12,8 @@ export class GraphElement extends SerializableItem {
this.graph = graph;
this.isNode = false;
this.isLink = false;
+
+ this.equals = this.equals.bind(this);
}
public get node(): boolean {
--
GitLab