bpmn-io / bpmn-js-color-picker Goto Github PK

      const correctPopupMenuPosition = () => {
        const popup = document.querySelector('.djs-popup');
        if (popup) {
          const selection = modeler.get('selection');
          const currentElement = selection.get();

          if (currentElement.length) {
            const element = currentElement[0];
            const gfx = modeler.get('elementRegistry').getGraphics(element);
            const elementBBox = gfx.getBoundingClientRect();

            const offsetX = 30; // Adjust as needed
            const offsetY = 5; // Adjust as needed

            popup.style.left = `${elementBBox.right + offsetX}px`;
            popup.style.top = `${elementBBox.top - offsetY}px`;
          }
        }
      };

      // Correct the popup position when it's opened
      modeler.on('popupMenu.open', function () {
        setTimeout(correctPopupMenuPosition, 0);
      }, 1000);

      // Reapply position corrections if the popup changes its style
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.attributeName === 'style') {
            correctPopupMenuPosition();
          }
        });
      });

      // Observe the popup for style changes
      document.addEventListener('mouseover', function (e) {
        if (e.target.closest('.djs-popup')) {
          observer.observe(document.querySelector('.djs-popup'), { attributes: true });
        }
      });

      // Disconnect the observer when the popup is closed
      modeler.on('popupMenu.close', function () {
        observer.disconnect();
      });

export default function SelectiveColorPicker(modeler) {
  const eventBus = modeler.get('eventBus');

  // Intercept the display of the context pad
  eventBus.on('contextPad.create', function (event) {
    if (event.target.type !== 'bpmn:Task') {
      setTimeout(() => {
        const colorPickerEntry = event.pad.html.querySelector('[data-action="set-color"]');

        if (colorPickerEntry) {
          colorPickerEntry.style.display = 'none';
        }
      });
    }
  });
}

"dependencies": {
    "bpmn-font": "^0.10.0",
    "bpmn-js": "^7.4.0",
    "bpmn-js-in-color": "github:bpmn-io/bpmn-js-in-color",
    "diagram-js-minimap": "^2.0.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "tiny-svg": "^2.2.2",
    "web-vitals": "^0.2.4"
  }

import React, { Fragment, Component } from "react";
import BpmnModeler from "bpmn-js/lib/Modeler";
import { emptyBpmn } from "./diagram.bpmn.jsx";
import bpmnJsInColor from "bpmn-js-in-color";
import minimapModule from "diagram-js-minimap";

import "./vendor/diagram-js.css";
import "bpmn-font/dist/css/bpmn-embedded.css";
import "diagram-js-minimap/assets/diagram-js-minimap.css";

class App extends Component {
  modeler = null;

  saveModelHandler = (event) => {
    event.preventDefault();
  };

  componentDidMount = () => {
    this.modeler = new BpmnModeler({
      container: "#bpmnview",
      additionalModules: [require("bpmn-js-in-color")],
      keyboard: { bindTo: document },
    });

    this.newBpmnDiagram();
  };

  newBpmnDiagram = () => {
    this.openBpmnDiagram(emptyBpmn);
  };

  openBpmnDiagram = async (xml) => {
    await this.modeler.importXML(xml);
    var canvas = this.modeler.get("canvas");
    canvas.zoom("fit-viewport");
  };

  render = () => {
    return (
      <Fragment>
        <div
          id="bpmnview"
          style={{ width: "100%", height: "100vh", float: "left" }}
        ></div>
      </Fragment>
    );
  };
}

export default App;

 **TypeError: Object prototype may only be an Object or null: undefined**
inherits
**node_modules/inherits/inherits_browser.js:6**
  3 | module.exports = function inherits(ctor, superCtor) {
  4 |   if (superCtor) {
  5 |     ctor.super_ = superCtor
> 6 |     ctor.prototype = Object.create(superCtor.prototype, {
    | ^  7 |       constructor: {
  8 |         value: ctor,
  9 |         enumerable: false,

$ git clone <repository>
$ cd bpmn-js-in-color/example
$ npm run dev

> [email protected] dev /home/.../git/bpmn-js-in-color
> grunt auto-build

Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'load-grunt-tasks'
>> Require stack:
>> - /home/.../git/bpmn-js-in-color/Gruntfile.js
>> - /usr/share/nodejs/grunt/lib/grunt/task.js
>> - /usr/share/nodejs/grunt/lib/grunt.js
>> - /usr/share/nodejs/grunt-cli/bin/grunt
Warning: Task "auto-build" not found. Use --force to continue.

Aborted due to warnings.
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! [email protected] dev: `grunt auto-build`
npm ERR! Exit status 3
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?