fix automatic line breaking on chrome, add mobile support

1785e024 · Alexa Valentová · 73381f86 · 1785e024 · 1785e024 · 1785e024
Commit 1785e024 authored Mar 4, 2024 by Alexa Valentová
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,14 @@
    <link rel="icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="https://styleguide.pirati.cz/2.12.x/css/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>
+      ;(function () {
+          var src = '//cdn.jsdelivr.net/npm/eruda';
+          if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
+          document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
+          document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
+      })();
+    </script>
    <title>Generátor grafiky</title>
  </head>
  <body>

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
  "version": "0.0.0",
  "private": true,
  "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",

--- a/frontend/src/components/canvas/Canvas.vue
+++ b/frontend/src/components/canvas/Canvas.vue
@@ -75,7 +75,7 @@ export default {
                </button>
            </div>
        </div>
-        <div class="object-contain">
+        <div class="object-contain h-[115vw] md:h-[unset]">
            <canvas
                ref="canvas"
                class="w-full border border-gray-300 drop-shadow-md duration-150"

--- a/frontend/src/components/canvas/utils.js
+++ b/frontend/src/components/canvas/utils.js
@@ -85,12 +85,23 @@ const transformTextLineBreaks = (
            }
        );
-        currentWidth += wordText.width
+        // This is really ugly, I have no idea why Chromium thinks the text is shorter than it really is.
+        // (Or why Firefox thinks it's longer.)
+        // But, it works.
+        currentWidth += wordText.width * (
+            (!!window.chrome)
+            ? 1.183
+            : 1
+        )
        if (!skipNewLineGeneration && currentWidth > maxWidth) {
            if (
                ["a", "i", "o", "u", "s", "se", "v", "z"].
-                includes(splitWords[wordPosition - 1].replace("*", ""))
+                includes(splitWords[
+                    (wordPosition !== 0)
+                    ? (wordPosition - 1)
+                    : (wordPosition)
+                ].replace("*", ""))
            ) { // Previous word is not a, i, o, u, s, ...
                const lineBreakPosition = (
                    positionWithinString
@@ -100,7 +111,11 @@ const transformTextLineBreaks = (
                    )
                    - currentWord.length
                    - 1
-                    - splitWords[wordPosition - 1].length
+                    - splitWords[
+                        (wordPosition !== 0)
+                        ? (wordPosition - 1)
+                        : (wordPosition)
+                    ].length
                )
                text = setCharAt(text, lineBreakPosition, "\n")

--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -21,7 +21,6 @@ const router = createRouter({
 router.beforeEach(
    (to, from, next) => {
-        // BEGIN Title
        document.title = 'Generátor grafiky'
        if (to.meta.title) {

--- a/package-lock.json
+++ b/package-lock.json
@@ -2,9 +2,5 @@
  "name": "graphics-generator",
  "lockfileVersion": 3,
  "requires": true,
-  "packages": {
+  "packages": {}
-    "": {
-      "name": "graphics-generator"
-    }
-  }
 }