@hlang-org editor-ui
Lumen设计系统为hlang: React组件为一个节点编辑器构建在React Flow和 @hlang-org/editor-react。黑色和银色的表面，图像和意图节点，活动边缘，以及画布周围的面板。
状态: 0.X，在积极发展中。API可以在任何小版本中更改。
安装
npm install @hlang-org/editor-ui @hlang-org/editor-react @hlang-org/editor-core @xyflow/react react react-dom
相同的构建发布为 @hlang-tech/editor-ui。导入样式表一次：
import '@xyflow/react/dist/style.css';
import '@hlang-org/editor-ui/styles.css';
使用
import { ReactFlow, ReactFlowProvider } from '@xyflow/react';
import { useHlangFlow } from '@hlang-org/editor-react';
import { createHlangFlowTypes } from '@hlang-org/editor-ui';
const { nodeTypes, edgeTypes } = createHlangFlowTypes();
function Canvas({ core }) {
const flow = useHlangFlow(core);
return <ReactFlow {...flow} nodeTypes={nodeTypes} edgeTypes={edgeTypes} colorMode="dark" fitView />;
}
createHlangFlowTypes 为三种节点类型注册节点和边缘组件。节点呈现为框架图像 imageUrl 参数设置，否则为药丸。一条边表示源节点 role 参数作为标签。运行时契约没有改变：每个节点仍然是具有端口的可读、转换或可写节点。
看到 操场上 对于一个完整的编辑器。
组件
| 区域 | 出口 |
|---|---|
| 节点和边 | HlangNode， AssetNodeChrome， PillNodeChrome， NodeChrome， PortRow， SignalBar， NodeBodySlot， FlowEdge， createHlangFlowTypes |
| Shell和工具栏 | EditorShell， Toolbar， UndoRedo， RunButton， ToolbarStat， ToolbarGhostButton， ToolCluster |
| 帆布 | CanvasChrome， CanvasDock， EmptyState |
| 面板 | OutlineTree， RailTabs， AssetGrid， InspectorPanel， ParamForm， PositionPanel， PreviewPanel， DiagnosticBadge |
| 创建节点 | NodeSearch， useNodeSearch， useNodeSearchTriggers （双击画布，或在空白区域上放置连接） |
| 交互 | useEditorHotkeys， NodeContextMenu， useNodeContextMenu， NodeInteractionProvider， Cheatsheet， ToastProvider |
| 现场执行 | LiveSignalProvider， LiveSignalStore， useLiveSignals， useNodeLiveState， useEdgeFlowing |
| 主题 | TOKEN_NAMES， tokenVar， createTheme， EditorUIThemeProvider |
键盘快捷键
useEditorHotkeys(core) 绑定undo (⌘Z)，重做(⇧⌘Z 或者 ⌘Y)、复制、剪切、粘贴、复制(⌘D)，全选(⌘A)，并删除(Delete 或者 Backspace）。 Ctrl 替换 ⌘ 在Windows和Linux上。当文本字段有焦点时，快捷键将被忽略。
现场执行
useLiveSignals(core, handle) 将运行的活动和错误馈送到 LiveSignalStore。节点和边通过id订阅，因此只有状态改变的元素才会重新呈现。
主题
所有颜色、字体和半径都是CSS自定义属性(--hl-*）. 用 createTheme({ 'hl-silver': '#d8dce4' }) 作为一个 style，或 EditorUIThemeProvider.
来源和文件： github.com/hlang-tech/hlang.
许可证
麻省理工学院