From b4285c7501a3c391f45635553c377a578488d957 Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Wed, 11 Mar 2020 13:50:18 +0800
Subject: [PATCH] feat: fix drag issue

---
 src/app/app.module.ts                     | 6 ++++--
 src/app/features/path/path.component.html | 4 +++-
 src/app/features/path/path.component.ts   | 2 +-
 src/app/shared/shared.module.ts           | 7 ++-----
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4bd22dde..65df7e23 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,7 +11,7 @@ import { AtomDetailsComponent } from './features/atom-details/atom-details.compo
 import { FooterComponent } from './features/footer/footer.component';
 import { AppPhaseComponent } from './features/app-phase/app-phase.component';
 import { AppWikiComponent } from './features/app-wiki/app-wiki.component';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { HomeComponent } from './presentation/home/home.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CustomMaterialModule } from './shared/custom-material.module';
@@ -21,7 +21,8 @@ import { DesignComponent } from './presentation/design/design.component';
 import { PractiseComponent } from './presentation/practise/practise.component';
 import { ManualComponent } from './presentation/manual/manual.component';
 import { PathComponent } from './features/path/path.component';
-import {FormsModule} from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { DragulaModule } from 'ng2-dragula';
 
 @NgModule({
   declarations: [
@@ -50,6 +51,7 @@ import {FormsModule} from '@angular/forms';
     BrowserAnimationsModule,
     FormsModule,
     CustomMaterialModule,
+    DragulaModule.forRoot(),
   ],
   providers: [Title],
   bootstrap: [AppComponent]
diff --git a/src/app/features/path/path.component.html b/src/app/features/path/path.component.html
index 68fc54f9..7799f274 100644
--- a/src/app/features/path/path.component.html
+++ b/src/app/features/path/path.component.html
@@ -27,13 +27,15 @@ <h2>{{pipe.title}}</h2>
         <div class='container'
              *ngFor="let pipe of pipeData;let i = index"
              id="{{i}}_pipe"
+             dragula="ITEMS"
+             [(dragulaModel)]="pipe.items"
              [ngStyle]="getContainerStyle(pipe)">
 
           <div
             class="editable"
             #itemElement
             id="pipe{{i}}_child{{j}}"
-            (click)="enableEdit(i, j)"
+            (dblclick)="enableEdit(i, j)"
             [ngStyle]="getEditableStyle()"
             (keydown.enter)="updateItem(i, j, $event)"
             ngDefaultControl
diff --git a/src/app/features/path/path.component.ts b/src/app/features/path/path.component.ts
index c6b0c6e5..55d184d8 100644
--- a/src/app/features/path/path.component.ts
+++ b/src/app/features/path/path.component.ts
@@ -176,7 +176,7 @@ export class PathComponent implements OnInit {
     const filterElements = this.itemElements.filter((el) => {
       return el.nativeElement.id === elementId;
     });
-    if (filterElements.length > 0 ) {
+    if (filterElements.length > 0) {
       const element = filterElements[0];
       this.renderer.setProperty(element.nativeElement, 'contentEditable', true);
     }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index a3e70186..61435ce8 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -5,7 +5,6 @@ import { RouterModule } from '@angular/router';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { MarkdownRenderComponent } from './components/markdown-render/markdown-render.component';
 import { MarkdownModule } from 'ngx-markdown';
-import {DragulaModule} from 'ng2-dragula';
 
 @NgModule({
   imports: [
@@ -14,8 +13,7 @@ import {DragulaModule} from 'ng2-dragula';
     FormsModule,
     HttpClientModule,
     ReactiveFormsModule,
-    MarkdownModule.forRoot({ loader: HttpClient }),
-    DragulaModule.forRoot(),
+    MarkdownModule.forRoot({ loader: HttpClient })
   ],
   declarations: [
     MarkdownRenderComponent,
@@ -26,8 +24,7 @@ import {DragulaModule} from 'ng2-dragula';
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    MarkdownRenderComponent,
-    DragulaModule
+    MarkdownRenderComponent
   ],
   entryComponents: []
 })