@zakkzhang/tw5-graph 1.6.4

package/plugins/graph/ui/SideBar/Graph.tid

@@ -0,0 +1,77 @@
+title: $:/plugins/flibbles/graph/ui/SideBar
+caption: Graph
+tags: $:/tags/SideBar
+
+\procedure fs-state() $:/state/flibbles/graph/fullscreen
+
+\whitespace trim
+
+\parameters (state: "$:/config/flibbles/graph/sidebar", defaultGraph: "$:/graph/Default")
+
+\function graph() [<state>get[text]else<defaultGraph>]
+
+<$keyboard key="escape" actions="""<%if [<fs-state>is[tiddler]] %><$action-deletetiddler $tiddler=<<fs-state>> />""" >
+
+<div class="graph-sidebar-disabled graph-error tc-page-controls">
+
+<!-- Sidebar only works in fullscreen during mobile mode.
+     Otherwise, it's taking up too much space. -->
+
+  <$transclude $tiddler="$:/plugins/flibbles/graph/ui/Buttons/fullscreen" class=tc-btn-invisible $mode=inline />
+
+</div>
+<$boundingbox
+  class={{{ graph-sidebar-enabled [<fs-state>get[text]] +[join[ ]] }}}
+  width="[<windowWidth>subtract<boundingLeft>subtract[15]addsuffix[px]]"
+  height="[<windowHeight>subtract<boundingTop>subtract[15]addsuffix[px]]">
+
+  <$vars
+      graph-sidebar=yes
+      relayState=<<qualify graph-toolbar->> >
+
+    <$messagerelay to=<<relayState>> >
+
+      <div class="graph-sidebar-banner">
+
+        <$slot $name="banner">
+
+          <$select tiddler=<<state>> default=<<defaultGraph>> >
+
+            <$list filter="[<state>get[text]] [prefix[$:/graph/]else<defaultGraph>]"  >
+
+              <option value=<<currentTiddler>> >
+
+                <$view field=caption>
+
+                  <$text text={{{ [{!!title}removeprefix[$:/graph/]] }}} />
+
+                </$view>
+              </option>
+            </$list>
+          </$select>
+          <$vars currentTiddler=<<graph>> >
+
+            <$list filter="[[$:/tags/flibbles/graph/GraphToolbar]tagging[]!is[draft]] :filter[{!!title}addprefix[$:/config/flibbles/graph/GraphToolbarButtons/Visibility/]!text[hide]]" variable=listItem>
+
+              <$transclude tiddler=<<listItem>> mode=inline />
+
+            </$list>
+          </$vars>
+        </$slot>
+      </div>
+    </$messagerelay>
+    <$linkcatcher actions="""\whitespace trim
+      <%if [<fs-state>is[tiddler]] %>
+        <$action-listops $tiddler='$:/state/flibbles/graph/modal' $filter='[<navigateTo>]' />
+        <$action-sendmessage $message=tm-modal $param='$:/plugins/flibbles/graph/ui/Modals/Tiddler' tv-story-list='$:/state/flibbles/graph/modal' />
+      <%else%>
+        <$action-navigate $to=<<navigateTo>> />""">
+
+      <$graph.view $tiddler=<<graph>> $mode=inline >
+
+        <$messagerelay name=<<relayState>> />
+
+      </$graph.view>
+    </$linkcatcher>
+  </$vars>
+</$boundingbox>

package/plugins/graph/ui/Toolbars/GraphToolbar.tid

@@ -0,0 +1,15 @@
+title: $:/plugins/flibbles/graph/ui/Toolbars/GraphToolbar
+caption: Graph Toolbar
+tags: $:/tags/ControlPanel/Toolbars
+
+\procedure config-base() $:/config/flibbles/graph/GraphToolbarButtons/Visibility/
+
+Choose which buttons are displayed on the sidebar graph's toolbar. Drag and drop to change the ordering
+
+Buttons may not show up anyway if the assigned graph engine does not support them.
+
+<$set name="tv-config-toolbar-icons" value="yes">
+
+<$set name="tv-config-toolbar-text" value="yes">
+
+<$macrocall $name="list-tagged-draggable" tag="$:/tags/flibbles/graph/GraphToolbar" itemTemplate="$:/core/ui/ControlPanel/Toolbars/ItemTemplate"/>

