robobyte-front-builder 1.0.0

package/src/services/builderHelper/layoutHelpers.js

@@ -0,0 +1,231 @@
+import { createNode } from './nodeFactory'
+
+function makeProp(value) {
+  return { valueType: 'value', value }
+}
+
+function getCellProps(cell) {
+  return {
+    colStart: cell.props?.main?.colStart?.value ?? cell.props?.main?.colStart ?? 1,
+    rowStart: cell.props?.main?.rowStart?.value ?? cell.props?.main?.rowStart ?? 1,
+    colSpan:  cell.props?.main?.colSpan?.value  ?? cell.props?.main?.colSpan  ?? 1,
+    rowSpan:  cell.props?.main?.rowSpan?.value  ?? cell.props?.main?.rowSpan  ?? 1,
+  }
+}
+
+function applyProps(cell, { colStart, rowStart, colSpan, rowSpan }) {
+  return {
+    ...cell,
+    props: {
+      ...cell.props,
+      main: {
+        ...cell.props?.main,
+        colStart: makeProp(colStart),
+        rowStart: makeProp(rowStart),
+        colSpan:  makeProp(colSpan),
+        rowSpan:  makeProp(rowSpan),
+      }
+    }
+  }
+}
+
+export function createLayoutGrid(cols = 2, rows = 2) {
+  const cells = []
+  for (let r = 1; r <= rows; r++) {
+    for (let c = 1; c <= cols; c++) {
+      const cell = createNode('layout-cell', {})
+      cells.push(applyProps(cell, { colStart: c, rowStart: r, colSpan: 1, rowSpan: 1 }))
+    }
+  }
+  return cells
+}
+
+export function getTotalRows(cells) {
+  return cells.reduce((max, cell) => {
+    const { rowStart, rowSpan } = getCellProps(cell)
+    return Math.max(max, rowStart + rowSpan - 1)
+  }, 0)
+}
+
+export function getTotalCols(cells) {
+  return cells.reduce((max, cell) => {
+    const { colStart, colSpan } = getCellProps(cell)
+    return Math.max(max, colStart + colSpan - 1)
+  }, 0)
+}
+
+export function mergeRight(cells, cellId) {
+  const cell = cells.find(c => c.id === cellId)
+  if (!cell) return cells
+
+  const { colStart, rowStart, colSpan, rowSpan } = getCellProps(cell)
+  const rightStart = colStart + colSpan
+  const neighbor = cells.find(c => {
+    const p = getCellProps(c)
+    return p.colStart === rightStart && p.rowStart === rowStart && p.rowSpan === rowSpan
+  })
+  if (!neighbor) return cells
+
+  const neighborSpan = getCellProps(neighbor).colSpan
+  return cells
+    .filter(c => c.id !== neighbor.id)
+    .map(c => c.id === cellId ? applyProps(c, { colStart, rowStart, colSpan: colSpan + neighborSpan, rowSpan }) : c)
+}
+
+export function mergeDown(cells, cellId) {
+  const cell = cells.find(c => c.id === cellId)
+  if (!cell) return cells
+
+  const { colStart, rowStart, colSpan, rowSpan } = getCellProps(cell)
+  const belowStart = rowStart + rowSpan
+  const neighbor = cells.find(c => {
+    const p = getCellProps(c)
+    return p.rowStart === belowStart && p.colStart === colStart && p.colSpan === colSpan
+  })
+  if (!neighbor) return cells
+
+  const neighborSpan = getCellProps(neighbor).rowSpan
+  return cells
+    .filter(c => c.id !== neighbor.id)
+    .map(c => c.id === cellId ? applyProps(c, { colStart, rowStart, colSpan, rowSpan: rowSpan + neighborSpan }) : c)
+}
+
+export function splitHorizontal(cells, cellId) {
+  const cell = cells.find(c => c.id === cellId)
+  if (!cell) return cells
+
+  const { colStart, rowStart, colSpan, rowSpan } = getCellProps(cell)
+  if (colSpan < 2) return cells
+
+  const half = Math.floor(colSpan / 2)
+  const newCell = createNode('layout-cell', {})
+  const updatedNew = applyProps(newCell, { colStart: colStart + half, rowStart, colSpan: colSpan - half, rowSpan })
+  const updatedOld = applyProps(cell, { colStart, rowStart, colSpan: half, rowSpan })
+
+  return cells.map(c => c.id === cellId ? updatedOld : c).concat(updatedNew)
+}
+
+export function splitVertical(cells, cellId) {
+  const cell = cells.find(c => c.id === cellId)
+  if (!cell) return cells
+
+  const { colStart, rowStart, colSpan, rowSpan } = getCellProps(cell)
+  if (rowSpan < 2) return cells
+
+  const half = Math.floor(rowSpan / 2)
+  const newCell = createNode('layout-cell', {})
+  const updatedNew = applyProps(newCell, { colStart, rowStart: rowStart + half, colSpan, rowSpan: rowSpan - half })
+  const updatedOld = applyProps(cell, { colStart, rowStart, colSpan, rowSpan: half })
+
+  return cells.map(c => c.id === cellId ? updatedOld : c).concat(updatedNew)
+}
+
+export function addRow(cells, layoutCols, afterRow) {
+  const shiftedCells = cells.map(cell => {
+    const p = getCellProps(cell)
+    if (p.rowStart > afterRow) {
+      return applyProps(cell, { ...p, rowStart: p.rowStart + 1 })
+    }
+    return cell
+  })
+
+  const newCells = []
+  for (let c = 1; c <= layoutCols; c++) {
+    const newCell = createNode('layout-cell', {})
+    newCells.push(applyProps(newCell, { colStart: c, rowStart: afterRow + 1, colSpan: 1, rowSpan: 1 }))
+  }
+
+  return [...shiftedCells, ...newCells]
+}
+
+export function addColumn(cells, layoutRows, afterCol) {
+  const shiftedCells = cells.map(cell => {
+    const p = getCellProps(cell)
+    if (p.colStart > afterCol) {
+      return applyProps(cell, { ...p, colStart: p.colStart + 1 })
+    }
+    return cell
+  })
+
+  const newCells = []
+  for (let r = 1; r <= layoutRows; r++) {
+    const newCell = createNode('layout-cell', {})
+    newCells.push(applyProps(newCell, { colStart: afterCol + 1, rowStart: r, colSpan: 1, rowSpan: 1 }))
+  }
+
+  return [...shiftedCells, ...newCells]
+}
+
+export function deleteRow(cells, rowIndex) {
+  const surviving = cells
+    .map(cell => {
+      const p = getCellProps(cell)
+      if (p.rowStart === rowIndex) {
+        if (p.rowSpan > 1) {
+          return applyProps(cell, { ...p, rowStart: p.rowStart + 1, rowSpan: p.rowSpan - 1 })
+        }
+        return null
+      }
+      if (p.rowStart > rowIndex) {
+        return applyProps(cell, { ...p, rowStart: p.rowStart - 1 })
+      }
+      return cell
+    })
+    .filter(Boolean)
+  return surviving
+}
+
+export function deleteColumn(cells, colIndex) {
+  const surviving = cells
+    .map(cell => {
+      const p = getCellProps(cell)
+      if (p.colStart === colIndex) {
+        if (p.colSpan > 1) {
+          return applyProps(cell, { ...p, colStart: p.colStart + 1, colSpan: p.colSpan - 1 })
+        }
+        return null
+      }
+      if (p.colStart > colIndex) {
+        return applyProps(cell, { ...p, colStart: p.colStart - 1 })
+      }
+      return cell
+    })
+    .filter(Boolean)
+  return surviving
+}
+
+export function canMergeRight(cells, cellId) {
+  const cell = cells.find(c => c.id === cellId)
+  if (!cell) return false
+  const { colStart, rowStart, colSpan, rowSpan } = getCellProps(cell)
+  return cells.some(c => {
+    const p = getCellProps(c)
+    return p.colStart === colStart + colSpan && p.rowStart === rowStart && p.rowSpan === rowSpan
+  })
+}
+
+export function canMergeDown(cells, cellId) {
+  const cell = cells.find(c => c.id === cellId)
+  if (!cell) return false
+  const { colStart, rowStart, colSpan, rowSpan } = getCellProps(cell)
+  return cells.some(c => {
+    const p = getCellProps(c)
+    return p.rowStart === rowStart + rowSpan && p.colStart === colStart && p.colSpan === colSpan
+  })
+}
+
+export function canSplitHorizontal(cells, cellId) {
+  const cell = cells.find(c => c.id === cellId)
+  if (!cell) return false
+  return getCellProps(cell).colSpan >= 2
+}
+
+export function canSplitVertical(cells, cellId) {
+  const cell = cells.find(c => c.id === cellId)
+  if (!cell) return false
+  return getCellProps(cell).rowSpan >= 2
+}
+
+export function getCellProps_public(cell) {
+  return getCellProps(cell)
+}

