Skip to content

Commit

Permalink
fixed rendering of property panel
Browse files Browse the repository at this point in the history 
issue #313
  • Loading branch information
@rsoika
rsoika committed Jan 8, 2024
1 parent d546e42 commit d6f5bdb
Show file tree
Hide file tree
Showing 3 changed files with 468 additions and 656 deletions.
101 changes: 41 additions & 60 deletions open-bpmn.glsp-client/open-bpmn-properties/src/bpmn-property-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
import {
AbstractUIExtension,
EnableDefaultToolsAction,
EnableToolPaletteAction,
EnableToolsAction,
GLSPActionDispatcher,
GModelElement,
Expand All @@ -27,53 +26,39 @@ import {
ISelectionListener,
MaybePromise,
MouseListener,
SetUIExtensionVisibilityAction,
TYPES,
hasArgs
} from '@eclipse-glsp/client';
import { Action, RequestContextActions, SetContextActions } from '@eclipse-glsp/protocol';
import { Action } from '@eclipse-glsp/protocol';
import { JsonForms } from '@jsonforms/react';
import { vanillaCells, vanillaRenderers } from '@jsonforms/vanilla-renderers';
import { isBPMNEdge, isBPMNNode, isBoundaryEvent } from '@open-bpmn/open-bpmn-model';
import { inject, injectable } from 'inversify';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { codiconCSSClasses } from 'sprotty/lib/utils/codicon';

import { SelectItemComboRendererEntry, SelectItemRendererEntry } from './SelectItemControl';
import { TextFileEditorRendererEntry } from './TextFileEditorControl';

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@injectable()
export class BPMNPropertyPanel extends AbstractUIExtension implements ISelectionListener, IActionHandler, IDiagramStartup {

export class BPMNPropertyPanel extends AbstractUIExtension implements IDiagramStartup, ISelectionListener, IActionHandler {
static readonly ID = 'bpmn-property-panel';

@inject(TYPES.IActionDispatcher)
protected readonly actionDispatcher: GLSPActionDispatcher;



// @inject(EditorContextService)
// protected readonly editorContext: EditorContextService;

// @inject(SelectionService)
// protected selectionService: SelectionService;

protected bodyDiv: HTMLElement;
protected headerDiv: HTMLElement;
protected panelContainer: any;
modelRootId: string;
modelRoot: Readonly<GModelRoot>;
headerTitle: HTMLElement;
protected bodyDiv: HTMLElement;
protected panelContainer: any;
selectedElementId: string;
initForm: boolean;
lastCategory: string;
isResizing: boolean;
panelToggle: boolean;
currentY: number;
headerTitle: HTMLElement;


@inject(TYPES.IActionDispatcher)
protected readonly actionDispatcher: GLSPActionDispatcher;

override id(): string {
return BPMNPropertyPanel.ID;
Expand All @@ -82,25 +67,12 @@ export class BPMNPropertyPanel extends AbstractUIExtension implements ISelection
return BPMNPropertyPanel.ID;
}

preInitialize?(): MaybePromise<void>;

/**
* This method is called during the {@link DiagramLoader.load} process.
* We use this hook to activate UI extensions on startup.
* Execution order is derived by the `rank` property of the service. If not present, the {@link Ranked.DEFAULT_RANK} will be assumed.
*
* This mehtod is called after the diagram model is fully initialized. This is the moment to render the HTML element
*/
// postModelInitialization(): MaybePromise<void> {
// this.show(this.editorContext.modelRoot);
// }

/*
* Initialize the elements of property panel
*/
protected override initializeContents(_containerElement: HTMLElement): void {
console.log('.------- initializeContents');
this.createHeader();
this.createBody();
postModelInitialization(): MaybePromise<void> {
//this.show(this.editorContext.modelRoot);
this.show(this.modelRoot);
}

/**
Expand All @@ -111,12 +83,21 @@ export class BPMNPropertyPanel extends AbstractUIExtension implements ISelection
* @param root
*/
protected override onBeforeShow(_containerElement: HTMLElement, root: Readonly<GModelRoot>): void {
this.modelRootId = root.id;
this.modelRoot = root;
console.log('.------- onBeforeShow');
// preselect the root element showing the diagram properties
this.selectionChanged(root, []);
}

/*
* Initialize the elements of property panel
*/
protected override initializeContents(_containerElement: HTMLElement): void {
console.log('.------- initializeContents - create header/body');
this.createHeader();
this.createBody();
}

/*
* This method creates a header bar that can be grabbed with the mouse
* to resize the height of the property panel.
Expand Down Expand Up @@ -245,26 +226,26 @@ export class BPMNPropertyPanel extends AbstractUIExtension implements ISelection
handle(action: Action): ICommand | Action | void {
console.log('.----- handleAction....');
// check enable state
if (!this.bodyDiv && action.kind === EnableToolPaletteAction.KIND) {
const requestAction = RequestContextActions.create({
// contextId: ToolPalette.ID,
contextId: BPMNPropertyPanel.ID,
editorContext: {
selectedElementIds: []
}
});
this.actionDispatcher.requestUntil(requestAction).then(response => {
if (SetContextActions.is(response)) {
this.actionDispatcher.dispatch(
SetUIExtensionVisibilityAction.create({
extensionId: BPMNPropertyPanel.ID,
//visible: !this.editorContext.isReadonly
visible: true
})
);
}
});
}
// if (!this.bodyDiv && action.kind === EnableToolPaletteAction.KIND) {
// const requestAction = RequestContextActions.create({
// // contextId: ToolPalette.ID,
// contextId: BPMNPropertyPanel.ID,
// editorContext: {
// selectedElementIds: []
// }
// });
// this.actionDispatcher.requestUntil(requestAction).then(response => {
// if (SetContextActions.is(response)) {
// this.actionDispatcher.dispatch(
// SetUIExtensionVisibilityAction.create({
// extensionId: BPMNPropertyPanel.ID,
// //visible: !this.editorContext.isReadonly
// visible: true
// })
// );
// }
// });
// }

// Toggle the property panel. Action is triggered by context menu
if (action.kind === BPMNPropertyPanelToggleAction.KIND) {
Expand Down
14 changes: 3 additions & 11 deletions open-bpmn.glsp-client/open-bpmn-properties/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,12 @@
********************************************************************************/
import {
FeatureModule,
SetModelAction,
TYPES,
configureActionHandler
} from '@eclipse-glsp/client';
import {
BPMNPropertyPanel,
BPMNPropertyPanelToggleAction,
BPMNPropertyPanelUpdateAction
BPMNPropertyPanelToggleAction
} from './bpmn-property-panel';


Expand All @@ -39,19 +37,13 @@ export const BPMNPropertyModule = new FeatureModule((bind, unbind, isBound, rebi
bind(TYPES.IDiagramStartup).toService(BPMNPropertyPanel);
bind(TYPES.ISelectionListener).toService(BPMNPropertyPanel);


// EnableToolPaletteAction should no longer be neccessary - see: https://github.com/eclipse-glsp/glsp/discussions/1184
// but we have a problem with the inital selection...
//configureActionHandler({ bind, isBound }, EnableToolPaletteAction.KIND, BPMNPropertyPanel);
configureActionHandler({ bind, isBound }, BPMNPropertyPanelToggleAction.KIND, BPMNPropertyPanel);
configureActionHandler({ bind, isBound }, BPMNPropertyPanelUpdateAction.KIND, BPMNPropertyPanel);


configureActionHandler({ bind, isBound }, SetModelAction.KIND, BPMNPropertyPanel);
// configureActionHandler({ bind, isBound }, BPMNPropertyPanelUpdateAction.KIND, BPMNPropertyPanel);
// configureActionHandler({ bind, isBound }, SetModelAction.KIND, BPMNPropertyPanel);

// TEST
// const context = { bind, unbind, isBound, rebind };
// bindAsService(context, TYPES.ISelectionListener, BPMNPropertyPanel);
});


Expand Down
Loading

0 comments on commit d6f5bdb

Please sign in to comment.