javascript – 将端口添加到jointJS中的自定义元素

我是jointJs库的新手,我正在尝试将端口添加到包含html代码的自定义元素中.我按照本教程(http://www.jointjs.com/tutorial/html-elements)创建了我的元素.但是当我尝试向它添加端口时(基于本教程:http://www.jointjs.com/tutorial/ports)它不起作用.
我遇到的另一个问题是,当我点击空白纸张时,我希望文本框(我的自定义形状上的文本区域)消失,只有标签及其内容在元素上保持可见.为此,我使用了以下代码(但它没有给我上述功能):

paper.on('blank:pointerdown', function(evt, x, y) { this.$box.find('textarea').toBack(); });

        this.model.on('cell:pointerclick', function(evt, x, y) {this.$box.find('textarea').toFront();});

我的整个代码如下:

<!DOCTYPE html>
<html>
<head>


<link rel="stylesheet" href="graph.css">

<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>
<script src="http://www.jointjs.com/downloads/joint.shapes.devs.js" ></script>
<script src="http://www.jointjs.com/downloads/joint.shapes.devs.min.js" ></script>

</head>
<title>Test</title>

<body>
    <div id="myholder"></div>
</body>
<script>

    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: 1500,
        height: 700,
        model: graph
    });

    // Create a custom element.
    // ------------------------
    joint.shapes.html = {};
    joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            attrs: {
                rect: { stroke: 'none', 'fill-opacity': 0 }
            }
        }, joint.shapes.basic.Rect.prototype.defaults)
   });

   // Create a custom view for that element that displays an HTML div above it.
   // -------------------------------------------------------------------------

    joint.shapes.html.ElementView = joint.dia.ElementView.extend({

        template: [
            '<div class="html-element">',
            '<button class="delete">x</button>',
            '<span id="lbl" value="Please write here"></span>', 
            '<textarea id="txt" type="text" value="Please write here"></textarea>',
            '</div>'
        ].join(''),

    initialize: function() {
        _.bindAll(this, 'updateBox');
        joint.dia.ElementView.prototype.initialize.apply(this, arguments);

        this.$box = $(_.template(this.template)());
        // Prevent paper from handling pointerdown.
        this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });


        // This is an example of reacting on the input change and storing the input data in the cell model.
        this.$box.find('textarea').on('change', _.bind(function(evt) {
            this.model.set('textarea', $(evt.target).val());
        }, this));
        this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
        // Update the box position whenever the underlying model changes.
        this.model.on('change', this.updateBox, this);
        // Remove the box when the model gets removed from the graph.
        this.model.on('remove', this.removeBox, this);

        this.updateBox();
    },


     render: function() {
        joint.dia.ElementView.prototype.render.apply(this, arguments);
        this.paper.$el.prepend(this.$box);
        this.updateBox();
        return this;
    },

    updateBox: function() {
        // Set the position and dimension of the box so that it covers the JointJS element.
        var bbox = this.model.getBBox();
        // Example of updating the HTML with a data stored in the cell model.
        paper.on('blank:pointerdown', function(evt, x, y) { this.$box.find('textarea').toBack(); });
        this.$box.find('span').text(this.model.get('textarea'));
        this.model.on('cell:pointerclick', function(evt, x, y) { this.$box.find('textarea').toFront(); });
        this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
    },
    removeBox: function(evt) {
        this.$box.remove();
    }
}); 


// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------

var el1 = new joint.shapes.html.Element({ 
    position: { x: 600, y: 250 }, 
    size: { width: 200, height: 100 }, 
    inPorts: ['in'],
    outPorts: ['out'],
    attrs: {
        '.inPorts circle': { fill: 'gray'},
        '.outPorts circle': { fill: 'gray'}
    },
 textarea: 'Start writing'});

graph.addCells([el1]);

paper.on('cell:pointerdblclick', function(cellView, evt, x, y) {
   var el2 = new joint.shapes.html.Element({ position: { x: 600, y: 400 }, size: { width: 200, height: 100 }, textarea: 'Start writing'});

   var l = new joint.dia.Link({
        source: { id: el1.id },
        target: { id: el2.id },
        attrs: { '.connection': { 'stroke-width': 1, stroke: 'gray' } }
    });

    graph.addCells([el2, l]);
});


</script>
</html>

我已经搜索了很多这些问题的答案,但我找不到简单而全面的问题.
任何帮助将不胜感激.
谢谢.

解决方法:

我也是联合新手,并坚持同样的问题,发现了this thread.我已经尝试并成功地工作了.

您必须自定义元素的css才能获得更好的视图.有关端口的更多工作,请转到working with ports.

这是代码:

<!DOCTYPE html>
<html>
<head>


<link rel="stylesheet" href="http://www.jointjs.com/downloads/joint.min.css">
<style type="text/css">
  #myholder .html-element{
    position: absolute;
    margin-left: 8px;
    padding: 5px 0 10px 0;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    pointer-events: none;
    -webkit-user-select: none;
  }
</style>

<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.min.js" ></script>
</head>
<title>Test</title>

<body>
    <div id="myholder"></div>
</body>
<script>

    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: 1500,
        height: 700,
        model: graph
    });

    // Create a custom element.
    // ------------------------
    joint.shapes.html = {};
    joint.shapes.html.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
        markup: '<g class="rotatable"><g class="scalable"><rect/></g><g class="inPorts"/><g class="outPorts"/></g>',
        portMarkup: '<g class="port<%= id %>"><circle/></g>',
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            size: { width: 100, height: 80 },
            inPorts: [],
            outPorts: [],
            attrs: {
                '.': { magnet: false },
                rect: {
                    stroke: 'none', 'fill-opacity': 0, width: 150, height: 250,
                },
                circle: {
                    r: 6, //circle radius
                    magnet: true,
                    stroke: 'black'
                },

                '.inPorts circle': { fill: 'green', magnet: 'passive', type: 'input'},
                '.outPorts circle': { fill: 'red', type: 'output'}
            }
        }, joint.shapes.basic.Generic.prototype.defaults),
        getPortAttrs: function (portName, index, total, selector, type) {

            var attrs = {};
            var portClass = 'port' + index;
            var portSelector = selector + '>.' + portClass;
            var portCircleSelector = portSelector + '>circle';
            attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } };
            attrs[portSelector] = { ref: 'rect', 'ref-y': (index + 0.5) * (1 / total) };
            if (selector === '.outPorts') { attrs[portSelector]['ref-dx'] = 0; }
            return attrs;
        }
    }));


   // Create a custom view for that element that displays an HTML div above it.
   // -------------------------------------------------------------------------

    joint.shapes.html.ElementView = joint.dia.ElementView.extend({

        template: [
            '<div class="html-element">',
            '<button class="delete">x</button>',
            '<span id="lbl" value="Please write here"></span>', 
            '<textarea id="txt" type="text" value="Please write here"></textarea>',
            '</div>'
        ].join(''),

    initialize: function() {
        _.bindAll(this, 'updateBox');
        joint.dia.ElementView.prototype.initialize.apply(this, arguments);

        this.$box = $(_.template(this.template)());
        // Prevent paper from handling pointerdown.
        this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });


        // This is an example of reacting on the input change and storing the input data in the cell model.
        this.$box.find('textarea').on('change', _.bind(function(evt) {
            this.model.set('textarea', $(evt.target).val());
        }, this));
        this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
        // Update the box position whenever the underlying model changes.
        this.model.on('change', this.updateBox, this);
        // Remove the box when the model gets removed from the graph.
        this.model.on('remove', this.removeBox, this);

        this.updateBox();

        this.listenTo(this.model, 'process:ports', this.update);
        joint.dia.ElementView.prototype.initialize.apply(this, arguments);
    },


     render: function() {
        joint.dia.ElementView.prototype.render.apply(this, arguments);
        this.paper.$el.prepend(this.$box);
        // this.paper.$el.mousemove(this.onMouseMove.bind(this)), this.paper.$el.mouseup(this.onMouseUp.bind(this));
        this.updateBox();
        return this;
    },

    renderPorts: function () {
        var $inPorts = this.$('.inPorts').empty();
        var $outPorts = this.$('.outPorts').empty();

        var portTemplate = _.template(this.model.portMarkup);

        _.each(_.filter(this.model.ports, function (p) { return p.type === 'in' }), function (port, index) {

            $inPorts.append(V(portTemplate({ id: index, port: port })).node);
        });
        _.each(_.filter(this.model.ports, function (p) { return p.type === 'out' }), function (port, index) {

            $outPorts.append(V(portTemplate({ id: index, port: port })).node);
        });
    }, 

    update: function () {

        // First render ports so that `attrs` can be applied to those newly created DOM elements
        // in `ElementView.prototype.update()`.
        this.renderPorts();
        joint.dia.ElementView.prototype.update.apply(this, arguments);
    },

    updateBox: function() {
        // Set the position and dimension of the box so that it covers the JointJS element.
        var bbox = this.model.getBBox();
        // Example of updating the HTML with a data stored in the cell model.
        // paper.on('blank:pointerdown', function(evt, x, y) { this.$box.find('textarea').toBack(); });
        this.$box.find('span').text(this.model.get('textarea'));
        this.model.on('cell:pointerclick', function(evt, x, y) { this.$box.find('textarea').toFront(); });
        this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
    },
    removeBox: function(evt) {
        this.$box.remove();
    }
}); 


// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------

var el1 = new joint.shapes.html.Element({ 
    position: { x: 600, y: 250 }, 
    size: { width: 170, height: 100 },
    inPorts: ['in'],
    outPorts: ['out'],
    textarea: 'Start writing'
  });

var el2 = new joint.shapes.html.Element({ 
    position: { x: 600, y: 400 },
    size: { width: 170, height: 100 },
    inPorts: ['in'],
    outPorts: ['out'],
    textarea: 'Start writing'
  });

graph.addCells([el1, el2]);


</script>
</html>
上一篇:javascript – 如何让jointjs单元格溢出纸张?


下一篇:javascript-在JointJs中隐藏链接