Skip to content

Commit

Permalink
refactor: unify palette data structure for default/stored (WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
@0x04
0x04 committed Sep 4, 2024
1 parent 6a383fc commit 0436a6d
Showing 1 changed file with 89 additions and 65 deletions.
154 changes: 89 additions & 65 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,10 +223,16 @@
<script>

const DEFAULT_BLANK = '⬜'
const DEFAULT_PALETTES = {
'Squares': '⬛⬜🟥🟦🟧🟨🟩🟪🟫',
'Circles': '⚫⚪🔴🔵🟠🟡🟢🟣🟤',
}
const DEFAULT_PALETTES = [
{
name: 'Squares',
entries: ['⬛', '⬜', '🟥', '🟦', '🟧', '🟨', '🟩', '🟪', '🟫']
},
{
name: 'Circles',
entries: ['⚫', '⚪', '🔴', '🔵', '🟠', '🟡', '🟢', '🟣', '🟤'],
}
]
const DRAW_FUNCTIONS = {
// DDA Line Algorithm
lineSimple(pointA, pointB) {
Expand Down Expand Up @@ -542,8 +548,6 @@

class Palette {
static ITEM_ID = 'emoji-paint__palette-item'
currentPaletteName = null
currentPalette = null
elements = {
container: null,
items: null
Expand All @@ -558,12 +562,32 @@
document.addEventListener('paletteEditorChange', this.onEditorChange)

this.storage = storage
this.storage.mergeItem(Palette.STORAGE_KEY, {'Custom': '👤'})
this.storage.mergeItem(
Palette.STORAGE_KEY, [
{
name: 'Custom',
entries: ['👤']
}
]
)

this.palettes = structuredClone(DEFAULT_PALETTES)

const storedPalettes = this.storage.getItem(Palette.STORAGE_KEY) ?? []

storedPalettes.forEach((palette) => {
const index = this.palettes.findIndex((paletteDefault) => paletteDefault.name === palette.name)

if (index < 0) {
this.palettes.push(palette)
return
}

this.palettes[index] = palette;
})

// TODO: Improve or unify data
const mergedPalettes = this.mergedPalettes
this.currentPaletteName = Object.keys(mergedPalettes).at(0)
this.currentPalette = splitEmoji(mergedPalettes[this.currentPaletteName])
this.paletteCurrent = this.palettes.at(0)
this.selected = this.paletteCurrent.entries.at(0)

const container = this.elements.container = document.createElement('div')
container.classList.add('emoji-paint__palette')
Expand All @@ -584,29 +608,21 @@
items
)

this.dropdown.setup(this.mergedPalettes)
this.dropdown.setup(this.palettes)
}

static get STORAGE_KEY() {
return 'palettes'
}

get mergedPalettes() {
const storedPalettes = this.storage.getItem(Palette.STORAGE_KEY)
return {
...DEFAULT_PALETTES,
...storedPalettes
}
}

setup() {
const {items} = this.elements

while (items.childElementCount) {
items.removeChild(items.lastChild)
}

const itemsNew = this.currentPalette.map((entry, index) => {
const itemsNew = this.paletteCurrent.entries.map((entry, index) => {
const item = document.createElement('input')

item.classList.add(Palette.ITEM_ID)
Expand All @@ -620,7 +636,13 @@

items.append(...itemsNew)

const event = new CustomEvent('paletteChange', {bubbles: true, cancelable: false})
const event = new CustomEvent(
'paletteChange', {
bubbles: true,
cancelable: false,
detail: {palette: this.paletteCurrent}
}
)
this.elements.container.dispatchEvent(event)

this.select()
Expand All @@ -633,11 +655,11 @@
return
}

let item = items.children[index]
const item = items.children.item(index)

item.checked = true

this.selected = this.currentPalette[index]
this.selected = this.paletteCurrent.entries[index]

const detail = {index, mouseButton, selected: this.selected}
const eventChange = new CustomEvent('paletteSelectionChange', {
Expand All @@ -656,32 +678,31 @@
}

onDropdownChange(event) {
const {paletteName} = event.detail

this.currentPaletteName = paletteName
this.currentPalette = splitEmoji(this.mergedPalettes[paletteName])
this.paletteCurrent = this.palettes.find((palette) => palette.name === event.detail.paletteName)
this.setup()
}

onEditorChange(event) {
this.currentPalette = event.detail.palette
const paletteCurrent = this.paletteCurrent = event.detail.palette
const paletteDefault = DEFAULT_PALETTES.find((palette) => palette.name === paletteCurrent.name)

const paletteString = this.currentPalette.join('')
const isDefault = (paletteString === DEFAULT_PALETTES[this.currentPaletteName])
const isDefault = (
paletteCurrent.entries.length === paletteDefault.entries.length
&& paletteCurrent.entries.every((entry, index) => entry === paletteDefault.entries.at(index))
)

if (isDefault) {
const storedPalettes = this.storage.getItem(Palette.STORAGE_KEY)

delete storedPalettes[this.currentPaletteName]
// TODO: Implement delete or so in storage
const palettesStored = this.storage.getItem(Palette.STORAGE_KEY)

this.storage.setItem(
Palette.STORAGE_KEY,
storedPalettes
palettesStored.filter((palette) => palette.name !== paletteCurrent.name)
)
} else {
this.storage.mergeItem(
Palette.STORAGE_KEY,
{[this.currentPaletteName]: paletteString}
[paletteCurrent]
)
}

Expand All @@ -699,15 +720,15 @@
this.element.addEventListener('change', this.onChange)
}

setup(palettes = Object.keys(DEFAULT_PALETTES)) {
setup(palettes = DEFAULT_PALETTES) {
while (this.element.childElementCount) {
this.element.removeChild(this.element.firstChild)
}

const options = Object.keys(palettes).map((key) => {
const options = palettes.map((palette) => {
const option = document.createElement('option')

option.text = option.value = key
option.text = option.value = palette.name

return option
})
Expand Down Expand Up @@ -736,23 +757,19 @@
value = {left: DEFAULT_BLANK, right: DEFAULT_BLANK}
elements = {container: null, selectionLeft: null, selectionRight: null}

constructor(palette) {
constructor() {
this.onPaletteSelectionChange = this.onPaletteSelectionChange.bind(this)

this.palette = palette

const container = this.elements.container = document.createElement('div')
const selectionLeft = this.elements.selectionLeft = document.createElement('div')
const selectionRight = this.elements.selectionRight = document.createElement('div')

container.classList.add('emoji-paint__palette-selection')

const selectionLeft = this.elements.selectionLeft = document.createElement('div')

selectionLeft.classList.add('emoji-paint__palette-selection-left')
selectionLeft.textContent = DEFAULT_BLANK
selectionLeft.title = 'Left mouse button'

const selectionRight = this.elements.selectionRight = document.createElement('div')

selectionRight.classList.add('emoji-paint__palette-selection-right')
selectionRight.textContent = DEFAULT_BLANK
selectionRight.title = 'Right mouse button'
Expand Down Expand Up @@ -798,15 +815,17 @@
this.onInputEditKeyPress = this.onInputEditKeyPress.bind(this)
this.onPaletteChange = this.onPaletteChange.bind(this)

document.addEventListener('paletteDropdownChange', this.onPaletteChange)

this.palette = palette
this.palette.elements.container.addEventListener('paletteDropdownChange', this.onPaletteChange)

const container = this.elements.container = document.createElement('div')
const btnEdit = this.elements.btnEdit = document.createElement('button')
const btnReset = this.elements.btnReset = document.createElement('button')
const inputEdit = this.elements.inputEdit = document.createElement('textarea')

container.classList.add('emoji-paint__palette-editor')

const btnEdit = this.elements.btnEdit = document.createElement('button')

btnEdit.classList.add(
'emoji-paint__palette-editor-btn-edit',
'emoji-paint__icon-btn'
Expand All @@ -815,8 +834,6 @@
btnEdit.textContent = '✏️'
btnEdit.addEventListener('click', this.onBtnEditClick)

const btnReset = this.elements.btnReset = document.createElement('button')

btnReset.classList.add(
'emoji-paint__palette-editor-btn-reset',
'emoji-paint__icon-btn'
Expand All @@ -825,20 +842,20 @@
btnReset.textContent = '🧹'
btnReset.addEventListener('click', this.onBtnResetClick)

const inputEdit = this.elements.inputEdit = document.createElement('textarea')

inputEdit.classList.add('emoji-paint__palette-editor-input-edit')
inputEdit.addEventListener('blur', this.onInputEditBlur)
inputEdit.addEventListener('keypress', this.onInputEditKeyPress)

container.append(btnEdit, btnReset)

this.onPaletteChange()
}

enable() {
const {items} = this.palette.elements
const {inputEdit} = this.elements

inputEdit.value = this.palette.currentPalette.join('')
inputEdit.value = this.palette.paletteCurrent.entries.join('')
inputEdit.style.setProperty('height', `${items.offsetHeight}px`)

items.replaceWith(inputEdit)
Expand All @@ -852,7 +869,7 @@

inputEdit.replaceWith(items)

const changed = (this.elements.inputEdit.value !== this.palette.currentPalette.join(''))
const changed = (this.elements.inputEdit.value !== this.palette.paletteCurrent.entries.join(''))

if (dispatchChange && changed) {
this.dispatchChange()
Expand All @@ -864,7 +881,10 @@
}

dispatchChange(value = this.elements.inputEdit.value) {
const palette = [...new Set(splitEmoji(value))]
const palette = {
name: this.palette.paletteCurrent.name,
entries: [...new Set(splitEmoji(value))]
}
const detail = {palette}
const event = new CustomEvent(
'paletteEditorChange',
Expand All @@ -880,8 +900,10 @@
}

onBtnResetClick() {
const paletteName = this.palette.currentPaletteName
this.dispatchChange(DEFAULT_PALETTES[paletteName])
const paletteName = this.palette.paletteCurrent.name
const paletteDefault = DEFAULT_PALETTES.find((palette) => palette.name === paletteName)

this.dispatchChange(paletteDefault.entries.join(''))
this.elements.btnReset.disabled = true
}

Expand All @@ -906,11 +928,15 @@
this.disable()
}

onPaletteChange(event) {
const {currentPaletteName, currentPalette} = this.palette
const defaultPalette = DEFAULT_PALETTES[currentPaletteName] ?? []
this.elements.btnReset.disabled = (!(currentPaletteName in DEFAULT_PALETTES)
|| currentPalette.join('') === defaultPalette)
onPaletteChange() {
const paletteCurrent = this.palette.paletteCurrent
const paletteDefault = DEFAULT_PALETTES.find((palette) => palette.name === paletteCurrent.name)

this.elements.btnReset.disabled = (!paletteDefault)
|| (
paletteCurrent.entries.length === paletteDefault.entries.length
&& paletteCurrent.entries.every((entry, index) => entry === paletteDefault.entries.at(index))
)
}
}

Expand Down Expand Up @@ -1072,8 +1098,6 @@

constructor(element = document.createElement('div')) {
this.storage = new DataStorage()
this.storage.mergeItem(Palette.STORAGE_KEY, {'Custom': '👤'})

this.canvas = new Canvas()
this.palette = new Palette(this.storage)
this.tool = new DrawTool(this.canvas, this.palette)
Expand Down

0 comments on commit 0436a6d

Please sign in to comment.