mirror of
https://github.com/ijprest/keyboard-layout-editor.git
synced 2026-04-08 01:00:48 -07:00
202 lines
8.5 KiB
JavaScript
202 lines
8.5 KiB
JavaScript
var $renderKey = {};
|
|
(function () {
|
|
"use strict";
|
|
|
|
// Some predefined sizes for our caps:
|
|
// - unit == size of 1 unit, e.g., 0.75", or 19.05mm is standard
|
|
// - keySpacing == distance from edge of unit-square to keycap, e.g., (0.75" - 0.715")/2 (for DCS)
|
|
// - bevelMargin == distance from edge of keycap (at bottom) to edge of keycap (at top), e.g., (0.715" - 0.470")/2 (for DCS)
|
|
// - padding == distance between text & edge of keycap
|
|
// - strokeWidth == thickness of the outline strokes
|
|
// - roundInner/roundOuter == corner roundness for inner/outer borders
|
|
var unitSizes = {
|
|
px : {
|
|
unit : 54,
|
|
strokeWidth: 1,
|
|
"" : { profile: "" , keySpacing: 0, bevelMargin: 6, bevelOffsetY: 3, padding: 3, roundOuter: 5, roundInner: 3 },
|
|
"DCS" : { profile: "DCS", keySpacing: 0, bevelMargin: 6, bevelOffsetY: 3, padding: 3, roundOuter: 5, roundInner: 3 },
|
|
"DSA" : { profile: "DSA", keySpacing: 0, bevelMargin: 6, bevelOffsetY: 0, padding: 3, roundOuter: 5, roundInner: 8 },
|
|
"SA" : { profile: "SA", keySpacing: 0, bevelMargin: 6, bevelOffsetY: 2, padding: 3, roundOuter: 5, roundInner: 5 }
|
|
},
|
|
mm : {
|
|
unit: 19.05,
|
|
strokeWidth: 0.20,
|
|
"" : { profile: "" , keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
|
|
"DCS" : { profile: "DCS", keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
|
|
"DSA" : { profile: "DSA", keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
|
|
"SA" : { profile: "SA", keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 }
|
|
}
|
|
};
|
|
["px","mm"].forEach(function(unit) {
|
|
["","DCS","DSA", "SA"].forEach(function(profile) {
|
|
unitSizes[unit][profile].unit = unitSizes[unit].unit;
|
|
unitSizes[unit][profile].strokeWidth = unitSizes[unit].strokeWidth;
|
|
});
|
|
unitSizes[unit].OEM = unitSizes[unit].DCS; // same, for now
|
|
});
|
|
|
|
// Lighten a color by the specified amount
|
|
function lightenColor(color,mod) {
|
|
var c = $color.sRGB8(color.r,color.g,color.b).Lab();
|
|
c.l = Math.min(100,c.l*mod);
|
|
return c.sRGB8();
|
|
}
|
|
|
|
function getProfile(key) {
|
|
return (/\b(SA|DSA|DCS|OEM)\b/.exec(key.profile) || [""])[0];
|
|
}
|
|
|
|
function getRenderParms(key, sizes) {
|
|
var parms = {};
|
|
|
|
parms.jShaped = (key.width !== key.width2) || (key.height !== key.height2) || key.x2 || key.y2;
|
|
|
|
// Overall dimensions of the unit square(s) that the cap occupies
|
|
parms.capwidth = sizes.unit * key.width;
|
|
parms.capheight = sizes.unit * key.height;
|
|
parms.capx = sizes.unit * key.x;
|
|
parms.capy = sizes.unit * key.y;
|
|
if(parms.jShaped) {
|
|
parms.capwidth2 = sizes.unit * key.width2;
|
|
parms.capheight2 = sizes.unit * key.height2;
|
|
parms.capx2 = sizes.unit * (key.x + key.x2);
|
|
parms.capy2 = sizes.unit * (key.y + key.y2);
|
|
}
|
|
|
|
// Dimensions of the outer part of the cap
|
|
parms.outercapwidth = parms.capwidth - sizes.keySpacing*2;
|
|
parms.outercapheight = parms.capheight - sizes.keySpacing*2;
|
|
parms.outercapx = parms.capx + sizes.keySpacing;
|
|
parms.outercapy = parms.capy + sizes.keySpacing;
|
|
if(parms.jShaped) {
|
|
parms.outercapy2 = parms.capy2 + sizes.keySpacing;
|
|
parms.outercapx2 = parms.capx2 + sizes.keySpacing;
|
|
parms.outercapwidth2 = parms.capwidth2 - sizes.keySpacing*2;
|
|
parms.outercapheight2 = parms.capheight2 - sizes.keySpacing*2;
|
|
}
|
|
|
|
// Dimensions of the top of the cap
|
|
parms.innercapwidth = parms.outercapwidth - sizes.bevelMargin*2;
|
|
parms.innercapheight = parms.outercapheight - sizes.bevelMargin*2;
|
|
parms.innercapx = parms.outercapx + sizes.bevelMargin;
|
|
parms.innercapy = parms.outercapy + sizes.bevelMargin - sizes.bevelOffsetY;
|
|
if(parms.jShaped) {
|
|
parms.innercapwidth2 = parms.outercapwidth2 - sizes.bevelMargin*2;
|
|
parms.innercapheight2 = parms.outercapheight2 - sizes.bevelMargin*2;
|
|
parms.innercapx2 = parms.outercapx2 + sizes.bevelMargin;
|
|
parms.innercapy2 = parms.outercapy2 + sizes.bevelMargin - sizes.bevelOffsetY;
|
|
}
|
|
|
|
// Dimensions of the text part of the cap
|
|
parms.textcapwidth = parms.innercapwidth - sizes.padding*2;
|
|
parms.textcapheight = parms.innercapheight - sizes.padding*2;
|
|
parms.textcapx = parms.innercapx + sizes.padding;
|
|
parms.textcapy = parms.innercapy + sizes.padding;
|
|
|
|
parms.darkColor = key.color;
|
|
parms.lightColor = lightenColor($color.hex(key.color), 1.2).hex();
|
|
|
|
// Rotation matrix about the origin
|
|
parms.origin_x = sizes.unit * key.rotation_x;
|
|
parms.origin_y = sizes.unit * key.rotation_y;
|
|
var mat = Math.transMatrix(parms.origin_x, parms.origin_y).mult(Math.rotMatrix(key.rotation_angle)).mult(Math.transMatrix(-parms.origin_x, -parms.origin_y));
|
|
|
|
// Construct the *eight* corner points, transform them, and determine the transformed bbox.
|
|
parms.rect = { x:parms.capx, y:parms.capy, w:parms.capwidth, h:parms.capheight, x2:parms.capx+parms.capwidth, y2:parms.capy+parms.capheight };
|
|
parms.rect2 = parms.jShaped ? { x:parms.capx2, y:parms.capy2, w:parms.capwidth2, h:parms.capheight2, x2:parms.capx2+parms.capwidth2, y2:parms.capy2+parms.capheight2 } : parms.rect;
|
|
parms.bbox = { x:9999999, y:9999999, x2:-9999999, y2:-9999999 };
|
|
var corners = [
|
|
{x:parms.rect.x, y:parms.rect.y},
|
|
{x:parms.rect.x, y:parms.rect.y2},
|
|
{x:parms.rect.x2, y:parms.rect.y},
|
|
{x:parms.rect.x2, y:parms.rect.y2}
|
|
];
|
|
if(parms.jShaped) corners.push(
|
|
{x:parms.rect2.x, y:parms.rect2.y},
|
|
{x:parms.rect2.x, y:parms.rect2.y2},
|
|
{x:parms.rect2.x2, y:parms.rect2.y},
|
|
{x:parms.rect2.x2, y:parms.rect2.y2}
|
|
);
|
|
for(var i = 0; i < corners.length; ++i) {
|
|
corners[i] = mat.transformPt(corners[i]);
|
|
parms.bbox.x = Math.min(parms.bbox.x, corners[i].x);
|
|
parms.bbox.y = Math.min(parms.bbox.y, corners[i].y);
|
|
parms.bbox.x2 = Math.max(parms.bbox.x2, corners[i].x);
|
|
parms.bbox.y2 = Math.max(parms.bbox.y2, corners[i].y);
|
|
}
|
|
parms.bbox.w = parms.bbox.x2 - parms.bbox.x;
|
|
parms.bbox.h = parms.bbox.y2 - parms.bbox.y;
|
|
|
|
return parms;
|
|
}
|
|
|
|
var keycap_html, keycap_svg, keyboard_svg;
|
|
$renderKey.init = function() {
|
|
keycap_html = doT.template($('#keycap_html').html(), {__proto__: doT.templateSettings, varname:"key, sizes, parms, $sanitize, lightenColor"});
|
|
keycap_svg = doT.template($('#keycap_svg').html(), {__proto__: doT.templateSettings, varname:"key, sizes, parms, $sanitize, lightenColor", strip:false});
|
|
keyboard_svg = doT.template($('#keyboard_svg').html(), {__proto__: doT.templateSettings, varname:"parms", strip:false});
|
|
};
|
|
|
|
// Given a key, generate the HTML needed to render it
|
|
$renderKey.html = function(key, $sanitize) {
|
|
var sizes = unitSizes.px[getProfile(key)]; // always in pixels
|
|
var parms = getRenderParms(key, sizes);
|
|
|
|
// Update the rects & bounding-box of the key (for click-selection purposes)
|
|
key.rect = parms.rect;
|
|
key.rect2 = parms.rect2;
|
|
key.bbox = parms.bbox;
|
|
|
|
// Keep an inverse transformation matrix so that we can transform mouse coordinates into key-space.
|
|
key.mat = Math.transMatrix(parms.origin_x, parms.origin_y).mult(Math.rotMatrix(-key.rotation_angle)).mult(Math.transMatrix(-parms.origin_x, -parms.origin_y));
|
|
|
|
// Determine the location of the rotation crosshairs for the key
|
|
key.crosshairs = "none";
|
|
if(key.rotation_x || key.rotation_y || key.rotation_angle) {
|
|
key.crosshairs_x = parms.origin_x;
|
|
key.crosshairs_y = parms.origin_y;
|
|
key.crosshairs = "block";
|
|
}
|
|
|
|
// Generate the HTML
|
|
return keycap_html(key, sizes, parms, $sanitize, lightenColor);
|
|
};
|
|
|
|
// Given a key, generate the SVG needed to render it
|
|
$renderKey.svg = function(key, index, bbox, sizes, $sanitize) {
|
|
|
|
// Update bbox
|
|
var parms = getRenderParms(key, sizes);
|
|
bbox.x = Math.min(bbox.x, parms.bbox.x);
|
|
bbox.y = Math.min(bbox.y, parms.bbox.y);
|
|
bbox.x2 = Math.max(bbox.x2, parms.bbox.x2);
|
|
bbox.y2 = Math.max(bbox.y2, parms.bbox.y2);
|
|
parms.index = index;
|
|
|
|
return keycap_svg(key, sizes, parms, $sanitize, lightenColor);
|
|
};
|
|
|
|
$renderKey.fullSVG = function(keys, metadata) {
|
|
// Render all the keys
|
|
var units = "px";
|
|
var bbox = { x: 99999999, y:99999999, x2:-99999999, y2:-99999999 };
|
|
var keysSVG = "";
|
|
keys.forEach(function(key,index) {
|
|
keysSVG += $renderKey.svg(key, index, bbox, unitSizes[units][getProfile(key)]);
|
|
});
|
|
|
|
// Wrap with SVG boilerplate
|
|
var kbdMargin = 10, kbdPadding = 5;
|
|
return keyboard_svg({
|
|
margin: 10,
|
|
padding: 5,
|
|
width: bbox.x2,
|
|
height: bbox.y2,
|
|
units: units,
|
|
backcolor: metadata.backcolor,
|
|
strokeWidth: unitSizes[units].strokeWidth,
|
|
keys: keysSVG
|
|
});
|
|
};
|
|
|
|
}());
|