From c45295316c32fae66714ffa7c2feb44da4b85b1a Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Wed, 29 Jun 2022 16:08:44 +0200 Subject: [PATCH] Incremental work on switch activity --- .../activities/flowchart/flowchart.tsx | 2 +- .../default-activity-template.tsx | 12 +++++--- .../plugins/switch/switch-activity-driver.tsx | 28 ------------------- .../src/plugins/switch/switch-plugin.tsx | 6 +++- .../plugins/switch/switch-port-provider.ts | 22 +++++++++++---- .../src/services/activity-walker.ts | 9 ++++-- .../src/services/default-port-provider.ts | 13 ++++++++- .../src/services/port-provider.ts | 3 ++ 8 files changed, 52 insertions(+), 43 deletions(-) delete mode 100644 src/designer/elsa-workflows-designer/src/plugins/switch/switch-activity-driver.tsx diff --git a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx index 46a19da08..f31f1a335 100644 --- a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx +++ b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx @@ -303,7 +303,7 @@ export class FlowchartComponent implements ContainerActivityComponent { } onGraphClick = async (e: PositionEventArgs) => { - const activityId = this.activity.id; + const activityId = this.activity?.id; const args: ContainerSelectedArgs = { activity: this.activity, diff --git a/src/designer/elsa-workflows-designer/src/components/designer/activity-templates/default-activity-template.tsx b/src/designer/elsa-workflows-designer/src/components/designer/activity-templates/default-activity-template.tsx index 4c1526529..5e1138d36 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/activity-templates/default-activity-template.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/activity-templates/default-activity-template.tsx @@ -1,6 +1,6 @@ import {Component, h, Prop, State, Event, EventEmitter, Listen, Element} from "@stencil/core"; import {camelCase} from 'lodash'; -import {ActivityIcon, ActivityIconRegistry} from "../../../services"; +import {ActivityIcon, ActivityIconRegistry, PortProviderRegistry} from "../../../services"; import {Container} from "typedi"; import {Activity, ActivityDescriptor, ActivityKind, ActivitySelectedArgs, ChildActivitySelectedArgs, EditChildActivityArgs, Port, PortMode} from "../../../models"; import descriptorsStore from "../../../data/descriptors-store"; @@ -13,12 +13,14 @@ import WorkflowEditorTunnel from "../state"; }) export class DefaultActivityTemplate { private readonly iconRegistry: ActivityIconRegistry; + private readonly portProviderRegistry: PortProviderRegistry; private activityDescriptor: ActivityDescriptor; private icon: ActivityIcon; private portElements: Array = []; constructor() { this.iconRegistry = Container.get(ActivityIconRegistry); + this.portProviderRegistry = Container.get(PortProviderRegistry); } @Prop({attribute: 'activity-type'}) activityType: string; @@ -106,7 +108,8 @@ export class DefaultActivityTemplate { return undefined; const activityDescriptor = this.activityDescriptor; - const ports = activityDescriptor?.ports ?? []; + const portProvider = this.portProviderRegistry.get(activityDescriptor.activityType); + const ports = portProvider.getOutboundPorts({ activityDescriptor, activity }); const embeddedPorts = ports.filter(x => x.mode == PortMode.Embedded); if (embeddedPorts.length == 0) @@ -123,8 +126,9 @@ export class DefaultActivityTemplate { const canStartWorkflow = activity?.canStartWorkflow == true; const textColor = canStartWorkflow ? 'text-white' : 'text-gray-700'; const borderColor = port.name == this.selectedPortName ? 'border-blue-600' : 'border-gray-300'; - const portName = camelCase(port.name); - const activityProperty: Activity = activity ? activity[portName] : null; + const activityDescriptor = this.activityDescriptor; + const portProvider = this.portProviderRegistry.get(activityDescriptor.activityType); + const activityProperty = portProvider.resolvePort(port.name, { activity, activityDescriptor }) as Activity; const childActivityDescriptor: ActivityDescriptor = activityProperty != null ? descriptorsStore.activityDescriptors.find(x => x.activityType == activityProperty.typeName) : null; let childActivityDisplayText = activityProperty?.metadata?.displayText; diff --git a/src/designer/elsa-workflows-designer/src/plugins/switch/switch-activity-driver.tsx b/src/designer/elsa-workflows-designer/src/plugins/switch/switch-activity-driver.tsx deleted file mode 100644 index 5bb3c87c9..000000000 --- a/src/designer/elsa-workflows-designer/src/plugins/switch/switch-activity-driver.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import 'reflect-metadata'; -import {h} from "@stencil/core"; -import {Container, Service} from "typedi"; -import {ActivityKind} from '../../models'; -import {ActivityDisplayContext, ActivityDriver, ActivityIcon, ActivityIconRegistry} from '../../services'; - -@Service() -export class SwitchActivityDriver implements ActivityDriver { - - display(context: ActivityDisplayContext): any { - const activityDescriptor = context.activityDescriptor; - const text = activityDescriptor?.displayName; - - return (` -
-
-
-
-
- ${text} -
-
-
-
-
- `); - } -} diff --git a/src/designer/elsa-workflows-designer/src/plugins/switch/switch-plugin.tsx b/src/designer/elsa-workflows-designer/src/plugins/switch/switch-plugin.tsx index ad1354670..b8626fe7f 100644 --- a/src/designer/elsa-workflows-designer/src/plugins/switch/switch-plugin.tsx +++ b/src/designer/elsa-workflows-designer/src/plugins/switch/switch-plugin.tsx @@ -5,16 +5,20 @@ import {ActivityIconRegistry, InputControlRegistry, PortProviderRegistry} from " import {Plugin} from "../../models"; import {SwitchPortProvider} from "./switch-port-provider"; import {ActivityIconSettings, getActivityIconCssClass} from "../../components/icons/activities"; +import {SwitchPortUpdater} from "./switch-port-updater"; @Service() export class SwitchPlugin implements Plugin { - public static readonly ActivityTypeName: string = 'Elsa.Switch'; + static readonly ActivityTypeName: string = 'Elsa.Switch'; + + private readonly switchPortUpdater: SwitchPortUpdater; constructor() { const activityTypeName = SwitchPlugin.ActivityTypeName; const inputControlRegistry = Container.get(InputControlRegistry); const portProviderRegistry = Container.get(PortProviderRegistry); const iconRegistry = Container.get(ActivityIconRegistry); + this.switchPortUpdater = Container.get(SwitchPortUpdater); inputControlRegistry.add('switch-editor', c => ); portProviderRegistry.add(activityTypeName, () => Container.get(SwitchPortProvider)); diff --git a/src/designer/elsa-workflows-designer/src/plugins/switch/switch-port-provider.ts b/src/designer/elsa-workflows-designer/src/plugins/switch/switch-port-provider.ts index 2abf21151..8afbe12e5 100644 --- a/src/designer/elsa-workflows-designer/src/plugins/switch/switch-port-provider.ts +++ b/src/designer/elsa-workflows-designer/src/plugins/switch/switch-port-provider.ts @@ -1,20 +1,30 @@ import 'reflect-metadata'; import {Service} from "typedi"; -import {Port, PortMode} from "../../models"; -import {SwitchActivity} from "./models"; +import {Activity, Port, PortMode} from "../../models"; +import {SwitchActivity, SwitchCase} from "./models"; import {PortProvider, PortProviderContext} from "../../services"; @Service() export class SwitchPortProvider implements PortProvider { - public getInboundPorts(context: PortProviderContext): Array { + getInboundPorts(context: PortProviderContext): Array { return []; } - public getOutboundPorts(context: PortProviderContext): Array { + getOutboundPorts(context: PortProviderContext): Array { const activity = context.activity as SwitchActivity; - const cases = activity.cases; - + const cases = activity.cases ?? []; return cases.map(x => ({name: x.label, displayName: x.label, mode: PortMode.Embedded})); } + + resolvePort(portName: string, context: PortProviderContext): Activity | Array { + const activity = context.activity as SwitchActivity; + const cases: Array = activity.cases ?? []; + const caseItem = cases.find(x => x.label == portName); + + if(!caseItem) + return null; + + return caseItem.activity; + } } diff --git a/src/designer/elsa-workflows-designer/src/services/activity-walker.ts b/src/designer/elsa-workflows-designer/src/services/activity-walker.ts index 5fd80886d..4f9709123 100644 --- a/src/designer/elsa-workflows-designer/src/services/activity-walker.ts +++ b/src/designer/elsa-workflows-designer/src/services/activity-walker.ts @@ -5,6 +5,7 @@ import {Activity, ActivityDescriptor} from "../models"; import {PortProviderRegistry} from "./port-provider-registry"; import descriptorsStore from '../data/descriptors-store'; import {Hash} from "../utils"; +import {PortProviderContext} from "./port-provider"; export interface ActivityNode { activity: Activity; @@ -94,9 +95,13 @@ function getPorts(node: ActivityNode, activity: Activity, descriptors: Array = []; + const portProviderContext: PortProviderContext = { + activityDescriptor, + activity + }; + for (const port of ports) { - const propName = camelCase(port.name); - const value = activity[propName]; + const value = portProvider.resolvePort(port.name, portProviderContext); if (!value) continue; diff --git a/src/designer/elsa-workflows-designer/src/services/default-port-provider.ts b/src/designer/elsa-workflows-designer/src/services/default-port-provider.ts index 8a0b0b267..bfd1fbfd9 100644 --- a/src/designer/elsa-workflows-designer/src/services/default-port-provider.ts +++ b/src/designer/elsa-workflows-designer/src/services/default-port-provider.ts @@ -1,7 +1,8 @@ import 'reflect-metadata'; +import {camelCase} from 'lodash'; import {Service} from "typedi" import {PortProvider, PortProviderContext} from "./port-provider"; -import {Port} from "../models"; +import {Activity, Port} from "../models"; @Service() export class DefaultPortProvider implements PortProvider { @@ -15,4 +16,14 @@ export class DefaultPortProvider implements PortProvider { return [...activityDescriptor.ports]; } + resolvePort(portName: string, context: PortProviderContext): Activity | Array { + const propName = camelCase(portName); + const activity = context.activity; + + if(!activity) + return null; + + return activity[propName] as Activity | Array; + } + } diff --git a/src/designer/elsa-workflows-designer/src/services/port-provider.ts b/src/designer/elsa-workflows-designer/src/services/port-provider.ts index 0ec84cd25..66a6e9967 100644 --- a/src/designer/elsa-workflows-designer/src/services/port-provider.ts +++ b/src/designer/elsa-workflows-designer/src/services/port-provider.ts @@ -2,7 +2,10 @@ import {Activity, ActivityDescriptor, Port} from "../models"; export interface PortProvider { getInboundPorts(context: PortProviderContext): Array; + getOutboundPorts(context: PortProviderContext): Array; + + resolvePort(portName: string, context: PortProviderContext): Activity | Array; } export interface PortProviderContext {