@eclipse-glsp-examples/workflow-glsp 0.10.0-next.ca17587.154 → 1.1.0-RC01

package/lib/model.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CategoryNode = exports.Icon = exports.ActivityNode = exports.WeightedEdge = exports.isTaskNode = exports.TaskNode = void 0;
 /********************************************************************************
- * 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
@@ -18,20 +18,18 @@ exports.CategoryNode = exports.Icon = exports.ActivityNode = exports.WeightedEdg
  ********************************************************************************/
 const client_1 = require("@eclipse-glsp/client");
 class TaskNode extends client_1.RectangularNode {
-    constructor() {
-        super(...arguments);
-        this.name = '';
-    }
     get editableLabel() {
-        const headerComp = this.children.find(element => element.type === 'comp:header');
-        if (headerComp) {
-            const label = headerComp.children.find(element => element.type === 'label:heading');
-            if (label && client_1.isEditableLabel(label)) {
-                return label;
-            }
+        const label = this.children.find(element => element.type === 'label:heading');
+        if (label && (0, client_1.isEditableLabel)(label)) {
+            return label;
         }
         return undefined;
     }
+    get name() {
+        var _a;
+        const labelText = (_a = this.editableLabel) === null || _a === void 0 ? void 0 : _a.text;
+        return labelText ? labelText : '<unknown>';
+    }
 }
 exports.TaskNode = TaskNode;
 TaskNode.DEFAULT_FEATURES = [
@@ -96,7 +94,7 @@ class CategoryNode extends client_1.RectangularNode {
     }
     get editableLabel() {
         const label = this.children.find(element => element.type === 'label:heading');
-        if (label && client_1.isEditableLabel(label)) {
+        if (label && (0, client_1.isEditableLabel)(label)) {
             return label;
         }
         return undefined;

package/lib/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,iDAwB8B;AAE9B,MAAa,QAAS,SAAQ,wBAAe;IAA7C;;QAcI,SAAI,GAAG,EAAE,CAAC;IAed,CAAC;IAVG,IAAI,aAAa;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC;QACjF,IAAI,UAAU,EAAE;YACZ,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,eAAe,CAAC,CAAC;YACpF,IAAI,KAAK,IAAI,wBAAe,CAAC,KAAK,CAAC,EAAE;gBACjC,OAAO,KAAK,CAAC;aAChB;SACJ;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;;AA5BL,4BA6BC;AA5BmB,yBAAgB,GAAG;IAC/B,2BAAkB;IAClB,yBAAgB;IAChB,sBAAa;IACb,sBAAa;IACb,oBAAW;IACX,+BAAsB;IACtB,oBAAW;IACX,6BAAoB;IACpB,qBAAY;IACZ,oBAAW;IACX,6BAAoB;CACvB,CAAC;AAkBN,SAAgB,UAAU,CAAC,OAAsB;IAC7C,OAAO,OAAO,YAAY,QAAQ,IAAI,KAAK,CAAC;AAChD,CAAC;AAFD,gCAEC;AAED,MAAa,YAAa,SAAQ,cAAK;CAEtC;AAFD,oCAEC;AAED,MAAa,YAAa,SAAQ,oBAAW;IAA7C;;QACI,aAAQ,GAAW,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC;QAC/C,SAAI,GAAG;YACH,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACb,CAAC;QACF,gBAAW,GAAG,CAAC,CAAC;IACpB,CAAC;CAAA;AAPD,oCAOC;AAED,WAAiB,YAAY;IACzB,IAAiB,IAAI,CAQpB;IARD,WAAiB,IAAI;QACJ,YAAO,GAAG,YAAY,CAAC;QACvB,UAAK,GAAG,WAAW,CAAC;QACpB,aAAQ,GAAG,cAAc,CAAC;QAC1B,UAAK,GAAG,WAAW,CAAC;QACpB,SAAI,GAAG,UAAU,CAAC;QAClB,SAAI,GAAG,UAAU,CAAC;QAClB,cAAS,GAAG,WAAW,CAAC;IACzC,CAAC,EARgB,IAAI,GAAJ,iBAAI,KAAJ,iBAAI,QAQpB;AACL,CAAC,EAVgB,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAU5B;AAED,MAAa,IAAK,SAAQ,sBAAa;IAAvC;;QAKI,SAAI,GAAG;YACH,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACb,CAAC;IACN,CAAC;;AATD,oBASC;AARmB,qBAAgB,GAAG,CAAC,sBAAa,EAAE,+BAAsB,EAAE,+BAAsB,EAAE,oBAAW,CAAC,CAAC;AAUpH,MAAa,YAAa,SAAQ,wBAAe;IAAjD;;QAcI,SAAI,GAAG,EAAE,CAAC;IASd,CAAC;IAPG,IAAI,aAAa;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,eAAe,CAAC,CAAC;QAC9E,IAAI,KAAK,IAAI,wBAAe,CAAC,KAAK,CAAC,EAAE;YACjC,OAAO,KAAK,CAAC;SAChB;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;;AAtBL,oCAuBC;AAtBmB,6BAAgB,GAAG;IAC/B,yBAAgB;IAChB,sBAAa;IACb,sBAAa;IACb,oBAAW;IACX,+BAAsB;IACtB,oBAAW;IACX,6BAAoB;IACpB,qBAAY;IACZ,oBAAW;IACX,6BAAoB;CACvB,CAAC"}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,iDAwB8B;AAE9B,MAAa,QAAS,SAAQ,wBAAe;IAkBzC,IAAI,aAAa;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,eAAe,CAAC,CAAC;QAC9E,IAAI,KAAK,IAAI,IAAA,wBAAe,EAAC,KAAK,CAAC,EAAE;YACjC,OAAO,KAAK,CAAC;SAChB;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,IAAI,IAAI;;QACJ,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAC;QAC3C,OAAO,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;IAC/C,CAAC;;AA7BL,4BA8BC;AA7B4B,yBAAgB,GAAG;IACxC,2BAAkB;IAClB,yBAAgB;IAChB,sBAAa;IACb,sBAAa;IACb,oBAAW;IACX,+BAAsB;IACtB,oBAAW;IACX,6BAAoB;IACpB,qBAAY;IACZ,oBAAW;IACX,6BAAoB;CACvB,CAAC;AAmBN,SAAgB,UAAU,CAAC,OAAsB;IAC7C,OAAO,OAAO,YAAY,QAAQ,IAAI,KAAK,CAAC;AAChD,CAAC;AAFD,gCAEC;AAED,MAAa,YAAa,SAAQ,cAAK;CAEtC;AAFD,oCAEC;AAED,MAAa,YAAa,SAAQ,oBAAW;IAA7C;;QACI,aAAQ,GAAW,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC;QACtC,SAAI,GAAG;YACZ,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACb,CAAC;QACO,gBAAW,GAAG,CAAC,CAAC;IAC7B,CAAC;CAAA;AAPD,oCAOC;AAED,WAAiB,YAAY;IACzB,IAAiB,IAAI,CAQpB;IARD,WAAiB,IAAI;QACJ,YAAO,GAAG,YAAY,CAAC;QACvB,UAAK,GAAG,WAAW,CAAC;QACpB,aAAQ,GAAG,cAAc,CAAC;QAC1B,UAAK,GAAG,WAAW,CAAC;QACpB,SAAI,GAAG,UAAU,CAAC;QAClB,SAAI,GAAG,UAAU,CAAC;QAClB,cAAS,GAAG,WAAW,CAAC;IACzC,CAAC,EARgB,IAAI,GAAJ,iBAAI,KAAJ,iBAAI,QAQpB;AACL,CAAC,EAVgB,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAU5B;AAED,MAAa,IAAK,SAAQ,sBAAa;IAAvC;;QAKa,SAAI,GAAG;YACZ,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACb,CAAC;IACN,CAAC;;AATD,oBASC;AARmB,qBAAgB,GAAG,CAAC,sBAAa,EAAE,+BAAsB,EAAE,+BAAsB,EAAE,oBAAW,CAAC,CAAC;AAUpH,MAAa,YAAa,SAAQ,wBAAe;IAAjD;;QAcI,SAAI,GAAG,EAAE,CAAC;IASd,CAAC;IAPG,IAAI,aAAa;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,eAAe,CAAC,CAAC;QAC9E,IAAI,KAAK,IAAI,IAAA,wBAAe,EAAC,KAAK,CAAC,EAAE;YACjC,OAAO,KAAK,CAAC;SAChB;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;;AAtBL,oCAuBC;AAtB4B,6BAAgB,GAAG;IACxC,yBAAgB;IAChB,sBAAa;IACb,sBAAa;IACb,oBAAW;IACX,+BAAsB;IACtB,oBAAW;IACX,6BAAoB;IACpB,qBAAY;IACZ,oBAAW;IACX,6BAAoB;CACvB,CAAC"}

package/lib/workflow-views.d.ts

@@ -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
@@ -13,14 +13,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { IView, Point, PolylineEdgeViewWithGapsOnIntersections, RenderingContext, SEdge } from '@eclipse-glsp/client';
+import { Point, PolylineEdgeViewWithGapsOnIntersections, RenderingContext, SEdge, ShapeView } from '@eclipse-glsp/client';
 import { VNode } from 'snabbdom';
 import { Icon } from './model';
 export declare class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
     protected renderAdditionals(edge: SEdge, segments: Point[], context: RenderingContext): VNode[];
 }
-export declare class IconView implements IView {
-    render(element: Icon, context: RenderingContext): VNode;
-    getRadius(): number;
+export declare class IconView extends ShapeView {
+    render(element: Icon, context: RenderingContext): VNode | undefined;
 }
 //# sourceMappingURL=workflow-views.d.ts.map

package/lib/workflow-views.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-views.d.ts","sourceRoot":"","sources":["../src/workflow-views.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAClF,OAAO,EAEH,KAAK,EACL,KAAK,EACL,uCAAuC,EACvC,gBAAgB,EAChB,KAAK,EAER,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAK/B,qBACa,gBAAiB,SAAQ,uCAAuC;IACzE,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,gBAAgB,GAAG,KAAK,EAAE;CAiBlG;AAED,qBACa,QAAS,YAAW,KAAK;IAClC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,GAAG,KAAK;IAUvD,SAAS,IAAI,MAAM;CAGtB"}
+{"version":3,"file":"workflow-views.d.ts","sourceRoot":"","sources":["../src/workflow-views.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAClF,OAAO,EAIH,KAAK,EACL,uCAAuC,EACvC,gBAAgB,EAChB,KAAK,EAEL,SAAS,EAGZ,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,IAAI,EAAc,MAAM,SAAS,CAAC;AAK3C,qBACa,gBAAiB,SAAQ,uCAAuC;cACtD,iBAAiB,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,gBAAgB,GAAG,KAAK,EAAE;CAiB3G;AAED,qBACa,QAAS,SAAQ,SAAS;IACnC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,GAAG,KAAK,GAAG,SAAS;CAuCtE"}

package/lib/workflow-views.js

@@ -8,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-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
@@ -24,36 +24,58 @@ exports.IconView = exports.WorkflowEdgeView = void 0;
  ********************************************************************************/
 const client_1 = require("@eclipse-glsp/client");
 const inversify_1 = require("inversify");
-const sprotty_1 = require("sprotty");
+const model_1 = require("./model");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: sprotty_1.svg };
+const JSX = { createElement: client_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})` }));
+        const arrow = (JSX.createElement("path", { "class-sprotty-edge": true, "class-arrow": true, d: 'M 1,0 L 10,-4 L 10,4 Z', transform: `rotate(${(0, client_1.toDegrees)((0, 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()
+    (0, inversify_1.injectable)()
 ], WorkflowEdgeView);
 exports.WorkflowEdgeView = WorkflowEdgeView;
-let IconView = class IconView {
+let IconView = class IconView extends client_1.ShapeView {
     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 }),
+        const taskNode = (0, client_1.findParentByFeature)(element, model_1.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 = (JSX.createElement("g", null,
+            JSX.createElement("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 }),
+            JSX.createElement("rect", { "class-icon-background": true, x: 0, y: 0, width: 25, height: 20 }),
             context.renderChildren(element)));
-    }
-    getRadius() {
-        return 14;
+        const subType = (0, client_1.getSubType)(element);
+        if (subType) {
+            (0, client_1.setAttr)(vnode, 'class', subType);
+        }
+        return vnode;
     }
 };
 IconView = __decorate([
-    inversify_1.injectable()
+    (0, 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,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"}
+{"version":3,"file":"workflow-views.js","sourceRoot":"","sources":["../src/workflow-views.tsx"],"names":[],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,iDAY8B;AAC9B,yCAAuC;AAEvC,mCAA2C;AAE3C,6DAA6D;AAC7D,MAAM,GAAG,GAAG,EAAE,aAAa,EAAE,YAAG,EAAE,CAAC;AAGnC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,gDAAuC;IACtD,iBAAiB,CAAC,IAAW,EAAE,QAAiB,EAAE,OAAyB;QAC1F,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,wBAAwB,EAC1B,SAAS,EAAE,UAAU,IAAA,kBAAS,EAAC,IAAA,qBAAY,EAAC,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,IAAA,sBAAU,GAAE;GACA,gBAAgB,CAkB5B;AAlBY,4CAAgB;AAqB7B,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,kBAAS;IACnC,MAAM,CAAC,OAAa,EAAE,OAAyB;QAC3C,MAAM,QAAQ,GAAG,IAAA,4BAAmB,EAAC,OAAO,EAAE,kBAAU,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;YAChD,OAAO,SAAS,CAAC;SACpB;QAED,IAAI,IAAI,CAAC;QACT,IAAI,QAAQ,CAAC,IAAI,KAAK,aAAa,EAAE;YACjC,iHAAiH;YACjH,IAAI;gBACA,mCAAmC;gBACnC,ksDAAksD,CAAC;SAC1sD;aAAM;YACH,8GAA8G;YAC9G,IAAI;gBACA,mCAAmC;gBACnC,wbAAwb,CAAC;SAChc;QAED,MAAM,KAAK,GAAG,CACV;YACI,4BACI,SAAS,EAAE,kCAAkC;gBAC7C,kHAAkH;gBAClH,mCAAmC;gBACnC,CAAC,EAAE,IAAI,GACT;YACF,2DAA4B,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI;YAChE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAChC,CACP,CAAC;QAEF,MAAM,OAAO,GAAG,IAAA,mBAAU,EAAC,OAAO,CAAC,CAAC;QACpC,IAAI,OAAO,EAAE;YACT,IAAA,gBAAO,EAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;SACpC;QAED,OAAO,KAAK,CAAC;IACjB,CAAC;CACJ,CAAA;AAxCY,QAAQ;IADpB,IAAA,sBAAU,GAAE;GACA,QAAQ,CAwCpB;AAxCY,4BAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-glsp-examples/workflow-glsp",
-  "version": "0.10.0-next.ca17587.154+ca17587",
+  "version": "1.1.0-RC01",
   "description": "GLSP diagrams for the Workflow DSL",
   "license": "(EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0)",
   "keywords": [
@@ -26,19 +26,18 @@
     }
   ],
   "dependencies": {
-    "@eclipse-glsp/client": "0.10.0-next.ca17587.154+ca17587",
+    "@eclipse-glsp/client": "1.1.0-RC01",
     "balloon-css": "^0.5.0"
   },
   "devDependencies": {
-    "mvn-artifact-download": "5.1.0",
-    "rimraf": "^2.6.1",
-    "typescript": "^3.9.2"
+    "mvn-artifact-download": "5.1.0"
   },
   "scripts": {
     "prepare": "yarn clean && yarn build && yarn lint",
-    "clean": "rimraf lib",
+    "clean": "rimraf tsconfig.tsbuildinfo  lib",
     "build": "tsc",
-    "lint": "eslint -c ./.eslintrc.js --ext .ts,.tsx ./src",
+    "lint": "eslint --ext .ts,.tsx ./src",
+    "lint:fix": "eslint --fix --ext .ts,.tsx ./src",
     "watch": "tsc -w"
   },
   "files": [
@@ -53,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ca1758788eff5c6f3dafc8f4ca96b0d3bf8adc10"
+  "gitHead": "1c856971c77dbb9dbb86f7cc1e252bf04f817703"
 }

package/scripts/config.json

@@ -0,0 +1,9 @@
+{
+  "releaseRepository": "https://repo1.maven.org/maven2/",
+  "snapshotRepository": "https://oss.sonatype.org/content/repositories/snapshots/",
+  "groupId": "org.eclipse.glsp.example",
+  "artifactId": "org.eclipse.glsp.example.workflow",
+  "version": "1.1.0.RC01",
+  "isSnapshot": false,
+  "classifier": "glsp"
+}

package/scripts/download.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
@@ -15,20 +15,21 @@
  ********************************************************************************/
 import download from 'mvn-artifact-download';
 import { join, resolve } from 'path';
+import * as config from './config.json';
 
 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 { groupId, artifactId, classifier, version, isSnapshot } = config;
+const mavenRepository = isSnapshot ? config.snapshotRepository : config.releaseRepository;
 
 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(() =>
+const isSnapShot = true;
+download({ groupId, artifactId, version, classifier, isSnapShot }, 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' +
+            `${isSnapShot ? '-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

@@ -21,6 +21,8 @@ import {
     DeleteElementContextMenuItemProvider,
     DiamondNodeView,
     editLabelFeature,
+    GLSPGraph,
+    GLSPProjectionView,
     GridSnapper,
     LogLevel,
     overrideViewerOptions,
@@ -66,7 +68,7 @@ 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, DefaultTypes.GRAPH, GLSPGraph, GLSPProjectionView);
     configureModelElement(context, 'category', CategoryNode, RoundedCornerNodeView);
     configureModelElement(context, 'struct', SCompartment, StructureCompartmentView);
 });

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 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
@@ -13,9 +13,8 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { TYPES } from '@eclipse-glsp/client';
 import { ContainerModule } from 'inversify';
-import { TYPES } from 'sprotty';
-
 import { TaskEditor } from './direct-task-editor';
 
 export const directTaskEditor = new ContainerModule((bind, _unbind, isBound) => {

package/src/direct-task-editing/direct-task-editor.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
@@ -20,29 +20,58 @@ import {
     EditorContextService,
     getAbsoluteClientBounds,
     GLSPActionDispatcher,
+    hasStringProp,
     ILogger,
-    isSetContextActionsAction,
-    isSetEditValidationResultAction,
     LabeledAction,
+    ModelIndexImpl,
+    Operation,
     RequestContextActions,
     RequestEditValidationAction,
-    SModelElement,
+    SetContextActions,
+    SetEditValidationResultAction,
     SModelRoot,
     toActionArray,
+    TYPES,
     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) {}
+/**
+ * Is send from the {@link TaskEditor} to the GLSP server
+ * to execute a task edit operation.
+ */
+export interface ApplyTaskEditOperation extends Operation {
+    kind: typeof ApplyTaskEditOperation.KIND;
+
+    /**
+     * Id of the task that should be edited
+     */
+    taskId: string;
+
+    /**
+     * The edit expression
+     */
+    expression: string;
+}
+
+export namespace ApplyTaskEditOperation {
+    export const KIND = 'applyTaskEdit';
+
+    export function is(object: any): object is ApplyTaskEditOperation {
+        return Operation.hasKind(object, KIND) && hasStringProp(object, 'taskId') && hasStringProp(object, 'expression');
+    }
+
+    export function create(options: { taskId: string; expression: string }): ApplyTaskEditOperation {
+        return {
+            kind: KIND,
+            isOperation: true,
+            ...options
+        };
+    }
 }
 
 @injectable()
@@ -68,7 +97,7 @@ export class TaskEditor extends AbstractUIExtension {
     protected domHelper: DOMHelper;
 
     @inject(TYPES.ILogger)
-    protected logger: ILogger;
+    protected override logger: ILogger;
 
     protected task: TaskNode;
     protected autoSuggestion: AutoCompleteWidget;
@@ -98,13 +127,13 @@ export class TaskEditor extends AbstractUIExtension {
         this.autoSuggestion.initialize(containerElement);
     }
 
-    show(root: Readonly<SModelRoot>, ...contextElementIds: string[]): void {
+    override 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];
+    protected override onBeforeShow(containerElement: HTMLElement, root: Readonly<SModelRoot>, ...contextElementIds: string[]): void {
+        this.task = getTask(contextElementIds, root.index)[0];
         this.autoSuggestion.inputField.value = '';
         this.setPosition(containerElement);
     }
@@ -126,17 +155,19 @@ 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 }))
+            RequestContextActions.create({ contextId: TaskEditor.ID, editorContext: this.editorContextService.get({ ['text']: input }) })
         );
-        if (isSetContextActionsAction(response)) {
+        if (SetContextActions.is(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)) {
+        const response = await this.actionDispatcher.request(
+            RequestEditValidationAction.create({ contextId: TaskEditor.ID, modelElementId: this.task.id, text: input })
+        );
+        if (SetEditValidationResultAction.is(response)) {
             return response.status;
         }
         return Promise.reject();
@@ -147,16 +178,16 @@ export class TaskEditor extends AbstractUIExtension {
     }
 
     protected executeFromTextOnlyInput(input: string): void {
-        const action = new ApplyTaskEditOperation(this.task.id, input);
+        const action = ApplyTaskEditOperation.create({ taskId: this.task.id, expression: input });
         this.actionDispatcher.dispatch(action);
     }
 
-    hide(): void {
+    override hide(): void {
         this.autoSuggestion.dispose();
         super.hide();
     }
 }
 
-function getTask(ids: string[], element: SModelElement): TaskNode[] {
-    return ids.map(id => element.index.getById(id)).filter(isTaskNode);
+function getTask(ids: string[], index: ModelIndexImpl): TaskNode[] {
+    return ids.map(id => index.getById(id)).filter(element => element && isTaskNode(element)) as TaskNode[];
 }

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
@@ -40,7 +40,7 @@ import {
 } from '@eclipse-glsp/client';
 
 export class TaskNode extends RectangularNode implements Nameable, WithEditableLabel {
-    static readonly DEFAULT_FEATURES = [
+    static override readonly DEFAULT_FEATURES = [
         connectableFeature,
         deletableFeature,
         selectFeature,
@@ -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 {
@@ -80,11 +81,11 @@ export class WeightedEdge extends SEdge {
 
 export class ActivityNode extends DiamondNode {
     nodeType: string = ActivityNode.Type.UNDEFINED;
-    size = {
+    override size = {
         width: 32,
         height: 32
     };
-    strokeWidth = 1;
+    override strokeWidth = 1;
 }
 
 export namespace ActivityNode {
@@ -103,15 +104,15 @@ export class Icon extends SShapeElement implements LayoutContainer {
     static readonly DEFAULT_FEATURES = [boundsFeature, layoutContainerFeature, layoutableChildFeature, fadeFeature];
 
     layout: string;
-    layoutOptions?: { [key: string]: string | number | boolean };
-    size = {
+    override layoutOptions?: { [key: string]: string | number | boolean };
+    override size = {
         width: 32,
         height: 32
     };
 }
 
 export class CategoryNode extends RectangularNode implements Nameable, WithEditableLabel {
-    static readonly DEFAULT_FEATURES = [
+    static override readonly DEFAULT_FEATURES = [
         deletableFeature,
         selectFeature,
         boundsFeature,

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,24 +15,27 @@
  ********************************************************************************/
 import {
     angleOfPoint,
-    IView,
+    findParentByFeature,
+    getSubType,
     Point,
     PolylineEdgeViewWithGapsOnIntersections,
     RenderingContext,
     SEdge,
+    setAttr,
+    ShapeView,
+    svg,
     toDegrees
 } from '@eclipse-glsp/client';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { svg } from 'sprotty';
-import { Icon } from './model';
+import { Icon, isTaskNode } 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[] {
+    protected override 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];
@@ -40,7 +43,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
                 })`}
@@ -52,18 +55,44 @@ 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 + 2} cy={radius + 2}></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 14;
+        const subType = getSubType(element);
+        if (subType) {
+            setAttr(vnode, 'class', subType);
+        }
+
+        return vnode;
     }
 }