Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd84c4b
Initial plan
Copilot Feb 28, 2026
20e9161
Add SVG shape editor support for circle, polygon, polyline; register …
Copilot Feb 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions packages/web-component-designer/src/elements/services/DefaultServiceBootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ import { DrawElementTool } from '../widgets/designerView/tools/DrawElementTool.j
import { RoundPixelsDesignViewConfigButton } from '../widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js';
import { MathMLElementsPropertiesService } from './propertiesService/services/MathMLElementsPropertiesService.js';
import { SvgElementExtensionProvider } from '../widgets/designerView/extensions/svg/SvgElementExtensionProvider.js';
import { PathExtensionProvider } from '../widgets/designerView/extensions/svg/PathExtensionProvider.js';
import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/svg/EllipsisExtensionProvider.js';
import { ConditionExtensionProvider } from '../widgets/designerView/extensions/logic/ConditionExtensionProvider.js';
import { GridToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridToolbarExtensionProvider.js';
import { FlexToolbarExtensionProvider } from '../widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js';
Expand Down Expand Up @@ -159,6 +161,8 @@ export function createDefaultServiceContainer() {
new ConditionExtensionProvider(new PaddingExtensionProvider, (_, c) => c.activeTool instanceof MarginTool || c.activeTool instanceof PaddingTool, true),
new PositionExtensionProvider(),
new SvgElementExtensionProvider(),
new PathExtensionProvider(),
new EllipsisExtensionProvider(),
new ApplyFirstMachingExtensionProvider(new GridChildResizeExtensionProvider(), new ResizeExtensionProvider(true)),
new TransformOriginExtensionProvider(true),
new RotateExtensionProvider(),
Expand Down
61 changes: 51 additions & 10 deletions ...omponent-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,23 @@ function getSvgElementPoints(element: SVGElement): IPoint[] {
{ x: element.x1.baseVal.value, y: element.y1.baseVal.value },
{ x: element.x2.baseVal.value, y: element.y2.baseVal.value }
]
} else if (element instanceof SVGCircleElement) {
const cx = element.cx.baseVal.value;
const cy = element.cy.baseVal.value;
const r = element.r.baseVal.value;
return [
{ x: cx, y: cy - r },
{ x: cx + r, y: cy },
{ x: cx, y: cy + r },
{ x: cx - r, y: cy },
];
} else if (element instanceof SVGPolygonElement || element instanceof SVGPolylineElement) {
const points: IPoint[] = [];
for (let i = 0; i < element.points.numberOfItems; i++) {
const p = element.points.getItem(i);
points.push({ x: p.x, y: p.y });
}
return points;
}

return null;
Expand Down Expand Up @@ -117,16 +134,7 @@ export class SvgElementExtension extends AbstractExtension {
case EventNames.PointerUp:
(<Element>event.target).releasePointerCapture(event.pointerId);
this._startPos = null;

/*if (getComputedStyle(this._rectElement.parentElement).position == "absolute") {
let group = this.extendedItem.openGroup('rearrangeSvg');
let newRectCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement);
let newRectCoordinatesCloud = this._getPointsFromRect(newRectCoordinates);
let newRectExtrema = this._getMinMaxValues(newRectCoordinatesCloud);
this._rearrangeSvgParent(newRectExtrema);
this._rearrangePointsFromElement(this._parentCoordinates);
group.commit();
}*/
this._commitElementChange(this._svgElement);
break;
}
}
Expand All @@ -149,6 +157,39 @@ export class SvgElementExtension extends AbstractExtension {
element.y1.baseVal.value = this._points[0].y;
element.x2.baseVal.value = this._points[1].x;
element.y2.baseVal.value = this._points[1].y;
} else if (element instanceof SVGCircleElement) {
const cx = element.cx.baseVal.value;
const cy = element.cy.baseVal.value;
let newR = element.r.baseVal.value;
switch (index) {
case 0: newR = cy - newPoint.y; break;
case 1: newR = newPoint.x - cx; break;
case 2: newR = newPoint.y - cy; break;
case 3: newR = cx - newPoint.x; break;
}
const r = Math.max(0, newR);
element.r.baseVal.value = r;
this._points[0] = { x: cx, y: cy - r };
this._points[1] = { x: cx + r, y: cy };
this._points[2] = { x: cx, y: cy + r };
this._points[3] = { x: cx - r, y: cy };
} else if (element instanceof SVGPolygonElement || element instanceof SVGPolylineElement) {
const p = element.points.getItem(index);
p.x = newPoint.x;
p.y = newPoint.y;
}
}

_commitElementChange(element: SVGElement) {
if (element instanceof SVGCircleElement) {
this.extendedItem.setAttribute('r', element.r.baseVal.value.toString());
} else if (element instanceof SVGPolygonElement || element instanceof SVGPolylineElement) {
const parts: string[] = [];
for (let i = 0; i < element.points.numberOfItems; i++) {
const p = element.points.getItem(i);
parts.push(p.x + ',' + p.y);
}
this.extendedItem.setAttribute('points', parts.join(' '));
}
}

Expand Down
2 changes: 2 additions & 0 deletions ...-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export class SvgElementExtensionProvider implements IDesignerExtensionProvider {
if (designItem.node instanceof SVGRectElement ||
designItem.node instanceof SVGLineElement ||
designItem.node instanceof SVGCircleElement ||
designItem.node instanceof SVGPolygonElement ||
designItem.node instanceof SVGPolylineElement ||
designItem.node instanceof SVGPathElement) {
return isVisualSvgElement(designItem.node);
}
Expand Down
6 changes: 6 additions & 0 deletions packages/web-component-designer/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,12 @@ export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtensio
export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.js";
export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
export * from "./elements/widgets/designerView/extensions/svg/PathExtensionProvider.js";
export * from "./elements/widgets/designerView/extensions/svg/EllipsisExtension.js";
export * from "./elements/widgets/designerView/extensions/svg/EllipsisExtensionProvider.js";
export * from "./elements/widgets/designerView/extensions/svg/LineExtension.js";
export * from "./elements/widgets/designerView/extensions/svg/LineExtensionProvider.js";
export * from "./elements/widgets/designerView/extensions/svg/RectExtension.js";
export * from "./elements/widgets/designerView/extensions/svg/RectExtensionProvider.js";
export * from "./elements/widgets/designerView/extensions/PositionExtension.js";
export * from "./elements/widgets/designerView/extensions/PositionExtensionProvider.js";
export * from "./elements/widgets/designerView/extensions/ElementDragTitleExtension.js";
Expand Down