No mechanism to save or quit DrawSVG

[svdasein]

I've tried this in both FF and Chrome - same result. The "save" and "close" buttons described in the documentation don't appear to actually exist. Also, the "Save" button is grayed out.

Is DrawSVG integration broken?

node-red 3.0.2 node-red-contrib-ui-svg 2.3.1 FF 102.0.1 (64-bit) chrome 107.0.5304.110-1

[bartbutenaers]

Hi @svdasein,

For me the buttons in the top bar are available. For example in Chrome:

It is normal that the buttons on the left are greyed out, because it was confusing that you could save and load stuff via DrawSvg (instead to and from Node-RED).

It also works for me on Edge and Firefox, all running on my Windows 10 portable. Perhaps you use another OS? Any errors in your browser console log perhaps?

And yes the integration with DrawSvg is getting worse, because part of the DrawSvg features are now only available in the non-free expert version. Cannot do anything about that...

Bart

[svdasein]

Bart I am running this on Linux Mint 20.03. The browser takes me several levels away from the OS though does it not? Is something windows specific going on there?

I'm not really a web dev guy so I'm not entirely sure what I'm looking at, but I noticed in the console in FF this little bit when I click on the open editor button:

If I hover over that red NO thing, the tooltip says "Blocked by DevTools". It's not clear to me what that means or whether it's important. Is it?

[bartbutenaers]

I have no clue whether this is Windows related...

I assume this is the reason why it doesn't work, because jschannel is used to communicate with DrawSvg...

In my case this library loads fine, as you can see in my Network tab (when I use the FF developer tools):

Don't know if that "blocked by devtools" is FF specific, or what it means. What do you see when you use Chrome developer tools? I'm more familiar with Chrome...

[svdasein]

Here's what chrome gives me:

[bartbutenaers]

As you can see here, I have the same issues:

Since these issues are no problem for me, this doesn't show us any useful information ;-(

I'm afraid I won't be able to solve this one, without getting you out of your comfort zone... Could you please follow these steps:

1. Find the node-red-contrib-ui-svg directory on your system

2. Open the svg_graphics.html file in that folder

3. Add a debugger statement just before the line containing "icon-disk" (where the two buttons are added to the titlebar of the DrawSvg popup window):

   debugger;
   
   // Let's customize the popup dialog, by setting a custom title and a 'Save' menu button (to save intermediate) and a full screen button
   window.svgEditorDialogDiv.parent().find(".ui-dialog-titlebar").append('<button id="btnSave" style="right: 26px" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" title="Save"><span class="ui-button-icon ui-icon ui-icon-disk"></span></button>');
   window.svgEditorDialogDiv.parent().find(".ui-dialog-titlebar").append('<button id="btnMaximise" style="right: 48px" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" title="Fullscreen"><span class="ui-button-icon ui-icon ui-icon-arrow-2-ne-sw"></span></button>');

4. Save the file

5. Restart Node-RED

6. Refresh your browser window, where your flow editor is displayed

7. Open your Chrome developer tools (once you see your flow again)

8. Double click the svg node and click the blue button to show DrawSvg

9. Now you should automatically arrive on the "debugger" statement you have added.

10. Click to times on the below icon, to execute the statements that add the buttons (the statement that you are currently executing will be highlighted blue):

    

11. When you select the part before ".append" and you hoover above that selected javascript code, you will see whether he has found the titlebar:

    

I assume something must be going wrong somewhere in that code snippet. But not sure...

[svdasein]

Ok so I got into it w/ the FF debugger. As far as I can tell you are managing to add dom elements to the titlebar, but something is not working as expected. Here's what I see in the inspector right after you do those dom append calls:

An interesting thing there is that except for the "SVG Editor" thing, the lines between ::before and ::after (which I don't know what those are) do not highlight when I hover over them. The "SVG Editor" string does highlight properly - your buttons just appear to be ignored.

Your stuff - when I select it - shows up as "pseudo elements".

Any ideas?

[bartbutenaers]

Hi @svdasein, Apologies for not responding earlier!! The lack of free time is getting worse lately...

Thanks for taking the time to execute my steps!
I am not a CSS specialist, so not sure why JQuery adds the "::before" and "::after" pseudo-elements. The weird thing is that I also have those before and after pseudo-elements:

So I assume those pseudo-elements are not the root cause, why the buttons aren't displayed...

When you select one of the buttons in your developer tools, can you see something weird in your "Style" tabsheet. Like e.g. here with chrome:

I means some property about visibility/hidden, and so on?

[svdasein]

Bart I just don't know enough about the web to get this going - do you think you could add an option to the svg tab that'd allow for just loading from a local file? Right now if I wanted to do that it'd be copy->paste right?

I mention it cuz as it turns out there are some pretty awesome native tools for editing svg in linux - inkscape among them. The copy/paste operation is a pain though. "Load File" would be much nicer.

[edit] Actually I just found the whole "configure the node via commands" thing - that might be sufficient. You've done some really awesome work here :)

[bartbutenaers]

Dave, Not sure if your last question is related to your previous questions? Do you mean that - because you are stuck with DrawSvg - that you know try a third-party SVG editor drawing tool. And that you want to transfer the SVG (generated by that tool) to the SVG node?

If so, yes indeed you can copy paste your SVG string into the SVG tabsheet.

I am not tempted to add such a button, because you have a workaround and because this node is end-of-life. Because the current Node-RED dashboard is end of life: it is written in AngularJs which is not supported anymore. I would like to migrate my ui nodes to Flexdash, a new dashboard for Node-RED, which is currently in alpha status. But I don't have enough free time to do that...

[svdasein]

Bart the workaround I have is doing great. Thanks for your time on this and for the Flexdash pointer. I'm closing thing.