[hide] New status bar

bin/style.css

@@ -980,6 +980,7 @@ input[type=checkbox]:checked:after {
 }
 .hide-tabs .tab {
   max-height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -3783,19 +3784,64 @@ hide-popover hide-content {
   color: white;
   mix-blend-mode: difference;
 }
-#statusBar {
-  position: fixed;
-  bottom: 16px;
-  right: 16px;
-  z-index: 999;
+.hide-root {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  box-sizing: border-box;
+  height: 100vh;
+  width: 100vw;
+}
+.hide-root > .golden-layout-root {
+  flex-grow: 1;
+  background-color: #000000;
+  min-height: 0;
+  min-width: 0;
+  overflow: clip;
+}
+.hide-root > .status-bar {
+  padding-left: 4px;
+  padding-right: 4px;
+  height: 16px;
+  background-color: #202020;
+  border-top: 1px solid #333;
+  flex-shrink: 0;
+  display: flex;
+  font-family: 'Inter';
+}
+.hide-root > .status-bar .build {
+  margin-left: auto;
+}
+.hide-root > .status-bar #status-icons {
   display: flex;
   align-items: center;
+  gap: 4px;
 }
-#statusBar > .statusbar-icon {
-  height: 24px;
-  width: 24px;
+.hide-root > .status-bar #status-icons > .icon {
+  height: 14px;
+  width: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 2em;
+  font-size: 1em;
+}
+.hide-root > .status-bar #status-icons button {
+  height: 14px;
+  font-size: 0.8em;
+  padding: 2px;
+  margin: 0px;
+  border: none;
+  outline: none;
+  border-radius: 2px;
+  background-color: #efefef;
+}
+.hide-root > .status-bar #status-icons button:hover {
+  background-color: #ddd;
+}
+.hide-root > .status-bar #status-icons .error-suppressed {
+  padding-left: 4px;
+  padding-right: 4px;
+  background-color: hsl(359, 68%, 71%);
+  color: black;
+  border-radius: 3px;
 }

bin/style.less

