scrapbox-position

指定した座標にあるscrpabox editor上の諸々の情報を取得する函数群

内容物

getBorder({x,y})

指定した座標に一番近い文字境界を取得する

cursorや選択範囲の端など、ほぼ文字境界に位置する座標に対して用いる

引数

返り値

code:ts

type Return = {

left?: CharObject; //境界の左側の文字

right?: CharObject; //境界の右側の文字

line: LineObject; // 文字がいる行

} |{

line: LineObject;

message: 'No char found';

} | {

message: 'No line found.' | 'No border matched.';

};

行頭や行末など、片側の文字がないときはundefinedが入る

境界が見つからなかったときはすべてundefinedになる

getLine({y})

指定した座標上にある行のDOMを取得する

引数

返り値

LineObject | undefined

行がなかったらundefinedになる

dependencies

code:script.js

import {char as c} from '/api/code/programming-notes/scrapbox-char-accessor/script.js';

import {line as l} from '/api/code/programming-notes/scrapbox-line-accessor/script.js';

const scrapboxDOM = {

};

code:script.js

export function getBorder({x, y}) {

const line = getLine({y});

if (!line) return {message: 'No line found.'};

if (chars.length === 0) return {line, message: 'No char found'};

// 文字境界のリストを作る

const borders = [...chars.map((char, i, charList) => {

}), {left: chars.pop(), right: undefined}];

//console.log({borders});

境界の判定方法

https://gyazo.com/0af8f64b7e28b7a51423280b22c5df2a

それぞれの文字の中間を判定領域の端とする

code:script.js

const matchedBorders = borders

.flatMap(({left: lChar, right: rChar}) => {

const lRect = lChar?.getBoundingClientRect?.() ?? rChar.getBoundingClientRect();

const rRect = rChar?.getBoundingClientRect?.() ?? lChar.getBoundingClientRect();

const left = (lChar ? lRect.left : lRect.left - lRect.width) + lRect.width / 2;

const right = (rChar ? rRect.left : rRect.right) + rRect.width / 2;

//console.log({left, right});

return [];

});

if (matchedBorders.length === 0) return {line, message: 'No border matched.'};

https://kakeru.app/f783878a7a06325356f6a919e5882e50 https://i.kakeru.app/f783878a7a06325356f6a919e5882e50.svg

code:script.js

const lineRect = line.DOM.getBoundingClientRect();

const border = matchedBorders

.map(({left, right}, i) => {

const lTop = left?.DOM?.getBoundingClientRect?.()?.top ?? lineRect.top;

const rTop = right?.DOM?.getBoundingClientRect?.()?.top ?? lineRect.top;

const top = i === 0 ? lineRect.top : Math.max(lTop, rTop);

return {left, right, top};

})

if (border) return {line, left: border.left, right: border.right};

return {line, message: 'No border matched.'};

}

code:script.js

export function getLine({y}) {

const rect = line.getBoundingClientRect();

return rect.top <= y && y < rect.bottom;

}));

}