JointJ выделяет контур пользовательского элемента - PullRequest
Новая
       35

JointJ выделяет контур пользовательского элемента

0 голосов
/ 24 января 2019

Название говорит само за себя.В JointJ я пытаюсь выделить контур пользовательской фигуры.Теперь, если вы нажмете на фигуру, она получит оранжевый прямоугольник вокруг BBox.Я пытаюсь добиться того же эффекта вокруг контура (окружности).

Может быть, мне не следует вставлять весь фрагмент, теперь stackoverflow не позволяет мне публиковать его, потому что это в основном код.Я не знаю, что еще я должен объяснить о проблеме, но я продолжаю печатать :)

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

joint.shapes.custom = {};
joint.shapes.custom.Element = joint.dia.Element.define('custom.Element', {
	attrs: {
  	body: {
    	rx: 5,
        ry: 5,
      width: 50,
      height:50,
      fill: '#333'
    },
    info: {
    	ref: 'body',
      refX: -20,
      refY: -20,
      refHeight: '100%',
      refWidth: '100%',
      fill: '#c4c4c4'
    }
  }
}, {
  markup: [{
  	selector: 'body',
    tagName: 'rect'
  }, {
  	selector: 'info',
    tagName: 'rect'  
  }]
});


let heighlighted = false
  var customElement = new joint.shapes.custom.Element();
  customElement
    .resize(100, 100)
    .position(50, 100)
    .addTo(graph);

    paper.on('element:pointerclick', elementView => {
      if (heighlighted === false) {
        elementView.highlight()
        heighlighted = true
      } else {
        elementView.unhighlight()
        heighlighted = false
      }
      
    })
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.js"></script>
    <div id="paper"></div>
</body>
</html>
...