@visactor/vrender-components 0.17.12-alpha.1 → 0.17.12-alpha.3

package/cjs/marker/point.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/marker/point.ts"],"names":[],"mappings":"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","file":"point.js","sourcesContent":["import type {\n  IGroup,\n  IImage,\n  INode,\n  ISymbol,\n  IImageGraphicAttribute,\n  IRichText,\n  IRichTextGraphicAttribute,\n  ILine,\n  ILineGraphicAttribute\n} from '@visactor/vrender-core';\n// eslint-disable-next-line no-duplicate-imports\nimport { graphicCreator } from '@visactor/vrender-core';\nimport type { IPointLike } from '@visactor/vutils';\n// eslint-disable-next-line no-duplicate-imports\nimport { merge } from '@visactor/vutils';\nimport { Segment } from '../segment';\nimport type { TagAttributes } from '../tag';\nimport { Tag } from '../tag';\nimport { Marker } from './base';\nimport { DEFAULT_MARK_POINT_TEXT_STYLE_MAP, DEFAULT_MARK_POINT_THEME } from './config';\nimport type { IItemContent, IItemLine, MarkPointAttrs } from './type';\n// eslint-disable-next-line no-duplicate-imports\nimport { IMarkPointItemPosition } from './type';\nimport type { Point } from '../core/type';\nimport type { ComponentOptions } from '../interface';\nimport { loadMarkPointComponent } from './register';\n\nloadMarkPointComponent();\nexport class MarkPoint extends Marker<MarkPointAttrs> {\n  name = 'markPoint';\n  static defaultAttributes = DEFAULT_MARK_POINT_THEME;\n\n  private _item!: ISymbol | Tag | IImage | IRichText;\n\n  private _line?: Segment;\n\n  private _decorativeLine!: ILine;\n\n  constructor(attributes: MarkPointAttrs, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, MarkPoint.defaultAttributes, attributes));\n  }\n\n  protected setLabelPos() {\n    //do nothing\n  }\n\n  protected setItemAttributes(\n    item: ISymbol | Tag | IImage | IRichText,\n    itemContent: IItemContent,\n    itemPosition: Point,\n    itemType: 'symbol' | 'text' | 'image' | 'richText' | 'custom'\n  ) {\n    if (!item) {\n      return;\n    }\n    const {\n      autoRotate = true,\n      refX = 0,\n      refY = 0,\n      refAngle = 0,\n      textStyle = {},\n      richTextStyle = {},\n      imageStyle = {},\n      position = IMarkPointItemPosition.middle\n    } = itemContent;\n    const itemAngle = this._line?.getEndAngle() || 0;\n    const itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2);\n    const itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);\n    if (itemType === 'text') {\n      item.setAttributes({\n        ...(textStyle as TagAttributes),\n        textStyle: {\n          ...DEFAULT_MARK_POINT_TEXT_STYLE_MAP[itemContent?.position || 'end'],\n          ...textStyle.textStyle\n        }\n      });\n    } else if (itemType === 'richText') {\n      item.setAttributes({\n        dx: this.getItemDx(item, position, richTextStyle) + (richTextStyle.dx || 0),\n        dy: this.getItemDy(item, position, richTextStyle) + (richTextStyle.dy || 0)\n      });\n    } else if (itemType === 'image') {\n      item.setAttributes({\n        dx: this.getItemDx(item, position, imageStyle) + (imageStyle.dx || 0),\n        dy: this.getItemDy(item, position, imageStyle) + (imageStyle.dy || 0)\n      });\n    }\n    item.setAttributes({\n      x: itemPosition.x + (itemOffsetX || 0),\n      y: itemPosition.y + (itemOffsetY || 0),\n      angle: autoRotate && itemAngle + refAngle\n    });\n\n    // if (this.attribute.limitRect && this.attribute.itemContent?.confine) {\n    //   const { x, y, width, height } = this.attribute.limitRect;\n    //   limitShapeInBounds(item, {\n    //     x1: x,\n    //     y1: y,\n    //     x2: x + width,\n    //     y2: y + height\n    //   });\n    // }\n  }\n\n  protected getItemDx(\n    item: ISymbol | Tag | IImage | IRichText,\n    position: keyof typeof IMarkPointItemPosition,\n    style?: IImageGraphicAttribute | IRichTextGraphicAttribute\n  ) {\n    const width = (item as IGroup)?.AABBBounds?.width() ?? (style?.width || 0);\n    if (position.includes('inside')) {\n      return -width;\n    }\n    if (position === 'insideTop') {\n      return 0;\n    }\n    return 0;\n  }\n\n  protected getItemDy(\n    item: ISymbol | Tag | IImage | IRichText,\n    position: keyof typeof IMarkPointItemPosition,\n    style?: IImageGraphicAttribute | IRichTextGraphicAttribute\n  ) {\n    const height = (item as IGroup)?.AABBBounds?.height() ?? (style?.height || 0);\n    if (position.includes('top') || position.includes('Top')) {\n      return -height;\n    }\n    if (position.includes('middle') || position.includes('Middle')) {\n      return -height / 2;\n    }\n    return 0;\n  }\n\n  protected initItem(itemContent: IItemContent, itemPosition: Point) {\n    const { type = 'text', symbolStyle, richTextStyle, imageStyle, renderCustomCallback } = itemContent;\n    let item: ISymbol | Tag | IImage | IRichText | IGroup;\n    if (type === 'symbol') {\n      item = graphicCreator.symbol({\n        ...itemPosition,\n        ...symbolStyle\n      });\n    } else if (type === 'text') {\n      item = new Tag({\n        ...itemPosition\n      });\n    } else if (type === 'richText') {\n      item = graphicCreator.richtext({\n        ...itemPosition,\n        ...richTextStyle\n      });\n    } else if (type === 'image') {\n      item = graphicCreator.image({\n        ...itemPosition,\n        ...imageStyle\n      });\n    } else if (type === 'custom' && renderCustomCallback) {\n      item = renderCustomCallback();\n    }\n    this.setItemAttributes(item, itemContent, itemPosition, type);\n    return item;\n  }\n\n  protected getItemLineAttr(itemLine: IItemLine, position: Point, itemPosition: Point) {\n    let points: Point[] = [];\n    const { type = 'type-s' } = itemLine;\n    if (type === 'type-do') {\n      points = [\n        position,\n        {\n          x: (position.x + itemPosition.x) / 2,\n          y: itemPosition.y\n        },\n        itemPosition\n      ];\n    } else if (type === 'type-po') {\n      points = [\n        position,\n        {\n          x: itemPosition.x,\n          y: position.y\n        },\n        itemPosition\n      ];\n    } else if (type === 'type-op') {\n      points = [\n        position,\n        {\n          x: position.x,\n          y: itemPosition.y\n        },\n        itemPosition\n      ];\n    } else {\n      points = [position, itemPosition];\n    }\n    return points;\n  }\n\n  protected setItemLineAttr(itemLine: IItemLine, position: Point, itemPosition: Point, visible: boolean) {\n    if (this._line) {\n      const { startSymbol, endSymbol, lineStyle } = itemLine;\n      const points = this.getItemLineAttr(itemLine, position, itemPosition);\n      this._line.setAttributes({\n        points,\n        startSymbol,\n        endSymbol,\n        lineStyle,\n        visible\n      });\n    }\n  }\n\n  protected getDecorativeLineAttr(itemLine: IItemLine, itemPosition: Point) {\n    const decorativeLength = itemLine?.decorativeLine?.length || 10;\n    const itemAngle = this._line.getEndAngle() || 0;\n    const startPointOffsetX = (decorativeLength / 2) * Math.cos(itemAngle - Math.PI / 2);\n    const startPointOffsetY = (decorativeLength / 2) * Math.sin(itemAngle - Math.PI / 2);\n    const endPointOffsetX = (-decorativeLength / 2) * Math.cos(itemAngle - Math.PI / 2);\n    const endPointOffsetY = (-decorativeLength / 2) * Math.sin(itemAngle - Math.PI / 2);\n    return {\n      startPointOffsetX,\n      startPointOffsetY,\n      endPointOffsetX,\n      endPointOffsetY\n    };\n  }\n\n  protected setDecorativeLineAttr(itemLine: IItemLine, itemPosition: Point, visible: boolean) {\n    if (this._decorativeLine) {\n      const { lineStyle } = itemLine;\n      const { startPointOffsetX, startPointOffsetY, endPointOffsetX, endPointOffsetY } = this.getDecorativeLineAttr(\n        itemLine,\n        itemPosition\n      );\n      this._decorativeLine.setAttributes({\n        points: [\n          {\n            x: itemPosition.x + startPointOffsetX,\n            y: itemPosition.y + startPointOffsetY\n          },\n          {\n            x: itemPosition.x + endPointOffsetX,\n            y: itemPosition.y + endPointOffsetY\n          }\n        ] as IPointLike[],\n        ...(lineStyle as Partial<ILineGraphicAttribute>),\n        visible\n      });\n    }\n  }\n\n  protected initMarker(container: IGroup) {\n    const { position, itemLine = {}, itemContent = {} } = this.attribute as MarkPointAttrs;\n    const itemPosition = {\n      x: position.x + (itemContent.offsetX || 0),\n      y: position.y + (itemContent.offsetY || 0)\n    };\n\n    const line = new Segment({\n      points: [],\n      pickable: false // 组件容器本身不参与拾取\n    });\n    line.name = 'mark-point-line';\n    this._line = line;\n    container.add(line as unknown as INode);\n\n    const decorativeLine = graphicCreator.line({\n      points: []\n    });\n    decorativeLine.name = 'mark-point-decorativeLine';\n    this._decorativeLine = decorativeLine;\n    container.add(decorativeLine as unknown as INode);\n\n    this.setItemLineAttr(itemLine, position, itemPosition, itemLine.visible);\n    this.setDecorativeLineAttr(itemLine, itemPosition, itemLine.decorativeLine?.visible);\n\n    const item = this.initItem(itemContent as any, itemPosition);\n    this._item = item;\n    container.add(item as unknown as INode);\n  }\n\n  protected updateMarker() {\n    const { position, itemLine = {}, itemContent = {} } = this.attribute as MarkPointAttrs;\n    const { type = 'text' } = itemContent;\n    const itemPosition = {\n      x: position.x + (itemContent.offsetX || 0),\n      y: position.y + (itemContent.offsetY || 0)\n    };\n    this.setItemLineAttr(itemLine, position, itemPosition, itemLine.visible);\n    this.setDecorativeLineAttr(itemLine, itemPosition, itemLine.decorativeLine?.visible);\n    this.setItemAttributes(this._item, itemContent, itemPosition, type);\n  }\n\n  protected isValidPoints() {\n    return true;\n  }\n}\n"]}
+{"version":3,"sources":["../src/marker/point.ts"],"names":[],"mappings":"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","file":"point.js","sourcesContent":["import type {\n  IGroup,\n  IImage,\n  INode,\n  ISymbol,\n  IImageGraphicAttribute,\n  IRichText,\n  IRichTextGraphicAttribute,\n  ILine,\n  ILineGraphicAttribute\n} from '@visactor/vrender-core';\n// eslint-disable-next-line no-duplicate-imports\nimport { graphicCreator } from '@visactor/vrender-core';\nimport type { IPointLike } from '@visactor/vutils';\n// eslint-disable-next-line no-duplicate-imports\nimport { isValidNumber, merge } from '@visactor/vutils';\nimport { Segment } from '../segment';\nimport type { TagAttributes } from '../tag';\n// eslint-disable-next-line no-duplicate-imports\nimport { Tag } from '../tag';\nimport { Marker } from './base';\nimport { DEFAULT_MARK_POINT_TEXT_STYLE_MAP, DEFAULT_MARK_POINT_THEME } from './config';\nimport type { IItemContent, IItemLine, MarkPointAttrs } from './type';\n// eslint-disable-next-line no-duplicate-imports\nimport { IMarkPointItemPosition } from './type';\nimport type { Point } from '../core/type';\nimport type { ComponentOptions } from '../interface';\nimport { loadMarkPointComponent } from './register';\nimport { computeOffsetForlimit } from '../util/limit-shape';\n\nloadMarkPointComponent();\nexport class MarkPoint extends Marker<MarkPointAttrs> {\n  name = 'markPoint';\n  static defaultAttributes = DEFAULT_MARK_POINT_THEME;\n\n  private _item!: ISymbol | Tag | IImage | IRichText;\n\n  private _line?: Segment;\n\n  private _decorativeLine!: ILine;\n\n  constructor(attributes: MarkPointAttrs, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, MarkPoint.defaultAttributes, attributes));\n  }\n\n  protected setLabelPos() {\n    //do nothing\n  }\n\n  protected setItemAttributes(\n    item: ISymbol | Tag | IImage | IRichText,\n    itemContent: IItemContent,\n    itemPosition: Point,\n    itemType: 'symbol' | 'text' | 'image' | 'richText' | 'custom'\n  ) {\n    if (!item) {\n      return;\n    }\n    const {\n      autoRotate = true,\n      refX = 0,\n      refY = 0,\n      refAngle = 0,\n      textStyle = {},\n      richTextStyle = {},\n      imageStyle = {},\n      position = IMarkPointItemPosition.middle\n    } = itemContent;\n    const itemAngle = this._line?.getEndAngle() || 0;\n    const itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2);\n    const itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);\n    if (itemType === 'text') {\n      item.setAttributes({\n        ...(textStyle as TagAttributes),\n        textStyle: {\n          ...DEFAULT_MARK_POINT_TEXT_STYLE_MAP[itemContent?.position || 'end'],\n          ...textStyle.textStyle\n        }\n      });\n    } else if (itemType === 'richText') {\n      item.setAttributes({\n        dx: this.getItemDx(item, position, richTextStyle) + (richTextStyle.dx || 0),\n        dy: this.getItemDy(item, position, richTextStyle) + (richTextStyle.dy || 0)\n      });\n    } else if (itemType === 'image') {\n      item.setAttributes({\n        dx: this.getItemDx(item, position, imageStyle) + (imageStyle.dx || 0),\n        dy: this.getItemDy(item, position, imageStyle) + (imageStyle.dy || 0)\n      });\n    }\n    item.setAttributes({\n      x: itemPosition.x + (itemOffsetX || 0),\n      y: itemPosition.y + (itemOffsetY || 0),\n      angle: autoRotate && itemAngle + refAngle\n    });\n  }\n\n  protected getItemDx(\n    item: ISymbol | Tag | IImage | IRichText,\n    position: keyof typeof IMarkPointItemPosition,\n    style?: IImageGraphicAttribute | IRichTextGraphicAttribute\n  ) {\n    const width = (item as IGroup)?.AABBBounds?.width() ?? (style?.width || 0);\n    if (position.includes('inside')) {\n      return -width;\n    }\n    if (position === 'insideTop') {\n      return 0;\n    }\n    return 0;\n  }\n\n  protected getItemDy(\n    item: ISymbol | Tag | IImage | IRichText,\n    position: keyof typeof IMarkPointItemPosition,\n    style?: IImageGraphicAttribute | IRichTextGraphicAttribute\n  ) {\n    const height = (item as IGroup)?.AABBBounds?.height() ?? (style?.height || 0);\n    if (position.includes('top') || position.includes('Top')) {\n      return -height;\n    }\n    if (position.includes('middle') || position.includes('Middle')) {\n      return -height / 2;\n    }\n    return 0;\n  }\n\n  protected initItem(itemContent: IItemContent, itemPosition: Point) {\n    const { type = 'text', symbolStyle, richTextStyle, imageStyle, renderCustomCallback } = itemContent;\n    let item: ISymbol | Tag | IImage | IRichText | IGroup;\n    if (type === 'symbol') {\n      item = graphicCreator.symbol({\n        ...itemPosition,\n        ...symbolStyle\n      });\n    } else if (type === 'text') {\n      item = new Tag({\n        ...itemPosition\n      });\n    } else if (type === 'richText') {\n      item = graphicCreator.richtext({\n        ...itemPosition,\n        ...richTextStyle\n      });\n    } else if (type === 'image') {\n      item = graphicCreator.image({\n        ...itemPosition,\n        ...imageStyle\n      });\n    } else if (type === 'custom' && renderCustomCallback) {\n      item = renderCustomCallback();\n    }\n    this.setItemAttributes(item, itemContent, itemPosition, type);\n    return item;\n  }\n\n  protected getItemLineAttr(itemLine: IItemLine, position: Point, itemPosition: Point) {\n    let points: Point[] = [];\n    const { type = 'type-s' } = itemLine;\n    if (type === 'type-do') {\n      points = [\n        position,\n        {\n          x: (position.x + itemPosition.x) / 2,\n          y: itemPosition.y\n        },\n        itemPosition\n      ];\n    } else if (type === 'type-po') {\n      points = [\n        position,\n        {\n          x: itemPosition.x,\n          y: position.y\n        },\n        itemPosition\n      ];\n    } else if (type === 'type-op') {\n      points = [\n        position,\n        {\n          x: position.x,\n          y: itemPosition.y\n        },\n        itemPosition\n      ];\n    } else {\n      points = [position, itemPosition];\n    }\n    return points;\n  }\n\n  protected setItemLineAttr(itemLine: IItemLine, position: Point, itemPosition: Point, visible: boolean) {\n    if (this._line) {\n      const { startSymbol, endSymbol, lineStyle } = itemLine;\n      const points = this.getItemLineAttr(itemLine, position, itemPosition);\n      this._line.setAttributes({\n        points,\n        startSymbol,\n        endSymbol,\n        lineStyle,\n        visible\n      });\n    }\n  }\n\n  protected getDecorativeLineAttr(itemLine: IItemLine, itemPosition: Point) {\n    const decorativeLength = itemLine?.decorativeLine?.length || 10;\n    const itemAngle = this._line.getEndAngle() || 0;\n    const startPointOffsetX = (decorativeLength / 2) * Math.cos(itemAngle - Math.PI / 2);\n    const startPointOffsetY = (decorativeLength / 2) * Math.sin(itemAngle - Math.PI / 2);\n    const endPointOffsetX = (-decorativeLength / 2) * Math.cos(itemAngle - Math.PI / 2);\n    const endPointOffsetY = (-decorativeLength / 2) * Math.sin(itemAngle - Math.PI / 2);\n    return {\n      startPointOffsetX,\n      startPointOffsetY,\n      endPointOffsetX,\n      endPointOffsetY\n    };\n  }\n\n  protected setDecorativeLineAttr(itemLine: IItemLine, itemPosition: Point, visible: boolean) {\n    if (this._decorativeLine) {\n      const { lineStyle } = itemLine;\n      const { startPointOffsetX, startPointOffsetY, endPointOffsetX, endPointOffsetY } = this.getDecorativeLineAttr(\n        itemLine,\n        itemPosition\n      );\n      this._decorativeLine.setAttributes({\n        points: [\n          {\n            x: itemPosition.x + startPointOffsetX,\n            y: itemPosition.y + startPointOffsetY\n          },\n          {\n            x: itemPosition.x + endPointOffsetX,\n            y: itemPosition.y + endPointOffsetY\n          }\n        ] as IPointLike[],\n        ...(lineStyle as Partial<ILineGraphicAttribute>),\n        visible\n      });\n    }\n  }\n\n  protected setAllOfItemsAttr(itemPosition: Point) {\n    const { position, itemLine = {}, itemContent = {}, limitRect } = this.attribute as MarkPointAttrs;\n    const { type = 'text', confine } = itemContent;\n    if (limitRect && confine) {\n      const { x, y, width, height } = limitRect;\n      const { dx, dy } = computeOffsetForlimit(this._item, {\n        x1: x,\n        y1: y,\n        x2: x + width,\n        y2: y + height\n      });\n      itemPosition.x = itemPosition.x + dx;\n      itemPosition.y = itemPosition.y + dy;\n    }\n    this.setItemAttributes(this._item, itemContent, itemPosition, type);\n    this.setItemLineAttr(itemLine, position, itemPosition, itemLine.visible);\n    this.setDecorativeLineAttr(itemLine, itemPosition, itemLine.decorativeLine?.visible);\n  }\n\n  protected initMarker(container: IGroup) {\n    const { position, itemContent = {} } = this.attribute as MarkPointAttrs;\n    const itemPosition = {\n      x: position.x + (itemContent.offsetX || 0),\n      y: position.y + (itemContent.offsetY || 0)\n    };\n\n    const line = new Segment({\n      points: [],\n      pickable: false // 组件容器本身不参与拾取\n    });\n    line.name = 'mark-point-line';\n    this._line = line;\n    container.add(line as unknown as INode);\n\n    const decorativeLine = graphicCreator.line({\n      points: []\n    });\n    decorativeLine.name = 'mark-point-decorativeLine';\n    this._decorativeLine = decorativeLine;\n    container.add(decorativeLine as unknown as INode);\n\n    // 为了强制将itemContent限制在limitRect内, 所以需要先绘制item, 然后根据item bounds 动态调整位置\n    const item = this.initItem(itemContent as any, itemPosition);\n    this._item = item;\n\n    // 由于itemLine的指向也要变化, 所以需要对所有的内容进行渲染\n    this.setAllOfItemsAttr(itemPosition);\n    container.add(item as unknown as INode);\n  }\n\n  protected updateMarker() {\n    const { position, itemContent = {} } = this.attribute as MarkPointAttrs;\n    const { type = 'text' } = itemContent;\n\n    const itemPosition = {\n      x: position.x + (itemContent.offsetX || 0),\n      y: position.y + (itemContent.offsetY || 0)\n    };\n\n    // 为了强制将itemContent限制在limitRect内, 所以需要先绘制item, 然后根据item bounds 动态调整位置\n    this.setItemAttributes(this._item, itemContent, itemPosition, type);\n    // 由于itemLine的指向也要变化, 所以需要对所有的内容进行渲染\n    this.setAllOfItemsAttr(itemPosition);\n  }\n\n  protected isValidPoints() {\n    const { position } = this.attribute as MarkPointAttrs;\n    if (isValidNumber(position.x) && isValidNumber(position.y)) {\n      return true;\n    }\n    return false;\n  }\n}\n"]}

