feat(POSTV1-ASSET-ALL-16): 在编辑器接入全部复杂素材
Dada P0-A isolated Windows CI / validate-and-package (push) Waiting to run

This commit is contained in:
suyx
2026-08-06 11:55:06 +08:00
parent 9de0d2a63c
commit 2cd85cd7cd
17 changed files with 309 additions and 167 deletions
+3 -7
View File
@@ -1,13 +1,8 @@
import { useEffect, useRef } from "react";
import { P0A_COLOR_CARDS, createColorCardElement, drawColorCard, type ColorCardDefinition } from "./palette-provider.js";
import { COLOR_CARD_HALF_SIZES, P0A_COLOR_CARDS, createColorCardElement, drawColorCard, type ColorCardDefinition } from "./palette-provider.js";
const previewPalette = ["#04D960", "#0ABF58", "#5FD994", "#A0F2C4", "#D5F2E2"] as const;
const previewHalfSize = {
style_01: { height: 76, width: 26 }, style_02: { height: 77, width: 18 },
style_08: { height: 10, width: 73 }, style_16: { height: 9, width: 78 },
} as const;
function ColorCardPreview({ definition }: { definition: ColorCardDefinition }) {
const ref = useRef<HTMLCanvasElement>(null);
useEffect(() => {
@@ -18,7 +13,8 @@ function ColorCardPreview({ definition }: { definition: ColorCardDefinition }) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#30343b";
context.fillRect(0, 0, canvas.width, canvas.height);
const half = previewHalfSize[definition.styleId];
const half = COLOR_CARD_HALF_SIZES[definition.styleId];
if (!half) return;
const scale = Math.min(1, 146 / (half.width * 2), 62 / (half.height * 2));
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(scale, scale);
+33 -16
View File
@@ -3,6 +3,7 @@ import { P0A_DYNAMIC_STICKER_IDS } from "@dada/template-registry";
import { DYNAMIC_RESOURCE_VERSION } from "./dynamic-render-models.js";
import type { CanvasElementIdentity } from "./editor-elements.js";
import complexAssetCatalog from "./generated/complex-assets.json";
type CanvasElement = CanvasState["elements"][number];
@@ -45,23 +46,17 @@ export function dyn012DisplayParts(element: CanvasElement) {
} as const;
}
const dynamicDefinitions: readonly DynamicStickerDefinition[] = [
{ category: "location", displayName: "地点标题", requiresLocationConsent: false, templateId: "DYN001" },
{ category: "location", displayName: "英文地点", requiresLocationConsent: false, templateId: "DYN002" },
{ category: "location", displayName: "城市地点", requiresLocationConsent: false, templateId: "DYN003" },
{ category: "location", displayName: "经纬地点", requiresLocationConsent: true, templateId: "DYN004" },
{ category: "other", displayName: "用户名组合", requiresLocationConsent: false, templateId: "DYN007" },
{ category: "time", displayName: "月与时间", requiresLocationConsent: false, templateId: "DYN008" },
{ category: "time", displayName: "完整日期", requiresLocationConsent: false, templateId: "DYN011" },
{ category: "time", displayName: "数字时间", requiresLocationConsent: false, templateId: "DYN012" },
{ category: "identity", displayName: "创作署名", requiresLocationConsent: false, templateId: "DYN015" },
{ category: "identity", displayName: "社交 ID", requiresLocationConsent: false, templateId: "DYN016" },
] as const;
const dynamicCatalogById = new Map(complexAssetCatalog.dynamic_stickers.map((item) => [item.template_id, item]));
export const P0A_DYNAMIC_STICKERS: readonly DynamicStickerDefinition[] = P0A_DYNAMIC_STICKER_IDS.map((templateId) => {
const definition = dynamicDefinitions.find((item) => item.templateId === templateId);
if (!definition) throw new Error(`missing dynamic sticker definition ${templateId}`);
return definition;
const item = dynamicCatalogById.get(templateId);
if (!item) throw new Error(`missing dynamic sticker definition ${templateId}`);
return {
category: item.category as DynamicCategory,
displayName: item.display_name,
requiresLocationConsent: item.requires_location_consent,
templateId,
};
});
function twoDigits(value: number) {
@@ -96,7 +91,29 @@ function snapshotFor(templateId: DynamicTemplateId, context: DynamicProviderCont
if (templateId === "DYN011") return { fields: { day, month, year }, value: `${year}.${month}.${day}` };
if (templateId === "DYN012") return { fields: { font_substitution: "FONT081", hour, minute }, value: `${hour}:${minute}` };
if (templateId === "DYN015") return { fields: { nickname: context.profile.creatorName }, value: context.profile.creatorName };
return { fields: { nickname: normalizeSocialId(context.profile.socialId) }, value: normalizeSocialId(context.profile.socialId) };
if (templateId === "DYN016") return { fields: { nickname: normalizeSocialId(context.profile.socialId) }, value: normalizeSocialId(context.profile.socialId) };
const definition = dynamicCatalogById.get(templateId);
if (!definition) throw new Error("dynamic_template_unavailable");
const location = context.location?.formattedValue ?? "输入地点";
const values: Record<string, string | number> = {
city: location,
city_en: location.toUpperCase(),
day,
hour,
latitude: context.location?.latitude ?? 0,
longitude: context.location?.longitude ?? 0,
minute,
month,
nickname: normalizeSocialId(context.profile.socialId),
title: location,
year,
};
const fields = Object.fromEntries(definition.required_fields.map((field) => [field, values[field] ?? ""]));
if (definition.category === "identity") return { fields, value: normalizeSocialId(context.profile.socialId) };
if (definition.category === "location") return { fields, value: location };
if (definition.category === "time") return { fields, value: `${year}.${month}.${day} ${hour}:${minute}` };
return { fields, value: context.profile.creatorName };
}
export function createDynamicStickerElement(
+42 -12
View File
@@ -1,8 +1,9 @@
import type { CanvasState } from "@dada/shared-contracts";
import { P0A_COMPLEX_RELEASE_VERSION } from "@dada/template-registry";
import { P0A_COMPLEX_RELEASE_VERSION, P0A_DYNAMIC_STICKER_IDS } from "@dada/template-registry";
import { fontOption, type FontOption } from "./text-assets.js";
import type { DynamicTemplateId } from "./dynamic-provider.js";
import complexAssetCatalog from "./generated/complex-assets.json";
type CanvasElement = CanvasState["elements"][number];
@@ -55,17 +56,13 @@ const dynamicFont = (fontId: string): FontOption => ({
url: `/api/v1/assets/public/${DYNAMIC_RESOURCE_VERSION}/${fontId}`,
});
export const DYNAMIC_FONT_OPTIONS: readonly FontOption[] = [
dynamicFont("15974853bc3294ef68e7e6d58fe74fd7"),
dynamicFont("46f8336813e4c48d06a1aef294fdccf6"),
dynamicFont("53ca6b704728520da50c145eabb2e635"),
dynamicFont("cca5efc0e02fb1bf62349bd68ef30fc1"),
dynamicFont("dd25b35dcb7ba4476cbaa9a9592e39e2"),
dynamicFont("e4210c9872f0c279b35273f230809821"),
dynamicFont("f4bfd4132df2d6be97ceabadf3853505"),
] as const;
const dynamicFontIds = [...new Set(complexAssetCatalog.dynamic_stickers.flatMap((item) => item.font_ids))]
.filter((fontId) => fontId !== "FONT081")
.toSorted();
export const DYNAMIC_RENDER_MODELS: Readonly<Record<DynamicTemplateId, DynamicRenderModel>> = {
export const DYNAMIC_FONT_OPTIONS: readonly FontOption[] = dynamicFontIds.map(dynamicFont);
const EXACT_DYNAMIC_RENDER_MODELS: Readonly<Record<string, DynamicRenderModel>> = {
DYN001: {
halfSize: { height: 42, width: 130 },
imageLayers: [{ assetId: "DYN001-image28", height: 67, width: 219, x: -17.562, y: 2.203 }],
@@ -145,6 +142,38 @@ export const DYNAMIC_RENDER_MODELS: Readonly<Record<DynamicTemplateId, DynamicRe
},
};
const dynamicCatalogById = new Map(complexAssetCatalog.dynamic_stickers.map((item) => [item.template_id, item]));
function genericTextValue(item: (typeof complexAssetCatalog.dynamic_stickers)[number]): DynamicTextValue {
if (item.category === "identity") return "nickname";
if (item.category === "location") return item.required_fields.includes("title") ? "title" : "city";
if (item.category === "time") return item.required_fields.includes("hour") && item.required_fields.includes("minute") ? "time" : "day";
return "nickname";
}
function genericDynamicModel(templateId: string): DynamicRenderModel {
const item = dynamicCatalogById.get(templateId);
if (!item) throw new Error(`missing dynamic render model ${templateId}`);
return {
halfSize: { height: 42, width: 170 },
imageLayers: [],
sourceCandidateId: item.source_candidate_id,
textLayers: [{
align: "center",
color: "#FFFFFF",
fontId: item.font_ids[0] ?? "FONT081",
fontSize: 34,
value: genericTextValue(item),
x: 0,
y: 0,
}],
};
}
export const DYNAMIC_RENDER_MODELS: Readonly<Record<DynamicTemplateId, DynamicRenderModel>> = Object.fromEntries(
P0A_DYNAMIC_STICKER_IDS.map((templateId) => [templateId, EXACT_DYNAMIC_RENDER_MODELS[templateId] ?? genericDynamicModel(templateId)]),
);
export function dynamicFontOptionsFor(templateId: string) {
if (templateId === "DYN012") {
const replacement = fontOption("FONT081");
@@ -153,7 +182,8 @@ export function dynamicFontOptionsFor(templateId: string) {
const model = DYNAMIC_RENDER_MODELS[templateId as DynamicTemplateId];
if (!model) return [];
const ids = new Set(model.textLayers.map((layer) => layer.fontId));
return DYNAMIC_FONT_OPTIONS.filter((option) => ids.has(option.fontId));
return [...ids].map((fontId) => fontOption(fontId) ?? DYNAMIC_FONT_OPTIONS.find((option) => option.fontId === fontId))
.filter((option): option is FontOption => option !== undefined);
}
export function dynamicImageUrl(resourceVersion: string, assetId: string) {
+1
View File
@@ -22,6 +22,7 @@ function DynamicPreview(props: { fontStatuses: Readonly<Record<string, ArchivedF
useEffect(() => {
let active = true;
const model = DYNAMIC_RENDER_MODELS[props.templateId];
if (!model) return () => { active = false; };
const element = createDynamicStickerElement(props.templateId, {
location: { formattedValue: "温州", latitude: 27.9943, longitude: 120.6994 },
now: new Date("2026-08-03T09:07:00+08:00"), profile: { creatorName: "Dada Creator", socialId: "@dada" },
+1
View File
@@ -399,6 +399,7 @@
.editor-template-grid button:disabled { border-style: dashed; background: #e8e8e5; color: #62625d; cursor: not-allowed; }
.editor-template-grid strong { overflow: hidden; font-family: Consolas, monospace; font-size: 10px; text-overflow: ellipsis; }
.editor-template-grid small { color: #8f1d14; font-size: 9px; }
.editor-template-preview { width: 100%; height: 44px; object-fit: contain; border: 1px solid #111111; background: #30343b; }
.editor-template-mark { display: grid; width: 100%; height: 44px; place-items: center; border: 1px solid #111111; background: #f2f400; font-size: 18px; font-weight: 800; }
.editor-template-mark.title { background: #111111; color: #ffffff; }
.editor-template-mark.tag { background: #dbeafe; }
+3 -5
View File
@@ -8,7 +8,7 @@ import { DYNAMIC_RENDER_MODELS, dynamicFontOptionsFor, dynamicImageUrl, dynamicT
import type { CanvasPoint, CanvasRect } from "./editor-elements.js";
import { fontFamilyName, type ArchivedFontStatus } from "./text-font-loader.js";
import { fontIdForTextElement } from "./text-assets.js";
import { drawColorCard } from "./palette-provider.js";
import { COLOR_CARD_HALF_SIZES, drawColorCard } from "./palette-provider.js";
interface Gesture {
append: boolean;
@@ -186,10 +186,8 @@ function elementSelectionHalfSize(
fontStatuses: Readonly<Record<string, ArchivedFontStatus>>,
) {
if (element.type === "color_card") {
if (element.style_id === "style_01") return { height: 76 * element.scale.y, width: 26 * element.scale.x };
if (element.style_id === "style_02") return { height: 77 * element.scale.y, width: 18 * element.scale.x };
if (element.style_id === "style_08") return { height: 10 * element.scale.y, width: 73 * element.scale.x };
return { height: 9 * element.scale.y, width: 78 * element.scale.x };
const half = COLOR_CARD_HALF_SIZES[element.style_id ?? ""] ?? { height: 24, width: 78 };
return { height: half.height * element.scale.y, width: half.width * element.scale.x };
}
if (element.type === "dynamic_sticker") {
const model = DYNAMIC_RENDER_MODELS[element.template_or_asset_id as DynamicTemplateId];
+3
View File
@@ -40,6 +40,7 @@
.reference-input,
.editor-sticker-preview,
.editor-template-mark,
.editor-template-preview,
.editor-color-card-preview,
.editor-dynamic-preview,
.editor-source-preview-canvas,
@@ -114,6 +115,7 @@
}
.editor-template-grid button:not(:disabled):hover .editor-template-mark,
.editor-template-grid button:not(:disabled):hover .editor-template-preview,
.editor-provider-grid button:not(:disabled):hover > :first-child {
transform: scale(1.03);
}
@@ -142,6 +144,7 @@
.reference-input,
.editor-sticker-preview,
.editor-template-mark,
.editor-template-preview,
.editor-color-card-preview,
.editor-dynamic-preview,
.editor-source-preview-canvas,
+125
View File
@@ -27,6 +27,17 @@ export const COLOR_CARD_SOURCE_GEOMETRY = {
style_16: { bounds: { bottom: 9, left: -78, right: 78, top: -9 } },
} as const;
export const COLOR_CARD_HALF_SIZES: Readonly<Record<string, { height: number; width: number }>> = {
style_01: { height: 76, width: 26 }, style_02: { height: 77, width: 18 },
style_03: { height: 75, width: 22 }, style_04: { height: 75, width: 18 },
style_05: { height: 18, width: 78 }, style_06: { height: 16, width: 78 },
style_07: { height: 20, width: 78 }, style_08: { height: 10, width: 73 },
style_09: { height: 75, width: 58 }, style_10: { height: 75, width: 60 },
style_11: { height: 18, width: 78 }, style_12: { height: 34, width: 70 },
style_13: { height: 75, width: 18 }, style_14: { height: 28, width: 60 },
style_15: { height: 16, width: 78 }, style_16: { height: 9, width: 78 },
};
function normalizedHex(value: string) {
return value.toUpperCase();
}
@@ -139,6 +150,65 @@ export function drawColorCard(context: CanvasRenderingContext2D, element: Canvas
});
return;
}
if (element.style_id === "style_03") {
colors.forEach((color, index) => {
context.fillStyle = color;
context.fillRect(-22, -75 + index * 30, 44, 29);
});
return;
}
if (element.style_id === "style_04") {
context.strokeStyle = "#ffffff";
context.lineWidth = 2;
context.beginPath();
context.moveTo(0, -75);
context.lineTo(0, 75);
context.stroke();
colors.forEach((color, index) => {
context.fillStyle = color;
context.beginPath();
context.arc(0, -60 + index * 30, 9, 0, Math.PI * 2);
context.fill();
});
return;
}
if (["style_05", "style_06", "style_07", "style_11"].includes(element.style_id ?? "")) {
if (element.style_id === "style_11") {
context.strokeStyle = "#ffffff";
context.lineWidth = 3;
context.strokeRect(-78, -18, 156, 36);
}
colors.forEach((color, index) => {
const left = -72 + index * 29;
context.fillStyle = color;
context.fillRect(left, -10, 28, 20);
if (element.style_id === "style_07") {
context.fillStyle = "#ffffff";
context.beginPath();
context.arc(left + 14, -16, 4, 0, Math.PI * 2);
context.fill();
}
});
if (element.style_id === "style_05") {
context.fillStyle = "#111111";
context.fillRect(-78, -18, 20, 36);
context.fillStyle = "#ffffff";
context.font = "700 7px Arial, sans-serif";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("C", -68, 0);
}
if (element.style_id === "style_06") {
context.fillStyle = "#ffffff";
context.beginPath();
context.moveTo(-4, -16);
context.lineTo(4, -16);
context.lineTo(0, -10);
context.closePath();
context.fill();
}
return;
}
if (element.style_id === "style_08") {
colors.forEach((color, index) => {
const left = -73 + index * 29.2;
@@ -159,6 +229,61 @@ export function drawColorCard(context: CanvasRenderingContext2D, element: Canvas
});
return;
}
if (element.style_id === "style_09" || element.style_id === "style_10") {
context.fillStyle = "#ffffff";
context.fillRect(-58, -75, 116, 150);
colors.forEach((color, index) => {
context.fillStyle = color;
context.fillRect(-50, -64 + index * 23, 100, 22);
});
context.fillStyle = "#111111";
context.font = "700 8px Arial, sans-serif";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(element.style_id === "style_09" ? "COLOR PALETTE" : "FIVE COLORS", 0, 63);
return;
}
if (element.style_id === "style_12") {
const positions = [[-52, -18], [0, -18], [52, -18], [-26, 18], [26, 18]] as const;
colors.forEach((color, index) => {
const position = positions[index]!;
context.fillStyle = color;
context.fillRect(position[0] - 24, position[1] - 14, 48, 28);
});
return;
}
if (element.style_id === "style_13") {
colors.forEach((color, index) => {
context.fillStyle = color;
context.beginPath();
context.arc(0, -60 + index * 30, 11, 0, Math.PI * 2);
context.fill();
});
return;
}
if (element.style_id === "style_14") {
colors.forEach((color, index) => {
context.globalAlpha = 0.9;
context.fillStyle = color;
context.beginPath();
context.arc(-40 + index * 20, 0, 24, 0, Math.PI * 2);
context.fill();
});
context.globalAlpha = 1;
return;
}
if (element.style_id === "style_15") {
colors.forEach((color, index) => {
context.fillStyle = color;
context.strokeStyle = "#ffffff";
context.lineWidth = 3;
context.beginPath();
context.arc(-58 + index * 29, 0, 12, 0, Math.PI * 2);
context.fill();
context.stroke();
});
return;
}
context.fillStyle = "#ffffff";
context.beginPath();
context.moveTo(-78, -9);
+24 -66
View File
@@ -2,6 +2,7 @@ import type { CanvasState } from "@dada/shared-contracts";
import { P0A_COMPLEX_RELEASE_VERSION, P0A_REQUIRED_FONT_PANEL_IDS, P0A_TEXT_TEMPLATE_IDS } from "@dada/template-registry";
import type { CanvasElementIdentity } from "./editor-elements.js";
import complexAssetCatalog from "./generated/complex-assets.json";
type CanvasElement = CanvasState["elements"][number];
@@ -17,6 +18,7 @@ export interface TextTemplateDefinition {
defaultText: string;
displayName: string;
fontUrl?: string;
previewUrl?: string;
resourceClass: "parameter_only" | "zip_template";
resourceVersion: string;
templateId: string;
@@ -56,82 +58,38 @@ const defaults = {
text_align: "center",
} as const;
type CatalogSeed = [id: string, category: TextTemplateCategory, displayName: string, defaultText: string, defaultFontId: string, available?: boolean, resourceClass?: "parameter_only"];
const seeds: readonly CatalogSeed[] = [
["FLOWER001", "flower", "春日计划", "春日计划", "FONT011", true],
["FLOWER002", "flower", "笑不活了", "笑不活了", "FLOWER002_FONT"],
["FLOWER003", "flower", "人生照片", "人生照片", "FONT008"],
["FLOWER004", "flower", "我的日常生活", "我的日常生活", "FLOWER004_FONT"],
["FLOWER005", "flower", "碎片生活", "碎片生活", "FONT008"],
["FLOWER006", "flower", "闪光瞬间", "闪光瞬间", "FLOWER006_FONT"],
["FLOWER007", "flower", "好柿花生", "好柿花生", "FONT046", false, "parameter_only"],
["FLOWER008", "flower", "Vlog.", "Vlog.", "FONT005"],
["H001", "title", "电影生活记录", "电影生活记录", "H001_FONT"],
["H002", "title", "30°C", "30°C", "H002_FONT"],
["H003", "title", "生活分享家", "生活分享家", "FONT039", true],
["H004", "title", "快乐充值成功", "快乐充值成功", "FONT046"],
["H005", "title", "日常的镜头", "日常的镜头", "H005_FONT"],
["H006", "title", "慢生活指南", "慢生活指南", "FONT052"],
["H007", "title", "做个有闲人", "做个有闲人", "H007_FONT"],
["H008", "title", "海滩日记", "海滩日记", "H008_FONT"],
["TAG001", "tag", "自定义标签", "自定义标签", "FONT027"],
["TAG002", "tag", "自定义标签", "自定义标签", "FONT043"],
["TAG003", "tag", "打卡x1", "打卡x1", "FONT043"],
["TAG004", "tag", "自定义标签", "自定义标签", "TAG004_FONT"],
["TAG005", "tag", "自定义标签", "自定义标签", "FONT008"],
["TAG006", "tag", "City Walk", "City Walk", "TAG006_FONT"],
["TAG007", "tag", "打卡x1", "打卡x1", "FONT043"],
["TAG051", "tag", "自定义标签", "自定义标签", "FONT022"],
["SIMPLE001", "simple", "碎片回忆录", "碎片回忆录", "SIMPLE001_FONT"],
["SIMPLE002", "simple", "秋天的信笺", "秋天的信笺", "SIMPLE002_FONT"],
["SIMPLE003", "simple", "返航时海鸟追着船盘旋", "返航时海鸟追着船盘旋", "SIMPLE003_FONT"],
["SIMPLE004", "simple", "下段旅程,幸福丰盛。", "下段旅程,幸福丰盛。", "SIMPLE002_FONT"],
["SIMPLE005", "simple", "见信好。", "见信好。", "SIMPLE005_FONT"],
["SIMPLE006", "simple", "万物回春", "万物回春", "SIMPLE001_FONT"],
["SIMPLE007", "simple", "周而复始。", "周而复始。", "SIMPLE007_FONT"],
["SIMPLE008", "simple", "周五愉快", "周五愉快", "SIMPLE008_FONT"],
];
const seedById = new Map(seeds.map((seed) => [seed[0], seed]));
const textCatalogById = new Map(complexAssetCatalog.text_templates.map((item) => [item.template_id, item]));
export const P0A_TEXT_TEMPLATES: readonly TextTemplateDefinition[] = P0A_TEXT_TEMPLATE_IDS.map((templateId, catalogOrder) => {
const seed = seedById.get(templateId);
if (!seed) throw new Error(`missing text template definition ${templateId}`);
const item = textCatalogById.get(templateId);
if (!item) throw new Error(`missing text template definition ${templateId}`);
return {
available: seed[5] === true,
available: item.available,
catalogOrder,
category: seed[1],
defaultFontId: seed[4],
defaultFontSize: 48,
defaultText: seed[3],
displayName: seed[2],
...(seed[5] === true ? { fontUrl: `/api/v1/assets/public/${resourceVersion}/${seed[4]}` } : {}),
resourceClass: seed[6] ?? "zip_template",
category: item.category as TextTemplateCategory,
defaultFontId: item.default_font_id,
defaultFontSize: item.default_font_size,
defaultText: item.default_text,
displayName: item.display_name,
fontUrl: `/api/v1/assets/public/${resourceVersion}/${item.default_font_id}`,
...(item.preview_asset_id ? { previewUrl: `/api/v1/assets/public/${resourceVersion}/${item.preview_asset_id}` } : {}),
resourceClass: item.resource_class as "parameter_only" | "zip_template",
resourceVersion,
templateId,
};
});
const fontOptionDefinitions: Readonly<Record<typeof P0A_REQUIRED_FONT_PANEL_IDS[number], string>> = {
FONT005: "Rammetto",
FONT008: "正圆体",
FONT011: "默陌手写",
FONT021: "喜月体",
FONT022: "素白体",
FONT027: "锐正圆",
FONT039: "字由油漆",
FONT043: "喜脉体",
FONT046: "可口可乐",
FONT052: "Oraqle Script",
FONT081: "Lexend Deca",
};
const fontCatalogById = new Map(complexAssetCatalog.font_panel_items.map((item) => [item.font_id, item]));
export const P0A_FONT_OPTIONS: readonly FontOption[] = P0A_REQUIRED_FONT_PANEL_IDS.map((fontId) => ({
displayName: fontOptionDefinitions[fontId],
fontId,
url: `/api/v1/assets/public/${resourceVersion}/${fontId}`,
}));
export const P0A_FONT_OPTIONS: readonly FontOption[] = P0A_REQUIRED_FONT_PANEL_IDS.map((fontId) => {
const item = fontCatalogById.get(fontId);
if (!item) throw new Error(`missing font panel definition ${fontId}`);
return {
displayName: item.display_name,
fontId,
url: `/api/v1/assets/public/${resourceVersion}/${fontId}`,
};
});
export function fontOption(fontId: string) {
return P0A_FONT_OPTIONS.find((option) => option.fontId === fontId);
+3 -1
View File
@@ -33,7 +33,9 @@ export function TextTemplatePanel(props: {
const status = props.fontStatuses[template.defaultFontId] ?? "idle";
const unavailable = !template.available || status === "unavailable";
return <button aria-label={`${template.templateId} ${template.displayName}${unavailable ? " 素材暂不可用" : ""}`} disabled={!props.canAdd || unavailable || status === "loading"} key={template.templateId} onClick={() => props.onAdd(template)} type="button">
<span className={`editor-template-mark ${template.category}`}>{template.displayName.slice(0, 2)}</span>
{template.previewUrl
? <img alt="" className="editor-template-preview" decoding="async" loading="lazy" src={template.previewUrl} />
: <span className={`editor-template-mark ${template.category}`}>{template.displayName.slice(0, 2)}</span>}
<strong>{template.templateId}</strong>
<span>{template.displayName}</span>
{unavailable ? <small></small> : status === "loading" ? <small></small> : null}
+1 -1
View File
@@ -112,7 +112,7 @@ export function validateWp5FinalManifest(path) {
const raw = readFileSync(path, "utf8");
if (raw.includes(WP4_07_RED_RESOURCE_VERSION) || raw.includes("fixture-v1")) throw new Error("WP4_07_PLACEHOLDER_ASSET_REJECTED");
const manifest = JSON.parse(raw);
const expectedCounts = { color_cards: 4, dynamic_stickers: 10, font_panel_items: 11, static_parts: 25, static_stickers: 1_407, text_templates: 32 };
const expectedCounts = { color_cards: 16, dynamic_stickers: 35, font_panel_items: 86, static_parts: 25, static_stickers: 1_407, text_templates: 332 };
for (const [key, expected] of Object.entries(expectedCounts)) {
if (manifest.counts?.[key] !== expected) throw new Error(`WP4_07_FINAL_MANIFEST_COUNT_MISMATCH:${key}`);
}
+1 -1
View File
@@ -80,7 +80,7 @@ function findFiles(directory, name) {
if (phase === "green") {
const traces = findFiles(outputDirectory, "trace.zip");
const whiteTrace = traces.find((path) => path.toLowerCase().includes("wp5-white-001") || path.toLowerCase().includes("p0-a-public-allowlist"));
const whiteTrace = traces.find((path) => path.toLowerCase().includes("wp5-white-001") || path.toLowerCase().includes("complete-complex-asset-catalog"));
const colorTrace = traces.find((path) => path.toLowerCase().includes("wp5-col-001") || path.toLowerCase().includes("shared-five-color"));
if (whiteTrace) copyFileSync(whiteTrace, resolve(whiteDirectory, "trace.zip"));
if (colorTrace) copyFileSync(colorTrace, resolve(colorDirectory, "trace.zip"));
+13 -9
View File
@@ -76,24 +76,28 @@ async function routeEditor(page: Page, projectId: string, backend: Backend) {
backend.recent = [item, ...backend.recent.filter((entry) => entry.asset_id !== item.asset_id)];
await route.fulfill({ body: JSON.stringify({ status: "recorded" }), contentType: "application/json", status: 200 });
});
await page.route("**/api/v1/assets/public/p0a-complex-v1/*", (route) => route.fulfill({ body: fontBytes, contentType: "font/ttf", status: 200 }));
const previewPng = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=", "base64");
await page.route("**/api/v1/assets/public/p0a-complex-v1/*", (route) => {
const preview = new URL(route.request().url()).pathname.includes("TEXT-PREVIEW-");
return route.fulfill(preview ? { body: previewPng, contentType: "image/png", status: 200 } : { body: fontBytes, contentType: "font/ttf", status: 200 });
});
}
test("TDD-WP4-TXT-003 exposes the frozen catalog, display-name search and account recent use", async ({ page }) => {
test("TDD-WP4-TXT-003 exposes the complete catalog, display-name search and account recent use", async ({ page }) => {
const projectId = uuid(730);
const backend: Backend = { canvas: emptyCanvas(), recent: [], saves: 0, version: 2 };
await routeEditor(page, projectId, backend);
await page.goto(`${webUrl}/app/projects/${projectId}/editor`);
await page.getByRole("button", { name: "文字模板", exact: true }).click();
await expect(page.locator(".editor-template-grid button")).toHaveCount(32);
for (const [label, count] of [["花字", 8], ["标题", 8], ["标签", 8], ["简约", 8]] as const) {
await expect(page.locator(".editor-template-grid button")).toHaveCount(332);
for (const [label, count] of [["花字", 145], ["标题", 119], ["标签", 51], ["简约", 17]] as const) {
await page.getByRole("button", { name: label, exact: true }).click();
await expect(page.locator(".editor-template-grid button")).toHaveCount(count);
}
await page.getByRole("button", { name: "全部", exact: true }).click();
const search = page.getByPlaceholder("搜索文字模板显示名称");
await search.fill("生活");
await expect(page.locator(".editor-template-grid button")).toHaveCount(5);
await expect(page.locator(".editor-template-grid button")).toHaveCount(9);
await search.fill("FLOWER001");
await expect(page.locator(".editor-template-grid button")).toHaveCount(0);
await search.fill("");
@@ -101,7 +105,7 @@ test("TDD-WP4-TXT-003 exposes the frozen catalog, display-name search and accoun
const flowerTemplate = page.getByRole("button", { name: /FLOWER001 春日计划/ });
await flowerTemplate.hover();
await expect(flowerTemplate).toHaveCSS("background-color", "rgb(255, 255, 214)");
await expect(flowerTemplate.locator(".editor-template-mark")).toHaveCSS("transform", "matrix(1.03, 0, 0, 1.03, 0, 0)");
await expect(flowerTemplate.locator(".editor-template-preview")).toHaveCSS("transform", "matrix(1.03, 0, 0, 1.03, 0, 0)");
await flowerTemplate.click();
await expect(page.getByText("对象 1 / 50")).toBeVisible();
await expect.poll(() => backend.recent).toEqual([{ asset_id: "FLOWER001", asset_kind: "text_template", resource_version: "p0a-complex-v1" }]);
@@ -110,8 +114,8 @@ test("TDD-WP4-TXT-003 exposes the frozen catalog, display-name search and accoun
await expect(page.getByLabel("最近使用文字模板").getByText("FLOWER001", { exact: true })).toBeVisible();
await page.getByRole("button", { name: "普通贴纸", exact: true }).click();
expect(page.getByPlaceholder("搜索普通贴纸")).toHaveCount(0);
writeEvidence("TDD-WP4-TXT-003-catalog-search-recent", "catalog.json", { categories: { flower: 8, simple: 8, tag: 8, title: 8 }, count: 32, first: "FLOWER001", last: "SIMPLE008" });
writeEvidence("TDD-WP4-TXT-003-catalog-search-recent", "response.json", { public_count: 32, recent: backend.recent, unavailable_is_disabled: true });
writeEvidence("TDD-WP4-TXT-003-catalog-search-recent", "catalog.json", { categories: { flower: 145, simple: 17, tag: 51, title: 119 }, count: 332, first: "FLOWER001", last: "SIMPLE017" });
writeEvidence("TDD-WP4-TXT-003-catalog-search-recent", "response.json", { public_count: 332, recent: backend.recent, unavailable_count: 0 });
writeEvidence("TDD-WP4-TXT-003-catalog-search-recent", "db-diff.json", { account_user_id: userId, recent: backend.recent, search_did_not_write: true });
});
@@ -228,7 +232,7 @@ test("POSTV1-07 keeps the canvas anchored when the text template panel opens", a
if (!before) throw new Error("Canvas geometry is unavailable before opening text templates.");
await page.getByRole("button", { name: "文字模板", exact: true }).click();
await expect(page.locator(".editor-template-grid button")).toHaveCount(32);
await expect(page.locator(".editor-template-grid button")).toHaveCount(332);
const after = await stage.boundingBox();
if (!after) throw new Error("Canvas geometry is unavailable after opening text templates.");
const assetsPanelScroll = await page.getByLabel("素材与底图来源").evaluate((panel) => ({
+15 -18
View File
@@ -64,7 +64,10 @@ async function routeEditor(page: Page, backend: Backend) {
});
await page.route("**/api/v1/assets/recent?asset_kind=text_template", (route) => route.fulfill({ body: JSON.stringify({ items: [] }), contentType: "application/json" }));
await page.route("**/api/v1/assets/recent", (route) => route.fulfill({ body: JSON.stringify({ status: "recorded" }), contentType: "application/json" }));
await page.route("**/api/v1/assets/public/p0a-complex-v1/*", (route) => route.fulfill({ body: fontBytes, contentType: "font/ttf" }));
await page.route("**/api/v1/assets/public/p0a-complex-v1/*", (route) => {
const preview = new URL(route.request().url()).pathname.includes("TEXT-PREVIEW-");
return route.fulfill(preview ? { body: png, contentType: "image/png" } : { body: fontBytes, contentType: "font/ttf" });
});
await page.route("**/api/v1/assets/public/p0a-static-v1/*", (route) => route.fulfill({ body: png, contentType: "image/png" }));
await page.route(`**/api/v1/private-assets/projects/${projectId}/images/${backgroundId}`, (route) => route.fulfill({ body: rawSvg(), contentType: "image/svg+xml" }));
}
@@ -91,7 +94,7 @@ test.beforeAll(async () => {
test.afterAll(async () => vite.close());
test("TDD-WP5-WHITE-001 exposes only the P0-A public allowlist", async ({ page }) => {
test("POSTV1-ASSET-ALL-16 exposes the complete complex asset catalog", async ({ page }) => {
const backend: Backend = { canvas: canvas(), saves: 0, version: 1 };
await routeEditor(page, backend);
await page.goto(`${webUrl}/app/projects/${projectId}/editor`);
@@ -99,7 +102,6 @@ test("TDD-WP5-WHITE-001 exposes only the P0-A public allowlist", async ({ page }
await page.getByRole("button", { name: "文字模板", exact: true }).click();
const textIds = await page.locator(".editor-template-grid button strong").allTextContents();
expect(textIds).toEqual(P0A_TEXT_TEMPLATE_IDS);
expect(textIds).not.toContain("FLOWER009");
await page.getByRole("button", { name: /FLOWER001 春日计划/ }).click();
await expect(page.getByText("对象 1 / 50")).toBeVisible();
await expect(page.getByLabel("字体覆盖")).toBeVisible();
@@ -109,12 +111,12 @@ test("TDD-WP5-WHITE-001 exposes only the P0-A public allowlist", async ({ page }
await page.getByRole("button", { name: "色卡", exact: true }).click();
const colorIds = await page.locator(".editor-provider-grid button strong").allTextContents();
expect(colorIds).toEqual(P0A_COLOR_CARD_IDS);
expect(colorIds).not.toContain("COLOR003");
await page.getByRole("button", { name: "动态贴纸", exact: true }).click();
const dynamicIds = await page.locator(".editor-provider-grid button strong").allTextContents();
expect([...dynamicIds].sort()).toEqual([...P0A_DYNAMIC_STICKER_IDS].sort());
expect(dynamicIds).not.toContain("DYN005");
await page.getByRole("button", { name: /添加动态贴纸 DYN035/ }).click();
await expect.poll(() => backend.canvas.elements.some((element) => element.template_or_asset_id === "DYN035")).toBe(true);
await page.getByRole("button", { name: "普通贴纸", exact: true }).click();
await expect(page.getByText("共 1,407 张", { exact: true })).toBeVisible();
@@ -130,27 +132,22 @@ test("TDD-WP5-WHITE-001 exposes only the P0-A public allowlist", async ({ page }
}
});
test("TDD-WP5-COL-001 renders four layouts from one shared five-color snapshot", async ({ page }) => {
test("POSTV1-ASSET-ALL-16 renders sixteen layouts from one shared five-color snapshot", async ({ page }) => {
test.setTimeout(60_000);
const backend: Backend = { canvas: canvas(), saves: 0, version: 1 };
await routeEditor(page, backend);
await page.goto(`${webUrl}/app/projects/${projectId}/editor`);
await page.getByRole("button", { name: "色卡", exact: true }).click();
const placements = [
[["ArrowLeft", 10], ["ArrowUp", 8]],
[["ArrowRight", 10], ["ArrowUp", 8]],
[["ArrowLeft", 10], ["ArrowDown", 8]],
[["ArrowRight", 10], ["ArrowDown", 8]],
] as const;
for (const [index, id] of P0A_COLOR_CARD_IDS.entries()) {
await page.getByRole("button", { name: new RegExp(`添加色卡 ${id}`) }).click();
await expect.poll(() => backend.canvas.elements.length).toBe(index + 1);
for (const [key, times] of placements[index]!) {
for (let press = 0; press < times; press += 1) await page.getByLabel("编辑画布").press(`Shift+${key}`);
}
await expect(page.getByText(`对象 ${index + 1} / 50`)).toBeVisible();
}
await expect.poll(() => backend.canvas.elements.length, { timeout: 10_000 }).toBe(16);
const palettes = backend.canvas.elements.map((element) => element.colors);
expect(palettes.every((palette) => JSON.stringify(palette) === JSON.stringify(palettes[0]))).toBe(true);
expect(backend.canvas.elements.map((element) => element.style_id)).toEqual(["style_01", "style_02", "style_08", "style_16"]);
expect(backend.canvas.elements.map((element) => element.style_id)).toEqual(
Array.from({ length: 16 }, (_, index) => `style_${String(index + 1).padStart(2, "0")}`),
);
const pixels = await page.getByLabel("编辑画布").evaluate((stage: HTMLCanvasElement) => {
const context = stage.getContext("2d");
if (!context) throw new Error("canvas context unavailable");
@@ -161,7 +158,7 @@ test("TDD-WP5-COL-001 renders four layouts from one shared five-color snapshot",
});
mergeEvidence(evidencePath("color", "palette.json"), { browser_palettes: palettes, same_palette_snapshot: true });
mergeEvidence(evidencePath("color", "pixel-diff.json"), {
...pixels, four_renderers_visible: true, significant_pixel_ratio: 0, status: pixels.opaque_pixels > 0 ? "passed" : "failed",
...pixels, sixteen_renderers_available: true, significant_pixel_ratio: 0, status: pixels.opaque_pixels > 0 ? "passed" : "failed",
});
const screenshot = evidencePath("color", "screenshots/color-cards.png");
if (screenshot) {
+13
View File
@@ -1,6 +1,10 @@
import { describe, expect, it } from "vitest";
import complexAssetCatalog from "../../apps/web/src/generated/complex-assets.json";
import { P0A_DYNAMIC_STICKERS } from "../../apps/web/src/dynamic-provider.js";
import { DYNAMIC_RENDER_MODELS } from "../../apps/web/src/dynamic-render-models.js";
import { P0A_COLOR_CARDS } from "../../apps/web/src/palette-provider.js";
import { P0A_FONT_OPTIONS, P0A_TEXT_TEMPLATES } from "../../apps/web/src/text-assets.js";
import {
P0A_COLOR_CARD_IDS,
P0A_DYNAMIC_STICKER_IDS,
@@ -36,4 +40,13 @@ describe("POSTV1-ASSET-ALL-16 complete asset catalog", () => {
expect(complexAssetCatalog.text_templates.every((item) => item.available)).toBe(true);
expect(JSON.stringify(complexAssetCatalog)).not.toMatch(/[A-Z]:[\\/]/i);
});
it("exposes every generated definition to the editor", () => {
expect(P0A_TEXT_TEMPLATES).toHaveLength(332);
expect(P0A_TEXT_TEMPLATES.every((item) => item.available && item.fontUrl)).toBe(true);
expect(P0A_FONT_OPTIONS).toHaveLength(86);
expect(P0A_COLOR_CARDS).toHaveLength(16);
expect(P0A_DYNAMIC_STICKERS).toHaveLength(35);
expect(Object.keys(DYNAMIC_RENDER_MODELS)).toHaveLength(35);
});
});
+12 -15
View File
@@ -3,6 +3,7 @@ import type { CanvasState } from "@dada/shared-contracts";
import {
P0A_TEXT_TEMPLATES,
P0A_FONT_OPTIONS,
TextEditSession,
createTextTemplateElement,
effectiveFontSize,
@@ -13,19 +14,15 @@ import { elementHalfExtents } from "../../apps/web/src/editor-elements.js";
const identity = { createdAt: "2026-08-03T03:00:00.000Z", elementId: "00000000-0000-4000-8000-000000000701" };
describe("TASK-WP4-03 text templates and properties", () => {
it("keeps the frozen 32-template allowlist in catalog order and searches display names only", () => {
expect(P0A_TEXT_TEMPLATES).toHaveLength(32);
expect(P0A_TEXT_TEMPLATES.map((template) => template.templateId)).toEqual([
"FLOWER001", "FLOWER002", "FLOWER003", "FLOWER004", "FLOWER005", "FLOWER006", "FLOWER007", "FLOWER008",
"H001", "H002", "H003", "H004", "H005", "H006", "H007", "H008",
"TAG001", "TAG002", "TAG003", "TAG004", "TAG005", "TAG006", "TAG007", "TAG051",
"SIMPLE001", "SIMPLE002", "SIMPLE003", "SIMPLE004", "SIMPLE005", "SIMPLE006", "SIMPLE007", "SIMPLE008",
]);
it("keeps the complete 332-template catalog order and searches display names only", () => {
expect(P0A_TEXT_TEMPLATES).toHaveLength(332);
expect(P0A_TEXT_TEMPLATES[0]?.templateId).toBe("FLOWER001");
expect(P0A_TEXT_TEMPLATES.at(-1)?.templateId).toBe("SIMPLE017");
expect(P0A_TEXT_TEMPLATES.reduce<Record<string, number>>((counts, template) => {
counts[template.category] = (counts[template.category] ?? 0) + 1;
return counts;
}, {})).toEqual({ flower: 8, simple: 8, tag: 8, title: 8 });
expect(searchTextTemplates(P0A_TEXT_TEMPLATES, { query: "生活" }).map((item) => item.templateId)).toEqual(["FLOWER004", "FLOWER005", "H001", "H003", "H006"]);
}, {})).toEqual({ flower: 145, simple: 17, tag: 51, title: 119 });
expect(searchTextTemplates(P0A_TEXT_TEMPLATES, { query: "生活" }).map((item) => item.templateId)).toEqual(expect.arrayContaining(["FLOWER004", "FLOWER005", "H001", "H003", "H006"]));
expect(searchTextTemplates(P0A_TEXT_TEMPLATES, { category: "tag", query: "TAG006" })).toEqual([]);
});
@@ -100,11 +97,11 @@ describe("TASK-WP4-03 text templates and properties", () => {
expect(bounds.y).toBeGreaterThan(0.16);
});
it("does not add unavailable templates or silently replace their archived font", () => {
const unavailable = P0A_TEXT_TEMPLATES.find((template) => !template.available)!;
expect(unavailable).toBeDefined();
expect(() => createTextTemplateElement(unavailable, identity, 0)).toThrowError("text_template_unavailable");
const available = P0A_TEXT_TEMPLATES.find((template) => template.available)!;
it("adds every template with a registered catalog font", () => {
expect(P0A_TEXT_TEMPLATES.every((template) => template.available && template.fontUrl)).toBe(true);
const registeredFonts = new Set(P0A_FONT_OPTIONS.map((font) => font.fontId));
expect(P0A_TEXT_TEMPLATES.every((template) => registeredFonts.has(template.defaultFontId))).toBe(true);
const available = P0A_TEXT_TEMPLATES[0]!;
const element = createTextTemplateElement(available, identity, 0);
expect(element.font_override).toBeUndefined();
expect((element.style_parameters as Record<string, unknown>).default_font_id).toBe(available.defaultFontId);
+16 -16
View File
@@ -45,8 +45,10 @@ describe("TASK-WP4-04 deterministic color cards", () => {
});
});
it("uses the four-item P0-A allowlist and produces a stable five-color MMCQ palette", () => {
expect(P0A_COLOR_CARDS.map((item) => item.cardId)).toEqual(["COLOR001", "COLOR002", "COLOR008", "COLOR016"]);
it("uses all sixteen color-card layouts and produces a stable five-color MMCQ palette", () => {
expect(P0A_COLOR_CARDS).toHaveLength(16);
expect(P0A_COLOR_CARDS[0]?.cardId).toBe("COLOR001");
expect(P0A_COLOR_CARDS.at(-1)?.cardId).toBe("COLOR016");
const pixels = colorPixels([
{ count: 50, rgb: [244, 32, 32] }, { count: 40, rgb: [32, 210, 96] }, { count: 30, rgb: [24, 96, 220] },
{ count: 20, rgb: [248, 210, 48] }, { count: 10, rgb: [120, 64, 180] },
@@ -78,10 +80,10 @@ describe("TASK-WP4-04 dynamic providers", () => {
profile: { creatorName: "Dada Creator", socialId: "@@dada" },
};
it("exposes exactly ten P0-A providers and snapshots time and identity", () => {
expect(P0A_DYNAMIC_STICKERS.map((item) => item.templateId)).toEqual([
"DYN001", "DYN002", "DYN003", "DYN004", "DYN007", "DYN008", "DYN011", "DYN012", "DYN015", "DYN016",
]);
it("exposes all thirty-five providers and snapshots time and identity", () => {
expect(P0A_DYNAMIC_STICKERS).toHaveLength(35);
expect(P0A_DYNAMIC_STICKERS[0]?.templateId).toBe("DYN001");
expect(P0A_DYNAMIC_STICKERS.at(-1)?.templateId).toBe("DYN035");
const time = createDynamicStickerElement("DYN012", context, identity, 0);
expect(time.formatted_value).toBe("09:07");
expect(time.dynamic_fields).toMatchObject({ font_substitution: "FONT081", hour: "09", minute: "07" });
@@ -92,11 +94,10 @@ describe("TASK-WP4-04 dynamic providers", () => {
});
it("uses the archived template categories and only the fields visibly consumed by each source", () => {
expect(P0A_DYNAMIC_STICKERS.map(({ category, templateId }) => [templateId, category])).toEqual([
["DYN001", "location"], ["DYN002", "location"], ["DYN003", "location"], ["DYN004", "location"],
["DYN007", "other"], ["DYN008", "time"], ["DYN011", "time"], ["DYN012", "time"],
["DYN015", "identity"], ["DYN016", "identity"],
]);
expect(P0A_DYNAMIC_STICKERS.reduce<Record<string, number>>((counts, item) => {
counts[item.category] = (counts[item.category] ?? 0) + 1;
return counts;
}, {})).toEqual({ identity: 21, location: 6, other: 1, time: 7 });
const other = createDynamicStickerElement("DYN007", context, identity, 0);
expect(other.dynamic_fields).toEqual({ nickname: "@dada" });
expect(other.formatted_value).toBe("@dada");
@@ -105,11 +106,10 @@ describe("TASK-WP4-04 dynamic providers", () => {
});
it("maps every enabled dynamic sticker to its archived source candidate and original resource version", () => {
expect(Object.entries(DYNAMIC_RENDER_MODELS).map(([id, model]) => [id, model.sourceCandidateId])).toEqual([
["DYN001", "l_POI01"], ["DYN002", "l_POI02"], ["DYN003", "l_POI03"], ["DYN004", "l_POI04"],
["DYN007", "diaoyu"], ["DYN008", "l_shijian2"], ["DYN011", "l_shijian6"], ["DYN012", "l_shijian7"],
["DYN015", "0721userna"], ["DYN016", "l_username00"],
]);
expect(Object.keys(DYNAMIC_RENDER_MODELS)).toHaveLength(35);
expect(DYNAMIC_RENDER_MODELS.DYN001?.sourceCandidateId).toBe("l_POI01");
expect(DYNAMIC_RENDER_MODELS.DYN012?.sourceCandidateId).toBe("l_shijian7");
expect(DYNAMIC_RENDER_MODELS.DYN035?.sourceCandidateId).toBe("l_username23");
const element = createDynamicStickerElement("DYN001", { ...context, location: { formattedValue: "温州" } }, identity, 0);
expect(element.resource_version).toBe(DYNAMIC_RESOURCE_VERSION);
expect(DYNAMIC_RENDER_MODELS.DYN001.imageLayers).toEqual([