Hello DHTMLX team,
I’m integrating DiagramEditor in a React application based on your official reference repo:
GitHub - DHTMLX/react-diagram-demo: React Diagram demo by DHTMLX
I’m trying to register a custom shape via diagram_editor.diagram.addShape(), but it has no effect — the editor still displays the default shape, not the custom template.
Below is the exact code I used (modified from the reference demo):
import { useEffect, useRef } from "react";
import { DiagramEditor } from "@dhx/trial-diagram";
import "@dhx/trial-diagram/codebase/diagram.min.css";
export default function DiagramEditorComponent(props) {
let container = useRef();
useEffect(() => {
const diagram_editor = new DiagramEditor(container, {
type: "default",
view: {
shapebar: {
sections: {
"Network shapes": [
{ type: "network", text: "Core", img: "core.svg" },
{ type: "network", text: "Server", img: "server.svg" },
],
"Flow shapes": [{ flowShapes: true }],
},
},
editbar: {
properties: {
network: [
{ type: "arrange" },
{
type: "fieldset",
label: "Network information",
rows: [
{ type: "avatar", key: "img", circle: true, readOnly: true },
{ type: "textarea", key: "text", label: "Description" },
{ type: "input", key: "ip", label: "IP" },
],
},
],
},
},
},
});
diagram_editor.parse(props.data);
diagram_editor.addShape("network", {
template: ({ img, text, ip }) => {
return `
<section className="dhx_diagram_template_d">
<img className="dhx_diagram_template_d__image" src="${img}" alt="${text}"/>
<span className="dhx_diagram_template_d__title">${text}</span>
<span className="dhx_diagram_template_d__text">${ip}</span>
</section>
`;
},
defaults: {
width: 160,
height: 160,
preview: { scale: 0.7 },
ip: "127.0.0.1",
},
});
return () => {
diagram_editor.destructor();
};
});
return <div ref={container} className="widget"></div>;
}
I get the following error:
Uncaught TypeError: diagram_editor.addShape is not a function
I have also tried with
diagram_editor.diagram.addShape() and still the same issue
