@eclipse-glsp-examples/workflow-glsp 0.9.0-next.fd1a8bb6 → 0.10.0-next.5dad48d.159

package/scripts/download.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * 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
@@ -13,20 +13,23 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import download from "mvn-artifact-download";
-import { join, resolve } from "path";
+import download from 'mvn-artifact-download';
+import { join, resolve } from 'path';
 
-const downloadDir = resolve(join(__dirname)) + "/../../..";
-const mavenRepository = "https://oss.sonatype.org/content/repositories/snapshots/";
-const groupId = "org.eclipse.glsp.example";
-const artifactId = "org.eclipse.glsp.example.workflow";
-const version = "0.9.0";
-const classifier = "glsp";
+const downloadDir = resolve(join(__dirname)) + '/../../..';
+const mavenRepository = 'https://oss.sonatype.org/content/repositories/snapshots/';
+const groupId = 'org.eclipse.glsp.example';
+const artifactId = 'org.eclipse.glsp.example.workflow';
+const version = '0.9.0';
+const classifier = 'glsp';
 
-console.log("Downloading latest version of the Workflow Example Java Server from the maven repository...");
-download({ groupId, artifactId, version, classifier, isSnapShot: true }, downloadDir, mavenRepository)
-    .then(() => console.log("Download completed. Start the server using this command: \njava -jar org.eclipse.glsp.example.workflow-"
-        + version + "-SNAPSHOT-glsp.jar org.eclipse.glsp.example.workflow.launch.ExampleServerLauncher --port=8081 --websocket\n\n"
-        + "After starting the server, access the following file locally in your browser to see the running example:\n"
-        + "./examples/workflow-standalone/app/diagram.html"
-    ));
+console.log('Downloading latest version of the Workflow Example Java Server from the maven repository...');
+download({ groupId, artifactId, version, classifier, isSnapShot: true }, downloadDir, mavenRepository).then(() =>
+    console.log(
+        'Download completed. Start the server using this command: \njava -jar org.eclipse.glsp.example.workflow-' +
+            version +
+            '-SNAPSHOT-glsp.jar org.eclipse.glsp.example.workflow.launch.ExampleServerLauncher --port=8081 --websocket\n\n' +
+            'After starting the server, access the following file locally in your browser to see the running example:\n' +
+            './examples/workflow-standalone/app/diagram.html'
+    )
+);

package/src/di.config.ts

@@ -13,75 +13,40 @@
  *
  * 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,
+    createClientContainer,
     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
+    StructureCompartmentView,
+    TYPES
 } from '@eclipse-glsp/client';
+import { DefaultTypes } from '@eclipse-glsp/protocol';
+import 'balloon-css/balloon.min.css';
 import { Container, ContainerModule } from 'inversify';
-
+import 'sprotty/css/edit-label.css';
+import '../css/diagram.css';
 import { directTaskEditor } from './direct-task-editing/di.config';
-import { ActivityNode, Icon, TaskNode, WeightedEdge } from './model';
+import { ActivityNode, CategoryNode, 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);
@@ -101,52 +66,16 @@ const workflowDiagramModule = new ContainerModule((bind, unbind, isBound, rebind
     configureModelElement(context, 'activityNode:decision', ActivityNode, DiamondNodeView);
     configureModelElement(context, 'activityNode:fork', ActivityNode, RectangularNodeView);
     configureModelElement(context, 'activityNode:join', ActivityNode, RectangularNodeView);
+
+    configureModelElement(context, 'category', CategoryNode, RoundedCornerNodeView);
+    configureModelElement(context, 'struct', SCompartment, StructureCompartmentView);
 });
 
 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
-    );
-
+    const container = createClientContainer(workflowDiagramModule, directTaskEditor);
     overrideViewerOptions(container, {
         baseDiv: widgetId,
         hiddenDiv: widgetId + '_hidden'
     });
-
     return container;
 }

