Cannot read properties of undefined (reading 'data')

angelostiffy commented 1 year ago

Hello Jero,

I recently went back to my workflow code now all of a sudden when the debugger goes to this.editor.start() the dev console logs an error and the default diagrams that I set up to show when loading the page won't appear now because of which.

` ngAfterViewInit(): void { this.initMouseTouchEvents(); this.initDrawflow(); this.configStartAdd(); }

initDrawflow(): void { const drawflowId = this.drawflow.nativeElement; const dataToImport = workflowInstructions; this.editor = new DrawflowLocal(drawflowId); this.editor.reroute = false; this.editor.curvature = 0; this.editor.reroute_curvature_start_end = 0; this.editor.reroute_curvature = 0; this.editor.createCurvature = (start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) => { let center_x = ((end_pos_x - start_pos_x) / 2) + start_pos_x; return ' M ' + start_pos_x + ' ' + start_pos_y + ' L ' + center_x + ' ' + start_pos_y + ' L ' + center_x + ' ' + end_pos_y + ' L ' + end_pos_x + ' ' + end_pos_y; } this.editor.contextmenu = (e) => { this.editor.drag = false; this.editor.drag_point = false; this.editor.connection = false; this.editor.ele_selected = null; this.editor.editor_selected = false; this.editor.dispatch('contextmenu', e);
} this.editor.start(); this.editor.import(dataToImport);
}

`

jerosoler commented 1 year ago

Show your importdata

angelostiffy commented 1 year ago

export const workflowInstructions = { "drawflow": { "Home": { "data": { "1": { "id": 1, "name": "welcome", "data": {}, "class": "welcome", "html": "\n <div>\n <div class=\"title-box\">👏 Welcome!!</div>\n <div class=\"box\">\n <p>Xamun Workflow Designer<p><br>\n\n <p>Multiple input / outputs<br>\n Data sync nodes<br>\n Import / export<br>\n Modules support<br>\n Simple use<br>\n Type: Fixed or Edit<br>\n Events: view console<br>\n Pure Javascript<br>\n </p>\n <br>\n <p><b><u>Shortkeys:</u></b></p>\n <p>🎹 <b>Delete</b> for remove selected<br>\n 💠 Mouse Left Click == Move<br>\n 🔍 Ctrl + Wheel == Zoom<br>\n 📱 Mobile support<br>\n ...</p>\n </div>\n </div>\n ", "typenode": false, "inputs": {}, "outputs": {}, "pos_x": 50, "pos_y": 50 }, "2": { "id": 2, "name": "start", "data": {}, "class": "start", "html":

Start

                `,
                "typenode": false,
                "inputs": {},
                "outputs": {
                    "output_1": {
                        "connections": []
                    }
                },
                "pos_x": 500,
                "pos_y": 100
            },
        }
    }
}

}`

angelostiffy commented 1 year ago

^ that's the import data

jerosoler commented 1 year ago

You can make a console log of the variable. Is the information coming?

Try to put the json in the same file to discard.

angelostiffy commented 1 year ago

Here is the console log of the import data. I also put the javascript object on the variable so that I can be on the same file, there's still the error.

jerosoler commented 1 year ago

Hello, I have tried a simple code and it seems to be correct.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <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>-->
  <script src="drawflow.js"></script>
</head>
<div id="drawflow"></div>
  <style>
    #drawflow { 
      position: relative;
      text-align:initial;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }
</style>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();

    editor.import({ "drawflow": { "Home": { "data": { "1": { "id": 1, "name": "welcome", "data": {}, "class": "welcome", "html": "\n <div>\n <div class=\"title-box\">👏 Welcome!!</div>\n <div class=\"box\">\n <p>Xamun Workflow Designer<p><br>\n\n <p>Multiple input / outputs<br>\n Data sync nodes<br>\n Import / export<br>\n Modules support<br>\n Simple use<br>\n Type: Fixed or Edit<br>\n Events: view console<br>\n Pure Javascript<br>\n </p>\n <br>\n <p><b><u>Shortkeys:</u></b></p>\n <p>🎹 <b>Delete</b> for remove selected<br>\n 💠 Mouse Left Click == Move<br>\n 🔍 Ctrl + Wheel == Zoom<br>\n 📱 Mobile support<br>\n ...</p>\n </div>\n </div>\n ", "typenode": false, "inputs": {}, "outputs": {}, "pos_x": 50, "pos_y": 50 }, "2": { "id": 2, "name": "start", "data": {}, "class": "start", "html":'Start', "typenode": false, "inputs": {}, "outputs": { "output_1": { "connections": [] } }, "pos_x": 500, "pos_y": 100 }, } } } });
</script>
</body>
</html>

The html node in node 1 start I don't know if it is correct.

It is not displayed correctly in the above comment.

angelostiffy commented 1 year ago

I just followed ^ your code here's the result:

I'm not sure anymore what to do but when the Angular project version was 13, Drawflow went well. But when we updated it to 14 this started to happen.

jerosoler commented 1 year ago

Angular unknown. But have you tried removing the "this"

angelostiffy commented 1 year ago

The "this" is required in Angular

angelostiffy commented 1 year ago

An update on this issue, I made it work by copying drawflow.js from the source code, converted it to Typescript, saved and changed the import reference of Drawflow from the node_modules to the .ts file that I created.

Co-Maheshh commented 1 year ago

@angelostiffy bro you can try like this... var mythis=this;

assign this to the mythis varible and use mythis like this.. mythis.editor.reroute = true; mythis.editor.reroute_fix_curvature = true; mythis.editor.force_first_input = false;
mythis.editor.start();

jerosoler / Drawflow

Cannot read properties of undefined (reading 'data') #603