@visactor/vrender-components 0.0.38-brush.2-alpha.0

package/es/player/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/player/utils.ts"],"names":[],"mappings":"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","file":"utils.js","sourcesContent":["import { OrientType } from '../interface';\nimport { DirectionEnum, DirectionType } from './type';\n\n/**\n * 检测下标是否正确\n */\ninterface ICheckIndex {\n  direction: DirectionType;\n  maxIndex: number;\n  minIndex: number;\n  dataIndex: number;\n}\nexport const checkIndex = ({ direction, maxIndex, minIndex, dataIndex }: ICheckIndex): boolean => {\n  // 若默认方向, 检测下标是否合法\n  if (direction === DirectionEnum.Default) {\n    return dataIndex < maxIndex;\n  }\n  // 若逆向, 检测下标是否合法\n  else if (direction === DirectionEnum.Reverse) {\n    return dataIndex > minIndex;\n  }\n};\n\n/**\n * 判断能否进入循环\n */\n\nexport const canPlay = ({ direction, maxIndex, minIndex, dataIndex }: ICheckIndex): boolean => {\n  return checkIndex({ direction, maxIndex, minIndex, dataIndex });\n};\n\n/**\n * 判断是否到达了末尾\n */\nexport const isReachEndByDefault = ({ direction, maxIndex, dataIndex }: Omit<ICheckIndex, 'minIndex'>) => {\n  if (direction === DirectionEnum.Default) {\n    return dataIndex === maxIndex;\n  }\n  return false;\n};\n\nexport const isReachEndByReverse = ({ direction, minIndex, dataIndex }: Omit<ICheckIndex, 'maxIndex'>) => {\n  if (direction === DirectionEnum.Reverse) {\n    return dataIndex === minIndex;\n  }\n  return false;\n};\n\nexport const isReachEnd = ({ direction, maxIndex, minIndex, dataIndex }: ICheckIndex) => {\n  return (\n    isReachEndByDefault({ direction, maxIndex, dataIndex }) || isReachEndByReverse({ direction, minIndex, dataIndex })\n  );\n};\n\n/**\n * 判断是否处于起点\n */\nexport const isReachStartByDefault = ({ direction, minIndex, dataIndex }: Omit<ICheckIndex, 'maxIndex'>) => {\n  if (direction === DirectionEnum.Default) {\n    return dataIndex === minIndex;\n  }\n  return false;\n};\n\nexport const isReachStartByReverse = ({ direction, maxIndex, dataIndex }: Omit<ICheckIndex, 'minIndex'>) => {\n  if (direction === DirectionEnum.Reverse) {\n    return dataIndex === maxIndex;\n  }\n  return false;\n};\n\nexport const isReachStart = ({ direction, maxIndex, minIndex, dataIndex }: ICheckIndex) => {\n  return (\n    isReachStartByDefault({ direction, minIndex, dataIndex }) ||\n    isReachStartByReverse({ direction, maxIndex, dataIndex })\n  );\n};\n\n/**\n * 得到初始化下标\n */\n\nexport const isVertical = (orient: OrientType) => orient === 'left' || orient === 'right';\n\nexport const isHorizontal = (orient: OrientType) => orient === 'top' || orient === 'bottom';\n\nexport const forwardStep = (direction: DirectionType, currentIndex: number, min: number, max: number) => {\n  if (direction === 'default') {\n    return Math.min(currentIndex + 1, max);\n  }\n  return Math.max(currentIndex - 1, min);\n};\n"]}

package/es/scrollbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './scrollbar';
+export * from './type';

package/es/scrollbar/index.js

@@ -0,0 +1,4 @@
+export * from "./scrollbar";
+
+export * from "./type";
+//# sourceMappingURL=index.js.map

package/es/scrollbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scrollbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["export * from './scrollbar';\nexport * from './type';\n"]}

package/es/scrollbar/scrollbar.d.ts

@@ -0,0 +1,43 @@
+import { AbstractComponent } from '../core/base';
+import type { ScrollBarAttributes } from './type';
+export declare class ScrollBar extends AbstractComponent<Required<ScrollBarAttributes>> {
+    name: string;
+    static defaultAttributes: {
+        direction: string;
+        round: boolean;
+        sliderSize: number;
+        sliderStyle: {
+            fill: boolean;
+            fillColor: string;
+        };
+        railStyle: {
+            fill: boolean;
+            fillColor: string;
+        };
+        padding: number;
+        scrollRange: number[];
+    };
+    private _container;
+    private _slider;
+    private _rail;
+    private _sliderRenderBounds;
+    private _sliderLimitRange;
+    private _prePos;
+    private _viewPosition;
+    private _sliderSize;
+    constructor(attributes: ScrollBarAttributes);
+    setScrollRange(range: [number, number], render?: boolean): void;
+    getScrollRange(): [number, number];
+    protected bindEvents(): void;
+    protected render(): void;
+    private _getSliderRenderBounds;
+    private _getDefaultSliderBorderRadius;
+    private _getSliderPos;
+    private _getScrollRange;
+    private _onRailPointerDown;
+    private _onSliderPointerDown;
+    private _onSliderPointerMove;
+    private _onSliderPointerUp;
+    private _onChange;
+    private _reset;
+}

package/es/scrollbar/scrollbar.js

