update

src/assets/animate/bounce.scss

@@ -1,139 +0,0 @@
-@keyframes bounceIn {
-  from,
-  20%,
-  40%,
-  60%,
-  80%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-  20% {
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-  40% {
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-  60% {
-    opacity: 1;
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-  80% {
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes bounceInDown {
-  from,
-  60%,
-  75%,
-  90%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    transform: translate3d(0, -3000px, 0);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(0, 25px, 0);
-  }
-  75% {
-    transform: translate3d(0, -10px, 0);
-  }
-  90% {
-    transform: translate3d(0, 5px, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes bounceInLeft {
-  from,
-  60%,
-  75%,
-  90%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    transform: translate3d(-3000px, 0, 0);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(25px, 0, 0);
-  }
-  75% {
-    transform: translate3d(-10px, 0, 0);
-  }
-  90% {
-    transform: translate3d(5px, 0, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes bounceInRight {
-  from,
-  60%,
-  75%,
-  90%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  from {
-    opacity: 0;
-    transform: translate3d(3000px, 0, 0);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(-25px, 0, 0);
-  }
-  75% {
-    transform: translate3d(10px, 0, 0);
-  }
-  90% {
-    transform: translate3d(-5px, 0, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes bounceInUp {
-  from,
-  60%,
-  75%,
-  90%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  from {
-    opacity: 0;
-    transform: translate3d(0, 3000px, 0);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(0, -20px, 0);
-  }
-  75% {
-    transform: translate3d(0, 10px, 0);
-  }
-  90% {
-    transform: translate3d(0, -5px, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}

src/assets/animate/fade.scss

@@ -1,52 +0,0 @@
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes fadeInRight {
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}

src/assets/animate/flip.scss

@@ -1,43 +0,0 @@
-@keyframes flipInX {
-  from {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-  40% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    animation-timing-function: ease-in;
-  }
-  60% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-  80% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-  to {
-    transform: perspective(400px);
-  }
-}
-
-@keyframes flipInY {
-  from {
-    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-  40% {
-    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-    animation-timing-function: ease-in;
-  }
-  60% {
-    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-    opacity: 1;
-  }
-  80% {
-    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-  }
-  to {
-    transform: perspective(400px);
-  }
-}

src/assets/animate/main.scss

@@ -1,103 +0,0 @@
-@import './bounce.scss';
-@import './fade.scss';
-@import './flip.scss';
-@import './rotate.scss';
-@import './slide.scss';
-@import './zoom.scss';
-
-.animate {
-  animation-duration: 0ms;
-
-  &.duration-500 {
-    animation-duration: 500ms;
-  }
-  &.duration-1000 {
-    animation-duration: 1000ms;
-  }
-  &.duration-1500 {
-    animation-duration: 1500ms;
-  }
-  &.duration-2000 {
-    animation-duration: 2000ms;
-  }
-
-  &.bounceIn {
-    animation-name: bounceIn;
-  }
-  &.bounceInDown {
-    animation-name: bounceInDown;
-  }
-  &.bounceInLeft {
-    animation-name: bounceInLeft;
-  }
-  &.bounceInRight {
-    animation-name: bounceInRight;
-  }
-  &.bounceInUp {
-    animation-name: bounceInUp;
-  }
-  &.fadeIn {
-    animation-name: fadeIn;
-  }
-  &.fadeInDown {
-    animation-name: fadeInDown;
-  }
-  &.fadeInLeft {
-    animation-name: fadeInLeft;
-  }
-  &.fadeInRight {
-    animation-name: fadeInRight;
-  }
-  &.fadeInUp {
-    animation-name: fadeInUp;
-  }
-  &.flipInX {
-    animation-name: flipInX;
-  }
-  &.flipInY {
-    animation-name: flipInY;
-  }
-  &.rotateIn {
-    animation-name: rotateIn;
-  }
-  &.rotateInDownLeft {
-    animation-name: rotateInDownLeft;
-  }
-  &.rotateInDownRight {
-    animation-name: rotateInDownRight;
-  }
-  &.rotateInUpLeft {
-    animation-name: rotateInUpLeft;
-  }
-  &.rotateInUpRight {
-    animation-name: rotateInUpRight;
-  }
-  &.slideInDown {
-    animation-name: slideInDown;
-  }
-  &.slideInLeft {
-    animation-name: slideInLeft;
-  }
-  &.slideInRight {
-    animation-name: slideInRight;
-  }
-  &.slideInUp {
-    animation-name: slideInUp;
-  }
-  &.zoomIn {
-    animation-name: zoomIn;
-  }
-  &.zoomInDown {
-    animation-name: zoomInDown;
-  }
-  &.zoomInLeft {
-    animation-name: zoomInLeft;
-  }
-  &.zoomInRight {
-    animation-name: zoomInRight;
-  }
-  &.zoomInUp {
-    animation-name: zoomInUp;
-  }
-}
-

src/assets/animate/rotate.scss

@@ -1,64 +0,0 @@
-@keyframes rotateIn {
-  from {
-    transform-origin: center;
-    transform: rotate3d(0, 0, 1, -200deg);
-    opacity: 0;
-  }
-  to {
-    transform-origin: center;
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes rotateInDownLeft {
-  from {
-    transform-origin: left bottom;
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-  to {
-    transform-origin: left bottom;
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes rotateInDownRight {
-  from {
-    transform-origin: right bottom;
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-  to {
-    transform-origin: right bottom;
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes rotateInUpLeft {
-  from {
-    transform-origin: left bottom;
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-  to {
-    transform-origin: left bottom;
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes rotateInUpRight {
-  from {
-    transform-origin: right bottom;
-    transform: rotate3d(0, 0, 1, -90deg);
-    opacity: 0;
-  }
-  to {
-    transform-origin: right bottom;
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}

src/assets/animate/slide.scss

@@ -1,39 +0,0 @@
-@keyframes slideInDown {
-  from {
-    transform: translate3d(0, -100%, 0);
-    visibility: visible;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translate3d(-100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideInUp {
-  from {
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}

src/assets/animate/zoom.scss

@@ -1,61 +0,0 @@
-@keyframes zoomIn {
-  from {
-    opacity: 0;
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes zoomInDown {
-  from {
-    opacity: 0;
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-@keyframes zoomInLeft {
-  from {
-    opacity: 0;
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-@keyframes zoomInRight {
-  from {
-    opacity: 0;
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-@keyframes zoomInUp {
-  from {
-    opacity: 0;
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}

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

@@ -7,13 +7,19 @@ export default (elementRef: Ref<HTMLElement | 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()
+    const dataTransferItem = e.dataTransfer.items[0]
+
+    if(dataTransferItem.kind === 'file' && dataTransferItem.type.indexOf('image') !== -1) {
+      const imageFile = dataTransferItem.getAsFile()
       if(imageFile) {
         getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
       }
     }
+    else if(dataTransferItem.kind === 'string' && dataTransferItem.type === 'text/plain') {
+      dataTransferItem.getAsString(text => {
+        console.log(text)
+      })
+    }
   }
 
   onMounted(() => {

src/views/Editor/Canvas/index.vue

@@ -68,7 +68,7 @@ import { AlignmentLineProps } from '@/types/edit'
 
 import useViewportSize from './hooks/useViewportSize'
 import useMouseSelection from './hooks/useMouseSelection'
-import useDropImageElement from './hooks/useDropImageElement'
+import useDropImageOrText from './hooks/useDropImageOrText'
 import useRotateElement from './hooks/useRotateElement'
 import useScaleElement from './hooks/useScaleElement'
 import useSelectElement from './hooks/useSelectElement'
@@ -117,7 +117,7 @@ export default defineComponent({
     }
     watchEffect(setLocalElementList)
 
-    useDropImageElement(viewportRef)
+    useDropImageOrText(viewportRef)
 
     const canvasRef = ref<HTMLElement | null>(null)
     const canvasScale = computed(() => store.state.canvasScale)

src/views/Editor/usePasteEvent.ts

@@ -37,7 +37,7 @@ export default () => {
       }
     }
 
-    if( clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain' ) {
+    if(clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
       clipboardDataFirstItem.getAsString(text => pasteTextClipboardData(text))
     }
   }

src/views/Player/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="player">
-    player
+  <div class="slide-show">
+    slide-show
   </div>
 </template>
 
@@ -8,6 +8,6 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'player',
+  name: 'slide-show',
 })
 </script>