Properties panel with React.js

[MaheshkumarSundaram]

Hi @ralphhanna ,

I'm developing a React based front-end for the BPMN Modeller for your bpmn-server like the one in your webapp (JUST THE MODELLER WITH THE PROPERTIES PANEL ALONE)

As you have already customized your properties panel for the server, I'm planning to re-purpose it for my React app.

1. From what I explored in your code, I presume modeller-withPropertyPanel.js is the file where all the customizations reside! Please correct me if I'm wrong.

2. Also I'm confused with some imports too in that file,
   Line 117: var _camunda = _interopRequireDefault(require("bpmn-js-properties-panel/lib/provider/camunda"));
   But I don't see such path in the npm package bpmn-js-properties-panel.
   

May I know which version of the package are you using? And also why is this package not listed in the package.json?

3. Similar to the above, I also don't see bpmn-js in your package,json. So how are all these modules available when I inspect the sources in the browser?

Sorry if my questions sound silly, but I'm just lost on how do integrate your properties panel customizations in my react.

For reference, I'm attaching my React code below:

React Component

import { useCallback, useEffect, useRef } from 'react';
import { Container } from 'react-bootstrap';

import {
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    CamundaPlatformPropertiesProviderModule,
} from 'bpmn-js-properties-panel';

import * as CamundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';

import BpmnModeler from 'bpmn-js/lib/Modeler';

import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import 'bpmn-js/dist/assets/diagram-js.css';

import 'bpmn-js-properties-panel/dist/assets/properties-panel.css';
import '../../../styles/workflow/design-workflow.scss';

const DesignWorkflow = () => {
    // Evade Strict Mode useEffect being called twice
    const isMounted = useRef(false);

    // BPMN Modeler
    const bpmnModeler = useRef(null);

    // BPMN Design Container
    const mainContainer = useRef(null);

    // Open BPMN Diagram in the canvas
    const openBpmnDiagram = async (xml) => {
        try {
            await bpmnModeler.current.importXML(xml);
            const canvas = bpmnModeler.current.get('canvas');
            canvas.zoom('fit-viewport');
        } catch (err) {
            console.log(err);
        }
    };

    const newBpmnDiagram = useCallback(() => {
        const newXML = `<?xml version='1.0' encoding='UTF-8'?>
        <bpmn2:definitions xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:bpmn2='http://www.omg.org/spec/BPMN/20100524/MODEL' xmlns:bpmndi='http://www.omg.org/spec/BPMN/20100524/DI' xmlns:dc='http://www.omg.org/spec/DD/20100524/DC' xmlns:di='http://www.omg.org/spec/DD/20100524/DI' xsi:schemaLocation='http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd' id='sample-diagram' targetNamespace='http://bpmn.io/schema/bpmn'>
          <bpmn2:process id='Process_1' isExecutable='false'>
            <bpmn2:startEvent id='StartEvent_1'/>
          </bpmn2:process>
          <bpmndi:BPMNDiagram id='BPMNDiagram_1'>
            <bpmndi:BPMNPlane id='BPMNPlane_1' bpmnElement='Process_1'>
              <bpmndi:BPMNShape id='_BPMNShape_StartEvent_2' bpmnElement='StartEvent_1'>
                <dc:Bounds height='36.0' width='36.0' x='412.0' y='240.0'/>
              </bpmndi:BPMNShape>
            </bpmndi:BPMNPlane>
          </bpmndi:BPMNDiagram>
        </bpmn2:definitions>`;
        openBpmnDiagram(newXML);
    }, []);

    const isInvalidFileImport = (fileName) => {
        const parts = fileName.split('.');
        const fileType = parts[parts.length - 1];
        if (fileType !== 'bpmn') {
            console.log('Please import a valid .bpmn file.');
            return true;
        }
        return false;
    };

    // Read File
    const readImportedFile = useCallback((file) => {
        const reader = new FileReader();

        reader.onload = (e) => {
            const xml = e.target.result;

            openBpmnDiagram(xml);
        };

        reader.readAsText(file);
    }, []);

    // Handling file drop
    const handleFileSelect = useCallback(
        (e) => {
            e.stopPropagation();
            e.preventDefault();

            const { files } = e.dataTransfer;

            const file = files[0];

            if (!isInvalidFileImport(file.name)) {
                readImportedFile(file);
            }
        },
        [readImportedFile],
    );

    // Handling dragging file over the container
    function handleDragOver(e) {
        e.stopPropagation();
        e.preventDefault();

        e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }

    // check file api availability
    if (!window.FileList || !window.FileReader) {
        // eslint-disable-next-line no-alert
        window.alert(
            'Looks like you use an older browser that does not support drag and drop. Try using Chrome, Firefox or the Internet Explorer > 10.',
        );
    }

    useEffect(() => {
        if (isMounted.current) return;
        isMounted.current = true;
        bpmnModeler.current = new BpmnModeler({
            container: '#bpmnview',
            keyboard: {
                bindTo: window,
            },
            propertiesPanel: {
                parent: '#propview',
            },
            additionalModules: [
                BpmnPropertiesPanelModule,
                BpmnPropertiesProviderModule,
                CamundaPlatformPropertiesProviderModule,
            ],
            moddleExtensions: {
                camunda: CamundaModdleDescriptor,
            },
        });
        newBpmnDiagram();

        mainContainer.current.addEventListener('dragover', handleDragOver);
        mainContainer.current.addEventListener('drop', handleFileSelect);
    }, [handleFileSelect, newBpmnDiagram]);

    return (
        <Container fluid className='workflow-design-container'>
            <div ref={mainContainer} className='bpmn-design-container'>
                <div className='workflow-bpmn-canvas' id='bpmnview' />
                <div className='properties-panel-parent' id='propview' />
            </div>
        </Container>
    );
};

export default DesignWorkflow;

Thanks!

[kstan79]

so far any good result? it like inspiring of new react ui

[MaheshkumarSundaram]

@kstan79, Sorry for the very late response, this slipped through the cracks.

I just used the properties panel from bpmn-js along with Camunda's add-ons in the front-end.

import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, CamundaPlatformPropertiesProviderModule, } from 'bpmn-js-properties-panel';

Since the customization in this project uses jquery, I just didn't bother to repurpose them for React.