From 87b16f33258e5c5a2ffff88d11f5fb602d07dc94 Mon Sep 17 00:00:00 2001 From: zadam Date: Mon, 3 Jun 2019 22:55:59 +0200 Subject: [PATCH] link map WIP --- libraries/springy.js | 735 ++++++++++++++++++ src/entities/link.js | 2 +- src/public/javascripts/dialogs/link_map.js | 123 ++- .../javascripts/services/library_loader.js | 5 +- src/routes/api/link_map.js | 52 ++ src/routes/api/links.js | 17 - src/routes/routes.js | 4 +- src/services/sync_table.js | 4 +- src/services/sync_update.js | 4 +- src/views/dialogs/link_map.ejs | 1 + 10 files changed, 919 insertions(+), 28 deletions(-) create mode 100644 libraries/springy.js create mode 100644 src/routes/api/link_map.js delete mode 100644 src/routes/api/links.js diff --git a/libraries/springy.js b/libraries/springy.js new file mode 100644 index 000000000..0bf5ba44c --- /dev/null +++ b/libraries/springy.js @@ -0,0 +1,735 @@ +/** + * Springy v2.7.1 + * + * Copyright (c) 2010-2013 Dennis Hotson + * + * Permission is hereby granted, free of charge, to any person + * obtaining a copy of this software and associated documentation + * files (the "Software"), to deal in the Software without + * restriction, including without limitation the rights to use, + * copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following + * conditions: + * + * The above copyright notice and this permission notice shall be + * included in all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, + * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES + * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND + * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT + * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, + * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR + * OTHER DEALINGS IN THE SOFTWARE. + */ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(function () { + return (root.returnExportsGlobal = factory()); + }); + } else if (typeof exports === 'object') { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like enviroments that support module.exports, + // like Node. + module.exports = factory(); + } else { + // Browser globals + root.Springy = factory(); + } +}(this, function() { + + var Springy = {}; + + var Graph = Springy.Graph = function() { + this.nodeSet = {}; + this.nodes = []; + this.edges = []; + this.adjacency = {}; + + this.nextNodeId = 0; + this.nextEdgeId = 0; + this.eventListeners = []; + }; + + var Node = Springy.Node = function(id, data) { + this.id = id; + this.data = (data !== undefined) ? data : {}; + + // Data fields used by layout algorithm in this file: + // this.data.mass + // Data used by default renderer in springyui.js + // this.data.label + }; + + var Edge = Springy.Edge = function(id, source, target, data) { + this.id = id; + this.source = source; + this.target = target; + this.data = (data !== undefined) ? data : {}; + + // Edge data field used by layout alorithm + // this.data.length + // this.data.type + }; + + Graph.prototype.addNode = function(node) { + if (!(node.id in this.nodeSet)) { + this.nodes.push(node); + } + + this.nodeSet[node.id] = node; + + this.notify(); + return node; + }; + + Graph.prototype.addNodes = function() { + // accepts variable number of arguments, where each argument + // is a string that becomes both node identifier and label + for (var i = 0; i < arguments.length; i++) { + var name = arguments[i]; + var node = new Node(name, {label:name}); + this.addNode(node); + } + }; + + Graph.prototype.addEdge = function(edge) { + var exists = false; + this.edges.forEach(function(e) { + if (edge.id === e.id) { exists = true; } + }); + + if (!exists) { + this.edges.push(edge); + } + + if (!(edge.source.id in this.adjacency)) { + this.adjacency[edge.source.id] = {}; + } + if (!(edge.target.id in this.adjacency[edge.source.id])) { + this.adjacency[edge.source.id][edge.target.id] = []; + } + + exists = false; + this.adjacency[edge.source.id][edge.target.id].forEach(function(e) { + if (edge.id === e.id) { exists = true; } + }); + + if (!exists) { + this.adjacency[edge.source.id][edge.target.id].push(edge); + } + + this.notify(); + return edge; + }; + + Graph.prototype.addEdges = function() { + // accepts variable number of arguments, where each argument + // is a triple [nodeid1, nodeid2, attributes] + for (var i = 0; i < arguments.length; i++) { + var e = arguments[i]; + var node1 = this.nodeSet[e[0]]; + if (node1 == undefined) { + throw new TypeError("invalid node name: " + e[0]); + } + var node2 = this.nodeSet[e[1]]; + if (node2 == undefined) { + throw new TypeError("invalid node name: " + e[1]); + } + var attr = e[2]; + + this.newEdge(node1, node2, attr); + } + }; + + Graph.prototype.newNode = function(data) { + var node = new Node(this.nextNodeId++, data); + this.addNode(node); + return node; + }; + + Graph.prototype.newEdge = function(source, target, data) { + var edge = new Edge(this.nextEdgeId++, source, target, data); + this.addEdge(edge); + return edge; + }; + + + // add nodes and edges from JSON object + Graph.prototype.loadJSON = function(json) { + /** + Springy's simple JSON format for graphs. + + historically, Springy uses separate lists + of nodes and edges: + + { + "nodes": [ + "center", + "left", + "right", + "up", + "satellite" + ], + "edges": [ + ["center", "left"], + ["center", "right"], + ["center", "up"] + ] + } + + **/ + // parse if a string is passed (EC5+ browsers) + if (typeof json == 'string' || json instanceof String) { + json = JSON.parse( json ); + } + + if ('nodes' in json || 'edges' in json) { + this.addNodes.apply(this, json['nodes']); + this.addEdges.apply(this, json['edges']); + } + } + + + // find the edges from node1 to node2 + Graph.prototype.getEdges = function(node1, node2) { + if (node1.id in this.adjacency + && node2.id in this.adjacency[node1.id]) { + return this.adjacency[node1.id][node2.id]; + } + + return []; + }; + + // remove a node and it's associated edges from the graph + Graph.prototype.removeNode = function(node) { + if (node.id in this.nodeSet) { + delete this.nodeSet[node.id]; + } + + for (var i = this.nodes.length - 1; i >= 0; i--) { + if (this.nodes[i].id === node.id) { + this.nodes.splice(i, 1); + } + } + + this.detachNode(node); + }; + + // removes edges associated with a given node + Graph.prototype.detachNode = function(node) { + var tmpEdges = this.edges.slice(); + tmpEdges.forEach(function(e) { + if (e.source.id === node.id || e.target.id === node.id) { + this.removeEdge(e); + } + }, this); + + this.notify(); + }; + + // remove a node and it's associated edges from the graph + Graph.prototype.removeEdge = function(edge) { + for (var i = this.edges.length - 1; i >= 0; i--) { + if (this.edges[i].id === edge.id) { + this.edges.splice(i, 1); + } + } + + for (var x in this.adjacency) { + for (var y in this.adjacency[x]) { + var edges = this.adjacency[x][y]; + + for (var j=edges.length - 1; j>=0; j--) { + if (this.adjacency[x][y][j].id === edge.id) { + this.adjacency[x][y].splice(j, 1); + } + } + + // Clean up empty edge arrays + if (this.adjacency[x][y].length == 0) { + delete this.adjacency[x][y]; + } + } + + // Clean up empty objects + if (isEmpty(this.adjacency[x])) { + delete this.adjacency[x]; + } + } + + this.notify(); + }; + + /* Merge a list of nodes and edges into the current graph. eg. + var o = { + nodes: [ + {id: 123, data: {type: 'user', userid: 123, displayname: 'aaa'}}, + {id: 234, data: {type: 'user', userid: 234, displayname: 'bbb'}} + ], + edges: [ + {from: 0, to: 1, type: 'submitted_design', directed: true, data: {weight: }} + ] + } + */ + Graph.prototype.merge = function(data) { + var nodes = []; + data.nodes.forEach(function(n) { + nodes.push(this.addNode(new Node(n.id, n.data))); + }, this); + + data.edges.forEach(function(e) { + var from = nodes[e.from]; + var to = nodes[e.to]; + + var id = (e.directed) + ? (id = e.type + "-" + from.id + "-" + to.id) + : (from.id < to.id) // normalise id for non-directed edges + ? e.type + "-" + from.id + "-" + to.id + : e.type + "-" + to.id + "-" + from.id; + + var edge = this.addEdge(new Edge(id, from, to, e.data)); + edge.data.type = e.type; + }, this); + }; + + Graph.prototype.filterNodes = function(fn) { + var tmpNodes = this.nodes.slice(); + tmpNodes.forEach(function(n) { + if (!fn(n)) { + this.removeNode(n); + } + }, this); + }; + + Graph.prototype.filterEdges = function(fn) { + var tmpEdges = this.edges.slice(); + tmpEdges.forEach(function(e) { + if (!fn(e)) { + this.removeEdge(e); + } + }, this); + }; + + + Graph.prototype.addGraphListener = function(obj) { + this.eventListeners.push(obj); + }; + + Graph.prototype.notify = function() { + this.eventListeners.forEach(function(obj){ + obj.graphChanged(); + }); + }; + + // ----------- + var Layout = Springy.Layout = {}; + Layout.ForceDirected = function(graph, stiffness, repulsion, damping, minEnergyThreshold, maxSpeed) { + this.graph = graph; + this.stiffness = stiffness; // spring stiffness constant + this.repulsion = repulsion; // repulsion constant + this.damping = damping; // velocity damping factor + this.minEnergyThreshold = minEnergyThreshold || 0.01; //threshold used to determine render stop + this.maxSpeed = maxSpeed || Infinity; // nodes aren't allowed to exceed this speed + + this.nodePoints = {}; // keep track of points associated with nodes + this.edgeSprings = {}; // keep track of springs associated with edges + }; + + Layout.ForceDirected.prototype.point = function(node) { + if (!(node.id in this.nodePoints)) { + var mass = (node.data.mass !== undefined) ? node.data.mass : 1.0; + this.nodePoints[node.id] = new Layout.ForceDirected.Point(Vector.random(), mass); + } + + return this.nodePoints[node.id]; + }; + + Layout.ForceDirected.prototype.spring = function(edge) { + if (!(edge.id in this.edgeSprings)) { + var length = (edge.data.length !== undefined) ? edge.data.length : 1.0; + + var existingSpring = false; + + var from = this.graph.getEdges(edge.source, edge.target); + from.forEach(function(e) { + if (existingSpring === false && e.id in this.edgeSprings) { + existingSpring = this.edgeSprings[e.id]; + } + }, this); + + if (existingSpring !== false) { + return new Layout.ForceDirected.Spring(existingSpring.point1, existingSpring.point2, 0.0, 0.0); + } + + var to = this.graph.getEdges(edge.target, edge.source); + from.forEach(function(e){ + if (existingSpring === false && e.id in this.edgeSprings) { + existingSpring = this.edgeSprings[e.id]; + } + }, this); + + if (existingSpring !== false) { + return new Layout.ForceDirected.Spring(existingSpring.point2, existingSpring.point1, 0.0, 0.0); + } + + this.edgeSprings[edge.id] = new Layout.ForceDirected.Spring( + this.point(edge.source), this.point(edge.target), length, this.stiffness + ); + } + + return this.edgeSprings[edge.id]; + }; + + // callback should accept two arguments: Node, Point + Layout.ForceDirected.prototype.eachNode = function(callback) { + var t = this; + this.graph.nodes.forEach(function(n){ + callback.call(t, n, t.point(n)); + }); + }; + + // callback should accept two arguments: Edge, Spring + Layout.ForceDirected.prototype.eachEdge = function(callback) { + var t = this; + this.graph.edges.forEach(function(e){ + callback.call(t, e, t.spring(e)); + }); + }; + + // callback should accept one argument: Spring + Layout.ForceDirected.prototype.eachSpring = function(callback) { + var t = this; + this.graph.edges.forEach(function(e){ + callback.call(t, t.spring(e)); + }); + }; + + + // Physics stuff + Layout.ForceDirected.prototype.applyCoulombsLaw = function() { + this.eachNode(function(n1, point1) { + this.eachNode(function(n2, point2) { + if (point1 !== point2) + { + var d = point1.p.subtract(point2.p); + var distance = d.magnitude() + 0.1; // avoid massive forces at small distances (and divide by zero) + var direction = d.normalise(); + + // apply force to each end point + point1.applyForce(direction.multiply(this.repulsion).divide(distance * distance * 0.5)); + point2.applyForce(direction.multiply(this.repulsion).divide(distance * distance * -0.5)); + } + }); + }); + }; + + Layout.ForceDirected.prototype.applyHookesLaw = function() { + this.eachSpring(function(spring){ + var d = spring.point2.p.subtract(spring.point1.p); // the direction of the spring + var displacement = spring.length - d.magnitude(); + var direction = d.normalise(); + + // apply force to each end point + spring.point1.applyForce(direction.multiply(spring.k * displacement * -0.5)); + spring.point2.applyForce(direction.multiply(spring.k * displacement * 0.5)); + }); + }; + + Layout.ForceDirected.prototype.attractToCentre = function() { + this.eachNode(function(node, point) { + var direction = point.p.multiply(-1.0); + point.applyForce(direction.multiply(this.repulsion / 50.0)); + }); + }; + + + Layout.ForceDirected.prototype.updateVelocity = function(timestep) { + this.eachNode(function(node, point) { + // Is this, along with updatePosition below, the only places that your + // integration code exist? + point.v = point.v.add(point.a.multiply(timestep)).multiply(this.damping); + if (point.v.magnitude() > this.maxSpeed) { + point.v = point.v.normalise().multiply(this.maxSpeed); + } + point.a = new Vector(0,0); + }); + }; + + Layout.ForceDirected.prototype.updatePosition = function(timestep) { + this.eachNode(function(node, point) { + // Same question as above; along with updateVelocity, is this all of + // your integration code? + point.p = point.p.add(point.v.multiply(timestep)); + }); + }; + + // Calculate the total kinetic energy of the system + Layout.ForceDirected.prototype.totalEnergy = function(timestep) { + var energy = 0.0; + this.eachNode(function(node, point) { + var speed = point.v.magnitude(); + energy += 0.5 * point.m * speed * speed; + }); + + return energy; + }; + + var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; // stolen from coffeescript, thanks jashkenas! ;-) + + Springy.requestAnimationFrame = __bind(this.requestAnimationFrame || + this.webkitRequestAnimationFrame || + this.mozRequestAnimationFrame || + this.oRequestAnimationFrame || + this.msRequestAnimationFrame || + (function(callback, element) { + this.setTimeout(callback, 10); + }), this); + + + /** + * Start simulation if it's not running already. + * In case it's running then the call is ignored, and none of the callbacks passed is ever executed. + */ + Layout.ForceDirected.prototype.start = function(render, onRenderStop, onRenderStart) { + var t = this; + + if (this._started) return; + this._started = true; + this._stop = false; + + if (onRenderStart !== undefined) { onRenderStart(); } + + Springy.requestAnimationFrame(function step() { + t.tick(0.03); + + if (render !== undefined) { + render(); + } + + // stop simulation when energy of the system goes below a threshold + if (t._stop || t.totalEnergy() < t.minEnergyThreshold) { + t._started = false; + if (onRenderStop !== undefined) { onRenderStop(); } + } else { + Springy.requestAnimationFrame(step); + } + }); + }; + + Layout.ForceDirected.prototype.stop = function() { + this._stop = true; + } + + Layout.ForceDirected.prototype.tick = function(timestep) { + this.applyCoulombsLaw(); + this.applyHookesLaw(); + this.attractToCentre(); + this.updateVelocity(timestep); + this.updatePosition(timestep); + }; + + // Find the nearest point to a particular position + Layout.ForceDirected.prototype.nearest = function(pos) { + var min = {node: null, point: null, distance: null}; + var t = this; + this.graph.nodes.forEach(function(n){ + var point = t.point(n); + var distance = point.p.subtract(pos).magnitude(); + + if (min.distance === null || distance < min.distance) { + min = {node: n, point: point, distance: distance}; + } + }); + + return min; + }; + + // returns [bottomleft, topright] + Layout.ForceDirected.prototype.getBoundingBox = function() { + var bottomleft = new Vector(-2,-2); + var topright = new Vector(2,2); + + this.eachNode(function(n, point) { + if (point.p.x < bottomleft.x) { + bottomleft.x = point.p.x; + } + if (point.p.y < bottomleft.y) { + bottomleft.y = point.p.y; + } + if (point.p.x > topright.x) { + topright.x = point.p.x; + } + if (point.p.y > topright.y) { + topright.y = point.p.y; + } + }); + + var padding = topright.subtract(bottomleft).multiply(0.07); // ~5% padding + + return {bottomleft: bottomleft.subtract(padding), topright: topright.add(padding)}; + }; + + + // Vector + var Vector = Springy.Vector = function(x, y) { + this.x = x; + this.y = y; + }; + + Vector.random = function() { + return new Vector(10.0 * (Math.random() - 0.5), 10.0 * (Math.random() - 0.5)); + }; + + Vector.prototype.add = function(v2) { + return new Vector(this.x + v2.x, this.y + v2.y); + }; + + Vector.prototype.subtract = function(v2) { + return new Vector(this.x - v2.x, this.y - v2.y); + }; + + Vector.prototype.multiply = function(n) { + return new Vector(this.x * n, this.y * n); + }; + + Vector.prototype.divide = function(n) { + return new Vector((this.x / n) || 0, (this.y / n) || 0); // Avoid divide by zero errors.. + }; + + Vector.prototype.magnitude = function() { + return Math.sqrt(this.x*this.x + this.y*this.y); + }; + + Vector.prototype.normal = function() { + return new Vector(-this.y, this.x); + }; + + Vector.prototype.normalise = function() { + return this.divide(this.magnitude()); + }; + + // Point + Layout.ForceDirected.Point = function(position, mass) { + this.p = position; // position + this.m = mass; // mass + this.v = new Vector(0, 0); // velocity + this.a = new Vector(0, 0); // acceleration + }; + + Layout.ForceDirected.Point.prototype.applyForce = function(force) { + this.a = this.a.add(force.divide(this.m)); + }; + + // Spring + Layout.ForceDirected.Spring = function(point1, point2, length, k) { + this.point1 = point1; + this.point2 = point2; + this.length = length; // spring length at rest + this.k = k; // spring constant (See Hooke's law) .. how stiff the spring is + }; + + // Layout.ForceDirected.Spring.prototype.distanceToPoint = function(point) + // { + // // hardcore vector arithmetic.. ohh yeah! + // // .. see http://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment/865080#865080 + // var n = this.point2.p.subtract(this.point1.p).normalise().normal(); + // var ac = point.p.subtract(this.point1.p); + // return Math.abs(ac.x * n.x + ac.y * n.y); + // }; + + /** + * Renderer handles the layout rendering loop + * @param onRenderStop optional callback function that gets executed whenever rendering stops. + * @param onRenderStart optional callback function that gets executed whenever rendering starts. + * @param onRenderFrame optional callback function that gets executed after each frame is rendered. + */ + var Renderer = Springy.Renderer = function(layout, clear, drawEdge, drawNode, onRenderStop, onRenderStart, onRenderFrame) { + this.layout = layout; + this.clear = clear; + this.drawEdge = drawEdge; + this.drawNode = drawNode; + this.onRenderStop = onRenderStop; + this.onRenderStart = onRenderStart; + this.onRenderFrame = onRenderFrame; + + this.layout.graph.addGraphListener(this); + } + + Renderer.prototype.graphChanged = function(e) { + this.start(); + }; + + /** + * Starts the simulation of the layout in use. + * + * Note that in case the algorithm is still or already running then the layout that's in use + * might silently ignore the call, and your optional done callback is never executed. + * At least the built-in ForceDirected layout behaves in this way. + * + * @param done An optional callback function that gets executed when the springy algorithm stops, + * either because it ended or because stop() was called. + */ + Renderer.prototype.start = function(done) { + var t = this; + this.layout.start(function render() { + t.clear(); + + t.layout.eachEdge(function(edge, spring) { + t.drawEdge(edge, spring.point1.p, spring.point2.p); + }); + + t.layout.eachNode(function(node, point) { + t.drawNode(node, point.p); + }); + + if (t.onRenderFrame !== undefined) { t.onRenderFrame(); } + }, this.onRenderStop, this.onRenderStart); + }; + + Renderer.prototype.stop = function() { + this.layout.stop(); + }; + + // Array.forEach implementation for IE support.. + //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach + if ( !Array.prototype.forEach ) { + Array.prototype.forEach = function( callback, thisArg ) { + var T, k; + if ( this == null ) { + throw new TypeError( " this is null or not defined" ); + } + var O = Object(this); + var len = O.length >>> 0; // Hack to convert O.length to a UInt32 + if ( {}.toString.call(callback) != "[object Function]" ) { + throw new TypeError( callback + " is not a function" ); + } + if ( thisArg ) { + T = thisArg; + } + k = 0; + while( k < len ) { + var kValue; + if ( k in O ) { + kValue = O[ k ]; + callback.call( T, kValue, k, O ); + } + k++; + } + }; + } + + var isEmpty = function(obj) { + for (var k in obj) { + if (obj.hasOwnProperty(k)) { + return false; + } + } + return true; + }; + + return Springy; +})); diff --git a/src/entities/link.js b/src/entities/link.js index b9c832903..51e2c150a 100644 --- a/src/entities/link.js +++ b/src/entities/link.js @@ -19,7 +19,7 @@ const dateUtils = require('../services/date_utils'); * @extends Entity */ class Link extends Entity { - static get entityName() { return "links"; } + static get entityName() { return "link_map.js"; } static get primaryKeyName() { return "linkId"; } static get hashedProperties() { return ["linkId", "noteId", "targetNoteId", "type", "isDeleted", "utcDateCreated", "utcDateModified"]; } diff --git a/src/public/javascripts/dialogs/link_map.js b/src/public/javascripts/dialogs/link_map.js index 67f084186..24dc25013 100644 --- a/src/public/javascripts/dialogs/link_map.js +++ b/src/public/javascripts/dialogs/link_map.js @@ -1,20 +1,137 @@ import server from '../services/server.js'; import noteDetailService from "../services/note_detail.js"; +import libraryLoader from "../services/library_loader.js"; + +const $linkMapContainer = $("#link-map-container"); + +const uniDirectionalOverlays = [ + [ "Arrow", { + location: 1, + id: "arrow", + length: 14, + foldback: 0.8 + } ], + [ "Label", { label: "", id: "label", cssClass: "connection-label" }] +]; + +const biDirectionalOverlays = [ + [ "Arrow", { + location: 1, + id: "arrow", + length: 14, + foldback: 0.8 + } ], + [ "Label", { label: "", id: "label", cssClass: "connection-label" }], + [ "Arrow", { + location: 0, + id: "arrow2", + length: 14, + direction: -1, + foldback: 0.8 + } ] +]; + +const inverseRelationsOverlays = [ + [ "Arrow", { + location: 1, + id: "arrow", + length: 14, + foldback: 0.8 + } ], + [ "Label", { label: "", location: 0.2, id: "label-source", cssClass: "connection-label" }], + [ "Label", { label: "", location: 0.8, id: "label-target", cssClass: "connection-label" }], + [ "Arrow", { + location: 0, + id: "arrow2", + length: 14, + direction: -1, + foldback: 0.8 + } ] +]; + +const linkOverlays = [ + [ "Arrow", { + location: 1, + id: "arrow", + length: 14, + foldback: 0.8 + } ] +]; const $dialog = $("#link-map-dialog"); +let jsPlumbInstance = null; + async function showDialog() { glob.activeDialog = $dialog; - const noteId = noteDetailService.getActiveNoteId(); + await libraryLoader.requireLibrary(libraryLoader.RELATION_MAP); + await libraryLoader.requireLibrary(libraryLoader.SPRINGY); - const links = await server.get(`notes/${noteId}/links`); + jsPlumb.ready(() => { + initJsPlumbInstance(); - console.log(links); + loadNotesAndRelations(); + }); $dialog.modal(); } +async function loadNotesAndRelations() { + const noteId = noteDetailService.getActiveNoteId(); + + const links = await server.get(`notes/${noteId}/link-map`); + + const noteIds = new Set(links.map(l => l.noteId).concat(links.map(l => l.targetNoteId))); + + const graph = new Springy.Graph(); + graph.addNodes(...noteIds); + graph.addEdges(links.map(l => [l.noteId, l.targetNoteId])); + + const layout = new Springy.Layout.ForceDirected( + graph, + 400.0, // Spring stiffness + 400.0, // Node repulsion + 0.5 // Damping + ); + + + for (const link of links) { + + } +} + +function initJsPlumbInstance() { + if (jsPlumbInstance) { + // delete all endpoints and connections + // this is done at this point (after async operations) to reduce flicker to the minimum + jsPlumbInstance.deleteEveryEndpoint(); + + // without this we still end up with note boxes remaining in the canvas + $linkMapContainer.empty(); + + return; + } + + this.jsPlumbInstance = jsPlumb.getInstance({ + Endpoint: ["Dot", {radius: 2}], + Connector: "StateMachine", + ConnectionOverlays: uniDirectionalOverlays, + HoverPaintStyle: { stroke: "#777", strokeWidth: 1 }, + Container: this.$relationMapContainer.attr("id") + }); + + this.jsPlumbInstance.registerConnectionType("uniDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: uniDirectionalOverlays }); + + this.jsPlumbInstance.registerConnectionType("biDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: biDirectionalOverlays }); + + this.jsPlumbInstance.registerConnectionType("inverse", { anchor:"Continuous", connector:"StateMachine", overlays: inverseRelationsOverlays }); + + this.jsPlumbInstance.registerConnectionType("link", { anchor:"Continuous", connector:"StateMachine", overlays: linkOverlays }); + + this.jsPlumbInstance.bind("connection", (info, originalEvent) => this.connectionCreatedHandler(info, originalEvent)); +} + export default { showDialog }; \ No newline at end of file diff --git a/src/public/javascripts/services/library_loader.js b/src/public/javascripts/services/library_loader.js index 67a4a4f47..e6354e9ab 100644 --- a/src/public/javascripts/services/library_loader.js +++ b/src/public/javascripts/services/library_loader.js @@ -34,6 +34,8 @@ const RELATION_MAP = { ] }; +const SPRINGY = {js: ["libraries/springy.js"]}; + async function requireLibrary(library) { if (library.css) { library.css.map(cssUrl => cssLoader.requireCss(cssUrl)); @@ -67,5 +69,6 @@ export default { CODE_MIRROR, ESLINT, COMMONMARK, - RELATION_MAP + RELATION_MAP, + SPRINGY } \ No newline at end of file diff --git a/src/routes/api/link_map.js b/src/routes/api/link_map.js new file mode 100644 index 000000000..66568c2da --- /dev/null +++ b/src/routes/api/link_map.js @@ -0,0 +1,52 @@ +"use strict"; + +const sql = require('../../services/sql'); + +async function getLinks(noteIds) { + return await sql.getManyRows(` + SELECT noteId, targetNoteId, type + FROM links + WHERE (noteId IN (???) OR targetNoteId IN (???)) + AND isDeleted = 0 + UNION + SELECT noteId, value, 'relation' + FROM attributes + WHERE (noteId IN (???) OR value IN (???)) + AND type = 'relation' + AND isDeleted = 0 + `, noteIds); +} + +async function getLinkMap(req) { + const {noteId} = req.params; + + let noteIds = new Set([noteId]); + let links = []; + + while (true) { + const newLinks = await getLinks(noteIds); + const newNoteIds = new Set(newLinks.map(l => l.noteId).concat(newLinks.map(l => l.targetNoteId))); + + if (newNoteIds.length === noteIds.length) { + // no new note discovered, no need to search any further + break; + } + + if (newNoteIds.length > 50) { + // to many notes to display + break; + } + + noteIds = newNoteIds; + links = newLinks; + } + + // keep only links coming from and targetting some note in the noteIds set + links = links.filter(l => noteIds.has(l.noteId) && noteIds.has(l.targetNoteId)); + + return links; +} + +module.exports = { + getLinkMap +}; \ No newline at end of file diff --git a/src/routes/api/links.js b/src/routes/api/links.js deleted file mode 100644 index 4e6181fec..000000000 --- a/src/routes/api/links.js +++ /dev/null @@ -1,17 +0,0 @@ -"use strict"; - -const sql = require('../../services/sql'); - -async function getNoteLinks(req) { - const {noteId} = req.params; - - return await sql.getRows(` - SELECT noteId, targetNoteId, type FROM links WHERE (noteId = ? OR targetNoteId = ?) AND isDeleted = 0 - UNION - SELECT noteId, value, 'relation' FROM attributes WHERE (noteId = ? OR value = ?) AND type = 'relation' AND isDeleted = 0 - `, [noteId, noteId, noteId, noteId]); -} - -module.exports = { - getNoteLinks -}; \ No newline at end of file diff --git a/src/routes/routes.js b/src/routes/routes.js index 160dfd6fe..c48a32684 100644 --- a/src/routes/routes.js +++ b/src/routes/routes.js @@ -31,7 +31,7 @@ const senderRoute = require('./api/sender'); const filesRoute = require('./api/file_upload'); const searchRoute = require('./api/search'); const dateNotesRoute = require('./api/date_notes'); -const linksRoute = require('./api/links'); +const linkMapRoute = require('./api/link_map'); const log = require('../services/log'); const express = require('express'); @@ -155,7 +155,7 @@ function register(app) { apiRoute(GET, '/api/attributes/names', attributesRoute.getAttributeNames); apiRoute(GET, '/api/attributes/values/:attributeName', attributesRoute.getValuesForAttribute); - apiRoute(GET, '/api/notes/:noteId/links', linksRoute.getNoteLinks); + apiRoute(GET, '/api/notes/:noteId/link-map', linkMapRoute.getLinkMap); apiRoute(GET, '/api/date-notes/date/:date', dateNotesRoute.getDateNote); apiRoute(GET, '/api/date-notes/month/:month', dateNotesRoute.getMonthNote); diff --git a/src/services/sync_table.js b/src/services/sync_table.js index 4ac6b5972..d7b41e850 100644 --- a/src/services/sync_table.js +++ b/src/services/sync_table.js @@ -33,7 +33,7 @@ async function addRecentNoteSync(noteId, sourceId) { } async function addLinkSync(linkId, sourceId) { - await addEntitySync("links", linkId, sourceId); + await addEntitySync("link_map.js", linkId, sourceId); } async function addAttributeSync(attributeId, sourceId) { @@ -94,7 +94,7 @@ async function fillAllSyncRows() { await fillSyncRows("recent_notes", "noteId"); await fillSyncRows("attributes", "attributeId"); await fillSyncRows("api_tokens", "apiTokenId"); - await fillSyncRows("links", "linkId"); + await fillSyncRows("link_map.js", "linkId"); await fillSyncRows("options", "name", 'isSynced = 1'); } diff --git a/src/services/sync_update.js b/src/services/sync_update.js index 548675357..dcadf6dc8 100644 --- a/src/services/sync_update.js +++ b/src/services/sync_update.js @@ -28,7 +28,7 @@ async function updateEntity(sync, entity, sourceId) { else if (entityName === 'recent_notes') { await updateRecentNotes(entity, sourceId); } - else if (entityName === 'links') { + else if (entityName === 'link_map.js') { await updateLink(entity, sourceId); } else if (entityName === 'attributes') { @@ -164,7 +164,7 @@ async function updateLink(entity, sourceId) { if (!origLink || origLink.utcDateModified <= entity.utcDateModified) { await sql.transactional(async () => { - await sql.replace("links", entity); + await sql.replace("link_map.js", entity); await syncTableService.addLinkSync(entity.linkId, sourceId); }); diff --git a/src/views/dialogs/link_map.ejs b/src/views/dialogs/link_map.ejs index 451b562f5..4eaa6e4b3 100644 --- a/src/views/dialogs/link_map.ejs +++ b/src/views/dialogs/link_map.ejs @@ -9,6 +9,7 @@
+