package/src/services/builderHelper/nodeFactory.js

@@ -0,0 +1,44 @@
+const CONTAINER_TYPES = [
+  'container',
+  'card',
+  'column',
+  'column-group',
+  'cell',
+  'wizard',
+  'wizard-step',
+  'tab',
+  'table',
+  'repeater',
+  'widget',
+  'layout',
+  'layout-cell'
+]
+
+export function createNode(type, overrides = {}) {
+  const isContainer = CONTAINER_TYPES.includes(type)
+  const randomKey = `${type}_${Math.random().toString(36).substring(2, 9)}`
+
+  const node = {
+    id: `cmp_${crypto.randomUUID()}`,
+    type,
+    props: {
+      main: {
+        key: {
+          valueType: 'value',
+          value: randomKey
+        },
+        enabled: true
+      },
+      style: {},
+      advanced: {}
+    },
+    expressions: {
+      main: {}
+    },
+    className: '',
+    children: isContainer ? [] : undefined,
+    ...overrides
+  }
+
+  return node
+}

package/src/services/builderHelper/resolveProps.js

@@ -0,0 +1,34 @@
+import { getJSCalculationFunction } from './jsExecutor'
+
+export function resolveProps(node, tab, context = {}) {
+  const props = node.props?.[tab] ?? {}
+  const resolved = {}
+
+  for (const [key, field] of Object.entries(props)) {
+    if (!field) continue
+
+    if ((field.valueType || field.type) === 'value') {
+      resolved[key] = field.value
+      continue
+    }
+
+    if ((field.valueType || field.type) === 'expression' && field.expression?.code) {
+      try {
+        const calc = getJSCalculationFunction(field.expression.code, context)
+        const value = calc(context.form, context.data)
+
+        // Viewer prop resolution is synchronous. Skip unresolved promises.
+        if (value && typeof value.then === 'function') {
+          console.warn(`Expression [${tab}.${key}] returned a Promise; use sync return value instead.`)
+          continue
+        }
+
+        resolved[key] = value
+      } catch (e) {
+        console.error(`Expression error [${tab}.${key}]`, e)
+      }
+    }
+  }
+
+  return resolved
+}

