diff --git a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.test.ts b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.test.ts index d563f52c..9362b362 100644 --- a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.test.ts +++ b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.test.ts @@ -27,6 +27,7 @@ describe('Test network-area-diagram-viewer', () => { null ); + nad.moveNodeToCoordinates('', 0, 0); expect(container.getElementsByTagName('svg').length).toBe(0); expect(nad.getContainer().outerHTML).toBe('
'); expect(nad.getSvgContent()).toBe(''); diff --git a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts index bc3699e9..f509aa38 100644 --- a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts +++ b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts @@ -152,6 +152,25 @@ export class NetworkAreaDiagramViewer { return this.dynamicCssRules; } + private getNodeIdFromEquipmentId(equipmentId: string) { + const node: SVGGraphicsElement | null = this.container.querySelector( + 'nad\\:node[equipmentid="' + equipmentId + '"]' + ); + return node?.getAttribute('svgid') || null; + } + + public moveNodeToCoordinates(equipmentId: string, x: number, y: number) { + const nodeId = this.getNodeIdFromEquipmentId(equipmentId); + if (nodeId != null) { + const elemToMove: SVGElement | null = this.container.querySelector('[id="' + nodeId + '"]'); + if (elemToMove) { + const newPosition = new Point(x, y); + this.processStartDrag(elemToMove, false); + this.processEndDrag(newPosition, false); + } + } + } + public init( minWidth: number, minHeight: number, @@ -189,16 +208,16 @@ export class NetworkAreaDiagramViewer { // add events if (enableNodeMoving) { this.svgDraw.on('mousedown', (e: Event) => { - this.startDrag(e); + this.handleStartDrag(e); }); this.svgDraw.on('mousemove', (e: Event) => { - this.drag(e); + this.handleDrag(e); }); this.svgDraw.on('mouseup', (e: Event) => { - this.endDrag(e); + this.handleEndDrag(e); }); this.svgDraw.on('mouseleave', (e: Event) => { - this.endDrag(e); + this.handleEndDrag(e); }); } this.svgDraw.on('panStart', function () { @@ -293,19 +312,22 @@ export class NetworkAreaDiagramViewer { return new SvgParameters(svgParametersElement); } - private startDrag(event: Event) { + private handleStartDrag(event: Event) { const draggableElem = DiagramUtils.getDraggableFrom(event.target as SVGElement); if (!draggableElem) { return; } + const isShiftKeyDown = !!(event as MouseEvent).shiftKey; + this.processStartDrag(draggableElem, isShiftKeyDown); + } + + private processStartDrag(draggableElem: SVGElement, isShiftKeyDown: boolean) { this.disablePanzoom(); // to avoid panning the whole SVG when moving or selecting a node this.selectedElement = draggableElem as SVGGraphicsElement; // element to be moved or selected // change cursor style const svg: HTMLElement =