fix: layout memoizing and fix ladder in straight line graph

This commit is contained in:
skeris 2023-12-02 19:44:52 +03:00
parent b930dd8260
commit fb3c98f6bc

@ -242,6 +242,7 @@ export const CsComponent = ({
const readyLO = (e) => {
e.cy.data('changed', false)
//удаляем иконки
e.cy.nodes().forEach((ele: any) => {
const data = ele.data()
@ -254,7 +255,11 @@ export const CsComponent = ({
name: 'preset',
positions: (e) => {
console.log('POSITIIIIIIIONS')
console.log('BBBBBBBBBBBBBBB',e.cy().data('changed'))
if (!e.cy().data('changed')) {
console.log(e.cy().data('changed'))
return e.data('oldPos')
} console.log('POSITIIIIIIIONS')
const id = e.id()
const incomming = e.cy().edges(`[target="${id}"]`)
const layer = 0
@ -281,7 +286,7 @@ export const CsComponent = ({
while (queue.length) {
const task = queue.pop()
if (task.children.length === 0) {
task.parent.data('subtreeWidth', 0)
task.parent.data('subtreeWidth', task.parent.height())
continue
}
const unprocessed = task?.children.filter(e => {
@ -297,20 +302,27 @@ export const CsComponent = ({
task?.parent.data('subtreeWidth', task.children.reduce((p, n) => p + n.data('subtreeWidth'), 0))
}
return { x: 200 * e.data('layer'), y: 0 }
const pos = { x: 200 * e.data('layer'), y: 0 }
e.data('oldPos',pos)
return pos
} else {
const parent = e.cy().edges(`[target="${e.id()}"]`)[0].source()
const wing = parent.data('subtreeWidth') / 2
const wing = (parent.data('children') === 1)?0:parent.data('subtreeWidth') / 2
const lastOffset = parent.data('lastChild')
const step = wing * 2 / (parent.data('children') - 1)
//e.removeData('subtreeWidth')
console.log('AAAAAAAAAAa', e.data(), lastOffset, step, parent.position().y, wing)
if (lastOffset !== undefined) {
parent.data('lastChild', lastOffset + step)
return { x: 200 * e.data('layer'), y: (lastOffset + step) }
const pos = { x: 250 * e.data('layer'), y: (lastOffset + step) }
e.data('oldPos',pos)
return pos
} else {
parent.data('lastChild', parent.position().y - wing)
return { x: 200 * e.data('layer'), y: (parent.position().y - wing) }
}
const pos = { x: 250 * e.data('layer'), y: (parent.position().y - wing) }
e.data('oldPos',pos)
return pos
}
}
}, // map of (node id) => (position obj); or function(node){ return somPos; }
zoom: undefined, // the zoom level to set (prob want fit = false if set)
@ -329,9 +341,9 @@ export const CsComponent = ({
document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
const cy = cyRef.current;
const eles = cy?.add(storeToNodes(questions))
console.log('PETTY', storeToNodes(questions), eles.length)
cy.data('changed',true)
const elecs = eles.layout(lyopts).run()
cy?.on('add',()=>cy.data('changed',true))
cy?.fit()
//cy?.layout().run()
@ -399,7 +411,7 @@ export const CsComponent = ({
const ext = cy.extent()
const nodesInView = cy.nodes().filter(n => {
const bb = n.boundingBox()
return bb.x1 > ext.x1 && bb.x2 < ext.x2 && bb.y1 > ext.y1 && bb.y2 < ext.y2
return bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2
})
nodesInView
@ -500,7 +512,7 @@ export const CsComponent = ({
},
content: ([item]) => {
const itemId = item.id();
if (item.data().lastChild === NaN || item.data().lastChild === undefined) {
if (item.cy().edges(`[target="${itemId}"]`).sources().length === 0) {
return;
}