diff options
| -rw-r--r-- | assets/sass/_models.sass | 4 | ||||
| -rw-r--r-- | components/FilePreview.vue | 12 | ||||
| -rw-r--r-- | components/ModelForm.vue | 2 | ||||
| -rw-r--r-- | pages/models/_id/index.vue | 55 |
4 files changed, 12 insertions, 61 deletions
diff --git a/assets/sass/_models.sass b/assets/sass/_models.sass index e54e6ce..1d7688b 100644 --- a/assets/sass/_models.sass +++ b/assets/sass/_models.sass @@ -13,7 +13,3 @@ h3 &+ svg float: right - -.file-preview - img - margin: 0 auto diff --git a/components/FilePreview.vue b/components/FilePreview.vue index a738a93..5c0f3db 100644 --- a/components/FilePreview.vue +++ b/components/FilePreview.vue @@ -1,6 +1,6 @@ <template lang="pug"> - .file-preview - img( + .file-preview.h-full + img.h-full.block.mx-auto( v-if="isImage(path)" :src="baseAPI + '' + path" ) @@ -8,12 +8,14 @@ v-else-if="isStl(path)" :rotate="rotate" :src="baseAPI + '' + path" - :backgroundColor="'#D1D5DB'" + :backgroundColor="bg ? bg : '#D1D5DB'" + :controlsOptions="{'enablePan': controls ? true : false, 'enableZoom': controls ? true : false, 'enableRotate': controls ? true : false}" ) model-obj( v-else-if="isObj(path)" :src="baseAPI + '' + path" - :backgroundColor="'#D1D5DB'" + :backgroundColor="bg ? bg : '#D1D5DB'" + :controlsOptions="{'enablePan': controls ? true : false, 'enableZoom': controls ? true : false, 'enableRotate': controls ? true : false}" ) </template> @@ -22,7 +24,7 @@ import { ModelStl, ModelObj } from "vue-3d-model"; export default { name: "FilePreview", - props: ["path"], + props: ["path", "bg", "controls"], data() { return { baseAPI: "", diff --git a/components/ModelForm.vue b/components/ModelForm.vue index ea1d3c3..442c0ba 100644 --- a/components/ModelForm.vue +++ b/components/ModelForm.vue @@ -5,7 +5,7 @@ .fixed.inset-0.z-10.overflow-y-auto .flex.min-h-full.items-center.justify-center.p-4.text-center .relative.transform.overflow-hidden.rounded-lg.bg-white.shadow-xl.transition-all(class="w-10/12 sm:w-8/12") - file-preview(:path="openPreview") + file-preview(:path="openPreview" controls="1") .bg-gray-50.px-4.py-3(class="sm:flex sm:flex-row-reverse sm:px-6") button.mt-3.inline-flex.w-full.justify-center.rounded-md.border.border-gray-300.bg-white.px-4.py-2.text-base.font-medium.text-gray-700.shadow-sm( type="button" diff --git a/pages/models/_id/index.vue b/pages/models/_id/index.vue index 6c5bbd4..238aea7 100644 --- a/pages/models/_id/index.vue +++ b/pages/models/_id/index.vue @@ -70,21 +70,7 @@ .block.gap-4.h-full(class="md:flex") .w-full(class="md:w-4/5") .image.bg-gray-900.border-2.rounded-xl.w-full.h-full.overflow-hidden(v-if="model.uploads && model.uploads[selectedUpload]") - img.h-full.block.mx-auto( - v-if="isImage(model.uploads[selectedUpload].filepath)" - :src="baseAPI + '' + model.uploads[selectedUpload].filepath" - ) - model-stl( - v-else-if="isStl(model.uploads[selectedUpload].filepath)" - :rotate="rotate" - :src="baseAPI + '' + model.uploads[selectedUpload].filepath" - :backgroundColor="'#111827'" - ) - model-obj( - v-else-if="isObj(model.uploads[selectedUpload].filepath)" - :src="baseAPI + '' + model.uploads[selectedUpload].filepath" - :backgroundColor="'#111827'" - ) + file-preview(:path="model.uploads[selectedUpload].filepath" bg="#111827" controls="1") .w-full.mt-8.h-auto(class="md:w-1/5 md:mt-0" v-if="model") .grid.grid-cols-3.gap-4.h-full.overflow-y-auto.grid-mini(class="md:grid-cols-2") .border-2.border-gray-300.bg-gray-300.w-20.h-20.rounded-xl.grid.items-center.justify-items-center.overflow-hidden.cursor-pointer( @@ -93,22 +79,7 @@ :class="{'md:w-24 md:h-24': true, 'border-green-700': selectedUpload == i}" @click="selectedUpload = i" ) - img( - v-if="isImage(upload.filepath)" - :src="baseAPI + '' + upload.filepath" - ) - model-stl( - v-else-if="isStl(upload.filepath)" - :rotate="rotate" - :src="baseAPI + '' + upload.filepath" - :backgroundColor="'#D1D5DB'" - :controlsOptions="{'enablePan': false, 'enableZoom': false, 'enableRotate': false}" - ) - model-obj( - v-else-if="isObj(upload.filepath)" - :src="baseAPI + '' + upload.filepath" - :backgroundColor="'#D1D5DB'" - ) + file-preview(:path="upload.filepath") section.mt-5 .grid.grid-cols-2.gap-5.mb-5(class="md:grid-cols-6") @@ -170,7 +141,7 @@ </template> <script> -import { ModelStl, ModelObj } from "vue-3d-model"; +import FilePreview from "@/components/FilePreview.vue"; import UserAvatar from "@/components/UserAvatar.vue"; import { mapGetters } from "vuex"; @@ -199,9 +170,8 @@ export default { }; }, components: { - ModelStl, - ModelObj, "user-avatar": UserAvatar, + "file-preview": FilePreview, }, computed: { ...mapGetters(["isLoading"]), @@ -223,23 +193,6 @@ export default { }); }, methods: { - checkExt(path, ext) { - return path.indexOf("." + ext) > 0; - }, - isImage(path) { - return ( - this.checkExt(path, "png") || - this.checkExt(path, "jpg") || - this.checkExt(path, "jpeg") || - this.checkExt(path, "webp") - ); - }, - isStl(path) { - return this.checkExt(path, "stl") || this.checkExt(path, "sla"); - }, - isObj(path) { - return this.checkExt(path, "obj") || this.checkExt(path, "octet-stream"); - }, getFileName(path) { return path.split("/").at(-1); }, |