Eventcatcher Example: Simple Canvas

Tips & Tricks
#1

As a learning exercise for <$eventcatcher/> I thought I’d see if I had all the pieces I’d need to build something like a note canvas. It turns out you can build something basic with very little code, and I think serves as a good example to learn from. I always learn best from extremely minimalist examples, so this is just me sharing what I’ve learned back to the forum.

There are now many good tools for structured note layouts like Mohammad 's Pinboard and BurningTreeC 's Muuri. Eric’s recent PasteUp tool, is quite comprehensive now and very flexible.

Anyways, below is a quick animation of what I mean by “note canvas” - a little bit emulating “sticky notes” on a large canvas that you can drag and drop to adjust around. The attached file you can just drag and drop into TiddlyWiki.com to demo for yourself.

Animation

Canvas.json (17.8 KB)

Tiddlers:

  1. Canvas: That’s the file shown - for this demo, any tiddler with a tag of “Note” will appear
  2. Canvas/Macros: Procedures to capture and store the mouse and click events
  3. Canvas/Styles: Styling for the canvas and notes (sizes, colors, etc. )
  4. Note: Literally just an example with a wikitext table to illustrate it’s just tiddler content
  5. Picture: Logo just to illustrate images work the same way

I haven’t decided yet if I’m going to build anything with this yet. It’d be a lot fo work and out of laziness I’d probably use Eric’s PasteUp and/or the new TW5-Graph from Flibbles which I love, but again thought it was interesting that this was so relatively easy to start and requires no plugins.

7 Likes
#2

Excellent work @stobot !

As part of a rewrite for $eventcatcher for v5.4.0, the code you have shared could be simplified even further to avoid the need for a tiddler that tells you whether dragging is active. I am working on a small set of implementation examples to extend the documentation for the eventcatcher widget to cover common use cases, and this would fit in nicely.

5 Likes
#3

An amazing piece of work! Thank you for sharing, @stobot.
It’s eye-catching—you did a great job!

I’m thinking about how your code could be used with TW 5.4 to create a Volantis page layout: a layout to give your tiddlers wings :wink:
@saqimtiaz, you might have some ideas here!

Ref:

1 Like
#4

I’m very impressed! I didn’t imagine it would be so simple to do. Moreover, it’s quite easy to see how one could extend this to resizable cards and adjustable z-indexes. It only takes a little imagination to see how to handle multiple canvases. It would be a little more work to allow a note to be used on multiple canvases, but even there, the path is fairly clear.

Thank you very much for sharing!

3 Likes
#5

Not to detract in any way from the work presented here, but for those curious about this the floats rewrite I posted not long ago is exactly that, an opinionated attempt at extending these basics to also support z-index and resizing.

Part of the goal of that exploration - apart from testing a rewrite of eventcatcher - is to explore possibilites for new primitives for the core that could replace or supplement the existing popup/alert/notification/modal sub-systems.

1 Like
#6

I remember being impressed with that too.

I have no current need for either of them, or for @EricShulman’s offering, at the moment. But it’s heartening to know they’re available if and when.

1 Like