@aj-shadow/z-abs-complayer-codeeditor-client 0.0.0-aj-beta.221

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

@@ -0,0 +1,400 @@
+
+
+'use strict';
+
+import CodeEditorStore from '../stores/code-editor-store';
+import { ActionCodeEditorWorkspaceGet } from '../actions/action-code-editor-workspace';
+import { ActionCodeEditorFileGet, ActionCodeEditorFileSet, ActionCodeEditorFileEdit, ActionCodeEditorFileClose, ActionCodeEditorFileMove } from '../actions/action-code-editor-file';
+import { ActionCodeEditorWorkspaceSearchSet } from '../actions/action-code-editor-workspace';
+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 ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleCodeEditorView extends ReactComponentStore {
+  constructor(props) {
+    super(props, [CodeEditorStore]);
+    this.close = false;
+    this.fileIcons = new Map();
+    this.fileIcons.set('bld', '/abs-images/icon/build.svg');
+    this.fileIcons.set('css', '/abs-images/icon/css.svg');
+    this.fileIcons.set('js', '/abs-images/icon/js.svg');
+    this.fileIcons.set('json', '/abs-images/icon/json.svg');
+    this.fileIcons.set('jsx', '/abs-images/icon/jsx.svg');
+    this.fileIcons.set('html', '/abs-images/icon/html.svg');
+    this.fileIcons.set('md', '/abs-images/icon/md.svg');
+    this.fileIcons.set('prj', '/abs-images/icon/project.svg');
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props._uriPath, nextProps._uriPath)
+      || !this.shallowCompareObjectValues(this.props.location, nextProps.location)
+      || !this.shallowCompareMapValues(this.state.CodeEditorStore.files, nextState.CodeEditorStore.files)
+      || !this.shallowCompare(this.state.CodeEditorStore.current, nextState.CodeEditorStore.current)
+      || !this.shallowCompare(this.state.CodeEditorStore.current.query, nextState.CodeEditorStore.current.query)
+      || !this.shallowCompare(this.state.CodeEditorStore.persistentData, nextState.CodeEditorStore.persistentData);
+  }
+    
+  renderTabFileHeading(fileType) {
+    const filePath = this.fileIcons.get(fileType);
+    if(filePath) {
+      return (
+        <img className="middle_code_editor_tab_icon" src={filePath} />
+      );
+    }
+    else {
+      return null;
+    }
+  }
+  
+  renderTabFile(file, key) {
+    let id = -1;
+    const lineFunctions = new Map([
+      [
+        CodeEditorStore.SEARCH_FILES, {
+          name: CodeEditorStore.SEARCH_FILES,
+          types: [
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "bisque"},
+              darkMode: {backgroundColor: "#040"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "#EFCEA6"},
+              darkMode: {backgroundColor: "#060"}
+            }
+          ],
+          extentionLines: [],
+          getLines: (url) => {
+            const fileLines = this.state.CodeEditorStore.searchLines.get(CodeEditorStore.SEARCH_FILES);
+            const lines = fileLines.get(url);
+            if(lines) {
+              if(lines[lines.length-1].type !== 1) {
+                for(let i = 0; i < lines.length-1;++i) {
+                  lines[i].type = 0;
+                }
+                lines[lines.length-1].type = 1;
+              }
+              return lines;
+            }
+            else {  
+              return [];
+            }
+          }
+        }
+      ],
+      [
+        CodeEditorStore.LOG_FILES, {
+          name: CodeEditorStore.LOG_FILES,
+          types: [
+            {
+              id: (id = 0),
+              lightMode: {backgroundColor: "PapayaWhip", color: "Peru"},
+              darkMode: {backgroundColor: "PapayaWhip", color: "Peru"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "Plum", color: "DarkMagenta"},
+              darkMode: {backgroundColor: "Plum", color: "DarkMagenta"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "#FF8888", color: "#AA0000"},
+              darkMode: {backgroundColor: "#FF8888", color: "#AA0000"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "DarkOrange", color: "#FFDD88"},
+              darkMode: {backgroundColor: "DarkOrange", color: "#FFDD88"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "#DDDDFF", color: "#0000ff"},
+              darkMode: {backgroundColor: "#DDDDFF", color: "#0000ff"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "#DDDDFF", color: "Navy"},
+              darkMode: {backgroundColor: "#DDDDFF", color: "Navy"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "green", color: "#D0E9C6"},
+              darkMode: {backgroundColor: "green", color: "#D0E9C6"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "red", color: "#FFDDDD"},
+              darkMode: {backgroundColor: "red", color: "#FFDDDD"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "PaleTurquoise", color: "DodgerBlue"},
+              darkMode: {backgroundColor: "PaleTurquoise", color: "DodgerBlue"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "#FDFDFD", color: "#AAAAFF"},
+              darkMode: {backgroundColor: "#FDFDFD", color: "#AAAAFF"}
+            },
+            {
+              id: ++id,
+              lightMode: {backgroundColor: "#FDFDFD", color: "#FF6464"},
+              darkMode: {backgroundColor: "#FDFDFD", color: "#FF6464"}
+            }
+          ],
+          extentionLines: [],
+          getLines: (url) => {
+            const fileLines = this.state.CodeEditorStore.searchLines.get(CodeEditorStore.LOG_FILES);
+            const lines = fileLines.get(url);
+            if(lines) {
+              return lines;
+            }
+            else {  
+              return [];
+            }
+          }
+        }
+      ]
+    ]);
+    return (
+      <Tab eventKey={key} key={key}
+        title={
+          <div>
+            {this.renderTabFileHeading(file.type)}
+            {file.title}
+            <button type="button" className={this.theme(this.state.CodeEditorStore.persistentData.darkMode, 'middle_code_editor_close')} aria-label="Close"
+              onClick={(e, a) => {
+                this.close = true;
+                this.dispatch(CodeEditorStore, new ActionCodeEditorFileClose(key));
+              }}
+            >
+              ×
+            </button>
+          </div>
+        }
+        onMove={(fromKey, toKey) => {
+          this.dispatch(CodeEditorStore, new ActionCodeEditorFileMove(fromKey, toKey));
+        }}
+      >
+        <CodeMirrorEditor id={`code_editor_view_${key}`} projectId={file.projectId} docKey={key} code={file.content} options={this.getOptions(file.type)} darkMode={this.state.CodeEditorStore.persistentData.darkMode} emptyLine={this.state.CodeEditorStore.persistentData.emptyLine} currentType={this.state.CodeEditorStore.current.type} currentFile={this.state.CodeEditorStore.current.file} lineFunctions={lineFunctions} lines={this.state.CodeEditorStore.searchLines} eol={this.state.CodeEditorStore.eol}
+          onChanged={(projectId, docKey, code) => {
+            this.dispatch(CodeEditorStore, new ActionCodeEditorFileEdit(projectId, docKey, code));
+          }}
+          onFocusChange={(focused, docKey) => {
+            if(focused) {
+              const file = this.state.CodeEditorStore.files.get(docKey);
+              if(file) {
+                this.dispatch(CodeEditorStore, new ActionCodeEditorFileGet(file.projectId, file.key, file.title, file.path, file.type, file.plugin, file.workspaceName));
+              }
+            }
+          }}
+        />
+      </Tab>
+    );
+  }
+  
+  renderTabSearchHeading(data) {
+    const hits = 1 !== data.data.hits ? 'hits' : 'hit';
+    const files = 1 !== data.data.files ? 'files' : 'file';
+    const searchMessage = `Search"${data.search}" <${data.data.hits} ${hits} in ${data.data.files} ${files} of ${data.data.searched} searched>`;
+    return (
+      <tr key="search_header" className="editor_search_header">
+        <td>{searchMessage}</td>
+      </tr>
+    );
+  }
+  
+  renderTabSearchFileFound(foundFile, found, search, key) {
+    const classNameSearchFound = this.state.CodeEditorStore.persistentData.darkMode ? "editor_search_found_dark" : "editor_search_found_light";
+    return (
+      <React.Fragment key={`found_fragment_${key}`}>
+        <tr key={`found_tr_${key}`} className={classNameSearchFound}>
+          <td>
+            {`Line: ${found.lineNbr} `}
+            <a className="editor_search_found"
+              onClick={(e) => {
+                const url = `./${foundFile.file}`.replace(new RegExp('[/\\\\]', 'g'), '/');
+                this.dispatch(CodeEditorStore, new ActionCodeEditorFileSet(url, CodeEditorStore.SEARCH_FILES, found.lineNbr, 0));
+              }}>
+              {found.lineBefore}<span className="editor_search_found">{search}</span>{found.lineAfter}
+            </a>
+          </td>
+        </tr>
+      </React.Fragment>
+    );
+  }
+  
+  renderTabSearchFile(foundFile, search, index) {
+    const rows = [];
+    foundFile.indexes.forEach((found, fIndex) => {
+      rows.push(this.renderTabSearchFileFound(foundFile, found, search, `${index}_${fIndex}`));
+    });
+    const hits = 1 !== foundFile.indexes.length ? 'hits' : 'hit';
+    const fileMessage = `<${foundFile.indexes.length} ${hits}> ${foundFile.file}`;
+    return (
+      <React.Fragment key={`file_fragment_${index}`}>
+        <tr key={`file_tr_${index}`} className={"editor_search_file"}>
+          <td>{fileMessage}</td>
+        </tr>
+        {rows}
+      </React.Fragment>
+    );
+  }
+  
+  renderTabSearchRows(data) {
+    const rows = [];
+    rows.push(this.renderTabSearchHeading(data));
+    if(0 !== data.data.foundFiles.length) {
+      data.data.foundFiles.forEach((foundFile, index) => {
+        rows.push(this.renderTabSearchFile(foundFile, data.search, index));
+      });
+    }
+    return (
+      <table>
+        <tbody>
+          {rows}
+        </tbody>
+      </table>
+    );
+  }
+  
+  renderTabHeading() {
+    return (
+      <span className="editor_search_header">
+        search
+      </span>
+    );
+  }
+  
+  renderTabSearch(data, key) {
+    const rows = this.renderTabSearchRows(data);
+    return (
+      <Tab eventKey={key} key={key}
+        title={
+          <div>
+            {this.renderTabHeading()}
+            {data.title}
+            <button type="button" className={this.theme(this.state.CodeEditorStore.persistentData.darkMode, 'middle_code_editor_close')} aria-label="Close"
+              onClick={(e, a) => {
+                this.close = true;
+                this.dispatch(CodeEditorStore, new ActionCodeEditorFileClose(key));
+              }}
+            >
+              ×
+            </button>
+          </div>
+        }
+        onMove={(fromKey, toKey) => {
+          this.dispatch(CodeEditorStore, new ActionCodeEditorFileMove(fromKey, toKey));
+        }}
+      >
+        <div className="editor_search bootstrap_same_size_as_parent">
+          {rows}
+        </div>
+      </Tab>
+    );
+  }
+  
+  renderTab(options) {
+    const result = [];
+    this.state.CodeEditorStore.files.forEach((data, key) => {
+      if('search' === data.tabType) {
+        result.push(this.renderTabSearch(data, key));
+      }
+      else {
+        if(data.valid) {
+          result.push(this.renderTabFile(data, key));
+        }
+      }
+    });
+    return result;
+  }
+  
+  renderTabs(options) {
+    if(0 !== this.state.CodeEditorStore.files.size) {
+      return (
+        <Tabs id="code_editor_tabs" draggable="true" activeKey={null !== this.state.CodeEditorStore.current.file ? this.state.CodeEditorStore.current.file.key : null} darkMode={this.state.CodeEditorStore.persistentData.darkMode}
+          onSelect={(selectedKey) => {
+            if(!this.close) {
+              const file = this.state.CodeEditorStore.files.get(selectedKey);
+              if('search' === file.tabType) {
+                this.dispatch(CodeEditorStore, new ActionCodeEditorWorkspaceSearchSet(file.key));
+              }
+              else {
+                this.dispatch(CodeEditorStore, new ActionCodeEditorFileGet(file.projectId, file.key, file.title, file.path, file.type, file.plugin, file.workspaceName));
+              }
+            }
+            else {
+              this.close = false;
+            }
+          }}
+        >
+          {this.renderTab(options)}
+        </Tabs>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+  
+  getOptions(type) {
+    return {
+      highlightActiveLine: true,
+      closeBrackets: true,
+      bracketMatching: true,
+      drawSelection: true,
+      history: true,
+      autocompletion: true,
+      
+      tabKeyAction: 'indent', 
+      tabSize: 2,
+      indentType: 'spaces',
+      indentUnit: 2,
+      
+      darkMode: true,
+      lineNumbers: true,
+      highlightActiveLineGutter: true,
+      breakpointGutter: false,
+      foldGutter: true,
+      emptyLine: true,
+      linesSearchLines: true,
+      
+      type: type
+    };
+  }
+  
+  render () {
+    const darkMode = this.state.CodeEditorStore.persistentData.darkMode;
+    return (
+      <div className={this.theme(darkMode, "view")}>
+        {this.renderTabs()}
+      </div>
+    );
+  }
+}
+
+
+// Double code /App layer log log-type
+/*MiddleCodeEditorView.csses = [
+  'log_engine',
+  'log_debug',
+  'log_error',
+  'log_warning',
+  'log_ip',
+  'log_gui',
+  'log_verify_success',
+  'log_verify_failure',
+  'log_test_data',
+  'log_browser_log',
+  'log_browser_err'
+];*/
+
+
+MiddleCodeEditorView.contextType = RouterContext;
+MiddleCodeEditorView.REMOVE_KEY_LENGTH = 'code_editor_tabs-tab-'.length;

package/project/client/components/middle-code-editor.jsx

@@ -0,0 +1,50 @@
+
+'use strict';
+
+import CodeEditorStore from '../stores/code-editor-store';
+import MiddleCodeEditorToolbar from './middle-code-editor-toolbar';
+import MiddleCodeEditorSidebar from './middle-code-editor-sidebar';
+import MiddleCodeEditorView from './middle-code-editor-view';
+import Route from 'z-abs-complayer-router-client/client/react-component/route';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MiddleCodeEditor extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: this.props._uriPath,
+        text: this.props._uriPath ? this.props._uriPath : 'Code Editor',
+        prefix: 'CE: '
+      };
+    });
+    if(props.showWorkspace) {
+      CodeEditorStore.showWorkspace = true;
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <div className="middle middle_code_editor">
+        <Route switch="*" handler={MiddleCodeEditorToolbar} showWorkspace={this.props.showWorkspace} 
+          onOpen={(appName) => {
+            this.setTitle(() => {
+              return {
+                isPath: this.props._uriPath,
+                text: appName,
+                prefix: 'CE: '
+              };
+            });
+          }}/>
+        <Route switch="*" handler={MiddleCodeEditorSidebar} />
+        <Route switch="*" handler={MiddleCodeEditorView} />
+      </div>
+    );
+  }
+}

