From e8e19f417a6983af5a0503ba33ea772656d435dc Mon Sep 17 00:00:00 2001
From: Shimada666 <649940882@qq.com>
Date: Sun, 14 Nov 2021 01:06:14 +0800
Subject: [PATCH] build: v0.3.5, support sync scroll when outputFormat is
 side-by-side

---
 .npmrc                             |  2 +-
 package.json                       |  2 +-
 src/App.vue                        |  1 +
 src/lib/v-code-diff/util.ts        | 20 ++++++++++++++++++++
 src/lib/v-code-diff/v-code-diff.ts | 14 ++++++++++++--
 5 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/.npmrc b/.npmrc
index 1e23fdf..38f11c6 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1 @@
-registry=http://registry.npmjs.org
+registry=https://registry.npmjs.org
diff --git a/package.json b/package.json
index ee56e61..74576a5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "v-code-diff",
   "description": "A diff plugin of vue, support vue2 and vue3",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "scripts": {
     "dev": "vite",
     "build": "npx rimraf dist && rollup --config rollup.config.js",
diff --git a/src/App.vue b/src/App.vue
index 04e6108..fad8ce6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,6 +47,7 @@
     </a-form-item>
   </a-form>
   <code-diff
+    :highlight="true"
     :old-string="oldString"
     :new-string="newString"
     :context="formState.context"
diff --git a/src/lib/v-code-diff/util.ts b/src/lib/v-code-diff/util.ts
index 2fc542c..bf2be04 100644
--- a/src/lib/v-code-diff/util.ts
+++ b/src/lib/v-code-diff/util.ts
@@ -71,3 +71,23 @@ export async function highlightElements (element: Element, props, ctx: SetupCont
   await Promise.all(promises)
   ctx.emit('after-render')
 }
+
+export function syncScroll (selector) {
+  let active: HTMLElement = document.createElement('div')
+  document.querySelectorAll(selector).forEach(function (element) {
+    element.addEventListener('mouseenter', function (e) {
+      active = e.target
+    })
+
+    element.addEventListener('scroll', function (e) {
+      if (e.target !== active) return
+
+      document.querySelectorAll(selector).forEach(function (target) {
+        if (active === target) return
+
+        target.scrollTop = active.scrollTop
+        target.scrollLeft = active.scrollLeft
+      })
+    })
+  })
+}
diff --git a/src/lib/v-code-diff/v-code-diff.ts b/src/lib/v-code-diff/v-code-diff.ts
index 3a57f34..ad948f8 100644
--- a/src/lib/v-code-diff/v-code-diff.ts
+++ b/src/lib/v-code-diff/v-code-diff.ts
@@ -1,5 +1,5 @@
-import { defineComponent, isVue3, PropType, h, ref, watch } from 'vue-demi'
-import { createHtml, highlightElements, useDebounceFn } from '@/lib/v-code-diff/util'
+import { defineComponent, isVue3, PropType, h, ref, watch, onUpdated, onMounted } from 'vue-demi'
+import { createHtml, highlightElements, syncScroll, useDebounceFn } from '@/lib/v-code-diff/util'
 import './styles'
 
 export default defineComponent({
@@ -63,6 +63,16 @@ export default defineComponent({
       }
     }, 200)
     watch(props, cb, { deep: true, immediate: true })
+    onMounted(() => {
+      if (props.outputFormat === 'side-by-side') {
+        syncScroll('.d2h-file-side-diff')
+      }
+    })
+    onUpdated(() => {
+      if (props.outputFormat === 'side-by-side') {
+        syncScroll('.d2h-file-side-diff')
+      }
+    })
     return {
       html
     }