jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.42k stars 714 forks source link

Changed style / position after clear() start() #813

Open tidus004 opened 5 months ago

tidus004 commented 5 months ago

I have added a button to reset the editor. What I have noticed, is that although I was adding node in the same position (etc 100, 100), the actual position from the user perspective was different.

Here are two screenshots showing it.

Screenshot 2024-01-25 at 14 21 35

Screenshot 2024-01-25 at 14 21 41

It seems that when doing start, the styles changed before and after performing

this.editor.clear(); this.editor.start();

Changed style: inlineSize: before = 1200.98px, after = 600.484px Changed style: perspectiveOrigin: before = 600.484px 238px, after = 300.234px 238px Changed style: transformOrigin: before = 600.492px 238px, after = 300.242px 238px Changed style: webkitLogicalWidth: before = 1200.98px, after = 600.484px Changed style: webkitPerspectiveOrigin: before = 600.484px 238px, after = 300.234px 238px Changed style: webkitTransformOrigin: before = 600.492px 238px, after = 300.242px 238px Changed style: width: before = 1200.98px, after = 600.484px Position dimension changed : width: before = 1200.984375, after = 600.484375 Position dimension changed : right: before = 1623.984375, after = 1023.484375

jerosoler commented 5 months ago

Hi

editor.clear() not return position at start.

You can use this function to return to coordinates 0.0

I don't think you should call start again if it is already started.

tidus004 commented 5 months ago

Thank you!! So I needed to to editor.start() in order to reset the nodeID count to 0. Otherwise, if a new node was added, the id was not starting from 0. When doing editor.start(), what happened is that a new '.drawflow' was created.

I fixed the problem by doing this

this.editor.clear();
const drawflowContainer = this.$refs.drawflowContainer;
while (drawflowContainer.firstChild) {
drawflowContainer.removeChild(drawflowContainer.firstChild);
}
this.editor.start(); 

Awesome library by the way!