forked from CITKParus/P8-Panels
125 lines
5.4 KiB
JavaScript
125 lines
5.4 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - Примеры для разработчиков
|
||
Пример: Интерактивные изображения "P8PSVG"
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState, useEffect } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Typography, Grid, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio } from "@mui/material"; //Интерфейсные элементы
|
||
import { P8PSVG } from "../../components/p8p_svg"; //Интерактивные изображения
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Адрес тестового изображения
|
||
const SAMPLE_URL = "img/sample.svg";
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||
TITLE: { paddingBottom: "15px" },
|
||
FORM: { justifyContent: "center", alignItems: "center" },
|
||
SVG: { height: "30vw", display: "flex", justifyContent: "center" }
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Пример: Интерактивные изображения "P8PSVG"
|
||
const Svg = ({ title }) => {
|
||
//Собственное состояние - SVG-изображение
|
||
const [svg, setSVG] = useState({
|
||
loaded: false,
|
||
data: null,
|
||
mode: "items1",
|
||
items1: [
|
||
{ id: "1", backgroundColor: "red", desc: "Цифра на флюзеляже", title: "Цифра на флюзеляже" },
|
||
{ id: "2", backgroundColor: "magenta", desc: "Ребро флюзеляжа", title: "Ребро флюзеляжа" },
|
||
{ id: "3", backgroundColor: "yellow", desc: "Люк", title: "Люк" }
|
||
],
|
||
items2: [
|
||
{ id: "4", backgroundColor: "green", desc: "Хвост", title: "Хвост" },
|
||
{ id: "5", backgroundColor: "blue", desc: "Хвостовой руль", title: "Хвостовой руль" },
|
||
{ id: "6", backgroundColor: "aquamarine", desc: "Ребро жесткости хвоста", title: "Ребро жесткости хвоста" }
|
||
],
|
||
items3: [
|
||
{ id: "7", backgroundColor: "blueviolet", desc: "Крыло левое", title: "Крыло левое" },
|
||
{ id: "8", backgroundColor: "orange", desc: "Двигатель левый", title: "Двигатель левый" },
|
||
{ id: "9", backgroundColor: "springgreen", desc: "Крыло правое", title: "Крыло правое" }
|
||
],
|
||
selectedItemDesc: ""
|
||
});
|
||
|
||
//Загрузка изображения
|
||
const loadSVG = async () => {
|
||
const resp = await fetch(SAMPLE_URL);
|
||
const data = await resp.text();
|
||
setSVG(pv => ({ ...pv, loaded: true, data }));
|
||
};
|
||
|
||
//Отработка нажатия на изображение
|
||
const handleSVGClick = () => {
|
||
setSVG(pv => ({ ...pv, selectedItemDesc: "Выбрано изображение целиком" }));
|
||
};
|
||
|
||
//Отработка нажатия на элемент изображения
|
||
const handleSVGItemClick = ({ item }) => {
|
||
setSVG(pv => ({ ...pv, selectedItemDesc: item?.desc ? `Выбран элемент: ${item.desc}` : "Для выбранного элемента не задано описание" }));
|
||
};
|
||
|
||
//При подключении к странице
|
||
useEffect(() => {
|
||
loadSVG();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<div style={STYLES.CONTAINER}>
|
||
<Typography sx={STYLES.TITLE} variant={"h6"}>
|
||
{title}
|
||
</Typography>
|
||
<FormControl sx={STYLES.FORM}>
|
||
<FormLabel>Группа элементов</FormLabel>
|
||
<RadioGroup row value={svg.mode} onChange={e => setSVG(pv => ({ ...pv, mode: e.target.value, selectedItemDesc: "" }))}>
|
||
<FormControlLabel value="items1" control={<Radio />} label="Первая" />
|
||
<FormControlLabel value="items2" control={<Radio />} label="Вторая" />
|
||
<FormControlLabel value="items3" control={<Radio />} label="Третья" />
|
||
</RadioGroup>
|
||
<FormLabel>{svg.selectedItemDesc ? svg.selectedItemDesc : "Нажмите на элемент изображения для получения его описания"}</FormLabel>
|
||
</FormControl>
|
||
<Grid container spacing={0} pt={5} direction="column" alignItems="center">
|
||
<Grid item xs={12}>
|
||
{svg.loaded ? (
|
||
<P8PSVG
|
||
data={svg.data}
|
||
items={svg[svg.mode]}
|
||
onClick={handleSVGClick}
|
||
onItemClick={handleSVGItemClick}
|
||
canvasStyle={STYLES.SVG}
|
||
fillOpacity={"0.4"}
|
||
/>
|
||
) : null}
|
||
</Grid>
|
||
</Grid>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Пример: Интерактивные изображения "P8PSVG"
|
||
Svg.propTypes = {
|
||
title: PropTypes.string.isRequired
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { Svg };
|