Add support for target spot

src/canvas/config/config.ts

@@ -92,8 +92,10 @@ const config: CanvasConfig = {
   notTextable: ['button', 'a', 'input[type=checkbox]', 'input[type=radio]'],
   allowExternalDrop: true,
   customSpots: {
+    // select: true,
     hover: true,
     spacing: true,
+    target: true,
   },
 };
 

src/canvas/index.ts

@@ -724,7 +724,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
     ['model', 'droppable'].forEach(i => (this[i] = {}));
   }
 
-  setSpot<T extends CanvasSpotProps>(props: Omit<T, 'id'>, opts: AddOptions = {}) {
+  setSpot<T extends CanvasSpotProps>(props: Omit<T, 'id'> & { id?: string }, opts: AddOptions = {}) {
     const spotProps = props as T;
     const spots = this.getSpots<T>(spotProps);
 

src/canvas/model/CanvasSpot.ts

@@ -9,8 +9,8 @@ export enum CanvasSpotBuiltInTypes {
   Select = 'select',
   Hover = 'hover',
   Spacing = 'spacing',
-  Resize = 'resize',
   Target = 'target',
+  Resize = 'resize',
 }
 
 export type CanvasSpotBuiltInType = `${CanvasSpotBuiltInTypes}`;
@@ -78,14 +78,14 @@ export default class CanvasSpot<T extends CanvasSpotProps = CanvasSpotProps> ext
     return this.componentView?.el;
   }
 
-  get style() {
-    const { width, height, x, y } = this.boxRect;
+  getStyle(opts: { boxRect?: BoxRect } = {}): Partial<CSSStyleDeclaration> {
+    const { width, height, x, y } = opts.boxRect || this.boxRect;
 
     return {
-      width,
-      height,
-      top: 0,
-      left: 0,
+      width: `${width}px`,
+      height: `${height}px`,
+      top: '0',
+      left: '0',
       position: 'absolute',
       translate: `${x}px ${y}px`,
     };

src/utils/Sorter.ts

@@ -1,13 +1,12 @@
 import { bindAll, each, isArray, isFunction, isString, result } from 'underscore';
 import { BlockProperties } from '../block_manager/model/Block';
 import CanvasModule from '../canvas';
+import { CanvasSpotBuiltInTypes } from '../canvas/model/CanvasSpot';
 import { $, Collection, Model, View } from '../common';
 import EditorModel from '../editor/model/Editor';
 import { getPointerEvent, isTextNode, off, on } from './dom';
 import { getElement, getModel, matches } from './mixins';
 
-const noop = () => {};
-
 type DropContent = BlockProperties['content'];
 
 interface Dim {
@@ -56,6 +55,15 @@ export interface SorterOptions {
   scale?: number;
 }
 
+const noop = () => {};
+
+const targetSpotType = CanvasSpotBuiltInTypes.Target;
+
+const spotTarget = {
+  id: 'sorter-target',
+  type: targetSpotType,
+};
+
 export default class Sorter extends View {
   opt!: SorterOptions;
   elT!: number;
@@ -396,7 +404,7 @@ export default class Sorter extends View {
 
     if (src) {
       srcModel = this.getSourceModel(src);
-      srcModel && srcModel.set && srcModel.set('status', 'freezed');
+      srcModel?.set && srcModel.set('status', 'freezed');
       this.srcModel = srcModel;
     }
 
@@ -488,8 +496,10 @@ export default class Sorter extends View {
       targetModel.set('status', '');
     }
 
-    if (model && model.set) {
-      model.set('status', 'selected-parent');
+    if (model?.set) {
+      const cv = this.em!.Canvas;
+      cv.setSpot({ ...spotTarget, component: model as any });
+      !cv.hasCustomSpot(targetSpotType) && model.set('status', 'selected-parent');
       this.targetModel = model;
     }
   }
@@ -1208,6 +1218,7 @@ export default class Sorter extends View {
     this.disableTextable();
     this.selectTargetModel();
     this.toggleSortCursor();
+    this.em?.Canvas.removeSpot(spotTarget);
 
     delete this.toMove;
     delete this.eventMove;