From 7e4fa7185cc525ff92cbff17455844c4846fcc34 Mon Sep 17 00:00:00 2001
From: Jae Sung Park <alberto.park@gmail.com>
Date: Tue, 23 Jan 2024 11:17:10 +0900
Subject: [PATCH] fix(regions): Fix applying regions class

update ".bb-region rect" rule to not interfere applying
regions.class rule

Fix #3611
---
 src/module/util.ts              |  4 ++--
 src/scss/billboard.scss         |  3 ++-
 src/scss/theme/dark.scss        |  3 ++-
 src/scss/theme/datalab.scss     |  3 ++-
 src/scss/theme/graph.scss       |  3 ++-
 src/scss/theme/insight.scss     |  3 ++-
 src/scss/theme/modern.scss      |  3 ++-
 test/assets/common.css          |  4 ++++
 test/internals/rergions-spec.ts | 10 +++++++++-
 9 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/module/util.ts b/src/module/util.ts
index 2c4c2b21c..7754167eb 100644
--- a/src/module/util.ts
+++ b/src/module/util.ts
@@ -477,12 +477,12 @@ const toArray = (v: CSSStyleDeclaration | any): any => [].slice.call(v);
  * @private
  */
 function addCssRules(style, selector: string, prop: string[]): number {
-	const {rootSelctor, sheet} = style;
+	const {rootSelector = "", sheet} = style;
 	const getSelector = s => s
 		.replace(/\s?(bb-)/g, ".$1")
 		.replace(/\.+/g, ".");
 
-	const rule = `${rootSelctor} ${getSelector(selector)} {${prop.join(";")}}`;
+	const rule = `${rootSelector} ${getSelector(selector)} {${prop.join(";")}}`;
 
 	return sheet[sheet.insertRule ? "insertRule" : "addRule"](
 		rule,
diff --git a/src/scss/billboard.scss b/src/scss/billboard.scss
index 35c249866..5049b4723 100644
--- a/src/scss/billboard.scss
+++ b/src/scss/billboard.scss
@@ -136,8 +136,9 @@
 }
 /*-- Region --*/
 .bb-region {
+	fill: steelblue;
+
 	rect {
-		fill: steelblue;
 		fill-opacity: .1;
 	}
 }
diff --git a/src/scss/theme/dark.scss b/src/scss/theme/dark.scss
index ba5283231..d596a3a9a 100644
--- a/src/scss/theme/dark.scss
+++ b/src/scss/theme/dark.scss
@@ -162,8 +162,9 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
+    fill: steelblue;
+
     rect {
-        fill: steelblue;
         fill-opacity: 0.5;
     }    
 
diff --git a/src/scss/theme/datalab.scss b/src/scss/theme/datalab.scss
index 7cee354e2..2ff9760cc 100644
--- a/src/scss/theme/datalab.scss
+++ b/src/scss/theme/datalab.scss
@@ -147,8 +147,9 @@ $text-font-size: 11px;
 
 /*-- Region --*/
 .bb-region {
+    fill: steelblue;
+
     rect {
-        fill: steelblue;
         fill-opacity: 0.1;
     }
 
diff --git a/src/scss/theme/graph.scss b/src/scss/theme/graph.scss
index 541bd1665..0b785485d 100644
--- a/src/scss/theme/graph.scss
+++ b/src/scss/theme/graph.scss
@@ -158,8 +158,9 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
+    fill: steelblue;
+
     rect {
-        fill: steelblue;
         fill-opacity: 0.1;
     }
 
diff --git a/src/scss/theme/insight.scss b/src/scss/theme/insight.scss
index ee0962cb3..20c5fa6ae 100644
--- a/src/scss/theme/insight.scss
+++ b/src/scss/theme/insight.scss
@@ -154,8 +154,9 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
+    fill: steelblue;
+
     rect {
-        fill: steelblue;
         fill-opacity: 0.1;
     }
 
diff --git a/src/scss/theme/modern.scss b/src/scss/theme/modern.scss
index 1b3c3a6ad..0888aa31e 100644
--- a/src/scss/theme/modern.scss
+++ b/src/scss/theme/modern.scss
@@ -156,8 +156,9 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
+    fill: #71808d;
+
     rect {
-        fill: #71808d;
         fill-opacity: 0.1;
     }
 
diff --git a/test/assets/common.css b/test/assets/common.css
index 838e650e4..4310ae0cf 100644
--- a/test/assets/common.css
+++ b/test/assets/common.css
@@ -11,3 +11,7 @@
     align-items: center;
     justify-content: center;
 }
+
+.regions_class1{
+    fill: red;
+}
\ No newline at end of file
diff --git a/test/internals/rergions-spec.ts b/test/internals/rergions-spec.ts
index 5bc4838f7..b9731706e 100644
--- a/test/internals/rergions-spec.ts
+++ b/test/internals/rergions-spec.ts
@@ -4,6 +4,7 @@
  */
 /* eslint-disable */
 import {expect} from "chai";
+import {window} from "../../src/module/browser";
 import util from "../assets/util";
 
 // exported to be used from /test/api/region-spec.ts
@@ -131,13 +132,20 @@ describe("REGIONS", function() {
 			const {$el, scale} = chart.internal;
 			
 			setTimeout(() => {
-				$el.region.list.each(function(d) {
+				$el.region.list.each(function(d, i) {
 					const axis = scale[d.axis];
 					const isX = d.axis === "x";
 					const rect = this.querySelector("rect");
 					const start = +rect.getAttribute(isX ? "x" : "y");
 					const size = +rect.getAttribute(isX ? "width" : "height");
 
+					// first <rect> should apply .regions_class1 rule
+					if (i === 0) {
+						const {fill} = window.getComputedStyle(this.querySelector("rect"));
+
+						expect(fill).to.be.equal("rgb(255, 0, 0)");
+					}
+
 					// check the diemsion
 					expect(start).to.be.equal(axis(isX ? d.start : d.end));
 					expect(start + size).to.be.equal(axis(isX ? d.end : d.start));