feat: allow layers to utilise CoreEventHandler mouseleave options (#705

)
prevwong · Oct 24, 2024 · 2f133d9 · 2f133d9
1 parent 48cb5cb
commit 2f133d9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/.changeset/smooth-elephants-clean.md b/.changeset/smooth-elephants-clean.md
@@ -0,0 +1,6 @@
+---
+'@craftjs/core': patch
+'@craftjs/layers': patch
+---
+
+Use removeHoverOnMouseleave option for layers package
diff --git a/packages/core/src/events/CoreEventHandlers.ts b/packages/core/src/events/CoreEventHandlers.ts
@@ -8,7 +8,7 @@ export interface CreateHandlerOptions {
 }
 
 export class CoreEventHandlers<O = {}> extends EventHandlers<
-  { store: EditorStore } & O
+  { store: EditorStore; removeHoverOnMouseleave: boolean } & O
 > {
   handlers() {
     return {

diff --git a/packages/core/src/events/DefaultEventHandlers.ts b/packages/core/src/events/DefaultEventHandlers.ts
@@ -138,10 +138,14 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
         let unbindMouseleave: (() => void) | null = null;
 
         if (this.options.removeHoverOnMouseleave) {
-          this.addCraftEventListener(el, 'mouseleave', (e) => {
-            e.craft.stopPropagation();
-            store.actions.setNodeEvent('hovered', null);
-          });
+          unbindMouseleave = this.addCraftEventListener(
+            el,
+            'mouseleave',
+            (e) => {
+              e.craft.stopPropagation();
+              store.actions.setNodeEvent('hovered', null);
+            }
+          );
         }
 
         return () => {

diff --git a/packages/layers/src/events/LayerHandlers.ts b/packages/layers/src/events/LayerHandlers.ts
@@ -42,6 +42,19 @@ export class LayerHandlers extends DerivedCoreEventHandlers<{
           }
         );
 
+        let unbindMouseleave: (() => void) | null = null;
+
+        if (this.derived.options.removeHoverOnMouseleave) {
+          unbindMouseleave = this.addCraftEventListener(
+            el,
+            'mouseleave',
+            (e) => {
+              e.craft.stopPropagation();
+              layerStore.actions.setLayerEvent('hovered', null);
+            }
+          );
+        }
+
         const unbindDragOver = this.addCraftEventListener(
           el,
           'dragover',
@@ -174,6 +187,12 @@ export class LayerHandlers extends DerivedCoreEventHandlers<{
           unbindMouseOver();
           unbindDragOver();
           unbindDragEnter();
+
+          if (!unbindMouseleave) {
+            return;
+          }
+
+          unbindMouseleave();
         };
       },
       layerHeader: (el: HTMLElement, layerId: NodeId) => {