feat: Unified SVG shape editor — circle, polygon, polyline, path, ellipse

[Copilot]

The designer had no point-editing support for <circle>, <polygon>, <polyline> elements, and the existing path/ellipse editors were implemented but never registered in the default service bootstrap.

Changes

SvgElementExtension — new element type support

• SVGCircleElement: renders 4 cardinal handles (N/E/S/W); dragging any handle adjusts radius r while keeping center fixed
• SVGPolygonElement / SVGPolylineElement: renders one draggable handle per vertex; supports shift-constrained axis-lock
• _commitElementChange(): writes back r (circle) or points (polygon/polyline) via extendedItem.setAttribute on PointerUp so changes flow through the undo service

SvgElementExtensionProvider

• Added SVGPolygonElement and SVGPolylineElement to shouldExtend predicate

DefaultServiceBootstrap

• Registered PathExtensionProvider — activates the full bezier/cubic path editor for <path> by default
• Registered EllipsisExtensionProvider — activates the rx/ry handle editor for <ellipse> by default

index.ts

• Exported previously internal EllipsisExtension, EllipsisExtensionProvider, LineExtension, LineExtensionProvider, RectExtension, RectExtensionProvider for use by third-party plugins

Example: polygon vertex editing

<!-- Before: selecting a polygon showed no handles -->
<polygon points="50,10 90,90 10,90" />

<!-- After: each vertex gets a draggable handle; PointerUp commits via setAttribute -->

Circle radius editing follows the same pattern — four handles at (cx, cy±r) and (cx±r, cy), all mapping back to a single r attribute.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Feature Proposal: Unified Shape & Path Editor for SVG and CSS Geometry</issue_title>
<issue_description>## 🚀 Feature Proposal: Unified Shape & Path Editor for SVG and CSS Geometry

Summary

The Web Component Designer currently provides strong visual editing capabilities for layout and components, but lacks a powerful, reusable shape editor for geometry-based elements.

This issue proposes the implementation of a unified Shape & Path Editor that can be used to visually edit:

• SVG geometry elements
• CSS geometry-related properties
• Text-on-path constructs

The goal is to build one coherent editing system that works consistently across SVG and CSS, even when elements are transformed, scaled, or zoomed.

This is intended to be a Summer of Code–sized task with clear architectural and UI challenges.

---

🎯 Goals

Implement a visual editor that supports interactive editing of:

SVG Elements

• path
• line
• ellipse
• circle
• polygon
• polyline
• textPath
• developer-defined SVG paths (e.g. helper paths in a dev/debug layer)

CSS Properties

• clip-path
• shape-outside
• outline-path (path used as a motion or layout guide)
• future geometry-based CSS properties

The editor should feel identical regardless of whether the underlying data comes from SVG or CSS.

---

🧩 Key Requirements

1. Unified Geometry Model

• Internally represent all shapes (SVG + CSS) using a shared geometry abstraction.
• Editing logic must not depend on the origin (SVG vs CSS).
• Conversion layers translate between:
  • SVG attributes (d, points, cx/cy/r, …)
  • CSS syntax (path(), polygon(), circle(), …)

2. Interactive Editing Features

• Move, add, and remove points
• Bezier handle editing for paths
• Segment snapping and alignment helpers
• Visual feedback for control points and curves
• Keyboard modifiers (e.g. constrain angles, symmetric handles)

3. Transform-Aware Editing

• Editing must work correctly when elements are:
  • scaled
  • rotated
  • nested in transformed parents
  • zoomed or panned in the designer canvas

➡️ GeometryUtils APIs must be used to:

• Convert between screen, mouse, local, and world coordinates
• Apply and reverse transforms
• Keep precision and numerical stability

4. Text-on-Path Support

• Visual editing of paths used by:
  • SVG textPath
  • CSS shape-outside for inline text flow
• Immediate visual feedback of text reflow while editing

5. Reusability & Extensibility

• Shape editor must be usable by:
  • SVG tools
  • CSS property panels
  • future plugins or extensions
• No hard-coded coupling to a specific element type

---

✅ Expected Deliverables

• Fully functional shape editor UI
• Support for SVG + CSS geometry editing
• Robust transform-aware interaction
• Clean, documented APIs for future extensions
• Examples / demo cases (clip-path, textPath, shape-outside)

---

🌱 Why This Is a Good GSoC Project

• Non-trivial geometry and math challenges
• Real-world relevance (SVG + CSS authoring)
• Clear milestones and measurable outcomes
• Extensible foundation for future features
• High impact on usability of the designer

---

📌 Related Topics / Skills

• SVG path geometry
• CSS Shapes specification
• Coordinate space transformations
• Interactive graphics editors
• Web Components architecture

---

Mentors welcome to refine scope or split this into milestones.
</issue_description>

Comments on the Issue (you are @copilot in this section)

@jogibear9988 Additional:

At first develop so it works in firefox (cause GeometryApi is only there natively at the moment). After that fix so it also works in chrome (we use the https://github.com/jogibear9988/getBoxQuadsPolyfill), but maybe there are fixes needed for SVGs</comment_new>

• Fixes Feature Proposal: Unified Shape & Path Editor for SVG and CSS Geometry #454

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.