This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch feat/stock-marker in repository https://gitbox.apache.org/repos/asf/echarts.git
commit ec7d082293f7979b0c137a4fbcadf449c2e4999f Author: Ovilia <[email protected]> AuthorDate: Thu Jul 11 18:28:19 2024 +0800 feat(marker): relativeTo --- src/component/marker/MarkPointModel.ts | 1 + src/component/marker/MarkPointView.ts | 22 ++++++++++++++++++++-- src/component/marker/MarkerModel.ts | 1 + src/component/marker/markerHelper.ts | 2 +- src/coord/CoordinateSystem.ts | 6 +++++- src/coord/polar/Polar.ts | 9 ++++++++- 6 files changed, 36 insertions(+), 5 deletions(-) diff --git a/src/component/marker/MarkPointModel.ts b/src/component/marker/MarkPointModel.ts index 1b672317c..5fc5c59f4 100644 --- a/src/component/marker/MarkPointModel.ts +++ b/src/component/marker/MarkPointModel.ts @@ -43,6 +43,7 @@ export interface MarkPointDataItemOption extends SymbolOptionMixin<CallbackDataParams>, MarkerPositionOption { name: string + relativeTo: 'screen' | 'coordinate' } export interface MarkPointOption extends MarkerOption, diff --git a/src/component/marker/MarkPointView.ts b/src/component/marker/MarkPointView.ts index 3e4499c0d..054c0a5d9 100644 --- a/src/component/marker/MarkPointView.ts +++ b/src/component/marker/MarkPointView.ts @@ -41,11 +41,29 @@ function updateMarkerLayout( api: ExtensionAPI ) { const coordSys = seriesModel.coordinateSystem; + const apiWidth = api.getWidth(); + const apiHeight = api.getHeight(); + const coordRect = coordSys.getArea && coordSys.getArea(); + console.log(coordSys) mpData.each(function (idx: number) { const itemModel = mpData.getItemModel<MarkPointDataItemOption>(idx); + const relativeTo = itemModel.get('relativeTo'); + const width = relativeTo === 'coordinate' + ? coordRect ? coordRect.width : 0 + : apiWidth; + const height = relativeTo === 'coordinate' + ? coordRect ? coordRect.height : 0 + : apiHeight; + const left = relativeTo === 'coordinate' + ? coordRect ? coordRect.x : 0 + : 0; + const top = relativeTo === 'coordinate' + ? coordRect ? coordRect.y : 0 + : 0; + let point; - const xPx = numberUtil.parsePercent(itemModel.get('x'), api.getWidth()); - const yPx = numberUtil.parsePercent(itemModel.get('y'), api.getHeight()); + const xPx = numberUtil.parsePercent(itemModel.get('x'), width) + left; + const yPx = numberUtil.parsePercent(itemModel.get('y'), height) + top; if (!isNaN(xPx) && !isNaN(yPx)) { point = [xPx, yPx]; } diff --git a/src/component/marker/MarkerModel.ts b/src/component/marker/MarkerModel.ts index 28d29a576..9699278c3 100644 --- a/src/component/marker/MarkerModel.ts +++ b/src/component/marker/MarkerModel.ts @@ -53,6 +53,7 @@ export interface MarkerPositionOption { // Absolute position, px or percent string x?: number | string y?: number | string + relativeTo?: 'screen' | 'coordinate' /** * Coord on any coordinate system diff --git a/src/component/marker/markerHelper.ts b/src/component/marker/markerHelper.ts index f5e5b7ddf..61acfd4d6 100644 --- a/src/component/marker/markerHelper.ts +++ b/src/component/marker/markerHelper.ts @@ -144,7 +144,7 @@ export function dataTransform( } } // x y is provided - if (item.coord == null || !isArray(dims)) { + if ((item.coord == null || !isArray(dims)) && item.relativeTo === 'screen') { item.coord = []; } else { diff --git a/src/coord/CoordinateSystem.ts b/src/coord/CoordinateSystem.ts index 8c778ab83..ea17e8a9a 100644 --- a/src/coord/CoordinateSystem.ts +++ b/src/coord/CoordinateSystem.ts @@ -174,7 +174,11 @@ export interface CoordinateSystemHostModel extends ComponentModel { * It is used to clip the graphic elements with the contain methods. */ export interface CoordinateSystemClipArea { - contain(x: number, y: number): boolean + x: number; + y: number; + width: number; + height: number; + contain(x: number, y: number): boolean; } export function isCoordinateSystemType<T extends CoordinateSystem, S = T['type']>( diff --git a/src/coord/polar/Polar.ts b/src/coord/polar/Polar.ts index e7b9db6cc..9ff3fb0e4 100644 --- a/src/coord/polar/Polar.ts +++ b/src/coord/polar/Polar.ts @@ -25,6 +25,7 @@ import GlobalModel from '../../model/Global'; import { ParsedModelFinder, ParsedModelFinderKnown } from '../../util/model'; import { ScaleDataValue } from '../../util/types'; import ExtensionAPI from '../../core/ExtensionAPI'; +import { BoundingRect } from 'zrender'; export const polarDimensions = ['radius', 'angle']; @@ -234,7 +235,13 @@ class Polar implements CoordinateSystem, CoordinateSystemMaster { const r0 = this.r0; return d2 <= r * r && d2 >= r0 * r0; - } + }, + + // As the bounding box + x: this.cx - radiusExtent[1], + y: this.cy - radiusExtent[1], + width: radiusExtent[1] * 2, + height: radiusExtent[1] * 2 }; } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
