@ eraserlabs/ 放弃
导言
@eraserlabs/render 是一个内浏览器 一半的渲染管道。 鉴于已解析的元素和一个已准备好的模板库,它会填充标记、挂载和隔离每个模板的CSS,测量浏览器实际制作的框,通过路径连接 @eraserlabs/layout,并将结果应用为定位节点加全场SVG覆盖.
它作为自成一体的IIFE在Chromium运行(@eraserlabs/render/browser/iife显示为 window.__eraser),这就是如何 @eraserlabs/diagrams 驱动它。 根导出为节点安全场景类型 buildHtmlDocument 并依赖于任何特定浏览器。 可移植元素、图标、模板、角色和字体合同均在 @eraserlabs/protocol。 。 。 .
为什么
授权的宽度和高度是意图,而不是颜料. 文本包装,粘贴,图标和阴影会改变出行和导出必须遵守的框. 这些测量只有在一个真正的布局引擎运行后才存在,所以这个软件包就活在页面中,而不是在节点中近似CSS.
使用量
然后将IIFE插入一页:
window.__eraser.setup({ templates, baseCss });
await window.__eraser.registerFonts({ css, faces });
const { measures, layout } = await window.__eraser.run({
entities,
connections,
icons,
});
const { scene, css } = window.__eraser.serialize();
setup 财务报告和审定财务报表 registerFonts 是页面寿命. run 按请求:填充、挂载、测量、路线、应用. serialize 为 HTML 输出路径返回已定位的场景标记和此捆绑的样式表.
授权连接 points 是路线 - 本地 { x, y } 来源为连接对象 x 编号 : y。适配器将其转换为Tuple几何 @eraserlabs/layout ;输出多管线仍为场景-空间拖曳.
API 和计量合同在 SPEC.md。 。 。 .
编辑器 API
@eraserlabs/render/elements 使解析子集不挂起、 路由或全局设置 :
import { createElementRenderer } from '@eraserlabs/render/elements';
import { buildRenderPageSetup } from '@eraserlabs/diagram-templates';
const renderer = createElementRenderer(buildRenderPageSetup(resolver.library));
const result = await resolver.resolve(
{ elements: selection },
{ partial: true },
);
if (!result.ok) throw new Error(JSON.stringify(result.errors));
const fragment = await renderer.render({
entities: result.entities!,
connections: result.connections!,
icons: result.icons!,
});
安装 renderer.css 挂载 fragment.defs 与 HTML 并行。 环绕每个元素 [data-mdp-tag="<tag>"];主机拥有定位和清理. 已解决的主题自动被应用到模板根上. 使用 applyLayout 以应用现有的几何学而无需走道.
同样的入门出口 measureElements(mounted, entities?) 财务报告和审定财务报表 measureText(root)与图书馆CSS和已注册字体连接、未转换的DOM供应; display:none 无法测量。 这些呼叫等待字体. 与实体,测量应用了完整的渲染器的缩放政策,并恢复了探针样式;没有它们,它读取了当前布局. 文字测量中包含射程碎片及其结合,而不是一行相加的框或一对矩.
@eraserlabs/render/fit 导出同步 measureElement(wrapper) 财务报告和审定财务报表 fitElement(wrapper, constraints)适当的政策是: natural, (中文(简体) ), fixed, (中文(简体) ), content,以及 balanced装配会按探测器的大小进行 宿主决定是否坚持这种几何.
prepareWashMasters(master, elements, { idPrefix }?) 在低等填充和变异前准备水彩定义 props.washSym。 。 。 . renderer.render(request, { idPrefix }?) 处理克隆和准备本身。 保留已挂载的返回定义;可选前缀必须在挂载的碎片中是独一无二的,只使用字母,数字,下划线和连字符. 自动前缀隔开捆绑.