| undefined
): void {
super.requestUpdate(name, oldValue, options);
this.toolMenu?.requestUpdate();
this.simulatorMenu?.requestUpdate();
this.infoMenu?.requestUpdate();
this.topMenu?.requestUpdate();
}
/**
* Renders the component and returns a TemplateResult.
* @returns {TemplateResult} The rendered TemplateResult.
*/
public render(): TemplateResult {
return html`
${this.renderEditor()}
${this.isContentEditable
? guard([this.settings], () => this.renderSettings())
: ""}
`;
}
private renderEditor(): TemplateResult {
return html`
${this._helpOverlay ? this.renderHelpOverlay() : ""}
${this._graph?.contextMenu.render()} ${this.renderModeSwitch()}
${this._graph?.renderErrorDisplay()}
${guard(
[this.permissions, this.automaton],
() => this.automaton.extension
)}
${msg("Mode Switch")}
${this._topMenuCollapsed ? html`
${msg("Menu")}
` : html`
${msg("Fullscreen")}
${msg("Type")}
${msg("Transformations")}
${msg("Help")}
${msg("Test Cases")}
${msg("Definition")}
`}
${msg("Add Node by click")}
${msg("Add Transition by drag and drop")}
${!this._topMenuCollapsed ? html`
${msg("Move the elements by drag and drop")}
${msg("To edit a node right click the node")}
${msg(
"To edit a transition right click the transition"
)}
` : ""}
${msg("Input word")}
${msg("Simulation Controls")}
`;
}
/**
* Renders the mode switch component.
* @returns {TemplateResult} The rendered mode switch component.
*/
private renderModeSwitch(): TemplateResult {
return html`
{
this.mode = (e.target as SlSelect).value as
| "edit"
| "simulate";
}}
name="mode"
>
${this.mode === "edit" ? biPencil : biBoxes}
${biPencil} ${msg("Edit")}
${biBoxes} ${msg("Simulate")}
0
? "display: block"
: "display: none"}
>
${biExclamationTriangle}
`;
}
/**
* Toggles the mode between 'edit' and 'simulate'.
*/
private toggleMode() {
this.mode = this.mode === "edit" ? "simulate" : "edit";
}
/**
* Sets up the listeners for the automaton.
* @param a The automaton object.
*/
private setUpListeners(a: Automaton) {
/**
* Updates the attributes of the graph by filtering and mapping the nodes and transitions
* based on certain conditions.
*/
const updateAttributes = () => {
this.nodes = this.automaton.nodes
.get()
.filter((n) => n.id !== Graph.initialGhostNode.id)
.map(stripNode);
this.nodes = [...this.nodes];
this.transitions = this.automaton.transitions
.get()
.filter((t) => t.from !== Graph.initialGhostNode.id)
.map(stripTransition);
this.transitions = [...this.transitions];
};
a.nodes.on("*", debounce(updateAttributes, 200));
a.transitions.on("*", debounce(updateAttributes, 200));
}
}