feat: 增加行居中

winjo · winjo · commit bfe44d89619b · 2021-03-10T17:43:00.000+08:00
diff --git a/packages/alex/src/core/editor/editor.module.ts b/packages/alex/src/core/editor/editor.module.ts
@@ -267,17 +267,34 @@ class EditorSpecialContribution
         }
       })
     );
+
+    this.addDispose(
+      this.editorService.onActiveResourceChange((resource) => {
+        if (!resource) return;
+        const documentModel = select((props) => props.documentModel);
+        let rootPath = '';
+        if (isCodeDocumentModel(documentModel)) {
+          rootPath = path.join(this.appConfig.workspaceDir, documentModel.ref);
+        } else {
+          rootPath = this.appConfig.workspaceDir;
+        }
+        const relativePath = path.relative(rootPath, resource.uri.codeUri.path);
+        select((props) => props.documentModel.onFilepathChange)?.(relativePath);
+      })
+    );
   }
 
-  private openEditor(relativePath: string) {
+  private openEditor(relativePath?: string) {
     if (!relativePath) return;
     const uri = URI.file(path.join(this.appConfig.workspaceDir, relativePath));
     this.editorService.open(uri, {
       preview: true,
+      // 始终只显示一个，目前切换编码，preview 会消失，可能得在 kaitian 中修复下
+      replace: true,
     });
   }
 
-  private openCodeEditor(ref: string, filepath: string) {
+  private openCodeEditor(ref?: string, filepath?: string) {
     if (!ref || !filepath) return;
     return this.openEditor(`${encodeURIComponent(ref)}/${filepath}`);
   }
@@ -340,7 +357,12 @@ class EditorSpecialContribution
               },
             },
           ]);
+          // 延迟高亮，否则不居中
+          setTimeout(() => {
+            editor.monacoEditor.revealLineInCenter(Number(lineNumber));
+          }, 0);
         };
+
         disposer.addDispose(
           editor.monacoEditor.onMouseDown((event) => {
             const type = event?.target?.type;
@@ -357,10 +379,16 @@ class EditorSpecialContribution
             }
           })
         );
