(null);
+
+ const mToken = !mapBoxToken ? FALLBACK_MAPBOX_TOKEN : mapBoxToken;
+
+ useEffect(() => {
+ if (centerOnSubstation === null) {
+ return;
+ }
+ setCentered({
+ lastCenteredSubstation: null,
+ centeredSubstationId: centerOnSubstation?.to,
+ centered: true,
+ });
+ }, [centerOnSubstation]);
+
+ // TODO simplify this, now we use Map as the camera controlling component
+ // so we don't need the deckgl ref anymore. The following comments are
+ // probably outdated, cleanup everything:
+ // Do this in onAfterRender because when doing it in useEffect (triggered by calling setDeck()),
+ // it doesn't work in the case of using the browser backward/forward buttons (because in this particular case,
+ // we get the ref to the deck and it has not yet initialized..)
+ function onAfterRender() {
+ // TODO outdated comment
+ //use centered and deck to execute this block only once when the data is ready and deckgl is initialized
+ //TODO, replace the next lines with setProps( { initialViewState } ) when we upgrade to 8.1.0
+ //see https://github.com/uber/deck.gl/pull/4038
+ //This is a hack because it accesses the properties of deck directly but for now it works
+ if (
+ (!centered.centered ||
+ (centered.centeredSubstationId &&
+ centered.centeredSubstationId !==
+ centered.lastCenteredSubstation)) &&
+ geoData !== null
+ ) {
+ if (geoData.substationPositionsById.size > 0) {
+ if (centered.centeredSubstationId) {
+ const geodata = geoData.substationPositionsById.get(
+ centered.centeredSubstationId
+ );
+ if (!geodata) {
+ return;
+ } // can't center on substation if no coordinate.
+ mapRef.current?.flyTo({
+ center: [geodata.lon, geodata.lat],
+ duration: 2000,
+ });
+ setCentered({
+ lastCenteredSubstation:
+ centered.centeredSubstationId,
+ centeredSubstationId: centered.centeredSubstationId,
+ centered: true,
+ });
+ } else {
+ const coords = Array.from(
+ geoData.substationPositionsById.entries()
+ ).map((x) => x[1]);
+ const maxlon = Math.max.apply(
+ null,
+ coords.map((x) => x.lon)
+ );
+ const minlon = Math.min.apply(
+ null,
+ coords.map((x) => x.lon)
+ );
+ const maxlat = Math.max.apply(
+ null,
+ coords.map((x) => x.lat)
+ );
+ const minlat = Math.min.apply(
+ null,
+ coords.map((x) => x.lat)
+ );
+ const marginlon = (maxlon - minlon) / 10;
+ const marginlat = (maxlat - minlat) / 10;
+ mapRef.current?.fitBounds(
+ [
+ [
+ minlon - marginlon / 2,
+ minlat - marginlat / 2,
+ ],
+ [
+ maxlon + marginlon / 2,
+ maxlat + marginlat / 2,
+ ],
+ ],
+ { animate: false }
+ );
+ setCentered({
+ lastCenteredSubstation: null,
+ centered: true,
+ });
+ }
+ }
+ }
+ }
+
+ function onViewStateChange(info: ViewStateChangeEvent) {
+ lastViewStateRef.current = info.viewState;
+ if (
+ // @ts-expect-error: TODO fix interactionState
+ !info.interactionState || // first event of before an animation (e.g. clicking the +/- buttons of the navigation controls, gives the target
+ // @ts-expect-error: TODO fix interactionState
+ (info.interactionState && !info.interactionState.inTransition) // Any event not part of a animation (mouse panning or zooming)
+ ) {
+ if (
+ info.viewState.zoom >= labelsZoomThreshold &&
+ !labelsVisible
+ ) {
+ setLabelsVisible(true);
+ } else if (
+ info.viewState.zoom < labelsZoomThreshold &&
+ labelsVisible
+ ) {
+ setLabelsVisible(false);
+ }
+ setShowTooltip(info.viewState.zoom >= tooltipZoomThreshold);
+ setShowLineFlow(info.viewState.zoom >= arrowsZoomThreshold);
+ }
+ }
+
+ function renderTooltip() {
+ return (
+ tooltip &&
+ tooltip.visible &&
+ !shouldDisableToolTip &&
+ //As of now only LINE tooltip is implemented, the following condition is to be removed or tweaked once other types of line tooltip are implemented
+ tooltip.equipmentType === EQUIPMENT_TYPES.LINE && (
+
+ {tooltip.equipmentId &&
+ divRef.current &&
+ renderPopover(tooltip.equipmentId, divRef.current)}
+
+ )
+ );
+ }
+
+ function onClickHandler(
+ info: PickingInfo>,
+ event: mapboxgl.MapLayerMouseEvent | maplibregl.MapLayerMouseEvent,
+ network: MapEquipments
+ ) {
+ const leftButton =
+ event.originalEvent.button === MOUSE_EVENT_BUTTON_LEFT;
+ const rightButton =
+ event.originalEvent.button === MOUSE_EVENT_BUTTON_RIGHT;
+ if (
+ info.layer &&
+ info.layer.id.startsWith(SUBSTATION_LAYER_PREFIX) &&
+ info.object &&
+ (isSubstation(info.object) || isVoltageLevel(info.object)) // is a voltage level marker, or a substation text
+ ) {
+ let idVl;
+ let idSubstation;
+ if (isVoltageLevel(info.object)) {
+ idVl = info.object.id;
+ } else if (isSubstation(info.object)) {
+ if (info.object.voltageLevels.length === 1) {
+ const idS = info.object.voltageLevels[0].substationId;
+ const substation = network?.getSubstation(idS);
+ if (substation && substation.voltageLevels.length > 1) {
+ idSubstation = idS;
+ } else {
+ idVl = info.object.voltageLevels[0].id;
+ }
+ } else {
+ idSubstation =
+ info.object.voltageLevels[0].substationId;
+ }
+ }
+ if (idVl !== undefined) {
+ if (onSubstationClick && leftButton) {
+ onSubstationClick(idVl);
+ } else if (onVoltageLevelMenuClick && rightButton) {
+ onVoltageLevelMenuClick(
+ network.getVoltageLevel(idVl)!,
+ event.originalEvent.x,
+ event.originalEvent.y
+ );
+ }
+ }
+ if (idSubstation !== undefined) {
+ if (onSubstationClickChooseVoltageLevel && leftButton) {
+ onSubstationClickChooseVoltageLevel(
+ idSubstation,
+ event.originalEvent.x,
+ event.originalEvent.y
+ );
+ } else if (onSubstationMenuClick && rightButton) {
+ onSubstationMenuClick(
+ network.getSubstation(idSubstation)!,
+ event.originalEvent.x,
+ event.originalEvent.y
+ );
+ }
+ }
+ }
+ if (
+ rightButton &&
+ info.layer &&
+ info.layer.id.startsWith(LINE_LAYER_PREFIX) &&
+ info.object &&
+ isLine(info.object)
+ ) {
+ // picked line properties are retrieved from network data and not from pickable object infos,
+ // because pickable object infos might not be up to date
+ const line = network.getLine(info.object.id);
+ const tieLine = network.getTieLine(info.object.id);
+ const hvdcLine = network.getHvdcLine(info.object.id);
+
+ const equipment = line || tieLine || hvdcLine;
+ if (equipment) {
+ const menuClickFunction =
+ equipment === line
+ ? onLineMenuClick
+ : equipment === tieLine
+ ? onTieLineMenuClick
+ : onHvdcLineMenuClick;
+
+ menuClickFunction(
+ equipment,
+ event.originalEvent.x,
+ event.originalEvent.y
+ );
+ }
+ }
+ }
+
+ function onMapContextMenu(
+ event: mapboxgl.MapLayerMouseEvent | maplibregl.MapLayerMouseEvent
+ ) {
+ const info =
+ deckRef.current &&
+ deckRef.current.pickObject({
+ x: event.point.x,
+ y: event.point.y,
+ radius: PICKING_RADIUS,
+ });
+ info && mapEquipments && onClickHandler(info, event, mapEquipments);
+ }
+
+ function cursorHandler() {
+ return isDragging ? 'grabbing' : cursorType;
+ }
+
+ const layers = [];
+
+ if (readyToDisplaySubstations) {
+ layers.push(
+ new SubstationLayer({
+ id: SUBSTATION_LAYER_PREFIX,
+ data: mapEquipments?.substations,
+ network: mapEquipments,
+ geoData: geoData,
+ getNominalVoltageColor: getNominalVoltageColor,
+ filteredNominalVoltages: filteredNominalVoltages,
+ labelsVisible: labelsVisible,
+ labelColor: foregroundNeutralColor,
+ labelSize: LABEL_SIZE,
+ pickable: true,
+ onHover: ({ object }) => {
+ setCursorType(object ? 'pointer' : 'grab');
+ },
+ getNameOrId: getNameOrId,
+ })
+ );
+ }
+
+ if (readyToDisplayLines) {
+ layers.push(
+ new LineLayer({
+ areFlowsValid: areFlowsValid,
+ id: LINE_LAYER_PREFIX,
+ data: mapEquipmentsLines,
+ network: mapEquipments,
+ updatedLines: updatedLines,
+ geoData: geoData,
+ getNominalVoltageColor: getNominalVoltageColor,
+ disconnectedLineColor: foregroundNeutralColor,
+ filteredNominalVoltages: filteredNominalVoltages,
+ lineFlowMode: lineFlowMode,
+ showLineFlow: visible && showLineFlow,
+ lineFlowColorMode: lineFlowColorMode,
+ lineFlowAlertThreshold: lineFlowAlertThreshold,
+ lineFullPath:
+ geoData.linePositionsById.size > 0 && lineFullPath,
+ lineParallelPath: lineParallelPath,
+ labelsVisible: labelsVisible,
+ labelColor: foregroundNeutralColor,
+ labelSize: LABEL_SIZE,
+ pickable: true,
+ onHover: ({
+ object: lineObject,
+ x,
+ y,
+ }: PickingInfo) => {
+ if (lineObject) {
+ setCursorType('pointer');
+ setTooltip({
+ equipmentId: lineObject?.id,
+ equipmentType: (lineObject as EquimentLine)
+ ?.equipmentType,
+ pointerX: x,
+ pointerY: y,
+ visible: showTooltip,
+ });
+ } else {
+ setCursorType('grab');
+ setTooltip(null);
+ }
+ },
+ })
+ );
+ }
+
+ const initialViewState = {
+ longitude: initialPosition[0],
+ latitude: initialPosition[1],
+ zoom: initialZoom,
+ maxZoom: 14,
+ pitch: 0,
+ bearing: 0,
+ };
+
+ const renderOverlay = () => (
+
+ );
+
+ useEffect(() => {
+ mapRef.current?.resize();
+ }, [mapRef, triggerMapResizeOnChange]);
+
+ const getMapStyle = (mapLibrary: MapLibrary, mapTheme: MapTheme) => {
+ switch (mapLibrary) {
+ case MAPBOX:
+ if (mapTheme === LIGHT) {
+ return 'mapbox://styles/mapbox/light-v9';
+ } else {
+ return 'mapbox://styles/mapbox/dark-v9';
+ }
+ case CARTO:
+ if (mapTheme === LIGHT) {
+ return 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+ } else {
+ return 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
+ }
+ case CARTO_NOLABEL:
+ if (mapTheme === LIGHT) {
+ return 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
+ } else {
+ return 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json';
+ }
+ default:
+ return 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+ }
+ };
+
+ const mapStyle = useMemo(
+ () => getMapStyle(mapLibrary, mapTheme),
+ [mapLibrary, mapTheme]
+ );
+
+ const key = mapLibrary === MAPBOX && mToken ? 'mapboxgl' : 'maplibregl';
+
+ const mapLib =
+ mapLibrary === MAPBOX && mToken
+ ? {
+ mapLib: mapboxgl,
+ mapboxAccessToken: mToken,
+ }
+ : {
+ mapLib: maplibregl,
+ };
+
+ // because the mapLib prop of react-map-gl is not reactive, we need to
+ // unmount/mount the Map with 'key', so we need also to reset all state
+ // associated with uncontrolled state of the map
+ useEffect(() => {
+ setCentered(INITIAL_CENTERED);
+ }, [key]);
+
+ const onUpdate = useCallback(() => {
+ onPolygonChanged(getPolygonFeatures());
+ onDrawEvent(DRAW_EVENT.UPDATE);
+ }, [onDrawEvent, onPolygonChanged]);
+
+ const onCreate = useCallback(() => {
+ onPolygonChanged(getPolygonFeatures());
+ onDrawEvent(DRAW_EVENT.CREATE);
+ }, [onDrawEvent, onPolygonChanged]);
+ const getSelectedLines = useCallback(() => {
+ const polygonFeatures = getPolygonFeatures();
+ const polygonCoordinates = polygonFeatures?.geometry;
+ if (
+ !polygonCoordinates ||
+ polygonCoordinates.type !== 'Polygon' ||
+ polygonCoordinates.coordinates[0].length < 3
+ ) {
+ return [];
+ }
+ //for each line, check if it is in the polygon
+ const selectedLines = getSelectedLinesInPolygon(
+ mapEquipments,
+ mapEquipmentsLines,
+ geoData,
+ polygonCoordinates as Polygon
+ );
+ return selectedLines.filter((line) => {
+ return filteredNominalVoltages!.some((nv) => {
+ return (
+ nv ===
+ mapEquipments!.getVoltageLevel(
+ line.voltageLevelId1
+ )!.nominalV ||
+ nv ===
+ mapEquipments!.getVoltageLevel(
+ line.voltageLevelId2
+ )!.nominalV
+ );
+ });
+ });
+ }, [
+ mapEquipments,
+ mapEquipmentsLines,
+ geoData,
+ filteredNominalVoltages,
+ ]);
+
+ const getSelectedSubstations = useCallback(() => {
+ const substations = getSubstationsInPolygon(
+ getPolygonFeatures(),
+ mapEquipments,
+ geoData
+ );
+ if (filteredNominalVoltages === null) {
+ return substations;
+ }
+ return (
+ substations.filter((substation) => {
+ return substation.voltageLevels.some((vl) =>
+ filteredNominalVoltages.includes(vl.nominalV)
+ );
+ }) ?? []
+ );
+ }, [mapEquipments, geoData, filteredNominalVoltages]);
+
+ useImperativeHandle(
+ ref,
+ () => ({
+ getSelectedSubstations,
+ getSelectedLines,
+ cleanDraw() {
+ //because deleteAll does not trigger a update of the polygonFeature callback
+ getMapDrawer()?.deleteAll();
+ onPolygonChanged(getPolygonFeatures());
+ onDrawEvent(DRAW_EVENT.DELETE);
+ },
+ getMapDrawer,
+ }),
+ [
+ onPolygonChanged,
+ getSelectedSubstations,
+ getSelectedLines,
+ onDrawEvent,
+ ]
+ );
+
+ const onDelete = useCallback(() => {
+ onPolygonChanged(getPolygonFeatures());
+ onDrawEvent(DRAW_EVENT.DELETE);
+ }, [onPolygonChanged, onDrawEvent]);
+
+ return (
+
+ );
+ }
+);
+
+export default React.memo(NetworkMap);
+
+function getSubstationsInPolygon(
+ features: Partial, // Feature from geojson
+ mapEquipments: MapEquipments | null,
+ geoData: GeoData | null
+) {
+ const polygonCoordinates = features?.geometry;
+ if (
+ !geoData ||
+ !polygonCoordinates ||
+ polygonCoordinates.type !== 'Polygon' ||
+ polygonCoordinates.coordinates[0].length < 3
+ ) {
+ return [];
+ }
+ //get the list of substation
+ const substationsList = mapEquipments?.substations ?? [];
+ //for each substation, check if it is in the polygon
+ return substationsList // keep only the sybstation in the polygon
+ .filter((substation) => {
+ const pos = geoData.getSubstationPosition(substation.id);
+ return booleanPointInPolygon(pos, polygonCoordinates);
+ });
+}
+
+function getSelectedLinesInPolygon(
+ network: MapEquipments | null,
+ lines: Line[],
+ geoData: GeoData | null,
+ polygonCoordinates: Polygon
+) {
+ return lines.filter((line) => {
+ try {
+ const linePos = network
+ ? geoData?.getLinePositions(network, line)
+ : null;
+ if (!linePos) {
+ return false;
+ }
+ if (linePos.length < 2) {
+ return false;
+ }
+ const extremities = [linePos[0], linePos[linePos.length - 1]];
+ return extremities.some((pos) =>
+ booleanPointInPolygon(pos, polygonCoordinates)
+ );
+ } catch (error) {
+ console.error(error);
+ return false;
+ }
+ });
+}
diff --git a/src/components/network-map-viewer/utils/equipment-types.js b/src/components/network-map-viewer/utils/equipment-types.js
deleted file mode 100644
index 0bc25e77..00000000
--- a/src/components/network-map-viewer/utils/equipment-types.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2023, RTE (http://www.rte-france.com)
- * 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/.
- */
-
-export const EQUIPMENT_INFOS_TYPES = {
- LIST: { type: 'LIST' },
- MAP: { type: 'MAP' },
- FORM: { type: 'FORM' },
- TAB: { type: 'TAB' },
- TOOLTIP: { type: 'TOOLTIP' },
-};
-
-export const EQUIPMENT_TYPES = {
- SUBSTATION: 'SUBSTATION',
- VOLTAGE_LEVEL: 'VOLTAGE_LEVEL',
- LINE: 'LINE',
- TWO_WINDINGS_TRANSFORMER: 'TWO_WINDINGS_TRANSFORMER',
- THREE_WINDINGS_TRANSFORMER: 'THREE_WINDINGS_TRANSFORMER',
- HVDC_LINE: 'HVDC_LINE',
- GENERATOR: 'GENERATOR',
- BATTERY: 'BATTERY',
- LOAD: 'LOAD',
- SHUNT_COMPENSATOR: 'SHUNT_COMPENSATOR',
- TIE_LINE: 'TIE_LINE',
- DANGLING_LINE: 'DANGLING_LINE',
- STATIC_VAR_COMPENSATOR: 'STATIC_VAR_COMPENSATOR',
- HVDC_CONVERTER_STATION: 'HVDC_CONVERTER_STATION',
- VSC_CONVERTER_STATION: 'VSC_CONVERTER_STATION',
- LCC_CONVERTER_STATION: 'LCC_CONVERTER_STATION',
- SWITCH: 'SWITCH',
-};
diff --git a/src/components/network-map-viewer/utils/equipmentInfosHandler.js b/src/components/network-map-viewer/utils/equipmentInfosHandler.ts
similarity index 75%
rename from src/components/network-map-viewer/utils/equipmentInfosHandler.js
rename to src/components/network-map-viewer/utils/equipmentInfosHandler.ts
index 29283c45..57a55565 100644
--- a/src/components/network-map-viewer/utils/equipmentInfosHandler.js
+++ b/src/components/network-map-viewer/utils/equipmentInfosHandler.ts
@@ -7,14 +7,19 @@
import { useCallback } from 'react';
-export const useNameOrId = (useName) => {
+type EquipmentInfos = {
+ id: string;
+ name: string | null;
+};
+
+export const useNameOrId = (useName: boolean) => {
const getNameOrId = useCallback(
- (infos) => {
+ (infos: EquipmentInfos | null) => {
if (infos != null) {
const name = infos.name;
return useName && name != null && name.trim() !== ''
? name
- : infos?.id;
+ : infos?.id ?? null;
}
return null;
},
diff --git a/src/components/network-map-viewer/utils/loader-with-overlay.jsx b/src/components/network-map-viewer/utils/loader-with-overlay.tsx
similarity index 69%
rename from src/components/network-map-viewer/utils/loader-with-overlay.jsx
rename to src/components/network-map-viewer/utils/loader-with-overlay.tsx
index 39a4ab8c..c78ca5e1 100644
--- a/src/components/network-map-viewer/utils/loader-with-overlay.jsx
+++ b/src/components/network-map-viewer/utils/loader-with-overlay.tsx
@@ -5,12 +5,18 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
-import React from 'react';
-import { CircularProgress } from '@mui/material';
+import { CircularProgress, CircularProgressProps } from '@mui/material';
+import { Box, SxProps, Theme } from '@mui/system';
import { FormattedMessage } from 'react-intl';
-import { Box } from '@mui/system';
-const styles = {
+type LoaderWithOverlayProps = {
+ color: CircularProgressProps['color'];
+ loaderSize: CircularProgressProps['size'];
+ loadingMessageText: string;
+ isFixed: boolean;
+};
+
+const styles: Record> = {
overlay: {
top: 0,
bottom: 0,
@@ -28,12 +34,12 @@ const styles = {
},
};
-const LoaderWithOverlay = ({
+export default function LoaderWithOverlay({
color,
loaderSize,
loadingMessageText,
isFixed,
-}) => {
+}: Readonly) {
return (
);
-};
-
-export default LoaderWithOverlay;
+}
diff --git a/src/index.d.ts b/src/index.d.ts
deleted file mode 100644
index 352084f4..00000000
--- a/src/index.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2024, RTE (http://www.rte-france.com)
- * 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/.
- */
-
-export { DRAW_MODES } from './components/network-map-viewer/network/draw-control';
diff --git a/src/index.js b/src/index.ts
similarity index 54%
rename from src/index.js
rename to src/index.ts
index 109c8184..9f63612b 100644
--- a/src/index.js
+++ b/src/index.ts
@@ -5,19 +5,29 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
-export { NetworkAreaDiagramViewer } from './components/network-area-diagram-viewer/network-area-diagram-viewer';
-export { SingleLineDiagramViewer } from './components/single-line-diagram-viewer/single-line-diagram-viewer';
-export { GeoData } from './components/network-map-viewer/network/geo-data';
export {
- LineFlowMode,
+ GeoData,
LineFlowColorMode,
- LineLoadingZone,
- getLineLoadingZone,
-} from './components/network-map-viewer/network/line-layer';
-export { MapEquipments } from './components/network-map-viewer/network/map-equipments';
+ LineFlowMode,
+ MapEquipments,
+} from '@powsybl/network-map-layers';
+export { SingleLineDiagramViewer } from '@powsybl/single-line-diagram-viewer';
+export type {
+ HandleTogglePopoverType,
+ OnBreakerCallbackType,
+ OnBusCallbackType,
+ OnFeederCallbackType,
+ OnNextVoltageCallbackType,
+ SLDMetadata,
+ SLDMetadataComponent,
+ SLDMetadataComponentSize,
+ SLDMetadataNode,
+} from '@powsybl/single-line-diagram-viewer';
+export { NetworkAreaDiagramViewer } from './components/network-area-diagram-viewer/network-area-diagram-viewer';
export {
- default as NetworkMap,
DRAW_EVENT,
+ default as NetworkMap,
} from './components/network-map-viewer/network/network-map';
+export type { NetworkMapRef } from './components/network-map-viewer/network/network-map';
export { DRAW_MODES } from './components/network-map-viewer/network/draw-control';
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..ee9857a6
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+///
+///
diff --git a/tsconfig.json b/tsconfig.json
index da928dc5..7a8b5d44 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,17 +1,23 @@
{
- "compilerOptions": {
- "module": "esnext",
- "target": "es6",
- "declaration": true,
- "outDir": "./dist",
- "strict": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "forceConsistentCasingInFileNames": true,
- "allowSyntheticDefaultImports": true,
- "noFallthroughCasesInSwitch": true,
- "moduleResolution": "node",
- "noEmit": true
- },
- "include": ["src", "demo"] // we can let demo because the file generation is managed my vite and we have noEmit anyway
-}
\ No newline at end of file
+ "compilerOptions": {
+ "module": "esnext",
+ "lib": ["ES2022"],
+ "target": "ESNext",
+ "declaration": true,
+ "outDir": "./dist",
+ "strict": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "allowSyntheticDefaultImports": true,
+ "noFallthroughCasesInSwitch": true,
+ "moduleResolution": "node",
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "resolveJsonModule": true,
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["src", "demo"] // we can let demo because the file generation is managed my vite and we have noEmit anyway
+}
diff --git a/vite.config.ts b/vite.config.ts
index 4871cacf..fee066cc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,45 +5,41 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
+import react from '@vitejs/plugin-react';
+import * as path from 'node:path';
import { defineConfig } from 'vite';
-import { resolve } from 'path';
-import eslint from 'vite-plugin-eslint';
import dts from 'vite-plugin-dts';
-import react from '@vitejs/plugin-react';
-import { externalizeDeps } from 'vite-plugin-externalize-deps';
+import svgr from 'vite-plugin-svgr';
-export default defineConfig((config) => ({
+export default defineConfig((_config) => ({
plugins: [
react(),
- eslint({
- failOnWarning: config.mode !== 'development',
- lintOnStart: true,
- }),
- dts({
- include: ['src'],
- }),
- //https://stackoverflow.com/questions/59134241/using-deck-gl-as-webpack-external
- //https://github.com/visgl/deck.gl/blob/94bad4bb209a5da0686fb03f107e86b18199c108/website/webpack.config.js#L128-L141
- externalizeDeps({
- include: [
- /^@deck.gl(?:\/.*)?$/,
- /^@loaders.gl(?:\/.*)?$/,
- /^@luma.gl(?:\/.*)?$/,
- /^@probe.gl(?:\/.*)?$/,
- 'prop-types',
- ],
- }),
+ svgr(), // works on every import with the pattern "**/*.svg?react"
+ // eslint({
+ // failOnWarning: config.mode !== 'development',
+ // lintOnStart: true,
+ // }),
+ dts(),
],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ },
+ },
build: {
- minify: false,
+ minify: false, // easier to debug on the apps using this lib
lib: {
// Could also be a dictionary or array of multiple entry points
- entry: resolve(__dirname, 'src/index.js'),
- name: 'Powsybl diagram viewer',
+ entry: path.resolve(__dirname, 'src/index.ts'),
+ name: 'PowSyBl diagram viewer',
// the proper extensions will be added
fileName: 'powsybl-diagram-viewer',
},
rollupOptions: {
+ //https://stackoverflow.com/questions/59134241/using-deck-gl-as-webpack-external
+ //https://github.com/visgl/deck.gl/blob/94bad4bb209a5da0686fb03f107e86b18199c108/website/webpack.config.js#L128-L141
+ external: (id: string) =>
+ !id.startsWith('.') && !path.isAbsolute(id),
output: {
// preserveModules: true,
// entryFileNames: '[name].js', // override vite and allow to keep the original tree and .js extension even in ESM
@@ -73,6 +69,13 @@ export default defineConfig((config) => ({
'@luma.gl/constants': 'LumaGlConstants',
'@luma.gl/core': 'LumaGlCore',
'@svgdotjs/svg.js': 'SvgJs',
+ '@powsybl/network-map-layers': 'PowsyblNetworkMapLayers',
+ '@powsybl/single-line-diagram-viewer':
+ 'PowsyblSingleLineDiagramViewer',
+ 'react-map-gl/maplibre': 'ReactMapGlMaplibre',
+ '@mapbox/mapbox-gl-draw': 'MapboxGlDraw',
+ '@turf/boolean-point-in-polygon':
+ 'TurfBooleanPointInPolygon',
},
},
},