Skip to content

Commit

Permalink
fix: block click event when goto code
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnsoncodehk
johnsoncodehk committed Mar 22, 2022
1 parent c8e9e4a commit 77aab90
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 31 deletions.
49 changes: 37 additions & 12 deletions extensions/vscode-vue-language-features/bin/vite.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,39 +28,43 @@ function __installFinder(app) {
var _a;
if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.command) === 'selectElement') {
enabled = true;
clickMask.style.pointerEvents = 'none';
document.body.appendChild(clickMask);
updateOverlay();
}
});
window.addEventListener('click', function (ev) {
window.addEventListener('mousedown', function (ev) {
if (enabled) {
ev.preventDefault(); // TODO: not working
enabled = false;
clickMask.style.pointerEvents = '';
highlightNodes = [];
updateOverlay();
if (lastGotoData) {
parent.postMessage(lastGotoData, '*');
lastGotoData = undefined;
if (lastCodeLoc) {
parent.postMessage(lastCodeLoc, '*');
lastCodeLoc = undefined;
}
}
});
var overlay = createOverlay();
var clickMask = createClickMask();
var highlightNodes = [];
var enabled = false;
var lastGotoData;
var lastCodeLoc;
app.config.globalProperties.$volar = {
highlight: highlight,
unHighlight: unHighlight,
};
function goToTemplate(fileName, range) {
if (!enabled)
return;
lastGotoData = {
lastCodeLoc = {
command: 'goToTemplate',
data: {
fileName: fileName,
range: JSON.parse(range),
},
};
parent.postMessage(lastGotoData, '*');
parent.postMessage(lastCodeLoc, '*');
}
function highlight(node, fileName, range) {
if (!enabled)
Expand All @@ -69,12 +73,14 @@ function __installFinder(app) {
updateOverlay();
}
function unHighlight(node) {
if (!enabled)
return;
highlightNodes = highlightNodes.filter(function (hNode) { return hNode[0] !== node; });
updateOverlay();
}
function createOverlay() {
var overlay = document.createElement('div');
overlay.style.backgroundColor = 'rgba(145, 184, 226, 0.35)';
overlay.style.backgroundColor = 'rgba(65, 184, 131, 0.35)';
overlay.style.position = 'fixed';
overlay.style.zIndex = '99999999999999';
overlay.style.pointerEvents = 'none';
Expand All @@ -84,6 +90,24 @@ function __installFinder(app) {
overlay.style.borderRadius = '3px';
return overlay;
}
function createClickMask() {
var overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.zIndex = '99999999999999';
overlay.style.pointerEvents = 'none';
overlay.style.display = 'flex';
overlay.style.left = '0';
overlay.style.right = '0';
overlay.style.top = '0';
overlay.style.bottom = '0';
overlay.addEventListener('mouseup', function () {
var _a;
if (overlay.parentNode) {
(_a = overlay.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(overlay);
}
});
return overlay;
}
function updateOverlay() {
if (highlightNodes.length) {
document.body.appendChild(overlay);
Expand Down Expand Up @@ -174,22 +198,23 @@ function __proxyExport(rawOptions = {}) {
if (!rawOptions)
rawOptions = {};
if (!rawOptions.template)
rawOptions.template = {};
if (!rawOptions.template.compilerOptions)
rawOptions.template.compilerOptions = {};
if (!rawOptions.template.compilerOptions.nodeTransforms)
rawOptions.template.compilerOptions.nodeTransforms = [];
rawOptions.template.compilerOptions.nodeTransforms.push((node, ctx) => {
if (node.type === 1) {
const { offset: start } = node.loc.start;
const { offset: end } = node.loc.end;
node.props.push({
type: 6,
name: 'data-loc',
value: {
content: '[' + start + ',' + end + ']',
content: '[' + node.loc.start.offset + ',' + node.loc.end.offset + ']',
},
loc: node.loc,
}, {
Expand Down
53 changes: 38 additions & 15 deletions packages/experimental/src/client.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ export const vuePlugin: Plugin = app => {
installFinder(app);
installPreview(app);
let href = '';
setInterval(function () {
if (href !== location.href) {
href = location.href;
parent.postMessage({ command: 'urlChanged', data: href }, '*');
}
}, 200);
setInterval(function () {
if (href !== location.href) {
href = location.href;
parent.postMessage({ command: 'urlChanged', data: href }, '*');
}
}, 200);
};

function installFinder(app: App) {
Expand All @@ -19,25 +19,30 @@ function installFinder(app: App) {
window.addEventListener('message', event => {
if (event.data?.command === 'selectElement') {
enabled = true;
clickMask.style.pointerEvents = 'none';
document.body.appendChild(clickMask);
updateOverlay();
}
});
window.addEventListener('click', (ev) => {
window.addEventListener('mousedown', (ev) => {
if (enabled) {
ev.preventDefault(); // TODO: not working
enabled = false;
clickMask.style.pointerEvents = '';
highlightNodes = [];
updateOverlay();
if (lastGotoData) {
parent.postMessage(lastGotoData, '*');
lastGotoData = undefined;
if (lastCodeLoc) {
parent.postMessage(lastCodeLoc, '*');
lastCodeLoc = undefined;
}
}
});

const overlay = createOverlay();
const clickMask = createClickMask();

let highlightNodes: [HTMLElement, string, string][] = [];
let enabled = false;
let lastGotoData: any | undefined;
let lastCodeLoc: any | undefined;

app.config.globalProperties.$volar = {
highlight,
Expand All @@ -46,27 +51,28 @@ function installFinder(app: App) {

function goToTemplate(fileName: string, range: string) {
if (!enabled) return;
lastGotoData = {
lastCodeLoc = {
command: 'goToTemplate',
data: {
fileName,
range: JSON.parse(range),
},
};
parent.postMessage(lastGotoData, '*');
parent.postMessage(lastCodeLoc, '*');
}
function highlight(node: HTMLElement, fileName: string, range: string) {
if (!enabled) return;
highlightNodes.push([node, fileName, range]);
updateOverlay();
}
function unHighlight(node: HTMLElement) {
if (!enabled) return;
highlightNodes = highlightNodes.filter(hNode => hNode[0] !== node);
updateOverlay();
}
function createOverlay() {
const overlay = document.createElement('div');
overlay.style.backgroundColor = 'rgba(145, 184, 226, 0.35)';
overlay.style.backgroundColor = 'rgba(65, 184, 131, 0.35)';
overlay.style.position = 'fixed';
overlay.style.zIndex = '99999999999999';
overlay.style.pointerEvents = 'none';
Expand All @@ -76,6 +82,23 @@ function installFinder(app: App) {
overlay.style.borderRadius = '3px';
return overlay;
}
function createClickMask() {
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.zIndex = '99999999999999';
overlay.style.pointerEvents = 'none';
overlay.style.display = 'flex';
overlay.style.left = '0';
overlay.style.right = '0';
overlay.style.top = '0';
overlay.style.bottom = '0';
overlay.addEventListener('mouseup', () => {
if (overlay.parentNode) {
overlay.parentNode?.removeChild(overlay)
}
});
return overlay;
}
function updateOverlay() {
if (highlightNodes.length) {
document.body.appendChild(overlay);
Expand Down
8 changes: 4 additions & 4 deletions packages/vue-typescript/src/plugins/pug.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { VueLanguagePlugin } from '../typescriptRuntime';

export default function (): VueLanguagePlugin {

return {
return {

compileTemplate(template, lang) {
compileTemplate(template, lang) {

if (lang === 'pug') {

Expand All @@ -32,6 +32,6 @@ export default function (): VueLanguagePlugin {
};
}
}
}
}
}
}
}

0 comments on commit 77aab90

Please sign in to comment.