erabo/spiegel-keyman
1
0
Fork 0
mirror of https://github.com/keymanapp/keyman.git synced 2026-10-14 18:07:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

feat(web): constrained key previews

Browse source
This commit is contained in:
jahorton 2020-04-08 11:30:28 +07:00
parent 2336dc4b64
commit fdc8cb5f88
1 changed files with 33 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
web/source/osk/visualKeyboard.ts
View file

@ -2425,7 +2425,22 @@ namespace com.keyman.osk {
xLeft -= xOverflow;
}
this.drawPreview(canvas, xWidth, xHeight, edge);
// For now, should only be true (in production) when keyman.isEmbedded == true.
let constrainPopup = keyman.isEmbedded;
let cs = getComputedStyle(tip.element);
let oskHeight = keyman.osk.getHeight();
let bottomY = parseInt(cs.bottom, 10);
let tipHeight = parseInt(cs.height, 10);
let delta = 0;
if(tipHeight + bottomY > oskHeight && constrainPopup) {
delta = tipHeight + bottomY - oskHeight;
canvas.height = canvas.height - delta;
kts.height = canvas.height + 'px';
}
this.drawPreview(canvas, xWidth, xHeight, edge, delta);
kts.left=(xLeft - xOverflow) + 'px';
kts.display = 'block';
@ -2445,13 +2460,20 @@ namespace com.keyman.osk {
* @param {number} h height of touched key, px
* @param {number} edge -1 left edge, 1 right edge, else 0
*/
drawPreview(canvas: HTMLCanvasElement, w: number, h: number, edge: number) {
drawPreview(canvas: HTMLCanvasElement, w: number, h: number, edge: number, delta?: number) {
let util = com.keyman.singleton.util;
let device = util.device;
var ctx = canvas.getContext('2d'), dx = (canvas.width - w)/2, hMax = canvas.height,
delta = delta || 0;
var ctx = canvas.getContext('2d'), dx = (canvas.width - w)/2, hMax = canvas.height + delta,
w0 = 0, w1 = dx, w2 = w + dx, w3 = w + 2 * dx,
h1 = 0.5 * hMax, h2 = 0.6 * hMax, h3 = hMax, r = 8;
let hBoundedMax = canvas.height;
h2 = h2 > hBoundedMax ? hBoundedMax : h2;
h3 = hMax > hBoundedMax ? hBoundedMax : h3;
if(device.OS == 'Android') {
r = 3;
@ -2489,14 +2511,17 @@ namespace com.keyman.osk {
if(device.OS == 'Android') {
ctx.arcTo(w3,h1,w2,h2,r);
ctx.arcTo(w2,h2,w1,h2,r);
ctx.arcTo(w1,h2,w0,h1-r,r);
} else {
let lowerR = 0;
if(h3 > h2) {
lowerR = h3-h2 > r ? r : h3-h2;
}
ctx.arcTo(w3,h1,w2,h2,r);
ctx.arcTo(w2,h2,w2-r,h3,r);
ctx.arcTo(w2,h3,w1,h3,r);
ctx.arcTo(w1,h3,w1,h2-r,r);
ctx.arcTo(w1,h2,w0,h1-r,r);
ctx.arcTo(w2,h2,w2-lowerR,h3,lowerR);
ctx.arcTo(w2,h3,w1,h3,lowerR);
ctx.arcTo(w1,h3,w1,h2-lowerR,lowerR);
}
ctx.arcTo(w1,h2,w0,h1-r,r);
ctx.arcTo(w0,h1,w0,r,r);
ctx.arcTo(w0,0,w0+r,0,r);
ctx.fill();