@rokkit/states 1.0.0-next.106 → 1.0.0-next.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/states",
-  "version": "1.0.0-next.106",
+  "version": "1.0.0-next.108",
   "description": "Contains generic data manipulation functions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@lukeed/uuid": "^2.0.1",
-    "@rokkit/core": "1.0.0-next.105",
+    "@rokkit/core": "1.0.0-next.106",
     "d3-array": "^3.2.4",
     "d3-collection": "^1.0.7",
     "ramda": "^0.30.1",

package/src/base-proxy.svelte.js

@@ -0,0 +1,243 @@
+import { defaultFields } from '@rokkit/core'
+
+/**
+ * Base class for all proxy models that provides a common interface
+ * for navigation and selection operations.
+ *
+ * @abstract
+ */
+export class BaseProxy {
+	/** @type {any[]} Original data array */
+	data = $state(null)
+	/** @type {NodeProxy|null} Currently focused node */
+	nodes = $state([])
+	/** @type {NodeProxy[]} Flattened array of all visible nodes */
+	visibleNodes = $state([])
+
+	/** @type {NodeProxy|null} Currently focused node */
+	currentNode = $state(null)
+	/** @type {Object|null} Currently focused node */
+	value = $state(null)
+	/** @type {Map<string, NodeProxy>} Map of selected nodes by id */
+	selectedNodes = $state(new Map())
+
+	/** @type {Object} Field mappings */
+	fields
+
+	/** @type {Object} Configuration options */
+	options = {
+		multiSelect: false,
+		keyboardNavigation: true
+	}
+
+	/**
+	 * Creates a new proxy instance
+	 *
+	 * @param {any[]} data - Original data
+	 * @param {Object} fields - Field mappings
+	 * @param {Object} options - Configuration options
+	 */
+	constructor(data, value, fields = {}, options = {}) {
+		this.fields = { ...defaultFields, ...fields }
+		this.options = { ...this.options, ...options }
+		this.value = value
+
+		this.update(data)
+	}
+
+	/**
+	 * Updates the proxy with new data
+	 *
+	 * @param {any} data - New data to use
+	 * @returns {BaseProxy} - This proxy for method chaining
+	 */
+	update(data) {
+		this.data = data
+		this.reset()
+		return this
+	}
+
+	/**
+	 * Resets selection state
+	 *
+	 * @returns {BaseProxy} - This proxy for method chaining
+	 */
+	reset() {
+		this.selectedNodes.clear()
+		this.currentNode = null
+		return this
+	}
+
+	/**
+	 * Move to a specific target (index, path, or item)
+	 *
+	 * @abstract
+	 * @param {number|number[]} target - Target to move to
+	 * @returns {boolean} - True if moved, false otherwise
+	 */
+	moveTo() {
+		throw new Error('moveTo() must be implemented by subclass')
+	}
+
+	/**
+	 * Move to the next item
+	 *
+	 * @abstract
+	 * @returns {boolean} - True if moved, false otherwise
+	 */
+	moveNext() {
+		throw new Error('moveNext() must be implemented by subclass')
+	}
+
+	/**
+	 * Move to the previous item
+	 *
+	 * @abstract
+	 * @returns {boolean} - True if moved, false otherwise
+	 */
+	movePrev() {
+		throw new Error('movePrev() must be implemented by subclass')
+	}
+
+	/**
+	 * Expand the current node
+	 *
+	 * @returns {boolean} - True if expanded, false otherwise
+	 */
+	expand() {
+		// Default implementation for flat lists (no-op)
+		return false
+	}
+
+	/**
+	 * Collapse the current node
+	 *
+	 * @returns {boolean} - True if collapsed, false otherwise
+	 */
+	collapse() {
+		// Default implementation for flat lists (no-op)
+		return false
+	}
+
+	/**
+	 * Toggle expanded/collapsed state
+	 *
+	 * @returns {boolean} - True if state changed, false otherwise
+	 */
+	toggleExpansion() {
+		// Default implementation for flat lists (no-op)
+		return false
+	}
+
+	/**
+	 * Finds a node by a custom condition
+	 *
+	 * @param {Function} condition - Function that returns true for matching nodes
+	 * @returns {NodeProxy|null} - The found node or null
+	 */
+	find(condition) {
+		let result = null
+		for (let i = 0; i < this.nodes.length; i++) {
+			result = this.nodes[i].find(condition)
+			if (result) return result
+		}
+		return null
+	}
+
+	/**
+	 * Finds the path index by a custom condition
+	 *
+	 * @param {Function} condition - Function that returns true for matching nodes
+	 * @returns {number[]} - path index of found node or empty array
+	 */
+	findPathIndex(condition) {
+		const result = this.find(condition)
+		return result?.path ?? []
+	}
+
+	/**
+	 * Gets a node by its path
+	 *
+	 * @param {number|number[]} path - Path to the node
+	 * @returns {NodeProxy|null} - The node or null if not found
+	 */
+	getNodeByPath(path = []) {
+		path = Array.isArray(path) ? path : [path]
+
+		if (!path.length || !this.data) return null
+		return path.reduce((currentNodes, index, depth) => {
+			// If we've hit a dead end or invalid index, return null
+			if (currentNodes === null || index < 0 || index >= currentNodes.length) {
+				return null
+			}
+
+			// Get the node at the current index
+			const node = currentNodes[index]
+
+			// If we've reached the final depth, return the node
+			if (depth === path.length - 1) return node
+
+			// Otherwise, move to the next level (children)
+			return node.children
+		}, this.nodes)
+	}
+
+	/**
+	 * Selects the current node
+	 *
+	 * @param {number|number[]} [path] - The path to the node to toggle selection
+	 * @returns {boolean} - Whether the selection was successful
+	 */
+	select(path) {
+		const node = path ? this.getNodeByPath(path) : this.currentNode
+		if (!node) return false
+
+		if (!this.options.multiSelect) {
+			this.selectedNodes.forEach((node) => {
+				node.selected = false
+			})
+			this.selectedNodes.clear()
+		}
+
+		// Select the current node
+		node.selected = true
+		this.selectedNodes.set(node.id, node)
+		return true
+	}
+
+	/**
+	 * Toggles selection on the current node (for multi-select)
+	 *
+	 * @param {number|number[]} [path] - The path to the node to toggle selection
+	 * @returns {boolean} - Whether the operation was successful
+	 */
+	toggleSelection(path) {
+		const node = path ? this.getNodeByPath(path) : this.currentNode
+
+		if (!node) return false
+
+		node.selected = !node.selected
+		const nodeId = node.id
+
+		if (node.selected) {
+			this.selectedNodes.set(nodeId, node)
+		} else {
+			this.selectedNodes.delete(nodeId)
+		}
+		return true
+	}
+
+	/**
+	 * Extends selection on the current node (for multi-select)
+	 *
+	 * @param {number|number[]} [path] - The path to the node to extend selection
+	 * @returns {boolean} - Whether the operation was successful
+	 */
+	extendSelection(path) {
+		if (this.options.multiSelect) {
+			return this.toggleSelection(path)
+		} else {
+			return this.select(path)
+		}
+	}
+}

