From da492102461d8edd779ffb54bc924d715356fe1c Mon Sep 17 00:00:00 2001
From: meshosk <meshosk@gmail.com>
Date: Sun, 14 Apr 2024 23:38:36 +0200
Subject: [PATCH] MouserService refactoring. Dragged or moving items are stored
 in container

---
 src/components/parts/common/ConnectPoint.ts   |   6 +-
 .../common/{DraggableOver.ts => Draggable.ts} |  24 +--
 src/components/parts/common/Movable.ts        |   6 +-
 src/components/parts/common/index.ts          |   2 +-
 src/components/parts/models/CircleModel.ts    |   2 +-
 src/components/parts/views/CableView.vue      |   6 +-
 src/components/parts/views/CircleView.vue     |   4 +-
 src/components/parts/views/ConnectorView.vue  |   2 +-
 src/components/parts/views/InputJackView.vue  |   4 +-
 .../services/ConnectionLockService.ts         |  30 ++--
 src/components/services/EditorService.ts      |   5 +-
 src/components/services/MouseServise.ts       | 162 +++++++++---------
 src/views/EditorView.vue                      |  11 +-
 13 files changed, 124 insertions(+), 140 deletions(-)
 rename src/components/parts/common/{DraggableOver.ts => Draggable.ts} (63%)

