@visactor/vrender-components 0.16.2-alpha.0 → 0.16.2

package/es/checkbox/checkbox.d.ts

@@ -0,0 +1,17 @@
+import { AbstractComponent } from '../core/base';
+import type { CheckboxAttributes } from './type';
+import { Image, Rect, WrapText } from '@visactor/vrender-core';
+export declare class CheckBox extends AbstractComponent<Required<CheckboxAttributes>> {
+    static defaultAttributes: Partial<CheckboxAttributes>;
+    _box: Rect;
+    _icon: Image;
+    _text: WrapText;
+    constructor(attributes: CheckboxAttributes);
+    render(): void;
+    renderBox(): void;
+    renderIcon(): void;
+    renderText(): void;
+    renderGroup(): void;
+    layout(): void;
+    handleClick(): void;
+}

package/es/checkbox/checkbox.js

@@ -0,0 +1,99 @@
+import { merge } from "@visactor/vutils";
+
+import { AbstractComponent } from "../core/base";
+
+import { CustomEvent, Image, Rect, WrapText } from "@visactor/vrender-core";
+
+const svg = '<svg width="200" height="200" viewBox="0 0 1024 1024" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z"></path></svg>';
+
+export class CheckBox extends AbstractComponent {
+    constructor(attributes) {
+        super(merge({}, CheckBox.defaultAttributes, attributes)), this.renderGroup(), this.onBeforeAttributeUpdate = (val, attributes, key) => {
+            "interactive" in val && this.setAttribute("pickable", val.interactive), "disabled" in val && this.setAttribute("cursor", val.disable ? this.attribute.disableCursor : this.attribute.cursor);
+        }, this.addEventListener("click", this.handleClick);
+    }
+    render() {
+        this.removeAllChild(), this.renderBox(), this.renderIcon(), this.renderText(), this.layout();
+    }
+    renderBox() {
+        this._box = new Rect(merge({}, this.attribute.box)), this.attribute.checked && this.attribute.disabled ? this._box.setAttributes({
+            fill: this.attribute.box.disableCheckedFill,
+            stroke: this.attribute.box.disableCheckedStroke
+        }) : this.attribute.checked && this._box.setAttributes({
+            fill: this.attribute.box.checkedFill,
+            stroke: this.attribute.box.checkedStroke
+        }), this.appendChild(this._box);
+    }
+    renderIcon() {
+        this._icon = new Image(merge({}, this.attribute.icon)), this.attribute.checked || this._icon.setAttribute("visible", !1), 
+        this.appendChild(this._icon);
+    }
+    renderText() {
+        this._text = new WrapText(merge({}, this.attribute.text)), this.attribute.disabled && this._text.setAttribute("fill", this.attribute.text.disableFill), 
+        this.appendChild(this._text);
+    }
+    renderGroup() {
+        this.attribute.interactive || this.setAttribute("pickable", !1), this.attribute.disabled && this.setAttribute("cursor", this.attribute.disableCursor);
+    }
+    layout() {
+        const boxHeight = this.attribute.box.height, iconHeight = this.attribute.icon.height, textHeight = this._text.AABBBounds.height(), maxHeight = Math.max(boxHeight, iconHeight, textHeight), boxY = maxHeight / 2 - boxHeight / 2, iconY = maxHeight / 2 - iconHeight / 2, textY = maxHeight / 2 - textHeight / 2, boxWidth = this.attribute.box.width, iconWidth = this.attribute.icon.width, maxWidth = Math.max(boxWidth, iconWidth), boxX = maxWidth / 2 - boxWidth / 2, iconX = maxWidth / 2 - iconWidth / 2, textX = maxWidth + this.attribute.spaceBetweenTextAndIcon;
+        this._box.setAttributes({
+            x: boxX,
+            y: boxY
+        }), this._icon.setAttributes({
+            x: iconX,
+            y: iconY
+        }), this._text.setAttributes({
+            x: textX,
+            y: textY
+        });
+    }
+    handleClick() {
+        var _a;
+        if (this.attribute.disabled) return;
+        this.attribute.checked ? this.setAttribute("checked", !1) : this.setAttribute("checked", !0);
+        const changeEvent = new CustomEvent("checkbox_state_change", {
+            eventType: "checkbox_state_change",
+            checked: this.attribute.checked
+        });
+        changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, 
+        this.dispatchEvent(changeEvent);
+    }
+}
+
+CheckBox.defaultAttributes = {
+    interactive: !0,
+    disabled: !1,
+    checked: !1,
+    cursor: "pointer",
+    disableCursor: "not-allowed",
+    spaceBetweenTextAndIcon: 8,
+    text: {
+        text: "text",
+        fontSize: 14,
+        fill: "#000",
+        disableFill: "rgb(201,205,212)",
+        textBaseline: "top",
+        pickable: !1
+    },
+    icon: {
+        image: svg,
+        width: 10,
+        height: 10,
+        pickable: !1
+    },
+    box: {
+        width: 14,
+        height: 14,
+        cornerRadius: 2,
+        fill: "#fff",
+        stroke: "rgb(229,230,235)",
+        disableFill: "rgb(242,243,245)",
+        checkedFill: "rgb(22, 93, 255)",
+        checkedStroke: "rgb(22, 93, 255)",
+        disableCheckedFill: "rgb(148, 191, 255)",
+        disableCheckedStroke: "rgb(148, 191, 255)",
+        pickable: !1
+    }
+};
+//# sourceMappingURL=checkbox.js.map

