feature: middle mouse button is usable for emoji selection

0x04 · Jan 17, 2025 · 40b0dcf · 40b0dcf
1 parent 9b256b0
commit 40b0dcf
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/src/components/palette-selection.mjs b/src/components/palette-selection.mjs
@@ -4,6 +4,7 @@ export class PaletteSelection {
   elements = {
     container: null,
     selectionLeft: null,
+    selectionMiddle: null,
     selectionRight: null
   }
   /**
@@ -17,27 +18,34 @@ export class PaletteSelection {
     const { store: paletteStore } = this.palette = palette
     const container = this.elements.container = document.createElement('div')
     const selectionLeft = this.elements.selectionLeft = document.createElement('div')
+    const selectionMiddle = this.elements.selectionMiddle = document.createElement('div')
     const selectionRight = this.elements.selectionRight = document.createElement('div')
+    const className = 'emoji-paint__palette-selection-item'
 
     container.classList.add('emoji-paint__palette-selection')
 
-    selectionLeft.classList.add('emoji-paint__palette-selection-left')
+    selectionLeft.classList.add(className, `${className}--left`)
     selectionLeft.textContent = DEFAULT_BLANK
     selectionLeft.title = 'Left mouse button'
 
-    selectionRight.classList.add('emoji-paint__palette-selection-right')
+    selectionMiddle.classList.add(className, `${className}--middle`)
+    selectionMiddle.textContent = DEFAULT_BLANK
+    selectionMiddle.title = 'Middle mouse button'
+
+    selectionRight.classList.add(className, `${className}--right`)
     selectionRight.textContent = DEFAULT_BLANK
     selectionRight.title = 'Right mouse button'
 
-    container.append(selectionLeft, selectionRight)
+    container.append(selectionLeft, selectionMiddle, selectionRight)
 
     paletteStore.subscribe(this.onPaletteStoreChange)
   }
 
   onPaletteStoreChange(state, store) {
-    const { selectionLeft, selectionRight } = this.elements
+    const { selectionLeft, selectionMiddle, selectionRight } = this.elements
 
     selectionLeft.textContent = store.getSelectedEntry(0)
+    selectionMiddle.textContent = store.getSelectedEntry(1)
     selectionRight.textContent = store.getSelectedEntry(2)
   }
 }
diff --git a/src/stores/palette-store.mjs b/src/stores/palette-store.mjs
@@ -8,15 +8,14 @@ export class PaletteStore extends PersistentStore {
     palettes: new Collection('name', DEFAULT_PALETTES),
     selectedPaletteIndex: 0,
     // NOTE: 0 = mouse left, 1 = mouse middle, 2 = mouse right
-    selectedEntries: { 0: null, 1: null, 2: null }
+    selectedEntries: { 0: DEFAULT_BLANK, 1: DEFAULT_BLANK, 2: DEFAULT_BLANK }
   }
 
   paletteChanges = new Set()
 
   constructor() {
     super(PaletteStore.initialState, `${STORE_STORAGE_KEY}.palette`)
     this.state.selectedEntries[0] = this.getSelectedPalette().entries.at(0)
-    this.state.selectedEntries[2] = DEFAULT_BLANK
   }
 
   write() {

diff --git a/style.css b/style.css
@@ -209,17 +209,15 @@ input, button, select, textarea {
     letter-spacing: 0.35rem;
   }
 
-  .emoji-paint__palette-selection-left,
-  .emoji-paint__palette-selection-right {
+  .emoji-paint__palette-selection-item {
     position: relative;
     border: 1px inset;
     border-radius: 0.25rem;
     padding: 0.175rem;
     background: var(--canvas-background);
   }
 
-  .emoji-paint__palette-selection-left::before,
-  .emoji-paint__palette-selection-right::before {
+  .emoji-paint__palette-selection-item::before {
     position: absolute;
     border-radius: 100%;
     width: 2.5ch;
@@ -231,11 +229,15 @@ input, button, select, textarea {
     aspect-ratio: 1;
   }
 
-  .emoji-paint__palette-selection-left::before {
+  .emoji-paint__palette-selection-item--left::before {
     content: 'L';
   }
 
-  .emoji-paint__palette-selection-right::before {
+  .emoji-paint__palette-selection-item--middle::before {
+    content: 'M';
+  }
+
+  .emoji-paint__palette-selection-item--right::before {
     content: 'R';
   }