Commit 4af2927fe432382399e8e772feb7f71bb6c5b6c2

Authored by ww
1 parent 43809eef

fix: 优化3d模型保存逻辑

@@ -11,6 +11,7 @@ import camera from '../examples/camera.app.json?url' @@ -11,6 +11,7 @@ import camera from '../examples/camera.app.json?url'
11 import particles from '../examples/particles.app.json?url' 11 import particles from '../examples/particles.app.json?url'
12 import pong from '../examples/pong.app.json?url' 12 import pong from '../examples/pong.app.json?url'
13 import shaders from '../examples/shaders.app.json?url' 13 import shaders from '../examples/shaders.app.json?url'
  14 +import { useSave } from './libs/hook/useSave.js'
14 15
15 function MenubarFile(editor) { 16 function MenubarFile(editor) {
16 const strings = editor.strings 17 const strings = editor.strings
@@ -148,45 +149,12 @@ function MenubarFile(editor) { @@ -148,45 +149,12 @@ function MenubarFile(editor) {
148 * THINGS_KIT 修改 149 * THINGS_KIT 修改
149 */ 150 */
150 151
  152 + const { save } = useSave(editor)
151 option = new UIRow() 153 option = new UIRow()
152 .addClass('option') 154 .addClass('option')
153 .setTextContent(strings.getKey('menubar/file/save')) 155 .setTextContent(strings.getKey('menubar/file/save'))
154 .onClick(async function () { 156 .onClick(async function () {
155 - // 获取缩略图片  
156 - const range = document.querySelector('#viewport').children[3]  
157 - const { spin, stop } = useSpin()  
158 - const { success, error } = useMessage()  
159 - try {  
160 - spin()  
161 - // 生成图片  
162 - const canvasImage = await html2canvas(range, {  
163 - backgroundColor: null,  
164 - allowTaint: true,  
165 - useCORS: true,  
166 - logging: false  
167 - })  
168 - // 上传预览图  
169 - const uploadParams = new FormData()  
170 - uploadParams.append(  
171 - 'file',  
172 - base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)  
173 - )  
174 - const uploadRes = await uploadFile(uploadParams)  
175 - const file_json = editor.toJSON()  
176 - const paramsStr = window.location.search  
177 - const params = new URLSearchParams(paramsStr)  
178 - const file_uuid = params.get('three_file_uuid')  
179 - await saveOrUpdateThreeJsModel({  
180 - id: file_uuid,  
181 - imageUrl: uploadRes?.fileDownloadUri,  
182 - data: file_json  
183 - })  
184 - success('保存成功')  
185 - } catch (e) {  
186 - error(e?.message || e?.msg || '网络错误')  
187 - } finally {  
188 - stop()  
189 - } 157 + save()
190 }) 158 })
191 options.add(option) 159 options.add(option)
192 160
1 import { UIPanel, UIButton } from './libs/ui.js'; 1 import { UIPanel, UIButton } from './libs/ui.js';
2 -import html2canvas from 'html2canvas'  
3 -import useMessage from './MessageDialog.js'  
4 -import { saveOrUpdateThreeJsModel } from './libs/http/api.js'  
5 -import { fetchRouteParamsLocation } from '@/utils'  
6 -import { uploadFile } from '@/api/external/contentSave/content'  
7 -import { base64toFile } from '../utils/Base64ToFile.js'  
8 -import { useSpin } from '../js/libs/spin/useSpin.js' 2 +import { useSave } from './libs/hook/useSave.js';
9 3
10 function MenubarSave(editor) { 4 function MenubarSave(editor) {
11 const strings = editor.strings 5 const strings = editor.strings
@@ -18,44 +12,9 @@ function MenubarSave(editor) { @@ -18,44 +12,9 @@ function MenubarSave(editor) {
18 const saveButton = new UIButton(strings.getKey('menubar/file/save')) 12 const saveButton = new UIButton(strings.getKey('menubar/file/save'))
19 container.add(saveButton) 13 container.add(saveButton)
20 14
  15 + const { save } = useSave(editor)
21 saveButton.onClick(async function () { 16 saveButton.onClick(async function () {
22 -  
23 - // 获取缩略图片  
24 - const range = document.querySelector('#viewport').children[3]  
25 - const { spin, stop } = useSpin()  
26 - const { success, error } = useMessage()  
27 - try {  
28 - spin()  
29 - // 生成图片  
30 - const canvasImage = await html2canvas(range, {  
31 - backgroundColor: null,  
32 - allowTaint: true,  
33 - useCORS: true,  
34 - logging: false  
35 - })  
36 - // 上传预览图  
37 - const uploadParams = new FormData()  
38 - uploadParams.append(  
39 - 'file',  
40 - base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)  
41 - )  
42 - const uploadRes = await uploadFile(uploadParams)  
43 - const file_json = editor.toJSON()  
44 - const paramsStr = window.location.search  
45 - const params = new URLSearchParams(paramsStr)  
46 - const file_uuid = params.get('three_file_uuid')  
47 - await saveOrUpdateThreeJsModel({  
48 - id: file_uuid,  
49 - imageUrl: uploadRes?.fileDownloadUri,  
50 - data: file_json  
51 - })  
52 - success('保存成功')  
53 - } catch (e) {  
54 - error(e?.message || e?.msg || '网络错误')  
55 - } finally {  
56 - stop()  
57 - }  
58 - 17 + save()
59 }) 18 })
60 19
61 return container; 20 return container;
  1 +import html2canvas from 'html2canvas'
  2 +import useMessage from '../../MessageDialog.js'
  3 +import { saveOrUpdateThreeJsModel } from '../http/api.js'
  4 +import { fetchRouteParamsLocation } from '@/utils'
  5 +import { uploadFile } from '@/api/external/contentSave/content'
  6 +import { base64toFile } from '../../../utils/Base64ToFile.js'
  7 +import { useSpin } from '../spin/useSpin'
  8 +
  9 +export function useSave(editor) {
  10 +
  11 + async function save() {
  12 + // 获取缩略图片
  13 + const range = document.querySelector('#viewport').children[3]
  14 + const { spin, stop } = useSpin()
  15 + const { success, error } = useMessage()
  16 + try {
  17 + spin()
  18 + // 生成图片
  19 + const canvasImage = await html2canvas(range, {
  20 + backgroundColor: null,
  21 + allowTaint: true,
  22 + useCORS: true,
  23 + logging: false
  24 + })
  25 + // 上传预览图
  26 + const uploadParams = new FormData()
  27 + uploadParams.append(
  28 + 'file',
  29 + base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
  30 + )
  31 + const uploadRes = await uploadFile(uploadParams)
  32 + const file_json = editor.toJSON()
  33 + const paramsStr = window.location.search
  34 + const params = new URLSearchParams(paramsStr)
  35 + const file_uuid = params.get('three_file_uuid')
  36 + await saveOrUpdateThreeJsModel({
  37 + id: file_uuid,
  38 + imageUrl: uploadRes?.fileStaticUri,
  39 + data: file_json
  40 + })
  41 + success('保存成功')
  42 + } catch (e) {
  43 + error(e?.message || e?.msg || '网络错误')
  44 + } finally {
  45 + stop()
  46 + }
  47 + }
  48 +
  49 + return {
  50 + save
  51 + }
  52 +}