import {EmojiCompletion} from '/api/code/takker/emoji-completion/script.js'; const emojiCompletion = new EmojiCompletion({ projects: ['icons','emoji','icons2'],

// includeYourProject: true, // maxSuggestionNum: 30, // maxHeight: `calc(50vh - 100px)` // enableOnMobile: false, }); emojiCompletion.start();

import {ICompletion} from '/api/code/takker/ICompletion/script.js';

export class EmojiCompletion extends ICompletion { constructor({projects, includeYourProject = true, maxSuggestionNum = 30, maxHeight = 'calc(50vh - 100px)', enableOnMobile = false} = {}) { super({ id: 'emoji-completion', projects: projects, includeYourProject, maxSuggestionNum, maxHeight, trigger: /^:/, makeRow: string => string.substr(2, string.length - 3), searchWorkerCode: '/api/code/takker/emoji-completion/searchWorker.js', enableOnMobile }); }

// emojiの入力候補を非同期に読み込む // 読み込み途中でも補完は有効 async _importDataList() { this.searchWorker.postMessage({loading: true, projects: this.projects}); }

//補完windowに表示する項目を作成する _createGuiList(matchedList) { const cursor = document.getElementById('text-input'); return matchedList .map(emoji => { const div = document.createElement('div'); div.textContent = `/${emoji.project}/${emoji.name}`; const img = document.createElement('img'); img.src = `/api/pages/${emoji.project}/${encodeURIComponent(emoji.name)}/icon`; img.classList.add('icon'); img.style.height = '17px'; img.style.float = 'left'; const insertText = `[${scrapbox.Project.name !== emoji.project ? '/'+ emoji.project + '/' : ''}${emoji.name}.icon]` return new Object({ elements: [img, div], onComfirm: () => this._comfirm(cursor, insertText), }); }); }

_postMessage(word) { this.searchWorker.postMessage({word: word, maxSuggestionNum: this.maxSuggestionNum}); } }

const range = n => [...Array(n).keys()]; // [0,1,...,n-1]を作る函数 // list: 補完候補が入ったリスト const workerNum = navigator.hardwareConcurrency; const workers = range(workerNum).map(_ => new Worker( '/api/code/takker/emoji-completion/compute.js'));

// 曖昧検索をする function searchWord(message) { const word = message.data.word.replace(/^:(.*)/,'$1'); // :をとる const jobs = workers .map(worker => { // 処理を投げる const job = new Promise((resolve, reject) => worker.addEventListener('message', message => { resolve(message.data); })); worker.postMessage({word: word, limit: message.data.maxSuggestionNum}); return job; }); // 処理が帰って来たら結果をPOSTする Promise.all(jobs).then(results => { // まず、listの順番を復元する const temp = results .sort((a, b) => a.index - b.index) .map(result => result.emojis); // 曖昧度順に並べ直す const max = temp.map(emojis => emojis.length).reduce((r,c) => Math.max(r,c)); const matchedLinks = range(max) .flatMap(i => temp.flatMap(emojis => emojis[i] ?? [])) .slice(0, message.data.maxSuggestionNum); self.postMessage(matchedLinks); }); }

async function addEmojis(projects) { let emojis = await Promise.all(projects.flatMap(project => fetchEmojis(project))) .then(lists => lists.flat());

emojis.sort((a, b) => a.name.length === b.name.length ? a.name.localeCompare(b.name) : a.name.length - b.name.length); // workerの数だけ分割して渡す const skip = Math.floor(emojis.length/workerNum) + 1; for (const i of range(workerNum)) { const dividedList = emojis.slice(i * skip,(i + 1) * skip); workers[i].postMessage({loading: true, list: dividedList, index: i, // listの順番を保存する }); } // 処理が終わったことを伝える self.postMessage(undefined); } async function fetchEmojis(project) { // projectの全ページ数を取得する const pageNum = await fetch(`/api/pages/${project}/?limit=1`) .then(response => response.json()) .then(json => parseInt(json.count)); // pageNum = 2347 => maxIndex = 3 const maxIndex = Math.floor(pageNum / 1000) + 1; const emojis = []; const promises = range(maxIndex).map(async (index) => { const json = await fetch(`/api/pages/${project}/?limit=1000&skip=${index*1000}`) .then(res => res.json()); const pages = json.pages.filter(page => page.image !== null); pages.forEach(page => emojis.push({ name: page.title, project: project, })); }); await Promise.all(promises); _log(`Loaded ${emojis.length} emojis from /${project}`); return emojis; } // debug用 function _log(msg, ...objects) { console.log(`[search-worker@emoji-completion] ${msg}`, objects); }

self.addEventListener('message', async message => { if (message.data.loading) { addEmojis(message.data.projects); return; } searchWord(message); });

self.importScripts('/api/code/takker/fizzSearch/script.js'); // 検索候補 const list = []; let index = 0; self.addEventListener('message', message => { if(message.data.loading) { index = message.data.index; _log(index, `Adding new ${message.data.list.length} suggestion items...`); list.push(...message.data.list); _log(index, 'Added.'); return; } console.log(`[Worker${index}] start searching for ${message.data.word}...`); const temp = fizzSearch({word: message.data.word, list: list, func: emoji => emoji.name, limit: message.data.limit}); console.log(`[Worker${index}] finished!`); // index: this.emojisの並び順 self.postMessage({emojis: temp, index: index}); }); // debug用 function _log(number, msg, ...objects) { console.log(`[search-worker ${number}@emoji-completion] ${msg}`, objects); }