improve some web code (DataLinkDC#2563)

* improve some web code * Spotless Apply * improve some web code * Spotless Apply * fix * improve some web code * Spotless Apply --------- Co-authored-by: Zzm0809 <[email protected]>
aiwenmo · Nov 22, 2023 · b698708 · b698708
1 parent b466597
commit b698708
Show file tree

Hide file tree

Showing 22 changed files with 684 additions and 637 deletions.
diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx
@@ -21,15 +21,14 @@ import * as monaco from 'monaco-editor';
 import { editor, languages, Position } from 'monaco-editor';
 
 import { buildAllSuggestionsToEditor } from '@/components/CustomEditor/CodeEdit/function';
-import EditorFloatBtn from '@/components/CustomEditor/EditorFloatBtn';
 import { LoadCustomEditorLanguageWithCompletion } from '@/components/CustomEditor/languages';
 import { StateType } from '@/pages/DataStudio/model';
 import { MonacoEditorOptions } from '@/types/Public/data';
 import { convertCodeEditTheme } from '@/utils/function';
-import { Editor, Monaco, OnChange, useMonaco } from '@monaco-editor/react';
+import { Editor, Monaco, OnChange } from '@monaco-editor/react';
 import { connect } from '@umijs/max';
 import useMemoCallback from 'rc-menu/es/hooks/useMemoCallback';
-import { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useRef } from 'react';
 import ITextModel = editor.ITextModel;
 import CompletionItem = languages.CompletionItem;
 import CompletionContext = languages.CompletionContext;
@@ -48,7 +47,6 @@ export type CodeEditFormProps = {
   readOnly?: boolean;
   lineNumbers?: string;
   autoWrap?: string;
-  showFloatButton?: boolean;
   editorDidMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
   enableSuggestions?: boolean;
   monacoRef?: any;
@@ -81,26 +79,14 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
     enableSuggestions = false, // enable suggestions
     suggestionsData, // suggestions data
     autoWrap = 'on', // auto wrap
-    showFloatButton = false,
     editorDidMount,
     editorRef,
     monacoRef,
     tabs: { activeKey }
   } = props;
 
-  const editorInstance = useRef<editor.IStandaloneCodeEditor | any>(editorRef);
-  const monacoInstance = useRef<Monaco | any>(monacoRef);
-
-  const { ScrollType } = editor;
-
-  // 使用编辑器钩子, 拿到编辑器实例
-  const monacoHook = useMonaco();
-
-  useEffect(() => {
-    convertCodeEditTheme(editorInstance.current);
-    // 需要调用 手动注册下自定义语言
-    LoadCustomEditorLanguageWithCompletion(monacoInstance.current);
-  }, [monacoHook]);
+  const editorInstance = useRef<editor.IStandaloneCodeEditor | undefined>(editorRef);
+  const monacoInstance = useRef<Monaco | undefined>(monacoRef);
 
   /**
    * build all suggestions
@@ -141,76 +127,26 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
     });
   }
 
-  // editorInstance?.current?.onDidChangeModelContent?.(() => {
-  //   console.log(editorInstance?.current, 'editorInstance')
-  //   editorInstance?.current?.trigger('action', 'editor.action.triggerSuggest');
-  // });
-
   /**
    *  editorDidMount
    * @param {editor.IStandaloneCodeEditor} editor
    * @param monacoIns
    */
   const editorDidMountChange = (editor: editor.IStandaloneCodeEditor, monacoIns: Monaco) => {
-    if (editorRef?.current && monacoRef?.current && editorDidMount) {
+    if (editorDidMount) {
       editorDidMount(editor, monacoIns);
     }
     editorInstance.current = editor;
     monacoInstance.current = monacoIns;
     if (enableSuggestions) {
       reloadCompilation(monacoInstance.current);
     }
-    // register TypeScript language service
-    monacoIns.languages.register({
-      id: language || 'typescript'
-    });
     editor.layout();
     editor.focus();
   };
 
-  /**
-   *  handle scroll to top
-   */
-  const handleBackTop = () => {
-    editorInstance?.current?.revealLine(1);
-  };
-
-  /**
-   *  handle scroll to bottom
-   */
-  const handleBackBottom = () => {
-    editorInstance?.current?.revealLine(editorInstance?.current?.getModel()?.getLineCount());
-  };
-
-  /**
-   *  handle scroll to down
-   */
-  const handleDownScroll = () => {
-    editorInstance?.current?.setScrollPosition(
-      { scrollTop: editorInstance?.current?.getScrollTop() + 500 },
-      ScrollType.Smooth
-    );
-  };
-
-  /**
-   *  handle scroll to up
-   */
-  const handleUpScroll = () => {
-    editorInstance?.current?.setScrollPosition(
-      { scrollTop: editorInstance?.current?.getScrollTop() - 500 },
-      ScrollType.Smooth
-    );
-  };
-
   // todo: 标记错误信息
 
-  const restEditBtnProps = {
-    handleBackTop,
-    handleBackBottom,
-    handleUpScroll,
-    handleDownScroll
-  };
-
   const finalEditorOptions = {
     ...MonacoEditorOptions, // set default options
     tabCompletion: 'on', // tab 补全
@@ -297,10 +233,10 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
     <>
       <div className={'monaco-float'}>
         <Editor
-          beforeMount={(monaco: Monaco) => {
-            if (!monacoInstance?.current) {
-              monacoInstance.current = monaco;
-            }
+          beforeMount={(monaco) => {
+            // 挂载前加载语言 | before mount load language
+            monacoInstance.current = monaco;
+            LoadCustomEditorLanguageWithCompletion(monaco);
           }}
           width={width}
           height={height}
@@ -310,9 +246,8 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
           className={'editor-develop'}
           onMount={editorDidMountChange}
           onChange={onChange}
-          theme={convertCodeEditTheme()}
+          theme={convertCodeEditTheme(editorInstance?.current)}
         />
-        {showFloatButton && <EditorFloatBtn {...restEditBtnProps} />}
       </div>
     </>
   );

diff --git a/dinky-web/src/components/CustomEditor/CodeShow/index.tsx b/dinky-web/src/components/CustomEditor/CodeShow/index.tsx
@@ -22,28 +22,23 @@ import { LoadCustomEditorLanguage } from '@/components/CustomEditor/languages';
 import { Loading } from '@/pages/Other/Loading';
 import { MonacoEditorOptions } from '@/types/Public/data';
 import { convertCodeEditTheme } from '@/utils/function';
-import { Editor, useMonaco } from '@monaco-editor/react';
+
 import { Col, Row } from 'antd';
 import { editor } from 'monaco-editor';
 import { EditorLanguage } from 'monaco-editor/esm/metadata';
-import { CSSProperties, useEffect, useRef, useState } from 'react';
-import FullscreenBtn from '../FullscreenBtn';
 
-// loader.config({monaco});
-/**
- * props
- * todo:
- *  1. Realize full screen/exit full screen in the upper right corner of the editor (Visible after opening)
- *    - The full screen button is done, but the full screen is not implemented
- *  2. Callback for right-clicking to clear logs (optional, not required)
- */
+import FullscreenBtn from '@/components/CustomEditor/FullscreenBtn';
+import { Editor, Monaco } from '@monaco-editor/react';
+import { CSSProperties, memo, useRef, useState } from 'react';
+
 export type CodeShowFormProps = {
   height?: string | number;
   width?: string;
   language?: EditorLanguage | string;
   options?: any;
   code: string;
   lineNumbers?: string;
+  enableMiniMap?: boolean;
   autoWrap?: string;
   showFloatButton?: boolean;
   refreshLogCallback?: () => void;
@@ -75,7 +70,8 @@ const CodeShow = (props: CodeShowFormProps) => {
     autoWrap = 'on', //  auto wrap
     showFloatButton = false,
     refreshLogCallback,
-    fullScreenBtn = false
+    fullScreenBtn = false,
+    enableMiniMap = false
   } = props;
 
   const { ScrollType } = editor;
@@ -86,28 +82,19 @@ const CodeShow = (props: CodeShowFormProps) => {
   const [stopping, setStopping] = useState<boolean>(false);
   const [autoRefresh, setAutoRefresh] = useState<boolean>(false);
   const [fullScreen, setFullScreen] = useState<boolean>(false);
-  const editorInstance = useRef<editor.IStandaloneCodeEditor | any>();
+  const editorInstance = useRef<editor.IStandaloneCodeEditor | undefined>();
+  const monacoInstance = useRef<Monaco | undefined>();
   const [timer, setTimer] = useState<NodeJS.Timer>();
 
-  // 使用编辑器钩子, 拿到编辑器实例
-  const monaco = useMonaco();
-
-  useEffect(() => {
-    convertCodeEditTheme(monaco?.editor);
-    // 需要调用 手动注册下自定义语言
-    LoadCustomEditorLanguage(monaco);
-  }, [monaco]);
-
   /**
    *  handle sync log
-   * @returns {Promise<void>}
    */
   const handleSyncLog = async () => {
     setLoading(true);
     setInterval(() => {
       refreshLogCallback?.();
-      setLoading(false);
     }, 1000);
+    setLoading(false);
   };
 
   /**
@@ -144,6 +131,7 @@ const CodeShow = (props: CodeShowFormProps) => {
    *  handle scroll to bottom
    */
   const handleBackBottom = () => {
+    // @ts-ignore
     editorInstance?.current?.revealLine(editorInstance?.current?.getModel().getLineCount());
   };
 
@@ -170,9 +158,11 @@ const CodeShow = (props: CodeShowFormProps) => {
   /**
    *  editorDidMount
    * @param {editor.IStandaloneCodeEditor} editor
+   * @param monaco {Monaco}
    */
-  const editorDidMount = (editor: editor.IStandaloneCodeEditor) => {
+  const editorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
     editorInstance.current = editor;
+    monacoInstance.current = monaco;
     editor.layout();
     editor.focus();
     if (scrollBeyondLastLine) {
@@ -218,6 +208,11 @@ const CodeShow = (props: CodeShowFormProps) => {
 
           {/* editor */}
           <Editor
+            beforeMount={(monaco) => {
+              // 挂载前加载语言 | before mount load language
+              LoadCustomEditorLanguage(monacoInstance.current);
+              monacoInstance.current = monaco;
+            }}
             width={width}
             height={height}
             loading={<Loading loading={loading} />}
@@ -226,13 +221,14 @@ const CodeShow = (props: CodeShowFormProps) => {
             options={{
               scrollBeyondLastLine: false,
               readOnly: true,
+              glyphMargin: false,
               wordWrap: autoWrap,
               autoDetectHighContrast: true,
               selectOnLineNumbers: true,
               fixedOverflowWidgets: true,
               autoClosingDelete: 'always',
               lineNumbers,
-              minimap: { enabled: false },
+              minimap: { enabled: enableMiniMap },
               scrollbar: {
                 // Subtle shadows to the left & top. Defaults to true.
                 useShadows: false,
@@ -257,7 +253,7 @@ const CodeShow = (props: CodeShowFormProps) => {
               ...options
             }}
             onMount={editorDidMount}
-            theme={convertCodeEditTheme()}
+            theme={convertCodeEditTheme(editorInstance?.current)}
           />
         </Col>
         {showFloatButton && (
@@ -270,4 +266,4 @@ const CodeShow = (props: CodeShowFormProps) => {
   );
 };
 
-export default CodeShow;
+export default memo(CodeShow);
diff --git a/...tomEditor/languages/flinksql/constants.ts → ...nents/CustomEditor/languages/constants.ts b/...tomEditor/languages/flinksql/constants.ts → ...nents/CustomEditor/languages/constants.ts
@@ -46,3 +46,8 @@ export const TokenClassConsts = {
   VARIABLE: 'variable',
   WHITE: 'white'
 };
+
+export enum CustomEditorLanguage {
+  JavaLog = 'javalog',
+  FlinkSQL = 'flinksql'
+}