jonitjs图形嵌套

最新推荐文章于 2023-06-19 16:36:51 发布

qq_34158117

最新推荐文章于 2023-06-19 16:36:51 发布

阅读量221

点赞数

分类专栏： jointjs

本文链接：https://blog.csdn.net/qq_34158117/article/details/100773779

版权

jointjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div id="paper-reparenting"></div>

       
       
       <script src="node_modules/jquery/dist/jquery.js"></script>
       <script src="node_modules/lodash/lodash.js"></script>
       <script src="node_modules/backbone/backbone.js"></script>
       <script src="node_modules/jointjs/dist/joint.js"></script>
       <script>
           (function() {

           var graph = new joint.dia.Graph;
           var paper = new joint.dia.Paper({
               el: $('#paper-reparenting'),
               width: 1000,
               height: 1000,
               gridSize: 1,
               model: graph ,
           });

           var r1 = new joint.shapes.basic.Rect({
           position: { x: 20, y: 20 },
           size: { width: 200, height: 200 },
           attrs: { rect: { fill: '#E74C3C' }, text: { text: 'El A' } }
           });
           var r2 = new joint.shapes.basic.Rect({
           position: { x: 270, y: 30 },
           size: { width: 100, height: 80 },
           attrs: { rect: { fill: '#F1C40F' }, text: { text: 'El B' } }
           });

           graph.addCells([r1, r2]);

           // First, unembed the cell that has just been grabbed by the user.
           paper.on('cell:pointerdown', function(cellView, evt, x, y) {

           var cell = cellView.model;

           if (!cell.get('embeds') || cell.get('embeds').length === 0) {
           // Show the dragged element above all the other cells (except when the
           // element is a parent).
           cell.toFront();
           }

           if (cell.get('parent')) {
           graph.getCell(cell.get('parent')).unembed(cell);
           }
           });

           // When the dragged cell is dropped over another cell, let it become a child of the
           // element below.
           paper.on('cell:pointerup', function(cellView, evt, x, y) {

           var cell = cellView.model;
           var cellViewsBelow = paper.findViewsFromPoint(cell.getBBox().center());

           if (cellViewsBelow.length) {
           // Note that the findViewsFromPoint() returns the view for the `cell` itself.
           var cellViewBelow = _.find(cellViewsBelow, function(c) { return c.model.id !== cell.id });

           // Prevent recursive embedding.
           if (cellViewBelow && cellViewBelow.model.get('parent') !== cell.id) {
           cellViewBelow.model.embed(cell);
           }
           }
           });

           }());
       </script>
   </body>
</html>