From 2d245dd88b50a2fad5da88398e2d137a10e5e422 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Mon, 14 Dec 2020 22:29:09 +0800 Subject: [PATCH] update --- src/hooks/useDropImage.ts | 33 +++++++ src/views/Editor/Canvas/index.vue | 18 ++-- src/views/Editor/Canvas/utils/alignLines.ts | 22 +++++ src/views/Editor/Canvas/utils/elementRange.ts | 85 ++++++++++++++++++ .../Editor/Canvas/utils/elementRotate.ts | 80 +++++++++++++++++ src/views/Editor/index.vue | 89 +++++++++++++++---- 6 files changed, 301 insertions(+), 26 deletions(-) create mode 100644 src/hooks/useDropImage.ts create mode 100644 src/views/Editor/Canvas/utils/alignLines.ts create mode 100644 src/views/Editor/Canvas/utils/elementRange.ts create mode 100644 src/views/Editor/Canvas/utils/elementRotate.ts diff --git a/src/hooks/useDropImage.ts b/src/hooks/useDropImage.ts new file mode 100644 index 0000000..a838f48 --- /dev/null +++ b/src/hooks/useDropImage.ts @@ -0,0 +1,33 @@ +import { ref, onMounted, onUnmounted, Ref } from 'vue' + +export default (elementRef: Ref) => { + const imageFile = ref(null) + + const handleDrop = (e: DragEvent) => { + if(!e.dataTransfer) return + const file = e.dataTransfer.items[0] + if( file.kind === 'file' && file.type.indexOf('image') !== -1 ) { + const _imageFile = file.getAsFile() + if(_imageFile) imageFile.value = _imageFile + } + } + + onMounted(() => { + elementRef.value && elementRef.value.addEventListener('drop', handleDrop) + + document.ondragleave = e => e.preventDefault() + document.ondrop = e => e.preventDefault() + document.ondragenter = e => e.preventDefault() + document.ondragover = e => e.preventDefault() + }) + onUnmounted(() => { + elementRef.value && elementRef.value.removeEventListener('drop', handleDrop) + + document.ondragleave = null + document.ondrop = null + document.ondragenter = null + document.ondragover = null + }) + + return imageFile +} \ No newline at end of file diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue index 0fcc796..bdb6afd 100644 --- a/src/views/Editor/Canvas/index.vue +++ b/src/views/Editor/Canvas/index.vue @@ -40,13 +40,15 @@