Skip to content

[Bug Report]: 自定义节点在safari浏览器上拖动画布时,内容偏移 #2274

@StringBuider

Description

@StringBuider

发生了什么?

**项目:**react+ts+vite
**浏览器:**safari
**描述:**自定义节点内容在拖动画布时偏移
截图:
拖动前
Image
拖动后
Image
自定义节点代码demo
`
import LogicFlow from '@logicflow/core';
import { BaseNodeModel, BaseNodeView } from '../baseNode/index';

const getItemDom = (type: 'left' | 'right' | 'top', isActive = false) => {
const item = document.createElement('div');
item.setAttribute('class', default-anchor switch-${type}-anchor ${isActive ? 'active-anchor' : ''});
return item;
};

function createSwitchCaseItem(name: string) {
const caseEl = createNewLineDiv();
const textSpan = document.createElement('span');
textSpan.innerText = name;
textSpan.title = name;
textSpan.style.padding = '0 5px';
caseEl.appendChild(textSpan);
return caseEl;
}

const switch_list = [
{ name: '登录成功', node_key: '23', switchId: 1 },
{ name: '登录失败', node_key: 'sdf', switchId: 2 },
{ name: '登录超时', node_key: 'asdf', switchId: 3 },
{ name: '登录异常', node_key: 'gadf', switchId: 4 },
{ name: '兜底出口', node_key: 'dd', switchId: 5 },
]

const createNewLineDiv = (): HTMLDivElement => {
const newDiv = document.createElement('div');
newDiv.className = 'switch-line';
return newDiv;
};

class SwitchNodeView extends BaseNodeView {
setHtml(rootEl: HTMLElement) {
super.setHtml(rootEl);
const { graphModel, model } = this.props;
const { edges } = graphModel;
const { id } = model;
const leftAnchorId = ${id}_${1}_left;
const isLeftActive = edges.some((edge: LogicFlow.EdgeConfig) => edge.targetAnchorId === leftAnchorId)
const leftAnchor = getItemDom('left', isLeftActive);
const topAnchorId = ${id}_${1}_top;
const isTopActive = edges.some((edge: LogicFlow.EdgeConfig) => edge.targetAnchorId === topAnchorId)
const topAnchor = getItemDom('top', isTopActive);
const nodeNameEl = rootEl.getElementsByClassName('alias-name')[0];
nodeNameEl.appendChild(leftAnchor);
rootEl.appendChild(topAnchor);
const {
properties: {
node_key,
},
} = this.props.model;
// const { name, age }: { name: string; age: number } = this.props.model;
const fragment = document.createDocumentFragment();
const div = document.createElement('div');
div.id = node_switch_case;
let i = 0;
for (const item of switch_list) {
const hde = createSwitchCaseItem(item.name);
hde.style.display = 'flex';
hde.style.alignItems = 'center';
hde.style.justifyContent = 'space-between';
hde.id = node_${node_key}_case_${i};
const anchorId = ${id}_switch_${switch_list[i].switchId}_right
const isActive = edges.some((edge: LogicFlow.EdgeConfig) => edge.sourceAnchorId === anchorId);
const output = getItemDom('right', isActive);
hde.appendChild(output);
div.appendChild(hde);
i++;
}

	fragment.appendChild(div);
	rootEl.style.display = 'block';
	const dom = rootEl.getElementsByClassName('node-body')[0];
	if (dom) {
		dom.appendChild(fragment);
	}
}

}

class SwitchNodeModel extends BaseNodeModel {
getDefaultAnchor(): {
x: number;
y: number;
id: string;
name?: string | number;
}[] {
const { id, x, y, width, height } = this;
const anchors: {
x: number;
y: number;
id: string;
name?: string | number;
}[] = [
{
x: x - width / 2 + 10,
y: y - height / 2 + 82,
id: ${id}_${1}_left
},
{
x: x,
y: y - height / 2 + 10,
id: ${id}_${1}_top,
},
];

	// 获取当前节点标题高度
	const headerDom = document.getElementById(`node-name-${id}`) || { clientHeight: 40 };
	const aliasDom = document.getElementById(`alias-name-${id}`) || { clientHeight: 20 };
	const h = aliasDom.clientHeight + headerDom.clientHeight + 70;
	for (let i = 0; i < switch_list.length; i++) {
		anchors.push({
			id: `${id}_switch_${switch_list[i].switchId}_right`,
			x: x + width / 2 - 10,
			y: y - height / 2 + h + i * 44,
			name: i,
		});
	}

	return anchors;
}

setAttributes() {
	super.setAttributes();
}

}

export const SwitchNode = {
type: 'switch',
model: SwitchNodeModel,
view: SwitchNodeView,
};

export default SwitchNode;
`

logicflow/core版本

1.2.22, 2.1.1

logicflow/extension版本

1.2.22, 2.1.2

logicflow/engine版本

No response

浏览器&环境

Safari

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions