🔧 small UI fixes

- update browserslist
- make BulmaBreadcrumbs clearer
- fix aspect ratio on SVGRect
- fix weird behaviour on DoorCanvas click

ui/src/components/bulma/Breadcrumbs.vue

@@ -8,7 +8,7 @@
         :class="model === index ? 'is-active' : ''"
         @click.left="model = index"
       >
-        <a>
+        <a :class="model === index ? 'has-text-primary' : ''">
           <span class="icon is-small">
             <FontAwesomeIcon :icon="step.icon" />
           </span>

ui/src/components/calendar/SVGRect.vue

@@ -1,10 +1,10 @@
 <template>
   <foreignObject
-    :x="Math.round(get_bg_aspect_ratio() * rectangle.left)"
+    :x="Math.round(aspect_ratio * rectangle.left)"
     :y="rectangle.top"
-    :width="Math.round(get_bg_aspect_ratio() * rectangle.width)"
+    :width="Math.round(aspect_ratio * rectangle.width)"
     :height="rectangle.height"
-    :style="`transform: scaleX(${1 / get_bg_aspect_ratio()})`"
+    :style="`transform: scaleX(${1 / aspect_ratio})`"
   >
     <div
       xmlns="http://www.w3.org/1999/xhtml"
@@ -23,6 +23,7 @@
 import { loading_success } from "@/lib/helpers";
 import { VueRectangle } from "@/lib/rects/rectangle";
 import { advent22Store } from "@/lib/store";
+import { computed } from "vue";
 
 const store = advent22Store();
 
@@ -45,14 +46,11 @@ withDefaults(
   },
 );
 
-function get_bg_aspect_ratio(): number {
+const aspect_ratio = computed(() => {
   if (!loading_success(store.background_image)) return 1;
 
-  return store.background_image.height / store.background_image.width;
+  return store.background_image.aspect_ratio;
-
+});
-  // aspect_ratio is width/height!
-  // return store.background_image.aspect_ratio;
-}
 </script>
 
 <style lang="scss" scoped>

ui/src/components/editor/DoorCanvas.vue

@@ -15,7 +15,7 @@
       force_visible
     />
     <SVGRect
-      v-if="preview_visible()"
+      v-if="preview_visible"
       variant="success"
       :rectangle="preview"
       visible
@@ -27,7 +27,7 @@
 import { Door } from "@/lib/rects/door";
 import { Rectangle } from "@/lib/rects/rectangle";
 import { Vector2D } from "@/lib/rects/vector2d";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
@@ -44,9 +44,7 @@ const MIN_RECT_AREA = 300;
 const state = ref<CanvasState>({ kind: "idle" });
 const preview = ref(new Rectangle());
 
-function preview_visible(): boolean {
+const preview_visible = computed(() => state.value.kind !== "idle");
-  return state.value.kind !== "idle";
-}
 
 function pop_door(point: Vector2D): Door | undefined {
   const idx = model.value.findIndex((rect) => rect.position.contains(point));
@@ -59,7 +57,7 @@ function pop_door(point: Vector2D): Door | undefined {
 }
 
 function draw_start(event: MouseEvent, point: Vector2D) {
-  if (preview_visible()) {
+  if (preview_visible.value) {
     return;
   }
 
@@ -68,17 +66,19 @@ function draw_start(event: MouseEvent, point: Vector2D) {
 }
 
 function draw_finish() {
-  if (state.value.kind !== "drawing" || preview.value.area < MIN_RECT_AREA) {
+  if (state.value.kind !== "drawing") {
     return;
   }
 
-  model.value.push(new Door(preview.value as Rectangle));
+  if (preview.value.area >= MIN_RECT_AREA) {
+    model.value.push(new Door(preview.value as Rectangle));
+  }
 
   state.value = { kind: "idle" };
 }
 
 function drag_start(event: MouseEvent, point: Vector2D) {
-  if (preview_visible()) {
+  if (preview_visible.value) {
     return;
   }
 
@@ -113,7 +113,7 @@ function on_mousemove(event: MouseEvent, point: Vector2D) {
 }
 
 function remove_rect(event: MouseEvent, point: Vector2D) {
-  if (preview_visible()) {
+  if (preview_visible.value) {
     return;
   }
 

ui/yarn.lock

@@ -2602,9 +2602,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
-  version "1.0.30001651"
+  version "1.0.30001760"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz"
-  integrity sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==
+  integrity sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"