How to allow users to import their own shapes into a palette | ASP.NET Web Forms Forums

SG Shyam G Syncfusion Team November 3, 2014 07:28 AM UTC

Hi Sam

Thanks for using syncfusion products.

We are glad to inform you that we have created a simple sample to represent how to render palette and attached below

Here is the code snippet to render palette.

<ej:SymbolPalette ID="symbolpalette" runat="server">

</ej:SymbolPalette>

//add palette to palettes collection

symbolpalette.Model.Palettes.Add(GenerateBasicShapes());

symbolpalette.Model.Palettes.Add(GenerateConnectors());

public Palette GenerateBasicShapes()

{

Palette basicShapes = new Palette("Basic Shapes");

basicShapes.Expanded = true;

//node creation

Node node8 = new Node();

node8.Name = "Ellipse1";

node8.Width = 50;

node8.Height = 50;

node8.OffsetX = 400;

node8.OffsetY = 200;

node8.Shape = new Shape(Shapes.Ellipse);

basicShapes.AppendChild(node8);

return basicShapes;

}

public Palette GenerateConnectors()

{

Palette connectors = new Palette("Connectors");

connectors.Expanded = false;

//connector creation

Connector connector = new Connector();

connector.Name = "Connector";

Segment seg = new Syncfusion.JavaScript.DataVisualization.Models.Diagram.Segment(Segments.Orthogonal);

connector.Segments.Add(seg);

connector.SourcePoint = new DiagramPoint(0, 0);

connector.TargetPoint = new DiagramPoint(40, 40);

connector.LineWidth = 2;

connectors.AppendChild(connector);

return connectors;

}

Please let me know if any concern.

Regards,

Shyam G

Attachment: DiagramBuilder_sample2065910574_fbd6bc6e.zip

SG Shyam G Syncfusion Team November 3, 2014 08:42 AM UTC

Hi Jim

Please ignore our previous update.

We are glad to inform you that we have created a simple sample to represent how to render palette and attached below

Here is the code snippet to render palette.

<ej:SymbolPalette ID="symbolpalette" runat="server">

</ej:SymbolPalette>

//add palette to palettes collection

symbolpalette.Model.Palettes.Add(GenerateBasicShapes());

symbolpalette.Model.Palettes.Add(GenerateConnectors());

public Palette GenerateBasicShapes()

{

Palette basicShapes = new Palette("Basic Shapes");

basicShapes.Expanded = true;

//node creation

Node node8 = new Node();

node8.Name = "Ellipse1";

node8.Width = 50;

node8.Height = 50;

node8.OffsetX = 400;

node8.OffsetY = 200;

node8.Shape = new Shape(Shapes.Ellipse);

basicShapes.AppendChild(node8);

return basicShapes;

}

public Palette GenerateConnectors()

{

Palette connectors = new Palette("Connectors");

connectors.Expanded = false;

//connector creation

Connector connector = new Connector();

connector.Name = "Connector";

Segment seg = new Syncfusion.JavaScript.DataVisualization.Models.Diagram.Segment(Segments.Orthogonal);

connector.Segments.Add(seg);

connector.SourcePoint = new DiagramPoint(0, 0);

connector.TargetPoint = new DiagramPoint(40, 40);

connector.LineWidth = 2;

connectors.AppendChild(connector);

return connectors;

}

Please let me know if any concern.

Regards,

Shyam G

Attachment: DiagramBuilder_sample2065910574_44f3ed7d.zip

JJ Jim Jacobs November 3, 2014 04:44 PM UTC

Hi,

I think you're missing question.
I understand how to create a palette.
My question was how to allow our users to upload symbols of their own.

Am I correct in assuming the following approach:

User clicks on something like File / Upload Shape
A dialog prompts them for the location of the SVG file
The file content is uploaded and the svg stored in a database
We read the SVG content from the database and add all shapes to a palette called My Palette

I guess I was looking for guidance in the approach.

Does the above make sense?

Jim

JJ Jim Jacobs November 3, 2014 09:28 PM UTC

Hi again,

I have attached a sample svg file that was produced using Inkscape.
How can I best reference this from my palette?
I suppose I can extract various pieces from it and manually build a shape using node.Shape.PathData, but is there a simpler way?

Thanks for any assistance.

Jim

Attachment: ServiceTask_5ecc6598.zip

