mirror of https://github.com/msgbyte/tailchat
feat: source-ref允许在vscode中快速打开
moonrailgun
3 years ago
parent
2d4b7985c3
commit
1c7c84da7c
@ -0,0 +1 @@
|
||||
declare module 'source-ref-open-vscode' {}
|
||||
@ -0,0 +1,219 @@
|
||||
(function (win, doc) {
|
||||
const sourceMap = {};
|
||||
const sourceMapReverse = {};
|
||||
let cursor = 0;
|
||||
let timer = null;
|
||||
|
||||
function openVscode(node) {
|
||||
let path = null;
|
||||
if (node.dataset.sid) {
|
||||
path = sidToURI(node.dataset.sid);
|
||||
}
|
||||
if (node.dataset.source) {
|
||||
path = 'vscode://file/' + node.dataset.source;
|
||||
}
|
||||
if (!path) {
|
||||
return console.warn('Not found data-source');
|
||||
}
|
||||
win.location.href = path;
|
||||
}
|
||||
function sourceToId(node) {
|
||||
if (!node.dataset.source) return;
|
||||
const source = node.dataset.source;
|
||||
const [file, row, column] = source.split(':');
|
||||
if (!sourceMap[file]) {
|
||||
cursor++;
|
||||
sourceMap[file] = cursor;
|
||||
sourceMapReverse[cursor] = file;
|
||||
}
|
||||
const id = sourceMap[file];
|
||||
node.removeAttribute('data-source');
|
||||
node.setAttribute('data-sid', `${id}:${row}:${column}`);
|
||||
}
|
||||
function sidToURI(sid) {
|
||||
const [id, row, column] = sid.split(':');
|
||||
const path =
|
||||
'vscode://file/' + sourceMapReverse[id] + ':' + row + ':' + column;
|
||||
return path;
|
||||
}
|
||||
|
||||
class Selector {
|
||||
constructor(node) {
|
||||
this.sids = [];
|
||||
this.containerId = '__source-ref-panel';
|
||||
this.getAncestorSids = (node) => {
|
||||
const sids = [];
|
||||
let cur = node;
|
||||
while (cur !== doc.body) {
|
||||
if (cur.dataset.sid) {
|
||||
sids.push(cur.dataset.sid);
|
||||
}
|
||||
cur = cur.parentElement;
|
||||
}
|
||||
return sids;
|
||||
};
|
||||
this.focusBlock = null;
|
||||
this.setFocusBlock = (target) => {
|
||||
if (target === null) {
|
||||
// clear if target is null
|
||||
if (this.focusBlock) {
|
||||
doc.body.removeChild(this.focusBlock);
|
||||
this.focusBlock = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.focusBlock) {
|
||||
this.focusBlock = doc.createElement('div');
|
||||
this.focusBlock.className = '__source-ref-mask';
|
||||
this.focusBlock.style.position = 'absolute';
|
||||
this.focusBlock.style.backgroundColor = 'rgba(134, 185, 242, 0.5)';
|
||||
|
||||
doc.body.appendChild(this.focusBlock);
|
||||
}
|
||||
|
||||
const rect = target.getBoundingClientRect();
|
||||
|
||||
this.focusBlock.style.height = rect.height + 'px';
|
||||
this.focusBlock.style.width = rect.width + 'px';
|
||||
this.focusBlock.style.left = rect.x + 'px';
|
||||
this.focusBlock.style.top = rect.y + 'px';
|
||||
};
|
||||
this.getContainer = () => {
|
||||
const container = doc.getElementById(this.containerId);
|
||||
if (!container) {
|
||||
const div = doc.createElement('div');
|
||||
div.id = this.containerId;
|
||||
doc.body.appendChild(div);
|
||||
|
||||
// Add dom red border on hover
|
||||
div.addEventListener('mouseover', (e) => {
|
||||
const node = e.target;
|
||||
if (node.dataset.tid) {
|
||||
const target = doc.querySelector(
|
||||
`[data-sid="${node.dataset.tid}"]`
|
||||
);
|
||||
if (target) {
|
||||
target.classList.add('__source-ref-selected');
|
||||
this.setFocusBlock(target);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Remove dom red border when leave
|
||||
div.addEventListener('mouseout', (e) => {
|
||||
const node = e.target;
|
||||
if (node.dataset.tid) {
|
||||
const target = doc.querySelector(
|
||||
`[data-sid="${node.dataset.tid}"]`
|
||||
);
|
||||
if (target) {
|
||||
target.classList.remove('__source-ref-selected');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const close = () => {
|
||||
this.setFocusBlock(null);
|
||||
doc.body.removeChild(div);
|
||||
};
|
||||
|
||||
// click event
|
||||
div.addEventListener('click', (e) => {
|
||||
const node = e.target;
|
||||
const command = node.dataset.command;
|
||||
switch (command) {
|
||||
case 'close': {
|
||||
e.stopPropagation();
|
||||
close();
|
||||
return;
|
||||
}
|
||||
default:
|
||||
console.warn('Unknown command', command);
|
||||
}
|
||||
});
|
||||
|
||||
// keyboard event
|
||||
function escKeyHandler(e) {
|
||||
if (e.key === 'Escape') {
|
||||
e.stopPropagation();
|
||||
close();
|
||||
doc.removeEventListener('keydown', escKeyHandler);
|
||||
}
|
||||
}
|
||||
doc.addEventListener('keydown', escKeyHandler);
|
||||
|
||||
return div;
|
||||
}
|
||||
return container;
|
||||
};
|
||||
this.renderHTML = () => {
|
||||
const html = `
|
||||
<div style="
|
||||
position: fixed;
|
||||
background: white;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
opacity: 0.6;
|
||||
border-radius: 0 10px 0 0;
|
||||
">
|
||||
<div style="cursor:pointer;margin:10px;text-align:right;font-size:18px;" data-command="close">X</div>
|
||||
${this.sids
|
||||
.map((sid) => {
|
||||
const uri = sidToURI(sid);
|
||||
// 这里加了一个左向省略，暂时没用上，先放着
|
||||
return `<a href="${uri}" style="
|
||||
display: block;
|
||||
margin: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
direction: rtl;
|
||||
text-align: left;
|
||||
" data-tid="${sid}">source-ref: ${uri}</a>`;
|
||||
})
|
||||
.join('')}
|
||||
</div>
|
||||
`;
|
||||
const container = this.getContainer();
|
||||
container.innerHTML = html;
|
||||
};
|
||||
this.sids = this.getAncestorSids(node);
|
||||
}
|
||||
}
|
||||
function init() {
|
||||
win.vscode = (node = win.$0) => {
|
||||
openVscode(node);
|
||||
};
|
||||
doc.body.addEventListener(
|
||||
'click',
|
||||
(e) => {
|
||||
if (e.altKey) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const selector = new Selector(e.target);
|
||||
selector.renderHTML();
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
const mo = new MutationObserver(() => {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
// recal sid
|
||||
doc
|
||||
.querySelectorAll('[data-source]')
|
||||
.forEach((node) => sourceToId(node));
|
||||
}, 500);
|
||||
});
|
||||
mo.observe(doc.body, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
}
|
||||
init();
|
||||
})(window, document);
|
||||
@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "source-ref-open-vscode",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"types": "index.d.ts",
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"prepare": "tsc",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "moonrailgun",
|
||||
"license": "MIT"
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"module": "commonjs",
|
||||
|
||||
"target": "ES2018",
|
||||
"lib": ["ES2018"],
|
||||
|
||||
"declaration": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
Loading…
Reference in New Issue