feat(core&extension):边与节点文本逻辑优化 #1672
Conversation
|
| @@ -32,6 +32,7 @@ | |||
| "eslint": "^8.45.0", | |||
| "eslint-plugin-react-hooks": "^4.6.0", | |||
| "eslint-plugin-react-refresh": "^0.4.3", | |||
| "medium-editor": "^5.23.3", | |||
| x: 300, | ||
| y: 150, | ||
| value: '11111', | ||
| verticle: true, |
| @@ -151,6 +262,7 @@ export default function BasicNode() { | |||
| // adjustEdge: false, | |||
| allowRotate: true, | |||
| edgeTextEdit: true, | |||
| nodeTextVerticle: true, | |||
There was a problem hiding this comment.
考虑一下是否更名 nodeLabelVertical，不然 nodeText 会有冲突
| @@ -201,7 +315,7 @@ export default function BasicNode() { | |||
| registerElements(lf) | |||
| // 注册事件 | |||
| registerEvents(lf) | |||
|
|
|||
| // lf.extension.selectionSelect.__disabled = true; | |||
packages/core/src/LogicFlow.tsx
Outdated
| content?: string // label html的内容，PS：value是label的纯文本内容 | ||
| } & TextConfig | ||
|
|
||
| export type LabelConfig = { |
packages/core/src/LogicFlow.tsx
Outdated
| @@ -1437,6 +1435,33 @@ export namespace LogicFlow { | |||
| draggable?: boolean | |||
| } & Position | |||
|
|
|||
| // label数据类型声明 | |||
| export type LabelType = { | |||
There was a problem hiding this comment.
LabelConfig
LabelData
packages/core/src/LogicFlow.tsx
Outdated
| export type LabelType = { | ||
| id?: string // label唯一标识 | ||
| relateId?: string // 关联节点/关联边的id | ||
| minWidth?: string | null // label最小宽度 |
packages/core/src/LogicFlow.tsx
Outdated
| maxWidth?: string | null // label最大宽度 | ||
| minHeight?: string | null // label最小高度 | ||
| maxHeight?: string | null // label最大高度 | ||
| style?: object // label自定义样式 |
There was a problem hiding this comment.
SVG -> LogicFlow.ComonTheme
HTML -> h.JSX.CSSProperties
packages/core/src/LogicFlow.tsx
Outdated
| maxHeight?: string | null // label最大高度 | ||
| style?: object // label自定义样式 | ||
| virtical?: boolean // 是否渲染纵向文本 | ||
| isFocus?: boolean // label是否获焦 |
There was a problem hiding this comment.
可以暂时不支持，等到有具体需求的时候，我们再考虑加进来
因为我感觉这个是内部运营状态，初始化设置值有点奇怪
There was a problem hiding this comment.
- isFocus
- isHover
- isInLine
packages/core/src/LogicFlow.tsx
Outdated
| yDeltaDistance?: number // label在x轴上相对节点/边的偏移距离 | ||
| xDeltaDistance?: number // label在y轴上相对节点/边的偏移距离 | ||
| content?: string // label html的内容，PS：value是label的纯文本内容 | ||
| } & TextConfig |
packages/core/src/LogicFlow.tsx
Outdated
| zIndex?: number | ||
| properties?: PropertiesType | ||
| virtual?: boolean // 是否虚拟节点 | ||
| rotate?: number | ||
| textMode?: string |
packages/core/src/algorithm/edge.ts
Outdated
| }) | ||
| return result | ||
| } | ||
| const { minX, minY, maxX, maxY } = result as any |
There was a problem hiding this comment.
可以参考 NodeBBox 类型定义，minX, minY, maxX, maxY 提出类型定义，方便复用
在此处使用这个类型定义
packages/core/src/algorithm/edge.ts
Outdated
| return getDistance(point, segmentStart) | ||
| } | ||
| // 计算边外点在线段上的投影点 | ||
| const t = |
There was a problem hiding this comment.
如果可能得话，可以把数学公式 wiki 或者名字写一下，但不重要，就是好奇
There was a problem hiding this comment.
可能是因为太简单了这个公式没有名字
| @@ -125,3 +141,8 @@ export enum SegmentDirection { | |||
| HORIZONTAL = 'horizontal', | |||
| VERTICAL = 'vertical', | |||
| } | |||
|
|
|||
| export enum TextMode { | |||
packages/core/src/model/BaseModel.ts
Outdated
| @@ -206,6 +207,7 @@ export namespace Model { | |||
|
|
|||
| getData: () => Record<string, unknown> | |||
| getProperties: () => PropertyType | |||
| getTextShape: () => HTMLElement | null | |||
There was a problem hiding this comment.
Remind rename -> getLabelShape
| @@ -87,6 +88,10 @@ export interface EditConfigInterface { | |||
| * 不支持ctrl，ctrl会触发contextmenu | |||
| */ | |||
| multipleSelectKey?: string | |||
| // 节点文本类型 | |||
There was a problem hiding this comment.
Remind: 同步增加下面 editConfig 中的 options
| @@ -151,6 +158,12 @@ export class EditConfigModel { | |||
| @observable nodeTextDraggable = false | |||
| @observable edgeTextDraggable = false | |||
| @observable autoExpand = false | |||
| @observable multipleNodeText = false // 是否支持多个节点文本 | |||
| edgeModel.moveText(x1 - x, y1 - y) | ||
| return | ||
| } | ||
| if (edgeModel.modelType === ModelType.POLYLINE_EDGE) { |
| content: '', | ||
| } | ||
| @observable label: LabelType[] = [] | ||
| @observable properties: Record<string, unknown> = { |
There was a problem hiding this comment.
Remind：看 properties 是否还需要赋值
| * @overridable 支持重写 | ||
| * 获取当前节点文本内容 | ||
| */ | ||
| getTextShape() { |
| ...getEdgeLabelDeltaOfBbox(item, this.pointsList), | ||
| isInLine: | ||
| this.modelType === ModelType.BEZIER_EDGE | ||
| ? isPointInBezier(item, this.pointsList, 20) |
| @@ -1,9 +1,11 @@ | |||
| import { cloneDeep } from 'lodash-es' | |||
| import { cloneDeep, reduce, max } from 'lodash-es' | |||
There was a problem hiding this comment.
TextNodeModel 还原成之前的样式
packages/core/src/style/index.less
Outdated
| @@ -254,3 +254,69 @@ | |||
| .lf-resize-control-w { | |||
| cursor: w-resize; | |||
| } | |||
|
|
|||
| .lf-label-overlay { | |||
There was a problem hiding this comment.
Remind：先移到 extension 中
packages/core/src/view/Label.tsx
Outdated
| @@ -0,0 +1,376 @@ | |||
| import { Component } from 'preact/compat' | |||
| edgeModel.setText( | ||
| Object.assign({}, edgeModel.text, edgeModel.textPosition), | ||
| ) | ||
| } | ||
| // 如果textMode === TEXT |
There was a problem hiding this comment.
如果 textMode === LABEL
| edgeModel.setText( | ||
| Object.assign({}, edgeModel.text, edgeModel.textPosition), | ||
| ) | ||
| } | ||
| // 如果textMode === TEXT | ||
| if ( | ||
| edgeModel.textMode === TextMode.TEXT && |
| if (editConfigModel.edgeTextEdit && model.text.editable) { | ||
| graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT) | ||
| if ( | ||
| (editConfigModel.edgeTextEdit && textMode === TextMode.LABEL) || |
05e991e
to
1e045cf
Compare
| type: 'rect', | ||
| x: 600, | ||
| y: 300, | ||
| textMode: 'label', | ||
| label: ['22221', '22222', '22223'], |
There was a problem hiding this comment.
- 讨论如果是插件添加的数据，应该放在哪儿比较合理？
直接在 NodeData 中加字段？还是在 properties 中增加
There was a problem hiding this comment.
Symbol() 或者 _label . 方便解耦
暂时结论：
- 以后 extension 中新增的数据，都放到 properties
- 确认放到 properties 里面会不会有什么问题
| textMode: 'label', | ||
| label: ['22221', '22222', '22223'], | ||
| properties: { | ||
| LabelOptions: { |
There was a problem hiding this comment.
- LabelOptions 这个为什么要用 大驼峰 0.o
- LabelOptions 放在哪儿比较合适？
- 如果 properties 中增加 label 和 labelOptions 字段，用于 Label 插件使用
There was a problem hiding this comment.
结论：
插件的属性或配置项以 _${插件名小驼峰}${自定义属性名称 大驼峰}
// 会去影响我们 graphData 里面的数据的
{
_labelData // extension 的数据
_labelOptions // extension 的配置
}
node-selection
_nodeSelectionIds
properties._nodeSelectionO: { Ids }
group
// 纯工具类的，不会影响 graphData
_miniMap : {}
_miniMapOptions
{
label: {
data,
options,
}
}
| sourceNodeId: 'custom-node-3', | ||
| targetNodeId: 'custom-node-5', | ||
| type: 'bezier', | ||
| textMode: 'label', |
There was a problem hiding this comment.
textMode 是否要提供节点或边级别的控制粒度，是否直接通过 new LogicFlow 时options 提供 textMode 就行。
内部逻辑是否就可以不那么动态
-> options.labelOptions.textMode
There was a problem hiding this comment.
new LogicFlow({
plugins: [Label]
})
lf.editConfigModel.textMode === 'text'
- 全局配置：默认用的 editConfigModel -> textMode: 'label'
渲染节点或者边的时候，默认就用 label
- 如果元素的 Config 中 properties._labelConfig.textMode = 'text' | 'label'
问题：什么时机去设置 textMode 这个状态值呢 -> plugin 的 init 方法中
| @@ -157,6 +252,7 @@ export default function BasicNode() { | |||
| allowRotate: true, | |||
| // allowResize: true, | |||
| edgeTextEdit: true, | |||
| nodeLabelVerticle: true, | |||
There was a problem hiding this comment.
verticle 这种属性是否可以通过 style 的方式设置
目前有几种可能得设置方式：
- 全局 options
- 节点 properties 中 labelOptions
- 节点中 labelStyle
There was a problem hiding this comment.
PluginOptions: {
Label: {
nodeLabelVertical,
edgeLabelVertical
// ...
}
}
| // TODO: 2. review 一下本函数代码逻辑，确认 nodeIdMap 的作用，看是否有优化的空间 | ||
| console.log('distance', distance) |
packages/core/src/algorithm/edge.ts
Outdated
| } | ||
| }, | ||
| { | ||
| minX: Infinity, |
There was a problem hiding this comment.
review 一下 minX minY maxX maxY 的赋值逻辑
| @@ -9,7 +11,13 @@ let selected: LogicFlow.GraphData | null = null | |||
| function translationNodeData(nodeData: NodeData, distance: number) { | |||
There was a problem hiding this comment.
通过事件的方式联动，目前这种会有代码耦合的问题
因为目前本来 core 包是没有 label 这个概念的
packages/core/src/LogicFlow.tsx
Outdated
| maxHeight?: string | null // label最大高度 | ||
| style?: object // label自定义样式 | ||
| virtical?: boolean // 是否渲染纵向文本 | ||
| isFocus?: boolean // label是否获焦 |
There was a problem hiding this comment.
- isFocus
- isHover
- isInLine
| } | ||
| } | ||
| } | ||
| if (this.textMode === TextMode.LABEL && isArray(this.label)) { |
There was a problem hiding this comment.
在 label 更新时直接通过 setProperties 的方式，将 label 的数据写入 element 的 properties 中，方便最后 getData 使用，与内部方法解耦
| /** | ||
| * 移动边上的文本 | ||
| */ | ||
| @action moveLabel(deltaX, deltaY, labelId?: string): void { |
There was a problem hiding this comment.
通过事件的方式解耦
在 label 内部监听 NodeMove or EdgeMove 事件，根据回调中的 deltaX/deltaY 等重新计算 label 的位置信息
feat(core): 增加label文本相关逻辑&新增折线边和贝塞尔曲线边文本位置计算算法
| @@ -31,7 +49,16 @@ function translationEdgeData(edgeData: EdgeData, distance: number) { | |||
| point.y += distance | |||
| }) | |||
| } | |||
| if (edgeData.text) { | |||
| if (graph.useLabelText(edgeData)) { | |||
| nodeData.text.x += distance | ||
| nodeData.text.y += distance | ||
| } | ||
| graph.eventCenter.emit(EventType.LABEL_SHOULD_UPDATE, { |
There was a problem hiding this comment.
是不是每次 translate 都要触发这个事件，这儿是不是 要加 TEXT_SHOULD_UPDATE 事件
| y1: number // Left Top Y | ||
| x2: number // Right Bottom X | ||
| y2: number // Right Bottom Y | ||
| minX: number // Left Top X |
There was a problem hiding this comment.
mark 一下，因为这个变量是 抛出去的，在一些插件中用了，所以下面得确认一下是否都改过来了
| @@ -765,6 +771,14 @@ export class GraphModel { | |||
| node.text.x += node.x - nodeX | |||
| node.text.y += node.y - nodeY | |||
| } | |||
| this.eventCenter.emit(EventType.LABEL_SHOULD_UPDATE, { | |||
| y1: this.y - this.height / 2, | ||
| x2: this.x + this.width / 2, | ||
| y2: this.y + this.height / 2, | ||
| minX: this.x - this.width / 2, |
There was a problem hiding this comment.
这个改动稍微有点危险，因为这是个公共方法，很多自定义节点可能都会去重写这个方法
feat(extension): 新增Label文本模式,支持配置多文本和修改文本朝向
feat(core): 增加label文本相关逻辑&新增折线边和贝塞尔曲线边文本位置计算算法