Merge branch 'develop' into plausible

Leo-Nicolle · Mar 31, 2024 · 68258a8 · 68258a8
2 parents 191120a + e5ad064
commit 68258a8
Show file tree

Hide file tree

Showing 14 changed files with 165 additions and 88 deletions.
diff --git a/client/src/components/Book.vue b/client/src/components/Book.vue
@@ -2,9 +2,9 @@
   <div class="book" v-if="grids && style && solutionStyle">
     <GridPaper v-for="(grid, i) in grids" :key="grid.id" :grid="grid" :style="style" :exportOptions="gridExport"
       :pagination="solutionStyle.pagination" :page="solutionStyle.pagination.startIdx + i" />
-    <IndexPaper :grids="grids" :solutionStyle="solutionStyle" :exportOptions="solutionExport"
+    <IndexPaper :grids="grids" :solutionStyle="solutionStyle" :format="style.paper" :exportOptions="solutionExport"
       :page="solutionStyle.pagination.startIdx + grids.length" @pageCount="evt => indexPages = evt" />
-    <SolutionPaper :grids="grids" :solutionStyle="solutionStyle" :exportOptions="solutionExport"
+    <SolutionPaper :grids="grids" :solutionStyle="solutionStyle" :format="style.paper" :exportOptions="solutionExport"
       :page="solutionStyle.pagination.startIdx + grids.length + indexPages" />
   </div>
 </template>
@@ -61,7 +61,7 @@ const solutionExport = computed(() => ({
     splits: false,
     spaces: false,
     definitions: false,
-    cellsBackground: false
+    cellsBackground: false,
   },
   ...props.exportOptions,
 }));

diff --git a/client/src/components/GridPaper.vue b/client/src/components/GridPaper.vue
@@ -1,19 +1,8 @@
 <template>
-  <Paper
-    :format="style.paper"
-    :showMargins="exportOptions.margins"
-    :showPagination="!!exportOptions.pagination"
-    :pagination="pagination"
-    :pageNumber="page"
-  >
-    <SVGGrid
-      v-if="grid && style"
-      :grid="grid"
-      :focus="nullCell"
-      dir="horizontal"
-      :style="style"
-      :export-options="exportOptions"
-    />
+  <Paper :format="style.paper" :showMargins="exportOptions.margins" :showPagination="!!exportOptions.pagination"
+    :pagination="pagination" :pageNumber="page" body-full-height>
+    <SVGGrid v-if="grid && style" :grid="grid" :focus="nullCell" dir="horizontal" :style="style"
+      :export-options="exportOptions" />
   </Paper>
 </template>
 
