'优化及增加主题'

simple-mind-map/example/exampleData.js

@@ -1,6 +1,6 @@
 const createFullData = () => {
     return {
-        "image": "http://192.168.3.118:8080/enJFNMHnedQTYTESGfDkctCp2.jpeg",
+        "image": "/enJFNMHnedQTYTESGfDkctCp2.jpeg",
         "imageTitle": "图片名称",
         "imageSize": {
             "width": 1000,
@@ -17,20 +17,13 @@ const createFullData = () => {
 /** 
  * @Author: 王林 
  * @Date: 2021-04-15 22:23:24 
- * @Desc: 完整示例数据 
+ * @Desc: 节点较多示例数据 
  */
-export default {
+const data1 = {
     "root": {
         "data": {
             "text": "根节点"
         },
-        "childrens": [
-            {
-                "data": {
-                    "text": "二级节点1"
-                }
-            }
-        ],
         "children": [
             {
                 "data": {
@@ -465,7 +458,335 @@ export default {
                 }]
             },
         ]
-    },
+    }
+}
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-07-12 13:49:43 
+ * @Desc: 真实场景数据 
+ */
+const data2 = {
+    "root": {
+        "data": {
+            "text": "一周安排"
+        },
+        "children": [
+            {
+                "data": {
+                    "text": "生活"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "锻炼"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "晨跑"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "7:00-8:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "夜跑"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "20:00-21:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "饮食"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "早餐"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "8:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "午餐"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "11:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "晚餐"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "19:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "休息"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "午休"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "12:30-13:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "晚休"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "23:00-6:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "工作日\n周一至周五"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "日常工作"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "9:00-18:00"
+                                },
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "工作总结"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "21:00-22:00"
+                                },
+                                "children": []
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "学习"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "工作日"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "早间新闻"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "8:00-8:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "阅读"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "21:00-23:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "休息日"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "财务管理"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "9:00-10:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "职场技能"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "14:00-15:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "其他书籍"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "16:00-18:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "休闲娱乐"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "看电影"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "1~2部"
+                                },
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "逛街"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "1~2次"
+                                },
+                                "children": []
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+}
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-07-12 14:29:10 
+ * @Desc: 极简数据 
+ */
+const data3 = {
+    "root": {
+        "data": {
+            "text": "根节点"
+        },
+        "children": [
+            {
+                "data": {
+                    "text": "二级节点"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "子节点"
+                        },
+                        "children": []
+                    },
+                    {
+                        "data": {
+                            "text": "子节点"
+                        },
+                        "children": []
+                    }
+                ]
+            }
+        ]
+    }
+}
+
+export default {
+    // ...data1,
+    // ...data2,
+    ...data3,
     "theme": {
         "template": "default",
         "config": {

simple-mind-map/index.js

@@ -23,8 +23,6 @@ const defaultOpt = {
     themeConfig: {},
     // 放大缩小的增量比例
     scaleRatio: 0.1,
-    // 设置鼠标左键还是右键按下拖动，1（左键）、2（右键）
-    dragButton: 1,
     // 最多显示几个标签
     maxTag: 5,
     // 导出图片时的内边距
@@ -130,8 +128,6 @@ class MindMap {
         }
         // 检查主题配置
         opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
-        // 检查鼠标键值
-        opt.dragButton = [1, 3].includes(opt.dragButton) ? opt.dragButton : 1
         return opt
     }
 

simple-mind-map/src/Command.js

@@ -57,8 +57,9 @@ class Command {
     addHistory() {
         let data = this.getCopyData()
         this.history.push(simpleDeepClone(data))
-        this.activeHistoryIndex++
+        this.activeHistoryIndex = this.history.length - 1
         this.mindMap.emit('data_change', data)
+        this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
     }
 
     /** 
@@ -69,6 +70,22 @@ class Command {
     back(step = 1) {
         if (this.activeHistoryIndex - step >= 0) {
             this.activeHistoryIndex -= step
+            this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
+            return simpleDeepClone(this.history[this.activeHistoryIndex]);
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-12 10:45:31 
+     * @Desc: 前进 
+     */
+    forward(step = 1) {
+        let len = this.history.length
+        if (this.activeHistoryIndex + step <= len - 1) {
+            this.activeHistoryIndex += step
+            this.mindMap.emit('back_forward', this.activeHistoryIndex,)
             return simpleDeepClone(this.history[this.activeHistoryIndex]);
         }
     }

simple-mind-map/src/Event.js

@@ -17,7 +17,7 @@ class Event extends EventEmitter {
         super()
         this.opt = opt
         this.mindMap = opt.mindMap
-        this.isMousedown = false
+        this.isLeftMousedown = false
         this.mousedownPos = {
             x: 0,
             y: 0
@@ -100,11 +100,11 @@ class Event extends EventEmitter {
      * @Desc: 鼠标按下事件 
      */
     onMousedown(e) {
-        if (e.which !== this.mindMap.opt.dragButton) {
-            return;
-        }
         e.preventDefault()
-        this.isMousedown = true
+        // 鼠标左键
+        if (e.which === 1) {
+            this.isLeftMousedown = true
+        }
         this.mousedownPos.x = e.clientX
         this.mousedownPos.y = e.clientY
         this.emit('mousedown', e, this)
@@ -123,7 +123,7 @@ class Event extends EventEmitter {
         this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
         this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
         this.emit('mousemove', e, this)
-        if (this.isMousedown) {
+        if (this.isLeftMousedown) {
             this.emit('drag', e, this)
         }
     }
@@ -135,7 +135,7 @@ class Event extends EventEmitter {
      * @Desc: 鼠标松开事件 
      */
     onMouseup(e) {
-        this.isMousedown = false
+        this.isLeftMousedown = false
         this.emit('mouseup', e, this)
     }
 

simple-mind-map/src/Node.js

@@ -1,6 +1,7 @@
 import Style from './Style'
 import {
-    resizeImgSize
+    resizeImgSize,
+    asyncRun
 } from './utils'
 import {
     Image,
@@ -631,21 +632,23 @@ class Node {
         }
         // 子节点
         if (this.children && this.children.length && this.nodeData.data.expand !== false) {
-            let index = 0
+            asyncRun(this.children.map((item) => {
-            let loop = () => {
+                return () =>{
-                if (index >= this.children.length) {
+                    item.render()
-                    return
                 }
-                this.children[index].render()
+            }))
-                setTimeout(() => {
+            // let index = 0
-                    index++
+            // let loop = () => {
-                    loop()
+            //     if (index >= this.children.length) {
-                }, 0)
+            //         return
-            }
+            //     }
-            loop()
+            //     this.children[index].render()
-            // this.children.forEach((child) => {
+            //     setTimeout(() => {
-            //     child.render()
+            //         index++
-            // })
+            //         loop()
+            //     }, 0)
+            // }
+            // loop()
         }
     }
 
@@ -661,21 +664,23 @@ class Node {
         this.removeLine()
         // 子节点
         if (this.children && this.children.length) {
-            let index = 0
+            asyncRun(this.children.map((item) => {
-            let loop = () => {
+                return () =>{
-                if (index >= this.children.length) {
+                    item.remove()
-                    return
                 }
-                this.children[index].remove()
+            }))
-                setTimeout(() => {
+            // let index = 0
-                    index++
+            // let loop = () => {
-                    loop()
+            //     if (index >= this.children.length) {
-                }, 0)
+            //         return
-            }
+            //     }
-            loop()
+            //     this.children[index].remove()
-            // this.children.forEach((child) => {
+            //     setTimeout(() => {
-            //     child.remove()
+            //         index++
-            // })
+            //         loop()
+            //     }, 0)
+            // }
+            // loop()
         }
     }
 

simple-mind-map/src/Render.js

@@ -40,8 +40,6 @@ class Render {
         this.activeNodeList = []
         // 根节点
         this.root = null
-        // 文本编辑框
-        this.textEdit = new TextEdit(this)
         // 布局
         this.layout = new (layouts[this.mindMap.opt.layout] ? layouts[this.mindMap.opt.layout] : layouts.logicalStructure)(this)
         // 绑定事件
@@ -50,6 +48,8 @@ class Render {
         this.registerCommands()
         // 注册快捷键
         this.registerShortcutKeys()
+        // 文本编辑框
+        this.textEdit = new TextEdit(this)
     }
 
     /** 
@@ -77,6 +77,9 @@ class Render {
         // 回退
         this.back = this.back.bind(this)
         this.mindMap.command.add('BACK', this.back)
+        // 前进
+        this.forward = this.forward.bind(this)
+        this.mindMap.command.add('FORWARD', this.forward)
         // 插入同级节点
         this.insertNode = this.insertNode.bind(this)
         this.mindMap.command.add('INSERT_NODE', this.insertNode)
@@ -133,6 +136,9 @@ class Render {
         })
         // 插入同级节点
         this.mindMap.keyCommand.addShortcut('Enter', () => {
+            if (this.textEdit.showTextEdit) {
+                return
+            }
             this.insertNode()
         })
         // 展开/收起节点
@@ -157,11 +163,10 @@ class Render {
      * @Desc:  渲染
      */
     render() {
-        let s = Date.now()
+        this.layout.doLayout((root) => {
-        this.root = this.layout.doLayout()
+            this.root = root
-        console.log(Date.now() - s)
+            this.root.render()
-        this.root.render()
+        })
-        console.log(Date.now() - s)
     }
 
     /** 
@@ -233,6 +238,20 @@ class Render {
         }
     }
 
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-12 10:44:51 
+     * @Desc: 前进 
+     */
+    forward(step) {
+        let data = this.mindMap.command.forward(step)
+        if (data) {
+            this.renderTree = data
+            this.mindMap.reRender()
+        }
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2021-05-04 13:19:54 

simple-mind-map/src/Select.js

@@ -30,7 +30,10 @@ class Select {
      */
     bindEvent() {
         this.checkInNodes = throttle(this.checkInNodes, 500, this)
-        this.mindMap.on('contextmenu', (e) => {
+        this.mindMap.on('mousedown', (e) => {
+            if (e.which !== 3) {
+                return
+            }
             this.isMousedown = true
             let { x, y } = this.toPos(e.clientX, e.clientY)
             this.mouseDownX = x
@@ -50,7 +53,6 @@ class Select {
                 [this.mouseDownX, this.mouseMoveY]
             ])
             this.checkInNodes()
-            // this.mindMap.batchExecution.push('checkInNodes', this.checkInNodes)
         })
         this.mindMap.on('mouseup', (e) => {
             if (!this.isMousedown) {

simple-mind-map/src/TextEdit.js

@@ -53,7 +53,10 @@ export default class TextEdit {
         })
         // 注册编辑快捷键
         this.mindMap.keyCommand.addShortcut('F2', () => {
-            this.show()
+            if (this.renderer.activeNodeList.length <= 0){
+                return
+            }
+            this.show(this.renderer.activeNodeList[0])
         })
     }
 

simple-mind-map/src/layouts/LogicalStructure.js

@@ -1,6 +1,7 @@
 import Base from './Base';
 import {
-    walk
+    walk,
+    asyncRun
 } from '../utils'
 
 /** 
@@ -24,15 +25,17 @@ class LogicalStructure extends Base {
      * @Date: 2021-04-06 14:04:20 
      * @Desc: 布局
      */
-    doLayout() {
+    doLayout(callback) {
-        // 遍历数据计算节点的left、width、height
+        let task = [() => {
-        this.computedBaseValue()
+            this.computedBaseValue()
-        // 计算节点的top
+        }, () => {
-        this.computedTopValue()
+            this.computedTopValue()
-        // 调整节点top
+        }, () => {
-        this.adjustTopValue()
+            this.adjustTopValue()
-
+        }, () => {
-        return this.root;
+            callback(this.root)
+        }]
+        asyncRun(task)
     }
 
     /** 
@@ -122,7 +125,7 @@ class LogicalStructure extends Base {
                 // 上面的节点往上移
                 if (_index < index) {
                     _offset = -addHeight
-                } else if (_index > index) {// 下面的节点往下移
+                } else if (_index > index) { // 下面的节点往下移
                     _offset = addHeight
                 }
                 item.top += _offset

simple-mind-map/src/themes/index.js

@@ -1,16 +1,18 @@
-import defaultTheme from './default';
+import defaultTheme from './default'
-import freshGreen from './freshGreen';
+import freshGreen from './freshGreen'
-import blueSky from './blueSky';
+import blueSky from './blueSky'
-import brainImpairedPink from './brainImpairedPink';
+import brainImpairedPink from './brainImpairedPink'
-import romanticPurple from './romanticPurple';
+import romanticPurple from './romanticPurple'
-import freshRed from './freshRed';
+import freshRed from './freshRed'
-import earthYellow from './earthYellow';
+import earthYellow from './earthYellow'
-import classic from './classic';
+import classic from './classic'
-import classic2 from './classic2';
+import classic2 from './classic2'
-import classic3 from './classic3';
+import classic3 from './classic3'
 import dark from './dark';
-import classicGreen from './classicGreen';
+import classicGreen from './classicGreen'
-import classicBlue from './classicBlue';
+import classicBlue from './classicBlue'
+import minions from './minions'
+import pinkGrape from './pinkGrape'
 
 export default {
     default: defaultTheme,
@@ -25,5 +27,7 @@ export default {
     classic3,
     dark,
     classicGreen,
-    classicBlue
+    classicBlue,
+    minions,
+    pinkGrape
 }

simple-mind-map/src/themes/minions.js

@@ -0,0 +1,43 @@
+import defaultTheme from './default';
+import merge from 'deepmerge';
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-11 15:22:18 
+ * @Desc: 小黄人
+ */
+export default merge(defaultTheme, {
+    // 连线的颜色
+    lineColor: 'rgb(51, 51, 51)',
+    lineWidth: 3,
+    // 背景颜色
+    backgroundColor: 'rgb(248, 215, 49)',
+    // 根节点样式
+    root: {
+        fillColor: 'rgb(55, 165, 255)',
+        borderColor: 'rgb(51, 51, 51)',
+        borderWidth: 3,
+        active: {
+            borderColor: 'rgb(255, 160, 36)'
+        }
+    },
+    // 二级节点样式
+    second: {
+        fillColor: 'rgb(255, 160, 36)',
+        color: '#222',
+        borderColor: 'rgb(51, 51, 51)',
+        borderWidth: 3,
+        fontSize: 14,
+        active: {
+            borderColor: 'rgb(55, 165, 255)'
+        }
+    },
+    // 三级及以下节点样式
+    node: {
+        fontSize: 12,
+        color: '#222',
+        active: {
+            borderColor: 'rgb(55, 165, 255)'
+        }
+    }
+})

simple-mind-map/src/themes/pinkGrape.js

@@ -0,0 +1,45 @@
+import defaultTheme from './default';
+import merge from 'deepmerge';
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-11 15:22:18 
+ * @Desc: 粉红葡萄
+ */
+export default merge(defaultTheme, {
+    // 连线的颜色
+    lineColor: 'rgb(166, 101, 106)',
+    lineWidth: 3,
+    // 背景颜色
+    backgroundColor: 'rgb(255, 208, 211)',
+    // 根节点样式
+    root: {
+        fillColor: 'rgb(139, 109, 225)',
+        borderColor: '',
+        borderWidth: 0,
+        active: {
+            borderColor: 'rgb(243, 104, 138)',
+            borderWidth: 2,
+        }
+    },
+    // 二级节点样式
+    second: {
+        fillColor: 'rgb(243, 104, 138)',
+        color: '#fff',
+        borderColor: '',
+        borderWidth: 0,
+        fontSize: 14,
+        active: {
+            borderColor: 'rgb(139, 109, 225)',
+            borderWidth: 2,
+        }
+    },
+    // 三级及以下节点样式
+    node: {
+        fontSize: 12,
+        color: '#222',
+        active: {
+            borderColor: 'rgb(139, 109, 225)'
+        }
+    }
+})

simple-mind-map/src/utils/constant.js

@@ -42,6 +42,16 @@ export const themeList = [
         value: 'classic',
         img: require('../assets/classic.jpg')
     },
+    {
+        name: '小黄人',
+        value: 'minions',
+        img: require('../assets/minions.jpg')
+    },
+    {
+        name: '粉红葡萄',
+        value: 'pinkGrape',
+        img: require('../assets/pinkGrape.jpg')
+    },
     {
         name: '脑图经典2',
         value: 'classic2',

simple-mind-map/src/utils/index.js

@@ -194,4 +194,30 @@ export const throttle = (fn, time = 300, ctx) => {
             timer = null
         }, 300)
     };
+}
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-07-12 10:27:36 
+ * @Desc: 异步执行任务队列 
+ */
+export const asyncRun = (taskList, callback = () => {}) => {
+    let index = 0
+    let len = taskList.length
+    if (len <= 0) {
+        return
+    }
+    let loop = () => {
+        if (index >= len) {
+            callback()
+            return
+        }
+        taskList[index]()
+        setTimeout(() => {
+            index++
+            loop()
+        }, 0)
+    }
+    loop()
 }

web/src/pages/Edit/components/BaseStyle.vue

@@ -100,7 +100,7 @@
         <div class="rowItem">
           <span class="name">水平</span>
           <el-slider
-            style="width: 210px"
+            style="width: 200px"
             v-model="style.paddingX"
             @change="
               (value) => {
@@ -114,7 +114,7 @@
         <div class="rowItem">
           <span class="name">垂直</span>
           <el-slider
-            style="width: 210px"
+            style="width: 200px"
             v-model="style.paddingY"
             @change="
               (value) => {
@@ -130,7 +130,7 @@
         <div class="rowItem">
           <span class="name">显示的最大宽度</span>
           <el-slider
-            style="width: 150px"
+            style="width: 140px"
             v-model="style.imgMaxWidth"
             :min="10"
             :max="300"
@@ -146,7 +146,7 @@
         <div class="rowItem">
           <span class="name">显示的最大高度</span>
           <el-slider
-            style="width: 150px"
+            style="width: 140px"
             v-model="style.imgMaxHeight"
             :min="10"
             :max="300"
@@ -164,7 +164,7 @@
         <div class="rowItem">
           <span class="name">大小</span>
           <el-slider
-            style="width: 210px"
+            style="width: 200px"
             v-model="style.iconSize"
             :min="12"
             :max="50"

web/src/pages/Edit/components/Edit.vue

@@ -84,6 +84,9 @@ export default {
       this.mindMap.on("data_change", (...args) => {
         this.$bus.$emit("data_change", ...args);
       });
+      this.mindMap.on("back_forward", (...args) => {
+        this.$bus.$emit("back_forward", ...args);
+      });
     },
 
     /**
@@ -92,7 +95,7 @@ export default {
      * @Desc: 重新渲染
      */
     reRender() {
-      this.mindMap.render();
+      this.mindMap.reRender();
     },
 
     /**

web/src/pages/Edit/components/Toolbar.vue

@@ -6,7 +6,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: false,
+            disabled: backEnd,
           }"
           @click="$bus.$emit('execCommand', 'BACK')"
         >
@@ -16,7 +16,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: false,
+            disabled: forwardEnd,
           }"
           @click="$bus.$emit('execCommand', 'FORWARD')"
         >
@@ -170,6 +170,8 @@ export default {
   data() {
     return {
       activeNodes: [],
+      backEnd: false,
+      forwardEnd: true
     };
   },
   computed: {
@@ -183,6 +185,11 @@ export default {
     this.$bus.$on("node_active", (...args) => {
       this.activeNodes = args[1];
     });
+    this.$bus.$on("back_forward", (index, len) => {
+      console.log(index, len)
+      this.backEnd = index <= 0
+      this.forwardEnd = index >= len - 1
+    });
   },
 };
 </script>