@abi-software/scaffoldvuer 1.1.0 → 1.2.0

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 (6) hide show
  1. package/dist/scaffoldvuer.js +7802 -7790
  2. package/dist/scaffoldvuer.umd.cjs +142 -142
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/App.vue +203 -148
  6. package/src/components/ScaffoldVuer.vue +15 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abi-software/scaffoldvuer",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -55,7 +55,7 @@
55
55
  "vue": "^3.4.15",
56
56
  "vue-router": "^4.2.5",
57
57
  "vue3-component-svg-sprite": "^0.0.1",
58
- "zincjs": "^1.6.0"
58
+ "zincjs": "^1.8.2"
59
59
  },
60
60
  "devDependencies": {
61
61
  "@vitejs/plugin-vue": "^4.6.2",
package/src/App.vue CHANGED
@@ -48,123 +48,204 @@
48
48
 
49
49
  <el-popover popper-class="options-container" placement="bottom" trigger="click" width="500" :teleported="false">
50
50
  <div>
51
+
51
52
  <el-row :gutter="20">
52
- <p>{{ selectedCoordinates }}</p>
53
+ <el-col>
54
+ <p>{{ selectedCoordinates }}</p>
55
+ </el-col>
53
56
  </el-row>
54
- <el-row :gutter="20">
55
- <p v-if="currentTime !== 0">
56
- time emited is: {{ currentTime.toFixed(2) }}
57
- </p>
57
+
58
+ <el-row :gutter="20" v-if="currentTime !== 0">
59
+ <el-col>
60
+ <p>
61
+ time emited is: {{ currentTime.toFixed(2) }}
62
+ </p>
63
+ </el-col>
58
64
  </el-row>
59
- <el-row :gutter="20">
60
- <el-col :span="3" :offset="1">
65
+
66
+ <el-row :gutter="20" justify="center" align="middle">
67
+ <el-col span="auto">
61
68
  <el-switch v-model="displayUI" active-text="UI" />
62
69
  </el-col>
63
- <el-col :span="4" :offset="1">
70
+ <el-col span="auto">
64
71
  <el-switch v-model="displayMarkers" active-text="Markers" active-icon-class="el-icon-location"
65
72
  active-color="#8300bf" />
66
73
  </el-col>
67
- <el-col :span="6" :offset="1">
74
+ <el-col span="auto">
68
75
  <el-switch v-model="markerCluster" active-text="Marker Cluster" active-icon-class="el-icon-location"
69
76
  active-color="#8300bf" />
70
77
  </el-col>
71
- <el-col :span="4" :offset="1">
78
+ <el-col span="auto">
72
79
  <el-switch v-model="displayMinimap" active-text="Minimap" active-icon-class="el-icon-discover"
73
80
  active-color="#8300bf" />
74
81
  </el-col>
75
82
  </el-row>
76
- <el-row :gutter="20">
77
- <el-col :span="6">
83
+
84
+ <el-row :gutter="20" justify="center" align="middle">
85
+ <el-col span="auto">
78
86
  <el-switch v-model="tumbleOn" active-text="Tumble" active-color="#8300bf" />
79
87
  </el-col>
80
- <el-col :span="1"> x: </el-col>
81
- <el-col :span="3">
82
- <el-input-number class="tumble-direction" controls-position="right" v-model="tumbleDirection[0]" :min="-1.0"
83
- :max="1.0" :controls="false" placeholder="Please input" label="x" @change="autoTumble" />
88
+ <el-col span="auto">
89
+ <el-row>
90
+ <el-col :span="8"> x: </el-col>
91
+ <el-col :span="16">
92
+ <el-input-number class="tumble-direction" controls-position="right" v-model="tumbleDirection[0]" :min="-1.0"
93
+ :max="1.0" :controls="false" placeholder="Please input" label="x" @change="autoTumble" />
94
+ </el-col>
95
+ </el-row>
84
96
  </el-col>
85
- <el-col :span="1" :offset="1"> y: </el-col>
86
- <el-col :span="3">
87
- <el-input-number class="tumble-direction" controls-position="right" v-model="tumbleDirection[1]" :min="-1.0"
88
- :max="1.0" :controls="false" placeholder="Please input" label="y" @change="autoTumble" />
97
+ <el-col span="auto">
98
+ <el-row>
99
+ <el-col :span="8"> y: </el-col>
100
+ <el-col :span="16">
101
+ <el-input-number class="tumble-direction" controls-position="right" v-model="tumbleDirection[1]" :min="-1.0"
102
+ :max="1.0" :controls="false" placeholder="Please input" label="y" @change="autoTumble" />
103
+ </el-col>
104
+ </el-row>
89
105
  </el-col>
90
106
  </el-row>
91
- <el-row :gutter="20">
92
- <el-button size="small" @click="helpMode = !helpMode">
93
- Help Mode
94
- </el-button>
95
- <el-button size="small" @click="screenCapture()"> Capture </el-button>
96
- <el-button size="small" @click="changeMarkers"> Change Markers </el-button>
107
+
108
+ <el-row :gutter="20" justify="center" align="middle">
109
+ <el-col span="auto">
110
+ <el-button size="small" @click="helpMode = !helpMode">
111
+ Help Mode
112
+ </el-button>
113
+ </el-col>
114
+ <el-col span="auto">
115
+ <el-button size="small" @click="screenCapture()"> Capture </el-button>
116
+ </el-col>
117
+ <el-col span="auto">
118
+ <el-button size="small" @click="changeMarkers"> Change Markers </el-button>
119
+ </el-col>
97
120
  </el-row>
98
- <el-row :gutter="10">
99
- <el-button size="small" @click="saveSettings()">
100
- Save Settings
101
- </el-button>
102
- <el-button size="small" @click="restoreSettings()">
103
- Restore Settings
104
- </el-button>
105
- <el-button size="small" @click="exportGLB()"> Export GLB </el-button>
106
- <el-button size="small" @click="exportGLTF()"> Export GLTF </el-button>
121
+
122
+ <el-row :gutter="20" justify="center" align="middle">
123
+ <el-col span="auto">
124
+ <el-button size="small" @click="saveSettings()">
125
+ Save Settings
126
+ </el-button>
127
+ </el-col>
128
+ <el-col span="auto">
129
+ <el-button size="small" @click="restoreSettings()">
130
+ Restore Settings
131
+ </el-button>
132
+ </el-col>
133
+ <el-col span="auto">
134
+ <el-button size="small" @click="exportGLB()"> Export GLB </el-button>
135
+ </el-col>
136
+ <el-col span="auto">
137
+ <el-button size="small" @click="exportGLTF()"> Export GLTF </el-button>
138
+ </el-col>
107
139
  </el-row>
108
- <el-row :gutter="30">
109
- <el-col :span="7" :offset="2">
110
- <el-switch v-model="syncMode" active-text="Sync Mode" active-color="#8300bf" />
111
- <el-row v-if="syncMode">
112
- <el-input-number v-model="zoom" :min="1.0" :controls="false" placeholder="Please input" label="zoom" />
113
- <el-input-number v-model="pos[0]" :min="-1.0" :max="1.0" :controls="false" placeholder="Please input"
114
- label="x" />
115
- <el-input-number v-model="pos[1]" :min="-1.0" :max="1.0" :controls="false" label="y" />
140
+
141
+ <el-row justify="center" align="middle">
142
+ <el-col>
143
+ <el-row :gutter="20" justify="center" align="middle">
144
+ <el-col>
145
+ <el-switch v-model="syncMode" active-text="Sync Mode" active-color="#8300bf" />
146
+ </el-col>
147
+ </el-row>
148
+ <el-row :gutter="20" justify="center" align="middle" v-if="syncMode">
149
+ <el-col :span="8">
150
+ <el-input-number v-model="zoom" :min="1.0" :controls="false" placeholder="Please input" label="zoom" />
151
+ </el-col>
152
+ <el-col :span="8">
153
+ <el-input-number v-model="pos[0]" :min="-1.0" :max="1.0" :controls="false" placeholder="Please input" label="x" />
154
+ </el-col>
155
+ <el-col :span="8">
156
+ <el-input-number v-model="pos[1]" :min="-1.0" :max="1.0" :controls="false" label="y" />
157
+ </el-col>
116
158
  </el-row>
117
159
  </el-col>
118
160
  </el-row>
119
- <el-row :gutter="30">
120
- <el-col :span="7" :offset="4">
161
+
162
+ <el-row :gutter="20" justify="center" align="middle">
163
+ <el-col span="auto">
121
164
  <el-switch v-model="render" active-text="Rendering" active-color="#8300bf" />
122
165
  </el-col>
123
- <el-col :span="8" :offset="1">
166
+ <el-col span="auto">
124
167
  <el-switch v-model="renderInfoOn" active-text="Renderer Info" active-color="#8300bf" />
125
168
  </el-col>
126
169
  </el-row>
170
+
127
171
  <template v-if="renderInfoOn && rendererInfo">
128
- <el-row>
129
- <el-col v-for="(value, name) in rendererInfo.memory" :key="name" :offset="4" :span="6">
172
+ <el-row :gutter="20" justify="center" align="middle">
173
+ <el-col v-for="(value, name) in rendererInfo.memory" :key="name" span="auto">
130
174
  {{ name }} : {{ value }}
131
175
  </el-col>
132
176
  </el-row>
133
- <el-row>
134
- <el-col v-for="(value, name) in rendererInfo.render" :key="name" :offset="1" :span="6">
177
+ <el-row :gutter="20" justify="center" align="middle">
178
+ <el-col v-for="(value, name) in rendererInfo.render" :key="name" span="auto">
135
179
  {{ name }} : {{ value }}
136
180
  </el-col>
137
181
  </el-row>
138
182
  </template>
139
- <el-row :gutter="20">
140
- Feature Demo:
141
- <el-button size="small" @click="featureTextureVolume(false)">
142
- Texture volume
143
- </el-button>
144
- <el-button size="small" @click="featureTextureSlides(false)">
145
- Texture slides
146
- </el-button>
147
- <el-button size="small" @click="featureTextureVolume(true)">
148
- Body volume
149
- </el-button>
150
- <el-button size="small" @click="featureTextureSlides(true)">
151
- Body slides
152
- </el-button>
153
- <el-button size="small" @click="featureArmSlides(true)">
154
- Arm slides
155
- </el-button>
156
- <el-switch v-model="onClickMarkers" active-text="Markers On Selection" active-color="#8300bf" />
157
- <el-switch
158
- v-model="wireframe"
159
- active-text="wireframe"
160
- active-color="#8300bf"
161
- @change="wireframeChanged"
162
- />
183
+
184
+ <el-row justify="center" align="middle">
185
+ <el-col>
186
+ <el-row :gutter="20" justify="center" align="middle">
187
+ <el-col>
188
+ <p>Feature Demo:</p>
189
+ </el-col>
190
+ </el-row>
191
+ <el-row :gutter="20" justify="center" align="middle">
192
+ <el-col span="auto">
193
+ <el-button size="small" @click="featureTextureVolume(false)">
194
+ Texture volume
195
+ </el-button>
196
+ </el-col>
197
+ <el-col span="auto">
198
+ <el-button size="small" @click="featureTextureSlides(false)">
199
+ Texture slides
200
+ </el-button>
201
+ </el-col>
202
+ <el-col span="auto">
203
+ <el-button size="small" @click="featureTextureVolume(true)">
204
+ Body volume
205
+ </el-button>
206
+ </el-col>
207
+ <el-col span="auto">
208
+ <el-button size="small" @click="featureTextureSlides(true)">
209
+ Body slides
210
+ </el-button>
211
+ </el-col>
212
+ <el-col span="auto">
213
+ <el-button size="small" @click="featureArmSlides(true)">
214
+ Arm slides
215
+ </el-button>
216
+ </el-col>
217
+ </el-row>
218
+ <el-row :gutter="20" justify="center" align="middle">
219
+ <el-col span="auto">
220
+ <el-switch
221
+ v-model="onClickMarkers"
222
+ active-text="Markers On Selection"
223
+ active-color="#8300bf"
224
+ />
225
+ </el-col>
226
+ <el-col span="auto">
227
+ <el-switch
228
+ v-model="wireframe"
229
+ active-text="Wireframe"
230
+ active-color="#8300bf"
231
+ @change="wireframeChanged"
232
+ />
233
+ </el-col>
234
+ </el-row>
235
+ </el-col>
163
236
  </el-row>
164
- <el-row :gutter="20">
165
- <el-input v-model="input" type="textarea" autosize placeholder="Please input"
166
- style="padding-left: 5%; width: 90%" />
237
+
238
+ <el-row :gutter="20" justify="center" align="middle">
239
+ <el-col :span="24">
240
+ <el-input
241
+ v-model="input"
242
+ type="textarea"
243
+ :autosize="{ minRows: 3 }"
244
+ placeholder="Please input"
245
+ />
246
+ </el-col>
167
247
  </el-row>
248
+
168
249
  </div>
169
250
  <template #reference>
170
251
  <el-button class="options-button" :icon="ElIconSetting">
@@ -245,7 +326,7 @@ export default {
245
326
  data: function () {
246
327
  return {
247
328
  consoleOn: true,
248
- createPoints: false,
329
+ createPoints: false,
249
330
  url: undefined,
250
331
  input: undefined,
251
332
  displayUI: true,
@@ -260,7 +341,7 @@ export default {
260
341
  tumbleOn: false,
261
342
  tumbleDirection: [1.0, 0.0],
262
343
  showColourPicker: true,
263
- markerCluster: false,
344
+ markerCluster: true,
264
345
  minimapSettings: {
265
346
  x_offset: 16,
266
347
  y_offset: 50,
@@ -268,57 +349,22 @@ export default {
268
349
  height: 128,
269
350
  align: "top-right",
270
351
  },
271
- markerLabels: [
272
- "Spinal cord",
273
- "urinary bladder",
274
- "lower urinary tract",
275
- "Peripheral nervous system",
276
- "Dorsal root ganglion",
277
- "cervicothoracic ganglion",
278
- "stomach",
279
- "enteric ganglion",
280
- "myenteric nerve plexus",
281
- "colon",
282
- "Enteric Nervous System",
283
- "pelvic ganglion",
284
- "celiac ganglion",
285
- "jugular ganglion",
286
- "vagus nerve",
287
- "Brainstem",
288
- "heart",
289
- "larynx",
290
- "inferior vagus X ganglion",
291
- "mucosa of stomach",
292
- "lung",
293
- "pelvic splanchnic nerve",
294
- "small intestine",
295
- "type EC enteroendocrine cell",
296
- "body proper",
297
- "skin epidermis",
298
- "Diaphragm",
299
- "sinus venosus",
300
- "esophagus",
301
- "Solitary nucleus",
302
- "urethra",
303
- "sympathetic nervous system",
304
- "superior cervical ganglion",
305
- "cardiac nerve plexus",
306
- "ganglion",
307
- "pancreas",
308
- "Brain",
309
- "autonomic nervous system",
310
- "lower digestive tract",
311
- "adipose tissue",
312
- "white adipose tissue",
313
- "brown adipose tissue",
314
- "kidney",
315
- "liver",
316
- "phrenic nerve",
317
- "submandibular ganglion",
318
- "bone tissue",
319
- "sciatic nerve",
320
- "glossopharyngeal nerve"
321
- ],
352
+ markerLabels: {
353
+ "body proper": 9,
354
+ "Spinal cord": 8,
355
+ "lung": 11,
356
+ "stomach": 12,
357
+ "urinary bladder": 11,
358
+ "Brainstem": 11,
359
+ "heart": 9,
360
+ "skin epidermis": 5,
361
+ "Diaphragm": 7,
362
+ "colon": 9,
363
+ "vagus nerve": 3,
364
+ "myenteric nerve plexus": 2,
365
+ "esophagus": 1,
366
+ "urethra": 3
367
+ },
322
368
  render: true,
323
369
  region: "",
324
370
  viewURL: "",
@@ -585,11 +631,7 @@ export default {
585
631
  }
586
632
  },
587
633
  changeMarkers: function () {
588
- if (this.markerLabels[0] === "right ventricle") {
589
- this.markerLabels = ["left atrium", "epicardium", "stomach"];
590
- } else {
591
- this.markerLabels = ["right ventricle"];
592
- }
634
+ this.markerLabels = {"left atrium": 3, "epicardium": 4 , "stomach": 5};
593
635
  },
594
636
  onNavigated: function (data) {
595
637
  this.zoom = data.zoom;
@@ -693,15 +735,35 @@ body {
693
735
  text-align: center;
694
736
 
695
737
  .el-row {
696
- margin-bottom: 8px;
738
+ .el-col {
739
+ &.is-guttered {
740
+ padding-top: 10px;
741
+ padding-bottom: 10px;
742
+ }
743
+
744
+ > p {
745
+ font-size: 12px;
746
+ margin: 0;
747
+ }
697
748
 
698
- &:last-child {
699
- margin-bottom: 0;
749
+ .el-input__inner,
750
+ .el-switch {
751
+ font-size: 12px;
752
+ height: 20px;
753
+ }
700
754
  }
701
755
  }
702
756
 
703
757
  .el-switch {
704
758
  white-space: pre;
759
+
760
+ .el-switch__label {
761
+ color: inherit;
762
+
763
+ * {
764
+ font-size: 12px;
765
+ }
766
+ }
705
767
  }
706
768
  }
707
769
 
@@ -717,16 +779,6 @@ body {
717
779
  position: absolute;
718
780
  }
719
781
 
720
- .options-container {
721
- .el-row {
722
- margin-bottom: 10px;
723
-
724
- &:last-child {
725
- margin-bottom: 0;
726
- }
727
- }
728
- }
729
-
730
782
  .autocomplete-popper {
731
783
  li {
732
784
  line-height: normal;
@@ -740,12 +792,15 @@ body {
740
792
  }
741
793
 
742
794
  .search-box {
795
+ width: 200px;
743
796
  left: calc(50% + 100px);
744
797
  position: absolute;
798
+ top: 5px;
745
799
  }
746
800
 
747
801
  .models-button {
748
802
  position: absolute;
803
+ top: 5px;
749
804
  }
750
805
 
751
806
  .tumble-direction {
package/src/components/ScaffoldVuer.vue CHANGED
@@ -614,9 +614,9 @@ export default {
614
614
  default: false,
615
615
  },
616
616
  markerLabels : {
617
- type: Array,
617
+ type: Object,
618
618
  default: function () {
619
- return []
619
+ return {}
620
620
  }
621
621
  },
622
622
  /**
@@ -813,7 +813,7 @@ export default {
813
813
  active: false,
814
814
  },
815
815
  fileFormat: "metadata",
816
- previousMarkerLabels: [],
816
+ previousMarkerLabels: markRaw({}),
817
817
  viewingMode: "Exploration",
818
818
  viewingModes: [
819
819
  "Annotation",
@@ -902,13 +902,13 @@ export default {
902
902
  immediate: true,
903
903
  },
904
904
  markerLabels: function(labels) {
905
- this.previousMarkerLabels.forEach((pml)=>{
906
- this.setMarkerModeForObjectsWithName(pml, "off");
907
- })
908
- labels.forEach((l)=>{
909
- this.setMarkerModeForObjectsWithName(l, "on");
910
- })
911
- this.previousMarkerLabels = labels;
905
+ for (const [key, value] of Object.entries(this.previousMarkerLabels)) {
906
+ this.setMarkerModeForObjectsWithName(key, value, "off");
907
+ }
908
+ for (const [key, value] of Object.entries(labels)) {
909
+ this.setMarkerModeForObjectsWithName(key, value, "on");
910
+ }
911
+ this.previousMarkerLabels = markRaw({...labels});
912
912
  },
913
913
  },
914
914
  beforeCreate: function () {
@@ -1838,12 +1838,12 @@ export default {
1838
1838
  * Set the marker modes for objects with the provided name, mode can
1839
1839
  * be "on", "off" or "inherited".
1840
1840
  */
1841
- setMarkerModeForObjectsWithName: function (name, mode) {
1841
+ setMarkerModeForObjectsWithName: function (name, number, mode) {
1842
1842
  if (name && this.$module.scene) {
1843
1843
  const rootRegion = this.$module.scene.getRootRegion();
1844
1844
  const groups = [name];
1845
1845
  const objects = findObjectsWithNames(rootRegion, groups, "", true);
1846
- objects.forEach(object => object.setMarkerMode(mode));
1846
+ objects.forEach(object => object.setMarkerMode(mode, { number }));
1847
1847
  }
1848
1848
  },
1849
1849
  /**
@@ -2174,9 +2174,9 @@ export default {
2174
2174
  * Set the markers for the scene.
2175
2175
  */
2176
2176
  setMarkers: function () {
2177
- this.markerLabels.forEach((l)=>{
2178
- this.setMarkerModeForObjectsWithName(l, "on");
2179
- })
2177
+ for (const [key, value] of Object.entries(this.markerLabels)) {
2178
+ this.setMarkerModeForObjectsWithName(key, value, "on");
2179
+ }
2180
2180
  },
2181
2181
  },
2182
2182
  };