@@ -44,5 +33,4 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="less">
-</style>
+<style lang="less"></style>
diff --git a/client/src/components/Paper.vue b/client/src/components/Paper.vue
@@ -49,6 +49,10 @@ const props = defineProps<{
    * Class to add to the body
    */
   bodyClass?: string;
+  /**
+   * Wether body takes full height or not
+   */
+  bodyFullHeight?: boolean;
   pageNumber?: number;
   showPagination: boolean;
   pagination?: PaginationStyle;
@@ -96,6 +100,25 @@ const padding = computed(() => {
   const { top, left, right, bottom } = props.format.margin;
   return [top, right, bottom, left].map((m) => `${m}cm`).join(" ");
 });
+const maxHeight = computed(() => {
+  const p = props.pagination;
+  const mb = p ? p.margin.bottom : 'null';
+  const ms = p ? p.size : 'null';
+  const { top, bottom } = props.format.margin;
+  const toRemove = [
+    `${top}cm`,
+    `${bottom}cm`,
+    `${mb}`,
+    `${ms}`
+  ]
+    .filter(e => e !== 'null')
+    .join(' - ');
+  return `calc(${pageHeight.value} - ${toRemove})`;
+});
+const height = computed(() => {
+  return props.bodyFullHeight ? maxHeight.value : "unset";
+
+});
 const formatStyle = computed(() => {
   if (!props.format) return "";
   return `${props.format.width}cm ${props.format.height}cm`;
@@ -138,7 +161,8 @@ body {
       flex-direction: column;
       align-items: center;
       justify-content: space-around;
-      height: 100%;
+      max-height: v-bind(maxHeight);
+      height: v-bind(height);
       width: 100%;
     }
 

diff --git a/client/src/components/Solutions.vue b/client/src/components/Solutions.vue
@@ -1,13 +1,14 @@
 <template>
   <div v-if="grids && solutionStyle">
     <FontLoader :value="solutionStyle.grids.gridN" />
-    <Paper v-for="(gs, i) in gridsPerPage" :key="i" :format="solutionStyle.paper" :showMargins="exportOptions.margins"
-      :page-number="page + i" :showPagination="exportOptions.pagination" :pagination="solutionStyle.pagination">
+    <Paper v-for="(gs, i) in gridsPerPage" :key="i" :format="printFormat" :showMargins="exportOptions.margins"
+      :page-number="page + i" :showPagination="exportOptions.pagination" body-full-height
+      :pagination="solutionStyle.pagination">
       <div class="grids">
         <div v-for="(grid, j) in gs" :key="j" class="grid-c">
           <span class="gridN">{{ j + solutionStyle.pagination.startIdx }}</span>
-          <SVGGrid :grid="grid" :focus="nullCell" dir="horizontal" :style="solutionStyle" :export-options="exportOptions"
-            :export-style="exportOptions" />
+          <SVGGrid :grid="grid" :focus="nullCell" dir="horizontal" :style="solutionStyle"
+            :export-options="exportOptions" :export-style="exportOptions" />
         </div>
       </div>
     </Paper>
@@ -19,7 +20,7 @@ import { defineProps, defineEmits } from "vue";
 import SVGGrid from "./svg-renderer/Grid.vue";
 import Paper from "./Paper.vue";
 import FontLoader from "./fonts/FontLoader.vue";
-import { Grid, nullCell, SolutionStyle } from "grid";
+import { Format, Grid, nullCell, SolutionStyle } from "grid";
 import { computed } from "vue";
 import { ExportOptions } from "../types";
 import { getFont } from "../js/useFont";
@@ -44,18 +45,25 @@ const props = defineProps<{
    * What to export
    */
   exportOptions: ExportOptions;
+
+  format?: Format;
   /**
    * number of the first page
    */
   page: number;
 }>();
+const printFormat = computed(() => props.format || props.solutionStyle.paper);
 const rows = computed(() => {
   if (!props.solutionStyle) return "";
-  return `repeat(${props.solutionStyle.grids.rows},0)`;
+  const r = props.solutionStyle.grids.rows;
+  const percent = Math.floor(100 / r);
+  return `repeat(${r}, ${percent}%)`;
 });
 const cols = computed(() => {
   if (!props.solutionStyle) return "";
-  return `repeat(${props.solutionStyle.grids.cols},0)`;
+  const r = props.solutionStyle.grids.cols;
+  const percent = Math.floor(100 / r);
+  return `repeat(${r}, ${percent}%)`;
 });
 const gridNFont = computed(() => getFont(props.solutionStyle.grids.gridN));
 const gridNColor = computed(() => {

diff --git a/client/src/components/WordsIndex.vue b/client/src/components/WordsIndex.vue
@@ -1,19 +1,21 @@
 <template>
   <div v-if="grids && solutionStyle">
-
+    <!-- <button @click="refresh"> Refresh</button> -->
     <FontLoader :value="solutionStyle.grids.gridN" />
     <FontLoader :value="solutionStyle.words" />
-    <Paper v-for="(words, i) in layout.wordsPerPage" :key="i" :format="solutionStyle.paper"
-      :showMargins="exportOptions.margins" :showPagination="exportOptions.pagination" :pageNumber="page + i"
-      :pagination="solutionStyle.pagination" bodyClass="body-index">
-      <span class="words" ref="wordsContainer">
+    <Paper v-for="(words, i) in layout.wordsPerPage" :key="i" :format="printFormat" :showMargins="exportOptions.margins"
+      :showPagination="exportOptions.pagination" :pageNumber="page + i" :pagination="solutionStyle.pagination"
+      bodyClass="body-index">
+      <span class="words" ref="wordsContainer"
+        :style="i === layout.wordsPerPage.length - 1 ? { height: `${layout.lastPageHeight}px` } : null">
         <span v-for="(word, j) in words" :class="typeof word === 'number' ? 'size' : 'word'" :key="word">
           {{ word }}
         </span>
       </span>
     </Paper>
     <Teleport to="#outside">
-      <Paper class="paper ruler" :format="solutionStyle.paper" :showMargins="true" :showPagination="true" :pageNumber="1">
+      <Paper class="paper ruler" :format="solutionStyle.paper" :showMargins="true" :showPagination="true"
+        :pageNumber="1" :pagination="solutionStyle.pagination">
         <span class="words ruler" ref="ruler"> </span>
       </Paper>
     </Teleport>
@@ -22,7 +24,7 @@
 
 <script setup lang="ts">
 import { defineProps, ref, defineEmits, watch } from "vue";
-import { Grid, getAllWords, SolutionStyle } from "grid";
+import { Grid, getAllWords, SolutionStyle, Format } from "grid";
 import { computed } from "vue";
 import Paper from "./Paper.vue";
 import FontLoader from "./fonts/FontLoader.vue";
@@ -47,20 +49,20 @@ const props = defineProps<{
    * The styles to render list
    */
   solutionStyle: SolutionStyle;
+  format?: Format;
   page: number;
 }>();
 
 const emit = defineEmits<{
   (event: "pageCount", value: number): void;
 }>();
-
+const printFormat = computed(() => props.format || props.solutionStyle.paper);
 const wordFont = computed(() => getFont(props.solutionStyle.words));
 const wordsColor = computed(() => props.solutionStyle.words.color);
 const sizeFont = computed(() => getFont(props.solutionStyle.size));
 const sizeColor = computed(() => props.solutionStyle.size.color);
-const layout = ref<{ wordsPerPage: (number | string)[][]; heights: string[]; }>({
+const layout = ref<{ wordsPerPage: (number | string)[][]; lastPageHeight?: number; }>({
   wordsPerPage: [],
-  heights: [],
 });
 const columnGap = 10;
 const gap = computed(() => `${columnGap}px`);
@@ -80,9 +82,29 @@ function nodesBSStart(
   return start;
 }
 
+function findHeightLastPage(ruler: HTMLDivElement, maxWidth: number,) {
+  let start = 0;
+  let end = ruler.getBoundingClientRect().height;
+  const lastChild = ruler.lastElementChild as HTMLDivElement;
+  while (start <= end) {
+    const middle = (start + end) >>> 1;
+    ruler.style.height = `${middle}px`;
+    const { x, width } = lastChild.getBoundingClientRect();
+    const right = x + width;
+    if (right < maxWidth) {
+      end = middle - 1;
+    }
+    else {
+      start = middle + 1;
+    }
+  }
+  ruler.style.height = ``;
+  return start;
+}
+
 function refresh() {
   if (!props.grids || !ruler.value) {
-    layout.value = { wordsPerPage: [], heights: [] };
+    layout.value = { wordsPerPage: [] };
     return;
   }
   const words = Array.from(getAllWords(props.grids))
@@ -118,24 +140,23 @@ function refresh() {
         allTexts.push(word);
       });
     });
-
-  // find the first node outside boundaries: 
-  const nodes = Array.from(r.children) as HTMLDivElement[];
-  const maxX = nodes[nodes.length - 1].getBoundingClientRect().x;
-  const pages = Math.ceil(maxX / W);
-  const indexes = [0];
   const wordsPerPage = [];
-  for (let i = 0; i < pages; i++) {
-    indexes.push(nodesBSStart(nodes, 0, nodes.length - 1, startX + (i + 1) * W - tolerance));
-    wordsPerPage.push(allTexts.slice(indexes[i], indexes[i + 1]));
-  }
-  if (indexes[indexes.length - 1] < allTexts.length - 1) {
-    wordsPerPage.push(wordsPerPage.slice(indexes.length - 1));
+  let offset = 0;
+  let lastPageHeight = 0;
+  while (r.children.length) {
+    const nodes = Array.from(r.children) as HTMLDivElement[];
+    const lastIndex = nodesBSStart(nodes, 0, nodes.length - 1, startX + W - tolerance);
+    wordsPerPage.push(allTexts.slice(offset, offset + lastIndex));
+    if (lastIndex === nodes.length) {
+      lastPageHeight = findHeightLastPage(r, startX + W - tolerance);
+    }
+    offset += lastIndex;
+    nodes.slice(0, lastIndex).forEach(n => r.removeChild(n));
   }
-  // r.innerHTML = "";
+  r.innerHTML = "";
   layout.value = {
     wordsPerPage,
-    heights: ['100%']
+    lastPageHeight
   };
   emit('pageCount', wordsPerPage.length);
 }
@@ -188,8 +209,6 @@ props.exportOptions], () => {
   z-index: 1000;
 }
 
-.words.ruler {}
-
 .size {
   font: v-bind(sizeFont);
   color: v-bind(sizeColor);