tweak ui

demo-react.tsx

@@ -6,6 +6,39 @@ import {Application} from "./memri/gui/Application";
 import {RootContext} from "./memri/context/MemriContext";
 import {debugHistory} from "./memri/cvu/views/ViewDebugger";
 
+
+import { makeStyles } from '@material-ui/core/styles';
+
+function importCssString(cssText, id) {
+    cssText += "\n/*# sourceURL=css:/" + id + " */";
+    var style = document.createElement("style");
+    style.appendChild(document.createTextNode(cssText));
+    document.head.appendChild(style);
+};
+
+importCssString(`
+body {margin: 0}
+.Application {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.ScreenSizer {
+    outline: solid;
+}
+.HStack {
+    flex-direction: row;
+    display: flex;
+}
+.VStack {
+    flex-direction: column;
+    display: flex;
+}
+.ZStack {
+    position: relative;
+}
+`, "main.css")
+
 let context = new RootContext("Memri GUI");
 context.installer.await(context,() => {
     context.boot(false, (error) => {
@@ -41,7 +74,7 @@ export var geom = {
 }
 
 function updateSize() {
-    geom.size.height = window.innerHeight;
+    geom.size.height = window.innerHeight - 4;
     geom.size.width = Math.min(window.innerWidth, 414);
 }
 window.onresize = updateSize

memri/gui/swiftUI.tsx

@@ -325,9 +325,9 @@ export class VStack extends MainUI {
     render() {
         let {font, padding, foregroundColor, spacing, frame, zIndex, centeredOverlayWithinBoundsPreferenceKey, ...other} = this.props;
         return (
-            <Box display="flex" {...this.setAlignment()} flexDirection="column" style={this.setStyles()} className="VStack" {...other}>
+            <div {...this.setAlignment()} flexDirection="column" style={this.setStyles()} className="VStack" {...other}>
                 {this.props.children}
-            </Box>
+            </div>
         )
     }
 }
@@ -336,9 +336,9 @@ export class ZStack extends MainUI {
     render() {
         let {font, padding, foregroundColor, spacing, frame, zIndex, centeredOverlayWithinBoundsPreferenceKey, ...other} = this.props;
         return (
-            <Box {...this.setAlignment()} style={this.setStyles()} className="ZStack" {...other}>
+            <div {...this.setAlignment()} style={this.setStyles()} className="ZStack" {...other}>
                 {this.props.children}
-            </Box>
+            </div>
         )
     }
 }
@@ -347,9 +347,9 @@ export class HStack extends MainUI {
     render() {
         let {font, padding, foregroundColor, spacing, frame, zIndex, centeredOverlayWithinBoundsPreferenceKey, ...other} = this.props;
         return (
-            <Box display="flex" flexDirection="row" {...this.setAlignment()} style={this.setStyles()} className="HStack" {...other}>
+            <div {...this.setAlignment()} style={this.setStyles()} className="HStack" {...other}>
                 {this.props.children}
-            </Box>
+            </div>
         )
     }
 }