package/es/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox/checkbox.ts"],"names":[],"mappings":"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","file":"checkbox.js","sourcesContent":["import { merge } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\nimport type { CheckboxAttributes } from './type';\nimport { CustomEvent, Image, Rect, WrapText } from '@visactor/vrender-core';\n\nconst svg =\n  '<svg width=\"200\" height=\"200\" viewBox=\"0 0 1024 1024\" fill=\"#fff\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\"></path></svg>';\n\nexport class CheckBox extends AbstractComponent<Required<CheckboxAttributes>> {\n  static defaultAttributes: Partial<CheckboxAttributes> = {\n    interactive: true,\n    disabled: false,\n    checked: false,\n    cursor: 'pointer',\n    disableCursor: 'not-allowed',\n    spaceBetweenTextAndIcon: 8,\n    text: {\n      text: 'text',\n      fontSize: 14,\n      fill: '#000',\n      disableFill: 'rgb(201,205,212)',\n      textBaseline: 'top',\n      pickable: false\n    },\n    icon: {\n      image: svg,\n      width: 10,\n      height: 10,\n      pickable: false\n    },\n    box: {\n      width: 14,\n      height: 14,\n      cornerRadius: 2,\n      fill: '#fff',\n      stroke: 'rgb(229,230,235)',\n      disableFill: 'rgb(242,243,245)',\n      checkedFill: 'rgb(22, 93, 255)',\n      checkedStroke: 'rgb(22, 93, 255)',\n      disableCheckedFill: 'rgb(148, 191, 255)',\n      disableCheckedStroke: 'rgb(148, 191, 255)',\n      pickable: false\n    }\n  };\n  _box: Rect;\n  _icon: Image;\n  _text: WrapText;\n\n  constructor(attributes: CheckboxAttributes) {\n    super(merge({}, CheckBox.defaultAttributes, attributes));\n    this.renderGroup();\n\n    this.onBeforeAttributeUpdate = (val: any, attributes: any, key: null | string | string[]) => {\n      if ('interactive' in val) {\n        this.setAttribute('pickable', val.interactive);\n      }\n      if ('disabled' in val) {\n        this.setAttribute('cursor', val.disable ? this.attribute.disableCursor : this.attribute.cursor);\n      }\n      return undefined;\n    };\n\n    this.addEventListener('click', this.handleClick);\n  }\n\n  render() {\n    this.removeAllChild();\n\n    this.renderBox();\n    this.renderIcon();\n    this.renderText();\n    this.layout();\n  }\n\n  renderBox() {\n    this._box = new Rect(merge({}, this.attribute.box));\n    if (this.attribute.checked && this.attribute.disabled) {\n      this._box.setAttributes({\n        fill: this.attribute.box.disableCheckedFill,\n        stroke: this.attribute.box.disableCheckedStroke\n      });\n    } else if (this.attribute.checked) {\n      this._box.setAttributes({\n        fill: this.attribute.box.checkedFill,\n        stroke: this.attribute.box.checkedStroke\n      });\n    }\n    this.appendChild(this._box);\n  }\n\n  renderIcon() {\n    this._icon = new Image(merge({}, this.attribute.icon));\n    if (!this.attribute.checked) {\n      this._icon.setAttribute('visible', false);\n    }\n    this.appendChild(this._icon);\n  }\n\n  renderText() {\n    this._text = new WrapText(merge({}, this.attribute.text));\n    if (this.attribute.disabled) {\n      this._text.setAttribute('fill', this.attribute.text.disableFill);\n    }\n    this.appendChild(this._text);\n  }\n\n  renderGroup() {\n    if (!this.attribute.interactive) {\n      this.setAttribute('pickable', false);\n    }\n    if (this.attribute.disabled) {\n      this.setAttribute('cursor', this.attribute.disableCursor);\n    }\n  }\n\n  layout() {\n    const boxHeight = this.attribute.box.height;\n    const iconHeight = this.attribute.icon.height;\n    const textHeight = this._text.AABBBounds.height();\n    const maxHeight = Math.max(boxHeight, iconHeight, textHeight);\n    const boxY = maxHeight / 2 - boxHeight / 2;\n    const iconY = maxHeight / 2 - iconHeight / 2;\n    const textY = maxHeight / 2 - textHeight / 2;\n\n    const boxWidth = this.attribute.box.width;\n    const iconWidth = this.attribute.icon.width;\n    const maxWidth = Math.max(boxWidth, iconWidth);\n    const boxX = maxWidth / 2 - boxWidth / 2;\n    const iconX = maxWidth / 2 - iconWidth / 2;\n    const textX = maxWidth + this.attribute.spaceBetweenTextAndIcon;\n\n    this._box.setAttributes({\n      x: boxX,\n      y: boxY\n    });\n    this._icon.setAttributes({\n      x: iconX,\n      y: iconY\n    });\n    this._text.setAttributes({\n      x: textX,\n      y: textY\n    });\n  }\n\n  handleClick() {\n    if (this.attribute.disabled) {\n      return;\n    } else if (this.attribute.checked) {\n      this.setAttribute('checked', false);\n    } else {\n      this.setAttribute('checked', true);\n    }\n    const changeEvent = new CustomEvent('checkbox_state_change', {\n      eventType: 'checkbox_state_change',\n      checked: this.attribute.checked\n    } as unknown) as any;\n    changeEvent.manager = (this.stage as any)?.eventSystem.manager;\n    this.dispatchEvent(changeEvent);\n  }\n}\n"]}

