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

package/src/list-proxy.svelte.js

@@ -0,0 +1,127 @@
+import { BaseProxy } from './base-proxy.svelte.js'
+import { NodeProxy } from './node-proxy.svelte.js'
+import { equals } from 'ramda'
+/**
+ * Manages a flat list of nodes with selection and focus capabilities
+ */
+export class ListProxy extends BaseProxy {
+	/**
+	 * Creates a new ListProxy
+	 *
+	 * @param {Object[]} data    - Original data array
+	 * @param {Object}   value   - Active value in the list
+	 * @param {Object}   fields  - Field mappings
+	 * @param {Object}   options - Configuration options
+	 */
+	constructor(data, value, fields = {}, options = {}) {
+		super(data, value, fields, options)
+		this.moveToValue(value)
+	}
+
+	/**
+	 * Updates the proxy with new data
+	 *
+	 * @param {any[]}    data    - New data to use
+	 * @returns {ListProxy}      - This proxy for method chaining
+	 */
+	update(data) {
+		this.data = data || null
+
+		// Create node proxies for all items
+		if (data && Array.isArray(data)) {
+			this.nodes = data.map((item, index) => new NodeProxy(item, [index], this.fields))
+		} else {
+			this.nodes = []
+		}
+
+		this.reset()
+		return this
+	}
+
+	/**
+	 * Moves focus to the specified target (index or item)
+	 *
+	 * @param {number|object} target - Index of the node or the node item to focus
+	 * @returns {boolean}            - Whether the move was successful
+	 */
+	moveTo(target) {
+		const index = Array.isArray(target) ? target[0] : target
+
+		// Validate index
+		if (index < 0 || index >= this.nodes.length) {
+			return false
+		}
+
+		// Update focus
+		if (this.currentNode) this.currentNode.focused = false
+
+		this.currentNode = this.nodes[index]
+		this.currentNode.focused = true
+
+		return true
+	}
+
+	/**
+	 * Moves focus to the next node
+	 *
+	 * @returns {boolean} - Whether the move was successful
+	 */
+	moveNext() {
+		if (!this.nodes.length) return false
+
+		let nextIndex = 0
+
+		if (this.currentNode) {
+			const currentIndex = this.nodes.indexOf(this.currentNode)
+			nextIndex = currentIndex + 1
+
+			// If at end of list, stay at current position
+			if (nextIndex >= this.nodes.length) {
+				return false
+			}
+		}
+
+		return this.moveTo(nextIndex)
+	}
+
+	/**
+	 * Moves focus to the previous node
+	 *
+	 * @returns {boolean} - Whether the move was successful
+	 */
+	movePrev() {
+		if (!this.nodes.length) return false
+
+		if (!this.currentNode) {
+			return this.moveTo(this.nodes.length - 1)
+		}
+
+		const currentIndex = this.nodes.indexOf(this.currentNode)
+		const prevIndex = currentIndex - 1
+
+		// If at start of list, stay at current position
+		if (prevIndex < 0) {
+			return false
+		}
+
+		return this.moveTo(prevIndex)
+	}
+
+	/**
+	 * Finds a node by value and makes it the current & active node
+	 *
+	 * @param {any} value
+	 * @returns
+	 */
+	moveToValue(value) {
+		if (!value || equals(this.currentNode?.value, value)) return false
+
+		const path = this.findPathIndex((node) => equals(node.value, value))
+		if (path.length > 0) {
+			this.moveTo(path)
+			this.select()
+			return true
+		}
+		return false
+	}
+}

package/src/nested-controller.svelte.js

@@ -0,0 +1,100 @@
+import { getKeyFromPath, getPathFromKey, getNestedFields } from '@rokkit/core'
+import { equals } from 'ramda'
+import { ListController } from './list-controller.svelte'
+
+export class NestedController extends ListController {
+	constructor(items, value, fields, options) {
+		super(items, value, fields, options)
+	}
+
+	/**
+	 * @protected
+	 * @param {Object} [value]
+	 */
+	init(items, value) {
+		this.createLookup(items)
+		if (value) {
+			this.ensureVisible(value)
+			this.moveToValue(value)
+		}
+	}
+	/**
+	 * @private
+	 * @param {Object[]} items
+	 * @param {number[]} [path]=[]
+	 */
+	createLookup(items, path = []) {
+		const depth = path.length
+		if (depth >= this.mappers.length) {
+			this.mappers.push(this.mappers[depth - 1].getChildMapper())
+		}
+		const fm = this.mappers[depth]
+
+		items.forEach((item, index) => {
+			const itemPath = [...path, index]
+			const key = getKeyFromPath(itemPath)
+
+			this.lookup.set(key, item)
+			if (fm.get('selected', item)) {
+				this.selectedKeys.add(key)
+			}
+
+			if (fm.hasChildren(item)) {
+				this.createLookup(fm.get('children', item), itemPath)
+			}
+		})
+	}
+
+	ensureVisible(value) {
+		const result = this.lookup.entries().find((entry) => equals(entry[1], value))
+		if (!Array.isArray(result)) return false
+		const path = getPathFromKey(result[0])
+
+		for (let i = 1; i < path.length; i++) {
+			const nodeKey = getKeyFromPath(path.slice(0, i))
+			this.expand(nodeKey)
+		}
+		return true
+	}
+
+	toggleExpansion(key) {
+		if (!this.lookup.has(key)) return false
+		const item = this.lookup.get(key)
+		const fields = this.fieldsFor(key)
+		item[fields.expanded] = !item[this.fields.expanded]
+		return true
+	}
+
+	expand(key) {
+		const actualKey = key ?? this.focusedKey
+		if (!this.lookup.has(actualKey)) return false
+		const item = this.lookup.get(actualKey)
+		const fields = this.fieldsFor(actualKey)
+		item[fields.expanded] = true
+
+		return true
+	}
+
+	collapse(key) {
+		const actualKey = key ?? this.focusedKey
+		if (!this.lookup.has(actualKey)) return false
+		const item = this.lookup.get(actualKey)
+		const fields = this.fieldsFor(actualKey)
+		item[fields.expanded] = false
+		return true
+	}
+
+	/**
+	 *
+	 * @param {*} key
+	 * @returns
+	 */
+	fieldsFor(key) {
+		const path = getPathFromKey(key)
+		let fields = this.fields
+		for (let i = 1; i < path.length; i++) {
+			fields = getNestedFields(fields)
+		}
+		return fields
+	}
+}

package/src/nested-proxy.svelte.js

