8000 Vary highlighting based on cursor position. · pdg137/python-editor-next@90575cb · GitHub
[go: up one dir, main page]
Skip to content

Commit 90575cb

Browse files
microbit-matt-hillsdonmicrobit-matt-hillsdon
committed
Vary highlighting based on cursor position.
Feels buggy at the end of blocks due to disagreements about where the block ends. We need to review and discuss this. Behaviour is also weird at the end of the file as the last position isn't considered inside the last Body node (see equivalent issue in indentation logic). We can add special logic for that case.
1 parent 4ed9e85 commit 90575cb

File tree

4 files changed

+40
-8
lines changed

4 files changed

+40
-8
lines changed

‎src/deployment/default/colors.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ const colors = {
1515
gray,
1616
code: {
1717
block: "rgba(52, 162, 235, 0.06)",
18+
activeBlock: "rgba(255, 255, 255, 1)",
19+
1820
border: theme.colors.gray[400],
1921
comment: "gray",
2022
default: "black",

‎src/editor/codemirror/structure-highlighting/theme.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ export const baseTheme = EditorView.baseTheme({
2929
".cm-cs--background-block .cm-cs--block": {
3030
backgroundColor: "var(--chakra-colors-code-block)",
3131
},
32+
".cm-cs--background-block.cm-cs--cursor-background .cm-cs--block.cm-cs--active":
33+
{
34+
backgroundColor: "var(--chakra-colors-code-activeBlock)",
35+
},
3236
".cm-cs--lshapes .cm-cs--body": {
3337
// Keep corner flush with parent above in the l-shape.
3438
borderTopLeftRadius: "unset",

‎src/editor/codemirror/structure-highlighting/view.ts

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,26 @@ export const codeStructureView = (settings: CodeStructureSettings) =>
4646
document.createElement("div")
4747
);
4848
this.overlayLayer.className = "cm-cs--layer";
49+
// Add classes to activate CSS for the various settings.
4950
this.overlayLayer.classList.add(
5051
this.lShape ? "cm-cs--lshapes" : "cm-cs--boxes"
5152
);
5253
this.overlayLayer.classList.add(
5354
"cm-cs--background-" + settings.background
5455
);
56+
if (settings.hoverBackground) {
57+
this.overlayLayer.classList.add("cm-cs--hover-background");
58+
}
59+
if (settings.cursorBackground) {
60+
this.overlayLayer.classList.add("cm-cs--cursor-background");
61+
}
62+
if (settings.hoverBorder) {
63+
this.overlayLayer.classList.add("cm-cs--hover-border");
64+
}
65+
if (settings.cursorBorder) {
66+
this.overlayLayer.classList.add("cm-cs--cursor-border");
67+
}
68+
5569
this.overlayLayer.classList.add("cm-cs--borders-" + settings.borders);
5670
this.overlayLayer.setAttribute("aria-hidden", "true");
5771
view.requestMeasure(this.measureReq);
@@ -65,6 +79,7 @@ export const codeStructureView = (settings: CodeStructureSettings) =>
6579
readBlocks(): Measure {
6680
const view = this.view;
6781
const { state } = view;
82+
6883
const bodyPullBack = this.lShape && settings.background !== "none";
6984
const blocks: VisualBlock[] = [];
7085
// We could throw away blocks if we tracked returning to the top-level or started from
@@ -209,5 +224,7 @@ const positionsForNode = (
209224
const height = bottom - top;
210225
const leftIndent = depth * indentWidth;
211226
const left = leftEdge + leftIndent;
212-
return new Positions(top, left, height);
227+
const mainCursor = state.selection.main.head;
228+
const cursorActive = mainCursor >= start && mainCursor <= end;
229+
return new Positions(top, left, height, cursorActive);
213230
};

‎src/editor/codemirror/structure-highlighting/visual-block.ts

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,18 @@
77
* SPDX-License-Identifier: MIT
88
*/
99
export class Positions {
10-
constructor(public top: number, public left: number, public height: number) {}
10+
constructor(
11+
public top: number,
12+
public left: number,
13+
public height: number,
14+
public cursorActive: boolean
15+
) {}
1116
eq(other: Positions) {
1217
return (
1318
this.top === other.top &&
1419
this.left === other.left &&
15-
this.height === other.height
20+
this.height === other.height &&
21+
this.cursorActive === other.cursorActive
1622
);
1723
}
1824
}
@@ -41,11 +47,13 @@ export class VisualBlock {
4147
let parent: HTMLElement | undefined;
4248
let body: HTMLElement | undefined;
4349
let indent: HTMLElement | undefined;
50+
let active = this.parent?.cursorActive || this.body?.cursorActive;
51+
let activeClassname = active ? "cm-cs--active" : undefined;
4452
if (this.parent) {
45-
parent = blockWithClass("cm-cs--block cm-cs--parent");
53+
parent = blockWithClass("cm-cs--block cm-cs--parent", activeClassname);
4654
}
4755
if (this.body) {
48-
body = blockWithClass("cm-cs--block cm-cs--body");
56+
body = blockWithClass("cm-cs--block cm-cs--body", activeClassname);
4957
}
5058
if (this.parent && this.body) {
5159
// Add a indent element. We need this to draw a line under the
@@ -54,7 +62,8 @@ export class VisualBlock {
5462
indent = blockWithClass("cm-cs--indent");
5563
}
5664
this.adjust(parent, body, indent);
57-
return [parent, body, indent].filter(Boolean) as HTMLElement[];
65+
const elements = [parent, body, indent].filter(Boolean) as HTMLElement[];
66+
return elements;
5867
}
5968

6069
adjust(parent?: HTMLElement, body?: HTMLElement, indent?: HTMLElement) {
@@ -90,9 +99,9 @@ export class VisualBlock {
9099
}
91100
}
92101

93-
const blockWithClass = (className: string) => {
102+
const blockWithClass = (...classNames: (string | undefined)[]) => {
94103
const element = document.createElement("div");
95-
element.className = className;
104+
element.className = classNames.join(" ");
96105
return element;
97106
};
98107

0 commit comments

Comments
 (0)
0