vue-devui 1.6.23 → 1.6.25

package/types/code-review/src/composables/use-code-review-comment.d.ts

@@ -3,19 +3,11 @@ import type { LineSide, CodeReviewProps } from '../code-review-types';
 export declare function useCodeReviewComment(reviewContentRef: Ref<HTMLElement>, props: CodeReviewProps, ctx: SetupContext): {
     commentLeft: Ref<number>;
     commentTop: Ref<number>;
-    mouseEvent: {
-        onMousemove: (e: MouseEvent) => void;
-        onMouseleave: (e: MouseEvent) => void;
-    } | {
-        onMousemove?: undefined;
-        onMouseleave?: undefined;
-    };
+    mouseEvent: Record<string, (e: MouseEvent) => void>;
     updateCheckedLineClass: () => void;
     clearCheckedLines: () => void;
     onCommentMouseLeave: (e: MouseEvent) => void;
     onCommentIconClick: (e: Event) => void;
-    onCommentKeyDown: () => void;
-    unCommentKeyDown: () => void;
     insertComment: (lineNumber: number, lineSide: LineSide, commentDom: HTMLElement) => void;
     removeComment: (lineNumber: number, lineSide: LineSide) => void;
 };

package/types/code-review/src/composables/use-code-review-line-selection.d.ts

@@ -0,0 +1,5 @@
+import type { Ref } from 'vue';
+import type { CodeReviewProps } from '../code-review-types';
+export declare function useCodeReviewLineSelection(reviewContentRef: Ref<HTMLElement>, props: CodeReviewProps, mouseMoveCb: (moveDirection: 'up' | 'down') => void, mouseupCb: () => void): {
+    onMousedown: (e: MouseEvent) => void;
+};

package/types/code-review/src/utils.d.ts

@@ -18,3 +18,4 @@ export declare function addCommentToPageForSingleColumn(lineHost: HTMLElement, c
 export declare function addCommentToPageForDoubleColumn(lineHost: HTMLElement, commentDom: HTMLElement, lineSide: LineSide): void;
 export declare function findReferenceDomForSingleColumn(parentNode: HTMLElement, lineNumber: number, lineSide: LineSide): HTMLTableRowElement | undefined;
 export declare function findReferenceDomForDoubleColumn(parentNode: HTMLElement, lineNumber: number, lineSide: LineSide): HTMLTableRowElement | undefined;
+export declare function findParentTrNode(node: HTMLElement | null): any;

package/vue-devui.es.js

@@ -17514,6 +17514,15 @@ function findReferenceDomForDoubleColumn(parentNode, lineNumber, lineSide) {
     }
   }
 }
+function findParentTrNode(node) {
+  if (!node) {
+    return null;
+  }
+  if (node.tagName === "TR") {
+    return node;
+  }
+  return findParentTrNode(node.parentElement);
+}
 function useCodeReviewExpand(reviewContentRef, props) {
   const { outputFormat, expandThreshold, expandLoader } = toRefs(props);
   const processSideBySide = () => {
@@ -17741,25 +17750,163 @@ function useCodeReviewFold(props, ctx2) {
   });
   return { isFold, toggleFold };
 }
