0

I am trying to integrate snap.svg in to Enyo and having a problem. The code below works, until render() is called. The problem seems to be that generateHtml in HTMLStringDelegate.js doesn't know about the content added by snap.svg and clears out "svg".

Uncomment "this.render();" to see it.

http://jsfiddle.net/Kloodge/g7MLS/2031/

var ready = require('enyo/ready'),
    kind = require('enyo/kind'),
    Toolbar = require('onyx/Toolbar'),
    Application = require('enyo/Application');

ready(function() {
    var MySample = kind({
        name: "MySample",
        paper: null,
        components: [
            {kind: Toolbar, content: "Your sample here."},
            {tag: "svg", name:"svg"}
        ],
        rendered: function(){
            this.inherited(arguments);
            if(!this.paper && this.$.svg.hasNode()){
                this.paper = Snap("#"+this.$.svg.hasNode().id);
                circle = this.paper.circle(10, 10, 10);
                circle.attr({
                    fill: "#bada55",
                    stroke: "#000",
                    strokeWidth: 5,
               });
               //this.render();
            }
        }
    });

    new Application({view: MySample});
});

Is there any way to do this short of adding the content statically to "svg"?

k_hampton
  • 23
  • 3
  • Why are you calling `render()`? – Pre101 Oct 04 '16 at 15:05
  • I'm calling render there in the sample to show that the svg disappears when render is called. It's normally called elsewhere in the project. The fix was to re-create the svg in rendered(). – k_hampton Oct 06 '16 at 14:21
  • Ah, OK. You should almost never call `render()` directly. The framework handles rendering for you in almost all cases. – Pre101 Oct 08 '16 at 21:15

0 Answers0