perf: 优化editor保存与加载loading

ww
1 parent 59995619
Showing 7 changed files with 289 additions and 35 deletions
editor/index.html
editor/js/Menubar.File.js
editor/js/libs/http/api.js
editor/js/libs/spin/spin.css
editor/js/libs/spin/spin.js
editor/js/libs/spin/useSpin.js
editor/main.js
--- a/editor/index.html
View file @857d5b2
+++ b/editor/index.html
View file @857d5b2
@@ -8,6 +8,7 @@
   <body>
     <link rel="stylesheet" href="css/main.css" />
+    <link rel="stylesheet" href="./js/libs/spin/spin.css">
     <link rel="stylesheet" href="js/libs/codemirror/codemirror.css" />
     <link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css" />
     <link rel="stylesheet" href="js/libs/codemirror/addon/dialog.css" />
--- a/editor/js/Menubar.File.js
View file @857d5b2
+++ b/editor/js/Menubar.File.js
View file @857d5b2
@@ -5,6 +5,7 @@ import html2canvas from 'html2canvas'
 import { fetchRouteParamsLocation } from '@/utils'
 import { uploadFile } from '@/api/external/contentSave/content'
 import { base64toFile } from '../utils/Base64ToFile.js'
+import { useSpin } from '../js/libs/spin/useSpin.js'
 function MenubarFile(editor) {
   const strings = editor.strings
@@ -72,7 +73,7 @@ function MenubarFile(editor) {
   const loader = new THREE.FileLoader()
   for (let i = 0; i < examples.length; i++) {
-    ;(function (i) {
+    ; (function (i) {
       const example = examples[i]
       const option = new UIRow()
@@ -148,31 +149,38 @@ function MenubarFile(editor) {
     .onClick(async function () {
       // 获取缩略图片
       const range = document.querySelector('#viewport').children[3]
-      // 生成图片
-      const canvasImage = await html2canvas(range, {
-        backgroundColor: null,
-        allowTaint: true,
-        useCORS: true,
-        logging: false
-      })
-      // 上传预览图
-      const uploadParams = new FormData()
-      uploadParams.append(
-        'file',
-        base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
-      )
-      const uploadRes = await uploadFile(uploadParams)
-      const file_json = editor.toJSON()
-      const paramsStr = window.location.search
-      const params = new URLSearchParams(paramsStr)
-      const file_uuid = params.get('three_file_uuid')
-      await saveOrUpdateThreeJsModel({
-        id: file_uuid,
-        imageUrl: uploadRes?.fileDownloadUri,
-        data: file_json
-      })
-      const { success } = useMessage()
-      success('保存成功')
+      const { spin, stop } = useSpin()
+      try {
+        spin()
+        // 生成图片
+        const canvasImage = await html2canvas(range, {
+          backgroundColor: null,
+          allowTaint: true,
+          useCORS: true,
+          logging: false
+        })
+        // 上传预览图
+        const uploadParams = new FormData()
+        uploadParams.append(
+          'file',
+          base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
+        )
+        const uploadRes = await uploadFile(uploadParams)
+        const file_json = editor.toJSON()
+        const paramsStr = window.location.search
+        const params = new URLSearchParams(paramsStr)
+        const file_uuid = params.get('three_file_uuid')
+        console.log(file_json)
+        await saveOrUpdateThreeJsModel({
+          id: file_uuid,
+          imageUrl: uploadRes?.fileDownloadUri,
+          data: file_json
+        })
+        const { success } = useMessage()
+        success('保存成功')
+      } finally {
+        stop()
+      }
     })
   options.add(option)
--- a/editor/js/libs/http/api.js
View file @857d5b2
+++ b/editor/js/libs/http/api.js
View file @857d5b2
@@ -8,10 +8,13 @@ const API = {
  * @description: 3D模型 保存 api
  */
 export function saveOrUpdateThreeJsModel(params) {
-  return defHttp.post({
-    url: `${API['URL']}?id=${params['id']}&imageUrl=${params['imageUrl']}`,
-    data: params['data']
-  })
+  return defHttp.post(
+    {
+      url: `${API['URL']}?id=${params['id']}&imageUrl=${params['imageUrl']}`,
+      data: params['data'],
+      timeout: 30 * 1000
+    },
+  )
 }
 /**
--- a/editor/js/libs/spin/spin.css 0 → 100644
View file @857d5b2
+++ b/editor/js/libs/spin/spin.css 0 → 100644
View file @857d5b2
+/**
+ * Minified by jsDelivr using clean-css v5.3.2.
+ * Original file: /npm/spin.js@4.1.2/spin.css
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+@keyframes spinner-line-fade-more {
+
+  0%,
+  100% {
+    opacity: 0
+  }
+
+  1% {
+    opacity: 1
+  }
+}
+
+@keyframes spinner-line-fade-quick {
+
+  0%,
+  100%,
+  39% {
+    opacity: .25
+  }
+
+  40% {
+    opacity: 1
+  }
+}
+
+@keyframes spinner-line-fade-default {
+
+  0%,
+  100% {
+    opacity: .22
+  }
+
+  1% {
+    opacity: 1
+  }
+}
+
+@keyframes spinner-line-shrink {
+
+  0%,
+  100%,
+  25% {
+    transform: scale(.5);
+    opacity: .25
+  }
+
+  26% {
+    transform: scale(1);
+    opacity: 1
+  }
+}
+
+/*# sourceMappingURL=/sm/1d0379dd77ad25552d64b70cd02d2d2833a1804214c1f482eb413fd2b8c115d4.map */
--- a/editor/js/libs/spin/spin.js 0 → 100644
View file @857d5b2
+++ b/editor/js/libs/spin/spin.js 0 → 100644
View file @857d5b2
+/**
+ * Minified by jsDelivr using Terser v5.19.2.
+ * Original file: /npm/spin.js@4.1.2/spin.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+var __assign = this && this.__assign || function () {
+  return __assign = Object.assign || function (t) {
+    for (var e, s = 1, n = arguments.length; s < n; s++)
+      for (var i in e = arguments[s])
+        Object.prototype.hasOwnProperty.call(e, i) && (t[i] = e[i]);
+    return t
+  }
+    ,
+    __assign.apply(this, arguments)
+}
+  , defaults = {
+    lines: 12,
+    length: 7,
+    width: 5,
+    radius: 10,
+    scale: 1,
+    corners: 1,
+    color: "#000",
+    fadeColor: "transparent",
+    animation: "spinner-line-fade-default",
+    rotate: 0,
+    direction: 1,
+    speed: 1,
+    zIndex: 2e9,
+    className: "spinner",
+    top: "50%",
+    left: "50%",
+    shadow: "0 0 1px transparent",
+    position: "absolute"
+  }
+  , Spinner = function () {
+    function t(t) {
+      void 0 === t && (t = {}),
+        this.opts = __assign(__assign({}, defaults), t)
+    }
+    return t.prototype.spin = function (t) {
+      return this.stop(),
+        this.el = document.createElement("div"),
+        this.el.className = this.opts.className,
+        this.el.setAttribute("role", "progressbar"),
+        this.el.style.position = this.opts.position,
+        this.el.style.width = "0",
+        this.el.style.zIndex = this.opts.zIndex.toString(),
+        this.el.style.left = this.opts.left,
+        this.el.style.top = this.opts.top,
+        this.el.style.transform = "scale(".concat(this.opts.scale, ")"),
+        t && t.insertBefore(this.el, t.firstChild || null),
+        drawLines(this.el, this.opts),
+        this
+    }
+      ,
+      t.prototype.stop = function () {
+        return this.el && (this.el.parentNode && this.el.parentNode.removeChild(this.el),
+          this.el = void 0),
+          this
+      }
+      ,
+      t
+  }();
+export { Spinner };
+function getColor(t, e) {
+  return "string" == typeof t ? t : t[e % t.length]
+}
+function drawLines(t, e) {
+  var s = Math.round(e.corners * e.width * 500) / 1e3 + "px"
+    , n = "none";
+  !0 === e.shadow ? n = "0 2px 4px #000" : "string" == typeof e.shadow && (n = e.shadow);
+  for (var i = parseBoxShadow(n), o = 0; o < e.lines; o++) {
+    var r = ~~(360 / e.lines * o + e.rotate)
+      , a = document.createElement("div");
+    a.style.position = "absolute",
+      a.style.top = "".concat(-e.width / 2, "px"),
+      a.style.width = e.length + e.width + "px",
+      a.style.height = e.width + "px",
+      a.style.background = getColor(e.fadeColor, o),
+      a.style.borderRadius = s,
+      a.style.transformOrigin = "left",
+      a.style.transform = "rotate(".concat(r, "deg) translateX(").concat(e.radius, "px)");
+    var l = o * e.direction / e.lines / e.speed;
+    l -= 1 / e.speed;
+    var h = document.createElement("div");
+    h.style.width = "100%",
+      h.style.height = "100%",
+      h.style.background = getColor(e.color, o),
+      h.style.borderRadius = s,
+      h.style.boxShadow = normalizeShadow(i, r),
+      h.style.animation = "".concat(1 / e.speed, "s linear ").concat(l, "s infinite ").concat(e.animation),
+      a.appendChild(h),
+      t.appendChild(a)
+  }
+}
+function parseBoxShadow(t) {
+  for (var e = /^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/, s = [], n = 0, i = t.split(","); n < i.length; n++) {
+    var o = i[n].match(e);
+    if (null !== o) {
+      var r = +o[2]
+        , a = +o[5]
+        , l = o[4]
+        , h = o[7];
+      0 !== r || l || (l = h),
+        0 !== a || h || (h = l),
+        l === h && s.push({
+          prefix: o[1] || "",
+          x: r,
+          y: a,
+          xUnits: l,
+          yUnits: h,
+          end: o[8]
+        })
+    }
+  }
+  return s
+}
+function normalizeShadow(t, e) {
+  for (var s = [], n = 0, i = t; n < i.length; n++) {
+    var o = i[n]
+      , r = convertOffset(o.x, o.y, e);
+    s.push(o.prefix + r[0] + o.xUnits + " " + r[1] + o.yUnits + o.end)
+  }
+  return s.join(", ")
+}
+function convertOffset(t, e, s) {
+  var n = s * Math.PI / 180
+    , i = Math.sin(n)
+    , o = Math.cos(n);
+  return [Math.round(1e3 * (t * o + e * i)) / 1e3, Math.round(1e3 * (-t * i + e * o)) / 1e3]
+}
+//# sourceMappingURL=/sm/6ba007f8215048c7e8c098294081de9cb1287363cf4b90ab212f48050f156783.map
--- a/editor/js/libs/spin/useSpin.js 0 → 100644
View file @857d5b2
+++ b/editor/js/libs/spin/useSpin.js 0 → 100644
View file @857d5b2
+import { Spinner } from './spin'
+
+export function useSpin(el = 'viewport') {
+  const target = el instanceof Element ? el : document.getElementById(el)
+  const spinner = new Spinner({ color: '#fff', lines: 12 });
+  const mask = createMask()
+
+  function createMask() {
+    const mask = document.createElement('div')
+    mask.style.position = 'absolute'
+    mask.style.inset = 0
+    mask.style.display = 'flex'
+    mask.style.alignItems = 'center'
+    mask.style.justifyContent = 'center'
+    mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
+    mask.style.cursor = 'pointer'
+    mask.style.pointerEvents = 'none'
+
+    return mask
+  }
+
+  function spin() {
+    if (!target) {
+      throw new Error('Spin not found target')
+    }
+
+    target.appendChild(mask)
+    spinner.spin(target)
+  }
+
+  function stop() {
+    spinner.stop()
+    target.removeChild(mask)
+  }
+
+  return {
+    spin,
+    stop
+  }
+}
--- a/editor/main.js
View file @857d5b2
+++ b/editor/main.js
View file @857d5b2
@@ -9,6 +9,7 @@ import { Sidebar } from './js/Sidebar.js'
 import { Menubar } from './js/Menubar.js'
 import { Resizer } from './js/Resizer.js'
 import { getThreeJsModel } from './js/libs/http/api.js'
+import { useSpin } from './js/libs/spin/useSpin.js'
 window.URL = window.URL || window.webkitURL
 window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder
@@ -53,10 +54,18 @@ editor.storage.init(async function () {
   const file_uuid = params.get('three_file_uuid')
   const actionType = params.get('action_type')
   if (actionType === 'create') return
-  const fileData = await getThreeJsModel(file_uuid)
-  if (!fileData) return
-  if (!fileData['content']) return
-  await editor.fromJSON(fileData['content'])
+
+  const { spin, stop } = useSpin()
+  try {
+    spin()
+    const fileData = await getThreeJsModel(file_uuid)
+    if (!fileData) return
+    if (!fileData['content']) return
+    await editor.fromJSON(fileData['content'])
+  } finally {
+    stop()
+  }
+
   const selected = editor.config.getKey('selected')
   if (selected !== undefined) {
     editor.selectByUuid(selected)
@@ -214,5 +223,5 @@ if (hash.slice(1, 6) === 'file=') {
 if ('serviceWorker' in navigator) {
   try {
     navigator.serviceWorker.register('sw.js')
-  } catch (error) {}
+  } catch (error) { }
 }