@stonecrop/atable 0.4.23 → 0.4.24

package/src/components/AGanttConnection.vue

@@ -0,0 +1,164 @@
+<template>
+	<div class="gantt-connection-overlay">
+		<svg
+			class="connection-svg"
+			:style="{
+				position: 'absolute',
+				top: 0,
+				left: 0,
+				width: '100%',
+				height: '100%',
+				pointerEvents: 'none',
+				zIndex: 1,
+			}">
+			<defs>
+				<!-- Define arrowhead marker for connections -->
+				<path id="arrowhead" d="M 0 -7 L 20 0 L 0 7Z" stroke="black" stroke-width="1" fill="currentColor"></path>
+				<marker
+					id="arrowhead-marker"
+					markerWidth="10"
+					markerHeight="7"
+					refX="5"
+					refY="3.5"
+					orient="auto"
+					markerUnits="strokeWidth">
+					<polygon points="0 0, 10 3.5, 0 7" fill="currentColor" />
+				</marker>
+			</defs>
+
+			<!-- Invisible wider path for easier double-click interaction -->
+			<path
+				v-for="connection in visibleConnections"
+				:key="`${connection.id}-hitbox`"
+				:d="getPathData(connection)"
+				stroke="transparent"
+				:stroke-width="(connection.style?.width || 2) + 10"
+				fill="none"
+				class="connection-hitbox"
+				@dblclick="handleConnectionDelete(connection)" />
+
+			<!-- Visible connection path -->
+			<path
+				v-for="connection in visibleConnections"
+				:key="connection.id"
+				:d="getPathData(connection)"
+				:stroke="connection.style?.color || '#666'"
+				:stroke-width="connection.style?.width || 2"
+				fill="none"
+				marker-mid="url(#arrowhead-marker)"
+				:id="connection.id"
+				class="connection-path animated-path"
+				@dblclick="handleConnectionDelete(connection)" />
+		</svg>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { createTableStore } from '../stores/table'
+import type { ConnectionPath } from '../types'
+
+const { store } = defineProps<{
+	store: ReturnType<typeof createTableStore>
+}>()
+
+const emit = defineEmits<{
+	'connection:delete': [connection: ConnectionPath]
+}>()
+
+const BEZIER_CURVE_FACTOR = 0.25 // Control point offset factor for bezier curves
+const CONNECTION_HANDLE_SIZE = 16 // Width of the connection handles; this should match the handle size in the AGanttCell component
+
+const visibleConnections = computed(() => {
+	return store.connectionPaths.filter(connection => {
+		const fromBar = store.ganttBars.find(bar => bar.id === connection.from.barId)
+		const toBar = store.ganttBars.find(bar => bar.id === connection.to.barId)
+		return fromBar && toBar
+	})
+})
+
+const getPathData = (connection: ConnectionPath, isMarker: Boolean = false) => {
+	const fromHandle = store.connectionHandles.find(
+		handle => handle.barId === connection.from.barId && handle.side === connection.from.side
+	)
+	const toHandle = store.connectionHandles.find(
+		handle => handle.barId === connection.to.barId && handle.side === connection.to.side
+	)
+
+	if (!fromHandle || !toHandle) return ''
+
+	const fromX = fromHandle.position.x + CONNECTION_HANDLE_SIZE / 2 // Center of the handle
+	const fromY = fromHandle.position.y + CONNECTION_HANDLE_SIZE / 2
+	const toX = toHandle.position.x + CONNECTION_HANDLE_SIZE / 2
+	const toY = toHandle.position.y + CONNECTION_HANDLE_SIZE / 2
+
+	// Calculate control points for smooth bezier curve
+	const deltaX = Math.abs(toX - fromX)
+	const controlPointOffset = Math.max(deltaX * BEZIER_CURVE_FACTOR, 50) // Minimum offset for better curves
+	const cp1X = fromX + (connection.from.side === 'left' ? -controlPointOffset : controlPointOffset)
+	const cp2X = toX + (connection.to.side === 'left' ? -controlPointOffset : controlPointOffset)
+
+	// Use cubic bezier curve for smooth connections
+
+	//calculate the mid point of the curve
+	const m0 = { x: 0.5 * fromX + 0.5 * cp1X, y: 0.5 * fromY + 0.5 * fromY }
+	const m1 = { x: 0.5 * cp1X + 0.5 * cp2X, y: 0.5 * fromY + 0.5 * toY }
+	const m2 = { x: 0.5 * cp2X + 0.5 * toX, y: 0.5 * toY + 0.5 * toY }
+	const m3 = { x: 0.5 * m0.x + 0.5 * m1.x, y: 0.5 * m0.y + 0.5 * m1.y }
+	const m4 = { x: 0.5 * m1.x + 0.5 * m2.x, y: 0.5 * m1.y + 0.5 * m2.y }
+	const midpoint = { x: 0.5 * m3.x + 0.5 * m4.x, y: 0.5 * m3.y + 0.5 * m4.y }
+
+	// Calculate the bezier curve using two arcs
+	return `M ${fromX} ${fromY} Q ${cp1X} ${fromY}, ${midpoint.x} ${midpoint.y} Q ${cp2X} ${toY}, ${toX} ${toY}`
+}
+
+const handleConnectionDelete = (connection: ConnectionPath) => {
+	if (store.deleteConnection(connection.id)) {
+		emit('connection:delete', connection)
+	}
+}
+</script>
+
+<style scoped>
+.gantt-connection-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	z-index: 1;
+}
+
+.connection-path {
+	transition: stroke-width 0.2s ease;
+	pointer-events: auto;
+	cursor: pointer;
+	stroke-dasharray: 5px;
+	stroke: var(--sc-cell-text-color);
+}
+#arrowhead-marker polygon {
+	fill: var(--sc-cell-text-color);
+}
+.animated-path {
+	animation: animated-dash infinite 1.5s linear;
+}
+
+.connection-path:hover {
+	stroke-width: 3px;
+}
+
+.connection-hitbox {
+	pointer-events: auto;
+	cursor: pointer;
+}
+@keyframes animated-dash {
+	0% {
+		stroke-dashoffset: 0px;
+	}
+	100% {
+		stroke-dashoffset: -10px;
+	}
+}
+</style>

