diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx index c6babe2e5568ce2bcb367ac5b2063f66cf1cf14a..68f633b16cab67d4e806c76319911a6ecb20c4ce 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 24bf89ff1ee395b99c869d250c05371200f5e5b5..6a572b9df2f403eb4b72010372fb849c8bcfa5e6 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 {