@@ -0,0 +1,154 @@
+import { CustomEvent, global } from "@visactor/vrender";
+
+import { merge, normalizePadding, clamp, clampRange } from "@visactor/vutils";
+
+import { AbstractComponent } from "../core/base";
+
+export class ScrollBar extends AbstractComponent {
+    constructor(attributes) {
+        super(merge({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", 
+        this._onRailPointerDown = e => {
+            var _a, _b;
+            const {viewX: viewX, viewY: viewY} = e, {direction: direction, width: width, height: height, range: range} = this.attribute, sliderSize = this._sliderSize, [min, max] = this._getScrollRange();
+            let currentScrollValue;
+            if ("vertical" === direction) {
+                const relativeY = viewY - this._viewPosition.y, currentYPos = clamp(relativeY - sliderSize / 2, min, max);
+                currentScrollValue = relativeY / height, this._slider.setAttribute("y", currentYPos, !0);
+            } else {
+                const relativeX = viewX - this._viewPosition.x, currentXPos = clamp(relativeX - sliderSize / 2, min, max);
+                currentScrollValue = relativeX / width, this._slider.setAttribute("x", currentXPos, !0);
+            }
+            this.setScrollRange([ currentScrollValue - (range[1] - range[0]) / 2, currentScrollValue + (range[1] - range[0]) / 2 ], !1), 
+            (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.autoRender) || null === (_b = this.stage) || void 0 === _b || _b.renderNextFrame();
+        }, this._onSliderPointerDown = e => {
+            e.stopPropagation();
+            const {direction: direction} = this.attribute;
+            this._prePos = "horizontal" === direction ? e.clientX : e.clientY, "browser" === global.env ? (global.addEventListener("pointermove", this._onSliderPointerMove), 
+            global.addEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.addEventListener("pointermove", this._onSliderPointerMove), 
+            this._slider.addEventListener("pointerup", this._onSliderPointerUp), this._slider.addEventListener("pointerupoutside", this._onSliderPointerUp));
+        }, this._onSliderPointerMove = e => {
+            e.stopPropagation();
+            const {direction: direction} = this.attribute;
+            let currentScrollValue, currentPos, delta = 0;
+            const preScrollRange = this.getScrollRange(), {width: width, height: height} = this._getSliderRenderBounds();
+            "vertical" === direction ? (currentPos = e.clientY, delta = currentPos - this._prePos, 
+            currentScrollValue = delta / height) : (currentPos = e.clientX, delta = currentPos - this._prePos, 
+            currentScrollValue = delta / width), this.setScrollRange([ preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue ], !0), 
+            this._prePos = currentPos;
+        }, this._onSliderPointerUp = e => {
+            e.preventDefault(), "browser" === global.env ? (global.removeEventListener("pointermove", this._onSliderPointerMove), 
+            global.removeEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.removeEventListener("pointermove", this._onSliderPointerMove), 
+            this._slider.removeEventListener("pointerup", this._onSliderPointerUp), this._slider.removeEventListener("pointerupoutside", this._onSliderPointerUp));
+        };
+    }
+    setScrollRange(range, render = !0) {
+        var _a, _b;
+        const {direction: direction = "horizontal", limitRange: limitRange = [ 0, 1 ], range: preRange} = this.attribute, currScrollRange = clampRange(range, limitRange[0], limitRange[1]);
+        if (render) {
+            const sliderPos = this._getSliderPos(currScrollRange);
+            this._slider && ("horizontal" === direction ? this._slider.setAttribute("x", sliderPos[0], !0) : this._slider.setAttribute("y", sliderPos[0], !0), 
+            (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.autoRender) || null === (_b = this.stage) || void 0 === _b || _b.renderNextFrame());
+        }
+        this.attribute.range = currScrollRange, this._onChange({
+            pre: preRange,
+            value: currScrollRange
+        });
+    }
+    getScrollRange() {
+        return this.attribute.range;
+    }
+    bindEvents() {
+        this._rail && this._rail.addEventListener("pointerdown", this._onRailPointerDown), 
+        this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown);
+    }
+    render() {
+        this._reset();
+        const {direction: direction = "horizontal", width: width, height: height, range: range, limitRange: limitRange = [ 0, 1 ], railStyle: railStyle, sliderStyle: sliderStyle, padding: padding = 2} = this.attribute, group = this.createOrUpdateChild("scrollbar-container", {}, "group"), rail = group.createOrUpdateChild("scrollbar-rail", Object.assign({
+            x: 0,
+            y: 0,
+            width: width,
+            height: height
+        }, railStyle), "rect");
+        this._rail = rail;
+        const sliderRenderBounds = this._getSliderRenderBounds(), sliderPos = this._getSliderPos(clampRange(range, limitRange[0], limitRange[1])), sliderSize = sliderPos[1] - sliderPos[0];
+        let sliderAttribute;
+        this._sliderSize = sliderSize, sliderAttribute = "horizontal" === direction ? {
+            x: sliderPos[0],
+            y: sliderRenderBounds.y1,
+            width: sliderSize,
+            height: sliderRenderBounds.height
+        } : {
+            x: sliderRenderBounds.x1,
+            y: sliderPos[0],
+            width: sliderRenderBounds.width,
+            height: sliderSize
+        };
+        const slider = group.createOrUpdateChild("slider", Object.assign(Object.assign(Object.assign(Object.assign({}, sliderAttribute), {
+            borderRadius: this._getDefaultSliderBorderRadius()
+        }), sliderStyle), {
+            boundsPadding: normalizePadding(padding),
+            pickMode: "imprecise"
+        }), "rect");
+        this._slider = slider, this._container = group;
+        const containerAABBBounds = this._container.AABBBounds;
+        this._viewPosition = {
+            x: containerAABBBounds.x1,
+            y: containerAABBBounds.y1
+        };
+    }
+    _getSliderRenderBounds() {
+        if (this._sliderRenderBounds) return this._sliderRenderBounds;
+        const {width: width, height: height, padding: padding = 2} = this.attribute, [top, right, bottom, left] = normalizePadding(padding), renderBounds = {
+            x1: left,
+            y1: top,
+            x2: width - right,
+            y2: height - bottom,
+            width: width - (left + right),
+            height: height - (top + bottom)
+        };
+        return this._sliderRenderBounds = renderBounds, renderBounds;
+    }
+    _getDefaultSliderBorderRadius() {
+        const {direction: direction, round: round} = this.attribute;
+        if (round) {
+            const {width: width, height: height} = this._getSliderRenderBounds();
+            return "horizontal" === direction ? height : width;
+        }
+        return 0;
+    }
+    _getSliderPos(range) {
+        const {direction: direction} = this.attribute, {width: width, height: height, x1: x1, y1: y1} = this._getSliderRenderBounds();
+        return "horizontal" === direction ? [ width * range[0] + x1, width * range[1] + x1 ] : [ height * range[0] + y1, height * range[1] + y1 ];
+    }
+    _getScrollRange() {
+        if (this._sliderLimitRange) return this._sliderLimitRange;
+        const {limitRange: limitRange = [ 0, 1 ], direction: direction} = this.attribute, [min, max] = clampRange(limitRange, 0, 1), {width: width, height: height, x1: x1, y1: y1} = this._getSliderRenderBounds(), sliderSize = this._sliderSize;
+        return "horizontal" === direction ? clampRange([ x1 + min * width, x1 + max * width ], x1, width - sliderSize) : clampRange([ y1 + min * height, y1 + max * height ], y1, height - sliderSize);
+    }
+    _onChange(detail) {
+        var _a;
+        const changeEvent = new CustomEvent("scroll", detail);
+        changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, 
+        this.dispatchEvent(changeEvent);
+    }
+    _reset() {
+        this._sliderRenderBounds = null, this._sliderLimitRange = null;
+    }
+}
+
+ScrollBar.defaultAttributes = {
+    direction: "horizontal",
+    round: !0,
+    sliderSize: 20,
+    sliderStyle: {
+        fill: !0,
+        fillColor: "rgba(0, 0, 0, .5)"
+    },
+    railStyle: {
+        fill: !0,
+        fillColor: "rgba(0, 0, 0, .0)"
+    },
+    padding: 2,
+    scrollRange: [ 0, 1 ]
+};
+//# sourceMappingURL=scrollbar.js.map

package/es/scrollbar/scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scrollbar/scrollbar.ts"],"names":[],"mappings":"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","file":"scrollbar.js","sourcesContent":["/**\n * @description 滚动条组件\n */\nimport { IRectGraphicAttribute, FederatedPointerEvent, CustomEvent, global, IGroup, IRect } from '@visactor/vrender';\nimport { merge, normalizePadding, clamp, clampRange } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\n\nimport type { ScrollBarAttributes } from './type';\n\ntype ComponentBounds = {\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n  width: number;\n  height: number;\n};\n\nexport class ScrollBar extends AbstractComponent<Required<ScrollBarAttributes>> {\n  name = 'scrollbar';\n\n  static defaultAttributes = {\n    direction: 'horizontal',\n    round: true,\n    sliderSize: 20,\n    sliderStyle: {\n      fill: true,\n      fillColor: 'rgba(0, 0, 0, .5)'\n    },\n    railStyle: {\n      fill: true,\n      fillColor: 'rgba(0, 0, 0, .0)'\n    },\n    padding: 2,\n    scrollRange: [0, 1]\n  };\n\n  private _container!: IGroup;\n  // 滚动条滑块\n  private _slider!: IRect;\n  // 滚动条滑轨\n  private _rail!: IRect;\n  // 滑块可渲染的区域包围盒\n  private _sliderRenderBounds!: ComponentBounds | null;\n  // 滑块滑动的范围\n  private _sliderLimitRange!: [number, number] | null;\n  // 保留滑块上一次的位置\n  private _prePos!: number;\n  // TODO: 临时方案\n  private _viewPosition!: { x: number; y: number };\n  private _sliderSize!: number;\n\n  constructor(attributes: ScrollBarAttributes) {\n    super(merge({}, ScrollBar.defaultAttributes, attributes));\n  }\n\n  setScrollRange(range: [number, number], render = true) {\n    const { direction = 'horizontal', limitRange = [0, 1], range: preRange } = this.attribute as ScrollBarAttributes;\n\n    const currScrollRange = clampRange(range, limitRange[0], limitRange[1]);\n    if (render) {\n      // 更新图形\n      const sliderPos = this._getSliderPos(currScrollRange);\n      if (this._slider) {\n        if (direction === 'horizontal') {\n          this._slider.setAttribute('x', sliderPos[0], true);\n        } else {\n          this._slider.setAttribute('y', sliderPos[0], true);\n        }\n\n        if (!this.stage?.autoRender) {\n          this.stage?.renderNextFrame();\n        }\n      }\n    }\n    (this.attribute as ScrollBarAttributes).range = currScrollRange;\n    // 发射 change 事件\n    this._onChange({\n      pre: preRange,\n      value: currScrollRange\n    });\n  }\n\n  getScrollRange(): [number, number] {\n    return (this.attribute as ScrollBarAttributes).range;\n  }\n\n  // public setLocation(point: PointLocationCfg) {\n  //   this.translateTo(point.x, point.y);\n  // }\n\n  // 绑定事件\n  protected bindEvents(): void {\n    // TODO: wheel 事件支持\n    if (this._rail) {\n      this._rail.addEventListener('pointerdown', this._onRailPointerDown as EventListener);\n    }\n    if (this._slider) {\n      this._slider.addEventListener('pointerdown', this._onSliderPointerDown as EventListener);\n    }\n  }\n\n  protected render() {\n    this._reset();\n    const {\n      direction = 'horizontal',\n      width,\n      height,\n      range,\n      limitRange = [0, 1],\n      // sliderSize = 20,\n      // scrollValue = 0,\n      // scrollRange = [0, 1],\n      railStyle,\n      sliderStyle,\n      padding = 2\n    } = this.attribute as ScrollBarAttributes;\n\n    const group = this.createOrUpdateChild('scrollbar-container', {}, 'group') as IGroup;\n    // 绘制轨道\n\n    const rail = group.createOrUpdateChild(\n      'scrollbar-rail',\n      {\n        x: 0,\n        y: 0,\n        width,\n        height,\n        ...railStyle\n      },\n      'rect'\n    ) as IRect;\n    this._rail = rail;\n\n    // 滑块\n    const sliderRenderBounds = this._getSliderRenderBounds();\n    const sliderPos = this._getSliderPos(clampRange(range, limitRange[0], limitRange[1]));\n    const sliderSize = sliderPos[1] - sliderPos[0];\n    this._sliderSize = sliderSize;\n    // const sliderRangePos = this._getScrollRange();\n\n    let sliderAttribute: IRectGraphicAttribute;\n    if (direction === 'horizontal') {\n      sliderAttribute = {\n        x: sliderPos[0],\n        y: sliderRenderBounds.y1,\n        width: sliderSize,\n        height: sliderRenderBounds.height\n      };\n    } else {\n      sliderAttribute = {\n        x: sliderRenderBounds.x1,\n        y: sliderPos[0],\n        width: sliderRenderBounds.width,\n        height: sliderSize\n      };\n    }\n\n    const slider = group.createOrUpdateChild(\n      'slider',\n      {\n        ...sliderAttribute,\n        borderRadius: this._getDefaultSliderBorderRadius(),\n        ...sliderStyle,\n        boundsPadding: normalizePadding(padding),\n        pickMode: 'imprecise'\n      },\n      'rect'\n    ) as IRect;\n    this._slider = slider;\n    this._container = group;\n\n    const containerAABBBounds = this._container.AABBBounds;\n    this._viewPosition = {\n      x: containerAABBBounds.x1,\n      y: containerAABBBounds.y1\n    };\n  }\n\n  // 获取滑块渲染的包围盒区域\n  private _getSliderRenderBounds() {\n    if (this._sliderRenderBounds) {\n      return this._sliderRenderBounds;\n    }\n    const { width, height, padding = 2 } = this.attribute as ScrollBarAttributes;\n    const [top, right, bottom, left] = normalizePadding(padding);\n    const renderBounds = {\n      x1: left,\n      y1: top,\n      x2: width - right,\n      y2: height - bottom,\n      width: width - (left + right),\n      height: height - (top + bottom)\n    };\n    this._sliderRenderBounds = renderBounds;\n    return renderBounds;\n  }\n\n  // 获取默认的滑块圆角\n  private _getDefaultSliderBorderRadius() {\n    const { direction, round } = this.attribute as ScrollBarAttributes;\n\n    if (round) {\n      const { width, height } = this._getSliderRenderBounds();\n      return direction === 'horizontal' ? height : width;\n    }\n\n    return 0;\n  }\n\n  // 计算滑块在轨道的位置\n  private _getSliderPos(range: [number, number]) {\n    const { direction } = this.attribute as ScrollBarAttributes;\n    const { width, height, x1, y1 } = this._getSliderRenderBounds();\n\n    if (direction === 'horizontal') {\n      return [width * range[0] + x1, width * range[1] + x1];\n    }\n    return [height * range[0] + y1, height * range[1] + y1];\n  }\n\n  private _getScrollRange() {\n    if (this._sliderLimitRange) {\n      return this._sliderLimitRange;\n    }\n    const { limitRange = [0, 1], direction } = this.attribute as ScrollBarAttributes;\n    const [min, max] = clampRange(limitRange, 0, 1);\n    const { width, height, x1, y1 } = this._getSliderRenderBounds();\n    const sliderSize = this._sliderSize;\n\n    return direction === 'horizontal'\n      ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)\n      : clampRange([y1 + min * height, y1 + max * height], y1, height - sliderSize);\n  }\n\n  private _onRailPointerDown = (e: FederatedPointerEvent) => {\n    // 将事件坐标转换为实际的滑块位置\n    // TODO: 这里有问题，应该拿  viewX viewY，同时 graphic 要提供接口获取它的 相对 view 的坐标\n    const { viewX, viewY } = e;\n    const { direction, width, height, range } = this.attribute as ScrollBarAttributes;\n    const sliderSize = this._sliderSize;\n    const [min, max] = this._getScrollRange();\n    let currentScrollValue;\n    if (direction === 'vertical') {\n      const relativeY = viewY - this._viewPosition.y;\n      const currentYPos = clamp(relativeY - sliderSize / 2, min, max);\n      currentScrollValue = relativeY / height;\n      this._slider.setAttribute('y', currentYPos, true);\n    } else {\n      const relativeX = viewX - this._viewPosition.x;\n      const currentXPos = clamp(relativeX - sliderSize / 2, min, max);\n      currentScrollValue = relativeX / width;\n      this._slider.setAttribute('x', currentXPos, true);\n    }\n\n    this.setScrollRange(\n      [currentScrollValue - (range[1] - range[0]) / 2, currentScrollValue + (range[1] - range[0]) / 2],\n      false\n    );\n\n    if (!this.stage?.autoRender) {\n      this.stage?.renderNextFrame();\n    }\n  };\n\n  private _onSliderPointerDown = (e: FederatedPointerEvent) => {\n    e.stopPropagation();\n    const { direction } = this.attribute as ScrollBarAttributes;\n    this._prePos = direction === 'horizontal' ? e.clientX : e.clientY;\n    if (global.env === 'browser') {\n      global.addEventListener('pointermove', this._onSliderPointerMove);\n      global.addEventListener('pointerup', this._onSliderPointerUp);\n    } else {\n      this._slider.addEventListener('pointermove', this._onSliderPointerMove);\n      this._slider.addEventListener('pointerup', this._onSliderPointerUp);\n      this._slider.addEventListener('pointerupoutside', this._onSliderPointerUp);\n    }\n  };\n\n  private _onSliderPointerMove = (e: any) => {\n    e.stopPropagation();\n\n    const { direction } = this.attribute as ScrollBarAttributes;\n    let currentScrollValue;\n    let currentPos;\n    let delta = 0;\n    const preScrollRange = this.getScrollRange();\n    const { width, height } = this._getSliderRenderBounds();\n    if (direction === 'vertical') {\n      currentPos = e.clientY;\n      delta = currentPos - this._prePos;\n      currentScrollValue = delta / height;\n    } else {\n      currentPos = e.clientX;\n      delta = currentPos - this._prePos;\n      currentScrollValue = delta / width;\n    }\n    this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], true);\n    this._prePos = currentPos;\n  };\n\n  private _onSliderPointerUp = (e: any) => {\n    e.preventDefault();\n    if (global.env === 'browser') {\n      global.removeEventListener('pointermove', this._onSliderPointerMove);\n      global.removeEventListener('pointerup', this._onSliderPointerUp);\n    } else {\n      this._slider.removeEventListener('pointermove', this._onSliderPointerMove);\n      this._slider.removeEventListener('pointerup', this._onSliderPointerUp);\n      this._slider.removeEventListener('pointerupoutside', this._onSliderPointerUp);\n    }\n  };\n\n  private _onChange(detail: any) {\n    const changeEvent = new CustomEvent('scroll', detail);\n    // FIXME: 需要在 vrender 的事件系统支持\n    // @ts-ignore\n    changeEvent.manager = this.stage?.eventSystem.manager;\n    this.dispatchEvent(changeEvent);\n  }\n\n  private _reset() {\n    this._sliderRenderBounds = null;\n    this._sliderLimitRange = null;\n  }\n}\n"]}

package/es/scrollbar/type.d.ts

@@ -0,0 +1,16 @@
+import type { IGroupGraphicAttribute, IRectGraphicAttribute } from '@visactor/vrender';
+import type { Direction } from '../interface';
+import { Padding } from '../core/type';
+export interface ScrollBarAttributes extends IGroupGraphicAttribute {
+    x: number;
+    y: number;
+    direction?: Direction;
+    width: number;
+    height: number;
+    round?: boolean;
+    railStyle?: Omit<IRectGraphicAttribute, 'width' | 'height'>;
+    sliderStyle?: Omit<IRectGraphicAttribute, 'width' | 'height'>;
+    padding?: Padding;
+    range: [number, number];
+    limitRange?: [number, number];
+}

package/es/scrollbar/type.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=type.js.map

package/es/scrollbar/type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scrollbar/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type { IGroupGraphicAttribute, IRectGraphicAttribute } from '@visactor/vrender';\nimport type { Direction } from '../interface';\nimport { Padding } from '../core/type';\nexport interface ScrollBarAttributes extends IGroupGraphicAttribute {\n  x: number;\n  y: number;\n  /**\n   * 滚动条的布局方向，默认为 `horizontal`，水平布局。\n   * @default horizontal\n   */\n  direction?: Direction;\n  /** 滚动条的宽度。 */\n  width: number;\n  /** 滚动条的高度。 */\n  height: number;\n  /** 滑块是否圆角。 */\n  round?: boolean;\n  /**\n   * 滚动条轨道样式。\n   */\n  railStyle?: Omit<IRectGraphicAttribute, 'width' | 'height'>;\n  /**\n   * 滚动条滑块样式。\n   */\n  sliderStyle?: Omit<IRectGraphicAttribute, 'width' | 'height'>;\n  /**\n   * 滚动条内边距，影响滑轨的实际可用空间 [top, right, bottom, left]\n   */\n  padding?: Padding;\n  /** 滑块当前的可视范围，数值为 0 - 1 */\n  range: [number, number];\n  /**\n   * 滑块限制的滚动范围，数值为 0 - 1\n   */\n  limitRange?: [number, number];\n}\n"]}

package/es/segment/index.d.ts

@@ -0,0 +1,2 @@
+export * from './segment';
+export * from './type';

package/es/segment/index.js

@@ -0,0 +1,4 @@
+export * from "./segment";
+
+export * from "./type";
+//# sourceMappingURL=index.js.map

package/es/segment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segment/index.ts"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["/**\n * @description 线，两端可带箭头等 symbol\n */\nexport * from './segment';\nexport * from './type';\n"]}

package/es/segment/segment.d.ts

@@ -0,0 +1,18 @@
+import { ILine, ISymbol } from '@visactor/vrender';
+import { AbstractComponent } from '../core/base';
+import { SegmentAttributes } from './type';
+export declare class Segment extends AbstractComponent<Required<SegmentAttributes>> {
+    name: string;
+    line: ILine;
+    startSymbol?: ISymbol;
+    endSymbol?: ISymbol;
+    private _startAngle;
+    private _endAngle;
+    static defaultAttributes: Partial<SegmentAttributes>;
+    constructor(attributes: SegmentAttributes);
+    protected computeLineAngle(): void;
+    protected render(): void;
+    private renderSymbol;
+    getStartAngle(): number;
+    getEndAngle(): number;
+}

package/es/segment/segment.js

@@ -0,0 +1,103 @@
+import { isEmpty, merge } from "@visactor/vutils";
+
+import { createSymbol, createLine } from "@visactor/vrender";
+
+import { AbstractComponent } from "../core/base";
+
+export class Segment extends AbstractComponent {
+    constructor(attributes) {
+        super(merge({}, Segment.defaultAttributes, attributes)), this.name = "segment";
+    }
+    computeLineAngle() {
+        const {points: points} = this.attribute, start = points[0], startInside = points[1], endInside = points[points.length - 2], end = points[points.length - 1], startVector = [ start.x - startInside.x, start.y - startInside.y ], startAngle = Math.atan2(startVector[1], startVector[0]), endVector = [ end.x - endInside.x, end.y - endInside.y ], endAngle = Math.atan2(endVector[1], endVector[0]);
+        this._startAngle = startAngle, this._endAngle = endAngle;
+    }
+    render() {
+        this.removeAllChild();
+        const {points: points, startSymbol: startSymbol, endSymbol: endSymbol, lineStyle: lineStyle, state: state} = this.attribute;
+        points.length > 1 && this.computeLineAngle();
+        const startSymbolShape = this.renderSymbol(startSymbol, "start"), endSymbolShape = this.renderSymbol(endSymbol, "end");
+        this.startSymbol = startSymbolShape, this.endSymbol = endSymbolShape;
+        let pointsAfterClip = points;
+        if (null == startSymbol ? void 0 : startSymbol.visible) {
+            const startSize = (null == startSymbol ? void 0 : startSymbol.clip) ? (null == startSymbol ? void 0 : startSymbol.size) || 10 : 0;
+            pointsAfterClip = [ {
+                x: points[0].x - startSize / 2 * (Math.cos(this._startAngle) || 0),
+                y: points[0].y - startSize / 2 * (Math.sin(this._startAngle) || 0)
+            }, ...pointsAfterClip.slice(1) ];
+        }
+        if (null == endSymbol ? void 0 : endSymbol.visible) {
+            const endSize = (null == endSymbol ? void 0 : endSymbol.clip) ? (null == endSymbol ? void 0 : endSymbol.size) || 10 : 0, pointsEnd = {
+                x: points[points.length - 1].x - endSize / 2 * (Math.cos(this._endAngle) || 0),
+                y: points[points.length - 1].y - endSize / 2 * (Math.sin(this._endAngle) || 0)
+            };
+            pointsAfterClip = [ ...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd ];
+        }
+        const line = createLine(Object.assign({
+            points: pointsAfterClip,
+            fill: !1
+        }, lineStyle));
+        line.name = "line", line.id = this._getNodeId("line"), isEmpty(null == state ? void 0 : state.line) || (line.states = state.line), 
+        this.line = line, this.add(line);
+    }
+    renderSymbol(attribute, dim) {
+        let symbol;
+        if (null == attribute ? void 0 : attribute.visible) {
+            const startAngle = this._startAngle, endAngle = this._endAngle, {points: points, state: state} = this.attribute, start = points[0], end = points[points.length - 1], {refX: refX = 0, refY: refY = 0, refAngle: refAngle = 0, style: style, symbolType: symbolType, size: size = 12} = attribute;
+            let position, rotate;
+            "start" === dim ? (position = {
+                x: start.x + (startAngle ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),
+                y: start.y + (startAngle ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)
+            }, rotate = startAngle + Math.PI / 2) : (position = {
+                x: end.x + (endAngle ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
+                y: end.y + (endAngle ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
+            }, rotate = endAngle + Math.PI / 2), symbol = createSymbol(Object.assign(Object.assign(Object.assign({}, position), {
+                symbolType: symbolType,
+                size: size,
+                angle: rotate + refAngle,
+                strokeBoundsBuffer: 0
+            }), style)), symbol.name = `${dim}-symbol`, symbol.id = this._getNodeId(`${dim}-symbol`), 
+            isEmpty(null == state ? void 0 : state.symbol) || (symbol.states = state.symbol), 
+            this.add(symbol);
+        }
+        return symbol;
+    }
+    getStartAngle() {
+        return this._startAngle;
+    }
+    getEndAngle() {
+        return this._endAngle;
+    }
+}
+
+Segment.defaultAttributes = {
+    lineStyle: {
+        lineWidth: 1,
+        strokeColor: "#000"
+    },
+    startSymbol: {
+        visible: !1,
+        symbolType: "triangle",
+        size: 12,
+        refX: 0,
+        refY: 0,
+        refAngle: 0,
+        style: {
+            fillColor: "#000",
+            zIndex: 1
+        }
+    },
+    endSymbol: {
+        visible: !1,
+        symbolType: "triangle",
+        size: 12,
+        refX: 0,
+        refY: 0,
+        refAngle: 0,
+        style: {
+            fillColor: "#000",
+            zIndex: 1
+        }
+    }
+};
+//# sourceMappingURL=segment.js.map

package/es/segment/segment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segment/segment.ts"],"names":[],"mappings":"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","file":"segment.js","sourcesContent":["/**\n * @description 标签组件\n */\nimport { isEmpty, merge } from '@visactor/vutils';\nimport { createSymbol, ILine, ISymbol, createLine } from '@visactor/vrender';\nimport { AbstractComponent } from '../core/base';\nimport { SegmentAttributes, SymbolAttributes } from './type';\n\nexport class Segment extends AbstractComponent<Required<SegmentAttributes>> {\n  name = 'segment';\n\n  line!: ILine;\n  startSymbol?: ISymbol;\n  endSymbol?: ISymbol;\n\n  private _startAngle!: number;\n  private _endAngle!: number;\n\n  static defaultAttributes: Partial<SegmentAttributes> = {\n    lineStyle: {\n      lineWidth: 1,\n      strokeColor: '#000'\n    },\n    startSymbol: {\n      visible: false,\n      symbolType: 'triangle',\n      size: 12,\n      refX: 0,\n      refY: 0,\n      refAngle: 0,\n      style: {\n        fillColor: '#000',\n        zIndex: 1 // 默认 symbol 绘制在 line 上面\n      }\n    },\n    endSymbol: {\n      visible: false,\n      symbolType: 'triangle',\n      size: 12,\n      refX: 0,\n      refY: 0,\n      refAngle: 0,\n      style: {\n        fillColor: '#000',\n        zIndex: 1 // 默认 symbol 绘制在 line 上面\n      }\n    }\n  };\n\n  constructor(attributes: SegmentAttributes) {\n    super(merge({}, Segment.defaultAttributes, attributes));\n  }\n\n  protected computeLineAngle() {\n    const { points } = this.attribute as SegmentAttributes;\n    const start = points[0];\n    const startInside = points[1];\n    const endInside = points[points.length - 2];\n    const end = points[points.length - 1];\n    const startVector = [start.x - startInside.x, start.y - startInside.y]; // 起点正方向向量\n    const startAngle = Math.atan2(startVector[1], startVector[0]); // 起点正方向角度\n    const endVector = [end.x - endInside.x, end.y - endInside.y]; // 终点正方向向量\n    const endAngle = Math.atan2(endVector[1], endVector[0]); // 终点正方向角度\n\n    this._startAngle = startAngle;\n    this._endAngle = endAngle;\n  }\n  protected render() {\n    this.removeAllChild();\n    const { points, startSymbol, endSymbol, lineStyle, state } = this.attribute as SegmentAttributes;\n\n    // 计算线的起点和终点角度\n    // 计算角度的原因：\n    // 1. segment symbol的自动旋转提供参数\n    // 2. 使用segment时，需要根据line的角度对附加元素进行自动旋转（比如：markLine的标签, markPoint的装饰线）\n    if (points.length > 1) {\n      this.computeLineAngle();\n    }\n\n    // 绘制start和end symbol\n    const startSymbolShape = this.renderSymbol(startSymbol as SymbolAttributes, 'start');\n    const endSymbolShape = this.renderSymbol(endSymbol as SymbolAttributes, 'end');\n\n    this.startSymbol = startSymbolShape;\n    this.endSymbol = endSymbolShape;\n\n    // 通过改变line起点和终点的方式达到symbol在fill为false的情况下，也可以遮盖line的效果\n    let pointsAfterClip = points;\n    if (startSymbol?.visible) {\n      const startSize = startSymbol?.clip ? startSymbol?.size || 10 : 0;\n      const pointsStart = {\n        x: points[0].x - (startSize / 2) * (Math.cos(this._startAngle) || 0),\n        y: points[0].y - (startSize / 2) * (Math.sin(this._startAngle) || 0)\n      };\n      pointsAfterClip = [pointsStart, ...pointsAfterClip.slice(1)];\n    }\n    if (endSymbol?.visible) {\n      const endSize = endSymbol?.clip ? endSymbol?.size || 10 : 0;\n      const pointsEnd = {\n        x: points[points.length - 1].x - (endSize / 2) * (Math.cos(this._endAngle) || 0),\n        y: points[points.length - 1].y - (endSize / 2) * (Math.sin(this._endAngle) || 0)\n      };\n      pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];\n    }\n\n    const line = createLine({\n      points: pointsAfterClip,\n      fill: false,\n      ...lineStyle\n    });\n\n    line.name = 'line';\n    line.id = this._getNodeId('line');\n    if (!isEmpty(state?.line)) {\n      line.states = state.line;\n    }\n    this.line = line;\n    this.add(line);\n  }\n\n  private renderSymbol(attribute: SymbolAttributes, dim: string): ISymbol | undefined {\n    let symbol;\n    if (attribute?.visible) {\n      const startAngle = this._startAngle;\n      const endAngle = this._endAngle;\n      const { points, state } = this.attribute as SegmentAttributes;\n      const start = points[0];\n      const end = points[points.length - 1];\n      const { refX = 0, refY = 0, refAngle = 0, style, symbolType, size = 12 } = attribute;\n      let position;\n      let rotate;\n      if (dim === 'start') {\n        position = {\n          x: start.x + (startAngle ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),\n          y: start.y + (startAngle ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)\n        };\n        rotate = startAngle + Math.PI / 2; // @chensiji - 加Math.PI / 2是因为：默认symbol的包围盒垂直于line，所以在做自动旋转时需要在line正方向基础上做90度偏移\n      } else {\n        position = {\n          x: end.x + (endAngle ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),\n          y: end.y + (endAngle ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)\n        };\n        rotate = endAngle + Math.PI / 2;\n      }\n\n      symbol = createSymbol({\n        ...position,\n        symbolType: symbolType as string,\n        size,\n        angle: rotate + refAngle,\n        strokeBoundsBuffer: 0,\n        ...style\n      });\n      symbol.name = `${dim}-symbol`;\n      symbol.id = this._getNodeId(`${dim}-symbol`);\n\n      if (!isEmpty(state?.symbol)) {\n        symbol.states = state.symbol;\n      }\n\n      this.add(symbol);\n    }\n    return symbol;\n  }\n\n  /**\n   * 外部获取segement起点正方向\n   */\n  getStartAngle() {\n    return this._startAngle;\n  }\n\n  /**\n   * 外部获取segement终点正方向\n   */\n  getEndAngle() {\n    return this._endAngle;\n  }\n}\n"]}

package/es/segment/type.d.ts

@@ -0,0 +1,22 @@
+import { IGraphicAttribute, IGroupGraphicAttribute, ILineGraphicAttribute, ISymbolGraphicAttribute, SymbolType } from '@visactor/vrender';
+import { Point, State } from '../core/type';
+export type SymbolAttributes = {
+    visible: boolean;
+    symbolType?: SymbolType;
+    size?: number;
+    refX?: number;
+    refY?: number;
+    refAngle?: number;
+    clip?: boolean;
+    style?: Partial<IGraphicAttribute>;
+};
+export interface SegmentAttributes extends IGroupGraphicAttribute {
+    points: Point[];
+    startSymbol?: SymbolAttributes;
+    endSymbol?: SymbolAttributes;
+    lineStyle?: Partial<ILineGraphicAttribute>;
+    state?: {
+        line?: State<Partial<ILineGraphicAttribute>>;
+        symbol?: State<Partial<ISymbolGraphicAttribute>>;
+    };
+}

package/es/segment/type.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=type.js.map

package/es/segment/type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segment/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import {\n  IGraphicAttribute,\n  IGroupGraphicAttribute,\n  ILineGraphicAttribute,\n  ISymbolGraphicAttribute,\n  SymbolType\n} from '@visactor/vrender';\nimport { Point, State } from '../core/type';\n\nexport type SymbolAttributes = {\n  /** 是否展示 symbol */\n  visible: boolean;\n  /**\n   * symbol 形状，默认为带左右方向的箭头\n   */\n  symbolType?: SymbolType;\n  /**\n   * symbol 大小\n   */\n  size?: number;\n  /**\n   * symbol 相对line平行方向上的偏移\n   */\n  refX?: number;\n  /**\n   * symbol 相对line正交方向上的偏移\n   */\n  refY?: number;\n  /**\n   * symbol 相对默认角度的偏移\n   * @description (@chensiji: 默认角度为笛卡尔坐标系y正方向，即默认symbol包围盒的角度为笛卡尔坐标系y正方向, 做自动旋转时, 会在此基础上，将包围盒转换到line平行方向上。)\n   */\n  refAngle?: number;\n  /**\n   * symbol 是否clip line，即当symbol fill为false时，line在symbol内部的部分是否展示\n   * @defalut false\n   */\n  clip?: boolean;\n  /**\n   * symbol 样式配置\n   */\n  style?: Partial<IGraphicAttribute>;\n};\n\nexport interface SegmentAttributes extends IGroupGraphicAttribute {\n  points: Point[];\n  /** 轴线起始点 symbol 配置 */\n  startSymbol?: SymbolAttributes;\n  /** 轴线末端 symbol 配置 */\n  endSymbol?: SymbolAttributes;\n  /**\n   * 线样式配置\n   */\n  lineStyle?: Partial<ILineGraphicAttribute>;\n\n  state?: {\n    line?: State<Partial<ILineGraphicAttribute>>;\n    symbol?: State<Partial<ISymbolGraphicAttribute>>;\n  };\n}\n"]}

package/es/slider/constant.d.ts

@@ -0,0 +1,13 @@
+export declare enum SLIDER_ELEMENT_NAME {
+    innerView = "innerView",
+    railContainer = "sliderRailContainer",
+    rail = "sliderRail",
+    startText = "sliderStartText",
+    endText = "sliderEndText",
+    startHandler = "sliderStartHandler",
+    startHandlerText = "startHandlerText",
+    endHandler = "sliderEndHandler",
+    endHandlerText = "sliderEndHandlerText",
+    track = "sliderTrack",
+    trackContainer = "sliderTrackContainer"
+}

package/es/slider/constant.js

@@ -0,0 +1,11 @@
+export var SLIDER_ELEMENT_NAME;
+
+!function(SLIDER_ELEMENT_NAME) {
+    SLIDER_ELEMENT_NAME.innerView = "innerView", SLIDER_ELEMENT_NAME.railContainer = "sliderRailContainer", 
+    SLIDER_ELEMENT_NAME.rail = "sliderRail", SLIDER_ELEMENT_NAME.startText = "sliderStartText", 
+    SLIDER_ELEMENT_NAME.endText = "sliderEndText", SLIDER_ELEMENT_NAME.startHandler = "sliderStartHandler", 
+    SLIDER_ELEMENT_NAME.startHandlerText = "startHandlerText", SLIDER_ELEMENT_NAME.endHandler = "sliderEndHandler", 
+    SLIDER_ELEMENT_NAME.endHandlerText = "sliderEndHandlerText", SLIDER_ELEMENT_NAME.track = "sliderTrack", 
+    SLIDER_ELEMENT_NAME.trackContainer = "sliderTrackContainer";
+}(SLIDER_ELEMENT_NAME || (SLIDER_ELEMENT_NAME = {}));
+//# sourceMappingURL=constant.js.map

package/es/slider/constant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,mBAeX;AAfD,WAAY,mBAAmB;IAC7B,8CAAuB,CAAA;IACvB,4DAAqC,CAAA;IACrC,0CAAmB,CAAA;IACnB,oDAA6B,CAAA;IAC7B,gDAAyB,CAAA;IAEzB,0DAAmC,CAAA;IACnC,4DAAqC,CAAA;IACrC,sDAA+B,CAAA;IAC/B,8DAAuC,CAAA;IAEvC,4CAAqB,CAAA;IAErB,8DAAuC,CAAA;AACzC,CAAC,EAfW,mBAAmB,KAAnB,mBAAmB,QAe9B","file":"constant.js","sourcesContent":["export enum SLIDER_ELEMENT_NAME {\n  innerView = 'innerView',\n  railContainer = 'sliderRailContainer',\n  rail = 'sliderRail',\n  startText = 'sliderStartText',\n  endText = 'sliderEndText',\n\n  startHandler = 'sliderStartHandler',\n  startHandlerText = 'startHandlerText',\n  endHandler = 'sliderEndHandler',\n  endHandlerText = 'sliderEndHandlerText',\n\n  track = 'sliderTrack',\n\n  trackContainer = 'sliderTrackContainer'\n}\n"]}

package/es/slider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './type';
+export * from './slider';
+export * from './constant';

package/es/slider/index.js

@@ -0,0 +1,6 @@
+export * from "./type";
+
+export * from "./slider";
+
+export * from "./constant";
+//# sourceMappingURL=index.js.map

package/es/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC","file":"index.js","sourcesContent":["export * from './type';\nexport * from './slider';\nexport * from './constant';\n"]}