MouserService refactoring. Dragged or moving items are stored in cont…

…ainer
meshosk · Apr 14, 2024 · da49210 · da49210
1 parent 63901c2
commit da49210
Show file tree

Hide file tree

Showing 13 changed files with 124 additions and 140 deletions.
diff --git 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 → src/components/parts/common/Draggable.ts b/src/components/parts/common/DraggableOver.ts → 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
@@ -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
@@ -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";
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,14 +1,14 @@
 <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";
 
 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
@@ -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,15 +18,15 @@ 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;
             }
         }
     }
 
-    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,30 +69,30 @@ 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;
     }
 }
 
 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;
     }
 }
diff --git 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();