We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Native node appears too small in palette

Thread ID:

Created:

Updated:

Platform:

Replies:

117598 Nov 13,2014 06:50 PM Nov 14,2014 06:01 AM ASP.NET Web Forms 1
loading
Tags: Diagram
Jim Jacobs
Asked On November 13, 2014 06:50 PM

Hi,

I asked this before, but it was probably lost in a rather long thread.
I'm using the svg and code behind shown below.
The issue is that the shape does not fill the palette item and looks rather small - see attached screenshot.
What do I need to do to ensure that the shape fills as much of the palette item as possible?

Also, is it possible to show a different image in the palette than what gets dropped on the canvas?
For example, what if we only showed the image in the upper left corner of the shape in the attachment, rather than the whole shape?

Any suggestions much appreciated.

Jim

The SVG in the aspx page:

<svg
        xmlns="http://www.w3.org/2000/svg"
        width="137"
        height="81"
        style="display: none">
        <g id="ScriptTask" fill="#fff">
            <rect
                width="136.20007"
                height="80"
                ry="9.5970793"
                x="0.40625"
                y="0.40625"
                id="rectangle"
                style="stroke: #58595b; stroke-width: 1; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none" />
            <g
                transform="translate(-13.592845,-13.383725)"
                id="Scritpt_icon">
                <polygon
                    points="282.708,278.453 285.715,274.802 287.393,272.81 288.196,272.81 304.137,272.81 301.899,276.305 301.025,278.857 300.921,280.465 301.62,282.31 302.809,284.695 304.137,286.555 304.661,288.051 303.893,290.1 301.131,293.363 299.196,295.111 283.093,295.111 284.142,293.225 286.25,288.89 285.226,285.629 283.442,282.994 282.289,280.465 "
                    transform="translate(-257.23333,-247.97111)"
                    id="polygon"
                    style="fill: #ffffff" />
                <path
                    d="m 45.527667,25.528837 c -1.269,2.068 -2.731,4.82 -2.731,6.5 0,1.611 1.109,3.242 2.283,4.969 0.745,1.095 1.672,2.457 1.72,3.112 -0.054,0.883 -2.389,3.808 -5.098,6.419 h -14.584 c 1.313,-2.094 2.803,-4.884 2.68,-6.607 -0.106,-1.486 -1.139,-3.004 -2.232,-4.611 -0.744,-1.095 -1.764,-2.594 -1.764,-3.271 0.069,-0.877 2.408,-3.844 5.109,-6.51 h 14.617 m 2.768,-1.501 h -17.995 c 0,0 -6,5.764 -6,8 0,2.236 3.841,5.77 4,8 0.159,2.23 -4,8 -4,8 h 18 c 0,0 6.154,-5.77 5.995,-8 -0.159,-2.23 -4,-5.764 -4,-8 0,-2.236 4,-8 4,-8 l 0,0 z"
                    id="path6536-2"
                    style="fill: #58595b" />
                <rect
                    width="12.027"
                    height="1.367"
                    x="29.935677"
                    y="29.114883"
                    id="rect6538-7"
                    style="fill: #58595b" />
                <rect
                    width="12.027"
                    height="1.368"
                    x="29.935677"
                    y="33.654922"
                    id="rect6540-3"
                    style="fill: #58595b" />
                <rect
                    width="12.027"
                    height="1.368"
                    x="29.935677"
                    y="37.657974"
                    id="rect6542-1"
                    style="fill: #58595b" />
                <rect
                    width="12.027"
                    height="1.368"
                    x="29.935677"
                    y="42.128922"
                    id="rect6544-0"
                    style="fill: #58595b" />
            </g>
        </g>
    </svg>


The code behind:

        Node scriptTask = new Node();
        scriptTask.Shape = new Shape(Shapes.Native);
        scriptTask.Shape.ContentId = "ScriptTask";
        scriptTask.Name = "Script Task";
        scriptTask.OffsetX = 150;
        scriptTask.OffsetY = 250;
        scriptTask.Width = 137;
        scriptTask.Height = 81;

The palette item width and height values are set to 45.

Attachment: Syncfusion__Swimlane_Palette_Shape_Issue2_ca92f0f3.zip

Shyam G [Syncfusion]
Replied On November 14, 2014 06:01 AM

Hi Jim

 

Thanks for using Syncfusion products.

 

Query

Response

The issue is that the shape does not fill the palette item and looks rather small - see attached screenshot.
What do I need to do to ensure that the shape fills as much of the palette item as possible?

Please note that the node’s rendering into the palette on the basis of node’s “Width” and “Height” properties and symbolPalette’s “PaletteItemWidth” and “PaletteItemHeight” properties. The “Width” and “Height” properties for the node that you have provided is greater than the symbolPalette’s “PaletteItemWidth” and “PaletteItemHeight” properties so that it is translated to very small size and appends in the palette. We suggest you to set the node’s “Width” and “Height” properties as follows so that the node fits correctly into the palette.

 

Here is the code snippet

 

     Node node2 = new Node();

     node2.Name = "natives";    

     node2.Width = 40;

     node2.Height = 40;

     node2.OffsetX = node2.Width/2;

     node2.OffsetY = node2.Height/2;

 

We suggest you to use "drop" event to change the Node's "Width" and "Height" properties and this event triggered when the node is dropped inside the diagram area(canvas).

Here is the code snippet

 

DiagramContent.ClientDrop = "drop";

 

function drop(args) {

if (args.element.shape) {

        var node = args.element;

        node.width = 100;

        node.height = 100;

}

 

Also, is it possible to show a different image in the palette than what gets dropped on the canvas?
For example, what if we only showed the image in the upper left corner of the shape in the attachment, rather than the whole shape?

Please note that the node’s preview in the palette will be same as we drop inside the canvas and it is default behavior of our control. Currently we don’t have support to render a different preview in the canvas compared to palette during drag and drop. However, we have achieved your requirement using the “add Info” property of node and “drop” event.

 

As per your requirement, we set an id of group child element(upper left corner shape) to the node2.Shape.ContentIdso that it renders the group child element(upper left corner shape) in the palette.

 

We have set an id of group parent element(whole shape) to the “add info” property of the node. When an element(upper left corner shape) is drag and dropped onto the canvas, we use “drop” event to get the id of  group parent element(whole shape) and set to the node’s content and will update the node using updateNode API.

 

Please see the code snippet below and sample is attached below

 

  SVG Content:

 

<svg xmlns="http://www.w3.org/2000/svg" width="137" height="81" style="display: none">

        <g id="ScriptTask" fill="#fff">

            <rect width="136.20007" height="80" ry="9.5970793" x="0.40625" y="0.40625"id="rectangle" style="stroke: #58595b; stroke-width: 1; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none" />

             <g id="sorrytask" transform="translate(-13.592845,-13.383725)">

                <polygon points="282.708,278.453 285.715,274.802 287.393,272.81 288.196,272.81 304.137,272.81 301.899,276.305 301.025,278.857 300.921,280.465 301.62,282.31 302.809,284.695 304.137,286.555 304.661,288.051 303.893,290.1 301.131,293.363 299.196,295.111 283.093,295.111 284.142,293.225 286.25,288.89 285.226,285.629 283.442,282.994 282.289,280.465 " transform="translate(-180.23333,-190.97111)" id="polygon" style="fill: #ffffff" />

                <path

                    d="m 45.527667,25.528837 c -1.269,2.068 -2.731,4.82 -2.731,6.5 0,1.611 1.109,3.242 2.283,4.969 0.745,1.095 1.672,2.457 1.72,3.112 -0.054,0.883 -2.389,3.808 -5.098,6.419 h -14.584 c 1.313,-2.094 2.803,-4.884 2.68,-6.607 -0.106,-1.486 -1.139,-3.004 -2.232,-4.611 -0.744,-1.095 -1.764,-2.594 -1.764,-3.271 0.069,-0.877 2.408,-3.844 5.109,-6.51 h 14.617 m 2.768,-1.501 h -17.995 c 0,0 -6,5.764 -6,8 0,2.236 3.841,5.77 4,8 0.159,2.23 -4,8 -4,8 h 18 c 0,0 6.154,-5.77 5.995,-8 -0.159,-2.23 -4,-5.764 -4,-8 0,-2.236 4,-8 4,-8 l 0,0 z"

                    id="path6536-2"

                    style="fill: #58595b" />

                <rect width="12.027" height="1.367" x="29.935677" y="29.114883" id="rect6538-7" style="fill: #58595b" />

                <rect width="12.027" height="1.368" x="29.935677" y="33.654922" id="rect6540-3" style="fill: #58595b" />

                <rect width="12.027" height="1.368" x="29.935677" y="37.657974"id="rect6542-1" style="fill: #58595b" />

                <rect width="12.027" height="1.368" x="29.935677" y="42.128922" id="rect6544-0" style="fill: #58595b" />

            </g>

        </g>

    </svg> 

 

 

    Native node:

 

    Node node2 = new Node();

    node2.Name = "natives";

    node2.Shape = new Shape(Shapes.Native);

    node2.Shape.ContentId = "sorrytask";

    Dictionary<string, object> addInfo = new Dictionary<string, object>();

    addInfo.Add("Id", "ScriptTask");

    node2.AddInfo = addInfo;

           

 

 Here is the code snippet to trigger drop event.

 

 DiagramContent.ClientDrop = "drop";

 

    function drop(args) {

        if (args.element.shape) {

         var node = args.element;

           if (node.addInfo.Id) {

           //gets the id of SVG element

            var svg = document.getElementById(node.addInfo.Id);

            var child = svg.lastElementChild.firstElementChild;

            child.setAttribute('transform', 'translate(-257.23333,-247.97111)');          

            //update the node

            diagram.updateNode(node.name, { shape: { content: svg, type: "native" } });

        }

    }

}

 

 

 

Please let me know if any concerns.

 

Regards,

Shyam G


Attachment: DiagramBuilder_sample2065910574_(4)_f4c6b15c.zip

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;