@eclipse-glsp-examples/workflow-glsp 0.10.0-next.06ee84f.156 → 0.10.0-next.6715f8e.162

package/css/diagram.css

@@ -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
@@ -20,10 +20,6 @@
     height: 100%;
 }
 
-.sprotty-popup {
-    z-index: 1;
-}
-
 .sprotty-text {
     font-size: 12pt;
     text-anchor: middle;
@@ -34,15 +30,6 @@
     font-weight: bold;
 }
 
-.sprotty-node.mouseover:not(.selected) {
-    stroke-width: 2;
-}
-
-.sprotty-comp {
-    line-height: 3px;
-    text-align: left;
-}
-
 .sprotty-label {
     stroke-width: 0;
     fill: #000;
@@ -53,132 +40,59 @@
 
 .sprotty-label.heading {
     font-weight: normal;
+    font-size: 0.7em;
+    fill: #f0f3f8;
 }
 
-.sprotty-icon {
-    stroke: black;
-    stroke-width: 0.5;
-    fill: #ffffff;
-    opacity: 0.5;
-}
-
-.sprotty-label.icon {
-    fill: black;
-}
-
-.sprotty-button {
-    fill: #152;
+.icon path {
     stroke-width: 0;
+    fill: #f0f3f8;
 }
 
-.sprotty-edge {
-    fill: none;
-    stroke-width: 1px;
-}
-
-.sprotty-edge.selected {
-    stroke-width: 3px;
-}
-
-.sprotty-edge.mouseover:not(.selected) {
-    stroke-width: 2px;
-}
-
-.sprotty-edge > .sprotty-routing-handle {
-    r: 7px;
-    fill: #884;
-    stroke: none;
-    z-index: 1000;
-}
-
-.sprotty-edge > .sprotty-routing-handle[data-kind='line'] {
-    opacity: 0.35;
-}
-
-.sprotty-edge > .sprotty-routing-handle.selected {
-    fill: #66a;
-}
-
-.sprotty-edge > .sprotty-routing-handle.mouseover {
-    stroke: #112;
-    stroke-width: 1;
-}
-
-.sprotty-missing {
-    stroke-width: 1;
-    stroke: #f00;
-    fill: #f00;
-    font-size: 14pt;
-    text-anchor: middle;
-}
-
-.sprotty-node:not(.selected) {
-    stroke-width: 1px;
-}
-
-.sprotty-node.marquee {
-    fill: lightgray;
-    opacity: 0.2;
+.icon .icon-background {
+    fill: transparent;
 }
 
 .task.automated > .sprotty-node {
-    fill: lightgray;
+    fill: #5b9fa8;
 }
 
 .task.manual > .sprotty-node {
-    fill: lightblue;
+    fill: #db8651;
 }
 
 .category > .sprotty-node {
-    fill: lightblue;
-}
-
-text {
-    stroke-width: 0;
-    stroke: #000;
-    fill: #000;
-    font-family: sans-serif;
-    font-size: 8pt;
-    text-anchor: middle;
-}
-
-.sprotty-edge.weighted.low,
-.sprotty-edge.weighted.low .arrow {
-    stroke: lightblue;
+    fill: #5c87bd;
 }
 
-.sprotty-edge.weighted.low .arrow {
-    fill: lightblue;
+.sprotty-edge.weighted.low:not(.selected),
+.sprotty-edge.weighted.low:not(.selected) .arrow {
+    stroke: rgb(128, 90, 233);
 }
 
-.sprotty-edge.weighted,
-.sprotty-edge.weighted .arrow,
-.sprotty-edge.weighted.medium,
-.sprotty-edge.weighted.medium .arrow {
-    stroke: #007fd4;
+.sprotty-edge.weighted.low:not(.selected) .arrow {
+    fill: rgb(128, 90, 233);
 }
 
-.sprotty-edge.weighted .arrow,
-.sprotty-edge.weighted.medium .arrow {
-    fill: #007fd4;
+.sprotty-edge.weighted:not(.selected),
+.sprotty-edge.weighted:not(.selected) .arrow,
+.sprotty-edge.weighted.medium:not(.selected),
+.sprotty-edge.weighted.medium:not(.selected) .arrow {
+    stroke: rgb(98, 60, 193);
 }
 
-.sprotty-edge.weighted.high,
-.sprotty-edge.weighted.high .arrow {
-    stroke: darkblue;
+.sprotty-edge.weighted:not(.selected) .arrow,
+.sprotty-edge.weighted.medium:not(.selected) .arrow {
+    fill: rgb(98, 60, 193);
 }
 
-.sprotty-edge.weighted.high .arrow {
-    fill: darkblue;
+.sprotty-edge.weighted.high:not(.selected),
+.sprotty-edge.weighted.high:not(.selected) .arrow {
+    stroke: rgb(68, 30, 163);
 }
 
-polygon.sprotty-node {
-    fill: white;
-    stroke-width: 1pt;
-}
-
-.sprotty-node.selected {
-    stroke-width: 3px;
+.sprotty-edge.weighted.high:not(.selected) .arrow {
+    fill: rgb(68, 30, 163);
 }
 
 .sprotty-comp {
@@ -186,38 +100,7 @@ polygon.sprotty-node {
     fill: transparent;
 }
 
-.sprotty-comp.debug {
-    stroke: deepskyblue;
-}
-
-svg {
-    border-style: solid;
-    border-width: 1px;
-    border-color: #bbb;
-}
-
 .label-edit input {
-    margin-top: -1px;
-    margin-left: -5px;
-}
-
-g .movement-not-allowed > .sprotty-node {
-    stroke: var(--glsp-error-foreground) !important;
-}
-
-.sprotty-resize-handle.movement-not-allowed {
-    stroke: var(--glsp-error-foreground) !important;
-    fill: var(--glsp-error-foreground) !important;
-}
-
-.error > .sprotty-node {
-    stroke: var(--glsp-error-foreground) !important;
-}
-
-.warning > .sprotty-node {
-    stroke: var(--glsp-warning-foreground) !important;
-}
-
-.info > .sprotty-node {
-    stroke: var(--glsp-info-foreground) !important;
+    margin-top: -3px;
+    margin-left: -3px;
 }

package/lib/model.d.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
@@ -16,11 +16,11 @@
 import { DiamondNode, EditableLabel, LayoutContainer, Nameable, RectangularNode, SChildElement, SEdge, SModelElement, SShapeElement, WithEditableLabel } from '@eclipse-glsp/client';
 export declare class TaskNode extends RectangularNode implements Nameable, WithEditableLabel {
     static readonly DEFAULT_FEATURES: symbol[];
-    name: string;
     duration?: number;
     taskType?: string;
     reference?: string;
     get editableLabel(): (SChildElement & EditableLabel) | undefined;
+    get name(): string;
 }
 export declare function isTaskNode(element: SModelElement): element is TaskNode;
 export declare class WeightedEdge extends SEdge {

package/lib/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAClF,OAAO,EAIH,WAAW,EACX,aAAa,EAKb,eAAe,EAGf,QAAQ,EAGR,eAAe,EACf,aAAa,EACb,KAAK,EAEL,aAAa,EACb,aAAa,EACb,iBAAiB,EAEpB,MAAM,sBAAsB,CAAC;AAE9B,qBAAa,QAAS,SAAQ,eAAgB,YAAW,QAAQ,EAAE,iBAAiB;IAChF,MAAM,CAAC,QAAQ,CAAC,gBAAgB,WAY9B;IACF,IAAI,SAAM;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,aAAa,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,GAAG,SAAS,CAS/D;CACJ;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,IAAI,QAAQ,CAEtE;AAED,qBAAa,YAAa,SAAQ,KAAK;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,YAAa,SAAQ,WAAW;IACzC,QAAQ,EAAE,MAAM,CAA+B;IAC/C,IAAI;;;MAGF;IACF,WAAW,SAAK;CACnB;AAED,yBAAiB,YAAY,CAAC;IAC1B,UAAiB,IAAI,CAAC;QACX,MAAM,OAAO,eAAe,CAAC;QAC7B,MAAM,KAAK,cAAc,CAAC;QAC1B,MAAM,QAAQ,iBAAiB,CAAC;QAChC,MAAM,KAAK,cAAc,CAAC;QAC1B,MAAM,IAAI,aAAa,CAAC;QACxB,MAAM,IAAI,aAAa,CAAC;QACxB,MAAM,SAAS,cAAc,CAAC;KACxC;CACJ;AAED,qBAAa,IAAK,SAAQ,aAAc,YAAW,eAAe;IAC9D,MAAM,CAAC,QAAQ,CAAC,gBAAgB,WAAgF;IAEhH,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IAC7D,IAAI;;;MAGF;CACL;AAED,qBAAa,YAAa,SAAQ,eAAgB,YAAW,QAAQ,EAAE,iBAAiB;IACpF,MAAM,CAAC,QAAQ,CAAC,gBAAgB,WAW9B;IAEF,IAAI,SAAM;IAEV,IAAI,aAAa,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,GAAG,SAAS,CAM/D;CACJ"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAClF,OAAO,EAIH,WAAW,EACX,aAAa,EAKb,eAAe,EAGf,QAAQ,EAGR,eAAe,EACf,aAAa,EACb,KAAK,EAEL,aAAa,EACb,aAAa,EACb,iBAAiB,EAEpB,MAAM,sBAAsB,CAAC;AAE9B,qBAAa,QAAS,SAAQ,eAAgB,YAAW,QAAQ,EAAE,iBAAiB;IAChF,MAAM,CAAC,QAAQ,CAAC,gBAAgB,WAY9B;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,aAAa,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,GAAG,SAAS,CAM/D;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;CACJ;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,IAAI,QAAQ,CAEtE;AAED,qBAAa,YAAa,SAAQ,KAAK;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,YAAa,SAAQ,WAAW;IACzC,QAAQ,EAAE,MAAM,CAA+B;IAC/C,IAAI;;;MAGF;IACF,WAAW,SAAK;CACnB;AAED,yBAAiB,YAAY,CAAC;IAC1B,UAAiB,IAAI,CAAC;QACX,MAAM,OAAO,eAAe,CAAC;QAC7B,MAAM,KAAK,cAAc,CAAC;QAC1B,MAAM,QAAQ,iBAAiB,CAAC;QAChC,MAAM,KAAK,cAAc,CAAC;QAC1B,MAAM,IAAI,aAAa,CAAC;QACxB,MAAM,IAAI,aAAa,CAAC;QACxB,MAAM,SAAS,cAAc,CAAC;KACxC;CACJ;AAED,qBAAa,IAAK,SAAQ,aAAc,YAAW,eAAe;IAC9D,MAAM,CAAC,QAAQ,CAAC,gBAAgB,WAAgF;IAEhH,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IAC7D,IAAI;;;MAGF;CACL;AAED,qBAAa,YAAa,SAAQ,eAAgB,YAAW,QAAQ,EAAE,iBAAiB;IACpF,MAAM,CAAC,QAAQ,CAAC,gBAAgB,WAW9B;IAEF,IAAI,SAAM;IAEV,IAAI,aAAa,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,GAAG,SAAS,CAM/D;CACJ"}

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 && 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 = [

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,wBAAe,CAAC,KAAK,CAAC,EAAE;YACjC,OAAO,KAAK,CAAC;SAChB;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,IAAI,IAAI;;QACJ,MAAM,SAAS,SAAG,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAC;QAC3C,OAAO,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;IAC/C,CAAC;;AA7BL,4BA8BC;AA7BmB,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;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;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"}

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,14 @@
  *
  * 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 } from '@eclipse-glsp/client';
 import { VNode } from 'snabbdom';
+import { ShapeView } from 'sprotty';
 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,EAGH,KAAK,EACL,uCAAuC,EACvC,gBAAgB,EAChB,KAAK,EAGR,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAuB,SAAS,EAAO,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAc,MAAM,SAAS,CAAC;AAK3C,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,SAAQ,SAAS;IACnC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,GAAG,KAAK,GAAG,SAAS;CAsCtE"}

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
@@ -25,6 +25,7 @@ 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 };
 let WorkflowEdgeView = class WorkflowEdgeView extends client_1.PolylineEdgeViewWithGapsOnIntersections {
@@ -32,7 +33,7 @@ let WorkflowEdgeView = class WorkflowEdgeView extends client_1.PolylineEdgeViewW
         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(${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;
     }
@@ -41,15 +42,37 @@ WorkflowEdgeView = __decorate([
     inversify_1.injectable()
 ], WorkflowEdgeView);
 exports.WorkflowEdgeView = WorkflowEdgeView;
-let IconView = class IconView {
+let IconView = class IconView extends sprotty_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 = sprotty_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 = client_1.getSubType(element);
+        if (subType) {
+            client_1.setAttr(vnode, 'class', subType);
+        }
+        return vnode;
     }
 };
 IconView = __decorate([

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,iDAS8B;AAC9B,yCAAuC;AAEvC,qCAA8D;AAC9D,mCAA2C;AAE3C,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,wBAAwB,EAC1B,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,QAAS,SAAQ,mBAAS;IACnC,MAAM,CAAC,OAAa,EAAE,OAAyB;QAC3C,MAAM,QAAQ,GAAG,6BAAmB,CAAC,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,mBAAU,CAAC,OAAO,CAAC,CAAC;QACpC,IAAI,OAAO,EAAE;YACT,gBAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;SACpC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;CACJ,CAAA;AAvCY,QAAQ;IADpB,sBAAU,EAAE;GACA,QAAQ,CAuCpB;AAvCY,4BAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-glsp-examples/workflow-glsp",
-  "version": "0.10.0-next.06ee84f.156+06ee84f",
+  "version": "0.10.0-next.6715f8e.162+6715f8e",
   "description": "GLSP diagrams for the Workflow DSL",
   "license": "(EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0)",
   "keywords": [
@@ -26,7 +26,7 @@
     }
   ],
   "dependencies": {
-    "@eclipse-glsp/client": "0.10.0-next.06ee84f.156+06ee84f",
+    "@eclipse-glsp/client": "0.10.0-next.6715f8e.162+6715f8e",
     "balloon-css": "^0.5.0"
   },
   "devDependencies": {
@@ -53,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "06ee84f267881797975e68ef02f95a03891c8235"
+  "gitHead": "6715f8e6df688b67c1aebf75b093ee810ac879b3"
 }

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 {

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,17 +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 };
@@ -40,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
                 })`}
@@ -52,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 + 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;
     }
 }