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.

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

Detecting step editor unmount #136

Open
tskomudek opened this issue Apr 7, 2024 · 8 comments
Open

Detecting step editor unmount #136

tskomudek opened this issue Apr 7, 2024 · 8 comments

Comments

@tskomudek
Copy link

Hi Bart,

when using a custom step editor in the react designer, i have the problem to loose the
current changes in the form when the user accidentally clicks into the editor space
and the stepeditor component gets unmounted.

I remember you wrote somewhere that this is currently not possible in the react version,
but do you have an idea how to work around this ?

Thanks a lot

Tilo

@b4rtaz
Copy link
Collaborator

b4rtaz commented Apr 8, 2024

Hello @tskomudek,

basically you can always save the latest value in the step like:

<input type="text" ... onChange={e => setProperty('x', e.value)} />

So in the definition you will have allways the latest changes.

If you have a save step between changing values and applying them, then you can create a hidden property in the step, such as deltaX.

<input type="text" ... onChange={e => setProperty('deltaX', e.value)} />

During saving changes you need to move values to a final property (deltaX => x).

@b4rtaz
Copy link
Collaborator

b4rtaz commented Apr 29, 2024

@tskomudek have you resolved the problem?

@tskomudek
Copy link
Author

Not really.
Yes, i can store the modified data somewhere, but i'd rather ask the user if he wants to navigate away from the current step without saving. Do you have any other idea how to achive this ?

Thx
Tilo

@b4rtaz
Copy link
Collaborator

b4rtaz commented Apr 30, 2024

It looks like you need a canCloseEditor callback or something like this. Yeah, it's not available now.

Maybe a temporary solution would be to use the isSelectable callback 🤔, something like:

isSelectable: (step) => {
   if (hasUnsavedChanges()) return window.confirm('You have unsaved data in the editor...');
   // ...
}

@ShraddhaFutrey
Copy link

ShraddhaFutrey commented May 24, 2024

When i integrated sequential-workflow-designer-angular in my existing project in place of router outlet but its not getting initialised properly...svg not taking full height and toolbox not getting initialized
963066D4-C63D-4AE6-B37E-7D8205159105_1_201_a

I followed angular demo example -initialize with angular
please let me know what could be the reason
thanks a lot!!

@b4rtaz
Copy link
Collaborator

b4rtaz commented May 24, 2024

@ShraddhaFutrey it looks like the parent layers have not set any height constraints. The designer doesn't stretch parents, it adjusts to available space. You can check this theory by setting CSS:

.sqd-designer {height: 900px;}

BTW: please don't add comments to not related threads.

@tskomudek
Copy link
Author

Hi Bart,

the isSelectable callback would help partially, but it doesn´t cover when the user just clicks into the canvas and the root editor appears or the user drags a new step from the toolbox.
An isUnselectable or canCloseEditor callback would be more suitable. Also, the onSelectedStepIdChanged event doesn't help here, since when it's called the stepeditor is already unmounted.
Maybe its worth considering at least.

Thanks
Tilo

@b4rtaz
Copy link
Collaborator

b4rtaz commented Jul 31, 2024

@tskomudek yes, this feature is planned but with a low priority. If you need this feature faster you can request it under the consulting service.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants