diff --git a/core/survey/nodeDefLayout.js b/core/survey/nodeDefLayout.js index 991b1d11cf..9ac905dc40 100644 --- a/core/survey/nodeDefLayout.js +++ b/core/survey/nodeDefLayout.js @@ -63,11 +63,10 @@ export const getRenderType = (cycle) => _getPropLayout(cycle, keys.renderType) export const getLayoutChildren = (cycle) => _getPropLayout(cycle, keys.layoutChildren, []) export const getLayoutChildrenCompressed = - ({ cycle, hiddenDefsByUuid = {}, compressHorizontally = true }) => + ({ cycle, hiddenDefsByUuid = {} }) => (nodeDef) => { const layoutChildren = getLayoutChildren(cycle)(nodeDef) - let nextY = 0 - let nextX = 0 + let itemPrev = { x: 0, y: 0, w: 0, h: 0, xOriginal: 0, yOriginal: 0 } return ( [...layoutChildren] // sort layout items from top to bottom @@ -78,10 +77,23 @@ export const getLayoutChildrenCompressed = const hidden = Boolean(hiddenDefsByUuid[childDefUuid]) const h = hidden ? 0 : hOriginal const w = hidden ? 0 : wOriginal - const x = compressHorizontally ? Math.min(nextX, xOriginal) : xOriginal - const y = Math.min(nextY, yOriginal) - nextY = y + h - nextX = x + w + + const sameRowOfPreviousItem = xOriginal > itemPrev.xOriginal + + const x = sameRowOfPreviousItem + ? // move it to xPrev + wPrev + Math.min(itemPrev.x + itemPrev.w, xOriginal) + : // item in another row, can have the same x of the previous one + Math.min(itemPrev.x, xOriginal) + + const y = sameRowOfPreviousItem + ? // item can have the same y of the previous one + Math.min(itemPrev.y, yOriginal) + : // item in another row, move it yPrev + hPrev + Math.min(itemPrev.y + itemPrev.h, yOriginal) + + itemPrev = { x, y, h, w, xOriginal, yOriginal, hOriginal, wOriginal } + return hidden ? layoutChildrenAcc : [...layoutChildrenAcc, { ...item, h, w, x, y }] }, []) ) diff --git a/webapp/store/survey/nodeDefs/actions.js b/webapp/store/survey/nodeDefs/actions.js index c3f90015cb..e8e33ccf21 100644 --- a/webapp/store/survey/nodeDefs/actions.js +++ b/webapp/store/survey/nodeDefs/actions.js @@ -160,9 +160,7 @@ export const putNodeDefLayoutProp = export const compressFormItems = (nodeDef) => async (dispatch, getState) => { const state = getState() const cycle = SurveyState.getSurveyCycleKey(state) - const layoutChildrenCompact = NodeDefLayout.getLayoutChildrenCompressed({ cycle, compressHorizontally: false })( - nodeDef - ) + const layoutChildrenCompact = NodeDefLayout.getLayoutChildrenCompressed({ cycle })(nodeDef) dispatch(putNodeDefLayoutProp({ nodeDef, key: NodeDefLayout.keys.layoutChildren, value: layoutChildrenCompact })) } @@ -255,7 +253,7 @@ export const resetSamplingNodeDefs = chain, hideSamplingNodeDefsWithoutSibilings: false, hideAreaBasedEstimate: false, - showInactiveResultVariables: true + showInactiveResultVariables: true, })(survey).filter((_nodeDef) => NodeDef.isSampling(_nodeDef) || NodeDef.isBaseUnit(_nodeDef)) const nodeDefUuids = nodeDefs.map(NodeDef.getUuid)