From f037de15b1459e575dfb3281cad6d024109022e9 Mon Sep 17 00:00:00 2001 From: A0nameless0man <1395943920@qq.com> Date: Wed, 6 Nov 2024 08:53:28 +0800 Subject: [PATCH 1/8] feat(label): enforce labelLayout for all state --- src/label/LabelManager.ts | 68 +++++++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 27 deletions(-) diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts index d20c75f16d..9419808ac0 100644 --- a/src/label/LabelManager.ts +++ b/src/label/LabelManager.ts @@ -18,6 +18,7 @@ */ // TODO: move labels out of viewport. +import { DISPLAY_STATES } from '../util/states'; import { Text as ZRText, @@ -359,23 +360,19 @@ class LabelManager { let needsUpdateLabelLine = false; if (layoutOption.x != null) { // TODO width of chart view. - label.x = parsePercent(layoutOption.x, width); label.setStyle('x', 0); // Ignore movement in style. TODO: origin. needsUpdateLabelLine = true; } else { - label.x = defaultLabelAttr.x; label.setStyle('x', defaultLabelAttr.style.x); } if (layoutOption.y != null) { // TODO height of chart view. - label.y = parsePercent(layoutOption.y, height); label.setStyle('y', 0); // Ignore movement in style. needsUpdateLabelLine = true; } else { - label.y = defaultLabelAttr.y; label.setStyle('y', defaultLabelAttr.style.y); } @@ -390,36 +387,53 @@ class LabelManager { const labelLayoutStore = labelLayoutInnerStore(label); labelLayoutStore.needsUpdateLabelLine = needsUpdateLabelLine; + for (const state of DISPLAY_STATES) { + const labelState = state === 'normal' ? label : label.ensureState(state); + if (layoutOption.x != null) { + labelState.x = parsePercent(layoutOption.x, width); + } + else { + labelState.x = defaultLabelAttr.x; + } - label.rotation = layoutOption.rotate != null - ? layoutOption.rotate * degreeToRadian : defaultLabelAttr.rotation; + if (layoutOption.y != null) { + labelState.y = parsePercent(layoutOption.y, height); + } + else { + labelState.y = defaultLabelAttr.y; + } - label.scaleX = defaultLabelAttr.scaleX; - label.scaleY = defaultLabelAttr.scaleY; - for (let k = 0; k < LABEL_OPTION_TO_STYLE_KEYS.length; k++) { - const key = LABEL_OPTION_TO_STYLE_KEYS[k]; - label.setStyle(key, layoutOption[key] != null ? layoutOption[key] : defaultLabelAttr.style[key]); - } + labelState.rotation = layoutOption.rotate != null + ? layoutOption.rotate * degreeToRadian : defaultLabelAttr.rotation; + labelState.scaleX = defaultLabelAttr.scaleX; + labelState.scaleY = defaultLabelAttr.scaleY; - if (layoutOption.draggable) { - label.draggable = true; - label.cursor = 'move'; - if (hostEl) { - let hostModel: Model = - labelItem.seriesModel as SeriesModel; - if (labelItem.dataIndex != null) { - const data = labelItem.seriesModel.getData(labelItem.dataType); - hostModel = data.getItemModel(labelItem.dataIndex); + for (let k = 0; k < LABEL_OPTION_TO_STYLE_KEYS.length; k++) { + const key = LABEL_OPTION_TO_STYLE_KEYS[k]; + label.setStyle(key, layoutOption[key] != null ? layoutOption[key] : defaultLabelAttr.style[key]); + } + + + if (layoutOption.draggable) { + label.draggable = true; + label.cursor = 'move'; + if (hostEl) { + let hostModel: Model = + labelItem.seriesModel as SeriesModel; + if (labelItem.dataIndex != null) { + const data = labelItem.seriesModel.getData(labelItem.dataType); + hostModel = data.getItemModel(labelItem.dataIndex); + } + label.on('drag', createDragHandler(hostEl, hostModel.getModel('labelLine'))); } - label.on('drag', createDragHandler(hostEl, hostModel.getModel('labelLine'))); } - } - else { - // TODO Other drag functions? - label.off('drag'); - label.cursor = defaultLabelAttr.cursor; + else { + // TODO Other drag functions? + label.off('drag'); + label.cursor = defaultLabelAttr.cursor; + } } } } From cd4e1aa9551e4461f53641573178a5fa2918d6f6 Mon Sep 17 00:00:00 2001 From: A0nameless0man <1395943920@qq.com> Date: Wed, 6 Nov 2024 10:10:28 +0800 Subject: [PATCH 2/8] feat(label): enforce align too --- src/label/LabelManager.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts index 9419808ac0..5c513b73bc 100644 --- a/src/label/LabelManager.ts +++ b/src/label/LabelManager.ts @@ -403,6 +403,15 @@ class LabelManager { labelState.y = defaultLabelAttr.y; } + if (layoutOption.align != null) { + labelState.style = labelState.style || {}; + labelState.style.align = layoutOption.align; + } + + if (layoutOption.verticalAlign != null) { + labelState.style = labelState.style || {}; + labelState.style.verticalAlign = layoutOption.verticalAlign; + } labelState.rotation = layoutOption.rotate != null ? layoutOption.rotate * degreeToRadian : defaultLabelAttr.rotation; From d1b0d10425501a0786157c39700118801bae16b1 Mon Sep 17 00:00:00 2001 From: A0nameless0man <1395943920@qq.com> Date: Wed, 6 Nov 2024 10:14:57 +0800 Subject: [PATCH 3/8] test(sunburst): add test for label layout --- test/sunburst-label.html | 89 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/test/sunburst-label.html b/test/sunburst-label.html index 7895a98f84..a7afe152f0 100644 --- a/test/sunburst-label.html +++ b/test/sunburst-label.html @@ -40,6 +40,7 @@
+
@@ -237,6 +238,94 @@ }); + + From 931326afba6fd28ef47c4dc9bf407c1414556e20 Mon Sep 17 00:00:00 2001 From: A0nameless0man <1395943920@qq.com> Date: Wed, 6 Nov 2024 10:28:25 +0800 Subject: [PATCH 4/8] refactor(label): move unrelated code outside the state loop --- src/label/LabelManager.ts | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts index 5c513b73bc..55384b2756 100644 --- a/src/label/LabelManager.ts +++ b/src/label/LabelManager.ts @@ -425,24 +425,24 @@ class LabelManager { } - if (layoutOption.draggable) { - label.draggable = true; - label.cursor = 'move'; - if (hostEl) { - let hostModel: Model = - labelItem.seriesModel as SeriesModel; - if (labelItem.dataIndex != null) { - const data = labelItem.seriesModel.getData(labelItem.dataType); - hostModel = data.getItemModel(labelItem.dataIndex); - } - label.on('drag', createDragHandler(hostEl, hostModel.getModel('labelLine'))); + } + if (layoutOption.draggable) { + label.draggable = true; + label.cursor = 'move'; + if (hostEl) { + let hostModel: Model = + labelItem.seriesModel as SeriesModel; + if (labelItem.dataIndex != null) { + const data = labelItem.seriesModel.getData(labelItem.dataType); + hostModel = data.getItemModel(labelItem.dataIndex); } + label.on('drag', createDragHandler(hostEl, hostModel.getModel('labelLine'))); } - else { - // TODO Other drag functions? - label.off('drag'); - label.cursor = defaultLabelAttr.cursor; - } + } + else { + // TODO Other drag functions? + label.off('drag'); + label.cursor = defaultLabelAttr.cursor; } } } From 2b356eae446298917af74eca8e3c4283e66c1813 Mon Sep 17 00:00:00 2001 From: A0nameless0man <1395943920@qq.com> Date: Thu, 7 Nov 2024 08:35:04 +0800 Subject: [PATCH 5/8] test(sunburst): remove setInterval for ut --- test/sunburst-label.html | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/test/sunburst-label.html b/test/sunburst-label.html index a7afe152f0..4926d94e15 100644 --- a/test/sunburst-label.html +++ b/test/sunburst-label.html @@ -315,14 +315,10 @@ }) } }) - let counter = 1 - setInterval(() => { - counter++ - chart.dispatchAction({ - type: 'highlight', - dataIndex: counter % 5 + 1 - }) - }, 1000) + chart.dispatchAction({ + type: 'highlight', + dataIndex: 2 + }) }); From a70819c6f064dfba5509e15e0fcacd954c2cd627 Mon Sep 17 00:00:00 2001 From: A0nameless0man <1395943920@qq.com> Date: Thu, 7 Nov 2024 09:33:26 +0800 Subject: [PATCH 6/8] fix(label): avoid break pie chart select --- src/label/LabelManager.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts index 55384b2756..d02ffb6772 100644 --- a/src/label/LabelManager.ts +++ b/src/label/LabelManager.ts @@ -388,18 +388,19 @@ class LabelManager { const labelLayoutStore = labelLayoutInnerStore(label); labelLayoutStore.needsUpdateLabelLine = needsUpdateLabelLine; for (const state of DISPLAY_STATES) { - const labelState = state === 'normal' ? label : label.ensureState(state); + const isNormal = state === 'normal'; + const labelState = isNormal ? label : label.ensureState(state); if (layoutOption.x != null) { labelState.x = parsePercent(layoutOption.x, width); } - else { + else if (isNormal) { labelState.x = defaultLabelAttr.x; } if (layoutOption.y != null) { labelState.y = parsePercent(layoutOption.y, height); } - else { + else if (isNormal) { labelState.y = defaultLabelAttr.y; } From 8126d2f45ed17f77181610e98e94e16801ab7337 Mon Sep 17 00:00:00 2001 From: A0nameless0man <1395943920@qq.com> Date: Thu, 7 Nov 2024 11:09:40 +0800 Subject: [PATCH 7/8] refactor(label): restore direct label set to avoid unnecessary if --- src/label/LabelManager.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts index d02ffb6772..cce12b4202 100644 --- a/src/label/LabelManager.ts +++ b/src/label/LabelManager.ts @@ -364,6 +364,7 @@ class LabelManager { needsUpdateLabelLine = true; } else { + label.x = defaultLabelAttr.x; label.setStyle('x', defaultLabelAttr.style.x); } @@ -373,6 +374,7 @@ class LabelManager { needsUpdateLabelLine = true; } else { + label.y = defaultLabelAttr.y; label.setStyle('y', defaultLabelAttr.style.y); } @@ -393,16 +395,10 @@ class LabelManager { if (layoutOption.x != null) { labelState.x = parsePercent(layoutOption.x, width); } - else if (isNormal) { - labelState.x = defaultLabelAttr.x; - } if (layoutOption.y != null) { labelState.y = parsePercent(layoutOption.y, height); } - else if (isNormal) { - labelState.y = defaultLabelAttr.y; - } if (layoutOption.align != null) { labelState.style = labelState.style || {}; From 6bda901fde3cf4fbd44d4230ff0a929b449b9730 Mon Sep 17 00:00:00 2001 From: A0nameless0man <1395943920@qq.com> Date: Thu, 7 Nov 2024 11:57:56 +0800 Subject: [PATCH 8/8] refactor(label): remove unnecessary if --- src/label/LabelManager.ts | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts index cce12b4202..4d471ddb38 100644 --- a/src/label/LabelManager.ts +++ b/src/label/LabelManager.ts @@ -55,6 +55,7 @@ import Model from '../model/Model'; import { prepareLayoutList, hideOverlap, shiftLayoutOnX, shiftLayoutOnY } from './labelLayoutHelper'; import { labelInner, animateLabelValue } from './labelStyle'; import { normalizeRadian } from 'zrender/src/contain/util'; +import { TextProps } from 'zrender'; interface LabelDesc { label: ZRText @@ -389,6 +390,13 @@ class LabelManager { const labelLayoutStore = labelLayoutInnerStore(label); labelLayoutStore.needsUpdateLabelLine = needsUpdateLabelLine; + + label.rotation = layoutOption.rotate != null + ? layoutOption.rotate * degreeToRadian : defaultLabelAttr.rotation; + + label.scaleX = defaultLabelAttr.scaleX; + label.scaleY = defaultLabelAttr.scaleY; + for (const state of DISPLAY_STATES) { const isNormal = state === 'normal'; const labelState = isNormal ? label : label.ensureState(state); @@ -400,25 +408,17 @@ class LabelManager { labelState.y = parsePercent(layoutOption.y, height); } - if (layoutOption.align != null) { - labelState.style = labelState.style || {}; - labelState.style.align = layoutOption.align; - } - - if (layoutOption.verticalAlign != null) { - labelState.style = labelState.style || {}; - labelState.style.verticalAlign = layoutOption.verticalAlign; - } - - labelState.rotation = layoutOption.rotate != null - ? layoutOption.rotate * degreeToRadian : defaultLabelAttr.rotation; - - labelState.scaleX = defaultLabelAttr.scaleX; - labelState.scaleY = defaultLabelAttr.scaleY; for (let k = 0; k < LABEL_OPTION_TO_STYLE_KEYS.length; k++) { const key = LABEL_OPTION_TO_STYLE_KEYS[k]; - label.setStyle(key, layoutOption[key] != null ? layoutOption[key] : defaultLabelAttr.style[key]); + const val = layoutOption[key]; + if (isNormal) { + label.setStyle(key, val != null ? val : defaultLabelAttr.style[key]); + } + else if (val != null) { + labelState.style = labelState.style || {}; + (labelState.style[key] as TextProps['style'][typeof key]) = val; + } }