package/plugins/graph/ui/ViewTemplate/graph-object.tid

@@ -0,0 +1,13 @@
+title: $:/plugins/flibbles/graph/ui/ViewTemplate/graph-object
+
+\whitespace trim
+
+<$let
+	descriptors={{{[all[current]removeprefix[$:/config/flibbles/graph/]]}}}
+	type={{{ [<descriptors>split[/]nth[1]] }}}
+	category={{{ [<descriptors>split[/]nth[2]] }}} >
+
+<$transclude $tiddler=`$:/plugins/flibbles/graph/presettypes/$(type)$/$(category)$` />
+
+<$transclude $tiddler="$:/plugins/flibbles/graph/ui/ViewTemplate/properties"
+	type={{{ [all[current]removeprefix[$:/config/flibbles/graph/]splitbefore[/]removesuffix[/]] }}} />

package/plugins/graph/ui/ViewTemplate/graph.tid

@@ -0,0 +1,11 @@
+title: $:/plugins/flibbles/graph/ui/ViewTemplate/graph
+
+\whitespace trim
+
+<$let graphengine={{{ [{!!engine}!is[blank]] ~[<graphengine>] }}}>
+
+<$transclude tiddler={{{ [{!!template}!is[blank]] ~[[$:/tags/flibbles/graph/Template]tagging[]] }}} >
+
+<$transclude tiddler="$:/language/MissingTiddler/Hint"/>
+
+</$transclude></$let>

package/plugins/graph/ui/ViewTemplate/properties.tid

@@ -0,0 +1,80 @@
+title: $:/plugins/flibbles/graph/ui/ViewTemplate/properties
+
+\procedure row(depth:0)
+<$reveal tag=tr type="match" state=<<dropdownStateTitle>> text=open default=<<default>> >
+  <$let jsonEntry={{{ [<json>jsonextract<property>] }}}
+        propertyType={{{ [<jsonEntry>jsonget[type]] }}} >
+    <td class=graph-property-label>
+      <$list filter="[range<depth>]">&nbsp;&nbsp;</$list>
+      <$text text=<<property>> />
+    </td>
+    <td class=`graph-property-input graph-property-input-$(propertyType)$`>
+      <$transclude
+        $tiddler=`$:/plugins/flibbles/graph/ui/PropertyTypes/$(propertyType)$`
+        $mode=inline>
+        <$edit-text tag=input index=<<property>> />
+      </$transclude>
+    </td>
+    <td class=graph-property-remove>
+      <%if [all[current]getindex<property>] %>
+        <$button class=tc-btn-invisible tooltip="Unset this property">
+          <$action-setfield $index=<<property>> />
+          <$transclude $tiddler="$:/core/images/delete-button" $mode=inline />
+        </$button>
+      <%endif%>
+    </td>
+  </$let>
+</$reveal>
+<$list variable=property filter="[<json>jsonindexes[]] :filter[<json>jsonextract<currentTiddler>jsonget[parent]match<property>]">
+  <$transclude $variable=row depth={{{ [<depth>add[1]] }}} />
+\end
+
+\procedure arrows(state, default)
+\whitespace trim
+<$reveal type="nomatch" state=<<state>> text=open default=<<default>> >
+  <$button class=tc-btn-invisible>
+    <$action-setfield $tiddler=<<state>> $value=open />
+    {{$:/core/images/right-arrow}}
+  </$button>
+</$reveal>
+<$reveal type="match" state=<<state>> text=open default=<<default>> >
+  <$button class="tc-btn-invisible">
+    <$action-setfield $tiddler=<<state>> $value=close  default=<<default>> />
+    {{$:/core/images/down-arrow}}
+  </$button>
+</$reveal>
+\end
+
+\procedure section(header, filter, default)
+\whitespace trim
+<$qualify name=dropdownStateTitle title=`$:/state/dropdown/$(header)$`>
+  <tr>
+    <th colspan=3 align=left>
+      <$transclude $variable=arrows state=<<dropdownStateTitle>> default=<<default>> />
+      &#32;
+      <<header>>
+    </th>
+  </tr>
+  <$list variable=property filter=<<filter>> >
+    <<row>>
+\end
+
+\parameters (type)
+\whitespace trim
+
+<$list variable=json filter="[[graphengine]modules[]] :filter[moduleproperty[name]match<graphengine>] +[moduleproperty[properties]jsonextract<type>]" >
+
+<table class=graph-property>
+
+<$transclude $variable=section $mode=inline
+	header=Style
+	default=open
+	filter="""[<json>jsonindexes[]]
+		:filter[<json>jsonextract<currentTiddler>jsonget[type]!match[actions]]
+		:filter[<json>jsonextract<currentTiddler>jsonget[parent]count[]match[0]]
+		:filter[<json>jsonextract<currentTiddler>jsonget[hidden]else[false]!match[true]]""" />
+
+<$transclude $variable=section $mode=inline
+	header=Actions
+	default=closed
+	filter="[<json>jsonindexes[]] :filter[<json>jsonextract<currentTiddler>jsonget[type]match[actions]]" />

