@rokkit/states 1.0.0-next.107 → 1.0.0-next.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/states",
-  "version": "1.0.0-next.107",
+  "version": "1.0.0-next.109",
   "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.106",
+    "@rokkit/core": "1.0.0-next.109",
     "d3-array": "^3.2.4",
     "d3-collection": "^1.0.7",
     "ramda": "^0.30.1",

package/src/derive.svelte.js

@@ -0,0 +1,58 @@
+import { getKeyFromPath, defaultFields, getNestedFields } from '@rokkit/core'
+import { Proxy } from './proxy.svelte'
+/**
+ *
+ * @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 index paths as keys
+ * Each value is a Proxy instance for convenient manipulation
+ *
+ * @param {Array<*>} items - Source items array
+ * @param {import('@rokkit/core').FieldMapping} fields - Field mappings configuration
+ * @param {Array<number>} path - Current path in the tree
+ * @returns {Map<string, Proxy>} - Map of path keys to Proxy instances
+ */
+export function deriveLookupWithProxy(items, fields = defaultFields, path = []) {
+	const lookup = new Map()
+
+	items.forEach((item, index) => {
+		const itemPath = [...path, index]
+		const key = getKeyFromPath(itemPath)
+		const proxy = new Proxy(item, fields)
+
+		lookup.set(key, proxy)
+		// console.log(key, proxy.value)
+		if (proxy.hasChildren) {
+			const childFields = getNestedFields(fields)
+			const childLookup = deriveLookupWithProxy(proxy.get('children'), childFields, itemPath)
+			for (const [childKey, childValue] of childLookup.entries()) {
+				lookup.set(childKey, childValue)
+			}
+		}
+	})
+	return lookup
+}

package/src/index.js

@@ -1,7 +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 { 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.svelte.js

@@ -0,0 +1,177 @@
+import { FieldMapper, defaultFields } from '@rokkit/core'
+import { equals } from 'ramda'
+import { SvelteSet } from 'svelte/reactivity'
+import { deriveLookupWithProxy, 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).value))
+	focused = $derived(this.lookup.get(this.focusedKey)?.value)
+	data = $derived(flatVisibleNodes(this.items, this.fields))
+	lookup = $derived(deriveLookupWithProxy(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(value)
+	}
+
+	/**
+	 * @private
+	 * @param {Array<*>} items
+	 * @param {*} value
+	 */
+	init(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).value)
+			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)
+		}
+	}
+}

package/src/nested-controller.svelte.js

@@ -0,0 +1,122 @@
+import { getKeyFromPath, getPathFromKey, getNestedFields } from '@rokkit/core'
+import { equals } from 'ramda'
+import { ListController } from './list-controller.svelte'
+
+export class NestedController extends ListController {
+	/**
+	 * @protected
+	 * @param {Object} [value]
+	 */
+	init(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)
+			}
+		})
+	}
+
+	/**
+	 * Mark parents as expanded so that item is visible
+	 * @param {*} value
+	 * @returns
+	 */
+	ensureVisible(value) {
+		const result = this.lookup.entries().find((entry) => equals(entry[1].value, value))
+		// console.log(result)
+		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
+	}
+
+	/**
+	 * Toggle expansion of item
+	 * @param {*} value
+	 * @returns
+	 */
+	toggleExpansion(key) {
+		if (!this.lookup.has(key)) return false
+		const proxy = this.lookup.get(key)
+		proxy.expanded = !proxy.expanded
+		// const item = this.lookup.get(key)
+		// const fields = this.fieldsFor(key)
+		// item[fields.expanded] = !item[this.fields.expanded]
+		return true
+	}
+
+	/**
+	 * Expand item
+	 * @param {*} value
+	 * @returns
+	 */
+	expand(key) {
+		const actualKey = key ?? this.focusedKey
+		if (!this.lookup.has(actualKey)) return false
+		const proxy = this.lookup.get(actualKey)
+		proxy.expanded = true
+		// const item = this.lookup.get(actualKey)
+		// const fields = this.fieldsFor(actualKey)
+		// item[fields.expanded] = true
+
+		return true
+	}
+
+	/**
+	 * Collapse item
+	 * @param {*} value
+	 * @returns
+	 */
+	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
+		const proxy = this.lookup.get(actualKey)
+		proxy.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/proxy.svelte.js

@@ -2,12 +2,14 @@ import { defaultFields } from '@rokkit/core'
 import { isNil, has } from 'ramda'
 
 export class Proxy {
-	#value = $state({})
-	#fields = $state(defaultFields)
+	#original = null
+	#value = null
+	#fields = null
 
 	constructor(value, fields) {
-		this.#value = typeof value === 'object' ? value : { text: value }
 		this.fields = fields
+		this.#original = value
+		this.#value = typeof value === 'object' ? value : { [this.fields.text]: value }
 	}
 
 	get fields() {
@@ -18,7 +20,7 @@ export class Proxy {
 	}
 
 	get value() {
-		return this.#value
+		return typeof this.#original === 'object' ? this.#value : this.#original
 	}
 
 	set value(value) {
@@ -34,6 +36,7 @@ export class Proxy {
 			})
 		} else {
 			this.#value.text = value
+			this.#original = value
 		}
 	}
 
