CellView.highlight() 重大改变?
CellView.highlight() breaking change?
我的应用程序使用 Jointjs。
我最近从 Jointjs v0.9.7 升级到 v0.9.10,自从我升级后,单元格突出显示似乎不起作用。我将所有内容简化为测试应用程序,我可以看到调用了 highlight()
函数,但未设置 highlighted
class。
我将一个简化的测试页放入a gist and a fiddle。如果有帮助,它也会在下面转载。
是否有重大变化?突出显示在 v0.9.10 中应该如何工作?
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.core.css" />
</head>
<body>
<div id="paper" />
<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/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.js"></script>
<script>
//there is a problem with jointjs in the latest version of Chrome. This fixes it
SVGElement.prototype.getTransformToElement =
SVGElement.prototype.getTransformToElement || function (toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
var highlighted = false;
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 400,
height: 400,
model: graph,
gridSize: 1,
interactive: false
});
paper.on('cell:pointerclick', function (cellView) {
if (highlighted) {
cellView.unhighlight();
} else {
cellView.highlight();
}
highlighted = !highlighted
});
var element = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
attrs: { text: { text: 'my shape' } },
size: { height: 92.7051, width: 150 }
});
graph.addCell(element);
</script>
</body>
</html>
JointJS v0.9.10 中的默认荧光笔已更改。当您突出显示一个元素时 - 具有模仿元素形状的 joint-highlight-stroke
class 名称的 SVGPathElement 将直接附加到 ElementView。这解决了浏览器之间的差异,其中 CSS 属性 outline
大多数 SVG 元素不受支持。
可用 highlighters
驻留在 joint.highlighters
命名空间中(stroke
默认、opacity
、addClass
为了向后兼容).
为了恢复原来的行为,请使用以下内容。
// a highlighter definition
var myHighlighter = {
name: 'addClass',
options: {
className: 'highlighted'
}
}
// add `myHighlighter` to an `el` (`null` for the entire cellView) DOM element.
cellView.highlight(el, myHighlighter);
// remove `myHighlighter` from an `el` DOM element.
cellView.unhighlight(el, myHighlighter);
请注意,新的更改允许使用多个荧光笔突出显示 cellView。
对于给您带来的不便,我们深表歉意。荧光笔的实际文档将尽快出现在 JointJS 存储库中。
我的应用程序使用 Jointjs。
我最近从 Jointjs v0.9.7 升级到 v0.9.10,自从我升级后,单元格突出显示似乎不起作用。我将所有内容简化为测试应用程序,我可以看到调用了 highlight()
函数,但未设置 highlighted
class。
我将一个简化的测试页放入a gist and a fiddle。如果有帮助,它也会在下面转载。
是否有重大变化?突出显示在 v0.9.10 中应该如何工作?
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.core.css" />
</head>
<body>
<div id="paper" />
<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/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.js"></script>
<script>
//there is a problem with jointjs in the latest version of Chrome. This fixes it
SVGElement.prototype.getTransformToElement =
SVGElement.prototype.getTransformToElement || function (toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
var highlighted = false;
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 400,
height: 400,
model: graph,
gridSize: 1,
interactive: false
});
paper.on('cell:pointerclick', function (cellView) {
if (highlighted) {
cellView.unhighlight();
} else {
cellView.highlight();
}
highlighted = !highlighted
});
var element = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
attrs: { text: { text: 'my shape' } },
size: { height: 92.7051, width: 150 }
});
graph.addCell(element);
</script>
</body>
</html>
JointJS v0.9.10 中的默认荧光笔已更改。当您突出显示一个元素时 - 具有模仿元素形状的 joint-highlight-stroke
class 名称的 SVGPathElement 将直接附加到 ElementView。这解决了浏览器之间的差异,其中 CSS 属性 outline
大多数 SVG 元素不受支持。
可用 highlighters
驻留在 joint.highlighters
命名空间中(stroke
默认、opacity
、addClass
为了向后兼容).
为了恢复原来的行为,请使用以下内容。
// a highlighter definition
var myHighlighter = {
name: 'addClass',
options: {
className: 'highlighted'
}
}
// add `myHighlighter` to an `el` (`null` for the entire cellView) DOM element.
cellView.highlight(el, myHighlighter);
// remove `myHighlighter` from an `el` DOM element.
cellView.unhighlight(el, myHighlighter);
请注意,新的更改允许使用多个荧光笔突出显示 cellView。
对于给您带来的不便,我们深表歉意。荧光笔的实际文档将尽快出现在 JointJS 存储库中。