Блог

Главная - Вопросы по программированию - Создать кнопку закрытия рядом с фигурой JointJS

Создать кнопку закрытия рядом с фигурой JointJS

#javascript #html #jointjs

#javascript #HTML #jointjs

Вопрос:

У меня есть несколько прямоугольных фигур (они появятся при нажатии кнопок data science toolkit), и их можно перетаскивать в свободное пространство (бумага). Также вы можете легко запускать и проверять вcodepen.io.

введите описание изображения здесь

То, что я хочу добавить, это удалить удаленные фигуры, нажав кнопку закрытия. Но я не знаю, как создать кнопку закрытия рядом с отброшенной фигурой, а также удалить эту фигуру.

Любая помощь была бы с благодарностью принята, спасибо!

введите описание изображения здесь

 // Canvas where sape are dropped
            var graph = new joint.dia.Graph,
              paper = new joint.dia.Paper({
                el: $('#paper'),
                model: graph
              });

            // Canvas from which you take shapes
            var stencilGraph = new joint.dia.Graph,
              stencilPaper = new joint.dia.Paper({
                el: $('#stencil'),
                model: stencilGraph,
                interactive: false
              });

            var r1a = new joint.shapes.basic.Rect({
              position: {
                x: 29,
                y: 10
              },
              size: {
                width: 100,
                height: 40
              },
              attrs: {
                text: {
                  text: 'Rect1a'
                }
              }
            });
            var r1b = new joint.shapes.basic.Rect({
              position: {
                x: 29,
                y: 60
              },
              size: {
                width: 100,
                height: 40
              },
              attrs: {
                text: {
                  text: 'Rect1b'
                }
              }
            });
            var r2a = new joint.shapes.basic.Rect({
              position: {
                x: 29,
                y: 10
              },
              size: {
                width: 100,
                height: 40
              },
              attrs: {
                text: {
                  text: 'Rect2a'
                }
              }
            });
            var r2b = new joint.shapes.basic.Rect({
              position: {
                x: 29,
                y: 60
              },
              size: {
                width: 100,
                height: 40
              },
              attrs: {
                text: {
                  text: 'Rect2b'
                }
              }
            });
            var r3a = new joint.shapes.basic.Rect({
              position: {
                x: 29,
                y: 10
              },
              size: {
                width: 100,
                height: 40
              },
              attrs: {
                text: {
                  text: 'Rect3a'
                }
              }
            });
            var r3b = new joint.shapes.basic.Rect({
              position: {
                x: 29,
                y: 60
              },
              size: {
                width: 100,
                height: 40
              },
              attrs: {
                text: {
                  text: 'Rect3b'
                }
              }
            });
            var r4a = new joint.shapes.basic.Rect({
              position: {
                x: 29,
                y: 10
              },
              size: {
                width: 100,
                height: 40
              },
              attrs: {
                text: {
                  text: 'Rect4a'
                }
              }
            });
            var r4b = new joint.shapes.basic.Rect({
              position: {
                x: 29,
                y: 60
              },
              size: {
                width: 100,
                height: 40
              },
              attrs: {
                text: {
                  text: 'Rect4b'
                }
              }
            });
            var statistic = document.getElementById("statistic-button");
            var clustering = document.getElementById("clustering-button");
            var classification = document.getElementById("classification-button");
            var regression = document.getElementById("regression-button");

            statistic.onclick = function(){
                r1a.addTo(stencilGraph);
                r1b.addTo(stencilGraph);
                r2a.remove(stencilGraph);
                r2b.remove(stencilGraph);
                r3a.remove(stencilGraph);
                r3b.remove(stencilGraph);
                r4a.remove(stencilGraph);
                r4b.remove(stencilGraph);
            };
            clustering.onclick = function(){
                r1a.remove(stencilGraph);
                r1b.remove(stencilGraph);
                r2a.addTo(stencilGraph);
                r2b.addTo(stencilGraph);
                r3a.remove(stencilGraph);
                r3b.remove(stencilGraph);
                r4a.remove(stencilGraph);
                r4b.remove(stencilGraph);
            };
            classification.onclick = function(){
                r1a.remove(stencilGraph);
                r1b.remove(stencilGraph);
                r2a.remove(stencilGraph);
                r2b.remove(stencilGraph);
                r3a.addTo(stencilGraph);
                r3b.addTo(stencilGraph);
                r4a.remove(stencilGraph);
                r4b.remove(stencilGraph);
            };
            regression.onclick = function(){
                r1a.remove(stencilGraph);
                r1b.remove(stencilGraph);
                r2a.remove(stencilGraph);
                r2b.remove(stencilGraph);
                r3a.remove(stencilGraph);
                r3b.remove(stencilGraph);
                r4a.addTo(stencilGraph);
                r4b.addTo(stencilGraph);
            };

            stencilPaper.on('cell:pointerdown', function(cellView, e, x, y) {
              $('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
              var flyGraph = new joint.dia.Graph,
                flyPaper = new joint.dia.Paper({
                  el: $('#flyPaper'),
                  model: flyGraph,
                  interactive: false
                }),
                flyShape = cellView.model.clone(),
                pos = cellView.model.position(),
                offset = {
                  x: x - pos.x,
                  y: y - pos.y
                };

              flyShape.position(0, 0);
              flyGraph.addCell(flyShape);
              $("#flyPaper").offset({
                left: e.pageX - offset.x,
                top: e.pageY - offset.y
              });
              $('body').on('mousemove.fly', function(e) {
                $("#flyPaper").offset({
                  left: e.pageX - offset.x,
                  top: e.pageY - offset.y
                });
              });
              $('body').on('mouseup.fly', function(e) {
                var x = e.pageX,
                  y = e.pageY,
                  target = paper.$el.offset();

                // Dropped over paper ?
                if (x > target.left amp;amp; x < target.left   paper.$el.width() amp;amp; y > target.top amp;amp; y < target.top   paper.$el.height()) {
                  var s = flyShape.clone();
                  s.position(x - target.left - offset.x, y - target.top - offset.y);
                  graph.addCell(s);
                }
                $('body').off('mousemove.fly').off('mouseup.fly');
                flyShape.remove();
                $('#flyPaper').remove();
              });
            });  
 .data-science-toolkit{
    height: 300px;
    border: 5px double #005580;
}
.data-science-toolkit .before-drop-display-none{
    display: none;
}
.ds-tool-space{
    border: 5px double #005580;
}
.free-space{
    border: 5px solid #005580;
    height: auto;
}
.doitcenter{
    text-align: center;
}
#paper {
    height: auto;
    background-color: #f2e6e6;
}
#stencil {
    background-color: darkcyan;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <div class="row mt-4">
                        <div class="col-2">
                            <div class="data-science-toolkit mb-2">  
                                <div class="nav-logo">
                                    <h5 class="doitcenter" style="text-shadow: 0.5px 0.5px 1px gray;">Toolkit</h5>
                                </div>
                                <hr>
                                <div class="dropdown doitcenter mb-1">
                                    <button id="statistic-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Statistics
                                    <span class="caret"></span></button>
                                </div>
                                <div class="dropdown doitcenter mb-1">
                                    <button id="clustering-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Clustering
                                    <span class="caret"></span></button>
                                </div>
                                <div class="dropdown doitcenter mb-1">
                                    <button id="classification-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Classification
                                    <span class="caret"></span></button>
                                </div>
                                <div class="dropdown doitcenter mb-1">
                                    <button id="regression-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Regression
                                    <span class="caret"></span></button>
                                </div>
                            </div>
                            <div class="ds-tool-space mb-2">
                                <div id="stencil" style="height: 250px;"></div>
                            </div>
                             
                        </div>
                        <div class="col-10">
                            <div class="free-space">
                                <div id="paper" style=""></div>
                            </div>
                        </div>
                    </div>
</div>

Ответ №1:

Вы можете использовать встроенный elementTools.remove и связать с событием, подобным следующему:

 paper.on('element:mouseenter', (elementView) => {
  elementView.addTools(
    new joint.dia.ToolsView({
      tools: [
        new joint.elementTools.Remove({
          useModelGeometry: true,
          y: '0%',
          x: '100%',
        }),
      ],
    })
  );
});

paper.on('element:mouseleave', (elementView) => {
  elementView.removeTools();
});

Обратите внимание, что вам может потребоваться изменить положение в соответствии с формой вашего элемента.

Это также включено в официальную демонстрацию

Комментарии:

1. Привет, спасибо за ответ. Я не смог исправить это, как вы сказали. Если это возможно, можете ли вы подключить этот код к моему проекту? Для меня это важно