Encountering a problem with vis js events

Question

Encountering a problem with vis js events

While constructing a timeline in my vue.js application, I opted to utilize vis.js. Unfortunately, I encountered some issues when attempting to incorporate events. Initially, setting @drop="myDropCallback()" did not trigger the function upon dropping an item. Surprisingly, replacing it with @mouseOver="myDropCallback()" resolved the issue, which is quite peculiar.

Moreover, during the mouseOver event, my intention was to retrieve the event properties using

this.$refs.timeline.getEventProperties(event)

, but this consistently resulted in the following error:

Error in event handler for "click": "TypeError: Cannot read property 'center' of undefined"

Additionally, I kept encountering this error message:

Cannot read property 'center' of undefined

I am seeking assistance in resolving these errors. Is there a solution available, or could I be overlooking something?

Template

<timeline v-if="items.length > 0" ref="timeline"
  :items="items"
  :groups="groups"
  :options="options"
  @drop="myDropCallback()">
</timeline>

Drop function

myDropCallback: function (event) {
  console.log('value', this.$refs.timeline.getEventProperties())
},

Snapshot of the timeline

javascript vue.js vuejs2 vis.js vis.js-timeline

Answer 1

Answer №1

Examining the code snippet from the vis.js source, the initial task is to identify the event's center value.

Timeline.prototype.getEventProperties = function (event) {
  var clientX = event.center ? event.center.x : event.clientX;
  var clientY = event.center ? event.center.y : event.clientY;
  var x;
  if (this.options.rtl) {
    x = util.getAbsoluteRight(this.dom.centerContainer) - clientX;
  } else {
    x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
  }
  var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);

  var item = this.itemSet.itemFromTarget(event);
  var group = this.itemSet.groupFromTarget(event);
  var customTime = CustomTime.customTimeFromTarget(event);

  var snap = this.itemSet.options.snap || null;
  var scale = this.body.util.getScale();
  var step = this.body.util.getStep();
  var time = this._toTime(x);
  var snappedTime = snap ? snap(time, scale, step) : time;

  var element = util.getTarget(event);
  var what = null;
  if (item != null) {
    what = 'item';
  } else if (customTime != null) {
    what = 'custom-time';
  } else if (util.hasParent(element, this.timeAxis.dom.foreground)) {
    what = 'axis';
  } else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {
    what = 'axis';
  } else if (util.hasParent(element, this.itemSet.dom.labelSet)) {
    what = 'group-label';
  } else if (util.hasParent(element, this.currentTime.bar)) {
    what = 'current-time';
  } else if (util.hasParent(element, this.dom.center)) {
    what = 'background';
  }

  return {
    event: event,
    item: item ? item.id : null,
    group: group ? group.groupId : null,
    what: what,
    pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
    pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
    x: x,
    y: y,
    time: time,
    snappedTime: snappedTime
  };
};

The possible reason for your issue could be not providing a valid event to the method. It seems like you might not be passing any parameters to the getEventProperties method. You can try something like:

myDropCallback: function (event) {
  console.log('value', this.$refs.timeline.getEventProperties(event))
},

Furthermore, you can refer to a helpful Stack Overflow post answered by one of the authors of vis.js: vis.js timeline how to add mouse over event to vis-item box-box

Answer 2

Examining the code snippet from the vis.js source, the initial task is to identify the event's center value.

Timeline.prototype.getEventProperties = function (event) {
  var clientX = event.center ? event.center.x : event.clientX;
  var clientY = event.center ? event.center.y : event.clientY;
  var x;
  if (this.options.rtl) {
    x = util.getAbsoluteRight(this.dom.centerContainer) - clientX;
  } else {
    x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
  }
  var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);

  var item = this.itemSet.itemFromTarget(event);
  var group = this.itemSet.groupFromTarget(event);
  var customTime = CustomTime.customTimeFromTarget(event);

  var snap = this.itemSet.options.snap || null;
  var scale = this.body.util.getScale();
  var step = this.body.util.getStep();
  var time = this._toTime(x);
  var snappedTime = snap ? snap(time, scale, step) : time;

  var element = util.getTarget(event);
  var what = null;
  if (item != null) {
    what = 'item';
  } else if (customTime != null) {
    what = 'custom-time';
  } else if (util.hasParent(element, this.timeAxis.dom.foreground)) {
    what = 'axis';
  } else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {
    what = 'axis';
  } else if (util.hasParent(element, this.itemSet.dom.labelSet)) {
    what = 'group-label';
  } else if (util.hasParent(element, this.currentTime.bar)) {
    what = 'current-time';
  } else if (util.hasParent(element, this.dom.center)) {
    what = 'background';
  }

  return {
    event: event,
    item: item ? item.id : null,
    group: group ? group.groupId : null,
    what: what,
    pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
    pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
    x: x,
    y: y,
    time: time,
    snappedTime: snappedTime
  };
};

The possible reason for your issue could be not providing a valid event to the method. It seems like you might not be passing any parameters to the getEventProperties method. You can try something like:

myDropCallback: function (event) {
  console.log('value', this.$refs.timeline.getEventProperties(event))
},

Furthermore, you can refer to a helpful Stack Overflow post answered by one of the authors of vis.js: vis.js timeline how to add mouse over event to vis-item box-box

Encountering a problem with vis js events

Answer №1

Similar questions

Ways to prevent the Vue component from triggering the mounted hook

Complete my search input by utilizing ajax

How can I activate a specific Vue method for every item in a v-for loop?

Which option is better: installing plotly.js or plotly.js-dist using npm?

What is the best way to merge angularjs modules?

React- Struggling to modify state from child component using function declared within a parent component

Unable to proceed due to lint errors; after conducting research, the issue still remains

Efficiently perform complex nested grouping using the powerful array

Incorporating local JSON data into HTML: A Step-by-Step

How to execute a JavaScript function within PHP code

Validating uploaded files in Javascript and handling server upload operations

Discovering the Essence of AngularJS Test Runner: Unraveling the

Can you explain the significance of syntax in sample code (typescript, react)?

Obtain the range of values for a match from an array using Vue.js

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

Tips for horizontally arranging a list with a flexible number of columns

Establishing a connection to MongoDB using JavaScript

What are the steps to storing numerical inputs as variables using jQuery and then using them to perform calculations in order to update the input numbers

Am I on track with this observation?

Learn how to properly convert a string into a valid URL using the Next JS router when pushing pages