@visactor/vgrammar-plot 0.7.7 → 0.8.0

package/cjs/semantic-mark.js

@@ -189,6 +189,9 @@ 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));
@@ -263,7 +266,10 @@ 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) {
@@ -306,12 +312,15 @@ class SemanticMark {
                 axisMarkSpec.layout = null != layout ? layout : {
                     position: this._coordinate ? "auto" : (0, vutils_1.isPlainObject)(layout) && !(0, 
                     vutils_1.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];
@@ -360,7 +369,7 @@ class SemanticMark {
                         }
                     }
                 };
-                res.push(markSpec);
+                res.marks.push(markSpec);
             }
         })), res;
     }
@@ -376,7 +385,10 @@ 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]);
@@ -396,14 +408,11 @@ class SemanticMark {
                     align: "center"
                 }, markSpec = {
                     type: "component",
+                    id: this.getComponentId(channel, "legend"),
                     componentType: vgrammar_core_1.ComponentEnum.legend,
                     scale: this.getScaleId(channel),
                     shapeScale: this.getScaleId("shape"),
                     dependency: [ vgrammar_core_1.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;
@@ -428,7 +437,16 @@ 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;
     }
@@ -441,38 +459,39 @@ 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: vgrammar_core_1.ComponentEnum.crosshair,
+                const scaleId = this.getScaleId(channel), scaleSpec = this.getScaleSpec(scaleId), interactionSpec = {
+                    type: "crosshair",
                     scale: this.getScaleId(channel),
-                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
                     crosshairShape: (0, vutils_1.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 ((0, vutils_1.isPlainObject)(userOption) && (markSpec.encode = {
-                    update: userOption
-                }, "polygon" === userOption.type)) {
-                    markSpec.crosshairType = "radius-polygon";
+                if ((0, vutils_1.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 && (0, vscale_1.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 && (0, vscale_1.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 && (0, vscale_1.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;
     }
@@ -481,9 +500,12 @@ 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 = (0, vutils_1.merge)({}, defaultTooltipSpec, !0 === userTooltipSpec ? {} : userTooltipSpec), colorChannel = (0, 
+            const tooltipSpec = (0, vutils_1.merge)({}, defaultTooltipSpec, !0 === userTooltipSpec ? {} : userTooltipSpec), colorChannel = (0, 
             vutils_1.isNil)(this.spec.encode.color) ? (0, vutils_1.isNil)(this.spec.encode.group) ? "stroke" : "group" : "color", colorEncode = this.spec.encode[colorChannel], dependency = colorEncode ? [ this.getScaleId(colorChannel) ] : [], colorAccessor = colorEncode ? (0, 
             vgrammar_util_1.field)(colorEncode) : null, title = {
                 visible: !!tooltipSpec.title || !!tooltipSpec.staticTitle,
@@ -497,12 +519,12 @@ class SemanticMark {
             const content = (0, vutils_1.isArray)(tooltipSpec.content) && tooltipSpec.content.length ? tooltipSpec.content.map(((entry, index) => ({
                 key: entry.key ? {
                     field: entry.key
-                } : (0, vutils_1.isNil)(tooltipSpec.staticContentKey) ? (datum, el, params) => colorAccessor ? colorAccessor(datum) : void 0 : (0, 
+                } : (0, vutils_1.isNil)(tooltipSpec.staticContentKey) ? (datum, params) => colorAccessor ? colorAccessor(datum) : void 0 : (0, 
                 vutils_1.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";
@@ -513,41 +535,50 @@ class SemanticMark {
                     };
                 }
             }))) : null;
-            if (!0 !== tooltipSpec.disableGraphicTooltip && res.push({
-                type: "component",
-                componentType: vgrammar_core_1.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: vgrammar_core_1.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]);
@@ -570,6 +601,7 @@ class SemanticMark {
                     align: "center"
                 }, markSpec = {
                     type: "component",
+                    id: this.getComponentId(channel, "slider"),
                     componentType: vgrammar_core_1.ComponentEnum.slider,
                     dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX, dataId ],
                     min: (datum, elment, params) => {
@@ -580,10 +612,6 @@ 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;
@@ -616,7 +644,16 @@ 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;
     }
@@ -626,8 +663,11 @@ 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]);
@@ -652,12 +692,9 @@ class SemanticMark {
                 };
                 const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar_core_1.ThemeManager.getDefaultTheme(), markSpec = {
                     type: "component",
+                    id: this.getComponentId(channel, "datazoom"),
                     componentType: vgrammar_core_1.ComponentEnum.datazoom,
                     dependency: [ vgrammar_core_1.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) => {
@@ -699,7 +736,16 @@ 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;
     }
@@ -716,7 +762,10 @@ 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) {
@@ -741,7 +790,7 @@ class SemanticMark {
                         }
                     }
                 };
-                res.push(markSpec);
+                res.marks.push(markSpec);
             }
         })), res;
     }
@@ -750,7 +799,10 @@ 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) {
@@ -761,13 +813,11 @@ class SemanticMark {
                     position: "bottom"
                 }, markSpec = {
                     type: "component",
+                    id: this.getComponentId("", "player"),
                     componentType: vgrammar_core_1.ComponentEnum.player,
                     dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
-                    target: {
-                        data: this.getDataIdOfMain(),
-                        source: this.getDataIdOfPlayer()
-                    },
                     playerType: (0, vutils_1.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;
@@ -804,13 +854,24 @@ 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) {
@@ -844,7 +905,7 @@ class SemanticMark {
                         }
                     }
                 };
-                markSpec.layout = markLayout, res.push(markSpec);
+                markSpec.layout = markLayout, res.marks.push(markSpec);
             }
         }
         return res;
@@ -962,11 +1023,23 @@ 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(),
@@ -988,8 +1061,12 @@ 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 = {