Added window management to WozGraph

wwlib · Jun 29, 2018 · 2c4ba5c · 2c4ba5c
1 parent 38f0914
commit 2c4ba5c
Show file tree

Hide file tree

Showing 13 changed files with 441 additions and 66 deletions.
diff --git a/css/graph-editor.css b/css/graph-editor.css
@@ -47,10 +47,12 @@ body {
 
 #ttsPanel {
     top: 150px;
+    width: 490px;
 }
 
 #scriptPanel {
     top: 150px;
+    width: 490px;
 }
 
 .item {
@@ -74,9 +76,9 @@ body {
     left: 10px;
 }
 
-#stateDataEditorPanel {
-    top: 300px;
-    width: 420px;
+#stateDataPanel {
+    top: 150px;
+    width: 490px;
     left: 10px;
 }
 

diff --git a/src/renderer/components/AppInfoForm.tsx b/src/renderer/components/AppInfoForm.tsx
@@ -146,7 +146,7 @@ export default class AppInfoForm extends React.Component<AppInfoFormProps, AppIn
                         handleMaximize={this.handleMaximize.bind(this)}
                         handleFullScreen={this.handleFullScreen.bind(this)}>
                     </Titlebar>
-                    <h2 className="pull-left handle" style={{marginBottom:20}}>RoboCommander Info</h2>
+                    <h4 className="pull-left handle" style={{marginBottom:20}}>RoboCommander Info</h4>
                     <div className="clearfix"></div>
                     <ReactBootstrap.Table striped bordered condensed hover style = {{width: 900}}>
                         <tbody>

diff --git a/src/renderer/components/Commands.tsx b/src/renderer/components/Commands.tsx
@@ -287,7 +287,7 @@ export default class Commands extends React.Component<CommandsProps, CommandsSta
                         handleMaximize={this.handleMaximize.bind(this)}
                         handleFullScreen={this.handleFullScreen.bind(this)}>
                     </Titlebar>
-                    <h2 className="pull-left handle" style={{marginBottom:20}}>Commands</h2>
+                    <h4 className="pull-left handle" style={{marginBottom:20}}>Commands</h4>
                     <div className="clearfix"></div>
                     <ReactBootstrap.Table striped condensed hover>
                     <tbody>

diff --git a/src/renderer/components/RobotList.tsx b/src/renderer/components/RobotList.tsx
@@ -77,7 +77,7 @@ export default class RobotList extends React.Component<RobotListProps, RobotList
                             handleMaximize={this.handleMaximize.bind(this)}
                             handleFullScreen={this.handleFullScreen.bind(this)}>
                         </Titlebar>
-                        <h2 className="pull-left handle" style={{marginBottom:20}}>Robot List</h2>
+                        <h4 className="pull-left handle" style={{marginBottom:20}}>Robot List</h4>
                         <div className="clearfix"></div>
                         <ReactBootstrap.Table striped condensed hover>
                         <tbody>

diff --git a/src/renderer/components/grapheditor/GraphEditor.tsx b/src/renderer/components/grapheditor/GraphEditor.tsx
@@ -109,6 +109,9 @@ export default class GraphEditor extends React.Component < GraphEditorProps, Gra
       }
 
     componentDidMount() {
+        this.graphModel.addPanelWithId('ttsPanel', 520, 150);
+        this.graphModel.addPanelWithId('scriptPanel', 520, 150);
+        this.graphModel.addPanelWithId('stateDataPanel', 520, 150);
     }
 
     componentWillUnmount() {
@@ -207,11 +210,11 @@ export default class GraphEditor extends React.Component < GraphEditorProps, Gra
 
         // let showTTSPanel: boolean = true;
         // this.startSimulation();
-        this.setState(prevState => ({
+        this.setState({
                 scale: 1.0,
                 showNodePanel: false,
                 showRelationshipPanel: false
-        }));
+        });
     }
 
     onUpdateActiveGraph(): void {
@@ -646,13 +649,16 @@ export default class GraphEditor extends React.Component < GraphEditorProps, Gra
                 this.startSimulation(100);
                 break;
             case 'ttsPanel':
-                this.setState(prevState => ({showTTSPanel: !prevState.showTTSPanel}));
+                this.setState({showTTSPanel: this.graphModel.togglePanelOpenedWithId('ttsPanel')});
+                this.graphModel.bringPanelToFront('ttsPanel');
                 break;
             case 'scriptPanel':
-                this.setState(prevState => ({showScriptPanel: !prevState.showScriptPanel}));
+                this.setState({showScriptPanel: this.graphModel.togglePanelOpenedWithId('scriptPanel')});
+                this.graphModel.bringPanelToFront('scriptPanel');
                 break;
             case 'stateDataPanel':
-                this.setState(prevState => ({showStateDataPanel: !prevState.showStateDataPanel}));
+                this.setState({showStateDataPanel: this.graphModel.togglePanelOpenedWithId('stateDataPanel')});
+                this.graphModel.bringPanelToFront('stateDataPanel');
                 break;
         }
     }
