feat(data): allow custom DataSet/View implementations (#729)

This tests that the methods and properties are implemented instead of checking the prototype. Thanks to this it is now possible to use a different DataSet or DataView without extending the Vis one. This also removes some interoperability issues of the standalone build when used toghether with other Vis family libraries.
visjs · Oct 16, 2020 · 36e1482 · 36e1482
1 parent 892335a
commit 36e1482
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 31 deletions.
diff --git a/lib/timeline/Graph2d.js b/lib/timeline/Graph2d.js
@@ -1,7 +1,6 @@
 import moment from '../module/moment';
 import util, { typeCoerceDataSet } from '../util';
-import { DataSet }  from 'vis-data/esnext';
-import { DataView } from 'vis-data/esnext';
+import { DataSet, DataView, isDataViewLike } from 'vis-data/esnext';
 import Range from './Range';
 import Core from './Core';
 import TimeAxis from './component/TimeAxis';
@@ -27,7 +26,7 @@ import Configurator from '../shared/Configurator';
  */
 function Graph2d (container, items, groups, options) {
   // if the third element is options, the forth is groups (optionally);
-  if (!(Array.isArray(groups) || groups instanceof DataSet || groups instanceof DataView) && groups instanceof Object) {
+  if (!(Array.isArray(groups) || isDataViewLike("id", groups)) && groups instanceof Object) {
     var forthArgument = options;
     options = groups;
     groups = forthArgument;
@@ -199,7 +198,7 @@ Graph2d.prototype.setItems = function(items) {
   if (!items) {
     newDataSet = null;
   }
-  else if (items instanceof DataSet || items instanceof DataView) {
+  else if (isDataViewLike("id", newDataSet)) {
     newDataSet = typeCoerceDataSet(items);
   }
   else {
@@ -237,7 +236,7 @@ Graph2d.prototype.setGroups = function(groups) {
   if (!groups) {
     newDataSet = null;
   }
-  else if (groups instanceof DataSet || groups instanceof DataView) {
+  else if (isDataViewLike("id", groups)) {
     newDataSet = groups;
   }
   else {

diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
@@ -1,7 +1,6 @@
 import moment from '../module/moment';
 import util, { typeCoerceDataSet } from '../util';
-import { DataSet }  from 'vis-data/esnext';
-import { DataView } from 'vis-data/esnext';
+import { DataSet, DataView, isDataViewLike } from 'vis-data/esnext';
 import Range from './Range';
 import Core from './Core';
 import TimeAxis from './component/TimeAxis';
@@ -38,7 +37,7 @@ export default class Timeline extends Core {
     }
 
     // if the third element is options, the forth is groups (optionally);
-    if (!(Array.isArray(groups) || groups instanceof DataSet || groups instanceof DataView) && groups instanceof Object) {
+    if (!(Array.isArray(groups) || isDataViewLike("id", groups)) && groups instanceof Object) {
       const forthArgument = options;
       options = groups;
       groups = forthArgument;
@@ -317,7 +316,7 @@ export default class Timeline extends Core {
     if (!items) {
       newDataSet = null;
     }
-    else if (items instanceof DataSet || items instanceof DataView) {
+    else if (isDataViewLike("id", items)) {
       newDataSet = typeCoerceDataSet(items);
     }
     else {
@@ -346,7 +345,7 @@ export default class Timeline extends Core {
     }
     else {
       const filter = group => group.visible !== false;
-      if (groups instanceof DataSet || groups instanceof DataView) {
+      if (isDataViewLike("id", groups)) {
         newDataSet = new DataView(groups,{filter});
       }
       else {
@@ -366,7 +365,7 @@ export default class Timeline extends Core {
     // method. Even if the original is a DataView already a new one has been
     // created and assigned to `this.groupsData`. In case this changes in the
     // future it will be necessary to rework this!!!!
-    if (this.groupsData instanceof DataView) {
+    if (this.groupsData != null && typeof this.groupsData.setData === "function") {
       this.groupsData.setData(null);
     }
     this.groupsData = newDataSet;

diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
@@ -1,8 +1,7 @@
 import { v4 as randomUUID } from "uuid";
 import Hammer from '../../module/hammer';
 import util, { typeCoerceDataSet } from '../../util';
-import { DataSet }  from 'vis-data/esnext';
-import { DataView } from 'vis-data/esnext';
+import { DataSet, DataView, isDataViewLike } from 'vis-data/esnext';
 import TimeStep from '../TimeStep';
 import Component from './Component';
 import Group from './Group';
@@ -958,11 +957,11 @@ class ItemSet extends Component {
     if (!items) {
       this.itemsData = null;
     }
-    else if (items instanceof DataSet || items instanceof DataView) {
+    else if (isDataViewLike("id", items)) {
       this.itemsData = typeCoerceDataSet(items);
     }
     else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
+      throw new TypeError('Data must implement the interface of DataSet or DataView');
     }
 
     if (oldItemsData) {
@@ -1029,19 +1028,16 @@ class ItemSet extends Component {
     if (!groups) {
       this.groupsData = null;
     }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
+    else if (isDataViewLike("id", groups)) {
       this.groupsData = groups;
     }
     else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
+      throw new TypeError('Data must implement the interface of DataSet or DataView');
     }
 
     if (this.groupsData) {
       // go over all groups nesting
-      let groupsData = this.groupsData;
-      if (this.groupsData instanceof DataView) {
-        groupsData = this.groupsData.getDataSet()
-      }
+      const groupsData = this.groupsData.getDataSet()
 
       groupsData.get().forEach(group => {
         if (group.nestedGroups) {
@@ -1970,10 +1966,7 @@ class ItemSet extends Component {
       if (this.options.groupEditable.order && this.groupTouchParams.group) {
           event.stopPropagation();
 
-      let groupsData = this.groupsData;
-      if (this.groupsData instanceof DataView) {
-        groupsData = this.groupsData.getDataSet()
-      }
+      const groupsData = this.groupsData.getDataSet()
           // drag from one group to another
           const group = this.groupFromTarget(event);
 

diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js
@@ -1,8 +1,7 @@
 import { v4 as randomUUID } from "uuid";
 import util, { typeCoerceDataSet } from '../../util';
 import * as DOMutil from '../../DOMutil';
-import { DataSet }  from 'vis-data/esnext';
-import { DataView } from 'vis-data/esnext';
+import { DataSet, DataView, isDataViewLike } from 'vis-data/esnext';
 import Component from './Component';
 import DataAxis from './DataAxis';
 import GraphGroup from './GraphGroup';
@@ -253,11 +252,11 @@ LineGraph.prototype.setItems = function (items) {
   if (!items) {
     this.itemsData = null;
   }
-  else if (items instanceof DataSet || items instanceof DataView) {
+  else if (isDataViewLike("id", items)) {
     this.itemsData = typeCoerceDataSet(items);
   }
   else {
-    throw new TypeError('Data must be an instance of DataSet or DataView');
+    throw new TypeError('Data must implement the interface of DataSet or DataView');
   }
 
   if (oldItemsData) {
@@ -314,11 +313,11 @@ LineGraph.prototype.setGroups = function (groups) {
   if (!groups) {
     this.groupsData = null;
   }
-  else if (groups instanceof DataSet || groups instanceof DataView) {
+  else if (isDataViewLike("id", groups)) {
     this.groupsData = groups;
   }
   else {
-    throw new TypeError('Data must be an instance of DataSet or DataView');
+    throw new TypeError('Data must implement the interface of DataSet or DataView');
   }
 
   if (this.groupsData) {