@visactor/vgrammar-core 0.11.12 → 0.11.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/graph/canvas-renderer.js +1 -0
- package/cjs/graph/canvas-renderer.js.map +1 -1
- package/cjs/graph/element.d.ts +2 -1
- package/cjs/graph/element.js.map +1 -1
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/cjs/interactions/base.d.ts +3 -1
- package/cjs/interactions/base.js +2 -0
- package/cjs/interactions/base.js.map +1 -1
- package/cjs/interactions/element-active-by-legend.d.ts +4 -2
- package/cjs/interactions/element-active-by-legend.js +20 -14
- package/cjs/interactions/element-active-by-legend.js.map +1 -1
- package/cjs/interactions/element-active.d.ts +2 -0
- package/cjs/interactions/element-active.js +8 -2
- package/cjs/interactions/element-active.js.map +1 -1
- package/cjs/interactions/element-highlight-by-group.d.ts +2 -0
- package/cjs/interactions/element-highlight-by-group.js +18 -12
- package/cjs/interactions/element-highlight-by-group.js.map +1 -1
- package/cjs/interactions/element-highlight-by-key.d.ts +2 -0
- package/cjs/interactions/element-highlight-by-key.js +25 -10
- package/cjs/interactions/element-highlight-by-key.js.map +1 -1
- package/cjs/interactions/element-highlight-by-legend.d.ts +2 -0
- package/cjs/interactions/element-highlight-by-legend.js +19 -14
- package/cjs/interactions/element-highlight-by-legend.js.map +1 -1
- package/cjs/interactions/element-highlight-by-name.d.ts +2 -0
- package/cjs/interactions/element-highlight-by-name.js +19 -13
- package/cjs/interactions/element-highlight-by-name.js.map +1 -1
- package/cjs/interactions/element-highlight.d.ts +2 -0
- package/cjs/interactions/element-highlight.js +18 -12
- package/cjs/interactions/element-highlight.js.map +1 -1
- package/cjs/interactions/element-select.d.ts +2 -0
- package/cjs/interactions/element-select.js +19 -13
- package/cjs/interactions/element-select.js.map +1 -1
- package/cjs/types/interaction.d.ts +2 -0
- package/cjs/types/interaction.js.map +1 -1
- package/cjs/view/mark.d.ts +2 -1
- package/cjs/view/mark.js.map +1 -1
- package/es/graph/canvas-renderer.js +1 -0
- package/es/graph/canvas-renderer.js.map +1 -1
- package/es/graph/element.d.ts +2 -1
- package/es/graph/element.js.map +1 -1
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/es/interactions/base.d.ts +3 -1
- package/es/interactions/base.js +2 -0
- package/es/interactions/base.js.map +1 -1
- package/es/interactions/element-active-by-legend.d.ts +4 -2
- package/es/interactions/element-active-by-legend.js +20 -14
- package/es/interactions/element-active-by-legend.js.map +1 -1
- package/es/interactions/element-active.d.ts +2 -0
- package/es/interactions/element-active.js +8 -2
- package/es/interactions/element-active.js.map +1 -1
- package/es/interactions/element-highlight-by-group.d.ts +2 -0
- package/es/interactions/element-highlight-by-group.js +19 -13
- package/es/interactions/element-highlight-by-group.js.map +1 -1
- package/es/interactions/element-highlight-by-key.d.ts +2 -0
- package/es/interactions/element-highlight-by-key.js +25 -10
- package/es/interactions/element-highlight-by-key.js.map +1 -1
- package/es/interactions/element-highlight-by-legend.d.ts +2 -0
- package/es/interactions/element-highlight-by-legend.js +19 -14
- package/es/interactions/element-highlight-by-legend.js.map +1 -1
- package/es/interactions/element-highlight-by-name.d.ts +2 -0
- package/es/interactions/element-highlight-by-name.js +19 -13
- package/es/interactions/element-highlight-by-name.js.map +1 -1
- package/es/interactions/element-highlight.d.ts +2 -0
- package/es/interactions/element-highlight.js +18 -12
- package/es/interactions/element-highlight.js.map +1 -1
- package/es/interactions/element-select.d.ts +2 -0
- package/es/interactions/element-select.js +20 -14
- package/es/interactions/element-select.js.map +1 -1
- package/es/types/interaction.d.ts +2 -0
- package/es/types/interaction.js.map +1 -1
- package/es/view/mark.d.ts +2 -1
- package/es/view/mark.js.map +1 -1
- package/package.json +11 -11
|
@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: !0
|
|
5
5
|
}), exports.ElementHighlightByGroup = void 0;
|
|
6
6
|
|
|
7
|
-
const vutils_1 = require("@visactor/vutils"),
|
|
7
|
+
const vutils_1 = require("@visactor/vutils"), enums_1 = require("../graph/enums"), base_1 = require("./base");
|
|
8
8
|
|
|
9
9
|
class ElementHighlightByGroup extends base_1.BaseInteraction {
|
|
10
10
|
constructor(view, options) {
|
|
11
11
|
super(view, options), this.type = ElementHighlightByGroup.type, this.handleStart = e => {
|
|
12
|
-
|
|
13
|
-
const highlightKey = e.element.groupKey;
|
|
14
|
-
if ((0, vutils_1.isNil)(highlightKey)) return;
|
|
15
|
-
this._marks.forEach((mark => {
|
|
16
|
-
mark.elements.forEach((el => {
|
|
17
|
-
el.groupKey === highlightKey ? (el.removeState(this.options.blurState), el.addState(this.options.highlightState)) : (el.removeState(this.options.highlightState),
|
|
18
|
-
el.addState(this.options.blurState));
|
|
19
|
-
}));
|
|
20
|
-
}));
|
|
21
|
-
}
|
|
12
|
+
this.start(e.element);
|
|
22
13
|
}, this.handleReset = e => {
|
|
23
|
-
|
|
14
|
+
this.reset(e.element);
|
|
24
15
|
}, this.options = Object.assign({}, ElementHighlightByGroup.defaultOptions, options),
|
|
25
16
|
this._marks = view.getMarksBySelector(this.options.selector);
|
|
26
17
|
}
|
|
@@ -40,6 +31,21 @@ class ElementHighlightByGroup extends base_1.BaseInteraction {
|
|
|
40
31
|
}));
|
|
41
32
|
}));
|
|
42
33
|
}
|
|
34
|
+
start(element) {
|
|
35
|
+
if (element && this._marks && this._marks.includes(element.mark)) {
|
|
36
|
+
const highlightKey = element.groupKey;
|
|
37
|
+
if ((0, vutils_1.isNil)(highlightKey)) return;
|
|
38
|
+
this._marks.forEach((mark => {
|
|
39
|
+
mark.elements.forEach((el => {
|
|
40
|
+
el.groupKey === highlightKey ? (el.removeState(this.options.blurState), el.addState(this.options.highlightState)) : (el.removeState(this.options.highlightState),
|
|
41
|
+
el.addState(this.options.blurState));
|
|
42
|
+
}));
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
reset(element) {
|
|
47
|
+
element && this._marks && this._marks.includes(element.mark) && this.clearPrevElements();
|
|
48
|
+
}
|
|
43
49
|
}
|
|
44
50
|
|
|
45
51
|
exports.ElementHighlightByGroup = ElementHighlightByGroup, ElementHighlightByGroup.type = "element-highlight-by-group",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interactions/element-highlight-by-group.ts"],"names":[],"mappings":";;;AAAA,6CAAyC;AAEzC,
|
|
1
|
+
{"version":3,"sources":["../src/interactions/element-highlight-by-group.ts"],"names":[],"mappings":";;;AAAA,6CAAyC;AAEzC,0CAAsD;AACtD,iCAAyC;AAEzC,MAAa,uBAAwB,SAAQ,sBAAwC;IAanF,YAAY,IAAW,EAAE,OAAiC;QACxD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAZvB,SAAI,GAAW,uBAAuB,CAAC,IAAI,CAAC;QAoE5C,gBAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;YACpC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;YACpC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,CAAC;QA7DA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,uBAAuB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QAElF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC/D,CAAC;IAES,SAAS;QACjB,OAAO;YACL;gBACE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;gBAC1B,OAAO,EAAE,IAAI,CAAC,WAAW;aAC1B;YACD,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;SAC7D,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACzB,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;gBAC5C,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,OAAoC;QACxC,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChE,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ,CAAC;YAEtC,IAAI,IAAA,cAAK,EAAC,YAAY,CAAC,EAAE;gBACvB,OAAO;aACR;YACD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACzB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;oBACzB,MAAM,WAAW,GAAG,EAAE,CAAC,QAAQ,KAAK,YAAY,CAAC;oBAEjD,IAAI,WAAW,EAAE;wBACf,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;wBACvC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;qBAC1C;yBAAM;wBACL,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;wBAC5C,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;qBACrC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,KAAK,CAAC,OAAoC;QACxC,MAAM,gBAAgB,GAAG,OAAO,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEtF,IAAI,gBAAgB,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;IACH,CAAC;;AApEH,0DA6EC;AA5EQ,4BAAI,GAAW,4BAA4B,CAAC;AAG5C,sCAAc,GAA4B;IAC/C,cAAc,EAAE,4BAAoB,CAAC,SAAS;IAC9C,SAAS,EAAE,4BAAoB,CAAC,IAAI;IACpC,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,YAAY;CACzB,CAAC","file":"element-highlight-by-group.js","sourcesContent":["import { isNil } from '@visactor/vutils';\nimport type { ElementHighlightOptions, IMark, IView, InteractionEvent } from '../types';\nimport { InteractionStateEnum } from '../graph/enums';\nimport { BaseInteraction } from './base';\n\nexport class ElementHighlightByGroup extends BaseInteraction<ElementHighlightOptions> {\n static type: string = 'element-highlight-by-group';\n type: string = ElementHighlightByGroup.type;\n\n static defaultOptions: ElementHighlightOptions = {\n highlightState: InteractionStateEnum.highlight,\n blurState: InteractionStateEnum.blur,\n trigger: 'pointerover',\n triggerOff: 'pointerout'\n };\n options: ElementHighlightOptions;\n protected _marks?: IMark[];\n\n constructor(view: IView, options?: ElementHighlightOptions) {\n super(view, options);\n this.options = Object.assign({}, ElementHighlightByGroup.defaultOptions, options);\n\n this._marks = view.getMarksBySelector(this.options.selector);\n }\n\n protected getEvents() {\n return [\n {\n type: this.options.trigger,\n handler: this.handleStart\n },\n { type: this.options.triggerOff, handler: this.handleReset }\n ];\n }\n\n clearPrevElements() {\n this._marks.forEach(mark => {\n mark.elements.forEach(el => {\n el.removeState(this.options.highlightState);\n el.removeState(this.options.blurState);\n });\n });\n }\n\n start(element: InteractionEvent['element']) {\n if (element && this._marks && this._marks.includes(element.mark)) {\n const highlightKey = element.groupKey;\n\n if (isNil(highlightKey)) {\n return;\n }\n this._marks.forEach(mark => {\n mark.elements.forEach(el => {\n const isHighlight = el.groupKey === highlightKey;\n\n if (isHighlight) {\n el.removeState(this.options.blurState);\n el.addState(this.options.highlightState);\n } else {\n el.removeState(this.options.highlightState);\n el.addState(this.options.blurState);\n }\n });\n });\n }\n }\n\n reset(element: InteractionEvent['element']) {\n const hasActiveElement = element && this._marks && this._marks.includes(element.mark);\n\n if (hasActiveElement) {\n this.clearPrevElements();\n }\n }\n\n handleStart = (e: InteractionEvent) => {\n this.start(e.element);\n };\n\n handleReset = (e: InteractionEvent) => {\n this.reset(e.element);\n };\n}\n"]}
|
|
@@ -12,6 +12,8 @@ export declare class ElementHighlightByKey extends BaseInteraction<ElementHighli
|
|
|
12
12
|
handler: (e: InteractionEvent) => void;
|
|
13
13
|
}[];
|
|
14
14
|
clearPrevElements(): void;
|
|
15
|
+
start(element: InteractionEvent['element']): void;
|
|
16
|
+
reset(element: InteractionEvent['element']): void;
|
|
15
17
|
handleStart: (e: InteractionEvent) => void;
|
|
16
18
|
handleReset: (e: InteractionEvent) => void;
|
|
17
19
|
}
|
|
@@ -9,16 +9,7 @@ const vutils_1 = require("@visactor/vutils"), base_1 = require("./base"), enums_
|
|
|
9
9
|
class ElementHighlightByKey extends base_1.BaseInteraction {
|
|
10
10
|
constructor(view, options) {
|
|
11
11
|
super(view, options), this.type = ElementHighlightByKey.type, this.handleStart = e => {
|
|
12
|
-
|
|
13
|
-
const highlightKey = e.element.key;
|
|
14
|
-
if ((0, vutils_1.isNil)(highlightKey)) return;
|
|
15
|
-
this._marks.forEach((mark => {
|
|
16
|
-
mark.elements.forEach((el => {
|
|
17
|
-
el.key === highlightKey ? (el.removeState(this.options.blurState), el.addState(this.options.highlightState)) : (el.removeState(this.options.highlightState),
|
|
18
|
-
el.addState(this.options.blurState));
|
|
19
|
-
}));
|
|
20
|
-
}));
|
|
21
|
-
}
|
|
12
|
+
this.start(e.element);
|
|
22
13
|
}, this.handleReset = e => {
|
|
23
14
|
e.element && this._marks && this._marks.includes(e.element.mark) && this.clearPrevElements();
|
|
24
15
|
}, this.options = Object.assign({}, ElementHighlightByKey.defaultOptions, options),
|
|
@@ -40,6 +31,30 @@ class ElementHighlightByKey extends base_1.BaseInteraction {
|
|
|
40
31
|
}));
|
|
41
32
|
}));
|
|
42
33
|
}
|
|
34
|
+
start(element) {
|
|
35
|
+
if (element && this._marks && this._marks.includes(element.mark)) {
|
|
36
|
+
const highlightKey = element.key;
|
|
37
|
+
if ((0, vutils_1.isNil)(highlightKey)) return;
|
|
38
|
+
this._marks.forEach((mark => {
|
|
39
|
+
mark.elements.forEach((el => {
|
|
40
|
+
el.key === highlightKey ? (el.removeState(this.options.blurState), el.addState(this.options.highlightState)) : (el.removeState(this.options.highlightState),
|
|
41
|
+
el.addState(this.options.blurState));
|
|
42
|
+
}));
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
reset(element) {
|
|
47
|
+
if (element && this._marks && this._marks.includes(element.mark)) {
|
|
48
|
+
const highlightKey = element.key;
|
|
49
|
+
if ((0, vutils_1.isNil)(highlightKey)) return;
|
|
50
|
+
this._marks.forEach((mark => {
|
|
51
|
+
mark.elements.forEach((el => {
|
|
52
|
+
el.key === highlightKey ? (el.removeState(this.options.blurState), el.addState(this.options.highlightState)) : (el.removeState(this.options.highlightState),
|
|
53
|
+
el.addState(this.options.blurState));
|
|
54
|
+
}));
|
|
55
|
+
}));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
43
58
|
}
|
|
44
59
|
|
|
45
60
|
exports.ElementHighlightByKey = ElementHighlightByKey, ElementHighlightByKey.type = "element-highlight-by-key",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interactions/element-highlight-by-key.ts"],"names":[],"mappings":";;;AAAA,6CAAyC;AAEzC,iCAAyC;AACzC,0CAAsD;AAEtD,MAAa,qBAAsB,SAAQ,sBAAwC;IAajF,YAAY,IAAW,EAAE,OAAiC;QACxD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAZvB,SAAI,GAAW,qBAAqB,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"sources":["../src/interactions/element-highlight-by-key.ts"],"names":[],"mappings":"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","file":"element-highlight-by-key.js","sourcesContent":["import { isNil } from '@visactor/vutils';\nimport type { ElementHighlightOptions, IMark, IView, InteractionEvent } from '../types';\nimport { BaseInteraction } from './base';\nimport { InteractionStateEnum } from '../graph/enums';\n\nexport class ElementHighlightByKey extends BaseInteraction<ElementHighlightOptions> {\n static type: string = 'element-highlight-by-key';\n type: string = ElementHighlightByKey.type;\n\n static defaultOptions: ElementHighlightOptions = {\n highlightState: InteractionStateEnum.highlight,\n blurState: InteractionStateEnum.blur,\n trigger: 'pointerover',\n triggerOff: 'pointerout'\n };\n options: ElementHighlightOptions;\n protected _marks?: IMark[];\n\n constructor(view: IView, options?: ElementHighlightOptions) {\n super(view, options);\n this.options = Object.assign({}, ElementHighlightByKey.defaultOptions, options);\n\n this._marks = view.getMarksBySelector(this.options.selector);\n }\n\n protected getEvents() {\n return [\n {\n type: this.options.trigger,\n handler: this.handleStart\n },\n { type: this.options.triggerOff, handler: this.handleReset }\n ];\n }\n\n clearPrevElements() {\n this._marks.forEach(mark => {\n mark.elements.forEach(el => {\n el.removeState(this.options.highlightState);\n el.removeState(this.options.blurState);\n });\n });\n }\n\n start(element: InteractionEvent['element']) {\n if (element && this._marks && this._marks.includes(element.mark)) {\n const highlightKey = element.key;\n\n if (isNil(highlightKey)) {\n return;\n }\n this._marks.forEach(mark => {\n mark.elements.forEach(el => {\n const isHighlight = el.key === highlightKey;\n\n if (isHighlight) {\n el.removeState(this.options.blurState);\n el.addState(this.options.highlightState);\n } else {\n el.removeState(this.options.highlightState);\n el.addState(this.options.blurState);\n }\n });\n });\n }\n }\n\n reset(element: InteractionEvent['element']) {\n if (element && this._marks && this._marks.includes(element.mark)) {\n const highlightKey = element.key;\n\n if (isNil(highlightKey)) {\n return;\n }\n this._marks.forEach(mark => {\n mark.elements.forEach(el => {\n const isHighlight = el.key === highlightKey;\n\n if (isHighlight) {\n el.removeState(this.options.blurState);\n el.addState(this.options.highlightState);\n } else {\n el.removeState(this.options.highlightState);\n el.addState(this.options.blurState);\n }\n });\n });\n }\n }\n\n handleStart = (e: InteractionEvent) => {\n this.start(e.element);\n };\n\n handleReset = (e: InteractionEvent) => {\n const hasActiveElement = e.element && this._marks && this._marks.includes(e.element.mark);\n\n if (hasActiveElement) {\n this.clearPrevElements();\n }\n };\n}\n"]}
|
|
@@ -12,6 +12,8 @@ export declare class ElementHighlightByLegend extends BaseInteraction<ElementHig
|
|
|
12
12
|
type: LegendEvent;
|
|
13
13
|
handler: (e: InteractionEvent, element: IGlyphElement<any> | IElement) => void;
|
|
14
14
|
}[];
|
|
15
|
+
start(itemKey: IElement | IGlyphElement | string): void;
|
|
16
|
+
reset(): void;
|
|
15
17
|
handleStart: (e: InteractionEvent, element: IElement | IGlyphElement) => void;
|
|
16
18
|
handleReset: (e: InteractionEvent) => void;
|
|
17
19
|
}
|
|
@@ -10,21 +10,9 @@ class ElementHighlightByLegend extends base_1.BaseInteraction {
|
|
|
10
10
|
constructor(view, options) {
|
|
11
11
|
super(view, options), this.type = ElementHighlightByLegend.type, this.handleStart = (e, element) => {
|
|
12
12
|
var _a, _b;
|
|
13
|
-
|
|
14
|
-
if ((0, vutils_1.isNil)(itemKey)) return;
|
|
15
|
-
const filterValue = (0, utils_1.generateFilterValue)(this.options);
|
|
16
|
-
this._marks.forEach((mark => {
|
|
17
|
-
mark.elements.forEach((el => {
|
|
18
|
-
filterValue(el) === itemKey ? (el.removeState(this.options.blurState), el.addState(this.options.highlightState)) : (el.removeState(this.options.highlightState),
|
|
19
|
-
el.addState(this.options.blurState));
|
|
20
|
-
}));
|
|
21
|
-
}));
|
|
13
|
+
this.start(null === (_b = null === (_a = e.detail) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b.id);
|
|
22
14
|
}, this.handleReset = e => {
|
|
23
|
-
this.
|
|
24
|
-
mark.elements.forEach((el => {
|
|
25
|
-
el.removeState(this.options.blurState), el.removeState(this.options.highlightState);
|
|
26
|
-
}));
|
|
27
|
-
}));
|
|
15
|
+
this.reset();
|
|
28
16
|
}, this.options = Object.assign({}, ElementHighlightByLegend.defaultOptions, options),
|
|
29
17
|
this._marks = view.getMarksBySelector(this.options.selector);
|
|
30
18
|
}
|
|
@@ -37,6 +25,23 @@ class ElementHighlightByLegend extends base_1.BaseInteraction {
|
|
|
37
25
|
handler: this.handleReset
|
|
38
26
|
} ];
|
|
39
27
|
}
|
|
28
|
+
start(itemKey) {
|
|
29
|
+
if ((0, vutils_1.isNil)(itemKey)) return;
|
|
30
|
+
const filterValue = (0, utils_1.generateFilterValue)(this.options);
|
|
31
|
+
this._marks.forEach((mark => {
|
|
32
|
+
mark.elements.forEach((el => {
|
|
33
|
+
filterValue(el) === itemKey ? (el.removeState(this.options.blurState), el.addState(this.options.highlightState)) : (el.removeState(this.options.highlightState),
|
|
34
|
+
el.addState(this.options.blurState));
|
|
35
|
+
}));
|
|
36
|
+
}));
|
|
37
|
+
}
|
|
38
|
+
reset() {
|
|
39
|
+
this._marks.forEach((mark => {
|
|
40
|
+
mark.elements.forEach((el => {
|
|
41
|
+
el.removeState(this.options.blurState), el.removeState(this.options.highlightState);
|
|
42
|
+
}));
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
40
45
|
}
|
|
41
46
|
|
|
42
47
|
exports.ElementHighlightByLegend = ElementHighlightByLegend, ElementHighlightByLegend.type = "element-highlight-by-legend",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interactions/element-highlight-by-legend.ts"],"names":[],"mappings":";;;AAAA,0CAAsD;AAStD,iCAAyC;AACzC,qEAA2D;AAC3D,6CAAyC;AACzC,mCAA8C;AAE9C,MAAa,wBAAyB,SAAQ,sBAAgD;IAY5F,YAAY,IAAW,EAAE,OAAyC;QAChE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAXvB,SAAI,GAAW,wBAAwB,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"sources":["../src/interactions/element-highlight-by-legend.ts"],"names":[],"mappings":";;;AAAA,0CAAsD;AAStD,iCAAyC;AACzC,qEAA2D;AAC3D,6CAAyC;AACzC,mCAA8C;AAE9C,MAAa,wBAAyB,SAAQ,sBAAgD;IAY5F,YAAY,IAAW,EAAE,OAAyC;QAChE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAXvB,SAAI,GAAW,wBAAwB,CAAC,IAAI,CAAC;QAyD7C,gBAAW,GAAG,CAAC,CAAmB,EAAE,OAAiC,EAAE,EAAE;;YACvE,IAAI,CAAC,KAAK,CAAC,MAAA,MAAA,CAAC,CAAC,MAAM,0CAAE,IAAI,0CAAE,EAAE,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;YACpC,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAnDA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,wBAAwB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QAEnF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC/D,CAAC;IAES,SAAS;QACjB,OAAO;YACL;gBACE,IAAI,EAAE,gCAAW,CAAC,eAAe;gBACjC,OAAO,EAAE,IAAI,CAAC,WAAW;aAC1B;YACD,EAAE,IAAI,EAAE,gCAAW,CAAC,iBAAiB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;SACnE,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,OAA0C;QAC9C,IAAI,IAAA,cAAK,EAAC,OAAO,CAAC,EAAE;YAClB,OAAO;SACR;QACD,MAAM,WAAW,GAAG,IAAA,2BAAmB,EAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACzB,MAAM,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;gBAEhD,IAAI,WAAW,EAAE;oBACf,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;oBACvC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;iBAC1C;qBAAM;oBACL,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;oBAC5C,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;iBACrC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACzB,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBACvC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC9C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;;AAzDH,4DAkEC;AAjEQ,6BAAI,GAAW,6BAA6B,CAAC;AAG7C,uCAAc,GAAoC;IACvD,cAAc,EAAE,4BAAoB,CAAC,SAAS;IAC9C,SAAS,EAAE,4BAAoB,CAAC,IAAI;IACpC,UAAU,EAAE,UAAU;CACvB,CAAC","file":"element-highlight-by-legend.js","sourcesContent":["import { InteractionStateEnum } from '../graph/enums';\nimport type {\n ElementHighlightByLegendOptions,\n IElement,\n IGlyphElement,\n IMark,\n IView,\n InteractionEvent\n} from '../types';\nimport { BaseInteraction } from './base';\nimport { LegendEvent } from '@visactor/vrender-components';\nimport { isNil } from '@visactor/vutils';\nimport { generateFilterValue } from './utils';\n\nexport class ElementHighlightByLegend extends BaseInteraction<ElementHighlightByLegendOptions> {\n static type: string = 'element-highlight-by-legend';\n type: string = ElementHighlightByLegend.type;\n\n static defaultOptions: ElementHighlightByLegendOptions = {\n highlightState: InteractionStateEnum.highlight,\n blurState: InteractionStateEnum.blur,\n filterType: 'groupKey'\n };\n options: ElementHighlightByLegendOptions;\n protected _marks?: IMark[];\n\n constructor(view: IView, options?: ElementHighlightByLegendOptions) {\n super(view, options);\n this.options = Object.assign({}, ElementHighlightByLegend.defaultOptions, options);\n\n this._marks = view.getMarksBySelector(this.options.selector);\n }\n\n protected getEvents() {\n return [\n {\n type: LegendEvent.legendItemHover,\n handler: this.handleStart\n },\n { type: LegendEvent.legendItemUnHover, handler: this.handleReset }\n ];\n }\n\n start(itemKey: IElement | IGlyphElement | string) {\n if (isNil(itemKey)) {\n return;\n }\n const filterValue = generateFilterValue(this.options);\n\n this._marks.forEach(mark => {\n mark.elements.forEach(el => {\n const isHighlight = filterValue(el) === itemKey;\n\n if (isHighlight) {\n el.removeState(this.options.blurState);\n el.addState(this.options.highlightState);\n } else {\n el.removeState(this.options.highlightState);\n el.addState(this.options.blurState);\n }\n });\n });\n }\n\n reset() {\n this._marks.forEach(mark => {\n mark.elements.forEach(el => {\n el.removeState(this.options.blurState);\n el.removeState(this.options.highlightState);\n });\n });\n }\n\n handleStart = (e: InteractionEvent, element: IElement | IGlyphElement) => {\n this.start(e.detail?.data?.id);\n };\n\n handleReset = (e: InteractionEvent) => {\n this.reset();\n };\n}\n"]}
|
|
@@ -13,6 +13,8 @@ export declare class ElementHighlightByName extends BaseInteraction<ElementHighl
|
|
|
13
13
|
}[];
|
|
14
14
|
protected _filterByName(e: InteractionEvent): boolean;
|
|
15
15
|
protected _parseTargetKey(e: InteractionEvent, element: IElement | IGlyphElement): any;
|
|
16
|
+
start(itemKey: IElement | IGlyphElement | string): void;
|
|
17
|
+
reset(): void;
|
|
16
18
|
handleStart: (e: InteractionEvent, element: IElement | IGlyphElement) => void;
|
|
17
19
|
handleReset: (e: InteractionEvent) => void;
|
|
18
20
|
}
|
|
@@ -11,21 +11,10 @@ class ElementHighlightByName extends base_1.BaseInteraction {
|
|
|
11
11
|
super(view, options), this.type = ElementHighlightByName.type, this.handleStart = (e, element) => {
|
|
12
12
|
if (this.options.shouldStart ? this.options.shouldStart(e) : this._filterByName(e)) {
|
|
13
13
|
const itemKey = this._parseTargetKey(e, element);
|
|
14
|
-
|
|
15
|
-
const filterValue = (0, utils_1.generateFilterValue)(this.options);
|
|
16
|
-
this._marks.forEach((mark => {
|
|
17
|
-
mark.elements.forEach((el => {
|
|
18
|
-
filterValue(el) === itemKey ? (el.removeState(this.options.blurState), el.addState(this.options.highlightState)) : (el.removeState(this.options.highlightState),
|
|
19
|
-
el.addState(this.options.blurState));
|
|
20
|
-
}));
|
|
21
|
-
}));
|
|
14
|
+
this.start(itemKey);
|
|
22
15
|
}
|
|
23
16
|
}, this.handleReset = e => {
|
|
24
|
-
(this.options.shouldReset ? this.options.shouldReset(e) : this._filterByName(e)) && this.
|
|
25
|
-
mark.elements.forEach((el => {
|
|
26
|
-
el.removeState(this.options.blurState), el.removeState(this.options.highlightState);
|
|
27
|
-
}));
|
|
28
|
-
}));
|
|
17
|
+
(this.options.shouldReset ? this.options.shouldReset(e) : this._filterByName(e)) && this.reset();
|
|
29
18
|
}, this.options = Object.assign({}, ElementHighlightByName.defaultOptions, options),
|
|
30
19
|
this._marks = view.getMarksBySelector(this.options.selector);
|
|
31
20
|
}
|
|
@@ -46,6 +35,23 @@ class ElementHighlightByName extends base_1.BaseInteraction {
|
|
|
46
35
|
_parseTargetKey(e, element) {
|
|
47
36
|
return this.options.parseData ? this.options.parseData(e) : "text" === e.target.type ? e.target.attribute.text : null;
|
|
48
37
|
}
|
|
38
|
+
start(itemKey) {
|
|
39
|
+
if ((0, vutils_1.isNil)(itemKey)) return;
|
|
40
|
+
const filterValue = (0, utils_1.generateFilterValue)(this.options);
|
|
41
|
+
this._marks.forEach((mark => {
|
|
42
|
+
mark.elements.forEach((el => {
|
|
43
|
+
filterValue(el) === itemKey ? (el.removeState(this.options.blurState), el.addState(this.options.highlightState)) : (el.removeState(this.options.highlightState),
|
|
44
|
+
el.addState(this.options.blurState));
|
|
45
|
+
}));
|
|
46
|
+
}));
|
|
47
|
+
}
|
|
48
|
+
reset() {
|
|
49
|
+
this._marks.forEach((mark => {
|
|
50
|
+
mark.elements.forEach((el => {
|
|
51
|
+
el.removeState(this.options.blurState), el.removeState(this.options.highlightState);
|
|
52
|
+
}));
|
|
53
|
+
}));
|
|
54
|
+
}
|
|
49
55
|
}
|
|
50
56
|
|
|
51
57
|
exports.ElementHighlightByName = ElementHighlightByName, ElementHighlightByName.type = "element-highlight-by-name",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interactions/element-highlight-by-name.ts"],"names":[],"mappings":";;;AAAA,0CAAsD;AAEtD,iCAAyC;AACzC,6CAAgD;AAChD,mCAA8C;AAE9C,MAAa,sBAAuB,SAAQ,sBAA8C;IAcxF,YAAY,IAAW,EAAE,OAAuC;QAC9D,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAbvB,SAAI,GAAW,sBAAsB,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"sources":["../src/interactions/element-highlight-by-name.ts"],"names":[],"mappings":";;;AAAA,0CAAsD;AAEtD,iCAAyC;AACzC,6CAAgD;AAChD,mCAA8C;AAE9C,MAAa,sBAAuB,SAAQ,sBAA8C;IAcxF,YAAY,IAAW,EAAE,OAAuC;QAC9D,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAbvB,SAAI,GAAW,sBAAsB,CAAC,IAAI,CAAC;QAwE3C,gBAAW,GAAG,CAAC,CAAmB,EAAE,OAAiC,EAAE,EAAE;YACvE,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YAClG,IAAI,UAAU,EAAE;gBACd,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;gBACjD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;YACpC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YAElG,IAAI,UAAU,EAAE;gBACd,IAAI,CAAC,KAAK,EAAE,CAAC;aACd;QACH,CAAC,CAAC;QAxEA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,sBAAsB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QAEjF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC/D,CAAC;IAES,SAAS;QACjB,OAAO;YACL;gBACE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;gBAC1B,OAAO,EAAE,IAAI,CAAC,WAAW;aAC1B;YACD,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;SAC7D,CAAC;IACJ,CAAC;IAES,aAAa,CAAC,CAAmB;;QACzC,MAAM,KAAK,GAAG,IAAA,cAAK,EAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAC9C,OAAO,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,IAAI,KAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC;IAES,eAAe,CAAC,CAAmB,EAAE,OAAiC;QAC9E,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS;YAC3B,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;YAC3B,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;gBAC1B,CAAC,CAAE,CAAC,CAAC,MAAM,CAAC,SAAiB,CAAC,IAAI;gBAClC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAED,KAAK,CAAC,OAA0C;QAC9C,IAAI,IAAA,cAAK,EAAC,OAAO,CAAC,EAAE;YAClB,OAAO;SACR;QAED,MAAM,WAAW,GAAG,IAAA,2BAAmB,EAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACzB,MAAM,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;gBAChD,IAAI,WAAW,EAAE;oBACf,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;oBACvC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;iBAC1C;qBAAM;oBACL,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;oBAC5C,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;iBACrC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACzB,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBACvC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC9C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;;AAxEH,wDAyFC;AAxFQ,2BAAI,GAAW,2BAA2B,CAAC;AAG3C,qCAAc,GAAkC;IACrD,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,YAAY;IACxB,cAAc,EAAE,4BAAoB,CAAC,SAAS;IAC9C,SAAS,EAAE,4BAAoB,CAAC,IAAI;IACpC,UAAU,EAAE,UAAU;CACvB,CAAC","file":"element-highlight-by-name.js","sourcesContent":["import { InteractionStateEnum } from '../graph/enums';\nimport type { ElementHighlightByNameOptions, IElement, IGlyphElement, IMark, IView, InteractionEvent } from '../types';\nimport { BaseInteraction } from './base';\nimport { array, isNil } from '@visactor/vutils';\nimport { generateFilterValue } from './utils';\n\nexport class ElementHighlightByName extends BaseInteraction<ElementHighlightByNameOptions> {\n static type: string = 'element-highlight-by-name';\n type: string = ElementHighlightByName.type;\n\n static defaultOptions: ElementHighlightByNameOptions = {\n trigger: 'pointerover',\n triggerOff: 'pointerout',\n highlightState: InteractionStateEnum.highlight,\n blurState: InteractionStateEnum.blur,\n filterType: 'groupKey'\n };\n options: ElementHighlightByNameOptions;\n protected _marks?: IMark[];\n\n constructor(view: IView, options?: ElementHighlightByNameOptions) {\n super(view, options);\n this.options = Object.assign({}, ElementHighlightByName.defaultOptions, options);\n\n this._marks = view.getMarksBySelector(this.options.selector);\n }\n\n protected getEvents() {\n return [\n {\n type: this.options.trigger,\n handler: this.handleStart\n },\n { type: this.options.triggerOff, handler: this.handleReset }\n ];\n }\n\n protected _filterByName(e: InteractionEvent) {\n const names = array(this.options.graphicName);\n return e?.target?.name && names.includes(e.target.name);\n }\n\n protected _parseTargetKey(e: InteractionEvent, element: IElement | IGlyphElement) {\n return this.options.parseData\n ? this.options.parseData(e)\n : e.target.type === 'text'\n ? (e.target.attribute as any).text\n : null;\n }\n\n start(itemKey: IElement | IGlyphElement | string) {\n if (isNil(itemKey)) {\n return;\n }\n\n const filterValue = generateFilterValue(this.options);\n\n this._marks.forEach(mark => {\n mark.elements.forEach(el => {\n const isHighlight = filterValue(el) === itemKey;\n if (isHighlight) {\n el.removeState(this.options.blurState);\n el.addState(this.options.highlightState);\n } else {\n el.removeState(this.options.highlightState);\n el.addState(this.options.blurState);\n }\n });\n });\n }\n\n reset() {\n this._marks.forEach(mark => {\n mark.elements.forEach(el => {\n el.removeState(this.options.blurState);\n el.removeState(this.options.highlightState);\n });\n });\n }\n\n handleStart = (e: InteractionEvent, element: IElement | IGlyphElement) => {\n const shoudStart = this.options.shouldStart ? this.options.shouldStart(e) : this._filterByName(e);\n if (shoudStart) {\n const itemKey = this._parseTargetKey(e, element);\n this.start(itemKey);\n }\n };\n\n handleReset = (e: InteractionEvent) => {\n const shoudReset = this.options.shouldReset ? this.options.shouldReset(e) : this._filterByName(e);\n\n if (shoudReset) {\n this.reset();\n }\n };\n}\n"]}
|
|
@@ -18,6 +18,8 @@ export declare class ElementHighlight extends BaseInteraction<ElementHighlightOp
|
|
|
18
18
|
handler: (e: InteractionEvent) => void;
|
|
19
19
|
}[];
|
|
20
20
|
clearPrevElements(): void;
|
|
21
|
+
start(element: InteractionEvent['element']): void;
|
|
22
|
+
reset(element: InteractionEvent['element']): void;
|
|
21
23
|
handleStart: (e: InteractionEvent) => void;
|
|
22
24
|
handleReset: (e: InteractionEvent) => void;
|
|
23
25
|
}
|
|
@@ -9,19 +9,9 @@ const enums_1 = require("../graph/enums"), base_1 = require("./base"), utils_1 =
|
|
|
9
9
|
class ElementHighlight extends base_1.BaseInteraction {
|
|
10
10
|
constructor(view, options) {
|
|
11
11
|
super(view, options), this.type = ElementHighlight.type, this.handleStart = e => {
|
|
12
|
-
|
|
13
|
-
const {highlightState: highlightState, blurState: blurState} = this.options;
|
|
14
|
-
if (this._lastElement === e.element) return;
|
|
15
|
-
this._statedElements = this.updateStates([ e.element ], this._statedElements, highlightState, blurState),
|
|
16
|
-
this._lastElement = e.element, this.dispatchEvent("start", {
|
|
17
|
-
elements: [ e.element ],
|
|
18
|
-
options: this.options
|
|
19
|
-
});
|
|
20
|
-
} else this._lastElement && "view" === this._resetType && this.clearPrevElements();
|
|
12
|
+
this.start(e.element);
|
|
21
13
|
}, this.handleReset = e => {
|
|
22
|
-
|
|
23
|
-
const hasActiveElement = e.element && this._marks && this._marks.includes(e.element.mark);
|
|
24
|
-
"view" !== this._resetType || hasActiveElement ? "self" === this._resetType && hasActiveElement && this.clearPrevElements() : this.clearPrevElements();
|
|
14
|
+
this.reset(e.element);
|
|
25
15
|
}, this.options = Object.assign({}, ElementHighlight.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector),
|
|
26
16
|
this._stateMarks = (0, utils_1.groupMarksByState)(this._marks, [ this.options.highlightState, this.options.blurState ]);
|
|
27
17
|
}
|
|
@@ -44,6 +34,22 @@ class ElementHighlight extends base_1.BaseInteraction {
|
|
|
44
34
|
options: this.options
|
|
45
35
|
}), this._lastElement = null, this._statedElements = null);
|
|
46
36
|
}
|
|
37
|
+
start(element) {
|
|
38
|
+
if (element && this._marks && this._marks.includes(element.mark)) {
|
|
39
|
+
const {highlightState: highlightState, blurState: blurState} = this.options;
|
|
40
|
+
if (this._lastElement === element) return;
|
|
41
|
+
this._statedElements = this.updateStates([ element ], this._statedElements, highlightState, blurState),
|
|
42
|
+
this._lastElement = element, this.dispatchEvent("start", {
|
|
43
|
+
elements: [ element ],
|
|
44
|
+
options: this.options
|
|
45
|
+
});
|
|
46
|
+
} else this._lastElement && "view" === this._resetType && this.clearPrevElements();
|
|
47
|
+
}
|
|
48
|
+
reset(element) {
|
|
49
|
+
if (!this._statedElements || !this._statedElements.length) return;
|
|
50
|
+
const hasActiveElement = element && this._marks && this._marks.includes(element.mark);
|
|
51
|
+
"view" !== this._resetType || hasActiveElement ? "self" === this._resetType && hasActiveElement && this.clearPrevElements() : this.clearPrevElements();
|
|
52
|
+
}
|
|
47
53
|
}
|
|
48
54
|
|
|
49
55
|
exports.ElementHighlight = ElementHighlight, ElementHighlight.type = "element-highlight",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interactions/element-highlight.ts"],"names":[],"mappings":";;;AAAA,0CAAsD;AAWtD,iCAAyC;AACzC,mCAA4C;AAC5C,6CAA4C;AAI5C,MAAa,gBAAiB,SAAQ,sBAAwC;IAiB5E,YAAY,IAAW,EAAE,OAAiC;QACxD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAhBvB,SAAI,GAAW,gBAAgB,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"sources":["../src/interactions/element-highlight.ts"],"names":[],"mappings":"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","file":"element-highlight.js","sourcesContent":["import { InteractionStateEnum } from '../graph/enums';\nimport type {\n ElementHighlightOptions,\n EventType,\n IElement,\n IGlyphElement,\n IMark,\n IToggleStateMixin,\n IView,\n InteractionEvent\n} from '../types';\nimport { BaseInteraction } from './base';\nimport { groupMarksByState } from './utils';\nimport { isString } from '@visactor/vutils';\n\nexport interface ElementHighlight extends IToggleStateMixin, BaseInteraction<ElementHighlightOptions> {}\n\nexport class ElementHighlight extends BaseInteraction<ElementHighlightOptions> {\n static type: string = 'element-highlight';\n type: string = ElementHighlight.type;\n\n static defaultOptions: ElementHighlightOptions = {\n highlightState: InteractionStateEnum.highlight,\n blurState: InteractionStateEnum.blur,\n trigger: 'pointerover',\n triggerOff: 'pointerout'\n };\n options: ElementHighlightOptions;\n protected _marks?: IMark[];\n protected _stateMarks: Record<string, IMark[]>;\n protected _lastElement?: IElement;\n protected _statedElements?: (IElement | IGlyphElement)[];\n protected _resetType?: 'view' | 'self';\n\n constructor(view: IView, options?: ElementHighlightOptions) {\n super(view, options);\n this.options = Object.assign({}, ElementHighlight.defaultOptions, options);\n\n this._marks = view.getMarksBySelector(this.options.selector);\n this._stateMarks = groupMarksByState(this._marks, [this.options.highlightState, this.options.blurState]);\n }\n\n protected getEvents() {\n const triggerOff = this.options.triggerOff;\n const trigger = this.options.trigger;\n const events = [\n {\n type: trigger,\n handler: this.handleStart\n }\n ];\n\n let eventName = triggerOff;\n if (isString(triggerOff) && (triggerOff as string).includes('view:')) {\n eventName = (triggerOff as string).replace('view:', '') as EventType;\n this._resetType = 'view';\n } else {\n this._resetType = 'self';\n }\n\n events.push({ type: eventName as EventType, handler: this.handleReset });\n\n return events;\n }\n\n clearPrevElements() {\n const { highlightState, blurState } = this.options;\n\n if (this._lastElement) {\n this.clearAllStates(highlightState, blurState);\n\n this.dispatchEvent('reset', { elements: [this._lastElement], options: this.options });\n\n this._lastElement = null;\n\n this._statedElements = null;\n }\n }\n\n start(element: InteractionEvent['element']) {\n if (element && this._marks && this._marks.includes(element.mark)) {\n const { highlightState, blurState } = this.options;\n\n if (this._lastElement === element) {\n return;\n }\n\n this._statedElements = this.updateStates([element], this._statedElements, highlightState, blurState);\n\n this._lastElement = element;\n\n this.dispatchEvent('start', { elements: [element], options: this.options });\n } else if (this._lastElement && this._resetType === 'view') {\n this.clearPrevElements();\n }\n }\n\n reset(element: InteractionEvent['element']) {\n if (!this._statedElements || !this._statedElements.length) {\n return;\n }\n\n const hasActiveElement = element && this._marks && this._marks.includes(element.mark);\n\n if (this._resetType === 'view' && !hasActiveElement) {\n this.clearPrevElements();\n } else if (this._resetType === 'self' && hasActiveElement) {\n this.clearPrevElements();\n }\n }\n\n handleStart = (e: InteractionEvent) => {\n this.start(e.element);\n };\n\n handleReset = (e: InteractionEvent) => {\n this.reset(e.element);\n };\n}\n"]}
|
|
@@ -19,4 +19,6 @@ export declare class ElementSelect extends BaseInteraction<ElementSelectOptions>
|
|
|
19
19
|
clearPrevElements: () => void;
|
|
20
20
|
handleStart: (e: InteractionEvent) => void;
|
|
21
21
|
handleReset: (e: InteractionEvent) => void;
|
|
22
|
+
start(element: InteractionEvent['element']): void;
|
|
23
|
+
reset(element: InteractionEvent['element']): void;
|
|
22
24
|
}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: !0
|
|
5
5
|
}), exports.ElementSelect = void 0;
|
|
6
6
|
|
|
7
|
-
const vutils_1 = require("@visactor/vutils"), enums_1 = require("../graph/enums"),
|
|
7
|
+
const vutils_1 = require("@visactor/vutils"), enums_1 = require("../graph/enums"), utils_1 = require("./utils"), base_1 = require("./base");
|
|
8
8
|
|
|
9
9
|
class ElementSelect extends base_1.BaseInteraction {
|
|
10
10
|
constructor(view, options) {
|
|
@@ -16,19 +16,9 @@ class ElementSelect extends base_1.BaseInteraction {
|
|
|
16
16
|
options: this.options
|
|
17
17
|
}), this._statedElements = []);
|
|
18
18
|
}, this.handleStart = e => {
|
|
19
|
-
|
|
20
|
-
e.element && this._marks && this._marks.includes(e.element.mark) ? e.element.hasState(state) ? "self" === this._resetType && (this._statedElements = this.updateStates(this._statedElements && this._statedElements.filter((el => el !== e.element)), this._statedElements, state, reverseState)) : (this._timer && clearTimeout(this._timer),
|
|
21
|
-
e.element.addState(state), this._statedElements = this.updateStates(isMultiple && this._statedElements ? [ ...this._statedElements, e.element ] : [ e.element ], this._statedElements, state, reverseState),
|
|
22
|
-
this.dispatchEvent("start", {
|
|
23
|
-
elements: this._statedElements,
|
|
24
|
-
options: this.options
|
|
25
|
-
}), "timeout" === this._resetType && (this._timer = setTimeout((() => {
|
|
26
|
-
this.clearPrevElements();
|
|
27
|
-
}), this.options.triggerOff))) : "view" === this._resetType && this._statedElements && this._statedElements.length && this.clearPrevElements();
|
|
19
|
+
this.start(e.element);
|
|
28
20
|
}, this.handleReset = e => {
|
|
29
|
-
|
|
30
|
-
const hasActiveElement = e.element && this._marks && this._marks.includes(e.element.mark);
|
|
31
|
-
"view" !== this._resetType || hasActiveElement ? "self" === this._resetType && hasActiveElement && this.clearPrevElements() : this.clearPrevElements();
|
|
21
|
+
this.reset(e.element);
|
|
32
22
|
}, this.options = Object.assign({}, ElementSelect.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector),
|
|
33
23
|
this._stateMarks = (0, utils_1.groupMarksByState)(this._marks, [ this.options.state, this.options.reverseState ]);
|
|
34
24
|
}
|
|
@@ -47,6 +37,22 @@ class ElementSelect extends base_1.BaseInteraction {
|
|
|
47
37
|
handler: this.handleReset
|
|
48
38
|
}), events;
|
|
49
39
|
}
|
|
40
|
+
start(element) {
|
|
41
|
+
const {state: state, reverseState: reverseState, isMultiple: isMultiple} = this.options;
|
|
42
|
+
element && this._marks && this._marks.includes(element.mark) ? element.hasState(state) ? "self" === this._resetType && (this._statedElements = this.updateStates(this._statedElements && this._statedElements.filter((el => el !== element)), this._statedElements, state, reverseState)) : (this._timer && clearTimeout(this._timer),
|
|
43
|
+
element.addState(state), this._statedElements = this.updateStates(isMultiple && this._statedElements ? [ ...this._statedElements, element ] : [ element ], this._statedElements, state, reverseState),
|
|
44
|
+
this.dispatchEvent("start", {
|
|
45
|
+
elements: this._statedElements,
|
|
46
|
+
options: this.options
|
|
47
|
+
}), "timeout" === this._resetType && (this._timer = setTimeout((() => {
|
|
48
|
+
this.clearPrevElements();
|
|
49
|
+
}), this.options.triggerOff))) : "view" === this._resetType && this._statedElements && this._statedElements.length && this.clearPrevElements();
|
|
50
|
+
}
|
|
51
|
+
reset(element) {
|
|
52
|
+
if (!this._statedElements || !this._statedElements.length) return;
|
|
53
|
+
const hasActiveElement = element && this._marks && this._marks.includes(element.mark);
|
|
54
|
+
"view" !== this._resetType || hasActiveElement ? "self" === this._resetType && hasActiveElement && this.clearPrevElements() : this.clearPrevElements();
|
|
55
|
+
}
|
|
50
56
|
}
|
|
51
57
|
|
|
52
58
|
exports.ElementSelect = ElementSelect, ElementSelect.type = "element-select", ElementSelect.defaultOptions = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interactions/element-select.ts"],"names":[],"mappings":";;;AAAA,6CAAsD;AACtD,0CAAsD;AAWtD,
|
|
1
|
+
{"version":3,"sources":["../src/interactions/element-select.ts"],"names":[],"mappings":"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","file":"element-select.js","sourcesContent":["import { isNumber, isString } from '@visactor/vutils';\nimport { InteractionStateEnum } from '../graph/enums';\nimport type {\n ElementSelectOptions,\n EventType,\n IElement,\n IGlyphElement,\n IMark,\n IToggleStateMixin,\n IView,\n InteractionEvent\n} from '../types';\nimport { groupMarksByState } from './utils';\nimport { BaseInteraction } from './base';\n\nexport interface ElementSelect extends IToggleStateMixin, BaseInteraction<ElementSelectOptions> {}\n\nexport class ElementSelect extends BaseInteraction<ElementSelectOptions> {\n static type: string = 'element-select';\n type: string = ElementSelect.type;\n\n static defaultOptions: ElementSelectOptions = {\n state: InteractionStateEnum.selected,\n trigger: 'click'\n };\n protected _resetType?: 'view' | 'self' | 'timeout';\n protected _marks?: IMark[];\n protected _stateMarks: Record<string, IMark[]>;\n private _timer?: number;\n protected _statedElements?: (IElement | IGlyphElement)[];\n\n constructor(view: IView, options?: ElementSelectOptions) {\n super(view, options);\n this.options = Object.assign({}, ElementSelect.defaultOptions, options);\n\n this._marks = view.getMarksBySelector(this.options.selector);\n this._stateMarks = groupMarksByState(this._marks, [this.options.state, this.options.reverseState]);\n }\n\n protected getEvents() {\n const triggerOff = this.options.triggerOff;\n const trigger = this.options.trigger;\n\n const events = [\n {\n type: trigger,\n handler: this.handleStart\n }\n ];\n\n let eventName = triggerOff;\n\n if (triggerOff === 'empty') {\n eventName = trigger as EventType;\n\n this._resetType = 'view';\n } else if (isString(triggerOff)) {\n if ((triggerOff as string).includes('view:')) {\n eventName = (triggerOff as string).replace('view:', '') as EventType;\n\n this._resetType = 'view';\n } else {\n eventName = triggerOff;\n\n this._resetType = 'self';\n }\n } else if (isNumber(triggerOff)) {\n eventName = null;\n this._resetType = 'timeout';\n } else {\n this._resetType = null;\n }\n\n if (eventName && eventName !== trigger) {\n events.push({ type: eventName as EventType, handler: this.handleReset });\n }\n\n return events;\n }\n\n clearPrevElements = () => {\n const { state, reverseState } = this.options;\n\n if (this._statedElements && this._statedElements.length) {\n this.clearAllStates(state, reverseState);\n this.dispatchEvent('reset', { elements: this._statedElements, options: this.options });\n\n this._statedElements = [];\n }\n };\n\n handleStart = (e: InteractionEvent) => {\n this.start(e.element);\n };\n\n handleReset = (e: InteractionEvent) => {\n this.reset(e.element);\n };\n\n start(element: InteractionEvent['element']) {\n const { state, reverseState, isMultiple } = this.options;\n if (element && this._marks && this._marks.includes(element.mark)) {\n if (element.hasState(state)) {\n if (this._resetType === 'self') {\n this._statedElements = this.updateStates(\n this._statedElements && this._statedElements.filter(el => el !== element),\n this._statedElements,\n state,\n reverseState\n );\n }\n } else {\n if (this._timer) {\n clearTimeout(this._timer);\n }\n element.addState(state);\n\n this._statedElements = this.updateStates(\n isMultiple && this._statedElements ? [...this._statedElements, element] : [element],\n this._statedElements,\n state,\n reverseState\n );\n this.dispatchEvent('start', { elements: this._statedElements, options: this.options });\n\n if (this._resetType === 'timeout') {\n this._timer = setTimeout(() => {\n this.clearPrevElements();\n }, this.options.triggerOff as number) as unknown as number;\n }\n }\n } else if (this._resetType === 'view' && this._statedElements && this._statedElements.length) {\n this.clearPrevElements();\n }\n }\n\n reset(element: InteractionEvent['element']) {\n if (!this._statedElements || !this._statedElements.length) {\n return;\n }\n\n const hasActiveElement = element && this._marks && this._marks.includes(element.mark);\n\n if (this._resetType === 'view' && !hasActiveElement) {\n this.clearPrevElements();\n } else if (this._resetType === 'self' && hasActiveElement) {\n this.clearPrevElements();\n }\n }\n}\n"]}
|
|
@@ -31,6 +31,8 @@ export interface IInteraction<T = any> {
|
|
|
31
31
|
depend: (grammar: IGrammarBase[] | IGrammarBase | string[] | string) => void;
|
|
32
32
|
bind: () => void;
|
|
33
33
|
unbind: () => void;
|
|
34
|
+
start: (element: IElement | IGlyphElement | string | any) => void;
|
|
35
|
+
reset: (element?: IElement | IGlyphElement) => void;
|
|
34
36
|
}
|
|
35
37
|
export interface IInteractionConstructor<T = any> {
|
|
36
38
|
readonly type: string;
|