@@ -1058,6 +1058,7 @@ input[type=checkbox] {
 	}
 	.tab {
 		max-height: 100%;
+		width: 100%;
 		display: flex;
 		flex-direction: column;
 		position: absolute;
@@ -4421,25 +4422,85 @@ hide-popover {
     mix-blend-mode: difference;
 }
 
-#statusBar {
-	position: fixed;
-	bottom: 16px;
-	right: 16px;
 
-	z-index: 999;
 
+.hide-root {
 	display: flex;
+	flex-direction: column;
+	justify-content: stretch;
 
-	align-items: center;
+	box-sizing: border-box;
+
+	height: 100vh;
+	width: 100vw;
+
+	> .golden-layout-root {
+		flex-grow: 1;
+		background-color: #000000;
+		min-height: 0;
+		min-width: 0;
+
+		overflow: clip;
+	}
 
-	> .statusbar-icon {
-		height: 24px;
-		width: 24px;
+	> .status-bar {
+
+		padding-left: 4px;
+		padding-right: 4px;
+
+		height: 16px;
+		background-color: #202020;
+		border-top: 1px solid #333;
+		flex-shrink: 0;
 
 		display: flex;
-		align-items: center;
-		justify-content: center;
 
-		font-size: 2em;
+		font-family: 'Inter';
+
+
+		.build {
+			margin-left: auto;
+		}
+
+		#status-icons {
+			display: flex;
+			align-items: center;
+
+			gap: 4px;
+
+			> .icon {
+				height: 14px;
+				width: 14px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 1em;
+			}
+
+			button {
+				height: 14px;
+				font-size: 0.8em;
+				padding: 2px;
+				margin: 0px;
+				border: none;
+				outline: none;
+				border-radius: 2px;
+
+				background-color: #efefef;
+				&:hover {
+					background-color: #ddd;
+				}
+			}
+
+			.error-suppressed {
+				padding-left: 4px;
+				padding-right: 4px;
+				background-color: hsl(359deg, 68%, 71%);
+				color: black;
+				border-radius: 3px;
+			}
+		}
+
+
 	}
 }

hide/Ide.hx

@@ -40,7 +40,10 @@ class Ide extends hide.tools.IdeData {
 	var scripts : Map<String,Array<Void->Void>> = new Map();
 	var hasReloaded = false;
 
+	var hideRoot : hide.Element;
 	var statusBar : hide.Element;
+	var goldenContainer : hide.Element;
+	var statusIcons : hide.Element;
 
 	public var show3DIcons = true;
 	public var show3DIconsCategory : Map<hrt.impl.EditorTools.IconCategory, Bool> = new Map();
@@ -265,7 +268,21 @@ class Ide extends hide.tools.IdeData {
 
 		hrt.impl.EditorTools.setupIconCategories();
 
-		statusBar = new Element('<div id="statusBar"></div>').appendTo(body);
+		if (hideRoot != null) {
+			hideRoot.remove();
+			hideRoot = null;
+		}
+		hideRoot = new Element('<div class="hide-root"></div>').appendTo(new Element("body"));
+
+		goldenContainer = new Element('<div class="golden-layout-root"></div>').appendTo(hideRoot);
+
+		statusBar = new Element('<div class="status-bar"></div>').appendTo(hideRoot);
+		statusIcons = new Element('<div id="status-icons"></div>').appendTo(statusBar);
+
+		var commitHash = getGitCommitHashAndDate();
+		if (commitHash.length > 0) {
+			new Element('<span class="build">hide $commitHash</span>').appendTo(statusBar);
+		}
 	}
 
 	public function getViews<K,T:hide.ui.View<K>>( cl : Class<T> ) {
@@ -375,7 +392,22 @@ class Ide extends hide.tools.IdeData {
 		}
 		for( i in config.content ) checkRec(i);
 
-		layout = new golden.Layout(config);
+		layout = new golden.Layout(config, goldenContainer.get(0));
+		var resizeTimer : haxe.Timer = null;
+		var observer = new hide.comp.ResizeObserver((elts, observer) -> {
+			if (resizeTimer != null) {
+				resizeTimer.stop();
+			}
+
+			resizeTimer = new haxe.Timer(20);
+			resizeTimer.run = () -> {
+				var rect = goldenContainer.get(0).getBoundingClientRect();
+				layout.updateSize(Std.int(rect.width), Std.int(rect.height));
+				resizeTimer.stop();
+				resizeTimer = null;
+			};
+			});
+		observer.observe(goldenContainer.get(0));
 
 		var initViews = [];
 		function initView(view:hide.ui.View<Dynamic>) {
@@ -568,15 +600,13 @@ class Ide extends hide.tools.IdeData {
 		if (!showErrors) {
 			if (errorWindow == null) {
 				errorWindow = new Element('
-				<div class="error-panel">
-					<div class="error-banner">
-						<button class="show-errors"><i class="icon ico ico-warning"></i>Show errors</button>
+					<span class="error-suppressed">
 						<button class="reload"><i class="icon ico ico-refresh"></i>Reload</button>
-						Warning : errors are currently suppressed in the editor. Your editor might be in an unstable state, please save and reload.
-					</div>
-					<div class="error-log hidden">
-					</div>
-				</div>');
+						Errors are currently suppressed in the editor. Please save your work and reload.
+					</span>
+				');
+
+				addStatusIcon(errorWindow);
 
 				var errorLog = errorWindow.find(".error-log");
 
@@ -592,8 +622,6 @@ class Ide extends hide.tools.IdeData {
 					else
 						errorLog.addClass("hidden");
 				});
-
-				errorWindow.appendTo(window.window.document.body);
 			}
 
 			errorWindow.find(".error-log").append(new Element('<p>${e}</p>'));
@@ -855,7 +883,7 @@ class Ide extends hide.tools.IdeData {
 		Adds an element to the ide status bar
 	**/
 	public function addStatusIcon(e: hide.Element) {
-		var wrapper = new hide.Element('<div class="statusbar-icon"></div>').appendTo(statusBar);
+		var wrapper = new hide.Element('<div class="statusbar-icon"></div>').appendTo(statusIcons);
 		wrapper.append(e);
 	}
 
@@ -1590,6 +1618,30 @@ class Ide extends hide.tools.IdeData {
 		new Ide();
 	}
 
+
+	public static function getGitCommitHashAndDate():String {
+
+		// Check if there is changes in git. If thats the case, we are certainly on a dev machine
+		var out = "";
+		try {
+			out = js.node.ChildProcess.execSync('git status --porcelain=v1');
+		} catch (_) {
+			return "";
+		}
+
+		if (out.length > 0) {
+			return "dev";
+		}
+
+		try {
+			out = js.node.ChildProcess.execSync('git log --pretty=format:"%h(%cs)" -n 1');
+		} catch (_) {
+			return "";
+		}
+
+		return out;
+	}
+
 }
 
 

hide/comp/ResizeObserver.hx

@@ -0,0 +1,21 @@
+package hide.comp;
+
+@:native("ResizeObserver")
+extern class ResizeObserver {
+    function new(callback: (entries : Array<Dynamic>, self: ResizeObserver) -> Void);
+
+    /**
+        Unobserves all observed Element targets of a particular observer.
+    **/
+    function disconnect() : Void;
+
+    /**
+        Initiates the observing of a specified Element.
+    **/
+    function observe(element: js.html.Element) : Void;
+
+    /**
+        Ends the observing of a specified Element.
+    **/
+    function unobserve(target: js.html.Element) : Void;
+}

hide/comp/cdb/Table.hx

@@ -26,6 +26,8 @@ class Table extends Component {
 
 	public var nestedIndex : Int = 0;
 
+	var resizeObserver : hide.comp.ResizeObserver;
+
 	public function new(editor, sheet, root, mode) {
 		super(null,root);
 		this.displayMode = mode;
@@ -318,7 +320,12 @@ class Table extends Component {
 		#if js
 		if( sheet.parent == null ) {
 			cols.ready(setupTableElement);
-			cols.on("resize", setupTableElement);
+
+			if (resizeObserver != null) {
+				resizeObserver.disconnect();
+			}
+			resizeObserver = new hide.comp.ResizeObserver((_,_) -> setupTableElement());
+			resizeObserver.observe(editor.element.parent().get(0));
 		}
 		#end
 	}

hide/ui/View.hx

@@ -139,10 +139,6 @@ class View<T> extends hide.comp.Component {
 		this.container = cont;
 		@:privateAccess ide.views.push(this);
 		syncTitle();
-		container.on("resize",function(_) {
-			container.getElement().find('*').trigger('resize');
-			onResize();
-		});
 		container.on("destroy",function(e) {
 			destroy();
 		});

hide/view/FXEditor.hx

@@ -501,9 +501,11 @@ class FXEditor extends hide.view.FileView {
 		});
 
 		refreshLayout();
-		element.resize(function(e) {
+
+		var resizeObserver = new hide.comp.ResizeObserver((_, _) -> {
 			rebuildAnimPanel();
 		});
+		resizeObserver.observe(fxPanel.get(0));
 		element.find(".collapse-btn").click(function(e) {
 			sceneEditor.collapseTree();
 		});

libs/golden/Layout.hx

@@ -9,9 +9,10 @@ extern class Layout {
 	var isInitialised : Bool;
 	var config : Config;
 
-	function new( config : Config ) : Void;
+	function new( config : Config, parent : js.html.Element = null ) : Void;
 	function init() : Void;
 	function destroy() : Void;
+	function updateSize(width: Int = null, height: Int = null) : Void;
 
 	function registerComponent( name : String, callb : Container -> Dynamic -> Void ) : Void;
 	function on( event : String, f : Void -> Void ) : Void;