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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/states",
-  "version": "1.0.0-next.107",
+  "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",

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,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-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)
+		}
+	}
+}

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/node-proxy.svelte.js

@@ -52,9 +52,9 @@ export class NodeProxy {
 			? String(this.original[this.fields.id])
 			: this.path.join('-')
 		this.expanded =
-			has(this.fields.isOpen, this.original) && Boolean(this.original[this.fields.isOpen])
+			has(this.fields.expanded, this.original) && Boolean(this.original[this.fields.expanded])
 		this.selected =
-			has(this.fields.isSelected, this.original) && Boolean(this.original[this.fields.isSelected])
+			has(this.fields.selected, this.original) && Boolean(this.original[this.fields.selected])
 		this._refreshAllChildren(this.path)
 	}
 
@@ -114,9 +114,9 @@ export class NodeProxy {
 	toggle() {
 		this.expanded = !this.expanded
 
-		// Update original data if it has the isOpen field
-		if (has(this.fields.isOpen, this.original)) {
-			this.original[this.fields.isOpen] = this.expanded
+		// Update original data if it has the expanded field
+		if (has(this.fields.expanded, this.original)) {
+			this.original[this.fields.expanded] = this.expanded
 		}
 		return this
 	}

package/src/nested.svelte.js

@@ -1,267 +0,0 @@
-import { has, equals, pick } from 'ramda'
-import { SvelteMap } from 'svelte/reactivity'
-import { DEFAULT_EVENTS } from './constants'
-import { FieldMapper, getKeyFromPath } from '@rokkit/core'
-
-export class DataWrapper {
-	/* @type number[] */
-	#path = []
-	#events = {}
-	#init = false
-	#keys = null
-	#options = { multiselect: false, autoCloseSiblings: false }
-
-	items = null
-	data = $state(null)
-	value = $state(null)
-	mapping = new FieldMapper()
-	currentNode = $state(null)
-	selected = new SvelteMap()
-
-	constructor(items, mapper, value, options = {}) {
-		this.items = items
-		this.data = items
-		if (mapper) this.mapping = mapper
-
-		this.#events = { ...DEFAULT_EVENTS, ...options.events }
-		this.#options = { ...options, ...pick(['multiselect', 'autoCloseSiblings'], options) }
-		this.#keys = options.keys || null
-		this.moveToValue(value)
-	}
-
-	moveToValue(value) {
-		this.#init = true
-		this.value = value
-		this.moveTo(this.findPathToItem(value))
-		this.#expandPath(this.#path)
-
-		this.#init = false
-	}
-
-	#expandPath(path) {
-		if (!path.length) return
-		for (let i = 0; i < path.length; i++) {
-			const item = this.mapping.getItemByPath(this.data, path.slice(0, i + 1))
-			if (!this.mapping.isExpanded(item)) {
-				this.mapping.toggleExpansion(item)
-			}
-		}
-	}
-	#matchItems(a, b) {
-		if (this.#keys) {
-			return equals(pick(this.#keys, a), pick(this.#keys, b))
-		} else {
-			return equals(a, b)
-		}
-	}
-	/**
-	 * Finds an item in a tree structure and returns the path as array of indices
-	 * @param {*} value - The value to find
-	 * @param {number[]} parent - The current path being explored
-	 * @returns {number[]|null} - Array of indices representing path to item, or null if not found
-	 */
-	findPathToItem(value, parent = []) {
-		const children = this.mapping.getChildrenByPath(this.data, parent)
-		// Direct child check
-		const directIndex = children.findIndex((item) => this.#matchItems(item, value))
-		if (directIndex !== -1) {
-			return [...parent, directIndex]
-		}
-
-		// Recursive search in children
-		return children.reduce((path, _, index) => {
-			if (path.length > 0) return path
-			if (!this.mapping.hasChildren(children[index])) return []
-
-			return this.findPathToItem(value, [...parent, index])
-		}, [])
-	}
-
-	#getLastVisibleDescendant(node, nodePath) {
-		if (!this.mapping.hasChildren(node) || !this.mapping.isExpanded(node)) {
-			return { node, path: nodePath }
-		}
-
-		const children = this.mapping.getChildren(node)
-		if (children.length === 0) {
-			return { node, path: nodePath }
-		}
-
-		const lastChildIndex = children.length - 1
-		const lastChild = children[lastChildIndex]
-		return this.#getLastVisibleDescendant(lastChild, [...nodePath, lastChildIndex])
-	}
-
-	#getPreviousSiblingPath() {
-		const currentIndex = this.#path[this.#path.length - 1]
-		const prevSiblingPath = [...this.#path.slice(0, -1), currentIndex - 1]
-		const prevSibling = this.mapping.getItemByPath(this.data, prevSiblingPath)
-
-		if (this.mapping.isExpanded(prevSibling)) {
-			const { path } = this.#getLastVisibleDescendant(prevSibling, prevSiblingPath)
-			return path
-		} else {
-			return prevSiblingPath
-		}
-	}
-
-	#getNextSiblingPath(inputPath) {
-		const parentPath = inputPath.slice(0, -1)
-		const currentIndex = Number(inputPath[inputPath.length - 1])
-
-		const siblings = this.mapping.getChildrenByPath(this.data, parentPath)
-		if (currentIndex < siblings.length - 1) {
-			return [...parentPath, currentIndex + 1]
-		} else if (parentPath.length > 0) {
-			return this.#getNextSiblingPath(parentPath)
-		}
-		return null
-	}
-
-	emit(type, data) {
-		if (!this.#init && has(type, this.#events)) this.#events[type](data)
-	}
-
-	moveTo(path) {
-		if (!path) return
-		const currentPath = Array.isArray(path) ? path : [path]
-
-		if (equals(currentPath, this.#path)) return
-
-		this.#path = currentPath
-		if (currentPath.length === 0) {
-			this.currentNode = null
-		} else {
-			this.currentNode = this.mapping.getItemByPath(this.data, currentPath)
-			this.emit('move', { path: this.#path, node: this.currentNode })
-		}
-	}
-	movePrev() {
-		let currentPath = [0]
-		if (this.#path.length === 0) this.moveTo([0])
-
-		// Return false if at root level first item
-		if (this.#path.length === 1 && this.#path[0] === 0) {
-			return
-		}
-
-		// Get previous sibling index
-		const currentIndex = this.#path[this.#path.length - 1]
-		if (currentIndex > 0) {
-			// Has previous sibling
-			currentPath = this.#getPreviousSiblingPath()
-		} else {
-			// Move to parent
-			currentPath = this.#path.slice(0, -1)
-		}
-		this.moveTo(currentPath)
-	}
-
-	moveNext() {
-		if (this.#path.length === 0) {
-			this.moveTo([0])
-			return
-		}
-
-		const currentNode = this.currentNode
-
-		// If current node is expanded and has children, move to first child
-		if (this.mapping.isExpanded(currentNode) && this.mapping.hasChildren(currentNode)) {
-			this.moveTo([...this.#path, 0])
-			return
-		}
-
-		// Try to move to next sibling
-		const nextSiblingPath = this.#getNextSiblingPath(this.#path)
-		if (nextSiblingPath) {
-			this.moveTo(nextSiblingPath)
-			return
-		}
-	}
-
-	#collapseParent() {
-		this.moveTo(this.#path.slice(0, -1))
-		if (this.mapping.isExpanded(this.currentNode)) {
-			this.toggleExpansion()
-		}
-	}
-
-	collapse() {
-		// if not expanded child move to parent?
-		if (this.mapping.isExpanded(this.currentNode)) {
-			this.toggleExpansion()
-		} else if (this.#path.length > 1) {
-			this.#collapseParent()
-		}
-	}
-
-	expand() {
-		if (this.mapping.isExpanded(this.currentNode)) return
-		this.toggleExpansion()
-	}
-
-	collapseSiblings() {
-		if (!this.#options.autoCloseSiblings || !this.mapping.isExpanded(this.currentNode)) return
-
-		const parentPath = this.#path.slice(0, -1)
-		const siblings = this.mapping.getChildrenByPath(this.data, parentPath)
-		const currentIndex = this.#path[this.#path.length - 1]
-
-		siblings.forEach((sibling, index) => {
-			if (currentIndex !== index && this.mapping.isExpanded(sibling)) {
-				this.mapping.toggleExpansion(sibling)
-			}
-		})
-	}
-
-	toggleExpansion() {
-		if (!this.currentNode || !this.mapping.hasChildren(this.currentNode)) return
-
-		const eventType = this.mapping.isExpanded(this.currentNode) ? 'collapse' : 'expand'
-		this.mapping.toggleExpansion(this.currentNode)
-		this.collapseSiblings()
-		this.emit(eventType, { path: this.#path, node: this.currentNode })
-	}
-
-	select(path = null) {
-		this.moveTo(path)
-
-		if (this.currentNode) {
-			this.value = this.mapping.getItemByPath(this.data, this.#path)
-			this.selected.clear()
-			this.selected.set(getKeyFromPath(this.#path), this.currentNode)
-			this.emit('select', {
-				path: this.#path,
-				node: this.currentNode,
-				selected: this.selected
-			})
-		}
-	}
-
-	#toggleSelection() {
-		if (!this.currentNode) return
-
-		const isSelected = this.selected.has(getKeyFromPath(this.#path))
-
-		if (isSelected) {
-			this.selected.delete(getKeyFromPath(this.#path))
-		} else {
-			this.selected.set(getKeyFromPath(this.#path), this.currentNode)
-		}
-
-		this.emit('select', {
-			path: this.#path,
-			node: this.currentNode,
-			selected: this.selected
-		})
-	}
-
-	extendSelection(path = null) {
-		this.moveTo(path)
-		if (this.#options.multiselect) {
-			this.#toggleSelection()
-		} else {
-			this.select()
-		}
-	}
-}