Example layout strategies (#503)

* Add example for custom views

* Add layout strategies example

* Clean up

* Update example with Miro's comments

Author: gfontorbe

examples/browser-app.ts

@@ -27,6 +27,7 @@ import runJsxample from "./jsxample/src/standalone";
 import runStylingShowcase from "./styling-showcase/src/standalone";
 import runMicroLayoutShowcase from "./micro-layout-showcase/src/standalone";
 import runCustomViewsShowcase from "./custom-views-showcase/src/standalone";
+import runLayoutStrategiesShowcase from "./layout-strategies-showcase/src/standalone";
 
 const appDiv = document.getElementById('sprotty-app');
 if (appDiv) {
@@ -53,6 +54,8 @@ if (appDiv) {
         runMicroLayoutShowcase();
     else if (appMode === 'custom-views-showcase')
         runCustomViewsShowcase();
+    else if (appMode === 'layout-strategies-showcase')
+        runLayoutStrategiesShowcase();
     else
         throw new Error('Dunno what to do :-(');
 }

examples/custom-views-showcase/css/styles.css

@@ -0,0 +1,337 @@
+/********************************************************************************
+ * Copyright (c) 2025 TypeFox 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+/* Custom Views Diagram Styles */
+
+/* Basic Shape Views */
+.basic-shape-node {
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.basic-shape-node.mouseover {
+    filter: brightness(1.1);
+}
+
+.basic-shape-node.selected {
+    filter: drop-shadow(0 0 8px rgba(25, 118, 210, 0.6));
+}
+
+.basic-shape {
+    transition: all 0.2s ease;
+}
+
+.shape-circle {
+    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.shape-triangle {
+    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.shape-diamond {
+    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+/* Enhanced Node Views */
+.enhanced-node {
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.enhanced-rect {
+    fill: #f8f9fa;
+    stroke: #dee2e6;
+    stroke-width: 1;
+    transition: all 0.2s ease;
+}
+
+.enhanced-node.status-warning .enhanced-rect {
+    fill: #fff8e1;
+    stroke: #ffb74d;
+}
+
+.enhanced-node.status-error .enhanced-rect {
+    fill: #ffebee;
+    stroke: #ef5350;
+}
+
+.enhanced-node.status-success .enhanced-rect {
+    fill: #e8f5e8;
+    stroke: #66bb6a;
+}
+
+.enhanced-node.selected .enhanced-rect {
+    stroke-width: 2;
+    stroke: #1976d2;
+}
+
+.enhanced-node.mouseover .enhanced-rect {
+    filter: brightness(0.95);
+}
+
+.status-indicator {
+    transition: all 0.2s ease;
+}
+
+.indicator-warning {
+    fill: #ff9800;
+}
+
+.indicator-error {
+    fill: #f44336;
+}
+
+.indicator-success {
+    fill: #4caf50;
+}
+
+.enhanced-border {
+    stroke: #1976d2;
+    stroke-dasharray: 5, 5;
+    animation: border-dash 1s linear infinite;
+}
+
+@keyframes border-dash {
+    to {
+        stroke-dashoffset: 10;
+    }
+}
+
+/* Complex Node Views */
+.complex-node {
+    cursor: pointer;
+}
+
+.complex-container {
+    fill: #ffffff;
+    stroke: #e0e0e0;
+    stroke-width: 1;
+    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
+}
+
+.complex-node.selected .complex-container {
+    stroke: #1976d2;
+    stroke-width: 2;
+}
+
+.complex-node.mouseover .complex-container {
+    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
+}
+
+.header-rect {
+    rx: 4;
+    ry: 4;
+}
+
+.header-title {
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.header-subtitle {
+    font-size: 10px;
+    opacity: 0.8;
+}
+
+.header-icon {
+    font-size: 16px;
+}
+
+.body-rect {
+    fill: #fafafa;
+}
+
+.footer-line {
+    stroke: #e0e0e0;
+    stroke-width: 1;
+}
+
+/* Stateful Node Views */
+.stateful-node {
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+/* Loading state */
+.state-loading .loading-background {
+    fill: #e3f2fd;
+    stroke: #1976d2;
+    stroke-width: 1;
+}
+
+.progress-background {
+    fill: #e0e0e0;
+    rx: 2;
+    ry: 2;
+}
+
+.progress-fill {
+    fill: #1976d2;
+    rx: 2;
+    ry: 2;
+    transition: width 0.2s ease;
+}
+
+.loading-text {
+    fill: #1976d2;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+/* Error state */
+.state-error .error-background {
+    fill: #ffebee;
+    stroke: #f44336;
+    stroke-width: 2;
+}
+
+.error-icon {
+    fill: #f44336;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.error-text {
+    fill: #d32f2f;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+/* Success state */
+.state-success .success-background {
+    fill: #e8f5e8;
+    stroke: #4caf50;
+    stroke-width: 2;
+}
+
+.success-icon {
+    fill: #4caf50;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.success-text {
+    fill: #2e7d32;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+/* Idle state */
+.state-idle .idle-background {
+    fill: #f5f5f5;
+    stroke: #9e9e9e;
+    stroke-width: 1;
+}
+
+.idle-text {
+    fill: #616161;
+    font-size: 12px;
+}
+
+/* Styled Edge Views */
+.styled-edge {
+    transition: all 0.2s ease;
+}
+
+.styled-edge.mouseover {
+    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
+}
+
+.edge-solid {
+    /* Default solid style */
+}
+
+.edge-dashed {
+    stroke-dasharray: 10, 5;
+}
+
+.edge-dotted {
+    stroke-dasharray: 2, 3;
+}
+
+.edge-animated {
+    animation: edge-flow 2s linear infinite;
+}
+
+@keyframes edge-flow {
+    to {
+        stroke-dashoffset: 20;
+    }
+}
+
+.arrow-head {
+    transition: all 0.2s ease;
+}
+
+/* Custom Label Views */
+.custom-label {
+    pointer-events: none;
+}
+
+.label-background {
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+.label-text {
+    fill: #333;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* General Sprotty overrides */
+.sprotty-graph {
+    background: linear-gradient(45deg, #f0f2f5 25%, transparent 25%),
+        linear-gradient(-45deg, #f0f2f5 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #f0f2f5 75%),
+        linear-gradient(-45deg, transparent 75%, #f0f2f5 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.sprotty-node:hover {
+    cursor: pointer;
+}
+
+.sprotty-edge:hover {
+    cursor: pointer;
+}
+
+/* Selection highlighting */
+.selected {
+    filter: drop-shadow(0 0 8px rgba(25, 118, 210, 0.6));
+}
+
+/* Hover effects */
+.mouseover {
+    filter: brightness(1.05);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .header-title {
+        font-size: 12px;
+    }
+
+    .header-subtitle {
+        font-size: 9px;
+    }
+
+    .label-text {
+        font-size: 10px;
+    }
+}

examples/index.html

@@ -30,6 +30,12 @@ <h3>Recipes</h3>
                         Comprehensive demonstration of custom view patterns including basic shapes, enhanced nodes,
                         compositional views, stateful rendering, and custom edges.
                     </li>
+                    <li><a href="layout-strategies-showcase/layout-strategies-showcase.html">Layout Strategies
+                            Showcase:</a><br>
+                        Interactive comparison of client-only, server-only, and hybrid layout strategies with
+                        performance
+                        monitoring and real-world use case examples.
+                    </li>
                 </ul>
 
                 <h3>Without Server</h3>