@abi-software/scaffoldvuer 0.2.3-alpha-2 → 0.3.1

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.
Files changed (49) hide show
  1. package/.eslintrc.js +12 -12
  2. package/CHANGELOG.md +344 -316
  3. package/LICENSE +201 -201
  4. package/README.md +164 -164
  5. package/babel.config.js +14 -14
  6. package/dist/scaffoldvuer-wc.common.js +277 -34
  7. package/dist/scaffoldvuer-wc.umd.js +277 -34
  8. package/dist/scaffoldvuer-wc.umd.min.js +277 -34
  9. package/dist/scaffoldvuer.common.js +1252 -529
  10. package/dist/scaffoldvuer.common.js.map +1 -1
  11. package/dist/scaffoldvuer.css +1 -1
  12. package/dist/scaffoldvuer.umd.js +1252 -529
  13. package/dist/scaffoldvuer.umd.js.map +1 -1
  14. package/dist/scaffoldvuer.umd.min.js +1 -1
  15. package/dist/scaffoldvuer.umd.min.js.map +1 -1
  16. package/package-lock.json +18121 -18119
  17. package/package.json +89 -89
  18. package/public/index.html +17 -17
  19. package/src/App.vue +669 -669
  20. package/src/ScaffoldVuer-wc.js +13 -13
  21. package/src/app/DropZone.vue +114 -114
  22. package/src/app/ModelsInformation.js +35 -35
  23. package/src/app/ModelsTable.vue +113 -113
  24. package/src/app/TextureDemos.js +114 -114
  25. package/src/assets/_variables.scss +43 -43
  26. package/src/assets/styles.scss +7 -7
  27. package/src/components/OpacityControls.vue +123 -222
  28. package/src/components/PrimitiveControls.vue +173 -0
  29. package/src/components/ScaffoldTooltip.vue +142 -142
  30. package/src/components/ScaffoldVuer.md +44 -44
  31. package/src/components/ScaffoldVuer.vue +2007 -2007
  32. package/src/components/TextureSlidesControls.vue +272 -0
  33. package/src/components/TreeControls.vue +707 -699
  34. package/src/components/index.js +7 -7
  35. package/src/credential.json +12 -0
  36. package/src/main.js +14 -14
  37. package/src/scripts/BaseModule.js +80 -80
  38. package/src/scripts/RendererModule.js +289 -289
  39. package/src/scripts/WebGL.js +94 -94
  40. package/src/scripts/annotation.js +5 -5
  41. package/src/scripts/eventNotifier.js +66 -66
  42. package/src/scripts/graphicsHighlight.js +134 -134
  43. package/src/scripts/organsRenderer.js +587 -587
  44. package/src/scripts/search.js +182 -182
  45. package/src/scripts/utilities.js +146 -146
  46. package/styleguide.config.js +22 -22
  47. package/vue.config.js +41 -41
  48. package/src/components/test.pdf +0 -0
  49. package/src/searchControls.vue +0 -122
@@ -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
+ }