@stonecrop/atable 0.4.23 → 0.4.25

package/src/stores/table.ts

@@ -3,6 +3,9 @@ import { type CSSProperties, computed, ref } from 'vue'
 
 import type {
 	CellContext,
+	ConnectionHandle,
+	ConnectionPath,
+	GanttBarInfo,
 	GanttDragEvent,
 	TableColumn,
 	TableConfig,
@@ -23,45 +26,24 @@ export const createTableStore = (initData: {
 	rows: TableRow[]
 	id?: string
 	config?: TableConfig
-	table?: { [key: string]: any }
-	display?: TableDisplay[]
 	modal?: TableModal
 }) => {
 	const id = initData.id || generateHash()
 	const createStore = defineStore(`table-${id}`, () => {
-		// util functions
-		const createTableObject = () => {
-			const table = {}
-			for (const [colIndex, column] of columns.value.entries()) {
-				for (const [rowIndex, row] of rows.value.entries()) {
-					table[`${colIndex}:${rowIndex}`] = row[column.name]
-				}
-			}
-			return table
-		}
-
-		const createDisplayObject = (display?: TableDisplay[]) => {
+		const createDisplayObject = () => {
 			const defaultDisplay: TableDisplay[] = [Object.assign({}, { rowModified: false })]
 
-			// TODO: (typing) what is the type of `display` here?
-			if (display) {
-				if ('0:0' in display) {
-					return display
-				}
-				// else if ('default' in display) {
-				// 	// TODO: (typing) what is the possible input here for 'default'?
-				// 	defaultDisplay = display.default
-				// }
-			}
-
 			// TODO: (typing) is this type correct for the parent set?
 			const parents = new Set<string | number>()
-			for (let rowIndex = rows.value.length - 1; rowIndex >= 0; rowIndex--) {
+			for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
 				const row = rows.value[rowIndex]
-				if (row.parent) {
+				if (row.parent !== null && row.parent !== undefined) {
 					parents.add(row.parent)
 				}
+			}
 
+			for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
+				const row = rows.value[rowIndex]
 				defaultDisplay[rowIndex] = {
 					childrenOpen: false,
 					expanded: false,
@@ -81,13 +63,74 @@ export const createTableStore = (initData: {
 		const columns = ref(initData.columns)
 		const rows = ref(initData.rows)
 		const config = ref(initData.config || {})
-		const table = ref(initData.table || createTableObject())
-		const display = ref(createDisplayObject(initData.display))
+
+		// Track row modifications and expand states separately from the computed display
+		const rowModifications = ref<Record<number, boolean>>({})
+		const rowExpandStates = ref<Record<number, { childrenOpen?: boolean; expanded?: boolean }>>({})
+
+		const table = computed(() => {
+			const table = {}
+			for (const [colIndex, column] of columns.value.entries()) {
+				for (const [rowIndex, row] of rows.value.entries()) {
+					table[`${colIndex}:${rowIndex}`] = row[column.name]
+				}
+			}
+			return table
+		})
+
+		const display = computed({
+			get: () => {
+				const baseDisplay = createDisplayObject()
+
+				// Apply persistent modifications and expand states
+				for (let i = 0; i < baseDisplay.length; i++) {
+					if (rowModifications.value[i]) {
+						baseDisplay[i].rowModified = rowModifications.value[i]
+					}
+					if (rowExpandStates.value[i]) {
+						if (rowExpandStates.value[i].childrenOpen !== undefined) {
+							baseDisplay[i].childrenOpen = rowExpandStates.value[i].childrenOpen!
+						}
+						if (rowExpandStates.value[i].expanded !== undefined) {
+							baseDisplay[i].expanded = rowExpandStates.value[i].expanded!
+						}
+					}
+				}
+
+				// Calculate 'open' property for tree view based on parent's childrenOpen state
+				if (isTreeView.value) {
+					for (let i = 0; i < baseDisplay.length; i++) {
+						const row = baseDisplay[i]
+						if (!row.isRoot && row.parent !== null && row.parent !== undefined) {
+							// Child row is 'open' if its parent's childrenOpen is true
+							const parentIndex = row.parent
+							if (parentIndex >= 0 && parentIndex < baseDisplay.length) {
+								baseDisplay[i].open = baseDisplay[parentIndex].childrenOpen || false
+							}
+						}
+					}
+				}
+
+				return baseDisplay
+			},
+			set: (newDisplay: TableDisplay[]) => {
+				// Only update if the new display is different from the current one; also avoids recursive updates
+				if (JSON.stringify(newDisplay) !== JSON.stringify(display.value)) {
+					display.value = newDisplay
+				}
+			},
+		})
+
 		const modal = ref<TableModal>(initData.modal || { visible: false })
 		const updates = ref<Record<string, string>>({})
+		const ganttBars = ref<GanttBarInfo[]>([])
+		const connectionHandles = ref<ConnectionHandle[]>([])
+		const connectionPaths = ref<ConnectionPath[]>([])
 
 		// getters
 		const hasPinnedColumns = computed(() => columns.value.some(col => col.pinned))
+		const isGanttView = computed(() => config.value.view === 'gantt' || config.value.view === 'tree-gantt')
+		const isTreeView = computed(() => config.value.view === 'tree' || config.value.view === 'tree-gantt')
 
 		const numberedRowWidth = computed(() => {
 			const indent = Math.ceil(rows.value.length / 100 + 1)
@@ -95,7 +138,7 @@ export const createTableStore = (initData: {
 		})
 
 		const zeroColumn = computed(() =>
-			config.value.view ? ['list', 'tree', 'list-expansion'].includes(config.value.view) : false
+			config.value.view ? ['list', 'tree', 'tree-gantt', 'list-expansion'].includes(config.value.view) : false
 		)
 
 		// actions
@@ -105,7 +148,7 @@ export const createTableStore = (initData: {
 			const col = columns.value[colIndex]
 
 			if (table.value[index] !== value) {
-				display.value[rowIndex].rowModified = true
+				rowModifications.value[rowIndex] = true
 			}
 
 			table.value[index] = value
@@ -116,11 +159,15 @@ export const createTableStore = (initData: {
 			}
 		}
 
+		const updateRows = (newRows: TableRow[]) => {
+			rows.value = newRows
+		}
+
 		const setCellText = (colIndex: number, rowIndex: number, value: string) => {
 			const index = `${colIndex}:${rowIndex}`
 
 			if (table.value[index] !== value) {
-				display.value[rowIndex].rowModified = true
+				rowModifications.value[rowIndex] = true
 				updates.value[index] = value
 			}
 		}
@@ -158,38 +205,60 @@ export const createTableStore = (initData: {
 
 		const isRowGantt = (rowIndex: number) => {
 			const row = rows.value[rowIndex]
-			return config.value.view === 'gantt' && row.indent === 0
+			return isGanttView.value && row.gantt !== undefined
 		}
 
 		const isRowVisible = (rowIndex: number) => {
-			return config.value.view !== 'tree' || display.value[rowIndex].isRoot || display.value[rowIndex].open
+			return !isTreeView.value || display.value[rowIndex].isRoot || display.value[rowIndex].open
 		}
 
 		const getRowExpandSymbol = (rowIndex: number) => {
-			if (config.value.view !== 'tree') {
+			if (!isTreeView.value && config.value.view !== 'list-expansion') {
 				return ''
 			}
 
-			if (display.value[rowIndex].isRoot || display.value[rowIndex].isParent) {
-				return display.value[rowIndex].childrenOpen ? '-' : '+'
+			if (isTreeView.value && (display.value[rowIndex].isRoot || display.value[rowIndex].isParent)) {
+				return display.value[rowIndex].childrenOpen ? '▼' : '►'
+			}
+
+			if (config.value.view === 'list-expansion') {
+				return display.value[rowIndex].expanded ? '▼' : '►'
 			}
 
 			return ''
 		}
 
 		const toggleRowExpand = (rowIndex: number) => {
-			if (config.value.view === 'tree') {
-				display.value[rowIndex].childrenOpen = !display.value[rowIndex].childrenOpen
-				for (let index = rows.value.length - 1; index >= 0; index--) {
-					if (display.value[index].parent === rowIndex) {
-						display.value[index].open = !display.value[index].open
-						if (display.value[index].childrenOpen) {
+			if (isTreeView.value) {
+				const currentState = rowExpandStates.value[rowIndex] || {}
+				const currentChildrenOpen = currentState.childrenOpen ?? display.value[rowIndex].childrenOpen
+				const newChildrenOpen = !currentChildrenOpen
+
+				rowExpandStates.value[rowIndex] = {
+					...currentState,
+					childrenOpen: newChildrenOpen,
+				}
+
+				// If we're closing, recursively close all descendant nodes
+				if (!newChildrenOpen) {
+					for (let index = 0; index < rows.value.length; index++) {
+						if (display.value[index].parent === rowIndex) {
+							const childState = rowExpandStates.value[index] || {}
+							rowExpandStates.value[index] = {
+								...childState,
+								childrenOpen: false,
+							}
 							toggleRowExpand(index)
 						}
 					}
 				}
 			} else if (config.value.view === 'list-expansion') {
-				display.value[rowIndex].expanded = !display.value[rowIndex].expanded
+				const currentState = rowExpandStates.value[rowIndex] || {}
+				const currentExpanded = currentState.expanded ?? display.value[rowIndex].expanded
+				rowExpandStates.value[rowIndex] = {
+					...currentState,
+					expanded: !currentExpanded,
+				}
 			}
 		}
 
@@ -259,11 +328,99 @@ export const createTableStore = (initData: {
 			}
 		}
 
+		const registerGanttBar = (barInfo: GanttBarInfo) => {
+			const existingIndex = ganttBars.value.findIndex(bar => bar.id === barInfo.id)
+			if (existingIndex >= 0) {
+				// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
+				ganttBars.value[existingIndex] = barInfo
+			} else {
+				// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
+				ganttBars.value.push(barInfo)
+			}
+		}
+
+		const unregisterGanttBar = (barId: string) => {
+			const index = ganttBars.value.findIndex(bar => bar.id === barId)
+			if (index >= 0) {
+				ganttBars.value.splice(index, 1)
+			}
+		}
+
+		const registerConnectionHandle = (handleInfo: ConnectionHandle) => {
+			const existingIndex = connectionHandles.value.findIndex(handle => handle.id === handleInfo.id)
+			if (existingIndex >= 0) {
+				// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
+				connectionHandles.value[existingIndex] = handleInfo
+			} else {
+				// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
+				connectionHandles.value.push(handleInfo)
+			}
+		}
+
+		const unregisterConnectionHandle = (handleId: string) => {
+			const index = connectionHandles.value.findIndex(handle => handle.id === handleId)
+			if (index >= 0) {
+				connectionHandles.value.splice(index, 1)
+			}
+		}
+
+		const createConnection = (
+			fromHandleId: string,
+			toHandleId: string,
+			options?: { style?: ConnectionPath['style']; label?: string }
+		) => {
+			const fromHandle = connectionHandles.value.find(h => h.id === fromHandleId)
+			const toHandle = connectionHandles.value.find(h => h.id === toHandleId)
+
+			if (!fromHandle || !toHandle) {
+				// eslint-disable-next-line no-console
+				console.warn('Cannot create connection: handle not found')
+				return null
+			}
+
+			const connection: ConnectionPath = {
+				id: `connection-${fromHandleId}-${toHandleId}`,
+				from: {
+					barId: fromHandle.barId,
+					side: fromHandle.side,
+				},
+				to: {
+					barId: toHandle.barId,
+					side: toHandle.side,
+				},
+				style: options?.style,
+				label: options?.label,
+			}
+
+			connectionPaths.value.push(connection)
+			return connection
+		}
+
+		const deleteConnection = (connectionId: string) => {
+			const index = connectionPaths.value.findIndex(conn => conn.id === connectionId)
+			if (index >= 0) {
+				connectionPaths.value.splice(index, 1)
+				return true
+			}
+			return false
+		}
+
+		const getConnectionsForBar = (barId: string) => {
+			return connectionPaths.value.filter(conn => conn.from.barId === barId || conn.to.barId === barId)
+		}
+
+		const getHandlesForBar = (barId: string) => {
+			return connectionHandles.value.filter(handle => handle.barId === barId)
+		}
+
 		return {
 			// state
 			columns,
 			config,
+			connectionHandles,
+			connectionPaths,
 			display,
+			ganttBars,
 			modal,
 			rows,
 			table,
@@ -271,24 +428,35 @@ export const createTableStore = (initData: {
 
 			// getters
 			hasPinnedColumns,
+			isGanttView,
+			isTreeView,
 			numberedRowWidth,
 			zeroColumn,
 
 			// actions
 			closeModal,
+			createConnection,
+			deleteConnection,
 			getCellData,
 			getCellDisplayValue,
+			getConnectionsForBar,
 			getFormattedValue,
+			getHandlesForBar,
 			getHeaderCellStyle,
-			resizeColumn,
 			getIndent,
 			getRowExpandSymbol,
 			isRowGantt,
 			isRowVisible,
+			registerConnectionHandle,
+			registerGanttBar,
+			resizeColumn,
 			setCellData,
 			setCellText,
 			toggleRowExpand,
+			unregisterConnectionHandle,
+			unregisterGanttBar,
 			updateGanttBar,
+			updateRows,
 		}
 	})
 

package/src/types/index.ts

@@ -1,4 +1,5 @@
 import { useElementBounding } from '@vueuse/core'
+import type { Ref, ShallowRef } from 'vue'
 
 import { createTableStore } from '../stores/table'
 
@@ -133,8 +134,8 @@ export interface TableColumn {
 	ganttComponent?: string
 
 	/**
-	 * The colspan of the Gantt-bar for the column. This is used to determine how many columns
-	 * the Gantt-bar should span.
+	 * The colspan of the Gantt bar for the column. This determines how many columns
+	 * the Gantt bar should span across.
 	 *
 	 * Only applicable for Gantt tables.
 	 *
@@ -143,8 +144,8 @@ export interface TableColumn {
 	colspan?: number
 
 	/**
-	 * The starting column index for the Gantt-bar, excluding any pinned columns. This is
-	 * evaluated automatically while rendering the table.
+	 * The original column index for the Gantt bar, excluding any pinned columns.
+	 * This is evaluated automatically while rendering the table.
 	 *
 	 * Only applicable for Gantt tables.
 	 *
@@ -185,8 +186,10 @@ export interface TableConfig {
 	 * - `list` - row numbers are displayed in the table
 	 * - `list-expansion` - carets are displayed in the number column that expand/collapse the row inline
 	 * - `tree` - carets are displayed in the number column that expand/collapse grouped rows
+	 * - `gantt` - view that allows specific rows to be displayed with Gantt functionality
+	 * - `tree-gantt` - similar to `gantt`, but allows for tree functionality as well
 	 */
-	view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt'
+	view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt' | 'tree-gantt'
 
 	/**
 	 * Control whether the table should be allowed to use the full width of its container.
@@ -303,29 +306,33 @@ export interface TableRow {
 }
 
 /**
- * This interface defines the options for a row when it is being viewed as a Gantt chart.
+ * Gantt chart options for table rows.
  * @public
  */
 export interface GanttOptions {
 	/**
-	 * The colour to be applied to the row's gantt bar.
+	 * The color to be applied to the row's gantt bar.
+	 *
+	 * @defaultValue '#cccccc'
 	 */
 	color?: string
 
 	/**
 	 * The starting column index for the gantt bar.
+	 *
+	 * @defaultValue 0
 	 */
 	startIndex?: number
 
 	/**
-	 * The ending column index for the gantt bar. If the endIndex and colspan are not provided,
+	 * The ending column index for the gantt bar. If endIndex and colspan are not provided,
 	 * the bar will stretch to the end of the table.
 	 */
 	endIndex?: number
 
 	/**
-	 * The length of the gantt bar. Useful when only the start index is provided. If the
-	 * colspan and endIndex are not provided, the bar will stretch to the end of the table.
+	 * The length of the gantt bar in columns. Useful when only the start index is provided.
+	 * If colspan and endIndex are not provided, the bar will stretch to the end of the table.
 	 */
 	colspan?: number
 }
@@ -468,3 +475,145 @@ export interface TableModalProps {
 	 */
 	store: ReturnType<typeof createTableStore>
 }
+
+/**
+ * Gantt bar information for VueFlow integration.
+ * @public
+ */
+export interface GanttBarInfo {
+	/**
+	 * Unique identifier for the gantt bar.
+	 */
+	id: string
+
+	/**
+	 * The row index of the gantt bar.
+	 */
+	rowIndex: number
+
+	/**
+	 * The primary column index of the gantt bar (typically the start index).
+	 */
+	colIndex: number
+
+	/**
+	 * Starting column index of the gantt bar.
+	 */
+	startIndex: Ref<number>
+
+	/**
+	 * Ending column index of the gantt bar.
+	 */
+	endIndex: Ref<number>
+
+	/**
+	 * Color of the gantt bar.
+	 */
+	color: Ref<string>
+
+	/**
+	 * The position of the gantt bar in the ATable component.
+	 */
+	position: {
+		x: ShallowRef<number>
+		y: ShallowRef<number>
+	}
+
+	/**
+	 * Display label for the gantt bar.
+	 */
+	label?: string
+}
+
+/**
+ * Connection handle information for gantt bar connections.
+ * @public
+ */
+export interface ConnectionHandle {
+	/**
+	 * Unique identifier for the connection handle.
+	 */
+	id: string
+
+	/**
+	 * The row index of the gantt bar this handle belongs to.
+	 */
+	rowIndex: number
+
+	/**
+	 * The column index of the gantt bar this handle belongs to.
+	 */
+	colIndex: number
+
+	/**
+	 * The side of the gantt bar where this handle is located.
+	 */
+	side: 'left' | 'right'
+
+	/**
+	 * The position of the connection handle.
+	 */
+	position: {
+		x: ShallowRef<number>
+		y: ShallowRef<number>
+	}
+
+	/**
+	 * Whether the handle is currently visible (on hover).
+	 */
+	visible: Ref<boolean>
+
+	/**
+	 * Reference to the gantt bar this handle belongs to.
+	 */
+	barId: string
+}
+
+/**
+ * Connection path between two gantt bars.
+ * @public
+ */
+export interface ConnectionPath {
+	/**
+	 * Unique identifier for the connection path.
+	 */
+	id: string
+
+	/**
+	 * The source connection handle.
+	 */
+	from: {
+		barId: string
+		side: 'left' | 'right'
+	}
+
+	/**
+	 * The target connection handle.
+	 */
+	to: {
+		barId: string
+		side: 'left' | 'right'
+	}
+
+	/**
+	 * Optional styling for the connection path.
+	 */
+	style?: {
+		color?: string
+		width?: number
+	}
+
+	/**
+	 * Optional label for the connection.
+	 */
+	label?: string
+}
+
+/**
+ * Connection event for handling connection creation/deletion.
+ * @public
+ */
+export type ConnectionEvent = {
+	type: 'create' | 'delete'
+	connection: ConnectionPath
+}