javascript/makemeahanzi
1
0
Fork 0
mirror of https://github.com/skishore/makemeahanzi.git synced 2025-11-03 05:48:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Clean up stage API further

Browse Source
This commit is contained in:
Shaunak Kishore
2015-09-30 00:33:38 -04:00
parent 0d7f3516c0
commit b621da5c9c
3 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/editor.js
View File

@ -32,8 +32,7 @@ const bindings = {
Template.editor.events({ Template.editor.events({
'click svg .selectable': function(event) { 'click svg .selectable': function(event) {
// We avoid the arrow function here so that this is bound to the template. // We avoid the arrow function here so that this is bound to the template.
stage.handleEvent(event, this); stage.handleEvent(Session.get('editor.glyph'), event, this);
stage.refresh();
} }
}); });
@ -55,11 +54,8 @@ Tracker.autorun(() => {
if (!glyph) return; if (!glyph) return;
if (!last_glyph || glyph.character !== last_glyph.character) { if (!last_glyph || glyph.character !== last_glyph.character) {
stage = new stages.strokes(glyph); stage = new stages.strokes(glyph);
stage.refresh();
} else if (!_.isEqual(glyph.metadata, last_glyph.metadata)) {
stage.glyph = glyph;
stage.refresh();
} }
stage.refresh(glyph);
last_glyph = glyph; last_glyph = glyph;
}); });

5
client/lib/abstract.js
View File

@ -26,15 +26,14 @@ stages.AbstractStage = class AbstractStage {
Session.set('stage.status', undefined); Session.set('stage.status', undefined);
this.colors = ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF', this.colors = ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF',
'#001F3F', '#39CCCC', '#3D9970', '#01FF70', '#FF851B']; '#001F3F', '#39CCCC', '#3D9970', '#01FF70', '#FF851B'];
this.glyph = glyph;
} }
// Update the stage's internal state and the editor.glyph Session variable // Update the stage's internal state and the editor.glyph Session variable
// based on the event. // based on the event.
handleEvent(event, template) { handleEvent(glyph, event, template) {
assert(false, 'handleEvent was not implemented!'); assert(false, 'handleEvent was not implemented!');
} }
// Refresh the stage UI based on the current state of this stage. // Refresh the stage UI based on the current state of this stage.
refresh() { refresh(glyph) {
assert(false, 'refresh was not implemented!'); assert(false, 'refresh was not implemented!');
} }
} }

22
client/lib/strokes.js
View File

@ -1,11 +1,11 @@
"use strict"; "use strict";
const getStatusLine = (actual, expected) => { const getStatusLine = (actual, expected) => {
const actual_text = `Extracted ${actual} stroke${actual === 1 ? '' : 's'}`; const actual_text = `Selected ${actual} stroke${actual === 1 ? '' : 's'}`;
if (!expected) { if (!expected) {
return {cls: 'error', message: `${actual_text}. True number unknown.`}; return {cls: 'error', message: `${actual_text}. True number unknown.`};
} else if (actual !== expected) { } else if (actual !== expected) {
return {cls: 'error', message: `${actual_text}, but expected ${expected}.`}; return {cls: 'error', message: `${actual_text}, but need ${expected}.`};
} }
return {cls: 'success', message: `${actual_text}.`}; return {cls: 'success', message: `${actual_text}.`};
} }
@ -22,10 +22,10 @@ const getStrokePaths = (strokes, include, colors) => {
stages.strokes = class StrokesStage extends stages.AbstractStage { stages.strokes = class StrokesStage extends stages.AbstractStage {
constructor(glyph) { constructor(glyph) {
super(glyph); super();
Session.set('stage.type', 'strokes'); Session.set('stage.type', 'strokes');
Session.set('stage.instructions', Session.set('stage.instructions',
'Choose paths to include in the glyph by clicking on them. ' + 'Select paths to include in the glyph by clicking on them. ' +
'The final number of paths must agree with the stroke count ' + 'The final number of paths must agree with the stroke count ' +
'in the character metadata.'); 'in the character metadata.');
const include = this.include = {}; const include = this.include = {};
@ -37,18 +37,18 @@ stages.strokes = class StrokesStage extends stages.AbstractStage {
glyph.stages.strokes.map((stroke) => include[stroke] = true); glyph.stages.strokes.map((stroke) => include[stroke] = true);
} }
} }
handleEvent(event, template) { handleEvent(glyph, event, template) {
assert(this.include.hasOwnProperty(template.d)); assert(this.include.hasOwnProperty(template.d));
this.include[template.d] = !this.include[template.d]; this.include[template.d] = !this.include[template.d];
this.glyph.stages.strokes = this.strokes.filter((x) => this.include[x]); glyph.stages.strokes = this.strokes.filter((x) => this.include[x]);
Session.set('editor.glyph', this.glyph); Session.set('editor.glyph', glyph);
} }
refresh() { refresh(glyph) {
Session.set('stage.paths', Session.set('stage.paths',
getStrokePaths(this.strokes, this.include, this.colors)); getStrokePaths(this.strokes, this.include, this.colors));
const data = cjklib.getCharacterData(this.glyph.character); const data = cjklib.getCharacterData(glyph.character);
const actual = this.glyph.stages.strokes.length; const actual = glyph.stages.strokes.length;
const expected = this.glyph.metadata.strokes || data.strokes; const expected = glyph.metadata.strokes || data.strokes;
Session.set('stage.status', [getStatusLine(actual, expected)]); Session.set('stage.status', [getStatusLine(actual, expected)]);
} }
} }