Region Annotation

[TomYeoman]

Hi @newcat!

We're looking at implementing region annotation within our project, and wondered whether there's any future plans for it (I know a V2 is in the works).

At a high level, the MVP looks something like -

• Add button to create a "annotated region"
• When clicked, allow a free draw rectangle
• Once rectangle is drawn, it will start in "edit mode", whereby you will be able to set a title, description, set border colour, resize and save. In the future you will only be able to interact with it again via clicking the edit button in the corner of the region.

[newcat]

Unfortunately I have very little time at the moment (that's also why it took me so long to answer, sorry for that). While this is an interesting feature, I honestly want to focus on finally releasing v2. I'll leave that issue open for now; either for someone else to implement it or for me to revisit after I have v2 kinda stable.

BTW: In v2 you can do something similar, although visually different: https://v2.baklava.tech/editor/subgraphs.html

[TomYeoman]

No problem at all, I appreciate the response, and thanks for the information on the V2 work.

Subgraphs look useful, but not quite what we're after right now in terms of a lightweight way to quickly annotate graphs. I will keep this issue updated with how we progress!

[TomYeoman]

Trying to get my head around this work, and I was wondering how this sounds.

Some sort of custom NodeAnnotator component needs to be created.

It seems the "baklava" way to do this, would be to create a new custom package @mypackage/node-annotator, however it doesn't seem like the event system really fulfils the requirements for this new component;

• We need to access to the the internal state date within @baklavajs/plugin-renderer-vue (the scale property),
• We must be able to render our annotation (I.E custom component) within the graph (I.E node-container) in order for scaling to work correctly. This is where things get a little more interesting. It looks like there is a way to add new components to @baklavajs/vue, however it must be to overwrite an existing core component type (https://newcat.github.io/baklavajs/#/styling?id=hardcore-customization).

This makes me feel like instead, an extension of @baklavajs/plugin-renderer-vue might be necessary (with this new custom component living in there) if we want to do this nicely, leaning on the framework.

Any input would be much appreciated.

[newcat]

I have added a default <slot> to the editor so you can add custom content in there. I just noticed after releasing that you probably need a slot inside the .node-container div 🤦‍♂️ I'll add more slots in the next version but for now it should still be possible to add stuff to the editor.