128 lines
3.6 KiB
TypeScript
128 lines
3.6 KiB
TypeScript
|
import MersenneTwister from "./mersenneTwister"
|
|||
|
|
import { ThemeConfig } from "../theme"
|
|||
|
|
import { richTextSupportStyleList } from "../constants/constant"
|
|||
|
|
import merge from 'deepmerge'
|
|||
|
|
|
|||
|
|
// 判断一个颜色是否是白色
|
|||
|
|
export const isWhite = (color: string): boolean => {
|
|||
|
|
color = String(color).replaceAll(/\s+/g, '')
|
|||
|
|
return (
|
|||
|
|
['#fff', '#ffffff', '#FFF', '#FFFFFF', 'rgb(255,255,255)'].includes(
|
|||
|
|
color
|
|||
|
|
) || /rgba\(255,255,255,[^)]+\)/.test(color)
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断一个颜色是否是透明
|
|||
|
|
export const isTransparent = (color: string): boolean => {
|
|||
|
|
color = String(color).replaceAll(/\s+/g, '')
|
|||
|
|
return (
|
|||
|
|
['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color)
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从当前主题里获取一个非透明非白色的颜色
|
|||
|
|
export const getVisibleColorFromTheme = (themeConfig: ThemeConfig): string | undefined => {
|
|||
|
|
const { lineColor, root, second, node } = themeConfig
|
|||
|
|
const list = [
|
|||
|
|
lineColor,
|
|||
|
|
root.fillColor,
|
|||
|
|
root.color,
|
|||
|
|
second.fillColor,
|
|||
|
|
second.color,
|
|||
|
|
node.fillColor,
|
|||
|
|
node.color,
|
|||
|
|
root.borderColor,
|
|||
|
|
second.borderColor,
|
|||
|
|
node.borderColor
|
|||
|
|
]
|
|||
|
|
for (let i = 0; i < list.length; i++) {
|
|||
|
|
const color = list[i]
|
|||
|
|
if (!isTransparent(color) && !isWhite(color)) {
|
|||
|
|
return color
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return undefined
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据内容生成颜色
|
|||
|
|
export const generateColorByContent = (str: string): string => {
|
|||
|
|
let hash = 0
|
|||
|
|
for (let i = 0; i < str.length; i++) {
|
|||
|
|
hash = str.charCodeAt(i) + ((hash << 5) - hash)
|
|||
|
|
}
|
|||
|
|
// 这里使用伪随机数的原因是因为
|
|||
|
|
// 1. 如果字符串的内容差不多，根据hash生产的颜色就比较相近，不好区分，比如v1.1 v1.2，所以需要加入随机数来使得颜色能够区分开
|
|||
|
|
// 2. 普通的随机数每次数值不一样，就会导致每次新增标签原来的标签颜色就会发生改变，所以加入了这个方法，使得内容不变随机数也不变
|
|||
|
|
const rng = new MersenneTwister(hash)
|
|||
|
|
const h = rng.genrand_int32() % 360
|
|||
|
|
return 'hsla(' + h + ', 50%, 50%, 1)'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface IconItem {
|
|||
|
|
type: string
|
|||
|
|
list: Array<{
|
|||
|
|
name: string
|
|||
|
|
icon: string
|
|||
|
|
}>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const mergerIconList = (list: IconItem[]): IconItem[] => {
|
|||
|
|
return list.reduce((result: IconItem[], item) => {
|
|||
|
|
const existingItem = result.find(x => x.type === item.type)
|
|||
|
|
if (existingItem) {
|
|||
|
|
item.list.forEach(newObj => {
|
|||
|
|
const existingObj = existingItem.list.find(x => x.name === newObj.name)
|
|||
|
|
if (existingObj) {
|
|||
|
|
existingObj.icon = newObj.icon
|
|||
|
|
} else {
|
|||
|
|
existingItem.list.push(newObj)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
result.push({ ...item })
|
|||
|
|
}
|
|||
|
|
return result
|
|||
|
|
}, [])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 合并主题配置
|
|||
|
|
export const mergeTheme = <T extends object>(dest: T, source: T): T => {
|
|||
|
|
return merge(dest, source, {
|
|||
|
|
arrayMerge: (_destinationArray: any[], sourceArray: any[]) => sourceArray
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface NodeStyle {
|
|||
|
|
merge: (prop: string) => string | number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Node {
|
|||
|
|
style: NodeStyle
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取节点实例的文本样式数据
|
|||
|
|
export const getNodeRichTextStyles = (node: Node): Record<string, string> => {
|
|||
|
|
const res: Record<string, string> = {}
|
|||
|
|
richTextSupportStyleList.forEach(prop => {
|
|||
|
|
let value = node.style.merge(prop)
|
|||
|
|
if (prop === 'fontSize') {
|
|||
|
|
value = value + 'px'
|
|||
|
|
}
|
|||
|
|
res[prop] = String(value)
|
|||
|
|
})
|
|||
|
|
return res
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface FontOptions {
|
|||
|
|
italic?: boolean;
|
|||
|
|
bold?: boolean;
|
|||
|
|
fontSize: number;
|
|||
|
|
fontFamily: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 拼接font字符串
|
|||
|
|
export const joinFontStr = ({ italic, bold, fontSize, fontFamily }: FontOptions): string => {
|
|||
|
|
return `${italic ? 'italic ' : ''} ${bold ? 'bold ' : ''
|
|||
|
|
} ${fontSize}px ${fontFamily} `
|
|||
|
|
}
|