[x] implements the Observable part of the Observer pattern
[x] interacts with the database abstraction
[x] ColorizerPaletteInterface is the visualization
[x] [REFACTOR] rename to ColorizerPaletteIO
[x] handles all interaction with the DOM
[x] visualize palette items by creating the required DOM elements
[x] button to remove a palette item
[x] drag'n'drop sorting of palette items (#40)
Todo
[x] create ColorizerPaletteItem class
[x] instances need a unique identifier throughout their life span
I don't really want to mess with this low-level stuff, better to leave this to IndexedDB, which might actually be possible
Leave it to IndexedDB:
Structuring the Database@MDN suggests, that when a keyPath and a keyGenerator are used on the store, keys are actually managed/provided/assigned by the IndexedDB. The W3C spec provides some more technical details. As far as I understand it, the auto-generated keys are automatically deconflicted.
when creating an actually new instance, let the unique identifier attribute be undefined. Hopefully it is provided when the instance is stored.
BUT: What to do in the meantime?!
Self-managed identifier:
Idea: Use the IndexedDB's store with a keyPathpaletteItemID
determine a PaletteItem's paletteItemID in the constructor(), e.g. as a hash of the X, Y and Z coordinates.
additional benefit: no duplicate colors!
[x] create ColorizerPalette class
[x] Observer pattern!
[x] src/script/colorizer/lib/types.ts: renameIColorizerObserver to IColorizerColorObserver
[x] src/script/colorizer/lib/types.ts: renameIColorizerSubject to IColorizerColorObservable
Implementation Idea
ColorizerPalette
is the engineColorizerPaletteItem
ColorizerPaletteItem
ColorizerPaletteItem
ColorizerPaletteInterface
is the visualizationColorizerPaletteIO
DOM
DOM
elementsTodo
ColorizerPaletteItem
classIndexedDB
, which might actually be possibleIndexedDB
:keyPath
and akeyGenerator
are used on the store, keys are actually managed/provided/assigned by theIndexedDB
. The W3C spec provides some more technical details. As far as I understand it, the auto-generated keys are automatically deconflicted.undefined
. Hopefully it is provided when the instance is stored.IndexedDB
'sstore
with akeyPath
paletteItemID
PaletteItem
'spaletteItemID
in theconstructor()
, e.g. as a hash of theX
,Y
andZ
coordinates.ColorizerPalette
classsrc/script/colorizer/lib/types.ts
: renameIColorizerObserver
toIColorizerColorObserver
src/script/colorizer/lib/types.ts
: renameIColorizerSubject
toIColorizerColorObservable
src/script/colorizer/lib/types.ts
: createIColorizerPaletteObserver
src/script/colorizer/lib/types.ts
: createIColorizerPaletteObservable
ColorizerPaletteItem
toColorizerPalette
instanceColorizerPaletteItem
fromColorizerPalette
instanceResources