From 3ad256a595e3c1f33cd9e08def87b6d5eb3c6996 Mon Sep 17 00:00:00 2001 From: Wojciech Krakowiak Date: Mon, 12 Aug 2024 15:09:12 +0200 Subject: [PATCH 1/4] fix(visualMap): handle label collides with horizontal size visualMap --- src/component/visualMap/ContinuousView.ts | 7 +- test/visualMap-continuous.html | 118 ++++++++++++++++++++++ test/visualMap-layout.html | 90 +++++++++++++++++ 3 files changed, 213 insertions(+), 2 deletions(-) diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts index d4aa842a8a..604a94214c 100644 --- a/src/component/visualMap/ContinuousView.ts +++ b/src/component/visualMap/ContinuousView.ts @@ -32,7 +32,7 @@ import GlobalModel from '../../model/Global'; import ExtensionAPI from '../../core/ExtensionAPI'; import Element, { ElementEvent } from 'zrender/src/Element'; import { TextVerticalAlign, TextAlign } from 'zrender/src/core/types'; -import { ColorString, Payload } from '../../util/types'; +import { ColorString, Payload, VerticalAlign } from '../../util/types'; import { parsePercent } from 'zrender/src/contain/text'; import { setAsHighDownDispatcher } from '../../util/states'; import { createSymbol } from '../../util/symbol'; @@ -622,7 +622,10 @@ class ContinuousView extends VisualMapView { x: textPoint[0], y: textPoint[1], text: visualMapModel.formatValueText(this._dataInterval[handleIndex]), - verticalAlign: 'middle', + verticalAlign: this._orient === 'horizontal' ? this._applyTransform( + 'left', + handleThumb + ) as VerticalAlign : 'middle', align: this._orient === 'vertical' ? this._applyTransform( 'left', shapes.mainGroup diff --git a/test/visualMap-continuous.html b/test/visualMap-continuous.html index 848b510e8a..ead63b9e57 100644 --- a/test/visualMap-continuous.html +++ b/test/visualMap-continuous.html @@ -48,6 +48,8 @@
Stacked Bar (and inversed)
+
Color and Size (various positions)
+
+ + \ No newline at end of file diff --git a/test/visualMap-layout.html b/test/visualMap-layout.html index eab9325fbc..40c156dcaf 100644 --- a/test/visualMap-layout.html +++ b/test/visualMap-layout.html @@ -439,6 +439,96 @@ }); + // ------------------------------------------- + + + makeChart({ + show: true, + splitNumber: 7, + text: ['高2', '低'], + backgroundColor: '#eee', + inverse: true, + padding: [10, 30, 5, 40], + calculable: true, + inRange: { + symbolSize: [10, 20] + } + }); + makeChart({ + left: 200, + show: true, + inverse: true, + text: ['高', '低'], + calculable: true, + backgroundColor: '#eee', + inRange: { + symbolSize: [10, 20] + } + }); + makeChart({ + right: 0, + splitNumber: 5, + text: ['高', '低'], + calculable: true, + dimension: 3, + backgroundColor: '#eee', + inRange: { + symbolSize: [10, 20] + } + }); + makeChart({ + left: 0, + top: 0, + orient: 'horizontal', + text: ['高', '低'], + splitNumber: 6, + calculable: true, + inverse: true, + dimension: 3, + backgroundColor: '#eee', + inRange: { + symbolSize: [10, 20] + } + }); + makeChart({ + right: 0, + top: 20, + orient: 'horizontal', + text: ['高', '低'], + splitNumber: 5, + align: 'bottom', + calculable: true, + dimension: 3, + backgroundColor: '#eee', + inRange: { + symbolSize: [10, 20] + } + }); + makeChart({ + top: 40, + splitNumber: 6, + orient: 'horizontal', + text: ['高', '低'], + calculable: true, + dimension: 3, + backgroundColor: '#eee', + inRange: { + symbolSize: [10, 20] + } + }); + makeChart({ + left: 'center', + bottom: 0, + orient: 'horizontal', + splitNumber: 6, + text: ['高', '低'], + calculable: true, + dimension: 3, + backgroundColor: '#eee', + inRange: { + symbolSize: [10, 20] + } + }); From 9706b507fef97e2f64f0fe94ef5c2443320f990e Mon Sep 17 00:00:00 2001 From: Wojciech Krakowiak Date: Tue, 13 Aug 2024 11:59:23 +0200 Subject: [PATCH 2/4] fix: adjust only label position below the maximum range end --- src/component/visualMap/ContinuousView.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts index 604a94214c..63da700f4c 100644 --- a/src/component/visualMap/ContinuousView.ts +++ b/src/component/visualMap/ContinuousView.ts @@ -601,6 +601,7 @@ class ContinuousView extends VisualMapView { const handleLabels = shapes.handleLabels; const itemSize = visualMapModel.itemSize; const dataExtent = visualMapModel.getExtent(); + const align = this._applyTransform('left', shapes.mainGroup); each([0, 1], function (handleIndex) { const handleThumb = handleThumbs[handleIndex]; @@ -618,14 +619,22 @@ class ContinuousView extends VisualMapView { shapes.handleLabelPoints[handleIndex], graphic.getTransform(handleThumb, this.group) ); + + if (this._orient === 'horizontal') { + // If visualMap controls symbol size, an additional offset needs to be added to labels to avoid collision at minimum size. + // Offset reaches value of 0 at "maximum" position, so maximum position is not altered at all. + const minimumOffset = align === 'left' || align === "top" + ? (itemSize[0] - symbolSize) / 2 + : (itemSize[0] - symbolSize) / -2; + + textPoint[1] += minimumOffset; + } + handleLabels[handleIndex].setStyle({ x: textPoint[0], y: textPoint[1], text: visualMapModel.formatValueText(this._dataInterval[handleIndex]), - verticalAlign: this._orient === 'horizontal' ? this._applyTransform( - 'left', - handleThumb - ) as VerticalAlign : 'middle', + verticalAlign: 'middle', align: this._orient === 'vertical' ? this._applyTransform( 'left', shapes.mainGroup From cce64807e10d77e1f7e23d4e1e92d145270484ed Mon Sep 17 00:00:00 2001 From: Wojciech Krakowiak Date: Tue, 13 Aug 2024 12:04:42 +0200 Subject: [PATCH 3/4] test: fix visualMap-continuous test so it renders all cases --- test/visualMap-continuous.html | 1291 ++++++++++++++++---------------- 1 file changed, 627 insertions(+), 664 deletions(-) diff --git a/test/visualMap-continuous.html b/test/visualMap-continuous.html index ead63b9e57..075f251dd8 100644 --- a/test/visualMap-continuous.html +++ b/test/visualMap-continuous.html @@ -36,711 +36,674 @@ font-size: 20px; } .main { - height: 80%; + height: 600px; } -
Color Hue
-
-
Color List
-
-
Map
-
-
Stacked Bar (and inversed)
-
-
Color and Size (various positions)
-
- - - - - - - - \ No newline at end of file From dd131a0d21b062c153fc138ead6d915ff9d21c05 Mon Sep 17 00:00:00 2001 From: Wojciech Krakowiak Date: Tue, 15 Oct 2024 17:18:07 +0200 Subject: [PATCH 4/4] chore: fix formatting issues --- src/component/visualMap/ContinuousView.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts index 63da700f4c..c3ecbc5753 100644 --- a/src/component/visualMap/ContinuousView.ts +++ b/src/component/visualMap/ContinuousView.ts @@ -623,10 +623,10 @@ class ContinuousView extends VisualMapView { if (this._orient === 'horizontal') { // If visualMap controls symbol size, an additional offset needs to be added to labels to avoid collision at minimum size. // Offset reaches value of 0 at "maximum" position, so maximum position is not altered at all. - const minimumOffset = align === 'left' || align === "top" + const minimumOffset = align === 'left' || align === 'top' ? (itemSize[0] - symbolSize) / 2 : (itemSize[0] - symbolSize) / -2; - + textPoint[1] += minimumOffset; }