Revize d01645a2

#3, #10: update frontend to display Graph loaded from JSON file correctly and to display its filename

sources/src/main/webapp/js/components/navbar.js

@@ -344 +344 @@
 				class: 'btn save-diagram',
 				title: 'Save diagram as PNG',
 				onClick: () => {
-					let fileName = `imiger-${app.diagram === null ? 'diagram' : app.diagram.name}.png`;
+					let fileName = `imiger-${app.diagram.name !== null ? app.diagram.name : 'diagram'}.png`;
 
 					saveSvgAsPng(document.getElementById('svg1'), fileName, {
 						backgroundColor: '#fff',
@@ -387 +387 @@
 		});
 
 		document.addEventListener(DiagramUpdatedEvent.name, e => {
-			refreshDiagramLink.setAttribute('href', app.homeUrl + 'graph?diagramId=' + e.detail.id);
+			if (Utils.isDefined(e.detail.id)) {
+				refreshDiagramLink.setAttribute('href', app.homeUrl + 'graph?diagramId=' + e.detail.id);
+			}
 		});
 
 		return DOM.h('li', {}, [

sources/src/main/webapp/js/components/saveDiagramModalWindow.js

@@ -70 +70 @@
 	open() {
 		super.open();
 
-		if (app.diagram !== null) {
-			this._form.diagramName.value = app.diagram.name;
-			this._form.diagramPublic.checked = app.diagram.public;
-		}
+		this._form.diagramName.value = app.diagram.name !== null ? app.diagram.name : '';
+		this._form.diagramPublic.checked = app.diagram.public !== null ? app.diagram.public : false;
 
 		this._form.diagramName.focus();
 	}
@@ -95 +93 @@
 		e.preventDefault();
 
 		const body = new URLSearchParams;
-		body.set('id', app.diagram === null ? '' : app.diagram.id);
+		body.set('id', app.diagram.id !== null ? app.diagram.id : '');
 		body.set('name', e.target.diagramName.value);
 		body.set('graphJson', JSON.stringify(app.graphExporter.run()));
 		body.set('public', (e.target.diagramPublic.checked | 0).toString());

sources/src/main/webapp/js/showGraphApp.js

@@ -118 +118 @@
 		document.addEventListener(DiagramUpdatedEvent.name, e => {
 			this.diagram = new Diagram(e.detail);
 
-			document.title = this.name + ' - ' + this.diagram.name;
-			history.replaceState({} , document.title, this.homeUrl + 'graph?diagramId=' + this.diagram.id);
+			if (this.diagram.name !== null) {
+				document.title = this.name + ' - ' + this.diagram.name;
+			}
+
+			if (this.diagram.id !== null) {
+				history.replaceState({} , document.title, this.homeUrl + 'graph?diagramId=' + this.diagram.id);
+			}
 		});
 
 		// context menu
@@ -146 +151 @@
 		this.spinLoaderComponent.enable();
 
 		let loadGraphDataPromise;
-
 		if (diagramId === '') {
 			loadGraphDataPromise = AJAX.getJSON(Constants.API.loadGraphData);
-
 		} else {
-			const diagramData = await AJAX.getJSON(Constants.API.getDiagram + '?id=' + diagramId);
-
-			document.dispatchEvent(new DiagramUpdatedEvent(diagramData));
-
-			loadGraphDataPromise = Promise.resolve(JSON.parse(diagramData.graph_json));
+			loadGraphDataPromise = AJAX.getJSON(Constants.API.getDiagram + '?id=' + diagramId);
 		}
 
 		try {
-			// get vertex position data
+			// get graph data
 			const graphData = await loadGraphDataPromise;
 
+			// update diagram information in the app
+			document.dispatchEvent(new DiagramUpdatedEvent(graphData));
+
 			// construct graph
-			this.graphLoader.run(graphData);
+			this.graphLoader.run(JSON.parse(graphData.graph_json));
 
 			this.spinLoaderComponent.disable();
 

sources/src/main/webapp/js/valueObjects/diagram.js

@@ -7 +7 @@
 	 * @param {object} props Object loaded from database holding properties of the diagram.
 	 */
 	constructor(props) {
-		this.id = parseInt(props.id);
-		this.name = props.name;
-		this.public = props.public === '1';
+		this.id = Utils.isDefined(props.id) ? parseInt(props.id) : null;
+		this.name = Utils.isDefined(props.name) ? props.name : null;
+		this.public = Utils.isDefined(props.public) ? (props.public === '1') : null;
 	}
 }