From dd6308529aabfdd12326d69c4c70611f61b71bd7 Mon Sep 17 00:00:00 2001 From: "DESKTOP-474NEJQ\\xzsjob" <359059686@qq.com> Date: Thu, 30 Jul 2020 18:38:12 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=20=E5=B7=A5=E4=BD=9C?= =?UTF-8?q?=E5=8C=BA=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 427 +++++++++++++++++- package.json | 1 + .../collection-tools.component.html | 2 +- src/app/ui/ui.module.ts | 23 +- .../working-area/working-area.component.html | 0 .../working-area/working-area.component.scss | 0 .../working-area.component.spec.ts | 25 + .../working-area/working-area.component.ts | 124 +++++ 8 files changed, 585 insertions(+), 17 deletions(-) create mode 100644 src/app/working-area/working-area.component.html create mode 100644 src/app/working-area/working-area.component.scss create mode 100644 src/app/working-area/working-area.component.spec.ts create mode 100644 src/app/working-area/working-area.component.ts diff --git a/package-lock.json b/package-lock.json index 64d0c1d..e64b2c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2704,6 +2704,356 @@ } } }, + "@pixi/accessibility": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-5.3.2.tgz", + "integrity": "sha512-L56/Yr/gXyjs5Pgww6djg+nzBcMhi0ywmdXVZ2NEvlIk8spZwZHp9xb3t1xQvl7nXkIcdEvwBDBtgAPrwPJTRg==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/app": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/app/-/app-5.3.2.tgz", + "integrity": "sha512-jsLVe01q0QvxWv1dJql1lgl+vMqVb5YCbgxlbGHKkV3hYGmWaOd1fd31U+IMfiLgy5CgrRyoORjGuUf+HhYP3g==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2" + } + }, + "@pixi/constants": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-5.3.2.tgz", + "integrity": "sha512-wJGPCNHF8LyWIStUujLlEg63Gkt7NzOO7E3O0jWYuikmYvBzi4dYWTGg9Ws9OULPwSbM9/Cu9l1zjJUWMCytYg==" + }, + "@pixi/core": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/core/-/core-5.3.2.tgz", + "integrity": "sha512-BMd8gag7bcXWASfAkMER9lP43/5jVrjM+DhnqKv/KBK/G4wtSr+LJZJqBcNr6tox3Lquh8P5oGtVu0tAuHOXHA==", + "requires": { + "@pixi/constants": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/runner": "5.3.2", + "@pixi/settings": "5.3.2", + "@pixi/ticker": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/display": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/display/-/display-5.3.2.tgz", + "integrity": "sha512-a/VnecfB6Pt9shOuZ19cUBO+6+esG/DUGacwHdkO9czue1h8kmD01vrXai6vXwVGj8bmGi/Pm8Zq7tSLO/hWLw==", + "requires": { + "@pixi/math": "5.3.2", + "@pixi/settings": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/extract": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/extract/-/extract-5.3.2.tgz", + "integrity": "sha512-JPjOQ0eSfugiOdXmR7lPt1w2JdgBYzzdKqnAG5j2kWnfi7UDViyUKWbLRlns6POhyK4Qmw7Iulqy0M71HCzYxw==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/filter-alpha": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-alpha/-/filter-alpha-5.3.2.tgz", + "integrity": "sha512-TzLvngPA6jUXQ071GJzC6Pz37tBxuBgzhdw+lUqrVuf0AdSbz3tXrb9+rPmTI4F1JtYPI8SaTwwOmPhiZ0BAqw==", + "requires": { + "@pixi/core": "5.3.2" + } + }, + "@pixi/filter-blur": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-blur/-/filter-blur-5.3.2.tgz", + "integrity": "sha512-Lzb2TMAPA1ODoRbQOrb7R0TJDy+dEC9rZo44/xbR4zfk7Ewu0LWpSumKcsLnZcB31oc/fwhdaJK00qqdaGwelQ==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/settings": "5.3.2" + } + }, + "@pixi/filter-color-matrix": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-color-matrix/-/filter-color-matrix-5.3.2.tgz", + "integrity": "sha512-dESNx44C/27IXfkIYQnxfgQbqlWrhVkaM9lprYQH8Ou57QE+uoJ4dwrYaUCanVVjRSHbDNg8uXxZozjFb9NkLw==", + "requires": { + "@pixi/core": "5.3.2" + } + }, + "@pixi/filter-displacement": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-displacement/-/filter-displacement-5.3.2.tgz", + "integrity": "sha512-mo6N/99dgfkDKcHo2K2Kck/DOel1YWiTd6vdI0WZ7iJbBHAf8exU3dUnePjM+Z3Xj05W7YzL9S2nHupPuTC1bA==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/math": "5.3.2" + } + }, + "@pixi/filter-fxaa": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-fxaa/-/filter-fxaa-5.3.2.tgz", + "integrity": "sha512-uZTi402jTgj01QiKNZ+kTuoFzu7qn4fXmKVlMBHA493TUE7l+8ffPjdsIdJXZL6QQ5s9PAJ9Coaxl9cM/1oDOA==", + "requires": { + "@pixi/core": "5.3.2" + } + }, + "@pixi/filter-noise": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-noise/-/filter-noise-5.3.2.tgz", + "integrity": "sha512-DmbggbTuo6Sa/HTA3JxezgW32UsZYvTnp2pcM7Nf3EqebD0+ahpVK6CtiZM9js7NMtUttfJgOCGYy8AZ6SjDfg==", + "requires": { + "@pixi/core": "5.3.2" + } + }, + "@pixi/graphics": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/graphics/-/graphics-5.3.2.tgz", + "integrity": "sha512-K3F8qVDHqnK7X1WoP87h8QtK7nLi5EiJA044L0nObho1PUSbVi6mzJqBBWtcFnGraHGT5IgbFEDB3PXnXnY4mA==", + "requires": { + "@pixi/constants": "5.3.2", + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/sprite": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/interaction": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/interaction/-/interaction-5.3.2.tgz", + "integrity": "sha512-fOFfNQUBJ0vCRq5dmrunIt3W63QnP3z8qvILnDNX2oP8SotCEtTuZreHeGKEVBQhrMCi5hoJgDCA9R8ca2o6AQ==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/ticker": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/loaders": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/loaders/-/loaders-5.3.2.tgz", + "integrity": "sha512-w8wBdI587g7SLIAXNtncEAZxgohekGrP9rS44q1aotfo1ongiftTy77lYLWGSpYfyyWXcY+v6R1Qc40buNrGVA==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/utils": "5.3.2", + "resource-loader": "^3.0.1" + } + }, + "@pixi/math": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/math/-/math-5.3.2.tgz", + "integrity": "sha512-vddmG9pn6sfTs2V5BLn/1Jvk+6jReaHNdxZG5HzgvEMvFTTBB8VbfMg+Lg1GocWt198nnoq8NyP7O+PaqQPlig==" + }, + "@pixi/mesh": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mesh/-/mesh-5.3.2.tgz", + "integrity": "sha512-tz4FaaxCYTidOjobGEIBoNiHCeHt9G8T9j0hJqCO4HmYWEu22eMwrrudv0Q8lEJYT743AJEk8XFn4v8wWrEFQA==", + "requires": { + "@pixi/constants": "5.3.2", + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/settings": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/mesh-extras": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mesh-extras/-/mesh-extras-5.3.2.tgz", + "integrity": "sha512-K3JSGA9vvSMFBB68hvmYolf9tg5ZFc3cVDODGdz5c+aoC5hR8neJeCRtJCbZ820vLM/hknaqz0nOAG8aJAm5yQ==", + "requires": { + "@pixi/constants": "5.3.2", + "@pixi/core": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/mesh": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/mixin-cache-as-bitmap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mixin-cache-as-bitmap/-/mixin-cache-as-bitmap-5.3.2.tgz", + "integrity": "sha512-MST8irfUjFbbFLzCqkUbLcBusI24iQE2Wbu/nx3RNJ5Fd7b661YCYqFM6TZ/y4LHqmEKcWrPK/6PAAicX9Teeg==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/settings": "5.3.2", + "@pixi/sprite": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/mixin-get-child-by-name": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mixin-get-child-by-name/-/mixin-get-child-by-name-5.3.2.tgz", + "integrity": "sha512-i21BtVtYu71nKMShfRnCf1VXaPCAGV2Cm203lp3SxkVyFvyHl4ex1bpzhKK0la4X7UK6gQIV8XHUAGqT4mzAiw==", + "requires": { + "@pixi/display": "5.3.2" + } + }, + "@pixi/mixin-get-global-position": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mixin-get-global-position/-/mixin-get-global-position-5.3.2.tgz", + "integrity": "sha512-IhdjMiGlYwabYpYs5GpOVKUCWYiz1ejK2Cj8Sddjzgb5T1puSOwvxnziolZeLodfshw+NX7FINeHwx6bbUV3cA==", + "requires": { + "@pixi/display": "5.3.2", + "@pixi/math": "5.3.2" + } + }, + "@pixi/particles": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/particles/-/particles-5.3.2.tgz", + "integrity": "sha512-RiFJ7ORTGIVHdboXUEJCLP1sS7lmTumv7QJBj5xYxM/RwRb0d2SrU+U3XcfNCXC3VVk48EiDBo4DdfQR1oPYLA==", + "requires": { + "@pixi/constants": "5.3.2", + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/polyfill": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/polyfill/-/polyfill-5.3.2.tgz", + "integrity": "sha512-KXRlW1KEPfbxdrgxggFblSu7Nm7BTm9AH9kIO4+zGcyFsX1fVuq/PMlX60oekZTeJkpGlrJqQ219dW4kgG4spg==", + "requires": { + "es6-promise-polyfill": "^1.2.0", + "object-assign": "^4.1.1" + } + }, + "@pixi/prepare": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/prepare/-/prepare-5.3.2.tgz", + "integrity": "sha512-ffNLm3zVWDd2YCvJcKgCLgi1xokMXqkUUhBzoulIS3BRiHuda9RE0gDzVP3twj9jPx6HZmewSu2Qp7m8L6TfcA==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/graphics": "5.3.2", + "@pixi/settings": "5.3.2", + "@pixi/text": "5.3.2", + "@pixi/ticker": "5.3.2" + } + }, + "@pixi/runner": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-5.3.2.tgz", + "integrity": "sha512-otRRrob5ooExmvEI2m1WtIpPuAqaN2a2qofyVI9LOKqWIbzgdG4URQI3LmpUHOxyHZLPCJxxBEf+rf8Yxn/xnQ==" + }, + "@pixi/settings": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/settings/-/settings-5.3.2.tgz", + "integrity": "sha512-XuLyLBtvDu7UspzI9PmMtyfTh8F7pihC9NLaVv2VV8wyAeLO7wdjZN8JrIMiuqibzd7bJ93yoK1Xz0CsGfKz9g==", + "requires": { + "ismobilejs": "^1.1.0" + } + }, + "@pixi/sprite": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-5.3.2.tgz", + "integrity": "sha512-DKacTS+TzCDptW4N7jkL+2m7Xz3IeEv0C3JDffJaFk9R4WR7iUzNkXF2tUQfci5aBKobK0djFh7iFORPB6r0tg==", + "requires": { + "@pixi/constants": "5.3.2", + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/settings": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/sprite-animated": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/sprite-animated/-/sprite-animated-5.3.2.tgz", + "integrity": "sha512-TO+Vi2KAL5EAUygmxjV6vKImCV6FTMNErC44/3VCzHSylW/ZBChk0zuImQOG8qB0+gFcSSWRZEIhP34hS6dMhQ==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/sprite": "5.3.2", + "@pixi/ticker": "5.3.2" + } + }, + "@pixi/sprite-tiling": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/sprite-tiling/-/sprite-tiling-5.3.2.tgz", + "integrity": "sha512-lS+xNjF43mLxo/bsJpRH9iIYdrSRzQ54vH1Yss9X/p2O57ISwBFaIzfYJAKFkQLumGLEeUg9hj7qcfJJRMOOYA==", + "requires": { + "@pixi/constants": "5.3.2", + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/sprite": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/spritesheet": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/spritesheet/-/spritesheet-5.3.2.tgz", + "integrity": "sha512-FgOKJW0d/4wYCEJTyAfHRSZ972gZ50QtUTyy1GQIYKkZAwiLVnXkpVj7jBumaL9BbOt8AyCWIXsMk47C1DLcpg==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/loaders": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/text": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/text/-/text-5.3.2.tgz", + "integrity": "sha512-NGGxN4LbkUqhQ0j19WwCjE3ELFPZBlDX8U85Z1xZbK1pOcI/k6k8h30+vsI4PRUMfNYo5s1NiOgEoZqflEMuog==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/settings": "5.3.2", + "@pixi/sprite": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/text-bitmap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/text-bitmap/-/text-bitmap-5.3.2.tgz", + "integrity": "sha512-dbHzkjPp2BcbtK3fKlouJ2DanSOj1VWuutDIM1wTNqu9WsjjrT8n6STEQ2qn0Uzna0xypBaEKbin4o2dtTonWg==", + "requires": { + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/loaders": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/mesh": "5.3.2", + "@pixi/settings": "5.3.2", + "@pixi/text": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, + "@pixi/ticker": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-5.3.2.tgz", + "integrity": "sha512-5fc3A3XZbHpX8ho07ryTz5sLHx29ZlhRppmkR/fyzN8MTTFwERxyNjfb8SOfsm2xMmf3mQdjdWjZ0ClbhSSjzQ==", + "requires": { + "@pixi/settings": "5.3.2" + } + }, + "@pixi/utils": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@pixi/utils/-/utils-5.3.2.tgz", + "integrity": "sha512-/xt+05/U0ucvwSNZv+jT+/U+RYS+JCZu6r9tInQfIngZtKlemZbHinW9V641YqFVsfsLrsqZalL9hnhtJhXVHA==", + "requires": { + "@pixi/constants": "5.3.2", + "@pixi/settings": "5.3.2", + "earcut": "^2.1.5", + "eventemitter3": "^3.1.0", + "url": "^0.11.0" + }, + "dependencies": { + "eventemitter3": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz", + "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==" + } + } + }, "@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npm.taobao.org/@protobufjs/aspromise/download/@protobufjs/aspromise-1.1.2.tgz", @@ -7241,6 +7591,11 @@ "integrity": "sha1-TrIVlMlyvEBVPSduUQU5FD21Pgo=", "dev": true }, + "es6-promise-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/es6-promise-polyfill/-/es6-promise-polyfill-1.2.0.tgz", + "integrity": "sha1-84kl8jyz4+jObNqP93T867sJDN4=" + }, "es6-promisify": { "version": "5.0.0", "resolved": "https://registry.npm.taobao.org/es6-promisify/download/es6-promisify-5.0.0.tgz", @@ -9489,6 +9844,11 @@ "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", "dev": true }, + "ismobilejs": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz", + "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==" + }, "isobject": { "version": "3.0.1", "resolved": "https://registry.npm.taobao.org/isobject/download/isobject-3.0.1.tgz", @@ -11176,6 +11536,11 @@ } } }, + "mini-signals": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/mini-signals/-/mini-signals-1.2.0.tgz", + "integrity": "sha1-RbCAE8X65RokqhqTXNMXye1yHXQ=" + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npm.taobao.org/minimalistic-assert/download/minimalistic-assert-1.0.1.tgz", @@ -12167,6 +12532,11 @@ "json-parse-better-errors": "^1.0.1" } }, + "parse-uri": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/parse-uri/-/parse-uri-1.0.0.tgz", + "integrity": "sha1-KHLcwi8aeXrN4Vg9igrClVLdrCA=" + }, "parse5": { "version": "4.0.0", "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-4.0.0.tgz?cache=0&sync_timestamp=1573036762880&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse5%2Fdownload%2Fparse5-4.0.0.tgz", @@ -12319,6 +12689,47 @@ "pinkie": "^2.0.0" } }, + "pixi.js": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-5.3.2.tgz", + "integrity": "sha512-j0lqv/njYveGJgWgtLW2BjuiGtWyPKAVq5aFs3lxWcEnxmVk7OX2BI3jRlkYB3v+gBXm2SPzQswblMsShHvyLQ==", + "requires": { + "@pixi/accessibility": "5.3.2", + "@pixi/app": "5.3.2", + "@pixi/constants": "5.3.2", + "@pixi/core": "5.3.2", + "@pixi/display": "5.3.2", + "@pixi/extract": "5.3.2", + "@pixi/filter-alpha": "5.3.2", + "@pixi/filter-blur": "5.3.2", + "@pixi/filter-color-matrix": "5.3.2", + "@pixi/filter-displacement": "5.3.2", + "@pixi/filter-fxaa": "5.3.2", + "@pixi/filter-noise": "5.3.2", + "@pixi/graphics": "5.3.2", + "@pixi/interaction": "5.3.2", + "@pixi/loaders": "5.3.2", + "@pixi/math": "5.3.2", + "@pixi/mesh": "5.3.2", + "@pixi/mesh-extras": "5.3.2", + "@pixi/mixin-cache-as-bitmap": "5.3.2", + "@pixi/mixin-get-child-by-name": "5.3.2", + "@pixi/mixin-get-global-position": "5.3.2", + "@pixi/particles": "5.3.2", + "@pixi/polyfill": "5.3.2", + "@pixi/prepare": "5.3.2", + "@pixi/runner": "5.3.2", + "@pixi/settings": "5.3.2", + "@pixi/sprite": "5.3.2", + "@pixi/sprite-animated": "5.3.2", + "@pixi/sprite-tiling": "5.3.2", + "@pixi/spritesheet": "5.3.2", + "@pixi/text": "5.3.2", + "@pixi/text-bitmap": "5.3.2", + "@pixi/ticker": "5.3.2", + "@pixi/utils": "5.3.2" + } + }, "pkg-dir": { "version": "3.0.0", "resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-3.0.0.tgz", @@ -13293,8 +13704,7 @@ "querystring": { "version": "0.2.0", "resolved": "https://registry.npm.taobao.org/querystring/download/querystring-0.2.0.tgz", - "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", - "dev": true + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=" }, "querystring-es3": { "version": "0.2.1", @@ -13656,6 +14066,15 @@ "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", "dev": true }, + "resource-loader": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/resource-loader/-/resource-loader-3.0.1.tgz", + "integrity": "sha512-fBuCRbEHdLCI1eglzQhUv9Rrdcmqkydr1r6uHE2cYHvRBrcLXeSmbE/qI/urFt8rPr/IGxir3BUwM5kUK8XoyA==", + "requires": { + "mini-signals": "^1.2.0", + "parse-uri": "^1.0.0" + } + }, "restore-cursor": { "version": "3.1.0", "resolved": "https://registry.npm.taobao.org/restore-cursor/download/restore-cursor-3.1.0.tgz", @@ -15693,7 +16112,6 @@ "version": "0.11.0", "resolved": "https://registry.npm.taobao.org/url/download/url-0.11.0.tgz", "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", - "dev": true, "requires": { "punycode": "1.3.2", "querystring": "0.2.0" @@ -15702,8 +16120,7 @@ "punycode": { "version": "1.3.2", "resolved": "https://registry.npm.taobao.org/punycode/download/punycode-1.3.2.tgz", - "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=", - "dev": true + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" } } }, diff --git a/package.json b/package.json index 5654630..8e25baa 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "ngx-cookie-service": "^3.0.2", "ngx-echarts": "^4.2.2", "ngx-perfect-scrollbar": "^8.0.0", + "pixi.js": "^5.3.2", "rxjs": "~6.5.4", "swiper": "^5.3.6", "tslib": "^1.10.0", diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html index 3bd34d3..b97917e 100644 --- a/src/app/ui/collection-tools/collection-tools.component.html +++ b/src/app/ui/collection-tools/collection-tools.component.html @@ -20,7 +20,7 @@
- +
diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index d0feaa5..db4e40a 100644 --- a/src/app/ui/ui.module.ts +++ b/src/app/ui/ui.module.ts @@ -56,24 +56,24 @@ import { PersonaldataComponent } from '../pages/personaldata/personaldata.compon import { UserdataComponent, EditUser } from './userdata/userdata.component'; import { ChangepasswordComponent } from './changepassword/changepassword.component'; import { OrganizationComponent, CreateOrganization, EditOrganization } from './organization/organization.component'; -import { UnittypeComponent,DialogOverviewExampleDialog,editorialUnit } from './unittype/unittype.component'; +import { UnittypeComponent, DialogOverviewExampleDialog, editorialUnit } from './unittype/unittype.component'; import { AuthorityComponent, CreateAuthority } from './authority/authority.component'; import { RoleComponent, CreateRole, EditRole, SharePower } from './role/role.component'; -import { UsermanagementComponent,CreateNewUser,EditNewUser,allRoles,seeInformation } from './usermanagement/usermanagement.component'; +import { UsermanagementComponent, CreateNewUser, EditNewUser, allRoles, seeInformation } from './usermanagement/usermanagement.component'; import { IsnoPipe } from '../pipes/boolean.pipe'; -import {ConfirmpswDirective} from './changepassword/equal-validator.directive' +import {ConfirmpswDirective} from './changepassword/equal-validator.directive'; import { TimePipe } from '../pipes/time.pipe'; import { NavmenusComponent, CreateMenus, EditMenus } from './navmenus/navmenus.component'; import { FireProtectionElementsComponent, Establish, EditingFireControl } from './fire-protection-elements/fire-protection-elements.component'; import { FireFightingTemplateComponent, NewFireFighting, EditFireClassification } from './fire-fighting-template/fire-fighting-template.component'; -import { MaterialBankComponent,attributeComponent,addAttributeComponent,editAttribute } from './material-bank/material-bank.component'; +import { MaterialBankComponent, attributeComponent, addAttributeComponent, editAttribute } from './material-bank/material-bank.component'; import { UnitInformationComponent } from './unit-information/unit-information.component'; import { AddMatLibrary } from './material-bank/addmatlibrary.component'; import { EditMatLibrary } from './material-bank/editmatlibrary.component'; import { AddOriginalCopy } from './material-bank/addoriginalcopy.component'; -import { FileUploadModule } from 'ng2-file-upload' +import { FileUploadModule } from 'ng2-file-upload'; import { EditOriginalCopy } from './material-bank/editoriginalcopy.component'; import { SelectOriginalCopy } from './material-bank/selectoriginalcopy.component'; import { EditUnitInfo } from './unit-information/editunitinfo.component'; @@ -85,20 +85,21 @@ import { PlanComponent } from './plan/plan.component'; import { AllaroundComponent } from './allaround/allaround.component'; import { FireFightingDeviceComponent } from './fire-fighting-device/fire-fighting-device.component'; import { KeySiteComponent } from './key-site/key-site.component'; -import { FunctionDivisionComponent,addPartition,addPartitionAttribute } from './function-division/function-division.component'; -import { RealisticPictureComponent,previewImg,addRealPicture,editRealPicture } from './realistic-picture/realistic-picture.component'; -import { UploadingCADComponent,readFile,editFile } from './uploading-cad/uploading-cad.component'; +import { FunctionDivisionComponent, addPartition, addPartitionAttribute } from './function-division/function-division.component'; +import { RealisticPictureComponent, previewImg, addRealPicture, editRealPicture } from './realistic-picture/realistic-picture.component'; +import { UploadingCADComponent, readFile, editFile } from './uploading-cad/uploading-cad.component'; import { AddHouseInfo } from './basicinfo/addhouseinfo.component'; import { ImgDetails } from './allaround/imgdetails.component'; -import { ImagesData,previewBigImg } from './fire-fighting-device/imagesdata.component'; +import { ImagesData, previewBigImg } from './fire-fighting-device/imagesdata.component'; import { ImgsDataDetail } from './fire-fighting-device/addGrouping.component'; import { KeySiteImgs } from './key-site/keysiteimgs.component'; import { KeyImgDetail } from './key-site/keyimgdetail.component'; import { LookMaster } from './basicinfo/lookmaster.component'; import { CollectionToolsComponent } from './collection-tools/collection-tools.component'; +import { WorkingAreaComponent } from '../working-area/working-area.component'; @NgModule({ - declarations: [UiComponent, CardComponent, StepperComponent, TabgroupComponent, ProgressComponent, SnackbarComponent,PersonaldataComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,IsnoPipe,ConfirmpswDirective,DialogOverviewExampleDialog,CreateAuthority,CreateRole,EditRole,TimePipe,CreateNewUser,EditNewUser,allRoles,SharePower,CreateOrganization,EditOrganization,seeInformation,EditUser,editorialUnit,FireProtectionElementsComponent,Establish,EditingFireControl,FireFightingTemplateComponent, NavmenusComponent,CreateMenus,EditMenus,NewFireFighting,EditFireClassification, MaterialBankComponent, UnitInformationComponent,AddMatLibrary,EditMatLibrary,attributeComponent,AddOriginalCopy,addAttributeComponent,editAttribute,EditOriginalCopy,SelectOriginalCopy,EditUnitInfo,AddUnitInfo,AddGroups,EditGroup, BasicinfoComponent, PlanComponent, AllaroundComponent, FireFightingDeviceComponent, KeySiteComponent, FunctionDivisionComponent, RealisticPictureComponent, UploadingCADComponent,AddHouseInfo,ImgDetails,ImagesData,ImgsDataDetail,KeySiteImgs,KeyImgDetail,addPartition,addPartitionAttribute,previewImg,addRealPicture,editRealPicture,readFile,editFile,LookMaster,previewBigImg, CollectionToolsComponent + declarations: [UiComponent, CardComponent, StepperComponent, TabgroupComponent, ProgressComponent, SnackbarComponent, PersonaldataComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent, IsnoPipe, ConfirmpswDirective, DialogOverviewExampleDialog, CreateAuthority, CreateRole, EditRole, TimePipe, CreateNewUser, EditNewUser, allRoles, SharePower, CreateOrganization, EditOrganization, seeInformation, EditUser, editorialUnit, FireProtectionElementsComponent, Establish, EditingFireControl, FireFightingTemplateComponent, NavmenusComponent, CreateMenus, EditMenus, NewFireFighting, EditFireClassification, MaterialBankComponent, UnitInformationComponent, AddMatLibrary, EditMatLibrary, attributeComponent, AddOriginalCopy, addAttributeComponent, editAttribute, EditOriginalCopy, SelectOriginalCopy, EditUnitInfo, AddUnitInfo, AddGroups, EditGroup, BasicinfoComponent, PlanComponent, AllaroundComponent, FireFightingDeviceComponent, KeySiteComponent, FunctionDivisionComponent, RealisticPictureComponent, UploadingCADComponent, AddHouseInfo, ImgDetails, ImagesData, ImgsDataDetail, KeySiteImgs, KeyImgDetail, addPartition, addPartitionAttribute, previewImg, addRealPicture, editRealPicture, readFile, editFile, LookMaster, previewBigImg, CollectionToolsComponent, WorkingAreaComponent ], imports: [ @@ -146,7 +147,7 @@ import { CollectionToolsComponent } from './collection-tools/collection-tools.co MatTreeModule, PortalModule, ScrollingModule, - + ReactiveFormsModule, FormsModule, PaginatorModule, diff --git a/src/app/working-area/working-area.component.html b/src/app/working-area/working-area.component.html new file mode 100644 index 0000000..e69de29 diff --git a/src/app/working-area/working-area.component.scss b/src/app/working-area/working-area.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/working-area/working-area.component.spec.ts b/src/app/working-area/working-area.component.spec.ts new file mode 100644 index 0000000..bd23376 --- /dev/null +++ b/src/app/working-area/working-area.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WorkingAreaComponent } from './working-area.component'; + +describe('WorkingAreaComponent', () => { + let component: WorkingAreaComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WorkingAreaComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WorkingAreaComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts new file mode 100644 index 0000000..83affeb --- /dev/null +++ b/src/app/working-area/working-area.component.ts @@ -0,0 +1,124 @@ +import { Component, OnInit, ElementRef } from '@angular/core'; +import * as PIXI from 'pixi.js'; + +@Component({ + selector: 'app-working-area', + templateUrl: './working-area.component.html', + styleUrls: ['./working-area.component.scss'] +}) +export class WorkingAreaComponent implements OnInit { + + constructor(private element: ElementRef) { } + + // 画布程序 + app = new PIXI.Application({ + width: window.innerWidth, // default: 800 + height: window.innerHeight, // default: 600 + antialias: true, // default: false + transparent: false, // default: false + resolution: 1, // default: 1 + backgroundColor: 0x1099bb + }); + // 加载器 + loader = PIXI.Loader.shared; + // 背景 + background = new PIXI.Container(); + +ngOnInit(): void { + this.element.nativeElement.appendChild(this.app.view); + this.app.stage.addChild(this.background); + this.createBackgroundImage('assets/images/caiji.jpg'); + this.app.ticker.add((delta) => { + // Read mouse points, this could be done also in mousemove/touchmove update. For simplicity it is done here for now. + // When implementing this properly, make sure to implement touchmove as interaction plugins mouse might not update on certain devices. + const mouseposition = this.app.renderer.plugins.interaction.mouse.global; + }); +} + +// 测试按钮 +testButton() { + this.createSprite('assets/images/avatar.jpg'); + this.setIcon(); +} + +setIcon() { + const defaultIcon = 'url(\'assets/images/avatar.jpg\'),auto'; + this.app.renderer.plugins.interaction.cursorStyles.default = defaultIcon; +} +// 加载资源 +LoadAsset(name: string, path: string) { +this.loader.onProgress.add(() => { + console.log(this.loader.progress); +}); // called once per loaded/errored file +this.loader.onError.add(() => { }); // called once per errored file +this.loader.onLoad.add(() => { }); // called once per loaded file +this.loader.onComplete.add(() => { + alert('aaaaaaaa'); +}); // called once when the queued resources all load. +this.loader.add(name, path); +} + + + +createSprite(source: string, width: number = 64, height: number = 64, alpha: number = 1): PIXI.Sprite { +const sprite = PIXI.Sprite.from(source); +sprite.width = width; +sprite.height = height; +sprite.x = 500, +sprite.y = 500, +sprite.alpha = alpha; +sprite.anchor.set(0.5); +sprite.interactive = true; +sprite + .on('pointerdown', this.onDragStart) + .on('pointerup', this.onDragEnd) + .on('pointerupoutside', this.onDragEnd) + .on('pointermove', this.onDragMove); +this.app.stage.addChild(sprite); +return sprite; +} +// 拖动开始 +onDragStart(event) { +event.currentTarget.data = event.data; +event.currentTarget.alpha = 0.5; +event.currentTarget.dragging = true; +} +// 拖动结束 +onDragEnd(event) { +event.currentTarget.alpha = 1; +event.currentTarget.dragging = false; +event.currentTarget.data = null; +} +// 拖动移动 +onDragMove(event) { +if (event.currentTarget.dragging) { + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + event.currentTarget.x = newPosition.x; + event.currentTarget.y = newPosition.y; +} +} +// 加载精灵图 +SetupSprite(name: string) { +const sprite = new PIXI.Sprite( + this.loader.resources[name].texture +); +} +// 画圆 +DrawCircle(x: number, y: number): void { +const circle = new PIXI.Graphics(); +circle.beginFill(0x5cafe2); +circle.drawCircle(0, 0, 80); +circle.x = x; +circle.y = y; +this.app.stage.addChild(circle); +} +// 改变背景颜色 +BackgroundChanged(backgroundColor: number): void { +this.app.renderer.backgroundColor = backgroundColor; +} +// 创建背景图片 +createBackgroundImage(source: string): PIXI.Sprite { +return this.createSprite(source, 500, 500, 1); +} + +}