feat: add v-drag-line component

Author: gureckis

components/VDragLine.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted } from 'vue'
+import type { DragElementMarkdownSource } from '@slidev/client/composables/useDragElements.ts'
+import { useDragElement } from '@slidev/client/composables/useDragElements.ts'
+import Line from './Line.vue'
+
+const props = defineProps<{
+  pos?: string
+  markdownSource?: DragElementMarkdownSource
+  width?: number | string
+  color?: string
+  twoWay?: boolean
+}>()
+
+const { dragId, mounted, unmounted, startDragging, stopDragging, x0, y0, width, height } = useDragElement(
+  null,
+  props.pos ?? '100,100,300,300',
+  props.markdownSource,
+  true
+)
+
+onMounted(mounted)
+onUnmounted(unmounted)
+
+const x1 = computed(() => x0.value - width.value / 2)
+const y1 = computed(() => y0.value - height.value / 2)
+const x2 = computed(() => x0.value + width.value / 2)
+const y2 = computed(() => y0.value + height.value / 2)
+</script>
+
+<template>
+  <Line
+    :x1
+    :y1
+    :x2
+    :y2
+    :data-drag-id="dragId"
+    :width="props.width"
+    :color="props.color"
+    :two-way="props.twoWay"
+    @dblclick="startDragging"
+    @click-outside="stopDragging"
+  />
+</template>

docs/.vitepress/config.js

@@ -64,6 +64,7 @@ export default defineConfig({
               { text: 'ArrowHeads', link: '/components/arrowheads' },
               { text: 'Thumb', link: '/components/thumb' },
               { text: 'Line', link: '/components/line' },
+              { text: 'VDragLine', link: '/components/vdragline' },
             ],
           },
           { text: 'Customizing', link: '/customizing' },

docs/components.md

@@ -26,4 +26,6 @@ The current components are:
 
 - [Line](/components/line) - draws a straight line (no arrowheads)
 
+- [VDragLine](/components/vdragline) - draws a straight line (no arrowheads), the v-drag version.
+
 Most component can just be included in-line in your markdown. However, in some cases it can make sense to position these components using the `v-drag` directive. For example, the `SpeechBubble` component can be positioned using the `v-drag` directive to place it in a specific location on the slide. This can be useful for creating custom layouts or animations. In that case, it makes sense to keep the component in the [default slot](/layouts#slots) of each layout.

docs/components/vdragline.md

@@ -0,0 +1,6 @@
+# VDragLine
+
+## Description
+
+Draws a line using the dragging feature.
+See [VDragArrow](https://sli.dev/builtin/components#vdragarrow) in the main slidev. This uses the same props as the [`Line` component](/components/line).