ctrlpad: more spacing
Rob Pilling
parent
56d9111e79
commit
d5191bccca
|
|
@ -62,17 +62,17 @@
|
||||||
const g = this.g2;
|
const g = this.g2;
|
||||||
|
|
||||||
g
|
g
|
||||||
.reset()
|
.reset()
|
||||||
.clearRect(0, 0, this.width, this.height)
|
.clearRect(0, 0, this.width, this.height)
|
||||||
.drawRect(0, 0, this.width - 1, this.height - 1)
|
.drawRect(0, 0, this.width - 1, this.height - 1)
|
||||||
.drawRect(1, 1, this.width - 2, this.height - 2);
|
.drawRect(1, 1, this.width - 2, this.height - 2);
|
||||||
|
|
||||||
const centreY = this.height / 2;
|
const centreY = this.height / 2;
|
||||||
const circleGapY = 30;
|
const circleGapY = 30;
|
||||||
|
|
||||||
g
|
g
|
||||||
.setFontAlign(0, 0)
|
.setFontAlign(0, 0)
|
||||||
.setFont("Vector:20");
|
.setFont("Vector:20");
|
||||||
|
|
||||||
this.drawCtrl(this.width / 4 - 10, centreY - circleGapY, "<");
|
this.drawCtrl(this.width / 4 - 10, centreY - circleGapY, "<");
|
||||||
this.drawCtrl(this.width / 2, centreY - circleGapY, "@");
|
this.drawCtrl(this.width / 2, centreY - circleGapY, "@");
|
||||||
|
|
@ -122,82 +122,82 @@
|
||||||
switch (state) {
|
switch (state) {
|
||||||
case State.IgnoreCurrent:
|
case State.IgnoreCurrent:
|
||||||
if(e.b === 0){
|
if(e.b === 0){
|
||||||
state = State.Idle;
|
state = State.Idle;
|
||||||
overlay = undefined;
|
overlay = undefined;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case State.Idle:
|
case State.Idle:
|
||||||
if(e.b && !touchDown){ // no need to check Bangle.CLKINFO_FOCUS
|
if(e.b && !touchDown){ // no need to check Bangle.CLKINFO_FOCUS
|
||||||
if(e.y <= 40){
|
if(e.y <= 40){
|
||||||
state = State.TopDrag
|
state = State.TopDrag
|
||||||
startY = e.y;
|
startY = e.y;
|
||||||
console.log(" topdrag detected, starting @ " + startY);
|
console.log(" topdrag detected, starting @ " + startY);
|
||||||
}else{
|
}else{
|
||||||
console.log(" ignoring this drag (too low @ " + e.y + ")");
|
console.log(" ignoring this drag (too low @ " + e.y + ")");
|
||||||
state = State.IgnoreCurrent;
|
state = State.IgnoreCurrent;
|
||||||
overlay = undefined
|
overlay = undefined
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
break;
|
||||||
break;
|
|
||||||
|
|
||||||
case State.TopDrag:
|
case State.TopDrag:
|
||||||
if(e.b === 0){
|
if(e.b === 0){
|
||||||
console.log("topdrag stopped, distance: " + (e.y - startY));
|
console.log("topdrag stopped, distance: " + (e.y - startY));
|
||||||
if(e.y > startY + dragDistance){
|
if(e.y > startY + dragDistance){
|
||||||
console.log("activating");
|
console.log("activating");
|
||||||
state = State.Active;
|
state = State.Active;
|
||||||
startY = 0;
|
startY = 0;
|
||||||
Bangle.prependListener("touch", onTouch);
|
Bangle.prependListener("touch", onTouch);
|
||||||
Bangle.buzz(20);
|
Bangle.buzz(20);
|
||||||
overlay!.setBottom(g.getHeight());
|
overlay!.setBottom(g.getHeight());
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
console.log("returning to idle");
|
console.log("returning to idle");
|
||||||
state = State.Idle;
|
state = State.Idle;
|
||||||
overlay?.hide();
|
overlay?.hide();
|
||||||
overlay = undefined;
|
overlay = undefined;
|
||||||
}else{
|
}else{
|
||||||
// partial drag, show UI feedback:
|
// partial drag, show UI feedback:
|
||||||
const dragOffset = 32;
|
const dragOffset = 32;
|
||||||
|
|
||||||
if (!overlay) overlay = new Overlay();
|
if (!overlay) overlay = new Overlay();
|
||||||
overlay.setBottom(e.y - dragOffset);
|
overlay.setBottom(e.y - dragOffset);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case State.Active:
|
case State.Active:
|
||||||
console.log("stolen drag handling, do whatever here");
|
console.log("stolen drag handling, do whatever here");
|
||||||
E.stopEventPropagation?.();
|
E.stopEventPropagation?.();
|
||||||
if(e.b){
|
if(e.b){
|
||||||
if(!touchDown){
|
if(!touchDown){
|
||||||
startY = e.y;
|
startY = e.y;
|
||||||
}else if(startY){
|
}else if(startY){
|
||||||
const dist = Math.max(0, startY - e.y);
|
const dist = Math.max(0, startY - e.y);
|
||||||
|
|
||||||
if (startedUpDrag || (startedUpDrag = dist > 10)) // ignore small drags
|
if (startedUpDrag || (startedUpDrag = dist > 10)) // ignore small drags
|
||||||
overlay!.setBottom(g.getHeight() - dist);
|
overlay!.setBottom(g.getHeight() - dist);
|
||||||
}
|
|
||||||
}else if(e.b === 0 && startY > dragDistance){
|
|
||||||
let bottom = g.getHeight() - Math.max(0, startY - e.y);
|
|
||||||
|
|
||||||
if (upDragAnim) clearInterval(upDragAnim);
|
|
||||||
upDragAnim = setInterval(() => {
|
|
||||||
if (!overlay || bottom <= 0) {
|
|
||||||
clearInterval(upDragAnim!);
|
|
||||||
upDragAnim = undefined;
|
|
||||||
overlay?.hide();
|
|
||||||
overlay = undefined;
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
overlay?.setBottom(bottom);
|
}else if(e.b === 0 && startY > dragDistance){
|
||||||
bottom -= 10;
|
let bottom = g.getHeight() - Math.max(0, startY - e.y);
|
||||||
}, 50)
|
|
||||||
|
|
||||||
Bangle.removeListener("touch", onTouch);
|
if (upDragAnim) clearInterval(upDragAnim);
|
||||||
state = State.Idle;
|
upDragAnim = setInterval(() => {
|
||||||
}
|
if (!overlay || bottom <= 0) {
|
||||||
break;
|
clearInterval(upDragAnim!);
|
||||||
|
upDragAnim = undefined;
|
||||||
|
overlay?.hide();
|
||||||
|
overlay = undefined;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
overlay?.setBottom(bottom);
|
||||||
|
bottom -= 10;
|
||||||
|
}, 50)
|
||||||
|
|
||||||
|
Bangle.removeListener("touch", onTouch);
|
||||||
|
state = State.Idle;
|
||||||
|
}
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
if(e.b) touchDown = true;
|
if(e.b) touchDown = true;
|
||||||
}) satisfies DragCallback;
|
}) satisfies DragCallback;
|
||||||
|
|
@ -212,7 +212,7 @@
|
||||||
area: "tr",
|
area: "tr",
|
||||||
sortorder: -20,
|
sortorder: -20,
|
||||||
draw: () => {},
|
draw: () => {},
|
||||||
width: 0,
|
width: 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
//const DEBUG = true;
|
//const DEBUG = true;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue