javascript - 单击其自定义 html 单击时删除联合 js 节点的问题

Question

我在我的 angular.js 应用程序中使用 joint.js，我有 joint.js 节点，我在其中使用 html

<button class="delete">x</button>

(你可以在我的 Backbone View 模板中看到这个)每当用户点击这个按钮时，我想删除工作得很好的节点但我想要改进的是只有当用户点击它的节点时按钮才会出现并且当用户点击节点以外的纸张时，十字按钮应该像

一样消失

http://jointjs.com/rappid#a3e927c4-9c6b-4159-b14e-920299be8f87

我认为我的逻辑是在按钮的父 div 中有一个类

    .html-element button.delete{
        display: none;
    }
    .html-element.showButton button.delete{
       display: block;
    }

当用户单击节点时添加，当用户单击纸张时删除。但是当我执行这种添加和删除类的逻辑时，它起作用了，但是删除交叉按钮上的节点的功能停止了。

通过一整天的调试和修改代码，我发现这个函数被调用时不知何故

   f2:function(){
                     var self=this;
                     var elementDiv = $(self.$box).find('button');
                     elementDiv.parent().removeClass("showButton")
              }

点击交叉按钮时节点的移除停止。这意味着图标与模型移除功能的绑定(bind)被移除。这是绑定(bind)

this.$box.find('.delete').on('click', function()
                    self.model.remove();
                });

我希望这个解释是有道理的。下面是完整代码

   var graph = new joint.dia.Graph;
    var element1=false;
    var paper = new joint.dia.Paper({
        el: $('#workFlow'),
        width: '100%',
        height: '98%',
        model: graph,
        gridSize: 1
    });
    paper.on('cell:pointerdown',
        function(cellView, evt, x, y) {
            $scope.cellView=cellView;
            cellView.f1();
        }
    );
    paper.on('blank:pointerdown', function(cell) {
      $scope.cellView.f2();
    });

用于扩展形状的主干 View

 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,stageType: dataSourceType}
                }
            }, joint.shapes.basic.Rect.prototype.defaults)
        });

//为该元素创建一个自定义 View ，在其上方显示一个 HTML div。//---------------------------------------------- --------------------------

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

    template: [

            '<span class="glyphicons '+icon+' html-element">',
        '<button class="delete">x</button>',
        '</span>'

    ].join(''),

    initialize: function() {
        var self=this;
        _.bindAll(this, 'updateBox');
        joint.dia.ElementView.prototype.initialize.apply(this, arguments);
        this.$box = $(_.template(this.template)());
        //  this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
        this.$box.find('.delete').on('click', function(event){
            self.model.remove();
        });
        // 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() {
        var self=this;
        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.
        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();
    },
    f1:function(){
        var self=this;
        var elementDiv = $(self.$box).find('button');
        elementDiv.parent().addClass("showButton");
    },
    f2:function(){
        var self=this;
        var elementDiv = $(self.$box).find('button');
        elementDiv.parent().removeClass("showButton")

    }
});

var el1 = new joint.shapes.html.Element({ position: { x: $scope.shapeX, y: $scope.shapeY }, size: { width: 40, height: 40 }, label: 'I am HTML', select: 'one' });
graph.addCells([el1]);

Answer 1

如果您还没有解决问题:有一个非常简单的解决方案可以满足您的需求。您只需要在 css 样式中使用悬停功能，并在将鼠标悬停在框上时(在您的 css 文件中)将不透明度从 0 更改为 1:

.html-element button.delete {
   color: white;
   border: none;
   background-color: gray;
   border-radius: 20px;
   width: 15px;
   height: 15px;
   line-height: 15px;
   text-align: middle;
   position: absolute;
   top: -5px;
   left: -5px;
   padding: 0;
   margin: 0;
   font-weight: bold;
   cursor: pointer;
   opacity:0;
}
.html-element button.delete:hover {
   /*width: 20px;
   height: 20px;
   line-height: 20px;*/
   opacity:1;
}