Commit ccad5be4 authored by Adrian Wuillemet's avatar Adrian Wuillemet
Browse files

#65 Add in text field and functionality to name a graph

parent 4d61b44a
Pipeline #4322 passed with stage
in 38 seconds
......@@ -59,6 +59,7 @@ TO: str = 'to'
# Templates
CONFIG: str = 'config'
USE_HEADER: str = "useHeader"
GAP: str = 'gap'
INDENT: str = 'indent'
NAME: str = 'name'
......
......@@ -52,25 +52,25 @@ class CodeGenerator:
functions_code = self.write_all_functions(transitions)
logging.debug(f'GENERATOR: Generated transition code:\n{functions_code}')
header: str = ""
footer: str = ""
if self.config["useHeader"]:
header = self.write_header(self.header["content"])
footer = self.write_footer(self.footer["content"])
return self.config[GAP].join([
header,
code_blocks: list = [
states_code,
state_code,
functions_code,
footer
])
functions_code
]
if self.config[USE_HEADER]:
header = self.write_header(self.header[CONTENT], fsm[NAME])
code_blocks.insert(0, header)
footer = self.write_footer(self.footer[CONTENT])
code_blocks.append(footer)
return self.config[GAP].join(code_blocks)
def write_header(self, header_template: Template):
return self.substitute(header_template)
def write_header(self, header_template: Template, name: str) -> str:
return self.substitute(header_template, name=name)
def write_footer(self, footer_template: Template):
def write_footer(self, footer_template: Template) -> str:
return self.substitute(footer_template)
def write_all_states(self, nodes: list) -> str:
......
......@@ -9,7 +9,7 @@
"useHeader" : true
},
"header": { "content" : "class $states {\npublic:\n" },
"header": { "content" : "class $name {\npublic:\n" },
"footer": { "content" : "};" },
"states": {
......
......@@ -9,7 +9,7 @@
"useHeader" : true
},
"header": { "content" : "public class $states {\n" },
"header": { "content" : "public class $name {\n" },
"footer": { "content" : "}" },
"states": {
......
......@@ -39,6 +39,8 @@
<div id="graph-container"></div>
</div>
<input type="text" id="graph-name-field">
<!-- Container where code is written into if the code preview is toggled -->
<div id="text-area">
<div id="code-container">
......
......@@ -3,6 +3,7 @@
@import "menu";
@import "persistence";
@import "code-controls";
@import "name-field";
//menu
@import "menu/help-item";
......
/*
* Styling of the input field for the graph name
*/
@mixin name-field() {
$distance-right: calc(#{d('fixed-inner')} + 200px);
@include abs($top: d('fixed-inner'), $right: $distance-right);
height: d('default-ui-element');
width: 150px;
padding-right: 10px;
border-right: 2px solid color("gray-light");
background-color: color("white");
color: color("gray-light");
z-index: z("above-all");
font-size: 1.2rem;
text-align: right;
&:hover, &:focus {
background-color: color('background');
color: color('white');
}
}
......@@ -24,6 +24,10 @@ html {
@include graph-container();
}
#graph-name-field {
@include name-field();
}
#text-area {
@include text-area();
}
......
const graph : Schema = {
name : "StateMachine",
name : "unnamed_graph",
nodes : [],
transitions: []
}
......@@ -40,20 +40,22 @@ let arrow = svg.append('path')
.style("display", "none");
svg.on("mousemove", function() {
if(mousedownNode != null){
if(mousedownNode != null) {
const [x, y] = d3.mouse(this);
arrow
.attr('d', `M ${mousedownNode.x},${mousedownNode.y} L ${x},${y}`)
.style("display", "block");
render();
}
if(mousedownTransition != null){
if(mousedownTransition != null) {
const [x, y] = d3.mouse(this);
mousedownTransition.offset = {x: x, y: y};
render();
}
console.log(mousedownTransition.offset);
}
if(mousedownTransition || mousedownNode) {
render();
}
});
svg.on('mouseup', function() {
......@@ -282,28 +284,34 @@ function make_editable(selection, field) {
input.on("keypress", function () {
let e = d3.event;
if (e.keyCode == 13) {
input.on("blur", null);
// IE
if (typeof (e.cancelBubble) !== 'undefined') {
e.cancelBubble = true;
}
if (e.stopPropagation) {
e.stopPropagation();
}
e.preventDefault();
let new_text = clearText(input.property("value"));
let new_text = changedLabel(input, e);
graph.transitions.forEach((transition) => {
if(transition.from == d[field]) transition.from = new_text;
if(transition.to == d[field]) transition.to = new_text;
});
d[field] = new_text;
text.text(function (d) { return d[field]; });
d[field] = new_text;
text.text(function (d) { return d[field]; });
fo.remove();
}
});
});
}
function changedLabel(input, event): string {
input.on("blur", null);
if (typeof (event.cancelBubble) !== 'undefined') {
event.cancelBubble = true;
}
if (event.stopPropagation) {
event.stopPropagation();
}
event.preventDefault();
return clearText(input.property("value"));
}
// node dragging
d3.select(window)
.on("keydown", () => {
......@@ -371,7 +379,7 @@ function clearText(text: string): string {
* Create a default name for new states.
*/
function defaultStateName(): string {
let name = `state${i}`;
let name = `state_${i}`;
i++;
return name;
}
......@@ -380,7 +388,7 @@ function defaultStateName(): string {
* Create a default name for new transitions.
*/
function defaultTransitionName(): string {
let name = `transition${j}`;
let name = `transition_${j}`;
j++;
return name;
}
......@@ -391,13 +399,14 @@ function defaultTransitionName(): string {
*
* @param {Schema} graph The graph to draw
*/
function load_graph(graph: Schema): void {
if(graph) {
graph.name = graph['name'];
graph.nodes = graph['nodes'];
graph.transitions = graph['transitions'];
function load_graph(loadedGraph: Schema): void {
if(loadedGraph) {
graph.name = loadedGraph['name'];
graph.nodes = loadedGraph['nodes'];
graph.transitions = loadedGraph['transitions'];
render();
}
d3.select('#graph-name-field').attr('value', graph.name);
}
EEL.loadFile(load_graph);
/// <reference path="options.ts" />
/// <reference path="eel.ts" />
/// <reference path="prism.d.ts" />
d3.select("#code-gen-button").on("click", () => {
let fsm = {
......@@ -27,6 +29,8 @@ d3.select("#delete-btn").on("click", () => {
d3.select("#toggle-code-button").classed("error", false);
graph.transitions = [];
graph.nodes = [];
i = 0;
j = 0;
render()
});
......@@ -40,6 +44,26 @@ d3.select('#save-as-png-btn').on('click', () => savePNG());
d3.select('#save-as-json-btn').on('click', () => saveJson());
let nameField = d3.select('#graph-name-field')
.on('focusout', () => changedGraphName())
.on("keypress", () => {
if(d3.event.keyCode == 13) {
changedGraphName();
let input = nameField.node() as HTMLInputElement;
input.blur();
}
})
.on("focus", () => {
let input = nameField.node() as HTMLInputElement;
input.select()
});
function changedGraphName(): void {
let newName = changedLabel(nameField, d3.event);
nameField.property("value", newName);
graph.name = newName;
}
function displayCode(code: string, error: string, language: string): void {
if(error) {
d3.select("#code-container")
......@@ -55,7 +79,6 @@ function displayCode(code: string, error: string, language: string): void {
.classed("error", false);
d3.select("#toggle-code-button")
.classed("error", false);
// @ts-ignore
Prism.highlightAllUnder(document.getElementById("code-container"));
} else {
saveCode();
......
/// <reference path="util.ts"/>
/// <reference path="prism.d.ts" />
const previewGraph: Schema = {
'name': 'PreviewGraph',
......@@ -38,7 +39,6 @@ class LanguagePreview extends ElementWrapper {
pre.innerHTML = "No code preview available!"
} else {
pre.appendChild(this.create('code', {'content': code}));
// @ts-ignore
Prism.highlightAllUnder(pre);
}
});
......
......@@ -92,7 +92,7 @@ class NumberOption extends OPT<number> {
}
private correctInput(): void {
this.content['value'] = this.content['value'].replace( /^[0-9]*/, '');
this.content['value'] = this.content['value'].replace(/[^0-9]/g, '');
}
}
......@@ -112,7 +112,8 @@ class BackendOptions extends ElementWrapper {
if (type === 'boolean') {
value = value || false;
option = new ToggleOption(title, value, description);
option = new ToggleOption(title, value, description);
} else if (type === 'string') {
value = value || '';
option = new StringOption(title, value, description);
......
declare const Prism: PRISM;
declare interface PRISM {
highlightAllUnder(element: HTMLElement): void;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment