Hello everyone, I use dmn-js in my react application and when I go to the Decision table I can’t change the Hit policy, the select opens but when I make a choice it doesn’t change here is my code
import React, { Component } from "react";
import DmnJS from "dmn-js/lib/Modeler";
import { Button, Menu, Drawer, Modal, Input, } from 'antd';
import camundaModdleDescriptor from "camunda-dmn-moddle/resources/camunda";
import { CaretRightOutlined, ArrowDownOutlined, BoxPlotOutlined, SaveOutlined } from '@ant-design/icons';
import {
DmnPropertiesPanelModule,
DmnPropertiesProviderModule,
} from 'dmn-js-properties-panel';
import { CamundaPropertiesProviderModule } from "dmn-js-properties-panel";
import "dmn-js-properties-panel/dist/assets/dmn-js-properties-panel.css";
import debounce from 'lodash/debounce';
import Deploy from '../Deploy';
import { generateID } from "../../utils/generateID";
import "dmn-js/dist/assets/diagram-js.css";
import "dmn-js/dist/assets/dmn-font/css/dmn-embedded.css";
import "dmn-js/dist/assets/dmn-js-decision-table-controls.css";
import "dmn-js/dist/assets/dmn-js-decision-table.css";
import "dmn-js/dist/assets/dmn-js-drd.css";
import "dmn-js/dist/assets/dmn-js-literal-expression.css";
import "dmn-js/dist/assets/dmn-js-shared.css";
class MyDmnModeler extends Component {
dmnEditor = null;
constructor(props) {
super(props);
this.state = {
saveDiagram: null,
diagram: [],
xml: null,
visible: false,
nameFile: null,
deployXml: null,
errors: null
};
}
componentDidMount() {
let initialDiagram = null;
if (this.props.data && this.state.diagram.length === 0) {
initialDiagram = this.props.data
this.setState({ saveSchema: true })
}
else if (this.state.diagram.length === 0) {
let id = generateID();
initialDiagram = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:dmndi="https://www.omg.org/spec/DMN/20191111/DMNDI/" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_${id}" name="DRD" namespace="http://camunda.org/schema/1.0/dmn" exporter="Camunda Modeler" exporterVersion="5.0.0" modeler:executionPlatform="Camunda Platform" modeler:executionPlatformVersion="7.17.0">
<dmndi:DMNDI>
<dmndi:DMNDiagram />
</dmndi:DMNDI>
</definitions>`
}
this.setState({
diagram: initialDiagram,
nameFile: this.props.name
});
this.dmnEditor = new DmnJS({
drd: {
propertiesPanel: {
parent: '#' + this.props.propertiesId
},
keyboard: {
bindTo: document
},
additionalModules: [
DmnPropertiesPanelModule,
DmnPropertiesProviderModule,
CamundaPropertiesProviderModule,
]
},
container: '#' + this.props.containerId,
moddleExtensions: {
camunda: camundaModdleDescriptor
},
});
this.dmnEditor.on("views.changed", ({ activeView }) => {
console.log(activeView);
const propertiesPanel = this.dmnEditor.getActiveViewer().get("propertiesPanel", false);
let eventBus = this.dmnEditor.getActiveViewer().get("eventBus");
eventBus.on("commandStack.changed", this.event);
if (propertiesPanel) {
propertiesPanel.detach();
if (activeView.type === "drd") {
propertiesPanel.attachTo(
document.getElementById(this.props.propertiesId)
);
}
}
});
this.openDiagram(initialDiagram)
}
event = (context) => {
if (this.state.saveDiagram === true) {
this.props.saveDmnItems("savedDmn", null, this.props.itemKey, null, 'edit');
this.setState({ saveDiagram: false })
}
}
openDiagram = async (dmn) => {
this.dmnEditor.importXML(dmn)
.then(({ warnings }) => {
if (warnings.length) {
console.log("Warnings", warnings);
}
})
.catch((err) => {
this.setState({ errors: err })
console.log("error", err);
});
}
exportDiagram = async (deploy) => {
try {
const { xml } = await this.dmnEditor.saveXML({ format: true });
if (deploy) {
return this.setState({ deployXml: xml })
}
this.setEncoded(xml, this.state.nameFile + ".dmn")
} catch (err) {
console.error('could not save DMN 1.3 diagram', err);
}
};
setEncoded = (data, name) => {
console.log(data);
var a = document.createElement("a");
a.href = "data:application/dmn-xml;charset=UTF-8," + encodeURIComponent(data);
a.download = name;
a.click();
};
showXml = async () => {
if (this.state.xml) {
this.setState({ xml: null })
}
else {
try {
const result = await this.dmnEditor.saveXML({ format: true });
this.setState({ xml: result.xml })
}
catch (err) {
console.log(err);
}
}
};
onClose = () => {
this.setState({ xml: null })
};
showModal = (e) => {
this.setState({ visible: true })
}
handleCancel = () => {
this.setState({ visible: false })
}
nameFile = (name) => {
this.setState({ nameFile: name.target.value })
}
saveDmn = async () => {
try {
const result = await this.dmnEditor.saveXML({ format: true });
this.props.saveDmnItems("savedDmn", this.state.nameFile, this.props.itemKey, result.xml)
this.setState({ visible: false, saveDiagram: true, })
}
catch (err) {
console.log(err);
}
}
render = () => {
const sharedProps = {
style: {
width: '100%',
},
defaultValue: this.state.nameFile,
};
///Modal Download file
let modal = (
<Modal title="Download file" open={this.state.visible} onCancel={this.handleCancel} footer={false}>
<div>Name file</div>
<Input onChange={this.nameFile} {...sharedProps}></Input>
<div style={{ display: 'flex', justifyContent: 'end', marginTop: '20px' }}>
{this.state.visible === 'save' ?
<Button type="primary" disabled={!this.state.nameFile} onClick={this.exportDiagram} style={{ marginRight: '5px' }}><BoxPlotOutlined style={{ fontSize: '18px' }} />Download</Button> :
<Button type="primary" disabled={!this.state.nameFile} onClick={() => this.saveDmn()}><SaveOutlined style={{ fontSize: '18px' }} />Save</Button>}
</div>
</Modal>);
///Bottom menu
let menu = (<Menu mode="horizontal" style={{ backgroundColor: '#f5f5f5' }} >
<Menu.Item key="showXml" ><Button type="link" onClick={this.showXml} style={{ color: '#595959' }}>{this.state.xml ? "Diagram" : "XML"}</Button>
</Menu.Item>
<Menu.Item key="download" >
<Button type="link" onClick={() => this.showModal('download')} style={{ color: '#595959' }}><ArrowDownOutlined style={{ color: '#595959', fontSize: '18px' }} />Download</Button>
</Menu.Item>
<Menu.Item key="deploy" >
<Deploy diagram={{ name: this.state.nameFile, contents: this.state.deployXml }} getDiagram={this.exportDiagram} />
</Menu.Item>
<Menu.Item key="save" >
<Button type="link" onClick={() => this.showModal('save')}><SaveOutlined style={{ color: 'black', fontSize: '18px' }} /></Button>
</Menu.Item>
</Menu>);
let drawer = (<Drawer
title="View XML"
placement="left"
width={"100%"}
onClose={this.onClose}
open={this.state.xml}
size='small'
getContainer={false}
style={{
position: 'absolute',
overflowY: 'hidden'
}}
>
<pre className="codePre"><code className="language-xml" >{this.state.xml}</code></pre>
</Drawer>);
let main = <>
<div className="site-drawer-render-in-current-wrapper">
{drawer}
<div className="contentDmn" style={{ backgroundColor: 'white' }} >
<div className="modelerDmn" >
<div id={this.props.containerId} style={{
height: '90vh',
width: '100%',
overflow: 'hidden',
}}>
</div>
<div className="editor-tabs" id='editor-tabs' onClick={this.tabClick}></div>
</div>
<div className="properties-panel" id={this.props.propertiesId}></div>
</div>
</div>
</>
return (
<> {modal}{main}{menu}</>
);
};
}
export default MyDmnModeler;
