@eraserlabs/ diagram- templates (图解)

导言

@eraserlabs/diagram-templates 是 Eraser 股票模板库作为数据:对于每个标签(Shape, Icon, Group, Level,.),它的JSON Schema,它的HTML模板和它的CSS,加上共享的基础 CSS,调色板,从作者字段中获取模板道具的常态化器,以及将库转换为渲染器页面注册的页面设置构建器. 它没有浏览器或Chrimium代码,所以自行绘制元素的主机可以在旁边导入 @eraserlabs/resolve 财务报告和审定财务报表 @eraserlabs/render/fill。 。 。 .

使用量

import { buildRenderPageSetup, stockLibrary, tagSchemas } from '@eraserlabs/diagram-templates';
import { stockNormalizers } from '@eraserlabs/diagram-templates/normalizers';
import { normalizeFetchedIcon } from '@eraserlabs/diagram-templates/svg-transforms';
import { createResolver } from '@eraserlabs/resolve';
import { createFillEngine } from '@eraserlabs/render/fill';

const resolver = createResolver({ library: stockLibrary, normalizers: stockNormalizers, ... });
const { templates } = buildRenderPageSetup(stockLibrary);
const fill = createFillEngine({ templates: Object.fromEntries(Object.entries(templates).map(([n, t]) => [n, t.html])), icons: {} });

@eraserlabs/diagrams (铬导体)依赖于这个包,然后再出口到下面 @eraserlabs/diagrams/library, (中文(简体) ), /normalizers 财务报告和审定财务报表 /svg-transforms,所以这些进口继续工作.

编辑模板

每个标签都住在 src/templates/<Tag>/ 作为 <Tag>.schema.ts, (中文(简体) ), <Tag>.html 财务报告和审定财务报表 <Tag>.style.css。 。 。 . pnpm generate (运行于 build)将 HTML 和 CSS 折叠成 src/generated/templates.gen.ts- 跟踪; pnpm check-generated 跟踪文件已停止时失败 。 见 计算机化.md 模板公约.

直接解析器用,通过两个 library: stockLibrary 财务报告和审定财务报表 normalizers: stockNormalizers,并在渲染时包括库基 CSS. 高层次的图表渲染器会自动安装这些. 内部油漆场等 fillColor 属于 stockLibrary.renderProps,未写入元素。 见 和解合同。 。 。 .