# Mini Metro Web
迷你地铁地图构建工具: `创建迷你地铁风格的地铁线路图`。
支持**无限**站点与线路，支持**多次穿过**同一站点，设置**背景图**，设置**支线**，支持**导出图片**。
[https://mini-metro-web.gitlab.io/](https://mini-metro-web.gitlab.io/)
[English Version](https://github.com/RyanEdo/mini-metro-web/blob/master/README.md)
## 更新日志
#### 1.2.1 `修复添加站点时，连续双击站点导致的站点重复添加报错`
#### 1.2.0 `支持英文`
#### 1.1.1 `增加更多站点形状，新增站点时支持修改默认形状`
#### 1.1.0 `支持修改背景颜色与背景图`
#### 1.0.2 `加入刷新后快速恢复通知`
#### 1.0.1 `加入报错指引`
## 基本用法
### 菜单
点击左上角标题进入菜单，点击任意空白处退出菜单
### 创建站点
1. 菜单 => 站点 => 添加站点
2. 点击空白处添加
### 创建线路
1. 点击任意站点
2. 选择 操作 => 以此为起点新建线路
3. 按照提示依次点击站点添加到线路
### 删除站点/线路
1. 点击站点/线路
2. 选择 操作 => 删除
### 设置背景图
1. 点击线路 => 设定背景
2. 选择 `纯白` / `浅黄` / `取色器` 设定背景颜色
3. 选择 `导入背景图` 导入图片
4. 导入图片后，进入修改图片页面，可以拖动修改图片位置，也可以修改图片透明度
### 导出图片/文件
菜单 => 作为图片/文件导出
## 进阶用法
请参考应用内教程或[视频教程](https://space.bilibili.com/8217854)
## 构建
和大部分react项目一样，先运行`npm i`,然后:
### `npm start`
本地运行
打开 [http://localhost:3000](http://localhost:3000) 浏览器中查看.
### `npm run build`
打包成静态文件
### 注意
##### 建议安装 `i18n-ally`[VS Code 插件地址](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) 。项目有部分字符串由该插件生成，安装后能自动在字符串位置显示原文。
================================================
FILE: README.md
================================================
{value}
{
if (document.activeElement === e.currentTarget) e.stopPropagation();
}}
onBlur={(e)=>{
if(type === "number")
setTimeout(()=>{
//@ts-ignore
e.target.value = value
})
}}
>
{disabled?:<>}
);
})
================================================
FILE: src/Common/api.ts
================================================
export const getExistMap = (id:string) => {
const url = `/${id}.json`;
return fetch(url).then(res=>res.text());
}
================================================
FILE: src/Common/color.ts
================================================
import { arrayToMap } from "./util";
export const colorSH = [
{
"line": "1号线",
"color": "#EA0B2A",
"color_name": "正红色",
"rgb": [234, 11, 42]
},
{
"line": "2号线",
"color": "#94D40B",
"color_name": "绿色",
"rgb": [148, 212, 11]
},
{
"line": "3号线",
"color": "#F8D000",
"color_name": "黄色",
"rgb": [248, 208, 0]
},
{
"line": "4号线",
"color": "#60269E",
"color_name": "紫色",
"rgb": [96, 38, 158]
},
{
"line": "5号线",
"color": "#934C9A",
"color_name": "紫红色",
"rgb": [147, 76, 154]
},
{
"line": "6号线",
"color": "#D80169",
"color_name": "品红色",
"rgb": [216, 1, 105]
},
{
"line": "7号线",
"color": "#FE6B01",
"color_name": "橙色",
"rgb": [254, 107, 1]
},
{
"line": "8号线",
"color": "#00A0E8",
"color_name": "蓝色",
"rgb": [0, 160, 232]
},
{
"line": "9号线",
"color": "#6FC5E8",
"color_name": "淡蓝色",
"rgb": [111, 197, 232]
},
{
"line": "10号线",
"color": "#C3A5E1",
"color_name": "淡紫色",
"rgb": [195, 165, 225]
},
{
"line": "11号线",
"color": "#792330",
"color_name": "棕色",
"rgb": [121, 35, 48]
},
{
"line": "12号线",
"color": "#007A61",
"color_name": "深绿色",
"rgb": [0, 122, 97]
},
{
"line": "13号线",
"color": "#F095CE",
"color_name": "粉色",
"rgb": [240, 149, 206]
},
{
"line": "14号线",
"color": "#827805",
"color_name": "橄榄绿色",
"rgb": [130, 120, 5]
},
{
"line": "15号线",
"color": "#BDA686",
"color_name": "香槟金色",
"rgb": [189, 166, 134]
},
{
"line": "16号线",
"color": "#2AD2C5",
"color_name": "水绿色",
"rgb": [42, 210, 197]
}
];
export const colorSHMap = arrayToMap("color",colorSH);
================================================
FILE: src/Common/const.ts
================================================
const gauge = 10;
const line_radius = 10;
const handleLength = 45;
const handleWidth = 15;
export { gauge, line_radius, handleLength, handleWidth };
================================================
FILE: src/Common/teyvat.ts
================================================
import { UserDataType } from "../Data/UserData";
import { t } from "i18next";
export const teyvat: UserDataType = {
stations: [
{
stationId: 1,
stationName: t("wang-feng-jiao-zhan"),
position: [678, -52],
shape: "cicle",
lineIds: [3],
tagDirection: 2,
},
{
stationId: 2,
stationName: t("zhai-xing-ya-zhan"),
position: [645, 71],
shape: "cicle",
lineIds: [3],
},
{
stationId: 3,
stationName: t("qian-feng-shen-dian-zhan"),
position: [640, 191],
shape: "cicle",
lineIds: [3],
},
{
stationId: 4,
stationName: t("Common-teyvat-192be7b183f6eee79-1"),
position: [463, 418],
shape: "cicle",
lineIds: [2, 3, 8],
},
{
stationId: 5,
stationName: t("Common-teyvat-192be7b183f6eee79-2"),
position: [573, 641],
shape: "cicle",
lineIds: [3],
},
{
stationId: 6,
stationName: t("Common-teyvat-192be7b183f6eee79-3"),
position: [740, 641],
shape: "cicle",
lineIds: [3],
},
{
stationId: 7,
stationName: t("Common-teyvat-192be7b183f6eee79-4"),
position: [813, 533],
shape: "cicle",
lineIds: [3],
},
{
stationId: 8,
stationName: t("Common-teyvat-192be7b183f6eee79-5"),
position: [388, 318],
shape: "cicle",
lineIds: [1, 2],
tagDirection: 6
},
{
stationId: 9,
stationName: t("Common-teyvat-192be7b183f6eee79-6"),
position: [458, 193],
shape: "cicle",
lineIds: [2],
},
{
stationId: 10,
stationName: t("Common-teyvat-192be7b183f6eee79-7"),
position: [460, 86],
shape: "cicle",
lineIds: [2],
},
{
stationId: 11,
stationName: t("Common-teyvat-192be7b183f6eee79-8"),
position: [458, -64],
shape: "cicle",
lineIds: [2],
},
{
stationId: 12,
stationName: t("Common-teyvat-192be7b183f6eee79-9"),
position: [325, -102],
shape: "cicle",
lineIds: [2],
},
{
stationId: 13,
stationName: t("Common-teyvat-192be7b183f6eee79-10"),
position: [245, 168],
shape: "cicle",
lineIds: [1],
},
{
stationId: 14,
stationName: t("Common-teyvat-192be7b183f6eee79-11"),
position: [320, 226],
shape: "cicle",
lineIds: [1],
},
{
stationId: 15,
stationName: t("Common-teyvat-192be7b183f6eee79-12"),
position: [270, 358],
shape: "cicle",
lineIds: [1],
},
{
stationId: 16,
stationName: t("Common-teyvat-192be7b183f6eee79-13"),
position: [70, 428],
shape: "cicle",
lineIds: [1, 4, 8],
},
{
stationId: 17,
stationName: t("Common-teyvat-192be7b183f6eee79-14"),
position: [-2, 336],
shape: "cicle",
lineIds: [4],
},
{
stationId: 18,
stationName: t("Common-teyvat-192be7b183f6eee79-15"),
position: [3, 248],
shape: "cicle",
lineIds: [4],
},
{
stationId: 19,
stationName: t("Common-teyvat-192be7b183f6eee79-16"),
position: [-70, 151],
shape: "cicle",
lineIds: [4],
},
{
stationId: 20,
stationName: t("Common-teyvat-192be7b183f6eee79-17"),
position: [15, 18],
shape: "cicle",
lineIds: [4],
},
{
stationId: 21,
stationName: t("Common-teyvat-192be7b183f6eee79-18"),
position: [-87, -77],
shape: "cicle",
lineIds: [4],
},
{
stationId: 22,
stationName: t("Common-teyvat-192be7b183f6eee79-19"),
position: [83, 628],
shape: "cicle",
lineIds: [4],
tagDirection: 2,
},
{
stationId: 23,
stationName: t("Common-teyvat-192be7b183f6eee79-20"),
position: [92, 748],
shape: "cicle",
lineIds: [4],
tagDirection: 2,
},
{
stationId: 24,
stationName: t("Common-teyvat-192be7b183f6eee79-21"),
position: [248, 748],
shape: "cicle",
lineIds: [4],
},
{
stationId: 25,
stationName: t("Common-teyvat-192be7b183f6eee79-22"),
position: [338, 778],
shape: "cicle",
lineIds: [4],
},
{
stationId: 26,
stationName: t("Common-teyvat-192be7b183f6eee79-23"),
position: [180, 851],
shape: "cicle",
lineIds: [4],
},
{
stationId: 27,
stationName: t("Common-teyvat-192be7b183f6eee79-24"),
position: [-35, 703],
shape: "cicle",
lineIds: [8],
},
{
stationId: 28,
stationName: t("Common-teyvat-192be7b183f6eee79-25"),
position: [-230, 813],
shape: "cicle",
lineIds: [5, 8],
},
{
stationId: 29,
stationName: t("Common-teyvat-192be7b183f6eee79-26"),
position: [-310, 568],
shape: "cicle",
lineIds: [5],
},
{
stationId: 30,
stationName: t("Common-teyvat-192be7b183f6eee79-27"),
position: [-452, 473],
shape: "cicle",
lineIds: [5],
},
{
stationId: 31,
stationName: t("Common-teyvat-192be7b183f6eee79-28"),
position: [-240, 971],
shape: "cicle",
lineIds: [5],
},
{
stationId: 32,
stationName: t("Common-teyvat-192be7b183f6eee79-29"),
position: [-197, 1071],
shape: "cicle",
lineIds: [5],
},
{
stationId: 33,
stationName: t("Common-teyvat-192be7b183f6eee79-30"),
position: [-280, 1226],
shape: "cicle",
lineIds: [5],
},
{
stationId: 34,
stationName: t("Common-teyvat-192be7b183f6eee79-31"),
position: [-285, 1451],
shape: "cicle",
lineIds: [5, 6],
},
{
stationId: 35,
stationName: t("Common-teyvat-192be7b183f6eee79-32"),
position: [-210, 1608],
shape: "cicle",
lineIds: [5, 7],
},
{
stationId: 36,
stationName: t("Common-teyvat-192be7b183f6eee79-33"),
position: [-605, 1601],
shape: "cicle",
lineIds: [7],
},
{
stationId: 37,
stationName: t("Common-teyvat-192be7b183f6eee79-34"),
position: [-671, 1511],
shape: "cicle",
lineIds: [7, 11],
tagDirection: 5,
},
{
stationId: 38,
stationName: t("Common-teyvat-192be7b183f6eee79-35"),
position: [-362, 1351],
shape: "cicle",
lineIds: [6],
},
{
stationId: 39,
stationName: t("Common-teyvat-192be7b183f6eee79-36"),
position: [-642, 1326],
shape: "cicle",
lineIds: [7],
},
{
stationId: 40,
stationName: t("Common-teyvat-192be7b183f6eee79-37"),
position: [-437, 1158],
shape: "cicle",
lineIds: [6],
},
{
stationId: 41,
stationName: t("Common-teyvat-192be7b183f6eee79-38"),
position: [-552, 1008],
shape: "cicle",
lineIds: [6],
},
{
stationId: 42,
stationName: t("Common-teyvat-192be7b183f6eee79-39"),
position: [-602, 946],
shape: "cicle",
lineIds: [6],
},
{
stationId: 43,
stationName: t("Common-teyvat-192be7b183f6eee79-40"),
position: [-525, 829],
shape: "cicle",
lineIds: [8],
tagDirection: 4
},
{
stationId: 44,
stationName: t("Common-teyvat-192be7b183f6eee79-41"),
position: [-742, 828],
shape: "cicle",
lineIds: [6, 7, 8],
},
{
stationId: 45,
stationName: t("Common-teyvat-192be7b183f6eee79-42"),
position: [-805, 728],
shape: "cicle",
lineIds: [7],
},
{
stationId: 46,
stationName: t("Common-teyvat-192be7b183f6eee79-43"),
position: [-955, 903],
shape: "cicle",
lineIds: [7],
},
{
stationId: 47,
stationName: t("Common-teyvat-192be7b183f6eee79-44"),
position: [-857, 943],
shape: "cicle",
lineIds: [8],
tagDirection: 2
},
{
stationId: 48,
stationName: t("Common-teyvat-192be7b183f6eee79-45"),
position: [-855, 1078],
shape: "cicle",
lineIds: [7],
},
{
stationId: 49,
stationName: t("Common-teyvat-192be7b183f6eee79-46"),
position: [-725, 1208],
shape: "cicle",
lineIds: [7],
},
{
stationId: 50,
stationName: t("Common-teyvat-192be7b183f6eee79-47"),
position: [-897, 1411],
shape: "cicle",
lineIds: [11, 12],
},
{
stationId: 51,
stationName: t("Common-teyvat-192be7b183f6eee79-48"),
position: [-1090, 1388],
shape: "cicle",
lineIds: [9, 11],
},
{
stationId: 52,
stationName: t("Common-teyvat-192be7b183f6eee79-49"),
position: [-1090, 1076],
shape: "cicle",
lineIds: [9, 10],
},
{
stationId: 53,
stationName: t("Common-teyvat-192be7b183f6eee79-50"),
position: [-1272, 1173],
shape: "cicle",
lineIds: [10],
},
{
stationId: 54,
stationName: t("Common-teyvat-192be7b183f6eee79-51"),
position: [-1405, 1271],
shape: "cicle",
lineIds: [10],
},
{
stationId: 55,
stationName: t("Common-teyvat-192be7b183f6eee79-52"),
position: [-1360, 1388],
shape: "cicle",
lineIds: [10, 11],
},
{
stationId: 56,
stationName: t("Common-teyvat-192be7b183f6eee79-53"),
position: [-1195, 1576],
shape: "cicle",
lineIds: [10, 12],
},
{
stationId: 57,
stationName: t("Common-teyvat-192be7b183f6eee79-54"),
position: [-1037, 1491],
shape: "cicle",
lineIds: [9, 12],
},
{
stationId: 58,
stationName: t("Common-teyvat-192be7b183f6eee79-55"),
position: [-1067, 1791],
shape: "cicle",
lineIds: [9],
tagDirection: 2,
},
{
stationId: 59,
stationName: t("Common-teyvat-192be7b183f6eee79-56"),
position: [-1177, 1933],
shape: "cicle",
lineIds: [9],
tagDirection: 3,
},
{
stationId: 60,
stationName: t("Common-teyvat-192be7b183f6eee79-57"),
position: [-1310, 1931],
shape: "cicle",
lineIds: [9, 10],
tagDirection: 7,
},
{
stationId: 61,
stationName: t("Common-teyvat-192be7b183f6eee79-58"),
position: [-1247, 2116],
shape: "cicle",
lineIds: [10],
},
{
stationId: 62,
stationName: t("Common-teyvat-192be7b183f6eee79-59"),
position: [-1255, 1701],
shape: "cicle",
lineIds: [10],
tagDirection: 3,
},
{
stationId: 63,
stationName: t("Common-teyvat-192be7b183f6eee79-60"),
position: [-1522, 1681],
shape: "cicle",
lineIds: [11, 12],
},
{
stationId: 64,
stationName: t("Common-teyvat-192be7b183f6eee79-61"),
position: [-1695, 1681],
shape: "cicle",
lineIds: [12],
},
{
stationId: 65,
stationName: t("Common-teyvat-192be7b183f6eee79-62"),
position: [-1865, 1493],
shape: "cicle",
lineIds: [12],
},
{
stationId: 66,
stationName: t("Common-teyvat-192be7b183f6eee79-63"),
position: [-2215, 1326],
shape: "cicle",
lineIds: [12],
},
{
stationId: 67,
stationName: t("Common-teyvat-192be7b183f6eee79-64"),
position: [-1812, 1908],
shape: "cicle",
lineIds: [11],
},
{
stationId: 68,
stationName: t("Common-teyvat-192be7b183f6eee79-65"),
position: [-1482, 1931],
shape: "cicle",
lineIds: [9],
},
{
stationId: 69,
stationName: t("Common-teyvat-192be7b183f6eee79-66"),
position: [-1737, 1998],
shape: "cicle",
lineIds: [9],
tagDirection: 3
},
{
stationId: 70,
stationName: t("Common-teyvat-192be7b183f6eee79-67"),
position: [-1917, 2093],
shape: "cicle",
lineIds: [9, 11],
},
{
stationId: 71,
stationName: t("Common-teyvat-192be7b183f6eee79-68"),
position: [-2077, 1883],
shape: "cicle",
lineIds: [9],
},
{
stationId: 72,
stationName: t("Common-teyvat-192be7b183f6eee79-69"),
position: [-1997, 2211],
shape: "cicle",
lineIds: [11],
},
{
stationId: 73,
stationName: t("Common-teyvat-192be7b183f6eee79-70"),
position: [-2212, 2316],
shape: "cicle",
lineIds: [11],
},
{
stationId: 74,
stationName: t("Common-teyvat-192be7b183f6eee79-71"),
position: [-2470, 2316],
shape: "cicle",
lineIds: [11],
},
].reduce((map, cur) => {
map.set(cur.stationId, cur);
return map;
}, new Map()),
lines: [
{
lineId: 1,
lineName: t("Common-teyvat-192be7b183f6eee79-72"),
color: "#EA0B2A",
stationIds: [13, 14, 8, 15, 16],
sign: "1",
order: 1,
bendFirst: [true, true, true, true, true],
},
{
lineId: 2,
lineName: t("Common-teyvat-192be7b183f6eee79-73"),
color: "#94D40B",
stationIds: [12, 11, 10, 9, 8, 4],
sign: "2",
order: 2,
bendFirst: [false, true, true, true, true, true],
},
{
lineId: 3,
lineName: t("Common-teyvat-192be7b183f6eee79-74"),
color: "#F8D000",
stationIds: [1, 2, 3, 4, 5, 6, 7],
sign: "3",
order: 3,
bendFirst: [true, true, true, false, true, true, true],
},
{
lineId: 4,
lineName: t("Common-teyvat-192be7b183f6eee79-75"),
color: "#60269E",
stationIds: [21, 20, 19, 18, 17, 16, 22, 23, 26, 25, 24],
sign: "4",
order: 4,
bendFirst: [
true,
false,
true,
true,
true,
true,
true,
true,
false,
true,
true,
],
},
{
lineId: 5,
lineName: t("Common-teyvat-192be7b183f6eee79-76"),
color: "#934C9A",
stationIds: [30, 29, 28, 31, 32, 33, 34, 35],
sign: "5",
order: 5,
bendFirst: [true, true, true, true, true, true, true, true],
},
{
lineId: 6,
lineName: t("Common-teyvat-192be7b183f6eee79-77"),
color: "#D80169",
stationIds: [44, 42, 41, 40, 38, 34],
sign: "6",
order: 6,
bendFirst: [false, true, true, true, false, true],
},
{
lineId: 7,
lineName: t("Common-teyvat-192be7b183f6eee79-78"),
color: "#FE6B01",
stationIds: [35, 36, 37, 39, 49, 48, 46, 45, 44],
sign: "7",
order: 7,
bendFirst: [true, true, true, false, true, true, false, true, true],
},
{
lineId: 8,
lineName: t("Common-teyvat-192be7b183f6eee79-79"),
color: "#00A0E8",
stationIds: [47, 44, 43, 28, 27, 16, 4],
sign: "8",
order: 8,
bendFirst: [true, true, false, false, false, false, true],
},
{
lineId: 9,
lineName: t("Common-teyvat-192be7b183f6eee79-80"),
color: "#385f88",
stationIds: [52, 51, 57, 58, 59, 60, 68, 69, 70, 71],
sign: "2",
order: 9,
bendFirst: [true, true, true, false, true, true, true, true, true, true],
},
{
lineId: 10,
lineName: t("Common-teyvat-192be7b183f6eee79-81"),
color: "#e8c148",
stationIds: [52, 53, 54, 55, 56, 62, 60, 61],
sign: "1",
order: 10,
bendFirst: [false, false, false, true, false, true, true, true],
},
{
lineId: 11,
lineName: t("Common-teyvat-192be7b183f6eee79-82"),
color: "#dd8d4e",
stationIds: [37, 50, 51, 55, 63, 67, 70, 72, 73, 74],
sign: "3",
order: 11,
bendFirst: [false, true, true, true, true, true, false, true, true, true],
},
{
lineId: 12,
lineName: t("Common-teyvat-192be7b183f6eee79-83"),
color: "#35743c",
stationIds: [50, 57, 56, 63, 64, 65, 66],
sign: "4",
order: 12,
bendFirst: [true, true, true, true, true, true, true],
},
].reduce((map, cur) => {
map.set(cur.lineId, cur);
return map;
}, new Map()),
title: t("teyvat"),
backgroundColor: "#fffee0",
};
================================================
FILE: src/Common/util.ts
================================================
import { MouseEvent, WheelEventHandler } from "react";
import UAParser from "ua-parser-js";
import { TransformProps, UserDataType } from "../Data/UserData";
export const mapToArr = {
const { target, currentTarget } = e;
if (target === currentTarget) setPointerEvents("none");
else setPointerEvents("auto");
}}
>
{stationFirst ? stationComp : linesComp}
{stationFirst ? linesComp : stationComp}
);
}
================================================
FILE: src/Render/Card/LineCard.scss
================================================
.line-card {
width: 455px;
height: 250px;
border-radius: 23px;
display: inline-block;
// margin-left: 50px;
// margin-bottom: 50px;
// zoom: 0.8;
--margin-left: 33px;
background-color: rgba(255, 255, 255, 0.863);
backdrop-filter: blur(15px);
position: relative;
transition: 0.3s ease-in-out width;
overflow-x: hidden;
.tools {
position: absolute;
right: 0;
.tool-item {
vertical-align: top;
height: 34px;
width: 34px;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 14.5px 11.3px 0 0;
background-color: #d9d9d9;
border-radius: 7.25px;
.expand-icon {
height: 15px;
width: 15px;
}
.edit-icon {
height: 17.74px;
width: 17.74px;
}
}
}
.stations-count {
font-size: 18px;
font-weight: 500;
cursor: pointer;
margin: 23px 0 0 var(--margin-left);
width: fit-content;
}
.line-name {
& > * {
font-size: 24px;
font-weight: 500;
}
margin: 2px 0 0 var(--margin-left);
}
.from-to {
font-size: 18px;
font-weight: 500;
margin: 5px 0 0 var(--margin-left);
color: #ababab;
}
.edit-detail {
.name-detail {
margin-top: 22.58px;
white-space: nowrap;
width: 254.2px;
overflow-y: visible;
overflow-x: scroll;
height: 100px;
&::-webkit-scrollbar {
display: none;
// width: 0.01px;
}
.name-item {
display: inline-block;
margin-right: 24.2px;
vertical-align: top;
&:first-child {
margin-left: 32.25px;
}
.title {
font-size: 11.25px;
font-weight: 500;
color: #ea0b2a;
}
input {
margin-top: 21.77px;
padding: 0;
}
.sign-input {
// width: 35.5px;
* {
min-width: 35.5px;
height: 35.5px;
border: none;
border-radius: 8.87px;
background-color: #ea0b2a;
font-size: 23.25px;
color: white;
text-align: center;
}
}
.line-name-input,
.order-input {
* {
font-size: 36px;
border: none;
font-weight: 500;
// width: 100px;
margin-top: 14px;
}
}
.order-input {
// width: 30px;
// white-space: nowrap;
vertical-align: top;
}
}
}
.color-detail {
.color-detail-choosing {
box-sizing: border-box;
padding: 21px 32.25px;
width: 255px;
display: grid;
grid-template-columns: repeat(5, 20%);
grid-template-rows: repeat(2, 50%);
grid-row-gap: 9px;
grid-column-gap: 6px;
.color-preview {
cursor: pointer;
width: 19.5px;
height: 19.5px;
border-radius: 50%;
border: 2px solid;
display: flex;
justify-content: center;
align-items: center;
.color-preview-inner {
width: 16.9px;
height: 16.9px;
border-radius: 50%;
}
}
}
.custom-color {
margin: 0 32.25px;
border-top: 1px dashed black;
width: 197px;
box-sizing: border-box;
padding-top: 15px;
// padding-left: 10px;
.selected-color-preview {
.color-input {
// width: 19.5px;
// height: 19.5px;
// border-radius: 50%;
display: inline-block;
}
.color-value {
display: inline-block;
margin-left: 15px;
font-size: 15.25px;
font-weight: 500;
width: 100px;
text-decoration: underline;
vertical-align: top;
margin-top: 1px;
border: none;
}
}
}
}
.operation-detail {
.operation-item {
&:first-child {
margin-top: 15px;
}
&:last-child {
margin-bottom: 15px;
}
margin-left: 32.25px;
margin-top: 8px;
margin-bottom: 8px;
color: #2196f3;
font-size: 18px;
font-weight: 500;
cursor: pointer;
&.delete {
color: #ea0b2a;
}
}
}
}
.station-bar {
margin: 30px 0 0 0;
white-space: nowrap;
width: 455px;
overflow-x: scroll;
overflow-y: hidden;
transition: 0.3s ease-in-out width;
&::-webkit-scrollbar {
display: none;
// width: 0.01px;
}
.add-first {
width: var(--margin-left);
display: inline-block;
}
.station-block {
display: inline-block;
width: 161px;
height: 78.22px;
border-left: 1px solid #cccccc;
position: relative;
vertical-align: top;
.track {
display: flex;
background-color: #f0f0f0;
width: 161px;
height: 48.3px;
.sleeper {
border-left: 1px solid #cccccc;
width: 53.6px;
&:first-child {
border: none;
}
}
}
.bend-first {
position: absolute;
top: 7.215px;
left: 9.5px;
height: 33.87px;
width: 133.8px;
background-color: #d9d9d9;
border-radius: 4px;
display: flex;
align-items: center;
cursor: pointer;
transition: ease-in-out 0.3s background-color;
&.current-inserting {
background-color: #c3c3c3;
}
.bend-icon {
svg {
width: 16px;
height: 16px;
transform-origin: center;
}
width: 16px;
height: 16px;
display: inline-block;
margin: -1px 13px 0 18.5px;
&.bend {
svg {
transform: rotate(-45deg);
}
}
}
.bend-des {
display: inline-block;
font-size: 14.25px;
font-weight: 500;
color: rgb(0, 0, 0, 0.5);
}
}
.station-name {
font-size: 18px;
font-weight: 500;
margin: 8px;
color: #ea0b2a;
cursor: pointer;
}
}
}
.edit-panel {
&.edit {
right: 0;
}
width: 200.8px;
background-color: #f2f2f2;
position: absolute;
right: -200.8px;
top: 0;
height: 250px;
transition: 0.3s ease-in-out right;
.edit-tools {
width: 200.8px;
height: 250px;
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar {
display: none;
// width: 0.01px;
}
.edit-tool {
&:first-child {
margin: 21.7px 21.7px 2px 21.7px;
}
&:last-child {
margin: 2px 21.7px 21.7px 21.7px;
}
cursor: pointer;
margin: 2px 21.7px 2px 21.7px;
width: 158px;
height: 75px;
border-radius: 11.3px;
font-weight: 500;
display: flow-root;
&.selected {
background-color: #d9d9d9;
}
.title {
font-size: 18px;
margin: 12.1px 0 0 20.2px;
text-transform: capitalize;
}
.value {
font-size: 11.25px;
margin: 4.83px 0 0 20.2px;
}
&.color > .value {
color: #ea0b2a;
}
}
}
.done {
background-color: #2196f3;
border-radius: 25px;
width: 74px;
height: 28.2px;
position: absolute;
bottom: 23.4px;
right: 23.4px;
display: flex;
align-items: center;
.done-icon {
height: 17.74px;
width: 17.74px;
margin: 0 6.5px 0 11.3px;
path {
fill: #ffffff;
fill-opacity: 1;
}
}
.done-des {
font-size: 12px;
font-weight: 500;
color: white;
}
}
}
}
================================================
FILE: src/Render/Card/LineCard.tsx
================================================
import React, {
Dispatch,
RefObject,
SetStateAction,
useEffect,
useState,
useTransition,
} from "react";
import { Line } from "../../DataStructure/Line";
import { Station } from "../../DataStructure/Station";
import { DisplayStation } from "../../DataStructure/Display";
import "./LineCard.scss";
import ArrowIcon from "../../Resource/Icon/arrow";
import PlusIcon from "../../Resource/Icon/plus";
import ExpandIcon from "../../Resource/Icon/expand";
import ShrinkIcon from "../../Resource/Icon/shrink";
import EditIcon from "../../Resource/Icon/edit";
import classNames from "classnames";
import {
CardShowing,
InsertInfo,
LineProps,
StationProps,
UserDataType,
dataProcessor,
} from "../../Data/UserData";
import {
browserInfo,
mapToArr,
onWheelX,
onWheelY,
scrollOptimize,
} from "../../Common/util";
import { AutoGrowthInput } from "../../Common/AutoGrowthInput";
import { colorSH, colorSHMap } from "../../Common/color";
import { showConfirmationInterface } from "../Delete/DeleteConfirmation";
import { FunctionMode } from "../../DataStructure/Mode";
import { Point } from "../../DataStructure/Point";
import { useTranslation } from "react-i18next";
import i18n from "../../i18n/config";
export function LineCard({
line,
setData,
data,
showConfirmation,
functionMode,
setFunctionMode,
insertInfo,
setInsertInfo,
menuRef,
cardShowing,
setCardShowing,
}: {
line: LineProps;
setData: Dispatch
{t('menu.symbol')}
{t('line.name')}
{t('line.order')}
{new Array(10).fill(1).map((x, index) => {
const { color } = colorSH[index];
const choosed = color === colorSelected;
return (
setColor(color)}
>
);
})}
setColor(e.currentTarget.value)}
/>
setColor(e.currentTarget.value)}
>
{
setSubLine(!subLine);
}}
>
{subLine?t('line.notSubLineAnymore'):t('line.asSubline')}...
{
showConfirmation!({ line }, deleteLine);
}}
>
{t('line.deleteLine')}
{expand || edit ? (
<>
) : (
{
setEdit(true);
// setTab("name");
}}
>
)}
{edit ? (
<>
) : (
setExpand(!expand)}>
{expand ?
)}
{
setCardShowing({ lineIds: [lineId], stationIds });
}}
>
{stationIds.length}{t('line.stations')}
{editTools(tab)}
) : (
<>
{firstStation
? t('line.fromTo', {from:firstStation!.stationName,to: lastStation!.stationName})
: t('line.notInUse')}
{stationsInThisLine.map((station, index) => {
const { stationName, stationId } = station!;
const bendFirst = getBendFirst(index);
const last = index === stationsInThisLine.length - 1;
let currentInserting = false;
if (insertInfo) {
const { insertIndex, line: insertLine } = insertInfo;
if (insertIndex === index && insertLine === line) {
currentInserting = true;
}
}
return (
);
})}
)}
{
{
if (addingStation) {
if (!firstStation) {
if (menuRef?.current?.showTools) {
menuRef.current.showTools(
e,
FunctionMode.selectingStation
);
}
}
setInsertInfo({ insertIndex: index, line });
setFunctionMode(FunctionMode.selectingStation);
} else if (last) {
setInsertInfo({ insertIndex: index + 1, line });
if (menuRef?.current?.showTools) {
menuRef.current.showTools(
e,
FunctionMode.selectingStation
);
}
} else {
setBendFirst(index, !bendFirst);
}
}}
>
{addingStation || last ?
{addingStation || last
? currentInserting
? t('line.insertHere')
: t('line.insertStation')
: bendFirst
? t('line.bendFirst')
: t('line.straight')}
{
setCardShowing({
lineIds: [lineId],
stationIds: [stationId],
});
}}
>
{stationName}
{
scrollOptimize(e);
setTab("name");
}}
>
{t('line.name')}
{lineName}
{
scrollOptimize(e);
setTab("color");
}}
>
{t('line.color')}
{colorName}
{
scrollOptimize(e);
setTab("operation");
}}
>
{t('line.operation')}
{t('line.delete')}
setEdit(false)}>
{t('station.x')}
{t('station.y')}
{grid.map((shape, index) => {
const left = index % column === 0;
const bottom = Math.floor(index / column) === row - 1;
// console.log({ shape });
return (
{
if (shape) setStationShape(shape);
}}
>
);
})}
{
//@ts-ignore
shapes[shape]
}
{
const newLine = addNewLine();
setInsertInfo({ insertIndex: 1, line: newLine! });
// setFunctionMode(FunctionMode.selectingStation);
if (menuRef?.current?.showTools) {
menuRef.current.showTools(e, FunctionMode.selectingStation);
}
}}
>
{t('station.startHere')}
{lineIds.map((lineId) => {
const line = getLineById(lineId);
const stationIndexes: number[] = [];
line?.stationIds.forEach((x, index) => {
if (x === stationId) stationIndexes.push(index);
});
const { lineName } = line!;
const removeStations = stationIndexes.map((stationIndex) => (
{
showConfirmation!({ line, station, stationIndex }, () => {
removeStationFromLine(lineId, stationIndex);
});
}}
>
{t('station.remove',{lineName,stationIndex: stationIndex! + 1})}...
));
return removeStations;
})}
{
showConfirmation!({ station }, () => {
deleteStation();
if (menuRef?.current?.backToTitle) {
menuRef.current.backToTitle();
}
});
}}
>
{t('station.delete')}
{directMapIndex.map((direct, index) => {
if (index === 4)
return (
);
}
}
};
return (
{
setStationTagDirection(8);
}}
className="tag-item center"
>
{tags[tagDirection]}
);
else
return (
{
setStationTagDirection(direct);
}}
className={classNames({
"tag-item": 1,
selected: tagDirection === direct,
})}
>
);
})}
{
setCardShowing({
stationIds: [stationId],
lineIds,
stationFirst: true,
});
}}
>
{lineCount}{t('station.lines')}
{editTools(tab)}
{
{
scrollOptimize(e);
setTab("name");
}}
>
{t('station.poisition')}
X{x}Y
{y}
{
scrollOptimize(e);
setTab("color");
}}
>
{t('station.shape')}
{
t(`shape.${shapeSelected}`)
}
{
scrollOptimize(e);
setTab("operation");
}}
>
{t('station.operation')}
{t('station.operateDes')}
{
scrollOptimize(e);
setTab("tag");
}}
>
{t('station.stationName')}
{tags[tagDirection]}
{title}
{remove ? {subTitle}
: <>}
{line && !station ? (
{
//@ts-ignore
shapes[shape]
}
)}
{stationName || lineName}
{
disappearWithAnimate();
if (typeof callback === "function") callback();
}}
>
{deleteText}
{t('delete.cancel')}
{t('error.metError')}
{t('error.dontWorry')}
exportFile("last")}
>
{t('error.orYouCould')}
exportFile("current")}
>
{t('error.exportError')}
{t('error.sendAuthor')}
{t('opacity')}
{
);
};
export default OpacityControl;
================================================
FILE: src/Render/Header/Component/ShapeSelector.scss
================================================
.tool {
position: relative;
display: inline-block;
cursor: pointer;
perspective: 1000px;
perspective-origin: 0 50%;
&:has(.shape-selector-container) {
z-index: 600;
}
.shape-selector-container {
.color-detail {
.color-detail-choosing {
box-sizing: border-box;
padding: 10px 10px;
width: 222.75px;
display: grid;
border: white 1px solid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(3, 33.33%);
// grid-row-gap: 9px;
// grid-column-gap: 6px;
.shape-container {
height: 46.13px;
display: flex;
justify-content: center;
align-items: center;
border-left: 1px black dotted;
border-bottom: 1px black solid;
transform: translate(-1px, 1px);
cursor: pointer;
&.left {
border-left: none;
}
&.bottom {
border-bottom: none;
}
.shape-preview {
width: 19.5px;
height: 19.5px;
// border-radius: 50%;
// border: 2px solid;
display: flex;
justify-content: center;
align-items: center;
&.shape-selected {
svg {
* {
stroke: #ea0b2a;
}
}
}
&.square {
zoom: 0.9;
}
&.triangle {
zoom: 1.05;
}
&.start {
zoom: 1.15;
}
&.hexagon {
zoom: 0.9;
}
&.pentagon {
zoom: 1.1;
}
&.diamond{
zoom: 1.15;
}
&.leaf{
zoom: 0.9;
}
}
}
}
}
transition:
transform 0s,
transform 0.3s ease-in-out,
all 0.3s ease-in-out;
&.show {
opacity: 1;
pointer-events: unset;
top: 100%;
transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, 0deg);
}
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
left: 0;
margin-top: 8px;
background: rgba(255, 255, 255, 0.136);
box-shadow: 0 0 100px rgba(#000000, 0.15);
// border: #ea0b2a 1px solid;
z-index: 600;
width: 222.75px;
max-width: 100vw;
overflow: hidden;
height: 162px;
border-radius: 5px;
backdrop-filter: blur(20px);
transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, var(--deg));
transform-origin: 0 0;
.opacity-text {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;
font-size: 14px;
opacity: var(--value);
span {
margin-left: 2px;
font-size: 10px;
font-weight: 600;
vertical-align: baseline;
margin-top: 2.5px;
}
}
.slider {
appearance: none;
width: 100%;
height: 100%;
appearance: none;
margin: 0;
background-color: transparent;
background-image: repeating-linear-gradient(
to right,
transparent,
transparent calc(18% - 1px),
#05051a1c 18%
);
&::-webkit-slider-thumb {
box-shadow: -20rem 0 0 20rem rgba(#ea0b2a, 0.2);
cursor: col-resize;
background-color: rgba(#ea0b2a, 0.2);
}
@supports not (-webkit-touch-callout: none) {
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 0;
}
}
@supports (-webkit-min-device-pixel-ratio: 0) {
&::-webkit-slider-thumb {
-webkit-appearance: auto;
appearance: auto;
width: auto;
}
}
&::-webkit-slider-runnable-track {
// pointer-events: none;
}
}
}
}
================================================
FILE: src/Render/Header/Component/ShapeSelector.tsx
================================================
import React, {
useState,
useRef,
useEffect,
CSSProperties,
useLayoutEffect,
SetStateAction,
Dispatch,
} from "react";
import "./ShapeSelector.scss";
import classNames from "classnames";
import { browserInfo } from "../../../Common/util";
import shapes from "../../../Resource/Shape/shape";
import { Shape } from "../../../Data/Shape";
import { useTranslation } from "react-i18next";
interface OpacityControlProps {
defaultShape: string;
setDefaultShape: Dispatch e.stopPropagation()}
style={{ "--value": opacity } as CSSProperties}
onTransitionEnd={() => {
if (showSlider && sliderRef.current) {
sliderRef.current.style.transition = "none";
}
}}
>
{Math.floor(opacity * 100)}
%
e.stopPropagation()}
style={{ "--value": opacity , "--safari": safari} as CSSProperties}
onBlur={() => setShowSlider(false)}
/>
}
{
t(`shape.${defaultShape}`)
}
{
);
};
export default ShapeSelector;
================================================
FILE: src/Render/Header/Menu.scss
================================================
.menu {
&.page-menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 500;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
.title {
.tools {
margin-left: -50px;
.tool {
margin-left: -5px;
opacity: 0;
}
}
}
.dots {
width: calc(100vw - 51.6px - 51.6px);
transition:
0.3s ease-in-out opacity,
0.3s ease-in-out width;
opacity: 1;
}
.menus {
transition: 0.3s ease-in-out opacity;
opacity: 1;
.columns {
.column {
@media (max-width: 710px) {
margin-top: 28.5px;
opacity: 1;
}
}
}
}
}
&.page-title {
// position: fixed;
// top: 0;
// left: 0;
// height: 100vh;
// width: 100vw;
.title {
.click-panel {
cursor: pointer;
}
.tools {
margin-left: -50px;
.tool {
margin-left: -5px;
opacity: 0;
}
}
}
user-select: none;
z-index: -500;
.dots {
margin-top: 100.66px;
position: fixed;
opacity: 1;
width: 0;
transition:
0.3s ease-in-out opacity,
0.3s ease-in-out width;
}
.menus {
margin-top: 101.66px;
position: fixed;
opacity: 0;
transition: 0.3s ease-in-out opacity;
.columns {
justify-content: space-between;
transition: 0.3s ease-in-out width;
width: calc(70vw - 51.6px - 51.6px);
}
}
}
&.page-tools {
.title {
}
.dots {
margin-top: 100.66px;
position: fixed;
opacity: 1;
width: 0;
transition:
0.3s ease-in-out opacity,
0.3s ease-in-out width;
}
.menus {
margin-top: 101.66px;
position: fixed;
opacity: 0;
transition: 0.3s ease-in-out opacity;
.columns {
justify-content: space-between;
transition: 0.3s ease-in-out width;
width: calc(70vw - 51.6px - 51.6px);
}
}
}
.title {
position: fixed;
margin: 35.5px 0 0 51.6px;
z-index: 500;
.auto-growth-container {
display: inline-block;
* {
font-size: 36px;
font-weight: 1000;
}
input {
// background-color: rgba(255, 255, 255, 0.901);
// backdrop-filter: blur(10px);
// padding-left: 18px;
// margin-left: -18px;
}
}
.tools {
@media (max-width: 710px) {
// display: block !important;
margin-left: -21.77px;
.tool {
margin-top: 5px;
&:first-child {
// display: none;
}
}
}
display: inline-block;
transition: 0.3s ease-in-out;
.tool {
transition: 0.3s ease-in-out;
opacity: 1;
display: inline-block;
font-size: 18px;
font-weight: 500;
color: #ea0b2a;
&.tool-title{
color: #00A0E8;
cursor:auto;
}
margin-left: 21.77px;
cursor: pointer;
&.disabled {
color: #ea0b2a55;
cursor:auto;
}
svg{
vertical-align: text-bottom;
line-height: 26px;
height: 26px;
[fill="black"]{
fill: rgba(234, 11, 42, 0.3333333333) !important;
fill-opacity: 1 !important;
}
}
}
}
}
.dots {
// margin-top: 20.16px;
border-bottom: dotted black 1px;
margin: 100.66px 51.6px 0 51.6px;
}
.menus {
height: calc(100vh - 101px);
overflow-y: overlay;
overflow-x: hidden;
&::-webkit-scrollbar {
display: none;
}
.columns {
margin: 0 51.6px 0 51.6px;
display: flex;
@media (max-width: 710px) {
display: grid;
}
justify-content: space-between;
transition: 0.3s ease-in-out width;
width: calc(100vw - 51.6px - 51.6px);
.column {
margin-top: 25.8px;
display: inline-block;
vertical-align: top;
width: 20vw;
transition: 0.3s ease-in-out;
@media (max-width: 710px) {
width: auto;
margin-top: -15px;
opacity: 0;
&:last-child{
padding-bottom: 150px;
}
}
.column-title {
font-size: 36px;
font-weight: 300;
}
.column-items {
// margin-top: 17px;
.column-item {
width: fit-content;
margin-top: 17px;
font-size: 18px;
font-weight: 500;
color: #ea0b2a;
cursor: pointer;
&.sub-menu{
margin-top: 10px;
margin-left: 10px;
.sub-item{
margin-right: 10px;
}
}
&.small{
font-size: small;
}
&.author{
margin-top: 4px;
&:hover{
// text-decoration: underline;
}
}
&.friend{
position: relative;
svg{
margin-left: 5px;
position: absolute;
margin-top: 3px;
width: 17px;
// height: 25px;
// vertical-align: bottom;
}
}
}
}
}
}
.notice{
position: fixed;
left: 0;
bottom: 0;
}
}
}
================================================
FILE: src/Render/Header/Menu.tsx
================================================
import React, {
Dispatch,
SetStateAction,
forwardRef,
useEffect,
useImperativeHandle,
useRef,
useState,
} from "react";
import { ReactComponent as ShareIcon } from "../../Resource/Icon/share.svg";
import { AutoGrowthInput } from "../../Common/AutoGrowthInput";
import "./Menu.scss";
import classNames from "classnames";
import { FunctionMode, Mode } from "../../DataStructure/Mode";
import {
ChangeSteps,
StationProps,
UserDataType,
addNewStation,
addStationFromRecord,
deleteStation,
dataProcessor,
InsertInfo,
RecordType,
LineChanges,
LineProps,
ShowNameProps,
DrawProps,
CardShowing,
setDataFromJson,
TransformProps,
ShowTourProps,
PageProps,
} from "../../Data/UserData";
import PlusIcon from "../../Resource/Icon/plus";
import { ReactComponent as GlobeIcon } from "../../Resource/Icon/globe.svg";
import {
browserInfo,
calculateTransform,
deleteFileFromIndexedDB,
exportFile,
exportJson,
importFromFile,
importImage,
mediateMap,
readFileFromIndexedDB,
storeFileInIndexedDB,
stringifyData,
} from "../../Common/util";
import moment from "moment";
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from "html-to-image";
import download from "downloadjs";
import { getExistMap } from "../../Common/api";
import OpacityControl from "./Component/OpacityControl";
import ShapeSelector from "./Component/ShapeSelector";
import { useTranslation } from "react-i18next";
import i18n from "../../i18n/config";
type MenuType = {
setEditingMode: React.Dispatch e.stopPropagation()}
style={{} as CSSProperties}
onTransitionEnd={() => {
if (showSlider && sliderRef.current) {
sliderRef.current.style.transition = "none";
}
}}
>
}
{grid.map((shape, index) => {
const left = index % column === 0;
const bottom = Math.floor(index / column) === row - 1;
// console.log({ shape });
return (
{
if (shape) setDefaultShape(shape);
}}
>
);
})}
{
//@ts-ignore
shapes[shape]
}
{currentRecordIndex >= 0
? t("menu.alreadyAddStations", {
count: currentRecordIndex + 1,
})
: t("menu.clickBlankToAddStation")}
{
e.stopPropagation();
if (undoCondition) {
const station = stationRecords[currentRecordIndex];
const { stationId } = station;
deleteStation(data, setData, stationId);
setCurrentRecordIndex(currentRecordIndex - 1);
}
}}
>
{t("menu.withdraw")}
{
e.stopPropagation();
if (redoCondition) {
const station = stationRecords[currentRecordIndex + 1];
addStationFromRecord(data, setData, station);
setCurrentRecordIndex(currentRecordIndex + 1);
}
}}
>
{t("menu.redo")}
{
setPage("title");
setTitleEditable(false);
}}
>
{t("menu.done")}
);
}
case FunctionMode.dragingStation: {
const changeRecords = record as ChangeSteps[];
return (
<>
{currentRecordIndex >= 0
? t("menu.alreadyModified", { count: currentRecordIndex + 1 })
: t("menu.dragToChangePoistion")}
{
e.stopPropagation();
if (undoCondition) {
const change = changeRecords[currentRecordIndex];
const { stationId, fromX, fromY } = change;
const { setStationPosition } = dataProcessor(
stationId,
setData,
data
);
setStationPosition(fromX, fromY);
setCurrentRecordIndex(currentRecordIndex - 1);
}
}}
>
{t("menu.withdraw")}
{
e.stopPropagation();
if (redoCondition) {
const change = changeRecords[currentRecordIndex + 1];
const { stationId, toX, toY } = change;
const { setStationPosition } = dataProcessor(
stationId,
setData,
data
);
setStationPosition(toX, toY);
setCurrentRecordIndex(currentRecordIndex + 1);
}
}}
>
{t("menu.redo")}
{
setPage("title");
setTitleEditable(false);
}}
>
{t("menu.done")}
);
}
case FunctionMode.lineEditing: {
return (
<>
{t("menu.chooseALineFirst")}“
{
setPage("title");
setTitleEditable(false);
}}
>
{t("menu.done")}
);
}
case FunctionMode.backgroundEditing: {
const { backgroundColor = "#ffffff", backgroundImage } = data;
const setColor = (color: string) =>
{setData((data) => ({ ...data, backgroundColor: color }));
};
return (
<>
{t("menu.backgroudSetting")}
setColor("#ffffff")}
>
{t("menu.white")}
setColor("#fffee0")}
>
{t("menu.lightYellow")}
setColor("transparent")}
>
{t("menu.transparent")}
setColor(e.currentTarget.value)}
/>
{backgroundImage ? (
{
showTools(e, FunctionMode.editingCustomBackgroundPosition);
}}
>
{t("menu.changeBackgroudImage")}...
) : (
{t("menu.importBackgroudImage")}...
)}
{
setPage("title");
setTitleEditable(false);
}}
>
{t("menu.done")}
);
}
case FunctionMode.customBackground:
case FunctionMode.editingCustomBackgroundPosition: {
const { backgroundColor, backgroundImage, opacity = 1 } = data;
const setColor = (color: string) =>
setData((data) => ({ ...data, backgroundColor: color }));
const setOpacity = (opacity: number) =>
setData((data) => ({ ...data, opacity }));
return (
<>
{t("menu.backgroudSetting")} / {t("menu.changeBackgroudImage")}
{t("menu.importImage")}
showTools(e, FunctionMode.customBackground)}>调整地图
) : (
showTools(e, FunctionMode.editingCustomBackgroundPosition)}>调整位置与缩放
)} */}
{
showTools(e, FunctionMode.customBackground);
setData((data) => ({
...data,
backgroundImage: undefined,
}));
deleteFileFromIndexedDB("image");
}}
>
{t("menu.deleteImage")}
showTools(e, FunctionMode.backgroundEditing)}
>
{t("menu.back")}
);
}
case FunctionMode.selectingStation: {
const { insertIndex, line } = insertInfo!;
const { lineName } = line;
const changeRecords = record as LineChanges[];
return (
<>
{t("menu.clickAddStationToLine", {
lineName,
insertIndex: insertIndex + 1,
})}
{
e.stopPropagation();
if (undoCondition) {
const change = changeRecords[currentRecordIndex];
const { stationId, lineId, stationIndex } = change;
const { removeStationFromLine } = dataProcessor(
stationId,
setData,
data
);
removeStationFromLine(lineId, stationIndex);
setInsertInfo({
insertIndex: insertIndex === 0 ? 0 : insertIndex - 1,
line,
});
setCurrentRecordIndex(currentRecordIndex - 1);
}
}}
>
{t("menu.withdraw")}
{
e.stopPropagation();
if (redoCondition) {
const change = changeRecords[currentRecordIndex + 1];
const { stationId, lineId, stationIndex } = change;
const { addStationToLine } = dataProcessor(
lineId,
setData,
data
);
addStationToLine(stationId, stationIndex);
setCurrentRecordIndex(currentRecordIndex + 1);
setInsertInfo({
insertIndex: insertIndex === 0 ? 0 : insertIndex + 1,
line,
});
}
}}
>
{t("menu.redo")}
{
setPage("title");
setTitleEditable(false);
setInsertInfo({ insertIndex: -1, line });
}}
>
{t("menu.done")}
);
}
case FunctionMode.choosingExistMap: {
const existingMap = [
{ name: t("shang-hai"), id: "shanghai", webkit: true },
{ name: t("bei-jing"), id: "beijing" },
{ name: t("guang-zhou"), id: "guangzhou", webkit: true },
{ name: t("shen-zhen"), id: "shenzhen", webkit: true },
{ name: t("xiang-gang"), id: "hongkong", webkit: true },
{ name: t("chang-sha"), id: "changsha", webkit: true },
{ name: t("tian-jin"), id: "tianjing", webkit: true },
];
const webkit = engine.name === "WebKit";
return (
<>
{t("menu.chooseAMap")}
{existingMap
.filter((x) => (webkit ? x.webkit : true))
.map(({ name, id }) => {
return (
{
let data = mapData.get(id);
if (!data) {
const res = await getExistMap(id);
data = setDataFromJson(setData, res);
mapData.set(id, data);
}
setData({ ...data, title });
mediateMap(data, transfromTools);
setSelectedMap(id);
}}
className={classNames({
tool: 1,
disabled: selectedMap !== id,
[id]: 1,
})}
>
{name}
);
})}
{selectedMap ? (
{
setPage("title");
setTitleEditable(false);
const data = mapData.get(selectedMap!);
if (data) setData(data);
}}
>
{t("menu.useTemplate", {
name: existingMap.find((x) => x.id === selectedMap)?.name,
})}
) : (
<>
)}
{
setData(originalMap!);
mediateMap(originalMap!, transfromTools);
setPage("title");
setTitleEditable(false);
}}
>
{t("menu.cancel")}
);
}
}
};
useEffect(() => {
if (drawing) {
toPng(document.querySelector(".transform-layer")! as HTMLElement).then(
(dataUrl) => {
setDrawing(false);
download(
dataUrl,
`${title}-${moment().format("YYYY-MM-DD_HH-mm-ss")}.png`
);
}
);
}
}, [drawing]);
return (
{
if (page === "title" || page === "tools") setDisplay("none");
}}
>
);
});
================================================
FILE: src/Render/Layer/DevelopLayer.scss
================================================
.DevelopLayer {
.grid {
display: grid;
grid-template-columns: repeat(100, 100px);
grid-template-rows: repeat(50, 100px);
.grid-item {
border: 1px solid black;
height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
================================================
FILE: src/Render/Layer/DevelopLayer.tsx
================================================
import React from "react";
import "./DevelopLayer.scss";
import { Point } from "../../DataStructure/Point";
import { Station } from "../../DataStructure/Station";
import { Line } from "../../DataStructure/Line";
import LineRender from "../Component/LineRender";
import { CardShowing } from "../../Data/UserData";
function DevelopLayer() {
// test line and station
const pointA = new Point(200, 200);
const pointB = new Point(300, 300);
const pointC = new Point(600, 300);
const pointD = new Point(800, 300);
const pointE = new Point(200, 400);
const pointF = new Point(800, 200);
const pointG = new Point(500, 500);
const A = new Station(pointA);
const B = new Station(pointB);
B._dev_tag = "B";
const C = new Station(pointC);
const D = new Station(pointD);
const E = new Station(pointE);
const F = new Station(pointF);
const G = new Station(pointG);
const line1 = new Line();
const line3 = new Line();
const line8 = new Line();
const line9 = new Line();
line1.linkAll([A, B, C, D]);
// line3.linkAll([E, B, C, D, F, E]);
line8._dev_tag='line8';
line8.linkAll([E, B, C, D]);
line9.linkAll([A, E, G,D,F]);
// console.log(line1, line3, line8);
console.log(A, B, C, D, E, F);
const allStationsList = [A, B, C, D, E, F, G];
const allLinesList = [line1, line3, line8, line9];
const renderStations = (allStationsList: Station[]) => {
return (
e.stopPropagation()}>
{
e.stopPropagation();
if (page === "title" || page === "tools") {
setDisplay("block");
setTimeout(() => setPage("menu"));
setTitleEditable(true);
}
}}
onInput={(e) => setTitle(e.currentTarget.value)}
ref={inputRef}
style={{
cursor:
page === "title"
? "pointer"
: page === "tools"
? "default"
: titleEditable
? "auto"
: "default",
}}
disabled={!titleEditable}
/>
{
if (page !== "tools") {
setToolsDisPlay("none");
setFunctionMode(FunctionMode.normal);
}
}}
>
{tools()}
{t("menu.station")}
showTools(e, FunctionMode.dragingStation)}
>
{t("menu.changeStationPosition")}...
{
e.stopPropagation();
setShowName(!showName);
}}
>
{showName ? t("menu.hidden") : t("menu.show")}
{t("menu.stationName")}...
{showName ? (
{
e.stopPropagation();
setAutoHiddenName(!autoHiddenName);
}}
>
{autoHiddenName ? t("menu.turnOff") : t("menu.turnOn")}
{t("menu.AutoHidden")}...
) : (
<>
)}
{t("menu.line")}
showTools(e, FunctionMode.lineEditing)}
>
{t("menu.insertStation")}
{
mediateMap(data, transfromTools);
}}
>
{t("menu.mediateMap")}
showTools(e, FunctionMode.backgroundEditing)}
>
{t("menu.addBackgroundImage")}
{t("menu.data")}
{
const current = localStorage.getItem("current");
if (current && !saved)
exportJson(
current!,
`${title}-autosave-${moment().format(
"YYYY-MM-DD_HH-mm-ss"
)}.json`
);
setData({
stations: new Map(),
lines: new Map(),
title: t("menu.newMap"),
});
showTools(e, FunctionMode.addingStation);
}}
>
{t("menu.addNewMap")}
{
setSelectedMap("");
setOriginalMap(data);
showTools(e, FunctionMode.choosingExistMap);
}}
>
{t("menu.addFromTemplate")}
{
e.stopPropagation();
importFromFile().then((res) => {
const data = setDataFromJson(setData, res);
mediateMap(data, transfromTools);
});
}}
>
{t("menu.importFile")}
{engine.name === "WebKit" ? (
<>
) : (
{
e.stopPropagation();
setDrawing(true);
}}
>
{t("menu.exportAsImage")}
)}
{
e.stopPropagation();
setDrawing(true);
setTimeout(() => {
toSvg(
document.querySelector(".transform-layer")! as HTMLElement
).then((dataUrl) => {
const svg = decodeURIComponent(
dataUrl.replace(
/data:image\/svg\+xml;charset=utf-8,/,
""
)
);
console.log(svg);
exportFile(
svg!,
`${title}-${moment().format(
"YYYY-MM-DD_HH-mm-ss"
)}.svg`,
"image/svg+xml"
);
});
}, 300);
}}
>
{t("menu.exportAsSVG")}
{
e.stopPropagation();
const current = stringifyData(data);
setSaved(true);
exportJson(
current!,
`${title}-${moment().format("YYYY-MM-DD_HH-mm-ss")}.json`
);
}}
>
{t("menu.exportAsFile")}
{
e.stopPropagation();
const current = localStorage.getItem("current");
if (current) {
const data = setDataFromJson(setData, current);
readFileFromIndexedDB("image")
.then((file) => {
setData((data) => ({
...data,
// backgroundColor: "image",
backgroundImage: file as File,
}));
})
.catch((e) => {
console.error(e);
});
mediateMap(data, transfromTools);
}
}}
>
{t("menu.recoverData")}
{
e.stopPropagation();
const current = localStorage.getItem("last");
exportJson(
current!,
`${title}-recovery-${moment().format(
"YYYY-MM-DD_HH-mm-ss"
)}.json`
);
}}
>
{t("menu.exportRecoveryData")}
{t("menu.about")}
{
e.stopPropagation();
window.open(
"https://github.com/RyanEdo/mini-metro-web",
"_blank"
);
}}
>
{t("menu.projectAddress")}
{
if (window.innerWidth >= 710) setShowTour(true);
else {
e.stopPropagation();
window.open(
"https://www.bilibili.com/video/BV1E4421D7Yn/",
"_blank"
);
}
}}
>
{t("menu.guide")}
{window.innerWidth >= 710 ? (
{
e.stopPropagation();
window.open(
"https://www.bilibili.com/video/BV1E4421D7Yn/",
"_blank"
);
}}
>
{t("menu.videoGuild")}
) : (
<>
)}
{
e.stopPropagation();
console.log(i18n)
i18n.changeLanguage(i18n.language === "zh-CN"? "en-US": "zh-CN");
}}
>
{t("menu.switchLanguage")}...
{/*
{
e.stopPropagation();
window.open(
"https://railmapgen.org/?utm_source=mini-metro-web",
"_blank"
);
}}
>
{t("menu.RMP")}
{t("menu.version")}1.2.1
{
e.stopPropagation();
window.open("https://space.bilibili.com/8217854", "_blank");
}}
>
{t("menu.author")}
{allStationsList.map((station, index) => (
);
};
// const renderLines = (allLinesList: Line[], cardShowing: CardShowing, setCardShowing: Dispatch
{String.fromCharCode("A".charCodeAt(0) + index)}
))}
// {allLinesList.map((line) => {
// return ;
// })}
//
// );
// };
return (
{/*
);
}
export default DevelopLayer;
================================================
FILE: src/Render/Layer/RenderLayer.scss
================================================
.station-render {
cursor: pointer;
.station-shape {
height: 30px;
width: 30px;
// transform: translate(-50%,-50%);
display: inline-flex;
// align-content: center;
justify-content: center;
align-items: center;
svg {
fill: white;
// &.square {
// zoom: 0.9;
// }
// &.triangle {
// zoom: 1.05;
// }
// &.start {
// zoom: 1.15;
// }
// &.hexagon {
// zoom: 0.9;
// }
// &.pentagon {
// zoom: 1.1;
// }
&.shadow{
position: absolute;
transform: scale(1.5);
transform-origin: center;
*{
fill: inherit;
stroke: inherit;
}
}
}
}
.station-name {
display: inline-block;
font-size: 18px;
font-weight: 500;
// font-size: 30px;
// font-weight: 1000;
vertical-align: top;
// margin-left: 5px;
white-space: nowrap;
}
}
================================================
FILE: src/Render/Layer/RenderLayer.tsx
================================================
import React, {
CSSProperties,
Dispatch,
MouseEventHandler,
SetStateAction,
useEffect,
useLayoutEffect,
useState,
} from "react";
import DevelopLayer from "./DevelopLayer";
import { LineCard } from "../Card/LineCard";
import { Cards } from "../Card/Cards";
import {
CardShowing,
ChangeSteps,
DrawProps,
DrawerSize,
InsertInfo,
LineChanges,
LineProps,
RecordType,
ShowNameProps,
StationProps,
UserDataType,
dataProcessor,
} from "../../Data/UserData";
import { Station } from "../../DataStructure/Station";
import { Point } from "../../DataStructure/Point";
import { mapToArr } from "../../Common/util";
import { Line } from "../../DataStructure/Line";
import LineRender from "../Component/LineRender";
import shapes, { shapesWithStyle } from "../../Resource/Shape/shape";
import "./RenderLayer.scss";
import { FunctionMode, Mode } from "../../DataStructure/Mode";
import { Direct } from "../../DataStructure/Direction";
import { clearHandle, getHandleCommand } from "../../Line/Handle";
import {
getAllKeyPoints,
getRoundedPoints,
generateLineCommand,
} from "../../Line/LinePoints";
import classNames from "classnames";
type RenderProps = {
data: UserDataType;
setData: Dispatch
{new Array(100 * 50).fill(1).map((x, index) => (
*/}
{renderStations(allStationsList)}
{/* {renderLines(allLinesList)} */}
{index}
))}
{allLinesList.map((line) => {
const command = commandMap.get(line);
return (
);
};
function RenderLayer({
data,
setData,
functionMode,
setFunctionMode,
record,
setRecord,
currentRecordIndex,
setCurrentRecordIndex,
translateX,
translateY,
scale,
insertInfo,
setInsertInfo,
cardShowing,
setCardShowing,
editingMode,
showName,
setShowName,
autoHiddenName,
setAutoHiddenName,
drawing,
setDrawing,
drawerX,
drawerY,
}: RenderProps) {
const { lines, stations } = data;
const stationMap = buildStations(stations);
const lineMap = buildLines(lines, stationMap);
const allStationsList = mapToArr(stationMap);
const allLinesList = mapToArr(lineMap);
const [mouseDown, setMouseDown] = useState(false);
const [stationBeingDrag, setStationBeingDrag] = useState
{allStationsList.map((station, index) => {
const { displayStation, position } = station;
const { x, y } = position;
const {
stationName,
shape,
stationId,
lineIds: stationLineIds,
tagDirection,
} = displayStation!;
const descend = stations.size - index;
const add = async () => {
if (!moved) setCardShowing({ stationIds: [stationId] });
if (functionMode === FunctionMode.selectingStation) {
const { insertIndex, line } = insertInfo!;
const { lineId } = line;
const { addStationToLine } = dataProcessor(lineId, setData, data);
const added = await addStationToLine(stationId, insertIndex);
console.log(insertIndex);
if(added)
setInsertInfo({
insertIndex: insertIndex ? insertIndex + 1 : 0,
line,
});
const newRecord = record.slice(
0,
currentRecordIndex + 1
) as LineChanges[];
setRecord(
newRecord.concat([
{ stationId, lineId, stationIndex: insertIndex },
])
);
setCurrentRecordIndex(currentRecordIndex + 1);
setCardShowing({ stationIds: [stationId], lineIds: [lineId] });
// setFunctionMode(FunctionMode.lineEditing);
}
};
let nameDirection: Direct = station.getBestDirectionForName();
if (tagDirection || tagDirection === 0) nameDirection = tagDirection;
const SQRT1_2 = Math.SQRT1_2;
const directionOffset = [
[0, -1],
[SQRT1_2, -SQRT1_2],
[1, 0],
[SQRT1_2, SQRT1_2],
[0, 1],
[-SQRT1_2, SQRT1_2],
[-1, 0],
[-SQRT1_2, -SQRT1_2],
];
const k = 20; // distance from station to name
const namePosition = directionOffset[nameDirection];
const [dX, dY] = namePosition;
const nameX = dX * k + x;
const nameY = dY * k + y;
const translate = [
[-1, -2],
[0, -2],
[0, -1],
[0, 0],
[-1, 0],
[-2, 0],
[-2, -1],
[-2, -2],
];
const [tX, tY] = translate[nameDirection];
const { lineIds, stationIds } = cardShowing;
const emphasis = stationIds?.includes(stationId);
const getEmphasisColor = (lineIds?: number[]) =>
Array.isArray(lineIds) &&
lineIds.length &&
lines.get(lineIds[0])?.color;
const emphasisColor =
getEmphasisColor(lineIds) ||
getEmphasisColor(stationLineIds) ||
"#00000055";
const nameStyle: CSSProperties = {
position: "absolute",
left: nameX,
top: nameY,
transform: `translate(${50 * tX}%,${50 * tY}%)`,
};
return (
);
};
const commandMap = new Map operationStart(e, station)}
onTouchStart={(e) => operationStart(e, station)}
className={classNames({ "station-render": 1 , [`station-trigger-descend-${descend}`]: 1})}
onTouchMove={() => setMoved(true)}
onMouseMove={() => setMoved(true)}
onTouchEnd={add}
onClick={add}
>
);
})}
{emphasis && //@ts-ignore
shapesWithStyle(
{
fill: emphasisColor,
stroke: emphasisColor,
// width: 31,
// height: 31
},
"shadow"
)[shape]}
{
//@ts-ignore
shapesWithStyle({ zIndex: 100 })[shape]
}
{stationName}
{/* {String.fromCharCode("A".charCodeAt(0) + index)} */}
{lineComp}
{stationComp}
{/*
);
}
export default RenderLayer;
================================================
FILE: src/Render/Layer/ScaleLayer.scss
================================================
.ScaleLayer{
width: 100vw;
height: 100vh;
overflow: hidden;
.layer-for-welcome-tour{
position: fixed;
z-index: -500;
width: 70vw;
height: 70vh;
left: 15vw;
top: 15vw;
}
.transform-layer{
transform-origin: left top;
// never use will-change here, it makes child elements blurry
// will-change: transform;
}
.background-layer{
position: absolute;
pointer-events: none;
transform-origin: left top;
appearance: none;
border: none;
box-shadow: none;
border-image-width: 0;
&:not([src]) {
opacity: 0 !important;
}
}
}
================================================
FILE: src/Render/Layer/ScaleLayer.tsx
================================================
import React, {
CSSProperties,
Dispatch,
SetStateAction,
useMemo,
useState,
} from "react";
import { FunctionMode, Mode } from "../../DataStructure/Mode";
import RenderLayer from "./RenderLayer";
import {
onMouseDown,
onMouseLeave,
onMouseMove,
onMouseUp,
onTouchEnd,
onTouchMove,
onTouchStart,
onWheel,
} from "../../Grid/Scale";
import "./ScaleLayer.scss";
import { getCursor } from "../../Style/Cursor";
import { Point } from "../../DataStructure/Point";
import {
CardShowing,
ChangeSteps,
DrawProps,
InsertInfo,
PageProps,
RecordType,
ShowNameProps,
StationProps,
TransformProps,
UserDataType,
} from "../../Data/UserData";
import { browserInfo, getBoundary, mapToArr } from "../../Common/util";
type ScaleLayerProp = {
editingMode: Mode;
setEditingMode: React.Dispatch
onWheel(
event,
scale,
setScale,
translateX,
translateY,
setTranslateX,
setTranslateY,
functionMode
)
}
onMouseDown={(event) =>
onMouseDown(
event,
translateX,
translateY,
setEditingMode,
setMouseRefPoint,
setMouseStartTranslate,
setMoved
)
}
onMouseUp={(event) =>
onMouseUp(
event,
setEditingMode,
editingMode,
functionMode,
data,
setData,
moved,
translateX,
translateY,
scale,
record,
setRecord,
currentRecordIndex,
setCurrentRecordIndex,
cardShowing,
setCardShowing,
defaultShape
)
}
onMouseLeave={(event) => onMouseLeave(event, setEditingMode)}
onMouseMove={(event) =>
onMouseMove(
event,
translateX,
translateY,
setTranslateX,
setTranslateY,
editingMode,
mouseRefPoint,
mouseStartTranslate,
setMoved
)
}
onTouchStart={(event) =>
onTouchStart(
event,
setEditingMode,
setTouchRefPoint,
setTouchStartDistance,
setTouchStartScale,
scale,
setTouchStartTranslate,
translateX,
translateY,
setMoved
)
}
onTouchMove={(event) =>
onTouchMove(
event,
editingMode,
touchRefPoint,
translateX,
translateY,
setTranslateX,
setTranslateY,
touchStartDistance,
touchStartScale,
setScale,
touchStartTranslate,
setMoved
)
}
onTouchEnd={(event) =>
onTouchEnd(
event,
setEditingMode,
editingMode,
functionMode,
data,
setData,
moved,
translateX,
translateY,
scale,
record,
setRecord,
currentRecordIndex,
setCurrentRecordIndex,
cardShowing,
setCardShowing,
defaultShape
)
}
style={{ cursor: getCursor(editingMode), backgroundColor }}
>
{/* 
*/}
);
}
export default ScaleLayer;
================================================
FILE: src/Render/Recovery/Recovery.scss
================================================
.App{
perspective: 1000px;
perspective-origin: 100vw 105px;
z-index: 10000;
}
.recovery-notification-container {
position: fixed;
right: 0;
top: 0;
transform-origin: right center;
transition: ease-in-out 0.5s;
&.show {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
&:not(.show) {
transform: rotate3d(0, 1, 0, -90deg);
opacity: 0;
}
.recovery-notification {
@media screen and (max-width: 520px) {
display: none;
}
position: fixed;
top: 30px;
right: 30px;
width: 363px;
height: 75px;
display: flex;
// justify-content: space-between;
align-items: center;
background-color: rgb(255, 255, 255, 0.72);
box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.25);
backdrop-filter: blur(15px);
border-radius: 15px;
transition: ease-in-out 0.3s;
// zoom: 1.2;
&:hover {
background-color: rgba(255, 255, 255, 0.001);
}
.icon {
margin: 0 20px;
}
.icon,
.ok,
.no {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.ok,
.no {
cursor: pointer;
position: absolute;
}
.icon,
.ok {
background-color: rgb(235, 10, 40, 0.1);
}
.no {
background-color: #d9d9d9;
right: 20px;
}
.icon {
svg {
width: 20px;
height: 20px;
}
}
.ok {
right: 60px;
transition: ease-in-out 0.3s;
&:hover {
background-color: rgb(235, 10, 40, 0.2);
}
svg {
width: 16px;
}
}
.no {
transition: ease-in-out 0.3s;
&:hover {
background-color: #c9c9c9;
}
svg {
width: 12px;
}
}
.text {
.title {
font-size: 16px;
}
.sub-title {
font-size: 12px;
}
font-weight: 500;
}
}
}
================================================
FILE: src/Render/Recovery/Recovery.tsx
================================================
import React, {
Dispatch,
SetStateAction,
useEffect,
useRef,
useState,
} from "react";
import { ReactComponent as RecoverIcon } from "../../Resource/Icon/clock.arrow.circlepath.svg";
import { ReactComponent as OkIcon } from "../../Resource/Icon/ok.svg";
import { ReactComponent as NoIcon } from "../../Resource/Icon/no.svg";
import "./Recovery.scss";
import { setDataFromJson, UserDataType } from "../../Data/UserData";
import { mediateMap, readFileFromIndexedDB } from "../../Common/util";
import classNames from "classnames";
import { useTranslation } from "react-i18next";
export function Recovery({
data,
setData,
recoveredFromError,
setRecoveredFromError,
transfromTools,
}: {
data: UserDataType;
setData: Dispatch
{imageSrc?:<>}
{t('recover.text')}
{t('recover.subTitle')}
{
const current = localStorage.getItem("current");
if (current) {
const data = setDataFromJson(setData, current);
readFileFromIndexedDB("image")
.then((file) => {
setData((data) => ({
...data,
// backgroundColor: "image",
backgroundImage: file as File,
}));
})
.catch((e) => {
console.error(e);
});
mediateMap(data, transfromTools);
}
setShowNotification(false);
}}
>
{
setShowNotification(false);
}}
>
{t('welcome.welcome')}
{t('welecome.minimetroweb')}
{next ? (
<>
{
setShow(false);
// if (!localStorage.getItem("skip-tour-viewed"))
// showTour("skip", () => {
localStorage.setItem("skip-tour-viewed", "Y");
// });
}}
>
{t('welcome.skip')}
{
if (next.id === "mobile") {
showQRCode();
} else {
setShow(false);
showTour(next.id, () => {
setShow(true);
setVisited(next.id);
scrollToNext();
});
}
}}
>
{visitedSteps.length ? t('welcome.goOn') : ""}
{next.more}
) : (
<>
{t('welcome.restart')}
{
localStorage.setItem("skip-tour-viewed", "Y");
setShow(false);
}}
>
{t('welcome.done')}
)}
{hightLights.map((hightLight) => {
const { id, icon, title, subTitle, introText, more } = hightLight;
const finished = visitedSteps.includes(id);
return (
{id === "mobile" ? (
);
})}
{icon}
{title}
{subTitle}
{introText.map((line) => {
const emphasisStart = line[0];
const lineText = line.slice(1);
return (
{lineText.map((text, index) => {
const emphasis =
(Number(emphasisStart) + index) % 2;
return (
{text}
);
})}
);
})}
{
if (id === "mobile") {
showQRCode();
} else {
showTour(id, () => {
setVisited(id);
setShow(true);
scrollToNext();
});
setShow(false);
}
}}
>
{more}
{finished ? (
setQRCode(false)}
>
) : (
<>
)}