diff --git a/.stylelintrc.json b/.stylelintrc.json deleted file mode 100644 index 77ceb29..0000000 --- a/.stylelintrc.json +++ /dev/null @@ -1 +0,0 @@ -{ "extends": ["stylelint-config-standard"] } \ No newline at end of file diff --git a/global.d.ts b/global.d.ts index 7ffb5c5..7b07860 100644 --- a/global.d.ts +++ b/global.d.ts @@ -8,8 +8,4 @@ declare global { } } -declare namespace PixiMixins { - interface Container { - ____uid: string; - } -} +export {}; diff --git a/package-lock.json b/package-lock.json index ce16ffe..10977d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,8 +57,6 @@ "pixi.js": "^8.0.0-rc.8", "pre-commit": "^1.2.2", "rimraf": "^4.4.1", - "stylelint": "^16.2.1", - "stylelint-config-standard": "^36.0.0", "ts-node": "^10.9.1", "typescript": "^5.3.3", "vite": "^4.5.0" @@ -968,92 +966,6 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, - "node_modules/@csstools/css-parser-algorithms": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.5.0.tgz", - "integrity": "sha512-abypo6m9re3clXA00eu5syw+oaPHbJTPapu9C4pzNsJ4hdZDzushT50Zhu+iIYXgEe1CxnRMn7ngsbV+MLrlpQ==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "engines": { - "node": "^14 || ^16 || >=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^2.2.3" - } - }, - "node_modules/@csstools/css-tokenizer": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.3.tgz", - "integrity": "sha512-pp//EvZ9dUmGuGtG1p+n17gTHEOqu9jO+FiCUjNN3BDmyhdA2Jq9QsVeR7K8/2QCK17HSsioPlTW9ZkzoWb3Lg==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "engines": { - "node": "^14 || ^16 || >=18" - } - }, - "node_modules/@csstools/media-query-list-parser": { - "version": "2.1.7", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.7.tgz", - "integrity": "sha512-lHPKJDkPUECsyAvD60joYfDmp8UERYxHGkFfyLJFTVK/ERJe0sVlIFLXU5XFxdjNDTerp5L4KeaKG+Z5S94qxQ==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "engines": { - "node": "^14 || ^16 || >=18" - }, - "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.5.0", - "@csstools/css-tokenizer": "^2.2.3" - } - }, - "node_modules/@csstools/selector-specificity": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.1.tgz", - "integrity": "sha512-NPljRHkq4a14YzZ3YD406uaxh7s0g6eAq3L9aLOWywoqe8PkYamAvtsh7KNX6c++ihDrJ0RiU+/z7rGnhlZ5ww==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "engines": { - "node": "^14 || ^16 || >=18" - }, - "peerDependencies": { - "postcss-selector-parser": "^6.0.13" - } - }, "node_modules/@electron/get": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.3.tgz", @@ -6724,15 +6636,6 @@ "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==", "dev": true }, - "node_modules/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, - "engines": { - "node": ">=8" - } - }, "node_modules/async": { "version": "2.6.4", "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", @@ -7746,12 +7649,6 @@ "node": ">=5.9.0" } }, - "node_modules/colord": { - "version": "2.9.3", - "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", - "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", - "dev": true - }, "node_modules/commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", @@ -7951,50 +7848,6 @@ "node": ">= 0.4.0" } }, - "node_modules/cosmiconfig": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", - "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", - "dev": true, - "dependencies": { - "env-paths": "^2.2.1", - "import-fresh": "^3.3.0", - "js-yaml": "^4.1.0", - "parse-json": "^5.2.0" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/d-fischer" - }, - "peerDependencies": { - "typescript": ">=4.9.5" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/cosmiconfig/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - }, - "node_modules/cosmiconfig/node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, "node_modules/create-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz", @@ -8093,15 +7946,6 @@ "node": ">=4" } }, - "node_modules/css-functions-list": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz", - "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==", - "dev": true, - "engines": { - "node": ">=12 || >=16" - } - }, "node_modules/css-select": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", @@ -8128,19 +7972,6 @@ "postcss-value-parser": "^4.0.2" } }, - "node_modules/css-tree": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dev": true, - "dependencies": { - "mdn-data": "2.0.30", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" - } - }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -8153,18 +7984,6 @@ "url": "https://github.com/sponsors/fb55" } }, - "node_modules/cssesc": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", - "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", - "dev": true, - "bin": { - "cssesc": "bin/cssesc" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -9768,15 +9587,6 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, - "node_modules/fastest-levenshtein": { - "version": "1.0.16", - "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz", - "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==", - "dev": true, - "engines": { - "node": ">= 4.9.1" - } - }, "node_modules/fastq": { "version": "1.17.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.0.tgz", @@ -10697,12 +10507,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/globjoin": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", - "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", - "dev": true - }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -10973,18 +10777,6 @@ "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", "dev": true }, - "node_modules/html-tags": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", - "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", - "dev": true, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/htmlparser2": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", @@ -11261,7 +11053,8 @@ "version": "1.3.8", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", - "dev": true + "dev": true, + "peer": true }, "node_modules/inquirer": { "version": "9.2.13", @@ -13983,6 +13776,7 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -14005,12 +13799,6 @@ "node": ">=6" } }, - "node_modules/known-css-properties": { - "version": "0.29.0", - "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz", - "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==", - "dev": true - }, "node_modules/language-subtag-registry": { "version": "0.3.22", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz", @@ -14157,12 +13945,6 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, - "node_modules/lodash.truncate": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", - "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", - "dev": true - }, "node_modules/log-symbols": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", @@ -14404,22 +14186,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/mathml-tag-names": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", - "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", - "dev": true, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, - "node_modules/mdn-data": { - "version": "2.0.30", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", - "dev": true - }, "node_modules/mdurl": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", @@ -14435,18 +14201,6 @@ "node": ">= 0.10.0" } }, - "node_modules/meow": { - "version": "13.2.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", - "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", - "dev": true, - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -15826,51 +15580,6 @@ "node": "^10 || ^12 || >=14" } }, - "node_modules/postcss-resolve-nested-selector": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", - "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==", - "dev": true - }, - "node_modules/postcss-safe-parser": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", - "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "engines": { - "node": ">=18.0" - }, - "peerDependencies": { - "postcss": "^8.4.31" - } - }, - "node_modules/postcss-selector-parser": { - "version": "6.0.15", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz", - "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==", - "dev": true, - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -16478,15 +16187,6 @@ "node": ">=0.10.0" } }, - "node_modules/require-from-string": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", - "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", @@ -17130,56 +16830,6 @@ "node": ">=8" } }, - "node_modules/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, - "dependencies": { - "ansi-styles": "^4.0.0", - "astral-regex": "^2.0.0", - "is-fullwidth-code-point": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/slice-ansi?sponsor=1" - } - }, - "node_modules/slice-ansi/node_modules/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, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/slice-ansi/node_modules/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, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/slice-ansi/node_modules/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 - }, "node_modules/smoothie": { "version": "1.36.1", "resolved": "https://registry.npmjs.org/smoothie/-/smoothie-1.36.1.tgz", @@ -17933,226 +17583,6 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" }, - "node_modules/stylelint": { - "version": "16.2.1", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.2.1.tgz", - "integrity": "sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==", - "dev": true, - "dependencies": { - "@csstools/css-parser-algorithms": "^2.5.0", - "@csstools/css-tokenizer": "^2.2.3", - "@csstools/media-query-list-parser": "^2.1.7", - "@csstools/selector-specificity": "^3.0.1", - "balanced-match": "^2.0.0", - "colord": "^2.9.3", - "cosmiconfig": "^9.0.0", - "css-functions-list": "^3.2.1", - "css-tree": "^2.3.1", - "debug": "^4.3.4", - "fast-glob": "^3.3.2", - "fastest-levenshtein": "^1.0.16", - "file-entry-cache": "^8.0.0", - "global-modules": "^2.0.0", - "globby": "^11.1.0", - "globjoin": "^0.1.4", - "html-tags": "^3.3.1", - "ignore": "^5.3.0", - "imurmurhash": "^0.1.4", - "is-plain-object": "^5.0.0", - "known-css-properties": "^0.29.0", - "mathml-tag-names": "^2.1.3", - "meow": "^13.1.0", - "micromatch": "^4.0.5", - "normalize-path": "^3.0.0", - "picocolors": "^1.0.0", - "postcss": "^8.4.33", - "postcss-resolve-nested-selector": "^0.1.1", - "postcss-safe-parser": "^7.0.0", - "postcss-selector-parser": "^6.0.15", - "postcss-value-parser": "^4.2.0", - "resolve-from": "^5.0.0", - "string-width": "^4.2.3", - "strip-ansi": "^7.1.0", - "supports-hyperlinks": "^3.0.0", - "svg-tags": "^1.0.0", - "table": "^6.8.1", - "write-file-atomic": "^5.0.1" - }, - "bin": { - "stylelint": "bin/stylelint.mjs" - }, - "engines": { - "node": ">=18.12.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/stylelint" - } - }, - "node_modules/stylelint-config-recommended": { - "version": "14.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz", - "integrity": "sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==", - "dev": true, - "engines": { - "node": ">=18.12.0" - }, - "peerDependencies": { - "stylelint": "^16.0.0" - } - }, - "node_modules/stylelint-config-standard": { - "version": "36.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz", - "integrity": "sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==", - "dev": true, - "dependencies": { - "stylelint-config-recommended": "^14.0.0" - }, - "engines": { - "node": ">=18.12.0" - }, - "peerDependencies": { - "stylelint": "^16.1.0" - } - }, - "node_modules/stylelint/node_modules/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, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, - "node_modules/stylelint/node_modules/balanced-match": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", - "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", - "dev": true - }, - "node_modules/stylelint/node_modules/file-entry-cache": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", - "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", - "dev": true, - "dependencies": { - "flat-cache": "^4.0.0" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/stylelint/node_modules/flat-cache": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.0.tgz", - "integrity": "sha512-EryKbCE/wxpxKniQlyas6PY1I9vwtF3uCBweX+N8KYTCn3Y12RTGtQAJ/bd5pl7kxUAc8v/R3Ake/N17OZiFqA==", - "dev": true, - "dependencies": { - "flatted": "^3.2.9", - "keyv": "^4.5.4", - "rimraf": "^5.0.5" - }, - "engines": { - "node": ">=16" - } - }, - "node_modules/stylelint/node_modules/global-modules": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz", - "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==", - "dev": true, - "dependencies": { - "global-prefix": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/stylelint/node_modules/global-prefix": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz", - "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==", - "dev": true, - "dependencies": { - "ini": "^1.3.5", - "kind-of": "^6.0.2", - "which": "^1.3.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/stylelint/node_modules/is-plain-object": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", - "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/stylelint/node_modules/rimraf": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.5.tgz", - "integrity": "sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==", - "dev": true, - "dependencies": { - "glob": "^10.3.7" - }, - "bin": { - "rimraf": "dist/esm/bin.mjs" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/stylelint/node_modules/strip-ansi": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", - "dev": true, - "dependencies": { - "ansi-regex": "^6.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" - } - }, - "node_modules/stylelint/node_modules/which": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", - "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", - "dev": true, - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "which": "bin/which" - } - }, - "node_modules/stylelint/node_modules/write-file-atomic": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", - "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", - "dev": true, - "dependencies": { - "imurmurhash": "^0.1.4", - "signal-exit": "^4.0.1" - }, - "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" - } - }, "node_modules/stylis": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", @@ -18182,19 +17612,6 @@ "node": ">=8" } }, - "node_modules/supports-hyperlinks": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", - "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0", - "supports-color": "^7.0.0" - }, - "engines": { - "node": ">=14.18" - } - }, "node_modules/supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", @@ -18207,50 +17624,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/svg-tags": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", - "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", - "dev": true - }, - "node_modules/table": { - "version": "6.8.1", - "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz", - "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==", - "dev": true, - "dependencies": { - "ajv": "^8.0.1", - "lodash.truncate": "^4.4.2", - "slice-ansi": "^4.0.0", - "string-width": "^4.2.3", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/table/node_modules/ajv": { - "version": "8.12.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", - "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", - "dev": true, - "dependencies": { - "fast-deep-equal": "^3.1.1", - "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, - "node_modules/table/node_modules/json-schema-traverse": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true - }, "node_modules/taffydb": { "version": "2.7.3", "resolved": "https://registry.npmjs.org/taffydb/-/taffydb-2.7.3.tgz", diff --git a/package.json b/package.json index 905250a..9b349b9 100644 --- a/package.json +++ b/package.json @@ -83,8 +83,6 @@ "pixi.js": "^8.0.0-rc.8", "pre-commit": "^1.2.2", "rimraf": "^4.4.1", - "stylelint": "^16.2.1", - "stylelint-config-standard": "^36.0.0", "ts-node": "^10.9.1", "typescript": "^5.3.3", "vite": "^4.5.0" diff --git a/src/lib/src/components/Container.tsx b/src/lib/src/components/Container.tsx index 6bd80db..2a7f643 100644 --- a/src/lib/src/components/Container.tsx +++ b/src/lib/src/components/Container.tsx @@ -4,6 +4,7 @@ export const Container = styled.div` background-color: #292929; padding: 10px; width: calc(100% - 20px); + height: 100vh; `; export const SectionContainer = styled.div` diff --git a/src/lib/src/components/properties/Properties.tsx b/src/lib/src/components/properties/Properties.tsx index f14225c..a877946 100644 --- a/src/lib/src/components/properties/Properties.tsx +++ b/src/lib/src/components/properties/Properties.tsx @@ -4,10 +4,26 @@ import './Properties.css'; import { NumberInput, NumberProps } from './number/Number'; import { Slider, SliderProps } from './slider/Slider'; import { SwitchProps, Switcher } from './switch/Switch'; +import { usePixiStore } from '@lib/src/pages'; +import { getPropertiesOfNode } from './getPropertiesOfNode'; -interface PropertyProps { - type: 'boolean' | 'number' | 'range' | 'select' | 'radio' | 'text' | 'textarea' | 'button'; +export interface PropertyProps { + type: + | 'boolean' + | 'number' + | 'range' + | 'select' + | 'radio' + | 'text' + | 'textarea' + | 'button' + | 'color' + | 'vector2' + | 'vector3' + | 'rect' + | 'matrix'; propertyProps: NumberProps | SwitchProps | SliderProps; // | TextProps | TextareaProps | ButtonProps; + property: string; } const Property: React.FC = ({ type, propertyProps }) => { @@ -48,6 +64,14 @@ const Property: React.FC = ({ type, propertyProps }) => { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface PropertiesProps {} const PropertiesComponent: React.FC = () => { + const selectedNodes = usePixiStore((state) => state.selectedNodes); + + // for each selected node, get the properties that are common to all of them + const commonProperties = getPropertiesOfNode(selectedNodes.map((node) => node.type)); + + console.log('commonProperties', commonProperties); + console.log('selectedNodes', selectedNodes); + const [properties, setProperties] = useState([ { label: 'Alpha', type: 'range', value: 1, property: 'alpha' }, { label: 'Visible', type: 'boolean', value: true, property: 'visible' }, @@ -56,6 +80,7 @@ const PropertiesComponent: React.FC = () => { ] as const); const handlePropertyChange = (property: string, newValue: any) => { + // @ts-expect-error - sdf setProperties((prevProperties) => prevProperties.map((prop) => (prop.property === property ? { ...prop, value: newValue } : prop)) ); @@ -64,7 +89,7 @@ const PropertiesComponent: React.FC = () => { return ( - + Properties @@ -73,6 +98,7 @@ const PropertiesComponent: React.FC = () => { handlePropertyChange(property, newValue) }} + property={property} type={type} /> ))} diff --git a/src/lib/src/components/properties/getPropertiesOfNode.tsx b/src/lib/src/components/properties/getPropertiesOfNode.tsx new file mode 100644 index 0000000..2fb5eac --- /dev/null +++ b/src/lib/src/components/properties/getPropertiesOfNode.tsx @@ -0,0 +1,362 @@ +import { PixiSceneObjectType } from '@lib/src/detection/utils/getPixiType'; +import { PropertyProps } from './Properties'; +import { NumberProps } from './number/Number'; +import { SliderProps } from './slider/Slider'; +import { SwitchProps } from './switch/Switch'; + +interface Property { + type: PropertyProps['type']; + propertyProps: Omit; +} + +interface PropertyPanel { + info: Record; + transform: Record; + appearance: Record; + rendering: Record; + culling: Record; + sorting: Record; + interaction: Record; + animatedSprite?: Record; + tilingSprite?: Record; + nineSlice?: Record; + text?: Record; +} + +const ContainerProperties: PropertyPanel = { + info: { + type: { propertyProps: { label: 'Type' }, type: 'text' }, // not editable + label: { propertyProps: { label: 'Label' }, type: 'text' }, + }, + transform: { + position: { + propertyProps: { label: 'Position' }, + type: 'vector2', + }, + width: { propertyProps: { label: 'Width' }, type: 'number' }, + height: { propertyProps: { label: 'Height' }, type: 'number' }, + scale: { propertyProps: { label: 'Scale' }, type: 'vector2' }, + rotation: { + propertyProps: { label: 'Rotation' }, + type: 'number', + }, + angle: { propertyProps: { label: 'Angle' }, type: 'number' }, + pivot: { propertyProps: { label: 'Pivot' }, type: 'vector2' }, + skew: { propertyProps: { label: 'Skew' }, type: 'vector2' }, + worldTransform: { + propertyProps: { label: 'World Transform' }, + type: 'matrix', + }, + }, + appearance: { + visible: { + propertyProps: { label: 'Visible' }, + type: 'boolean', + }, + renderable: { + propertyProps: { label: 'Renderable' }, + type: 'boolean', + }, + alpha: { + propertyProps: { + label: 'Alpha', + min: 0, + max: 1, + step: 0.05, + } as SliderProps, + type: 'range', + }, + tint: { propertyProps: { label: 'Tint' }, type: 'color' }, + blendMode: { + propertyProps: { label: 'Blend Mode' }, + type: 'select', + }, + }, + rendering: { + filterArea: { + propertyProps: { label: 'Filter Area' }, + type: 'rect', + }, + // { propertyProps: { label: 'Filters' }, property: 'filters', type: 'select' }, + boundsArea: { + propertyProps: { label: 'Bounds Area' }, + type: 'rect', + }, + isRenderGroup: { + propertyProps: { label: 'Is Render Group' }, + type: 'boolean', + }, + }, + culling: { + cullable: { + propertyProps: { label: 'Cullable' }, + type: 'boolean', + }, + cullArea: { + propertyProps: { label: 'Cull Area' }, + type: 'rect', + }, + cullableChildren: { + propertyProps: { label: 'Cullable Children' }, + type: 'boolean', + }, + }, + sorting: { + sortableChildren: { + propertyProps: { label: 'Sortable Children' }, + type: 'boolean', + }, + zIndex: { propertyProps: { label: 'Z Index' }, type: 'number' }, + }, + interaction: { + interactive: { + propertyProps: { label: 'Interactive' }, + type: 'boolean', + }, + interactiveChildren: { + propertyProps: { label: 'Interactive Children' }, + type: 'boolean', + }, + hitArea: { propertyProps: { label: 'Hit Area' }, type: 'rect' }, + cursor: { propertyProps: { label: 'Cursor' }, type: 'select' }, + }, +}; + +const SpriteProperties: PropertyPanel = { + ...ContainerProperties, + transform: { + ...ContainerProperties.transform, + anchor: { propertyProps: { label: 'Anchor' }, type: 'vector2' }, + roundPixels: { + propertyProps: { label: 'Round Pixels' }, + type: 'boolean', + }, + }, + appearance: { + ...ContainerProperties.appearance, + texture: { propertyProps: { label: 'Texture' }, type: 'text' }, + }, +}; + +const GraphicsProperties: PropertyPanel = { + ...ContainerProperties, + transform: { + ...ContainerProperties.transform, + roundPixels: { + propertyProps: { label: 'Round Pixels' }, + type: 'boolean', + }, + }, + appearance: { + ...ContainerProperties.appearance, + lineStyle: { + propertyProps: { label: 'Line Style' }, + type: 'text', + }, + fillStyle: { + propertyProps: { label: 'Fill Style' }, + type: 'text', + }, + }, +}; + +const MeshProperties: PropertyPanel = { + ...ContainerProperties, + transform: { + ...ContainerProperties.transform, + roundPixels: { + propertyProps: { label: 'Round Pixels' }, + type: 'boolean', + }, + }, + appearance: { + ...ContainerProperties.appearance, + texture: { propertyProps: { label: 'Texture' }, type: 'text' }, + batched: { + propertyProps: { label: 'Batched' }, + type: 'boolean', + }, + }, +}; + +const TextProperties: PropertyPanel = { + ...ContainerProperties, + transform: { + ...ContainerProperties.transform, + roundPixels: { + propertyProps: { label: 'Round Pixels' }, + type: 'boolean', + }, + }, + text: { + text: { propertyProps: { label: 'Text' }, type: 'text' }, + style: { propertyProps: { label: 'Style' }, type: 'text' }, + resolution: { + propertyProps: { label: 'Resolution' }, + type: 'number', + }, + }, +}; + +const TilingSpriteProperties: PropertyPanel = { + ...ContainerProperties, + ...SpriteProperties, + tilingSprite: { + tilePosition: { + propertyProps: { label: 'Tile Position' }, + type: 'vector2', + }, + tileScale: { + propertyProps: { label: 'Tile Scale' }, + type: 'vector2', + }, + tileRotation: { + propertyProps: { label: 'Tile Rotation' }, + type: 'number', + }, + }, +}; + +const AnimatedSpriteProperties: PropertyPanel = { + ...ContainerProperties, + ...SpriteProperties, + animatedSprite: { + textures: { + propertyProps: { label: 'Textures' }, + type: 'text', + }, + totalFrames: { + propertyProps: { label: 'Total Frames' }, + type: 'number', + }, + currentFrame: { + propertyProps: { label: 'Current Frame' }, + type: 'number', + }, + autoUpdate: { + propertyProps: { label: 'Auto Update' }, + type: 'boolean', + }, + playing: { + propertyProps: { label: 'Playing' }, + type: 'boolean', + }, + start: { propertyProps: { label: 'Start' }, type: 'button' }, + stop: { propertyProps: { label: 'Stop' }, type: 'button' }, + play: { propertyProps: { label: 'Play' }, type: 'button' }, + }, +}; + +const NineSliceSpriteProperties: PropertyPanel = { + ...ContainerProperties, + ...SpriteProperties, + nineSlice: { + leftWidth: { + propertyProps: { label: 'Left Width' }, + type: 'number', + }, + rightWidth: { + propertyProps: { label: 'Right Width' }, + type: 'number', + }, + topHeight: { + propertyProps: { label: 'Top Height' }, + type: 'number', + }, + bottomHeight: { + propertyProps: { label: 'Bottom Height' }, + type: 'number', + }, + textureMatrix: { + propertyProps: { label: 'Texture Matrix' }, + type: 'matrix', + }, + originalWidth: { + propertyProps: { label: 'Original Width' }, + type: 'number', + }, + originalHeight: { + propertyProps: { label: 'Original Height' }, + type: 'number', + }, + }, +}; + +// Define the properties for each PixiSceneObjectType +const properties: Record = { + Container: ContainerProperties, + Sprite: SpriteProperties, + Text: TextProperties, + BitmapText: TextProperties, + HTMLText: TextProperties, + Mesh: MeshProperties, + Graphics: GraphicsProperties, + TilingSprite: TilingSpriteProperties, + AnimatedSprite: AnimatedSpriteProperties, + NineSliceSprite: NineSliceSpriteProperties, + Unknown: ContainerProperties, +}; + +export function getPropertiesOfNode(nodes: PixiSceneObjectType[]) { + const nodeTypes = new Set(nodes); + let commonProperties = {} as Required; + const requiredProperties = properties as Record>; + + // Initialize commonProperties with the properties of the first node type + if (nodeTypes.size > 0) { + const firstNodeType = nodeTypes.values().next().value as PixiSceneObjectType; + commonProperties = { ...requiredProperties[firstNodeType] }; + } + + // For each node type, check each property panel key + for (const nodeType of nodeTypes) { + for (const key in commonProperties) { + const keyType = key as keyof PropertyPanel; + // If the property panel key is not in the current node type's properties, delete it from commonProperties + if (!requiredProperties[nodeType][keyType]) { + delete commonProperties[keyType]; + } else { + // If the property panel key is in the current node type's properties, check each property + for (const propKey in commonProperties[keyType]) { + // If the property is not in the current node type's properties for the key, remove it from commonProperties + if (!requiredProperties[nodeType][keyType][propKey]) { + delete commonProperties[keyType][propKey]; + } + } + } + } + } + + return commonProperties; + + // const nodeTypes = new Set(nodes); + // let commonProperties = {} as Required; + // const requiredProperties = properties as Record>; + + // // Initialize commonProperties with the properties of the first node type + // if (nodeTypes.size > 0) { + // const firstNodeType = nodeTypes.values().next().value as PixiSceneObjectType; + // commonProperties = { ...requiredProperties[firstNodeType] }; + // } + + // // For each node type, check each property panel key + // for (const nodeType of nodeTypes) { + // for (const key in commonProperties) { + // const keyType = key as keyof PropertyPanel; + // // If the property panel key is not in the current node type's properties, delete it from commonProperties + // if (!requiredProperties[nodeType][keyType]) { + // delete commonProperties[keyType]; + // } else { + // // If the property panel key is in the current node type's properties, check each property + // for (const prop of commonProperties[keyType]) { + // // If the property is not in the current node type's properties for the key, remove it from commonProperties + // if (!requiredProperties[nodeType][keyType].find((p) => p.property === prop.property)) { + // commonProperties[keyType] = commonProperties[keyType].filter((p) => p.property !== prop.property); + // } + // } + // } + // } + // } + + // return commonProperties; +} diff --git a/src/lib/src/components/tree/TreeViewComponent.tsx b/src/lib/src/components/tree/TreeViewComponent.tsx index 8a3cb77..345a21e 100644 --- a/src/lib/src/components/tree/TreeViewComponent.tsx +++ b/src/lib/src/components/tree/TreeViewComponent.tsx @@ -9,11 +9,13 @@ import { SectionContainer, SectionHeader, Title, TitleGroup } from '../Container import './TreeViewComponent.css'; import { usePixiStore } from '@lib/src/pages'; +import { PixiMetadata } from '@lib/src/detection/devtool'; // eslint-disable-next-line @typescript-eslint/no-empty-interface interface TreeViewComponentProps {} const TreeViewComponent: React.FC = () => { const sceneGraph = usePixiStore((state) => state.sceneGraph); + const setSelectedNodes = usePixiStore((state) => state.setSelectedNodes); const flattenTreeData = React.useMemo(() => flattenTree(sceneGraph), [sceneGraph]); console.log('rendering tree'); @@ -36,6 +38,13 @@ const TreeViewComponent: React.FC = () => { {element.name} )} + onSelect={(node)=> { + const selectedNodeIds = node.treeState.selectedIds; + // loop through the flattenTreeData and find the nodes that are selected + const selectedNodes = flattenTreeData.filter((node) => selectedNodeIds.has(node.id)); + const metadata = selectedNodes.map((node) => node.metadata as unknown as PixiMetadata); + setSelectedNodes(metadata); + }} /> diff --git a/src/lib/src/detection/devtool.ts b/src/lib/src/detection/devtool.ts index dd699d2..41f623b 100644 --- a/src/lib/src/detection/devtool.ts +++ b/src/lib/src/detection/devtool.ts @@ -1,5 +1,6 @@ import type { Application, Container, Renderer } from 'pixi.js'; import type { flattenTree } from 'react-accessible-treeview'; +import { PixiSceneObjectType } from './utils/getPixiType'; export interface Pixi { app: () => Application | undefined; @@ -57,6 +58,12 @@ export function getPixiWrapper(): Pixi { return pixiWrapper; } +export interface PixiMetadata { + type: PixiSceneObjectType; + uid: string; + isStage?: boolean; +} + export interface PixiState { version: string; sceneStats: { @@ -70,8 +77,9 @@ export interface PixiState { bitmapText: number; htmlText: number; }; - sceneGraph: Parameters[0]; - selectedNodes: string[]; + sceneGraph: Parameters[0] & {metadata: PixiMetadata} + selectedNodes: PixiMetadata[]; + // selectedNodeData: renderingStats: { fps: number; ms: number; @@ -103,6 +111,10 @@ function getPixiState(): PixiState { id: 'root', name: 'root', children: [], + metadata: { + type: 'Container', + uid: 'root', + } }, selectedNodes: [], }; diff --git a/src/lib/src/detection/updateSceneGraph.ts b/src/lib/src/detection/updateSceneGraph.ts index a94aaed..80dda04 100644 --- a/src/lib/src/detection/updateSceneGraph.ts +++ b/src/lib/src/detection/updateSceneGraph.ts @@ -18,13 +18,6 @@ function getId(container: Container): string { uidMap.set(container, res); return res; - // if(container.____uid) { - // return container.____uid; - // } - // const res = `${uid++}_${(Math.random() + 1).toString(36).substring(2)}`; - // container.____uid = res; - - // return res; } export const sceneGraphMap: Map[0]> = new Map(); diff --git a/src/lib/src/detection/updateSceneStats.ts b/src/lib/src/detection/updateSceneStats.ts index 1ebfdce..7a3d5fb 100644 --- a/src/lib/src/detection/updateSceneStats.ts +++ b/src/lib/src/detection/updateSceneStats.ts @@ -30,7 +30,6 @@ export function updateSceneStats(container: Container) { state.sceneStats.totalSceneObjects += 1; - const pixi = pixiWrapper.pixi(); const type = getPixiType(container); if (type === 'BitmapText') { @@ -49,3 +48,5 @@ export function updateSceneStats(container: Container) { state.sceneStats.container += 1; } } + +console.log('updateSceneStats'); \ No newline at end of file diff --git a/src/lib/src/detection/utils/getPixiType.ts b/src/lib/src/detection/utils/getPixiType.ts index 5780a70..277c7c8 100644 --- a/src/lib/src/detection/utils/getPixiType.ts +++ b/src/lib/src/detection/utils/getPixiType.ts @@ -1,6 +1,17 @@ import { getPixiWrapper } from '../devtool'; -export type PixiSceneObjectType = 'BitmapText' | 'HTMLText' | 'Text' | 'Mesh' | 'Graphics' | 'Sprite' | 'Container' | 'Unknown'; +export type PixiSceneObjectType = + | 'BitmapText' + | 'HTMLText' + | 'Text' + | 'Mesh' + | 'Graphics' + | 'Sprite' + | 'Container' + | 'AnimatedSprite' + | 'NineSliceSprite' + | 'TilingSprite' + | 'Unknown'; export function getPixiType(container: any): PixiSceneObjectType { const pixiWrapper = getPixiWrapper(); const pixi = pixiWrapper.pixi(); @@ -15,6 +26,16 @@ export function getPixiType(container: any): PixiSceneObjectType { return 'Mesh'; } else if (container instanceof pixi.Graphics) { return 'Graphics'; + } else if (container instanceof pixi.AnimatedSprite) { + return 'AnimatedSprite'; + } else if ( + // in v7 NineSliceSprite does not exist + (pixi.NineSliceSprite && container instanceof pixi.NineSliceSprite) || + container instanceof pixi.NineSlicePlane + ) { + return 'NineSliceSprite'; + } else if (container instanceof pixi.TilingSprite) { + return 'TilingSprite'; } else if (container instanceof pixi.Sprite) { return 'Sprite'; } else if (container instanceof pixi.Container) { diff --git a/src/lib/src/pages/index.css b/src/lib/src/pages/index.css index 7eae549..996b644 100644 --- a/src/lib/src/pages/index.css +++ b/src/lib/src/pages/index.css @@ -18,7 +18,6 @@ font-family: Menlo, Monaco, 'Courier New', monospace; background-color: var(--background-color); margin: 0; - overflow-x: hidden; } .TabsList { diff --git a/src/lib/src/pages/index.tsx b/src/lib/src/pages/index.tsx index ade5dc2..6ed4f5f 100644 --- a/src/lib/src/pages/index.tsx +++ b/src/lib/src/pages/index.tsx @@ -3,7 +3,7 @@ import React, { useEffect } from 'react'; import { create } from 'zustand'; import { Container } from '../components/Container'; import { SceneComponent } from '../components/scene/SceneComponent'; -import { PixiState } from '../detection/devtool'; +import { PixiMetadata, PixiState } from '../detection/devtool'; import { checkDiff } from '../utils/checkDiff'; import './index.css'; @@ -14,7 +14,7 @@ type ZustandState = { setSceneStats: (stats: PixiState['sceneStats']) => void; setRenderingStats: (stats: any) => void; setSceneGraph: (graph: PixiState['sceneGraph']) => void; - setSelectedNodes: (nodes: string[]) => void; + setSelectedNodes: (nodes: PixiMetadata[]) => void; } & PixiState; export const usePixiStore = create((set) => ({ pixiDetected: false, @@ -45,11 +45,15 @@ export const usePixiStore = create((set) => ({ id: 'root', name: 'root', children: [], + metadata: { + type: 'Container', + uid: 'root', + }, }, setSceneGraph: (graph: PixiState['sceneGraph']) => set({ sceneGraph: graph }), selectedNodes: [], - setSelectedNodes: (nodes: string[]) => set({ selectedNodes: nodes }), + setSelectedNodes: (nodes: PixiMetadata[]) => set({ selectedNodes: nodes }), })); const tabs = [ diff --git a/src/shared/index.ts b/src/shared/index.ts index be1e143..e39e92c 100644 --- a/src/shared/index.ts +++ b/src/shared/index.ts @@ -4,7 +4,7 @@ export enum MessageType { PopupOpened = 'popup-opened', PixiDetected = 'pixi-detected', - InjectSettingsChanged = 'inject-settings-changed', // unused + InjectSettingsChanged = 'inject-settings-changed', // unused StateUpdate = 'pixi-state-update', } @@ -24,7 +24,7 @@ export function convertPostMessage(method: MessageType, data: unknown) { * @param a - The original message */ export function convertPostMessageData(a: ReturnType) { - let data: string|object = a.data; + let data: string | object = a.data; if (typeof data === 'string') { try { @@ -38,3 +38,56 @@ export function convertPostMessageData(a: ReturnType) data, }; } + +export type ContainerPropertyKeys = + | 'label' + | 'position' + | 'width' + | 'height' + | 'scale' + | 'rotation' + | 'angle' + | 'pivot' + | 'skew' + | 'worldTransform' + | 'visible' + | 'renderable' + | 'alpha' + | 'tint' + | 'blendMode' + | 'filterArea' + | 'boundsArea' + | 'isRenderGroup' + | 'cullable' + | 'cullArea' + | 'cullableChildren' + | 'sortableChildren' + | 'zIndex' + | 'interactive' + | 'interactiveChildren' + | 'hitArea' + | 'cursor'; +export type SpritePropertyKeys = 'texture' | 'anchor' | 'roundPixels' | ContainerPropertyKeys; +export type GraphicsPropertyKeys = 'roundPixels' | 'lineStyle' | 'fillStyle' | ContainerPropertyKeys; +export type MeshPropertyKeys = 'roundPixels' | 'texture' | 'batched' | ContainerPropertyKeys; +export type TextPropertyKeys = 'roundPixels' | 'text' | 'style' | 'resolution' | ContainerPropertyKeys; +export type TilingSpritePropertyKeys = 'tilePosition' | 'tileScale' | 'tileRotation' | SpritePropertyKeys; +export type AnimatedSpritePropertyKeys = + | 'textures' + | 'totalFrames' + | 'currentFrame' + | 'autoUpdate' + | 'playing' + | 'start' + | 'stop' + | 'play' + | SpritePropertyKeys; +export type NineSliceSpritePropertyKeys = + | 'leftWidth' + | 'rightWidth' + | 'topHeight' + | 'bottomHeight' + | 'textureMatrix' + | 'originalWidth' + | 'originalHeight' + | SpritePropertyKeys;