tw5-vis-network 10.5.5

package/LICENSE

@@ -0,0 +1,10 @@
+Copyright (c) 2022-2025, Cameron Fischer
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,37 @@
+# tw5-vis-network
+
+This is a TiddlyWiki5 plugin which wraps the [vis-network library](https://github.com/visjs/vis-network). It's intended to be a modern replacement for the [TW5-Vis.js](https://github.com/felixhayashi/TW5-Vis.js/) when used with [TW5-TiddlyMap](https://github.com/felixhayashi/TW5-TiddlyMap).
+
+It includes a legacy tiddler which allows it to swap out TW5-Vis, even with older versions of TiddlyMap, although some features may be disabled.
+
+To update the version of vis-network used, fetch the latest .min.js file from [here](https://unpkg.com/vis-network/standalone/umd/vis-network.min.js).
+
+---
+
+# Notes on Copyright
+
+### TiddlyWiki
+
+Created by Jeremy Ruston, (jeremy [at] jermolene [dot] com)
+
+Copyright © Jeremy Ruston 2004-2007 Copyright © UnaMesa Association 2007-2022
+
+Published under the following [licenses](https://github.com/Jermolene/TiddlyWiki5/tree/master/licenses):
+
+1. BSD 3-clause "New" or "Revised" License (including any right to adopt any future version of a license if permitted)
+2. Creative Commons Attribution 3.0 (including any right to adopt any future version of a license if permitted)
+
+### The **vis-network** library
+
+Copyright (c) 2010-2018 [Almende B.V.](https://github.com/vis/vis-network) and Contributors Copyright (c) 2018-2021 Vis.js contributors
+
+Published under the following licenses:
+
+1. Apache License Version 2.0, http://www.apache.org/licenses/LICENSE-2.0
+2. MIT License (MIT)
+
+# How to run tests
+
+Make sure you have `tiddlywiki` available on your PATH. Then from the project root directory, type:
+
+`tiddlywiki --build test`

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "tw5-vis-network",
+  "version": "10.5.5",
+  "description": "TiddlyWiki5 plugin for the vis-network library",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "tiddlywiki --build test",
+    "bundle": "tiddlywiki --build bundle"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flibbles/tw5-vis-network.git"
+  },
+  "keywords": [
+    "visualization",
+    "graphs",
+    "tiddlywiki5",
+    "tiddlywiki-plugin"
+  ],
+  "author": "Flibbles",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/flibbles/tw5-vis-network/issues"
+  },
+  "homepage": "https://github.com/flibbles/tw5-vis-network#readme",
+  "files": [
+    "plugins/"
+  ],
+  "tiddlywiki": {
+    "flibbles/vis-network": "./plugins/vis-network/"
+  },
+  "devDependencies": {
+    "tiddlywiki": "^5.3.0"
+  }
+}

package/plugins/vis-network/DefaultColourMappings.multids

@@ -0,0 +1,7 @@
+title: $:/config/DefaultColourMappings/
+
+vis-button-background: <<colour dropdown-background>>
+vis-button-border: <<colour dropdown-border>>
+vis-button-foreground: <<colour foreground>>
+vis-manipulation-banner-background: <<colour dropdown-background>>
+vis-manipulation-banner-border: <<colour dropdown-border>>

package/plugins/vis-network/Stylesheet.tid

@@ -0,0 +1,39 @@
+title: $:/plugins/flibbles/vis-network/Stylesheet
+tags: $:/tags/Stylesheet
+
+\rules only macrocallinline
+
+div.vis-network div.vis-edit-mode button.vis-button.vis-edit.vis-edit-mode {
+	background-color: <<colour vis-button-background>> !important;
+	border-color: <<colour vis-button-border>> !important;
+	color: <<colour vis-button-foreground>>;
+	fill: <<colour vis-button-foreground>>;
+}
+
+div.vis-network div.vis-manipulation button.vis-button {
+	background-color: <<colour vis-button-background>>;
+	color: <<colour vis-button-foreground>>;
+	fill: <<colour vis-button-foreground>>;
+}
+
+div.vis-network div.vis-manipulation {
+	--color: <<colour vis-manipulation-banner-background>>;
+	background: color-mix(in srgb, var(--color) 70%, transparent) !important;
+	border-color: <<colour vis-manipulation-banner-border>> !important;
+}
+
+/*
+div.vis-network div.vis-edit-mode button.vis-button.vis-edit.vis-edit-mode:hover {
+	background-color: <<colour tiddler-controls-foreground-selected>>;
+	color: <<colour background>>;
+	fill: <<colour background>>;
+}
+*/
+
+div.vis-network div.vis-edit-mode button.vis-button.vis-edit.vis-edit-mode.tc-selected {
+	background-color: <<colour primary>>;
+}
+
+.graph-engine-vis-network {
+	height: 400px;
+}

package/plugins/vis-network/adapter.js

@@ -0,0 +1,179 @@
+/*\
+title: $:/plugins/flibbles/vis-network/adapter.js
+type: application/javascript
+module-type: graphengine
+
+This is an adapter that the graph plugin uses to interface with vis-network.
+This allows flibbles/graph to alternatively use this library.
+
+\*/
+
+"use strict";
+
+var VisLibrary = require("./vis.js");
+
+/*
+We expose these objects like this so the testing framework can get in.
+*/
+exports.Vis = function() {
+	return VisLibrary;
+};
+
+exports.window = function() {
+	return window;
+};
+
+exports.name = "Vis-Network";
+//exports.platforms = ["browser"];
+
+/**
+ * Set up all the properties here so it's accessable by TW5-Graph.
+ *
+ * Property Handlers perform specific operations to the incoming data before
+ * passing it along to vis.
+ * Partly to account for differences in API.
+ * Partly to account for all the bugs in vis-network.
+ */
+
+var propertyHandlers = $tw.modules.getModulesByTypeAsHashmap("vis-property");
+exports.properties = {};
+
+for (var handler in propertyHandlers) {
+	var module = propertyHandlers[handler];
+	if (module.properties) {
+		// This property handler has properties to declare. Fold them in.
+		for (var category in module.properties) {
+			exports.properties[category] = exports.properties[category] || Object.create(null);
+			$tw.utils.extend(
+				exports.properties[category],
+				module.properties[category]);
+		}
+	}
+}
+
+exports.forEachProperty = function(methodName) {
+	var args = Array.prototype.slice.call(arguments, 1);
+	for (var name in propertyHandlers) {
+		var method = propertyHandlers[name][methodName];
+		method && method.apply(this, args);
+	}
+};
+
+/**
+ * Set up all the messages here so it's accessable by TW5-Graph.
+ */
+
+var Messages = $tw.modules.getModulesByTypeAsHashmap("vis-message");
+
+exports.messages = Object.create(null);
+
+for (var name in Messages) {
+	exports.messages[name] = Messages[name].parameters || {};
+}
+
+exports.handleMessage = function(message, params) {
+	var handler = Messages[message.type];
+	if (handler) {
+		return handler.handle.call(this, message, params);
+	}
+};
+
+/**
+ * Core methods for adapter
+ */
+exports.init = function(element, objects, options) {
+	var Vis = exports.Vis();
+	this.element = element;
+	options = options || {};
+	this.wiki = options.wiki || $tw.wiki;
+	this.objects = {};
+	var newObjects = this.processObjects(objects);
+	this.dataSets = {
+		nodes: new Vis.DataSet(Object.values(newObjects.nodes || {}).map((x) => createDiff({}, x)), {queue: true}),
+		edges: new Vis.DataSet(Object.values(newObjects.edges || {}).map((x) => createDiff({}, x)), {queue: true})
+	};
+	var self = this;
+	// We remember what children were already attached to the element, because they MUST remain. The TW widget stack requires the DOM to be what it made it.
+	// Also, use .childNodes, not .children. The latter misses text nodes
+	var children = Array.prototype.slice.call(element.childNodes);
+	this.vis = new Vis.Network(element, this.dataSets, createDiff({}, newObjects.graph));
+
+	// The first child of the frame should always be the canvas element.
+	// I think we can just grab it blindly. Let's remember it.
+	this.canvasElement = this.vis.canvas.frame.children[0];
+	// We MUST preserve any elements already attached to the passed element.
+	for (var i = 0; i < children.length; i++) {
+		element.appendChild(children[i]);
+	}
+	this.forEachProperty("init", this.vis);
+};
+
+exports.update = function(objects) {
+	var changes = this.processObjects(objects);
+	for (var type in changes) {
+		if (type === "graph") {
+			this.vis.setOptions(createDiff({}, changes.graph));
+		} else {
+			var dataSet = this.dataSets[type];
+			for (var id in changes[type]) {
+				var object = changes[type][id];
+				if (object === null) {
+					dataSet.remove({id: id});
+				} else {
+					var oldObj = dataSet.get(id) || {};
+					dataSet.update(createDiff(oldObj, object));
+				}
+			}
+			dataSet.flush();
+		}
+	}
+};
+
+exports.destroy = function() {
+	this.forEachProperty("destroy", this.vis);
+	this.vis.destroy();
+};
+
+exports.processObjects = function(changes) {
+	this.forEachProperty("process", this.objects, changes);
+	// Apply those changes to our own record.
+	for (var type in changes) {
+		if (type === "graph") {
+			this.objects.graph = changes.graph;
+		} else {
+			this.objects[type] = this.objects[type] || Object.create(null);
+			for (var id in changes[type]) {
+				this.objects[type][id] = changes[type][id];
+			}
+		}
+	}
+	return changes;
+};
+
+/*
+Creates an object representing the differences between the old object and
+the new objects. Because vis applies changes; it doesn't replace.
+*/
+function createDiff(oldObject, newObject) {
+	var diff = Object.create(null);
+	for (var property in newObject) {
+		var newValue = newObject[property];
+		if (newValue !== undefined) {
+			if (typeof newValue === "object"
+			&& newValue !== null
+			&& !Array.isArray(newValue)) {
+				var oldValue = oldObject[property];
+				diff[property] = createDiff((typeof oldValue === "object" && oldValue !== null)? oldValue: {}, newValue);
+			} else {
+				diff[property] = newValue;
+			}
+		}
+	}
+	// Any properties that went missing must be flagged as deleted
+	for (var property in oldObject) {
+		if (newObject[property] === undefined) {
+			diff[property] = null;
+		}
+	}
+	return diff;
+};

package/plugins/vis-network/felixhayashi_vis_vis.js

@@ -0,0 +1,36 @@
+/*\
+title: $:/plugins/felixhayashi/vis/vis.js
+type: application/javascript
+module-type: library
+
+This tiddler exists for backward compatibility to plugins which used ~$:/plugins/felixhayashi/vis. This plugin can be used in place of that one without any migration, although some buttons will have mismatched colors.
+\*/
+
+"use strict";
+
+exports.default = require("$:/plugins/flibbles/vis-network/vis.js");
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+// vis.js to vis-network changed the expected locale from en-EN to just en.
+// This is the only thing preventing this library from being completely
+// swappable with vis.js. But because this is here, plugins like TiddlyMap
+// can recognize which locale to use by seeing this.
+exports.default.locale = "en";
+
+// This is a backup version of vis.keycharm, which was removed between
+// Vis.js and vis-network
+exports.default.keycharm = function(options) {
+	return new LegacyKeyCharm(options);
+};
+
+function LegacyKeyCharm(options) {
+	this.container = options.container;
+};
+
+// It's not important that it actually does anything. As far as I can tell,
+// TiddlyMap doesn't actually use it meaningfully anymore.
+LegacyKeyCharm.prototype.bind = function(key, method) {
+};

package/plugins/vis-network/lib/icon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g><path style="fill:#ffcf00" d="M 1,54 C 15.6,33 59,5.6 80,5.5 93,28.6 92.4,56.1 91,79.3 58.8,83.7 20,74.6 1,53.9 Z"/><path style="fill:#109618" d="M 96,75 C 101,85 96,90.5 93.4,92 57,92 33.8,88 3.4,68.4 0.8,66.8 3.7,65.7 5,66 32,75 56.5,79 96,75.5 Z" /><circle style="fill:#ff9800" cx="57" cy="43" r="30.3" /><circle style="fill:#dc3912" cx="61" cy="52" r="18" /><circle style="fill:#ffffff" cx="62" cy="57" r="11.2" /><circle style="fill:#4d4d4d" cx="66" cy="60" r="5.7" /></g></svg>

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

@@ -0,0 +1,27 @@
+{
+	"tiddlers": [
+		{
+			"file": "./vis-network.min.js",
+			"isTiddlerFile": false,
+			"fields": {
+				"title": {
+					"source": "filename",
+					"prefix": "$:/plugins/flibbles/vis-network/"
+				},
+				"type": "application/javascript",
+				"module-type": "library"
+			}
+		},
+		{
+			"file": "./icon.svg",
+			"isTiddlerFile": false,
+			"fields": {
+				"title": {
+					"source": "basename",
+					"prefix": "$:/plugins/flibbles/vis-network/"
+				},
+				"type": "image/svg+xml"
+			}
+		}
+	]
+}