diff --git a/dist/p8-panels.js b/dist/p8-panels.js index 37aedf2..73f7d3b 100644 --- a/dist/p8-panels.js +++ b/dist/p8-panels.js @@ -3579,7 +3579,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ P8PSVG: () => (/* binding */ P8PSVG)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/*\r\n Парус 8 - Панели мониторинга\r\n Компонент: Интерактивные изображения SVG\r\n*/\n\n//---------------------\n//Подключение библиотек\n//---------------------\n\n //Классы React\n //Контроль свойств компонента\n\n//---------\n//Константы\n//---------\n\n//Стили\nconst STYLES = {\n CANVAS: {\n width: \"100%\",\n height: \"100%\"\n }\n};\n\n//Структура элемента изображения\nconst P8P_SVG_ITEM_SHAPE = prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({\n id: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string).isRequired,\n backgroundColor: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_1___default().string))])\n});\n\n//-----------\n//Тело модуля\n//-----------\n\n//Интерактивные изображения SVG\nconst P8PSVG = ({\n data,\n items,\n onClick,\n style\n}) => {\n //Ссылки на DOM\n const svgContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const svgRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n\n //Обработка нажатия на элемент изображения\n const handleClick = e => {\n if (e.target.id && items && onClick) {\n const item = items.find(item => item.id == e.target.id);\n if (item) onClick({\n item\n });\n }\n };\n\n //Формирование интерактивных элементов изображения\n const makeSVGItems = () => {\n items.forEach(item => {\n const svgE = document.getElementById(item.id);\n if (svgE) {\n svgE.setAttribute(\"style\", `${onClick ? \"cursor: pointer\" : \"\"}; ${item.backgroundColor ? `fill: ${item.backgroundColor}` : \"\"}`);\n if (item?.title) {\n const titleE = document.createElementNS(\"http://www.w3.org/2000/svg\", \"title\");\n titleE.textContent = item.title;\n svgE.replaceChildren(titleE);\n }\n }\n });\n };\n\n //Загрузка изображения\n const loadSVG = () => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(data, \"image/svg+xml\");\n svgRef.current = doc.documentElement;\n svgRef.current.onclick = handleClick;\n svgContainerRef.current.replaceChildren(svgRef.current);\n if (items) makeSVGItems(items);\n };\n\n //При обновлении данных\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n loadSVG();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [data, items]);\n\n //Генерация содержимого\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n ref: svgContainerRef,\n style: {\n ...STYLES.CANVAS,\n ...(style ? style : {})\n }\n });\n};\n\n//Контроль свойств - Интерактивные изображения SVG\nP8PSVG.propTypes = {\n data: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string).isRequired,\n items: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf(P8P_SVG_ITEM_SHAPE),\n onClick: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),\n style: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)\n};\n\n//----------------\n//Интерфейс модуля\n//----------------\n\n\n\n//# sourceURL=webpack://parus_8_panels_plugin/./app/components/p8p_svg.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ P8PSVG: () => (/* binding */ P8PSVG)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Icon/Icon.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/*\r\n Парус 8 - Панели мониторинга\r\n Компонент: Интерактивные изображения SVG\r\n*/\n\n//---------------------\n//Подключение библиотек\n//---------------------\n\n //Классы React\n //Интерфейсные элементы\n //Контроль свойств компонента\n\n//---------\n//Константы\n//---------\n\n//Стили\nconst STYLES = {\n CANVAS: {\n width: \"100%\",\n height: \"100%\"\n },\n CONTROLS: {\n justifyContent: \"center\",\n alignItems: \"center\",\n display: \"flex\"\n }\n};\n\n//Структура элемента изображения\nconst P8P_SVG_ITEM_SHAPE = prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({\n id: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string).isRequired,\n backgroundColor: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_1___default().string))])\n});\n\n//-----------\n//Тело модуля\n//-----------\n\n//Интерактивные изображения SVG\nconst P8PSVG = ({\n data,\n items,\n onClick,\n onItemClick,\n canvasStyle\n}) => {\n //Собственное состояние\n const [state, setState] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n images: [],\n currentImage: 0,\n imagesCount: 0\n });\n\n //Ссылки на DOM\n const svgContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const svgRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n\n //Обработка нажатия на элемент изображения\n const handleClick = e => {\n let itemClickFired = false;\n if (e.target.id && items && onItemClick) {\n const item = items.find(item => item.id == e.target.id);\n if (item) {\n onItemClick({\n item\n });\n itemClickFired = true;\n }\n }\n if (!itemClickFired && onClick) onClick(e);\n };\n\n //Формирование интерактивных элементов изображения\n const makeSVGItems = () => {\n items.forEach(item => {\n const svgE = document.getElementById(item.id);\n if (svgE) {\n svgE.setAttribute(\"style\", `${onItemClick ? \"cursor: pointer\" : \"\"}; ${item.backgroundColor ? `fill: ${item.backgroundColor}` : \"\"}`);\n if (item?.title) {\n const titleE = document.createElementNS(\"http://www.w3.org/2000/svg\", \"title\");\n titleE.textContent = item.title;\n svgE.replaceChildren(titleE);\n }\n }\n });\n };\n\n //Загрузка изображения\n const loadSVG = () => {\n const images = data.split(\"\").filter(i => i).map(i => i + \"\");\n setState(pv => ({\n ...pv,\n images,\n imagesCount: images.length,\n currentImage: 0\n }));\n };\n\n //Отображение текущего изображения\n const showSVG = () => {\n if (state.imagesCount > 0) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(state.images[state.currentImage], \"image/svg+xml\");\n svgRef.current = doc.documentElement;\n svgRef.current.onclick = handleClick;\n svgContainerRef.current.replaceChildren(svgRef.current);\n if (items) makeSVGItems(items);\n }\n };\n\n //Переключение текущего изображения\n const switchImage = direction => {\n setState(pv => ({\n ...pv,\n currentImage: direction > 0 ? pv.currentImage + 1 >= pv.imagesCount ? 0 : pv.currentImage + 1 : pv.currentImage - 1 < 0 ? pv.imagesCount - 1 : pv.currentImage - 1\n }));\n };\n\n //При обновлении данных\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n loadSVG();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [data]);\n\n //При загрузке изображения\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n showSVG();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.images, state.currentImage, items]);\n\n //При прокрутке изображений назад\n const handlePrevClick = () => switchImage(-1);\n\n //При прокрутке изображений вперёд\n const handleNextClick = () => switchImage(1);\n\n //Генерация содержимого\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n ref: svgContainerRef,\n style: {\n ...STYLES.CANVAS,\n ...(canvasStyle ? canvasStyle : {})\n }\n }), state.imagesCount > 1 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: STYLES.CONTROLS\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n onClick: handlePrevClick\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null, \"arrow_left\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n onClick: handleNextClick\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null, \"arrow_right\"))) : null);\n};\n\n//Контроль свойств - Интерактивные изображения SVG\nP8PSVG.propTypes = {\n data: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string).isRequired,\n items: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf(P8P_SVG_ITEM_SHAPE),\n onClick: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),\n onItemClick: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),\n canvasStyle: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)\n};\n\n//----------------\n//Интерфейс модуля\n//----------------\n\n\n\n//# sourceURL=webpack://parus_8_panels_plugin/./app/components/p8p_svg.js?"); /***/ }), @@ -4404,7 +4404,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Svg: () => (/* binding */ Svg)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_9__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormLabel/FormLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/RadioGroup/RadioGroup.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControlLabel/FormControlLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Radio/Radio.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Grid/Grid.js\");\n/* harmony import */ var _components_p8p_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../components/p8p_svg */ \"./app/components/p8p_svg.js\");\n/*\r\n Парус 8 - Панели мониторинга - Примеры для разработчиков\r\n Пример: Интерактивные изображения \"P8PSVG\"\r\n*/\n\n//---------------------\n//Подключение библиотек\n//---------------------\n\n //Классы React\n //Контроль свойств компонента\n //Интерфейсные элементы\n //Интерактивные изображения\n\n//---------\n//Константы\n//---------\n\n//Адрес тестового изображения\nconst SAMPLE_URL = \"img/sample.svg\";\n\n//Стили\nconst STYLES = {\n CONTAINER: {\n textAlign: \"center\",\n paddingTop: \"20px\"\n },\n TITLE: {\n paddingBottom: \"15px\"\n },\n SVG: {\n width: \"95vw\",\n height: \"30vw\",\n display: \"flex\",\n justifyContent: \"center\"\n }\n};\n\n//-----------\n//Тело модуля\n//-----------\n\n//Пример: Интерактивные изображения \"P8PSVG\"\nconst Svg = ({\n title\n}) => {\n //Собственное состояние - SVG-изображение\n const [svg, setSVG] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n loaded: false,\n data: null,\n mode: \"items1\",\n items1: [{\n id: \"1\",\n backgroundColor: \"red\",\n desc: \"Цифра на флюзеляже\"\n }, {\n id: \"2\",\n backgroundColor: \"magenta\",\n desc: \"Ребро флюзеляжа\"\n }, {\n id: \"3\",\n backgroundColor: \"yellow\",\n desc: \"Люк\"\n }],\n items2: [{\n id: \"4\",\n backgroundColor: \"green\",\n desc: \"Хвост\",\n title: \"Хвост\"\n }, {\n id: \"5\",\n backgroundColor: \"blue\",\n desc: \"Хвостовой руль\",\n title: \"Хвостовой руль\"\n }, {\n id: \"6\",\n backgroundColor: \"aquamarine\",\n desc: \"Ребро жесткости хвоста\",\n title: \"Ребро жесткости хвоста\"\n }],\n selectedItemDesc: \"\"\n });\n\n //Загрузка изображения\n const loadSVG = async () => {\n const resp = await fetch(SAMPLE_URL);\n const data = await resp.text();\n setSVG(pv => ({\n ...pv,\n loaded: true,\n data\n }));\n };\n\n //Отработка нажатия на элемент изображения\n const handleSVGItemClick = ({\n item\n }) => {\n setSVG(pv => ({\n ...pv,\n selectedItemDesc: item?.desc ? `Выбран элемент: ${item.desc}` : \"Для выбранного элемента не задано описание\"\n }));\n };\n\n //При подключении к странице\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n loadSVG();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n //Генерация содержимого\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: STYLES.CONTAINER\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n sx: STYLES.TITLE,\n variant: \"h6\"\n }, title), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, \"\\u0413\\u0440\\u0443\\u043F\\u043F\\u0430 \\u044D\\u043B\\u0435\\u043C\\u0435\\u043D\\u0442\\u043E\\u0432\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n row: true,\n value: svg.mode,\n onChange: e => setSVG(pv => ({\n ...pv,\n mode: e.target.value,\n selectedItemDesc: \"\"\n }))\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n value: \"items1\",\n control: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null),\n label: \"\\u042D\\u043B\\u0435\\u043C\\u0435\\u043D\\u0442\\u044B \\u043F\\u0435\\u0440\\u0432\\u043E\\u0439 \\u0433\\u0440\\u0443\\u043F\\u043F\\u044B\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n value: \"items2\",\n control: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null),\n label: \"\\u042D\\u043B\\u0435\\u043C\\u0435\\u043D\\u0442\\u044B \\u0432\\u0442\\u043E\\u0440\\u043E\\u0439 \\u0433\\u0440\\u0443\\u043F\\u043F\\u044B\"\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, svg.selectedItemDesc ? svg.selectedItemDesc : \"Нажмите на элемент изображения для получения его описания\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n container: true,\n spacing: 0,\n pt: 5,\n direction: \"column\",\n alignItems: \"center\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n item: true,\n xs: 12\n }, svg.loaded ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_p8p_svg__WEBPACK_IMPORTED_MODULE_1__.P8PSVG, {\n data: svg.data,\n items: svg[svg.mode],\n onClick: handleSVGItemClick,\n style: STYLES.SVG\n }) : null)));\n};\n\n//Контроль свойств - Пример: Интерактивные изображения \"P8PSVG\"\nSvg.propTypes = {\n title: (prop_types__WEBPACK_IMPORTED_MODULE_9___default().string).isRequired\n};\n\n//----------------\n//Интерфейс модуля\n//----------------\n\n\n\n//# sourceURL=webpack://parus_8_panels_plugin/./app/panels/samples/svg.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Svg: () => (/* binding */ Svg)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_9__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormLabel/FormLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/RadioGroup/RadioGroup.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControlLabel/FormControlLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Radio/Radio.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Grid/Grid.js\");\n/* harmony import */ var _components_p8p_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../components/p8p_svg */ \"./app/components/p8p_svg.js\");\n/*\r\n Парус 8 - Панели мониторинга - Примеры для разработчиков\r\n Пример: Интерактивные изображения \"P8PSVG\"\r\n*/\n\n//---------------------\n//Подключение библиотек\n//---------------------\n\n //Классы React\n //Контроль свойств компонента\n //Интерфейсные элементы\n //Интерактивные изображения\n\n//---------\n//Константы\n//---------\n\n//Адрес тестового изображения\nconst SAMPLE_URL = \"img/sample.svg\";\n\n//Стили\nconst STYLES = {\n CONTAINER: {\n textAlign: \"center\",\n paddingTop: \"20px\"\n },\n TITLE: {\n paddingBottom: \"15px\"\n },\n FORM: {\n justifyContent: \"center\",\n alignItems: \"center\"\n },\n SVG: {\n width: \"95vw\",\n height: \"30vw\",\n display: \"flex\",\n justifyContent: \"center\"\n }\n};\n\n//-----------\n//Тело модуля\n//-----------\n\n//Пример: Интерактивные изображения \"P8PSVG\"\nconst Svg = ({\n title\n}) => {\n //Собственное состояние - SVG-изображение\n const [svg, setSVG] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n loaded: false,\n data: null,\n mode: \"items1\",\n items1: [{\n id: \"1\",\n backgroundColor: \"red\",\n desc: \"Цифра на флюзеляже\",\n title: \"Цифра на флюзеляже\"\n }, {\n id: \"2\",\n backgroundColor: \"magenta\",\n desc: \"Ребро флюзеляжа\",\n title: \"Ребро флюзеляжа\"\n }, {\n id: \"3\",\n backgroundColor: \"yellow\",\n desc: \"Люк\",\n title: \"Люк\"\n }],\n items2: [{\n id: \"4\",\n backgroundColor: \"green\",\n desc: \"Хвост\",\n title: \"Хвост\"\n }, {\n id: \"5\",\n backgroundColor: \"blue\",\n desc: \"Хвостовой руль\",\n title: \"Хвостовой руль\"\n }, {\n id: \"6\",\n backgroundColor: \"aquamarine\",\n desc: \"Ребро жесткости хвоста\",\n title: \"Ребро жесткости хвоста\"\n }],\n items3: [{\n id: \"7\",\n backgroundColor: \"blueviolet\",\n desc: \"Крыло левое\",\n title: \"Крыло левое\"\n }, {\n id: \"8\",\n backgroundColor: \"orange\",\n desc: \"Двигатель левый\",\n title: \"Двигатель левый\"\n }, {\n id: \"9\",\n backgroundColor: \"springgreen\",\n desc: \"Крыло правое\",\n title: \"Крыло правое\"\n }],\n selectedItemDesc: \"\"\n });\n\n //Загрузка изображения\n const loadSVG = async () => {\n const resp = await fetch(SAMPLE_URL);\n const data = await resp.text();\n setSVG(pv => ({\n ...pv,\n loaded: true,\n data\n }));\n };\n\n //Отработка нажатия на изображение\n const handleSVGClick = () => {\n setSVG(pv => ({\n ...pv,\n selectedItemDesc: \"Выбрано изображение целиком\"\n }));\n };\n\n //Отработка нажатия на элемент изображения\n const handleSVGItemClick = ({\n item\n }) => {\n setSVG(pv => ({\n ...pv,\n selectedItemDesc: item?.desc ? `Выбран элемент: ${item.desc}` : \"Для выбранного элемента не задано описание\"\n }));\n };\n\n //При подключении к странице\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n loadSVG();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n //Генерация содержимого\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: STYLES.CONTAINER\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n sx: STYLES.TITLE,\n variant: \"h6\"\n }, title), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n sx: STYLES.FORM\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, \"\\u0413\\u0440\\u0443\\u043F\\u043F\\u0430 \\u044D\\u043B\\u0435\\u043C\\u0435\\u043D\\u0442\\u043E\\u0432\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n row: true,\n value: svg.mode,\n onChange: e => setSVG(pv => ({\n ...pv,\n mode: e.target.value,\n selectedItemDesc: \"\"\n }))\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n value: \"items1\",\n control: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null),\n label: \"\\u041F\\u0435\\u0440\\u0432\\u0430\\u044F\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n value: \"items2\",\n control: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null),\n label: \"\\u0412\\u0442\\u043E\\u0440\\u0430\\u044F\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n value: \"items3\",\n control: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null),\n label: \"\\u0422\\u0440\\u0435\\u0442\\u044C\\u044F\"\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, svg.selectedItemDesc ? svg.selectedItemDesc : \"Нажмите на элемент изображения для получения его описания\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n container: true,\n spacing: 0,\n pt: 5,\n direction: \"column\",\n alignItems: \"center\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n item: true,\n xs: 12\n }, svg.loaded ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_p8p_svg__WEBPACK_IMPORTED_MODULE_1__.P8PSVG, {\n data: svg.data,\n items: svg[svg.mode],\n onClick: handleSVGClick,\n onItemClick: handleSVGItemClick,\n canvasStyle: STYLES.SVG\n }) : null)));\n};\n\n//Контроль свойств - Пример: Интерактивные изображения \"P8PSVG\"\nSvg.propTypes = {\n title: (prop_types__WEBPACK_IMPORTED_MODULE_9___default().string).isRequired\n};\n\n//----------------\n//Интерфейс модуля\n//----------------\n\n\n\n//# sourceURL=webpack://parus_8_panels_plugin/./app/panels/samples/svg.js?"); /***/ }),