StringObserver

/icons/hr.icon

変更があったときのみ入力候補を更新する

更新とか

2020-08-26 23:51:28 入力補完対象の文字列を探すのに使う正規表現を外から指定できるようにした

クラス名を変えた

既知の問題

code:script.js

export class StringObserver {

code:script.js

makeRaw = string => string.substr(2, string.length - 3)}

= {}) {

this.raw = undefined; // 監視対象の文字列

this.target = undefined; // 加工した文字列

this.editor = editor;

this.regex = regex;

this.makeRaw = makeRaw;

}

// 監視を更新する

reload(cursor) {

// focusがcursorになかったら何もしない

if(editor.getElementsByClassName('cursor-line').length == 0) return false;

const oldRaw = this.raw

this.raw = this._getLinkIncludingCursor(cursor);

this.target = this.raw ? this.makeRaw(this.raw) : undefined;

return oldRaw !== this.raw ;

}

// cursorを含む外部projectへのリンクを取得する関数

_getLinkIncludingCursor(cursor){

const cursorLine = editor

if(!cursorLine) return undefined;

// cursorのいる行から正規表現にマッチする文字列の情報を全て取り出す

座標取得は少し工夫が必要

code:script.js

// 要素の左端の相対座標を取得する

const getLeftPosition = targetElement => targetElement.getBoundingClientRect().left - cursorLine.getBoundingClientRect().left;

// cursorを含む文字列のみ抽出

const targetWord = matchedWords

// cursorを含む外部projectリンクは一つしかないはずなので、filterではなくfindを使う

.find(match => {

const start = cursorLine

const end = cursorLine

// '['の右端の座標

const startLeft = getLeftPosition(start);

// ']'の左端の座標

const endLeft = getLeftPosition(end);

// cursorの左端の座標

const cursorLeft = parseInt(cursor.style.left);

return startLeft <= cursorLeft && cursorLeft <= endLeft;

});

}

}