diff --git a/package-lock.json b/package-lock.json index 419e08bd..5b44d0b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4931,7 +4931,7 @@ }, "packages/web-component-designer": { "name": "@node-projects/web-component-designer", - "version": "0.1.266", + "version": "0.1.327", "license": "MIT", "dependencies": { "@node-projects/base-custom-webcomponent": ">=0.27.8" @@ -5002,11 +5002,11 @@ }, "packages/web-component-designer-htmlparserservice-nodehtmlparser": { "name": "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser", - "version": "0.1.11", + "version": "0.1.12", "license": "MIT", "dependencies": { "@node-projects/node-html-parser-esm": "^6.2.0", - "@node-projects/web-component-designer": ">=0.1.224" + "@node-projects/web-component-designer": ">=0.1.278" } }, "packages/web-component-designer-liveblocks": { @@ -5060,7 +5060,7 @@ }, "packages/web-component-designer-visualization-addons": { "name": "@node-projects/web-component-designer-visualization-addons", - "version": "0.1.133", + "version": "0.1.136", "license": "MIT", "dependencies": { "@adobe/css-tools": ">=4.4.0", @@ -5091,7 +5091,7 @@ }, "packages/web-component-designer-widgets-wunderbaum": { "name": "@node-projects/web-component-designer-widgets-wunderbaum", - "version": "0.1.34", + "version": "0.1.40", "license": "MIT", "dependencies": { "@node-projects/base-custom-webcomponent": ">=0.27.8", diff --git a/packages/web-component-designer/src/elements/services/DefaultServiceBootstrap.ts b/packages/web-component-designer/src/elements/services/DefaultServiceBootstrap.ts index cf73998d..09b9195d 100644 --- a/packages/web-component-designer/src/elements/services/DefaultServiceBootstrap.ts +++ b/packages/web-component-designer/src/elements/services/DefaultServiceBootstrap.ts @@ -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'; @@ -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(), diff --git a/packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtension.ts b/packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtension.ts index 4ea1a879..60b84f49 100644 --- a/packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtension.ts +++ b/packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtension.ts @@ -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; @@ -117,16 +134,7 @@ export class SvgElementExtension extends AbstractExtension { case EventNames.PointerUp: (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; } } @@ -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(' ')); } } diff --git a/packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.ts b/packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.ts index e6ed0b90..e01b2eee 100644 --- a/packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.ts +++ b/packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.ts @@ -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); } diff --git a/packages/web-component-designer/src/index.ts b/packages/web-component-designer/src/index.ts index f5605a0e..95fbd8ee 100644 --- a/packages/web-component-designer/src/index.ts +++ b/packages/web-component-designer/src/index.ts @@ -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";