How to include dropdown menu inside a joint.shapes.basic.Generic.extend

[er...@elementalpath.com]

Hello,

I tried to force a <select/> tag to be included in my SVG markup, which I am finding to be not easy, probably because it isn't in the list of permitted content as seen here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

So far, the <select/> tag exists in the DOM as can be seen in the chrome dev tools, but it doesn't show up anywhere, has no height or width.

I tried appending the <select/> tag to the rendered <image/> tag, but that didn't work either.

It doesn't have to be a <select/> tag necessarily, but I do want the dropdown menu capability.  Something that is within the basic <rect/> shape, next to the rendered <image/>.

Here is my code:

joint.shapes.basic.DecoratedMasterSound = joint.shapes.basic.Generic.extend({

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><div/><image class="speakers" /><select class="select" /></g>',

    defaults: joint.util.deepSupplement({

        type: 'basic.DecoratedMasterSound',

        size: { width: 100, height: 60 },

        attrs: {

            'rect': { fill: '#FFFFFF', stroke: 'black', 'stroke-width': 5, 'rx': 2, 'ry': 2, width: 100, height: 60 },

        }

    }, joint.shapes.basic.Generic.prototype.defaults)

});

var decoratedMasterSound = new joint.shapes.basic.DecoratedMasterSound({

    position: { x: 300, y: 120 },

    size: { width: 100, height: 100 },

    attrs: {

        image: { height: 50, width: 50 },

        cogniType: 'sound',

        '.speakers': {

          'xlink:href': 'assets/speakers.jpg'

        },

        '.select': {

          'background-color': 'red',

          'border': 'solid 1px'

        }

    }

});

*Red Text: The parts that I tried to force to work, but failed.

Thanks,

Eric

[Vladimír Talaš]

Hi Eric, 

the `select` is not supported in svg, indeed. There are some workarounds how to create a dropdown in svg 

1. wrap the `<select>` into the `foreignObject` element (https://developer.mozilla.org/cs/docs/Web/SVG/Element/foreignObject) however, `foreignObject` is not supported in the IE. 

2. create your own implementation of select-like object - using paths, rects etc.

3. render a html snippet with absolute position above the joint element. You need to convert the local, graph coordinates to client coordinates using the `paper.localToClientPoint(x,y)`

Regards,

Vladimir 

------ Původní zpráva ------

Od: er...@elementalpath.com

Komu: "JointJS" <joi...@googlegroups.com>

Odesláno: 01.09.2017 18:37:07

Předmět: How to include dropdown menu inside a joint.shapes.basic.Generic.extend

--

---
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+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.