Add focus-overlay to kicanvas-embed

theacodes · Oct 18, 2023 · d0020da · d0020da
1 parent f466f55
commit d0020da
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/debug/embedded.html b/debug/embedded.html
@@ -15,10 +15,7 @@
                 nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                 sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
-            <kicanvas-embed
-                src="examples/helium.kicad_sch"
-                controls="basic"
-                controlslist="download nofullscreen">
+            <kicanvas-embed src="examples/helium.kicad_sch" controls="none">
             </kicanvas-embed>
             <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

diff --git a/src/kicanvas/elements/kicanvas-embed.ts b/src/kicanvas/elements/kicanvas-embed.ts
@@ -19,8 +19,6 @@ import { FetchFileSystem, VirtualFileSystem } from "../services/vfs";
 import type { KCBoardAppElement } from "./kc-board/app";
 import type { KCSchematicAppElement } from "./kc-schematic/app";
 
-import "../../kc-ui/floating-toolbar";
-
 /**
  *
  */
@@ -38,9 +36,12 @@ class KiCanvasEmbedElement extends KCUIElement {
                 aspect-ratio: 1.414;
                 background-color: aqua;
                 color: var(--fg);
+                font-family: "Nunito", ui-rounded, "Hiragino Maru Gothic ProN",
+                    Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold",
+                    Calibri, source-sans-pro, sans-serif;
             }
 
-            :host main {
+            main {
                 display: contents;
             }
 
@@ -154,7 +155,14 @@ class KiCanvasEmbedElement extends KCUIElement {
             </kc-board-app>` as KCBoardAppElement;
         }
 
-        return html`<main>${this.#schematic_app} ${this.#board_app}</main>`;
+        const focus_overlay =
+            this.controls == "none" || this.controlslist?.includes("nooverlay")
+                ? null
+                : html`<kc-ui-focus-overlay></kc-ui-focus-overlay>`;
+
+        return html`<main>
+            ${this.#schematic_app} ${this.#board_app} ${focus_overlay}
+        </main>`;
     }
 }