How to restore the html elements which is created dynamically

gunasekharravilla commented 3 years ago

i am storing Drawflow json object in localstorage after reloading the page all dynamically added rows are not loading back

jerosoler commented 3 years ago

Html dynamically is not added in the export data.

View to store new html in node: https://github.com/jerosoler/Drawflow/issues/40#issuecomment-692820035

jerosoler commented 3 years ago

This line conten all html on node. editor.drawflow.drawflow.Home.data[5].html = "...."

The "Home" is editor.module and the "5" is node ID.

You just have to add the same information as you do in the node.

gunasekharravilla commented 3 years ago

currentTarget = event.currentTarget.closest(".selected");
  editor.drawflow.drawflow["Home"].data[1].html = currentTarget.innerHTML;

currently i am doing this to update dynamically added html but outside node design is changing after importing

before

after

jerosoler commented 3 years ago

You are copying the content of the node.

You would have to search for the content within the child ".drawflow_content_node"

gunasekharravilla commented 3 years ago

design came correctly but after reloading the page modal is popping up automatically

jerosoler commented 3 years ago

I do not copy the contents of the DOM as the DF attribute values would not have to be copied.

<!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://unpkg.com/drawflow/dist/drawflow.min.js"></script>

    <style>

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

      </style>
  </head>
  <body>
    <button onclick="exportDF()">Export</button>
    <button onclick="importDF()">Import</button>
        <div id="drawflow"></div>  

    <script>

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

        editor.start();

        var html = `<div><p>Hii<p>
                    <button onclick="addimage(this)">addImage</button>
                    <div class="images"></div>
                    <div>`;

        editor.addNode('github', 2, 2, 150, 100, 'github', {}, html);
        editor.addNode('github', 2, 2, 300, 150, 'github', {}, html);

        let  dataExport = {};
        function  exportDF() {
            dataExport = editor.export();
        }
        function  importDF() {
            editor.import(dataExport);
        }

        function addimage(el) {
            const ele =  el.closest(".drawflow-node");
            const nodeId = ele.id.slice(5);
            const nodeInfo = editor.getNodeFromId(nodeId);

            const img = document.createElement("img");
            img.src=  'https://avatars.githubusercontent.com/u/53616269?s=88&u=b7dc0eae565dfcc78bef7905766b55b06cf2d4a9&v=4'
            img.width = '35';

            // Add image to export
            const transformToElement = new DOMParser().parseFromString(nodeInfo.html, 'text/html').body;
            transformToElement.querySelector(".images").appendChild(img);

            // Update Export 
            const module = editor.module;
            editor.drawflow.drawflow[module].data[nodeId].html = transformToElement.innerHTML

            // Add image to editor
            const  images = ele.querySelector(".images"); // Select target
            images.appendChild(img);

            // Update connections for resize node.
            editor.updateConnectionNodes(`node-${nodeId}`);
        }

    </script>

  </body>
</html>

gunasekharravilla commented 3 years ago

i did this and everything is working fine

var currentTarget;
    currentTarget = event.currentTarget.closest(".drawflow_content_node");
this.drawflow.drawflow[this.module].data[
        currentTarget.parentElement.id.slice(5)
      ].html = currentTarget.innerHTML.replaceAll(
        "display: block;",
        "display: none;"
      );

jerosoler / Drawflow

How to restore the html elements which is created dynamically #252