@hlang-org editor-react
为Lumen （hlang可视化编辑器）绑定React。钩子把无头鱼连在一起 @hlang-org/editor-core 来 反应流． 这个包不添加任何样式；设计系统为 @hlang-org/editor-ui.
状态: 0.X，在积极发展中。API可以在任何小版本中更改。
安装
npm install @hlang-org/editor-react @hlang-org/editor-core @xyflow/react react react-dom
相同的构建发布为 @hlang-tech/editor-react． 同行依赖性: react 和 react-dom 18岁或以上； @xyflow/react 12.
使用
import { ReactFlow, ReactFlowProvider } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { createEditorCore } from '@hlang-org/editor-core';
import { useHlangFlow } from '@hlang-org/editor-react';
const core = createEditorCore();
// register node descriptors and add nodes...
function Canvas() {
const flow = useHlangFlow(core);
return <ReactFlow {...flow} fitView />;
}
export function Editor() {
return (
<ReactFlowProvider>
<Canvas />
</ReactFlowProvider>
);
}
useHlangFlow 返回 nodes， edges， onNodesChange， onEdgesChange， onConnect, isValidConnection． 把它们分散到 <ReactFlow>.
绑定是如何工作的
- 方向。 输出(O)端口是一个React Flow
source/sourceHandle;输入(I)端口是atarget/targetHandle.isValidConnection询问核心的验证器，因此在拖动时拒绝无效链接。 - 命令。 连接、删除、移动和重命名作为核心命令执行，因此每个画布编辑都可以撤消。
- 拖动。 在拖动节点时，位置在本地更新，并且在拖动结束时提交一个移动命令。撤消和重做画布上的移动节点。
- 订阅。 胡克把岩心读透了
useSyncExternalStore并且只在相关核心事件触发时才重新渲染。
钩子
| 钩 | 返回 |
|---|---|
useHlangFlow(core) | 道具的 <ReactFlow>，如上所述。 |
useGraphSync(core) | 模型的当前节点和边。 |
useConnect(core)， useIsValidConnection(core) | 连接处理程序和验证回调。 |
useNodeChanges， useEdgeChanges | 提交到核心的React流更改处理程序。 |
useHistory(core) | canUndo， canRedo， undo， redo. |
useSelection(core) | 选定的节点和边id，带有选择设置器。 |
useViewState(core) | 隐藏和锁定节点标志，带有设置和切换。 |
useClipboard(core) | 复制、剪切、粘贴和复制所选内容，包括系统剪贴板。 |
useRename(core) | 通过命令重命名节点。 |
useDiagnostics(core) | 核心的编辑时诊断，也按节点分组。 |
useReconnect(core) | 将边缘端点移动到另一个端口，并在拖拽节点下查找边缘以进行下拉插入。 |
EditorProvider 和 useEditor 通过React上下文共享一个核心。映射助手 toRFNode， toRFEdge， endpointsFromConnection, findPort 为自定义绑定导出。
来源和文件： github.com/hlang-tech/hlang.
许可证
麻省理工学院