Ongoing work on cell widgets

packages/cells/src/widget.ts

@@ -14,7 +14,7 @@ import {
 } from '@phosphor/messaging';
 
 import {
-  PanelLayout
+  PanelLayout, Panel
 } from '@phosphor/widgets';
 
 import {
@@ -52,24 +52,54 @@ import {
 
 
 /**
- * The class name added to cell widgets.
+ * The CSS class added to cell widgets.
  */
 const CELL_CLASS = 'jp-Cell';
 
 /**
- * The class name added to the prompt area of cell.
+ * The CSS class added to the cell header.
+ */
+const CELL_HEADER_CLASS = 'JP-Cell-header';
+
+/**
+ * The CSS class added to the cell footer.
+ */
+const CELL_FOOTER_CLASS = 'JP-Cell-footer';
+
+/**
+ * The CSS class added to the cell input wrapper.
+ */
+const CELL_INPUT_WRAPPER_CLASS = 'jp-Cell-inputWrapper';
+
+/**
+ * The CSS class added to the cell output wrapper.
  */
-const PROMPT_CLASS = 'jp-Cell-prompt';
+const CELL_OUTPUT_WRAPPER_CLASS = 'jp-Cell-outputWrapper';
+
+/**
+ * The CSS class added to the cell input collapser.
+ */
+const CELL_INPUT_COLLAPSER_CLASS = 'jp-Cell-inputCollapser';
+
+/**
+ * The CSS class added to the cell output collapser.
+ */
+const CELL_OUTPUT_COLLAPSER_CLASS = 'jp-Cell-outputCollapser';
 
 /**
  * The class name added to input area widgets.
  */
-const INPUT_CLASS = 'jp-InputArea';
+const INPUT_AREA_CLASS = 'jp-InputArea';
+
+/**
+ * The class name added to the prompt area of cell.
+ */
+const INPUT_PROMPT_CLASS = 'jp-InputArea-prompt';
 
 /**
  * The class name added to the editor area of the cell.
  */
-const EDITOR_CLASS = 'jp-InputArea-editor';
+const INPUT_EDITOR_CLASS = 'jp-InputArea-editor';
 
 /**
  * The class name added to the cell when collapsed.
@@ -101,11 +131,6 @@ const MARKDOWN_OUTPUT_CLASS = 'jp-MarkdownOutput';
  */
 const RAW_CELL_CLASS = 'jp-RawCell';
 
-/**
- * The class name added to cell editor widget nodes.
- */
-const CELL_EDITOR_CLASS = 'jp-CellEditor';
-
 /**
  * The class name added to a rendered input area.
  */
@@ -117,6 +142,9 @@ const RENDERED_CLASS = 'jp-mod-rendered';
 const DEFAULT_MARKDOWN_TEXT = 'Type Markdown and LaTeX: $ α^2 $';
 
 
+
+
+
 /**
  * A base cell widget.
  */
@@ -128,19 +156,30 @@ class Cell extends Widget {
   constructor(options: Cell.IOptions) {
     super();
     this.addClass(CELL_CLASS);
+    let model = this._model = options.model;
+    let contentFactory = this.contentFactory = (options.contentFactory || Cell.defaultContentFactory);
+    let editorFactory = this.editorFactory = options.editorFactory;
     this.layout = new PanelLayout();
 
-    let model = this._model = options.model;
+    // Header
+    let header = this._header = contentFactory.createCellHeader();
+    header.addClass(CELL_HEADER_CLASS);
+    (this.layout as PanelLayout).addWidget(header);
 
-    let contentFactory = this.contentFactory = options.contentFactory;
-    let editorFactory = this.editorFactory = options.editorFactory;
+    // Input
+    let inputWrapper = this._inputWrapper = new Panel();
+    inputWrapper.addClass(CELL_INPUT_WRAPPER_CLASS);
+    let inputCollapser = this._inputCollapser = contentFactory.createCollapser();
     let editorOptions = { model, factory: editorFactory };
-
     let editor = this._editor = contentFactory.createCellEditorWrapper(editorOptions);
-    editor.addClass(CELL_EDITOR_CLASS);
-
-    this._input = contentFactory.createInputArea({ editor });
+    editor.addClass(INPUT_EDITOR_CLASS);
+    let input = this._input = contentFactory.createInputArea({ editor });
+    inputWrapper.addWidget(inputCollapser);
+    inputWrapper.addWidget(input);
     (this.layout as PanelLayout).addWidget(this._input);
+
+    // Output and footer
+    this.finishCell();
   }
 
   /**
@@ -199,6 +238,26 @@ class Cell extends Widget {
     this._input.setPrompt(value);
   }
 
+  /** 
+   * The view state of input being collapsed.
+  */
+  get inputCollapsed(): boolean {
+    return this._inputCollapsed;
+  }
+  set inputCollapsed(value: boolean) {
+    this._inputCollapsed = value;
+  }
+
+  /** 
+   * The view state of output being collapsed.
+  */
+  get outputCollapsed(): boolean {
+    return this._outputCollapsed;
+  }
+  set outputCollapsed(value: boolean) {
+    this._outputCollapsed = value;
+  }
+
   /**
    * Dispose of the resources held by the widget.
    */
@@ -255,10 +314,23 @@ class Cell extends Widget {
     this._input.showEditor();
   }
 
+  protected finishCell(): void {
+    let footer = this._footer = this.contentFactory.createCellFooter();
+    (this.layout as PanelLayout).addWidget(footer);
+  }
+
   private _input: InputArea = null;
   private _editor: CodeEditorWrapper = null;
   private _model: ICellModel = null;
   private _readOnly = false;
+  private _inputCollapsed = false;
+  private _outputCollapsed = false;
+  private _header: ICellHeader = null;
+  private _footer: ICellFooter = null;
+  private _inputCollapser: ICollapser = null;
+  private _outputCollapser: ICollapser = null;
+  private _inputWrapper: Widget = null;
+  private _outputWrapper: Widget = null;
 }
 
 
@@ -295,14 +367,29 @@ namespace Cell {
   interface IContentFactory extends OutputArea.IContentFactory {
 
     /**
-     * Create a new cell editor for the widget.
+     * Create a new cell editor for the parent widget.
      */
     createCellEditorWrapper(options: CodeEditorWrapper.IOptions): CodeEditorWrapper;
 
     /**
-     * Create a new input area for the widget.
+     * Create a new input area for the parent widget.
      */
     createInputArea(options: InputArea.IOptions): InputArea;
+
+    /**
+     * Create a new cell header for the parent widget.
+     */
+    createCellHeader(): ICellHeader;
+
+    /**
+     * Create a new cell header for the parent widget.
+     */
+    createCellFooter(): ICellFooter;
+
+    /**
+     * Create a collapser for input and output.
+     */
+    createCollapser(): ICollapser;
   }
 
   /**
@@ -325,8 +412,31 @@ namespace Cell {
       return new InputArea(options);
     }
 
+    /**
+     * Create a new cell header for the parent widget.
+     */
+    createCellHeader(): ICellHeader {
+      return new CellHeader();
+    }
+
+    /**
+     * Create a new cell header for the parent widget.
+     */
+    createCellFooter(): ICellFooter {
+      return new CellFooter();
+    }
+
+    /**
+     * Create a new input/output collaper for the parent widget.
+     */
+    createCollapser(): ICollapser {
+      return new Collapser();
+    }
   }
 
+  export
+  const defaultContentFactory = new ContentFactory();
+
 }
 
 
@@ -657,7 +767,7 @@ class InputArea extends Widget {
    */
   constructor(options: InputArea.IOptions) {
     super();
-    this.addClass(INPUT_CLASS);
+    this.addClass(INPUT_AREA_CLASS);
     let editor = this._editor = options.editor;
     editor.addClass(EDITOR_CLASS);
     this.layout = new PanelLayout();
@@ -733,3 +843,42 @@ namespace InputArea {
     editor: CodeEditorWrapper;
   }
 }
+
+
+/**
+ * The cell header interface.
+ */
+export
+interface ICellHeader extends Widget {}
+
+/**
+ * Default implementatino of the cell header is a Widget with a class
+ */
+export
+class CellHeader extends Widget implements ICellHeader {
+}
+
+
+/**
+ * The cell footer interface.
+ */
+export
+interface ICellFooter extends Widget {}
+
+/**
+ * Default implementatino of the cell footer is a Widget with a class
+ */
+export
+class CellFooter extends Widget implements ICellFooter {
+}
+
+
+export
+interface ICollapser extends Widget {}
+
+export
+class Collapser extends Widget {
+  constructor() {
+    super();
+  }
+}