From 7f8a32732989d8e140804d13aec15f4a7f8050ff Mon Sep 17 00:00:00 2001 From: itoshi Date: Thu, 30 Apr 2026 22:57:14 +0300 Subject: [PATCH] feat: update right widget and add new 3d widget --- .env | 14 +-- src/client/src/api/ApiStore/store.ts | 5 + .../src/assets/icons/three-view-pan.svg | 3 + .../src/assets/icons/three-view-rotate.svg | 3 + .../src/assets/icons/three-view-zoom.svg | 3 + .../components/ListOfSights/SightFrame.jsx | 92 ++++++++++++++++++- .../src/components/SimulationSettings.tsx | 9 ++ src/client/src/components/map/WebGLMap.tsx | 28 ++++-- src/pages/City/CityCreatePage/index.tsx | 2 +- src/pages/City/CityEditPage/index.tsx | 2 +- .../SightTabs/CreateInformationTab/index.tsx | 2 +- src/widgets/SightTabs/CreateLeftTab/index.tsx | 2 +- .../SightTabs/CreateRightTab/index.tsx | 70 +++++++------- .../SightTabs/InformationTab/index.tsx | 2 +- src/widgets/SightTabs/LeftWidgetTab/index.tsx | 2 +- .../RightWidgetTab/SightFramePreview.tsx | 2 +- .../SightTabs/RightWidgetTab/index.tsx | 54 ++++++----- tsconfig.tsbuildinfo | 2 +- 18 files changed, 217 insertions(+), 80 deletions(-) create mode 100644 src/client/src/assets/icons/three-view-pan.svg create mode 100644 src/client/src/assets/icons/three-view-rotate.svg create mode 100644 src/client/src/assets/icons/three-view-zoom.svg diff --git a/.env b/.env index c8ded82..c554530 100644 --- a/.env +++ b/.env @@ -1,8 +1,8 @@ -# VITE_API_URL='https://wn.st.unprism.ru' -# VITE_REACT_APP ='https://wn.st.unprism.ru/' -# VITE_KRBL_MEDIA='https://wn.st.unprism.ru/media/' -# VITE_NEED_AUTH='true' -VITE_API_URL='https://wn.krbl.ru' -VITE_REACT_APP ='https://wn.krbl.ru/' -VITE_KRBL_MEDIA='https://wn.krbl.ru/media/' +VITE_API_URL='https://wn.st.unprism.ru' +VITE_REACT_APP ='https://wn.st.unprism.ru/' +VITE_KRBL_MEDIA='https://wn.st.unprism.ru/media/' VITE_NEED_AUTH='true' +# VITE_API_URL='https://wn.krbl.ru' +# VITE_REACT_APP ='https://wn.krbl.ru/' +# VITE_KRBL_MEDIA='https://wn.krbl.ru/media/' +# VITE_NEED_AUTH='true' diff --git a/src/client/src/api/ApiStore/store.ts b/src/client/src/api/ApiStore/store.ts index 0214f67..ea21f60 100644 --- a/src/client/src/api/ApiStore/store.ts +++ b/src/client/src/api/ApiStore/store.ts @@ -63,6 +63,7 @@ class ApiStore { simulationDirection: 1 | -1 = 1; simulationPaused = false; simulationInstantMove = false; + showHitboxes = false; constructor() { makeAutoObservable(this); @@ -191,6 +192,10 @@ class ApiStore { this.simulationInstantMove = !this.simulationInstantMove; }; + toggleShowHitboxes = () => { + this.showHitboxes = !this.showHitboxes; + }; + startPositionSimulation = () => { if (this.positionInterval) return; diff --git a/src/client/src/assets/icons/three-view-pan.svg b/src/client/src/assets/icons/three-view-pan.svg new file mode 100644 index 0000000..d556958 --- /dev/null +++ b/src/client/src/assets/icons/three-view-pan.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/client/src/assets/icons/three-view-rotate.svg b/src/client/src/assets/icons/three-view-rotate.svg new file mode 100644 index 0000000..f802b0c --- /dev/null +++ b/src/client/src/assets/icons/three-view-rotate.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/client/src/assets/icons/three-view-zoom.svg b/src/client/src/assets/icons/three-view-zoom.svg new file mode 100644 index 0000000..f6644d2 --- /dev/null +++ b/src/client/src/assets/icons/three-view-zoom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/client/src/components/ListOfSights/SightFrame.jsx b/src/client/src/components/ListOfSights/SightFrame.jsx index 7a42aa2..2047163 100644 --- a/src/client/src/components/ListOfSights/SightFrame.jsx +++ b/src/client/src/components/ListOfSights/SightFrame.jsx @@ -16,6 +16,9 @@ import { ThreeViewErrorBoundary } from "../ThreeViewErrorBoundary"; import { apiStore } from "../../api/ApiStore/store"; import { ReactMarkdownComponent } from "../ReactMarkdown"; import { TouchableLayout } from "../TouchableLayout"; +import rotate3DIcon from "../../assets/icons/three-view-rotate.svg"; +import zoom3DIcon from "../../assets/icons/three-view-zoom.svg"; +import pan3DIcon from "../../assets/icons/three-view-pan.svg"; const Watermark = ({ path }) => { if (!path) return null; @@ -364,6 +367,87 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => { /> + {isFullscreen3D &&
+
+ {[ + { + label: "Вращать", + icon: , + }, + { + label: "Приблизить / Отдалить", + icon: , + }, + { + label: "Переместить", + icon: , + }, + ].map((item, index, arr) => ( +
+ + {item.icon} + + + {item.label} + +
+ ))} +
+
} ); default: @@ -464,7 +548,7 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => { const titleLineHeight = useMemo(() => { if (!sight_name) return "120%"; - const textLength = sight_name.length; + const textLength = sight_name.replace(/\n/g, "").length; const calculatedLineHeight = Math.max( 100, Math.min(120, 120 - (textLength / 10) * 1), @@ -520,7 +604,7 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => { overflowWrap: "break-word", }} > - {selectedSection === 0 ? processedSightName : sight_name} + {selectedSection === 0 ? processedSightName : (sightData?.short_name || sight_name)}

)} @@ -552,7 +636,7 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => { paddingBottom: "4.5px", cursor: "pointer", }} - onPointerUp={() => setSelectedSection(0)} + onPointerUp={() => { setSelectedSection(0); setIsFullscreen3D(false); }} > { articleSections.length > 1 && articleSections.slice(1).map((section, index) => (
setSelectedSection(index + 1)} + onPointerUp={() => { setSelectedSection(index + 1); setIsFullscreen3D(false); }} key={section.id || section.heading || index} className={`sight-frame-menu-point ${ index + 1 === selectedSection ? "active" : "" diff --git a/src/client/src/components/SimulationSettings.tsx b/src/client/src/components/SimulationSettings.tsx index ca59aac..c99fc06 100644 --- a/src/client/src/components/SimulationSettings.tsx +++ b/src/client/src/components/SimulationSettings.tsx @@ -80,6 +80,15 @@ export const SimulationSettings = observer(() => { onClick={apiStore.toggleSimulationInstantMove} /> + + {/* Хитбоксы */} + + Хитбоксы + +
)} diff --git a/src/client/src/components/map/WebGLMap.tsx b/src/client/src/components/map/WebGLMap.tsx index cfd39a0..2c94600 100644 --- a/src/client/src/components/map/WebGLMap.tsx +++ b/src/client/src/components/map/WebGLMap.tsx @@ -797,9 +797,8 @@ export const WebGLMap = observer(() => { const textBlockPositionX = rx + labelOffsetX; const textBlockPositionY = ry + labelOffsetY; - const nameLines = st.name.replace(/\\n/g, '\n').split('\n'); - const longestLine = nameLines.reduce((a: string, b: string) => a.length > b.length ? a : b, ''); - const approximateTextWidth = longestLine.length * fontSize * 0.6; + const normalizedName = st.name.replace(/\\n|\n/g, ""); + const approximateTextWidth = normalizedName.length * fontSize * 0.6; const textWidthInMapCoords = approximateTextWidth / scale; let anchorXOffset = 0; @@ -829,8 +828,8 @@ export const WebGLMap = observer(() => { result.push({ x: sx, y: sy, - name: st.name.replace(/\\n/g, '\n'), - sub: sub ? sub.replace(/\\n/g, '\n') : sub, + name: normalizedName, + sub: sub ? sub.replace(/\\n|\n/g, "") : sub, anchorX: anchorX, anchorY: anchorY, distance: distanceInPixels, @@ -2315,7 +2314,7 @@ export const WebGLMap = observer(() => { fontSize: primaryFontSize, textShadow: "0 0 4px rgba(0,0,0,0.6)", pointerEvents: "none", - whiteSpace: "pre-line", + whiteSpace: "nowrap", }} > {l.name} @@ -2331,7 +2330,7 @@ export const WebGLMap = observer(() => { lineHeight: secondaryLineHeight, color: "#CBCBCB", textShadow: "0 0 3px rgba(0,0,0,0.4)", - whiteSpace: "pre-line", + whiteSpace: "nowrap", ...secondaryPositionStyle, pointerEvents: "none", }} @@ -2417,6 +2416,11 @@ export const WebGLMap = observer(() => { cursor: "pointer", userSelect: "none", touchAction: "none", + ...(apiStore.showHitboxes && { + outline: "2px solid rgba(0,255,0,0.8)", + outlineOffset: "2px", + backgroundColor: "rgba(0,255,0,0.08)", + }), }} >
{ userSelect: "none", touchAction: "none", zIndex: 10, + ...(apiStore.showHitboxes && { + outline: "2px solid rgba(255,165,0,0.8)", + outlineOffset: "2px", + backgroundColor: "rgba(255,165,0,0.08)", + }), }} >
@@ -2608,6 +2617,11 @@ export const WebGLMap = observer(() => { alignItems: "flex-start", pointerEvents: "auto", zIndex: 100000000000000, + ...(apiStore.showHitboxes && { + outline: "2px solid rgba(0,180,255,0.8)", + outlineOffset: "2px", + backgroundColor: "rgba(0,180,255,0.08)", + }), }} >
{ setCreateCityWeatherCode(Number(e.target.value))} + helperText="ID города брать с ресурса openweathermap.org" />
diff --git a/src/pages/City/CityEditPage/index.tsx b/src/pages/City/CityEditPage/index.tsx index 8759211..1090841 100644 --- a/src/pages/City/CityEditPage/index.tsx +++ b/src/pages/City/CityEditPage/index.tsx @@ -189,9 +189,9 @@ export const CityEditPage = observer(() => { setEditCityWeatherCode(Number(e.target.value))} + helperText="ID города брать с ресурса openweathermap.org" />
diff --git a/src/widgets/SightTabs/CreateInformationTab/index.tsx b/src/widgets/SightTabs/CreateInformationTab/index.tsx index 6378dfc..9c87680 100644 --- a/src/widgets/SightTabs/CreateInformationTab/index.tsx +++ b/src/widgets/SightTabs/CreateInformationTab/index.tsx @@ -205,7 +205,7 @@ export const CreateInformationTab = observer( >
-

{sight[language].name}

+

{sight[language].name.replace(/\n/g, " ")}

-

{sight[language].name}

+

{sight[language].name.replace(/\n/g, " ")}

-

{sight[language].name}

+

{sight[language].name.replace(/\n/g, " ")}

@@ -508,36 +508,44 @@ export const CreateRightTab = observer( /> )} - - - updateSightInfo({ name: e.target.value }, language) - } - inputRef={shortNameRef} - sx={{ flexGrow: 1 }} - /> - - + {type === "media" && ( + + + updateSightInfo({ name: e.target.value }, language) + } + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + insertNewline(); + } + }} + inputRef={shortNameRef} + sx={{ flexGrow: 1 }} + /> + + + )}
-

{sight[language].name}

+

{sight[language].name.replace(/\n/g, " ")}

diff --git a/src/widgets/SightTabs/LeftWidgetTab/index.tsx b/src/widgets/SightTabs/LeftWidgetTab/index.tsx index 02b22c1..65c67bf 100644 --- a/src/widgets/SightTabs/LeftWidgetTab/index.tsx +++ b/src/widgets/SightTabs/LeftWidgetTab/index.tsx @@ -112,7 +112,7 @@ export const LeftWidgetTab = observer( >
-

{sight[language].name}

+

{sight[language].name.replace(/\n/g, " ")}

-

{sight[language].name}

+

{sight[language].name.replace(/\n/g, " ")}

@@ -476,28 +476,36 @@ export const RightWidgetTab = observer( /> )} - - updateSightInfo(language, { name: e.target.value })} - inputRef={shortNameRef} - sx={{ flexGrow: 1 }} - /> - - + {type === "media" && ( + + updateSightInfo(language, { name: e.target.value })} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + insertNewline(); + } + }} + inputRef={shortNameRef} + sx={{ flexGrow: 1 }} + /> + + + )}