Fix three bugs: font-size units, imported-SVG ungroup, duplicate jPicker dialogs

[jfhenon]

Summary

• Fixes Font-size Property Restriction: No Support for 'pt' Units #949: unit-suffixed attribute values (e.g. font-size="10pt", stroke-width="2px") were silently truncated to a bare number, stripping the unit - a regression from Fixes issue with xy panel  #935.
• Fixes Imported svg can't be ungrouped #953: ungrouping imported SVG content (a <use> referencing a <symbol>, per importSvgString()) took two separate Ungroup actions instead of one, and the right-click context menu's Ungroup entry was hard-disabled for <use> elements entirely.
• Fixes Multiple jPicker-table in Linear Gradient color picker #957: repeatedly double-clicking a gradient stop's color swatch stacked duplicate #jPicker-table elements into the picker's container instead of replacing the previous one.

Root causes & fixes

#949 - changeSelectedAttributeNoUndoMethod (packages/svgcanvas/core/undo.js) used isNaN(parseFloat(newValue)) to decide whether to store a parsed number or the raw string. parseFloat only parses the leading numeric portion of a string, so "10pt" parses to 10 without failing, silently dropping the unit. Switched to Number(newValue), which returns NaN unless the entire string is numeric - correctly rejecting "10pt" while still converting a plain numeric string like "10.5" to a real number (preserving the fix #935 made for #930).

#953 - ungroupSelectedElement (packages/svgcanvas/core/selected-elem.js) called convertToGroup() on a <use>/gsvg-tagged element and returned immediately, so a single Ungroup only swapped the wrapper for an equivalent <g> without ever flattening it. convertToGroup() now returns the group it produces, and ungroupSelectedElement reassigns its local g to that result and falls through to the existing flatten logic instead of returning early. Separately, TopPanel.js's context-menu enable/disable logic only recognized tagName === 'g' as ungroupable, hard-disabling the menu item (via pointer-events: none) for the <use> that imported content actually is - now also enabled for 'use'.

#957 - jQuery.jPicker.js's initialize() unconditionally appends a fresh #jPicker-table into its (persistent, shown/hidden-not-recreated) container on every open, with no check for a pre-existing one in the non-expandable branch used by the gradient stop-color picker. Added the same kind of cleanup already used for the toolbar fill/stroke swatch pickers (#1033), generalized to this container.

Test plan

• npm run lint
• npx vitest run tests/unit - 567 tests pass, including a new regression test file for Font-size Property Restriction: No Support for 'pt' Units #949 (tests/unit/change-selected-attribute-units.test.js) and an updated test for Imported svg can't be ungrouped #953 (tests/unit/selected-elem.test.js)
• npm test (unit + all 81 e2e) - all pass
• npm run build - production build succeeds
• Manually verified Imported svg can't be ungrouped #953 and Multiple jPicker-table in Linear Gradient color picker #957 end-to-end in a real browser (Playwright driving the actual dev server): importing SVG content and clicking the real context-menu Ungroup entry now fully unwraps it into the layer in one action; repeatedly reopening the picker on the same container leaves exactly one #jPicker-table instead of stacking duplicates.

🤖 Generated with Claude Code

Summary by Sourcery

Fix attribute handling, ungrouping of imported SVG content, and gradient color picker behavior, and add regression coverage for these cases.

Bug Fixes:

• Preserve unit-suffixed attribute values like font-size="10pt" and stroke-width="2px" instead of truncating them to bare numbers.
• Ensure a single Ungroup action fully unwraps imported SVG content represented as / and enable Ungroup in the context menu for such elements.
• Prevent duplicate jPicker table elements from accumulating when reopening the gradient stop color picker.

Tests:

• Add a regression test suite to verify changeSelectedAttribute preserves unit suffixes while still converting plain numeric strings.
• Update ungroupSelectedElement tests to assert imported -based content is fully flattened by a single ungroup operation.

[sourcery-ai]

Reviewer's Guide

Refines attribute value handling, imported-SVG ungroup behavior, and jPicker dialog lifecycle, with accompanying regression tests and UI wiring updates.

Sequence diagram for updated imported-SVG ungroup behavior

