@visactor/vrender-components 0.18.11-alpha.7 → 0.18.12

package/cjs/radio/type.d.ts

@@ -0,0 +1,21 @@
+import type { Cursor, IArcGraphicAttribute, IColor, IGroupGraphicAttribute, IWrapTextGraphicAttribute } from '@visactor/vrender-core';
+export type RadioText = {
+    disableFill?: IColor;
+} & IWrapTextGraphicAttribute;
+export type CircleStyle = {
+    disableFill?: IColor;
+    checkedFill?: IColor;
+    checkedStroke?: IColor;
+    disableCheckedFill?: IColor;
+    disableCheckedStroke?: IColor;
+} & IArcGraphicAttribute;
+export type RadioAttributes = IGroupGraphicAttribute & {
+    id?: string;
+    interactive?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    text?: RadioText;
+    circle?: CircleStyle;
+    disableCursor?: Cursor;
+    spaceBetweenTextAndIcon?: number;
+};

package/cjs/radio/type.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+});
+//# sourceMappingURL=type.js.map

package/cjs/radio/type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type {\n  Cursor,\n  IArcGraphicAttribute,\n  IColor,\n  IGroupGraphicAttribute,\n  IWrapTextGraphicAttribute\n} from '@visactor/vrender-core';\n\nexport type RadioText = {\n  disableFill?: IColor;\n} & IWrapTextGraphicAttribute;\n\nexport type CircleStyle = {\n  disableFill?: IColor;\n  checkedFill?: IColor;\n  checkedStroke?: IColor;\n  disableCheckedFill?: IColor;\n  disableCheckedStroke?: IColor;\n} & IArcGraphicAttribute;\n\nexport type RadioAttributes = IGroupGraphicAttribute & {\n  id?: string;\n\n  interactive?: boolean;\n  disabled?: boolean;\n  checked?: boolean;\n\n  /**\n   * 图例文字\n   */\n  text?: RadioText;\n  /**\n   * 图例选中图标\n   */\n  circle?: CircleStyle;\n  /**\n   * 图例选中图标\n   */\n  disableCursor?: Cursor;\n  spaceBetweenTextAndIcon?: number;\n};\n"]}

package/cjs/segment/index.d.ts

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

package/cjs/segment/index.js

@@ -17,6 +17,5 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), __exportStar(require("./segment"), exports), __exportStar(require("./arc-segment"), exports), 
-__exportStar(require("./type"), exports);
+}), __exportStar(require("./segment"), exports), __exportStar(require("./type"), exports);
 //# sourceMappingURL=index.js.map

package/cjs/segment/index.js.map

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

package/cjs/segment/register.d.ts

@@ -1,2 +1 @@
-export declare function loadSegmentComponent(enableAnimation?: boolean): void;
-export declare function loadArcSegmentComponent(enableAnimation?: boolean): void;
+export declare function loadSegmentComponent(): void;

package/cjs/segment/register.js

@@ -2,19 +2,14 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.loadArcSegmentComponent = exports.loadSegmentComponent = void 0;
+}), exports.loadSegmentComponent = void 0;
 
 const vrender_kits_1 = require("@visactor/vrender-kits");
 
-function loadSegmentComponent(enableAnimation = !1) {
+function loadSegmentComponent() {
     (0, vrender_kits_1.registerGroup)(), (0, vrender_kits_1.registerLine)(), (0, vrender_kits_1.registerPolygon)(), 
     (0, vrender_kits_1.registerSymbol)();
 }
 
-function loadArcSegmentComponent(enableAnimation = !1) {
-    (0, vrender_kits_1.registerGroup)(), (0, vrender_kits_1.registerLine)(), (0, vrender_kits_1.registerArc)(), 
-    (0, vrender_kits_1.registerSymbol)();
-}
-
-exports.loadSegmentComponent = loadSegmentComponent, exports.loadArcSegmentComponent = loadArcSegmentComponent;
+exports.loadSegmentComponent = loadSegmentComponent;
 //# sourceMappingURL=register.js.map

package/cjs/segment/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/segment/register.ts"],"names":[],"mappings":";;;AAAA,yDAAmH;AAEnH,SAAgB,oBAAoB,CAAC,kBAA2B,KAAK;IACnE,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,8BAAe,GAAE,CAAC;IAClB,IAAA,6BAAc,GAAE,CAAC;AACnB,CAAC;AALD,oDAKC;AAED,SAAgB,uBAAuB,CAAC,kBAA2B,KAAK;IACtE,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,0BAAW,GAAE,CAAC;IACd,IAAA,6BAAc,GAAE,CAAC;AACnB,CAAC;AALD,0DAKC","file":"register.js","sourcesContent":["import { registerGroup, registerLine, registerPolygon, registerSymbol, registerArc } from '@visactor/vrender-kits';\n\nexport function loadSegmentComponent(enableAnimation: boolean = false) {\n  registerGroup();\n  registerLine();\n  registerPolygon();\n  registerSymbol();\n}\n\nexport function loadArcSegmentComponent(enableAnimation: boolean = false) {\n  registerGroup();\n  registerLine();\n  registerArc();\n  registerSymbol();\n}\n"]}
+{"version":3,"sources":["../src/segment/register.ts"],"names":[],"mappings":";;;AAAA,yDAAsG;AAEtG,SAAgB,oBAAoB;IAClC,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,8BAAe,GAAE,CAAC;IAClB,IAAA,6BAAc,GAAE,CAAC;AACnB,CAAC;AALD,oDAKC","file":"register.js","sourcesContent":["import { registerGroup, registerLine, registerPolygon, registerSymbol } from '@visactor/vrender-kits';\n\nexport function loadSegmentComponent() {\n  registerGroup();\n  registerLine();\n  registerPolygon();\n  registerSymbol();\n}\n"]}

package/cjs/segment/segment.d.ts

@@ -1,26 +1,24 @@
-import type { ILine, ISymbol } from '@visactor/vrender-core';
+import type { ISymbol } from '@visactor/vrender-core';
 import { AbstractComponent } from '../core/base';
-import type { SegmentAttributes, SymbolAttributes } from './type';
+import type { SegmentAttributes } from './type';
 import type { Point } from '../core/type';
 import type { ComponentOptions } from '../interface';
 export declare class Segment extends AbstractComponent<Required<SegmentAttributes>> {
     name: string;
     startSymbol?: ISymbol;
     endSymbol?: ISymbol;
-    lines?: ILine[];
-    protected _startAngle: number;
+    private _startAngle;
     getStartAngle(): number;
-    protected _endAngle: number;
+    private _endAngle;
     getEndAngle(): number;
-    protected _mainSegmentPoints: Point[];
+    private _mainSegmentPoints;
     getMainSegmentPoints(): Point[];
     static defaultAttributes: Partial<SegmentAttributes>;
     constructor(attributes: SegmentAttributes, options?: ComponentOptions);
     protected render(): void;
-    protected _computeRotate(angle: number): number;
-    protected _renderSymbol(attribute: SymbolAttributes, points: Point[], dim: string): ISymbol | undefined;
+    private _renderSymbol;
     private _getMainSegmentPoints;
     private _clipPoints;
     private _computeLineAngle;
-    protected _reset(): void;
+    private _reset;
 }

package/cjs/segment/segment.js

@@ -20,14 +20,14 @@ class Segment extends base_1.AbstractComponent {
     }
     constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.merge)({}, Segment.defaultAttributes, attributes)), 
-        this.name = "segment", this.lines = [];
+        this.name = "segment";
     }
     render() {
         this.removeAllChild(!0), this._reset();
         const {startSymbol: startSymbol, endSymbol: endSymbol, lineStyle: lineStyle, state: state, visible: visible = !0, multiSegment: multiSegment, mainSegmentIndex: mainSegmentIndex} = this.attribute;
         if (!visible) return;
         this._computeLineAngle();
-        const points = this._getMainSegmentPoints(), startSymbolShape = this._renderSymbol(startSymbol, points, "start"), endSymbolShape = this._renderSymbol(endSymbol, points, "end");
+        const startSymbolShape = this._renderSymbol(startSymbol, "start"), endSymbolShape = this._renderSymbol(endSymbol, "end");
         if (this.startSymbol = startSymbolShape, this.endSymbol = endSymbolShape, multiSegment) {
             const points = [ ...this.attribute.points ];
             if ((0, vutils_1.isValidNumber)(mainSegmentIndex)) points[mainSegmentIndex] = this._clipPoints(points[mainSegmentIndex]); else {
@@ -43,7 +43,7 @@ class Segment extends base_1.AbstractComponent {
                 }));
                 line.name = `${this.name}-line`, line.id = this._getNodeId("line" + index), (0, 
                 vutils_1.isEmpty)(null == state ? void 0 : state.line) || (line.states = (0, vutils_1.isArray)(state.line) ? null !== (_b = state.line[index]) && void 0 !== _b ? _b : state.line[state.line.length - 1] : state.line), 
-                this.add(line), this.lines.push(line);
+                this.add(line);
             }));
         } else {
             let lineCreator = vrender_core_1.graphicCreator.line;
@@ -55,13 +55,11 @@ class Segment extends base_1.AbstractComponent {
                 closePath: !1
             }));
             line.name = `${this.name}-line`, line.id = this._getNodeId("line"), (0, vutils_1.isEmpty)(null == state ? void 0 : state.line) || (line.states = [].concat(state.line)[0]), 
-            this.add(line), this.lines.push(line);
+            this.add(line);
         }
     }
