-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Description
发生了什么?
**项目:**react+ts+vite
**浏览器:**safari
**描述:**自定义节点内容在拖动画布时偏移
截图:
拖动前
拖动后
自定义节点代码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