Merge pull request #13 from hoiheart/develop

Add folding view

Author: hoiheart

README.md

@@ -36,6 +36,7 @@ Here is the <a href="https://hoiheart.github.io/vue-diff/demo/index.html" target
 * Support multiple languages and can be extended
 * Support two themes (dark / light) and can be customized
 * Virtual scroll for large text comparison
+* Folding view (*Partial folding is not supported*)
 
 ## Install plugin
 
@@ -93,6 +94,7 @@ Insert the diff component with props.
     :language="language"
     :prev="prev"
     :current="current"
+    :folding="folding"
     :input-delay="0"
     :virtual-scroll="{ height: 500, lineMinHeight: 24, delay: 100 }"
   />
@@ -108,6 +110,7 @@ Insert the diff component with props.
 | language | `string` | `plaintext` |  | See <a href="#extend-languages">Extend languages</a>
 | prev | `string` | `''` |  | Prev code |
 | current | `string` | `''` |  | Current Code |
+| folding | `boolean` | `false` |  | Folding not different |
 | inputDelay | `number` | `0` |  | Setting up rendering debounce for changes for performance benefit (mode, prev, curr) |
 | virtualScroll | `boolean\|object` | `false` |  | *Default value when setting true :*<br>`{ height: 500, lineMinHeight: 24, delay: 100 }`<br>See <a href="#virtual-scroll">virtual scroll</a> |
 

dev/App.vue

@@ -12,6 +12,8 @@
     <select v-model="theme" id="theme" class="bg-gray-900 w-40 py-1 px-3 mr-4 rounded border border-gray-500 text-gray-300">
       <option :key="val" v-for="val in themes">{{ val }}</option>
     </select>
+    <label for="folding" class="mr-2">Folding:</label>
+    <input v-model="folding" type="checkbox" id="folding" class="form-checkbox" />
   </div>
   <div class="editor text-gray-100 mt-8">
     <section>
@@ -38,6 +40,7 @@
         :language="selected.language"
         :prev="prev"
         :current="current"
+        :folding="folding"
         :input-delay="selected.inputDelay"
         :virtual-scroll="selected.virtualScroll"
       />
