@stonecrop/atable 0.4.23 → 0.4.25

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,