Slightly changed state save API

src/main.js

@@ -53,8 +53,8 @@ class FractalJS {
   }
 
   // noinspection JSMethodCanBeStatic
-  chart2id (selector, callback) {
-    return store.getters.stateManager.chart2id(selector, callback)
+  chart2id (vm, callback) {
+    return store.getters.stateManager.chart2id(vm, callback)
   }
 
   // noinspection JSMethodCanBeStatic

src/services/state-manager.js

@@ -4,24 +4,14 @@ export default class {
   /**
    * For a given selector call back the given callback with the stateID whenever the state changes.
    * In short, this can be used to get a unique identifier for the current state of a chart and to restore it later on.
-   * @param selector: Must identify a unique fjs-chart element.
+   * @param vm: Must be the vm returned by chartManager.setChart()
    * @param callback: An arbitrary callback with one argument (the state ID).
    */
-  chart2id (selector, callback) {
-    let chartElement = document.querySelectorAll(selector)
-    if (chartElement.length !== 1) {
-      throw new Error('The given selector must point to exactly one element. ' +
-        '#Elements for this selector: ' + chartElement.length)
-    }
-    chartElement = chartElement[0]
-    if (typeof chartElement.__vue__ === 'undefined' || chartElement.__vue__.$options.name !== 'chart') {
-      throw new Error('The given selector must point to a div element with class "fjs-chart". ' +
-        'This is the div that replaced the placeholder when creating the chart initially.')
-    }
-    if (typeof chartElement.__vue__.$parent._setStateChangedCallback === 'undefined') {
+  chart2id (vm, callback) {
+    if (vm._setStateChangedCallback === 'undefined') {
       throw new Error('Cannot generate an id for this chart. It does not permit state saving.')
     }
-    chartElement.__vue__.$parent._setStateChangedCallback(async function (name, state) {
+    vm._setStateChangedCallback(async function (name, state) {
       const rv = await store.getters.requestManager.saveState({chartName: name, chartState: state})
       const stateID = rv.data.state_id
       callback(stateID)

test/state-manager-test.js

@@ -37,32 +37,11 @@ describe('state manager', () => {
   })
 
   describe('chart2id', () => {
-    it('throws if selector matches more or less than 1 element', () => {
-      const el1 = document.createElement('div')
-      el1.className = 'bar'
-      const el2 = document.createElement('div')
-      el2.className = 'bar'
-      document.body.appendChild(el1)
-      document.body.appendChild(el2)
-      let f = () => stateManager.chart2id('#foo', _ => {})
-      expect(f).toThrowError(/.+must point to exactly one.+/)
-      let g = () => stateManager.chart2id('.bar', _ => {})
-      expect(g).toThrowError(/.+must point to exactly one.+/)
-    })
-
-    it('throws if selector is no chart component', () => {
-      const el = document.createElement('div')
-      el.id = 'foo'
-      document.body.appendChild(el)
-      let f = () => stateManager.chart2id('#foo', _ => {})
-      expect(f).toThrowError(/.+must point to a div element with class "fjs-chart".+/)
-    })
-
     it('makes save state request and calls callback with returned id when called back', done => {
       spyOn(store.getters.requestManager, 'saveState').and.returnValue({data: {state_id: 456}})
       const spy = jasmine.createSpy('spy')
       const callback = id => spy(id)
-      stateManager.chart2id('.fjs-chart', callback)
+      stateManager.chart2id(vm, callback)
       vm.$data._callback('foo', 123).then(() => {
         expect(store.getters.requestManager.saveState).toHaveBeenCalledWith({chartName: 'foo', chartState: 123})
         expect(spy).toHaveBeenCalledWith(456)