tw5-graph 1.7.1

package/plugins/graph/startup/messages.js

@@ -0,0 +1,46 @@
+/*\
+title: $:/plugins/flibbles/graph/startup/messages.js
+type: application/javascript
+module-type: startup
+
+Introduces some handling of custom messages that TW5-Graph needs.
+
+DO NOT USE "tm-download-raw"! It's flimsy, poorly tested, and exists only
+because there is no other way to download a binary file in Tiddlywiki.
+
+As soon as I find a better way to do it, I'm deleting this file.
+
+\*/
+
+"use strict";
+
+exports.name = "graph-messages";
+exports.before = ["startup"];
+exports.synchronous = true;
+
+exports.startup = function() {
+	var CoreSaver = $tw.SaverHandler;
+	$tw.SaverHandler = function() {
+		CoreSaver.apply(this, arguments);
+		if ($tw.browser) {
+			var self = this;
+			$tw.rootWidget.addEventListener("tm-download-raw", function(event) {
+				return download(event, self);
+			});
+		}
+	}
+	$tw.SaverHandler.prototype = CoreSaver.prototype;
+};
+
+function download(event, saverHandler, variables) {
+	var title = event.param;
+	var wiki = event.widget.wiki;
+	var variables = event.paramObject;
+	const element = document.createElement("a");
+	var data = wiki.getTiddlerText(title);
+	element.setAttribute("download", variables.filename);
+	element.setAttribute("href", "data:" + variables.type + ";base64," + data);
+	var click = new MouseEvent("click");
+	element.dispatchEvent(click);
+	return true;
+};

package/plugins/graph/stylesheets/base.css.tid

