An exception occurs when node data key has ',' or '|' and some areas cannot be dragged

[rni-l]

Hi, I have two questions.

Version: 0.0.54.

First:

An exception occurs when the node data key has ',' or '|'.

code:

editor.import(drawflow: {
          Home: {
            data: {
              1: {
                id: 1,
                name: "welcome",
                data: {
                  test: {
                    "aaa,a": "1",
                    "aaa|a": "1",
                  },
                },
                class: "welcome",
                html: '<div>test</div>',
                typenode: false,
                inputs: {},
                outputs: {},
                pos_x: 50,
                pos_y: 50,
              },
            },
          },
        },)

Second:

If the root dom has class, the outside of '.drawflow' cannot be dragged.

I think it was caused by here:

In this demo, it will be reproduced.

[jerosoler]

Hi @rni-l

Thanks for issue and PR.

I see you are using vue.

Not only those characters are not allowed. If not many others too.

Affects all characters in html attributes. https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
For example: "@#$...."

That for example students could conflict with vue ":", "@"
https://vuejs.org/v2/guide/syntax.html#Shorthands

We would have to get all the allowed characters and not just two.

For example chrome not support or show error:

The attribute df they are used to synchronize directly with the data. If it is badly formed or the browser does not support it, it could cause errors or problems. I think it is better not to allow strange characters.

Jero

[rni-l]

Thanks @jerosoler

But I need to save complex data in each node, it includes ',' and '|' characters, so do you have other ways to solve this problem? Can I only use an additional object to store the node data?

[jerosoler]

If you are not going to use the df attributes, you can use:
#97

If you can't convert the data before "import" and after "export".

[rni-l]

Thanks @jerosoler

I solved the first question.

[jerosoler]

Can you elaborate on the second question?

[rni-l]

You can go to look at this demo.

The blue area is the root node and the red area is the '.drawflow' node. When I added the class to the root node, I can't drag the blue area, only the red area.

// HTML
<div class="box"></div>

// js
editor= new Drawflow(document.querySelector(".box"));

I think it was caused by here:

Forgive my bad English...

[jerosoler]

It is an issue that is currently open. #141

Change:

<div class="box"></div>

For:

<div class="parent-drawflow box"></div>

[rni-l]

Thanks.