package/plugins/graph/ui/grouped-tabs.tid

@@ -0,0 +1,109 @@
+title: $:/plugins/flibbles/graph/ui/grouped-tabs
+code-body: yes
+
+\procedure grouped-tabs-button()
+\whitespace trim
+<$button
+  class="group-tab-button"
+  set=<<tabsState>>
+  setTo=<<currentTab>>
+  dragTiddler=<<currentTab>>
+  default=<<default>>
+  selectedClass="tc-tab-selected"
+  tooltip={{!!tooltip}}
+  role="switch"
+  data-tab-title=<<currentTab>>
+>
+  <%if [<orderable>match[yes]] %>
+    {{$:/plugins/flibbles/graph/images/drag}}
+  <%endif%>
+  <$tiddler tiddler=<<save-currentTiddler>>>
+    <$vars tv-wikilinks="no">
+      <span>
+        <$slot $name=button>
+          <$transclude tiddler=<<currentTab>> field="caption">
+            <$macrocall $name="currentTab" $type="text/plain" $output="text/plain"/>
+          </$transclude>
+        </$slot>
+      </span>
+    </$vars>
+  </$tiddler>
+</$button>
+\end
+
+\define grouped-tabs-tab()
+\whitespace trim
+<$set name="save-currentTiddler" value=<<currentTiddler>>>
+  <$tiddler tiddler=<<currentTab>>>
+    <$transclude $variable=grouped-tabs-button $fillignore=yes />
+  </$tiddler>
+</$set>
+\end
+
+\procedure grouped-tabs-tab-body()
+\whitespace trim
+<$list filter=<<groupsList>> variable="currentGroup">
+  <$list filter=<<tabsList>> variable="currentTab">
+    <$reveal type="match" state=<<tabsState>> text=<<currentTab>> default=<<default>> retain=<<retain>> tag="div">
+      <$slot $name=body />
+    </$reveal>
+  </$list>
+</$list>
+\end
+
+\function sort.by(tiddler) [<tiddler>each:list-item[list]is[tiddler]] =[all[]] +[unique[]]
+
+\procedure grouped-tabs-drop-actions()
+<$action-log
+	actionTiddler=<<actionTiddler>>
+	currentTab=<<currentTiddler>>
+/>
+<$action-listops
+  $tiddler=<<orderTiddler>>
+  $field=list
+  $filter="[subfilter<tabsList>sort.by<orderTiddler>] +[insertbefore<actionTiddler>,<currentTab>]"/>
+\end
+
+\procedure grouped-tabs-tab-list()
+\whitespace trim
+<$list variable=currentGroup filter=<<groupsList>> >
+  <$let orderTiddler={{{ [<currentGroup>subfilter<orderFilter>] }}}
+        orderable={{{ [<orderTiddler>!is[blank]then[yes]else[no]] }}} >
+    <%if [<currentGroup>!is[blank]] %>
+      <div class="group-tab-header"><$text text={{{ [<currentGroup>titlecase[]] }}} /></div>
+    <%endif%>
+    <$list variable=currentTab filter="[subfilter<tabsList>sort.by<orderTiddler>]" >
+      <$droppable
+          actions=<<grouped-tabs-drop-actions>>
+          enable=<<orderable>> >
+        <div class="tc-droppable-placeholder"/>
+        <$transclude $variable=grouped-tabs-tab $fillignore=yes/>
+      </$droppable>
+    </$list>
+    <$tiddler tiddler="">
+      <$droppable
+          actions=<<grouped-tabs-drop-actions>>
+          enable=<<orderable>> >
+        <div class="tc-droppable-placeholder"/>
+        <$slot $name=addButton />
+      </$droppable>
+    </$tiddler>
+  </$let>
+</$list>
+\end
+
+\parameters (tabsList, groupsList:"[[]]", state:"$:/state/flibbles/graph/grouped-tab", explicitState, default, class:"tc-vertical", retain, orderFilter)
+
+<$qualify title=<<state>> name=qualifiedState>
+  <$let tabsState={{{ [<explicitState>minlength[1]] ~[<qualifiedState>] }}}>
+    <div class={{{ [[tc-tab-set]addsuffix[ ]addsuffix<class>] }}}>
+      <div class={{{ [[tc-tab-buttons]addsuffix[ ]addsuffix<class>] }}}>
+        <$transclude $variable=grouped-tabs-tab-list $fillignore=yes />
+      </div>
+      <div class={{{ [[tc-tab-divider]addsuffix[ ]addsuffix<class>] }}}/>
+      <div class={{{ [[tc-tab-content]addsuffix[ ]addsuffix<class>] }}}>
+        <$transclude $variable=grouped-tabs-tab-body $fillignore=yes />
+      </div>
+    </div>
+  </$let>
+</$qualify>

