Drag'n'drop sorting of palette items

[Mischback]

Implementation Idea

• ColorizerEngineInterface handles the actual dragging'n'dropping (with the help of an external library; see below)
  • the original / v1 implementation handles all drag'n'drop stuff natively
  • 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.
• ColorizerEngine makes the sorting persistent in the database and publishes updates (Observer pattern)
  • sorting is based on an attribute of ColorizerPaletteItem (sorting)
  • ColorizerDatabase establishes and maintains an index on that field
  • the original / v1 implementation has a sorting attribute as type number (integer) and always updates all PaletteItem instances on sorting, which is highly inefficient!
  • Idea: Instead of a number-based sorting / ordering, use lexicographical ordering. This could possibly reduce the required number of update operations to 1!
    • 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
      • have a private nextSorting: LexoRank on ColorizerPalette
      • have this.nextSorting = new LexoRank("foobar"); in ColorizerPalette.constructor() Yeah, kind of...
      • have this.nextSorting = this.nextSorting.increment() in ColorizerPalette.add() Yeah, kind of...
      • have this.nextSorting = new LexoRank(this._palette[this._palette.length - 1]?.sorting).increment() in ColorizerPalette.synchronizePaletteFromDb()
    • get the new index of the item in the overall palette, use newIndex = LexoRank.between(this._palette[newIndex - 1], this._palette[newIndex + 1]);
    • requires sorting of this._palette, either with an overall sorting or a manual insertion at the desired position (the latter should be more efficient)

Resources

• https://medium.com/esker-labs/drag-drop-table-columns-tutorial-57d7a436a025
• https://stackoverflow.com/questions/57215952/how-do-i-drag-drop-html-table-columns
• Lexicographical Sorting is based on Atlassian's LexoRank, which is part of JIRA
• https://softwareengineering.stackexchange.com/questions/195308/storing-a-re-orderable-list-in-a-database
• https://stackoverflow.com/questions/3813704/what-would-be-the-best-way-to-store-records-order-in-sql
• https://stackoverflow.com/questions/9536262/best-representation-of-an-ordered-list-in-a-database/49956113#49956113
• https://medium.com/whisperarts/lexorank-what-are-they-and-how-to-use-them-for-efficient-list-sorting-a48fc4e7849f
• https://stackoverflow.com/questions/40718900/jiras-lexorank-algorithm-for-new-stories

Possible Libraries

• Drag'n'Drop Sorting
  • https://github.com/SortableJS/Sortable
    • evaluated and tested, worked out of the box as intended
    • might add some overload to the bundle, but it just works
  • https://github.com/bevacqua/dragula
    • not evaluated, because SortableJS worked on first try
  • https://github.com/LeaVerou/dragula2
    • not evaluated, because SortableJS worked on first try
  • https://github.com/sindu12jun/table-dragger
    • not evaluated, because SortableJS worked on first try
• Lexicographical Sorting
  • https://github.com/Kayron013/LexoRank
    • rather minimal implementation great
    • does not limit string length internally, but most likely this isn't relevant for our use case
    • Settled for this one!
  • https://github.com/kvandake/lexorank-ts
    • this is a TypeScript re-implementation of Atlassian's LexoRank and might be way over the top for the estimated number of palette items
    • no unittests
  • https://github.com/wewatch/lexorank
    • fork of lexorank-ts (see above)
    • adds more means of configuration
    • might still be way over the top
    • has good test coverage