-
|
Hi, I am working on a custom GLSP
The goal is to be independent from Theia for the moment and use the same behaviour in VS-Code or Eclipse. This is why I can not use the Theia tree-editor or jsonPropertyPanelview. When a user selects a element I want to show a form with all element attributes similar to the theia-tree-editor or the JSON-property-view within the body of my UIExtension (the red area in the picture is part of the diagram pane and not a separate Theia view) I have already implemented a if (this.selectionService.isSingleSelection()) {
const element=root.index.getById(selectedElements[0]);
if (element instanceof TaskNode) {
const task: TaskNode=element;
// render Task Form
......
this.bodyDiv?.appendChild(myNewJSONForm);
}
if (element instanceof GatewayNode) {
// render Gateway Form
......
}
if (element instanceof EventNode) {
// render Event Form
......
}
}Can someone help me with a code example how I can adapt the jsonforms in this situation? The tree-editor and the jsonpropertyview is so hard bundled to theia specifica, that I can not extract the core requirement:
I wonder how this is possible in an easy way? I am thankful for any help === |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 6 replies
-
|
Hi @rsoika! The necessary dependencies you will have to add will be: To render the JSON forms component you need a container node (some You hand over the I tested it quickly and this snippet renders a simple readonly JSON Forms component in an AbstractUIExtension for a GLSP diagram. Best wishes, PS: I like the idea of integrating it as UIExtension, it looks really cool already! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot for your answer and code snippets. I will go ahead with this and I'll give you my feedback as soon as I succeed or get stuck again ;-) |
Beta Was this translation helpful? Give feedback.
-
|
It looks like I am now running into some problems with the dependencies. As soon as I try to add a dummy method using the import * as React from 'react';
import * as ReactDOM from 'react-dom';
export function renderEmptyForms(node: HTMLElement): void {
ReactDOM.render(
<React.Fragment>Please select an element </React.Fragment>,
node
);
}I got errors during build which I can not resolve: The strange thing is, that the error message points to a different source code file with a code using svg and JSX - like this: const vnode = (
<g>
<path
transform={'scale(1.15),translate(0.75,0.75)'}
// eslint-disable-next-line max-len
d={icon}
/>
<rect class-icon-background x={0} y={0} width={25} height={20} />
{context.renderChildren(element)}
</g>
);
const subType = getSubType(element);
if (subType) {
setAttr(vnode, 'class', subType);
}
return vnode;Maybe I have generated now a conflict in my tsconfig.json which looks like this: I have added the following lines some time ago to solve a similar compile issue with the SVG parts of my code: Is it possible that I have now generated a conflict with the option |
Beta Was this translation helpful? Give feedback.
-
|
Hi @rsoika, In some projects we had the same issue, hence we used a workaround and typed the elements explicitly with HTH and best wishes, |
Beta Was this translation helpful? Give feedback.
-
|
yes, this trick solved the compilation errors. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
@ndoschek I still don't get the React and JsonForms working. I feel like I am in a dark room searching the light switch. I hope you can help me out. I managed to organize my dependencies, I switched from .ts to .tsx and I am able to compile without errors. But the react part is not working. The following code fragment shows 3 different variants I try to render my property panel on a select action (Task, Gateway, Event) /*
* This mehtod reacts on the selection of a BPMN element
* and updates the property panel input fields
*/
selectionChanged(root: Readonly<SModelRoot>, selectedElements: string[]): void {
console.log('selection change received:', root, selectedElements);
if (this.selectionService.isSingleSelection()) {
const element = root.index.getById(selectedElements[0]);
if (element instanceof TaskNode) {
console.log('...Task selected');
const task: TaskNode = element;
console.log('...category=' + task.category + ' documentation ' + task.documentation);
const documentationInput = document.createElement('input');
documentationInput.insertAdjacentText('beforeend', '' + task.documentation);
documentationInput.onchange = function (this) {
console.log('...do something... ');
};
this.bodyDiv?.appendChild(documentationInput);
}
if (element instanceof GatewayNode) {
console.log('...Gateway selected');
const gateway: GatewayNode = element;
const elementDataAsJson = {};
ReactDOM.render(
<JsonForms
data={elementDataAsJson}
cells={vanillaCells}
renderers={vanillaRenderers}
readonly
/>,
this.bodyDiv
);
console.log('...eventtype=' + gateway.category);
}
if (element instanceof EventNode) {
console.log('...Event selected....');
const event: EventNode = element;
ReactDOM.render(
<React.Fragment>Please select an element </React.Fragment>,
this.bodyDiv
);
console.log('...eventtype=' + event.category);
}
}
}The first one is working of course as this code is not using React so far. The second one throws the following exception: I have no idea what this message could mean. The third variant, which is only using React to isolate the problem throws a different exception: I read a lot about this kind of exception, but was unable to solve it. I can imaging that my import instructions can be a root of my problems. import {
AbstractUIExtension,
EnableDefaultToolsAction,
EnableToolsAction,
SetUIExtensionVisibilityAction,
ActionDispatcher,
SModelRoot,
svg,
TYPES
} from 'sprotty';
import { codiconCSSClasses } from 'sprotty/lib/utils/codicon';
import {
Action,
EditModeListener,
EditorContextService
} from '@eclipse-glsp/client';
import {
SelectionListener,
SelectionService
} from '@eclipse-glsp/client/lib/features/select/selection-service';
import { TaskNode, GatewayNode, EventNode } from '../model';
// Import Instruction sReact and JsonForms
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { JsonForms } from '@jsonforms/react';
import {
vanillaCells,
vanillaRenderers
} from '@jsonforms/vanilla-renderers';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const JSX = { createElement: svg };Especiallly the last line my be a problem? // eslint-disable-next-line @typescript-eslint/no-unused-vars
const JSX = { createElement: svg };I think it was a advice from @planger some time ago to solve a problem using svg in my graphical elements. And this may be an issue of my compiler settings in the I am sorry for asking such kind of stupid questions, but I can't figure out how to solve this by myself. I looks like it was a big fault to ignore javascript the last 15 years... ;-) |
Beta Was this translation helpful? Give feedback.
-
|
Hi @rsoika, my assumption is that you are using multiple React versions, which can cause your posted exceptions and also the follow-up issues. Regarding your imports, they look good to me - we use the same structure and it should work that way if you use HTH and best wishes, |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for you feedback. I now started to reorganize my project and split it up into more separate modules with the hope to get rid of to many dependencies (react + sprotty) in the same module - which is currently the case. I created a dummy-guideline (for myself): https://github.com/imixs/open-bpmn/blob/master/doc/MODULE_SYSTEM.md |
Beta Was this translation helpful? Give feedback.
-
|
@ndoschek Hooray, I finally made it! Thanks to your help!! Isolating all the property-panel stuff into a separate module solved all the compiling errors and also all runtime errors. Now I can fill my property panel with
And also I now have one more request for help: Can you please take a quick look at the following module code: https://github.com/imixs/open-bpmn/tree/issue-18/open-bpmn.glsp-client/open-bpmn-properties Especially on the way I export my Is this the correct way I should design UIExtensions in GLSP? I saw that you mostly use the di.config.ts file instead of a index.ts file? But in my module package.json file I refer to lib/index In my main GLSP module I now simply import the module and add it as a container module: import {bpmnPropertyModule} from '@open-bpmn/open-bpmn-properties';
const bpmnDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
.....
});
export default function createContainer(widgetId: string): Container {
// add the BPMN propertyViewModule...
const container = createClientContainer(bpmnDiagramModule, directTaskEditor,bpmnPropertyModule);
overrideViewerOptions(container, {
baseDiv: widgetId,
hiddenDiv: widgetId + '_hidden'
});
return container;
}Would you agree to this approach? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @rsoika
Sure that approach is perfectly fine. If you only have only single DI module in your package, exporting it via the main |
Beta Was this translation helpful? Give feedback.
Hi @rsoika!
The necessary dependencies you will have to add will be:
To render the JSON forms component you need a container node (some
HTMLElement, which could probably be thecontainerElementin your UIExtension or a child of it) to render it in, as it is done for example in theJsonFormsPropertyViewWidget#renderFormsfunction.Also, it will be necessary to change your extension's file extension to
.tsxand set"jsx": "react"in yourtsconfig…