Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Smart Connector UIExtension #308

Open
wants to merge 27 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
0307ab8
added smart connector UIExtension and Actions for data request
yentelmanero Oct 30, 2023
7efe329
added possibility to set position for smart connector containers (lef…
yentelmanero Nov 14, 2023
522284b
Merge remote-tracking branch 'upstream/master'
yentelmanero Nov 14, 2023
b41978d
added search, keyboard navigation and customization options to smart …
yentelmanero Nov 29, 2023
7a0e67a
fixed keyboard, width and click event when invisible bugs in smart co…
yentelmanero Nov 30, 2023
3c3bcad
Merge remote-tracking branch 'upstream/master'
yentelmanero Nov 30, 2023
99fc2d4
addressed lint issues
yentelmanero Nov 30, 2023
68a3430
moved HTMLElement extension methods from smart-connector to html-utils
yentelmanero Nov 30, 2023
6c811fc
Implemented suggested changes from PR
yentelmanero Dec 27, 2023
c4de64b
Merge remote-tracking branch 'upstream/master'
yentelmanero Dec 27, 2023
fae839d
added index file for smart connector
yentelmanero Dec 27, 2023
3405a06
fixed lint issues
yentelmanero Dec 27, 2023
c9ae88e
Merge pull request #1 from eclipse-glsp/master
yentelmanero Jan 30, 2024
238cec9
Implemented PR changes, moved HTMLElement extensions, added Action to…
yentelmanero Feb 1, 2024
221602b
Merge branch 'eclipse-glsp:master' into master
yentelmanero Feb 12, 2024
8732697
Added escape key to exit smart connector, applied prettier formatting…
yentelmanero Feb 12, 2024
001a16e
removed comment
yentelmanero Feb 12, 2024
12a1f77
fixed bug where top and bottom containers would not align with relate…
yentelmanero Feb 22, 2024
f7bafea
fixed issue where icons could not be used for tool buttons
yentelmanero Feb 25, 2024
defec53
changed line to use display:flex instead of block after searching
yentelmanero Feb 26, 2024
1bcc513
renamed smart connector to selection palette, removed open and close …
yentelmanero Apr 1, 2024
c88f126
Merge branch 'master' of https://github.com/yentelmanero/glsp-client
yentelmanero Apr 1, 2024
b0774d7
fixed merge issues happening due to name change
yentelmanero Apr 1, 2024
3cc4e58
selection palette expand button does not close when panning and zoomi…
yentelmanero Apr 2, 2024
152a9ff
fixed lint problems
yentelmanero Apr 2, 2024
b3ad8c7
fixed bug where edge selection would also bring up selection palette
yentelmanero Apr 16, 2024
b470530
selection palette now moves when resizing and moving node instead of …
yentelmanero Apr 18, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion examples/workflow-standalone/src/di.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand Down
130 changes: 130 additions & 0 deletions packages/client/css/selection-palette.css
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions packages/client/src/features/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
17 changes: 17 additions & 0 deletions packages/client/src/features/selection-palette/index.ts
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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
};
}
}
Original file line number Diff line number Diff line change
@@ -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);
});
Loading