@visactor/vrender-components 0.22.7-alpha.10 → 0.22.7-alpha.11

package/es/marker/type.d.ts

@@ -107,13 +107,13 @@ export type MarkCommonLineState<LineAttr> = {
     line?: State<LineAttr>;
     lineStartSymbol?: State<Partial<ISymbolGraphicAttribute>>;
     lineEndSymbol?: State<Partial<ISymbolGraphicAttribute>>;
-    label?: State<Partial<ITextGraphicAttribute>>;
-    labelBackground?: State<Partial<IRectGraphicAttribute>>;
+    label?: State<Partial<ITextGraphicAttribute>> | State<Partial<ITextGraphicAttribute>>[];
+    labelBackground?: State<Partial<IRectGraphicAttribute>> | State<Partial<IRectGraphicAttribute>>[];
 };
 export type CommonMarkAreaState<AreaAttr> = {
     area?: State<Partial<AreaAttr>>;
-    label?: State<Partial<ITextGraphicAttribute>>;
-    labelBackground?: State<Partial<IRectGraphicAttribute>>;
+    label?: State<Partial<ITextGraphicAttribute>> | State<Partial<ITextGraphicAttribute>>[];
+    labelBackground?: State<Partial<IRectGraphicAttribute>> | State<Partial<IRectGraphicAttribute>>[];
 };
 export type MarkPointState = {
     line?: State<ILineGraphicWithCornerRadius | Partial<ILineGraphicAttribute>[]>;
@@ -127,11 +127,12 @@ export type MarkPointState = {
     customMark?: State<Partial<IGroupGraphicAttribute>>;
     targetItem?: State<Partial<ISymbolGraphicAttribute>>;
 };
+export type MarkerLineLabelAttrs<LineLabelPosition> = {
+    position?: LineLabelPosition;
+    confine?: boolean;
+} & IMarkRef & IMarkLabel;
 export type MarkCommonLineAttrs<LineAttr, LineLabelPosition, MarkCommonLineAnimationType> = MarkerAttrs<MarkCommonLineAnimationType> & Omit<CommonSegmentAttributes, 'state' | 'lineStyle'> & {
-    label?: {
-        position?: LineLabelPosition;
-        confine?: boolean;
-    } & IMarkRef & IMarkLabel;
+    label?: MarkerLineLabelAttrs<LineLabelPosition> | MarkerLineLabelAttrs<LineLabelPosition>[];
     state?: MarkCommonLineState<LineAttr>;
 };
 export type MarkLineAttrs = MarkCommonLineAttrs<ILineGraphicWithCornerRadius | ILineGraphicAttribute[], keyof typeof IMarkLineLabelPosition, MarkCommonLineAnimationType> & {
@@ -152,16 +153,21 @@ export type MarkArcLineAttrs = MarkCommonLineAttrs<IArcGraphicAttribute, keyof t
     endAngle: number;
     lineStyle?: IArcGraphicAttribute;
 };
+export type MarkerAreaLabelAttrs = {
+    position?: keyof typeof IMarkAreaLabelPosition;
+    confine?: boolean;
+} & IMarkLabel;
 export type MarkAreaAttrs = MarkerAttrs<CommonMarkAreaAnimationType> & {
     type?: 'area';
     points: Point[];
-    label?: {
-        position?: keyof typeof IMarkAreaLabelPosition;
-        confine?: boolean;
-    } & IMarkLabel;
+    label?: MarkerAreaLabelAttrs | MarkerAreaLabelAttrs[];
     areaStyle?: IPolygonAttribute;
     state?: CommonMarkAreaState<IPolygonGraphicAttribute>;
 };
+export type MarkerArcAreaLabelAttrs = {
+    position?: keyof typeof IMarkCommonArcLabelPosition;
+    confine?: boolean;
+} & IMarkRef & IMarkLabel;
 export type MarkArcAreaAttrs = MarkerAttrs<CommonMarkAreaAnimationType> & {
     type?: 'arc-area';
     center: {
@@ -172,10 +178,7 @@ export type MarkArcAreaAttrs = MarkerAttrs<CommonMarkAreaAnimationType> & {
     outerRadius: number;
     startAngle: number;
     endAngle: number;
-    label?: {
-        position?: keyof typeof IMarkCommonArcLabelPosition;
-        confine?: boolean;
-    } & IMarkRef & IMarkLabel;
+    label?: MarkerArcAreaLabelAttrs | MarkerArcAreaLabelAttrs[];
     areaStyle?: IArcGraphicAttribute;
     state?: CommonMarkAreaState<IArcGraphicAttribute>;
 };

package/es/marker/type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/marker/type.ts"],"names":[],"mappings":"AAmBA,MAAM,CAAN,IAAY,sBAkBX;AAlBD,WAAY,sBAAsB;IAChC,yCAAe,CAAA;IACf,+CAAqB,CAAA;IACrB,qDAA2B,CAAA;IAC3B,qDAA2B,CAAA;IAC3B,2DAAiC,CAAA;IACjC,iEAAuC,CAAA;IAEvC,2CAAiB,CAAA;IACjB,6DAAmC,CAAA;IACnC,mEAAyC,CAAA;IAEzC,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,iDAAuB,CAAA;IACvB,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,6DAAmC,CAAA;AACrC,CAAC,EAlBW,sBAAsB,KAAtB,sBAAsB,QAkBjC;AAED,MAAM,CAAN,IAAY,sBAoBX;AApBD,WAAY,sBAAsB;IAChC,uCAAa,CAAA;IACb,yCAAe,CAAA;IACf,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,6CAAmB,CAAA;IACnB,+CAAqB,CAAA;IACrB,mDAAyB,CAAA;IACzB,qDAA2B,CAAA;IAE3B,2CAAiB,CAAA;IAEjB,mDAAyB,CAAA;IACzB,qDAA2B,CAAA;IAC3B,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,yDAA+B,CAAA;IAC/B,2DAAiC,CAAA;IACjC,+DAAqC,CAAA;IACrC,iEAAuC,CAAA;AACzC,CAAC,EApBW,sBAAsB,KAAtB,sBAAsB,QAoBjC;AAED,MAAM,CAAN,IAAY,2BAQX;AARD,WAAY,2BAA2B;IACrC,8DAA+B,CAAA;IAC/B,0DAA2B,CAAA;IAC3B,gEAAiC,CAAA;IACjC,8DAA+B,CAAA;IAC/B,0DAA2B,CAAA;IAC3B,gEAAiC,CAAA;IACjC,gDAAiB,CAAA;AACnB,CAAC,EARW,2BAA2B,KAA3B,2BAA2B,QAQtC;AAED,MAAM,CAAN,IAAY,sBAOX;AAPD,WAAY,sBAAsB;IAChC,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,2CAAiB,CAAA;IACjB,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,uDAA6B,CAAA;AAC/B,CAAC,EAPW,sBAAsB,KAAtB,sBAAsB,QAOjC","file":"type.js","sourcesContent":["import type {\n  EasingType,\n  IArcGraphicAttribute,\n  IGroup,\n  IGroupGraphicAttribute,\n  IImageGraphicAttribute,\n  ILineGraphicAttribute,\n  IPolygonAttribute,\n  IPolygonGraphicAttribute,\n  IRectGraphicAttribute,\n  IRichTextGraphicAttribute,\n  ISymbol,\n  ISymbolGraphicAttribute,\n  ITextGraphicAttribute\n} from '@visactor/vrender-core';\nimport type { CommonSegmentAttributes, ILineGraphicWithCornerRadius, SegmentAttributes } from '../segment/type';\nimport type { TagAttributes } from '../tag/type';\nimport type { Point, State } from '../core/type';\n\nexport enum IMarkLineLabelPosition {\n  start = 'start',\n  startTop = 'startTop',\n  startBottom = 'startBottom',\n  insideStart = 'insideStart',\n  insideStartTop = 'insideStartTop',\n  insideStartBottom = 'insideStartBottom',\n\n  middle = 'middle',\n  insideMiddleTop = 'insideMiddleTop',\n  insideMiddleBottom = 'insideMiddleBottom',\n\n  end = 'end',\n  endTop = 'endTop',\n  endBottom = 'endBottom',\n  insideEnd = 'insideEnd',\n  insideEndTop = 'insideEndTop',\n  insideEndBottom = 'insideEndBottom'\n}\n\nexport enum IMarkAreaLabelPosition {\n  left = 'left',\n  right = 'right',\n  top = 'top',\n  bottom = 'bottom',\n  topLeft = 'topLeft',\n  topRight = 'topRight',\n  bottomLeft = 'bottomLeft',\n  bottomRight = 'bottomRight',\n\n  middle = 'middle',\n\n  insideLeft = 'insideLeft',\n  insideRight = 'insideRight',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom',\n  insideTopLeft = 'insideTopLeft',\n  insideTopRight = 'insideTopRight',\n  insideBottomLeft = 'insideBottomLeft',\n  insideBottomRight = 'insideBottomRight'\n}\n\nexport enum IMarkCommonArcLabelPosition {\n  arcInnerStart = 'arcInnerStart',\n  arcInnerEnd = 'arcInnerEnd',\n  arcInnerMiddle = 'arcInnerMiddle',\n  arcOuterStart = 'arcOuterStart',\n  arcOuterEnd = 'arcOuterEnd',\n  arcOuterMiddle = 'arcOuterMiddle',\n  center = 'center'\n}\n\nexport enum IMarkPointItemPosition {\n  top = 'top',\n  bottom = 'bottom',\n  middle = 'middle',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom',\n  insideMiddle = 'insideMiddle'\n}\n\nexport type IMarkBackgroundAttributes = {\n  /**\n   * 是否绘制背景层\n   */\n  visible: boolean;\n  /**\n   * TODO: 根据文字宽度进行背景 panel size自适应\n   */\n  autoHeight?: boolean;\n  /**\n   * TODO: 根据文高度度进行背景 panel size自适应\n   */\n  autoWidth?: boolean;\n} & Partial<IRectGraphicAttribute>;\n\nexport type IMarkLabel = Omit<TagAttributes, 'x' | 'y' | 'panel'> & {\n  /**\n   * 标签的背景面板配置\n   */\n  panel?: IMarkBackgroundAttributes;\n};\n\nexport type IMarkRef = {\n  /**\n   * 自动旋转，沿着线的方向\n   * @default\n   * mark-line/mark-area/mark-point: false - 旧逻辑里autoRotate是false, 保持不变\n   * mark-arc-line/mark-arc-area: true - 新增逻辑, 如果不开启的话, 效果不太好, 所以默认true\n   * mark-point - 旧逻辑里autoRotate是true, 保持不变\n   */\n  autoRotate?: boolean;\n  /**\n   * label 相对line平行方向上的偏移\n   */\n  refX?: number;\n  /**\n   * label 相对line正交方向上的偏移\n   */\n  refY?: number;\n  /**\n   * label 相对默认角度的偏移 （label跟随line的角度做自动旋转时，默认按照line的平行向量作为初始角度）\n   */\n  refAngle?: number;\n};\n\nexport type MarkerAttrs<AnimationType> = IGroupGraphicAttribute & {\n  /**\n   * 设置标注的类型\n   */\n  type?: 'line' | 'arc-line' | 'area' | 'arc-area' | 'point';\n  /**\n   * 是否支持交互\n   * @default true\n   */\n  interactive?: boolean;\n  /**\n   * 是否开启选中交互\n   * @default false\n   */\n  select?: boolean;\n  /**\n   * 是否开启 hover 交互\n   * @default false\n   */\n  hover?: boolean;\n  /**\n   * 是否显示marker组件\n   * @default true\n   */\n  visible?: boolean;\n  /**\n   * 是否将组件在绘制区域内进行剪切\n   * @default true\n   */\n  clipInRange?: boolean;\n  /**\n   * 组件绘制范围配置\n   */\n  limitRect?: {\n    /**\n     * 绘制范围的起点x坐标\n     */\n    x: number;\n    /**\n     * 绘制范围的起点y坐标\n     */\n    y: number;\n    /**\n     * 绘制范围的宽度\n     */\n    width: number;\n    /**\n     * 绘制范围的高度\n     */\n    height: number;\n  };\n} & BaseMarkerAnimation<AnimationType>;\n\n/** animation type */\nexport type BaseMarkerAnimation<T> = {\n  /**\n   * 动画公共配置\n   */\n  animation?: MarkerAnimation<T> | boolean;\n  /**\n   * 入场动画配置\n   */\n  animationEnter?: MarkerUpdateAnimation<T>;\n  /**\n   * 更新动画配置\n   */\n  animationUpdate?: MarkerUpdateAnimation<T>;\n  /**\n   * 离场动画配置\n   */\n  animationExit?: MarkerExitAnimation;\n};\nexport type MarkerAnimation<T> = MarkerUpdateAnimation<T> | MarkerUpdateAnimation<T>;\n\nexport type MarkerUpdateAnimation<T> = {\n  /**\n   * 设置动画的类型\n   */\n  type: T;\n} & MarkerExitAnimation;\n\nexport type MarkCommonLineAnimationType = 'clipIn' | 'fadeIn';\n\nexport type CommonMarkAreaAnimationType = 'fadeIn';\n\nexport type MarkPointAnimationType = 'callIn' | 'fadeIn';\n\nexport type MarkerExitAnimation = {\n  /**\n   * 设置离场动画的类型为fadeOut，即淡出\n   */\n  type: 'fadeOut';\n  /**\n   * 动画的时长\n   */\n  duration?: number;\n  /**\n   * 动画延迟的时长\n   */\n  delay?: number;\n  /**\n   * 动画的缓动函数\n   */\n  easing?: EasingType;\n};\n\nexport type MarkerAnimationState = 'enter' | 'update' | 'exit';\n\n/** state type */\nexport type MarkCommonLineState<LineAttr> = {\n  /**\n   * 设置线图形的在特定状态下的样式\n   */\n  line?: State<LineAttr>;\n  /**\n   * 设置线的起点在特定状态下的样式\n   */\n  lineStartSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置线的终点在特定状态下的样式\n   */\n  lineEndSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置标签在特定状态下的样式\n   */\n  label?: State<Partial<ITextGraphicAttribute>>;\n  /**\n   * 设置标签背景区块在特定状态下的样式\n   */\n  labelBackground?: State<Partial<IRectGraphicAttribute>>;\n};\n\nexport type CommonMarkAreaState<AreaAttr> = {\n  /**\n   * 设置标注区域在特定状态下的样式\n   */\n  area?: State<Partial<AreaAttr>>;\n  /**\n   * 设置标注区域标签在特定状态下的样式\n   */\n  label?: State<Partial<ITextGraphicAttribute>>;\n  /**\n   * 设置标签背景区块在特定状态下的样式\n   */\n  labelBackground?: State<Partial<IRectGraphicAttribute>>;\n};\n\nexport type MarkPointState = {\n  /**\n   * 设置标注点连线在特定状态下的样式\n   */\n  line?: State<ILineGraphicWithCornerRadius | Partial<ILineGraphicAttribute>[]>;\n  /**\n   * 设置线起点图形在特定状态下的样式\n   */\n  lineStartSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置线终点图形在特定状态下的样式\n   */\n  lineEndSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置标注图形在特定状态下的样式\n   */\n  symbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置标注图形在特定状态下的样式\n   */\n  image?: State<Partial<IImageGraphicAttribute>>;\n  /**\n   * 设置标签在特定状态下的样式\n   */\n  text?: State<Partial<ITextGraphicAttribute>>;\n  /**\n   * 设置标签背景区块在特定状态下的样式\n   */\n  textBackground?: State<Partial<IRectGraphicAttribute>>;\n  /**\n   * 设置富文本在特定状态下的样式\n   */\n  richText?: State<Partial<IRichTextGraphicAttribute>>;\n  /**\n   * 设置自定义标注图形在特定状态下的样式\n   */\n  customMark?: State<Partial<IGroupGraphicAttribute>>;\n  /**\n   * 设置目标元素在特定状态下的样式\n   */\n  targetItem?: State<Partial<ISymbolGraphicAttribute>>;\n};\n\nexport type MarkCommonLineAttrs<LineAttr, LineLabelPosition, MarkCommonLineAnimationType> =\n  MarkerAttrs<MarkCommonLineAnimationType> &\n    Omit<CommonSegmentAttributes, 'state' | 'lineStyle'> & {\n      /**\n       * 标签\n       */\n      label?: {\n        /**\n         * label 相对line的位置\n         */\n        position?: LineLabelPosition;\n        /**\n         * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n         * @default false\n         */\n        confine?: boolean;\n      } & IMarkRef &\n        IMarkLabel;\n      /**\n       * 辅助线各种状态下的样式\n       */\n      state?: MarkCommonLineState<LineAttr>;\n    };\n\nexport type MarkLineAttrs = MarkCommonLineAttrs<\n  ILineGraphicWithCornerRadius | ILineGraphicAttribute[],\n  keyof typeof IMarkLineLabelPosition,\n  MarkCommonLineAnimationType\n> & {\n  /**\n   * 将辅助线的类型设置为 'line'\n   */\n  type?: 'line';\n  /**\n   * 是否对 points 进行多段处理，默认为 false，即直接将所有的点连接成线。\n   * 如果需要进行多段处理，需要将 points 属性配置为 Point[][] 类型\n   * @default false\n   */\n  multiSegment?: boolean;\n  /**\n   * 在 `multiSegment` 属性开启的前提下，用于声明那一段线段用来作为主线段，如果不声明，默认全段为主线段\n   */\n  mainSegmentIndex?: number;\n  /**\n   * 构成line的点: 如果是两个点，则为直线；多个点则为折线\n   */\n  points: Point[] | Point[][];\n  /**\n   * 线的样式设置\n   */\n  lineStyle?: ILineGraphicAttribute;\n};\n\nexport type MarkArcLineAttrs = MarkCommonLineAttrs<\n  IArcGraphicAttribute,\n  keyof typeof IMarkCommonArcLabelPosition,\n  MarkCommonLineAnimationType\n> & {\n  /**\n   * 将辅助线的类型设置为 'arc-line'，即弧线\n   */\n  type?: 'arc-line';\n  /**\n   * 弧线中心位置\n   */\n  center: {\n    x: number;\n    y: number;\n  };\n  /**\n   * 弧线半径\n   */\n  radius: number;\n  /**\n   * 弧线起始角度（弧度）\n   */\n  startAngle: number;\n  /**\n   * 弧线终点角度（弧度）\n   */\n  endAngle: number;\n  /**\n   * 设置弧线的样式\n   */\n  lineStyle?: IArcGraphicAttribute;\n};\n\nexport type MarkAreaAttrs = MarkerAttrs<CommonMarkAreaAnimationType> & {\n  type?: 'area';\n  /**\n   * 构成area的点\n   */\n  points: Point[];\n  /**\n   * 标签\n   */\n  label?: {\n    /**\n     * 设置标签的位置\n     */\n    position?: keyof typeof IMarkAreaLabelPosition;\n    /**\n     * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n     * @default false\n     */\n    confine?: boolean;\n  } & IMarkLabel;\n  /**\n   * area的样式\n   */\n  areaStyle?: IPolygonAttribute;\n  /**\n   * 设置标注区域在各种状态下的样式\n   */\n  state?: CommonMarkAreaState<IPolygonGraphicAttribute>;\n};\n\nexport type MarkArcAreaAttrs = MarkerAttrs<CommonMarkAreaAnimationType> & {\n  type?: 'arc-area';\n  /**\n   * 扇区中心位置\n   */\n  center: {\n    x: number;\n    y: number;\n  };\n  /**\n   * 扇区内半径\n   */\n  innerRadius: number;\n  /**\n   * 扇区外半径\n   */\n  outerRadius: number;\n  /**\n   * 扇区起始角度（弧度）\n   */\n  startAngle: number;\n  /**\n   * 扇区终点角度（弧度）\n   */\n  endAngle: number;\n  /**\n   * 标签\n   */\n  label?: {\n    /**\n     * 标签的位置\n     */\n    position?: keyof typeof IMarkCommonArcLabelPosition;\n    /**\n     * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n     * @default false\n     */\n    confine?: boolean;\n  } & IMarkRef &\n    IMarkLabel;\n  /**\n   * area的样式\n   */\n  areaStyle?: IArcGraphicAttribute;\n  /**\n   * 辅助区域这种状态下各个图元的样式设置\n   */\n  state?: CommonMarkAreaState<IArcGraphicAttribute>;\n};\n\nexport type IItemContent = IMarkRef & {\n  /**\n   * 标注类型\n   * Tips: 保留'richText'与之前的定义做兼容\n   */\n  type?: 'symbol' | 'text' | 'image' | 'richText' | 'custom';\n  /**\n   * 设置标注的位置\n   */\n  position?: keyof typeof IMarkPointItemPosition;\n  /**\n   * x 方向偏移量\n   */\n  offsetX?: number;\n  /**\n   * y 方向偏移量\n   */\n  offsetY?: number;\n  /**\n   * type为symbol时, symbol的样式\n   */\n  symbolStyle?: ISymbolGraphicAttribute;\n  /**\n   * type为image时, image的样式\n   */\n  imageStyle?: IImageGraphicAttribute;\n  /**\n   * type为text时, text的配置\n   * 'text'类型的ItemContent新增三种子类型：'text','rich','html'。配置在textStyle.type上，继承自TagAttributes。\n   */\n  textStyle?: IMarkLabel;\n  /**\n   * type为rich text时, rich text的样式\n   */\n  richTextStyle?: IRichTextGraphicAttribute;\n  /**\n   * type为custom时，允许以callback的方式传入需要render的item\n   */\n  renderCustomCallback?: () => IGroup;\n  /**\n   * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n   * @default false\n   */\n  confine?: boolean;\n};\n\nexport type IItemLine = {\n  /** TODO：'type-opo' */\n  type?: 'type-s' | 'type-do' | 'type-po' | 'type-op' | 'type-arc';\n  /**\n   * 是否展示该标注\n   */\n  visible?: boolean;\n  /**\n   * 当type为type-arc时生效, 数值决定曲率, 符号决定法向, 不能等于0\n   * @default 0.8\n   */\n  arcRatio?: number;\n  /**\n   * 垂直于引导线的装饰线，参考案例: https://observablehq.com/@mikelotis/edmonton-population-history-line-chart\n   */\n  decorativeLine?: {\n    /**\n     * 是否显示引导线的装饰线\n     */\n    visible?: boolean;\n    /**\n     * 装饰线的长度\n     */\n    length?: number;\n  };\n} & Omit<SegmentAttributes, 'points'>;\n\nexport type MarkPointAttrs = Omit<MarkerAttrs<MarkPointAnimationType>, 'labelStyle'> & {\n  /**\n   * markPoint的位置（也是path的起点）\n   */\n  position: Point;\n  /**\n   * 标注引导线\n   */\n  itemLine?: IItemLine;\n\n  /**\n   * 标注内容\n   */\n  itemContent?: IItemContent;\n\n  /**\n   * 被标注的内容\n   */\n  targetSymbol?: {\n    /**\n     * 被标注内容与标记线间的间隙\n     * @default 0\n     */\n    offset?: number;\n    /**\n     * 是否显示\n     * @default false\n     */\n    visible?: boolean;\n    /**\n     * 大小\n     * @default 20\n     */\n    size?: number;\n    /**\n     * 被标注内容的样式设置\n     */\n    style?: ISymbol;\n  };\n  /**\n   * 标注点各个状态下的样式\n   */\n  state?: MarkPointState;\n} & BaseMarkerAnimation<MarkPointAnimationType>;\n"]}
+{"version":3,"sources":["../src/marker/type.ts"],"names":[],"mappings":"AAmBA,MAAM,CAAN,IAAY,sBAkBX;AAlBD,WAAY,sBAAsB;IAChC,yCAAe,CAAA;IACf,+CAAqB,CAAA;IACrB,qDAA2B,CAAA;IAC3B,qDAA2B,CAAA;IAC3B,2DAAiC,CAAA;IACjC,iEAAuC,CAAA;IAEvC,2CAAiB,CAAA;IACjB,6DAAmC,CAAA;IACnC,mEAAyC,CAAA;IAEzC,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,iDAAuB,CAAA;IACvB,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,6DAAmC,CAAA;AACrC,CAAC,EAlBW,sBAAsB,KAAtB,sBAAsB,QAkBjC;AAED,MAAM,CAAN,IAAY,sBAoBX;AApBD,WAAY,sBAAsB;IAChC,uCAAa,CAAA;IACb,yCAAe,CAAA;IACf,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,6CAAmB,CAAA;IACnB,+CAAqB,CAAA;IACrB,mDAAyB,CAAA;IACzB,qDAA2B,CAAA;IAE3B,2CAAiB,CAAA;IAEjB,mDAAyB,CAAA;IACzB,qDAA2B,CAAA;IAC3B,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,yDAA+B,CAAA;IAC/B,2DAAiC,CAAA;IACjC,+DAAqC,CAAA;IACrC,iEAAuC,CAAA;AACzC,CAAC,EApBW,sBAAsB,KAAtB,sBAAsB,QAoBjC;AAED,MAAM,CAAN,IAAY,2BAQX;AARD,WAAY,2BAA2B;IACrC,8DAA+B,CAAA;IAC/B,0DAA2B,CAAA;IAC3B,gEAAiC,CAAA;IACjC,8DAA+B,CAAA;IAC/B,0DAA2B,CAAA;IAC3B,gEAAiC,CAAA;IACjC,gDAAiB,CAAA;AACnB,CAAC,EARW,2BAA2B,KAA3B,2BAA2B,QAQtC;AAED,MAAM,CAAN,IAAY,sBAOX;AAPD,WAAY,sBAAsB;IAChC,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,2CAAiB,CAAA;IACjB,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,uDAA6B,CAAA;AAC/B,CAAC,EAPW,sBAAsB,KAAtB,sBAAsB,QAOjC","file":"type.js","sourcesContent":["import type {\n  EasingType,\n  IArcGraphicAttribute,\n  IGroup,\n  IGroupGraphicAttribute,\n  IImageGraphicAttribute,\n  ILineGraphicAttribute,\n  IPolygonAttribute,\n  IPolygonGraphicAttribute,\n  IRectGraphicAttribute,\n  IRichTextGraphicAttribute,\n  ISymbol,\n  ISymbolGraphicAttribute,\n  ITextGraphicAttribute\n} from '@visactor/vrender-core';\nimport type { CommonSegmentAttributes, ILineGraphicWithCornerRadius, SegmentAttributes } from '../segment/type';\nimport type { TagAttributes } from '../tag/type';\nimport type { Point, State } from '../core/type';\n\nexport enum IMarkLineLabelPosition {\n  start = 'start',\n  startTop = 'startTop',\n  startBottom = 'startBottom',\n  insideStart = 'insideStart',\n  insideStartTop = 'insideStartTop',\n  insideStartBottom = 'insideStartBottom',\n\n  middle = 'middle',\n  insideMiddleTop = 'insideMiddleTop',\n  insideMiddleBottom = 'insideMiddleBottom',\n\n  end = 'end',\n  endTop = 'endTop',\n  endBottom = 'endBottom',\n  insideEnd = 'insideEnd',\n  insideEndTop = 'insideEndTop',\n  insideEndBottom = 'insideEndBottom'\n}\n\nexport enum IMarkAreaLabelPosition {\n  left = 'left',\n  right = 'right',\n  top = 'top',\n  bottom = 'bottom',\n  topLeft = 'topLeft',\n  topRight = 'topRight',\n  bottomLeft = 'bottomLeft',\n  bottomRight = 'bottomRight',\n\n  middle = 'middle',\n\n  insideLeft = 'insideLeft',\n  insideRight = 'insideRight',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom',\n  insideTopLeft = 'insideTopLeft',\n  insideTopRight = 'insideTopRight',\n  insideBottomLeft = 'insideBottomLeft',\n  insideBottomRight = 'insideBottomRight'\n}\n\nexport enum IMarkCommonArcLabelPosition {\n  arcInnerStart = 'arcInnerStart',\n  arcInnerEnd = 'arcInnerEnd',\n  arcInnerMiddle = 'arcInnerMiddle',\n  arcOuterStart = 'arcOuterStart',\n  arcOuterEnd = 'arcOuterEnd',\n  arcOuterMiddle = 'arcOuterMiddle',\n  center = 'center'\n}\n\nexport enum IMarkPointItemPosition {\n  top = 'top',\n  bottom = 'bottom',\n  middle = 'middle',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom',\n  insideMiddle = 'insideMiddle'\n}\n\nexport type IMarkBackgroundAttributes = {\n  /**\n   * 是否绘制背景层\n   */\n  visible: boolean;\n  /**\n   * TODO: 根据文字宽度进行背景 panel size自适应\n   */\n  autoHeight?: boolean;\n  /**\n   * TODO: 根据文高度度进行背景 panel size自适应\n   */\n  autoWidth?: boolean;\n} & Partial<IRectGraphicAttribute>;\n\nexport type IMarkLabel = Omit<TagAttributes, 'x' | 'y' | 'panel'> & {\n  /**\n   * 标签的背景面板配置\n   */\n  panel?: IMarkBackgroundAttributes;\n};\n\nexport type IMarkRef = {\n  /**\n   * 自动旋转，沿着线的方向\n   * @default\n   * mark-line/mark-area/mark-point: false - 旧逻辑里autoRotate是false, 保持不变\n   * mark-arc-line/mark-arc-area: true - 新增逻辑, 如果不开启的话, 效果不太好, 所以默认true\n   * mark-point - 旧逻辑里autoRotate是true, 保持不变\n   */\n  autoRotate?: boolean;\n  /**\n   * label 相对line平行方向上的偏移\n   */\n  refX?: number;\n  /**\n   * label 相对line正交方向上的偏移\n   */\n  refY?: number;\n  /**\n   * label 相对默认角度的偏移 （label跟随line的角度做自动旋转时，默认按照line的平行向量作为初始角度）\n   */\n  refAngle?: number;\n};\n\nexport type MarkerAttrs<AnimationType> = IGroupGraphicAttribute & {\n  /**\n   * 设置标注的类型\n   */\n  type?: 'line' | 'arc-line' | 'area' | 'arc-area' | 'point';\n  /**\n   * 是否支持交互\n   * @default true\n   */\n  interactive?: boolean;\n  /**\n   * 是否开启选中交互\n   * @default false\n   */\n  select?: boolean;\n  /**\n   * 是否开启 hover 交互\n   * @default false\n   */\n  hover?: boolean;\n  /**\n   * 是否显示marker组件\n   * @default true\n   */\n  visible?: boolean;\n  /**\n   * 是否将组件在绘制区域内进行剪切\n   * @default true\n   */\n  clipInRange?: boolean;\n  /**\n   * 组件绘制范围配置\n   */\n  limitRect?: {\n    /**\n     * 绘制范围的起点x坐标\n     */\n    x: number;\n    /**\n     * 绘制范围的起点y坐标\n     */\n    y: number;\n    /**\n     * 绘制范围的宽度\n     */\n    width: number;\n    /**\n     * 绘制范围的高度\n     */\n    height: number;\n  };\n} & BaseMarkerAnimation<AnimationType>;\n\n/** animation type */\nexport type BaseMarkerAnimation<T> = {\n  /**\n   * 动画公共配置\n   */\n  animation?: MarkerAnimation<T> | boolean;\n  /**\n   * 入场动画配置\n   */\n  animationEnter?: MarkerUpdateAnimation<T>;\n  /**\n   * 更新动画配置\n   */\n  animationUpdate?: MarkerUpdateAnimation<T>;\n  /**\n   * 离场动画配置\n   */\n  animationExit?: MarkerExitAnimation;\n};\nexport type MarkerAnimation<T> = MarkerUpdateAnimation<T> | MarkerUpdateAnimation<T>;\n\nexport type MarkerUpdateAnimation<T> = {\n  /**\n   * 设置动画的类型\n   */\n  type: T;\n} & MarkerExitAnimation;\n\nexport type MarkCommonLineAnimationType = 'clipIn' | 'fadeIn';\n\nexport type CommonMarkAreaAnimationType = 'fadeIn';\n\nexport type MarkPointAnimationType = 'callIn' | 'fadeIn';\n\nexport type MarkerExitAnimation = {\n  /**\n   * 设置离场动画的类型为fadeOut，即淡出\n   */\n  type: 'fadeOut';\n  /**\n   * 动画的时长\n   */\n  duration?: number;\n  /**\n   * 动画延迟的时长\n   */\n  delay?: number;\n  /**\n   * 动画的缓动函数\n   */\n  easing?: EasingType;\n};\n\nexport type MarkerAnimationState = 'enter' | 'update' | 'exit';\n\n/** state type */\nexport type MarkCommonLineState<LineAttr> = {\n  /**\n   * 设置线图形的在特定状态下的样式\n   */\n  line?: State<LineAttr>;\n  /**\n   * 设置线的起点在特定状态下的样式\n   */\n  lineStartSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置线的终点在特定状态下的样式\n   */\n  lineEndSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置标签在特定状态下的样式\n   * 自 0.22.7 版本开始，支持多标签配置\n   */\n  label?: State<Partial<ITextGraphicAttribute>> | State<Partial<ITextGraphicAttribute>>[];\n  /**\n   * 设置标签背景区块在特定状态下的样式\n   */\n  labelBackground?: State<Partial<IRectGraphicAttribute>> | State<Partial<IRectGraphicAttribute>>[];\n};\n\nexport type CommonMarkAreaState<AreaAttr> = {\n  /**\n   * 设置标注区域在特定状态下的样式\n   */\n  area?: State<Partial<AreaAttr>>;\n  /**\n   * 设置标注区域标签在特定状态下的样式\n   * 自 0.22.7 版本开始，支持多标签配置\n   */\n  label?: State<Partial<ITextGraphicAttribute>> | State<Partial<ITextGraphicAttribute>>[];\n  /**\n   * 设置标签背景区块在特定状态下的样式\n   */\n  labelBackground?: State<Partial<IRectGraphicAttribute>> | State<Partial<IRectGraphicAttribute>>[];\n};\n\nexport type MarkPointState = {\n  /**\n   * 设置标注点连线在特定状态下的样式\n   */\n  line?: State<ILineGraphicWithCornerRadius | Partial<ILineGraphicAttribute>[]>;\n  /**\n   * 设置线起点图形在特定状态下的样式\n   */\n  lineStartSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置线终点图形在特定状态下的样式\n   */\n  lineEndSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置标注图形在特定状态下的样式\n   */\n  symbol?: State<Partial<ISymbolGraphicAttribute>>;\n  /**\n   * 设置标注图形在特定状态下的样式\n   */\n  image?: State<Partial<IImageGraphicAttribute>>;\n  /**\n   * 设置标签在特定状态下的样式\n   */\n  text?: State<Partial<ITextGraphicAttribute>>;\n  /**\n   * 设置标签背景区块在特定状态下的样式\n   */\n  textBackground?: State<Partial<IRectGraphicAttribute>>;\n  /**\n   * 设置富文本在特定状态下的样式\n   */\n  richText?: State<Partial<IRichTextGraphicAttribute>>;\n  /**\n   * 设置自定义标注图形在特定状态下的样式\n   */\n  customMark?: State<Partial<IGroupGraphicAttribute>>;\n  /**\n   * 设置目标元素在特定状态下的样式\n   */\n  targetItem?: State<Partial<ISymbolGraphicAttribute>>;\n};\n\nexport type MarkerLineLabelAttrs<LineLabelPosition> = {\n  /**\n   * label 相对line的位置\n   */\n  position?: LineLabelPosition;\n  /**\n   * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n   * @default false\n   */\n  confine?: boolean;\n} & IMarkRef &\n  IMarkLabel;\n\nexport type MarkCommonLineAttrs<LineAttr, LineLabelPosition, MarkCommonLineAnimationType> =\n  MarkerAttrs<MarkCommonLineAnimationType> &\n    Omit<CommonSegmentAttributes, 'state' | 'lineStyle'> & {\n      /**\n       * 标签\n       * 自 0.22.7 版本开始，支持多标签配置\n       */\n      label?: MarkerLineLabelAttrs<LineLabelPosition> | MarkerLineLabelAttrs<LineLabelPosition>[];\n      /**\n       * 辅助线各种状态下的样式\n       */\n      state?: MarkCommonLineState<LineAttr>;\n    };\n\nexport type MarkLineAttrs = MarkCommonLineAttrs<\n  ILineGraphicWithCornerRadius | ILineGraphicAttribute[],\n  keyof typeof IMarkLineLabelPosition,\n  MarkCommonLineAnimationType\n> & {\n  /**\n   * 将辅助线的类型设置为 'line'\n   */\n  type?: 'line';\n  /**\n   * 是否对 points 进行多段处理，默认为 false，即直接将所有的点连接成线。\n   * 如果需要进行多段处理，需要将 points 属性配置为 Point[][] 类型\n   * @default false\n   */\n  multiSegment?: boolean;\n  /**\n   * 在 `multiSegment` 属性开启的前提下，用于声明那一段线段用来作为主线段，如果不声明，默认全段为主线段\n   */\n  mainSegmentIndex?: number;\n  /**\n   * 构成line的点: 如果是两个点，则为直线；多个点则为折线\n   */\n  points: Point[] | Point[][];\n  /**\n   * 线的样式设置\n   */\n  lineStyle?: ILineGraphicAttribute;\n};\n\nexport type MarkArcLineAttrs = MarkCommonLineAttrs<\n  IArcGraphicAttribute,\n  keyof typeof IMarkCommonArcLabelPosition,\n  MarkCommonLineAnimationType\n> & {\n  /**\n   * 将辅助线的类型设置为 'arc-line'，即弧线\n   */\n  type?: 'arc-line';\n  /**\n   * 弧线中心位置\n   */\n  center: {\n    x: number;\n    y: number;\n  };\n  /**\n   * 弧线半径\n   */\n  radius: number;\n  /**\n   * 弧线起始角度（弧度）\n   */\n  startAngle: number;\n  /**\n   * 弧线终点角度（弧度）\n   */\n  endAngle: number;\n  /**\n   * 设置弧线的样式\n   */\n  lineStyle?: IArcGraphicAttribute;\n};\n\nexport type MarkerAreaLabelAttrs = {\n  /**\n   * 设置标签的位置\n   */\n  position?: keyof typeof IMarkAreaLabelPosition;\n  /**\n   * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n   * @default false\n   */\n  confine?: boolean;\n} & IMarkLabel;\n\nexport type MarkAreaAttrs = MarkerAttrs<CommonMarkAreaAnimationType> & {\n  type?: 'area';\n  /**\n   * 构成area的点\n   */\n  points: Point[];\n  /**\n   * 标签\n   * 自 0.22.7 版本开始，支持多标签配置\n   */\n  label?: MarkerAreaLabelAttrs | MarkerAreaLabelAttrs[];\n  /**\n   * area的样式\n   */\n  areaStyle?: IPolygonAttribute;\n  /**\n   * 设置标注区域在各种状态下的样式\n   */\n  state?: CommonMarkAreaState<IPolygonGraphicAttribute>;\n};\n\nexport type MarkerArcAreaLabelAttrs = {\n  /**\n   * 标签的位置\n   */\n  position?: keyof typeof IMarkCommonArcLabelPosition;\n  /**\n   * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n   * @default false\n   */\n  confine?: boolean;\n} & IMarkRef &\n  IMarkLabel;\n\nexport type MarkArcAreaAttrs = MarkerAttrs<CommonMarkAreaAnimationType> & {\n  type?: 'arc-area';\n  /**\n   * 扇区中心位置\n   */\n  center: {\n    x: number;\n    y: number;\n  };\n  /**\n   * 扇区内半径\n   */\n  innerRadius: number;\n  /**\n   * 扇区外半径\n   */\n  outerRadius: number;\n  /**\n   * 扇区起始角度（弧度）\n   */\n  startAngle: number;\n  /**\n   * 扇区终点角度（弧度）\n   */\n  endAngle: number;\n  /**\n   * 标签\n   * 自 0.22.7 版本开始，支持多标签配置\n   */\n  label?: MarkerArcAreaLabelAttrs | MarkerArcAreaLabelAttrs[];\n  /**\n   * area的样式\n   */\n  areaStyle?: IArcGraphicAttribute;\n  /**\n   * 辅助区域这种状态下各个图元的样式设置\n   */\n  state?: CommonMarkAreaState<IArcGraphicAttribute>;\n};\n\nexport type IItemContent = IMarkRef & {\n  /**\n   * 标注类型\n   * Tips: 保留'richText'与之前的定义做兼容\n   */\n  type?: 'symbol' | 'text' | 'image' | 'richText' | 'custom';\n  /**\n   * 设置标注的位置\n   */\n  position?: keyof typeof IMarkPointItemPosition;\n  /**\n   * x 方向偏移量\n   */\n  offsetX?: number;\n  /**\n   * y 方向偏移量\n   */\n  offsetY?: number;\n  /**\n   * type为symbol时, symbol的样式\n   */\n  symbolStyle?: ISymbolGraphicAttribute;\n  /**\n   * type为image时, image的样式\n   */\n  imageStyle?: IImageGraphicAttribute;\n  /**\n   * type为text时, text的配置\n   * 'text'类型的ItemContent新增三种子类型：'text','rich','html'。配置在textStyle.type上，继承自TagAttributes。\n   */\n  textStyle?: IMarkLabel;\n  /**\n   * type为rich text时, rich text的样式\n   */\n  richTextStyle?: IRichTextGraphicAttribute;\n  /**\n   * type为custom时，允许以callback的方式传入需要render的item\n   */\n  renderCustomCallback?: () => IGroup;\n  /**\n   * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n   * @default false\n   */\n  confine?: boolean;\n};\n\nexport type IItemLine = {\n  /** TODO：'type-opo' */\n  type?: 'type-s' | 'type-do' | 'type-po' | 'type-op' | 'type-arc';\n  /**\n   * 是否展示该标注\n   */\n  visible?: boolean;\n  /**\n   * 当type为type-arc时生效, 数值决定曲率, 符号决定法向, 不能等于0\n   * @default 0.8\n   */\n  arcRatio?: number;\n  /**\n   * 垂直于引导线的装饰线，参考案例: https://observablehq.com/@mikelotis/edmonton-population-history-line-chart\n   */\n  decorativeLine?: {\n    /**\n     * 是否显示引导线的装饰线\n     */\n    visible?: boolean;\n    /**\n     * 装饰线的长度\n     */\n    length?: number;\n  };\n} & Omit<SegmentAttributes, 'points'>;\n\nexport type MarkPointAttrs = Omit<MarkerAttrs<MarkPointAnimationType>, 'labelStyle'> & {\n  /**\n   * markPoint的位置（也是path的起点）\n   */\n  position: Point;\n  /**\n   * 标注引导线\n   */\n  itemLine?: IItemLine;\n\n  /**\n   * 标注内容\n   */\n  itemContent?: IItemContent;\n\n  /**\n   * 被标注的内容\n   */\n  targetSymbol?: {\n    /**\n     * 被标注内容与标记线间的间隙\n     * @default 0\n     */\n    offset?: number;\n    /**\n     * 是否显示\n     * @default false\n     */\n    visible?: boolean;\n    /**\n     * 大小\n     * @default 20\n     */\n    size?: number;\n    /**\n     * 被标注内容的样式设置\n     */\n    style?: ISymbol;\n  };\n  /**\n   * 标注点各个状态下的样式\n   */\n  state?: MarkPointState;\n} & BaseMarkerAnimation<MarkPointAnimationType>;\n"]}

package/es/scrollbar/scrollbar.d.ts

@@ -49,7 +49,6 @@ export declare class ScrollBar extends AbstractComponent<Required<ScrollBarAttri
     private _computeScrollValue;
     private _onSliderPointerMove;
     private _onSliderPointerMoveWithDelay;
-    private _clearDragEvents;
     private _onSliderPointerUp;
     private _reset;
 }

package/es/scrollbar/scrollbar.js

@@ -8,8 +8,6 @@ import { loadScrollbarComponent } from "./register";
 
 import { SCROLLBAR_START_EVENT, SCROLLBAR_EVENT, SCROLLBAR_END_EVENT } from "../constant";
 
-import { getEndTriggersOfDrag } from "../util/event";
-
 const delayMap = {
     debounce: debounce,
     throttle: throttle
@@ -33,21 +31,17 @@ export class ScrollBar extends AbstractComponent {
             this.setScrollRange([ currentScrollValue - (range[1] - range[0]) / 2, currentScrollValue + (range[1] - range[0]) / 2 ], !1), 
             this.stage && !this.stage.autoRender && this.stage.renderNextFrame();
         }, this._onSliderPointerDown = e => {
-            this._clearDragEvents();
             const {stopSliderDownPropagation: stopSliderDownPropagation = !0} = this.attribute;
             stopSliderDownPropagation && e.stopPropagation();
             const {direction: direction} = this.attribute, {x: x, y: y} = this.stage.eventPointTransform(e);
             this._prePos = "horizontal" === direction ? x : y, this._dispatchEvent(SCROLLBAR_START_EVENT, {
                 pos: this._prePos,
                 event: e
-            });
-            const triggers = getEndTriggersOfDrag(), obj = "browser" === vglobal.env ? vglobal : this.stage;
-            obj.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-                capture: !0,
-                passive: !0
-            }), triggers.forEach((trigger => {
-                obj.addEventListener(trigger, this._onSliderPointerUp);
-            }));
+            }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+                capture: !0
+            }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+                capture: !0
+            }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
         }, this._computeScrollValue = e => {
             const {direction: direction} = this.attribute, {x: x, y: y} = this.stage.eventPointTransform(e);
             let currentScrollValue, currentPos, delta = 0;
@@ -56,7 +50,6 @@ export class ScrollBar extends AbstractComponent {
             currentScrollValue = delta / height) : (currentPos = x, delta = currentPos - this._prePos, 
             currentScrollValue = delta / width), [ currentPos, currentScrollValue ];
         }, this._onSliderPointerMove = e => {
-            e.preventDefault();
             const {stopSliderMovePropagation: stopSliderMovePropagation = !0} = this.attribute;
             stopSliderMovePropagation && e.stopPropagation();
             const preScrollRange = this.getScrollRange(), [currentPos, currentScrollValue] = this._computeScrollValue(e);
@@ -64,11 +57,16 @@ export class ScrollBar extends AbstractComponent {
             this._prePos = currentPos;
         }, this._onSliderPointerMoveWithDelay = 0 === this.attribute.delayTime ? this._onSliderPointerMove : delayMap[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime), 
         this._onSliderPointerUp = e => {
+            e.preventDefault();
             const {range: preRange, limitRange: limitRange = [ 0, 1 ]} = this.attribute, preScrollRange = this.getScrollRange(), [currentPos, currentScrollValue] = this._computeScrollValue(e), range = [ preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue ];
             this._dispatchEvent(SCROLLBAR_END_EVENT, {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
-            }), this._clearDragEvents();
+            }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+                capture: !0
+            }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+                capture: !0
+            }), this.stage.removeEventListener("pointerup", this._onSliderPointerUp), this.stage.removeEventListener("pointerupoutside", this._onSliderPointerUp));
         };
     }
     setScrollRange(range, render = !0) {
@@ -164,15 +162,6 @@ export class ScrollBar extends AbstractComponent {
         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);
     }
