enyo framework to integrate which raphael

Question

I'm trying to integrate Raphael with enyo.js to create SVG component using Raphael instead of through enyo so i can use some of the Raphael functionality. I would like to replace the div that is rendered by default with it child component svg, i have created below jsfiddle. Can anyone help me fix it?

http://jsfiddle.net/stackit/uzjafamo/8/

Code

enyo.kind({
    name: "Board",
    kind: "enyo.Control",
    paper: null,
    create: function(){
       this.inherited(arguments);
    },
    rendered: function(){
         this.inherited(arguments);  
        if(this.hasNode()){
            paper = Raphael(this.hasNode().id, 100, 100);
          }

    }
})


enyo.kind({
    name: "pages",
    kind: "enyo.Control",
    create: function(){
        this.inherited(arguments);
        this.loadView();
    },
    loadView: function(){
        if(!this.$.board){
            var com = this.createComponent({
                name: "board",
                kind: "Board",
            },{
                owner: this
            });
            com.render();
        }
    }
});



new pages().renderInto(document.getElementById("cans"));

score 0 · Accepted Answer · answered Jun 14 '15 at 16:21

0

I looked at your fiddle and saw a little bit that could be improved. The jsFiddle container was giving me some trouble though initially, until I forked it for some reason.

Here's what I came up with: http://jsfiddle.net/Djspaceg/5qyLej05/4/

enyo.kind({
    name: "Board",
    kind: "enyo.Control",
    paper: null,
    create: function () {
        this.inherited(arguments);
    },
    rendered: function () {
        this.inherited(arguments);
        if (this.hasNode() && !this.paper) {
            this.generateRaphael();
        }
    },
    generateRaphael: function () {
        this.paper = Raphael(this.hasNode().id, 100, 100);
    }
});

enyo.kind({
    name: "pages",
    kind: "enyo.Control",
    create: function () {
        this.inherited(arguments);
        this.loadView();
    },
    loadView: function () {
        if (!this.$.board) {
            var com = this.createComponent({
                name: "board",
                kind: "Board",
            });
            com.render();
        }
    }
});

new pages().renderInto(document.getElementById("cans"));

It just generates an empty Raphael canvas.

Cheers!

answered Jun 14 '15 at 16:21

Brak

178
1
9

I was trying to avoid div id=pages_board and generate svg right under div id=pages – user1595858 Jun 14 '15 at 21:19
You can simply render the canvas in the rendered function of the main pages element. http://jsfiddle.net/Djspaceg/5qyLej05/5/ – Brak Jun 15 '15 at 21:31
I realized I left the create method in place, when it's not necessary. See the updated fiddle for details: http://jsfiddle.net/Djspaceg/5qyLej05/6/ (also, please upvote or mark correct if this addressed your issue; much appreciated.) – Brak Jun 16 '15 at 17:04
I mean the ENYO kind shouldn't generate default div. It only should generate SVG. So with that regards can you remove div id=pages? And how can we get access to SVG? is it through this.$.svg? – user1595858 Jun 17 '15 at 18:35
You'd access the generated Raphael object via `this.paper`. The SVG element itself is generated by Raphael, not enyo. You can access the exposed Raphael object via `pages.paper` – Brak Jun 18 '15 at 20:33
So in other words, we can not prevent div id=pages from generating? – user1595858 Jun 18 '15 at 20:56
That's just part of how Enyo interacts with the DOM. You can directly create any HTML (or SVG) element using Enyo, you're using another library, and it's the one creating the SVG tag, you sort of need to work within the bounds of the other library. Enyo can create an SVG tag, by setting the property `tag: 'svg',` on any control, but if you did that in this case you'd have a SVG tag inside another SVG tag ( – Brak Jun 18 '15 at 22:25
@Bark Jun one problem with it, if i render it again the svg wouldn't regenerate. Here is jsfiddle http://jsfiddle.net/5qyLej05/7/ . how to fix it? – user1595858 Jun 22 '15 at 14:15
My apologies. I didn't realize that's what you wanted. Just take out the " && !this.paper " part of the if statement and it will recreate the SVG on every single rerender. – Brak Jun 23 '15 at 16:25

enyo framework to integrate which raphael

Code

1 Answers1