/**
|
* 质量组件在画布上的标记约定。
|
* <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);
|
}
|