package/src/derive.svelte.js

@@ -0,0 +1,58 @@
+import { getKeyFromPath, defaultFields, getNestedFields } from '@rokkit/core'
+
+/**
+ *
+ * @param {Array<*>} items
+ * @param {import('@rokkit/core').FieldMapping} fields
+ * @param {Array<number>} path
+ * @returns {Array<{ key: string, value: any }>}
+ */
+export function flatVisibleNodes(items, fields = defaultFields, path = []) {
+	const data = []
+	items.forEach((item, index) => {
+		const itemPath = [...path, index]
+		const key = getKeyFromPath(itemPath)
+		const expanded =
+			Array.isArray(item[fields.children]) &&
+			item[fields.children].length > 0 &&
+			item[fields.expanded]
+
+		data.push({ key, value: item })
+
+		if (expanded) {
+			const childFields = getNestedFields(fields)
+			data.push(...flatVisibleNodes(item[fields.children], childFields, itemPath))
+		}
+	})
+	return data
+}
+
+/**
+ * Derives a flat lookup table for the given items, using the index path as key
+ *
+ * @param {Array<*>} items
+ * @param {import('@rokkit/core').FieldMapping} fields
+ * @param {Array<number>} path
+ * @returns {Record<string, { depth: number, item: any }>}
+ */
+export function deriveLookup(items, fields = defaultFields, path = []) {
+	const lookup = {}
+
+	items.forEach((item, index) => {
+		const itemPath = [...path, index]
+		const key = getKeyFromPath(itemPath)
+
+		lookup[key] = { depth: itemPath.length - 1, value: item }
+		const hasChildren =
+			typeof item === 'object' &&
+			Array.isArray(item[fields.children]) &&
+			item[fields.children].length > 0
+
+		if (hasChildren) {
+			const childFields = getNestedFields(fields)
+			const result = deriveLookup(item[fields.children], childFields, itemPath)
+			Object.assign(lookup, result)
+		}
+	})
+	return lookup
+}

