clone/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/TiddlyWiki/TiddlyWiki5.git synced 2026-04-28 19:14:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Innerwiki: Add support for draggable anchors

Browse Source
This commit is contained in:
Jermolene
2019-02-01 10:43:42 +00:00
parent 7bc1458749
commit a4eb139f99
9 changed files with 264 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
plugins/tiddlywiki/innerwiki/doc/docs.tid
View File

@@ -47,6 +47,22 @@ This example injects all image tiddlers with the addition of the field "custom"
<$data $filter="[is[image]]" custom="Beta"/>
```
! `<$anchor>` widget
The `<$anchor>` widget is used within the `<$innerwiki>` widget to specify draggable anchors to be overlaid on the innerwiki.
It supports the following attributes:
|!Attribute |!Description |
|x |The title of the tiddler containing the X coordinate of the anchor |
|y |The title of the tiddler containing the Y coordinate of the anchor |
This example declares an anchor whose coordinates are contained in the tiddlers [[my-anchor-x]] and [[my-anchor-y]]:
```
<$anchor x="my-anchor-x" y="my-anchor-y"/>
```
! `screenshot` command
Saves PNG screenshots of the `<$innerwiki>` widgets rendered by a set of tiddlers identified by a filter.

23
plugins/tiddlywiki/innerwiki/doc/examples.tid
View File

@@ -92,11 +92,32 @@ By injecting the right payload tiddlers, the innerwiki can be initialised to any
<$data title="$:/state/showeditpreview" text="yes"/>
</$innerwiki>"""/>
!! Draggable anchors
This example shows how the `<$anchor>` widget is used to display draggable anchors overlaid on the innerwiki. The `<$anchor>` widget is used to declare the tiddlers containing the coordinates of each anchor. These tiddlers can then be transcluded by SVG graphic primitives to position them according to the anchor locations.
<$macrocall $name="example" text="""screenshot-7-anchor-1-x: <$edit-text tag="input" tiddler="screenshot-7-anchor-1-x"/>
screenshot-7-anchor-1-y: <$edit-text tag="input" tiddler="screenshot-7-anchor-1-y"/>
screenshot-7-anchor-2-x: <$edit-text tag="input" tiddler="screenshot-7-anchor-2-x"/>
screenshot-7-anchor-2-y: <$edit-text tag="input" tiddler="screenshot-7-anchor-2-y"/>
<$innerwiki template="$:/plugins/tiddlywiki/innerwiki/template" filename="screenshot-7.png" width="1200" height="400" style="width:100%;">
<$anchor x="screenshot-7-anchor-1-x" y="screenshot-7-anchor-1-y"/>
<$anchor x="screenshot-7-anchor-2-x" y="screenshot-7-anchor-2-y"/>
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
<$macrocall $name="big-arrow" x={{screenshot-7-anchor-1-x}} y={{screenshot-7-anchor-1-y}}/>
<circle cx={{screenshot-7-anchor-2-x}} cy={{screenshot-7-anchor-2-y}} r="50" stroke="blue" stroke-width="2" fill="green" />
</$innerwiki>"""/>
!! Inception
An innerwiki can itself contain an inner-innerwiki:
<$macrocall $name="example" text="""<$innerwiki width="1200" height="600" style="width:100%;" filename="screenshot-7.png">
<$macrocall $name="example" text="""<$innerwiki width="1200" height="600" style="width:100%;" filename="screenshot-8.png">
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
<$data title="$:/DefaultTiddlers" text="HelloThere $:/plugins/tiddlywiki/innerwiki/inner-example"/>
<$data $tiddler="$:/plugins/tiddlywiki/innerwiki"/>

2
plugins/tiddlywiki/innerwiki/doc/inner-example.tid
View File

@@ -1,6 +1,8 @@
title: $:/plugins/tiddlywiki/innerwiki/inner-example
<$innerwiki width="1200" height="400" style="width:100%;">
<$anchor x="screenshot-inner-anchor-1-x" y="screenshot-inner-anchor-1-y"/>
<circle cx={{screenshot-inner-anchor-1-x}} cy={{screenshot-inner-anchor-1-y}} r="50" stroke="blue" stroke-width="2" fill="green" />
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki that is inside a wiki"/>
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
<$data title="$:/palette" text="$:/palettes/SolarFlare"/>

2
plugins/tiddlywiki/innerwiki/doc/readme.tid
View File

@@ -2,7 +2,7 @@ title: $:/plugins/tiddlywiki/innerwiki/readme
!! Introduction
This plugin enables TiddlyWiki to embed a modified copy of itself (an "innerwiki"). The primary motivation is to be able to produce screenshot illustrations that are automatically up-to-date with the appearance of TiddlyWiki as it changes over time, or to produce the same screenshot in different languages.
This plugin enables TiddlyWiki to embed a modified copy of itself (an "innerwiki") with overlaid graphics. The primary motivation is to be able to produce screenshot illustrations that are automatically up-to-date with the appearance of TiddlyWiki as it changes over time, or to produce the same screenshot in different languages.
In the browser, innerwikis are displayed as an embedded iframe. Under Node.js [[Google's Puppeteer|https://pptr.dev/]] is used to load the innerwikis as off-screen web pages and then snapshot them as a PNG image.