package/plugins/graph/ui/selector.tid

@@ -0,0 +1,74 @@
+title: $:/plugins/flibbles/graph/ui/selector
+code-body: yes
+
+\whitespace trim
+\procedure select-accept-actions()
+\whitespace trim
+<$vars selectedTiddler={{$:/temp/graph/select/tiddler}}>
+<$slot $name=action />
+<$action-deletetiddler $filter="[[$:/temp/graph/select]] [[$:/temp/graph/select/tiddler]] [[$:/temp/graph/select/selected-item]] [[$:/temp/graph/select/refresh]]" />
+</$vars>
+\end
+
+\procedure select-click-actions()
+<$messagecatcher $completed="""<$transclude $variable=select-accept-actions $fillignore=yes />""" >
+  <$action-setfield $tiddler="$:/temp/graph/select/tiddler" text=<<navigateTo>> />
+  <$action-sendmessage $message=completed />
+\end
+
+\procedure select-close-actions()
+\whitespace trim
+<$slot $name=cancel />
+<$action-deletetiddler $filter="[[$:/temp/graph/select]] [[$:/temp/graph/select/tiddler]] [[$:/temp/graph/select/selected-item]] [[$:/temp/graph/select/refresh]]" />
+\end
+
+\procedure select-cancel-actions()
+\whitespace trim
+<% if [{$:/temp/graph/select}match[]] %>
+	<$transclude $variable=select-close-actions $fillignore=yes />
+<% elseif [{$:/temp/graph/select}!match{$:/temp/graph/select/tiddler}] %>
+	<$action-setfield $tiddler="$:/temp/graph/select/tiddler" text={{$:/temp/graph/select}}/>
+	<$action-deletetiddler $filter="$:/temp/graph/select/selected-item" />
+	<$action-setfield $tiddler="$:/temp/graph/select/refresh" text="yes"/>
+<% else %>
+	<$action-deletetiddler $filter="[[$:/temp/graph/select]] [[$:/temp/graph/select/tiddler]] [[$:/temp/graph/select/selected-item]] [[$:/temp/graph/select/refresh]]" />
+<% endif %>
+\end
+
+\parameters (configTiddler)
+
+<$transclude
+	$variable=keyboard-driven-input
+	$fillignore=yes
+	$mode=inline
+	storeTitle="$:/temp/graph/select"
+	tiddler="$:/temp/graph/select/tiddler"
+	refreshTitle="$:/temp/graph/select/refresh"
+	selectionStateTitle="$:/temp/graph/select/selected-item"
+	configTiddlerFilter="[<configTiddler>]"
+	tag=input
+	placeholder="Type something"
+	class="tc-edit-texteditor graph-select"
+	focus=yes
+	inputCancelActions="<$transclude $variable=select-cancel-actions $fillignore=yes />"
+	inputAcceptActions="<$transclude $variable=select-accept-actions $fillignore=yes />"
+/>
+
+<p>
+
+<$linkcatcher actions=<<select-click-actions>> >
+
+<$list filter={{{ [<configTiddler>get[first-search-filter]] }}} >
+
+<$list-empty>
+
+<$text text="New result" />
+
+</$list-empty>
+<$list-template>
+
+<span class={{{[{$:/temp/graph/select/tiddler}match<currentTiddler>then[tc-list-item-selected]] }}}>
+
+<$slot $name=list-item>
+
+<$transclude tiddler="$:/core/ui/ListItemTemplate" mode=inline/>