package/cjs/marker/type.d.ts

@@ -85,6 +85,7 @@ export type IItemContent = IMarkRef & {
     textStyle?: IMarkLabel;
     richTextStyle?: IRichTextGraphicAttribute;
     renderCustomCallback?: () => IGroup;
+    confine?: boolean;
 };
 export type IItemLine = {
     type?: 'type-s' | 'type-do' | 'type-po' | 'type-op';

package/cjs/marker/type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/marker/type.ts"],"names":[],"mappings":";;;AAYA,IAAY,sBAUX;AAVD,WAAY,sBAAsB;IAChC,yCAAe,CAAA;IACf,2CAAiB,CAAA;IACjB,qCAAW,CAAA;IACX,2DAAiC,CAAA;IACjC,iEAAuC,CAAA;IACvC,6DAAmC,CAAA;IACnC,mEAAyC,CAAA;IACzC,uDAA6B,CAAA;IAC7B,6DAAmC,CAAA;AACrC,CAAC,EAVW,sBAAsB,GAAtB,8BAAsB,KAAtB,8BAAsB,QAUjC;AAED,IAAY,sBAUX;AAVD,WAAY,sBAAsB;IAChC,uCAAa,CAAA;IACb,yCAAe,CAAA;IACf,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,2CAAiB,CAAA;IACjB,mDAAyB,CAAA;IACzB,qDAA2B,CAAA;IAC3B,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;AAC/B,CAAC,EAVW,sBAAsB,GAAtB,8BAAsB,KAAtB,8BAAsB,QAUjC;AAED,IAAY,sBAOX;AAPD,WAAY,sBAAsB;IAChC,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,2CAAiB,CAAA;IACjB,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,uDAA6B,CAAA;AAC/B,CAAC,EAPW,sBAAsB,GAAtB,8BAAsB,KAAtB,8BAAsB,QAOjC","file":"type.js","sourcesContent":["import type {\n  IGroup,\n  IGroupGraphicAttribute,\n  IImageGraphicAttribute,\n  IPolygonAttribute,\n  IRichTextGraphicAttribute,\n  ISymbolGraphicAttribute\n} from '@visactor/vrender-core';\nimport type { SegmentAttributes, SymbolAttributes } from '../segment';\nimport type { TagAttributes } from '../tag';\nimport type { Point } from '../core/type';\n\nexport enum IMarkLineLabelPosition {\n  start = 'start',\n  middle = 'middle',\n  end = 'end',\n  insideStartTop = 'insideStartTop',\n  insideStartBottom = 'insideStartBottom',\n  insideMiddleTop = 'insideMiddleTop',\n  insideMiddleBottom = 'insideMiddleBottom',\n  insideEndTop = 'insideEndTop',\n  insideEndBottom = 'insideEndBottom'\n}\n\nexport enum IMarkAreaLabelPosition {\n  left = 'left',\n  right = 'right',\n  top = 'top',\n  bottom = 'bottom',\n  middle = 'middle',\n  insideLeft = 'insideLeft',\n  insideRight = 'insideRight',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom'\n}\n\nexport enum IMarkPointItemPosition {\n  top = 'top',\n  bottom = 'bottom',\n  middle = 'middle',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom',\n  insideMiddle = 'insideMiddle'\n}\n\nexport type IMarkBackgroundAttributes = {\n  /**\n   * 是否绘制背景层\n   */\n  visible: boolean;\n  /**\n   * TODO: 根据文字宽度进行背景 panel size自适应\n   */\n  autoHeight?: boolean;\n  /**\n   * TODO: 根据文高度度进行背景 panel size自适应\n   */\n  autoWidth?: boolean;\n} & Partial<SymbolAttributes>;\n\nexport type IMarkLabel = Omit<TagAttributes, 'x' | 'y' | 'panel'> & {\n  /**\n   * 标签的背景面板配置\n   */\n  panel?: IMarkBackgroundAttributes;\n};\n\nexport type IMarkRef = {\n  /**\n   * 自动旋转，沿着线的方向，默认 true\n   */\n  autoRotate?: boolean;\n  /**\n   * label 相对line平行方向上的偏移\n   */\n  refX?: number;\n  /**\n   * label 相对line正交方向上的偏移\n   */\n  refY?: number;\n  /**\n   * label 相对默认角度的偏移 （label跟随line的角度做自动旋转时，默认按照line的平行向量作为初始角度）\n   */\n  refAngle?: number;\n};\n\nexport type MarkerAttrs = IGroupGraphicAttribute & {\n  type?: 'line' | 'area' | 'point';\n  /**\n   * 是否支持交互\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * 是否显示marker组件\n   * @default true\n   */\n  visible?: boolean;\n  /**\n   * 是否将组件在绘制区域内进行剪切\n   * @default true\n   */\n  clipInRange?: boolean;\n  /**\n   * 组件绘制范围配置\n   */\n  limitRect?: {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n  };\n};\n\nexport type MarkLineAttrs = MarkerAttrs &\n  SegmentAttributes & {\n    type?: 'line';\n    /**\n     * 构成line的点: 如果是两个点，则为直线；多个点则为曲线\n     */\n    points: Point[] | Point[][];\n\n    /**\n     * 标签\n     */\n    label?: {\n      /**\n       * label 相对line的位置\n       */\n      position?: keyof typeof IMarkLineLabelPosition;\n      /**\n       * 当 mark 配置了 clip 之后，label 是否自动调整位置\n       */\n      confine?: boolean;\n    } & IMarkRef &\n      IMarkLabel;\n  };\n\nexport type MarkAreaAttrs = MarkerAttrs & {\n  type?: 'area';\n  /**\n   * 构成area的点\n   */\n  points: Point[];\n  /**\n   * 标签\n   */\n  label?: {\n    position?: keyof typeof IMarkAreaLabelPosition;\n    /**\n     * 当 mark 配置了 clip 之后，label 是否自动调整位置\n     */\n    confine?: boolean;\n  } & IMarkLabel;\n  /**\n   * area的样式\n   */\n  areaStyle?: IPolygonAttribute;\n};\n\nexport type IItemContent = IMarkRef & {\n  /**\n   * 标注类型\n   * Tips: 保留'richText'与之前的定义做兼容\n   */\n  type?: 'symbol' | 'text' | 'image' | 'richText' | 'custom';\n  position?: keyof typeof IMarkPointItemPosition;\n  /**\n   * x 方向偏移量\n   */\n  offsetX?: number;\n  /**\n   * y 方向偏移量\n   */\n  offsetY?: number;\n  /**\n   * type为symbol时, symbol的样式\n   */\n  symbolStyle?: ISymbolGraphicAttribute;\n  /**\n   * type为image时, image的样式\n   */\n  imageStyle?: IImageGraphicAttribute;\n  /**\n   * type为text时, text的配置\n   * 'text'类型的ItemContent新增三种子类型：'text','rich','html'。配置在textStyle.type上，继承自TagAttributes。\n   */\n  textStyle?: IMarkLabel;\n  /**\n   * type为rich text时, rich text的样式\n   */\n  richTextStyle?: IRichTextGraphicAttribute;\n  /**\n   * type为custom时，允许以callback的方式传入需要render的item\n   */\n  renderCustomCallback?: () => IGroup;\n  // /**\n  //  * 当 mark 配置了 clip 之后，label 是否自动调整位置\n  //  */\n  // confine?: boolean;\n};\n\nexport type IItemLine = {\n  /** TODO：'type-opo' */\n  type?: 'type-s' | 'type-do' | 'type-po' | 'type-op';\n  visible?: boolean;\n  /**\n   * 垂直于引导线的装饰线，参考案例: https://observablehq.com/@mikelotis/edmonton-population-history-line-chart\n   */\n  decorativeLine?: {\n    visible?: boolean;\n    length?: number;\n  };\n} & Omit<SegmentAttributes, 'points'>;\n\nexport type MarkPointAttrs = Omit<MarkerAttrs, 'labelStyle'> & {\n  /**\n   * markPoint的位置（也是path的起点）\n   */\n  position: Point;\n  /**\n   * 标注引导线\n   */\n  itemLine?: IItemLine;\n\n  /**\n   * 标注内容\n   */\n  itemContent?: IItemContent;\n};\n"]}
+{"version":3,"sources":["../src/marker/type.ts"],"names":[],"mappings":";;;AAYA,IAAY,sBAUX;AAVD,WAAY,sBAAsB;IAChC,yCAAe,CAAA;IACf,2CAAiB,CAAA;IACjB,qCAAW,CAAA;IACX,2DAAiC,CAAA;IACjC,iEAAuC,CAAA;IACvC,6DAAmC,CAAA;IACnC,mEAAyC,CAAA;IACzC,uDAA6B,CAAA;IAC7B,6DAAmC,CAAA;AACrC,CAAC,EAVW,sBAAsB,GAAtB,8BAAsB,KAAtB,8BAAsB,QAUjC;AAED,IAAY,sBAUX;AAVD,WAAY,sBAAsB;IAChC,uCAAa,CAAA;IACb,yCAAe,CAAA;IACf,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,2CAAiB,CAAA;IACjB,mDAAyB,CAAA;IACzB,qDAA2B,CAAA;IAC3B,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;AAC/B,CAAC,EAVW,sBAAsB,GAAtB,8BAAsB,KAAtB,8BAAsB,QAUjC;AAED,IAAY,sBAOX;AAPD,WAAY,sBAAsB;IAChC,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,2CAAiB,CAAA;IACjB,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,uDAA6B,CAAA;AAC/B,CAAC,EAPW,sBAAsB,GAAtB,8BAAsB,KAAtB,8BAAsB,QAOjC","file":"type.js","sourcesContent":["import type {\n  IGroup,\n  IGroupGraphicAttribute,\n  IImageGraphicAttribute,\n  IPolygonAttribute,\n  IRichTextGraphicAttribute,\n  ISymbolGraphicAttribute\n} from '@visactor/vrender-core';\nimport type { SegmentAttributes, SymbolAttributes } from '../segment';\nimport type { TagAttributes } from '../tag';\nimport type { Point } from '../core/type';\n\nexport enum IMarkLineLabelPosition {\n  start = 'start',\n  middle = 'middle',\n  end = 'end',\n  insideStartTop = 'insideStartTop',\n  insideStartBottom = 'insideStartBottom',\n  insideMiddleTop = 'insideMiddleTop',\n  insideMiddleBottom = 'insideMiddleBottom',\n  insideEndTop = 'insideEndTop',\n  insideEndBottom = 'insideEndBottom'\n}\n\nexport enum IMarkAreaLabelPosition {\n  left = 'left',\n  right = 'right',\n  top = 'top',\n  bottom = 'bottom',\n  middle = 'middle',\n  insideLeft = 'insideLeft',\n  insideRight = 'insideRight',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom'\n}\n\nexport enum IMarkPointItemPosition {\n  top = 'top',\n  bottom = 'bottom',\n  middle = 'middle',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom',\n  insideMiddle = 'insideMiddle'\n}\n\nexport type IMarkBackgroundAttributes = {\n  /**\n   * 是否绘制背景层\n   */\n  visible: boolean;\n  /**\n   * TODO: 根据文字宽度进行背景 panel size自适应\n   */\n  autoHeight?: boolean;\n  /**\n   * TODO: 根据文高度度进行背景 panel size自适应\n   */\n  autoWidth?: boolean;\n} & Partial<SymbolAttributes>;\n\nexport type IMarkLabel = Omit<TagAttributes, 'x' | 'y' | 'panel'> & {\n  /**\n   * 标签的背景面板配置\n   */\n  panel?: IMarkBackgroundAttributes;\n};\n\nexport type IMarkRef = {\n  /**\n   * 自动旋转，沿着线的方向，默认 true\n   */\n  autoRotate?: boolean;\n  /**\n   * label 相对line平行方向上的偏移\n   */\n  refX?: number;\n  /**\n   * label 相对line正交方向上的偏移\n   */\n  refY?: number;\n  /**\n   * label 相对默认角度的偏移 （label跟随line的角度做自动旋转时，默认按照line的平行向量作为初始角度）\n   */\n  refAngle?: number;\n};\n\nexport type MarkerAttrs = IGroupGraphicAttribute & {\n  type?: 'line' | 'area' | 'point';\n  /**\n   * 是否支持交互\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * 是否显示marker组件\n   * @default true\n   */\n  visible?: boolean;\n  /**\n   * 是否将组件在绘制区域内进行剪切\n   * @default true\n   */\n  clipInRange?: boolean;\n  /**\n   * 组件绘制范围配置\n   */\n  limitRect?: {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n  };\n};\n\nexport type MarkLineAttrs = MarkerAttrs &\n  SegmentAttributes & {\n    type?: 'line';\n    /**\n     * 构成line的点: 如果是两个点，则为直线；多个点则为曲线\n     */\n    points: Point[] | Point[][];\n\n    /**\n     * 标签\n     */\n    label?: {\n      /**\n       * label 相对line的位置\n       */\n      position?: keyof typeof IMarkLineLabelPosition;\n      /**\n       * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n       * @default false\n       */\n      confine?: boolean;\n    } & IMarkRef &\n      IMarkLabel;\n  };\n\nexport type MarkAreaAttrs = MarkerAttrs & {\n  type?: 'area';\n  /**\n   * 构成area的点\n   */\n  points: Point[];\n  /**\n   * 标签\n   */\n  label?: {\n    position?: keyof typeof IMarkAreaLabelPosition;\n    /**\n     * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n     * @default false\n     */\n    confine?: boolean;\n  } & IMarkLabel;\n  /**\n   * area的样式\n   */\n  areaStyle?: IPolygonAttribute;\n};\n\nexport type IItemContent = IMarkRef & {\n  /**\n   * 标注类型\n   * Tips: 保留'richText'与之前的定义做兼容\n   */\n  type?: 'symbol' | 'text' | 'image' | 'richText' | 'custom';\n  position?: keyof typeof IMarkPointItemPosition;\n  /**\n   * x 方向偏移量\n   */\n  offsetX?: number;\n  /**\n   * y 方向偏移量\n   */\n  offsetY?: number;\n  /**\n   * type为symbol时, symbol的样式\n   */\n  symbolStyle?: ISymbolGraphicAttribute;\n  /**\n   * type为image时, image的样式\n   */\n  imageStyle?: IImageGraphicAttribute;\n  /**\n   * type为text时, text的配置\n   * 'text'类型的ItemContent新增三种子类型：'text','rich','html'。配置在textStyle.type上，继承自TagAttributes。\n   */\n  textStyle?: IMarkLabel;\n  /**\n   * type为rich text时, rich text的样式\n   */\n  richTextStyle?: IRichTextGraphicAttribute;\n  /**\n   * type为custom时，允许以callback的方式传入需要render的item\n   */\n  renderCustomCallback?: () => IGroup;\n  /**\n   * 当 mark 配置了 limitRect 之后，label 是否自动调整位置\n   * @default false\n   */\n  confine?: boolean;\n};\n\nexport type IItemLine = {\n  /** TODO：'type-opo' */\n  type?: 'type-s' | 'type-do' | 'type-po' | 'type-op';\n  visible?: boolean;\n  /**\n   * 垂直于引导线的装饰线，参考案例: https://observablehq.com/@mikelotis/edmonton-population-history-line-chart\n   */\n  decorativeLine?: {\n    visible?: boolean;\n    length?: number;\n  };\n} & Omit<SegmentAttributes, 'points'>;\n\nexport type MarkPointAttrs = Omit<MarkerAttrs, 'labelStyle'> & {\n  /**\n   * markPoint的位置（也是path的起点）\n   */\n  position: Point;\n  /**\n   * 标注引导线\n   */\n  itemLine?: IItemLine;\n\n  /**\n   * 标注内容\n   */\n  itemContent?: IItemContent;\n};\n"]}

package/cjs/util/limit-shape.d.ts

@@ -1,3 +1,7 @@
 import type { IGraphic } from '@visactor/vrender-core';
 import type { IBoundsLike } from '@visactor/vutils';
+export declare function computeOffsetForlimit(shape: IGraphic, bounds: IBoundsLike): {
+    dx: number;
+    dy: number;
+};
 export declare function limitShapeInBounds(shape: IGraphic, bounds: IBoundsLike): void;

package/cjs/util/limit-shape.js

@@ -1,14 +1,23 @@
 "use strict";
 
-function limitShapeInBounds(shape, bounds) {
-    const {x1: regionMinX, y1: regionMinY, x2: regionMaxX, y2: regionMaxY} = bounds, {x1: x1, y1: y1, x2: x2, y2: y2} = shape.AABBBounds, {dx: originDx = 0, dy: originDy = 0} = shape.attribute;
+function computeOffsetForlimit(shape, bounds) {
+    const {x1: regionMinX, y1: regionMinY, x2: regionMaxX, y2: regionMaxY} = bounds, {x1: x1, y1: y1, x2: x2, y2: y2} = shape.AABBBounds;
     let dx = 0, dy = 0;
-    x1 < regionMinX && (dx = regionMinX - x1), y1 < regionMinY && (dy = regionMinY - y1), 
+    return x1 < regionMinX && (dx = regionMinX - x1), y1 < regionMinY && (dy = regionMinY - y1), 
     x2 > regionMaxX && (dx = regionMaxX - x2), y2 > regionMaxY && (dy = regionMaxY - y2), 
+    {
+        dx: dx,
+        dy: dy
+    };
+}
+
+function limitShapeInBounds(shape, bounds) {
+    const {dx: dx, dy: dy} = computeOffsetForlimit(shape, bounds), {dx: originDx = 0, dy: originDy = 0} = shape.attribute;
     dx && shape.setAttribute("dx", dx + originDx), dy && shape.setAttribute("dy", dy + originDy);
 }
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.limitShapeInBounds = void 0, exports.limitShapeInBounds = limitShapeInBounds;
+}), exports.limitShapeInBounds = exports.computeOffsetForlimit = void 0, exports.computeOffsetForlimit = computeOffsetForlimit, 
+exports.limitShapeInBounds = limitShapeInBounds;
 //# sourceMappingURL=limit-shape.js.map

package/cjs/util/limit-shape.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/util/limit-shape.ts"],"names":[],"mappings":";;;AAGA,SAAgB,kBAAkB,CAAC,KAAe,EAAE,MAAmB;IACrE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;IAClF,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC;IAC5C,MAAM,EAAE,EAAE,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IAE/D,IAAI,EAAE,GAAG,CAAC,CAAC;IACX,IAAI,EAAE,GAAG,CAAC,CAAC;IACX,IAAI,EAAE,GAAG,UAAU,EAAE;QAEnB,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC;KACtB;IACD,IAAI,EAAE,GAAG,UAAU,EAAE;QAEnB,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC;KACtB;IAED,IAAI,EAAE,GAAG,UAAU,EAAE;QAEnB,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC;KACtB;IAED,IAAI,EAAE,GAAG,UAAU,EAAE;QAEnB,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC;KACtB;IACD,IAAI,EAAE,EAAE;QACN,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,GAAG,QAAQ,CAAC,CAAC;KACzC;IACD,IAAI,EAAE,EAAE;QACN,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,GAAG,QAAQ,CAAC,CAAC;KACzC;AACH,CAAC;AA/BD,gDA+BC","file":"limit-shape.js","sourcesContent":["import type { IGraphic } from '@visactor/vrender-core';\nimport type { IBoundsLike } from '@visactor/vutils';\n\nexport function limitShapeInBounds(shape: IGraphic, bounds: IBoundsLike) {\n  const { x1: regionMinX, y1: regionMinY, x2: regionMaxX, y2: regionMaxY } = bounds;\n  const { x1, y1, x2, y2 } = shape.AABBBounds;\n  const { dx: originDx = 0, dy: originDy = 0 } = shape.attribute;\n\n  let dx = 0;\n  let dy = 0;\n  if (x1 < regionMinX) {\n    // 超出左侧\n    dx = regionMinX - x1;\n  }\n  if (y1 < regionMinY) {\n    // 超出顶部\n    dy = regionMinY - y1;\n  }\n\n  if (x2 > regionMaxX) {\n    // 超出右侧\n    dx = regionMaxX - x2;\n  }\n\n  if (y2 > regionMaxY) {\n    // 整体超出顶部\n    dy = regionMaxY - y2;\n  }\n  if (dx) {\n    shape.setAttribute('dx', dx + originDx);\n  }\n  if (dy) {\n    shape.setAttribute('dy', dy + originDy);\n  }\n}\n"]}
+{"version":3,"sources":["../src/util/limit-shape.ts"],"names":[],"mappings":";;;AAGA,SAAgB,qBAAqB,CAAC,KAAe,EAAE,MAAmB;IACxE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;IAClF,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC;IAE5C,IAAI,EAAE,GAAG,CAAC,CAAC;IACX,IAAI,EAAE,GAAG,CAAC,CAAC;IACX,IAAI,EAAE,GAAG,UAAU,EAAE;QAEnB,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC;KACtB;IACD,IAAI,EAAE,GAAG,UAAU,EAAE;QAEnB,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC;KACtB;IAED,IAAI,EAAE,GAAG,UAAU,EAAE;QAEnB,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC;KACtB;IAED,IAAI,EAAE,GAAG,UAAU,EAAE;QAEnB,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC;KACtB;IACD,OAAO;QACL,EAAE;QACF,EAAE;KACH,CAAC;AACJ,CAAC;AA5BD,sDA4BC;AACD,SAAgB,kBAAkB,CAAC,KAAe,EAAE,MAAmB;IACrE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACxD,MAAM,EAAE,EAAE,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/D,IAAI,EAAE,EAAE;QACN,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,GAAG,QAAQ,CAAC,CAAC;KACzC;IACD,IAAI,EAAE,EAAE;QACN,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,GAAG,QAAQ,CAAC,CAAC;KACzC;AACH,CAAC;AATD,gDASC","file":"limit-shape.js","sourcesContent":["import type { IGraphic } from '@visactor/vrender-core';\nimport type { IBoundsLike } from '@visactor/vutils';\n\nexport function computeOffsetForlimit(shape: IGraphic, bounds: IBoundsLike) {\n  const { x1: regionMinX, y1: regionMinY, x2: regionMaxX, y2: regionMaxY } = bounds;\n  const { x1, y1, x2, y2 } = shape.AABBBounds;\n\n  let dx = 0;\n  let dy = 0;\n  if (x1 < regionMinX) {\n    // 超出左侧\n    dx = regionMinX - x1;\n  }\n  if (y1 < regionMinY) {\n    // 超出顶部\n    dy = regionMinY - y1;\n  }\n\n  if (x2 > regionMaxX) {\n    // 超出右侧\n    dx = regionMaxX - x2;\n  }\n\n  if (y2 > regionMaxY) {\n    // 整体超出顶部\n    dy = regionMaxY - y2;\n  }\n  return {\n    dx,\n    dy\n  };\n}\nexport function limitShapeInBounds(shape: IGraphic, bounds: IBoundsLike) {\n  const { dx, dy } = computeOffsetForlimit(shape, bounds);\n  const { dx: originDx = 0, dy: originDy = 0 } = shape.attribute;\n  if (dx) {\n    shape.setAttribute('dx', dx + originDx);\n  }\n  if (dy) {\n    shape.setAttribute('dy', dy + originDy);\n  }\n}\n"]}

package/es/axis/type.js

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

package/es/brush/type.js

@@ -4,4 +4,5 @@ export var IOperateType;
     IOperateType.drawStart = "drawStart", IOperateType.drawEnd = "drawEnd", IOperateType.drawing = "drawing", 
     IOperateType.moving = "moving", IOperateType.moveStart = "moveStart", IOperateType.moveEnd = "moveEnd", 
     IOperateType.brushClear = "brushClear";
-}(IOperateType || (IOperateType = {}));
+}(IOperateType || (IOperateType = {}));
+//# sourceMappingURL=type.js.map

package/es/data-zoom/data-zoom.d.ts

@@ -1,5 +1,5 @@
 import type { FederatedPointerEvent, IGroup } from '@visactor/vrender-core';
-import type { IPointLike } from '@visactor/vutils';
+import type { IBoundsLike, IPointLike } from '@visactor/vutils';
 import { AbstractComponent } from '../core/base';
 import type { TagAttributes } from '../tag';
 import { Tag } from '../tag';
@@ -154,7 +154,9 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     private _previewPointsY1;
     private _statePointToData;
     private _layoutAttrFromConfig;
+    setPropsFromAttrs(): void;
     constructor(attributes: DataZoomAttributes, options?: ComponentOptions);
+    setAttributes(params: Partial<Required<DataZoomAttributes>>, forceUpdateTag?: boolean): void;
     protected bindEvents(): void;
     protected dragMaskSize(): number;
     protected setStateAttr(start: number, end: number, shouldRender: boolean): void;
@@ -170,6 +172,8 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     protected backgroundDragZoom(startPos: IPointLike, endPos: IPointLike): void;
     protected moveZoomWithMiddle(middle: number): void;
     protected renderDragMask(): void;
+    protected isTextOverflow(componentBoundsLike: IBoundsLike, textBounds: IBoundsLike | null, layout: 'start' | 'end'): boolean;
+    protected setTextAttr(startTextBounds: IBoundsLike, endTextBounds: IBoundsLike): void;
     protected renderText(): void;
     protected getLayoutAttrFromConfig(): any;
     protected render(): void;

package/es/data-zoom/data-zoom.js

@@ -10,7 +10,7 @@ var __rest = this && this.__rest || function(s, e) {
 
 import { vglobal } from "@visactor/vrender-core";
 
-import { array, clamp, debounce, isFunction, isValid, merge, throttle } from "@visactor/vutils";
+import { Bounds, array, clamp, debounce, isFunction, isValid, merge, throttle } from "@visactor/vutils";
 
 import { AbstractComponent } from "../core/base";
 
@@ -30,6 +30,16 @@ const delayMap = {
 loadDataZoomComponent();
 
 export class DataZoom extends AbstractComponent {
+    setPropsFromAttrs() {
+        const {start: start, end: end, orient: orient, previewData: previewData, previewPointsX: previewPointsX, previewPointsY: previewPointsY, previewPointsX1: previewPointsX1, previewPointsY1: previewPointsY1} = this.attribute;
+        start && (this.state.start = start), end && (this.state.end = end);
+        const {width: width, height: height} = this.getLayoutAttrFromConfig();
+        this._spanCache = this.state.end - this.state.start, this._isHorizontal = "top" === orient || "bottom" === orient, 
+        this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", 
+        this._layoutCache.attSize = this._isHorizontal ? "width" : "height", previewData && (this._previewData = previewData), 
+        isFunction(previewPointsX) && (this._previewPointsX = previewPointsX), isFunction(previewPointsY) && (this._previewPointsY = previewPointsY), 
+        isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+    }
     constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, DataZoom.defaultAttributes, attributes)), 
         this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
@@ -76,14 +86,12 @@ export class DataZoom extends AbstractComponent {
                 tag: this._activeTag
             }));
         }), this.attribute.delayTime);