-    _clearDragEvents() {
-        const triggers = getEndTriggersOfDrag(), obj = "browser" === vglobal.env ? vglobal : this.stage;
-        obj.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-            capture: !0,
-            passive: !1
-        }), triggers.forEach((trigger => {
-            obj.removeEventListener(trigger, this._onSliderPointerUp);
-        }));
-    }
     _reset() {
         this._sliderRenderBounds = null, this._sliderLimitRange = null;
     }

package/es/scrollbar/scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/scrollbar/scrollbar.ts"],"names":[],"mappings":"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","file":"scrollbar.js","sourcesContent":["/**\n * @description 滚动条组件\n */\nimport type { IRectGraphicAttribute, FederatedPointerEvent, IGroup, IRect } from '@visactor/vrender-core';\n// eslint-disable-next-line no-duplicate-imports\nimport { vglobal } from '@visactor/vrender-core';\nimport { merge, normalizePadding, clamp, clampRange, debounce, throttle } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\n\nimport type { ScrollBarAttributes } from './type';\nimport type { ComponentOptions } from '../interface';\nimport { loadScrollbarComponent } from './register';\nimport { SCROLLBAR_START_EVENT, SCROLLBAR_EVENT, SCROLLBAR_END_EVENT } from '../constant';\nimport { getEndTriggersOfDrag } from '../util/event';\n\ntype ComponentBounds = {\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n  width: number;\n  height: number;\n};\n\nconst delayMap = {\n  debounce: debounce,\n  throttle: throttle\n};\n\nloadScrollbarComponent();\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: 'rgba(0, 0, 0, .5)'\n    },\n    railStyle: {\n      fill: 'rgba(0, 0, 0, .0)'\n    },\n    padding: 2,\n    scrollRange: [0, 1],\n    delayType: 'throttle',\n    delayTime: 0,\n    realTime: true\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, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, ScrollBar.defaultAttributes, attributes));\n  }\n\n  setScrollRange(range: [number, number], render = true) {\n    const {\n      direction = 'horizontal',\n      limitRange = [0, 1],\n      range: preRange,\n      realTime = true\n    } = 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        const sliderSize = sliderPos[1] - sliderPos[0];\n        this._sliderSize = sliderSize;\n\n        if (direction === 'horizontal') {\n          this._slider.setAttributes(\n            {\n              x: sliderPos[0],\n              width: sliderSize\n            },\n            true\n          );\n        } else {\n          this._slider.setAttributes(\n            {\n              y: sliderPos[0],\n              height: sliderSize\n            },\n            true\n          );\n        }\n\n        if (this.stage && !this.stage.autoRender) {\n          this.stage.renderNextFrame();\n        }\n      }\n    }\n    (this.attribute as ScrollBarAttributes).range = currScrollRange;\n    // 发射 change 事件\n    if (realTime) {\n      this._dispatchEvent(SCROLLBAR_EVENT, {\n        pre: preRange,\n        value: currScrollRange\n      });\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    if (this.attribute.disableTriggerEvent) {\n      return;\n    }\n    const { delayType = 'throttle', delayTime = 0 } = this.attribute as ScrollBarAttributes;\n    // TODO: wheel 事件支持\n    if (this._rail) {\n      this._rail.addEventListener(\n        'pointerdown',\n        delayMap[delayType](this._onRailPointerDown, delayTime) as EventListener\n      );\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        cornerRadius: this._getDefaultSliderCornerRadius(),\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  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: Math.max(0, width - (left + right)),\n      height: Math.max(0, height - (top + bottom))\n    };\n    this._sliderRenderBounds = renderBounds;\n    return renderBounds;\n  }\n\n  // 获取默认的滑块圆角\n  private _getDefaultSliderCornerRadius() {\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 && !this.stage.autoRender) {\n      this.stage.renderNextFrame();\n    }\n  };\n\n  private _onSliderPointerDown = (e: FederatedPointerEvent) => {\n    this._clearDragEvents();\n    const { stopSliderDownPropagation = true } = this.attribute as ScrollBarAttributes;\n    if (stopSliderDownPropagation) {\n      e.stopPropagation();\n    }\n    const { direction } = this.attribute as ScrollBarAttributes;\n    const { x, y } = this.stage.eventPointTransform(e);\n    this._prePos = direction === 'horizontal' ? x : y;\n    this._dispatchEvent(SCROLLBAR_START_EVENT, {\n      pos: this._prePos,\n      event: e\n    });\n\n    const triggers = getEndTriggersOfDrag();\n    const obj = vglobal.env === 'browser' ? vglobal : this.stage;\n\n    /**\n     * move的时候，需要通过 capture: true，能够在捕获截断被拦截，\n     * move的时候，需要显示的设置passive: false，因为在移动端需要禁用浏览器默认行为\n     */\n    obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: true });\n    triggers.forEach((trigger: string) => {\n      obj.addEventListener(trigger, this._onSliderPointerUp);\n    });\n  };\n\n  private _computeScrollValue = (e: any) => {\n    const { direction } = this.attribute as ScrollBarAttributes;\n    const { x, y } = this.stage.eventPointTransform(e);\n\n    let currentScrollValue;\n    let currentPos;\n    let delta = 0;\n\n    const { width, height } = this.getSliderRenderBounds();\n    if (direction === 'vertical') {\n      currentPos = y;\n      delta = currentPos - this._prePos;\n      currentScrollValue = delta / height;\n    } else {\n      currentPos = x;\n      delta = currentPos - this._prePos;\n      currentScrollValue = delta / width;\n    }\n    return [currentPos, currentScrollValue];\n  };\n\n  private _onSliderPointerMove = (e: any) => {\n    e.preventDefault();\n    const { stopSliderMovePropagation = true } = this.attribute as ScrollBarAttributes;\n    if (stopSliderMovePropagation) {\n      e.stopPropagation();\n    }\n    const preScrollRange = this.getScrollRange();\n    const [currentPos, currentScrollValue] = this._computeScrollValue(e);\n    this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], true);\n    this._prePos = currentPos;\n  };\n\n  private _onSliderPointerMoveWithDelay =\n    this.attribute.delayTime === 0\n      ? this._onSliderPointerMove\n      : delayMap[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime);\n\n  private _clearDragEvents() {\n    const triggers = getEndTriggersOfDrag();\n    const obj = vglobal.env === 'browser' ? vglobal : this.stage;\n\n    obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: false });\n    triggers.forEach((trigger: string) => {\n      obj.removeEventListener(trigger, this._onSliderPointerUp);\n    });\n  }\n\n  private _onSliderPointerUp = (e: any) => {\n    const { range: preRange, limitRange = [0, 1] } = this.attribute as ScrollBarAttributes;\n    // 发射 change 事件\n    const preScrollRange = this.getScrollRange();\n    const [currentPos, currentScrollValue] = this._computeScrollValue(e);\n    const range: [number, number] = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];\n\n    this._dispatchEvent(SCROLLBAR_END_EVENT, {\n      pre: preRange,\n      value: clampRange(range, limitRange[0], limitRange[1])\n    });\n\n    this._clearDragEvents();\n  };\n\n  private _reset() {\n    this._sliderRenderBounds = null;\n    this._sliderLimitRange = null;\n  }\n}\n"]}
+{"version":3,"sources":["../src/scrollbar/scrollbar.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClG,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAIjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAW1F,MAAM,QAAQ,GAAG;IACf,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,sBAAsB,EAAE,CAAC;AAEzB,MAAM,OAAO,SAAU,SAAQ,iBAAgD;IAmC7E,YAAY,UAA+B,EAAE,OAA0B;QACrE,KAAK,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;QAnChG,SAAI,GAAG,WAAW,CAAC;QAsPX,uBAAkB,GAAG,CAAC,CAAwB,EAAE,EAAE;YAGxD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;YAC3B,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;YAClF,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;YACpC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1C,IAAI,kBAAkB,CAAC;YACvB,IAAI,SAAS,KAAK,UAAU,EAAE;gBAC5B,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;gBAC/C,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,GAAG,UAAU,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gBAChE,kBAAkB,GAAG,SAAS,GAAG,MAAM,CAAC;gBACxC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;aACnD;iBAAM;gBACL,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;gBAC/C,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,GAAG,UAAU,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gBAChE,kBAAkB,GAAG,SAAS,GAAG,KAAK,CAAC;gBACvC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;aACnD;YAED,IAAI,CAAC,cAAc,CACjB,CAAC,kBAAkB,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,kBAAkB,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAChG,KAAK,CACN,CAAC;YAEF,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;gBACxC,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;aAC9B;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,CAAwB,EAAE,EAAE;YAC1D,MAAM,EAAE,yBAAyB,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;YACnF,IAAI,yBAAyB,EAAE;gBAC7B,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;YACD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;YAC5D,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;YACnD,IAAI,CAAC,OAAO,GAAG,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClD,IAAI,CAAC,cAAc,CAAC,qBAAqB,EAAE;gBACzC,GAAG,EAAE,IAAI,CAAC,OAAO;gBACjB,KAAK,EAAE,CAAC;aACT,CAAC,CAAC;YACH,IAAI,OAAO,CAAC,GAAG,KAAK,SAAS,EAAE;gBAC7B,OAAO,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,6BAA6B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC/F,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;aAChE;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,6BAA6B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBAClG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBAClE,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;aAC1E;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAAC,CAAM,EAAE,EAAE;YACvC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;YAC5D,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;YAEnD,IAAI,kBAAkB,CAAC;YACvB,IAAI,UAAU,CAAC;YACf,IAAI,KAAK,GAAG,CAAC,CAAC;YAEd,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACvD,IAAI,SAAS,KAAK,UAAU,EAAE;gBAC5B,UAAU,GAAG,CAAC,CAAC;gBACf,KAAK,GAAG,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;gBAClC,kBAAkB,GAAG,KAAK,GAAG,MAAM,CAAC;aACrC;iBAAM;gBACL,UAAU,GAAG,CAAC,CAAC;gBACf,KAAK,GAAG,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;gBAClC,kBAAkB,GAAG,KAAK,GAAG,KAAK,CAAC;aACpC;YACD,OAAO,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;QAC1C,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,CAAM,EAAE,EAAE;YACxC,MAAM,EAAE,yBAAyB,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;YACnF,IAAI,yBAAyB,EAAE;gBAC7B,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;YACD,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAC7C,MAAM,CAAC,UAAU,EAAE,kBAAkB,CAAC,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;YACrE,IAAI,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,kBAAkB,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,EAAE,IAAI,CAAC,CAAC;YAC5G,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC5B,CAAC,CAAC;QAEM,kCAA6B,GACnC,IAAI,CAAC,SAAS,CAAC,SAAS,KAAK,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAC,oBAAoB;YAC3B,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAEtF,uBAAkB,GAAG,CAAC,CAAM,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;YAEvF,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAC7C,MAAM,CAAC,UAAU,EAAE,kBAAkB,CAAC,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;YACrE,MAAM,KAAK,GAAqB,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,kBAAkB,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;YAEjH,IAAI,CAAC,cAAc,CAAC,mBAAmB,EAAE;gBACvC,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;aACvD,CAAC,CAAC;YACH,IAAI,OAAO,CAAC,GAAG,KAAK,SAAS,EAAE;gBAC7B,OAAO,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,6BAA6B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBAClG,OAAO,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;aACnE;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,6BAA6B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBACrG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBACrE,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;aAC7E;QACH,CAAC,CAAC;IA/TF,CAAC;IAED,cAAc,CAAC,KAAuB,EAAE,MAAM,GAAG,IAAI;QACnD,MAAM,EACJ,SAAS,GAAG,YAAY,EACxB,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EACnB,KAAK,EAAE,QAAQ,EACf,QAAQ,GAAG,IAAI,EAChB,GAAG,IAAI,CAAC,SAAgC,CAAC;QAE1C,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACxE,IAAI,MAAM,EAAE;YAEV,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACtD,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;gBAC/C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;gBAE9B,IAAI,SAAS,KAAK,YAAY,EAAE;oBAC9B,IAAI,CAAC,OAAO,CAAC,aAAa,CACxB;wBACE,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;wBACf,KAAK,EAAE,UAAU;qBAClB,EACD,IAAI,CACL,CAAC;iBACH;qBAAM;oBACL,IAAI,CAAC,OAAO,CAAC,aAAa,CACxB;wBACE,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;wBACf,MAAM,EAAE,UAAU;qBACnB,EACD,IAAI,CACL,CAAC;iBACH;gBAED,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;oBACxC,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;iBAC9B;aACF;SACF;QACA,IAAI,CAAC,SAAiC,CAAC,KAAK,GAAG,eAAe,CAAC;QAEhE,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE;gBACnC,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,eAAe;aACvB,CAAC,CAAC;SACJ;IACH,CAAC;IAED,cAAc;QACZ,OAAQ,IAAI,CAAC,SAAiC,CAAC,KAAK,CAAC;IACvD,CAAC;IAOS,UAAU;QAClB,IAAI,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE;YACtC,OAAO;SACR;QACD,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,SAAS,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;QAExF,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,gBAAgB,CACzB,aAAa,EACb,QAAQ,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAkB,CACzE,CAAC;SACH;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,oBAAqC,CAAC,CAAC;SAC1F;IACH,CAAC;IAES,MAAM;QACd,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,EACJ,SAAS,GAAG,YAAY,EACxB,KAAK,EACL,MAAM,EACN,KAAK,EACL,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAInB,SAAS,EACT,WAAW,EACX,OAAO,GAAG,CAAC,EACZ,GAAG,IAAI,CAAC,SAAgC,CAAC;QAE1C,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,EAAE,EAAE,OAAO,CAAW,CAAC;QAGrF,MAAM,IAAI,GAAG,KAAK,CAAC,mBAAmB,CACpC,gBAAgB,kBAEd,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,KAAK;YACL,MAAM,IACH,SAAS,GAEd,MAAM,CACE,CAAC;QACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAGlB,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACxD,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtF,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;QAC/C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;QAG9B,IAAI,eAAsC,CAAC;QAC3C,IAAI,SAAS,KAAK,YAAY,EAAE;YAC9B,eAAe,GAAG;gBAChB,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;gBACf,CAAC,EAAE,kBAAkB,CAAC,EAAE;gBACxB,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,kBAAkB,CAAC,MAAM;aAClC,CAAC;SACH;aAAM;YACL,eAAe,GAAG;gBAChB,CAAC,EAAE,kBAAkB,CAAC,EAAE;gBACxB,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;gBACf,KAAK,EAAE,kBAAkB,CAAC,KAAK;gBAC/B,MAAM,EAAE,UAAU;aACnB,CAAC;SACH;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,mBAAmB,CACtC,QAAQ,8DAEH,eAAe,KAClB,YAAY,EAAE,IAAI,CAAC,6BAA6B,EAAE,KAC/C,WAAW,KACd,aAAa,EAAE,gBAAgB,CAAC,OAAO,CAAC,EACxC,QAAQ,EAAE,WAAW,KAEvB,MAAM,CACE,CAAC;QACX,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAExB,MAAM,mBAAmB,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;QACvD,IAAI,CAAC,aAAa,GAAG;YACnB,CAAC,EAAE,mBAAmB,CAAC,EAAE;YACzB,CAAC,EAAE,mBAAmB,CAAC,EAAE;SAC1B,CAAC;IACJ,CAAC;IAGD,qBAAqB;QACnB,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,OAAO,IAAI,CAAC,mBAAmB,CAAC;SACjC;QACD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;QAC7E,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC7D,MAAM,YAAY,GAAG;YACnB,EAAE,EAAE,IAAI;YACR,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,KAAK,GAAG,KAAK;YACjB,EAAE,EAAE,MAAM,GAAG,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC;YAC1C,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC;SAC7C,CAAC;QACF,IAAI,CAAC,mBAAmB,GAAG,YAAY,CAAC;QACxC,OAAO,YAAY,CAAC;IACtB,CAAC;IAGO,6BAA6B;QACnC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;QAEnE,IAAI,KAAK,EAAE;YACT,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACvD,OAAO,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;SACpD;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAGO,aAAa,CAAC,KAAuB;QAC3C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;QAC5D,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE/D,IAAI,SAAS,KAAK,YAAY,EAAE;YAC9B,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;SACvD;QACD,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC1D,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QACD,MAAM,EAAE,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAgC,CAAC;QACjF,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,UAAU,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAChD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;QAEpC,OAAO,SAAS,KAAK,YAAY;YAC/B,CAAC,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,GAAG,GAAG,KAAK,EAAE,EAAE,GAAG,GAAG,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,KAAK,GAAG,UAAU,CAAC;YAC1E,CAAC,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,GAAG,GAAG,MAAM,EAAE,EAAE,GAAG,GAAG,GAAG,MAAM,CAAC,EAAE,EAAE,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IAClF,CAAC;IAiHO,MAAM;QACZ,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAChC,CAAC;;AAtWM,2BAAiB,GAAG;IACzB,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,EAAE;IACd,WAAW,EAAE;QACX,IAAI,EAAE,mBAAmB;KAC1B;IACD,SAAS,EAAE;QACT,IAAI,EAAE,mBAAmB;KAC1B;IACD,OAAO,EAAE,CAAC;IACV,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACnB,SAAS,EAAE,UAAU;IACrB,SAAS,EAAE,CAAC;IACZ,QAAQ,EAAE,IAAI;CACf,CAAC","file":"scrollbar.js","sourcesContent":["/**\n * @description 滚动条组件\n */\nimport type { IRectGraphicAttribute, FederatedPointerEvent, IGroup, IRect } from '@visactor/vrender-core';\n// eslint-disable-next-line no-duplicate-imports\nimport { vglobal } from '@visactor/vrender-core';\nimport { merge, normalizePadding, clamp, clampRange, debounce, throttle } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\n\nimport type { ScrollBarAttributes } from './type';\nimport type { ComponentOptions } from '../interface';\nimport { loadScrollbarComponent } from './register';\nimport { SCROLLBAR_START_EVENT, SCROLLBAR_EVENT, SCROLLBAR_END_EVENT } from '../constant';\n\ntype ComponentBounds = {\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n  width: number;\n  height: number;\n};\n\nconst delayMap = {\n  debounce: debounce,\n  throttle: throttle\n};\n\nloadScrollbarComponent();\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: 'rgba(0, 0, 0, .5)'\n    },\n    railStyle: {\n      fill: 'rgba(0, 0, 0, .0)'\n    },\n    padding: 2,\n    scrollRange: [0, 1],\n    delayType: 'throttle',\n    delayTime: 0,\n    realTime: true\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, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, ScrollBar.defaultAttributes, attributes));\n  }\n\n  setScrollRange(range: [number, number], render = true) {\n    const {\n      direction = 'horizontal',\n      limitRange = [0, 1],\n      range: preRange,\n      realTime = true\n    } = 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        const sliderSize = sliderPos[1] - sliderPos[0];\n        this._sliderSize = sliderSize;\n\n        if (direction === 'horizontal') {\n          this._slider.setAttributes(\n            {\n              x: sliderPos[0],\n              width: sliderSize\n            },\n            true\n          );\n        } else {\n          this._slider.setAttributes(\n            {\n              y: sliderPos[0],\n              height: sliderSize\n            },\n            true\n          );\n        }\n\n        if (this.stage && !this.stage.autoRender) {\n          this.stage.renderNextFrame();\n        }\n      }\n    }\n    (this.attribute as ScrollBarAttributes).range = currScrollRange;\n    // 发射 change 事件\n    if (realTime) {\n      this._dispatchEvent(SCROLLBAR_EVENT, {\n        pre: preRange,\n        value: currScrollRange\n      });\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    if (this.attribute.disableTriggerEvent) {\n      return;\n    }\n    const { delayType = 'throttle', delayTime = 0 } = this.attribute as ScrollBarAttributes;\n    // TODO: wheel 事件支持\n    if (this._rail) {\n      this._rail.addEventListener(\n        'pointerdown',\n        delayMap[delayType](this._onRailPointerDown, delayTime) as EventListener\n      );\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        cornerRadius: this._getDefaultSliderCornerRadius(),\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  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: Math.max(0, width - (left + right)),\n      height: Math.max(0, height - (top + bottom))\n    };\n    this._sliderRenderBounds = renderBounds;\n    return renderBounds;\n  }\n\n  // 获取默认的滑块圆角\n  private _getDefaultSliderCornerRadius() {\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 && !this.stage.autoRender) {\n      this.stage.renderNextFrame();\n    }\n  };\n\n  private _onSliderPointerDown = (e: FederatedPointerEvent) => {\n    const { stopSliderDownPropagation = true } = this.attribute as ScrollBarAttributes;\n    if (stopSliderDownPropagation) {\n      e.stopPropagation();\n    }\n    const { direction } = this.attribute as ScrollBarAttributes;\n    const { x, y } = this.stage.eventPointTransform(e);\n    this._prePos = direction === 'horizontal' ? x : y;\n    this._dispatchEvent(SCROLLBAR_START_EVENT, {\n      pos: this._prePos,\n      event: e\n    });\n    if (vglobal.env === 'browser') {\n      vglobal.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });\n      vglobal.addEventListener('pointerup', this._onSliderPointerUp);\n    } else {\n      this.stage.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });\n      this.stage.addEventListener('pointerup', this._onSliderPointerUp);\n      this.stage.addEventListener('pointerupoutside', this._onSliderPointerUp);\n    }\n  };\n\n  private _computeScrollValue = (e: any) => {\n    const { direction } = this.attribute as ScrollBarAttributes;\n    const { x, y } = this.stage.eventPointTransform(e);\n\n    let currentScrollValue;\n    let currentPos;\n    let delta = 0;\n\n    const { width, height } = this.getSliderRenderBounds();\n    if (direction === 'vertical') {\n      currentPos = y;\n      delta = currentPos - this._prePos;\n      currentScrollValue = delta / height;\n    } else {\n      currentPos = x;\n      delta = currentPos - this._prePos;\n      currentScrollValue = delta / width;\n    }\n    return [currentPos, currentScrollValue];\n  };\n\n  private _onSliderPointerMove = (e: any) => {\n    const { stopSliderMovePropagation = true } = this.attribute as ScrollBarAttributes;\n    if (stopSliderMovePropagation) {\n      e.stopPropagation();\n    }\n    const preScrollRange = this.getScrollRange();\n    const [currentPos, currentScrollValue] = this._computeScrollValue(e);\n    this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], true);\n    this._prePos = currentPos;\n  };\n\n  private _onSliderPointerMoveWithDelay =\n    this.attribute.delayTime === 0\n      ? this._onSliderPointerMove\n      : delayMap[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime);\n\n  private _onSliderPointerUp = (e: any) => {\n    e.preventDefault();\n    const { range: preRange, limitRange = [0, 1] } = this.attribute as ScrollBarAttributes;\n    // 发射 change 事件\n    const preScrollRange = this.getScrollRange();\n    const [currentPos, currentScrollValue] = this._computeScrollValue(e);\n    const range: [number, number] = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];\n\n    this._dispatchEvent(SCROLLBAR_END_EVENT, {\n      pre: preRange,\n      value: clampRange(range, limitRange[0], limitRange[1])\n    });\n    if (vglobal.env === 'browser') {\n      vglobal.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });\n      vglobal.removeEventListener('pointerup', this._onSliderPointerUp);\n    } else {\n      this.stage.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });\n      this.stage.removeEventListener('pointerup', this._onSliderPointerUp);\n      this.stage.removeEventListener('pointerupoutside', this._onSliderPointerUp);\n    }\n  };\n\n  private _reset() {\n    this._sliderRenderBounds = null;\n    this._sliderLimitRange = null;\n  }\n}\n"]}

package/es/slider/slider.d.ts

@@ -109,10 +109,8 @@ export declare class Slider extends AbstractComponent<Required<SliderAttributes>
     private _onTooltipUpdate;
     private _onTooltipHide;
     private _onHandlerPointerdown;
-    private _clearAllDragEvents;
     private _onHandlerPointerMove;
     private _onHandlerPointerUp;
-    private _handleTouchMove;
     private _onTrackPointerdown;
     private _onTrackPointerMove;
     private _onTrackPointerUp;
@@ -123,5 +121,4 @@ export declare class Slider extends AbstractComponent<Required<SliderAttributes>
     private _dispatchChangeEvent;
     private _dispatchTooltipEvent;
     private _getHandlers;
-    release(all?: boolean): void;
 }

