#142 Drawer on/off ok

Author: filippomc

webapp/components/general/NetPyNEPythonConsole.js

@@ -3,16 +3,13 @@ import React, { Component } from 'react'
 import PythonConsole from '@geppettoengine/geppetto-client/js/components/interface/pythonConsole/PythonConsole';
 
 export default class NetPyNEPythonConsole extends Component {
-
 
 
   componentWillUnmount () {
     console.log("unmounting python console")
   }
 
   componentDidMount () {
-
-  
 
 
   }

webapp/components/index.js

@@ -97,9 +97,7 @@ export const NetPyNECellRule = connect((state, ownProps) => ({
 
 
 import { getInstance as getLayoutManagerInstance } from "./layout/LayoutManager";
-export const LayoutManager = () => connect(state => ({
-  layout: state.layout,
-}))(getLayoutManagerInstance().getComponent());
+export const LayoutManager = () => connect(state => ({ layout: state.layout, }))(getLayoutManagerInstance().getComponent());
 
 
 import _NetPyNEPopulation from "./definition/populations/NetPyNEPopulation";
@@ -204,7 +202,7 @@ export const NetPyNEPythonConsole = connect(
 
 import _Drawer from './settings/Drawer'
 export const Drawer = connect(
-  state => ({ editMode: state.general.editMode,  layout: state.layout }),
+  state => ({ editMode: state.general.editMode, layout: state.layout }),
   dispatch => ({ 
     updateWidget: newConf => dispatch(updateWidget(newConf)),
     newWidget: widget => dispatch(newWidget(widget)),

webapp/components/layout/LayoutManager.tsx

@@ -44,12 +44,14 @@ class LayoutManager {
   widgetFactory: WidgetFactory;
   tabsetIconFactory: TabsetIconFactory;
   dispatch;
-
+  layoutManager = this;
+  enableMinimize = false;
 
   constructor(
     model,
     widgetFactory: WidgetFactory = null,
     tabsetIconFactory: TabsetIconFactory = null,
+    enableMinimize = false
   ) {
     this.model = FlexLayout.Model.fromJson(
       model ? model : defaultLayoutConfiguration
@@ -61,6 +63,7 @@ class LayoutManager {
       : new TabsetIconFactory();
     this.middleware = this.middleware.bind(this);
     this.factory = this.factory.bind(this);
+    this.enableMinimize = enableMinimize;
   }
 
   addWidget(widgetConfiguration) {
@@ -79,23 +82,33 @@ class LayoutManager {
     );
   }
 
-  Component = ({classes}) =>  (
+  onRenderTabSet = (panel, renderValues) => {
+    if (panel.getType() === "tabset" && this.enableMinimize) {
+      if (panel.getId() != 'leftPanel' && panel.getChildren().length > 0){
+        renderValues.buttons.push(<div key={panel.getId()} className="fa fa-window-minimize customIconFlexLayout" onClick={() => {
+          this.minimizeWidget(panel.getSelectedNode().getId()) 
+        }} />);
+      }
+    }
+  }
+
+  Component = (layoutManager: LayoutManager) => ({classes}) =>  (
         <div className={classes.container}>
           <div className={classes.spacer}/>
           <div className={classes.flexlayout}>
             <FlexLayout.Layout
               model={this.model}
               factory={this.factory}
               // iconFactory={layoutManager.iconFactory.bind(this)}
-              onAction={action => this.onAction(action)}
-              onRenderTab={(node,renderValues) => null}
+              onAction={action => layoutManager.onAction(action)}
+              onRenderTab={(node,renderValues) => layoutManager.onRenderTabSet(node, renderValues)}
             />
           </div>
           <div className={classes.spacer}/>
         </div>
       );
 
-  getComponent = () => withStyles(styles)(this.Component);
+  getComponent = () => withStyles(styles)(this.Component(this));
 
 
   private createTabSet(tabsetID) {
@@ -194,7 +207,7 @@ class LayoutManager {
         break;
       case Actions.DELETE_TAB: {
         if (this.getWidget(action.data.node).hideOnClose) {
-          this.moveWidgetToBorder(action);
+          this.minimizeWidget(action.data.node);
           defaultAction = false;
         }
         break;
@@ -273,15 +286,19 @@ class LayoutManager {
     }
   }
 
-  moveWidgetToBorder(action) {
+   
+
+
+  minimizeWidget(widgetId) {
 
-    var updatedWidget = this.getWidget(action.id);
+    var updatedWidget = this.getWidget(widgetId);
     if (updatedWidget === undefined) {
       return;
     }
-    updatedWidget.status = WidgetStatus.BORDER;
+    updatedWidget.status = WidgetStatus.MINIMIZED;
     updatedWidget.panelName = "border_bottom";
     this.updateWidget(updatedWidget);
+    // this.model.doAction(FlexLayout.Actions.moveNode(widgetId, "border_bottom", FlexLayout.DockLocation.CENTER, 0));
   }
 
   updateWidget (widget: Widget) {
@@ -290,6 +307,7 @@ class LayoutManager {
       this.widgetFactory.updateWidget(widget);
       model.doAction(Actions.updateNodeAttributes(widget.id, widget2Node(widget))); 
     }
+    this.model.doAction(FlexLayout.Actions.moveNode(widget.id, widget.panelName, FlexLayout.DockLocation.CENTER, widget.pos));
 
   }
   onActionMaximizeWidget(action) {

webapp/components/layout/model.ts

@@ -12,7 +12,6 @@ export enum WidgetStatus {
   ACTIVE = "ACTIVE",
   MAXIMIZED = "MAXIMIZED",
   MINIMIZED = "MINIMIZED",
-  BORDER = "BORDER",
 }
 
 export interface ExtendedNode extends Node {
@@ -22,7 +21,7 @@ export interface ExtendedNode extends Node {
 export interface Widget {
   id: string;
   status: WidgetStatus;
-  panelName: String;
+  panelName: string;
   hideOnClose?: boolean;
   name: string;
   enableClose?: boolean;

webapp/components/settings/Drawer.js

@@ -14,7 +14,7 @@ import Typography from '@material-ui/core/Typography';
 import { WidgetStatus } from '../layout/model';
 import {
   DEFAULT_HLS_WIDGETS, getPythonDefaultConsoleWidget, 
-  DEFAULT_MORPHOLOGY_WIDGET,DEFAULT_PLOTS_WIDGETS
+  DEFAULT_MORPHOLOGY_WIDGET,DEFAULT_PLOTS_WIDGETS, TOP_PANEL
 } from '../../constants';
 
 import DrawerIcon from '../general/NetPyNEIcons';
@@ -36,7 +36,7 @@ export default ({ newWidget, editMode, activateWidget, updateWidget }) => {
       const widgetConf = getNewWidgetConf(widgetId)
       newWidget({ path: widgetConf.id, ...widgetConf })
     } else {
-      if (widget.status === WidgetStatus.BORDER) {
+      if (widget.status === WidgetStatus.MINIMIZED) {
         updateBorderWidget(widgetId)
       } else if (widget.status !== WidgetStatus.ACTIVE) {
         activateWidget(widgetId)
@@ -48,7 +48,7 @@ export default ({ newWidget, editMode, activateWidget, updateWidget }) => {
   function updateBorderWidget (widgetId) {
     const updatedWidget = { ...layoutManager.getWidget(widgetId) }
     updatedWidget.status = WidgetStatus.ACTIVE
-    updatedWidget.panelName = getPythonDefaultConsoleWidget(editMode).panelName
+    updatedWidget.panelName = TOP_PANEL;
     updateWidget(updatedWidget)
   }
 
@@ -68,7 +68,7 @@ export default ({ newWidget, editMode, activateWidget, updateWidget }) => {
 
 
   function getMenu () {
-    return layoutManager.getWidgets();
+    return layoutManager.getWidgets().sort((w1, w2) => w1.pos - w2.pos);
     /*
      * if (editMode) {
      *   const array = [...Object.values(DEFAULT_HLS_WIDGETS), 
@@ -91,7 +91,7 @@ export default ({ newWidget, editMode, activateWidget, updateWidget }) => {
     const widget = layoutManager.getWidget(id);
     return <ListItem button key={name} dense disableGutters className={widget ? classes.selected : classes.unselected} onClick={() => createOrFocusWidget(id)}>
       <ListItemIcon className={classes.icon}>
-        <DrawerIcon widgetId={id} selected={widget && widget.status !== WidgetStatus.BORDER} />
+        <DrawerIcon widgetId={id} selected={widget && widget.status !== WidgetStatus.MINIMIZED} />
       </ListItemIcon>
       <ListItemText className={classes.text}>
         <Typography noWrap>{name}</Typography>