feat(maotu): 添加保存loading和拖拽移动画布

src/components/mt-dzr/index.vue

@@ -142,6 +142,9 @@ const mt_dzr_vmodel = computed({
 })
 const onMouseDown = (de: MouseTouchEvent) => {
   MtDzrEmits('mousedown', de)
+  if (de.defaultPrevented) {
+    return
+  }
   if (MtDzrProps.lock || MtDzrProps.disabled) {
     return
   }

src/components/mt-edit/components/layout/header-panel/index.vue

@@ -177,7 +177,13 @@
           </el-icon>
         </el-button>
         <el-divider direction="vertical" />
-        <el-button text circle size="small" @click="emits('onSaveClick')">
+        <el-button
+          text
+          circle
+          size="small"
+          :loading="headerPanelProps.saveLoading"
+          :disabled="headerPanelProps.saveLoading"
+          @click="emits('onSaveClick')">
           <el-icon title="保存" :size="20">
             <svg-analysis name="save" />
           </el-icon>
@@ -272,11 +278,13 @@ type HeaderPanelProps = {
   redoEnabled: boolean
   realTimeData: IRealTimeData
   useThumbnail?: boolean
+  saveLoading?: boolean
 }
 const headerPanelProps = withDefaults(defineProps<HeaderPanelProps>(), {
   leftAside: true,
   rightAside: true,
   useThumbnail: false,
+  saveLoading: false,
   selectedItemsId: () => []
 })
 const emits = defineEmits([

src/components/mt-edit/components/layout/main-panel/index.vue

@@ -3,7 +3,9 @@
     <div
       id="mtCanvasArea"
       ref="canvasAreaRef"
-      :class="`canvasArea  ${globalStore.intention == 'runDragCanvas' ? 'cursor-grab' : ''}`"
+      :class="`canvasArea  ${
+        ['beginDragCanvas', 'runDragCanvas'].includes(globalStore.intention) ? 'cursor-grab' : ''
+      }`"
       @drop="onDrop"
       @dragover="onDragOver"
       @touchstart="onDrop($event, true)"
@@ -121,6 +123,7 @@ const canvasAreaRef = ref()
 const selectedAreaRef = ref<InstanceType<typeof SelectedArea>>()
 const dragCanvasRef = ref<InstanceType<typeof DragCanvas>>()
 const dragLineRenderRef = ref<InstanceType<typeof DrawLineRender>>()
+const shortcut_drag_select_item_id = ref('')
 // 是否需要重新计算画布缩放中心点
 const is_need_recal_center = ref(true)
 let is_listen_keydown = false // 是否已经监听了键盘事件
@@ -275,6 +278,11 @@ const onDragOver = (e: DragEvent) => {
 }
 const onRenderCoreMouseDown = (item: IDoneJson, e: MouseEvent) => {
   beginListenerKeyDown()
+  if (isSystemShortcutKey(e)) {
+    shortcut_drag_select_item_id.value = item.lock ? '' : item.id
+    beginDragCanvas(e)
+    return
+  }
   if (globalStore.lock) {
     return
   }
@@ -317,11 +325,15 @@ const onRenderCoreMouseDown = (item: IDoneJson, e: MouseEvent) => {
 }
 const onMouseDown = (e: MouseEvent) => {
   beginListenerKeyDown()
+  if (isSystemShortcutKey(e)) {
+    shortcut_drag_select_item_id.value = ''
+    beginDragCanvas(e)
+    return
+  }
   globalStore.cancelAllSelect()
   // 锁定状态或者右键点击进行画布拖动
   if (globalStore.lock || e.button == 2) {
-    globalStore.setIntention('beginDragCanvas')
-    dragCanvasRef.value?.onMouseDown(e)
+    beginDragCanvas(e)
     return
   }
   if (mainPanelProps.lineAppendEnable) {
@@ -733,6 +745,12 @@ const dragCanvasMouseDown = () => {
   init_drag_offset.x = globalStore.canvasCfg.drag_offset.x
   init_drag_offset.y = globalStore.canvasCfg.drag_offset.y
 }
+const beginDragCanvas = (e: MouseEvent | TouchEvent) => {
+  e.preventDefault()
+  e.stopPropagation()
+  globalStore.setIntention('beginDragCanvas')
+  dragCanvasRef.value?.onMouseDown(e)
+}
 /**
  * 画布拖动移动事件
  * @param move_x
@@ -742,6 +760,7 @@ const dragCanvasMouseMove = (move_x: number, move_y: number) => {
   if (move_x === 0 && move_y === 0) {
     return
   }
+  shortcut_drag_select_item_id.value = ''
   globalStore.setIntention('runDragCanvas')
   // 设置画布偏移
   globalStore.canvasCfg.drag_offset = {
@@ -756,6 +775,14 @@ const dragCanvasMouseUp = () => {
   if (globalStore.intention == 'runDragCanvas') {
     globalStore.setIntention('endDragCanvas')
   } else {
+    if (shortcut_drag_select_item_id.value) {
+      const find_item = globalStore.done_json.find((f) => f.id == shortcut_drag_select_item_id.value)
+      if (find_item) {
+        find_item.active = !find_item.active
+        globalStore.refreshSelectedItemsId()
+      }
+      shortcut_drag_select_item_id.value = ''
+    }
     globalStore.setIntention('none')
   }
 }

src/components/mt-edit/index.vue

@@ -18,6 +18,7 @@
           :redo-enabled="cacheStore.historyIndex < cacheStore.history.length - 1"
           :real-time-data="globalStore.real_time_data"
           :use-thumbnail="mtEidtProps.useThumbnail"
+          :save-loading="mtEidtProps.saveLoading"
           @on-group-click="mainPanelRef?.createGroupItem"
           @on-ungroup-click="mainPanelRef?.onUngroup"
           @on-delete-click="onDeleteClick"
@@ -120,9 +121,11 @@ import { genExportJson, useExportJsonToDoneJson } from './composables'
 import type { IExportJson } from './components/types'
 type MtEditProps = {
   useThumbnail?: boolean
+  saveLoading?: boolean
 }
 const mtEidtProps = withDefaults(defineProps<MtEditProps>(), {
-  useThumbnail: false
+  useThumbnail: false,
+  saveLoading: false
 })
 const emits = defineEmits(['onPreviewClick', 'onReturnClick', 'onSaveClick', 'onThumbnailClick'])
 const slots = useSlots()

src/views/maotu/edit.vue

@@ -157,10 +157,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-loading="saveLoading" class="w-1/1 h-100vh">
+  <div
+    v-loading="saveLoading"
+    element-loading-text="正在生成缩略图并保存，请稍候"
+    class="w-1/1 h-100vh">
     <mt-edit
       ref="MtEditRef"
       :use-thumbnail="true"
+      :save-loading="saveLoading"
       @on-preview-click="onPreviewClick"
       @on-return-click="onReturnClick"
       @on-save-click="onSaveClick"