SG Shyam G Syncfusion Team November 4, 2014 11:42 AM UTC

Hi Jim

Thanks for the update.

Currently we don’t have option to upload SVG file. So we suggest you to use SVG file content in aspx page and render nodes based on the id of SVG content. We have attached sample below. Please see the code snippet below.

Here is the code snippet

<%--create svg content--%>

<g>

<path fill="#231F20" d="M41.726,37.835H19.689L30.707,18.75L41.726,37.835z M21.422,36.835h18.571L30.707,20.75L21.422,36.835z"

/>

</g>

</svg>

//create node with native(svg) content

Node node1 = new Node();

node1.Name = "node1";

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

//id of svg content

node1.Shape.ContentId = "Compensation";

node1.OffsetX = 150;

node1.OffsetY = 250;

node1.Width = 50;

node1.Height = 50;

Diagram1.Model.Nodes.Add(node1);

Please let me know if any concerns.

Regards,

Shyam G

Attachment: svgsample_94f563a2.zip

JJ Jim Jacobs November 6, 2014 08:20 PM UTC

Hi,

Thanks for the reply.
Is there a way to do everything in code behind?
I tried this without success:

node1.Shape.Src = "<svg ... /svg>";

Any suggestions?
Where can I read more about this?

Thanks

Jim

SG Shyam G Syncfusion Team November 7, 2014 07:01 AM UTC

Hi Jim

Thanks for the update.

Please note that the code “node.shape.src” is used to create an image node. We suggest you to use html node to achieve your requirement. You can embed SVG content in the HTML shape node. The following code illustrates how an html node is created. We have attached sample below for your reference.

Here is the code snippet

Node node2 = new Node();

node2.Name = "svgellipse";

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

node2.Shape.Html=HttpUtility.HtmlEncode("<html><body><svg width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\"/></svg></body></html>");

node2.OffsetX = 300;

node2.OffsetY = 250;

node2.Width = 100;

node2.Height = 100;

node2.BorderColor = "transparent";

Diagram1.Model.Nodes.Add(node2);

Please let me know if any concerns.

Regards,

Shyam G

Attachment: WebApplication21_c82fb830.zip

JJ Jim Jacobs November 9, 2014 03:51 PM UTC

Hi Shyam,

Thanks for the sample code, but it seems to behave strangely in my working Diagram Builder.
I've attached several screenshots; some using the snippet you provided and some using my own svg code.

There are several issues.
First, the symbol in the palette appears to be embedded within a larger rectangular area.
You can easily see this when you hover over the symbol.
Second, when you simply click on the shape in the palette it places the shape at its default location, but if you try to drag it elsewhere on the canvas, only a rectangular area is moved - the shape itself remains at a fixed location on the canvas, and is NOT selectable.
Third, if you drag and drop the shape (rather than just clicking on it), the same behaviour is observed as described in the previous item, but now the palette looks different (the rectangular area is now taller and the shape is larger).

The last screenshot shows the result of dragging and dropping my shape several times.
You can see the shapes (placed somehwat randomly), but they are not selectable - only that rectangular shape which is invisible when not selected (actually it seems to be solid white).

Any suggestions on how to proceed?

Thanks

Jim

Attachment: Syncfusion_Palette_Symbol_in_HTML__Issues_c6f0dbc0.zip

SG Shyam G Syncfusion Team November 10, 2014 06:11 AM UTC

Hi Jim

Sorry for the inconvenience.

Please note that the rendering of SVG content is achieved using native node. So we suggest you to define SVG content in aspx page and render nodes based on the id of SVG content. In html nodes, we define only the HTML elements not an SVG and please ignore our previous update as it was wrongly posted. We have attached sample below for your references.

Here is the code snippet to render SVG content using native node

<%--create svg content--%>

<g>

<path fill="#231F20" d="M41.726,37.835H19.689L30.707,18.75L41.726,37.835z M21.422,36.835h18.571L30.707,20.75L21.422,36.835z"

/>

</g>

</svg>

//create node with native(svg) content

Node node1 = new Node();

node1.Name = "node1";

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

//id of svg content

node1.Shape.ContentId = "Compensation";

node1.OffsetX = 150;

node1.OffsetY = 250;

node1.Width = 50;

node1.Height = 50;

Diagram1.Model.Nodes.Add(node1);

