Skip to content
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

Add save callback and buttons to NAD viewer #121

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Add save callback and buttons to NAD viewer #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bfa95ec
Add save callback and buttons to NAD viewer
massimo-ferraro Nov 6, 2024
4514620
Revise buttons style
massimo-ferraro Nov 8, 2024
b770e7c
Disable visualization of move and select buttons if no metadata is av…
massimo-ferraro Nov 8, 2024
5f79e93
Align to 'main' branch
massimo-ferraro Nov 8, 2024
503ae12
Fix method names
massimo-ferraro Nov 14, 2024
767bdea
Add tooltip to buttons
massimo-ferraro Nov 18, 2024
ec141bf
Align to main branch
massimo-ferraro Dec 19, 2024
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
69 changes: 44 additions & 25 deletions demo/src/diagram-viewers/add-diagrams.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ import {
OnMoveTextNodeCallbackType,
OnSelectNodeCallbackType,
OnToggleNadHoverCallbackType,
OnSaveCallbackType,
MouseMode,
} from '../../../src';

export const addNadToDemo = () => {
Expand All @@ -54,13 +56,13 @@ export const addNadToDemo = () => {
true,
false,
null,
handleToggleNadHover
handleToggleNadHover,
handleSave,
true,
MouseMode.MOVE
);

document
.getElementById('svg-container-nad')
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
document.getElementById('svg-container-nad')?.setAttribute('style', 'border:2px; border-style:solid;');
});

fetch(NadSvgExample)
Expand All @@ -74,19 +76,21 @@ export const addNadToDemo = () => {
600,
1000,
1200,
handleNodeMove,
handleTextNodeMove,
null,
null,
handleNodeSelect,
false,
false,
null,
handleToggleNadHover
handleToggleNadHover,
handleSave,
true,
null
);

document
.getElementById('svg-container-nad-no-moving')
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
?.setAttribute('style', 'border:2px; border-style:solid;');
});

fetch(NadSvgMultibusVLNodesExample)
Expand All @@ -106,13 +110,15 @@ export const addNadToDemo = () => {
true,
false,
null,
handleToggleNadHover
handleToggleNadHover,
handleSave,
true,
MouseMode.MOVE
);

document
.getElementById('svg-container-nad-multibus-vlnodes')
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
?.setAttribute('style', 'border:2px; border-style:solid;');
});

fetch(NadSvgMultibusVLNodes14Example)
Expand All @@ -132,13 +138,15 @@ export const addNadToDemo = () => {
true,
false,
null,
handleToggleNadHover
handleToggleNadHover,
handleSave,
true,
MouseMode.MOVE
);

document
.getElementById('svg-container-nad-multibus-vlnodes14')
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
?.setAttribute('style', 'border:2px; border-style:solid;');
});

fetch(NadSvgPstHvdcExample)
Expand All @@ -158,13 +166,15 @@ export const addNadToDemo = () => {
true,
false,
null,
handleToggleNadHover
handleToggleNadHover,
handleSave,
true,
MouseMode.MOVE
);

document
.getElementById('svg-container-nad-pst-hvdc')
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
?.setAttribute('style', 'border:2px; border-style:solid;');
});

fetch(NadSvgThreeWTDanglingLineUnknownBusExample)
Expand All @@ -184,13 +194,15 @@ export const addNadToDemo = () => {
true,
false,
null,
handleToggleNadHover
handleToggleNadHover,
handleSave,
true,
MouseMode.SELECT
);

document
.getElementById('svg-container-nad-threewt-dl-ub')
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
?.setAttribute('style', 'border:2px; border-style:solid;');
});

fetch(NadSvgPartialNetworkExample)
Expand All @@ -210,13 +222,15 @@ export const addNadToDemo = () => {
true,
true,
null,
handleToggleNadHover
handleToggleNadHover,
handleSave,
false,
MouseMode.MOVE
);

document
.getElementById('svg-container-nad-partial-network')
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
?.setAttribute('style', 'border:2px; border-style:solid;');
});
};

Expand Down Expand Up @@ -414,3 +428,8 @@ const handleToggleNadHover: OnToggleNadHoverCallbackType = (hovered, mousePositi
console.log(msg);
}
};

const handleSave: OnSaveCallbackType = (svg, metadata) => {
console.log(svg);
console.log(metadata);
};
53 changes: 52 additions & 1 deletion src/components/network-area-diagram-viewer/diagram-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
* SPDX-License-Identifier: MPL-2.0
*/

import { Point } from '@svgdotjs/svg.js';
Expand Down Expand Up @@ -126,7 +127,7 @@ export function getLabelData(point1: Point, point2: Point, arrowLabelShift: numb
}

// get fork position of a multibranch edge
export function getEdgeFork(point: Point, edgeForkLength: number, angleFork: number) {
export function getEdgeFork(point: Point, edgeForkLength: number, angleFork: number): Point {
return new Point(point.x + edgeForkLength * Math.cos(angleFork), point.y + edgeForkLength * Math.sin(angleFork));
}

Expand Down Expand Up @@ -521,3 +522,53 @@ export function getTextNodeMoves(
{ xOrig: textNode.connectionShiftX, yOrig: textNode.connectionShiftY, xNew: connXNew, yNew: connYNew },
];
}

function getButton(svg: string, title: string, pressed: boolean): HTMLButtonElement {
const button = document.createElement('button');
button.innerHTML = svg;
button.title = title;
button.style.height = '25px';
button.style.width = '25px';
button.style.marginRight = '1px';
button.style.marginLeft = '3px';
button.style.marginTop = '3px';
button.style.padding = '0px';
if (pressed) {
button.style.border = 'medium solid orange';
} else {
button.style.border = 'none';
}
return button;
}

export function getSaveButton(): HTMLButtonElement {
return getButton(
'<svg xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 -960 960 960" width="15px" fill="#5f6368"><path d="m720-120 160-160-56-56-64 64v-167h-80v167l-64-64-56 56 160 160ZM560 0v-80h320V0H560ZM240-160q-33 0-56.5-23.5T160-240v-560q0-33 23.5-56.5T240-880h280l240 240v121h-80v-81H480v-200H240v560h240v80H240Zm0-80v-560 560Z"/></svg>',
'Save',
false
);
}

export function getMoveButton(pressed: boolean): HTMLButtonElement {
return getButton(
'<svg xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 -960 960 960" width="15px" fill="#5f6368"><path d="M806-440H320v-80h486l-62-62 56-58 160 160-160 160-56-58 62-62ZM600-600v-160H200v560h400v-160h80v160q0 33-23.5 56.5T600-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h400q33 0 56.5 23.5T680-760v160h-80Z"/></svg>',
'Move',
pressed
);
}

export function getSelectButton(pressed: boolean): HTMLButtonElement {
return getButton(
'<svg xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 -960 960 960" width="15px" fill="#5f6368"><path d="M40-480v-80h80v80H40Zm800 0v-80h80v80h-80ZM40-640v-80h80v80H40Zm800 0v-80h80v80h-80ZM40-800v-80h80v80H40Zm160 320v-80h80v80h-80Zm480 0v-80h80v80h-80Zm160-320v-80h80v80h-80Zm-640 0v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80ZM473-40q-24 0-46-9t-39-26L184-280l33-34q14-14 34-19t40 0l69 20v-327q0-17 11.5-28.5T400-680q17 0 28.5 11.5T440-640v433l-98-28 103 103q6 6 13 9t15 3h167q33 0 56.5-23.5T720-200v-160q0-17 11.5-28.5T760-400q17 0 28.5 11.5T800-360v160q0 66-47 113T640-40H473Zm7-280v-160q0-17 11.5-28.5T520-520q17 0 28.5 11.5T560-480v160h-80Zm120 0v-120q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440v120h-80Zm40 200H445h195Z"/></svg>',
'Select',
pressed
);
}

export function pressButton(button: HTMLButtonElement) {
button.style.border = 'medium solid orange';
}

export function releaseButton(button: HTMLButtonElement) {
button.style.border = 'none';
}
1 change: 1 addition & 0 deletions src/components/network-area-diagram-viewer/layout-parameters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
* SPDX-License-Identifier: MPL-2.0
*/

import { LayoutParametersMetadata } from './diagram-metadata';
Expand Down
3 changes: 3 additions & 0 deletions src/components/network-area-diagram-viewer/network-area-diagram-viewer.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ describe('Test network-area-diagram-viewer', () => {
false,
false,
null,
null,
null,
false,
null
);

Expand Down
Loading
Loading