1 line
12 KiB
Plaintext
1 line
12 KiB
Plaintext
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/chart/controller/slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { deepMix, get, isObject, size } from '@antv/util';\nimport { COMPONENT_TYPE, DIRECTION, LAYER } from '../../constant';\nimport { IGroup, Slider as SliderComponent, TrendCfg } from '../../dependents';\nimport { ComponentOption, Datum } from '../../interface';\nimport { BBox } from '../../util/bbox';\nimport { directionToPosition } from '../../util/direction';\nimport { isBetween, omit } from '../../util/helper';\nimport View from '../view';\nimport { Controller } from './base';\n\nexport type SliderFormatterType = (val: any, datum: Datum, idx: number) => any;\n/** Slider 配置 */\nexport interface SliderOption {\n /** slider 高度 */\n readonly height?: number;\n\n /** 滑块背景区域配置 */\n readonly trendCfg?: TrendCfg;\n /** 滑块背景样式 */\n readonly backgroundStyle?: any;\n /** 滑块前景样式 */\n readonly foregroundStyle?: any;\n /** 滑块两个操作块样式 */\n readonly handlerStyle?: any;\n /** 文本样式 */\n readonly textStyle?: any;\n /** 允许滑动位置的最小值 */\n readonly minLimit?: number;\n /** 允许滑动位置的最大值 */\n readonly maxLimit?: number;\n /** 滑块初始化的起始位置 */\n readonly start?: number;\n /** 滑块初始化的结束位置 */\n readonly end?: number;\n /** 滑块文本格式化函数 */\n formatter?: SliderFormatterType;\n}\n\ntype Option = SliderOption | boolean;\n\n/**\n * @ignore\n * slider Controller\n */\nexport default class Slider extends Controller<Option> {\n private slider: ComponentOption;\n private container: IGroup;\n\n constructor(view: View) {\n super(view);\n\n this.container = this.view.getLayer(LAYER.FORE).addGroup();\n }\n\n get name(): string {\n return 'slider';\n }\n\n /**\n * 初始化\n */\n public init() {\n }\n\n /**\n * 渲染\n */\n public render() {\n this.option = this.view.getOptions().slider;\n\n if (this.option) {\n if (this.slider) {\n // exist, update\n this.slider = this.updateSlider();\n } else {\n // not exist, create\n this.slider = this.createSlider();\n // 监听事件，绑定交互\n this.slider.component.on('sliderchange', this.onValueChanged);\n }\n // changeData 的时候同样需要更新\n // 设置初始的 text\n const min = this.slider.component.get('start') || 0;\n const max = this.slider.component.get('end') || 1;\n\n this.updateMinMaxText(min, max);\n } else {\n if (this.slider) {\n // exist, destroy\n this.slider.component.destroy();\n this.slider = undefined;\n } else {\n // do nothing\n }\n }\n }\n\n\n /**\n * 布局\n */\n public layout() {\n if (this.slider) {\n\n const width = this.view.coordinateBBox.width;\n // 获取组件的 layout bbox\n const bboxObject = this.slider.component.getLayoutBBox();\n const bbox = new BBox(bboxObject.x, bboxObject.y, Math.min(bboxObject.width, width), bboxObject.height);\n\n const [x1, y1] = directionToPosition(this.view.viewBBox, bbox, DIRECTION.BOTTOM);\n const [x2, y2] = directionToPosition(this.view.coordinateBBox, bbox, DIRECTION.BOTTOM);\n\n // 默认放在 bottom\n this.slider.component.update({\n x: x2,\n y: y1,\n width,\n });\n }\n }\n\n /**\n * 更新\n */\n public update() {\n // 逻辑和 render 保持一致\n this.render();\n }\n\n /**\n * 创建 slider 组件\n */\n private createSlider(): ComponentOption {\n const cfg = this.getSliderCfg();\n // 添加 slider 组件\n const component = new SliderComponent({\n container: this.container,\n ...cfg,\n\n });\n\n component.init();\n\n return {\n component,\n layer: LAYER.FORE,\n direction: DIRECTION.BOTTOM,\n type: COMPONENT_TYPE.OTHER,\n };\n }\n\n /**\n * 更新配置\n */\n private updateSlider() {\n const cfg = this.getSliderCfg();\n omit(cfg, ['x', 'y', 'width', 'start', 'end', 'minText', 'maxText']);\n\n this.slider.component.update(cfg);\n\n return this.slider;\n }\n\n /**\n * 生成 slider 配置\n */\n private getSliderCfg() {\n if (isObject(this.option)) {\n // 用户配置的数据，优先级更高\n const trendCfg = {\n data: this.getData(),\n ...get(this.option, 'trendCfg', {}),\n };\n\n // 初始的位置大小信息\n const x = 0;\n const y = 0;\n const width = this.view.coordinateBBox.width;\n\n // 因为有样式，所以深层覆盖\n const cfg = deepMix({}, { x, y, width }, this.option);\n\n // trendCfg 因为有数据数组，所以使用浅替换\n return { ...cfg, trendCfg };\n }\n\n return {};\n }\n\n /**\n * 从 view 中获取数据，缩略轴使用全量的数据\n */\n private getData(): number[] {\n const data = this.view.getOptions().data;\n const [yScale] = this.view.getYScales();\n\n return data.map((datum) => datum[yScale.field] || 0);\n }\n\n /**\n * 滑块滑动的时候出发\n * @param v\n */\n private onValueChanged = (v: any) => {\n const [min, max] = v;\n\n this.updateMinMaxText(min, max);\n\n this.view.render(true);\n };\n\n private updateMinMaxText(min: number, max: number) {\n const data = this.view.getOptions().data;\n const dataSize = size(data);\n const xScale = this.view.getXScale();\n\n if (!xScale || !dataSize) {\n return;\n }\n\n const x = xScale.field;\n\n // x 轴数据\n const xData = data.map((datum) => datum[x] || '');\n\n const minIndex = Math.floor(min * (dataSize - 1));\n const maxIndex = Math.floor(max * (dataSize - 1));\n\n let minText = get(xData, [minIndex]);\n let maxText = get(xData, [maxIndex]);\n\n const formatter = this.getSliderCfg().formatter as SliderFormatterType;\n if (formatter) {\n minText = formatter(minText, data[minIndex], minIndex);\n maxText = formatter(maxText, data[maxIndex], maxIndex);\n }\n\n // 更新文本\n this.slider.component.update({\n minText,\n maxText,\n start: min,\n end: max,\n });\n\n // 增加 x 轴的过滤器\n this.view.filter(\n xScale.field,\n (value: any, datum: Datum, idx: number) => isBetween(idx, minIndex, maxIndex),\n );\n }\n\n /**\n * 覆写父类方法\n */\n public getComponents() {\n return this.slider ? [this.slider] : [];\n }\n}\n"]} |