I would like to create the diagram that
This is my dragItem
This is the code for Save and Load JSON
This is my saved JSON
However, after I loaded the saved JSON, it was changed to be like this. (I lost the showing images, and connection is blank)
I try to solve the load JSON problem by using "visualTemplate" like this, but it breaks the diagram
- User can drag & drop the item (Image) into the diagram.
- User can create the connection to link each item.
- User can save the diagram into JSON.
- User can load the diagram from JSON
Now, I can archive the first, second and third requirements. However, I have the problem when I try to load data from JSON. The Images are missing, and the connections also lost. I try to solve the problem by using 'visualTemplate' by setting '<ShapeDefaultsSettings Visual="visualTemplate" />', but it breaks my diagram instead. I have attached my code below.
This is my drag & drop eventfunction
setDropTargetOnDiagram(element) {
$telerik.$(element).kendoDropTarget({
drop:
function
(e) {
var
draggable = e.draggable,
element = e.dropTarget,
diagram = element.getKendoDiagram();
if
(draggable && draggable.hint) {
var
item = draggable.hint.data(
"data"
),
offset = draggable.hintOffset,
point =
new
kendo.dataviz.diagram.Point(offset.left, offset.top),
transformed = diagram.documentToModel(point);
item.id +=
"_"
+ generateUUID();
item.x = transformed.x;
item.y = transformed.y;
var
shape = createCustomShape(item);
diagram.addShape(shape);
}
}
});
}
function
createCustomShape(item) {
var
shape =
new
kendo.dataviz.diagram.Shape(item);
var
image =
new
kendo.dataviz.diagram.Image({
source:
"../Images/Diagram/"
+ item.content.ImageName,
x: 0,
y: 0,
width: item.width,
height: item.height,
stroke: {
width: 0
}
});
var
textBlock =
new
kendo.dataviz.diagram.TextBlock({
text: item.content.CustomText,
color:
"#000"
,
fontSize: 12,
x: item.content.TextX,
y: item.content.TextY
});
shape.visual.append(image);
shape.visual.append(textBlock);
return
shape;
}
This is my dragItem
<
div
class
=
"dragItem"
data-data
=
'{"id": "StartProcess", "content": {"CustomText":"Start", "TextX":"18", "TextY":"70", "ImageName":"64Play.png"}, "width":"64", "height":"64"}'
>
<
asp:Image
ID
=
"imgPersonal"
runat
=
"server"
ImageUrl
=
"~/Images/Diagram/64Play.png"
/>
</
div
>
This is the code for Save and Load JSON
function
saveJSON() {
var
json = diagram.save();
var
jsonStr = Sys.Serialization.JavaScriptSerializer.serialize(json);
var
txtDiagramSave= document.getElementById(
"txtDiagramSave"
);
txtDiagramSave.value = js_beautify(jsonStr);
}
function
loadJSON() {
var
txtDiagramSave= document.getElementById(
"txtDiagramSave"
);
diagram.load(Sys.Serialization.JavaScriptSerializer.deserialize(txtDiagramSave.value));
}
This is my saved JSON
{
"shapes"
: [{
"id"
:
"StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25"
,
"hover"
: {},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"CustomText"
:
"Start"
,
"TextX"
:
"18"
,
"TextY"
:
"70"
,
"ImageName"
:
"64Play.png"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"type"
:
"rectangle"
,
"path"
:
""
,
"autoSize"
:
true
,
"visual"
:
null
,
"x"
: 134,
"y"
: 104,
"minWidth"
: 20,
"minHeight"
: 20,
"width"
: 65,
"height"
: 65,
"editable"
: {
"connect"
:
true
},
"connectors"
: [{
"name"
:
"Top"
,
"description"
:
"Top Connector"
}, {
"name"
:
"Right"
,
"description"
:
"Right Connector"
}, {
"name"
:
"Bottom"
,
"description"
:
"Bottom Connector"
}, {
"name"
:
"Left"
,
"Description"
:
"Left Connector"
}, {
"name"
:
"Auto"
,
"Description"
:
"Auto Connector"
}],
"rotation"
: {
"angle"
: 0
},
"undoable"
:
false
}, {
"id"
:
"Personal_3993f4ff-956e-4d46-a939-18c84fcb4162"
,
"hover"
: {},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"CustomText"
:
"Personal"
,
"TextX"
:
"8"
,
"TextY"
:
"70"
,
"ImageName"
:
"64ManPencil.png"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"type"
:
"rectangle"
,
"path"
:
""
,
"autoSize"
:
true
,
"visual"
:
null
,
"x"
: 295,
"y"
: 99,
"minWidth"
: 20,
"minHeight"
: 20,
"width"
: 65,
"height"
: 65,
"editable"
: {
"connect"
:
true
},
"connectors"
: [{
"name"
:
"Top"
,
"description"
:
"Top Connector"
}, {
"name"
:
"Right"
,
"description"
:
"Right Connector"
}, {
"name"
:
"Bottom"
,
"description"
:
"Bottom Connector"
}, {
"name"
:
"Left"
,
"Description"
:
"Left Connector"
}, {
"name"
:
"Auto"
,
"Description"
:
"Auto Connector"
}],
"rotation"
: {
"angle"
: 0
},
"undoable"
:
false
}],
"connections"
: [{
"from"
: {
"id"
:
"StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25"
},
"to"
: {
"id"
:
"Personal_3993f4ff-956e-4d46-a939-18c84fcb4162"
},
"id"
:
"h4upyHsjPm"
,
"hover"
: {
"stroke"
: {}
},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"color"
:
"#444444"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"startCap"
:
"none"
,
"endCap"
:
"ArrowEnd"
,
"points"
: [],
"stroke"
: {
"width"
: 2,
"color"
:
"#6c6c6c"
},
"selection"
: {
"handles"
: {
"width"
: 8,
"height"
: 8,
"fill"
: {
"color"
:
"white"
},
"stroke"
: {
"color"
:
"#444444"
}
}
}
}]
}
However, after I loaded the saved JSON, it was changed to be like this. (I lost the showing images, and connection is blank)
{
"shapes"
: [{
"id"
:
"StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25"
,
"hover"
: {
"opacity"
: 0.2
},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"color"
:
"#444444"
,
"CustomText"
:
"Start"
,
"TextX"
:
"18"
,
"TextY"
:
"70"
,
"ImageName"
:
"64Play.png"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"type"
:
"rectangle"
,
"path"
:
""
,
"autoSize"
:
true
,
"visual"
:
null
,
"x"
: 134,
"y"
: 104,
"minWidth"
: 20,
"minHeight"
: 20,
"width"
: 65,
"height"
: 65,
"editable"
: {
"connect"
:
true
},
"connectors"
: [{
"name"
:
"Top"
,
"description"
:
"Top Connector"
}, {
"name"
:
"Right"
,
"description"
:
"Right Connector"
}, {
"name"
:
"Bottom"
,
"description"
:
"Bottom Connector"
}, {
"name"
:
"Left"
,
"Description"
:
"Left Connector"
}, {
"name"
:
"Auto"
,
"Description"
:
"Auto Connector"
}],
"rotation"
: {
"angle"
: 0
},
"stroke"
: {
"width"
: 0
},
"fill"
: {
"color"
:
"#4cc5da"
},
"connectorDefaults"
: {
"fill"
: {
"color"
:
"#444444"
},
"stroke"
: {
"color"
:
"white"
},
"hover"
: {
"fill"
: {
"color"
:
"white"
},
"stroke"
: {
"color"
:
"#444444"
}
}
},
"undoable"
:
false
}, {
"id"
:
"Personal_3993f4ff-956e-4d46-a939-18c84fcb4162"
,
"hover"
: {
"opacity"
: 0.2
},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"color"
:
"#444444"
,
"CustomText"
:
"Personal"
,
"TextX"
:
"8"
,
"TextY"
:
"70"
,
"ImageName"
:
"64ManPencil.png"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"type"
:
"rectangle"
,
"path"
:
""
,
"autoSize"
:
true
,
"visual"
:
null
,
"x"
: 295,
"y"
: 99,
"minWidth"
: 20,
"minHeight"
: 20,
"width"
: 65,
"height"
: 65,
"editable"
: {
"connect"
:
true
},
"connectors"
: [{
"name"
:
"Top"
,
"description"
:
"Top Connector"
}, {
"name"
:
"Right"
,
"description"
:
"Right Connector"
}, {
"name"
:
"Bottom"
,
"description"
:
"Bottom Connector"
}, {
"name"
:
"Left"
,
"Description"
:
"Left Connector"
}, {
"name"
:
"Auto"
,
"Description"
:
"Auto Connector"
}],
"rotation"
: {
"angle"
: 0
},
"stroke"
: {
"width"
: 0
},
"fill"
: {
"color"
:
"#4cc5da"
},
"connectorDefaults"
: {
"fill"
: {
"color"
:
"#444444"
},
"stroke"
: {
"color"
:
"white"
},
"hover"
: {
"fill"
: {
"color"
:
"white"
},
"stroke"
: {
"color"
:
"#444444"
}
}
},
"undoable"
:
false
}],
"connections"
: []
}
I try to solve the load JSON problem by using "visualTemplate" like this, but it breaks the diagram
function
visualTemplate(options) {
var
diagram = kendo.dataviz.diagram;
var
g =
new
diagram.Group();
var
dataItem = options.dataItem;
g.append(createCustomShape(dataItem));
return
g;
};