TypeScript phosphor-panel.PanelLayout類代碼示例

 /**
  * Update the text editor model, creating a new text editor
  * widget and detaching the old one.
  */
 updateTextEditor(editor: IEditorModel) {
   let layout = this.layout as PanelLayout;
   if (layout.childCount() > 0) {
     layout.childAt(0).dispose();
   }
   layout.addChild(new CodeMirrorWidget(editor));
 }

 /**
  * Get an ordered list the toolbar item names.
  *
  * @returns A new array of the current toolbar item names.
  */
 list(): string[] {
   let names: string[] = [];
   let layout = this.layout as PanelLayout;
   for (let i = 0; i < layout.childCount(); i++) {
     let widget = layout.childAt(i);
     names.push(Private.nameProperty.get(widget));
   }
   return names;
 }

 /**
  * Add an item to the toolbar.
  *
  * @param name - The name of the widget to add to the toolbar.
  *
  * @param widget - The widget to add to the toolbar.
  *
  * @param after - The optional name of the item to insert after.
  *
  * #### Notes
  * An error is thrown if a widget of the same name is already given.
  * If `after` is not given, or the named widget is not in the toolbar,
  * the widget will be added to the end of the toolbar.
  */
 add(name: string, widget: Widget, after?: string): void {
   let names = this.list();
   if (names.indexOf(name) !== -1) {
     throw new Error(`A button named "${name}" was already added`);
   }
   widget.addClass(TOOLBAR_ITEM);
   let layout = this.layout as PanelLayout;
   let index = names.indexOf(after);
   if (index === -1) {
     layout.addChild(widget);
   } else {
     layout.insertChild(index + 1, widget);
   }
   Private.nameProperty.set(widget, name);
 }

 /**
  * Construct a new editor widget.
  */
 constructor(context: IDocumentContext<IDocumentModel>) {
   super();
   this.layout = new PanelLayout();
   this.addClass(EDITOR_CLASS);
   var codeMirror = new CodeMirrorWidget();
   var layout = this.layout as PanelLayout;
   let editor = codeMirror.editor;
   let model = context.model;
   this.createMenu(layout);
   layout.addChild(codeMirror);
   editor.setOption('lineNumbers', true);
   editor.setOption('theme', "material");
   let doc = editor.getDoc();
   doc.setValue(model.toString());
   this.title.text = context.path.split('/').pop();
   loadModeByFileName(editor, context.path);
   model.stateChanged.connect((m, args) => {
     if (args.name === 'dirty') {
       if (args.newValue) {
         this.title.className += ` ${DIRTY_CLASS}`;
       } else {
         this.title.className = this.title.className.replace(DIRTY_CLASS, '');
       }
     }
   });
   context.pathChanged.connect((c, path) => {
     loadModeByFileName(editor, path);
     this.title.text = path.split('/').pop();
   });
   model.contentChanged.connect(() => {
     let old = doc.getValue();
     let text = model.toString();
     if (old !== text) {
       doc.setValue(text);
     }
   });
   CodeMirror.on(doc, 'change', (instance, change) => {
     if (change.origin !== 'setValue') {
       model.fromString(instance.getValue());
     }
   });
 }

  createMenu(layout : PanelLayout) {
    let menuOne = new Menu([
      new MenuItem({
        text: 'Match Brackets'
      }),
      new MenuItem({
        text: 'Line Numbers'
      }),
      new MenuItem({
        text: 'Line Wrapping'
      }),
      new MenuItem({
        text: 'Syntax Highlighting'
      })
      ]);

    let menuTwo = new Menu([
      new MenuItem({
        text: 'abcdef'
      }),
      new MenuItem({
        text: 'base16-dark'
      }),
      new MenuItem({
        text: 'base16-light'
      }),
      new MenuItem({
        text: 'hopscotch'
      }),
      new MenuItem({
        text: 'material'
      }),
      new MenuItem({
        text: 'mbo'
      }),
      new MenuItem({
        text: 'mdn-like'
      }),
      new MenuItem({
        text: 'seti'
      }),      
      new MenuItem({
        text: 'the-matrix'
      }),
      new MenuItem({
        text: 'xq-light'
      }),
      new MenuItem({
        text: 'zenburn'
      })
      ]);

    let menuThree = new Menu([
      new MenuItem({
        text: 'Vim Mode'
      }),
      new MenuItem({
        text: 'EMacs Mode'
      })
      ]);

    let menuBar = new MenuBar([
      new MenuItem({
        text: 'Settings',
        submenu: menuOne,
        shortcut: 'Ctrl-S'
      }),
      new MenuItem({
        text: 'Themes',
        submenu: menuTwo,
        shortcut: 'Ctrl+T'
      }),
      new MenuItem({
        text: 'Modes',
        submenu: menuThree,
        shortcut: 'Ctrl+M'
      })
      ])

    layout.addChild(menuBar);
  }

 model.contentChanged.connect(() => {
   let widget = renderer.render('text/markdown', model.toString());
   if (layout.childCount()) {
     layout.childAt(0).dispose();
   }
   layout.addChild(widget);
 });