Вопроса о снятии совместного Js узла на щелчке его пользовательской HTML нажмите

Question

Я использую joint.js в моем angular.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") 
       } 

удаление узла на поперечному нажатия кнопки 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(); 
    }); 

Backbone Вьет проходящие формы

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 стиль и изменить непрозрачность от 0 до 1, при наведении мыши на поле (в файле CSS):

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