@zakkzhang/tw5-graph 1.6.4

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

@@ -0,0 +1,263 @@
+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;
+}
+
+.graph-property-input-color input[type='color'] {
+	height: 24px;
+	width: 100%;
+}
+
+table.graph-property .graph-property-input-number {
+	display: flex;
+}
+
+table.graph-property .graph-property-input-number input {
+	flex-grow: 1;
+}
+
+table.graph-property .graph-property-input-number span {
+	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,46 @@
+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;
+}
+
+.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%>

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

@@ -0,0 +1,65 @@
+description: Export graph
+caption: {{$:/core/images/export-button}} export graph
+
+\whitespace trim
+
+<%if [subfilter{$:/plugins/flibbles/graph/subfilters##messages}jsonindexes[]prefix[graph-export-]] %>
+  <$vars state=<<qualify "$:/state/flibbles/graph/popup/export">>
+    imageStore="$:/temp/flibbles/graph/export">
+    <$button
+        popup=<<state>>
+        tooltip="Export graph as image"
+        class=graph-export-button>
+      <%if [<tv-config-toolbar-icons>match[yes]] %>
+        {{$:/core/images/export-button}}
+      <%endif%>
+      <%if [<tv-config-toolbar-text>match[yes]] %>
+        <span class="tc-btn-text">
+          <$text text="export graph" />
+        </span>
+      <%endif%>
+    </$button>
+    <$reveal state=<<state>> type="popup" position="below" animate="yes">
+      <div class="tc-drop-down graph-export-button-dropdown">
+        <$list variable=type filter="[subfilter{$:/plugins/flibbles/graph/subfilters##messages}jsonindexes[]removeprefix[graph-export-]]">
+          <$button class=`tc-btn-invisible graph-export-type-$(type)$`>
+            <$action-sendmessage $message=`graph-export-$(type)$`
+              targetTiddler=<<imageStore>> />
+            <!-- We wrap our downloading inside action-createtiddler, because
+                 create-tiddler delays refreshing its contents until its
+                 invoked, which we need, since that `<%if` block depends on
+                 content made by prior actions. -->
+            <$action-createtiddler $basetitle=<<state>> $overwrite=yes>
+              <%if [<imageStore>is[image]!type[image/svg+xml]] %>
+                <!-- Don't use tm-download-raw yourself.
+                     It's a hack. A workaround. A solution for chumps.
+                     I'm scrapping it as soon as TW supports image downloads -->
+                <$action-sendmessage $message="tm-download-raw"
+                  $param=<<imageStore>>
+                  filename={{{[{!!title}removeprefix[$:/graph/]] ~[{!!title}]}}}
+                  type={{{ [<imageStore>get[type]addsuffix[;base64]] }}} />
+              <%else%>
+                <$action-sendmessage $message="tm-download-file"
+                  $param="$:/core/templates/plain-text-tiddler"
+                  currentTiddler=<<imageStore>>
+                  filename={{{[{!!title}removeprefix[$:/graph/]] ~[{!!title}]}}}
+                  type={{{ [<imageStore>get[type]] }}} />
+              <%endif%>
+            </$action-createtiddler>
+            <$action-deletetiddler $tiddler=<<imageStore>> />
+            <$action-deletetiddler $tiddler=<<state>> />
+            <$transclude $field="description" $tiddler=`$:/language/Docs/Types/image/$(type)$`>
+              <$fill $name="ts-missing">
+                <$transclude $field="description" $tiddler={{{ [[$:/tags/Exporter]tagging[]] :filter[{!!title}get[extension]removeprefix[.]match<type>] }}} >
+                  <$fill $name="ts-missing">
+                    <$text text=<<type>> />
+                  </$fill>
+                </$transclude>
+              </$fill>
+            </$transclude>
+          </$button>
+        </$list>
+      </div>
+    </$reveal>
+  </$vars>
+<%endif%>

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

@@ -0,0 +1,35 @@
+description: Toggle graph fullscreen mode
+caption: {{$:/core/images/full-screen-button}} fullscreen
+
+\procedure fs-actions()
+\whitespace trim
+<% if [<fs-state>is[tiddler]] %>
+  <$action-deletetiddler $tiddler=<<fs-state>> />
+<% else %>
+  <$action-setfield $tiddler=<<fs-state>> text=graph-fullscreen />
+<% endif %>
+\end
+\procedure fs-refocus()
+\whitespace trim
+<!--Refocus on the fullscreen button so that hitting escape will still disable fullscreen mode -->
+<$action-delay>
+  <!--The delay is necessary, because you can't focus on an element that's currently hidden, and the graph may be hidden when this is called. -->
+  <$action-sendmessage $message="tm-focus-selector" $param=".graph-fullscreen-button"/>
+\end
+
+\parameters (class:graph-fullscreen-button)
+\whitespace trim
+
+<$button
+    tooltip="Toggle graph fullscreen mode"
+    class={{{ [<class>] +[join[ ]] }}}
+    actions="<<fs-actions>><<fs-refocus>>" >
+  <%if [<tv-config-toolbar-icons>match[yes]] %>
+    {{$:/core/images/full-screen-button}}
+  <%endif%>
+  <%if [<tv-config-toolbar-text>match[yes]] %>
+    <span class="tc-btn-text">
+      <$text text="fullscreen" />
+    </span>
+  <%endif%>
+</$button>