124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
export class Edge {
|
|
constructor(graph, type, from, to, weight, data, options = {}) {
|
|
this.graph = graph;
|
|
this.from = from;
|
|
this.to = to;
|
|
this.type = type;
|
|
this.weight = weight;
|
|
this.data = data;
|
|
this.options = options;
|
|
this.installedClickCallback = false;
|
|
}
|
|
|
|
reset() {
|
|
this.installedClickCallback = false;
|
|
}
|
|
|
|
static getKey({
|
|
from, to, type,
|
|
}) {
|
|
return ['edge', from.id, to.id, type].join(':');
|
|
}
|
|
|
|
static getCombinedKey({ from, to }) {
|
|
return ['edge', from.id, to.id].join(':');
|
|
}
|
|
|
|
getComorphicEdges() {
|
|
return this.graph.getEdges(null, this.from, this.to);
|
|
}
|
|
|
|
getHtml() {
|
|
let html = '<table>';
|
|
for (const { type, weight } of this.getComorphicEdges()) {
|
|
html += `<tr><td>${type}</td><td>${weight}</td></tr>`;
|
|
}
|
|
html += '</table>';
|
|
return html;
|
|
}
|
|
|
|
getFlowchartNode() {
|
|
return `${Edge.getCombinedKey(this)}(${this.getHtml()})`;
|
|
}
|
|
|
|
displayEdgeNode() {
|
|
if (this.options.hide) {
|
|
return;
|
|
}
|
|
this.graph.flowchart?.log(this.getFlowchartNode());
|
|
}
|
|
|
|
displayEdge() {
|
|
if (this.options.hide) {
|
|
return;
|
|
}
|
|
this.graph.flowchart?.log(`${this.from.id} --- ${this.getFlowchartNode()} --> ${this.to.id}`);
|
|
this.graph.flowchart?.log(`class ${Edge.getCombinedKey(this)} edge`);
|
|
if (this.graph.editable && !this.installedClickCallback) {
|
|
this.graph.flowchart?.log(`click ${Edge.getCombinedKey(this)} WDGHandler${this.graph.index} "Edit Edge"`);
|
|
this.installedClickCallback = true;
|
|
}
|
|
}
|
|
|
|
static prepareEditorDocument(graph, doc, from, to) {
|
|
doc.clear();
|
|
const form = doc.form({ name: 'editorForm' }).lastElement;
|
|
doc.remark('<h3>Edit Edge</h3>', { parentEl: form.el });
|
|
form
|
|
.textField({
|
|
id: 'from', name: 'from', defaultValue: from, disabled: true,
|
|
})
|
|
.textField({
|
|
id: 'to', name: 'to', defaultValue: to, disabled: true,
|
|
});
|
|
|
|
const subFormArray = form.subFormArray({ id: 'edges', name: 'edges' }).lastItem;
|
|
const addEdgeForm = (edge) => {
|
|
const { subForm } = form.subForm({ name: 'subform', subFormArray }).lastItem;
|
|
doc.remark('<br/>', { parentEl: subForm.el });
|
|
subForm.textField({ id: 'type', name: 'type', defaultValue: edge.type });
|
|
subForm.textField({ id: 'weight', name: 'weight', defaultValue: edge.weight });
|
|
subForm.button({
|
|
id: 'remove',
|
|
name: 'Remove Edge Type',
|
|
cb: (_, { initializing }) => {
|
|
if (initializing) return;
|
|
subFormArray.remove(subForm);
|
|
},
|
|
});
|
|
};
|
|
|
|
for (const edge of graph.getEdges(null, from, to)) {
|
|
addEdgeForm(edge);
|
|
}
|
|
|
|
form.button({
|
|
id: 'add',
|
|
name: 'Add Edge Type',
|
|
cb: (_, { initializing }) => {
|
|
if (initializing) return;
|
|
addEdgeForm(new Edge(graph, null, graph.getVertex(from), graph.getVertex(to)));
|
|
},
|
|
});
|
|
|
|
form.button({
|
|
id: 'save',
|
|
name: 'Save',
|
|
cb: ({ form: { value } }, { initializing }) => {
|
|
if (initializing) return;
|
|
// Handle additions and updates
|
|
for (const { type, weight } of value.edges) {
|
|
graph.setEdgeWeight(type, from, to, weight);
|
|
}
|
|
// Handle removals
|
|
for (const edge of graph.getEdges(null, from, to)) {
|
|
if (!value.edges.find(({ type }) => type === edge.type)) {
|
|
graph.deleteEdge(edge.type, from, to);
|
|
}
|
|
}
|
|
graph.redraw();
|
|
},
|
|
});
|
|
}
|
|
}
|