[IDEA] Behavior of `$dynannotate` with (external) images

[yaisog]

I noticed that $dynannotate overlays are misaligned when there is an $image widget with unspecified dimensions. In this case it was an external image whose URL was specified in the source attribute. Doesn't seem like a bug, since when Dynannotate runs, the image is probably not yet loaded. If I specify the dimensions, everything works fine.

Once the image is in the browser cache, e.g. after edits to the affected tiddler or even a reload of the page, it also works as expected.

I don't know if it is an option to make Dynannotate wait for external content to load. If not, I would like to add a note to its documentation. I would welcome any additional information about other constellations (e.g. image tiddlers) that might be affected. Otherwise I will have to do more testing.

To see what I mean, put this into a tiddler on the prerelease site (which has Dynannotate installed by default):

<$dynannotate search="Text" searchDisplay="overlay">

* this is Text
* Text is good
* now comes a picture

<$image source="https://images.opencollective.com/tiddlywiki-file-upload/logo/192.png" />

* there is Text below it
* this Text is still pretty good
</$dynannotate>

[Jermolene]

Thanks @yaisog that's an interesting and subtle bug.

We could perhaps address it by making the <$image> widget send a message to its ancestors when the image loads. The <$dynannotate> widget could then recompute the overlays when receiving the message.

[Jermolene]

On reflection, though, that wouldn't work with images loaded with the HTML <img> element...

[Jermolene]

As you note, perhaps the first step is just to update the docs to highlight this pitfall.

[yaisog]

Hi @Jermolene, I know this does not exactly align with the philosophy of universality that we strive for, but a fix for $image combined with a warning / recommendation to use the widget instead of <img> in the Dynannotate docs would go a long way to improve the situation in the vast majority of cases. Unless there are compelling reasons to use <img> over $image?

We could also use the opportunity to enable $image to send a loading success or error message up the hierarchy. Combined with the PageTemplate $messagecatcher from PR #7340 the wiki could react to loading errors in a user-definable way.

[Jermolene]

Thanks @yaisog I think that makes good sense.

[yaisog]

Hi @Jermolene, I found another closely related problem: When Dynannotate is used to highlight content in a $list widget that uses a storyview, the highlights become misplaced. Try this in a new tiddler on the prerelease site:

<$button set="$:/temp/subfilter" setTo="[tag[HelloThere]]">Hello</$button>
<$button set="$:/temp/subfilter" setTo="[tag[Concepts]]">Concepts</$button>
<$dynannotate search="wiki" searchCaseSensitive="no">
<$list filter="[subfilter{$:/temp/subfilter}]" storyview="classic" template="$:/core/ui/ListItemTemplate" />
</$dynannotate>

and you'll see.

[Jermolene]

Thanks @yaisog that is another interesting bug.

One possibility might be for the storyview to send a tm-has-resized message that the dynannotate widget can trap. I think it can be the same message proposed for the image widget above.