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

https://i.sstatic.net/1nmmd.png

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

The Android smartphone is experiencing issues with the responsive design not aligning properly on the

What is the process for changing one tag into a different tag?

Error encountered while implementing onMutate function in React Query for Optimistic Updates

Storing the result of an Angular $http.get request in a variable

Problems arise with identification of asynchronous functions

Can you clarify the meaning of 'this' in an AngularJS controller?

Tips for displaying lesser-known checkboxes upon clicking a button in Angular

retrieving serialized object from an ajax request sent to the web server

Unable to designate NODE_ENV as production by utilizing npm and webpack

Click to start viewing the video

Encountered an issue while trying to access the length property of an undefined value within an aside

Unable to capture screenshot of hovered element using Cypress

The alteration of arrays within React.js

Using express and sequelize to load different models in a single route

Changing the color gradient of a range column chart in ApexCharts

Accessing the chosen value of an ng-model

Adding Gridster to a WordPress theme

I'm trying to determine in Stencil JS if a button has been clicked in a separate component within a different class. Can anyone assist

Creating a diverse layout by dynamically adding divs without achieving uniformity in the grid

Printing Multiple Pages Using JavaScript and Cascading Style Sheets