-        const {start: start, end: end, size: size, orient: orient, showDetail: showDetail, position: position, previewData: previewData, previewPointsX: previewPointsX, previewPointsY: previewPointsY, previewPointsX1: previewPointsX1, previewPointsY1: previewPointsY1, updateStateCallback: updateStateCallback} = this.attribute, {width: width, height: height} = size;
-        start && (this.state.start = start), end && (this.state.end = end), this._spanCache = this.state.end - this.state.start, 
-        this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, 
-        this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", 
+        const {position: position, showDetail: showDetail} = attributes;
         this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
-        previewData && (this._previewData = previewData), isFunction(previewPointsX) && (this._previewPointsX = previewPointsX), 
-        isFunction(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), 
-        isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+        this.setPropsFromAttrs();
+    }
+    setAttributes(params, forceUpdateTag) {
+        super.setAttributes(params, forceUpdateTag), this.setPropsFromAttrs();
     }
     bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
@@ -169,55 +177,79 @@ export class DataZoom extends AbstractComponent {
             height: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0
         }, dragMaskStyle), "rect");
     }
-    renderText() {
-        const {startTextStyle: startTextStyle, endTextStyle: endTextStyle} = this.attribute, {formatMethod: startTextFormat} = startTextStyle, restStartStyle = __rest(startTextStyle, [ "formatMethod" ]), {formatMethod: endTextFormat} = endTextStyle, restEndTextStyle = __rest(endTextStyle, [ "formatMethod" ]), {start: start, end: end} = this.state;
+    isTextOverflow(componentBoundsLike, textBounds, layout) {
+        if (!textBounds) return !1;
+        if (this._isHorizontal) {
+            if ("start" === layout) {
+                if (textBounds.x1 < componentBoundsLike.x1) return !0;
+            } else if (textBounds.x2 > componentBoundsLike.x2) return !0;
+        } else if ("start" === layout) {
+            if (textBounds.y1 < componentBoundsLike.y1) return !0;
+        } else if (textBounds.y2 > componentBoundsLike.y2) return !0;
+        return !1;
+    }
+    setTextAttr(startTextBounds, endTextBounds) {
+        const {startTextStyle: startTextStyle, endTextStyle: endTextStyle} = this.attribute, {formatMethod: startTextFormat} = startTextStyle, restStartTextStyle = __rest(startTextStyle, [ "formatMethod" ]), {formatMethod: endTextFormat} = endTextStyle, restEndTextStyle = __rest(endTextStyle, [ "formatMethod" ]), {start: start, end: end} = this.state;
         this._startValue = this._statePointToData(start), this._endValue = this._statePointToData(end);
-        const {position: position, width: width, height: height} = this.getLayoutAttrFromConfig();
-        this._isHorizontal ? (this._startText = this.maybeAddLabel(this._container, merge({}, restStartStyle, {
-            text: startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+        const {position: position, width: width, height: height} = this.getLayoutAttrFromConfig(), startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue, endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue, componentBoundsLike = {
+            x1: position.x,
+            y1: position.y,
+            x2: position.x + width,
+            y2: position.y + height
+        };
+        let startTextPosition, endTextPosition, startTextAlignStyle, endTextAlignStyle;
+        this._isHorizontal ? (startTextPosition = {
             x: position.x + start * width,
-            y: position.y + height / 2,
-            visible: this._showText,
-            pickable: !1,
-            childrenPickable: !1,
-            textStyle: {
-                textAlign: "right",
-                textBaseline: "middle"
-            }
-        }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, merge({}, restEndTextStyle, {
-            text: endTextFormat ? endTextFormat(this._endValue) : this._endValue,
+            y: position.y + height / 2
+        }, endTextPosition = {
             x: position.x + end * width,
-            y: position.y + height / 2,
-            visible: this._showText,
-            pickable: !1,
-            childrenPickable: !1,
-            textStyle: {
-                textAlign: "left",
-                textBaseline: "middle"
-            }
-        }), `data-zoom-end-text-${position}`)) : (this._startText = this.maybeAddLabel(this._container, merge({}, restStartStyle, {
-            text: startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+            y: position.y + height / 2
+        }, startTextAlignStyle = {
+            textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "left" : "right",
+            textBaseline: "middle"
+        }, endTextAlignStyle = {
+            textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "right" : "left",
+            textBaseline: "middle"
+        }) : (startTextPosition = {
             x: position.x + width / 2,
-            y: position.y + start * height,
+            y: position.y + start * height
+        }, endTextPosition = {
+            x: position.x + width / 2,
+            y: position.y + end * height
+        }, startTextAlignStyle = {
+            textAlign: "center",
+            textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "top" : "bottom"
+        }, endTextAlignStyle = {
+            textAlign: "center",
+            textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "bottom" : "top"
+        }), this._startText = this.maybeAddLabel(this._container, merge({}, restStartTextStyle, {
+            text: startTextValue,
+            x: startTextPosition.x,
+            y: startTextPosition.y,
             visible: this._showText,
             pickable: !1,
             childrenPickable: !1,
-            textStyle: {
-                textAlign: "center",
-                textBaseline: "bottom"
-            }
+            textStyle: startTextAlignStyle
         }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, merge({}, restEndTextStyle, {
-            text: endTextFormat ? endTextFormat(this._endValue) : this._endValue,
-            x: position.x + width / 2,
-            y: position.y + end * height,
+            text: endTextValue,
+            x: endTextPosition.x,
+            y: endTextPosition.y,
             visible: this._showText,
             pickable: !1,
             childrenPickable: !1,
-            textStyle: {
-                textAlign: "center",
-                textBaseline: "top"
-            }
-        }), `data-zoom-end-text-${position}`));
+            textStyle: endTextAlignStyle
+        }), `data-zoom-end-text-${position}`);
+    }
+    renderText() {
+        let startTextBounds = null, endTextBounds = null;
+        this.setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, 
+        endTextBounds = this._endText.AABBBounds, this.setTextAttr(startTextBounds, endTextBounds), 
+        startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds;
+        const {x1: x1, x2: x2, y1: y1, y2: y2} = startTextBounds, {dx: startTextDx = 0, dy: startTextDy = 0} = this.attribute.startTextStyle;
+        if ((new Bounds).set(x1, y1, x2, y2).intersects(endTextBounds)) {
+            const direction = "bottom" === this.attribute.orient || "right" === this.attribute.orient ? -1 : 1;
+            this._isHorizontal ? this._startText.setAttribute("dy", startTextDy + direction * Math.abs(endTextBounds.y1 - endTextBounds.y2)) : this._startText.setAttribute("dx", startTextDx + direction * Math.abs(endTextBounds.x1 - endTextBounds.x2));
+        } else this._isHorizontal ? this._startText.setAttribute("dy", startTextDy) : this._startText.setAttribute("dx", startTextDx);
     }
     getLayoutAttrFromConfig() {
         var _a, _b, _c, _d;
@@ -249,59 +281,72 @@ export class DataZoom extends AbstractComponent {
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         this._layoutAttrFromConfig = null;
-        const {orient: orient, backgroundStyle: backgroundStyle, backgroundChartStyle: backgroundChartStyle = {}, selectedBackgroundStyle: selectedBackgroundStyle = {}, selectedBackgroundChartStyle: selectedBackgroundChartStyle = {}, middleHandlerStyle: middleHandlerStyle = {}, startHandlerStyle: startHandlerStyle = {}, endHandlerStyle: endHandlerStyle = {}, brushSelect: brushSelect} = this.attribute, {start: start, end: end} = this.state, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig(), startHandlerMinSize = null !== (_a = startHandlerStyle.triggerMinSize) && void 0 !== _a ? _a : 40, endHandlerMinSize = null !== (_b = endHandlerStyle.triggerMinSize) && void 0 !== _b ? _b : 40, group = this.createOrUpdateChild("dataZoom-container", {}, "group");
-        if (this._container = group, this._background = group.createOrUpdateChild("background", Object.assign({
+        const {orient: orient, backgroundStyle: backgroundStyle, backgroundChartStyle: backgroundChartStyle = {}, selectedBackgroundStyle: selectedBackgroundStyle = {}, selectedBackgroundChartStyle: selectedBackgroundChartStyle = {}, middleHandlerStyle: middleHandlerStyle = {}, startHandlerStyle: startHandlerStyle = {}, endHandlerStyle: endHandlerStyle = {}, brushSelect: brushSelect, zoomLock: zoomLock} = this.attribute, {start: start, end: end} = this.state, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig(), startHandlerMinSize = null !== (_a = startHandlerStyle.triggerMinSize) && void 0 !== _a ? _a : 40, endHandlerMinSize = null !== (_b = endHandlerStyle.triggerMinSize) && void 0 !== _b ? _b : 40, group = this.createOrUpdateChild("dataZoom-container", {}, "group");
+        if (this._container = group, this._background = group.createOrUpdateChild("background", Object.assign(Object.assign({
             x: position.x,
             y: position.y,
             width: width,
             height: height,
             cursor: brushSelect ? "crosshair" : "auto"
-        }, backgroundStyle), "rect"), (null === (_c = backgroundChartStyle.line) || void 0 === _c ? void 0 : _c.visible) && this.setPreviewAttributes("line", group), 
+        }, backgroundStyle), {
+            pickable: !zoomLock
+        }), "rect"), (null === (_c = backgroundChartStyle.line) || void 0 === _c ? void 0 : _c.visible) && this.setPreviewAttributes("line", group), 
         (null === (_d = backgroundChartStyle.area) || void 0 === _d ? void 0 : _d.visible) && this.setPreviewAttributes("area", group), 
-        brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign({
+        brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
             x: position.x + start * width,
             y: position.y,
             width: (end - start) * width,
             height: height,
             cursor: brushSelect ? "crosshair" : "move"
-        }, selectedBackgroundStyle), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign({
+        }, selectedBackgroundStyle), {
+            pickable: !zoomLock
+        }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
             x: position.x,
             y: position.y + start * height,
             width: width,
             height: (end - start) * height,
             cursor: brushSelect ? "crosshair" : "move"
-        }, selectedBackgroundStyle), "rect"), (null === (_e = selectedBackgroundChartStyle.line) || void 0 === _e ? void 0 : _e.visible) && this.setSelectedPreviewAttributes("line", group), 
+        }, selectedBackgroundStyle), {
+            pickable: !zoomLock
+        }), "rect"), (null === (_e = selectedBackgroundChartStyle.line) || void 0 === _e ? void 0 : _e.visible) && this.setSelectedPreviewAttributes("line", group), 
         (null === (_f = selectedBackgroundChartStyle.area) || void 0 === _f ? void 0 : _f.visible) && this.setSelectedPreviewAttributes("area", group), 
