-
双击编辑的问题
-
节点问题
问题1：
问题描述：同时启用框选插件和双击编辑 编辑不了
- 问题描述 当同时启用框选插件和双击编辑工具的时候，双击编辑之后正常的应该是再点击文本 确定之后再点击确定光标的位置 但是再点击编辑不了文字
- 效果图
-
错误思路
- 当时想着应该是监听双击事件 在双击事件里添加编辑工具 但是还是有问题
-
graph.on('cell:dblclick', ({ cell, e }) => { node.removeTools() node.addTools([ { name: 'node-editor', args: { } } ]) })
解决方法 ：在选择节点的时候 进行监听事件 添加编辑工具```
graph.on('node:selected', ({ node }) => { node.removeTools() node.addTools([ { name: 'node-editor', args: { attrs: { fontSize: node.getAttrs()?.text?.fontSize, color: node.getAttrs()?.text?.fill || node.getAttrs()?.label?.fill || '#000000', fontFamily: node.getAttrs()?.text?.fontFamily || node.getAttrs()?.label?.fontFamily } } } ]) })
#### ### 问题2： #### 问题描述 当修改节点内的文本的位置后，再双击编辑 文本位置应该是修改后的位置，但是这个位置需要计算 更改 node-editor 中x y 的值  文本右上角对齐 但是 双击编辑会回到原来的位置  x6 官方文章上提供了修改 x,y 的值 可以 改变文本的位置 graph.on('cell:selected', ({ cell, options }) => { console.log(cell.getBBox(), 'options') cell.removeTools() if (cell.isNode()) { cell.addTools([ { name: 'node-editor', args: { y: '0%', x: '0%', attrs: { textAlign: 'left', backgroundColor: 'transparent ', fontSize: cell.getAttrs()?.text?.fontSize, color: cell.getAttrs()?.text?.fill || cell.getAttrs()?.label?.fill || '#000000', fontFamily: cell.getAttrs()?.text?.fontFamily || cell.getAttrs()?.label?.fontFamily } } } ]) }效果图  Y 是生效了 但是 X 值没有生效 #### 解决方法 ：text-align 影响了 x 值的修改 但是渲染还有问题.x6-node-tool { .x6-node-tool-editor { text-align: right; } }
### 问题3 #### 问题描述：修改行高 文档中也没有可以修改行高的方法 #### 解决方法：同理 可以 从当前节点获取行高 来修改这个类名的行高 来达到编辑时候 显示正确的样式 2. ## <!----> 3. ## 边的问题 ### 1.1.3 当启用 路径点工具和线段工具的时候 双击编辑的边上的label时 有冲突 双击编辑不了 - [vertices](https://x6.antv.antgroup.com/zh/docs/api/registry/edge-tool#vertices) 路径点工具，在路径点位置渲染一个小圆点，拖动小圆点修改路径点位置，双击小圆点删除路径点，在边上单击添加路径点。 - [segments](https://x6.antv.antgroup.com/zh/docs/api/registry/edge-tool#segments) 线段工具。在边的每条线段的中心渲染一个工具条，可以拖动工具条调整线段两端的路径点的位置。 ``` graph.on('cell:selected', ({ cell, options }) => { cell.removeTools() if (cell.isEdge()) { cell.attr('line/stroke', 'blue') cell.addTools([ { name: 'edge-editor', args: {} }, { name: 'vertices', args: { attrs: { fill: 'blue' } } } ]) } ``` https://github.com/antvis/X6/issues/3575 github上提出的一些问题 -
2. 框选多个节点 一键对齐
思路：
找到框选的范围 X,Y，宽高 之后 编辑每一个节点 让节点以这个框选的范围为参考点 进行修改位置
解决方法：
const handleAlign = (alignment : string) => {
if ( ! node.length) return
let minX = Infinity
let minY = Infinity
let maxX = -Infinity
let maxY = -Infinity
node.forEach((cell) => {
if ( ! cell.isNode()) return
const { x, y } = cell.getPosition() // 获取节点的 x, y 位置
const { width, height } = cell.getSize() // 获取节点的宽高
// 更新最小和最大值
minX = Math.min(minX, x)
minY = Math.min(minY, y)
maxX = Math.max(maxX, x + width)
maxY = Math.max(maxY, y + height)
})
node.forEach((cell) => {
if ( ! cell.isNode()) return
console.log(cell.getSize())
console.log(cell.position())
})
const bbox = {
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY
}
node.forEach((cell) => {
if ( ! cell.isNode()) return
const currentPosition = cell.getPosition()
let targetX = currentPosition.x
let targetY = currentPosition.y
switch (alignment) {
case 'AlignHorizontalLeft':
targetX = bbox.x // 左对齐
break
case 'AlignHorizontalRight':
targetX = bbox.x + bbox.width - cell.getSize().width // 右对齐
break
case 'AlignHorizontalCenter':
targetX = bbox.x + (bbox.width - cell.getSize().width) / 2 // 居中对齐
break
case 'AlignVerticalTop':
targetY = bbox.y // 顶端对齐
break
case 'AlignVerticalBottom':
targetY = bbox.y + bbox.height - cell.getSize().height // 底端对齐
break
case 'AlignVerticalCenter':
targetY = bbox.y + (bbox.height - cell.getSize().height) / 2 // 垂直居中对齐
break
default:
break
}
cell.setPosition(targetX, targetY)
})
}
3. 文本在节点内的位置修改
问题描述： 当初在写对齐功能的时候
X6上的几个坐标属性
-
refX 设置X 坐标 目标目标相对于 ref 元素左上角的X 坐标
-
RefY 同理设置Y 坐标 目标相对于 ref 左上角 Y 坐标
-
textVerticalAnchor
- 元素与Y轴在垂直方向的对齐方式 top 元素顶部与Y对齐 middle中心对齐 bottom 底部对齐
-
textAnchor
- 同理 元素在X 轴的对齐方法
例子 居左顶部对齐
设置属性 refX =0 refY = 0 textAnchor = start textVerticalAnchor= top
遇到问题
官网描述 说的[0,1]之间 所以就认为 1也可以但是 实际开发的过程中 发现 1 是不行的，参考官网的例子 上面写的是 0.99 后来将值改成 0.99 则完成了开发。
4.自动换行和编辑节点有冲突
往attrs/label/textwrap 中增加属性 可以实现自动换行功能，保证文本不超出节点框，ellipsis属性可以将多的文本显示...
但是和节点编辑功能有冲突
编辑的时候 原来文本没有隐藏 而且位置也不对
Mermaid的自动换行
-
换行符
br或者换行符都可以自动换行
\n 没有生效
-
如果没有换行符 自动换行
Mermaid是 运用 节点元素宽度最大为200 超出自动换行 但是换行完没显示br
修改完
AntX 6 的换行
原理是 增加了tspan 元素实现换行
\n 和br 都生效
5.初始化项目的时候 当移动元素的时候 会有黏粘性效果
问题描述
当拖动的时候，正确流程应该是 鼠标按下 开始拖动元素 鼠标移动 元素移动 鼠标抬起 元素放到画布上但是刚初始项目的时候 遇到需要抬起后 再点击一下 画布才能放到画布上
解决方法
后来对比官网的例子 关闭开发模式
理解
官网推荐：严格模式仅在开发模式下生效 可以帮助发现代码中已存在但在生产过程中难以可靠重现的错误
作用
- 组件将会重新渲染 重新运行
- 额外执行refs回调
- 检查是否弃用API
应该是重新渲染了两次 导致有这个黏粘效果
// import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import '@/assets/styles/index.scss'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(<App />)
暂时无法在飞书文档外展示此内容
