From 1785e024703d912f1363497ec1775c72d64f1db5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <tomas@imaniti.org>
Date: Mon, 4 Mar 2024 15:12:22 +0100
Subject: [PATCH] fix automatic line breaking on chrome, add mobile support
---
frontend/index.html | 8 ++++++++
frontend/package.json | 2 +-
frontend/src/components/canvas/Canvas.vue | 2 +-
frontend/src/components/canvas/utils.js | 21 ++++++++++++++++++---
frontend/src/router/index.js | 1 -
package-lock.json | 6 +-----
6 files changed, 29 insertions(+), 11 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 809c929a..a54c0bea 100644
--- 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>
diff --git a/frontend/package.json b/frontend/package.json
index 06e9917a..855357d5 100644
--- 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",
diff --git a/frontend/src/components/canvas/Canvas.vue b/frontend/src/components/canvas/Canvas.vue
index 6b535cde..591b3203 100644
--- 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"
diff --git a/frontend/src/components/canvas/utils.js b/frontend/src/components/canvas/utils.js
index 60ae4610..4645b1e1 100644
--- 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")
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 5ede14b3..9cd3a95a 100644
--- 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) {
diff --git a/package-lock.json b/package-lock.json
index 808442b6..994e592c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,9 +2,5 @@
"name": "graphics-generator",
"lockfileVersion": 3,
"requires": true,
- "packages": {
- "": {
- "name": "graphics-generator"
- }
- }
+ "packages": {}
}
--
GitLab