feat: update editor (#35)

* feat: update editor * feat: update editor
TuGraph-family · Nov 7, 2023 · bf81854 · bf81854
1 parent 0caaa04
commit bf81854
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 7 deletions.
diff --git a/...mponents/@@plugins/src/components/studio/tugraph/domain-core/graph-query/cypherEditor.tsx b/...mponents/@@plugins/src/components/studio/tugraph/domain-core/graph-query/cypherEditor.tsx
@@ -0,0 +1,92 @@
+// @ts-nocheck
+import React, { forwardRef } from 'react';
+import { MonacoEnvironment, EditorProvider } from '@difizen/cofine-editor-core';
+
+const Editor = forwardRef<any, any>((props, editorRef) => {
+  const { value, onCreated, onChange, language = 'cypher', onInit } = props;
+  let codeEditor: monaco.editor.IStandaloneCodeEditor;
+
+  // 监听事件
+  let erdElement: HTMLElement | null;
+
+  const installElementResizeDetector = () => {
+    // eslint-disable-next-line react/no-find-dom-node
+    const node = editorRef && editorRef.current;
+    const parentNode = node && node.parentElement;
+    erdElement = parentNode;
+  };
+
+  React.useEffect(() => {
+    MonacoEnvironment.loadModule(
+      async (container: { load: (arg0: Syringe.Module) => void }) => {
+        const dsl = await import('@difizen/cofine-language-cypher');
+        container.load(dsl.default);
+      },
+    );
+    MonacoEnvironment.init().then(async () => {
+      if (editorRef && editorRef.current) {
+        const editorProvider =
+          MonacoEnvironment.container.get<EditorProvider>(EditorProvider);
+        const editor = editorProvider.create(editorRef.current, {
+          language,
+          value,
+          theme: 'cypherTheme',
+          suggestLineHeight: 24,
+          suggestLineHeight: 24,
+          automaticLayout: true,
+          minimap: { enabled: false },
+          fontSize: 14,
+          lineHeight: 20,
+          folding: true,
+          wordWrap: 'on',
+          lineDecorationsWidth: 0,
+          lineNumbersMinChars: 3,
+          readOnly: false,
+          hover: {
+            delay: 800,
+          },
+          suggestSelection: 'first',
+          wordBasedSuggestions: false,
+          suggest: { snippetsPreventQuickSuggestions: false },
+          autoClosingQuotes: 'always',
+          fixedOverflowWidgets: true,
+          'bracketPairColorization.enabled': true,
+        });
+
+        editorRef.current.codeEditor = codeEditor = editor.codeEditor;
+        if (onInit) {
+          onInit(editorRef.current.codeEditor);
+        }
+        installElementResizeDetector();
+
+        if (onCreated) {
+          onCreated(editor.codeEditor);
+        }
+        if (onChange) {
+          editor.codeEditor.onDidChangeModelContent(() =>
+            onChange(editor.codeEditor.getValue()),
+          );
+        }
+        // registerOptions({});
+      }
+    });
+
+    return () => {
+      if (codeEditor) {
+        codeEditor.dispose();
+      }
+    };
+  }, [editorRef]);
+
+  return (
+    <div
+      ref={editorRef}
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+    />
+  );
+});
+
+export default Editor;
diff --git a/.../src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.tsx b/.../src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.tsx
@@ -5,7 +5,6 @@ import {
   QuestionCircleOutlined,
   SaveOutlined,
 } from '@ant-design/icons';
-import GremlinEditor from 'ace-gremlin-editor';
 import {
   Button,
   Divider,
@@ -21,11 +20,13 @@ import {
   message,
 } from 'antd';
 import { filter, find, isEmpty, join, map, uniqueId } from 'lodash';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useHistory } from 'umi';
 import { useImmer } from 'use-immer';
 import IconFont from '../../components/icon-font';
 import { SplitPane } from '../../components/split-panle';
+import CypherEdit from './cypherEditor';
+
 import {
   IQUIRE_LIST,
   PUBLIC_PERFIX_CLASS,
@@ -54,6 +55,7 @@ const { Option } = Select;
 export const GraphQuery = (props: PluginPorps) => {
   const history = useHistory();
   const location = history.location;
+  const editorRef = useRef<any>(null);
 
   const graphList = getLocalData('TUGRAPH_SUBGRAPH_LIST') as SubGraph[];
   const {
@@ -208,6 +210,7 @@ export const GraphQuery = (props: PluginPorps) => {
       draft.pathHeight = size;
     });
   }, []);
+
   const redirectUrl = props?.redirectPath;
   const onResultClose = useCallback(
     (id: string) => {
@@ -225,7 +228,7 @@ export const GraphQuery = (props: PluginPorps) => {
     if (activeTab === IQUIRE_LIST[0].key) {
       onStatementQuery({
         graphName: currentGraphName,
-        script,
+        script: editorRef?.current?.codeEditor?.getValue() || script,
       }).then(res => {
         updateState(draft => {
           draft.resultData = [...resultData, { ...res, id: uniqueId('id_') }];
@@ -541,7 +544,7 @@ export const GraphQuery = (props: PluginPorps) => {
                           marginTop: 20,
                         }}
                       >
-                        <GremlinEditor
+                        {/* <GremlinEditor
                           gremlinId="test"
                           initValue={script}
                           onInit={initEditor => {
@@ -551,7 +554,7 @@ export const GraphQuery = (props: PluginPorps) => {
                                 const value = find(
                                   getLocalData('TUGRAPH_STATEMENT_LISTS')[
                                     currentGraphName
-                                  ],
+                                  ],editorK
                                   item => item.id === editorKey,
                                 )?.script;
                                 initEditor?.editorInstance?.setValue?.(value);
@@ -564,6 +567,30 @@ export const GraphQuery = (props: PluginPorps) => {
                               draft.script = val;
                             });
                           }}
+                        /> */}
+                        <CypherEdit
+                          ref={editorRef}
+                          value={script}
+                          onChange={(value: any) => {
+                            updateState(draft => {
+                              draft.script = value;
+                            });
+                          }}
+                          onInit={(initEditor: any) => {
+                            updateState(draft => {
+                              draft.editor = initEditor;
+                              if (editorKey) {
+                                const value = find(
+                                  getLocalData('TUGRAPH_STATEMENT_LISTS')[
+                                    currentGraphName
+                                  ],
+                                  item => item.id === editorKey,
+                                )?.script;
+                                initEditor?.setValue?.(value);
+                                draft.script = value;
+                              }
+                            });
+                          }}
                         />
                       </div>
                       {isListShow && (

diff --git a/...t/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/package.json b/...t/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/package.json
@@ -17,7 +17,6 @@
     "@codemirror/lang-python": "^6.1.2",
     "@uiw/react-codemirror": "^4.20.2",
     "@umijs/plugin-request": "^2.9.0",
-    "ace-gremlin-editor": "1.0.2",
     "ahooks": "^3.7.2",
     "antd": "^4.24.8",
     "immer": "^9.0.19",
@@ -32,7 +31,9 @@
     "tsparticles": "2.9.3",
     "umi": "^3.5.20",
     "umi-request": "^1.4.0",
-    "use-immer": "^0.8.1"
+    "use-immer": "^0.8.1",
+    "@difizen/cofine-editor-core": "^0.0.1-alpha.4",
+    "@difizen/cofine-language-cypher": "^0.0.1-alpha.4"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",