@aj-shadow/actorjs-app 0.0.0-aj-beta.221

package/project/client/components/middle/stack-editor/middle-stack-editor-toolbar.jsx

@@ -0,0 +1,525 @@
+
+'use strict';
+
+import StackEditorStore from '../../../stores/stack-editor-store';
+import { ActionStackEditorPersistentDataUpdate } from '../../../actions/action-stack-editor/action-stack-editor-persistent-data';
+import { ActionStackEditorProjectUpdate, ActionStackEditorWizard } from '../../../actions/action-stack-editor/action-stack-editor-project';
+import { ActionStackEditorFolderNew, ActionStackEditorFolderAdd, ActionStackEditorFolderUpdate, ActionStackEditorFolderRemove, ActionStackEditorFolderDelete } from '../../../actions/action-stack-editor/action-stack-editor-folder';
+import { ActionStackEditorFileNew, ActionStackEditorFileAdd, ActionStackEditorFileRename, ActionStackEditorFileUpdate, ActionStackEditorFileUpdateAll, ActionStackEditorFileRemove, ActionStackEditorFileDelete, ActionStackEditorBuild } from '../../../actions/action-stack-editor/action-stack-editor-file';
+import ModalDialogStore from 'z-abs-complayer-modaldialog-client/client/stores/modal-dialog-store';
+import { ActionModalDialogShow, ActionModalDialogHide, ActionModalDialogPending, ActionModalDialogResult } from 'z-abs-complayer-modaldialog-client/client/actions/action-modal-dialog';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ModalDialogWizard from 'z-abs-complayer-modaldialog-client/client/modal-dialog-wizard';
+import ModalDialogWizardList from 'z-abs-complayer-modaldialog-client/client/modal-dialog-wizard-list';
+import ModalDialogFolderAdd from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-add';
+import ModalDialogFolderNew from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-new';
+import ModalDialogFolderProperties from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-properties';
+import ModalDialogFolderRemove from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-remove';
+import ModalDialogFileAdd from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-add';
+import ModalDialogFileNew from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-new';
+import ModalDialogFileProperties from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-properties';
+import ModalDialogFileRemove from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-remove';
+import { ActionDialogFileGet, ActionDialogFileSet } from 'z-abs-corelayer-client/client/actions/action-dialog-file';
+import DialogFileStore from 'z-abs-corelayer-client/client/stores/dialog-file-store';
+import ReactComponentRealtime from 'z-abs-corelayer-client/client/react-component/react-component-realtime';
+import React from 'react';
+
+ 
+export default class MiddleStackEditorToolbar extends ReactComponentRealtime {
+  constructor(props) {
+    super(props, [StackEditorStore, ModalDialogStore, DialogFileStore]);
+    this._modalDialogStackWizard = null;
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.buttonFileSaveDisabled = true;
+    this.buttonFileSaveAllDisabled = true;
+  }
+  
+  static TEMPLATE_STACK_DATA = [
+    {name: 'Client Connection', type:'js', icon: ''},
+    {name: 'Server Connection', type:'js', icon: ''},
+    {name: 'Encoder', type:'js', icon: ''},
+    {name: 'Decoder', type:'js', icon: ''},
+    {name: 'Msg', type:'js', icon: ''},
+    {name: 'Const', type:'js', icon: ''},
+    {name: 'Inner Log', type:'js', icon: ''},
+    {name: 'Style', type:'js', icon: ''},
+    {name: 'Api', type:'js', icon: ''},
+    {name: 'Client Connection Options', type:'js', icon: ''},
+    {name: 'Server Connection Options', type:'js', icon: ''}
+  ];
+  static TEMPLATE_TYPES_STACK = ['js', 'js', 'js', 'js', 'js', 'js', 'js', 'js', 'js', 'js', 'js'];
+  static TEMPLATE_DATAS = MiddleStackEditorToolbar.TEMPLATE_STACK_DATA.concat([
+    {name: 'Class [class js file]', type:'js', icon: ''},
+    {name: 'None [empty js file]', type:'js', icon: ''}
+  ]);
+  
+  didMount() {
+    window.addEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.StackEditorStore.projectLocal, nextState.StackEditorStore.projectLocal)
+      || !this.shallowCompare(this.state.StackEditorStore.projectGlobal, nextState.StackEditorStore.projectGlobal)
+      || !this.shallowCompare(this.state.StackEditorStore.current, nextState.StackEditorStore.current)
+      || !this.shallowCompareMapValues(this.state.StackEditorStore.files, nextState.StackEditorStore.files)
+      || !this.shallowCompare(this.state.StackEditorStore.persistentData, nextState.StackEditorStore.persistentData)
+      || !this.shallowCompare(this.state.StackEditorStore.build, nextState.StackEditorStore.build)
+      || !this.shallowCompareMapValues(this.state.ModalDialogStore.modalResults, nextState.ModalDialogStore.modalResults)
+      || !this.shallowCompare(this.state.DialogFileStore.project, nextState.DialogFileStore.project)
+      || !this.shallowCompare(this.state.DialogFileStore.current, nextState.DialogFileStore.current)
+      || !this.shallowCompare(this.state.DialogFileStore.original, nextState.DialogFileStore.original);
+  }
+  
+  willUnmount() {
+    window.removeEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  _fileSave() {
+    this.dispatch(StackEditorStore, new ActionStackEditorFileUpdate(this.state.StackEditorStore.current.file.key));
+  }
+  
+  _fileSaveAll() {
+    const keys = [];
+    this.state.StackEditorStore.files.forEach((file) => { 
+      if(file.codeChanged) {
+        keys.push(file.key);
+      }
+    });
+    this.dispatch(StackEditorStore, new ActionStackEditorFileUpdateAll(keys));
+  }
+  
+  _keyDown(e) {
+    if(e.ctrlKey && e.shiftKey && 'S' === e.key) {
+      if(!this.buttonFileSaveAllDisabled) {
+        e.preventDefault();
+        this._fileSaveAll();
+      }
+    }
+    if(e.ctrlKey && 's' === e.key) {
+      if(!this.buttonFileSaveDisabled) {
+        e.preventDefault();
+        this._fileSave();
+      }
+    }
+  }
+  
+  renderButtonSaveProject() {
+    const disabled = this.state.StackEditorStore.projectGlobal.isSaved() && this.state.StackEditorStore.projectLocal.isSaved();
+    return (
+      <ButtonNew id="stack_editor_project_save" colorMark="markup_color" icon="icon-project-save" size="aj_btn_sm" placement="bottom" heading="Save" content="Project" disabled={disabled}
+        onClick={(e) => {
+          if(!this.state.StackEditorStore.projectGlobal.isSaved()) {
+            this.dispatch(StackEditorStore, new ActionStackEditorProjectUpdate(this.state.StackEditorStore.projectGlobal.projectId));
+          }
+          if(!this.state.StackEditorStore.projectLocal.isSaved()) {
+            this.dispatch(StackEditorStore, new ActionStackEditorProjectUpdate(this.state.StackEditorStore.projectLocal.projectId));
+          }
+        }}
+      />
+    );
+  }
+  
+  renderButtonFolderNew() {
+    const disabled = 'folder' !== this.state.StackEditorStore.current.type || '.' === this.state.StackEditorStore.current.folder?.data.path;
+    return (
+      <ButtonNew id="stack_editor_folder_new" colorMark="markup_color" icon="icon-folder-new" size="aj_btn_sm" placement="bottom" heading="New" content="Folder" disabled={disabled}
+        onClick={(e) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Stack_Folder_New'));
+        }}
+      />
+    );
+  }
+  
+  renderButtonFolderAdd() {
+    const disabled = 'folder' !== this.state.StackEditorStore.current.type;
+    return (
+      <ButtonNew id="stack_editor_folder_add" colorMark="markup_color" icon="icon-folder-add" size="aj_btn_sm" placement="bottom" heading="Add" content="Folder" disabled={disabled}
+        onClick={(e) => {
+          const folder = this.state.StackEditorStore.current.folder;
+          const dir = `${folder.data.path}/${folder.title}`;
+          const project = StackEditorStore.getProject(folder.projectId);
+          this.dispatch(DialogFileStore, new ActionDialogFileGet(dir, project.getRootName(), [dir], project.getFileNames(dir), 'folder'));
+          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Stack_Folder_Add'));
+        }}
+      />
+    );
+  }
+  
+  renderButtonStackWizard() {
+    return (
+      <ButtonNew id="stack_wizart" colorMark="markup_color" icon="icon-not-implemented" size="aj_btn_sm" placement="bottom" heading="Wizard" content="Stack" disabled={'folder' !== this.state.StackEditorStore.current.type || '.' !== this.state.StackEditorStore.current.folder.data.path}
+        onClick={(e) => {
+          this._modalDialogStackWizard.show(this.state.StackEditorStore.current.folder);
+        }}
+      />
+    );
+  }
+  
+  renderButtonFolderProperties() {
+    return (
+      <ButtonNew id="stack_editor_folder_properties" colorMark="markup_color" icon="icon-folder-property" size="aj_btn_sm" placement="bottom" heading="Properties" content="Folder" disabled={'folder' !== this.state.StackEditorStore.current.type}
+        onClick={(e) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Stack_Folder_Properties'));
+        }}
+      />
+    );
+  }
+  
+  renderButtonFolderDelete() {
+    const disabled = 'folder' !== this.state.StackEditorStore.current.type || !(this.state.StackEditorStore.projectGlobal.isSaved() && this.state.StackEditorStore.projectLocal.isSaved());
+    return (
+      <ButtonNew id="stack_editor_folder_delete" colorMark="markup_color" icon="icon-folder-delete" size="aj_btn_sm" placement="bottom" heading="Remove or Delete" content="Folder" disabled={disabled}
+        onClick={(e) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Stack_Folder_Remove'));
+        }}
+      />
+    );
+  }
+  
+  renderButtonFileNew() {
+    return (
+      <ButtonNew id="stack_editor_file_new" colorMark="markup_color" icon="icon-file-new" size="aj_btn_sm" placement="bottom" heading="New" content="File" disabled={'folder' !== this.state.StackEditorStore.current.type}
+        onClick={(e) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Stack_File_New'));
+        }}
+      />
+    );
+  }
+  
+  renderButtonFileAdd() {
+    return (
+      <ButtonNew id="stack_editor_file_add" colorMark="markup_color" icon="icon-file-add" size="aj_btn_sm" placement="bottom" heading="Add" content="File" disabled={'folder' !== this.state.StackEditorStore.current.type}
+        onClick={(e) => {
+          const folder = this.state.StackEditorStore.current.folder;
+          const dir = `${folder.data.path}/${folder.title}`;
+          const project = StackEditorStore.getProject(folder.projectId);
+          this.dispatch(DialogFileStore, new ActionDialogFileGet(dir, project.getRootName(), [dir], project.getFileNames(dir), 'file'));
+          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Stack_File_Add'));
+        }}
+      />
+    );
+  }
+  
+  renderButtonFileSave() {
+    this.buttonFileSaveDisabled = 'file' !== this.state.StackEditorStore.current.type || !this.state.StackEditorStore.current.file.codeChanged;
+    return (
+      <ButtonNew id="stack_editor_file_save" colorMark="markup_color" icon="icon-file-save" size="aj_btn_sm" placement="bottom" heading="Save" content="File" shortcut="Ctrl+S" disabled={this.buttonFileSaveDisabled}
+        onClick={(e) => {
+          this._fileSave();
+        }}
+      />
+    );
+  }
+  
+  renderButtonFileSaveAll() {
+    this.buttonFileSaveAllDisabled = true;
+    this.state.StackEditorStore.files.forEach((file) => { 
+      this.buttonFileSaveAllDisabled = this.buttonFileSaveAllDisabled && !file.codeChanged;
+    });
+    return (
+      <ButtonNew id="stack_editor_files_save" colorMark="markup_color" icon="icon-files-save" size="aj_btn_sm" placement="bottom" heading="Save" content="All Files" shortcut="Ctrl+Shift+S" disabled={this.buttonFileSaveAllDisabled}
+        onClick={(e) => {
+          this._fileSaveAll();
+        }}
+      />
+    );
+  }
+  
+  renderButtonFileProperties() {
+    return (
+      <ButtonNew id="stack_editor_file_properties" colorMark="markup_color" icon="icon-file-property" size="aj_btn_sm" placement="bottom" heading="Properties" content="File" disabled={'file' !== this.state.StackEditorStore.current.type}
+        onClick={(e) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Stack_File_Properties'));
+        }}
+      />
+    );
+  }
+  
+  renderButtonFileDelete() {
+    const disabled = ('file' !== this.state.StackEditorStore.current.type && 'invalid_file' !== this.state.StackEditorStore.current.type) || !(this.state.StackEditorStore.projectGlobal.isSaved() && this.state.StackEditorStore.projectLocal.isSaved());
+    return (
+      <ButtonNew id="stack_editor_file_delete" colorMark="markup_color" icon="icon-file-delete" size="aj_btn_sm" placement="bottom" heading="Remove or Delete" content="File"  disabled={disabled}
+        onClick={(e) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Stack_File_Remove'));
+        }}
+      />
+    );
+  }
+    
+  renderBuildButton() {
+    const result = this.state.StackEditorStore.build.result;
+    const success = this.state.StackEditorStore.build.success;
+    let className;
+    if(result) {
+      if(success) {
+        className = "stack_editor_success";
+      }
+      else {
+        className = "stack_editor_error";
+      }
+    }
+    return (
+      <ButtonNew id="stack_check" colorMark="markup_color" icon="icon-not-implemented" size="aj_btn_sm" className={className} placement="bottom" heading="Check" content="Code" disabled={'file' !== this.state.StackEditorStore.current.type}
+        onClick={(e) => {
+          this.dispatch(StackEditorStore, new ActionStackEditorBuild());
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogFolderNew() {
+    const name = 'Stack_Folder_New';
+    return (
+      <ModalDialogFolderNew name={name} folder={this.state.StackEditorStore.current.folder} heading="New Folder" modalResults={this.state.ModalDialogStore.modalResults}
+        onFolderNew={(projectId, key, title, data) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFolderNew(projectId, key, title, data), (response) => {
+            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          });
+        }}
+        onHide={() => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogFolderAdd() {
+    const name = 'Stack_Folder_Add';
+    const folder = this.state.StackEditorStore.current.folder;
+    const projectId = folder !== null ? folder.projectId : null;
+    return (
+      <ModalDialogFolderAdd name={name} heading="Add Folder" folder={this.state.StackEditorStore.current.folder} project={this.state.DialogFileStore.project} current={this.state.DialogFileStore.current} original={this.state.DialogFileStore.original} modalResults={this.state.ModalDialogStore.modalResults}
+        onAdd={(projectId, title, data) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFolderAdd(projectId, title, data));
+          this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, {
+            code: 'success',
+            error: null,
+            msg: ''
+          }));
+        }}
+        onChoose={(path) => {
+          this.dispatch(DialogFileStore, new ActionDialogFileSet(path));
+        }}
+        onHide={() => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogFolderProperties() {
+    const name = 'Stack_Folder_Properties';
+    return (
+      <ModalDialogFolderProperties name={name} folder={this.state.StackEditorStore.current.folder} heading="Folder Properties" modalResults={this.state.ModalDialogStore.modalResults}
+        onFolderProperties={(projectId, title, newTitle, data) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFolderUpdate(projectId, title, newTitle, data), (response) => {
+            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          });
+        }}
+        onHide={() => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogFolderRemove() {
+    const name = 'Stack_Folder_Remove';
+    return (
+      <ModalDialogFolderRemove name={name} folder={this.state.StackEditorStore.current.folder} heading="Remove or Delete Folder" modalResults={this.state.ModalDialogStore.modalResults}
+        onFolderRemove={(projectId, title, key, data) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFolderRemove(projectId, title, key, data));
+          this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, {
+            code: 'success',
+            error: null,
+            msg: ''
+          }));
+        }}
+        onFolderDelete={(projectId, path, title, key) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFolderDelete(projectId, path, title, key), (response) => {
+            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          });
+        }}
+        onHide={() => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogFileNew() {
+    const name = 'Stack_File_New';
+    return (
+      <ModalDialogFileNew name={name} fileType heading="New Stack File" folder={this.state.StackEditorStore.current.folder} templateNames={MiddleStackEditorToolbar.TEMPLATE_DATAS} modalResults={this.state.ModalDialogStore.modalResults}
+        onFileNew={(projectId, path, title, type, templateName) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFileNew(projectId, path, title, type, templateName), (response) => {
+            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          });
+        }}
+        onHide={() => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogStackWizard() {
+    let chosenTransportName = 'tcp';
+    return (
+      <ModalDialogWizard ref={(c) => this._modalDialogStackWizard = c} heading="Stack Wizard" namePlaceHolder="stack name" result={'result'} templateNames={MiddleStackEditorToolbar.TEMPLATE_STACK_DATA}
+        onWizardNew={(projectId, path, title) => {
+          this.dispatch(StackEditorStore, new ActionStackEditorWizard(projectId, path, title, MiddleStackEditorToolbar.TEMPLATE_TYPES_STACK, MiddleStackEditorToolbar.TEMPLATE_STACK_DATA, chosenTransportName));
+        }}
+        onClear={() => {}}
+      >
+        <ModalDialogWizardList listName={chosenTransportName} listNames={['tcp', 'udp']} 
+          onChosenList={(listName) => {
+            chosenTransportName = listName;
+          }}
+        />
+      </ModalDialogWizard>
+    );
+  }
+  
+  renderModalDialogFileAdd() {
+    const name = 'Stack_File_Add';
+    const folder = this.state.StackEditorStore.current.folder;
+    const projectId = folder !== null ? folder.projectId : null;
+    return (
+      <ModalDialogFileAdd name={name} heading="Add Stack File" folder={this.state.StackEditorStore.current.folder} project={this.state.DialogFileStore.project} current={this.state.DialogFileStore.current} original={this.state.DialogFileStore.original} modalResults={this.state.ModalDialogStore.modalResults}
+        onAdd={(projectId, title, path, type) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFileAdd(projectId, title, path, type));
+          this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, {
+            code: 'success',
+            error: null,
+            msg: ''
+          }));
+        }}
+        onChoose={(path) => {
+          this.dispatch(DialogFileStore, new ActionDialogFileSet(path));
+        }}
+        onHide={() => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogFileProperties() {
+    const name = 'Stack_File_Properties';
+    return (
+      <ModalDialogFileProperties name={name} heading="File Properties" file={this.state.StackEditorStore.current.file} modalResults={this.state.ModalDialogStore.modalResults}
+        onFileProperties={(projectId, path, title, newTitle) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFileRename(projectId, path, title, newTitle), (response) => {
+            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          });
+        }}
+        onHide={() => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogFileRemove() {
+    const name = 'Stack_File_Remove';
+    return (
+      <ModalDialogFileRemove name={name} file={this.state.StackEditorStore.current.file} doDelete={'invalid_file' !== this.state.StackEditorStore.current.type} heading="Remove or Delete Stack File" modalResults={this.state.ModalDialogStore.modalResults}
+        onFileRemove={(projectId, key) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFileRemove(projectId, key));
+          this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, {
+            code: 'success',
+            error: null,
+            msg: ''
+          }));
+        }}
+        onFileDelete={(projectId, key) => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
+          this.dispatch(StackEditorStore, new ActionStackEditorFileDelete(projectId, key), (response) => {
+            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          });
+        }}
+        onHide={() => {
+          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+        }}
+      />
+    );
+  }
+  
+  renderButtonDarkMode() {
+    const darkMode = this.state.StackEditorStore.persistentData.darkMode;
+    const icon = darkMode ? 'icon-mode-dark' : 'icon-mode-light';
+    return (
+      <ButtonNew id="stack_editor_darkmode" icon={icon} size="aj_btn_sm" active={darkMode} placement="bottom" heading="View" content="Dark mode"
+        onClick={(e) => {
+          this.dispatch(StackEditorStore, new ActionStackEditorPersistentDataUpdate('', 'darkMode', !darkMode));
+        }}
+      />
+    );
+  }
+  
+  renderButtonEmptyLine() {
+    const emptyLine = this.state.StackEditorStore.persistentData.emptyLine;
+    return (
+      <ButtonNew id="stack_editor_empty_line" icon="icon-empty-line" size="aj_btn_sm" active={emptyLine} placement="bottom" heading="View" content="Empty Line"
+        onClick={(e) => {
+          this.dispatch(StackEditorStore, new ActionStackEditorPersistentDataUpdate('', 'emptyLine', !emptyLine));
+        }}
+      />
+    );
+  }
+  
+  render() {
+    return (
+      <div className="middle_toolbar middle_code_editor_toolbar">
+        {this.renderModalDialogStackWizard()}
+        {this.renderModalDialogFolderNew()}
+        {this.renderModalDialogFolderAdd()}
+        {this.renderModalDialogFolderProperties()}
+        {this.renderModalDialogFolderRemove()}
+        {this.renderModalDialogFileNew()}
+        {this.renderModalDialogFileAdd()}
+        {this.renderModalDialogFileProperties()}
+        {this.renderModalDialogFileRemove()}
+        <div className="toolbar" role="toolbar" aria-label="...">
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderButtonSaveProject()}
+          </div>
+          {/*<div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderButtonStackWizard()}
+          </div>*/}
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderButtonFolderNew()}
+            {this.renderButtonFolderAdd()}
+            {this.renderButtonFolderProperties()}
+            {this.renderButtonFolderDelete()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderButtonFileNew()}
+            {this.renderButtonFileAdd()}
+            {this.renderButtonFileSave()}
+            {this.renderButtonFileSaveAll()}
+            {this.renderButtonFileProperties()}
+            {this.renderButtonFileDelete()}
+          </div>
+          {/*<div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderBuildButton()}
+          </div>*/}
+          <div className="aj_btn_group pull-right" role="group" aria-label="...">
+            {this.renderButtonEmptyLine()}
+            {this.renderButtonDarkMode()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/project/client/components/middle/stack-editor/middle-stack-editor-view.jsx

@@ -0,0 +1,156 @@
+
+'use strict';
+
+import StackEditorStore from '../../../stores/stack-editor-store';
+import { ActionStackEditorFileGet, ActionStackEditorFileSet, ActionStackEditorFileEdit, ActionStackEditorFileClose, ActionStackEditorFileMove } from '../../../actions/action-stack-editor/action-stack-editor-file';
+import Tabs from 'z-abs-complayer-bootstrap-client/client/tabs';
+import Tab from 'z-abs-complayer-bootstrap-client/client/tab';
+import CodeMirrorEditor from 'z-abs-complayer-codemirror-client/client/code-mirror-editor';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import LogType from 'z-abs-funclayer-engine-cs/clientServer/log/log-type';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleStackEditorView extends ReactComponentStore {
+  constructor(props) {
+    super(props, [StackEditorStore]);
+    this.close = false;
+  }
+  
+  didMount() {
+    if(this.props._uriPath && 0 < this.props._uriPath.length) {
+      this.dispatch(StackEditorStore, new ActionStackEditorFileSet(`.${this.props._uriPath}`, this.props.location.search));
+    }
+    else {
+      this.dispatch(StackEditorStore, new ActionStackEditorFileSet());
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props._uriPath, nextProps._uriPath)
+      || !this.shallowCompare(this.props.location.search, nextProps.location.search)
+      || !this.shallowCompareMapValues(this.state.StackEditorStore.files, nextState.StackEditorStore.files)
+      || !this.shallowCompare(this.state.StackEditorStore.current, nextState.StackEditorStore.current)
+      || !this.shallowCompare(this.state.StackEditorStore.persistentData, nextState.StackEditorStore.persistentData)
+      || !this.shallowCompare(this.state.StackEditorStore.build, nextState.StackEditorStore.build);
+  }
+    
+  didUpdate(prevProps, prevState) {
+    if(this.props._uriPath !== prevProps._uriPath) {
+      this.dispatch(StackEditorStore, new ActionStackEditorFileSet(`.${this.props._uriPath}`, this.props.location.search));
+    }
+  }
+  
+  renderTab(options) {
+    const result = [];
+    const queryState = this.state.StackEditorStore.current.query;  
+    const query = !queryState ? undefined : {
+      url: queryState.url,
+      line: queryState.line,
+      typeCss: LogType.csses[Number.parseInt(this.state.StackEditorStore.current.query.type)]
+    };
+    this.state.StackEditorStore.files.forEach((file, key) => {
+      if(null !== file.content) {
+        result.push(
+          <Tab eventKey={key} key={key} id={key} 
+            title={
+              <div>
+                {file.title}
+                <button type="button" className={this.theme(this.state.StackEditorStore.persistentData.darkMode, 'middle_code_editor_close')} aria-label="Close"
+                  onClick={(e, a) => {
+                    this.close = true;
+                    this.dispatch(StackEditorStore, new ActionStackEditorFileClose(key));
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+            }
+            onMove={(fromKey, toKey) => {
+              this.dispatch(StackEditorStore, new ActionStackEditorFileMove(fromKey, toKey));
+            }}
+          >
+            <CodeMirrorEditor id={`stack_editor_view_${key}`} projectId={file.projectId} docKey={key} code={file.content} build={this.state.StackEditorStore.build} options={this.getOptions(file.type, key)} currentType={this.state.StackEditorStore.current.type} currentFile={this.state.StackEditorStore.current.file} currentQuery={query} darkMode={this.state.StackEditorStore.persistentData.darkMode} emptyLine={this.state.StackEditorStore.persistentData.emptyLine}
+              onChanged={(projectId, docKey, code) => {
+                this.dispatch(StackEditorStore, new ActionStackEditorFileEdit(projectId, docKey, code));
+              }}
+              onFocusChange={(focused, docKey) => {
+                if(focused) {
+                  const file = this.state.StackEditorStore.files.get(docKey);
+                  if(file) {
+                    this.dispatch(StackEditorStore, new ActionStackEditorFileGet(file.projectId, file.key, file.title, file.path, file.type));
+                  }
+                }
+              }}
+            />
+          </Tab>
+        );
+      }
+    });
+    return result;
+  }
+
+  renderTabs(options) {
+    if(0 !== this.state.StackEditorStore.files.size) {
+      return (
+        <Tabs id="stack_editor_tabs" draggable="true" activeKey={null !== this.state.StackEditorStore.current.file ? this.state.StackEditorStore.current.file.key : null} darkMode={this.state.StackEditorStore.persistentData.darkMode}
+          onSelect={(selectedKey) => {
+            if(!this.close) {
+              const file = this.state.StackEditorStore.files.get(selectedKey);
+              this.dispatch(StackEditorStore, new ActionStackEditorFileGet(file.projectId, file.key, file.title, file.path, file.type));
+            }
+            else {
+              this.close = false;
+            }
+          }}
+        >
+          {this.renderTab(options)}
+        </Tabs>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+
+  getOptions(type, key) {
+    return {
+      lineNumbers: true,
+      highlightActiveLineGutter: true,
+      highlightActiveLine: true,
+      closeBrackets: true,
+      bracketMatching: true,
+      drawSelection: true,
+      history: true,
+      autocompletion: true,
+
+      tabKeyAction: 'indent', 
+      tabSize: 2,
+      indentType: 'spaces',
+      indentUnit: 2,
+      
+      darkMode: true,
+      breakpointGutter: false,
+      foldGutter: true,
+      emptyLine: true,
+
+      buildGutter: true,
+      
+      type
+    };
+  }
+  
+  render() {
+    const darkMode = this.state.StackEditorStore.persistentData.darkMode;
+    return (
+      <div className={this.theme(darkMode, "view")}>
+        {this.renderTabs()}
+      </div>
+    );
+  }
+}
+
+
+MiddleStackEditorView.contextType = RouterContext;
+MiddleStackEditorView.REMOVE_KEY_LENGTH = 'stack_editor_tabs-tab-'.length;