-        this._showText && this.renderText(), this._isHorizontal) {
+        this._isHorizontal) {
             if (middleHandlerStyle.visible) {
                 const middleHandlerBackgroundSize = (null === (_g = middleHandlerStyle.background) || void 0 === _g ? void 0 : _g.size) || 10;
-                this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign({
+                this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
                     x: position.x + start * width,
                     y: position.y - middleHandlerBackgroundSize,
                     width: (end - start) * width,
                     height: middleHandlerBackgroundSize
-                }, null === (_h = middleHandlerStyle.background) || void 0 === _h ? void 0 : _h.style), "rect"), 
-                this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign({
+                }, null === (_h = middleHandlerStyle.background) || void 0 === _h ? void 0 : _h.style), {
+                    pickable: !zoomLock
+                }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
                     x: position.x + (start + end) / 2 * width,
                     y: position.y - middleHandlerBackgroundSize / 2,
                     strokeBoundsBuffer: 0,
                     angle: 0,
                     symbolType: null !== (_k = null === (_j = middleHandlerStyle.icon) || void 0 === _j ? void 0 : _j.symbolType) && void 0 !== _k ? _k : "square"
-                }, middleHandlerStyle.icon), "symbol");
+                }, middleHandlerStyle.icon), {
+                    pickable: !zoomLock
+                }), "symbol");
             }
