Более наглядная иллюстрация исполнения бизнес процессов в диаграмме

[leonpolak]

Это довольно непростой кусок, в ходе которого придётся разбираться с Joint.js, но я там подскажу что-куда.

В разделе server есть файл flows/Store.md, который показывает соурс код файла и диаграмму построенную на его основе, справа вверху есть кнопка Run запускающая бизнес процесс на сервере и показывающая его поэтапное исполнение. Прямо сейчас, этапы процесс показываются интерактивными формами и примитивным alert. Это надо переделать таким образом, чтобы этапы процесса обозначались на самой диаграмме, как здесь (выделите справа вверху Scenario 2, выберите "move", отодвиньте подальше "Scenario End", выберите "run" и кликните на "Scenario Start"). Примерный код для такой функциональности я дам.

[Volchinskiy]

10.08.2022 взял это ишью.

[leonpolak]

Здесь можно посмотреть на демо с перемещающимися шариками
Они делаются примерно так:

paper.on('element:pointerdown', this.elementPointerdownHandler);
elementPointerdownHandler(cellView, evt, x, y){
const element = cellView.model;

                if (this.modes.run){
                    element.trigger('signal', element);
                }
}

Вот образец кода для анимации прерывистых линий

if (this.animatedLinks.on){
                    this.animatedLinks.on = false;
                    for (let link of this.links){
                        link.attr(['line', 'strokeDasharray'], null);
                        link.attr(['line', 'strokeDashoffset'], 0);
                    }
                    if (this.animatedLinks.interval) {
                        clearInterval(this.animatedLinks.interval);
                        this.animatedLinks.interval = null;
                    }
                }
                else {
                    this.animatedLinks.on = true;
                    for (let link of this.links){
                        link.attr(['line', 'strokeDasharray'], '3 5');
                        link.attr(['line', 'strokeDashoffset'], 0);// link.animate();
                    }
                    this.animatedLinks.interval = setInterval(()=>{
                        for (let link of this.links){
                            link.attr(['line', 'strokeDashoffset'], link.attr(['line', 'strokeDashoffset']) + 5);
                        }
                    }, 100)
                }