Dmn-js Hit policy

Vitalii_Paparyha · November 23, 2022, 7:51am

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;