package/src/components/ARow.vue

@@ -10,7 +10,7 @@
 				{{ rowIndex + 1 }}
 			</td>
 			<td
-				v-else-if="store.config.view === 'tree'"
+				v-else-if="store.isTreeView"
 				:tabIndex="-1"
 				class="tree-index"
 				:class="store.hasPinnedColumns ? 'sticky-index' : ''"

package/src/components/ATable.vue

@@ -1,103 +1,111 @@
 <template>
-	<table
-		ref="table"
-		class="atable"
-		:style="{
-			width: store.config.fullWidth ? '100%' : 'auto',
-		}"
-		v-on-click-outside="store.closeModal">
-		<slot name="header" :data="store">
-			<ATableHeader :columns="store.columns" :store="store" />
-		</slot>
-
-		<tbody>
-			<slot name="body" :data="store">
-				<ARow v-for="(row, rowIndex) in store.rows" :key="row.id" :row="row" :rowIndex="rowIndex" :store="store">
-					<template v-for="(column, colIndex) in getProcessedColumnsForRow(row)" :key="column.name">
-						<component
-							v-if="column.isGantt"
-							:is="column.ganttComponent || 'AGanttCell'"
-							:store="store"
-							:columnsCount="store.columns.length - pinnedColumnCount"
-							:color="row.gantt?.color"
-							:start="row.gantt?.startIndex"
-							:end="row.gantt?.endIndex"
-							:colspan="column.colspan"
-							:pinned="column.pinned"
-							:rowIndex="rowIndex"
-							:colIndex="column.originalIndex ?? colIndex"
-							:style="{
-								textAlign: column?.align || 'center',
-								minWidth: column?.width || '40ch',
-								width: store.config.fullWidth ? 'auto' : null,
-							}" />
+	<div class="atable-container" style="position: relative">
+		<!-- Main table view -->
+		<table
+			ref="table"
+			class="atable"
+			:style="{
+				width: store.config.fullWidth ? '100%' : 'auto',
+			}"
+			v-on-click-outside="store.closeModal">
+			<slot name="header" :data="store">
+				<ATableHeader :columns="store.columns" :store="store" />
+			</slot>
+
+			<tbody>
+				<slot name="body" :data="store">
+					<ARow v-for="(row, rowIndex) in store.rows" :key="row.id" :row="row" :rowIndex="rowIndex" :store="store">
+						<template v-for="(column, colIndex) in getProcessedColumnsForRow(row)" :key="column.name">
+							<component
+								v-if="column.isGantt"
+								:is="column.ganttComponent || 'AGanttCell'"
+								:store="store"
+								:columnsCount="store.columns.length - pinnedColumnCount"
+								:color="row.gantt?.color"
+								:start="row.gantt?.startIndex"
+								:end="row.gantt?.endIndex"
+								:colspan="column.colspan"
+								:pinned="column.pinned"
+								:rowIndex="rowIndex"
+								:colIndex="column.originalIndex ?? colIndex"
+								:style="{
+									textAlign: column?.align || 'center',
+									minWidth: column?.width || '40ch',
+									width: store.config.fullWidth ? 'auto' : null,
+								}"
+								@connection:create="handleConnectionCreate" />
+							<component
+								v-else
+								:is="column.cellComponent || 'ACell'"
+								:store="store"
+								:pinned="column.pinned"
+								:rowIndex="rowIndex"
+								:colIndex="colIndex"
+								:style="{
+									textAlign: column?.align || 'center',
+									width: store.config.fullWidth ? 'auto' : null,
+								}"
+								spellcheck="false" />
+						</template>
+					</ARow>
+				</slot>
+			</tbody>
+
+			<slot name="footer" :data="store" />
+
+			<!-- Modal overlay -->
+			<slot name="modal" :data="store">
+				<ATableModal v-show="store.modal.visible" :store="store">
+					<template #default>
 						<component
