From b8a6f60a677cd44a1f99e2cc37c8a4d2f7c79236 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Fri, 9 Sep 2022 18:23:57 +0200
Subject: [PATCH] Fixed editor graph loading.
---
src/editor/editor.tsx | 171 ++++++++++++++++++++++--------------------
src/editor/graph.ts | 16 +++-
2 files changed, 103 insertions(+), 84 deletions(-)
diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx
index 557bdf8..b50a9f5 100644
--- a/src/editor/editor.tsx
+++ b/src/editor/editor.tsx
@@ -657,94 +657,99 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
) : undefined}
</SelectLayer>
</div>
- <div id="sidepanel">
- <HistoryNavigator
- spaceId="space"
- history={this.state.graph.history}
- onChange={this.onGraphDataChange}
- />
- <hr />
- <NodeDetails
- selectedNodes={this.state.selectedNodes}
- allTypes={
- this.state.graph
- ? this.state.graph.objectGroups
- : []
- }
- onChange={this.forceUpdate}
- />
- <hr />
- <h3>Node types</h3>
- <NodeTypesEditor
- onChange={this.forceUpdate}
- graph={this.state.graph}
- onSelectAll={this.handleNodeTypeSelect}
- />
- <hr />
- <h3>Settings</h3>
- <input
- id="node-labe-visibility"
- type={"checkbox"}
- checked={this.state.visibleLabels}
- onChange={(event) => {
- const newValue = event.target.checked;
- if (newValue == this.state.visibleLabels) {
- return;
+ {this.state.graph && (
+ <div id="sidepanel">
+ <HistoryNavigator
+ spaceId="space"
+ history={this.state.graph.history}
+ onChange={this.onGraphDataChange}
+ />
+ <hr />
+ <NodeDetails
+ selectedNodes={this.state.selectedNodes}
+ allTypes={
+ this.state.graph
+ ? this.state.graph.objectGroups
+ : []
}
+ onChange={this.forceUpdate}
+ />
+ <hr />
+ <h3>Node types</h3>
+ <NodeTypesEditor
+ onChange={this.forceUpdate}
+ graph={this.state.graph}
+ onSelectAll={this.handleNodeTypeSelect}
+ />
+ <hr />
+ <h3>Settings</h3>
+ <input
+ id="node-labe-visibility"
+ type={"checkbox"}
+ checked={this.state.visibleLabels}
+ onChange={(event) => {
+ const newValue = event.target.checked;
+ if (newValue == this.state.visibleLabels) {
+ return;
+ }
- this.setState({
- visibleLabels: newValue,
- });
- }}
- />
- <label htmlFor="node-labe-visibility">
- Node labels
- </label>
- <br />
- <input
- id="connect-on-drag"
- type={"checkbox"}
- checked={this.state.connectOnDrag}
- onChange={(event) => {
- const newValue = event.target.checked;
- if (newValue == this.state.connectOnDrag) {
- return;
- }
+ this.setState({
+ visibleLabels: newValue,
+ });
+ }}
+ />
+ <label htmlFor="node-labe-visibility">
+ Node labels
+ </label>
+ <br />
+ <input
+ id="connect-on-drag"
+ type={"checkbox"}
+ checked={this.state.connectOnDrag}
+ onChange={(event) => {
+ const newValue = event.target.checked;
+ if (newValue == this.state.connectOnDrag) {
+ return;
+ }
- this.setState({
- connectOnDrag: newValue,
- });
- }}
- />
- <label htmlFor="connect-on-drag">
- Connect nodes when dragged
- </label>
- <hr />
- <ul className="instructions">
- <li>Click background to create node</li>
- <li>
- SHIFT+Click and drag on background to add nodes
- to selection
- </li>
- <li>CTRL+Click background to clear selection</li>
- <li>Click node to select and edit</li>
- <li>
- SHIFT+Click node to add or remove from selection
- </li>
- <li>CTRL+Click another node to connect</li>
- <li>Right-Click node to delete</li>
- <li>Right-Click link to delete</li>
- {this.state.connectOnDrag ? (
+ this.setState({
+ connectOnDrag: newValue,
+ });
+ }}
+ />
+ <label htmlFor="connect-on-drag">
+ Connect nodes when dragged
+ </label>
+ <hr />
+ <ul className="instructions">
+ <li>Click background to create node</li>
<li>
- Drag node close to other node to connect
+ SHIFT+Click and drag on background to add
+ nodes to selection
</li>
- ) : (
- ""
- )}
- <li>DELETE to delete selected nodes</li>
- <li>ESCAPE to clear selection</li>
- </ul>
- </div>
+ <li>
+ CTRL+Click background to clear selection
+ </li>
+ <li>Click node to select and edit</li>
+ <li>
+ SHIFT+Click node to add or remove from
+ selection
+ </li>
+ <li>CTRL+Click another node to connect</li>
+ <li>Right-Click node to delete</li>
+ <li>Right-Click link to delete</li>
+ {this.state.connectOnDrag ? (
+ <li>
+ Drag node close to other node to connect
+ </li>
+ ) : (
+ ""
+ )}
+ <li>DELETE to delete selected nodes</li>
+ <li>ESCAPE to clear selection</li>
+ </ul>
+ </div>
+ )}
</div>
</div>
);
diff --git a/src/editor/graph.ts b/src/editor/graph.ts
index fe823c6..9ea0fd5 100644
--- a/src/editor/graph.ts
+++ b/src/editor/graph.ts
@@ -3,7 +3,7 @@ import { NodeType } from "../common/graph/nodetype";
import { Node, NodeData, SimNodeData } from "../common/graph/node";
import * as Common from "../common/graph/graph";
import { History } from "../common/history";
-import { GraphContent, SimGraphData } from "../common/graph/graph";
+import { GraphContent, GraphData, SimGraphData } from "../common/graph/graph";
export class DynamicGraph extends Common.Graph {
public history: History<SimGraphData>;
@@ -14,11 +14,25 @@ export class DynamicGraph extends Common.Graph {
constructor(data?: GraphContent) {
super(data);
this.onChangeCallbacks = [];
+
+ if (data != undefined) {
+ this.history = new History<SimGraphData>(
+ this,
+ 20,
+ "Created new graph."
+ );
+ }
+ }
+
+ public fromSerializedObject(data: GraphData | SimGraphData): DynamicGraph {
+ super.fromSerializedObject(data);
this.history = new History<SimGraphData>(
this,
20,
"Created new graph."
);
+
+ return this;
}
/**
--
GitLab