@visactor/vgrammar-core/es/component/grid.js

VGrammar is a visual grammar library

import { isString, merge } from "@visactor/vutils";

import { CircleAxisGrid, LineAxisGrid } from "@visactor/vrender-components";

import { AxisEnum, ComponentEnum, GridEnum } from "../graph/enums";

import { ScaleComponent } from "./scale";

import { invokeEncoder } from "../graph/mark/encode";

import { invokeFunctionType } from "../parse/util";

import { generateCoordinateAxisAttribute } from "./axis";

import { Factory } from "../core/factory";

export const generateLineAxisGridAttributes = (scale, theme, addition, tickCount) => {
    var _a, _b, _c, _d;
    const gridTheme = null !== (_b = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.grid) && void 0 !== _b ? _b : {};
    if (!scale) return merge({}, gridTheme, null != addition ? addition : {});
    const items = (null !== (_d = null === (_c = scale.tickData) || void 0 === _c ? void 0 : _c.call(scale, tickCount)) && void 0 !== _d ? _d : []).map((tick => ({
        id: tick.index,
        label: tick.tick,
        value: tick.value,
        rawValue: tick.tick
    })));
    return merge({}, gridTheme, {
        items: items
    }, null != addition ? addition : {});
};

export const generateCircleAxisGridAttributes = (scale, theme, addition, tickCount) => {
    var _a, _b, _c, _d;
    const gridTheme = null !== (_b = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.circleGrid) && void 0 !== _b ? _b : {};
    if (!scale) return merge({}, gridTheme, null != addition ? addition : {});
    const items = (null !== (_d = null === (_c = scale.tickData) || void 0 === _c ? void 0 : _c.call(scale, tickCount)) && void 0 !== _d ? _d : []).map((tick => ({
        id: tick.index,
        label: tick.tick,
        value: tick.value,
        rawValue: tick.tick
    })));
    return merge({}, gridTheme, {
        items: items
    }, null != addition ? addition : {});
};