@@ -674,48 +680,47 @@ export default class GraphEditor extends React.Component < GraphEditorProps, Gra
 
     showNodePanel(): void {
         this.setState({
-            showNodePanel: true,
-            showRelationshipPanel: false
-        });
-    }
-
-    hideNodePanel(): void {
-        this.setState({
-            showNodePanel: false
+            showNodePanel: true
         });
+        this.graphModel.openPanelWithId('nodeEditorPanel');
+        this.graphModel.bringPanelToFront('nodeEditorPanel');
     }
 
     showRelationshipPanel(): void {
         this.setState({
-            showNodePanel: false,
             showRelationshipPanel: true
         });
+        this.graphModel.openPanelWithId('relationshipEditorPanel');
+        this.graphModel.bringPanelToFront('relationshipEditorPanel');
     }
 
-    hideRelationshipPanel(): void {
-        this.setState({
-            showRelationshipPanel: false
-        });
-    }
-
-    showStateDataPanel(): void {
-        this.setState({
-            showStateDataPanel: true
-        });
-    }
-
-    hideStateDataPanel(): void {
-        this.setState({
-            showStateDataPanel: false
-        });
+    onClosePanel(id: string): void {
+        this.graphModel.closePanelWithId(id);
+        switch(id) {
+            case 'nodeEditorPanel':
+                this.setState({showNodePanel: false});
+                break;
+            case 'relationshipEditorPanel':
+                this.setState({showRelationshipPanel: false});
+                break;
+            case 'ttsPanel':
+                this.setState({showTTSPanel: false});
+                break;
+            case 'scriptPanel':
+                this.setState({showScriptPanel: false});
+                break;
+            case 'stateDataPanel':
+                this.setState({showStateDataPanel: false});
+                break;
+        }
     }
 
     render() {
-        let nodePanel: JSX.Element | null = this.state.showNodePanel ? <NodePanel graphModel={this.graphModel} hideNodePanelCallback={this.hideNodePanel.bind(this)} /> : null;
-        let relationshipPanel: JSX.Element | null = this.state.showRelationshipPanel ? <RelationshipPanel graphModel={this.graphModel} hideRelationshipPanelCallback={this.hideRelationshipPanel.bind(this)} /> : null;
-        let ttsPanel: JSX.Element | null = this.state.showTTSPanel ? <TTSPanel graphModel={this.graphModel} /> : null;
-        let scriptPanel: JSX.Element | null = this.state.showScriptPanel ? <ScriptPanel graphModel={this.graphModel} /> : null;
-        let stateDataPanel: JSX.Element | null = this.state.showStateDataPanel ? <StateDataPanel graphModel={this.graphModel} hideStateDataPanelCallback={this.hideStateDataPanel.bind(this)} targetedRobots={this.props.commanderModel.targetedRobots} /> : null;
+        let nodePanel: JSX.Element | null = this.state.showNodePanel ? <NodePanel id='nodeEditorPanel' graphModel={this.graphModel} onClosePanel={this.onClosePanel.bind(this)}/> : null;
+        let relationshipPanel: JSX.Element | null = this.state.showRelationshipPanel ? <RelationshipPanel id='relationshipEditorPanel' graphModel={this.graphModel} onClosePanel={this.onClosePanel.bind(this)}/> : null;
+        let ttsPanel: JSX.Element | null = this.state.showTTSPanel ? <TTSPanel id='ttsPanel' graphModel={this.graphModel} onClosePanel={this.onClosePanel.bind(this)}/> : null;
+        let scriptPanel: JSX.Element | null = this.state.showScriptPanel ? <ScriptPanel id='scriptPanel' graphModel={this.graphModel} onClosePanel={this.onClosePanel.bind(this)}/> : null;
+        let stateDataPanel: JSX.Element | null = this.state.showStateDataPanel ? <StateDataPanel id='stateDataPanel' graphModel={this.graphModel} targetedRobots={this.props.commanderModel.targetedRobots} onClosePanel={this.onClosePanel.bind(this)}/> : null;
         // <input id="internalScale" type="range" min="0.1" max="5" value={this.state.scale} step="0.01" onChange={this.changeInternalScale.bind(this)}/>
         // <ReactBootstrap.Button id="forceLayoutButton" bsStyle={'default'} key={"forceLayout"} style = {{width: 80}}
         //     onClick={this.onButtonClicked.bind(this, "forceLayout")}>Force</ReactBootstrap.Button>

diff --git a/src/renderer/components/grapheditor/NodePanel.tsx b/src/renderer/components/grapheditor/NodePanel.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
 import * as ReactBootstrap from "react-bootstrap";
 import Draggable from "react-draggable";
+import Titlebar from '../titlebar/Titlebar';
 
 import GraphModel from './model/GraphModel';
 
-export interface NodePanelProps { graphModel: GraphModel, hideNodePanelCallback: any}
+export interface NodePanelProps { id: string, graphModel: GraphModel, onClosePanel: any}
 export interface NodePanelState { type: string, properties: string, lastUpdateTime: number }
 
 export default class NodePanel extends React.Component<NodePanelProps, NodePanelState> {
@@ -36,7 +37,7 @@ export default class NodePanel extends React.Component<NodePanelProps, NodePanel
     }
 
     componentDidMount() {
-
+        this.props.graphModel.addPanelWithId(this.props.id);
     }
 
     componentWillUnmount() {
@@ -74,16 +75,46 @@ export default class NodePanel extends React.Component<NodePanelProps, NodePanel
             case 'cancel':
                 break;
         }
-        this.props.hideNodePanelCallback();
+        this.props.onClosePanel(this.props.id);
     }
 
     save(): void {
         this.props.graphModel.saveActiveNode(this.state.type, this.state.properties, this._oldLabel);
     }
 
+    handleClick(e: any): void {
+        // console.log(`onPanelClick:`);
+        this.props.graphModel.bringPanelToFront(this.props.id);
+    }
+
+    handleClose(e: any) {
+        this.props.onClosePanel(this.props.id);
+    }
+
+    handleMinimize(e: any) {
+        console.log('minimize');
+    }
+
+    handleMaximize(e: any) {
+        console.log('maximize');
+    }
+
+    handleFullScreen(e: any) {
+        console.log('fullscreen');
+    }
+
     render() {
         let nodeId: string = this.props.graphModel.activeNode ? this.props.graphModel.activeNode.id : ""
-        return  <Draggable handle=".handle"><div className="editor-panel well" id="nodeEditorPanel">
+        return  <Draggable handle=".handle">
+                    <div className="editor-panel well" id="nodeEditorPanel">
+                    <Titlebar
+                        draggable={true}
+                        handleClick={this.handleClick.bind(this)}
+                        handleClose={this.handleClose.bind(this)}
+                        handleMinimize={this.handleMinimize.bind(this)}
+                        handleMaximize={this.handleMaximize.bind(this)}
+                        handleFullScreen={this.handleFullScreen.bind(this)}>
+                    </Titlebar>
                     <h4 className="pull-left handle" style={{marginBottom:20}}>Node [{nodeId}]</h4>
                     <div className="clearfix"></div>
                     <ReactBootstrap.Table striped bordered condensed hover style = {{width: 400}}>

diff --git a/src/renderer/components/grapheditor/RelationshipPanel.tsx b/src/renderer/components/grapheditor/RelationshipPanel.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
 import * as ReactBootstrap from "react-bootstrap";
 import Draggable from "react-draggable";
+import Titlebar from '../titlebar/Titlebar';
 
 import GraphModel from './model/GraphModel';
 
-export interface RelationshipPanelProps { graphModel: GraphModel, hideRelationshipPanelCallback: any}
+export interface RelationshipPanelProps { id: string, graphModel: GraphModel, onClosePanel: any}
 export interface RelationshipPanelState { type: string, properties: string }
 
 export default class RelationshipPanel extends React.Component<RelationshipPanelProps, RelationshipPanelState> {
@@ -24,14 +25,15 @@ export default class RelationshipPanel extends React.Component<RelationshipPanel
     }
 
     componentDidMount() {
-
+        this.props.graphModel.addPanelWithId(this.props.id);
     }
 
     componentWillUnmount() {
         this.props.graphModel.removeListener('updateActiveRelationship', this._setPropertiesHandler);
     }
 
     setProperties(data: any): void {
+        console.log(data);
         this.setState({
             type: data.label,
             properties: data.properties
@@ -73,17 +75,46 @@ export default class RelationshipPanel extends React.Component<RelationshipPanel
             case 'cancel':
                 break;
         }
-        this.props.hideRelationshipPanelCallback();
-
+        this.props.onClosePanel(this.props.id);
     }
 
     save(): void {
         this.props.graphModel.saveActiveRelationship(this.state.type, this.state.properties);
     }
 
+    handleClick(e: any): void {
+        // console.log(`onPanelClick:`);
+        this.props.graphModel.bringPanelToFront(this.props.id);
+    }
+
+    handleClose(e: any) {
+        this.props.onClosePanel(this.props.id);
+    }
+
+    handleMinimize(e: any) {
+        console.log('minimize');
+    }
+
+    handleMaximize(e: any) {
+        console.log('maximize');
+    }
+
+    handleFullScreen(e: any) {
+        console.log('fullscreen');
+    }
+
     render() {
         let relationshipId: string = this.props.graphModel.activeRelationship ? this.props.graphModel.activeRelationship.id : ""
-        return  <Draggable handle=".handle"><div className="editor-panel well" id="relationshipEditorPanel">
+        return  <Draggable handle=".handle">
+                    <div className="editor-panel well" id="relationshipEditorPanel">
+                    <Titlebar
+                        draggable={true}
+                        handleClick={this.handleClick.bind(this)}
+                        handleClose={this.handleClose.bind(this)}
+                        handleMinimize={this.handleMinimize.bind(this)}
+                        handleMaximize={this.handleMaximize.bind(this)}
+                        handleFullScreen={this.handleFullScreen.bind(this)}>
+                    </Titlebar>
                     <h4 className="pull-left handle" style={{marginBottom:20}}>Relationship [{relationshipId}]</h4>
                     <div className="clearfix"></div>
                     <ReactBootstrap.Table striped bordered condensed hover style = {{width: 400}}>

diff --git a/src/renderer/components/grapheditor/ScriptPanel.tsx b/src/renderer/components/grapheditor/ScriptPanel.tsx
@@ -2,11 +2,12 @@ import * as React from "react";
 import * as ReactBootstrap from "react-bootstrap";
 import * as ReactList from 'react-list';
 import Draggable from "react-draggable";
+import Titlebar from '../titlebar/Titlebar';
 
 import GraphModel from './model/GraphModel';
 import { SavedScript } from './model/ScriptConfig';
 
-export interface ScriptPanelProps { graphModel: GraphModel}
+export interface ScriptPanelProps { id: string, graphModel: GraphModel, onClosePanel: any}
 export interface ScriptPanelState { activeScript: SavedScript, selectedCyperIndex: number, status: string, lastUpdateTime: number }
 
 export default class ScriptPanel extends React.Component<ScriptPanelProps, ScriptPanelState> {
@@ -37,6 +38,7 @@ export default class ScriptPanel extends React.Component<ScriptPanelProps, Scrip
     }
 
     componentDidMount() {
+        this.props.graphModel.addPanelWithId(this.props.id);
     }
 
     componentWillUnmount() {
@@ -160,13 +162,43 @@ export default class ScriptPanel extends React.Component<ScriptPanelProps, Scrip
               </div>;
    }
 
+   handleClick(e: any): void {
+       // console.log(`onPanelClick:`);
+       this.props.graphModel.bringPanelToFront(this.props.id);
+   }
+
+   handleClose(e: any) {
+       this.props.onClosePanel(this.props.id);
+   }
+
+   handleMinimize(e: any) {
+       console.log('minimize');
+   }
+
+   handleMaximize(e: any) {
+       console.log('maximize');
+   }
+
+   handleFullScreen(e: any) {
+       console.log('fullscreen');
+   }
+
     render() {
         this._savedScriptList = this.props.graphModel.getSavedScriptList();
         this._savedScriptListLength = this._savedScriptList.length;
 
         // console.log(`render: `, this._savedScriptList);
 
-        return  <Draggable handle=".handle"><div className="editor-panel well" id="scriptPanel">
+        return  <Draggable handle=".handle">
+                    <div className="editor-panel well" id="scriptPanel">
+                    <Titlebar
+                        draggable={true}
+                        handleClick={this.handleClick.bind(this)}
+                        handleClose={this.handleClose.bind(this)}
+                        handleMinimize={this.handleMinimize.bind(this)}
+                        handleMaximize={this.handleMaximize.bind(this)}
+                        handleFullScreen={this.handleFullScreen.bind(this)}>
+                    </Titlebar>
                     <h4 className="pull-left handle" style={{marginBottom:20}}>Saved Scripts</h4>
                     <div className="clearfix"></div>
                     <ReactBootstrap.Table striped bordered condensed hover style = {{width: 400}}>