Question

当前，我正在尝试使用jointjs devs插件使用一些html按钮和文本区域创建一些自定义形状。

我可以使html正确显示，但是我实际上无法单击这些元素来输入任何文本。

我设法通过在svg中添加一个点击处理程序来设置焦点，但这并不理想，因为我不想将所有事件转发到不同的目标。

我已经浏览了与forgeinObjects有关的站点上的文档，但是它似乎已经过时了，无论如何都无法正常工作。

我也在chrome中使用了monitorEvents，当我单击时，我确实看到目标是我的文本区域。只是没有得到适当的关注。

point.shapes.devs.Atomic.define('meow.Shape', {
size: { 
    width: 200, 
    height: 150 
},
name: '',
isEntry: false,
attrs:
{
    body: {
        refWidth: '100%',
        refHeight: '100%',
        stroke: '#333333',
        fill: '#ffffff',
        strokeWidth: 2
    },
    foreignObject: {
        refWidth: '100%',
        refHeight: '100%'
    },  
    rect: { 
        stroke: 'none', 'fill-opacity': 1 
    },
    '.delete' :{
        'ref-width': '100%',
        'ref-height': '100%',
        stroke: '#000'
    },
    '.options' :{
        'ref-width': '100%',
        'ref-height': '100%',
        stroke: '#000'
    },
    '.name' :{
        'font-size': 18,
        'height':50
    }
},

inPorts: ['input'],
outPorts: ['output'],
},
{
    markup:
[
    '<foreignObject width="200" height="64">',
    '<div xmlns="http://www.w3.org/1999/xhtml">',
    '<g class="node">',
    '<button class="delete">x</button>',
    '<button class="options">v</button>',
    '<textarea class="name"/>',
    '</g>',
    '</div>',
    '</foreignObject>',
].join(''),

initialize: function()
{
    _.bindAll(this, 'updateBox');
    joint.shapes.devs.Model.prototype.initialize.apply(this, arguments);

    this.$box = $(_.template(this.markup)());

    this.$box.click(function(evt) {
        console.log("cat")
        evt.stopPropagation();
    });

    this.$box.find('.options').on('click', _.bind(this.showNodeOptions, this));

    console.log($('svg'))

    $('svg').on("click", function(d,i) {
        d.target.focus();
      }); 
},

无法在SVG Forgein对象中选择Textarea

0 个答案: