From bfa95ec76acf55f6ffe0919406dc65f0a7b4c544 Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Wed, 6 Nov 2024 10:29:35 +0100 Subject: [PATCH 1/5] Add save callback and buttons to NAD viewer Signed-off-by: massimo.ferraro --- demo/src/diagram-viewers/add-diagrams.ts | 71 +++++++---- .../diagram-utils.ts | 49 +++++++- .../layout-parameters.ts | 1 + .../network-area-diagram-viewer.test.ts | 4 + .../network-area-diagram-viewer.ts | 112 ++++++++++++++---- .../svg-parameters.ts | 1 + src/index.ts | 3 + 7 files changed, 192 insertions(+), 49 deletions(-) diff --git a/demo/src/diagram-viewers/add-diagrams.ts b/demo/src/diagram-viewers/add-diagrams.ts index 89e45f80..cf53ad9a 100644 --- a/demo/src/diagram-viewers/add-diagrams.ts +++ b/demo/src/diagram-viewers/add-diagrams.ts @@ -33,8 +33,10 @@ import { OnMoveNodeCallbackType, OnMoveTextNodeCallbackType, OnSelectNodeCallbackType, + OnToggleNadHoverCallbackType, + OnSaveCallbackType, + MouseMode, } from '../../../src'; -import { OnToggleNadHoverCallbackType } from '../../../src/components/network-area-diagram-viewer/network-area-diagram-viewer'; export const addNadToDemo = () => { fetch(NadSvgExample) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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;'); }); }; @@ -415,3 +429,8 @@ const handleToggleNadHover: OnToggleNadHoverCallbackType = (hovered, mousePositi console.log(msg); } }; + +const handleSave: OnSaveCallbackType = (svg, metadata) => { + console.log(svg); + console.log(metadata); +}; diff --git a/src/components/network-area-diagram-viewer/diagram-utils.ts b/src/components/network-area-diagram-viewer/diagram-utils.ts index 50a2f10a..f25b7a3c 100644 --- a/src/components/network-area-diagram-viewer/diagram-utils.ts +++ b/src/components/network-area-diagram-viewer/diagram-utils.ts @@ -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'; @@ -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)); } @@ -521,3 +522,49 @@ export function getTextNodeMoves( { xOrig: textNode.connectionShiftX, yOrig: textNode.connectionShiftY, xNew: connXNew, yNew: connYNew }, ]; } + +function getButton(svg: string, pressed: boolean): HTMLButtonElement { + const button = document.createElement('button'); + button.innerHTML = svg; + button.style.height = '20px'; + button.style.width = '20px'; + button.style.marginRight = '1px'; + button.style.marginLeft = '2px'; + button.style.marginTop = '1px'; + button.style.padding = '0px'; + if (pressed) { + button.style.boxShadow = 'none'; + } else { + button.style.boxShadow = '0px 1px 2px rgba(0, 0, 0, 1)'; + } + return button; +} + +export function getSaveButton(): HTMLButtonElement { + return getButton( + '', + false + ); +} + +export function getMoveButton(pressed: boolean): HTMLButtonElement { + return getButton( + '', + pressed + ); +} + +export function getSelectButton(pressed: boolean): HTMLButtonElement { + return getButton( + '', + pressed + ); +} + +export function pressButton(button: HTMLButtonElement) { + button.style.boxShadow = 'none'; +} + +export function releaseButton(button: HTMLButtonElement) { + button.style.boxShadow = '0px 1px 2px rgba(0, 0, 0, 1)'; +} diff --git a/src/components/network-area-diagram-viewer/layout-parameters.ts b/src/components/network-area-diagram-viewer/layout-parameters.ts index fd198ce6..0f70ff6a 100644 --- a/src/components/network-area-diagram-viewer/layout-parameters.ts +++ b/src/components/network-area-diagram-viewer/layout-parameters.ts @@ -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'; 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 e6496a8e..a24435cb 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 @@ -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 { NetworkAreaDiagramViewer } from './network-area-diagram-viewer'; @@ -26,6 +27,9 @@ describe('Test network-area-diagram-viewer', () => { false, false, null, + null, + null, + false, null ); 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 3b53fdce..6fa3727e 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 @@ -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, SVG, ViewBoxLike, Svg } from '@svgdotjs/svg.js'; @@ -16,6 +17,11 @@ import { CSS_DECLARATION, CSS_RULE, THRESHOLD_STATUS, DEFAULT_DYNAMIC_CSS_RULES type DIMENSIONS = { width: number; height: number; viewbox: VIEWBOX }; type VIEWBOX = { x: number; y: number; width: number; height: number }; +export enum MouseMode { + MOVE, + SELECT, +} + export type OnMoveNodeCallbackType = ( equipmentId: string, nodeId: string, @@ -40,6 +46,7 @@ export type OnMoveTextNodeCallbackType = ( ) => void; export type OnSelectNodeCallbackType = (equipmentId: string, nodeId: string) => void; + export type OnToggleNadHoverCallbackType = ( hovered: boolean, mousePosition: Point | null, @@ -47,8 +54,11 @@ export type OnToggleNadHoverCallbackType = ( equipmentType: string ) => void; +export type OnSaveCallbackType = (svg: string | null, metadata: string | null) => void; + export class NetworkAreaDiagramViewer { container: HTMLElement; + svgDiv: HTMLElement; svgContent: string; diagramMetadata: DiagramMetadata | null; width: number; @@ -72,6 +82,8 @@ export class NetworkAreaDiagramViewer { onSelectNodeCallback: OnSelectNodeCallbackType | null; dynamicCssRules: CSS_RULE[]; onToggleHoverCallback: OnToggleNadHoverCallbackType | null; + onSaveCallback: OnSaveCallbackType | null; + mouseMode: MouseMode; constructor( container: HTMLElement, @@ -87,9 +99,13 @@ export class NetworkAreaDiagramViewer { enableNodeInteraction: boolean, enableLevelOfDetail: boolean, customDynamicCssRules: CSS_RULE[] | null, - onToggleHoverCallback: OnToggleNadHoverCallbackType | null + onToggleHoverCallback: OnToggleNadHoverCallbackType | null, + onSaveCallback: OnSaveCallbackType | null, + addButtons: boolean, + defaultMouseMode: MouseMode | null ) { this.container = container; + this.svgDiv = document.createElement('div'); this.svgContent = svgContent; this.diagramMetadata = diagramMetadata; this.width = 0; @@ -97,6 +113,12 @@ export class NetworkAreaDiagramViewer { this.originalWidth = 0; this.originalHeight = 0; this.dynamicCssRules = customDynamicCssRules ?? DEFAULT_DYNAMIC_CSS_RULES; + this.mouseMode = defaultMouseMode ?? MouseMode.MOVE; + this.onMoveNodeCallback = onMoveNodeCallback; + this.onMoveTextNodeCallback = onMoveTextNodeCallback; + this.onSelectNodeCallback = onSelectNodeCallback; + this.onToggleHoverCallback = onToggleHoverCallback; + this.onSaveCallback = onSaveCallback; this.init( minWidth, minHeight, @@ -104,14 +126,11 @@ export class NetworkAreaDiagramViewer { maxHeight, enableNodeInteraction, enableLevelOfDetail, - diagramMetadata !== null + diagramMetadata !== null, + addButtons ); this.svgParameters = new SvgParameters(diagramMetadata?.svgParameters); this.layoutParameters = new LayoutParameters(diagramMetadata?.layoutParameters); - this.onMoveNodeCallback = onMoveNodeCallback; - this.onMoveTextNodeCallback = onMoveTextNodeCallback; - this.onSelectNodeCallback = onSelectNodeCallback; - this.onToggleHoverCallback = onToggleHoverCallback; } public setWidth(width: number): void { @@ -184,7 +203,7 @@ export class NetworkAreaDiagramViewer { 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 + '"]'); + const elemToMove: SVGElement | null = this.svgDiv.querySelector('[id="' + nodeId + '"]'); if (elemToMove) { const newPosition = new Point(x, y); this.onDragStart(elemToMove); @@ -200,7 +219,8 @@ export class NetworkAreaDiagramViewer { maxHeight: number, enableNodeInteraction: boolean, enableLevelOfDetail: boolean, - hasMetadata: boolean + hasMetadata: boolean, + addButtons: boolean ): void { if (!this.container || !this.svgContent) { return; @@ -214,6 +234,14 @@ export class NetworkAreaDiagramViewer { // clear the previous svg in div element before replacing this.container.innerHTML = ''; + // add buttons bar + if (addButtons) { + this.container.appendChild(this.GetButtonsBar(enableNodeInteraction)); + } + + // add svg div + this.container.appendChild(this.svgDiv); + // set dimensions this.setOriginalWidth(dimensions.width); this.setOriginalHeight(dimensions.height); @@ -222,7 +250,7 @@ export class NetworkAreaDiagramViewer { // set the SVG this.svgDraw = SVG() - .addTo(this.container) + .addTo(this.svgDiv) .size(this.width, this.height) .viewbox(dimensions.viewbox.x, dimensions.viewbox.y, dimensions.viewbox.width, dimensions.viewbox.height); const drawnSvg: HTMLElement = this.svgDraw.svg(this.svgContent).node.firstElementChild; @@ -295,7 +323,7 @@ export class NetworkAreaDiagramViewer { if (enableNodeInteraction && hasMetadata) { // fill empty elements: unknown buses and three windings transformers - const emptyElements: NodeListOf = this.container.querySelectorAll( + const emptyElements: NodeListOf = this.svgDiv.querySelectorAll( '.nad-unknown-busnode, .nad-3wt-nodes .nad-winding' ); emptyElements.forEach((emptyElement) => { @@ -304,6 +332,48 @@ export class NetworkAreaDiagramViewer { } } + private GetButtonsBar(enableNodeMoving: boolean): HTMLDivElement { + const buttonsDiv = document.createElement('div'); + buttonsDiv.style.display = 'flex'; + buttonsDiv.style.alignItems = 'center'; + buttonsDiv.style.position = 'absolute'; + buttonsDiv.style.zIndex = '2'; + if (enableNodeMoving) { + const moveButton = DiagramUtils.getMoveButton(this.mouseMode === MouseMode.MOVE); + buttonsDiv.appendChild(moveButton); + const selectButton = DiagramUtils.getSelectButton(this.mouseMode === MouseMode.SELECT); + buttonsDiv.appendChild(selectButton); + moveButton.addEventListener('click', () => { + this.mouseMode = MouseMode.MOVE; + DiagramUtils.pressButton(moveButton); + DiagramUtils.releaseButton(selectButton); + }); + selectButton.addEventListener('click', () => { + this.mouseMode = MouseMode.SELECT; + DiagramUtils.pressButton(selectButton); + DiagramUtils.releaseButton(moveButton); + }); + } + if (this.onSaveCallback != null) { + const saveSvgButton = DiagramUtils.getSaveButton(); + buttonsDiv.appendChild(saveSvgButton); + saveSvgButton.addEventListener('click', () => { + if (this.onSaveCallback != null) { + this.onSaveCallback(this.getSvg(), this.getMetadata()); + } + }); + } + return buttonsDiv; + } + + public getSvg(): string | null { + return this.svgDraw !== undefined ? this.svgDraw.svg() : null; + } + + public getMetadata(): string | null { + return JSON.stringify(this.diagramMetadata); + } + public getDimensionsFromSvg(): DIMENSIONS | null { // Dimensions are set in the main svg tag attributes. We want to parse those data without loading the whole svg in the DOM. const result = this.svgContent.match(']*>'); @@ -338,10 +408,10 @@ export class NetworkAreaDiagramViewer { private onMouseLeftDown(event: MouseEvent) { // check dragging vs. selection - if (event.shiftKey) { + if (this.mouseMode == MouseMode.SELECT) { // selecting node this.onSelectStart(DiagramUtils.getSelectableFrom(event.target as SVGElement)); - } else { + } else if (this.mouseMode == MouseMode.MOVE) { // moving node this.onDragStart(DiagramUtils.getDraggableFrom(event.target as SVGElement)); } @@ -470,7 +540,7 @@ export class NetworkAreaDiagramViewer { private dragVoltageLevelText(mousePosition: Point) { window.getSelection()?.empty(); // to avoid text highlighting in firefox - const vlNode: SVGGraphicsElement | null = this.container.querySelector( + const vlNode: SVGGraphicsElement | null = this.svgDiv.querySelector( "[id='" + DiagramUtils.getVoltageLevelNodeId(this.draggedElement?.id) + "']" ); this.moveText(this.draggedElement, vlNode, mousePosition, DiagramUtils.getTextNodeAngleFromCentre); @@ -478,7 +548,7 @@ export class NetworkAreaDiagramViewer { private dragVoltageLevelNode(mousePosition: Point) { this.moveNode(mousePosition); - const textNode: SVGGraphicsElement | null = this.container.querySelector( + const textNode: SVGGraphicsElement | null = this.svgDiv.querySelector( "[id='" + DiagramUtils.getTextNodeId(this.draggedElement?.id) + "']" ); this.moveText( @@ -533,7 +603,7 @@ export class NetworkAreaDiagramViewer { textHeight: number, textWidth: number ) { - const textEdge: SVGGraphicsElement | null = this.container.querySelector("[id='" + textEdgeId + "']"); + const textEdge: SVGGraphicsElement | null = this.svgDiv.querySelector("[id='" + textEdgeId + "']"); if (textEdge != null) { // compute voltage level circle radius const busNodes: BusNodeMetadata[] | undefined = this.diagramMetadata?.busNodes.filter( @@ -565,7 +635,7 @@ export class NetworkAreaDiagramViewer { } private moveSvgElement(svgElementId: string, translation: Point) { - const svgElement: SVGGraphicsElement | null = this.container.querySelector("[id='" + svgElementId + "']"); + const svgElement: SVGGraphicsElement | null = this.svgDiv.querySelector("[id='" + svgElementId + "']"); if (svgElement) { const transform = DiagramUtils.getTransform(svgElement); const totalTranslation = new Point( @@ -636,7 +706,7 @@ export class NetworkAreaDiagramViewer { // get the nodes at the sides of an edge private getEdgeNodes(edge: EdgeMetadata): [SVGGraphicsElement | null, SVGGraphicsElement | null] { const otherNodeId = this.draggedElement?.id === edge.node1 ? edge.node2 : edge.node1; - const otherNode: SVGGraphicsElement | null = this.container.querySelector("[id='" + otherNodeId + "']"); + const otherNode: SVGGraphicsElement | null = this.svgDiv.querySelector("[id='" + otherNodeId + "']"); const node1 = this.draggedElement?.id === edge.node1 ? this.draggedElement : otherNode; const node2 = otherNode?.id === edge.node1 ? this.draggedElement : otherNode; return [node1, node2]; @@ -684,9 +754,7 @@ export class NetworkAreaDiagramViewer { return; } // get edge element - const edgeNode: SVGGraphicsElement | null = this.container.querySelector( - "[id='" + edge.svgId + "']" - ); + const edgeNode: SVGGraphicsElement | null = this.svgDiv.querySelector("[id='" + edge.svgId + "']"); if (!edgeNode) { return; } @@ -757,7 +825,7 @@ export class NetworkAreaDiagramViewer { return; } // get edge element - const edgeNode: SVGGraphicsElement | null = this.container.querySelector("[id='" + edge.svgId + "']"); + const edgeNode: SVGGraphicsElement | null = this.svgDiv.querySelector("[id='" + edge.svgId + "']"); if (!edgeNode) { return; } @@ -1085,7 +1153,7 @@ export class NetworkAreaDiagramViewer { const angleId = busNode.svgId == edge.busNode1 ? edgeId + '.1' : edgeId + '.2'; if (!this.edgeAngles.has(angleId)) { // if not yet stored in angle map -> compute and store it - const edgeNode: SVGGraphicsElement | null = this.container.querySelector("[id='" + edgeId + "']"); + const edgeNode: SVGGraphicsElement | null = this.svgDiv.querySelector("[id='" + edgeId + "']"); if (edgeNode) { const side = busNode.svgId == edge.busNode1 ? 0 : 1; const halfEdge: HTMLElement = edgeNode.children.item(side)?.firstElementChild; diff --git a/src/components/network-area-diagram-viewer/svg-parameters.ts b/src/components/network-area-diagram-viewer/svg-parameters.ts index e904d1b9..82de03bb 100644 --- a/src/components/network-area-diagram-viewer/svg-parameters.ts +++ b/src/components/network-area-diagram-viewer/svg-parameters.ts @@ -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 { SvgParametersMetadata } from './diagram-metadata'; diff --git a/src/index.ts b/src/index.ts index 69b3d73d..99037266 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,7 +10,10 @@ export type { OnMoveNodeCallbackType, OnMoveTextNodeCallbackType, OnSelectNodeCallbackType, + OnToggleNadHoverCallbackType, + OnSaveCallbackType, } from './components/network-area-diagram-viewer/network-area-diagram-viewer'; +export { MouseMode } from './components/network-area-diagram-viewer/network-area-diagram-viewer'; export { THRESHOLD_STATUS } from './components/network-area-diagram-viewer/dynamic-css-utils'; export type { CSS_DECLARATION, CSS_RULE } from './components/network-area-diagram-viewer/dynamic-css-utils'; export { SingleLineDiagramViewer } from './components/single-line-diagram-viewer/single-line-diagram-viewer'; From 4514620ed266d03c3aad796cb8e0e17376506b46 Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Fri, 8 Nov 2024 10:01:40 +0100 Subject: [PATCH 2/5] Revise buttons style Signed-off-by: massimo.ferraro --- .../network-area-diagram-viewer/diagram-utils.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/network-area-diagram-viewer/diagram-utils.ts b/src/components/network-area-diagram-viewer/diagram-utils.ts index f25b7a3c..7c0c16a3 100644 --- a/src/components/network-area-diagram-viewer/diagram-utils.ts +++ b/src/components/network-area-diagram-viewer/diagram-utils.ts @@ -526,16 +526,16 @@ export function getTextNodeMoves( function getButton(svg: string, pressed: boolean): HTMLButtonElement { const button = document.createElement('button'); button.innerHTML = svg; - button.style.height = '20px'; - button.style.width = '20px'; + button.style.height = '25px'; + button.style.width = '25px'; button.style.marginRight = '1px'; - button.style.marginLeft = '2px'; - button.style.marginTop = '1px'; + button.style.marginLeft = '3px'; + button.style.marginTop = '3px'; button.style.padding = '0px'; if (pressed) { - button.style.boxShadow = 'none'; + button.style.border = 'medium solid orange'; } else { - button.style.boxShadow = '0px 1px 2px rgba(0, 0, 0, 1)'; + button.style.border = 'none'; } return button; } @@ -562,9 +562,9 @@ export function getSelectButton(pressed: boolean): HTMLButtonElement { } export function pressButton(button: HTMLButtonElement) { - button.style.boxShadow = 'none'; + button.style.border = 'medium solid orange'; } export function releaseButton(button: HTMLButtonElement) { - button.style.boxShadow = '0px 1px 2px rgba(0, 0, 0, 1)'; + button.style.border = 'none'; } From b770e7c9d8140676173ff32fe568337e78d2ddb2 Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Fri, 8 Nov 2024 12:04:53 +0100 Subject: [PATCH 3/5] Disable visualization of move and select buttons if no metadata is available Signed-off-by: massimo.ferraro --- .../network-area-diagram-viewer.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 6fa3727e..01dec5dd 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 @@ -236,7 +236,7 @@ export class NetworkAreaDiagramViewer { // add buttons bar if (addButtons) { - this.container.appendChild(this.GetButtonsBar(enableNodeInteraction)); + this.container.appendChild(this.GetButtonsBar(enableNodeInteraction && hasMetadata)); } // add svg div @@ -332,13 +332,13 @@ export class NetworkAreaDiagramViewer { } } - private GetButtonsBar(enableNodeMoving: boolean): HTMLDivElement { + private GetButtonsBar(showNodeInteractionButtons: boolean): HTMLDivElement { const buttonsDiv = document.createElement('div'); buttonsDiv.style.display = 'flex'; buttonsDiv.style.alignItems = 'center'; buttonsDiv.style.position = 'absolute'; buttonsDiv.style.zIndex = '2'; - if (enableNodeMoving) { + if (showNodeInteractionButtons) { const moveButton = DiagramUtils.getMoveButton(this.mouseMode === MouseMode.MOVE); buttonsDiv.appendChild(moveButton); const selectButton = DiagramUtils.getSelectButton(this.mouseMode === MouseMode.SELECT); From 503ae12688815ab21ef7152325091574858d1f2b Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Thu, 14 Nov 2024 16:37:16 +0100 Subject: [PATCH 4/5] Fix method names Signed-off-by: massimo.ferraro --- .../network-area-diagram-viewer.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 01dec5dd..cda6c79b 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 @@ -236,7 +236,7 @@ export class NetworkAreaDiagramViewer { // add buttons bar if (addButtons) { - this.container.appendChild(this.GetButtonsBar(enableNodeInteraction && hasMetadata)); + this.container.appendChild(this.getButtonsBar(enableNodeInteraction && hasMetadata)); } // add svg div @@ -332,7 +332,7 @@ export class NetworkAreaDiagramViewer { } } - private GetButtonsBar(showNodeInteractionButtons: boolean): HTMLDivElement { + private getButtonsBar(showNodeInteractionButtons: boolean): HTMLDivElement { const buttonsDiv = document.createElement('div'); buttonsDiv.style.display = 'flex'; buttonsDiv.style.alignItems = 'center'; @@ -359,7 +359,7 @@ export class NetworkAreaDiagramViewer { buttonsDiv.appendChild(saveSvgButton); saveSvgButton.addEventListener('click', () => { if (this.onSaveCallback != null) { - this.onSaveCallback(this.getSvg(), this.getMetadata()); + this.onSaveCallback(this.getSvg(), this.getJsonMetadata()); } }); } @@ -370,7 +370,7 @@ export class NetworkAreaDiagramViewer { return this.svgDraw !== undefined ? this.svgDraw.svg() : null; } - public getMetadata(): string | null { + public getJsonMetadata(): string | null { return JSON.stringify(this.diagramMetadata); } From 767bdeac95ea2a30e296b9746ccc99f7ffe86565 Mon Sep 17 00:00:00 2001 From: "massimo.ferraro" Date: Mon, 18 Nov 2024 17:18:08 +0100 Subject: [PATCH 5/5] Add tooltip to buttons Signed-off-by: massimo.ferraro --- src/components/network-area-diagram-viewer/diagram-utils.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/network-area-diagram-viewer/diagram-utils.ts b/src/components/network-area-diagram-viewer/diagram-utils.ts index 7c0c16a3..ee724140 100644 --- a/src/components/network-area-diagram-viewer/diagram-utils.ts +++ b/src/components/network-area-diagram-viewer/diagram-utils.ts @@ -523,9 +523,10 @@ export function getTextNodeMoves( ]; } -function getButton(svg: string, pressed: boolean): HTMLButtonElement { +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'; @@ -543,6 +544,7 @@ function getButton(svg: string, pressed: boolean): HTMLButtonElement { export function getSaveButton(): HTMLButtonElement { return getButton( '', + 'Save', false ); } @@ -550,6 +552,7 @@ export function getSaveButton(): HTMLButtonElement { export function getMoveButton(pressed: boolean): HTMLButtonElement { return getButton( '', + 'Move', pressed ); } @@ -557,6 +560,7 @@ export function getMoveButton(pressed: boolean): HTMLButtonElement { export function getSelectButton(pressed: boolean): HTMLButtonElement { return getButton( '', + 'Select', pressed ); }