2

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

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

（您可以在我的主干视图模板中看到这一点）每当用户单击此按钮时，我想删除工作绝对正常的节点，但我要改进的是该按钮应该仅在用户单击其节点时出现，并且当用户单击时在节点以外的纸上，十字按钮应该消失，就像

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")
              }

十字按钮点击节点的移除停止。这意味着图标与模型移除功能的绑定被移除。这是绑定

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();
    });

用于扩展形状的主干视图

 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)
        });

// 为该元素创建一个自定义视图，在其上方显示一个 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]);
4

1 回答 1

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;
}
于 2014-10-09T03:44:10.160 回答