diff --git a/docs/docs/guide/expand/editor/graph.md b/docs/docs/guide/expand/editor/graph.md deleted file mode 100644 index 2d5127054..000000000 --- a/docs/docs/guide/expand/editor/graph.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: 图编排扩展 -sidebar_position: 9 ---- -## 项目运行 -### 前置准备 -1. 参考 https://lowcode-engine.cn/site/docs/guide/quickStart/start -2. 参考至Demo下载 https://lowcode-engine.cn/site/docs/guide/quickStart/start#%E4%B8%8B%E8%BD%BD-demo -### 选择demo-graph-x6 -在根目录下执行: -```bash -cd demo-graph-x6 -``` -### 安装依赖 -在 lowcode-demo/demo-graph-x6目录下执行: -```bash -npm install -``` -### 启动Demo -在 lowcode-demo/demo-graph-x6 目录下执行: -```bash -npm run start -``` -之后就可以通过 http://localhost:5556/ 来访问我们的 DEMO 了。 - -## 认识Demo -这里的Demo即通过图编排引擎加入了几个简单的物料而来,已经是可以面向真是用户的产品界面。 - -### 区域组成 -#### 顶部:操作区 -- 右侧:保存到本地、重置页面、自定义按钮 -#### 顶部:工具区 -- 左侧:删除、撤销、重做、放大、缩小 -#### 左侧:面板与操作区 -- 物料面板:可以查找节点,并在此拖动节点到编辑器画布中 -#### 中部:可视化页面编辑画布区域 -- 点击节点/边在右侧面板中能够显示出对应组件的属性配置选项 -- 拖拽修改节点的排列顺序 -#### 右侧:组件级别配置 -- 选中的组件:从页面开始一直到当前选中的节点/边位置,点击对应的名称可以切换到对应的节点上 -- 选中组件的配置:属性:节点的基础属性值设置 - -> 每个区域的组成都可以被替换和自定义来生成开发者需要的业务产品。 - -## 目录介绍 - - -- public:与其他demo保持一致,均是lowcode engine所必要依赖 -- src - - plugins::自定义插件,完成了x6的切面回调处理功能 - - services:mock数据,真实场景中可能为异步获取数据 - -## 开发插件 -```typescript -function pluginX6DesignerExtension(ctx: IPublicModelPluginContext) { - return { - init() { - // 获取 x6 designer 内置插件的导出 api - const x6Designer = ctx.plugins['plugin-x6-designer'] as IDesigner; - - x6Designer.onNodeRender((model, node) => { - // @ts-ignore - // 自定义 node 渲染逻辑 - const { name, title } = model.propsData; - node.attr('text/textWrap/text', title || name); - }); - - x6Designer.onEdgeRender((model, edge) => { - // @ts-ignore - const { source, target, sourcePortId, targetPortId } = model.propsData; - console.log(sourcePortId, targetPortId); - requestAnimationFrame(() => { - edge.setSource({ cell: source, port: sourcePortId }); - edge.setTarget({ cell: target, port: targetPortId }); - }); - - // https://x6.antv.vision/zh/docs/tutorial/intermediate/edge-labels x6 标签模块 - // appendLabel 会触发 onEdgeLabelRender - edge.appendLabel({ - markup: Markup.getForeignObjectMarkup(), - attrs: { - fo: { - width: 120, - height: 30, - x: -60, - y: -15, - }, - }, - }); - }); - - x6Designer.onEdgeLabelRender((args) => { - const { selectors } = args - const content = selectors.foContent as HTMLDivElement - if (content) { - ReactDOM.render(