hide mainSheet: blabla

theatre/studio/src/panels/OutlinePanel/BaseItem.tsx

@@ -148,6 +148,34 @@ const BaseItem: React.FC<{
 }) => {
   const canContainChildren = children !== undefined
 
+  // yes, we hate this ugly bunch of code below
+  // but don't know how else to do it
+  let cssLabel = ''
+  if (
+    typeof label === 'object' &&
+    label !== null &&
+    'props' in label &&
+    'children' in label.props &&
+    Array.isArray(label.props.children) &&
+    label.props.children.length > 0 &&
+    label.props.children[0] === 'mainSheet'
+  ) {
+    const targetClass = label.type.toString().replaceAll('.', '')
+    var styles = `
+        .pleaseHide${targetClass} > div,
+        ${label.type.toString()} {
+            display: none;
+        }
+    `
+    var styleSheet = document.createElement('style')
+    styleSheet.innerText = styles
+    document
+      .getElementById('theatrejs-studio-root')!
+      .shadowRoot!.appendChild(styleSheet)
+    cssLabel = `pleaseHide${targetClass}`
+  } else if (typeof label === 'string') {
+    cssLabel = `layerMover${label}`
+  }
   return (
     <Container
       style={
@@ -156,8 +184,8 @@ const BaseItem: React.FC<{
       }
       className={
         collapsed
-          ? `collapsed layerMover layerMover${label}`
-          : `layerMover layerMover${label}`
+          ? `collapsed layerMover ${cssLabel}`
+          : `layerMover ${cssLabel}`
       }
     >
       <Header className={selectionStatus} onClick={select ?? noop} data-header>