When I try to create and add a custom shape in pallet in my React project, I facing this issue.
//CustomeContextPad
export default class CustomContextPad {
constructor(config, contextPad, create, elementFactory, injector, translate) {
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
if (config.autoPlace !== false) {
this.autoPlace = injector.get('autoPlace', false);
}
contextPad.registerProvider(this);
}
getContextPadEntries(element) {
const {
autoPlace,
create,
elementFactory,
translate
} = this;
function appendServiceTask(event, element) {
if (autoPlace) {
const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
autoPlace.append(element, shape);
} else {
appendServiceTaskStart(event, element);
}
}
function appendServiceTaskStart(event) {
const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
create.start(event, shape, element);
}
function createCustomShape(event) {
const shape = elementFactory.createShape({ type: 'custom:CustomShape' }); // Change 'custom:CustomShape' to your custom shape type
if (autoPlace) {
autoPlace.append(element, shape);
} else {
create.start(event, shape);
}
}
return {
'append.service-task': {
group: 'model',
className: 'bpmn-icon-service-task',
title: translate('Append ServiceTask'),
action: {
click: appendServiceTask,
dragstart: appendServiceTaskStart
}
},
'append.custom-shape': {
group: 'model',
className: 'bpmn-icon-custom-shape', // Add appropriate CSS class for your custom shape icon
title: translate('Append CustomShape'),
action: {
click: createCustomShape,
dragstart: createCustomShape
}
}
};
}
}
CustomContextPad.$inject = [
'config',
'contextPad',
'create',
'elementFactory',
'injector',
'translate'
];
//customePallet
export default class CustomPalette {
constructor(create, elementFactory, palette, translate) {
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
palette.registerProvider(this);
}
getPaletteEntries(element) {
const {
create,
elementFactory,
translate
} = this;
function createServiceTask(event) {
const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
create.start(event, shape);
}
function createCustomShape(event) {
const shape = elementFactory.createShape({ type: 'custom:CustomShape' }); // Change 'custom:CustomShape' to your custom shape type
create.start(event, shape);
}
return {
'create.service-task': {
group: 'activity',
className: 'bpmn-icon-service-task',
title: translate('Create ServiceTask'),
action: {
dragstart: createServiceTask,
click: createServiceTask
}
},
'create.custom-shape': { // Define your custom shape entry
group: 'custom',
className: 'bpmn-icon-custom-shape', // Add appropriate CSS class for your custom shape icon
title: translate('Create CustomShape'), // Tooltip text
action: {
dragstart: createCustomShape,
click: createCustomShape
}
}
}
}
}
//index.js
import CustomContextPad from './CustomContextPad';
import CustomPalette from './CustomPalette';
export default {
__init__: [ 'customContextPad', 'customPalette' ],
customContextPad: [ 'type', CustomContextPad ],
customPalette: [ 'type', CustomPalette ]
};
//app.js
import BpmnModeler from 'bpmn-js/lib/Modeler';
import customControlsModule from './custom';
import diagramXML from '../resources/diagram.bpmn';
const containerEl = document.getElementById('container');
// create modeler
const bpmnModeler = new BpmnModeler({
container: containerEl,
additionalModules: [
customControlsModule
]
});
// import XML
bpmnModeler.importXML(diagramXML, (err) => {
if (err) {
console.error(err);
}
});
//diagram.bpmn
<?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" id="_RdgBELNaEeSYkoSLDs6j-w" targetNamespace="http://activiti.org/bpmn">
<bpmn2:process id="Process_1">
<bpmn2:task id="Task_1" name="Examine Situation" qa:suitable="0.7">
<bpmn2:outgoing>SequenceFlow_1</bpmn2:outgoing>
</bpmn2:task>
<bpmn2:sequenceFlow id="SequenceFlow_1" name="" sourceRef="Task_1" targetRef="ExclusiveGateway_1"/>
<bpmn2:exclusiveGateway id="ExclusiveGateway_1" name="Things OK?">
<bpmn2:incoming>SequenceFlow_1</bpmn2:incoming>
<bpmn2:outgoing>SequenceFlow_2</bpmn2:outgoing>
<bpmn2:outgoing>SequenceFlow_5</bpmn2:outgoing>
</bpmn2:exclusiveGateway>
<bpmn2:sequenceFlow id="SequenceFlow_2" name="" sourceRef="ExclusiveGateway_1" targetRef="EndEvent_1"/>
<bpmn2:sequenceFlow id="SequenceFlow_5" name="" sourceRef="ExclusiveGateway_1" targetRef="EndEvent_2"/>
<bpmn2:endEvent id="EndEvent_1" name="Notification Sent">
<bpmn2:incoming>SequenceFlow_2</bpmn2:incoming>
<bpmn2:messageEventDefinition id="MessageEventDefinition_1"/>
</bpmn2:endEvent>
<bpmn2:endEvent id="EndEvent_2" name="Error Propagated">
<bpmn2:incoming>SequenceFlow_5</bpmn2:incoming>
<bpmn2:errorEventDefinition id="ErrorEventDefinition_1"/>
</bpmn2:endEvent>
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="_BPMNShape_Task_2" bpmnElement="Task_1">
<dc:Bounds height="80.0" width="100.0" x="96.0" y="196.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_EndEvent_2" bpmnElement="EndEvent_1">
<dc:Bounds height="36.0" width="36.0" x="396.0" y="300.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="0.0" width="0.0" x="414.0" y="341.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_ExclusiveGateway_2" bpmnElement="ExclusiveGateway_1" isMarkerVisible="true">
<dc:Bounds height="50.0" width="50.0" x="276.0" y="210.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="21.0" width="74.0" x="333.0" y="226.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_1" bpmnElement="SequenceFlow_1" sourceElement="_BPMNShape_Task_2" targetElement="_BPMNShape_ExclusiveGateway_2">
<di:waypoint xsi:type="dc:Point" x="196.0" y="236.0"/>
<di:waypoint xsi:type="dc:Point" x="276.0" y="235.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="6.0" width="6.0" x="214.0" y="236.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_2" bpmnElement="SequenceFlow_2" sourceElement="_BPMNShape_ExclusiveGateway_2" targetElement="_BPMNShape_EndEvent_2">
<di:waypoint xsi:type="dc:Point" x="301.0" y="260.0"/>
<di:waypoint xsi:type="dc:Point" x="301.0" y="318.0"/>
<di:waypoint xsi:type="dc:Point" x="396.0" y="318.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="6.0" width="6.0" x="298.0" y="301.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="_BPMNShape_EndEvent_3" bpmnElement="EndEvent_2">
<dc:Bounds height="36.0" width="36.0" x="396.0" y="132.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="0.0" width="0.0" x="414.0" y="173.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_5" bpmnElement="SequenceFlow_5" sourceElement="_BPMNShape_ExclusiveGateway_2" targetElement="_BPMNShape_EndEvent_3">
<di:waypoint xsi:type="dc:Point" x="301.0" y="210.0"/>
<di:waypoint xsi:type="dc:Point" x="301.0" y="150.0"/>
<di:waypoint xsi:type="dc:Point" x="396.0" y="150.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="6.0" width="6.0" x="333.0" y="150.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>
//index.html
<!DOCTYPE html>
<html>
<head>
<title>bpmn-js-example-model-extension</title>
<link rel="stylesheet" href="vendor/bpmn-js/assets/diagram-js.css" />
<link rel="stylesheet" href="vendor/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="container"></div>
<script src="app.js"></script>
</html>
//webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
bundle: ['./app/app.js']
},
output: {
path: __dirname + '/public',
filename: 'app.js'
},
module: {
rules: [
{
test: /\.bpmn$/,
use: 'raw-loader'
}
]
},
plugins: [
new CopyWebpackPlugin([
{ from: 'assets/**', to: 'vendor/bpmn-js', context: 'node_modules/bpmn-js/dist/' },
{ from: '**/*.{html,css}', context: 'app/' }
])
],
mode: 'development',
devtool: 'source-map'
};
//package.json
{
"name": "bpmn-js-example-custom-rendering",
"version": "0.0.0",
"description": "An example of creating custom rendering for bpmn-js",
"scripts": {
"all": "run-s lint build",
"build": "webpack --mode production",
"dev": "webpack-dev-server --content-base=public --open",
"lint": "eslint .",
"start": "run-s dev"
},
"repository": {
"type": "git",
"url": "https://github.com/bpmn-io/bpmn-js-example-model-extension"
},
"keywords": [
"bpmnjs-example"
],
"author": {
"name": "Philipp Fromme",
"url": "https://github.com/philippfromme"
},
"contributors": [
{
"name": "bpmn.io contributors",
"url": "https://github.com/bpmn-io"
}
],
"license": "MIT",
"devDependencies": {
"copy-webpack-plugin": "^4.6.0",
"eslint": "^5.0.1",
"eslint-plugin-bpmn-io": "^0.5.3",
"npm-run-all": "^4.1.3",
"raw-loader": "^0.5.1",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"bpmn-js": "^3.2.2",
"diagram-js": "^3.1.3",
"tiny-svg": "^2.2.1"
}
}
//Error
Uncaught Error: unknown type <custom:CustomShape>
at ./node_modules/moddle/lib/registry.js.Registry.mapTypes (registry.js:159:1)
at ./node_modules/moddle/lib/registry.js.Registry.getEffectiveDescriptor (registry.js:184:1)
at ./node_modules/moddle/lib/moddle.js.Moddle.getType (moddle.js:97:1)
at ./node_modules/moddle/lib/moddle.js.Moddle.create (moddle.js:65:1)
at ./node_modules/bpmn-js/lib/features/modeling/BpmnFactory.js.BpmnFactory.create (BpmnFactory.js:52:1)
at ./node_modules/bpm