New drag and drop re-arranging for clips. Also adding a new FX button to clips - work in progress.

src/store/index.js

@@ -348,19 +348,30 @@ export default createStore({
     },
     async moveClip({dispatch, getters}, payload) {
       let local_clips = [...getters.thumbnailedClips]
-      let reordered_clips = local_clips
-      if (payload.current != payload.dest) {
-        reordered_clips = reorderArray(local_clips, payload.current, payload.dest)
+      if (!Array.isArray(local_clips) || local_clips.length === 0) {
+        return
       }
+      if (payload.current === payload.dest || payload.current === undefined || payload.dest === undefined) {
+        return
+      }
+      let reordered_clips = reorderArray(local_clips, payload.current, payload.dest)
       let pos = 0.0
-      for (let c of reordered_clips) {
-        c.position = pos
-        let edit_payload = { data: c, latest: false, thumbnail: false }
-        if (c.id == payload.clip.id) {
-          edit_payload.latest = true
+      let updates = []
+      const maxIndex = reordered_clips.length - 1
+      const affectedStart = Math.max(0, Math.min(payload.current, payload.dest))
+      const affectedEnd = Math.min(maxIndex, Math.max(payload.current, payload.dest))
+      for (let i = 0; i < reordered_clips.length; i++) {
+        let clip = reordered_clips[i]
+        let newPosition = pos
+        if (i >= affectedStart && i <= affectedEnd && clip.position !== newPosition) {
+          clip.position = newPosition
+          let edit_payload = { data: clip, latest: clip.id == payload.clip.id, thumbnail: false }
+          updates.push(edit_payload)
         }
+        pos += (clip.end - clip.start)
+      }
+      for (let edit_payload of updates) {
         dispatch('editClip', edit_payload)
-        pos += (c.end - c.start)
       }
     },
     async deleteClip({commit}, clip_id) {