feat: non-editable element drag conveniently (#83)

devlzl · Jan 31, 2024 · e7de791 · e7de791
1 parent a1235d9
commit e7de791
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>