fix: fix hide popup when no hovering item

textlint · Apr 17, 2021 · d4cbea6 · d4cbea6
1 parent 0a6153e
commit d4cbea6
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/packages/@textlint/runtime-helper/src/textlint-apply-fix.ts b/packages/@textlint/runtime-helper/src/textlint-apply-fix.ts
diff --git a/packages/textchecker-element/src/attach-to-text-area.ts b/packages/textchecker-element/src/attach-to-text-area.ts
@@ -75,12 +75,15 @@ export const attachToTextArea = ({
     }
     const textChecker = new TextCheckerElement({
         targetElement: textAreaElement,
-        hoverPadding: 10
+        hoverPadding: 20
     });
     textAreaElement.before(textChecker);
+    const hoverMap = new Map<TextCheckerElementRectItem, boolean>();
     const textCheckerPopup = createTextCheckerPopupElement({
         onLeave() {
-            textCheckerPopup.dismissCards();
+            if (!textCheckerPopup.isHovering && hoverMap.size === 0) {
+                textCheckerPopup.dismissCards();
+            }
         }
     });
     const compositionHandler = createCompositionHandler();
@@ -113,13 +116,12 @@ export const attachToTextArea = ({
                     fixable: Boolean(message.fix)
                 };
                 const abortSignalMap = new WeakMap<TextCheckerElementRectItem, AbortController>();
-                let isMouseEnter = false;
                 return {
                     id: `${message.ruleId}::${message.line}:${message.column}`,
                     start: message.index,
                     end: message.index + 1,
                     onMouseEnter: ({ rectItem }: { rectItem: TextCheckerElementRectItem }) => {
-                        isMouseEnter = true;
+                        hoverMap.set(rectItem, true);
                         const controller = abortSignalMap.get(rectItem);
                         debug("enter", controller);
                         if (controller) {
@@ -186,13 +188,13 @@ export const attachToTextArea = ({
                     },
                     async onMouseLeave({ rectItem }: { rectItem: TextCheckerElementRectItem }) {
                         try {
-                            isMouseEnter = false;
+                            hoverMap.delete(rectItem);
                             const controller = abortSignalMap.get(rectItem);
                             debug("leave", controller);
                             await delay(500, {
                                 signal: controller?.signal
                             });
-                            if (textCheckerPopup.isHovering || isMouseEnter) {
+                            if (textCheckerPopup.isHovering || hoverMap.get(rectItem)) {
                                 return;
                             }
                             textCheckerPopup.dismissCard(card);
@@ -216,7 +218,6 @@ export const attachToTextArea = ({
     textAreaElement.addEventListener("focusout", hideAnnotations);
     update();
     // when resize element, update annotation
-    // @ts-expect-error
     const resizeObserver = new ResizeObserver(() => {
         debug("textarea resize");
         textCheckerPopup.dismissCards();

diff --git a/packages/textchecker-element/src/text-checker-element.ts b/packages/textchecker-element/src/text-checker-element.ts
@@ -270,7 +270,7 @@ export class TextCheckerElement extends HTMLElement {
                 };
                 return (
                     rect.left - hoverPadding <= point.x &&
-                    point.x <= rect.left + hoverPadding + rect.width &&
+                    point.x <= rect.left + rect.width + hoverPadding &&
                     rect.top - hoverPadding <= point.y &&
                     point.y <= rect.top + rect.height + hoverPadding
                 );

diff --git a/packages/textchecker-element/src/text-checker-popup-element.ts b/packages/textchecker-element/src/text-checker-popup-element.ts
@@ -206,6 +206,7 @@ export class TextCheckerPopupElement extends HTMLElement {
     }
 
     public dismissCards() {
+        console.trace("test");
         this.store.removeAllCard();
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -206,6 +206,7 @@ export class TextCheckerPopupElement extends HTMLElement { @@
         }
         public dismissCards() {
+            console.trace("test");
             this.store.removeAllCard();
         }
@@ Expand Down @@