package/es/checkbox/index.d.ts

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

package/es/checkbox/index.js

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

package/es/checkbox/index.js.map

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

package/es/checkbox/type.d.ts

@@ -0,0 +1,22 @@
+import type { Cursor, IColor, IGroupGraphicAttribute, IImageGraphicAttribute, IRectGraphicAttribute, IWrapTextGraphicAttribute } from '@visactor/vrender-core';
+export type CheckboxText = {
+    disableFill?: IColor;
+} & IWrapTextGraphicAttribute;
+export type CheckboxIcon = IImageGraphicAttribute;
+export type CheckboxRect = {
+    disableFill?: IColor;
+    checkedFill?: IColor;
+    checkedStroke?: IColor;
+    disableCheckedFill?: IColor;
+    disableCheckedStroke?: IColor;
+} & IRectGraphicAttribute;
+export type CheckboxAttributes = IGroupGraphicAttribute & {
+    interactive?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    text?: CheckboxText;
+    icon?: CheckboxIcon;
+    box?: CheckboxRect;
+    disableCursor?: Cursor;
+    spaceBetweenTextAndIcon?: number;
+};

package/es/checkbox/type.js

@@ -0,0 +1 @@
+export { };

package/es/checkbox/type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type {\n  Cursor,\n  IColor,\n  IGroupGraphicAttribute,\n  IImageGraphicAttribute,\n  IRectGraphicAttribute,\n  IWrapTextGraphicAttribute\n} from '@visactor/vrender-core';\n\nexport type CheckboxText = {\n  disableFill?: IColor;\n} & IWrapTextGraphicAttribute;\n\nexport type CheckboxIcon = IImageGraphicAttribute;\n\nexport type CheckboxRect = {\n  disableFill?: IColor;\n  checkedFill?: IColor;\n  checkedStroke?: IColor;\n  disableCheckedFill?: IColor;\n  disableCheckedStroke?: IColor;\n} & IRectGraphicAttribute;\n\nexport type CheckboxAttributes = IGroupGraphicAttribute & {\n  interactive?: boolean;\n  disabled?: boolean;\n  checked?: boolean;\n  /**\n   * 图例文字\n   */\n  text?: CheckboxText;\n  /**\n   * 图例选中图标\n   */\n  icon?: CheckboxIcon;\n  /**\n   * 图例选中图标\n   */\n  box?: CheckboxRect;\n  disableCursor?: Cursor;\n  spaceBetweenTextAndIcon?: number;\n};\n"]}