diff --git a/src/components/parts/common/ConnectPoint.ts b/src/components/parts/common/ConnectPoint.ts
index f12df41..3819995 100644
--- a/src/components/parts/common/ConnectPoint.ts
+++ b/src/components/parts/common/ConnectPoint.ts
@@ -1,4 +1,4 @@
-import {CircuitPart, DraggableOver, HighlightType, Movable} from "@/components/parts/common";
+import {CircuitPart, Draggable, HighlightType, Movable} from "@/components/parts/common";
 import {ref} from "vue";
 
 /**
@@ -12,7 +12,7 @@ export class ConnectPoint {
     private _connectedTo :ConnectPoint[] = [];
     private readonly _name: string;
 
-    private readonly _draggable :DraggableOver = new DraggableOver(this);
+    private readonly _draggable :Draggable = new Draggable(this);
 
     constructor(part: CircuitPart, name :string) {
         this._part = part;
@@ -54,7 +54,7 @@ export class ConnectPoint {
     }
 
 
-    get draggable(): DraggableOver {
+    get draggable(): Draggable {
         return this._draggable;
     }
 
diff --git a/src/components/parts/common/DraggableOver.ts b/src/components/parts/common/Draggable.ts
similarity index 63%
rename from src/components/parts/common/DraggableOver.ts
rename to src/components/parts/common/Draggable.ts
index 38faf57..3e18bd6 100644
--- a/src/components/parts/common/DraggableOver.ts
+++ b/src/components/parts/common/Draggable.ts
@@ -1,15 +1,15 @@
 import { ConnectPoint, Movable} from "./index";
 
 
-export class DraggableOver extends Movable {
+export class Draggable extends Movable {
 
     private _dropAreaElement: any;
     private _canStartDrag = true;
-    private _onDraggedOverAction: (source: DraggableOver, target: DraggableOver) => void = (source, target) => {}
-    private _onDropAction: (droppedItem: DraggableOver) => void = (droppedItem :DraggableOver) => {}
-    private _onDraggingOverAction: (droppedItem: DraggableOver, droppedOVer: DraggableOver) => void = (droppedItem :DraggableOver, droppedOVer: DraggableOver) => {}
+    private _onDraggedOverAction: (source: Draggable, target: Draggable) => void = (source, target) => {}
+    private _onDropAction: (droppedItem: Draggable) => void = (droppedItem :Draggable) => {}
+    private _onDraggingOverAction: (droppedItem: Draggable, droppedOVer: Draggable) => void = (droppedItem :Draggable, droppedOVer: Draggable) => {}
     private _onDraggingOverEndAction: () => void = () => {}
-    private _onDraggingStartAction: (item :DraggableOver) => void = (x) => {}
+    private _onDraggingStartAction: () => void = () => {}
     private _onDraggingEndAction: () => void = () => {}
 
     private readonly _connectPoint: ConnectPoint;
@@ -52,31 +52,31 @@ export class DraggableOver extends Movable {
         this._onDraggingOverEndAction = value;
     }
 
-    get onDraggingOverAction(): (droppedItem: DraggableOver, droppedOVer: DraggableOver) => void {
+    get onDraggingOverAction(): (droppedItem: Draggable, droppedOVer: Draggable) => void {
         return this._onDraggingOverAction;
     }
 
-    set onDraggingOverAction(value: (droppedItem: DraggableOver, droppedOVer: DraggableOver) => void) {
+    set onDraggingOverAction(value: (droppedItem: Draggable, droppedOVer: Draggable) => void) {
         this._onDraggingOverAction = value;
     }
 
-    get onDraggingStartAction(): (item :DraggableOver) => void {
+    get onDraggingStartAction(): () => void {
         return this._onDraggingStartAction;
     }
 
-    set onDraggingStartAction(value: (item :DraggableOver) => void) {
+    set onDraggingStartAction(value: (item :Draggable) => void) {
         this._onDraggingStartAction = value;
     }
 
-    get onDraggedOverAction(): (source: DraggableOver, target: DraggableOver) => void {
+    get onDraggedOverAction(): (source: Draggable, target: Draggable) => void {
         return this._onDraggedOverAction;
     }
 
-    set onDraggedOverAction(value: (source: DraggableOver, target: DraggableOver)  => void) {
+    set onDraggedOverAction(value: (source: Draggable, target: Draggable)  => void) {
         this._onDraggedOverAction = value;
     }
 
-    set onDropAction(value: (droppedItem: DraggableOver) => void) {
+    set onDropAction(value: (droppedItem: Draggable) => void) {
         this._onDropAction = value;
     }
 
diff --git a/src/components/parts/common/Movable.ts b/src/components/parts/common/Movable.ts
index 3861a4c..f025858 100644
--- a/src/components/parts/common/Movable.ts
+++ b/src/components/parts/common/Movable.ts
@@ -28,7 +28,7 @@ export class Movable extends Clickable {
 
     constructor() {
         super();
-        this._mouseService =  MouseService.inject();
+        this._mouseService =  (MouseService.inject() as MouseService);
         // computed need to be initialized in constructor
         this._xShifted = computed(() => {
             return this._x.value + this._xShift.value;
@@ -39,12 +39,12 @@ export class Movable extends Clickable {
 
     }
 
-    onMouseDown(e: MouseEvent) {
+    onMouseDown(e: MouseEvent|null) {
         this.mousePressed()
         this.mouseService.register(this);
     }
 
-    mouseMoved(deltaX :number, deltaY :number) {
+    moveByDelta(deltaX :number, deltaY :number) {
         if (this.mouseIsDown.value) {
             if (this.isDragged.value != true) {
                 this.isDragged.value = true;
diff --git a/src/components/parts/common/index.ts b/src/components/parts/common/index.ts
index 156e063..fcc98d7 100644
--- a/src/components/parts/common/index.ts
+++ b/src/components/parts/common/index.ts
@@ -1,6 +1,6 @@
 export * from "./Clickable";
 export * from "./Movable";
-export * from "./DraggableOver";
+export * from "./Draggable";
 export * from "./ConnectPoint";
 export * from "./CircuitPart";
 export * from "../../services/ConnectionLockService";
\ No newline at end of file
diff --git a/src/components/parts/models/CircleModel.ts b/src/components/parts/models/CircleModel.ts
index 801b403..b310e00 100644
--- a/src/components/parts/models/CircleModel.ts
+++ b/src/components/parts/models/CircleModel.ts
@@ -1,4 +1,4 @@
-import {ConnectPoint, CircuitPart, Movable, DraggableOver} from "@/components/parts/common";
+import {ConnectPoint, CircuitPart, Movable, Draggable} from "@/components/parts/common";
 import {ref, watch} from "vue";
 
 /**
diff --git a/src/components/parts/views/CableView.vue b/src/components/parts/views/CableView.vue
index 13d364a..99b80e0 100644
--- a/src/components/parts/views/CableView.vue
+++ b/src/components/parts/views/CableView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {ConnectionLockService, DraggableOver, HighlightType, Movable} from "@/components/parts/common";
+import {ConnectionLockService, Draggable, HighlightType, Movable} from "@/components/parts/common";
 import Connector from "@/components/parts/views/ConnectorView.vue";
 import {CableModel} from "@/components/parts/models";
 import {EditorService} from "@/components/services/EditorService";
@@ -22,11 +22,11 @@ const connectionLock =  ConnectionLockService.inject();
 const editorService = EditorService.inject();
 const color = ref(model.color);
 
-const onDragStart = (item :DraggableOver) => {
+const onDragStart = (item :Draggable) => {
     connectionLock.releaseAllLockFor(item);
 }
 
-function onDragOver(source :DraggableOver, target :DraggableOver) {
+function onDragOver(source :Draggable, target :Draggable) {
   connectionLock.lock(source, target);
 
   // position correction, when cable is connected on cable
diff --git a/src/components/parts/views/CircleView.vue b/src/components/parts/views/CircleView.vue
index 1e74009..bdf71f2 100644
--- a/src/components/parts/views/CircleView.vue
+++ b/src/components/parts/views/CircleView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {ref, toRaw, watch} from 'vue'
-import {Movable, DraggableOver,} from "@/components/parts/common";
+import {Movable, Draggable,} from "@/components/parts/common";
 import ConnectorView from "@/components/parts/views/ConnectorView.vue";
 import {CircleModel} from "@/components/parts/models";
 
@@ -16,7 +16,7 @@ watch(model.m.mouseIsDown, async() => {
   }
 })
 
-function onDragOver(source :DraggableOver, target :DraggableOver) {
+function onDragOver(source :Draggable, target :Draggable) {
   source.x.value = target.xShifted.value;
   source.y.value = target.yShifted.value;
 }
diff --git a/src/components/parts/views/ConnectorView.vue b/src/components/parts/views/ConnectorView.vue
index 6749b9e..880894c 100644
--- a/src/components/parts/views/ConnectorView.vue
+++ b/src/components/parts/views/ConnectorView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {onMounted, ref, watch} from "vue";
-import {ConnectPoint, DraggableOver, HighlightType} from "@/components/parts/common";
+import {ConnectPoint, Draggable, HighlightType} from "@/components/parts/common";
 
 const props = defineProps(['onDragStart','onDraggedOver', "isDraggable", 'connection', 'xShift', 'yShift'])
 
diff --git a/src/components/parts/views/InputJackView.vue b/src/components/parts/views/InputJackView.vue
index c0c90a2..f9df1e4 100644
--- a/src/components/parts/views/InputJackView.vue
+++ b/src/components/parts/views/InputJackView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ConnectorView from "@/components/parts/views/ConnectorView.vue";
-import {DraggableOver, Movable} from "@/components/parts/common";
+import {Draggable, Movable} from "@/components/parts/common";
 import {InputJackModel} from "@/components/parts/models";
 import Connector from "@/components/parts/views/ConnectorView.vue";
 import {toRaw} from "vue";
@@ -8,7 +8,7 @@ import {toRaw} from "vue";
 const props = defineProps(['model'])
 const model :InputJackModel = toRaw(props.model); // wrapped in proxy
 
-function onDragOver(source :DraggableOver, target :DraggableOver) {
+function onDragOver(source :Draggable, target :Draggable) {
   source.x.value = target.xShifted.value;
   source.y.value = target.yShifted.value;
 }
diff --git a/src/components/services/ConnectionLockService.ts b/src/components/services/ConnectionLockService.ts
index 4ac7767..1a51e70 100644
--- a/src/components/services/ConnectionLockService.ts
+++ b/src/components/services/ConnectionLockService.ts
@@ -1,12 +1,12 @@
 import {watch, inject} from "vue";
-import type {DraggableOver} from "@/components/parts/common/DraggableOver";
+import type {Draggable} from "@/components/parts/common/Draggable";
 import {BaseService} from "@/components/services/BaseService";
 
 export class ConnectionLockService extends BaseService<ConnectionLockService>() {
 
     private readonly _watchers: Map<MapKey, WatcherItem> = new Map<MapKey, WatcherItem>();
 
-    lock( a: DraggableOver, b: DraggableOver) {
+    lock(a: Draggable, b: Draggable) {
         this.cleanInactiveLocks();
         let key = this.findWatcherKey( a, b);
         if (key == null) {
@@ -18,7 +18,7 @@ export class ConnectionLockService extends BaseService<ConnectionLockService>()
         }
     }
 
-    private findWatcherKey(a: DraggableOver, b: DraggableOver){
+    private findWatcherKey(a: Draggable, b: Draggable){
         for (let key  of this._watchers.keys()) {
             if (key.has(a, b)) {
                 return key;
@@ -26,7 +26,7 @@ export class ConnectionLockService extends BaseService<ConnectionLockService>()
         }
     }
 
-    public releaseLock(a: DraggableOver, b: DraggableOver) {
+    public releaseLock(a: Draggable, b: Draggable) {
         let key =  this.findWatcherKey(a,b);
         if (key != null) {
             let watcher = this._watchers.get(key);
@@ -42,7 +42,7 @@ export class ConnectionLockService extends BaseService<ConnectionLockService>()
         this._watchers.clear();
     }
 
-    public releaseAllLockFor(a: DraggableOver){
+    public releaseAllLockFor(a: Draggable){
         let keys = [];
         for (let key  of this._watchers.keys()) {
             if (key.isInKey(a)) {
@@ -69,18 +69,18 @@ export class ConnectionLockService extends BaseService<ConnectionLockService>()
 }
 
 class MapKey {
-    private readonly a :DraggableOver;
-    private readonly b :DraggableOver;
-    constructor(a: DraggableOver, b: DraggableOver) {
+    private readonly a :Draggable;
+    private readonly b :Draggable;
+    constructor(a: Draggable, b: Draggable) {
         this.a = a;
         this.b = b;
     }
 
-    public has(a :DraggableOver, b :DraggableOver) :boolean{
+    public has(a :Draggable, b :Draggable) :boolean{
         return this.a == a && this.b == b || this.a == b && this.b == a;
     }
 
-    public isInKey(a :DraggableOver){
+    public isInKey(a :Draggable){
         return this.a == a || this.b == a;
     }
 }
@@ -88,11 +88,11 @@ class MapKey {
 class WatcherItem {
     private readonly _watcher;
     private readonly _releaseAction;
-    private readonly _a: DraggableOver;
-    private readonly _b: DraggableOver;
+    private readonly _a: Draggable;
+    private readonly _b: Draggable;
     private _isActive = true;
 
-    constructor(a :DraggableOver, b :DraggableOver) {
+    constructor(a :Draggable, b :Draggable) {
         this._a = a;
         this._b = b;
         a.connectPoint.connect(b.connectPoint);
@@ -122,11 +122,11 @@ class WatcherItem {
         return this._isActive;
     }
 
-    get a(): DraggableOver {
+    get a(): Draggable {
         return this._a;
     }
 
-    get b(): DraggableOver {
+    get b(): Draggable {
         return this._b;
     }
 }
\ No newline at end of file
diff --git a/src/components/services/EditorService.ts b/src/components/services/EditorService.ts
index da8a7b0..d574421 100644
--- a/src/components/services/EditorService.ts
+++ b/src/components/services/EditorService.ts
@@ -2,7 +2,7 @@ import * as modelRef from "@/components/parts/models";
 import {ref, inject, toRaw} from "vue";
 import  * as Vue from "@vue/reactivity"
 import {CircuitPart, ConnectPoint, HighlightType} from "@/components/parts/common";
-import {InputJackModel} from "@/components/parts/models";
+import {CircleModel, InputJackModel} from "@/components/parts/models";
 import {BaseService} from "@/components/services/BaseService";
 
 export class EditorService extends BaseService<EditorService>() {
@@ -16,7 +16,7 @@ export class EditorService extends BaseService<EditorService>() {
         super();
         this._parts = ref([]);
     }
-    public addPart(partName :string){
+    public addPart(partName :string) : CircleModel{
         // @ts-ignore
         let instance = new modelRef[partName]();
          if (instance == null) {
@@ -26,7 +26,6 @@ export class EditorService extends BaseService<EditorService>() {
         this.reloadTempCollections();
         return instance;
     }
-
     public clearParts(){
         this._parts.value = [];
         this.reloadTempCollections();
diff --git a/src/components/services/MouseServise.ts b/src/components/services/MouseServise.ts
index 17e47a5..97a9c0c 100644
--- a/src/components/services/MouseServise.ts
+++ b/src/components/services/MouseServise.ts
@@ -1,5 +1,5 @@
 import {ref, inject, toRaw} from 'vue'
-import {DraggableOver, Movable, Clickable} from "@/components/parts/common";
+import {Draggable, Movable, Clickable} from "@/components/parts/common";
 import {EditorService} from "@/components/services/EditorService";
 import {BaseService} from "@/components/services/BaseService";
 import {ContextMenuService} from "@/components/services/ContextMenuService";
@@ -10,18 +10,7 @@ export class MouseService extends BaseService<MouseService>() {
      * List of all dragged items - for future
      * @private
      */
