V7 can be previewed in V7-preview branch

[jfhenon]

Goals:

• move from jQuery to web components (at least make sure jQuery can be used in its latest versions)
• make svgedit js more modular
• more es6 style
• simplify customization

Please note that this preview is incomplete but all comments/contributions are welcome.

[carrete]

@jfhenon, I was using the latest version of SVG Edit on master as of a week+ ago. In an effort to solve a problem I had, I updated to the latest on master as of today which includes a very large pull-request merge. From the pull-request, I understand this is what will become V7. I was able to use SVG Edit in an iframe (same origin) and interact with it using the embedded api. This no longer works. Is this a known issue in V7, or perhaps there's a migration step I missed? I switched from editor/svg-editor.html to dist/editor/index.html. I haven't made any changes to my use of EmbeddedSVGEdit.

[jfhenon]

The V7 preview is not yet ready. There will be breaking changes. We are now working on the UI conversion mainly moving jQuery to Web Components. We will obviously fix the use of the embedded API with a frame before it goes to production but this is broken at this time.
The master branch is still V6 and "should" be working with embedded API even if we made significant changes in the underlying canvas and the rollup build system. As you rightly guessed, there is now a single entry point to the project 'dist/editor/index.html). No other changes should be required.
We would be OK to spend some time on your issue to fix it but would you be able on your side to give us more details on your issue and if possible a code example so we can reproduce it.
Thanks

[warrenvail]

Does switching to dist/editor/index.html break the ability to imbed a editor in a html page?, or do I now need to imbed something on the dist/editor path?

[jfhenon]

we want to imbed the editor in a html page. So this should work. You need to add a div in your page (look at index.html itself for an example).

[carrete]

You can think of what we're doing (we're not though) as a document manager.
You select a document, and, based on its mime-type, we select an editor for
it. We're using ClojureScript and react on the front-end. As a test to
evaluate if we can use SVG Edit in this environment, we're opening SVG Edit in
an iframe, and loading a fixed SVG string into SVG Edit via its embedded API
(a.k.a. via postMessage).

As I started to create this test, I quickly encountered an issue where our
application would attempt to set the fixed SVG string before SVG Edit had
loaded and created its message listener. To work around this issue, I updated
editor.init so that just before it returns an invisible div is created with a
particular id. (If SVG Edit has another way to indicate that it's ready which
doesn't involve repeatedly calling the embedded API until a callback is
triggered, let me know and I'll happily use it instead.)

I was able to complete the test described above by directly hacking SVG Edit
under node_modules/. Unfortunately however, I couldn't get SVG Edit to build.
To use a modified version of SVG Edit, we need to package and publish it to
our NPM registry (on GitLab). In an attempt to solve this build issue, I
ported my changes to the latest version of the master branch. This latest
version does build, but now I'm unable to set the fixed SVG string. Other than
using a different HTML page for the iframe as mentioned above, everything else
is the same. I added some debugging statements in embeddedapi.js, and I see
that postMessage is being called with the right set of inputs, but nothing
happened as if the message is never received or there's an error that isn't
being reported. Unfortunately, postMessage always returns nil no matter what.

(ns thing.ui.svgeditor
  (:require
    ["@acme/svgedit/dist/editor/embedapi.js" :default EmbeddedSVGEdit]))

(defn- call-when
  [ready?-fn call-fn cb-fn]
  (if (ready?-fn)
    ((call-fn) cb-fn)
    (js/setTimeout #(call-when ready?-fn call-fn cb-fn) 100)))

(defn write
  [data]
  (when-let [svg-editor (.getElementById js/document "svgEditor")]
    (let [ready?-fn #(when-let [frame (.-contentDocument svg-editor)]
                      (.getElementById frame "svgEditReady"))
          write-fn #(.setSvgString (EmbeddedSVGEdit. svg-editor "*") data)]
      (call-when ready?-fn write-fn #(pprint {:args %})))))

Our front-end application calls write with a fixed SVG string on
componentDidMount. write creates two functions, a function that checks if the
invisible div has been created, and another that calls setSvgString using the
embedded API. call-when calls write-fn, i.e. setSvgString via postMessage,
when ready?-fn returns true, i.e. the invisible div has been created.

This worked with v6, however I couldn't get SVG Edit to build. Using the most
recent version on master, SVG Edit builds, but setSvgString/postMessage no
longer works.

What have I missed? Thanks

[carrete]

@jfhenon I may have narrowed the problem down. I see the message I send is added to messageQueue and called when the extensions_added message is triggered here https://github.com/SVG-Edit/svgedit/blob/master/src/editor/svgedit.js#L835:

svgCanvas.call('message', messageObj);

This invokes the call method on the svgCanvas object here https://github.com/SVG-Edit/svgedit/blob/master/src/svgcanvas/svgcanvas.js#L516:

const call = function (ev, arg) {
  if (events[ev]) {
    return events[ev](window, arg);
  }
  return undefined;
};

However, ev is 'message', but events is an empty dict so undefined is returned. I don't see a call to bind 'message' to the svgCanvas object anywhere. Does this look like a bug, or did I not set this up correctly? I do see other events added, like saved, changed, and exported.

FYI, I see two different values for namespace in embeddedapi.js. svg-edit is used here https://github.com/SVG-Edit/svgedit/blob/master/src/editor/embedapi.js#L70, and svgCanvas is used here https://github.com/SVG-Edit/svgedit/blob/master/src/editor/embedapi.js#L385. This is never reached because a message is never returned, but this seems suspicious to me

[jfhenon]

Thanks for spending time about this. Just to make sure we set correct expectations, it's safer at this time to use V6. V6, thanks to @brettz9 is has a good level of quality (and we will keep fixing blocking bugs and accepting PRs)

We still have a significant effort to produce for V7 to be complete but we are going as fast as possible. Please note that the integration inside other applications will be done last but this is also the way we plan to use it.

currently, we are in the process to refactor SVGEdit into ES6 classes, moving most jQuery UI into Web Component and also transforming the localization using the more standard I18next package.

Contributors are welcome!

[bluetwelve]

Hi, we are evaluating Svg-edit to be integrated in a large angular application. I have seen a lot of activity lately, can you provide a status update? Any guidance for Angular? I was able to get a basic version of the svgcanvas demo working fairly easily but have not made much progress understanding how best to work with the full UI.

[jfhenon]

Hello, we had to slow down a little recently but we are still working on making v7 released. We want to fix a number of remaining issues but we are close to our first goal.
Optimistik (my company) also needs SVG-Edit as part of a larger angular application like you. We will use the full UI as well so we will be happy to solve any issues linked to this integration if any.