package/es/crosshair/polygon.js

@@ -30,4 +30,5 @@ PolygonCrosshair.defaultAttributes = {
         lineWidth: 1,
         lineDash: [ 2 ]
     }
-};
+};
+//# sourceMappingURL=polygon.js.map

package/es/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "0.16.2-alpha.0";
+export declare const version = "0.16.2";
 export * from './core/base';
 export * from './scrollbar';
 export * from './tag';
@@ -21,3 +21,4 @@ export * from './brush';
 export * from './tooltip';
 export * from './interface';
 export * from './jsx';
+export * from './checkbox';

package/es/index.js

@@ -1,4 +1,4 @@
-export const version = "0.16.2-alpha.0";
+export const version = "0.16.2";
 
 export * from "./core/base";
 
@@ -43,4 +43,6 @@ export * from "./tooltip";
 export * from "./interface";
 
 export * from "./jsx";
+
+export * from "./checkbox";
 //# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,gBAAgB,CAAC;AAExC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.16.2-alpha.0\";\n\nexport * from './core/base';\nexport * from './scrollbar';\nexport * from './tag';\nexport * from './poptip';\nexport * from './crosshair';\nexport * from './label';\nexport * from './axis';\nexport * from './axis/grid';\nexport * from './segment';\nexport * from './data-zoom';\nexport * from './marker';\nexport * from './pager';\nexport * from './legend';\nexport * from './title';\nexport * from './indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport * from './brush';\nexport * from './tooltip';\nexport * from './interface';\nexport * from './jsx';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC;AAEhC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.16.2\";\n\nexport * from './core/base';\nexport * from './scrollbar';\nexport * from './tag';\nexport * from './poptip';\nexport * from './crosshair';\nexport * from './label';\nexport * from './axis';\nexport * from './axis/grid';\nexport * from './segment';\nexport * from './data-zoom';\nexport * from './marker';\nexport * from './pager';\nexport * from './legend';\nexport * from './title';\nexport * from './indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport * from './brush';\nexport * from './tooltip';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\n"]}

package/es/indicator/index.js

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

package/es/jsx/component-type.js

@@ -2,4 +2,5 @@ import { Tag } from "../tag";
 
 export function VTag(params) {
     return new Tag(params ? params.attribute : {});
-}
+}
+//# sourceMappingURL=component-type.js.map

package/es/legend/constant.js

@@ -36,5 +36,4 @@ export var LEGEND_ELEMENT_NAME;
     LEGEND_ELEMENT_NAME.item = "legendItem", LEGEND_ELEMENT_NAME.itemShape = "legendItemShape", 
     LEGEND_ELEMENT_NAME.itemLabel = "legendItemLabel", LEGEND_ELEMENT_NAME.itemValue = "legendItemValue", 
     LEGEND_ELEMENT_NAME.focus = "legendItemFocus";