-    private _draggedItems :Object[] = [];
-
-    /**
-     * Item that is dragged - drag starter
-     * @private
-     */
-    private _dragSource :DraggableOver|null = null;
-    /**
-     * Ref to dragged over item. This item may not be the final destination
-     * @private
-     */
-    private _dragOverTMP :DraggableOver|null = null;
+    private _movingItems :Movable[] = [];
 
     /**
      * Previous x mouse position, for delta calculation
@@ -39,20 +28,24 @@ export class MouseService extends BaseService<MouseService>() {
      * @private
      */
     private _isDown = false;
+    /**
+     * TMP var, so ondragover event is not fired multiple times when hovering on the same item
+     * @private
+     */
+    private _lastDragOver: Draggable | null = null;
 
     /**
-     * Using shady-around-vue-play to get over which draggable component is set position. Dragged
-     * item is ignored. This should be changed to use Vue API in future.
+     * Get first item under cursor for drag over
      * @param mouseX
      * @param mouseY
      * @private
      */
-    private getDragUnderMouse(mouseX :number, mouseY :number) :DraggableOver|null {
+    private getDragOverItemUnderMouse(mouseX :number, mouseY :number) :Draggable|null {
         // get list of elements
         for (let part of EditorService.inject().parts.value) {
             for (let pin of part.internalPins) {
                 if (pin.draggable.isIn(mouseX, mouseY)) {
-                    return <DraggableOver>(<any>toRaw(pin.draggable))
+                    return <Draggable>(<any>toRaw(pin.draggable))
                 }
             }
         }
@@ -65,110 +58,109 @@ export class MouseService extends BaseService<MouseService>() {
         ContextMenuService.inject().closeMenu();
     }
 
+
+    private  get movingItem() :Movable|null {
+        // return value onlu if only one item si moved
+        if (this._movingItems.length == 1 && this._movingItems[0] instanceof Movable) {
+            return (this._movingItems[0] as Movable);
+        }
+        return null;
+    }
     onMouseUp(e: MouseEvent) {
+
         this._isDown = false;
 
-        let dragTarget = this.getDragUnderMouse(e.clientX, e.clientY);
-        let sourceTarget = this._dragSource;
+        // on mouse release find item that is first under cursor and is tno drag start
+        let dragOverTarget = this.getDragOverItemUnderMouse(e.clientX, e.clientY);
 
+        let sourceTarget = this.movingItem;
+        // got all, so clear all moving items
         this.clearRegistered();
 
-        if (sourceTarget != null) {
-            if (dragTarget != null) {
-                dragTarget.onDraggedOverAction(sourceTarget, dragTarget);
-                sourceTarget.onDraggedOverAction(sourceTarget, dragTarget);
+        // next check if is possible to drag over
+        if (sourceTarget != null && sourceTarget instanceof Draggable) {
+            if (dragOverTarget != null) {
+                // if so, hit evvents
+                dragOverTarget.onDraggedOverAction(sourceTarget, dragOverTarget);
+                sourceTarget.onDraggedOverAction(sourceTarget, dragOverTarget);
             }
             sourceTarget.onDraggingEndAction();
         }
-
     }
 
     onMouseMove(e: MouseEvent) {
-        if (this._isDown) {
-
+        // if there are item to drag, then drag them
+        if (this._movingItems.length > 0) {
+            // ge mouse deltas
             let deltaX = e.clientX - this._mouseX;
             let deltaY = e.clientY - this._mouseY;
 
-            this._draggedItems.forEach((m) => {
+            // move all moving items
+            this._movingItems.forEach((m) => {
+                // do not move by mouse draggable items that cannot be dragged
+                if (m instanceof Draggable && m.canStartDrag == false) {
+                    return;
+                }
                 if (m instanceof Movable) {
-                    (m as Movable).mouseMoved(deltaX, deltaY);
+                    (m as Movable).moveByDelta(deltaX, deltaY);
                 }
             });
+            //store actual mouse position for next move delta
             this._mouseX = e.clientX;
             this._mouseY = e.clientY;
         }
 
-        if (this._dragSource != null) {
-            let under = this.getDragUnderMouse(e.clientX, e.clientY);
-            if (this._dragOverTMP != under) {
-                this._dragOverTMP?.onDraggingOverEndAction();
+        // if there is item directly dragged to drop
+        if (this.movingItem != null && this.movingItem instanceof Draggable) {
+            if (this.movingItem.canStartDrag === false) {
+                return;
             }
-            if (under != null) {
-                under.onDraggingOverAction(under, this._dragSource);
-                this._dragOverTMP = under;
+            // get first item that is under mouse and it is not dragged
+            let under = this.getDragOverItemUnderMouse(e.clientX, e.clientY);
+            // check if dragged over item is not the same as last time
+            if (under != null && this._lastDragOver != under) {
+                // hit drag over event on not moved item
+                this._lastDragOver?.onDraggingOverEndAction();
+                // hit drag over event on dragged item
+                under.onDraggingOverAction(under, this.movingItem);
+                // store last item that is dragged over
+                this._lastDragOver = under;
             }
         }
     }
 
-    register(instance: Movable) {
 
-        if (instance instanceof DraggableOver) {
-            let drg =  (instance as DraggableOver)
-            if (drg.canStartDrag === false) {
-                return;
-            }
-            this.registerDragSource(drg);
-        }
+    public register(items: Movable|Array<Movable>) {
 
-        this._draggedItems.push(instance);
-        instance.startMovingAction();
-    }
-
-    unregister(instance: Movable){
-        let index = this._draggedItems.indexOf(instance);
-        if (index>0) {
-            this._draggedItems.splice(index,1);
+        let i = []
+        // if there is draggable convert it to array
+        if (items instanceof Movable) {
+            i.push(items);
+        } else {
+            i = (items as Array<Movable>);
         }
-    }
 
-    clearRegistered(){
-        this._dragSource = null;
-        this._draggedItems.forEach((m) => {
-            if (m instanceof Movable) {
-                (m as Movable).stopMovingAction();
-            }
+        for (let item of i) {
+            // first put in moving items
+            let instance = item as Movable;
+            if (instance == null) continue;
 
-            if (m instanceof Clickable) {
-                (m as Clickable).mouseReleased();
-            }
-        });
-        this._draggedItems = [];
-    }
+            this._movingItems.push(instance);
+            instance.startMovingAction();
 
-    get isDown(): boolean {
-        return this._isDown;
-    }
-
-    checkForDraggingOver(item : DraggableOver|null) {
-        if (this._dragSource !== null) {
-            if (item != null && item != this._dragSource) {
-                item.onDraggingOverAction(item, this._dragSource);
+            // check if item is draggable
+            if (this.movingItem != null && this.movingItem instanceof Draggable && this.movingItem.canStartDrag === true) {
+                    // if it is draggable and it is only one start dragging
+                   this.movingItem.onDraggingStartAction();
             }
         }
     }
-    registerDragSource(item : DraggableOver) {
-        if (!this._dragSource){
-            this._dragSource = item;
-            this._dragSource?.onDraggingStartAction(item);
-        }
-    }
-
 
-    get mouseX(): number {
-        return this._mouseX;
-    }
-
-    get mouseY(): number {
-        return this._mouseY;
+    clearRegistered(){
+        this._movingItems.forEach((m) => {
+            (m as Movable).stopMovingAction();
+            (m as Clickable).mouseReleased();
+        });
+        this._movingItems = [];
     }
 }
\ No newline at end of file
diff --git a/src/views/EditorView.vue b/src/views/EditorView.vue
index 6d70f1d..ac09bd3 100644
--- a/src/views/EditorView.vue
+++ b/src/views/EditorView.vue
@@ -2,20 +2,13 @@
 import {MouseService} from "@/components/services/MouseServise";
 import {EditorService} from "@/components/services/EditorService";
 import *  as vueComps from "@/components/parts/views";
-import {SerializationService} from "@/components/services/SerializationService";
-import {onMounted, ref, toRaw} from "vue";
 import ContextMenuView from "@/components/parts/views/ContextMenuView.vue";
-import {ContextMenuService} from "@/components/services/ContextMenuService";
-
-
 
 var mouseService = MouseService.inject();
 var editorService = EditorService.inject();
-var serializationService = SerializationService.inject();
-var cms = ContextMenuService.inject();
-
 function add(type :string) {
-  editorService.addPart(type);
+  let part = editorService.addPart(type);
+  part.m.onMouseDown(null);
 }
 
 function showRoute(){