前端

jiangping

2025-07-15 03460728b50f69ef33d39c8352e95b33253bb056

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;
}