package/plugins/graph/utils.js

@@ -0,0 +1,148 @@
+/*\
+title: $:/plugins/flibbles/graph/utils.js
+type: application/javascript
+module-type: library
+
+Utility methods used by the graphing widgets.
+
+\*/
+
+"use strict";
+
+var Engines = $tw.modules.createClassesFromModules("graphengine");
+var PropertyTypes = $tw.modules.getModulesByTypeAsHashmap("graphpropertytype");
+
+/*
+Returns the window for flibbles/graph to use. I do this so that the testing
+framework can mock it out on Node.JS.
+*/
+exports.window = function() { return window; };
+
+exports.getEngineMap = function() {
+	return Engines;
+};
+
+exports.getEngine = function(name) {
+	var engineMap = exports.getEngineMap();
+	return engineMap[name] || null;
+};
+
+/*
+Checks if any property in an object needs to check for refresh, and returns
+true if any do need to refresh.
+*/
+exports.refreshProperties = function(properties, widget, type, changedTiddlers) {
+	var engineName = widget.getVariable("graphengine");
+	var engine = Engines[engineName];
+	if (engine) {
+		var propInfos = engine.prototype.properties[type];
+		if (propInfos) {
+			for (var name in properties) {
+				var info = propInfos[name];
+				var type = PropertyTypes[info && info.type];
+				if (type && type.refresh) {
+					if (type.refresh(info, properties[name], changedTiddlers, widget)) {
+						return true;
+					}
+				}
+			}
+		}
+	}
+	return false;
+};
+
+// Aren't we all eventually garbage?
+var eventualGarbage = [];
+var upkeepId;
+
+/*
+Register an object for destruction. It's ready to pass on once its
+isGarbage method returns true;
+*/
+exports.registerForGarbageCollection = function(object) {
+	var destroy = object.destroy;
+	if (destroy) {
+		// This object has a destroy method, which means it's probably
+		// a widget in ^v5.4.0 TiddlyWiki, which are capable of
+		// destruction. We'll use that system instead. It's better.
+		object.destroy = function() {
+			// Call the widget core destroy method
+			destroy.apply(object, arguments);
+			// And then our own method
+			object.garbageCollect();
+		};
+	} else {
+		// Otherwise, we'll need to keep tabs on this so we can check
+		// back in occasionally to see if it should be destroyed.
+		if (!upkeepId) {
+			upkeepId = setInterval(exports.upkeep, 5000);
+		}
+		eventualGarbage.push(object);
+	}
+};
+
+exports.upkeep = function() {
+	var i = eventualGarbage.length;
+	while (i > 0) {
+		i--;
+		var object = eventualGarbage[i];
+		if (object.isGarbage()) {
+			eventualGarbage.splice(i, 1);
+			object.garbageCollect();
+		}
+	}
+	// No managed objects. Let's shut down for now.
+	if (eventualGarbage.length == 0) {
+		clearInterval(upkeepId);
+		upkeepId = null;
+	}
+};
+
+exports.getParentProperties = function(widget, type) {
+	// For now, we hard-stop at the graph. We don't take properties outside
+	// We may some day, but for now, support for that would be frought with
+	// complications
+	while (widget.parentWidget && widget.graphObjectType !== "graph") {
+		widget = widget.parentWidget;
+		if (widget.graphPropertiesWidget && widget.type === type) {
+			return widget;
+		}
+	};
+	return null;
+};
+
+exports.WidgetIterator = function(root) {
+	this.stack = [];
+	this.ptr = root;
+	while (this.ptr.children && this.ptr.children.length > 0) {
+		this.stack.push(0);
+		this.ptr = this.ptr.children[0];
+	}
+};
+
+exports.WidgetIterator.prototype.next = function() {
+	var rtn, ptr = this.ptr;
+	if (!ptr) {
+		rtn = {done: true};
+	} else {
+		rtn = {value: ptr, done: false};
+		ptr = ptr.parentWidget;
+		var index = this.stack.pop();
+		if (index !== undefined) {
+			index++;
+			if (ptr && ptr.children.length > index) {
+				ptr = ptr.children[index];
+				this.stack.push(index);
+				// Now dive to the lowest child
+				while (ptr.children && ptr.children.length > 0) {
+					this.stack.push(0);
+					ptr = ptr.children[0];
+				}
+			}
+		} else {
+			ptr = null;
+		}
+	}
+	this.ptr = ptr;
+	return rtn;
+};

