From e7de791d7edb01e02e9b297c2a07fdb36d635b22 Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Wed, 31 Jan 2024 11:35:47 +0800
Subject: [PATCH] feat: non-editable element drag conveniently (#83)

---
 src/BlockHub/PictureBlock/Picture.vue                   | 2 +-
 src/UserInterface/Slide/components/SelectableBlock.vue  | 5 +++++
 src/UserInterface/ToolBar/components/Insert/Picture.vue | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/BlockHub/PictureBlock/Picture.vue b/src/BlockHub/PictureBlock/Picture.vue
index cc05620..732f533 100644
--- a/src/BlockHub/PictureBlock/Picture.vue
+++ b/src/BlockHub/PictureBlock/Picture.vue
@@ -22,6 +22,6 @@ block.props.events.update.on(({ key, to }) => {
 
 <template>
   <div class="picture">
-    <img :src="props.url" :style="{ width: '100%', height: '100%' }" />
+    <img :src="props.url" :style="{ width: '100%', height: '100%' }" @dragstart.prevent />
   </div>
 </template>
diff --git a/src/UserInterface/Slide/components/SelectableBlock.vue b/src/UserInterface/Slide/components/SelectableBlock.vue
index 019dd41..3c536e2 100644
--- a/src/UserInterface/Slide/components/SelectableBlock.vue
+++ b/src/UserInterface/Slide/components/SelectableBlock.vue
@@ -26,11 +26,16 @@ const showSelectHandle = computed(() => {
 selectionManager.events.update.on(() => {
   selected.value = selectionManager.isSelected(block)
 })
+
+const editable = computed(() => {
+  return ['TextBox', 'Table'].includes(block.type)
+})
 </script>
 
 <template>
   <div
     class="selectable-block absolute"
+    :class="{ 'move-handle': !editable }"
     :data-block-id="block.id"
     :style="{
       left: `${props.x}px`,
diff --git a/src/UserInterface/ToolBar/components/Insert/Picture.vue b/src/UserInterface/ToolBar/components/Insert/Picture.vue
index e39686a..7ace69b 100644
--- a/src/UserInterface/ToolBar/components/Insert/Picture.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Picture.vue
@@ -3,7 +3,7 @@ import { Pic } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
 import { pickFile } from '@Utils/pickFile'
 import { PictureBlock } from '@BlockHub/PictureBlock/PictureBlock'
-import { slideManager } from '@Kernel/index'
+import { selectionManager, slideManager } from '@Kernel/index'
 import ToolButton from '../ToolButton.vue'
 
 async function insertPicture() {
@@ -13,6 +13,7 @@ async function insertPicture() {
     block.url = URL.createObjectURL(file)
   }
   slideManager.currentSlide.addBlock(block)
+  selectionManager.focus(block)
 }
 </script>