-        const initialLineNumber = select((props) => props.documentModel.lineNumber);
-        if (initialLineNumber) {
-          highlightLine(initialLineNumber);
-        }
+
+        disposer.addDispose(
+          editor.monacoEditor.onDidChangeModel(() => {
+            const initialLineNumber = select((props) => props.documentModel.lineNumber);
+            if (initialLineNumber) {
+              highlightLine(initialLineNumber);
+            }
+          })
+        );
+
         disposer.addDispose(
           onSelect((props) => props.documentModel.lineNumber)((newLineNumber) => {
             if (newLineNumber) {
diff --git a/packages/alex/src/core/editor/types.ts b/packages/alex/src/core/editor/types.ts
@@ -1,10 +1,31 @@
 import { Thenable } from '../types';
 
 export interface DocumentModel {
-  filepath: string;
+  /**
+   * 打开的文件路径
+   */
+  filepath?: string;
+  /**
+   * 文件路径变化事件，类型跳转时会从内部打开文件
+   */
+  onFilepathChange?: (filepath: string) => void;
+  /**
+   * 文件读取接口
+   * @param {string} filepath 文件路径
+   * @returns 文件数据
+   */
   readFile(filepath: string): Uint8Array | Thenable<Uint8Array>;
+  /**
+   * 文件编码
+   */
   encoding?: 'gbk' | 'utf8';
+  /**
+   * 展示文件行号
+   */
   lineNumber?: number;
+  /**
+   * 行号变更事件
+   */
   onLineNumberChange?: (num: number) => void;
 }
 
@@ -13,9 +34,21 @@ export interface FSDocumentModel extends DocumentModel {
 }
 
 export interface CodeDocumentModel extends DocumentModel {
+  /**
+   * 文档类型，code 代码平台仓库类型
+   */
   type: 'code';
+  /**
+   * tag or branch or commit
+   */
   ref: string;
+  /**
+   * 仓库 group 或用户
+   */
   owner: string;
+  /**
+   * 仓库名
+   */
   name: string;
 }
 
diff --git a/packages/alex/src/integration/editor/index.tsx b/packages/alex/src/integration/editor/index.tsx
@@ -24,6 +24,12 @@ const App = () => {
   const [encoding, setEncoding] = useState<'utf8' | 'gbk' | undefined>('utf8');
   const [lineNumber, setLineNumber] = useState<number | undefined>();
 
+  const setContent = () => {
+    setRef('3977cf5ccb607beedce3824f6686fa97e2244506');
+    setFilePath('src/main/java/com/alipay/languagebase/service/lsif/impl/CommitServiceImpl.java');
+    setLineNumber(30);
+  };
+
   const readFile = async (filepath: string) => {
     const res = await fetch(
       `/code-test/api/v3/projects/${project}/repository/blobs/${encodeURIComponent(
@@ -39,14 +45,11 @@ const App = () => {
   return (
     <div style={{ width: '100%', height: '100%', padding: 8 }}>
       <div style={{ display: 'flex', marginBottom: 8 }}>
-        <Button size="small" onClick={() => setKey((k) => k + 1)} style={{ marginRight: 8 }}>
-          重置
-        </Button>
         <Select
           value={ref || undefined}
           onChange={setRef}
           size="small"
-          style={{ width: 200, marginRight: 8 }}
+          style={{ width: 400, marginRight: 8 }}
           placeholder="选择分支"
         >
           {['3977cf5ccb607beedce3824f6686fa97e2244506'].map((path) => (
@@ -59,17 +62,26 @@ const App = () => {
           value={filepath || undefined}
           onChange={setFilePath}
           size="small"
-          style={{ width: 300, marginRight: 8 }}
+          style={{ width: 600, marginRight: 8 }}
           placeholder="选择文件"
         >
-          {['src/main/java/com/alipay/languagebase/service/lsif/impl/CommitServiceImpl.java'].map(
-            (path) => (
-              <Select.Option key={path} value={path}>
-                {path}
-              </Select.Option>
-            )
-          )}
+          {[
+            'src/main/java/com/alipay/languagebase/service/lsif/impl/CommitServiceImpl.java',
+            'src/main/java/com/alipay/languagebase/service/lsif/CommitService.java',
+          ].map((path) => (
+            <Select.Option key={path} value={path}>
+              {path}
+            </Select.Option>
+          ))}
         </Select>
+      </div>
+      <div style={{ display: 'flex', marginBottom: 8 }}>
+        <Button size="small" onClick={() => setKey((k) => k + 1)} style={{ marginRight: 8 }}>
+          重置
+        </Button>
+        <Button size="small" onClick={() => setContent()} style={{ marginRight: 8 }}>
+          一键设置文件
+        </Button>
         <Select
           value={encoding}
           onChange={setEncoding}
@@ -90,9 +102,9 @@ const App = () => {
           style={{ width: 120, marginRight: 8 }}
           placeholder="更改选中行"
         >
-          {['10', '20', '30'].map((encoding) => (
-            <Select.Option key={encoding} value={encoding}>
-              {encoding}
+          {[10, 30, 100].map((line) => (
+            <Select.Option key={line} value={line}>
+              {line}
             </Select.Option>
           ))}
         </Select>
@@ -138,6 +150,13 @@ const App = () => {
               owner,
               name,
               filepath,
+              onFilepathChange(newFilepath) {
+                setFilePath(newFilepath);
+                // 切换文件时行号清楚掉
+                if (newFilepath !== filepath) {
+                  setLineNumber(undefined);
+                }
+              },
               readFile,
               encoding,
               lineNumber,
diff --git a/scripts/bundle.js b/scripts/bundle.js
@@ -26,6 +26,14 @@ export * from "../lib";
     `.trim() + '\n'
     );
 
+    // editor 类型文件
+    await fse.writeFile(
+      path.join(targetDir, 'alex.editor.d.ts'),
+      `
+export * from "../lib/editor";
+    `.trim() + '\n'
+    );
+
     signale.success('打包成功');
   } catch (err) {
     console.error(err);