package/plugins/graph/widgets/action-delay.js

@@ -0,0 +1,72 @@
+/*\
+
+Action widget that introduces a delay before executing any nested actions it contains.
+
+\*/
+
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var DelayWidget = function(parseTreeNode, options) {
+	this.initialise(parseTreeNode, options);
+};
+
+DelayWidget.prototype = new Widget();
+
+DelayWidget.prototype.render = function(parent, nextSibling) {
+	this.parentDomNode = parent;
+	this.computeAttributes();
+	this.execute();
+	this.renderChildren(parent, nextSibling);
+};
+
+DelayWidget.prototype.execute = function() {
+	this.ms = this.getAttribute("$ms", 0);
+	this.state = this.getAttribute("$state");
+	this.makeChildWidgets();
+};
+
+DelayWidget.prototype.refresh = function(changedTiddlers) {
+	var changedAttributes = this.computeAttributes();
+	if ($tw.utils.count(changedAttributes) > 0) {
+		this.refreshSelf();
+		return true;
+	}
+	return this.refreshChildren(changedTiddlers);
+};
+
+var counter = 0;
+
+DelayWidget.prototype.invokeAction = function(triggeringWidget, event) {
+	// The id is used to make sure the later timed invocation corresponds
+	// to this method call here.
+	var id = (counter++).toString();
+	if (this.state) {
+		this.wiki.addTiddler({title: this.state, text: id});
+	}
+	return setTimeout(execute, this.ms, this, triggeringWidget, event, id);
+};
+
+DelayWidget.prototype.allowActionPropagation = function() {
+	return false;
+};
+
+function execute(delayWidget, triggeringWidget, event, id) {
+	var state = delayWidget.state;
+	if (state) {
+		var text = delayWidget.wiki.getTiddlerText(state);
+		if (text !== id) {
+			// The state tiddler was touched by another action.
+			// So we should not act. We're stale.
+			return;
+		}
+	}
+	delayWidget.refreshChildren();
+	delayWidget.invokeActions(triggeringWidget, event);
+	if (state) {
+		delayWidget.wiki.deleteTiddler(state);
+	}
+};
+
+exports["action-delay"] = DelayWidget;