[x] ColorizerEngineInterface handles the actual dragging'n'dropping (with the help of an external library; see below)
[x] the original / v1 implementation handles all drag'n'drop stuff natively
[x] Idea: with a third-party Drag'n'Drop library it might be possible to delegate all the sorting to that library (just the frontend, without directly involving Colorizer) and then attach our palette management by one of the provided callback hooks.
[x] ColorizerEngine makes the sorting persistent in the database and publishes updates (Observer pattern)
[x] sorting is based on an attribute of ColorizerPaletteItem (sorting)
[x] ColorizerDatabase establishes and maintains an index on that field
[x] the original / v1 implementation has a sorting attribute as type number (integer) and always updates all PaletteItem instances on sorting, which is highly inefficient!
[x] Idea: Instead of a number-based sorting / ordering, use lexicographical ordering. This could possibly reduce the required number of update operations to 1!
[x] Requires all instances of ColorizerPaletteItem to be instantiated with a valid sorting value! Idea: Manage this in ColorizerPalette, as the only way to add new palette items should be through the ColorizerPalette instance
[x] have a private nextSorting: LexoRank on ColorizerPalette
[x] have this.nextSorting = new LexoRank("foobar"); in ColorizerPalette.constructor()Yeah, kind of...
[x] have this.nextSorting = this.nextSorting.increment() in ColorizerPalette.add()Yeah, kind of...
[x] have this.nextSorting = new LexoRank(this._palette[this._palette.length - 1]?.sorting).increment() in ColorizerPalette.synchronizePaletteFromDb()
[x] get the new index of the item in the overall palette, use newIndex = LexoRank.between(this._palette[newIndex - 1], this._palette[newIndex + 1]);
[x] requires sorting of this._palette, either with an overall sorting or a manual insertion at the desired position (the latter should be more efficient)
Implementation Idea
ColorizerEngineInterface
handles the actual dragging'n'dropping (with the help of an external library; see below)v1
implementation handles all drag'n'drop stuff nativelyColorizer
) and then attach our palette management by one of the provided callback hooks.ColorizerEngine
makes the sorting persistent in the database and publishes updates (Observer pattern)ColorizerPaletteItem
(sorting
)ColorizerDatabase
establishes and maintains anindex
on that fieldv1
implementation has asorting
attribute as typenumber
(integer) and always updates allPaletteItem
instances on sorting, which is highly inefficient!ColorizerPaletteItem
to be instantiated with a validsorting
value! Idea: Manage this inColorizerPalette
, as the only way to add new palette items should be through theColorizerPalette
instanceprivate nextSorting: LexoRank
onColorizerPalette
this.nextSorting = new LexoRank("foobar");
inColorizerPalette.constructor()
Yeah, kind of...this.nextSorting = this.nextSorting.increment()
inColorizerPalette.add()
Yeah, kind of...this.nextSorting = new LexoRank(this._palette[this._palette.length - 1]?.sorting).increment()
inColorizerPalette.synchronizePaletteFromDb()
newIndex = LexoRank.between(this._palette[newIndex - 1], this._palette[newIndex + 1]);
this._palette
, either with an overall sorting or a manual insertion at the desired position (the latter should be more efficient)Resources
LexoRank
, which is part of JIRAPossible Libraries
LexoRank
and might be way over the top for the estimated number of palette itemslexorank-ts
(see above)