3 |
4 | # Mini Metro Web
5 | 迷你地铁地图构建工具: `创建迷你地铁风格的地铁线路图`。
6 |
7 | 支持**无限**站点与线路，支持**多次穿过**同一站点，设置**背景图**，设置**支线**，支持**导出图片**。
8 |
9 | [https://mini-metro-web.gitlab.io/](https://mini-metro-web.gitlab.io/)
10 |
11 | [English Version](https://github.com/RyanEdo/mini-metro-web/blob/master/README.md)
12 |
13 |
14 | ## 更新日志
15 | #### 1.2.1 `修复添加站点时，连续双击站点导致的站点重复添加报错`
16 | #### 1.2.0 `支持英文`
17 | #### 1.1.1 `增加更多站点形状，新增站点时支持修改默认形状`
18 | #### 1.1.0 `支持修改背景颜色与背景图`
19 | #### 1.0.2 `加入刷新后快速恢复通知`
20 | #### 1.0.1 `加入报错指引`
21 |
22 |
23 | ## 基本用法
24 |
25 | ### 菜单
26 | 点击左上角标题进入菜单，点击任意空白处退出菜单
27 |
28 | ### 创建站点
29 | 1. 菜单 => 站点 => 添加站点
30 | 2. 点击空白处添加
31 |
32 | ### 创建线路
33 | 1. 点击任意站点
34 | 2. 选择 操作 => 以此为起点新建线路
35 | 3. 按照提示依次点击站点添加到线路
36 |
37 | ### 删除站点/线路
38 | 1. 点击站点/线路
39 | 2. 选择 操作 => 删除
40 |
41 | ### 设置背景图
42 | 1. 点击线路 => 设定背景
43 | 2. 选择 `纯白` / `浅黄` / `取色器` 设定背景颜色
44 | 3. 选择 `导入背景图` 导入图片
45 | 4. 导入图片后，进入修改图片页面，可以拖动修改图片位置，也可以修改图片透明度
46 |
47 | ### 导出图片/文件
48 | 菜单 => 作为图片/文件导出
49 |
50 | ## 进阶用法
51 | 请参考应用内教程或[视频教程](https://space.bilibili.com/8217854)
52 |
53 | ## 构建
54 |
55 | 和大部分react项目一样，先运行`npm i`,然后:
56 |
57 | ### `npm start`
58 |
59 | 本地运行
60 | 打开 [http://localhost:3000](http://localhost:3000) 浏览器中查看.
61 |
62 | ### `npm run build`
63 |
64 | 打包成静态文件
65 |
66 | ### 注意
67 | ##### 建议安装 `i18n-ally`[VS Code 插件地址](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) 。项目有部分字符串由该插件生成，安装后能自动在字符串位置显示原文。
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
42 |
43 | {value}
44 |
45 | {
56 | if (document.activeElement === e.currentTarget) e.stopPropagation();
57 | }}
58 | onBlur={(e)=>{
59 | if(type === "number")
60 | setTimeout(()=>{
61 | //@ts-ignore
62 | e.target.value = value
63 | })
64 | }}
65 | >
66 | {disabled?:<>}
67 |
68 | );
69 | })
70 |
--------------------------------------------------------------------------------
/src/Common/api.ts:
--------------------------------------------------------------------------------
1 | export const getExistMap = (id:string) => {
2 | const url = `/${id}.json`;
3 | return fetch(url).then(res=>res.text());
4 | }
--------------------------------------------------------------------------------
/src/Common/color.ts:
--------------------------------------------------------------------------------
1 | import { arrayToMap } from "./util";
2 |
3 | export const colorSH = [
4 | {
5 | "line": "1号线",
6 | "color": "#EA0B2A",
7 | "color_name": "正红色",
8 | "rgb": [234, 11, 42]
9 | },
10 | {
11 | "line": "2号线",
12 | "color": "#94D40B",
13 | "color_name": "绿色",
14 | "rgb": [148, 212, 11]
15 | },
16 | {
17 | "line": "3号线",
18 | "color": "#F8D000",
19 | "color_name": "黄色",
20 | "rgb": [248, 208, 0]
21 | },
22 | {
23 | "line": "4号线",
24 | "color": "#60269E",
25 | "color_name": "紫色",
26 | "rgb": [96, 38, 158]
27 | },
28 | {
29 | "line": "5号线",
30 | "color": "#934C9A",
31 | "color_name": "紫红色",
32 | "rgb": [147, 76, 154]
33 | },
34 | {
35 | "line": "6号线",
36 | "color": "#D80169",
37 | "color_name": "品红色",
38 | "rgb": [216, 1, 105]
39 | },
40 | {
41 | "line": "7号线",
42 | "color": "#FE6B01",
43 | "color_name": "橙色",
44 | "rgb": [254, 107, 1]
45 | },
46 | {
47 | "line": "8号线",
48 | "color": "#00A0E8",
49 | "color_name": "蓝色",
50 | "rgb": [0, 160, 232]
51 | },
52 | {
53 | "line": "9号线",
54 | "color": "#6FC5E8",
55 | "color_name": "淡蓝色",
56 | "rgb": [111, 197, 232]
57 | },
58 | {
59 | "line": "10号线",
60 | "color": "#C3A5E1",
61 | "color_name": "淡紫色",
62 | "rgb": [195, 165, 225]
63 | },
64 | {
65 | "line": "11号线",
66 | "color": "#792330",
67 | "color_name": "棕色",
68 | "rgb": [121, 35, 48]
69 | },
70 | {
71 | "line": "12号线",
72 | "color": "#007A61",
73 | "color_name": "深绿色",
74 | "rgb": [0, 122, 97]
75 | },
76 | {
77 | "line": "13号线",
78 | "color": "#F095CE",
79 | "color_name": "粉色",
80 | "rgb": [240, 149, 206]
81 | },
82 | {
83 | "line": "14号线",
84 | "color": "#827805",
85 | "color_name": "橄榄绿色",
86 | "rgb": [130, 120, 5]
87 | },
88 | {
89 | "line": "15号线",
90 | "color": "#BDA686",
91 | "color_name": "香槟金色",
92 | "rgb": [189, 166, 134]
93 | },
94 | {
95 | "line": "16号线",
96 | "color": "#2AD2C5",
97 | "color_name": "水绿色",
98 | "rgb": [42, 210, 197]
99 | }
100 | ];
101 |
102 | export const colorSHMap = arrayToMap("color",colorSH);
--------------------------------------------------------------------------------
/src/Common/const.ts:
--------------------------------------------------------------------------------
1 | const gauge = 10;
2 | const line_radius = 10;
3 | const handleLength = 45;
4 | const handleWidth = 15;
5 | export { gauge, line_radius, handleLength, handleWidth };
6 |
--------------------------------------------------------------------------------
/src/Data/Shape.ts:
--------------------------------------------------------------------------------
1 | export const Shape = {
2 | 'cicle': '圆形', // typo
3 | 'square': '正方形',
4 | 'triangle': '三角形',
5 | 'start': '五角星', // typo
6 | 'pentagon': '五边形',
7 | 'hexagon': '六边形',
8 | 'cross': '十字形',
9 | 'rhombus': '菱形',
10 | 'diamond': '钻石',
11 | 'leaf': '叶子',
12 | 'ginkgo': '银杏'
13 | };
14 |
--------------------------------------------------------------------------------
/src/DataStructure/Bend.ts:
--------------------------------------------------------------------------------
1 | import { Rail } from "./Rail";
2 | import { Track } from "./Track";
3 |
4 | export class Bend {
5 | // filter empty indexes
6 | static round1(track: Track) {
7 | const emptyRails = track.getEmptyRails().map((rail) => rail.index);
8 | if (emptyRails.length) return emptyRails;
9 | return [0, 1, 2];
10 | }
11 | // filter opposite rails
12 | static round2(track: Track, round1Indexes: number[], rail?: Rail) {
13 | // rail not exist or in/out rail direction not just opposite to the candidate rail direction
14 | if (!rail || !rail.track.direction.oppositeTo(track.direction))
15 | return round1Indexes;
16 | return round1Indexes.filter(
17 | (railIndex) => rail.oppositeIndex() === railIndex
18 | );
19 | }
20 | // filter center rail
21 | static round3(round2Indexes: number[]) {
22 | if (round2Indexes.find((railIndex) => railIndex === 1)) return 1;
23 | }
24 |
25 | // filter most close rail
26 | static round4(track: Track, rail?: Rail) {
27 | if (!rail) return 0;
28 | return rail.track.direction.rotationTo(track.direction) > 0 ? 0 : 2;
29 | }
30 |
31 | static getBestRailIndex(track: Track, rail?: Rail) {
32 | const round1Indexes = this.round1(track);
33 | if (round1Indexes.length === 1) return round1Indexes[0];
34 | const round2Indexes = this.round2(track, round1Indexes, rail);
35 | if (round2Indexes.length === 1) return round2Indexes[0];
36 | const round3Res = this.round3(round2Indexes);
37 | if (round3Res === 1) return 1;
38 | const round4Res = this.round4(track, rail);
39 | return round4Res;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/DataStructure/ConnectType.ts:
--------------------------------------------------------------------------------
1 | export enum ConnectType {
2 | straight,
3 | straightFirst,
4 | bendFirst
5 | }
--------------------------------------------------------------------------------
/src/DataStructure/Direction.ts:
--------------------------------------------------------------------------------
1 | //clockwise
2 |
3 | export enum Direct {
4 | up,
5 | upRight,
6 | right,
7 | rightDown,
8 | down,
9 | downLeft,
10 | left,
11 | leftUp,
12 | // Quadrant I bisected by a diagonal line
13 | // upRightA means the upper half
14 | // upRightB means the lower half
15 | // all the directions is marked in clockwise
16 | upRightA,
17 | upRightB,
18 | rightDownA,
19 | rightDownB,
20 | downLeftA,
21 | downLeftB,
22 | leftUpA,
23 | leftUpB,
24 | coincide,
25 | }
26 |
27 | export class Direction {
28 | direct: Direct;
29 | standard: boolean;
30 | lean: boolean;
31 | constructor(direct: Direct) {
32 | this.direct = direct;
33 | this.standard = direct < 8;
34 | this.lean = direct % 2 === 1;
35 | }
36 |
37 | delta(direct: Direct){
38 | const diff = Math.abs(direct - this.direct);
39 | return Math.min(diff, 8-diff);
40 | }
41 |
42 | opposite() {
43 | if (this.direct < 8) return new Direction((this.direct + 4) % 8);
44 | if (this.direct >= 8 && this.direct < 12)
45 | return new Direction(this.direct + 4);
46 | if (this.direct >= 12 && this.direct < 16)
47 | return new Direction(this.direct - 4);
48 | return new Direction(this.direct);
49 | }
50 |
51 | oppositeTo(direction: Direction | undefined) {
52 | if (direction) return direction.opposite().direct === this.direct;
53 | throw new Error("no direction!");
54 | }
55 |
56 | sameTo(direction: Direction) {
57 | return this.direct === direction.direct;
58 | }
59 |
60 | // how many rotation should this direction do to coincide to given direction
61 | // 1 2 3 means clockwise rotate 1 2 3 times
62 | // -1 -2 -3 means counterclockwise
63 | // 0 means no need rotate
64 | // 4 means opposite direction
65 | rotationTo(direction: Direction) {
66 | if (this.oppositeTo(direction)) return 4;
67 | const side = direction.direct - this.direct;
68 | if (side < -4) return side + 8;
69 | if (side > 4) return side - 8;
70 | return side;
71 | }
72 | getBendSteps(bendFirst: boolean) {
73 | if (this.direct < 8 || this.direct > 15) {
74 | throw new Error("this is not bend direction");
75 | }
76 | const firstStep = new Direction(this.direct - 7 - (this.direct % 2));
77 | const secondStep = new Direction((this.direct - 8 + (this.direct % 2)) % 8);
78 | return bendFirst ? [firstStep, secondStep] : [secondStep, firstStep];
79 | }
80 | }
81 |
82 | export const DirectionVictor = [
83 | [0, 1],
84 | [1, 1],
85 | [1, 0],
86 | [1, -1],
87 | [0, -1],
88 | [-1, -1],
89 | [-1, 0],
90 | [-1, 1],
91 | ];
92 |
93 | export const DirectionVictorReverseY = DirectionVictor.map(([x,y])=>[x,-y]);
94 |
--------------------------------------------------------------------------------
/src/DataStructure/Display.ts:
--------------------------------------------------------------------------------
1 | import { Station } from "./Station";
2 |
3 | export class DisplayStation {
4 | stationName: string;
5 | bendFirst: boolean;
6 | constructor(stationName: string, bendFirst: boolean){
7 | this.stationName = stationName;
8 | this.bendFirst = bendFirst;
9 | }
10 | }
--------------------------------------------------------------------------------
/src/DataStructure/Line.ts:
--------------------------------------------------------------------------------
1 | import { LineProps } from "../Data/UserData";
2 | import { Bend } from "./Bend";
3 | import { ConnectType } from "./ConnectType";
4 | import { LineRecord } from "./LineRecord";
5 | import { Rail } from "./Rail";
6 | import { RailPair } from "./RailPair";
7 | import { Station } from "./Station";
8 | import { Straight } from "./Straight";
9 | import { Vector } from "./Vector";
10 | export class Line {
11 | empty: boolean;
12 | departureRecord: LineRecord | undefined;
13 | _dev_tag: string | undefined;
14 | displayLine?: LineProps;
15 | constructor() {
16 | this.empty = false;
17 | }
18 |
19 | getTerminalRecord(){
20 | let p = this.departureRecord;
21 | while(p?.nextLineRecord){
22 | p = p.nextLineRecord;
23 | if(p === this.departureRecord || !p.nextLineRecord) return p;
24 | }
25 | return p;
26 | }
27 |
28 | linkAll(stations: Station[]){
29 | stations.reduce((pre,cur)=>{
30 | this.link(pre,cur);
31 | return cur;
32 | });
33 | }
34 |
35 |
36 | // connect B station and C station
37 | link(B: Station, C: Station, bendFirst: boolean = true) {
38 | const railPair = this.applyBestRailPair(B,C,bendFirst);
39 | railPair.setLine(this);
40 | let bLineRecord = B.getJoint(this);
41 | if (!bLineRecord) {
42 | //if record not exist, add one
43 | bLineRecord = new LineRecord(B, this);
44 | // register cLineRecord in C station
45 | B.addLineRecord(bLineRecord);
46 | this.departureRecord = bLineRecord;
47 | }
48 | let cLineRecord// = C.getJoint(this);
49 | if (!cLineRecord) {
50 | cLineRecord = new LineRecord(C, this);
51 | // register cLineRecord in C station
52 | C.addLineRecord(cLineRecord);
53 | }
54 | // establish doubly linked list
55 | bLineRecord?.establishConnectionTo(cLineRecord);
56 | // update rail and connect type for B and C
57 | LineRecord.updateLineRecords(bLineRecord, cLineRecord, railPair);
58 | }
59 |
60 | applyBestRailPair(B: Station, C: Station, bendFirst: boolean) {
61 | const direction = new Vector(B.position, C.position);
62 | if (direction.standard) {
63 | const bOutIndex = Straight.getBestRailIndex(B, C, this);
64 | const cInIndex = Rail.oppositeIndex(bOutIndex);
65 | // if(B.displayStation?.stationName==='风起地站'&&C.displayStation?.stationName==='达达乌帕谷') debugger
66 | const bTrack = B.getTrack(direction);
67 | const cTrack = C.getTrack(direction.opposite());
68 | const bRail = bTrack.getAvailableRail(bOutIndex);
69 | const cRail = cTrack.getAvailableRail(cInIndex);
70 | return new RailPair(bRail, cRail);
71 | } else {
72 | const [bOutDirection, cInDirectionOpposite] =
73 | direction.getBendSteps(bendFirst);
74 | const cInDirection = cInDirectionOpposite.opposite();
75 | const bTrack = B.getTrack(bOutDirection);
76 | const cTrack = C.getTrack(cInDirection);
77 | const bLastRail = B.getJoint(this)?.lastRail;
78 | const cNextRail = C.getJoint(this)?.nextRail;
79 | const bOutIndex = Bend.getBestRailIndex(bTrack, bLastRail);
80 | const cInIndex = Bend.getBestRailIndex(cTrack, cNextRail);
81 | const bRail = bTrack.getAvailableRail(bOutIndex);
82 | const cRail = cTrack.getAvailableRail(cInIndex);
83 | return new RailPair(bRail, cRail);
84 | }
85 | }
86 | }
87 |
88 | export class EmptyLine extends Line {
89 | constructor() {
90 | super();
91 | this.empty = true;
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/src/DataStructure/LineRecord.ts:
--------------------------------------------------------------------------------
1 | import { ConnectType } from "./ConnectType";
2 | import { Line } from "./Line";
3 | import { Rail } from "./Rail";
4 | import { RailPair } from "./RailPair";
5 | import { Station } from "./Station";
6 |
7 | export class LineRecord {
8 | station: Station;
9 | line: Line | undefined;
10 | lastLineRecord: LineRecord | undefined;
11 | nextLineRecord: LineRecord | undefined;
12 | lastRail: Rail | undefined;
13 | nextRail: Rail | undefined;
14 |
15 | constructor(station: Station, line?: Line) {
16 | this.station = station;
17 | if (line) {
18 | this.line = line;
19 | }
20 | }
21 |
22 | getInDirection(){
23 | return this.lastRail?.track.direction;
24 | }
25 |
26 | getOutDirection(){
27 | return this.nextRail?.track.direction;
28 | }
29 | establishConnectionTo(BRecord: LineRecord) {
30 | LineRecord.establishConnection(this, BRecord);
31 | }
32 |
33 | static establishConnection(ARecord: LineRecord, BRecord: LineRecord) {
34 | ARecord.nextLineRecord = BRecord;
35 | BRecord.lastLineRecord = ARecord;
36 | }
37 |
38 | // update the rail and connect type information for connectting 2 linerecords
39 | static updateLineRecords(
40 | ARecord: LineRecord,
41 | BRecord: LineRecord,
42 | railPair: RailPair,
43 | ) {
44 | const { departureRail, arrivalRail } = railPair;
45 | ARecord.nextRail = departureRail;
46 | BRecord.lastRail = arrivalRail;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/DataStructure/Mode.ts:
--------------------------------------------------------------------------------
1 | export enum Mode {
2 | normal,
3 | moving,
4 | touchMoving,
5 | touchScaling
6 | }
7 |
8 |
9 | export enum FunctionMode{
10 | normal,
11 | addingStation,
12 | dragingStation,
13 | lineEditing,
14 | backgroundEditing,
15 | customBackground,
16 | editingCustomBackgroundPosition,
17 | selectingStation,
18 | choosingExistMap,
19 | }
--------------------------------------------------------------------------------
/src/DataStructure/Point.ts:
--------------------------------------------------------------------------------
1 | import { MouseEvent, Touch } from "react";
2 | import { Straight } from "./Straight";
3 |
4 | export class Point {
5 | x: number;
6 | y: number;
7 | yReversed: boolean;
8 | q_start: boolean;
9 | q: boolean;
10 | q_end: boolean;
11 | constructor(x: number = 0, y: number = 0, yReversed: boolean = false) {
12 | this.x = x;
13 | this.y = y;
14 | this.yReversed = yReversed;
15 | this.q_start = false;
16 | this.q = false;
17 | this.q_end = false;
18 | }
19 |
20 | round(){
21 | return new Point(Math.round(this.x), Math.round(this.y))
22 | }
23 |
24 | offset(A: Point) {
25 | return new Point(A.x + this.x, A.y + this.y);
26 | }
27 |
28 | displacementTo(A: Point) {
29 | return new Point(this.x - A.x, this.y - A.y);
30 | }
31 |
32 | distanceTo(A: Point) {
33 | return Math.sqrt(Math.pow(this.x - A.x, 2) + Math.pow(this.y - A.y, 2));
34 | }
35 |
36 | sameTo(A: Point) {
37 | return A.x === this.x && A.y === this.y && A.yReversed === this.yReversed;
38 | }
39 |
40 | reverseY() {
41 | return new Point(this.x, -this.y, !this.yReversed);
42 | }
43 |
44 | static getPointFromTouch(A: Touch) {
45 | return new Point(A.clientX, A.clientY);
46 | }
47 |
48 | static getPointFromMouse(A: MouseEvent) {
49 | return new Point(A.clientX, A.clientY);
50 | }
51 |
52 | static getMidPoint(A: Point, B: Point) {
53 | return new Point((A.x + B.x) / 2, (A.y + B.y) / 2);
54 | }
55 |
56 | static getDisplacement(A: Point, B: Point) {
57 | return new Point(A.x - B.x, A.y - B.y);
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/DataStructure/Rail.ts:
--------------------------------------------------------------------------------
1 | import { EmptyLine, Line } from "./Line";
2 | import { RailPair } from "./RailPair";
3 | import { Track } from "./Track";
4 |
5 | export class Rail {
6 | track: Track;
7 | index: number;
8 | line: Line;
9 | extra: boolean;
10 | constructor(track: Track, index: number) {
11 | this.track = track;
12 | this.index = index;
13 | this.line = new EmptyLine();
14 | this.extra = false;
15 | }
16 |
17 | oppositeIndex(){
18 | return 2 - this.index;
19 | }
20 |
21 | setLine(line: Line){
22 | this.line = line;
23 | }
24 |
25 | static getStraightConnectRailPair(aEmptyRails: Rail[], bEmptyRails: Rail[]) {
26 | if (aEmptyRails.length === 0 || bEmptyRails.length === 0) return;
27 | const railPairs: RailPair[] = [];
28 | aEmptyRails.forEach((aRail) => {
29 | bEmptyRails.forEach((bRail) => {
30 | //found just opposite rail
31 | if (aRail.index + bRail.index === 2) {
32 | railPairs.push(new RailPair(aRail,bRail));
33 | }
34 | });
35 | });
36 | return railPairs;
37 | }
38 |
39 | static getBestRail(rails: Rail[]){
40 | return rails.find(rail=>rail.index === 1) || rails[0];
41 | }
42 |
43 | static getRailByIndex(rails: Rail[], index: number){
44 | return rails.find(rail=>rail.index === index);
45 | }
46 |
47 | static oppositeIndex(index: number){
48 | return 2 - index;
49 | }
50 |
51 | }
52 |
53 | export class ExtraRail extends Rail{
54 | constructor(track: Track, index: number){
55 | super(track, index);
56 | this.extra = true;
57 | }
58 | }
59 |
60 |
61 |
--------------------------------------------------------------------------------
/src/DataStructure/RailPair.ts:
--------------------------------------------------------------------------------
1 | import { Direction } from "./Direction";
2 | import { Line } from "./Line";
3 | import { Rail } from "./Rail";
4 | import { Station } from "./Station";
5 |
6 | export class RailPair {
7 | departureRail: Rail;
8 | arrivalRail: Rail;
9 | center: boolean;
10 | constructor(departureRail: Rail, arrivalRail: Rail) {
11 | this.departureRail = departureRail;
12 | this.arrivalRail = arrivalRail;
13 | this.center = departureRail.index === 1;
14 | }
15 |
16 | reverse(){
17 | const temp = this.departureRail;
18 | this.departureRail = this.arrivalRail;
19 | this.arrivalRail = temp;
20 | }
21 |
22 | setLine(line: Line){
23 | this.departureRail.setLine(line);
24 | this.arrivalRail.setLine(line);
25 | }
26 | }
--------------------------------------------------------------------------------
/src/DataStructure/Station.ts:
--------------------------------------------------------------------------------
1 | import { StationProps } from "../Data/UserData";
2 | import { Direct, Direction } from "./Direction";
3 | import { Line } from "./Line";
4 | import { LineRecord } from "./LineRecord";
5 | import { Point } from "./Point";
6 | import { Rail } from "./Rail";
7 | import { Track } from "./Track";
8 |
9 | export class Station {
10 | position: Point;
11 | tracks: Track[];
12 | lineRecords: Map
115 |
151 |
204 |
54 |
69 | );
70 | });
71 | const stationComp = stationIds?.map((stationId) => {
72 | const station = stations.get(stationId);
73 | if (station)
74 | return (
75 |
76 |
91 | );
92 | });
93 | const [style, setStyle] = useState {
121 | const { target, currentTarget } = e;
122 | if (target === currentTarget) setPointerEvents("none");
123 | else setPointerEvents("auto");
124 | }}
125 | >
126 | {stationFirst ? stationComp : linesComp}
127 | {stationFirst ? linesComp : stationComp}
128 |
129 | );
130 | }
131 |
--------------------------------------------------------------------------------
/src/Render/Component/LineRender.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | CSSProperties,
3 | Dispatch,
4 | SetStateAction,
5 | memo,
6 | useEffect,
7 | useState,
8 | } from "react";
9 | import { Line } from "../../DataStructure/Line";
10 | import { Point } from "../../DataStructure/Point";
11 |
12 | import {
13 | generateLineCommand,
14 | getAllKeyPoints,
15 | getRoundedPoints,
16 | } from "../../Line/LinePoints";
17 | import { clearHandle, getHandleCommand } from "../../Line/Handle";
18 | import { gauge } from "../../Common/const";
19 | import {
20 | CardShowing,
21 | DrawProps,
22 | DrawerSize,
23 | UserDataType,
24 | } from "../../Data/UserData";
25 |
26 | function LineRender({
27 | line,
28 | cardShowing,
29 | setCardShowing,
30 | command,
31 | data,
32 | setData,
33 | drawing,
34 | drawerX,
35 | drawerY,
36 | }: {
37 | line: Line;
38 | cardShowing: CardShowing;
39 | setCardShowing: Dispatch
67 |
94 |
95 | {/* {renderPoints(allKeyPoints)} */}
96 |
97 | );
98 | }
99 |
100 | export default memo(LineRender);
101 |
--------------------------------------------------------------------------------
/src/Render/Delete/DeleteConfirmation.scss:
--------------------------------------------------------------------------------
1 | .delete-confirmation-container {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | z-index: -1000;
6 | height: 100vh;
7 | width: 100vw;
8 | background-color: rgba(255, 255, 255, 0.2);
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | opacity: 0;
13 | transition:
14 | 0.3s ease-in-out opacity,
15 | 0.3s ease-in-out z-index;
16 | &.before-animated,
17 | &.before-disappear {
18 | backdrop-filter: blur(1px);
19 | }
20 | &.animated {
21 | opacity: 1;
22 | backdrop-filter: blur(10px);
23 | z-index: 1000;
24 | }
25 | .delete-confirmation {
26 | text-align: center;
27 |
28 | .title {
29 | font-weight: 500;
30 | font-size: 36px;
31 | padding-left: 13px;
32 | }
33 | .sub-title {
34 | font-weight: 500;
35 | font-size: 18px;
36 | }
37 | .preview {
38 | margin-top: 74.2px;
39 | display: inline-block;
40 | // border-top: 1px solid black;
41 | width: fit-content;
42 | // padding: 0 40px;
43 | text-align: center;
44 | position: relative;
45 | // display: flex;
46 | // align-items: center;
47 | // justify-content: center;
48 | // &>div{
49 | // transform: translateY(-50%);
50 | // }
51 | .preview-content {
52 | display: flex;
53 | justify-content: center;
54 | align-items: center;
55 | .icon {
56 | display: inline-block;
57 | margin-left: 40px;
58 |
59 | .line {
60 | // width: 35.5px;
61 | margin-right: 35.5px;
62 |
63 | .sign-input {
64 | // width: 35.5px;
65 | * {
66 | min-width: 35.5px;
67 | height: 35.5px;
68 | border: none;
69 | border-radius: 8.87px;
70 | background-color: #ea0b2a;
71 | font-size: 23.25px;
72 | color: white;
73 | text-align: center;
74 | }
75 | }
76 | }
77 | .station {
78 | display: flex;
79 | justify-content: center;
80 | align-items: center;
81 | margin-right: 25.8px;
82 | svg {
83 | &.square {
84 | zoom: 0.9;
85 | }
86 | &.triangle {
87 | zoom: 1.05;
88 | }
89 | &.start {
90 | zoom: 1.15;
91 | }
92 | &.hexagon {
93 | zoom: 0.9;
94 | }
95 | &.pentagon {
96 | zoom: 1.1;
97 | }
98 | &.diamond {
99 | zoom: 1.15;
100 | }
101 | &.leaf {
102 | zoom: 0.9;
103 | }
104 | &.ginkgo {
105 | zoom: 0.8;
106 | }
107 | }
108 | }
109 | }
110 | .text {
111 | margin-right: 40px;
112 | display: inline-block;
113 | font-weight: 500;
114 | font-size: 18px;
115 |
116 | line-height: 35.5px;
117 | // vertical-align: middle;
118 | }
119 | }
120 |
121 | .delete-line {
122 | border-top: 1px solid #ea0b2a;
123 | position: absolute;
124 | top: 50%;
125 | width: 100%;
126 | transition: 0.3s ease-in-out;
127 | // animation-delay: 5s;
128 | transition-delay: 0.3s;
129 | }
130 | }
131 |
132 | .delete {
133 | font-weight: 500;
134 | font-size: 18px;
135 | margin-top: 104.8px;
136 | cursor: pointer;
137 | color: #ea0b2a;
138 | }
139 | .back {
140 | margin-top: 16.12px;
141 | font-weight: 500;
142 | font-size: 18px;
143 | cursor: pointer;
144 | }
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/Render/Delete/DeleteConfirmation.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | Dispatch,
3 | SetStateAction,
4 | forwardRef,
5 | useEffect,
6 | useImperativeHandle,
7 | useState,
8 | } from "react";
9 | import { LineProps, StationProps } from "../../Data/UserData";
10 | import "./DeleteConfirmation.scss";
11 | import { AutoGrowthInput } from "../../Common/AutoGrowthInput";
12 | import shapes from "../../Resource/Shape/shape";
13 | import classNames from "classnames";
14 | import { useTranslation } from "react-i18next";
15 | import i18n from "../../i18n/config";
16 | export interface showConfirmationInterface {
17 | (
18 | {
19 | line,
20 | station,
21 | stationIndex,
22 | }: { line?: LineProps; station?: StationProps; stationIndex?: number },
23 | callback?: any
24 | ): void;
25 | }
26 | enum ShowMode {
27 | none,
28 | beforeAnimate,
29 | animated,
30 | beforeDisappear,
31 | }
32 | export const DeleteConfirmation = forwardRef(function (
33 | {}: any,
34 | ref: React.Ref
97 |
142 | );
143 | });
144 |
--------------------------------------------------------------------------------
/src/Render/ErrorFallback/ErrorFallback.scss:
--------------------------------------------------------------------------------
1 | .error-layer {
2 | text-align: center;
3 | .title {
4 | margin-top: 20vh;
5 | font-size: 36px;
6 | font-weight: 1000;
7 | }
8 | .sub-title {
9 | margin-top: 0.5vh;
10 | font-size: 18px;
11 | font-weight: 500;
12 | }
13 | .error-btn {
14 | span{
15 | margin-left: 55px;
16 | text-align: left;
17 | }
18 | user-select: none;
19 | font-size: 18px;
20 | font-weight: 500;
21 | cursor: pointer;
22 | --gap: min(20px, 2vw);
23 | position: relative;
24 | svg{
25 | position: absolute;
26 | left: calc(var(--gap) + 20px);
27 | }
28 | &.recover-from-cache {
29 | margin-top: 12vh;
30 | background-color: rgb(234, 11, 42, 0.09);
31 | color: #ea0b2a;
32 | svg {
33 | width: 20px;
34 |
35 | }
36 | }
37 | &.export-from-cache {
38 | margin-top: 0.5vh;
39 | background-color: #D9D9D9;
40 | svg {
41 | width: 16px;
42 | padding: 0 2px;
43 |
44 | }
45 | }
46 | padding: 20px 30px;
47 | width: 315px;
48 | margin: auto;
49 | border-radius: 10px;
50 | display: flex;
51 | justify-content: left;
52 | align-items: center;
53 |
54 | }
55 | .export-error{
56 | position: absolute;
57 | bottom: 10vh;
58 | margin: auto;
59 | left: 0;
60 | right: 0;
61 | font-size: 18px;
62 | font-weight: 500;
63 | .export-error-file{
64 | color: #ea0b2a;
65 | cursor: pointer;
66 | }
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/Render/ErrorFallback/ErrorFallback.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./ErrorFallback.scss";
3 | import { ReactComponent as RecoverIcon } from "../../Resource/Icon/clock.arrow.circlepath.svg";
4 | import { ReactComponent as ExportIcon } from "../../Resource/Icon/export.svg";
5 | import { exportFile, exportJson } from "../../Common/util";
6 | import moment from "moment";
7 | import { useTranslation } from "react-i18next";
8 |
9 | export const ErrorFallback = ({
10 | error,
11 | resetErrorBoundary,
12 | }: {
13 | error: Error;
14 | resetErrorBoundary: () => void;
15 | }) => {
16 | const exportFile = (key: string) => {
17 | const current = localStorage.getItem(key);
18 | exportJson(
19 | current!,
20 | `recovery-${key}-${moment().format("YYYY-MM-DD_HH-mm-ss")}.json`
21 | );
22 | };
23 | const { t } = useTranslation();
24 | return (
25 |
98 |
141 | {title}
99 | {remove ? {subTitle}
: <>}
100 |
101 |
128 |
102 |
123 |
127 |
103 | {line && !station ? (
104 |
121 |
105 |
112 | ) : (
113 |
114 | {
115 | //@ts-ignore
116 | shapes[shape]
117 | }
118 |
119 | )}
120 | {stationName || lineName}
122 | {
131 | disappearWithAnimate();
132 | if (typeof callback === "function") callback();
133 | }}
134 | >
135 | {deleteText}
136 |
137 |
138 | {t('delete.cancel')}
139 |
140 |
26 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/src/Render/Header/Component/OpacityControl.scss:
--------------------------------------------------------------------------------
1 | .tool {
2 | position: relative;
3 | display: inline-block;
4 | cursor: pointer;
5 | perspective: 1000px;
6 | perspective-origin: 0 50%;
7 |
8 | &:has(.slider-container) {
9 | z-index: 600;
10 | }
11 |
12 | .slider-container {
13 | transition:
14 | transform 0s,
15 | transform 0.3s ease-in-out,
16 | all 0.3s ease-in-out;
17 | &.show {
18 | opacity: 1;
19 | pointer-events: unset;
20 | top: 100%;
21 | transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, 0deg);
22 | }
23 | opacity: 0;
24 | pointer-events: none;
25 | position: absolute;
26 | top: 50%;
27 | left: 0;
28 | margin-top: 8px;
29 | background: rgba(255, 255, 255, 0.136);
30 | box-shadow: 0 0 100px rgba(#000000, 0.15);
31 | // border: #ea0b2a 1px solid;
32 | z-index: 600;
33 | width: 400%;
34 | max-width: 100vw;
35 | overflow: hidden;
36 | height: 40px;
37 | border-radius: 5px;
38 | backdrop-filter: blur(20px);
39 | transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, var(--deg));
40 | transform-origin: 0 0;
41 | .opacity-text {
42 | position: absolute;
43 | top: 0;
44 | bottom: 0;
45 | margin: auto;
46 | pointer-events: none;
47 | display: flex;
48 | justify-content: center;
49 | align-items: center;
50 | margin-left: 20px;
51 | font-size: 14px;
52 | opacity: var(--value);
53 | span {
54 | margin-left: 2px;
55 | font-size: 10px;
56 | font-weight: 600;
57 | vertical-align: baseline;
58 | margin-top: 2.5px;
59 | }
60 | }
61 | .slider {
62 | appearance: none;
63 | width: 100%;
64 | height: 100%;
65 | appearance: none;
66 | margin: 0;
67 | background-color: transparent;
68 | background-image: repeating-linear-gradient(
69 | to right,
70 | transparent,
71 | transparent calc(18% - 1px),
72 | #05051a1c 18%
73 | );
74 | &::-webkit-slider-thumb {
75 | box-shadow: -20rem 0 0 20rem rgba(#ea0b2a, 0.2);
76 | cursor: col-resize;
77 | background-color: rgba(#ea0b2a, 0.2);
78 | }
79 |
80 | @supports not (-webkit-touch-callout: none) {
81 | &::-webkit-slider-thumb {
82 | -webkit-appearance: none;
83 | appearance: none;
84 | width: 0;
85 | }
86 | }
87 | @supports (-webkit-min-device-pixel-ratio: 0) {
88 | &::-webkit-slider-thumb {
89 | -webkit-appearance: auto;
90 | appearance: auto;
91 | width: auto;
92 | }
93 | }
94 |
95 |
96 | &::-webkit-slider-runnable-track {
97 | // pointer-events: none;
98 | }
99 | }
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/Render/Header/Component/OpacityControl.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | useState,
3 | useRef,
4 | useEffect,
5 | CSSProperties,
6 | useLayoutEffect,
7 | } from "react";
8 | import "./OpacityControl.scss";
9 | import classNames from "classnames";
10 | import { browserInfo } from "../../../Common/util";
11 | import { useTranslation } from "react-i18next";
12 | interface OpacityControlProps {
13 | opacity: number;
14 | setOpacity: (value: number) => void;
15 | }
16 |
17 |
18 | const OpacityControl: React.FC{t('error.metError')}
27 | {t('error.dontWorry')}
28 |
29 |
32 | exportFile("last")}
35 | >
36 |
39 |
40 |
51 |
41 | {t('error.orYouCould')}
42 | exportFile("current")}
45 | >
46 | {t('error.exportError')}
47 |
48 |
49 | {t('error.sendAuthor')}
50 |
81 | {t('opacity')}
82 | {
83 |
117 | );
118 | };
119 |
120 | export default OpacityControl;
121 |
--------------------------------------------------------------------------------
/src/Render/Header/Component/ShapeSelector.scss:
--------------------------------------------------------------------------------
1 | .tool {
2 | position: relative;
3 | display: inline-block;
4 | cursor: pointer;
5 | perspective: 1000px;
6 | perspective-origin: 0 50%;
7 |
8 | &:has(.shape-selector-container) {
9 | z-index: 600;
10 | }
11 |
12 | .shape-selector-container {
13 | .color-detail {
14 | .color-detail-choosing {
15 | box-sizing: border-box;
16 | padding: 10px 10px;
17 | width: 222.75px;
18 | display: grid;
19 | border: white 1px solid;
20 | grid-template-columns: repeat(4, 25%);
21 | grid-template-rows: repeat(3, 33.33%);
22 | // grid-row-gap: 9px;
23 | // grid-column-gap: 6px;
24 | .shape-container {
25 | height: 46.13px;
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | border-left: 1px black dotted;
30 | border-bottom: 1px black solid;
31 | transform: translate(-1px, 1px);
32 | cursor: pointer;
33 |
34 | &.left {
35 | border-left: none;
36 | }
37 | &.bottom {
38 | border-bottom: none;
39 | }
40 | .shape-preview {
41 | width: 19.5px;
42 | height: 19.5px;
43 | // border-radius: 50%;
44 | // border: 2px solid;
45 | display: flex;
46 | justify-content: center;
47 | align-items: center;
48 | &.shape-selected {
49 | svg {
50 | * {
51 | stroke: #ea0b2a;
52 | }
53 | }
54 | }
55 | &.square {
56 | zoom: 0.9;
57 | }
58 | &.triangle {
59 | zoom: 1.05;
60 | }
61 | &.start {
62 | zoom: 1.15;
63 | }
64 | &.hexagon {
65 | zoom: 0.9;
66 | }
67 | &.pentagon {
68 | zoom: 1.1;
69 | }
70 | &.diamond{
71 | zoom: 1.15;
72 | }
73 | &.leaf{
74 | zoom: 0.9;
75 | }
76 | }
77 | }
78 | }
79 | }
80 | transition:
81 | transform 0s,
82 | transform 0.3s ease-in-out,
83 | all 0.3s ease-in-out;
84 | &.show {
85 | opacity: 1;
86 | pointer-events: unset;
87 | top: 100%;
88 | transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, 0deg);
89 | }
90 | opacity: 0;
91 | pointer-events: none;
92 | position: absolute;
93 | top: 50%;
94 | left: 0;
95 | margin-top: 8px;
96 | background: rgba(255, 255, 255, 0.136);
97 | box-shadow: 0 0 100px rgba(#000000, 0.15);
98 | // border: #ea0b2a 1px solid;
99 | z-index: 600;
100 | width: 222.75px;
101 | max-width: 100vw;
102 | overflow: hidden;
103 | height: 162px;
104 | border-radius: 5px;
105 | backdrop-filter: blur(20px);
106 | transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, var(--deg));
107 | transform-origin: 0 0;
108 | .opacity-text {
109 | position: absolute;
110 | top: 0;
111 | bottom: 0;
112 | margin: auto;
113 | pointer-events: none;
114 | display: flex;
115 | justify-content: center;
116 | align-items: center;
117 | margin-left: 20px;
118 | font-size: 14px;
119 | opacity: var(--value);
120 | span {
121 | margin-left: 2px;
122 | font-size: 10px;
123 | font-weight: 600;
124 | vertical-align: baseline;
125 | margin-top: 2.5px;
126 | }
127 | }
128 | .slider {
129 | appearance: none;
130 | width: 100%;
131 | height: 100%;
132 | appearance: none;
133 | margin: 0;
134 | background-color: transparent;
135 | background-image: repeating-linear-gradient(
136 | to right,
137 | transparent,
138 | transparent calc(18% - 1px),
139 | #05051a1c 18%
140 | );
141 | &::-webkit-slider-thumb {
142 | box-shadow: -20rem 0 0 20rem rgba(#ea0b2a, 0.2);
143 | cursor: col-resize;
144 | background-color: rgba(#ea0b2a, 0.2);
145 | }
146 |
147 | @supports not (-webkit-touch-callout: none) {
148 | &::-webkit-slider-thumb {
149 | -webkit-appearance: none;
150 | appearance: none;
151 | width: 0;
152 | }
153 | }
154 | @supports (-webkit-min-device-pixel-ratio: 0) {
155 | &::-webkit-slider-thumb {
156 | -webkit-appearance: auto;
157 | appearance: auto;
158 | width: auto;
159 | }
160 | }
161 |
162 |
163 | &::-webkit-slider-runnable-track {
164 | // pointer-events: none;
165 | }
166 | }
167 | }
168 | }
169 |
--------------------------------------------------------------------------------
/src/Render/Header/Component/ShapeSelector.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | useState,
3 | useRef,
4 | useEffect,
5 | CSSProperties,
6 | useLayoutEffect,
7 | SetStateAction,
8 | Dispatch,
9 | } from "react";
10 | import "./ShapeSelector.scss";
11 | import classNames from "classnames";
12 | import { browserInfo } from "../../../Common/util";
13 | import shapes from "../../../Resource/Shape/shape";
14 | import { Shape } from "../../../Data/Shape";
15 | import { useTranslation } from "react-i18next";
16 | interface OpacityControlProps {
17 | defaultShape: string;
18 | setDefaultShape: Dispatch e.stopPropagation()}
87 | style={{ "--value": opacity } as CSSProperties}
88 | onTransitionEnd={() => {
89 | if (showSlider && sliderRef.current) {
90 | sliderRef.current.style.transition = "none";
91 | }
92 | }}
93 | >
94 |
98 | {Math.floor(opacity * 100)}
99 | %
100 |
101 | e.stopPropagation()}
111 | style={{ "--value": opacity , "--safari": safari} as CSSProperties}
112 | onBlur={() => setShowSlider(false)}
113 | />
114 |
115 | }
116 |
82 | {
83 | t(`shape.${defaultShape}`)
84 | }
85 | {
86 |
134 | );
135 | };
136 |
137 | export default ShapeSelector;
138 |
--------------------------------------------------------------------------------
/src/Render/Header/Menu.scss:
--------------------------------------------------------------------------------
1 | .menu {
2 | &.page-menu {
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | height: 100vh;
7 | width: 100vw;
8 | z-index: 500;
9 | background-color: rgba(255, 255, 255, 0.2);
10 | backdrop-filter: blur(10px);
11 | .title {
12 | .tools {
13 | margin-left: -50px;
14 | .tool {
15 | margin-left: -5px;
16 | opacity: 0;
17 | }
18 | }
19 | }
20 | .dots {
21 | width: calc(100vw - 51.6px - 51.6px);
22 | transition:
23 | 0.3s ease-in-out opacity,
24 | 0.3s ease-in-out width;
25 | opacity: 1;
26 | }
27 | .menus {
28 | transition: 0.3s ease-in-out opacity;
29 | opacity: 1;
30 | .columns {
31 | .column {
32 | @media (max-width: 710px) {
33 | margin-top: 28.5px;
34 | opacity: 1;
35 | }
36 | }
37 | }
38 | }
39 | }
40 |
41 | &.page-title {
42 | // position: fixed;
43 | // top: 0;
44 | // left: 0;
45 | // height: 100vh;
46 | // width: 100vw;
47 | .title {
48 | .click-panel {
49 | cursor: pointer;
50 | }
51 | .tools {
52 | margin-left: -50px;
53 | .tool {
54 | margin-left: -5px;
55 | opacity: 0;
56 | }
57 | }
58 | }
59 | user-select: none;
60 | z-index: -500;
61 | .dots {
62 | margin-top: 100.66px;
63 | position: fixed;
64 | opacity: 1;
65 | width: 0;
66 | transition:
67 | 0.3s ease-in-out opacity,
68 | 0.3s ease-in-out width;
69 | }
70 |
71 | .menus {
72 | margin-top: 101.66px;
73 | position: fixed;
74 | opacity: 0;
75 | transition: 0.3s ease-in-out opacity;
76 |
77 | .columns {
78 | justify-content: space-between;
79 | transition: 0.3s ease-in-out width;
80 | width: calc(70vw - 51.6px - 51.6px);
81 | }
82 | }
83 | }
84 |
85 | &.page-tools {
86 | .title {
87 | }
88 | .dots {
89 | margin-top: 100.66px;
90 | position: fixed;
91 | opacity: 1;
92 | width: 0;
93 | transition:
94 | 0.3s ease-in-out opacity,
95 | 0.3s ease-in-out width;
96 | }
97 | .menus {
98 | margin-top: 101.66px;
99 | position: fixed;
100 | opacity: 0;
101 | transition: 0.3s ease-in-out opacity;
102 |
103 | .columns {
104 | justify-content: space-between;
105 | transition: 0.3s ease-in-out width;
106 | width: calc(70vw - 51.6px - 51.6px);
107 | }
108 | }
109 | }
110 | .title {
111 | position: fixed;
112 | margin: 35.5px 0 0 51.6px;
113 | z-index: 500;
114 | .auto-growth-container {
115 | display: inline-block;
116 | * {
117 | font-size: 36px;
118 | font-weight: 1000;
119 | }
120 | input {
121 | // background-color: rgba(255, 255, 255, 0.901);
122 | // backdrop-filter: blur(10px);
123 | // padding-left: 18px;
124 | // margin-left: -18px;
125 | }
126 | }
127 | .tools {
128 | @media (max-width: 710px) {
129 | // display: block !important;
130 | margin-left: -21.77px;
131 | .tool {
132 | margin-top: 5px;
133 |
134 | &:first-child {
135 | // display: none;
136 | }
137 | }
138 | }
139 | display: inline-block;
140 | transition: 0.3s ease-in-out;
141 | .tool {
142 | transition: 0.3s ease-in-out;
143 | opacity: 1;
144 | display: inline-block;
145 | font-size: 18px;
146 | font-weight: 500;
147 | color: #ea0b2a;
148 | &.tool-title{
149 | color: #00A0E8;
150 | cursor:auto;
151 | }
152 | margin-left: 21.77px;
153 | cursor: pointer;
154 | &.disabled {
155 | color: #ea0b2a55;
156 | cursor:auto;
157 | }
158 | svg{
159 | vertical-align: text-bottom;
160 | line-height: 26px;
161 | height: 26px;
162 | [fill="black"]{
163 | fill: rgba(234, 11, 42, 0.3333333333) !important;
164 | fill-opacity: 1 !important;
165 | }
166 | }
167 |
168 |
169 | }
170 | }
171 | }
172 |
173 | .dots {
174 | // margin-top: 20.16px;
175 | border-bottom: dotted black 1px;
176 | margin: 100.66px 51.6px 0 51.6px;
177 | }
178 | .menus {
179 | height: calc(100vh - 101px);
180 | overflow-y: overlay;
181 | overflow-x: hidden;
182 | &::-webkit-scrollbar {
183 | display: none;
184 | }
185 | .columns {
186 | margin: 0 51.6px 0 51.6px;
187 | display: flex;
188 | @media (max-width: 710px) {
189 | display: grid;
190 | }
191 | justify-content: space-between;
192 | transition: 0.3s ease-in-out width;
193 | width: calc(100vw - 51.6px - 51.6px);
194 | .column {
195 | margin-top: 25.8px;
196 | display: inline-block;
197 | vertical-align: top;
198 | width: 20vw;
199 | transition: 0.3s ease-in-out;
200 | @media (max-width: 710px) {
201 | width: auto;
202 | margin-top: -15px;
203 | opacity: 0;
204 | &:last-child{
205 | padding-bottom: 150px;
206 | }
207 | }
208 | .column-title {
209 | font-size: 36px;
210 | font-weight: 300;
211 | }
212 | .column-items {
213 | // margin-top: 17px;
214 |
215 | .column-item {
216 | width: fit-content;
217 | margin-top: 17px;
218 | font-size: 18px;
219 | font-weight: 500;
220 | color: #ea0b2a;
221 | cursor: pointer;
222 | &.sub-menu{
223 | margin-top: 10px;
224 | margin-left: 10px;
225 | .sub-item{
226 | margin-right: 10px;
227 | }
228 | }
229 | &.small{
230 | font-size: small;
231 | }
232 | &.author{
233 | margin-top: 4px;
234 | &:hover{
235 | // text-decoration: underline;
236 | }
237 | }
238 | &.friend{
239 | position: relative;
240 | svg{
241 | margin-left: 5px;
242 | position: absolute;
243 | margin-top: 3px;
244 | width: 17px;
245 | // height: 25px;
246 | // vertical-align: bottom;
247 | }
248 | }
249 | }
250 | }
251 | }
252 | }
253 | .notice{
254 | position: fixed;
255 | left: 0;
256 | bottom: 0;
257 | }
258 | }
259 | }
260 |
--------------------------------------------------------------------------------
/src/Render/Layer/DevelopLayer.scss:
--------------------------------------------------------------------------------
1 | .DevelopLayer {
2 | .grid {
3 | display: grid;
4 | grid-template-columns: repeat(100, 100px);
5 | grid-template-rows: repeat(50, 100px);
6 | .grid-item {
7 | border: 1px solid black;
8 | height: 100px;
9 | width: 100px;
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/Render/Layer/DevelopLayer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./DevelopLayer.scss";
3 | import { Point } from "../../DataStructure/Point";
4 | import { Station } from "../../DataStructure/Station";
5 | import { Line } from "../../DataStructure/Line";
6 | import LineRender from "../Component/LineRender";
7 | import { CardShowing } from "../../Data/UserData";
8 |
9 | function DevelopLayer() {
10 | // test line and station
11 |
12 | const pointA = new Point(200, 200);
13 | const pointB = new Point(300, 300);
14 | const pointC = new Point(600, 300);
15 | const pointD = new Point(800, 300);
16 | const pointE = new Point(200, 400);
17 | const pointF = new Point(800, 200);
18 | const pointG = new Point(500, 500);
19 |
20 | const A = new Station(pointA);
21 | const B = new Station(pointB);
22 | B._dev_tag = "B";
23 | const C = new Station(pointC);
24 | const D = new Station(pointD);
25 | const E = new Station(pointE);
26 | const F = new Station(pointF);
27 | const G = new Station(pointG);
28 |
29 | const line1 = new Line();
30 | const line3 = new Line();
31 | const line8 = new Line();
32 | const line9 = new Line();
33 |
34 | line1.linkAll([A, B, C, D]);
35 | // line3.linkAll([E, B, C, D, F, E]);
36 | line8._dev_tag='line8';
37 | line8.linkAll([E, B, C, D]);
38 | line9.linkAll([A, E, G,D,F]);
39 |
40 | // console.log(line1, line3, line8);
41 | console.log(A, B, C, D, E, F);
42 |
43 |
44 | const allStationsList = [A, B, C, D, E, F, G];
45 | const allLinesList = [line1, line3, line8, line9];
46 |
47 | const renderStations = (allStationsList: Station[]) => {
48 | return (
49 | e.stopPropagation()}
90 | style={{} as CSSProperties}
91 | onTransitionEnd={() => {
92 | if (showSlider && sliderRef.current) {
93 | sliderRef.current.style.transition = "none";
94 | }
95 | }}
96 | >
97 |
132 | }
133 |
98 |
131 |
99 | {grid.map((shape, index) => {
100 | const left = index % column === 0;
101 | const bottom = Math.floor(index / column) === row - 1;
102 | // console.log({ shape });
103 | return (
104 |
130 | {
111 | if (shape) setDefaultShape(shape);
112 | }}
113 | >
114 |
127 | );
128 | })}
129 |
121 | {
122 | //@ts-ignore
123 | shapes[shape]
124 | }
125 |
126 |
50 | {allStationsList.map((station, index) => (
51 |
62 | );
63 | };
64 |
65 | // const renderLines = (allLinesList: Line[], cardShowing: CardShowing, setCardShowing: Dispatch
58 | {String.fromCharCode("A".charCodeAt(0) + index)}
59 |
60 | ))}
61 |
68 | // {allLinesList.map((line) => {
69 | // return ;
71 | // })}
72 | //
73 | // );
74 | // };
75 |
76 |
77 | return (
78 |
79 | {/*
88 | );
89 | }
90 |
91 | export default DevelopLayer;
92 |
--------------------------------------------------------------------------------
/src/Render/Layer/RenderLayer.scss:
--------------------------------------------------------------------------------
1 | .station-render {
2 | cursor: pointer;
3 | .station-shape {
4 | height: 30px;
5 | width: 30px;
6 | // transform: translate(-50%,-50%);
7 | display: inline-flex;
8 | // align-content: center;
9 | justify-content: center;
10 | align-items: center;
11 | svg {
12 | fill: white;
13 | // &.square {
14 | // zoom: 0.9;
15 | // }
16 | // &.triangle {
17 | // zoom: 1.05;
18 | // }
19 | // &.start {
20 | // zoom: 1.15;
21 | // }
22 | // &.hexagon {
23 | // zoom: 0.9;
24 | // }
25 | // &.pentagon {
26 | // zoom: 1.1;
27 | // }
28 |
29 | &.shadow{
30 | position: absolute;
31 | transform: scale(1.5);
32 | transform-origin: center;
33 | *{
34 | fill: inherit;
35 | stroke: inherit;
36 | }
37 | }
38 | }
39 | }
40 | .station-name {
41 | display: inline-block;
42 | font-size: 18px;
43 | font-weight: 500;
44 | // font-size: 30px;
45 | // font-weight: 1000;
46 | vertical-align: top;
47 | // margin-left: 5px;
48 | white-space: nowrap;
49 |
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/Render/Layer/ScaleLayer.scss:
--------------------------------------------------------------------------------
1 | .ScaleLayer{
2 | width: 100vw;
3 | height: 100vh;
4 | overflow: hidden;
5 | .layer-for-welcome-tour{
6 | position: fixed;
7 | z-index: -500;
8 | width: 70vw;
9 | height: 70vh;
10 | left: 15vw;
11 | top: 15vw;
12 | }
13 | .transform-layer{
14 | transform-origin: left top;
15 | // never use will-change here, it makes child elements blurry
16 | // will-change: transform;
17 | }
18 |
19 | .background-layer{
20 | position: absolute;
21 | pointer-events: none;
22 | transform-origin: left top;
23 | appearance: none;
24 | border: none;
25 | box-shadow: none;
26 | border-image-width: 0;
27 |
28 | &:not([src]) {
29 | opacity: 0 !important;
30 | }
31 | }
32 | }
--------------------------------------------------------------------------------
/src/Render/Recovery/Recovery.scss:
--------------------------------------------------------------------------------
1 | .App{
2 | perspective: 1000px;
3 | perspective-origin: 100vw 105px;
4 | z-index: 10000;
5 | }
6 | .recovery-notification-container {
7 |
8 | position: fixed;
9 | right: 0;
10 | top: 0;
11 | transform-origin: right center;
12 | transition: ease-in-out 0.5s;
13 |
14 | &.show {
15 | transform: rotate3d(0, 1, 0, 0deg);
16 | opacity: 1;
17 | }
18 | &:not(.show) {
19 | transform: rotate3d(0, 1, 0, -90deg);
20 | opacity: 0;
21 | }
22 | .recovery-notification {
23 | @media screen and (max-width: 520px) {
24 | display: none;
25 | }
26 | position: fixed;
27 | top: 30px;
28 | right: 30px;
29 | width: 363px;
30 | height: 75px;
31 | display: flex;
32 | // justify-content: space-between;
33 | align-items: center;
34 | background-color: rgb(255, 255, 255, 0.72);
35 | box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.25);
36 | backdrop-filter: blur(15px);
37 | border-radius: 15px;
38 | transition: ease-in-out 0.3s;
39 |
40 | // zoom: 1.2;
41 | &:hover {
42 | background-color: rgba(255, 255, 255, 0.001);
43 | }
44 | .icon {
45 | margin: 0 20px;
46 | }
47 |
48 | .icon,
49 | .ok,
50 | .no {
51 | width: 36px;
52 | height: 36px;
53 |
54 | border-radius: 50%;
55 | display: flex;
56 | justify-content: center;
57 | align-items: center;
58 | }
59 |
60 | .ok,
61 | .no {
62 | cursor: pointer;
63 | position: absolute;
64 | }
65 |
66 | .icon,
67 | .ok {
68 | background-color: rgb(235, 10, 40, 0.1);
69 | }
70 |
71 | .no {
72 | background-color: #d9d9d9;
73 | right: 20px;
74 | }
75 |
76 | .icon {
77 | svg {
78 | width: 20px;
79 | height: 20px;
80 | }
81 | }
82 |
83 | .ok {
84 | right: 60px;
85 | transition: ease-in-out 0.3s;
86 | &:hover {
87 | background-color: rgb(235, 10, 40, 0.2);
88 | }
89 | svg {
90 | width: 16px;
91 | }
92 | }
93 |
94 | .no {
95 | transition: ease-in-out 0.3s;
96 | &:hover {
97 | background-color: #c9c9c9;
98 | }
99 | svg {
100 | width: 12px;
101 | }
102 | }
103 |
104 | .text {
105 | .title {
106 | font-size: 16px;
107 | }
108 | .sub-title {
109 | font-size: 12px;
110 | }
111 | font-weight: 500;
112 | }
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/src/Render/Recovery/Recovery.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | Dispatch,
3 | SetStateAction,
4 | useEffect,
5 | useRef,
6 | useState,
7 | } from "react";
8 | import { ReactComponent as RecoverIcon } from "../../Resource/Icon/clock.arrow.circlepath.svg";
9 | import { ReactComponent as OkIcon } from "../../Resource/Icon/ok.svg";
10 | import { ReactComponent as NoIcon } from "../../Resource/Icon/no.svg";
11 |
12 | import "./Recovery.scss";
13 | import { setDataFromJson, UserDataType } from "../../Data/UserData";
14 | import { mediateMap, readFileFromIndexedDB } from "../../Common/util";
15 | import classNames from "classnames";
16 | import { useTranslation } from "react-i18next";
17 | export function Recovery({
18 | data,
19 | setData,
20 | recoveredFromError,
21 | setRecoveredFromError,
22 | transfromTools,
23 | }: {
24 | data: UserDataType;
25 | setData: Dispatch
80 | {new Array(100 * 50).fill(1).map((x, index) => (
81 |
*/}
84 | {renderStations(allStationsList)}
85 | {/* {renderLines(allLinesList)} */}
86 |
87 | {index}
82 | ))}
83 |
69 |
116 | );
117 | }
118 |
--------------------------------------------------------------------------------
/src/Resource/Icon/airwave.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const AirWaveIcon =({className}:{className?: string})=> (
4 |
7 | );
8 |
9 | export default AirWaveIcon;
--------------------------------------------------------------------------------
/src/Resource/Icon/arrow.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const arrowIcon = ({ className }: { className?: string }) => (
4 |
28 | );
29 |
30 | export default arrowIcon;
31 |
--------------------------------------------------------------------------------
/src/Resource/Icon/auto.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const AutoIcon = ({ className }: { className?: string }) => ();
11 |
12 | export default AutoIcon;
13 |
--------------------------------------------------------------------------------
/src/Resource/Icon/bolt.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const BoltIcon = ({ className }: { className?: string }) => ();
11 |
12 | export default BoltIcon;
13 |
14 |
--------------------------------------------------------------------------------
/src/Resource/Icon/clock.arrow.circlepath.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/Resource/Icon/edit.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const edit =({className}:{className: string})=> (
4 |
18 | );
19 |
20 | export default edit;
--------------------------------------------------------------------------------
/src/Resource/Icon/expand.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const expand =({className}:{className?: string})=> (
4 |
14 | );
15 |
16 | export default expand;
--------------------------------------------------------------------------------
/src/Resource/Icon/export.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/Resource/Icon/export.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const ExportIcon = ({ className }: { className?: string }) => ();
11 |
12 | export default ExportIcon;
13 |
14 |
--------------------------------------------------------------------------------
/src/Resource/Icon/finished.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const FinishedIcon =({className}:{className?: string})=> (
4 |
12 |
13 | );
14 |
15 | export default FinishedIcon;
--------------------------------------------------------------------------------
/src/Resource/Icon/globe.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/Resource/Icon/goto.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const GoToIcon = ({ className }: { className?: string }) => (
4 |
38 | );
39 |
40 | export default GoToIcon;
41 |
--------------------------------------------------------------------------------
/src/Resource/Icon/infinity.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Infinity = ({ className }: { className?: string }) => (
4 |
30 | );
31 |
32 | export default Infinity;
33 |
--------------------------------------------------------------------------------
/src/Resource/Icon/no.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/Resource/Icon/ok.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/Resource/Icon/pageview.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const PageViewIcon =({className}:{className?: string})=> (
11 | );
12 |
13 | export default PageViewIcon;
--------------------------------------------------------------------------------
/src/Resource/Icon/plus.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const plusIcon = ({ className }: { className?: string }) => (
4 |
28 | );
29 |
30 | export default plusIcon;
31 |
--------------------------------------------------------------------------------
/src/Resource/Icon/share.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/Resource/Icon/share2.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/Resource/Icon/shrink.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const shrink =({className}:{className: string})=> (
4 |
14 | );
15 |
16 | export default shrink;
--------------------------------------------------------------------------------
/src/Resource/Icon/touch.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const TouchIcon = ({ className }: { className?: string }) => ();
11 |
12 | export default TouchIcon;
13 |
--------------------------------------------------------------------------------
/src/Style/Cursor.ts:
--------------------------------------------------------------------------------
1 | import { Mode } from "../DataStructure/Mode";
2 |
3 | export const getCursor = (mode: Mode)=>{
4 | let cursor;
5 | //chrome has bug here, the cursor won't change sometimes while DOM already updated.
6 | switch(mode){
7 | case Mode.moving:{
8 | cursor = 'grabbing';
9 | break;
10 | }
11 | default:{
12 | cursor = 'default';
13 | break;
14 | }
15 | }
16 | return cursor;
17 | }
--------------------------------------------------------------------------------
/src/WelcomeTour/Driver.ts:
--------------------------------------------------------------------------------
1 | import { driver as Driver, Config } from "driver.js";
2 | import {t} from 'i18next';
3 | export const showTour = async (id: string, callback: Function) => {
4 | const driver = Driver();
5 | const { getSteps } = await import(/* webpackMode: "eager" */ `./Steps/${id}`);
6 | const eventListeners: EventListenerOrEventListenerObject[] = [];
7 | const touch = window.ontouchend === null;
8 | const eventName =// touch ? "touchend" :
9 | "click";
10 | const config: Config = {
11 | prevBtnText: t('shang-yi-bu'),
12 | doneBtnText: t('wan-cheng'),
13 | nextBtnText: t('xia-yi-bu'),
14 | progressText: "{{current}} / {{total}}",
15 | showProgress: true,
16 | allowClose: false,
17 | showButtons: ["close"],
18 | // onPrevClick:(ele)=>{
19 | // if(ele){
20 | // const element = ele as HTMLElement;
21 | // eventListeners.forEach(listener=>{
22 | // element.removeEventListener('click',listener);
23 | // })
24 | // driver.movePrevious();
25 | // }
26 | // },
27 | onHighlighted: (ele, step, opt) => {
28 | const steps = opt.config.steps!;
29 | const last = step === steps[steps.length - 1];
30 | const next = steps[opt.state.activeIndex! + 1];
31 |
32 | if (ele) {
33 | const element = ele as HTMLElement;
34 | const moveToNext = () => {
35 | const gotoNext = () => {
36 | // element.removeEventListener(eventName, moveToNext);
37 | element.removeEventListener("click", moveToNext);
38 | element.removeEventListener("touchend", moveToNext);
39 | if(driver.getActiveStep()===step)
40 | driver.moveNext();
41 | };
42 | setTimeout(() => {
43 | if (!next || document.querySelector(next.element as string)) {
44 | gotoNext();
45 | }else{
46 | setTimeout(()=>{
47 | if (!next || document.querySelector(next.element as string))
48 | gotoNext()
49 | },300)
50 | }
51 | }, 100);
52 | };
53 | eventListeners.push(moveToNext);
54 | element.addEventListener("click", moveToNext);
55 | element.addEventListener("touchend", moveToNext);
56 | }
57 | },
58 | onNextClick: (ele) => {
59 | if (ele) {
60 | const element = ele as HTMLElement;
61 | element.dispatchEvent(
62 | new Event("click", { bubbles: true, cancelable: true })
63 | );
64 | }
65 | },
66 | steps: getSteps(driver),
67 | onDestroyed: (ele,step) => {
68 | if (ele) {
69 | const element = ele as HTMLElement;
70 | if(step.element!==".tour-btn")
71 | element.dispatchEvent(
72 | new Event("click", { bubbles: true, cancelable: true })
73 | );
74 | }
75 | callback();
76 | },
77 | };
78 | driver.setConfig(config);
79 |
80 | driver.drive();
81 | };
82 |
--------------------------------------------------------------------------------
/src/WelcomeTour/HightLights.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Infinity from "../Resource/Icon/infinity";
3 | import AirWaveIcon from "../Resource/Icon/airwave";
4 | import PageViewIcon from "../Resource/Icon/pageview";
5 | import BoltIcon from "../Resource/Icon/bolt";
6 | import TouchIcon from "../Resource/Icon/touch";
7 | import AutoIcon from "../Resource/Icon/auto";
8 | import ExportIcon from "../Resource/Icon/export";
9 | import {t} from 'i18next';
10 | export const hightLights = [
11 | {
12 | id:'common-operation',
13 | icon:
75 |
115 |
76 |
78 |
79 |
82 | {t('recover.text')}
80 | {t('recover.subTitle')}
81 | {
85 | const current = localStorage.getItem("current");
86 | if (current) {
87 | const data = setDataFromJson(setData, current);
88 | readFileFromIndexedDB("image")
89 | .then((file) => {
90 | setData((data) => ({
91 | ...data,
92 | // backgroundColor: "image",
93 | backgroundImage: file as File,
94 | }));
95 | })
96 | .catch((e) => {
97 | console.error(e);
98 | });
99 | mediateMap(data, transfromTools);
100 | }
101 | setShowNotification(false);
102 | }}
103 | >
104 |
106 | {
109 | setShowNotification(false);
110 | }}
111 | >
112 |
114 |
72 |
215 | );
216 | }
217 |
--------------------------------------------------------------------------------
/src/i18n/config.ts:
--------------------------------------------------------------------------------
1 |
2 | import i18n from 'i18next';
3 | import { initReactI18next } from 'react-i18next';
4 | import translation_en from './locales/en.json';
5 | import translation_zh from './locales/zh.json';
6 | import LanguageDetector from 'i18next-browser-languagedetector';
7 | const resources = {
8 | en: { translation: translation_en },
9 | zh: { translation: translation_zh },
10 | };
11 |
12 | i18n
13 | .use(LanguageDetector)
14 | .use(initReactI18next)
15 | .init({
16 | resources,
17 | fallbackLng: 'en',
18 | detection: {
19 | order: ['queryString', 'cookie', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
20 | caches: ['localStorage', 'cookie']
21 | },
22 | interpolation: { escapeValue: false },
23 | });
24 |
25 | export default i18n;
26 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 |
4 | import App from './Entrance/App';
5 | import reportWebVitals from './Entrance/reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
73 |
214 |
74 |
75 | 
76 |
77 |
78 |
133 |
134 |
76 |
77 |
78 | {t('welcome.welcome')}
79 | {t('welecome.minimetroweb')}
80 |
81 |
82 | {next ? (
83 | <>
84 | {
87 | setShow(false);
88 | // if (!localStorage.getItem("skip-tour-viewed"))
89 | // showTour("skip", () => {
90 | localStorage.setItem("skip-tour-viewed", "Y");
91 | // });
92 | }}
93 | >
94 | {t('welcome.skip')}
95 |
96 | {
99 | if (next.id === "mobile") {
100 | showQRCode();
101 | } else {
102 | setShow(false);
103 | showTour(next.id, () => {
104 | setShow(true);
105 | setVisited(next.id);
106 | scrollToNext();
107 | });
108 | }
109 | }}
110 | >
111 | {visitedSteps.length ? t('welcome.goOn') : ""}
112 | {next.more}
113 |
114 |
115 | ) : (
116 | <>
117 |
118 | {t('welcome.restart')}
119 |
120 | {
123 | localStorage.setItem("skip-tour-viewed", "Y");
124 | setShow(false);
125 | }}
126 | >
127 | {t('welcome.done')}
128 |
129 |
130 | )}
131 |
132 |
135 | {hightLights.map((hightLight) => {
136 | const { id, icon, title, subTitle, introText, more } = hightLight;
137 | const finished = visitedSteps.includes(id);
138 | return (
139 |
213 |
140 |
210 | );
211 | })}
212 |
141 | {icon}
142 | {title}
143 |
144 |
145 |
209 | {subTitle}
146 |
147 |
195 | {id === "mobile" ? (
196 |
148 | {introText.map((line) => {
149 | const emphasisStart = line[0];
150 | const lineText = line.slice(1);
151 | return (
152 |
166 |
153 | {lineText.map((text, index) => {
154 | const emphasis =
155 | (Number(emphasisStart) + index) % 2;
156 | return (
157 |
158 | {text}
159 |
160 | );
161 | })}
162 |
163 | );
164 | })}
165 | {
169 | if (id === "mobile") {
170 | showQRCode();
171 | } else {
172 | showTour(id, () => {
173 | setVisited(id);
174 | setShow(true);
175 | scrollToNext();
176 | });
177 | setShow(false);
178 | }
179 | }}
180 | >
181 |
184 | {more}
185 |
186 |
187 | {finished ? (
188 |
194 | setQRCode(false)}
202 | >
203 |
204 |
205 | ) : (
206 | <>
207 | )}
208 |