1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import Displayable from '../graphic/Displayable';
import { liftColor } from '../tool/color';
import { BrushScope, SVGVNodeAttrs } from './core';
import { getClassId } from './cssClassId';
export function createCSSEmphasis(
el: Displayable,
attrs: SVGVNodeAttrs,
scope: BrushScope
) {
if (!el.ignore) {
if (el.isSilent()) {
// If el is silent, it can not be hovered nor selected.
// So set pointer-events to pass through.
const style = {
'pointer-events': 'none'
};
setClassAttribute(style, attrs, scope, true);
}
else {
const emphasisStyle = el.states.emphasis && el.states.emphasis.style
? el.states.emphasis.style
: {};
let fill = emphasisStyle.fill;
if (!fill) {
// No empahsis fill, lift color
const normalFill = el.style && el.style.fill;
const selectFill = el.states.select
&& el.states.select.style
&& el.states.select.style.fill;
const fromFill = el.currentStates.indexOf('select') >= 0
? (selectFill || normalFill)
: normalFill;
if (fromFill) {
fill = liftColor(fromFill);
}
}
let lineWidth = emphasisStyle.lineWidth;
if (lineWidth) {
// Symbols use transform to set size, so lineWidth
// should be divided by scaleX
const scaleX = (!emphasisStyle.strokeNoScale && el.transform)
? el.transform[0]
: 1;
lineWidth = lineWidth / scaleX;
}
const style = {
cursor: 'pointer', // TODO: Should this be customized?
} as any;
if (fill) {
style.fill = fill;
}
if (emphasisStyle.stroke) {
style.stroke = emphasisStyle.stroke;
}
if (lineWidth) {
style['stroke-width'] = lineWidth;
}
setClassAttribute(style, attrs, scope, true);
}
}
}
function setClassAttribute(style: object, attrs: SVGVNodeAttrs, scope: BrushScope, withHover: boolean) {
const styleKey = JSON.stringify(style);
let className = scope.cssStyleCache[styleKey];
if (!className) {
className = scope.zrId + '-cls-' + getClassId();
scope.cssStyleCache[styleKey] = className;
scope.cssNodes['.' + className + (withHover ? ':hover' : '')] = style as any;
}
attrs.class = attrs.class ? (attrs.class + ' ' + className) : className;
}