+function useCodeReviewLineSelection(reviewContentRef, props, mouseMoveCb, mouseupCb) {
+  const ns2 = useNamespace$1("code-review");
+  let dragging = false;
+  let startTrNode;
+  let trNodes;
+  let isClickedLeft;
+  let shouldClear;
+  let isMouseMoved;
+  let startClientY;
+  const onMousedown2 = (e) => {
+    if (e.button === 0) {
+      const composedPath = e.composedPath();
+      const lineNumberBox = composedPath.find(
+        (item) => {
+          var _a, _b;
+          return ((_a = item.classList) == null ? void 0 : _a.contains("comment-icon-hover")) || ((_b = item.classList) == null ? void 0 : _b.contains("comment-icon"));
+        }
+      );
+      trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr")).filter((item) => {
+        var _a;
+        return !((_a = item.classList) == null ? void 0 : _a.contains("expand-line"));
+      });
+      if (!lineNumberBox) {
+        return;
+      }
+      const parentTrNode = findParentTrNode(e.target);
+      if (parentTrNode && (parentTrNode == null ? void 0 : parentTrNode.classList.contains("expand-line"))) {
+        return;
+      }
+      startTrNode = parentTrNode;
+      if (props.outputFormat === "side-by-side") {
+        isClickedLeft = composedPath.some((item) => {
+          var _a;
+          return (_a = item.classList) == null ? void 0 : _a.contains("d-code-left");
+        });
+      } else {
+        isClickedLeft = void 0;
+      }
+      dragging = true;
+      shouldClear = true;
+      isMouseMoved = false;
+      startClientY = e.clientY;
+      e.preventDefault();
+      e.stopPropagation();
+      document.addEventListener("mousemove", onMousemove);
+      document.addEventListener("mouseup", onMouseup);
+    }
+  };
+  function onMousemove(e) {
+    if (!dragging) {
+      return;
+    }
+    isMouseMoved = true;
+    if (shouldClear) {
+      clearCommentChecked();
+      shouldClear = false;
+    }
+    const composedPath = e.composedPath();
+    const inReviewContent = composedPath.some((item) => {
+      var _a;
+      return (_a = item.classList) == null ? void 0 : _a.contains(ns2.e("content"));
+    });
+    if (!inReviewContent) {
+      return;
+    }
+    const endTrNode = findParentTrNode(e.target);
+    if (!endTrNode) {
+      return;
+    }
+    let startIndex = trNodes.indexOf(startTrNode);
+    let endIndex = trNodes.indexOf(endTrNode);
+    if (endIndex === -1) {
+      return;
+    }
+    mouseMoveCb(e.clientY > startClientY ? "down" : "up");
+    if (startIndex > endIndex) {
+      [startIndex, endIndex] = [endIndex, startIndex];
+    }
+    let position;
+    if (isClickedLeft === void 0) {
+      position = "all";
+    } else if (isClickedLeft) {
+      position = "left";
+    } else {
+      position = "right";
+    }
+    for (let i = 0; i < trNodes.length; i++) {
+      if (i >= startIndex && i <= endIndex) {
+        toggleCommentCheckedClass(trNodes[i], true, position);
+      } else {
+        toggleCommentCheckedClass(trNodes[i], false, position);
+      }
+    }
+  }
+  function onMouseup() {
+    dragging = false;
+    if (isMouseMoved) {
+      mouseupCb();
+    }
+    document.removeEventListener("mouseup", onMouseup);
+    document.removeEventListener("mousemove", onMousemove);
+  }
+  function clearCommentChecked() {
+    for (let i = 0; i < trNodes.length; i++) {
+      toggleCommentCheckedClass(trNodes[i], false, "all");
+    }
+  }
+  function toggleCommentCheckedClass(trNode, isAddClass, position) {
+    var _a;
+    const tdNodes = Array.from(trNode.children);
+    let toDoNodes;
+    if (position === "all") {
+      toDoNodes = tdNodes;
+    } else if (position === "left") {
+      toDoNodes = tdNodes.slice(0, 2);
+    } else {
+      toDoNodes = tdNodes.slice(2);
+    }
+    if ((position === "left" || position === "right") && isNaN(parseInt((_a = toDoNodes[0]) == null ? void 0 : _a.innerHTML))) {
+      return;
+    }
+    toDoNodes.forEach((item) => {
+      if (item.tagName === "TD") {
+        if (isAddClass) {
+          item.classList.add("comment-checked");
+        } else {
+          item.classList.remove("comment-checked");
+        }
+      }
+    });
+  }
+  return { onMousedown: onMousedown2 };
+}
 function useCodeReviewComment(reviewContentRef, props, ctx2) {
   const { outputFormat, allowComment, allowChecked } = toRefs(props);
   const ns2 = useNamespace$1("code-review");
+  const { onMousedown: onMousedown2 } = useCodeReviewLineSelection(reviewContentRef, props, updateLineNumbers, afterCheckLines);
   const commentLeft = ref(-100);
   const commentTop = ref(-100);
   let currentLeftLineNumber = -1;
   let currentRightLineNumber = -1;
   let lastLineNumberContainer;
   let checkedLineNumberContainer = [];
-  let isShift = false;
   let currentLeftLineNumbers = [];
   let currentRightLineNumbers = [];
   let checkedLineCodeString = {};
-  watch(() => outputFormat.value, () => {
-    checkedLineNumberContainer = [];
-    currentLeftLineNumbers = [];
-    currentRightLineNumbers = [];
-    checkedLineCodeString = [];
-  });
+  let allTrNodes = [];
+  let afterCheckLinesEmitData;
+  watch(
+    () => outputFormat.value,
+    () => {
+      checkedLineNumberContainer = [];
+      currentLeftLineNumbers = [];
+      currentRightLineNumbers = [];
+      checkedLineCodeString = [];
+    }
+  );
   const resetLeftTop = () => {
     commentLeft.value = -100;
     commentTop.value = -100;
@@ -17842,30 +17989,7 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
       resetLeftTop();
     }
   };