package/project/client/css/code-editor.css

@@ -0,0 +1,44 @@
+
+img.middle_code_editor_tab_icon{
+  width:16px;
+  padding-right:4px;
+  padding-bottom:2px;
+}
+
+div.middle_code_editor_sidebar{
+  width:360px;
+  min-width:180px;
+  max-width:720px;
+}
+
+div.middle_code_editor_sidebar_mover {
+  position:absolute;
+  top:0px;
+  bottom:0px;
+  width:4px;
+  right:0px;
+}
+
+div.middle_code_editor_sidebar_mover:hover {
+  cursor:e-resize;
+}
+
+div.middle_code_editor_view{
+  position:absolute;
+  overflow:hidden;
+  padding: 4px 4px 4px 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 360px;
+  top: 36px;
+}
+
+div.editor_markup_name{
+  display:inline-block;
+  height:30px;
+  font-weight:bold;
+  margin:0;
+  padding:0;
+  position:relative;
+  top:-8px;
+}

package/project/client/css/scrollbar-dark.css

@@ -0,0 +1,8 @@
+
+.panel_body_sidebar_dark {
+  overflow:auto;
+  scrollbar-color:#569cff #333;
+  background-color:#1e1e1e;
+  height:100%;
+  padding:4px;
+}

package/project/client/css/scrollbar-light.css

