Skip to content

fix(snapline): snapline cannot show when zoomed #2153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(snapline): snapline cannot show when zoomed #2153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/core/src/LogicFlow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,10 @@ export class LogicFlow {
})

if (initOptions.snapline !== false) {
this.snaplineModel = new SnaplineModel(this.graphModel)
this.snaplineModel = new SnaplineModel(
this.graphModel,
initOptions.snaplineEpsilon,
)
snapline(eventCenter, this.snaplineModel)
}
if (!initOptions.isSilentMode) {
Expand Down
40 changes: 29 additions & 11 deletions packages/core/src/model/SnaplineModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,18 @@ export class SnaplineModel {
@observable isShowVertical: boolean
// 对齐线的中心位置，目前仅展示中心对齐的情况，后面可以考虑多种对齐策略
@observable position: Position
// 对齐线显示的阈值距离
epsilon: number

constructor(graphModel: GraphModel) {
constructor(graphModel: GraphModel, epsilon: number = 1) {
this.isShowHorizontal = false
this.isShowVertical = false
this.position = {
x: 0,
y: 0,
}
this.graphModel = graphModel
this.epsilon = epsilon
}

getStyle() {
Expand All @@ -48,10 +51,10 @@ export class SnaplineModel {
const item = nodes[i]
// 排除当前节点
if (item.id !== draggingNode.id) {
if (x === item.x) {
if (equal(x, item.x, this.epsilon)) {
isShowVertical = true
}
if (y === item.y) {
if (equal(y, item.y, this.epsilon)) {
isShowHorizontal = true
}
// 如果水平垂直都显示，则停止循环。减少不必要的遍历
Expand Down Expand Up @@ -95,19 +98,20 @@ export class SnaplineModel {
// 排除当前节点
if (item.id !== draggingNode.id) {
const itemData = getNodeBBox(item)

// 如果节点的最大最小Y轴坐标与节点的最大最小Y轴坐标相等，展示水平线
if (
itemData.minY === draggingData?.minY ||
itemData.maxY === draggingData?.minY
equal(itemData.minY, draggingData?.minY, this.epsilon) ||
equal(itemData.maxY, draggingData?.minY, this.epsilon)
) {
// 找到则停止循环。减少不必要的遍历
isShowHorizontal = true
horizontalY = draggingData.minY
break
}
if (
itemData.minY === draggingData?.maxY ||
itemData.maxY === draggingData?.maxY
equal(itemData.minY, draggingData?.maxY, this.epsilon) ||
equal(itemData.maxY, draggingData?.maxY, this.epsilon)
) {
isShowHorizontal = true
horizontalY = draggingData.maxY
Expand Down Expand Up @@ -145,24 +149,30 @@ export class SnaplineModel {
}
}
}

for (let i = 0; i < nodes.length; i++) {
const item = nodes[i]
// 排除当前节点
if (item.id !== draggingNode.id) {
const itemData = getNodeBBox(item)
// 如果节点的最大最小X轴坐标与节点的最大最小X轴坐标相等，展示垂直线
if (equal(itemData.minX, draggingData?.minX, this.epsilon)) {
isShowVertical = true
verticalX = draggingData.minX
break
}
if (
itemData.minX === draggingData?.minX ||
itemData.maxX === draggingData?.minX
equal(itemData.minX, draggingData?.minX, this.epsilon) ||
equal(itemData.maxX, draggingData?.minX, this.epsilon)
) {
// 找到则停止循环。减少不必要的遍历
isShowVertical = true
verticalX = draggingData.minX
break
}
if (
itemData.minX === draggingData?.maxX ||
itemData.maxX === draggingData?.maxX
equal(itemData.minX, draggingData?.maxX, this.epsilon) ||
equal(itemData.maxX, draggingData?.maxX, this.epsilon)
) {
isShowVertical = true
verticalX = draggingData.maxX
Expand Down Expand Up @@ -235,4 +245,12 @@ export class SnaplineModel {
}
}

function equal(num1: number, num2: number, epsilon: number) {
if (Math.abs(num1 - num2) <= epsilon) {
return true
} else {
return false
}
}

export default SnaplineModel
1 change: 1 addition & 0 deletions packages/core/src/options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export namespace Options {
history?: boolean
outline?: boolean
snapline?: boolean
snaplineEpsilon?: number
textEdit?: boolean

guards?: GuardsConfig
Expand Down