Skip to content
Snippets Groups Projects
Commit b8a6f60a authored by Matthias Konitzny's avatar Matthias Konitzny :fire:
Browse files

Fixed editor graph loading.

parent c9f3cee1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/editor/editor.tsx
+ 88
− 83
View file @ b8a6f60a
...@@ -657,94 +657,99 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> { ...@@ -657,94 +657,99 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
) : undefined} ) : undefined}
</SelectLayer> </SelectLayer>
</div> </div>
<div id="sidepanel"> {this.state.graph && (
<HistoryNavigator <div id="sidepanel">
spaceId="space" <HistoryNavigator
history={this.state.graph.history} spaceId="space"
onChange={this.onGraphDataChange} history={this.state.graph.history}
/> onChange={this.onGraphDataChange}
<hr /> />
<NodeDetails <hr />
selectedNodes={this.state.selectedNodes} <NodeDetails
allTypes={ selectedNodes={this.state.selectedNodes}
this.state.graph allTypes={
? this.state.graph.objectGroups 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;
} }
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({ this.setState({
visibleLabels: newValue, visibleLabels: newValue,
}); });
}} }}
/> />
<label htmlFor="node-labe-visibility"> <label htmlFor="node-labe-visibility">
Node labels Node labels
</label> </label>
<br /> <br />
<input <input
id="connect-on-drag" id="connect-on-drag"
type={"checkbox"} type={"checkbox"}
checked={this.state.connectOnDrag} checked={this.state.connectOnDrag}
onChange={(event) => { onChange={(event) => {
const newValue = event.target.checked; const newValue = event.target.checked;
if (newValue == this.state.connectOnDrag) { if (newValue == this.state.connectOnDrag) {
return; return;
} }
this.setState({ this.setState({
connectOnDrag: newValue, connectOnDrag: newValue,
}); });
}} }}
/> />
<label htmlFor="connect-on-drag"> <label htmlFor="connect-on-drag">
Connect nodes when dragged Connect nodes when dragged
</label> </label>
<hr /> <hr />
<ul className="instructions"> <ul className="instructions">
<li>Click background to create node</li> <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 ? (
<li> <li>
Drag node close to other node to connect SHIFT+Click and drag on background to add
nodes to selection
</li> </li>
) : ( <li>
"" CTRL+Click background to clear selection
)} </li>
<li>DELETE to delete selected nodes</li> <li>Click node to select and edit</li>
<li>ESCAPE to clear selection</li> <li>
</ul> SHIFT+Click node to add or remove from
</div> 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>
</div> </div>
); );
......
src/editor/graph.ts
+ 15
− 1
View file @ b8a6f60a
...@@ -3,7 +3,7 @@ import { NodeType } from "../common/graph/nodetype"; ...@@ -3,7 +3,7 @@ import { NodeType } from "../common/graph/nodetype";
import { Node, NodeData, SimNodeData } from "../common/graph/node"; import { Node, NodeData, SimNodeData } from "../common/graph/node";
import * as Common from "../common/graph/graph"; import * as Common from "../common/graph/graph";
import { History } from "../common/history"; 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 { export class DynamicGraph extends Common.Graph {
public history: History<SimGraphData>; public history: History<SimGraphData>;
...@@ -14,11 +14,25 @@ export class DynamicGraph extends Common.Graph { ...@@ -14,11 +14,25 @@ export class DynamicGraph extends Common.Graph {
constructor(data?: GraphContent) { constructor(data?: GraphContent) {
super(data); super(data);
this.onChangeCallbacks = []; 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.history = new History<SimGraphData>(
this, this,
20, 20,
"Created new graph." "Created new graph."
); );
return this;
} }
/** /**
......
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