-							v-else
-							:is="column.cellComponent || 'ACell'"
+							:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
+							:is="store.modal.component"
+							:colIndex="store.modal.colIndex"
+							:rowIndex="store.modal.rowIndex"
 							:store="store"
-							:pinned="column.pinned"
-							:rowIndex="rowIndex"
-							:colIndex="colIndex"
-							:style="{
-								textAlign: column?.align || 'center',
-								width: store.config.fullWidth ? 'auto' : null,
-							}"
-							spellcheck="false" />
+							v-bind="store.modal.componentProps" />
 					</template>
-				</ARow>
+				</ATableModal>
 			</slot>
-		</tbody>
-
-		<slot name="footer" :data="store" />
-		<slot name="modal" :data="store">
-			<ATableModal v-show="store.modal.visible" :store="store">
-				<template #default>
-					<component
-						:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
-						:is="store.modal.component"
-						:colIndex="store.modal.colIndex"
-						:rowIndex="store.modal.rowIndex"
-						:store="store"
-						v-bind="store.modal.componentProps" />
-				</template>
-			</ATableModal>
-		</slot>
-	</table>
+		</table>
+
+		<!-- Connection overlay for gantt connections -->
+		<AGanttConnection v-if="store.isGanttView" :store="store" @connection:delete="handleConnectionDelete" />
+	</div>
 </template>
 
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components'
 import { useMutationObserver } from '@vueuse/core'
-import { nextTick, onMounted, useTemplateRef, computed, watch } from 'vue'
+import { computed, nextTick, onMounted, useTemplateRef, watch } from 'vue'
 
+import AGanttConnection from './AGanttConnection.vue'
 import ARow from './ARow.vue'
 import ATableHeader from './ATableHeader.vue'
 import ATableModal from './ATableModal.vue'
 import { createTableStore } from '../stores/table'
-import type { GanttDragEvent, TableColumn, TableConfig, TableRow } from '../types'
+import type { ConnectionEvent, ConnectionPath, GanttDragEvent, TableColumn, TableConfig, TableRow } from '../types'
 
 const modelValue = defineModel<TableRow[]>({ required: true })
 
 const {
 	id,
 	columns,
-	rows = [],
 	config = new Object(),
 } = defineProps<{
 	id?: string
 	columns: TableColumn[]
-	rows?: TableRow[]
 	config?: TableConfig
 }>()
 
 const emit = defineEmits<{
 	cellUpdate: [{ colIndex: number; rowIndex: number; newValue: any; oldValue: any }]
 	'gantt:drag': [event: GanttDragEvent]
+	'connection:event': [event: ConnectionEvent]
 }>()
 
 const tableRef = useTemplateRef<HTMLTableElement>('table')