package/src/model.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020-2021 EclipseSource and others.
+ * Copyright (c) 2020-2022 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
@@ -53,21 +53,22 @@ export class TaskNode extends RectangularNode implements Nameable, WithEditableL
         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;
-            }
+        const label = this.children.find(element => element.type === 'label:heading');
+        if (label && isEditableLabel(label)) {
+            return label;
         }
         return undefined;
     }
+
+    get name(): string {
+        const labelText = this.editableLabel?.text;
+        return labelText ? labelText : '<unknown>';
+    }
 }
 
 export function isTaskNode(element: SModelElement): element is TaskNode {
@@ -109,3 +110,28 @@ export class Icon extends SShapeElement implements LayoutContainer {
         height: 32
     };
 }
+
+export class CategoryNode extends RectangularNode implements Nameable, WithEditableLabel {
+    static readonly DEFAULT_FEATURES = [
+        deletableFeature,
+        selectFeature,
+        boundsFeature,
+        moveFeature,
+        layoutContainerFeature,
+        fadeFeature,
+        hoverFeedbackFeature,
+        popupFeature,
+        nameFeature,
+        withEditLabelFeature
+    ];
+
+    name = '';
+
+    get editableLabel(): (SChildElement & EditableLabel) | undefined {
+        const label = this.children.find(element => element.type === 'label:heading');
+        if (label && isEditableLabel(label)) {
+            return label;
+        }
+        return undefined;
+    }
+}

package/src/workflow-views.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 EclipseSource and others.
+ * Copyright (c) 2019-2022 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
@@ -15,18 +15,18 @@
  ********************************************************************************/
 import {
     angleOfPoint,
-    IView,
+    getSubType,
     Point,
     PolylineEdgeViewWithGapsOnIntersections,
     RenderingContext,
     SEdge,
+    setAttr,
     toDegrees
 } from '@eclipse-glsp/client';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { svg } from 'sprotty';
-
-import { Icon } from './model';
+import { findParentByFeature, ShapeView, svg } from 'sprotty';
+import { Icon, isTaskNode } from './model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const JSX = { createElement: svg };
@@ -41,7 +41,7 @@ export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
             <path
                 class-sprotty-edge={true}
                 class-arrow={true}
