using whole note box to drag the box instead of special handle

src/public/javascripts/services/note_detail_relation_map.js

@@ -95,9 +95,9 @@ async function loadNotesAndRelations() {
             const title = data.noteTitles[note.id];
 
             if (note.x && note.y) {
-                await newNode(note.id, title, note.x, note.y);
+                await createNoteBox(note.id, title, note.x, note.y);
             } else {
-                await newNode(note.id, title, curX, curY);
+                await createNoteBox(note.id, title, curX, curY);
 
                 if (curX > 1000) {
                     curX = 100;
@@ -114,14 +114,12 @@ async function loadNotesAndRelations() {
             }
 
             const connection = instance.connect({
-                id: relation.attributeIds,
                 source: relation.sourceNoteId,
                 target: relation.targetNoteId,
                 type: relation.type
             });
 
-            relation.connectionId = connection.id;
-
+            connection.id = relation.attributeId;
             connection.getOverlay("label").setLabel(relation.name);
             connection.canvas.setAttribute("data-connection-id", connection.id);
         }
@@ -154,8 +152,9 @@ function initPanZoom() {
 async function initJsPlumb () {
     instance = jsPlumb.getInstance({
         Endpoint: ["Dot", {radius: 2}],
-        Connector: "Straight",
-        HoverPaintStyle: {stroke: "#777", strokeWidth: 1 },
+        Connector: "StateMachine",
+        ConnectionOverlays: uniDirectionalOverlays,
+        HoverPaintStyle: { stroke: "#777", strokeWidth: 1 },
         Container: "relation-map-canvas"
     });
 
@@ -237,7 +236,7 @@ async function connectionCreatedHandler(info, originalEvent) {
 
     relations.push({ attributeId: attribute.attributeId , targetNoteId, sourceNoteId, name });
 
-    connection.setType("uniDirectional");
+    connection.id = attribute.attributeId;
     connection.getOverlay("label").setLabel(name);
 }
 
@@ -296,14 +295,20 @@ function saveData() {
     noteDetailService.noteChanged();
 }
 
-function initNode(el) {
-    instance.draggable(el, {
-        handle: ".handle",
-        start:function(params) {
-        },
-        drag:function(params) {
+async function createNoteBox(id, title, x, y) {
+    const $noteBox = $("<div>")
+        .addClass("note-box")
+        .prop("id", id)
+        .append($("<span>").addClass("title").html(await linkService.createNoteLink(id, title)))
+        .append($("<div>").addClass("endpoint"))
+        .css("left", x + "px")
+        .css("top", y + "px");
 
-        },
+    instance.getContainer().appendChild($noteBox[0]);
+
+    instance.draggable($noteBox[0], {
+        start:function(params) {},
+        drag:function(params) {},
         stop:function(params) {
             const note = mapData.notes.find(note => note.id === params.el.id);
 
@@ -318,7 +323,7 @@ function initNode(el) {
         }
     });
 
-    instance.makeSource(el, {
+    instance.makeSource($noteBox[0], {
         filter: ".endpoint",
         anchor: "Continuous",
         connectorStyle: { stroke: "#000", strokeWidth: 1 },
@@ -328,31 +333,11 @@ function initNode(el) {
         }
     });
 
-    instance.makeTarget(el, {
+    instance.makeTarget($noteBox[0], {
         dropOptions: { hoverClass: "dragHover" },
         anchor: "Continuous",
         allowLoopback: true
     });
-
-    // this is not part of the core demo functionality; it is a means for the Toolkit edition's wrapped
-    // version of this demo to find out about new nodes being added.
-    //
-    instance.fire("jsPlumbDemoNodeAdded", el);
-}
-
-async function newNode(id, title, x, y) {
-    const $noteBox = $("<div>")
-        .addClass("note-box")
-        .prop("id", id)
-        .append($("<div>").addClass("handle"))
-        .append($("<span>").addClass("title").html(await linkService.createNoteLink(id, title)))
-        .append($("<div>").addClass("endpoint"))
-        .css("left", x + "px")
-        .css("top", y + "px");
-
-    instance.getContainer().appendChild($noteBox[0]);
-
-    initNode($noteBox[0]);
 }
 
 $addChildNotesButton.click(async () => {
@@ -372,7 +357,7 @@ $addChildNotesButton.click(async () => {
 
         mapData.notes.push(note);
 
-        await newNode(note.id, note.title, curX, curY);
+        await createNoteBox(note.id, note.title, curX, curY);
 
         if (curX > 1000) {
             curX = 100;
@@ -396,8 +381,6 @@ $addChildNotesButton.click(async () => {
                 continue;
             }
 
-            relation.connectionId = connection.id;
-
             connection.getOverlay("label").setLabel(relation.name);
             connection.canvas.setAttribute("data-connection-id", connection.id);
         }

src/public/stylesheets/relation-map.css

@@ -77,18 +77,6 @@
 
 path, .jtk-endpoint { cursor:pointer; }
 
-.handle {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 15px;
-    height: 100%;
-    background-color: #aaa;
-    float: left;
-    cursor: move;
-    border-radius: 8px;
-}
-
 .ui-contextmenu {
     z-index: 100;
 }

src/routes/api/attributes.js

@@ -134,20 +134,12 @@ async function deleteRelation(req) {
 
     let attribute = await repository.getEntity(`SELECT * FROM attributes WHERE isDeleted = 0 AND noteId = ? AND type = 'relation' AND name = ? AND value = ?`, [sourceNoteId, name, targetNoteId]);
 
-    if (!attribute) {
-        attribute = new Attribute();
-        attribute.noteId = sourceNoteId;
-        attribute.name = name;
-        attribute.type = 'relation';
-        attribute.value = targetNoteId;
-
+    if (attribute) {
+        attribute.isDeleted = true;
         await attribute.save();
     }
-
-    return attribute;
 }
 
-
 module.exports = {
     updateNoteAttributes,
     updateNoteAttribute,