From 7ec58239e4035847e21091c177bf5e75863a8407 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Wed, 14 Sep 2022 11:36:28 +0200
Subject: [PATCH] Refactored settings handling
---
src/editor/components/settings.tsx | 29 +++++++++++------------
src/editor/components/sidepanel.tsx | 23 ++++++------------
src/editor/editor.tsx | 36 ++++++++++++++---------------
3 files changed, 38 insertions(+), 50 deletions(-)
diff --git a/src/editor/components/settings.tsx b/src/editor/components/settings.tsx
index d423e37..c57a8f0 100644
--- a/src/editor/components/settings.tsx
+++ b/src/editor/components/settings.tsx
@@ -1,28 +1,24 @@
import React from "react";
+import { EditorSettings } from "../editor";
interface SettingsProps {
- labelVisibility: boolean; // TODO: Refactor to one settings object
- onLabelVisibilityChange: (state: boolean) => void;
-
- connectOnDrag: boolean;
- onConnectOnDragChange: (state: boolean) => void;
+ settings: EditorSettings;
+ onSettingsChange: (settings: EditorSettings) => void;
}
-function Settings({
- labelVisibility,
- onLabelVisibilityChange,
- connectOnDrag,
- onConnectOnDragChange,
-}: SettingsProps) {
+function Settings({ settings, onSettingsChange }: SettingsProps) {
return (
<div className={"SettingsMenu"}>
<h3>Settings</h3>
<input
id="node-label-visibility"
type={"checkbox"}
- checked={labelVisibility}
+ checked={settings.visibleLabels}
onChange={(event) => {
- onLabelVisibilityChange(event.target.checked);
+ onSettingsChange({
+ ...settings,
+ visibleLabels: event.target.checked,
+ });
}}
/>
<label htmlFor="node-label-visibility">Node labels</label>
@@ -30,9 +26,12 @@ function Settings({
<input
id="connect-on-drag"
type={"checkbox"}
- checked={connectOnDrag}
+ checked={settings.connectOnDrag}
onChange={(event) => {
- onConnectOnDragChange(event.target.checked);
+ onSettingsChange({
+ ...settings,
+ connectOnDrag: event.target.checked,
+ });
}}
/>
<label htmlFor="connect-on-drag">Connect nodes when dragged</label>
diff --git a/src/editor/components/sidepanel.tsx b/src/editor/components/sidepanel.tsx
index 23ca313..072735a 100644
--- a/src/editor/components/sidepanel.tsx
+++ b/src/editor/components/sidepanel.tsx
@@ -11,30 +11,26 @@ import { Checkpoint } from "../../common/history";
import { Node } from "../../common/graph/node";
import { NodeType } from "../../common/graph/nodetype";
import { SimGraphData } from "../../common/graph/graph";
-import { NodeDataChangeRequest } from "../editor";
+import { EditorSettings, NodeDataChangeRequest } from "../editor";
interface SidepanelProps {
graph: DynamicGraph;
onCheckpointLoad: { (checkpoint: Checkpoint<SimGraphData>): void };
onNodeTypeSelect: (type: NodeType) => void;
- onConnectOnDragChange: (connectOnDrag: boolean) => void;
- onLabelVisibilityChange: (state: boolean) => void;
+ onSettingsChange: (settings: EditorSettings) => void;
onNodeDataChange: { (requests: NodeDataChangeRequest[]): void };
selectedNodes: Node[];
- visibleLabels: boolean;
- connectOnDrag: boolean;
+ settings: EditorSettings;
}
function Sidepanel({
graph,
onCheckpointLoad,
onNodeTypeSelect,
- onConnectOnDragChange,
- onLabelVisibilityChange,
+ onSettingsChange,
onNodeDataChange,
selectedNodes,
- visibleLabels,
- connectOnDrag,
+ settings,
}: SidepanelProps) {
return (
<div className={"editor-sidepanel"}>
@@ -57,15 +53,10 @@ function Sidepanel({
onSelectAll={onNodeTypeSelect}
/>
<hr />
- <Settings
- labelVisibility={visibleLabels}
- onLabelVisibilityChange={onLabelVisibilityChange}
- connectOnDrag={connectOnDrag}
- onConnectOnDragChange={onConnectOnDragChange}
- />
+ <Settings settings={settings} onSettingsChange={onSettingsChange} />
<hr />
- <Instructions connectOnDragEnabled={connectOnDrag} />
+ <Instructions connectOnDragEnabled={settings.connectOnDrag} />
</div>
);
}
diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx
index d832439..5b65cd2 100644
--- a/src/editor/editor.tsx
+++ b/src/editor/editor.tsx
@@ -19,12 +19,7 @@ export interface NodeDataChangeRequest extends NodeProperties {
type: NodeType;
}
-type stateTypes = {
- /**
- * Graph structure holding the basic information.
- */
- graph: DynamicGraph;
-
+export interface EditorSettings {
/**
* Should labels on nodes be rendered, or none at all.
*/
@@ -34,6 +29,15 @@ type stateTypes = {
* Should feature be enabled, that nodes get connected with a link of dragged close enough to each other?
*/
connectOnDrag: boolean;
+}
+
+type stateTypes = {
+ /**
+ * Graph structure holding the basic information.
+ */
+ graph: DynamicGraph;
+
+ settings: EditorSettings;
/**
* Current width of graph object. Used to specifically adjust and correct the graph size.
@@ -88,8 +92,10 @@ export class Editor extends React.PureComponent<any, stateTypes> {
// Set as new state
this.state = {
graph: undefined,
- visibleLabels: true,
- connectOnDrag: false,
+ settings: {
+ visibleLabels: true,
+ connectOnDrag: false,
+ },
graphWidth: 1000,
selectedNodes: [],
keys: {},
@@ -280,19 +286,11 @@ export class Editor extends React.PureComponent<any, stateTypes> {
});
}}
onNodeTypeSelect={this.handleNodeTypeSelect}
- onConnectOnDragChange={(connectOnDrag) =>
- this.setState({
- connectOnDrag: connectOnDrag,
- })
- }
- onLabelVisibilityChange={(visible) =>
- this.setState({
- visibleLabels: visible,
- })
+ onSettingsChange={(settings) =>
+ this.setState({ settings: settings })
}
selectedNodes={this.state.selectedNodes}
- visibleLabels={this.state.visibleLabels}
- connectOnDrag={this.state.connectOnDrag}
+ settings={this.state.settings}
onNodeDataChange={this.handleNodeDataChange}
/>
</div>
--
GitLab