-            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign({
+            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
                 x: position.x + start * width,
                 y: position.y + height / 2,
                 size: height,
                 symbolType: null !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign({
+            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
+                pickable: !zoomLock
+            }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
                 x: position.x + end * width,
                 y: position.y + height / 2,
                 size: height,
                 symbolType: null !== (_m = endHandlerStyle.symbolType) && void 0 !== _m ? _m : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), "symbol");
+            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
+                pickable: !zoomLock
+            }), "symbol");
             const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize), startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize), endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize), endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
-            this._startHandlerMask = group.createOrUpdateChild("startHandlerMask", Object.assign({
+            this._startHandlerMask = group.createOrUpdateChild("startHandlerMask", Object.assign(Object.assign({
                 x: position.x + start * width - startHandlerWidth / 2,
                 y: position.y + height / 2 - startHandlerHeight / 2,
                 width: startHandlerWidth,
@@ -309,7 +354,9 @@ export class DataZoom extends AbstractComponent {
                 fill: "white",
                 fillOpacity: 0,
                 zIndex: 999
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign({
+            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+                pickable: !zoomLock
+            }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
                 x: position.x + end * width - endHandlerWidth / 2,
                 y: position.y + height / 2 - endHandlerHeight / 2,
                 width: endHandlerWidth,
@@ -317,37 +364,46 @@ export class DataZoom extends AbstractComponent {
                 fill: "white",
                 fillOpacity: 0,
                 zIndex: 999
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), "rect");
+            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+                pickable: !zoomLock
+            }), "rect");
         } else {
             if (middleHandlerStyle.visible) {
                 const middleHandlerBackgroundSize = (null === (_o = middleHandlerStyle.background) || void 0 === _o ? void 0 : _o.size) || 10;
-                this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign({
+                this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
                     x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
                     y: position.y + start * height,
                     width: middleHandlerBackgroundSize,
                     height: (end - start) * height
-                }, null === (_p = middleHandlerStyle.background) || void 0 === _p ? void 0 : _p.style), "rect"), 
-                this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign({
+                }, null === (_p = middleHandlerStyle.background) || void 0 === _p ? void 0 : _p.style), {
+                    pickable: !zoomLock
+                }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
                     x: "left" === orient ? position.x - middleHandlerBackgroundSize / 2 : position.x + width + middleHandlerBackgroundSize / 2,
                     y: position.y + (start + end) / 2 * height,
                     angle: Math.PI / 180 * 90,
                     symbolType: null !== (_r = null === (_q = middleHandlerStyle.icon) || void 0 === _q ? void 0 : _q.symbolType) && void 0 !== _r ? _r : "square",
                     strokeBoundsBuffer: 0
-                }, middleHandlerStyle.icon), "symbol");
+                }, middleHandlerStyle.icon), {
+                    pickable: !zoomLock
+                }), "symbol");
             }
