Skip to content

Commit

Permalink
fix: selection highlight broken by non element nodes
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnsoncodehk
johnsoncodehk committed Mar 24, 2022
1 parent 0c5f5e8 commit ef68c1e
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 44 deletions.
57 changes: 31 additions & 26 deletions extensions/vscode-vue-language-features/bin/nuxi/plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ export default defineNuxtPlugin(app => {
}[],
isDirty: boolean,
} | undefined;
const nodes = new Map<HTMLElement, {
const nodes = new Map<Element, {
fileName: string,
range: [number, number],
}>();
const cursorInOverlays = new Map<HTMLElement, HTMLElement>();
const rangeCoverOverlays = new Map<HTMLElement, HTMLElement>();
const cursorInOverlays = new Map<Element, HTMLElement>();
const rangeCoverOverlays = new Map<Element, HTMLElement>();

window.addEventListener('message', event => {
if (event.data?.command === 'highlightSelections') {
Expand All @@ -55,37 +55,41 @@ export default defineNuxtPlugin(app => {
vnodeUnmounted,
};

function vnodeMounted(node: HTMLElement, fileName: string, range: [number, number]) {
nodes.set(node, {
fileName,
range,
});
function vnodeMounted(node: unknown, fileName: string, range: [number, number]) {
if (node instanceof Element) {
nodes.set(node, {
fileName,
range,
});
}
}
function vnodeUnmounted(node: HTMLElement) {
nodes.delete(node);
function vnodeUnmounted(node: unknown) {
if (node instanceof Element) {
nodes.delete(node);
}
}
function updateHighlights() {

if (selection.isDirty) {
for (const [_, overlay] of cursorInOverlays) {
overlay.style.opacity = 0.5;
overlay.style.opacity = '0.5';
}
for (const [_, overlay] of rangeCoverOverlays) {
overlay.style.opacity = 0.5;
overlay.style.opacity = '0.5';
}
return;
}
else {
for (const [_, overlay] of cursorInOverlays) {
overlay.style.opacity = 1;
overlay.style.opacity = '1';
}
for (const [_, overlay] of rangeCoverOverlays) {
overlay.style.opacity = 1;
overlay.style.opacity = '1';
}
}

const cursorIn = new Set<HTMLElement>();
const rangeConver = new Set<HTMLElement>();
const cursorIn = new Set<Element>();
const rangeConver = new Set<Element>();

if (selection) {
for (const range of selection.ranges) {
Expand All @@ -98,7 +102,6 @@ export default defineNuxtPlugin(app => {
range.start >= loc.range[0] && range.start <= loc.range[1]
|| range.end >= loc.range[0] && range.end <= loc.range[1]
) {
console.log(loc.fileName, range, loc.range);
cursorIn.add(el);
}
}
Expand Down Expand Up @@ -191,7 +194,7 @@ export default defineNuxtPlugin(app => {
const overlay = createOverlay();
const clickMask = createClickMask();

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

Expand All @@ -211,15 +214,17 @@ export default defineNuxtPlugin(app => {
};
parent.postMessage(lastCodeLoc, '*');
}
function highlight(node: HTMLElement, fileName: string, range: string) {
if (!enabled) return;
highlightNodes.push([node, fileName, range]);
updateOverlay();
function highlight(node: unknown, fileName: string, range: [number, number]) {
if (enabled && node instanceof Element) {
highlightNodes.push([node, fileName, range]);
updateOverlay();
}
}
function unHighlight(node: HTMLElement) {
if (!enabled) return;
highlightNodes = highlightNodes.filter(hNode => hNode[0] !== node);
updateOverlay();
function unHighlight(node: Element) {
if (enabled) {
highlightNodes = highlightNodes.filter(hNode => hNode[0] !== node);
updateOverlay();
}
}
function createOverlay() {
const overlay = document.createElement('div');
Expand Down
39 changes: 21 additions & 18 deletions extensions/vscode-vue-language-features/bin/vite.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,31 +52,35 @@ function __installSelectionHighlight() {
};
function vnodeMounted(node, fileName, range) {
nodes.set(node, {
fileName,
range,
});
if (node instanceof Element) {
nodes.set(node, {
fileName,
range,
});
}
}
function vnodeUnmounted(node) {
nodes.delete(node);
if (node instanceof Element) {
nodes.delete(node);
}
}
function updateHighlights() {
if (selection.isDirty) {
for (const [_, overlay] of cursorInOverlays) {
overlay.style.opacity = 0.5;
overlay.style.opacity = '0.5';
}
for (const [_, overlay] of rangeCoverOverlays) {
overlay.style.opacity = 0.5;
overlay.style.opacity = '0.5';
}
return;
}
else {
for (const [_, overlay] of cursorInOverlays) {
overlay.style.opacity = 1;
overlay.style.opacity = '1';
}
for (const [_, overlay] of rangeCoverOverlays) {
overlay.style.opacity = 1;
overlay.style.opacity = '1';
}
}
Expand All @@ -94,7 +98,6 @@ function __installSelectionHighlight() {
range.start >= loc.range[0] && range.start <= loc.range[1]
|| range.end >= loc.range[0] && range.end <= loc.range[1]
) {
console.log(loc.fileName, range, loc.range);
cursorIn.add(el);
}
}
Expand Down Expand Up @@ -206,16 +209,16 @@ function __installFinder() {
parent.postMessage(lastCodeLoc, '*');
}
function highlight(node, fileName, range) {
if (!enabled)
return;
highlightNodes.push([node, fileName, range]);
updateOverlay();
if (enabled && node instanceof Element) {
highlightNodes.push([node, fileName, range]);
updateOverlay();
}
}
function unHighlight(node) {
if (!enabled)
return;
highlightNodes = highlightNodes.filter(function (hNode) { return hNode[0] !== node; });
updateOverlay();
if (enabled) {
highlightNodes = highlightNodes.filter(function (hNode) { return hNode[0] !== node; });
updateOverlay();
}
}
function createOverlay() {
var overlay = document.createElement('div');
Expand Down

0 comments on commit ef68c1e

Please sign in to comment.