inmake/nks-virtual-tour
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mark styles fixes

Browse Source
This commit is contained in:
zojgame
2024-04-12 11:57:28 +05:00
parent 7ab88612ae
commit 2079e31c21
4 changed files with 229 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Mark.tsx
+4 -3
View File
@@ -1,4 +1,4 @@
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { useLayoutEffect, useRef, useState } from "react";
import { Mark as MarkType } from "../types/Mark";
interface MarkProps {
@@ -21,7 +21,7 @@ const Mark = ({
hoveredMark,
}: MarkProps) => {
const [textWidth, setTextWidth] = useState(0);
const textRef = useRef<React.LegacyRef<SVGTextElement> | null>(null);
const textRef = useRef(null);
useLayoutEffect(() => {
if (!textRef.current) return;
@@ -74,11 +74,12 @@ const Mark = ({
textWidth + 84
}]`}
style={{
// width: `${true ? `${textWidth + 84}` : 0}`,
width: `${hoveredMark === mark.id ? `${textWidth + 84}` : 0}`,
}}
></rect>
<text
className={`opacity-0 group-hover:opacity-100
className={`opacity-0 group-hover:opacity-100 pointer-events-none
transition-opacity duration-300 ease-in-out`}
ref={textRef}
x="70"
src/components/TransportMark.tsx
+42 -8
View File
@@ -1,3 +1,4 @@
import { useLayoutEffect, useRef, useState } from "react";
import { TransportMark as TransportMarkType } from "../types/TransportMark";
type TransportType = "bus" | "tram";
@@ -19,6 +20,14 @@ const textOffset: { [key: number]: number } = {
3: 3,
};
const cardWidths: { [key: number]: number } = {
1: 118,
2: 118,
3: 118,
4: 145,
5: 170,
};
const TransportMark = ({
transportMark,
icon,
@@ -27,8 +36,26 @@ const TransportMark = ({
transportType,
isFiltered,
}: TransportMarkProps) => {
const textRef = useRef(null);
const [cardWidth, setCardWidth] = useState(0);
const mainColor = transportType === "bus" ? "#0079C2" : "#ED3636";
useLayoutEffect(() => {
const transportCount = transportMark.transports.slice(0, 5).length;
const transportWidth = cardWidths[transportCount];
if (textRef) {
const textWidth =
(textRef.current as unknown as SVGSVGElement).getBBox().width + 16;
const cardWidth = Math.max(transportWidth, textWidth);
setCardWidth(cardWidth);
} else {
setCardWidth(transportWidth);
}
return () => {};
}, []);
return (
<svg
x={transportMark.x}
@@ -40,14 +67,21 @@ const TransportMark = ({
width={width}
height={height}
fill="none"
viewBox="0 0 153 52"
viewBox="0 0 183 52"
>
<rect width="152.134" height="52" fill="#fff" rx="8"></rect>
<text fill="#002347" fontSize={12} y={16} x={8} fontWeight={500}>
<rect width={cardWidth} height="52" fill="#fff" rx="8"></rect>
<text
fill="#002347"
fontSize={12}
y={16}
x={8}
fontWeight={500}
ref={textRef}
>
{transportMark.label}
</text>
{icon}
{transportMark.transports.slice(0, 3).map((transport, index) => {
{transportMark.transports.slice(0, 4).map((transport, index) => {
const textLength = transport.toString().length;
const offset = textOffset[textLength];
@@ -60,18 +94,18 @@ const TransportMark = ({
</svg>
);
})}
{transportMark.transports.length - 3 > 0 && (
{transportMark.transports.length - 4 > 0 && (
<svg>
<rect
width="18.994"
width="24"
height="18.994"
x="120.57"
x="136.57"
y="24.503"
stroke={mainColor}
strokeWidth="1.006"
rx="3.497"
></rect>
<text fill={mainColor} x={123} y={38} fontSize={10} fontWeight={500}>
<text fill={mainColor} x={141} y={38} fontSize={10} fontWeight={500}>
{`+${transportMark.transports.length - 3}`}
</text>
</svg>
src/marks.json
+83 -63
View File
@@ -1,12 +1,4 @@
[
{
"id": "food_1",
"label": "Сезоны",
"x": 970,
"y": 850,
"icon": "food",
"distance": 300
},
{
"id": "food_2",
"label": "Штерн",
@@ -39,6 +31,14 @@
"icon": "food",
"distance": 250
},
{
"id": "food_7",
"label": "Cucina",
"x": 1180,
"y": 890,
"icon": "food",
"distance": 300
},
{
"id": "food_6",
"label": "Breadway",
@@ -48,10 +48,10 @@
"distance": 250
},
{
"id": "food_7",
"label": "Cucina",
"x": 1180,
"y": 890,
"id": "food_1",
"label": "Сезоны",
"x": 970,
"y": 850,
"icon": "food",
"distance": 300
},
@@ -103,14 +103,7 @@
"icon": "food",
"distance": 400
},
{
"id": "food_14",
"label": "Monk",
"x": 1240,
"y": 1340,
"icon": "food",
"distance": 500
},
{
"id": "food_15",
"label": "Simple Coffee",
@@ -120,10 +113,18 @@
"distance": 600
},
{
"id": "food_16",
"label": "Негодяи",
"x": 1420,
"y": 1270,
"id": "food_14",
"label": "Monk",
"x": 1240,
"y": 1340,
"icon": "food",
"distance": 500
},
{
"id": "food_19",
"label": "Кстати",
"x": 1150,
"y": 1460,
"icon": "food",
"distance": 600
},
@@ -135,22 +136,6 @@
"icon": "food",
"distance": 550
},
{
"id": "food_18",
"label": "Tenet",
"x": 1480,
"y": 1250,
"icon": "food",
"distance": 650
},
{
"id": "food_19",
"label": "Кстати",
"x": 1150,
"y": 1460,
"icon": "food",
"distance": 600
},
{
"id": "food_20",
"label": "Сенатор",
@@ -199,6 +184,22 @@
"icon": "food",
"distance": 750
},
{
"id": "food_18",
"label": "Tenet",
"x": 1480,
"y": 1250,
"icon": "food",
"distance": 650
},
{
"id": "food_16",
"label": "Негодяи",
"x": 1420,
"y": 1270,
"icon": "food",
"distance": 600
},
{
"id": "food_26",
"label": "Нячанг сити",
@@ -279,6 +280,15 @@
"icon": "heathy",
"distance": 400
},
{
"id": "heathy_7",
"label": "Больница №2",
"x": 1520,
"y": 810,
"icon": "heathy",
"distance": 750
},
{
"id": "heathy_6",
"label": "Детская поликлиника",
@@ -288,12 +298,12 @@
"distance": 650
},
{
"id": "heathy_7",
"label": "Больница №2",
"x": 1520,
"y": 810,
"id": "heathy_6",
"label": "Детская поликлиника",
"x": 1480,
"y": 850,
"icon": "heathy",
"distance": 750
"distance": 650
},
{
"id": "heathy_8",
@@ -311,6 +321,14 @@
"icon": "heathy",
"distance": 700
},
{
"id": "education_8",
"label": "Империя",
"x": 1320,
"y": 1280,
"icon": "education",
"distance": 500
},
{
"id": "education_1",
"label": "Детский сад №9",
@@ -327,22 +345,16 @@
"icon": "education",
"distance": 350
},
{
"id": "education_3",
"label": "Детский сад №9",
"x": 1220,
"y": 1260,
"id": "education_8",
"label": "Империя",
"x": 1320,
"y": 1280,
"icon": "education",
"distance": 400
},
{
"id": "education_4",
"label": "Музыкальный колледж",
"x": 1190,
"y": 1300,
"icon": "education",
"distance": 400
"distance": 500
},
{
"id": "education_5",
"label": "Театральный институт",
@@ -368,12 +380,20 @@
"distance": 500
},
{
"id": "education_8",
"label": "Империя",
"x": 1320,
"y": 1280,
"id": "education_3",
"label": "Детский сад №9",
"x": 1220,
"y": 1260,
"icon": "education",
"distance": 500
"distance": 400
},
{
"id": "education_4",
"label": "Музыкальный колледж",
"x": 1190,
"y": 1300,
"icon": "education",
"distance": 400
},
{
"id": "education_9",
src/transportMarks.json
+100 -10
View File
@@ -1,14 +1,4 @@
[
{
"id": "bus-1",
"label": "Ул. Бориса Ельцина",
"x": 1000,
"y": 820,
"icon": "bus",
"distance": 350,
"transports": [45, 578],
"transportType": "bus"
},
{
"id": "tram-1",
"label": "Ул. Бориса Ельцина",
@@ -58,5 +48,105 @@
"distance": 550,
"transports": [2, 6, 13, 15, 16, 18],
"transportType": "tram"
},
{
"id": "tram-6",
"label": "Площадь Коммунаров",
"x": 1200,
"y": 1470,
"icon": "tram",
"distance": 600,
"transports": [2, 18],
"transportType": "tram"
},
{
"id": "tram-7",
"label": "Площадь Коммунаров",
"x": 1210,
"y": 1530,
"icon": "tram",
"distance": 700,
"transports": [10, 15, 16, 17, 21],
"transportType": "tram"
},
{
"id": "tram-8",
"label": "Дворец молодёжи",
"x": 1040,
"y": 1480,
"icon": "tram",
"distance": 600,
"transports": [3, 6, 7, 10, 12, 13, 17, 23],
"transportType": "tram"
},
{
"id": "bus-1",
"label": "Ул. Бориса Ельцина",
"x": 1000,
"y": 820,
"icon": "bus",
"distance": 350,
"transports": [45, 578],
"transportType": "bus"
},
{
"id": "bus-2",
"label": "Площадь 1905 года",
"x": 1540,
"y": 1100,
"icon": "bus",
"distance": 650,
"transports": [28, 43, 45, 46, 48, 49, 51, 59, 62, 87, 93],
"transportType": "bus"
},
{
"id": "bus-3",
"label": "Площадь Коммунаров",
"x": 1200,
"y": 1470,
"icon": "bus",
"distance": 600,
"transports": [28, 43, 45, 46, 48, 49, 51, 59, 62, 87, 93],
"transportType": "bus"
},
{
"id": "bus-4",
"label": "Ул. Антона Валека",
"x": 1170,
"y": 1090,
"icon": "bus",
"distance": 200,
"transports": [46],
"transportType": "bus"
},
{
"id": "bus-5",
"label": "Ул. Маршала Жукова",
"x": 1380,
"y": 1240,
"icon": "bus",
"distance": 550,
"transports": [24, 28, 45, 48, 49, 51, 52, 59, 62, 87, 93],
"transportType": "bus"
},
{
"id": "bus-6",
"label": "Драмтеатр",
"x": 1380,
"y": 820,
"icon": "bus",
"distance": 550,
"transports": [45, 67, 150],
"transportType": "bus"
},
{
"id": "bus-7",
"label": "Ул. Папанина",
"x": 730,
"y": 1090,
"icon": "bus",
"distance": 450,
"transports": [46],
"transportType": "bus"
}
]