|
|
@ -41,6 +41,7 @@ export class GraphEditor extends HTMLElement {
|
|
|
|
private canvas!: Canvas;
|
|
|
|
private canvas!: Canvas;
|
|
|
|
graph = new Graph();
|
|
|
|
graph = new Graph();
|
|
|
|
private node!: NodeSelection;
|
|
|
|
private node!: NodeSelection;
|
|
|
|
|
|
|
|
private ids!: NodeSelection;
|
|
|
|
private link!: LinkSelection;
|
|
|
|
private link!: LinkSelection;
|
|
|
|
private labels!: LinkSelection;
|
|
|
|
private labels!: LinkSelection;
|
|
|
|
private triangles!: NodeSelection;
|
|
|
|
private triangles!: NodeSelection;
|
|
|
@ -95,6 +96,7 @@ export class GraphEditor extends HTMLElement {
|
|
|
|
initMarkers(this.canvas, this.config);
|
|
|
|
initMarkers(this.canvas, this.config);
|
|
|
|
this.draggableLink = createDraggableLink(this.canvas);
|
|
|
|
this.draggableLink = createDraggableLink(this.canvas);
|
|
|
|
this.node = createNode(this.canvas);
|
|
|
|
this.node = createNode(this.canvas);
|
|
|
|
|
|
|
|
this.ids = createIds(this.canvas);
|
|
|
|
this.link = createLink(this.canvas);
|
|
|
|
this.link = createLink(this.canvas);
|
|
|
|
this.labels = createLabel(this.canvas);
|
|
|
|
this.labels = createLabel(this.canvas);
|
|
|
|
this.triangles = createTriangle(this.canvas);
|
|
|
|
this.triangles = createTriangle(this.canvas);
|
|
|
@ -215,6 +217,7 @@ export class GraphEditor extends HTMLElement {
|
|
|
|
text
|
|
|
|
text
|
|
|
|
.classed('label', true)
|
|
|
|
.classed('label', true)
|
|
|
|
.attr('fill', 'currentColor')
|
|
|
|
.attr('fill', 'currentColor')
|
|
|
|
|
|
|
|
.style('pointer-events', 'none')
|
|
|
|
.text((d) => d.transition);
|
|
|
|
.text((d) => d.transition);
|
|
|
|
return text;
|
|
|
|
return text;
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -277,11 +280,20 @@ export class GraphEditor extends HTMLElement {
|
|
|
|
return update;
|
|
|
|
return update;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.ids = this.ids.data(this.graph.nodes, (d) => d.id).join(
|
|
|
|
|
|
|
|
(enter) =>
|
|
|
|
|
|
|
|
enter.append('text').attr('text-anchor', 'middle').attr('dy', '.35em').style('pointer-events', 'none').text((
|
|
|
|
|
|
|
|
d,
|
|
|
|
|
|
|
|
) => d.id + 1),
|
|
|
|
|
|
|
|
(update) => update.text((d) => d.id + 1),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
const startNodes = this.graph.nodes.filter((n) => n.start);
|
|
|
|
const startNodes = this.graph.nodes.filter((n) => n.start);
|
|
|
|
this.triangles = this.triangles.data(startNodes).join(
|
|
|
|
this.triangles = this.triangles.data(startNodes).join(
|
|
|
|
(enter) => {
|
|
|
|
(enter) =>
|
|
|
|
return enter.append('path').classed('triangle', true).classed('start-arrow', true);
|
|
|
|
enter.append('path').classed('triangle', true).classed('start-arrow', true).classed('active', (d) => d.active),
|
|
|
|
},
|
|
|
|
(update) => update.classed('active', (d) => d.active),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
this.simulation.nodes(this.graph.nodes);
|
|
|
|
this.simulation.nodes(this.graph.nodes);
|
|
|
|
this.simulation.alpha(0.5).restart();
|
|
|
|
this.simulation.alpha(0.5).restart();
|
|
|
@ -343,6 +355,7 @@ export class GraphEditor extends HTMLElement {
|
|
|
|
return `translate(${x},${y})`;
|
|
|
|
return `translate(${x},${y})`;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
this.ids.attr('transform', (d) => `translate(${d.x},${d.y})`);
|
|
|
|
this.triangles.attr(
|
|
|
|
this.triangles.attr(
|
|
|
|
'd',
|
|
|
|
'd',
|
|
|
|
(d: Node) => {
|
|
|
|
(d: Node) => {
|
|
|
@ -463,6 +476,10 @@ function createNode(canvas: Canvas): NodeSelection {
|
|
|
|
return canvas.append('g').classed('nodes', true).selectAll('circle');
|
|
|
|
return canvas.append('g').classed('nodes', true).selectAll('circle');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function createIds(canvas: Canvas): NodeSelection {
|
|
|
|
|
|
|
|
return canvas.append('g').classed('ids', true).selectAll('text');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
type Drag = d3.DragBehavior<SVGGElement, Node, Node>;
|
|
|
|
type Drag = d3.DragBehavior<SVGGElement, Node, Node>;
|
|
|
|
|
|
|
|
|
|
|
|
function createDrag(simulation: Simulation): Drag {
|
|
|
|
function createDrag(simulation: Simulation): Drag {
|
|
|
|