GLSP-31: Update workflow example (standalone)

Author: tortmayr

CLAUDE.md

@@ -16,6 +16,17 @@ Eclipse GLSP Client monorepo. Provides the sprotty-based client framework for th
 -   After completing any code changes, always run the `/verify` skill before reporting completion
 -   If verification fails, run the `/fix` skill to auto-fix issues, then re-run `/verify`
 
+## Commenting Style
+
+-   **TSDoc (`/** ... \*/`) on the public API\*\*: document exported interfaces, types, classes, methods, and notable properties/getters. Describe intent and behavior, not the obvious signature.
+-   **Cross-reference with `{@link Symbol}`** instead of writing bare type/method names in prose.
+-   **Document non-trivial methods** with `@param`/`@returns` (and `@throws` where relevant). Skip them for self-explanatory one-liners.
+-   **Deprecations** use the fixed form `/** @deprecated Use {@link Replacement} instead */`.
+-   **Inline `//` comments explain _why_, not _what_** — keep them short and lowercase, and reserve them for non-obvious decisions or rationale.
+-   **Mark known limitations** with `// FIXME:` / `// TODO:`, and justify suppressions with `// eslint-disable-next-line <rule>`.
+-   Don't restate code in comments; let clear naming carry the _what_.
+-   Copyright headers are required on every file but are handled by `/verify` + `/fix` — don't add them manually.
+
 ## Inter-Package Import Rules
 
 These are enforced by ESLint and are easy to get wrong:

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2024 EclipseSource and others.
+ * Copyright (c) 2024-2026 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,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>
         );