How to make HTML elements appear on navigator

[er...@elementalpath.com]

Hello,

I am using HTML elements as shown: https://resources.jointjs.com/tutorials/joint/tutorials/html-elements.html, along with normal svg joint.shapes.  The svg shapes appear on the navigator, but the HTML elements do not.  Is there a way to make to HTML elements appear on the navigator as well?

Thanks,

Eric

[Roman Bruckner]

Hi,

the HTML elements from the tutorial do not support transformations (scale, rotate) (it might be the reason, why it does not work in the Navigator). Please try

to define the shapes like shown in this demo (https://github.com/clientIO/joint/blob/master/demo/html/html.js).

Bottom line I don't think it's a good idea to show HTML shapes in the navigator as they appear in the main paper (shapes main contain HTML inputs, controls). You can tell the Navigator's paper to use different views for elements. For instance

            var navigator = this.navigator = new joint.ui.Navigator({

                width: 240,

                height: 115,

                paperScroller: paperScroller,

                zoom: false,

                paperOptions: {

                    elementView: joint.dia.ElementView.extend({

                      rect: null,

                      initialize: function() {

                        this.listenTo(this.model, 'change:position', this.translate);

                        this.listenTo(this.model, 'change:size', this.resize);

                        this.listenTo(this.model, 'change:angle', this.rotate);

                     },

                     render: function() {

                       this.rect = V('rect', { fill: '#31d0c6' }).appendTo(this.el)

                       this.update();

                     },

                     update: function() {

                       this.rect.attr(this.model.get('size'));

                       this.updateTransformation();

                    }

                  }),

                  linkView: joint.dia.LinkView.extend({

                    initialize: function() {},

                    render: function() {},

                   update: function() {}
                 })

                }

            });

Best,

Roman

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Roman Bruckner, CTO

client IO

http://client.io

http://jointjs.com

+420 776 504 406