@visactor/vgrammar-plot 0.7.7 → 0.8.0-alpha.0

package/es/semantic-mark.d.ts

@@ -1,6 +1,6 @@
 import type { ILogger } from '@visactor/vutils';
-import type { ISemanticMark, ISemanticMarkSpec, ParsedSimpleEncode, WithDefaultEncode, SemanticTooltipOption, SemanticAxisOption, SemanticPlayerOption, SemanticLabelOption, SemanticDataZoomOption, SemanticSliderOption, SemanticLegendOption, SemanticCrosshairOption, CoordinateOption, AxisSpec, CrosshairSpec, DatazoomSpec, DimensionTooltipSpec, LabelSpec, LegendSpec, PlayerSpec, SliderSpec, TooltipSpec, CoordinateSpec, DataSpec, ChannelEncodeType, ScaleSpec, TransformSpec, MarkAnimationSpec, ViewSpec, MarkType, Nil, ValueOf, GenerateBaseEncodeSpec, IAnimationConfig, MarkSpec, MarkRelativeItemSpec, IPlot, SemanticGridOption, GridSpec, TitleSpec, SemanticTitleOption } from '@visactor/vgrammar-core';
-import type { ITextAttribute } from '@visactor/vrender';
+import type { ISemanticMark, ISemanticMarkSpec, ParsedSimpleEncode, WithDefaultEncode, SemanticTooltipOption, SemanticAxisOption, SemanticPlayerOption, SemanticLabelOption, SemanticDataZoomOption, SemanticSliderOption, SemanticLegendOption, SemanticCrosshairOption, CoordinateOption, AxisSpec, CrosshairSpec, DatazoomSpec, LabelSpec, LegendSpec, PlayerSpec, SliderSpec, CoordinateSpec, DataSpec, ChannelEncodeType, ScaleSpec, TransformSpec, MarkAnimationSpec, ViewSpec, MarkType, Nil, ValueOf, GenerateBaseEncodeSpec, IAnimationConfig, MarkSpec, MarkRelativeItemSpec, IPlot, SemanticGridOption, GridSpec, TitleSpec, SemanticTitleOption, InteractionSpec } from '@visactor/vgrammar-core';
+import type { ITextAttribute } from '@visactor/vrender-core';
 export declare abstract class SemanticMark<EncodeSpec, K extends string> implements ISemanticMark<EncodeSpec, K> {
     spec: ISemanticMarkSpec<EncodeSpec, K>;
     viewSpec?: ViewSpec;
@@ -29,7 +29,7 @@ export declare abstract class SemanticMark<EncodeSpec, K extends string> impleme
     label(channel: string, option?: SemanticLabelOption | boolean): this;
     player(data?: any[], option?: SemanticPlayerOption | boolean, layout?: MarkRelativeItemSpec): this;
     title(option: SemanticTitleOption, layout?: MarkRelativeItemSpec): this;
-    protected getPalette(): import("@visactor/vrender").IColor[];
+    protected getPalette(): import("@visactor/vrender-core").IColor[];
     abstract setMarkType(): MarkType;
     abstract parseScaleByEncode(channel: K, option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     abstract convertMarkEncode(encode: WithDefaultEncode<EncodeSpec, K>): GenerateBaseEncodeSpec<EncodeSpec>;
@@ -48,6 +48,7 @@ export declare abstract class SemanticMark<EncodeSpec, K extends string> impleme
     };
     protected getScaleId(channel: string): any;
     protected getMarkId(): string;
+    protected getComponentId(id: string, component?: string): string;
     protected getScaleSpec(scaleId: string): ScaleSpec;
     protected parseScaleOfEncodeX(option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     protected parseScaleOfEncodeY(option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
@@ -56,8 +57,14 @@ export declare abstract class SemanticMark<EncodeSpec, K extends string> impleme
     protected parseScaleOfEncodeGroup(option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     protected parseScaleOfCommonEncode(channel: K, option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     protected setDefaultAxis(): Record<string, Partial<AxisSpec>>;
-    protected parseAxisSpec(): AxisSpec[];
-    protected parseGridSpec(): GridSpec[];
+    protected parseAxisSpec(): {
+        marks: AxisSpec[];
+        interactions: InteractionSpec[];
+    };
+    protected parseGridSpec(): {
+        marks: GridSpec[];
+        interactions: InteractionSpec[];
+    };
     protected parseOption<T>(spec: {
         option: T | boolean;
         layout?: MarkRelativeItemSpec;
@@ -66,24 +73,48 @@ export declare abstract class SemanticMark<EncodeSpec, K extends string> impleme
         layout: MarkRelativeItemSpec;
     };
     protected setDefaultLegend(): Record<string, Partial<LegendSpec>>;
-    protected parseLegendSpec(): LegendSpec[];
+    protected parseLegendSpec(): {
+        marks: LegendSpec[];
+        interactions: InteractionSpec[];
+    };
     protected setDefaultCrosshair(): Record<string, Pick<CrosshairSpec, 'crosshairShape' | 'crosshairType'>>;
     protected getVisualChannel(channel: 'x' | 'y'): 'x' | 'y' | 'angle' | 'radius';
-    protected parseCrosshairSpec(): CrosshairSpec[];
+    protected parseCrosshairSpec(): {
+        marks: MarkSpec[];
+        interactions: CrosshairSpec[];
+    };
     protected setDefaultTooltip(): SemanticTooltipOption | Nil;
-    protected parseTooltipSpec(): Array<TooltipSpec | DimensionTooltipSpec> | Nil;
+    protected parseTooltipSpec(): {
+        marks: MarkSpec[];
+        interactions: InteractionSpec[];
+    };
     protected setDefaultSlider(): Record<string, Partial<SliderSpec>>;
-    protected parseSliderSpec(): SliderSpec[];
+    protected parseSliderSpec(): {
+        marks: SliderSpec[];
+        interactions: InteractionSpec[];
+    };
     protected setDefaultDataZoom(): Record<string, Partial<DatazoomSpec>>;
     protected getVisiualPositionByDimension(channel: string): "left" | "bottom";
-    protected parseDataZoomSpec(): DatazoomSpec[];
+    protected parseDatazoomSpec(): {
+        marks: DatazoomSpec[];
+        interactions: InteractionSpec[];
+    };
     protected setDefaultLabel(): Record<string, Partial<LabelSpec>>;
     protected getLabelPosition(): string;
     protected setLabelTextGetter(channel: string, option: SemanticLabelOption | boolean): ChannelEncodeType<ITextAttribute['text']>;
-    protected parseLabelSpec(): LabelSpec[];
+    protected parseLabelSpec(): {
+        marks: LabelSpec[];
+        interactions: InteractionSpec[];
+    };
     protected setDefaultPlayer(): Record<string, Partial<PlayerSpec>>;
-    protected parsePlayerSpec(): PlayerSpec[];
-    protected parseTitleSpec(): TitleSpec[];
+    protected parsePlayerSpec(): {
+        marks: PlayerSpec[];
+        interactions: InteractionSpec[];
+    };
+    protected parseTitleSpec(): {
+        marks: TitleSpec[];
+        interactions: InteractionSpec[];
+    };
     protected parseDataSpec(): DataSpec[];
     protected parseScaleSpec(): (ScaleSpec & {
         userScale?: ScaleSpec;

package/es/semantic-mark.js

@@ -187,6 +187,9 @@ export class SemanticMark {
     getMarkId() {
         return `${this.spec.id}-mark`;
     }
+    getComponentId(id, component) {
+        return `${this.spec.id}-${null != component ? component : "component"}-${id}`;
+    }
     getScaleSpec(scaleId) {
         var _a, _b, _c;
         return null === (_c = null === (_b = null === (_a = this.viewSpec) || void 0 === _a ? void 0 : _a.scales) || void 0 === _b ? void 0 : _b.find) || void 0 === _c ? void 0 : _c.call(_b, (scale => scale.id === scaleId));
@@ -261,7 +264,10 @@ export class SemanticMark {
         return {};
     }
     parseAxisSpec() {
-        const axis = this.spec.axis, res = [];
+        const axis = this.spec.axis, res = {
+            marks: [],
+            interactions: []
+        };
         return axis && Object.keys(axis).forEach((channel => {
             const {option: option, layout: layout} = this.parseOption(axis[channel]);
             if (option) {
@@ -303,12 +309,15 @@ export class SemanticMark {
                 };
                 axisMarkSpec.layout = null != layout ? layout : {
                     position: this._coordinate ? "auto" : isPlainObject(layout) && !isNil(layout.orient) ? layout.orient : "x" === channel ? "bottom" : "left"
-                }, res.push(axisMarkSpec);
+                }, res.marks.push(axisMarkSpec);
             }
         })), res;
     }
     parseGridSpec() {
-        const grid = this.spec.grid, res = [];
+        const grid = this.spec.grid, res = {
+            marks: [],
+            interactions: []
+        };
         return grid && Object.keys(grid).forEach((channel => {
             var _a, _b, _c, _d, _e;
             const option = grid[channel];
@@ -357,7 +366,7 @@ export class SemanticMark {
                         }
                     }
                 };
-                res.push(markSpec);
+                res.marks.push(markSpec);
             }
         })), res;
     }
@@ -373,7 +382,10 @@ export class SemanticMark {
         return {};
     }
     parseLegendSpec() {
-        const legend = this.spec.legend, res = [];
+        const legend = this.spec.legend, res = {
+            marks: [],
+            interactions: []
+        };
         return legend && Object.keys(legend).forEach((channel => {
             var _a;
             const {option: option, layout: layout} = this.parseOption(legend[channel]);
@@ -392,14 +404,11 @@ export class SemanticMark {
                     align: "center"
                 }, markSpec = {
                     type: "component",
+                    id: this.getComponentId(channel, "legend"),
                     componentType: ComponentEnum.legend,
                     scale: this.getScaleId(channel),
                     shapeScale: this.getScaleId("shape"),
                     dependency: [ SIGNAL_VIEW_BOX ],
-                    target: {
-                        data: this.getDataIdOfFiltered(),
-                        filter: null === (_a = this.spec.encode) || void 0 === _a ? void 0 : _a[channel]
-                    },
                     encode: {
                         update: (datum, element, params) => {
                             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
@@ -424,7 +433,16 @@ export class SemanticMark {
                         }
                     }
                 };
-                markSpec.layout = markLayout, res.push(markSpec);
+                markSpec.layout = markLayout;
+                const interactionSpec = {
+                    type: "legend-filter",
+                    source: `#${this.getComponentId(channel, "legend")}`,
+                    target: {
+                        data: this.getDataIdOfFiltered(),
+                        filter: null === (_a = this.spec.encode) || void 0 === _a ? void 0 : _a[channel]
+                    }
+                };
+                res.marks.push(markSpec), res.interactions.push(interactionSpec);
             }
         })), res;
     }
@@ -437,38 +455,38 @@ export class SemanticMark {
     }
     parseCrosshairSpec() {
         const defaultCrosshair = this.setDefaultCrosshair(), defaultKeys = Object.keys(defaultCrosshair), crosshairKeys = this.spec.crosshair ? Object.keys(this.spec.crosshair).reduce(((res, key) => (res.includes(key) || res.push(key), 
-        res)), defaultKeys) : defaultKeys, res = [];
+        res)), defaultKeys) : defaultKeys, res = {
+            marks: [],
+            interactions: []
+        };
         return crosshairKeys.length && crosshairKeys.forEach((channel => {
             var _a, _b;
             const userOption = null === (_a = this.spec.crosshair) || void 0 === _a ? void 0 : _a[channel], option = null != userOption ? userOption : defaultCrosshair[channel];
             if (option) {
-                const scaleId = this.getScaleId(channel), scaleSpec = this.getScaleSpec(scaleId), markSpec = {
-                    type: "component",
-                    componentType: ComponentEnum.crosshair,
+                const scaleId = this.getScaleId(channel), scaleSpec = this.getScaleSpec(scaleId), interactionSpec = {
+                    type: "crosshair",
                     scale: this.getScaleId(channel),
-                    dependency: [ SIGNAL_VIEW_BOX ],
                     crosshairShape: isBoolean(option) ? "band" === (null == scaleSpec ? void 0 : scaleSpec.type) ? "rect" : "line" : null !== (_b = option.crosshairShape) && void 0 !== _b ? _b : "band" === (null == scaleSpec ? void 0 : scaleSpec.type) ? "rect" : "line",
-                    crosshairType: this.getVisualChannel(channel)
+                    crosshairType: this.getVisualChannel(channel),
+                    container: "#plotContainer"
                 };
-                if (isPlainObject(userOption) && (markSpec.encode = {
-                    update: userOption
-                }, "polygon" === userOption.type)) {
-                    markSpec.crosshairType = "radius-polygon";
+                if (isPlainObject(userOption) && (interactionSpec.attributes = userOption, "polygon" === userOption.type)) {
+                    interactionSpec.crosshairType = "radius-polygon";
                     const anotherDimScaleId = this.getScaleId("x" === channel ? "y" : "x");
-                    markSpec.dependency.push(anotherDimScaleId), markSpec.encode.update.sides = (datum, el, params) => {
+                    interactionSpec.attributes.sides = (datum, params) => {
                         const scale = params[anotherDimScaleId];
                         return scale && isDiscrete(scale.type) ? scale.domain().length : void 0;
-                    }, markSpec.encode.update.startAngle = (datum, el, params) => {
+                    }, interactionSpec.attributes.startAngle = (datum, params) => {
                         var _a, _b;
                         const scale = params[anotherDimScaleId];
                         return scale && isDiscrete(scale.type) ? scale.range()[0] + (null !== (_b = null === (_a = null == scale ? void 0 : scale.bandwidth) || void 0 === _a ? void 0 : _a.call(scale)) && void 0 !== _b ? _b : 0) / 2 : void 0;
-                    }, markSpec.encode.update.endAngle = (datum, el, params) => {
+                    }, interactionSpec.attributes.endAngle = (datum, params) => {
                         var _a, _b;
                         const scale = params[anotherDimScaleId];
                         return scale && isDiscrete(scale.type) ? scale.range()[1] + (null !== (_b = null === (_a = null == scale ? void 0 : scale.bandwidth) || void 0 === _a ? void 0 : _a.call(scale)) && void 0 !== _b ? _b : 0) / 2 : void 0;
-                    };
+                    }, interactionSpec.dependencies = [ anotherDimScaleId ];
                 }
-                res.push(markSpec);
+                res.interactions.push(interactionSpec);
             }
         })), res;
     }
@@ -477,9 +495,12 @@ export class SemanticMark {
     }
     parseTooltipSpec() {
         var _a, _b;
-        const defaultTooltipSpec = this.setDefaultTooltip(), userTooltipSpec = this.spec.tooltip;
+        const defaultTooltipSpec = this.setDefaultTooltip(), userTooltipSpec = this.spec.tooltip, res = {
+            marks: [],
+            interactions: []
+        };
         if (!1 !== userTooltipSpec && null !== userTooltipSpec && null !== defaultTooltipSpec) {
-            const res = [], tooltipSpec = merge({}, defaultTooltipSpec, !0 === userTooltipSpec ? {} : userTooltipSpec), colorChannel = isNil(this.spec.encode.color) ? isNil(this.spec.encode.group) ? "stroke" : "group" : "color", colorEncode = this.spec.encode[colorChannel], dependency = colorEncode ? [ this.getScaleId(colorChannel) ] : [], colorAccessor = colorEncode ? getFieldAccessor(colorEncode) : null, title = {
+            const tooltipSpec = merge({}, defaultTooltipSpec, !0 === userTooltipSpec ? {} : userTooltipSpec), colorChannel = isNil(this.spec.encode.color) ? isNil(this.spec.encode.group) ? "stroke" : "group" : "color", colorEncode = this.spec.encode[colorChannel], dependency = colorEncode ? [ this.getScaleId(colorChannel) ] : [], colorAccessor = colorEncode ? getFieldAccessor(colorEncode) : null, title = {
                 visible: !!tooltipSpec.title || !!tooltipSpec.staticTitle,
                 key: "title",
                 value: isNil(tooltipSpec.staticTitle) ? {
@@ -490,11 +511,11 @@ export class SemanticMark {
             const content = isArray(tooltipSpec.content) && tooltipSpec.content.length ? tooltipSpec.content.map(((entry, index) => ({
                 key: entry.key ? {
                     field: entry.key
-                } : isNil(tooltipSpec.staticContentKey) ? (datum, el, params) => colorAccessor ? colorAccessor(datum) : void 0 : isArray(tooltipSpec.staticContentKey) ? tooltipSpec.staticContentKey[index] : tooltipSpec.staticContentKey,
+                } : isNil(tooltipSpec.staticContentKey) ? (datum, params) => colorAccessor ? colorAccessor(datum) : void 0 : isArray(tooltipSpec.staticContentKey) ? tooltipSpec.staticContentKey[index] : tooltipSpec.staticContentKey,
                 value: {
                     field: entry.value
                 },
-                symbol: (datum, el, params) => {
+                symbol: (datum, params) => {
                     var _a;
                     const scale = params[this.getScaleId(colorChannel)], shapeScale = params[this.getScaleId("shape")];
                     let symbolType = "circle";
@@ -505,41 +526,50 @@ export class SemanticMark {
                     };
                 }
             }))) : null;
-            if (!0 !== tooltipSpec.disableGraphicTooltip && res.push({
-                type: "component",
-                componentType: ComponentEnum.tooltip,
-                target: this.getMarkId(),
-                dependency: dependency,
-                title: title,
-                content: content,
-                zIndex: 1e3
-            }), !0 !== tooltipSpec.disableDimensionTooltip) {
-                const channel = null !== (_a = tooltipSpec.dimensionTooltipChannel) && void 0 !== _a ? _a : "x";
-                res.push({
-                    type: "component",
-                    componentType: ComponentEnum.dimensionTooltip,
+            if (!0 !== tooltipSpec.disableGraphicTooltip) {
+                const interactionSpec = {
+                    type: "tooltip",
+                    selector: `#${this.getMarkId()}`,
+                    title: title,
+                    content: content,
+                    attributes: {
+                        zIndex: 1e3
+                    },
+                    dependencies: [ this.getScaleId(colorChannel), this.getScaleId("shape") ]
+                };
+                res.interactions.push(interactionSpec);
+            }
+            if (!0 !== tooltipSpec.disableDimensionTooltip) {
+                const channel = null !== (_a = tooltipSpec.dimensionTooltipChannel) && void 0 !== _a ? _a : "x", interactionSpec = {
+                    type: "dimension-tooltip",
                     tooltipType: this.getVisualChannel(channel),
                     scale: this.getScaleId(channel),
-                    dependency: dependency,
                     target: {
                         data: this.getDataIdOfFiltered(),
                         filter: null === (_b = this.spec.encode) || void 0 === _b ? void 0 : _b[channel]
                     },
                     title: title,
                     content: content,
-                    avoidMark: tooltipSpec.disableGraphicTooltip ? [] : [ this.getMarkId() ],
-                    zIndex: 1e3
-                });
+                    avoidMark: tooltipSpec.disableGraphicTooltip ? [] : [ `#${this.getMarkId()}` ],
+                    attributes: {
+                        zIndex: 1e3
+                    },
+                    dependencies: [ this.getScaleId(colorChannel), this.getScaleId("shape") ]
+                };
+                res.interactions.push(interactionSpec);
             }
             return res;
         }
-        return [];
+        return res;
     }
     setDefaultSlider() {
         return {};
     }
     parseSliderSpec() {
-        const slider = this.spec.slider, res = [];
+        const slider = this.spec.slider, res = {
+            marks: [],
+            interactions: []
+        };
         return slider && Object.keys(slider).forEach((channel => {
             var _a, _b;
             const {option: option, layout: layout} = this.parseOption(slider[channel]);
@@ -560,6 +590,7 @@ export class SemanticMark {
                     align: "center"
                 }, markSpec = {
                     type: "component",
+                    id: this.getComponentId(channel, "slider"),
                     componentType: ComponentEnum.slider,
                     dependency: [ SIGNAL_VIEW_BOX, dataId ],
                     min: (datum, elment, params) => {
@@ -570,10 +601,6 @@ export class SemanticMark {
                         const data = params[dataId];
                         return Math.max.apply(null, data.map(getter));
                     },
-                    target: {
-                        data: this.getDataIdOfFiltered(),
-                        filter: null === (_b = this.spec.encode) || void 0 === _b ? void 0 : _b[channel]
-                    },
                     encode: {
                         update: (datum, elment, params) => {
                             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
@@ -606,7 +633,16 @@ export class SemanticMark {
                         }
                     }
                 };
-                markSpec.layout = markLayout, res.push(markSpec);
+                markSpec.layout = markLayout;
+                const interactionSpec = {
+                    type: "slider-filter",
+                    source: `#${this.getComponentId(channel, "slider")}`,
+                    target: {
+                        data: this.getDataIdOfFiltered(),
+                        filter: null === (_b = this.spec.encode) || void 0 === _b ? void 0 : _b[channel]
+                    }
+                };
+                res.marks.push(markSpec), res.interactions.push(interactionSpec);
             }
         })), res;
     }
@@ -616,8 +652,11 @@ export class SemanticMark {
     getVisiualPositionByDimension(channel) {
         return "y" === channel ? "left" : "bottom";
     }
-    parseDataZoomSpec() {
-        const datazoom = this.spec.datazoom, res = [];
+    parseDatazoomSpec() {
+        const datazoom = this.spec.datazoom, res = {
+            marks: [],
+            interactions: []
+        };
         return datazoom && Object.keys(datazoom).forEach((channel => {
             var _a, _b, _c, _d, _e;
             const {option: option, layout: layout} = this.parseOption(datazoom[channel]);
@@ -641,12 +680,9 @@ export class SemanticMark {
                 };
                 const theme = this.plot ? this.plot.view.getCurrentTheme() : ThemeManager.getDefaultTheme(), markSpec = {
                     type: "component",
+                    id: this.getComponentId(channel, "datazoom"),
                     componentType: ComponentEnum.datazoom,
                     dependency: [ SIGNAL_VIEW_BOX, dataId ],
-                    target: {
-                        data: this.getDataIdOfFiltered(),
-                        filter: null === (_e = this.spec.encode) || void 0 === _e ? void 0 : _e[channel]
-                    },
                     preview: preview,
                     encode: {
                         update: (datum, elment, params) => {
@@ -688,7 +724,16 @@ export class SemanticMark {
                         }
                     }
                 };
-                markSpec.layout = markLayout, res.push(markSpec);
+                markSpec.layout = markLayout;
+                const interactionSpec = {
+                    type: "datazoom-filter",
+                    source: `#${this.getComponentId(channel, "datazoom")}`,
+                    target: {
+                        data: this.getDataIdOfFiltered(),
+                        filter: null === (_e = this.spec.encode) || void 0 === _e ? void 0 : _e[channel]
+                    }
+                };
+                res.marks.push(markSpec), res.interactions.push(interactionSpec);
             }
         })), res;
     }
@@ -705,7 +750,10 @@ export class SemanticMark {
         };
     }
     parseLabelSpec() {
-        const label = this.spec.label, res = [];
+        const label = this.spec.label, res = {
+            marks: [],
+            interactions: []
+        };
         return label && Object.keys(label).forEach((channel => {
             const option = label[channel];
             if (option) {
@@ -730,7 +778,7 @@ export class SemanticMark {
                         }
                     }
                 };
-                res.push(markSpec);
+                res.marks.push(markSpec);
             }
         })), res;
     }
@@ -739,7 +787,10 @@ export class SemanticMark {
     }
     parsePlayerSpec() {
         var _a;
-        const player = this.spec.player, res = [];
+        const player = this.spec.player, res = {
+            marks: [],
+            interactions: []
+        };
         if (player) {
             const option = null == player ? void 0 : player.option, layout = null == player ? void 0 : player.layout;
             if (option) {
@@ -749,13 +800,11 @@ export class SemanticMark {
                     position: "bottom"
                 }, markSpec = {
                     type: "component",
+                    id: this.getComponentId("", "player"),
                     componentType: ComponentEnum.player,
                     dependency: [ SIGNAL_VIEW_BOX ],
-                    target: {
-                        data: this.getDataIdOfMain(),
-                        source: this.getDataIdOfPlayer()
-                    },
                     playerType: isPlainObject(option) && null !== (_a = option.type) && void 0 !== _a ? _a : "auto",
+                    source: this.getDataIdOfPlayer(),
                     encode: {
                         update: (datum, elment, params) => {
                             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
@@ -792,13 +841,24 @@ export class SemanticMark {
                         }
                     }
                 };
-                markSpec.layout = markLayout, res.push(markSpec);
+                markSpec.layout = markLayout;
+                const interactionSpec = {
+                    type: "player-filter",
+                    source: `#${this.getComponentId("", "player")}`,
+                    target: {
+                        data: this.getDataIdOfMain()
+                    }
+                };
+                res.marks.push(markSpec), res.interactions.push(interactionSpec);
             }
         }
         return res;
     }
     parseTitleSpec() {
-        const title = this.spec.title, res = [];
+        const title = this.spec.title, res = {
+            marks: [],
+            interactions: []
+        };
         if (title) {
             const {option: option, layout: layout} = this.parseOption(title);
             if (option) {
@@ -832,7 +892,7 @@ export class SemanticMark {
                         }
                     }
                 };
-                markSpec.layout = markLayout, res.push(markSpec);
+                markSpec.layout = markLayout, res.marks.push(markSpec);
             }
         }
         return res;
@@ -948,11 +1008,23 @@ export class SemanticMark {
         const filteredDataId = this.getDataIdOfFiltered();
         this.viewSpec.data = this.parseDataSpec(), this.viewSpec.scales = this.parseScaleSpec(), 
         this.viewSpec.coordinates = this.parseCoordinateSpec();
-        let marks = [];
-        marks = marks.concat(this.parseLegendSpec()), marks = marks.concat(this.parseAxisSpec()), 
-        marks = marks.concat(this.parseGridSpec()), marks = marks.concat(this.parseCrosshairSpec()), 
-        marks = marks.concat(this.parseSliderSpec()), marks = marks.concat(this.parseDataZoomSpec()), 
-        marks = marks.concat(this.parsePlayerSpec()), marks = marks.concat(this.parseTitleSpec()), 
+        let marks = [], interactions = [];
+        const legendSpec = this.parseLegendSpec();
+        marks = marks.concat(legendSpec.marks), interactions = interactions.concat(legendSpec.interactions);
+        const axisSpec = this.parseAxisSpec();
+        marks = marks.concat(axisSpec.marks), interactions = interactions.concat(axisSpec.interactions);
+        const gridSpec = this.parseGridSpec();
+        marks = marks.concat(gridSpec.marks), interactions = interactions.concat(gridSpec.interactions);
+        const crosshairSpec = this.parseCrosshairSpec();
+        marks = marks.concat(crosshairSpec.marks), interactions = interactions.concat(crosshairSpec.interactions);
+        const sliderSpec = this.parseSliderSpec();
+        marks = marks.concat(sliderSpec.marks), interactions = interactions.concat(sliderSpec.interactions);
+        const datazoomSpec = this.parseDatazoomSpec();
+        marks = marks.concat(datazoomSpec.marks), interactions = interactions.concat(datazoomSpec.interactions);
+        const playerSpec = this.parsePlayerSpec();
+        marks = marks.concat(playerSpec.marks), interactions = interactions.concat(playerSpec.interactions);
+        const titleSpec = this.parseTitleSpec();
+        marks = marks.concat(titleSpec.marks), interactions = interactions.concat(titleSpec.interactions), 
         marks.push(Object.assign({
             id: this.getMarkId(),
             type: this.setMarkType(),
@@ -974,8 +1046,12 @@ export class SemanticMark {
             })
         }, this.setMainMarkSpec()));
         const otherMarks = this.setMultiMarksSpec();
-        return otherMarks && (marks = marks.concat(otherMarks)), marks = marks.concat(this.parseLabelSpec()), 
-        marks = marks.concat(this.parseTooltipSpec()), this.viewSpec.marks = marks, this.viewSpec;
+        otherMarks && (marks = marks.concat(otherMarks));
+        const labelSpec = this.parseLabelSpec();
+        marks = marks.concat(labelSpec.marks), interactions = interactions.concat(labelSpec.interactions);
+        const tooltipSpec = this.parseTooltipSpec();
+        return marks = marks.concat(tooltipSpec.marks), interactions = interactions.concat(tooltipSpec.interactions), 
+        this.viewSpec.marks = marks, this.viewSpec.interactions = interactions, this.viewSpec;
     }
     clear() {
         this.spec = {