ui/src/components/admin/AdminView.vue

@@ -2,14 +2,9 @@
   <ConfigView />
   <CalendarAssistant />
   <DoorMapEditor />
-  <BulmaDrawer header="Vorschau" @open="(ready) => ready()">
-    <UserView />
-  </BulmaDrawer>
 </template>
 
 <script setup lang="ts">
-import UserView from "../UserView.vue";
-import BulmaDrawer from "../bulma/Drawer.vue";
 import CalendarAssistant from "./CalendarAssistant.vue";
 import ConfigView from "./ConfigView.vue";
 import DoorMapEditor from "./DoorMapEditor.vue";

ui/src/components/bulma/Breadcrumbs.vue

@@ -8,7 +8,7 @@
         :class="model === index ? 'is-active' : ''"
         @click.left="model = index"
       >
-        <a :class="model === index ? 'has-text-primary' : ''">
+        <a>
           <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(aspect_ratio * rectangle.left)"
+    :x="Math.round(get_bg_aspect_ratio() * rectangle.left)"
     :y="rectangle.top"
-    :width="Math.round(aspect_ratio * rectangle.width)"
+    :width="Math.round(get_bg_aspect_ratio() * rectangle.width)"
     :height="rectangle.height"
-    :style="`transform: scaleX(${1 / aspect_ratio})`"
+    :style="`transform: scaleX(${1 / get_bg_aspect_ratio()})`"
   >
     <div
       xmlns="http://www.w3.org/1999/xhtml"
@@ -23,7 +23,6 @@
 import { loading_success } from "@/lib/helpers";
 import { VueRectangle } from "@/lib/rects/rectangle";
 import { advent22Store } from "@/lib/store";
-import { computed } from "vue";
 
 const store = advent22Store();
 
@@ -46,11 +45,14 @@ withDefaults(
   },
 );
 
-const aspect_ratio = computed(() => {
+function get_bg_aspect_ratio(): number {
   if (!loading_success(store.background_image)) return 1;
 
-  return store.background_image.aspect_ratio;
+  return store.background_image.height / store.background_image.width;
-});
+
+  // 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 { computed, ref } from "vue";
+import { ref } from "vue";
 
 import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
@@ -44,7 +44,9 @@ const MIN_RECT_AREA = 300;
 const state = ref<CanvasState>({ kind: "idle" });
 const preview = ref(new Rectangle());
 
-const preview_visible = computed(() => state.value.kind !== "idle");
+function preview_visible(): boolean {
+  return state.value.kind !== "idle";
+}
 
 function pop_door(point: Vector2D): Door | undefined {
   const idx = model.value.findIndex((rect) => rect.position.contains(point));
@@ -57,7 +59,7 @@ function pop_door(point: Vector2D): Door | undefined {
 }
 
 function draw_start(event: MouseEvent, point: Vector2D) {
-  if (preview_visible.value) {
+  if (preview_visible()) {
     return;
   }
 
@@ -66,19 +68,17 @@ function draw_start(event: MouseEvent, point: Vector2D) {
 }
 
 function draw_finish() {
-  if (state.value.kind !== "drawing") {
+  if (state.value.kind !== "drawing" || preview.value.area < MIN_RECT_AREA) {
     return;
   }
 
-  if (preview.value.area >= MIN_RECT_AREA) {
+  model.value.push(new Door(preview.value as Rectangle));
-    model.value.push(new Door(preview.value as Rectangle));
-  }
 
   state.value = { kind: "idle" };
 }
 
 function drag_start(event: MouseEvent, point: Vector2D) {
-  if (preview_visible.value) {
+  if (preview_visible()) {
     return;
   }
 
@@ -113,7 +113,7 @@ function on_mousemove(event: MouseEvent, point: Vector2D) {
 }
 
 function remove_rect(event: MouseEvent, point: Vector2D) {
-  if (preview_visible.value) {
+  if (preview_visible()) {
     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.30001760"
+  version "1.0.30001651"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz"
-  integrity sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==
+  integrity sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"