Fix borders for code structure highlighting. (microbit-foundation#210)

microbit-matt-hillsdon · web-flow · commit b787ec3946a2 · 2021-07-23T16:10:54.000+01:00
Avoid rounding where it's problematic. If we want it we need to draw another box or switch to SVG. Fix a failure to account for bodyPullBack in the body element's width. No visible change for the alpha/staging deployment as new options aren't available yet. See microbit-foundation#207
diff --git a/src/editor/codemirror/structure-highlighting/theme.ts b/src/editor/codemirror/structure-highlighting/theme.ts
@@ -18,6 +18,14 @@ export const baseTheme = EditorView.baseTheme({
   ".cm-cs--block": {
     borderRadius: "var(--chakra-radii-lg)",
   },
+  // Disable border radius when it looks bad.
+  ".cm-cs--lshapes .cm-cs--block": {
+    borderRadius: "unset",
+  },
+  ".cm-cs--borders-left-edge-only .cm-cs--block": {
+    borderRadius: "unset",
+  },
+
   ".cm-cs--background-block .cm-cs--block": {
     backgroundColor: "var(--chakra-colors-code-block)",
   },
@@ -52,7 +60,7 @@ export const baseTheme = EditorView.baseTheme({
   },
 
   // boxes full border
-  ".cm-cs--boxes.cm-cs--borders-border .cm-cs--block": {
+  ".cm-cs--boxes.cm-cs--borders-borders .cm-cs--block": {
     border: "2px solid var(--chakra-colors-code-border)",
   },
 });
diff --git a/src/editor/codemirror/structure-highlighting/visual-block.ts b/src/editor/codemirror/structure-highlighting/visual-block.ts
@@ -73,7 +73,7 @@ export class VisualBlock {
       body.style.left = this.body.left - bodyPullBack + "px";
       body.style.top = this.body.top + "px";
       body.style.height = this.body.height + "px";
-      body.style.width = `calc(100% - ${this.body.left}px)`;
+      body.style.width = `calc(100% - ${this.body.left - bodyPullBack}px)`;
     }
 
     if (this.parent && parent && this.body && body && indent) {

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export class VisualBlock {`
`73`	`73`	`body.style.left = this.body.left - bodyPullBack + "px";`
`74`	`74`	`body.style.top = this.body.top + "px";`
`75`	`75`	`body.style.height = this.body.height + "px";`
`76`		- body.style.width = `calc(100% - ${this.body.left}px)`;
	`76`	+ body.style.width = `calc(100% - ${this.body.left - bodyPullBack}px)`;
`77`	`77`	`}`
`78`	`78`
`79`	`79`	`if (this.parent && parent && this.body && body && indent) {`