![](\"https://mini-metro-web.gitlab.io/app-icon.png\"){kind=icon}
\n\n# Mini Metro Web \n迷你地铁地图构建工具: `创建迷你地铁风格的地铁线路图`。\n\n支持**无限**站点与线路，支持**多次穿过**同一站点，设置**背景图**，设置**支线**，支持**导出图片**。\n \n[https://mini-metro-web.gitlab.io/](https://mini-metro-web.gitlab.io/)\n\n[English Version](https://github.com/RyanEdo/mini-metro-web/blob/master/README.md)\n\n\n## 更新日志\n#### 1.2.1 `修复添加站点时，连续双击站点导致的站点重复添加报错` \n#### 1.2.0 `支持英文` \n#### 1.1.1 `增加更多站点形状，新增站点时支持修改默认形状` \n#### 1.1.0 `支持修改背景颜色与背景图` \n#### 1.0.2 `加入刷新后快速恢复通知` \n#### 1.0.1 `加入报错指引` \n\n\n## 基本用法\n\n### 菜单\n点击左上角标题进入菜单，点击任意空白处退出菜单\n\n### 创建站点\n 1. 菜单 => 站点 => 添加站点\n 2. 点击空白处添加\n\n### 创建线路\n1. 点击任意站点\n2. 选择 操作 => 以此为起点新建线路\n3. 按照提示依次点击站点添加到线路\n\n### 删除站点/线路\n1. 点击站点/线路\n2. 选择 操作 => 删除\n\n### 设置背景图\n1. 点击线路 => 设定背景\n2. 选择 `纯白` / `浅黄` / `取色器` 设定背景颜色\n3. 选择 `导入背景图` 导入图片\n4. 导入图片后，进入修改图片页面，可以拖动修改图片位置，也可以修改图片透明度\n\n### 导出图片/文件\n菜单 => 作为图片/文件导出\n\n## 进阶用法\n请参考应用内教程或[视频教程](https://space.bilibili.com/8217854)\n\n## 构建\n\n和大部分react项目一样，先运行`npm i`,然后:\n\n### `npm start`\n\n本地运行\n打开 [http://localhost:3000](http://localhost:3000) 浏览器中查看.\n\n### `npm run build`\n\n打包成静态文件\n\n### 注意\n##### 建议安装 `i18n-ally`[VS Code 插件地址](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) 。项目有部分字符串由该插件生成，安装后能自动在字符串位置显示原文。"
},
{
"path": "README.md",
"content": "\n\n
\n \n );\n}\n\nexport default App;\n"
},
{
"path": "src/Entrance/reportWebVitals.js",
"content": "const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n"
},
{
"path": "src/Entrance/setupTests.js",
"content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom';\n"
},
{
"path": "src/Grid/Scale.ts",
"content": "import { CardShowing, ChangeSteps, RecordType, StationProps, UserDataType, addNewStation } from \"./../Data/UserData\";\nimport {\n WheelEvent,\n Dispatch,\n SetStateAction,\n MouseEvent,\n TouchEvent,\n} from \"react\";\nimport { FunctionMode, Mode } from \"../DataStructure/Mode\";\nimport { Point } from \"../DataStructure/Point\";\nimport React from \"react\";\n\nconst sensitivity = -0.0006;\n\nconst scaleByPointer = (\n scaleRatio: number,\n translateX: number,\n translateY: number,\n refPoint: Point\n) =>\n new Point(\n refPoint.x - scaleRatio * (refPoint.x - translateX),\n refPoint.y - scaleRatio * (refPoint.y - translateY)\n );\n\nexport const onWheel = (\n event: WheelEvent\n
\n );\n });\n const stationComp = stationIds?.map((stationId) => {\n const station = stations.get(stationId);\n if (station)\n return (\n \n
\n );\n });\n const [style, setStyle] = useState\n
\n );\n }\n case \"color\": {\n return (\n \n setSign(e.currentTarget.value)}\n style={{ backgroundColor: colorSelected }}\n />\n
\n \n {t('menu.symbol')}\n
\n\n \n setLineName(e.currentTarget.value)}\n className=\"line-name-input\"\n value={lineName}\n />\n
\n \n {t('line.name')}\n
\n \n setOrder(parseInt(e.currentTarget.value))}\n />\n
\n \n {t('line.order')}\n
\n\n \n
\n );\n })}\n \n \n {new Array(10).fill(1).map((x, index) => {\n const { color } = colorSH[index];\n const choosed = color === colorSelected;\n\n return (\n setColor(color)}\n >\n
\n \n
\n \n );\n }\n case \"operation\": {\n return (\n \n setColor(e.currentTarget.value)}\n />\n setColor(e.currentTarget.value)}\n >\n
\n \n {\n setSubLine(!subLine);\n }}\n >\n {subLine?t('line.notSubLineAnymore'):t('line.asSubline')}...\n
\n \n {expand || edit ? (\n <>\n ) : (\n {\n setEdit(true);\n // setTab(\"name\");\n }}\n >\n
\n )}\n {edit ? (\n <>\n ) : (\n setExpand(!expand)}>\n {expand ? : }\n
\n )}\n \n {editTools(tab)}
\n ) : (\n <>\n \n {firstStation\n ? t('line.fromTo', {from:firstStation!.stationName,to: lastStation!.stationName})\n : t('line.notInUse')}\n
\n\n \n {\n if (addingStation) {\n if (!firstStation) {\n if (menuRef?.current?.showTools) {\n menuRef.current.showTools(\n e,\n FunctionMode.selectingStation\n );\n }\n }\n setInsertInfo({ insertIndex: index, line });\n setFunctionMode(FunctionMode.selectingStation);\n } else if (last) {\n setInsertInfo({ insertIndex: index + 1, line });\n if (menuRef?.current?.showTools) {\n menuRef.current.showTools(\n e,\n FunctionMode.selectingStation\n );\n }\n } else {\n setBendFirst(index, !bendFirst);\n }\n }}\n >\n \n {addingStation || last ?
\n \n \n \n \n
\n \n {addingStation || last\n ? currentInserting\n ? t('line.insertHere')\n : t('line.insertStation')\n : bendFirst\n ? t('line.bendFirst')\n : t('line.straight')}\n
\n \n \n \n {\n scrollOptimize(e);\n setTab(\"name\");\n }}\n >\n
\n {t('line.name')}
\n {lineName}
\n {t('line.color')}
\n \n {colorName}\n
\n \n {t('line.operation')}
\n {t('line.delete')}
\n \n \n\n setEdit(false)}>\n
\n \n }\n \n );\n}\n"
},
{
"path": "src/Render/Card/StationCard.scss",
"content": ".station-card {\n width: 455px;\n height: 250px;\n border-radius: 23px;\n display: inline-block;\n // margin-left: 50px;\n // margin-bottom: 50px;\n\n // zoom: 0.8;\n --margin-left: 33px;\n background-color: rgba(255, 255, 255, 0.863);\n backdrop-filter: blur(15px);\n position: relative;\n transition: 0.3s ease-in-out width;\n overflow: hidden;\n .tools {\n position: absolute;\n right: 0;\n .tool-item {\n vertical-align: top;\n height: 34px;\n width: 34px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin: 14.5px 11.3px 0 0;\n background-color: #d9d9d9;\n border-radius: 7.25px;\n .expand-icon {\n height: 15px;\n width: 15px;\n }\n .edit-icon {\n height: 17.74px;\n width: 17.74px;\n }\n }\n }\n .line-count {\n font-size: 18px;\n font-weight: 500;\n margin: 23px 0 0 var(--margin-left);\n cursor: pointer;\n }\n .station-name {\n & > * {\n font-size: 25px;\n font-weight: 500;\n }\n margin: 2px 0 0 var(--margin-left);\n }\n\n .from-to {\n font-size: 18px;\n font-weight: 500;\n margin: 5px 0 0 var(--margin-left);\n color: #ababab;\n }\n .edit-detail {\n height: 164px;\n overflow-y: scroll;\n &::-webkit-scrollbar {\n display: none;\n // width: 0.01px;\n }\n .name-detail {\n margin-top: 22.58px;\n white-space: nowrap;\n width: fit-content;\n .name-item {\n display: inline-block;\n margin-right: 24.2px;\n vertical-align: top;\n position: relative;\n &:first-child {\n margin-left: 32.25px;\n }\n .title {\n font-size: 11.25px;\n font-weight: 500;\n color: #ea0b2a;\n }\n input {\n margin-top: 21.77px;\n padding: 0;\n }\n .auto-growth-span {\n font-size: 36px;\n border: none;\n font-weight: 500;\n width: 100px;\n margin-top: 14px;\n opacity: 0;\n }\n .auto-growth-input {\n font-size: 36px;\n border: none;\n font-weight: 500;\n width: calc(100% + 18px);\n margin-top: 14px;\n position: absolute;\n left: 0;\n }\n }\n }\n .color-detail {\n .color-detail-choosing {\n box-sizing: border-box;\n padding: 10px 32.25px;\n width: 255px;\n display: grid;\n border: white 1px solid;\n grid-template-columns: repeat(4, 25%);\n grid-template-rows: repeat(3, 33.33%);\n // grid-row-gap: 9px;\n // grid-column-gap: 6px;\n .shape-container {\n height: 46.13px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-left: 1px black dotted;\n border-bottom: 1px black solid;\n transform: translate(-1px, 1px);\n cursor: pointer;\n\n &.left {\n border-left: none;\n }\n &.bottom {\n border-bottom: none;\n }\n .shape-preview {\n width: 19.5px;\n height: 19.5px;\n // border-radius: 50%;\n // border: 2px solid;\n display: flex;\n justify-content: center;\n align-items: center;\n &.shape-selected {\n svg {\n * {\n stroke: #ea0b2a;\n }\n }\n }\n &.square {\n zoom: 0.9;\n }\n &.triangle {\n zoom: 1.05;\n }\n &.start {\n zoom: 1.15;\n }\n &.hexagon {\n zoom: 0.9;\n }\n &.pentagon {\n zoom: 1.1;\n }\n &.diamond{\n zoom: 1.15;\n }\n &.leaf{\n zoom: 0.9;\n }\n }\n }\n }\n }\n .operation-detail {\n .operation-item {\n width: fit-content;\n &:first-child {\n margin-top: 15px;\n }\n &:last-child {\n margin-bottom: 15px;\n }\n margin-left: 32.25px;\n margin-top: 8px;\n margin-bottom: 8px;\n color: #2196f3;\n font-size: 18px;\n font-weight: 500;\n cursor: pointer;\n &.delete {\n color: #ea0b2a;\n }\n }\n }\n .tag-detail {\n display: grid;\n grid-template-columns: repeat(3, 33.33%);\n grid-template-rows: repeat(3, 33.33%);\n width: 200px;\n height: 126px;\n margin: 18px 30.25px;\n align-content: center;\n justify-content: center;\n align-items: center;\n justify-items: center;\n .tag-item {\n text-align: center;\n font-size: 11.25px;\n font-weight: 500;\n cursor: pointer;\n background-color: rgb(0, 0, 0, 13%);\n height: 30px;\n width: 55.65px;\n border-radius: 3px;\n border: 1px dotted;\n display: flex;\n justify-content: center;\n align-items: center;\n &.selected{\n background-color: rgb(0, 0, 0, 23%);\n border: 1px solid;\n }\n &.center{\n background-color: transparent;\n border: none;\n }\n }\n }\n }\n .station-bar {\n margin: 30px 0 0 0;\n white-space: nowrap;\n width: 455px;\n overflow-x: scroll;\n overflow-y: hidden;\n transition: 0.3s ease-in-out width;\n\n &::-webkit-scrollbar {\n display: none;\n // width: 0.01px;\n }\n .add-first {\n width: var(--margin-left);\n display: inline-block;\n }\n .station-block {\n display: inline-block;\n width: 161px;\n height: 78.22px;\n border-left: 1px solid #cccccc;\n position: relative;\n .track {\n display: flex;\n background-color: #f0f0f0;\n width: 161px;\n height: 48.3px;\n .sleeper {\n border-left: 1px solid #cccccc;\n width: 53.6px;\n &:first-child {\n border: none;\n }\n }\n }\n .bend-first {\n position: absolute;\n top: 7.215px;\n left: 9.5px;\n height: 33.87px;\n width: 133.8px;\n background-color: #d9d9d9;\n border-radius: 4px;\n display: flex;\n align-items: center;\n .bend-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n margin: 0 13px 0 18.5px;\n\n &.bend {\n transform: rotate(-45deg);\n }\n }\n .bend-des {\n display: inline-block;\n font-size: 14.25px;\n font-weight: 500;\n color: rgb(0, 0, 0, 0.5);\n }\n }\n .station-name {\n font-size: 18px;\n font-weight: 500;\n margin: 8px;\n color: #ea0b2a;\n }\n }\n }\n .edit-panel {\n &.edit {\n right: 0;\n }\n width: 200.8px;\n background-color: #f2f2f2;\n position: absolute;\n right: -200.8px;\n top: 0;\n height: 250px;\n transition: 0.3s ease-in-out right;\n .edit-tools {\n width: 200.8px;\n height: 250px;\n overflow-y: scroll;\n overflow-x: hidden;\n &::-webkit-scrollbar {\n display: none;\n // width: 0.01px;\n }\n .edit-tool {\n &:first-child {\n margin: 21.7px 21.7px 2px 21.7px;\n }\n &:last-child {\n margin: 2px 21.7px 21.7px 21.7px;\n }\n cursor: pointer;\n margin: 2px 21.7px 2px 21.7px;\n width: 158px;\n height: 75px;\n border-radius: 11.3px;\n font-weight: 500;\n display: flow-root;\n &.selected {\n background-color: #d9d9d9;\n }\n .title {\n font-size: 18px;\n margin: 12.1px 0 0 20.2px;\n text-transform: capitalize;\n }\n .value {\n font-size: 11.25px;\n margin: 4.83px 0 0 20.2px;\n .position {\n color: #5e5e5e;\n margin: 0 5px;\n text-decoration: underline;\n }\n }\n }\n }\n\n .done {\n background-color: #2196f3;\n border-radius: 25px;\n width: 74px;\n height: 28.2px;\n position: absolute;\n bottom: 23.4px;\n right: 23.4px;\n display: flex;\n align-items: center;\n .done-icon {\n height: 17.74px;\n width: 17.74px;\n margin: 0 6.5px 0 11.3px;\n path {\n fill: #ffffff;\n fill-opacity: 1;\n }\n }\n .done-des {\n font-size: 12px;\n font-weight: 500;\n color: white;\n }\n }\n }\n}\n"
},
{
"path": "src/Render/Card/StationCard.tsx",
"content": "import React, {\n Dispatch,\n RefObject,\n SetStateAction,\n useEffect,\n useState,\n} from \"react\";\n\nimport \"./StationCard.scss\";\nimport classNames from \"classnames\";\nimport { Point } from \"../../DataStructure/Point\";\nimport {\n CardShowing,\n InsertInfo,\n StationProps,\n UserDataType,\n dataProcessor,\n} from \"../../Data/UserData\";\nimport shapes from \"../../Resource/Shape/shape\";\nimport { Shape } from \"../../Data/Shape\";\nimport { AutoGrowthInput } from \"../../Common/AutoGrowthInput\";\nimport {\n browserInfo,\n onWheelX,\n onWheelY,\n scrollOptimize,\n} from \"../../Common/util\";\nimport { showConfirmationInterface } from \"../Delete/DeleteConfirmation\";\nimport { FunctionMode } from \"../../DataStructure/Mode\";\nimport { useTranslation } from \"react-i18next\";\nexport function StationCard({\n station,\n setData,\n data,\n showConfirmation,\n menuRef,\n functionMode,\n setFunctionMode,\n insertInfo,\n setInsertInfo,\n cardShowing,\n setCardShowing,\n}: {\n station: StationProps;\n setData: Dispatch\n
\n );\n }\n case \"color\": {\n const column = 4;\n const row = 3;\n const grid = new Array(column * row).fill(0);\n Object.keys(shapes).forEach((shape, index) => (grid[index] = shape));\n return (\n \n setX(Number(x.currentTarget.value))}\n type=\"number\"\n />\n
\n {t('station.x')}
\n \n setY(Number(y.currentTarget.value))}\n type=\"number\"\n />\n
\n {t('station.y')}
\n \n
\n );\n })}\n \n \n );\n }\n case \"operation\": {\n return (\n \n {grid.map((shape, index) => {\n const left = index % column === 0;\n const bottom = Math.floor(index / column) === row - 1;\n // console.log({ shape });\n return (\n {\n if (shape) setStationShape(shape);\n }}\n >\n \n {\n //@ts-ignore\n shapes[shape]\n }\n
\n \n {\n const newLine = addNewLine();\n setInsertInfo({ insertIndex: 1, line: newLine! });\n // setFunctionMode(FunctionMode.selectingStation);\n if (menuRef?.current?.showTools) {\n menuRef.current.showTools(e, FunctionMode.selectingStation);\n }\n }}\n >\n {t('station.startHere')}\n
\n {lineIds.map((lineId) => {\n const line = getLineById(lineId);\n const stationIndexes: number[] = [];\n line?.stationIds.forEach((x, index) => {\n if (x === stationId) stationIndexes.push(index);\n });\n const { lineName } = line!;\n const removeStations = stationIndexes.map((stationIndex) => (\n \n {directMapIndex.map((direct, index) => {\n if (index === 4)\n return (\n {\n setStationTagDirection(8);\n }}\n className=\"tag-item center\"\n >\n {tags[tagDirection]}\n
\n );\n else\n return (\n \n {editTools(tab)}\n
\n\n {\n \n \n {\n scrollOptimize(e);\n setTab(\"name\");\n }}\n >\n
\n {t('station.poisition')}
\n \n X{x}Y\n {y}\n
\n {t('station.shape')}
\n \n {\n t(`shape.${shapeSelected}`)\n }\n
\n \n {t('station.operation')}
\n {t('station.operateDes')}
\n \n {t('station.stationName')}
\n {tags[tagDirection]}
\n \n \n \n }\n \n );\n}\n"
},
{
"path": "src/Render/Component/LineRender.tsx",
"content": "import React, {\n CSSProperties,\n Dispatch,\n SetStateAction,\n memo,\n useEffect,\n useState,\n} from \"react\";\nimport { Line } from \"../../DataStructure/Line\";\nimport { Point } from \"../../DataStructure/Point\";\n\nimport {\n generateLineCommand,\n getAllKeyPoints,\n getRoundedPoints,\n} from \"../../Line/LinePoints\";\nimport { clearHandle, getHandleCommand } from \"../../Line/Handle\";\nimport { gauge } from \"../../Common/const\";\nimport {\n CardShowing,\n DrawProps,\n DrawerSize,\n UserDataType,\n} from \"../../Data/UserData\";\n\nfunction LineRender({\n line,\n cardShowing,\n setCardShowing,\n command,\n data,\n setData,\n drawing,\n drawerX,\n drawerY,\n}: {\n line: Line;\n cardShowing: CardShowing;\n setCardShowing: Dispatch\n \n {/* setMoved(false)}\n onTouchStart={() => setMoved(false)}\n onTouchMove={() => (!moved) && setMoved(true)}\n onMouseMove={() => (!moved) && setMoved(true)}\n onMouseUp={onClick}\n onTouchEnd={onClick}\n />\n\n {/*
\n {/* {renderPoints(allKeyPoints)} */}\n \n );\n}\n\nexport default memo(LineRender);\n"
},
{
"path": "src/Render/Delete/DeleteConfirmation.scss",
"content": ".delete-confirmation-container {\n position: fixed;\n top: 0;\n left: 0;\n z-index: -1000;\n height: 100vh;\n width: 100vw;\n background-color: rgba(255, 255, 255, 0.2);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n transition:\n 0.3s ease-in-out opacity,\n 0.3s ease-in-out z-index;\n &.before-animated,\n &.before-disappear {\n backdrop-filter: blur(1px);\n }\n &.animated {\n opacity: 1;\n backdrop-filter: blur(10px);\n z-index: 1000;\n }\n .delete-confirmation {\n text-align: center;\n\n .title {\n font-weight: 500;\n font-size: 36px;\n padding-left: 13px;\n }\n .sub-title {\n font-weight: 500;\n font-size: 18px;\n }\n .preview {\n margin-top: 74.2px;\n display: inline-block;\n // border-top: 1px solid black;\n width: fit-content;\n // padding: 0 40px;\n text-align: center;\n position: relative;\n // display: flex;\n // align-items: center;\n // justify-content: center;\n // &>div{\n // transform: translateY(-50%);\n // }\n .preview-content {\n display: flex;\n justify-content: center;\n align-items: center;\n .icon {\n display: inline-block;\n margin-left: 40px;\n\n .line {\n // width: 35.5px;\n margin-right: 35.5px;\n\n .sign-input {\n // width: 35.5px;\n * {\n min-width: 35.5px;\n height: 35.5px;\n border: none;\n border-radius: 8.87px;\n background-color: #ea0b2a;\n font-size: 23.25px;\n color: white;\n text-align: center;\n }\n }\n }\n .station {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 25.8px;\n svg {\n &.square {\n zoom: 0.9;\n }\n &.triangle {\n zoom: 1.05;\n }\n &.start {\n zoom: 1.15;\n }\n &.hexagon {\n zoom: 0.9;\n }\n &.pentagon {\n zoom: 1.1;\n }\n &.diamond {\n zoom: 1.15;\n }\n &.leaf {\n zoom: 0.9;\n }\n &.ginkgo {\n zoom: 0.8;\n }\n }\n }\n }\n .text {\n margin-right: 40px;\n display: inline-block;\n font-weight: 500;\n font-size: 18px;\n\n line-height: 35.5px;\n // vertical-align: middle;\n }\n }\n\n .delete-line {\n border-top: 1px solid #ea0b2a;\n position: absolute;\n top: 50%;\n width: 100%;\n transition: 0.3s ease-in-out;\n // animation-delay: 5s;\n transition-delay: 0.3s;\n }\n }\n\n .delete {\n font-weight: 500;\n font-size: 18px;\n margin-top: 104.8px;\n cursor: pointer;\n color: #ea0b2a;\n }\n .back {\n margin-top: 16.12px;\n font-weight: 500;\n font-size: 18px;\n cursor: pointer;\n }\n }\n}\n"
},
{
"path": "src/Render/Delete/DeleteConfirmation.tsx",
"content": "import React, {\n Dispatch,\n SetStateAction,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useState,\n} from \"react\";\nimport { LineProps, StationProps } from \"../../Data/UserData\";\nimport \"./DeleteConfirmation.scss\";\nimport { AutoGrowthInput } from \"../../Common/AutoGrowthInput\";\nimport shapes from \"../../Resource/Shape/shape\";\nimport classNames from \"classnames\";\nimport { useTranslation } from \"react-i18next\";\nimport i18n from \"../../i18n/config\";\nexport interface showConfirmationInterface {\n (\n {\n line,\n station,\n stationIndex,\n }: { line?: LineProps; station?: StationProps; stationIndex?: number },\n callback?: any\n ): void;\n}\nenum ShowMode {\n none,\n beforeAnimate,\n animated,\n beforeDisappear,\n}\nexport const DeleteConfirmation = forwardRef(function (\n {}: any,\n ref: React.Ref\n
\n {title}
\n {remove ? {subTitle}
: <>}\n \n
\n \n
\n \n {line && !station ? (\n
\n \n
\n ) : (\n \n {\n //@ts-ignore\n shapes[shape]\n }\n
\n )}\n {stationName || lineName}
\n \n {t('delete.cancel')}\n
\n \n \n );\n});\n"
},
{
"path": "src/Render/ErrorFallback/ErrorFallback.scss",
"content": ".error-layer {\n text-align: center;\n .title {\n margin-top: 20vh;\n font-size: 36px;\n font-weight: 1000;\n }\n .sub-title {\n margin-top: 0.5vh;\n font-size: 18px;\n font-weight: 500;\n }\n .error-btn {\n span{\n margin-left: 55px;\n text-align: left;\n }\n user-select: none;\n font-size: 18px;\n font-weight: 500;\n cursor: pointer;\n --gap: min(20px, 2vw);\n position: relative;\n svg{\n position: absolute;\n left: calc(var(--gap) + 20px);\n }\n &.recover-from-cache {\n margin-top: 12vh;\n background-color: rgb(234, 11, 42, 0.09);\n color: #ea0b2a;\n svg {\n width: 20px;\n\n }\n }\n &.export-from-cache {\n margin-top: 0.5vh;\n background-color: #D9D9D9;\n svg {\n width: 16px;\n padding: 0 2px;\n \n }\n }\n padding: 20px 30px;\n width: 315px;\n margin: auto;\n border-radius: 10px;\n display: flex;\n justify-content: left;\n align-items: center;\n\n }\n .export-error{\n position: absolute;\n bottom: 10vh;\n margin: auto;\n left: 0;\n right: 0;\n font-size: 18px;\n font-weight: 500;\n .export-error-file{\n color: #ea0b2a;\n cursor: pointer;\n }\n }\n}\n"
},
{
"path": "src/Render/ErrorFallback/ErrorFallback.tsx",
"content": "import React from \"react\";\nimport \"./ErrorFallback.scss\";\nimport { ReactComponent as RecoverIcon } from \"../../Resource/Icon/clock.arrow.circlepath.svg\";\nimport { ReactComponent as ExportIcon } from \"../../Resource/Icon/export.svg\";\nimport { exportFile, exportJson } from \"../../Common/util\";\nimport moment from \"moment\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const ErrorFallback = ({\n error,\n resetErrorBoundary,\n}: {\n error: Error;\n resetErrorBoundary: () => void;\n}) => {\n const exportFile = (key: string) => {\n const current = localStorage.getItem(key);\n exportJson(\n current!,\n `recovery-${key}-${moment().format(\"YYYY-MM-DD_HH-mm-ss\")}.json`\n );\n };\n const { t } = useTranslation();\n return (\n \n exportFile(\"last\")}\n >\n
\n {t('error.metError')}
\n {t('error.dontWorry')}
\n \n
\n \n
\n \n );\n};\n"
},
{
"path": "src/Render/Header/Component/OpacityControl.scss",
"content": ".tool {\n position: relative;\n display: inline-block;\n cursor: pointer;\n perspective: 1000px;\n perspective-origin: 0 50%;\n\n &:has(.slider-container) {\n z-index: 600;\n }\n\n .slider-container {\n transition:\n transform 0s,\n transform 0.3s ease-in-out,\n all 0.3s ease-in-out;\n &.show {\n opacity: 1;\n pointer-events: unset;\n top: 100%;\n transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, 0deg);\n }\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 0;\n margin-top: 8px;\n background: rgba(255, 255, 255, 0.136);\n box-shadow: 0 0 100px rgba(#000000, 0.15);\n // border: #ea0b2a 1px solid;\n z-index: 600;\n width: 400%;\n max-width: 100vw;\n overflow: hidden;\n height: 40px;\n border-radius: 5px;\n backdrop-filter: blur(20px);\n transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, var(--deg));\n transform-origin: 0 0;\n .opacity-text {\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto;\n pointer-events: none;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 20px;\n font-size: 14px;\n opacity: var(--value);\n span {\n margin-left: 2px;\n font-size: 10px;\n font-weight: 600;\n vertical-align: baseline;\n margin-top: 2.5px;\n }\n }\n .slider {\n appearance: none;\n width: 100%;\n height: 100%;\n appearance: none;\n margin: 0;\n background-color: transparent;\n background-image: repeating-linear-gradient(\n to right,\n transparent,\n transparent calc(18% - 1px),\n #05051a1c 18%\n );\n &::-webkit-slider-thumb {\n box-shadow: -20rem 0 0 20rem rgba(#ea0b2a, 0.2);\n cursor: col-resize;\n background-color: rgba(#ea0b2a, 0.2);\n }\n\n @supports not (-webkit-touch-callout: none) {\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 0;\n }\n }\n @supports (-webkit-min-device-pixel-ratio: 0) {\n &::-webkit-slider-thumb {\n -webkit-appearance: auto;\n appearance: auto;\n width: auto;\n }\n }\n\n \n &::-webkit-slider-runnable-track {\n // pointer-events: none;\n }\n }\n }\n}\n"
},
{
"path": "src/Render/Header/Component/OpacityControl.tsx",
"content": "import React, {\n useState,\n useRef,\n useEffect,\n CSSProperties,\n useLayoutEffect,\n} from \"react\";\nimport \"./OpacityControl.scss\";\nimport classNames from \"classnames\";\nimport { browserInfo } from \"../../../Common/util\";\nimport { useTranslation } from \"react-i18next\";\ninterface OpacityControlProps {\n opacity: number;\n setOpacity: (value: number) => void;\n}\n\n\nconst OpacityControl: React.FC\n {t('error.orYouCould')}\n exportFile(\"current\")}\n >\n {t('error.exportError')}\n \n
\n {t('error.sendAuthor')}
\n \n {t('opacity')}\n {\n e.stopPropagation()}\n style={{ \"--value\": opacity } as CSSProperties}\n onTransitionEnd={() => {\n if (showSlider && sliderRef.current) {\n sliderRef.current.style.transition = \"none\";\n }\n }}\n >\n \n {Math.floor(opacity * 100)}\n %\n \n e.stopPropagation()}\n style={{ \"--value\": opacity , \"--safari\": safari} as CSSProperties}\n onBlur={() => setShowSlider(false)}\n />\n
\n }\n \n );\n};\n\nexport default OpacityControl;\n"
},
{
"path": "src/Render/Header/Component/ShapeSelector.scss",
"content": ".tool {\n position: relative;\n display: inline-block;\n cursor: pointer;\n perspective: 1000px;\n perspective-origin: 0 50%;\n\n &:has(.shape-selector-container) {\n z-index: 600;\n }\n\n .shape-selector-container {\n .color-detail {\n .color-detail-choosing {\n box-sizing: border-box;\n padding: 10px 10px;\n width: 222.75px;\n display: grid;\n border: white 1px solid;\n grid-template-columns: repeat(4, 25%);\n grid-template-rows: repeat(3, 33.33%);\n // grid-row-gap: 9px;\n // grid-column-gap: 6px;\n .shape-container {\n height: 46.13px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-left: 1px black dotted;\n border-bottom: 1px black solid;\n transform: translate(-1px, 1px);\n cursor: pointer;\n\n &.left {\n border-left: none;\n }\n &.bottom {\n border-bottom: none;\n }\n .shape-preview {\n width: 19.5px;\n height: 19.5px;\n // border-radius: 50%;\n // border: 2px solid;\n display: flex;\n justify-content: center;\n align-items: center;\n &.shape-selected {\n svg {\n * {\n stroke: #ea0b2a;\n }\n }\n }\n &.square {\n zoom: 0.9;\n }\n &.triangle {\n zoom: 1.05;\n }\n &.start {\n zoom: 1.15;\n }\n &.hexagon {\n zoom: 0.9;\n }\n &.pentagon {\n zoom: 1.1;\n }\n &.diamond{\n zoom: 1.15;\n }\n &.leaf{\n zoom: 0.9;\n }\n }\n }\n }\n }\n transition:\n transform 0s,\n transform 0.3s ease-in-out,\n all 0.3s ease-in-out;\n &.show {\n opacity: 1;\n pointer-events: unset;\n top: 100%;\n transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, 0deg);\n }\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 0;\n margin-top: 8px;\n background: rgba(255, 255, 255, 0.136);\n box-shadow: 0 0 100px rgba(#000000, 0.15);\n // border: #ea0b2a 1px solid;\n z-index: 600;\n width: 222.75px;\n max-width: 100vw;\n overflow: hidden;\n height: 162px;\n border-radius: 5px;\n backdrop-filter: blur(20px);\n transform: scale(calc(1 + var(--value) * 0.075)) rotate3d(0, 1, 0, var(--deg));\n transform-origin: 0 0;\n .opacity-text {\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto;\n pointer-events: none;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 20px;\n font-size: 14px;\n opacity: var(--value);\n span {\n margin-left: 2px;\n font-size: 10px;\n font-weight: 600;\n vertical-align: baseline;\n margin-top: 2.5px;\n }\n }\n .slider {\n appearance: none;\n width: 100%;\n height: 100%;\n appearance: none;\n margin: 0;\n background-color: transparent;\n background-image: repeating-linear-gradient(\n to right,\n transparent,\n transparent calc(18% - 1px),\n #05051a1c 18%\n );\n &::-webkit-slider-thumb {\n box-shadow: -20rem 0 0 20rem rgba(#ea0b2a, 0.2);\n cursor: col-resize;\n background-color: rgba(#ea0b2a, 0.2);\n }\n\n @supports not (-webkit-touch-callout: none) {\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 0;\n }\n }\n @supports (-webkit-min-device-pixel-ratio: 0) {\n &::-webkit-slider-thumb {\n -webkit-appearance: auto;\n appearance: auto;\n width: auto;\n }\n }\n\n \n &::-webkit-slider-runnable-track {\n // pointer-events: none;\n }\n }\n }\n}\n"
},
{
"path": "src/Render/Header/Component/ShapeSelector.tsx",
"content": "import React, {\n useState,\n useRef,\n useEffect,\n CSSProperties,\n useLayoutEffect,\n SetStateAction,\n Dispatch,\n} from \"react\";\nimport \"./ShapeSelector.scss\";\nimport classNames from \"classnames\";\nimport { browserInfo } from \"../../../Common/util\";\nimport shapes from \"../../../Resource/Shape/shape\";\nimport { Shape } from \"../../../Data/Shape\";\nimport { useTranslation } from \"react-i18next\";\ninterface OpacityControlProps {\n defaultShape: string;\n setDefaultShape: Dispatch\n {\n t(`shape.${defaultShape}`)\n }\n {\n e.stopPropagation()}\n style={{} as CSSProperties}\n onTransitionEnd={() => {\n if (showSlider && sliderRef.current) {\n sliderRef.current.style.transition = \"none\";\n }\n }}\n >\n
\n \n \n }\n \n );\n};\n\nexport default ShapeSelector;\n"
},
{
"path": "src/Render/Header/Menu.scss",
"content": ".menu {\n &.page-menu {\n position: fixed;\n top: 0;\n left: 0;\n height: 100vh;\n width: 100vw;\n z-index: 500;\n background-color: rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(10px);\n .title {\n .tools {\n margin-left: -50px;\n .tool {\n margin-left: -5px;\n opacity: 0;\n }\n }\n }\n .dots {\n width: calc(100vw - 51.6px - 51.6px);\n transition:\n 0.3s ease-in-out opacity,\n 0.3s ease-in-out width;\n opacity: 1;\n }\n .menus {\n transition: 0.3s ease-in-out opacity;\n opacity: 1;\n .columns {\n .column {\n @media (max-width: 710px) {\n margin-top: 28.5px;\n opacity: 1;\n }\n }\n }\n }\n }\n\n &.page-title {\n // position: fixed;\n // top: 0;\n // left: 0;\n // height: 100vh;\n // width: 100vw;\n .title {\n .click-panel {\n cursor: pointer;\n }\n .tools {\n margin-left: -50px;\n .tool {\n margin-left: -5px;\n opacity: 0;\n }\n }\n }\n user-select: none;\n z-index: -500;\n .dots {\n margin-top: 100.66px;\n position: fixed;\n opacity: 1;\n width: 0;\n transition:\n 0.3s ease-in-out opacity,\n 0.3s ease-in-out width;\n }\n\n .menus {\n margin-top: 101.66px;\n position: fixed;\n opacity: 0;\n transition: 0.3s ease-in-out opacity;\n\n .columns {\n justify-content: space-between;\n transition: 0.3s ease-in-out width;\n width: calc(70vw - 51.6px - 51.6px);\n }\n }\n }\n\n &.page-tools {\n .title {\n }\n .dots {\n margin-top: 100.66px;\n position: fixed;\n opacity: 1;\n width: 0;\n transition:\n 0.3s ease-in-out opacity,\n 0.3s ease-in-out width;\n }\n .menus {\n margin-top: 101.66px;\n position: fixed;\n opacity: 0;\n transition: 0.3s ease-in-out opacity;\n\n .columns {\n justify-content: space-between;\n transition: 0.3s ease-in-out width;\n width: calc(70vw - 51.6px - 51.6px);\n }\n }\n }\n .title {\n position: fixed;\n margin: 35.5px 0 0 51.6px;\n z-index: 500;\n .auto-growth-container {\n display: inline-block;\n * {\n font-size: 36px;\n font-weight: 1000;\n }\n input {\n // background-color: rgba(255, 255, 255, 0.901);\n // backdrop-filter: blur(10px);\n // padding-left: 18px;\n // margin-left: -18px;\n }\n }\n .tools {\n @media (max-width: 710px) {\n // display: block !important;\n margin-left: -21.77px;\n .tool {\n margin-top: 5px;\n\n &:first-child {\n // display: none;\n }\n }\n }\n display: inline-block;\n transition: 0.3s ease-in-out;\n .tool {\n transition: 0.3s ease-in-out;\n opacity: 1;\n display: inline-block;\n font-size: 18px;\n font-weight: 500;\n color: #ea0b2a;\n &.tool-title{\n color: #00A0E8;\n cursor:auto;\n }\n margin-left: 21.77px;\n cursor: pointer;\n &.disabled {\n color: #ea0b2a55;\n cursor:auto;\n }\n svg{\n vertical-align: text-bottom;\n line-height: 26px;\n height: 26px;\n [fill=\"black\"]{\n fill: rgba(234, 11, 42, 0.3333333333) !important;\n fill-opacity: 1 !important;\n }\n }\n \n \n }\n }\n }\n\n .dots {\n // margin-top: 20.16px;\n border-bottom: dotted black 1px;\n margin: 100.66px 51.6px 0 51.6px;\n }\n .menus {\n height: calc(100vh - 101px);\n overflow-y: overlay;\n overflow-x: hidden;\n &::-webkit-scrollbar {\n display: none;\n }\n .columns {\n margin: 0 51.6px 0 51.6px;\n display: flex;\n @media (max-width: 710px) {\n display: grid;\n }\n justify-content: space-between;\n transition: 0.3s ease-in-out width;\n width: calc(100vw - 51.6px - 51.6px);\n .column {\n margin-top: 25.8px;\n display: inline-block;\n vertical-align: top;\n width: 20vw;\n transition: 0.3s ease-in-out;\n @media (max-width: 710px) {\n width: auto;\n margin-top: -15px;\n opacity: 0;\n &:last-child{\n padding-bottom: 150px;\n }\n }\n .column-title {\n font-size: 36px;\n font-weight: 300;\n }\n .column-items {\n // margin-top: 17px;\n\n .column-item {\n width: fit-content;\n margin-top: 17px;\n font-size: 18px;\n font-weight: 500;\n color: #ea0b2a;\n cursor: pointer;\n &.sub-menu{\n margin-top: 10px;\n margin-left: 10px;\n .sub-item{\n margin-right: 10px;\n }\n }\n &.small{\n font-size: small;\n }\n &.author{\n margin-top: 4px;\n &:hover{\n // text-decoration: underline;\n }\n }\n &.friend{\n position: relative;\n svg{\n margin-left: 5px;\n position: absolute;\n margin-top: 3px;\n width: 17px;\n // height: 25px;\n // vertical-align: bottom;\n }\n }\n }\n }\n }\n }\n .notice{\n position: fixed;\n left: 0;\n bottom: 0;\n }\n }\n}\n"
},
{
"path": "src/Render/Header/Menu.tsx",
"content": "import React, {\n Dispatch,\n SetStateAction,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { ReactComponent as ShareIcon } from \"../../Resource/Icon/share.svg\";\nimport { AutoGrowthInput } from \"../../Common/AutoGrowthInput\";\nimport \"./Menu.scss\";\nimport classNames from \"classnames\";\nimport { FunctionMode, Mode } from \"../../DataStructure/Mode\";\nimport {\n ChangeSteps,\n StationProps,\n UserDataType,\n addNewStation,\n addStationFromRecord,\n deleteStation,\n dataProcessor,\n InsertInfo,\n RecordType,\n LineChanges,\n LineProps,\n ShowNameProps,\n DrawProps,\n CardShowing,\n setDataFromJson,\n TransformProps,\n ShowTourProps,\n PageProps,\n} from \"../../Data/UserData\";\nimport PlusIcon from \"../../Resource/Icon/plus\";\nimport { ReactComponent as GlobeIcon } from \"../../Resource/Icon/globe.svg\";\nimport {\n browserInfo,\n calculateTransform,\n deleteFileFromIndexedDB,\n exportFile,\n exportJson,\n importFromFile,\n importImage,\n mediateMap,\n readFileFromIndexedDB,\n storeFileInIndexedDB,\n stringifyData,\n} from \"../../Common/util\";\nimport moment from \"moment\";\n\nimport { toPng, toJpeg, toBlob, toPixelData, toSvg } from \"html-to-image\";\nimport download from \"downloadjs\";\nimport { getExistMap } from \"../../Common/api\";\nimport OpacityControl from \"./Component/OpacityControl\";\nimport ShapeSelector from \"./Component/ShapeSelector\";\nimport { useTranslation } from \"react-i18next\";\nimport i18n from \"../../i18n/config\";\n\ntype MenuType = {\n setEditingMode: React.Dispatch\n
\n );\n })}\n \n {grid.map((shape, index) => {\n const left = index % column === 0;\n const bottom = Math.floor(index / column) === row - 1;\n // console.log({ shape });\n return (\n {\n if (shape) setDefaultShape(shape);\n }}\n >\n \n {\n //@ts-ignore\n shapes[shape]\n }\n
\n \n {currentRecordIndex >= 0\n ? t(\"menu.alreadyAddStations\", {\n count: currentRecordIndex + 1,\n })\n : t(\"menu.clickBlankToAddStation\")}\n
\n \n {currentRecordIndex >= 0\n ? t(\"menu.alreadyModified\", { count: currentRecordIndex + 1 })\n : t(\"menu.dragToChangePoistion\")}\n
\n \n {t(\"menu.chooseALineFirst\")}“\n
\n {t(\"menu.backgroudSetting\")}
\n \n setColor(e.currentTarget.value)}\n />\n
\n {backgroundImage ? (\n \n {t(\"menu.importBackgroudImage\")}...\n
\n )}\n \n {t(\"menu.backgroudSetting\")} / {t(\"menu.changeBackgroudImage\")}\n
\n \n {t(\"menu.importImage\")}\n
\n showTools(e, FunctionMode.customBackground)}>调整地图
\n ) : (\n showTools(e, FunctionMode.editingCustomBackgroundPosition)}>调整位置与缩放
\n )} */}\n\n \n {t(\"menu.clickAddStationToLine\", {\n lineName,\n insertIndex: insertIndex + 1,\n })}\n
\n {t(\"menu.chooseAMap\")}
\n {existingMap\n .filter((x) => (webkit ? x.webkit : true))\n .map(({ name, id }) => {\n return (\n e.stopPropagation()}>\n {\n e.stopPropagation();\n if (page === \"title\" || page === \"tools\") {\n setDisplay(\"block\");\n setTimeout(() => setPage(\"menu\"));\n setTitleEditable(true);\n }\n }}\n onInput={(e) => setTitle(e.currentTarget.value)}\n ref={inputRef}\n style={{\n cursor:\n page === \"title\"\n ? \"pointer\"\n : page === \"tools\"\n ? \"default\"\n : titleEditable\n ? \"auto\"\n : \"default\",\n }}\n disabled={!titleEditable}\n />\n\n {\n if (page !== \"tools\") {\n setToolsDisPlay(\"none\");\n setFunctionMode(FunctionMode.normal);\n }\n }}\n >\n {tools()}\n
\n \n\n \n \n {\n e.stopPropagation();\n setAutoHiddenName(!autoHiddenName);\n }}\n >\n {autoHiddenName ? t(\"menu.turnOff\") : t(\"menu.turnOn\")}\n {t(\"menu.AutoHidden\")}...\n
\n ) : (\n <>\n )}\n \n \n \n {\n e.stopPropagation();\n setShowName(!showName);\n }}\n >\n {showName ? t(\"menu.hidden\") : t(\"menu.show\")}\n {t(\"menu.stationName\")}...\n
\n {showName ? (\n \n showTools(e, FunctionMode.dragingStation)}\n >\n {t(\"menu.changeStationPosition\")}...\n
\n {t(\"menu.station\")}
\n \n showTools(e, FunctionMode.addingStation)}\n >\n {t(\"menu.addStation\")}...\n
\n \n {\n mediateMap(data, transfromTools);\n }}\n >\n {t(\"menu.mediateMap\")}\n
\n {t(\"menu.line\")}
\n \n showTools(e, FunctionMode.lineEditing)}\n >\n {t(\"menu.insertStation\")}\n
\n \n {\n setSelectedMap(\"\");\n setOriginalMap(data);\n showTools(e, FunctionMode.choosingExistMap);\n }}\n >\n {t(\"menu.addFromTemplate\")}\n
\n {t(\"menu.data\")}
\n \n {\n const current = localStorage.getItem(\"current\");\n if (current && !saved)\n exportJson(\n current!,\n `${title}-autosave-${moment().format(\n \"YYYY-MM-DD_HH-mm-ss\"\n )}.json`\n );\n setData({\n stations: new Map(),\n lines: new Map(),\n title: t(\"menu.newMap\"),\n });\n showTools(e, FunctionMode.addingStation);\n }}\n >\n {t(\"menu.addNewMap\")}\n
\n \n {\n if (window.innerWidth >= 710) setShowTour(true);\n else {\n e.stopPropagation();\n window.open(\n \"https://www.bilibili.com/video/BV1E4421D7Yn/\",\n \"_blank\"\n );\n }\n }}\n >\n {t(\"menu.guide\")}\n
\n {window.innerWidth >= 710 ? (\n {t(\"menu.about\")}
\n \n {\n e.stopPropagation();\n window.open(\n \"https://github.com/RyanEdo/mini-metro-web\",\n \"_blank\"\n );\n }}\n >\n {t(\"menu.projectAddress\")}\n
\n {t(\"menu.version\")}1.2.1
\n \n {allStationsList.map((station, index) => (\n \n {String.fromCharCode(\"A\".charCodeAt(0) + index)}\n
\n ))}\n \n );\n };\n\n // const renderLines = (allLinesList: Line[], cardShowing: CardShowing, setCardShowing: Dispatch\n // {allLinesList.map((line) => {\n // return ;\n // })}\n //
\n // );\n // };\n\n\n return (\n \n {/*
\n );\n}\n\nexport default DevelopLayer;\n"
},
{
"path": "src/Render/Layer/RenderLayer.scss",
"content": ".station-render {\n cursor: pointer;\n .station-shape {\n height: 30px;\n width: 30px;\n // transform: translate(-50%,-50%);\n display: inline-flex;\n // align-content: center;\n justify-content: center;\n align-items: center;\n svg {\n fill: white;\n // &.square {\n // zoom: 0.9;\n // }\n // &.triangle {\n // zoom: 1.05;\n // }\n // &.start {\n // zoom: 1.15;\n // }\n // &.hexagon {\n // zoom: 0.9;\n // }\n // &.pentagon {\n // zoom: 1.1;\n // }\n\n &.shadow{\n position: absolute;\n transform: scale(1.5);\n transform-origin: center;\n *{\n fill: inherit;\n stroke: inherit;\n }\n }\n }\n }\n .station-name {\n display: inline-block;\n font-size: 18px;\n font-weight: 500;\n // font-size: 30px;\n // font-weight: 1000;\n vertical-align: top;\n // margin-left: 5px;\n white-space: nowrap;\n\n }\n}\n"
},
{
"path": "src/Render/Layer/RenderLayer.tsx",
"content": "import React, {\n CSSProperties,\n Dispatch,\n MouseEventHandler,\n SetStateAction,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport DevelopLayer from \"./DevelopLayer\";\nimport { LineCard } from \"../Card/LineCard\";\nimport { Cards } from \"../Card/Cards\";\nimport {\n CardShowing,\n ChangeSteps,\n DrawProps,\n DrawerSize,\n InsertInfo,\n LineChanges,\n LineProps,\n RecordType,\n ShowNameProps,\n StationProps,\n UserDataType,\n dataProcessor,\n} from \"../../Data/UserData\";\nimport { Station } from \"../../DataStructure/Station\";\nimport { Point } from \"../../DataStructure/Point\";\nimport { mapToArr } from \"../../Common/util\";\nimport { Line } from \"../../DataStructure/Line\";\nimport LineRender from \"../Component/LineRender\";\nimport shapes, { shapesWithStyle } from \"../../Resource/Shape/shape\";\nimport \"./RenderLayer.scss\";\nimport { FunctionMode, Mode } from \"../../DataStructure/Mode\";\nimport { Direct } from \"../../DataStructure/Direction\";\nimport { clearHandle, getHandleCommand } from \"../../Line/Handle\";\nimport {\n getAllKeyPoints,\n getRoundedPoints,\n generateLineCommand,\n} from \"../../Line/LinePoints\";\nimport classNames from \"classnames\";\ntype RenderProps = {\n data: UserDataType;\n setData: Dispatch\n {new Array(100 * 50).fill(1).map((x, index) => (\n
*/}\n {renderStations(allStationsList)}\n {/* {renderLines(allLinesList)} */}\n\n {index}
\n ))}\n \n {allLinesList.map((line) => {\n const command = commandMap.get(line);\n return (\n
\n );\n};\n\nfunction RenderLayer({\n data,\n setData,\n functionMode,\n setFunctionMode,\n record,\n setRecord,\n currentRecordIndex,\n setCurrentRecordIndex,\n translateX,\n translateY,\n scale,\n insertInfo,\n setInsertInfo,\n cardShowing,\n setCardShowing,\n editingMode,\n showName,\n setShowName,\n autoHiddenName,\n setAutoHiddenName,\n drawing,\n setDrawing,\n drawerX,\n drawerY,\n}: RenderProps) {\n const { lines, stations } = data;\n const stationMap = buildStations(stations);\n const lineMap = buildLines(lines, stationMap);\n const allStationsList = mapToArr(stationMap);\n const allLinesList = mapToArr(lineMap);\n const [mouseDown, setMouseDown] = useState(false);\n const [stationBeingDrag, setStationBeingDrag] = useState\n {allStationsList.map((station, index) => {\n const { displayStation, position } = station;\n const { x, y } = position;\n const {\n stationName,\n shape,\n stationId,\n lineIds: stationLineIds,\n tagDirection,\n } = displayStation!;\n const descend = stations.size - index;\n const add = async () => {\n if (!moved) setCardShowing({ stationIds: [stationId] });\n if (functionMode === FunctionMode.selectingStation) {\n const { insertIndex, line } = insertInfo!;\n const { lineId } = line;\n const { addStationToLine } = dataProcessor(lineId, setData, data);\n const added = await addStationToLine(stationId, insertIndex);\n console.log(insertIndex);\n if(added)\n setInsertInfo({\n insertIndex: insertIndex ? insertIndex + 1 : 0,\n line,\n });\n const newRecord = record.slice(\n 0,\n currentRecordIndex + 1\n ) as LineChanges[];\n setRecord(\n newRecord.concat([\n { stationId, lineId, stationIndex: insertIndex },\n ])\n );\n setCurrentRecordIndex(currentRecordIndex + 1);\n setCardShowing({ stationIds: [stationId], lineIds: [lineId] });\n\n // setFunctionMode(FunctionMode.lineEditing);\n }\n };\n let nameDirection: Direct = station.getBestDirectionForName();\n if (tagDirection || tagDirection === 0) nameDirection = tagDirection;\n const SQRT1_2 = Math.SQRT1_2;\n const directionOffset = [\n [0, -1],\n [SQRT1_2, -SQRT1_2],\n [1, 0],\n [SQRT1_2, SQRT1_2],\n [0, 1],\n [-SQRT1_2, SQRT1_2],\n [-1, 0],\n [-SQRT1_2, -SQRT1_2],\n ];\n const k = 20; // distance from station to name\n const namePosition = directionOffset[nameDirection];\n const [dX, dY] = namePosition;\n const nameX = dX * k + x;\n const nameY = dY * k + y;\n const translate = [\n [-1, -2],\n [0, -2],\n [0, -1],\n [0, 0],\n [-1, 0],\n [-2, 0],\n [-2, -1],\n [-2, -2],\n ];\n const [tX, tY] = translate[nameDirection];\n const { lineIds, stationIds } = cardShowing;\n const emphasis = stationIds?.includes(stationId);\n const getEmphasisColor = (lineIds?: number[]) =>\n Array.isArray(lineIds) &&\n lineIds.length &&\n lines.get(lineIds[0])?.color;\n const emphasisColor =\n getEmphasisColor(lineIds) ||\n getEmphasisColor(stationLineIds) ||\n \"#00000055\";\n const nameStyle: CSSProperties = {\n position: \"absolute\",\n left: nameX,\n top: nameY,\n transform: `translate(${50 * tX}%,${50 * tY}%)`,\n };\n return (\n operationStart(e, station)}\n onTouchStart={(e) => operationStart(e, station)}\n className={classNames({ \"station-render\": 1 , [`station-trigger-descend-${descend}`]: 1})}\n onTouchMove={() => setMoved(true)}\n onMouseMove={() => setMoved(true)}\n onTouchEnd={add}\n onClick={add}\n >\n \n {emphasis && //@ts-ignore\n shapesWithStyle(\n {\n fill: emphasisColor,\n stroke: emphasisColor,\n // width: 31,\n // height: 31\n },\n \"shadow\"\n )[shape]}\n\n {\n //@ts-ignore\n shapesWithStyle({ zIndex: 100 })[shape]\n }\n
\n \n {lineComp}\n {stationComp}\n {/*
\n );\n}\n\nexport default RenderLayer;\n"
},
{
"path": "src/Render/Layer/ScaleLayer.scss",
"content": " .ScaleLayer{\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n .layer-for-welcome-tour{\n position: fixed;\n z-index: -500;\n width: 70vw;\n height: 70vh;\n left: 15vw;\n top: 15vw;\n }\n .transform-layer{\n transform-origin: left top;\n // never use will-change here, it makes child elements blurry\n // will-change: transform;\n }\n\n .background-layer{\n position: absolute;\n pointer-events: none;\n transform-origin: left top;\n appearance: none;\n border: none;\n box-shadow: none;\n border-image-width: 0;\n\n &:not([src]) {\n opacity: 0 !important;\n }\n }\n}"
},
{
"path": "src/Render/Layer/ScaleLayer.tsx",
"content": "import React, {\n CSSProperties,\n Dispatch,\n SetStateAction,\n useMemo,\n useState,\n} from \"react\";\nimport { FunctionMode, Mode } from \"../../DataStructure/Mode\";\nimport RenderLayer from \"./RenderLayer\";\nimport {\n onMouseDown,\n onMouseLeave,\n onMouseMove,\n onMouseUp,\n onTouchEnd,\n onTouchMove,\n onTouchStart,\n onWheel,\n} from \"../../Grid/Scale\";\nimport \"./ScaleLayer.scss\";\nimport { getCursor } from \"../../Style/Cursor\";\nimport { Point } from \"../../DataStructure/Point\";\nimport {\n CardShowing,\n ChangeSteps,\n DrawProps,\n InsertInfo,\n PageProps,\n RecordType,\n ShowNameProps,\n StationProps,\n TransformProps,\n UserDataType,\n} from \"../../Data/UserData\";\nimport { browserInfo, getBoundary, mapToArr } from \"../../Common/util\";\n\ntype ScaleLayerProp = {\n editingMode: Mode;\n setEditingMode: React.Dispatch\n {imageSrc?
\n \n );\n}\n\nexport default ScaleLayer;\n"
},
{
"path": "src/Render/Recovery/Recovery.scss",
"content": ".App{\n perspective: 1000px;\n perspective-origin: 100vw 105px; \n z-index: 10000;\n}\n.recovery-notification-container {\n\n position: fixed;\n right: 0;\n top: 0;\n transform-origin: right center;\n transition: ease-in-out 0.5s;\n\n &.show {\n transform: rotate3d(0, 1, 0, 0deg);\n opacity: 1;\n }\n &:not(.show) {\n transform: rotate3d(0, 1, 0, -90deg);\n opacity: 0;\n }\n .recovery-notification {\n @media screen and (max-width: 520px) {\n display: none;\n }\n position: fixed;\n top: 30px;\n right: 30px;\n width: 363px;\n height: 75px;\n display: flex;\n // justify-content: space-between;\n align-items: center;\n background-color: rgb(255, 255, 255, 0.72);\n box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(15px);\n border-radius: 15px;\n transition: ease-in-out 0.3s;\n\n // zoom: 1.2;\n &:hover {\n background-color: rgba(255, 255, 255, 0.001);\n }\n .icon {\n margin: 0 20px;\n }\n\n .icon,\n .ok,\n .no {\n width: 36px;\n height: 36px;\n\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .ok,\n .no {\n cursor: pointer;\n position: absolute;\n }\n\n .icon,\n .ok {\n background-color: rgb(235, 10, 40, 0.1);\n }\n\n .no {\n background-color: #d9d9d9;\n right: 20px;\n }\n\n .icon {\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n .ok {\n right: 60px;\n transition: ease-in-out 0.3s;\n &:hover {\n background-color: rgb(235, 10, 40, 0.2);\n }\n svg {\n width: 16px;\n }\n }\n\n .no {\n transition: ease-in-out 0.3s;\n &:hover {\n background-color: #c9c9c9;\n }\n svg {\n width: 12px;\n }\n }\n\n .text {\n .title {\n font-size: 16px;\n }\n .sub-title {\n font-size: 12px;\n }\n font-weight: 500;\n }\n }\n}\n"
},
{
"path": "src/Render/Recovery/Recovery.tsx",
"content": "import React, {\n Dispatch,\n SetStateAction,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { ReactComponent as RecoverIcon } from \"../../Resource/Icon/clock.arrow.circlepath.svg\";\nimport { ReactComponent as OkIcon } from \"../../Resource/Icon/ok.svg\";\nimport { ReactComponent as NoIcon } from \"../../Resource/Icon/no.svg\";\n\nimport \"./Recovery.scss\";\nimport { setDataFromJson, UserDataType } from \"../../Data/UserData\";\nimport { mediateMap, readFileFromIndexedDB } from \"../../Common/util\";\nimport classNames from \"classnames\";\nimport { useTranslation } from \"react-i18next\";\nexport function Recovery({\n data,\n setData,\n recoveredFromError,\n setRecoveredFromError,\n transfromTools,\n}: {\n data: UserDataType;\n setData: Dispatch\n
\n \n
\n {t('recover.text')}
\n {t('recover.subTitle')}
\n \n
\n \n ![](\"/app-icon.png\")
\n \n \n
\n \n \n \n \n {t('welcome.welcome')}
\n {t('welecome.minimetroweb')}
\n \n \n {next ? (\n <>\n {\n setShow(false);\n // if (!localStorage.getItem(\"skip-tour-viewed\"))\n // showTour(\"skip\", () => {\n localStorage.setItem(\"skip-tour-viewed\", \"Y\");\n // });\n }}\n >\n {t('welcome.skip')}\n \n {\n if (next.id === \"mobile\") {\n showQRCode();\n } else {\n setShow(false);\n showTour(next.id, () => {\n setShow(true);\n setVisited(next.id);\n scrollToNext();\n });\n }\n }}\n >\n {visitedSteps.length ? t('welcome.goOn') : \"\"}\n {next.more}\n \n \n ) : (\n <>\n \n {t('welcome.restart')}\n \n {\n localStorage.setItem(\"skip-tour-viewed\", \"Y\");\n setShow(false);\n }}\n >\n {t('welcome.done')}\n \n \n )}\n
\n \n {hightLights.map((hightLight) => {\n const { id, icon, title, subTitle, introText, more } = hightLight;\n const finished = visitedSteps.includes(id);\n return (\n
\n
\n {icon}\n {title}\n
\n \n
{subTitle}
\n \n {\n if (id === \"mobile\") {\n showQRCode();\n } else {\n showTour(id, () => {\n setVisited(id);\n setShow(true);\n scrollToNext();\n });\n setShow(false);\n }\n }}\n >\n \n {more}\n \n \n {finished ? (\n
\n {introText.map((line) => {\n const emphasisStart = line[0];\n const lineText = line.slice(1);\n return (\n
\n \n {lineText.map((text, index) => {\n const emphasis =\n (Number(emphasisStart) + index) % 2;\n return (\n \n {text}\n \n );\n })}\n
\n );\n })}\n