<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css" />
</head>
<body>
<!-- content -->
<div id="myholder"></div>
<!-- dependencies -->
<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>
<!-- code -->
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
body: {
fill: 'red'
},
label: {
text: 'free',
fill: 'white'
}
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'transform!');
rect2.addTo(graph);
var link1 = new joint.dia.Link({
attrs: {
'.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' },
'.connection': { stroke: 'black' }
}
});
link1.source(rect);
link1.target(rect2);
link1.addTo(graph);
</script>
</body>
</html>
У инструмента ссылки в jointJs нет функции freeTransform, которую можно переместить из одного места в другое, просто перетаскивая его. Предположим, что я хочу перетащить только инструмент ссылки отдельно, не выбирая какой-либо другой элемент, тогда становится трудно сместить ссылку -tool.I воспроизвел проблему по этой ссылке: https://jsfiddle.net/aL52fzub/1/
Я пытался создать ореол для элемента ссылки, но когда я попытался создать freeTransform для того же, он выдал ошибку.
Я использовал joint.ui.FreeTransform({})
, но выдал ошибку.
Ожидаемый результат: инструмент ссылки можно перемещать по отдельности, просто перетаскивая его.