sequenceDiagram
  actor User
  participant Editor
  participant svgCanvas
  participant convertToGroup

  User->>Editor: clickUngroup()
  Editor->>svgCanvas: ungroupSelectedElement()
  svgCanvas->>svgCanvas: getSelectedElems()
  alt gsvg_or_symbol_on_selected
    svgCanvas->>convertToGroup: convertToGroup(g)
    convertToGroup-->>svgCanvas: g
    svgCanvas->>svgCanvas: flatten_group(g)
  else use_without_dataStorage_symbol
    svgCanvas->>svgCanvas: getHref(g)
    svgCanvas->>svgCanvas: getElementById(href)
    svgCanvas->>svgCanvas: dataStorage.put(symbol)
    svgCanvas->>convertToGroup: convertToGroup(g)
    convertToGroup-->>svgCanvas: g
    svgCanvas->>svgCanvas: flatten_group(g)
  end

Loading

Flow diagram for jPicker container reuse and cleanup

flowchart TD
  A[jPickerMethod called] --> B{isExpandable}
  B -- yes --> C[use new floating container]
  B -- no --> D[container = that]
  D --> E{container has #jPicker-table}
  E -- yes --> F[remove existing #jPicker-table]
  E -- no --> G[skip removal]
  F --> H[create newDiv with controlHtml]
  G --> H
  H --> I[append newDiv children into container]

Loading

File-Level Changes

Change	Details	Files
Ensure changeSelectedAttribute preserves unit-suffixed attribute values while still coercing plain numeric strings.	Replaced parseFloat-based numeric detection with Number() and Number.isNaN to avoid stripping unit suffixes from attribute values like font-size and stroke-width. Kept support for coercing strictly numeric strings to numbers to maintain prior fixes. Added a regression unit test suite verifying unit preservation and numeric coercion behavior for changeSelectedAttribute.	packages/svgcanvas/core/undo.js tests/unit/change-selected-attribute-units.test.js
Make a single Ungroup of imported SVG content fully flatten / wrappers and enable Ungroup in the context menu for such elements.	Updated convertToGroup() to return the created group (or null on unexpected input) and adjusted ungroupSelectedElement() to operate on that returned group instead of returning early. Adjusted ungroupSelectedElement() logic for elements to store symbol metadata, call convertToGroup(), and then continue flattening the resulting group in the same call. Expanded context-menu enablement logic so Ungroup is enabled for both and elements, matching ungroupSelectedElement() capabilities. Updated the selected-elem regression test to assert that a single ungroupSelectedElement() fully unwraps imported -based content into its children rather than leaving an intermediate .	packages/svgcanvas/core/selected-elem.js src/editor/panels/TopPanel.js tests/unit/selected-elem.test.js
Prevent duplicate jPicker tables from accumulating when reopening the non-expandable gradient stop color picker.	In jPicker.initialize(), added a pre-initialization cleanup that removes any existing #jPicker-table inside the persistent container before injecting new controlHtml. Reused the existing pattern used for toolbar swatch pickers but applied it to the gradient stop picker container, ensuring only a single table exists between opens.	src/editor/components/jgraduate/jQuery.jPicker.js

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#949	Preserve unit-suffixed font-size values (e.g. '10pt', '10px') and other attributes when changed, instead of truncating them to bare numbers due to parseFloat-based coercion in changeSelectedAttributeNoUndoMethod.	✅
#953	Enable imported SVG content (represented as referencing a ) to be fully ungrouped/flattened in a single Ungroup action, including from the context menu.	✅
#957	Ensure the linear/radial gradient color picker does not create or show multiple #jPicker-table elements when the gradient stop color picker is opened multiple times, so only a single active picker table exists per container.	✅

Possibly linked issues

• Font-size Property Restriction: No Support for 'pt' Units #949: PR changes undo handling to preserve unit-suffixed attribute values like font-size="10pt", directly fixing this regression.
• Multiple jPicker-table in Linear Gradient color picker #957: The PR removes duplicate jPicker tables in gradient stop color dialogs, preventing stacked, dead color picker panels.

---

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. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the 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 exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

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 - I've reviewed your changes and they look great!

---

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.}