[1.1.0] record model position

dog-ears · Feb 23, 2018 · 6f57386 · 6f57386
1 parent 795acde
commit 6f57386
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/app/class/model.ts b/src/app/class/model.ts
@@ -9,16 +9,20 @@ export class Model {
   public use_soft_delete: boolean;
   public schemas: Schema[];
   public is_pivot: boolean;
+  public pos_x: number;
+  public pos_y: number;
 
   private _next_schema_id: number;
-  
+
   constructor() {
     this.id = 0;
     this.name = '';
     this.display_name = '';
     this.use_soft_delete = false;
     this.schemas = [];
     this.is_pivot = false;
+    this.pos_x = 0;
+    this.pos_y = 0;
     this._next_schema_id = 1;
   }
 

diff --git a/src/app/model/model.component.html b/src/app/model/model.component.html
@@ -1,6 +1,6 @@
 <div id="{{myModel.getElementId()}}" class="model-node list-group d-inline-flex">
 
-  <h2 id="{{myModel.getElementH2Id()}}" class="list-group-item list-group-item-primary d-flex" [class.list-group-item-primary]="myModel.is_pivot === false" [class.list-group-item-secondary]="myModel.is_pivot === true" (mousedown)="toggleDragable()" (mouseup)="toggleDragable()">
+  <h2 id="{{myModel.getElementH2Id()}}" class="list-group-item list-group-item-primary d-flex" [class.list-group-item-primary]="myModel.is_pivot === false" [class.list-group-item-secondary]="myModel.is_pivot === true" (mousedown)="startDrag()" (mouseup)="endDrag()">
     <span class="align-self-center mr-auto">{{myModel.id}}:{{myModel.name}}</span>
     <span class="icon-group align-self-center" id="icon01">
       <i *ngIf="myModel.is_pivot===false" class="material-icons ml-3" (click)="editModel()">mode_edit</i>

diff --git a/src/app/model/model.component.ts b/src/app/model/model.component.ts
@@ -1,5 +1,5 @@
 // core
-import { Component, Input } from '@angular/core';
+import { Component, Input, ElementRef } from '@angular/core';
 
 // ngx-bootstrap
 import { BsModalService } from 'ngx-bootstrap/modal';
@@ -28,7 +28,7 @@ export class ModelComponent {
 
   private bsModalRef: BsModalRef;
 
-  constructor( private bsModalService: BsModalService, private dataService: DataService, private jsPlumbService: JsPlumbService ) {}
+  constructor( private bsModalService: BsModalService, private dataService: DataService, private jsPlumbService: JsPlumbService, private el: ElementRef ) {}
 
   ngAfterViewInit(){
     console.log('ModelComponent('+ this.myModel.id +').ngAfterViewInit() is called!');
@@ -65,8 +65,19 @@ export class ModelComponent {
     }} );
   }
 
-  private toggleDragable(){
-    console.log('ModelComponent('+ this.myModel.id +').toggleDragable() is called!');
+  private startDrag():void{
+    console.log('ModelComponent('+ this.myModel.id +').startDrag() is called!');
     this.jsPlumbService.toggleDraggable( this.myModel );
   }
+
+  private endDrag():void{
+    console.log('ModelComponent('+ this.myModel.id +').endDrag() is called!');
+    this.jsPlumbService.toggleDraggable( this.myModel );
+
+    // record position
+    let style_left = this.el.nativeElement.querySelectorAll( '#' + this.myModel.getElementId() )[0].style.left;
+    let style_top = this.el.nativeElement.querySelectorAll( '#' + this.myModel.getElementId() )[0].style.top;
+    this.myModel.pos_x = parseInt(style_left, 10);
+    this.myModel.pos_y = parseInt(style_top, 10);
+  }
 }