Please let me know if any concerns.

Regards,

Shyam G

Attachment: svgsample_5cb96ede.zip

JJ Jim Jacobs November 10, 2014 05:34 PM UTC

Hi Shyam,

Your sample works fine in my application.
However, I am having issues trying to use svg files that I have been provided.
Yes, there seems to be a lot of tags that are not required for simply rendering, but this will display just fine if I open it in my browser (IE).
I have included the file contents directly in my aspx page and used the ContentID to reference it, but I just get a blank placeholder in the palette.

I have attached the aspx page (plus code behind). The svg in question starts at line 48.
I have tried using both the svg ID (svg8191) as well as the first group ID (layer1).
Neither worked.

I really need to get past this challenge before we can get moving with our new diagram builder.

Thanks for your assistance.

Jim

Attachment: DiagramBuilder.aspx_958579fa.zip

JJ Jim Jacobs November 10, 2014 08:41 PM UTC

Hi again,

Further to me last post, I removed the style="display: none" from my inline svg in the aspx and guess what!
The browser is quite happy to render the image, but the palette does not.
The image appears just above the Diagram Builder menu.

I thought this might provide some additional insight into what's going on.

Jim

Attachment: Syncfusion__SVG_On_ASPX_Page__ContentID_Issue_e3ca6fcf.zip

SG Shyam G Syncfusion Team November 11, 2014 01:04 PM UTC

Hi Jim

Thanks for the update.

Please note that we have rendered SVG by defining the following namespace and with SVG standards.

xmlns=http://www.w3.org/2000/svg

xmlns:xlink=http://www.w3.org/1999/xlink

If you are using the namespace like inkscape the diagram would not be rendered. So we suggest you to create an SVG with SVG standards. We have created a simple sample to render SVG content using native node.

Here is the code snippet

</g>

</svg>

//create node with native(svg) content

Node node1 = new Node();

node1.Name = "node1";

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

//id of svg content

node1.Shape.ContentId = "layers";

node1.OffsetX = 150;

node1.OffsetY = 250;

node1.Width = 100;

node1.Height = 100;

Diagram1.Model.Nodes.Add(node1);

Please let me know if any concerns.

Regards,

Shyam G

SG Shyam G Syncfusion Team November 11, 2014 01:10 PM UTC

Hi Jim

please ignore our previous update.

Please note that we have rendered SVG by defining the following namespace and with SVG standards.

xmlns=http://www.w3.org/2000/svg

xmlns:xlink=http://www.w3.org/1999/xlink

If you are using the namespace like inkscape the diagram would not be rendered. So we suggest you to create an SVG with SVG standards. We have created a simple sample to render SVG content using native node.

Here is the code snippet

</g>

</svg>

//create node with native(svg) content

Node node1 = new Node();

node1.Name = "node1";

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

//id of svg content

node1.Shape.ContentId = "layers";

node1.OffsetX = 150;

node1.OffsetY = 250;

node1.Width = 100;

node1.Height = 100;

Diagram1.Model.Nodes.Add(node1);

Please let me know if any concerns.

Regards,

Shyam G

Attachment: svgsamples1_ee8f1980.zip

JJ Jim Jacobs November 11, 2014 04:12 PM UTC

Hi Shyam,

We have tried to clean up our svg but without success.
The code will still render the shape fine in the browser, but it's still blank in the palette.

I am new to svg, so I appreciate the assistance.

Here's what we currently have.
Can you tell us what's wrong with it.

