drag drop for custom palette start pos

Author: jogibear9988

packages/web-component-designer/package.json

@@ -1,7 +1,7 @@
 {
  "description": "A WYSIWYG designer webcomponent for html components",
  "name": "@node-projects/web-component-designer",
- "version": "0.1.262",
+ "version": "0.1.264",
  "type": "module",
  "main": "./dist/index.js",
  "author": "jochen.kuehner@gmx.de",

packages/web-component-designer/src/elements/services/dragDropService/DragDropService.ts

@@ -60,8 +60,12 @@ export class DragDropService implements IDragDropService {
  const containerPos = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
  const evCoord = designerCanvas.getNormalizedEventCoordinates(event);
  const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
- containerService.place(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
- containerService.finishPlace(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
+
+ let offset = { x: 0, y: 0 };
+ if (elementDefinition.mouseOffset)
+ offset = elementDefinition.mouseOffset;
+ containerService.place(event, designerCanvas, newContainer, offset, { x: 0, y: 0 }, pos, [di]);
+ containerService.finishPlace(event, designerCanvas, newContainer, offset, { x: 0, y: 0 }, pos, [di]);
  requestAnimationFrame(() => {
  designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di], event);
  grp.commit();

packages/web-component-designer/src/elements/services/elementsService/IElementDefinition.ts

@@ -1,3 +1,4 @@
+import { IPoint } from '../../../interfaces/IPoint.js';
 import { IBinding } from '../../item/IBinding.js';
 
 export interface IElementDefinition {
@@ -27,4 +28,9 @@ export interface IElementDefinition {
  */
  tool?: string;
  defaultBinding?: IBinding;
+
+ /**
+ * Offset of mouse pointer when dragged
+ */
+ mouseOffset?: IPoint
 }