feat: 关联高亮注入

yaklang · Aug 28, 2024 · decf86a · decf86a
1 parent 197f578
commit decf86a
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/app/renderer/src/main/src/components/yakitUI/YakitEditor/StaticYakitEditor.scss b/app/renderer/src/main/src/components/yakitUI/YakitEditor/StaticYakitEditor.scss
@@ -84,6 +84,11 @@
         background-color: #c6ebd9;
         z-index: -1;
     }
+    .hight-light-find-default-bg-color {
+        background: rgba(134, 144, 153, 0.5);
+        // border: 1px solid rgba(95, 102, 109,0.3);
+        z-index: -1;
+    }
     .hight-light-yak-runner-color {
         background-color: rgba(255, 182, 96, 0.5);
         z-index: -1;

diff --git a/app/renderer/src/main/src/components/yakitUI/YakitEditor/YakitEditor.tsx b/app/renderer/src/main/src/components/yakitUI/YakitEditor/YakitEditor.tsx
@@ -141,7 +141,9 @@ export const YakitEditor: React.FC<YakitEditorProps> = React.memo((props) => {
         overLine = 3,
         editorId,
         highLightText = [],
-        highLightClass
+        highLightClass,
+        highLightFind = [],
+        highLightFindClass
     } = props
 
     const systemRef = useRef<YakitSystem>("Darwin")
@@ -730,6 +732,7 @@ export const YakitEditor: React.FC<YakitEditorProps> = React.memo((props) => {
 
     const deltaDecorationsRef = useRef<() => any>()
     const highLightTextFun = useMemoizedFn(() => highLightText)
+    const highLightFindFun = useMemoizedFn(() => highLightFind)
     useEffect(() => {
         if (!editor) {
             return
@@ -933,6 +936,30 @@ export const YakitEditor: React.FC<YakitEditorProps> = React.memo((props) => {
                         }
                     } as IModelDecoration)
                 })
+
+                highLightFindFun().forEach((item) => {
+                    const {startLineNumber, startColumn, endLineNumber, endColumn} = item
+
+                    // 创建装饰选项
+                    dec.push({
+                        id:
+                            "hight-light-find_" +
+                            startLineNumber +
+                            "_" +
+                            startColumn +
+                            "_" +
+                            endLineNumber +
+                            "_" +
+                            endColumn,
+                        ownerId: 3,
+                        range: new monaco.Range(startLineNumber, startColumn, endLineNumber, endColumn),
+                        options: {
+                            isWholeLine: false,
+                            className: highLightFindClass ? highLightFindClass : "hight-light-find-default-bg-color",
+                            hoverMessage: [{value: "", isTrusted: true}]
+                        }
+                    } as IModelDecoration)
+                })
             })()
 
             return dec
@@ -942,12 +969,6 @@ export const YakitEditor: React.FC<YakitEditorProps> = React.memo((props) => {
             current = model.deltaDecorations(current, generateDecorations())
         }
 
-        editor.onMouseDown((e)=>{
-            // const dec: YakitIModelDecoration[] = []
-            // // back
-            // dec.push(generateDecorations())
-            // current = model.deltaDecorations(current, dec)
-        })
 
         editor.onDidChangeModelContent(() => {
             current = model.deltaDecorations(current, generateDecorations())
@@ -964,7 +985,7 @@ export const YakitEditor: React.FC<YakitEditorProps> = React.memo((props) => {
         if (deltaDecorationsRef.current) {
             deltaDecorationsRef.current()
         }
-    }, [JSON.stringify(highLightText)])
+    }, [JSON.stringify(highLightText),JSON.stringify(highLightFind)])
 
     /** 右键菜单-重渲染换行符功能是否显示的开关文字内容 */
     useEffect(() => {

diff --git a/app/renderer/src/main/src/components/yakitUI/YakitEditor/YakitEditorType.ts b/app/renderer/src/main/src/components/yakitUI/YakitEditor/YakitEditorType.ts
@@ -74,8 +74,12 @@ export interface YakitEditorProps {
     /** @name 配置项-(存在此项则将字体/换行交由emiter更新) */
     editorId?: string
 
+    /** @name 配置项-高亮显示配置 */
     highLightText?: HighLightText[] | Selection[]
     highLightClass?: string
+    /** @name 配置项-关联高亮显示配置 */
+    highLightFind?: Selection[]
+    highLightFindClass?: string
 }
 
 /**

diff --git a/app/renderer/src/main/src/pages/YakRunner/RunnerTabs/RunnerTabs.tsx b/app/renderer/src/main/src/pages/YakRunner/RunnerTabs/RunnerTabs.tsx
@@ -148,7 +148,7 @@ export const RunnerTabs: React.FC<RunnerTabsProps> = memo((props) => {
             let params: RunYakParamsProps = {
                 Script: newActiveFile.code,
                 WorkDir: newActiveFile.parent || "",
-                ScriptPath: newActiveFile.path,
+                ScriptPath: newActiveFile.path
             }
             ipcRenderer.invoke("exec-yak", params)
         }
@@ -948,7 +948,7 @@ const RunnerTabPane: React.FC<RunnerTabPaneProps> = memo((props) => {
     const [reqEditor, setReqEditor] = useState<IMonacoEditor>()
     // 是否允许展示二进制
     const [allowBinary, setAllowBinary] = useState<boolean>(false)
-    
+
     const nowPathRef = useRef<string>()
     useEffect(() => {
         areaInfo.forEach((item) => {
@@ -1044,6 +1044,7 @@ const RunnerTabPane: React.FC<RunnerTabPaneProps> = memo((props) => {
         }
     ).run
 
+    const [highLightFind, setHighLightFind] = useState<Selection[]>([])
     // 获取编辑器中关联字符
     const getOtherRangeByPosition = useDebounceFn(
         async (position: Position) => {
@@ -1055,7 +1056,8 @@ const RunnerTabPane: React.FC<RunnerTabPaneProps> = memo((props) => {
             console.log("getOtherRangeByPosition---", {
                 InspectType: "reference",
                 YakScriptType: type,
-                YakScriptCode: model.getValue(),
+                YakScriptCode: "",
+                ModelID: model.id,
                 Range: {
                     Code: iWord.word,
                     StartLine: position.lineNumber,
@@ -1071,7 +1073,8 @@ const RunnerTabPane: React.FC<RunnerTabPaneProps> = memo((props) => {
                 .invoke("YaklangLanguageFind", {
                     InspectType: "reference",
                     YakScriptType: type,
-                    YakScriptCode: model.getValue(),
+                    YakScriptCode: "",
+                    ModelID: model.id,
                     Range: {
                         Code: iWord.word,
                         StartLine: position.lineNumber,
@@ -1083,7 +1086,17 @@ const RunnerTabPane: React.FC<RunnerTabPaneProps> = memo((props) => {
                     FileName: editorInfo.path
                 } as YaklangLanguageSuggestionRequest)
                 .then((r: YaklangLanguageFindResponse) => {
-                    console.log("rrr", r)
+                    const newFind = r.Ranges.map(({StartColumn, StartLine, EndColumn, EndLine}) => ({
+                        startLineNumber: Number(StartLine),
+                        startColumn: Number(StartColumn),
+                        endLineNumber: Number(EndLine),
+                        endColumn: Number(EndColumn)
+                    }))
+                    console.log("rrr", r, newFind)
+                    setHighLightFind(newFind)
+                }).catch((err)=>{
+                    console.log("err",err);
+                    setHighLightFind([])
                 })
         },
         {
@@ -1243,6 +1256,7 @@ const RunnerTabPane: React.FC<RunnerTabPaneProps> = memo((props) => {
                     }}
                     highLightText={editorInfo?.highLightRange ? [editorInfo?.highLightRange] : undefined}
                     highLightClass='hight-light-yak-runner-color'
+                    highLightFind={highLightFind}
                 />
             )}
         </div>