Smart Connector UIExtension

packages/client/css/smart-connector.css

@@ -0,0 +1,107 @@
+.smart-connector {
+    position: absolute;
+    z-index: 1;
+}
+
+/* combined container */
+
+#smart-connector-container {
+    position: absolute;
+    visibility: hidden;
+}
+
+/* expand button */
+
+#smart-connector-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;
+}
+
+/* search bar */
+
+.smart-connector-search {
+    background: #dfdfdf;
+    color: black;
+    border: #bddaef;
+    padding-left: 3px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.smart-connector-submenu-search-container {
+    max-height: 0;
+    overflow: hidden;
+}
+
+.smart-connector-search-container {
+    max-height: 50px;
+}
+
+/* header */
+
+.header-title {
+    display: flex;
+    align-items: center;
+    padding-right: 8px;
+}
+
+.smart-connector-group-header {
+    justify-content: space-between;
+    width: 100px;
+}
+
+/* seperated containers */
+
+.smart-connector-group-container {
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+    background-color:rgba(1, 1, 1, 0.6);
+    max-width: 200px;
+    /* display: flex; */
+}
+
+.smart-connector-group-container:hover, .smart-connector-group-container:focus-within {
+    z-index: 10000;
+}
+
+.smart-connector-group-container div:first-child {
+    border-top: 0;
+}
+
+/* container items */
+
+.smart-connector-group {
+    overflow-y: scroll;
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+    max-height: 150px;
+}
+
+/* scrollbar */
+.smart-connector-group::-webkit-scrollbar {
+    display: none;
+}
+
+.collapsable-group {
+    max-height: 0;
+    /* transition: max-height 0.2s ease-out; */
+}
+
+/* single item */
+
+.smart-connector-button {
+    border-top: 1px solid black;
+    margin: 0 4px;
+    padding: 8px 0;
+    z-index: 9998;
+    cursor: pointer;
+}

packages/client/src/default-modules.ts

@@ -61,6 +61,7 @@ import { nodeCreationToolModule } from './features/tools/node-creation/node-crea
 import { toolFocusLossModule } from './features/tools/tool-focus-loss-module';
 import { markerNavigatorModule, validationModule } from './features/validation/validation-modules';
 import { viewportModule } from './features/viewport/viewport-modules';
+import { smartConnectorModule } from './features/smart-connector/smart-connector-module';
 
 export const DEFAULT_MODULES = [
     defaultModule,
@@ -99,7 +100,8 @@ export const DEFAULT_MODULES = [
     validationModule,
     zorderModule,
     svgMetadataModule,
-    statusModule
+    statusModule,
+    smartConnectorModule
 ] as const;
 
 /**

packages/client/src/features/smart-connector/smart-connector-module.ts

@@ -0,0 +1,33 @@
+/********************************************************************************
+ * Copyright (c) 2023 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 { FeatureModule, TYPES, bindAsService, configureActionHandler, OpenSmartConnectorAction,
+    CloseSmartConnectorAction, MoveAction, SetBoundsAction, SetViewportAction,
+    DeleteElementOperation } from '@eclipse-glsp/sprotty';
+import '../../../css/smart-connector.css';
+import { SmartConnector, SmartConnectorKeyListener } from './smart-connector';
+
+export const smartConnectorModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    bindAsService(context, TYPES.IUIExtension, SmartConnector);
+    bind(TYPES.IDiagramStartup).toService(SmartConnector);
+    configureActionHandler(context, OpenSmartConnectorAction.KIND, SmartConnector);
+    configureActionHandler(context, CloseSmartConnectorAction.KIND, SmartConnector);
+    configureActionHandler(context, MoveAction.KIND, SmartConnector);
+    configureActionHandler(context, SetBoundsAction.KIND, SmartConnector);
+    configureActionHandler(context, SetViewportAction.KIND, SmartConnector);
+    configureActionHandler(context, DeleteElementOperation.KIND, SmartConnector);
+    bindAsService(bind, TYPES.KeyListener, SmartConnectorKeyListener);
+});