added style for non solution

client/src/api/index.ts

@@ -1,19 +1,17 @@
 import { Grid } from 'grid';
 import { Idatabase, SupaDB, setDatabase } from 'database';
 import axios from 'axios';
-const debugMigration = false;
+const debugMigration = true;
 class API {
   public idb: Idatabase;
   public supadb: SupaDB;
   public _mode: string;
   constructor(mode: string = 'unknown') {
-    let prepromise: Promise<unknown> = Promise.resolve();
-    if (debugMigration) {
-      prepromise = prepromise
-        .then(() => axios.get('/test-db.json'))
-        .then(({ data }) => setDatabase(data, 4))
-    }
-    this.idb = new Idatabase(prepromise);
+    // axios.get('/test-db-5.json')
+    // .then(({ data }) => {
+    //   setDatabase(data, 5)
+    // });
+    this.idb = new Idatabase();
     this.supadb = new SupaDB('https://tnvxmrqhkdlynhtdzmpw.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRudnhtcnFoa2RseW5odGR6bXB3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODIyNTM0MTEsImV4cCI6MTk5NzgyOTQxMX0.4PczPPAxbkwBvig7NTHNbR8JumuwPPqfyS_kGnkxP5I');
     this._mode = mode;
   }

client/src/components/fonts/FontLoader.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref } from "vue";
+import { defineProps, onMounted, ref } from "vue";
 import { watch } from "vue";
 import { loadFont } from "./load-font";
 import axios from "axios";
@@ -15,7 +15,8 @@ const props = defineProps<{
   isEmbedded?: boolean;
 }>();
 const url = ref<string | null>(null);
