From 35a493ede47a5f3bb7ea6b6dbac9e3afce006282 Mon Sep 17 00:00:00 2001 From: Alexis Launay Date: Fri, 30 Sep 2016 17:36:10 +0200 Subject: [PATCH] Saving prototypo-canvas manual changes to store --- app/scripts/actions/font.actions.jsx | 63 ++++++++++++++++++- .../prototypo-canvas.components.jsx | 15 ++--- dll.config.js | 1 - gulpfile.js | 2 +- webpack.config.js | 5 ++ 5 files changed, 72 insertions(+), 14 deletions(-) diff --git a/app/scripts/actions/font.actions.jsx b/app/scripts/actions/font.actions.jsx index 1febed915..362ec52ae 100644 --- a/app/scripts/actions/font.actions.jsx +++ b/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); + } + }, }; diff --git a/app/scripts/components/prototypo-canvas.components.jsx b/app/scripts/components/prototypo-canvas.components.jsx index 61f252748..9531129cc 100644 --- a/app/scripts/components/prototypo-canvas.components.jsx +++ b/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); }); diff --git a/dll.config.js b/dll.config.js index 8a3336e9f..52b9bae7a 100644 --- a/dll.config.js +++ b/dll.config.js @@ -20,7 +20,6 @@ module.exports = { 'pouchdb', 'pouchdb-hoodie-api', 'react-json-pretty', - 'prototypo-canvas', ], }, module: { diff --git a/gulpfile.js b/gulpfile.js index 841c150a0..c67752617 100644 --- a/gulpfile.js +++ b/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) { diff --git a/webpack.config.js b/webpack.config.js index 72c384aa5..4e166f8ec 100644 --- a/webpack.config.js +++ b/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",