From 45bab1516e4d08e3382be80b722f6e173d23f0a5 Mon Sep 17 00:00:00 2001 From: Kevin Attfield Date: Tue, 21 Mar 2023 21:29:50 -0700 Subject: [PATCH 1/5] Add prettier to the project This is the suggested path from the Angular team https://github.com/angular-eslint/angular-eslint/blob/main/docs/FORMATTING_RULES.md This adds prettier with a basic config. No special options and some ignore directories. It adds eslint-config-prettier to disable certain eslint rules that interfere with prettier. --- frontend/.eslintrc.json | 3 ++- frontend/.prettierignore | 5 +++++ frontend/.prettierrc.json | 1 + frontend/package-lock.json | 12 ++++++++++++ frontend/package.json | 2 ++ 5 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 frontend/.prettierignore create mode 100644 frontend/.prettierrc.json diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index 1e4624e6..f0326dbc 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -43,7 +43,8 @@ "*.html" ], "extends": [ - "plugin:@angular-eslint/template/recommended" + "plugin:@angular-eslint/template/recommended", + "prettier" ], "rules": {} } diff --git a/frontend/.prettierignore b/frontend/.prettierignore new file mode 100644 index 00000000..5f67c446 --- /dev/null +++ b/frontend/.prettierignore @@ -0,0 +1,5 @@ +.angular +dist +out-tsc + +assets diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/frontend/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a9f35e85..ee12266f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -6117,6 +6117,12 @@ } } }, + "eslint-config-prettier": { + "version": "8.8.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz", + "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==", + "dev": true + }, "eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", @@ -10683,6 +10689,12 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", "dev": true }, + "prettier": { + "version": "2.8.6", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.6.tgz", + "integrity": "sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ==", + "dev": true + }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 2b99cdf0..2fa2b0f4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -63,6 +63,7 @@ "@typescript-eslint/eslint-plugin": "5.27.1", "@typescript-eslint/parser": "5.27.1", "eslint": "^8.17.0", + "eslint-config-prettier": "^8.8.0", "jasmine-core": "^3.10.1", "jasmine-spec-reporter": "^7.0.0", "karma": "^6.3.9", @@ -71,6 +72,7 @@ "karma-jasmine": "^4.0.1", "karma-jasmine-html-reporter": "^1.7.0", "ngx-i18nsupport": "^0.17.1", + "prettier": "^2.8.6", "protractor": "~7.0.0", "ts-node": "^10.4.0", "typescript": "~4.5.4" From 42914822f8f4a480c9e1e36a252fecf5a727667f Mon Sep 17 00:00:00 2001 From: Kevin Attfield Date: Tue, 21 Mar 2023 22:08:17 -0700 Subject: [PATCH 2/5] Add Husky and lint-staged --- frontend/.husky/pre-commit | 3 + frontend/.lintstagedrc | 4 + frontend/package-lock.json | 391 +++++++++++++++++++++++++++++++++++++ frontend/package.json | 4 + 4 files changed, 402 insertions(+) create mode 100755 frontend/.husky/pre-commit create mode 100644 frontend/.lintstagedrc diff --git a/frontend/.husky/pre-commit b/frontend/.husky/pre-commit new file mode 100755 index 00000000..98737d4f --- /dev/null +++ b/frontend/.husky/pre-commit @@ -0,0 +1,3 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" +cd ./frontend && npx lint-staged diff --git a/frontend/.lintstagedrc b/frontend/.lintstagedrc new file mode 100644 index 00000000..45d0535f --- /dev/null +++ b/frontend/.lintstagedrc @@ -0,0 +1,4 @@ +{ + "*.{html,ts}": ["ng-lint-staged lint --fix --"], + "*.{css,html,js,json,ts,yaml,yml}": ["npx prettier --write --"] +} diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ee12266f..54b932d8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3987,6 +3987,12 @@ "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", "dev": true }, + "astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "dev": true + }, "async": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", @@ -4573,6 +4579,50 @@ "integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==", "dev": true }, + "cli-truncate": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-3.1.0.tgz", + "integrity": "sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==", + "dev": true, + "requires": { + "slice-ansi": "^5.0.0", + "string-width": "^5.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true + }, + "emoji-regex": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true + }, + "string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, + "requires": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + } + }, + "strip-ansi": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz", + "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==", + "dev": true, + "requires": { + "ansi-regex": "^6.0.1" + } + } + } + }, "cli-width": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz", @@ -5498,6 +5548,12 @@ "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz", "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug==" }, + "eastasianwidth": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "dev": true + }, "ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", @@ -7088,6 +7144,12 @@ "ms": "^2.0.0" } }, + "husky": { + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz", + "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", + "dev": true + }, "iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -8207,12 +8269,239 @@ "immediate": "~3.0.5" } }, + "lilconfig": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", + "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", + "dev": true + }, "lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "lint-staged": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.2.0.tgz", + "integrity": "sha512-GbyK5iWinax5Dfw5obm2g2ccUiZXNGtAS4mCbJ0Lv4rq6iEtfBSjOYdcbOtAIFtM114t0vdpViDDetjVTSd8Vw==", + "dev": true, + "requires": { + "chalk": "5.2.0", + "cli-truncate": "^3.1.0", + "commander": "^10.0.0", + "debug": "^4.3.4", + "execa": "^7.0.0", + "lilconfig": "2.1.0", + "listr2": "^5.0.7", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "object-inspect": "^1.12.3", + "pidtree": "^0.6.0", + "string-argv": "^0.3.1", + "yaml": "^2.2.1" + }, + "dependencies": { + "chalk": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz", + "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==", + "dev": true + }, + "commander": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.0.tgz", + "integrity": "sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==", + "dev": true + }, + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "requires": { + "ms": "2.1.2" + } + }, + "execa": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-7.1.1.tgz", + "integrity": "sha512-wH0eMf/UXckdUYnO21+HDztteVv05rq2GXksxT4fCGeHkBhw1DROXh40wcjMcRqDOWE7iPJ4n3M7e2+YFP+76Q==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.3", + "get-stream": "^6.0.1", + "human-signals": "^4.3.0", + "is-stream": "^3.0.0", + "merge-stream": "^2.0.0", + "npm-run-path": "^5.1.0", + "onetime": "^6.0.0", + "signal-exit": "^3.0.7", + "strip-final-newline": "^3.0.0" + } + }, + "human-signals": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz", + "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==", + "dev": true + }, + "is-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz", + "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==", + "dev": true + }, + "micromatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", + "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "dev": true, + "requires": { + "braces": "^3.0.2", + "picomatch": "^2.3.1" + } + }, + "mimic-fn": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", + "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==", + "dev": true + }, + "npm-run-path": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", + "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==", + "dev": true, + "requires": { + "path-key": "^4.0.0" + } + }, + "object-inspect": { + "version": "1.12.3", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz", + "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==", + "dev": true + }, + "onetime": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz", + "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==", + "dev": true, + "requires": { + "mimic-fn": "^4.0.0" + } + }, + "path-key": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz", + "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==", + "dev": true + }, + "picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true + }, + "signal-exit": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", + "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", + "dev": true + }, + "strip-final-newline": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz", + "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==", + "dev": true + }, + "yaml": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz", + "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==", + "dev": true + } + } + }, + "listr2": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/listr2/-/listr2-5.0.8.tgz", + "integrity": "sha512-mC73LitKHj9w6v30nLNGPetZIlfpUniNSsxxrbaPcWOjDb92SHPzJPi/t+v1YC/lxKz/AJ9egOjww0qUuFxBpA==", + "dev": true, + "requires": { + "cli-truncate": "^2.1.0", + "colorette": "^2.0.19", + "log-update": "^4.0.0", + "p-map": "^4.0.0", + "rfdc": "^1.3.0", + "rxjs": "^7.8.0", + "through": "^2.3.8", + "wrap-ansi": "^7.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "cli-truncate": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz", + "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==", + "dev": true, + "requires": { + "slice-ansi": "^3.0.0", + "string-width": "^4.2.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "colorette": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz", + "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==", + "dev": true + }, + "rxjs": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz", + "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==", + "dev": true, + "requires": { + "tslib": "^2.1.0" + } + }, + "slice-ansi": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz", + "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==", + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + } + } + } + }, "loader-runner": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz", @@ -8312,6 +8601,66 @@ } } }, + "log-update": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz", + "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==", + "dev": true, + "requires": { + "ansi-escapes": "^4.3.0", + "cli-cursor": "^3.1.0", + "slice-ansi": "^4.0.0", + "wrap-ansi": "^6.2.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "slice-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + } + }, + "wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + } + } + } + }, "log4js": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.3.0.tgz", @@ -8681,6 +9030,12 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "ng-lint-staged": { + "version": "12.0.4", + "resolved": "https://registry.npmjs.org/ng-lint-staged/-/ng-lint-staged-12.0.4.tgz", + "integrity": "sha512-h2XVNEu2fWLSBDEuPB3I2kRd4M85XulRf4Vcei9JQIUe435MwtKJBx+sEJ5IRPhEqb2551yaDCgLhto7bwCejA==", + "dev": true + }, "ng-recaptcha": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/ng-recaptcha/-/ng-recaptcha-9.0.0.tgz", @@ -9359,6 +9714,12 @@ "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==", "dev": true }, + "pidtree": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz", + "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==", + "dev": true + }, "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", @@ -11756,6 +12117,30 @@ "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", "dev": true }, + "slice-ansi": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz", + "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==", + "dev": true, + "requires": { + "ansi-styles": "^6.0.0", + "is-fullwidth-code-point": "^4.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true + }, + "is-fullwidth-code-point": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz", + "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==", + "dev": true + } + } + }, "smart-buffer": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", @@ -11976,6 +12361,12 @@ } } }, + "string-argv": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz", + "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==", + "dev": true + }, "string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 2fa2b0f4..d792d815 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -2,6 +2,7 @@ "name": "blueprintnotincluded", "version": "0.0.0", "scripts": { + "prepare": "cd ../ && husky install ./frontend/.husky", "ng": "ng", "start": "ng serve", "start:zh-Hans": "ng serve --configuration=zh-Hans", @@ -64,6 +65,7 @@ "@typescript-eslint/parser": "5.27.1", "eslint": "^8.17.0", "eslint-config-prettier": "^8.8.0", + "husky": "^8.0.3", "jasmine-core": "^3.10.1", "jasmine-spec-reporter": "^7.0.0", "karma": "^6.3.9", @@ -71,6 +73,8 @@ "karma-coverage-istanbul-reporter": "^3.0.3", "karma-jasmine": "^4.0.1", "karma-jasmine-html-reporter": "^1.7.0", + "lint-staged": "^13.2.0", + "ng-lint-staged": "^12.0.4", "ngx-i18nsupport": "^0.17.1", "prettier": "^2.8.6", "protractor": "~7.0.0", From a6769c1c58ce4e58117b6183b7d440e8983f16a1 Mon Sep 17 00:00:00 2001 From: Kevin Attfield Date: Tue, 21 Mar 2023 22:18:36 -0700 Subject: [PATCH 3/5] Prettier --fix . --- frontend/.angulardoc.json | 2 +- frontend/.eslintrc.json | 22 +- frontend/README.md | 2 + frontend/angular.json | 35 +- frontend/e2e/protractor.conf.js | 26 +- frontend/e2e/src/app.e2e-spec.ts | 18 +- frontend/e2e/src/app.po.ts | 6 +- frontend/e2e/tsconfig.json | 6 +- frontend/karma.conf.js | 28 +- frontend/proxy.conf.json | 2 +- frontend/src/app/app-routing.module.ts | 28 +- frontend/src/app/app.component.html | 3 +- frontend/src/app/app.component.spec.ts | 26 +- frontend/src/app/app.component.ts | 10 +- frontend/src/app/app.module.ts | 29 +- .../src/app/module-blueprint/common/params.ts | 7 +- .../app/module-blueprint/common/save-info.ts | 5 +- .../common/tools/build-tool.ts | 186 ++-- .../common/tools/element-report.ts | 38 +- .../common/tools/same-item-collection.ts | 41 +- .../common/tools/select-tool.ts | 179 ++-- .../app/module-blueprint/common/tools/tool.ts | 18 +- .../component-blueprint-parent.component.css | 6 +- .../component-blueprint-parent.component.html | 44 +- ...mponent-blueprint-parent.component.spec.ts | 13 +- .../component-blueprint-parent.component.ts | 381 ++++--- .../component-canvas.component.css | 2 +- .../component-canvas.component.html | 24 +- .../component-canvas.component.spec.ts | 13 +- .../component-canvas.component.ts | 592 ++++++----- .../component-menu.component.css | 2 +- .../component-menu.component.html | 70 +- .../component-menu.component.spec.ts | 13 +- .../component-menu.component.ts | 416 ++++++-- .../component-save-dialog.component.css | 4 +- .../component-save-dialog.component.html | 77 +- .../component-save-dialog.component.spec.ts | 13 +- .../component-save-dialog.component.ts | 100 +- .../dialog-about/dialog-about.component.css | 17 +- .../dialog-about/dialog-about.component.html | 82 +- .../dialog-about.component.spec.ts | 13 +- .../dialog-about/dialog-about.component.ts | 9 +- .../dialog-browse/dialog-browse.component.css | 2 +- .../dialog-browse.component.html | 147 ++- .../dialog-browse.component.spec.ts | 13 +- .../dialog-browse/dialog-browse.component.ts | 135 ++- .../dialog-export-images.component.css | 7 +- .../dialog-export-images.component.html | 68 +- .../dialog-export-images.component.spec.ts | 13 +- .../dialog-export-images.component.ts | 88 +- .../dialog-share-url.component.css | 2 +- .../dialog-share-url.component.html | 55 +- .../dialog-share-url.component.spec.ts | 13 +- .../dialog-share-url.component.ts | 28 +- .../like-widget/like-widget.component.html | 23 +- .../like-widget/like-widget.component.spec.ts | 13 +- .../like-widget/like-widget.component.ts | 20 +- .../build-tool/build-tool.component.html | 111 ++- .../build-tool/build-tool.component.spec.ts | 13 +- .../build-tool/build-tool.component.ts | 108 +- .../buildable-element-picker.component.css | 2 +- .../buildable-element-picker.component.html | 63 +- ...buildable-element-picker.component.spec.ts | 13 +- .../buildable-element-picker.component.ts | 39 +- .../cell-element-picker.component.css | 2 +- .../cell-element-picker.component.html | 52 +- .../cell-element-picker.component.spec.ts | 13 +- .../cell-element-picker.component.ts | 42 +- .../element-icon/element-icon.component.html | 130 ++- .../element-icon.component.spec.ts | 13 +- .../element-icon/element-icon.component.ts | 35 +- .../element-report-tool.component.css | 17 +- .../element-report-tool.component.html | 103 +- .../element-report-tool.component.spec.ts | 13 +- .../element-report-tool.component.ts | 23 +- .../info-input-icon.component.html | 27 +- .../info-input-icon.component.spec.ts | 13 +- .../info-input-icon.component.ts | 9 +- .../info-input/info-input.component.css | 2 +- .../info-input/info-input.component.html | 52 +- .../info-input/info-input.component.spec.ts | 13 +- .../info-input/info-input.component.ts | 55 +- .../item-collection-info.component.css | 6 +- .../item-collection-info.component.html | 89 +- .../item-collection-info.component.spec.ts | 13 +- .../item-collection-info.component.ts | 75 +- .../pipe-content/pipe-content.component.css | 4 +- .../pipe-content/pipe-content.component.html | 29 +- .../pipe-content.component.spec.ts | 13 +- .../pipe-content/pipe-content.component.ts | 25 +- .../selection-tool.component.css | 4 +- .../selection-tool.component.html | 41 +- .../selection-tool.component.spec.ts | 13 +- .../selection-tool.component.ts | 43 +- .../temperature-picker.component.css | 4 +- .../temperature-picker.component.html | 83 +- .../temperature-picker.component.spec.ts | 13 +- .../temperature-picker.component.ts | 48 +- .../temperature-scale.component.css | 17 +- .../temperature-scale.component.html | 18 +- .../temperature-scale.component.spec.ts | 13 +- .../temperature-scale.component.ts | 39 +- .../active-range-screen.component.css | 2 +- .../active-range-screen.component.html | 19 +- .../active-range-screen.component.spec.ts | 13 +- .../active-range-screen.component.ts | 40 +- .../bit-selection-screen.component.css | 2 +- .../bit-selection-screen.component.html | 15 +- .../bit-selection-screen.component.spec.ts | 13 +- .../bit-selection-screen.component.ts | 30 +- .../single-slider-screen.component.css | 2 +- .../single-slider-screen.component.html | 11 +- .../single-slider-screen.component.spec.ts | 13 +- .../single-slider-screen.component.ts | 44 +- .../threshold-switch-screen.component.css | 2 +- .../threshold-switch-screen.component.html | 27 +- .../threshold-switch-screen.component.spec.ts | 13 +- .../threshold-switch-screen.component.ts | 71 +- .../ui-screen-container.component.html | 54 +- .../ui-screen-container.component.spec.ts | 13 +- .../ui-screen-container.component.ts | 19 +- .../login-dialog/login-dialog.component.html | 37 +- .../login-dialog.component.spec.ts | 13 +- .../login-dialog/login-dialog.component.ts | 93 +- .../login-form/login-form.component.css | 4 +- .../login-form/login-form.component.html | 37 +- .../login-form/login-form.component.spec.ts | 13 +- .../login-form/login-form.component.ts | 82 +- .../register-form/register-form.component.css | 4 +- .../register-form.component.html | 81 +- .../register-form.component.spec.ts | 13 +- .../register-form/register-form.component.ts | 104 +- .../blueprint-name-validation.directive.ts | 36 +- .../directives/custom-event-manager.ts | 32 +- .../directives/draganddrop.directive.ts | 63 +- .../directives/keyboard.directive.ts | 7 +- .../directives/mousewheel.directive.ts | 20 +- .../username-validation.directive.ts | 28 +- .../module-blueprint/drawing/draw-mini-ui.ts | 73 +- .../app/module-blueprint/drawing/draw-pixi.ts | 115 ++- .../module-blueprint.module.spec.ts | 6 +- .../module-blueprint.module.ts | 251 +++-- .../pipes/add-mass-unit.pipe.spec.ts | 6 +- .../pipes/add-mass-unit.pipe.ts | 6 +- .../pipes/filter-element-gas.pipe.spec.ts | 6 +- .../pipes/filter-element-gas.pipe.ts | 12 +- .../pipes/filter-element-liquid.pipe.spec.ts | 6 +- .../pipes/filter-element-liquid.pipe.ts | 12 +- .../pipes/filter-element-solid.pipe.spec.ts | 6 +- .../pipes/filter-element-solid.pipe.ts | 12 +- .../services/authentification-service.ts | 38 +- .../services/blueprint-service.ts | 208 ++-- .../services/check-duplicate-service.ts | 51 +- .../services/game-string-service.ts | 99 +- .../module-blueprint/services/tool-service.ts | 68 +- frontend/src/app/primeng-changes/menubar.js | 516 ++++++---- frontend/src/app/primeng-changes/slider.d.ts | 155 +-- frontend/src/app/primeng-changes/slider.js | 926 ++++++++++-------- frontend/src/environments/environment.prod.ts | 2 +- frontend/src/environments/environment.ts | 2 +- frontend/src/index.html | 26 +- frontend/src/main.ts | 18 +- frontend/src/polyfills.ts | 9 +- frontend/src/styles.css | 36 +- frontend/src/test.ts | 10 +- frontend/tsconfig.app.json | 7 +- frontend/tsconfig.base.json | 13 +- frontend/tsconfig.json | 2 +- frontend/tsconfig.spec.json | 15 +- 169 files changed, 5361 insertions(+), 3209 deletions(-) diff --git a/frontend/.angulardoc.json b/frontend/.angulardoc.json index edd6a4cd..33c515c7 100644 --- a/frontend/.angulardoc.json +++ b/frontend/.angulardoc.json @@ -1,4 +1,4 @@ { "repoId": "1e8d74c7-9142-4d19-944c-af5f918e33fa", "lastSync": 0 -} \ No newline at end of file +} diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index f0326dbc..f8bd53e3 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -1,18 +1,11 @@ { "root": true, - "ignorePatterns": [ - "projects/**/*" - ], + "ignorePatterns": ["projects/**/*"], "overrides": [ { - "files": [ - "*.ts" - ], + "files": ["*.ts"], "parserOptions": { - "project": [ - "tsconfig.json", - "e2e/tsconfig.json" - ], + "project": ["tsconfig.json", "e2e/tsconfig.json"], "createDefaultProgram": true }, "extends": [ @@ -39,13 +32,8 @@ } }, { - "files": [ - "*.html" - ], - "extends": [ - "plugin:@angular-eslint/template/recommended", - "prettier" - ], + "files": ["*.html"], + "extends": ["plugin:@angular-eslint/template/recommended", "prettier"], "rules": {} } ] diff --git a/frontend/README.md b/frontend/README.md index a5146bc0..f7fa6f0f 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -23,7 +23,9 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github. Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). ## Localization + If you want to contribute translations to Blueprintnotincluded, you can edit files of your language in [i18n](./src/i18n). You can use Poedit to edit those XLF files. If the file for your language is not there, please create an issus. Alternatively you can add it by yourself in the following steps: + 1. add your language in the `languages` field of [xliffmerge.json](./xliffmerge.json) 2. Run `npm run extract-i18n` 3. Add your language in [angular.json](./angular.json)(`projects.blueprintnotincluded.i18n.locales`) diff --git a/frontend/angular.json b/frontend/angular.json index 358fc4c1..d888c8fa 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -27,10 +27,7 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": true, - "assets": [ - "src/favicon_blueprint_oxygen-32x32.png", - "src/assets" - ], + "assets": ["src/favicon_blueprint_oxygen-32x32.png", "src/assets"], "styles": [ "src/styles.css", "node_modules/primeicons/primeicons.css", @@ -39,9 +36,7 @@ "node_modules/primeflex/primeflex.css", "node_modules/@fortawesome/fontawesome-free/css/all.min.css" ], - "scripts": [ - "node_modules/pixi.js-legacy/dist/pixi-legacy.min.js" - ] + "scripts": ["node_modules/pixi.js-legacy/dist/pixi-legacy.min.js"] }, "configurations": { "production": { @@ -77,21 +72,15 @@ "optimization": false }, "zh-Hans": { - "localize": [ - "zh-Hans" - ], + "localize": ["zh-Hans"], "optimization": false }, "ru": { - "localize": [ - "ru" - ], + "localize": ["ru"], "optimization": false }, "ko": { - "localize": [ - "ko" - ], + "localize": ["ko"], "optimization": false } } @@ -130,10 +119,7 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon_blueprint_oxygen.png", - "src/assets" - ], + "assets": ["src/favicon_blueprint_oxygen.png", "src/assets"], "styles": [ "src/styles.css", "node_modules/primeicons/primeicons.css", @@ -142,18 +128,13 @@ "node_modules/primeflex/primeflex.css", "node_modules/@fortawesome/fontawesome-free/css/all.min.css" ], - "scripts": [ - "node_modules/pixi.js-legacy/dist/pixi-legacy.min.js" - ] + "scripts": ["node_modules/pixi.js-legacy/dist/pixi-legacy.min.js"] } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { - "lintFilePatterns": [ - "src/**/*.ts", - "src/**/*.html" - ] + "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] } }, "e2e": { diff --git a/frontend/e2e/protractor.conf.js b/frontend/e2e/protractor.conf.js index 73e4e680..fab62960 100644 --- a/frontend/e2e/protractor.conf.js +++ b/frontend/e2e/protractor.conf.js @@ -2,31 +2,31 @@ // Protractor configuration file, see link for more information // https://github.com/angular/protractor/blob/master/lib/config.ts -const { SpecReporter } = require('jasmine-spec-reporter'); +const { SpecReporter } = require("jasmine-spec-reporter"); /** * @type { import("protractor").Config } */ exports.config = { allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], + specs: ["./src/**/*.e2e-spec.ts"], capabilities: { - 'browserName': 'chrome' + browserName: "chrome", }, directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', + baseUrl: "http://localhost:4200/", + framework: "jasmine", jasmineNodeOpts: { showColors: true, defaultTimeoutInterval: 30000, - print: function() {} + print: function () {}, }, onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json') + require("ts-node").register({ + project: require("path").join(__dirname, "./tsconfig.json"), }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); - } -}; \ No newline at end of file + jasmine + .getEnv() + .addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + }, +}; diff --git a/frontend/e2e/src/app.e2e-spec.ts b/frontend/e2e/src/app.e2e-spec.ts index b479ad2a..6c296426 100644 --- a/frontend/e2e/src/app.e2e-spec.ts +++ b/frontend/e2e/src/app.e2e-spec.ts @@ -1,23 +1,25 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; +import { AppPage } from "./app.po"; +import { browser, logging } from "protractor"; -describe('workspace-project App', () => { +describe("workspace-project App", () => { let page: AppPage; beforeEach(() => { page = new AppPage(); }); - it('should display welcome message', () => { + it("should display welcome message", () => { page.navigateTo(); - expect(page.getTitleText()).toEqual('blueprintnotincluded app is running!'); + expect(page.getTitleText()).toEqual("blueprintnotincluded app is running!"); }); afterEach(async () => { // Assert that there are no errors emitted from the browser const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain(jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry)); + expect(logs).not.toContain( + jasmine.objectContaining({ + level: logging.Level.SEVERE, + } as logging.Entry) + ); }); }); diff --git a/frontend/e2e/src/app.po.ts b/frontend/e2e/src/app.po.ts index b8498c26..d62dabbb 100644 --- a/frontend/e2e/src/app.po.ts +++ b/frontend/e2e/src/app.po.ts @@ -1,4 +1,4 @@ -import { browser, by, element } from 'protractor'; +import { browser, by, element } from "protractor"; export class AppPage { navigateTo() { @@ -6,6 +6,8 @@ export class AppPage { } getTitleText() { - return element(by.css('app-root .content span')).getText() as Promise; + return element( + by.css("app-root .content span") + ).getText() as Promise; } } diff --git a/frontend/e2e/tsconfig.json b/frontend/e2e/tsconfig.json index 6b87cc42..a2c29e26 100644 --- a/frontend/e2e/tsconfig.json +++ b/frontend/e2e/tsconfig.json @@ -4,10 +4,6 @@ "outDir": "../out-tsc/e2e", "module": "commonjs", "target": "es2018", - "types": [ - "jasmine", - "jasminewd2", - "node" - ] + "types": ["jasmine", "jasminewd2", "node"] } } diff --git a/frontend/karma.conf.js b/frontend/karma.conf.js index d76f956c..49dbf0f7 100644 --- a/frontend/karma.conf.js +++ b/frontend/karma.conf.js @@ -3,30 +3,30 @@ module.exports = function (config) { config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], + basePath: "", + frameworks: ["jasmine", "@angular-devkit/build-angular"], plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') + require("karma-jasmine"), + require("karma-chrome-launcher"), + require("karma-jasmine-html-reporter"), + require("karma-coverage-istanbul-reporter"), + require("@angular-devkit/build-angular/plugins/karma"), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { - dir: require('path').join(__dirname, './coverage/blueprintnotincluded'), - reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true + dir: require("path").join(__dirname, "./coverage/blueprintnotincluded"), + reports: ["html", "lcovonly", "text-summary"], + fixWebpackSourcePaths: true, }, - reporters: ['progress', 'kjhtml'], + reporters: ["progress", "kjhtml"], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, - browsers: ['Chrome'], + browsers: ["Chrome"], singleRun: false, - restartOnFileChange: true + restartOnFileChange: true, }); }; diff --git a/frontend/proxy.conf.json b/frontend/proxy.conf.json index 46c960e1..890ecb35 100644 --- a/frontend/proxy.conf.json +++ b/frontend/proxy.conf.json @@ -5,4 +5,4 @@ "logLevel": "debug", "changeOrigin": true } -} \ No newline at end of file +} diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index db2113f4..2be4aa60 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -1,20 +1,22 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { ComponentBlueprintParentComponent } from './module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component'; - +import { NgModule } from "@angular/core"; +import { Routes, RouterModule } from "@angular/router"; +import { ComponentBlueprintParentComponent } from "./module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component"; const routes: Routes = [ - { path: '', component: ComponentBlueprintParentComponent }, - { path: 'b/:id', component: ComponentBlueprintParentComponent }, - { path: 'b/:id/hideui/:width/:height', component: ComponentBlueprintParentComponent }, - { path: 'openfromurl/:url', component: ComponentBlueprintParentComponent }, - { path: 'browse', component: ComponentBlueprintParentComponent }, - { path: 'about', component: ComponentBlueprintParentComponent }, - { path: '', redirectTo: '/', pathMatch: 'prefix' }, + { path: "", component: ComponentBlueprintParentComponent }, + { path: "b/:id", component: ComponentBlueprintParentComponent }, + { + path: "b/:id/hideui/:width/:height", + component: ComponentBlueprintParentComponent, + }, + { path: "openfromurl/:url", component: ComponentBlueprintParentComponent }, + { path: "browse", component: ComponentBlueprintParentComponent }, + { path: "about", component: ComponentBlueprintParentComponent }, + { path: "", redirectTo: "/", pathMatch: "prefix" }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index b1be8d5f..568e073c 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,5 +1,4 @@ - - \ No newline at end of file + diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts index 50446d0b..f62b5952 100644 --- a/frontend/src/app/app.component.spec.ts +++ b/frontend/src/app/app.component.spec.ts @@ -1,20 +1,16 @@ -import { TestBed, async } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; +import { TestBed, async } from "@angular/core/testing"; +import { RouterTestingModule } from "@angular/router/testing"; +import { AppComponent } from "./app.component"; -describe('AppComponent', () => { +describe("AppComponent", () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent - ], + imports: [RouterTestingModule], + declarations: [AppComponent], }).compileComponents(); })); - it('should create the app', () => { + it("should create the app", () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); @@ -23,13 +19,15 @@ describe('AppComponent', () => { it(`should have as title 'blueprintnotincluded'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('blueprintnotincluded'); + expect(app.title).toEqual("blueprintnotincluded"); }); - it('should render title', () => { + it("should render title", () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('blueprintnotincluded app is running!'); + expect(compiled.querySelector(".content span").textContent).toContain( + "blueprintnotincluded app is running!" + ); }); }); diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 08b66080..0748f556 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,11 +1,11 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild } from "@angular/core"; declare var PIXI: any; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.css"], }) export class AppComponent { - title = 'blueprintnotincluded'; + title = "blueprintnotincluded"; } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 780697ce..b6b840ce 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,27 +1,28 @@ -import { BrowserModule, EventManager } from '@angular/platform-browser'; -import { NgModule, ErrorHandler } from '@angular/core'; +import { BrowserModule, EventManager } from "@angular/platform-browser"; +import { NgModule, ErrorHandler } from "@angular/core"; import { Router } from "@angular/router"; -import { HttpClientModule } from '@angular/common/http'; -import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-google-analytics'; +import { HttpClientModule } from "@angular/common/http"; +import { + NgxGoogleAnalyticsModule, + NgxGoogleAnalyticsRouterModule, +} from "ngx-google-analytics"; import * as Sentry from "@sentry/angular-ivy"; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; +import { AppRoutingModule } from "./app-routing.module"; +import { AppComponent } from "./app.component"; -import { ModuleBlueprintModule } from './module-blueprint/module-blueprint.module'; -import { CustomEventManager } from './module-blueprint/directives/custom-event-manager'; +import { ModuleBlueprintModule } from "./module-blueprint/module-blueprint.module"; +import { CustomEventManager } from "./module-blueprint/directives/custom-event-manager"; @NgModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], imports: [ BrowserModule, NgxGoogleAnalyticsModule.forRoot(process.env.NG_APP_GA_TRACKING_CODE), NgxGoogleAnalyticsRouterModule.forRoot(), ModuleBlueprintModule, HttpClientModule, - AppRoutingModule + AppRoutingModule, ], providers: [ { provide: EventManager, useClass: CustomEventManager }, @@ -36,8 +37,8 @@ import { CustomEventManager } from './module-blueprint/directives/custom-event-m deps: [Router], }, ], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) export class AppModule { - constructor(trace: Sentry.TraceService) { } + constructor(trace: Sentry.TraceService) {} } diff --git a/frontend/src/app/module-blueprint/common/params.ts b/frontend/src/app/module-blueprint/common/params.ts index d1026c30..b06843b9 100644 --- a/frontend/src/app/module-blueprint/common/params.ts +++ b/frontend/src/app/module-blueprint/common/params.ts @@ -1,5 +1,4 @@ -export class BlueprintParams -{ +export class BlueprintParams { //static apiUrl = 'http://blueprintnotincluded.com/' - static apiUrl = 'http://localhost:3000/' -} \ No newline at end of file + static apiUrl = "http://localhost:3000/"; +} diff --git a/frontend/src/app/module-blueprint/common/save-info.ts b/frontend/src/app/module-blueprint/common/save-info.ts index 1cef8107..4de8cc9c 100644 --- a/frontend/src/app/module-blueprint/common/save-info.ts +++ b/frontend/src/app/module-blueprint/common/save-info.ts @@ -1,7 +1,6 @@ -import { Blueprint } from "../../../../../lib/index" +import { Blueprint } from "../../../../../lib/index"; -export class SaveInfo -{ +export class SaveInfo { username: string; blueprintName: string; blueprint: Blueprint; diff --git a/frontend/src/app/module-blueprint/common/tools/build-tool.ts b/frontend/src/app/module-blueprint/common/tools/build-tool.ts index 192e33b6..d6937455 100644 --- a/frontend/src/app/module-blueprint/common/tools/build-tool.ts +++ b/frontend/src/app/module-blueprint/common/tools/build-tool.ts @@ -1,18 +1,31 @@ -import { BlueprintService } from '../../services/blueprint-service'; -import { BlueprintHelpers, BlueprintItemWire, BlueprintItem, CameraService, DrawHelpers, Vector2, PixiUtil, BuildCandidateResult, BuildLocationRule, ConnectionHelper } from "../../../../../../lib/index"; -import { Injectable, ApplicationRef } from '@angular/core'; -import { ITool, IChangeTool, ToolType } from './tool'; -import { DrawPixi } from '../../drawing/draw-pixi'; +import { BlueprintService } from "../../services/blueprint-service"; +import { + BlueprintHelpers, + BlueprintItemWire, + BlueprintItem, + CameraService, + DrawHelpers, + Vector2, + PixiUtil, + BuildCandidateResult, + BuildLocationRule, + ConnectionHelper, +} from "../../../../../../lib/index"; +import { Injectable, ApplicationRef } from "@angular/core"; +import { ITool, IChangeTool, ToolType } from "./tool"; +import { DrawPixi } from "../../drawing/draw-pixi"; @Injectable() export class BuildTool implements ITool { - templateItemToBuild: BlueprintItem; private observers: IObsBuildItemChanged[]; parent: IChangeTool; - constructor(private blueprintService: BlueprintService, private appRef: ApplicationRef) { + constructor( + private blueprintService: BlueprintService, + private appRef: ApplicationRef + ) { this.observers = []; } @@ -28,50 +41,87 @@ export class BuildTool implements ITool { } private updateBuildCandidateResult() { - let previousCanBuild = this.templateItemToBuild.buildCandidateResult.canBuild.valueOf(); - let previousCantBuildReason = this.templateItemToBuild.buildCandidateResult.cantBuildReason.valueOf(); + let previousCanBuild = + this.templateItemToBuild.buildCandidateResult.canBuild.valueOf(); + let previousCantBuildReason = + this.templateItemToBuild.buildCandidateResult.cantBuildReason.valueOf(); this.templateItemToBuild.buildCandidateResult.canBuild = true; - this.templateItemToBuild.buildCandidateResult.cantBuildReason = ''; + this.templateItemToBuild.buildCandidateResult.cantBuildReason = ""; // First : iterate all the buildings on each tile of this building - let isBridge = this.templateItemToBuild.oniItem.buildLocationRule == BuildLocationRule.Conduit || this.templateItemToBuild.oniItem.buildLocationRule == BuildLocationRule.WireBridge || this.templateItemToBuild.oniItem.buildLocationRule == BuildLocationRule.LogicBridge; + let isBridge = + this.templateItemToBuild.oniItem.buildLocationRule == + BuildLocationRule.Conduit || + this.templateItemToBuild.oniItem.buildLocationRule == + BuildLocationRule.WireBridge || + this.templateItemToBuild.oniItem.buildLocationRule == + BuildLocationRule.LogicBridge; for (let tileIndex of this.templateItemToBuild.tileIndexes) { - for (let templateItem of this.blueprintService.blueprint.getBlueprintItemsAtIndex(tileIndex)) { + for (let templateItem of this.blueprintService.blueprint.getBlueprintItemsAtIndex( + tileIndex + )) { // If at least one of them is in the same object layer, we can't build // We skip this step for bridges, who only care about their utility ports - if (!isBridge && this.templateItemToBuild.oniItem.objectLayer == templateItem.oniItem.objectLayer) { + if ( + !isBridge && + this.templateItemToBuild.oniItem.objectLayer == + templateItem.oniItem.objectLayer + ) { this.templateItemToBuild.buildCandidateResult.canBuild = false; this.templateItemToBuild.buildCandidateResult.cantBuildReason = $localize`Can\'t build here : ${templateItem.oniItem.name} is in the way`; } } } - for (let connectionToBuild of this.templateItemToBuild.oniItem.utilityConnections) { + for (let connectionToBuild of this.templateItemToBuild.oniItem + .utilityConnections) { // We rotate and scale the offset, and add to the position - let connectionToBuildPosition = Vector2.cloneNullToZero(connectionToBuild.offset); - connectionToBuildPosition = DrawHelpers.rotateVector2(connectionToBuildPosition, Vector2.Zero, this.templateItemToBuild.rotation); - connectionToBuildPosition = DrawHelpers.scaleVector2(connectionToBuildPosition, Vector2.Zero, this.templateItemToBuild.scale); + let connectionToBuildPosition = Vector2.cloneNullToZero( + connectionToBuild.offset + ); + connectionToBuildPosition = DrawHelpers.rotateVector2( + connectionToBuildPosition, + Vector2.Zero, + this.templateItemToBuild.rotation + ); + connectionToBuildPosition = DrawHelpers.scaleVector2( + connectionToBuildPosition, + Vector2.Zero, + this.templateItemToBuild.scale + ); connectionToBuildPosition.x += this.templateItemToBuild.position.x; connectionToBuildPosition.y += this.templateItemToBuild.position.y; - let utilitiesAtIndex = this.blueprintService.blueprint.getUtilityConnectionsAtIndex(DrawHelpers.getTileIndex(connectionToBuildPosition)); + let utilitiesAtIndex = + this.blueprintService.blueprint.getUtilityConnectionsAtIndex( + DrawHelpers.getTileIndex(connectionToBuildPosition) + ); for (let trackedUtilities of utilitiesAtIndex) { - - if (ConnectionHelper.getConnectionOverlay(connectionToBuild.type) == ConnectionHelper.getConnectionOverlay(trackedUtilities.utilityConnection.type)) { + if ( + ConnectionHelper.getConnectionOverlay(connectionToBuild.type) == + ConnectionHelper.getConnectionOverlay( + trackedUtilities.utilityConnection.type + ) + ) { this.templateItemToBuild.buildCandidateResult.canBuild = false; - const connection = ConnectionHelper.getConnectionName(trackedUtilities.utilityConnection.type); + const connection = ConnectionHelper.getConnectionName( + trackedUtilities.utilityConnection.type + ); const itemName = trackedUtilities.blueprintItem.oniItem.name; this.templateItemToBuild.buildCandidateResult.cantBuildReason = $localize`Can\'t build here : The ${connection} from ${itemName} is in the way`; } } } - if (previousCanBuild != this.templateItemToBuild.buildCandidateResult.canBuild || - previousCantBuildReason != this.templateItemToBuild.buildCandidateResult.cantBuildReason) { - + if ( + previousCanBuild != + this.templateItemToBuild.buildCandidateResult.canBuild || + previousCantBuildReason != + this.templateItemToBuild.buildCandidateResult.cantBuildReason + ) { // The mousemouse is outside the angular zone, so we have to force a full update here. this.appRef.tick(); } @@ -80,7 +130,11 @@ export class BuildTool implements ITool { build() { if (!this.templateItemToBuild.buildCandidateResult.canBuild) return; - let newItem = BlueprintHelpers.cloneBlueprintItem(this.templateItemToBuild, false, true); + let newItem = BlueprintHelpers.cloneBlueprintItem( + this.templateItemToBuild, + false, + true + ); newItem.prepareBoundingBox(); newItem.updateTileables(this.blueprintService.blueprint); @@ -91,10 +145,14 @@ export class BuildTool implements ITool { private connectAToB(a: BlueprintItemWire, b: BlueprintItemWire) { let bitMask = 0; - if (a.position.x == b.position.x + 1 && a.position.y == b.position.y) bitMask = 1; - else if (a.position.x == b.position.x - 1 && a.position.y == b.position.y) bitMask = 2; - else if (a.position.x == b.position.x && a.position.y == b.position.y - 1) bitMask = 4; - else if (a.position.x == b.position.x && a.position.y == b.position.y + 1) bitMask = 8; + if (a.position.x == b.position.x + 1 && a.position.y == b.position.y) + bitMask = 1; + else if (a.position.x == b.position.x - 1 && a.position.y == b.position.y) + bitMask = 2; + else if (a.position.x == b.position.x && a.position.y == b.position.y - 1) + bitMask = 4; + else if (a.position.x == b.position.x && a.position.y == b.position.y + 1) + bitMask = 8; a.connections = a.connections | bitMask; } @@ -122,10 +180,27 @@ export class BuildTool implements ITool { this.build(); if (this.templateItemToBuild.oniItem.isWire) { - let itemsPrevious = this.blueprintService.blueprint.getBlueprintItemsAt(tileStart).filter(i => i.oniItem.objectLayer == this.templateItemToBuild.oniItem.objectLayer); - let itemsCurrent = this.blueprintService.blueprint.getBlueprintItemsAt(tileStop).filter(i => i.oniItem.objectLayer == this.templateItemToBuild.oniItem.objectLayer); - - if (itemsPrevious != null && itemsPrevious.length > 0 && itemsCurrent != null && itemsCurrent.length > 0) { + let itemsPrevious = this.blueprintService.blueprint + .getBlueprintItemsAt(tileStart) + .filter( + (i) => + i.oniItem.objectLayer == + this.templateItemToBuild.oniItem.objectLayer + ); + let itemsCurrent = this.blueprintService.blueprint + .getBlueprintItemsAt(tileStop) + .filter( + (i) => + i.oniItem.objectLayer == + this.templateItemToBuild.oniItem.objectLayer + ); + + if ( + itemsPrevious != null && + itemsPrevious.length > 0 && + itemsCurrent != null && + itemsCurrent.length > 0 + ) { let itemPrevious = itemsPrevious[0] as BlueprintItemWire; let itemCurrent = itemsCurrent[0] as BlueprintItemWire; @@ -149,7 +224,8 @@ export class BuildTool implements ITool { } mouseOut() { - if (this.templateItemToBuild != null) this.templateItemToBuild.setInvisible(); + if (this.templateItemToBuild != null) + this.templateItemToBuild.setInvisible(); } leftClick(tile: Vector2) { @@ -169,15 +245,14 @@ export class BuildTool implements ITool { } drag(tileStart: Vector2, tileStop: Vector2) { - if (tileStart == null || tileStop == null) return; let tileStartInt = DrawHelpers.getIntegerTile(tileStart); let tileStopInt = DrawHelpers.getIntegerTile(tileStop); // Only drag if we are changing tiles - if (!tileStartInt.equals(tileStopInt)) this.dragStepByStep(tileStart, tileStop); - + if (!tileStartInt.equals(tileStopInt)) + this.dragStepByStep(tileStart, tileStop); } mouseDown(tile: Vector2) { @@ -186,23 +261,22 @@ export class BuildTool implements ITool { } dragStepByStep(tileStart: Vector2, tileStop: Vector2) { - - - //console.log('start') //console.log(tileStart); //console.log(tileStop); // This is the unit taxicab vector representing the general direction of movement let delta = new Vector2( - DrawHelpers.getFloorTile(tileStop).x - DrawHelpers.getFloorTile(tileStart).x, - DrawHelpers.getFloorTile(tileStop).y - DrawHelpers.getFloorTile(tileStart).y + DrawHelpers.getFloorTile(tileStop).x - + DrawHelpers.getFloorTile(tileStart).x, + DrawHelpers.getFloorTile(tileStop).y - + DrawHelpers.getFloorTile(tileStart).y ); delta = new Vector2( delta.x == 0 ? 0 : 1 * (delta.x / Math.abs(delta.x)), delta.y == 0 ? 0 : 1 * (delta.y / Math.abs(delta.y)) - ) + ); // Special cases : if tileStart or tileStop is an integer, we run into problems, so let's change that if (tileStart.x == Math.floor(tileStart.x)) tileStart.x -= delta.x * 0.005; @@ -233,13 +307,15 @@ export class BuildTool implements ITool { // nextTile is currentTile advanced by delta // and then floored of ceilingedto be closest to currentTile - let nextTile = new Vector2(currentTile.x + delta.x, currentTile.y + delta.y); + let nextTile = new Vector2( + currentTile.x + delta.x, + currentTile.y + delta.y + ); if (delta.x > 0) nextTile.x = Math.floor(nextTile.x); else if (delta.x < 0) nextTile.x = Math.ceil(nextTile.x); if (delta.y > 0) nextTile.y = Math.floor(nextTile.y); else if (delta.y < 0) nextTile.y = Math.ceil(nextTile.y); - //console.log('nextTile'); //console.log(nextTile); @@ -263,10 +339,12 @@ export class BuildTool implements ITool { //console.log(dp) let distX: number = 999; - if (delta.x != 0) distX = (new Vector2(dp.x, d.y * (dp.x / d.x))).lengthSquared; + if (delta.x != 0) + distX = new Vector2(dp.x, d.y * (dp.x / d.x)).lengthSquared; let distY: number = 999; - if (delta.y != 0) distY = (new Vector2(d.x * (dp.y / d.y), dp.y)).lengthSquared; + if (delta.y != 0) + distY = new Vector2(d.x * (dp.y / d.y), dp.y).lengthSquared; //console.log('dist') //console.log(new Vector2(distX, distY)) @@ -288,8 +366,7 @@ export class BuildTool implements ITool { currentTile.x += dp.x; currentTile.y += d.y * (dp.x / d.x); - } - else if (distX <= distY && distX < dLengthSquared) { + } else if (distX <= distY && distX < dLengthSquared) { //console.log('build'); currentTile.x += dp.x; currentTile.y += d.y * (dp.x / d.x); @@ -298,8 +375,7 @@ export class BuildTool implements ITool { this.buildAndConnect(startTile, newTile); startTile.x += delta.x; //console.log(startTile); - } - else if (distY < distX && distY < dLengthSquared) { + } else if (distY < distX && distY < dLengthSquared) { //console.log('build'); currentTile.x += d.x * (dp.y / d.y); currentTile.y += dp.y; @@ -308,17 +384,14 @@ export class BuildTool implements ITool { this.buildAndConnect(startTile, newTile); startTile.y += delta.y; //console.log(startTile); - } - else { + } else { //console.log('stop') advance = false; } i++; if (i > 999) throw new Error("The tile dragger was too long"); - } - } dragStop() { @@ -326,7 +399,7 @@ export class BuildTool implements ITool { } keyDown(keyCode: string) { - if (keyCode == 'o') { + if (keyCode == "o") { if (this.templateItemToBuild != null) { this.templateItemToBuild.nextOrientation(); this.updateBuildCandidateResult(); @@ -335,7 +408,6 @@ export class BuildTool implements ITool { } draw(drawPixi: DrawPixi, camera: CameraService) { - // TODO SOLID //if (this.canBuild()) this.templateItemToBuild.drawPart.tint = DrawHelpers.whiteColor; //else this.templateItemToBuild.drawPart.tint = 0xD40000; diff --git a/frontend/src/app/module-blueprint/common/tools/element-report.ts b/frontend/src/app/module-blueprint/common/tools/element-report.ts index 7949c833..606530fb 100644 --- a/frontend/src/app/module-blueprint/common/tools/element-report.ts +++ b/frontend/src/app/module-blueprint/common/tools/element-report.ts @@ -1,32 +1,48 @@ -import { BlueprintService } from '../../services/blueprint-service'; -import { Injectable } from '@angular/core'; -import { BlueprintItemElement, BlueprintItem, IObsBlueprintChange, DrawHelpers, BuildableElement } from '../../../../../../lib/index' +import { BlueprintService } from "../../services/blueprint-service"; +import { Injectable } from "@angular/core"; +import { + BlueprintItemElement, + BlueprintItem, + IObsBlueprintChange, + DrawHelpers, + BuildableElement, +} from "../../../../../../lib/index"; @Injectable() export class ElementReport implements IObsBlueprintChange { - data: ElementReportDataItem[]; constructor(private blueprintService: BlueprintService) { this.data = []; - this.blueprintService.blueprint.subscribeBlueprintChanged(this) + this.blueprintService.blueprint.subscribeBlueprintChanged(this); } updateElementReport() { this.data = []; this.blueprintService.blueprint.blueprintItems.map((item) => { - if (item.oniItem.isElement) - this.addElementToReport(item.buildableElements[0], (item as BlueprintItemElement).mass); + this.addElementToReport( + item.buildableElements[0], + (item as BlueprintItemElement).mass + ); else - for (let elementIndex = 0; elementIndex < item.oniItem.buildableElementsArray.length; elementIndex++) { - this.addElementToReport(item.buildableElements[elementIndex], item.oniItem.materialMass[elementIndex]) + for ( + let elementIndex = 0; + elementIndex < item.oniItem.buildableElementsArray.length; + elementIndex++ + ) { + this.addElementToReport( + item.buildableElements[elementIndex], + item.oniItem.materialMass[elementIndex] + ); } }); - this.data = this.data.sort((i1, i2) => { return i2.totalMass - i1.totalMass; }); + this.data = this.data.sort((i1, i2) => { + return i2.totalMass - i1.totalMass; + }); } private addElementToReport(buildableElement: BuildableElement, mass: number) { @@ -42,7 +58,7 @@ export class ElementReport implements IObsBlueprintChange { this.data.push({ buildableElement: buildableElement, colorString: DrawHelpers.colorToHex(buildableElement.color), - totalMass: mass + totalMass: mass, }); } } diff --git a/frontend/src/app/module-blueprint/common/tools/same-item-collection.ts b/frontend/src/app/module-blueprint/common/tools/same-item-collection.ts index 01e69219..ef259fb2 100644 --- a/frontend/src/app/module-blueprint/common/tools/same-item-collection.ts +++ b/frontend/src/app/module-blueprint/common/tools/same-item-collection.ts @@ -1,17 +1,25 @@ -import { BlueprintService } from '../../services/blueprint-service'; -import { BlueprintItem, CameraService, OniItem, BuildableElement } from '../../../../../../lib/index' - -export class SameItemCollection -{ +import { BlueprintService } from "../../services/blueprint-service"; +import { + BlueprintItem, + CameraService, + OniItem, + BuildableElement, +} from "../../../../../../lib/index"; + +export class SameItemCollection { private selected_: boolean; - get selected() {return this.selected_;} + get selected() { + return this.selected_; + } set selected(value: boolean) { this.selected_ = value; this.setSelection(); if (this.selected_) { CameraService.cameraService.resetSinWave(); CameraService.cameraService.setOverlayForItem(this.oniItem); - this.observersSelected.map((observer) => { observer.selected(); }) + this.observersSelected.map((observer) => { + observer.selected(); + }); } } @@ -24,7 +32,11 @@ export class SameItemCollection this.oniItem = oniItem; this.items = []; this.nbElements = []; - for (let indexElement = 0; indexElement < this.oniItem.buildableElementsArray.length; indexElement++) + for ( + let indexElement = 0; + indexElement < this.oniItem.buildableElementsArray.length; + indexElement++ + ) this.nbElements[indexElement] = 0; this.temperatureWarning = false; @@ -32,7 +44,9 @@ export class SameItemCollection this.observersSelected = []; } - get header() { return this.items[0].header; } + get header() { + return this.items[0].header; + } addItem(blueprintItem: BlueprintItem) { // We need to test if the item was already added to this collection, (some items are bigger than one tile) @@ -45,7 +59,11 @@ export class SameItemCollection } updateNbElements() { - for (let indexElement = 0; indexElement < this.oniItem.buildableElementsArray.length; indexElement++) { + for ( + let indexElement = 0; + indexElement < this.oniItem.buildableElementsArray.length; + indexElement++ + ) { let elements: BuildableElement[] = []; for (let item of this.items) @@ -62,7 +80,8 @@ export class SameItemCollection for (let item of this.items) if (firstTemperature == null) firstTemperature = item.temperature; - else if (item.temperature != firstTemperature) this.temperatureWarning = true; + else if (item.temperature != firstTemperature) + this.temperatureWarning = true; } setSelection() { diff --git a/frontend/src/app/module-blueprint/common/tools/select-tool.ts b/frontend/src/app/module-blueprint/common/tools/select-tool.ts index 8950eb9c..d9640513 100644 --- a/frontend/src/app/module-blueprint/common/tools/select-tool.ts +++ b/frontend/src/app/module-blueprint/common/tools/select-tool.ts @@ -1,20 +1,25 @@ -import { BlueprintService } from '../../services/blueprint-service'; -import { BlueprintItem, CameraService, DrawHelpers, OniItem, Vector2, BuildableElement } from "../../../../../../lib/index"; -import { Injectable } from '@angular/core'; -import { ITool, ToolType } from './tool'; -import { DrawPixi } from '../../drawing/draw-pixi'; -import { SameItemCollection } from './same-item-collection'; +import { BlueprintService } from "../../services/blueprint-service"; +import { + BlueprintItem, + CameraService, + DrawHelpers, + OniItem, + Vector2, + BuildableElement, +} from "../../../../../../lib/index"; +import { Injectable } from "@angular/core"; +import { ITool, ToolType } from "./tool"; +import { DrawPixi } from "../../drawing/draw-pixi"; +import { SameItemCollection } from "./same-item-collection"; @Injectable() -export class SelectTool implements ITool -{ +export class SelectTool implements ITool { public sameItemCollections: SameItemCollection[]; public observersSelectionChanged: IObsSelectionChanged[] = []; - private cameraService: CameraService + private cameraService: CameraService; constructor(private blueprintService: BlueprintService) { - this.cameraService = CameraService.cameraService; // TODO also do this on blueprint loading this.reset(); @@ -24,8 +29,7 @@ export class SelectTool implements ITool return this.sameItemCollections.length > 0; } - reset() - { + reset() { this.deselectAll(); this.sameItemCollections = []; } @@ -35,7 +39,9 @@ export class SelectTool implements ITool } private emitSelectionChanged() { - this.observersSelectionChanged.map((observer) => { observer.selectionChanged(); }); + this.observersSelectionChanged.map((observer) => { + observer.selectionChanged(); + }); } private lastSelected: BlueprintItem; @@ -51,26 +57,36 @@ export class SelectTool implements ITool tileSelected.push(new Vector2(x, y)); if (tileSelected.length > 0) { - for (let tile of tileSelected) { - let itemsInTile = this.blueprintService.blueprint.getBlueprintItemsAt(tile); + let itemsInTile = + this.blueprintService.blueprint.getBlueprintItemsAt(tile); for (let item of itemsInTile) this.addToCollection(item); } - this.sameItemCollections = this.sameItemCollections.sort((i1, i2) => { return i2.items[0].depth - i1.items[0].depth; }); + this.sameItemCollections = this.sameItemCollections.sort((i1, i2) => { + return i2.items[0].depth - i1.items[0].depth; + }); let firstSelected: BlueprintItem = null; let selectedOne = false; this.sameItemCollections.map((itemCollection) => { - if (!selectedOne && itemCollection.items != null && itemCollection.items.length > 0) { + if ( + !selectedOne && + itemCollection.items != null && + itemCollection.items.length > 0 + ) { selectedOne = true; firstSelected = itemCollection.items[0]; let newDate = new Date(); - if (firstSelected == this.lastSelected && this.lastSelectedDate != null && newDate.getTime() - this.lastSelectedDate.getTime() < 500) this.selectAllLike(firstSelected); + if ( + firstSelected == this.lastSelected && + this.lastSelectedDate != null && + newDate.getTime() - this.lastSelectedDate.getTime() < 500 + ) + this.selectAllLike(firstSelected); else { itemCollection.selected = true; - } this.lastSelected = firstSelected; @@ -87,9 +103,13 @@ export class SelectTool implements ITool selectAll(oniItem: OniItem) { this.deselectAll(); - this.blueprintService.blueprint.blueprintItems.filter((item) => { return item.oniItem == oniItem; }).map((item) => { - this.addToCollection(item); - }); + this.blueprintService.blueprint.blueprintItems + .filter((item) => { + return item.oniItem == oniItem; + }) + .map((item) => { + this.addToCollection(item); + }); this.currentMultipleSelectionIndex = 0; @@ -99,12 +119,18 @@ export class SelectTool implements ITool selectAllLike(original: BlueprintItem) { this.deselectAll(); - this.blueprintService.blueprint.blueprintItems.filter((item) => { - if (original.oniItem.isElement) return original.oniItem == item.oniItem && original.buildableElements[0] == item.buildableElements[0]; - else return original.oniItem == item.oniItem; - }).map((item) => { - this.addToCollection(item); - }); + this.blueprintService.blueprint.blueprintItems + .filter((item) => { + if (original.oniItem.isElement) + return ( + original.oniItem == item.oniItem && + original.buildableElements[0] == item.buildableElements[0] + ); + else return original.oniItem == item.oniItem; + }) + .map((item) => { + this.addToCollection(item); + }); this.currentMultipleSelectionIndex = 0; @@ -114,9 +140,13 @@ export class SelectTool implements ITool selectEveryInfo() { this.deselectAll(); - this.blueprintService.blueprint.blueprintItems.filter((item) => { return item.oniItem.isInfo; }).map((item) => { - this.addToCollection(item); - }); + this.blueprintService.blueprint.blueprintItems + .filter((item) => { + return item.oniItem.isInfo; + }) + .map((item) => { + this.addToCollection(item); + }); this.currentMultipleSelectionIndex = 0; @@ -126,9 +156,13 @@ export class SelectTool implements ITool selectThis(original: BlueprintItem) { this.deselectAll(); - this.blueprintService.blueprint.blueprintItems.filter((item) => { return item == original; }).map((item) => { - this.addToCollection(item); - }); + this.blueprintService.blueprint.blueprintItems + .filter((item) => { + return item == original; + }) + .map((item) => { + this.addToCollection(item); + }); this.currentMultipleSelectionIndex = 0; @@ -143,7 +177,9 @@ export class SelectTool implements ITool this.addToCollection(blueprintItem); // TODO this does not seem to sort - this.sameItemCollections = this.sameItemCollections.sort((i1, i2) => { return i2.oniItem.zIndex - i1.oniItem.zIndex; }); + this.sameItemCollections = this.sameItemCollections.sort((i1, i2) => { + return i2.oniItem.zIndex - i1.oniItem.zIndex; + }); this.currentMultipleSelectionIndex = 0; @@ -151,11 +187,14 @@ export class SelectTool implements ITool } addToCollection(blueprintItem: BlueprintItem) { - // Find if there is already an item collection for this oniItem let itemCollectionArray = this.sameItemCollections.filter((sameItem) => { if (blueprintItem.oniItem.isElement) - return blueprintItem.oniItem.id == sameItem.oniItem.id && blueprintItem.buildableElements[0].id == sameItem.items[0].buildableElements[0].id + return ( + blueprintItem.oniItem.id == sameItem.oniItem.id && + blueprintItem.buildableElements[0].id == + sameItem.items[0].buildableElements[0].id + ); else return blueprintItem.oniItem.id == sameItem.oniItem.id; }); if (itemCollectionArray.length == 0) { @@ -163,25 +202,29 @@ export class SelectTool implements ITool newItemCollection.addItem(blueprintItem); this.sameItemCollections.push(newItemCollection); - } - else itemCollectionArray[0].addItem(blueprintItem); + } else itemCollectionArray[0].addItem(blueprintItem); } deselectAll() { - if (this.sameItemCollections != null) this.sameItemCollections.map((itemCollection) => { itemCollection.selected = false; }); - this.sameItemCollections= []; + if (this.sameItemCollections != null) + this.sameItemCollections.map((itemCollection) => { + itemCollection.selected = false; + }); + this.sameItemCollections = []; this.emitSelectionChanged(); } buildingsDestroy(itemCollection: SameItemCollection) { - this.blueprintService.blueprint.pauseChangeEvents(); for (let item of itemCollection.items) this.blueprintService.blueprint.destroyBlueprintItem(item); this.blueprintService.blueprint.resumeChangeEvents(); - this.sameItemCollections.splice(this.sameItemCollections.indexOf(itemCollection), 1); + this.sameItemCollections.splice( + this.sameItemCollections.indexOf(itemCollection), + 1 + ); this.emitSelectionChanged(); } @@ -189,7 +232,11 @@ export class SelectTool implements ITool get currentMultipleSelectionIndex() { let activeIndex = -1; - for (let indexSelected = 0; indexSelected < this.sameItemCollections.length; indexSelected++) + for ( + let indexSelected = 0; + indexSelected < this.sameItemCollections.length; + indexSelected++ + ) if (this.sameItemCollections[indexSelected].selected) activeIndex = indexSelected; @@ -197,8 +244,12 @@ export class SelectTool implements ITool } set currentMultipleSelectionIndex(value: number) { - for (let indexSelected = 0; indexSelected < this.sameItemCollections.length; indexSelected++) - this.sameItemCollections[indexSelected].selected = (value == indexSelected); + for ( + let indexSelected = 0; + indexSelected < this.sameItemCollections.length; + indexSelected++ + ) + this.sameItemCollections[indexSelected].selected = value == indexSelected; } itemGroupeNext() { @@ -252,23 +303,20 @@ export class SelectTool implements ITool this.selectFromBox(tile, tile); } - rightClick(tile: Vector2) { - } + rightClick(tile: Vector2) {} - hover(tile: Vector2) { - } + hover(tile: Vector2) {} beginSelection: Vector2 = null; endSelection: Vector2; drag(tileStart: Vector2, tileStop: Vector2) { - if (this.beginSelection == null) this.beginSelection = Vector2.clone(tileStart); + if (this.beginSelection == null) + this.beginSelection = Vector2.clone(tileStart); this.endSelection = Vector2.clone(tileStop); } dragStop() { - - if (this.beginSelection != null && this.endSelection != null) - { + if (this.beginSelection != null && this.endSelection != null) { let beginTile = DrawHelpers.getIntegerTile(this.beginSelection); let endTile = DrawHelpers.getIntegerTile(this.endSelection); @@ -289,14 +337,16 @@ export class SelectTool implements ITool } keyDown(keyCode: string) { - if (keyCode == 'Delete') { + if (keyCode == "Delete") { let itemGroupToDestroyIndex = this.currentMultipleSelectionIndex; - if (itemGroupToDestroyIndex != -1) this.buildingsDestroy(this.sameItemCollections[itemGroupToDestroyIndex]); + if (itemGroupToDestroyIndex != -1) + this.buildingsDestroy( + this.sameItemCollections[itemGroupToDestroyIndex] + ); } } draw(drawPixi: DrawPixi, camera: CameraService) { - // Return if (this.beginSelection == null) return; @@ -310,7 +360,17 @@ export class SelectTool implements ITool Math.min(this.beginSelection.y, this.endSelection.y) ); - drawPixi.drawTileRectangle(camera, topLeft, bottomRight, true, 2, 0x4CFF00, 0x2D9600, 0.25, 0.8); + drawPixi.drawTileRectangle( + camera, + topLeft, + bottomRight, + true, + 2, + 0x4cff00, + 0x2d9600, + 0.25, + 0.8 + ); } toggleable: boolean = false; @@ -320,7 +380,6 @@ export class SelectTool implements ITool toolGroup: number = 1; } -export interface IObsSelectionChanged -{ +export interface IObsSelectionChanged { selectionChanged(); } diff --git a/frontend/src/app/module-blueprint/common/tools/tool.ts b/frontend/src/app/module-blueprint/common/tools/tool.ts index b62715a1..dcd66379 100644 --- a/frontend/src/app/module-blueprint/common/tools/tool.ts +++ b/frontend/src/app/module-blueprint/common/tools/tool.ts @@ -1,15 +1,13 @@ import { CameraService, Vector2 } from "../../../../../../lib/index"; -import { DrawPixi } from '../../drawing/draw-pixi'; +import { DrawPixi } from "../../drawing/draw-pixi"; -export enum ToolType -{ - select, - build, - elementReport +export enum ToolType { + select, + build, + elementReport, } -export interface ITool -{ +export interface ITool { switchFrom(); switchTo(); @@ -30,10 +28,8 @@ export interface ITool captureInput: boolean; // Can this tool capture canvas mouse and keyboard input toolType: ToolType; // Each tool is aware of its nature toolGroup: number; // All tools with the same number are exclusive - } -export interface IChangeTool -{ +export interface IChangeTool { changeTool(toolType: ToolType); } diff --git a/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.css b/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.css index 2589f2a9..72635859 100644 --- a/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.css +++ b/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.css @@ -6,12 +6,12 @@ .side-panel-right { position: absolute; - right:0; + right: 0; padding: 10px; } .side-panel-about { position: absolute; - right:0; + right: 0; padding: 10px; height: 90vh; } @@ -19,4 +19,4 @@ .outer { display: flex; flex-flow: column; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.html b/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.html index e19243c6..d2bdcbe1 100644 --- a/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.html +++ b/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.html @@ -1,21 +1,40 @@ - +
- +
- +
- + - +
@@ -25,11 +44,16 @@
- - + - + diff --git a/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.spec.ts b/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.spec.ts index 3021e811..bd7389d1 100644 --- a/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ComponentBlueprintParentComponent } from './component-blueprint-parent.component'; +import { ComponentBlueprintParentComponent } from "./component-blueprint-parent.component"; -describe('ComponentBlueprintParentComponent', () => { +describe("ComponentBlueprintParentComponent", () => { let component: ComponentBlueprintParentComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ComponentBlueprintParentComponent ] - }) - .compileComponents(); + declarations: [ComponentBlueprintParentComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ComponentBlueprintParentComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.ts b/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.ts index 09ea4f09..d0279764 100644 --- a/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.ts +++ b/frontend/src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component.ts @@ -1,26 +1,55 @@ -import { HttpClient } from '@angular/common/http'; -import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { HttpClient } from "@angular/common/http"; +import { + Component, + ElementRef, + OnInit, + Renderer2, + ViewChild, +} from "@angular/core"; // Library imports -import { ActivatedRoute, Params, UrlSegment } from '@angular/router'; -import * as JSZip from 'jszip'; -import { MessageService } from 'primeng/api'; -import { } from 'sanitize-filename'; -import { BBuilding, Blueprint, BSpriteInfo, BSpriteModifier, BuildableElement, BuildMenuCategory, BuildMenuItem, CameraService, ImageSource, OniItem, Overlay, SpriteInfo, SpriteModifier, Vector2 } from '../../../../../../lib/index'; -import { ToolType } from '../../common/tools/tool'; -import { AuthenticationService } from '../../services/authentification-service'; -import { BlueprintService, ExportImageOptions, IObsBlueprintChanged } from '../../services/blueprint-service'; -import { GameStringService } from '../../services/game-string-service'; -import { ToolService } from '../../services/tool-service'; -import { ComponentCanvasComponent } from '../component-canvas/component-canvas.component'; -import { BrowseData, MenuCommand, MenuCommandType } from '../component-menu/component-menu.component'; -import { ComponentSaveDialogComponent } from '../dialogs/component-save-dialog/component-save-dialog.component'; -import { DialogAboutComponent } from '../dialogs/dialog-about/dialog-about.component'; -import { DialogBrowseComponent } from '../dialogs/dialog-browse/dialog-browse.component'; -import { DialogExportImagesComponent } from '../dialogs/dialog-export-images/dialog-export-images.component'; -import { DialogShareUrlComponent } from '../dialogs/dialog-share-url/dialog-share-url.component'; -import { ComponentSideBuildToolComponent } from '../side-bar/build-tool/build-tool.component'; -import { ComponentSideSelectionToolComponent } from '../side-bar/selection-tool/selection-tool.component'; -import { ComponentLoginDialogComponent } from '../user-auth/login-dialog/login-dialog.component'; +import { ActivatedRoute, Params, UrlSegment } from "@angular/router"; +import * as JSZip from "jszip"; +import { MessageService } from "primeng/api"; +import {} from "sanitize-filename"; +import { + BBuilding, + Blueprint, + BSpriteInfo, + BSpriteModifier, + BuildableElement, + BuildMenuCategory, + BuildMenuItem, + CameraService, + ImageSource, + OniItem, + Overlay, + SpriteInfo, + SpriteModifier, + Vector2, +} from "../../../../../../lib/index"; +import { ToolType } from "../../common/tools/tool"; +import { AuthenticationService } from "../../services/authentification-service"; +import { + BlueprintService, + ExportImageOptions, + IObsBlueprintChanged, +} from "../../services/blueprint-service"; +import { GameStringService } from "../../services/game-string-service"; +import { ToolService } from "../../services/tool-service"; +import { ComponentCanvasComponent } from "../component-canvas/component-canvas.component"; +import { + BrowseData, + MenuCommand, + MenuCommandType, +} from "../component-menu/component-menu.component"; +import { ComponentSaveDialogComponent } from "../dialogs/component-save-dialog/component-save-dialog.component"; +import { DialogAboutComponent } from "../dialogs/dialog-about/dialog-about.component"; +import { DialogBrowseComponent } from "../dialogs/dialog-browse/dialog-browse.component"; +import { DialogExportImagesComponent } from "../dialogs/dialog-export-images/dialog-export-images.component"; +import { DialogShareUrlComponent } from "../dialogs/dialog-share-url/dialog-share-url.component"; +import { ComponentSideBuildToolComponent } from "../side-bar/build-tool/build-tool.component"; +import { ComponentSideSelectionToolComponent } from "../side-bar/selection-tool/selection-tool.component"; +import { ComponentLoginDialogComponent } from "../user-auth/login-dialog/login-dialog.component"; var sanitize = require("sanitize-filename"); /* @@ -40,44 +69,44 @@ TODO Feature List before release : */ - @Component({ - selector: 'app-component-blueprint-parent', - templateUrl: './component-blueprint-parent.component.html', - styleUrls: ['./component-blueprint-parent.component.css'], - providers: [MessageService] + selector: "app-component-blueprint-parent", + templateUrl: "./component-blueprint-parent.component.html", + styleUrls: ["./component-blueprint-parent.component.css"], + providers: [MessageService], }) -export class ComponentBlueprintParentComponent implements OnInit, IObsBlueprintChanged { - - @ViewChild('canvas', { static: true }) +export class ComponentBlueprintParentComponent + implements OnInit, IObsBlueprintChanged +{ + @ViewChild("canvas", { static: true }) canvas: ComponentCanvasComponent; - @ViewChild('buildTool', { static: false }) + @ViewChild("buildTool", { static: false }) buildTool: ComponentSideBuildToolComponent; - @ViewChild('saveDialog', { static: false }) + @ViewChild("saveDialog", { static: false }) saveDialog: ComponentSaveDialogComponent; - @ViewChild('browseDialog', { static: false }) + @ViewChild("browseDialog", { static: false }) browseDialog: DialogBrowseComponent; - @ViewChild('loginDialog', { static: false }) + @ViewChild("loginDialog", { static: false }) loginDialog: ComponentLoginDialogComponent; - @ViewChild('exportImagesDialog', { static: false }) + @ViewChild("exportImagesDialog", { static: false }) exportImagesDialog: DialogExportImagesComponent; - @ViewChild('shareUrlDialog', { static: false }) + @ViewChild("shareUrlDialog", { static: false }) shareUrlDialog: DialogShareUrlComponent; - @ViewChild('aboutDialog') + @ViewChild("aboutDialog") aboutDialog: DialogAboutComponent; // The left ui panel is not static, because when in a iframe we don't load it - @ViewChild('sidePanelLeft', { static: false }) + @ViewChild("sidePanelLeft", { static: false }) sidePanelLeft: ElementRef; - @ViewChild('selectionTool', { static: false }) + @ViewChild("selectionTool", { static: false }) selectionTool: ComponentSideSelectionToolComponent; constructor( @@ -89,32 +118,29 @@ export class ComponentBlueprintParentComponent implements OnInit, IObsBlueprintC private renderer: Renderer2, private http: HttpClient, public gameStringService: GameStringService - ) { - } + ) {} get showElementReport() { if (CameraService.cameraService == null) return false; - else return CameraService.cameraService.showElementReport + else return CameraService.cameraService.showElementReport; } get showTemperatureScale() { if (CameraService.cameraService == null) return false; - else return CameraService.cameraService.showTemperatureScale + else return CameraService.cameraService.showTemperatureScale; } forceSize: boolean = false; forcedSize: Vector2 = Vector2.zero(); ngOnInit() { - this.route.params.subscribe((params: Params): void => { let width = Number(params.width); let height = Number(params.height); if (Number.isInteger(width) && Number.isInteger(height)) { this.forceSize = true; this.forcedSize = new Vector2(width, height); - } - else this.forceSize = false; + } else this.forceSize = false; }); SpriteModifier.init(); @@ -128,27 +154,29 @@ export class ComponentBlueprintParentComponent implements OnInit, IObsBlueprintC this.blueprintService.subscribeBlueprintChanged(this); this.fetchDatabase().then(() => { - if (!this.forceSize) { this.buildTool.oniItemsLoaded(); } this.route.url.subscribe((url: UrlSegment[]) => { - if (url != null && url.length > 0 && url[0].path == 'browse') { + if (url != null && url.length > 0 && url[0].path == "browse") { this.browseDialog.showDialog(); - } - else if (url != null && url.length > 0 && url[0].path == 'about') { + } else if (url != null && url.length > 0 && url[0].path == "about") { this.aboutDialog.visible = true; + } else if ( + url != null && + url.length > 1 && + url[0].path == "openfromurl" + ) { + this.blueprintService.loadUrlBlueprint(url[1].path); } - else if (url != null && url.length > 1 && url[0].path == 'openfromurl') { - this.blueprintService.loadUrlBlueprint(url[1].path) - } - }) + }); this.route.params.subscribe((params: Params): void => { - if (params.id != null) this.blueprintService.openBlueprintFromId(params.id); + if (params.id != null) + this.blueprintService.openBlueprintFromId(params.id); }); - })/* + }); /* .catch((error) => { this.messageService.add({ severity: 'error', @@ -158,17 +186,18 @@ export class ComponentBlueprintParentComponent implements OnInit, IObsBlueprintC }); }); */ - this.renderer.listen('window', 'load', () => { + this.renderer.listen("window", "load", () => { this.resizeTools(); }); - this.renderer.listen('window', 'resize', () => { + this.renderer.listen("window", "resize", () => { this.resizeTools(); }); } resizeTools() { if (!this.forceSize) { - let sidePanelPosition: number = this.sidePanelLeft.nativeElement.getBoundingClientRect().y; + let sidePanelPosition: number = + this.sidePanelLeft.nativeElement.getBoundingClientRect().y; this.selectionTool.setMaxHeight(sidePanelPosition); } } @@ -180,60 +209,69 @@ export class ComponentBlueprintParentComponent implements OnInit, IObsBlueprintC database: any; fetchDatabase(): Promise { let promise = new Promise((resolve, reject) => { - - // Start comment here - this.http.get("assets/database/database.zip", { responseType: "arraybuffer" }).subscribe(data => { - JSZip.loadAsync(data).then((zipped) => { - zipped.files['database.json'].async('text').then(async (text) => { - let json = JSON.parse(text); - - this.database = json; - - let elements: BuildableElement[] = json.elements; - for (const e of elements) { - const localizedName = await this.gameStringService.getStr(`STRINGS.ELEMENTS.${e.id.toUpperCase()}.NAME`); - if (!localizedName) console.warn(`Missing element translation`, e); - e.name = localizedName || e.name - } - BuildableElement.load(elements); - - let buildMenuCategories: BuildMenuCategory[] = json.buildMenuCategories; - for (const bm of buildMenuCategories) { - const localizedName = await this.gameStringService.getStr(`STRINGS.UI.BUILDCATEGORIES.${bm.categoryName.toUpperCase()}.NAME`); - if (!localizedName) console.warn(`Missing buildMenuCategory translation`, bm); - bm.categoryShowName = localizedName || bm.categoryName - } - BuildMenuCategory.load(buildMenuCategories); - - let buildMenuItems: BuildMenuItem[] = json.buildMenuItems; - BuildMenuItem.load(buildMenuItems); - - let uiSprites: BSpriteInfo[] = json.uiSprites; - SpriteInfo.load(uiSprites) - - let spriteModifiers: BSpriteModifier[] = json.spriteModifiers; - SpriteModifier.load(spriteModifiers); - - let buildings: BBuilding[] = json.buildings; - for (const b of buildings) { - const localizedName = await this.gameStringService.getStr(`STRINGS.BUILDINGS.PREFABS.${b.prefabId.toUpperCase()}.NAME`); - if (!localizedName) console.warn(`Missing building translation`, b); - b.name = localizedName - } - OniItem.load(buildings); - - resolve(0); - }) - - }) - .catch((error) => { - reject(error); - }); - }) + this.http + .get("assets/database/database.zip", { responseType: "arraybuffer" }) + .subscribe((data) => { + JSZip.loadAsync(data) + .then((zipped) => { + zipped.files["database.json"].async("text").then(async (text) => { + let json = JSON.parse(text); + + this.database = json; + + let elements: BuildableElement[] = json.elements; + for (const e of elements) { + const localizedName = await this.gameStringService.getStr( + `STRINGS.ELEMENTS.${e.id.toUpperCase()}.NAME` + ); + if (!localizedName) + console.warn(`Missing element translation`, e); + e.name = localizedName || e.name; + } + BuildableElement.load(elements); + + let buildMenuCategories: BuildMenuCategory[] = + json.buildMenuCategories; + for (const bm of buildMenuCategories) { + const localizedName = await this.gameStringService.getStr( + `STRINGS.UI.BUILDCATEGORIES.${bm.categoryName.toUpperCase()}.NAME` + ); + if (!localizedName) + console.warn(`Missing buildMenuCategory translation`, bm); + bm.categoryShowName = localizedName || bm.categoryName; + } + BuildMenuCategory.load(buildMenuCategories); + + let buildMenuItems: BuildMenuItem[] = json.buildMenuItems; + BuildMenuItem.load(buildMenuItems); + + let uiSprites: BSpriteInfo[] = json.uiSprites; + SpriteInfo.load(uiSprites); + + let spriteModifiers: BSpriteModifier[] = json.spriteModifiers; + SpriteModifier.load(spriteModifiers); + + let buildings: BBuilding[] = json.buildings; + for (const b of buildings) { + const localizedName = await this.gameStringService.getStr( + `STRINGS.BUILDINGS.PREFABS.${b.prefabId.toUpperCase()}.NAME` + ); + if (!localizedName) + console.warn(`Missing building translation`, b); + b.name = localizedName; + } + OniItem.load(buildings); + + resolve(0); + }); + }) + .catch((error) => { + reject(error); + }); + }); // End comment here - /* // Start comment here fetch("/assets/database/database.json") @@ -267,30 +305,41 @@ export class ComponentBlueprintParentComponent implements OnInit, IObsBlueprintC }); // End comment here */ - }); return promise; } menuCommand(menuCommand: MenuCommand) { - if (menuCommand.type == MenuCommandType.newBlueprint) this.blueprintService.newBlueprint(); - else if (menuCommand.type == MenuCommandType.showLoginDialog) this.loginDialog.showDialog(); - else if (menuCommand.type == MenuCommandType.browseBlueprints) this.browseBlueprints(menuCommand.data); - else if (menuCommand.type == MenuCommandType.about) this.aboutDialog.toggleDialog(); - else if (menuCommand.type == MenuCommandType.getShareableUrl) this.shareUrl(); - else if (menuCommand.type == MenuCommandType.exportImages) this.exportImages(); - else if (menuCommand.type == MenuCommandType.saveBlueprint) this.saveBlueprint(); - else if (menuCommand.type == MenuCommandType.exportBlueprint) this.exportBlueprint(); - + if (menuCommand.type == MenuCommandType.newBlueprint) + this.blueprintService.newBlueprint(); + else if (menuCommand.type == MenuCommandType.showLoginDialog) + this.loginDialog.showDialog(); + else if (menuCommand.type == MenuCommandType.browseBlueprints) + this.browseBlueprints(menuCommand.data); + else if (menuCommand.type == MenuCommandType.about) + this.aboutDialog.toggleDialog(); + else if (menuCommand.type == MenuCommandType.getShareableUrl) + this.shareUrl(); + else if (menuCommand.type == MenuCommandType.exportImages) + this.exportImages(); + else if (menuCommand.type == MenuCommandType.saveBlueprint) + this.saveBlueprint(); + else if (menuCommand.type == MenuCommandType.exportBlueprint) + this.exportBlueprint(); // Technical (repack, generate solid sprites, etc) - else if (menuCommand.type == MenuCommandType.fetchIcons) this.canvas.fetchIcons(); - else if (menuCommand.type == MenuCommandType.downloadIcons) this.canvas.downloadIcons(); - else if (menuCommand.type == MenuCommandType.downloadGroups) this.canvas.downloadGroups(this.database); - else if (menuCommand.type == MenuCommandType.downloadUtility) this.canvas.downloadUtility(this.database); - else if (menuCommand.type == MenuCommandType.repackTextures) this.canvas.repackTextures(this.database); - else if (menuCommand.type == MenuCommandType.addElementsTiles) this.addElementsTiles(); - + else if (menuCommand.type == MenuCommandType.fetchIcons) + this.canvas.fetchIcons(); + else if (menuCommand.type == MenuCommandType.downloadIcons) + this.canvas.downloadIcons(); + else if (menuCommand.type == MenuCommandType.downloadGroups) + this.canvas.downloadGroups(this.database); + else if (menuCommand.type == MenuCommandType.downloadUtility) + this.canvas.downloadUtility(this.database); + else if (menuCommand.type == MenuCommandType.repackTextures) + this.canvas.repackTextures(this.database); + else if (menuCommand.type == MenuCommandType.addElementsTiles) + this.addElementsTiles(); } saveImages(exportOptions: ExportImageOptions) { @@ -304,23 +353,25 @@ export class ComponentBlueprintParentComponent implements OnInit, IObsBlueprintC // TODO error handling this.messageService.add({ - severity: 'success', + severity: "success", summary: $localize`Loaded blueprint: ${this.blueprintService.name}`, detail: $localize`${template.blueprintItems.length} items loaded`, }); } saveBlueprint() { - if (!this.authService.isLoggedIn()) this.messageService.add({ - severity: 'error', - summary: $localize`Not logged in`, - detail: $localize`You must be logged in to be able to save blueprints`, - }); - else if (this.blueprintService.blueprint.blueprintItems.length == 0) this.messageService.add({ - severity: 'error', - summary: $localize`Empty blueprint`, - detail: $localize`Add some buildings before trying to save`, - }); + if (!this.authService.isLoggedIn()) + this.messageService.add({ + severity: "error", + summary: $localize`Not logged in`, + detail: $localize`You must be logged in to be able to save blueprints`, + }); + else if (this.blueprintService.blueprint.blueprintItems.length == 0) + this.messageService.add({ + severity: "error", + summary: $localize`Empty blueprint`, + detail: $localize`Add some buildings before trying to save`, + }); else { this.updateThumbnail(); this.saveDialog.showDialog(); @@ -328,21 +379,26 @@ export class ComponentBlueprintParentComponent implements OnInit, IObsBlueprintC } exportBlueprint() { - if (this.blueprintService.blueprint.blueprintItems.length == 0) this.messageService.add({ - severity: 'error', - summary: $localize`Empty blueprint`, - detail: $localize`Add some buildings before trying to save`, - }); + if (this.blueprintService.blueprint.blueprintItems.length == 0) + this.messageService.add({ + severity: "error", + summary: $localize`Empty blueprint`, + detail: $localize`Add some buildings before trying to save`, + }); else { let friendlyname = "new blueprint"; - if (this.blueprintService.name != undefined) friendlyname = this.blueprintService.name; + if (this.blueprintService.name != undefined) + friendlyname = this.blueprintService.name; - let bniBlueprint = this.blueprintService.blueprint.toBniBlueprint(friendlyname); + let bniBlueprint = + this.blueprintService.blueprint.toBniBlueprint(friendlyname); - let a = document.createElement('a'); + let a = document.createElement("a"); document.body.append(a); - a.download = sanitize(friendlyname) + '.blueprint'; - a.href = URL.createObjectURL(new Blob([JSON.stringify(bniBlueprint)], {})); + a.download = sanitize(friendlyname) + ".blueprint"; + a.href = URL.createObjectURL( + new Blob([JSON.stringify(bniBlueprint)], {}) + ); a.click(); a.remove(); } @@ -353,27 +409,34 @@ export class ComponentBlueprintParentComponent implements OnInit, IObsBlueprintC } shareUrl() { - if (this.blueprintService.id == null) this.messageService.add({ - severity: 'error', - summary: $localize`Blueprint not saved`, - detail: $localize`Save this blueprint to share it with others` - }); + if (this.blueprintService.id == null) + this.messageService.add({ + severity: "error", + summary: $localize`Blueprint not saved`, + detail: $localize`Save this blueprint to share it with others`, + }); else this.shareUrlDialog.showDialog(); } browseBlueprints(data: any) { let browseData = data as BrowseData; - if (browseData != null) this.browseDialog.showDialog(browseData.filterUserId, browseData.filterUserName, browseData.getDuplicates); + if (browseData != null) + this.browseDialog.showDialog( + browseData.filterUserId, + browseData.filterUserName, + browseData.getDuplicates + ); else this.browseDialog.showDialog(); } // TODO toast on save and generate url also exportImages() { - if (this.blueprintService.blueprint.blueprintItems.length == 0) this.messageService.add({ - severity: 'error', - summary: $localize`Empty blueprint`, - detail: $localize`Add some buildings before trying to export images` - }); + if (this.blueprintService.blueprint.blueprintItems.length == 0) + this.messageService.add({ + severity: "error", + summary: $localize`Empty blueprint`, + detail: $localize`Add some buildings before trying to export images`, + }); else this.exportImagesDialog.showDialog(); } diff --git a/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.css b/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.css index 045ed02c..a643c9d8 100644 --- a/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.css +++ b/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.css @@ -2,4 +2,4 @@ background-color: black; position: absolute; z-index: -1; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.html b/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.html index 84c4dd47..d51e7fb1 100644 --- a/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.html +++ b/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.html @@ -1,8 +1,20 @@ - - + Your browser does not support canvas. - diff --git a/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.spec.ts b/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.spec.ts index 2f374abe..2464f646 100644 --- a/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ComponentCanvasComponent } from './component-canvas.component'; +import { ComponentCanvasComponent } from "./component-canvas.component"; -describe('ComponentCanvasComponent', () => { +describe("ComponentCanvasComponent", () => { let component: ComponentCanvasComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ComponentCanvasComponent ] - }) - .compileComponents(); + declarations: [ComponentCanvasComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ComponentCanvasComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.ts b/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.ts index 8b61f4ed..5d63b0c4 100644 --- a/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.ts +++ b/frontend/src/app/module-blueprint/components/component-canvas/component-canvas.component.ts @@ -1,41 +1,72 @@ // Angular imports -import { Component, OnInit, OnDestroy, ViewChild, ElementRef, NgZone, Output, EventEmitter, HostListener, Pipe, Input } from '@angular/core'; +import { + Component, + OnInit, + OnDestroy, + ViewChild, + ElementRef, + NgZone, + Output, + EventEmitter, + HostListener, + Pipe, + Input, +} from "@angular/core"; //import { Http, Response } from "@angular/http" -import { HttpClientModule, HttpClient } from '@angular/common/http'; +import { HttpClientModule, HttpClient } from "@angular/common/http"; // Engine imports -import { Blueprint, IObsBlueprintChange, CameraService, IObsCameraChanged, SpriteInfo, DrawHelpers, ImageSource, OniItem, SpriteModifier, Overlay, Display, BExport, BSpriteInfo, BSpriteModifier, Vector2, SpriteTag } from '../../../../../../lib/index' +import { + Blueprint, + IObsBlueprintChange, + CameraService, + IObsCameraChanged, + SpriteInfo, + DrawHelpers, + ImageSource, + OniItem, + SpriteModifier, + Overlay, + Display, + BExport, + BSpriteInfo, + BSpriteModifier, + Vector2, + SpriteTag, +} from "../../../../../../lib/index"; // PrimeNg imports -import { ComponentSideSelectionToolComponent } from '../side-bar/selection-tool/selection-tool.component'; -import { DrawPixi } from '../../drawing/draw-pixi'; -import { DrawMiniUi } from '../../drawing/draw-mini-ui'; -import * as JSZip from 'jszip'; -import { BlueprintService, ExportImageOptions } from '../../services/blueprint-service'; -import { ToolService } from '../../services/tool-service'; -import { read } from 'fs'; - -import { } from 'pixi.js-legacy'; -declare var PIXI: any; - +import { ComponentSideSelectionToolComponent } from "../side-bar/selection-tool/selection-tool.component"; +import { DrawPixi } from "../../drawing/draw-pixi"; +import { DrawMiniUi } from "../../drawing/draw-mini-ui"; +import * as JSZip from "jszip"; +import { + BlueprintService, + ExportImageOptions, +} from "../../services/blueprint-service"; +import { ToolService } from "../../services/tool-service"; +import { read } from "fs"; + +import {} from "pixi.js-legacy"; +declare var PIXI: any; @Component({ - selector: 'app-component-canvas', - templateUrl: './component-canvas.component.html', - styleUrls: ['./component-canvas.component.css'] + selector: "app-component-canvas", + templateUrl: "./component-canvas.component.html", + styleUrls: ["./component-canvas.component.css"], }) -export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraChanged { - +export class ComponentCanvasComponent + implements OnInit, OnDestroy, IObsCameraChanged +{ width: number; height: number; debug: any; - - @ViewChild('blueprintCanvas', {static: true}) + @ViewChild("blueprintCanvas", { static: true }) canvasRef: ElementRef; - @ViewChild('divCalcHeight', {static: true}) + @ViewChild("divCalcHeight", { static: true }) divCalcHeight: ElementRef; @Input() @@ -43,17 +74,18 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh @Input() forcedSize: Vector2; - drawPixi: DrawPixi; - private cameraService: CameraService + private cameraService: CameraService; - public get blueprint() { return this.blueprintService.blueprint; } + public get blueprint() { + return this.blueprintService.blueprint; + } constructor( private ngZone: NgZone, private blueprintService: BlueprintService, - private toolService: ToolService) { - + private toolService: ToolService + ) { this.drawPixi = new DrawPixi(); this.cameraService = new CameraService(this.drawPixi.getNewContainer()); this.cameraService.subscribeCameraChange(this); @@ -75,7 +107,6 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh miniUi.init(this.drawPixi.pixiApp.stage); this.cameraService.subscribeCameraChange(miniUi); } - }); //this.drawAbstraction.Init(this.canvasRef, this) @@ -85,8 +116,7 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh this.running = false; } - public loadNewBlueprint(source: Blueprint) - { + public loadNewBlueprint(source: Blueprint) { // TODO make sure nothing creates a "real blueprint" before this // TODO fixme this.blueprint.destroyAndCopyItems(source); @@ -95,26 +125,35 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh //let cameraOffset = new Vector2(-topLeft.x + 1, bottomRight.y + 1); let rect = this.canvasRef.nativeElement.getBoundingClientRect(); - this.cameraService.resetZoom(new Vector2( - rect.width - rect.left, - rect.height - rect.top - )); + this.cameraService.resetZoom( + new Vector2(rect.width - rect.left, rect.height - rect.top) + ); if (source.blueprintItems.length > 0) { let boundingBox = this.blueprint.getBoundingBox(); let topLeft = boundingBox[0]; let bottomRight = boundingBox[1]; - let totalTileSize = new Vector2(bottomRight.x - topLeft.x + 3, bottomRight.y - topLeft.y + 3); + let totalTileSize = new Vector2( + bottomRight.x - topLeft.x + 3, + bottomRight.y - topLeft.y + 3 + ); let maxTotalSize = Math.max(totalTileSize.x, totalTileSize.y); - let minCanvasSize = Math.min(this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height); + let minCanvasSize = Math.min( + this.canvasRef.nativeElement.width, + this.canvasRef.nativeElement.height + ); let thumbnailTileSize = minCanvasSize / maxTotalSize; this.cameraService.cameraOffset.x = -topLeft.x + 1; this.cameraService.cameraOffset.y = bottomRight.y + 1; // (add 2 instead of 1, one tile will probably be hidden by the menu) - if (totalTileSize.x > totalTileSize.y) this.cameraService.cameraOffset.y += totalTileSize.x / 2 - totalTileSize.y / 2; - if (totalTileSize.y > totalTileSize.x) this.cameraService.cameraOffset.x += totalTileSize.y / 2 - totalTileSize.x / 2; + if (totalTileSize.x > totalTileSize.y) + this.cameraService.cameraOffset.y += + totalTileSize.x / 2 - totalTileSize.y / 2; + if (totalTileSize.y > totalTileSize.x) + this.cameraService.cameraOffset.x += + totalTileSize.y / 2 - totalTileSize.x / 2; this.cameraService.setHardZoom(thumbnailTileSize); } @@ -125,9 +164,10 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh return new Vector2(event.clientX - rect.left, event.clientY - rect.top); } - getCurrentTile(event): Vector2 - { - let returnValue = this.cameraService.getTileCoords(this.getCursorPosition(event)); + getCurrentTile(event): Vector2 { + let returnValue = this.cameraService.getTileCoords( + this.getCursorPosition(event) + ); returnValue.x = Math.floor(returnValue.x); returnValue.y = Math.ceil(returnValue.y); @@ -135,21 +175,17 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh return returnValue; } - mouseWheel(event: any) - { + mouseWheel(event: any) { this.cameraService.zoom(event.delta, this.getCursorPosition(event)); } - mouseUp(event: any) - { - if (event.button == 0) - { + mouseUp(event: any) { + if (event.button == 0) { this.storePreviousTileFloat = null; } } - mouseDown(event: any) - { + mouseDown(event: any) { if (event.button == 0) { this.toolService.mouseDown(this.getCurrentTile(event)); } @@ -159,38 +195,39 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh this.toolService.mouseOut(); } - mouseClick(event: any) - { + mouseClick(event: any) { // Don't send the clicks to the tools if we are in an iframe if (!this.forceSize) { - if (event.button == 0) this.toolService.leftClick(this.getCurrentTile(event)); - else if (event.button == 2) this.toolService.rightClick(this.getCurrentTile(event)); + if (event.button == 0) + this.toolService.leftClick(this.getCurrentTile(event)); + else if (event.button == 2) + this.toolService.rightClick(this.getCurrentTile(event)); } } storePreviousTileFloat: Vector2; - mouseDrag(event: any) - { + mouseDrag(event: any) { let previousTileFloat = Vector2.clone(this.storePreviousTileFloat); - let currentTileFloat = this.cameraService.getTileCoords(this.getCursorPosition(event)); + let currentTileFloat = this.cameraService.getTileCoords( + this.getCursorPosition(event) + ); - if (event.dragButton[2]) - { + if (event.dragButton[2]) { //console.log('camera drag'); - this.cameraService.cameraOffset.x += event.dragX / this.cameraService.currentZoom; - this.cameraService.cameraOffset.y += event.dragY / this.cameraService.currentZoom; - } - else if (event.dragButton[0]) - { + this.cameraService.cameraOffset.x += + event.dragX / this.cameraService.currentZoom; + this.cameraService.cameraOffset.y += + event.dragY / this.cameraService.currentZoom; + } else if (event.dragButton[0]) { // Don't send the clicks to the tools if we are in an iframe - if (!this.forceSize) this.toolService.drag(previousTileFloat, currentTileFloat); + if (!this.forceSize) + this.toolService.drag(previousTileFloat, currentTileFloat); } this.storePreviousTileFloat = Vector2.clone(currentTileFloat); } - mouseStopDrag(event: any) - { + mouseStopDrag(event: any) { this.storePreviousTileFloat = null; this.toolService.dragStop(); } @@ -198,57 +235,56 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh // previousMouse is used by the keyboard zoom previousMouse: Vector2 = new Vector2(); previousTileUnderMouse: Vector2; - mouseMove(event: any) - { - this.previousMouse = this.getCursorPosition(event) + mouseMove(event: any) { + this.previousMouse = this.getCursorPosition(event); let currentTileUnderMouse = this.getCurrentTile(event); - if (this.previousTileUnderMouse == null || !this.previousTileUnderMouse.equals(currentTileUnderMouse)) + if ( + this.previousTileUnderMouse == null || + !this.previousTileUnderMouse.equals(currentTileUnderMouse) + ) this.toolService.hover(currentTileUnderMouse); this.previousTileUnderMouse = currentTileUnderMouse; - } - - keyPress(event: any) - { + keyPress(event: any) { //console.log(event.key) this.toolService.keyDown(event.key); if (document.body == document.activeElement) { - if (event.key == 'ArrowLeft') this.cameraService.cameraOffset.x += 1; - if (event.key == 'ArrowRight') this.cameraService.cameraOffset.x -= 1; - if (event.key == 'ArrowUp') this.cameraService.cameraOffset.y += 1; - if (event.key == 'ArrowDown') this.cameraService.cameraOffset.y -= 1; - if (event.key == '+') this.cameraService.zoom(1, this.previousMouse); - if (event.key == '-') this.cameraService.zoom(-1, this.previousMouse); + if (event.key == "ArrowLeft") this.cameraService.cameraOffset.x += 1; + if (event.key == "ArrowRight") this.cameraService.cameraOffset.x -= 1; + if (event.key == "ArrowUp") this.cameraService.cameraOffset.y += 1; + if (event.key == "ArrowDown") this.cameraService.cameraOffset.y -= 1; + if (event.key == "+") this.cameraService.zoom(1, this.previousMouse); + if (event.key == "-") this.cameraService.zoom(-1, this.previousMouse); } - if (event.key == 'z' && event.ctrlKey) this.blueprintService.undo(); - if (event.key == 'y' && event.ctrlKey) this.blueprintService.redo(); + if (event.key == "z" && event.ctrlKey) this.blueprintService.undo(); + if (event.key == "y" && event.ctrlKey) this.blueprintService.redo(); //this.canvasRef.nativeElement.click(); } - prepareOverlayInfo() - { - if (this.blueprint != null) this.blueprint.prepareOverlayInfo(this.cameraService.overlay); + prepareOverlayInfo() { + if (this.blueprint != null) + this.blueprint.prepareOverlayInfo(this.cameraService.overlay); } /* * * Sprite repackaging * - */ - fetchIcons() - { - for (let k of ImageSource.keys) ImageSource.getBaseTexture(k, this.drawPixi); - for (let k of SpriteInfo.keys) SpriteInfo.getSpriteInfo(k).getTexture(this.drawPixi); + */ + fetchIcons() { + for (let k of ImageSource.keys) + ImageSource.getBaseTexture(k, this.drawPixi); + for (let k of SpriteInfo.keys) + SpriteInfo.getSpriteInfo(k).getTexture(this.drawPixi); } - downloadUtility(database: BExport) - { + downloadUtility(database: BExport) { let allWhiteFilter = new PIXI.filters.ColorMatrixFilter(); // 1 1 1 0 1 // 1 1 1 0 1 @@ -267,18 +303,24 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh allWhiteFilter.matrix[12] = 1; allWhiteFilter.matrix[14] = 1; - let sourceSpriteModifiers = database.spriteModifiers.filter((s) => { return s.tags.indexOf(SpriteTag.solid) != -1; }) + let sourceSpriteModifiers = database.spriteModifiers.filter((s) => { + return s.tags.indexOf(SpriteTag.solid) != -1; + }); let sourceTextures: string[] = []; for (let sourceSpriteModifier of sourceSpriteModifiers) { - let sourceSpriteInfo = database.uiSprites.find((s) => { return s.name == sourceSpriteModifier.spriteInfoName; }) + let sourceSpriteInfo = database.uiSprites.find((s) => { + return s.name == sourceSpriteModifier.spriteInfoName; + }); - if (sourceTextures.indexOf(sourceSpriteInfo.textureName) == -1) sourceTextures.push(sourceSpriteInfo.textureName); + if (sourceTextures.indexOf(sourceSpriteInfo.textureName) == -1) + sourceTextures.push(sourceSpriteInfo.textureName); let spriteModifierWhite = BSpriteModifier.clone(sourceSpriteModifier); - spriteModifierWhite.name = spriteModifierWhite.name + '_white'; - spriteModifierWhite.spriteInfoName = spriteModifierWhite.spriteInfoName + '_white'; + spriteModifierWhite.name = spriteModifierWhite.name + "_white"; + spriteModifierWhite.spriteInfoName = + spriteModifierWhite.spriteInfoName + "_white"; spriteModifierWhite.tags.push(SpriteTag.white); database.spriteModifiers.push(spriteModifierWhite); @@ -289,29 +331,39 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh if (spriteInfoWhite != null) { spriteInfoWhite.name = spriteModifierWhite.spriteInfoName; - spriteInfoWhite.textureName = spriteInfoWhite.textureName + '_white'; - database.uiSprites.push(spriteInfoWhite) + spriteInfoWhite.textureName = spriteInfoWhite.textureName + "_white"; + database.uiSprites.push(spriteInfoWhite); } for (let building of database.buildings) - if (building.sprites.spriteNames.indexOf(sourceSpriteModifier.name) != -1) + if ( + building.sprites.spriteNames.indexOf(sourceSpriteModifier.name) != -1 + ) building.sprites.spriteNames.push(spriteModifierWhite.name); } ComponentCanvasComponent.zip = new JSZip(); ComponentCanvasComponent.nbBlob = 0; - ComponentCanvasComponent.downloadFile = 'solidSprites.zip'; + ComponentCanvasComponent.downloadFile = "solidSprites.zip"; ComponentCanvasComponent.nbBlobMax = sourceTextures.length; - ComponentCanvasComponent.zip.file('database_white.json', JSON.stringify(database, null, 2)); + ComponentCanvasComponent.zip.file( + "database_white.json", + JSON.stringify(database, null, 2) + ); - for (let sourceTexture of sourceTextures) - { - let baseTexture = ImageSource.getBaseTexture(sourceTexture, this.drawPixi); + for (let sourceTexture of sourceTextures) { + let baseTexture = ImageSource.getBaseTexture( + sourceTexture, + this.drawPixi + ); let texture = new PIXI.Texture(baseTexture); - let brt = new PIXI.BaseRenderTexture({width: texture.width, height: texture.height}); + let brt = new PIXI.BaseRenderTexture({ + width: texture.width, + height: texture.height, + }); let rt = new PIXI.RenderTexture(brt); let sprite = PIXI.Sprite.from(texture); @@ -319,31 +371,32 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh this.drawPixi.pixiApp.renderer.render(sprite, rt); - this.drawPixi.pixiApp.renderer.extract.canvas(rt).toBlob((b) => - { - this.addBlob(b, sourceTexture + '_white.png'); - }, 'image/png'); + this.drawPixi.pixiApp.renderer.extract.canvas(rt).toBlob((b) => { + this.addBlob(b, sourceTexture + "_white.png"); + }, "image/png"); } } downloadGroups(database: BExport) { - console.log('downloadGroups') + console.log("downloadGroups"); let renderTextures: PIXI.RenderTexture[] = []; let textureNames: string[] = []; for (let oniItem of OniItem.oniItems) { - - let buildingInDatabase = database.buildings.find((building) => { return building.prefabId == oniItem.id }); + let buildingInDatabase = database.buildings.find((building) => { + return building.prefabId == oniItem.id; + }); let spritesToGroup: SpriteModifier[] = []; for (let spriteModifier of oniItem.spriteGroup.spriteModifiers) { - if (spriteModifier == undefined) console.log(oniItem); - if (spriteModifier.tags.indexOf(SpriteTag.solid) != -1 && - spriteModifier.tags.indexOf(SpriteTag.tileable) == -1 && - spriteModifier.tags.indexOf(SpriteTag.connection) == -1) + if ( + spriteModifier.tags.indexOf(SpriteTag.solid) != -1 && + spriteModifier.tags.indexOf(SpriteTag.tileable) == -1 && + spriteModifier.tags.indexOf(SpriteTag.connection) == -1 + ) spritesToGroup.push(spriteModifier); } @@ -351,46 +404,58 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh let container: PIXI.Container = new PIXI.Container(); container.sortableChildren = true; - let modifierId = oniItem.id + '_group_modifier'; - let spriteInfoId = oniItem.id + '_group_sprite'; - let textureName = oniItem.id + '_group_sprite' + let modifierId = oniItem.id + "_group_modifier"; + let spriteInfoId = oniItem.id + "_group_sprite"; + let textureName = oniItem.id + "_group_sprite"; let indexDrawPart = 0; for (let spriteModifier of oniItem.spriteGroup.spriteModifiers) { - - if (spriteModifier.tags.indexOf(SpriteTag.solid) == -1 || + if ( + spriteModifier.tags.indexOf(SpriteTag.solid) == -1 || spriteModifier.tags.indexOf(SpriteTag.tileable) != -1 || - spriteModifier.tags.indexOf(SpriteTag.connection) != -1) continue; + spriteModifier.tags.indexOf(SpriteTag.connection) != -1 + ) + continue; // Remove from the database building sprite list - let indexToRemove = buildingInDatabase.sprites.spriteNames.indexOf(spriteModifier.spriteModifierId); + let indexToRemove = buildingInDatabase.sprites.spriteNames.indexOf( + spriteModifier.spriteModifierId + ); buildingInDatabase.sprites.spriteNames.splice(indexToRemove, 1); // Then from the sprite modifiers - let spriteModifierToRemove = database.spriteModifiers.find((s) => { return s.name == spriteModifier.spriteModifierId; }) + let spriteModifierToRemove = database.spriteModifiers.find((s) => { + return s.name == spriteModifier.spriteModifierId; + }); if (spriteModifierToRemove != null) { - indexToRemove = database.spriteModifiers.indexOf(spriteModifierToRemove); + indexToRemove = database.spriteModifiers.indexOf( + spriteModifierToRemove + ); database.spriteModifiers.splice(indexToRemove, 1); } - let spriteInfoToRemove = database.uiSprites.find((s) => { return s.name == spriteModifier.spriteInfoName }); + let spriteInfoToRemove = database.uiSprites.find((s) => { + return s.name == spriteModifier.spriteInfoName; + }); if (spriteInfoToRemove != null) { indexToRemove = database.uiSprites.indexOf(spriteInfoToRemove); database.uiSprites.splice(indexToRemove, 1); } - let spriteInfo = SpriteInfo.getSpriteInfo(spriteModifier.spriteInfoName); + let spriteInfo = SpriteInfo.getSpriteInfo( + spriteModifier.spriteInfoName + ); let texture = spriteInfo.getTexture(this.drawPixi); let sprite = PIXI.Sprite.from(texture); - sprite.anchor.set(spriteInfo.pivot.x, 1-spriteInfo.pivot.y); - sprite.x = 0 + (spriteModifier.translation.x); - sprite.y = 0 - (spriteModifier.translation.y); + sprite.anchor.set(spriteInfo.pivot.x, 1 - spriteInfo.pivot.y); + sprite.x = 0 + spriteModifier.translation.x; + sprite.y = 0 - spriteModifier.translation.y; sprite.width = spriteInfo.realSize.x; sprite.height = spriteInfo.realSize.y; sprite.scale.x = spriteModifier.scale.x; sprite.scale.y = spriteModifier.scale.y; sprite.angle = -spriteModifier.rotation; - sprite.zIndex -= (indexDrawPart / 50) + sprite.zIndex -= indexDrawPart / 50; container.addChild(sprite); @@ -399,8 +464,6 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh buildingInDatabase.sprites.spriteNames.push(modifierId); - - container.calculateBounds(); let bounds = container.getBounds(); bounds.x = Math.floor(bounds.x); @@ -411,19 +474,26 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh let diff = new Vector2(bounds.x, bounds.y); for (let child of container.children) { child.x -= diff.x; - child.y -= diff.y + child.y -= diff.y; } - let pivot = new Vector2(1 - ((bounds.width + bounds.x) / bounds.width), ((bounds.height + bounds.y) / bounds.height)); + let pivot = new Vector2( + 1 - (bounds.width + bounds.x) / bounds.width, + (bounds.height + bounds.y) / bounds.height + ); //console.log(pivot); - let brt = new PIXI.BaseRenderTexture({width: bounds.width, height: bounds.height, scaleMode: PIXI.SCALE_MODES.NEAREST}); + let brt = new PIXI.BaseRenderTexture({ + width: bounds.width, + height: bounds.height, + scaleMode: PIXI.SCALE_MODES.NEAREST, + }); let rt = new PIXI.RenderTexture(brt); this.drawPixi.pixiApp.renderer.render(container, rt); renderTextures.push(rt); - textureNames.push(textureName) + textureNames.push(textureName); // Create and add the new sprite modifier to replace the group let newSpriteModifier = new BSpriteModifier(); @@ -444,26 +514,28 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh newSpriteInfo.realSize = new Vector2(bounds.width, bounds.height); newSpriteInfo.uvSize = new Vector2(bounds.width, bounds.height); database.uiSprites.push(newSpriteInfo); - } - else console.log(oniItem.id + ' should not be grouped') - + } else console.log(oniItem.id + " should not be grouped"); } ComponentCanvasComponent.zip = new JSZip(); ComponentCanvasComponent.nbBlob = 0; - ComponentCanvasComponent.downloadFile = 'solidGroups.zip'; + ComponentCanvasComponent.downloadFile = "solidGroups.zip"; ComponentCanvasComponent.nbBlobMax = renderTextures.length; - ComponentCanvasComponent.zip.file('database_groups.json', JSON.stringify(database, null, 2)); - - for (let indexRt = 0; indexRt < renderTextures.length; indexRt++) this.drawPixi.pixiApp.renderer.extract.canvas(renderTextures[indexRt]).toBlob((b) => - { - this.addBlob(b, textureNames[indexRt] + '.png'); - }, 'image/png'); + ComponentCanvasComponent.zip.file( + "database_groups.json", + JSON.stringify(database, null, 2) + ); + + for (let indexRt = 0; indexRt < renderTextures.length; indexRt++) + this.drawPixi.pixiApp.renderer.extract + .canvas(renderTextures[indexRt]) + .toBlob((b) => { + this.addBlob(b, textureNames[indexRt] + ".png"); + }, "image/png"); } - repackTextures(database: any) - { + repackTextures(database: any) { /* // Tests bintrays let traySize = 1024; @@ -478,7 +550,7 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh binController.addItem('test_2', new Vector2(10, 50), bleed); binController.addItem('test_3', new Vector2(10, 50), bleed); */ -/* + /* // First, we clone the existing spriteInfos into a new array : let newSpriteInfos: BSpriteInfo[] = []; @@ -550,21 +622,22 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh */ } - downloadIcons() - { - + downloadIcons() { ComponentCanvasComponent.zip = new JSZip(); ComponentCanvasComponent.nbBlob = 0; - ComponentCanvasComponent.downloadFile = 'icons.zip'; - ComponentCanvasComponent.nbBlobMax = SpriteInfo.keys.filter(s => SpriteInfo.getSpriteInfo(s).isIcon).length; - - for (let k of SpriteInfo.keys.filter(s => SpriteInfo.getSpriteInfo(s).isIcon)) - { + ComponentCanvasComponent.downloadFile = "icons.zip"; + ComponentCanvasComponent.nbBlobMax = SpriteInfo.keys.filter( + (s) => SpriteInfo.getSpriteInfo(s).isIcon + ).length; + + for (let k of SpriteInfo.keys.filter( + (s) => SpriteInfo.getSpriteInfo(s).isIcon + )) { let uiSpriteInfo = SpriteInfo.getSpriteInfo(k); let texture = uiSpriteInfo.getTexture(this.drawPixi); - let uiSprite =  PIXI.Sprite.from(texture); + let uiSprite = PIXI.Sprite.from(texture); - let size = Math.max(texture.width, texture.height) + let size = Math.max(texture.width, texture.height); let container = new PIXI.Container(); container.addChild(uiSprite); @@ -572,16 +645,22 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh uiSprite.x = 0; uiSprite.y = 0; - if (texture.width > texture.height) uiSprite.y += (texture.width / 2 - texture.height / 2); - if (texture.height > texture.width) uiSprite.x += (texture.height / 2 - texture.width / 2); + if (texture.width > texture.height) + uiSprite.y += texture.width / 2 - texture.height / 2; + if (texture.height > texture.width) + uiSprite.x += texture.height / 2 - texture.width / 2; - let brt = new PIXI.BaseRenderTexture({width: size, height: size, scaleMode: PIXI.SCALE_MODES.LINEAR}); + let brt = new PIXI.BaseRenderTexture({ + width: size, + height: size, + scaleMode: PIXI.SCALE_MODES.LINEAR, + }); let rt = new PIXI.RenderTexture(brt); this.drawPixi.pixiApp.renderer.render(container, rt, true); this.drawPixi.pixiApp.renderer.extract.canvas(rt).toBlob((blob) => { - this.addBlob(blob, k + '.png'); - }, 'image/png'); + this.addBlob(blob, k + ".png"); + }, "image/png"); } } @@ -589,47 +668,50 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh private static nbBlobMax: number; private static nbBlob: number; private static zip: JSZip; - addBlob(blob: Blob, filename: string) - { - + addBlob(blob: Blob, filename: string) { ComponentCanvasComponent.nbBlob++; ComponentCanvasComponent.zip.file(filename, blob); - if (ComponentCanvasComponent.nbBlob == ComponentCanvasComponent.nbBlobMax) - { - console.log('last blob arrived!'); - ComponentCanvasComponent.zip.generateAsync({type:"blob"}).then(function (blob) { - let a = document.createElement('a'); - document.body.append(a); - a.download = ComponentCanvasComponent.downloadFile; - a.href = URL.createObjectURL(blob); - a.click(); - a.remove(); - }); + if (ComponentCanvasComponent.nbBlob == ComponentCanvasComponent.nbBlobMax) { + console.log("last blob arrived!"); + ComponentCanvasComponent.zip + .generateAsync({ type: "blob" }) + .then(function (blob) { + let a = document.createElement("a"); + document.body.append(a); + a.download = ComponentCanvasComponent.downloadFile; + a.href = URL.createObjectURL(blob); + a.click(); + a.remove(); + }); } } updateThumbnail() { - //console.log('updateThumbnail') this.blueprintService.thumbnail = null; - let clone = this.blueprint.clone(); - if (clone.blueprintItems.length == 0) throw new Error('No buildings to export') + if (clone.blueprintItems.length == 0) + throw new Error("No buildings to export"); let boundingBox = clone.getBoundingBox(); let topLeft = boundingBox[0]; let bottomRight = boundingBox[1]; - let totalTileSize = new Vector2(bottomRight.x - topLeft.x + 3, bottomRight.y - topLeft.y + 3); + let totalTileSize = new Vector2( + bottomRight.x - topLeft.x + 3, + bottomRight.y - topLeft.y + 3 + ); let thumbnailSize = 200; let maxTotalSize = Math.max(totalTileSize.x, totalTileSize.y); let thumbnailTileSize = thumbnailSize / maxTotalSize; let cameraOffset = new Vector2(-topLeft.x + 1, bottomRight.y + 1); - if (totalTileSize.x > totalTileSize.y) cameraOffset.y += totalTileSize.x / 2 - totalTileSize.y / 2; - if (totalTileSize.y > totalTileSize.x) cameraOffset.x += totalTileSize.y / 2 - totalTileSize.x / 2; + if (totalTileSize.x > totalTileSize.y) + cameraOffset.y += totalTileSize.x / 2 - totalTileSize.y / 2; + if (totalTileSize.y > totalTileSize.x) + cameraOffset.x += totalTileSize.y / 2 - totalTileSize.x / 2; let exportCamera = new CameraService(this.drawPixi.getNewContainer()); exportCamera.setHardZoom(thumbnailTileSize); @@ -651,13 +733,19 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh item.drawPixi(exportCamera, this.drawPixi); }); - let brt = new PIXI.BaseRenderTexture({width: thumbnailSize, height: thumbnailSize, scaleMode: PIXI.SCALE_MODES.LINEAR}); + let brt = new PIXI.BaseRenderTexture({ + width: thumbnailSize, + height: thumbnailSize, + scaleMode: PIXI.SCALE_MODES.LINEAR, + }); let rt = new PIXI.RenderTexture(brt); this.drawPixi.pixiApp.renderer.render(exportCamera.container, rt, false); this.drawPixi.pixiApp.renderer.extract.canvas(rt).toBlob((blob) => { let reader = new FileReader(); - reader.onload = () => { this.blueprintService.thumbnail = reader.result as string; }; + reader.onload = () => { + this.blueprintService.thumbnail = reader.result as string; + }; reader.readAsDataURL(blob); /* @@ -674,16 +762,23 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh saveImages(exportOptions: ExportImageOptions) { let clone = this.blueprint.clone(); - if (clone.blueprintItems.length == 0) throw new Error('No buildings to export') + if (clone.blueprintItems.length == 0) + throw new Error("No buildings to export"); let boundingBox = clone.getBoundingBox(); let topLeft = boundingBox[0]; let bottomRight = boundingBox[1]; let tileSize = exportOptions.pixelsPerTile; - let totalTileSize = new Vector2(bottomRight.x - topLeft.x + 3, bottomRight.y - topLeft.y + 3); - console.log(totalTileSize) - let sizeInPixels = new Vector2(totalTileSize.x * tileSize, totalTileSize.y * tileSize) + let totalTileSize = new Vector2( + bottomRight.x - topLeft.x + 3, + bottomRight.y - topLeft.y + 3 + ); + console.log(totalTileSize); + let sizeInPixels = new Vector2( + totalTileSize.x * tileSize, + totalTileSize.y * tileSize + ); let exportCamera = new CameraService(this.drawPixi.getNewContainer()); exportCamera.setHardZoom(tileSize); @@ -695,17 +790,16 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh exportCamera.container.addChild(graphics); // TODO color in parameter - graphics.beginFill(0x007AD9); + graphics.beginFill(0x007ad9); graphics.drawRect(0, 0, sizeInPixels.x, sizeInPixels.y); graphics.endFill(); ComponentCanvasComponent.zip = new JSZip(); ComponentCanvasComponent.nbBlob = 0; - ComponentCanvasComponent.downloadFile = 'export.zip'; + ComponentCanvasComponent.downloadFile = "export.zip"; ComponentCanvasComponent.nbBlobMax = exportOptions.selectedOverlays.length; exportOptions.selectedOverlays.map((overlay) => { - exportCamera.overlay = overlay; clone.blueprintItems.map((item) => { @@ -713,21 +807,25 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh item.drawPixi(exportCamera, this.drawPixi); }); - let brt = new PIXI.BaseRenderTexture({width: sizeInPixels.x, height: sizeInPixels.y, scaleMode: PIXI.SCALE_MODES.LINEAR}); + let brt = new PIXI.BaseRenderTexture({ + width: sizeInPixels.x, + height: sizeInPixels.y, + scaleMode: PIXI.SCALE_MODES.LINEAR, + }); let rt = new PIXI.RenderTexture(brt); this.drawPixi.pixiApp.renderer.render(exportCamera.container, rt, false); this.drawPixi.pixiApp.renderer.extract.canvas(rt).toBlob((blob) => { - this.addBlob(blob, 'export_' + DrawHelpers.overlayString[overlay] + '.png'); + this.addBlob( + blob, + "export_" + DrawHelpers.overlayString[overlay] + ".png" + ); }); }); - - } - drawAll() - { + drawAll() { //console.log(this.running); //console.log('tick'); // Check that we're still running. @@ -735,7 +833,6 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh return; } - // Whole page dimensions this.width = window.innerWidth; this.height = window.innerHeight; @@ -753,13 +850,11 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh if (this.forceSize) { this.canvasRef.nativeElement.width = this.forcedSize.x; this.canvasRef.nativeElement.height = this.forcedSize.y; - } - else { + } else { this.canvasRef.nativeElement.width = window.innerWidth; this.canvasRef.nativeElement.height = window.innerHeight; } - this.cameraService.updateZoom(); //console.log('tick'); @@ -770,7 +865,8 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh this.drawPixi.clearGraphics(); //if (this.cameraService.visualization == Visualization.temperature) this.drawPixi.FillRect(0x909090, 0, 0, this.width, this.height); - if (this.cameraService.display == Display.blueprint) this.drawPixi.FillRect(0x007AD9, 0, 0, this.width, this.height); + if (this.cameraService.display == Display.blueprint) + this.drawPixi.FillRect(0x007ad9, 0, 0, this.width, this.height); else this.drawPixi.FillRect(0x909090, 0, 0, this.width, this.height); let alphaOrig: number = 0.4; @@ -780,38 +876,62 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh let zoomFadeMax: number = 35; let zoomFadeMin: number = 25; if (this.cameraService.currentZoom < zoomFadeMax) - alpha *= (this.cameraService.currentZoom - zoomFadeMin) / (zoomFadeMax - zoomFadeMin); - if (this.cameraService.currentZoom < zoomFadeMin) - alpha = 0; - + alpha *= + (this.cameraService.currentZoom - zoomFadeMin) / + (zoomFadeMax - zoomFadeMin); + if (this.cameraService.currentZoom < zoomFadeMin) alpha = 0; //while (realLineSpacing < 30) // realLineSpacing *= 5; - let colOrig: number = this.cameraService.cameraOffset.x * this.cameraService.currentZoom % (realLineSpacing * 5) - realLineSpacing * 4; + let colOrig: number = + ((this.cameraService.cameraOffset.x * this.cameraService.currentZoom) % + (realLineSpacing * 5)) - + realLineSpacing * 4; let mod = 0; - for (let col = colOrig; col < this.width + realLineSpacing * 4; col += realLineSpacing) - { - let realAlpha = (mod % 5) == 0 ? alphaOrig + 0.3 : alpha; - let color = 'rgba(255,255,255, '+realAlpha+')'; - if (realAlpha > 0) this.drawPixi.drawBlueprintLine(color, realAlpha, new Vector2(col, 0), new Vector2(col, this.height), 1); + for ( + let col = colOrig; + col < this.width + realLineSpacing * 4; + col += realLineSpacing + ) { + let realAlpha = mod % 5 == 0 ? alphaOrig + 0.3 : alpha; + let color = "rgba(255,255,255, " + realAlpha + ")"; + if (realAlpha > 0) + this.drawPixi.drawBlueprintLine( + color, + realAlpha, + new Vector2(col, 0), + new Vector2(col, this.height), + 1 + ); mod++; } - let lineOrig = this.cameraService.cameraOffset.y * this.cameraService.currentZoom % (realLineSpacing * 5) - realLineSpacing * 4 + let lineOrig = + ((this.cameraService.cameraOffset.y * this.cameraService.currentZoom) % + (realLineSpacing * 5)) - + realLineSpacing * 4; mod = 0; - for (let line = lineOrig; line < this.height + realLineSpacing * 4; line += realLineSpacing) - { - let realAlpha = (mod % 5) == 0 ? alphaOrig + 0.3 : alpha; - let color = 'rgba(255,255,255, '+realAlpha+')'; - if (realAlpha > 0) this.drawPixi.drawBlueprintLine(color, realAlpha, new Vector2(0, line), new Vector2(this.width, line), 1); + for ( + let line = lineOrig; + line < this.height + realLineSpacing * 4; + line += realLineSpacing + ) { + let realAlpha = mod % 5 == 0 ? alphaOrig + 0.3 : alpha; + let color = "rgba(255,255,255, " + realAlpha + ")"; + if (realAlpha > 0) + this.drawPixi.drawBlueprintLine( + color, + realAlpha, + new Vector2(0, line), + new Vector2(this.width, line), + 1 + ); mod++; } - if (this.blueprint != null) - { - for (var templateItem of this.blueprint.blueprintItems) - { + if (this.blueprint != null) { + for (var templateItem of this.blueprint.blueprintItems) { //templateItem.updateTileables(this.blueprint); this.drawPixi.drawTemplateItem(templateItem, this.cameraService); //templateItem.draw(ctx, this.camera); @@ -834,13 +954,20 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh this.cameraService.updateAnimations(this.drawPixi.pixiApp.ticker.elapsedMS); } - drawBlueprintLine(ctx: CanvasRenderingContext2D, xStart: number, yStart: number, xEnd: number, yEnd: number, lineWidth: number, alpha: number) - { + drawBlueprintLine( + ctx: CanvasRenderingContext2D, + xStart: number, + yStart: number, + xEnd: number, + yEnd: number, + lineWidth: number, + alpha: number + ) { let offset: number = (lineWidth % 2) / 2; ctx.beginPath(); ctx.moveTo(Math.floor(xStart) + offset, Math.floor(yStart) + offset); - ctx.strokeStyle = "rgba(255,255,255, "+alpha+")"; + ctx.strokeStyle = "rgba(255,255,255, " + alpha + ")"; ctx.lineWidth = lineWidth; ctx.lineTo(Math.floor(xEnd) + offset, Math.floor(yEnd) + offset); ctx.stroke(); @@ -851,8 +978,11 @@ export class ComponentCanvasComponent implements OnInit, OnDestroy, IObsCameraCh for (let blueprintItem of this.blueprint.blueprintItems) blueprintItem.cameraChanged(camera); - if (this.toolService != null && this.toolService.buildTool != null && this.toolService.buildTool.templateItemToBuild != null) + if ( + this.toolService != null && + this.toolService.buildTool != null && + this.toolService.buildTool.templateItemToBuild != null + ) this.toolService.buildTool.templateItemToBuild.cameraChanged(camera); } - } diff --git a/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.css b/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.css index 9d97bd3a..10b917a1 100644 --- a/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.css +++ b/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.css @@ -5,4 +5,4 @@ .like-bloc { margin-right: 1em; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.html b/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.html index 38392d89..b3a85f86 100644 --- a/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.html +++ b/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.html @@ -1,21 +1,61 @@ - - -
- - - + +
+ + + +
- - - + + + diff --git a/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.spec.ts b/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.spec.ts index a9bef1f1..821ff8f9 100644 --- a/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ComponentMenuComponent } from './component-menu.component'; +import { ComponentMenuComponent } from "./component-menu.component"; -describe('ComponentMenuComponent', () => { +describe("ComponentMenuComponent", () => { let component: ComponentMenuComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ComponentMenuComponent ] - }) - .compileComponents(); + declarations: [ComponentMenuComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ComponentMenuComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.ts b/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.ts index 3da456c6..84c48cee 100644 --- a/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.ts +++ b/frontend/src/app/module-blueprint/components/component-menu/component-menu.component.ts @@ -1,38 +1,56 @@ -import { Component, EventEmitter, Inject, LOCALE_ID, OnInit, Output } from '@angular/core'; -import { Router } from '@angular/router'; -import { MenuItem, MessageService } from 'primeng/api'; -import { CameraService, Display, DrawHelpers, IObsCameraChanged, Overlay, Visualization } from '../../../../../../lib/index'; -import { ToolType } from '../../common/tools/tool'; -import { AuthenticationService } from '../../services/authentification-service'; -import { BlueprintFileType, BlueprintService } from '../../services/blueprint-service'; -import { IObsToolChanged, ToolService } from '../../services/tool-service'; +import { + Component, + EventEmitter, + Inject, + LOCALE_ID, + OnInit, + Output, +} from "@angular/core"; +import { Router } from "@angular/router"; +import { MenuItem, MessageService } from "primeng/api"; +import { + CameraService, + Display, + DrawHelpers, + IObsCameraChanged, + Overlay, + Visualization, +} from "../../../../../../lib/index"; +import { ToolType } from "../../common/tools/tool"; +import { AuthenticationService } from "../../services/authentification-service"; +import { + BlueprintFileType, + BlueprintService, +} from "../../services/blueprint-service"; +import { IObsToolChanged, ToolService } from "../../services/tool-service"; const ALL_LANGUAGES = [ { - code: 'en-US', - name: $localize`:language name here:en-US` + code: "en-US", + name: $localize`:language name here:en-US`, }, { - code: 'zh-Hans', - name: $localize`:language name here:zh-Hans` + code: "zh-Hans", + name: $localize`:language name here:zh-Hans`, }, { - code: 'ru', - name: $localize`:language name here:ru` + code: "ru", + name: $localize`:language name here:ru`, }, { - code: 'ko', - name: $localize`:language name here:ko` + code: "ko", + name: $localize`:language name here:ko`, }, -] +]; @Component({ - selector: 'app-component-menu', - templateUrl: './component-menu.component.html', - styleUrls: ['./component-menu.component.css'] + selector: "app-component-menu", + templateUrl: "./component-menu.component.html", + styleUrls: ["./component-menu.component.css"], }) -export class ComponentMenuComponent implements OnInit, IObsToolChanged, IObsCameraChanged { - +export class ComponentMenuComponent + implements OnInit, IObsToolChanged, IObsCameraChanged +{ @Output() menuCommand = new EventEmitter(); menuItems: MenuItem[]; @@ -42,10 +60,12 @@ export class ComponentMenuComponent implements OnInit, IObsToolChanged, IObsCame toolMenuItems: MenuItem[]; languagesMenuItems: MenuItem[]; - static debugFps: number = 0 - public getFps() { return ComponentMenuComponent.debugFps; } + static debugFps: number = 0; + public getFps() { + return ComponentMenuComponent.debugFps; + } - private cameraService: CameraService + private cameraService: CameraService; constructor( //TODO should not be public @@ -54,127 +74,286 @@ export class ComponentMenuComponent implements OnInit, IObsToolChanged, IObsCame private toolService: ToolService, private blueprintService: BlueprintService, private router: Router, - @Inject(LOCALE_ID) private locale: string) { + @Inject(LOCALE_ID) private locale: string + ) { this.toolService.subscribeToolChanged(this); this.cameraService = CameraService.cameraService; this.cameraService.subscribeCameraChange(this); - } - // TODO this causes errors get dynamicMenuItems() { - let blueprintMenuItems = this.menuItems.find((i) => i.id == 'blueprint').items as MenuItem[]; - blueprintMenuItems.find((i) => i.id == 'save').disabled = !this.authService.isLoggedIn(); + let blueprintMenuItems = this.menuItems.find((i) => i.id == "blueprint") + .items as MenuItem[]; + blueprintMenuItems.find((i) => i.id == "save").disabled = + !this.authService.isLoggedIn(); return this.menuItems; } ngOnInit() { - - let overlayList: { id: Overlay, name: string }[] = [ - { id: Overlay.Base, name: $localize`:overlay switch on the menu:Buildings` }, + let overlayList: { id: Overlay; name: string }[] = [ + { + id: Overlay.Base, + name: $localize`:overlay switch on the menu:Buildings`, + }, { id: Overlay.Power, name: $localize`:overlay switch on the menu:Power` }, - { id: Overlay.Liquid, name: $localize`:overlay switch on the menu:Plumbing` }, - { id: Overlay.Gas, name: $localize`:overlay switch on the menu:Ventilation` }, - { id: Overlay.Automation, name: $localize`:overlay switch on the menu:Automation` }, - { id: Overlay.Conveyor, name: $localize`:overlay switch on the menu:Shipment` } - ] + { + id: Overlay.Liquid, + name: $localize`:overlay switch on the menu:Plumbing`, + }, + { + id: Overlay.Gas, + name: $localize`:overlay switch on the menu:Ventilation`, + }, + { + id: Overlay.Automation, + name: $localize`:overlay switch on the menu:Automation`, + }, + { + id: Overlay.Conveyor, + name: $localize`:overlay switch on the menu:Shipment`, + }, + ]; this.overlayMenuItems = []; overlayList.map((overlay) => { this.overlayMenuItems.push({ label: overlay.name, id: overlay.id.toString(), - command: (event) => { this.clickOverlay(event); } - }) + command: (event) => { + this.clickOverlay(event); + }, + }); }); this.displayMenuItems = []; - this.displayMenuItems.push({ label: $localize`Blueprint`, id: Display.blueprint.toString(), command: (event) => { this.clickDisplay(event); } }); - this.displayMenuItems.push({ label: $localize`Color`, id: Display.solid.toString(), command: (event) => { this.clickDisplay(event); } }); + this.displayMenuItems.push({ + label: $localize`Blueprint`, + id: Display.blueprint.toString(), + command: (event) => { + this.clickDisplay(event); + }, + }); + this.displayMenuItems.push({ + label: $localize`Color`, + id: Display.solid.toString(), + command: (event) => { + this.clickDisplay(event); + }, + }); this.visualizationMenuItems = []; - this.visualizationMenuItems.push({ label: $localize`None`, id: Visualization.none.toString(), command: (event) => { this.clickVisualization(event); } }); - this.visualizationMenuItems.push({ label: $localize`Temperature`, id: Visualization.temperature.toString(), command: (event) => { this.clickVisualization(event); } }); - this.visualizationMenuItems.push({ label: $localize`Elements`, id: Visualization.elements.toString(), command: (event) => { this.clickVisualization(event); } }); + this.visualizationMenuItems.push({ + label: $localize`None`, + id: Visualization.none.toString(), + command: (event) => { + this.clickVisualization(event); + }, + }); + this.visualizationMenuItems.push({ + label: $localize`Temperature`, + id: Visualization.temperature.toString(), + command: (event) => { + this.clickVisualization(event); + }, + }); + this.visualizationMenuItems.push({ + label: $localize`Elements`, + id: Visualization.elements.toString(), + command: (event) => { + this.clickVisualization(event); + }, + }); this.toolMenuItems = [ - { label: $localize`Select`, id: ToolType[ToolType.select], command: (event) => { this.clickTool(ToolType.select); } }, - { label: $localize`Build`, id: ToolType[ToolType.build], command: (event) => { this.clickTool(ToolType.build); } }, + { + label: $localize`Select`, + id: ToolType[ToolType.select], + command: (event) => { + this.clickTool(ToolType.select); + }, + }, + { + label: $localize`Build`, + id: ToolType[ToolType.build], + command: (event) => { + this.clickTool(ToolType.build); + }, + }, ]; this.languagesMenuItems = []; for (const lang of ALL_LANGUAGES) { if (lang.code === this.locale) continue; - this.languagesMenuItems.push({ label: lang.name, url: (this.locale === 'en-US' ? '/' : '/../') + lang.code }); + this.languagesMenuItems.push({ + label: lang.name, + url: (this.locale === "en-US" ? "/" : "/../") + lang.code, + }); } this.menuItems = [ { - id: 'blueprint', + id: "blueprint", label: $localize`Blueprint`, items: [ - { label: $localize`New`, icon: 'pi pi-plus', command: (event) => { this.menuCommand.emit({ type: MenuCommandType.newBlueprint, data: null }); } }, - { id: 'save', label: $localize`Save`, icon: 'pi pi-save', command: (event) => { this.menuCommand.emit({ type: MenuCommandType.saveBlueprint, data: null }); } }, { - label: $localize`Upload`, icon: 'pi pi-upload', items: [ - { label: $localize`Game (yaml)`, command: (event) => { this.uploadYamlTemplate(); } }, - { label: $localize`Blueprint (json)`, command: (event) => { this.uploadJsonTemplate(); } }, - { label: $localize`Blueprint (binary)`, command: (event) => { this.uploadBsonTemplate(); } } - ] + label: $localize`New`, + icon: "pi pi-plus", + command: (event) => { + this.menuCommand.emit({ + type: MenuCommandType.newBlueprint, + data: null, + }); + }, }, { - label: $localize`Download`, icon: 'pi pi-download', items: [ - { label: $localize`Blueprint (json)`, command: (event) => { this.menuCommand.emit({ type: MenuCommandType.exportBlueprint, data: null }); } } - ] + id: "save", + label: $localize`Save`, + icon: "pi pi-save", + command: (event) => { + this.menuCommand.emit({ + type: MenuCommandType.saveBlueprint, + data: null, + }); + }, }, - { label: $localize`Browse`, icon: 'pi pi-search', command: (event) => { this.menuCommand.emit({ type: MenuCommandType.browseBlueprints, data: null }); } }, - { label: $localize`Get shareable Url`, icon: 'pi pi-share-alt', command: (event) => { this.menuCommand.emit({ type: MenuCommandType.getShareableUrl, data: null }); } }, - { label: $localize`Export images`, icon: 'pi pi-images', command: (event) => { this.menuCommand.emit({ type: MenuCommandType.exportImages, data: null }); } } - ] + { + label: $localize`Upload`, + icon: "pi pi-upload", + items: [ + { + label: $localize`Game (yaml)`, + command: (event) => { + this.uploadYamlTemplate(); + }, + }, + { + label: $localize`Blueprint (json)`, + command: (event) => { + this.uploadJsonTemplate(); + }, + }, + { + label: $localize`Blueprint (binary)`, + command: (event) => { + this.uploadBsonTemplate(); + }, + }, + ], + }, + { + label: $localize`Download`, + icon: "pi pi-download", + items: [ + { + label: $localize`Blueprint (json)`, + command: (event) => { + this.menuCommand.emit({ + type: MenuCommandType.exportBlueprint, + data: null, + }); + }, + }, + ], + }, + { + label: $localize`Browse`, + icon: "pi pi-search", + command: (event) => { + this.menuCommand.emit({ + type: MenuCommandType.browseBlueprints, + data: null, + }); + }, + }, + { + label: $localize`Get shareable Url`, + icon: "pi pi-share-alt", + command: (event) => { + this.menuCommand.emit({ + type: MenuCommandType.getShareableUrl, + data: null, + }); + }, + }, + { + label: $localize`Export images`, + icon: "pi pi-images", + command: (event) => { + this.menuCommand.emit({ + type: MenuCommandType.exportImages, + data: null, + }); + }, + }, + ], }, { label: $localize`Edit`, items: [ - { label: $localize`Undo`, icon: 'pi pi-undo', command: (event) => { this.blueprintService.undo(); } }, - { label: $localize`Redo`, icon: 'pi pi-replay', command: (event) => { this.blueprintService.redo(); } }, - ] + { + label: $localize`Undo`, + icon: "pi pi-undo", + command: (event) => { + this.blueprintService.undo(); + }, + }, + { + label: $localize`Redo`, + icon: "pi pi-replay", + command: (event) => { + this.blueprintService.redo(); + }, + }, + ], }, { label: $localize`Tools`, - items: this.toolMenuItems + items: this.toolMenuItems, }, { label: $localize`Overlay`, - items: this.overlayMenuItems + items: this.overlayMenuItems, }, { label: $localize`Visualization`, - items: this.visualizationMenuItems + items: this.visualizationMenuItems, }, { label: $localize`Display`, - items: this.displayMenuItems + items: this.displayMenuItems, }, { label: $localize`More`, items: [ { label: $localize`About`, - icon: 'pi pi-info-circle', command: (event) => { this.menuCommand.emit({ type: MenuCommandType.about, data: null }); } + icon: "pi pi-info-circle", + command: (event) => { + this.menuCommand.emit({ + type: MenuCommandType.about, + data: null, + }); + }, }, { label: $localize`Discord`, - icon: 'fab fa-discord', url: 'https://discord.gg/9gYwKaRujK', target: 'discord' + icon: "fab fa-discord", + url: "https://discord.gg/9gYwKaRujK", + target: "discord", }, { label: $localize`Github`, - icon: 'fab fa-github', url: 'https://github.com/Sinetheta/blueprintnotincluded', target: 'github' + icon: "fab fa-github", + url: "https://github.com/Sinetheta/blueprintnotincluded", + target: "github", }, - ] + ], }, { - label: ALL_LANGUAGES.find(l => l.code === this.locale)?.name || this.locale, - items: this.languagesMenuItems + label: + ALL_LANGUAGES.find((l) => l.code === this.locale)?.name || + this.locale, + items: this.languagesMenuItems, }, /* @@ -206,8 +385,9 @@ export class ComponentMenuComponent implements OnInit, IObsToolChanged, IObsCame updateToolIcon() { for (let menuItem of this.toolMenuItems) { if (!menuItem.separator) { - if (this.toolService.getTool(ToolType[menuItem.id]).visible) menuItem.icon = 'pi pi-fw pi-check'; - else menuItem.icon = 'pi pi-fw pi-none'; + if (this.toolService.getTool(ToolType[menuItem.id]).visible) + menuItem.icon = "pi pi-fw pi-check"; + else menuItem.icon = "pi pi-fw pi-none"; } } } @@ -220,10 +400,13 @@ export class ComponentMenuComponent implements OnInit, IObsToolChanged, IObsCame let userFilter: BrowseData = { filterUserId: this.authService.getUserDetails()._id, filterUserName: this.authService.getUserDetails().username, - getDuplicates: true - } + getDuplicates: true, + }; - this.menuCommand.emit({ type: MenuCommandType.browseBlueprints, data: userFilter }); + this.menuCommand.emit({ + type: MenuCommandType.browseBlueprints, + data: userFilter, + }); } cameraChanged(camera: CameraService) { @@ -234,35 +417,38 @@ export class ComponentMenuComponent implements OnInit, IObsToolChanged, IObsCame updateOverlayIcon(overlay: Overlay) { for (let menuItem of this.overlayMenuItems) { - if (menuItem.id == overlay.toString()) { menuItem.icon = 'pi pi-fw pi-check'; } - else menuItem.icon = 'pi pi-fw pi-none'; + if (menuItem.id == overlay.toString()) { + menuItem.icon = "pi pi-fw pi-check"; + } else menuItem.icon = "pi pi-fw pi-none"; } } updateDisplayIcon(display: Display) { for (let menuItem of this.displayMenuItems) { - if (menuItem.id == display.toString()) { menuItem.icon = 'pi pi-fw pi-check'; } - else menuItem.icon = 'pi pi-fw pi-none'; + if (menuItem.id == display.toString()) { + menuItem.icon = "pi pi-fw pi-check"; + } else menuItem.icon = "pi pi-fw pi-none"; } } updateVisualizationIcon(visualization: Visualization) { for (let menuItem of this.visualizationMenuItems) { - if (menuItem.id == visualization.toString()) { menuItem.icon = 'pi pi-fw pi-check'; } - else menuItem.icon = 'pi pi-fw pi-none'; + if (menuItem.id == visualization.toString()) { + menuItem.icon = "pi pi-fw pi-check"; + } else menuItem.icon = "pi pi-fw pi-none"; } } clickOverlay(event: any) { - this.cameraService.overlay = (event.item.id as Overlay); + this.cameraService.overlay = event.item.id as Overlay; } clickDisplay(event: any) { - this.cameraService.display = (event.item.id as Display); + this.cameraService.display = event.item.id as Display; } clickVisualization(event: any) { - this.cameraService.visualization = (event.item.id as Visualization); + this.cameraService.visualization = event.item.id as Visualization; } uploadYamlTemplate() { @@ -271,46 +457,65 @@ export class ComponentMenuComponent implements OnInit, IObsToolChanged, IObsCame } uploadJsonTemplate() { - let fileElem = document.getElementById("fileChooserJson") as HTMLInputElement; + let fileElem = document.getElementById( + "fileChooserJson" + ) as HTMLInputElement; fileElem.click(); } uploadBsonTemplate() { - let fileElem = document.getElementById("fileChooserBson") as HTMLInputElement; + let fileElem = document.getElementById( + "fileChooserBson" + ) as HTMLInputElement; fileElem.click(); } templateUpload(event: any) { let fileElem = document.getElementById("fileChooser") as HTMLInputElement; - this.blueprintService.openBlueprintFromUpload(BlueprintFileType.YAML, fileElem.files); - fileElem.value = ''; + this.blueprintService.openBlueprintFromUpload( + BlueprintFileType.YAML, + fileElem.files + ); + fileElem.value = ""; } templateUploadJson(event: any) { - let fileElem = document.getElementById("fileChooserJson") as HTMLInputElement; - this.blueprintService.openBlueprintFromUpload(BlueprintFileType.JSON, fileElem.files); - fileElem.value = ''; + let fileElem = document.getElementById( + "fileChooserJson" + ) as HTMLInputElement; + this.blueprintService.openBlueprintFromUpload( + BlueprintFileType.JSON, + fileElem.files + ); + fileElem.value = ""; } templateUploadBson(event: any) { - let fileElem = document.getElementById("fileChooserBson") as HTMLInputElement; - this.blueprintService.openBlueprintFromUpload(BlueprintFileType.BSON, fileElem.files); - fileElem.value = ''; + let fileElem = document.getElementById( + "fileChooserBson" + ) as HTMLInputElement; + this.blueprintService.openBlueprintFromUpload( + BlueprintFileType.BSON, + fileElem.files + ); + fileElem.value = ""; } login() { - this.menuCommand.emit({ type: MenuCommandType.showLoginDialog, data: null }); + this.menuCommand.emit({ + type: MenuCommandType.showLoginDialog, + data: null, + }); } logout() { this.authService.logout(); this.messageService.add({ - severity: 'success', + severity: "success", summary: $localize`Logout Successful`, - detail: null + detail: null, }); } - } export enum MenuCommandType { @@ -334,8 +539,7 @@ export enum MenuCommandType { repackTextures, addElementsTiles, - - showLoginDialog + showLoginDialog, } export class MenuCommand { diff --git a/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.css b/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.css index b1b949f5..0f509900 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.css +++ b/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.css @@ -1,8 +1,8 @@ .error-red { - color: darkred; + color: darkred; margin-left: 0.5em; } .radio-button { margin-left: 10px; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.html b/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.html index e95f1ecd..0bdfa2cc 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.html +++ b/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.html @@ -1,36 +1,67 @@
- - - -
+
- + -
+
Blueprint name is required.
-
Invalid characters in blueprint name
+
+ Invalid characters in blueprint name +
Blueprint name is too long
-
You already have a blueprint with this name. Overwrite?
-
You must be logged in to save a blueprint
+
+ You already have a blueprint with this name. Overwrite? +
+
+ You must be logged in to save a blueprint +
- - - - + + + - diff --git a/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.spec.ts b/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.spec.ts index c6dfed6b..1335bd40 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ComponentSaveDialogComponent } from './component-save-dialog.component'; +import { ComponentSaveDialogComponent } from "./component-save-dialog.component"; -describe('ComponentSaveDialogComponent', () => { +describe("ComponentSaveDialogComponent", () => { let component: ComponentSaveDialogComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ComponentSaveDialogComponent ] - }) - .compileComponents(); + declarations: [ComponentSaveDialogComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ComponentSaveDialogComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.ts b/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.ts index 4fc08d10..459d6fdd 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/component-save-dialog/component-save-dialog.component.ts @@ -1,33 +1,52 @@ -import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; -import { SaveInfo } from '../../../common/save-info'; -import { FormGroup, FormControl, Validators } from '@angular/forms'; -import { BlueprintService } from '../../../services/blueprint-service'; -import { MessageService } from 'primeng/api'; -import { AuthenticationService } from '../../../services/authentification-service'; -import { BlueprintNameValidationDirective } from 'src/app/module-blueprint/directives/blueprint-name-validation.directive'; -import { Display } from '../../../../../../../lib/index' +import { Component, OnInit, Output, EventEmitter, Input } from "@angular/core"; +import { SaveInfo } from "../../../common/save-info"; +import { FormGroup, FormControl, Validators } from "@angular/forms"; +import { BlueprintService } from "../../../services/blueprint-service"; +import { MessageService } from "primeng/api"; +import { AuthenticationService } from "../../../services/authentification-service"; +import { BlueprintNameValidationDirective } from "src/app/module-blueprint/directives/blueprint-name-validation.directive"; +import { Display } from "../../../../../../../lib/index"; @Component({ - selector: 'app-component-save-dialog', - templateUrl: './component-save-dialog.component.html', - styleUrls: ['./component-save-dialog.component.css'] + selector: "app-component-save-dialog", + templateUrl: "./component-save-dialog.component.html", + styleUrls: ["./component-save-dialog.component.css"], }) export class ComponentSaveDialogComponent { - visible: boolean = false; @Output() updateThumbnail = new EventEmitter(); saveBlueprintForm = new FormGroup({ - thumbnailType: new FormControl('Color', [Validators.required]), - name: new FormControl('', [Validators.required, BlueprintNameValidationDirective.validateBlueprintName]), - + thumbnailType: new FormControl("Color", [Validators.required]), + name: new FormControl("", [ + Validators.required, + BlueprintNameValidationDirective.validateBlueprintName, + ]), }); - get f() { return this.saveBlueprintForm.controls; } - get icon() { return this.working || this.blueprintService.thumbnail == null ? 'pi pi-spin pi-spinner' : ''; } - get saveLabel() { return this.blueprintService.thumbnail == null ? $localize`:saveLabel:Generating thumbnail` : $localize`:saveLabel:Save` } - get disabledSaveButton() { return !this.saveBlueprintForm.valid || this.saveBlueprintForm.pending || this.working || !this.authService.isLoggedIn() || this.blueprintService.thumbnail == null } + get f() { + return this.saveBlueprintForm.controls; + } + get icon() { + return this.working || this.blueprintService.thumbnail == null + ? "pi pi-spin pi-spinner" + : ""; + } + get saveLabel() { + return this.blueprintService.thumbnail == null + ? $localize`:saveLabel:Generating thumbnail` + : $localize`:saveLabel:Save`; + } + get disabledSaveButton() { + return ( + !this.saveBlueprintForm.valid || + this.saveBlueprintForm.pending || + this.working || + !this.authService.isLoggedIn() || + this.blueprintService.thumbnail == null + ); + } working: boolean = false; thumbnailReady: boolean = false; @@ -37,7 +56,8 @@ export class ComponentSaveDialogComponent { public blueprintService: BlueprintService, private messageService: MessageService, //TODO should not be public - public authService: AuthenticationService) { } + public authService: AuthenticationService + ) {} onSubmit() { this.working = true; @@ -45,27 +65,29 @@ export class ComponentSaveDialogComponent { this.blueprintService.name = this.saveBlueprintForm.value.name; this.blueprintService.saveBlueprint(false).subscribe({ next: this.handleSaveNext.bind(this), - error: this.handleSaveError.bind(this) + error: this.handleSaveError.bind(this), }); } // TODO this is ugly, use pipe map instead public id: string; handleSaveNext(response: any) { - if (response.overwrite) { this.overwrite = true; this.saveBlueprintForm.controls.name.disable(); this.working = false; - } - else { + } else { this.hideDialog(); // TODO move this to the service ? let summary: string = $localize`${this.blueprintService.name} saved`; - let detail: string = ''; + let detail: string = ""; - this.messageService.add({ severity: 'success', summary: summary, detail: detail }); + this.messageService.add({ + severity: "success", + summary: summary, + detail: detail, + }); this.working = false; } } @@ -73,20 +95,20 @@ export class ComponentSaveDialogComponent { handleSaveError() { this.hideDialog(); this.messageService.add({ - severity: 'error', + severity: "error", summary: $localize`Error saving blueprint`, }); this.working = false; } - intervalId: number; showDialog() { this.reset(); this.visible = true; - this.saveBlueprintForm.patchValue({ thumbnailType: 'Color' }); - if (this.blueprintService.name != null && this.blueprintService.name != '') this.saveBlueprintForm.patchValue({ name: this.blueprintService.name }); + this.saveBlueprintForm.patchValue({ thumbnailType: "Color" }); + if (this.blueprintService.name != null && this.blueprintService.name != "") + this.saveBlueprintForm.patchValue({ name: this.blueprintService.name }); } tryClearInterval() { @@ -106,12 +128,18 @@ export class ComponentSaveDialogComponent { changeThumbnail() { if (this.saveBlueprintForm.value.thumbnailType != null) { - let newStyle = this.saveBlueprintForm.value.thumbnailType == 'Color' ? Display.solid : Display.blueprint; + let newStyle = + this.saveBlueprintForm.value.thumbnailType == "Color" + ? Display.solid + : Display.blueprint; if (newStyle != this.blueprintService.thumbnailStyle) { this.blueprintService.thumbnailStyle = newStyle; this.updateThumbnail.emit(); //this.saveBlueprintForm.controls.thumbnailType.disable(); - this.intervalId = window.setInterval(this.updateThumbnailReady.bind(this), 500); + this.intervalId = window.setInterval( + this.updateThumbnailReady.bind(this), + 500 + ); } } } @@ -125,7 +153,10 @@ export class ComponentSaveDialogComponent { // We add an interval to check the thumbnail status, because it is generated outside angular this.tryClearInterval(); - this.intervalId = window.setInterval(this.updateThumbnailReady.bind(this), 500); + this.intervalId = window.setInterval( + this.updateThumbnailReady.bind(this), + 500 + ); } doNotOverwrite() { @@ -139,12 +170,11 @@ export class ComponentSaveDialogComponent { this.blueprintService.name = this.saveBlueprintForm.getRawValue().name; // Use get raw Value because it can be disabled this.blueprintService.saveBlueprint(true).subscribe({ next: this.handleSaveNext.bind(this), - error: this.handleSaveError.bind(this) + error: this.handleSaveError.bind(this), }); } hideDialog() { this.visible = false; } - } diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.css b/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.css index f5aef181..7c7da786 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.css +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.css @@ -1,20 +1,23 @@ .about-card { background-color: #ffffff; color: #333333; - border-radius: 3px; + border-radius: 3px; padding: 10px; height: 100%; display: flex; flex-flow: column; - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); } .header { display: flex; - width: 100% + width: 100%; } .block-title { @@ -36,7 +39,7 @@ .image-float-right { float: right; - margin-left: 20px + margin-left: 20px; } h1 { @@ -44,5 +47,5 @@ h1 { } .content { - text-align: justify + text-align: justify; } diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.html b/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.html index 7af32361..da5a7928 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.html +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.html @@ -1,41 +1,89 @@

About BlueprintNotIncluded

- +
-

What is this website ?

- - Hi! I created this website after playing Oyxgen not included for a while, browsing the subreddits and forums for the game. - One thing I noticed is that when sharing their builds, people usually share a bunch of imgur pictures with the different overlays. This is fine for simple builds, but you can't very well zoom in, switch overlays, look what the setting is on that buffer logic switch... - So I decided to create a tool where players could either upload the builds they created in game, or create their build from scratch on the web page. Here are some current features of the website : + + Hi! I created this website after playing + Oyxgen not included + for a while, browsing the subreddits and forums for the game. One thing I + noticed is that when sharing their builds, people usually share a bunch of + imgur pictures with the different overlays. This is fine for simple + builds, but you can't very well zoom in, switch overlays, look what the + setting is on that buffer logic switch... So I decided to create a tool + where players could either upload the builds they created in game, or + create their build from scratch on the web page. Here are some current + features of the website :
    -
  • You can build your blueprint from scratch using the various tools
    • +
  • + You can build your blueprint from scratch using the various tools +
  • You can import templates from the game (more on that later)
    • -
  • You can cycle between various overlays. each overlay will hightlight different buildings
    • +
  • + You can cycle between various overlays. each overlay will hightlight + different buildings +
  • You can save your blueprints
    • -
  • You can share your blueprints, by exporting png images for each overlay
    • -
  • Or by sharing a link that will directly open your blueprint! click here to open my SPOM in a new tab!
    • +
  • + You can share your blueprints, by exporting png images for each + overlay +
    • +
  • + Or by sharing a link that will directly open your blueprint! + click here to open my SPOM in a new tab! +
-
+

Controls

- + Camera controls :
    -
  • To move the camera with the mouse, press and hold the right mouse button, and drag the camera around
    • -
  • Alternatively, you can use the arrow keys to move the camera by one tile in the direction of the arrow
    • -
  • To zoom in / out, you can either use the mouse wheel, or use the "+" or "-" keys on your keypad
    • +
  • + To move the camera with the mouse, press and hold the right mouse + button, and drag the camera around +
    • +
  • + Alternatively, you can use the arrow keys to move the camera by one + tile in the direction of the arrow +
    • +
  • + To zoom in / out, you can either use the mouse wheel, or use the "+" + or "-" keys on your keypad +
Other Controls :
    -
  • Ctrl-Z and Ctrl-Y will "undo" / "redo" any action you just made. These are also available in the "Edit" menu
    • -
  • The "B" key will open the build tool. You can also get there with the "Tool : Build" menu
    • +
  • + Ctrl-Z and Ctrl-Y will "undo" / "redo" any action you just made. These + are also available in the "Edit" menu +
    • +
  • + The "B" key will open the build tool. You can also get there with the + "Tool : Build" menu +
diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.spec.ts b/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.spec.ts index 84467ab0..1811b4e6 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { DialogAboutComponent } from './dialog-about.component'; +import { DialogAboutComponent } from "./dialog-about.component"; -describe('DialogAboutComponent', () => { +describe("DialogAboutComponent", () => { let component: DialogAboutComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ DialogAboutComponent ] - }) - .compileComponents(); + declarations: [DialogAboutComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('DialogAboutComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.ts b/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.ts index fd3b6636..2f6a1a50 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-about/dialog-about.component.ts @@ -1,12 +1,11 @@ -import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; @Component({ - selector: 'app-dialog-about', - templateUrl: './dialog-about.component.html', - styleUrls: ['./dialog-about.component.css'] + selector: "app-dialog-about", + templateUrl: "./dialog-about.component.html", + styleUrls: ["./dialog-about.component.css"], }) export class DialogAboutComponent { - visible: boolean; toggleDialog() { diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.css b/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.css index 00b1371d..d84e90df 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.css +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.css @@ -1,5 +1,5 @@ .error-red { - color: darkred; + color: darkred; margin-left: 0.5em; } diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.html b/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.html index 21347b50..552379ce 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.html +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.html @@ -1,49 +1,116 @@ - - +
- +
- - - -
- + +
+
-
- - + + - - + + - + - + fill="none" + stroke="#fff" + stroke-width="20" + /> +
-
+
- {{item.name}} - -
+
- -
Created : {{this.datepipe.transform(item.createdAt, 'yyyy-MM-dd')}} +
+ Author : {{ item.ownerName }} +
+
+ Created : {{ this.datepipe.transform(item.createdAt, "yyyy-MM-dd") }}
-
Modified : {{this.datepipe.transform(item.modifiedAt, 'yyyy-MM-dd')}} +
+ Modified : + {{ this.datepipe.transform(item.modifiedAt, "yyyy-MM-dd") }}
-
- diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.spec.ts b/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.spec.ts index f3d5b8bd..cb9a44fc 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { DialogBrowseComponent } from './dialog-browse.component'; +import { DialogBrowseComponent } from "./dialog-browse.component"; -describe('DialogBrowseComponent', () => { +describe("DialogBrowseComponent", () => { let component: DialogBrowseComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ DialogBrowseComponent ] - }) - .compileComponents(); + declarations: [DialogBrowseComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('DialogBrowseComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.ts b/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.ts index ab203f9c..96af8da1 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-browse/dialog-browse.component.ts @@ -1,24 +1,34 @@ -import { Component, OnInit, ViewChild, ChangeDetectorRef, HostListener, AfterContentInit, ElementRef } from '@angular/core'; -import { BlueprintListItem, BlueprintListResponse } from '../../../../../../../lib/index'; -import { BlueprintService } from 'src/app/module-blueprint/services/blueprint-service'; -import { Dialog } from 'primeng/dialog'; -import { DatePipe } from '@angular/common'; -import { AuthenticationService } from 'src/app/module-blueprint/services/authentification-service'; -import { timingSafeEqual } from 'crypto'; -import { timer, Subject } from 'rxjs'; -import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators'; - -const LOADING_STR = $localize`Loading...` +import { + Component, + OnInit, + ViewChild, + ChangeDetectorRef, + HostListener, + AfterContentInit, + ElementRef, +} from "@angular/core"; +import { + BlueprintListItem, + BlueprintListResponse, +} from "../../../../../../../lib/index"; +import { BlueprintService } from "src/app/module-blueprint/services/blueprint-service"; +import { Dialog } from "primeng/dialog"; +import { DatePipe } from "@angular/common"; +import { AuthenticationService } from "src/app/module-blueprint/services/authentification-service"; +import { timingSafeEqual } from "crypto"; +import { timer, Subject } from "rxjs"; +import { switchMap, debounceTime, distinctUntilChanged } from "rxjs/operators"; + +const LOADING_STR = $localize`Loading...`; @Component({ - selector: 'app-dialog-browse', - templateUrl: './dialog-browse.component.html', - styleUrls: ['./dialog-browse.component.css'] + selector: "app-dialog-browse", + templateUrl: "./dialog-browse.component.html", + styleUrls: ["./dialog-browse.component.css"], }) export class DialogBrowseComponent implements OnInit { - - @ViewChild('browseDialog', {static: true}) browseDialog: Dialog - @ViewChild('scrollable', {static: true}) scrollable: ElementRef + @ViewChild("browseDialog", { static: true }) browseDialog: Dialog; + @ViewChild("scrollable", { static: true }) scrollable: ElementRef; visible: boolean = false; blueprintListItems: BlueprintListItem[]; @@ -30,69 +40,67 @@ export class DialogBrowseComponent implements OnInit { filterUserName: string; remaining: number; - filterUser: boolean; getDuplicates: boolean; filterNameSubject = new Subject(); filterName: string; loadingBlueprintItem: BlueprintListItem; - nothingBlueprintItem: BlueprintListItem + nothingBlueprintItem: BlueprintListItem; constructor( private blueprintService: BlueprintService, public authService: AuthenticationService, - public datepipe: DatePipe) { - + public datepipe: DatePipe + ) { let tempDate = new Date(); this.loadingBlueprintItem = { id: null, name: LOADING_STR, - ownerId: '', + ownerId: "", ownerName: LOADING_STR, createdAt: tempDate, modifiedAt: tempDate, - thumbnail: 'svg', + thumbnail: "svg", tags: null, likedByMe: false, ownedByMe: false, - nbLikes: 0 + nbLikes: 0, }; this.nothingBlueprintItem = { id: null, name: $localize`:nothingBlueprintItem.name:No Results`, - ownerId: '', + ownerId: "", ownerName: LOADING_STR, createdAt: tempDate, modifiedAt: tempDate, - thumbnail: 'svg_nothing', + thumbnail: "svg_nothing", tags: null, likedByMe: false, ownedByMe: false, - nbLikes: 0 + nbLikes: 0, }; - this.filterNameSubject.pipe( - debounceTime(1000)) + this.filterNameSubject + .pipe(debounceTime(1000)) //,distinctUntilChanged()) - .subscribe(value => { + .subscribe((value) => { this.filterNameChange(); }); - this.filterNameSubject.subscribe(value => { + this.filterNameSubject.subscribe((value) => { this.removeAll(); }); - } isReal(thumbnail: string): boolean { - return thumbnail != 'svg' && thumbnail != 'svg_nothing'; + return thumbnail != "svg" && thumbnail != "svg_nothing"; } ngOnInit() { this.browseDialog.onShow.subscribe({ - next: this.handleOnShow.bind(this) + next: this.handleOnShow.bind(this), }); this.reset(); @@ -132,17 +140,25 @@ export class DialogBrowseComponent implements OnInit { getBlueprints() { let filterName = null; - if (this.filterName != '' && this.filterName != null) filterName = this.filterName; - - this.blueprintService.getBlueprints(this.oldestDate, this.filterUserId, filterName, this.getDuplicates).subscribe({ - next: this.handleGetBlueprints.bind(this) - }); + if (this.filterName != "" && this.filterName != null) + filterName = this.filterName; + + this.blueprintService + .getBlueprints( + this.oldestDate, + this.filterUserId, + filterName, + this.getDuplicates + ) + .subscribe({ + next: this.handleGetBlueprints.bind(this), + }); } deleteBlueprint(item: BlueprintListItem) { this.blueprintService.deleteBlueprint(item.id).subscribe({ next: this.handleDeleteNext.bind(this), - error: this.handleDeleteError.bind(this) + error: this.handleDeleteError.bind(this), }); } @@ -154,12 +170,10 @@ export class DialogBrowseComponent implements OnInit { handleDeleteError() { // TODO cleaner handling here, but I don't remember how to do it - console.log('Error when deleting blueprint') + console.log("Error when deleting blueprint"); } - reset() { - this.filterUser = false; this.filterUserId = null; this.filterUserName = null; @@ -180,20 +194,24 @@ export class DialogBrowseComponent implements OnInit { } appendTemp() { - for (let i = 0; i < this.remaining; i++) this.blueprintListItems.push(this.loadingBlueprintItem); + for (let i = 0; i < this.remaining; i++) + this.blueprintListItems.push(this.loadingBlueprintItem); } openBlueprint(item: BlueprintListItem) { this.hideDialog(); - this.blueprintService.openBlueprintFromId(item.id) + this.blueprintService.openBlueprintFromId(item.id); } hideDialog() { this.visible = false; } - showDialog(filterUserId: string = null, filterUserName: string = null, getDuplicates: boolean = false) - { + showDialog( + filterUserId: string = null, + filterUserName: string = null, + getDuplicates: boolean = false + ) { this.reset(); if (filterUserId != null) { this.filterUserId = filterUserId; @@ -203,19 +221,23 @@ export class DialogBrowseComponent implements OnInit { this.getDuplicates = getDuplicates; this.getBlueprints(); this.visible = true; - } handleOnShow() { - this.scrollable.nativeElement.addEventListener('scroll', this.scroll.bind(this)); + this.scrollable.nativeElement.addEventListener( + "scroll", + this.scroll.bind(this) + ); } scroll(e: Event) { let scrollTop: number = this.scrollable.nativeElement.scrollTop; - let scrollMax: number = this.scrollable.nativeElement.scrollHeight - this.scrollable.nativeElement.clientHeight; + let scrollMax: number = + this.scrollable.nativeElement.scrollHeight - + this.scrollable.nativeElement.clientHeight; //console.log('scroll') //console.log({scrollTop: scrollTop, scrollMax: scrollMax}); - if (!this.noMoreBlueprints && !this.working && scrollTop > scrollMax - 5) { + if (!this.noMoreBlueprints && !this.working && scrollTop > scrollMax - 5) { this.loadMoreBlueprints(); } } @@ -227,11 +249,16 @@ export class DialogBrowseComponent implements OnInit { if (this.remaining == 0) this.noMoreBlueprints = true; - this.blueprintListItems = this.blueprintListItems.filter((i) => { return i != this.loadingBlueprintItem; }); + this.blueprintListItems = this.blueprintListItems.filter((i) => { + return i != this.loadingBlueprintItem; + }); - blueprintListResponse.blueprints.map((item) => { this.blueprintListItems.push(item); }); + blueprintListResponse.blueprints.map((item) => { + this.blueprintListItems.push(item); + }); - if (this.blueprintListItems.length == 0) this.blueprintListItems.push(this.nothingBlueprintItem); + if (this.blueprintListItems.length == 0) + this.blueprintListItems.push(this.nothingBlueprintItem); } loadMoreBlueprints() { diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.css b/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.css index 3dfce61b..d761c34f 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.css +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.css @@ -2,8 +2,7 @@ display: grid; grid-template-columns: auto 1fr; grid-template-rows: min-content 1fr; - grid-template-areas: - "one three" + grid-template-areas: "one three"; } .one { @@ -16,6 +15,6 @@ } .error-red { - color: darkred; + color: darkred; margin-left: 0.5em; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.html b/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.html index 55a7bf68..05237ea6 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.html +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.html @@ -1,5 +1,7 @@ - +>
-

-
- Image size: {{finalSize}} -
- About {{finalSizeMb | number:'1.2-2'}}Mb +

+
+ Image size: {{ finalSize }} +
+ About {{ finalSizeMb | number : "1.2-2" }}Mb
-
- - - - - {{overlayString(overlay.value)}} - - -
+ + + + {{ + overlayString(overlay.value) + }} + + +
- + - diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.spec.ts b/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.spec.ts index a7744bba..11405875 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { DialogExportImagesComponent } from './dialog-export-images.component'; +import { DialogExportImagesComponent } from "./dialog-export-images.component"; -describe('DialogExportImagesComponent', () => { +describe("DialogExportImagesComponent", () => { let component: DialogExportImagesComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ DialogExportImagesComponent ] - }) - .compileComponents(); + declarations: [DialogExportImagesComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('DialogExportImagesComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.ts b/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.ts index 39736dc4..4113a7b3 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-export-images/dialog-export-images.component.ts @@ -1,16 +1,29 @@ -import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core'; -import { BlueprintService, ExportImageOptions } from 'src/app/module-blueprint/services/blueprint-service'; -import { SelectItem } from 'primeng/api'; -import { Dropdown } from 'primeng/dropdown'; -import { CameraService, DrawHelpers, Vector2, Overlay } from '../../../../../../../lib/index' +import { + Component, + OnInit, + ViewChild, + Output, + EventEmitter, +} from "@angular/core"; +import { + BlueprintService, + ExportImageOptions, +} from "src/app/module-blueprint/services/blueprint-service"; +import { SelectItem } from "primeng/api"; +import { Dropdown } from "primeng/dropdown"; +import { + CameraService, + DrawHelpers, + Vector2, + Overlay, +} from "../../../../../../../lib/index"; @Component({ - selector: 'app-dialog-export-images', - templateUrl: './dialog-export-images.component.html', - styleUrls: ['./dialog-export-images.component.css'] + selector: "app-dialog-export-images", + templateUrl: "./dialog-export-images.component.html", + styleUrls: ["./dialog-export-images.component.css"], }) export class DialogExportImagesComponent implements OnInit { - blueprintSize: Vector2; visible: boolean = false; @@ -20,20 +33,38 @@ export class DialogExportImagesComponent implements OnInit { exportOptions: ExportImageOptions; - get disabled() { return !(this.exportOptions.selectedOverlays.length > 0) } + get disabled() { + return !(this.exportOptions.selectedOverlays.length > 0); + } @Output() saveImages = new EventEmitter(); - get finalSize(): string { return this.blueprintSize == null ? '' : this.blueprintSize.x * this.exportOptions.pixelsPerTile + 'x' + this.blueprintSize.y * this.exportOptions.pixelsPerTile } - get finalSizeMb(): number { return this.blueprintSize == null ? 0 : this.blueprintSize.x * this.exportOptions.pixelsPerTile * this.blueprintSize.y * this.exportOptions.pixelsPerTile * this.exportOptions.selectedOverlays.length * 0.00000068120021446078431372549 } + get finalSize(): string { + return this.blueprintSize == null + ? "" + : this.blueprintSize.x * this.exportOptions.pixelsPerTile + + "x" + + this.blueprintSize.y * this.exportOptions.pixelsPerTile; + } + get finalSizeMb(): number { + return this.blueprintSize == null + ? 0 + : this.blueprintSize.x * + this.exportOptions.pixelsPerTile * + this.blueprintSize.y * + this.exportOptions.pixelsPerTile * + this.exportOptions.selectedOverlays.length * + 0.00000068120021446078431372549; + } - private cameraService: CameraService + private cameraService: CameraService; constructor(private blueprintService: BlueprintService) { - this.cameraService = CameraService.cameraService; - this.pixelPerTile = [16, 24, 32, 48, 64, 96, 128,] - .map(px => ({ label: $localize`${px} pixels per tile`, value: px })) + this.pixelPerTile = [16, 24, 32, 48, 64, 96, 128].map((px) => ({ + label: $localize`${px} pixels per tile`, + value: px, + })); this.exportOptions = { //selectedOverlays: [Overlay.Base], @@ -43,11 +74,11 @@ export class DialogExportImagesComponent implements OnInit { Overlay.Liquid, Overlay.Gas, Overlay.Automation, - Overlay.Conveyor + Overlay.Conveyor, ], pixelsPerTile: this.pixelPerTile[2].value, - gridLines: false - } + gridLines: false, + }; } ngOnInit() { @@ -57,15 +88,16 @@ export class DialogExportImagesComponent implements OnInit { Overlay.Liquid, Overlay.Gas, Overlay.Automation, - Overlay.Conveyor - ] + Overlay.Conveyor, + ]; this.overlayOptions = []; overlayList.map((overlay) => { - this.overlayOptions.push({ label: DrawHelpers.overlayString[overlay], value: overlay }); + this.overlayOptions.push({ + label: DrawHelpers.overlayString[overlay], + value: overlay, + }); }); - - } getOverlayUrl(overlay: Overlay) { @@ -73,7 +105,7 @@ export class DialogExportImagesComponent implements OnInit { } overlayString(overlay: Overlay) { - return DrawHelpers.overlayString[overlay] + return DrawHelpers.overlayString[overlay]; } downloadImages() { @@ -91,7 +123,9 @@ export class DialogExportImagesComponent implements OnInit { let boundingBox = this.blueprintService.blueprint.getBoundingBox(); let topLeft = boundingBox[0]; let bottomRight = boundingBox[1]; - this.blueprintSize = new Vector2(bottomRight.x - topLeft.x + 3, bottomRight.y - topLeft.y + 3); + this.blueprintSize = new Vector2( + bottomRight.x - topLeft.x + 3, + bottomRight.y - topLeft.y + 3 + ); } - } diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.css b/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.css index 5b19bc8d..9a4b714d 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.css +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.css @@ -1,3 +1,3 @@ .copy-button { - margin-left: 5px + margin-left: 5px; } diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.html b/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.html index 5bc6c1de..7a269a15 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.html +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.html @@ -1,13 +1,44 @@ - - -
Use the following url to share this blueprint :
- - - - + +
Use the following url to share this blueprint :
+ + + diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.spec.ts b/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.spec.ts index 6c623e02..a4f1372a 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { DialogShareUrlComponent } from './dialog-share-url.component'; +import { DialogShareUrlComponent } from "./dialog-share-url.component"; -describe('DialogShareUrlComponent', () => { +describe("DialogShareUrlComponent", () => { let component: DialogShareUrlComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ DialogShareUrlComponent ] - }) - .compileComponents(); + declarations: [DialogShareUrlComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('DialogShareUrlComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.ts b/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.ts index b33bbec0..7595938b 100644 --- a/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.ts +++ b/frontend/src/app/module-blueprint/components/dialogs/dialog-share-url/dialog-share-url.component.ts @@ -1,23 +1,24 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { BlueprintService } from '../../../services/blueprint-service'; -import { MessageService } from 'primeng/api'; +import { Component, OnInit, Input } from "@angular/core"; +import { BlueprintService } from "../../../services/blueprint-service"; +import { MessageService } from "primeng/api"; @Component({ - selector: 'app-dialog-share-url', - templateUrl: './dialog-share-url.component.html', - styleUrls: ['./dialog-share-url.component.css'] + selector: "app-dialog-share-url", + templateUrl: "./dialog-share-url.component.html", + styleUrls: ["./dialog-share-url.component.css"], }) export class DialogShareUrlComponent { - visible: boolean = false; constructor( public blueprintService: BlueprintService, - private messageService: MessageService) { } + private messageService: MessageService + ) {} get url() { - return this.blueprintService.id != null ? - BlueprintService.baseUrl + '/b/' + this.blueprintService.id : '' + return this.blueprintService.id != null + ? BlueprintService.baseUrl + "/b/" + this.blueprintService.id + : ""; } showDialog() { @@ -30,11 +31,11 @@ export class DialogShareUrlComponent { copyToClipboard(inputElement) { inputElement.select(); - document.execCommand('copy'); + document.execCommand("copy"); this.messageService.add({ - severity: 'success', + severity: "success", summary: $localize`Shareable url copied`, - detail: $localize`Paste it into a new tab to try it!` + detail: $localize`Paste it into a new tab to try it!`, }); this.hideDialog(); } @@ -42,5 +43,4 @@ export class DialogShareUrlComponent { newTab() { window.open(this.url, Math.random().toString(36)); } - } diff --git a/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.html b/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.html index 5a0677cd..3c3f521a 100644 --- a/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.html +++ b/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.html @@ -1,6 +1,21 @@ -
- {{nbLikes}} {{nbLikesString}} - - + {{ nbLikes }} {{ nbLikesString }} + +
diff --git a/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.spec.ts b/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.spec.ts index ba242178..df8932ca 100644 --- a/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { LikeWidgetComponent } from './like-widget.component'; +import { LikeWidgetComponent } from "./like-widget.component"; -describe('LikeWidgetComponent', () => { +describe("LikeWidgetComponent", () => { let component: LikeWidgetComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ LikeWidgetComponent ] - }) - .compileComponents(); + declarations: [LikeWidgetComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('LikeWidgetComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.ts b/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.ts index aaced07c..82364e6c 100644 --- a/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.ts +++ b/frontend/src/app/module-blueprint/components/like-widget/like-widget.component.ts @@ -1,24 +1,25 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { BlueprintService } from '../../services/blueprint-service'; +import { Component, OnInit, Input } from "@angular/core"; +import { BlueprintService } from "../../services/blueprint-service"; @Component({ - selector: 'app-like-widget', - templateUrl: './like-widget.component.html', - styleUrls: ['./like-widget.component.css'] + selector: "app-like-widget", + templateUrl: "./like-widget.component.html", + styleUrls: ["./like-widget.component.css"], }) export class LikeWidgetComponent implements OnInit { - @Input() blueprintId: string; @Input() nbLikes: number = 0; @Input() likedByMe: boolean; @Input() disabled: boolean; - get nbLikesString() { return $localize`like${this.nbLikes != 1 ? 's' : ''}`; } + get nbLikesString() { + return $localize`like${this.nbLikes != 1 ? "s" : ""}`; + } - constructor(private blueprintService: BlueprintService) { } + constructor(private blueprintService: BlueprintService) {} ngOnInit() { - 1;// required for type + 1; // required for type } like() { @@ -27,5 +28,4 @@ export class LikeWidgetComponent implements OnInit { this.blueprintService.likeBlueprint(this.blueprintId, this.likedByMe); } - } diff --git a/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.html b/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.html index 9f23b38a..aaaa6627 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.html @@ -1,40 +1,60 @@
Build Tool
-
+
- - + + [height]="'40px'" + >
-
{{currentItem.name}}
+
{{ currentItem.name }}
-
Press "O" to change item orientation
-
{{currentItemToBuild.buildCandidateResult.cantBuildReason}}
+
+ Press "O" to change item orientation +
+
+ {{ currentItemToBuild.buildCandidateResult.cantBuildReason }} +
+ (changeElement)="changeElement($event)" + > + [blueprintItem]="currentItemToBuild" + [temperatureWarning]="false" + > + [blueprintItem]="currentItemToBuild" + >
@@ -43,33 +63,72 @@
- -
-
- + +
+
+
- - - -
-
- +
+
-
+
-
-
- +
+
+
- diff --git a/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.spec.ts index 89504abe..c534aa7d 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ComponentSideBuildToolComponent } from './build-tool.component'; +import { ComponentSideBuildToolComponent } from "./build-tool.component"; -describe('ComponentSideBuildToolComponent', () => { +describe("ComponentSideBuildToolComponent", () => { let component: ComponentSideBuildToolComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ComponentSideBuildToolComponent ] - }) - .compileComponents(); + declarations: [ComponentSideBuildToolComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ComponentSideBuildToolComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.ts b/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.ts index fcaed0fe..ad768cc3 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/build-tool/build-tool.component.ts @@ -1,33 +1,57 @@ -import { Component, OnInit, Output, EventEmitter, ViewChild, ElementRef, ViewChildren, QueryList } from '@angular/core'; -import { ToolType } from '../../../common/tools/tool'; -import { BlueprintItemElement, BlueprintHelpers, BlueprintItem, OniItem, BuildMenuCategory, BuildMenuItem } from '../../../../../../../lib/index'; -import { ToolService, IObsToolChanged } from 'src/app/module-blueprint/services/tool-service'; -import { IObsBuildItemChanged } from 'src/app/module-blueprint/common/tools/build-tool'; -import { OverlayPanel } from 'primeng/overlaypanel'; -import { ElementChangeInfo } from '../buildable-element-picker/buildable-element-picker.component'; -import { BlueprintItemInfo } from '../../../../../../../lib/src/blueprint/blueprint-item-info'; - - +import { + Component, + OnInit, + Output, + EventEmitter, + ViewChild, + ElementRef, + ViewChildren, + QueryList, +} from "@angular/core"; +import { ToolType } from "../../../common/tools/tool"; +import { + BlueprintItemElement, + BlueprintHelpers, + BlueprintItem, + OniItem, + BuildMenuCategory, + BuildMenuItem, +} from "../../../../../../../lib/index"; +import { + ToolService, + IObsToolChanged, +} from "src/app/module-blueprint/services/tool-service"; +import { IObsBuildItemChanged } from "src/app/module-blueprint/common/tools/build-tool"; +import { OverlayPanel } from "primeng/overlaypanel"; +import { ElementChangeInfo } from "../buildable-element-picker/buildable-element-picker.component"; +import { BlueprintItemInfo } from "../../../../../../../lib/src/blueprint/blueprint-item-info"; @Component({ - selector: 'app-build-tool', - templateUrl: './build-tool.component.html', - styleUrls: ['./build-tool.component.css'] + selector: "app-build-tool", + templateUrl: "./build-tool.component.html", + styleUrls: ["./build-tool.component.css"], }) -export class ComponentSideBuildToolComponent implements IObsBuildItemChanged, IObsToolChanged { - +export class ComponentSideBuildToolComponent + implements IObsBuildItemChanged, IObsToolChanged +{ items: OniItem[][][]; - get buildMenuCategories() { return BuildMenuCategory.buildMenuCategories; } + get buildMenuCategories() { + return BuildMenuCategory.buildMenuCategories; + } currentCategory: BuildMenuCategory; currentItem: OniItem; - get currentItemToBuild() { return this.toolService.buildTool.templateItemToBuild; } - get isGasLiquid() { return this.currentItemToBuild.oniItem.isElement; } + get currentItemToBuild() { + return this.toolService.buildTool.templateItemToBuild; + } + get isGasLiquid() { + return this.currentItemToBuild.oniItem.isElement; + } - @ViewChild('categoryPanel') categoryPanel: OverlayPanel; - @ViewChildren(OverlayPanel) itemPanels !: QueryList; + @ViewChild("categoryPanel") categoryPanel: OverlayPanel; + @ViewChildren(OverlayPanel) itemPanels!: QueryList; constructor(public toolService: ToolService) { this.items = []; @@ -40,19 +64,22 @@ export class ComponentSideBuildToolComponent implements IObsBuildItemChanged, IO databaseLoaded: boolean = false; oniItemsLoaded() { //this.toolService.buildTool.changeItem(BlueprintHelpers.createInstance('SteamTurbine2')); - this.toolService.buildTool.changeItem(BlueprintHelpers.createInstance('Tile')); + this.toolService.buildTool.changeItem( + BlueprintHelpers.createInstance("Tile") + ); this.databaseLoaded = true; } showCategories(event: any) { this.categoryPanel.toggle(event); - this.itemPanels.forEach((itemPanel) => { if (itemPanel != this.itemPanels.last) itemPanel.hide(); }); + this.itemPanels.forEach((itemPanel) => { + if (itemPanel != this.itemPanels.last) itemPanel.hide(); + }); } paintElement() { - let newElement = new BlueprintItemElement(OniItem.elementId); - newElement.setElement('Water', 0); + newElement.setElement("Water", 0); this.toolService.buildTool.changeItem(newElement); @@ -67,9 +94,6 @@ export class ComponentSideBuildToolComponent implements IObsBuildItemChanged, IO } showItems(event: any, buildMenuCategory: BuildMenuCategory, indexCategory) { - - - this.items[indexCategory] = []; let lineIndex = 0; @@ -78,12 +102,14 @@ export class ComponentSideBuildToolComponent implements IObsBuildItemChanged, IO for (let buildMenuItem of BuildMenuItem.buildMenuItems) if (buildMenuCategory.category == buildMenuItem.category) { let oniItem = OniItem.getOniItem(buildMenuItem.buildingId); - if (this.items[indexCategory][lineIndex] == null) this.items[indexCategory].push([]); + if (this.items[indexCategory][lineIndex] == null) + this.items[indexCategory].push([]); const specialItemName = { Element: $localize`:special item:Element`, Info: $localize`:special item:Info`, - } - if (specialItemName[oniItem.id]) oniItem.name = specialItemName[oniItem.id] + }; + if (specialItemName[oniItem.id]) + oniItem.name = specialItemName[oniItem.id]; this.items[indexCategory][lineIndex].push(oniItem); itemIndex++; @@ -98,19 +124,22 @@ export class ComponentSideBuildToolComponent implements IObsBuildItemChanged, IO if (itemPanel != this.itemPanels.last) { if (currentIndex != indexCategory) itemPanel.hide(); else { - if (this.currentCategory == buildMenuCategory) itemPanel.toggle(event); + if (this.currentCategory == buildMenuCategory) + itemPanel.toggle(event); else itemPanel.show(event); } } - currentIndex++ - }) + currentIndex++; + }); this.currentCategory = buildMenuCategory; } chooseItem(item: OniItem) { - this.itemPanels.forEach((itemPanel) => { itemPanel.hide(); }); + this.itemPanels.forEach((itemPanel) => { + itemPanel.hide(); + }); this.currentItem = item; this.uiItemChanged(); } @@ -121,7 +150,9 @@ export class ComponentSideBuildToolComponent implements IObsBuildItemChanged, IO } uiItemChanged() { - this.toolService.buildTool.changeItem(BlueprintHelpers.createInstance(this.currentItem.id)); + this.toolService.buildTool.changeItem( + BlueprintHelpers.createInstance(this.currentItem.id) + ); } onFocus() { @@ -140,8 +171,9 @@ export class ComponentSideBuildToolComponent implements IObsBuildItemChanged, IO if (toolType == ToolType.build) this.uiItemChanged(); // And we hide all the overlays - if (this.itemPanels != null) this.itemPanels.forEach((itemPanel) => { itemPanel.hide(); }); + if (this.itemPanels != null) + this.itemPanels.forEach((itemPanel) => { + itemPanel.hide(); + }); } - - } diff --git a/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.css b/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.css index e78bc273..a5062f02 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.css @@ -19,7 +19,7 @@ } .error-red { - color: darkred; + color: darkred; font-size: smaller; text-align: justify; } diff --git a/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.html b/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.html index bd0b244d..21d27bf1 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.html @@ -1,34 +1,69 @@
- - Elements + + Elements
-
-
+
+
- +
-
{{currentElement[indexElement].name}}
+
{{ currentElement[indexElement].name }}
- Warning : Not every selected building is made of {{currentElement[indexElement].name}} + Warning : Not every selected building is made of + {{ currentElement[indexElement].name }}
-
-
- +
+
+
- +
diff --git a/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.spec.ts index c951cc83..b287317f 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { BuildableElementPickerComponent } from './buildable-element-picker.component'; +import { BuildableElementPickerComponent } from "./buildable-element-picker.component"; -describe('BuildableElementDropdownComponent', () => { +describe("BuildableElementDropdownComponent", () => { let component: BuildableElementPickerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ BuildableElementPickerComponent ] - }) - .compileComponents(); + declarations: [BuildableElementPickerComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('BuildableElementDropdownComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.ts b/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.ts index 8efc1040..9cfe1189 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/buildable-element-picker/buildable-element-picker.component.ts @@ -1,38 +1,49 @@ -import { Component, OnInit, Input, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core'; -import { CameraService, Visualization, BuildableElement } from '../../../../../../../lib/index'; -import { OverlayPanel } from 'primeng/overlaypanel'; +import { + Component, + OnInit, + Input, + Output, + EventEmitter, + ViewChildren, + QueryList, +} from "@angular/core"; +import { + CameraService, + Visualization, + BuildableElement, +} from "../../../../../../../lib/index"; +import { OverlayPanel } from "primeng/overlaypanel"; @Component({ - selector: 'app-buildable-element-picker', - templateUrl: './buildable-element-picker.component.html', - styleUrls: ['./buildable-element-picker.component.css'] + selector: "app-buildable-element-picker", + templateUrl: "./buildable-element-picker.component.html", + styleUrls: ["./buildable-element-picker.component.css"], }) export class BuildableElementPickerComponent implements OnInit { - @Input() buildableElementsArray: BuildableElement[][]; @Input() currentElement: BuildableElement[]; @Input() nbElements: number[]; @Input() isGasLiquid: boolean; - @Output() changeElement: EventEmitter = new EventEmitter(); + @Output() changeElement: EventEmitter = + new EventEmitter(); - @ViewChildren(OverlayPanel) elementPanels !: QueryList; + @ViewChildren(OverlayPanel) elementPanels!: QueryList; - private cameraService: CameraService + private cameraService: CameraService; constructor() { this.cameraService = CameraService.cameraService; } ngOnInit() { - 1;// required for type + 1; // required for type } showWarning(indexElement: number) { return this.nbElements != null && this.nbElements[indexElement] > 1; } - showElements(event: any, indexElement: number) { let currentIndexElement = 0; this.elementPanels.forEach((elementPanel) => { @@ -45,7 +56,9 @@ export class BuildableElementPickerComponent implements OnInit { chooseElement(buildableElement: BuildableElement, index: number) { this.changeElement.emit({ newElement: buildableElement, index: index }); - this.elementPanels.forEach((elementPanel) => { elementPanel.hide(); }); + this.elementPanels.forEach((elementPanel) => { + elementPanel.hide(); + }); this.currentElement[index] = buildableElement; } diff --git a/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.css b/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.css index 6e88341a..8995de8d 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.css @@ -26,4 +26,4 @@ .second-checkbox { margin-left: 10px; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.html b/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.html index a1f15a31..484a63f7 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.html @@ -1,21 +1,53 @@
- +
- - + +
-
+
- -
{{element.name}}
+ +
{{ element.name }}
diff --git a/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.spec.ts index a7b8688b..06f58c4d 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { CellElementPickerComponent } from './cell-element-picker.component'; +import { CellElementPickerComponent } from "./cell-element-picker.component"; -describe('CellElementPickerComponent', () => { +describe("CellElementPickerComponent", () => { let component: CellElementPickerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ CellElementPickerComponent ] - }) - .compileComponents(); + declarations: [CellElementPickerComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('CellElementPickerComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.ts b/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.ts index 9ff00fa9..0cd93904 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/cell-element-picker/cell-element-picker.component.ts @@ -1,31 +1,30 @@ -import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; -import { Subject } from 'rxjs'; -import { BuildableElement } from '../../../../../../../lib/index'; +import { Component, OnInit, Output, EventEmitter, Input } from "@angular/core"; +import { Subject } from "rxjs"; +import { BuildableElement } from "../../../../../../../lib/index"; @Component({ - selector: 'app-cell-element-picker', - templateUrl: './cell-element-picker.component.html', - styleUrls: ['./cell-element-picker.component.css'] + selector: "app-cell-element-picker", + templateUrl: "./cell-element-picker.component.html", + styleUrls: ["./cell-element-picker.component.css"], }) export class CellElementPickerComponent implements OnInit { - filterNameSubject = new Subject(); filterName: string; - selectedTags: string[] = ['Gas', 'Liquid']; + selectedTags: string[] = ["Gas", "Liquid"]; elements: BuildableElement[]; @Output() selectElementCell = new EventEmitter(); @Input() forceTag: string; - get isForcedTag() { return this.forceTag != undefined; } + get isForcedTag() { + return this.forceTag != undefined; + } constructor() { - - this.filterNameSubject.subscribe(value => { + this.filterNameSubject.subscribe((value) => { this.filter(); }); - } ngOnInit() { @@ -42,9 +41,8 @@ export class CellElementPickerComponent implements OnInit { filterElements() { this.elements = []; - this.elements.push(BuildableElement.getElement('None')); + this.elements.push(BuildableElement.getElement("None")); for (let element of BuildableElement.elements) { - let addToList = false; let filterString = false; @@ -54,16 +52,18 @@ export class CellElementPickerComponent implements OnInit { if (this.forceTag == undefined) { for (let tag of this.selectedTags) if (element.hasTag(tag)) filterTag = true; - } - else if (element.hasTag(this.forceTag)) filterTag = true; - + } else if (element.hasTag(this.forceTag)) filterTag = true; - if (this.filterName == null || this.filterName == '') filterString = true; - else if (element.name.toUpperCase().indexOf(this.filterName.toUpperCase()) != -1) filterString = true; + if (this.filterName == null || this.filterName == "") filterString = true; + else if ( + element.name.toUpperCase().indexOf(this.filterName.toUpperCase()) != -1 + ) + filterString = true; - if (element.name.indexOf('MISSING') != -1) filterMissing = false; + if (element.name.indexOf("MISSING") != -1) filterMissing = false; - if (filterString && filterTag && filterMissing) this.elements.push(element); + if (filterString && filterTag && filterMissing) + this.elements.push(element); } } diff --git a/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.html b/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.html index 31e1399a..b79aabb0 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.html @@ -1,44 +1,110 @@
- - - + + + - - - - - + + + + + - - - + + + - - + + - - - - - - - + + + + + + + - - - - - - + + + + + + - - - - - + + + + + -
\ No newline at end of file +
diff --git a/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.spec.ts index 343cfb91..bca590cd 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ElementIconComponent } from './element-icon.component'; +import { ElementIconComponent } from "./element-icon.component"; -describe('ElementIconComponent', () => { +describe("ElementIconComponent", () => { let component: ElementIconComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ElementIconComponent ] - }) - .compileComponents(); + declarations: [ElementIconComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ElementIconComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.ts b/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.ts index e9150ecd..5d73607f 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/element-icon/element-icon.component.ts @@ -1,22 +1,33 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { DrawHelpers, BuildableElement } from '../../../../../../../lib/index'; +import { Component, OnInit, Input } from "@angular/core"; +import { DrawHelpers, BuildableElement } from "../../../../../../../lib/index"; @Component({ - selector: 'app-element-icon', - templateUrl: './element-icon.component.html', - styleUrls: ['./element-icon.component.css'] + selector: "app-element-icon", + templateUrl: "./element-icon.component.html", + styleUrls: ["./element-icon.component.css"], }) export class ElementIconComponent { - @Input() element: BuildableElement; @Input() width: string; @Input() height: string; // TODO boolean in export - get isIcon() { return !this.element.hasTag('Gas') && !this.element.hasTag('Liquid'); } - get nullIcon() { return this.element.icon == null || this.element.icon == ''; } - get isLiquid() { return this.element.hasTag('Liquid'); } - get isGas() { return this.element.hasTag('Gas'); } - get tint() { return DrawHelpers.colorToHex(this.element.uiColor); } - get style() { return 'height: ' + this.height + ';' } + get isIcon() { + return !this.element.hasTag("Gas") && !this.element.hasTag("Liquid"); + } + get nullIcon() { + return this.element.icon == null || this.element.icon == ""; + } + get isLiquid() { + return this.element.hasTag("Liquid"); + } + get isGas() { + return this.element.hasTag("Gas"); + } + get tint() { + return DrawHelpers.colorToHex(this.element.uiColor); + } + get style() { + return "height: " + this.height + ";"; + } } diff --git a/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.css b/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.css index 59687899..1a903565 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.css @@ -1,15 +1,18 @@ .element-card { background-color: #ffffff; color: #333333; - border-radius: 3px; + border-radius: 3px; padding: 10px; width: 100%; display: flex; flex-flow: column; - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); } .element-card-header { @@ -23,7 +26,7 @@ flex-flow: row; align-items: center; justify-content: space-between; - height:40px; + height: 40px; width: 100%; } @@ -52,7 +55,7 @@ .element-spacer { width: 10px; - flex: 1 + flex: 1; } .element-mass { @@ -63,4 +66,4 @@ .element-button { margin-left: auto; margin-right: 5px; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.html b/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.html index ffdda7d3..af8da622 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.html @@ -1,36 +1,101 @@
Element report - +
Solids :
-
-
-
-
{{dataItem.buildableElement.name}}
+
+
+ +
+
+
{{ dataItem.buildableElement.name }}
-
{{dataItem.totalMass | addMassUnit}}
- +
{{ dataItem.totalMass | addMassUnit }}
+
Liquids :
-
-
-
-
{{dataItem.buildableElement.name}}
+
+
+ +
+
+
{{ dataItem.buildableElement.name }}
-
{{dataItem.totalMass | addMassUnit}}
- +
{{ dataItem.totalMass | addMassUnit }}
+
Gases :
-
-
-
-
{{dataItem.buildableElement.name}}
+
+
+ +
+
+
{{ dataItem.buildableElement.name }}
-
{{dataItem.totalMass | addMassUnit}}
- +
{{ dataItem.totalMass | addMassUnit }}
+
diff --git a/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.spec.ts index 9918bb2b..5a2523ab 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ElementReportToolComponent } from './element-report-tool.component'; +import { ElementReportToolComponent } from "./element-report-tool.component"; -describe('ElementReportToolComponent', () => { +describe("ElementReportToolComponent", () => { let component: ElementReportToolComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ElementReportToolComponent ] - }) - .compileComponents(); + declarations: [ElementReportToolComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ElementReportToolComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.ts b/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.ts index 04a9632c..7eaf4289 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/element-report-tool/element-report-tool.component.ts @@ -1,17 +1,22 @@ -import { Component, OnInit } from '@angular/core'; -import { ToolService } from 'src/app/module-blueprint/services/tool-service'; -import { CameraService, Visualization, BuildableElement } from '../../../../../../../lib/index'; +import { Component, OnInit } from "@angular/core"; +import { ToolService } from "src/app/module-blueprint/services/tool-service"; +import { + CameraService, + Visualization, + BuildableElement, +} from "../../../../../../../lib/index"; @Component({ - selector: 'app-element-report-tool', - templateUrl: './element-report-tool.component.html', - styleUrls: ['./element-report-tool.component.css'] + selector: "app-element-report-tool", + templateUrl: "./element-report-tool.component.html", + styleUrls: ["./element-report-tool.component.css"], }) export class ElementReportToolComponent { + get data() { + return this.toolService.elementReport.data; + } - get data() { return this.toolService.elementReport.data } - - private cameraService: CameraService + private cameraService: CameraService; constructor(private toolService: ToolService) { this.cameraService = CameraService.cameraService; diff --git a/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.html b/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.html index 80b62970..df68ea80 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.html @@ -1,5 +1,22 @@ - - - - - \ No newline at end of file + + + + + diff --git a/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.spec.ts index d400d9fc..2db48cf9 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { InfoInputIconComponent } from './info-input-icon.component'; +import { InfoInputIconComponent } from "./info-input-icon.component"; -describe('InfoInputIconComponent', () => { +describe("InfoInputIconComponent", () => { let component: InfoInputIconComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ InfoInputIconComponent ] - }) - .compileComponents(); + declarations: [InfoInputIconComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('InfoInputIconComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.ts b/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.ts index f27f9a4a..d9a38cf7 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/info-input-icon/info-input-icon.component.ts @@ -1,12 +1,11 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input } from "@angular/core"; @Component({ - selector: 'app-info-input-icon', - templateUrl: './info-input-icon.component.html', - styleUrls: ['./info-input-icon.component.css'] + selector: "app-info-input-icon", + templateUrl: "./info-input-icon.component.html", + styleUrls: ["./info-input-icon.component.css"], }) export class InfoInputIconComponent { - @Input() width: number; @Input() height: number; @Input() frontColor: string; diff --git a/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.css b/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.css index 1ce9f614..bdf96ac5 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.css @@ -19,4 +19,4 @@ width: 40px; height: 40px; padding: 5px; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.html b/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.html index 28d85c5a..6317bf98 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.html @@ -1,19 +1,55 @@ -
- +
- - + +
- - + +
-
- +
+
diff --git a/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.spec.ts index b058ccbe..86301805 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { InfoInputComponent } from './info-input.component'; +import { InfoInputComponent } from "./info-input.component"; -describe('InfoInputComponent', () => { +describe("InfoInputComponent", () => { let component: InfoInputComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ InfoInputComponent ] - }) - .compileComponents(); + declarations: [InfoInputComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('InfoInputComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.ts b/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.ts index c91e5042..77b60cb1 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/info-input/info-input.component.ts @@ -1,19 +1,21 @@ -import { Component, OnInit, Input, ViewChild } from '@angular/core'; -import { BlueprintItemInfo, InfoIcon } from '../../../../../../../lib/src/blueprint/blueprint-item-info'; -import { OverlayPanel } from 'primeng/overlaypanel'; -import { ColorPicker } from 'primeng/colorpicker'; -import { DrawHelpers } from '../../../../../../../lib'; +import { Component, OnInit, Input, ViewChild } from "@angular/core"; +import { + BlueprintItemInfo, + InfoIcon, +} from "../../../../../../../lib/src/blueprint/blueprint-item-info"; +import { OverlayPanel } from "primeng/overlaypanel"; +import { ColorPicker } from "primeng/colorpicker"; +import { DrawHelpers } from "../../../../../../../lib"; @Component({ - selector: 'app-info-input', - templateUrl: './info-input.component.html', - styleUrls: ['./info-input.component.css'] + selector: "app-info-input", + templateUrl: "./info-input.component.html", + styleUrls: ["./info-input.component.css"], }) export class InfoInputComponent implements OnInit { - @Input() blueprintIteminfo: BlueprintItemInfo; - @ViewChild('iconPanel') iconPanel: OverlayPanel; + @ViewChild("iconPanel") iconPanel: OverlayPanel; iconList: InfoIcon[] = [ InfoIcon.icon_inf, @@ -27,18 +29,29 @@ export class InfoInputComponent implements OnInit { InfoIcon.icon_no6, InfoIcon.icon_no7, InfoIcon.icon_no8, - InfoIcon.icon_no9]; + InfoIcon.icon_no9, + ]; - get infoString(): string { return this.blueprintIteminfo.infoString; } - set infoString(value: string) { this.blueprintIteminfo.infoString = value; } - get title(): string { return this.blueprintIteminfo.title; } - set title(value: string) { this.blueprintIteminfo.title = value; } - get iconSvgPath() { return this.blueprintIteminfo.htmlSvgPath; } + get infoString(): string { + return this.blueprintIteminfo.infoString; + } + set infoString(value: string) { + this.blueprintIteminfo.infoString = value; + } + get title(): string { + return this.blueprintIteminfo.title; + } + set title(value: string) { + this.blueprintIteminfo.title = value; + } + get iconSvgPath() { + return this.blueprintIteminfo.htmlSvgPath; + } - frontColor: string = '#ffffff'; - backColor: string = '#007AD9'; + frontColor: string = "#ffffff"; + backColor: string = "#007AD9"; - constructor() { } + constructor() {} ngOnInit(): void { this.frontColor = this.blueprintIteminfo.htmlFrontColor; @@ -56,9 +69,9 @@ export class InfoInputComponent implements OnInit { } colorChange() { - let frontColorString = this.frontColor.replace('#', '0x'); + let frontColorString = this.frontColor.replace("#", "0x"); this.blueprintIteminfo.frontColor = parseInt(frontColorString, 16); - let backColorString = this.backColor.replace('#', '0x'); + let backColorString = this.backColor.replace("#", "0x"); this.blueprintIteminfo.backColor = parseInt(backColorString, 16); this.blueprintIteminfo.reloadCamera = true; } diff --git a/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.css b/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.css index d44e58c9..54ba8537 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.css @@ -1,5 +1,5 @@ .buttonspace { - margin-left: 5px + margin-left: 5px; } .icon-nb-items { @@ -11,7 +11,7 @@ .text-nb-items { margin-left: auto; - margin-right: auto + margin-right: auto; } .info-panel-content { @@ -33,4 +33,4 @@ padding: 5px; width: 100%; margin-bottom: 5px; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.html b/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.html index a3a84162..073aebd1 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.html @@ -4,19 +4,33 @@
- -
{{nbItems}}
+ +
{{ nbItems }}
- + - + - +
@@ -28,26 +42,55 @@
- +
-
{{info.title}}
+
{{ info.title }}
- +
-
- - - +
+ + + diff --git a/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.spec.ts index 3b2fc606..f3ff26a8 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ItemCollectionInfoComponent } from './item-collection-info.component'; +import { ItemCollectionInfoComponent } from "./item-collection-info.component"; -describe('ItemCollectionInfoComponent', () => { +describe("ItemCollectionInfoComponent", () => { let component: ItemCollectionInfoComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ItemCollectionInfoComponent ] - }) - .compileComponents(); + declarations: [ItemCollectionInfoComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ItemCollectionInfoComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.ts b/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.ts index cb690808..5cf2d7a4 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/item-collection-info/item-collection-info.component.ts @@ -1,51 +1,76 @@ -import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core'; -import { SameItemCollection, IObsSelected } from 'src/app/module-blueprint/common/tools/same-item-collection'; -import { BlueprintService } from 'src/app/module-blueprint/services/blueprint-service'; -import { ToolService } from 'src/app/module-blueprint/services/tool-service'; -import { ToolType } from 'src/app/module-blueprint/common/tools/tool'; -import { BlueprintHelpers, ZIndex, BuildableElement, BlueprintItemWire } from '../../../../../../../lib/index'; -import { ElementChangeInfo } from '../buildable-element-picker/buildable-element-picker.component'; -import { BlueprintItemInfo } from '../../../../../../../lib/src/blueprint/blueprint-item-info'; +import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core"; +import { + SameItemCollection, + IObsSelected, +} from "src/app/module-blueprint/common/tools/same-item-collection"; +import { BlueprintService } from "src/app/module-blueprint/services/blueprint-service"; +import { ToolService } from "src/app/module-blueprint/services/tool-service"; +import { ToolType } from "src/app/module-blueprint/common/tools/tool"; +import { + BlueprintHelpers, + ZIndex, + BuildableElement, + BlueprintItemWire, +} from "../../../../../../../lib/index"; +import { ElementChangeInfo } from "../buildable-element-picker/buildable-element-picker.component"; +import { BlueprintItemInfo } from "../../../../../../../lib/src/blueprint/blueprint-item-info"; @Component({ - selector: 'app-item-collection-info', - templateUrl: './item-collection-info.component.html', - styleUrls: ['./item-collection-info.component.css'] + selector: "app-item-collection-info", + templateUrl: "./item-collection-info.component.html", + styleUrls: ["./item-collection-info.component.css"], }) export class ItemCollectionInfoComponent implements OnInit, IObsSelected { - nbItems: string; @Input() itemCollection: SameItemCollection; - @ViewChild('focusElement', {static: true}) focusElement: ElementRef; + @ViewChild("focusElement", { static: true }) focusElement: ElementRef; get debug() { let debug = this.itemCollection.items[0] as any; - let debugInfo = {connections: debug.connections }; + let debugInfo = { connections: debug.connections }; return JSON.stringify(debugInfo); } get forceTag() { - if (this.itemCollection.oniItem.zIndex == ZIndex.LiquidConduits) return 'Liquid'; - else if (this.itemCollection.oniItem.zIndex == ZIndex.GasConduits) return 'Gas'; + if (this.itemCollection.oniItem.zIndex == ZIndex.LiquidConduits) + return "Liquid"; + else if (this.itemCollection.oniItem.zIndex == ZIndex.GasConduits) + return "Gas"; else return undefined; } getPipeElement() { let blueprintItemWire = this.itemCollection.items[0] as BlueprintItemWire; - if (blueprintItemWire != null && this.showPipeContent) return blueprintItemWire.pipeElement; + if (blueprintItemWire != null && this.showPipeContent) + return blueprintItemWire.pipeElement; else return undefined; } // TODO boolean in export - get isGasLiquid() { return this.itemCollection.items[0].buildableElements[0].hasTag('Gas') || this.itemCollection.items[0].buildableElements[0].hasTag('Liquid'); } - get showPipeContent() { return this.itemCollection.oniItem.zIndex == ZIndex.LiquidConduits || this.itemCollection.oniItem.zIndex == ZIndex.GasConduits; } + get isGasLiquid() { + return ( + this.itemCollection.items[0].buildableElements[0].hasTag("Gas") || + this.itemCollection.items[0].buildableElements[0].hasTag("Liquid") + ); + } + get showPipeContent() { + return ( + this.itemCollection.oniItem.zIndex == ZIndex.LiquidConduits || + this.itemCollection.oniItem.zIndex == ZIndex.GasConduits + ); + } - constructor(private blueprintService: BlueprintService, private toolService: ToolService) { } + constructor( + private blueprintService: BlueprintService, + private toolService: ToolService + ) {} ngOnInit() { - const numItems = this.itemCollection.items.length - this.nbItems = $localize`${numItems} item${numItems > 1 ? 's' : ''} selected`; + const numItems = this.itemCollection.items.length; + this.nbItems = $localize`${numItems} item${ + numItems > 1 ? "s" : "" + } selected`; this.itemCollection.subscribeSelected(this); } @@ -56,7 +81,9 @@ export class ItemCollectionInfoComponent implements OnInit, IObsSelected { buildingsCopy() { this.toolService.changeTool(ToolType.build); - let newItem = BlueprintHelpers.cloneBlueprintItem(this.itemCollection.items[0]); + let newItem = BlueprintHelpers.cloneBlueprintItem( + this.itemCollection.items[0] + ); this.toolService.buildTool.changeItem(newItem); } @@ -66,7 +93,7 @@ export class ItemCollectionInfoComponent implements OnInit, IObsSelected { } selectThisInfo(blueprintItemInfo: BlueprintItemInfo) { - this.toolService.selectTool.selectThis(blueprintItemInfo) + this.toolService.selectTool.selectThis(blueprintItemInfo); } selected() { diff --git a/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.css b/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.css index d58053ac..a5062f02 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.css @@ -19,7 +19,7 @@ } .error-red { - color: darkred; + color: darkred; font-size: smaller; text-align: justify; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.html b/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.html index fd7c5baa..6a889438 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.html @@ -1,20 +1,35 @@ -
- +
+ Pipe Contents -
+
- +
-
{{currentElement.name}}
+
{{ currentElement.name }}
- + -
diff --git a/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.spec.ts index ddd0f2b6..c13ae801 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { PipeContentComponent } from './pipe-content.component'; +import { PipeContentComponent } from "./pipe-content.component"; -describe('PipeContentComponent', () => { +describe("PipeContentComponent", () => { let component: PipeContentComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ PipeContentComponent ] - }) - .compileComponents(); + declarations: [PipeContentComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('PipeContentComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.ts b/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.ts index 5d08f4bd..255f44ac 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/pipe-content/pipe-content.component.ts @@ -1,19 +1,27 @@ -import { Component, OnInit, Input, ViewChildren, QueryList, ViewChild, Output, EventEmitter } from '@angular/core'; -import { BuildableElement } from '../../../../../../../lib'; -import { OverlayPanel } from 'primeng/overlaypanel'; +import { + Component, + OnInit, + Input, + ViewChildren, + QueryList, + ViewChild, + Output, + EventEmitter, +} from "@angular/core"; +import { BuildableElement } from "../../../../../../../lib"; +import { OverlayPanel } from "primeng/overlaypanel"; @Component({ - selector: 'app-pipe-content', - templateUrl: './pipe-content.component.html', - styleUrls: ['./pipe-content.component.css'] + selector: "app-pipe-content", + templateUrl: "./pipe-content.component.html", + styleUrls: ["./pipe-content.component.css"], }) export class PipeContentComponent { - @Input() currentElement: BuildableElement; @Input() forceTag: string; @Output() selectElementPipe = new EventEmitter(); - @ViewChild('elementPanel', { static: false }) elementPanel: OverlayPanel; + @ViewChild("elementPanel", { static: false }) elementPanel: OverlayPanel; showElements(event: any) { this.elementPanel.toggle(event); @@ -23,5 +31,4 @@ export class PipeContentComponent { this.elementPanel.hide(); this.selectElementPipe.emit(element); } - } diff --git a/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.css b/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.css index dddb5070..b9624d8c 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.css @@ -15,5 +15,5 @@ } .buttonspace { - margin-left: 5px -} \ No newline at end of file + margin-left: 5px; +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.html b/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.html index 7834d29a..ad5ea3b3 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.html @@ -1,14 +1,45 @@
Select Tool
- - - + + +
- - + + diff --git a/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.spec.ts index 9eda6cc1..aee9242c 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ComponentSideSelectionToolComponent } from './selection-tool.component'; +import { ComponentSideSelectionToolComponent } from "./selection-tool.component"; -describe('ComponentSideSelectionToolComponent', () => { +describe("ComponentSideSelectionToolComponent", () => { let component: ComponentSideSelectionToolComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ComponentSideSelectionToolComponent ] - }) - .compileComponents(); + declarations: [ComponentSideSelectionToolComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ComponentSideSelectionToolComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.ts b/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.ts index c1ae8265..d87f8cff 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/selection-tool/selection-tool.component.ts @@ -1,25 +1,38 @@ -import { Component, OnInit, ChangeDetectorRef, Output, EventEmitter, ViewChild, ElementRef, Renderer2, OnChanges, AfterViewChecked, AfterViewInit } from '@angular/core'; -import { BlueprintService } from '../../../services/blueprint-service'; -import { ToolService } from '../../../services/tool-service'; -import { Accordion } from 'primeng/accordion'; +import { + Component, + OnInit, + ChangeDetectorRef, + Output, + EventEmitter, + ViewChild, + ElementRef, + Renderer2, + OnChanges, + AfterViewChecked, + AfterViewInit, +} from "@angular/core"; +import { BlueprintService } from "../../../services/blueprint-service"; +import { ToolService } from "../../../services/tool-service"; +import { Accordion } from "primeng/accordion"; @Component({ - selector: 'app-selection-tool', - templateUrl: './selection-tool.component.html', - styleUrls: ['./selection-tool.component.css'] + selector: "app-selection-tool", + templateUrl: "./selection-tool.component.html", + styleUrls: ["./selection-tool.component.css"], }) export class ComponentSideSelectionToolComponent { + @ViewChild("buildingsAccordion", { static: true }) + buildingsAccordion: Accordion; + @ViewChild("selectToolCard", { static: true }) selectToolCard: ElementRef; - @ViewChild('buildingsAccordion', { static: true }) buildingsAccordion: Accordion; - @ViewChild('selectToolCard', { static: true }) selectToolCard: ElementRef; - - constructor( - public toolService: ToolService, - private renderer: Renderer2) { - } + constructor(public toolService: ToolService, private renderer: Renderer2) {} setMaxHeight(position: number) { - this.renderer.setStyle(this.selectToolCard.nativeElement, 'max-height', 'calc(100vh - ' + position + 'px - 20px)'); + this.renderer.setStyle( + this.selectToolCard.nativeElement, + "max-height", + "calc(100vh - " + position + "px - 20px)" + ); } itemGroupeNext() { diff --git a/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.css b/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.css index 1403b0c6..51e285df 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.css @@ -3,7 +3,7 @@ flex-flow: row; align-items: center; width: 100%; - margin-bottom: 10px + margin-bottom: 10px; } .temperature-slider { @@ -23,4 +23,4 @@ color: darkred; font-size: smaller; text-align: justify; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.html b/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.html index 6065fe10..ecb83335 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.html @@ -1,39 +1,86 @@
- - Temperature: {{temperatureLabel}} + + Temperature: {{ temperatureLabel }} -
+
- + - - - - - + + + + + - +
- + - - + + - +
- +
- -
Warning : Not every selected building has the same temperature diff --git a/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.spec.ts index b9c19ac6..63254ca9 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { TemperaturePickerComponent } from './temperature-picker.component'; +import { TemperaturePickerComponent } from "./temperature-picker.component"; -describe('TemperaturePickerComponent', () => { +describe("TemperaturePickerComponent", () => { let component: TemperaturePickerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ TemperaturePickerComponent ] - }) - .compileComponents(); + declarations: [TemperaturePickerComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('TemperaturePickerComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.ts b/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.ts index 5c4c6f3a..fe099901 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/temperature-picker/temperature-picker.component.ts @@ -1,35 +1,54 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { BlueprintItem, CameraService, DrawHelpers, Visualization } from '../../../../../../../lib/index'; +import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; +import { + BlueprintItem, + CameraService, + DrawHelpers, + Visualization, +} from "../../../../../../../lib/index"; @Component({ - selector: 'app-temperature-picker', - templateUrl: './temperature-picker.component.html', - styleUrls: ['./temperature-picker.component.css'] + selector: "app-temperature-picker", + templateUrl: "./temperature-picker.component.html", + styleUrls: ["./temperature-picker.component.css"], }) export class TemperaturePickerComponent { - // temperature @Input() blueprintItem: BlueprintItem; @Input() temperatureWarning: boolean; - @Output() changeTemperature: EventEmitter = new EventEmitter(); + @Output() changeTemperature: EventEmitter = + new EventEmitter(); - get temperatureLabel() { return this.blueprintItem.temperatureCelcius.toFixed(0) + '°C' } - get temperatureHex() { return DrawHelpers.colorToHex(DrawHelpers.temperatureToColor(this.blueprintItem.temperature)); } - get temperatureThresholds() { return DrawHelpers.temperatureThresholds; } + get temperatureLabel() { + return this.blueprintItem.temperatureCelcius.toFixed(0) + "°C"; + } + get temperatureHex() { + return DrawHelpers.colorToHex( + DrawHelpers.temperatureToColor(this.blueprintItem.temperature) + ); + } + get temperatureThresholds() { + return DrawHelpers.temperatureThresholds; + } - private cameraService: CameraService + private cameraService: CameraService; constructor() { this.cameraService = CameraService.cameraService; } temperatureOffset(index: number) { - return DrawHelpers.temperatureToScale(DrawHelpers.temperatureThresholds[index].temperature) / 100; + return ( + DrawHelpers.temperatureToScale( + DrawHelpers.temperatureThresholds[index].temperature + ) / 100 + ); } temperatureColor(index: number) { - return DrawHelpers.colorToHex(DrawHelpers.temperatureThresholds[index].color); + return DrawHelpers.colorToHex( + DrawHelpers.temperatureThresholds[index].color + ); } onChange() { @@ -37,7 +56,6 @@ export class TemperaturePickerComponent { } temperatureVisualization() { - this.cameraService.visualization = Visualization.temperature + this.cameraService.visualization = Visualization.temperature; } - } diff --git a/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.css b/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.css index 6e492d7d..924725f5 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.css @@ -1,15 +1,18 @@ .temperature-card { background-color: #ffffff; color: #333333; - border-radius: 3px; + border-radius: 3px; padding: 10px; width: 100%; display: flex; flex-flow: column; - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); } .temperature-card-header { @@ -22,7 +25,7 @@ flex-flow: row; align-items: center; justify-content: space-between; - height:40px; + height: 40px; width: 100%; } @@ -42,10 +45,10 @@ .temperature-spacer { width: 10px; - flex: 1 + flex: 1; } .temperature-range { margin-left: auto; margin-right: 5px; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.html b/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.html index 7f47a60a..041a635f 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.html @@ -1,12 +1,20 @@
Temperature scale - +
-
-
-
{{temperatureLabel(index)}}
+
+
+
{{ temperatureLabel(index) }}
-
{{temperatureRange(index)}}
+
{{ temperatureRange(index) }}
diff --git a/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.spec.ts index 081e5d62..28831ec0 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { TemperatureScaleComponent } from './temperature-scale.component'; +import { TemperatureScaleComponent } from "./temperature-scale.component"; -describe('TemperatureScaleComponent', () => { +describe("TemperatureScaleComponent", () => { let component: TemperatureScaleComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ TemperatureScaleComponent ] - }) - .compileComponents(); + declarations: [TemperatureScaleComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('TemperatureScaleComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.ts b/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.ts index 0d840be3..fa647056 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/temperature-scale/temperature-scale.component.ts @@ -1,22 +1,23 @@ -import { Component, OnInit } from '@angular/core'; -import { CameraService, DrawHelpers, TemperatureThreshold, Visualization } from '../../../../../../../lib/index'; -import { GameStringService } from '../../../services/game-string-service'; +import { Component, OnInit } from "@angular/core"; +import { + CameraService, + DrawHelpers, + TemperatureThreshold, + Visualization, +} from "../../../../../../../lib/index"; +import { GameStringService } from "../../../services/game-string-service"; @Component({ - selector: 'app-temperature-scale', - templateUrl: './temperature-scale.component.html', - styleUrls: ['./temperature-scale.component.css'] + selector: "app-temperature-scale", + templateUrl: "./temperature-scale.component.html", + styleUrls: ["./temperature-scale.component.css"], }) export class TemperatureScaleComponent { - temperatureData: TemperatureThreshold[]; - private cameraService: CameraService - - constructor( - public gameStringService: GameStringService - ) { + private cameraService: CameraService; + constructor(public gameStringService: GameStringService) { this.cameraService = CameraService.cameraService; this.temperatureData = []; @@ -29,17 +30,21 @@ export class TemperatureScaleComponent { } temperatureRange(index: number) { - const celsius = (this.temperatureData[index].temperature - 273.15).toFixed(0) + const celsius = (this.temperatureData[index].temperature - 273.15).toFixed( + 0 + ); if (index == 0) return $localize`(Above ${celsius}°C)`; else { - const celsiusNext = (this.temperatureData[index - 1].temperature - 273.15).toFixed(0) + const celsiusNext = ( + this.temperatureData[index - 1].temperature - 273.15 + ).toFixed(0); return $localize`(${celsius}°C ~ ${celsiusNext}°C)`; - }; + } } temperatureLabel(index: number) { - const msgctxt = `STRINGS.UI.OVERLAYS.TEMPERATURE.${this.temperatureData[index].code}` - return this.gameStringService.dict[msgctxt] + const msgctxt = `STRINGS.UI.OVERLAYS.TEMPERATURE.${this.temperatureData[index].code}`; + return this.gameStringService.dict[msgctxt]; } close() { diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.css b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.css index efeecaad..a432dff8 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.css @@ -6,4 +6,4 @@ .text-tooltip { text-align: justify; font-size: smaller; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.html b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.html index fe16c73a..8bfe6338 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.html @@ -1,12 +1,13 @@ -
{{activeRangeSideScreen.title}} :
+
{{ activeRangeSideScreen.title }} :
- +
-
{{activateTooltip}}
-
{{deactivateTooltip}}
\ No newline at end of file +
{{ activateTooltip }}
+
{{ deactivateTooltip }}
diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.spec.ts index dfc9fba2..47f1d856 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ActiveRangeScreenComponent } from './active-range-screen.component'; +import { ActiveRangeScreenComponent } from "./active-range-screen.component"; -describe('ActiveRangeScreenComponent', () => { +describe("ActiveRangeScreenComponent", () => { let component: ActiveRangeScreenComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ActiveRangeScreenComponent ] - }) - .compileComponents(); + declarations: [ActiveRangeScreenComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ActiveRangeScreenComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.ts index 343e86ac..ad5b308b 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/active-range-screen/active-range-screen.component.ts @@ -1,41 +1,49 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { BlueprintItem, BActiveRangeSideScreen } from '../../../../../../../../lib/index'; +import { Component, OnInit, Input } from "@angular/core"; +import { + BlueprintItem, + BActiveRangeSideScreen, +} from "../../../../../../../../lib/index"; @Component({ - selector: 'app-active-range-screen', - templateUrl: './active-range-screen.component.html', - styleUrls: ['./active-range-screen.component.css'] + selector: "app-active-range-screen", + templateUrl: "./active-range-screen.component.html", + styleUrls: ["./active-range-screen.component.css"], }) export class ActiveRangeScreenComponent implements OnInit { - @Input() blueprintItem: BlueprintItem; @Input() activeRangeSideScreen: BActiveRangeSideScreen; get activateTooltip() { let toolip = this.activeRangeSideScreen.activateTooltip; - toolip = toolip.replace('{0}', this.values[1].toString()); - toolip = toolip.replace('{1}', this.values[0].toString()); + toolip = toolip.replace("{0}", this.values[1].toString()); + toolip = toolip.replace("{1}", this.values[0].toString()); return toolip; } get deactivateTooltip() { let toolip = this.activeRangeSideScreen.deactivateTooltip; - toolip = toolip.replace('{0}', this.values[0].toString()); - toolip = toolip.replace('{1}', this.values[1].toString()); + toolip = toolip.replace("{0}", this.values[0].toString()); + toolip = toolip.replace("{1}", this.values[1].toString()); return toolip; } values: number[]; - constructor() { } + constructor() {} ngOnInit() { - this.values = [] - this.values[0] = this.blueprintItem.getUiSettings(this.activeRangeSideScreen.id).values[0] as number; - this.values[1] = this.blueprintItem.getUiSettings(this.activeRangeSideScreen.id).values[1] as number; + this.values = []; + this.values[0] = this.blueprintItem.getUiSettings( + this.activeRangeSideScreen.id + ).values[0] as number; + this.values[1] = this.blueprintItem.getUiSettings( + this.activeRangeSideScreen.id + ).values[1] as number; } onChange() { - this.blueprintItem.getUiSettings(this.activeRangeSideScreen.id).values[0] = this.values[0]; - this.blueprintItem.getUiSettings(this.activeRangeSideScreen.id).values[1] = this.values[1]; + this.blueprintItem.getUiSettings(this.activeRangeSideScreen.id).values[0] = + this.values[0]; + this.blueprintItem.getUiSettings(this.activeRangeSideScreen.id).values[1] = + this.values[1]; } } diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.css b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.css index 9e820338..da372e43 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.css @@ -8,4 +8,4 @@ } .bitButton:enabled:focus { box-shadow: none; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.html b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.html index 3696d118..75ad25e6 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.html @@ -1,5 +1,12 @@ -
{{title}} :
-
{{description}}
-
- +
{{ title }} :
+
{{ description }}
+
+
diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.spec.ts index c80d21c6..3c46b4d1 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { BitSelectionScreenComponent } from './bit-selection-screen.component'; +import { BitSelectionScreenComponent } from "./bit-selection-screen.component"; -describe('BitSelectionScreenComponent', () => { +describe("BitSelectionScreenComponent", () => { let component: BitSelectionScreenComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ BitSelectionScreenComponent ] - }) - .compileComponents(); + declarations: [BitSelectionScreenComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('BitSelectionScreenComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.ts index 8f15a9d2..5a9155eb 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component.ts @@ -1,13 +1,15 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { BBitSelectorSideScreen, BlueprintItem } from '../../../../../../../../lib'; +import { Component, OnInit, Input } from "@angular/core"; +import { + BBitSelectorSideScreen, + BlueprintItem, +} from "../../../../../../../../lib"; @Component({ - selector: 'app-bit-selection-screen', - templateUrl: './bit-selection-screen.component.html', - styleUrls: ['./bit-selection-screen.component.css'] + selector: "app-bit-selection-screen", + templateUrl: "./bit-selection-screen.component.html", + styleUrls: ["./bit-selection-screen.component.css"], }) export class BitSelectionScreenComponent implements OnInit { - @Input() blueprintItem: BlueprintItem; @Input() bitSelectorSideScreen: BBitSelectorSideScreen; @@ -24,23 +26,29 @@ export class BitSelectionScreenComponent implements OnInit { ngOnInit(): void { this.buttonValues = []; - this.value = this.blueprintItem.getUiSettings(this.bitSelectorSideScreen.id).values[0] as number; + this.value = this.blueprintItem.getUiSettings(this.bitSelectorSideScreen.id) + .values[0] as number; this.updateButtonValues(); } updateButtonValues() { for (let i = 0; i < 4; i++) { - this.buttonValues[i] = (i == this.value); + this.buttonValues[i] = i == this.value; } } clickBit(index: number) { this.value = index; this.updateButtonValues(); - this.blueprintItem.getUiSettings(this.bitSelectorSideScreen.id).values[0] = index; + this.blueprintItem.getUiSettings(this.bitSelectorSideScreen.id).values[0] = + index; } - classButton(index: number) { return "button-item bitButton " + (this.buttonValues[index] ? "p-button-info" : "p-button-secondary") } - + classButton(index: number) { + return ( + "button-item bitButton " + + (this.buttonValues[index] ? "p-button-info" : "p-button-secondary") + ); + } } diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.css b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.css index d6213cd3..e52ccc2f 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.css @@ -6,4 +6,4 @@ margin-top: 10px; text-align: justify; font-size: smaller; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.html b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.html index 66416dd4..443fe8ed 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.html @@ -1,9 +1,12 @@ -
{{singleSliderSideScreen.title}}: {{title}}
- + {{ singleSliderSideScreen.title }}: {{ title }} +
+ + (onChange)="onChange()" +> -
{{tooltip}}
\ No newline at end of file +
{{ tooltip }}
diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.spec.ts index 9abebcb3..5f9c10ec 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { SingleSliderScreenComponent } from './single-slider-screen.component'; +import { SingleSliderScreenComponent } from "./single-slider-screen.component"; -describe('SingleSliderScreenComponent', () => { +describe("SingleSliderScreenComponent", () => { let component: SingleSliderScreenComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SingleSliderScreenComponent ] - }) - .compileComponents(); + declarations: [SingleSliderScreenComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('SingleSliderScreenComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.ts index 1071871d..2fde913f 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component.ts @@ -1,42 +1,50 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { BlueprintItem, BSingleSliderSideScreen } from '../../../../../../../../lib/index'; -import { stringify } from 'querystring'; +import { Component, OnInit, Input } from "@angular/core"; +import { + BlueprintItem, + BSingleSliderSideScreen, +} from "../../../../../../../../lib/index"; +import { stringify } from "querystring"; @Component({ - selector: 'app-single-slider-screen', - templateUrl: './single-slider-screen.component.html', - styleUrls: ['./single-slider-screen.component.css'] + selector: "app-single-slider-screen", + templateUrl: "./single-slider-screen.component.html", + styleUrls: ["./single-slider-screen.component.css"], }) export class SingleSliderScreenComponent implements OnInit { - @Input() blueprintItem: BlueprintItem; @Input() singleSliderSideScreen: BSingleSliderSideScreen; value: number; - get title() { return this.value + this.singleSliderSideScreen.sliderUnits } + get title() { + return this.value + this.singleSliderSideScreen.sliderUnits; + } get tooltip() { let html = this.singleSliderSideScreen.tooltip; - if (html.includes('{1}')) { - html = html.replace('{0}', 'fuel'); - html = html.replace('{1}', this.value.toString()); - } - else { - html = html.replace('{0}', this.value.toString()); + if (html.includes("{1}")) { + html = html.replace("{0}", "fuel"); + html = html.replace("{1}", this.value.toString()); + } else { + html = html.replace("{0}", this.value.toString()); } return html; } - get step() { return 1 / Math.pow(10, this.singleSliderSideScreen.sliderDecimalPlaces) } + get step() { + return 1 / Math.pow(10, this.singleSliderSideScreen.sliderDecimalPlaces); + } - constructor() { } + constructor() {} ngOnInit() { - this.value = this.blueprintItem.getUiSettings(this.singleSliderSideScreen.id).values[0] as number; + this.value = this.blueprintItem.getUiSettings( + this.singleSliderSideScreen.id + ).values[0] as number; } onChange() { - this.blueprintItem.getUiSettings(this.singleSliderSideScreen.id).values[0] = this.value; + this.blueprintItem.getUiSettings(this.singleSliderSideScreen.id).values[0] = + this.value; } } diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.css b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.css index fd786d7d..4c37f313 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.css +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.css @@ -15,4 +15,4 @@ margin-top: 10px; text-align: justify; font-size: smaller; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.html b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.html index 7abd0a77..d6fb7e38 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.html @@ -1,14 +1,29 @@ -
{{thresholdSwitchSideScreen.title}} :
-
{{valueLabel}}
+
{{ thresholdSwitchSideScreen.title }} :
+
+ {{ valueLabel }} +
- - + +
+ (onChange)="onChange()" +> -
{{tooltip}}
+
{{ tooltip }}
diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.spec.ts index 9c4666ca..dc7c1c94 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ThresholdSwhitchScreenComponent } from './threshold-switch-screen.component'; +import { ThresholdSwhitchScreenComponent } from "./threshold-switch-screen.component"; -describe('ThresholdSwhitchScreenComponent', () => { +describe("ThresholdSwhitchScreenComponent", () => { let component: ThresholdSwhitchScreenComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ThresholdSwhitchScreenComponent ] - }) - .compileComponents(); + declarations: [ThresholdSwhitchScreenComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ThresholdSwhitchScreenComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.ts index 1d08e88c..76c3dc3d 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component.ts @@ -1,13 +1,15 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { BlueprintItem, BThresholdSwitchSideScreen } from '../../../../../../../../lib/index'; +import { Component, OnInit, Input } from "@angular/core"; +import { + BlueprintItem, + BThresholdSwitchSideScreen, +} from "../../../../../../../../lib/index"; @Component({ - selector: 'app-threshold-switch-screen', - templateUrl: './threshold-switch-screen.component.html', - styleUrls: ['./threshold-switch-screen.component.css'] + selector: "app-threshold-switch-screen", + templateUrl: "./threshold-switch-screen.component.html", + styleUrls: ["./threshold-switch-screen.component.css"], }) export class ThresholdSwhitchScreenComponent implements OnInit { - @Input() blueprintItem: BlueprintItem; @Input() thresholdSwitchSideScreen: BThresholdSwitchSideScreen; @@ -15,25 +17,29 @@ export class ThresholdSwhitchScreenComponent implements OnInit { value: number; get correctedMaxRange() { - if (this.blueprintItem.id=='LogicPressureSensorGas') return this.thresholdSwitchSideScreen.rangeMax *1000; - else if (this.thresholdSwitchSideScreen.thresholdValueUnits==' ºC') return 1000; + if (this.blueprintItem.id == "LogicPressureSensorGas") + return this.thresholdSwitchSideScreen.rangeMax * 1000; + else if (this.thresholdSwitchSideScreen.thresholdValueUnits == " ºC") + return 1000; else return this.thresholdSwitchSideScreen.rangeMax; } get correctedStep() { - if (this.thresholdSwitchSideScreen.thresholdValueUnits==' ºC') return 0.1; + if (this.thresholdSwitchSideScreen.thresholdValueUnits == " ºC") return 0.1; else return this.thresholdSwitchSideScreen.incrementScale; } get correctedUnit() { - if (this.thresholdSwitchSideScreen.thresholdValueUnits=='germs') return ' germs'; + if (this.thresholdSwitchSideScreen.thresholdValueUnits == "germs") + return " germs"; else return this.thresholdSwitchSideScreen.thresholdValueUnits; } get valueWithUnit() { - let returnValue = '' + let returnValue = ""; let correctedValue = this.value.toString(); - if (this.thresholdSwitchSideScreen.thresholdValueUnits == ' ºC') correctedValue = (this.value - 273.15).toFixed(1) + if (this.thresholdSwitchSideScreen.thresholdValueUnits == " ºC") + correctedValue = (this.value - 273.15).toFixed(1); returnValue = returnValue + correctedValue; returnValue = returnValue + this.correctedUnit; @@ -46,35 +52,54 @@ export class ThresholdSwhitchScreenComponent implements OnInit { } get tooltip() { - let html = this.above ? this.thresholdSwitchSideScreen.aboveToolTip : this.thresholdSwitchSideScreen.belowToolTip; + let html = this.above + ? this.thresholdSwitchSideScreen.aboveToolTip + : this.thresholdSwitchSideScreen.belowToolTip; - html = html.replace('{0}', this.valueWithUnit); + html = html.replace("{0}", this.valueWithUnit); return html; } - get classAbove() { return "button-item " + (this.above ? "p-button-info" : "p-button-secondary") } - get classBelow() { return "button-item " + (this.above ? "p-button-secondary" : "p-button-info") } + get classAbove() { + return ( + "button-item " + (this.above ? "p-button-info" : "p-button-secondary") + ); + } + get classBelow() { + return ( + "button-item " + (this.above ? "p-button-secondary" : "p-button-info") + ); + } - constructor() { } + constructor() {} ngOnInit() { - this.value = this.blueprintItem.getUiSettings(this.thresholdSwitchSideScreen.id).values[0] as number; - this.above = this.blueprintItem.getUiSettings(this.thresholdSwitchSideScreen.id).values[1] as boolean; + this.value = this.blueprintItem.getUiSettings( + this.thresholdSwitchSideScreen.id + ).values[0] as number; + this.above = this.blueprintItem.getUiSettings( + this.thresholdSwitchSideScreen.id + ).values[1] as boolean; } clickAbove() { this.above = true; - this.blueprintItem.getUiSettings(this.thresholdSwitchSideScreen.id).values[1] = this.above; + this.blueprintItem.getUiSettings( + this.thresholdSwitchSideScreen.id + ).values[1] = this.above; } clickBelow() { this.above = false; - this.blueprintItem.getUiSettings(this.thresholdSwitchSideScreen.id).values[1] = this.above; + this.blueprintItem.getUiSettings( + this.thresholdSwitchSideScreen.id + ).values[1] = this.above; } onChange() { - this.blueprintItem.getUiSettings(this.thresholdSwitchSideScreen.id).values[0] = this.value; + this.blueprintItem.getUiSettings( + this.thresholdSwitchSideScreen.id + ).values[0] = this.value; } - } diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.html b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.html index f1cc6231..cad18d6f 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.html +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.html @@ -1,27 +1,37 @@ -
- +
+ Settings
- - - - - - - - + + + + + + + +
diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.spec.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.spec.ts index 14c94324..55db5562 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { UiScreenContainerComponent } from './ui-screen-container.component'; +import { UiScreenContainerComponent } from "./ui-screen-container.component"; -describe('UiScreenContainerComponent', () => { +describe("UiScreenContainerComponent", () => { let component: UiScreenContainerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ UiScreenContainerComponent ] - }) - .compileComponents(); + declarations: [UiScreenContainerComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('UiScreenContainerComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.ts b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.ts index 70e3ca04..97b6fd5f 100644 --- a/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.ts +++ b/frontend/src/app/module-blueprint/components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component.ts @@ -1,15 +1,18 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { BlueprintItem } from '../../../../../../../../lib/index'; +import { Component, OnInit, Input } from "@angular/core"; +import { BlueprintItem } from "../../../../../../../../lib/index"; @Component({ - selector: 'app-ui-screen-container', - templateUrl: './ui-screen-container.component.html', - styleUrls: ['./ui-screen-container.component.css'] + selector: "app-ui-screen-container", + templateUrl: "./ui-screen-container.component.html", + styleUrls: ["./ui-screen-container.component.css"], }) export class UiScreenContainerComponent { - @Input() blueprintItem: BlueprintItem; - get showSettings() { return this.blueprintItem.oniItem.uiScreens.length > 0; } - get uiScreens() { return this.blueprintItem.oniItem.uiScreens; } + get showSettings() { + return this.blueprintItem.oniItem.uiScreens.length > 0; + } + get uiScreens() { + return this.blueprintItem.oniItem.uiScreens; + } } diff --git a/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.html b/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.html index 44e81483..27492525 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.html +++ b/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.html @@ -1,14 +1,37 @@ - - - + + - + - + diff --git a/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.spec.ts b/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.spec.ts index c425ad7f..a794e81a 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { ComponentLoginDialogComponent } from './login-dialog.component'; +import { ComponentLoginDialogComponent } from "./login-dialog.component"; -describe('ComponentLoginDialogComponent', () => { +describe("ComponentLoginDialogComponent", () => { let component: ComponentLoginDialogComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ComponentLoginDialogComponent ] - }) - .compileComponents(); + declarations: [ComponentLoginDialogComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('ComponentLoginDialogComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.ts b/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.ts index e6569677..87fd3e2b 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.ts +++ b/frontend/src/app/module-blueprint/components/user-auth/login-dialog/login-dialog.component.ts @@ -1,52 +1,67 @@ -import { Component, OnInit, Output, EventEmitter, ViewChild, ChangeDetectorRef } from '@angular/core'; -import { Dialog } from 'primeng/dialog'; -import { LoginFormComponent } from '../login-form/login-form.component'; -import { RegisterFormComponent } from '../register-form/register-form.component'; -import { disableDebugTools } from '@angular/platform-browser'; +import { + Component, + OnInit, + Output, + EventEmitter, + ViewChild, + ChangeDetectorRef, +} from "@angular/core"; +import { Dialog } from "primeng/dialog"; +import { LoginFormComponent } from "../login-form/login-form.component"; +import { RegisterFormComponent } from "../register-form/register-form.component"; +import { disableDebugTools } from "@angular/platform-browser"; @Component({ - selector: 'app-login-dialog', - templateUrl: './login-dialog.component.html', - styleUrls: ['./login-dialog.component.css'] + selector: "app-login-dialog", + templateUrl: "./login-dialog.component.html", + styleUrls: ["./login-dialog.component.css"], }) export class ComponentLoginDialogComponent implements OnInit { - visible: boolean = false; loginType: LoginType = LoginType.Login; - @ViewChild('loginDialog', {static: true}) loginDialog: Dialog - @ViewChild('loginForm') loginForm: LoginFormComponent - @ViewChild('registerForm') registerForm: RegisterFormComponent - + @ViewChild("loginDialog", { static: true }) loginDialog: Dialog; + @ViewChild("loginForm") loginForm: LoginFormComponent; + @ViewChild("registerForm") registerForm: RegisterFormComponent; - get label() { return this.isLogin ? $localize`Login` : $localize`Register` } //!loginForm.valid || loginForm.pending || working + get label() { + return this.isLogin ? $localize`Login` : $localize`Register`; + } //!loginForm.valid || loginForm.pending || working get icon() { - if (this.isLogin && this.loginForm != null) return this.loginForm.working ? 'pi pi-spin pi-spinner' : ''; - else if (this.isRegistration && this.registerForm != null) return this.registerForm.working ? 'pi pi-spin pi-spinner' : ''; - else return ''; + if (this.isLogin && this.loginForm != null) + return this.loginForm.working ? "pi pi-spin pi-spinner" : ""; + else if (this.isRegistration && this.registerForm != null) + return this.registerForm.working ? "pi pi-spin pi-spinner" : ""; + else return ""; } get disabled() { - if (this.isLogin && this.loginForm != null) return !this.loginForm.loginForm.valid || this.loginForm.loginForm.pending || this.loginForm.working ; - else if (this.isRegistration && this.registerForm != null) return !this.registerForm.registerForm.valid || this.registerForm.registerForm.pending || this.registerForm.working ; + if (this.isLogin && this.loginForm != null) + return ( + !this.loginForm.loginForm.valid || + this.loginForm.loginForm.pending || + this.loginForm.working + ); + else if (this.isRegistration && this.registerForm != null) + return ( + !this.registerForm.registerForm.valid || + this.registerForm.registerForm.pending || + this.registerForm.working + ); else return false; } - constructor(private cdRef: ChangeDetectorRef) { - } + constructor(private cdRef: ChangeDetectorRef) {} ngOnInit() { - // This is here because we have getters with static=false ViewChild this.cdRef.detectChanges(); } - cancel(event: any) - { + cancel(event: any) { this.hideDialog(); } - showDialog() - { + showDialog() { this.loginType = LoginType.Login; this.cdRef.detectChanges(); @@ -55,22 +70,23 @@ export class ComponentLoginDialogComponent implements OnInit { this.recenter(); } - submit() - { + submit() { if (this.isLogin) this.loginForm.onSubmit(); else if (this.isRegistration) this.registerForm.onSubmit(); } - hideDialog() - { + hideDialog() { this.visible = false; } - get isLogin(): boolean { return this.loginType == LoginType.Login; } - get isRegistration(): boolean { return this.loginType == LoginType.Registration; } + get isLogin(): boolean { + return this.loginType == LoginType.Login; + } + get isRegistration(): boolean { + return this.loginType == LoginType.Registration; + } - registration() - { + registration() { this.loginType = LoginType.Registration; this.cdRef.detectChanges(); @@ -78,16 +94,13 @@ export class ComponentLoginDialogComponent implements OnInit { this.recenter(); } - recenter() - { + recenter() { //setTimeout(() => {this.loginDialog.positionOverlay();}, 0) } - } -enum LoginType -{ +enum LoginType { Login, Registration, - ForgotPassword + ForgotPassword, } diff --git a/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.css b/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.css index 9827e931..e554bd52 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.css +++ b/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.css @@ -1,9 +1,9 @@ .error-red { - color: darkred; + color: darkred; margin-left: 0.5em; } .recaptcha-wrap { font-size: x-small; width: 25em; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.html b/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.html index 9391b18e..ce0ce6ec 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.html +++ b/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.html @@ -1,31 +1,44 @@
- -
+
- + -
+
Username is required.
-
Invalid characters in username
+
+ Invalid characters in username +
Username is too long
-
+
- + -
+
Password is required.
Authentification error
-
+
First registration ? -
-
+
+
This site is protected by reCAPTCHA and the Google Privacy Policy and @@ -33,5 +46,5 @@
- + diff --git a/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.spec.ts b/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.spec.ts index c5f08d40..e42fad77 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { LoginFormComponent } from './login-form.component'; +import { LoginFormComponent } from "./login-form.component"; -describe('LoginFormComponent', () => { +describe("LoginFormComponent", () => { let component: LoginFormComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ LoginFormComponent ] - }) - .compileComponents(); + declarations: [LoginFormComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('LoginFormComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.ts b/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.ts index ee7577c2..a3cc9981 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.ts +++ b/frontend/src/app/module-blueprint/components/user-auth/login-form/login-form.component.ts @@ -1,22 +1,24 @@ -import { Component, OnInit, EventEmitter, Output } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { HttpClient } from '@angular/common/http'; -import { AuthenticationService } from '../../../services/authentification-service'; -import { MessageService } from 'primeng/api'; -import { ReCaptchaV3Service } from 'ng-recaptcha'; -import { Observable, Subscription } from 'rxjs'; -import { UsernameValidationDirective } from 'src/app/module-blueprint/directives/username-validation.directive'; +import { Component, OnInit, EventEmitter, Output } from "@angular/core"; +import { FormControl, FormGroup, Validators } from "@angular/forms"; +import { HttpClient } from "@angular/common/http"; +import { AuthenticationService } from "../../../services/authentification-service"; +import { MessageService } from "primeng/api"; +import { ReCaptchaV3Service } from "ng-recaptcha"; +import { Observable, Subscription } from "rxjs"; +import { UsernameValidationDirective } from "src/app/module-blueprint/directives/username-validation.directive"; @Component({ - selector: 'app-login-form', - templateUrl: './login-form.component.html', - styleUrls: ['./login-form.component.css'] + selector: "app-login-form", + templateUrl: "./login-form.component.html", + styleUrls: ["./login-form.component.css"], }) export class LoginFormComponent { - loginForm = new FormGroup({ - username: new FormControl('', [Validators.required, UsernameValidationDirective.validate]), - password: new FormControl('', [Validators.required]) + username: new FormControl("", [ + Validators.required, + UsernameValidationDirective.validate, + ]), + password: new FormControl("", [Validators.required]), }); @Output() loginRegistration = new EventEmitter(); @@ -25,10 +27,15 @@ export class LoginFormComponent { constructor( private authService: AuthenticationService, private recaptchaV3Service: ReCaptchaV3Service, - private messageService: MessageService) { } + private messageService: MessageService + ) {} - get f() { return this.loginForm.controls; } - get icon() { return this.working ? 'pi pi-spin pi-spinner' : ''; } + get f() { + return this.loginForm.controls; + } + get icon() { + return this.working ? "pi pi-spin pi-spinner" : ""; + } working: boolean = false; authError: boolean = false; @@ -42,33 +49,37 @@ export class LoginFormComponent { subscription: Subscription; onSubmit() { this.working = true; - this.subscription = this.recaptchaV3Service.execute('login').subscribe((token) => { - - let tokenPayload = { - 'g-recaptcha-response': token, - email: '', - username: this.loginForm.value.username as string, - password: this.loginForm.value.password as string - } - - this.authService.login(tokenPayload).subscribe({ - next: this.handleSaveNext.bind(this), - error: this.handleSaveError.bind(this) + this.subscription = this.recaptchaV3Service + .execute("login") + .subscribe((token) => { + let tokenPayload = { + "g-recaptcha-response": token, + email: "", + username: this.loginForm.value.username as string, + password: this.loginForm.value.password as string, + }; + + this.authService.login(tokenPayload).subscribe({ + next: this.handleSaveNext.bind(this), + error: this.handleSaveError.bind(this), + }); + + this.subscription.unsubscribe(); }); - - this.subscription.unsubscribe(); - - }); } handleSaveNext(response: any) { this.loginOk.emit(); - const username = this.authService.getUserDetails().username + const username = this.authService.getUserDetails().username; let summary: string = $localize`Login Successful`; let detail: string = $localize`Welcome ${username}`; - this.messageService.add({ severity: 'success', summary: summary, detail: detail }); + this.messageService.add({ + severity: "success", + summary: summary, + detail: detail, + }); this.working = false; } @@ -80,5 +91,4 @@ export class LoginFormComponent { registration() { this.loginRegistration.emit(); } - } diff --git a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.css b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.css index 72d1156b..f47b00ad 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.css +++ b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.css @@ -1,5 +1,5 @@ .error-red { - color: darkred; + color: darkred; margin-left: 0.5em; } @@ -16,4 +16,4 @@ .recaptcha-wrap { font-size: x-small; width: 25em; -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.html b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.html index d5671e36..a4280eb2 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.html +++ b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.html @@ -1,47 +1,86 @@
- -
+
- + -
+
E-Mail is required.
E-Mail is not valid.
-
+
- + -
+
Username is required.
-
Username is unavailable.
-
Invalid characters in username
+
+ Username is unavailable. +
+
+ Invalid characters in username +
+
+
+ Checking username availability... +
+
+ Username is available
-
Checking username availability...
-
Username is available
-
+
- + -
+
Password is required.
-
+
- + -
Passwords must match.
+
+ Passwords must match. +
Authentification error
-
Username or e-mail is already registered
+
+ Username or e-mail is already registered +
-
+
This site is protected by reCAPTCHA and the Google Privacy Policy and @@ -49,7 +88,5 @@
- - - + diff --git a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.spec.ts b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.spec.ts index caa8e72f..5b515d8c 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.spec.ts +++ b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.spec.ts @@ -1,16 +1,15 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { RegisterFormComponent } from './register-form.component'; +import { RegisterFormComponent } from "./register-form.component"; -describe('RegisterFormComponent', () => { +describe("RegisterFormComponent", () => { let component: RegisterFormComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ RegisterFormComponent ] - }) - .compileComponents(); + declarations: [RegisterFormComponent], + }).compileComponents(); })); beforeEach(() => { @@ -19,7 +18,7 @@ describe('RegisterFormComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.ts b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.ts index babb4cc3..ccf15bf7 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.ts +++ b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.ts @@ -1,38 +1,54 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; -import { FormGroup, FormControl, Validators, AbstractControl, FormBuilder } from '@angular/forms'; -import { HttpClient } from '@angular/common/http'; -import { CheckDuplicateService } from '../../../services/check-duplicate-service'; -import { AuthenticationService } from '../../../services/authentification-service'; -import { MessageService } from 'primeng/api'; -import { Subscription } from 'rxjs'; -import { ReCaptchaV3Service } from 'ng-recaptcha'; -import { UsernameValidationDirective } from 'src/app/module-blueprint/directives/username-validation.directive'; - +import { Component, OnInit, Output, EventEmitter } from "@angular/core"; +import { + FormGroup, + FormControl, + Validators, + AbstractControl, + FormBuilder, +} from "@angular/forms"; +import { HttpClient } from "@angular/common/http"; +import { CheckDuplicateService } from "../../../services/check-duplicate-service"; +import { AuthenticationService } from "../../../services/authentification-service"; +import { MessageService } from "primeng/api"; +import { Subscription } from "rxjs"; +import { ReCaptchaV3Service } from "ng-recaptcha"; +import { UsernameValidationDirective } from "src/app/module-blueprint/directives/username-validation.directive"; @Component({ - selector: 'app-register-form', - templateUrl: './register-form.component.html', - styleUrls: ['./register-form.component.css'] + selector: "app-register-form", + templateUrl: "./register-form.component.html", + styleUrls: ["./register-form.component.css"], }) export class RegisterFormComponent { - - registerForm = new FormGroup({ - email: new FormControl('', [Validators.required, Validators.email]), - username: new FormControl('', [Validators.required, UsernameValidationDirective.validate], [this.checkDuplicateService.usernameValidator()]), - password: new FormControl('', [Validators.required]), - confirmPassword: new FormControl('', [Validators.required]) - }, { validators: [this.passwordConfirming] }); + registerForm = new FormGroup( + { + email: new FormControl("", [Validators.required, Validators.email]), + username: new FormControl( + "", + [Validators.required, UsernameValidationDirective.validate], + [this.checkDuplicateService.usernameValidator()] + ), + password: new FormControl("", [Validators.required]), + confirmPassword: new FormControl("", [Validators.required]), + }, + { validators: [this.passwordConfirming] } + ); @Output() registrationOk = new EventEmitter(); - constructor(private authService: AuthenticationService, + constructor( + private authService: AuthenticationService, private checkDuplicateService: CheckDuplicateService, private messageService: MessageService, - private recaptchaV3Service: ReCaptchaV3Service) { - } + private recaptchaV3Service: ReCaptchaV3Service + ) {} - get f() { return this.registerForm.controls; } - get icon() { return this.working ? 'pi pi-spin pi-spinner' : ''; } + get f() { + return this.registerForm.controls; + } + get icon() { + return this.working ? "pi pi-spin pi-spinner" : ""; + } working: boolean = false; authError: boolean = false; @@ -46,27 +62,29 @@ export class RegisterFormComponent { } passwordConfirming(c: AbstractControl): { invalid: boolean } { - if (c.get('password').value !== c.get('confirmPassword').value) return { invalid: true }; + if (c.get("password").value !== c.get("confirmPassword").value) + return { invalid: true }; } subscription: Subscription; onSubmit() { this.working = true; - this.subscription = this.recaptchaV3Service.execute('register').subscribe((token) => { - let tokenPayload = { - 'g-recaptcha-response': token, - email: this.registerForm.value.email as string, - username: this.registerForm.value.username as string, - password: this.registerForm.value.password as string - } - - this.authService.register(tokenPayload).subscribe({ - next: this.handleSaveNext.bind(this), - error: this.handleSaveError.bind(this) + this.subscription = this.recaptchaV3Service + .execute("register") + .subscribe((token) => { + let tokenPayload = { + "g-recaptcha-response": token, + email: this.registerForm.value.email as string, + username: this.registerForm.value.username as string, + password: this.registerForm.value.password as string, + }; + + this.authService.register(tokenPayload).subscribe({ + next: this.handleSaveNext.bind(this), + error: this.handleSaveError.bind(this), + }); }); - }); - } handleSaveNext(data: any) { @@ -74,10 +92,14 @@ export class RegisterFormComponent { else if (data.token) { this.registrationOk.emit(); - const username = this.authService.getUserDetails().username + const username = this.authService.getUserDetails().username; let summary: string = $localize`Registration Successful`; let detail: string = $localize`Welcome ${username}`; - this.messageService.add({ severity: 'success', summary: summary, detail: detail }); + this.messageService.add({ + severity: "success", + summary: summary, + detail: detail, + }); } this.working = false; diff --git a/frontend/src/app/module-blueprint/directives/blueprint-name-validation.directive.ts b/frontend/src/app/module-blueprint/directives/blueprint-name-validation.directive.ts index b62d2049..1c948922 100644 --- a/frontend/src/app/module-blueprint/directives/blueprint-name-validation.directive.ts +++ b/frontend/src/app/module-blueprint/directives/blueprint-name-validation.directive.ts @@ -1,39 +1,41 @@ -import { Directive } from '@angular/core'; -import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms'; - +import { Directive } from "@angular/core"; +import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms"; @Directive({ - selector: '[appBlueprintNameValidation]', + selector: "[appBlueprintNameValidation]", providers: [ - { provide: NG_VALIDATORS, useExisting: BlueprintNameValidationDirective, multi: true } - ] + { + provide: NG_VALIDATORS, + useExisting: BlueprintNameValidationDirective, + multi: true, + }, + ], }) export class BlueprintNameValidationDirective implements Validator { - - constructor() { } + constructor() {} static regexp = /^[a-zA-Z0-9-_ ]+$/; - validate(control: AbstractControl): { [key: string]: any } { - return BlueprintNameValidationDirective.validateBlueprintName(control); + validate(control: AbstractControl): { [key: string]: any } { + return BlueprintNameValidationDirective.validateBlueprintName(control); } - static validateBlueprintName(control: AbstractControl): { [key: string]: any } { - + static validateBlueprintName(control: AbstractControl): { + [key: string]: any; + } { let returnValue = null; if (control.value == null) return returnValue; if (control.value.length == 0) return returnValue; if (control.value.search(BlueprintNameValidationDirective.regexp) == -1) { - if (returnValue == null) returnValue = {} + if (returnValue == null) returnValue = {}; returnValue.invalidChars = true; - } + } if (control.value.length > 60) { - if (returnValue == null) returnValue = {} + if (returnValue == null) returnValue = {}; returnValue.tooLong = true; - } + } return returnValue; } - } diff --git a/frontend/src/app/module-blueprint/directives/custom-event-manager.ts b/frontend/src/app/module-blueprint/directives/custom-event-manager.ts index 1f900825..7535ca56 100644 --- a/frontend/src/app/module-blueprint/directives/custom-event-manager.ts +++ b/frontend/src/app/module-blueprint/directives/custom-event-manager.ts @@ -1,20 +1,28 @@ -import { Injectable, Inject, NgZone } from '@angular/core'; -import { EVENT_MANAGER_PLUGINS, EventManager } from '@angular/platform-browser'; +import { Injectable, Inject, NgZone } from "@angular/core"; +import { EVENT_MANAGER_PLUGINS, EventManager } from "@angular/platform-browser"; @Injectable() export class CustomEventManager extends EventManager { - constructor(@Inject(EVENT_MANAGER_PLUGINS) plugins: any[], private zone: NgZone) { - super(plugins, zone); - } + constructor( + @Inject(EVENT_MANAGER_PLUGINS) plugins: any[], + private zone: NgZone + ) { + super(plugins, zone); + } // Performance optimisation - addEventListener(element: HTMLElement, eventName: string, handler: Function): Function { - if(eventName.endsWith('out-zone')) { - eventName = eventName.split('.')[0]; - return this.zone.runOutsideAngular(() => - super.addEventListener(element, eventName, handler)); - } + addEventListener( + element: HTMLElement, + eventName: string, + handler: Function + ): Function { + if (eventName.endsWith("out-zone")) { + eventName = eventName.split(".")[0]; + return this.zone.runOutsideAngular(() => + super.addEventListener(element, eventName, handler) + ); + } return super.addEventListener(element, eventName, handler); } -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/directives/draganddrop.directive.ts b/frontend/src/app/module-blueprint/directives/draganddrop.directive.ts index e4610205..ccbb31e7 100644 --- a/frontend/src/app/module-blueprint/directives/draganddrop.directive.ts +++ b/frontend/src/app/module-blueprint/directives/draganddrop.directive.ts @@ -1,9 +1,15 @@ -import { Directive, Output, HostListener, EventEmitter, ViewChild, ElementRef } from '@angular/core'; -import { Vector2 } from '../../../../../lib/index' - -@Directive({ selector: '[appDragAndDrop]' }) +import { + Directive, + Output, + HostListener, + EventEmitter, + ViewChild, + ElementRef, +} from "@angular/core"; +import { Vector2 } from "../../../../../lib/index"; + +@Directive({ selector: "[appDragAndDrop]" }) export class DragAndDropDirective { - @Output() myMouseUp = new EventEmitter(); @Output() myMouseDown = new EventEmitter(); @Output() myMouseOut = new EventEmitter(); @@ -26,15 +32,21 @@ export class DragAndDropDirective { } } - @HostListener('mousedown', ['$event']) onMouseDown(event: any) { + @HostListener("mousedown", ["$event"]) onMouseDown(event: any) { var event = window.event || event; // old IE support let dragButton: number = event.button; if (!this.isMouseDown[dragButton]) { this.myMouseDown.emit(event); this.isMouseDown[dragButton] = true; - this.startDragPosition[dragButton] = new Vector2(event.clientX, event.clientY); - this.lastDragPosition[dragButton] = new Vector2(event.clientX, event.clientY); + this.startDragPosition[dragButton] = new Vector2( + event.clientX, + event.clientY + ); + this.lastDragPosition[dragButton] = new Vector2( + event.clientX, + event.clientY + ); } if (event.preventDefault) { @@ -42,47 +54,52 @@ export class DragAndDropDirective { } } - @HostListener('mouseup', ['$event']) onMouseUp(event: any) { + @HostListener("mouseup", ["$event"]) onMouseUp(event: any) { var event = window.event || event; // old IE support let dragButton: number = event.button; // Emit a mouseclick if the mouse hasn't moved since mousedown - if (new Vector2(event.clientX, event.clientY).equals(this.startDragPosition[dragButton])) this.myMouseClick.emit(event); + if ( + new Vector2(event.clientX, event.clientY).equals( + this.startDragPosition[dragButton] + ) + ) + this.myMouseClick.emit(event); this.myMouseUp.emit(event); this.stopDrag(event, dragButton); } - @HostListener('contextmenu', ['$event']) onContextMenu(event: any) { + @HostListener("contextmenu", ["$event"]) onContextMenu(event: any) { // Comment this to get context on canvas return false; } - @HostListener('mouseout', ['$event']) onMouseLeave(event: any) { + @HostListener("mouseout", ["$event"]) onMouseLeave(event: any) { for (let i = 0; i <= 2; i++) this.stopDrag(event, i); this.myMouseOut.emit(event); } - @HostListener('mousemove.out-zone', ['$event']) onMouseMove(event: any) { + @HostListener("mousemove.out-zone", ["$event"]) onMouseMove(event: any) { var event = window.event || event; // old IE support let isDragging = false; for (let i = 0; i <= 2; i++) if (this.isMouseDown[i]) isDragging = true; if (isDragging) { - for (let i = 0; i <= 2; i++) if (this.isMouseDown[i]) { - event.dragX = event.clientX - this.lastDragPosition[i].x; - event.dragY = event.clientY - this.lastDragPosition[i].y; - event.dragButton = this.isMouseDown; - - this.lastDragPosition[i].x = event.clientX; - this.lastDragPosition[i].y = event.clientY; - } + for (let i = 0; i <= 2; i++) + if (this.isMouseDown[i]) { + event.dragX = event.clientX - this.lastDragPosition[i].x; + event.dragY = event.clientY - this.lastDragPosition[i].y; + event.dragButton = this.isMouseDown; + + this.lastDragPosition[i].x = event.clientX; + this.lastDragPosition[i].y = event.clientY; + } this.myMouseDrag.emit(event); - } - else { + } else { this.myMouseMove.emit(event); } } diff --git a/frontend/src/app/module-blueprint/directives/keyboard.directive.ts b/frontend/src/app/module-blueprint/directives/keyboard.directive.ts index 0c102590..1f732ff1 100644 --- a/frontend/src/app/module-blueprint/directives/keyboard.directive.ts +++ b/frontend/src/app/module-blueprint/directives/keyboard.directive.ts @@ -1,11 +1,10 @@ -import { Directive, Output, HostListener, EventEmitter } from '@angular/core'; +import { Directive, Output, HostListener, EventEmitter } from "@angular/core"; -@Directive({ selector: '[appKeyEvents]' }) +@Directive({ selector: "[appKeyEvents]" }) export class KeyboardDirective { @Output() keyPress = new EventEmitter(); - @HostListener('document:keydown', ['$event']) onKeyPress(event: any) { + @HostListener("document:keydown", ["$event"]) onKeyPress(event: any) { this.keyPress.emit(event); } - } diff --git a/frontend/src/app/module-blueprint/directives/mousewheel.directive.ts b/frontend/src/app/module-blueprint/directives/mousewheel.directive.ts index a64a8374..0f143d87 100644 --- a/frontend/src/app/module-blueprint/directives/mousewheel.directive.ts +++ b/frontend/src/app/module-blueprint/directives/mousewheel.directive.ts @@ -1,27 +1,33 @@ -import { Directive, Output, HostListener, EventEmitter } from '@angular/core'; +import { Directive, Output, HostListener, EventEmitter } from "@angular/core"; -@Directive({ selector: '[appMouseWheel]' }) +@Directive({ selector: "[appMouseWheel]" }) export class MouseWheelDirective { @Output() mouseWheelUp = new EventEmitter(); @Output() mouseWheelDown = new EventEmitter(); @Output() mouseWheel = new EventEmitter(); - @HostListener('mousewheel.out-zone', ['$event']) onMouseWheelChrome(event: any) { + @HostListener("mousewheel.out-zone", ["$event"]) onMouseWheelChrome( + event: any + ) { this.mouseWheelFunc(event); } - @HostListener('DOMMouseScroll.out-zone', ['$event']) onMouseWheelFirefox(event: any) { + @HostListener("DOMMouseScroll.out-zone", ["$event"]) onMouseWheelFirefox( + event: any + ) { this.mouseWheelFunc(event); } - @HostListener('onmousewheel.out-zone', ['$event']) onMouseWheelIE(event: any) { + @HostListener("onmousewheel.out-zone", ["$event"]) onMouseWheelIE( + event: any + ) { this.mouseWheelFunc(event); } mouseWheelFunc(event: any) { var event = window.event || event; // old IE support - var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); - event.delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); + var delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)); + event.delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)); if (delta != 0) this.mouseWheel.emit(event); if (delta > 0) { this.mouseWheelUp.emit(event); diff --git a/frontend/src/app/module-blueprint/directives/username-validation.directive.ts b/frontend/src/app/module-blueprint/directives/username-validation.directive.ts index 98042fed..e0fa506b 100644 --- a/frontend/src/app/module-blueprint/directives/username-validation.directive.ts +++ b/frontend/src/app/module-blueprint/directives/username-validation.directive.ts @@ -1,16 +1,18 @@ -import { Directive } from '@angular/core'; -import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms'; - +import { Directive } from "@angular/core"; +import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms"; @Directive({ - selector: '[appUsernameValidation]', + selector: "[appUsernameValidation]", providers: [ - { provide: NG_VALIDATORS, useExisting: UsernameValidationDirective, multi: true } - ] + { + provide: NG_VALIDATORS, + useExisting: UsernameValidationDirective, + multi: true, + }, + ], }) export class UsernameValidationDirective implements Validator { - - constructor() { } + constructor() {} static regexp = /^[a-zA-Z0-9-_]+$/; validate(control: AbstractControl): { [key: string]: any } { @@ -18,22 +20,20 @@ export class UsernameValidationDirective implements Validator { } static validate(control: AbstractControl): { [key: string]: any } { - let returnValue = null; if (control.value == null) return returnValue; if (control.value.length == 0) return returnValue; if (control.value.search(UsernameValidationDirective.regexp) == -1) { - if (returnValue == null) returnValue = {} + if (returnValue == null) returnValue = {}; returnValue.invalidChars = true; - } + } if (control.value.length > 30) { - if (returnValue == null) returnValue = {} + if (returnValue == null) returnValue = {}; returnValue.tooLong = true; - } + } return returnValue; } - } diff --git a/frontend/src/app/module-blueprint/drawing/draw-mini-ui.ts b/frontend/src/app/module-blueprint/drawing/draw-mini-ui.ts index b88821d6..0fd43260 100644 --- a/frontend/src/app/module-blueprint/drawing/draw-mini-ui.ts +++ b/frontend/src/app/module-blueprint/drawing/draw-mini-ui.ts @@ -1,36 +1,57 @@ -import { CameraService, Overlay, IObsCameraChanged } from '../../../../../lib/index' -import { } from 'pixi.js-legacy'; +import { + CameraService, + Overlay, + IObsCameraChanged, +} from "../../../../../lib/index"; +import {} from "pixi.js-legacy"; export class DrawMiniUi implements IObsCameraChanged { - - overlays: Overlay[] = [Overlay.Base, Overlay.Power, Overlay.Liquid, Overlay.Gas, Overlay.Automation, Overlay.Conveyor]; - icons: string[] = ["icon_category_base", "icon_category_electrical", "icon_category_plumbing", "icon_category_ventilation", "icon_category_automation", "icon_category_shipping"]; + overlays: Overlay[] = [ + Overlay.Base, + Overlay.Power, + Overlay.Liquid, + Overlay.Gas, + Overlay.Automation, + Overlay.Conveyor, + ]; + icons: string[] = [ + "icon_category_base", + "icon_category_electrical", + "icon_category_plumbing", + "icon_category_ventilation", + "icon_category_automation", + "icon_category_shipping", + ]; texturesActive: PIXI.Texture[]; texturesInactive: PIXI.Texture[]; buttons: PIXI.Sprite[]; cameraChanged(camera: CameraService): void { for (let i = 0; i < this.overlays.length; i++) { - if (camera.overlay == this.overlays[i]) this.buttons[i].texture = this.texturesActive[i]; + if (camera.overlay == this.overlays[i]) + this.buttons[i].texture = this.texturesActive[i]; else this.buttons[i].texture = this.texturesInactive[i]; } } init(stage: PIXI.Container) { - this.texturesActive = []; this.texturesInactive = []; this.buttons = []; let buttonPositionX = 50; for (let i = 0; i < this.overlays.length; i++) { - this.texturesActive[i] = PIXI.Texture.from('assets/images/miniui/' + this.icons[i] + '.png'); - this.texturesInactive[i] = PIXI.Texture.from('assets/images/miniui/' + this.icons[i] + '_disabled.png'); + this.texturesActive[i] = PIXI.Texture.from( + "assets/images/miniui/" + this.icons[i] + ".png" + ); + this.texturesInactive[i] = PIXI.Texture.from( + "assets/images/miniui/" + this.icons[i] + "_disabled.png" + ); this.buttons[i] = new PIXI.Sprite(this.texturesActive[i]); this.buttons[i].buttonMode = true; this.buttons[i].anchor.set(0.5); - this.buttons[i].width = 50 - this.buttons[i].height = 50 + this.buttons[i].width = 50; + this.buttons[i].height = 50; this.buttons[i].position.x = buttonPositionX; this.buttons[i].position.y = 50; @@ -39,12 +60,30 @@ export class DrawMiniUi implements IObsCameraChanged { this.buttons[i].interactive = true; switch (this.overlays[i]) { - case Overlay.Base: { this.buttons[i].on('click', this.clickBase); break; } - case Overlay.Power: { this.buttons[i].on('click', this.clickPower); break; } - case Overlay.Liquid: { this.buttons[i].on('click', this.clickLiquid); break; } - case Overlay.Gas: { this.buttons[i].on('click', this.clickGas); break; } - case Overlay.Automation: { this.buttons[i].on('click', this.clickAutomation); break; } - case Overlay.Conveyor: { this.buttons[i].on('click', this.clickConveyor); break; } + case Overlay.Base: { + this.buttons[i].on("click", this.clickBase); + break; + } + case Overlay.Power: { + this.buttons[i].on("click", this.clickPower); + break; + } + case Overlay.Liquid: { + this.buttons[i].on("click", this.clickLiquid); + break; + } + case Overlay.Gas: { + this.buttons[i].on("click", this.clickGas); + break; + } + case Overlay.Automation: { + this.buttons[i].on("click", this.clickAutomation); + break; + } + case Overlay.Conveyor: { + this.buttons[i].on("click", this.clickConveyor); + break; + } } stage.addChild(this.buttons[i]); diff --git a/frontend/src/app/module-blueprint/drawing/draw-pixi.ts b/frontend/src/app/module-blueprint/drawing/draw-pixi.ts index d031f466..0a70b41d 100644 --- a/frontend/src/app/module-blueprint/drawing/draw-pixi.ts +++ b/frontend/src/app/module-blueprint/drawing/draw-pixi.ts @@ -1,13 +1,18 @@ import { ElementRef } from "@angular/core"; import { ComponentCanvasComponent } from "../components/component-canvas/component-canvas.component"; -import { BlueprintItem, CameraService, Vector2, PixiUtil, ZIndex } from '../../../../../lib/index' -import { ComponentMenuComponent } from '../components/component-menu/component-menu.component'; - -import {  } from 'pixi.js-legacy'; -declare var PIXI: any; - -export class DrawPixi implements PixiUtil -{ +import { + BlueprintItem, + CameraService, + Vector2, + PixiUtil, + ZIndex, +} from "../../../../../lib/index"; +import { ComponentMenuComponent } from "../components/component-menu/component-menu.component"; + +import {} from "pixi.js-legacy"; +declare var PIXI: any; + +export class DrawPixi implements PixiUtil { getUtilityGraphicsBack() { return this.utilityGraphicsBack; } @@ -24,7 +29,7 @@ export class DrawPixi implements PixiUtil return PIXI.Sprite.from(ressource); } getNewBaseTexture(url: string) { - return PIXI.Texture.from(url) + return PIXI.Texture.from(url); } getNewTexture(baseTex: any, rectangle: any) { return new PIXI.Texture(baseTex, rectangle); @@ -55,25 +60,19 @@ export class DrawPixi implements PixiUtil blueprintContainer: PIXI.Container; parent: ComponentCanvasComponent; - Init(canvas: ElementRef, parent: ComponentCanvasComponent) - { - + Init(canvas: ElementRef, parent: ComponentCanvasComponent) { DrawPixi.instance = this; this.parent = parent; let htmlCanvas: HTMLCanvasElement = canvas.nativeElement; let options: any = {}; - options.view = htmlCanvas; + options.view = htmlCanvas; options.width = canvas.nativeElement.width; options.height = canvas.nativeElement.height; options.autoResize = true; //options.forceCanvas = true; - - - - PIXI.utils.skipHello(); this.pixiApp = new PIXI.Application(options); this.backGraphics = new PIXI.Graphics(); @@ -93,23 +92,28 @@ export class DrawPixi implements PixiUtil this.pixiApp.stage.addChild(this.blueprintContainer); //this.pixiApp.stage.sortableChildren = true; - this.pixiApp.ticker.add(() => {this.drawAll();}); + this.pixiApp.ticker.add(() => { + this.drawAll(); + }); } InitAnimation() { - this.pixiApp.ticker.add(() => {this.animateAll();}); + this.pixiApp.ticker.add(() => { + this.animateAll(); + }); } - drawAll() - { + drawAll() { ComponentMenuComponent.debugFps = this.pixiApp.ticker.FPS; //console.log('drawAll'); - if (this.pixiApp != null) - { + if (this.pixiApp != null) { //if (this.pixiApp.renderer.width != this.parent.canvasRef.nativeElement.width || - //this.pixiApp.renderer.height != this.parent.canvasRef.nativeElement.height) - this.pixiApp.renderer.resize(this.parent.canvasRef.nativeElement.width, this.parent.canvasRef.nativeElement.height); + //this.pixiApp.renderer.height != this.parent.canvasRef.nativeElement.height) + this.pixiApp.renderer.resize( + this.parent.canvasRef.nativeElement.width, + this.parent.canvasRef.nativeElement.height + ); //console.log('resize'); //return; } @@ -126,36 +130,46 @@ export class DrawPixi implements PixiUtil this.parent.animateAll(); } - clearGraphics() - { + clearGraphics() { this.backGraphics.clear(); this.frontGraphics.clear(); this.utilityGraphicsBack.clear(); this.utilityGraphicsFront.clear(); } - FillRect(color: number, x: number, y: number, w: number, h: number) - { + FillRect(color: number, x: number, y: number, w: number, h: number) { this.backGraphics.beginFill(color); this.backGraphics.drawRect(x, y, w, h); this.backGraphics.endFill(); - } // TODO abstract drawline - drawBlueprintLine(color: string, alpha: number, start: Vector2, end: Vector2, lineWidth: number) { - - this.backGraphics.lineStyle(1, 0xFFFFFF, alpha); + drawBlueprintLine( + color: string, + alpha: number, + start: Vector2, + end: Vector2, + lineWidth: number + ) { + this.backGraphics.lineStyle(1, 0xffffff, alpha); this.backGraphics.moveTo(start.x, start.y); this.backGraphics.lineTo(end.x, end.y); - } drawTemplateItem(templateItem: BlueprintItem, camera: CameraService) { templateItem.drawPixi(camera, this); } - public drawTileRectangle(camera: CameraService, topLeft: Vector2, bottomRight: Vector2, frontGraphics: boolean, borderWidth: number, fillColor: number, borderColor: number, fillAlpha: number, borderAlpha: number) - { + public drawTileRectangle( + camera: CameraService, + topLeft: Vector2, + bottomRight: Vector2, + frontGraphics: boolean, + borderWidth: number, + fillColor: number, + borderColor: number, + fillAlpha: number, + borderAlpha: number + ) { let rectanglePosition = new Vector2( (topLeft.x + camera.cameraOffset.x) * camera.currentZoom, (-topLeft.y + camera.cameraOffset.y) * camera.currentZoom @@ -165,22 +179,33 @@ export class DrawPixi implements PixiUtil (topLeft.y - bottomRight.y) * camera.currentZoom ); - let graphics = frontGraphics ? this.frontGraphics : this.backGraphics + let graphics = frontGraphics ? this.frontGraphics : this.backGraphics; graphics.beginFill(fillColor, fillAlpha); - graphics.drawRect(rectanglePosition.x, rectanglePosition.y, rectangleSize.x, rectangleSize.y); + graphics.drawRect( + rectanglePosition.x, + rectanglePosition.y, + rectangleSize.x, + rectangleSize.y + ); graphics.endFill(); - if (borderWidth > 0) - { + if (borderWidth > 0) { graphics.lineStyle(borderWidth, borderColor, borderAlpha); graphics.moveTo(rectanglePosition.x, rectanglePosition.y); - graphics.lineTo(rectanglePosition.x + rectangleSize.x, rectanglePosition.y); - graphics.lineTo(rectanglePosition.x + rectangleSize.x, rectanglePosition.y + rectangleSize.y); - graphics.lineTo(rectanglePosition.x, rectanglePosition.y + rectangleSize.y); + graphics.lineTo( + rectanglePosition.x + rectangleSize.x, + rectanglePosition.y + ); + graphics.lineTo( + rectanglePosition.x + rectangleSize.x, + rectanglePosition.y + rectangleSize.y + ); + graphics.lineTo( + rectanglePosition.x, + rectanglePosition.y + rectangleSize.y + ); graphics.lineTo(rectanglePosition.x, rectanglePosition.y); } } - - } diff --git a/frontend/src/app/module-blueprint/module-blueprint.module.spec.ts b/frontend/src/app/module-blueprint/module-blueprint.module.spec.ts index b2dd2ac0..51c6901a 100644 --- a/frontend/src/app/module-blueprint/module-blueprint.module.spec.ts +++ b/frontend/src/app/module-blueprint/module-blueprint.module.spec.ts @@ -1,13 +1,13 @@ -import { ModuleBlueprintModule } from './module-blueprint.module'; +import { ModuleBlueprintModule } from "./module-blueprint.module"; -describe('ModuleBlueprintModule', () => { +describe("ModuleBlueprintModule", () => { let moduleBlueprintModule: ModuleBlueprintModule; beforeEach(() => { moduleBlueprintModule = new ModuleBlueprintModule(); }); - it('should create an instance', () => { + it("should create an instance", () => { expect(moduleBlueprintModule).toBeTruthy(); }); }); diff --git a/frontend/src/app/module-blueprint/module-blueprint.module.ts b/frontend/src/app/module-blueprint/module-blueprint.module.ts index 2a350b89..16e58ad8 100644 --- a/frontend/src/app/module-blueprint/module-blueprint.module.ts +++ b/frontend/src/app/module-blueprint/module-blueprint.module.ts @@ -1,99 +1,174 @@ -import { NgModule, ChangeDetectorRef } from '@angular/core'; -import { CommonModule, DatePipe } from '@angular/common'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { HttpClientModule } from '@angular/common/http'; -import { Routes, RouterModule } from '@angular/router'; -import { ComponentCanvasComponent } from 'src/app/module-blueprint/components/component-canvas/component-canvas.component'; -import { ComponentMenuComponent } from 'src/app/module-blueprint/components/component-menu/component-menu.component'; -import { ComponentBlueprintParentComponent } from 'src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component'; +import { NgModule, ChangeDetectorRef } from "@angular/core"; +import { CommonModule, DatePipe } from "@angular/common"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { HttpClientModule } from "@angular/common/http"; +import { Routes, RouterModule } from "@angular/router"; +import { ComponentCanvasComponent } from "src/app/module-blueprint/components/component-canvas/component-canvas.component"; +import { ComponentMenuComponent } from "src/app/module-blueprint/components/component-menu/component-menu.component"; +import { ComponentBlueprintParentComponent } from "src/app/module-blueprint/components/component-blueprint-parent/component-blueprint-parent.component"; -import { MouseWheelDirective } from 'src/app/module-blueprint/directives/mousewheel.directive'; -import { DragAndDropDirective } from 'src/app/module-blueprint/directives/draganddrop.directive'; +import { MouseWheelDirective } from "src/app/module-blueprint/directives/mousewheel.directive"; +import { DragAndDropDirective } from "src/app/module-blueprint/directives/draganddrop.directive"; - -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { ButtonModule } from 'primeng/button'; -import { CardModule } from 'primeng/card'; -import { ScrollPanelModule } from 'primeng/scrollpanel'; -import { OverlayPanelModule } from 'primeng/overlaypanel'; -import { MenubarModule } from 'primeng/menubar'; -import { TabMenuModule } from 'primeng/tabmenu'; -import { SlideMenuModule } from 'primeng/slidemenu'; -import { DialogModule } from 'primeng/dialog'; -import { DropdownModule } from 'primeng/dropdown'; -import { AccordionModule } from 'primeng/accordion'; -import { SliderModule } from 'primeng/slider'; -import { ToastModule } from 'primeng/toast'; -import { InputTextModule } from 'primeng/inputtext'; -import { ColorPickerModule } from 'primeng/colorpicker'; -import { PasswordModule } from 'primeng/password'; -import { TooltipModule } from 'primeng/tooltip'; -import { MessageService } from 'primeng/api'; -import { PanelModule } from 'primeng/panel'; -import { CheckboxModule } from 'primeng/checkbox'; -import { InputSwitchModule } from 'primeng/inputswitch'; -import { FieldsetModule } from 'primeng/fieldset'; -import { ListboxModule } from 'primeng/listbox'; -import { VirtualScrollerModule } from 'primeng/virtualscroller'; -import { ToggleButtonModule } from 'primeng/togglebutton'; -import { SidebarModule } from 'primeng/sidebar'; -import { RadioButtonModule } from 'primeng/radiobutton'; -import { InputTextareaModule } from 'primeng/inputtextarea'; -import { UsernameValidationDirective } from './directives/username-validation.directive'; -import { ComponentSideSelectionToolComponent } from './components/side-bar/selection-tool/selection-tool.component'; -import { KeyboardDirective } from './directives/keyboard.directive'; -import { ComponentLoginDialogComponent } from './components/user-auth/login-dialog/login-dialog.component'; -import { RegisterFormComponent } from './components/user-auth/register-form/register-form.component'; -import { CheckDuplicateService } from './services/check-duplicate-service'; -import { LoginFormComponent } from './components/user-auth/login-form/login-form.component'; -import { AuthenticationService } from './services/authentification-service'; -import { BlueprintService } from './services/blueprint-service'; -import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha'; -import { ToolService } from './services/tool-service'; -import { SelectTool } from './common/tools/select-tool'; -import { BuildTool } from './common/tools/build-tool'; -import { ComponentSaveDialogComponent } from './components/dialogs/component-save-dialog/component-save-dialog.component'; -import { DialogShareUrlComponent } from './components/dialogs/dialog-share-url/dialog-share-url.component'; -import { ComponentSideBuildToolComponent } from './components/side-bar/build-tool/build-tool.component'; -import { ItemCollectionInfoComponent } from './components/side-bar/item-collection-info/item-collection-info.component'; -import { DialogBrowseComponent } from './components/dialogs/dialog-browse/dialog-browse.component'; -import { DialogExportImagesComponent } from './components/dialogs/dialog-export-images/dialog-export-images.component'; -import { BlueprintNameValidationDirective } from './directives/blueprint-name-validation.directive'; -import { LikeWidgetComponent } from './components/like-widget/like-widget.component'; -import { BuildableElementPickerComponent } from './components/side-bar/buildable-element-picker/buildable-element-picker.component'; -import { ElementReport } from './common/tools/element-report'; -import { ElementReportToolComponent } from './components/side-bar/element-report-tool/element-report-tool.component'; -import { UiScreenContainerComponent } from './components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component'; -import { SingleSliderScreenComponent } from './components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component'; -import { ThresholdSwhitchScreenComponent } from './components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component'; -import { ActiveRangeScreenComponent } from './components/side-bar/ui-screens/active-range-screen/active-range-screen.component'; -import { DialogAboutComponent } from './components/dialogs/dialog-about/dialog-about.component'; -import { TemperaturePickerComponent } from './components/side-bar/temperature-picker/temperature-picker.component'; -import { TemperatureScaleComponent } from './components/side-bar/temperature-scale/temperature-scale.component'; -import { ElementIconComponent } from './components/side-bar/element-icon/element-icon.component'; -import { CellElementPickerComponent } from './components/side-bar/cell-element-picker/cell-element-picker.component'; -import { FilterElementSolidPipe } from './pipes/filter-element-solid.pipe'; -import { FilterElementLiquidPipe } from './pipes/filter-element-liquid.pipe'; -import { FilterElementGasPipe } from './pipes/filter-element-gas.pipe'; -import { AddMassUnitPipe } from './pipes/add-mass-unit.pipe'; -import { BitSelectionScreenComponent } from './components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component'; -import { InfoInputComponent } from './components/side-bar/info-input/info-input.component'; -import { InfoInputIconComponent } from './components/side-bar/info-input-icon/info-input-icon.component'; -import { PipeContentComponent } from './components/side-bar/pipe-content/pipe-content.component'; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { ButtonModule } from "primeng/button"; +import { CardModule } from "primeng/card"; +import { ScrollPanelModule } from "primeng/scrollpanel"; +import { OverlayPanelModule } from "primeng/overlaypanel"; +import { MenubarModule } from "primeng/menubar"; +import { TabMenuModule } from "primeng/tabmenu"; +import { SlideMenuModule } from "primeng/slidemenu"; +import { DialogModule } from "primeng/dialog"; +import { DropdownModule } from "primeng/dropdown"; +import { AccordionModule } from "primeng/accordion"; +import { SliderModule } from "primeng/slider"; +import { ToastModule } from "primeng/toast"; +import { InputTextModule } from "primeng/inputtext"; +import { ColorPickerModule } from "primeng/colorpicker"; +import { PasswordModule } from "primeng/password"; +import { TooltipModule } from "primeng/tooltip"; +import { MessageService } from "primeng/api"; +import { PanelModule } from "primeng/panel"; +import { CheckboxModule } from "primeng/checkbox"; +import { InputSwitchModule } from "primeng/inputswitch"; +import { FieldsetModule } from "primeng/fieldset"; +import { ListboxModule } from "primeng/listbox"; +import { VirtualScrollerModule } from "primeng/virtualscroller"; +import { ToggleButtonModule } from "primeng/togglebutton"; +import { SidebarModule } from "primeng/sidebar"; +import { RadioButtonModule } from "primeng/radiobutton"; +import { InputTextareaModule } from "primeng/inputtextarea"; +import { UsernameValidationDirective } from "./directives/username-validation.directive"; +import { ComponentSideSelectionToolComponent } from "./components/side-bar/selection-tool/selection-tool.component"; +import { KeyboardDirective } from "./directives/keyboard.directive"; +import { ComponentLoginDialogComponent } from "./components/user-auth/login-dialog/login-dialog.component"; +import { RegisterFormComponent } from "./components/user-auth/register-form/register-form.component"; +import { CheckDuplicateService } from "./services/check-duplicate-service"; +import { LoginFormComponent } from "./components/user-auth/login-form/login-form.component"; +import { AuthenticationService } from "./services/authentification-service"; +import { BlueprintService } from "./services/blueprint-service"; +import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from "ng-recaptcha"; +import { ToolService } from "./services/tool-service"; +import { SelectTool } from "./common/tools/select-tool"; +import { BuildTool } from "./common/tools/build-tool"; +import { ComponentSaveDialogComponent } from "./components/dialogs/component-save-dialog/component-save-dialog.component"; +import { DialogShareUrlComponent } from "./components/dialogs/dialog-share-url/dialog-share-url.component"; +import { ComponentSideBuildToolComponent } from "./components/side-bar/build-tool/build-tool.component"; +import { ItemCollectionInfoComponent } from "./components/side-bar/item-collection-info/item-collection-info.component"; +import { DialogBrowseComponent } from "./components/dialogs/dialog-browse/dialog-browse.component"; +import { DialogExportImagesComponent } from "./components/dialogs/dialog-export-images/dialog-export-images.component"; +import { BlueprintNameValidationDirective } from "./directives/blueprint-name-validation.directive"; +import { LikeWidgetComponent } from "./components/like-widget/like-widget.component"; +import { BuildableElementPickerComponent } from "./components/side-bar/buildable-element-picker/buildable-element-picker.component"; +import { ElementReport } from "./common/tools/element-report"; +import { ElementReportToolComponent } from "./components/side-bar/element-report-tool/element-report-tool.component"; +import { UiScreenContainerComponent } from "./components/side-bar/ui-screens/ui-screen-container/ui-screen-container.component"; +import { SingleSliderScreenComponent } from "./components/side-bar/ui-screens/single-slider-screen/single-slider-screen.component"; +import { ThresholdSwhitchScreenComponent } from "./components/side-bar/ui-screens/threshold-switch-screen/threshold-switch-screen.component"; +import { ActiveRangeScreenComponent } from "./components/side-bar/ui-screens/active-range-screen/active-range-screen.component"; +import { DialogAboutComponent } from "./components/dialogs/dialog-about/dialog-about.component"; +import { TemperaturePickerComponent } from "./components/side-bar/temperature-picker/temperature-picker.component"; +import { TemperatureScaleComponent } from "./components/side-bar/temperature-scale/temperature-scale.component"; +import { ElementIconComponent } from "./components/side-bar/element-icon/element-icon.component"; +import { CellElementPickerComponent } from "./components/side-bar/cell-element-picker/cell-element-picker.component"; +import { FilterElementSolidPipe } from "./pipes/filter-element-solid.pipe"; +import { FilterElementLiquidPipe } from "./pipes/filter-element-liquid.pipe"; +import { FilterElementGasPipe } from "./pipes/filter-element-gas.pipe"; +import { AddMassUnitPipe } from "./pipes/add-mass-unit.pipe"; +import { BitSelectionScreenComponent } from "./components/side-bar/ui-screens/bit-selection-screen/bit-selection-screen.component"; +import { InfoInputComponent } from "./components/side-bar/info-input/info-input.component"; +import { InfoInputIconComponent } from "./components/side-bar/info-input-icon/info-input-icon.component"; +import { PipeContentComponent } from "./components/side-bar/pipe-content/pipe-content.component"; @NgModule({ imports: [ CommonModule, HttpClientModule, - FormsModule, ReactiveFormsModule, - InputTextareaModule, PasswordModule, ColorPickerModule, InputTextModule, SliderModule, ButtonModule, CardModule, ScrollPanelModule, OverlayPanelModule, MenubarModule, TabMenuModule, SlideMenuModule, DialogModule, DropdownModule, AccordionModule, ToastModule, TooltipModule, PanelModule, InputSwitchModule, CheckboxModule, FieldsetModule, ListboxModule, VirtualScrollerModule, ToggleButtonModule, SidebarModule, RadioButtonModule, + FormsModule, + ReactiveFormsModule, + InputTextareaModule, + PasswordModule, + ColorPickerModule, + InputTextModule, + SliderModule, + ButtonModule, + CardModule, + ScrollPanelModule, + OverlayPanelModule, + MenubarModule, + TabMenuModule, + SlideMenuModule, + DialogModule, + DropdownModule, + AccordionModule, + ToastModule, + TooltipModule, + PanelModule, + InputSwitchModule, + CheckboxModule, + FieldsetModule, + ListboxModule, + VirtualScrollerModule, + ToggleButtonModule, + SidebarModule, + RadioButtonModule, RecaptchaV3Module, - BrowserAnimationsModule + BrowserAnimationsModule, + ], + declarations: [ + UsernameValidationDirective, + BlueprintNameValidationDirective, + ComponentCanvasComponent, + MouseWheelDirective, + DragAndDropDirective, + KeyboardDirective, + ComponentMenuComponent, + ComponentBlueprintParentComponent, + ComponentSaveDialogComponent, + ComponentSideBuildToolComponent, + ComponentSideSelectionToolComponent, + ComponentLoginDialogComponent, + RegisterFormComponent, + LoginFormComponent, + DialogShareUrlComponent, + ItemCollectionInfoComponent, + DialogBrowseComponent, + DialogExportImagesComponent, + LikeWidgetComponent, + BuildableElementPickerComponent, + ElementReportToolComponent, + UiScreenContainerComponent, + SingleSliderScreenComponent, + ThresholdSwhitchScreenComponent, + ActiveRangeScreenComponent, + DialogAboutComponent, + TemperaturePickerComponent, + TemperatureScaleComponent, + ElementIconComponent, + CellElementPickerComponent, + FilterElementSolidPipe, + FilterElementLiquidPipe, + FilterElementGasPipe, + AddMassUnitPipe, + BitSelectionScreenComponent, + InfoInputComponent, + InfoInputIconComponent, + PipeContentComponent, ], - declarations: [UsernameValidationDirective, BlueprintNameValidationDirective, ComponentCanvasComponent, MouseWheelDirective, DragAndDropDirective, KeyboardDirective, ComponentMenuComponent, ComponentBlueprintParentComponent, ComponentSaveDialogComponent, ComponentSideBuildToolComponent, ComponentSideSelectionToolComponent, ComponentLoginDialogComponent, RegisterFormComponent, LoginFormComponent, DialogShareUrlComponent, ItemCollectionInfoComponent, DialogBrowseComponent, DialogExportImagesComponent, LikeWidgetComponent, BuildableElementPickerComponent, ElementReportToolComponent, UiScreenContainerComponent, SingleSliderScreenComponent, ThresholdSwhitchScreenComponent, ActiveRangeScreenComponent, DialogAboutComponent, TemperaturePickerComponent, TemperatureScaleComponent, ElementIconComponent, CellElementPickerComponent, FilterElementSolidPipe, FilterElementLiquidPipe, FilterElementGasPipe, AddMassUnitPipe, BitSelectionScreenComponent, InfoInputComponent, InfoInputIconComponent, PipeContentComponent], - providers: [CheckDuplicateService, AuthenticationService, BlueprintService, ToolService, SelectTool, BuildTool, ElementReport, DatePipe, - { provide: RECAPTCHA_V3_SITE_KEY, useValue: '6Leizc0kAAAAAIZQRmbXVXZ2HvfS_cY_LrkOk8x6' } + providers: [ + CheckDuplicateService, + AuthenticationService, + BlueprintService, + ToolService, + SelectTool, + BuildTool, + ElementReport, + DatePipe, + { + provide: RECAPTCHA_V3_SITE_KEY, + useValue: "6Leizc0kAAAAAIZQRmbXVXZ2HvfS_cY_LrkOk8x6", + }, ], - exports: [ComponentBlueprintParentComponent] + exports: [ComponentBlueprintParentComponent], }) -export class ModuleBlueprintModule { } +export class ModuleBlueprintModule {} diff --git a/frontend/src/app/module-blueprint/pipes/add-mass-unit.pipe.spec.ts b/frontend/src/app/module-blueprint/pipes/add-mass-unit.pipe.spec.ts index d436915c..0f0f1314 100644 --- a/frontend/src/app/module-blueprint/pipes/add-mass-unit.pipe.spec.ts +++ b/frontend/src/app/module-blueprint/pipes/add-mass-unit.pipe.spec.ts @@ -1,7 +1,7 @@ -import { AddMassUnitPipe } from './add-mass-unit.pipe'; +import { AddMassUnitPipe } from "./add-mass-unit.pipe"; -describe('AddMassUnitPipe', () => { - it('create an instance', () => { +describe("AddMassUnitPipe", () => { + it("create an instance", () => { const pipe = new AddMassUnitPipe(); expect(pipe).toBeTruthy(); }); diff --git a/frontend/src/app/module-blueprint/pipes/add-mass-unit.pipe.ts b/frontend/src/app/module-blueprint/pipes/add-mass-unit.pipe.ts index 2d834ab5..bdf6c3dd 100644 --- a/frontend/src/app/module-blueprint/pipes/add-mass-unit.pipe.ts +++ b/frontend/src/app/module-blueprint/pipes/add-mass-unit.pipe.ts @@ -1,14 +1,12 @@ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ - name: 'addMassUnit' + name: "addMassUnit", }) export class AddMassUnitPipe implements PipeTransform { - transform(value: any, ...args: any[]): any { if (value < 5) return (value * 1000).toFixed(0) + $localize` Grams`; if (value < 5000) return parseFloat(value.toFixed(1)) + $localize` Kg`; else return parseFloat((value / 1000).toFixed(1)) + $localize` Tons`; } - } diff --git a/frontend/src/app/module-blueprint/pipes/filter-element-gas.pipe.spec.ts b/frontend/src/app/module-blueprint/pipes/filter-element-gas.pipe.spec.ts index 76ef789f..981b6af9 100644 --- a/frontend/src/app/module-blueprint/pipes/filter-element-gas.pipe.spec.ts +++ b/frontend/src/app/module-blueprint/pipes/filter-element-gas.pipe.spec.ts @@ -1,7 +1,7 @@ -import { FilterElementGasPipe } from './filter-element-gas.pipe'; +import { FilterElementGasPipe } from "./filter-element-gas.pipe"; -describe('FilterElementGasPipe', () => { - it('create an instance', () => { +describe("FilterElementGasPipe", () => { + it("create an instance", () => { const pipe = new FilterElementGasPipe(); expect(pipe).toBeTruthy(); }); diff --git a/frontend/src/app/module-blueprint/pipes/filter-element-gas.pipe.ts b/frontend/src/app/module-blueprint/pipes/filter-element-gas.pipe.ts index e6dcbc62..77ebee4f 100644 --- a/frontend/src/app/module-blueprint/pipes/filter-element-gas.pipe.ts +++ b/frontend/src/app/module-blueprint/pipes/filter-element-gas.pipe.ts @@ -1,16 +1,16 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { ElementReportDataItem } from '../common/tools/element-report'; +import { Pipe, PipeTransform } from "@angular/core"; +import { ElementReportDataItem } from "../common/tools/element-report"; @Pipe({ - name: 'filterElementGas' + name: "filterElementGas", }) export class FilterElementGasPipe implements PipeTransform { - transform(value: any, ...args: any[]): any { let dataItems = value as ElementReportDataItem[]; // TODO boolean in export - return dataItems.filter((d) => { return d.buildableElement.hasTag("Gas"); }) + return dataItems.filter((d) => { + return d.buildableElement.hasTag("Gas"); + }); } - } diff --git a/frontend/src/app/module-blueprint/pipes/filter-element-liquid.pipe.spec.ts b/frontend/src/app/module-blueprint/pipes/filter-element-liquid.pipe.spec.ts index 10ec859f..bb4d6586 100644 --- a/frontend/src/app/module-blueprint/pipes/filter-element-liquid.pipe.spec.ts +++ b/frontend/src/app/module-blueprint/pipes/filter-element-liquid.pipe.spec.ts @@ -1,7 +1,7 @@ -import { FilterElementLiquidPipe } from './filter-element-liquid.pipe'; +import { FilterElementLiquidPipe } from "./filter-element-liquid.pipe"; -describe('FilterElementLiquidPipe', () => { - it('create an instance', () => { +describe("FilterElementLiquidPipe", () => { + it("create an instance", () => { const pipe = new FilterElementLiquidPipe(); expect(pipe).toBeTruthy(); }); diff --git a/frontend/src/app/module-blueprint/pipes/filter-element-liquid.pipe.ts b/frontend/src/app/module-blueprint/pipes/filter-element-liquid.pipe.ts index b9b9e3d1..7d02dae8 100644 --- a/frontend/src/app/module-blueprint/pipes/filter-element-liquid.pipe.ts +++ b/frontend/src/app/module-blueprint/pipes/filter-element-liquid.pipe.ts @@ -1,16 +1,16 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { ElementReportDataItem } from '../common/tools/element-report'; +import { Pipe, PipeTransform } from "@angular/core"; +import { ElementReportDataItem } from "../common/tools/element-report"; @Pipe({ - name: 'filterElementLiquid' + name: "filterElementLiquid", }) export class FilterElementLiquidPipe implements PipeTransform { - transform(value: any, ...args: any[]): any { let dataItems = value as ElementReportDataItem[]; // TODO boolean in export - return dataItems.filter((d) => { return d.buildableElement.hasTag("Liquid"); }) + return dataItems.filter((d) => { + return d.buildableElement.hasTag("Liquid"); + }); } - } diff --git a/frontend/src/app/module-blueprint/pipes/filter-element-solid.pipe.spec.ts b/frontend/src/app/module-blueprint/pipes/filter-element-solid.pipe.spec.ts index d87b1e89..90a54c17 100644 --- a/frontend/src/app/module-blueprint/pipes/filter-element-solid.pipe.spec.ts +++ b/frontend/src/app/module-blueprint/pipes/filter-element-solid.pipe.spec.ts @@ -1,7 +1,7 @@ -import { FilterElementSolidPipe } from './filter-element-solid.pipe'; +import { FilterElementSolidPipe } from "./filter-element-solid.pipe"; -describe('FilterElementSolidPipe', () => { - it('create an instance', () => { +describe("FilterElementSolidPipe", () => { + it("create an instance", () => { const pipe = new FilterElementSolidPipe(); expect(pipe).toBeTruthy(); }); diff --git a/frontend/src/app/module-blueprint/pipes/filter-element-solid.pipe.ts b/frontend/src/app/module-blueprint/pipes/filter-element-solid.pipe.ts index c51d3af3..bffed874 100644 --- a/frontend/src/app/module-blueprint/pipes/filter-element-solid.pipe.ts +++ b/frontend/src/app/module-blueprint/pipes/filter-element-solid.pipe.ts @@ -1,15 +1,15 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { ElementReportDataItem } from '../common/tools/element-report'; +import { Pipe, PipeTransform } from "@angular/core"; +import { ElementReportDataItem } from "../common/tools/element-report"; @Pipe({ - name: 'filterElementSolid' + name: "filterElementSolid", }) export class FilterElementSolidPipe implements PipeTransform { - transform(value: any, ...args: any[]): any { let dataItems = value as ElementReportDataItem[]; - return dataItems.filter((d) => { return d.buildableElement.hasTag("BuildableAny"); }) + return dataItems.filter((d) => { + return d.buildableElement.hasTag("BuildableAny"); + }); } - } diff --git a/frontend/src/app/module-blueprint/services/authentification-service.ts b/frontend/src/app/module-blueprint/services/authentification-service.ts index 149ca2b2..5add69fc 100644 --- a/frontend/src/app/module-blueprint/services/authentification-service.ts +++ b/frontend/src/app/module-blueprint/services/authentification-service.ts @@ -1,8 +1,8 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { Router } from '@angular/router'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { Injectable } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { Router } from "@angular/router"; +import { Observable } from "rxjs"; +import { map } from "rxjs/operators"; export interface UserDetails { _id: string; @@ -16,7 +16,7 @@ interface TokenResponse { } export interface TokenPayload { - 'g-recaptcha-response': string; + "g-recaptcha-response": string; email: string; username: string; password: string; @@ -24,7 +24,7 @@ export interface TokenPayload { @Injectable() export class AuthenticationService { - private static localStorage: string = 'blueprintnotincluded-token'; + private static localStorage: string = "blueprintnotincluded-token"; private token: string; @@ -46,7 +46,7 @@ export class AuthenticationService { const token = this.getToken(); let payload; if (token) { - payload = token.split('.')[1]; + payload = token.split(".")[1]; payload = window.atob(payload); return JSON.parse(payload); } else { @@ -63,13 +63,19 @@ export class AuthenticationService { } } - private request(method: 'post'|'get', type: 'login'|'register'|'profile', user?: TokenPayload): Observable { + private request( + method: "post" | "get", + type: "login" | "register" | "profile", + user?: TokenPayload + ): Observable { let base; - if (method === 'post') { + if (method === "post") { base = this.http.post(`/api/${type}`, user); } else { - base = this.http.get(`/api/${type}`, { headers: { Authorization: `Bearer ${this.getToken()}` }}); + base = this.http.get(`/api/${type}`, { + headers: { Authorization: `Bearer ${this.getToken()}` }, + }); } const request = base.pipe( @@ -85,19 +91,19 @@ export class AuthenticationService { } public register(user: TokenPayload): Observable { - return this.request('post', 'register', user); + return this.request("post", "register", user); } public login(user: TokenPayload): Observable { - return this.request('post', 'login', user); + return this.request("post", "login", user); } public profile(): Observable { - return this.request('get', 'profile'); + return this.request("get", "profile"); } public logout(): void { - this.token = ''; + this.token = ""; window.localStorage.removeItem(AuthenticationService.localStorage); } -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/services/blueprint-service.ts b/frontend/src/app/module-blueprint/services/blueprint-service.ts index 436a7776..649a4178 100644 --- a/frontend/src/app/module-blueprint/services/blueprint-service.ts +++ b/frontend/src/app/module-blueprint/services/blueprint-service.ts @@ -1,12 +1,25 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { AuthenticationService } from './authentification-service'; -import { map } from 'rxjs/operators'; -import { ComponentMenuComponent } from '../components/component-menu/component-menu.component'; -import { Blueprint, IObsBlueprintChange, BlueprintItem, Overlay, Display, BniBlueprint, MdbBlueprint, OniTemplate, BlueprintListItem, BlueprintLike, BlueprintResponse, BlueprintDelete } from '../../../../../lib/index'; -import * as yaml from 'node_modules/js-yaml/lib/js-yaml'; - -@Injectable({ providedIn: 'root' }) +import { Injectable } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { AuthenticationService } from "./authentification-service"; +import { map } from "rxjs/operators"; +import { ComponentMenuComponent } from "../components/component-menu/component-menu.component"; +import { + Blueprint, + IObsBlueprintChange, + BlueprintItem, + Overlay, + Display, + BniBlueprint, + MdbBlueprint, + OniTemplate, + BlueprintListItem, + BlueprintLike, + BlueprintResponse, + BlueprintDelete, +} from "../../../../../lib/index"; +import * as yaml from "node_modules/js-yaml/lib/js-yaml"; + +@Injectable({ providedIn: "root" }) export class BlueprintService implements IObsBlueprintChange { static baseUrl: string = process.env.NG_APP_HOST; @@ -15,7 +28,9 @@ export class BlueprintService implements IObsBlueprintChange { // TODO observable when modified, to be subscribed by the canvas // TODO not sure getter setters are useful blueprint_: Blueprint; - get blueprint() { return this.blueprint_; } + get blueprint() { + return this.blueprint_; + } set blueprint(value: Blueprint) { this.blueprint_ = value; //this.observersBlueprintChanged.map((observer) => { observer.blueprintChanged(this.blueprint_); }) @@ -23,23 +38,27 @@ export class BlueprintService implements IObsBlueprintChange { thumbnail: string; thumbnailStyle: Display; - get savedBlueprint() { return this.id != null; } + get savedBlueprint() { + return this.id != null; + } static blueprintService: BlueprintService; // TODO camera service does not need to be injected - constructor(private http: HttpClient, private authService: AuthenticationService) { + constructor( + private http: HttpClient, + private authService: AuthenticationService + ) { this.blueprint = new Blueprint(); // Undo / Redo stuff - this.blueprint.subscribeBlueprintChanged(this) + this.blueprint.subscribeBlueprintChanged(this); this.resetUndoStates(); this.observersBlueprintChanged = []; this.thumbnailStyle = Display.solid; - BlueprintService.blueprintService = this; this.reset(); @@ -52,9 +71,12 @@ export class BlueprintService implements IObsBlueprintChange { openBlueprintFromUpload(fileType: BlueprintFileType, fileList: FileList) { if (fileList.length > 0) { - if (fileType == BlueprintFileType.YAML) this.openYamlBlueprint(fileList[0]); - else if (fileType == BlueprintFileType.JSON) this.openJsonBlueprint(fileList[0]); - else if (fileType == BlueprintFileType.BSON) this.openBsonBlueprint(fileList[0]); + if (fileType == BlueprintFileType.YAML) + this.openYamlBlueprint(fileList[0]); + else if (fileType == BlueprintFileType.JSON) + this.openJsonBlueprint(fileList[0]); + else if (fileType == BlueprintFileType.BSON) + this.openBsonBlueprint(fileList[0]); this.resetUndoStates(); } @@ -62,7 +84,9 @@ export class BlueprintService implements IObsBlueprintChange { private openYamlBlueprint(file: File) { let reader = new FileReader(); - reader.onloadend = () => { this.loadYamlBlueprint(reader.result as string); }; + reader.onloadend = () => { + this.loadYamlBlueprint(reader.result as string); + }; reader.readAsText(file); } @@ -73,12 +97,16 @@ export class BlueprintService implements IObsBlueprintChange { this.name = templateYaml.name; newBlueprint.importFromOni(templateYaml); - this.observersBlueprintChanged.map((observer) => { observer.blueprintChanged(newBlueprint); }) + this.observersBlueprintChanged.map((observer) => { + observer.blueprintChanged(newBlueprint); + }); } private openJsonBlueprint(file: File) { let reader = new FileReader(); - reader.onloadend = () => { this.loadJsonBlueprint(reader.result as string); }; + reader.onloadend = () => { + this.loadJsonBlueprint(reader.result as string); + }; reader.readAsText(file); } @@ -89,12 +117,16 @@ export class BlueprintService implements IObsBlueprintChange { this.name = templateJson.friendlyname; newBlueprint.importFromBni(templateJson); - this.observersBlueprintChanged.map((observer) => { observer.blueprintChanged(newBlueprint); }) + this.observersBlueprintChanged.map((observer) => { + observer.blueprintChanged(newBlueprint); + }); } private openBsonBlueprint(file: File) { let reader = new FileReader(); - reader.onloadend = () => { this.loadBsonBlueprint(reader.result as ArrayBuffer); }; + reader.onloadend = () => { + this.loadBsonBlueprint(reader.result as ArrayBuffer); + }; reader.readAsArrayBuffer(file); } @@ -102,21 +134,25 @@ export class BlueprintService implements IObsBlueprintChange { let newBlueprint = new Blueprint(); newBlueprint.importFromBinary(template); - this.observersBlueprintChanged.map((observer) => { observer.blueprintChanged(newBlueprint); }) + this.observersBlueprintChanged.map((observer) => { + observer.blueprintChanged(newBlueprint); + }); } public loadUrlBlueprint(url: string) { - this.http.get(url).subscribe(value => { + this.http.get(url).subscribe((value) => { console.log(value); }); } newBlueprint() { - this.name = 'new blueprint'; + this.name = "new blueprint"; this.reset(); let newBlueprint = new Blueprint(); - this.observersBlueprintChanged.map((observer) => { observer.blueprintChanged(newBlueprint); }) + this.observersBlueprintChanged.map((observer) => { + observer.blueprintChanged(newBlueprint); + }); this.resetUndoStates(); // TODO firing the observable and then restting the states is duplicated. fix this } @@ -165,16 +201,15 @@ export class BlueprintService implements IObsBlueprintChange { this.blueprintChanged(); } - itemDestroyed() { } - itemAdded(blueprintItem: BlueprintItem) { } + itemDestroyed() {} + itemAdded(blueprintItem: BlueprintItem) {} blueprintChanged() { - // We don't want to add a state if the changes come from the undo / redo action if (this.suppressChanges) return; // If we are in the middle of the states, doing anythings scraps the further redos - if (this.undoIndex < this.undoStates.length - 1) this.undoStates.splice(this.undoIndex + 1); - + if (this.undoIndex < this.undoStates.length - 1) + this.undoStates.splice(this.undoIndex + 1); let newState = this.blueprint.toMdbBlueprint(); /*if (this.undoStates.length > 0) { @@ -183,10 +218,7 @@ export class BlueprintService implements IObsBlueprintChange { let newHash = this.hashMdb(newState); if (oldHash != newHash) this.undoStates.push(newState); } - else */this.undoStates.push(newState); - - - + else */ this.undoStates.push(newState); while (this.undoStates.length > 50) this.undoStates.splice(0, 1); @@ -195,11 +227,13 @@ export class BlueprintService implements IObsBlueprintChange { hashMdb(mdb: MdbBlueprint) { let s = JSON.stringify(mdb); - var hash = 0, i, chr; + var hash = 0, + i, + chr; if (s.length === 0) return hash; for (i = 0; i < s.length; i++) { chr = s.charCodeAt(i); - hash = ((hash << 5) - hash) + chr; + hash = (hash << 5) - hash + chr; hash |= 0; // Convert to 32bit integer } return hash; @@ -209,18 +243,20 @@ export class BlueprintService implements IObsBlueprintChange { openBlueprintFromId(id: string) { this.getBlueprint(id).subscribe({ next: this.handleGetBlueprint.bind(this), - error: this.handleGetBlueprintError.bind(this) + error: this.handleGetBlueprintError.bind(this), }); } handleGetBlueprint(blueprint: Blueprint) { - this.observersBlueprintChanged.map((observer) => { observer.blueprintChanged(blueprint); }); + this.observersBlueprintChanged.map((observer) => { + observer.blueprintChanged(blueprint); + }); this.resetUndoStates(); } handleGetBlueprintError(error: any) { // TODO toast here - console.log(error) + console.log(error); } getBlueprint(id: string) { @@ -242,23 +278,36 @@ export class BlueprintService implements IObsBlueprintChange { return request; } - getBlueprints(olderThan: Date, filterUserId: string, filterName: string, getDuplicates: boolean) { - let parameterOlderThan = 'olderthan=' + olderThan.getTime().toString(); - - let parameterFilterUserId = ''; - if (filterUserId != null) parameterFilterUserId = '&filterUserId=' + filterUserId; - - let parameterFilterName = ''; - if (filterName != null) parameterFilterName = '&filterName=' + filterName; - - let parameterGetDuplicates = ''; - if (getDuplicates) parameterGetDuplicates = '&getDuplicates=' + getDuplicates; - - let parameters = parameterOlderThan + parameterFilterUserId + parameterGetDuplicates + parameterFilterName; - - let request = this.authService.isLoggedIn() ? - this.http.get('/api/getblueprintsSecure?' + parameters, { headers: { Authorization: `Bearer ${this.authService.getToken()}` } }) : - this.http.get('/api/getblueprints?' + parameters); + getBlueprints( + olderThan: Date, + filterUserId: string, + filterName: string, + getDuplicates: boolean + ) { + let parameterOlderThan = "olderthan=" + olderThan.getTime().toString(); + + let parameterFilterUserId = ""; + if (filterUserId != null) + parameterFilterUserId = "&filterUserId=" + filterUserId; + + let parameterFilterName = ""; + if (filterName != null) parameterFilterName = "&filterName=" + filterName; + + let parameterGetDuplicates = ""; + if (getDuplicates) + parameterGetDuplicates = "&getDuplicates=" + getDuplicates; + + let parameters = + parameterOlderThan + + parameterFilterUserId + + parameterGetDuplicates + + parameterFilterName; + + let request = this.authService.isLoggedIn() + ? this.http.get("/api/getblueprintsSecure?" + parameters, { + headers: { Authorization: `Bearer ${this.authService.getToken()}` }, + }) + : this.http.get("/api/getblueprints?" + parameters); request.pipe( map((response: any) => { @@ -271,15 +320,20 @@ export class BlueprintService implements IObsBlueprintChange { } deleteBlueprint(id: string) { - let body: BlueprintDelete = { blueprintId: id }; - const request = this.http.post('/api/deleteblueprint', body, { headers: { Authorization: `Bearer ${this.authService.getToken()}` } }).pipe( - map((response: any) => { - if (response.id) { this.id = response.id; } - return response; + const request = this.http + .post("/api/deleteblueprint", body, { + headers: { Authorization: `Bearer ${this.authService.getToken()}` }, }) - ); + .pipe( + map((response: any) => { + if (response.id) { + this.id = response.id; + } + return response; + }) + ); return request; } @@ -292,12 +346,18 @@ export class BlueprintService implements IObsBlueprintChange { body.name = this.name; body.blueprint = saveBlueprint; body.thumbnail = this.thumbnail; - const request = this.http.post('/api/uploadblueprint', body, { headers: { Authorization: `Bearer ${this.authService.getToken()}` } }).pipe( - map((response: any) => { - if (response.id) { this.id = response.id; } - return response; + const request = this.http + .post("/api/uploadblueprint", body, { + headers: { Authorization: `Bearer ${this.authService.getToken()}` }, }) - ); + .pipe( + map((response: any) => { + if (response.id) { + this.id = response.id; + } + return response; + }) + ); return request; } @@ -308,11 +368,15 @@ export class BlueprintService implements IObsBlueprintChange { this.likedByMe = !this.likedByMe; let body: BlueprintLike = { blueprintId: blueprintId, - like: like - } + like: like, + }; // We don't care about the response - this.http.post('/api/likeblueprint', body, { headers: { Authorization: `Bearer ${this.authService.getToken()}` } }).subscribe(); + this.http + .post("/api/likeblueprint", body, { + headers: { Authorization: `Bearer ${this.authService.getToken()}` }, + }) + .subscribe(); } } @@ -327,7 +391,7 @@ export class SaveBlueprintMessage { export enum BlueprintFileType { YAML, JSON, - BSON + BSON, } export interface IObsBlueprintChanged { diff --git a/frontend/src/app/module-blueprint/services/check-duplicate-service.ts b/frontend/src/app/module-blueprint/services/check-duplicate-service.ts index af046a54..63e3fbdf 100644 --- a/frontend/src/app/module-blueprint/services/check-duplicate-service.ts +++ b/frontend/src/app/module-blueprint/services/check-duplicate-service.ts @@ -1,36 +1,35 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { AsyncValidatorFn, AbstractControl } from '@angular/forms'; -import { Observable, timer } from 'rxjs'; -import { switchMap, map } from 'rxjs/operators'; +import { Injectable } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { AsyncValidatorFn, AbstractControl } from "@angular/forms"; +import { Observable, timer } from "rxjs"; +import { switchMap, map } from "rxjs/operators"; @Injectable() -export class CheckDuplicateService -{ +export class CheckDuplicateService { constructor(private http: HttpClient) {} public checkUsername(username: string) { - return timer(1000) - .pipe( - switchMap(() => { - // Check if username is available - return this.http.get('/api/checkusername?username='+username); - }) - ); + return timer(1000).pipe( + switchMap(() => { + // Check if username is available + return this.http.get("/api/checkusername?username=" + username); + }) + ); } usernameValidator(): AsyncValidatorFn { - return (control: AbstractControl): Observable<{ [key: string]: any } | null> => { - return this.checkUsername(control.value) - .pipe( - map(res => { - // if username is already taken - if (res.usernameExists) { - // return error - return { 'usernameExists': true}; - } - }) - ); + return ( + control: AbstractControl + ): Observable<{ [key: string]: any } | null> => { + return this.checkUsername(control.value).pipe( + map((res) => { + // if username is already taken + if (res.usernameExists) { + // return error + return { usernameExists: true }; + } + }) + ); }; } -} \ No newline at end of file +} diff --git a/frontend/src/app/module-blueprint/services/game-string-service.ts b/frontend/src/app/module-blueprint/services/game-string-service.ts index 2c4a3a7a..f4e479a7 100644 --- a/frontend/src/app/module-blueprint/services/game-string-service.ts +++ b/frontend/src/app/module-blueprint/services/game-string-service.ts @@ -1,50 +1,79 @@ -import { getLocaleId } from '@angular/common'; -import { HttpClient } from '@angular/common/http'; -import { Inject, Injectable, LOCALE_ID } from '@angular/core'; -import { po } from 'gettext-parser'; +import { getLocaleId } from "@angular/common"; +import { HttpClient } from "@angular/common/http"; +import { Inject, Injectable, LOCALE_ID } from "@angular/core"; +import { po } from "gettext-parser"; -const BASE_STRING_DIR = "assets/strings" +const BASE_STRING_DIR = "assets/strings"; const PO_FILES = { - 'ko': 'strings_preinstalled_ko_klei.po', - 'ru': 'strings_preinstalled_ru_klei.po', - 'zh-Hans': 'strings_preinstalled_zh_klei.po', -} + ko: "strings_preinstalled_ko_klei.po", + ru: "strings_preinstalled_ru_klei.po", + "zh-Hans": "strings_preinstalled_zh_klei.po", +}; -@Injectable({ providedIn: 'root' }) +@Injectable({ providedIn: "root" }) export class GameStringService { private poFile: string; private poData: Promise>; public dict: Record; - constructor(@Inject(LOCALE_ID) private locale: string, private http: HttpClient) { - this.poFile = PO_FILES[this.locale] || PO_FILES[getLocaleId(this.locale)] - if (getLocaleId(this.locale) === 'en') this.poFile = PO_FILES['zh-Hans'] // use zh po file to get msgid - const ctx2str: Record = {} + constructor( + @Inject(LOCALE_ID) private locale: string, + private http: HttpClient + ) { + this.poFile = PO_FILES[this.locale] || PO_FILES[getLocaleId(this.locale)]; + if (getLocaleId(this.locale) === "en") this.poFile = PO_FILES["zh-Hans"]; // use zh po file to get msgid + const ctx2str: Record = {}; this.poData = new Promise(async (res, rej) => { - this.http.get(BASE_STRING_DIR + '/' + this.poFile, { responseType: 'text' }).subscribe(data => { - Object.entries(po.parse(data).translations).forEach(([msgctxt, tr]) => { - let translated = getLocaleId(this.locale) === 'en' - ? tr?.[Object.keys(tr)?.[0]]?.msgid - : tr?.[Object.keys(tr)?.[0]]?.msgstr?.[0] - if (translated) { - translated = translated.replace(/(.*?)<\/color>/i, '$1') - translated = translated.replace(/(.*?)<\/size>/i, '$1') - translated = translated.replace(/(.*?)<\/style>/i, '$1') - translated = translated.replace(/(.*?)<\/smallcaps>/i, '$1') - translated = translated.replace(/(.*?)<\/link>/i, '$1') - translated = translated.replace(/((.|\n)*?)<\/color>/i, '$1') - translated = translated.replace(/((.|\n)*?)<\/indent>/i, '$1') - } - ctx2str[msgctxt] = translated - }) - this.dict = ctx2str - res(ctx2str); - }) - }) + this.http + .get(BASE_STRING_DIR + "/" + this.poFile, { responseType: "text" }) + .subscribe((data) => { + Object.entries(po.parse(data).translations).forEach( + ([msgctxt, tr]) => { + let translated = + getLocaleId(this.locale) === "en" + ? tr?.[Object.keys(tr)?.[0]]?.msgid + : tr?.[Object.keys(tr)?.[0]]?.msgstr?.[0]; + if (translated) { + translated = translated.replace( + /(.*?)<\/color>/i, + "$1" + ); + translated = translated.replace( + /(.*?)<\/size>/i, + "$1" + ); + translated = translated.replace( + /(.*?)<\/style>/i, + "$1" + ); + translated = translated.replace( + /(.*?)<\/smallcaps>/i, + "$1" + ); + translated = translated.replace( + /(.*?)<\/link>/i, + "$1" + ); + translated = translated.replace( + /((.|\n)*?)<\/color>/i, + "$1" + ); + translated = translated.replace( + /((.|\n)*?)<\/indent>/i, + "$1" + ); + } + ctx2str[msgctxt] = translated; + } + ); + this.dict = ctx2str; + res(ctx2str); + }); + }); } async getStr(msgctxt: string) { - return (await this.poData)[msgctxt] + return (await this.poData)[msgctxt]; } } diff --git a/frontend/src/app/module-blueprint/services/tool-service.ts b/frontend/src/app/module-blueprint/services/tool-service.ts index 6e36cda1..c020e783 100644 --- a/frontend/src/app/module-blueprint/services/tool-service.ts +++ b/frontend/src/app/module-blueprint/services/tool-service.ts @@ -1,19 +1,25 @@ -import { Injectable } from '@angular/core'; -import { ToolType, ITool, IChangeTool } from '../common/tools/tool'; -import { SelectTool } from '../common/tools/select-tool'; -import { BlueprintItem, CameraService, Vector2 } from '../../../../../lib/index' -import { DrawPixi } from '../drawing/draw-pixi'; -import { BuildTool } from '../common/tools/build-tool'; -import { ElementReport } from '../common/tools/element-report'; - -@Injectable({ providedIn: 'root' }) +import { Injectable } from "@angular/core"; +import { ToolType, ITool, IChangeTool } from "../common/tools/tool"; +import { SelectTool } from "../common/tools/select-tool"; +import { + BlueprintItem, + CameraService, + Vector2, +} from "../../../../../lib/index"; +import { DrawPixi } from "../drawing/draw-pixi"; +import { BuildTool } from "../common/tools/build-tool"; +import { ElementReport } from "../common/tools/element-report"; + +@Injectable({ providedIn: "root" }) export class ToolService implements ITool, IChangeTool { private allTools: ITool[]; private currentTool: ITool; // This is used by the menu to get the visible status of the tools public getTool(toolType: ToolType) { - return this.allTools.filter((t) => { return t.toolType == toolType })[0]; + return this.allTools.filter((t) => { + return t.toolType == toolType; + })[0]; } private observers: IObsToolChanged[]; @@ -21,7 +27,8 @@ export class ToolService implements ITool, IChangeTool { constructor( public selectTool: SelectTool, public buildTool: BuildTool, - public elementReport: ElementReport) { + public elementReport: ElementReport + ) { this.observers = []; this.currentTool = this.selectTool; @@ -42,24 +49,26 @@ export class ToolService implements ITool, IChangeTool { // Iterate over every tool of the same group // Switch from and make invisible if needed - this.allTools.filter((t) => { - return ( - t.toolGroup == newToolInstance.toolGroup && - t.toolType != newToolInstance.toolType) - }).map((t) => { - if (t.visible) { - t.switchFrom(); - t.visible = false; - } - }); - - if (newToolInstance.captureInput) this.currentTool = newToolInstance + this.allTools + .filter((t) => { + return ( + t.toolGroup == newToolInstance.toolGroup && + t.toolType != newToolInstance.toolType + ); + }) + .map((t) => { + if (t.visible) { + t.switchFrom(); + t.visible = false; + } + }); + + if (newToolInstance.captureInput) this.currentTool = newToolInstance; if (newToolInstance.toggleable && newToolInstance.visible) { newToolInstance.visible = false; newToolInstance.switchFrom(); - } - else { + } else { newToolInstance.visible = true; newToolInstance.switchTo(); } @@ -68,9 +77,9 @@ export class ToolService implements ITool, IChangeTool { } // Tool interface - switchFrom() { } + switchFrom() {} - switchTo() { } + switchTo() {} mouseOut() { this.currentTool.mouseOut(); @@ -96,7 +105,10 @@ export class ToolService implements ITool, IChangeTool { keyDown(keyCode: string) { // TODO This is hacky, but when I press B on the info icons, the UI changes tool. // I have to figure out a way of suppressing key presses when in a text area - if (false) /*if (keyCode == 'b' && this.currentTool.toolType != ToolType.build)*/ this.changeTool(ToolType.build); + if (false) + /*if (keyCode == 'b' && this.currentTool.toolType != ToolType.build)*/ this.changeTool( + ToolType.build + ); else this.currentTool.keyDown(keyCode); } draw(drawPixi: DrawPixi, camera: CameraService) { diff --git a/frontend/src/app/primeng-changes/menubar.js b/frontend/src/app/primeng-changes/menubar.js index e1c5ad5f..c696bdc0 100644 --- a/frontend/src/app/primeng-changes/menubar.js +++ b/frontend/src/app/primeng-changes/menubar.js @@ -1,233 +1,317 @@ "use strict"; -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; +var __decorate = + (this && this.__decorate) || + function (decorators, target, key, desc) { + var c = arguments.length, + r = + c < 3 + ? target + : desc === null + ? (desc = Object.getOwnPropertyDescriptor(target, key)) + : desc, + d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") + r = Reflect.decorate(decorators, target, key, desc); + else + for (var i = decorators.length - 1; i >= 0; i--) + if ((d = decorators[i])) + r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -var __metadata = (this && this.__metadata) || function (k, v) { - if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); -}; + }; +var __metadata = + (this && this.__metadata) || + function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") + return Reflect.metadata(k, v); + }; Object.defineProperty(exports, "__esModule", { value: true }); var core_1 = require("@angular/core"); var common_1 = require("@angular/common"); var domhandler_1 = require("../dom/domhandler"); var router_1 = require("@angular/router"); var MenubarSub = /** @class */ (function () { - function MenubarSub(renderer, cd) { - this.renderer = renderer; - this.cd = cd; - this.autoZIndex = true; - this.baseZIndex = 0; - this.menuHoverActive = false; - } - Object.defineProperty(MenubarSub.prototype, "parentActive", { - get: function () { - return this._parentActive; - }, - set: function (value) { - if (!this.root) { - this._parentActive = value; - if (!value) - this.activeItem = null; - } - }, - enumerable: true, - configurable: true - }); - MenubarSub.prototype.onItemMenuClick = function (event, item, menuitem) { - if (!this.autoDisplay) { - if (menuitem.disabled) { - return; - } - this.activeItem = this.activeMenu ? (this.activeMenu.isEqualNode(item) ? null : item) : item; - var nextElement = item.children[0].nextElementSibling; - if (nextElement) { - var sublist = nextElement.children[0]; - if (this.autoZIndex) { - sublist.style.zIndex = String(this.baseZIndex + (++domhandler_1.DomHandler.zindex)); - } - if (this.root) { - sublist.style.top = domhandler_1.DomHandler.getOuterHeight(item.children[0]) + 'px'; - sublist.style.left = '0px'; - } - else { - sublist.style.top = '0px'; - sublist.style.left = domhandler_1.DomHandler.getOuterWidth(item.children[0]) + 'px'; - } - } - this.menuClick = true; - this.menuHoverActive = this.activeMenu ? (!this.activeMenu.isEqualNode(item)) : true; - this.activeMenu = this.activeMenu ? (this.activeMenu.isEqualNode(item) ? null : item) : item; - this.bindEventListener(); - } - }; - MenubarSub.prototype.bindEventListener = function () { - var _this = this; - if (!this.documentClickListener) { - this.documentClickListener = this.renderer.listen('document', 'click', function (event) { - if (!_this.menuClick) { - _this.activeItem = null; - _this.menuHoverActive = false; - _this.activeMenu = false; - } - _this.menuClick = false; - }); - } - }; - MenubarSub.prototype.onItemMouseEnter = function (event, item, menuitem) { - if (this.autoDisplay || (!this.autoDisplay && this.root && this.menuHoverActive)) { - if (menuitem.disabled) { - return; - } - if ((this.activeItem && !this.activeItem.isEqualNode(item) || !this.activeItem)) { - this.activeItem = item; - var nextElement = item.children[0].nextElementSibling; - if (nextElement) { - var sublist = nextElement.children[0]; - sublist.style.zIndex = String(++domhandler_1.DomHandler.zindex); - if (this.root) { - sublist.style.top = domhandler_1.DomHandler.getOuterHeight(item.children[0]) + 'px'; - sublist.style.left = '0px'; - } - else { - sublist.style.top = '0px'; - sublist.style.left = domhandler_1.DomHandler.getOuterWidth(item.children[0]) + 'px'; - } - } - this.activeMenu = item; - } - } - }; - MenubarSub.prototype.itemClick = function (event, item) { - if (item.disabled) { - event.preventDefault(); - return; + function MenubarSub(renderer, cd) { + this.renderer = renderer; + this.cd = cd; + this.autoZIndex = true; + this.baseZIndex = 0; + this.menuHoverActive = false; + } + Object.defineProperty(MenubarSub.prototype, "parentActive", { + get: function () { + return this._parentActive; + }, + set: function (value) { + if (!this.root) { + this._parentActive = value; + if (!value) this.activeItem = null; + } + }, + enumerable: true, + configurable: true, + }); + MenubarSub.prototype.onItemMenuClick = function (event, item, menuitem) { + if (!this.autoDisplay) { + if (menuitem.disabled) { + return; + } + this.activeItem = this.activeMenu + ? this.activeMenu.isEqualNode(item) + ? null + : item + : item; + var nextElement = item.children[0].nextElementSibling; + if (nextElement) { + var sublist = nextElement.children[0]; + if (this.autoZIndex) { + sublist.style.zIndex = String( + this.baseZIndex + ++domhandler_1.DomHandler.zindex + ); } - if (!item.url) { - event.preventDefault(); + if (this.root) { + sublist.style.top = + domhandler_1.DomHandler.getOuterHeight(item.children[0]) + "px"; + sublist.style.left = "0px"; + } else { + sublist.style.top = "0px"; + sublist.style.left = + domhandler_1.DomHandler.getOuterWidth(item.children[0]) + "px"; } - if (item.command) { - item.command({ - originalEvent: event, - item: item - }); - } - this.activeItem = null; - }; - MenubarSub.prototype.listClick = function (event) { - if (this.autoDisplay) { - this.activeItem = null; + } + this.menuClick = true; + this.menuHoverActive = this.activeMenu + ? !this.activeMenu.isEqualNode(item) + : true; + this.activeMenu = this.activeMenu + ? this.activeMenu.isEqualNode(item) + ? null + : item + : item; + this.bindEventListener(); + } + }; + MenubarSub.prototype.bindEventListener = function () { + var _this = this; + if (!this.documentClickListener) { + this.documentClickListener = this.renderer.listen( + "document", + "click", + function (event) { + if (!_this.menuClick) { + _this.activeItem = null; + _this.menuHoverActive = false; + _this.activeMenu = false; + } + _this.menuClick = false; } - }; - MenubarSub.prototype.ngOnDestroy = function () { - if (this.documentClickListener) { - this.documentClickListener(); - this.documentClickListener = null; + ); + } + }; + MenubarSub.prototype.onItemMouseEnter = function (event, item, menuitem) { + if ( + this.autoDisplay || + (!this.autoDisplay && this.root && this.menuHoverActive) + ) { + if (menuitem.disabled) { + return; + } + if ( + (this.activeItem && !this.activeItem.isEqualNode(item)) || + !this.activeItem + ) { + this.activeItem = item; + var nextElement = item.children[0].nextElementSibling; + if (nextElement) { + var sublist = nextElement.children[0]; + sublist.style.zIndex = String(++domhandler_1.DomHandler.zindex); + if (this.root) { + sublist.style.top = + domhandler_1.DomHandler.getOuterHeight(item.children[0]) + "px"; + sublist.style.left = "0px"; + } else { + sublist.style.top = "0px"; + sublist.style.left = + domhandler_1.DomHandler.getOuterWidth(item.children[0]) + "px"; + } } - }; - __decorate([ - core_1.Input(), - __metadata("design:type", Object) - ], MenubarSub.prototype, "item", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Boolean) - ], MenubarSub.prototype, "root", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Boolean) - ], MenubarSub.prototype, "autoDisplay", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Boolean) - ], MenubarSub.prototype, "autoZIndex", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Number) - ], MenubarSub.prototype, "baseZIndex", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Boolean), - __metadata("design:paramtypes", [Object]) - ], MenubarSub.prototype, "parentActive", null); - MenubarSub = __decorate([ - core_1.Component({ - selector: 'p-menubarSub', - template: "\n \n " - }), - __metadata("design:paramtypes", [core_1.Renderer2, core_1.ChangeDetectorRef]) - ], MenubarSub); - return MenubarSub; -}()); + this.activeMenu = item; + } + } + }; + MenubarSub.prototype.itemClick = function (event, item) { + if (item.disabled) { + event.preventDefault(); + return; + } + if (!item.url) { + event.preventDefault(); + } + if (item.command) { + item.command({ + originalEvent: event, + item: item, + }); + } + this.activeItem = null; + }; + MenubarSub.prototype.listClick = function (event) { + if (this.autoDisplay) { + this.activeItem = null; + } + }; + MenubarSub.prototype.ngOnDestroy = function () { + if (this.documentClickListener) { + this.documentClickListener(); + this.documentClickListener = null; + } + }; + __decorate( + [core_1.Input(), __metadata("design:type", Object)], + MenubarSub.prototype, + "item", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Boolean)], + MenubarSub.prototype, + "root", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Boolean)], + MenubarSub.prototype, + "autoDisplay", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Boolean)], + MenubarSub.prototype, + "autoZIndex", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Number)], + MenubarSub.prototype, + "baseZIndex", + void 0 + ); + __decorate( + [ + core_1.Input(), + __metadata("design:type", Boolean), + __metadata("design:paramtypes", [Object]), + ], + MenubarSub.prototype, + "parentActive", + null + ); + MenubarSub = __decorate( + [ + core_1.Component({ + selector: "p-menubarSub", + template: + '\n \n ', + }), + __metadata("design:paramtypes", [ + core_1.Renderer2, + core_1.ChangeDetectorRef, + ]), + ], + MenubarSub + ); + return MenubarSub; +})(); exports.MenubarSub = MenubarSub; var Menubar = /** @class */ (function () { - function Menubar(el, renderer) { - this.el = el; - this.renderer = renderer; - this.autoZIndex = true; - this.baseZIndex = 0; - } - Object.defineProperty(Menubar.prototype, "autoDisplay", { - get: function () { - return this._autoDisplay; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Menubar.prototype, "utc", { - set: function (_utc) { - console.log("AutoDisplay property is deprecated and functionality is not available."); - }, - enumerable: true, - configurable: true - }); - __decorate([ - core_1.Input(), - __metadata("design:type", Array) - ], Menubar.prototype, "model", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Object) - ], Menubar.prototype, "style", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", String) - ], Menubar.prototype, "styleClass", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Boolean) - ], Menubar.prototype, "autoZIndex", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Number) - ], Menubar.prototype, "baseZIndex", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Boolean), - __metadata("design:paramtypes", []) - ], Menubar.prototype, "autoDisplay", null); - Menubar = __decorate([ - core_1.Component({ - selector: 'p-menubar', - template: "\n
\n \n \n \n
\n \n
\n
\n " - }), - __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2]) - ], Menubar); - return Menubar; -}()); + function Menubar(el, renderer) { + this.el = el; + this.renderer = renderer; + this.autoZIndex = true; + this.baseZIndex = 0; + } + Object.defineProperty(Menubar.prototype, "autoDisplay", { + get: function () { + return this._autoDisplay; + }, + enumerable: true, + configurable: true, + }); + Object.defineProperty(Menubar.prototype, "utc", { + set: function (_utc) { + console.log( + "AutoDisplay property is deprecated and functionality is not available." + ); + }, + enumerable: true, + configurable: true, + }); + __decorate( + [core_1.Input(), __metadata("design:type", Array)], + Menubar.prototype, + "model", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Object)], + Menubar.prototype, + "style", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", String)], + Menubar.prototype, + "styleClass", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Boolean)], + Menubar.prototype, + "autoZIndex", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Number)], + Menubar.prototype, + "baseZIndex", + void 0 + ); + __decorate( + [ + core_1.Input(), + __metadata("design:type", Boolean), + __metadata("design:paramtypes", []), + ], + Menubar.prototype, + "autoDisplay", + null + ); + Menubar = __decorate( + [ + core_1.Component({ + selector: "p-menubar", + template: + '\n
\n \n \n \n
\n \n
\n
\n ', + }), + __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2]), + ], + Menubar + ); + return Menubar; +})(); exports.Menubar = Menubar; var MenubarModule = /** @class */ (function () { - function MenubarModule() { - } - MenubarModule = __decorate([ - core_1.NgModule({ - imports: [common_1.CommonModule, router_1.RouterModule], - exports: [Menubar, router_1.RouterModule], - declarations: [Menubar, MenubarSub] - }) - ], MenubarModule); - return MenubarModule; -}()); + function MenubarModule() {} + MenubarModule = __decorate( + [ + core_1.NgModule({ + imports: [common_1.CommonModule, router_1.RouterModule], + exports: [Menubar, router_1.RouterModule], + declarations: [Menubar, MenubarSub], + }), + ], + MenubarModule + ); + return MenubarModule; +})(); exports.MenubarModule = MenubarModule; -//# sourceMappingURL=menubar.js.map \ No newline at end of file +//# sourceMappingURL=menubar.js.map diff --git a/frontend/src/app/primeng-changes/slider.d.ts b/frontend/src/app/primeng-changes/slider.d.ts index 07f807b9..d7a58301 100644 --- a/frontend/src/app/primeng-changes/slider.d.ts +++ b/frontend/src/app/primeng-changes/slider.d.ts @@ -1,75 +1,86 @@ -import { ElementRef, OnDestroy, EventEmitter, Renderer2, NgZone, ChangeDetectorRef } from '@angular/core'; -import { ControlValueAccessor } from '@angular/forms'; +import { + ElementRef, + OnDestroy, + EventEmitter, + Renderer2, + NgZone, + ChangeDetectorRef, +} from "@angular/core"; +import { ControlValueAccessor } from "@angular/forms"; export declare const SLIDER_VALUE_ACCESSOR: any; export declare class Slider implements OnDestroy, ControlValueAccessor { - el: ElementRef; - renderer: Renderer2; - private ngZone; - cd: ChangeDetectorRef; - animate: boolean; - disabled: boolean; - min: number; - max: number; - orientation: string; - step: number; - customStep: number[]; - range: boolean; - style: any; - styleClass: string; - tabindex: number; - onChange: EventEmitter; - onSlideEnd: EventEmitter; - sliderHandle: ElementRef; - sliderHandleStart: ElementRef; - sliderHandleEnd: ElementRef; - value: number; - values: number[]; - handleValue: number; - handleValues: number[]; - onModelChange: Function; - onModelTouched: Function; - dragging: boolean; - dragListener: any; - mouseupListener: any; - initX: number; - initY: number; - barWidth: number; - barHeight: number; - sliderHandleClick: boolean; - handleIndex: number; - startHandleValue: any; - startx: number; - starty: number; - constructor(el: ElementRef, renderer: Renderer2, ngZone: NgZone, cd: ChangeDetectorRef); - onMouseDown(event: any, index?: number): void; - onTouchStart(event: any, index?: number): void; - onTouchMove(event: any, index?: number): void; - onTouchEnd(event: any, index?: number): void; - onBarClick(event: any): void; - onHandleKeydown(event: any, handleIndex?: number): void; - spin(event: any, dir: number, handleIndex?: number): void; - handleChange(event: Event): void; - bindDragListeners(): void; - unbindDragListeners(): void; - setValueFromHandle(event: Event, handleValue: any): void; - handleStepChange(newValue: number, oldValue: number): void; - writeValue(value: any): void; - registerOnChange(fn: Function): void; - registerOnTouched(fn: Function): void; - setDisabledState(val: boolean): void; - readonly rangeStartLeft: string; - readonly rangeStartBottom: string; - readonly rangeEndLeft: string; - readonly rangeEndBottom: string; - isVertical(): boolean; - updateDomData(): void; - calculateHandleValue(event: any): number; - updateHandleValue(): void; - updateValue(val: number, event?: Event): void; - getValueFromHandle(handleValue: number): number; - getDecimalsCount(value: number): number; - getNormalizedValue(val: number): number; - ngOnDestroy(): void; -} -export declare class SliderModule { + el: ElementRef; + renderer: Renderer2; + private ngZone; + cd: ChangeDetectorRef; + animate: boolean; + disabled: boolean; + min: number; + max: number; + orientation: string; + step: number; + customStep: number[]; + range: boolean; + style: any; + styleClass: string; + tabindex: number; + onChange: EventEmitter; + onSlideEnd: EventEmitter; + sliderHandle: ElementRef; + sliderHandleStart: ElementRef; + sliderHandleEnd: ElementRef; + value: number; + values: number[]; + handleValue: number; + handleValues: number[]; + onModelChange: Function; + onModelTouched: Function; + dragging: boolean; + dragListener: any; + mouseupListener: any; + initX: number; + initY: number; + barWidth: number; + barHeight: number; + sliderHandleClick: boolean; + handleIndex: number; + startHandleValue: any; + startx: number; + starty: number; + constructor( + el: ElementRef, + renderer: Renderer2, + ngZone: NgZone, + cd: ChangeDetectorRef + ); + onMouseDown(event: any, index?: number): void; + onTouchStart(event: any, index?: number): void; + onTouchMove(event: any, index?: number): void; + onTouchEnd(event: any, index?: number): void; + onBarClick(event: any): void; + onHandleKeydown(event: any, handleIndex?: number): void; + spin(event: any, dir: number, handleIndex?: number): void; + handleChange(event: Event): void; + bindDragListeners(): void; + unbindDragListeners(): void; + setValueFromHandle(event: Event, handleValue: any): void; + handleStepChange(newValue: number, oldValue: number): void; + writeValue(value: any): void; + registerOnChange(fn: Function): void; + registerOnTouched(fn: Function): void; + setDisabledState(val: boolean): void; + readonly rangeStartLeft: string; + readonly rangeStartBottom: string; + readonly rangeEndLeft: string; + readonly rangeEndBottom: string; + isVertical(): boolean; + updateDomData(): void; + calculateHandleValue(event: any): number; + updateHandleValue(): void; + updateValue(val: number, event?: Event): void; + getValueFromHandle(handleValue: number): number; + getDecimalsCount(value: number): number; + getNormalizedValue(val: number): number; + ngOnDestroy(): void; } +export declare class SliderModule {} diff --git a/frontend/src/app/primeng-changes/slider.js b/frontend/src/app/primeng-changes/slider.js index 071e1d4f..53dd3db6 100644 --- a/frontend/src/app/primeng-changes/slider.js +++ b/frontend/src/app/primeng-changes/slider.js @@ -1,442 +1,524 @@ "use strict"; -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; +var __decorate = + (this && this.__decorate) || + function (decorators, target, key, desc) { + var c = arguments.length, + r = + c < 3 + ? target + : desc === null + ? (desc = Object.getOwnPropertyDescriptor(target, key)) + : desc, + d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") + r = Reflect.decorate(decorators, target, key, desc); + else + for (var i = decorators.length - 1; i >= 0; i--) + if ((d = decorators[i])) + r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -var __metadata = (this && this.__metadata) || function (k, v) { - if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); -}; + }; +var __metadata = + (this && this.__metadata) || + function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") + return Reflect.metadata(k, v); + }; Object.defineProperty(exports, "__esModule", { value: true }); var core_1 = require("@angular/core"); var common_1 = require("@angular/common"); var domhandler_1 = require("../dom/domhandler"); var forms_1 = require("@angular/forms"); exports.SLIDER_VALUE_ACCESSOR = { - provide: forms_1.NG_VALUE_ACCESSOR, - useExisting: core_1.forwardRef(function () { return Slider; }), - multi: true + provide: forms_1.NG_VALUE_ACCESSOR, + useExisting: core_1.forwardRef(function () { + return Slider; + }), + multi: true, }; var Slider = /** @class */ (function () { - function Slider(el, renderer, ngZone, cd) { - this.el = el; - this.renderer = renderer; - this.ngZone = ngZone; - this.cd = cd; - this.min = 0; - this.max = 100; - this.orientation = 'horizontal'; - this.tabindex = 0; - this.onChange = new core_1.EventEmitter(); - this.onSlideEnd = new core_1.EventEmitter(); - this.handleValues = []; - this.onModelChange = function () { }; - this.onModelTouched = function () { }; - this.handleIndex = 0; + function Slider(el, renderer, ngZone, cd) { + this.el = el; + this.renderer = renderer; + this.ngZone = ngZone; + this.cd = cd; + this.min = 0; + this.max = 100; + this.orientation = "horizontal"; + this.tabindex = 0; + this.onChange = new core_1.EventEmitter(); + this.onSlideEnd = new core_1.EventEmitter(); + this.handleValues = []; + this.onModelChange = function () {}; + this.onModelTouched = function () {}; + this.handleIndex = 0; + } + Slider.prototype.onMouseDown = function (event, index) { + if (this.disabled) { + return; } - Slider.prototype.onMouseDown = function (event, index) { - if (this.disabled) { - return; - } - this.dragging = true; - this.updateDomData(); - this.sliderHandleClick = true; - this.handleIndex = index; - this.bindDragListeners(); - event.target.focus(); - event.preventDefault(); - }; - Slider.prototype.onTouchStart = function (event, index) { - if (this.disabled) { - return; - } - var touchobj = event.changedTouches[0]; - this.startHandleValue = (this.range) ? this.handleValues[index] : this.handleValue; - this.dragging = true; - this.handleIndex = index; - if (this.orientation === 'horizontal') { - this.startx = parseInt(touchobj.clientX, 10); - this.barWidth = this.el.nativeElement.children[0].offsetWidth; - } - else { - this.starty = parseInt(touchobj.clientY, 10); - this.barHeight = this.el.nativeElement.children[0].offsetHeight; - } - event.preventDefault(); - }; - Slider.prototype.onTouchMove = function (event, index) { - if (this.disabled) { - return; - } - var touchobj = event.changedTouches[0], handleValue = 0; - if (this.orientation === 'horizontal') { - handleValue = Math.floor(((parseInt(touchobj.clientX, 10) - this.startx) * 100) / (this.barWidth)) + this.startHandleValue; - } - else { - handleValue = Math.floor(((this.starty - parseInt(touchobj.clientY, 10)) * 100) / (this.barHeight)) + this.startHandleValue; - } - this.setValueFromHandle(event, handleValue); - event.preventDefault(); - }; - Slider.prototype.onTouchEnd = function (event, index) { - if (this.disabled) { - return; - } - this.dragging = false; - if (this.range) - this.onSlideEnd.emit({ originalEvent: event, values: this.values }); - else - this.onSlideEnd.emit({ originalEvent: event, value: this.value }); - event.preventDefault(); - }; - Slider.prototype.onBarClick = function (event) { - if (this.disabled) { - return; - } - if (!this.sliderHandleClick) { - this.updateDomData(); - this.handleChange(event); - } - this.sliderHandleClick = false; - }; - Slider.prototype.onHandleKeydown = function (event, handleIndex) { - if (event.which == 38 || event.which == 39) { - this.spin(event, 1, handleIndex); - } - else if (event.which == 37 || event.which == 40) { - this.spin(event, -1, handleIndex); - } - }; - Slider.prototype.spin = function (event, dir, handleIndex) { - var step = (this.step || 1) * dir; - if (this.range) { - this.handleIndex = handleIndex; - this.updateValue(this.values[this.handleIndex] + step); - this.updateHandleValue(); - } - else { - this.updateValue(this.value + step); - this.updateHandleValue(); - } - event.preventDefault(); - }; - Slider.prototype.handleChange = function (event) { - var handleValue = this.calculateHandleValue(event); - this.setValueFromHandle(event, handleValue); - }; - Slider.prototype.bindDragListeners = function () { - var _this = this; - this.ngZone.runOutsideAngular(function () { - if (!_this.dragListener) { - _this.dragListener = _this.renderer.listen('document', 'mousemove', function (event) { - if (_this.dragging) { - _this.ngZone.run(function () { - _this.handleChange(event); - }); - } - }); - } - if (!_this.mouseupListener) { - _this.mouseupListener = _this.renderer.listen('document', 'mouseup', function (event) { - if (_this.dragging) { - _this.dragging = false; - _this.ngZone.run(function () { - if (_this.range) { - _this.onSlideEnd.emit({ originalEvent: event, values: _this.values }); - } - else { - _this.onSlideEnd.emit({ originalEvent: event, value: _this.value }); - } - }); - } - }); - } - }); - }; - Slider.prototype.unbindDragListeners = function () { - if (this.dragListener) { - this.dragListener(); - } - if (this.mouseupListener) { - this.mouseupListener(); - } - }; - Slider.prototype.setValueFromHandle = function (event, handleValue) { - var newValue = this.getValueFromHandle(handleValue); - if (this.range) { - if (this.step) { - this.handleStepChange(newValue, this.values[this.handleIndex]); - } - else if (this.customStep) { - this.handleCustomStepChange(newValue, this.value); - } - else { - this.handleValues[this.handleIndex] = handleValue; - this.updateValue(newValue, event); - } - } - else { - if (this.step) { - this.handleStepChange(newValue, this.value); - } - else if (this.customStep) { - this.handleCustomStepChange(newValue, this.value); - } - else { - this.handleValue = handleValue; - this.updateValue(newValue, event); - } - } - }; - Slider.prototype.handleStepChange = function (newValue, oldValue) { - var diff = (newValue - oldValue); - var val = oldValue; - if (diff < 0) { - val = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step; - } - else if (diff > 0) { - val = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step; - } - this.updateValue(val); - this.updateHandleValue(); - }; - Slider.prototype.handleCustomStepChange = function (newValue, oldValue) { - var val = oldValue; - for (var customStepValue of this.customStep) { - let diffOld = Math.abs(val - customStepValue); - let diffNew = Math.abs(newValue - customStepValue); - - if (diffNew < diffOld) val = customStepValue; - } - this.updateValue(val); + this.dragging = true; + this.updateDomData(); + this.sliderHandleClick = true; + this.handleIndex = index; + this.bindDragListeners(); + event.target.focus(); + event.preventDefault(); + }; + Slider.prototype.onTouchStart = function (event, index) { + if (this.disabled) { + return; + } + var touchobj = event.changedTouches[0]; + this.startHandleValue = this.range + ? this.handleValues[index] + : this.handleValue; + this.dragging = true; + this.handleIndex = index; + if (this.orientation === "horizontal") { + this.startx = parseInt(touchobj.clientX, 10); + this.barWidth = this.el.nativeElement.children[0].offsetWidth; + } else { + this.starty = parseInt(touchobj.clientY, 10); + this.barHeight = this.el.nativeElement.children[0].offsetHeight; + } + event.preventDefault(); + }; + Slider.prototype.onTouchMove = function (event, index) { + if (this.disabled) { + return; + } + var touchobj = event.changedTouches[0], + handleValue = 0; + if (this.orientation === "horizontal") { + handleValue = + Math.floor( + ((parseInt(touchobj.clientX, 10) - this.startx) * 100) / this.barWidth + ) + this.startHandleValue; + } else { + handleValue = + Math.floor( + ((this.starty - parseInt(touchobj.clientY, 10)) * 100) / + this.barHeight + ) + this.startHandleValue; + } + this.setValueFromHandle(event, handleValue); + event.preventDefault(); + }; + Slider.prototype.onTouchEnd = function (event, index) { + if (this.disabled) { + return; + } + this.dragging = false; + if (this.range) + this.onSlideEnd.emit({ originalEvent: event, values: this.values }); + else this.onSlideEnd.emit({ originalEvent: event, value: this.value }); + event.preventDefault(); + }; + Slider.prototype.onBarClick = function (event) { + if (this.disabled) { + return; + } + if (!this.sliderHandleClick) { + this.updateDomData(); + this.handleChange(event); + } + this.sliderHandleClick = false; + }; + Slider.prototype.onHandleKeydown = function (event, handleIndex) { + if (event.which == 38 || event.which == 39) { + this.spin(event, 1, handleIndex); + } else if (event.which == 37 || event.which == 40) { + this.spin(event, -1, handleIndex); + } + }; + Slider.prototype.spin = function (event, dir, handleIndex) { + var step = (this.step || 1) * dir; + if (this.range) { + this.handleIndex = handleIndex; + this.updateValue(this.values[this.handleIndex] + step); this.updateHandleValue(); - }; - Slider.prototype.writeValue = function (value) { - if (this.range) - this.values = value || [0, 0]; - else - this.value = value || 0; - this.updateHandleValue(); - this.cd.markForCheck(); - }; - Slider.prototype.registerOnChange = function (fn) { - this.onModelChange = fn; - }; - Slider.prototype.registerOnTouched = function (fn) { - this.onModelTouched = fn; - }; - Slider.prototype.setDisabledState = function (val) { - this.disabled = val; - }; - Object.defineProperty(Slider.prototype, "rangeStartLeft", { - get: function () { - return this.isVertical() ? 'auto' : this.handleValues[0] + '%'; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Slider.prototype, "rangeStartBottom", { - get: function () { - return this.isVertical() ? this.handleValues[0] + '%' : 'auto'; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Slider.prototype, "rangeEndLeft", { - get: function () { - return this.isVertical() ? 'auto' : this.handleValues[1] + '%'; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Slider.prototype, "rangeEndBottom", { - get: function () { - return this.isVertical() ? this.handleValues[1] + '%' : 'auto'; - }, - enumerable: true, - configurable: true - }); - Slider.prototype.isVertical = function () { - return this.orientation === 'vertical'; - }; - Slider.prototype.updateDomData = function () { - var rect = this.el.nativeElement.children[0].getBoundingClientRect(); - this.initX = rect.left + domhandler_1.DomHandler.getWindowScrollLeft(); - this.initY = rect.top + domhandler_1.DomHandler.getWindowScrollTop(); - this.barWidth = this.el.nativeElement.children[0].offsetWidth; - this.barHeight = this.el.nativeElement.children[0].offsetHeight; - }; - Slider.prototype.calculateHandleValue = function (event) { - if (this.orientation === 'horizontal') - return ((event.pageX - this.initX) * 100) / (this.barWidth); - else - return (((this.initY + this.barHeight) - event.pageY) * 100) / (this.barHeight); - }; - Slider.prototype.updateHandleValue = function () { - if (this.range) { - this.handleValues[0] = (this.values[0] < this.min ? 0 : this.values[0] - this.min) * 100 / (this.max - this.min); - this.handleValues[1] = (this.values[1] > this.max ? 100 : this.values[1] - this.min) * 100 / (this.max - this.min); - } - else { - if (this.value < this.min) - this.handleValue = 0; - else if (this.value > this.max) - this.handleValue = 100; - else - this.handleValue = (this.value - this.min) * 100 / (this.max - this.min); - } - }; - Slider.prototype.updateValue = function (val, event) { - if (this.range) { - var value = val; - if (this.handleIndex == 0) { - if (value < this.min) { - value = this.min; - this.handleValues[0] = 0; - } - else if (value > this.values[1]) { - value = this.values[1]; - this.handleValues[0] = this.handleValues[1]; - } - this.sliderHandleStart.nativeElement.focus(); + } else { + this.updateValue(this.value + step); + this.updateHandleValue(); + } + event.preventDefault(); + }; + Slider.prototype.handleChange = function (event) { + var handleValue = this.calculateHandleValue(event); + this.setValueFromHandle(event, handleValue); + }; + Slider.prototype.bindDragListeners = function () { + var _this = this; + this.ngZone.runOutsideAngular(function () { + if (!_this.dragListener) { + _this.dragListener = _this.renderer.listen( + "document", + "mousemove", + function (event) { + if (_this.dragging) { + _this.ngZone.run(function () { + _this.handleChange(event); + }); } - else { - if (value > this.max) { - value = this.max; - this.handleValues[1] = 100; - } - else if (value < this.values[0]) { - value = this.values[0]; - this.handleValues[1] = this.handleValues[0]; + } + ); + } + if (!_this.mouseupListener) { + _this.mouseupListener = _this.renderer.listen( + "document", + "mouseup", + function (event) { + if (_this.dragging) { + _this.dragging = false; + _this.ngZone.run(function () { + if (_this.range) { + _this.onSlideEnd.emit({ + originalEvent: event, + values: _this.values, + }); + } else { + _this.onSlideEnd.emit({ + originalEvent: event, + value: _this.value, + }); } - this.sliderHandleEnd.nativeElement.focus(); - } - this.values[this.handleIndex] = this.getNormalizedValue(value); - this.onModelChange(this.values); - this.onChange.emit({ event: event, values: this.values }); - } - else { - if (val < this.min) { - val = this.min; - this.handleValue = 0; - } - else if (val > this.max) { - val = this.max; - this.handleValue = 100; + }); } - this.value = this.getNormalizedValue(val); - this.onModelChange(this.value); - this.onChange.emit({ event: event, value: this.value }); - this.sliderHandle.nativeElement.focus(); - } - }; - Slider.prototype.getValueFromHandle = function (handleValue) { - return (this.max - this.min) * (handleValue / 100) + this.min; - }; - Slider.prototype.getDecimalsCount = function (value) { - if (value && Math.floor(value) !== value) - return value.toString().split(".")[1].length || 0; - return 0; - }; - Slider.prototype.getNormalizedValue = function (val) { - var decimalsCount = this.getDecimalsCount(this.step); - if (decimalsCount > 0) { - return +val.toFixed(decimalsCount); + } + ); + } + }); + }; + Slider.prototype.unbindDragListeners = function () { + if (this.dragListener) { + this.dragListener(); + } + if (this.mouseupListener) { + this.mouseupListener(); + } + }; + Slider.prototype.setValueFromHandle = function (event, handleValue) { + var newValue = this.getValueFromHandle(handleValue); + if (this.range) { + if (this.step) { + this.handleStepChange(newValue, this.values[this.handleIndex]); + } else if (this.customStep) { + this.handleCustomStepChange(newValue, this.value); + } else { + this.handleValues[this.handleIndex] = handleValue; + this.updateValue(newValue, event); + } + } else { + if (this.step) { + this.handleStepChange(newValue, this.value); + } else if (this.customStep) { + this.handleCustomStepChange(newValue, this.value); + } else { + this.handleValue = handleValue; + this.updateValue(newValue, event); + } + } + }; + Slider.prototype.handleStepChange = function (newValue, oldValue) { + var diff = newValue - oldValue; + var val = oldValue; + if (diff < 0) { + val = + oldValue + + Math.ceil(newValue / this.step - oldValue / this.step) * this.step; + } else if (diff > 0) { + val = + oldValue + + Math.floor(newValue / this.step - oldValue / this.step) * this.step; + } + this.updateValue(val); + this.updateHandleValue(); + }; + Slider.prototype.handleCustomStepChange = function (newValue, oldValue) { + var val = oldValue; + for (var customStepValue of this.customStep) { + let diffOld = Math.abs(val - customStepValue); + let diffNew = Math.abs(newValue - customStepValue); + + if (diffNew < diffOld) val = customStepValue; + } + this.updateValue(val); + this.updateHandleValue(); + }; + Slider.prototype.writeValue = function (value) { + if (this.range) this.values = value || [0, 0]; + else this.value = value || 0; + this.updateHandleValue(); + this.cd.markForCheck(); + }; + Slider.prototype.registerOnChange = function (fn) { + this.onModelChange = fn; + }; + Slider.prototype.registerOnTouched = function (fn) { + this.onModelTouched = fn; + }; + Slider.prototype.setDisabledState = function (val) { + this.disabled = val; + }; + Object.defineProperty(Slider.prototype, "rangeStartLeft", { + get: function () { + return this.isVertical() ? "auto" : this.handleValues[0] + "%"; + }, + enumerable: true, + configurable: true, + }); + Object.defineProperty(Slider.prototype, "rangeStartBottom", { + get: function () { + return this.isVertical() ? this.handleValues[0] + "%" : "auto"; + }, + enumerable: true, + configurable: true, + }); + Object.defineProperty(Slider.prototype, "rangeEndLeft", { + get: function () { + return this.isVertical() ? "auto" : this.handleValues[1] + "%"; + }, + enumerable: true, + configurable: true, + }); + Object.defineProperty(Slider.prototype, "rangeEndBottom", { + get: function () { + return this.isVertical() ? this.handleValues[1] + "%" : "auto"; + }, + enumerable: true, + configurable: true, + }); + Slider.prototype.isVertical = function () { + return this.orientation === "vertical"; + }; + Slider.prototype.updateDomData = function () { + var rect = this.el.nativeElement.children[0].getBoundingClientRect(); + this.initX = rect.left + domhandler_1.DomHandler.getWindowScrollLeft(); + this.initY = rect.top + domhandler_1.DomHandler.getWindowScrollTop(); + this.barWidth = this.el.nativeElement.children[0].offsetWidth; + this.barHeight = this.el.nativeElement.children[0].offsetHeight; + }; + Slider.prototype.calculateHandleValue = function (event) { + if (this.orientation === "horizontal") + return ((event.pageX - this.initX) * 100) / this.barWidth; + else + return ( + ((this.initY + this.barHeight - event.pageY) * 100) / this.barHeight + ); + }; + Slider.prototype.updateHandleValue = function () { + if (this.range) { + this.handleValues[0] = + ((this.values[0] < this.min ? 0 : this.values[0] - this.min) * 100) / + (this.max - this.min); + this.handleValues[1] = + ((this.values[1] > this.max ? 100 : this.values[1] - this.min) * 100) / + (this.max - this.min); + } else { + if (this.value < this.min) this.handleValue = 0; + else if (this.value > this.max) this.handleValue = 100; + else + this.handleValue = + ((this.value - this.min) * 100) / (this.max - this.min); + } + }; + Slider.prototype.updateValue = function (val, event) { + if (this.range) { + var value = val; + if (this.handleIndex == 0) { + if (value < this.min) { + value = this.min; + this.handleValues[0] = 0; + } else if (value > this.values[1]) { + value = this.values[1]; + this.handleValues[0] = this.handleValues[1]; } - else { - return Math.floor(val); + this.sliderHandleStart.nativeElement.focus(); + } else { + if (value > this.max) { + value = this.max; + this.handleValues[1] = 100; + } else if (value < this.values[0]) { + value = this.values[0]; + this.handleValues[1] = this.handleValues[0]; } - }; - Slider.prototype.ngOnDestroy = function () { - this.unbindDragListeners(); - }; - __decorate([ - core_1.Input(), - __metadata("design:type", Boolean) - ], Slider.prototype, "animate", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Boolean) - ], Slider.prototype, "disabled", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Number) - ], Slider.prototype, "min", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Number) - ], Slider.prototype, "max", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", String) - ], Slider.prototype, "orientation", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Number) - ], Slider.prototype, "step", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Array[Number]) - ], Slider.prototype, "customStep", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Boolean) - ], Slider.prototype, "range", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Object) - ], Slider.prototype, "style", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", String) - ], Slider.prototype, "styleClass", void 0); - __decorate([ - core_1.Input(), - __metadata("design:type", Number) - ], Slider.prototype, "tabindex", void 0); - __decorate([ - core_1.Output(), - __metadata("design:type", core_1.EventEmitter) - ], Slider.prototype, "onChange", void 0); - __decorate([ - core_1.Output(), - __metadata("design:type", core_1.EventEmitter) - ], Slider.prototype, "onSlideEnd", void 0); - __decorate([ - core_1.ViewChild("sliderHandle", { static: false }), - __metadata("design:type", core_1.ElementRef) - ], Slider.prototype, "sliderHandle", void 0); - __decorate([ - core_1.ViewChild("sliderHandleStart", { static: false }), - __metadata("design:type", core_1.ElementRef) - ], Slider.prototype, "sliderHandleStart", void 0); - __decorate([ - core_1.ViewChild("sliderHandleEnd", { static: false }), - __metadata("design:type", core_1.ElementRef) - ], Slider.prototype, "sliderHandleEnd", void 0); - Slider = __decorate([ - core_1.Component({ - selector: 'p-slider', - template: "\n
\n \n \n \n \n \n \n \n
\n ", - providers: [exports.SLIDER_VALUE_ACCESSOR] - }), - __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2, core_1.NgZone, core_1.ChangeDetectorRef]) - ], Slider); - return Slider; -}()); + this.sliderHandleEnd.nativeElement.focus(); + } + this.values[this.handleIndex] = this.getNormalizedValue(value); + this.onModelChange(this.values); + this.onChange.emit({ event: event, values: this.values }); + } else { + if (val < this.min) { + val = this.min; + this.handleValue = 0; + } else if (val > this.max) { + val = this.max; + this.handleValue = 100; + } + this.value = this.getNormalizedValue(val); + this.onModelChange(this.value); + this.onChange.emit({ event: event, value: this.value }); + this.sliderHandle.nativeElement.focus(); + } + }; + Slider.prototype.getValueFromHandle = function (handleValue) { + return (this.max - this.min) * (handleValue / 100) + this.min; + }; + Slider.prototype.getDecimalsCount = function (value) { + if (value && Math.floor(value) !== value) + return value.toString().split(".")[1].length || 0; + return 0; + }; + Slider.prototype.getNormalizedValue = function (val) { + var decimalsCount = this.getDecimalsCount(this.step); + if (decimalsCount > 0) { + return +val.toFixed(decimalsCount); + } else { + return Math.floor(val); + } + }; + Slider.prototype.ngOnDestroy = function () { + this.unbindDragListeners(); + }; + __decorate( + [core_1.Input(), __metadata("design:type", Boolean)], + Slider.prototype, + "animate", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Boolean)], + Slider.prototype, + "disabled", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Number)], + Slider.prototype, + "min", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Number)], + Slider.prototype, + "max", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", String)], + Slider.prototype, + "orientation", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Number)], + Slider.prototype, + "step", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Array[Number])], + Slider.prototype, + "customStep", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Boolean)], + Slider.prototype, + "range", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Object)], + Slider.prototype, + "style", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", String)], + Slider.prototype, + "styleClass", + void 0 + ); + __decorate( + [core_1.Input(), __metadata("design:type", Number)], + Slider.prototype, + "tabindex", + void 0 + ); + __decorate( + [core_1.Output(), __metadata("design:type", core_1.EventEmitter)], + Slider.prototype, + "onChange", + void 0 + ); + __decorate( + [core_1.Output(), __metadata("design:type", core_1.EventEmitter)], + Slider.prototype, + "onSlideEnd", + void 0 + ); + __decorate( + [ + core_1.ViewChild("sliderHandle", { static: false }), + __metadata("design:type", core_1.ElementRef), + ], + Slider.prototype, + "sliderHandle", + void 0 + ); + __decorate( + [ + core_1.ViewChild("sliderHandleStart", { static: false }), + __metadata("design:type", core_1.ElementRef), + ], + Slider.prototype, + "sliderHandleStart", + void 0 + ); + __decorate( + [ + core_1.ViewChild("sliderHandleEnd", { static: false }), + __metadata("design:type", core_1.ElementRef), + ], + Slider.prototype, + "sliderHandleEnd", + void 0 + ); + Slider = __decorate( + [ + core_1.Component({ + selector: "p-slider", + template: + '\n
\n \n \n \n \n \n \n \n
\n ', + providers: [exports.SLIDER_VALUE_ACCESSOR], + }), + __metadata("design:paramtypes", [ + core_1.ElementRef, + core_1.Renderer2, + core_1.NgZone, + core_1.ChangeDetectorRef, + ]), + ], + Slider + ); + return Slider; +})(); exports.Slider = Slider; var SliderModule = /** @class */ (function () { - function SliderModule() { - } - SliderModule = __decorate([ - core_1.NgModule({ - imports: [common_1.CommonModule], - exports: [Slider], - declarations: [Slider] - }) - ], SliderModule); - return SliderModule; -}()); + function SliderModule() {} + SliderModule = __decorate( + [ + core_1.NgModule({ + imports: [common_1.CommonModule], + exports: [Slider], + declarations: [Slider], + }), + ], + SliderModule + ); + return SliderModule; +})(); exports.SliderModule = SliderModule; -//# sourceMappingURL=slider.js.map \ No newline at end of file +//# sourceMappingURL=slider.js.map diff --git a/frontend/src/environments/environment.prod.ts b/frontend/src/environments/environment.prod.ts index 3612073b..c9669790 100644 --- a/frontend/src/environments/environment.prod.ts +++ b/frontend/src/environments/environment.prod.ts @@ -1,3 +1,3 @@ export const environment = { - production: true + production: true, }; diff --git a/frontend/src/environments/environment.ts b/frontend/src/environments/environment.ts index 7b4f817a..99c3763c 100644 --- a/frontend/src/environments/environment.ts +++ b/frontend/src/environments/environment.ts @@ -3,7 +3,7 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, }; /* diff --git a/frontend/src/index.html b/frontend/src/index.html index 7010b5e3..c7efb285 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -1,13 +1,17 @@ - + - - - Blueprintnotincluded - - - - - - - + + + Blueprintnotincluded + + + + + + + diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 066434f6..8f2db8c5 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -1,10 +1,10 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from "@angular/core"; +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import * as Sentry from "@sentry/angular-ivy"; import { BrowserTracing } from "@sentry/tracing"; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; +import { AppModule } from "./app/app.module"; +import { environment } from "./environments/environment"; if (environment.production) { enableProdMode(); @@ -17,7 +17,10 @@ Sentry.init({ // which automatically instruments your application to monitor its // performance, including custom Angular routing instrumentation new BrowserTracing({ - tracePropagationTargets: ["localhost", "https://blueprintnotincluded.org"], + tracePropagationTargets: [ + "localhost", + "https://blueprintnotincluded.org", + ], routingInstrumentation: Sentry.routingInstrumentation, }), ], @@ -28,5 +31,6 @@ Sentry.init({ tracesSampleRate: 1.0, }); -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/frontend/src/polyfills.ts b/frontend/src/polyfills.ts index 129bfa72..9bb39b2a 100644 --- a/frontend/src/polyfills.ts +++ b/frontend/src/polyfills.ts @@ -1,7 +1,7 @@ /*************************************************************************************************** * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. */ -import '@angular/localize/init'; +import "@angular/localize/init"; /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. @@ -59,14 +59,13 @@ import '@angular/localize/init'; /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - +import "zone.js/dist/zone"; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ - (window as any).global = window; - (window as any).process = { +(window as any).global = window; +(window as any).process = { env: { DEBUG: undefined }, }; diff --git a/frontend/src/styles.css b/frontend/src/styles.css index c69a82cc..8a13d433 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,14 +1,14 @@ /* You can add global styles to this file, and also import other style files */ body { - margin: 0; - padding: 0; - overflow-y:auto; - overflow-x:auto; + margin: 0; + padding: 0; + overflow-y: auto; + overflow-x: auto; } -.grecaptcha-badge{ - visibility: collapse !important; +.grecaptcha-badge { + visibility: collapse !important; } .ui-clickable-icon { @@ -21,7 +21,7 @@ body { cursor: pointer; border-radius: 3px; } - + .ui-clickable-icon:hover { background-color: #c8c8c8; color: #333333; @@ -59,42 +59,46 @@ body { } .ui-widget { - font-family: "Open Sans","Helvetica Neue",sans-serif; + font-family: "Open Sans", "Helvetica Neue", sans-serif; font-size: 14px; text-decoration: none; } .ui-fieldset-false-link { - cursor:pointer; + cursor: pointer; color: #007ad9; } .ui-fieldset-legend { - padding: .5em 1em; + padding: 0.5em 1em; } .box-card { background-color: #ffffff; color: #333333; - border-radius: 3px; + border-radius: 3px; padding: 10px; width: 100%; display: flex; flex-flow: column; - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); } .box-card-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, + Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } .p-colorpicker-preview { width: 40px !important; height: 40px !important; -} \ No newline at end of file +} diff --git a/frontend/src/test.ts b/frontend/src/test.ts index 16317897..da810f05 100644 --- a/frontend/src/test.ts +++ b/frontend/src/test.ts @@ -1,11 +1,11 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; +import "zone.js/dist/zone-testing"; +import { getTestBed } from "@angular/core/testing"; import { BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; + platformBrowserDynamicTesting, +} from "@angular/platform-browser-dynamic/testing"; declare const require: any; @@ -15,6 +15,6 @@ getTestBed().initTestEnvironment( platformBrowserDynamicTesting() ); // Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); +const context = require.context("./", true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json index bdcfed0e..c7279fe8 100644 --- a/frontend/tsconfig.app.json +++ b/frontend/tsconfig.app.json @@ -4,10 +4,7 @@ "outDir": "./out-tsc/app", "types": [] }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], + "files": ["src/main.ts", "src/polyfills.ts"], /* "files": [ "src/main.ts", @@ -16,7 +13,7 @@ */ "include": [ "src/**/*.d.ts", - + // Move to files after doc "src/main.ts", "src/polyfills.ts" diff --git a/frontend/tsconfig.base.json b/frontend/tsconfig.base.json index e7d5b0df..f185e4d0 100644 --- a/frontend/tsconfig.base.json +++ b/frontend/tsconfig.base.json @@ -11,17 +11,10 @@ "moduleResolution": "node", "importHelpers": true, "target": "es2015", - "typeRoots": [ - "node_modules/@types" - ], - "lib": [ - "es2018", - "dom" - ] + "typeRoots": ["node_modules/@types"], + "lib": ["es2018", "dom"] }, - "references": [ - { "path": "../lib" } - ], + "references": [{ "path": "../lib" }], "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 7e00e707..8f1a8f47 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -14,4 +14,4 @@ "path": "./tsconfig.spec.json" } ] -} \ No newline at end of file +} diff --git a/frontend/tsconfig.spec.json b/frontend/tsconfig.spec.json index 1db2e6ee..2a1cc391 100644 --- a/frontend/tsconfig.spec.json +++ b/frontend/tsconfig.spec.json @@ -2,17 +2,8 @@ "extends": "./tsconfig.base.json", "compilerOptions": { "outDir": "./out-tsc/spec", - "types": [ - "jasmine", - "node" - ] + "types": ["jasmine", "node"] }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] + "files": ["src/test.ts", "src/polyfills.ts"], + "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] } From 9dc8733ed78819d5c1b721176a9c7c0cf7f53e7b Mon Sep 17 00:00:00 2001 From: Kevin Attfield Date: Tue, 21 Mar 2023 22:20:51 -0700 Subject: [PATCH 4/5] Enforce code styles with prettier on CI --- .github/workflows/lint.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 8a5f299f..b4b46df4 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -33,3 +33,7 @@ jobs: - name: Run frontend linters working-directory: frontend run: npm run lint + + - name: Verify code style + working-directory: frontend + run: npx prettier --check . From 244e1e972fba25c8eecce87bc2189c1995ae7469 Mon Sep 17 00:00:00 2001 From: RaceFPV Date: Wed, 22 Mar 2023 11:39:56 -0400 Subject: [PATCH 5/5] prettier --- .../user-auth/register-form/register-form.component.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.html b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.html index bdee1c5c..c779f746 100644 --- a/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.html +++ b/frontend/src/app/module-blueprint/components/user-auth/register-form/register-form.component.html @@ -72,9 +72,13 @@ /> -
Passwords must match.
+
+ Passwords must match. +
Authentication error
-
Username or e-mail is already registered
+
+ Username or e-mail is already registered +