@abi-software/scaffoldvuer 0.2.2-beta.2 → 0.2.3-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +12 -12
- package/CHANGELOG.md +316 -310
- package/LICENSE +201 -201
- package/README.md +164 -164
- package/babel.config.js +14 -14
- package/dist/scaffoldvuer-wc.common.js +183 -35
- package/dist/scaffoldvuer-wc.umd.js +183 -35
- package/dist/scaffoldvuer-wc.umd.min.js +183 -35
- package/dist/scaffoldvuer.common.js +1076 -717
- package/dist/scaffoldvuer.common.js.map +1 -1
- package/dist/scaffoldvuer.css +1 -1
- package/dist/scaffoldvuer.umd.js +1076 -717
- package/dist/scaffoldvuer.umd.js.map +1 -1
- package/dist/scaffoldvuer.umd.min.js +1 -1
- package/dist/scaffoldvuer.umd.min.js.map +1 -1
- package/package-lock.json +18119 -18121
- package/package.json +89 -89
- package/public/index.html +17 -17
- package/src/App.vue +669 -714
- package/src/ScaffoldVuer-wc.js +13 -13
- package/src/{components → app}/DropZone.vue +114 -114
- package/src/{components → app}/ModelsInformation.js +35 -35
- package/src/{components → app}/ModelsTable.vue +113 -113
- package/src/app/TextureDemos.js +114 -0
- package/src/assets/_variables.scss +43 -43
- package/src/assets/styles.scss +7 -7
- package/src/components/OpacityControls.vue +222 -222
- package/src/components/ScaffoldTooltip.vue +142 -141
- package/src/components/ScaffoldVuer.md +44 -44
- package/src/components/ScaffoldVuer.vue +1997 -1887
- package/src/components/TreeControls.vue +699 -691
- package/src/components/index.js +7 -7
- package/src/components/test.pdf +0 -0
- package/src/main.js +14 -14
- package/src/scripts/BaseModule.js +80 -80
- package/src/scripts/RendererModule.js +289 -289
- package/src/scripts/WebGL.js +94 -94
- package/src/scripts/annotation.js +5 -5
- package/src/scripts/eventNotifier.js +66 -66
- package/src/scripts/graphicsHighlight.js +134 -134
- package/src/scripts/organsRenderer.js +587 -606
- package/src/scripts/search.js +182 -153
- package/src/scripts/utilities.js +146 -43
- package/src/searchControls.vue +122 -0
- package/styleguide.config.js +22 -22
- package/vue.config.js +41 -41
- package/src/credential.json +0 -12
package/src/scripts/WebGL.js
CHANGED
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @author alteredq / http://alteredqualia.com/
|
|
3
|
-
* @author mr.doob / http://mrdoob.com/
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
exports.WEBGL = {
|
|
7
|
-
|
|
8
|
-
isWebGLAvailable: function () {
|
|
9
|
-
|
|
10
|
-
try {
|
|
11
|
-
|
|
12
|
-
var canvas = document.createElement( 'canvas' );
|
|
13
|
-
return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
|
|
14
|
-
|
|
15
|
-
} catch ( e ) {
|
|
16
|
-
|
|
17
|
-
return false;
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
isWebGL2Available: function () {
|
|
24
|
-
|
|
25
|
-
try {
|
|
26
|
-
|
|
27
|
-
var canvas = document.createElement( 'canvas' );
|
|
28
|
-
return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );
|
|
29
|
-
|
|
30
|
-
} catch ( e ) {
|
|
31
|
-
|
|
32
|
-
return false;
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
getWebGLErrorMessage: function () {
|
|
39
|
-
|
|
40
|
-
return this.getErrorMessage( 1 );
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
|
|
44
|
-
getWebGL2ErrorMessage: function () {
|
|
45
|
-
|
|
46
|
-
return this.getErrorMessage( 2 );
|
|
47
|
-
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
getErrorMessage: function ( version ) {
|
|
51
|
-
|
|
52
|
-
var names = {
|
|
53
|
-
1: 'WebGL',
|
|
54
|
-
2: 'WebGL 2'
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
var contexts = {
|
|
58
|
-
1: window.WebGLRenderingContext,
|
|
59
|
-
2: window.WebGL2RenderingContext
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
var message = 'This module requires <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#008">$1</a> support but your $0 does not seem to support it.';
|
|
63
|
-
|
|
64
|
-
var element = document.createElement( 'div' );
|
|
65
|
-
element.id = 'webglmessage';
|
|
66
|
-
element.style.fontFamily = 'monospace';
|
|
67
|
-
element.style.fontSize = '20px';
|
|
68
|
-
element.style.fontWeight = 'normal';
|
|
69
|
-
element.style.textAlign = 'center';
|
|
70
|
-
element.style.background = '#fff';
|
|
71
|
-
element.style.color = '#000';
|
|
72
|
-
element.style.padding = '1.5em';
|
|
73
|
-
element.style.width = '400px';
|
|
74
|
-
element.style.margin = '5em auto 0';
|
|
75
|
-
|
|
76
|
-
if ( contexts[ version ] ) {
|
|
77
|
-
|
|
78
|
-
message = message.replace( '$0', 'graphics card' );
|
|
79
|
-
|
|
80
|
-
} else {
|
|
81
|
-
|
|
82
|
-
message = message.replace( '$0', 'browser' );
|
|
83
|
-
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
message = message.replace( '$1', names[ version ] );
|
|
87
|
-
|
|
88
|
-
element.innerHTML = message;
|
|
89
|
-
|
|
90
|
-
return element;
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
};
|
|
1
|
+
/**
|
|
2
|
+
* @author alteredq / http://alteredqualia.com/
|
|
3
|
+
* @author mr.doob / http://mrdoob.com/
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
exports.WEBGL = {
|
|
7
|
+
|
|
8
|
+
isWebGLAvailable: function () {
|
|
9
|
+
|
|
10
|
+
try {
|
|
11
|
+
|
|
12
|
+
var canvas = document.createElement( 'canvas' );
|
|
13
|
+
return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
|
|
14
|
+
|
|
15
|
+
} catch ( e ) {
|
|
16
|
+
|
|
17
|
+
return false;
|
|
18
|
+
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
isWebGL2Available: function () {
|
|
24
|
+
|
|
25
|
+
try {
|
|
26
|
+
|
|
27
|
+
var canvas = document.createElement( 'canvas' );
|
|
28
|
+
return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );
|
|
29
|
+
|
|
30
|
+
} catch ( e ) {
|
|
31
|
+
|
|
32
|
+
return false;
|
|
33
|
+
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
getWebGLErrorMessage: function () {
|
|
39
|
+
|
|
40
|
+
return this.getErrorMessage( 1 );
|
|
41
|
+
|
|
42
|
+
},
|
|
43
|
+
|
|
44
|
+
getWebGL2ErrorMessage: function () {
|
|
45
|
+
|
|
46
|
+
return this.getErrorMessage( 2 );
|
|
47
|
+
|
|
48
|
+
},
|
|
49
|
+
|
|
50
|
+
getErrorMessage: function ( version ) {
|
|
51
|
+
|
|
52
|
+
var names = {
|
|
53
|
+
1: 'WebGL',
|
|
54
|
+
2: 'WebGL 2'
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
var contexts = {
|
|
58
|
+
1: window.WebGLRenderingContext,
|
|
59
|
+
2: window.WebGL2RenderingContext
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
var message = 'This module requires <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#008">$1</a> support but your $0 does not seem to support it.';
|
|
63
|
+
|
|
64
|
+
var element = document.createElement( 'div' );
|
|
65
|
+
element.id = 'webglmessage';
|
|
66
|
+
element.style.fontFamily = 'monospace';
|
|
67
|
+
element.style.fontSize = '20px';
|
|
68
|
+
element.style.fontWeight = 'normal';
|
|
69
|
+
element.style.textAlign = 'center';
|
|
70
|
+
element.style.background = '#fff';
|
|
71
|
+
element.style.color = '#000';
|
|
72
|
+
element.style.padding = '1.5em';
|
|
73
|
+
element.style.width = '400px';
|
|
74
|
+
element.style.margin = '5em auto 0';
|
|
75
|
+
|
|
76
|
+
if ( contexts[ version ] ) {
|
|
77
|
+
|
|
78
|
+
message = message.replace( '$0', 'graphics card' );
|
|
79
|
+
|
|
80
|
+
} else {
|
|
81
|
+
|
|
82
|
+
message = message.replace( '$0', 'browser' );
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
message = message.replace( '$1', names[ version ] );
|
|
87
|
+
|
|
88
|
+
element.innerHTML = message;
|
|
89
|
+
|
|
90
|
+
return element;
|
|
91
|
+
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
exports.annotation = function() {
|
|
2
|
-
this.type = "anatomical";
|
|
3
|
-
this.data = undefined;
|
|
4
|
-
this.isAnnotation = true;
|
|
5
|
-
}
|
|
1
|
+
exports.annotation = function() {
|
|
2
|
+
this.type = "anatomical";
|
|
3
|
+
this.data = undefined;
|
|
4
|
+
this.isAnnotation = true;
|
|
5
|
+
}
|
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
const EVENT_TYPE = { ALL: 0, SELECTED: 1, HIGHLIGHTED: 2, MOVE: 3 };
|
|
2
|
-
|
|
3
|
-
const SelectionEvent = function(eventTypeIn, identifiersIn, zincObjects) {
|
|
4
|
-
this.eventType = eventTypeIn;
|
|
5
|
-
this.identifiers = identifiersIn;
|
|
6
|
-
this.zincObjects = zincObjects;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const returnFullID = function(sourceId) {
|
|
10
|
-
//return full annotations with all different name
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const Subscription = function(subscriberIn, callbackIn, eventType) {
|
|
14
|
-
this.targetedID = [];
|
|
15
|
-
const subscriber = subscriberIn;
|
|
16
|
-
const callback = callbackIn;
|
|
17
|
-
this.targetEventType = eventType;
|
|
18
|
-
const _this = this;
|
|
19
|
-
|
|
20
|
-
if (eventType === undefined)
|
|
21
|
-
this.targetEventType = EVENT_TYPE.ALL;
|
|
22
|
-
|
|
23
|
-
this.getEventType = function() {
|
|
24
|
-
return eventType;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
this.notify = function(source, eventType, ids, zincObjects) {
|
|
28
|
-
if (source !== subscriber && (_this.targetEventType === EVENT_TYPE.ALL ||
|
|
29
|
-
_this.targetEventType === eventType)) {
|
|
30
|
-
//should support different type of id e.g lyph, name, fmas...
|
|
31
|
-
//need a function that finds all relavant ids
|
|
32
|
-
const event = new SelectionEvent(eventType, ids, zincObjects);
|
|
33
|
-
callback(event);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
exports.EventNotifier = function() {
|
|
39
|
-
const subscriptions = [];
|
|
40
|
-
|
|
41
|
-
this.publish = function(source, eventType, id, zincObjects) {
|
|
42
|
-
for (let i = 0; i < subscriptions.length;i++) {
|
|
43
|
-
subscriptions[i].notify(source, eventType, id, zincObjects);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
this.subscribe = function(subscriber, callbackFunction, eventType) {
|
|
48
|
-
if (typeof callbackFunction === "function") {
|
|
49
|
-
const subscription = new Subscription(subscriber, callbackFunction, eventType);
|
|
50
|
-
subscriptions.push(subscription);
|
|
51
|
-
return subscription;
|
|
52
|
-
}
|
|
53
|
-
return undefined;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
this.unsubscribe = function(subscription) {
|
|
57
|
-
for (let i = 0; i < subscriptions.length;i++) {
|
|
58
|
-
if (subscription === subscriptions[i]) {
|
|
59
|
-
subscriptions.splice(i, 1);
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
exports.EVENT_TYPE = EVENT_TYPE;
|
|
1
|
+
const EVENT_TYPE = { ALL: 0, SELECTED: 1, HIGHLIGHTED: 2, MOVE: 3 };
|
|
2
|
+
|
|
3
|
+
const SelectionEvent = function(eventTypeIn, identifiersIn, zincObjects) {
|
|
4
|
+
this.eventType = eventTypeIn;
|
|
5
|
+
this.identifiers = identifiersIn;
|
|
6
|
+
this.zincObjects = zincObjects;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const returnFullID = function(sourceId) {
|
|
10
|
+
//return full annotations with all different name
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const Subscription = function(subscriberIn, callbackIn, eventType) {
|
|
14
|
+
this.targetedID = [];
|
|
15
|
+
const subscriber = subscriberIn;
|
|
16
|
+
const callback = callbackIn;
|
|
17
|
+
this.targetEventType = eventType;
|
|
18
|
+
const _this = this;
|
|
19
|
+
|
|
20
|
+
if (eventType === undefined)
|
|
21
|
+
this.targetEventType = EVENT_TYPE.ALL;
|
|
22
|
+
|
|
23
|
+
this.getEventType = function() {
|
|
24
|
+
return eventType;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
this.notify = function(source, eventType, ids, zincObjects) {
|
|
28
|
+
if (source !== subscriber && (_this.targetEventType === EVENT_TYPE.ALL ||
|
|
29
|
+
_this.targetEventType === eventType)) {
|
|
30
|
+
//should support different type of id e.g lyph, name, fmas...
|
|
31
|
+
//need a function that finds all relavant ids
|
|
32
|
+
const event = new SelectionEvent(eventType, ids, zincObjects);
|
|
33
|
+
callback(event);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
exports.EventNotifier = function() {
|
|
39
|
+
const subscriptions = [];
|
|
40
|
+
|
|
41
|
+
this.publish = function(source, eventType, id, zincObjects) {
|
|
42
|
+
for (let i = 0; i < subscriptions.length;i++) {
|
|
43
|
+
subscriptions[i].notify(source, eventType, id, zincObjects);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
this.subscribe = function(subscriber, callbackFunction, eventType) {
|
|
48
|
+
if (typeof callbackFunction === "function") {
|
|
49
|
+
const subscription = new Subscription(subscriber, callbackFunction, eventType);
|
|
50
|
+
subscriptions.push(subscription);
|
|
51
|
+
return subscription;
|
|
52
|
+
}
|
|
53
|
+
return undefined;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
this.unsubscribe = function(subscription) {
|
|
57
|
+
for (let i = 0; i < subscriptions.length;i++) {
|
|
58
|
+
if (subscription === subscriptions[i]) {
|
|
59
|
+
subscriptions.splice(i, 1);
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
exports.EVENT_TYPE = EVENT_TYPE;
|
|
@@ -1,134 +1,134 @@
|
|
|
1
|
-
var THREE = require('zincjs').THREE;
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* This module manages highlighted and selected objects in 3D modules.
|
|
5
|
-
*
|
|
6
|
-
* @class
|
|
7
|
-
* @returns {exports.GraphicsHighlight}
|
|
8
|
-
*/
|
|
9
|
-
exports.GraphicsHighlight = function() {
|
|
10
|
-
let currentHighlightedObjects = [];
|
|
11
|
-
let currentSelectedObjects = [];
|
|
12
|
-
this.highlightColour = [1, 0, 0];
|
|
13
|
-
this.selectColour = [0, 1, 0];
|
|
14
|
-
this.originalColour = [0, 0, 0];
|
|
15
|
-
const _temp1 = [];
|
|
16
|
-
const _temp2 = [];
|
|
17
|
-
const _this = this;
|
|
18
|
-
|
|
19
|
-
const isDifferent = function(array1, array2) {
|
|
20
|
-
if ((array1.length == 0) && (array2.length == 0))
|
|
21
|
-
return false;
|
|
22
|
-
for (let i = 0; i < array1.length; i++) {
|
|
23
|
-
let matched = false;
|
|
24
|
-
for (let j = 0; j < array2.length; j++) {
|
|
25
|
-
if (array1[i] === array2[j]) {
|
|
26
|
-
matched = true;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
if (!matched)
|
|
30
|
-
return true;
|
|
31
|
-
}
|
|
32
|
-
for (let i = 0; i < array2.length; i++) {
|
|
33
|
-
let matched = false;
|
|
34
|
-
for (let j = 0; j < array1.length; j++) {
|
|
35
|
-
if (array2[i] === array1[j]) {
|
|
36
|
-
matched = true;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
if (!matched)
|
|
40
|
-
return true;
|
|
41
|
-
}
|
|
42
|
-
return false;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
const getUnmatchingObjects = function(objectsArray1, objectsArray2) {
|
|
46
|
-
_temp1.length = 0;
|
|
47
|
-
if (objectsArray2.length == 0)
|
|
48
|
-
return objectsArray1;
|
|
49
|
-
for (let i = 0; i < objectsArray1.length; i++) {
|
|
50
|
-
let matched = false;
|
|
51
|
-
for (let j = 0; j < objectsArray2.length; j++) {
|
|
52
|
-
if (objectsArray1[i] === objectsArray2[j]) {
|
|
53
|
-
matched = true;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
if (!matched)
|
|
57
|
-
_temp1.push(objectsArray1[i]);
|
|
58
|
-
}
|
|
59
|
-
return _temp1;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
this.setHighlighted = function(objects) {
|
|
63
|
-
const previousHighlightedObjects = [...currentHighlightedObjects];
|
|
64
|
-
_this.resetHighlighted();
|
|
65
|
-
// Selected object cannot be highlighted
|
|
66
|
-
const array = getUnmatchingObjects(objects, currentSelectedObjects);
|
|
67
|
-
const fullList = getFullListOfObjects(array);
|
|
68
|
-
for (let i = 0; i < fullList.length; i++) {
|
|
69
|
-
if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
|
|
70
|
-
fullList[i].material.emissive.setRGB(..._this.highlightColour);
|
|
71
|
-
}
|
|
72
|
-
currentHighlightedObjects = array;
|
|
73
|
-
return isDifferent(currentHighlightedObjects, previousHighlightedObjects);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
this.setSelected = function(objects) {
|
|
77
|
-
// first find highlighted object that are not selected
|
|
78
|
-
const previousHSelectedObjects = [...currentSelectedObjects];
|
|
79
|
-
const array = getUnmatchingObjects(currentHighlightedObjects, objects);
|
|
80
|
-
_this.resetHighlighted();
|
|
81
|
-
_this.resetSelected();
|
|
82
|
-
const fullList = getFullListOfObjects(objects);
|
|
83
|
-
for (let i = 0; i < fullList.length; i++) {
|
|
84
|
-
if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
|
|
85
|
-
fullList[i].material.emissive.setRGB(..._this.selectColour);
|
|
86
|
-
}
|
|
87
|
-
currentSelectedObjects = objects;
|
|
88
|
-
return isDifferent(currentSelectedObjects, previousHSelectedObjects);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
const getFullListOfObjects = function(objects) {
|
|
92
|
-
_temp2.length = 0;
|
|
93
|
-
for (let i = 0; i < objects.length; i++) {
|
|
94
|
-
if (objects[i].material)
|
|
95
|
-
_temp2.push(objects[i]);
|
|
96
|
-
}
|
|
97
|
-
return _temp2;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
this.resetHighlighted = function() {
|
|
101
|
-
const fullList = getFullListOfObjects(currentHighlightedObjects);
|
|
102
|
-
for (let i = 0; i < fullList.length; i++) {
|
|
103
|
-
if (fullList[i] && fullList[i].material) {
|
|
104
|
-
if (fullList[i].material.emissive)
|
|
105
|
-
fullList[i].material.emissive.setRGB(..._this.originalColour);
|
|
106
|
-
if (fullList[i].material.depthFunc)
|
|
107
|
-
fullList[i].material.depthFunc = THREE.LessEqualDepth;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
currentHighlightedObjects = [];
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
this.resetSelected = function() {
|
|
114
|
-
const fullList = getFullListOfObjects(currentSelectedObjects);
|
|
115
|
-
for (let i = 0; i < fullList.length; i++) {
|
|
116
|
-
if (fullList[i] && fullList[i].material) {
|
|
117
|
-
if (fullList[i].material.emissive)
|
|
118
|
-
fullList[i].material.emissive.setRGB(..._this.originalColour);
|
|
119
|
-
if (fullList[i].material.depthFunc)
|
|
120
|
-
fullList[i].material.depthFunc = THREE.LessEqualDepth;
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
currentSelectedObjects = [];
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
this.getSelected = function() {
|
|
127
|
-
return currentSelectedObjects;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
this.reset = function() {
|
|
131
|
-
_this.resetSelected();
|
|
132
|
-
_this.resetHighlighted();
|
|
133
|
-
}
|
|
134
|
-
}
|
|
1
|
+
var THREE = require('zincjs').THREE;
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* This module manages highlighted and selected objects in 3D modules.
|
|
5
|
+
*
|
|
6
|
+
* @class
|
|
7
|
+
* @returns {exports.GraphicsHighlight}
|
|
8
|
+
*/
|
|
9
|
+
exports.GraphicsHighlight = function() {
|
|
10
|
+
let currentHighlightedObjects = [];
|
|
11
|
+
let currentSelectedObjects = [];
|
|
12
|
+
this.highlightColour = [1, 0, 0];
|
|
13
|
+
this.selectColour = [0, 1, 0];
|
|
14
|
+
this.originalColour = [0, 0, 0];
|
|
15
|
+
const _temp1 = [];
|
|
16
|
+
const _temp2 = [];
|
|
17
|
+
const _this = this;
|
|
18
|
+
|
|
19
|
+
const isDifferent = function(array1, array2) {
|
|
20
|
+
if ((array1.length == 0) && (array2.length == 0))
|
|
21
|
+
return false;
|
|
22
|
+
for (let i = 0; i < array1.length; i++) {
|
|
23
|
+
let matched = false;
|
|
24
|
+
for (let j = 0; j < array2.length; j++) {
|
|
25
|
+
if (array1[i] === array2[j]) {
|
|
26
|
+
matched = true;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
if (!matched)
|
|
30
|
+
return true;
|
|
31
|
+
}
|
|
32
|
+
for (let i = 0; i < array2.length; i++) {
|
|
33
|
+
let matched = false;
|
|
34
|
+
for (let j = 0; j < array1.length; j++) {
|
|
35
|
+
if (array2[i] === array1[j]) {
|
|
36
|
+
matched = true;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
if (!matched)
|
|
40
|
+
return true;
|
|
41
|
+
}
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const getUnmatchingObjects = function(objectsArray1, objectsArray2) {
|
|
46
|
+
_temp1.length = 0;
|
|
47
|
+
if (objectsArray2.length == 0)
|
|
48
|
+
return objectsArray1;
|
|
49
|
+
for (let i = 0; i < objectsArray1.length; i++) {
|
|
50
|
+
let matched = false;
|
|
51
|
+
for (let j = 0; j < objectsArray2.length; j++) {
|
|
52
|
+
if (objectsArray1[i] === objectsArray2[j]) {
|
|
53
|
+
matched = true;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
if (!matched)
|
|
57
|
+
_temp1.push(objectsArray1[i]);
|
|
58
|
+
}
|
|
59
|
+
return _temp1;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
this.setHighlighted = function(objects) {
|
|
63
|
+
const previousHighlightedObjects = [...currentHighlightedObjects];
|
|
64
|
+
_this.resetHighlighted();
|
|
65
|
+
// Selected object cannot be highlighted
|
|
66
|
+
const array = getUnmatchingObjects(objects, currentSelectedObjects);
|
|
67
|
+
const fullList = getFullListOfObjects(array);
|
|
68
|
+
for (let i = 0; i < fullList.length; i++) {
|
|
69
|
+
if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
|
|
70
|
+
fullList[i].material.emissive.setRGB(..._this.highlightColour);
|
|
71
|
+
}
|
|
72
|
+
currentHighlightedObjects = array;
|
|
73
|
+
return isDifferent(currentHighlightedObjects, previousHighlightedObjects);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
this.setSelected = function(objects) {
|
|
77
|
+
// first find highlighted object that are not selected
|
|
78
|
+
const previousHSelectedObjects = [...currentSelectedObjects];
|
|
79
|
+
const array = getUnmatchingObjects(currentHighlightedObjects, objects);
|
|
80
|
+
_this.resetHighlighted();
|
|
81
|
+
_this.resetSelected();
|
|
82
|
+
const fullList = getFullListOfObjects(objects);
|
|
83
|
+
for (let i = 0; i < fullList.length; i++) {
|
|
84
|
+
if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
|
|
85
|
+
fullList[i].material.emissive.setRGB(..._this.selectColour);
|
|
86
|
+
}
|
|
87
|
+
currentSelectedObjects = objects;
|
|
88
|
+
return isDifferent(currentSelectedObjects, previousHSelectedObjects);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
const getFullListOfObjects = function(objects) {
|
|
92
|
+
_temp2.length = 0;
|
|
93
|
+
for (let i = 0; i < objects.length; i++) {
|
|
94
|
+
if (objects[i].material)
|
|
95
|
+
_temp2.push(objects[i]);
|
|
96
|
+
}
|
|
97
|
+
return _temp2;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
this.resetHighlighted = function() {
|
|
101
|
+
const fullList = getFullListOfObjects(currentHighlightedObjects);
|
|
102
|
+
for (let i = 0; i < fullList.length; i++) {
|
|
103
|
+
if (fullList[i] && fullList[i].material) {
|
|
104
|
+
if (fullList[i].material.emissive)
|
|
105
|
+
fullList[i].material.emissive.setRGB(..._this.originalColour);
|
|
106
|
+
if (fullList[i].material.depthFunc)
|
|
107
|
+
fullList[i].material.depthFunc = THREE.LessEqualDepth;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
currentHighlightedObjects = [];
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
this.resetSelected = function() {
|
|
114
|
+
const fullList = getFullListOfObjects(currentSelectedObjects);
|
|
115
|
+
for (let i = 0; i < fullList.length; i++) {
|
|
116
|
+
if (fullList[i] && fullList[i].material) {
|
|
117
|
+
if (fullList[i].material.emissive)
|
|
118
|
+
fullList[i].material.emissive.setRGB(..._this.originalColour);
|
|
119
|
+
if (fullList[i].material.depthFunc)
|
|
120
|
+
fullList[i].material.depthFunc = THREE.LessEqualDepth;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
currentSelectedObjects = [];
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
this.getSelected = function() {
|
|
127
|
+
return currentSelectedObjects;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
this.reset = function() {
|
|
131
|
+
_this.resetSelected();
|
|
132
|
+
_this.resetHighlighted();
|
|
133
|
+
}
|
|
134
|
+
}
|