I have been trying to add custom property to Properties-panel as it shown in the example (https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension) bpmn io. But when I try to rewrite it to React JS I get an error: TypeError: Cannot add property __, object is not extensible. Help who solved such a similar problem. It would be very helpful for me. Thanks. Here is my code:
import { useEffect, useRef } from "react";
import BpmnModeler from 'bpmn-js/lib/Modeler';
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'
import 'bpmn-js-properties-panel/dist/assets/element-templates.css'
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule
} from 'bpmn-js-properties-panel';
import magicPropertiesProviderModule from './companentPnel/index';
import magicModdleDescriptor from './companentPnel/magic.json';
export default function Bpmn() {
const canvasRef = useRef(null);
const modelerRef = useRef(null);
const propertiesRef = useRef(null)
useEffect(() => {
modelerRef.current = new BpmnModeler({
container: canvasRef.current,
propertiesPanel: { parent: propertiesRef.current },
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
magicPropertiesProviderModule
],
moddleExtensions: {
magic: magicModdleDescriptor
}
});
modelerRef.current.createDiagram();
return () => {
modelerRef.current.destroy();
};
}, []);
return (
<div style={{ display: 'flex', height: '100%' }}>
<div ref={canvasRef} style={{ flex: 1 }}></div>
<div ref={propertiesRef} style={{ width: '300px'}}></div>
</div>
);
}
At the same time, the GitHub example itself, written in JS and HTML, works fine. But I need to make a React component for my task