@abi-software/scaffoldvuer 1.1.0-beta.1 → 1.2.0-beta.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.
- package/dist/scaffoldvuer.js +11280 -10905
- package/dist/scaffoldvuer.umd.cjs +169 -169
- package/dist/style.css +1 -1
- package/package.json +3 -3
- package/src/App.vue +305 -122
- package/src/components/HelpModeDialog.vue +360 -0
- package/src/components/ScaffoldVuer.vue +191 -50
- package/src/components/index.js +3 -1
- package/src/components.d.ts +1 -0
- package/src/scripts/OrgansRenderer.js +1 -2
- package/src/scripts/Utilities.js +0 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abi-software/scaffoldvuer",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0-beta.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"*.js"
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@abi-software/flatmapvuer": "^1.1.0
|
|
44
|
+
"@abi-software/flatmapvuer": "^1.1.0",
|
|
45
45
|
"@abi-software/sparc-annotation": "^0.3.1",
|
|
46
46
|
"@abi-software/svg-sprite": "^1.0.0",
|
|
47
47
|
"@element-plus/icons-vue": "^2.3.1",
|
|
@@ -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.
|
|
58
|
+
"zincjs": "^1.7.0"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@vitejs/plugin-vue": "^4.6.2",
|
package/src/App.vue
CHANGED
|
@@ -2,130 +2,250 @@
|
|
|
2
2
|
<div id="app">
|
|
3
3
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap" />
|
|
4
4
|
<drop-zone ref="dropzone" @files-drop="onFilesDrop">
|
|
5
|
-
<ScaffoldVuer
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
:
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
<ScaffoldVuer
|
|
6
|
+
v-if="url"
|
|
7
|
+
ref="scaffold"
|
|
8
|
+
class="vuer"
|
|
9
|
+
:flatmapAPI="flatmapAPI"
|
|
10
|
+
:display-u-i="displayUI"
|
|
11
|
+
:url="url"
|
|
12
|
+
:help-mode="helpMode"
|
|
13
|
+
:helpModeDialog="useHelpModeDialog"
|
|
14
|
+
:helpModeActiveItem="helpModeActiveItem"
|
|
15
|
+
@help-mode-last-item="onHelpModeLastItem"
|
|
16
|
+
@shown-tooltip="onTooltipShown"
|
|
17
|
+
@shown-map-tooltip="onMapTooltipShown"
|
|
18
|
+
:display-latest-changes="true"
|
|
19
|
+
:display-minimap="displayMinimap"
|
|
20
|
+
:display-markers="displayMarkers"
|
|
21
|
+
:enableOpenMapUI="true"
|
|
22
|
+
:marker-cluster="markerCluster"
|
|
23
|
+
:minimap-settings="minimapSettings"
|
|
24
|
+
:show-colour-picker="showColourPicker"
|
|
25
|
+
:render="render"
|
|
26
|
+
:region="region"
|
|
27
|
+
:view-u-r-l="viewURL"
|
|
28
|
+
:format="format"
|
|
29
|
+
:marker-labels="markerLabels"
|
|
30
|
+
@open-map="openMap"
|
|
31
|
+
@on-ready="onReady"
|
|
32
|
+
@scaffold-selected="onSelected"
|
|
33
|
+
@scaffold-navigated="onNavigated"
|
|
34
|
+
@timeChanged="updateCurrentTime"
|
|
35
|
+
@zinc-object-added="objectAdded"
|
|
36
|
+
@vue:mounted="viewerMounted"
|
|
37
|
+
/>
|
|
12
38
|
</drop-zone>
|
|
13
39
|
|
|
40
|
+
<HelpModeDialog
|
|
41
|
+
v-if="helpMode && useHelpModeDialog"
|
|
42
|
+
ref="scaffoldHelp"
|
|
43
|
+
:scaffoldRef="scaffoldRef"
|
|
44
|
+
:lastItem="helpModeLastItem"
|
|
45
|
+
@show-next="onHelpModeShowNext"
|
|
46
|
+
@finish-help-mode="onFinishHelpMode"
|
|
47
|
+
/>
|
|
48
|
+
|
|
14
49
|
<el-popover popper-class="options-container" placement="bottom" trigger="click" width="500" :teleported="false">
|
|
15
50
|
<div>
|
|
51
|
+
|
|
16
52
|
<el-row :gutter="20">
|
|
17
|
-
<
|
|
53
|
+
<el-col>
|
|
54
|
+
<p>{{ selectedCoordinates }}</p>
|
|
55
|
+
</el-col>
|
|
18
56
|
</el-row>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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>
|
|
23
64
|
</el-row>
|
|
24
|
-
|
|
25
|
-
|
|
65
|
+
|
|
66
|
+
<el-row :gutter="20" justify="center" align="middle">
|
|
67
|
+
<el-col span="auto">
|
|
26
68
|
<el-switch v-model="displayUI" active-text="UI" />
|
|
27
69
|
</el-col>
|
|
28
|
-
<el-col
|
|
70
|
+
<el-col span="auto">
|
|
29
71
|
<el-switch v-model="displayMarkers" active-text="Markers" active-icon-class="el-icon-location"
|
|
30
72
|
active-color="#8300bf" />
|
|
31
73
|
</el-col>
|
|
32
|
-
<el-col
|
|
74
|
+
<el-col span="auto">
|
|
75
|
+
<el-switch v-model="markerCluster" active-text="Marker Cluster" active-icon-class="el-icon-location"
|
|
76
|
+
active-color="#8300bf" />
|
|
77
|
+
</el-col>
|
|
78
|
+
<el-col span="auto">
|
|
33
79
|
<el-switch v-model="displayMinimap" active-text="Minimap" active-icon-class="el-icon-discover"
|
|
34
80
|
active-color="#8300bf" />
|
|
35
81
|
</el-col>
|
|
36
82
|
</el-row>
|
|
37
|
-
|
|
38
|
-
|
|
83
|
+
|
|
84
|
+
<el-row :gutter="20" justify="center" align="middle">
|
|
85
|
+
<el-col span="auto">
|
|
39
86
|
<el-switch v-model="tumbleOn" active-text="Tumble" active-color="#8300bf" />
|
|
40
87
|
</el-col>
|
|
41
|
-
<el-col
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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>
|
|
45
96
|
</el-col>
|
|
46
|
-
<el-col
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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>
|
|
50
105
|
</el-col>
|
|
51
106
|
</el-row>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
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>
|
|
58
120
|
</el-row>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
</el-
|
|
66
|
-
<el-
|
|
67
|
-
|
|
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>
|
|
68
139
|
</el-row>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<el-row
|
|
73
|
-
<el-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
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>
|
|
77
158
|
</el-row>
|
|
78
159
|
</el-col>
|
|
79
160
|
</el-row>
|
|
80
|
-
|
|
81
|
-
|
|
161
|
+
|
|
162
|
+
<el-row :gutter="20" justify="center" align="middle">
|
|
163
|
+
<el-col span="auto">
|
|
82
164
|
<el-switch v-model="render" active-text="Rendering" active-color="#8300bf" />
|
|
83
165
|
</el-col>
|
|
84
|
-
<el-col
|
|
166
|
+
<el-col span="auto">
|
|
85
167
|
<el-switch v-model="renderInfoOn" active-text="Renderer Info" active-color="#8300bf" />
|
|
86
168
|
</el-col>
|
|
87
169
|
</el-row>
|
|
170
|
+
|
|
88
171
|
<template v-if="renderInfoOn && rendererInfo">
|
|
89
|
-
<el-row>
|
|
90
|
-
<el-col v-for="(value, name) in rendererInfo.memory" :key="name"
|
|
172
|
+
<el-row :gutter="20" justify="center" align="middle">
|
|
173
|
+
<el-col v-for="(value, name) in rendererInfo.memory" :key="name" span="auto">
|
|
91
174
|
{{ name }} : {{ value }}
|
|
92
175
|
</el-col>
|
|
93
176
|
</el-row>
|
|
94
|
-
<el-row>
|
|
95
|
-
<el-col v-for="(value, name) in rendererInfo.render" :key="name"
|
|
177
|
+
<el-row :gutter="20" justify="center" align="middle">
|
|
178
|
+
<el-col v-for="(value, name) in rendererInfo.render" :key="name" span="auto">
|
|
96
179
|
{{ name }} : {{ value }}
|
|
97
180
|
</el-col>
|
|
98
181
|
</el-row>
|
|
99
182
|
</template>
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
<el-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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>
|
|
124
236
|
</el-row>
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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>
|
|
128
247
|
</el-row>
|
|
248
|
+
|
|
129
249
|
</div>
|
|
130
250
|
<template #reference>
|
|
131
251
|
<el-button class="options-button" :icon="ElIconSetting">
|
|
@@ -180,6 +300,7 @@ import {
|
|
|
180
300
|
ElSwitch as Switch,
|
|
181
301
|
} from "element-plus";
|
|
182
302
|
import { useRoute, useRouter } from 'vue-router'
|
|
303
|
+
import HelpModeDialog from './components/HelpModeDialog.vue';
|
|
183
304
|
|
|
184
305
|
let texture_prefix = undefined;
|
|
185
306
|
|
|
@@ -200,9 +321,12 @@ export default {
|
|
|
200
321
|
DropZone,
|
|
201
322
|
ScaffoldVuer,
|
|
202
323
|
ModelsTable,
|
|
324
|
+
HelpModeDialog,
|
|
203
325
|
},
|
|
204
326
|
data: function () {
|
|
205
327
|
return {
|
|
328
|
+
consoleOn: true,
|
|
329
|
+
createPoints: false,
|
|
206
330
|
url: undefined,
|
|
207
331
|
input: undefined,
|
|
208
332
|
displayUI: true,
|
|
@@ -217,6 +341,7 @@ export default {
|
|
|
217
341
|
tumbleOn: false,
|
|
218
342
|
tumbleDirection: [1.0, 0.0],
|
|
219
343
|
showColourPicker: true,
|
|
344
|
+
markerCluster: true,
|
|
220
345
|
minimapSettings: {
|
|
221
346
|
x_offset: 16,
|
|
222
347
|
y_offset: 50,
|
|
@@ -224,7 +349,22 @@ export default {
|
|
|
224
349
|
height: 128,
|
|
225
350
|
align: "top-right",
|
|
226
351
|
},
|
|
227
|
-
markerLabels:
|
|
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
|
+
},
|
|
228
368
|
render: true,
|
|
229
369
|
region: "",
|
|
230
370
|
viewURL: "",
|
|
@@ -239,6 +379,11 @@ export default {
|
|
|
239
379
|
loadTextureVolumeOnReady: false,
|
|
240
380
|
readyCallback: undefined,
|
|
241
381
|
flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v4/",
|
|
382
|
+
helpMode: false,
|
|
383
|
+
helpModeActiveItem: 0,
|
|
384
|
+
helpModeLastItem: false,
|
|
385
|
+
useHelpModeDialog: true,
|
|
386
|
+
scaffoldRef: null,
|
|
242
387
|
route: useRoute(),
|
|
243
388
|
router: useRouter(),
|
|
244
389
|
ElIconSetting: shallowRef(ElIconSetting),
|
|
@@ -261,6 +406,11 @@ export default {
|
|
|
261
406
|
syncMode: function (val) {
|
|
262
407
|
this.$refs.scaffold.toggleSyncControl(val);
|
|
263
408
|
},
|
|
409
|
+
helpMode: function (newVal) {
|
|
410
|
+
if (!newVal) {
|
|
411
|
+
this.helpModeActiveItem = 0;
|
|
412
|
+
}
|
|
413
|
+
},
|
|
264
414
|
},
|
|
265
415
|
mounted: function () {
|
|
266
416
|
this._objects = [];
|
|
@@ -298,8 +448,10 @@ export default {
|
|
|
298
448
|
});
|
|
299
449
|
},
|
|
300
450
|
objectAdded: function (zincObject) {
|
|
301
|
-
|
|
302
|
-
|
|
451
|
+
if (this.consoleOn) {
|
|
452
|
+
console.log(zincObject)
|
|
453
|
+
console.log(this.$refs.scaffold.$module.scene.getBoundingBox())
|
|
454
|
+
}
|
|
303
455
|
if (this._objects.length === 0) {
|
|
304
456
|
zincObject.setMarkerMode("on");
|
|
305
457
|
}
|
|
@@ -309,7 +461,9 @@ export default {
|
|
|
309
461
|
this._objects.push(zincObject);
|
|
310
462
|
},
|
|
311
463
|
openMap: function (map) {
|
|
312
|
-
|
|
464
|
+
if (this.consoleOn) {
|
|
465
|
+
console.log(map);
|
|
466
|
+
}
|
|
313
467
|
},
|
|
314
468
|
featureTextureVolume: async function (overlap) {
|
|
315
469
|
//this.$refs.scaffold.clearScene();
|
|
@@ -401,10 +555,12 @@ export default {
|
|
|
401
555
|
};
|
|
402
556
|
})
|
|
403
557
|
);
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
558
|
+
if (this.consoleOn) {
|
|
559
|
+
console.log(
|
|
560
|
+
"found suggestions",
|
|
561
|
+
this.$refs.scaffold.fetchSuggestions(term)
|
|
562
|
+
);
|
|
563
|
+
}
|
|
408
564
|
},
|
|
409
565
|
autoTumble: function () {
|
|
410
566
|
const flag = this.tumbleOn;
|
|
@@ -430,7 +586,7 @@ export default {
|
|
|
430
586
|
});
|
|
431
587
|
},
|
|
432
588
|
onReady: function () {
|
|
433
|
-
console.log(this.$refs.scaffold)
|
|
589
|
+
if (this.consoleOn) console.log(this.$refs.scaffold)
|
|
434
590
|
if (this.readyCallback) {
|
|
435
591
|
this.readyCallback(this.$refs.scaffold, texture_prefix);
|
|
436
592
|
this.readyCallback = undefined;
|
|
@@ -441,6 +597,7 @@ export default {
|
|
|
441
597
|
testArmSlides(this.$refs.scaffold);
|
|
442
598
|
}
|
|
443
599
|
}
|
|
600
|
+
this.scaffoldRef = this.$refs.scaffold;
|
|
444
601
|
},
|
|
445
602
|
addLines: function (coord) {
|
|
446
603
|
if (this.coordinatesClicked.length === 1) {
|
|
@@ -451,41 +608,30 @@ export default {
|
|
|
451
608
|
0x00ee22,
|
|
452
609
|
);
|
|
453
610
|
this.coordinatesClicked.length = 0;
|
|
454
|
-
console.log(returned);
|
|
611
|
+
if (this.consoleOn) console.log(returned);
|
|
455
612
|
} else {
|
|
456
613
|
this.coordinatesClicked.push(coord);
|
|
457
614
|
}
|
|
458
615
|
},
|
|
459
616
|
onSelected: function (data) {
|
|
460
|
-
|
|
461
617
|
if (data && data.length > 0 && data[0].data.group) {
|
|
462
|
-
console.log(data[0]
|
|
463
|
-
|
|
464
|
-
if (data[0].worldCoords) {
|
|
465
|
-
console.log(data[0].data);
|
|
618
|
+
if (this.consoleOn) console.log(data[0]);
|
|
619
|
+
if (this.createPoints && data[0].extraData.worldCoords) {
|
|
466
620
|
const returned = this.$refs.scaffold.$module.scene.createPoints(
|
|
467
621
|
"test",
|
|
468
622
|
"points",
|
|
469
|
-
[data[0].worldCoords],
|
|
623
|
+
[data[0].extraData.worldCoords],
|
|
470
624
|
undefined,
|
|
471
625
|
0x0022ee,
|
|
472
626
|
);
|
|
473
|
-
|
|
474
|
-
console.log(data[0].worldCoords)
|
|
475
|
-
this.addLines(data[0].worldCoords);
|
|
476
627
|
}
|
|
477
|
-
*/
|
|
478
628
|
delete this.route.query["viewURL"];
|
|
479
629
|
this.$refs.scaffold.showRegionTooltipWithAnnotations(data, false, true);
|
|
480
630
|
if (this.onClickMarkers) this.$refs.scaffold.setMarkerModeForObjectsWithName(data[0].data.group, "on");
|
|
481
631
|
}
|
|
482
632
|
},
|
|
483
633
|
changeMarkers: function () {
|
|
484
|
-
|
|
485
|
-
this.markerLabels = ["left atrium", "epicardium", "stomach"];
|
|
486
|
-
} else {
|
|
487
|
-
this.markerLabels = ["right ventricle"];
|
|
488
|
-
}
|
|
634
|
+
this.markerLabels = {"left atrium": 3, "epicardium": 4 , "stomach": 5};
|
|
489
635
|
},
|
|
490
636
|
onNavigated: function (data) {
|
|
491
637
|
this.zoom = data.zoom;
|
|
@@ -538,7 +684,31 @@ export default {
|
|
|
538
684
|
this.viewURL = "";
|
|
539
685
|
}
|
|
540
686
|
})
|
|
541
|
-
}
|
|
687
|
+
},
|
|
688
|
+
onHelpModeShowNext: function () {
|
|
689
|
+
this.helpModeActiveItem += 1;
|
|
690
|
+
},
|
|
691
|
+
onHelpModeLastItem: function (isLastItem) {
|
|
692
|
+
if (isLastItem) {
|
|
693
|
+
this.helpModeLastItem = true;
|
|
694
|
+
}
|
|
695
|
+
},
|
|
696
|
+
onFinishHelpMode: function () {
|
|
697
|
+
this.helpMode = false;
|
|
698
|
+
// reset help mode to default values
|
|
699
|
+
this.helpModeActiveItem = 0;
|
|
700
|
+
this.helpModeLastItem = false;
|
|
701
|
+
},
|
|
702
|
+
onTooltipShown: function () {
|
|
703
|
+
if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
|
|
704
|
+
this.$refs.scaffoldHelp.toggleTooltipHighlight();
|
|
705
|
+
}
|
|
706
|
+
},
|
|
707
|
+
onMapTooltipShown: function () {
|
|
708
|
+
if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
|
|
709
|
+
this.$refs.scaffoldHelp.toggleTooltipPinHighlight();
|
|
710
|
+
}
|
|
711
|
+
},
|
|
542
712
|
},
|
|
543
713
|
};
|
|
544
714
|
</script>
|
|
@@ -565,15 +735,35 @@ body {
|
|
|
565
735
|
text-align: center;
|
|
566
736
|
|
|
567
737
|
.el-row {
|
|
568
|
-
|
|
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
|
+
}
|
|
569
748
|
|
|
570
|
-
|
|
571
|
-
|
|
749
|
+
.el-input__inner,
|
|
750
|
+
.el-switch {
|
|
751
|
+
font-size: 12px;
|
|
752
|
+
height: 20px;
|
|
753
|
+
}
|
|
572
754
|
}
|
|
573
755
|
}
|
|
574
756
|
|
|
575
757
|
.el-switch {
|
|
576
758
|
white-space: pre;
|
|
759
|
+
|
|
760
|
+
.el-switch__label {
|
|
761
|
+
color: inherit;
|
|
762
|
+
|
|
763
|
+
* {
|
|
764
|
+
font-size: 12px;
|
|
765
|
+
}
|
|
766
|
+
}
|
|
577
767
|
}
|
|
578
768
|
}
|
|
579
769
|
|
|
@@ -589,16 +779,6 @@ body {
|
|
|
589
779
|
position: absolute;
|
|
590
780
|
}
|
|
591
781
|
|
|
592
|
-
.options-container {
|
|
593
|
-
.el-row {
|
|
594
|
-
margin-bottom: 10px;
|
|
595
|
-
|
|
596
|
-
&:last-child {
|
|
597
|
-
margin-bottom: 0;
|
|
598
|
-
}
|
|
599
|
-
}
|
|
600
|
-
}
|
|
601
|
-
|
|
602
782
|
.autocomplete-popper {
|
|
603
783
|
li {
|
|
604
784
|
line-height: normal;
|
|
@@ -612,12 +792,15 @@ body {
|
|
|
612
792
|
}
|
|
613
793
|
|
|
614
794
|
.search-box {
|
|
795
|
+
width: 200px;
|
|
615
796
|
left: calc(50% + 100px);
|
|
616
797
|
position: absolute;
|
|
798
|
+
top: 5px;
|
|
617
799
|
}
|
|
618
800
|
|
|
619
801
|
.models-button {
|
|
620
802
|
position: absolute;
|
|
803
|
+
top: 5px;
|
|
621
804
|
}
|
|
622
805
|
|
|
623
806
|
.tumble-direction {
|