Fix UI scaling issues

flecs-hub · Dec 14, 2024 · 8ba41c5 · 8ba41c5
1 parent 27fe254
commit 8ba41c5
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 58 deletions.
diff --git a/etc/assets/app.flecs b/etc/assets/app.flecs
@@ -20,8 +20,8 @@ camera {
   Camera: {
     fov: 20
     up: [0, 1, 0]
-    near_: 0.2
-    far_: 300
+    near_: 2
+    far_: 1000
   }
 }
 
@@ -37,7 +37,7 @@ canvas {
     directional_light: light
     camera: camera
     fog_density: 3.0
-    shadow_far: 20
+    shadow_far: 100
   }
 }
 

diff --git a/etc/assets/scene.flecs b/etc/assets/scene.flecs
@@ -4,9 +4,9 @@
 // For C/C++ examples and docs go to:
 //  https://github.com/SanderMertens/flecs
 
+using flecs.script.*
 using flecs.components.*
 using flecs.game
-const PI = 3.1415926
 
 materials {
   prefab Stone {
@@ -112,7 +112,7 @@ template House {
 
   Attic : materials.Wood {
     const w_half_pow = 0.5 * ($width * $width)
-    const attic_height = $w_half_pow.sqrt()
+    const attic_height = sqrt($w_half_pow)
     Position3: {0, $height, 0}
     Rotation3: {0, 0, $PI / 4}
     Box: {$attic_height, $attic_height, $width * 0.9}
@@ -123,7 +123,7 @@ template House {
     const w_half = ($overshoot + $width) / 2
     const w_quart = ($overshoot + $width) / 4
     const w_roof_sqr = $w_half * $w_half + $w_half * $w_half
-    const roof_length = $w_roof_sqr.sqrt()
+    const roof_length = sqrt($w_roof_sqr)
 
     Left : materials.Wood {
       Position3: {-$w_quart, $w_quart + $height - 0.5 * $overshoot, 0}

diff --git a/etc/flecs.js b/etc/flecs.js
@@ -332,7 +332,9 @@ const flecs = {
             }, 
             (msg) => { 
               if (!msg) { msg = "{}"; }
-              err(JSON.parse(msg))
+              if (err) {
+                err(JSON.parse(msg))
+              }
             }
           );
         },

diff --git a/etc/js/ace-flecs-script.js b/etc/js/ace-flecs-script.js
@@ -38,7 +38,7 @@ ace.define("ace/mode/flecs-script-highlight_rules", ["require", "exports", "modu
                     },
                     {
                         token: "keyword",
-                        regex: "\\b(?:if|else|module|using|const|prop|with|template|prefab|slot)\\b"
+                        regex: "\\b(?:if|else|module|using|const|prop|with|template|prefab|slot|for|in)\\b"
                     },
                     {
                         token: "keyword.operator",

diff --git a/etc/js/components/pages/entities/pane-inspector.vue b/etc/js/components/pages/entities/pane-inspector.vue
@@ -47,6 +47,6 @@ function onScriptOpen(evt) {
 #pane-inspector {
   border-radius: var(--border-radius-medium);
   height: 100%;
-  overflow: auto;
+  /* overflow: auto; */
 }
 </style>
diff --git a/etc/js/components/widgets/inspector/entity-inspector-alerts.vue b/etc/js/components/widgets/inspector/entity-inspector-alerts.vue
@@ -48,6 +48,7 @@ div.entity-inspector-alerts {
 
 div.entity-inspector-alert {
   padding: 8px;
+  padding-top: 0px;
   border-radius: var(--border-radius-medium);
   border-style: solid;
   border-width: 1px;

diff --git a/etc/js/components/widgets/inspector/entity-inspector-components.vue b/etc/js/components/widgets/inspector/entity-inspector-components.vue
@@ -50,8 +50,4 @@ function onOpenScript() {
 
 <style scoped>
 
-div.entity-inspector-components {
-  padding-top: 8px;
-}
-
 </style>
diff --git a/etc/js/components/widgets/inspector/entity-inspector-matched-by.vue b/etc/js/components/widgets/inspector/entity-inspector-matched-by.vue
@@ -29,6 +29,7 @@ const props = defineProps({
 
 div.entity-inspector-matched-by {
   padding: 8px;
+  padding-top: 0px;
 }
 
 div.entity-inspector-match {

diff --git a/etc/js/components/widgets/inspector/entity-inspector-refs.vue b/etc/js/components/widgets/inspector/entity-inspector-refs.vue
@@ -34,10 +34,6 @@ const props = defineProps({
 
 <style scoped>
 
-div.entity-inspector-refs {
-  padding-top: 8px;
-}
-
 div.entity-inspector-ref {
   padding-left: 4px;
   padding-bottom: 8px;

diff --git a/etc/js/components/widgets/inspector/entity-inspector-script-ast.vue b/etc/js/components/widgets/inspector/entity-inspector-script-ast.vue
@@ -39,4 +39,8 @@ onMounted(() => {
 
 <style scoped>
 
+div.entity-inspector-script-ast {
+  overflow-x: auto;
+}
+
 </style>
diff --git a/etc/js/components/widgets/inspector/entity-inspector.vue b/etc/js/components/widgets/inspector/entity-inspector.vue
@@ -53,43 +53,45 @@
         v-model:active_item="inspectorMode">
       </dropdown>
 
-      <template v-if="inspectorMode == 'Components'">
-        <entity-inspector-components
-          :conn="conn"
-          :path="path"
-          :entityQueryResult="entityQueryResult"
-          :isScript="isScript"
-          :entityModules="entityModules"
-          @scriptOpen="onOpenScript">
-        </entity-inspector-components>
-      </template>
-      <template v-else-if="inspectorMode == 'Matched by'">
-        <entity-inspector-matched-by
-          :conn="conn"
-          :path="path"
-          :entityQueryResult="entityQueryResult">
-        </entity-inspector-matched-by>
-      </template>
-      <template v-else-if="inspectorMode == 'Referenced by'">
-        <entity-inspector-refs
-          :conn="conn"
-          :path="path"
-          :entityQueryResult="entityQueryResult">
-        </entity-inspector-refs>
-      </template>
-      <template v-else-if="inspectorMode == 'Alerts'">
-        <entity-inspector-alerts
-          :conn="conn"
-          :path="path"
-          :entityQueryResult="entityQueryResult">
-        </entity-inspector-alerts>
-      </template>
-      <template v-else-if="inspectorMode == 'Script AST'">
-        <entity-inspector-script-ast
-          :conn="conn"
-          :path="path">
-        </entity-inspector-script-ast>
-      </template>
+      <div class="entity-inspector-content">
+        <template v-if="inspectorMode == 'Components'">
+          <entity-inspector-components
+            :conn="conn"
+            :path="path"
+            :entityQueryResult="entityQueryResult"
+            :isScript="isScript"
+            :entityModules="entityModules"
+            @scriptOpen="onOpenScript">
+          </entity-inspector-components>
+        </template>
+        <template v-else-if="inspectorMode == 'Matched by'">
+          <entity-inspector-matched-by
+            :conn="conn"
+            :path="path"
+            :entityQueryResult="entityQueryResult">
+          </entity-inspector-matched-by>
+        </template>
+        <template v-else-if="inspectorMode == 'Referenced by'">
+          <entity-inspector-refs
+            :conn="conn"
+            :path="path"
+            :entityQueryResult="entityQueryResult">
+          </entity-inspector-refs>
+        </template>
+        <template v-else-if="inspectorMode == 'Alerts'">
+          <entity-inspector-alerts
+            :conn="conn"
+            :path="path"
+            :entityQueryResult="entityQueryResult">
+          </entity-inspector-alerts>
+        </template>
+        <template v-else-if="inspectorMode == 'Script AST'">
+          <entity-inspector-script-ast
+            :conn="conn"
+            :path="path">
+          </entity-inspector-script-ast>
+        </template>
+      </div>
     </template>
   </div>
 </template>
@@ -344,7 +346,9 @@ function onOpenScript() {
 div.entity-inspector {
   position: relative;
   display: grid;
+  grid-template-rows: 1rem 2rem 1rem 2rem calc(100% - 6rem);
   padding: 8px;
+  height: calc(100% - 1.0rem);
 }
 
 span.entity-inspector-id {
@@ -437,4 +441,10 @@ div.entity-inspector-button:hover, button.entity-inspector-button:hover {
   background-color: var(--bg-button-hover);
 }
 
+div.entity-inspector-content {
+  height: calc(100% - 1rem);
+  overflow-y: auto;
+  margin-top: 8px;
+}
+
 </style>
diff --git a/etc/js/components/widgets/title-bar/title-bar.vue b/etc/js/components/widgets/title-bar/title-bar.vue
@@ -59,7 +59,7 @@ const app_params = defineModel("app_params");
 
 div.title-bar {
   display: grid;
-  grid-template-columns: 2.5rem auto 1fr 30rem 1fr auto auto 0.0rem;
+  grid-template-columns: 2.5rem auto 1fr 35rem 1fr auto auto 0.0rem;
   gap: var(--gap);
   font-size: 0.9rem;
 }
@@ -104,13 +104,26 @@ div.title-info-right-2 {
   grid-column: 7;
 }
 
+@media screen and (max-width: 1024px) {
+  div.title-bar {
+    grid-template-columns: 2.5rem auto 1fr 22rem 1fr auto auto 0.0rem;
+  }
+}
+
 @media screen and (max-width: 800px) {
   div.title-bar {
-    display: grid;
-    grid-template-columns: 2.5rem 0px 1fr 0px;
+    grid-template-columns: 2.5rem 0rem 0rem 1fr 0rem 1.5rem auto 0.0rem;
+  }
+
+  div.title-info-right-1 {
+    display: none;
+  }
+
+  div.title-bar-v3 {
+    display: none;
   }
 
-  div.title-info-right {
+  div.title-bar-controls {
     display: none;
   }
 }