From 7c7e99d8e3da84a34f2e6fd4043555a0f1b33f5d Mon Sep 17 00:00:00 2001 From: MrWangJustToDo <2711470541@qq.com> Date: Tue, 3 Sep 2024 11:45:58 +0800 Subject: [PATCH] fix vue --- packages/core/package.json | 6 +++--- packages/file/package.json | 3 ++- packages/react/package.json | 1 + packages/vue/package.json | 3 ++- .../components/DiffSplitExtendLineNormal.tsx | 16 +++++++++++--- .../components/DiffSplitHunkLineNormal.tsx | 2 ++ .../components/DiffSplitWidgetLineNormal.tsx | 16 +++++++++++--- packages/vue/src/hooks/useSyncHeight.ts | 21 ++++++++++++------- pnpm-lock.yaml | 16 ++++++++++---- 9 files changed, 62 insertions(+), 22 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index badec6c..11c88b2 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -54,10 +54,10 @@ "dependencies": { "@git-diff-view/lowlight": "^0.0.16", "highlight.js": "^11.9.0", - "lowlight": "^3.1.0" + "lowlight": "^3.1.0", + "fast-diff": "^1.3.0" }, "devDependencies": { - "@types/hast": "^3.0.0", - "fast-diff": "^1.3.0" + "@types/hast": "^3.0.0" } } diff --git a/packages/file/package.json b/packages/file/package.json index b207d04..cbb1640 100644 --- a/packages/file/package.json +++ b/packages/file/package.json @@ -55,7 +55,8 @@ "@git-diff-view/core": "^0.0.16", "diff": "^5.2.0", "highlight.js": "^11.9.0", - "lowlight": "^3.1.0" + "lowlight": "^3.1.0", + "fast-diff": "^1.3.0" }, "devDependencies": { "@types/diff": "^5.2.2", diff --git a/packages/react/package.json b/packages/react/package.json index a79be79..e015b0d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -64,6 +64,7 @@ "@types/hast": "^3.0.0", "highlight.js": "^11.9.0", "lowlight": "^3.1.0", + "fast-diff": "^1.3.0", "reactivity-store": "^0.3.5", "use-sync-external-store": "^1.2.2" }, diff --git a/packages/vue/package.json b/packages/vue/package.json index 20322e4..6f0a75f 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -52,7 +52,8 @@ "@git-diff-view/core": "^0.0.16", "@types/hast": "^3.0.0", "highlight.js": "^11.9.0", - "lowlight": "^3.1.0" + "lowlight": "^3.1.0", + "fast-diff": "^1.3.0" }, "devDependencies": { "@rollup/plugin-typescript": "^11.1.6", diff --git a/packages/vue/src/components/DiffSplitExtendLineNormal.tsx b/packages/vue/src/components/DiffSplitExtendLineNormal.tsx index 59af87f..ec2731a 100644 --- a/packages/vue/src/components/DiffSplitExtendLineNormal.tsx +++ b/packages/vue/src/components/DiffSplitExtendLineNormal.tsx @@ -18,7 +18,9 @@ export const DiffSplitExtendLine = defineComponent( const currentSide = computed(() => SplitSide[props.side]); - const lineSelector = computed(() => `tr[data-line="${props.lineNumber}-extend"]`); + const lineSelector = computed(() => `div[data-line="${props.lineNumber}-extend-content"]`); + + const lineWrapperSelector = computed(() => `tr[data-line="${props.lineNumber}-extend"]`); const wrapperSelector = computed(() => props.side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper" @@ -68,6 +70,7 @@ export const DiffSplitExtendLine = defineComponent( useSyncHeight({ selector: lineSelector, + wrapper: lineWrapperSelector, side: currentSide, enable: currentIsShow, }); @@ -89,7 +92,12 @@ export const DiffSplitExtendLine = defineComponent( > {currentExtend.value ? ( -
+
{width.value > 0 && slots.extend?.({ diffFile: props.diffFile, @@ -106,7 +114,9 @@ export const DiffSplitExtendLine = defineComponent( style={{ backgroundColor: `var(${emptyBGName})` }} colspan={2} > -   +
+   +
)} diff --git a/packages/vue/src/components/DiffSplitHunkLineNormal.tsx b/packages/vue/src/components/DiffSplitHunkLineNormal.tsx index db9f4cd..9229cf7 100644 --- a/packages/vue/src/components/DiffSplitHunkLineNormal.tsx +++ b/packages/vue/src/components/DiffSplitHunkLineNormal.tsx @@ -68,6 +68,7 @@ const DiffSplitHunkLineGitHub = defineComponent( useSyncHeight({ selector: lineSelector, + wrapper: lineSelector, side: currentSyncHeightSide, enable: currentEnableSyncHeight, }); @@ -211,6 +212,7 @@ const DiffSplitHunkLineGitLab = defineComponent( useSyncHeight({ selector: lineSelector, + wrapper: lineSelector, side: currentSyncHeightSide, enable: currentEnableSyncHeight, }); diff --git a/packages/vue/src/components/DiffSplitWidgetLineNormal.tsx b/packages/vue/src/components/DiffSplitWidgetLineNormal.tsx index 1ae3713..177a948 100644 --- a/packages/vue/src/components/DiffSplitWidgetLineNormal.tsx +++ b/packages/vue/src/components/DiffSplitWidgetLineNormal.tsx @@ -44,7 +44,9 @@ export const DiffSplitWidgetLine = defineComponent( const currentLine = computed(() => (props.side === SplitSide.old ? oldLine.value : newLine.value)); - const lineSelector = computed(() => `tr[data-line="${props.lineNumber}-widget"]`); + const lineSelector = computed(() => `div[data-line="${props.lineNumber}-widget-content"]`); + + const lineWrapperSelector = computed(() => `tr[data-line="${props.lineNumber}-widget"]`); const wrapperSelector = computed(() => props.side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper" @@ -64,6 +66,7 @@ export const DiffSplitWidgetLine = defineComponent( useSyncHeight({ selector: lineSelector, + wrapper: lineWrapperSelector, side: observeSide, enable: currentIsShow, }); @@ -85,7 +88,12 @@ export const DiffSplitWidgetLine = defineComponent( > {currentWidget.value ? ( -
+
{width.value > 0 && slots.widget?.({ diffFile: props.diffFile, @@ -101,7 +109,9 @@ export const DiffSplitWidgetLine = defineComponent( style={{ backgroundColor: `var(${emptyBGName})` }} colspan={2} > -   +
+   +
)} diff --git a/packages/vue/src/hooks/useSyncHeight.ts b/packages/vue/src/hooks/useSyncHeight.ts index 3d380cb..057eae6 100644 --- a/packages/vue/src/hooks/useSyncHeight.ts +++ b/packages/vue/src/hooks/useSyncHeight.ts @@ -7,10 +7,12 @@ import { useIsMounted } from "./useIsMounted"; // TODO export const useSyncHeight = ({ selector, + wrapper, side, enable, }: { selector: Ref; + wrapper: Ref; side: Ref; enable: Ref; }) => { @@ -26,10 +28,15 @@ export const useSyncHeight = ({ const elements = Array.from(container?.querySelectorAll(selector.value)); - if (elements.length === 2) { + const wrappers = Array.from(container?.querySelectorAll(wrapper?.value) || []); + + if (elements.length === 2 && wrappers.length === 2) { const ele1 = elements[0] as HTMLElement; const ele2 = elements[1] as HTMLElement; + const wrapper1 = wrappers[0] as HTMLElement; + const wrapper2 = wrappers[1] as HTMLElement; + const target = ele1.getAttribute("data-side") === side.value ? ele1 : ele2; const cb = () => { @@ -39,13 +46,13 @@ export const useSyncHeight = ({ const rect2 = ele2.getBoundingClientRect(); if (rect1.height !== rect2.height) { const maxHeight = Math.max(rect1.height, rect2.height); - ele1.style.height = maxHeight + "px"; - ele2.style.height = maxHeight + "px"; - ele1.setAttribute("data-sync-height", String(maxHeight)); - ele2.setAttribute("data-sync-height", String(maxHeight)); + wrapper1.style.height = maxHeight + "px"; + wrapper2.style.height = maxHeight + "px"; + wrapper1.setAttribute("data-sync-height", String(maxHeight)); + wrapper2.setAttribute("data-sync-height", String(maxHeight)); } else { - ele1.removeAttribute("data-sync-height"); - ele2.removeAttribute("data-sync-height"); + wrapper1.removeAttribute("data-sync-height"); + wrapper2.removeAttribute("data-sync-height"); } }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20ba2bc..de4058e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -83,6 +83,9 @@ importers: '@git-diff-view/lowlight': specifier: ^0.0.16 version: link:../lowlight + fast-diff: + specifier: ^1.3.0 + version: 1.3.0 highlight.js: specifier: ^11.9.0 version: 11.9.0 @@ -93,9 +96,6 @@ importers: '@types/hast': specifier: ^3.0.0 version: 3.0.4 - fast-diff: - specifier: ^1.3.0 - version: 1.3.0 packages/file: dependencies: @@ -105,6 +105,9 @@ importers: diff: specifier: ^5.2.0 version: 5.2.0 + fast-diff: + specifier: ^1.3.0 + version: 1.3.0 highlight.js: specifier: ^11.9.0 version: 11.9.0 @@ -139,6 +142,9 @@ importers: '@types/hast': specifier: ^3.0.0 version: 3.0.4 + fast-diff: + specifier: ^1.3.0 + version: 1.3.0 highlight.js: specifier: ^11.9.0 version: 11.9.0 @@ -188,6 +194,9 @@ importers: '@types/hast': specifier: ^3.0.0 version: 3.0.4 + fast-diff: + specifier: ^1.3.0 + version: 1.3.0 highlight.js: specifier: ^11.9.0 version: 11.9.0 @@ -3716,7 +3725,6 @@ packages: /fast-diff@1.3.0: resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} - dev: true /fast-glob@3.3.2: resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}