export class Grid extends ScaleComponent {
    constructor(view, group, mode) {
        super(view, ComponentEnum.grid, group), this.spec.componentType = ComponentEnum.grid, 
        this.mode = mode;
    }
    parseAddition(spec) {
        return super.parseAddition(spec), this.target(spec.target), this.gridType(spec.gridType), 
        this.gridShape(spec.gridShape), this;
    }
    scale(scale) {
        return super.scale(scale), this._gridComponentType = null, this;
    }
    gridType(gridType) {
        return this.spec.gridType = gridType, this._gridComponentType = null, this._prepareRejoin(), 
        this.commit(), this;
    }
    gridShape(gridShape) {
        return this.spec.gridShape = gridShape, this.commit(), this;
    }
    target(axis) {
        if (this.spec.target) {
            const prevAxis = isString(this.spec.target) ? this.view.getMarkById(this.spec.target) : this.spec.target;
            this.detach(prevAxis);
        }
        this.spec.target = axis;
        const nextAxis = isString(axis) ? this.view.getMarkById(axis) : axis;
        return this.attach(nextAxis), this._targetAxis = nextAxis, this._gridComponentType = null, 
        this._updateComponentEncoders(), this.commit(), this;
    }
    tickCount(tickCount) {
        const scaleGrammar = isString(this.spec.scale) ? this.view.getScaleById(this.spec.scale) : this.spec.scale;
        return scaleGrammar && scaleGrammar.tickCount(tickCount), this.setFunctionSpec(tickCount, "tickCount");
    }
    inside(inside) {
        return this.setFunctionSpec(inside, "inside");
    }
    baseValue(baseValue) {
        return this.setFunctionSpec(baseValue, "baseValue");
    }
    addGraphicItem(attrs, groupKey) {
        const initialAttributes = merge({
            x: 0,
            y: 0,
            start: {
                x: 0,
                y: 0
            },
            end: {
                x: 0,
                y: 0
            }
        }, attrs), graphicItem = Factory.createGraphicComponent(this._getGridComponentType(), initialAttributes, {
            mode: this.mode,
            skipDefault: this.spec.skipTheme
        });
        return super.addGraphicItem(initialAttributes, groupKey, graphicItem);
    }
    _updateComponentEncoders() {
        const encoders = Object.assign({
            update: {}
        }, this.spec.encode), componentEncoders = Object.keys(encoders).reduce(((res, state) => {
            const encoder = encoders[state];
            return encoder && (res[state] = {
                callback: (datum, element, parameters) => {
                    var _a, _b, _c, _d;
                    const theme = this.spec.skipTheme ? null : this.view.getCurrentTheme();
                    let scaleGrammar, addition = invokeEncoder(encoder, datum, element, parameters);
                    const baseValue = invokeFunctionType(this.spec.baseValue, parameters, datum, element);
                    if (this._targetAxis) {
                        const targetScale = null === (_a = this._targetAxis.getSpec()) || void 0 === _a ? void 0 : _a.scale;
                        scaleGrammar = isString(targetScale) ? this.view.getScaleById(targetScale) : targetScale;
                        const targetElement = this._targetAxis.elements[0];
                        if (targetElement) switch (this._getGridComponentType()) {
                          case GridEnum.lineAxisGrid:
                            addition = Object.assign({
                                x: targetElement.getGraphicAttribute("x"),
                                y: targetElement.getGraphicAttribute("y"),
                                start: targetElement.getGraphicAttribute("start"),
                                end: targetElement.getGraphicAttribute("end"),
                                verticalFactor: null !== (_b = targetElement.getGraphicAttribute("verticalFactor")) && void 0 !== _b ? _b : 1
                            }, addition);
                            break;

                          case GridEnum.circleAxisGrid:
                            addition = Object.assign({
                                x: targetElement.getGraphicAttribute("x"),
                                y: targetElement.getGraphicAttribute("y"),
                                center: targetElement.getGraphicAttribute("center"),
                                radius: targetElement.getGraphicAttribute("radius"),
                                innerRadius: targetElement.getGraphicAttribute("innerRadius"),
                                inside: targetElement.getGraphicAttribute("inside"),
                                startAngle: targetElement.getGraphicAttribute("startAngle"),
                                endAngle: targetElement.getGraphicAttribute("endAngle")
                            }, addition);
                        }
                    } else {
                        scaleGrammar = isString(this.spec.scale) ? this.view.getScaleById(this.spec.scale) : this.spec.scale;
                        const inside = invokeFunctionType(this.spec.inside, parameters, datum, element), coordinate = null === (_c = null == scaleGrammar ? void 0 : scaleGrammar.getCoordinate) || void 0 === _c ? void 0 : _c.call(scaleGrammar);
                        coordinate && (addition = Object.assign(generateCoordinateAxisAttribute(scaleGrammar, coordinate, inside, baseValue, this.spec.layout, !0), addition));
                    }
                    this._getGridComponentType() === GridEnum.lineAxisGrid && (addition = "line" !== this.spec.gridShape && this.spec.gridShape ? Object.assign({
                        center: addition.start,
                        closed: !0
                    }, addition, {
                        type: this.spec.gridShape
                    }) : Object.assign({}, addition, {
                        type: "line"
                    }));
                    const scale = null === (_d = null == scaleGrammar ? void 0 : scaleGrammar.getScale) || void 0 === _d ? void 0 : _d.call(scaleGrammar), tickCount = invokeFunctionType(this.spec.tickCount, parameters, datum, element);
                    switch (this._getGridComponentType()) {
                      case GridEnum.lineAxisGrid:
                        return generateLineAxisGridAttributes(scale, theme, addition, tickCount);

                      case GridEnum.circleAxisGrid:
                        return generateCircleAxisGridAttributes(scale, theme, addition, tickCount);
                    }
                    return addition;
                }
            }), res;
        }), {});
        this._encoders = componentEncoders;
    }
    _getGridComponentType() {
        var _a;
        if (this._gridComponentType) return this._gridComponentType;
        if (this.spec.gridType) if ("circle" === this.spec.gridType) this._gridComponentType = GridEnum.circleAxisGrid; else this._gridComponentType = GridEnum.lineAxisGrid; else if (this._targetAxis) {
            switch (this._targetAxis.getAxisComponentType()) {
              case AxisEnum.circleAxis:
                this._gridComponentType = GridEnum.circleAxisGrid;
                break;

              case AxisEnum.lineAxis:
              default:
                this._gridComponentType = GridEnum.lineAxisGrid;
            }
        } else if (this.spec.scale) {
            const scaleGrammar = isString(this.spec.scale) ? this.view.getScaleById(this.spec.scale) : this.spec.scale;
            this._gridComponentType = (null === (_a = null == scaleGrammar ? void 0 : scaleGrammar.getCoordinate) || void 0 === _a ? void 0 : _a.call(scaleGrammar)) ? scaleGrammar.getCoordinateAxisPoints() ? GridEnum.lineAxisGrid : GridEnum.circleAxisGrid : GridEnum.lineAxisGrid;
        } else this._gridComponentType = GridEnum.lineAxisGrid;
        return this._gridComponentType;
    }
}

Grid.componentType = ComponentEnum.grid;

export const registerGrid = () => {
    Factory.registerGraphicComponent(GridEnum.lineAxisGrid, ((attrs, options) => new LineAxisGrid(attrs, options))), 
    Factory.registerGraphicComponent(GridEnum.circleAxisGrid, ((attrs, options) => new CircleAxisGrid(attrs, options))), 
    Factory.registerComponent(ComponentEnum.grid, Grid);
};

export const registerLineGrid = () => {
    Factory.registerGraphicComponent(GridEnum.lineAxisGrid, ((attrs, options) => new LineAxisGrid(attrs, options))), 
    Factory.registerComponent(ComponentEnum.grid, Grid);
};

export const registerCircleGrid = () => {
    Factory.registerGraphicComponent(GridEnum.circleAxisGrid, ((attrs, options) => new CircleAxisGrid(attrs, options))), 
    Factory.registerComponent(ComponentEnum.grid, Grid);
};
//# sourceMappingURL=grid.js.map