Saving prototypo-canvas manual changes to store

app/scripts/actions/font.actions.jsx

@@ -132,6 +132,7 @@ export default {
 	},
 	'/change-font': async ({templateToLoad, db}) => {
 		const typedataJSON = await Typefaces.getFont(templateToLoad);
+
 		localClient.dispatchAction('/change-font-from-typedata', {
 			typedataJSON,
 			db,
@@ -434,8 +435,9 @@ export default {
 		});
 
 		if (family.name === currentFamily.name && family.template === currentFamily.template && variant.id === currentVariant.id) {
-			const variant =  family.variants[0]
-			prototypoStore.set('variant',variant);
+			const variant = family.variants[0];
+
+			prototypoStore.set('variant', variant);
 			localClient.dispatchAction('/change-font', {
 				templateToLoad: family.template,
 				db: variant.db,
@@ -459,6 +461,7 @@ export default {
 		if (family.name === currentFamily.name && family.template === currentFamily.template) {
 			const newFamily = families[0];
 			const newVariant = families[0].variants[0];
+
 			prototypoStore.set('family', newFamily);
 			prototypoStore.set('variant', newVariant);
 			localClient.dispatchAction('/change-font', {
@@ -578,7 +581,7 @@ export default {
 	},
 	'/change-letter-spacing': ({value, side, letter, label, force}) => {
 		const db = (prototypoStore.get('variant') || {}).db;
-		const oldValues = undoableStore.get('controlsValues')
+		const oldValues = undoableStore.get('controlsValues');
 		const newParams = {
 			...oldValues,
 			glyphSpecialProps: {...oldValues.glyphSpecialProps},
@@ -626,4 +629,58 @@ export default {
 				localClient.dispatchAction('/store-value-fast', resultValues);
 		});
 	},
+	'/change-glyph-node-manually': ({glyphUnicode, changes, force, label = 'glyph node manual'}) => {
+		const db = (prototypoStore.get('variant') || {}).db;
+		const oldValues = undoableStore.get('controlsValues');
+		const manualChanges = _.cloneDeep(oldValues.manualChanges) || {};
+
+		manualChanges[glyphUnicode] = manualChanges[glyphUnicode] || {};
+		manualChanges[glyphUnicode].cursors = manualChanges[glyphUnicode].cursors || {};
+		manualChanges[glyphUnicode].dirty = 0;
+
+		// adding deltas to modified cursors
+		Object.keys(changes).forEach((cursorKey) => {
+			const oldChanges = manualChanges[glyphUnicode].cursors[cursorKey];
+
+			if (typeof oldChanges === 'number') {
+				changes[cursorKey] += oldChanges;
+			}
+			else if (typeof oldChanges === 'object') {
+				Object.keys(changes[cursorKey]).forEach((key) => {
+					if (oldChanges[key] !== undefined) {
+						changes[cursorKey][key] += oldChanges[key];
+					}
+				});
+				// merging objects to keep other changes
+				changes[cursorKey] = {...oldChanges, ...changes[cursorKey]};
+			}
+		});
+
+		const newParams = {
+			...oldValues,
+			manualChanges: {
+				...manualChanges,
+				[glyphUnicode]: {
+					...manualChanges[glyphUnicode],
+					cursors: {
+						...manualChanges[glyphUnicode].cursors,
+						...changes,
+					},
+					dirty: _.difference(Object.keys(changes), Object.keys(manualChanges[glyphUnicode].cursors)).length,
+				},
+			},
+		};
+
+		const patch = undoableStore.set('controlsValues', newParams).commit();
+
+		localServer.dispatchUpdate('/undoableStore', patch);
+		localClient.dispatchAction('/update-font', newParams);
+
+		if (force) {
+			undoWatcher.forceUpdate(patch, label);
+		}
+		else {
+			undoWatcher.update(patch, label);
+		}
+	},
 };

app/scripts/components/prototypo-canvas.components.jsx

@@ -46,6 +46,10 @@ export default class PrototypoCanvas extends React.Component {
 			.onDelete(() => {
 				this.setState(undefined);
 			});
+
+		fontInstance.on('manualchange', (changes, force = false) => {
+			this.client.dispatchAction('/change-glyph-node-manually', {glyphUnicode: this.props.glyphSelected, changes, force});
+		});
 	}
 
 	componentWillUnmount() {
@@ -108,10 +112,6 @@ export default class PrototypoCanvas extends React.Component {
 		this.setupCanvas();
 	}
 
-	mouseMove(e) {
-		fontInstance.onMove.bind(fontInstance)(e);
-	}
-
 	wheel(e) {
 		fontInstance.onWheel.bind(fontInstance)(e);
 		this.client.dispatchAction('/store-value', {
@@ -126,13 +126,11 @@ export default class PrototypoCanvas extends React.Component {
 		return false;
 	}
 
-	mouseDown(e) {
-		fontInstance.onDown.bind(fontInstance)(e);
+	mouseDown() {
 		document.addEventListener('selectstart', this.preventSelection);
 	}
 
-	mouseUp(e) {
-		fontInstance.onUp.bind(fontInstance)(e);
+	mouseUp() {
 		this.client.dispatchAction('/store-value', {
 			uiPos: fontInstance.view.center,
 			uiZoom: fontInstance.zoom,
@@ -144,7 +142,6 @@ export default class PrototypoCanvas extends React.Component {
 		const canvasContainer = this.refs.canvas;
 
 		canvasContainer.appendChild(window.canvasElement);
-		canvasContainer.addEventListener('mousemove', (e) => { this.mouseMove(e); });
 		canvasContainer.addEventListener('wheel', (e) => { this.wheel(e); });
 		canvasContainer.addEventListener('mousedown', (e) => { this.mouseDown(e); });
 		canvasContainer.addEventListener('mouseup', (e) => { this.mouseUp(e); });

dll.config.js

@@ -20,7 +20,6 @@ module.exports = {
 			'pouchdb',
 			'pouchdb-hoodie-api',
 			'react-json-pretty',
-			'prototypo-canvas',
 		],
 	},
 	module: {

gulpfile.js

@@ -111,7 +111,7 @@ gulp.task('watch-font', function() {
 });
 
 gulp.task('watch-prototypojs', function() {
-	return gulp.watch(['./node_modules/prototypo.js/dist/prototypo.js','./node_modules/prototypo-canvas/dist/prototypo-canvas.js'], ['cp-prototypo.js']);
+	return gulp.watch(['./node_modules/prototypo.js/dist/prototypo.js','./node_modules/prototypo-canvas/src/worker.js'], ['cp-prototypo.js']);
 });
 
 gulp.task('serve',['clean', 'images','cp-prototypo.js','cp-genese','cp-static','watch-font', 'watch-prototypojs','webpack:dll'], function(callback) {

webpack.config.js

@@ -55,6 +55,11 @@ module.exports = {
 		],
 		noParse: /(dist\/prototypo-canvas)/,
 	},
+	externals: [{
+		'./node/window': true,
+		'./node/extend': true,
+		'prototypo.js': 'prototypo',
+	}],
 	plugins: [
 		/*new webpack.DefinePlugin({
 			'process.env.__SHOW_RENDER__': "true",