From 2775d0e15e8412a6f9f286719869e85bb340fcee Mon Sep 17 00:00:00 2001 From: mmerezhko Date: Thu, 14 Mar 2024 14:03:43 +0200 Subject: [PATCH 01/13] fix(tree): add CSP header to track violations. #19570 --- test/tree-basic.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/tree-basic.html b/test/tree-basic.html index a9ea9ff1d3..e2f748e644 100644 --- a/test/tree-basic.html +++ b/test/tree-basic.html @@ -25,6 +25,7 @@ +
+ -
diff --git a/test/asset/tree-basic.css b/test/lib/basic.css similarity index 96% rename from test/asset/tree-basic.css rename to test/lib/basic.css index 29cc08c6a1..2ca598636c 100644 --- a/test/asset/tree-basic.css +++ b/test/lib/basic.css @@ -1,4 +1,4 @@ -html, body, #main { +html, body, #main, #main2 { width: 100%; padding: 0; margin: 0; diff --git a/test/tree-basic.html b/test/tree-basic.html index adbc818306..218df62e1e 100644 --- a/test/tree-basic.html +++ b/test/tree-basic.html @@ -25,7 +25,7 @@ - + From 81f33756e9a34a4fc3888a9af5706522366f6332 Mon Sep 17 00:00:00 2001 From: mmerezhko Date: Thu, 14 Mar 2024 15:37:11 +0200 Subject: [PATCH 10/13] fix(tree): refactor getTooltipMarker to get rid of unsafe styles. #19570 --- src/util/format.ts | 15 ++++++--------- test/heatmap.html | 1 + test/lib/basic.css | 25 +++++++++++++++++++++++++ 3 files changed, 32 insertions(+), 9 deletions(-) diff --git a/src/util/format.ts b/src/util/format.ts index afe9625b42..940e98237e 100644 --- a/src/util/format.ts +++ b/src/util/format.ts @@ -192,7 +192,7 @@ export function getTooltipMarker(inOpt: ColorString | GetTooltipMarkerOpt, extra } : (inOpt || {}) as GetTooltipMarkerOpt; const color = opt.color; const type = opt.type; - extraCssText = opt.extraCssText; + const extraCssClasses = opt.extraCssText ? opt.extraCssText.split(' ') : []; const renderMode = opt.renderMode || 'html'; if (!color) { @@ -200,14 +200,11 @@ export function getTooltipMarker(inOpt: ColorString | GetTooltipMarkerOpt, extra } if (renderMode === 'html') { - return type === 'subItem' - ? '' - : ''; + const markerClass = type === 'subItem' ? 'tooltip-marker-sub' : 'tooltip-marker'; + const colorClass = `tooltip-marker-color-${color.replace('#', '')}`; + const classes = [markerClass, colorClass, ...extraCssClasses]; + + return ``; } else { // Should better not to auto generate style name by auto-increment number here. diff --git a/test/heatmap.html b/test/heatmap.html index 08cca17630..0be664a41e 100644 --- a/test/heatmap.html +++ b/test/heatmap.html @@ -27,6 +27,7 @@ + diff --git a/test/lib/basic.css b/test/lib/basic.css index 2ca598636c..37278c2321 100644 --- a/test/lib/basic.css +++ b/test/lib/basic.css @@ -54,3 +54,28 @@ html, body, #main, #main2 { float: left; margin-right: 20px; /* Adjust as needed */ } + +.tooltip-marker, +.tooltip-marker-sub { + display: inline-block; + vertical-align: middle; + margin-right: 8px; +} + +.tooltip-marker { + width: 10px; + height: 10px; + border-radius: 5px; +} + +.tooltip-marker-sub { + margin-left: 3px; + width: 4px; + height: 4px; + border-radius: 2px; +} + +/* Color styles for markers */ +.tooltip-marker-color-6e7079 { + background-color: #6e7079; +} From 4136550e45b3dd354d0c777dce8e009191f243ff Mon Sep 17 00:00:00 2001 From: mmerezhko Date: Thu, 14 Mar 2024 17:12:37 +0200 Subject: [PATCH 11/13] fix(tree): refactor assembleArrow to get rid of unsafe styles. #19570 --- src/component/tooltip/TooltipHTMLContent.ts | 57 +++++++++++++-------- test/lib/basic.css | 41 +++++++++++++++ 2 files changed, 77 insertions(+), 21 deletions(-) diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts index f2f954ea49..4506d67ee6 100644 --- a/src/component/tooltip/TooltipHTMLContent.ts +++ b/src/component/tooltip/TooltipHTMLContent.ts @@ -73,34 +73,49 @@ function assembleArrow( borderColor = convertToColorString(borderColor); const arrowPos = mirrorPos(arrowPosition); const arrowSize = Math.max(Math.round(borderWidth) * 1.5, 6); - let positionStyle = ''; - let transformStyle = CSS_TRANSFORM_VENDOR + ':'; + + const arrowClasses = ['tooltip-arrow']; + const transformClasses = []; let rotateDeg; - if (indexOf(['left', 'right'], arrowPos) > -1) { - positionStyle += 'top:50%'; - transformStyle += `translateY(-50%) rotate(${rotateDeg = arrowPos === 'left' ? -225 : -45}deg)`; + + if (['left', 'right'].includes(arrowPos)) { + arrowClasses.push('tooltip-arrow-horizontal'); + transformClasses.push(`tooltip-arrow-rotate-${rotateDeg = arrowPos === 'left' ? -225 : -45}`); } else { - positionStyle += 'left:50%'; - transformStyle += `translateX(-50%) rotate(${rotateDeg = arrowPos === 'top' ? 225 : 45}deg)`; + arrowClasses.push('tooltip-arrow-vertical'); + transformClasses.push(`tooltip-arrow-rotate-${rotateDeg = arrowPos === 'top' ? 225 : 45}`); + } + + function calculateArrowOffset(rotatedWH: number, borderWidth: number, arrowWH: number) { + return Math.round( + ( + ((rotatedWH - Math.SQRT2 * borderWidth) / 2 + + Math.SQRT2 * borderWidth + - (rotatedWH - arrowWH) / 2) + * 100 + ) / 100 + ); + } + + function getColorClassName(color: ZRColor) { + const colorValue = convertToColorString(color); + return colorValue.replace(/[^a-zA-Z0-9]/g, ''); } + const rotateRadian = rotateDeg * Math.PI / 180; const arrowWH = arrowSize + borderWidth; const rotatedWH = arrowWH * Math.abs(Math.cos(rotateRadian)) + arrowWH * Math.abs(Math.sin(rotateRadian)); - const arrowOffset = Math.round(((rotatedWH - Math.SQRT2 * borderWidth) / 2 - + Math.SQRT2 * borderWidth - (rotatedWH - arrowWH) / 2) * 100) / 100; - positionStyle += `;${arrowPos}:-${arrowOffset}px`; - - const borderStyle = `${borderColor} solid ${borderWidth}px;`; - const styleCss = [ - `position:absolute;width:${arrowSize}px;height:${arrowSize}px;z-index:-1;`, - `${positionStyle};${transformStyle};`, - `border-bottom:${borderStyle}`, - `border-right:${borderStyle}`, - `background-color:${backgroundColor};` - ]; - - return `
`; + const arrowOffset = calculateArrowOffset(rotatedWH, borderWidth, arrowWH); + + arrowClasses.push(`tooltip-arrow-offset-${arrowPos}-${arrowOffset}`); + + const borderColorClass = `tooltip-arrow-border-color-${getColorClassName(borderColor)}`; + const backgroundColorClass = `tooltip-arrow-background-color-${getColorClassName(backgroundColor)}`; + + const classes = [...arrowClasses, borderColorClass, backgroundColorClass, ...transformClasses]; + + return `
`; } function assembleTransition(duration: number, onlyFade?: boolean): string { diff --git a/test/lib/basic.css b/test/lib/basic.css index 37278c2321..f2a6e1bf4b 100644 --- a/test/lib/basic.css +++ b/test/lib/basic.css @@ -79,3 +79,44 @@ html, body, #main, #main2 { .tooltip-marker-color-6e7079 { background-color: #6e7079; } + +/* Base styles for the arrow */ +.tooltip-arrow { + position: absolute; + width: 6px; /* Adjust as needed */ + height: 6px; /* Adjust as needed */ + z-index: -1; +} + +/* Horizontal arrow styles */ +.tooltip-arrow-horizontal { + top: 50%; + transform: translateY(-50%); +} + +/* Vertical arrow styles */ +.tooltip-arrow-vertical { + left: 50%; + transform: translateX(-50%); +} + +/* Rotation styles */ +.tooltip-arrow-rotate-225 { + transform: translateY(-50%) rotate(225deg); +} + +.tooltip-arrow-rotate-45 { + transform: translateY(-50%) rotate(45deg); +} + +.tooltip-arrow-rotate--225 { + transform: translateY(-50%) rotate(-225deg); +} + +.tooltip-arrow-rotate--45 { + transform: translateY(-50%) rotate(-45deg); +} + +.tooltip-arrow-background-color-fff { + background-color: #ffffff; +} From 22cf47ba21574712127251874e72be158ff7c519 Mon Sep 17 00:00:00 2001 From: mmerezhko Date: Tue, 11 Jun 2024 12:54:54 +0300 Subject: [PATCH 12/13] fix(heatmap): move Helper Functions Outside of assembleArrow. #19570 --- src/component/tooltip/TooltipHTMLContent.ts | 32 ++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts index 4506d67ee6..172bd9d660 100644 --- a/src/component/tooltip/TooltipHTMLContent.ts +++ b/src/component/tooltip/TooltipHTMLContent.ts @@ -58,6 +58,22 @@ function mirrorPos(pos: string): string { return pos; } +function calculateArrowOffset(rotatedWH: number, borderWidth: number, arrowWH: number) { + return Math.round( + ( + ((rotatedWH - Math.SQRT2 * borderWidth) / 2 + + Math.SQRT2 * borderWidth + - (rotatedWH - arrowWH) / 2) + * 100 + ) / 100 + ); +} + +function getColorClassName(color: ZRColor) { + const colorValue = convertToColorString(color); + return colorValue.replace(/[^a-zA-Z0-9]/g, ''); +} + function assembleArrow( tooltipModel: Model, borderColor: ZRColor, @@ -87,22 +103,6 @@ function assembleArrow( transformClasses.push(`tooltip-arrow-rotate-${rotateDeg = arrowPos === 'top' ? 225 : 45}`); } - function calculateArrowOffset(rotatedWH: number, borderWidth: number, arrowWH: number) { - return Math.round( - ( - ((rotatedWH - Math.SQRT2 * borderWidth) / 2 - + Math.SQRT2 * borderWidth - - (rotatedWH - arrowWH) / 2) - * 100 - ) / 100 - ); - } - - function getColorClassName(color: ZRColor) { - const colorValue = convertToColorString(color); - return colorValue.replace(/[^a-zA-Z0-9]/g, ''); - } - const rotateRadian = rotateDeg * Math.PI / 180; const arrowWH = arrowSize + borderWidth; const rotatedWH = arrowWH * Math.abs(Math.cos(rotateRadian)) + arrowWH * Math.abs(Math.sin(rotateRadian)); From 8221d35e2b668d5471976be46473a0f2b033e62d Mon Sep 17 00:00:00 2001 From: mmerezhko Date: Tue, 11 Jun 2024 12:56:09 +0300 Subject: [PATCH 13/13] fix(heatmap): update the color names to match the consistent pattern. #19570 --- src/util/format.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/util/format.ts b/src/util/format.ts index 940e98237e..94d2e49de6 100644 --- a/src/util/format.ts +++ b/src/util/format.ts @@ -212,21 +212,22 @@ export function getTooltipMarker(inOpt: ColorString | GetTooltipMarkerOpt, extra // called repeatedly when mouse move and the auto-increment number increases fast. // Users can make their own style name by theirselves, make it unique and readable. const markerId = opt.markerId || 'markerX'; + const colorStyle = `color-${color.replace('#', '')}`; return { renderMode: renderMode, - content: '{' + markerId + '|} ', + content: '{' + markerId + '|} ', style: type === 'subItem' ? { width: 4, height: 4, borderRadius: 2, - backgroundColor: color + backgroundColor: colorStyle } : { width: 10, height: 10, borderRadius: 5, - backgroundColor: color + backgroundColor: colorStyle } }; }