Selectable element ids

[bartbutenaers]

Currently the users have to type the element ids (for animations and event tabsheets) manually into a text input box. But would be nice if we could allow them to choose one of the existing element ids from a dropdown list.

1. As soon as user leaves the SVG editor tabsheet, the SVG string might have been changed. So at that moment we create a list of used element id's. E.g. by using a regular expression that searches all occurences of id="xxxx".
2. Then that list can be used to show some kind of selection list at all places where an element id needs to be selected (i.e. both on the animation and the event tabsheets). ; But the user should also be able to type a non-existing id, in case he needs (for some reason) to update his SVG string afterwards?

Perhaps we could simply use a datalist, which nowadays seems to be supported by most modern browsers. It can easily be filled using javascript

[Steve-Mcl]

This seems to work ok... https://regex101.com/r/MRTHM1/2

demo - https://jsbin.com/fupuyixobi/edit?html,js,output

It extracts the element type (group 1) and the id (group 2) ONLY if there is an id

const regex = /<.*?(\S+).+?id="(.+?)"/gm;
const str =_the_svg_string;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }

    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

I've never used the datalist before (I would have done a jquery autocomplete) but this seems do-able. The advantage autocomplete has is that you can display extra info in the dropdown (like the element type + the id) but on selection, only the id is taken.

[Steve-Mcl]

I believe we can close this one?

[bartbutenaers]

Yes indeed