You’re right - I meant click in 5.3.8. I still haven’t spent time with the 5.4.0 yet, but I tried to simplify and replace the click with mouseup and it’s not working at the moment - I have to take a break on this for today.
This is as far as I got (NOT WORKING) just posting in case you see something obvious
stobot_canvas_macros.json (4.7 KB)
Ah.
That gives me an idea - I was thinking about arrows as well. I need to implement a way to have many version of the same tiddler, but with separate position, size, and rotation values stored in the canvas tiddler. Should be too hard, will think about the most elegant way to implement it. Right now, you’d have to have a unique tiddler for each arrow you’d want, I think I can overcome that.
Hmm. I think detecting if you drag an item above the top or left would be relatively easy since I can just use the coordinates and look for x or y values below zero. I’m not sure how I’d get the right side since probably most of the time I’d want the canvas size to be 100% width, I don’t know if there’s a non-javascript way to figure that out in a value I can compare cursor position and width to. If anyone knows about that, let me know!
I don’t have the opportunity to test but my instinct suggests blank values from the state tiddler might be the issue, try this:
\procedure note-mouseup()
<%if [<tiddler>get[moved]!is[blank]else[no]!match[yes]] %>
<$action-log/>
<$action-navigate $to=<<currentTiddler>>/>
<%if [<modifier>match[ctrl]] %>
<$action-sendmessage $message="tm-edit-tiddler" $param=<<currentTiddler>>/>
<%endif%>
<%endif%>
<$action-setfield
$tiddler=<<tiddler>>
action=""
moved=""
/>
\end
Note that I threw in an action-log widget, so if this does not resolve it, check the variables logged.
This is becoming a bit more complex, but implemented some small tweaks, bug fixes, and two big features - specifically around arrows like @Justin_H asked about. Still based on in 5.3.8 for now, though I’ll explore the new widget over the weekend.
The two big features are:
canvas-2025-11-21.json (24.4 KB)
Demo: Building something like a process flow map out of tiddlers.
Note that the package now contains a tiddler named “arrow” that’s just a ascii arrow with font-size turned up. Works on my Windows machine, you can change to whatever you want though obviously
Step 1 (optional): Add a little overall styling and separate the 3 demo tiddlers. You might also notice that I added a default hover style which will come in handy later below.
<<canvas note-style:"box-shadow:0 0 6px;">>
Step 2: Add some individual styling (css below) to one specific note. I alt-click and an input box appears just below the canvas, I paste in the below and hit enter (or you can use the little emoji button on the far right).
display:flex;justify-content:center;align-items:center;box-shadow:0 0;background-color:hsl(0 0 0 / 0);
Step 3: Clone the arrow (as many times as you want) using ctrl-click. Note that ctrl-click used to be open in edit mode, I changed that to shift-click. This new note/clone is special, it has all of the same abilities as a regular note and it can be styled individually, but it lives in the canvas id tiddler (which is named blank by default). The content of the note continues to be linked to the original one though. To make it easy, I generate all clones in the top left.
Step 4: Make and delete more clones! Did you notice that the hover color for the clones was green instead of red? That’s because clones can be deleted using shift-ctrl-click. Play around and clone & “unclone”.
This is getting pretty close to a usable plugin - I think I’m going to stabilize and clean it up and host it on TiddlyHost with better instructions. That’ll take me a bit though, adding features is always more fun!
I thought it’d be a fun exercise to do a slightly more complex demo using the same functionality, and highlighting that each canvas tiddler stores all of the parameters like position in a single tiddler. Because of that, you can save “states” and overwrite them to “reset” canvases.
For this demo I built a little Chess game. There’s a chessboard made with a table, and chess pieces made from unicode characters. This highlights the “cloning” as there’s a tiddler for one of each piece (on the left below), and then all the ones on the board are clones, so they can be deleted as the “game” progresses. Because of the “states”, there’s a tiddler called canvas/chess/ready that has everything setup, and then an exact copy is canvas/chess/play
The Chess tiddler just contains the macro pointed to canvas/chess/play. When you want to reset your game, clone canvas/chess/ready overtop of canvas/chess/play. Anyways, thought it was a fun way to illustrate a couple of the features. It does make me consider if I should add some pixel snapping capability to have things line up cleanly - optionally…
canvas-chess.json (24.9 KB)
@Christian_Byron the examples in this thread would merit a mention in the newsletter if that makes sense with the structure you have in mind.