observeChanges.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  2. var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
  3. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  4. function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  5. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  6. import BasePlugin from './../_base';
  7. import jsonpatch from './../../../lib/jsonpatch/json-patch-duplex';
  8. import DataObserver from './dataObserver';
  9. import { arrayEach } from './../../helpers/array';
  10. import { registerPlugin } from './../../plugins';
  11. // Handsontable.hooks.register('afterChangesObserved');
  12. /**
  13. * @plugin ObserveChanges
  14. *
  15. * @description
  16. * This plugin allows to observe data source changes.
  17. *
  18. * By default, the plugin is declared as `undefined`, which makes it disabled.
  19. * Enabling this plugin switches the table into one-way data binding where changes are applied into the data source (outside from the table)
  20. * will be automatically reflected in the table.
  21. *
  22. * ```js
  23. * ...
  24. * // as a boolean
  25. * observeChanges: true,
  26. * ...
  27. * ```
  28. *
  29. * To configure this plugin see {@link Options#observeChanges}.
  30. */
  31. var ObserveChanges = function (_BasePlugin) {
  32. _inherits(ObserveChanges, _BasePlugin);
  33. function ObserveChanges(hotInstance) {
  34. _classCallCheck(this, ObserveChanges);
  35. /**
  36. * Instance of {@link DataObserver}.
  37. *
  38. * @type {DataObserver}
  39. */
  40. var _this = _possibleConstructorReturn(this, (ObserveChanges.__proto__ || Object.getPrototypeOf(ObserveChanges)).call(this, hotInstance));
  41. _this.observer = null;
  42. return _this;
  43. }
  44. /**
  45. * Check if the plugin is enabled in the handsontable settings.
  46. *
  47. * @returns {Boolean}
  48. */
  49. _createClass(ObserveChanges, [{
  50. key: 'isEnabled',
  51. value: function isEnabled() {
  52. return this.hot.getSettings().observeChanges;
  53. }
  54. /**
  55. * Enable plugin for this Handsontable instance.
  56. */
  57. }, {
  58. key: 'enablePlugin',
  59. value: function enablePlugin() {
  60. var _this2 = this;
  61. if (this.enabled) {
  62. return;
  63. }
  64. if (!this.observer) {
  65. this.observer = new DataObserver(this.hot.getSourceData());
  66. this._exposePublicApi();
  67. }
  68. this.observer.addLocalHook('change', function (patches) {
  69. return _this2.onDataChange(patches);
  70. });
  71. this.addHook('afterCreateRow', function () {
  72. return _this2.onAfterTableAlter();
  73. });
  74. this.addHook('afterRemoveRow', function () {
  75. return _this2.onAfterTableAlter();
  76. });
  77. this.addHook('afterCreateCol', function () {
  78. return _this2.onAfterTableAlter();
  79. });
  80. this.addHook('afterRemoveCol', function () {
  81. return _this2.onAfterTableAlter();
  82. });
  83. this.addHook('afterChange', function (changes, source) {
  84. return _this2.onAfterTableAlter(source);
  85. });
  86. this.addHook('afterLoadData', function (firstRun) {
  87. return _this2.onAfterLoadData(firstRun);
  88. });
  89. _get(ObserveChanges.prototype.__proto__ || Object.getPrototypeOf(ObserveChanges.prototype), 'enablePlugin', this).call(this);
  90. }
  91. /**
  92. * Disable plugin for this Handsontable instance.
  93. */
  94. }, {
  95. key: 'disablePlugin',
  96. value: function disablePlugin() {
  97. if (this.observer) {
  98. this.observer.destroy();
  99. this.observer = null;
  100. this._deletePublicApi();
  101. }
  102. _get(ObserveChanges.prototype.__proto__ || Object.getPrototypeOf(ObserveChanges.prototype), 'disablePlugin', this).call(this);
  103. }
  104. /**
  105. * Data change observer.
  106. *
  107. * @private
  108. * @param {Array} patches An array of objects which every item defines coordinates where data was changed.
  109. */
  110. }, {
  111. key: 'onDataChange',
  112. value: function onDataChange(patches) {
  113. var _this3 = this;
  114. if (!this.observer.isPaused()) {
  115. var sourceName = this.pluginName + '.change';
  116. var actions = {
  117. add: function add(patch) {
  118. if (isNaN(patch.col)) {
  119. _this3.hot.runHooks('afterCreateRow', patch.row, 1, sourceName);
  120. } else {
  121. _this3.hot.runHooks('afterCreateCol', patch.col, 1, sourceName);
  122. }
  123. },
  124. remove: function remove(patch) {
  125. if (isNaN(patch.col)) {
  126. _this3.hot.runHooks('afterRemoveRow', patch.row, 1, sourceName);
  127. } else {
  128. _this3.hot.runHooks('afterRemoveCol', patch.col, 1, sourceName);
  129. }
  130. },
  131. replace: function replace(patch) {
  132. _this3.hot.runHooks('afterChange', [patch.row, patch.col, null, patch.value], sourceName);
  133. }
  134. };
  135. arrayEach(patches, function (patch) {
  136. if (actions[patch.op]) {
  137. actions[patch.op](patch);
  138. }
  139. });
  140. this.hot.render();
  141. }
  142. this.hot.runHooks('afterChangesObserved');
  143. }
  144. /**
  145. * On after table alter listener. Prevents infinity loop between internal and external data changing.
  146. *
  147. * @private
  148. * @param source
  149. */
  150. }, {
  151. key: 'onAfterTableAlter',
  152. value: function onAfterTableAlter(source) {
  153. var _this4 = this;
  154. if (source !== 'loadData') {
  155. this.observer.pause();
  156. this.hot.addHookOnce('afterChangesObserved', function () {
  157. return _this4.observer.resume();
  158. });
  159. }
  160. }
  161. /**
  162. * On after load data listener.
  163. *
  164. * @private
  165. * @param {Boolean} firstRun `true` if event was fired first time.
  166. */
  167. }, {
  168. key: 'onAfterLoadData',
  169. value: function onAfterLoadData(firstRun) {
  170. if (!firstRun) {
  171. this.observer.setObservedData(this.hot.getSourceData());
  172. }
  173. }
  174. /**
  175. * Destroy plugin instance.
  176. */
  177. }, {
  178. key: 'destroy',
  179. value: function destroy() {
  180. if (this.observer) {
  181. this.observer.destroy();
  182. this._deletePublicApi();
  183. }
  184. _get(ObserveChanges.prototype.__proto__ || Object.getPrototypeOf(ObserveChanges.prototype), 'destroy', this).call(this);
  185. }
  186. /**
  187. * Expose plugins methods to the core.
  188. *
  189. * @private
  190. */
  191. }, {
  192. key: '_exposePublicApi',
  193. value: function _exposePublicApi() {
  194. var _this5 = this;
  195. var hot = this.hot;
  196. hot.pauseObservingChanges = function () {
  197. return _this5.observer.pause();
  198. };
  199. hot.resumeObservingChanges = function () {
  200. return _this5.observer.resume();
  201. };
  202. hot.isPausedObservingChanges = function () {
  203. return _this5.observer.isPaused();
  204. };
  205. }
  206. /**
  207. * Delete all previously exposed methods.
  208. *
  209. * @private
  210. */
  211. }, {
  212. key: '_deletePublicApi',
  213. value: function _deletePublicApi() {
  214. var hot = this.hot;
  215. delete hot.pauseObservingChanges;
  216. delete hot.resumeObservingChanges;
  217. delete hot.isPausedObservingChanges;
  218. }
  219. }]);
  220. return ObserveChanges;
  221. }(BasePlugin);
  222. export default ObserveChanges;
  223. registerPlugin('observeChanges', ObserveChanges);