package/es/slider/slider.js

@@ -8,8 +8,6 @@ import { SLIDER_ELEMENT_NAME } from "./constant";
 
 import { loadSliderComponent } from "./register";
 
-import { getEndTriggersOfDrag } from "../util/event";
-
 function convertValueToRange(value) {
     return isArray(value) ? value : [ value, value ];
 }
@@ -54,19 +52,16 @@ export class Slider extends AbstractComponent {
             tooltip && tooltip.alwaysShow || (this._tooltipState = null, this._tooltipShape && this._tooltipShape.setAttribute("visible", !1), 
             this._tooltipText && this._tooltipText.setAttribute("visible", !1), this._dispatchTooltipEvent("sliderTooltipHide"));
         }, this._onHandlerPointerdown = e => {
-            this._clearAllDragEvents(), this._isChanging = !0;
+            e.stopPropagation(), this._isChanging = !0;
             const {x: x, y: y} = this.stage.eventPointTransform(e);
-            this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y;
-            const triggers = getEndTriggersOfDrag(), obj = "browser" === vglobal.env ? vglobal : this.stage;
-            obj.addEventListener("pointermove", this._onHandlerPointerMove, {
-                capture: !0,
-                passive: !1
-            }), triggers.forEach((trigger => {
-                obj.addEventListener(trigger, this._onHandlerPointerUp);
-            }));
+            this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
+                capture: !0
+            }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.addEventListener("pointermove", this._onHandlerPointerMove, {
+                capture: !0
+            }), this.stage.addEventListener("pointerup", this._onHandlerPointerUp), this.stage.addEventListener("pointerupoutside", this._onHandlerPointerUp));
         }, this._onHandlerPointerMove = e => {
             var _a, _b;
-            e.preventDefault(), this._isChanging = !0;
+            e.stopPropagation(), this._isChanging = !0;
             const {railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute;
             if (max === min) return;
             const {x: x, y: y} = this.stage.eventPointTransform(e);
@@ -78,22 +73,21 @@ export class Slider extends AbstractComponent {
             "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), 
             this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
         }, this._onHandlerPointerUp = e => {
-            this._isChanging = !1, this._currentHandler = null, this._clearAllDragEvents();
-        }, this._handleTouchMove = e => {
-            this._isChanging && e.preventDefault();
+            e.preventDefault(), this._isChanging = !1, this._currentHandler = null, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
+                capture: !0
+            }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.removeEventListener("pointermove", this._onHandlerPointerMove, {
+                capture: !0
+            }), this.stage.removeEventListener("pointerup", this._onHandlerPointerUp), this.stage.removeEventListener("pointerupoutside", this._onHandlerPointerUp));
         }, this._onTrackPointerdown = e => {
-            this._clearAllDragEvents(), this._isChanging = !0;
+            e.stopPropagation(), this._isChanging = !0;
             const {x: x, y: y} = this.stage.eventPointTransform(e);
-            this._prePos = this._isHorizontal ? x : y;
-            const triggers = getEndTriggersOfDrag(), obj = "browser" === vglobal.env ? vglobal : this.stage;
-            obj.addEventListener("pointermove", this._onTrackPointerMove, {
-                capture: !0,
-                passive: !1
-            }), triggers.forEach((trigger => {
-                obj.addEventListener(trigger, this._onTrackPointerUp);
-            }));
+            this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onTrackPointerMove, {
+                capture: !0
+            }), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.addEventListener("pointermove", this._onTrackPointerMove, {
+                capture: !0
+            }), this.stage.addEventListener("pointerup", this._onTrackPointerUp), this.stage.addEventListener("pointerupoutside", this._onTrackPointerUp));
         }, this._onTrackPointerMove = e => {
-            e.preventDefault(), this._isChanging = !0;
+            e.stopPropagation(), this._isChanging = !0;
             const {railWidth: railWidth, railHeight: railHeight, min: min, max: max, inverse: inverse} = this.attribute;
             if (max === min) return;
             const {startHandler: startHandler, endHandler: endHandler} = this._getHandlers();
@@ -118,9 +112,13 @@ export class Slider extends AbstractComponent {
             }
             this._prePos = currentPos, this._dispatchChangeEvent();
         }, this._onTrackPointerUp = e => {
-            this._isChanging = !1, this._clearAllDragEvents();
+            e.preventDefault(), this._isChanging = !1, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onTrackPointerMove, {
+                capture: !0
+            }), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.removeEventListener("pointermove", this._onTrackPointerMove, {
+                capture: !0
+            }), this.stage.removeEventListener("pointerup", this._onTrackPointerUp), this.stage.removeEventListener("pointerupoutside", this._onTrackPointerUp));
         }, this._onRailPointerDown = e => {
-            this._clearAllDragEvents(), this._isChanging = !0;
+            e.stopPropagation(), this._isChanging = !0;
             const {railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute;
             if (max === min) return;
             const startHandler = this._startHandler, endHandler = this._endHandler;
@@ -363,28 +361,12 @@ export class Slider extends AbstractComponent {
         this._endHandler && this._endHandler.addEventListener("pointerdown", this._onHandlerPointerdown), 
         this._endHandlerText && this._endHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), 
         isObject(range) && range.draggableTrack && this._track.addEventListener("pointerdown", this._onTrackPointerdown), 
-        this._railContainer.addEventListener("pointerdown", this._onRailPointerDown), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
-            passive: !1
-        }));
+        this._railContainer.addEventListener("pointerdown", this._onRailPointerDown));
     }
     _bindTooltipEvents() {
         this.attribute.disableTriggerEvent || (this._mainContainer.addEventListener("pointerenter", this._onTooltipShow), 
         this._mainContainer.addEventListener("pointermove", this._onTooltipUpdate), this._mainContainer.addEventListener("pointerleave", this._onTooltipHide));
     }
-    _clearAllDragEvents() {
-        const triggers = getEndTriggersOfDrag(), obj = "browser" === vglobal.env ? vglobal : this.stage;
-        obj.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0,
-            passive: !1
-        }), triggers.forEach((trigger => {
-            obj.removeEventListener(trigger, this._onHandlerPointerUp);
-        })), obj.removeEventListener("pointermove", this._onTrackPointerMove, {
-            capture: !0,
-            passive: !1
-        }), triggers.forEach((trigger => {
-            obj.removeEventListener(trigger, this._onTrackPointerUp);
-        }));
-    }
     _updateTrack() {
         const {inverse: inverse, railWidth: railWidth, railHeight: railHeight} = this.attribute, startHandler = this._startHandler, endHandler = this._endHandler;
         if (this._isHorizontal) {
@@ -473,11 +455,6 @@ export class Slider extends AbstractComponent {
             endHandler: endHandler
         };
     }
-    release(all) {
-        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
-            passive: !1
-        }), this._clearAllDragEvents();
-    }
 }
 
 Slider.defaultAttributes = {