Change Detection

The project page can be used for editing.

It is normal to ask a user if they want to save edits before leaving an editor.

However, users should only be prompted to save when changes have been made or the project is new.

This requires a method to record or detect when changes have been made.

Two methods are:

1. Set a "dirty bit", e.g. isChanged = true; every time the user makes a change. This is very simple to implement, but it requires extra code proportional to the number of things that can be changed. It is easy to omit code to record changes, and hard to test for complete correctness.

2. Record the state of the project when the editor is entered and compare it to the current state when the user tries to leave the editor. This has the problem of taking more space (but projects are small in absolute terms) and requiring some sophistication to detect changes given the the project has a graph structure with many objects and fields.

We should try method 2. We already store graphs in a simplified representation (JSON), and since this is everything that we store, it is exactly the right place to check for any changes that will be significant.

Here is what a simple project looks like as JSON:

{
	"projectName": "test",
	"projectDescription": "",
	"blocks": {
		"bs": [
			{
				"typeName": "SamplePlayer",
				"id": 1,
				"typeId": 1,
				"name": "S1",
				"givenName": "SamplePlayer",
				"collapse": true,
				"audioObj": {},
				"inNode": [],
				"outNode": [
					[
						"S1",
						2,
						"0",
						0
					]
				],
				"color": "#e5777d",
				"inDisabled": true,
				"osc": false,
				"inDisableds": [
					true,
					true,
					true,
					true,
					true,
					true,
					true,
					true,
					true,
					true
				],
				"random": false,
				"loop": false,
				"speed": 1,
				"reversed": false,
				"playings": [
					false,
					false,
					false,
					false,
					false,
					false,
					false,
					false,
					false,
					false
				],
				"files": [
					null,
					null,
					null,
					null,
					null,
					null,
					null,
					null,
					null,
					null
				],
				"masterVolume": 100
			},
			{
				"typeName": "Speaker",
				"id": 2,
				"typeId": 1,
				"name": "S1",
				"givenName": "Speaker",
				"collapse": true,
				"audioObj": {},
				"inNode": [
					[
						"S1",
						1,
						"0"
					]
				],
				"outNode": [],
				"color": "#f0fec7",
				"renderRate": 100,
				"suspended": false,
				"meterL": 60,
				"meterR": 60
			}
		],
		"nowOut": [],
		"cns": {}
	}
}