mirror of
https://github.com/skishore/makemeahanzi.git
synced 2025-11-01 20:27:44 +08:00
Start work on client-side pipeline support
This commit is contained in:
Shaunak Kishore
246
client/editor.js
Normal file
246
client/editor.js
Normal file
@ -0,0 +1,246 @@
|
||||
"use strict";
|
||||
|
||||
Session.setDefault('editor.glyph', undefined);
|
||||
Session.setDefault('glyph.selected_point', undefined);
|
||||
|
||||
var COLORS = ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF',
|
||||
'#001F3F', '#39CCCC', '#3D9970', '#01FF70', '#FF851B'];
|
||||
var DICTIONARY = 'http://www.archchinese.com/chinese_english_dictionary.html';
|
||||
|
||||
function change_glyph(method, argument) {
|
||||
argument = argument || Session.get('editor.glyph');
|
||||
Meteor.call(method, argument, function(err, data) {
|
||||
Session.set('editor.glyph', data);
|
||||
});
|
||||
}
|
||||
|
||||
window.get_glyph = function(name) {
|
||||
change_glyph('get_glyph', name);
|
||||
}
|
||||
|
||||
function contains(bridges, bridge) {
|
||||
return remove_bridges(bridges, [bridge]).length < bridges.length;
|
||||
}
|
||||
|
||||
function remove_bridges(add, remove) {
|
||||
var set = {};
|
||||
for (var i = 0; i < remove.length; i++) {
|
||||
set[to_line(remove[i]).coordinates] = true;
|
||||
set[to_line([remove[i][1], remove[i][0]]).coordinates] = true;
|
||||
}
|
||||
return add.filter(function(x) { return !set[to_line(x).coordinates]; });
|
||||
}
|
||||
|
||||
function to_line(pairs) {
|
||||
return {
|
||||
x1: pairs[0][0],
|
||||
y1: pairs[0][1],
|
||||
x2: pairs[1][0],
|
||||
y2: pairs[1][1],
|
||||
coordinates: pairs[0].join(',') + ',' + pairs[1].join(','),
|
||||
};
|
||||
}
|
||||
|
||||
function to_point(pair) {
|
||||
return {x: pair[0], y: pair[1], coordinates: pair.join(',')};
|
||||
}
|
||||
|
||||
var bindings = {
|
||||
'w': function() {
|
||||
if (!EDIT_STROKES) {
|
||||
var glyph = Session.get('editor.glyph');
|
||||
var character = String.fromCodePoint(parseInt(glyph.name.substr(3), 16));
|
||||
window.open(DICTIONARY + '?find=' + character, '_blank').focus();
|
||||
return;
|
||||
}
|
||||
if (Session.get('glyph.show_strokes')) {
|
||||
Session.set('glyph.show_strokes', false);
|
||||
Session.set('glyph.selected_point', undefined);
|
||||
var glyph = Session.get('editor.glyph');
|
||||
glyph.manual.verified = false;
|
||||
change_glyph('save_glyph', glyph);
|
||||
} else {
|
||||
var glyph = Session.get('editor.glyph');
|
||||
delete glyph.manual;
|
||||
Session.set('editor.glyph', fill_glyph_fields(glyph));
|
||||
}
|
||||
},
|
||||
'a': function() {
|
||||
change_glyph('get_previous_glyph');
|
||||
},
|
||||
'A': function() {
|
||||
change_glyph('get_previous_glyph_skip_verified');
|
||||
},
|
||||
's': function() {
|
||||
if (!EDIT_STROKES) {
|
||||
return;
|
||||
}
|
||||
var glyph = Session.get('editor.glyph');
|
||||
if (!Session.get('glyph.show_strokes')) {
|
||||
Session.set('glyph.show_strokes', true);
|
||||
return;
|
||||
}
|
||||
if (glyph.manual.verified || !has_errors(glyph)) {
|
||||
glyph.manual.verified = !glyph.manual.verified;
|
||||
change_glyph('save_glyph', glyph);
|
||||
}
|
||||
},
|
||||
'd': function() {
|
||||
change_glyph('get_next_glyph');
|
||||
},
|
||||
'D': function() {
|
||||
change_glyph('get_next_glyph_skip_verified');
|
||||
},
|
||||
};
|
||||
|
||||
/*
|
||||
Template.controls.helpers({
|
||||
w_button_name: function() {
|
||||
if (!EDIT_STROKES) {
|
||||
return 'Check';
|
||||
}
|
||||
return Session.get('glyph.show_strokes') ? 'Edit' : 'Reset';
|
||||
},
|
||||
s_button_name: function() {
|
||||
return '(Error)';
|
||||
if (!Session.get('glyph.show_strokes')) {
|
||||
return 'View';
|
||||
}
|
||||
var glyph = Session.get('glyph.data');
|
||||
return glyph && glyph.manual.verified ? 'Flag' : 'Verify';
|
||||
},
|
||||
});
|
||||
|
||||
Template.glyph.events({
|
||||
'click #glyph svg g line': function(e) {
|
||||
var coordinates = $(e.target).attr('data-coordinates');
|
||||
var xs = coordinates.split(',').map(function(x) {
|
||||
return parseInt(x, 10);
|
||||
});
|
||||
var bridge = [[xs[0], xs[1]], [xs[2], xs[3]]];
|
||||
var glyph = Session.get('glyph.data');
|
||||
glyph.manual.bridges = remove_bridges(glyph.manual.bridges, [bridge]);
|
||||
Session.set('glyph.data', fill_glyph_fields(glyph));
|
||||
Session.set('glyph.selected_point', undefined);
|
||||
},
|
||||
'click #glyph svg g circle': function(e) {
|
||||
var coordinates = $(e.target).attr('data-coordinates');
|
||||
var selected_point = Session.get('glyph.selected_point');
|
||||
if (selected_point === coordinates) {
|
||||
Session.set('glyph.selected_point', undefined);
|
||||
return;
|
||||
} else if (!selected_point) {
|
||||
Session.set('glyph.selected_point', coordinates);
|
||||
return;
|
||||
}
|
||||
var xs = (coordinates + ',' + selected_point).split(',').map(function(x) {
|
||||
return parseInt(x, 10);
|
||||
});
|
||||
var bridge = [[xs[0], xs[1]], [xs[2], xs[3]]];
|
||||
var glyph = Session.get('glyph.data');
|
||||
if (!contains(glyph.manual.bridges, bridge)) {
|
||||
glyph.manual.bridges.push(bridge);
|
||||
Session.set('glyph.data', fill_glyph_fields(glyph));
|
||||
}
|
||||
Session.set('glyph.selected_point', undefined);
|
||||
},
|
||||
});
|
||||
*/
|
||||
|
||||
Template.editor.helpers({
|
||||
class() {
|
||||
return undefined;
|
||||
},
|
||||
paths() {
|
||||
const glyph = Session.get('editor.glyph');
|
||||
if (!glyph) return;
|
||||
const result = [];
|
||||
for (let i = 0; i < glyph.stages.strokes.length; i++) {
|
||||
result.push({
|
||||
cls: 'selectable',
|
||||
d: glyph.stages.strokes[i],
|
||||
fill: COLORS[i % COLORS.length],
|
||||
stroke: 'black',
|
||||
});
|
||||
}
|
||||
return result;
|
||||
},
|
||||
lines() {
|
||||
return;
|
||||
const glyph = Session.get('editor.glyph');
|
||||
if (!glyph) return;
|
||||
var original = {};
|
||||
for (var i = 0; i < glyph.render.bridges.length; i++) {
|
||||
var bridge = glyph.render.bridges[i];
|
||||
original[to_line(bridge).coordinates] = true;
|
||||
original[to_line([bridge[1], bridge[0]]).coordinates] = true;
|
||||
}
|
||||
var result = [];
|
||||
for (var i = 0; i < glyph.manual.bridges.length; i++) {
|
||||
var line = to_line(glyph.manual.bridges[i]);
|
||||
line.color = original[line.coordinates] ? 'red' : 'purple';
|
||||
result.push(line);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
points() {
|
||||
return;
|
||||
const glyph = Session.get('editor.glyph');
|
||||
if (!glyph) return;
|
||||
var result = [];
|
||||
for (var i = 0; i < glyph.render.endpoints.length; i++) {
|
||||
var endpoint = glyph.render.endpoints[i];
|
||||
var point = to_point(endpoint.point);
|
||||
point.color = endpoint.corner ? 'red' : 'black';
|
||||
point.z_index = endpoint.corner ? 1 : 0;
|
||||
if (point.coordinates === Session.get('glyph.selected_point')) {
|
||||
point.color = 'purple';
|
||||
}
|
||||
result.push(point);
|
||||
}
|
||||
result.sort(function(p1, p2) { return p1.z_index - p2.z_index; });
|
||||
return result;
|
||||
},
|
||||
});
|
||||
|
||||
Template.metadata.helpers({
|
||||
character() {
|
||||
const glyph = Session.get('editor.glyph');
|
||||
if (!glyph) return;
|
||||
return glyph.character;
|
||||
},
|
||||
items() {
|
||||
const glyph = Session.get('editor.glyph');
|
||||
if (!glyph) return;
|
||||
const defaults = cjklib.getCharacterData(glyph.character);
|
||||
const fields = ['definition', 'pinyin', 'strokes']
|
||||
return fields.map((x) => ({
|
||||
field: `${x[0].toUpperCase()}${x.substr(1)}:`,
|
||||
value: glyph.metadata[x] || defaults[x] || '(unknown)',
|
||||
}));
|
||||
},
|
||||
});
|
||||
|
||||
Template.status.helpers({
|
||||
stage() {
|
||||
return 'strokes';
|
||||
},
|
||||
lines() {
|
||||
return [
|
||||
{cls: 'success', message: 'asdf'},
|
||||
{cls: 'error', message: 'asdf asdf'},
|
||||
{message: 'asdf asdf asdf asdf asdf asdf asdf asdf asdf asd fasd fasd fasd fas dfa sdfa sdf'},
|
||||
];
|
||||
},
|
||||
});
|
||||
|
||||
Meteor.startup(function() {
|
||||
$('body').on('keypress', function(e) {
|
||||
var key = String.fromCharCode(e.which);
|
||||
if (bindings.hasOwnProperty(key)) {
|
||||
bindings[key]();
|
||||
}
|
||||
});
|
||||
cjklib.promise.then(() => change_glyph('get_next_glyph'))
|
||||
.catch(console.error.bind(console));
|
||||
});
|
||||
Reference in New Issue
Block a user