Custom composite shape with multiple paths?

[Lloyd]

Is there a way to create a custom shape using RADDiagram based on a composite SVG (i.e. one having multiple PATHs and FILLs)?  I am creating a graphical workflow builder utility and would like to have a palette of detailed, multi-color objects for users to work with.I have attached a sample image of one of these objects whose SVG code is as follows:

<svg xmlns="http://www.w3.org/2000/svg" width="54.7" height="54.7" viewBox="0 0 54.7 54.7">
    <circle cx="27.4" cy="27.4" r="27.4" fill="#33b5aa" />
    <rect x="10.3" y="18.9" width="34.1" height="25.53" fill="#fff" />
    <rect x="10.3" y="12.5" width="34.1" height="6.39" fill="#dc4f71" />
    <rect x="16.5" y="10.3" width="2.7" height="4.33" fill="#fff" />
    <rect x="35.6" y="10.3" width="2.7" height="4.33" fill="#fff" />
    <rect x="14" y="24.4" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="19.4" y="24.4" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="24.7" y="24.4" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="30" y="24.4" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="35.4" y="24.4" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="14" y="29.8" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="19.4" y="29.8" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="24.7" y="29.8" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="30" y="29.8" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="35.4" y="29.8" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="14" y="35.1" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="19.4" y="35.1" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="24.7" y="35.1" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="30" y="35.1" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <rect x="35.4" y="35.1" width="5.3" height="5.33" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <circle cx="38.4" cy="40.4" r="7.4" fill="#dc4f71" />
    <path d="M41.9,38.8c-.2-.2-.3-.2-.5,0l-4.1,4.1-1.9-2a.3.3,0,0,0-.4.4l2.1,2.1h.2c.1,0,.2,0,.2-.1s.1,0,.1-.1l4.3-4.2C42,39,42,38.9,41.9,38.8Z" fill="#fff" />
</svg>

 

If it makes things easier, the above code can be simplified to just PATHs if that helps:

<svg xmlns="http://www.w3.org/2000/svg" width="54.7" height="54.7" viewBox="0 0 54.7 54.7">
    <path d="M27.4,0A27.4,27.4,0,1,1,0,27.4,27.3,27.3,0,0,1,27.4,0Z" fill="#33b5aa" />
    <path d="M10.3,18.9H44.4V44.4H10.3Z" fill="#fff" />
    <path d="M10.3,12.5H44.4v6.4H10.3Z" fill="#dc4f71" />
    <path d="M16.5,10.3h2.7v4.3H16.5Z" fill="#fff" />
    <path d="M35.6,10.3h2.6v4.3H35.6Z" fill="#fff" />
    <path d="M14,24.4h5.4v5.4H14Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M19.4,24.4h5.3v5.4H19.4Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M24.7,24.4H30v5.4H24.7Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M30,24.4h5.4v5.4H30Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M35.4,24.4h5.3v5.4H35.4Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M14,29.8h5.4v5.3H14Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M19.4,29.8h5.3v5.3H19.4Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M24.7,29.8H30v5.3H24.7Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M30,29.8h5.4v5.3H30Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M35.4,29.8h5.3v5.3H35.4Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M14,35.1h5.4v5.3H14Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M19.4,35.1h5.3v5.3H19.4Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M24.7,35.1H30v5.3H24.7Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M30,35.1h5.4v5.3H30Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M35.4,35.1h5.3v5.3H35.4Z" fill="none" stroke="#dc4f71" stroke-miterlimit="10" stroke-width="0.75" />
    <path d="M31.2,38.7a7.4,7.4,0,1,1,5.5,9A7.4,7.4,0,0,1,31.2,38.7Z" fill="#dc4f71" />
    <path d="M41.9,39.2l-4.3,4.2c0,.1,0,.1-.1.1s-.1.1-.2.1h-.2L35,41.3a.3.3,0,0,1,.4-.4l1.9,2,4.1-4.1c.2-.2.3-.2.5,0S42,39,41.9,39.2Z" fill="#fff" />
</svg>

 

Thanks.

[Vessy]

Hi Lloyd,

You can create complex shapes by utilizing the Visual template functionality of RadDiagram (and the Kendo Ui diagram widget, respectively):
https://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/functionality/shape-templates

