import { Computed, computed, isUninitialized, RESET_VALUE } from '@tldraw/state' import { CollectionDiff, RecordsDiff } from '@tldraw/store' import { isShape, TLParentId, TLRecord, TLShape, TLShapeId, TLStore } from '@tldraw/tlschema' import { sortByIndex } from '@tldraw/utils' type ParentShapeIdsToChildShapeIds = Record function fromScratch( shapeIdsQuery: Computed, CollectionDiff>, store: TLStore ) { const result: ParentShapeIdsToChildShapeIds = {} const shapeIds = shapeIdsQuery.get() const sortedShapes = Array.from(shapeIds, (id) => store.get(id)!).sort(sortByIndex) // Populate the result object with an array for each parent. sortedShapes.forEach((shape) => { result[shape.parentId] ??= [] result[shape.parentId].push(shape.id) }) return result } export const parentsToChildren = (store: TLStore) => { const shapeIdsQuery = store.query.ids<'shape'>('shape') const shapeHistory = store.query.filterHistory('shape') return computed( 'parentsToChildrenWithIndexes', (lastValue, lastComputedEpoch) => { if (isUninitialized(lastValue)) { return fromScratch(shapeIdsQuery, store) } const diff = shapeHistory.getDiffSince(lastComputedEpoch) if (diff === RESET_VALUE) { return fromScratch(shapeIdsQuery, store) } if (diff.length === 0) return lastValue let newValue: Record | null = null const ensureNewArray = (parentId: TLParentId) => { if (!newValue) { newValue = { ...lastValue } } if (!newValue[parentId]) { newValue[parentId] = [] } else if (newValue[parentId] === lastValue[parentId]) { newValue[parentId] = [...newValue[parentId]!] } } const toSort = new Set() let changes: RecordsDiff for (let i = 0, n = diff.length; i < n; i++) { changes = diff[i] // Iterate through the added shapes, add them to the new value and mark them for sorting for (const record of Object.values(changes.added)) { if (!isShape(record)) continue ensureNewArray(record.parentId) newValue![record.parentId].push(record.id) toSort.add(newValue![record.parentId]) } // Iterate through the updated shapes, add them to their parents in the new value and mark them for sorting for (const [from, to] of Object.values(changes.updated)) { if (!isShape(to)) continue if (!isShape(from)) continue if (from.parentId !== to.parentId) { // If the parents have changed, remove the new value from the old parent and add it to the new parent ensureNewArray(from.parentId) ensureNewArray(to.parentId) newValue![from.parentId].splice(newValue![from.parentId].indexOf(to.id), 1) newValue![to.parentId].push(to.id) toSort.add(newValue![to.parentId]) } else if (from.index !== to.index) { // If the parent is the same but the index has changed (e.g. if they've been reordered), update the parent's array at the new index ensureNewArray(to.parentId) const idx = newValue![to.parentId].indexOf(to.id) newValue![to.parentId][idx] = to.id toSort.add(newValue![to.parentId]) } } // Iterate through the removed shapes, remove them from their parents in new value for (const record of Object.values(changes.removed)) { if (!isShape(record)) continue ensureNewArray(record.parentId) newValue![record.parentId].splice(newValue![record.parentId].indexOf(record.id), 1) } } // Sort the arrays that have been marked for sorting (in-place to avoid intermediate arrays) for (const arr of toSort) { // Filter out any deleted shapes in-place let writeIdx = 0 for (let readIdx = 0; readIdx < arr.length; readIdx++) { if (store.get(arr[readIdx])) { arr[writeIdx++] = arr[readIdx] } } arr.length = writeIdx // Sort in-place by index arr.sort((a, b) => { const shapeA = store.get(a) as TLShape const shapeB = store.get(b) as TLShape return sortByIndex(shapeA, shapeB) }) } return newValue ?? lastValue } ) }