Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/sava_textnode-movement_for_nad' …
Browse files Browse the repository at this point in the history 
…into refactor_move-element
  • Loading branch information
@sBouzols
sBouzols committed Jan 16, 2025
2 parents 953ec93 + ba099d1 commit 0d16e71
Show file tree
Hide file tree
Showing 30 changed files with 2,021 additions and 1,021 deletions.
12 changes: 6 additions & 6 deletions demo/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@

import { useEffect, useRef } from 'react';
import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
import { GeoData, NetworkMap, NetworkMapRef } from '../../src';
import { Equipment } from '../../src/components/network-map-viewer/network/map-equipments';
import { addNadToDemo, addSldToDemo } from './diagram-viewers/add-diagrams';
import DemoMapEquipments from './map-viewer/demo-map-equipments';
import { GeoData, type MapEquipment, MapEquipments, NetworkMap, type NetworkMapRef } from '../../src';

import { addNadToDemo, addSldToDemo } from './diagram-viewers/add-diagrams';
import sposdata from './map-viewer/data/spos.json';
import lposdata from './map-viewer/data/lpos.json';
import smapdata from './map-viewer/data/smap.json';
Expand All @@ -29,7 +27,7 @@ export default function App() {
}, []);

//called after a click (right mouse click) on an equipment (line or substation)
function showEquipmentMenu(equipment: Equipment, x: number, y: number, type: string) {
function showEquipmentMenu(equipment: MapEquipment, x: number, y: number, type: string) {
console.log('# Show equipment menu: ' + JSON.stringify(equipment) + ', type: ' + type);
}

Expand Down Expand Up @@ -58,7 +56,9 @@ export default function App() {
geoData.setSubstationPositions(sposdata);
geoData.setLinePositions(lposdata);

const mapEquipments = new DemoMapEquipments(smapdata, lmapdata);
const mapEquipments = new MapEquipments();
mapEquipments.updateSubstations(smapdata, true);
mapEquipments.updateLines(lmapdata, true);

useEffect(() => {
const handleContextmenu = (e: MouseEvent) => {
Expand Down
79 changes: 74 additions & 5 deletions demo/src/diagram-viewers/add-diagrams.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,14 @@ import {
OnMoveTextNodeCallbackType,
OnSelectNodeCallbackType,
OnToggleNadHoverCallbackType,
BranchState,
} from '../../../src';

export const addNadToDemo = () => {
fetch(NadSvgExample)
.then((response) => response.text())
.then((svgContent) => {
new NetworkAreaDiagramViewer(
const nadViewer = new NetworkAreaDiagramViewer(
document.getElementById('svg-container-nad')!,
svgContent,
NadSvgExampleMeta,
Expand All @@ -61,6 +62,46 @@ export const addNadToDemo = () => {
.getElementById('svg-container-nad')
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');

// add range slider to update branch labels
const branchLabelsSlider = document.createElement('input');
branchLabelsSlider.type = 'range';
branchLabelsSlider.min = '1';
branchLabelsSlider.max = '20';
branchLabelsSlider.value = '1';
branchLabelsSlider.step = 'any';
branchLabelsSlider.style.width = '97%';
branchLabelsSlider.style.display = 'flex';
branchLabelsSlider.style.justifyContent = 'space-between';
branchLabelsSlider.style.padding = '0 5px';
branchLabelsSlider.addEventListener('input', () => {
const branchStates =
'[{"branchId": "NGEN_NHV1", "value1": ' +
(627 - +branchLabelsSlider.value * 20) +
', "value2": ' +
(-626 + +branchLabelsSlider.value * 20) +
'}, {"branchId": "NHV1_NHV2_1", "value1": ' +
(+branchLabelsSlider.value < 10 ? 322 - +branchLabelsSlider.value * 20 : 0) +
', "value2": ' +
(+branchLabelsSlider.value < 10 ? -320 + +branchLabelsSlider.value * 20 : 0) +
', "connected1": ' +
(+branchLabelsSlider.value < 10) +
', "connected2": ' +
(+branchLabelsSlider.value < 10) +
'}, {"branchId": "NHV1_NHV2_2", "value1": ' +
(322 - +branchLabelsSlider.value * 20) +
', "value2": ' +
(-320 + +branchLabelsSlider.value * 20) +
'}, {"branchId": "NHV2_NLOAD", "value1": ' +
(-620 + +branchLabelsSlider.value * 20) +
', "value2": ' +
(621 - +branchLabelsSlider.value * 20) +
'}]';
console.log(branchStates);
nadViewer.setJsonBranchStates(branchStates);
});

document.getElementById('svg-container-nad')?.appendChild(branchLabelsSlider);
});

fetch(NadSvgExample)
Expand Down Expand Up @@ -92,7 +133,7 @@ export const addNadToDemo = () => {
fetch(NadSvgMultibusVLNodesExample)
.then((response) => response.text())
.then((svgContent) => {
new NetworkAreaDiagramViewer(
const nadViewer = new NetworkAreaDiagramViewer(
document.getElementById('svg-container-nad-multibus-vlnodes')!,
svgContent,
NadSvgMultibusVLNodesExampleMeta,
Expand All @@ -113,6 +154,25 @@ export const addNadToDemo = () => {
.getElementById('svg-container-nad-multibus-vlnodes')
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');

// add button to update branch labels
const branchLabels = '[{"branchId": "L7-5-0", "value1": 609, "value2": -611}]';
const updateFlowsTextArea = document.createElement('textarea');
updateFlowsTextArea.rows = 2;
updateFlowsTextArea.cols = 65;
updateFlowsTextArea.value = branchLabels;
const br = document.createElement('br');
const updateFlowsButton = document.createElement('button');
updateFlowsButton.innerHTML = 'Update Branch Labels';
updateFlowsButton.addEventListener('click', () => {
const branchStatesArray: BranchState[] = JSON.parse(updateFlowsTextArea.value);
nadViewer.setBranchStates(branchStatesArray);
});
const updateFlowsDiv = document.createElement('div');
updateFlowsDiv.appendChild(updateFlowsTextArea);
updateFlowsDiv.appendChild(br);
updateFlowsDiv.appendChild(updateFlowsButton);
document.getElementById('svg-container-nad-multibus-vlnodes')?.appendChild(updateFlowsDiv);
});

fetch(NadSvgMultibusVLNodes14Example)
Expand Down Expand Up @@ -193,6 +253,9 @@ export const addNadToDemo = () => {
.setAttribute('style', 'border:2px; border-style:solid;');
});

const enableLevelOfDetail: boolean =
new URLSearchParams(window.location.search).get('enableLevelOfDetail') === 'true';

fetch(NadSvgPartialNetworkExample)
.then((response) => response.text())
.then((svgContent) => {
Expand All @@ -208,15 +271,21 @@ export const addNadToDemo = () => {
handleTextNodeMove,
handleNodeSelect,
true,
true,
enableLevelOfDetail,
null,
handleToggleNadHover
);

document
.getElementById('svg-container-nad-partial-network')
const svgContainerNadPartialNetwork = document.getElementById('svg-container-nad-partial-network');

svgContainerNadPartialNetwork
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');

svgContainerNadPartialNetwork.insertAdjacentHTML(
'afterbegin',
`<p>enableLevelOfDetail=${enableLevelOfDetail}, <a href=".?enableLevelOfDetail=${!enableLevelOfDetail}">reload toggle enableLevelOfDetail</a></p>`
);
});
};

Expand Down
16 changes: 8 additions & 8 deletions demo/src/diagram-viewers/data/nad-eurostag-tutorial-example1.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 0 additions & 23 deletions demo/src/map-viewer/demo-map-equipments.ts
View file

This file was deleted.

Loading

0 comments on commit 0d16e71

Please sign in to comment.