For example:

var visualTemplate = function (options) {
    var diagram = kendo.dataviz.diagram;

    var group = new diagram.Group({
        autoSize: true
    });

    group.append(new diagram.Circle({ center: { x: 27.4, y: 27.4 }, radius: 27.4, fill: "#33b5aa" }));
    group.append(new diagram.Rectangle({ x: 10.3, y: 18.9, width: 34.1, height: 25.53, fill:"#fff" }));
    //etc.
    //group.append(new diagram.Path({ data: "M27.4,0A27.4,27.4,0,1,1,0,27.4,27.3,27.3,0,0,1,27.4,0Z", fill: "#33b5aa" }));

    return group;
};

You can find detailed API of all available kendo.dataviz.diagram objects the Kendo UI Diagram API reference:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/circle

Regards,
Vessy
Progress Telerik

[Lloyd]

Vessy,

 

Thanks for the informative response.  That said, are there any examples you could point me to that detail how to drag and drop different complex shapes from a tool palette to RADDiagram?  I have reviewed examples showing how to drag and drop simple shapes and also how to load complex shapes (not via drag and drop) but have not yet figured out how to combine the two!  It appears that I need to somehow programmatically use different visual templates for each complex shape - is that correct?

 

Thanks in advance.

[Marin Bratanov]

Hello Lloyd,

I suggest you review the following sample application that shows one way you can implement a toolbox of shapes and add them via drag-and-drop to the diagram: https://demos.telerik.com/aspnet-ajax/sample-applications/diagram-app/. You can download its source so you can examine it and run it locally, or even reuse it.

Regards,

Marin Bratanov
Progress Telerik

[Lloyd]

Marin,

Thanks for the reply.  While I have already downloaded and examined the DiagramApp sample you alluded to, it doesn't address the specific problem I am trying to tackle.  While the DiagramApp sample loads different images from a shape palette, each shape is "simple" - they are comprised of one-and-only-one PATH statement.  I am trying to develop a drag-and-drop solution whereby you can drag complex SVG images (i.e. images comprised of multiple PATH, RECT, CIRCLE, ELLIPSE, FILL, COLOR, etc... statements/attributes layered upon one another to create a composite image) to to RADDiagram container.  I know how to instruct RADDiagram to load such an image using a visual template containing multiple SVG statements appended to one another using "group.append" but I haven't seen an example whereby someone can do that via drag-and-drop.  The only way I can conceive of doing what I want is to have the shape that is being dragged into the RADDiagram contain a "type" attribute that when dropped on the target it is interrogated and the complex shape is dynamically created at the destination end using using Javascript and the Kendo Dataviz API.  Does that make sense?  Thanks.

Lloyd

[Vessy]

Hi Lloyd,

I am attaching a modified version of the implemented by us Diagramming Sample App, whre you can see how to drag-and-drop a shape with custom Visual template. I hope it will be useful for you as a base for the target custom implementation.

Regards,
Vessy
Progress Telerik

[Lloyd]

Vessy,

Again thank you for your prompt reply and assistance.  I am very impressed with the level of support Telerik provides to its customers.

The example you sent does indeed address what I have been trying to do - thanks.  After getting the example code to work however, I ran into what may be a major limitation with respect to what I'm trying to develop.  It appears that the built-in diagram.save method does not support complex shapes.  Is this correct?  Unless I have screwed something up somewhere, the save method appears to be saving a generic rectangle instead of my complex shape (see attached image).

- Lloyd Charlier

[Vessy]

Hi Lloyd,

I am really glad the provided sample was useful for you.

I examined the eporting problem further and it leads to be related to the way the provided by the diagram JSON object is serialized. It seems that the attached JavaScritp handlers are removed both after the JSON.stringify(diagram.save()) and the Sys.Serialization.JavaScriptSerializer.serialize(diagram.save()) are used. The possible options I can suggest you in such case is either to store the JSON object directly (diagram.save()), or implement your own shape visual persisting logic, so you can restore the visual of the shape depending on its ID.

On a side note, I would like to kindly ask to open separate threads for each new issue, so we can keep the threads consistant.

Regards,
Vessy
Progress Telerik