From 9a630adf3ee33d96fb0b83f97a4c369093c8431b Mon Sep 17 00:00:00 2001 From: Mononaut Date: Fri, 18 Feb 2022 18:19:02 -0600 Subject: [PATCH] Refactor highlight caching & color management --- client/src/components/SearchTab.svelte | 56 ++++++++++++++------------ client/src/controllers/TxController.js | 2 +- client/src/controllers/TxStream.js | 2 +- server/data/.gitkeep | 0 4 files changed, 32 insertions(+), 28 deletions(-) create mode 100644 server/data/.gitkeep diff --git a/client/src/components/SearchTab.svelte b/client/src/components/SearchTab.svelte index 2596bc2..12b0a51 100644 --- a/client/src/components/SearchTab.svelte +++ b/client/src/components/SearchTab.svelte @@ -10,16 +10,10 @@ import AddressIcon from '../assets/icon/cil-wallet.svg' import TxIcon from '../assets/icon/cil-arrow-circle-right.svg' import { matchQuery } from '../utils/search.js' import { highlight, newHighlightQuery, highlightingFull } from '../stores.js' -import { hcl } from 'd3-color' +import { hlToHex, highlightA, highlightB, highlightC, highlightD, highlightE } from '../utils/color.js' -const highlightColors = [ - { h: 0.03, l: 0.35 }, - { h: 0.40, l: 0.35 }, - { h: 0.65, l: 0.35 }, - { h: 0.85, l: 0.35 }, - { h: 0.12, l: 0.35 }, -] -const highlightHexColors = highlightColors.map(c => hclToHex(c)) +const highlightColors = [highlightA, highlightB, highlightC, highlightD, highlightE] +const highlightHexColors = highlightColors.map(c => hlToHex(c)) const usedColors = [false, false, false, false, false] const queryIcons = { @@ -36,6 +30,7 @@ export let tab let query let matchedQuery let queryAddress +let queryColorIndex let queryColor let queryColorHex let watchlist = [] @@ -48,8 +43,9 @@ $: { if ($newHighlightQuery) { matchedQuery = matchQuery($newHighlightQuery) if (matchedQuery) { - matchedQuery.color = queryColor - matchedQuery.colorHex = queryColorHex + matchedQuery.colorIndex = queryColorIndex + matchedQuery.color = highlightColors[queryColorIndex] + matchedQuery.colorHex = highlightHexColors[queryColorIndex] add() query = null } @@ -66,8 +62,9 @@ $: { if (query) { matchedQuery = matchQuery(query.trim()) if (matchedQuery) { - matchedQuery.color = queryColor - matchedQuery.colorHex = queryColorHex + matchedQuery.colorIndex = queryColorIndex + matchedQuery.color = highlightColors[queryColorIndex] + matchedQuery.colorHex = highlightHexColors[queryColorIndex] } } else matchedQuery = null } @@ -81,9 +78,20 @@ function init () { try { watchlist = JSON.parse(val) watchlist.forEach(q => { - const i = highlightHexColors.findIndex(c => c === q.colorHex) - if (i >= 0) usedColors[i] = q.colorHex - else console.log('unknown color') + if (q.colorIndex) { + usedColors[q.colorIndex] = true + q.color = highlightColors[q.colorIndex] + q.colorHex = highlightHexColors[q.colorIndex] + } + }) + watchlist.forEach(q => { + if (!q.colorIndex){ + const nextIndex = usedColors.findIndex(used => !used) + usedColors[nextIndex] = true + q.colorIndex = nextIndex + q.color = highlightColors[nextIndex] + q.colorHex = highlightHexColors[nextIndex] + } }) } catch (e) { console.log('failed to parse cached highlight queries') @@ -94,18 +102,14 @@ function init () { function setNextColor () { const nextIndex = usedColors.findIndex(used => !used) if (nextIndex >= 0) { + queryColorIndex = nextIndex queryColor = highlightColors[nextIndex] queryColorHex = highlightHexColors[nextIndex] - usedColors[nextIndex] = queryColorHex + usedColors[nextIndex] = true } } -function clearUsedColor (hex) { - const clearIndex = usedColors.findIndex(used => used === hex) - usedColors[clearIndex] = false -} - -function hclToHex (color) { - return hcl(color.h * 360, 78.225, color.l * 150).hex() +function clearUsedColor (colorIndex) { + usedColors[colorIndex] = false } async function add () { @@ -127,7 +131,7 @@ async function remove (index) { const wasFull = $highlightingFull const removed = watchlist.splice(index,1) if (removed.length) { - clearUsedColor(removed[0].colorHex) + clearUsedColor(removed[0].colorIndex) watchlist = watchlist if (tab) { await tick() @@ -249,7 +253,7 @@ function searchSubmit (e) {
- {#each watchlist as watched, index (watched.colorHex)} + {#each watchlist as watched, index (watched.colorIndex)}
{ - console.log('color mode changed: ', mode) this.setColorMode(mode) }) } @@ -99,6 +98,7 @@ export default class TxController { } dropTx (txid) { + // don't actually need to do anything, just let the tx expire } addBlock (blockData, realtime=true) { diff --git a/client/src/controllers/TxStream.js b/client/src/controllers/TxStream.js index 9b038c5..2fab946 100644 --- a/client/src/controllers/TxStream.js +++ b/client/src/controllers/TxStream.js @@ -127,6 +127,7 @@ class TxStream { method: 'GET' }) let blockData = await response.json() + console.log('downloaded block', id) window.dispatchEvent(new CustomEvent('bitcoin_block', { detail: { block: blockData, realtime: !calledOnLoad} })) } else { console.log('already seen block ', lastBlockSeen) @@ -159,7 +160,6 @@ class TxStream { // notification of tx dropped from mempool case 'drop': - console.log('Dropping transaction ', msg.txid) window.dispatchEvent(new CustomEvent('bitcoin_drop_tx', { detail: msg.txid })) break; diff --git a/server/data/.gitkeep b/server/data/.gitkeep new file mode 100644 index 0000000..e69de29