package/src/services/builderHelper/tree.js

@@ -0,0 +1,131 @@
+export function findNode(node, targetId) {
+  if (!node) return null
+  if (node.id === targetId) return node
+  if (!node.children) return null
+
+  for (const child of node.children) {
+    const found = findNode(child, targetId)
+    if (found) return found
+  }
+  return null
+}
+
+export function removeFromTree(node, targetId) {
+  if (!node.children) return node
+
+  return {
+    ...node,
+    children: node.children
+      .filter(child => child.id !== targetId)
+      .map(child => removeFromTree(child, targetId))
+  }
+}
+
+export function insertIntoTreeAtIndex(node, targetId, newNode, index) {
+  if (node.id === targetId) {
+    const children = [...(node.children || [])]
+    children.splice(index, 0, newNode)
+    return { ...node, children }
+  }
+
+  if (!node.children) return node
+
+  return {
+    ...node,
+    children: node.children.map(c =>
+      insertIntoTreeAtIndex(c, targetId, newNode, index)
+    )
+  }
+}
+
+export function moveNodeInTree(root, sourceId, targetContainerId, targetIndex) {
+  let movingNode = null
+  let sourceContainerId = null
+  let sourceIndex = null
+
+  function remove(node) {
+    if (!node.children) return node
+
+    const idx = node.children.findIndex(c => c.id === sourceId)
+    if (idx !== -1) {
+      movingNode = node.children[idx]
+      sourceContainerId = node.id
+      sourceIndex = idx
+      return {
+        ...node,
+        children: node.children.filter(c => c.id !== sourceId)
+      }
+    }
+
+    return {
+      ...node,
+      children: node.children.map(remove)
+    }
+  }
+
+  function insert(node) {
+    if (node.id === targetContainerId && movingNode) {
+      const children = [...(node.children || [])]
+      let index = targetIndex
+
+      if (node.id === sourceContainerId && sourceIndex < targetIndex) {
+        index = targetIndex - 1
+      }
+
+      children.splice(index, 0, movingNode)
+      return { ...node, children }
+    }
+
+    if (!node.children) return node
+
+    return {
+      ...node,
+      children: node.children.map(insert)
+    }
+  }
+
+  return insert(remove(root))
+}
+
+export function isDescendant(node, targetId) {
+  if (!node.children) return false
+  for (const child of node.children) {
+    if (child.id === targetId) return true
+    if (isDescendant(child, targetId)) return true
+  }
+  return false
+}
+
+export function updateNodeInTree(node, targetId, patch) {
+  if (node.id === targetId) {
+    // Deep merge props sections (main, style, advanced) to preserve all sections
+    const mergedProps = { ...node.props }
+    if (patch.props) {
+      Object.keys(patch.props).forEach(section => {
+        mergedProps[section] = {
+          ...mergedProps[section],
+          ...patch.props[section]
+        }
+      })
+    }
+
+    return {
+      ...node,
+      ...patch,
+      props: mergedProps,
+      valueTypes: {
+        ...node.valueTypes,
+        ...patch.valueTypes
+      }
+    }
+  }
+
+  if (!node.children) return node
+
+  return {
+    ...node,
+    children: node.children.map(c =>
+      updateNodeInTree(c, targetId, patch)
+    )
+  }
+}