Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
gunasekharravilla opened this issue Sep 7, 2021 · 7 comments
Closed

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

gunasekharravilla opened this issue Sep 7, 2021 · 7 comments
Assignees
@jerosoler
Labels
duplicate This issue or pull request already exists question Further information is requested

Comments

@gunasekharravilla
Copy link

i am storing Drawflow json object in localstorage after reloading the page all dynamically added rows are not loading back
@jerosoler jerosoler self-assigned this Sep 7, 2021
@jerosoler jerosoler added the question Further information is requested label Sep 7, 2021
@jerosoler
Copy link
Owner

Html dynamically is not added in the export data.

View to store new html in node: #40 (comment)

@jerosoler jerosoler added the duplicate This issue or pull request already exists label Sep 7, 2021
@jerosoler
Copy link
Owner

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
Copy link
Author 

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
image

after
image

@jerosoler
Copy link
Owner

You are copying the content of the node.

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

@gunasekharravilla
Copy link
Author

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

@jerosoler
Copy link
Owner

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
Copy link
Author

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 jerosoler mentioned this issue Oct 12, 2021
Closed
This was referenced May 2, 2022
Open
Closed
This was referenced Aug 23, 2022
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jerosoler jerosoler

Labels
duplicate This issue or pull request already exists question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jerosoler @gunasekharravilla