完善拖拽事件相关

src/hooks/useCreateElement.ts

@@ -37,7 +37,7 @@ export default () => {
 
   const createImageElement = (src: string) => {
     getImageSize(src).then(({ width, height }) => {
-      const scale = width / height
+      const scale = height / width
   
       if(scale < VIEWPORT_ASPECT_RATIO && width > VIEWPORT_SIZE) {
         width = VIEWPORT_SIZE
@@ -117,7 +117,7 @@ export default () => {
     })
   }
   
-  const createTextElement = (position: CommonElementPosition) => {
+  const createTextElement = (position: CommonElementPosition, content = '请输入内容') => {
     const { left, top, width, height } = position
     createElement({
       type: 'text',
@@ -126,7 +126,7 @@ export default () => {
       top, 
       width, 
       height,
-      content: '请输入内容',
+      content,
     })
   }
   

src/hooks/usePasteTextClipboardData.ts

@@ -4,6 +4,7 @@ import { decrypt } from '@/utils/crypto'
 import { PPTElement, Slide } from '@/types/slides'
 import { createRandomCode } from '@/utils/common'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+import useCreateElement from '@/hooks/useCreateElement'
 
 interface PasteTextClipboardDataOptions {
   onlySlide?: boolean;
@@ -15,6 +16,7 @@ export default () => {
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
+  const { createTextElement } = useCreateElement()
 
   const pasteElement = (elements: PPTElement[]) => {
     const groupIdMap = {}
@@ -51,7 +53,12 @@ export default () => {
   }
 
   const pasteText = (text: string) => {
-    console.log(text)
+    createTextElement({
+      left: 0,
+      top: 0,
+      width: 600,
+      height: 50,
+    }, text)
   }
 
   const pasteTextClipboardData = (text: string, options?: PasteTextClipboardDataOptions) => {

src/views/Editor/Canvas/hooks/useDropImageOrText.ts

@@ -7,7 +7,7 @@ export default (elementRef: Ref<HTMLElement | undefined>) => {
   const store = useStore()
   const disableHotkeys = computed(() => store.state.disableHotkeys)
 
-  const { createImageElement } = useCreateElement()
+  const { createImageElement, createTextElement } = useCreateElement()
 
   const handleDrop = (e: DragEvent) => {
     if(!e.dataTransfer) return
@@ -22,7 +22,12 @@ export default (elementRef: Ref<HTMLElement | undefined>) => {
     else if(dataTransferItem.kind === 'string' && dataTransferItem.type === 'text/plain') {
       dataTransferItem.getAsString(text => {
         if(disableHotkeys.value) return
-        console.log(text)
+        createTextElement({
+          left: 0,
+          top: 0,
+          width: 600,
+          height: 50,
+        }, text)
       })
     }
   }

src/views/Editor/Canvas/index.vue

@@ -139,12 +139,12 @@ export default defineComponent({
     }
     watchEffect(setLocalElementList)
 
-    useDropImageOrText(viewportRef)
-
     const canvasRef = ref<HTMLElement>()
     const canvasScale = computed(() => store.state.canvasScale)
     const { viewportStyles } = useViewportSize(canvasRef)
 
+    useDropImageOrText(canvasRef)
+
     const { mouseSelectionState, updateMouseSelection } = useMouseSelection(elementList, viewportRef)
 
     const { dragElement } = useDragElement(elementList, activeGroupElementId, alignmentLines)

src/views/components/element/TableElement/index.vue

@@ -13,16 +13,6 @@
       class="element-content" 
       v-contextmenu="contextmenus"
     >
-      <div 
-        class="table-mask" 
-        :class="{ 'lock': elementInfo.lock }"
-        v-if="!editable || elementInfo.lock"
-        @dblclick="startEdit()"
-        @mousedown="$event => handleSelectElement($event)"
-      >
-        <div class="mask-tip" :style="{ transform: `scale(${ 1 / canvasScale })` }">双击编辑</div>
-      </div>
-
       <EditableTable 
         @mousedown.stop
         :data="elementInfo.data"
@@ -35,6 +25,15 @@
         @changeColWidths="widths => updateColWidths(widths)"
         @changeSelectedCells="cells => updateSelectedCells(cells)"
       />
+      <div 
+        class="table-mask" 
+        :class="{ 'lock': elementInfo.lock }"
+        v-if="!editable || elementInfo.lock"
+        @dblclick="startEdit()"
+        @mousedown="$event => handleSelectElement($event)"
+      >
+        <div class="mask-tip" :style="{ transform: `scale(${ 1 / canvasScale })` }">双击编辑</div>
+      </div>
     </div>
   </div>
 </template>
@@ -201,7 +200,6 @@ export default defineComponent({
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 10;
   opacity: 0;
   transition: opacity .2s;