element tag namings and fix hierarchy

mrdoob · Mar 25, 2024 · 39083a4 · 39083a4
1 parent b1cd990
commit 39083a4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/playground/NodeEditor.js b/playground/NodeEditor.js
@@ -122,13 +122,13 @@ export class NodeEditor extends THREE.EventDispatcher {
 			this.canvas.dom.remove();
 			this.search.dom.remove();
 
-			document.body.append( this.previewMenu.dom );
+			this.domElement.append( this.previewMenu.dom );
 
 		} else {
 
 			this.canvas.focusSelected = false;
 
-			document.body.appendChild(this.menu.dom);
+			this.domElement.append( this.menu.dom );
 			this.domElement.append( this.canvas.dom );
 			this.domElement.append( this.search.dom );
 
@@ -339,7 +339,7 @@ export class NodeEditor extends THREE.EventDispatcher {
 
 		previewMenu.add( editorButton );
 
-		document.body.appendChild(menu.dom);
+		this.domElement.appendChild(menu.dom);
 
 		this.menu = menu;
 		this.previewMenu = previewMenu;

diff --git a/playground/SplitscreenManager.js b/playground/SplitscreenManager.js
@@ -33,8 +33,7 @@ export class SplitscreenManager {
 
         rendererContainer.style[ "z-index" ] = 20;
 
-        this.gutter = document.createElement( "div" );
-        this.gutter.className = "gutter";
+        this.gutter = document.createElement( "f-gutter" );
 
         nodeDOM.parentNode.appendChild( this.gutter );
 

diff --git a/playground/index.html b/playground/index.html
@@ -51,19 +51,24 @@
 				background: #191919ed;
 			}
 
-			.splitview {
+			flow f-menu {
+				white-space: nowrap;
+			}
+
+			node-editor {
 				position: relative;
 				width: 100%;
 				height: 100%;
 			}
 
-			.panel {
-				position: absolute;
-				overflow: hidden;
-				float: left;
+			f-preview {
+				display: block;
+				position: relative;
+				width: 100%;
+				height: 100%;
 			}
 
-			.gutter {
+			f-gutter {
 				position: absolute;
 				cursor: ew-resize;
 				height: 100%;
@@ -77,6 +82,12 @@
 				z-index: 30;
 			}
 
+			.panel {
+				position: absolute;
+				overflow: visible;
+				float: left;
+			}
+
 		</style>
 	</head>
 	<body>
@@ -114,8 +125,7 @@
 
 			async function init() {
 
-				const container = document.createElement( 'div' );
-				container.className = 'splitview';
+				const container = document.createElement( 'node-editor' );
 
 				document.body.appendChild( container );
 
@@ -163,8 +173,7 @@
 				renderer.toneMappingExposure = 1;
 
 				// Additional container required for determining accurate pixel dimensions of the canvas when resizing
-				const rendererContainer = document.createElement( 'div' );
-				rendererContainer.className = 'splitview';
+				const rendererContainer = document.createElement( 'f-preview' );
 				container.appendChild( rendererContainer );
 
 				rendererContainer.appendChild( renderer.domElement );