Introduce an optional grid module to deal with a grid layout

examples/workflow-glsp/src/index.ts

@@ -16,5 +16,6 @@
 export * from './direct-task-editing';
 export * from './model';
 export * from './workflow-diagram-module';
+export * from './workflow-snapper';
 export * from './workflow-startup';
 export * from './workflow-views';

examples/workflow-glsp/src/workflow-diagram-module.ts

@@ -50,6 +50,7 @@ import 'sprotty/css/edit-label.css';
 import '../css/diagram.css';
 import { directTaskEditor } from './direct-task-editing/di.config';
 import { ActivityNode, CategoryNode, Icon, TaskNode, WeightedEdge } from './model';
+import { WorkflowSnapper } from './workflow-snapper';
 import { WorkflowStartup } from './workflow-startup';
 import { IconView, WorkflowEdgeView } from './workflow-views';
 
@@ -88,6 +89,7 @@ export const workflowDiagramModule = new ContainerModule((bind, unbind, isBound,
     });
 
     bindAsService(context, TYPES.IDiagramStartup, WorkflowStartup);
+    bindOrRebind(context, TYPES.ISnapper).to(WorkflowSnapper);
 });
 
 export function createWorkflowDiagramContainer(...containerConfiguration: ContainerConfiguration): Container {
@@ -97,11 +99,11 @@ export function createWorkflowDiagramContainer(...containerConfiguration: Contai
 export function initializeWorkflowDiagramContainer(container: Container, ...containerConfiguration: ContainerConfiguration): Container {
     return initializeDiagramContainer(
         container,
-        workflowDiagramModule,
         directTaskEditor,
         helperLineModule,
         gridModule,
         debugModule,
+        workflowDiagramModule,
         ...containerConfiguration
     );
 }

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

@@ -0,0 +1,29 @@
+/********************************************************************************
+ * Copyright (c) 2024 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
+ * 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
+ ********************************************************************************/
+
+import { GModelElement, GRoutingHandle, GridSnapper, Point } from '@eclipse-glsp/client';
+import { injectable } from 'inversify';
+
+@injectable()
+export class WorkflowSnapper extends GridSnapper {
+    override snap(position: Point, element: GModelElement): Point {
+        // we snap our edges to the center of the elements and our elements to the grid,
+        // so to allow for nicer angles and more fine-grained control, we allow routing points to be snapped half-grid
+        return element instanceof GRoutingHandle
+            ? Point.snapToGrid(position, Point.divideScalar(this.grid, 2))
+            : super.snap(position, element);
+    }
+}

packages/client/css/grid.css

@@ -14,12 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-:root {
-    /* default grid background image, is typically overridden in the graph view but might also be overwritten using CSS. */
-    --grid-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><rect class="grid-background-grid" width="10" height="10" x="0" y="0" fill="none" stroke="black" stroke-width="1" stroke-opacity="0.10" /></svg>');
-}
-
+/** Control visibility of background image through CSS class on parent */
 .grid-background .sprotty-graph {
-    background: var(--sprotty-background);
     background-image: var(--grid-background-image);
 }

packages/client/css/keyboard-tool-palette.css

@@ -14,12 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-.accessibility-tool-palette.tool-palette {
-    top: 48px;
-}
-
 .accessibility-tool-palette .header-tools i {
-    margin-right: 0.5em;
     position: relative;
 }
 

packages/client/css/tool-palette.css

@@ -17,8 +17,8 @@
 /* Css for main container */
 .tool-palette {
     position: absolute;
-    right: 40px;
-    top: 25px;
+    right: 45px;
+    top: 35px;
     text-align: center;
     width: fit-content;
     display: block;
@@ -38,41 +38,41 @@
     /* Firefox */
     -ms-user-select: none;
     /* Internet Explorer/Edge */
+
+    box-shadow:
+        4px 0 4px 0 rgba(0, 0, 0, 0.2),
+        0 4px 4px 0 rgba(0, 0, 0, 0.19);
+    font-size: 14px;
 }
 
 /* Css for header compartment */
 
 .palette-header {
     padding: 0.4em;
     text-align: left;
-    background: #cccccc;
+    background: rgb(151, 160, 165);
     border: 1px solid rgba(60, 60, 60, 0.6);
-    box-shadow:
-        0 4px 8px 0 rgba(0, 0, 0, 0.2),
-        0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    border-bottom: 0;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 20px;
+    gap: 6px;
 }
 
 .header-icon {
-    display: flex;
+    display: none;
     align-items: center;
 }
 
-.header-icon i {
-    margin-right: 0.2em;
-}
-
 .header-tools {
     display: flex;
     align-items: center;
+    gap: 3px;
 }
 
 .header-tools i {
-    border: 1px solid #cccccc;
+    border: 1px solid transparent;
     padding: 0.15em;
     margin-right: 0.15em;
 }
@@ -91,9 +91,6 @@
 .palette-body {
     background: rgba(100, 100, 100, 0.2);
     border: 1px solid rgba(60, 60, 60, 0.6);
-    box-shadow:
-        0 4px 8px 0 rgba(0, 0, 0, 0.2),
-        0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .tool-group {
@@ -102,21 +99,21 @@
 }
 
 .group-header {
-    background: #cccccc;
+    background: rgb(187, 193, 196);
     display: flex;
     align-items: center;
 }
 
 .group-header:hover {
-    background: #aaaaaa;
+    background: rgb(187, 193, 196);
 }
 
 .group-header i {
     padding: 0.4em;
 }
 
 .tool-button {
-    background: #ededee;
+    background: rgb(252, 253, 253);
     padding: 0.4em;
     display: flex;
     align-items: center;
@@ -127,11 +124,11 @@
 }
 
 .tool-button:hover {
-    background: #dfdfdf;
+    background: rgb(220, 223, 224);
 }
 
 .tool-button.clicked {
-    background: #bddaef;
+    background: rgb(163, 201, 219);
 }
 
 .tool-button.collapsed {
@@ -148,13 +145,19 @@
     right: 20px;
     top: 35px;
     z-index: 1000;
+    color: rgb(58, 63, 65);
+}
+
+.minimize-palette-button .codicon::before {
+    font-size: 20px;
 }
 
 .search-input {
-    background: #dfdfdf;
+    box-sizing: border-box;
+    background: rgb(252, 253, 253);
     color: black;
-    border: #bddaef;
-    padding-left: 3px;
+    border: 1px solid rgb(187, 193, 196);
+    padding: 4px;
     width: 100%;
-    margin: 3px;
+    margin: 3px 0;
 }

packages/client/src/features/accessibility/keyboard-tool-palette/keyboard-tool-palette.ts

@@ -44,7 +44,7 @@ import * as messages from '../toast/messages.json';
 import { ShowToastMessageAction } from '../toast/toast-handler';
 
 const SEARCH_ICON_ID = 'search';
-const PALETTE_ICON_ID = 'symbol-color';
+const PALETTE_ICON_ID = 'tools';
 const CHEVRON_DOWN_ICON_ID = 'chevron-right';
 const PALETTE_HEIGHT = '500px';
 const SELECTION_TOOL_KEY: KeyCode[] = ['Digit1', 'Numpad1'];
@@ -341,7 +341,7 @@ export class KeyboardToolPalette extends ToolPalette {
         searchField.tabIndex = 21;
         searchField.id = this.containerElement.id + '_search_field';
         searchField.type = 'text';
-        searchField.placeholder = ' Search...';
+        searchField.placeholder = 'Search...';
         searchField.style.display = 'none';
         searchField.onkeyup = ev => {
             this.requestFilterUpdate(this.searchField.value);