@@ -57,6 +60,7 @@ export default defineComponent({
     const selected = ref<null|{}>(null)
     const themes = ref(['dark', 'light', 'custom'])
     const theme = ref('dark')
+    const folding = ref(false)
     const list = ref([
       {
         key: 'javascript',
@@ -117,6 +121,7 @@ export default defineComponent({
       mode,
       themes,
       theme,
+      folding,
       list,
       selected,
       prev,

src/Diff.vue

@@ -13,9 +13,10 @@
         :style="{ minHeight }"
       >
         <Line
-          v-for="(data, index) in visible"
+          v-for="(data, index) in list"
           :key="index"
           :mode="mode"
+          :folding="folding"
           :language="language"
           :meta="meta[data.index]"
           :render="render[data.index]"
@@ -60,6 +61,10 @@ export default defineComponent({
       type: String,
       default: ''
     },
+    folding: {
+      type: Boolean,
+      default: false
+    },
     inputDelay: {
       type: Number,
       default: 0
@@ -80,7 +85,7 @@ export default defineComponent({
         ...(typeof props.virtualScroll === 'object' ? toRaw(props.virtualScroll) : {})
       }
     })
-    const { meta, render, visible } = useRender(props, viewer, scrollOptions)
+    const { meta, render, list } = useRender(props, viewer, scrollOptions)
     const { minHeight } = useVirtualScroll(props, viewer, scrollOptions, meta)
 
     const setLineHeight = (index: number, height: number) => {
@@ -90,13 +95,13 @@ export default defineComponent({
     }
 
     return {
+      list,
       meta,
       minHeight,
       render,
       scrollOptions,
       setLineHeight,
-      viewer,
-      visible
+      viewer
     }
   }
 })

src/Line.vue

@@ -7,34 +7,46 @@
     <!-- split view -->
     <template v-if="mode === 'split'">
       <template :key="index" v-for="(line, index) in render">
-        <div class="lineNum" :class="`vue-diff-cell-${line.type}`">
-          {{ line.lineNum }}
+        <template v-if="isFoldLine">
+          <div class="lineNum vue-diff-cell-fold"></div>
+          <div class="code vue-diff-cell-fold"></div>
+        </template>
+        <template v-else>
+          <div class="lineNum" :class="`vue-diff-cell-${line.type}`">
+            {{ line.lineNum }}
+          </div>
+          <div class="code" :class="`vue-diff-cell-${line.type}`">
+            <Code
+              :language="language"
+              :code="setCode(line, render, index)"
+              :scrollOptions="scrollOptions"
+              @rendered="rendered"
+            />
+          </div>
+        </template>
+      </template>
+    </template>
+    <!-- // split view -->
+    <!-- unified view -->
+    <template v-if="mode === 'unified'">
+      <template v-if="isFoldLine">
+        <div class="lineNum vue-diff-cell-fold"></div>
+        <div class="code vue-diff-cell-fold"></div>
+      </template>
+      <template v-else>
+        <div class="lineNum" :class="`vue-diff-cell-${render[0].type}`">
+          {{ render[0].lineNum }}
         </div>
-        <div class="code" :class="`vue-diff-cell-${line.type}`">
+        <div class="code" :class="`vue-diff-cell-${render[0].type}`">
           <Code
             :language="language"
-            :code="setCode(line, render, index)"
+            :code="setCode(render[0])"
             :scrollOptions="scrollOptions"
             @rendered="rendered"
           />
         </div>
       </template>
     </template>
-    <!-- // split view -->
-    <!-- unified view -->
-    <template v-if="mode === 'unified'">
-      <div class="lineNum" :class="`vue-diff-cell-${render[0].type}`">
-        {{ render[0].lineNum }}
-      </div>
-      <div class="code" :class="`vue-diff-cell-${render[0].type}`">
-        <Code
-          :language="language"
-          :code="setCode(render[0])"
-          :scrollOptions="scrollOptions"
-          @rendered="rendered"
-        />
-      </div>
-    </template>
     <!-- // unified view -->
   </div>
 </template>
@@ -57,6 +69,10 @@ export default defineComponent({
       type: String as PropType<Mode>,
       required: true
     },
+    folding: {
+      type: Boolean,
+      default: false
+    },
     language: {
       type: String,
       required: true
@@ -86,6 +102,7 @@ export default defineComponent({
         minHeight: props.scrollOptions.lineMinHeight + 'px'
       }
     })
+    const isFoldLine = computed(() => props.folding && props.render[0].type === 'equal')
 
     const setCode = (line: Line, render?: Lines, index?: number) => {
       if (!line.value) return '\n'
@@ -114,7 +131,7 @@ export default defineComponent({
       }, props.scrollOptions.delay))
     }
 
-    return { line, rendered, rowStyle, setCode }
+    return { line, isFoldLine, rendered, rowStyle, setCode }
   }
 })
 </script>

src/hooks.ts

@@ -11,14 +11,17 @@ interface Props {
   language: string;
   prev: string;
   current: string;
+  folding: boolean;
   inputDelay: number;
   virtualScroll: boolean|VirtualScroll;
 }
 
 export const useRender = (props: Props, viewer: Ref<null|HTMLElement>, scrollOptions: ComputedRef<false|VirtualScroll>) => {
   const render = ref<Array<Lines>>([])
   const meta = ref<Array<Meta>>([])
-  const visible = computed(() => meta.value.filter(item => item.visible))
+  const list = computed(() => meta.value.filter(item => {
+    return props.folding ? !item.foldable && item.visible : item.visible
+  }))
 
   const setRender = () => {
     const result = renderLines(props.mode, props.prev, props.current)
@@ -27,25 +30,29 @@ export const useRender = (props: Props, viewer: Ref<null|HTMLElement>, scrollOpt
 
     render.value.map((v, index: number) => {
       const item = meta.value[index]
+      const foldable = props.folding && v[0].type === 'equal' && render.value[index - 1]?.[0].type === 'equal'
+
+      const values = {
+        index,
+        foldable,
+        visible: true
+      }
 
       if (scrollOptions.value) {
         meta.value[index] = {
-          index,
+          ...values,
           visible: item?.visible || false,
           top: item?.top || undefined,
           height: item?.height || scrollOptions.value.lineMinHeight
         }
       } else {
-        meta.value[index] = {
-          index,
-          visible: true
-        }
+        meta.value[index] = { ...values }
       }
     })
   }
 
   debouncedWatch(
-    [() => props.mode, () => props.prev, () => props.current],
+    [() => props.mode, () => props.prev, () => props.current, () => props.folding],
     setRender,
     {
       debounce: props.inputDelay,
@@ -56,7 +63,7 @@ export const useRender = (props: Props, viewer: Ref<null|HTMLElement>, scrollOpt
   return {
     meta,
     render,
-    visible
+    list
   }
 }
 
@@ -65,7 +72,7 @@ export const useVirtualScroll = (props: Props, viewer: Ref<null|HTMLElement>, sc
     if (!scrollOptions.value) return undefined
     const reduce = meta.value.reduce((acc, curr) => {
       curr.top = acc
-      return acc + (curr.height as number)
+      return curr.foldable ? acc : acc + (curr.height as number)
     }, 0)
     return reduce + 'px'
   })
@@ -85,22 +92,22 @@ export const useVirtualScroll = (props: Props, viewer: Ref<null|HTMLElement>, sc
       }
 
       curr.top = acc
-      return acc + (curr.height as number)
+      return curr.foldable ? acc : acc + (curr.height as number)
     }, 0)
   }
 
+  debouncedWatch(
+    [() => props.mode, () => props.prev, () => props.current, () => props.folding],
+    () => nextTick(setMeta),
+    {
+      debounce: props.inputDelay,
+      immediate: true
+    }
+  )
+
   onMounted(() => {
     if (!scrollOptions.value) return
     viewer.value?.addEventListener('scroll', useThrottleFn(setMeta, scrollOptions.value.delay))
-
-    debouncedWatch(
-      [() => props.mode, () => props.prev, () => props.current],
-      () => nextTick(setMeta),
-      {
-        debounce: props.inputDelay,
-        immediate: true
-      }
-    )
   })
 
   onBeforeUnmount(() => {

src/style.scss

@@ -83,6 +83,26 @@
       background-color: rgba(128, 128, 128, 0.1);
     }
 
+    .vue-diff-cell-fold {
+      &.lineNum {
+        opacity: 0.8;
+        font-size: 0.8em;
+
+        &:before {
+          content: ">";
+        }
+      }
+      
+      &.code {
+        text-align: center;
+
+        &:before {
+          color: #999;
+          content: "⋯⋯";
+        }
+      }
+    }
+
     pre {
       display: block;
       position: relative;

src/types.ts

@@ -21,6 +21,7 @@ export type Diffs = Array<Diff>
 
 export interface Meta {
   index: number;
+  foldable: boolean;
   visible: boolean;
   top?: number;
   height?: number;