feat: add option remove hover state on mouseleave (#582)

prevwong · Nov 27, 2023 · 12b4af9 · 12b4af9
1 parent 528035d
commit 12b4af9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/.changeset/two-windows-remain.md b/.changeset/two-windows-remain.md
@@ -0,0 +1,5 @@
+---
+'@craftjs/core': patch
+---
+
+Add option to remove hover state on mouseleave
diff --git a/packages/core/src/editor/store.tsx b/packages/core/src/editor/store.tsx
@@ -31,6 +31,7 @@ export const editorInitialState: EditorState = {
     handlers: (store) =>
       new DefaultEventHandlers({
         store,
+        removeHoverOnMouseleave: false,
         isMultiSelectEnabled: (e: MouseEvent) => !!e.metaKey,
       }),
     normalizeNodes: () => {},

diff --git a/packages/core/src/events/DefaultEventHandlers.ts b/packages/core/src/events/DefaultEventHandlers.ts
@@ -10,6 +10,7 @@ import { Indicator, NodeId, DragTarget, NodeTree } from '../interfaces';
 
 export type DefaultEventHandlersOptions = {
   isMultiSelectEnabled: (e: MouseEvent) => boolean;
+  removeHoverOnMouseleave: boolean;
 };
 
 /**
@@ -134,17 +135,22 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
           }
         );
 
-        const unbindMouseleave = this.addCraftEventListener(
-          el,
-          'mouseleave',
-          (e) => {
+        let unbindMouseleave: (() => void) | null = null;
+
+        if (this.options.removeHoverOnMouseleave) {
+          this.addCraftEventListener(el, 'mouseleave', (e) => {
             e.craft.stopPropagation();
             store.actions.setNodeEvent('hovered', null);
-          }
-        );
+          });
+        }
 
         return () => {
           unbindMouseover();
+
+          if (!unbindMouseleave) {
+            return;
+          }
+
           unbindMouseleave();
         };
       },