Migrate to a D3-based graph renderer
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
b68f84bc98
commit
be1cd8b39f
@ -0,0 +1,12 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
root: true,
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['@typescript-eslint'],
|
||||
rules: {
|
||||
'@typescript-eslint/no-explicit-any': 'warn',
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,527 @@
|
||||
import * as d3 from 'd3';
|
||||
import { D3DragEvent, D3ZoomEvent } from 'd3';
|
||||
import { Canvas, createCanvas, createSimulation, createZoom, GraphConfiguration, Simulation } from './d3/canvas.ts';
|
||||
import { Graph, Link, Node } from './d3/graph.ts';
|
||||
import { initMarkers } from './d3/markers.ts';
|
||||
import {
|
||||
arcMiddlePoint,
|
||||
linePath,
|
||||
paddedArcPath,
|
||||
paddedArcPathPoints,
|
||||
paddedLinePath,
|
||||
paddedReflexivePath,
|
||||
paddedReflexivePathPoints,
|
||||
} from './d3/paths.ts';
|
||||
|
||||
const nodeRadius = 24;
|
||||
|
||||
const tooltipOpacity = 1;
|
||||
const tooltipFadeInTame = 500;
|
||||
const tooltipFadeOutTime = 200;
|
||||
|
||||
const markerBoxSize = 4;
|
||||
|
||||
export const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(
|
||||
func: F,
|
||||
waitFor: number = 150,
|
||||
) => {
|
||||
let timeout: NodeJS.Timeout;
|
||||
|
||||
return (...args: Parameters<F>) => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func(...args), waitFor);
|
||||
};
|
||||
};
|
||||
|
||||
export class GraphEditor extends HTMLElement {
|
||||
private menu!: HTMLElement;
|
||||
private menuActions!: HTMLElement;
|
||||
private host!: d3.Selection<HTMLElement, undefined, null, undefined>;
|
||||
private simulation!: Simulation;
|
||||
private canvas!: Canvas;
|
||||
graph = new Graph();
|
||||
private node!: NodeSelection;
|
||||
private link!: LinkSelection;
|
||||
private labels!: LinkSelection;
|
||||
private triangles!: NodeSelection;
|
||||
private drag!: Drag;
|
||||
private draggableLink!: DraggableLink;
|
||||
private draggableLinkSourceNode: Node | null = null;
|
||||
private draggableLinkTargetNode: Node | null = null;
|
||||
private draggableLinkEnd: [number, number] | null = null;
|
||||
private xOffset: number = 0;
|
||||
private yOffset: number = 0;
|
||||
private scale: number = 1;
|
||||
readonly: boolean = false;
|
||||
private debounced = debounce(() => this.resetView());
|
||||
private config: GraphConfiguration = {
|
||||
nodeRadius,
|
||||
|
||||
tooltipOpacity,
|
||||
tooltipFadeInTame,
|
||||
tooltipFadeOutTime,
|
||||
|
||||
markerBoxSize,
|
||||
markerPadding: nodeRadius + 2 * markerBoxSize,
|
||||
markerRef: markerBoxSize / 2,
|
||||
arrowPoints: [
|
||||
[0, 0],
|
||||
[0, markerBoxSize],
|
||||
[markerBoxSize, markerBoxSize / 2],
|
||||
],
|
||||
markerPath: [0, 0, markerBoxSize, markerBoxSize].join(','),
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback(): void {
|
||||
this.host = d3.select<HTMLElement, undefined>(this);
|
||||
this.canvas = createCanvas(
|
||||
this.host,
|
||||
createZoom((event: D3ZoomEvent<any, any>) => this.onZoom(event)),
|
||||
(event) => this.onPointerMoved(event),
|
||||
(event) => this.onPointerUp(event),
|
||||
(event) => {
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
const [x, y] = d3.pointer(event, this.canvas!.node());
|
||||
this.createNode(x, y);
|
||||
},
|
||||
);
|
||||
initMarkers(this.canvas, this.config);
|
||||
this.draggableLink = createDraggableLink(this.canvas);
|
||||
this.node = createNode(this.canvas);
|
||||
this.link = createLink(this.canvas);
|
||||
this.labels = createLabel(this.canvas);
|
||||
this.triangles = createTriangle(this.canvas);
|
||||
this.simulation = createSimulation(
|
||||
this.graph,
|
||||
this.config,
|
||||
this.clientWidth,
|
||||
this.clientHeight,
|
||||
() => this.onTick(),
|
||||
);
|
||||
this.drag = createDrag(this.simulation);
|
||||
this.menu = document.createElement('nav');
|
||||
this.menu.classList.add('context-menu');
|
||||
this.menuActions = document.createElement('ul');
|
||||
this.menu.appendChild(this.menuActions);
|
||||
this.menu.setAttribute('hidden', 'hidden');
|
||||
this.appendChild(this.menu);
|
||||
this.addEventListener('click', this.closeMenu);
|
||||
this.restart();
|
||||
window.addEventListener('resize', this.debounced);
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
this.host.remove();
|
||||
this.removeEventListener('click', this.closeMenu);
|
||||
window.removeEventListener('resize', this.debounced);
|
||||
}
|
||||
|
||||
private createNode(x: number, y: number): void {
|
||||
this.graph.createNode(x, y);
|
||||
this.restart();
|
||||
}
|
||||
|
||||
private onZoom(event: D3ZoomEvent<any, any>): void {
|
||||
this.xOffset = event.transform.x;
|
||||
this.yOffset = event.transform.y;
|
||||
this.scale = event.transform.k;
|
||||
this.canvas.attr(
|
||||
'transform',
|
||||
`translate(${this.xOffset},${this.yOffset})scale(${this.scale})`,
|
||||
);
|
||||
}
|
||||
|
||||
private onPointerMoved(event: PointerEvent): void {
|
||||
event.preventDefault();
|
||||
if (this.draggableLinkSourceNode !== undefined) {
|
||||
const pointer = d3.pointers(event, this.host.node())[0];
|
||||
const point: [number, number] = [
|
||||
(pointer[0] - this.xOffset) / this.scale,
|
||||
(pointer[1] - this.yOffset) / this.scale,
|
||||
];
|
||||
if (event.pointerType === 'touch') {
|
||||
point[1] = point[1] - 4 * this.config.nodeRadius;
|
||||
// PointerEvents are not firing correctly for touch input.
|
||||
// So for TouchEvents, we have to manually detect Nodes within range and set them as the current target node.
|
||||
this.draggableLinkTargetNode = this.graph.nodes.find(
|
||||
(node) =>
|
||||
Math.sqrt(
|
||||
Math.pow(node.x! - point[0], 2)
|
||||
+ Math.pow(node.y! - point[1], 2),
|
||||
) < this.config.nodeRadius,
|
||||
) ?? null;
|
||||
}
|
||||
this.draggableLinkEnd = point;
|
||||
this.updateDraggableLinkPath();
|
||||
}
|
||||
}
|
||||
|
||||
private onPointerUp(event: PointerEvent): void {
|
||||
const source = this.draggableLinkSourceNode;
|
||||
const target = this.draggableLinkTargetNode;
|
||||
this.resetDraggableLink();
|
||||
if (source === null || target === null) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
if (this.graph.createLink(source.id, target.id) !== null) {
|
||||
this.restart();
|
||||
}
|
||||
}
|
||||
|
||||
restart(): void {
|
||||
this.link = this.link.data(
|
||||
this.graph.links,
|
||||
(d: Link) => `${d.source.id}-${d.target.id}`,
|
||||
).join((enter) => {
|
||||
const linkGroup = enter.append('g');
|
||||
linkGroup
|
||||
.append('path')
|
||||
.classed('link', true)
|
||||
.style('marker-end', 'url(#link-arrow)');
|
||||
if (!this.readonly) {
|
||||
linkGroup
|
||||
.append('path')
|
||||
.classed('clickbox', true)
|
||||
.on('click', (_: MouseEvent, d: Link) => {
|
||||
const transition = prompt('Transition');
|
||||
if (transition !== null) {
|
||||
d.transition = transition;
|
||||
this.restart();
|
||||
}
|
||||
})
|
||||
.on('contextmenu', (event: MouseEvent, d: Link) => {
|
||||
event.preventDefault();
|
||||
this.graph.removeLink(d);
|
||||
this.restart();
|
||||
});
|
||||
}
|
||||
return linkGroup;
|
||||
});
|
||||
|
||||
this.labels = this.labels.data(this.graph.links).join(
|
||||
(enter) => {
|
||||
const text = enter.append('text');
|
||||
text
|
||||
.classed('label', true)
|
||||
.attr('fill', 'currentColor')
|
||||
.text((d) => d.transition);
|
||||
return text;
|
||||
},
|
||||
(update) => {
|
||||
return update.text((d) => d.transition);
|
||||
},
|
||||
);
|
||||
|
||||
this.node = this.node.data(this.graph.nodes, (d) => d.id).join(
|
||||
(enter) => {
|
||||
const nodeGroup = enter
|
||||
.append('g')
|
||||
.call(this.drag);
|
||||
|
||||
if (!this.readonly) {
|
||||
nodeGroup.on('contextmenu', (event: MouseEvent, d: Node) => {
|
||||
this.moveMenu(event, [
|
||||
new MenuAction('Start', () => d.start, () => {
|
||||
d.start = !d.start;
|
||||
this.restart();
|
||||
}),
|
||||
new MenuAction('Accepting', () => d.accepting, () => {
|
||||
d.accepting = !d.accepting;
|
||||
this.restart();
|
||||
}),
|
||||
new MenuAction('Delete', () => false, () => {
|
||||
this.graph.removeNode(d);
|
||||
this.resetDraggableLink();
|
||||
this.restart();
|
||||
}),
|
||||
]);
|
||||
});
|
||||
}
|
||||
const circle = nodeGroup
|
||||
.append('circle')
|
||||
.classed('node', true)
|
||||
.classed('accepting', (d) => d.accepting)
|
||||
.classed('active', (d) => d.active)
|
||||
.attr('r', this.config.nodeRadius);
|
||||
if (!this.readonly) {
|
||||
circle.on(
|
||||
'mouseenter',
|
||||
(_, d: Node) => (this.draggableLinkTargetNode = d),
|
||||
)
|
||||
.on('mouseout', () => (this.draggableLinkTargetNode = null))
|
||||
.on('pointerdown', (event: PointerEvent, d: Node) => {
|
||||
this.onPointerDown(event, d);
|
||||
})
|
||||
.on('pointerup', (event: PointerEvent) => {
|
||||
this.onPointerUp(event);
|
||||
});
|
||||
}
|
||||
return nodeGroup;
|
||||
},
|
||||
(update) => {
|
||||
update.select('circle').classed('accepting', (d) => d.accepting).classed('active', (d) => d.active);
|
||||
return update;
|
||||
},
|
||||
);
|
||||
const startNodes = this.graph.nodes.filter((n) => n.start);
|
||||
this.triangles = this.triangles.data(startNodes).join(
|
||||
(enter) => {
|
||||
return enter.append('path').classed('triangle', true).classed('start-arrow', true);
|
||||
},
|
||||
);
|
||||
this.simulation.nodes(this.graph.nodes);
|
||||
this.simulation.alpha(0.5).restart();
|
||||
}
|
||||
|
||||
private onPointerDown(event: PointerEvent, node: Node): void {
|
||||
if (event.button !== 0) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
const coordinates: [number, number] = [node.x!, node.y!];
|
||||
this.draggableLinkEnd = coordinates;
|
||||
this.draggableLinkSourceNode = node;
|
||||
this.draggableLink.style('marker-end', 'url(#draggable-link-arrow)')
|
||||
.classed('hidden', false)
|
||||
.attr('d', linePath(coordinates, coordinates));
|
||||
this.restart();
|
||||
}
|
||||
|
||||
private onTick(): void {
|
||||
this.node.attr('transform', (d) => `translate(${d.x},${d.y})`);
|
||||
|
||||
this.link.selectAll<SVGPathElement, Link>('path').attr(
|
||||
'd',
|
||||
(d: Link) => {
|
||||
if (d.source.id === d.target.id) {
|
||||
return paddedReflexivePath(
|
||||
d.source,
|
||||
[this.clientWidth / 2, this.clientHeight / 2],
|
||||
this.config,
|
||||
);
|
||||
} else if (this.isBidirectional(d.source, d.target)) {
|
||||
return paddedArcPath(d.source, d.target, this.config);
|
||||
} else {
|
||||
return paddedLinePath(d.source, d.target, this.config);
|
||||
}
|
||||
},
|
||||
);
|
||||
this.labels.attr(
|
||||
'transform',
|
||||
(d: Link) => {
|
||||
const x = (d.source.x! + d.target.x!) / 2;
|
||||
const y = (d.source.y! + d.target.y!) / 2;
|
||||
if (d.source.id === d.target.id) {
|
||||
const [start, end] = paddedReflexivePathPoints(
|
||||
d.source,
|
||||
[this.clientWidth / 2, this.clientHeight / 2],
|
||||
this.config,
|
||||
);
|
||||
// Places the text at the middle of the arc.
|
||||
const [middleX, middleY] = arcMiddlePoint(start, end, this.config);
|
||||
return `translate(${middleX},${middleY})`;
|
||||
}
|
||||
if (this.isBidirectional(d.source, d.target)) {
|
||||
const [start, end] = paddedArcPathPoints(d.source, d.target, this.config);
|
||||
const [middleX, middleY] = arcMiddlePoint(start, end, this.config);
|
||||
return `translate(${middleX},${middleY})`;
|
||||
}
|
||||
return `translate(${x},${y})`;
|
||||
},
|
||||
);
|
||||
this.triangles.attr(
|
||||
'd',
|
||||
(d: Node) => {
|
||||
return `M ${d.x! - 2 * this.config.nodeRadius},${d.y! - this.config.nodeRadius} L ${
|
||||
d.x! + 5 - this.config.nodeRadius
|
||||
},${d.y!} L ${d.x! - 2 * this.config.nodeRadius},${d.y! + this.config.nodeRadius} Z`;
|
||||
},
|
||||
);
|
||||
this.updateDraggableLinkPath();
|
||||
}
|
||||
|
||||
resetView(): void {
|
||||
this.simulation!.stop();
|
||||
this.host.selectChildren().remove();
|
||||
this.xOffset = 0;
|
||||
this.yOffset = 0;
|
||||
this.scale = 1;
|
||||
this.canvas = undefined!;
|
||||
this.draggableLink = undefined!;
|
||||
this.link = undefined!;
|
||||
this.node = undefined!;
|
||||
this.simulation = undefined!;
|
||||
this.resetDraggableLink();
|
||||
this.connectedCallback();
|
||||
}
|
||||
|
||||
resetDraggableLink(): void {
|
||||
this.draggableLink?.classed('hidden', true).style('marker-end', '');
|
||||
this.draggableLinkSourceNode = null;
|
||||
this.draggableLinkTargetNode = null;
|
||||
this.draggableLinkEnd = null;
|
||||
}
|
||||
|
||||
updateDraggableLinkPath(): void {
|
||||
const source = this.draggableLinkSourceNode;
|
||||
if (source !== null) {
|
||||
const target = this.draggableLinkTargetNode;
|
||||
if (target !== null) {
|
||||
this.draggableLink.attr('d', () => {
|
||||
if (source.id === target.id) {
|
||||
return paddedReflexivePath(
|
||||
source,
|
||||
[this.clientWidth / 2, this.clientHeight / 2],
|
||||
this.config,
|
||||
);
|
||||
} else if (this.isBidirectional(source, target)) {
|
||||
return paddedLinePath(source, target, this.config);
|
||||
} else {
|
||||
return paddedArcPath(source, target, this.config);
|
||||
}
|
||||
});
|
||||
} else if (this.draggableLinkEnd !== null) {
|
||||
const from: [number, number] = [source.x!, source.y!];
|
||||
this.draggableLink.attr('d', linePath(from, this.draggableLinkEnd));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isBidirectional(source: Node, target: Node): boolean {
|
||||
return (
|
||||
source.id !== target.id
|
||||
&& this.graph.links.some(
|
||||
(l) => l.target.id === source.id && l.source.id === target.id,
|
||||
)
|
||||
&& this.graph.links.some(
|
||||
(l) => l.target.id === target.id && l.source.id === source.id,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
private moveMenu(event: MouseEvent, actions: MenuAction[]) {
|
||||
event.preventDefault();
|
||||
while (this.menuActions.firstChild) {
|
||||
this.menuActions.removeChild(this.menuActions.firstChild);
|
||||
}
|
||||
for (const action of actions) {
|
||||
const item = document.createElement('li');
|
||||
item.tabIndex = 0;
|
||||
item.textContent = action.label;
|
||||
if (action.checkmark()) {
|
||||
item.classList.add('checked');
|
||||
}
|
||||
const handleEvent = () => {
|
||||
action.action();
|
||||
this.closeMenu(event);
|
||||
};
|
||||
item.onclick = handleEvent;
|
||||
item.onkeydown = (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
handleEvent();
|
||||
}
|
||||
};
|
||||
this.menuActions.appendChild(item);
|
||||
}
|
||||
this.menu.style.left = `${event.pageX}px`;
|
||||
this.menu.style.top = `${event.pageY}px`;
|
||||
this.menu.removeAttribute('hidden');
|
||||
}
|
||||
|
||||
private closeMenu(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
this.menu.setAttribute('hidden', 'hidden');
|
||||
}
|
||||
}
|
||||
|
||||
type NodeSelection = d3.Selection<
|
||||
SVGGElement,
|
||||
Node,
|
||||
SVGGElement,
|
||||
undefined
|
||||
>;
|
||||
|
||||
function createNode(canvas: Canvas): NodeSelection {
|
||||
return canvas.append('g').classed('nodes', true).selectAll('circle');
|
||||
}
|
||||
|
||||
type Drag = d3.DragBehavior<SVGGElement, Node, Node>;
|
||||
|
||||
function createDrag(simulation: Simulation): Drag {
|
||||
return d3
|
||||
.drag<SVGGElement, Node, Node>()
|
||||
.filter((event) => event.button === 1)
|
||||
.on(
|
||||
'start',
|
||||
(event: D3DragEvent<SVGCircleElement, Node, Node>, d: Node) => {
|
||||
event.sourceEvent.preventDefault();
|
||||
if (event.active === 0) {
|
||||
simulation.alphaTarget(0.5).restart();
|
||||
}
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
},
|
||||
)
|
||||
.on('drag', (event: D3DragEvent<SVGCircleElement, Node, Node>, d: Node) => {
|
||||
d.fx = event.x;
|
||||
d.fy = event.y;
|
||||
})
|
||||
.on('end', (event: D3DragEvent<SVGCircleElement, Node, Node>, d: Node) => {
|
||||
if (event.active === 0) {
|
||||
simulation.alphaTarget(0);
|
||||
}
|
||||
d.fx = undefined;
|
||||
d.fy = undefined;
|
||||
});
|
||||
}
|
||||
|
||||
type DraggableLink = d3.Selection<
|
||||
SVGPathElement,
|
||||
undefined,
|
||||
null,
|
||||
undefined
|
||||
>;
|
||||
|
||||
function createDraggableLink(canvas: Canvas): DraggableLink {
|
||||
return canvas
|
||||
.append('path')
|
||||
.classed('link draggable hidden', true)
|
||||
.attr('d', 'M0,0L0,0');
|
||||
}
|
||||
|
||||
type LinkSelection = d3.Selection<
|
||||
SVGGElement,
|
||||
Link,
|
||||
SVGGElement,
|
||||
undefined
|
||||
>;
|
||||
|
||||
function createLink(canvas: Canvas): LinkSelection {
|
||||
return canvas.append('g').classed('links', true).selectAll('path');
|
||||
}
|
||||
|
||||
function createLabel(canvas: Canvas): LinkSelection {
|
||||
return canvas.append('g').classed('labels', true).selectAll('.label');
|
||||
}
|
||||
|
||||
function createTriangle(canvas: Canvas): NodeSelection {
|
||||
return canvas.append('g').classed('triangles', true).selectAll('.label');
|
||||
}
|
||||
|
||||
class MenuAction {
|
||||
constructor(
|
||||
public readonly label: string,
|
||||
public readonly checkmark: () => boolean,
|
||||
public readonly action: () => void,
|
||||
) {
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('graph-editor', GraphEditor);
|
||||
@ -0,0 +1,94 @@
|
||||
import * as d3 from 'd3';
|
||||
import { D3ZoomEvent } from 'd3';
|
||||
import { Graph, Link, Node } from './graph.ts';
|
||||
|
||||
export interface GraphConfiguration {
|
||||
nodeRadius: number;
|
||||
|
||||
tooltipOpacity: number;
|
||||
tooltipFadeInTame: number;
|
||||
tooltipFadeOutTime: number;
|
||||
|
||||
markerBoxSize: number;
|
||||
markerPadding: number;
|
||||
markerRef: number;
|
||||
arrowPoints: [number, number][];
|
||||
markerPath: string;
|
||||
}
|
||||
|
||||
export type GraphHost = d3.Selection<
|
||||
HTMLElement,
|
||||
undefined,
|
||||
null,
|
||||
undefined
|
||||
>;
|
||||
|
||||
export type Canvas = d3.Selection<
|
||||
SVGGElement,
|
||||
undefined,
|
||||
null,
|
||||
undefined
|
||||
>;
|
||||
|
||||
export type Simulation = d3.Simulation<Node, Link>;
|
||||
export type Zoom = d3.ZoomBehavior<SVGSVGElement, undefined>;
|
||||
|
||||
export function createCanvas(
|
||||
host: GraphHost,
|
||||
zoom: Zoom,
|
||||
onPointerMoved: (event: PointerEvent) => void,
|
||||
onPointerUp: (event: PointerEvent) => void,
|
||||
onDoubleClick: (event: PointerEvent) => void,
|
||||
): Canvas {
|
||||
return host
|
||||
.append('svg')
|
||||
.attr('width', '100%')
|
||||
.attr('height', '100%')
|
||||
.on('pointermove', (event: PointerEvent) => onPointerMoved(event))
|
||||
.on('pointerup', (event: PointerEvent) => onPointerUp(event))
|
||||
.on('contextmenu', (event: MouseEvent) => terminate(event))
|
||||
.on('dblclick', (event: PointerEvent) => onDoubleClick(event))
|
||||
.call(zoom)
|
||||
.on('dblclick.zoom', null)
|
||||
.append('g');
|
||||
}
|
||||
|
||||
export function createZoom(
|
||||
onZoom: (event: D3ZoomEvent<any, any>) => void,
|
||||
): Zoom {
|
||||
return d3
|
||||
.zoom<SVGSVGElement, undefined>()
|
||||
.scaleExtent([0.1, 10])
|
||||
.filter((event) => event.button === 0 || event.touches?.length >= 2)
|
||||
.on('zoom', (event) => onZoom(event));
|
||||
}
|
||||
|
||||
export function createSimulation(
|
||||
graph: Graph,
|
||||
config: GraphConfiguration,
|
||||
width: number,
|
||||
height: number,
|
||||
onTick: () => void,
|
||||
): Simulation {
|
||||
return d3
|
||||
.forceSimulation<Node, Link>(graph!.nodes)
|
||||
.on('tick', () => onTick())
|
||||
.force('center', d3.forceCenter<Node>(width / 2, height / 2))
|
||||
.force('charge', d3.forceManyBody<Node>().strength(-500))
|
||||
.force('collision', d3.forceCollide<Node>().radius(config.nodeRadius))
|
||||
.force(
|
||||
'link',
|
||||
d3
|
||||
.forceLink<Node, Link>()
|
||||
.links(graph!.links)
|
||||
.id((d: Node) => d.id)
|
||||
.distance(config.nodeRadius * 10),
|
||||
)
|
||||
.force('x', d3.forceX<Node>(width / 2).strength(0.05))
|
||||
.force('y', d3.forceY<Node>(height / 2).strength(0.05));
|
||||
}
|
||||
|
||||
function terminate(event: Event): void {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
import type { SimulationLinkDatum, SimulationNodeDatum } from 'd3';
|
||||
|
||||
export class Graph {
|
||||
private idCounter = 0;
|
||||
public readonly nodes: Node[] = [];
|
||||
public readonly links: Link[] = [];
|
||||
|
||||
public createNode(x?: number, y?: number): Node {
|
||||
const node = new Node(this.idCounter++, x, y);
|
||||
this.nodes.push(node);
|
||||
return node;
|
||||
}
|
||||
|
||||
public createLink(sourceId: number, targetId: number, label: string = 'a'): Link | null {
|
||||
const existingLink = this.links.find(
|
||||
(l) => l.source.id === sourceId && l.target.id === targetId,
|
||||
);
|
||||
if (typeof existingLink !== 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const source = this.nodes.find((node) => node.id === sourceId);
|
||||
if (typeof source === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const target = this.nodes.find((node) => node.id === targetId);
|
||||
if (typeof target === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const link = new Link(source, target, label);
|
||||
this.links.push(link);
|
||||
return link;
|
||||
}
|
||||
|
||||
public removeNode(node: Node): [Node, Link[]] | undefined {
|
||||
const nodeIndex = this.nodes.findIndex((n) => n.id === node.id);
|
||||
if (nodeIndex === -1) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
this.nodes.splice(nodeIndex, 1);
|
||||
const attachedLinks = this.links.filter(
|
||||
(link) => link.source.id === node.id || link.target.id === node.id,
|
||||
);
|
||||
attachedLinks.forEach((link) => {
|
||||
const linkIndex = this.links.indexOf(link, 0);
|
||||
this.links.splice(linkIndex, 1);
|
||||
});
|
||||
|
||||
return [node, attachedLinks];
|
||||
}
|
||||
|
||||
public removeLink(link: Link): Link | undefined {
|
||||
const linkIndex = this.links.findIndex(
|
||||
(l) => l.source.id === link.source.id && l.target.id === link.target.id,
|
||||
);
|
||||
if (linkIndex === -1) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
this.links.splice(linkIndex, 1);
|
||||
return link;
|
||||
}
|
||||
|
||||
forEach(consumer: (node: Node, index: number, array: Node[]) => void): void {
|
||||
this.nodes.forEach(consumer);
|
||||
}
|
||||
}
|
||||
|
||||
export class Node implements SimulationNodeDatum {
|
||||
public constructor(
|
||||
public readonly id: number,
|
||||
public x?: number,
|
||||
public y?: number,
|
||||
public fx?: number,
|
||||
public fy?: number,
|
||||
public start: boolean = false,
|
||||
public accepting: boolean = false,
|
||||
public active: boolean = false,
|
||||
) {}
|
||||
}
|
||||
|
||||
export class Link implements SimulationLinkDatum<Node> {
|
||||
public constructor(
|
||||
public readonly source: Node,
|
||||
public readonly target: Node,
|
||||
public transition: string,
|
||||
) {}
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
import * as d3 from 'd3';
|
||||
import { GraphConfiguration } from './canvas.ts';
|
||||
|
||||
export function initMarkers(
|
||||
canvas: d3.Selection<SVGGElement, undefined, null, undefined>,
|
||||
config: GraphConfiguration,
|
||||
): void {
|
||||
createLinkMarker(canvas, config, 'link-arrow', 'arrow');
|
||||
createLinkMarker(canvas, config, 'draggable-link-arrow', 'arrow draggable');
|
||||
}
|
||||
|
||||
function createLinkMarker(
|
||||
canvas: d3.Selection<SVGGElement, undefined, null, undefined>,
|
||||
config: GraphConfiguration,
|
||||
id: string,
|
||||
classes: string,
|
||||
): void {
|
||||
canvas
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', id)
|
||||
.attr('viewBox', config.markerPath)
|
||||
.attr('refX', config.markerRef)
|
||||
.attr('refY', config.markerRef)
|
||||
.attr('markerWidth', config.markerBoxSize)
|
||||
.attr('markerHeight', config.markerBoxSize)
|
||||
.attr('orient', 'auto')
|
||||
.classed(classes, true)
|
||||
.append('path')
|
||||
.attr('d', `${d3.line()(config.arrowPoints)}`);
|
||||
}
|
||||
@ -0,0 +1,159 @@
|
||||
import Matrix from 'ml-matrix';
|
||||
import { GraphConfiguration } from './canvas.ts';
|
||||
import { Node } from './graph.ts';
|
||||
|
||||
/**
|
||||
* Creates the path of a straight line between the edges of two nodes.
|
||||
*
|
||||
* @param source The source Node.
|
||||
* @param target The target Node.
|
||||
* @param graphConfiguration Visual configuration.
|
||||
*/
|
||||
export function paddedLinePath(
|
||||
source: Node,
|
||||
target: Node,
|
||||
graphConfiguration: GraphConfiguration,
|
||||
): string {
|
||||
const deltaX = target.x! - source.x!;
|
||||
const deltaY = target.y! - source.y!;
|
||||
const dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
||||
const normX = deltaX / dist;
|
||||
const normY = deltaY / dist;
|
||||
const sourceX = source.x! + (graphConfiguration.nodeRadius - 1) * normX;
|
||||
const sourceY = source.y! + (graphConfiguration.nodeRadius - 1) * normY;
|
||||
const targetX = target.x! - graphConfiguration.markerPadding * normX;
|
||||
const targetY = target.y! - graphConfiguration.markerPadding * normY;
|
||||
return `M${sourceX},${sourceY}
|
||||
L${targetX},${targetY}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the path of an arc line between the edges of two nodes.
|
||||
*
|
||||
* @param source The source Node.
|
||||
* @param target The target Node.
|
||||
* @param graphConfiguration Visual configuration.
|
||||
*/
|
||||
export function paddedArcPathPoints(
|
||||
source: Node,
|
||||
target: Node,
|
||||
graphConfiguration: GraphConfiguration,
|
||||
): [Matrix, Matrix, number] {
|
||||
const s = new Matrix([[source.x!, source.y!]]);
|
||||
const t = new Matrix([[target.x!, target.y!]]);
|
||||
const diff = Matrix.subtract(t, s);
|
||||
const dist = diff.norm('frobenius');
|
||||
const norm = diff.divide(dist);
|
||||
const rotation = degreesToRadians(10);
|
||||
const start = rotate(norm, -rotation)
|
||||
.multiply(graphConfiguration.nodeRadius - 1)
|
||||
.add(s);
|
||||
const endNorm = Matrix.multiply(norm, -1);
|
||||
const end = rotate(endNorm, rotation)
|
||||
.multiply(graphConfiguration.nodeRadius)
|
||||
.add(t)
|
||||
.add(
|
||||
rotate(endNorm, rotation).multiply(2 * graphConfiguration.markerBoxSize),
|
||||
);
|
||||
return [start, end, 1.2 * dist];
|
||||
}
|
||||
|
||||
export function paddedArcPath(
|
||||
source: Node,
|
||||
target: Node,
|
||||
graphConfiguration: GraphConfiguration,
|
||||
): string {
|
||||
const [start, end, arcRadius] = paddedArcPathPoints(source, target, graphConfiguration);
|
||||
return `M${start.get(0, 0)},${start.get(0, 1)}
|
||||
A${arcRadius},${arcRadius},0,0,1,${end.get(0, 0)},${end.get(0, 1)}`;
|
||||
}
|
||||
|
||||
export function arcMiddlePoint(
|
||||
start: Matrix,
|
||||
end: Matrix,
|
||||
{ nodeRadius }: GraphConfiguration,
|
||||
): [number, number] {
|
||||
const center = Matrix.add(start, end).divide(2);
|
||||
const angle = Math.atan2(end.get(0, 1) - start.get(0, 1), end.get(0, 0) - start.get(0, 0));
|
||||
const middleX = center.get(0, 0) + nodeRadius * Math.cos(angle + Math.PI / 2);
|
||||
const middleY = center.get(0, 1) + nodeRadius * Math.sin(angle + Math.PI / 2);
|
||||
return [middleX, middleY];
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the path of a reflexive line of a node.
|
||||
* It will be always be directed away from the center.
|
||||
*
|
||||
* @param node The Node.
|
||||
* @param center The center point of the graph.
|
||||
* @param graphConfiguration Visual configuration.
|
||||
*/
|
||||
export function paddedReflexivePathPoints(
|
||||
node: Node,
|
||||
center: [number, number],
|
||||
graphConfiguration: GraphConfiguration,
|
||||
): [Matrix, Matrix] {
|
||||
const n = new Matrix([[node.x!, node.y!]]);
|
||||
const c = new Matrix([center]);
|
||||
if (n.get(0, 0) === c.get(0, 0) && n.get(0, 1) === c.get(0, 1)) {
|
||||
c.add([[0, 1]]); // Nodes at the exact center of the Graph should have their reflexive edge above them.
|
||||
}
|
||||
const diff = Matrix.subtract(n, c);
|
||||
const norm = diff.divide(diff.norm('frobenius'));
|
||||
const rotation = degreesToRadians(40);
|
||||
const start = rotate(norm, rotation)
|
||||
.multiply(graphConfiguration.nodeRadius - 1)
|
||||
.add(n);
|
||||
const end = rotate(norm, -rotation)
|
||||
.multiply(graphConfiguration.nodeRadius)
|
||||
.add(n)
|
||||
.add(rotate(norm, -rotation).multiply(2 * graphConfiguration.markerBoxSize));
|
||||
return [start, end];
|
||||
}
|
||||
|
||||
export function paddedReflexivePath(
|
||||
node: Node,
|
||||
center: [number, number],
|
||||
graphConfiguration: GraphConfiguration,
|
||||
): string {
|
||||
const [start, end] = paddedReflexivePathPoints(node, center, graphConfiguration);
|
||||
return `M${start.get(0, 0)},${start.get(0, 1)}
|
||||
A${graphConfiguration.nodeRadius},${graphConfiguration.nodeRadius},0,1,0,${end.get(0, 0)},${end.get(0, 1)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a straight path between two points.
|
||||
*
|
||||
* @param from Source coordinates.
|
||||
* @param to Target coordinates.
|
||||
*/
|
||||
export function linePath(from: [number, number], to: [number, number]): string {
|
||||
return `M${from[0]},${from[1]}
|
||||
L${to[0]},${to[1]}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the radian value for the given degrees.
|
||||
*
|
||||
* @param degrees The degrees.
|
||||
*/
|
||||
export function degreesToRadians(degrees: number): number {
|
||||
return degrees * (Math.PI / 180);
|
||||
}
|
||||
|
||||
/**
|
||||
* Rotates a vector by the given radians around the origin.
|
||||
*
|
||||
* @param vector The vector to be rotated.
|
||||
* @param radians The radians to rotate the vector by.
|
||||
*/
|
||||
export function rotate(vector: Matrix, radians: number): Matrix {
|
||||
const x = vector.get(0, 0);
|
||||
const y = vector.get(0, 1);
|
||||
return new Matrix([
|
||||
[
|
||||
x * Math.cos(radians) - y * Math.sin(radians),
|
||||
x * Math.sin(radians) + y * Math.cos(radians),
|
||||
],
|
||||
]);
|
||||
}
|
||||
Loading…
Reference in new issue