From e88138d711525228ca5ac9e08df63d809a8f0cda Mon Sep 17 00:00:00 2001 From: Piotr Zarzycki Date: Tue, 13 May 2025 14:54:37 +0200 Subject: [PATCH 1/4] add button positioning capability to DataView component Add buttonPosition option to DataView feature that allows users to customize the position of buttons in the DataView panel. This enhances flexibility by enabling precise positioning using top, right, bottom, and left properties. Test case added in area-large-dataView.html. --- src/component/toolbox/feature/DataView.ts | 17 ++- test/area-large-dataView.html | 167 ++++++++++++++++++++++ 2 files changed, 181 insertions(+), 3 deletions(-) create mode 100644 test/area-large-dataView.html diff --git a/src/component/toolbox/feature/DataView.ts b/src/component/toolbox/feature/DataView.ts index 6efd570432..579987ca1e 100644 --- a/src/component/toolbox/feature/DataView.ts +++ b/src/component/toolbox/feature/DataView.ts @@ -24,7 +24,8 @@ import * as zrUtil from 'zrender/src/core/util'; import GlobalModel from '../../../model/Global'; import SeriesModel from '../../../model/Series'; import { ToolboxFeature, ToolboxFeatureOption } from '../featureManager'; -import { ColorString, ECUnitOption, SeriesOption, Payload, Dictionary } from '../../../util/types'; +import { ColorString, ECUnitOption, SeriesOption, Payload, Dictionary, + BoxLayoutOptionMixin } from '../../../util/types'; import ExtensionAPI from '../../../core/ExtensionAPI'; import { addEventListener } from 'zrender/src/core/event'; import Axis from '../../../coord/Axis'; @@ -312,6 +313,8 @@ export interface ToolboxDataViewFeatureOption extends ToolboxFeatureOption { buttonColor?: ColorString buttonTextColor?: ColorString + + buttonPosition?: BoxLayoutOptionMixin } class DataView extends ToolboxFeature { @@ -375,7 +378,11 @@ class DataView extends ToolboxFeature { const blockMetaList = result.meta; const buttonContainer = document.createElement('div'); - buttonContainer.style.cssText = 'position:absolute;bottom:5px;left:0;right:0'; + buttonContainer.style.cssText = 'position:absolute;top:' + model.get('buttonPosition').top + + ';left:' + model.get('buttonPosition').left + + ';right:' + model.get('buttonPosition').right + + ';bottom:' + model.get('buttonPosition').bottom + + ';'; // eslint-disable-next-line max-len let buttonStyle = 'float:right;margin-right:20px;border:none;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px'; @@ -469,7 +476,11 @@ class DataView extends ToolboxFeature { textareaColor: '#fff', textareaBorderColor: '#333', buttonColor: '#c23531', - buttonTextColor: '#fff' + buttonTextColor: '#fff', + buttonPosition: { + right: 0, + bottom: '5px' + } }; return defaultOption; diff --git a/test/area-large-dataView.html b/test/area-large-dataView.html new file mode 100644 index 0000000000..bb5a2018e7 --- /dev/null +++ b/test/area-large-dataView.html @@ -0,0 +1,167 @@ + + + + + + + + + + + + + + + + + + + +
+ + + + + + \ No newline at end of file From 213b080e711720740e151074c183cbce2801df2a Mon Sep 17 00:00:00 2001 From: Piotr Zarzycki Date: Fri, 13 Jun 2025 18:05:58 +0200 Subject: [PATCH 2/4] - Fixed potential undefined error by adding default empty object for buttonPosition - Improved code readability by reducing excessive indentation in string concatenation - Example file demonstrating the use of buttonPosition property for custom positioning PR: #20969 --- src/component/toolbox/feature/DataView.ts | 11 +- test/area-large-dataView.html | 167 ---------------------- test/dataView.html | 5 + 3 files changed, 11 insertions(+), 172 deletions(-) delete mode 100644 test/area-large-dataView.html diff --git a/src/component/toolbox/feature/DataView.ts b/src/component/toolbox/feature/DataView.ts index 579987ca1e..dce6710824 100644 --- a/src/component/toolbox/feature/DataView.ts +++ b/src/component/toolbox/feature/DataView.ts @@ -378,11 +378,12 @@ class DataView extends ToolboxFeature { const blockMetaList = result.meta; const buttonContainer = document.createElement('div'); - buttonContainer.style.cssText = 'position:absolute;top:' + model.get('buttonPosition').top - + ';left:' + model.get('buttonPosition').left - + ';right:' + model.get('buttonPosition').right - + ';bottom:' + model.get('buttonPosition').bottom - + ';'; + const buttonPosition = model.get('buttonPosition') || {}; + buttonContainer.style.cssText = 'position:absolute;top:' + buttonPosition.top + + ';left:' + buttonPosition.left + + ';right:' + buttonPosition.right + + ';bottom:' + buttonPosition.bottom + + ';'; // eslint-disable-next-line max-len let buttonStyle = 'float:right;margin-right:20px;border:none;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px'; diff --git a/test/area-large-dataView.html b/test/area-large-dataView.html deleted file mode 100644 index bb5a2018e7..0000000000 --- a/test/area-large-dataView.html +++ /dev/null @@ -1,167 +0,0 @@ - - - - - - - - - - - - - - - - - - - -
- - - - - - \ No newline at end of file diff --git a/test/dataView.html b/test/dataView.html index 55a4c7a779..7382f41647 100644 --- a/test/dataView.html +++ b/test/dataView.html @@ -85,6 +85,11 @@ }, contentToOption: function () { console.log(arguments); + }, + lang: ['Cancel', 'OK', 'View data'], + buttonPosition: { + right: '5px', + top: '5px' } }, saveAsImage: { From 4677f1e8a817e1f8fee23c5e854b61821742701e Mon Sep 17 00:00:00 2001 From: Piotr Zarzycki Date: Mon, 16 Jun 2025 12:02:23 +0200 Subject: [PATCH 3/4] refactor: replace buttonPosition object with buttonExtraCssText string for DataView styling PR: #20969 --- src/component/toolbox/feature/DataView.ts | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/component/toolbox/feature/DataView.ts b/src/component/toolbox/feature/DataView.ts index dce6710824..7e96dc6627 100644 --- a/src/component/toolbox/feature/DataView.ts +++ b/src/component/toolbox/feature/DataView.ts @@ -24,8 +24,7 @@ import * as zrUtil from 'zrender/src/core/util'; import GlobalModel from '../../../model/Global'; import SeriesModel from '../../../model/Series'; import { ToolboxFeature, ToolboxFeatureOption } from '../featureManager'; -import { ColorString, ECUnitOption, SeriesOption, Payload, Dictionary, - BoxLayoutOptionMixin } from '../../../util/types'; +import { ColorString, ECUnitOption, SeriesOption, Payload, Dictionary } from '../../../util/types'; import ExtensionAPI from '../../../core/ExtensionAPI'; import { addEventListener } from 'zrender/src/core/event'; import Axis from '../../../coord/Axis'; @@ -314,7 +313,7 @@ export interface ToolboxDataViewFeatureOption extends ToolboxFeatureOption { buttonColor?: ColorString buttonTextColor?: ColorString - buttonPosition?: BoxLayoutOptionMixin + buttonExtraCssText?: string } class DataView extends ToolboxFeature { @@ -378,12 +377,8 @@ class DataView extends ToolboxFeature { const blockMetaList = result.meta; const buttonContainer = document.createElement('div'); - const buttonPosition = model.get('buttonPosition') || {}; - buttonContainer.style.cssText = 'position:absolute;top:' + buttonPosition.top - + ';left:' + buttonPosition.left - + ';right:' + buttonPosition.right - + ';bottom:' + buttonPosition.bottom - + ';'; + const buttonExtraCssText = model.get('buttonExtraCssText') || ''; + buttonContainer.style.cssText = 'position:absolute;' + buttonExtraCssText; // eslint-disable-next-line max-len let buttonStyle = 'float:right;margin-right:20px;border:none;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px'; @@ -478,10 +473,7 @@ class DataView extends ToolboxFeature { textareaBorderColor: '#333', buttonColor: '#c23531', buttonTextColor: '#fff', - buttonPosition: { - right: 0, - bottom: '5px' - } + buttonExtraCssText: 'right:0;bottom:5px;' }; return defaultOption; From 6086af94c915f84590add159e59cc93a2c07c0bb Mon Sep 17 00:00:00 2001 From: Piotr Zarzycki Date: Sun, 22 Jun 2025 17:25:24 +0200 Subject: [PATCH 4/4] refactor: rename buttonExtraCssText to buttonContainerExtraCssText for clarity PR: #20969 --- src/component/toolbox/feature/DataView.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/toolbox/feature/DataView.ts b/src/component/toolbox/feature/DataView.ts index 7e96dc6627..626d8044ab 100644 --- a/src/component/toolbox/feature/DataView.ts +++ b/src/component/toolbox/feature/DataView.ts @@ -313,7 +313,7 @@ export interface ToolboxDataViewFeatureOption extends ToolboxFeatureOption { buttonColor?: ColorString buttonTextColor?: ColorString - buttonExtraCssText?: string + buttonContainerExtraCssText?: string } class DataView extends ToolboxFeature { @@ -377,8 +377,8 @@ class DataView extends ToolboxFeature { const blockMetaList = result.meta; const buttonContainer = document.createElement('div'); - const buttonExtraCssText = model.get('buttonExtraCssText') || ''; - buttonContainer.style.cssText = 'position:absolute;' + buttonExtraCssText; + const buttonContainerExtraCssText = model.get('buttonContainerExtraCssText') || ''; + buttonContainer.style.cssText = 'position:absolute;' + buttonContainerExtraCssText; // eslint-disable-next-line max-len let buttonStyle = 'float:right;margin-right:20px;border:none;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px'; @@ -473,7 +473,7 @@ class DataView extends ToolboxFeature { textareaBorderColor: '#333', buttonColor: '#c23531', buttonTextColor: '#fff', - buttonExtraCssText: 'right:0;bottom:5px;' + buttonContainerExtraCssText: 'right:0;bottom:5px;' }; return defaultOption;