@eclipse-glsp-examples/workflow-glsp 0.9.0-next.9ac2fc1e

package/src/di.config.ts

@@ -0,0 +1,152 @@
+/********************************************************************************
+ * Copyright (c) 2019-2021 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import '../css/diagram.css';
+import 'balloon-css/balloon.min.css';
+import 'sprotty/css/edit-label.css';
+
+import {
+    boundsModule,
+    buttonModule,
+    configureDefaultModelElements,
+    configureModelElement,
+    ConsoleLogger,
+    defaultGLSPModule,
+    defaultModule,
+    DefaultTypes,
+    DeleteElementContextMenuItemProvider,
+    DiamondNodeView,
+    edgeIntersectionModule,
+    edgeLayoutModule,
+    editLabelFeature,
+    expandModule,
+    exportModule,
+    fadeModule,
+    GLSP_TYPES,
+    glspCommandPaletteModule,
+    glspContextMenuModule,
+    glspDecorationModule,
+    glspEditLabelModule,
+    glspHoverModule,
+    glspMouseToolModule,
+    glspSelectModule,
+    glspServerCopyPasteModule,
+    glspViewportModule,
+    GridSnapper,
+    labelEditUiModule,
+    layoutCommandsModule,
+    LogLevel,
+    markerNavigatorModule,
+    modelHintsModule,
+    modelSourceModule,
+    modelSourceWatcherModule,
+    navigationModule,
+    NoOverlapMovmentRestrictor,
+    openModule,
+    overrideViewerOptions,
+    paletteModule,
+    RectangularNodeView,
+    RevealNamedElementActionProvider,
+    RoundedCornerNodeView,
+    routingModule,
+    SCompartment,
+    SCompartmentView,
+    SEdge,
+    SLabel,
+    SLabelView,
+    toolFeedbackModule,
+    toolsModule,
+    TYPES,
+    validationModule,
+    zorderModule
+} from '@eclipse-glsp/client';
+import { Container, ContainerModule } from 'inversify';
+
+import { directTaskEditor } from './direct-task-editing/di.config';
+import { ActivityNode, Icon, TaskNode, WeightedEdge } from './model';
+import { IconView, WorkflowEdgeView } from './workflow-views';
+
+const workflowDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+    rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
+    rebind(TYPES.LogLevel).toConstantValue(LogLevel.warn);
+    bind(GLSP_TYPES.IMovementRestrictor).to(NoOverlapMovmentRestrictor).inSingletonScope();
+    bind(TYPES.ISnapper).to(GridSnapper);
+    bind(TYPES.ICommandPaletteActionProvider).to(RevealNamedElementActionProvider);
+    bind(TYPES.IContextMenuItemProvider).to(DeleteElementContextMenuItemProvider);
+    const context = { bind, unbind, isBound, rebind };
+
+    configureDefaultModelElements(context);
+    configureModelElement(context, 'task:automated', TaskNode, RoundedCornerNodeView);
+    configureModelElement(context, 'task:manual', TaskNode, RoundedCornerNodeView);
+    configureModelElement(context, 'label:heading', SLabel, SLabelView, { enable: [editLabelFeature] });
+    configureModelElement(context, 'comp:comp', SCompartment, SCompartmentView);
+    configureModelElement(context, 'comp:header', SCompartment, SCompartmentView);
+    configureModelElement(context, 'label:icon', SLabel, SLabelView);
+    configureModelElement(context, DefaultTypes.EDGE, SEdge, WorkflowEdgeView);
+    configureModelElement(context, 'edge:weighted', WeightedEdge, WorkflowEdgeView);
+    configureModelElement(context, 'icon', Icon, IconView);
+    configureModelElement(context, 'activityNode:merge', ActivityNode, DiamondNodeView);
+    configureModelElement(context, 'activityNode:decision', ActivityNode, DiamondNodeView);
+    configureModelElement(context, 'activityNode:fork', ActivityNode, RectangularNodeView);
+    configureModelElement(context, 'activityNode:join', ActivityNode, RectangularNodeView);
+});
+
+export default function createContainer(widgetId: string): Container {
+    const container = new Container();
+
+    container.load(
+        defaultModule,
+        defaultGLSPModule,
+        glspMouseToolModule,
+        validationModule,
+        glspSelectModule,
+        boundsModule,
+        glspViewportModule,
+        toolsModule,
+        glspHoverModule,
+        fadeModule,
+        exportModule,
+        expandModule,
+        openModule,
+        buttonModule,
+        modelSourceModule,
+        labelEditUiModule,
+        glspEditLabelModule,
+        workflowDiagramModule,
+        toolFeedbackModule,
+        modelHintsModule,
+        glspContextMenuModule,
+        glspServerCopyPasteModule,
+        modelSourceWatcherModule,
+        glspCommandPaletteModule,
+        paletteModule,
+        routingModule,
+        glspDecorationModule,
+        edgeLayoutModule,
+        zorderModule,
+        edgeIntersectionModule,
+        layoutCommandsModule,
+        directTaskEditor,
+        navigationModule,
+        markerNavigatorModule
+    );
+
+    overrideViewerOptions(container, {
+        baseDiv: widgetId,
+        hiddenDiv: widgetId + '_hidden'
+    });
+
+    return container;
+}

package/src/direct-task-editing/di.config.ts

@@ -0,0 +1,24 @@
+/********************************************************************************
+ * Copyright (c) 2020 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { ContainerModule } from 'inversify';
+import { TYPES } from 'sprotty';
+
+import { TaskEditor } from './direct-task-editor';
+
+export const directTaskEditor = new ContainerModule((bind, _unbind, isBound) => {
+    bind(TaskEditor).toSelf().inSingletonScope();
+    bind(TYPES.IUIExtension).toService(TaskEditor);
+});

package/src/direct-task-editing/direct-task-editor.ts

@@ -0,0 +1,162 @@
+/********************************************************************************
+ * Copyright (c) 2020-2021 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import {
+    AbstractUIExtension,
+    Action,
+    AutoCompleteWidget,
+    EditorContextService,
+    getAbsoluteClientBounds,
+    GLSPActionDispatcher,
+    ILogger,
+    isSetContextActionsAction,
+    isSetEditValidationResultAction,
+    LabeledAction,
+    RequestContextActions,
+    RequestEditValidationAction,
+    SModelElement,
+    SModelRoot,
+    toActionArray,
+    ValidationDecorator,
+    ValidationStatus,
+    ViewerOptions
+} from '@eclipse-glsp/client';
+import { inject, injectable } from 'inversify';
+import { TYPES } from 'sprotty/lib';
+import { DOMHelper } from 'sprotty/lib/base/views/dom-helper';
+
+import { isTaskNode, TaskNode } from '../model';
+
+export class ApplyTaskEditOperation implements Action {
+    static readonly KIND = 'applyTaskEdit';
+    readonly kind = ApplyTaskEditOperation.KIND;
+    constructor(readonly taskId: string, readonly expression: string) {}
+}
+
+@injectable()
+export class TaskEditor extends AbstractUIExtension {
+    static readonly ID = 'task-editor';
+    readonly autoSuggestionSettings = {
+        noSuggestionsMessage: 'No suggestions available',
+        suggestionsClass: 'command-palette-suggestions',
+        debounceWaitMs: 50,
+        showOnFocus: true
+    };
+
+    @inject(TYPES.IActionDispatcher)
+    protected actionDispatcher: GLSPActionDispatcher;
+
+    @inject(EditorContextService)
+    protected editorContextService: EditorContextService;
+
+    @inject(TYPES.ViewerOptions)
+    protected viewerOptions: ViewerOptions;
+
+    @inject(TYPES.DOMHelper)
+    protected domHelper: DOMHelper;
+
+    @inject(TYPES.ILogger)
+    protected logger: ILogger;
+
+    protected task: TaskNode;
+    protected autoSuggestion: AutoCompleteWidget;
+
+    id(): string {
+        return TaskEditor.ID;
+    }
+    containerClass(): string {
+        return 'command-palette';
+    }
+
+    protected initializeContents(containerElement: HTMLElement): void {
+        this.autoSuggestion = new AutoCompleteWidget(
+            this.autoSuggestionSettings,
+            { provideSuggestions: input => this.retrieveSuggestions(input) },
+            { executeFromSuggestion: input => this.executeFromSuggestion(input) },
+            () => this.hide(),
+            this.logger
+        );
+        this.autoSuggestion.configureValidation(
+            { validate: input => this.validateInput(input) },
+            new ValidationDecorator(containerElement)
+        );
+        this.autoSuggestion.configureTextSubmitHandler({
+            executeFromTextOnlyInput: (input: string) => this.executeFromTextOnlyInput(input)
+        });
+        this.autoSuggestion.initialize(containerElement);
+    }
+
+    show(root: Readonly<SModelRoot>, ...contextElementIds: string[]): void {
+        super.show(root, ...contextElementIds);
+        this.autoSuggestion.open(root);
+    }
+
+    protected onBeforeShow(containerElement: HTMLElement, root: Readonly<SModelRoot>, ...contextElementIds: string[]): void {
+        this.task = getTask(contextElementIds, root)[0];
+        this.autoSuggestion.inputField.value = '';
+        this.setPosition(containerElement);
+    }
+
+    protected setPosition(containerElement: HTMLElement): void {
+        let x = 0;
+        let y = 0;
+
+        if (this.task) {
+            const bounds = getAbsoluteClientBounds(this.task, this.domHelper, this.viewerOptions);
+            x = bounds.x + 5;
+            y = bounds.y + 5;
+        }
+
+        containerElement.style.left = `${x}px`;
+        containerElement.style.top = `${y}px`;
+        containerElement.style.width = '200px';
+    }
+
+    protected async retrieveSuggestions(input: string): Promise<LabeledAction[]> {
+        const response = await this.actionDispatcher.request(
+            new RequestContextActions(TaskEditor.ID, this.editorContextService.get({ ['text']: input }))
+        );
+        if (isSetContextActionsAction(response)) {
+            return response.actions;
+        }
+        return Promise.reject();
+    }
+
+    protected async validateInput(input: string): Promise<ValidationStatus> {
+        const response = await this.actionDispatcher.request(new RequestEditValidationAction(TaskEditor.ID, this.task.id, input));
+        if (isSetEditValidationResultAction(response)) {
+            return response.status;
+        }
+        return Promise.reject();
+    }
+
+    protected executeFromSuggestion(input: LabeledAction | Action[] | Action): void {
+        this.actionDispatcher.dispatchAll(toActionArray(input));
+    }
+
+    protected executeFromTextOnlyInput(input: string): void {
+        const action = new ApplyTaskEditOperation(this.task.id, input);
+        this.actionDispatcher.dispatch(action);
+    }
+
+    hide(): void {
+        this.autoSuggestion.dispose();
+        super.hide();
+    }
+}
+
+function getTask(ids: string[], element: SModelElement): TaskNode[] {
+    return ids.map(id => element.index.getById(id)).filter(isTaskNode);
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+/********************************************************************************
+ * Copyright (c) 2019-2021 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import createWorkflowDiagramContainer from './di.config';
+
+export * from './model';
+export * from './workflow-views';
+export * from './direct-task-editing/direct-task-editor';
+export { createWorkflowDiagramContainer };

package/src/model.ts

@@ -0,0 +1,111 @@
+/********************************************************************************
+ * Copyright (c) 2020-2021 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import {
+    boundsFeature,
+    connectableFeature,
+    deletableFeature,
+    DiamondNode,
+    EditableLabel,
+    fadeFeature,
+    hoverFeedbackFeature,
+    isEditableLabel,
+    layoutableChildFeature,
+    LayoutContainer,
+    layoutContainerFeature,
+    moveFeature,
+    Nameable,
+    nameFeature,
+    popupFeature,
+    RectangularNode,
+    SChildElement,
+    SEdge,
+    selectFeature,
+    SModelElement,
+    SShapeElement,
+    WithEditableLabel,
+    withEditLabelFeature
+} from '@eclipse-glsp/client';
+
+export class TaskNode extends RectangularNode implements Nameable, WithEditableLabel {
+    static readonly DEFAULT_FEATURES = [
+        connectableFeature,
+        deletableFeature,
+        selectFeature,
+        boundsFeature,
+        moveFeature,
+        layoutContainerFeature,
+        fadeFeature,
+        hoverFeedbackFeature,
+        popupFeature,
+        nameFeature,
+        withEditLabelFeature
+    ];
+    name = '';
+    duration?: number;
+    taskType?: string;
+    reference?: string;
+
+    get editableLabel(): (SChildElement & EditableLabel) | undefined {
+        const headerComp = this.children.find(element => element.type === 'comp:header');
+        if (headerComp) {
+            const label = headerComp.children.find(element => element.type === 'label:heading');
+            if (label && isEditableLabel(label)) {
+                return label;
+            }
+        }
+        return undefined;
+    }
+}
+
+export function isTaskNode(element: SModelElement): element is TaskNode {
+    return element instanceof TaskNode || false;
+}
+
+export class WeightedEdge extends SEdge {
+    probability?: string;
+}
+
+export class ActivityNode extends DiamondNode {
+    nodeType: string = ActivityNode.Type.UNDEFINED;
+    size = {
+        width: 32,
+        height: 32
+    };
+    strokeWidth = 1;
+}
+
+export namespace ActivityNode {
+    export namespace Type {
+        export const INITIAL = 'initalNode';
+        export const FINAL = 'finalNode';
+        export const DECISION = 'decisionNode';
+        export const MERGE = 'mergeNode';
+        export const JOIN = 'joinNode';
+        export const FORK = 'forkNode';
+        export const UNDEFINED = 'undefined';
+    }
+}
+
+export class Icon extends SShapeElement implements LayoutContainer {
+    static readonly DEFAULT_FEATURES = [boundsFeature, layoutContainerFeature, layoutableChildFeature, fadeFeature];
+
+    layout: string;
+    layoutOptions?: { [key: string]: string | number | boolean };
+    size = {
+        width: 32,
+        height: 32
+    };
+}

package/src/workflow-views.tsx

@@ -0,0 +1,70 @@
+/********************************************************************************
+ * Copyright (c) 2019-2021 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import {
+    angleOfPoint,
+    IView,
+    Point,
+    PolylineEdgeViewWithGapsOnIntersections,
+    RenderingContext,
+    SEdge,
+    toDegrees
+} from '@eclipse-glsp/client';
+import { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { svg } from 'sprotty';
+
+import { Icon } from './model';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+@injectable()
+export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
+    protected renderAdditionals(edge: SEdge, segments: Point[], context: RenderingContext): VNode[] {
+        const additionals = super.renderAdditionals(edge, segments, context);
+        const p1 = segments[segments.length - 2];
+        const p2 = segments[segments.length - 1];
+        const arrow = (
+            <path
+                class-sprotty-edge={true}
+                class-arrow={true}
+                d='M 1.5,0 L 10,-4 L 10,4 Z'
+                transform={`rotate(${toDegrees(angleOfPoint({ x: p1.x - p2.x, y: p1.y - p2.y }))} ${p2.x} ${p2.y}) translate(${p2.x} ${
+                    p2.y
+                })`}
+            />
+        );
+        additionals.push(arrow);
+        return additionals;
+    }
+}
+
+@injectable()
+export class IconView implements IView {
+    render(element: Icon, context: RenderingContext): VNode {
+        const radius = this.getRadius();
+        return (
+            <g>
+                <circle class-sprotty-icon={true} r={radius} cx={radius} cy={radius}></circle>
+                {context.renderChildren(element)}
+            </g>
+        );
+    }
+
+    getRadius(): number {
+        return 16;
+    }
+}