-    _computeRotate(angle) {
-        return angle + Math.PI / 2;
-    }
-    _renderSymbol(attribute, points, dim) {
+    _renderSymbol(attribute, dim) {
+        const points = this._getMainSegmentPoints();
         if (!points.length) return;
         const {autoRotate: autoRotate = !0} = attribute;
         let symbol;
@@ -71,18 +69,16 @@ class Segment extends base_1.AbstractComponent {
             "start" === dim ? (position = {
                 x: start.x + ((0, vutils_1.isValidNumber)(startAngle) ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),
                 y: start.y + ((0, vutils_1.isValidNumber)(startAngle) ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)
-            }, rotate = this._computeRotate(startAngle)) : (position = {
+            }, rotate = startAngle + Math.PI / 2) : (position = {
                 x: end.x + ((0, vutils_1.isValidNumber)(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
                 y: end.y + ((0, vutils_1.isValidNumber)(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
-            }, rotate = this._computeRotate(endAngle)), symbol = vrender_core_1.graphicCreator.symbol(Object.assign(Object.assign(Object.assign({}, position), {
+            }, rotate = endAngle + Math.PI / 2), symbol = vrender_core_1.graphicCreator.symbol(Object.assign(Object.assign(Object.assign({}, position), {
                 symbolType: symbolType,
                 size: size,
                 angle: autoRotate ? rotate + refAngle : 0,
                 strokeBoundsBuffer: 0
             }), style)), symbol.name = `${this.name}-${dim}-symbol`, symbol.id = this._getNodeId(`${dim}-symbol`), 
             (0, vutils_1.isEmpty)(null == state ? void 0 : state.symbol) || (symbol.states = state.symbol), 
-            "start" === dim ? (0, vutils_1.isEmpty)(null == state ? void 0 : state.startSymbol) || (symbol.states = state.startSymbol) : (0, 
-            vutils_1.isEmpty)(null == state ? void 0 : state.endSymbol) || (symbol.states = state.endSymbol), 
             this.add(symbol);
         }
         return symbol;

package/cjs/segment/segment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/segment/segment.ts"],"names":[],"mappings":"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","file":"segment.js","sourcesContent":["/**\n * @description 标签组件\n */\nimport { array, flattenArray, isArray, isEmpty, isValidNumber, merge } from '@visactor/vutils';\nimport type { ILine, ISymbol } from '@visactor/vrender-core';\n// eslint-disable-next-line no-duplicate-imports\nimport { graphicCreator } from '@visactor/vrender-core';\nimport { AbstractComponent } from '../core/base';\nimport type { ILineGraphicWithCornerRadius, SegmentAttributes, SymbolAttributes } from './type';\nimport type { Point } from '../core/type';\nimport type { ComponentOptions } from '../interface';\nimport { loadSegmentComponent } from './register';\n\nloadSegmentComponent();\nexport class Segment extends AbstractComponent<Required<SegmentAttributes>> {\n  name = 'segment';\n\n  startSymbol?: ISymbol;\n  endSymbol?: ISymbol;\n  lines?: ILine[] = [];\n  // animate?: (startSymbol, endSymbol, lines) => void;\n\n  protected _startAngle!: number;\n  /**\n   * 外部获取segment起点正方向\n   */\n  getStartAngle() {\n    return this._startAngle;\n  }\n\n  protected _endAngle!: number;\n  /**\n   * 外部获取segment终点正方向\n   */\n  getEndAngle() {\n    return this._endAngle;\n  }\n\n  protected _mainSegmentPoints: Point[]; // 组成主线段的点\n  getMainSegmentPoints() {\n    return this._mainSegmentPoints;\n  }\n\n  static defaultAttributes: Partial<SegmentAttributes> = {\n    visible: true,\n    lineStyle: {\n      lineWidth: 1,\n      stroke: '#000'\n    },\n    startSymbol: {\n      visible: false,\n      autoRotate: true,\n      symbolType: 'triangle',\n      size: 12,\n      refX: 0,\n      refY: 0,\n      refAngle: 0,\n      style: {\n        fill: '#000',\n        zIndex: 1 // 默认 symbol 绘制在 line 上面\n      }\n    },\n    endSymbol: {\n      visible: false,\n      autoRotate: true,\n      symbolType: 'triangle',\n      size: 12,\n      refX: 0,\n      refY: 0,\n      refAngle: 0,\n      style: {\n        fill: '#000',\n        zIndex: 1 // 默认 symbol 绘制在 line 上面\n      }\n    }\n  };\n\n  constructor(attributes: SegmentAttributes, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, Segment.defaultAttributes, attributes));\n  }\n\n  protected render() {\n    this.removeAllChild(true);\n    this._reset();\n    const {\n      // points,\n      startSymbol,\n      endSymbol,\n      lineStyle,\n      state,\n      visible = true,\n      multiSegment,\n      mainSegmentIndex\n    } = this.attribute as SegmentAttributes;\n\n    if (!visible) {\n      return;\n    }\n\n    // 计算线的起点和终点角度\n    // 计算角度的原因：\n    // 1. segment symbol的自动旋转提供参数\n    // 2. 使用segment时，需要根据line的角度对附加元素进行自动旋转（比如：markLine的标签, markPoint的装饰线）\n    this._computeLineAngle();\n\n    // 绘制start和end symbol\n    const points = this._getMainSegmentPoints();\n    const startSymbolShape = this._renderSymbol(startSymbol as SymbolAttributes, points, 'start');\n    const endSymbolShape = this._renderSymbol(endSymbol as SymbolAttributes, points, 'end');\n\n    this.startSymbol = startSymbolShape;\n    this.endSymbol = endSymbolShape;\n\n    if (multiSegment) {\n      const points = [...this.attribute.points];\n      if (isValidNumber(mainSegmentIndex)) {\n        points[mainSegmentIndex] = this._clipPoints(points[mainSegmentIndex] as Point[]);\n      } else {\n        const clipPoints = this._clipPoints(flattenArray(points) as Point[]);\n        points[0][0] = clipPoints[0];\n        (points[points.length - 1] as Point[])[(points[points.length - 1] as Point[]).length - 1] =\n          clipPoints[clipPoints.length - 1];\n      }\n      points.forEach((point: Point[], index) => {\n        const line = graphicCreator.line({\n          points: point,\n          ...(isArray(lineStyle) ? lineStyle[index] ?? lineStyle[lineStyle.length - 1] : lineStyle),\n          fill: false\n        });\n\n        line.name = `${this.name}-line`;\n        line.id = this._getNodeId('line' + index);\n        if (!isEmpty(state?.line)) {\n          line.states = isArray(state.line) ? state.line[index] ?? state.line[state.line.length - 1] : state.line;\n        }\n        this.add(line);\n        this.lines.push(line);\n      });\n    } else {\n      // 如果配置了cornerRadius, 则绘制polygon, 否则绘制line\n      let lineCreator = graphicCreator.line;\n      if ((array(lineStyle)[0] as ILineGraphicWithCornerRadius).cornerRadius) {\n        lineCreator = graphicCreator.polygon;\n      }\n      const line = lineCreator({\n        points: this._clipPoints(this.attribute.points as Point[]),\n        ...array(lineStyle)[0],\n        fill: false,\n        closePath: false\n      });\n\n      line.name = `${this.name}-line`;\n      line.id = this._getNodeId('line');\n      if (!isEmpty(state?.line)) {\n        line.states = [].concat(state.line)[0];\n      }\n      this.add(line);\n      this.lines.push(line);\n    }\n\n    // if(Segment.animate) {\n    //   console.log('animate', this.animate)\n    //   Segment.animate(this.startSymbol, this.endSymbol, this.lines)\n    // }\n  }\n\n  protected _computeRotate(angle: number) {\n    return angle + Math.PI / 2;\n  }\n\n  protected _renderSymbol(attribute: SymbolAttributes, points: Point[], dim: string): ISymbol | undefined {\n    if (!points.length) {\n      return;\n    }\n    const { autoRotate = true } = attribute;\n    let symbol;\n    if (attribute && attribute.visible) {\n      const startAngle = this._startAngle;\n      const endAngle = this._endAngle;\n      const { state } = this.attribute as SegmentAttributes;\n      const start = points[0];\n      const end = points[points.length - 1];\n      const { refX = 0, refY = 0, refAngle = 0, style, symbolType, size = 12 } = attribute;\n      let position;\n      let rotate;\n      if (dim === 'start') {\n        position = {\n          x:\n            start.x +\n            (isValidNumber(startAngle) ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),\n          y:\n            start.y +\n            (isValidNumber(startAngle) ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)\n        };\n        rotate = this._computeRotate(startAngle); // @chensiji - 加Math.PI / 2是因为：默认symbol的包围盒垂直于line，所以在做自动旋转时需要在line正方向基础上做90度偏移\n      } else {\n        position = {\n          x:\n            end.x + (isValidNumber(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),\n          y: end.y + (isValidNumber(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)\n        };\n        rotate = this._computeRotate(endAngle);\n      }\n\n      symbol = graphicCreator.symbol({\n        ...position,\n        symbolType: symbolType as string,\n        size,\n        angle: autoRotate ? rotate + refAngle : 0,\n        strokeBoundsBuffer: 0,\n        ...style\n      });\n      symbol.name = `${this.name}-${dim}-symbol`;\n      symbol.id = this._getNodeId(`${dim}-symbol`);\n\n      // 兼容旧逻辑, state.symbol同时应用到startSymbol和endSymbol\n      if (!isEmpty(state?.symbol)) {\n        symbol.states = state.symbol;\n      }\n\n      // 新逻辑, state.startSymbol和state.endSymbol做不同匹配\n      if (dim === 'start') {\n        if (!isEmpty(state?.startSymbol)) {\n          symbol.states = state.startSymbol;\n        }\n      } else {\n        if (!isEmpty(state?.endSymbol)) {\n          symbol.states = state.endSymbol;\n        }\n      }\n\n      this.add(symbol);\n    }\n    return symbol;\n  }\n\n  private _getMainSegmentPoints(): Point[] {\n    if (this._mainSegmentPoints) {\n      return this._mainSegmentPoints;\n    }\n    const { points: originPoints, multiSegment, mainSegmentIndex } = this.attribute as SegmentAttributes;\n\n    let points: Point[];\n    // 需要做下约束判断\n    if (multiSegment) {\n      if (isValidNumber(mainSegmentIndex)) {\n        points = originPoints[mainSegmentIndex] as Point[];\n      } else {\n        points = flattenArray(originPoints);\n      }\n    } else {\n      points = originPoints as Point[];\n    }\n    this._mainSegmentPoints = points;\n\n    return points;\n  }\n\n  private _clipPoints(points: Point[]) {\n    const { startSymbol = {} as SegmentAttributes['startSymbol'], endSymbol = {} as SegmentAttributes['endSymbol'] } =\n      this.attribute as SegmentAttributes;\n    // 通过改变line起点和终点的方式达到symbol在fill为false的情况下，也可以遮盖line的效果\n    let pointsAfterClip = points;\n    if (startSymbol.visible) {\n      const startSize = startSymbol.clip ? startSymbol.size || 10 : 0;\n      const pointsStart = {\n        x: points[0].x - (startSize / 2) * (Math.cos(this._startAngle) || 0),\n        y: points[0].y - (startSize / 2) * (Math.sin(this._startAngle) || 0)\n      };\n      pointsAfterClip = [pointsStart, ...pointsAfterClip.slice(1)];\n    }\n    if (endSymbol.visible) {\n      const endSize = endSymbol.clip ? endSymbol.size || 10 : 0;\n      const pointsEnd = {\n        x: points[points.length - 1].x - (endSize / 2) * (Math.cos(this._endAngle) || 0),\n        y: points[points.length - 1].y - (endSize / 2) * (Math.sin(this._endAngle) || 0)\n      };\n      pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];\n    }\n\n    return pointsAfterClip;\n  }\n\n  private _computeLineAngle() {\n    const points = this._getMainSegmentPoints();\n    if (points.length <= 1) {\n      return;\n    }\n    const start = points[0];\n    const startInside = points[1];\n    const endInside = points[points.length - 2];\n    const end = points[points.length - 1];\n    const startVector = [start.x - startInside.x, start.y - startInside.y]; // 起点正方向向量\n    const startAngle = Math.atan2(startVector[1], startVector[0]); // 起点正方向角度\n    const endVector = [end.x - endInside.x, end.y - endInside.y]; // 终点正方向向量\n    const endAngle = Math.atan2(endVector[1], endVector[0]); // 终点正方向角度\n\n    this._startAngle = startAngle;\n    this._endAngle = endAngle;\n  }\n\n  protected _reset() {\n    this.startSymbol = null;\n    this.endSymbol = null;\n    this._startAngle = null;\n    this._endAngle = null;\n    this._mainSegmentPoints = null;\n  }\n}\n"]}
+{"version":3,"sources":["../src/segment/segment.ts"],"names":[],"mappings":"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","file":"segment.js","sourcesContent":["/**\n * @description 标签组件\n */\nimport { array, flattenArray, isArray, isEmpty, isValidNumber, merge } from '@visactor/vutils';\nimport type { ISymbol } from '@visactor/vrender-core';\nimport { graphicCreator } from '@visactor/vrender-core';\nimport { AbstractComponent } from '../core/base';\nimport type { ILineGraphicWithCornerRadius, SegmentAttributes, SymbolAttributes } from './type';\nimport type { Point } from '../core/type';\nimport type { ComponentOptions } from '../interface';\nimport { loadSegmentComponent } from './register';\n\nloadSegmentComponent();\nexport class Segment extends AbstractComponent<Required<SegmentAttributes>> {\n  name = 'segment';\n\n  startSymbol?: ISymbol;\n  endSymbol?: ISymbol;\n\n  private _startAngle!: number;\n  /**\n   * 外部获取segment起点正方向\n   */\n  getStartAngle() {\n    return this._startAngle;\n  }\n\n  private _endAngle!: number;\n  /**\n   * 外部获取segment终点正方向\n   */\n  getEndAngle() {\n    return this._endAngle;\n  }\n\n  private _mainSegmentPoints: Point[]; // 组成主线段的点\n  getMainSegmentPoints() {\n    return this._mainSegmentPoints;\n  }\n\n  static defaultAttributes: Partial<SegmentAttributes> = {\n    visible: true,\n    lineStyle: {\n      lineWidth: 1,\n      stroke: '#000'\n    },\n    startSymbol: {\n      visible: false,\n      autoRotate: true,\n      symbolType: 'triangle',\n      size: 12,\n      refX: 0,\n      refY: 0,\n      refAngle: 0,\n      style: {\n        fill: '#000',\n        zIndex: 1 // 默认 symbol 绘制在 line 上面\n      }\n    },\n    endSymbol: {\n      visible: false,\n      autoRotate: true,\n      symbolType: 'triangle',\n      size: 12,\n      refX: 0,\n      refY: 0,\n      refAngle: 0,\n      style: {\n        fill: '#000',\n        zIndex: 1 // 默认 symbol 绘制在 line 上面\n      }\n    }\n  };\n\n  constructor(attributes: SegmentAttributes, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, Segment.defaultAttributes, attributes));\n  }\n\n  protected render() {\n    this.removeAllChild(true);\n    this._reset();\n    const {\n      // points,\n      startSymbol,\n      endSymbol,\n      lineStyle,\n      state,\n      visible = true,\n      multiSegment,\n      mainSegmentIndex\n    } = this.attribute as SegmentAttributes;\n\n    if (!visible) {\n      return;\n    }\n\n    // 计算线的起点和终点角度\n    // 计算角度的原因：\n    // 1. segment symbol的自动旋转提供参数\n    // 2. 使用segment时，需要根据line的角度对附加元素进行自动旋转（比如：markLine的标签, markPoint的装饰线）\n    this._computeLineAngle();\n\n    // 绘制start和end symbol\n    const startSymbolShape = this._renderSymbol(startSymbol as SymbolAttributes, 'start');\n    const endSymbolShape = this._renderSymbol(endSymbol as SymbolAttributes, 'end');\n\n    this.startSymbol = startSymbolShape;\n    this.endSymbol = endSymbolShape;\n\n    if (multiSegment) {\n      const points = [...this.attribute.points];\n      if (isValidNumber(mainSegmentIndex)) {\n        points[mainSegmentIndex] = this._clipPoints(points[mainSegmentIndex] as Point[]);\n      } else {\n        const clipPoints = this._clipPoints(flattenArray(points) as Point[]);\n        points[0][0] = clipPoints[0];\n        (points[points.length - 1] as Point[])[(points[points.length - 1] as Point[]).length - 1] =\n          clipPoints[clipPoints.length - 1];\n      }\n      points.forEach((point: Point[], index) => {\n        const line = graphicCreator.line({\n          points: point,\n          ...(isArray(lineStyle) ? lineStyle[index] ?? lineStyle[lineStyle.length - 1] : lineStyle),\n          fill: false\n        });\n\n        line.name = `${this.name}-line`;\n        line.id = this._getNodeId('line' + index);\n        if (!isEmpty(state?.line)) {\n          line.states = isArray(state.line) ? state.line[index] ?? state.line[state.line.length - 1] : state.line;\n        }\n        this.add(line);\n      });\n    } else {\n      // 如果配置了cornerRadius, 则绘制polygon, 否则绘制line\n      let lineCreator = graphicCreator.line;\n      if ((array(lineStyle)[0] as ILineGraphicWithCornerRadius).cornerRadius) {\n        lineCreator = graphicCreator.polygon;\n      }\n      const line = lineCreator({\n        points: this._clipPoints(this.attribute.points as Point[]),\n        ...array(lineStyle)[0],\n        fill: false,\n        closePath: false\n      });\n\n      line.name = `${this.name}-line`;\n      line.id = this._getNodeId('line');\n      if (!isEmpty(state?.line)) {\n        line.states = [].concat(state.line)[0];\n      }\n      this.add(line);\n    }\n  }\n\n  private _renderSymbol(attribute: SymbolAttributes, dim: string): ISymbol | undefined {\n    const points = this._getMainSegmentPoints();\n    if (!points.length) {\n      return;\n    }\n\n    const { autoRotate = true } = attribute;\n    let symbol;\n    if (attribute && attribute.visible) {\n      const startAngle = this._startAngle;\n      const endAngle = this._endAngle;\n      const { state } = this.attribute as SegmentAttributes;\n      const start = points[0];\n      const end = points[points.length - 1];\n      const { refX = 0, refY = 0, refAngle = 0, style, symbolType, size = 12 } = attribute;\n      let position;\n      let rotate;\n      if (dim === 'start') {\n        position = {\n          x:\n            start.x +\n            (isValidNumber(startAngle) ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),\n          y:\n            start.y +\n            (isValidNumber(startAngle) ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)\n        };\n        rotate = startAngle + Math.PI / 2; // @chensiji - 加Math.PI / 2是因为：默认symbol的包围盒垂直于line，所以在做自动旋转时需要在line正方向基础上做90度偏移\n      } else {\n        position = {\n          x:\n            end.x + (isValidNumber(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),\n          y: end.y + (isValidNumber(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)\n        };\n        rotate = endAngle + Math.PI / 2;\n      }\n\n      symbol = graphicCreator.symbol({\n        ...position,\n        symbolType: symbolType as string,\n        size,\n        angle: autoRotate ? rotate + refAngle : 0,\n        strokeBoundsBuffer: 0,\n        ...style\n      });\n      symbol.name = `${this.name}-${dim}-symbol`;\n      symbol.id = this._getNodeId(`${dim}-symbol`);\n\n      if (!isEmpty(state?.symbol)) {\n        symbol.states = state.symbol;\n      }\n\n      this.add(symbol);\n    }\n    return symbol;\n  }\n\n  private _getMainSegmentPoints(): Point[] {\n    if (this._mainSegmentPoints) {\n      return this._mainSegmentPoints;\n    }\n    const { points: originPoints, multiSegment, mainSegmentIndex } = this.attribute as SegmentAttributes;\n\n    let points: Point[];\n    // 需要做下约束判断\n    if (multiSegment) {\n      if (isValidNumber(mainSegmentIndex)) {\n        points = originPoints[mainSegmentIndex] as Point[];\n      } else {\n        points = flattenArray(originPoints);\n      }\n    } else {\n      points = originPoints as Point[];\n    }\n    this._mainSegmentPoints = points;\n\n    return points;\n  }\n\n  private _clipPoints(points: Point[]) {\n    const { startSymbol = {} as SegmentAttributes['startSymbol'], endSymbol = {} as SegmentAttributes['endSymbol'] } =\n      this.attribute as SegmentAttributes;\n    // 通过改变line起点和终点的方式达到symbol在fill为false的情况下，也可以遮盖line的效果\n    let pointsAfterClip = points;\n    if (startSymbol.visible) {\n      const startSize = startSymbol.clip ? startSymbol.size || 10 : 0;\n      const pointsStart = {\n        x: points[0].x - (startSize / 2) * (Math.cos(this._startAngle) || 0),\n        y: points[0].y - (startSize / 2) * (Math.sin(this._startAngle) || 0)\n      };\n      pointsAfterClip = [pointsStart, ...pointsAfterClip.slice(1)];\n    }\n    if (endSymbol.visible) {\n      const endSize = endSymbol.clip ? endSymbol.size || 10 : 0;\n      const pointsEnd = {\n        x: points[points.length - 1].x - (endSize / 2) * (Math.cos(this._endAngle) || 0),\n        y: points[points.length - 1].y - (endSize / 2) * (Math.sin(this._endAngle) || 0)\n      };\n      pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];\n    }\n\n    return pointsAfterClip;\n  }\n\n  private _computeLineAngle() {\n    const points = this._getMainSegmentPoints();\n    if (points.length <= 1) {\n      return;\n    }\n    const start = points[0];\n    const startInside = points[1];\n    const endInside = points[points.length - 2];\n    const end = points[points.length - 1];\n    const startVector = [start.x - startInside.x, start.y - startInside.y]; // 起点正方向向量\n    const startAngle = Math.atan2(startVector[1], startVector[0]); // 起点正方向角度\n    const endVector = [end.x - endInside.x, end.y - endInside.y]; // 终点正方向向量\n    const endAngle = Math.atan2(endVector[1], endVector[0]); // 终点正方向角度\n\n    this._startAngle = startAngle;\n    this._endAngle = endAngle;\n  }\n\n  private _reset() {\n    this.startSymbol = null;\n    this.endSymbol = null;\n    this._startAngle = null;\n    this._endAngle = null;\n    this._mainSegmentPoints = null;\n  }\n}\n"]}

package/cjs/segment/type.d.ts

@@ -1,4 +1,4 @@
-import type { IArcGraphicAttribute, IGraphicAttribute, IGroupGraphicAttribute, ILineGraphicAttribute, ISymbolGraphicAttribute, SymbolType } from '@visactor/vrender-core';
+import type { IGraphicAttribute, IGroupGraphicAttribute, ILineGraphicAttribute, ISymbolGraphicAttribute, SymbolType } from '@visactor/vrender-core';
 import type { Point, State } from '../core/type';
 export type SymbolAttributes = {
     visible: boolean;
@@ -11,37 +11,17 @@ export type SymbolAttributes = {
     clip?: boolean;
     style?: Partial<IGraphicAttribute>;
 };
-export interface CommonSegmentAttributes extends IGroupGraphicAttribute {
+export interface SegmentAttributes extends IGroupGraphicAttribute {
     visible?: boolean;
-    startSymbol?: SymbolAttributes;
-    endSymbol?: SymbolAttributes;
-}
-export interface SegmentAttributes extends CommonSegmentAttributes {
     multiSegment?: boolean;
     mainSegmentIndex?: number;
     points: Point[] | Point[][];
+    startSymbol?: SymbolAttributes;
+    endSymbol?: SymbolAttributes;
     lineStyle?: ILineGraphicWithCornerRadius | Partial<ILineGraphicAttribute>[];
     state?: {
         line?: State<ILineGraphicWithCornerRadius | Partial<ILineGraphicAttribute>[]>;
         symbol?: State<Partial<ISymbolGraphicAttribute>>;
-        startSymbol?: State<Partial<ISymbolGraphicAttribute>>;
-        endSymbol?: State<Partial<ISymbolGraphicAttribute>>;
-    };
-}
-export interface ArcSegmentAttributes extends CommonSegmentAttributes {
-    center: {
-        x: number;
-        y: number;
-    };
-    radius: number;
-    startAngle: number;
-    endAngle: number;
-    lineStyle?: IArcGraphicAttribute;
-    state?: {
-        line?: State<IArcGraphicAttribute>;
-        symbol?: State<Partial<ISymbolGraphicAttribute>>;
-        startSymbol?: State<Partial<ISymbolGraphicAttribute>>;
-        endSymbol?: State<Partial<ISymbolGraphicAttribute>>;
     };
 }
 export interface ILineGraphicWithCornerRadius extends Partial<ILineGraphicAttribute> {

package/cjs/segment/type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/segment/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type {\n  IArcGraphicAttribute,\n  IGraphicAttribute,\n  IGroupGraphicAttribute,\n  ILineGraphicAttribute,\n  ISymbolGraphicAttribute,\n  SymbolType\n} from '@visactor/vrender-core';\nimport type { Point, State } from '../core/type';\n\nexport type SymbolAttributes = {\n  /** 是否展示 symbol */\n  visible: boolean;\n  /**\n   * symbol 形状，默认为带左右方向的箭头\n   */\n  symbolType?: SymbolType;\n  /**\n   * symbol 大小\n   */\n  size?: number;\n  /**\n   * 自动旋转，沿着线的方向，默认 true\n   */\n  autoRotate?: boolean;\n  /**\n   * symbol 相对line平行方向上的偏移\n   */\n  refX?: number;\n  /**\n   * symbol 相对line正交方向上的偏移\n   */\n  refY?: number;\n  /**\n   * symbol 相对默认角度的偏移\n   * @description (@chensiji: 默认角度为笛卡尔坐标系y正方向，即默认symbol包围盒的角度为笛卡尔坐标系y正方向, 做自动旋转时, 会在此基础上，将包围盒转换到line平行方向上。)\n   */\n  refAngle?: number;\n  /**\n   * symbol 是否clip line，即当symbol fill为false时，line在symbol内部的部分是否展示\n   * @defalut false\n   */\n  clip?: boolean;\n  /**\n   * symbol 样式配置\n   */\n  style?: Partial<IGraphicAttribute>;\n};\n\nexport interface CommonSegmentAttributes extends IGroupGraphicAttribute {\n  /**\n   * 可见性\n   * @default true\n   */\n  visible?: boolean;\n  /** 轴线起始点 symbol 配置 */\n  startSymbol?: SymbolAttributes;\n  /** 轴线末端 symbol 配置 */\n  endSymbol?: SymbolAttributes;\n}\nexport interface SegmentAttributes extends CommonSegmentAttributes {\n  /**\n   * 是否对 points 进行多段处理，默认为 false，即直接将所有的点连接成线。\n   * 如果需要进行多段处理，需要将 points 属性配置为 Point[][] 类型\n   * @default false\n   */\n  multiSegment?: boolean;\n  /**\n   * 在 `multiSegment` 属性开启的前提下，用于声明那一段线段用来作为主线段，如果不声明，默认全段为主线段\n   */\n  mainSegmentIndex?: number;\n  points: Point[] | Point[][];\n  /**\n   * 线样式配置\n   */\n  lineStyle?: ILineGraphicWithCornerRadius | Partial<ILineGraphicAttribute>[];\n  /**\n   * 图元状态\n   */\n  state?: {\n    line?: State<ILineGraphicWithCornerRadius | Partial<ILineGraphicAttribute>[]>;\n    symbol?: State<Partial<ISymbolGraphicAttribute>>;\n    startSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n    endSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  };\n}\n\nexport interface ArcSegmentAttributes extends CommonSegmentAttributes {\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   * 图元状态\n   */\n  state?: {\n    line?: State<IArcGraphicAttribute>;\n    symbol?: State<Partial<ISymbolGraphicAttribute>>;\n    startSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n    endSymbol?: State<Partial<ISymbolGraphicAttribute>>;\n  };\n}\n\nexport interface ILineGraphicWithCornerRadius extends Partial<ILineGraphicAttribute> {\n  /**\n   * 折现拐角处的圆角配置\n   */\n  cornerRadius?: number;\n}\n"]}
+{"version":3,"sources":["../src/segment/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type {\n  IGraphicAttribute,\n  IGroupGraphicAttribute,\n  ILineGraphicAttribute,\n  ISymbolGraphicAttribute,\n  SymbolType\n} from '@visactor/vrender-core';\nimport type { Point, State } from '../core/type';\n\nexport type SymbolAttributes = {\n  /** 是否展示 symbol */\n  visible: boolean;\n  /**\n   * symbol 形状，默认为带左右方向的箭头\n   */\n  symbolType?: SymbolType;\n  /**\n   * symbol 大小\n   */\n  size?: number;\n  /**\n   * 自动旋转，沿着线的方向，默认 true\n   */\n  autoRotate?: boolean;\n  /**\n   * symbol 相对line平行方向上的偏移\n   */\n  refX?: number;\n  /**\n   * symbol 相对line正交方向上的偏移\n   */\n  refY?: number;\n  /**\n   * symbol 相对默认角度的偏移\n   * @description (@chensiji: 默认角度为笛卡尔坐标系y正方向，即默认symbol包围盒的角度为笛卡尔坐标系y正方向, 做自动旋转时, 会在此基础上，将包围盒转换到line平行方向上。)\n   */\n  refAngle?: number;\n  /**\n   * symbol 是否clip line，即当symbol fill为false时，line在symbol内部的部分是否展示\n   * @defalut false\n   */\n  clip?: boolean;\n  /**\n   * symbol 样式配置\n   */\n  style?: Partial<IGraphicAttribute>;\n};\n\nexport interface SegmentAttributes extends IGroupGraphicAttribute {\n  /**\n   * 可见性\n   * @default true\n   */\n  visible?: boolean;\n  /**\n   * 是否对 points 进行多段处理，默认为 false，即直接将所有的点连接成线。\n   * 如果需要进行多段处理，需要将 points 属性配置为 Point[][] 类型\n   * @default false\n   */\n  multiSegment?: boolean;\n  /**\n   * 在 `multiSegment` 属性开启的前提下，用于声明那一段线段用来作为主线段，如果不声明，默认全段为主线段\n   */\n  mainSegmentIndex?: number;\n  points: Point[] | Point[][];\n  /** 轴线起始点 symbol 配置 */\n  startSymbol?: SymbolAttributes;\n  /** 轴线末端 symbol 配置 */\n  endSymbol?: SymbolAttributes;\n  /**\n   * 线样式配置\n   */\n  lineStyle?: ILineGraphicWithCornerRadius | Partial<ILineGraphicAttribute>[];\n\n  state?: {\n    line?: State<ILineGraphicWithCornerRadius | Partial<ILineGraphicAttribute>[]>;\n    symbol?: State<Partial<ISymbolGraphicAttribute>>;\n  };\n}\n\nexport interface ILineGraphicWithCornerRadius extends Partial<ILineGraphicAttribute> {\n  /**\n   * 折现拐角处的圆角配置\n   */\n  cornerRadius?: number;\n}\n"]}

package/cjs/slider/slider.d.ts

@@ -92,6 +92,8 @@ export declare class Slider extends AbstractComponent<Required<SliderAttributes>
     get endHandler(): ISymbol;
     get tooltipShape(): ISymbol;
     constructor(attributes: SliderAttributes, options?: ComponentOptions);
+    protected calculatePosByValue(value: number, pos?: 'start' | 'end'): number;
+    protected calculateValueByPos(pos: number): number;
     setValue(value: number | number[]): void;
     render(): void;
     protected _renderRail(container: IGroup): import("@visactor/vrender-core").IRect;

package/cjs/slider/slider.js

@@ -42,8 +42,9 @@ class Slider extends base_1.AbstractComponent {
             }, this._onTooltipUpdate(e), this._dispatchTooltipEvent("sliderTooltipShow"));
         }, this._onTooltipUpdate = e => {
             if (this._isChanging || !this._tooltipState || !this._tooltipState.isActive) return;
-            const {min: min, max: max} = this.attribute, pos = (0, vutils_1.clamp)(this._isHorizontal ? (e.viewX - this._rail.globalAABBBounds.x1) / this._rail.globalAABBBounds.width() : (e.viewY - this._rail.globalAABBBounds.y1) / this._rail.globalAABBBounds.height(), 0, 1);
-            pos !== this._tooltipState.pos && (this._tooltipState.pos = pos, this._tooltipState.value = min + (max - min) * pos, 
+            const railLen = this._isHorizontal ? this._rail.globalAABBBounds.width() : this._rail.globalAABBBounds.height(), pos = (0, 
+            vutils_1.clamp)(this._isHorizontal ? (e.viewX - this._rail.globalAABBBounds.x1) / railLen : (e.viewY - this._rail.globalAABBBounds.y1) / railLen, 0, 1);
+            pos !== this._tooltipState.pos && (this._tooltipState.pos = pos, this._tooltipState.value = this.calculateValueByPos(pos * railLen), 
             this._updateTooltip(), this._dispatchTooltipEvent("sliderTooltipUpdate"));
         }, this._onTooltipHide = () => {
             const {tooltip: tooltip} = this.attribute;
@@ -67,7 +68,7 @@ class Slider extends base_1.AbstractComponent {
             railLen = railWidth) : (currentPos = e.clientY, delta = currentPos - this._prePos, 
             originPos = null === (_a = this._currentHandler) || void 0 === _a ? void 0 : _a.attribute.y, 
             railLen = railHeight);
-            const newPos = (0, vutils_1.clamp)(originPos + delta, 0, railLen), currentValue = newPos / railLen * (max - min) + min;
+            const newPos = (0, vutils_1.clamp)(originPos + delta, 0, railLen), currentValue = this.calculateValueByPos(newPos);
             "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 => {
@@ -85,7 +86,7 @@ class Slider extends base_1.AbstractComponent {
             }), this.stage.addEventListener("pointerup", this._onTrackPointerUp), this.stage.addEventListener("pointerupoutside", this._onTrackPointerUp));
         }, this._onTrackPointerMove = e => {
             e.stopPropagation(), this._isChanging = !0;
-            const {railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute;
+            const {railWidth: railWidth, railHeight: railHeight, min: min, max: max, inverse: inverse} = this.attribute;
             if (max === min) return;
             const {startHandler: startHandler, endHandler: endHandler} = this._getHandlers();
             let currentPos, trackLen, railLen;
@@ -94,13 +95,13 @@ class Slider extends base_1.AbstractComponent {
             railLen = railHeight);
             const delta = currentPos - this._prePos;
             if (startHandler) {
-                const originPos = this._isHorizontal ? startHandler.attribute.x : startHandler.attribute.y, newPos = (0, 
-                vutils_1.clamp)(originPos + delta, 0, railLen - trackLen), currentValue = newPos / railLen * (max - min) + min;
+                const originPos = this._isHorizontal ? startHandler.attribute.x : startHandler.attribute.y, newPos = inverse ? (0, 
+                vutils_1.clamp)(originPos + delta, trackLen, railLen) : (0, vutils_1.clamp)(originPos + delta, 0, railLen - trackLen), currentValue = this.calculateValueByPos(newPos);
                 this._updateHandler(startHandler, newPos, currentValue);
             }
             if (endHandler) {
-                const originPos = this._isHorizontal ? endHandler.attribute.x : endHandler.attribute.y, newPos = (0, 
-                vutils_1.clamp)(originPos + delta, trackLen, railLen), currentValue = newPos / railLen * (max - min) + min, startHandlerAttribute = null == startHandler ? void 0 : startHandler.attribute;
+                const originPos = this._isHorizontal ? endHandler.attribute.x : endHandler.attribute.y, newPos = inverse ? (0, 
+                vutils_1.clamp)(originPos + delta, 0, railLen - trackLen) : (0, vutils_1.clamp)(originPos + delta, trackLen, railLen), currentValue = this.calculateValueByPos(newPos), startHandlerAttribute = null == startHandler ? void 0 : startHandler.attribute;
                 this._updateHandler(endHandler, newPos, currentValue), this._track.setAttributes(this._isHorizontal ? {
                     x: Math.min(startHandlerAttribute.x, endHandler.attribute.x),
                     width: Math.abs(startHandlerAttribute.x - endHandler.attribute.x)
@@ -126,7 +127,7 @@ class Slider extends base_1.AbstractComponent {
             endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.x, railLen = railWidth) : (currentPos = e.viewY - this._rail.globalAABBBounds.y1, 
             startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.y, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.y, 
             railLen = railHeight);
-            const currentValue = currentPos / railLen * (max - min) + min;
+            const currentValue = this.calculateValueByPos(currentPos);
             if ((0, vutils_1.isValid)(endHandlerPos)) {
                 const updateHandler = Math.abs(currentPos - startHandlerPos) > Math.abs(currentPos - endHandlerPos) ? endHandler : startHandler;
                 this._updateHandler(updateHandler, currentPos, currentValue);
@@ -134,14 +135,22 @@ class Slider extends base_1.AbstractComponent {
             this._updateTrack(), this._dispatchChangeEvent();
         };
     }
+    calculatePosByValue(value, pos) {
+        const {layout: layout, railWidth: railWidth, railHeight: railHeight, min: min, max: max, inverse: inverse} = this.attribute;
+        let ratio = 0;
+        ratio = min === max ? "start" === pos ? 0 : "end" === pos ? 1 : 0 : (value - min) / (max - min);
+        return (inverse ? 1 - ratio : ratio) * ("vertical" === layout ? railHeight : railWidth);
+    }
+    calculateValueByPos(pos) {
+        const {layout: layout, railWidth: railWidth, railHeight: railHeight, min: min, max: max, inverse: inverse} = this.attribute, railLen = "vertical" === layout ? railHeight : railWidth;
+        return min + (max - min) * (inverse ? 1 - pos / railLen : pos / railLen);
+    }
     setValue(value) {
-        const {layout: layout, railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute;
+        const {min: min, max: max} = this.attribute;
         if (max === min) return;
-        const [startValue, endValue] = (0, vutils_1.array)(value), {startHandler: startHandler, endHandler: endHandler} = this._getHandlers(), railLen = "vertical" === layout ? railHeight : railWidth, startPos = (startValue - min) / (max - min) * railLen;
-        if (startHandler && this._updateHandler(startHandler, startPos, startValue), endHandler) {
-            const endPos = (endValue - min) / (max - min) * railLen;
-            this._updateHandler(endHandler, endPos, endValue);
-        }
+        const [startValue, endValue] = (0, vutils_1.array)(value), {startHandler: startHandler, endHandler: endHandler} = this._getHandlers();
+        startHandler && this._updateHandler(startHandler, this.calculatePosByValue(startValue), startValue), 
+        endHandler && this._updateHandler(endHandler, this.calculatePosByValue(endValue), endValue), 
         this._updateTrack();
     }
     render() {
@@ -220,29 +229,29 @@ class Slider extends base_1.AbstractComponent {
         const {range: range, min: min, max: max, handlerSize: handlerSize = 14, handlerStyle: handlerStyle, handlerText: handlerText, railHeight: railHeight, railWidth: railWidth, slidable: slidable} = this.attribute;
         let {value: value} = this.attribute;
         (0, vutils_1.isNil)(value) && (value = [ min, max ]);
-        const handlerTextVisible = handlerText && handlerText.visible, isHorizontal = this._isHorizontal, railLen = isHorizontal ? railWidth : railHeight, [startValue, endValue] = convertValueToRange(value), handlerStart = max === min ? range ? 0 : railLen : (startValue - min) / (max - min) * railLen, startHandler = this._renderHandler(Object.assign({
-            x: isHorizontal ? handlerStart : railWidth / 2,
-            y: isHorizontal ? railHeight / 2 : handlerStart,
+        const handlerTextVisible = handlerText && handlerText.visible, isHorizontal = this._isHorizontal, [startValue, endValue] = convertValueToRange(value), startPos = this.calculatePosByValue(startValue, range ? "start" : "end"), startHandler = this._renderHandler(Object.assign({
+            x: isHorizontal ? startPos : railWidth / 2,
+            y: isHorizontal ? railHeight / 2 : startPos,
             size: handlerSize,
             strokeBoundsBuffer: 0,
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
         }, handlerStyle));
         if (startHandler.name = constant_1.SLIDER_ELEMENT_NAME.startHandler, this._startHandler = startHandler, 
-        container.add(startHandler), this._currentValue.startPos = handlerStart, handlerTextVisible) {
+        container.add(startHandler), this._currentValue.startPos = startPos, handlerTextVisible) {
             const startHandlerText = this._renderHandlerText(startValue, range ? "start" : "end");
             startHandlerText.name = constant_1.SLIDER_ELEMENT_NAME.startHandlerText, container.add(startHandlerText), 
             this._startHandlerText = startHandlerText;
         }
         if (range) {
-            const handlerEnd = max === min ? railLen : (endValue - min) / (max - min) * railLen, endHandler = this._renderHandler(Object.assign({
-                x: isHorizontal ? handlerEnd : railWidth / 2,
-                y: isHorizontal ? railHeight / 2 : handlerEnd,
+            const endPos = this.calculatePosByValue(endValue, "end"), endHandler = this._renderHandler(Object.assign({
+                x: isHorizontal ? endPos : railWidth / 2,
+                y: isHorizontal ? railHeight / 2 : endPos,
                 size: handlerSize,
                 strokeBoundsBuffer: 0,
                 cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
             }, handlerStyle));
             if (endHandler.name = constant_1.SLIDER_ELEMENT_NAME.endHandler, this._endHandler = endHandler, 
-            container.add(endHandler), this._currentValue.endPos = handlerEnd, handlerTextVisible) {
+            container.add(endHandler), this._currentValue.endPos = endPos, handlerTextVisible) {
                 const endHandlerText = this._renderHandlerText(endValue, "end");
                 endHandlerText.name = constant_1.SLIDER_ELEMENT_NAME.endHandlerText, container.add(endHandlerText), 
                 this._endHandlerText = endHandlerText;
@@ -256,7 +265,7 @@ class Slider extends base_1.AbstractComponent {
             const clampValue = (0, vutils_1.clampRange)(value, min, max);
             startValue = clampValue[0], endValue = clampValue[1];
         } else startValue = min, endValue = (0, vutils_1.clamp)(value, min, max);
-        const isHorizontal = this._isHorizontal, railLen = isHorizontal ? railWidth : railHeight;
+        const isHorizontal = this._isHorizontal;
         range || (startValue = min);
         const trackContainer = vrender_core_1.graphicCreator.group({
             x: 0,
@@ -271,11 +280,11 @@ class Slider extends base_1.AbstractComponent {
         const draggableTrack = (0, vutils_1.isObject)(range) && !0 === range.draggableTrack;
         let cursor;
         cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
-        const trackWidth = max === min ? railLen : (endValue - startValue) / (max - min) * railLen, startPos = max === min ? 0 : (startValue - min) / (max - min) * railLen, track = vrender_core_1.graphicCreator.rect(Object.assign({
-            x: isHorizontal ? startPos : 0,
-            y: isHorizontal ? 0 : startPos,
-            width: isHorizontal ? trackWidth : railWidth,
-            height: isHorizontal ? railHeight : trackWidth,
+        const startPos = this.calculatePosByValue(startValue, "start"), endPos = this.calculatePosByValue(endValue, range ? "end" : "start"), track = vrender_core_1.graphicCreator.rect(Object.assign({
+            x: isHorizontal ? Math.min(startPos, endPos) : 0,
+            y: isHorizontal ? 0 : Math.min(startPos, endPos),
+            width: isHorizontal ? Math.abs(endPos - startPos) : railWidth,
+            height: isHorizontal ? railHeight : Math.abs(endPos - startPos),
             cursor: cursor
         }, trackStyle));
         track.name = constant_1.SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track), 
@@ -286,17 +295,17 @@ class Slider extends base_1.AbstractComponent {
     }
     _renderHandlerText(value, position) {
         var _a, _b, _c;
-        const {align: align, min: min, max: max, handlerSize: handlerSize = 14, handlerText: handlerText = {}, railHeight: railHeight, railWidth: railWidth, slidable: slidable} = this.attribute, isHorizontal = this._isHorizontal, railLen = isHorizontal ? railWidth : railHeight, handlerStart = max === min ? "start" === position ? 0 : railLen : (value - min) / (max - min) * railLen, textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4, textStyle = {
+        const {align: align, handlerSize: handlerSize = 14, handlerText: handlerText = {}, railHeight: railHeight, railWidth: railWidth, slidable: slidable} = this.attribute, isHorizontal = this._isHorizontal, pos = this.calculatePosByValue(value, position), textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4, textStyle = {
             text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_b = handlerText.precision) && void 0 !== _b ? _b : 0),
             lineHeight: null === (_c = handlerText.style) || void 0 === _c ? void 0 : _c.lineHeight,
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
         };
         isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", 
-        textStyle.x = handlerStart, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", 
-        textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", 
+        textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", 
+        textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", 
         textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, 
-        textStyle.y = handlerStart) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", 
-        textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = handlerStart);
+        textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", 
+        textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos);
         return vrender_core_1.graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
     }
     _renderTooltip() {
@@ -332,7 +341,7 @@ class Slider extends base_1.AbstractComponent {
     _updateTooltip() {
         var _a, _b;
         if (!this._tooltipShape && !this._tooltipText || !this._tooltipState) return;
-        const coord = this._isHorizontal ? this._tooltipState.pos * this.attribute.railWidth : this._tooltipState.pos * this.attribute.railHeight, coordKey = this._isHorizontal ? "x" : "y";
+        const {railWidth: railWidth, railHeight: railHeight} = this.attribute, railLen = this._isHorizontal ? railWidth : railHeight, coord = this._tooltipState.pos * railLen, coordKey = this._isHorizontal ? "x" : "y";
         this._tooltipShape && this._tooltipShape.setAttributes({
             visible: !0,
             [coordKey]: coord
@@ -362,7 +371,7 @@ class Slider extends base_1.AbstractComponent {
         this._mainContainer.addEventListener("pointermove", this._onTooltipUpdate), this._mainContainer.addEventListener("pointerleave", this._onTooltipHide));
     }
     _updateTrack() {
-        const startHandler = this._startHandler, endHandler = this._endHandler;
+        const {inverse: inverse, railWidth: railWidth, railHeight: railHeight} = this.attribute, startHandler = this._startHandler, endHandler = this._endHandler;
         if (this._isHorizontal) {
             const startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x;
             if (endHandler) {
@@ -371,7 +380,10 @@ class Slider extends base_1.AbstractComponent {
                     x: Math.min(startHandlerPos, endHandlerPos),
                     width: Math.abs(startHandlerPos - endHandlerPos)
                 });
-            } else this._track.setAttributes({
+            } else inverse ? this._track.setAttributes({
+                x: startHandlerPos,
+                width: railWidth - startHandlerPos
+            }) : this._track.setAttributes({
                 width: startHandlerPos
             });
         } else {
@@ -382,7 +394,10 @@ class Slider extends base_1.AbstractComponent {
                     y: Math.min(startHandlerPos, endHandlerPos),
                     height: Math.abs(startHandlerPos - endHandlerPos)
                 });
-            } else this._track.setAttributes({
+            } else inverse ? this._track.setAttributes({
+                y: startHandlerPos,
+                height: railHeight - startHandlerPos
+            }) : this._track.setAttributes({
                 height: startHandlerPos
             });
         }
@@ -432,10 +447,13 @@ class Slider extends base_1.AbstractComponent {
         });
     }
     _getHandlers() {
-        let temp, startHandler = this._startHandler, endHandler = this._endHandler;
-        return this._isHorizontal ? endHandler && endHandler.attribute.x < (null == startHandler ? void 0 : startHandler.attribute.x) && (temp = startHandler, 
-        startHandler = endHandler, endHandler = temp) : endHandler && endHandler.attribute.y < (null == startHandler ? void 0 : startHandler.attribute.y) && (temp = startHandler, 
-        startHandler = endHandler, endHandler = temp), {
+        const {inverse: inverse} = this.attribute;
+        let startHandler = this._startHandler, endHandler = this._endHandler;
+        return endHandler ? (this._isHorizontal ? (!inverse && endHandler.attribute.x < (null == startHandler ? void 0 : startHandler.attribute.x) || inverse && endHandler.attribute.x > (null == startHandler ? void 0 : startHandler.attribute.x)) && ([startHandler, endHandler] = [ endHandler, startHandler ]) : (!inverse && endHandler.attribute.y < (null == startHandler ? void 0 : startHandler.attribute.y) || inverse && endHandler.attribute.y > (null == startHandler ? void 0 : startHandler.attribute.y)) && ([startHandler, endHandler] = [ endHandler, startHandler ]), 
+        {
+            startHandler: startHandler,
+            endHandler: endHandler
+        }) : {
             startHandler: startHandler,
             endHandler: endHandler
         };