watch route change on print + better textare in defs

client/src/components/ExportModal.vue

@@ -3,6 +3,7 @@
     {{ $t("buttons.exportsvg") }}
   </n-button>
   <n-modal
+    v-if="grids && style && solutionsStyle && grids.length"
     class="exportmodal"
     v-model:show="visible"
     preset="dialog"
@@ -14,7 +15,6 @@
     <div class="modalbody">
       <div class="exporter">
         <SVGGrid
-          v-if="grids && style && grids.length"
           :grid="grids[selectedIndex]"
           dir="horizontal"
           :export-options="exportOptions"

client/src/components/svg-renderer/GridInput.vue

@@ -113,7 +113,7 @@ const props = defineProps<{
    */
   zoom: number;
 }>();
-const { cellSize, textSize, textFont, defSize, defFont } = useSvgSizes(props);
+const { cellSize, textSize, textFont, defSize, defSizePx, defFont } = useSvgSizes(props);
 const transform = computed(() => useTransform(props, props.cell));
 function onChange(evt: Event) {
   const { x, y } = props.cell;
@@ -288,9 +288,9 @@ textarea:focus-visible {
   color: #777;
 }
 .definition {
-  line-height: v-bind(defSize);
-  font-size: v-bind(defSize);
   font: v-bind(defFont);
+  line-height: v-bind(defSizePx);
+  text-wrap: nowrap;
   background: #aaa;
 }
 

client/src/components/svg-renderer/utils.ts

@@ -17,14 +17,15 @@ export function useSvgSizes(props: Props) {
   const cellSizeC = computed(() => cellSize(props));
   const textSize = computed(() => props.style.grid.cellSize * (props.zoom || 1));
   const textFont = computed(() => `${textSize.value}px roboto`);
-  const defSize = computed(() => props.style.definition.size * (props.zoom || 1));
-  const defFont = computed(() => `${defSize.value}px ${props.style.definition.font}`);
+  const defSize = computed(() => props.style.grid.cellSize / 4 * props.style.definition.size * (props.zoom || 1));
+  const defFont = computed(() => `${defSize.value}px ${props.style.definition.family}`);
 
   return {
     cellSize: cellSizeC,
     textSize,
     textFont,
     defSize,
+    defSizePx: `${Math.floor(defSize.value)}px`,
     defFont,
   };
 }

client/src/views/print/Book.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import { Grid, GridStyle, SolutionStyle } from "grid";
 import { ExportOptions } from "../../types";
@@ -56,6 +56,9 @@ function fetch() {
 onMounted(() => {
   fetch().then(() => usePrintMessage());
 });
+watch([route], () => {
+  fetch();
+});
 onUnmounted(() => {
   cleanupPrintMessage();
 });