@@ -0,0 +1,272 @@
+title: $:/plugins/flibbles/graph/stylesheets/base.css
+tags: $:/tags/Stylesheet
+
+\define sidebarbreakpoint()
+<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
+\end
+
+\rules only macrocallinline
+.graph-canvas {
+	position: relative;
+	border-style: solid;
+	border-width: 1px;
+	border-color: <<colour graph-border>>;
+	background-color: <<colour graph-background>>;
+	width: 100%;
+}
+
+.boundingbox {
+	display: flex;
+	flex-direction: column;
+}
+
+.boundingbox > .graph-canvas {
+	width: 100%;
+	height: 0%;
+	flex-grow: 1;
+}
+
+/*** Basic graph overlay options ***/
+
+.graph-overlay {
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	margin: 0px;
+	background: transparent;
+	border-width: 0px;
+}
+
+/*** Error-state graphs ***/
+
+.graph-canvas.graph-error {
+	align-content: center;
+	text-align: center;
+	font-weight: bold;
+	color: <<colour alert-highlight>>;
+}
+
+.graph-canvas.graph-error span {
+	display: inline-block;
+	max-width: 80%;
+	background: <<colour alert-background>>;
+	padding: 1em;
+	border: medium solid <<colour alert-border>>;
+	border-radius: 1em;
+
+}
+
+/*** SideBar ***/
+
+.tc-sidebar-scrollable .graph-sidebar-disabled {
+	display: none;
+}
+
+.tc-sidebar-scrollable .graph-sidebar-enabled {
+	position: absolute;
+}
+
+.graph-sidebar-banner {
+	background: <<colour graph-banner-background>>;
+	color: <<colour graph-banner-foreground>>;
+	padding: 4px;
+}
+
+.graph-sidebar-banner select, .graph-sidebar-banner button {
+	height: 28px;
+	min-width: 28px;
+	margin-left: 3px;
+}
+
+@media (max-width: <<sidebarbreakpoint>>) {
+	.tc-sidebar-scrollable .graph-sidebar-enabled {
+		display: none;
+	}
+
+	.tc-sidebar-scrollable .graph-sidebar-disabled {
+		display: flex;
+	}
+
+	.tc-sidebar-scrollable .graph-sidebar-disabled button {
+		margin: auto;
+	}
+
+	.tc-sidebar-scrollable .graph-sidebar-disabled button svg {
+		width: 2em;
+		height: 2em;
+	}
+}
+
+/*** Sidebar Center button ***/
+
+.graph-center-button-dropdown {
+	padding-left: 6px;
+	padding-right: 6px;
+}
+
+.graph-center-button-dropdown input {
+	width: 100%;
+}
+
+/*** Engine toggle buttons ***/
+
+.graph-engine-button-list {
+	display: flex;
+	justify-content: center;
+}
+
+.graph-engine-button {
+	margin: 1em;
+	width: 7em;
+	height: 124px;
+	border-radius: 1em;
+	vertical-align: top;
+	font-weight: bold;
+	text-align: center;
+	background-color: <<colour background>>;
+	border-color: <<colour table-footer-background>>;
+}
+
+.graph-engine-button .graph-icon {
+	height: 6em;
+	margin-bottom: 4px;
+	align-content: center;
+}
+
+.graph-engine-button.active {
+	background-color: <<colour table-header-background>>;
+}
+
+.graph-engine-button:hover {
+	background-color: <<colour table-header-background>>;
+}
+
+/*** grouped-tabs ***/
+
+.group-tab-header {
+	font-weight: bold;
+	margin-right: 0.0em;
+	margin-top: 1em;
+	border: 1px solid <<color tab-border>>;
+	padding: 3px 5px 0px 5px;
+	border-top-left-radius: 1em;
+}
+
+.tc-tab-buttons.tc-vertical button.group-tab-button {
+	display: flex;
+	padding-left: 0px;
+}
+
+button.group-tab-button > svg {
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+button.group-tab-button > span {
+	margin-left: 5px;
+	flex-grow: 1;
+}
+
+.tc-tab-buttons.tc-vertical button.group-tab-new {
+	border-bottom-left-radius: 1em;
+	border-bottom-right-radius: 1em;
+	border-right: 1px solid <<color tab-border>>;
+}
+
+button.group-tab-new svg {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/*** Settings: Graphs ***/
+
+.graph-tiddlers-edgelist {
+	color: <<colour muted-foreground>>;
+}
+
+.graph-tiddlers-edgelist .active {
+	color: <<colour foreground>>;
+}
+
+/*** GraphTiddler Edit-template ***/
+
+.graph-tiddler-edit-template {
+	border-top: 1px solid <<colour blockquote-bar>>;
+}
+
+.graph-tiddler-edit-template table,
+.graph-tiddler-edit-template table textarea,
+.graph-tiddler-edit-template table input {
+	width: 100%;
+}
+
+/*** Graph Property Table ***/
+
+table.graph-property {
+	width: 100%;
+	padding: 3px;
+}
+
+table .graph-property-input {
+	min-width: 8em;
+	border-right-width: 0px;
+}
+
+table .graph-property-remove {
+	width: 2em;
+	border-left-width: 0px;
+}
+
+/*** Graph Property Table Types ***/
+
+table.graph-property input {
+	width: 100%;
+}
+
+table.graph-property td {
+	padding: 4px;
+}
+
+table.graph-property td.graph-property-input-color {
+	display: flex;
+	gap: 4px;
+	width: 100%;
+}
+
+table.graph-property td.graph-property-input-color input {
+	flex: 1;
+}
+
+table.graph-property .graph-property-input-number {
+	display: flex;
+	gap: 2px;
+	width: 100%;
+}
+
+table.graph-property .graph-property-input-number input {
+	flex-grow: 1;
+	width: 60%;
+}
+
+table.graph-property .graph-property-input-number span {
+	flex: 1;
+	margin-left: 5px;
+	min-width: 2em;
+	vertical-align: top;
+	font-weight: lighter;
+}
+
+/*** Graph icon ***/
+
+.graph-icon-node {
+	fill: <<colour graph-node-color>> !important;
+}
+
+a.tc-tiddlylink.tc-plugin-info:hover .graph-icon-splash {
+	fill: <<colour background>> !important;
+}
+
+a.tc-tiddlylink.tc-plugin-info:hover .graph-icon-node {
+	fill: <<colour muted-foreground>> !important;
+}

package/plugins/graph/stylesheets/fullscreen/core.css

@@ -0,0 +1,11 @@
+/* CSS tweaks for core elements when fullscreen is active.
+   Make your own tiddler with $:/tags/flibbles/graph/FullscreenStylesheet
+   to add your own tweaks. */
+ 
+.tc-topbar, .tc-story-river, .tc-sidebar-scrollable .graph-sidebar-disabled {
+	display: none !important;
+}
+
+.tc-dropzone > p {
+	margin: 0px;
+}

package/plugins/graph/stylesheets/fullscreen/core.css.meta

@@ -0,0 +1,3 @@
+title: $:/plugins/flibbles/graph/stylesheets/fullscreen/core.css
+tags: $:/tags/flibbles/graph/FullscreenStylesheet
+type: text/css

package/plugins/graph/stylesheets/fullscreen.css.tid

@@ -0,0 +1,48 @@
+title: $:/plugins/flibbles/graph/stylesheets/fullscreen.css
+tags: $:/tags/Stylesheet
+
+<!--
+	If you need to tweak css for whenever fullscreen mode is active,
+	create a tiddler with the $:/tags/flibbles/graph/FullscreenStylesheet
+	tag rather than trying to test against the fullscreen state tiddler.
+-->
+
+.graph-sidebar-enabled.graph-fullscreen {
+	display: flex !important;
+	position: fixed !important;
+	height: 100% !important;
+	width: 100% !important;
+	top: 0 !important;
+	left: 0 !important;
+	// This puts us one below the modal at 900, which should still overlap fullscreen.
+	z-index: 899 !important;
+}
+
+.graph-modal-tiddler .tc-tiddler-frame {
+	margin-bottom: .5em;
+	padding: 14px;
+	padding-top: 0px;
+	width: inherit;
+	box-shadow: none;
+}
+
+.graph-modal-tiddler-breadcrumbs {
+	white-space: nowrap;
+	overflow: hidden;
+	min-height: 2em;
+	text-align: left;
+	direction: rtl;
+}
+
+.graph-modal-tiddler-breadcrumbs svg {
+	fill: <<colour foreground>>;
+	vertical-align: middle;
+	margin-left: 4px;
+	padding: 2px;
+}
+
+<%if [[$:/state/flibbles/graph/fullscreen]is[tiddler]] %>
+
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/flibbles/graph/FullscreenStylesheet]!is[draft]]">
+<$transclude mode="block"/>
+</$list><%endif%>

