[REACT] Dependency validation based on which terminals are used

[Nicho]

Hey!

So I was attempting to add my own dependency creation validation. We are using the scheduler in such a way where each terminal has its own purpose (for instance, a link from the bottom terminal of one event to the left terminal of another terminal is different from linking to the right side of the same event).

The problem I encountered is that I don't see any way to determine the "fromSide" and "toSide" values of the drag event when the validation function is called. The validation function only passes the "fromId", "toId" and "type" parameters to validation function, which doesn't help with figuring out what terminals are being used in the dependency.

I had the idea to try first catching the "dependencyValidationStart" event to have access to the event data (which itself contains information about the terminals used in the dependency), and register a dependency validator based on the event provided, but this only works to get the "fromSide", with the "toSide" remaining an empty string. Here's a screenshot of my attempt to get the terminals involved in dependency creation inside the validation function:

Screen Shot 2020-06-01 at 2.16.51 PM.png (152.26 KiB) Viewed 853 times

The specific reason we want to know what terminals are involved in the dependency creation is to prevent any "bottom to bottom" terminal dependencies.

Hopefully I was able to make my requirements clear! If you need any further details, I'd be happy to provide them. All in all I've been very pleased with the Scheduler Pro component, it's far better than any alternative we've tried to use for our use case.

Thanks!

[pmiklashevich]

Hello,

toSide/toText are added after the event is fired. I've created a ticket to get it fixed. https://github.com/bryntum/support/issues/872
Meanwhile you can use target and targetTerminal to extract values:

const scheduler = new Scheduler({
    listeners : {
        dependencyValidationStart({ data }) {
            console.log(data.target.name, data.targetTerminal.dataset.side);
        }
    },

Cheers,
Pavel

[Nicho]

Thanks for the reply, this solution works perfectly!