@eclipse-glsp-examples/workflow-glsp 0.9.0-rc-01 → 0.9.0

package/lib/workflow-views.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -21,7 +8,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconView = exports.WorkflowEdgeView = void 0;
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * 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
@@ -35,46 +22,38 @@ exports.IconView = exports.WorkflowEdgeView = void 0;
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-var client_1 = require("@eclipse-glsp/client");
-var inversify_1 = require("inversify");
-var snabbdom = require("snabbdom-jsx");
+const client_1 = require("@eclipse-glsp/client");
+const inversify_1 = require("inversify");
+const sprotty_1 = require("sprotty");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var JSX = { createElement: snabbdom.svg };
-var WorkflowEdgeView = /** @class */ (function (_super) {
-    __extends(WorkflowEdgeView, _super);
-    function WorkflowEdgeView() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    WorkflowEdgeView.prototype.renderAdditionals = function (edge, segments, context) {
-        var additionals = _super.prototype.renderAdditionals.call(this, edge, segments, context);
-        var p1 = segments[segments.length - 2];
-        var p2 = segments[segments.length - 1];
-        var arrow = JSX.createElement("path", { "class-sprotty-edge": true, "class-arrow": true, d: 'M 1.5,0 L 10,-4 L 10,4 Z', transform: "rotate(" + client_1.toDegrees(client_1.angleOfPoint({ x: p1.x - p2.x, y: p1.y - p2.y })) + " " + p2.x + " " + p2.y + ") translate(" + p2.x + " " + p2.y + ")" });
+const JSX = { createElement: sprotty_1.svg };
+let WorkflowEdgeView = class WorkflowEdgeView extends client_1.PolylineEdgeViewWithGapsOnIntersections {
+    renderAdditionals(edge, segments, context) {
+        const additionals = super.renderAdditionals(edge, segments, context);
+        const p1 = segments[segments.length - 2];
+        const p2 = segments[segments.length - 1];
+        const arrow = (JSX.createElement("path", { "class-sprotty-edge": true, "class-arrow": true, d: 'M 1.5,0 L 10,-4 L 10,4 Z', transform: `rotate(${client_1.toDegrees(client_1.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;
-    };
-    WorkflowEdgeView = __decorate([
-        inversify_1.injectable()
-    ], WorkflowEdgeView);
-    return WorkflowEdgeView;
-}(client_1.GEdgeView));
+    }
+};
+WorkflowEdgeView = __decorate([
+    inversify_1.injectable()
+], WorkflowEdgeView);
 exports.WorkflowEdgeView = WorkflowEdgeView;
-var IconView = /** @class */ (function () {
-    function IconView() {
+let IconView = class IconView {
+    render(element, context) {
+        const radius = this.getRadius();
+        return (JSX.createElement("g", null,
+            JSX.createElement("circle", { "class-sprotty-icon": true, r: radius, cx: radius + 2, cy: radius + 2 }),
+            context.renderChildren(element)));
     }
-    IconView.prototype.render = function (element, context) {
-        var radius = this.getRadius();
-        return JSX.createElement("g", null,
-            JSX.createElement("circle", { "class-sprotty-icon": true, r: radius, cx: radius, cy: radius }),
-            context.renderChildren(element));
-    };
-    IconView.prototype.getRadius = function () {
-        return 16;
-    };
-    IconView = __decorate([
-        inversify_1.injectable()
-    ], IconView);
-    return IconView;
-}());
+    getRadius() {
+        return 14;
+    }
+};
+IconView = __decorate([
+    inversify_1.injectable()
+], IconView);
 exports.IconView = IconView;
 //# sourceMappingURL=workflow-views.js.map

package/lib/workflow-views.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-views.js","sourceRoot":"","sources":["../src/workflow-views.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,+CAQ8B;AAC9B,uCAAuC;AACvC,uCAAyC;AAKzC,6DAA6D;AAC7D,IAAM,GAAG,GAAG,EAAE,aAAa,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC;AAG5C;IAAsC,oCAAS;IAA/C;;IAUA,CAAC;IATa,4CAAiB,GAA3B,UAA4B,IAAW,EAAE,QAAiB,EAAE,OAAyB;QACjF,IAAM,WAAW,GAAG,iBAAM,iBAAiB,YAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACrE,IAAM,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzC,IAAM,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzC,IAAM,KAAK,GAAG,kDAA0B,IAAI,iBAAe,IAAI,EAAE,CAAC,EAAC,0BAA0B,EACzF,SAAS,EAAE,YAAU,kBAAS,CAAC,qBAAY,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,SAAI,EAAE,CAAC,CAAC,SAAI,EAAE,CAAC,CAAC,oBAAe,EAAE,CAAC,CAAC,SAAI,EAAE,CAAC,CAAC,MAAG,GAAI,CAAC;QACvI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,OAAO,WAAW,CAAC;IACvB,CAAC;IATQ,gBAAgB;QAD5B,sBAAU,EAAE;OACA,gBAAgB,CAU5B;IAAD,uBAAC;CAAA,AAVD,CAAsC,kBAAS,GAU9C;AAVY,4CAAgB;AAa7B;IAAA;IAYA,CAAC;IAXG,yBAAM,GAAN,UAAO,OAAa,EAAE,OAAyB;QAC3C,IAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,OAAO;YACH,oDAA4B,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAW;YAC7E,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAChC,CAAC;IACT,CAAC;IAED,4BAAS,GAAT;QACI,OAAO,EAAE,CAAC;IACd,CAAC;IAXQ,QAAQ;QADpB,sBAAU,EAAE;OACA,QAAQ,CAYpB;IAAD,eAAC;CAAA,AAZD,IAYC;AAZY,4BAAQ"}
+{"version":3,"file":"workflow-views.js","sourceRoot":"","sources":["../src/workflow-views.tsx"],"names":[],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,iDAQ8B;AAC9B,yCAAuC;AAEvC,qCAA8B;AAG9B,6DAA6D;AAC7D,MAAM,GAAG,GAAG,EAAE,aAAa,EAAE,aAAG,EAAE,CAAC;AAGnC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,gDAAuC;IAC/D,iBAAiB,CAAC,IAAW,EAAE,QAAiB,EAAE,OAAyB;QACjF,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACrE,MAAM,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzC,MAAM,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzC,MAAM,KAAK,GAAG,CACV,kDACwB,IAAI,iBACX,IAAI,EACjB,CAAC,EAAC,0BAA0B,EAC5B,SAAS,EAAE,UAAU,kBAAS,CAAC,qBAAY,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,IAC/G,EAAE,CAAC,CACP,GAAG,GACL,CACL,CAAC;QACF,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,OAAO,WAAW,CAAC;IACvB,CAAC;CACJ,CAAA;AAlBY,gBAAgB;IAD5B,sBAAU,EAAE;GACA,gBAAgB,CAkB5B;AAlBY,4CAAgB;AAqB7B,IAAa,QAAQ,GAArB,MAAa,QAAQ;IACjB,MAAM,CAAC,OAAa,EAAE,OAAyB;QAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,OAAO,CACH;YACI,oDAA4B,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,GAAW;YACrF,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAChC,CACP,CAAC;IACN,CAAC;IAED,SAAS;QACL,OAAO,EAAE,CAAC;IACd,CAAC;CACJ,CAAA;AAdY,QAAQ;IADpB,sBAAU,EAAE;GACA,QAAQ,CAcpB;AAdY,4BAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-glsp-examples/workflow-glsp",
-  "version": "0.9.0-rc-01",
+  "version": "0.9.0",
   "description": "GLSP diagrams for the Workflow DSL",
   "license": "(EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0)",
   "keywords": [
@@ -20,23 +20,13 @@
   "bugs": "https://github.com/eclipse-glsp/glsp/issues",
   "contributors": [
     {
-      "name": "Philip Langer",
-      "email": "planger@eclipsesource.com",
-      "url": "https://www.eclipsesource.com"
-    },
-    {
-      "name": "Tobias Ortmayr",
-      "email": "tortmayr@eclipsesource.com",
-      "url": "https://www.eclipsesource.com"
-    },
-    {
-      "name": "Martin Fleck",
-      "email": "mfleck@eclipsesource.com",
-      "url": "https://www.eclipsesource.com"
+      "name": "Eclipse GLSP Project",
+      "email": "glsp-dev@eclipse.org",
+      "url": "https://projects.eclipse.org/projects/ecd.glsp"
     }
   ],
   "dependencies": {
-    "@eclipse-glsp/client": "0.9.0-rc-01",
+    "@eclipse-glsp/client": "0.9.0",
     "balloon-css": "^0.5.0"
   },
   "devDependencies": {
@@ -62,5 +52,6 @@
   "types": "lib/index",
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "gitHead": "5e12ddb7e7da0e1b55555d95607645e24555f6b4"
 }

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * 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
@@ -13,74 +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,
-    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,
-    RectangularNodeView
+    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);
@@ -100,21 +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,
-        layoutCommandsModule, directTaskEditor, navigationModule, markerNavigatorModule);
-
+    const container = createClientContainer(workflowDiagramModule, directTaskEditor);
     overrideViewerOptions(container, {
         baseDiv: widgetId,
         hiddenDiv: widgetId + '_hidden'
     });
-
     return container;
 }

package/src/direct-task-editing/direct-task-editor.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
@@ -42,12 +42,11 @@ 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) { }
+    constructor(readonly taskId: string, readonly expression: string) {}
 }
 
 @injectable()
 export class TaskEditor extends AbstractUIExtension {
-
     static readonly ID = 'task-editor';
     readonly autoSuggestionSettings = {
         noSuggestionsMessage: 'No suggestions available',
@@ -86,14 +85,16 @@ export class TaskEditor extends AbstractUIExtension {
             this.autoSuggestionSettings,
             { provideSuggestions: input => this.retrieveSuggestions(input) },
             { executeFromSuggestion: input => this.executeFromSuggestion(input) },
-            () => this.hide(), this.logger);
+            () => 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.configureTextSubmitHandler({
+            executeFromTextOnlyInput: (input: string) => this.executeFromTextOnlyInput(input)
+        });
         this.autoSuggestion.initialize(containerElement);
     }
 
@@ -124,8 +125,9 @@ export class TaskEditor extends AbstractUIExtension {
     }
 
     protected async retrieveSuggestions(input: string): Promise<LabeledAction[]> {
-        const response = await this.actionDispatcher.request(new RequestContextActions(TaskEditor.ID,
-            this.editorContextService.get({ ['text']: input })));
+        const response = await this.actionDispatcher.request(
+            new RequestContextActions(TaskEditor.ID, this.editorContextService.get({ ['text']: input }))
+        );
         if (isSetContextActionsAction(response)) {
             return response.actions;
         }

package/src/index.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * 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
@@ -19,4 +19,3 @@ export * from './model';
 export * from './workflow-views';
 export * from './direct-task-editing/direct-task-editor';
 export { createWorkflowDiagramContainer };
-

package/src/model.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
@@ -40,8 +40,19 @@ import {
 } 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];
+    static readonly DEFAULT_FEATURES = [
+        connectableFeature,
+        deletableFeature,
+        selectFeature,
+        boundsFeature,
+        moveFeature,
+        layoutContainerFeature,
+        fadeFeature,
+        hoverFeedbackFeature,
+        popupFeature,
+        nameFeature,
+        withEditLabelFeature
+    ];
     name = '';
     duration?: number;
     taskType?: string;
@@ -76,7 +87,6 @@ export class ActivityNode extends DiamondNode {
     strokeWidth = 1;
 }
 
-// eslint-disable-next-line no-redeclare
 export namespace ActivityNode {
     export namespace Type {
         export const INITIAL = 'initalNode';
@@ -99,3 +109,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 EclipseSource and others.
+ * 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
@@ -15,30 +15,37 @@
  ********************************************************************************/
 import {
     angleOfPoint,
-    GEdgeView,
     IView,
     Point,
+    PolylineEdgeViewWithGapsOnIntersections,
     RenderingContext,
     SEdge,
     toDegrees
 } from '@eclipse-glsp/client';
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { VNode } from 'snabbdom/vnode';
-
+import { VNode } from 'snabbdom';
+import { svg } from 'sprotty';
 import { Icon } from './model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 @injectable()
-export class WorkflowEdgeView extends GEdgeView {
+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})`} />;
+        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;
     }
@@ -48,13 +55,15 @@ export class WorkflowEdgeView extends GEdgeView {
 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>;
+        return (
+            <g>
+                <circle class-sprotty-icon={true} r={radius} cx={radius + 2} cy={radius + 2}></circle>
+                {context.renderChildren(element)}
+            </g>
+        );
     }
 
     getRadius(): number {
-        return 16;
+        return 14;
     }
 }