@@ -0,0 +1,6 @@
+
+.panel_body_sidebar_light {
+  overflow:auto;
+  height:100%;
+  padding:4px;
+}

package/project/client/css/search.css

@@ -0,0 +1,40 @@
+
+div.editor_search{
+  overflow:auto;
+}
+
+span.editor_search_header{
+  background-color:LightSkyBlue;
+  border-radius:3px;
+  color:black;
+  border:0.5px black solid;
+  padding:0px 2px;
+}
+
+tr.editor_search_header{
+  background-color:LightSkyBlue;
+  font-family:monospace;
+  font-size:12px;
+  font-weight:700;
+  white-space: nowrap;
+}
+
+tr.editor_search_file{
+  background-color:PaleGreen;
+  font-family:monospace;
+  font-size:12px;
+  font-weight:700;
+  white-space: nowrap;
+}
+
+span.editor_search_found{
+  background-color:Yellow;
+  font-family:monospace;
+  font-size:12px;
+  font-weight:700;
+}
+
+a.editor_search_found{
+  color:inherit;
+  cursor:pointer;
+}

package/project/client/css/search_light.css

@@ -0,0 +1,8 @@
+
+tr.editor_search_found_light{
+  background-color:White;
+  font-family:monospace;
+  font-size:12px;
+  font-weight:700;
+  white-space: nowrap;
+}

