Native node appears too small in palette

[Jim Jacobs]

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]

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.ContentId” so 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