package/src/index.js

@@ -1,3 +1,8 @@
-export { DataWrapper } from './nested.svelte'
 export { TableWrapper } from './tabular.svelte'
+// export { NodeProxy } from './node-proxy.svelte'
+// export { ListProxy } from './list-proxy.svelte'
+// export { NestedProxy } from './nested-proxy.svelte'
+export { Proxy } from './proxy.svelte'
 export { vibe } from './vibe.svelte'
+export { ListController } from './list-controller.svelte'
+export { NestedController } from './nested-controller.svelte'

package/src/list-controller-dup.svelte.js

@@ -0,0 +1,155 @@
+import { SvelteMap } from 'svelte/reactivity'
+import { FieldMapper } from '@rokkit/core'
+import { isNil, equals } from 'ramda'
+import { getKeyFromPath } from '@rokkit/core'
+
+export class ListController {
+	items = $state(null)
+	selected = new SvelteMap()
+	activeItem = $state(null)
+	activeIndex = -1
+	options = $state({})
+
+	mappers = $state([])
+	data = $state(null)
+	lookup = new SvelteMap()
+
+	constructor(items, value, fields, options) {
+		this.items = items
+		this.mappers.push(new FieldMapper(fields))
+		this.options = { multiSelect: false, ...options }
+		this.init(items, value)
+	}
+
+	get isNested() {
+		return this.mappers.length > 0
+	}
+
+	/**
+	 * @protected
+	 */
+	init(items, value) {
+		console.log('init', value)
+		this.data = items
+		this.data.forEach((item, index) => {
+			this.lookup.set(getKeyFromPath(index), item)
+		})
+		this.moveToValue(value)
+	}
+
+	/**
+	 * @private
+	 * @param {number|number[]} path
+	 */
+	getIndexFromPath(path) {
+		return !isNil(path) && !Array.isArray(path) ? path : path[0]
+	}
+
+	moveToValue(value) {
+		if (!value) return false
+
+		const index = this.data.findIndex((item) => equals(item, value))
+		return this.select(index)
+	}
+	/**
+	 * @private
+	 * @param {numeric} index
+	 */
+	setActiveItem(index) {
+		this.activeItem = this.data[index]
+	}
+	/**
+	 * @private
+	 * @param {numeric} index
+	 */
+	getItemAtIndex(index) {
+		return this.data[index]
+	}
+
+	moveTo(path) {
+		const index = this.getIndexFromPath(path)
+		console.log('moveTo', path, index)
+		if (index >= 0 && index < this.data.length && index !== this.activeIndex) {
+			this.activeIndex = index
+			this.setActiveItem(index)
+			return true
+		}
+		return false
+	}
+
+	movePrev() {
+		if (this.activeIndex < 0) {
+			return this.moveTo(0)
+		} else if (this.activeIndex > 0) {
+			return this.moveTo(this.activeIndex - 1)
+		}
+		return false
+	}
+
+	moveNext() {
+		if (this.activeIndex < this.data.length - 1) {
+			return this.moveTo(this.activeIndex + 1)
+		}
+		return false
+	}
+
+	moveFirst() {
+		this.moveTo(0)
+	}
+
+	moveLast() {
+		this.moveTo(this.data.length - 1)
+	}
+
+	/**
+	 * @private
+	 * @param {number} index
+	 */
+	toggleSelection(path) {
+		const key = getKeyFromPath(path)
+		const index = this.getIndexFromPath(path)
+
+		if (this.selected.has(key)) {
+			this.selected.delete(key)
+		} else {
+			this.selected.add(key, this.getItemAtIndex(index))
+		}
+		return true
+	}
+
+	/**
+	 *
+	 * @param {number|number[]} path
+	 * @returns
+	 */
+	extendSelection(path) {
+		const index = isNil(path) ? this.activeIndex : this.getIndexFromPath(path)
+		if (index >= 0 && index < this.data.length) return false
+
+		if (this.options.multiselect) {
+			return this.toggleSelection(path)
+		} else {
+			return this.select(path)
+		}
+	}
+
+	/**
+	 *
+	 * @param {number|number[]} path
+	 * @returns
+	 */
+	select(path) {
+		const index = isNil(path) ? this.activeIndex : this.getIndexFromPath(path)
+		if (index > -1 && index !== this.activeIndex) {
+			this.selected.clear()
+			this.selected.set(getKeyFromPath(path), this.getItemAtIndex(index))
+		}
+
+		this.moveTo(path)
+		return true
+	}
+
+	toggleExpansion() {
+		return false
+	}
+}

