diff --git a/package-lock.json b/package-lock.json
index cb1c3f0..006c228 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,14 @@
"dependencies": {
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
+ "@esbuild/win32-x64": "^0.25.3",
"@hello-pangea/dnd": "^18.0.1",
"@mui/icons-material": "^6.1.6",
"@mui/lab": "^6.0.0-beta.14",
"@mui/material": "^6.1.7",
"@mui/x-data-grid": "^7.22.2",
"@photo-sphere-viewer/core": "^5.13.2",
+ "@pixi/react": "^8.0.0-beta.25",
"@react-three/drei": "^10.0.6",
"@react-three/fiber": "^9.1.2",
"@refinedev/cli": "^2.16.21",
@@ -38,6 +40,7 @@
"jwt-decode": "^4.0.0",
"mobx": "^6.13.7",
"mobx-react-lite": "^4.1.0",
+ "pixi.js": "^8.2.6",
"react": "19.0.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "19.0.0",
@@ -937,6 +940,54 @@
"integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
"license": "MIT"
},
+ "node_modules/@esbuild/android-arm": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+ "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/android-arm64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+ "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/android-x64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+ "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/@esbuild/darwin-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
@@ -954,6 +1005,292 @@
"node": ">=12"
}
},
+ "node_modules/@esbuild/darwin-x64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+ "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/freebsd-arm64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+ "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/freebsd-x64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+ "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-arm": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+ "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-arm64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+ "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-ia32": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+ "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-loong64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+ "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+ "cpu": [
+ "loong64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-mips64el": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+ "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+ "cpu": [
+ "mips64el"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-ppc64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+ "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-riscv64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+ "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+ "cpu": [
+ "riscv64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-s390x": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+ "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+ "cpu": [
+ "s390x"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-x64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+ "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/netbsd-x64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+ "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "netbsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/openbsd-x64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+ "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "openbsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/sunos-x64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+ "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "sunos"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/win32-arm64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+ "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/win32-ia32": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+ "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/win32-x64": {
+ "version": "0.25.3",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.3.tgz",
+ "integrity": "sha512-ICgUR+kPimx0vvRzf+N/7L7tVSQeE3BYY+NhHRHXS1kBuPO7z2+7ea2HbhDyZdTephgvNvKrlDDKUexuCVBVvg==",
+ "cpu": [
+ "x64"
+ ],
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
"node_modules/@eslint-community/eslint-utils": {
"version": "4.6.1",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.6.1.tgz",
@@ -1998,6 +2335,35 @@
"three": "^0.175.0"
}
},
+ "node_modules/@pixi/colord": {
+ "version": "2.9.6",
+ "resolved": "https://registry.npmjs.org/@pixi/colord/-/colord-2.9.6.tgz",
+ "integrity": "sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA=="
+ },
+ "node_modules/@pixi/react": {
+ "version": "8.0.0-beta.25",
+ "resolved": "https://registry.npmjs.org/@pixi/react/-/react-8.0.0-beta.25.tgz",
+ "integrity": "sha512-nXZbWj6nBHoOhlN1hKjKCeSPWPcv4BGBe8Em8B2V/QrSiihKI4C2vaxvV6Q1udLGsLnv4Hv9EBVa0Ixe0QAdiQ==",
+ "dependencies": {
+ "its-fine": "^1.2.5",
+ "react-reconciler": "0.31.0"
+ },
+ "peerDependencies": {
+ "pixi.js": "^8.2.6",
+ "react": ">=19.0.0"
+ }
+ },
+ "node_modules/@pixi/react/node_modules/its-fine": {
+ "version": "1.2.5",
+ "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
+ "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
+ "dependencies": {
+ "@types/react-reconciler": "^0.28.0"
+ },
+ "peerDependencies": {
+ "react": ">=18.0"
+ }
+ },
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3262,6 +3628,11 @@
"@types/tern": "*"
}
},
+ "node_modules/@types/css-font-loading-module": {
+ "version": "0.0.12",
+ "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.12.tgz",
+ "integrity": "sha512-x2tZZYkSxXqWvTDgveSynfjq/T2HyiZHXb00j/+gy19yp70PHCizM48XFdjBCWH7eHBD0R5i/pw9yMBP/BH5uA=="
+ },
"node_modules/@types/d3-color": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-2.0.6.tgz",
@@ -3318,6 +3689,11 @@
"integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
"license": "MIT"
},
+ "node_modules/@types/earcut": {
+ "version": "2.1.4",
+ "resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.4.tgz",
+ "integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ=="
+ },
"node_modules/@types/estree": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -3886,6 +4262,14 @@
"integrity": "sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==",
"license": "BSD-3-Clause"
},
+ "node_modules/@xmldom/xmldom": {
+ "version": "0.8.10",
+ "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+ "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+ "engines": {
+ "node": ">=10.0.0"
+ }
+ },
"node_modules/accepts": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -5418,6 +5802,11 @@
"node": ">= 0.4"
}
},
+ "node_modules/earcut": {
+ "version": "2.2.4",
+ "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+ "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+ },
"node_modules/eastasianwidth": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -5610,6 +5999,22 @@
"@esbuild/win32-x64": "0.18.20"
}
},
+ "node_modules/esbuild/node_modules/@esbuild/win32-x64": {
+ "version": "0.18.20",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+ "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/escalade": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -7410,6 +7815,11 @@
"node": ">=16"
}
},
+ "node_modules/ismobilejs": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
+ "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw=="
+ },
"node_modules/isobject": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
@@ -9887,6 +10297,11 @@
"integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
"license": "MIT"
},
+ "node_modules/parse-svg-path": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
+ "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ=="
+ },
"node_modules/parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -10017,6 +10432,22 @@
"node": ">= 6"
}
},
+ "node_modules/pixi.js": {
+ "version": "8.2.6",
+ "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.2.6.tgz",
+ "integrity": "sha512-CNfr7CmjIEWJ06e3TBrXBKFpcTPMGUaFdtP4RlMOgNOTkDD6+Bhm728I/EkGAo2vsOVO1YwNFsuORQyD3MngZg==",
+ "dependencies": {
+ "@pixi/colord": "^2.9.6",
+ "@types/css-font-loading-module": "^0.0.12",
+ "@types/earcut": "^2.1.4",
+ "@webgpu/types": "^0.1.40",
+ "@xmldom/xmldom": "^0.8.10",
+ "earcut": "^2.2.4",
+ "eventemitter3": "^5.0.1",
+ "ismobilejs": "^1.1.1",
+ "parse-svg-path": "^0.1.2"
+ }
+ },
"node_modules/pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -12477,7 +12908,6 @@
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz",
"integrity": "sha512-Jy9qLB2/PyWklpYy0xk0UU3TlU0t2UMpJXZvf+hWII1lAmRHrOUKi11Uw8N3rxoNk7atZNYO3pR3vI1f7oi+6w==",
- "license": "MIT",
"dependencies": {
"@rollup/pluginutils": "^5.1.3",
"@svgr/core": "^8.1.0",
diff --git a/package.json b/package.json
index b6b5a6d..0728d8a 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,14 @@
"dependencies": {
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
+ "@esbuild/win32-x64": "^0.25.3",
"@hello-pangea/dnd": "^18.0.1",
"@mui/icons-material": "^6.1.6",
"@mui/lab": "^6.0.0-beta.14",
"@mui/material": "^6.1.7",
"@mui/x-data-grid": "^7.22.2",
"@photo-sphere-viewer/core": "^5.13.2",
+ "@pixi/react": "^8.0.0-beta.25",
"@react-three/drei": "^10.0.6",
"@react-three/fiber": "^9.1.2",
"@refinedev/cli": "^2.16.21",
@@ -34,6 +36,7 @@
"jwt-decode": "^4.0.0",
"mobx": "^6.13.7",
"mobx-react-lite": "^4.1.0",
+ "pixi.js": "^8.2.6",
"react": "19.0.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "19.0.0",
diff --git a/public/Emblem.svg b/public/Emblem.svg
new file mode 100644
index 0000000..724f0ee
--- /dev/null
+++ b/public/Emblem.svg
@@ -0,0 +1,373 @@
+
diff --git a/public/GET.png b/public/GET.png
new file mode 100644
index 0000000..d224f3f
Binary files /dev/null and b/public/GET.png differ
diff --git a/public/SightIcon.png b/public/SightIcon.png
new file mode 100644
index 0000000..02e8adb
Binary files /dev/null and b/public/SightIcon.png differ
diff --git a/src/App.tsx b/src/App.tsx
index bb67e71..684b53f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -58,6 +58,7 @@ import {
VehicleShow,
} from "./pages/vehicle";
import { RouteList, RouteCreate, RouteEdit, RouteShow } from "./pages/route";
+import { RoutePreview } from "./pages/route-preview";
import { UserList, UserCreate, UserEdit, UserShow } from "./pages/user";
import {
@@ -201,6 +202,15 @@ function App() {
icon: ,
},
},
+ {
+ name: "route-preview",
+ list: "/route",
+ show: "/route/:id/station",
+ meta: {
+ hide: true,
+ stations: "route/:id/station"
+ },
+ },
{
name: "user",
list: "/user",
@@ -223,6 +233,10 @@ function App() {
>
+
+ } />
+
+
{
+ state = { hasError: false };
+
+ static getDerivedStateFromError() {
+ return { hasError: true };
+ }
+
+ componentDidCatch(error: Error, info: React.ErrorInfo) {
+ console.error("Error caught:", error, info);
+ }
+
+ render() {
+ return this.state.hasError ? Whoopsie Daisy!
: this.props.children;
+ }
+ }
+
+
+export function InfiniteCanvas({children} : Readonly<{children?: ReactNode}>) {
+ const { position, setPosition, scale, setScale, rotation, setRotation, applicationRef, getCenter } = useTransform();
+ const { routeData, originalRouteData } = useMapData();
+
+ const [isDragging, setIsDragging] = useState(false);
+ const [startMousePosition, setStartMousePosition] = useState({ x: 0, y: 0 });
+ const [startRotation, setStartRotation] = useState(0);
+ const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
+
+ const handlePointerDown = (e: FederatedMouseEvent) => {
+ setIsDragging(true);
+ setStartPosition({
+ x: position.x,
+ y: position.y
+ });
+ setStartMousePosition({
+ x: e.globalX,
+ y: e.globalY
+ });
+ setStartRotation(rotation);
+ e.stopPropagation();
+ };
+
+
+ useEffect(() => {
+ setRotation((originalRouteData?.rotate ?? 0) * Math.PI / 180);
+ }, [originalRouteData?.rotate]);
+ // Get canvas element and its dimensions/position
+ const handlePointerMove = (e: FederatedMouseEvent) => {
+ if (!isDragging) return;
+
+ if (e.shiftKey) {
+ const center = getCenter();
+ const startAngle = Math.atan2(startMousePosition.y - center.y, startMousePosition.x - center.x);
+ const currentAngle = Math.atan2(e.globalY - center.y, e.globalX - center.x);
+
+ // Calculate rotation difference in radians
+ const rotationDiff = currentAngle - startAngle;
+
+ // Update rotation
+ setRotation(startRotation + rotationDiff);
+
+ const cosDelta = Math.cos(rotationDiff);
+ const sinDelta = Math.sin(rotationDiff);
+
+ setPosition({
+ x: center.x * (1 - cosDelta) + startPosition.x * cosDelta + (center.y - startPosition.y) * sinDelta,
+ y: center.y * (1 - cosDelta) + startPosition.y * cosDelta + (startPosition.x - center.x) * sinDelta
+ });
+
+ } else {
+ setPosition({
+ x: startPosition.x - startMousePosition.x + e.globalX,
+ y: startPosition.y - startMousePosition.y + e.globalY
+ });
+ }
+ e.stopPropagation();
+ };
+
+ // Handle mouse up
+ const handlePointerUp = (e: FederatedMouseEvent) => {
+ setIsDragging(false);
+ e.stopPropagation();
+ };
+ // Handle mouse wheel for zooming
+ const handleWheel = (e: FederatedWheelEvent) => {
+ e.stopPropagation();
+
+ // Get mouse position relative to canvas
+ const mouseX = e.globalX - position.x;
+ const mouseY = e.globalY - position.y;
+
+ // Calculate new scale
+ const scaleMin = (routeData?.scale_min ?? 10)/20;
+ const scaleMax = (routeData?.scale_max ?? 20)/20;
+
+ let zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; // Zoom out/in
+ //const newScale = scale * zoomFactor;
+ const newScale = Math.max(scaleMin, Math.min(scaleMax, scale * zoomFactor));
+ zoomFactor = newScale / scale;
+
+ if (scale === newScale) {
+ return;
+ }
+
+ // Update position to zoom towards mouse cursor
+ setPosition({
+ x: position.x + mouseX * (1 - zoomFactor),
+ y: position.y + mouseY * (1 - zoomFactor)
+ });
+
+ setScale(newScale);
+ };
+
+
+ return (
+
+ {applicationRef?.current && (
+ {
+ const canvas = applicationRef.current!.getCanvas();
+ g.clear();
+ g.rect(0, 0, canvas?.width ?? 0, canvas?.height ?? 0);
+ g.fill("#111");
+ }}
+ eventMode={'static'}
+ interactive
+ onPointerDown={handlePointerDown}
+ onGlobalPointerMove={handlePointerMove}
+ onPointerUp={handlePointerUp}
+ onPointerUpOutside={handlePointerUp}
+ onWheel={handleWheel}
+ />
+ )}
+
+ {children}
+
+ {
+ g.clear();
+ const center = getCenter();
+ g.circle(center.x, center.y, 1);
+ g.fill("#fff");
+ }}
+ />
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/route-preview/LeftSidebar.tsx b/src/pages/route-preview/LeftSidebar.tsx
new file mode 100644
index 0000000..49c02ff
--- /dev/null
+++ b/src/pages/route-preview/LeftSidebar.tsx
@@ -0,0 +1,33 @@
+import { Stack, Typography, Button } from "@mui/material";
+
+export function LeftSidebar() {
+ return (
+
+
+ ![logo]({"/Emblem.svg"})
+
+ При поддержке Правительства
+ Санкт-Петербурга
+
+
+
+
+
+
+
+
+
+
+ ![logo]({"/GET.png"})
+
+
+ #ВсемПоПути
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/route-preview/MapDataContext.tsx b/src/pages/route-preview/MapDataContext.tsx
new file mode 100644
index 0000000..b8ea2ee
--- /dev/null
+++ b/src/pages/route-preview/MapDataContext.tsx
@@ -0,0 +1,187 @@
+import { useCustom, useShow, useApiUrl } from "@refinedev/core";
+import { useParams } from "react-router";
+import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from "react";
+import { RouteData, SightData, StationData, StationPatchData } from "./types";
+import { axiosInstance } from "../../providers/data";
+
+
+
+const MapDataContext = createContext<{
+ originalRouteData?: RouteData,
+ originalStationData?: StationData[],
+ originalSightData?: SightData[],
+ routeData?: RouteData,
+ stationData?: StationData[],
+ sightData?: SightData[],
+
+ isRouteLoading: boolean,
+ isStationLoading: boolean,
+ isSightLoading: boolean,
+ setScaleRange: (min: number, max: number) => void,
+ setMapRotation: (rotation: number) => void,
+ setMapCenter: (x: number, y: number) => void,
+ setStationOffset: (stationId: number, x: number, y: number) => void,
+ saveChanges: () => void,
+}>({
+ originalRouteData: undefined,
+ originalStationData: undefined,
+ originalSightData: undefined,
+ routeData: undefined,
+ stationData: undefined,
+ sightData: undefined,
+
+ isRouteLoading: true,
+ isStationLoading: true,
+ isSightLoading: true,
+ setScaleRange: () => {},
+ setMapRotation: () => {},
+ setMapCenter: () => {},
+ setStationOffset: () => {},
+ saveChanges: () => {},
+});
+
+export function MapDataProvider({ children }: Readonly<{ children: ReactNode }>) {
+ const { id: routeId } = useParams<{ id: string }>();
+ const apiUrl = useApiUrl();
+
+ const [originalRouteData, setOriginalRouteData] = useState();
+ const [originalStationData, setOriginalStationData] = useState();
+ const [originalSightData, setOriginalSightData] = useState();
+
+ const [routeData, setRouteData] = useState();
+ const [stationData, setStationData] = useState();
+ const [sightData, setSightData] = useState();
+
+ const [routeChanges, setRouteChanges] = useState({} as RouteData);
+ const [stationChanges, setStationChanges] = useState([]);
+ const [sightChanges, setSightChanges] = useState([]);
+
+
+ const { data: routeQuery, isLoading: isRouteLoading } = useCustom({
+ url: `${apiUrl}/route/${routeId}`,
+ method: 'get',
+ });
+ const { data: stationQuery, isLoading: isStationLoading } = useCustom({
+ url: `${apiUrl}/route/${routeId}/station`,
+ method: 'get',
+ });
+ const { data: sightQuery, isLoading: isSightLoading } = useCustom({
+ url: `${apiUrl}/route/${routeId}/sight`,
+ method: 'get',
+ });
+ useEffect(() => {
+ // if not undefined, set original data
+ if(routeQuery?.data) setOriginalRouteData(routeQuery.data as RouteData);
+ if(stationQuery?.data) setOriginalStationData(stationQuery.data as StationData[]);
+ if(sightQuery?.data) setOriginalSightData(sightQuery.data as SightData[]);
+ console.log("queries", routeQuery, stationQuery, sightQuery);
+ }, [routeQuery, stationQuery, sightQuery]);
+
+ useEffect(() => {
+ // combine changes with original data
+ if(originalRouteData) setRouteData({...originalRouteData, ...routeChanges});
+ if(originalStationData) setStationData(originalStationData);
+ if(originalSightData) setSightData(originalSightData);
+ }, [
+ originalRouteData, originalStationData, originalSightData,
+ routeChanges, stationChanges, sightChanges
+ ]);
+
+ useEffect(() => {
+ console.log("data", routeData, stationData, sightData);
+ }, [routeData, stationData, sightData]);
+
+ function setScaleRange(min: number, max: number) {
+ setRouteChanges((prev) => {
+ return {...prev, scale_min: min, scale_max: max};
+ });
+ }
+
+ function setMapRotation(rotation: number) {
+ setRouteChanges((prev) => {
+ return {...prev, rotate: rotation};
+ });
+ }
+
+ function setMapCenter(x: number, y: number) {
+ setRouteChanges((prev) => {
+ return {...prev, center_latitude: x, center_longitude: y}
+ });
+ }
+
+ async function saveChanges() {
+ console.log("saveChanges", routeData);
+ const response = await axiosInstance.patch(`/route/${routeId}`, routeData);
+ saveStationChanges();
+ }
+
+ async function saveStationChanges() {
+ console.log("saveStationChanges", stationChanges);
+ for(const station of stationChanges) {
+ const response = await axiosInstance.patch(`/route/${routeId}/station`, station);
+ console.log("response", response);
+ }
+ }
+
+ function setStationOffset(stationId: number, x: number, y: number) {
+ setStationChanges((prev) => {
+ let found = prev.find((station) => station.station_id === stationId);
+ if(found) {
+ found.offset_x = x;
+ found.offset_y = y;
+
+ return prev.map((station) => {
+ if(station.station_id === stationId) {
+ return found;
+ }
+ return station;
+ });
+ } else {
+ const foundStation = stationData?.find((station) => station.id === stationId);
+ if(foundStation) {
+ return [...prev, {
+ station_id: stationId,
+ offset_x: x, offset_y: y,
+ transfers: foundStation.transfers
+ }];
+ }
+ return prev;
+ }
+ });
+ }
+
+ useEffect(() => {
+ console.log("stationChanges", stationChanges);
+ }, [stationChanges]);
+
+ const value = useMemo(() => ({
+ originalRouteData: originalRouteData,
+ originalStationData: originalStationData,
+ originalSightData: originalSightData,
+ routeData: routeData,
+ stationData: stationData,
+ sightData: sightData,
+ isRouteLoading,
+ isStationLoading,
+ isSightLoading,
+ setScaleRange,
+ setMapRotation,
+ setMapCenter,
+ saveChanges,
+ setStationOffset,
+ }), [originalRouteData, originalStationData, originalSightData, routeData, stationData, sightData, isRouteLoading, isStationLoading, isSightLoading]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export const useMapData = () => {
+ const context = useContext(MapDataContext);
+ if (!context) {
+ throw new Error('useMapData must be used within a MapDataProvider');
+ }
+ return context;
+};
\ No newline at end of file
diff --git a/src/pages/route-preview/RightSidebar.tsx b/src/pages/route-preview/RightSidebar.tsx
new file mode 100644
index 0000000..e4b7334
--- /dev/null
+++ b/src/pages/route-preview/RightSidebar.tsx
@@ -0,0 +1,188 @@
+import { Button, Stack, TextField, Typography } from "@mui/material";
+import { useMapData } from "./MapDataContext";
+import { useEffect, useState } from "react";
+import { useTransform } from "./TransformContext";
+
+export function RightSidebar() {
+ const { routeData, setScaleRange, saveChanges, originalRouteData, setMapRotation, setMapCenter } = useMapData();
+ const { rotation, setRotation, position, screenToLocal, getCenter, localToScreen, rotateToAngle, panToCoordinates } = useTransform();
+ const [minScale, setMinScale] = useState(1);
+ const [maxScale, setMaxScale] = useState(10);
+ const [localCenter, setLocalCenter] = useState<{x: number, y: number}>({x: 0, y: 0});
+ const [rotationDegrees, setRotationDegrees] = useState(0);
+
+ useEffect(() => {
+ if(originalRouteData) {
+ setMinScale(originalRouteData.scale_min ?? 1);
+ setMaxScale(originalRouteData.scale_max ?? 10);
+ setRotationDegrees(originalRouteData.rotate ?? 0);
+ setLocalCenter({x: originalRouteData.center_latitude ?? 0, y: originalRouteData.center_longitude ?? 0});
+ }
+ }, [originalRouteData]);
+
+ useEffect(() => {
+ if(minScale && maxScale) {
+ setScaleRange(minScale, maxScale);
+ }
+ }, [minScale, maxScale]);
+
+
+ useEffect(() => {
+ setRotationDegrees((Math.round(rotation * 180 / Math.PI) % 360 + 360) % 360);
+ }, [rotation]);
+ useEffect(() => {
+ setMapRotation(rotationDegrees);
+ }, [rotationDegrees]);
+
+ useEffect(() => {
+ const center = getCenter();
+ const localCenter = screenToLocal(center.x, center.y);
+ setLocalCenter(localCenter);
+ }, [position]);
+
+
+ useEffect(() => {
+ setMapCenter(localCenter.x, localCenter.y);
+ }, [localCenter]);
+
+ function setRotationFromDegrees(degrees: number) {
+ rotateToAngle(degrees * Math.PI / 180);
+ }
+
+ function pan({x, y}: {x: number, y: number}) {
+ panToCoordinates(x, y, rotation);
+ }
+
+ if(!routeData) {
+ console.error("routeData is null");
+ return null;
+ }
+
+ return (
+
+
+ Детали о достопримечательностях
+
+
+
+ setMinScale(Number(e.target.value))}
+ style={{backgroundColor: "#222", borderRadius: 4}}
+ sx={{
+ '& .MuiInputLabel-root.Mui-focused': {
+ color: "#fff"
+ }
+ }}
+ slotProps={{
+ input: {
+ min: 0.1
+ }
+ }}
+ />
+ setMaxScale(Number(e.target.value))}
+ style={{backgroundColor: "#222", borderRadius: 4}}
+ sx={{
+ '& .MuiInputLabel-root.Mui-focused': {
+ color: "#fff"
+ }
+ }}
+ slotProps={{
+ input: {
+ min: 0.1
+ }
+ }}
+ />
+
+
+ {
+ const value = Number(e.target.value);
+ if (!isNaN(value)) {
+ setRotationFromDegrees(value);
+ }
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ e.currentTarget.blur();
+ }
+ }}
+ style={{backgroundColor: "#222", borderRadius: 4}}
+ sx={{
+ '& .MuiInputLabel-root.Mui-focused': {
+ color: "#fff"
+ }
+ }}
+ slotProps={{
+ input: {
+ min: 0,
+ max: 360
+ }
+ }}
+ />
+
+
+ {
+ setLocalCenter(prev => ({...prev, x: Number(e.target.value)}))
+ pan({x: Number(e.target.value), y: localCenter.y});
+ }}
+ style={{backgroundColor: "#222", borderRadius: 4}}
+ sx={{
+ '& .MuiInputLabel-root.Mui-focused': {
+ color: "#fff"
+ }
+ }}
+ />
+ {
+ setLocalCenter(prev => ({...prev, y: Number(e.target.value)}))
+ pan({x: localCenter.x, y: Number(e.target.value)});
+ }}
+ style={{backgroundColor: "#222", borderRadius: 4}}
+ sx={{
+ '& .MuiInputLabel-root.Mui-focused': {
+ color: "#fff"
+ }
+ }}
+ />
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/route-preview/Sight.tsx b/src/pages/route-preview/Sight.tsx
new file mode 100644
index 0000000..d873cb0
--- /dev/null
+++ b/src/pages/route-preview/Sight.tsx
@@ -0,0 +1,114 @@
+import { useEffect, useState } from "react";
+import { useTransform } from "./TransformContext";
+import { SightData } from "./types";
+import { Assets, FederatedMouseEvent, Graphics, Texture } from "pixi.js";
+import { COLORS } from "../../contexts/color-mode/theme";
+import { SIGHT_SIZE, UP_SCALE } from "./Constants";
+
+
+interface SightProps {
+ sight: SightData;
+ id: number;
+}
+
+export function Sight({
+ sight, id
+}: Readonly) {
+ const { rotation, scale } = useTransform();
+
+ const [position, setPosition] = useState({ x: 0, y: 0 });
+ const [isDragging, setIsDragging] = useState(false);
+ const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
+ const [startMousePosition, setStartMousePosition] = useState({ x: 0, y: 0 });
+
+ const handlePointerDown = (e: FederatedMouseEvent) => {
+ setIsDragging(true);
+ setStartPosition({
+ x: position.x,
+ y: position.y
+ });
+ setStartMousePosition({
+ x: e.globalX,
+ y: e.globalY
+ });
+
+ e.stopPropagation();
+ };
+ const handlePointerMove = (e: FederatedMouseEvent) => {
+ if (!isDragging) return;
+ const dx = (e.globalX - startMousePosition.x) / scale;
+ const dy = (e.globalY - startMousePosition.y) / scale;
+ const cos = Math.cos(rotation);
+ const sin = Math.sin(rotation);
+ const newPosition = {
+ x: startPosition.x + dx * cos + dy * sin,
+ y: startPosition.y - dx * sin + dy * cos
+ };
+ setPosition(newPosition);
+ e.stopPropagation();
+ };
+
+ const handlePointerUp = (e: FederatedMouseEvent) => {
+ setIsDragging(false);
+ e.stopPropagation();
+ };
+
+ const [texture, setTexture] = useState(Texture.EMPTY);
+ useEffect(() => {
+ if (texture === Texture.EMPTY) {
+ Assets
+ .load('/SightIcon.png')
+ .then((result) => {
+ setTexture(result)
+ });
+ }
+ }, [texture]);
+
+ function draw(g: Graphics) {
+ g.clear();
+ g.circle(0, 0, 20);
+ g.fill({color: COLORS.primary}); // Fill circle with primary color
+ }
+
+ if(!sight) {
+ console.error("sight is null");
+ return null;
+ }
+
+
+ return (
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/route-preview/Station.tsx b/src/pages/route-preview/Station.tsx
new file mode 100644
index 0000000..cd7aa4d
--- /dev/null
+++ b/src/pages/route-preview/Station.tsx
@@ -0,0 +1,103 @@
+import { FederatedMouseEvent, Graphics } from "pixi.js";
+import { BACKGROUND_COLOR, PATH_COLOR, STATION_RADIUS, STATION_OUTLINE_WIDTH, UP_SCALE } from "./Constants";
+import { useTransform } from "./TransformContext";
+import { useCallback, useEffect, useState } from "react";
+import { StationData } from "./types";
+import { useMapData } from "./MapDataContext";
+
+interface StationProps {
+ station: StationData;
+}
+
+export function Station({
+ station
+}: Readonly) {
+ const draw = useCallback((g: Graphics) => {
+ g.clear();
+ g.circle(station.latitude * UP_SCALE, station.longitude * UP_SCALE, STATION_RADIUS);
+ g.fill({color: PATH_COLOR});
+ g.stroke({color: BACKGROUND_COLOR, width: STATION_OUTLINE_WIDTH});
+ }, []);
+
+ return (
+
+
+
+
+ );
+}
+
+export function StationLabel({
+ station
+}: Readonly) {
+ const { rotation, scale } = useTransform();
+ const { setStationOffset } = useMapData();
+
+ const [position, setPosition] = useState({ x: station.offset_x, y: station.offset_y });
+ const [isDragging, setIsDragging] = useState(false);
+ const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
+ const [startMousePosition, setStartMousePosition] = useState({ x: 0, y: 0 });
+
+ if(!station) {
+ console.error("station is null");
+ return null;
+ }
+
+ const handlePointerDown = (e: FederatedMouseEvent) => {
+ setIsDragging(true);
+ setStartPosition({
+ x: position.x,
+ y: position.y
+ });
+ setStartMousePosition({
+ x: e.globalX,
+ y: e.globalY
+ });
+
+ e.stopPropagation();
+ };
+ const handlePointerMove = (e: FederatedMouseEvent) => {
+ if (!isDragging) return;
+ const dx = (e.globalX - startMousePosition.x) / scale;
+ const dy = (e.globalY - startMousePosition.y) / scale;
+ const cos = Math.cos(rotation);
+ const sin = Math.sin(rotation);
+ const newPosition = {
+ x: startPosition.x + dx * cos + dy * sin,
+ y: startPosition.y - dx * sin + dy * cos
+ };
+ setPosition(newPosition);
+ setStationOffset(station.id, newPosition.x, newPosition.y);
+ e.stopPropagation();
+ };
+
+ const handlePointerUp = (e: FederatedMouseEvent) => {
+ setIsDragging(false);
+ e.stopPropagation();
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/route-preview/TransformContext.tsx b/src/pages/route-preview/TransformContext.tsx
new file mode 100644
index 0000000..cf91baf
--- /dev/null
+++ b/src/pages/route-preview/TransformContext.tsx
@@ -0,0 +1,161 @@
+import { createContext, ReactNode, RefObject, useContext, useEffect, useMemo, useRef, useState } from "react";
+import {
+ ApplicationRef
+} from '@pixi/react';
+import { UP_SCALE } from "./Constants";
+
+
+const TransformContext = createContext<{
+ position: { x: number, y: number },
+ scale: number,
+ rotation: number,
+ applicationRef: RefObject | null,
+
+ setPosition: React.Dispatch>,
+ setScale: React.Dispatch>,
+ setRotation: React.Dispatch>,
+ screenToLocal: (x: number, y: number) => { x: number, y: number },
+ localToScreen: (x: number, y: number) => { x: number, y: number },
+ getCenter: () => { x: number, y: number },
+ rotateToAngle: (to: number, fromPosition?: {x: number, y: number}) => void,
+ panToCoordinates: (latitude: number, longitude: number, rotation?: number) => void
+}>({
+ position: { x: 0, y: 0 },
+ scale: 1,
+ rotation: 0,
+ applicationRef: null,
+
+ setPosition: () => {},
+ setScale: () => {},
+ setRotation: () => {},
+ screenToLocal: () => ({ x: 0, y: 0 }),
+ localToScreen: () => ({ x: 0, y: 0 }),
+ getCenter: () => ({ x: 0, y: 0 }),
+ rotateToAngle: () => {},
+ panToCoordinates: () => {}
+});
+
+// Provider component
+export const TransformProvider = ({ children }: { children: ReactNode }) => {
+ const [position, setPosition] = useState({ x: 0, y: 0 });
+ const [scale, setScale] = useState(1);
+ const [rotation, setRotation] = useState(0);
+ const applicationRef = useRef(null);
+
+ function screenToLocal(screenX: number, screenY: number) {
+ // Translate point relative to current pan position
+ const translatedX = (screenX - position.x) / scale;
+ const translatedY = (screenY - position.y) / scale;
+
+ // Rotate point around center
+ const cosRotation = Math.cos(-rotation); // Negative rotation to reverse transform
+ const sinRotation = Math.sin(-rotation);
+ const rotatedX = translatedX * cosRotation - translatedY * sinRotation;
+ const rotatedY = translatedX * sinRotation + translatedY * cosRotation;
+
+ return {
+ x: rotatedX / UP_SCALE,
+ y: rotatedY / UP_SCALE
+ };
+ }
+
+ // Inverse of screenToLocal
+ function localToScreen(localX: number, localY: number) {
+
+ const upscaledX = localX * UP_SCALE;
+ const upscaledY = localY * UP_SCALE;
+
+ const cosRotation = Math.cos(rotation);
+ const sinRotation = Math.sin(rotation);
+ const rotatedX = upscaledX * cosRotation - upscaledY * sinRotation;
+ const rotatedY = upscaledX * sinRotation + upscaledY * cosRotation;
+
+ const translatedX = rotatedX*scale + position.x;
+ const translatedY = rotatedY*scale + position.y;
+
+ return {
+ x: translatedX,
+ y: translatedY
+ };
+ }
+
+ function getCenter() {
+ const canvas = applicationRef?.current?.getCanvas();
+ const canvasRect = canvas?.getBoundingClientRect();
+ const canvasLeft = canvasRect?.left ?? 0;
+ const canvasTop = canvasRect?.top ?? 0;
+
+ const centerX = window.innerWidth / 2 - canvasLeft;
+ const centerY = window.innerHeight / 2 - canvasTop;
+ return {x: centerX, y: centerY};
+ }
+
+ function rotateToAngle(to: number, fromPosition?: {x: number, y: number}) {
+ setRotation(to);
+ console.log(to, fromPosition);
+ const rotationDiff = to - rotation;
+ console.log("rotationDiff", rotationDiff);
+
+ const center = getCenter();
+ const cosDelta = Math.cos(rotationDiff);
+ const sinDelta = Math.sin(rotationDiff);
+
+ fromPosition ??= position;
+
+ setPosition({
+ x: center.x * (1 - cosDelta) + fromPosition.x * cosDelta + (center.y - fromPosition.y) * sinDelta,
+ y: center.y * (1 - cosDelta) + fromPosition.y * cosDelta + (fromPosition.x - center.x) * sinDelta
+ });
+ }
+
+ function panToCoordinates(latitude: number, longitude: number, rotation?: number) {
+ const center = getCenter();
+ const newPosition = {
+ x: -latitude * UP_SCALE,
+ y: -longitude * UP_SCALE
+ };
+ rotation ??= 0;
+
+ const cos = Math.cos(rotation);
+ const sin = Math.sin(rotation);
+
+ // Translate point relative to center, rotate, then translate back
+ const dx = newPosition.x;
+ const dy = newPosition.y;
+ newPosition.x = (dx * cos - dy * sin) + center.x;
+ newPosition.y = (dx * sin + dy * cos) + center.y;
+
+
+ setPosition(newPosition);
+ }
+
+ const value = useMemo(() => ({
+ position,
+ scale,
+ rotation,
+ applicationRef,
+ getCenter,
+ setPosition,
+ setScale,
+ setRotation,
+ rotateToAngle,
+ panToCoordinates,
+ screenToLocal,
+ localToScreen
+ }), [position, scale, rotation, applicationRef]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+// Custom hook for easy access to transform values
+export const useTransform = () => {
+ const context = useContext(TransformContext);
+ if (!context) {
+ throw new Error('useTransform must be used within a TransformProvider');
+ }
+ return context;
+};
\ No newline at end of file
diff --git a/src/pages/route-preview/TravelPath.tsx b/src/pages/route-preview/TravelPath.tsx
new file mode 100644
index 0000000..2213e11
--- /dev/null
+++ b/src/pages/route-preview/TravelPath.tsx
@@ -0,0 +1,36 @@
+import { Graphics } from "pixi.js";
+import { useCallback } from "react";
+import { PATH_COLOR, PATH_WIDTH } from "./Constants";
+
+
+interface TravelPathProps {
+ points: {x: number, y: number}[];
+}
+
+export function TravelPath({
+ points
+}: Readonly) {
+
+ const draw = useCallback((g: Graphics) => {
+ g.clear();
+ g.moveTo(points[0].x, points[0].y);
+ for (let i = 1; i < points.length - 1; i++) {
+ g.lineTo(points[i].x, points[i].y);
+ }
+ g.stroke({
+ color: PATH_COLOR,
+ width: PATH_WIDTH
+ });
+ }, [points]);
+
+ if(points.length === 0) {
+ console.error("points is empty");
+ return null;
+ }
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/route-preview/Widgets.tsx b/src/pages/route-preview/Widgets.tsx
new file mode 100644
index 0000000..f9182cc
--- /dev/null
+++ b/src/pages/route-preview/Widgets.tsx
@@ -0,0 +1,31 @@
+import { Stack, Typography } from "@mui/material";
+
+export function Widgets() {
+ return (
+
+
+ Станция
+
+
+ Погода
+
+
+ )
+}
diff --git a/src/pages/route-preview/index.tsx b/src/pages/route-preview/index.tsx
new file mode 100644
index 0000000..29f7c60
--- /dev/null
+++ b/src/pages/route-preview/index.tsx
@@ -0,0 +1,137 @@
+import { useRef, useEffect, useState } from "react";
+
+import {
+ Application,
+ extend
+} from '@pixi/react';
+import {
+ Container,
+ Graphics,
+ Sprite,
+ Texture,
+ TilingSprite,
+ Text
+} from 'pixi.js';
+import { Stack } from "@mui/material";
+import { MapDataProvider, useMapData } from "./MapDataContext";
+import { TransformProvider, useTransform } from "./TransformContext";
+import { InfiniteCanvas } from "./InfiniteCanvas";
+import { Sight } from "./Sight";
+import { UP_SCALE } from "./Constants";
+import { Station } from "./Station";
+import { TravelPath } from "./TravelPath";
+import { LeftSidebar } from "./LeftSidebar";
+import { RightSidebar } from "./RightSidebar";
+import { Widgets } from "./Widgets";
+
+extend({
+ Container,
+ Graphics,
+ Sprite,
+ Texture,
+ TilingSprite,
+ Text
+});
+
+export const RoutePreview = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+
+export function RouteMap() {
+ const { applicationRef, setPosition, screenToLocal, panToCoordinates } = useTransform();
+ const {
+ routeData, stationData, sightData, originalRouteData
+ } = useMapData();
+ const [points, setPoints] = useState<{x: number, y: number}[]>([]);
+
+ const parentRef = useRef(null);
+
+ useEffect(() => {
+ if (originalRouteData) {
+ const path = originalRouteData?.path;
+ const points = path?.map(([x, y]: [number, number]) => ({x: x * UP_SCALE, y: y * UP_SCALE})) ?? [];
+ setPoints(points);
+ }
+ }, [originalRouteData]);
+
+ useEffect(() => {
+ if (originalRouteData?.center_latitude === originalRouteData?.center_longitude && originalRouteData?.center_latitude === 0) {
+ if (points.length > 0) {
+ let boundingBox = {
+ from: {x: Infinity, y: Infinity},
+ to: {x: -Infinity, y: -Infinity}
+ };
+ for (const point of points) {
+ boundingBox.from.x = Math.min(boundingBox.from.x, point.x);
+ boundingBox.from.y = Math.min(boundingBox.from.y, point.y);
+ boundingBox.to.x = Math.max(boundingBox.to.x, point.x);
+ boundingBox.to.y = Math.max(boundingBox.to.y, point.y);
+ }
+ const newCenter = {
+ x: -(boundingBox.from.x + boundingBox.to.x) / 2,
+ y: -(boundingBox.from.y + boundingBox.to.y) / 2
+ };
+ setPosition(newCenter);
+ }
+ } else if (
+ originalRouteData?.center_latitude &&
+ originalRouteData?.center_longitude
+ ) {
+ panToCoordinates(
+ originalRouteData?.center_latitude,
+ originalRouteData?.center_longitude,
+ originalRouteData?.rotate * Math.PI / 180
+ );
+ }
+ }, [points, originalRouteData?.center_latitude, originalRouteData?.center_longitude, originalRouteData?.rotate]);
+
+ if (!routeData || !stationData || !sightData) {
+ console.error("routeData, stationData or sightData is null");
+ return Loading...
;
+ }
+
+
+ return (
+
+
+
+
+ {stationData?.map((obj) => (
+
+ ))}
+ {sightData?.map((obj, index) => (
+
+ ))}
+
+ {
+ g.clear();
+ const localCenter = screenToLocal(0,0);
+ g.circle(localCenter.x, localCenter.y, 10);
+ g.fill("#fff");
+ }}
+ />
+
+
+