fix(lit-node-editor): resolve rendering, global style leakage, and resizing issues

lit-components/lit-node-editor/canvas/index.ts

@@ -50,9 +50,15 @@ export class Canvas implements ReactiveController {
   context: MatrixContext = defaultMatrix;
   ctx: CanvasRenderingContext2D;
 
+  private _keydownListener = (e: KeyboardEvent) => this.onKeyDown(e);
+  private _preventDefault = (e: Event) => e.preventDefault();
+
   hostConnected() {}
 
-  hostDisconnected() {}
+  hostDisconnected() {
+    window.removeEventListener("keydown", this._keydownListener);
+    window.removeEventListener("DOMMouseScroll", this._preventDefault);
+  }
 
   nodeTree(): Tree {
     return {
@@ -139,16 +145,11 @@ export class Canvas implements ReactiveController {
     );
 
     // Keyboard Events
-    window.addEventListener("keydown", (e) => this.onKeyDown(e));
-    // window.addEventListener("mousewheel", (e) => {
-    //   e.preventDefault();
-    // });
-    window.addEventListener("DOMMouseScroll", (e) => {
-      e.preventDefault();
+    window.addEventListener("keydown", this._keydownListener);
+    window.addEventListener("DOMMouseScroll", this._preventDefault, {
+      passive: false,
     });
 
-    // TODO: https://github.com/shuding/apple-pencil-safari-api-test
-
     this.render();
     this.host.requestUpdate();
   }
@@ -440,8 +441,8 @@ export class Canvas implements ReactiveController {
   resize(size?: Size) {
     const width = size?.width ?? window.innerWidth;
     const height = size?.height ?? window.innerHeight;
-    this.canvas.setAttribute("width", `${width}px`);
-    this.canvas.setAttribute("height", `${height}px`);
+    this.canvas.setAttribute("width", `${width}`);
+    this.canvas.setAttribute("height", `${height}`);
     this.canvas.width = width;
     this.canvas.height = height;
   }

lit-components/lit-node-editor/node-editor.ts

@@ -1,7 +1,5 @@
-import "./styles.css";
-
 import { html, css, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, query } from "lit/decorators.js";
 
 import { CanvasNode, Canvas } from "./canvas";
 import { BaseTreeNode, styles as treeStyles, template as treeTemplate } from "./ui/tree-view";
@@ -17,27 +15,47 @@ export class NodeEditor extends LitElement {
     },
   });
 
+  @query("#output")
+  outputContainer!: HTMLDivElement;
+
+  private _resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const { width, height } = entry.contentRect;
+      this.editor.resize({ width, height });
+    }
+  });
+
   static styles = [
     treeStyles,
     css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
       main {
-        height: 100vh;
+        height: 100%;
         width: 100%;
         display: flex;
         flex-direction: row;
       }
       #output {
         flex: 1;
+        overflow: hidden;
       }
       .sidebar {
         width: ${PROPERTY_WIDTH}px;
+        overflow-y: auto;
+        background-color: #f5f5f5;
+        border-right: 1px solid #ddd;
       }
       #properties {
         width: ${PROPERTY_WIDTH}px;
         display: flex;
         flex-direction: column;
-        overflow-y: scroll;
+        overflow-y: auto;
         background-color: #eee;
+        border-left: 1px solid #ddd;
       }
       .property {
         display: flex;
@@ -271,6 +289,8 @@ export class NodeEditor extends LitElement {
   }
 
   firstUpdated() {
+    this._resizeObserver.observe(this.outputContainer);
+
     const amount = 10;
     // Create random canvas nodes
     for (let i = 0; i < amount; i++) {
@@ -283,13 +303,11 @@ export class NodeEditor extends LitElement {
       const target: CanvasNode = this.editor.store.nodes[i + amount / 2];
       this.editor.store.linkNodes(source, target, "simple");
     }
+  }
 
-    window.addEventListener("resize", () => {
-      this.editor.resize({
-        width: window.innerWidth - PROPERTY_WIDTH,
-        height: window.innerHeight,
-      });
-    });
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver.disconnect();
   }
 
   addRandomNode(i: number = this.editor.store.nodes.length) {

lit-components/lit-node-editor/styles.css

@@ -1,10 +1,5 @@
-body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100vh;
-}
-node-editor {
+:host {
+  display: block;
   width: 100%;
   height: 100%;
 }