fix #1008 by adjusting font-size

(allowing to keep the text keep his proportions to the font)
SVG-Edit · Dec 9, 2024 · 8aa65d5 · 8aa65d5
1 parent 28361b8
commit 8aa65d5
Show file tree

Hide file tree

Showing 14 changed files with 279 additions and 211 deletions.
diff --git a/coverage/coverage-summary.json b/coverage/coverage-summary.json
diff --git a/cypress/__svgSnapshots__/scenario-check tool_bold.svg b/cypress/__svgSnapshots__/scenario-check tool_bold.svg
diff --git a/cypress/__svgSnapshots__/scenario-check tool_clone.svg b/cypress/__svgSnapshots__/scenario-check tool_clone.svg
diff --git a/cypress/__svgSnapshots__/scenario-check tool_italic.svg b/cypress/__svgSnapshots__/scenario-check tool_italic.svg
diff --git a/cypress/__svgSnapshots__/scenario-check tool_text_align_to_page.svg b/cypress/__svgSnapshots__/scenario-check tool_text_align_to_page.svg
diff --git a/cypress/__svgSnapshots__/scenario-check tool_text_change_blur.svg b/cypress/__svgSnapshots__/scenario-check tool_text_change_blur.svg
diff --git a/cypress/__svgSnapshots__/scenario-check tool_text_change_font_size.svg b/cypress/__svgSnapshots__/scenario-check tool_text_change_font_size.svg
diff --git a/cypress/__svgSnapshots__/scenario-check tool_text_change_opacity.svg b/cypress/__svgSnapshots__/scenario-check tool_text_change_opacity.svg
diff --git a/cypress/__svgSnapshots__/scenario-check tool_text_change_stoke_fill_color.svg b/cypress/__svgSnapshots__/scenario-check tool_text_change_stoke_fill_color.svg
diff --git a/cypress/__svgSnapshots__/scenario-check tool_text_change_stroke_width.svg b/cypress/__svgSnapshots__/scenario-check tool_text_change_stroke_width.svg
diff --git a/cypress/__svgSnapshots__/scenario-check tool_text_change_x_y_coordinate.svg b/cypress/__svgSnapshots__/scenario-check tool_text_change_x_y_coordinate.svg
diff --git a/packages/svgcanvas/core/coords.js b/packages/svgcanvas/core/coords.js
@@ -124,7 +124,7 @@ export const remapElement = (selected, changes, m) => {
     case 'image': {
       // Allow images to be inverted (give them matrix when flipped)
       if (elName === 'image' && (m.a < 0 || m.d < 0)) {
-        // Convert to matrix
+        // Convert to matrix if flipped
         const chlist = getTransformList(selected)
         const mt = svgCanvas.getSvgRoot().createSVGTransform()
         mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
@@ -177,6 +177,19 @@ export const remapElement = (selected, changes, m) => {
       const pt = remap(changes.x, changes.y)
       changes.x = pt.x
       changes.y = pt.y
+
+      // Scale font-size
+      let fontSize = selected.getAttribute('font-size')
+      if (!fontSize) {
+        // If not directly set, try computed style
+        fontSize = window.getComputedStyle(selected).fontSize
+      }
+      const fontSizeNum = parseFloat(fontSize)
+      if (!isNaN(fontSizeNum)) {
+        // Assume uniform scaling and use m.a
+        changes['font-size'] = fontSizeNum * Math.abs(m.a)
+      }
+
       finishUp()
 
       // Handle child 'tspan' elements
@@ -197,7 +210,17 @@ export const remapElement = (selected, changes, m) => {
             const childPtY = remap(changes.x, childY).y
             childChanges.y = childPtY
           }
-          if (hasX || hasY) {
+
+          let tspanFS = child.getAttribute('font-size')
+          if (!tspanFS) {
+            tspanFS = window.getComputedStyle(child).fontSize
+          }
+          const tspanFSNum = parseFloat(tspanFS)
+          if (!isNaN(tspanFSNum)) {
+            childChanges['font-size'] = tspanFSNum * Math.abs(m.a)
+          }
+
+          if (hasX || hasY || childChanges['font-size']) {
             assignAttributes(child, childChanges, 1000, true)
           }
         }
@@ -208,6 +231,17 @@ export const remapElement = (selected, changes, m) => {
       const pt = remap(changes.x, changes.y)
       changes.x = pt.x
       changes.y = pt.y
+
+      // Handle tspan font-size scaling
+      let tspanFS = selected.getAttribute('font-size')
+      if (!tspanFS) {
+        tspanFS = window.getComputedStyle(selected).fontSize
+      }
+      const tspanFSNum = parseFloat(tspanFS)
+      if (!isNaN(tspanFSNum)) {
+        changes['font-size'] = tspanFSNum * Math.abs(m.a)
+      }
+
       finishUp()
       break
     }

diff --git a/packages/svgcanvas/core/event.js b/packages/svgcanvas/core/event.js
@@ -570,6 +570,7 @@ const mouseOutEvent = () => {
 * @returns {void}
 */
 const mouseUpEvent = (evt) => {
+  evt.preventDefault()
   moveSelectionThresholdReached = false
   if (evt.button === 2) { return }
   if (!svgCanvas.getStarted()) { return }