Migrate to a D3-based graph renderer
This commit is contained in:
527
src/editor/GraphEditor.ts
Normal file
527
src/editor/GraphEditor.ts
Normal file
@@ -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);
|
||||
Reference in New Issue
Block a user