tw5-vis-network 10.5.5

package/plugins/vis-network/license.tid

@@ -0,0 +1,29 @@
+title: $:/plugins/flibbles/vis-network/license
+
+\rules except wikilink
+
+Copyright (c) 2025, [[Cameron Fischer|https://github.com/flibbles/tw5-vis-network?tab=BSD-2-Clause-1-ov-file]]
+
+!! The ''vis-network'' license
+
+The MIT License (MIT)
+
+Copyright © 2014-2018 [[Almende B.V.|https://github.com/vis/vis-network]]
+
+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.

package/plugins/vis-network/messages/graph-center-node.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.name = "graph-center-node";
+
+exports.parameters = {
+	tiddler: {type: "string"},
+	scale: {type: "number"}
+};
+
+exports.handle = function(message, params) {
+	if (params.tiddler) {
+		var settings = {}
+		if (params.scale !== undefined) {
+			settings.scale = params.scale;
+		}
+		settings.animation = true;
+		this.vis.focus(params.tiddler, settings);
+	}
+};

package/plugins/vis-network/messages/graph-export-png.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var preamble = "data:image/png;base64,";
+
+exports.name = "graph-export-png";
+
+exports.parameters = {
+	targetTiddler: {type: "string"},
+};
+
+exports.handle = function(message, params) {
+	if (params.targetTiddler) {
+		this.wiki.addTiddler({
+			title: params.targetTiddler,
+			type: "image/png",
+			text: getCanvas(this.canvasElement)
+		});
+	}
+};
+
+
+function getCanvas(canvas) {
+	var data = canvas.toDataURL('image/png');
+	if ($tw.utils.startsWith(data, preamble)) {
+		data = data.substr(preamble.length);
+	}
+	return data;
+};

package/plugins/vis-network/messages/graph-move-view.js

@@ -0,0 +1,52 @@
+"use strict";
+
+exports.name = "graph-move-view";
+
+exports.parameters = {
+	x: {type: "number"},
+	y: {type: "number"},
+	// Only scale or scaleBy should be supplied
+	scale: {type: "number"},
+	scaleBy: {type: "number"},
+	/* For now, we're not going to expose the animation features.
+	 * It's easier to add them later than to remove them
+	ms: {type: "number"},
+	easingFunction: {type: "enum", default: "linear", values: [
+		"linear",
+		"easeInQuad",
+		"easeOutQuad",
+		"easeInOutQuad",
+		"easeInCubic",
+		"easeOutCubic",
+		"easeInOutCubic",
+		"easeInQuart",
+		"easeOutQuart",
+		"easeInOutQuart",
+		"easeInQuint",
+		"easeOutQuint",
+		"easeInOutQuint"
+	]}
+	*/
+};
+
+exports.handle = function(message, params) {
+	var settings = {}
+	if (params.x !== undefined && params.y !== undefined) {
+		settings.position = { x: params.x, y: params.y };
+	}
+	if (params.scale !== undefined) {
+		settings.scale = params.scale;
+	} else if (params.scaleBy !== undefined) {
+		var scale = this.vis.getScale();
+		settings.scale = scale * params.scaleBy;
+	}
+	/*
+	if (params.ms !== undefined) {
+		settings.animation = {
+				duration: params.time || 0,
+				easingFunction: params.easeFunction || "linear"};
+	}
+	*/
+	settings.animation = true;
+	this.vis.moveTo(settings);
+};

package/plugins/vis-network/messages/tiddlywiki.files

@@ -0,0 +1,17 @@
+{
+	"directories": [
+		{
+			"path": ".",
+			"filesRegExp": "^.*\\.js$",
+			"isTiddlerFile": false,
+			"fields": {
+				"title": {
+					"source": "filename",
+					"prefix": "$:/plugins/flibbles/vis-network/messages/"
+				},
+				"type": "application/javascript",
+				"module-type": "vis-message"
+			}
+		}
+	]
+}

package/plugins/vis-network/plugin.info

@@ -0,0 +1,13 @@
+{
+  "name": "Vis-Network",
+  "title": "$:/plugins/flibbles/vis-network",
+  "description": "TiddlyWiki5 plugin for the vis-network library",
+  "author": "Cameron Fischer",
+  "version": "10.5.5",
+  "stability": "STABILITY_2_STABLE",
+  "core-version": ">=5.3.0",
+  "source": "https://github.com/flibbles/tw5-vis-network",
+  "type": "application/json",
+  "plugin-type": "plugin",
+  "list": "readme license"
+}

package/plugins/vis-network/properties/background.js

@@ -0,0 +1,51 @@
+/*
+
+Manages images in nodes.
+
+*/
+
+"use strict";
+
+exports.name = "background";
+
+exports.properties = {
+	graph: {
+		background: {type: "image"}
+	}
+};
+
+exports.init = function(visNetwork) {
+	var self = this;
+	visNetwork.on("beforeDrawing", function(canvas) {
+		if (self.backgroundImage) {
+			var image = self.backgroundImage;
+			canvas.drawImage(image, -image.width/2, -image.height/2);
+		}
+	});
+};
+
+exports.process = function(objects, changes) {
+	var self = this;
+	if (changes.graph) {
+		if (changes.graph.background) {
+			if (!this.backgroundImage || (this.backgroundImage.src !== changes.graph.background)) {
+				var window = this.window();
+				var image = new window.Image();
+				// We don't actually set the image as our background until after
+				// it's had a chance to load. Not a big deal for tiddler images
+				// but remote ones need this, and we can't tell the difference
+				// from here.
+				image.onload = function() {
+					self.backgroundImage = image;
+					// I don't think I need to redraw, but I might be wrong.
+					self.vis.redraw();
+				};
+				image.src = changes.graph.background;
+				this.backgroundImage = undefined;
+			}
+			changes.graph.background = undefined;
+		} else {
+			this.backgroundImage = undefined;
+		}
+	}
+};

package/plugins/vis-network/properties/canvas.js

@@ -0,0 +1,79 @@
+/*
+
+Handles the focusing, blurring, and dropping of the graph canvas.
+
+Not actually a vis thing. We put this behavior in ourselves.
+
+*/
+
+"use strict";
+
+exports.name = "canvas";
+
+exports.properties = {
+	graph: {
+		focus: {type: "actions"},
+		blur: {type: "actions"},
+		drop: {type: "actions", variables: ["dropTiddler"]}
+	}
+};
+
+exports.init = function(visNetwork) {
+	visNetwork.canvas.frame.addEventListener("focus", this);
+	visNetwork.canvas.frame.addEventListener("blur", this);
+	visNetwork.canvas.frame.addEventListener("drop", this);
+	visNetwork.canvas.frame.addEventListener("dragover", this);
+
+	// handles both focus and blur events that occur to the canvas frame
+	this.handleEvent = handleEvent;
+};
+
+exports.destroy = function(visNetwork) {
+	this.vis.canvas.frame.removeEventListener("focus", this);
+	this.vis.canvas.frame.removeEventListener("blur", this);
+	this.vis.canvas.frame.removeEventListener("drop", this);
+	this.vis.canvas.frame.removeEventListener("dragover", this);
+};
+
+exports.process = function(objects, changes) {
+	if (changes.graph) {
+		changes.graph.focus = undefined;
+		changes.graph.blur = undefined;
+		changes.graph.drop = undefined;
+	}
+};
+
+function handleEvent(event) {
+	var self = this;
+	switch (event.type) {
+		case "drop":
+			// Warning: Stopping before this line in the debugger causes
+			// event.dataTransfer to be null in Firefox.
+			var dataTransfer = event.dataTransfer;
+			$tw.utils.importDataTransfer(event.dataTransfer, null, function(fieldsArray) {
+				fieldsArray.forEach(function(fields) {
+					if (fields.title) {
+						self.onevent({
+							type: "drop",
+							objectType: "graph",
+							event: event
+						}, {dropTiddler: fields.title || fields.text});
+					}
+				});
+			});
+			event.preventDefault();
+			// Without stopPropagation, TW may try to "import" the dragged item
+			event.stopPropagation();
+		break;
+		case "dragover":
+			// Apparently this is necessary to make sure drop events trigger.
+			event.preventDefault();
+		break;
+		default: // focus || blur
+			this.onevent({
+				type: event.type,
+				objectType: "graph",
+				event: event
+			});
+	}
+};

package/plugins/vis-network/properties/color.js

@@ -0,0 +1,104 @@
+/*
+
+Manages the contrast of font colors when inside its shape.
+
+*/
+
+"use strict";
+
+var shapesWithInternalText = {
+	ellipse: true,
+	circle: true,
+	database: true,
+	box: true
+};
+
+exports.name = "color";
+
+exports.properties = {
+	nodes: {
+		color: {type: "color", default: "#D2E5FF"},
+		fontColor: {type: "color", default: "#343434"},
+		borderColor: {type: "color", default: "#2B7CE9"}
+	},
+	edges: {
+		color: {type: "color"}
+	}
+};
+
+exports.process = function(objects, changes) {
+	var graph = changes.graph;
+	if (graph) {
+		if (graph.nodeColor) {
+			graph.nodes = graph.nodes || {};
+			graph.nodes.color = graph.nodeColor;
+			graph.nodeColor = undefined;
+		}
+		if (graph.fontColor) {
+			graph.nodes = graph.nodes || {};
+			graph.nodes.font = {
+				color: graph.fontColor
+			};
+			graph.edges = graph.edges || {font: {align: "horizontal"}};
+			graph.edges.font.color = graph.fontColor;
+			graph.fontColor = undefined;
+		}
+		if (graph.graphColor) {
+			graph.edges = graph.edges || {font: {align: "horizontal"}};
+			graph.edges.font.strokeColor = graph.graphColor;
+			graph.graphColor = undefined;
+		}
+	}
+	if (changes.nodes) {
+		var globalColor = (changes.graph && changes.graph.nodes && changes.graph.nodes.color) || (objects.graph && objects.graph.nodeColor);
+		if (!globalColor && objects.graph) {
+			// The color isn't being set. Maybe it was already set.
+			globalColor = objects.graph.nodes && objects.graph.nodes.color;
+		}
+		for (var id in changes.nodes) {
+			// Set contrast color for the font, if necessary
+			var node = changes.nodes[id];
+			if (node) {
+				setFontColor(node, globalColor);
+				setNodeColor(node, globalColor, objects.nodes && objects.nodes[id]);
+			}
+			// Set a border color if necessary
+		}
+	}
+};
+
+function setFontColor(node, globalColor) {
+	if (node.fontColor) {
+		node.font = node.font || {};
+		node.font.color = node.fontColor;
+		node.fontColor = undefined;
+	} else if (shapesWithInternalText[node.shape] === true
+	&& node.label
+	&& (node.color || globalColor)
+	&& (!node.font || !node.font.color)) {
+		node.font = node.font || {};
+		var fontColor = $tw.macros.contrastcolour.run(
+			node.color || "",
+			globalColor || "#D2E5FF",
+			"#000000", "#ffffff");
+		node.font.color = fontColor;
+	}
+};
+
+function setNodeColor(node, globalColor, object) {
+	if (node.borderColor) {
+		var background = node.color;
+		if (!background && object && typeof object.color === "object") {
+			// This is a work-around for a vis-network bug where background
+			// color cannot be unset while more specific colorings exist.
+			background = globalColor;
+		}
+		node.color = {
+			border: node.borderColor,
+			highlight: {background: background, border: node.borderColor},
+			hover: {background: background, border: node.borderColor},
+			background: background
+		};
+		node.borderColor = undefined;
+	}
+};

package/plugins/vis-network/properties/defaults.js

@@ -0,0 +1,42 @@
+/*
+
+Installs defaults for first object.
+
+*/
+
+"use strict";
+
+var options = {
+	interaction: {
+		hover: true
+	},
+	nodes: {
+		shape: "dot",
+		font: {}
+	},
+	edges: {
+		arrows: "to"
+	}
+};
+
+exports.name = "defaults";
+
+exports.process = function(objects, changes) {
+	if (!objects.graph) {
+		if (!changes.graph) {
+			changes.graph = {};
+		}
+		set(changes.graph, options);
+	}
+};
+
+function set(target, input) {
+	for (var def in input) {
+		if (typeof input[def] === "object") {
+			target[def] = target[def] || {};
+			set(target[def], input[def]);
+		} else {
+			target[def] = input[def];
+		}
+	}
+};

package/plugins/vis-network/properties/edges.js

@@ -0,0 +1,87 @@
+/*
+
+Handles a bug in vis-network where edge labels cannot be removed.
+
+*/
+
+"use strict";
+
+var smooths = {};
+var curves = ["dynamic", "continuous", "discrete", "diagonalCross", "straightCross", "horizontal", "vertical", "curvedCW", "curvedCCW", "cubicBezier", "cubicBezierHorizontal", "cubicBezierVertical"];
+
+$tw.utils.each(curves, function(type) {
+	smooths[type] = {enabled: true, type: type};
+});
+
+var strokes = {
+	solid: false,
+	dashed: true, // equivalent of [5,5] I believe
+	dotted: [1, 4]
+};
+
+// We set type to an empty object instead of null, because vis-network
+// will erroneously try to access it in some cases.
+smooths.no = {enabled: false, type: {}};
+smooths.dynamic.roundness = 0.5;
+smooths.cubicBezier.forceDirection = "none";
+smooths.cubicBezierHorizontal.type = "cubicBezier";
+smooths.cubicBezierHorizontal.forceDirection = "horizontal";
+smooths.cubicBezierVertical.type = "cubicBezier";
+smooths.cubicBezierVertical.forceDirection = "vertical";
+
+exports.name = "edges";
+
+exports.properties = {
+	edges: {
+		// These two properties don't require special handling
+		hidden: {type: "boolean", default: false},
+		width: {type: "number", min: 0, default: 1, increment: 0.1},
+		// "Arrows" actually accept any combination of those values. Plus this has many more options.
+		// For backward compatibility, we accept a hidden " " property,
+		// which used to be the old "no", until I realized what bad design
+		// that was.
+		arrows: {type: "enum", default: "to", values: ["no", "to", "from", "middle"], hidden: ["no"], multiple: true},
+		stroke: {type: "enum", values: ["solid", "dashed", "dotted"], default: "solid"},
+		roundness: {type: "number", default: 0.5, min: 0, max: 1, increment: 0.01},
+		label: {type: "string"},
+		smooth: {type: "enum", default: "dynamic", values: ["no"].concat(curves)},
+	}
+};
+
+exports.process = function(objects, changes) {
+	if (changes.edges) {
+		var oldEdges = (objects && objects.edges) || {};
+		for (var id in changes.edges) {
+			var edge = changes.edges[id];
+			var old = oldEdges[id] || {};
+			if (edge) {
+				// fix for vis-network edge label but
+				if (!edge.label && old.label) {
+					edge.label = "\0";
+				}
+				// Fix for flibbles/tw5-graph#33 bug
+				if (edge.smooth) {
+					edge.smooth = Object.assign({}, smooths[edge.smooth]);
+					edge.smooth.roundness = (edge.roundness === undefined)?
+						0.5: edge.roundness;
+				} else if (old.smooth !== undefined) {
+					// Once smooth is set, it can never truly be unset without
+					// vis-network crashes occurring.
+					edge.smooth = smooths.dynamic;
+				}
+				if (edge.roundness !== undefined) {
+					edge.roundness = undefined;
+				}
+				if (edge.arrows) {
+					edge.arrows = edge.arrows.join(",");
+				}
+				if (edge.stroke) {
+					edge.dashes = strokes[edge.stroke] || false;
+					edge.stroke = undefined;
+				} else if (old.dashes !== undefined) {
+					edge.dashes = false;
+				}
+			}
+		}
+	}
+};

package/plugins/vis-network/properties/events.js

@@ -0,0 +1,127 @@
+/*
+
+Manages the contrast of font colors when inside its shape.
+
+*/
+
+"use strict";
+
+exports.name = "events";
+
+exports.properties = {
+	graph: {
+		doubleclick: {type: "actions", variables: ["x", "y"]},
+	},
+	nodes: {
+		actions: {type: "actions"},
+		hover: {type: "actions"},
+		blur: {type: "actions"},
+		drag: {type: "actions"},
+		free: {type: "actions", variables: ["x", "y"]}
+	},
+	edges: {
+		actions: {type: "actions"},
+		hover: {type: "actions"},
+		blur: {type: "actions"}
+	}
+};
+
+exports.init = function(visNetwork) {
+	var self = this;
+	//this.vis.on("click", function(params) { });
+	visNetwork.on("doubleClick", function(params) {
+		var data = {
+			type: "actions",
+			event: params.event.pointers[0],
+		};
+		var variables;
+		// TODO: Meta keys
+		if (params.nodes.length >= 1) {
+			data.id = params.nodes[0];
+			data.objectType = "nodes";
+		} else if (params.edges.length >= 1) {
+			data.id = params.edges[0];
+			data.objectType = "edges";
+		} else {
+			data.type = "doubleclick";
+			data.objectType = "graph";
+			variables = variablesFromInputParams(params);
+		}
+		self.onevent(data, variables);
+	});
+	visNetwork.on("dragStart", function(params) {
+		if (params.nodes.length > 0) {
+			var data = {
+				type: "drag",
+				objectType: "nodes",
+				id: params.nodes[0],
+				event: params.event
+			};
+			self.onevent(data, {});
+		}
+	});
+	visNetwork.on("dragEnd", function(params) {
+		if (params.nodes.length > 0) {
+			var data = {
+				type: "free",
+				objectType: "nodes",
+				id: params.nodes[0],
+				event: params.event
+			};
+			var nodePosition = this.getPosition(params.nodes[0]);
+			nodePosition.x = round(nodePosition.x);
+			nodePosition.y = round(nodePosition.y);
+			self.onevent(data, nodePosition);
+		}
+	});
+	visNetwork.on("hoverNode", function(params) {
+		self.onevent({
+			type: "hover",
+			objectType: "nodes",
+			id: params.node,
+			event: params.event,
+		}, {});
+	});
+	visNetwork.on("blurNode", function(params) {
+		self.onevent({
+			type: "blur",
+			objectType: "nodes",
+			id: params.node,
+			event: params.event
+		}, {});
+	});
+	visNetwork.on("hoverEdge", function(params) {
+		self.onevent({
+			type: "hover",
+			objectType: "edges",
+			id: params.edge,
+			event: params.event,
+		}, {});
+	});
+	visNetwork.on("blurEdge", function(params) {
+		self.onevent({
+			type: "blur",
+			objectType: "edges",
+			id: params.edge,
+			event: params.event
+		}, {});
+	});
+};
+
+exports.process = function(object, changes) {
+	if (changes.graph && changes.graph.doubleclick) {
+		changes.graph.doubleclick = undefined;
+	}
+};
+
+function round(number) {
+	return Math.round(number * 10) / 10;
+};
+
+function variablesFromInputParams(params) {
+	return {
+		x: round(params.pointer.canvas.x),
+		y: round(params.pointer.canvas.y)};
+		//xView: params.pointer.DOM.x,
+		//yView: params.pointer.DOM.y};
+};

package/plugins/vis-network/properties/id.js

@@ -0,0 +1,24 @@
+/*
+
+Installs the ids into all the objects.
+
+*/
+
+"use strict";
+
+exports.name = "id";
+
+exports.process = function(objects, changes) {
+	for (var type in changes) {
+		// Assign the ids to each non-graph object
+		if (type !== "graph") {
+			var set = changes[type];
+			for (var id in set) {
+				var object = set[id];
+				if (object !== null) {
+					object.id = id;
+				}
+			}
+		}
+	}
+};