11 小时以前 35722562e9e13f0504acc15b740d042ecb810199
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/**
 * 质量组件在画布上的标记约定。
 * <p>
 * 画布节点靠属性自描述:data-quality-type 声明它是哪个组件,
 * data-qc-<key> 承载业务属性值,两者一起让画布(grapes 原始数据)本身就能还原业务语义。
 */
 
/** 标记组件类型的属性名 */
export const QUALITY_TYPE_ATTR = 'data-quality-type';
 
/** 业务属性写入画布时的属性前缀 */
export const QUALITY_PROP_PREFIX = 'data-qc-';
 
/** 重复渲染容器:值为数组在上下文中的路径,渲染期按数组长度复制子行 */
export const QUALITY_REPEAT_ATTR = `${QUALITY_PROP_PREFIX}repeat`;
 
/** 重复渲染的行模板:值为循环变量名,行内 {{变量.字段}} 由该变量的元素解析 */
export const QUALITY_REPEAT_ROW_ATTR = `${QUALITY_PROP_PREFIX}repeat-row`;
 
/**
 * 渲染产物上承载组件标识的属性。
 * <p>
 * GrapesJS 把样式挂在 #<组件id> 上,而 id 在重复行里必然撞车;
 * 渲染时统一改写成这个属性,并把样式选择器一起改写,重复行才能各自带上样式。
 */
export const QUALITY_ID_ATTR = `${QUALITY_PROP_PREFIX}id`;
 
/** 与业务属性共用前缀但不参与属性读写的保留名 */
const RESERVED_KEYS = new Set(['repeat', 'repeat-row', 'id']);
 
/** 业务属性 key 对应的画布属性名 */
export function propAttrName(key: string): string {
  return `${QUALITY_PROP_PREFIX}${key}`;
}
 
/** 判断某个画布属性是否属于业务属性 */
export function isQualityPropAttr(name: string): boolean {
  return (
    name.startsWith(QUALITY_PROP_PREFIX) &&
    !RESERVED_KEYS.has(name.slice(QUALITY_PROP_PREFIX.length))
  );
}
 
/** 画布属性名还原为业务属性 key */
export function propKeyFromAttr(name: string): string {
  return name.slice(QUALITY_PROP_PREFIX.length);
}