@3cr/viewer-browser 0.0.125 → 0.0.127
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/Viewer3CR.js +13 -13
- package/dist/Viewer3CR.mjs +6098 -5710
- package/dist/Viewer3CR.umd.js +13 -13
- package/package.json +1 -1
- package/src/components/modal/MftpWebGL3DRModal.vue +6 -0
- package/src/demo/licence/DemoLicenceSendToPartyModal.vue +174 -0
- package/src/demo/licence/DemoLicenceShareToMobileModal.vue +100 -0
- package/src/demo/options.ts +4 -4
- package/vite.config.mts +1 -1
package/package.json
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
<template>
|
|
3
3
|
<!-- <DemoModal data-vuetify v-model:modal="m_demo" />-->
|
|
4
4
|
<DemoLicenceInfoModal v-model:modal="m_demo" :is-modal-open="value" />
|
|
5
|
+
<DemoLicenceShareToMobileModal v-model:modal="m_demoLicenceShareToMobile" />
|
|
6
|
+
<DemoLicenceSendToPartyModal v-model:modal="m_demoLicenceSendToParty" />
|
|
5
7
|
<DemoPatientInfoModal v-model:modal="m_demoPatient" :is-modal-open="value" />
|
|
6
8
|
<DemoPatientShareToMobileModal v-model:modal="m_demoPatientShareToMobile" />
|
|
7
9
|
<DemoPatientSendToPartyModal v-model:modal="m_demoPatientSendToParty" />
|
|
@@ -772,6 +774,8 @@ import {
|
|
|
772
774
|
getDemoOption,
|
|
773
775
|
isDemo,
|
|
774
776
|
m_demo,
|
|
777
|
+
m_demoLicenceSendToParty,
|
|
778
|
+
m_demoLicenceShareToMobile,
|
|
775
779
|
m_demoPatient,
|
|
776
780
|
m_demoPatientSendToParty,
|
|
777
781
|
m_demoPatientShareToMobile,
|
|
@@ -810,6 +814,8 @@ import DemoPatientInfoModal from "@/demo/patient/DemoPatientInfoModal.vue";
|
|
|
810
814
|
import DemoLicenceInfoModal from "@/demo/licence/DemoLicenceInfoModal.vue";
|
|
811
815
|
import DemoPatientShareToMobileModal from "@/demo/patient/DemoPatientShareToMobileModal.vue";
|
|
812
816
|
import DemoPatientSendToPartyModal from "@/demo/patient/DemoPatientSendToPartyModal.vue";
|
|
817
|
+
import DemoLicenceShareToMobileModal from "@/demo/licence/DemoLicenceShareToMobileModal.vue";
|
|
818
|
+
import DemoLicenceSendToPartyModal from "@/demo/licence/DemoLicenceSendToPartyModal.vue";
|
|
813
819
|
|
|
814
820
|
export interface Props {
|
|
815
821
|
payload?: LoadViewerPayload;
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed, ref } from "vue";
|
|
3
|
+
import { openUrl } from "@/demo/options";
|
|
4
|
+
|
|
5
|
+
export interface Props {
|
|
6
|
+
modal: boolean;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const emit = defineEmits<{
|
|
10
|
+
"update:modal": [value: boolean];
|
|
11
|
+
}>();
|
|
12
|
+
|
|
13
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
14
|
+
modal: false,
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
const step2 = ref<boolean>(false);
|
|
18
|
+
const user = ref<string>("");
|
|
19
|
+
const users = ref<Array<string>>([]);
|
|
20
|
+
const modalState = computed({
|
|
21
|
+
get() {
|
|
22
|
+
return props.modal;
|
|
23
|
+
},
|
|
24
|
+
set(value) {
|
|
25
|
+
emit("update:modal", value);
|
|
26
|
+
},
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
function add() {
|
|
30
|
+
if (user.value && !users.value.includes(user.value) && isValid()) {
|
|
31
|
+
users.value.push(user.value);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function isValid() {
|
|
36
|
+
return /^(([^<>()[\]\\.,;:\s@']+(\.[^<>()\\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
|
37
|
+
user.value
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<template>
|
|
43
|
+
<v-dialog v-model:model-value="modalState">
|
|
44
|
+
<v-card
|
|
45
|
+
class="pa-1 ma-auto position-relative motif-background card-bg-border"
|
|
46
|
+
theme="dark"
|
|
47
|
+
max-width="680"
|
|
48
|
+
min-width="450"
|
|
49
|
+
>
|
|
50
|
+
<v-card-title class="text-center mb-4 mt-2">
|
|
51
|
+
Download 3Dicom Mobile
|
|
52
|
+
</v-card-title>
|
|
53
|
+
<v-card-text>
|
|
54
|
+
<v-text-field
|
|
55
|
+
class="text-justify"
|
|
56
|
+
id="share-email-field-item"
|
|
57
|
+
ref="shareEmail"
|
|
58
|
+
v-model="user"
|
|
59
|
+
label="Send to Email"
|
|
60
|
+
variant="outlined"
|
|
61
|
+
density="compact"
|
|
62
|
+
:rules="[
|
|
63
|
+
(v) =>
|
|
64
|
+
/^(([^<>()[\]\\.,;:\s@']+(\.[^<>()\\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
|
65
|
+
v
|
|
66
|
+
) || `Email must be valid`,
|
|
67
|
+
]"
|
|
68
|
+
clearable
|
|
69
|
+
@keyup.enter="add"
|
|
70
|
+
>
|
|
71
|
+
<template #append-inner>
|
|
72
|
+
<v-btn
|
|
73
|
+
v-show="isValid()"
|
|
74
|
+
id="check-mark"
|
|
75
|
+
icon
|
|
76
|
+
class="check-background mt-n01 bg-transparent"
|
|
77
|
+
size="sm"
|
|
78
|
+
small
|
|
79
|
+
elevation="0"
|
|
80
|
+
:ripple="false"
|
|
81
|
+
><v-icon color="success">check</v-icon></v-btn
|
|
82
|
+
>
|
|
83
|
+
</template>
|
|
84
|
+
<template #append>
|
|
85
|
+
<v-tooltip top>
|
|
86
|
+
<template #activator="{ props }">
|
|
87
|
+
<v-btn
|
|
88
|
+
v-bind="props"
|
|
89
|
+
icon
|
|
90
|
+
class="mt-n1 bg-transparent"
|
|
91
|
+
elevation="0"
|
|
92
|
+
@click="add"
|
|
93
|
+
><v-icon color="success">add</v-icon></v-btn
|
|
94
|
+
>
|
|
95
|
+
</template>
|
|
96
|
+
Include as Pending below
|
|
97
|
+
</v-tooltip>
|
|
98
|
+
</template>
|
|
99
|
+
</v-text-field>
|
|
100
|
+
</v-card-text>
|
|
101
|
+
<v-card-text v-if="users.length > 0">
|
|
102
|
+
Pending 3rd Parties
|
|
103
|
+
<v-alert
|
|
104
|
+
v-for="userItem in users"
|
|
105
|
+
class="my-1"
|
|
106
|
+
style="font-size: 60%"
|
|
107
|
+
close-label="Close Alert"
|
|
108
|
+
color="orange-accent-4"
|
|
109
|
+
density="compact"
|
|
110
|
+
:title="userItem"
|
|
111
|
+
variant="tonal"
|
|
112
|
+
@click:close="users.splice(users.indexOf(userItem), 1)"
|
|
113
|
+
closable
|
|
114
|
+
>
|
|
115
|
+
New User
|
|
116
|
+
</v-alert>
|
|
117
|
+
</v-card-text>
|
|
118
|
+
<v-card-actions>
|
|
119
|
+
<v-btn color="error" @click="modalState = false">
|
|
120
|
+
Continue with Demo
|
|
121
|
+
</v-btn>
|
|
122
|
+
<v-spacer />
|
|
123
|
+
<v-btn
|
|
124
|
+
variant="flat"
|
|
125
|
+
color="success"
|
|
126
|
+
@click="
|
|
127
|
+
step2 = true;
|
|
128
|
+
modalState = false;
|
|
129
|
+
"
|
|
130
|
+
:disabled="users.length === 0"
|
|
131
|
+
>
|
|
132
|
+
Send to 3rd Parties
|
|
133
|
+
</v-btn>
|
|
134
|
+
</v-card-actions>
|
|
135
|
+
</v-card>
|
|
136
|
+
</v-dialog>
|
|
137
|
+
<v-dialog v-model:model-value="step2">
|
|
138
|
+
<v-card
|
|
139
|
+
class="pa-1 ma-auto position-relative motif-background card-bg-border"
|
|
140
|
+
theme="dark"
|
|
141
|
+
max-width="680"
|
|
142
|
+
>
|
|
143
|
+
<v-card-title class="text-center mb-4 mt-2"> Scan shared </v-card-title>
|
|
144
|
+
<v-card-text class="text-justify">
|
|
145
|
+
Congratulations, you have sent your scan to a 3rd party.
|
|
146
|
+
</v-card-text>
|
|
147
|
+
<v-card-text class="text-justify">
|
|
148
|
+
Note: This is just a demonstration of how you can in the online viewer,
|
|
149
|
+
so we have not sent it to the users specified.
|
|
150
|
+
</v-card-text>
|
|
151
|
+
<v-card-text class="text-justify">
|
|
152
|
+
If you would like to view your own scan and/or send it to another party,
|
|
153
|
+
please select below
|
|
154
|
+
</v-card-text>
|
|
155
|
+
<v-card-actions>
|
|
156
|
+
<v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
|
|
157
|
+
<v-spacer />
|
|
158
|
+
<v-btn
|
|
159
|
+
variant="flat"
|
|
160
|
+
color="success"
|
|
161
|
+
@click="openUrl('https://3dicomviewer.com/pricing')"
|
|
162
|
+
>
|
|
163
|
+
I want to view my own scan
|
|
164
|
+
</v-btn>
|
|
165
|
+
</v-card-actions>
|
|
166
|
+
</v-card>
|
|
167
|
+
</v-dialog>
|
|
168
|
+
</template>
|
|
169
|
+
|
|
170
|
+
<style scoped>
|
|
171
|
+
.v-alert-title {
|
|
172
|
+
font-size: 80%;
|
|
173
|
+
}
|
|
174
|
+
</style>
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed, ref } from "vue";
|
|
3
|
+
import { openUrl } from "@/demo/options";
|
|
4
|
+
|
|
5
|
+
export interface Props {
|
|
6
|
+
modal: boolean;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const emit = defineEmits<{
|
|
10
|
+
"update:modal": [value: boolean];
|
|
11
|
+
}>();
|
|
12
|
+
|
|
13
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
14
|
+
modal: false,
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
const step2 = ref<boolean>(false);
|
|
18
|
+
const modalState = computed({
|
|
19
|
+
get() {
|
|
20
|
+
return props.modal;
|
|
21
|
+
},
|
|
22
|
+
set(value) {
|
|
23
|
+
emit("update:modal", value);
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<template>
|
|
29
|
+
<v-dialog v-model:model-value="modalState">
|
|
30
|
+
<v-card
|
|
31
|
+
class="pa-1 ma-auto position-relative motif-background card-bg-border"
|
|
32
|
+
theme="dark"
|
|
33
|
+
max-width="680"
|
|
34
|
+
>
|
|
35
|
+
<v-card-title class="text-center mb-4 mt-2">
|
|
36
|
+
Download 3Dicom Mobile
|
|
37
|
+
</v-card-title>
|
|
38
|
+
<v-card-text class="text-justify">
|
|
39
|
+
<img
|
|
40
|
+
src="../../assets/images/apple-qr.svg"
|
|
41
|
+
alt="logo-home"
|
|
42
|
+
width="47%"
|
|
43
|
+
class="mr-auto rounded-lg"
|
|
44
|
+
/>
|
|
45
|
+
<img
|
|
46
|
+
src="../../assets/images/android-qr.svg"
|
|
47
|
+
alt="logo-home"
|
|
48
|
+
width="47%"
|
|
49
|
+
class="ml-auto rounded-lg float-right"
|
|
50
|
+
/>
|
|
51
|
+
</v-card-text>
|
|
52
|
+
<v-card-actions>
|
|
53
|
+
<v-btn color="error" @click="modalState = false">
|
|
54
|
+
Continue with Demo
|
|
55
|
+
</v-btn>
|
|
56
|
+
<v-spacer />
|
|
57
|
+
<v-btn
|
|
58
|
+
variant="flat"
|
|
59
|
+
color="success"
|
|
60
|
+
@click="
|
|
61
|
+
step2 = true;
|
|
62
|
+
modalState = false;
|
|
63
|
+
"
|
|
64
|
+
>
|
|
65
|
+
I have 3DICOM mobile installed
|
|
66
|
+
</v-btn>
|
|
67
|
+
</v-card-actions>
|
|
68
|
+
</v-card>
|
|
69
|
+
</v-dialog>
|
|
70
|
+
<v-dialog v-model:model-value="step2">
|
|
71
|
+
<v-card
|
|
72
|
+
class="pa-1 ma-auto position-relative motif-background card-bg-border"
|
|
73
|
+
theme="dark"
|
|
74
|
+
max-width="680"
|
|
75
|
+
>
|
|
76
|
+
<v-card-title class="text-center mb-4 mt-2">
|
|
77
|
+
Load your scan
|
|
78
|
+
</v-card-title>
|
|
79
|
+
<v-card-text class="text-justify">
|
|
80
|
+
Once you have logged in and can see your dashboard, select your scan and
|
|
81
|
+
open it to visualise your X-Ray (XR), Ultrasound (US), Computed
|
|
82
|
+
Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting
|
|
83
|
+
Tomography (PET) scans.
|
|
84
|
+
</v-card-text>
|
|
85
|
+
<v-card-actions>
|
|
86
|
+
<v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
|
|
87
|
+
<v-spacer />
|
|
88
|
+
<v-btn
|
|
89
|
+
variant="flat"
|
|
90
|
+
color="success"
|
|
91
|
+
@click="openUrl('https://3dicomviewer.com/pricing')"
|
|
92
|
+
>
|
|
93
|
+
I want to view my own scan
|
|
94
|
+
</v-btn>
|
|
95
|
+
</v-card-actions>
|
|
96
|
+
</v-card>
|
|
97
|
+
</v-dialog>
|
|
98
|
+
</template>
|
|
99
|
+
|
|
100
|
+
<style scoped></style>
|
package/src/demo/options.ts
CHANGED
|
@@ -11,6 +11,8 @@ export function checkIsDemo(payload: LoadViewerPayload) {
|
|
|
11
11
|
|
|
12
12
|
export const isDemo = ref<boolean>(false);
|
|
13
13
|
export const m_demo = ref<boolean>(false);
|
|
14
|
+
export const m_demoLicenceShareToMobile = ref<boolean>(false);
|
|
15
|
+
export const m_demoLicenceSendToParty = ref<boolean>(false);
|
|
14
16
|
export const m_demoPatient = ref<boolean>(false);
|
|
15
17
|
export const m_demoPatientShareToMobile = ref<boolean>(false);
|
|
16
18
|
export const m_demoPatientSendToParty = ref<boolean>(false);
|
|
@@ -59,12 +61,10 @@ export const demoLicenceOptions: LoadViewerOptions = {
|
|
|
59
61
|
m_demo.value = true;
|
|
60
62
|
},
|
|
61
63
|
OnSendTo3rdParty: () => {
|
|
62
|
-
|
|
63
|
-
// m_demo.value = true;
|
|
64
|
+
m_demoLicenceSendToParty.value = true;
|
|
64
65
|
},
|
|
65
66
|
OnShareToMobile: () => {
|
|
66
|
-
|
|
67
|
-
// m_demo.value = true;
|
|
67
|
+
m_demoLicenceShareToMobile.value = true;
|
|
68
68
|
},
|
|
69
69
|
OnShare: () => {
|
|
70
70
|
//TODO:
|
package/vite.config.mts
CHANGED
|
@@ -19,7 +19,7 @@ export default defineConfig({
|
|
|
19
19
|
// https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
|
|
20
20
|
Vuetify(),
|
|
21
21
|
Components(),
|
|
22
|
-
cssInjectedByJsPlugin(),
|
|
22
|
+
cssInjectedByJsPlugin({styleId: "foo"}),
|
|
23
23
|
ViteFonts({
|
|
24
24
|
google: {
|
|
25
25
|
families: [{
|