From 649b80e96e9b151bade8aa0a89a21e503d6fbeae Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 17 Aug 2023 19:58:30 +0400
Subject: [PATCH] Add hover canvas spot

---
 src/commands/view/SelectComponent.ts |  2 +-
 src/editor/model/Editor.ts           | 32 +++++++++++++++++++++-------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/commands/view/SelectComponent.ts b/src/commands/view/SelectComponent.ts
index 23c884a0a..1c214c40f 100644
--- a/src/commands/view/SelectComponent.ts
+++ b/src/commands/view/SelectComponent.ts
@@ -212,7 +212,7 @@ export default {
   },
 
   onOut() {
-    this.em.setHovered(0);
+    this.em.setHovered();
   },
 
   toggleToolsEl(on: boolean, view: any, opts: any = {}) {
diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts
index eafdbb577..15302d17d 100644
--- a/src/editor/model/Editor.ts
+++ b/src/editor/model/Editor.ts
@@ -628,25 +628,41 @@ export default class EditorModel extends Model {
 
   /**
    * Hover a component
-   * @param  {Component|HTMLElement} el Component to select
+   * @param  {Component|HTMLElement} cmp Component to select
    * @param  {Object} [opts={}] Options, optional
    * @private
    */
-  setHovered(el: any, opts: any = {}) {
-    if (!el) return this.set('componentHovered', '');
+  setHovered(cmp?: Component | null, opts: any = {}) {
+    const upHovered = (cmp?: Component, opts?: any) => {
+      const current = this.getHovered();
+      const type = CanvasSpotBuiltInTypes.Hover;
+      this.set('componentHovered', cmp || null, opts);
+
+      current?.views.forEach(componentView => {
+        this.Canvas.removeSpot({ type, componentView });
+      });
+
+      cmp?.views.forEach(componentView => {
+        this.Canvas.setSpot({ type, componentView });
+      });
+    };
+
+    if (!cmp) {
+      return upHovered();
+    }
 
     const ev = 'component:hover';
-    let model = getModel(el, undefined);
+    let model = getModel(cmp, undefined) as Component | undefined;
 
     if (!model) return;
 
-    opts.forceChange && this.set('componentHovered', '');
+    opts.forceChange && upHovered();
     this.trigger(`${ev}:before`, model, opts);
 
     // Check for valid hoverable
     if (!model.get('hoverable')) {
       if (opts.useValid && !opts.abort) {
-        let parent = model && model.parent();
+        let parent = model.parent();
         while (parent && !parent.get('hoverable')) parent = parent.parent();
         model = parent;
       } else {
@@ -655,13 +671,13 @@ export default class EditorModel extends Model {
     }
 
     if (!opts.abort) {
-      this.set('componentHovered', model, opts);
+      upHovered(model, opts);
       this.trigger(ev, model, opts);
     }
   }
 
   getHovered() {
-    return this.get('componentHovered');
+    return this.get('componentHovered') as Component | undefined;
   }
 
   /**