scrapbox-cursor-position-2
scrapboxのcursorの右側の文字のDOMと行のDOMとを取得する関数
独自のobjectではなくDOMを返すようにした
余計な処理を省いた
こちらのほうが自前の計算処理を使わない分速いはず
.cursor が見えなくなったときも判定できるようにした
style と #editor の座標から計算する
関数の名前を変えた
s/cusor/position
2021-06-24
2021-06-19
08:57:55 matches を classList.contains に置き換えた
dependencies
script.jsimport {scrapboxDOM} from '../scrapbox-dom-accessor/script.js';
export function position({pos = 'right'} = {}) {
const {top, left} = scrapboxDOM.editor.getBoundingClientRect(); // 基準座標
const style = scrapboxDOM.cursor.style;
const cursor = {
top: parseInt(style.top || 0),
left: parseInt(style.left || 0),
height: parseInt(style.height || 0),
};
const position = {
x: cursor.left + left + 1,
y: (cursor.top + top) + cursor.height / 2,
};
const targets = document.elementsFromPoint(position.x, position.y);
const char = targets.find(target => target.classList.contains('char-index'));
const line = targets.find(target => target.classList.contains('line'));
return {char, line};
};
test code
jsimport('/api/code/programming-notes/scrapbox-cursor-position-2/test1.js');
test1.jsimport {position} from './script.js';
import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js';
const observer = new MutationObserver(() => {
const {char, line} = position();
console.log({char, line});
});
observer.observe(scrapboxDOM.cursor, {attributes: true});