-                d='M 1.5,0 L 10,-4 L 10,4 Z'
+                d='M 1,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
                 })`}
@@ -53,18 +53,43 @@ export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
 }
 
 @injectable()
-export class IconView implements IView {
-    render(element: Icon, context: RenderingContext): VNode {
-        const radius = this.getRadius();
-        return (
+export class IconView extends ShapeView {
+    render(element: Icon, context: RenderingContext): VNode | undefined {
+        const taskNode = findParentByFeature(element, isTaskNode);
+        if (!taskNode || !this.isVisible(element, context)) {
+            return undefined;
+        }
+
+        let icon;
+        if (taskNode.type === 'task:manual') {
+            // From codicons: https://github.com/microsoft/vscode-codicons/blob/main/src/icons/account.svg?short_path=8135b2d
+            icon =
+                // eslint-disable-next-line max-len
+                'M16 7.992C16 3.58 12.416 0 8 0S0 3.58 0 7.992c0 2.43 1.104 4.62 2.832 6.09.016.016.032.016.032.032.144.112.288.224.448.336.08.048.144.111.224.175A7.98 7.98 0 0 0 8.016 16a7.98 7.98 0 0 0 4.48-1.375c.08-.048.144-.111.224-.16.144-.111.304-.223.448-.335.016-.016.032-.016.032-.032 1.696-1.487 2.8-3.676 2.8-6.106zm-8 7.001c-1.504 0-2.88-.48-4.016-1.279.016-.128.048-.255.08-.383a4.17 4.17 0 0 1 .416-.991c.176-.304.384-.576.64-.816.24-.24.528-.463.816-.639.304-.176.624-.304.976-.4A4.15 4.15 0 0 1 8 10.342a4.185 4.185 0 0 1 2.928 1.166c.368.368.656.8.864 1.295.112.288.192.592.24.911A7.03 7.03 0 0 1 8 14.993zm-2.448-7.4a2.49 2.49 0 0 1-.208-1.024c0-.351.064-.703.208-1.023.144-.32.336-.607.576-.847.24-.24.528-.431.848-.575.32-.144.672-.208 1.024-.208.368 0 .704.064 1.024.208.32.144.608.336.848.575.24.24.432.528.576.847.144.32.208.672.208 1.023 0 .368-.064.704-.208 1.023a2.84 2.84 0 0 1-.576.848 2.84 2.84 0 0 1-.848.575 2.715 2.715 0 0 1-2.064 0 2.84 2.84 0 0 1-.848-.575 2.526 2.526 0 0 1-.56-.848zm7.424 5.306c0-.032-.016-.048-.016-.08a5.22 5.22 0 0 0-.688-1.406 4.883 4.883 0 0 0-1.088-1.135 5.207 5.207 0 0 0-1.04-.608 2.82 2.82 0 0 0 .464-.383 4.2 4.2 0 0 0 .624-.784 3.624 3.624 0 0 0 .528-1.934 3.71 3.71 0 0 0-.288-1.47 3.799 3.799 0 0 0-.816-1.199 3.845 3.845 0 0 0-1.2-.8 3.72 3.72 0 0 0-1.472-.287 3.72 3.72 0 0 0-1.472.288 3.631 3.631 0 0 0-1.2.815 3.84 3.84 0 0 0-.8 1.199 3.71 3.71 0 0 0-.288 1.47c0 .352.048.688.144 1.007.096.336.224.64.4.927.16.288.384.544.624.784.144.144.304.271.48.383a5.12 5.12 0 0 0-1.04.624c-.416.32-.784.703-1.088 1.119a4.999 4.999 0 0 0-.688 1.406c-.016.032-.016.064-.016.08C1.776 11.636.992 9.91.992 7.992.992 4.14 4.144.991 8 .991s7.008 3.149 7.008 7.001a6.96 6.96 0 0 1-2.032 4.907z';
+        } else {
+            // From codicons: https://github.com/microsoft/vscode-codicons/blob/main/src/icons/gear.svg?short_path=8ee3ec4
+            icon =
+                // eslint-disable-next-line max-len
+                'M9.1 4.4L8.6 2H7.4l-.5 2.4-.7.3-2-1.3-.9.8 1.3 2-.2.7-2.4.5v1.2l2.4.5.3.8-1.3 2 .8.8 2-1.3.8.3.4 2.3h1.2l.5-2.4.8-.3 2 1.3.8-.8-1.3-2 .3-.8 2.3-.4V7.4l-2.4-.5-.3-.8 1.3-2-.8-.8-2 1.3-.7-.2zM9.4 1l.5 2.4L12 2.1l2 2-1.4 2.1 2.4.4v2.8l-2.4.5L14 12l-2 2-2.1-1.4-.5 2.4H6.6l-.5-2.4L4 13.9l-2-2 1.4-2.1L1 9.4V6.6l2.4-.5L2.1 4l2-2 2.1 1.4.4-2.4h2.8zm.6 7c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM8 9c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z';
+        }
+
+        const vnode = (
             <g>
-                <circle class-sprotty-icon={true} r={radius} cx={radius} cy={radius}></circle>
+                <path
+                    transform={'scale(1.15),translate(0.75,0.75)'}
+                    // From codicons: https://github.com/microsoft/vscode-codicons/blob/main/src/icons/terminal.svg?short_path=2ffc08e
+                    // eslint-disable-next-line max-len
+                    d={icon}
+                />
+                <rect class-icon-background x={0} y={0} width={25} height={20} />
                 {context.renderChildren(element)}
             </g>
         );
-    }
 
-    getRadius(): number {
-        return 16;
+        const subType = getSubType(element);
+        if (subType) {
+            setAttr(vnode, 'class', subType);
+        }
+        return vnode;
     }
 }