GLSP-31: Update workflow example (standalone)

Author: tortmayr

examples/workflow-glsp/css/diagram.css

@@ -15,92 +15,103 @@
  ********************************************************************************/
 
 .sprotty-graph {
-    font-size: 15pt;
+    font-size: 14pt;
     border: none;
     height: 100%;
 }
 
 .sprotty-text {
-    font-size: 12pt;
+    font-size: 11pt;
     text-anchor: middle;
 }
 
 .sprotty-node {
     stroke-width: 0;
-    font-weight: bold;
+    font-weight: 600;
+    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
 }
 
 .sprotty-label {
     stroke-width: 0;
-    fill: #000;
+    fill: #1e293b;
     font-weight: inherit;
     text-align: inherit;
     font-size: 100%;
     user-select: none;
 }
 
 .sprotty-label.heading {
-    font-weight: normal;
-    font-size: 0.7em;
-    fill: #f0f3f8;
+    font-weight: 500;
+    font-size: 0.65em;
+    fill: rgba(255, 255, 255, 0.82);
+    letter-spacing: 0.02em;
+}
+
+.task .sprotty-label,
+.category .sprotty-label {
+    fill: #ffffff;
+}
+
+.task .sprotty-label.heading,
+.category .sprotty-label.heading {
+    fill: rgba(255, 255, 255, 0.82);
 }
 
 .icon path {
     stroke-width: 0;
-    fill: #f0f3f8;
+    fill: rgba(255, 255, 255, 0.95);
 }
 
 .icon .icon-background {
     fill: transparent;
 }
 
 .task.automated > .sprotty-node {
-    fill: #5b9fa8;
+    fill: #2d8a9a;
 }
 
 .task.manual > .sprotty-node {
-    fill: #db8651;
+    fill: #c27856;
 }
 
 .category > .sprotty-node {
-    fill: #5c87bd;
+    fill: #5478a8;
 }
 
 .category .category > .sprotty-node {
-    /** Add a border to nested categories, so we can distinguish them */
-    stroke: #38679a;
-    fill: #6f9ad0;
+    stroke: #3f6290;
+    fill: #6a8fbe;
     stroke-width: 1;
 }
 
 .sprotty-edge.weighted.low:not(.selected, .navigable-element, .search-highlighted),
 .sprotty-edge.weighted.low:not(.selected, .navigable-element, .search-highlighted) .arrow {
-    stroke: rgb(128, 90, 233);
+    stroke: #7088c0;
 }
 
 .sprotty-edge.weighted.low:not(.selected, .navigable-element, .search-highlighted) .arrow {
-    fill: rgb(128, 90, 233);
+    fill: #7088c0;
 }
 
 .sprotty-edge.weighted:not(.selected, .navigable-element, .search-highlighted),
 .sprotty-edge.weighted:not(.selected, .navigable-element, .search-highlighted) .arrow,
 .sprotty-edge.weighted.medium:not(.selected, .navigable-element, .search-highlighted),
 .sprotty-edge.weighted.medium:not(.selected, .navigable-element, .search-highlighted) .arrow {
-    stroke: rgb(98, 60, 193);
+    stroke: #5570b5;
 }
 
 .sprotty-edge.weighted:not(.selected, .navigable-element, .search-highlighted) .arrow,
 .sprotty-edge.weighted.medium:not(.selected, .navigable-element, .search-highlighted) .arrow {
-    fill: rgb(98, 60, 193);
+    fill: #5570b5;
 }
 
 .sprotty-edge.weighted.high:not(.selected, .navigable-element, .search-highlighted),
 .sprotty-edge.weighted.high:not(.selected, .navigable-element, .search-highlighted) .arrow {
-    stroke: rgb(68, 30, 163);
+    stroke: #3a58a8;
 }
 
 .sprotty-edge.weighted.high:not(.selected, .navigable-element, .search-highlighted) .arrow {
-    fill: rgb(68, 30, 163);
+    fill: #3a58a8;
 }
 
 .sprotty-comp {

examples/workflow-glsp/src/workflow-startup.ts

@@ -25,6 +25,6 @@ export class WorkflowStartup implements IDiagramStartup {
     @inject(TYPES.IGridManager) @optional() protected gridManager?: IGridManager;
 
     preRequestModel(): MaybePromise<void> {
-        this.gridManager?.setGridVisible(true);
+        this.gridManager?.setGridVisible(false);
     }
 }

examples/workflow-glsp/src/workflow-views.tsx

@@ -41,7 +41,7 @@ export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
             <path
                 class-sprotty-edge={true}
                 class-arrow={true}
-                d='M 1,0 L 10,-4 L 10,4 Z'
+                d='M 0,0 L 9,-3.5 L 9,3.5 Z'
                 transform={`rotate(${toDegrees(angleOfPoint(Point.subtract(p1, p2)))} ${p2.x} ${p2.y}) translate(${p2.x} ${p2.y})`}
             />
         );
@@ -77,7 +77,7 @@ export class IconView extends ShapeView {
 
                     d={icon}
                 />
-                <rect class-icon-background x={0} y={0} width={25} height={20} />
+                <rect class-icon-background x={0} y={0} width={25} height={20} rx={4} ry={4} />
                 {context.renderChildren(element)}
             </g>
         );