Use mobservable.createTransformer to create (immutable, shared) histo…

…ry of the state.

Reduces memory usage significantly, improves performance a lot when having 10.000 items or more.

package.json

@@ -32,7 +32,7 @@
     "webpack-dev-server": "^1.8.2"
   },
   "dependencies": {
-    "mobservable": "^1.0.2",
+    "mobservable": "^1.2.0",
     "mobservable-react": "^2.0.0",
     "mobservable-react-devtools": "^2.0.1",
     "node-uuid": "^1.4.3",

src/stores/domain-state.js

@@ -1,4 +1,4 @@
-import {observable, transaction} from 'mobservable';
+import {observable, transaction, createTransformer} from 'mobservable';
 import Box from './box';
 
 import {randomUuid} from '../utils';
@@ -43,30 +43,22 @@ export default store;
 
 window.store = store; // for demo
 
-
-
-
-
-
-
-
-
-
-
 /**
     Serialize this store to json
 */
-export function serializeState(store) {
-    return {
-        boxes: store.boxes.map(box => ({...box})),
-        arrows: store.arrows.map(arrow => ({
-            id: arrow.id,
-            to: arrow.to.id,
-            from: arrow.from.id
-        })),
-        selection: store.selection ? store.selection.id : null
-    }
-}
+const serializeBox = createTransformer(box => ({...box}));
+
+const serializeArrow = createTransformer(arrow => ({
+    id: arrow.id,
+    to: arrow.to.id,
+    from: arrow.from.id
+}));
+
+export const serializeState = createTransformer(store => ({
+    boxes: store.boxes.map(serializeBox),
+    arrows: store.arrows.map(serializeArrow),
+    selection: store.selection ? store.selection.id : null
+}));
 
 /**
     Update the store from the given json
@@ -82,10 +74,6 @@ export function deserializeState(store, data) {
     store.selection = findBox(data.selection);
 }
 
-
-
-
-
 /**
     Generate 'amount' new random arrows and boxes
 */