カーソル行の座標と文字列の座標を表示するテスト
cursorのleftと、マッチした文字列のoffsetLeftを表示する
script.jsimport {suggestWindow} from '/api/code/takker/suggestWindow/script.js';
const suggestion=new suggestWindow();
suggestion.editor.addEventListener('keyup',() => {
const line = suggestion.editor.getElementsByClassName('cursor-line')[0];
const text = line.textContent;
const matches = [...text.matchAll(/\[\/[^\s!"#%&'()\*\+,\-\.\/\{\|\}<>_~\]]+[^\]]*\]/g)];
これも/shokaiマッチするはず
これはUserScriptマッチしない
ちゃんと別々にマッチする
斜体はマッチしない
script.js if(matches.length == 0) {
suggestion.close();
return;
}
const cursor = document.getElementById('text-input');
let list = [ `textContent: ${text.replace(/\s/g,'t')}`,
`left(cusor): ${cursor.style.left}`,
...matches
.map(match => {
const cursorLine = suggestion.editor
.getElementsByClassName('cursor-line')[0];
const start = cursorLine
// '['の内側にカーソルが入ったときの座標
// i.e. '/'の左端の座標
.getElementsByClassName(`c-${match.index}`)[0];
const startLeft = start.offsetLeft;
const startLeft2 = start.getBoundingClientRect().left - cursorLine.getBoundingClientRect().left;
const startChar = start.textContent;
const end = cursorLine
.getElementsByClassName(`c-${match.index + match[0].length - 1}`)[0];
const endLeft = end.offsetLeft;
const endLeft2 = end.getBoundingClientRect().left - cursorLine.getBoundingClientRect().left;
const endChar = end.textContent;
//return `${match[0]}: c-${match.index+1} = ${startLeft}px c-${match.index + match[0].length - 1} = ${endLeft}px.`;
// firefox調査用
return `${match[0]}: ${startChar} = ${startLeft2}px | ${endChar} = ${endLeft2}px`;
})];ちょっとずれる？
↑の２つ目の括弧のはじめの部分の座標が合わない
まあ、括弧の外で補完判定されるわけではないので構わないか？
常に
start.left=4px のまま取得できる文字を確認してみる
cursorLine のElement.getBoundingClientRect()を使ってみる原因(推測)
一つ上の親要素を基準にしている
ちゃんと
cursor-line を基準にすれば正しい座標が表示されるscript.js suggestion.open();
suggestion.updateItems(list.map(item => {
const div = document.createElement('div');
div.textContent = item;
return div;
}));
suggestion.reDraw(cursor);
});#2020-11-21 18:40:54