-const rowsValue = modelValue.value.length > 0 ? modelValue.value : rows
-const store = createTableStore({ columns, rows: rowsValue, id, config })
+const store = createTableStore({ columns, rows: modelValue.value, id, config })
 
 store.$onAction(({ name, store, args, after }) => {
 	if (name === 'setCellData' || name === 'setCellText') {
@@ -141,8 +149,8 @@ onMounted(() => {
 	if (columns.some(column => column.pinned)) {
 		assignStickyCellWidths()
 
-		// in tree view, also add a mutation observer to capture and adjust expanded rows
-		if (store.config.view === 'tree') {
+		// in tree views, also add a mutation observer to capture and adjust expanded rows
+		if (store.isTreeView) {
 			useMutationObserver(tableRef, assignStickyCellWidths, { childList: true, subtree: true })
 		}
 	}
@@ -204,8 +212,7 @@ window.addEventListener('keydown', (event: KeyboardEvent) => {
 })
 
 const getProcessedColumnsForRow = (row: TableRow) => {
-	const isGanttRow = row.indent === 0
-	if (!isGanttRow || pinnedColumnCount.value === 0) {
+	if (!row.gantt || pinnedColumnCount.value === 0) {
 		return store.columns
 	}
 
@@ -229,10 +236,28 @@ const getProcessedColumnsForRow = (row: TableRow) => {
 	return result
 }
 
-defineExpose({ store })
+const handleConnectionCreate = (connection: ConnectionPath) => {
+	emit('connection:event', { type: 'create', connection })
+}
+
+const handleConnectionDelete = (connection: ConnectionPath) => {
+	emit('connection:event', { type: 'delete', connection })
+}
+
+defineExpose({
+	store,
+	createConnection: store.createConnection,
+	deleteConnection: store.deleteConnection,
+	getConnectionsForBar: store.getConnectionsForBar,
+	getHandlesForBar: store.getHandlesForBar,
+})
 </script>
 
 <style>
+.atable-container {
+	position: relative;
+}
+
 .sticky-index {
 	position: sticky;
 	left: 0px;

package/src/components/ATableHeader.vue

@@ -6,7 +6,7 @@
 				id="header-index"
 				:class="[
 					store.hasPinnedColumns ? 'sticky-index' : '',
-					store.config.view === 'tree' ? 'tree-index' : '',
+					store.isTreeView ? 'tree-index' : '',
 					store.config.view === 'list-expansion' ? 'list-expansion-index' : '',
 				]"
 				class="list-index" />

package/src/index.ts

@@ -12,6 +12,10 @@ import ATableModal from './components/ATableModal.vue'
 export { createTableStore } from './stores/table'
 export type {
 	CellContext,
+	ConnectionEvent,
+	ConnectionHandle,
+	ConnectionPath,
+	GanttBarInfo,
 	GanttDragEvent,
 	GanttOptions,
 	TableColumn,

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,
@@ -56,12 +59,15 @@ export const createTableStore = (initData: {
 
 			// 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,
@@ -85,9 +91,14 @@ export const createTableStore = (initData: {
 		const display = ref(createDisplayObject(initData.display))
 		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 +106,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
@@ -158,32 +169,40 @@ 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') {
+			if (isTreeView.value) {
 				display.value[rowIndex].childrenOpen = !display.value[rowIndex].childrenOpen
-				for (let index = rows.value.length - 1; index >= 0; index--) {
+				const isOpen = display.value[rowIndex].childrenOpen
+
+				for (let index = 0; index < rows.value.length; index++) {
 					if (display.value[index].parent === rowIndex) {
-						display.value[index].open = !display.value[index].open
-						if (display.value[index].childrenOpen) {
+						display.value[index].open = isOpen
+						if (!isOpen) {
+							// If we're closing, also close any children recursively
+							display.value[index].childrenOpen = false
 							toggleRowExpand(index)
 						}
 					}
@@ -259,11 +278,98 @@ 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) {
+				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,23 +377,33 @@ 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,
 		}
 	})