package/project/client/css/serach_dark.css

@@ -0,0 +1,8 @@
+
+tr.editor_search_found_dark{
+  background-color:#ddd;
+  font-family:monospace;
+  font-size:12px;
+  font-weight:700;
+  white-space: nowrap;
+}

package/project/client/css/sidebar-dark.css

@@ -0,0 +1,21 @@
+
+
+div.sidebar_dark{
+  width:360px;
+  min-width:180px;
+  max-width:720px;
+  background-color:Black;
+}
+
+div.sidebar_mover_dark {
+  position:absolute;
+  top:0px;
+  bottom:0px;
+  width:4px;
+  right:0px;
+  background-color:Black;
+}
+
+div.sidebar_mover_dark:hover {
+  cursor:e-resize;
+}

package/project/client/css/sidebar-light.css

@@ -0,0 +1,18 @@
+
+div.sidebar_light{
+  width:360px;
+  min-width:180px;
+  max-width:720px;
+}
+
+div.sidebar_mover_light {
+  position:absolute;
+  top:0px;
+  bottom:0px;
+  width:4px;
+  right:0px;
+}
+
+div.sidebar_mover_light:hover {
+  cursor:e-resize;
+}

package/project/client/css/tab.css

@@ -0,0 +1,19 @@
+
+button.middle_code_editor_close {
+  float:right;
+  margin-left:8px;
+  margin-right:-4px;
+  opacity:1.0;
+  padding:0;
+  cursor:pointer;
+  border:0;
+  font-size:21px;
+  font-weight:bold;
+  text-shadow:0 1px 0 #fff;
+  line-height:1;
+}
+
+button.middle_code_editor_close:hover {
+  text-decoration:none;
+  cursor:pointer;
+}

package/project/client/css/tab_dark.css

@@ -0,0 +1,9 @@
+
+button.middle_code_editor_close_dark {
+  color:#d4d4d4;
+  background-color:#333333;
+}
+
+button.middle_code_editor_close_dark:hover {
+  color:#fff;
+}

package/project/client/css/tab_light.css

@@ -0,0 +1,9 @@
+
+button.middle_code_editor_close_light {
+  color:#838383;
+  background-color:White;
+}
+
+button.middle_code_editor_close_light:hover {
+  color:#000;
+}

package/project/client/css/view-dark.css

@@ -0,0 +1,11 @@
+
+div.view_dark{
+  position:absolute;
+  overflow:hidden;
+  padding:4px 4px 4px 0px;
+  right:0px;
+  bottom:0px;
+  left:360px;
+  top:36px;
+  background-color:Black;
+}

package/project/client/css/view-light.css

@@ -0,0 +1,10 @@
+
+div.view_light{
+  position: absolute;
+  overflow:hidden;
+  padding: 4px 4px 4px 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 360px;
+  top: 36px;
+}