55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
/**
|
|
* 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');
|
|
}
|
|
}
|