initial

utils/setupDom.js

@@ -0,0 +1,54 @@
+/**
+ * Sets up the DOM structure for the canvas.
+ *
+ * @param {HTMLElement} canvas - The canvas element to be inserted into the DOM.
+ */
+export default function setupDom(canvas, groot) {
+  document.body.addEventListener('contextmenu', (e) => e.preventDefault());
+
+  const content = document.createElement('div');
+  content.classList.add('content');
+  document.body.appendChild(content);
+  const container = document.createElement('div');
+  container.classList.add('canvas-wrapper');
+  content.appendChild(container);
+  canvas.classList.add('webgl');
+  container.appendChild(canvas);
+
+  groot && groot.appendChild(container);
+  groot && content.appendChild(groot);
+
+  const spacer = document.createElement('div');
+  spacer.classList.add('spacer');
+  document.body.appendChild(spacer);
+
+  // trick FairyGUI Stage styles
+  enableTouchScroll();
+}
+
+export function enableTouchScroll(selector = 'body') {
+  const el = document.querySelector(selector);
+  if (el) {
+    el.style.setProperty('touch-action', 'auto', 'important');
+  }
+
+  // Delete global * { touch-action: none }
+  [...document.styleSheets].forEach((sheet) => {
+    try {
+      [...sheet.cssRules].forEach((rule, index) => {
+        if (rule.selectorText === '*' && rule.cssText.includes('touch-action')) {
+          sheet.deleteRule(index);
+        }
+      });
+    } catch (e) {
+      // Ignore errors if CORS
+    }
+  });
+}
+
+export function disableTouchScroll(selector = 'body') {
+  const el = document.querySelector(selector);
+  if (el) {
+    el.style.setProperty('touch-action', 'none', 'important');
+  }
+}