-watch([props], () => {
+
+function update() {
   const { value } = props;
   if (isGoogleFont(value)) {
     let weightUrl = `https://fonts.googleapis.com/css?family=${value.family}:${value.weight}`;
@@ -31,6 +32,12 @@ watch([props], () => {
   }
   url.value = null;
   loadFont(value);
+}
+watch([props], () => {
+  update();
+});
+onMounted(() => {
+  update();
 });
 </script>
 

client/src/components/fonts/FontSelector.vue

@@ -26,6 +26,8 @@
         v-else
         :role="`${rolePrefix}-size`"
         v-model:value="value.size"
+        :precision="2"
+        :step="0.1"
       />
     </n-form-item>
     <n-form-item :label="$t('forms.color')" path="color">

client/src/components/fonts/load-font.ts

@@ -1,7 +1,18 @@
 import { LocalFont } from "grid";
+import { api } from "../../api";
+export const loadedFonts = new Set();
 
 export function loadFont(font: LocalFont) {
-  const fontface = new FontFace(font.family, `url(${font.content})`);
-  return fontface.load()
-    .then((fontface) => document.fonts.add(fontface));
+  if (loadedFonts.has(font.family)) {
+    return Promise.resolve();
+  }
+  return api.db.getFont(font.family)
+    .then((font) => {
+      const fontface = new FontFace(font.family, `url(${font.content})`);
+      return fontface.load();
+    })
+    .then((fontface) => {
+      loadedFonts.add(font.family);
+      document.fonts.add(fontface);
+    });
 }

client/src/components/forms/GridStyleForm.vue

@@ -51,6 +51,16 @@
           <n-input-number role="space" v-model:value="value.grid.spaceSize" />
         </n-form-item>
       </div>
+      <h3>{{ $t("forms.solutions") }}</h3>
+      <FontSelector v-model="value.solutions" role-prefix="solutions" />
+      <n-form-item :label="$t('forms.offset')" path="top">
+        <n-input-number
+          v-model:value="value.solutions.top"
+          :step="0.5"
+          :precision="1"
+          role="solutions-top"
+        />
+      </n-form-item>
       <div v-if="definition">
         <h3>{{ $t("forms.definitions") }}</h3>
         <FontSelector v-model="value.definition" rolePrefix="definition" />
@@ -126,7 +136,9 @@ const emit = defineEmits<{
   (event: "update:modelValue", value: GridStyle): void;
 }>();
 const value = useModel<GridStyle>(props, emit);
-
+watch(value.value, () => {
+  emit("update:modelValue", value.value);
+});
 </script>
 
 <style scoped>

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

@@ -13,7 +13,8 @@
     @mouseout="onMouseLeave"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <FontLoader :value="style.definition"/>
+    <FontLoader :value="style.definition" />
+    <FontLoader v-if="isSolutionStyle(style)" :value="style.solutions" />
     <defs></defs>
     <g
       class="cells"
@@ -60,10 +61,13 @@
           </text>
           <text
             :x="xText(cell)"
-            :y="yText(cell) + (6 * cellWidth(style)) / 7"
-            :font-family="textFont"
+            :y="yText(cell) + cellWidth(style) / 2 + textTopOffset"
+            alignment-baseline="central"
+            dominant-baseline="center"
+            :font-family="textFontFamily"
+            :font-weight="textFontWeight"
+            :fill="textFontColor"
             :font-size="textSize"
-            dominant-baseline="alphabetic"
             v-else-if="!cell.definition && exportOptions.texts"
           >
             {{ cell.text || cell.suggestion }}
@@ -182,6 +186,8 @@ import {
   getLines,
   arrowPositions,
   ArrowDir,
+  SolutionStyle,
+  isSolutionStyle,
 } from "grid";
 import { ExportOptions } from "../../types";
 import { getCellClass } from "../../js/utils";
@@ -197,7 +203,7 @@ const props = defineProps<{
   /**
    * The style of the grid
    */
-  style: GridStyle;
+  style: SolutionStyle | GridStyle;
   /**
    * The focused cell (can be nullCell)
    */
@@ -237,9 +243,20 @@ const lineColor = computed(() => props.style.grid.borderColor);
 const spaceStroke = computed(() => props.style.grid.spaceSize);
 const outerLineStroke = computed(() => props.style.grid.outerBorderSize);
 const outerLineColor = computed(() => props.style.grid.outerBorderColor);
-const defSize = computed(() => props.style.definition.size);
-const textSize = computed(() => props.style.grid.cellSize);
-const textFont = computed(() => `roboto`);
+const defSize = computed(
+  () => (props.style.grid.cellSize / 4) * props.style.definition.size
+);
+const textSize = computed(() => {
+  return (
+    (isSolutionStyle(props.style) ? props.style.solutions.size : 1) *
+    props.style.grid.cellSize
+  );
+});
+const textFontFamily = computed(() => props.style.solutions.family);
+const textFontWeight = computed(() => props.style.solutions.weight);
+const textFontColor = computed(() => props.style.solutions.color);
+const textTopOffset = computed(() => props.style.solutions.top);
+
 const defFontFamily = computed(() => `${props.style.definition.family}`);
 const defFontWeight = computed(() => `${props.style.definition.weight}`);
 
@@ -313,8 +330,7 @@ const splits = computed(() =>
         ratio * cellWidth(props.style);
       return {
         x1: cell.x * cellAndBorderWidth(props.style),
-        x2:
-          cell.x * cellAndBorderWidth(props.style) + cellWidth(props.style),
+        x2: cell.x * cellAndBorderWidth(props.style) + cellWidth(props.style),
         y1: y,
         y2: y,
       };
@@ -352,9 +368,7 @@ const spaces = computed(() => {
 });
 
 function xText(cell: Cell) {
-  return (
-    cell.x * cellAndBorderWidth(props.style) + cellWidth(props.style) / 2
-  );
+  return cell.x * cellAndBorderWidth(props.style) + cellWidth(props.style) / 2;
 }
 function yText(cell: Cell) {
   return cell.y * cellAndBorderWidth(props.style);

client/src/i18n/languages/en-en.ts

@@ -91,6 +91,7 @@ export const lang = {
     randomize: "Randomize",
     fontFamily: "Font family",
     fontWeight: "Font weight",
+    offset: "Offset",
   },
   tooltips: {
     incomplete: "is incomplete",

client/src/i18n/languages/es-es.ts

@@ -91,6 +91,7 @@ export const lang = {
         randomize: "Randomizar",
         fontFamily: "Fuente",
         fontWeight: "Peso",
+        offset: "Desplazamiento",
     },
     tooltips: {
         incomplete: "esta incompleto",

client/src/i18n/languages/fr-fr.ts

@@ -91,6 +91,7 @@ export const lang = {
         randomize: "Regénérer",
         fontFamily: "Police",
         fontWeight: "Epaisseur",
+        offset: "Décalage",
 
     },
     tooltips: {

client/src/views/Fonts.vue

@@ -57,9 +57,7 @@ function onUpload(filesContents: [string, string][]) {
         .replace(/\..*/, "")
         .replace(/[^\w]/gi, "")
         .replace(/[0-9]+/gi, "");
-      debugger;
       return api.db.pushFont({
-        id: uuid(),
         family,
         updated: Date.now(),
         content: dataURL,

client/src/views/editors/SolutionsEditor.vue

@@ -2,7 +2,7 @@
   <Layout>
     <template #left-panel v-if="grids.length && style">
       <OptionsForm v-model="style" @update:modelValue="save" grid format>
-        <SolutionsForm v-model="style" @update:modelValue="save" />
+        <SolutionsForm v-model="style" @update:modelValue="save"/>
       </OptionsForm>
     </template>
     <template #body>
@@ -81,10 +81,11 @@ function fetch() {
 }
 
 function save() {
+  console.log("on update");
   clearTimeout(saveTimeout.value);
   saveTimeout.value = +setTimeout(() => {
     if (!style.value) return;
-    // api.db.pushStyle(toRaw(style.value) as unknown as SolutionStyle);
+    api.db.pushStyle(toRaw(style.value) as unknown as SolutionStyle);
   }, 100);
 }
 

client/src/views/editors/StyleEditor.vue

@@ -60,6 +60,7 @@ function fetch() {
 }
 
 function onUpdate() {
+  console.log('on update');
   clearTimeout(saveTimeout.value);
   saveTimeout.value = setTimeout(() => {
     if (!style.value) return;