Question

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

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

删除十字按钮上的节点单击stops.it表示删除了图标与模型删除功能的绑定。这是绑定

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

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

单击其自定义html点击删除关节js节点的问题

1 个答案: