Update hover canvas spot

src/canvas/config/config.ts

@@ -1,4 +1,5 @@
 import Component from '../../dom_components/model/Component';
+import { CanvasSpotBuiltInTypes } from '../model/CanvasSpot';
 
 export interface CanvasConfig {
   stylePrefix?: string;
@@ -70,6 +71,8 @@ export interface CanvasConfig {
    * @default true
    */
   allowExternalDrop?: boolean;
+
+  customSpots?: boolean | Partial<Record<CanvasSpotBuiltInTypes, boolean>>;
 }
 
 const config: CanvasConfig = {
@@ -88,6 +91,9 @@ const config: CanvasConfig = {
   `,
   notTextable: ['button', 'a', 'input[type=checkbox]', 'input[type=radio]'],
   allowExternalDrop: true,
+  customSpots: {
+    hover: true,
+  },
 };
 
 export default config;

src/canvas/index.ts

@@ -56,7 +56,7 @@ import EditorModel from '../editor/model/Editor';
 import { getElement, getViewEl } from '../utils/mixins';
 import defaults, { CanvasConfig } from './config/config';
 import Canvas from './model/Canvas';
-import CanvasSpot, { CanvasSpotProps } from './model/CanvasSpot';
+import CanvasSpot, { CanvasSpotBuiltInTypes, CanvasSpotProps } from './model/CanvasSpot';
 import CanvasSpots from './model/CanvasSpots';
 import Frame from './model/Frame';
 import { CanvasEvents } from './types';
@@ -759,4 +759,14 @@ export default class CanvasModule extends Module<CanvasConfig> {
   refreshSpots() {
     this.spots.refresh();
   }
+
+  hasCustomSpot(type?: CanvasSpotBuiltInTypes) {
+    const { customSpots } = this.getConfig();
+
+    if (customSpots === true || (customSpots && type && customSpots[type])) {
+      return true;
+    }
+
+    return false;
+  }
 }

src/commands/view/SelectComponent.ts

@@ -5,6 +5,7 @@ import ToolbarView from '../../dom_components/view/ToolbarView';
 import { isDoc, isTaggableNode, isVisible, off, on } from '../../utils/dom';
 import { getComponentModel, getComponentView, getUnitFromValue, getViewEl, hasWin } from '../../utils/mixins';
 import { CommandObject } from './CommandAbstract';
+import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
 
 let showOffsets: boolean;
 /**
@@ -589,10 +590,11 @@ export default {
     const isHoverEn = component.get('hoverable');
     const isNewEl = this.lastHovered !== el;
     const badgeOpts = isNewEl ? {} : { posOnly: 1 };
+    const customHoverSpot = this.canvas.hasCustomSpot(CanvasSpotBuiltInTypes.Hover);
 
     if (isNewEl && isHoverEn) {
       this.lastHovered = el;
-      this.showHighlighter(view);
+      customHoverSpot ? this.hideHighlighter(view) : this.showHighlighter(view);
       this.showElementOffset(el, pos, { view });
     }
 
@@ -608,12 +610,13 @@ export default {
     const topOff = frameOff.top;
     const leftOff = frameOff.left;
 
-    this.updateBadge(el, pos, {
-      ...badgeOpts,
-      view,
-      topOff,
-      leftOff,
-    });
+    !customHoverSpot &&
+      this.updateBadge(el, pos, {
+        ...badgeOpts,
+        view,
+        topOff,
+        leftOff,
+      });
 
     style.top = topOff + unit;
     style.left = leftOff + unit;