<svg
        xmlns="http://www.w3.org/2000/svg"
        width="150"
        height="100">
        <g
            transform="translate(0,-952.36218)"
            id="layer1">
            <g
                transform="translate(-7.4002114,1.0501586)"
                id="g3241">
                <rect
                    width="136.20007"
                    height="80.200073"
                    ry="9.5970793"
                    x="15"
                    y="962.36218"
                    id="rect7207"
                    style="fill: none; stroke: #58595b; stroke-width: 0.79992712; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none" />
                <g
                    transform="translate(13.154221,956.3659)"
                    id="g4564">
                    <path
                        d="m 33.440006,20.624986 -2.222,-2.223 c -2.328,1.108 -4.94,0.027 -5.805,-2.402 h -3.141 c -0.862,2.43 -3.474,3.511 -5.801,2.402 l -2.223,2.223 c 1.106,2.328 0.024,4.94 -2.404,5.804 v 3.143 c 2.429,0.863 3.511,3.476 2.404,5.804 l 2.223,2.223 c 2.327,-1.108 4.939,-0.027 5.801,2.402 h 3.141 c 0.864,-2.43 3.477,-3.511 5.805,-2.402 l 2.222,-2.223 c -1.106,-2.328 -0.024,-4.94 2.404,-5.804 v -3.143 c -2.428,-0.864 -3.51,-3.476 -2.404,-5.804 z m -9.596,13.466 c -3.358,0 -6.089,-2.733 -6.089,-6.091 0,-3.358 2.731,-6.091 6.089,-6.091 3.361,0 6.093,2.733 6.093,6.091 0,3.358 -2.732,6.091 -6.093,6.091 z"
                        id="path6435"
                        style="fill: #58595b" />
                    <circle
                        cx="255.845"
                        cy="284"
                        r="3"
                        transform="translate(-231.99999,-256.00001)"
                        id="circle6437"
                        style="fill: #58595b" />
                </g>
            </g>
        </g>
    </svg>

Thanks in advance.

Jim

SG Shyam G Syncfusion Team November 12, 2014 06:36 AM UTC

Hi Jim

Thanks for the update.

We are glad to inform you that we have fixed the issue in your SVG content and highlighted the fix with purple color in the code snippet below.

Here is the code snippet

xmlns="http://www.w3.org/2000/svg"

width="150"

height="100">

<g

transform="translate(0,-952.36218)"

id="layer1">

<g

transform="translate(-14.4002114,-962.0501586)"

id="g3241">

<rect

width="136.20007"

height="80.200073"

ry="9.5970793"

x="15"

y="962.36218"

style="fill: none; stroke: #58595b; stroke-width: 0.79992712; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none" />

<g

transform="translate(13.154221,956.3659)"

id="g4564">

<path

d="m 33.440006,20.624986 -2.222,-2.223 c -2.328,1.108 -4.94,0.027 -5.805,-2.402 h -3.141 c -0.862,2.43 -3.474,3.511 -5.801,2.402 l -2.223,2.223 c 1.106,2.328 0.024,4.94 -2.404,5.804 v 3.143 c 2.429,0.863 3.511,3.476 2.404,5.804 l 2.223,2.223 c 2.327,-1.108 4.939,-0.027 5.801,2.402 h 3.141 c 0.864,-2.43 3.477,-3.511 5.805,-2.402 l 2.222,-2.223 c -1.106,-2.328 -0.024,-4.94 2.404,-5.804 v -3.143 c -2.428,-0.864 -3.51,-3.476 -2.404,-5.804 z m -9.596,13.466 c -3.358,0 -6.089,-2.733 -6.089,-6.091 0,-3.358 2.731,-6.091 6.089,-6.091 3.361,0 6.093,2.733 6.093,6.091 0,3.358 -2.732,6.091 -6.093,6.091 z"

id="path6435"

style="fill: #58595b" />

<circle

cx="255.845"

cy="284"

r="3"

transform="translate(-231.99999,-256.00001)"

id="circle6437"

style="fill: #58595b" />

</g>

</svg>

Please let me know if any concerns.

Regards,

Shyam G

JJ Jim Jacobs November 12, 2014 04:58 PM UTC

Hi Shyam,

Thanks for the fix to our svg. The shape now renders in our palette.
But you'll have to excuse me - I'm new to svg.

Can you explain how you determined that the Translate statement needed to be changed.
We have other files that are going to require a similar "conversion" and would appreciate understanding the approach you took.

I have another question, but this post is getting rather long, so I'll create a new one for that.

Thanks for your help

Jim

SG Shyam G Syncfusion Team November 13, 2014 01:29 PM UTC

Hi Jim

Thanks for the update.

Please note that the rendering of elements added in the SVG starts at origin(x:0,Y:0). The translation that you have performed for an group child element is transform="translate(-7.4002114,1.0501586)" which is far away from the group parent element( transform="translate(0,-952.36218)"). So we have adjusted the translation for an group child element as transform="translate(-14.4002114,-962.0501586)" which differs in lesser margin value with parent element(transform="translate(0,-952.36218)").

Please let me know if any concerns.

Regards,

Shyam G