-  function commentKeyDown(e) {
-    switch (e.key) {
-      case "Shift":
-        isShift = true;
-        break;
-    }
-  }
-  function commentKeyUp(e) {
-    e.preventDefault();
-    switch (e.key) {
-      case "Shift":
-        isShift = false;
-        break;
-    }
-  }
-  const unCommentKeyDown = () => {
-    document.removeEventListener("keydown", commentKeyDown);
-    document.removeEventListener("keyup", commentKeyUp);
-  };
-  const onCommentKeyDown = () => {
-    document.addEventListener("keydown", commentKeyDown);
-    document.addEventListener("keyup", commentKeyUp);
-  };
-  const getLineNumbers = (currentNumber, currentNumbers, e) => {
+  const getLineNumbers = (currentNumber, currentNumbers, moveDirection) => {
     if (currentNumber === -1) {
       return currentNumbers;
     }
@@ -17874,26 +17998,27 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
     }
     const numbers = [...currentNumbers];
     let max = Math.max(...numbers);
-    const min = Math.min(...numbers);
-    if (currentNumber > max) {
+    let min = Math.min(...numbers);
+    if (moveDirection === "down") {
       max = currentNumber;
     }
+    if (moveDirection === "up") {
+      min = currentNumber;
+    }
     return Array.from({ length: max - min + 1 }, (_, i) => i + min);
   };
-  const getCommonClassAndJudge = (side) => {
-    const lineClassName = side === "line-by-line" ? ".d2h-code-linenumber" : ".d2h-code-side-linenumber";
-    const linenumberDom = reviewContentRef.value.querySelectorAll(lineClassName);
+  const getCommonClassAndJudge = () => {
     const checkedLine = [currentLeftLineNumbers, currentRightLineNumbers];
     return {
-      linenumberDom,
+      linenumberDom: allTrNodes,
       checkedLine
     };
   };
   const addCommentCheckedClass = (Dom) => {
     !Dom.classList.contains("comment-checked") && Dom.classList.add("comment-checked");
   };
-  const addCommentClassSingle = (side) => {
-    const { linenumberDom, checkedLine } = getCommonClassAndJudge(side);
+  function getSingleCheckedLineCode(shouldRenderClass) {
+    const { linenumberDom, checkedLine } = getCommonClassAndJudge();
     const checkedCodeContent = [];
     for (let i = 0; i < linenumberDom.length; i++) {
       const lineNumberDomLeft = linenumberDom[i].children[0];
@@ -17903,25 +18028,29 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
         const codeLineNumberRight = parseInt(lineNumberDomRight == null ? void 0 : lineNumberDomRight.innerText);
         if (checkedLine[0].includes(codeLineNumberLeft) || checkedLine[1].includes(codeLineNumberRight)) {
           checkedLineNumberContainer.push(linenumberDom[i]);
-          const codeNode = linenumberDom[i].nextSibling.nodeName === "#text" ? linenumberDom[i].nextSibling.nextSibling : linenumberDom[i].nextSibling;
+          const codeNode = linenumberDom[i].nextElementSibling;
           checkedCodeContent.push(codeNode == null ? void 0 : codeNode.innerText);
-          addCommentCheckedClass(linenumberDom[i]);
-          addCommentCheckedClass(codeNode);
+          if (shouldRenderClass) {
+            addCommentCheckedClass(linenumberDom[i]);
+            addCommentCheckedClass(codeNode);
+          }
         }
       }
     }
     checkedLineCodeString = checkedCodeContent;
-  };
-  const addCommentClassDouble = (side) => {
+  }
+  function getDoubleCheckedLineCode(shouldRenderClass) {
     var _a;
-    const { linenumberDom, checkedLine } = getCommonClassAndJudge(side);
+    const { linenumberDom, checkedLine } = getCommonClassAndJudge();
     const checkedCodeContentLeft = [];
     const checkedCodeContentRight = [];
     function checkedFunc(Dom) {
       checkedLineNumberContainer.push(Dom);
-      const codeNode = Dom.nextSibling.nodeName === "#text" ? Dom.nextSibling.nextSibling : Dom.nextSibling;
-      addCommentCheckedClass(Dom);
-      addCommentCheckedClass(codeNode);
+      const codeNode = Dom.nextElementSibling;
+      if (shouldRenderClass) {
+        addCommentCheckedClass(Dom);
+        addCommentCheckedClass(codeNode);
+      }
       return codeNode == null ? void 0 : codeNode.innerText;
     }
     for (let i = 0; i < linenumberDom.length; i++) {
@@ -17937,38 +18066,53 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
       }
     }
     checkedLineCodeString = { leftCode: checkedCodeContentLeft, rightCode: checkedCodeContentRight };
-  };
-  const updateCheckedLineClass = () => {
-    if (outputFormat.value === "line-by-line") {
-      addCommentClassSingle(outputFormat.value);
-      return;
+  }
+  function getCheckedLineCode(shouldRenderClass) {
+    if (props.outputFormat === "line-by-line") {
+      return getSingleCheckedLineCode(shouldRenderClass);
     }
-    addCommentClassDouble(outputFormat.value);
+    getDoubleCheckedLineCode(shouldRenderClass);
+  }
+  function updateLineNumbers(moveDirection) {
+    currentLeftLineNumbers = currentLeftLineNumber === -1 ? currentLeftLineNumbers : getLineNumbers(currentLeftLineNumber, currentLeftLineNumbers, moveDirection);
+    currentRightLineNumbers = currentRightLineNumber === -1 ? currentRightLineNumbers : getLineNumbers(currentRightLineNumber, currentRightLineNumbers, moveDirection);
+    getCheckedLineCode(false);
+    afterCheckLinesEmitData = {
+      left: currentLeftLineNumber,
+      right: currentRightLineNumber,
+      details: {
+        lefts: currentLeftLineNumbers,
+        rights: currentRightLineNumbers,
+        codes: checkedLineCodeString
+      }
+    };
+  }
+  const updateCheckedLineClass = () => {
+    getCheckedLineCode(true);
   };
   const resetCommentClass = () => {
     for (let i = 0; i < checkedLineNumberContainer.length; i++) {
       checkedLineNumberContainer[i].classList.remove("comment-checked");
-      const codeNode = checkedLineNumberContainer[i].nextSibling.nodeName === "#text" ? checkedLineNumberContainer[i].nextSibling.nextSibling : checkedLineNumberContainer[i].nextSibling;
+      const codeNode = checkedLineNumberContainer[i].nextElementSibling;
       codeNode == null ? void 0 : codeNode.classList.remove("comment-checked");
     }
     checkedLineNumberContainer = [];
   };
-  const commentShiftClick = (e) => {
-    currentLeftLineNumbers = currentLeftLineNumber === -1 ? currentLeftLineNumbers : getLineNumbers(currentLeftLineNumber, currentLeftLineNumbers);
-    currentRightLineNumbers = currentRightLineNumber === -1 ? currentRightLineNumbers : getLineNumbers(currentRightLineNumber, currentRightLineNumbers);
-    updateCheckedLineClass();
-  };
-  const commentClick = (e) => {
+  const commentClick = () => {
     let obj = { left: currentLeftLineNumber, right: currentRightLineNumber };
-    if (currentLeftLineNumbers.length >= 1 || currentRightLineNumbers.length >= 1 && allowChecked.value) {
+    if ((currentLeftLineNumbers.length >= 1 || currentRightLineNumbers.length >= 1) && allowChecked.value) {
       const maxCurrentLeftLineNumber = currentLeftLineNumbers[currentLeftLineNumbers.length - 1];
       const maxCurrentRightLineNumber = currentRightLineNumbers[currentRightLineNumbers.length - 1];
       if (maxCurrentLeftLineNumber === currentLeftLineNumber || maxCurrentRightLineNumber === currentRightLineNumber) {
-        obj = { left: currentLeftLineNumber, right: currentRightLineNumber, details: {
-          lefts: currentLeftLineNumbers,
-          rights: currentRightLineNumbers,
-          codes: checkedLineCodeString
-        } };
+        obj = {
+          left: currentLeftLineNumber,
+          right: currentRightLineNumber,
+          details: {
+            lefts: currentLeftLineNumbers,
+            rights: currentRightLineNumbers,
+            codes: checkedLineCodeString
+          }
+        };
       } else {
         currentLeftLineNumbers = [];
         currentRightLineNumbers = [];
@@ -17977,6 +18121,9 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
     }
     ctx2.emit("addComment", obj);
   };
+  function afterCheckLines() {
+    ctx2.emit("afterCheckLines", afterCheckLinesEmitData);
+  }
   const onCommentIconClick = (e) => {
     if (e) {
       const composedPath = e.composedPath();
@@ -17990,10 +18137,6 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
         return;
       }
     }
-    if (isShift && allowChecked.value) {
-      commentShiftClick();
-      return;
-    }
     commentClick();
   };
   const insertComment = (lineNumber, lineSide, commentDom) => {
@@ -18040,7 +18183,19 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
     checkedLineCodeString = [];
     resetCommentClass();
   };
-  const mouseEvent = allowComment.value ? { onMousemove: onMouseMove, onMouseleave } : {};
+  const handleMouseDown = (e) => {
+    const lineClassName = props.outputFormat === "line-by-line" ? ".d2h-code-linenumber" : ".d2h-code-side-linenumber";
+    allTrNodes = reviewContentRef.value.querySelectorAll(lineClassName);
+    onMousedown2(e);
+  };
+  const mouseEvent = {};
+  if (allowComment.value) {
+    mouseEvent.onMousemove = onMouseMove;
+    mouseEvent.onMouseleave = onMouseleave;
+  }
+  if (props.allowChecked) {
+    mouseEvent.onMousedown = handleMouseDown;
+  }
   window.addEventListener("scroll", resetLeftTop);
   onUnmounted(() => {
     window.removeEventListener("scroll", resetLeftTop);
@@ -18053,8 +18208,6 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
     clearCheckedLines,
     onCommentMouseLeave,
     onCommentIconClick,
-    onCommentKeyDown,
-    unCommentKeyDown,
     insertComment,
     removeComment
   };
@@ -18063,7 +18216,7 @@ var codeReview = "";
 var CodeReview = defineComponent({
   name: "DCodeReview",
   props: codeReviewProps,
-  emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh"],
+  emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh", "afterCheckLines"],
   setup(props, ctx2) {
     const ns2 = useNamespace$1("code-review");
     const {
@@ -18085,8 +18238,6 @@ var CodeReview = defineComponent({
       mouseEvent,
       onCommentMouseLeave,
       onCommentIconClick,
-      onCommentKeyDown,
-      unCommentKeyDown,
       insertComment,
       removeComment,
       updateCheckedLineClass,
@@ -18100,10 +18251,6 @@ var CodeReview = defineComponent({
         updateCheckedLineClass,
         clearCheckedLines
       });
-      onCommentKeyDown();
-    });
-    onBeforeUnmount(() => {
-      unCommentKeyDown();
     });
     provide(CodeReviewInjectionKey, {
       diffType,
@@ -54140,7 +54287,7 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.6.23",
+  version: "1.6.25",
   install(app) {
     installs.forEach((p) => app.use(p));
   }