bak

src/components/AssetSidebar.vue

@@ -175,11 +175,35 @@ const imageAssets = computed(() =>
   store.scene.assets.filter((a): a is Extract<Asset, { kind: 'image' }> => a.kind === 'image'),
 )
 
-function onAssetDragStart(e: DragEvent, assetId: string) {
+function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>) {
   if (!e.dataTransfer) return
   e.dataTransfer.effectAllowed = 'copy'
-  e.dataTransfer.setData('application/x-animatr-asset', assetId)
-  e.dataTransfer.setData('text/plain', assetId)
+  e.dataTransfer.setData('application/x-animatr-asset', asset.id)
+  e.dataTransfer.setData('text/plain', asset.id)
+
+  // Use the actual graphic as drag ghost instead of the library entry.
+  const target = e.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+  const thumbImg = target.querySelector('img') as HTMLImageElement | null
+  if (thumbImg && thumbImg.complete && thumbImg.naturalWidth > 0) {
+    const r = thumbImg.getBoundingClientRect()
+    const ox = Math.max(0, e.clientX - r.left)
+    const oy = Math.max(0, e.clientY - r.top)
+    e.dataTransfer.setDragImage(thumbImg, ox, oy)
+    return
+  }
+  // Fallback — create an offscreen image of the asset for use as drag ghost.
+  const ghost = document.createElement('img')
+  ghost.src = asset.src
+  ghost.style.cssText =
+    'position:fixed;top:-10000px;left:-10000px;width:72px;height:auto;pointer-events:none;'
+  document.body.appendChild(ghost)
+  const gx = Math.max(0, e.clientX - rect.left)
+  const gy = Math.max(0, e.clientY - rect.top)
+  e.dataTransfer.setDragImage(ghost, gx, gy)
+  setTimeout(() => {
+    ghost.remove()
+  }, 0)
 }
 
 </script>
@@ -234,7 +258,7 @@ function onAssetDragStart(e: DragEvent, assetId: string) {
         v-for="asset in imageAssets"
         :key="asset.id"
         draggable="true"
-        @dragstart="onAssetDragStart($event, asset.id)"
+        @dragstart="onAssetDragStart($event, asset)"
       >
         <template v-if="showThumbs">
           <div class="thumb">