package/src/list-controller.svelte.js

@@ -0,0 +1,176 @@
+import { FieldMapper, defaultFields } from '@rokkit/core'
+import { equals } from 'ramda'
+import { SvelteSet } from 'svelte/reactivity'
+import { flatVisibleNodes } from './derive.svelte'
+
+export class ListController {
+	items = $state(null)
+	fields = defaultFields
+	mappers = []
+	#options = $state({})
+	lookup = new Map()
+	selectedKeys = new SvelteSet()
+	focusedKey = $state(null)
+	#currentIndex = -1
+
+	selected = $derived(Array.from(this.selectedKeys).map((key) => this.lookup.get(key)))
+	focused = $derived(this.lookup.get(this.focusedKey))
+	data = $derived(flatVisibleNodes(this.items, this.fields))
+
+	constructor(items, value, fields, options) {
+		this.items = items
+		this.fields = { ...defaultFields, ...fields }
+		this.mappers.push(new FieldMapper(fields))
+		this.#options = { multiselect: false, ...options }
+		this.init(items, value)
+	}
+
+	/**
+	 * @private
+	 * @param {Array<*>} items
+	 * @param {*} value
+	 */
+	init(items, value) {
+		items.forEach((item, index) => this.lookup.set(String(index), item))
+		this.moveToValue(value)
+	}
+
+	get isNested() {
+		return this.mappers.length > 1
+	}
+
+	get currentKey() {
+		return this.focusedKey
+	}
+
+	/**
+	 * @private
+	 * @param {*} value
+	 * @returns
+	 */
+	findByValue(value) {
+		const index = this.data.findIndex((row) => equals(row.value, value))
+		return index < 0 ? { index } : { index, ...this.data[index] }
+	}
+
+	/**
+	 * @private
+	 * @param {*} value
+	 * @returns
+	 */
+	moveToValue(value = null) {
+		const { index, key } = this.findByValue(value)
+
+		this.selectedKeys.clear()
+		if (index >= 0) {
+			this.moveToIndex(index)
+			this.selectedKeys.add(key)
+		} else {
+			this.focusedKey = null
+			this.#currentIndex = -1
+		}
+		return true
+	}
+
+	/**
+	 *
+	 * @param {string} path
+	 * @returns
+	 */
+	moveTo(path) {
+		const index = Number(path)
+		return this.moveToIndex(index)
+	}
+
+	/**
+	 * @private
+	 * @param {number} index
+	 */
+	moveToIndex(index) {
+		if (index >= 0 && index < this.data.length && this.#currentIndex !== index) {
+			this.#currentIndex = index
+			this.focusedKey = this.data[index].key
+			return true
+		}
+		return false
+	}
+
+	movePrev() {
+		if (this.#currentIndex > 0) {
+			return this.moveToIndex(this.#currentIndex - 1)
+		} else if (this.#currentIndex < 0) {
+			return this.moveLast()
+		}
+		return false
+	}
+
+	moveNext() {
+		if (this.#currentIndex < this.data.length - 1) {
+			return this.moveToIndex(this.#currentIndex + 1)
+		}
+		return false
+	}
+
+	moveFirst() {
+		return this.moveToIndex(0)
+	}
+
+	moveLast() {
+		return this.moveToIndex(this.data.length - 1)
+	}
+
+	/**
+	 * Toggles the selection.
+	 * @private
+	 * @param {string} key
+	 */
+	toggleSelection(key) {
+		if (this.selectedKeys.has(key)) {
+			this.selectedKeys.delete(key)
+		} else {
+			this.selectedKeys.add(key)
+		}
+
+		return true
+	}
+
+	/**
+	 *
+	 * @param {string} selectedKey
+	 * @returns
+	 */
+	select(selectedKey) {
+		const key = selectedKey ?? this.focusedKey
+
+		if (!this.lookup.has(key)) return false
+
+		if (this.focusedKey !== key) {
+			const { index } = this.findByValue(this.lookup.get(key))
+			this.moveToIndex(index)
+		}
+
+		if (!this.selectedKeys.has(key)) {
+			this.selectedKeys.clear()
+			this.selectedKeys.add(key)
+		}
+
+		return true
+	}
+
+	/**
+	 *
+	 * @param {string} selectedKey
+	 * @returns
+	 */
+	extendSelection(selectedKey) {
+		const key = selectedKey ?? this.focusedKey
+
+		if (!this.lookup.has(key)) return false
+
+		if (this.#options.multiselect) {
+			return this.toggleSelection(key)
+		} else {
+			return this.select(key)
+		}
+	}
+}