From fb3c98f6bc8bbf97dffd15503d766e7e48923cad Mon Sep 17 00:00:00 2001 From: skeris Date: Sat, 2 Dec 2023 19:44:52 +0300 Subject: [PATCH] fix: layout memoizing and fix ladder in straight line graph --- .../Questions/BranchingMap/CsComponent.tsx | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/pages/Questions/BranchingMap/CsComponent.tsx b/src/pages/Questions/BranchingMap/CsComponent.tsx index 16252bb6..c6e6576b 100644 --- a/src/pages/Questions/BranchingMap/CsComponent.tsx +++ b/src/pages/Questions/BranchingMap/CsComponent.tsx @@ -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; }