From 2f133d99bcc32d7ed9f9aa6069585af23ac6e226 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Friedrichs?=
 <2217052+itsbjoern@users.noreply.github.com>
Date: Thu, 24 Oct 2024 03:22:23 +0100
Subject: [PATCH]  feat: allow layers to utilise CoreEventHandler mouseleave
 options (#705)

---
 .changeset/smooth-elephants-clean.md          |  6 ++++++
 packages/core/src/events/CoreEventHandlers.ts |  2 +-
 .../core/src/events/DefaultEventHandlers.ts   | 12 ++++++++----
 packages/layers/src/events/LayerHandlers.ts   | 19 +++++++++++++++++++
 4 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/smooth-elephants-clean.md

diff --git a/.changeset/smooth-elephants-clean.md b/.changeset/smooth-elephants-clean.md
new file mode 100644
index 000000000..f9a1882a7
--- /dev/null
+++ 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
index efb032605..e56f41342 100644
--- 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
index 17ae097e1..5e03d18a5 100644
--- 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
index 2d3849a9d..a9957febd 100644
--- 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) => {