From 2b60da90996bc6e1752f197f58f159bc3b7160b7 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 20 Jan 2022 15:00:36 -0500 Subject: [PATCH 01/38] build: remove unused dependencies --- package-lock.json | 11 ----------- package.json | 1 - src/components/AframeScene.jsx | 4 ++-- 3 files changed, 2 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 217b5534..410fd92f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,6 @@ "@reach/listbox": "^0.16.2", "aframe": "^1.2.0", "aframe-event-set-component": "^5.0.0", - "aframe-orbit-controls": "^1.3.0", "d3-scale": "^4.0.2", "rc-slider": "^9.7.4" }, @@ -4395,11 +4394,6 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, - "node_modules/aframe-orbit-controls": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/aframe-orbit-controls/-/aframe-orbit-controls-1.3.0.tgz", - "integrity": "sha512-xRrarJR1kaGy6F0YS4iFBN4jaobeUDKu+C0dasJLEB1k3RZ+GsxSs6W7WmVOEQjMmuzDNDNV2TIsE/PK/hlx/w==" - }, "node_modules/aframe/node_modules/debug": { "version": "2.2.0", "resolved": "git+ssh://git@github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a", @@ -22576,11 +22570,6 @@ } } }, - "aframe-orbit-controls": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/aframe-orbit-controls/-/aframe-orbit-controls-1.3.0.tgz", - "integrity": "sha512-xRrarJR1kaGy6F0YS4iFBN4jaobeUDKu+C0dasJLEB1k3RZ+GsxSs6W7WmVOEQjMmuzDNDNV2TIsE/PK/hlx/w==" - }, "agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", diff --git a/package.json b/package.json index f13da266..d09063b0 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,6 @@ "@reach/listbox": "^0.16.2", "aframe": "^1.2.0", "aframe-event-set-component": "^5.0.0", - "aframe-orbit-controls": "^1.3.0", "d3-scale": "^4.0.2", "rc-slider": "^9.7.4" }, diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index cc919dfa..c2dbf1fe 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -1,8 +1,8 @@ +// jshint ignore: start + import React from "react"; import "aframe"; -import "aframe-event-set-component"; -import "aframe-orbit-controls"; import "../Aframe/arcball-camera"; import "../Aframe/buttons-check"; From 8fdb6a2e5a6b0a90241fa69d147c376e66a19bfd Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 20 Jan 2022 15:17:18 -0500 Subject: [PATCH 02/38] refractor: rename and seperate files rename loader.js as model.js rename ccvLibVolumeShader.js as Shader.js Move collider-check to its own file Move entity-collider-check to its own file --- .../{ccvLibVolumeShader.js => Shader.js} | 2 ++ src/Aframe/collider-check.js | 17 +++++++++ src/Aframe/entity-collider-check.js | 17 +++++++++ src/Aframe/{loader.js => model.js} | 36 ++----------------- src/components/AframeScene.jsx | 4 ++- 5 files changed, 41 insertions(+), 35 deletions(-) rename src/Aframe/{ccvLibVolumeShader.js => Shader.js} (99%) create mode 100644 src/Aframe/collider-check.js create mode 100644 src/Aframe/entity-collider-check.js rename src/Aframe/{loader.js => model.js} (95%) diff --git a/src/Aframe/ccvLibVolumeShader.js b/src/Aframe/Shader.js similarity index 99% rename from src/Aframe/ccvLibVolumeShader.js rename to src/Aframe/Shader.js index 5ac1361e..3741d765 100644 --- a/src/Aframe/ccvLibVolumeShader.js +++ b/src/Aframe/Shader.js @@ -1,3 +1,5 @@ +/* globals THREE */ + THREE.ShaderLib["ccvLibVolumeRenderShader"] = { uniforms: { slice: { value: 1.0 }, diff --git a/src/Aframe/collider-check.js b/src/Aframe/collider-check.js new file mode 100644 index 00000000..e90ca657 --- /dev/null +++ b/src/Aframe/collider-check.js @@ -0,0 +1,17 @@ +/* globals AFRAME */ +AFRAME.registerComponent("collider-check", { + dependencies: ["raycaster", "buttons-check"], + + schema: { + intersecting: { type: "boolean", default: false }, + }, + + init: function () { + this.onCollide = this.onCollide.bind(this); + this.el.addEventListener("raycaster-intersection", this.onCollide); + }, + + onCollide: function (event) { + this.data.intersecting = true; + }, + }); \ No newline at end of file diff --git a/src/Aframe/entity-collider-check.js b/src/Aframe/entity-collider-check.js new file mode 100644 index 00000000..11660046 --- /dev/null +++ b/src/Aframe/entity-collider-check.js @@ -0,0 +1,17 @@ +/* globals AFRAME */ + +AFRAME.registerComponent("entity-collider-check", { + schema: { + intersected: { type: "boolean", default: false }, + }, + + init: function () { + this.onCollide = this.onCollide.bind(this); + this.el.addEventListener("raycaster-intersected", this.onCollide); + }, + + onCollide: function (event) { + this.data.intersected = true; + console.log("entity-intersected"); + }, + }); \ No newline at end of file diff --git a/src/Aframe/loader.js b/src/Aframe/model.js similarity index 95% rename from src/Aframe/loader.js rename to src/Aframe/model.js index ae6cfe70..14223429 100644 --- a/src/Aframe/loader.js +++ b/src/Aframe/model.js @@ -1,39 +1,7 @@ /* globals AFRAME THREE */ -import "./ccvLibVolumeShader.js"; -let bind = AFRAME.utils.bind; - -AFRAME.registerComponent("collider-check", { - dependencies: ["raycaster", "buttons-check"], - - schema: { - intersecting: { type: "boolean", default: false }, - }, - - init: function () { - this.onCollide = this.onCollide.bind(this); - this.el.addEventListener("raycaster-intersection", this.onCollide); - }, - - onCollide: function (event) { - this.data.intersecting = true; - }, -}); +import "./Shader.js"; -AFRAME.registerComponent("entity-collider-check", { - schema: { - intersected: { type: "boolean", default: false }, - }, - - init: function () { - this.onCollide = this.onCollide.bind(this); - this.el.addEventListener("raycaster-intersected", this.onCollide); - }, - - onCollide: function (event) { - this.data.intersected = true; - console.log("entity-intersected"); - }, -}); +let bind = AFRAME.utils.bind; AFRAME.registerComponent("loader", { schema: { diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index c2dbf1fe..31de323c 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -9,6 +9,8 @@ import "../Aframe/buttons-check"; import "../Aframe/cursor-listener"; import "../Aframe/loader"; import "../Aframe/render-2d-clipplane"; +import "../Aframe/entity-collider-check" +import "../Aframe/collider-check" // aframe data is passed as a string const toAframeString = (obj) => { @@ -75,7 +77,7 @@ function AframeScene({ p["x"]), alphaYDataArray: transferFunction.map((p) => p["y"]), colorMap: colorMap.path, From 7fef15be6f63821fed71ceca1ebfed21fc639443 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 20 Jan 2022 15:20:13 -0500 Subject: [PATCH 03/38] refractor: remove unneeded console logs --- src/Aframe/arcball-camera.js | 5 ----- src/Aframe/buttons-check.js | 2 -- src/Aframe/cursor-listener.js | 7 ------- src/Aframe/entity-collider-check.js | 1 - src/Aframe/model.js | 14 +------------- 5 files changed, 1 insertion(+), 28 deletions(-) diff --git a/src/Aframe/arcball-camera.js b/src/Aframe/arcball-camera.js index 7c9270ee..eb3f29f0 100644 --- a/src/Aframe/arcball-camera.js +++ b/src/Aframe/arcball-camera.js @@ -82,7 +82,6 @@ AFRAME.registerComponent("arcball-camera", { }, onExitVR: function () { - console.log("exit VR"); let el = this.el; this.debugPosition = false; if ( @@ -93,11 +92,7 @@ AFRAME.registerComponent("arcball-camera", { } this.controls.enabled = true; el.getObject3D("camera").position.set(0, 0, 2); - console.log( - "this.meshObjectHandler.el.getAttribute('loader').meshPosition" - ); let mesh = this.meshObjectHandler.el.getAttribute("loader").meshPosition; - console.log(mesh); if (el.hasAttribute("look-controls")) { el.setAttribute("look-controls", "enabled", false); diff --git a/src/Aframe/buttons-check.js b/src/Aframe/buttons-check.js index a5ec82b0..fd225e15 100644 --- a/src/Aframe/buttons-check.js +++ b/src/Aframe/buttons-check.js @@ -16,12 +16,10 @@ AFRAME.registerComponent("buttons-check", { this.el.addEventListener("triggerdown", (evt) => { this.data.grabObject = true; - console.log(this.data.grabObject); }); this.el.addEventListener("triggerup", (evt) => { this.data.grabObject = false; - console.log(this.data.grabObject); }); }, }); diff --git a/src/Aframe/cursor-listener.js b/src/Aframe/cursor-listener.js index 69bce3fa..d00ecbbb 100644 --- a/src/Aframe/cursor-listener.js +++ b/src/Aframe/cursor-listener.js @@ -16,9 +16,6 @@ AFRAME.registerComponent("cursor-listener", { }); this.el.addEventListener("mousemove ", function (evt) { - if (this.dragging === true) { - console.log("dragging at: ", evt.detail.intersection.point); - } }); this.el.addEventListener("mouseup ", function (evt) { this.dragging = false; @@ -30,13 +27,9 @@ AFRAME.registerComponent("cursor-listener", { }, onMouseMove: function (evt) { - if (this.dragging === true) { - console.log("dragging at: ", evt.detail.intersection.point); - } }, onMouseUp: function (evt) { this.dragging = false; - console.log("mouseup at: ", evt.detail.intersection.point); }, }); diff --git a/src/Aframe/entity-collider-check.js b/src/Aframe/entity-collider-check.js index 11660046..f2976252 100644 --- a/src/Aframe/entity-collider-check.js +++ b/src/Aframe/entity-collider-check.js @@ -12,6 +12,5 @@ AFRAME.registerComponent("entity-collider-check", { onCollide: function (event) { this.data.intersected = true; - console.log("entity-intersected"); }, }); \ No newline at end of file diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 14223429..72cf843a 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -204,25 +204,14 @@ AFRAME.registerComponent("loader", { onExitVR: function () { if (this.el.getObject3D("mesh") !== undefined) { - console.log("loader onExitVR 1: "); - console.log(this.el.getObject3D("mesh").position); this.data.meshPosition.x = this.el.getObject3D("mesh").position.x; this.data.meshPosition.y = this.el.getObject3D("mesh").position.y; this.data.meshPosition.z = this.el.getObject3D("mesh").position.z; - console.log("loader onExitVR this.data.meshPosition 1 : "); - console.log(this.data.meshPosition); - this.vrRotation = this.el.getObject3D("mesh").rotation; this.el.getObject3D("mesh").position.copy(new THREE.Vector3()); - console.log("loader onExitVR this.data.meshPosition 2 : "); - console.log(this.data.meshPosition); - this.el.getObject3D("mesh").rotation.set(0, 0, 0); - - console.log("loader onExitVR 2: "); - console.log(this.el.getObject3D("mesh").position); this.debugVRPos = true; } }, @@ -320,7 +309,7 @@ AFRAME.registerComponent("loader", { }, function () {}, function () { - console.log("Could not load the data, Data not found"); + throw new Error("Could not load the data at", path); } ); } @@ -334,7 +323,6 @@ AFRAME.registerComponent("loader", { this.data.rayCollided = false; }, onSelectStart: function (event) { - console.log("onSelectStart"); }, remove: function () { From b98885379d4036ec2d8c00680d8109b734316114 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 20 Jan 2022 15:20:43 -0500 Subject: [PATCH 04/38] refractor: remove unused variables --- src/Aframe/arcball-camera.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Aframe/arcball-camera.js b/src/Aframe/arcball-camera.js index eb3f29f0..f565049f 100644 --- a/src/Aframe/arcball-camera.js +++ b/src/Aframe/arcball-camera.js @@ -92,7 +92,6 @@ AFRAME.registerComponent("arcball-camera", { } this.controls.enabled = true; el.getObject3D("camera").position.set(0, 0, 2); - let mesh = this.meshObjectHandler.el.getAttribute("loader").meshPosition; if (el.hasAttribute("look-controls")) { el.setAttribute("look-controls", "enabled", false); From dcf452f18fb1f961c5f15e37a2f8904ea1a3d148 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 20 Jan 2022 15:23:36 -0500 Subject: [PATCH 05/38] refractor(buttons-check.js): add remove function to remove event listeners --- src/Aframe/buttons-check.js | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/src/Aframe/buttons-check.js b/src/Aframe/buttons-check.js index fd225e15..51a01555 100644 --- a/src/Aframe/buttons-check.js +++ b/src/Aframe/buttons-check.js @@ -6,20 +6,30 @@ AFRAME.registerComponent("buttons-check", { }, init: function () { - this.el.addEventListener("gripdown", (evt) => { - this.data.clipPlane = true; - }); + this.el.addEventListener("gripdown", this.onGripDown); + this.el.addEventListener("gripup", this.onGripUp); + this.el.addEventListener("triggerdown", this.onTriggerDown); + this.el.addEventListener("triggerup", this.onTriggerUp); + }, - this.el.addEventListener("gripup", (evt) => { - this.data.clipPlane = false; - }); + remove: function() { + this.el.removeEventListener("gripdown", this.onGripDown); + this.el.removeEventListener("gripup", this.onGripUp); + this.el.removeEventListener("triggerdown", this.onTriggerDown); + this.el.removeEventListener("triggerup", this.onTriggerUp); + }, - this.el.addEventListener("triggerdown", (evt) => { - this.data.grabObject = true; - }); + onGripDown: function(e) { + this.data.clipPlane = true; + }, + onGripUp: function(e) { + this.data.clipPlane = false; + }, - this.el.addEventListener("triggerup", (evt) => { - this.data.grabObject = false; - }); + onTriggerDown: function(e) { + this.data.grabObject = true; + }, + onTriggerUp: function(e) { + this.data.grabObject = false; }, }); From 3127bb3759847a392b3f6d00a4cba9c17ca04ecc Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 20 Jan 2022 15:32:17 -0500 Subject: [PATCH 06/38] refractor: bind event listener functions --- src/Aframe/buttons-check.js | 4 ++++ src/Aframe/collider-check.js | 8 ++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Aframe/buttons-check.js b/src/Aframe/buttons-check.js index 51a01555..21dede98 100644 --- a/src/Aframe/buttons-check.js +++ b/src/Aframe/buttons-check.js @@ -10,6 +10,10 @@ AFRAME.registerComponent("buttons-check", { this.el.addEventListener("gripup", this.onGripUp); this.el.addEventListener("triggerdown", this.onTriggerDown); this.el.addEventListener("triggerup", this.onTriggerUp); + this.onGripDown = this.onGripDown.bind(this); + this.onGripUp = this.onGripDown.bind(this); + this.onTriggerDown = this.onTriggerDown.bind(this); + this.onTriggerUp = this.onTriggerUp.bind(this); }, remove: function() { diff --git a/src/Aframe/collider-check.js b/src/Aframe/collider-check.js index e90ca657..4bc4bc0a 100644 --- a/src/Aframe/collider-check.js +++ b/src/Aframe/collider-check.js @@ -7,11 +7,15 @@ AFRAME.registerComponent("collider-check", { }, init: function () { - this.onCollide = this.onCollide.bind(this); this.el.addEventListener("raycaster-intersection", this.onCollide); + this.onCollide = this.onCollide.bind(this); }, - onCollide: function (event) { + onCollide: function (e) { this.data.intersecting = true; }, + + remove: function() { + this.el.removeEventListener("raycaster-intersection", this.onCollide); + } }); \ No newline at end of file From cf89323454a37671d422963e1c6ba4ed8a1df176 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 20 Jan 2022 15:38:54 -0500 Subject: [PATCH 07/38] refractor: clean up unused variables, event listeners, etc --- src/Aframe/buttons-check.js | 12 +++++----- src/Aframe/collider-check.js | 37 +++++++++++++++-------------- src/Aframe/cursor-listener.js | 29 +++++++++++----------- src/Aframe/entity-collider-check.js | 26 ++++++++++---------- src/Aframe/model.js | 4 +--- src/components/AframeScene.jsx | 15 ++++-------- 6 files changed, 57 insertions(+), 66 deletions(-) diff --git a/src/Aframe/buttons-check.js b/src/Aframe/buttons-check.js index 21dede98..1c4aba55 100644 --- a/src/Aframe/buttons-check.js +++ b/src/Aframe/buttons-check.js @@ -1,4 +1,5 @@ /* globals AFRAME */ + AFRAME.registerComponent("buttons-check", { schema: { clipPlane: { type: "boolean", default: false }, @@ -16,24 +17,23 @@ AFRAME.registerComponent("buttons-check", { this.onTriggerUp = this.onTriggerUp.bind(this); }, - remove: function() { + remove: function () { this.el.removeEventListener("gripdown", this.onGripDown); this.el.removeEventListener("gripup", this.onGripUp); this.el.removeEventListener("triggerdown", this.onTriggerDown); this.el.removeEventListener("triggerup", this.onTriggerUp); }, - onGripDown: function(e) { + onGripDown: function (e) { this.data.clipPlane = true; }, - onGripUp: function(e) { + onGripUp: function (e) { this.data.clipPlane = false; }, - - onTriggerDown: function(e) { + onTriggerDown: function (e) { this.data.grabObject = true; }, - onTriggerUp: function(e) { + onTriggerUp: function (e) { this.data.grabObject = false; }, }); diff --git a/src/Aframe/collider-check.js b/src/Aframe/collider-check.js index 4bc4bc0a..5a18ce13 100644 --- a/src/Aframe/collider-check.js +++ b/src/Aframe/collider-check.js @@ -1,21 +1,22 @@ /* globals AFRAME */ + AFRAME.registerComponent("collider-check", { - dependencies: ["raycaster", "buttons-check"], - - schema: { - intersecting: { type: "boolean", default: false }, - }, - - init: function () { - this.el.addEventListener("raycaster-intersection", this.onCollide); - this.onCollide = this.onCollide.bind(this); - }, - - onCollide: function (e) { - this.data.intersecting = true; - }, + dependencies: ["raycaster", "buttons-check"], + + schema: { + intersecting: { type: "boolean", default: false }, + }, + + init: function () { + this.el.addEventListener("raycaster-intersection", this.onCollide); + this.onCollide = this.onCollide.bind(this); + }, + + onCollide: function (e) { + this.data.intersecting = true; + }, - remove: function() { - this.el.removeEventListener("raycaster-intersection", this.onCollide); - } - }); \ No newline at end of file + remove: function () { + this.el.removeEventListener("raycaster-intersection", this.onCollide); + }, +}); diff --git a/src/Aframe/cursor-listener.js b/src/Aframe/cursor-listener.js index d00ecbbb..02dbd695 100644 --- a/src/Aframe/cursor-listener.js +++ b/src/Aframe/cursor-listener.js @@ -1,32 +1,31 @@ /* globals AFRAME */ -// Component to change to a sequential color on click. AFRAME.registerComponent("cursor-listener", { init: function () { - this.lastIndex = -1; - this.COLORS = ["red", "green", "blue"]; this.dragging = false; - this.cameraHandler = document.getElementById("camera").object3D; + + this.el.addEventListener("mousedown", this.onMousedown); + this.el.addEventListener("mousemove ", this.onMouseMove); + this.el.addEventListener("mouseup ", this.onMouseUp); this.onMousedown = this.onMousedown.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); this.onMouseMove = this.onMouseMove.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); + }, - this.el.addEventListener("mousedown", function (evt) { - this.dragging = true; - }); - - this.el.addEventListener("mousemove ", function (evt) { - }); - this.el.addEventListener("mouseup ", function (evt) { - this.dragging = false; - }); + remove: function () { + this.el.removeEventListener("mousedown", this.onMouseDown); + this.el.removeEventListener("mousemove ", this.onMouseMove); + this.el.removeEventListener("mouseup ", this.onMouseUp); }, - onMousedown: function (evt) { + onMouseDown: function (evt) { this.dragging = true; }, onMouseMove: function (evt) { + if (this.dragging) { + // Do something? + } }, onMouseUp: function (evt) { diff --git a/src/Aframe/entity-collider-check.js b/src/Aframe/entity-collider-check.js index f2976252..859c3400 100644 --- a/src/Aframe/entity-collider-check.js +++ b/src/Aframe/entity-collider-check.js @@ -1,16 +1,16 @@ /* globals AFRAME */ AFRAME.registerComponent("entity-collider-check", { - schema: { - intersected: { type: "boolean", default: false }, - }, - - init: function () { - this.onCollide = this.onCollide.bind(this); - this.el.addEventListener("raycaster-intersected", this.onCollide); - }, - - onCollide: function (event) { - this.data.intersected = true; - }, - }); \ No newline at end of file + schema: { + intersected: { type: "boolean", default: false }, + }, + + init: function () { + this.onCollide = this.onCollide.bind(this); + this.el.addEventListener("raycaster-intersected", this.onCollide); + }, + + onCollide: function (event) { + this.data.intersected = true; + }, +}); diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 72cf843a..ffca709d 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -204,7 +204,6 @@ AFRAME.registerComponent("loader", { onExitVR: function () { if (this.el.getObject3D("mesh") !== undefined) { - this.data.meshPosition.x = this.el.getObject3D("mesh").position.x; this.data.meshPosition.y = this.el.getObject3D("mesh").position.y; this.data.meshPosition.z = this.el.getObject3D("mesh").position.z; @@ -322,8 +321,7 @@ AFRAME.registerComponent("loader", { onClearCollide: function (event) { this.data.rayCollided = false; }, - onSelectStart: function (event) { - }, + onSelectStart: function (event) {}, remove: function () { // Do something the component or its entity is detached. diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index 31de323c..f5f2b112 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -1,5 +1,3 @@ -// jshint ignore: start - import React from "react"; import "aframe"; @@ -9,8 +7,8 @@ import "../Aframe/buttons-check"; import "../Aframe/cursor-listener"; import "../Aframe/loader"; import "../Aframe/render-2d-clipplane"; -import "../Aframe/entity-collider-check" -import "../Aframe/collider-check" +import "../Aframe/entity-collider-check"; +import "../Aframe/collider-check"; // aframe data is passed as a string const toAframeString = (obj) => { @@ -41,13 +39,8 @@ function AframeScene({ Date: Thu, 20 Jan 2022 15:41:06 -0500 Subject: [PATCH 08/38] refractor(entity-collider-check): add remove function to remove event listeners --- src/Aframe/entity-collider-check.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Aframe/entity-collider-check.js b/src/Aframe/entity-collider-check.js index 859c3400..be0ab6a8 100644 --- a/src/Aframe/entity-collider-check.js +++ b/src/Aframe/entity-collider-check.js @@ -6,11 +6,15 @@ AFRAME.registerComponent("entity-collider-check", { }, init: function () { - this.onCollide = this.onCollide.bind(this); this.el.addEventListener("raycaster-intersected", this.onCollide); + this.onCollide = this.onCollide.bind(this); + }, + + remove: function() { + this.el.removeEventListener("raycaster-intersected", this.onCollide); }, - onCollide: function (event) { + onCollide: function (e) { this.data.intersected = true; }, }); From cf14508524c095545bd15838b053c582c1e2326a Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 20 Jan 2022 16:07:52 -0500 Subject: [PATCH 09/38] refractor: clean aframe files Cleans up all aframe files except model --- src/Aframe/arcball-camera.js | 63 ++++++++++++++-------------------- src/Aframe/collider-check.js | 3 +- src/Aframe/cursor-listener.js | 10 +++--- src/Aframe/model.js | 4 +-- src/components/AframeScene.jsx | 13 ++++--- 5 files changed, 44 insertions(+), 49 deletions(-) diff --git a/src/Aframe/arcball-camera.js b/src/Aframe/arcball-camera.js index f565049f..47704955 100644 --- a/src/Aframe/arcball-camera.js +++ b/src/Aframe/arcball-camera.js @@ -1,73 +1,65 @@ -/* globals AFRAME THREE*/ +/* globals AFRAME THREE*/ import "./arcball-controller.js"; -let bind = AFRAME.utils.bind; +const bind = AFRAME.utils.bind; AFRAME.registerComponent("arcball-camera", { dependencies: ["camera"], schema: { - initialPosition: { type: "vec3" }, + initialPosition: {type: "vec3"}, }, init: function () { - let el = this.el; - this.vrcam = document.querySelector("#camera"); + const el = this.el; + + this.oldPosition = new THREE.Vector3(); + this.oldMatrix = new THREE.Matrix4(); + this.meshObjectHandler = document.getElementById("volumeCube").object3D; + + // Move camera to initial position + el.getObject3D("camera").position.copy(this.data.initialPosition); + + // Create controls this.controls = new THREE.TrackballControls( el.getObject3D("camera"), el.sceneEl.renderer.domElement ); - - this.meshObjectHandler = document.getElementById("volumeCube").object3D; this.controls.rotateSpeed = 1.0; this.controls.zoomSpeed = 1.2; this.controls.panSpeed = 0.8; - this.oldPosition = new THREE.Vector3(); - this.oldMatrix = new THREE.Matrix4(); - - this.debugPosition = false; - - this.bindMethods(); - this.onWindowResize = this.onWindowResize.bind(this); - - el.sceneEl.addEventListener("enter-vr", this.onEnterVR); - el.sceneEl.addEventListener("exit-vr", this.onExitVR); - - window.addEventListener("resize", this.onWindowResize, false); - - el.getObject3D("camera").position.copy(this.data.initialPosition); // Set the pointer to grab/grabbing when over the vr canvas const aCanvas = document.querySelector(".a-canvas"); aCanvas.style.cursor = "grab"; - document.addEventListener("mousedown", () => { aCanvas.style.cursor = "grabbing"; }); document.addEventListener("mouseup", () => { aCanvas.style.cursor = "grab"; }); - }, - onWindowResize() {}, - - bindMethods: function () { + // Add event listeners and bind functions + el.sceneEl.addEventListener("enter-vr", this.onEnterVR); + el.sceneEl.addEventListener("exit-vr", this.onExitVR); this.onEnterVR = bind(this.onEnterVR, this); this.onExitVR = bind(this.onExitVR, this); }, onEnterVR: function () { - let el = this.el; - this.debugPosition = true; + const el = this.el; if ( !AFRAME.utils.device.checkHeadsetConnected() && !AFRAME.utils.device.isMobile() ) { return; } + this.controls.enabled = false; if (el.hasAttribute("look-controls")) { el.setAttribute("look-controls", "enabled", true); + + // Store position from before VR and move to origin this.oldMatrix.copy(this.meshObjectHandler.matrixWorld); this.oldPosition.copy(el.getObject3D("camera").position); el.getObject3D("camera").position.set(0, 0, 0); @@ -75,15 +67,14 @@ AFRAME.registerComponent("arcball-camera", { }, update: function (oldData) { - let controls = this.controls; - controls.rotateSpeed = 1.0; - controls.zoomSpeed = 1.2; - controls.panSpeed = 0.8; + this.controls.rotateSpeed = 1.0; + this.controls.zoomSpeed = 1.2; + this.controls.panSpeed = 0.8; }, onExitVR: function () { - let el = this.el; - this.debugPosition = false; + const el = this.el; + if ( !AFRAME.utils.device.checkHeadsetConnected() && !AFRAME.utils.device.isMobile() @@ -91,7 +82,7 @@ AFRAME.registerComponent("arcball-camera", { return; } this.controls.enabled = true; - el.getObject3D("camera").position.set(0, 0, 2); + el.getObject3D("camera").position.set(this.oldPosition); if (el.hasAttribute("look-controls")) { el.setAttribute("look-controls", "enabled", false); @@ -102,8 +93,6 @@ AFRAME.registerComponent("arcball-camera", { if (this.controls.enabled) { this.controls.update(); } - if (this.debugPosition) { - } }, remove: function () { diff --git a/src/Aframe/collider-check.js b/src/Aframe/collider-check.js index 5a18ce13..c16e3c76 100644 --- a/src/Aframe/collider-check.js +++ b/src/Aframe/collider-check.js @@ -8,8 +8,9 @@ AFRAME.registerComponent("collider-check", { }, init: function () { - this.el.addEventListener("raycaster-intersection", this.onCollide); this.onCollide = this.onCollide.bind(this); + this.el.addEventListener("raycaster-intersection", this.onCollide); + }, onCollide: function (e) { diff --git a/src/Aframe/cursor-listener.js b/src/Aframe/cursor-listener.js index 02dbd695..c2124545 100644 --- a/src/Aframe/cursor-listener.js +++ b/src/Aframe/cursor-listener.js @@ -4,10 +4,10 @@ AFRAME.registerComponent("cursor-listener", { init: function () { this.dragging = false; - this.el.addEventListener("mousedown", this.onMousedown); + this.el.addEventListener("mousedown", this.onMouseDown); this.el.addEventListener("mousemove ", this.onMouseMove); this.el.addEventListener("mouseup ", this.onMouseUp); - this.onMousedown = this.onMousedown.bind(this); + this.onMouseDown = this.onMouseDown.bind(this); this.onMouseMove = this.onMouseMove.bind(this); this.onMouseUp = this.onMouseUp.bind(this); }, @@ -18,17 +18,17 @@ AFRAME.registerComponent("cursor-listener", { this.el.removeEventListener("mouseup ", this.onMouseUp); }, - onMouseDown: function (evt) { + onMouseDown: function (e) { this.dragging = true; }, - onMouseMove: function (evt) { + onMouseMove: function (e) { if (this.dragging) { // Do something? } }, - onMouseUp: function (evt) { + onMouseUp: function (e) { this.dragging = false; }, }); diff --git a/src/Aframe/model.js b/src/Aframe/model.js index ffca709d..91ec6cf8 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -1,9 +1,9 @@ /* globals AFRAME THREE */ import "./Shader.js"; -let bind = AFRAME.utils.bind; +const bind = AFRAME.utils.bind; -AFRAME.registerComponent("loader", { +AFRAME.registerComponent("model", { schema: { rayCollided: { type: "boolean", default: false }, modelLoaded: { type: "boolean", default: false }, diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index f5f2b112..78a37084 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -5,7 +5,7 @@ import "aframe"; import "../Aframe/arcball-camera"; import "../Aframe/buttons-check"; import "../Aframe/cursor-listener"; -import "../Aframe/loader"; +import "../Aframe/model"; import "../Aframe/render-2d-clipplane"; import "../Aframe/entity-collider-check"; import "../Aframe/collider-check"; @@ -39,8 +39,13 @@ function AframeScene({ ); From 1e4f029a28c80c65259dd779010bfeffe0ccba09 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 20 Jan 2022 16:14:06 -0500 Subject: [PATCH 10/38] refractor: begin cleaning up model.js --- src/Aframe/model.js | 66 ++++++++++++++++----------------------------- 1 file changed, 23 insertions(+), 43 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 91ec6cf8..4c4d5425 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -23,35 +23,39 @@ AFRAME.registerComponent("model", { this.objectPose = new THREE.Matrix4(); this.controllerPose = new THREE.Matrix4(); this.tempMatrix = new THREE.Matrix4(); + this.colorTransferMap = new Map(); + this.group = new THREE.Group(); + this.vrPosition = new THREE.Vector3(0, 0, 0); + this.vrRotation = new THREE.Vector3(0, 0, 0); + this.grabbed = false; + this.colorMapNeedsUpdate = false; + this.sceneHandler = this.el.sceneEl; + this.canvas = this.el.sceneEl.canvas; + + this.currentColorMap = this.data.colorMap; + + // Add event listeners and bind functions this.onCollide = this.onCollide.bind(this); - this.grabbed = false; this.onSelectStart = this.onSelectStart.bind(this); this.onClearCollide = this.onClearCollide.bind(this); - this.loadModel = this.loadModel.bind(this); this.updateTransferTexture = this.updateTransferTexture.bind(this); this.updateColorMapping = this.updateColorMapping.bind(this); + this.loadModel = this.loadModel.bind(this); this.debugScene = this.debugScene.bind(this); - this.updateOpacityData = this.updateOpacityData.bind(this); - this.colorMapNeedsUpdate = false; - this.currentColorMap = this.data.colorMap; - + this.onEnterVR = bind(this.onEnterVR, this); + this.onExitVR = bind(this.onExitVR, this); + this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); + this.el.sceneEl.addEventListener("exit-vr", this.onExitVR); this.el.addEventListener("raycaster-intersected", this.onCollide); this.el.addEventListener( "raycaster-intersected-cleared", this.onClearCollide ); - this.colorTransferMap = new Map(); - - this.group = new THREE.Group(); - - this.isVrModeOn = false; - - this.sceneHandler = this.el.sceneEl; - this.group = new THREE.Group(); - this.controllerHandler = document.getElementById("rhand").object3D; + this.controllerHandler.matrixAutoUpdate = false; + this.controllerHandler.el.addEventListener( "selectstart", this.onSelectStart @@ -64,22 +68,12 @@ AFRAME.registerComponent("model", { this.clipPlaneHandler = document.getElementById("clipplane2D").object3D; - this.controllerHandler.matrixAutoUpdate = false; - this.grabState = - this.controllerHandler.el.getAttribute("buttons-check").grabObject; + let clipplane2D = document.getElementById("clipplane2D"); if (clipplane2D !== undefined) { this.clipplane2DHandler = clipplane2D.object3D; } - // save mesh vr position and rotation on swich between desktop and vr - this.vrPosition = new THREE.Vector3(0, 0, 0); - this.vrRotation = new THREE.Vector3(0, 0, 0); - this.debugVRPos = false; - // bind onenterVR and onexitVR - this.bindMethods(); - this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); - this.el.sceneEl.addEventListener("exit-vr", this.onExitVR); this.opacityControlPoints = [0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]; @@ -153,10 +147,7 @@ AFRAME.registerComponent("model", { } } - this.canvas = this.el.sceneEl.canvas; - - this.printedLog = false; - + // Activate camera let cameraEl = document.querySelector("#camera"); cameraEl.setAttribute("camera", "active", true); }, @@ -195,11 +186,6 @@ AFRAME.registerComponent("model", { } }, - bindMethods: function () { - this.onEnterVR = bind(this.onEnterVR, this); - this.onExitVR = bind(this.onExitVR, this); - }, - onEnterVR: function () {}, onExitVR: function () { @@ -211,7 +197,6 @@ AFRAME.registerComponent("model", { this.vrRotation = this.el.getObject3D("mesh").rotation; this.el.getObject3D("mesh").position.copy(new THREE.Vector3()); this.el.getObject3D("mesh").rotation.set(0, 0, 0); - this.debugVRPos = true; } }, @@ -409,14 +394,14 @@ AFRAME.registerComponent("model", { const scaledColorInit = arrayX[i] * 255; const scaledColorEnd = arrayX[i + 1] * 255; - const scaledAplhaInit = arrayY[i] * 255; + const scaledAlphaInit = arrayY[i] * 255; const scaledAlphaEnd = arrayY[i + 1] * 255; const deltaX = scaledColorEnd - scaledColorInit; for (let j = 1 / deltaX; j < 1; j += 1 / deltaX) { // linear interpolation - this.newAlphaData.push(scaledAplhaInit * (1 - j) + scaledAlphaEnd * j); + this.newAlphaData.push(scaledAlphaInit * (1 - j) + scaledAlphaEnd * j); } } }, @@ -426,11 +411,6 @@ AFRAME.registerComponent("model", { }, tick: function (time, timeDelta) { - // Do something on every scene tick or frame. - if (this.debugVRPos) { - this.debugVRPos = false; - } - const isVrModeActive = this.sceneHandler.is("vr-mode"); if (this.data.modelLoaded) { if (this.clipPlaneListenerHandler !== undefined && !isVrModeActive) { From ff98d5854883ff4f294a8decce744c061bcdb204 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Fri, 21 Jan 2022 10:46:06 -0500 Subject: [PATCH 11/38] style: npm run lint --- src/Aframe/arcball-camera.js | 4 ++-- src/Aframe/collider-check.js | 1 - src/Aframe/entity-collider-check.js | 2 +- src/Aframe/model.js | 4 +--- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/Aframe/arcball-camera.js b/src/Aframe/arcball-camera.js index 47704955..78dee806 100644 --- a/src/Aframe/arcball-camera.js +++ b/src/Aframe/arcball-camera.js @@ -7,7 +7,7 @@ AFRAME.registerComponent("arcball-camera", { dependencies: ["camera"], schema: { - initialPosition: {type: "vec3"}, + initialPosition: { type: "vec3" }, }, init: function () { @@ -54,7 +54,7 @@ AFRAME.registerComponent("arcball-camera", { ) { return; } - + this.controls.enabled = false; if (el.hasAttribute("look-controls")) { el.setAttribute("look-controls", "enabled", true); diff --git a/src/Aframe/collider-check.js b/src/Aframe/collider-check.js index c16e3c76..34a6af8a 100644 --- a/src/Aframe/collider-check.js +++ b/src/Aframe/collider-check.js @@ -10,7 +10,6 @@ AFRAME.registerComponent("collider-check", { init: function () { this.onCollide = this.onCollide.bind(this); this.el.addEventListener("raycaster-intersection", this.onCollide); - }, onCollide: function (e) { diff --git a/src/Aframe/entity-collider-check.js b/src/Aframe/entity-collider-check.js index be0ab6a8..62ac6c77 100644 --- a/src/Aframe/entity-collider-check.js +++ b/src/Aframe/entity-collider-check.js @@ -10,7 +10,7 @@ AFRAME.registerComponent("entity-collider-check", { this.onCollide = this.onCollide.bind(this); }, - remove: function() { + remove: function () { this.el.removeEventListener("raycaster-intersected", this.onCollide); }, diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 4c4d5425..6248a6c8 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -27,7 +27,7 @@ AFRAME.registerComponent("model", { this.group = new THREE.Group(); this.vrPosition = new THREE.Vector3(0, 0, 0); this.vrRotation = new THREE.Vector3(0, 0, 0); - this.grabbed = false; + this.grabbed = false; this.colorMapNeedsUpdate = false; this.sceneHandler = this.el.sceneEl; this.canvas = this.el.sceneEl.canvas; @@ -68,13 +68,11 @@ AFRAME.registerComponent("model", { this.clipPlaneHandler = document.getElementById("clipplane2D").object3D; - let clipplane2D = document.getElementById("clipplane2D"); if (clipplane2D !== undefined) { this.clipplane2DHandler = clipplane2D.object3D; } - this.opacityControlPoints = [0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]; let jet_values = [ From 4ec6ca4973c08120341d3416cecf99a8a050efc7 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Fri, 21 Jan 2022 10:48:02 -0500 Subject: [PATCH 12/38] build: upgrade packages --- package-lock.json | 48 ++++++++++++++++++------------------- src/Aframe/buttons-check.js | 2 ++ 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 410fd92f..740b881f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5912,9 +5912,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001300", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz", - "integrity": "sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==", + "version": "1.0.30001301", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001301.tgz", + "integrity": "sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==", "dev": true, "funding": { "type": "opencollective", @@ -7998,9 +7998,9 @@ } }, "node_modules/eslint-plugin-testing-library": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.0.3.tgz", - "integrity": "sha512-tKZ9G+HnIOnYAhXeoBCiAT8LOdU3m1VquBTKsBW/5zAaB30vq7gC60DIayPfMJt8EZBlqPVzGqSN57sIFmTunQ==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.0.4.tgz", + "integrity": "sha512-zA/NfAENCsJXujvwwiap5gsqLp2U6X7m2XA5nOksl4zzb6GpUmRNAleCll58rEP0brFVj7DZBprlIlMGIhoC7Q==", "dev": true, "dependencies": { "@typescript-eslint/experimental-utils": "^5.9.0" @@ -16093,9 +16093,9 @@ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" }, "node_modules/resolve": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz", - "integrity": "sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==", + "version": "1.21.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.1.tgz", + "integrity": "sha512-lfEImVbnolPuaSZuLQ52cAxPBHeI77sPwCOWRdy12UG/CNa8an7oBHH1R+Fp1/mUqSJi4c8TIP6FOIPSZAUrEQ==", "dev": true, "dependencies": { "is-core-module": "^2.8.0", @@ -16243,9 +16243,9 @@ } }, "node_modules/rollup": { - "version": "2.64.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.64.0.tgz", - "integrity": "sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==", + "version": "2.65.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.65.0.tgz", + "integrity": "sha512-ohZVYrhtVMTqqeqH26sngfMiyGDg6gCUReOsoflXvYpzUkDHp8sVG8F9FQxjs72OfnLWpXP2nNNqQ9I0vkRovA==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -23834,9 +23834,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001300", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz", - "integrity": "sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==", + "version": "1.0.30001301", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001301.tgz", + "integrity": "sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==", "dev": true }, "cardboard-vr-display": { @@ -25506,9 +25506,9 @@ "requires": {} }, "eslint-plugin-testing-library": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.0.3.tgz", - "integrity": "sha512-tKZ9G+HnIOnYAhXeoBCiAT8LOdU3m1VquBTKsBW/5zAaB30vq7gC60DIayPfMJt8EZBlqPVzGqSN57sIFmTunQ==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.0.4.tgz", + "integrity": "sha512-zA/NfAENCsJXujvwwiap5gsqLp2U6X7m2XA5nOksl4zzb6GpUmRNAleCll58rEP0brFVj7DZBprlIlMGIhoC7Q==", "dev": true, "requires": { "@typescript-eslint/experimental-utils": "^5.9.0" @@ -31371,9 +31371,9 @@ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" }, "resolve": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz", - "integrity": "sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==", + "version": "1.21.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.1.tgz", + "integrity": "sha512-lfEImVbnolPuaSZuLQ52cAxPBHeI77sPwCOWRdy12UG/CNa8an7oBHH1R+Fp1/mUqSJi4c8TIP6FOIPSZAUrEQ==", "dev": true, "requires": { "is-core-module": "^2.8.0", @@ -31469,9 +31469,9 @@ } }, "rollup": { - "version": "2.64.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.64.0.tgz", - "integrity": "sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==", + "version": "2.65.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.65.0.tgz", + "integrity": "sha512-ohZVYrhtVMTqqeqH26sngfMiyGDg6gCUReOsoflXvYpzUkDHp8sVG8F9FQxjs72OfnLWpXP2nNNqQ9I0vkRovA==", "dev": true, "requires": { "fsevents": "~2.3.2" diff --git a/src/Aframe/buttons-check.js b/src/Aframe/buttons-check.js index 1c4aba55..d9591a4b 100644 --- a/src/Aframe/buttons-check.js +++ b/src/Aframe/buttons-check.js @@ -1,5 +1,7 @@ /* globals AFRAME */ + +// TODO: Change vars to triggerDown and gripDown AFRAME.registerComponent("buttons-check", { schema: { clipPlane: { type: "boolean", default: false }, From 74c728e743dcbbe7b657aacda56bbc9f634311bf Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Mon, 24 Jan 2022 16:15:49 -0500 Subject: [PATCH 13/38] refractor: use getMesh helper functions --- package-lock.json | 4 +- src/Aframe/arcball-camera.js | 8 +- src/Aframe/buttons-check.js | 1 - src/Aframe/model.js | 554 +++++++++++++++++------------------ 4 files changed, 276 insertions(+), 291 deletions(-) diff --git a/package-lock.json b/package-lock.json index 740b881f..286a5cae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-volume-viewer", - "version": "0.2.1", + "version": "0.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-volume-viewer", - "version": "0.2.1", + "version": "0.3.0", "license": "MIT", "dependencies": { "@reach/listbox": "^0.16.2", diff --git a/src/Aframe/arcball-camera.js b/src/Aframe/arcball-camera.js index 78dee806..3f0c601a 100644 --- a/src/Aframe/arcball-camera.js +++ b/src/Aframe/arcball-camera.js @@ -27,7 +27,7 @@ AFRAME.registerComponent("arcball-camera", { ); this.controls.rotateSpeed = 1.0; this.controls.zoomSpeed = 1.2; - this.controls.panSpeed = 0.8; + this.controls.panSpeed = 0.2; // Set the pointer to grab/grabbing when over the vr canvas const aCanvas = document.querySelector(".a-canvas"); @@ -66,12 +66,6 @@ AFRAME.registerComponent("arcball-camera", { } }, - update: function (oldData) { - this.controls.rotateSpeed = 1.0; - this.controls.zoomSpeed = 1.2; - this.controls.panSpeed = 0.8; - }, - onExitVR: function () { const el = this.el; diff --git a/src/Aframe/buttons-check.js b/src/Aframe/buttons-check.js index d9591a4b..ab259ae4 100644 --- a/src/Aframe/buttons-check.js +++ b/src/Aframe/buttons-check.js @@ -1,6 +1,5 @@ /* globals AFRAME */ - // TODO: Change vars to triggerDown and gripDown AFRAME.registerComponent("buttons-check", { schema: { diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 44ebe946..827b412d 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -25,29 +25,32 @@ AFRAME.registerComponent("model", { this.objectPose = new THREE.Matrix4(); this.controllerPose = new THREE.Matrix4(); this.tempMatrix = new THREE.Matrix4(); - this.colorTransferMap = new Map(); - this.group = new THREE.Group(); this.vrPosition = new THREE.Vector3(0, 0, 0); this.vrRotation = new THREE.Vector3(0, 0, 0); + this.group = new THREE.Group(); + this.colorTransferMap = new Map(); + this.newAlphaData = []; this.grabbed = false; this.colorMapNeedsUpdate = false; this.sceneHandler = this.el.sceneEl; this.canvas = this.el.sceneEl.canvas; + // TODO: Leave as this.data.colorMap this.currentColorMap = this.data.colorMap; + // Get other elements + this.controllerHandler = document.getElementById("rhand").object3D; + this.controllerHandler.matrixAutoUpdate = false; + this.clipPlaneListenerHandler = document.getElementById( + "clipplane2DListener" + ).object3D; + this.clip2DPlaneRendered = false; + let clipplane2D = document.getElementById("clipplane2D"); + this.clipPlaneHandler = clipplane2D.object3D; + if (clipplane2D !== undefined) + this.clipplane2DHandler = clipplane2D.object3D; + // Add event listeners and bind functions - this.onCollide = this.onCollide.bind(this); - this.onSelectStart = this.onSelectStart.bind(this); - this.onClearCollide = this.onClearCollide.bind(this); - this.updateTransferTexture = this.updateTransferTexture.bind(this); - this.updateDataChannel = this.updateDataChannel.bind(this); - this.updateColorMapping = this.updateColorMapping.bind(this); - this.loadModel = this.loadModel.bind(this); - this.debugScene = this.debugScene.bind(this); - this.updateOpacityData = this.updateOpacityData.bind(this); - this.onEnterVR = bind(this.onEnterVR, this); - this.onExitVR = bind(this.onExitVR, this); this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); this.el.sceneEl.addEventListener("exit-vr", this.onExitVR); this.el.addEventListener("raycaster-intersected", this.onCollide); @@ -55,105 +58,272 @@ AFRAME.registerComponent("model", { "raycaster-intersected-cleared", this.onClearCollide ); + this.onEnterVR = bind(this.onEnterVR, this); + this.onExitVR = bind(this.onExitVR, this); + this.onCollide = this.onCollide.bind(this); + this.onClearCollide = this.onClearCollide.bind(this); + this.getMesh = this.getMesh.bind(this); + this.loadModel = this.loadModel.bind(this); + this.updateTransferTexture = this.updateTransferTexture.bind(this); + this.updateDataChannel = this.updateDataChannel.bind(this); + this.updateColorMapping = this.updateColorMapping.bind(this); + this.updateOpacityData = this.updateOpacityData.bind(this); - this.controllerHandler = document.getElementById("rhand").object3D; - this.controllerHandler.matrixAutoUpdate = false; - - this.controllerHandler.el.addEventListener( - "selectstart", - this.onSelectStart - ); - - this.clipPlaneListenerHandler = document.getElementById( - "clipplane2DListener" - ).object3D; - this.clip2DPlaneRendered = false; + // NOT SURE WHAT THIS DOES + // this.opacityControlPoints = [0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]; + // let jet_values = [ + // [0, 0, 0.5], + // [0, 0, 1], + // [0, 0.5, 1], + // [0, 1, 1], + // [0.5, 1, 0.5], + // [1, 1, 0], + // [1, 0.5, 0], + // [1, 0, 0], + // [0.5, 0, 0], + // ]; + // const pData = []; + // this.alphaData = []; + + // const indices = []; + // const zeroArray = [0, 0, 0, 0]; + + // //setting up control points + // for (let i = 0; i < 9; i++) { + // const index = i * 28; + // while (pData.length < index) { + // pData.push(zeroArray); + // } + + // pData.push([ + // jet_values[i][0] * 255, + // jet_values[i][1] * 255, + // jet_values[i][2] * 255, + // this.opacityControlPoints[i] * 255, + // ]); + // indices.push(index); + // } + + // //interpolation between opacity control points + // for (let j = 0; j < 9 - 1; j++) { + // const dDataA = pData[indices[j + 1]][3] - pData[indices[j]][3]; + // const dIndex = indices[j + 1] - indices[j]; + // const dDataIncA = dDataA / dIndex; + // for (let idx = indices[j] + 1; idx < indices[j + 1]; idx++) { + // let alpha = pData[idx - 1][3] + dDataIncA; + // this.alphaData[idx] = alpha; + // } + // } + + // // interpolation between colors control points + // for (let j = 0; j < 9 - 1; j++) { + // const dDataR = pData[indices[j + 1]][0] - pData[indices[j]][0]; + // const dDataG = pData[indices[j + 1]][1] - pData[indices[j]][1]; + // const dDataB = pData[indices[j + 1]][2] - pData[indices[j]][2]; + // const dDataA = pData[indices[j + 1]][3] - pData[indices[j]][3]; + // const dIndex = indices[j + 1] - indices[j]; + + // const dDataIncR = dDataR / dIndex; + // const dDataIncG = dDataG / dIndex; + // const dDataIncB = dDataB / dIndex; + // const dDataIncA = dDataA / dIndex; + + // for (let idx = indices[j] + 1; idx < indices[j + 1]; idx++) { + // const alpha = pData[idx - 1][3] + dDataIncA; + // this.alphaData[idx] = alpha; + // pData[idx] = [ + // pData[idx - 1][0] + dDataIncR, + // pData[idx - 1][1] + dDataIncG, + // pData[idx - 1][2] + dDataIncB, + // alpha, + // ]; + // } + // } - this.clipPlaneHandler = document.getElementById("clipplane2D").object3D; + // Activate camera + let cameraEl = document.querySelector("#camera"); + cameraEl.setAttribute("camera", "active", true); + }, - let clipplane2D = document.getElementById("clipplane2D"); - if (clipplane2D !== undefined) { - this.clipplane2DHandler = clipplane2D.object3D; + update: function (oldData) { + if (oldData === undefined) { + return; } - this.opacityControlPoints = [0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]; - - let jet_values = [ - [0, 0, 0.5], - [0, 0, 1], - [0, 0.5, 1], - [0, 1, 1], - [0.5, 1, 0.5], - [1, 1, 0], - [1, 0.5, 0], - [1, 0, 0], - [0.5, 0, 0], - ]; - - const pData = []; - this.alphaData = []; - this.newAlphaData = []; - const indices = []; - const zeroArray = [0, 0, 0, 0]; - - //setting up control points - for (let i = 0; i < 9; i++) { - const index = i * 28; - while (pData.length < index) { - pData.push(zeroArray); + if (this.data.useTransferFunction) { + // this part updates the opacity control points + //comparing javascript arrays + if ( + (this.data.alphaXDataArray !== undefined && + JSON.stringify(oldData.alphaXDataArray) !== + JSON.stringify(this.data.alphaXDataArray)) || + (this.data.alphaYDataArray !== undefined && + JSON.stringify(oldData.alphaYDataArray) !== + JSON.stringify(this.data.alphaYDataArray)) + ) { + this.updateOpacityData( + this.data.alphaXDataArray, + this.data.alphaYDataArray + ); + this.updateTransferTexture(); + } else if (oldData.colorMap !== this.data.colorMap) { + this.currentColorMap = this.data.colorMap; + this.updateColorMapping(); } + } else { + // Data using channels + if ( + this.data.channel !== undefined && + oldData.channel !== this.data.channel + ) { + this.updateDataChannel(); + } + } - pData.push([ - jet_values[i][0] * 255, - jet_values[i][1] * 255, - jet_values[i][2] * 255, - this.opacityControlPoints[i] * 255, - ]); - indices.push(index); + if (oldData.path !== this.data.path) { + this.loadModel(); } + }, + + tick: function (time, timeDelta) { + const isVrModeActive = this.sceneHandler.is("vr-mode"); + if (this.data.modelLoaded) { + if (this.clipPlaneListenerHandler !== undefined && !isVrModeActive) { + if ( + this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") + .activateClipPlane && + !this.clip2DPlaneRendered + ) { + this.clip2DPlaneRendered = true; + } else if ( + !this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") + .activateClipPlane && + this.clip2DPlaneRendered + ) { + this.clip2DPlaneRendered = false; - //interpolation between opacity control points - for (let j = 0; j < 9 - 1; j++) { - const dDataA = pData[indices[j + 1]][3] - pData[indices[j]][3]; - const dIndex = indices[j + 1] - indices[j]; - const dDataIncA = dDataA / dIndex; - for (let idx = indices[j] + 1; idx < indices[j + 1]; idx++) { - let alpha = pData[idx - 1][3] + dDataIncA; - this.alphaData[idx] = alpha; + if (this.getMesh() !== undefined) { + const material = this.getMesh().material; + material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); + material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); + } + } + + if (this.clip2DPlaneRendered) { + if (this.getMesh() !== undefined) { + const material = this.getMesh().material; + + if (material !== undefined) { + const sliceX = this.clipPlaneListenerHandler.el.getAttribute( + "render-2d-clipplane" + ).clipX; + const sliceY = this.clipPlaneListenerHandler.el.getAttribute( + "render-2d-clipplane" + ).clipY; + const sliceZ = this.clipPlaneListenerHandler.el.getAttribute( + "render-2d-clipplane" + ).clipZ; + + material.uniforms.box_min.value = new THREE.Vector3( + sliceX.x, + sliceY.x, + sliceZ.x + ); + material.uniforms.box_max.value = new THREE.Vector3( + sliceX.y, + sliceY.y, + sliceZ.y + ); + } + } + } + } else if (this.controllerHandler !== undefined && isVrModeActive) { + if ( + !this.controllerHandler.el.getAttribute("buttons-check").grabObject && + this.grabbed + ) { + this.el + .getObject3D("mesh") + .matrix.premultiply(this.controllerHandler.matrixWorld); + this.el + .getObject3D("mesh") + .matrix.decompose( + this.getMesh().position, + this.getMesh().quaternion, + this.getMesh().scale + ); + this.el.object3D.add(this.getMesh()); + + this.grabbed = false; + } + + // grab mesh + if ( + this.controllerHandler.el.getAttribute("buttons-check").grabObject && + this.data.rayCollided && + !this.grabbed + ) { + const inverseControllerPos = new THREE.Matrix4(); + inverseControllerPos.getInverse(this.controllerHandler.matrixWorld); + this.getMesh().matrix.premultiply(inverseControllerPos); + this.el + .getObject3D("mesh") + .matrix.decompose( + this.getMesh().position, + this.getMesh().quaternion, + this.getMesh().scale + ); + this.controllerHandler.add(this.getMesh()); + + this.grabbed = true; + } + + this.updateMeshClipMatrix(this.controllerHandler.matrixWorld); } } - // interpolation between colors control points - for (let j = 0; j < 9 - 1; j++) { - const dDataR = pData[indices[j + 1]][0] - pData[indices[j]][0]; - const dDataG = pData[indices[j + 1]][1] - pData[indices[j]][1]; - const dDataB = pData[indices[j + 1]][2] - pData[indices[j]][2]; - const dDataA = pData[indices[j + 1]][3] - pData[indices[j]][3]; - const dIndex = indices[j + 1] - indices[j]; - - const dDataIncR = dDataR / dIndex; - const dDataIncG = dDataG / dIndex; - const dDataIncB = dDataB / dIndex; - const dDataIncA = dDataA / dIndex; - - for (let idx = indices[j] + 1; idx < indices[j + 1]; idx++) { - const alpha = pData[idx - 1][3] + dDataIncA; - this.alphaData[idx] = alpha; - pData[idx] = [ - pData[idx - 1][0] + dDataIncR, - pData[idx - 1][1] + dDataIncG, - pData[idx - 1][2] + dDataIncB, - alpha, - ]; - } + if (this.getMesh() !== undefined) { + this.data.meshPosition = this.getMesh().position; } + }, - // Activate camera - let cameraEl = document.querySelector("#camera"); - cameraEl.setAttribute("camera", "active", true); + remove: function () { + this.el.sceneEl.removeEventListener("enter-vr", this.onEnterVR); + this.el.sceneEl.removeEventListener("exit-vr", this.onExitVR); + this.el.removeEventListener("raycaster-intersected", this.onCollide); + this.el.removeEventListener( + "raycaster-intersected-cleared", + this.onClearCollide + ); + }, + + /** EVENT LISTENER FUNCTIONS */ + + onExitVR: function () { + if (this.getMesh() !== undefined) { + this.data.meshPosition.x = this.getMesh().position.x; + this.data.meshPosition.y = this.getMesh().position.y; + this.data.meshPosition.z = this.getMesh().position.z; + + this.vrRotation = this.getMesh().rotation; + this.getMesh().position.copy(new THREE.Vector3()); + this.getMesh().rotation.set(0, 0, 0); + } + }, + + onCollide: function (event) { + this.data.rayCollided = true; }, - debugScene: function (evt) {}, + onClearCollide: function (event) { + this.data.rayCollided = false; + }, + + /** HELPER FUNCTIONS */ + + getMesh: function () { + return this.el.getObject3D("mesh"); + }, updateTransferTexture: function () { if (this.colorTransferMap.has(this.currentColorMap)) { @@ -176,8 +346,8 @@ AFRAME.registerComponent("model", { ); transferTexture.needsUpdate = true; - if (this.el.getObject3D("mesh") !== undefined) { - let material = this.el.getObject3D("mesh").material; + if (this.getMesh() !== undefined) { + let material = this.getMesh().material; // Shader script uses channel 6 for color mapping material.uniforms.channel.value = 6; material.uniforms.u_lut.value = transferTexture; @@ -189,35 +359,16 @@ AFRAME.registerComponent("model", { }, updateDataChannel: function () { - if (this.el.getObject3D("mesh") !== undefined) { - let material = this.el.getObject3D("mesh").material; + if (this.getMesh() !== undefined) { + let material = this.getMesh().material; material.uniforms.channel.value = this.data.channel; material.uniforms.useLut.value = this.data.useTransferFunction; material.needsUpdate = true; } }, - bindMethods: function () { - this.onEnterVR = bind(this.onEnterVR, this); - this.onExitVR = bind(this.onExitVR, this); - }, - - onEnterVR: function () {}, - - onExitVR: function () { - if (this.el.getObject3D("mesh") !== undefined) { - this.data.meshPosition.x = this.el.getObject3D("mesh").position.x; - this.data.meshPosition.y = this.el.getObject3D("mesh").position.y; - this.data.meshPosition.z = this.el.getObject3D("mesh").position.z; - - this.vrRotation = this.el.getObject3D("mesh").rotation; - this.el.getObject3D("mesh").position.copy(new THREE.Vector3()); - this.el.getObject3D("mesh").rotation.set(0, 0, 0); - } - }, - loadModel: function () { - let currentVolume = this.el.getObject3D("mesh"); + let currentVolume = this.getMesh(); const { x_spacing, y_spacing, z_spacing, slices, path } = this.data; if (currentVolume !== undefined) { //clear mesh @@ -324,19 +475,6 @@ AFRAME.registerComponent("model", { } }, - onCollide: function (event) { - this.data.rayCollided = true; - }, - - onClearCollide: function (event) { - this.data.rayCollided = false; - }, - onSelectStart: function (event) {}, - - remove: function () { - // Do something the component or its entity is detached. - }, - updateColorMapping: function () { if (!this.colorTransferMap.has(this.currentColorMap)) { const colorCanvas = document.createElement("canvas"); @@ -384,46 +522,6 @@ AFRAME.registerComponent("model", { } }, - update: function (oldData) { - if (oldData === undefined) { - return; - } - - if (this.data.useTransferFunction) { - // this part updates the opacity control points - //comparing javascript arrays - if ( - (this.data.alphaXDataArray !== undefined && - JSON.stringify(oldData.alphaXDataArray) !== - JSON.stringify(this.data.alphaXDataArray)) || - (this.data.alphaYDataArray !== undefined && - JSON.stringify(oldData.alphaYDataArray) !== - JSON.stringify(this.data.alphaYDataArray)) - ) { - this.updateOpacityData( - this.data.alphaXDataArray, - this.data.alphaYDataArray - ); - this.updateTransferTexture(); - } else if (oldData.colorMap !== this.data.colorMap) { - this.currentColorMap = this.data.colorMap; - this.updateColorMapping(); - } - } else { - // Data using channels - if ( - this.data.channel !== undefined && - oldData.channel !== this.data.channel - ) { - this.updateDataChannel(); - } - } - - if (oldData.path !== this.data.path) { - this.loadModel(); - } - }, - updateOpacityData: function (arrayX, arrayY) { this.newAlphaData = []; @@ -443,116 +541,10 @@ AFRAME.registerComponent("model", { } }, - getMesh: function () { - return this.el.getObject3D("mesh"); - }, - - tick: function (time, timeDelta) { - const isVrModeActive = this.sceneHandler.is("vr-mode"); - if (this.data.modelLoaded) { - if (this.clipPlaneListenerHandler !== undefined && !isVrModeActive) { - if ( - this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") - .activateClipPlane && - !this.clip2DPlaneRendered - ) { - this.clip2DPlaneRendered = true; - } else if ( - !this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") - .activateClipPlane && - this.clip2DPlaneRendered - ) { - this.clip2DPlaneRendered = false; - - if (this.el.getObject3D("mesh") !== undefined) { - const material = this.el.getObject3D("mesh").material; - material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); - material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); - } - } - - if (this.clip2DPlaneRendered) { - if (this.el.getObject3D("mesh") !== undefined) { - const material = this.el.getObject3D("mesh").material; - - if (material !== undefined) { - const sliceX = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).clipX; - const sliceY = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).clipY; - const sliceZ = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).clipZ; - - material.uniforms.box_min.value = new THREE.Vector3( - sliceX.x, - sliceY.x, - sliceZ.x - ); - material.uniforms.box_max.value = new THREE.Vector3( - sliceX.y, - sliceY.y, - sliceZ.y - ); - } - } - } - } else if (this.controllerHandler !== undefined && isVrModeActive) { - if ( - !this.controllerHandler.el.getAttribute("buttons-check").grabObject && - this.grabbed - ) { - this.el - .getObject3D("mesh") - .matrix.premultiply(this.controllerHandler.matrixWorld); - this.el - .getObject3D("mesh") - .matrix.decompose( - this.el.getObject3D("mesh").position, - this.el.getObject3D("mesh").quaternion, - this.el.getObject3D("mesh").scale - ); - this.el.object3D.add(this.el.getObject3D("mesh")); - - this.grabbed = false; - } - - // grab mesh - if ( - this.controllerHandler.el.getAttribute("buttons-check").grabObject && - this.data.rayCollided && - !this.grabbed - ) { - const inverseControllerPos = new THREE.Matrix4(); - inverseControllerPos.getInverse(this.controllerHandler.matrixWorld); - this.el.getObject3D("mesh").matrix.premultiply(inverseControllerPos); - this.el - .getObject3D("mesh") - .matrix.decompose( - this.el.getObject3D("mesh").position, - this.el.getObject3D("mesh").quaternion, - this.el.getObject3D("mesh").scale - ); - this.controllerHandler.add(this.el.getObject3D("mesh")); - - this.grabbed = true; - } - - this.updateMeshClipMatrix(this.controllerHandler.matrixWorld); - } - } - - if (this.el.getObject3D("mesh") !== undefined) { - this.data.meshPosition = this.el.getObject3D("mesh").position; - } - }, - updateMeshClipMatrix: function (currentSpaceClipMatrix) { - const volumeMatrix = this.el.getObject3D("mesh").matrixWorld; + const volumeMatrix = this.getMesh().matrixWorld; //material for setting the clipPlane and clipping value - const material = this.el.getObject3D("mesh").material; + const material = this.getMesh().material; //scalematrix for zscaling const scaleMatrix = new THREE.Matrix4(); From 4431444e59e0e777d6c920de6ae9e9e83b3b48cc Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Mon, 24 Jan 2022 16:51:35 -0500 Subject: [PATCH 14/38] refractor: parse spacing as json --- src/Aframe/arcball-camera.js | 2 +- src/Aframe/model.js | 63 +++++++++++++++++++--------------- src/components/AframeScene.jsx | 8 +++-- 3 files changed, 41 insertions(+), 32 deletions(-) diff --git a/src/Aframe/arcball-camera.js b/src/Aframe/arcball-camera.js index 3f0c601a..e0262e19 100644 --- a/src/Aframe/arcball-camera.js +++ b/src/Aframe/arcball-camera.js @@ -27,7 +27,7 @@ AFRAME.registerComponent("arcball-camera", { ); this.controls.rotateSpeed = 1.0; this.controls.zoomSpeed = 1.2; - this.controls.panSpeed = 0.2; + this.controls.panSpeed = 0.8; // Set the pointer to grab/grabbing when over the vr canvas const aCanvas = document.querySelector(".a-canvas"); diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 827b412d..a2c76677 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -5,17 +5,26 @@ const bind = AFRAME.utils.bind; AFRAME.registerComponent("model", { schema: { + // TODO: Move these to init rayCollided: { type: "boolean", default: false }, modelLoaded: { type: "boolean", default: false }, meshPosition: { type: "vec3", default: { x: 0, y: 0, z: 0 } }, + + // TODO: Custom parser for object of arrays alphaXDataArray: { type: "array" }, alphaYDataArray: { type: "array" }, colorMap: { type: "string", default: "" }, path: { type: "string", default: "" }, slices: { type: "number", default: 55 }, - x_spacing: { type: "number", default: 2.0 }, - y_spacing: { type: "number", default: 2.0 }, - z_spacing: { type: "number", default: 1.0 }, + // x_spacing: { type: "number", default: 2.0 }, + // y_spacing: { type: "number", default: 2.0 }, + // z_spacing: { type: "number", default: 1.0 }, + // spacing: { type: "vec3", default: { x: 1, y: 1, z: 1 } }, + spacing: { + parse: JSON.parse, + // stringify: JSON.stringify, + default: { x: 1, y: 1, z: 1 }, + }, useTransferFunction: { type: "boolean", default: false }, channel: { type: "number", default: 1 }, intensity: { type: "number", default: 1.0 }, @@ -51,13 +60,6 @@ AFRAME.registerComponent("model", { this.clipplane2DHandler = clipplane2D.object3D; // Add event listeners and bind functions - this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); - this.el.sceneEl.addEventListener("exit-vr", this.onExitVR); - this.el.addEventListener("raycaster-intersected", this.onCollide); - this.el.addEventListener( - "raycaster-intersected-cleared", - this.onClearCollide - ); this.onEnterVR = bind(this.onEnterVR, this); this.onExitVR = bind(this.onExitVR, this); this.onCollide = this.onCollide.bind(this); @@ -68,6 +70,13 @@ AFRAME.registerComponent("model", { this.updateDataChannel = this.updateDataChannel.bind(this); this.updateColorMapping = this.updateColorMapping.bind(this); this.updateOpacityData = this.updateOpacityData.bind(this); + this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); + this.el.sceneEl.addEventListener("exit-vr", this.onExitVR); + this.el.addEventListener("raycaster-intersected", this.onCollide); + this.el.addEventListener( + "raycaster-intersected-cleared", + this.onClearCollide + ); // NOT SURE WHAT THIS DOES // this.opacityControlPoints = [0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]; @@ -146,10 +155,6 @@ AFRAME.registerComponent("model", { }, update: function (oldData) { - if (oldData === undefined) { - return; - } - if (this.data.useTransferFunction) { // this part updates the opacity control points //comparing javascript arrays @@ -369,7 +374,7 @@ AFRAME.registerComponent("model", { loadModel: function () { let currentVolume = this.getMesh(); - const { x_spacing, y_spacing, z_spacing, slices, path } = this.data; + const { spacing, slices, path } = this.data; if (currentVolume !== undefined) { //clear mesh this.el.removeObject3D("mesh"); @@ -393,12 +398,18 @@ AFRAME.registerComponent("model", { path, function (texture) { const dim = Math.ceil(Math.sqrt(slices)); - const spacing = [x_spacing, y_spacing, z_spacing]; - + // const spacing = [x_spacing, y_spacing, z_spacing]; + + // const volumeScale = [ + // 1.0 / ((texture.image.width / dim) * spacing[0]), + // 1.0 / ((texture.image.height / dim) * spacing[1]), + // 1.0 / (slices * spacing[2]), + // ]; + // console.log(spacing); const volumeScale = [ - 1.0 / ((texture.image.width / dim) * spacing[0]), - 1.0 / ((texture.image.height / dim) * spacing[1]), - 1.0 / (slices * spacing[2]), + 1.0 / ((texture.image.width / dim) * spacing.x), + 1.0 / ((texture.image.height / dim) * spacing.y), + 1.0 / (slices * spacing.z), ]; const zScale = volumeScale[0] / volumeScale[2]; @@ -455,17 +466,13 @@ AFRAME.registerComponent("model", { // Mesh const geometry = new THREE.BoxGeometry(1, 1, 1); - el.setObject3D("mesh", new THREE.Mesh(geometry, material)); data.modelLoaded = true; material.needsUpdate = true; - //this steps needs the model to be uploaded first - if (useTransferFunction) { - updateColorMapping(); - } else { - updateDataChannel(); - } + // this steps needs the model to be uploaded first + if (useTransferFunction) updateColorMapping(); + else updateDataChannel(); }, function () {}, function () { @@ -556,7 +563,7 @@ AFRAME.registerComponent("model", { //inverse of the clipMatrix const currentSpaceClipMatrix_inverse = new THREE.Matrix4(); - currentSpaceClipMatrix_inverse.getInverse(currentSpaceClipMatrix); + currentSpaceClipMatrix_inverse.copy(currentSpaceClipMatrix).invert(); //outputmatrix - controller_inverse * volume * scale * translation const clipMatrix = new THREE.Matrix4(); diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index ca8fde39..36d4c715 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -81,9 +81,11 @@ function AframeScene({ colorMap: colorMap.path, path: model.path, slices: model.slices, - x_spacing: model.spacing.x, - y_spacing: model.spacing.y, - z_spacing: model.spacing.z, + // x_spacing: model.spacing.x, + // y_spacing: model.spacing.y, + // z_spacing: model.spacing.z, + // spacing: model.spacing, + spacing: JSON.stringify(model.spacing), useTransferFunction, channel: model.channel, intensity: model.intensity, From a7b052ce1d743d53f4648fa517ee7aaabab7df34 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Mon, 24 Jan 2022 17:41:34 -0500 Subject: [PATCH 15/38] refractor: remove unused variables in model.js --- src/Aframe/Shader.js | 2 +- src/Aframe/model.js | 314 ++++++++++++++------------------- src/components/AframeScene.jsx | 13 +- 3 files changed, 142 insertions(+), 187 deletions(-) diff --git a/src/Aframe/Shader.js b/src/Aframe/Shader.js index 3906b7ca..88e46322 100644 --- a/src/Aframe/Shader.js +++ b/src/Aframe/Shader.js @@ -1,6 +1,6 @@ /* globals THREE */ -THREE.ShaderLib["ccvLibVolumeRenderShader"] = { +THREE.ShaderLib["ModelShader"] = { uniforms: { slice: { value: 1.0 }, dim: { value: 1.0 }, diff --git a/src/Aframe/model.js b/src/Aframe/model.js index a2c76677..21eb50cb 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -5,42 +5,30 @@ const bind = AFRAME.utils.bind; AFRAME.registerComponent("model", { schema: { - // TODO: Move these to init - rayCollided: { type: "boolean", default: false }, - modelLoaded: { type: "boolean", default: false }, - meshPosition: { type: "vec3", default: { x: 0, y: 0, z: 0 } }, - - // TODO: Custom parser for object of arrays - alphaXDataArray: { type: "array" }, - alphaYDataArray: { type: "array" }, colorMap: { type: "string", default: "" }, + transferFunction: { + parse: JSON.parse, + default: [ + { x: 0, y: 0 }, + { x: 1, y: 1 }, + ], + }, + useTransferFunction: { type: "boolean", default: false }, + channel: { type: "number", default: 1 }, + intensity: { type: "number", default: 1.0 }, path: { type: "string", default: "" }, slices: { type: "number", default: 55 }, - // x_spacing: { type: "number", default: 2.0 }, - // y_spacing: { type: "number", default: 2.0 }, - // z_spacing: { type: "number", default: 1.0 }, - // spacing: { type: "vec3", default: { x: 1, y: 1, z: 1 } }, spacing: { parse: JSON.parse, - // stringify: JSON.stringify, default: { x: 1, y: 1, z: 1 }, }, - useTransferFunction: { type: "boolean", default: false }, - channel: { type: "number", default: 1 }, - intensity: { type: "number", default: 1.0 }, }, init: function () { - this.objectPose = new THREE.Matrix4(); - this.controllerPose = new THREE.Matrix4(); - this.tempMatrix = new THREE.Matrix4(); - this.vrPosition = new THREE.Vector3(0, 0, 0); - this.vrRotation = new THREE.Vector3(0, 0, 0); - this.group = new THREE.Group(); this.colorTransferMap = new Map(); this.newAlphaData = []; + this.rayCollided = false; this.grabbed = false; - this.colorMapNeedsUpdate = false; this.sceneHandler = this.el.sceneEl; this.canvas = this.el.sceneEl.canvas; @@ -155,140 +143,129 @@ AFRAME.registerComponent("model", { }, update: function (oldData) { - if (this.data.useTransferFunction) { - // this part updates the opacity control points - //comparing javascript arrays - if ( - (this.data.alphaXDataArray !== undefined && - JSON.stringify(oldData.alphaXDataArray) !== - JSON.stringify(this.data.alphaXDataArray)) || - (this.data.alphaYDataArray !== undefined && - JSON.stringify(oldData.alphaYDataArray) !== - JSON.stringify(this.data.alphaYDataArray)) - ) { - this.updateOpacityData( - this.data.alphaXDataArray, - this.data.alphaYDataArray - ); - this.updateTransferTexture(); - } else if (oldData.colorMap !== this.data.colorMap) { - this.currentColorMap = this.data.colorMap; - this.updateColorMapping(); - } - } else { - // Data using channels - if ( - this.data.channel !== undefined && - oldData.channel !== this.data.channel - ) { - this.updateDataChannel(); - } - } - + // Update model if (oldData.path !== this.data.path) { this.loadModel(); } + + // Update color map + if (oldData.colorMap !== this.data.colorMap) { + this.currentColorMap = this.data.colorMap; + this.updateColorMapping(); + } + + // Update transfer function + if ( + this.data.useTransferFunction && + "transferFunction" in this.data && + oldData.transferFunction !== this.data.transferFunction + ) { + this.updateOpacityData(this.data.transferFunction); + this.updateTransferTexture(); + } + + // Update channels + if ( + !this.data.useTransferFunction && + this.data.channel !== undefined && + oldData.channel !== this.data.channel + ) { + this.updateDataChannel(); + } }, tick: function (time, timeDelta) { const isVrModeActive = this.sceneHandler.is("vr-mode"); - if (this.data.modelLoaded) { - if (this.clipPlaneListenerHandler !== undefined && !isVrModeActive) { - if ( - this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") - .activateClipPlane && - !this.clip2DPlaneRendered - ) { - this.clip2DPlaneRendered = true; - } else if ( - !this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") - .activateClipPlane && - this.clip2DPlaneRendered - ) { - this.clip2DPlaneRendered = false; - - if (this.getMesh() !== undefined) { - const material = this.getMesh().material; - material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); - material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); - } - } - - if (this.clip2DPlaneRendered) { - if (this.getMesh() !== undefined) { - const material = this.getMesh().material; - - if (material !== undefined) { - const sliceX = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).clipX; - const sliceY = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).clipY; - const sliceZ = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).clipZ; - - material.uniforms.box_min.value = new THREE.Vector3( - sliceX.x, - sliceY.x, - sliceZ.x - ); - material.uniforms.box_max.value = new THREE.Vector3( - sliceX.y, - sliceY.y, - sliceZ.y - ); - } - } - } - } else if (this.controllerHandler !== undefined && isVrModeActive) { - if ( - !this.controllerHandler.el.getAttribute("buttons-check").grabObject && - this.grabbed - ) { - this.el - .getObject3D("mesh") - .matrix.premultiply(this.controllerHandler.matrixWorld); - this.el - .getObject3D("mesh") - .matrix.decompose( - this.getMesh().position, - this.getMesh().quaternion, - this.getMesh().scale - ); - this.el.object3D.add(this.getMesh()); + if (this.clipPlaneListenerHandler !== undefined && !isVrModeActive) { + if ( + this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") + .activateClipPlane && + !this.clip2DPlaneRendered + ) { + this.clip2DPlaneRendered = true; + } else if ( + !this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") + .activateClipPlane && + this.clip2DPlaneRendered + ) { + this.clip2DPlaneRendered = false; - this.grabbed = false; + if (this.getMesh() !== undefined) { + const material = this.getMesh().material; + material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); + material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); } + } - // grab mesh - if ( - this.controllerHandler.el.getAttribute("buttons-check").grabObject && - this.data.rayCollided && - !this.grabbed - ) { - const inverseControllerPos = new THREE.Matrix4(); - inverseControllerPos.getInverse(this.controllerHandler.matrixWorld); - this.getMesh().matrix.premultiply(inverseControllerPos); - this.el - .getObject3D("mesh") - .matrix.decompose( - this.getMesh().position, - this.getMesh().quaternion, - this.getMesh().scale + if (this.clip2DPlaneRendered) { + if (this.getMesh() !== undefined) { + const material = this.getMesh().material; + + if (material !== undefined) { + const sliceX = this.clipPlaneListenerHandler.el.getAttribute( + "render-2d-clipplane" + ).clipX; + const sliceY = this.clipPlaneListenerHandler.el.getAttribute( + "render-2d-clipplane" + ).clipY; + const sliceZ = this.clipPlaneListenerHandler.el.getAttribute( + "render-2d-clipplane" + ).clipZ; + + material.uniforms.box_min.value = new THREE.Vector3( + sliceX.x, + sliceY.x, + sliceZ.x ); - this.controllerHandler.add(this.getMesh()); - - this.grabbed = true; + material.uniforms.box_max.value = new THREE.Vector3( + sliceX.y, + sliceY.y, + sliceZ.y + ); + } } + } + } else if (this.controllerHandler !== undefined && isVrModeActive) { + if ( + !this.controllerHandler.el.getAttribute("buttons-check").grabObject && + this.grabbed + ) { + this.el + .getObject3D("mesh") + .matrix.premultiply(this.controllerHandler.matrixWorld); + this.el + .getObject3D("mesh") + .matrix.decompose( + this.getMesh().position, + this.getMesh().quaternion, + this.getMesh().scale + ); + this.el.object3D.add(this.getMesh()); - this.updateMeshClipMatrix(this.controllerHandler.matrixWorld); + this.grabbed = false; } - } - if (this.getMesh() !== undefined) { - this.data.meshPosition = this.getMesh().position; + // grab mesh + if ( + this.controllerHandler.el.getAttribute("buttons-check").grabObject && + this.rayCollided && + !this.grabbed + ) { + const inverseControllerPos = new THREE.Matrix4(); + inverseControllerPos.getInverse(this.controllerHandler.matrixWorld); + this.getMesh().matrix.premultiply(inverseControllerPos); + this.el + .getObject3D("mesh") + .matrix.decompose( + this.getMesh().position, + this.getMesh().quaternion, + this.getMesh().scale + ); + this.controllerHandler.add(this.getMesh()); + this.grabbed = true; + } + + this.updateMeshClipMatrix(this.controllerHandler.matrixWorld); } }, @@ -306,22 +283,17 @@ AFRAME.registerComponent("model", { onExitVR: function () { if (this.getMesh() !== undefined) { - this.data.meshPosition.x = this.getMesh().position.x; - this.data.meshPosition.y = this.getMesh().position.y; - this.data.meshPosition.z = this.getMesh().position.z; - - this.vrRotation = this.getMesh().rotation; this.getMesh().position.copy(new THREE.Vector3()); this.getMesh().rotation.set(0, 0, 0); } }, onCollide: function (event) { - this.data.rayCollided = true; + this.rayCollided = true; }, onClearCollide: function (event) { - this.data.rayCollided = false; + this.rayCollided = false; }, /** HELPER FUNCTIONS */ @@ -398,14 +370,6 @@ AFRAME.registerComponent("model", { path, function (texture) { const dim = Math.ceil(Math.sqrt(slices)); - // const spacing = [x_spacing, y_spacing, z_spacing]; - - // const volumeScale = [ - // 1.0 / ((texture.image.width / dim) * spacing[0]), - // 1.0 / ((texture.image.height / dim) * spacing[1]), - // 1.0 / (slices * spacing[2]), - // ]; - // console.log(spacing); const volumeScale = [ 1.0 / ((texture.image.width / dim) * spacing.x), 1.0 / ((texture.image.height / dim) * spacing.y), @@ -419,7 +383,7 @@ AFRAME.registerComponent("model", { texture.needsUpdate = true; // Material - const shader = THREE.ShaderLib["ccvLibVolumeRenderShader"]; + const shader = THREE.ShaderLib["ModelShader"]; const uniforms = THREE.UniformsUtils.clone(shader.uniforms); uniforms["u_data"].value = texture; uniforms["u_lut"].value = null; @@ -430,12 +394,12 @@ AFRAME.registerComponent("model", { uniforms["slice"].value = slices; uniforms["dim"].value = dim; - if (!useTransferFunction) { - uniforms["channel"].value = 6; - uniforms["useLut"].value = false; - } else { + if (useTransferFunction) { uniforms["channel"].value = 1; uniforms["useLut"].value = true; + } else { + uniforms["channel"].value = 6; + uniforms["useLut"].value = false; } uniforms["step_size"].value = new THREE.Vector3( 1 / 100, @@ -467,10 +431,9 @@ AFRAME.registerComponent("model", { // Mesh const geometry = new THREE.BoxGeometry(1, 1, 1); el.setObject3D("mesh", new THREE.Mesh(geometry, material)); - data.modelLoaded = true; material.needsUpdate = true; - // this steps needs the model to be uploaded first + // Update colorMapping/data channel once model is loaded if (useTransferFunction) updateColorMapping(); else updateDataChannel(); }, @@ -529,21 +492,18 @@ AFRAME.registerComponent("model", { } }, - updateOpacityData: function (arrayX, arrayY) { + updateOpacityData: function (transferFunction) { this.newAlphaData = []; - - for (let i = 0; i <= arrayX.length - 2; i++) { - const scaledColorInit = arrayX[i] * 255; - const scaledColorEnd = arrayX[i + 1] * 255; - - const scaledAlphaInit = arrayY[i] * 255; - const scaledAlphaEnd = arrayY[i + 1] * 255; - - const deltaX = scaledColorEnd - scaledColorInit; - + for (let i = 0; i < transferFunction.length - 1; i++) { + const start = transferFunction[i]; + const end = transferFunction[i + 1]; + const deltaX = end.x * 255 - start.x * 255; + + // Linear interpolation between points + const alphaStart = start.y * 255; + const alphaEnd = end.y * 255; for (let j = 1 / deltaX; j < 1; j += 1 / deltaX) { - // linear interpolation - this.newAlphaData.push(scaledAlphaInit * (1 - j) + scaledAlphaEnd * j); + this.newAlphaData.push(alphaStart * (1 - j) + alphaEnd * j); } } }, diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index 36d4c715..ab882041 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -76,19 +76,14 @@ function AframeScene({ id="volumeCube" class="clickableMesh" model={toAframeString({ - alphaXDataArray: transferFunction.map((p) => p["x"]), - alphaYDataArray: transferFunction.map((p) => p["y"]), colorMap: colorMap.path, - path: model.path, - slices: model.slices, - // x_spacing: model.spacing.x, - // y_spacing: model.spacing.y, - // z_spacing: model.spacing.z, - // spacing: model.spacing, - spacing: JSON.stringify(model.spacing), + transferFunction: JSON.stringify(transferFunction), useTransferFunction, channel: model.channel, intensity: model.intensity, + path: model.path, + slices: model.slices, + spacing: JSON.stringify(model.spacing), })} position={model.position} rotation={model.rotation} From 8678f1610e496593fcb55b7a7e1b9ee62fc8c210 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Mon, 24 Jan 2022 17:50:33 -0500 Subject: [PATCH 16/38] refractor: remove uniforms that set defaults --- src/Aframe/Shader.js | 26 ++++++++++++------------ src/Aframe/model.js | 47 ++++++++++++++------------------------------ 2 files changed, 28 insertions(+), 45 deletions(-) diff --git a/src/Aframe/Shader.js b/src/Aframe/Shader.js index 88e46322..31a16f91 100644 --- a/src/Aframe/Shader.js +++ b/src/Aframe/Shader.js @@ -2,26 +2,26 @@ THREE.ShaderLib["ModelShader"] = { uniforms: { - slice: { value: 1.0 }, - dim: { value: 1.0 }, - clipPlane: { value: new THREE.Matrix4() }, + box_max: { value: new THREE.Vector3(1, 1, 1) }, + box_min: { value: new THREE.Vector3(0, 0, 0) }, + channel: { value: 1 }, clipping: { value: false }, - threshold: { value: 1 }, + clipPlane: { value: new THREE.Matrix4() }, + controllerPoseMatrix: { value: new THREE.Matrix4() }, + depth: { value: null }, + dim: { value: 1.0 }, + grabMesh: { value: false }, + intensity: { value: 1.0 }, multiplier: { value: 1 }, + P_inv: { value: new THREE.Matrix4() }, + slice: { value: 1.0 }, step_size: { value: new THREE.Vector3(1, 1, 1) }, - channel: { value: 1 }, + threshold: { value: 1 }, + u_data: { value: null }, u_lut: { value: null }, useLut: { value: true }, viewPort: { value: new THREE.Vector2() }, - P_inv: { value: new THREE.Matrix4() }, - u_data: { value: null }, - depth: { value: null }, zScale: { value: 1.0 }, - controllerPoseMatrix: { value: new THREE.Matrix4() }, - grabMesh: { value: false }, - box_min: { value: new THREE.Vector3(0, 0, 0) }, - box_max: { value: new THREE.Vector3(1, 1, 1) }, - intensity: { value: 1.0 }, }, vertexShader: [ diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 21eb50cb..19d06ccc 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -355,7 +355,6 @@ AFRAME.registerComponent("model", { if (path !== "") { const el = this.el; - const data = this.data; const canvasWidth = this.canvas.width; const canvasHeight = this.canvas.height; @@ -382,43 +381,27 @@ AFRAME.registerComponent("model", { texture.unpackAlignment = 1; texture.needsUpdate = true; - // Material + // Create material const shader = THREE.ShaderLib["ModelShader"]; const uniforms = THREE.UniformsUtils.clone(shader.uniforms); - uniforms["u_data"].value = texture; - uniforms["u_lut"].value = null; - uniforms["clipPlane"].value = new THREE.Matrix4(); - uniforms["clipping"].value = false; - uniforms["threshold"].value = 1; - uniforms["multiplier"].value = 1; - uniforms["slice"].value = slices; - uniforms["dim"].value = dim; + uniforms.dim.value = dim; + uniforms.intensity.value = intensity; + uniforms.slice.value = slices; + uniforms.step_size.value = new THREE.Vector3(0.01, 0.01, 0.01); + uniforms.u_data.value = texture; + uniforms.viewPort.value = new THREE.Vector2( + canvasWidth, + canvasHeight + ); + uniforms.zScale.value = zScale; if (useTransferFunction) { - uniforms["channel"].value = 1; - uniforms["useLut"].value = true; + uniforms.channel.value = 1; + uniforms.useLut.value = true; } else { - uniforms["channel"].value = 6; - uniforms["useLut"].value = false; + uniforms.channel.value = 6; + uniforms.useLut.value = false; } - uniforms["step_size"].value = new THREE.Vector3( - 1 / 100, - 1 / 100, - 1 / 100 - ); - - uniforms["viewPort"].value = new THREE.Vector2( - canvasWidth, - canvasHeight - ); - uniforms["P_inv"].value = new THREE.Matrix4(); - uniforms["depth"].value = null; - uniforms["zScale"].value = zScale; - uniforms["controllerPoseMatrix"].value = new THREE.Matrix4(); - uniforms["grabMesh"].value = false; - uniforms["box_min"].value = new THREE.Vector3(0, 0, 0); - uniforms["box_max"].value = new THREE.Vector3(1, 1, 1); - uniforms["intensity"].value = intensity; const material = new THREE.ShaderMaterial({ uniforms: uniforms, From e9cf4b3345747361f14e7931ccb4ef0b7a253c30 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Mon, 24 Jan 2022 17:54:53 -0500 Subject: [PATCH 17/38] chore: comment changes --- src/Aframe/model.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 19d06ccc..63aaa635 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -364,24 +364,24 @@ AFRAME.registerComponent("model", { const updateColorMapping = this.updateColorMapping; const updateDataChannel = this.updateDataChannel; - //load as 2D texture + // Load model new THREE.TextureLoader().load( path, function (texture) { + // Create 3D material from texture + texture.minFilter = texture.magFilter = THREE.LinearFilter; + texture.unpackAlignment = 1; + texture.needsUpdate = true; + const dim = Math.ceil(Math.sqrt(slices)); const volumeScale = [ 1.0 / ((texture.image.width / dim) * spacing.x), 1.0 / ((texture.image.height / dim) * spacing.y), 1.0 / (slices * spacing.z), - ]; - + ] const zScale = volumeScale[0] / volumeScale[2]; - texture.minFilter = texture.magFilter = THREE.LinearFilter; - texture.unpackAlignment = 1; - texture.needsUpdate = true; - - // Create material + // Set material properties const shader = THREE.ShaderLib["ModelShader"]; const uniforms = THREE.UniformsUtils.clone(shader.uniforms); uniforms.dim.value = dim; @@ -394,7 +394,6 @@ AFRAME.registerComponent("model", { canvasHeight ); uniforms.zScale.value = zScale; - if (useTransferFunction) { uniforms.channel.value = 1; uniforms.useLut.value = true; @@ -411,7 +410,7 @@ AFRAME.registerComponent("model", { side: THREE.BackSide, // The volume shader uses the backface as its "reference point" }); - // Mesh + // Model is a 1x1x1 box with the file's material const geometry = new THREE.BoxGeometry(1, 1, 1); el.setObject3D("mesh", new THREE.Mesh(geometry, material)); material.needsUpdate = true; From bb08f70a16844bb5b792a3ab0cc2f4b6939f35fb Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Tue, 25 Jan 2022 16:21:28 -0500 Subject: [PATCH 18/38] chore: npm run lint --- example/package-lock.json | 684 ++++++++++++++++----------------- package-lock.json | 781 +++++++++++++++++++------------------- src/Aframe/model.js | 2 +- 3 files changed, 727 insertions(+), 740 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 2288eb44..efc33f0d 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -1,341 +1,343 @@ -{ - "name": "react-volume-viewer-example", - "version": "0.0.0", - "lockfileVersion": 2, - "requires": true, - "packages": { - "": { - "name": "react-volume-viewer-example", - "version": "0.0.0", - "dependencies": { - "react": "file:../node_modules/react", - "react-dom": "file:../node_modules/react-dom", - "react-scripts": "file:../node_modules/react-scripts", - "react-volume-viewer": "file:.." - } - }, - "..": { - "version": "0.2.0", - "license": "MIT", - "dependencies": { - "@reach/listbox": "^0.16.2", - "aframe": "^1.2.0", - "aframe-event-set-component": "^5.0.0", - "aframe-orbit-controls": "^1.3.0", - "d3-scale": "^4.0.2", - "rc-slider": "^9.7.4" - }, - "devDependencies": { - "@babel/core": "^7.0.0", - "@rollup/plugin-babel": "^5.2.0", - "@rollup/plugin-commonjs": "^21.0.0", - "@rollup/plugin-node-resolve": "^13.0.6", - "@rollup/plugin-url": "^6.1.0", - "babel-eslint": "^10.0.3", - "babel-preset-stage-0": "^6.24.1", - "cross-env": "^7.0.3", - "eslint-config-react-app": "^7.0.0", - "gh-pages": "^3.2.3", - "npm-run-all": "^4.1.5", - "prettier": "^2.4.1", - "prop-types": "^15.7.2", - "react": "^17.0.0", - "react-dom": "^17.0.0", - "react-scripts": "^5.0.0", - "rollup": "^2.59.0", - "rollup-plugin-peer-deps-external": "^2.2.4", - "rollup-plugin-postcss": "^4.0.1", - "styled-components": "^5.0.0" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "react": "^17.0.0", - "react-dom": "^17.0.0", - "styled-components": "^5.0.0" - } - }, - "../node_modules/react": { - "version": "17.0.2", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "../node_modules/react-dom": { - "version": "17.0.2", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - }, - "peerDependencies": { - "react": "17.0.2" - } - }, - "../node_modules/react-scripts": { - "version": "5.0.0", - "license": "MIT", - "dependencies": { - "@babel/core": "^7.16.0", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@svgr/webpack": "^5.5.0", - "babel-jest": "^27.4.2", - "babel-loader": "^8.2.3", - "babel-plugin-named-asset-import": "^0.3.8", - "babel-preset-react-app": "^10.0.1", - "bfj": "^7.0.2", - "browserslist": "^4.18.1", - "camelcase": "^6.2.1", - "case-sensitive-paths-webpack-plugin": "^2.4.0", - "css-loader": "^6.5.1", - "css-minimizer-webpack-plugin": "^3.2.0", - "dotenv": "^10.0.0", - "dotenv-expand": "^5.1.0", - "eslint": "^8.3.0", - "eslint-config-react-app": "^7.0.0", - "eslint-webpack-plugin": "^3.1.1", - "file-loader": "^6.2.0", - "fs-extra": "^10.0.0", - "html-webpack-plugin": "^5.5.0", - "identity-obj-proxy": "^3.0.0", - "jest": "^27.4.3", - "jest-resolve": "^27.4.2", - "jest-watch-typeahead": "^1.0.0", - "mini-css-extract-plugin": "^2.4.5", - "postcss": "^8.4.4", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-loader": "^6.2.1", - "postcss-normalize": "^10.0.1", - "postcss-preset-env": "^7.0.1", - "prompts": "^2.4.2", - "react-app-polyfill": "^3.0.0", - "react-dev-utils": "^12.0.0", - "react-refresh": "^0.11.0", - "resolve": "^1.20.0", - "resolve-url-loader": "^4.0.0", - "sass-loader": "^12.3.0", - "semver": "^7.3.5", - "source-map-loader": "^3.0.0", - "style-loader": "^3.3.1", - "tailwindcss": "^3.0.2", - "terser-webpack-plugin": "^5.2.5", - "webpack": "^5.64.4", - "webpack-dev-server": "^4.6.0", - "webpack-manifest-plugin": "^4.0.2", - "workbox-webpack-plugin": "^6.4.1" - }, - "bin": { - "react-scripts": "bin/react-scripts.js" - }, - "engines": { - "node": ">=14.0.0" - }, - "optionalDependencies": { - "fsevents": "^2.3.2" - }, - "peerDependencies": { - "react": ">= 16", - "typescript": "^3.2.1 || ^4" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/react": { - "resolved": "../node_modules/react", - "link": true - }, - "node_modules/react-dom": { - "resolved": "../node_modules/react-dom", - "link": true - }, - "node_modules/react-scripts": { - "resolved": "../node_modules/react-scripts", - "link": true - }, - "node_modules/react-volume-viewer": { - "resolved": "..", - "link": true - } - }, - "dependencies": { - "react": { - "version": "file:../node_modules/react", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, - "react-dom": { - "version": "file:../node_modules/react-dom", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - } - }, - "react-scripts": { - "version": "file:../node_modules/react-scripts", - "requires": { - "@babel/core": "^7.16.0", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@svgr/webpack": "^5.5.0", - "babel-jest": "^27.4.2", - "babel-loader": "^8.2.3", - "babel-plugin-named-asset-import": "^0.3.8", - "babel-preset-react-app": "^10.0.1", - "bfj": "^7.0.2", - "browserslist": "^4.18.1", - "camelcase": "^6.2.1", - "case-sensitive-paths-webpack-plugin": "^2.4.0", - "css-loader": "^6.5.1", - "css-minimizer-webpack-plugin": "^3.2.0", - "dotenv": "^10.0.0", - "dotenv-expand": "^5.1.0", - "eslint": "^8.3.0", - "eslint-config-react-app": "^7.0.0", - "eslint-webpack-plugin": "^3.1.1", - "file-loader": "^6.2.0", - "fs-extra": "^10.0.0", - "fsevents": "^2.3.2", - "html-webpack-plugin": "^5.5.0", - "identity-obj-proxy": "^3.0.0", - "jest": "^27.4.3", - "jest-resolve": "^27.4.2", - "jest-watch-typeahead": "^1.0.0", - "mini-css-extract-plugin": "^2.4.5", - "postcss": "^8.4.4", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-loader": "^6.2.1", - "postcss-normalize": "^10.0.1", - "postcss-preset-env": "^7.0.1", - "prompts": "^2.4.2", - "react-app-polyfill": "^3.0.0", - "react-dev-utils": "^12.0.0", - "react-refresh": "^0.11.0", - "resolve": "^1.20.0", - "resolve-url-loader": "^4.0.0", - "sass-loader": "^12.3.0", - "semver": "^7.3.5", - "source-map-loader": "^3.0.0", - "style-loader": "^3.3.1", - "tailwindcss": "^3.0.2", - "terser-webpack-plugin": "^5.2.5", - "webpack": "^5.64.4", - "webpack-dev-server": "^4.6.0", - "webpack-manifest-plugin": "^4.0.2", - "workbox-webpack-plugin": "^6.4.1" - } - }, - "react-volume-viewer": { - "version": "file:..", - "requires": { - "@babel/core": "^7.0.0", - "@reach/listbox": "^0.16.2", - "@rollup/plugin-babel": "^5.2.0", - "@rollup/plugin-commonjs": "^21.0.0", - "@rollup/plugin-node-resolve": "^13.0.6", - "@rollup/plugin-url": "^6.1.0", - "aframe": "^1.2.0", - "aframe-event-set-component": "^5.0.0", - "aframe-orbit-controls": "^1.3.0", - "babel-eslint": "^10.0.3", - "babel-preset-stage-0": "^6.24.1", - "cross-env": "^7.0.3", - "d3-scale": "^4.0.2", - "eslint-config-react-app": "^7.0.0", - "gh-pages": "^3.2.3", - "npm-run-all": "^4.1.5", - "prettier": "^2.4.1", - "prop-types": "^15.7.2", - "rc-slider": "^9.7.4", - "react": "^17.0.0", - "react-dom": "^17.0.0", - "react-scripts": "^5.0.0", - "rollup": "^2.59.0", - "rollup-plugin-peer-deps-external": "^2.2.4", - "rollup-plugin-postcss": "^4.0.1", - "styled-components": "^5.0.0" - }, - "dependencies": { - "react": { - "version": "17.0.2", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, - "react-dom": { - "version": "17.0.2", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - } - }, - "react-scripts": { - "version": "5.0.0", - "requires": { - "@babel/core": "^7.16.0", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@svgr/webpack": "^5.5.0", - "babel-jest": "^27.4.2", - "babel-loader": "^8.2.3", - "babel-plugin-named-asset-import": "^0.3.8", - "babel-preset-react-app": "^10.0.1", - "bfj": "^7.0.2", - "browserslist": "^4.18.1", - "camelcase": "^6.2.1", - "case-sensitive-paths-webpack-plugin": "^2.4.0", - "css-loader": "^6.5.1", - "css-minimizer-webpack-plugin": "^3.2.0", - "dotenv": "^10.0.0", - "dotenv-expand": "^5.1.0", - "eslint": "^8.3.0", - "eslint-config-react-app": "^7.0.0", - "eslint-webpack-plugin": "^3.1.1", - "file-loader": "^6.2.0", - "fs-extra": "^10.0.0", - "fsevents": "^2.3.2", - "html-webpack-plugin": "^5.5.0", - "identity-obj-proxy": "^3.0.0", - "jest": "^27.4.3", - "jest-resolve": "^27.4.2", - "jest-watch-typeahead": "^1.0.0", - "mini-css-extract-plugin": "^2.4.5", - "postcss": "^8.4.4", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-loader": "^6.2.1", - "postcss-normalize": "^10.0.1", - "postcss-preset-env": "^7.0.1", - "prompts": "^2.4.2", - "react-app-polyfill": "^3.0.0", - "react-dev-utils": "^12.0.0", - "react-refresh": "^0.11.0", - "resolve": "^1.20.0", - "resolve-url-loader": "^4.0.0", - "sass-loader": "^12.3.0", - "semver": "^7.3.5", - "source-map-loader": "^3.0.0", - "style-loader": "^3.3.1", - "tailwindcss": "^3.0.2", - "terser-webpack-plugin": "^5.2.5", - "webpack": "^5.64.4", - "webpack-dev-server": "^4.6.0", - "webpack-manifest-plugin": "^4.0.2", - "workbox-webpack-plugin": "^6.4.1" - } - } - } - } - } -} +{ + "name": "react-volume-viewer-example", + "version": "0.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "react-volume-viewer-example", + "version": "0.0.0", + "dependencies": { + "react": "file:../node_modules/react", + "react-dom": "file:../node_modules/react-dom", + "react-scripts": "file:../node_modules/react-scripts", + "react-volume-viewer": "file:.." + } + }, + "..": { + "version": "0.3.0", + "license": "MIT", + "dependencies": { + "@reach/listbox": "^0.16.2", + "aframe": "^1.2.0", + "aframe-event-set-component": "^5.0.0", + "d3-scale": "^4.0.2", + "rc-slider": "^9.7.4" + }, + "devDependencies": { + "@babel/core": "^7.0.0", + "@rollup/plugin-babel": "^5.2.0", + "@rollup/plugin-commonjs": "^21.0.0", + "@rollup/plugin-node-resolve": "^13.0.6", + "@rollup/plugin-url": "^6.1.0", + "babel-eslint": "^10.0.3", + "babel-preset-stage-0": "^6.24.1", + "cross-env": "^7.0.3", + "eslint-config-react-app": "^7.0.0", + "gh-pages": "^3.2.3", + "npm-run-all": "^4.1.5", + "prettier": "^2.4.1", + "prop-types": "^15.7.2", + "react": "^17.0.0", + "react-dom": "^17.0.0", + "react-scripts": "^5.0.0", + "rollup": "^2.59.0", + "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-postcss": "^4.0.1", + "styled-components": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^17.0.0", + "react-dom": "^17.0.0", + "styled-components": "^5.0.0" + } + }, + "../node_modules/react": { + "version": "17.0.2", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "../node_modules/react-dom": { + "version": "17.0.2", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + }, + "peerDependencies": { + "react": "17.0.2" + } + }, + "../node_modules/react-scripts": { + "version": "5.0.0", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.16.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@svgr/webpack": "^5.5.0", + "babel-jest": "^27.4.2", + "babel-loader": "^8.2.3", + "babel-plugin-named-asset-import": "^0.3.8", + "babel-preset-react-app": "^10.0.1", + "bfj": "^7.0.2", + "browserslist": "^4.18.1", + "camelcase": "^6.2.1", + "case-sensitive-paths-webpack-plugin": "^2.4.0", + "css-loader": "^6.5.1", + "css-minimizer-webpack-plugin": "^3.2.0", + "dotenv": "^10.0.0", + "dotenv-expand": "^5.1.0", + "eslint": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-webpack-plugin": "^3.1.1", + "file-loader": "^6.2.0", + "fs-extra": "^10.0.0", + "html-webpack-plugin": "^5.5.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^27.4.3", + "jest-resolve": "^27.4.2", + "jest-watch-typeahead": "^1.0.0", + "mini-css-extract-plugin": "^2.4.5", + "postcss": "^8.4.4", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-loader": "^6.2.1", + "postcss-normalize": "^10.0.1", + "postcss-preset-env": "^7.0.1", + "prompts": "^2.4.2", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.0", + "react-refresh": "^0.11.0", + "resolve": "^1.20.0", + "resolve-url-loader": "^4.0.0", + "sass-loader": "^12.3.0", + "semver": "^7.3.5", + "source-map-loader": "^3.0.0", + "style-loader": "^3.3.1", + "tailwindcss": "^3.0.2", + "terser-webpack-plugin": "^5.2.5", + "webpack": "^5.64.4", + "webpack-dev-server": "^4.6.0", + "webpack-manifest-plugin": "^4.0.2", + "workbox-webpack-plugin": "^6.4.1" + }, + "bin": { + "react-scripts": "bin/react-scripts.js" + }, + "engines": { + "node": ">=14.0.0" + }, + "optionalDependencies": { + "fsevents": "^2.3.2" + }, + "peerDependencies": { + "react": ">= 16", + "typescript": "^3.2.1 || ^4" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/react": { + "resolved": "../node_modules/react", + "link": true + }, + "node_modules/react-dom": { + "resolved": "../node_modules/react-dom", + "link": true + }, + "node_modules/react-scripts": { + "resolved": "../node_modules/react-scripts", + "link": true + }, + "node_modules/react-volume-viewer": { + "resolved": "..", + "link": true + } + }, + "dependencies": { + "react": { + "version": "file:../node_modules/react", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "react-dom": { + "version": "file:../node_modules/react-dom", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + } + }, + "react-scripts": { + "version": "file:../node_modules/react-scripts", + "requires": { + "@babel/core": "^7.16.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@svgr/webpack": "^5.5.0", + "babel-jest": "^27.4.2", + "babel-loader": "^8.2.3", + "babel-plugin-named-asset-import": "^0.3.8", + "babel-preset-react-app": "^10.0.1", + "bfj": "^7.0.2", + "browserslist": "^4.18.1", + "camelcase": "^6.2.1", + "case-sensitive-paths-webpack-plugin": "^2.4.0", + "css-loader": "^6.5.1", + "css-minimizer-webpack-plugin": "^3.2.0", + "dotenv": "^10.0.0", + "dotenv-expand": "^5.1.0", + "eslint": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-webpack-plugin": "^3.1.1", + "file-loader": "^6.2.0", + "fs-extra": "^10.0.0", + "fsevents": "^2.3.2", + "html-webpack-plugin": "^5.5.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^27.4.3", + "jest-resolve": "^27.4.2", + "jest-watch-typeahead": "^1.0.0", + "mini-css-extract-plugin": "^2.4.5", + "postcss": "^8.4.4", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-loader": "^6.2.1", + "postcss-normalize": "^10.0.1", + "postcss-preset-env": "^7.0.1", + "prompts": "^2.4.2", + "react": "^17.0.2", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.0", + "react-dom": "^17.0.2", + "react-refresh": "^0.11.0", + "resolve": "^1.20.0", + "resolve-url-loader": "^4.0.0", + "sass-loader": "^12.3.0", + "semver": "^7.3.5", + "source-map-loader": "^3.0.0", + "style-loader": "^3.3.1", + "tailwindcss": "^3.0.2", + "terser-webpack-plugin": "^5.2.5", + "webpack": "^5.64.4", + "webpack-dev-server": "^4.6.0", + "webpack-manifest-plugin": "^4.0.2", + "workbox-webpack-plugin": "^6.4.1" + } + }, + "react-volume-viewer": { + "version": "file:..", + "requires": { + "@babel/core": "^7.0.0", + "@reach/listbox": "^0.16.2", + "@rollup/plugin-babel": "^5.2.0", + "@rollup/plugin-commonjs": "^21.0.0", + "@rollup/plugin-node-resolve": "^13.0.6", + "@rollup/plugin-url": "^6.1.0", + "aframe": "^1.2.0", + "aframe-event-set-component": "^5.0.0", + "babel-eslint": "^10.0.3", + "babel-preset-stage-0": "^6.24.1", + "cross-env": "^7.0.3", + "d3-scale": "^4.0.2", + "eslint-config-react-app": "^7.0.0", + "gh-pages": "^3.2.3", + "npm-run-all": "^4.1.5", + "prettier": "^2.4.1", + "prop-types": "^15.7.2", + "rc-slider": "^9.7.4", + "react": "^17.0.0", + "react-dom": "^17.0.0", + "react-scripts": "^5.0.0", + "rollup": "^2.59.0", + "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-postcss": "^4.0.1", + "styled-components": "^5.0.0" + }, + "dependencies": { + "react": { + "version": "17.0.2", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "react-dom": { + "version": "17.0.2", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + } + }, + "react-scripts": { + "version": "5.0.0", + "requires": { + "@babel/core": "^7.16.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@svgr/webpack": "^5.5.0", + "babel-jest": "^27.4.2", + "babel-loader": "^8.2.3", + "babel-plugin-named-asset-import": "^0.3.8", + "babel-preset-react-app": "^10.0.1", + "bfj": "^7.0.2", + "browserslist": "^4.18.1", + "camelcase": "^6.2.1", + "case-sensitive-paths-webpack-plugin": "^2.4.0", + "css-loader": "^6.5.1", + "css-minimizer-webpack-plugin": "^3.2.0", + "dotenv": "^10.0.0", + "dotenv-expand": "^5.1.0", + "eslint": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-webpack-plugin": "^3.1.1", + "file-loader": "^6.2.0", + "fs-extra": "^10.0.0", + "fsevents": "^2.3.2", + "html-webpack-plugin": "^5.5.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^27.4.3", + "jest-resolve": "^27.4.2", + "jest-watch-typeahead": "^1.0.0", + "mini-css-extract-plugin": "^2.4.5", + "postcss": "^8.4.4", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-loader": "^6.2.1", + "postcss-normalize": "^10.0.1", + "postcss-preset-env": "^7.0.1", + "prompts": "^2.4.2", + "react": "^17.0.2", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.0", + "react-dom": "^17.0.2", + "react-refresh": "^0.11.0", + "resolve": "^1.20.0", + "resolve-url-loader": "^4.0.0", + "sass-loader": "^12.3.0", + "semver": "^7.3.5", + "source-map-loader": "^3.0.0", + "style-loader": "^3.3.1", + "tailwindcss": "^3.0.2", + "terser-webpack-plugin": "^5.2.5", + "webpack": "^5.64.4", + "webpack-dev-server": "^4.6.0", + "webpack-manifest-plugin": "^4.0.2", + "workbox-webpack-plugin": "^6.4.1" + } + } + } + } + } +} diff --git a/package-lock.json b/package-lock.json index 286a5cae..a2e9911d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -68,9 +68,9 @@ } }, "node_modules/@babel/core": { - "version": "7.16.10", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.10.tgz", - "integrity": "sha512-pbiIdZbCiMx/MM6toR+OfXarYix3uz0oVsnNtfdAGTcCTu3w/JGF8JhirevXLBJUu0WguSZI12qpKnx7EeMyLA==", + "version": "7.16.12", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz", + "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==", "dev": true, "dependencies": { "@babel/code-frame": "^7.16.7", @@ -78,7 +78,7 @@ "@babel/helper-compilation-targets": "^7.16.7", "@babel/helper-module-transforms": "^7.16.7", "@babel/helpers": "^7.16.7", - "@babel/parser": "^7.16.10", + "@babel/parser": "^7.16.12", "@babel/template": "^7.16.7", "@babel/traverse": "^7.16.10", "@babel/types": "^7.16.8", @@ -513,9 +513,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.16.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.10.tgz", - "integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ==", + "version": "7.16.12", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.12.tgz", + "integrity": "sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -3684,9 +3684,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "17.0.10", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.10.tgz", - "integrity": "sha512-S/3xB4KzyFxYGCppyDt68yzBU9ysL88lSdIah4D6cptdcltc4NCPCAMc0+PCpg/lLIyC7IPvj2Z52OJWeIUkog==", + "version": "17.0.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.12.tgz", + "integrity": "sha512-4YpbAsnJXWYK/fpTVFlMIcUIho2AYCi4wg5aNPrG1ng7fn/1/RZfCIpRCiBX+12RVa34RluilnvCqD+g3KiSiA==", "dev": true }, "node_modules/@types/parse-json": { @@ -3799,14 +3799,14 @@ "dev": true }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.0.tgz", - "integrity": "sha512-XXVKnMsq2fuu9K2KsIxPUGqb6xAImz8MEChClbXmE3VbveFtBUU5bzM6IPVWqzyADIgdkS2Ws/6Xo7W2TeZWjQ==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.1.tgz", + "integrity": "sha512-xN3CYqFlyE/qOcy978/L0xLR2HlcAGIyIK5sMOasxaaAPfQRj/MmMV6OC3I7NZO84oEUdWCOju34Z9W8E0pFDQ==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "5.10.0", - "@typescript-eslint/type-utils": "5.10.0", - "@typescript-eslint/utils": "5.10.0", + "@typescript-eslint/scope-manager": "5.10.1", + "@typescript-eslint/type-utils": "5.10.1", + "@typescript-eslint/utils": "5.10.1", "debug": "^4.3.2", "functional-red-black-tree": "^1.0.1", "ignore": "^5.1.8", @@ -3847,12 +3847,12 @@ } }, "node_modules/@typescript-eslint/experimental-utils": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.10.0.tgz", - "integrity": "sha512-GeQAPqQMI5DVMGOUwGbSR+NdsirryyKOgUFRTWInhlsKUArns/MVnXmPpzxfrzB1nU36cT5WJAwmfCsjoaVBWg==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.10.1.tgz", + "integrity": "sha512-Ryeb8nkJa/1zKl8iujNtJC8tgj6PgaY0sDUnrTqbmC70nrKKkZaHfiRDTcqICmCSCEQyLQcJAoh0AukLaIaGTw==", "dev": true, "dependencies": { - "@typescript-eslint/utils": "5.10.0" + "@typescript-eslint/utils": "5.10.1" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -3866,14 +3866,14 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.0.tgz", - "integrity": "sha512-pJB2CCeHWtwOAeIxv8CHVGJhI5FNyJAIpx5Pt72YkK3QfEzt6qAlXZuyaBmyfOdM62qU0rbxJzNToPTVeJGrQw==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.1.tgz", + "integrity": "sha512-GReo3tjNBwR5RnRO0K2wDIDN31cM3MmDtgyQ85oAxAmC5K3j/g85IjP+cDfcqDsDDBf1HNKQAD0WqOYL8jXqUA==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "5.10.0", - "@typescript-eslint/types": "5.10.0", - "@typescript-eslint/typescript-estree": "5.10.0", + "@typescript-eslint/scope-manager": "5.10.1", + "@typescript-eslint/types": "5.10.1", + "@typescript-eslint/typescript-estree": "5.10.1", "debug": "^4.3.2" }, "engines": { @@ -3893,13 +3893,13 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.0.tgz", - "integrity": "sha512-tgNgUgb4MhqK6DoKn3RBhyZ9aJga7EQrw+2/OiDk5hKf3pTVZWyqBi7ukP+Z0iEEDMF5FDa64LqODzlfE4O/Dg==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz", + "integrity": "sha512-Lyvi559Gvpn94k7+ElXNMEnXu/iundV5uFmCUNnftbFrUbAJ1WBoaGgkbOBm07jVZa682oaBU37ao/NGGX4ZDg==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.10.0", - "@typescript-eslint/visitor-keys": "5.10.0" + "@typescript-eslint/types": "5.10.1", + "@typescript-eslint/visitor-keys": "5.10.1" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -3910,12 +3910,12 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.0.tgz", - "integrity": "sha512-TzlyTmufJO5V886N+hTJBGIfnjQDQ32rJYxPaeiyWKdjsv2Ld5l8cbS7pxim4DeNs62fKzRSt8Q14Evs4JnZyQ==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.1.tgz", + "integrity": "sha512-AfVJkV8uck/UIoDqhu+ptEdBoQATON9GXnhOpPLzkQRJcSChkvD//qsz9JVffl2goxX+ybs5klvacE9vmrQyCw==", "dev": true, "dependencies": { - "@typescript-eslint/utils": "5.10.0", + "@typescript-eslint/utils": "5.10.1", "debug": "^4.3.2", "tsutils": "^3.21.0" }, @@ -3936,9 +3936,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.0.tgz", - "integrity": "sha512-wUljCgkqHsMZbw60IbOqT/puLfyqqD5PquGiBo1u1IS3PLxdi3RDGlyf032IJyh+eQoGhz9kzhtZa+VC4eWTlQ==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.1.tgz", + "integrity": "sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -3949,13 +3949,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.0.tgz", - "integrity": "sha512-x+7e5IqfwLwsxTdliHRtlIYkgdtYXzE0CkFeV6ytAqq431ZyxCFzNMNR5sr3WOlIG/ihVZr9K/y71VHTF/DUQA==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz", + "integrity": "sha512-PwIGnH7jIueXv4opcwEbVGDATjGPO1dx9RkUl5LlHDSe+FXxPwFL5W/qYd5/NHr7f6lo/vvTrAzd0KlQtRusJQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.10.0", - "@typescript-eslint/visitor-keys": "5.10.0", + "@typescript-eslint/types": "5.10.1", + "@typescript-eslint/visitor-keys": "5.10.1", "debug": "^4.3.2", "globby": "^11.0.4", "is-glob": "^4.0.3", @@ -3991,15 +3991,15 @@ } }, "node_modules/@typescript-eslint/utils": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.0.tgz", - "integrity": "sha512-IGYwlt1CVcFoE2ueW4/ioEwybR60RAdGeiJX/iDAw0t5w0wK3S7QncDwpmsM70nKgGTuVchEWB8lwZwHqPAWRg==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.1.tgz", + "integrity": "sha512-RRmlITiUbLuTRtn/gcPRi4202niF+q7ylFLCKu4c+O/PcpRvZ/nAUwQ2G00bZgpWkhrNLNnvhZLbDn8Ml0qsQw==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.9", - "@typescript-eslint/scope-manager": "5.10.0", - "@typescript-eslint/types": "5.10.0", - "@typescript-eslint/typescript-estree": "5.10.0", + "@typescript-eslint/scope-manager": "5.10.1", + "@typescript-eslint/types": "5.10.1", + "@typescript-eslint/typescript-estree": "5.10.1", "eslint-scope": "^5.1.1", "eslint-utils": "^3.0.0" }, @@ -4037,12 +4037,12 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.0.tgz", - "integrity": "sha512-GMxj0K1uyrFLPKASLmZzCuSddmjZVbVj3Ouy5QVuIGKZopxvOr24JsS7gruz6C3GExE01mublZ3mIBOaon9zuQ==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.1.tgz", + "integrity": "sha512-NjQ0Xinhy9IL979tpoTRuLKxMc0zJC7QVSdeerXs2/QvOy2yRkzX5dRb10X5woNUdJgU8G3nYRDlI33sq1K4YQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.10.0", + "@typescript-eslint/types": "5.10.1", "eslint-visitor-keys": "^3.0.0" }, "engines": { @@ -4488,12 +4488,6 @@ "ajv": "^6.9.1" } }, - "node_modules/alphanum-sort": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", - "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", - "dev": true - }, "node_modules/an-array": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/an-array/-/an-array-1.0.0.tgz", @@ -6727,12 +6721,12 @@ } }, "node_modules/cssnano": { - "version": "5.0.15", - "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.15.tgz", - "integrity": "sha512-ppZsS7oPpi2sfiyV5+i+NbB/3GtQ+ab2Vs1azrZaXWujUSN4o+WdTxlCZIMcT9yLW3VO/5yX3vpyDaQ1nIn8CQ==", + "version": "5.0.16", + "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.16.tgz", + "integrity": "sha512-ryhRI9/B9VFCwPbb1z60LLK5/ldoExi7nwdnJzpkLZkm2/r7j2X3jfY+ZvDVJhC/0fPZlrAguYdHNFg0iglPKQ==", "dev": true, "dependencies": { - "cssnano-preset-default": "^5.1.10", + "cssnano-preset-default": "^5.1.11", "lilconfig": "^2.0.3", "yaml": "^1.10.2" }, @@ -6748,40 +6742,40 @@ } }, "node_modules/cssnano-preset-default": { - "version": "5.1.10", - "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.10.tgz", - "integrity": "sha512-BcpSzUVygHMOnp9uG5rfPzTOCb0GAHQkqtUQx8j1oMNF9A1Q8hziOOhiM4bdICpmrBIU85BE64RD5XGYsVQZNA==", + "version": "5.1.11", + "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.11.tgz", + "integrity": "sha512-ETet5hqHxmzQq2ynXMOQofKuLm7VOjMiOB7E2zdtm/hSeCKlD9fabzIUV4GoPcRyJRHi+4kGf0vsfGYbQ4nmPw==", "dev": true, "dependencies": { "css-declaration-sorter": "^6.0.3", - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-calc": "^8.2.0", - "postcss-colormin": "^5.2.3", - "postcss-convert-values": "^5.0.2", - "postcss-discard-comments": "^5.0.1", - "postcss-discard-duplicates": "^5.0.1", - "postcss-discard-empty": "^5.0.1", - "postcss-discard-overridden": "^5.0.2", - "postcss-merge-longhand": "^5.0.4", - "postcss-merge-rules": "^5.0.4", - "postcss-minify-font-values": "^5.0.2", - "postcss-minify-gradients": "^5.0.4", - "postcss-minify-params": "^5.0.3", - "postcss-minify-selectors": "^5.1.1", - "postcss-normalize-charset": "^5.0.1", + "postcss-colormin": "^5.2.4", + "postcss-convert-values": "^5.0.3", + "postcss-discard-comments": "^5.0.2", + "postcss-discard-duplicates": "^5.0.2", + "postcss-discard-empty": "^5.0.2", + "postcss-discard-overridden": "^5.0.3", + "postcss-merge-longhand": "^5.0.5", + "postcss-merge-rules": "^5.0.5", + "postcss-minify-font-values": "^5.0.3", + "postcss-minify-gradients": "^5.0.5", + "postcss-minify-params": "^5.0.4", + "postcss-minify-selectors": "^5.1.2", + "postcss-normalize-charset": "^5.0.2", "postcss-normalize-display-values": "^5.0.2", - "postcss-normalize-positions": "^5.0.2", - "postcss-normalize-repeat-style": "^5.0.2", - "postcss-normalize-string": "^5.0.2", + "postcss-normalize-positions": "^5.0.3", + "postcss-normalize-repeat-style": "^5.0.3", + "postcss-normalize-string": "^5.0.3", "postcss-normalize-timing-functions": "^5.0.2", - "postcss-normalize-unicode": "^5.0.2", + "postcss-normalize-unicode": "^5.0.3", "postcss-normalize-url": "^5.0.4", - "postcss-normalize-whitespace": "^5.0.2", - "postcss-ordered-values": "^5.0.3", + "postcss-normalize-whitespace": "^5.0.3", + "postcss-ordered-values": "^5.0.4", "postcss-reduce-initial": "^5.0.2", - "postcss-reduce-transforms": "^5.0.2", + "postcss-reduce-transforms": "^5.0.3", "postcss-svgo": "^5.0.3", - "postcss-unique-selectors": "^5.0.2" + "postcss-unique-selectors": "^5.0.3" }, "engines": { "node": "^10 || ^12 || >=14.0" @@ -6791,9 +6785,9 @@ } }, "node_modules/cssnano-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.0.0.tgz", - "integrity": "sha512-Pzs7/BZ6OgT+tXXuF12DKR8SmSbzUeVYCtMBbS8lI0uAm3mrYmkyqCXXPsQESI6kmLfEVBppbdVY/el3hg3nAA==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.0.1.tgz", + "integrity": "sha512-VNCHL364lh++/ono+S3j9NlUK+d97KNkxI77NlqZU2W3xd2/qmyN61dsa47pTpb55zuU4G4lI7qFjAXZJH1OAQ==", "dev": true, "engines": { "node": "^10 || ^12 || >=14.0" @@ -7438,9 +7432,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.49", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.49.tgz", - "integrity": "sha512-k/0t1TRfonHIp8TJKfjBu2cKj8MqYTiEpOhci+q7CVEE5xnCQnx1pTa+V8b/sdhe4S3PR4p4iceEQWhGrKQORQ==", + "version": "1.4.53", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.53.tgz", + "integrity": "sha512-rFveSKQczlcav+H3zkKqykU6ANseFwXwkl855jOIap5/0gnEcuIhv2ecz6aoTrXavF6I/CEBeRnBnkB51k06ew==", "dev": true }, "node_modules/email-addresses": { @@ -9624,12 +9618,12 @@ } }, "node_modules/http-proxy-middleware": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.1.tgz", - "integrity": "sha512-cfaXRVoZxSed/BmkA7SwBVNI9Kj7HFltaE5rqYOub5kWzWZ+gofV2koVN1j2rMW7pEfSSlCHGJ31xmuyFyfLOg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.2.tgz", + "integrity": "sha512-XtmDN5w+vdFTBZaYhdJAbMqn0DP/EhkUaAeo963mojwpKMMbw6nivtFKw07D7DDOH745L5k0VL0P8KRYNEVF/g==", "dev": true, "dependencies": { - "@types/http-proxy": "^1.17.5", + "@types/http-proxy": "^1.17.8", "http-proxy": "^1.18.1", "is-glob": "^4.0.1", "is-plain-obj": "^3.0.0", @@ -9637,6 +9631,9 @@ }, "engines": { "node": ">=12.0.0" + }, + "peerDependencies": { + "@types/express": "^4.17.13" } }, "node_modules/https-proxy-agent": { @@ -12816,9 +12813,9 @@ } }, "node_modules/mini-css-extract-plugin": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.2.tgz", - "integrity": "sha512-Lwgq9qLNyBK6yNLgzssXnq4r2+mB9Mz3cJWlM8kseysHIvTicFhDNimFgY94jjqlwhNzLPsq8wv4X+vOHtMdYA==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.3.tgz", + "integrity": "sha512-YseMB8cs8U/KCaAGQoqYmfUuhhGW0a9p9XvWXrxVOkE3/IiISTLw4ALNt7JR5B2eYauFM+PQGSbXMDmVbR7Tfw==", "dev": true, "dependencies": { "schema-utils": "^4.0.0" @@ -13752,9 +13749,9 @@ } }, "node_modules/pirates": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.4.tgz", - "integrity": "sha512-ZIrVPH+A52Dw84R0L3/VS9Op04PuQ2SEoJL6bkshmiTic/HldyW9Tf7oH5mhJZBK7NmDx27vSMrYEXPXclpDKw==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", + "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==", "dev": true, "engines": { "node": ">= 6" @@ -14040,9 +14037,9 @@ } }, "node_modules/postcss-colormin": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.3.tgz", - "integrity": "sha512-dra4xoAjub2wha6RUXAgadHEn2lGxbj8drhFcIGLOMn914Eu7DkPUurugDXgstwttCYkJtZ/+PkWRWdp3UHRIA==", + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.4.tgz", + "integrity": "sha512-rYlC5015aNqVQt/B6Cy156g7sH5tRUJGmT9xeagYthtKehetbKx7jHxhyLpulP4bs4vbp8u/B2rac0J7S7qPQg==", "dev": true, "dependencies": { "browserslist": "^4.16.6", @@ -14058,12 +14055,12 @@ } }, "node_modules/postcss-convert-values": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.2.tgz", - "integrity": "sha512-KQ04E2yadmfa1LqXm7UIDwW1ftxU/QWZmz6NKnHnUvJ3LEYbbcX6i329f/ig+WnEByHegulocXrECaZGLpL8Zg==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.3.tgz", + "integrity": "sha512-fVkjHm2T0PSMqXUCIhHNWVGjhB9mHEWX2GboVs7j3iCgr6FpIl9c/IdXy0PHWZSQ9LFTRgmj98amxJE6KOnlsA==", "dev": true, "dependencies": { - "postcss-value-parser": "^4.1.0" + "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^10 || ^12 || >=14.0" @@ -14130,9 +14127,9 @@ } }, "node_modules/postcss-discard-comments": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.2.tgz", + "integrity": "sha512-6VQ3pYTsJHEsN2Bic88Aa7J/Brn4Bv8j/rqaFQZkH+pcVkKYwxCIvoMQkykEW7fBjmofdTnQgcivt5CCBJhtrg==", "dev": true, "engines": { "node": "^10 || ^12 || >=14.0" @@ -14142,9 +14139,9 @@ } }, "node_modules/postcss-discard-duplicates": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.2.tgz", + "integrity": "sha512-LKY81YjUjc78p6rbXIsnppsaFo8XzCoMZkXVILJU//sK0DgPkPSpuq/cZvHss3EtdKvWNYgWzQL+wiJFtEET4g==", "dev": true, "engines": { "node": "^10 || ^12 || >=14.0" @@ -14154,9 +14151,9 @@ } }, "node_modules/postcss-discard-empty": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.2.tgz", + "integrity": "sha512-SxBsbTjlsKUvZLL+dMrdWauuNZU8TBq5IOL/DHa6jBUSXFEwmDqeXRfTIK/FQpPTa8MJMxEHjSV3UbiuyLARPQ==", "dev": true, "engines": { "node": "^10 || ^12 || >=14.0" @@ -14166,9 +14163,9 @@ } }, "node_modules/postcss-discard-overridden": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.2.tgz", - "integrity": "sha512-+56BLP6NSSUuWUXjRgAQuho1p5xs/hU5Sw7+xt9S3JSg+7R6+WMGnJW7Hre/6tTuZ2xiXMB42ObkiZJ2hy/Pew==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.3.tgz", + "integrity": "sha512-yRTXknIZA4k8Yo4FiF1xbsLj/VBxfXEWxJNIrtIy6HC9KQ4xJxcPtoaaskh6QptCGrrcGnhKsTsENTRPZOBu4g==", "dev": true, "engines": { "node": "^10 || ^12 || >=14.0" @@ -14412,13 +14409,13 @@ } }, "node_modules/postcss-merge-longhand": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.4.tgz", - "integrity": "sha512-2lZrOVD+d81aoYkZDpWu6+3dTAAGkCKbV5DoRhnIR7KOULVrI/R7bcMjhrH9KTRy6iiHKqmtG+n/MMj1WmqHFw==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.5.tgz", + "integrity": "sha512-R2BCPJJ/U2oh1uTWEYn9CcJ7MMcQ1iIbj9wfr2s/zHu5om5MP/ewKdaunpfJqR1WYzqCsgnXuRoVXPAzxdqy8g==", "dev": true, "dependencies": { - "postcss-value-parser": "^4.1.0", - "stylehacks": "^5.0.1" + "postcss-value-parser": "^4.2.0", + "stylehacks": "^5.0.2" }, "engines": { "node": "^10 || ^12 || >=14.0" @@ -14428,14 +14425,14 @@ } }, "node_modules/postcss-merge-rules": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.4.tgz", - "integrity": "sha512-yOj7bW3NxlQxaERBB0lEY1sH5y+RzevjbdH4DBJurjKERNpknRByFNdNe+V72i5pIZL12woM9uGdS5xbSB+kDQ==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.5.tgz", + "integrity": "sha512-3Oa26/Pb9VOFVksJjFG45SNoe4nhGvJ2Uc6TlRimqF8uhfOCEhVCaJ3rvEat5UFOn2UZqTY5Da8dFgCh3Iq0Ug==", "dev": true, "dependencies": { "browserslist": "^4.16.6", "caniuse-api": "^3.0.0", - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-selector-parser": "^6.0.5" }, "engines": { @@ -14446,9 +14443,9 @@ } }, "node_modules/postcss-minify-font-values": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.2.tgz", - "integrity": "sha512-R6MJZryq28Cw0AmnyhXrM7naqJZZLoa1paBltIzh2wM7yb4D45TLur+eubTQ4jCmZU9SGeZdWsc5KcSoqTMeTg==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.3.tgz", + "integrity": "sha512-bC45rVzEwsLhv/cL1eCjoo2OOjbSk9I7HKFBYnBvtyuIZlf7uMipMATXtA0Fc3jwPo3wuPIW1jRJWKzflMh1sA==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -14461,13 +14458,13 @@ } }, "node_modules/postcss-minify-gradients": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.4.tgz", - "integrity": "sha512-RVwZA7NC4R4J76u8X0Q0j+J7ItKUWAeBUJ8oEEZWmtv3Xoh19uNJaJwzNpsydQjk6PkuhRrK+YwwMf+c+68EYg==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.5.tgz", + "integrity": "sha512-/YjvXs8PepsoiZAIpjstOO4IHKwFAqYNqbA1yVdqklM84tbUUneh6omJxGlRlF3mi6K5Pa067Mg6IwqEnYC8Zg==", "dev": true, "dependencies": { "colord": "^2.9.1", - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-value-parser": "^4.2.0" }, "engines": { @@ -14478,14 +14475,13 @@ } }, "node_modules/postcss-minify-params": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.3.tgz", - "integrity": "sha512-NY92FUikE+wralaiVexFd5gwb7oJTIDhgTNeIw89i1Ymsgt4RWiPXfz3bg7hDy4NL6gepcThJwOYNtZO/eNi7Q==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.4.tgz", + "integrity": "sha512-Z0vjod9lRZEmEPfEmA2sCfjbfEEFKefMD3RDIQSUfXK4LpCyWkX1CniUgyNvnjJFLDPSxtgKzozhHhPHKoeGkg==", "dev": true, "dependencies": { - "alphanum-sort": "^1.0.2", "browserslist": "^4.16.6", - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-value-parser": "^4.2.0" }, "engines": { @@ -14496,12 +14492,11 @@ } }, "node_modules/postcss-minify-selectors": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.1.tgz", - "integrity": "sha512-TOzqOPXt91O2luJInaVPiivh90a2SIK5Nf1Ea7yEIM/5w+XA5BGrZGUSW8aEx9pJ/oNj7ZJBhjvigSiBV+bC1Q==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.2.tgz", + "integrity": "sha512-gpn1nJDMCf3g32y/7kl+jsdamhiYT+/zmEt57RoT9GmzlixBNRPohI7k8UIHelLABhdLf3MSZhtM33xuH5eQOQ==", "dev": true, "dependencies": { - "alphanum-sort": "^1.0.2", "postcss-selector-parser": "^6.0.5" }, "engines": { @@ -14642,9 +14637,9 @@ } }, "node_modules/postcss-normalize-charset": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.2.tgz", + "integrity": "sha512-fEMhYXzO8My+gC009qDc/3bgnFP8Fv1Ic8uw4ec4YTlhIOw63tGPk1YFd7fk9bZUf1DAbkhiL/QPWs9JLqdF2g==", "dev": true, "engines": { "node": "^10 || ^12 || >=14.0" @@ -14669,9 +14664,9 @@ } }, "node_modules/postcss-normalize-positions": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.2.tgz", - "integrity": "sha512-tqghWFVDp2btqFg1gYob1etPNxXLNh3uVeWgZE2AQGh6b2F8AK2Gj36v5Vhyh+APwIzNjmt6jwZ9pTBP+/OM8g==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.3.tgz", + "integrity": "sha512-U+rmhjrNBvIGYqr/1tD4wXPFFMKUbXsYXvlUCzLi0tOCUS6LoeEAnmVXXJY/MEB/1CKZZwBSs2tmzGawcygVBA==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -14684,9 +14679,9 @@ } }, "node_modules/postcss-normalize-repeat-style": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.2.tgz", - "integrity": "sha512-/rIZn8X9bBzC7KvY4iKUhXUGW3MmbXwfPF23jC9wT9xTi7kAvgj8sEgwxjixBmoL6MVa4WOgxNz2hAR6wTK8tw==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.3.tgz", + "integrity": "sha512-uk1+xYx0AMbA3nLSNhbDrqbf/rx+Iuq5tVad2VNyaxxJzx79oGieJ6D9F6AfOL2GtiIbP7vTYlpYHtG+ERFXTg==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -14699,9 +14694,9 @@ } }, "node_modules/postcss-normalize-string": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.2.tgz", - "integrity": "sha512-zaI1yzwL+a/FkIzUWMQoH25YwCYxi917J4pYm1nRXtdgiCdnlTkx5eRzqWEC64HtRa06WCJ9TIutpb6GmW4gFw==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.3.tgz", + "integrity": "sha512-Mf2V4JbIDboNGQhW6xW0YREDiYXoX3WrD3EjKkjvnpAJ6W4qqjLnK/c9aioyVFaWWHVdP5zVRw/9DI5S3oLDFw==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -14729,9 +14724,9 @@ } }, "node_modules/postcss-normalize-unicode": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.2.tgz", - "integrity": "sha512-3y/V+vjZ19HNcTizeqwrbZSUsE69ZMRHfiiyLAJb7C7hJtYmM4Gsbajy7gKagu97E8q5rlS9k8FhojA8cpGhWw==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.3.tgz", + "integrity": "sha512-uNC7BmS/7h6to2UWa4RFH8sOTzu2O9dVWPE/F9Vm9GdhONiD/c1kNaCLbmsFHlKWcEx7alNUChQ+jH/QAlqsQw==", "dev": true, "dependencies": { "browserslist": "^4.16.6", @@ -14761,9 +14756,9 @@ } }, "node_modules/postcss-normalize-whitespace": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.2.tgz", - "integrity": "sha512-CXBx+9fVlzSgbk0IXA/dcZn9lXixnQRndnsPC5ht3HxlQ1bVh77KQDL1GffJx1LTzzfae8ftMulsjYmO2yegxA==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.3.tgz", + "integrity": "sha512-333JWRnX655fSoUbufJ10HJop3c8mrpKkCCUnEmgz/Cb/QEtW+/TMZwDAUt4lnwqP6tCCk0x0b58jqvDgiQm/A==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -14776,12 +14771,12 @@ } }, "node_modules/postcss-ordered-values": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.3.tgz", - "integrity": "sha512-T9pDS+P9bWeFvqivXd5ACzQmrCmHjv3ZP+djn8E1UZY7iK79pFSm7i3WbKw2VSmFmdbMm8sQ12OPcNpzBo3Z2w==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.4.tgz", + "integrity": "sha512-taKtGDZtyYUMVYkg+MuJeBUiTF6cGHZmo/qcW7ibvW79UlyKuSHbo6dpCIiqI+j9oJsXWzP+ovIxoyLDOeQFdw==", "dev": true, "dependencies": { - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-value-parser": "^4.2.0" }, "engines": { @@ -14906,9 +14901,9 @@ } }, "node_modules/postcss-reduce-transforms": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.2.tgz", - "integrity": "sha512-25HeDeFsgiPSUx69jJXZn8I06tMxLQJJNF5h7i9gsUg8iP4KOOJ8EX8fj3seeoLt3SLU2YDD6UPnDYVGUO7DEA==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.3.tgz", + "integrity": "sha512-yDnTUab5i7auHiNwdcL1f+pBnqQFf+7eC4cbC7D8Lc1FkvNZhtpkdad+9U4wDdFb84haupMf0rA/Zc5LcTe/3A==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -15029,12 +15024,11 @@ } }, "node_modules/postcss-unique-selectors": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.2.tgz", - "integrity": "sha512-w3zBVlrtZm7loQWRPVC0yjUwwpty7OM6DnEHkxcSQXO1bMS3RJ+JUS5LFMSDZHJcvGsRwhZinCWVqn8Kej4EDA==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.3.tgz", + "integrity": "sha512-V5tX2hadSSn+miVCluuK1IDGy+7jAXSOfRZ2DQ+s/4uQZb/orDYBjH0CHgFrXsRw78p4QTuEFA9kI6C956UnHQ==", "dev": true, "dependencies": { - "alphanum-sort": "^1.0.2", "postcss-selector-parser": "^6.0.5" }, "engines": { @@ -15449,9 +15443,9 @@ } }, "node_modules/rc-util": { - "version": "5.16.1", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.16.1.tgz", - "integrity": "sha512-kSCyytvdb3aRxQacS/71ta6c+kBWvM1v8/2h9d/HaNWauc3qB8pLnF20PJ8NajkNN8gb+rR1l0eWO+D4Pz+LLQ==", + "version": "5.17.0", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.17.0.tgz", + "integrity": "sha512-HWuTIKzBeZQQ7IBqdokE0wMp/xx39/KfUJ0gcquBigoldDCrf3YBcWFHrrQlJG7sI82Wg8mwp1uAKV3zMGfAgg==", "dependencies": { "@babel/runtime": "^7.12.5", "react-is": "^16.12.0", @@ -16093,12 +16087,12 @@ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" }, "node_modules/resolve": { - "version": "1.21.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.1.tgz", - "integrity": "sha512-lfEImVbnolPuaSZuLQ52cAxPBHeI77sPwCOWRdy12UG/CNa8an7oBHH1R+Fp1/mUqSJi4c8TIP6FOIPSZAUrEQ==", + "version": "1.22.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", + "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==", "dev": true, "dependencies": { - "is-core-module": "^2.8.0", + "is-core-module": "^2.8.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, @@ -16243,9 +16237,9 @@ } }, "node_modules/rollup": { - "version": "2.65.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.65.0.tgz", - "integrity": "sha512-ohZVYrhtVMTqqeqH26sngfMiyGDg6gCUReOsoflXvYpzUkDHp8sVG8F9FQxjs72OfnLWpXP2nNNqQ9I0vkRovA==", + "version": "2.66.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz", + "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -17316,12 +17310,12 @@ } }, "node_modules/stylehacks": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz", - "integrity": "sha512-Es0rVnHIqbWzveU1b24kbw92HsebBepxfcqe5iix7t9j0PQqhs0IxXVXv0pY2Bxa08CgMkzD6OWql7kbGOuEdA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.2.tgz", + "integrity": "sha512-114zeJdOpTrbQYRD4OU5UWJ99LKUaqCPJTU1HQ/n3q3BwmllFN8kHENaLnOeqVq6AhXrWfxHNZTl33iJ4oy3cQ==", "dev": true, "dependencies": { - "browserslist": "^4.16.0", + "browserslist": "^4.16.6", "postcss-selector-parser": "^6.0.4" }, "engines": { @@ -17526,9 +17520,9 @@ "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==" }, "node_modules/tailwindcss": { - "version": "3.0.15", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.15.tgz", - "integrity": "sha512-bT2iy7FtjwgsXik4ZoJnHXR+SRCiGR1W95fVqpLZebr64m4ahwUwRbIAc5w5+2fzr1YF4Ct2eI7dojMRRl8sVQ==", + "version": "3.0.16", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.16.tgz", + "integrity": "sha512-1L8E5Wr+o1c4kxxObNz2owJe94a7BLEMV+2Lz6wzprJdcs3ENSRR9t4OZf2OqtRNS/q/zFPuOKoLtQoy3Lrhhw==", "dev": true, "dependencies": { "arg": "^5.0.1", @@ -17539,7 +17533,7 @@ "detective": "^5.2.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.2.7", + "fast-glob": "^3.2.11", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "normalize-path": "^3.0.0", @@ -18328,9 +18322,9 @@ } }, "node_modules/webpack": { - "version": "5.66.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.66.0.tgz", - "integrity": "sha512-NJNtGT7IKpGzdW7Iwpn/09OXz9inIkeIQ/ibY6B+MdV1x6+uReqz/5z1L89ezWnpPDWpXF0TY5PCYKQdWVn8Vg==", + "version": "5.67.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.67.0.tgz", + "integrity": "sha512-LjFbfMh89xBDpUMgA1W9Ur6Rn/gnr2Cq1jjHFPo4v6a79/ypznSYbAyPgGhwsxBtMIaEmDD1oJoA7BEYw/Fbrw==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.0", @@ -18356,7 +18350,7 @@ "tapable": "^2.1.1", "terser-webpack-plugin": "^5.1.3", "watchpack": "^2.3.1", - "webpack-sources": "^3.2.2" + "webpack-sources": "^3.2.3" }, "bin": { "webpack": "bin/webpack.js" @@ -19408,9 +19402,9 @@ "dev": true }, "@babel/core": { - "version": "7.16.10", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.10.tgz", - "integrity": "sha512-pbiIdZbCiMx/MM6toR+OfXarYix3uz0oVsnNtfdAGTcCTu3w/JGF8JhirevXLBJUu0WguSZI12qpKnx7EeMyLA==", + "version": "7.16.12", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz", + "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==", "dev": true, "requires": { "@babel/code-frame": "^7.16.7", @@ -19418,7 +19412,7 @@ "@babel/helper-compilation-targets": "^7.16.7", "@babel/helper-module-transforms": "^7.16.7", "@babel/helpers": "^7.16.7", - "@babel/parser": "^7.16.10", + "@babel/parser": "^7.16.12", "@babel/template": "^7.16.7", "@babel/traverse": "^7.16.10", "@babel/types": "^7.16.8", @@ -19742,9 +19736,9 @@ } }, "@babel/parser": { - "version": "7.16.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.10.tgz", - "integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ==", + "version": "7.16.12", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.12.tgz", + "integrity": "sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==", "dev": true }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { @@ -21998,9 +21992,9 @@ "dev": true }, "@types/node": { - "version": "17.0.10", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.10.tgz", - "integrity": "sha512-S/3xB4KzyFxYGCppyDt68yzBU9ysL88lSdIah4D6cptdcltc4NCPCAMc0+PCpg/lLIyC7IPvj2Z52OJWeIUkog==", + "version": "17.0.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.12.tgz", + "integrity": "sha512-4YpbAsnJXWYK/fpTVFlMIcUIho2AYCi4wg5aNPrG1ng7fn/1/RZfCIpRCiBX+12RVa34RluilnvCqD+g3KiSiA==", "dev": true }, "@types/parse-json": { @@ -22113,14 +22107,14 @@ "dev": true }, "@typescript-eslint/eslint-plugin": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.0.tgz", - "integrity": "sha512-XXVKnMsq2fuu9K2KsIxPUGqb6xAImz8MEChClbXmE3VbveFtBUU5bzM6IPVWqzyADIgdkS2Ws/6Xo7W2TeZWjQ==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.1.tgz", + "integrity": "sha512-xN3CYqFlyE/qOcy978/L0xLR2HlcAGIyIK5sMOasxaaAPfQRj/MmMV6OC3I7NZO84oEUdWCOju34Z9W8E0pFDQ==", "dev": true, "requires": { - "@typescript-eslint/scope-manager": "5.10.0", - "@typescript-eslint/type-utils": "5.10.0", - "@typescript-eslint/utils": "5.10.0", + "@typescript-eslint/scope-manager": "5.10.1", + "@typescript-eslint/type-utils": "5.10.1", + "@typescript-eslint/utils": "5.10.1", "debug": "^4.3.2", "functional-red-black-tree": "^1.0.1", "ignore": "^5.1.8", @@ -22141,61 +22135,61 @@ } }, "@typescript-eslint/experimental-utils": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.10.0.tgz", - "integrity": "sha512-GeQAPqQMI5DVMGOUwGbSR+NdsirryyKOgUFRTWInhlsKUArns/MVnXmPpzxfrzB1nU36cT5WJAwmfCsjoaVBWg==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.10.1.tgz", + "integrity": "sha512-Ryeb8nkJa/1zKl8iujNtJC8tgj6PgaY0sDUnrTqbmC70nrKKkZaHfiRDTcqICmCSCEQyLQcJAoh0AukLaIaGTw==", "dev": true, "requires": { - "@typescript-eslint/utils": "5.10.0" + "@typescript-eslint/utils": "5.10.1" } }, "@typescript-eslint/parser": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.0.tgz", - "integrity": "sha512-pJB2CCeHWtwOAeIxv8CHVGJhI5FNyJAIpx5Pt72YkK3QfEzt6qAlXZuyaBmyfOdM62qU0rbxJzNToPTVeJGrQw==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.1.tgz", + "integrity": "sha512-GReo3tjNBwR5RnRO0K2wDIDN31cM3MmDtgyQ85oAxAmC5K3j/g85IjP+cDfcqDsDDBf1HNKQAD0WqOYL8jXqUA==", "dev": true, "requires": { - "@typescript-eslint/scope-manager": "5.10.0", - "@typescript-eslint/types": "5.10.0", - "@typescript-eslint/typescript-estree": "5.10.0", + "@typescript-eslint/scope-manager": "5.10.1", + "@typescript-eslint/types": "5.10.1", + "@typescript-eslint/typescript-estree": "5.10.1", "debug": "^4.3.2" } }, "@typescript-eslint/scope-manager": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.0.tgz", - "integrity": "sha512-tgNgUgb4MhqK6DoKn3RBhyZ9aJga7EQrw+2/OiDk5hKf3pTVZWyqBi7ukP+Z0iEEDMF5FDa64LqODzlfE4O/Dg==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz", + "integrity": "sha512-Lyvi559Gvpn94k7+ElXNMEnXu/iundV5uFmCUNnftbFrUbAJ1WBoaGgkbOBm07jVZa682oaBU37ao/NGGX4ZDg==", "dev": true, "requires": { - "@typescript-eslint/types": "5.10.0", - "@typescript-eslint/visitor-keys": "5.10.0" + "@typescript-eslint/types": "5.10.1", + "@typescript-eslint/visitor-keys": "5.10.1" } }, "@typescript-eslint/type-utils": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.0.tgz", - "integrity": "sha512-TzlyTmufJO5V886N+hTJBGIfnjQDQ32rJYxPaeiyWKdjsv2Ld5l8cbS7pxim4DeNs62fKzRSt8Q14Evs4JnZyQ==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.1.tgz", + "integrity": "sha512-AfVJkV8uck/UIoDqhu+ptEdBoQATON9GXnhOpPLzkQRJcSChkvD//qsz9JVffl2goxX+ybs5klvacE9vmrQyCw==", "dev": true, "requires": { - "@typescript-eslint/utils": "5.10.0", + "@typescript-eslint/utils": "5.10.1", "debug": "^4.3.2", "tsutils": "^3.21.0" } }, "@typescript-eslint/types": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.0.tgz", - "integrity": "sha512-wUljCgkqHsMZbw60IbOqT/puLfyqqD5PquGiBo1u1IS3PLxdi3RDGlyf032IJyh+eQoGhz9kzhtZa+VC4eWTlQ==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.1.tgz", + "integrity": "sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.0.tgz", - "integrity": "sha512-x+7e5IqfwLwsxTdliHRtlIYkgdtYXzE0CkFeV6ytAqq431ZyxCFzNMNR5sr3WOlIG/ihVZr9K/y71VHTF/DUQA==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz", + "integrity": "sha512-PwIGnH7jIueXv4opcwEbVGDATjGPO1dx9RkUl5LlHDSe+FXxPwFL5W/qYd5/NHr7f6lo/vvTrAzd0KlQtRusJQ==", "dev": true, "requires": { - "@typescript-eslint/types": "5.10.0", - "@typescript-eslint/visitor-keys": "5.10.0", + "@typescript-eslint/types": "5.10.1", + "@typescript-eslint/visitor-keys": "5.10.1", "debug": "^4.3.2", "globby": "^11.0.4", "is-glob": "^4.0.3", @@ -22215,15 +22209,15 @@ } }, "@typescript-eslint/utils": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.0.tgz", - "integrity": "sha512-IGYwlt1CVcFoE2ueW4/ioEwybR60RAdGeiJX/iDAw0t5w0wK3S7QncDwpmsM70nKgGTuVchEWB8lwZwHqPAWRg==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.1.tgz", + "integrity": "sha512-RRmlITiUbLuTRtn/gcPRi4202niF+q7ylFLCKu4c+O/PcpRvZ/nAUwQ2G00bZgpWkhrNLNnvhZLbDn8Ml0qsQw==", "dev": true, "requires": { "@types/json-schema": "^7.0.9", - "@typescript-eslint/scope-manager": "5.10.0", - "@typescript-eslint/types": "5.10.0", - "@typescript-eslint/typescript-estree": "5.10.0", + "@typescript-eslint/scope-manager": "5.10.1", + "@typescript-eslint/types": "5.10.1", + "@typescript-eslint/typescript-estree": "5.10.1", "eslint-scope": "^5.1.1", "eslint-utils": "^3.0.0" }, @@ -22247,12 +22241,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.0.tgz", - "integrity": "sha512-GMxj0K1uyrFLPKASLmZzCuSddmjZVbVj3Ouy5QVuIGKZopxvOr24JsS7gruz6C3GExE01mublZ3mIBOaon9zuQ==", + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.1.tgz", + "integrity": "sha512-NjQ0Xinhy9IL979tpoTRuLKxMc0zJC7QVSdeerXs2/QvOy2yRkzX5dRb10X5woNUdJgU8G3nYRDlI33sq1K4YQ==", "dev": true, "requires": { - "@typescript-eslint/types": "5.10.0", + "@typescript-eslint/types": "5.10.1", "eslint-visitor-keys": "^3.0.0" }, "dependencies": { @@ -22637,12 +22631,6 @@ "dev": true, "requires": {} }, - "alphanum-sort": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", - "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", - "dev": true - }, "an-array": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/an-array/-/an-array-1.0.0.tgz", @@ -24435,57 +24423,57 @@ "dev": true }, "cssnano": { - "version": "5.0.15", - "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.15.tgz", - "integrity": "sha512-ppZsS7oPpi2sfiyV5+i+NbB/3GtQ+ab2Vs1azrZaXWujUSN4o+WdTxlCZIMcT9yLW3VO/5yX3vpyDaQ1nIn8CQ==", + "version": "5.0.16", + "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.16.tgz", + "integrity": "sha512-ryhRI9/B9VFCwPbb1z60LLK5/ldoExi7nwdnJzpkLZkm2/r7j2X3jfY+ZvDVJhC/0fPZlrAguYdHNFg0iglPKQ==", "dev": true, "requires": { - "cssnano-preset-default": "^5.1.10", + "cssnano-preset-default": "^5.1.11", "lilconfig": "^2.0.3", "yaml": "^1.10.2" } }, "cssnano-preset-default": { - "version": "5.1.10", - "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.10.tgz", - "integrity": "sha512-BcpSzUVygHMOnp9uG5rfPzTOCb0GAHQkqtUQx8j1oMNF9A1Q8hziOOhiM4bdICpmrBIU85BE64RD5XGYsVQZNA==", + "version": "5.1.11", + "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.11.tgz", + "integrity": "sha512-ETet5hqHxmzQq2ynXMOQofKuLm7VOjMiOB7E2zdtm/hSeCKlD9fabzIUV4GoPcRyJRHi+4kGf0vsfGYbQ4nmPw==", "dev": true, "requires": { "css-declaration-sorter": "^6.0.3", - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-calc": "^8.2.0", - "postcss-colormin": "^5.2.3", - "postcss-convert-values": "^5.0.2", - "postcss-discard-comments": "^5.0.1", - "postcss-discard-duplicates": "^5.0.1", - "postcss-discard-empty": "^5.0.1", - "postcss-discard-overridden": "^5.0.2", - "postcss-merge-longhand": "^5.0.4", - "postcss-merge-rules": "^5.0.4", - "postcss-minify-font-values": "^5.0.2", - "postcss-minify-gradients": "^5.0.4", - "postcss-minify-params": "^5.0.3", - "postcss-minify-selectors": "^5.1.1", - "postcss-normalize-charset": "^5.0.1", + "postcss-colormin": "^5.2.4", + "postcss-convert-values": "^5.0.3", + "postcss-discard-comments": "^5.0.2", + "postcss-discard-duplicates": "^5.0.2", + "postcss-discard-empty": "^5.0.2", + "postcss-discard-overridden": "^5.0.3", + "postcss-merge-longhand": "^5.0.5", + "postcss-merge-rules": "^5.0.5", + "postcss-minify-font-values": "^5.0.3", + "postcss-minify-gradients": "^5.0.5", + "postcss-minify-params": "^5.0.4", + "postcss-minify-selectors": "^5.1.2", + "postcss-normalize-charset": "^5.0.2", "postcss-normalize-display-values": "^5.0.2", - "postcss-normalize-positions": "^5.0.2", - "postcss-normalize-repeat-style": "^5.0.2", - "postcss-normalize-string": "^5.0.2", + "postcss-normalize-positions": "^5.0.3", + "postcss-normalize-repeat-style": "^5.0.3", + "postcss-normalize-string": "^5.0.3", "postcss-normalize-timing-functions": "^5.0.2", - "postcss-normalize-unicode": "^5.0.2", + "postcss-normalize-unicode": "^5.0.3", "postcss-normalize-url": "^5.0.4", - "postcss-normalize-whitespace": "^5.0.2", - "postcss-ordered-values": "^5.0.3", + "postcss-normalize-whitespace": "^5.0.3", + "postcss-ordered-values": "^5.0.4", "postcss-reduce-initial": "^5.0.2", - "postcss-reduce-transforms": "^5.0.2", + "postcss-reduce-transforms": "^5.0.3", "postcss-svgo": "^5.0.3", - "postcss-unique-selectors": "^5.0.2" + "postcss-unique-selectors": "^5.0.3" } }, "cssnano-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.0.0.tgz", - "integrity": "sha512-Pzs7/BZ6OgT+tXXuF12DKR8SmSbzUeVYCtMBbS8lI0uAm3mrYmkyqCXXPsQESI6kmLfEVBppbdVY/el3hg3nAA==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.0.1.tgz", + "integrity": "sha512-VNCHL364lh++/ono+S3j9NlUK+d97KNkxI77NlqZU2W3xd2/qmyN61dsa47pTpb55zuU4G4lI7qFjAXZJH1OAQ==", "dev": true, "requires": {} }, @@ -24991,9 +24979,9 @@ } }, "electron-to-chromium": { - "version": "1.4.49", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.49.tgz", - "integrity": "sha512-k/0t1TRfonHIp8TJKfjBu2cKj8MqYTiEpOhci+q7CVEE5xnCQnx1pTa+V8b/sdhe4S3PR4p4iceEQWhGrKQORQ==", + "version": "1.4.53", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.53.tgz", + "integrity": "sha512-rFveSKQczlcav+H3zkKqykU6ANseFwXwkl855jOIap5/0gnEcuIhv2ecz6aoTrXavF6I/CEBeRnBnkB51k06ew==", "dev": true }, "email-addresses": { @@ -26639,12 +26627,12 @@ } }, "http-proxy-middleware": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.1.tgz", - "integrity": "sha512-cfaXRVoZxSed/BmkA7SwBVNI9Kj7HFltaE5rqYOub5kWzWZ+gofV2koVN1j2rMW7pEfSSlCHGJ31xmuyFyfLOg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.2.tgz", + "integrity": "sha512-XtmDN5w+vdFTBZaYhdJAbMqn0DP/EhkUaAeo963mojwpKMMbw6nivtFKw07D7DDOH745L5k0VL0P8KRYNEVF/g==", "dev": true, "requires": { - "@types/http-proxy": "^1.17.5", + "@types/http-proxy": "^1.17.8", "http-proxy": "^1.18.1", "is-glob": "^4.0.1", "is-plain-obj": "^3.0.0", @@ -29028,9 +29016,9 @@ } }, "mini-css-extract-plugin": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.2.tgz", - "integrity": "sha512-Lwgq9qLNyBK6yNLgzssXnq4r2+mB9Mz3cJWlM8kseysHIvTicFhDNimFgY94jjqlwhNzLPsq8wv4X+vOHtMdYA==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.3.tgz", + "integrity": "sha512-YseMB8cs8U/KCaAGQoqYmfUuhhGW0a9p9XvWXrxVOkE3/IiISTLw4ALNt7JR5B2eYauFM+PQGSbXMDmVbR7Tfw==", "dev": true, "requires": { "schema-utils": "^4.0.0" @@ -29731,9 +29719,9 @@ } }, "pirates": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.4.tgz", - "integrity": "sha512-ZIrVPH+A52Dw84R0L3/VS9Op04PuQ2SEoJL6bkshmiTic/HldyW9Tf7oH5mhJZBK7NmDx27vSMrYEXPXclpDKw==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", + "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==", "dev": true }, "pkg-dir": { @@ -29937,9 +29925,9 @@ } }, "postcss-colormin": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.3.tgz", - "integrity": "sha512-dra4xoAjub2wha6RUXAgadHEn2lGxbj8drhFcIGLOMn914Eu7DkPUurugDXgstwttCYkJtZ/+PkWRWdp3UHRIA==", + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.4.tgz", + "integrity": "sha512-rYlC5015aNqVQt/B6Cy156g7sH5tRUJGmT9xeagYthtKehetbKx7jHxhyLpulP4bs4vbp8u/B2rac0J7S7qPQg==", "dev": true, "requires": { "browserslist": "^4.16.6", @@ -29949,12 +29937,12 @@ } }, "postcss-convert-values": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.2.tgz", - "integrity": "sha512-KQ04E2yadmfa1LqXm7UIDwW1ftxU/QWZmz6NKnHnUvJ3LEYbbcX6i329f/ig+WnEByHegulocXrECaZGLpL8Zg==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.3.tgz", + "integrity": "sha512-fVkjHm2T0PSMqXUCIhHNWVGjhB9mHEWX2GboVs7j3iCgr6FpIl9c/IdXy0PHWZSQ9LFTRgmj98amxJE6KOnlsA==", "dev": true, "requires": { - "postcss-value-parser": "^4.1.0" + "postcss-value-parser": "^4.2.0" } }, "postcss-custom-media": { @@ -29992,30 +29980,30 @@ } }, "postcss-discard-comments": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.2.tgz", + "integrity": "sha512-6VQ3pYTsJHEsN2Bic88Aa7J/Brn4Bv8j/rqaFQZkH+pcVkKYwxCIvoMQkykEW7fBjmofdTnQgcivt5CCBJhtrg==", "dev": true, "requires": {} }, "postcss-discard-duplicates": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.2.tgz", + "integrity": "sha512-LKY81YjUjc78p6rbXIsnppsaFo8XzCoMZkXVILJU//sK0DgPkPSpuq/cZvHss3EtdKvWNYgWzQL+wiJFtEET4g==", "dev": true, "requires": {} }, "postcss-discard-empty": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.2.tgz", + "integrity": "sha512-SxBsbTjlsKUvZLL+dMrdWauuNZU8TBq5IOL/DHa6jBUSXFEwmDqeXRfTIK/FQpPTa8MJMxEHjSV3UbiuyLARPQ==", "dev": true, "requires": {} }, "postcss-discard-overridden": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.2.tgz", - "integrity": "sha512-+56BLP6NSSUuWUXjRgAQuho1p5xs/hU5Sw7+xt9S3JSg+7R6+WMGnJW7Hre/6tTuZ2xiXMB42ObkiZJ2hy/Pew==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.3.tgz", + "integrity": "sha512-yRTXknIZA4k8Yo4FiF1xbsLj/VBxfXEWxJNIrtIy6HC9KQ4xJxcPtoaaskh6QptCGrrcGnhKsTsENTRPZOBu4g==", "dev": true, "requires": {} }, @@ -30157,66 +30145,64 @@ "requires": {} }, "postcss-merge-longhand": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.4.tgz", - "integrity": "sha512-2lZrOVD+d81aoYkZDpWu6+3dTAAGkCKbV5DoRhnIR7KOULVrI/R7bcMjhrH9KTRy6iiHKqmtG+n/MMj1WmqHFw==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.5.tgz", + "integrity": "sha512-R2BCPJJ/U2oh1uTWEYn9CcJ7MMcQ1iIbj9wfr2s/zHu5om5MP/ewKdaunpfJqR1WYzqCsgnXuRoVXPAzxdqy8g==", "dev": true, "requires": { - "postcss-value-parser": "^4.1.0", - "stylehacks": "^5.0.1" + "postcss-value-parser": "^4.2.0", + "stylehacks": "^5.0.2" } }, "postcss-merge-rules": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.4.tgz", - "integrity": "sha512-yOj7bW3NxlQxaERBB0lEY1sH5y+RzevjbdH4DBJurjKERNpknRByFNdNe+V72i5pIZL12woM9uGdS5xbSB+kDQ==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.5.tgz", + "integrity": "sha512-3Oa26/Pb9VOFVksJjFG45SNoe4nhGvJ2Uc6TlRimqF8uhfOCEhVCaJ3rvEat5UFOn2UZqTY5Da8dFgCh3Iq0Ug==", "dev": true, "requires": { "browserslist": "^4.16.6", "caniuse-api": "^3.0.0", - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-selector-parser": "^6.0.5" } }, "postcss-minify-font-values": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.2.tgz", - "integrity": "sha512-R6MJZryq28Cw0AmnyhXrM7naqJZZLoa1paBltIzh2wM7yb4D45TLur+eubTQ4jCmZU9SGeZdWsc5KcSoqTMeTg==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.3.tgz", + "integrity": "sha512-bC45rVzEwsLhv/cL1eCjoo2OOjbSk9I7HKFBYnBvtyuIZlf7uMipMATXtA0Fc3jwPo3wuPIW1jRJWKzflMh1sA==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, "postcss-minify-gradients": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.4.tgz", - "integrity": "sha512-RVwZA7NC4R4J76u8X0Q0j+J7ItKUWAeBUJ8oEEZWmtv3Xoh19uNJaJwzNpsydQjk6PkuhRrK+YwwMf+c+68EYg==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.5.tgz", + "integrity": "sha512-/YjvXs8PepsoiZAIpjstOO4IHKwFAqYNqbA1yVdqklM84tbUUneh6omJxGlRlF3mi6K5Pa067Mg6IwqEnYC8Zg==", "dev": true, "requires": { "colord": "^2.9.1", - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-value-parser": "^4.2.0" } }, "postcss-minify-params": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.3.tgz", - "integrity": "sha512-NY92FUikE+wralaiVexFd5gwb7oJTIDhgTNeIw89i1Ymsgt4RWiPXfz3bg7hDy4NL6gepcThJwOYNtZO/eNi7Q==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.4.tgz", + "integrity": "sha512-Z0vjod9lRZEmEPfEmA2sCfjbfEEFKefMD3RDIQSUfXK4LpCyWkX1CniUgyNvnjJFLDPSxtgKzozhHhPHKoeGkg==", "dev": true, "requires": { - "alphanum-sort": "^1.0.2", "browserslist": "^4.16.6", - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-value-parser": "^4.2.0" } }, "postcss-minify-selectors": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.1.tgz", - "integrity": "sha512-TOzqOPXt91O2luJInaVPiivh90a2SIK5Nf1Ea7yEIM/5w+XA5BGrZGUSW8aEx9pJ/oNj7ZJBhjvigSiBV+bC1Q==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.2.tgz", + "integrity": "sha512-gpn1nJDMCf3g32y/7kl+jsdamhiYT+/zmEt57RoT9GmzlixBNRPohI7k8UIHelLABhdLf3MSZhtM33xuH5eQOQ==", "dev": true, "requires": { - "alphanum-sort": "^1.0.2", "postcss-selector-parser": "^6.0.5" } }, @@ -30302,9 +30288,9 @@ } }, "postcss-normalize-charset": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.2.tgz", + "integrity": "sha512-fEMhYXzO8My+gC009qDc/3bgnFP8Fv1Ic8uw4ec4YTlhIOw63tGPk1YFd7fk9bZUf1DAbkhiL/QPWs9JLqdF2g==", "dev": true, "requires": {} }, @@ -30318,27 +30304,27 @@ } }, "postcss-normalize-positions": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.2.tgz", - "integrity": "sha512-tqghWFVDp2btqFg1gYob1etPNxXLNh3uVeWgZE2AQGh6b2F8AK2Gj36v5Vhyh+APwIzNjmt6jwZ9pTBP+/OM8g==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.3.tgz", + "integrity": "sha512-U+rmhjrNBvIGYqr/1tD4wXPFFMKUbXsYXvlUCzLi0tOCUS6LoeEAnmVXXJY/MEB/1CKZZwBSs2tmzGawcygVBA==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, "postcss-normalize-repeat-style": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.2.tgz", - "integrity": "sha512-/rIZn8X9bBzC7KvY4iKUhXUGW3MmbXwfPF23jC9wT9xTi7kAvgj8sEgwxjixBmoL6MVa4WOgxNz2hAR6wTK8tw==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.3.tgz", + "integrity": "sha512-uk1+xYx0AMbA3nLSNhbDrqbf/rx+Iuq5tVad2VNyaxxJzx79oGieJ6D9F6AfOL2GtiIbP7vTYlpYHtG+ERFXTg==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, "postcss-normalize-string": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.2.tgz", - "integrity": "sha512-zaI1yzwL+a/FkIzUWMQoH25YwCYxi917J4pYm1nRXtdgiCdnlTkx5eRzqWEC64HtRa06WCJ9TIutpb6GmW4gFw==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.3.tgz", + "integrity": "sha512-Mf2V4JbIDboNGQhW6xW0YREDiYXoX3WrD3EjKkjvnpAJ6W4qqjLnK/c9aioyVFaWWHVdP5zVRw/9DI5S3oLDFw==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" @@ -30354,9 +30340,9 @@ } }, "postcss-normalize-unicode": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.2.tgz", - "integrity": "sha512-3y/V+vjZ19HNcTizeqwrbZSUsE69ZMRHfiiyLAJb7C7hJtYmM4Gsbajy7gKagu97E8q5rlS9k8FhojA8cpGhWw==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.3.tgz", + "integrity": "sha512-uNC7BmS/7h6to2UWa4RFH8sOTzu2O9dVWPE/F9Vm9GdhONiD/c1kNaCLbmsFHlKWcEx7alNUChQ+jH/QAlqsQw==", "dev": true, "requires": { "browserslist": "^4.16.6", @@ -30374,21 +30360,21 @@ } }, "postcss-normalize-whitespace": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.2.tgz", - "integrity": "sha512-CXBx+9fVlzSgbk0IXA/dcZn9lXixnQRndnsPC5ht3HxlQ1bVh77KQDL1GffJx1LTzzfae8ftMulsjYmO2yegxA==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.3.tgz", + "integrity": "sha512-333JWRnX655fSoUbufJ10HJop3c8mrpKkCCUnEmgz/Cb/QEtW+/TMZwDAUt4lnwqP6tCCk0x0b58jqvDgiQm/A==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, "postcss-ordered-values": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.3.tgz", - "integrity": "sha512-T9pDS+P9bWeFvqivXd5ACzQmrCmHjv3ZP+djn8E1UZY7iK79pFSm7i3WbKw2VSmFmdbMm8sQ12OPcNpzBo3Z2w==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.4.tgz", + "integrity": "sha512-taKtGDZtyYUMVYkg+MuJeBUiTF6cGHZmo/qcW7ibvW79UlyKuSHbo6dpCIiqI+j9oJsXWzP+ovIxoyLDOeQFdw==", "dev": true, "requires": { - "cssnano-utils": "^3.0.0", + "cssnano-utils": "^3.0.1", "postcss-value-parser": "^4.2.0" } }, @@ -30476,9 +30462,9 @@ } }, "postcss-reduce-transforms": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.2.tgz", - "integrity": "sha512-25HeDeFsgiPSUx69jJXZn8I06tMxLQJJNF5h7i9gsUg8iP4KOOJ8EX8fj3seeoLt3SLU2YDD6UPnDYVGUO7DEA==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.3.tgz", + "integrity": "sha512-yDnTUab5i7auHiNwdcL1f+pBnqQFf+7eC4cbC7D8Lc1FkvNZhtpkdad+9U4wDdFb84haupMf0rA/Zc5LcTe/3A==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" @@ -30566,12 +30552,11 @@ } }, "postcss-unique-selectors": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.2.tgz", - "integrity": "sha512-w3zBVlrtZm7loQWRPVC0yjUwwpty7OM6DnEHkxcSQXO1bMS3RJ+JUS5LFMSDZHJcvGsRwhZinCWVqn8Kej4EDA==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.3.tgz", + "integrity": "sha512-V5tX2hadSSn+miVCluuK1IDGy+7jAXSOfRZ2DQ+s/4uQZb/orDYBjH0CHgFrXsRw78p4QTuEFA9kI6C956UnHQ==", "dev": true, "requires": { - "alphanum-sort": "^1.0.2", "postcss-selector-parser": "^6.0.5" } }, @@ -30875,9 +30860,9 @@ } }, "rc-util": { - "version": "5.16.1", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.16.1.tgz", - "integrity": "sha512-kSCyytvdb3aRxQacS/71ta6c+kBWvM1v8/2h9d/HaNWauc3qB8pLnF20PJ8NajkNN8gb+rR1l0eWO+D4Pz+LLQ==", + "version": "5.17.0", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.17.0.tgz", + "integrity": "sha512-HWuTIKzBeZQQ7IBqdokE0wMp/xx39/KfUJ0gcquBigoldDCrf3YBcWFHrrQlJG7sI82Wg8mwp1uAKV3zMGfAgg==", "requires": { "@babel/runtime": "^7.12.5", "react-is": "^16.12.0", @@ -31371,12 +31356,12 @@ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" }, "resolve": { - "version": "1.21.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.1.tgz", - "integrity": "sha512-lfEImVbnolPuaSZuLQ52cAxPBHeI77sPwCOWRdy12UG/CNa8an7oBHH1R+Fp1/mUqSJi4c8TIP6FOIPSZAUrEQ==", + "version": "1.22.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", + "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==", "dev": true, "requires": { - "is-core-module": "^2.8.0", + "is-core-module": "^2.8.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" } @@ -31469,9 +31454,9 @@ } }, "rollup": { - "version": "2.65.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.65.0.tgz", - "integrity": "sha512-ohZVYrhtVMTqqeqH26sngfMiyGDg6gCUReOsoflXvYpzUkDHp8sVG8F9FQxjs72OfnLWpXP2nNNqQ9I0vkRovA==", + "version": "2.66.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz", + "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -32296,12 +32281,12 @@ } }, "stylehacks": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz", - "integrity": "sha512-Es0rVnHIqbWzveU1b24kbw92HsebBepxfcqe5iix7t9j0PQqhs0IxXVXv0pY2Bxa08CgMkzD6OWql7kbGOuEdA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.2.tgz", + "integrity": "sha512-114zeJdOpTrbQYRD4OU5UWJ99LKUaqCPJTU1HQ/n3q3BwmllFN8kHENaLnOeqVq6AhXrWfxHNZTl33iJ4oy3cQ==", "dev": true, "requires": { - "browserslist": "^4.16.0", + "browserslist": "^4.16.6", "postcss-selector-parser": "^6.0.4" } }, @@ -32472,9 +32457,9 @@ "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==" }, "tailwindcss": { - "version": "3.0.15", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.15.tgz", - "integrity": "sha512-bT2iy7FtjwgsXik4ZoJnHXR+SRCiGR1W95fVqpLZebr64m4ahwUwRbIAc5w5+2fzr1YF4Ct2eI7dojMRRl8sVQ==", + "version": "3.0.16", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.16.tgz", + "integrity": "sha512-1L8E5Wr+o1c4kxxObNz2owJe94a7BLEMV+2Lz6wzprJdcs3ENSRR9t4OZf2OqtRNS/q/zFPuOKoLtQoy3Lrhhw==", "dev": true, "requires": { "arg": "^5.0.1", @@ -32485,7 +32470,7 @@ "detective": "^5.2.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.2.7", + "fast-glob": "^3.2.11", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "normalize-path": "^3.0.0", @@ -33076,9 +33061,9 @@ "dev": true }, "webpack": { - "version": "5.66.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.66.0.tgz", - "integrity": "sha512-NJNtGT7IKpGzdW7Iwpn/09OXz9inIkeIQ/ibY6B+MdV1x6+uReqz/5z1L89ezWnpPDWpXF0TY5PCYKQdWVn8Vg==", + "version": "5.67.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.67.0.tgz", + "integrity": "sha512-LjFbfMh89xBDpUMgA1W9Ur6Rn/gnr2Cq1jjHFPo4v6a79/ypznSYbAyPgGhwsxBtMIaEmDD1oJoA7BEYw/Fbrw==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", @@ -33104,7 +33089,7 @@ "tapable": "^2.1.1", "terser-webpack-plugin": "^5.1.3", "watchpack": "^2.3.1", - "webpack-sources": "^3.2.2" + "webpack-sources": "^3.2.3" }, "dependencies": { "@types/estree": { diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 63aaa635..ba12ca63 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -378,7 +378,7 @@ AFRAME.registerComponent("model", { 1.0 / ((texture.image.width / dim) * spacing.x), 1.0 / ((texture.image.height / dim) * spacing.y), 1.0 / (slices * spacing.z), - ] + ]; const zScale = volumeScale[0] / volumeScale[2]; // Set material properties From 7683a6bfdef08d024cb78863f2b63747acb9cdbb Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Tue, 25 Jan 2022 16:39:50 -0500 Subject: [PATCH 19/38] refractor: use defaults from constants.js in aframe schema --- src/Aframe/model.js | 47 ++++++++++++++++++--------------- src/components/VolumeViewer.jsx | 8 +++--- src/constants/constants.js | 4 +-- 3 files changed, 32 insertions(+), 27 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index ba12ca63..0d0895f3 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -1,26 +1,28 @@ /* globals AFRAME THREE */ import "./Shader.js"; +import { + DEFAULT_TRANSFER_FUNCTION, + DEFAULT_MODEL, + DEFAULT_COLOR_MAP, +} from "../constants/constants"; const bind = AFRAME.utils.bind; AFRAME.registerComponent("model", { schema: { - colorMap: { type: "string", default: "" }, + colorMap: { type: "string", default: DEFAULT_COLOR_MAP }, transferFunction: { parse: JSON.parse, - default: [ - { x: 0, y: 0 }, - { x: 1, y: 1 }, - ], + default: DEFAULT_TRANSFER_FUNCTION, }, useTransferFunction: { type: "boolean", default: false }, - channel: { type: "number", default: 1 }, - intensity: { type: "number", default: 1.0 }, - path: { type: "string", default: "" }, - slices: { type: "number", default: 55 }, + channel: { type: "number", default: DEFAULT_MODEL.channel }, + intensity: { type: "number", default: DEFAULT_MODEL.intensity }, + path: { type: "string" }, + slices: { type: "number", default: DEFAULT_MODEL.slices }, spacing: { parse: JSON.parse, - default: { x: 1, y: 1, z: 1 }, + default: DEFAULT_MODEL.spacing, }, }, @@ -31,23 +33,24 @@ AFRAME.registerComponent("model", { this.grabbed = false; this.sceneHandler = this.el.sceneEl; this.canvas = this.el.sceneEl.canvas; + this.clip2DPlaneRendered = false; // TODO: Leave as this.data.colorMap this.currentColorMap = this.data.colorMap; - // Get other elements + // Get other entities this.controllerHandler = document.getElementById("rhand").object3D; this.controllerHandler.matrixAutoUpdate = false; this.clipPlaneListenerHandler = document.getElementById( "clipplane2DListener" ).object3D; - this.clip2DPlaneRendered = false; - let clipplane2D = document.getElementById("clipplane2D"); - this.clipPlaneHandler = clipplane2D.object3D; - if (clipplane2D !== undefined) - this.clipplane2DHandler = clipplane2D.object3D; - // Add event listeners and bind functions + // const clipplane2D = document.getElementById("clipplane2D"); + // this.clipPlaneHandler = clipplane2D.object3D; + // if (clipplane2D !== undefined) + // this.clipplane2DHandler = clipplane2D.object3D; + + // Bind functions this.onEnterVR = bind(this.onEnterVR, this); this.onExitVR = bind(this.onExitVR, this); this.onCollide = this.onCollide.bind(this); @@ -58,6 +61,8 @@ AFRAME.registerComponent("model", { this.updateDataChannel = this.updateDataChannel.bind(this); this.updateColorMapping = this.updateColorMapping.bind(this); this.updateOpacityData = this.updateOpacityData.bind(this); + + // Add event listeners this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); this.el.sceneEl.addEventListener("exit-vr", this.onExitVR); this.el.addEventListener("raycaster-intersected", this.onCollide); @@ -66,6 +71,10 @@ AFRAME.registerComponent("model", { this.onClearCollide ); + // Activate camera + const cameraEl = document.querySelector("#camera"); + cameraEl.setAttribute("camera", "active", true); + // NOT SURE WHAT THIS DOES // this.opacityControlPoints = [0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]; // let jet_values = [ @@ -136,10 +145,6 @@ AFRAME.registerComponent("model", { // ]; // } // } - - // Activate camera - let cameraEl = document.querySelector("#camera"); - cameraEl.setAttribute("camera", "active", true); }, update: function (oldData) { diff --git a/src/components/VolumeViewer.jsx b/src/components/VolumeViewer.jsx index dbacb298..a2ea067c 100644 --- a/src/components/VolumeViewer.jsx +++ b/src/components/VolumeViewer.jsx @@ -143,6 +143,10 @@ VolumeViewer.propTypes = { /** The model to be displayed and it's related information */ model: PropTypes.shape({ + /** Channel to load data from (R:1, G:2, B:3)*/ + channel: PropTypes.number, + /** Increase/decrease voxels intensity */ + intensity: PropTypes.number, /** Path to the model REQUIRED */ path: PropTypes.string.isRequired, /** Position of the model in the scene */ @@ -165,10 +169,6 @@ VolumeViewer.propTypes = { y: PropTypes.number, z: PropTypes.number, }), - /** Channel to load data from (R:1, G:2, B:3)*/ - channel: PropTypes.number, - /** Increase/decrease voxels intensity */ - intensity: PropTypes.number, }), /** diff --git a/src/constants/constants.js b/src/constants/constants.js index 893d784e..490eb248 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -14,14 +14,14 @@ const DEFAULT_COLOR_MAPS = [ const DEFAULT_COLOR_MAP = grayscaleColorMap; const DEFAULT_MODEL = { + channel: 1, + intensity: 1.0, position: "0 0 0", range: { min: 0, max: 1, unit: "" }, rotation: "0 0 0", scale: "1 1 1", slices: 55, spacing: { x: 2, y: 2, z: 1 }, - channel: 1, - intensity: 1.0, }; const DEFAULT_TRANSFER_FUNCTION = [ From bc73e910652ac11923f9480b97bbec7005cb0fbf Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Tue, 25 Jan 2022 17:29:31 -0500 Subject: [PATCH 20/38] refractor: clean up model.js functions --- src/Aframe/model.js | 281 +++++++++--------------------- src/Aframe/render-2d-clipplane.js | 20 +-- src/components/AframeScene.jsx | 1 + 3 files changed, 84 insertions(+), 218 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 0d0895f3..df827c83 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -4,40 +4,34 @@ import { DEFAULT_TRANSFER_FUNCTION, DEFAULT_MODEL, DEFAULT_COLOR_MAP, + DEFAULT_SLIDERS, } from "../constants/constants"; const bind = AFRAME.utils.bind; +// TODO: Pass in full colorMap not just the path AFRAME.registerComponent("model", { schema: { - colorMap: { type: "string", default: DEFAULT_COLOR_MAP }, - transferFunction: { - parse: JSON.parse, - default: DEFAULT_TRANSFER_FUNCTION, - }, + colorMap: { type: "string", default: DEFAULT_COLOR_MAP.path }, + sliders: { parse: JSON.parse, default: DEFAULT_SLIDERS }, + transferFunction: { parse: JSON.parse, default: DEFAULT_TRANSFER_FUNCTION }, useTransferFunction: { type: "boolean", default: false }, channel: { type: "number", default: DEFAULT_MODEL.channel }, intensity: { type: "number", default: DEFAULT_MODEL.intensity }, path: { type: "string" }, slices: { type: "number", default: DEFAULT_MODEL.slices }, - spacing: { - parse: JSON.parse, - default: DEFAULT_MODEL.spacing, - }, + spacing: { parse: JSON.parse, default: DEFAULT_MODEL.spacing }, }, init: function () { this.colorTransferMap = new Map(); - this.newAlphaData = []; - this.rayCollided = false; - this.grabbed = false; this.sceneHandler = this.el.sceneEl; this.canvas = this.el.sceneEl.canvas; + this.alphaData = []; + this.rayCollided = false; + this.grabbed = false; this.clip2DPlaneRendered = false; - // TODO: Leave as this.data.colorMap - this.currentColorMap = this.data.colorMap; - // Get other entities this.controllerHandler = document.getElementById("rhand").object3D; this.controllerHandler.matrixAutoUpdate = false; @@ -57,10 +51,11 @@ AFRAME.registerComponent("model", { this.onClearCollide = this.onClearCollide.bind(this); this.getMesh = this.getMesh.bind(this); this.loadModel = this.loadModel.bind(this); + this.updateChannel = this.updateChannel.bind(this); + this.updateColorMap = this.updateColorMap.bind(this); this.updateTransferTexture = this.updateTransferTexture.bind(this); - this.updateDataChannel = this.updateDataChannel.bind(this); - this.updateColorMapping = this.updateColorMapping.bind(this); this.updateOpacityData = this.updateOpacityData.bind(this); + this.updateMeshClipMatrix = this.updateMeshClipMatrix.bind(this); // Add event listeners this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); @@ -74,202 +69,87 @@ AFRAME.registerComponent("model", { // Activate camera const cameraEl = document.querySelector("#camera"); cameraEl.setAttribute("camera", "active", true); - - // NOT SURE WHAT THIS DOES - // this.opacityControlPoints = [0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]; - // let jet_values = [ - // [0, 0, 0.5], - // [0, 0, 1], - // [0, 0.5, 1], - // [0, 1, 1], - // [0.5, 1, 0.5], - // [1, 1, 0], - // [1, 0.5, 0], - // [1, 0, 0], - // [0.5, 0, 0], - // ]; - // const pData = []; - // this.alphaData = []; - - // const indices = []; - // const zeroArray = [0, 0, 0, 0]; - - // //setting up control points - // for (let i = 0; i < 9; i++) { - // const index = i * 28; - // while (pData.length < index) { - // pData.push(zeroArray); - // } - - // pData.push([ - // jet_values[i][0] * 255, - // jet_values[i][1] * 255, - // jet_values[i][2] * 255, - // this.opacityControlPoints[i] * 255, - // ]); - // indices.push(index); - // } - - // //interpolation between opacity control points - // for (let j = 0; j < 9 - 1; j++) { - // const dDataA = pData[indices[j + 1]][3] - pData[indices[j]][3]; - // const dIndex = indices[j + 1] - indices[j]; - // const dDataIncA = dDataA / dIndex; - // for (let idx = indices[j] + 1; idx < indices[j + 1]; idx++) { - // let alpha = pData[idx - 1][3] + dDataIncA; - // this.alphaData[idx] = alpha; - // } - // } - - // // interpolation between colors control points - // for (let j = 0; j < 9 - 1; j++) { - // const dDataR = pData[indices[j + 1]][0] - pData[indices[j]][0]; - // const dDataG = pData[indices[j + 1]][1] - pData[indices[j]][1]; - // const dDataB = pData[indices[j + 1]][2] - pData[indices[j]][2]; - // const dDataA = pData[indices[j + 1]][3] - pData[indices[j]][3]; - // const dIndex = indices[j + 1] - indices[j]; - - // const dDataIncR = dDataR / dIndex; - // const dDataIncG = dDataG / dIndex; - // const dDataIncB = dDataB / dIndex; - // const dDataIncA = dDataA / dIndex; - - // for (let idx = indices[j] + 1; idx < indices[j + 1]; idx++) { - // const alpha = pData[idx - 1][3] + dDataIncA; - // this.alphaData[idx] = alpha; - // pData[idx] = [ - // pData[idx - 1][0] + dDataIncR, - // pData[idx - 1][1] + dDataIncG, - // pData[idx - 1][2] + dDataIncB, - // alpha, - // ]; - // } - // } }, update: function (oldData) { // Update model - if (oldData.path !== this.data.path) { - this.loadModel(); - } + if (oldData.path !== this.data.path) this.loadModel(); // Update color map - if (oldData.colorMap !== this.data.colorMap) { - this.currentColorMap = this.data.colorMap; - this.updateColorMapping(); - } - - // Update transfer function - if ( - this.data.useTransferFunction && - "transferFunction" in this.data && - oldData.transferFunction !== this.data.transferFunction - ) { - this.updateOpacityData(this.data.transferFunction); - this.updateTransferTexture(); - } + if (oldData.colorMap !== this.data.colorMap) this.updateColorMap(); - // Update channels - if ( - !this.data.useTransferFunction && - this.data.channel !== undefined && - oldData.channel !== this.data.channel - ) { - this.updateDataChannel(); + if (this.data.useTransferFunction) { + // Update transfer function + if (oldData.transferFunction !== this.data.transferFunction) + this.updateOpacityData(); + } else { + // Update channel + if (oldData.channel !== this.data.channel) this.updateChannel(); } }, tick: function (time, timeDelta) { const isVrModeActive = this.sceneHandler.is("vr-mode"); - if (this.clipPlaneListenerHandler !== undefined && !isVrModeActive) { - if ( - this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") - .activateClipPlane && - !this.clip2DPlaneRendered - ) { + const mesh = this.getMesh(); + + if (this.clipPlaneListenerHandler && !isVrModeActive) { + const activateClipPlane = this.clipPlaneListenerHandler.el.getAttribute( + "render-2d-clipplane" + ).activateClipPlane; + + if (activateClipPlane && !this.clip2DPlaneRendered) { this.clip2DPlaneRendered = true; - } else if ( - !this.clipPlaneListenerHandler.el.getAttribute("render-2d-clipplane") - .activateClipPlane && - this.clip2DPlaneRendered - ) { + } else if (!activateClipPlane && this.clip2DPlaneRendered) { this.clip2DPlaneRendered = false; - if (this.getMesh() !== undefined) { - const material = this.getMesh().material; + if (mesh) { + const material = mesh.material; material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); } } if (this.clip2DPlaneRendered) { - if (this.getMesh() !== undefined) { - const material = this.getMesh().material; - - if (material !== undefined) { - const sliceX = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).clipX; - const sliceY = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).clipY; - const sliceZ = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).clipZ; + if (mesh) { + const material = mesh.material; + // TODO: Run on sliders Update, not tick (?) + if (material) { + const sliders = this.data.sliders; material.uniforms.box_min.value = new THREE.Vector3( - sliceX.x, - sliceY.x, - sliceZ.x + sliders.x[0], + sliders.y[0], + sliders.z[0] ); material.uniforms.box_max.value = new THREE.Vector3( - sliceX.y, - sliceY.y, - sliceZ.y + sliders.x[1], + sliders.y[1], + sliders.z[1] ); } } } - } else if (this.controllerHandler !== undefined && isVrModeActive) { - if ( - !this.controllerHandler.el.getAttribute("buttons-check").grabObject && - this.grabbed - ) { - this.el - .getObject3D("mesh") - .matrix.premultiply(this.controllerHandler.matrixWorld); - this.el - .getObject3D("mesh") - .matrix.decompose( - this.getMesh().position, - this.getMesh().quaternion, - this.getMesh().scale - ); - this.el.object3D.add(this.getMesh()); - + } else if (this.controllerHandler && isVrModeActive) { + const grabObject = + this.controllerHandler.el.getAttribute("buttons-check").grabObject; + if (this.grabbed && !grabObject) { + mesh.matrix.premultiply(this.controllerHandler.matrixWorld); + mesh.matrix.decompose(mesh.position, mesh.quaternion, mesh.scale); + this.el.object3D.add(mesh); this.grabbed = false; } // grab mesh - if ( - this.controllerHandler.el.getAttribute("buttons-check").grabObject && - this.rayCollided && - !this.grabbed - ) { + if (!this.grabbed && grabObject && this.rayCollided) { const inverseControllerPos = new THREE.Matrix4(); inverseControllerPos.getInverse(this.controllerHandler.matrixWorld); - this.getMesh().matrix.premultiply(inverseControllerPos); - this.el - .getObject3D("mesh") - .matrix.decompose( - this.getMesh().position, - this.getMesh().quaternion, - this.getMesh().scale - ); - this.controllerHandler.add(this.getMesh()); + mesh.matrix.premultiply(inverseControllerPos); + mesh.matrix.decompose(mesh.position, mesh.quaternion, mesh.scale); + this.controllerHandler.add(mesh); this.grabbed = true; } + // TODO: Bind with this and remove function parameter this.updateMeshClipMatrix(this.controllerHandler.matrixWorld); } }, @@ -286,10 +166,13 @@ AFRAME.registerComponent("model", { /** EVENT LISTENER FUNCTIONS */ + onEnterVR: function () {}, + onExitVR: function () { - if (this.getMesh() !== undefined) { - this.getMesh().position.copy(new THREE.Vector3()); - this.getMesh().rotation.set(0, 0, 0); + const mesh = this.getMesh(); + if (mesh) { + mesh.position.copy(new THREE.Vector3()); + mesh.rotation.set(0, 0, 0); } }, @@ -308,17 +191,15 @@ AFRAME.registerComponent("model", { }, updateTransferTexture: function () { - if (this.colorTransferMap.has(this.currentColorMap)) { - const colorTransfer = this.colorTransferMap.get( - this.currentColorMap - ).data; + if (this.colorTransferMap.has(this.data.colorMap)) { + const colorTransfer = this.colorTransferMap.get(this.data.colorMap).data; if (colorTransfer) { const imageTransferData = new Uint8Array(4 * 256); for (let i = 0; i < 256; i++) { imageTransferData[i * 4 + 0] = colorTransfer[i * 3 + 0]; imageTransferData[i * 4 + 1] = colorTransfer[i * 3 + 1]; imageTransferData[i * 4 + 2] = colorTransfer[i * 3 + 2]; - imageTransferData[i * 4 + 3] = this.newAlphaData[i]; + imageTransferData[i * 4 + 3] = this.alphaData[i]; } const transferTexture = new THREE.DataTexture( imageTransferData, @@ -340,7 +221,7 @@ AFRAME.registerComponent("model", { } }, - updateDataChannel: function () { + updateChannel: function () { if (this.getMesh() !== undefined) { let material = this.getMesh().material; material.uniforms.channel.value = this.data.channel; @@ -366,8 +247,8 @@ AFRAME.registerComponent("model", { const useTransferFunction = this.data.useTransferFunction; const intensity = this.data.intensity; - const updateColorMapping = this.updateColorMapping; - const updateDataChannel = this.updateDataChannel; + const updateColorMap = this.updateColorMap; + const updateChannel = this.updateChannel; // Load model new THREE.TextureLoader().load( @@ -421,8 +302,8 @@ AFRAME.registerComponent("model", { material.needsUpdate = true; // Update colorMapping/data channel once model is loaded - if (useTransferFunction) updateColorMapping(); - else updateDataChannel(); + if (useTransferFunction) updateColorMap(); + else updateChannel(); }, function () {}, function () { @@ -432,8 +313,9 @@ AFRAME.registerComponent("model", { } }, - updateColorMapping: function () { - if (!this.colorTransferMap.has(this.currentColorMap)) { + updateColorMap: function () { + let colorMap = this.data.colorMap; + if (!this.colorTransferMap.has(colorMap)) { const colorCanvas = document.createElement("canvas"); const imgWidth = 255; @@ -446,15 +328,12 @@ AFRAME.registerComponent("model", { }; // Re-inject local image with semi-colon - if (this.currentColorMap.startsWith("data:image/png")) { - this.currentColorMap = - this.currentColorMap.substring(0, 14) + - ";" + - this.currentColorMap.substring(14); + if (colorMap.startsWith("data:image/png")) { + colorMap = colorMap.substring(0, 14) + ";" + colorMap.substring(14); } - newColorMap.img.src = this.currentColorMap; - this.colorTransferMap.set(this.currentColorMap, newColorMap); + newColorMap.img.src = colorMap; + this.colorTransferMap.set(colorMap, newColorMap); const mappedColorMap = newColorMap; const updateTransferTexture = this.updateTransferTexture; @@ -479,8 +358,9 @@ AFRAME.registerComponent("model", { } }, - updateOpacityData: function (transferFunction) { - this.newAlphaData = []; + updateOpacityData: function () { + this.alphaData = []; + const transferFunction = this.data.transferFunction; for (let i = 0; i < transferFunction.length - 1; i++) { const start = transferFunction[i]; const end = transferFunction[i + 1]; @@ -490,9 +370,10 @@ AFRAME.registerComponent("model", { const alphaStart = start.y * 255; const alphaEnd = end.y * 255; for (let j = 1 / deltaX; j < 1; j += 1 / deltaX) { - this.newAlphaData.push(alphaStart * (1 - j) + alphaEnd * j); + this.alphaData.push(alphaStart * (1 - j) + alphaEnd * j); } } + this.updateTransferTexture(); }, updateMeshClipMatrix: function (currentSpaceClipMatrix) { diff --git a/src/Aframe/render-2d-clipplane.js b/src/Aframe/render-2d-clipplane.js index 55dc925e..ed0446ba 100644 --- a/src/Aframe/render-2d-clipplane.js +++ b/src/Aframe/render-2d-clipplane.js @@ -19,8 +19,6 @@ AFRAME.registerComponent("render-2d-clipplane", { xBounds: { type: "array", default: [0, 1] }, yBounds: { type: "array", default: [0, 1] }, zBounds: { type: "array", default: [0, 1] }, - currentAxisAngle: { type: "vec3" }, - rotateAngle: { type: "vec3" }, clipX: { type: "vec2" }, clipY: { type: "vec2" }, clipZ: { type: "vec2" }, @@ -43,16 +41,6 @@ AFRAME.registerComponent("render-2d-clipplane", { update: function () {}, tick: function (time, timeDelta) { - // I dont know why I have to save the current angle axis using a temporal variable. Maybe Aframe updates - // data on a asynchronous call - this.tempVec.x = this.data.xCLipPlaneRotation; - this.tempVec.y = this.data.yCLipPlaneRotation; - this.tempVec.z = this.data.zCLipPlaneRotation; - - this.data.currentAxisAngle.x = this.tempVec.x; - this.data.currentAxisAngle.y = this.tempVec.y; - this.data.currentAxisAngle.z = this.tempVec.z; - this.data.clipX = { x: this.data.xBounds[0], y: this.data.xBounds[1] }; this.data.clipY = { x: this.data.yBounds[0], y: this.data.yBounds[1] }; this.data.clipZ = { x: this.data.zBounds[0], y: this.data.zBounds[1] }; @@ -71,7 +59,8 @@ AFRAME.registerComponent("render-2d-clipplane", { }, remove: function () { - this.removeEventListeners(); + window.removeEventListener("keydown", this.onKeydown); + window.removeEventListener("keyup", this.onKeyUp); }, onKeyDown: function (event) { @@ -88,9 +77,4 @@ AFRAME.registerComponent("render-2d-clipplane", { activate2DClipPlane: function (event) { this.data.isActive = false; }, - - removeEventListeners: function () { - window.removeEventListener("keydown", this.onKeydown); - window.removeEventListener("keyup", this.onKeyUp); - }, }); diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index ab882041..844ade95 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -77,6 +77,7 @@ function AframeScene({ class="clickableMesh" model={toAframeString({ colorMap: colorMap.path, + sliders: JSON.stringify(sliders), transferFunction: JSON.stringify(transferFunction), useTransferFunction, channel: model.channel, From 2f1cf8a482f783fff108a633f62e14a1ae4f164f Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Wed, 26 Jan 2022 10:53:30 -0500 Subject: [PATCH 21/38] refractor: bind functions before adding event listeners --- src/Aframe/arcball-camera.js | 6 +++--- src/Aframe/buttons-check.js | 8 ++++---- src/Aframe/cursor-listener.js | 6 +++--- src/Aframe/entity-collider-check.js | 2 +- src/Aframe/model.js | 7 ++----- src/Aframe/render-2d-clipplane.js | 1 - 6 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/Aframe/arcball-camera.js b/src/Aframe/arcball-camera.js index e0262e19..4c337341 100644 --- a/src/Aframe/arcball-camera.js +++ b/src/Aframe/arcball-camera.js @@ -39,11 +39,11 @@ AFRAME.registerComponent("arcball-camera", { aCanvas.style.cursor = "grab"; }); - // Add event listeners and bind functions - el.sceneEl.addEventListener("enter-vr", this.onEnterVR); - el.sceneEl.addEventListener("exit-vr", this.onExitVR); + // Bind functions and add event listeners this.onEnterVR = bind(this.onEnterVR, this); this.onExitVR = bind(this.onExitVR, this); + el.sceneEl.addEventListener("enter-vr", this.onEnterVR); + el.sceneEl.addEventListener("exit-vr", this.onExitVR); }, onEnterVR: function () { diff --git a/src/Aframe/buttons-check.js b/src/Aframe/buttons-check.js index ab259ae4..c176caa3 100644 --- a/src/Aframe/buttons-check.js +++ b/src/Aframe/buttons-check.js @@ -8,14 +8,14 @@ AFRAME.registerComponent("buttons-check", { }, init: function () { - this.el.addEventListener("gripdown", this.onGripDown); - this.el.addEventListener("gripup", this.onGripUp); - this.el.addEventListener("triggerdown", this.onTriggerDown); - this.el.addEventListener("triggerup", this.onTriggerUp); this.onGripDown = this.onGripDown.bind(this); this.onGripUp = this.onGripDown.bind(this); this.onTriggerDown = this.onTriggerDown.bind(this); this.onTriggerUp = this.onTriggerUp.bind(this); + this.el.addEventListener("gripdown", this.onGripDown); + this.el.addEventListener("gripup", this.onGripUp); + this.el.addEventListener("triggerdown", this.onTriggerDown); + this.el.addEventListener("triggerup", this.onTriggerUp); }, remove: function () { diff --git a/src/Aframe/cursor-listener.js b/src/Aframe/cursor-listener.js index c2124545..8fc25b09 100644 --- a/src/Aframe/cursor-listener.js +++ b/src/Aframe/cursor-listener.js @@ -4,12 +4,12 @@ AFRAME.registerComponent("cursor-listener", { init: function () { this.dragging = false; - this.el.addEventListener("mousedown", this.onMouseDown); - this.el.addEventListener("mousemove ", this.onMouseMove); - this.el.addEventListener("mouseup ", this.onMouseUp); this.onMouseDown = this.onMouseDown.bind(this); this.onMouseMove = this.onMouseMove.bind(this); this.onMouseUp = this.onMouseUp.bind(this); + this.el.addEventListener("mousedown", this.onMouseDown); + this.el.addEventListener("mousemove ", this.onMouseMove); + this.el.addEventListener("mouseup ", this.onMouseUp); }, remove: function () { diff --git a/src/Aframe/entity-collider-check.js b/src/Aframe/entity-collider-check.js index 62ac6c77..492cb6a4 100644 --- a/src/Aframe/entity-collider-check.js +++ b/src/Aframe/entity-collider-check.js @@ -6,8 +6,8 @@ AFRAME.registerComponent("entity-collider-check", { }, init: function () { - this.el.addEventListener("raycaster-intersected", this.onCollide); this.onCollide = this.onCollide.bind(this); + this.el.addEventListener("raycaster-intersected", this.onCollide); }, remove: function () { diff --git a/src/Aframe/model.js b/src/Aframe/model.js index df827c83..e792ed49 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -1,4 +1,5 @@ /* globals AFRAME THREE */ + import "./Shader.js"; import { DEFAULT_TRANSFER_FUNCTION, @@ -10,6 +11,7 @@ import { const bind = AFRAME.utils.bind; // TODO: Pass in full colorMap not just the path +// TODO: Add dependency array AFRAME.registerComponent("model", { schema: { colorMap: { type: "string", default: DEFAULT_COLOR_MAP.path }, @@ -39,11 +41,6 @@ AFRAME.registerComponent("model", { "clipplane2DListener" ).object3D; - // const clipplane2D = document.getElementById("clipplane2D"); - // this.clipPlaneHandler = clipplane2D.object3D; - // if (clipplane2D !== undefined) - // this.clipplane2DHandler = clipplane2D.object3D; - // Bind functions this.onEnterVR = bind(this.onEnterVR, this); this.onExitVR = bind(this.onExitVR, this); diff --git a/src/Aframe/render-2d-clipplane.js b/src/Aframe/render-2d-clipplane.js index ed0446ba..50845ad6 100644 --- a/src/Aframe/render-2d-clipplane.js +++ b/src/Aframe/render-2d-clipplane.js @@ -33,7 +33,6 @@ AFRAME.registerComponent("render-2d-clipplane", { this.onKeyDown = this.onKeyDown.bind(this); this.onKeyUp = this.onKeyUp.bind(this); this.activate2DClipPlane = this.activate2DClipPlane.bind(this); - window.addEventListener("keydown", this.onKeyDown); window.addEventListener("keyup", this.onKeyUp); }, From 261f6fb9aec09550e81de776563db10ffb830c1b Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Wed, 26 Jan 2022 11:00:34 -0500 Subject: [PATCH 22/38] refractor: add dependency array --- src/Aframe/model.js | 13 ++++++++----- src/components/AframeScene.jsx | 1 + 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index e792ed49..1b68afab 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -11,8 +11,8 @@ import { const bind = AFRAME.utils.bind; // TODO: Pass in full colorMap not just the path -// TODO: Add dependency array AFRAME.registerComponent("model", { + dependencies: ["render-2d-clipplane", "buttons-check"], schema: { colorMap: { type: "string", default: DEFAULT_COLOR_MAP.path }, sliders: { parse: JSON.parse, default: DEFAULT_SLIDERS }, @@ -100,6 +100,7 @@ AFRAME.registerComponent("model", { this.clip2DPlaneRendered = false; if (mesh) { + // Reset sliders to full box? const material = mesh.material; material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); @@ -129,6 +130,7 @@ AFRAME.registerComponent("model", { } else if (this.controllerHandler && isVrModeActive) { const grabObject = this.controllerHandler.el.getAttribute("buttons-check").grabObject; + if (this.grabbed && !grabObject) { mesh.matrix.premultiply(this.controllerHandler.matrixWorld); mesh.matrix.decompose(mesh.position, mesh.quaternion, mesh.scale); @@ -373,7 +375,7 @@ AFRAME.registerComponent("model", { this.updateTransferTexture(); }, - updateMeshClipMatrix: function (currentSpaceClipMatrix) { + updateMeshClipMatrix: function () { const volumeMatrix = this.getMesh().matrixWorld; //material for setting the clipPlane and clipping value const material = this.getMesh().material; @@ -387,12 +389,13 @@ AFRAME.registerComponent("model", { translationMatrix.makeTranslation(-0.5, -0.5, -0.5); //inverse of the clipMatrix - const currentSpaceClipMatrix_inverse = new THREE.Matrix4(); - currentSpaceClipMatrix_inverse.copy(currentSpaceClipMatrix).invert(); + const controllerMatrix = this.controllerHandler.matrixWorld; + const controllerMatrix_inverse = new THREE.Matrix4(); + controllerMatrix_inverse.copy(controllerMatrix).invert(); //outputmatrix - controller_inverse * volume * scale * translation const clipMatrix = new THREE.Matrix4(); - clipMatrix.multiplyMatrices(currentSpaceClipMatrix_inverse, volumeMatrix); + clipMatrix.multiplyMatrices(controllerMatrix_inverse, volumeMatrix); clipMatrix.multiplyMatrices(clipMatrix, scaleMatrix); clipMatrix.multiplyMatrices(clipMatrix, translationMatrix); diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index 844ade95..63bc14b5 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -58,6 +58,7 @@ function AframeScene({ })} /> + {/* CLICKABLE PLANE FOR MOUSE INTERACTIONS */} Date: Wed, 26 Jan 2022 12:28:26 -0500 Subject: [PATCH 23/38] build: remove unused dependencies --- example/package-lock.json | 239 ++------------------------------------ package-lock.json | 81 +++---------- package.json | 1 - src/Aframe/model.js | 82 ++++++------- 4 files changed, 68 insertions(+), 335 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index efc33f0d..742fe60e 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -20,7 +20,6 @@ "dependencies": { "@reach/listbox": "^0.16.2", "aframe": "^1.2.0", - "aframe-event-set-component": "^5.0.0", "d3-scale": "^4.0.2", "rc-slider": "^9.7.4" }, @@ -55,100 +54,9 @@ "styled-components": "^5.0.0" } }, - "../node_modules/react": { - "version": "17.0.2", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "../node_modules/react-dom": { - "version": "17.0.2", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - }, - "peerDependencies": { - "react": "17.0.2" - } - }, - "../node_modules/react-scripts": { - "version": "5.0.0", - "license": "MIT", - "dependencies": { - "@babel/core": "^7.16.0", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@svgr/webpack": "^5.5.0", - "babel-jest": "^27.4.2", - "babel-loader": "^8.2.3", - "babel-plugin-named-asset-import": "^0.3.8", - "babel-preset-react-app": "^10.0.1", - "bfj": "^7.0.2", - "browserslist": "^4.18.1", - "camelcase": "^6.2.1", - "case-sensitive-paths-webpack-plugin": "^2.4.0", - "css-loader": "^6.5.1", - "css-minimizer-webpack-plugin": "^3.2.0", - "dotenv": "^10.0.0", - "dotenv-expand": "^5.1.0", - "eslint": "^8.3.0", - "eslint-config-react-app": "^7.0.0", - "eslint-webpack-plugin": "^3.1.1", - "file-loader": "^6.2.0", - "fs-extra": "^10.0.0", - "html-webpack-plugin": "^5.5.0", - "identity-obj-proxy": "^3.0.0", - "jest": "^27.4.3", - "jest-resolve": "^27.4.2", - "jest-watch-typeahead": "^1.0.0", - "mini-css-extract-plugin": "^2.4.5", - "postcss": "^8.4.4", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-loader": "^6.2.1", - "postcss-normalize": "^10.0.1", - "postcss-preset-env": "^7.0.1", - "prompts": "^2.4.2", - "react-app-polyfill": "^3.0.0", - "react-dev-utils": "^12.0.0", - "react-refresh": "^0.11.0", - "resolve": "^1.20.0", - "resolve-url-loader": "^4.0.0", - "sass-loader": "^12.3.0", - "semver": "^7.3.5", - "source-map-loader": "^3.0.0", - "style-loader": "^3.3.1", - "tailwindcss": "^3.0.2", - "terser-webpack-plugin": "^5.2.5", - "webpack": "^5.64.4", - "webpack-dev-server": "^4.6.0", - "webpack-manifest-plugin": "^4.0.2", - "workbox-webpack-plugin": "^6.4.1" - }, - "bin": { - "react-scripts": "bin/react-scripts.js" - }, - "engines": { - "node": ">=14.0.0" - }, - "optionalDependencies": { - "fsevents": "^2.3.2" - }, - "peerDependencies": { - "react": ">= 16", - "typescript": "^3.2.1 || ^4" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, + "../node_modules/react": {}, + "../node_modules/react-dom": {}, + "../node_modules/react-scripts": {}, "node_modules/react": { "resolved": "../node_modules/react", "link": true @@ -168,74 +76,13 @@ }, "dependencies": { "react": { - "version": "file:../node_modules/react", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } + "version": "file:../node_modules/react" }, "react-dom": { - "version": "file:../node_modules/react-dom", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - } + "version": "file:../node_modules/react-dom" }, "react-scripts": { - "version": "file:../node_modules/react-scripts", - "requires": { - "@babel/core": "^7.16.0", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@svgr/webpack": "^5.5.0", - "babel-jest": "^27.4.2", - "babel-loader": "^8.2.3", - "babel-plugin-named-asset-import": "^0.3.8", - "babel-preset-react-app": "^10.0.1", - "bfj": "^7.0.2", - "browserslist": "^4.18.1", - "camelcase": "^6.2.1", - "case-sensitive-paths-webpack-plugin": "^2.4.0", - "css-loader": "^6.5.1", - "css-minimizer-webpack-plugin": "^3.2.0", - "dotenv": "^10.0.0", - "dotenv-expand": "^5.1.0", - "eslint": "^8.3.0", - "eslint-config-react-app": "^7.0.0", - "eslint-webpack-plugin": "^3.1.1", - "file-loader": "^6.2.0", - "fs-extra": "^10.0.0", - "fsevents": "^2.3.2", - "html-webpack-plugin": "^5.5.0", - "identity-obj-proxy": "^3.0.0", - "jest": "^27.4.3", - "jest-resolve": "^27.4.2", - "jest-watch-typeahead": "^1.0.0", - "mini-css-extract-plugin": "^2.4.5", - "postcss": "^8.4.4", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-loader": "^6.2.1", - "postcss-normalize": "^10.0.1", - "postcss-preset-env": "^7.0.1", - "prompts": "^2.4.2", - "react": "^17.0.2", - "react-app-polyfill": "^3.0.0", - "react-dev-utils": "^12.0.0", - "react-dom": "^17.0.2", - "react-refresh": "^0.11.0", - "resolve": "^1.20.0", - "resolve-url-loader": "^4.0.0", - "sass-loader": "^12.3.0", - "semver": "^7.3.5", - "source-map-loader": "^3.0.0", - "style-loader": "^3.3.1", - "tailwindcss": "^3.0.2", - "terser-webpack-plugin": "^5.2.5", - "webpack": "^5.64.4", - "webpack-dev-server": "^4.6.0", - "webpack-manifest-plugin": "^4.0.2", - "workbox-webpack-plugin": "^6.4.1" - } + "version": "file:../node_modules/react-scripts" }, "react-volume-viewer": { "version": "file:..", @@ -247,7 +94,6 @@ "@rollup/plugin-node-resolve": "^13.0.6", "@rollup/plugin-url": "^6.1.0", "aframe": "^1.2.0", - "aframe-event-set-component": "^5.0.0", "babel-eslint": "^10.0.3", "babel-preset-stage-0": "^6.24.1", "cross-env": "^7.0.3", @@ -267,76 +113,9 @@ "styled-components": "^5.0.0" }, "dependencies": { - "react": { - "version": "17.0.2", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, - "react-dom": { - "version": "17.0.2", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - } - }, - "react-scripts": { - "version": "5.0.0", - "requires": { - "@babel/core": "^7.16.0", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@svgr/webpack": "^5.5.0", - "babel-jest": "^27.4.2", - "babel-loader": "^8.2.3", - "babel-plugin-named-asset-import": "^0.3.8", - "babel-preset-react-app": "^10.0.1", - "bfj": "^7.0.2", - "browserslist": "^4.18.1", - "camelcase": "^6.2.1", - "case-sensitive-paths-webpack-plugin": "^2.4.0", - "css-loader": "^6.5.1", - "css-minimizer-webpack-plugin": "^3.2.0", - "dotenv": "^10.0.0", - "dotenv-expand": "^5.1.0", - "eslint": "^8.3.0", - "eslint-config-react-app": "^7.0.0", - "eslint-webpack-plugin": "^3.1.1", - "file-loader": "^6.2.0", - "fs-extra": "^10.0.0", - "fsevents": "^2.3.2", - "html-webpack-plugin": "^5.5.0", - "identity-obj-proxy": "^3.0.0", - "jest": "^27.4.3", - "jest-resolve": "^27.4.2", - "jest-watch-typeahead": "^1.0.0", - "mini-css-extract-plugin": "^2.4.5", - "postcss": "^8.4.4", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-loader": "^6.2.1", - "postcss-normalize": "^10.0.1", - "postcss-preset-env": "^7.0.1", - "prompts": "^2.4.2", - "react": "^17.0.2", - "react-app-polyfill": "^3.0.0", - "react-dev-utils": "^12.0.0", - "react-dom": "^17.0.2", - "react-refresh": "^0.11.0", - "resolve": "^1.20.0", - "resolve-url-loader": "^4.0.0", - "sass-loader": "^12.3.0", - "semver": "^7.3.5", - "source-map-loader": "^3.0.0", - "style-loader": "^3.3.1", - "tailwindcss": "^3.0.2", - "terser-webpack-plugin": "^5.2.5", - "webpack": "^5.64.4", - "webpack-dev-server": "^4.6.0", - "webpack-manifest-plugin": "^4.0.2", - "workbox-webpack-plugin": "^6.4.1" - } - } + "react": {}, + "react-dom": {}, + "react-scripts": {} } } } diff --git a/package-lock.json b/package-lock.json index a2e9911d..b6651cc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,6 @@ "dependencies": { "@reach/listbox": "^0.16.2", "aframe": "^1.2.0", - "aframe-event-set-component": "^5.0.0", "d3-scale": "^4.0.2", "rc-slider": "^9.7.4" }, @@ -4373,27 +4372,6 @@ "npm": "^2.15.9" } }, - "node_modules/aframe-event-set-component": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/aframe-event-set-component/-/aframe-event-set-component-5.0.0.tgz", - "integrity": "sha512-O9Bhs8Qu2cEilXQ6F2xUxxJIbaZEA2atdIxTwq5qPHRHaIa+8ZghkirUBicNs92aHR9QQwk6ZnRx+SmBXi+B9Q==", - "dependencies": { - "debug": "^2.6.9" - } - }, - "node_modules/aframe-event-set-component/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/aframe-event-set-component/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" - }, "node_modules/aframe/node_modules/debug": { "version": "2.2.0", "resolved": "git+ssh://git@github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a", @@ -5906,9 +5884,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001301", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001301.tgz", - "integrity": "sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==", + "version": "1.0.30001302", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001302.tgz", + "integrity": "sha512-YYTMO+tfwvgUN+1ZnRViE53Ma1S/oETg+J2lISsqi/ZTNThj3ZYBOKP2rHwJc37oCsPqAzJ3w2puZHn0xlLPPw==", "dev": true, "funding": { "type": "opencollective", @@ -6029,9 +6007,9 @@ "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "node_modules/clean-css": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.2.tgz", - "integrity": "sha512-/eR8ru5zyxKzpBLv9YZvMXgTSSQn7AdkMItMYynsFgGwTveCRVam9IUPFloE85B4vAIj05IuKmmEoV7/AQjT0w==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.3.tgz", + "integrity": "sha512-qjywD7LvpZJ5+E16lf00GnMVUX5TEVBcKW1/vtGPgAerHwRwE4JP4p1Y40zbLnup2ZfWsd30P2bHdoAKH93XxA==", "dev": true, "dependencies": { "source-map": "~0.6.0" @@ -8675,9 +8653,9 @@ } }, "node_modules/flatted": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz", - "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==", + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz", + "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", "dev": true }, "node_modules/flatten-vertex-data": { @@ -22541,29 +22519,6 @@ } } }, - "aframe-event-set-component": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/aframe-event-set-component/-/aframe-event-set-component-5.0.0.tgz", - "integrity": "sha512-O9Bhs8Qu2cEilXQ6F2xUxxJIbaZEA2atdIxTwq5qPHRHaIa+8ZghkirUBicNs92aHR9QQwk6ZnRx+SmBXi+B9Q==", - "requires": { - "debug": "^2.6.9" - }, - "dependencies": { - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "requires": { - "ms": "2.0.0" - } - }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" - } - } - }, "agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", @@ -23822,9 +23777,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001301", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001301.tgz", - "integrity": "sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==", + "version": "1.0.30001302", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001302.tgz", + "integrity": "sha512-YYTMO+tfwvgUN+1ZnRViE53Ma1S/oETg+J2lISsqi/ZTNThj3ZYBOKP2rHwJc37oCsPqAzJ3w2puZHn0xlLPPw==", "dev": true }, "cardboard-vr-display": { @@ -23917,9 +23872,9 @@ "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "clean-css": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.2.tgz", - "integrity": "sha512-/eR8ru5zyxKzpBLv9YZvMXgTSSQn7AdkMItMYynsFgGwTveCRVam9IUPFloE85B4vAIj05IuKmmEoV7/AQjT0w==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.3.tgz", + "integrity": "sha512-qjywD7LvpZJ5+E16lf00GnMVUX5TEVBcKW1/vtGPgAerHwRwE4JP4p1Y40zbLnup2ZfWsd30P2bHdoAKH93XxA==", "dev": true, "requires": { "source-map": "~0.6.0" @@ -25921,9 +25876,9 @@ } }, "flatted": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz", - "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==", + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz", + "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", "dev": true }, "flatten-vertex-data": { diff --git a/package.json b/package.json index d675a008..e74c6da1 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "dependencies": { "@reach/listbox": "^0.16.2", "aframe": "^1.2.0", - "aframe-event-set-component": "^5.0.0", "d3-scale": "^4.0.2", "rc-slider": "^9.7.4" }, diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 1b68afab..d935ccdd 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -189,46 +189,6 @@ AFRAME.registerComponent("model", { return this.el.getObject3D("mesh"); }, - updateTransferTexture: function () { - if (this.colorTransferMap.has(this.data.colorMap)) { - const colorTransfer = this.colorTransferMap.get(this.data.colorMap).data; - if (colorTransfer) { - const imageTransferData = new Uint8Array(4 * 256); - for (let i = 0; i < 256; i++) { - imageTransferData[i * 4 + 0] = colorTransfer[i * 3 + 0]; - imageTransferData[i * 4 + 1] = colorTransfer[i * 3 + 1]; - imageTransferData[i * 4 + 2] = colorTransfer[i * 3 + 2]; - imageTransferData[i * 4 + 3] = this.alphaData[i]; - } - const transferTexture = new THREE.DataTexture( - imageTransferData, - 256, - 1, - THREE.RGBAFormat - ); - transferTexture.needsUpdate = true; - - if (this.getMesh() !== undefined) { - let material = this.getMesh().material; - // Shader script uses channel 6 for color mapping - material.uniforms.channel.value = 6; - material.uniforms.u_lut.value = transferTexture; - material.uniforms.useLut.value = this.data.useTransferFunction; - material.needsUpdate = true; - } - } - } - }, - - updateChannel: function () { - if (this.getMesh() !== undefined) { - let material = this.getMesh().material; - material.uniforms.channel.value = this.data.channel; - material.uniforms.useLut.value = this.data.useTransferFunction; - material.needsUpdate = true; - } - }, - loadModel: function () { let currentVolume = this.getMesh(); const { spacing, slices, path } = this.data; @@ -292,7 +252,7 @@ AFRAME.registerComponent("model", { transparent: true, vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, - side: THREE.BackSide, // The volume shader uses the backface as its "reference point" + side: THREE.BackSide, // The volume shader uses the "backface" as its reference point }); // Model is a 1x1x1 box with the file's material @@ -312,6 +272,46 @@ AFRAME.registerComponent("model", { } }, + updateTransferTexture: function () { + if (this.colorTransferMap.has(this.data.colorMap)) { + const colorTransfer = this.colorTransferMap.get(this.data.colorMap).data; + if (colorTransfer) { + const imageTransferData = new Uint8Array(4 * 256); + for (let i = 0; i < 256; i++) { + imageTransferData[i * 4 + 0] = colorTransfer[i * 3 + 0]; + imageTransferData[i * 4 + 1] = colorTransfer[i * 3 + 1]; + imageTransferData[i * 4 + 2] = colorTransfer[i * 3 + 2]; + imageTransferData[i * 4 + 3] = this.alphaData[i]; + } + const transferTexture = new THREE.DataTexture( + imageTransferData, + 256, + 1, + THREE.RGBAFormat + ); + transferTexture.needsUpdate = true; + + if (this.getMesh() !== undefined) { + let material = this.getMesh().material; + // Shader script uses channel 6 for color mapping + material.uniforms.channel.value = 6; + material.uniforms.u_lut.value = transferTexture; + material.uniforms.useLut.value = this.data.useTransferFunction; + material.needsUpdate = true; + } + } + } + }, + + updateChannel: function () { + if (this.getMesh() !== undefined) { + let material = this.getMesh().material; + material.uniforms.channel.value = this.data.channel; + material.uniforms.useLut.value = this.data.useTransferFunction; + material.needsUpdate = true; + } + }, + updateColorMap: function () { let colorMap = this.data.colorMap; if (!this.colorTransferMap.has(colorMap)) { From c6007fccf3624de94f35c0ba1a0ee732ca62ed70 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Wed, 26 Jan 2022 16:18:09 -0500 Subject: [PATCH 24/38] refractor: rename updateColorMapping as loadColorMap --- src/Aframe/model.js | 176 +++++++++++++++++---------------- src/components/AframeScene.jsx | 3 +- 2 files changed, 91 insertions(+), 88 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index d935ccdd..94ef1d85 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -14,7 +14,8 @@ const bind = AFRAME.utils.bind; AFRAME.registerComponent("model", { dependencies: ["render-2d-clipplane", "buttons-check"], schema: { - colorMap: { type: "string", default: DEFAULT_COLOR_MAP.path }, + // colorMap: { type: "string", default: DEFAULT_COLOR_MAP.path }, + colorMap: { parse: JSON.parse, default: DEFAULT_COLOR_MAP }, sliders: { parse: JSON.parse, default: DEFAULT_SLIDERS }, transferFunction: { parse: JSON.parse, default: DEFAULT_TRANSFER_FUNCTION }, useTransferFunction: { type: "boolean", default: false }, @@ -26,13 +27,12 @@ AFRAME.registerComponent("model", { }, init: function () { - this.colorTransferMap = new Map(); + this.colorMaps = new Map(); this.sceneHandler = this.el.sceneEl; this.canvas = this.el.sceneEl.canvas; this.alphaData = []; this.rayCollided = false; this.grabbed = false; - this.clip2DPlaneRendered = false; // Get other entities this.controllerHandler = document.getElementById("rhand").object3D; @@ -49,7 +49,7 @@ AFRAME.registerComponent("model", { this.getMesh = this.getMesh.bind(this); this.loadModel = this.loadModel.bind(this); this.updateChannel = this.updateChannel.bind(this); - this.updateColorMap = this.updateColorMap.bind(this); + this.loadColorMap = this.loadColorMap.bind(this); this.updateTransferTexture = this.updateTransferTexture.bind(this); this.updateOpacityData = this.updateOpacityData.bind(this); this.updateMeshClipMatrix = this.updateMeshClipMatrix.bind(this); @@ -73,7 +73,16 @@ AFRAME.registerComponent("model", { if (oldData.path !== this.data.path) this.loadModel(); // Update color map - if (oldData.colorMap !== this.data.colorMap) this.updateColorMap(); + if (oldData.colorMap !== this.data.colorMap) { + // Re-inject local image with semi-colon + if (this.data.colorMap.path.startsWith("data:image/png")) { + this.data.colorMap.path = + this.data.colorMap.path.substring(0, 14) + + ";" + + this.data.colorMap.path.substring(14); + } + this.loadColorMap(); + } if (this.data.useTransferFunction) { // Update transfer function @@ -89,45 +98,35 @@ AFRAME.registerComponent("model", { const isVrModeActive = this.sceneHandler.is("vr-mode"); const mesh = this.getMesh(); - if (this.clipPlaneListenerHandler && !isVrModeActive) { + if (!isVrModeActive && this.clipPlaneListenerHandler) { + // Not in VR, controlled by clipPlanelistenerHandler const activateClipPlane = this.clipPlaneListenerHandler.el.getAttribute( "render-2d-clipplane" ).activateClipPlane; - if (activateClipPlane && !this.clip2DPlaneRendered) { - this.clip2DPlaneRendered = true; - } else if (!activateClipPlane && this.clip2DPlaneRendered) { - this.clip2DPlaneRendered = false; - - if (mesh) { - // Reset sliders to full box? - const material = mesh.material; + // TODO: Run on sliders Update, not tick + if (mesh) { + const material = mesh.material; + if (activateClipPlane) { + const sliders = this.data.sliders; + material.uniforms.box_min.value = new THREE.Vector3( + sliders.x[0], + sliders.y[0], + sliders.z[0] + ); + material.uniforms.box_max.value = new THREE.Vector3( + sliders.x[1], + sliders.y[1], + sliders.z[1] + ); + } else { + // Ignore sliders material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); } } - - if (this.clip2DPlaneRendered) { - if (mesh) { - const material = mesh.material; - - // TODO: Run on sliders Update, not tick (?) - if (material) { - const sliders = this.data.sliders; - material.uniforms.box_min.value = new THREE.Vector3( - sliders.x[0], - sliders.y[0], - sliders.z[0] - ); - material.uniforms.box_max.value = new THREE.Vector3( - sliders.x[1], - sliders.y[1], - sliders.z[1] - ); - } - } - } } else if (this.controllerHandler && isVrModeActive) { + // In VR, position controlled by controllerHandler const grabObject = this.controllerHandler.el.getAttribute("buttons-check").grabObject; @@ -147,9 +146,7 @@ AFRAME.registerComponent("model", { this.controllerHandler.add(mesh); this.grabbed = true; } - - // TODO: Bind with this and remove function parameter - this.updateMeshClipMatrix(this.controllerHandler.matrixWorld); + this.updateMeshClipMatrix(); } }, @@ -206,7 +203,7 @@ AFRAME.registerComponent("model", { const useTransferFunction = this.data.useTransferFunction; const intensity = this.data.intensity; - const updateColorMap = this.updateColorMap; + const loadColorMap = this.loadColorMap; const updateChannel = this.updateChannel; // Load model @@ -261,7 +258,7 @@ AFRAME.registerComponent("model", { material.needsUpdate = true; // Update colorMapping/data channel once model is loaded - if (useTransferFunction) updateColorMap(); + if (useTransferFunction) loadColorMap(); else updateChannel(); }, function () {}, @@ -272,9 +269,59 @@ AFRAME.registerComponent("model", { } }, + loadColorMap: function () { + const colorMap = this.data.colorMap; + + // TODO: add data to this.data.colorMap instead of all this map stuff + + if (!this.colorMaps.has(colorMap.name)) { + const imgWidth = 255; + const imgHeight = 15; + + const newColorMap = { + img: document.createElement("img"), + width: imgWidth, + height: imgHeight, + data: null, + }; + newColorMap.img.src = colorMap.path; + this.colorMaps.set(this.data.colorMap.name, newColorMap); + const mappedColorMap = newColorMap; + + // Create canvas + // Draw image to canvas + // Read canvas RGB data + + // Draw colorMap on an html canvas + const canvas = document.createElement("canvas"); + canvas.height = imgHeight; + canvas.width = imgWidth; + const ctx = canvas.getContext("2d"); + + const updateTransferTexture = this.updateTransferTexture; + newColorMap.img.onload = function (data) { + ctx.drawImage(newColorMap.img, 0, 0); + const colorData = ctx.getImageData(0, 0, imgWidth, 1).data; + const colorTransfer = new Uint8Array(3 * 256); + + // Extract RGB values from colorMap (ignore alpha) + for (let i = 0; i < 256; i++) { + colorTransfer[i * 3 + 0] = colorData[i * 4 + 0]; + colorTransfer[i * 3 + 1] = colorData[i * 4 + 1]; + colorTransfer[i * 3 + 2] = colorData[i * 4 + 2]; + } + mappedColorMap.data = colorTransfer; + + updateTransferTexture(); + }; + } else { + this.updateTransferTexture(); + } + }, + updateTransferTexture: function () { - if (this.colorTransferMap.has(this.data.colorMap)) { - const colorTransfer = this.colorTransferMap.get(this.data.colorMap).data; + if (this.colorMaps.has(this.data.colorMap.name)) { + const colorTransfer = this.colorMaps.get(this.data.colorMap.name).data; if (colorTransfer) { const imageTransferData = new Uint8Array(4 * 256); for (let i = 0; i < 256; i++) { @@ -312,51 +359,6 @@ AFRAME.registerComponent("model", { } }, - updateColorMap: function () { - let colorMap = this.data.colorMap; - if (!this.colorTransferMap.has(colorMap)) { - const colorCanvas = document.createElement("canvas"); - - const imgWidth = 255; - const imgHeight = 15; - const newColorMap = { - img: document.createElement("img"), - width: imgWidth, - height: imgHeight, - data: null, - }; - - // Re-inject local image with semi-colon - if (colorMap.startsWith("data:image/png")) { - colorMap = colorMap.substring(0, 14) + ";" + colorMap.substring(14); - } - - newColorMap.img.src = colorMap; - this.colorTransferMap.set(colorMap, newColorMap); - const mappedColorMap = newColorMap; - - const updateTransferTexture = this.updateTransferTexture; - newColorMap.img.onload = function (data) { - colorCanvas.height = imgHeight; - colorCanvas.width = imgWidth; - const colorContext = colorCanvas.getContext("2d"); - colorContext.drawImage(newColorMap.img, 0, 0); - const colorData = colorContext.getImageData(0, 0, imgWidth, 1).data; - const colorTransfer = new Uint8Array(3 * 256); - for (let i = 0; i < 256; i++) { - colorTransfer[i * 3] = colorData[i * 4]; - colorTransfer[i * 3 + 1] = colorData[i * 4 + 1]; - colorTransfer[i * 3 + 2] = colorData[i * 4 + 2]; - } - mappedColorMap.data = colorTransfer; - - updateTransferTexture(); - }; - } else { - this.updateTransferTexture(); - } - }, - updateOpacityData: function () { this.alphaData = []; const transferFunction = this.data.transferFunction; diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index 63bc14b5..04e2ca9a 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -77,7 +77,8 @@ function AframeScene({ id="volumeCube" class="clickableMesh" model={toAframeString({ - colorMap: colorMap.path, + // colorMap: colorMap.path, + colorMap: JSON.stringify(colorMap), sliders: JSON.stringify(sliders), transferFunction: JSON.stringify(transferFunction), useTransferFunction, From 1460291615ba3b68997a94fd517bc147b0153188 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Wed, 26 Jan 2022 16:25:23 -0500 Subject: [PATCH 25/38] chore: npm run lint --- src/Aframe/model.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 94ef1d85..c5b614a0 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -10,7 +10,6 @@ import { const bind = AFRAME.utils.bind; -// TODO: Pass in full colorMap not just the path AFRAME.registerComponent("model", { dependencies: ["render-2d-clipplane", "buttons-check"], schema: { @@ -379,7 +378,6 @@ AFRAME.registerComponent("model", { updateMeshClipMatrix: function () { const volumeMatrix = this.getMesh().matrixWorld; - //material for setting the clipPlane and clipping value const material = this.getMesh().material; //scalematrix for zscaling From 3c96270163722d89210a8d37f0fc8da69d3d9967 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Wed, 26 Jan 2022 17:16:22 -0500 Subject: [PATCH 26/38] refractor: refractor loadColorMap intro it's own data array --- src/Aframe/model.js | 141 +++++++++++++++++++------------------------- 1 file changed, 60 insertions(+), 81 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index c5b614a0..5b3e966e 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -26,9 +26,9 @@ AFRAME.registerComponent("model", { }, init: function () { - this.colorMaps = new Map(); this.sceneHandler = this.el.sceneEl; this.canvas = this.el.sceneEl.canvas; + this.colorMapData = []; this.alphaData = []; this.rayCollided = false; this.grabbed = false; @@ -65,6 +65,10 @@ AFRAME.registerComponent("model", { // Activate camera const cameraEl = document.querySelector("#camera"); cameraEl.setAttribute("camera", "active", true); + + // Load data and colorMap + this.loadModel(); + this.loadColorMap(); }, update: function (oldData) { @@ -73,13 +77,6 @@ AFRAME.registerComponent("model", { // Update color map if (oldData.colorMap !== this.data.colorMap) { - // Re-inject local image with semi-colon - if (this.data.colorMap.path.startsWith("data:image/png")) { - this.data.colorMap.path = - this.data.colorMap.path.substring(0, 14) + - ";" + - this.data.colorMap.path.substring(14); - } this.loadColorMap(); } @@ -271,91 +268,73 @@ AFRAME.registerComponent("model", { loadColorMap: function () { const colorMap = this.data.colorMap; - // TODO: add data to this.data.colorMap instead of all this map stuff - - if (!this.colorMaps.has(colorMap.name)) { - const imgWidth = 255; - const imgHeight = 15; - - const newColorMap = { - img: document.createElement("img"), - width: imgWidth, - height: imgHeight, - data: null, - }; - newColorMap.img.src = colorMap.path; - this.colorMaps.set(this.data.colorMap.name, newColorMap); - const mappedColorMap = newColorMap; - - // Create canvas - // Draw image to canvas - // Read canvas RGB data - - // Draw colorMap on an html canvas - const canvas = document.createElement("canvas"); - canvas.height = imgHeight; - canvas.width = imgWidth; - const ctx = canvas.getContext("2d"); - - const updateTransferTexture = this.updateTransferTexture; - newColorMap.img.onload = function (data) { - ctx.drawImage(newColorMap.img, 0, 0); - const colorData = ctx.getImageData(0, 0, imgWidth, 1).data; - const colorTransfer = new Uint8Array(3 * 256); - - // Extract RGB values from colorMap (ignore alpha) - for (let i = 0; i < 256; i++) { - colorTransfer[i * 3 + 0] = colorData[i * 4 + 0]; - colorTransfer[i * 3 + 1] = colorData[i * 4 + 1]; - colorTransfer[i * 3 + 2] = colorData[i * 4 + 2]; - } - mappedColorMap.data = colorTransfer; + // Re-inject local image with semi-colon + if (colorMap.path.startsWith("data:image/png")) { + colorMap.path = + colorMap.path.substring(0, 14) + ";" + colorMap.path.substring(14); + } + + // Create and image and canvas + const img = document.createElement("img"); + img.src = colorMap.path; + const canvas = document.createElement("canvas"); + const ctx = canvas.getContext("2d"); + + // Draw img on the canvas and grab RGB data + img.onload = () => { + ctx.drawImage(img, 0, 0); + const colorData = ctx.getImageData(0, 0, img.width, 1).data; + const colorTransfer = new Uint8Array(3 * 256); + + // Extract RGB values from colorMap (ignore alpha) + for (let i = 0; i < 256; i++) { + colorTransfer[i * 3 + 0] = colorData[i * 4 + 0]; + colorTransfer[i * 3 + 1] = colorData[i * 4 + 1]; + colorTransfer[i * 3 + 2] = colorData[i * 4 + 2]; + } + this.colorMapData = colorTransfer; - updateTransferTexture(); - }; - } else { this.updateTransferTexture(); - } + }; }, updateTransferTexture: function () { - if (this.colorMaps.has(this.data.colorMap.name)) { - const colorTransfer = this.colorMaps.get(this.data.colorMap.name).data; - if (colorTransfer) { - const imageTransferData = new Uint8Array(4 * 256); - for (let i = 0; i < 256; i++) { - imageTransferData[i * 4 + 0] = colorTransfer[i * 3 + 0]; - imageTransferData[i * 4 + 1] = colorTransfer[i * 3 + 1]; - imageTransferData[i * 4 + 2] = colorTransfer[i * 3 + 2]; - imageTransferData[i * 4 + 3] = this.alphaData[i]; - } - const transferTexture = new THREE.DataTexture( - imageTransferData, - 256, - 1, - THREE.RGBAFormat - ); - transferTexture.needsUpdate = true; - - if (this.getMesh() !== undefined) { - let material = this.getMesh().material; - // Shader script uses channel 6 for color mapping - material.uniforms.channel.value = 6; - material.uniforms.u_lut.value = transferTexture; - material.uniforms.useLut.value = this.data.useTransferFunction; - material.needsUpdate = true; - } - } + const colorMapData = this.colorMapData; + const imageTransferData = new Uint8Array(4 * 256); + for (let i = 0; i < 256; i++) { + imageTransferData[i * 4 + 0] = colorMapData[i * 3 + 0]; + imageTransferData[i * 4 + 1] = colorMapData[i * 3 + 1]; + imageTransferData[i * 4 + 2] = colorMapData[i * 3 + 2]; + imageTransferData[i * 4 + 3] = this.alphaData[i]; } + const transferTexture = new THREE.DataTexture( + imageTransferData, + 256, + 1, + THREE.RGBAFormat + ); + transferTexture.needsUpdate = true; + + // TODO: updateTransferFunction and such are running before loadModel is compete + // Probably more of these statements elsewhere + + // Apply transfer texture + if (this.getMesh()) { + const material = this.getMesh().material; + material.uniforms.u_lut.value = transferTexture; + material.uniforms.channel.value = this.data.channel; + material.uniforms.useLut.value = this.data.useTransferFunction; + material.needsUpdate = true; + } else console.log("MODEL NOT LOADED YET"); }, updateChannel: function () { - if (this.getMesh() !== undefined) { - let material = this.getMesh().material; + if (this.getMesh()) { + const material = this.getMesh().material; material.uniforms.channel.value = this.data.channel; material.uniforms.useLut.value = this.data.useTransferFunction; material.needsUpdate = true; - } + } else console.log("MODEL NOT LOADED YET"); }, updateOpacityData: function () { From 854b94933423e7fd333712f5f4717c9744d443db Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Wed, 26 Jan 2022 18:15:45 -0500 Subject: [PATCH 27/38] refractor: use arrow functiosn to maintain context --- src/Aframe/model.js | 148 ++++++++++++++++++++------------------------ 1 file changed, 68 insertions(+), 80 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 5b3e966e..b3fe4122 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -10,6 +10,10 @@ import { const bind = AFRAME.utils.bind; +// TODO: loadModel asynchronously (trying to apply texture before it's created) +// TODO: bind this to THREE.loadTexture +// TODO: Handle slider changes in update not tick + AFRAME.registerComponent("model", { dependencies: ["render-2d-clipplane", "buttons-check"], schema: { @@ -183,86 +187,72 @@ AFRAME.registerComponent("model", { }, loadModel: function () { - let currentVolume = this.getMesh(); - const { spacing, slices, path } = this.data; - if (currentVolume !== undefined) { - //clear mesh - this.el.removeObject3D("mesh"); - currentVolume = undefined; - } + const { spacing, slices, path, useTransferFunction, intensity } = this.data; - if (path !== "") { - const el = this.el; - const canvasWidth = this.canvas.width; - const canvasHeight = this.canvas.height; - - const useTransferFunction = this.data.useTransferFunction; - const intensity = this.data.intensity; - - const loadColorMap = this.loadColorMap; - const updateChannel = this.updateChannel; - - // Load model - new THREE.TextureLoader().load( - path, - function (texture) { - // Create 3D material from texture - texture.minFilter = texture.magFilter = THREE.LinearFilter; - texture.unpackAlignment = 1; - texture.needsUpdate = true; - - const dim = Math.ceil(Math.sqrt(slices)); - const volumeScale = [ - 1.0 / ((texture.image.width / dim) * spacing.x), - 1.0 / ((texture.image.height / dim) * spacing.y), - 1.0 / (slices * spacing.z), - ]; - const zScale = volumeScale[0] / volumeScale[2]; - - // Set material properties - const shader = THREE.ShaderLib["ModelShader"]; - const uniforms = THREE.UniformsUtils.clone(shader.uniforms); - uniforms.dim.value = dim; - uniforms.intensity.value = intensity; - uniforms.slice.value = slices; - uniforms.step_size.value = new THREE.Vector3(0.01, 0.01, 0.01); - uniforms.u_data.value = texture; - uniforms.viewPort.value = new THREE.Vector2( - canvasWidth, - canvasHeight - ); - uniforms.zScale.value = zScale; - if (useTransferFunction) { - uniforms.channel.value = 1; - uniforms.useLut.value = true; - } else { - uniforms.channel.value = 6; - uniforms.useLut.value = false; - } - - const material = new THREE.ShaderMaterial({ - uniforms: uniforms, - transparent: true, - vertexShader: shader.vertexShader, - fragmentShader: shader.fragmentShader, - side: THREE.BackSide, // The volume shader uses the "backface" as its reference point - }); - - // Model is a 1x1x1 box with the file's material - const geometry = new THREE.BoxGeometry(1, 1, 1); - el.setObject3D("mesh", new THREE.Mesh(geometry, material)); - material.needsUpdate = true; - - // Update colorMapping/data channel once model is loaded - if (useTransferFunction) loadColorMap(); - else updateChannel(); - }, - function () {}, - function () { - throw new Error("Could not load the data at", path); + // Clear mesh + const mesh = this.getMesh(); + if (mesh) this.el.removeObject3D("mesh"); + + new THREE.TextureLoader().load( + path, + (texture) => { + // Create 3D material from texture + texture.minFilter = texture.magFilter = THREE.LinearFilter; + texture.unpackAlignment = 1; + texture.needsUpdate = true; + + const dim = Math.ceil(Math.sqrt(slices)); + const volumeScale = [ + 1.0 / ((texture.image.width / dim) * spacing.x), + 1.0 / ((texture.image.height / dim) * spacing.y), + 1.0 / (slices * spacing.z), + ]; + const zScale = volumeScale[0] / volumeScale[2]; + + // Set material properties + const shader = THREE.ShaderLib["ModelShader"]; + const uniforms = THREE.UniformsUtils.clone(shader.uniforms); + uniforms.dim.value = dim; + uniforms.intensity.value = intensity; + uniforms.slice.value = slices; + uniforms.step_size.value = new THREE.Vector3(0.01, 0.01, 0.01); + uniforms.u_data.value = texture; + uniforms.viewPort.value = new THREE.Vector2( + this.canvas.width, + this.canvas.height + ); + uniforms.zScale.value = zScale; + if (useTransferFunction) { + uniforms.channel.value = 1; + uniforms.useLut.value = true; + } else { + uniforms.channel.value = 6; + uniforms.useLut.value = false; } - ); - } + + const material = new THREE.ShaderMaterial({ + uniforms: uniforms, + transparent: true, + vertexShader: shader.vertexShader, + fragmentShader: shader.fragmentShader, + side: THREE.BackSide, // The volume shader uses the "backface" as its reference point + }); + + // Model is a 1x1x1 box with the file's material + const geometry = new THREE.BoxGeometry(1, 1, 1); + this.el.setObject3D("mesh", new THREE.Mesh(geometry, material)); + material.needsUpdate = true; + + // Update colorMapping/data channel once model is loaded + if (useTransferFunction) this.loadColorMap(); + else this.updateChannel(); + // }.bind(this), + }, + () => {}, + () => { + throw new Error("Could not load the data at", path); + } + ); }, loadColorMap: function () { @@ -316,8 +306,6 @@ AFRAME.registerComponent("model", { transferTexture.needsUpdate = true; // TODO: updateTransferFunction and such are running before loadModel is compete - // Probably more of these statements elsewhere - // Apply transfer texture if (this.getMesh()) { const material = this.getMesh().material; From f3d793eac6c21a9302a281143e4ac22caccbf0ef Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 27 Jan 2022 14:42:06 -0500 Subject: [PATCH 28/38] refractor: remove grabbing mouse over entire canvas Cursor style is handled elsewhere - only show grab/grabbing when over model --- package-lock.json | 64 ++++++++++++++++++------------------ src/Aframe/arcball-camera.js | 16 ++------- 2 files changed, 35 insertions(+), 45 deletions(-) diff --git a/package-lock.json b/package-lock.json index b6651cc3..d73a5329 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2040,9 +2040,9 @@ } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.9.2", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz", - "integrity": "sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA==", + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz", + "integrity": "sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==", "dev": true, "dependencies": { "@humanwhocodes/object-schema": "^1.2.1", @@ -5884,9 +5884,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001302", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001302.tgz", - "integrity": "sha512-YYTMO+tfwvgUN+1ZnRViE53Ma1S/oETg+J2lISsqi/ZTNThj3ZYBOKP2rHwJc37oCsPqAzJ3w2puZHn0xlLPPw==", + "version": "1.0.30001303", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001303.tgz", + "integrity": "sha512-/Mqc1oESndUNszJP0kx0UaQU9kEv9nNtJ7Kn8AdA0mNnH8eR1cj0kG+NbNuC1Wq/b21eA8prhKRA3bbkjONegQ==", "dev": true, "funding": { "type": "opencollective", @@ -7410,9 +7410,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.53", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.53.tgz", - "integrity": "sha512-rFveSKQczlcav+H3zkKqykU6ANseFwXwkl855jOIap5/0gnEcuIhv2ecz6aoTrXavF6I/CEBeRnBnkB51k06ew==", + "version": "1.4.55", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.55.tgz", + "integrity": "sha512-AoCDEVElLY8mwe4TuDDkr1jxvSh/Ih5PFlEXCpmwFkq9JOXn4K58CScgBl+R1ghFW9cPJ7VeWo30nAHSRCe6rw==", "dev": true }, "node_modules/email-addresses": { @@ -7761,9 +7761,9 @@ } }, "node_modules/eslint-module-utils": { - "version": "2.7.2", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz", - "integrity": "sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==", + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz", + "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==", "dev": true, "dependencies": { "debug": "^3.2.7", @@ -17498,14 +17498,14 @@ "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==" }, "node_modules/tailwindcss": { - "version": "3.0.16", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.16.tgz", - "integrity": "sha512-1L8E5Wr+o1c4kxxObNz2owJe94a7BLEMV+2Lz6wzprJdcs3ENSRR9t4OZf2OqtRNS/q/zFPuOKoLtQoy3Lrhhw==", + "version": "3.0.17", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.17.tgz", + "integrity": "sha512-OiHUsmOKQQEg/ocXaLIjk/kOz8EK2jF6iPuc1bQ4NsmhYl7sk70UDsGV02AJvBAAiJhinPCkDR8egT9qY+ulCw==", "dev": true, "dependencies": { "arg": "^5.0.1", "chalk": "^4.1.2", - "chokidar": "^3.5.2", + "chokidar": "^3.5.3", "color-name": "^1.1.4", "cosmiconfig": "^7.0.1", "detective": "^5.2.0", @@ -20759,9 +20759,9 @@ } }, "@humanwhocodes/config-array": { - "version": "0.9.2", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz", - "integrity": "sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA==", + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz", + "integrity": "sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==", "dev": true, "requires": { "@humanwhocodes/object-schema": "^1.2.1", @@ -23777,9 +23777,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001302", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001302.tgz", - "integrity": "sha512-YYTMO+tfwvgUN+1ZnRViE53Ma1S/oETg+J2lISsqi/ZTNThj3ZYBOKP2rHwJc37oCsPqAzJ3w2puZHn0xlLPPw==", + "version": "1.0.30001303", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001303.tgz", + "integrity": "sha512-/Mqc1oESndUNszJP0kx0UaQU9kEv9nNtJ7Kn8AdA0mNnH8eR1cj0kG+NbNuC1Wq/b21eA8prhKRA3bbkjONegQ==", "dev": true }, "cardboard-vr-display": { @@ -24934,9 +24934,9 @@ } }, "electron-to-chromium": { - "version": "1.4.53", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.53.tgz", - "integrity": "sha512-rFveSKQczlcav+H3zkKqykU6ANseFwXwkl855jOIap5/0gnEcuIhv2ecz6aoTrXavF6I/CEBeRnBnkB51k06ew==", + "version": "1.4.55", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.55.tgz", + "integrity": "sha512-AoCDEVElLY8mwe4TuDDkr1jxvSh/Ih5PFlEXCpmwFkq9JOXn4K58CScgBl+R1ghFW9cPJ7VeWo30nAHSRCe6rw==", "dev": true }, "email-addresses": { @@ -25292,9 +25292,9 @@ } }, "eslint-module-utils": { - "version": "2.7.2", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz", - "integrity": "sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==", + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz", + "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==", "dev": true, "requires": { "debug": "^3.2.7", @@ -32412,14 +32412,14 @@ "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==" }, "tailwindcss": { - "version": "3.0.16", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.16.tgz", - "integrity": "sha512-1L8E5Wr+o1c4kxxObNz2owJe94a7BLEMV+2Lz6wzprJdcs3ENSRR9t4OZf2OqtRNS/q/zFPuOKoLtQoy3Lrhhw==", + "version": "3.0.17", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.17.tgz", + "integrity": "sha512-OiHUsmOKQQEg/ocXaLIjk/kOz8EK2jF6iPuc1bQ4NsmhYl7sk70UDsGV02AJvBAAiJhinPCkDR8egT9qY+ulCw==", "dev": true, "requires": { "arg": "^5.0.1", "chalk": "^4.1.2", - "chokidar": "^3.5.2", + "chokidar": "^3.5.3", "color-name": "^1.1.4", "cosmiconfig": "^7.0.1", "detective": "^5.2.0", diff --git a/src/Aframe/arcball-camera.js b/src/Aframe/arcball-camera.js index 4c337341..48fc6409 100644 --- a/src/Aframe/arcball-camera.js +++ b/src/Aframe/arcball-camera.js @@ -17,9 +17,6 @@ AFRAME.registerComponent("arcball-camera", { this.oldMatrix = new THREE.Matrix4(); this.meshObjectHandler = document.getElementById("volumeCube").object3D; - // Move camera to initial position - el.getObject3D("camera").position.copy(this.data.initialPosition); - // Create controls this.controls = new THREE.TrackballControls( el.getObject3D("camera"), @@ -29,21 +26,14 @@ AFRAME.registerComponent("arcball-camera", { this.controls.zoomSpeed = 1.2; this.controls.panSpeed = 0.8; - // Set the pointer to grab/grabbing when over the vr canvas - const aCanvas = document.querySelector(".a-canvas"); - aCanvas.style.cursor = "grab"; - document.addEventListener("mousedown", () => { - aCanvas.style.cursor = "grabbing"; - }); - document.addEventListener("mouseup", () => { - aCanvas.style.cursor = "grab"; - }); - // Bind functions and add event listeners this.onEnterVR = bind(this.onEnterVR, this); this.onExitVR = bind(this.onExitVR, this); el.sceneEl.addEventListener("enter-vr", this.onEnterVR); el.sceneEl.addEventListener("exit-vr", this.onExitVR); + + // Move camera to initial position + el.getObject3D("camera").position.copy(this.data.initialPosition); }, onEnterVR: function () { From 47519cb9dc5541353b77046b3ed8a5059e800d43 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 27 Jan 2022 14:55:52 -0500 Subject: [PATCH 29/38] refractor: apply clipping in update function not tick --- src/Aframe/model.js | 90 +++++++++++++++++++++++---------------------- 1 file changed, 47 insertions(+), 43 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index b3fe4122..b6ea513d 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -17,7 +17,6 @@ const bind = AFRAME.utils.bind; AFRAME.registerComponent("model", { dependencies: ["render-2d-clipplane", "buttons-check"], schema: { - // colorMap: { type: "string", default: DEFAULT_COLOR_MAP.path }, colorMap: { parse: JSON.parse, default: DEFAULT_COLOR_MAP }, sliders: { parse: JSON.parse, default: DEFAULT_SLIDERS }, transferFunction: { parse: JSON.parse, default: DEFAULT_TRANSFER_FUNCTION }, @@ -50,12 +49,13 @@ AFRAME.registerComponent("model", { this.onCollide = this.onCollide.bind(this); this.onClearCollide = this.onClearCollide.bind(this); this.getMesh = this.getMesh.bind(this); - this.loadModel = this.loadModel.bind(this); - this.updateChannel = this.updateChannel.bind(this); - this.loadColorMap = this.loadColorMap.bind(this); - this.updateTransferTexture = this.updateTransferTexture.bind(this); - this.updateOpacityData = this.updateOpacityData.bind(this); - this.updateMeshClipMatrix = this.updateMeshClipMatrix.bind(this); + // this.loadModel = this.loadModel.bind(this); + // this.updateChannel = this.updateChannel.bind(this); + // this.loadColorMap = this.loadColorMap.bind(this); + // this.updateClipping = this.updateClipping.bind(this); + // this.updateTransferTexture = this.updateTransferTexture.bind(this); + // this.updateOpacityData = this.updateOpacityData.bind(this); + // this.updateMeshClipMatrix = this.updateMeshClipMatrix.bind(this); // Add event listeners this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); @@ -80,9 +80,10 @@ AFRAME.registerComponent("model", { if (oldData.path !== this.data.path) this.loadModel(); // Update color map - if (oldData.colorMap !== this.data.colorMap) { - this.loadColorMap(); - } + if (oldData.colorMap !== this.data.colorMap) this.loadColorMap(); + + // Update clipping + if (oldData.sliders !== this.data.sliders) this.updateClipping(); if (this.data.useTransferFunction) { // Update transfer function @@ -98,34 +99,7 @@ AFRAME.registerComponent("model", { const isVrModeActive = this.sceneHandler.is("vr-mode"); const mesh = this.getMesh(); - if (!isVrModeActive && this.clipPlaneListenerHandler) { - // Not in VR, controlled by clipPlanelistenerHandler - const activateClipPlane = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).activateClipPlane; - - // TODO: Run on sliders Update, not tick - if (mesh) { - const material = mesh.material; - if (activateClipPlane) { - const sliders = this.data.sliders; - material.uniforms.box_min.value = new THREE.Vector3( - sliders.x[0], - sliders.y[0], - sliders.z[0] - ); - material.uniforms.box_max.value = new THREE.Vector3( - sliders.x[1], - sliders.y[1], - sliders.z[1] - ); - } else { - // Ignore sliders - material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); - material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); - } - } - } else if (this.controllerHandler && isVrModeActive) { + if (this.controllerHandler && isVrModeActive) { // In VR, position controlled by controllerHandler const grabObject = this.controllerHandler.el.getAttribute("buttons-check").grabObject; @@ -246,7 +220,7 @@ AFRAME.registerComponent("model", { // Update colorMapping/data channel once model is loaded if (useTransferFunction) this.loadColorMap(); else this.updateChannel(); - // }.bind(this), + this.updateClipping(); }, () => {}, () => { @@ -288,6 +262,34 @@ AFRAME.registerComponent("model", { }; }, + updateClipping: function () { + const mesh = this.getMesh(); + const activateClipPlane = this.clipPlaneListenerHandler.el.getAttribute( + "render-2d-clipplane" + ).activateClipPlane; + + if (mesh) { + const material = mesh.material; + if (activateClipPlane) { + const sliders = this.data.sliders; + material.uniforms.box_min.value = new THREE.Vector3( + sliders.x[0], + sliders.y[0], + sliders.z[0] + ); + material.uniforms.box_max.value = new THREE.Vector3( + sliders.x[1], + sliders.y[1], + sliders.z[1] + ); + } else { + // Ignore sliders + material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); + material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); + } + } else console.log("MODEL NOT LOADED YET"); + }, + updateTransferTexture: function () { const colorMapData = this.colorMapData; const imageTransferData = new Uint8Array(4 * 256); @@ -307,8 +309,9 @@ AFRAME.registerComponent("model", { // TODO: updateTransferFunction and such are running before loadModel is compete // Apply transfer texture - if (this.getMesh()) { - const material = this.getMesh().material; + const mesh = this.getMesh(); + if (mesh) { + const material = mesh.material; material.uniforms.u_lut.value = transferTexture; material.uniforms.channel.value = this.data.channel; material.uniforms.useLut.value = this.data.useTransferFunction; @@ -317,8 +320,9 @@ AFRAME.registerComponent("model", { }, updateChannel: function () { - if (this.getMesh()) { - const material = this.getMesh().material; + const mesh = this.getMesh(); + if (mesh) { + const material = mesh.material; material.uniforms.channel.value = this.data.channel; material.uniforms.useLut.value = this.data.useTransferFunction; material.needsUpdate = true; From ba72019755025f49cebcf4603405a8765d6efd64 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 27 Jan 2022 14:59:48 -0500 Subject: [PATCH 30/38] chore: npm run lint --- src/Aframe/model.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index b6ea513d..95d20129 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -12,7 +12,6 @@ const bind = AFRAME.utils.bind; // TODO: loadModel asynchronously (trying to apply texture before it's created) // TODO: bind this to THREE.loadTexture -// TODO: Handle slider changes in update not tick AFRAME.registerComponent("model", { dependencies: ["render-2d-clipplane", "buttons-check"], @@ -49,13 +48,13 @@ AFRAME.registerComponent("model", { this.onCollide = this.onCollide.bind(this); this.onClearCollide = this.onClearCollide.bind(this); this.getMesh = this.getMesh.bind(this); - // this.loadModel = this.loadModel.bind(this); - // this.updateChannel = this.updateChannel.bind(this); - // this.loadColorMap = this.loadColorMap.bind(this); - // this.updateClipping = this.updateClipping.bind(this); - // this.updateTransferTexture = this.updateTransferTexture.bind(this); - // this.updateOpacityData = this.updateOpacityData.bind(this); - // this.updateMeshClipMatrix = this.updateMeshClipMatrix.bind(this); + this.loadModel = this.loadModel.bind(this); + this.updateChannel = this.updateChannel.bind(this); + this.loadColorMap = this.loadColorMap.bind(this); + this.updateClipping = this.updateClipping.bind(this); + this.updateTransferTexture = this.updateTransferTexture.bind(this); + this.updateOpacityData = this.updateOpacityData.bind(this); + this.updateMeshClipMatrix = this.updateMeshClipMatrix.bind(this); // Add event listeners this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); From e8c16ab480f92490d096ea07510914745c04ec4f Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Thu, 27 Jan 2022 15:03:06 -0500 Subject: [PATCH 31/38] refractor: small variable names --- src/Aframe/model.js | 68 ++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 95d20129..f1443fb0 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -231,7 +231,7 @@ AFRAME.registerComponent("model", { loadColorMap: function () { const colorMap = this.data.colorMap; - // Re-inject local image with semi-colon + // Re-inject local image path with semi-colon if (colorMap.path.startsWith("data:image/png")) { colorMap.path = colorMap.path.substring(0, 14) + ";" + colorMap.path.substring(14); @@ -261,34 +261,6 @@ AFRAME.registerComponent("model", { }; }, - updateClipping: function () { - const mesh = this.getMesh(); - const activateClipPlane = this.clipPlaneListenerHandler.el.getAttribute( - "render-2d-clipplane" - ).activateClipPlane; - - if (mesh) { - const material = mesh.material; - if (activateClipPlane) { - const sliders = this.data.sliders; - material.uniforms.box_min.value = new THREE.Vector3( - sliders.x[0], - sliders.y[0], - sliders.z[0] - ); - material.uniforms.box_max.value = new THREE.Vector3( - sliders.x[1], - sliders.y[1], - sliders.z[1] - ); - } else { - // Ignore sliders - material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); - material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); - } - } else console.log("MODEL NOT LOADED YET"); - }, - updateTransferTexture: function () { const colorMapData = this.colorMapData; const imageTransferData = new Uint8Array(4 * 256); @@ -318,6 +290,34 @@ AFRAME.registerComponent("model", { } else console.log("MODEL NOT LOADED YET"); }, + updateClipping: function () { + const mesh = this.getMesh(); + const activateClipPlane = this.clipPlaneListenerHandler.el.getAttribute( + "render-2d-clipplane" + ).activateClipPlane; + + if (mesh) { + const material = mesh.material; + if (activateClipPlane) { + const sliders = this.data.sliders; + material.uniforms.box_min.value = new THREE.Vector3( + sliders.x[0], + sliders.y[0], + sliders.z[0] + ); + material.uniforms.box_max.value = new THREE.Vector3( + sliders.x[1], + sliders.y[1], + sliders.z[1] + ); + } else { + // Ignore sliders + material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); + material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); + } + } else console.log("MODEL NOT LOADED YET"); + }, + updateChannel: function () { const mesh = this.getMesh(); if (mesh) { @@ -350,15 +350,15 @@ AFRAME.registerComponent("model", { const volumeMatrix = this.getMesh().matrixWorld; const material = this.getMesh().material; - //scalematrix for zscaling + // Matrix for zscaling const scaleMatrix = new THREE.Matrix4(); scaleMatrix.makeScale(1, 1, material.uniforms.zScale.value); - //translationmatrix to cube-coordinates ranging from 0 -1 + // Translate to cube-coordinates ranging from 0 -1 const translationMatrix = new THREE.Matrix4(); translationMatrix.makeTranslation(-0.5, -0.5, -0.5); - //inverse of the clipMatrix + // Inverse of the clip matrix const controllerMatrix = this.controllerHandler.matrixWorld; const controllerMatrix_inverse = new THREE.Matrix4(); controllerMatrix_inverse.copy(controllerMatrix).invert(); @@ -371,11 +371,11 @@ AFRAME.registerComponent("model", { //set uniforms of shader const isVrModeActive = this.sceneHandler.is("vr-mode"); - const doClip = + const isClipped = isVrModeActive && this.controllerHandler.el.getAttribute("buttons-check").clipPlane && !this.grabbed; material.uniforms.clipPlane.value = clipMatrix; - material.uniforms.clipping.value = doClip; + material.uniforms.clipping.value = isClipped; }, }); From 24e4da78daf61ab28fb23d2ad5ca89528db5c019 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Fri, 28 Jan 2022 10:25:46 -0500 Subject: [PATCH 32/38] refractor: delete cursor-listener.js Component was did not effect the program's functionality --- src/Aframe/cursor-listener.js | 34 ---------------------------------- src/components/AframeScene.jsx | 3 --- 2 files changed, 37 deletions(-) delete mode 100644 src/Aframe/cursor-listener.js diff --git a/src/Aframe/cursor-listener.js b/src/Aframe/cursor-listener.js deleted file mode 100644 index 8fc25b09..00000000 --- a/src/Aframe/cursor-listener.js +++ /dev/null @@ -1,34 +0,0 @@ -/* globals AFRAME */ - -AFRAME.registerComponent("cursor-listener", { - init: function () { - this.dragging = false; - - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseMove = this.onMouseMove.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - this.el.addEventListener("mousedown", this.onMouseDown); - this.el.addEventListener("mousemove ", this.onMouseMove); - this.el.addEventListener("mouseup ", this.onMouseUp); - }, - - remove: function () { - this.el.removeEventListener("mousedown", this.onMouseDown); - this.el.removeEventListener("mousemove ", this.onMouseMove); - this.el.removeEventListener("mouseup ", this.onMouseUp); - }, - - onMouseDown: function (e) { - this.dragging = true; - }, - - onMouseMove: function (e) { - if (this.dragging) { - // Do something? - } - }, - - onMouseUp: function (e) { - this.dragging = false; - }, -}); diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx index 04e2ca9a..e44a0d85 100644 --- a/src/components/AframeScene.jsx +++ b/src/components/AframeScene.jsx @@ -4,7 +4,6 @@ import "aframe"; import "../Aframe/arcball-camera"; import "../Aframe/buttons-check"; -import "../Aframe/cursor-listener"; import "../Aframe/model"; import "../Aframe/render-2d-clipplane"; import "../Aframe/entity-collider-check"; @@ -69,7 +68,6 @@ function AframeScene({ position={model.position} rotation={model.rotation} scale={model.scale} - cursor-listener /> {/* MODEL */} @@ -77,7 +75,6 @@ function AframeScene({ id="volumeCube" class="clickableMesh" model={toAframeString({ - // colorMap: colorMap.path, colorMap: JSON.stringify(colorMap), sliders: JSON.stringify(sliders), transferFunction: JSON.stringify(transferFunction), From a9b69842ccc69117a00106d5cc9b7251d44c14e3 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Fri, 28 Jan 2022 10:42:36 -0500 Subject: [PATCH 33/38] refractor: used nested loops to write/read RGB data --- src/Aframe/model.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index f1443fb0..4757b244 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -251,9 +251,10 @@ AFRAME.registerComponent("model", { // Extract RGB values from colorMap (ignore alpha) for (let i = 0; i < 256; i++) { - colorTransfer[i * 3 + 0] = colorData[i * 4 + 0]; - colorTransfer[i * 3 + 1] = colorData[i * 4 + 1]; - colorTransfer[i * 3 + 2] = colorData[i * 4 + 2]; + for(let j = 0; j < 3; j++) colorTransfer[i * 3 + j] = colorData[i * 4 + j]; + // colorTransfer[i * 3 + 0] = colorData[i * 4 + 0]; + // colorTransfer[i * 3 + 1] = colorData[i * 4 + 1]; + // colorTransfer[i * 3 + 2] = colorData[i * 4 + 2]; } this.colorMapData = colorTransfer; @@ -265,11 +266,10 @@ AFRAME.registerComponent("model", { const colorMapData = this.colorMapData; const imageTransferData = new Uint8Array(4 * 256); for (let i = 0; i < 256; i++) { - imageTransferData[i * 4 + 0] = colorMapData[i * 3 + 0]; - imageTransferData[i * 4 + 1] = colorMapData[i * 3 + 1]; - imageTransferData[i * 4 + 2] = colorMapData[i * 3 + 2]; + for(let j = 0; j < 3; j++) imageTransferData[i * 4 + j] = colorMapData[i * 3 + j]; imageTransferData[i * 4 + 3] = this.alphaData[i]; } + const transferTexture = new THREE.DataTexture( imageTransferData, 256, From de843542f30df02e40cfdbd498182d6557afd9e7 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Fri, 28 Jan 2022 11:09:00 -0500 Subject: [PATCH 34/38] refractor: change variable names and get camera by id --- src/Aframe/model.js | 65 +++++++++++++++++++++------------------------ 1 file changed, 31 insertions(+), 34 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 4757b244..cee27655 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -10,8 +10,10 @@ import { const bind = AFRAME.utils.bind; -// TODO: loadModel asynchronously (trying to apply texture before it's created) -// TODO: bind this to THREE.loadTexture +// TODO: The function in THREE.TextureLoader().load (loadModel) needs to run asynchronously +// Before loadColorMap, updateClipping, updateTransferTexture, etc. +// TODO: colorMapData should {[name]: colorMapData} +// Check if color map has already been loaded before - then there's no need to load the data again AFRAME.registerComponent("model", { dependencies: ["render-2d-clipplane", "buttons-check"], @@ -28,16 +30,16 @@ AFRAME.registerComponent("model", { }, init: function () { - this.sceneHandler = this.el.sceneEl; - this.canvas = this.el.sceneEl.canvas; - this.colorMapData = []; + this.scene = this.el.sceneEl; + this.canvas = this.scene.canvas; this.alphaData = []; + this.colorMapData = []; this.rayCollided = false; this.grabbed = false; // Get other entities - this.controllerHandler = document.getElementById("rhand").object3D; - this.controllerHandler.matrixAutoUpdate = false; + this.controllerObject = document.getElementById("rhand").object3D; + this.controllerObject.matrixAutoUpdate = false; this.clipPlaneListenerHandler = document.getElementById( "clipplane2DListener" ).object3D; @@ -57,8 +59,8 @@ AFRAME.registerComponent("model", { this.updateMeshClipMatrix = this.updateMeshClipMatrix.bind(this); // Add event listeners - this.el.sceneEl.addEventListener("enter-vr", this.onEnterVR); - this.el.sceneEl.addEventListener("exit-vr", this.onExitVR); + this.scene.addEventListener("enter-vr", this.onEnterVR); + this.scene.addEventListener("exit-vr", this.onExitVR); this.el.addEventListener("raycaster-intersected", this.onCollide); this.el.addEventListener( "raycaster-intersected-cleared", @@ -66,8 +68,7 @@ AFRAME.registerComponent("model", { ); // Activate camera - const cameraEl = document.querySelector("#camera"); - cameraEl.setAttribute("camera", "active", true); + document.getElementById("camera").setAttribute("camera", "active", true); // Load data and colorMap this.loadModel(); @@ -95,16 +96,16 @@ AFRAME.registerComponent("model", { }, tick: function (time, timeDelta) { - const isVrModeActive = this.sceneHandler.is("vr-mode"); + const isVrModeActive = this.scene.is("vr-mode"); const mesh = this.getMesh(); - if (this.controllerHandler && isVrModeActive) { - // In VR, position controlled by controllerHandler + if (this.controllerObject && isVrModeActive) { + // In VR, position controlled by controllerObject const grabObject = - this.controllerHandler.el.getAttribute("buttons-check").grabObject; + this.controllerObject.el.getAttribute("buttons-check").grabObject; if (this.grabbed && !grabObject) { - mesh.matrix.premultiply(this.controllerHandler.matrixWorld); + mesh.matrix.premultiply(this.controllerObject.matrixWorld); mesh.matrix.decompose(mesh.position, mesh.quaternion, mesh.scale); this.el.object3D.add(mesh); this.grabbed = false; @@ -113,10 +114,10 @@ AFRAME.registerComponent("model", { // grab mesh if (!this.grabbed && grabObject && this.rayCollided) { const inverseControllerPos = new THREE.Matrix4(); - inverseControllerPos.getInverse(this.controllerHandler.matrixWorld); + inverseControllerPos.getInverse(this.controllerObject.matrixWorld); mesh.matrix.premultiply(inverseControllerPos); mesh.matrix.decompose(mesh.position, mesh.quaternion, mesh.scale); - this.controllerHandler.add(mesh); + this.controllerObject.add(mesh); this.grabbed = true; } this.updateMeshClipMatrix(); @@ -124,8 +125,8 @@ AFRAME.registerComponent("model", { }, remove: function () { - this.el.sceneEl.removeEventListener("enter-vr", this.onEnterVR); - this.el.sceneEl.removeEventListener("exit-vr", this.onExitVR); + this.scene.removeEventListener("enter-vr", this.onEnterVR); + this.scene.removeEventListener("exit-vr", this.onExitVR); this.el.removeEventListener("raycaster-intersected", this.onCollide); this.el.removeEventListener( "raycaster-intersected-cleared", @@ -211,7 +212,7 @@ AFRAME.registerComponent("model", { side: THREE.BackSide, // The volume shader uses the "backface" as its reference point }); - // Model is a 1x1x1 box with the file's material + // Model is a unit box with the file's material const geometry = new THREE.BoxGeometry(1, 1, 1); this.el.setObject3D("mesh", new THREE.Mesh(geometry, material)); material.needsUpdate = true; @@ -243,18 +244,14 @@ AFRAME.registerComponent("model", { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); - // Draw img on the canvas and grab RGB data + // Draw img on the canvas and read RGB data img.onload = () => { ctx.drawImage(img, 0, 0); const colorData = ctx.getImageData(0, 0, img.width, 1).data; const colorTransfer = new Uint8Array(3 * 256); - - // Extract RGB values from colorMap (ignore alpha) for (let i = 0; i < 256; i++) { - for(let j = 0; j < 3; j++) colorTransfer[i * 3 + j] = colorData[i * 4 + j]; - // colorTransfer[i * 3 + 0] = colorData[i * 4 + 0]; - // colorTransfer[i * 3 + 1] = colorData[i * 4 + 1]; - // colorTransfer[i * 3 + 2] = colorData[i * 4 + 2]; + for (let j = 0; j < 3; j++) + colorTransfer[i * 3 + j] = colorData[i * 4 + j]; } this.colorMapData = colorTransfer; @@ -266,10 +263,11 @@ AFRAME.registerComponent("model", { const colorMapData = this.colorMapData; const imageTransferData = new Uint8Array(4 * 256); for (let i = 0; i < 256; i++) { - for(let j = 0; j < 3; j++) imageTransferData[i * 4 + j] = colorMapData[i * 3 + j]; + for (let j = 0; j < 3; j++) + imageTransferData[i * 4 + j] = colorMapData[i * 3 + j]; imageTransferData[i * 4 + 3] = this.alphaData[i]; } - + const transferTexture = new THREE.DataTexture( imageTransferData, 256, @@ -278,7 +276,6 @@ AFRAME.registerComponent("model", { ); transferTexture.needsUpdate = true; - // TODO: updateTransferFunction and such are running before loadModel is compete // Apply transfer texture const mesh = this.getMesh(); if (mesh) { @@ -359,7 +356,7 @@ AFRAME.registerComponent("model", { translationMatrix.makeTranslation(-0.5, -0.5, -0.5); // Inverse of the clip matrix - const controllerMatrix = this.controllerHandler.matrixWorld; + const controllerMatrix = this.controllerObject.matrixWorld; const controllerMatrix_inverse = new THREE.Matrix4(); controllerMatrix_inverse.copy(controllerMatrix).invert(); @@ -370,10 +367,10 @@ AFRAME.registerComponent("model", { clipMatrix.multiplyMatrices(clipMatrix, translationMatrix); //set uniforms of shader - const isVrModeActive = this.sceneHandler.is("vr-mode"); + const isVrModeActive = this.scene.is("vr-mode"); const isClipped = isVrModeActive && - this.controllerHandler.el.getAttribute("buttons-check").clipPlane && + this.controllerObject.el.getAttribute("buttons-check").clipPlane && !this.grabbed; material.uniforms.clipPlane.value = clipMatrix; material.uniforms.clipping.value = isClipped; From dbfa76e461eb4bd115765b42323d01ad31ad145c Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Fri, 28 Jan 2022 11:11:51 -0500 Subject: [PATCH 35/38] style: npm run lint --- src/Aframe/model.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index cee27655..3384ac95 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -99,8 +99,8 @@ AFRAME.registerComponent("model", { const isVrModeActive = this.scene.is("vr-mode"); const mesh = this.getMesh(); + // Position is controlled by controllerObject in VR if (this.controllerObject && isVrModeActive) { - // In VR, position controlled by controllerObject const grabObject = this.controllerObject.el.getAttribute("buttons-check").grabObject; @@ -163,10 +163,8 @@ AFRAME.registerComponent("model", { loadModel: function () { const { spacing, slices, path, useTransferFunction, intensity } = this.data; - // Clear mesh - const mesh = this.getMesh(); - if (mesh) this.el.removeObject3D("mesh"); - + // Clear mesh and load new model + if (this.getMesh()) this.el.removeObject3D("mesh"); new THREE.TextureLoader().load( path, (texture) => { From e033cb0bcbd463fd6369967aa53e72e48a859afd Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Fri, 28 Jan 2022 11:15:20 -0500 Subject: [PATCH 36/38] chore: remove unneeded console logs --- src/Aframe/model.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Aframe/model.js b/src/Aframe/model.js index 3384ac95..5f0e61db 100644 --- a/src/Aframe/model.js +++ b/src/Aframe/model.js @@ -282,7 +282,7 @@ AFRAME.registerComponent("model", { material.uniforms.channel.value = this.data.channel; material.uniforms.useLut.value = this.data.useTransferFunction; material.needsUpdate = true; - } else console.log("MODEL NOT LOADED YET"); + } }, updateClipping: function () { @@ -310,7 +310,7 @@ AFRAME.registerComponent("model", { material.uniforms.box_min.value = new THREE.Vector3(0, 0, 0); material.uniforms.box_max.value = new THREE.Vector3(1, 1, 1); } - } else console.log("MODEL NOT LOADED YET"); + } }, updateChannel: function () { @@ -320,7 +320,7 @@ AFRAME.registerComponent("model", { material.uniforms.channel.value = this.data.channel; material.uniforms.useLut.value = this.data.useTransferFunction; material.needsUpdate = true; - } else console.log("MODEL NOT LOADED YET"); + } }, updateOpacityData: function () { From 7ea7701913aa785a9333f5ad7664f5f4d39e0d23 Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Fri, 28 Jan 2022 11:56:24 -0500 Subject: [PATCH 37/38] refractor: update app size --- example/src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/src/App.js b/example/src/App.js index 6f052ce9..16a38d47 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -99,7 +99,7 @@ function App() { } const StyledVolumeViewer = styled(VolumeViewer)` - height: 75vh; + height: 76vh; `; const Main = styled.main` From ea4fcdd40da6826735d89142b8d92a759fc9828d Mon Sep 17 00:00:00 2001 From: RobertGemmaJr Date: Fri, 28 Jan 2022 11:58:06 -0500 Subject: [PATCH 38/38] build: package lock changes --- example/package-lock.json | 237 ++++++++++++++++++++++++++++++++++++-- package-lock.json | 48 ++++---- 2 files changed, 252 insertions(+), 33 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 742fe60e..93a1e7ce 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -54,9 +54,100 @@ "styled-components": "^5.0.0" } }, - "../node_modules/react": {}, - "../node_modules/react-dom": {}, - "../node_modules/react-scripts": {}, + "../node_modules/react": { + "version": "17.0.2", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "../node_modules/react-dom": { + "version": "17.0.2", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + }, + "peerDependencies": { + "react": "17.0.2" + } + }, + "../node_modules/react-scripts": { + "version": "5.0.0", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.16.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@svgr/webpack": "^5.5.0", + "babel-jest": "^27.4.2", + "babel-loader": "^8.2.3", + "babel-plugin-named-asset-import": "^0.3.8", + "babel-preset-react-app": "^10.0.1", + "bfj": "^7.0.2", + "browserslist": "^4.18.1", + "camelcase": "^6.2.1", + "case-sensitive-paths-webpack-plugin": "^2.4.0", + "css-loader": "^6.5.1", + "css-minimizer-webpack-plugin": "^3.2.0", + "dotenv": "^10.0.0", + "dotenv-expand": "^5.1.0", + "eslint": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-webpack-plugin": "^3.1.1", + "file-loader": "^6.2.0", + "fs-extra": "^10.0.0", + "html-webpack-plugin": "^5.5.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^27.4.3", + "jest-resolve": "^27.4.2", + "jest-watch-typeahead": "^1.0.0", + "mini-css-extract-plugin": "^2.4.5", + "postcss": "^8.4.4", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-loader": "^6.2.1", + "postcss-normalize": "^10.0.1", + "postcss-preset-env": "^7.0.1", + "prompts": "^2.4.2", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.0", + "react-refresh": "^0.11.0", + "resolve": "^1.20.0", + "resolve-url-loader": "^4.0.0", + "sass-loader": "^12.3.0", + "semver": "^7.3.5", + "source-map-loader": "^3.0.0", + "style-loader": "^3.3.1", + "tailwindcss": "^3.0.2", + "terser-webpack-plugin": "^5.2.5", + "webpack": "^5.64.4", + "webpack-dev-server": "^4.6.0", + "webpack-manifest-plugin": "^4.0.2", + "workbox-webpack-plugin": "^6.4.1" + }, + "bin": { + "react-scripts": "bin/react-scripts.js" + }, + "engines": { + "node": ">=14.0.0" + }, + "optionalDependencies": { + "fsevents": "^2.3.2" + }, + "peerDependencies": { + "react": ">= 16", + "typescript": "^3.2.1 || ^4" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/react": { "resolved": "../node_modules/react", "link": true @@ -76,13 +167,74 @@ }, "dependencies": { "react": { - "version": "file:../node_modules/react" + "version": "file:../node_modules/react", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } }, "react-dom": { - "version": "file:../node_modules/react-dom" + "version": "file:../node_modules/react-dom", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + } }, "react-scripts": { - "version": "file:../node_modules/react-scripts" + "version": "file:../node_modules/react-scripts", + "requires": { + "@babel/core": "^7.16.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@svgr/webpack": "^5.5.0", + "babel-jest": "^27.4.2", + "babel-loader": "^8.2.3", + "babel-plugin-named-asset-import": "^0.3.8", + "babel-preset-react-app": "^10.0.1", + "bfj": "^7.0.2", + "browserslist": "^4.18.1", + "camelcase": "^6.2.1", + "case-sensitive-paths-webpack-plugin": "^2.4.0", + "css-loader": "^6.5.1", + "css-minimizer-webpack-plugin": "^3.2.0", + "dotenv": "^10.0.0", + "dotenv-expand": "^5.1.0", + "eslint": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-webpack-plugin": "^3.1.1", + "file-loader": "^6.2.0", + "fs-extra": "^10.0.0", + "fsevents": "^2.3.2", + "html-webpack-plugin": "^5.5.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^27.4.3", + "jest-resolve": "^27.4.2", + "jest-watch-typeahead": "^1.0.0", + "mini-css-extract-plugin": "^2.4.5", + "postcss": "^8.4.4", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-loader": "^6.2.1", + "postcss-normalize": "^10.0.1", + "postcss-preset-env": "^7.0.1", + "prompts": "^2.4.2", + "react": "^17.0.2", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.0", + "react-dom": "^17.0.2", + "react-refresh": "^0.11.0", + "resolve": "^1.20.0", + "resolve-url-loader": "^4.0.0", + "sass-loader": "^12.3.0", + "semver": "^7.3.5", + "source-map-loader": "^3.0.0", + "style-loader": "^3.3.1", + "tailwindcss": "^3.0.2", + "terser-webpack-plugin": "^5.2.5", + "webpack": "^5.64.4", + "webpack-dev-server": "^4.6.0", + "webpack-manifest-plugin": "^4.0.2", + "workbox-webpack-plugin": "^6.4.1" + } }, "react-volume-viewer": { "version": "file:..", @@ -113,9 +265,76 @@ "styled-components": "^5.0.0" }, "dependencies": { - "react": {}, - "react-dom": {}, - "react-scripts": {} + "react": { + "version": "17.0.2", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "react-dom": { + "version": "17.0.2", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + } + }, + "react-scripts": { + "version": "5.0.0", + "requires": { + "@babel/core": "^7.16.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@svgr/webpack": "^5.5.0", + "babel-jest": "^27.4.2", + "babel-loader": "^8.2.3", + "babel-plugin-named-asset-import": "^0.3.8", + "babel-preset-react-app": "^10.0.1", + "bfj": "^7.0.2", + "browserslist": "^4.18.1", + "camelcase": "^6.2.1", + "case-sensitive-paths-webpack-plugin": "^2.4.0", + "css-loader": "^6.5.1", + "css-minimizer-webpack-plugin": "^3.2.0", + "dotenv": "^10.0.0", + "dotenv-expand": "^5.1.0", + "eslint": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-webpack-plugin": "^3.1.1", + "file-loader": "^6.2.0", + "fs-extra": "^10.0.0", + "fsevents": "^2.3.2", + "html-webpack-plugin": "^5.5.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^27.4.3", + "jest-resolve": "^27.4.2", + "jest-watch-typeahead": "^1.0.0", + "mini-css-extract-plugin": "^2.4.5", + "postcss": "^8.4.4", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-loader": "^6.2.1", + "postcss-normalize": "^10.0.1", + "postcss-preset-env": "^7.0.1", + "prompts": "^2.4.2", + "react": "^17.0.2", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.0", + "react-dom": "^17.0.2", + "react-refresh": "^0.11.0", + "resolve": "^1.20.0", + "resolve-url-loader": "^4.0.0", + "sass-loader": "^12.3.0", + "semver": "^7.3.5", + "source-map-loader": "^3.0.0", + "style-loader": "^3.3.1", + "tailwindcss": "^3.0.2", + "terser-webpack-plugin": "^5.2.5", + "webpack": "^5.64.4", + "webpack-dev-server": "^4.6.0", + "webpack-manifest-plugin": "^4.0.2", + "workbox-webpack-plugin": "^6.4.1" + } + } } } } diff --git a/package-lock.json b/package-lock.json index d73a5329..12dce6c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3683,9 +3683,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "17.0.12", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.12.tgz", - "integrity": "sha512-4YpbAsnJXWYK/fpTVFlMIcUIho2AYCi4wg5aNPrG1ng7fn/1/RZfCIpRCiBX+12RVa34RluilnvCqD+g3KiSiA==", + "version": "17.0.13", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.13.tgz", + "integrity": "sha512-Y86MAxASe25hNzlDbsviXl8jQHb0RDvKt4c40ZJQ1Don0AAL0STLZSs4N+6gLEO55pedy7r2cLwS+ZDxPm/2Bw==", "dev": true }, "node_modules/@types/parse-json": { @@ -6007,9 +6007,9 @@ "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "node_modules/clean-css": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.3.tgz", - "integrity": "sha512-qjywD7LvpZJ5+E16lf00GnMVUX5TEVBcKW1/vtGPgAerHwRwE4JP4p1Y40zbLnup2ZfWsd30P2bHdoAKH93XxA==", + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz", + "integrity": "sha512-nKseG8wCzEuji/4yrgM/5cthL9oTDc5UOQyFMvW/Q53oP6gLH690o1NbuTh6Y18nujr7BxlsFuS7gXLnLzKJGg==", "dev": true, "dependencies": { "source-map": "~0.6.0" @@ -7410,9 +7410,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.55", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.55.tgz", - "integrity": "sha512-AoCDEVElLY8mwe4TuDDkr1jxvSh/Ih5PFlEXCpmwFkq9JOXn4K58CScgBl+R1ghFW9cPJ7VeWo30nAHSRCe6rw==", + "version": "1.4.56", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.56.tgz", + "integrity": "sha512-0k/S0FQqRRpJbX7YUjwCcLZ8D42RqGKtaiq90adXBOYgTIWwLA/g3toO8k9yEpqU8iC4QyaWYYWSTBIna8WV4g==", "dev": true }, "node_modules/email-addresses": { @@ -13957,9 +13957,9 @@ } }, "node_modules/postcss-calc": { - "version": "8.2.2", - "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.2.tgz", - "integrity": "sha512-B5R0UeB4zLJvxNt1FVCaDZULdzsKLPc6FhjFJ+xwFiq7VG4i9cuaJLxVjNtExNK8ocm3n2o4unXXLiVX1SCqxA==", + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.3.tgz", + "integrity": "sha512-EGM2EBBWqP57N0E7N7WOLT116PJ39dwHVU01WO4XPPQLJfkL2xVgkMZ+TZvCfapj/uJH07UEfKHQNPHzSw/14Q==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.2", @@ -21970,9 +21970,9 @@ "dev": true }, "@types/node": { - "version": "17.0.12", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.12.tgz", - "integrity": "sha512-4YpbAsnJXWYK/fpTVFlMIcUIho2AYCi4wg5aNPrG1ng7fn/1/RZfCIpRCiBX+12RVa34RluilnvCqD+g3KiSiA==", + "version": "17.0.13", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.13.tgz", + "integrity": "sha512-Y86MAxASe25hNzlDbsviXl8jQHb0RDvKt4c40ZJQ1Don0AAL0STLZSs4N+6gLEO55pedy7r2cLwS+ZDxPm/2Bw==", "dev": true }, "@types/parse-json": { @@ -23872,9 +23872,9 @@ "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "clean-css": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.3.tgz", - "integrity": "sha512-qjywD7LvpZJ5+E16lf00GnMVUX5TEVBcKW1/vtGPgAerHwRwE4JP4p1Y40zbLnup2ZfWsd30P2bHdoAKH93XxA==", + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz", + "integrity": "sha512-nKseG8wCzEuji/4yrgM/5cthL9oTDc5UOQyFMvW/Q53oP6gLH690o1NbuTh6Y18nujr7BxlsFuS7gXLnLzKJGg==", "dev": true, "requires": { "source-map": "~0.6.0" @@ -24934,9 +24934,9 @@ } }, "electron-to-chromium": { - "version": "1.4.55", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.55.tgz", - "integrity": "sha512-AoCDEVElLY8mwe4TuDDkr1jxvSh/Ih5PFlEXCpmwFkq9JOXn4K58CScgBl+R1ghFW9cPJ7VeWo30nAHSRCe6rw==", + "version": "1.4.56", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.56.tgz", + "integrity": "sha512-0k/S0FQqRRpJbX7YUjwCcLZ8D42RqGKtaiq90adXBOYgTIWwLA/g3toO8k9yEpqU8iC4QyaWYYWSTBIna8WV4g==", "dev": true }, "email-addresses": { @@ -29843,9 +29843,9 @@ "requires": {} }, "postcss-calc": { - "version": "8.2.2", - "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.2.tgz", - "integrity": "sha512-B5R0UeB4zLJvxNt1FVCaDZULdzsKLPc6FhjFJ+xwFiq7VG4i9cuaJLxVjNtExNK8ocm3n2o4unXXLiVX1SCqxA==", + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.3.tgz", + "integrity": "sha512-EGM2EBBWqP57N0E7N7WOLT116PJ39dwHVU01WO4XPPQLJfkL2xVgkMZ+TZvCfapj/uJH07UEfKHQNPHzSw/14Q==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.2",