Text enhancements

[anonimo82]

Motivation

Improve available text formatting options.

Current behavior

Currently, only a small subset of Text element options are available

Desired behavior

To format text inside SVGEdit like if it were a Web Page (and indeed, my final goal is to use SVG instead of HTML)

Alternatives considered

Manually editing SVG MarkUp

Comments and info

I'd put efforts at the "Text on a path" feature, which is really useful, and I'd pay special attention to text formatting.
You can see some (if not all) text formatting support I'd like in SVGEdit here: http://www.cheat-sheets.org/own/svg/index.xhtml

Thanks

Thanks in advance for reading and for any help you could provide
Bye, Ivano

[jfhenon]

Good points. @tdittmann just added some additional text attributes to svgedit.
I keep your issue open for a review in V7.

[tdittmann]

One eternity later: i added some attributes with #704, do you miss something else?

[jfhenon]

No, just had a look to your code and it's great.

Did you find out why the test are not passing?

I don't know if it is a configuration issue or a bug in Cypress but I noticed a difference in the snapshot when I run the text interactively with Cypress UI or when I just npm run test.
In order to update snapshots, I delete the existing *.snap, launch all tests with "npm run test", use github to make sure the differences are expected and then I push to PR.
JF

[tdittmann]

I just had some formatting issues, now it works :)

Or it is just merged, thank you 👍

[SuperContraptionGuy]

Along these same lines, I'm trying to get HTML documents embedded into SVGs.

Right now I'm adding the functionality as an extension. When the tool is used, it inserts a foreignObject tag with a div tag underneath. The position and size of the foreignObject tag is determined by the mouse inputs through mouseDown() and mouseMove() callbacks.

<foreignObject x="__" y="___" width="___" height="___">
    <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline; overflow: hidden;">
        Some HTML in here
    </div>
</foreignObject>

I figure that Squire (https://github.com/neilj/Squire), which is a library that provides functions for editing HTML, can be utilized under the hood to give HTML editing functionality. UI elements for calling the edit functions could be placed in the context sensitive toolbar at the top.

It still requires some more work.

[SuperContraptionGuy]

I've got a rough prototype going for this idea on this fork. The goal is to embed HTML elements into SVGs using svg-edit and use Squire to edit them.

A major issue I've run into is trying to distribute input events. There is some code that gives the focus to the Squire editor (a div tag) when it's time to edit the HTML, and back to the body tag to return focus to svg-edit. Many input events are being captured by svg-edit that I don't know about and am not sure about the best way to handle. Specifically, you can't drag to select text to interact with the Squire editor because svg-edit captures the event somehow and uses it to translate the foreignObject tag. Also, you can't click on inserted text to change the cursor position, and there are other keyboard inputs that are never seen by Squire even when it has focus.

Any advice or help from someone with more familiarity with the code base would be appreciated.

[jfhenon]

Hello,
Indeed, what you try to achieve is not very easy.
You may try to develop your extension using a new method to write event-based extensions. This is still undocumented but may become the standard for extensions.

In order to do this, you need to declare the extensions then in the callback() of the extension, you need to listen to "svgedit" events.

export default {
  name,
  async init (config) {
    console.log('init with config:', config)
    return {
      name,
      eventBased: true, // if eventbased is true, the extensions needs to listen to svgedit events
      callback () {
        // do what is necessary for your extensions
        // ...
        // ...
        document.addEventListener('svgedit', handleSvgEditEvent)
       // 
      }
    }
  }
}

The function svgEditEvent can be something like below (you need to pick the relevant events for your extensions)

const handleSvgEditEvent = ev => {
   switch (ev.detail.action) {
     case 'selectedChanged':
     case 'onOpenedDocument':
       console.log('onOpenedDocument', ev.detail.name)
       break
     case 'onSavedDocument':
       console.log('onSavedDocument', ev.detail.vars.name)
       break
     case 'elementRenamed':
        console.log('elementRenamed', ev.detail.vars)
        break
     case 'elementChanged':
       console.log('elementChanged', ev.detail.vars.elems)
       break
     case 'mouseDown':
     case 'mouseUp':
     case 'mouseMove':
     case 'elementTransition':
     case 'toolButtonStateUpdate':
     case 'beforeClear':
     case 'canvasUpdated':
     case 'zoomChanged':
     case 'langChanged':
     default:
       console.log(ev.detail)
       break
   }
 }

I'm currently busy with other priorities so I won't have much time to help you.
Ideally, your issue is moved to the discussion area?.
Thanks