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 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 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) => {