Drawflow in Angular

[Nagaraj172004]

im implementing the DrawFlow component to Angular project , draflow works ok but when i drag in and drag out the node im getting this error, Uncaught TypeError: Cannot read properties of null (reading 'clientWidth') at addNodeToDrawFlow ((index):137:41) at drop ((index):128:9) at HTMLDivElement.ondrop ((index):336:9)

can anyone tell me where i mistake , Thanks in advance , Pls check attached snap below , Thank you

git respository link : https://github.com/Nagaraj172004/drawflow ( i hope this will help to someother developers to clone draflow component and responses Thank you )

[Faizi9321]

Hi, can you guide me how to implement properly in a project drawflow if yes then i think we both reslove issues related to this.. its my whatsapp number +923064502675.

[Nagaraj172004]

Hi @Faizi9321 glad to hear , please use the github URL above mentioned , clone the project in your system (using the Git command) .

step1; install node packages (npm install) step2: install drawFlow dependencies ( npm i drawflow) thats all . after compile successfull open browser localhost:4200 .

i hope this answer is helpfull , Thank you..

[FaizanAwais]

I do this all but when start its nothing to show in my project and my project is typescript based.

And, i saw you setup as a javascript in directly index.html file

[Nagaraj172004]

yeah based on javascript i design this project if you want typescript based function , just copy index.html function (method ) paste it in your drawflow component. For Example :

HTML

    <div class="drag-drawflow" draggable="true" (ondragstart)="drag($event)" data-node="facebook">
        <i class="fab fa-facebook"></i><span> Nagaraj</span>

TS

  drag(ev) {
  if (ev.type === "touchstart") {
    mobile_item_selec = ev.target.closest(".drag-drawflow").getAttribute('data-node');
  } else {
    ev.dataTransfer.setData("node", ev.target.getAttribute('data-node'));
  }
}

i hope this answer is helpfull , Thank you

[Nagaraj172004]

any solution or suggestion for this error @jerosoler ?

[jerosoler]

I don't know how angular works. I don't see any code.

[Nagaraj172004]

HTML

<div class="drag-drawflow" draggable="true" (ondragstart)="drag($event)" data-node="facebook">
    <i class="fab fa-facebook"></i><span> Nagaraj</span>

TS

   drag(ev) {
    if (ev.type === "touchstart") {
       mobile_item_selec = ev.target.closest(".drag-drawflow").getAttribute('data-node');
       } else {
          ev.dataTransfer.setData("node", ev.target.getAttribute('data-node'));
    }
 }

this is my code @jerosoler , when i drag and drag out the Node getting error

Cannot read properties of null (reading 'clientWidth') at addNodeToDrawFlow ((index):137:41) at drop ((index):128:9) at HTMLDivElement.ondrop ((index):336:9)

[Nagaraj172004]

is it possible to provide me the Javscript code to implement Drawflow @jerosoler , i will figuare it out , if its success i will inform here lets everyone implement drawflow in there project

Thank you !

[jerosoler]

The problem is surely in these two lines.

Look at the editor variable.

pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));

[Nagaraj172004]

correct this code snippet is not running in javascript @jerosoler :

pos_x = pos_x * (editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * (editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));

Uncaught TypeError: Cannot read properties of null (reading 'clientWidth') at addNodeToDrawFlow ((index):172:41) at drop ((index):163:9) at HTMLDivElement.ondrop ((index):371:9)

[jerosoler]

Does the editor variable return anything?

Check if it doesn't return something.

[Nagaraj172004]

please check the attached snap @jerosoler

[jerosoler]

If the variable is null, then it is not defined. I would have to see why it is not defined.

I don't know the angular framework.

I recommend you check out this repo:

https://github.com/RoyaghRamo/angular-drawflow-example

Review function "addNodeToDrawBoard" https://github.com/RoyaghRamo/angular-drawflow-example/blob/3d45491c458bd41607dba3c2d1c8f4c33bc3c949/src/app/drawing-board/drawing-board.component.ts#L353

[Nagaraj172004]

@jerosoler when i did these changes getting inject() must be called from an injection context (a constructor, a factory function or a field initializer). error which is in Angular can ayone tell me why it is throwing runtime error

ERROR Error: NG0203: inject() must be called from an injection context (a constructor, a factory function or a field initializer). Find more at https://angular.io/errors/NG0203 at injectInjectorOnly (core.mjs:4863:15) at Module.ɵɵinject (core.mjs:4873:60) at Object.NgbModal_Factory [as factory] (ng-bootstrap.mjs:242:95) at R3Injector.hydrate (core.mjs:9301:35) at R3Injector.get (core.mjs:9189:33) at ChainedInjector.get (core.mjs:13007:36) at lookupTokenUsingModuleInjector (core.mjs:4436:39) at getOrCreateInjectable (core.mjs:4484:12) at Module.ɵɵdirectiveInject (core.mjs:10778:12) at NodeInjectorFactory.DrawingBoardComponent_Factory [as factory] (drawing-board.component.ts:18:35)

[Nagaraj172004]

@jerosoler any idea or sugesstion ??

[jerosoler]

I don't know the angular framework.

[Alfxjx]

hi all I make a pull request for using drawflow in angular

https://github.com/Nagaraj172004/drawflow/pull/1

have fun using drawflow :D