Update spacing spot

src/canvas/config/config.ts

@@ -93,6 +93,7 @@ const config: CanvasConfig = {
   allowExternalDrop: true,
   customSpots: {
     hover: true,
+    spacing: true,
   },
 };
 

src/canvas/model/CanvasSpot.ts

@@ -8,9 +8,9 @@ import Frame from './Frame';
 export enum CanvasSpotBuiltInTypes {
   Select = 'select',
   Hover = 'hover',
-  Padding = 'padding',
-  Margin = 'margin',
+  Spacing = 'spacing',
   Resize = 'resize',
+  Target = 'target',
 }
 
 export type CanvasSpotBuiltInType = `${CanvasSpotBuiltInTypes}`;
@@ -30,6 +30,9 @@ export interface CanvasSpotBase<T extends CanvasSpotType> {
 /** @private */
 export interface CanvasSpotProps<T extends CanvasSpotType = CanvasSpotType> extends CanvasSpotBase<T> {}
 
+/** @private */
+export interface CanvasSpotSpacingProps extends CanvasSpotBase<CanvasSpotBuiltInTypes.Spacing> {}
+
 export default class CanvasSpot<T extends CanvasSpotProps = CanvasSpotProps> extends ModuleModel<CanvasModule, T> {
   defaults() {
     return {

src/commands/view/SelectComponent.ts

@@ -229,6 +229,7 @@ export default {
    */
   showElementOffset(el: HTMLElement, pos: any, opts: any = {}) {
     if (!showOffsets) return;
+    console.log('showElementOffset');
     this.editor.runCommand('show-offset', {
       el,
       elPos: pos,
@@ -245,6 +246,7 @@ export default {
    * @param {Object} pos
    */
   hideElementOffset(view: any) {
+    console.log('hideElementOffset');
     this.editor.stopCommand('show-offset', {
       view,
     });
@@ -256,6 +258,7 @@ export default {
    * @param {Object} pos
    */
   showFixedElementOffset(el: HTMLElement, pos: any) {
+    console.log('showFixedElementOffset');
     this.editor.runCommand('show-offset', {
       el,
       elPos: pos,
@@ -269,6 +272,7 @@ export default {
    * @param {Object} pos
    */
   hideFixedElementOffset() {
+    console.log('hideFixedElementOffset');
     if (this.editor) this.editor.stopCommand('show-offset', { state: 'Fixed' });
   },
 

src/commands/view/ShowOffset.ts

@@ -1,4 +1,5 @@
 import { isUndefined } from 'underscore';
+import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
 import { $ } from '../../common';
 import { isTextNode } from '../../utils/dom';
 import { CommandObject } from './CommandAbstract';
@@ -10,18 +11,22 @@ export default {
   },
 
   run(editor, sender, opts) {
-    var opt = opts || {};
-    var state = opt.state || '';
-    var config = editor.getConfig();
+    const { canvas } = this;
+    const opt = opts || {};
+    const state = opt.state || '';
+    const config = editor.getConfig();
     const zoom = this.em.getZoomDecimal();
-    const el = opt.el || '';
+    const el = opt.el as HTMLElement | undefined;
 
-    if (!config.showOffsets || isTextNode(el) || (!config.showOffsetsSelected && state == 'Fixed')) {
+    if (!config.showOffsets || !el || isTextNode(el) || (!config.showOffsetsSelected && state == 'Fixed')) {
       editor.stopCommand(`${this.id}`, opts);
       return;
     }
 
-    var canvas = editor.Canvas;
+    if (canvas.hasCustomSpot(CanvasSpotBuiltInTypes.Spacing)) {
+      return;
+    }
+
     var pos = { ...(opt.elPos || canvas.getElementPos(el)) };
 
     if (!isUndefined(opt.top)) {
@@ -171,9 +176,10 @@ export default {
     var opt = opts || {};
     var state = opt.state || '';
     var method = this.getOffsetMethod(state);
-    var canvas = editor.Canvas;
+    const { view } = opts;
+    const canvas = this.canvas;
     // @ts-ignore
-    var offsetViewer = canvas[method](opts.view);
+    var offsetViewer = canvas[method](view);
     offsetViewer.style.opacity = 0;
   },
 } as CommandObject<any, { [k: string]: any }>;

src/editor/model/Editor.ts

@@ -634,16 +634,23 @@ export default class EditorModel extends Model {
    */
   setHovered(cmp?: Component | null, opts: any = {}) {
     const upHovered = (cmp?: Component, opts?: any) => {
+      const { config } = this;
       const current = this.getHovered();
-      const type = CanvasSpotBuiltInTypes.Hover;
+      const selectedAll = this.getSelectedAll();
+      const typeHover = CanvasSpotBuiltInTypes.Hover;
+      const typeSpacing = CanvasSpotBuiltInTypes.Spacing;
       this.set('componentHovered', cmp || null, opts);
 
       current?.views.forEach(componentView => {
-        this.Canvas.removeSpot({ type, componentView });
+        this.Canvas.removeSpot({ type: typeHover, componentView });
+        this.Canvas.removeSpot({ type: typeSpacing, componentView });
       });
 
       cmp?.views.forEach(componentView => {
-        this.Canvas.setSpot({ type, componentView });
+        this.Canvas.setSpot({ type: typeHover, componentView });
+        if (!selectedAll.includes(componentView.model) || config.showOffsetsSelected) {
+          this.Canvas.setSpot({ type: typeSpacing, componentView });
+        }
       });
     };
 

src/utils/mixins.ts

@@ -194,11 +194,11 @@ const capitalize = (str: string = '') => str && str.charAt(0).toUpperCase() + st
 const isComponent = (obj: any) => obj && obj.toHTML;
 const isRule = (obj: any) => obj && obj.toCSS;
 
-const getViewEl = <T extends any>(el: any): T | undefined => el.__gjsv;
+const getViewEl = <T extends any>(el?: Node): T | undefined => (el as any)?.__gjsv;
 
-export const getComponentView = (el: Node) => getViewEl<ComponentView>(el);
+export const getComponentView = (el?: Node) => getViewEl<ComponentView>(el);
 
-export const getComponentModel = (el: Node) => getComponentView(el)?.model;
+export const getComponentModel = (el?: Node) => getComponentView(el)?.model;
 
 const setViewEl = (el: any, view: any) => {
   el.__gjsv = view;