-}(LEGEND_ELEMENT_NAME || (LEGEND_ELEMENT_NAME = {}));
-//# sourceMappingURL=constant.js.map
+}(LEGEND_ELEMENT_NAME || (LEGEND_ELEMENT_NAME = {}));

package/es/link-path/index.js

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

package/es/marker/config.js

@@ -229,4 +229,4 @@ export const DEFAULT_MARK_POINT_TEXT_STYLE_MAP = {
         textBaseline: "middle"
     }
 };
-//# sourceMappingURL=config.js.map
+//# sourceMappingURL=config.js.map

package/es/marker/index.js

@@ -5,4 +5,4 @@ export * from "./line";
 export * from "./area";
 
 export * from "./point";
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/es/marker/line.js

@@ -78,4 +78,4 @@ export class MarkLine extends Marker {
 }
 
 MarkLine.defaultAttributes = DEFAULT_MARK_LINE_THEME;
-//# sourceMappingURL=line.js.map
+//# sourceMappingURL=line.js.map

package/es/scrollbar/scrollbar.js

@@ -38,9 +38,11 @@ export class ScrollBar extends AbstractComponent {
             currentScrollValue = delta / width), this.setScrollRange([ preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue ], !0), 
             this._prePos = currentPos;
         }, this._onSliderPointerUp = e => {
-            e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove), 
-            vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.removeEventListener("pointermove", this._onSliderPointerMove), 
-            this._slider.removeEventListener("pointerup", this._onSliderPointerUp), this._slider.removeEventListener("pointerupoutside", this._onSliderPointerUp));
+            e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove, {
+                capture: !0
+            }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.removeEventListener("pointermove", this._onSliderPointerMove, {
+                capture: !0
+            }), this._slider.removeEventListener("pointerup", this._onSliderPointerUp), this._slider.removeEventListener("pointerupoutside", this._onSliderPointerUp));
         };
     }
     setScrollRange(range, render = !0) {

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';\nimport { CustomEvent, vglobal } from '@visactor/vrender-core';\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: 'rgba(0, 0, 0, .5)'\n    },\n    railStyle: {\n      fill: '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    if (this.attribute.disableTriggerEvent) {\n      return;\n    }\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        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  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 _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?.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 (vglobal.env === 'browser') {\n      vglobal.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });\n      vglobal.addEventListener('pointerup', this._onSliderPointerUp);\n    } else {\n      this._slider.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });\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 (vglobal.env === 'browser') {\n      vglobal.removeEventListener('pointermove', this._onSliderPointerMove);\n      vglobal.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"]}
+{"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';\nimport { CustomEvent, vglobal } from '@visactor/vrender-core';\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: 'rgba(0, 0, 0, .5)'\n    },\n    railStyle: {\n      fill: '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    if (this.attribute.disableTriggerEvent) {\n      return;\n    }\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        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  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 _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?.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 (vglobal.env === 'browser') {\n      vglobal.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });\n      vglobal.addEventListener('pointerup', this._onSliderPointerUp);\n    } else {\n      this._slider.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });\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 (vglobal.env === 'browser') {\n      vglobal.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });\n      vglobal.removeEventListener('pointerup', this._onSliderPointerUp);\n    } else {\n      this._slider.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });\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/slider/slider.js

@@ -95,9 +95,11 @@ export class Slider extends AbstractComponent {
             }
             this._prePos = currentPos, this._dispatchChangeEvent();
         }, this._onTrackPointerUp = e => {
-            e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onTrackPointerMove), 
-            vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this._track.removeEventListener("pointermove", this._onTrackPointerMove), 
-            this._track.removeEventListener("pointerup", this._onTrackPointerUp), this._track.removeEventListener("pointerupoutside", this._onTrackPointerUp));
+            e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onTrackPointerMove, {
+                capture: !0
+            }), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this._track.removeEventListener("pointermove", this._onTrackPointerMove, {
+                capture: !0
+            }), this._track.removeEventListener("pointerup", this._onTrackPointerUp), this._track.removeEventListener("pointerupoutside", this._onTrackPointerUp));
         }, this._onRailPointerDown = e => {
             e.stopPropagation();
             const {railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute;