twopoint5d: add styleSheetRoot and resizeToAttributeEl to display params

spearwolf · Oct 28, 2023 · 4a8e8ef · 4a8e8ef
1 parent de4eaad
commit 4a8e8ef
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/packages/twopoint5d/package.json b/packages/twopoint5d/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@spearwolf/twopoint5d",
   "description": "a library to create 2.5d realtime graphics and pixelart with three.js",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "author": {
     "name": "Wolfger Schramm",
     "email": "[email protected]",

diff --git a/packages/twopoint5d/src/display/Display.ts b/packages/twopoint5d/src/display/Display.ts
@@ -47,6 +47,9 @@ export class Display {
 
   resizeToElement?: HTMLElement;
   resizeToCallback?: ResizeCallback;
+  resizeToAttributeEl: HTMLElement;
+
+  styleSheetRoot: HTMLElement | ShadowRoot;
 
   renderer?: WebGLRenderer;
 
@@ -56,6 +59,7 @@ export class Display {
     this.#chronometer.stop();
 
     this.resizeToCallback = options?.resizeTo;
+    this.styleSheetRoot = options?.styleSheetRoot ?? document.head;
 
     if (domElementOrRenderer instanceof WebGLRenderer) {
       this.renderer = domElementOrRenderer;
@@ -72,6 +76,7 @@ export class Display {
           // we create another container div here to avoid the if container-has-no-discrete-size
           // then line-height-and-font-height-styles-give-weird-client-rect-behaviour issue
           'display:block;width:100%;height:100%;margin:0;padding:0;border:0;line-height:0;font-size:0;',
+          this.styleSheetRoot,
         );
         domElementOrRenderer.appendChild(container);
 
@@ -92,9 +97,11 @@ export class Display {
     }
 
     const {domElement: canvas} = this.renderer!;
-    Stylesheets.addRule(canvas, Display.CssRulesPrefixDisplay, 'touch-action: none;');
+    Stylesheets.addRule(canvas, Display.CssRulesPrefixDisplay, 'touch-action: none;', this.styleSheetRoot);
     canvas.setAttribute('touch-action', 'none'); // => PEP polyfill
 
+    this.resizeToAttributeEl = options?.resizeToAttributeEl ?? canvas;
+
     this.resize();
 
     this.#stateMachine.on({
@@ -158,7 +165,7 @@ export class Display {
   }
 
   get pixelRatio(): number {
-    return window.devicePixelRatio ?? 0;
+    return window.devicePixelRatio ?? 1;
   }
 
   resize(): void {
@@ -171,16 +178,20 @@ export class Display {
 
     let fullscreenCssRulesMustBeRemoved = this.#fullscreenCssRulesMustBeRemoved;
 
-    if (canvasElement.hasAttribute('resize-to')) {
-      const resizeTo = canvasElement.getAttribute('resize-to')!.trim();
+    if (this.resizeToAttributeEl.hasAttribute('resize-to')) {
+      const resizeTo = this.resizeToAttributeEl.getAttribute('resize-to')!.trim();
       if (resizeTo.match(/^:?(fullscreen|window)$/)) {
         wPx = window.innerWidth;
         hPx = window.innerHeight;
         sizeRefElement = undefined;
 
         let fullscreenCssRules = this.#fullscreenCssRules;
         if (!fullscreenCssRules) {
-          fullscreenCssRules = Stylesheets.installRule(Display.CssRulesPrefixFullscreen, `position:fixed;top:0;left:0;`);
+          fullscreenCssRules = Stylesheets.installRule(
+            Display.CssRulesPrefixFullscreen,
+            `position:fixed;top:0;left:0;`,
+            this.styleSheetRoot,
+          );
           this.#fullscreenCssRules = fullscreenCssRules;
         }
         if (fullscreenCssRulesMustBeRemoved) {

diff --git a/packages/twopoint5d/src/display/Stylesheets.ts b/packages/twopoint5d/src/display/Stylesheets.ts
@@ -9,18 +9,18 @@ const installedRules: Map<string, {index: number; css: string}> = new Map();
  * Helpers for installing simple css-class-based rules
  */
 export class Stylesheets {
-  static getGlobalSheet(): CSSStyleSheet {
+  static getGlobalSheet(root: HTMLElement | ShadowRoot = document.head): CSSStyleSheet {
     if (sheet === null) {
       const styleEl = document.createElement('style');
       styleEl.setAttribute('id', globalStylesID);
-      document.head.appendChild(styleEl);
+      root.appendChild(styleEl);
       sheet = styleEl.sheet;
     }
     return sheet;
   }
 
-  static installRule(name: string, css: string): string {
-    const sheet = Stylesheets.getGlobalSheet();
+  static installRule(name: string, css: string, root: HTMLElement | ShadowRoot = document.head): string {
+    const sheet = Stylesheets.getGlobalSheet(root);
 
     const className = `${name}-${postFixID}`;
     const selector = `.${className}`;
@@ -45,10 +45,11 @@ export class Stylesheets {
    * The class name gets a uniq-number as postfix added.
    * @param name The base class name
    * @param css The styles
+   * @param root default is document.head
    * @returns The postfixed class name
    */
-  static addRule(element: HTMLElement, name: string, css: string): string {
-    const className = Stylesheets.installRule(name, css);
+  static addRule(element: HTMLElement, name: string, css: string, root: HTMLElement | ShadowRoot = document.head): string {
+    const className = Stylesheets.installRule(name, css, root);
     element.classList.add(className);
     return className;
   }

diff --git a/packages/twopoint5d/src/display/types.ts b/packages/twopoint5d/src/display/types.ts
@@ -16,4 +16,6 @@ export type ResizeCallback = (display: Display) => [width: number, height: numbe
 
 export type DisplayParameters = Partial<Omit<WebGLRendererParameters, 'canvas'>> & {
   resizeTo?: ResizeCallback;
+  styleSheetRoot?: HTMLElement | ShadowRoot;
+  resizeToAttributeEl?: HTMLElement;
 };