From 523663df58e18498ccc8a908620c7558ee85c958 Mon Sep 17 00:00:00 2001
From: jahn <aju960219@gmail.com>
Date: Thu, 15 Oct 2020 10:21:11 -0700
Subject: [PATCH] Fix drag and drop bug #120

---
 src/CodeSnippetDisplay.tsx | 17 ++++++++++++++---
 src/CodeSnippetWidget.tsx  |  1 +
 style/index.css            | 10 ++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/CodeSnippetDisplay.tsx b/src/CodeSnippetDisplay.tsx
index 006ae82..045631d 100644
--- a/src/CodeSnippetDisplay.tsx
+++ b/src/CodeSnippetDisplay.tsx
@@ -106,7 +106,7 @@ const CODE_SNIPPET_CREATE_NEW_BTN = 'jp-createSnippetBtn';
 /**
  * The threshold in pixels to start a drag event.
  */
-const DRAG_THRESHOLD = 5;
+const DRAG_THRESHOLD = 3;
 
 /**
  * A class used to indicate a snippet item.
@@ -354,6 +354,9 @@ export class CodeSnippetDisplay extends React.Component<
     target.addEventListener('mouseup', this._evtMouseUp, true);
     target.addEventListener('mousemove', this.handleDragMove, true);
 
+    // since a browser has its own drag'n'drop support for images and some other elements.
+    target.ondragstart = () => false;
+
     event.preventDefault();
   }
 
@@ -369,6 +372,9 @@ export class CodeSnippetDisplay extends React.Component<
   }
 
   private handleDragMove(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
     const data = this._dragData;
 
     if (
@@ -383,7 +389,12 @@ export class CodeSnippetDisplay extends React.Component<
       const idx = (event.target as HTMLElement).id;
       const codeSnippet = this.state.codeSnippets[parseInt(idx)];
 
-      this.startDrag(data.dragImage, codeSnippet, event.clientX, event.clientY);
+      void this.startDrag(
+        data.dragImage,
+        codeSnippet,
+        event.clientX,
+        event.clientY
+      );
     }
   }
 
@@ -404,7 +415,7 @@ export class CodeSnippetDisplay extends React.Component<
   ): boolean {
     const dx = Math.abs(nextX - prevX);
     const dy = Math.abs(nextY - prevY);
-    return dx >= DRAG_THRESHOLD || dy >= DRAG_THRESHOLD;
+    return dx >= 0 || dy >= DRAG_THRESHOLD;
   }
 
   private async startDrag(
diff --git a/src/CodeSnippetWidget.tsx b/src/CodeSnippetWidget.tsx
index c819a12..c5ba36f 100644
--- a/src/CodeSnippetWidget.tsx
+++ b/src/CodeSnippetWidget.tsx
@@ -67,6 +67,7 @@ export class CodeSnippetWidget extends ReactWidget {
     this.openCodeSnippetEditor.bind(this);
     this.updateCodeSnippets.bind(this);
     this.codeSnippetManager = CodeSnippetContentsService.getInstance();
+    this.node.setAttribute('data-lm-dragscroll', 'true');
   }
 
   get codeSnippetWidgetModel(): CodeSnippetWidgetModel {
diff --git a/style/index.css b/style/index.css
index 60bc2c4..e9a8857 100644
--- a/style/index.css
+++ b/style/index.css
@@ -42,6 +42,7 @@
   text-overflow: ellipsis;
   color: var(--jp-ui-font-color0);
   display: flex;
+  align-items: center;
 }
 
 .jp-codeSnippetsContainer-button {
@@ -69,6 +70,15 @@
   background-color: var(--jp-layout-color2);
 }
 
+#jp-codeSnippet-rename {
+  background-color: var(--jp-layout-color2);
+  border: 1px solid var(--jp-layout-color1);
+  border-radius: 4px;
+  font-size: var(--jp-ui-font-size1);
+  box-sizing: border-box;
+  margin: 0px;
+}
+
 .jp-codeSnippet-metadata {
   flex-basis: 95%;
   width: 100%;