simple widget usage

MrWangJustToDo · Jan 17, 2024 · 0d2cb56 · 0d2cb56
1 parent f74b50d
commit 0d2cb56
Show file tree

Hide file tree

Showing 12 changed files with 290 additions and 33 deletions.
diff --git a/src/components/DiffAddWidget.tsx b/src/components/DiffAddWidget.tsx
@@ -1,10 +1,16 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { DiffFile } from "../diff";
+import { DiffFileExtends } from "../diff";
+import { SplitSide } from "./DiffSplitView";
 import { addWidgetBGName, addWidgetColorName } from "./color";
 
-// TODO
-//@ts-ignore
-export const DiffAddWidget = ({ diffFile }: { diffFile: DiffFile }) => {
+export const DiffSplitAddWidget = ({
+  diffFile,
+  side,
+  index,
+}: {
+  index: number;
+  diffFile: DiffFileExtends;
+  side: SplitSide;
+}) => {
   return (
     <div
       className="diff-add-widget-wrapper absolute left-[100%] top-[1px] translate-x-[-50%]"
@@ -21,6 +27,74 @@ export const DiffAddWidget = ({ diffFile }: { diffFile: DiffFile }) => {
           fontSize: `1.2em`,
           backgroundColor: `var(${addWidgetBGName})`,
         }}
+        onClick={() => {
+          diffFile.addSplitExtendLine(
+            index,
+            side === SplitSide.old ? "left" : "right",
+            <div className="border flex flex-col w-full">
+              <textarea className="w-full border min-h-[80px] p-[2px]" />
+              <div className="m-[5px] mt-[0.8em]">
+                <button
+                  className="border float-right px-[12px] py-[6px] rounded-[4px] sticky right-[10px]"
+                  onClick={() =>
+                    diffFile.removeSplitExtendLine(
+                      index,
+                      side === SplitSide.old ? "left" : "right"
+                    )
+                  }
+                >
+                  cancel
+                </button>
+              </div>
+            </div>
+          );
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+};
+
+export const DiffUnifiedAddWidget = ({
+  diffFile,
+  index,
+}: {
+  index: number;
+  diffFile: DiffFileExtends;
+}) => {
+  return (
+    <div
+      className="diff-add-widget-wrapper absolute left-[100%] top-[1px] translate-x-[-50%]"
+      style={{
+        width: "calc(var(--diff-font-size--) * 1.4)",
+        height: "calc(var(--diff-font-size--) * 1.4)",
+      }}
+    >
+      <button
+        className="diff-add-widget absolute overflow-hidden cursor-pointer rounded-md w-0 h-0 left-[0] top-[0] flex items-center justify-center transition-transform origin-center group-hover:w-full group-hover:h-full hover:scale-110"
+        style={{
+          color: `var(${addWidgetColorName})`,
+          zIndex: 1,
+          fontSize: `1.2em`,
+          backgroundColor: `var(${addWidgetBGName})`,
+        }}
+        onClick={() => {
+          diffFile.addUnifiedLine(
+            index,
+            <div className="border flex flex-col w-full px-[4px] py-[8px]">
+              <textarea className="w-full border min-h-[80px] p-[2px]" />
+              <div className="m-[5px] mt-[0.8em]">
+                <button
+                  className="border float-right px-[12px] py-[6px] rounded-[4px] sticky right-[10px]"
+                  onClick={() => diffFile.removeUnifiedExtendLine(index)}
+                >
+                  cancel
+                </button>
+              </div>
+            </div>
+          );
+        }}
       >
         +
       </button>

diff --git a/src/components/DiffSplitExtendLine.tsx b/src/components/DiffSplitExtendLine.tsx
@@ -0,0 +1,56 @@
+import { DiffFileExtends } from "../diff";
+import { useSyncHeight } from "../hooks/useSyncHeight";
+import { SplitSide } from "./DiffSplitView";
+import { emptyBGName } from "./color";
+
+export const DiffSplitExtendLine = ({
+  index,
+  diffFile,
+  isWrap,
+  side,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFileExtends;
+  lineNumber: number;
+  isWrap: boolean;
+  isHighlight: boolean;
+}) => {
+  const currentLeftExtend = diffFile.getSplitExtendLine(index, "left");
+
+  const currentRightExtend = diffFile.getSplitExtendLine(index, "right");
+
+  const currentIsShow = currentLeftExtend || currentRightExtend;
+
+  useSyncHeight({
+    selector: `tr[data-line="${lineNumber}-extend"]`,
+    side: side === SplitSide.old ? "left" : "right",
+    enable: !!currentIsShow,
+  });
+
+  if (!currentIsShow) return null;
+
+  const currentExtend =
+    side === SplitSide.old ? currentLeftExtend : currentRightExtend;
+
+  return (
+    <tr
+      data-line={`${lineNumber}-extend`}
+      data-state="hunk"
+      data-side={side === SplitSide.old ? "left" : "right"}
+      className="diff-line diff-line-extend"
+      style={{
+        backgroundColor: !currentExtend ? `var(${emptyBGName})` : undefined,
+      }}
+    >
+      <td
+        className="diff-line-extend-content"
+        style={{ position: isWrap ? "relative" : "sticky" }}
+        colSpan={2}
+      >
+        {currentExtend}
+      </td>
+    </tr>
+  );
+};
diff --git a/src/components/DiffSplitLine.tsx b/src/components/DiffSplitLine.tsx
@@ -1,7 +1,7 @@
-import { DiffFile } from "../diff";
+import { DiffFile, DiffFileExtends } from "../diff";
 import { DiffLineType } from "../diff/diff-line";
 import { useSyncHeight } from "../hooks/useSyncHeight";
-import { DiffAddWidget } from "./DiffAddWidget";
+import { DiffSplitAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
 import { SplitSide } from "./DiffSplitView";
 import {
@@ -96,7 +96,7 @@ export const DiffSplitLine = ({
             color: `var(${plainLineNumberColorName})`,
           }}
         >
-          {hasDiff && <DiffAddWidget diffFile={diffFile} />}
+          {hasDiff && <DiffSplitAddWidget index={index} side={side} diffFile={diffFile as DiffFileExtends} />}
           <span
             data-line-num={currentItem.lineNumber}
             style={{ opacity: hasChange ? undefined : 0.5 }}

diff --git a/src/components/DiffSplitView.tsx b/src/components/DiffSplitView.tsx
@@ -1,20 +1,20 @@
 import { Fragment, useEffect, useRef } from "react";
-import debounce from "lodash/debounce";
-import { DiffFile, numIterator } from "../diff";
+import { DiffFile, DiffFileExtends, numIterator } from "../diff";
 import { DiffSplitLine } from "./DiffSplitLine";
 import {
   DiffSplitExpandLastLine,
   DiffSplitHunkLine,
 } from "./DiffSplitHunkLine";
 import { useDiffViewContext } from "./DiffViewContext";
+import { DiffSplitExtendLine } from "./DiffSplitExtendLine";
 
 export enum SplitSide {
   old,
   new,
 }
 
 const syncScroll = (left: HTMLElement, right: HTMLElement) => {
-  const onScroll = debounce(function (event: Event) {
+  const onScroll = function (event: Event) {
     if (event === null || event.target === null) return;
     if (event.target === left) {
       right.scrollTop = left.scrollTop;
@@ -23,7 +23,7 @@ const syncScroll = (left: HTMLElement, right: HTMLElement) => {
       left.scrollTop = right.scrollTop;
       left.scrollLeft = right.scrollLeft;
     }
-  });
+  };
   if (!left.onscroll) {
     left.onscroll = onScroll;
   }
@@ -97,6 +97,14 @@ const DiffSplitViewTable = ({
               isHighlight={isHighlight}
               diffFile={diffFile}
             />
+            <DiffSplitExtendLine
+              index={index}
+              side={side}
+              isWrap={isWrap}
+              lineNumber={index + 1}
+              isHighlight={isHighlight}
+              diffFile={diffFile as DiffFileExtends}
+            />
           </Fragment>
         ))}
         {showExpandLast && (
@@ -131,7 +139,11 @@ export const DiffSplitView = ({ diffFile }: { diffFile: DiffFile }) => {
 
   return (
     <div className="split-diff-view w-full flex basis-[50%]">
-      <div className="old-diff-table-wrapper overflow-auto w-full" ref={ref1}>
+      <div
+        className="old-diff-table-wrapper overflow-auto w-full"
+        ref={ref1}
+        style={{ overscrollBehaviorX: "none" }}
+      >
         <DiffSplitViewTable
           side={SplitSide.old}
           isHighlight={isHighlight}
@@ -141,7 +153,11 @@ export const DiffSplitView = ({ diffFile }: { diffFile: DiffFile }) => {
         />
       </div>
       <div className="diff-split-line w-[1.5px] bg-[grey] opacity-[0.4]" />
-      <div className="new-diff-table-wrapper overflow-auto w-full" ref={ref2}>
+      <div
+        className="new-diff-table-wrapper overflow-auto w-full"
+        ref={ref2}
+        style={{ overscrollBehaviorX: "none" }}
+      >
         <DiffSplitViewTable
           side={SplitSide.new}
           isHighlight={isHighlight}

diff --git a/src/components/DiffUnifiedExtendLine.tsx b/src/components/DiffUnifiedExtendLine.tsx
@@ -0,0 +1,32 @@
+import { DiffFileExtends } from "../diff";
+
+export const DiffUnifiedExtendLine = ({
+  index,
+  diffFile,
+  isWrap,
+}: {
+  index: number;
+  diffFile: DiffFileExtends;
+  lineNumber: number;
+  isWrap: boolean;
+  isHighlight: boolean;
+}) => {
+  const currentExtend = diffFile.getUnifiedExtendLine(index);
+
+  if (!currentExtend) return null;
+
+  return (
+    <tr
+      data-state="extend"
+      className="diff-line diff-line-extend"
+    >
+      <td
+        className="diff-line-extend-content"
+        style={{ position: isWrap ? "relative" : "sticky" }}
+        colSpan={4}
+      >
+        {currentExtend}
+      </td>
+    </tr>
+  );
+};
diff --git a/src/components/DiffUnifiedHunkLine.tsx b/src/components/DiffUnifiedHunkLine.tsx
@@ -98,8 +98,9 @@ export const DiffUnifiedExpandLastLine = ({
   if (
     !diffFile.unifiedLastStartIndex ||
     !Number.isFinite(diffFile.unifiedLastStartIndex)
-  )
+  ) {
     return null;
+  }
 
   return (
     <tr

diff --git a/src/components/DiffUnifiedLine.tsx b/src/components/DiffUnifiedLine.tsx
@@ -1,6 +1,6 @@
-import { DiffFile, SyntaxLine } from "../diff";
+import { DiffFile, DiffFileExtends, SyntaxLine } from "../diff";
 import { DiffLine } from "../diff/diff-line";
-import { DiffAddWidget } from "./DiffAddWidget";
+import { DiffUnifiedAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
 import {
   addContentBGName,
@@ -48,7 +48,10 @@ const DiffUnifiedOldLine = ({
           backgroundColor: `var(${delLineNumberBGName})`,
         }}
       >
-        <DiffAddWidget diffFile={diffFile} />
+        <DiffUnifiedAddWidget
+          index={index - 1}
+          diffFile={diffFile as DiffFileExtends}
+        />
         <div className="flex">
           <span data-line-num-old={lineNumber} className="inline-block w-[50%]">
             {lineNumber}
@@ -106,7 +109,10 @@ const DiffUnifiedNewLine = ({
           backgroundColor: `var(${addLineNumberBGName})`,
         }}
       >
-        <DiffAddWidget diffFile={diffFile} />
+        <DiffUnifiedAddWidget
+          index={index - 1}
+          diffFile={diffFile as DiffFileExtends}
+        />
         <div className="flex">
           <span className="inline-block w-[50%]" />
           <span className="shrink-0 w-[10px]" />
@@ -214,7 +220,12 @@ export const DiffUnifiedLine = ({
               : `var(${expandContentBGName})`,
           }}
         >
-          {hasDiff && <DiffAddWidget diffFile={diffFile} />}
+          {hasDiff && (
+            <DiffUnifiedAddWidget
+              index={index}
+              diffFile={diffFile as DiffFileExtends}
+            />
+          )}
           <div className="flex opacity-[0.5]">
             <span
               data-line-num-old={unifiedLine.oldLineNumber}

diff --git a/src/components/DiffUnifiedView.tsx b/src/components/DiffUnifiedView.tsx
@@ -1,11 +1,12 @@
 import { Fragment } from "react";
-import { DiffFile, numIterator } from "../diff";
+import { DiffFile, DiffFileExtends, numIterator } from "../diff";
 import { DiffUnifiedLine } from "./DiffUnifiedLine";
 import {
   DiffUnifiedExpandLastLine,
   DiffUnifiedHunkLine,
 } from "./DiffUnifiedHunkLine";
 import { useDiffViewContext } from "./DiffViewContext";
+import { DiffUnifiedExtendLine } from "./DiffUnifiedExtendLine";
 
 export const DiffUnifiedView = ({ diffFile }: { diffFile: DiffFile }) => {
   const { isWrap, isHighlight } = useDiffViewContext();
@@ -49,6 +50,13 @@ export const DiffUnifiedView = ({ diffFile }: { diffFile: DiffFile }) => {
                   isWrap={isWrap}
                   diffFile={diffFile}
                 />
+                <DiffUnifiedExtendLine
+                  index={index}
+                  lineNumber={index + 1}
+                  isHighlight={isHighlight}
+                  isWrap={isWrap}
+                  diffFile={diffFile as DiffFileExtends}
+                />
               </Fragment>
             ))}
             <DiffUnifiedExpandLastLine

diff --git a/src/components/DiffView.tsx b/src/components/DiffView.tsx
@@ -8,7 +8,7 @@ import {
   useState,
   useSyncExternalStore,
 } from "react";
-import { DiffFileData, parseDiffFile } from "../diff";
+import { DiffFileData, DiffFileExtends } from "../diff";
 import { useDiffConfig } from "../hooks/useDiffConfig";
 import { DiffSplitView } from "./DiffSplitView";
 import { DiffUnifiedView } from "./DiffUnifiedView";
@@ -68,7 +68,17 @@ export const DiffView = ({ data }: { data: DiffFileData }) => {
   // @ts-ignore
   const [newList, setNewList] = useState<Record<number, ReactNode[]>>({});
 
-  const diffFile = useMemo(() => parseDiffFile(data), [data]);
+  const diffFile = useMemo(
+    () =>
+      new DiffFileExtends(
+        data.oldFile?.filePath || "",
+        data.oldFile?.content || "",
+        data.newFile?.filePath || "",
+        data.newFile?.content || "",
+        data.hunks.map(({ patchContent }) => patchContent)
+      ),
+    [data]
+  );
 
   useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);