SemianiakaVY/elsa-core
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

Implement updatable activity node shape

Browse source
This commit is contained in:
Sipke Schoorstra 2022-04-28 11:06:16 +02:00
parent 818181a425
commit 07dbeb52ed
4 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx
View file

@ -5,6 +5,7 @@ import {v4 as uuid} from 'uuid';
import {first} from 'lodash';
import './shapes';
import './ports';
import {ActivityNode as ActivityNodeShape} from './shapes';
import {ContainerActivityComponent} from '../container-activity-component';
import {AddActivityArgs} from '../../designer/canvas/canvas';
import {Activity, ActivityDescriptor, ActivitySelectedArgs, ContainerSelectedArgs, GraphUpdatedArgs} from '../../../models';
@ -188,7 +189,6 @@ export class FlowchartComponent implements ContainerActivityComponent {
}
}
debugger;
let rootActivity = activities.find(activity => {
const hasInboundConnections = connections.find(c => c.target == activity.id) != null;
return !hasInboundConnections;
@ -356,6 +356,7 @@ export class FlowchartComponent implements ContainerActivityComponent {
};
private onNodeContextMenu = async (e: PositionEventArgs<JQuery.ContextMenuEvent>) => {
const node = e.node as ActivityNodeShape;
const activity = e.node.data as Activity;
const canStartWorkflow = activity.canStartWorkflow;
@ -363,6 +364,7 @@ export class FlowchartComponent implements ContainerActivityComponent {
text: 'Startable',
clickHandler: () => {
activity.canStartWorkflow = !activity.canStartWorkflow;
node.activity = {...activity};
this.onGraphChanged();
},
isToggle: true,

7
src/designer/elsa-workflows-designer/src/components/activities/flowchart/shapes.ts
View file

@ -12,7 +12,7 @@ export class ActivityNode extends Shape.HTML {
this.store.set('text', value);
}
get activity() {
get activity(): Activity {
return this.store.get<Activity>('activity');
}
@ -20,7 +20,7 @@ export class ActivityNode extends Shape.HTML {
this.store.set('activity', value);
}
get activityDescriptor() {
get activityDescriptor(): ActivityDescriptor {
return this.store.get<ActivityDescriptor>('activityDescriptor');
}
@ -37,6 +37,7 @@ export class ActivityNode extends Shape.HTML {
const self = this;
super.setup();
this.on('change:text', this.updateSize, this);
this.on('change:activity', this.updateSize, this);
this.html = {
render() {
@ -45,7 +46,7 @@ export class ActivityNode extends Shape.HTML {
},
shouldComponentUpdate(node: Cell) {
return node.hasChanged('text');
return node.hasChanged('text') || node.hasChanged('activity');
},
};
}

2
src/designer/elsa-workflows-designer/src/components/shared/context-menu/context-menu.tsx
View file

@ -48,7 +48,6 @@ export class ContextMenu {
}
private async onMenuItemClick(e: MouseEvent, menuItem: MenuItem) {
debugger;
e.preventDefault();
if (!!menuItem.clickHandler)
@ -77,7 +76,6 @@ export class ContextMenu {
};
render() {
const anchorPointClass = this.getAnchorPointClass();
const menuItems = this.menuItems;
const hasAnyIcons = menuItems.find(x => !!x.icon) != null;

9
src/designer/elsa-workflows-designer/src/drivers/activity/default-activity-driver.tsx
View file

@ -16,10 +16,13 @@ export class DefaultActivityDriver implements ActivityDriver {
const iconRegistry = this.iconRegistry;
const activityDescriptor = context.activityDescriptor;
const activityType = activityDescriptor.activityType;
const activity = context.activity;
const canStartWorkflow = activity?.canStartWorkflow;
const text = activityDescriptor?.displayName;
const isTrigger = (activityDescriptor?.traits & ActivityTraits.Trigger) == ActivityTraits.Trigger;
const borderColor = 'border-gray-300'; //isTrigger ? 'border-green-600' : 'border-blue-600';
const backgroundColor = 'bg-white'; // isTrigger ? 'bg-green-400' : 'bg-blue-400';
const borderColor = canStartWorkflow ? isTrigger ? 'border-green-600' : 'border-blue-600' : 'border-gray-300';
const backgroundColor = canStartWorkflow ? isTrigger ? 'bg-green-400' : 'bg-blue-400' : 'bg-white';
const textColor = canStartWorkflow ? 'text-white' : 'text-gray-700';
const iconBackgroundColor = isTrigger ? 'bg-green-500' : 'bg-blue-500';
const icon = iconRegistry.has(activityType) ? iconRegistry.get(activityType) : null;
@ -32,7 +35,7 @@ export class DefaultActivityDriver implements ActivityDriver {
</div>
<div class="flex items-center">
<div class="px-4 py-4">
<span class="text-gray-700">${text}</span>
<span class=${textColor}>${text}</span>
</div>
</div>
</div>