Smart Connector UIExtension

examples/workflow-standalone/src/di.config.ts

@@ -23,7 +23,8 @@ import {
     LogLevel,
     STANDALONE_MODULE_CONFIG,
     TYPES,
-    toolPaletteModule
+    toolPaletteModule,
+    selectionPaletteModule
 } from '@eclipse-glsp/client';
 import { Container } from 'inversify';
 import '../css/diagram.css';
@@ -34,6 +35,9 @@ export default function createContainer(options: IDiagramOptions): Container {
             add: accessibilityModule,
             remove: toolPaletteModule
         },
+        {
+            add: selectionPaletteModule
+        },
         STANDALONE_MODULE_CONFIG
     );
     bindOrRebind(container, TYPES.ILogger).to(ConsoleLogger).inSingletonScope();

packages/client/css/selection-palette.css

@@ -0,0 +1,130 @@
+/* expand button */
+
+#selection-palette-expand-button {
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+    border: 1px solid black;
+    z-index: 9999;
+    display: flex; /* or inline-flex */
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    background: #cccccc;
+    visibility: hidden;
+    cursor: pointer;
+}
+
+.selection-palette {
+    position: absolute;
+    z-index: 1;
+}
+
+/* combined container */
+
+#selection-palette-container {
+    position: absolute;
+    visibility: hidden;
+}
+
+/* search bar */
+
+.selection-palette-search {
+    background: #dfdfdf;
+    color: black;
+    border: #bddaef;
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 20px;
+}
+
+.selection-palette-submenu-search-container {
+    max-height: 0;
+    overflow: hidden;
+}
+
+.selection-palette-search-container {
+    max-height: 50px;
+}
+
+/* header */
+
+.header-title {
+    display: flex;
+    align-items: center;
+    padding-right: 8px;
+}
+
+.selection-palette-group-header {
+    justify-content: space-between;
+    min-width: 100px;
+}
+
+/* single containers */
+
+.selection-palette-group-container {
+    border: 1px solid black;
+    background: #ededee;
+    max-width: 200px;
+    /* display: flex; */
+}
+
+.selection-palette-group-container:hover,
+.selection-palette-group-container:focus-within {
+    z-index: 10000;
+}
+
+.selection-palette-group-container div:first-child {
+    border-top: 0;
+}
+
+/* container items */
+
+.selection-palette-group {
+    overflow-y: auto;
+    max-height: 150px;
+}
+
+/* scrollbar */
+.selection-palette-group::-webkit-scrollbar {
+    width: 6px;
+}
+
+.selection-palette-group::-webkit-scrollbar-thumb:active {
+    background: rgba(0, 0, 0, 0.9);
+}
+
+.selection-palette-group::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+}
+.selection-palette-group::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+}
+
+.collapsable-group {
+    max-height: 0;
+    /* transition: max-height 0.2s ease-out; */
+}
+
+/* single item */
+
+.selection-palette-button {
+    border-top: 1px solid black;
+    margin: 0 4px;
+    padding: 8px 0;
+    z-index: 9998;
+    cursor: pointer;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+}
+
+.selection-palette-button > i {
+    padding-right: 0.2em;
+}
+
+.selection-palette-button:hover {
+    background: #dfdfdf;
+}

packages/client/src/features/index.ts

@@ -32,6 +32,7 @@ export * from './reconnect';
 export * from './routing';
 export * from './save';
 export * from './select';
+export * from './selection-palette';
 export * from './source-model-watcher';
 export * from './status';
 export * from './svg-metadata';

packages/client/src/features/selection-palette/index.ts

@@ -0,0 +1,17 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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
+ ********************************************************************************/
+export * from './selection-palette';
+export * from './selection-palette-module';

packages/client/src/features/selection-palette/selection-palette-actions.ts

@@ -0,0 +1,48 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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 { Action, hasNumberProp } from '@eclipse-glsp/sprotty';
+
+export enum SelectionPaletteState {
+    Collapse,
+    Expand
+}
+
+/**
+ * Action that changes the selection palette state
+ */
+export interface ChangeSelectionPaletteStateAction extends Action {
+    kind: typeof ChangeSelectionPaletteStateAction.KIND;
+
+    /**
+     * The selection palette state to be switched to
+     */
+    state: SelectionPaletteState;
+}
+
+export namespace ChangeSelectionPaletteStateAction {
+    export const KIND = 'changeSelectionPaletteState';
+
+    export function is(object: any): object is ChangeSelectionPaletteStateAction {
+        return Action.hasKind(object, KIND) && hasNumberProp(object, 'state');
+    }
+
+    export function create(state: SelectionPaletteState): ChangeSelectionPaletteStateAction {
+        return {
+            kind: KIND,
+            state
+        };
+    }
+}

packages/client/src/features/selection-palette/selection-palette-module.ts

@@ -0,0 +1,42 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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 {
+    FeatureModule,
+    TYPES,
+    bindAsService,
+    configureActionHandler,
+    MoveAction,
+    SetBoundsAction,
+    SetViewportAction,
+    DeleteElementOperation,
+    ChangeBoundsOperation
+} from '@eclipse-glsp/sprotty';
+import '../../../css/selection-palette.css';
+import { SelectionPalette, SelectionPaletteKeyListener } from './selection-palette';
+import { ChangeSelectionPaletteStateAction } from './selection-palette-actions';
+
+export const selectionPaletteModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    bindAsService(context, TYPES.IUIExtension, SelectionPalette);
+    bind(TYPES.IDiagramStartup).toService(SelectionPalette);
+    configureActionHandler(context, ChangeSelectionPaletteStateAction.KIND, SelectionPalette);
+    configureActionHandler(context, MoveAction.KIND, SelectionPalette);
+    configureActionHandler(context, SetBoundsAction.KIND, SelectionPalette);
+    configureActionHandler(context, SetViewportAction.KIND, SelectionPalette);
+    configureActionHandler(context, DeleteElementOperation.KIND, SelectionPalette);
+    configureActionHandler(context, ChangeBoundsOperation.KIND, SelectionPalette);
+    bindAsService(bind, TYPES.KeyListener, SelectionPaletteKeyListener);
+});