"text" and "text_edit" doesn't work for setMode in SvgCanvas

[Ohw222]

Hello
I'm trying to use SvgCanvas, I used the template (demo/canvas.html), I added a button like this : <button onclick="canvas.setMode('text')">Text</button> but when i'm using it by clicking on the canvas zone, that doesn't works.

To Reproduce
Steps to reproduce the behavior:

1. Go to the file canvas.html, edit it
2. Add the line <button onclick="canvas.setMode('text')">Text</button> under the 'line' one
3. Save the document and load it with a webbrowser
4. Click on the "text" button and then on the canvas area
5. See the error in your borwser's console

Expected behavior
I just expect that i can write some text in the textarea created

SVG-Edit environment

• File for SVG-Edit: svgcanvas.js and canvas.html
• Version: [e.g. 3.0.0]
• Protocol: http and https

Desktop:

• OS: Tried on Solus Budgie and Windows 10
• Browser (versions) : Chrome (72 and 73), firefox (64)

Thanks for your answers, have a nice day !
-Ohw

[brettz9]

Some initialization can be required when not using the SVG Editor. (You'd have to look through svg-editor.js or svgcanvas.js to see what is required, as the canvas independent of the editor is not documented outside of there being that basic demo.)

Investigating a little bit, the textinput is undefined error signals that setInputElem (the one place that sets the variable) hasn't been called with a text element (as it is when the full SVG editor is used).

If you add a text input element (in the editor we use an invisible element):

      <input id="text" size="35" hidden="true"  />

...you can then pass the DOM of this in before calling canvas.setMode('text') (like within the last script, the init script, on the page):

canvas.textActions.setInputElem($('#text')[0]);

(We could probably avoid the need for this by adding the input element automatically since it is hidden.)

However, this is as far as I got, as though the error disappears, and the control shows up within the canvas, the text is only present in our (hidden) input--it doesn't show up within the canvas for whatever reason. You'd have to investigate this further.

I'll close this, but it should be nice to have a more generic issue to fully document the canvas dependencies if you wanted to file such an issue (in case anyone might help).

[cg-scorpio]

In order to make the text appear on the SVG, I think you have to add the following lines at the same place you call the setInputElem method :

const addListenerMulti = (element, eventNames, listener) => {
    eventNames.split(' ').forEach((eventName) => element.addEventListener(eventName, listener, false));
};

addListenerMulti($('#text')[0], 'keyup input', (evt) => {
    this.canvas.setTextContent(evt.currentTarget.value);
});

[jfhenon]

Would you be OK to submit a PR if you want this code to be added?

[cg-scorpio]

Yes of course, but the code is just in order to use the text mode with the Canvas without the editor. Do you want I update the code of the demo/canvas.html file?

[jfhenon]

yes

[tech-scorpio]

Do I need special grant on the project in order to create a branch? I don't find a way to create a branch...

[jfhenon]

Hello, if you intend to create PR regularly, I can add you as a maintainer to the project. If not, you can clone the projet in your own repository, make the changes and then propose a PR back to the SVGEDit repository. Thanks.

[cg-scorpio]

I have another change to propose. (to fix a bug in the mouse wheel event). I will continue to use svgEdit for my professionnal project in the next month. So, It would be nice to add me as a maintainer. Regards CG Le dim. 21 nov. 2021 à 10:51, JFH ***@***.***> a écrit :

Hello, if you intend to create PR regularly, I can add you as a maintainer to the project. If not, you can clone the projet in your own repository, make the changes and then propose a PR back to the SVGEDit repository. Thanks. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#530 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVRYTJICCRHHXIYHD6373XLUNC6JVANCNFSM5IBYM7NA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

-- Cedric Godefroy CTO & Co-funder <https://www.linkedin.com/in/c%C3%A9dric-godefroy-6909b2a2/>

[cg-scorpio]

Here is the PR : #666

Regards
CG