troubleshooting weird issue

fiugd · Aug 18, 2022 · 077741a · 077741a
1 parent c5c8287
commit 077741a
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 8 deletions.
diff --git a/src/dom.js b/src/dom.js
@@ -206,7 +206,7 @@ export const createPane = (paneConfig) => {
 		(x) => x.iframe.includes("/_/modules") || x.iframe.includes("/dist/")
 	);
 	const dropClass = drop + "" !== "false" ? " dragTo" : "";
-	const bottomDockedClass = isModule ? " bottomDocked" : "";
+	const bottomDockedClass = isModule ? " bottomDocked" : ""; // bottomDocked class does not work as expected
 	const activeClass = paneActive ? " active" : "";
 	const tabbedClass = orient === "tabs" ? " tabbed" : "";
 	const classes = tabbedClass + dropClass + bottomDockedClass + activeClass;
@@ -391,6 +391,13 @@ export const createDom = (layout) => {
 			}
 		}
 
+		if(layout.events.createPane){
+			const panes = Array.from(layoutDom.querySelectorAll('.pane'));
+			for(const pane of panes){
+				layout.events.createPane({ pane });
+			}
+		}
+
 		const containers = layoutDom
 			.querySelectorAll('.layout-container');
 		containerSizers(

diff --git a/src/style.js b/src/style.js
@@ -196,6 +196,8 @@ const paneStyle = () => {
 		display: grid;
 		width: 100%;
 		height: 100%;
+		min-height: 100%;
+		min-width: 100%;
 	}
 	.pane {
 		position: relative;
@@ -206,7 +208,7 @@ const paneStyle = () => {
 		box-sizing: border-box;
 	}
 	.pane.bottomDocked {
-		margin-bottom: -23px;
+		/* margin-bottom: -23px; */
 		/*z-index: 1;*/
 	}
 	.pane.maximum {
@@ -224,24 +226,28 @@ const paneStyle = () => {
 		border-color: #2a2a2a;
 	}
 	.pane.active:after {
+		/*
 		content: "";
 		position: absolute;
 		pointer-events: none;
 		display: block;
 		box-sizing: border-box;
+		*/
 		/*
 		right: 0;
 		top: 0;
 		box-shadow: inset 0 0 3px #00bcff;
 		left: 1px;
 		bottom: 23px;
 		*/
+		/*
 		right: 11px;
 		bottom: 28px;
 		background: #779997;
 		width: 10px;
 		height: 10px;
 		border-radius: 50%;
+		*/
 	}
 	.sizer {
 		background: transparent;

diff --git a/test/index.css b/test/index.css
@@ -1,10 +1,28 @@
 body {
 	margin: 0;
-	height: 100vh;
-	width: 100vw;
+	/* height: 100vh; */
+	/* width: 100vw; */
+/* 	overflow: hidden;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0; */
+}
+
+#layout {
+	overscroll-behavior: none;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	top: 0;
 	overflow: hidden;
 }
 
+#layout > .layout-container > .layout-container .pane {
+	margin-bottom: -23px;
+}
 .tab .icon::before {
 	display: inline-flex;
 	padding-right: 3px;

diff --git a/test/index.html b/test/index.html
@@ -24,7 +24,9 @@
 		}
 	</style>
 
-	<body></body>
+	<body>
+		<div id="layout"></div>
+	</body>
 
 	<script type="module">
 		import YAML from "https://cdn.skypack.dev/yaml";
@@ -66,16 +68,19 @@
 				layoutConfig = YAML.parse(source);
 			}
 		}
-		
+
 		const createTab = ({ tab, file, pane }) => {
 			const title = tab.querySelector('span');
 			title.classList.add('icon', 'icon-' + iconMap(file));
 		};
+		const createPane = ({ pane }) => {
+			console.log(`pane created: ${pane.id}`)
+		};
 
 		const layout = new Layout({
 			...layoutConfig,
-			parent: document.body,
-			events: { createTab }
+			parent: document.querySelector('#layout'),
+			events: { createTab, createPane }
 		});
 
 		let activeEditor = document.querySelector('.pane.tabbed.active')?.id;

diff --git a/test/layout.fiug.yaml b/test/layout.fiug.yaml
@@ -1,6 +1,7 @@
 ---
 rows:
   - activate: false
+    height: auto
     columns:
       - iframe: /fiugd/beta/dist/actionbar.html
         width: 45px