@@ -41,10 +44,11 @@ export class Proxy {
 	 * Gets a mapped attribute from the original item
 	 *
 	 * @param {string} fieldName - Name of the field to get
+	 * @param {any} defaultValue - Default value to return if not found
 	 * @returns {any|null} - The attribute value or null if not found
 	 */
-	get(fieldName) {
-		return this.has(fieldName) ? this.value[this.fields[fieldName]] : null
+	get(fieldName, defaultValue = null) {
+		return this.has(fieldName) ? this.#value[this.fields[fieldName]] : defaultValue
 	}
 
 	/**
@@ -54,6 +58,27 @@ export class Proxy {
 	 */
 	has(fieldName) {
 		const mappedField = this.fields[fieldName]
-		return !isNil(mappedField) && has(mappedField, this.value)
+		return !isNil(mappedField) && has(mappedField, this.#value)
+	}
+
+	/**
+	 * Identifies if the item has children
+	 */
+	get hasChildren() {
+		return (
+			typeof this.#original === 'object' &&
+			Array.isArray(this.#value[this.fields.children]) &&
+			this.#value[this.fields.children].length > 0
+		)
+	}
+
+	get expanded() {
+		return this.has('expanded') ? this.#value[this.fields.expanded] : false
+	}
+
+	set expanded(value) {
+		if (typeof this.#original === 'object') {
+			this.#value[this.fields.expanded] = Boolean(value)
+		}
 	}
 }

package/src/traversal.svelte.js

@@ -0,0 +1,137 @@
+/**
+ * Handles navigation through a flattened data structure
+ */
+export class Traversal {
+	#dataProvider
+	#currentKey = $state(null)
+	#currentIndex = $derived(this.getCurrentIndex())
+
+	/**
+	 * @param {object} dataProvider - Data provider component
+	 */
+	constructor(dataProvider) {
+		this.#dataProvider = dataProvider
+	}
+
+	/**
+	 * Gets the current focused key
+	 * @returns {string|null} The current key or null if none selected
+	 */
+	get currentKey() {
+		return this.#currentKey
+	}
+
+	/**
+	 * Gets the current focused index
+	 * @returns {number} The current index or -1 if none selected
+	 */
+	get currentIndex() {
+		return this.#currentIndex
+	}
+
+	/**
+	 * Gets the currently focused item
+	 * @returns {object|null} The focused item or null
+	 */
+	get focused() {
+		return this.#currentKey ? this.#dataProvider.getItemByKey(this.#currentKey) : null
+	}
+
+	/**
+	 * Calculates the current index based on the current key
+	 * @private
+	 * @returns {number} The current index or -1 if not found
+	 */
+	getCurrentIndex() {
+		if (!this.#currentKey) return -1
+
+		const index = this.#dataProvider.getIndexForKey(this.#currentKey)
+		return index !== undefined ? index : -1
+	}
+
+	/**
+	 * Focuses on an item by its key
+	 * @param {string} key - Key of the item to focus
+	 * @returns {boolean} True if focus changed, false otherwise
+	 */
+	moveToKey(key) {
+		if (!key || !this.#dataProvider.lookup.has(key)) return false
+		if (this.#currentKey === key) return false
+
+		this.#currentKey = key
+		return true
+	}
+
+	/**
+	 * Focuses on an item by its index in the flattened list
+	 * @param {number} index - Index of the item to focus
+	 * @returns {boolean} True if focus changed, false otherwise
+	 */
+	moveToIndex(index) {
+		const nodes = this.#dataProvider.nodes
+
+		if (index < 0 || index >= nodes.length) return false
+		if (this.#currentIndex === index) return false
+
+		this.#currentKey = nodes[index].key
+		return true
+	}
+
+	/**
+	 * Focuses on an item by finding its value in the data
+	 * @param {*} value - Value to find and focus
+	 * @returns {boolean} True if found and focused, false otherwise
+	 */
+	moveToValue(value) {
+		if (!value) {
+			this.#currentKey = null
+			return true
+		}
+
+		const key = this.#dataProvider.getKeyForValue(value)
+		if (!key) return false
+
+		return this.moveToKey(key)
+	}
+
+	/**
+	 * Moves focus to the previous visible item
+	 * @returns {boolean} True if moved, false if at the beginning
+	 */
+	movePrev() {
+		if (this.#currentIndex > 0) {
+			return this.moveToIndex(this.#currentIndex - 1)
+		} else if (this.#currentIndex < 0 && this.#dataProvider.nodes.length > 0) {
+			return this.moveLast() // If not focused, go to last item
+		}
+		return false
+	}
+
+	/**
+	 * Moves focus to the next visible item
+	 * @returns {boolean} True if moved, false if at the end
+	 */
+	moveNext() {
+		if (this.#currentIndex < this.#dataProvider.nodes.length - 1) {
+			return this.moveToIndex(this.#currentIndex + 1)
+		}
+		return false
+	}
+
+	/**
+	 * Moves focus to the first item
+	 * @returns {boolean} True if moved, false otherwise
+	 */
+	moveFirst() {
+		return this.#dataProvider.nodes.length > 0 ? this.moveToIndex(0) : false
+	}
+
+	/**
+	 * Moves focus to the last item
+	 * @returns {boolean} True if moved, false otherwise
+	 */
+	moveLast() {
+		const lastIndex = this.#dataProvider.nodes.length - 1
+		return lastIndex >= 0 ? this.moveToIndex(lastIndex) : false
+	}
+}