is it possibe to enter Dynamic property names by user

gunasekharravilla commented 3 years ago

i want to keep df-{dynamic property name } entered by user

jerosoler commented 3 years ago

Hi @gunasekharravilla

You can use this method to pass new variables to the module. updateNodeDataFromId view https://github.com/jerosoler/Drawflow#methods Which will also have to update the module's html. View for update new html: https://github.com/jerosoler/Drawflow/issues/40

Although it is a bad idea to leave the user, since the user can put blank characters, accents, strange characters ...

gunasekharravilla commented 3 years ago

not leaving completely by clicking add button new row will be displayed then they will type what is the property name and value

jerosoler commented 3 years ago

Then you will have to use the commented function. updateNodeDataFromId

gunasekharravilla commented 3 years ago

provide sample html code for 1 row please🙏

jerosoler commented 3 years ago

The example is very simple. In this case it only works with node ID 1

View a simple example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>

    <style>

      #drawflow {
        position: relative;
        width: 600px;
        height: 600px;
        border: 1px solid red;
      }

      </style>
  </head>
  <body>
        <div id="drawflow"></div>  
        <button onclick="exportdf()">Export</button>
    <script>

          var id = document.getElementById("drawflow");
          const editor = new Drawflow(id);
          editor.reroute = true;
          editor.reroute_fix_curvature = true;

          editor.start();

        const htmltest = `<button onclick="addinput()">+</button>`
        editor.addNode('test', 1,1, 50, 100, 'test', {}, htmltest );

        function addinput() {
            document.querySelector("#node-1 .drawflow_content_node").innerHTML = `<input type="text" df-name>`;
            editor.drawflow.drawflow.Home.data[1].html = `<input type="text" df-name>`;
            editor.updateNodeDataFromId(1, { name: "hi!!!"});

        }

        function exportdf() {
            console.log(editor.export());
        }

    </script>

  </body>
</html>

gunasekharravilla commented 3 years ago

thank you so much

But i am trying to keep df-name as dynamic which is entered by users for few rows in <input type="text" df-name>

jerosoler commented 3 years ago

Change 'name' for your variable

gunasekharravilla commented 3 years ago

actually my query was when a user click plus button new row have to display with two text inputs one is property and value

both should be exported to json { property : value }

gunasekharravilla commented 3 years ago

The example is very simple. In this case it only works with node ID 1

View a simple example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>

    <style>

      #drawflow {
        position: relative;
        width: 600px;
        height: 600px;
        border: 1px solid red;
      }

      </style>
  </head>
  <body>
        <div id="drawflow"></div>  
        <button onclick="exportdf()">Export</button>
    <script>

          var id = document.getElementById("drawflow");
          const editor = new Drawflow(id);
          editor.reroute = true;
          editor.reroute_fix_curvature = true;

          editor.start();

        const htmltest = `<button onclick="addinput()">+</button>`
        editor.addNode('test', 1,1, 50, 100, 'test', {}, htmltest );

        function addinput() {
            document.querySelector("#node-1 .drawflow_content_node").innerHTML = `<input type="text" df-name>`;
            editor.drawflow.drawflow.Home.data[1].html = `<input type="text" df-name>`;
            editor.updateNodeDataFromId(1, { name: "hi!!!"});

        }

        function exportdf() {
            console.log(editor.export());
        }

    </script>

  </body>
</html>

How to do this for selected nodes

jerosoler commented 3 years ago

Use events nodeSelected and nodeUnselected to get id of node selected.

Or

const nodeId = editor.node_selected;

gunasekharravilla commented 3 years ago

actually my query was when a user click plus button new row have to display with two text inputs one is property and value

both should be exported to json { property : value }

Any solution to export user edited property name

jerosoler / Drawflow

is it possibe to enter Dynamic property names by user #226