Announcement

Collapse
No announcement yet.

[CLOSED] [Retyped/#42] Recommendations for creating strongly typed SVG elements

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [CLOSED] [Retyped/#42] Recommendations for creating strongly typed SVG elements

    We'll be using SVG extensively in our application and I'm wondering about the best way to create strongly typed SVG elements similar to the HTML elements in Bridge.HTML5. I have posted a simple example of a SVGElement class which can be instantiated and added to the DOM. However, I cannot read/write the ViewBox property through code, even though I have defined in a similar declaration to the Id property, which can be set through code. Can someone people help me understand what I need to do to create strongly typed SVG elements for svg, rect, circle, polygon, etc. that allow for object/node properties to be set through code?

    https://deck.net/ccdc8f04e28cc826c7a47cdc845cfcea

    Thanks,
    Last edited by geoffrey.mcgill; 2018-01-12 @ 10:05 PM.

  • #2
    Hi chartnado,

    I ran your sample, and got the error: "Cannot assign to read only property 'viewBox' of object '#<SVGSVGElement>'. That seems to be correct, since viewBoxis actually an attribute and requires usage of getAttributeand setAttributefunctions.

    You can add template attributes to the property ViewBox to make it working:

    [External]
    [Name("SVGElement")]
    [Convention(Notation.LowerCamelCase)]
    public class SVGElement : Element
    {
        [Template("document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\")")]
        public extern SVGElement();
    
        public string ViewBox
        {
            [Template("{this}.getAttribute('viewBox')")]
            get;
            [Template("{this}.setAttribute('viewBox', {0})")]
            set;
        }
    }
    You may want to take a look at Retyped.dom which is a Bridge binding for DOM API defined here.
    We already added constructor templates for regular HTML classes, but not for SVG classes. That is also possible though.
    Last edited by geoffrey.mcgill; 2018-01-12 @ 10:05 PM.

    Comment


    • #3
      We're going to add the constructor [Template] to SVGElement in Retyped, so you can properly new up an instance. Currently, you must use document.createElement("svg");.

      We will keep this thread updated on our progress. Here's a quick sample using the current Retyped.dom release.

      https://deck.net/f178ca4d604c5a30a617e686ce58c77b

      public class App 
      {
          public static void Main() 
          {
              var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
              svg.id = "test";
      
              svg.setAttribute("viewBox", "0 0 200 200");
      
              Console.WriteLine("Set attribute successful");
      
              document.body.appendChild(svg);
          }
      }
      Last edited by geoffrey.mcgill; 2018-01-12 @ 08:31 PM.

      Comment


      • #4
        Hello Andrey,

        Thank you, that's what I was looking for.

        Comment


        • #5
          An issue for SVG constructor templates has been created:
          https://github.com/Retyped/Retyped/issues/42

          Comment


          • #6
            Hi chartnado,

            Just want to update you on that Retyped.dom issue about SVG elements - it was fixed and the package was updated. So currently any SVG element can be instantiated by calling a constructor, the proper templates are in place.

            Also, we've added support of SVG.js. You might be interested in it.
            A sample project is available in Retyped Demos repository. The live demo can be found here.

            Comment


            • #7
              Thanks Andrey, I'll have a look.

              Comment

              Working...
              X