Error when using loaddiagram in ejs-diagram
1.The data used in loadDiagram is the result of saveDiagram()
2.If this data is loadDiagram (loadData), an error occurs.
3.The type of all nodes is HTML and uses template.
- const loadData = this.$refs.diagramObject.ej2Instances.saveDiagram();
- this.$refs.diagramObject.ej2Instances.loadDiagram(loadData)
- LoadData is down there.
//============error start================
error : Uncaught TypeError: Cannot read properties of undefined (reading 'cloneNode')
at SvgRenderer2.drawHTMLContent (@syncfusion_ej2-vue-…=4f5e12e3:21884:118)
at DiagramRenderer2.renderHTMLElement (@syncfusion_ej2-vue-…v=4f5e12e3:23222:24)
at DiagramRenderer2.renderElement (@syncfusion_ej2-vue-…v=4f5e12e3:22193:12)
at DiagramRenderer2.renderContainer (@syncfusion_ej2-vue-…v=4f5e12e3:23321:14)
at DiagramRenderer2.renderElement (@syncfusion_ej2-vue-…v=4f5e12e3:22183:12)
at Diagram2.renderDiagramElements (@syncfusion_ej2-vue-…v=4f5e12e3:40880:20)
at Diagram2.refreshSvgDiagramLayer (@syncfusion_ej2-vue-…v=4f5e12e3:40742:12)
at Diagram2.refreshDiagramLayer (@syncfusion_ej2-vue-…v=4f5e12e3:40635:16)
at Diagram2.render (@syncfusion_ej2-vue-…v=4f5e12e3:36258:12)
at Component2.refresh (chunk-RV77AJVG.js?v=4f5e12e3:7446:10)
openDiagramHandler @ LayoutModelingView.vue:1081
error point : cloneNode(true)
if (!htmlElement) {
parentHtmlElement = canvas.querySelector("#" + element2.id + "_html_element") || canvas.querySelector("#" + element2.nodeId + "_html_element");
if (!parentHtmlElement) {
var attr_1 = {
"id": element2.nodeId + "_html_element",
"class": "foreign-object"
};
parentHtmlElement = createHtmlElement("div", attr_1);
}
var attr = {
"id": element2.id + "_html_element",
"class": "foreign-object"
};
htmlElement = createHtmlElement("div", attr);
var isOverviewLayer = false;
if (canvas.parentNode && canvas.parentNode.parentNode && canvas.parentNode.parentNode.parentNode && canvas.parentNode.parentNode.parentNode.classList.contains("e-overview")) {
isOverviewLayer = true;
}
if (isOverviewLayer) {
htmlElement.appendChild(element2.template.cloneNode(true));
} } else {
element2.isTemplate ? htmlElement.appendChild(element2.template) : htmlElement.appendChild(element2.template.cloneNode(true));
}
if (indexValue !== void 0 && canvas.childNodes.length > indexValue) {
canvas.insertBefore(htmlElement, canvas.childNodes[parseInt(indexValue.toString(), 10)]);
}
parentHtmlElement.appendChild(htmlElement);
canvas.appendChild(parentHtmlElement);
}
//============error end================
export const loadData = {
enableRtl: false,
locale: "en-US",
backgroundColor: "#ffffff",
constraints: 502,
contextMenuSettings: {
show: true,
items: [
{
id: "equipment",
text: "Equipment",
target: ".e-elementcontent",
items: [
{
id: "equipmentCreate",
text: "Create",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "equipmentEdit",
text: "Edit",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "equipmentDelete",
text: "Delete",
items: [],
iconCss: "e-icons e-bullet-5",
},
],
separator: false,
iconCss: "aim aimcons_condition-d",
url: "",
},
{
id: "equipmentZone",
text: "Zone",
target: ".e-elementcontent",
items: [
{
id: "equipmentZoneCreate",
text: "Create",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "equipmentZoneEdit",
text: "Edit",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "equipmentZoneDelete",
text: "Delete",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "equipmentZoneShelf",
text: "Shelf",
items: [
{
id: "equipmentZoneShelfCreate",
text: "Create",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "equipmentZoneShelfMultiCreate",
text: "Multi Create",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "equipmentZoneShelfEdit",
text: "Edit",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "equipmentZoneShelfDelete",
text: "Delete",
items: [],
iconCss: "e-icons e-bullet-5",
},
],
iconCss: "e-icons e-bullet-5",
},
],
separator: false,
iconCss: "aim aimcons_condition-d",
url: "",
},
{
id: "port",
text: "Port",
target: ".e-elementcontent",
items: [
{
id: "portCreate",
text: "Create",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "portEdit",
text: "Edit",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "portDelete",
text: "Delete",
items: [],
iconCss: "e-icons e-bullet-5",
},
],
separator: false,
iconCss: "aim aimcons_condition-d",
url: "",
},
{
id: "crane",
text: "Crane",
target: ".e-elementcontent",
items: [
{
id: "craneCreate",
text: "Create",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "craneEdit",
text: "Edit",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "craneDelete",
text: "Delete",
items: [],
iconCss: "e-icons e-bullet-5",
},
],
separator: false,
iconCss: "aim aimcons_condition-d",
url: "",
},
{
id: "vehicle",
text: "Vehicle",
target: ".e-elementcontent",
items: [
{
id: "vehicleCreate",
text: "Create",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "vehicleEdit",
text: "Edit",
items: [],
iconCss: "e-icons e-bullet-5",
},
{
id: "vehicleDelete",
text: "Delete",
items: [],
iconCss: "e-icons e-bullet-5",
},
],
separator: false,
iconCss: "aim aimcons_condition-d",
url: "",
},
{
id: "separator",
text: null,
target: null,
items: null,
separator: true,
iconCss: null,
url: "",
},
{
id: "commonCopy",
text: "Copy",
target: ".e-elementcontent",
separator: false,
iconCss: "e-copy e-icons",
url: "",
},
{
id: "commonCut",
text: "Cut",
target: ".e-elementcontent",
separator: false,
iconCss: "e-cut e-icons",
url: "",
},
{
id: "commonRemove",
text: "Remove",
target: ".e-elementcontent",
separator: false,
iconCss: "e-trash e-icons",
url: "",
},
{
id: "commonGroup",
text: "Group",
target: ".e-elementcontent",
separator: false,
iconCss: "e-group-1 e-icons",
url: "",
},
{
id: "commonOrder",
text: "Order",
target: ".e-elementcontent",
items: [
{
id: "commonBringForward",
text: "Bring Forward",
items: [],
iconCss: "e-bring-forward e-icons",
},
{
id: "commonSendBackward",
text: "Send Backward",
items: [],
iconCss: "e-send-backward e-icons",
},
],
separator: false,
iconCss: "e-order e-icons",
url: "",
},
],
showCustomMenuOnly: true,
},
height: "100%",
width: "100%",
enablePersistence: false,
scrollSettings: {
viewPortWidth: 1608,
viewPortHeight: 809,
currentZoom: 1,
horizontalOffset: 0,
verticalOffset: 0,
padding: { left: 0, right: 0, top: 0, bottom: 0 },
scrollLimit: "Diagram",
canAutoScroll: false,
},
rulerSettings: {
showRulers: false,
horizontalRuler: { orientation: "Horizontal", arrangeTick: null },
verticalRuler: { orientation: "Vertical", arrangeTick: null },
},
layout: {
type: "None",
enableAnimation: true,
connectionPointOrigin: "SamePoint",
arrangement: "Nonlinear",
enableRouting: false,
},
snapSettings: {
constraints: 31,
gridType: "Lines",
verticalGridlines: {
lineIntervals: [
1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75,
],
snapIntervals: [20],
lineDashArray: "",
lineColor: "lightgray",
},
horizontalGridlines: {
lineIntervals: [
1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75,
],
snapIntervals: [20],
lineDashArray: "",
lineColor: "lightgray",
},
},
dataSourceSettings: {
dataManager: null,
dataSource: null,
crudAction: { read: "" },
connectionDataSource: { crudAction: { read: "" } },
},
mode: "SVG",
layers: [
{
objects: ["stockerU8mZS", "stockerF9iBs"],
id: "default_layer",
visible: true,
lock: false,
zIndex: 0,
objectZIndex: 1,
},
],
nodes: [
{
shape: { type: "HTML", content: "" },
ports: [],
id: "stockerU8mZS",
width: 70,
height: 70,
style: {
fill: "#ffffff",
strokeColor: "#7DCFC9",
gradient: { type: "None" },
strokeWidth: 1,
strokeDashArray: "",
opacity: 1,
textOverflow: "Wrap",
},
container: null,
offsetX: 311,
offsetY: 176.875,
visible: true,
horizontalAlignment: "Left",
verticalAlignment: "Top",
backgroundColor: "transparent",
borderColor: "none",
borderWidth: 0,
rotateAngle: 0,
pivot: { x: 0.5, y: 0.5 },
margin: {},
flip: "None",
wrapper: {
actualSize: { width: 70, height: 70 },
offsetX: 311,
offsetY: 176.875,
},
constraints: 5240814,
tooltip: {
content: "stocker",
showTipPointer: true,
width: "auto",
height: "auto",
relativeMode: "Object",
openOn: "Auto",
},
previewSize: {},
dragSize: {},
zIndex: 0,
annotations: [
{
id: "ERHAT",
content: "",
type: "Shape",
visibility: true,
constraints: 120,
horizontalAlignment: "Left",
verticalAlignment: "Bottom",
offset: { x: 0, y: 0 },
style: {
strokeWidth: 0,
strokeColor: "transparent",
fill: "transparent",
bold: true,
textWrapping: "WrapWithOverflow",
color: "black",
whiteSpace: "CollapseSpace",
fontFamily: "Arial",
fontSize: 12,
italic: false,
opacity: 1,
strokeDashArray: "",
textAlign: "Center",
textOverflow: "Wrap",
textDecoration: "None",
},
addInfo: {},
height: 20,
width: 70,
margin: { bottom: 0, left: 0, right: 0, top: 0 },
rotateAngle: 0,
annotationType: "String",
hyperlink: {
link: "",
hyperlinkOpenState: "NewTab",
content: "",
textDecoration: "None",
},
},
],
isExpanded: true,
expandIcon: { shape: "None" },
fixedUserHandles: [],
flipMode: "All",
addInfo: {
id: "",
shapeType: "stocker",
equipementId: "",
factoryId: "",
shopId: "",
areaId: "",
bayId: "",
floorId: "",
vendorId: "",
controllerId: "",
equipmentType: "",
subEquipmentType: "N/A",
handleCommandYN: "N",
maxStorageRate: 100,
minStorageRate: 100,
maxTransportCount: 0,
equipmentAlias: "",
description: "",
misc: {
id: "",
customId: "",
shapeType: "stocker",
isLabel: true,
isLabelIcon: false,
labelText: "STOCKER222",
textDecoration: "Underline",
fontWeight: true,
fontItalic: true,
color: "#d50101ff",
fontSize: 14,
fill: "#eb7d0fff",
strokeWidth: 3,
strokeColor: "#b82c2cff",
strokeDash: "dotted",
opacity: 0.5,
},
isEquipment: true,
isUnit: false,
annotations: {},
},
inEdges: [],
outEdges: [],
parentId: "",
processId: "",
umlIndex: -1,
isPhase: false,
isLane: false,
},
{
shape: { type: "HTML", content: "" },
ports: [],
id: "stockerF9iBs",
width: 70,
height: 70,
style: {
fill: "#ffffff",
strokeColor: "#7DCFC9",
gradient: { type: "None" },
strokeWidth: 1,
strokeDashArray: "",
opacity: 1,
textOverflow: "Wrap",
},
container: null,
offsetX: 500,
offsetY: 271.875,
visible: true,
horizontalAlignment: "Left",
verticalAlignment: "Top",
backgroundColor: "transparent",
borderColor: "none",
borderWidth: 0,
rotateAngle: 0,
pivot: { x: 0.5, y: 0.5 },
margin: {},
flip: "None",
wrapper: {
actualSize: { width: 70, height: 70 },
offsetX: 500,
offsetY: 271.875,
},
constraints: 5240814,
tooltip: {
content: "stocker",
showTipPointer: true,
width: "auto",
height: "auto",
relativeMode: "Object",
openOn: "Auto",
},
previewSize: {},
dragSize: {},
zIndex: 1,
annotations: [
{
id: "RKCfD",
content: "",
type: "Shape",
visibility: true,
constraints: 120,
horizontalAlignment: "Left",
verticalAlignment: "Bottom",
offset: { x: 0, y: 0 },
style: {
strokeWidth: 0,
strokeColor: "transparent",
fill: "transparent",
bold: true,
},
addInfo: {},
height: 20,
width: 70,
margin: { bottom: 0, left: 0, right: 0, top: 0 },
template:
"<div class='annotation_align'><i class='e-icons e-medium e-repeat'></i><span style='font-weight: bold;'>STOCKER</span></div>",
rotateAngle: 0,
},
],
isExpanded: true,
expandIcon: { shape: "None" },
fixedUserHandles: [],
flipMode: "All",
addInfo: {
id: "",
shapeType: "stocker",
equipementId: "",
factoryId: "",
shopId: "",
areaId: "",
bayId: "",
floorId: "",
vendorId: "",
controllerId: "",
equipmentType: "",
subEquipmentType: "N/A",
handleCommandYN: "N",
maxStorageRate: 100,
minStorageRate: 100,
maxTransportCount: 0,
equipmentAlias: "",
description: "",
misc: {
id: "",
customId: "",
shapeType: "stocker",
isLabel: true,
isLabelIcon: true,
labelText: "STOCKER",
textDecoration: "none",
fontWeight: false,
fontItalic: false,
color: "#000000",
fontSize: 12,
fill: "#faf0e6",
strokeWidth: 1,
strokeColor: "#555555",
strokeDash: "solid",
opacity: 1,
},
isEquipment: true,
isUnit: false,
annotations: {},
},
inEdges: [],
outEdges: [],
parentId: "",
processId: "",
umlIndex: -1,
isPhase: false,
isLane: false,
},
],
connectors: [],
pageSettings: {
orientation: "Landscape",
height: null,
width: null,
background: { source: "", color: "transparent" },
showPageBreaks: false,
fitOptions: { canFit: false },
boundaryConstraints: "Infinity",
},
selectedItems: {
nodes: [],
connectors: [],
wrapper: null,
constraints: 16382,
selectedObjects: [],
userHandles: [],
rotateAngle: 0,
},
basicElements: [],
tooltip: { content: "" },
commandManager: { commands: [] },
tool: 3,
bridgeDirection: "Top",
diagramSettings: { inversedAlignment: true },
customCursor: [],
version: 17.1,
};
Hi,
After reviewing the data you've provided, we noticed that although you're loading it using loadDiagram, it's essential to specify the node html template at the application level. If you haven't defined this html template, rendering won't occur. Regarding the exception, if you haven't defined at the sample level, the data won't load, but it shouldn't trigger an exception. Consequently, we've created a bug task solely for addressing the exception that occurred.
Issue: Exception Throws When Loading Data Without Defining Node Template at Application Level
We have logged the bug task for the exception alone. We will fix this issue and provide the patch on 14th may,2024 weekly patch release.
Feedback Link: Exception Throws When Loading Data Without Defining Node Template at Application Level in Vue | Feedback Portal (syncfusion.com)
Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.
Regards,
Sivaranjith
This is because shape: { type: "HTML", content: ""} does not define content.
The reason why I didn't define it is because I used dom by controlling it directly.
I found out the cause and solved it.
Hi,
We're pleased to hear that you've resolved the issue independently. It's
crucial to specify the node HTML template at the application level. Without
this template defined, rendering won't take place. Additionally, you have the
option to pass HTML as a string for nodes. As for the exception, if it hasn't
been defined at the sample level, the data won't load, consequently triggering
an exception
Regards,
Moulidharan
- 3 Replies
- 3 Participants
-
AS aim Systems
- Apr 25, 2024 12:07 AM UTC
- Apr 26, 2024 12:12 PM UTC