-            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign({
+            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
                 x: position.x + width / 2,
                 y: position.y + start * height,
                 size: width,
                 symbolType: null !== (_s = startHandlerStyle.symbolType) && void 0 !== _s ? _s : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign({
+            }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
+                pickable: !zoomLock
+            }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
                 x: position.x + width / 2,
                 y: position.y + end * height,
                 size: width,
                 symbolType: null !== (_t = endHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), "symbol");
+            }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
+                pickable: !zoomLock
+            }), "symbol");
             const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize), startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize), endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize), endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
-            this._startHandlerMask = group.createOrUpdateChild("startHandlerMask", Object.assign({
+            this._startHandlerMask = group.createOrUpdateChild("startHandlerMask", Object.assign(Object.assign({
                 x: position.x + width / 2 + startHandlerWidth / 2,
                 y: position.y + start * height - startHandlerHeight / 2,
                 width: endHandlerHeight,
@@ -355,7 +411,9 @@ export class DataZoom extends AbstractComponent {
                 fill: "white",
                 fillOpacity: 0,
                 zIndex: 999
-            }, DEFAULT_HANDLER_ATTR_MAP.vertical), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign({
+            }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
+                pickable: !zoomLock
+            }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
                 x: position.x + width / 2 + endHandlerWidth / 2,
                 y: position.y + end * height - endHandlerHeight / 2,
                 width: endHandlerHeight,
@@ -363,8 +421,11 @@ export class DataZoom extends AbstractComponent {
                 fill: "white",
                 fillOpacity: 0,
                 zIndex: 999
-            }, DEFAULT_HANDLER_ATTR_MAP.vertical), "rect");
+            }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
+                pickable: !zoomLock
+            }), "rect");
         }
+        this._showText && this.renderText();
     }
     computeBasePoints() {
         const {orient: orient} = this.attribute, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig();