|
| 1 | +// Composables |
| 2 | +import { useRegistry } from '#v0/composables/useRegistry' |
| 3 | + |
| 4 | +// Types |
| 5 | +import type { RegistryContext, RegistryOptions, RegistryTicket } from '#v0/composables/useRegistry' |
| 6 | + |
| 7 | +export interface TimelineContext<Z extends TimelineTicket> extends RegistryContext<Z> { |
| 8 | + /* Unapplies the last registered ticket */ |
| 9 | + undo: () => void |
| 10 | + /* Reapplies the last undone ticket */ |
| 11 | + redo: () => void |
| 12 | +} |
| 13 | + |
| 14 | +export interface TimelineTicket extends RegistryTicket {} |
| 15 | + |
| 16 | +export interface TimelineOptions extends RegistryOptions { |
| 17 | + size?: number |
| 18 | +} |
| 19 | + |
| 20 | +/** |
| 21 | + * Creates a registry with timeline capabilities (undo/redo) |
| 22 | + * |
| 23 | + * @param _options Optional configuration for timeline |
| 24 | + * @template Z The type of ticket to be stored in the timeline |
| 25 | + * @template E The type of the timeline context |
| 26 | + * @returns The timeline context object |
| 27 | + * |
| 28 | + * @see https://0.vuetifyjs.com/composables/registration/use-timeline |
| 29 | + */ |
| 30 | +export function useTimeline< |
| 31 | + Z extends TimelineTicket = TimelineTicket, |
| 32 | + E extends TimelineContext<Z> = TimelineContext<Z>, |
| 33 | +> (_options: TimelineOptions = {}) { |
| 34 | + const { size = 10, ...options } = _options |
| 35 | + const registry = useRegistry<Z, E>(options) |
| 36 | + |
| 37 | + const undoTimeline: Z[] = [] |
| 38 | + const redoTimeline: Z[] = [] |
| 39 | + |
| 40 | + function register (item: Partial<Z>) { |
| 41 | + if (registry.size < size) return registry.register({ ...item }) |
| 42 | + |
| 43 | + const id = registry.lookup(0)! |
| 44 | + const removing = registry.get(id)! |
| 45 | + |
| 46 | + if (redoTimeline.length === size) redoTimeline.shift() |
| 47 | + redoTimeline.push(removing) |
| 48 | + |
| 49 | + registry.unregister(id) |
| 50 | + |
| 51 | + const ticket = registry.register({ ...item }) |
| 52 | + registry.reindex() |
| 53 | + |
| 54 | + return ticket |
| 55 | + } |
| 56 | + |
| 57 | + function redo () { |
| 58 | + if (undoTimeline.length === 0) return |
| 59 | + |
| 60 | + registry.register(undoTimeline.pop()) |
| 61 | + registry.reindex() |
| 62 | + } |
| 63 | + |
| 64 | + function undo () { |
| 65 | + const id = registry.lookup(registry.size - 1) |
| 66 | + if (!id) return |
| 67 | + |
| 68 | + undoTimeline.push(registry.get(id)!) |
| 69 | + |
| 70 | + registry.unregister(id!) |
| 71 | + |
| 72 | + restore() |
| 73 | + } |
| 74 | + |
| 75 | + function restore () { |
| 76 | + const value = redoTimeline.pop() |
| 77 | + const restored = value ? [value, ...registry.values()] : [...registry.values()] |
| 78 | + |
| 79 | + registry.clear() |
| 80 | + registry.onboard(restored) |
| 81 | + registry.reindex() |
| 82 | + } |
| 83 | + |
| 84 | + return { |
| 85 | + ...registry, |
| 86 | + register, |
| 87 | + undo, |
| 88 | + redo, |
| 89 | + } as E |
| 90 | +} |
0 commit comments