DomkitEditor: layout refacto + resizable panels

bin/style.css

@@ -3204,40 +3204,43 @@ div.gradient-box {
   top: 20px;
   width: 90%;
 }
-.domkitEditor tr,
-.domkitEditor td {
-  padding: 0;
-  margin: 0;
-  border: 0px;
-  border-collapse: collapse;
-}
-.domkitEditor table {
+.domkitEditor {
+  height: 100%;
   width: 100%;
 }
-.domkitEditor .scene {
-  width: 1px;
-  height: 1px;
+.domkitEditor .editors {
+  display: flex;
+  height: 100%;
 }
-.domkitEditor .cssEditor,
-.domkitEditor .dmlEditor,
-.domkitEditor .paramsEditor {
-  position: relative;
-  width: 50%;
+.domkitEditor .editors .panel {
+  height: 100%;
 }
-.domkitEditor .cssEditor .codeeditor,
-.domkitEditor .dmlEditor .codeeditor,
-.domkitEditor .paramsEditor .codeeditor {
-  height: 600px;
+.domkitEditor .editors .panel.left {
+  width: 48%;
 }
-.domkitEditor .cssEditor .codeeditor .codeErrorMessage,
-.domkitEditor .dmlEditor .codeeditor .codeErrorMessage,
-.domkitEditor .paramsEditor .codeeditor .codeErrorMessage {
-  top: 1px;
-  width: 90%;
+.domkitEditor .editors .panel.right {
+  padding-left: 10px;
+  flex-grow: 1;
 }
-.domkitEditor .separator {
-  width: 20;
-  background: #111;
+.domkitEditor .editors .panel.right > .editor {
+  height: 100%;
+}
+.domkitEditor .editors .panel > .editor {
+  display: flex;
+  flex-direction: column;
+  height: 50%;
+}
+.domkitEditor .editors .panel > .editor > span {
+  font-size: 18px;
+  margin: 15px 0px 5px 10px;
+}
+.domkitEditor .editors .panel > .editor .codeeditor {
+  flex-grow: 1;
+  height: 5px;
+}
+.domkitEditor .scene {
+  width: 1px;
+  height: 1px;
 }
 .profiler {
   width: 100%;

bin/style.less

@@ -3728,34 +3728,49 @@ div.gradient-box {
 }
 
 .domkitEditor {
-	tr, td {
-		padding : 0;
-		margin : 0;
-		border : 0px;
-		border-collapse: collapse;
-	}
-	table {
-		width : 100%;
+	height: 100%;		
+	width: 100%;
+
+	.editors {
+		display: flex;
+		height: 100%;
+		
+		.panel {
+			height: 100%;
+
+			&.left {
+				width: 48%;
+			}
+
+			&.right {
+				padding-left: 10px;
+				flex-grow: 1;
+				>.editor {
+					height: 100%;
+				}
+			}
+
+			>.editor {
+				display: flex;
+				flex-direction: column;
+				height: 50%;
+
+				>span {
+					font-size: 18px;
+					margin: 15px 0px 5px 10px;
+				}
+				.codeeditor {
+					flex-grow: 1;
+					height: 5px;
+				}
+			}
+		}
 	}
+
 	.scene {
 		width : 1px;
 		height : 1px;
 	}
-	.cssEditor, .dmlEditor, .paramsEditor {
-		position: relative;
-		width : 50%;
-		.codeeditor {
-			height : 600px;
-			.codeErrorMessage {
-				top : 1px;
-				width : 90%;
-			}
-		}
-	}
-	.separator {
-		width : 20;
-		background : #111;
-	}
 }
 
 .profiler {

hide/comp/ResizablePanel.hx

@@ -66,6 +66,8 @@ class ResizablePanel extends hide.comp.Component {
 	}
 
 	public function setSize(?newSize : Int) {
+		onBeforeResize();
+		
 		var minSize = (layoutDirection == Horizontal? Std.parseInt(element.css("min-width")) : Std.parseInt(element.css("min-height")));
 		var maxSize = (layoutDirection == Horizontal? Std.parseInt(element.css("max-width")) : Std.parseInt(element.css("max-height")));
 		var clampedSize = 0;
@@ -73,14 +75,15 @@ class ResizablePanel extends hide.comp.Component {
 		else clampedSize = hxd.Math.iclamp(getDisplayState("size"), minSize, maxSize);
 		switch (layoutDirection) {
 			case Horizontal :
-				element.width(clampedSize);
+				element.width(clampedSize == null ? newSize : clampedSize);
 			case Vertical :
-				element.height(clampedSize);
+				element.height(clampedSize == null ? newSize : clampedSize);
 		}
-		if (newSize != null) saveDisplayState("size", clampedSize);
+		if (newSize != null) saveDisplayState("size", clampedSize == null ? newSize : clampedSize);
 
 		onResize(); //@:privateAccess if( scene.window != null) scene.window.checkResize();
 	}
 
+    public dynamic function onBeforeResize() {}
     public dynamic function onResize() {}
 }

hide/view/Domkit.hx

@@ -12,49 +12,21 @@ class Domkit extends FileView {
 
 		element.html('
 		<div class="domkitEditor">
-			<table>
-				<tr class="title">
-					<td>
-						DML
-					</td>
-					<td class="separator">
-					&nbsp;
-					</td>
-					<td>
-						CSS
-					</td>
-				</tr>
-				<tr>
-					<td class="dmlEditor">
-					</td>
-					<td class="separator">
-					&nbsp;
-					</td>
-					<td class="cssEditor">
-					</td>
-				</tr>
-				<tr class="title>
-					<td>
-						Parameters
-					</td>
-					<td class="separator">
-					&nbsp;
-					</td>
-					<td>
-						&nbsp;
-					</td>
-				</tr>
-				<tr>
-					<td class="paramsEditor">
-					</td>
-					<td class="separator">
-					&nbsp;
-					</td>
-					<td>
-						&nbsp;
-					</td>
-				</tr>
-			</table>
+			<div class="editors">
+				<div class="left panel">
+					<div class="editor dmlEditor top">
+						<span>DML</span>
+					</div>
+					<div class="editor paramsEditor bot">
+						<span>Parameters</span>
+					</div>
+				</div>
+				<div class="right panel">
+					<div class="editor cssEditor top">
+						<span>CSS</span>
+					</div>
+				</div>
+			</div>
 			<div class="scene"></div>
 		</div>');
 
@@ -68,6 +40,27 @@ class Domkit extends FileView {
 		cssEditor.onChanged = dmlEditor.onChanged = paramsEditor.onChanged = check;
 		cssEditor.onSave = dmlEditor.onSave = paramsEditor.onSave = save;
 
+		var editors = element.find('.editors');
+		var totalWidth = editors.width();
+		var totalHeight = editors.height();
+		var panelRight = element.find('.right');
+		var panelLeft = new hide.comp.ResizablePanel(hide.comp.ResizablePanel.LayoutDirection.Horizontal, element.find('.left'), After);
+		panelLeft.onBeforeResize = () -> {
+			panelRight.width(0);
+		};
+		panelLeft.onResize = () -> {
+			panelRight.width(totalWidth - panelLeft.element.width());
+		};
+
+		var panelTopLeft = new hide.comp.ResizablePanel(hide.comp.ResizablePanel.LayoutDirection.Vertical, element.find('.top'), After);
+		var panelBotLeft = element.find('.bot');
+		panelTopLeft.onBeforeResize = () -> {
+			panelBotLeft.height(0);
+		};
+		panelTopLeft.onResize = () -> {
+			panelBotLeft.height(totalHeight - panelTopLeft.element.height());
+		};
+
 		// define DomkitBaseContext functions
 		@:privateAccess paramsEditor.checker.init();
 		function defineGlobal(name,args:Array<{name:String,t:String,?opt:Bool}>,ret) {