Fix text scale #1008

[jfhenon]

PR description

Checklist

Note that we require UI tests to ensure that the added feature will not be
nixed by some future fix and that there is at least some test-as-documentation
to indicate how the fix or enhancement is expected to behave.

• - Added Cypress UI tests
• - Ran npm test, ensuring linting passes and that Cypress UI tests keep
  coverage to at least the same percent (reflected in the coverage badge
  that should be updated after the tests run)
• - Added any user documentation. Though not required, this can be a big
  help both for future users and for the PR reviewer.

Summary by Sourcery

Fix text scaling issue by adjusting font-size based on transformation matrix and improve code readability in text-actions.js. Update package dependencies to their latest versions.

Bug Fixes:

• Fix text scaling issue by adjusting font-size based on transformation matrix.

Enhancements:

• Improve code readability by reformatting and cleaning up comments and code structure in text-actions.js.

Build:

• Update package dependencies to their latest versions, including i18next, @cypress/code-coverage, cypress, and rollup.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR implements text scaling functionality when transforming text elements, along with some code formatting improvements and dependency updates. The key changes ensure that font sizes are properly scaled when text elements are transformed, maintaining visual consistency.

Class diagram for text scaling changes

classDiagram
    class SvgCanvas {
        +textActionsMethod()
    }
    class textActionsMethod {
        +setCursor(index: Integer)
        +setSelection(start: Integer, end: Integer, skipInput: boolean)
        +getIndexFromPoint(mouseX: Float, mouseY: Float) Integer
        +setCursorFromPoint(mouseX: Float, mouseY: Float)
        +setEndSelectionFromPoint(x: Float, y: Float, apply: boolean)
        +screenToPt(xIn: Float, yIn: Float) module:math.XYObject
        +ptToScreen(xIn: Float, yIn: Float) module:math.XYObject
        +selectAll(evt: Event)
        +selectWord(evt: Event)
        +select(target: Element, x: Float, y: Float)
        +start(elem: Element)
        +mouseDown(evt: external:MouseEvent, mouseTarget: Element, startX: Float, startY: Float)
        +mouseMove(mouseX: Float, mouseY: Float)
        +mouseUp(evt: external:MouseEvent, mouseX: Float, mouseY: Float)
        +toEditMode(x: Float, y: Float)
        +toSelectMode(selectElem: boolean|Element)
        +setInputElem(elem: Element)
        +clear()
        +init(_inputElem: Element)
    }
    SvgCanvas --> textActionsMethod

    class remapElement {
        +remapElement(selected: Element, changes: Object, m: Object)
    }
    remapElement : +scale font-size
    remapElement : +handle tspan font-size scaling

    SvgCanvas --> remapElement

Loading

File-Level Changes

Change	Details	Files
Added text scaling functionality when transforming text elements	Added font-size scaling for text elements based on transformation matrix Added font-size scaling support for child tspan elements Added computed style fallback for font-size when not directly set Added uniform scaling using matrix.a value for font size calculations	packages/svgcanvas/core/coords.js
Added event handling improvement for mouse events	Added preventDefault() call in mouseUpEvent to prevent unwanted default behaviors	packages/svgcanvas/core/event.js
Code formatting and style improvements	Improved code formatting and indentation Updated comments for clarity Reorganized import statements	packages/svgcanvas/core/text-actions.js
Package dependencies update	Updated i18next from 23.16.5 to 24.0.5 Updated cypress from 13.15.2 to 13.16.1 Updated rollup from 4.25.0 to 4.28.1 Updated @cypress/code-coverage from 3.13.6 to 3.13.8	package.json package-lock.json

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @jfhenon - I've reviewed your changes and they look great!

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 1 issue found
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

issue (complexity): Consider extracting the repeated font-size scaling logic into a reusable helper function

The font-size scaling logic is duplicated in three places. Consider extracting it to a helper function:

function getScaledFontSize(element, scaleFactorA) {
  let fontSize = element.getAttribute('font-size') || window.getComputedStyle(element).fontSize;
  const fontSizeNum = parseFloat(fontSize);
  return !isNaN(fontSizeNum) ? fontSizeNum * Math.abs(scaleFactorA) : null;
}

Then simplify the text/tspan handling:

case 'text': {
  const pt = remap(changes.x, changes.y);
  changes.x = pt.x;
  changes.y = pt.y;

  const scaledFontSize = getScaledFontSize(selected, m.a);
  if (scaledFontSize) changes['font-size'] = scaledFontSize;

  finishUp();

  // Handle child tspans
  selected.querySelectorAll('tspan').forEach(child => {
    const childChanges = {};
    if (child.hasAttribute('x')) {
      childChanges.x = remap(convertToNum('x', child.getAttribute('x')), changes.y).x;
    }
    if (child.hasAttribute('y')) {
      childChanges.y = remap(changes.x, convertToNum('y', child.getAttribute('y'))).y;
    }

    const scaledChildFontSize = getScaledFontSize(child, m.a);
    if (scaledChildFontSize) childChanges['font-size'] = scaledChildFontSize;

    if (Object.keys(childChanges).length > 0) {
      assignAttributes(child, childChanges, 1000, true);
    }
  });
  break;
}

This reduces duplication while keeping the same functionality. The helper function makes the scaling logic more maintainable and the forEach loop flattens the tspan handling.