如何使用 vis.js 时间轴在 onMove 或 onMoving 函数中获取开始值和结束值的变化/增量

Question

我一直在使用 onMoving 事件来跟踪开始和结束值的变化。

如何找到 start 和 end 的先前值和当前值之间的差值？

onMoving: function(item, callback) {

    if (item.start < options.min) item.start = options.min;

    if (item.video_start == 0 && item.segment_start < item.video_start) {
        item.segment_start = item.video_start;
    }

    if (item.video_end > 0 && item.segment_end > item.video_end) {
        item.segment_end = item.video_end;
    }

    callback(item);
    rearrange_timeline_min_max_value();
},

我可以看到以下事件的值，但是在 onMove 和 onMoving 中也需要这样做才能完成回调（项目）或回调（null）。

timeline_items.on('*', function (event, properties) {
    console.log("Properties : " + JSON.stringify(properties));
});

如何使用 onMoving 获取开始和结束的增量？

Answer 1

在 onMove 调用回调函数之前，项目不会在项目数据集中更新。因此，您可以在 onMove 和 onMoving 函数中从数据集中获取现有项目，并在您的逻辑中使用原始值。

onMoving: function(item, callback){
  // Fetch the current item from the DataSet
  let currentItem = items.get(item.id);
  ...

示例包含在下面的 post 和 https://jsfiddle.net/2gmj8uec/ 中。该示例仅记录旧的开始/结束时间以及更新的时间。移动时 'From' 时间不会改变，直到触发移动事件以更新数据集。

// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");

// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
  { id: 1, content: "item 1", start: new Date(2021, 11, 20) },
  { id: 2, content: "item 2", start: new Date(2021, 11, 14) },
  { id: 3, content: "item 3", start: new Date(2021, 11, 18) },
  { id: 4, content: "item 4", start: new Date(2021, 11, 16), end: new Date(2021, 11, 19) },
  { id: 5, content: "item 5", start: new Date(2021, 11, 25) },
  { id: 6, content: "item 6", start: new Date(2021, 11, 27), type: "point" },
]);

// Configuration for the Timeline
var options = {
  editable: true,
  onMoving: function(item, callback){
    // Fetch the current item from the DataSet
    let currentItem = items.get(item.id);

    // Log the changes
    console.log("Moving Start - From:", currentItem.start.toISOString(), "To:", item.start.toISOString());
    if(item.end){
      console.log("Moving End - From:", currentItem.end.toISOString(), "To:", item.end.toISOString());
    }
    
    // Return the item, updated if needed
    callback(item);
  },
  onMove: function(item, callback){
    // Fetch the current item from the DataSet
    let currentItem = items.get(item.id);
  
    // Log the changes
    console.log("Moved Start - From:", currentItem.start.toISOString(), "To:", item.start.toISOString());
    if(item.end){
      console.log("Moved End - From:", currentItem.end.toISOString(), "To:", item.end.toISOString());
    }
    
    // Return the item, updated if needed
    // This will result in the items DataSet being updated
    callback(item);
  },
};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);

body,
html {
  font-family: sans-serif;
}

/* Restrict height of console in Whosebug snippet */
.as-console-wrapper { max-height: 4em !important; }

<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>

<div id="visualization"></div>

如何使用 vis.js 时间轴在 onMove 或 onMoving 函数中获取开始值和结束值的变化/增量

How to get the change / delta for start and end values in onMove or onMoving function with vis.js timeline

javascript

timeline

vis.js

vis-timeline