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.
Syncfusion Feedback

How to allow users to import their own shapes into a palette

Thread ID:

Created:

Updated:

Platform:

Replies:

117512 Nov 1,2014 10:07 PM UTC Nov 13,2014 01:29 PM UTC ASP.NET Web Forms 17
loading
Tags: Diagram
Jim Jacobs
Asked On November 1, 2014 10:07 PM UTC

Hi,

We'd like to allow users to import their own shapes into a palette - like "My Palette".
Is there any way to do this?
What format would the user need to provide - I'm assuming SVG.

Any suggestions much appreciated.

Jim

Shyam G [Syncfusion]
Replied On 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

Shyam G [Syncfusion]
Replied On 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

Jim Jacobs
Replied On 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:
  1. User clicks on something like File / Upload Shape
  2. A dialog prompts them for the location of the SVG file
  3. The file content is uploaded and the svg stored in a database
  4. 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


Jim Jacobs
Replied On 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

Shyam G [Syncfusion]
Replied On 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--%>

    <svg style="display:none">

        <g id= "Compensation">

             <rect x="9.241" y="9.494" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.7934 30.5282)" fill="#F7EC32" width="42.426" height="42.426"/>

             <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>

            </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

Jim Jacobs
Replied On 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

Shyam G [Syncfusion]
Replied On 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

Jim Jacobs
Replied On 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

Shyam G [Syncfusion]
Replied On 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--%>

    <svg style="display:none">

        <g id= "Compensation">

             <rect x="9.241" y="9.494" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.7934 30.5282)" fill="#F7EC32" width="42.426" height="42.426"/>

             <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>

            </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

Jim Jacobs
Replied On 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

Jim Jacobs
Replied On 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

Shyam G [Syncfusion]
Replied On 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

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

  <g id="layers" transform="translate(50,50)">

    <rect height="128" width="128" fill="#ECFFE4" />

    <g transform="translate(39,39)">

      <path id="path1" height="50" width="50" transform="rotate(4,25,25) translate(50,50) scale(-0.0651890482398957,-0.0651890482398957)  " fill="#0A0909" d="M383.482,203.57C284.07,203.57 203.534,284.142 203.534,383.554 203.534,482.93 284.07,563.502 383.482,563.502 482.894,563.502 563.431,482.93 563.431,383.554 563.431,284.142 482.894,203.57 383.482,203.57z M338.073,0L428.927,0 428.927,117.641C469.52,124.544,507.055,140.471,539.377,163.41L622.574,80.1771 686.823,144.462 603.627,227.659C626.565,259.982,642.457,297.481,649.396,338.073L767,338.073 767,428.963 649.432,428.963C642.492,469.52,626.565,507.091,603.627,539.378L686.823,622.574 622.538,686.788 539.377,603.626C507.055,626.601,469.555,642.528,428.927,649.432L428.927,767 338.073,767 338.073,649.432C297.409,642.528,259.909,626.601,227.587,603.626L144.426,686.788 80.2128,622.574 163.374,539.378C140.399,507.091,124.508,469.591,117.569,428.963L0,428.963 0,338.073 117.569,338.073C124.508,297.481,140.435,259.982,163.374,227.659L80.1766,144.462 144.426,80.2133 227.623,163.41C259.909,140.471,297.445,124.544,338.073,117.641z" />

    </g>

  </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


Shyam G [Syncfusion]
Replied On 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

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

  <g id="layers" transform="translate(50,50)">

    <rect height="128" width="128" fill="#ECFFE4" />

    <g transform="translate(39,39)">

      <path id="path1" height="50" width="50" transform="rotate(4,25,25) translate(50,50) scale(-0.0651890482398957,-0.0651890482398957)  " fill="#0A0909" d="M383.482,203.57C284.07,203.57 203.534,284.142 203.534,383.554 203.534,482.93 284.07,563.502 383.482,563.502 482.894,563.502 563.431,482.93 563.431,383.554 563.431,284.142 482.894,203.57 383.482,203.57z M338.073,0L428.927,0 428.927,117.641C469.52,124.544,507.055,140.471,539.377,163.41L622.574,80.1771 686.823,144.462 603.627,227.659C626.565,259.982,642.457,297.481,649.396,338.073L767,338.073 767,428.963 649.432,428.963C642.492,469.52,626.565,507.091,603.627,539.378L686.823,622.574 622.538,686.788 539.377,603.626C507.055,626.601,469.555,642.528,428.927,649.432L428.927,767 338.073,767 338.073,649.432C297.409,642.528,259.909,626.601,227.587,603.626L144.426,686.788 80.2128,622.574 163.374,539.378C140.399,507.091,124.508,469.591,117.569,428.963L0,428.963 0,338.073 117.569,338.073C124.508,297.481,140.435,259.982,163.374,227.659L80.1766,144.462 144.426,80.2133 227.623,163.41C259.909,140.471,297.445,124.544,338.073,117.641z" />

    </g>

  </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

Jim Jacobs
Replied On 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

Shyam G [Syncfusion]
Replied On 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

 

<svg style="display:none"

        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>    

           </g> 

         </g>

    </svg>

Please let me know if any concerns.

Regards,

Shyam G


Jim Jacobs
Replied On 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

Shyam G [Syncfusion]
Replied On 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


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.

Warning Icon 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.Close Icon

;