@@ -0,0 +1,286 @@
+import { BaseProxy } from './base-proxy.svelte.js'
+import { NodeProxy } from './node-proxy.svelte.js'
+import { equals } from 'ramda'
+
+/**
+ * Manages a hierarchical tree of nodes with selection, focus and expansion capabilities
+ */
+export class NestedProxy extends BaseProxy {
+	/**
+	 * Creates a new NestedProxy
+	 *
+	 * @param {any[]} data - Original hierarchical data array
+	 * @param {any} value - Initial value for the proxy
+	 * @param {Object} fields - Field mappings
+	 * @param {Object} options - Configuration options
+	 */
+	constructor(data, value, fields = {}, options = {}) {
+		// Default options for tree structures
+		const defaultTreeOptions = {
+			expandedByDefault: false
+		}
+
+		super(data, value, fields, { ...defaultTreeOptions, ...options })
+		this.moveToValue(value)
+		// this._refreshFlatNodes()
+	}
+
+	/**
+	 * Refreshes the flatNodes
+	 * @private
+	 */
+	_refreshFlatNodes(nodes = null) {
+		if (!nodes) {
+			this.visibleNodes = []
+			this._refreshFlatNodes(this.nodes)
+		} else {
+			nodes.forEach((node) => {
+				this.visibleNodes.push(node)
+				if (node.hasChildren() && node.expanded) {
+					this._refreshFlatNodes(node.children)
+				}
+			})
+		}
+	}
+
+	/**
+	 * Processes hierarchical data into node proxies
+	 *
+	 * @private
+	 * @param {any[]} items - Items to process
+	 */
+	processNodes(items) {
+		if (!items || !Array.isArray(items)) return
+
+		this.nodes = []
+		items.forEach((item, index) => {
+			const node = new NodeProxy(item, [index], this.fields)
+			this.nodes.push(node)
+		})
+		this._refreshFlatNodes()
+	}
+
+	/**
+	 * Updates the proxy with new data
+	 *
+	 * @param {any[]} data - New hierarchical data to use
+	 * @returns {NestedProxy} - This proxy for method chaining
+	 */
+	update(data) {
+		this.data = data || null
+		this.reset()
+
+		if (!data) {
+			this.visibleNodes = []
+			return this
+		}
+
+		// Create node tree and flatten visible nodes
+		this.processNodes(data)
+		return this
+	}
+
+	/**
+	 * Moves focus to the specified target (index, path)
+	 *
+	 * @param {number|number[]} target - index or path to move to
+	 * @returns {boolean} - Whether the move was successful
+	 */
+	moveTo(target) {
+		const targetNode = Array.isArray(target)
+			? this.find((node) => equals(node.path, target))
+			: this.visibleNodes[target]
+
+		if (!targetNode) return false
+
+		// Update focus
+		if (this.currentNode) {
+			this.currentNode.focused = false
+		}
+
+		this.currentNode = targetNode
+		this.currentNode.focused = true
+
+		return true
+	}
+
+	/**
+	 * Moves focus to the next visible node
+	 *
+	 * @returns {boolean} - Whether the move was successful
+	 */
+	moveNext() {
+		if (!this.visibleNodes.length) return false
+
+		let nextIndex = 0
+
+		if (this.currentNode) {
+			const currentIndex = this.visibleNodes.indexOf(this.currentNode)
+			nextIndex = currentIndex + 1
+
+			// If at end of list, stay at current position
+			if (nextIndex >= this.visibleNodes.length) {
+				return false
+			}
+		}
+
+		return this.moveTo(nextIndex)
+	}
+
+	/**
+	 * Moves focus to the previous visible node
+	 *
+	 * @returns {boolean} - Whether the move was successful
+	 */
+	movePrev() {
+		if (!this.visibleNodes.length) return false
+
+		if (!this.currentNode) {
+			return this.moveTo(this.visibleNodes.length - 1)
+		}
+
+		const currentIndex = this.visibleNodes.indexOf(this.currentNode)
+		const prevIndex = currentIndex - 1
+
+		// If at start of list, stay at current position
+		if (prevIndex < 0) {
+			return false
+		}
+
+		return this.moveTo(prevIndex)
+	}
+
+	/**
+	 * Expand the current node
+	 *
+	 * @param {number[]} [path] - The path to the node to expand
+	 * @returns {boolean} - Whether the node was expanded
+	 */
+	expand(path) {
+		const node = path ? this.getNodeByPath(path) : this.currentNode
+		if (!node || !node.hasChildren() || node.expanded) {
+			return false
+		}
+
+		node.expanded = true
+		this._refreshFlatNodes()
+		return true
+	}
+
+	/**
+	 * Collapse the current node
+	 *
+	 * @param {number[]} [path] - The path to the node to collapse
+	 * @returns {boolean} - Whether the node was collapsed
+	 */
+	collapse(path) {
+		const node = path ? this.getNodeByPath(path) : this.currentNode
+		if (!node || !node.hasChildren() || !node.expanded) return false
+
+		node.expanded = false
+		this._refreshFlatNodes()
+		return true
+	}
+
+	/**
+	 * Toggle expanded/collapsed state of current node
+	 *
+	 * @param {number[]} [path] - The path to the node to toggle expansion
+	 * @returns {boolean} - Whether the state changed
+	 */
+	toggleExpansion(path) {
+		const node = path ? this.getNodeByPath(path) : this.currentNode
+
+		if (!node || !node.hasChildren()) {
+			return false
+		}
+
+		node.expanded = !node.expanded
+		this._refreshFlatNodes()
+		return true
+	}
+
+	/**
+	 * Expands all nodes
+	 *
+	 * @returns {NestedProxy} - This proxy for method chaining
+	 */
+	expandAll() {
+		this.visibleNodes.forEach((node) => {
+			node.expandAll()
+		})
+
+		this._refreshFlatNodes()
+		return this
+	}
+
+	/**
+	 * Collapses all nodes
+	 *
+	 * @returns {NestedProxy} - This proxy for method chaining
+	 */
+	collapseAll() {
+		this.visibleNodes.forEach((node) => {
+			node.collapseAll()
+		})
+
+		this._refreshFlatNodes()
+		return this
+	}
+
+	/**
+	 * Resets selection and expansion state
+	 *
+	 * @returns {NestedProxy} - This proxy for method chaining
+	 */
+	reset() {
+		// Clear focus
+		if (this.currentNode) {
+			this.currentNode.focused = false
+			this.currentNode = null
+		}
+		if (this.options.expandedByDefault) this.expandAll()
+		this.nodes.forEach((node) => node.resetStates())
+		this.selectedNodes.clear()
+		this._refreshFlatNodes()
+
+		return this
+	}
+
+	/**
+	 * Ensures a node is visible by expanding its ancestors
+	 *
+	 * @param {NodeProxy} node - Node to make visible
+	 * @returns {boolean} - Whether the node is now visible
+	 */
+	ensureVisible(node) {
+		if (!node || !node.path || node.path.length <= 1) return true
+
+		for (let i = 1; i < node.path.length; i++) {
+			const parentNode = this.getNodeByPath(node.path.slice(0, i))
+			parentNode.expanded = true
+		}
+		this._refreshFlatNodes()
+		return true
+	}
+
+	/**
+	 * Finds a node by value and makes it the current & active node
+	 *
+	 * @param {any} value
+	 * @returns
+	 */
+	moveToValue(value) {
+		if (!value || equals(this.currentNode?.value, value)) return false
+
+		const targetNode = this.find((node) => equals(node.value, value))
+
+		if (targetNode) {
+			this.ensureVisible(targetNode)
+			this.moveTo(targetNode.path)
+			this.select()
+			return true
+		}
+		return false
+	}
+}