fix typo

MrWangJustToDo · Jan 16, 2024 · 81e5da0 · 81e5da0
1 parent ec4b2ba
commit 81e5da0
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 116 deletions.
diff --git a/src/components/DiffAddWidget.tsx b/src/components/DiffAddWidget.tsx
@@ -0,0 +1,27 @@
+import { DiffFile } from "../diff";
+import { addWidgetBGName, addWidgetColorName } from "./color";
+
+// TODO
+export const DiffAddWidget = ({ diffFile }: { diffFile: DiffFile }) => {
+  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})`,
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/DiffContent.tsx b/src/components/DiffContent.tsx
@@ -4,31 +4,36 @@ import { addContentHighlightBGName, delContentHighlightBGName } from "./color";
 const DiffString = ({
   rawLine,
   diffLine,
-  operetar,
+  operator,
 }: {
   rawLine: string;
   diffLine?: DiffLine;
-  operetar?: "add" | "del";
+  operator?: "add" | "del";
 }) => {
   const range = diffLine?.range;
 
   if (range && range.length > 0 && range.length < rawLine.length) {
     return (
       <span className="diff-line-content-raw">
-        {rawLine.slice(0, range.location)}
         <span
-          data-highlight
-          className="rounded-[0.2em]"
-          style={{
-            backgroundColor:
-              operetar === "add"
-                ? `var(${addContentHighlightBGName})`
-                : `var(${delContentHighlightBGName})`,
-          }}
+          data-range-start={range.location}
+          data-range-end={range.location + range.length}
         >
-          {rawLine.slice(range.location, range.location + range.length)}
+          {rawLine.slice(0, range.location)}
+          <span
+            data-diff-highlight
+            className="rounded-[0.2em]"
+            style={{
+              backgroundColor:
+                operator === "add"
+                  ? `var(${addContentHighlightBGName})`
+                  : `var(${delContentHighlightBGName})`,
+            }}
+          >
+            {rawLine.slice(range.location, range.location + range.length)}
+          </span>
+          {rawLine.slice(range.location + range.length)}
         </span>
-        {rawLine.slice(range.location + range.length)}
       </span>
     );
   }
@@ -39,17 +44,17 @@ const DiffString = ({
 const DiffSyntax = ({
   rawLine,
   diffLine,
-  operetar,
+  operator,
   syntaxLine,
 }: {
   rawLine: string;
   diffLine?: DiffLine;
   syntaxLine?: SyntaxLine;
-  operetar?: "add" | "del";
+  operator?: "add" | "del";
 }) => {
   if (!syntaxLine) {
     return (
-      <DiffString rawLine={rawLine} diffLine={diffLine} operetar={operetar} />
+      <DiffString rawLine={rawLine} diffLine={diffLine} operator={operator} />
     );
   }
 
@@ -96,10 +101,10 @@ const DiffSyntax = ({
                 >
                   {str1}
                   <span
-                    data-highlight
+                    data-diff-highlight
                     style={{
                       backgroundColor:
-                        operetar === "add"
+                        operator === "add"
                           ? `var(${addContentHighlightBGName})`
                           : `var(${delContentHighlightBGName})`,
                       borderTopLeftRadius: isStart ? "0.2em" : undefined,
@@ -165,21 +170,21 @@ export const DiffContent = ({
       }}
     >
       <span
-        data-operater={isAdded ? "+" : isDelete ? "-" : undefined}
-        className="diff-line-content-operater inline-block w-[1.5em] ml-[-1.5em] indent-[0.2em] select-none"
+        data-operator={isAdded ? "+" : isDelete ? "-" : undefined}
+        className="diff-line-content-operator inline-block w-[1.5em] ml-[-1.5em] indent-[0.2em] select-none"
       >
         {isAdded ? "+" : isDelete ? "-" : " "}
       </span>
-      {isHighlight && diffFile.hasHilighted ? (
+      {isHighlight && diffFile.hasHighlighted ? (
         <DiffSyntax
-          operetar={isAdded ? "add" : isDelete ? "del" : undefined}
+          operator={isAdded ? "add" : isDelete ? "del" : undefined}
           rawLine={rawLine}
           diffLine={diffLine}
           syntaxLine={syntaxLine}
         />
       ) : (
         <DiffString
-          operetar={isAdded ? "add" : isDelete ? "del" : undefined}
+          operator={isAdded ? "add" : isDelete ? "del" : undefined}
           rawLine={rawLine}
           diffLine={diffLine}
         />

diff --git a/src/components/DiffSplitLine.tsx b/src/components/DiffSplitLine.tsx
@@ -1,13 +1,12 @@
 import { DiffFile } from "../diff";
 import { DiffLineType } from "../diff/diff-line";
 import { useSyncHeight } from "../hooks/useSyncHeight";
+import { DiffAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
 import { SplitSide } from "./DiffSplitView";
 import {
   addContentBGName,
   addLineNumberBGName,
-  addWidgetBGName,
-  addWidgetColorName,
   delContentBGName,
   delLineNumberBGName,
   emptyBGName,
@@ -97,26 +96,7 @@ export const DiffSplitLine = ({
             color: `var(${plainLineNumberColorName})`,
           }}
         >
-          {hasDiff && (
-            <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)",
-              }}
-            >
-              <div
-                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,
-                  backgroundColor: `var(${addWidgetBGName})`,
-                }}
-              >
-                +
-              </div>
-            </div>
-          )}
+          {hasDiff && <DiffAddWidget diffFile={diffFile} />}
           <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,6 +1,6 @@
 import { Fragment, useEffect, useRef } from "react";
 import debounce from "lodash/debounce";
-import { DiffFile, numIterater } from "../diff";
+import { DiffFile, numIterator } from "../diff";
 import { DiffSplitLine } from "./DiffSplitLine";
 import {
   DiffSplitExpandLastLine,
@@ -79,7 +79,7 @@ const DiffSplitViewTable = ({
           fontSize: "var(--diff-font-size--)",
         }}
       >
-        {numIterater(lineLength, (index) => (
+        {numIterator(lineLength, (index) => (
           <Fragment key={index}>
             <DiffSplitHunkLine
               index={index}

diff --git a/src/components/DiffUnifiedHunkLine.tsx b/src/components/DiffUnifiedHunkLine.tsx
@@ -49,7 +49,7 @@ export const DiffUnifiedHunkLine = ({
           <div
             className="w-full hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]"
             title="Expand All"
-            onClick={() => diffFile.onUnifiedHunkExapnd("all", index)}
+            onClick={() => diffFile.onUnifiedHunkExpand("all", index)}
           >
             <ExpandAll className="fill-current" />
           </div>
@@ -58,14 +58,14 @@ export const DiffUnifiedHunkLine = ({
             <div
               className="w-full hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]"
               title="Expand Down"
-              onClick={() => diffFile.onUnifiedHunkExapnd("down", index)}
+              onClick={() => diffFile.onUnifiedHunkExpand("down", index)}
             >
               <ExpandDown className="fill-current" />
             </div>
             <div
               className="w-full hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]"
               title="Expand Up"
-              onClick={() => diffFile.onUnifiedHunkExapnd("up", index)}
+              onClick={() => diffFile.onUnifiedHunkExpand("up", index)}
             >
               <ExpandUp className="fill-current" />
             </div>

diff --git a/src/components/DiffUnifiedLine.tsx b/src/components/DiffUnifiedLine.tsx
@@ -1,11 +1,10 @@
 import { DiffFile, SyntaxLine } from "../diff";
 import { DiffLine } from "../diff/diff-line";
+import { DiffAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
 import {
   addContentBGName,
   addLineNumberBGName,
-  addWidgetBGName,
-  addWidgetColorName,
   delContentBGName,
   delLineNumberBGName,
   expandContentBGName,
@@ -49,24 +48,7 @@ const DiffUnifiedOldLine = ({
           backgroundColor: `var(${delLineNumberBGName})`,
         }}
       >
-        <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)",
-          }}
-        >
-          <div
-            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,
-              backgroundColor: `var(${addWidgetBGName})`,
-            }}
-          >
-            +
-          </div>
-        </div>
+        <DiffAddWidget diffFile={diffFile} />
         <div className="flex">
           <span data-line-num-old={lineNumber} className="inline-block w-[50%]">
             {lineNumber}
@@ -124,24 +106,7 @@ const DiffUnifiedNewLine = ({
           backgroundColor: `var(${addLineNumberBGName})`,
         }}
       >
-        <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)",
-          }}
-        >
-          <div
-            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,
-              backgroundColor: `var(${addWidgetBGName})`,
-            }}
-          >
-            +
-          </div>
-        </div>
+        <DiffAddWidget diffFile={diffFile} />
         <div className="flex">
           <span className="inline-block w-[50%]" />
           <span className="shrink-0 w-[10px]" />
@@ -249,26 +214,7 @@ export const DiffUnifiedLine = ({
               : `var(${expandContentBGName})`,
           }}
         >
-          {hasDiff && (
-            <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)",
-              }}
-            >
-              <div
-                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,
-                  backgroundColor: `var(${addWidgetBGName})`,
-                }}
-              >
-                +
-              </div>
-            </div>
-          )}
+          {hasDiff && <DiffAddWidget diffFile={diffFile} />}
           <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,5 +1,5 @@
 import { Fragment } from "react";
-import { DiffFile, numIterater } from "../diff";
+import { DiffFile, numIterator } from "../diff";
 import { DiffUnifiedLine } from "./DiffUnifiedLine";
 import {
   DiffUnifiedExpandLastLine,
@@ -33,7 +33,7 @@ export const DiffUnifiedView = ({ diffFile }: { diffFile: DiffFile }) => {
               fontSize: "var(--diff-font-size--)",
             }}
           >
-            {numIterater(unifiedLineLength, (index) => (
+            {numIterator(unifiedLineLength, (index) => (
               <Fragment key={index}>
                 <DiffUnifiedHunkLine
                   index={index}

diff --git a/src/components/DiffView.tsx b/src/components/DiffView.tsx
@@ -73,6 +73,7 @@ export const DiffView = ({ data }: { data: DiffFileData }) => {
   useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
 
   useEffect(() => {
+    console.log(diffFile);
     diffFile.init();
     diffFile.buildSplitDiffLines();
     diffFile.buildUnifiedDiffLines();

diff --git a/src/diff/diff-file.ts b/src/diff/diff-file.ts
@@ -1,4 +1,4 @@
-import { numIterater, relativeChanges } from ".";
+import { numIterator, relativeChanges } from ".";
 import { DiffLine, DiffLineType } from "./diff-line";
 import { DiffParser } from "./diff-parse";
 import { File } from "./file";
@@ -99,7 +99,7 @@ export class DiffFile {
 
   #listeners: (() => void)[] = [];
 
-  hasHilighted: boolean = false;
+  hasHighlighted: boolean = false;
 
   #_hasInitRaw: boolean = false;
 
@@ -357,7 +357,7 @@ export class DiffFile {
     const lang = oldFileLang || newFileLang || "txt";
     this.#composeSyntax(oldFileLang || lang, newFileLang || lang);
     this.#_hasInitSyntax = true;
-    this.hasHilighted = true;
+    this.hasHighlighted = true;
   }
 
   init() {
@@ -375,7 +375,7 @@ export class DiffFile {
     let newFileLineNumber = 1;
     let prevIsHidden = false;
     let hideStart = Infinity;
-    numIterater(this.lineLength, () => {
+    numIterator(this.lineLength, () => {
       const oldRawLine = this.#getOldRawLine(oldFileLineNumber);
       const oldDiffLine = this.#getOldDiffLine(oldFileLineNumber);
       const newRawLine = this.#getNewRawLine(newFileLineNumber);
@@ -657,7 +657,7 @@ export class DiffFile {
     return this.#unifiedHunksLines?.[index];
   };
 
-  onUnifiedHunkExapnd = (dir: "up" | "down" | "all", index: number) => {
+  onUnifiedHunkExpand = (dir: "up" | "down" | "all", index: number) => {
     const current = this.#unifiedHunksLines?.[index];
     if (!current) return;
 

diff --git a/src/diff/tool.ts b/src/diff/tool.ts
@@ -75,7 +75,7 @@ export function getHunkHeaderExpansionType(
   }
 }
 
-export const numIterater = <T>(num: number, cb: (index: number) => T): T[] => {
+export const numIterator = <T>(num: number, cb: (index: number) => T): T[] => {
   const re = [];
   for (let i = 0; i < num; i++) {
     re.push(cb(i));