Skip to content

Commit

Permalink
Move NAD nodes programmatically with a public function (#101)
Browse files Browse the repository at this point in the history 
Signed-off-by: BOUTIER Charly <[email protected]>
  • Loading branch information
@EstherDarkish
EstherDarkish authored Sep 27, 2024
1 parent bd5d71c commit b51daf9
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 23 deletions.
1 change: 1 addition & 0 deletions src/components/network-area-diagram-viewer/network-area-diagram-viewer.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('<div></div>');
expect(nad.getSvgContent()).toBe('');
Expand Down
76 changes: 53 additions & 23 deletions src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 () {
Expand Down Expand Up @@ -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 = <HTMLElement>this.svgDraw?.node.firstElementChild?.parentElement;
if (svg != null) {
svg.style.cursor = 'grabbing';
}
if (!(event as MouseEvent).shiftKey) {
svg.style.cursor = 'grabbing';
if (!isShiftKeyDown) {
// moving node
this.shiftKeyOnMouseDown = false;
this.ctm = this.svgDraw?.node.getScreenCTM(); // used to compute mouse movement
Expand All @@ -322,29 +344,39 @@ export class NetworkAreaDiagramViewer {
}
}

private drag(event: Event) {
private handleDrag(event: Event) {
if (this.selectedElement) {
event.preventDefault();
const newPosition = this.getMousePosition(event as MouseEvent);
this.processDrag(newPosition);
}
}

private processDrag(newPosition: Point) {
if (this.selectedElement) {
if (!this.shiftKeyOnMouseDown) {
// moving node
this.ctm = this.svgDraw?.node.getScreenCTM(); // used to compute mouse movement
const mousePosition = this.getMousePosition(event as MouseEvent);
this.updateGraph(mousePosition);
this.ctm = this.svgDraw?.node.getScreenCTM(); // used to compute SVG transformations
this.updateGraph(newPosition);
this.initialPosition = DiagramUtils.getPosition(this.selectedElement);
}
}
}

private endDrag(event: Event) {
private handleEndDrag(event: Event) {
const newPosition = this.getMousePosition(event as MouseEvent);
this.processEndDrag(newPosition, true);
}

private processEndDrag(newPosition: Point, callMoveNodeCallback: boolean) {
if (this.selectedElement) {
if (!this.shiftKeyOnMouseDown) {
// moving node
const mousePosition = this.getMousePosition(event as MouseEvent);
this.updateGraph(mousePosition);
this.updateGraph(newPosition);
if (this.textNodeSelected) {
this.callMoveTextNodeCallback(mousePosition);
this.callMoveTextNodeCallback(newPosition);
} else {
this.updateNodeMetadataCallCallback(mousePosition);
this.updateNodeMetadataCallCallback(newPosition, callMoveNodeCallback);
}
this.initialPosition = new Point(0, 0);
this.textNodeSelected = false;
Expand All @@ -358,9 +390,7 @@ export class NetworkAreaDiagramViewer {
}
// change cursor style
const svg: HTMLElement = <HTMLElement>this.svgDraw?.node.firstElementChild?.parentElement;
if (svg != null) {
svg.style.removeProperty('cursor');
}
svg.style.removeProperty('cursor');
this.selectedElement = null;
this.enablePanzoom();
}
Expand Down Expand Up @@ -1158,7 +1188,7 @@ export class NetworkAreaDiagramViewer {
}
}

private updateNodeMetadataCallCallback(mousePosition: Point) {
private updateNodeMetadataCallCallback(mousePosition: Point, callMoveNodeCallback: boolean) {
// get moved node from metadata
const node: SVGGraphicsElement | null = this.container.querySelector(
'nad\\:node[svgid="' + this.selectedElement?.id + '"]'
Expand All @@ -1169,7 +1199,7 @@ export class NetworkAreaDiagramViewer {
node.setAttribute('x', nodeMove.xNew);
node.setAttribute('y', nodeMove.yNew);
// call the node move callback, if defined
if (this.onMoveNodeCallback != null) {
if (this.onMoveNodeCallback != null && callMoveNodeCallback) {
this.onMoveNodeCallback(
node.getAttribute('equipmentid') ?? '',
node.getAttribute('svgid') ?? '',
Expand Down

0 comments on commit b51daf9

Please sign in to comment.