Improve the styling of the selected blocks (third-party themes need to be adapted) #12105 #12579

[TCOTC]

备注：要考虑在嵌入块中显示的数据库块

选中块时，使当前块和子块的颜色都变深

我发现在选中“带背景色的块的子块”（左）和选中“带背景色的块的父块”（右）时，背景色与高亮叠加之后的颜色是不同的：

然后我研究了一下 Notion 发现带颜色的块被选中之后颜色是会变得更深的（颜色叠加）：

所以说之前 1138629 和 #12579 的颜色处理都不对，不应该让原来的背景色变浅，而是应该叠加颜色后变深

颜色算法：

透明度混合算法

参考：RGBA alpha 透明度混合算法实现和测试 - 小张的笔记

明亮主题

function mixColors(rgba1, rgba2) {
    const [R1, G1, B1, Alpha1] = rgba1;
    const [R2, G2, B2, Alpha2] = rgba2;

    const Alpha = 1 - (1 - Alpha1) * (1 - Alpha2);
    const R = (R1 * Alpha1 + R2 * Alpha2 * (1 - Alpha1)) / Alpha;
    const G = (G1 * Alpha1 + G2 * Alpha2 * (1 - Alpha1)) / Alpha;
    const B = (B1 * Alpha1 + B2 * Alpha2 * (1 - Alpha1)) / Alpha;

    return [Math.round(R), Math.round(G), Math.round(B)];
}

const baseColor = [53, 117, 240, 0.12];
const backgroundColors = [
    [245, 209, 207, 1],
    [255, 232, 200, 1],
    [214, 234, 249, 1],
    [215, 238, 216, 1],
    [226, 227, 228, 1],
    [172, 208, 252, 1],
    [253, 238, 214, 1],
    [250, 225, 207, 1],
    [253, 213, 231, 1],
    [230, 199, 230, 1],
    [222, 240, 217, 1],
    [250, 227, 228, 1],
    [34, 34, 34, 1],
];

const results = backgroundColors.map((background, index) => {
    const mixedColor = mixColors(baseColor, background);
    return `--b3-font-background${index + 1}-select: rgb(${mixedColor[0]}, ${mixedColor[1]}, ${mixedColor[2]});`;
});

// 输出所有结果的字符串，用换行符连接
console.log(results.join('\n'));

暗黑主题

function mixColors(rgba1, rgba2) {
    const [R1, G1, B1, Alpha1] = rgba1;
    const [R2, G2, B2, Alpha2] = rgba2;

    const Alpha = 1 - (1 - Alpha1) * (1 - Alpha2);
    const R = (R1 * Alpha1 + R2 * Alpha2 * (1 - Alpha1)) / Alpha;
    const G = (G1 * Alpha1 + G2 * Alpha2 * (1 - Alpha1)) / Alpha;
    const B = (B1 * Alpha1 + B2 * Alpha2 * (1 - Alpha1)) / Alpha;

    return [Math.round(R), Math.round(G), Math.round(B)];
}

const baseColor = [53, 117, 240, 0.12];
const backgroundColors = [
    [68, 39, 36, 1],
    [85, 70, 54, 1],
    [40, 64, 92, 1],
    [66, 83, 71, 1],
    [76, 82, 87, 1],
    [12, 61, 136, 1],
    [89, 57, 5, 1],
    [84, 24, 18, 1],
    [106, 6, 52, 1],
    [107, 47, 107, 1],
    [55, 102, 41, 1],
    [128, 58, 6, 1],
    [218, 218, 218, 1],
];

const results = backgroundColors.map((background, index) => {
    const mixedColor = mixColors(baseColor, background);
    return `--b3-font-background${index + 1}-select: rgb(${mixedColor[0]}, ${mixedColor[1]}, ${mixedColor[2]});`;
});

// 输出所有结果的字符串，用换行符连接
console.log(results.join('\n'));

多选块之后，将鼠标移动到父块或子块的块标，高亮的背景色会再叠加一次高亮

用途是判断块标对应的块，尽量避免拖拽错误的块标：#11882 (comment)

颜色的计算也是用上面那个颜色混合算法。

解决了数据库子元素颜色不一致的问题：

01

之前存在的问题：

本 PR 修改后：

02 hover 的时候只有非固定列的背景色会变，修复了：

[TCOTC]

另外还有个问题：

其他代码里给 .av__container 添加(更新)内联样式 style="--av-background:var(xxx)" 的逻辑需要删除掉，因为我感觉这个 PR 修改之后就用不上 --av-background 了。

但相关代码我看不太懂，不确定 --av-background 会不会有其他用途，不敢乱改所以没改，这部分需要 @Vanessa219 看一下。

---

备注：下面这两段背景色跟 PR 的有冲突所以移除了，之后再看看应该怎么改

.protyle-wysiwyg--select {
	.av__row--header,
	.av__row--footer,
	.av__row--footer .av__colsticky,
	.av__row--select .av__cell,
	.av__colsticky.av__firstcol,
	.av__colsticky > div,
	.av__cell--select,
	.av__cell--active,
	.av__counter {
		background-color: var(--b3-av-background-hl) !important;
	}
}

.protyle-wysiwyg--hl {
	.av__row--header,
	.av__row--footer,
	.av__row--footer .av__colsticky,
	.av__row--select .av__cell,
	.av__colsticky.av__firstcol,
	.av__colsticky > div,
	.av__cell--select,
	.av__cell--active,
	.av__counter {
		background-color: var(--b3-av-background-hl) !important;
	}
}

---

已经解决了的问题

02

块的颜色改变时，transition: var(--b3-background-transition); 会导致颜色变化的过程看起来有细微的闪烁，我建议把 transition 去掉 → 不知道为什么又不闪了，不管了

03

已经穷举解决了，非常简单粗暴

某种情况下 .protyle-wysiwyg--hl 是 .protyle-wysiwyg--select 的父元素，数据库的 --b3-av-background会继承 .protyle-wysiwyg--select 而不是 .protyle-wysiwyg--hl 的： 不对，逻辑还要再想想 应该是 .protyle-wysiwyg--hl 和 .protyle-wysiwyg--select 需要叠加显示

[TCOTC]

可以 Review 了

---

p.s. 现在发现，好像得和 #12712 #12713 一起考虑，一起改

[TCOTC]

等有空看看 #12713 改了什么

[Vanessa219]

头看的有点晕，麻烦把表格的和高亮的拆分一下提交吧。

还有表格的这些地方也需要同步修改