package/plugins/graph/stylesheets/popup.css.tid

@@ -0,0 +1,107 @@
+title: $:/plugins/flibbles/graph/stylesheets/popup.css
+tags: $:/tags/Stylesheet
+
+.graph-popup {
+	position: absolute;
+	z-index: 1000;
+	border: 1px solid <<colour dropdown-border>>;
+	color: <<colour foreground>>;
+	fill: <<colour foreground>>;
+	background-color: <<colour dropdown-background>>;
+	padding: 7px;
+	margin: 4px 0 0 0;
+	text-shadow: none;
+	line-height: 1.4;
+	overflow: scroll;
+	overscroll-behavior: contain;
+}
+
+.graph-popup .tc-drop-down {
+	margin-left: 14px;
+}
+
+.graph-popup button svg, .graph-popup a svg  {
+	fill: <<colour foreground>>;
+}
+
+.graph-popup button:disabled svg {
+	fill: <<colour muted-foreground>>;
+}
+
+.graph-popup button.tc-btn-invisible:hover svg {
+	fill: <<colour background>>;
+}
+
+.graph-popup .tc-drop-down-info {
+	padding-left: 14px;
+}
+
+.graph-popup p {
+	padding: 0 7px 0 7px;
+}
+
+.graph-popup a.tc-tiddlylink {
+	color: <<colour tiddler-link-foreground>>;
+}
+
+.graph-popup svg {
+	width: 1em;
+	height: 1em;
+}
+
+.graph-popup img {
+	width: 1em;
+}
+
+.graph-popup .tc-tab-set .tc-tab-buttons button {
+	display: inline-block;
+	width: auto;
+	margin-bottom: 0px;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.graph-popup .tc-prompt {
+	padding: 0 14px;
+}
+
+.graph-popup .tc-chooser {
+	border: none;
+}
+
+.graph-popup .tc-chooser .tc-swatches-horiz {
+	font-size: 0.4em;
+	padding-left: 1.2em;
+}
+
+.graph-popup .tc-file-input-wrapper {
+	width: 100%;
+}
+
+.graph-popup .tc-file-input-wrapper button {
+	color: <<colour foreground>>;
+}
+
+.graph-popup a:hover, .graph-popup button:hover, .graph-popup .tc-file-input-wrapper:hover button {
+	color: <<colour tiddler-link-background>>;
+	background-color: <<colour tiddler-link-foreground>>;
+	text-decoration: none;
+}
+
+.graph-popup .tc-tab-buttons button {
+	background-color: <<colour dropdown-tab-background>>;
+}
+
+.graph-popup .tc-tab-buttons button.tc-tab-selected {
+	background-color: <<colour dropdown-tab-background-selected>>;
+	border-bottom: 1px solid <<colour dropdown-tab-background-selected>>;
+}
+
+.graph-popup .tc-drop-down-bullet {
+	display: inline-block;
+	width: 0.5em;
+}
+
+.graph-popup .tc-tab-contents a {
+	padding: 0 0.5em 0 0.5em;
+}

package/plugins/graph/subfilters.tid

@@ -0,0 +1,23 @@
+title: $:/plugins/flibbles/graph/subfilters
+type: application/x-tiddler-dictionary
+
+# This tiddler contains a series of commonly used filters used by TW5-Graph. Putting them together in one dataTiddler like this helps optimize the :cache mechanism so this information only needs to be sought once. And it reduces repetition.
+
+# Do not override this tiddler
+
+edgetypes: :cache[all[shadows+tiddlers]removeprefix[$:/config/flibbles/graph/edges/]]
+edgetypes.fields: :cache[subfilter{$:/plugins/flibbles/graph/subfilters##edgetypes}removeprefix[fields/]]
+edgetypes.functions: :cache[subfilter{$:/plugins/flibbles/graph/subfilters##edgetypes}removeprefix[functions/]]
+
+# This gets you the action context associated with a given graphObjectType, like "nodes" or "edges"
+actioncontext: [all[]] :cache[subfilter{$:/plugins/flibbles/graph/subfilters##actioncontext.internal}]
+actioncontext.internal: [[widget-subclass]modules[]] :filter[moduleproperty[graphObjectType]match<..currentTiddler>] +[moduleproperty[actionContext]jsonget[]]
+
+# Returns the active engine in the current scope
+engine: [[graphengine]modules[]] :filter[moduleproperty[name]match<graphengine>]
+# Returns a list of available engine modules sorted by name
+engine.list: [[graphengine]modules[]] :sort[all[current]moduleproperty[name]]
+# This gets you the messages json of the currently active engine
+messages: :cache[subfilter{$:/plugins/flibbles/graph/subfilters##engine}moduleproperty[messages]]
+# This gets you the properties json of the currently active engine
+properties: :cache[subfilter{$:/plugins/flibbles/graph/subfilters##engine}moduleproperty[properties]]

package/plugins/graph/tags/GraphToolbar.tid

@@ -0,0 +1,2 @@
+title: $:/tags/flibbles/graph/GraphToolbar
+list: [[$:/plugins/flibbles/graph/ui/Buttons/settings]] [[$:/plugins/flibbles/graph/ui/Buttons/fullscreen]]

package/plugins/graph/tags/SettingsTab.tid

@@ -0,0 +1,2 @@
+title: $:/tags/flibbles/graph/SettingsTab
+list: [[$:/plugins/flibbles/graph/ui/Settings/Engine]] [[$:/plugins/flibbles/graph/ui/Settings/Graphs]]

package/plugins/graph/tags/Template.tid

@@ -0,0 +1,2 @@
+title: $:/tags/flibbles/graph/Template
+list: [[$:/plugins/flibbles/graph/templates/standard-graph]]

package/plugins/graph/tags/ViewEditTemplate.tid

@@ -0,0 +1,2 @@
+title: $:/tags/flibbles/graph/EditTemplate
+list: [[$:/plugins/flibbles/graph/ui/EditTemplate/Nodes]] [[$:/plugins/flibbles/graph/ui/EditTemplate/Edges]]

package/plugins/graph/templates/live-graph.tid

@@ -0,0 +1,34 @@
+caption: Live graph
+title: $:/plugins/flibbles/graph/templates/live-graph
+tags: $:/tags/flibbles/graph/Template
+
+\whitespace trim
+
+<!-- By having this unused "focusTiddler" value update when the nodes change,
+     we can enforce a refresh of the live-graph, rather than having it try
+     to update, which might result in a worse presentation for some engines. -->
+
+<$set name="focusTiddler" filter="[subfilter{!!filter}]">
+
+<$graph>
+
+<$properties $for=nodes actions="<$action-navigate $to=<<nodeTiddler>> />" >
+
+<$properties.settings>
+
+<$properties physics=no>
+
+<$slot $name=ts-raw $depth=5 />
+
+<$list filter={{!!filter}} >
+
+<$node.default />
+
+<$edges.typed />
+
+</$list>
+</$properties>
+</$properties.settings>
+</$properties>
+</$graph>
+</$set>

package/plugins/graph/templates/standard-graph.tid

@@ -0,0 +1,40 @@
+caption: Standard editable graph
+title: $:/plugins/flibbles/graph/templates/standard-graph
+tags: $:/tags/flibbles/graph/Template
+
+\whitespace trim
+
+<$graph>
+
+<%if [{!!filter}is[blank]] %>
+
+<$node $tiddler="$:/plugins/flibbles/graph/settings"
+  label="Click on me to configure this graph"
+  image="$:/core/images/options-button"
+  actions="\import $:/plugins/flibbles/graph/ui/Buttons/settings
+<<settingsActions>>" />
+
+<%endif%>
+
+<$properties physics=yes actions="<$action-navigate $to=<<nodeTiddler>> />">
+
+<$properties $filter="[all[]] :filter[<..currentTiddler>getindex{!!title}]" physics=no>
+
+<$properties.persistent $dataTiddler=<<currentTiddler>> >
+
+<$properties.settings>
+
+<$slot $name=ts-raw $depth=6 />
+
+<$nodes.writable $field=filter>
+
+<$node.default/>
+
+<$edges.typed $editable=yes />
+
+</$nodes.writable>
+</$properties.settings>
+</$properties.persistent>
+</$properties>
+</$properties>
+</$graph>

package/plugins/graph/ui/Buttons/center.tid

@@ -0,0 +1,38 @@
+description: Center on a graph node
+caption: {{$:/core/images/advanced-search-button}} center node
+first-search-filter: [subfilter{!!filter}search:title{$:/temp/graph/select}sort[title]limit[10]]
+
+\whitespace trim
+
+<%if [[graphengine]modules[]] :filter[moduleproperty[name]match<graphengine>] +[moduleproperty[messages]jsonextract[graph-center-node]] %>
+  <$vars state=<<qualify "$:/state/flibbles/graph/popup/center">> >
+    <$button
+        popup=<<state>>
+        tooltip="Center on a graph node"
+        class=graph-center-button>
+      <%if [<tv-config-toolbar-icons>match[yes]] %>
+        {{$:/core/images/advanced-search-button}}
+      <%endif%>
+      <%if [<tv-config-toolbar-text>match[yes]] %>
+        <span class="tc-btn-text">
+          <$text text="center node" />
+        </span>
+      <%endif%>
+    </$button>
+    <$reveal state=<<state>> type="popup" position="below" animate="yes">
+      <div class="tc-drop-down graph-center-button-dropdown">
+        <$let tv-config-toolbar-icons="yes" tv-config-toolbar-text="yes" tv-config-toolbar-class="tc-btn-invisible">
+          <$transclude $tiddler="$:/plugins/flibbles/graph/ui/selector" configTiddler="$:/plugins/flibbles/graph/ui/Buttons/center">
+            <$fill $name=action>
+              <$action-sendmessage $message=graph-center-node tiddler=<<selectedTiddler>> scale="1.5" />
+              <$action-deletetiddler $tiddler=<<state>> />
+            </$fill>
+            <$fill $name=cancel>
+              <$action-deletetiddler $tiddler=<<state>> />
+            </$fill>
+          </$transclude>
+        </$let>
+      </div>
+    </$reveal>
+  </$vars>
+<%endif%>