@hlang-tech / editor-core
Lumen的无头核心，hlang视觉编辑器。它保存正在编辑的图，仅通过可逆命令更改图，验证连接，报告编辑时诊断，并序列化到 IGraph． 它的公共API中没有React，没有DOM，也没有RxJS，所以它可以在任何JavaScript环境和普通单元测试中运行。
状态: 0.X，在积极发展中。API可以在任何小版本中更改。
安装
npm install @hlang-tech/editor-core
相同的构建发布为 @hlang-org/editor-core。ESM和CommonJS的构建带有类型声明。
使用
import { createEditorCore, AddNodeCommand, ConnectCommand } from '@hlang-tech/editor-core';
import type { NodeDescriptor } from '@hlang-tech/editor-core';
const DTO = { name: 'DTO', kind: 'interface' } as const;
const numbers: NodeDescriptor = {
code: 'numbers',
kind: 'R',
displayName: 'Numbers',
group: 'sources',
ports: [
{ id: 'out', direction: 'O', name: 'out', dataType: DTO, isError: false },
{ id: '@node/error', direction: 'O', name: 'error', dataType: DTO, isError: true },
],
defaultParams: { count: 3 },
runtimeResource: 'my-nodes/numbers',
};
const core = createEditorCore();
core.registry.register(numbers);
const node = core.registry.createNode('numbers', { x: 0, y: 0 });
core.commands.execute(new AddNodeCommand(node));
core.history.undo();
core.history.redo();
const graph = core.serialization.toIGraph(core.model); // IGraph
运行图形
传递一个图形运行器以启用执行。 InterpreterGraphRunner 使用 @hlang-tech/interpreter：
import { Flow } from '@hlang-tech/runtime';
import { NodeRegistry } from '@hlang-tech/interpreter';
import { createEditorCore, InterpreterGraphRunner } from '@hlang-tech/editor-core';
const runtimeNodes = new NodeRegistry().register('numbers', Numbers);
const core = createEditorCore({ graphRunner: new InterpreterGraphRunner(runtimeNodes, () => new Flow()) });
const handle = core.execution?.run(core.model);
handle?.dispose();
编辑核心
createEditorCore(options?) 返回一个 EditorCore 有了这些服务：
| 成员 | 责任 |
|---|---|
model | 正在编辑的图：节点，边，位置，参数。 |
commands | 改变模式的唯一方法。 execute(command) 验证、应用并记录命令。 |
history | undo()， redo()， canUndo()， canRedo(), transact(label, fn) 将命令分组到一个步骤中。 |
selection | 选定的节点和边。不是序列化。 |
viewState | 每个节点的隐藏和锁定标志。不是序列化。 |
registry | 节点描述符(code，类型，端口，默认参数)和 createNode. |
validator | 连接规则：输出到输入，无自连接，无重复，兼容端口类型。允许转换周期。 |
diagnostics | 编辑时的问题，在更改时重新计算。 |
serialization | toIGraph(model) 和 fromIGraph(graph). |
events | 类型化事件总线： nodeAdded， nodeRemoved， nodeChanged， edgeAdded， edgeRemoved， selectionChanged， viewStateChanged， historyChanged. |
execution | 出现时 graphRunner 供应。 |
选项: idGenerator （确定性id，用于测试）和 graphRunner.
命令
AddNodeCommand， RemoveNodeCommand （也删除和恢复相关边）， ConnectCommand， DisconnectCommand， MoveNodeCommand， UpdateParamsCommand， RenameNodeCommand， SetHiddenCommand， SetLockedCommand． 每个命令都有一个逆命令，因此每个编辑都可以撤消。被拒绝的命令返回 { ok: false, error } 并且没有记录。
诊断
| 代码 | 严重程度 | 意义 |
|---|---|---|
bad-connection | 错误 | 一条边打破了一条连接规则。 |
no-source-root | 错误 | 图有节点，但没有可读节点运行。 |
unregistered-code | 错误 | 一个节点的 code 不在注册表中。 |
type-mismatch | 警告 | 边缘连接不兼容的端口类型。 |
dead-source | 警告 | 可读输出不提供任何内容。 |
dangling-input | 警告 | 没有连接Transform输入。 |
sink-no-upstream | 警告 | 未连接可写输入。 |
公用事业公司
cloneNodesWithEdges复制选区及其内部边缘，用于复制和粘贴。planInsertOnEdge和distanceToSegment支持将节点放到边缘上。GraphTopology，TopologyIndex，layoutLayered,layoutGrouped分析连接组件并计算分层布局。
依赖注入
服务是通过一个小的依赖注入容器解析的，采用VS Code (createDecorator， ServiceCollection， InstantiationService）. 它没有运行时依赖项，也不需要 reflect-metadata。使用它来替换自定义容器中的服务。
相关的包
@hlang-tech/editor-react：这个核心的React Flow绑定。@hlang-tech/editor-ui：流明设计系统。
来源和文件： github.com/hlang-tech/hlang.
许可证
麻省理工学院