2017-01-03 15:43:40 +00:00
|
|
|
|
"use strict";
|
2017-01-03 01:42:15 +00:00
|
|
|
|
|
2018-09-21 12:39:15 +00:00
|
|
|
|
import { hex, clamp } from "./util";
|
2018-08-16 23:19:20 +00:00
|
|
|
|
|
2018-07-11 00:58:46 +00:00
|
|
|
|
// external modules
|
2019-05-17 03:44:19 +00:00
|
|
|
|
declare var jt, Javatari;
|
2019-04-03 14:00:37 +00:00
|
|
|
|
declare var Mousetrap;
|
2018-07-11 00:58:46 +00:00
|
|
|
|
|
2017-01-03 01:42:15 +00:00
|
|
|
|
// Emulator classes
|
|
|
|
|
|
2018-08-16 23:19:20 +00:00
|
|
|
|
export var PLATFORMS = {};
|
2017-01-14 05:47:26 +00:00
|
|
|
|
|
2018-08-23 20:02:13 +00:00
|
|
|
|
var _random_state = 1;
|
|
|
|
|
|
2018-08-16 23:19:20 +00:00
|
|
|
|
export function noise() {
|
2018-08-23 20:02:13 +00:00
|
|
|
|
let x = _random_state;
|
|
|
|
|
x ^= x << 13;
|
|
|
|
|
x ^= x >> 17;
|
|
|
|
|
x ^= x << 5;
|
|
|
|
|
return (_random_state = x) & 0xff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function getNoiseSeed() {
|
|
|
|
|
return _random_state;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function setNoiseSeed(x : number) {
|
|
|
|
|
_random_state = x;
|
2017-01-14 02:31:04 +00:00
|
|
|
|
}
|
|
|
|
|
|
2018-12-09 12:44:39 +00:00
|
|
|
|
type KeyboardCallback = (which:number, charCode:number, flags:KeyFlags) => void;
|
2018-08-18 13:52:17 +00:00
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
function __createCanvas(mainElement:HTMLElement, width:number, height:number) : HTMLCanvasElement {
|
2017-01-04 21:07:59 +00:00
|
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
|
canvas.width = width;
|
|
|
|
|
canvas.height = height;
|
2017-04-22 19:02:34 +00:00
|
|
|
|
canvas.classList.add("emuvideo");
|
2018-07-11 00:58:46 +00:00
|
|
|
|
canvas.tabIndex = -1; // Make it focusable
|
2018-08-24 03:58:35 +00:00
|
|
|
|
mainElement.appendChild(canvas);
|
2017-01-04 21:07:59 +00:00
|
|
|
|
return canvas;
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-09 12:44:39 +00:00
|
|
|
|
export enum KeyFlags {
|
|
|
|
|
KeyDown = 1,
|
|
|
|
|
Shift = 2,
|
|
|
|
|
Ctrl = 4,
|
|
|
|
|
Alt = 8,
|
|
|
|
|
Meta = 16,
|
|
|
|
|
KeyUp = 64,
|
|
|
|
|
KeyPress = 128,
|
|
|
|
|
}
|
|
|
|
|
|
2019-08-21 01:34:01 +00:00
|
|
|
|
export function _setKeyboardEvents(canvas:HTMLElement, callback:KeyboardCallback) {
|
2019-06-07 17:03:30 +00:00
|
|
|
|
canvas.onkeydown = (e) => {
|
2018-12-09 12:44:39 +00:00
|
|
|
|
callback(e.which, 0, KeyFlags.KeyDown|_metakeyflags(e));
|
2019-09-08 23:36:59 +00:00
|
|
|
|
if (e.which == 8 || e.which == 9 || e.which == 27) { // eat backspace, tab, escape keys
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
}
|
2018-08-18 13:52:17 +00:00
|
|
|
|
};
|
2019-06-07 17:03:30 +00:00
|
|
|
|
canvas.onkeyup = (e) => {
|
2018-12-09 12:44:39 +00:00
|
|
|
|
callback(e.which, 0, KeyFlags.KeyUp|_metakeyflags(e));
|
2018-08-18 13:52:17 +00:00
|
|
|
|
};
|
2019-06-07 17:03:30 +00:00
|
|
|
|
canvas.onkeypress = (e) => {
|
2018-12-09 12:44:39 +00:00
|
|
|
|
callback(e.which, e.charCode, KeyFlags.KeyPress|_metakeyflags(e));
|
2018-08-18 13:52:17 +00:00
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
2018-11-24 18:44:07 +00:00
|
|
|
|
type VideoCanvasOptions = {rotate?:number, overscan?:boolean};
|
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
export class RasterVideo {
|
|
|
|
|
|
|
|
|
|
mainElement : HTMLElement;
|
|
|
|
|
width : number;
|
|
|
|
|
height : number;
|
|
|
|
|
options : VideoCanvasOptions;
|
|
|
|
|
|
|
|
|
|
constructor(mainElement:HTMLElement, width:number, height:number, options?:VideoCanvasOptions) {
|
|
|
|
|
this.mainElement = mainElement;
|
|
|
|
|
this.width = width;
|
|
|
|
|
this.height = height;
|
|
|
|
|
this.options = options;
|
|
|
|
|
}
|
2018-09-21 12:39:15 +00:00
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
canvas : HTMLCanvasElement;
|
|
|
|
|
ctx;
|
|
|
|
|
imageData;
|
|
|
|
|
arraybuf;
|
|
|
|
|
buf8;
|
|
|
|
|
datau32;
|
2019-05-02 02:07:17 +00:00
|
|
|
|
vcanvas : JQuery;
|
2018-10-03 19:06:48 +00:00
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
paddle_x = 255;
|
|
|
|
|
paddle_y = 255;
|
|
|
|
|
|
|
|
|
|
setRotate(rotate:number) {
|
|
|
|
|
var canvas = this.canvas;
|
2018-02-14 01:04:52 +00:00
|
|
|
|
if (rotate) {
|
2017-01-17 17:26:08 +00:00
|
|
|
|
// TODO: aspect ratio?
|
2018-02-14 01:04:52 +00:00
|
|
|
|
canvas.style.transform = "rotate("+rotate+"deg)";
|
2017-04-22 19:02:34 +00:00
|
|
|
|
if (canvas.width < canvas.height)
|
2017-01-20 03:42:58 +00:00
|
|
|
|
canvas.style.paddingLeft = canvas.style.paddingRight = "10%";
|
2018-02-14 01:04:52 +00:00
|
|
|
|
} else {
|
|
|
|
|
canvas.style.transform = null;
|
|
|
|
|
canvas.style.paddingLeft = canvas.style.paddingRight = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
create() {
|
|
|
|
|
var canvas;
|
|
|
|
|
this.canvas = canvas = __createCanvas(this.mainElement, this.width, this.height);
|
|
|
|
|
this.vcanvas = $(canvas);
|
|
|
|
|
if (this.options && this.options.rotate) {
|
|
|
|
|
this.setRotate(this.options.rotate);
|
2017-01-14 02:31:04 +00:00
|
|
|
|
}
|
2018-12-03 15:51:47 +00:00
|
|
|
|
if (this.options && this.options.overscan) {
|
|
|
|
|
this.vcanvas.css('padding','0px');
|
2018-11-24 18:44:07 +00:00
|
|
|
|
}
|
2018-12-03 15:51:47 +00:00
|
|
|
|
this.ctx = canvas.getContext('2d');
|
|
|
|
|
this.imageData = this.ctx.createImageData(this.width, this.height);
|
|
|
|
|
this.datau32 = new Uint32Array(this.imageData.data.buffer);
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
setKeyboardEvents(callback) {
|
|
|
|
|
_setKeyboardEvents(this.canvas, callback);
|
2018-08-18 13:52:17 +00:00
|
|
|
|
}
|
2017-01-06 14:49:07 +00:00
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
getFrameData() { return this.datau32; }
|
2017-11-14 14:33:15 +00:00
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
getContext() { return this.ctx; }
|
2017-01-03 01:42:15 +00:00
|
|
|
|
|
2019-08-22 02:55:32 +00:00
|
|
|
|
updateFrame(sx?:number, sy?:number, dx?:number, dy?:number, w?:number, h?:number) {
|
2018-12-03 15:51:47 +00:00
|
|
|
|
if (w && h)
|
|
|
|
|
this.ctx.putImageData(this.imageData, sx, sy, dx, dy, w, h);
|
2017-01-17 17:26:08 +00:00
|
|
|
|
else
|
2018-12-03 15:51:47 +00:00
|
|
|
|
this.ctx.putImageData(this.imageData, 0, 0);
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
2018-09-21 12:39:15 +00:00
|
|
|
|
|
2019-05-28 01:52:00 +00:00
|
|
|
|
clearRect(dx:number, dy:number, w:number, h:number) {
|
|
|
|
|
var ctx = this.ctx;
|
|
|
|
|
ctx.fillStyle = '#000000';
|
|
|
|
|
ctx.fillRect(dx, dy, w, h);
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-02 02:07:17 +00:00
|
|
|
|
setupMouseEvents(el? : HTMLCanvasElement) {
|
2018-12-03 15:51:47 +00:00
|
|
|
|
if (!el) el = this.canvas;
|
2019-05-02 02:07:17 +00:00
|
|
|
|
$(el).mousemove( (e) => {
|
|
|
|
|
var pos = getMousePos(el, e);
|
|
|
|
|
var new_x = Math.floor(pos.x * 255 / this.canvas.width);
|
|
|
|
|
var new_y = Math.floor(pos.y * 255 / this.canvas.height);
|
|
|
|
|
this.paddle_x = clamp(0, 255, new_x);
|
|
|
|
|
this.paddle_y = clamp(0, 255, new_y);
|
|
|
|
|
});
|
2018-09-21 12:39:15 +00:00
|
|
|
|
};
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
export class VectorVideo extends RasterVideo {
|
2017-01-03 01:42:15 +00:00
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
persistenceAlpha = 0.5;
|
|
|
|
|
jitter = 1.0;
|
|
|
|
|
gamma = 0.8;
|
|
|
|
|
sx : number;
|
|
|
|
|
sy : number;
|
|
|
|
|
|
|
|
|
|
create() {
|
|
|
|
|
super.create();
|
|
|
|
|
this.sx = this.width/1024.0;
|
|
|
|
|
this.sy = this.height/1024.0;
|
2018-08-18 13:52:17 +00:00
|
|
|
|
}
|
2017-01-03 01:42:15 +00:00
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
clear() {
|
|
|
|
|
var ctx = this.ctx;
|
2017-01-03 01:42:15 +00:00
|
|
|
|
ctx.globalCompositeOperation = 'source-over';
|
2018-12-03 15:51:47 +00:00
|
|
|
|
ctx.globalAlpha = this.persistenceAlpha;
|
2017-01-03 01:42:15 +00:00
|
|
|
|
ctx.fillStyle = '#000000';
|
2018-12-03 15:51:47 +00:00
|
|
|
|
ctx.fillRect(0, 0, this.width, this.height);
|
2017-01-03 01:42:15 +00:00
|
|
|
|
ctx.globalAlpha = 1.0;
|
|
|
|
|
ctx.globalCompositeOperation = 'lighter';
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
COLORS = [
|
2017-02-12 06:07:35 +00:00
|
|
|
|
'#111111',
|
|
|
|
|
'#1111ff',
|
|
|
|
|
'#11ff11',
|
|
|
|
|
'#11ffff',
|
|
|
|
|
'#ff1111',
|
|
|
|
|
'#ff11ff',
|
|
|
|
|
'#ffff11',
|
2017-02-05 04:19:54 +00:00
|
|
|
|
'#ffffff'
|
|
|
|
|
];
|
|
|
|
|
|
2018-12-03 15:51:47 +00:00
|
|
|
|
drawLine(x1:number, y1:number, x2:number, y2:number, intensity:number, color:number) {
|
|
|
|
|
var ctx = this.ctx;
|
|
|
|
|
var sx = this.sx;
|
|
|
|
|
var sy = this.sy;
|
2018-08-18 13:52:17 +00:00
|
|
|
|
//console.log(x1,y1,x2,y2,intensity,color);
|
2017-01-03 01:42:15 +00:00
|
|
|
|
if (intensity > 0) {
|
|
|
|
|
// TODO: landscape vs portrait
|
2018-12-03 15:51:47 +00:00
|
|
|
|
var alpha = Math.pow(intensity / 255.0, this.gamma);
|
2017-02-12 06:07:35 +00:00
|
|
|
|
ctx.globalAlpha = alpha;
|
2020-06-09 22:32:29 +00:00
|
|
|
|
ctx.lineWidth = 3;
|
2017-01-03 01:42:15 +00:00
|
|
|
|
ctx.beginPath();
|
2017-02-05 04:19:54 +00:00
|
|
|
|
// TODO: bright dots
|
2018-12-03 15:51:47 +00:00
|
|
|
|
var jx = this.jitter * (Math.random() - 0.5);
|
|
|
|
|
var jy = this.jitter * (Math.random() - 0.5);
|
2017-01-03 01:42:15 +00:00
|
|
|
|
x1 += jx;
|
|
|
|
|
x2 += jx;
|
|
|
|
|
y1 += jy;
|
|
|
|
|
y2 += jy;
|
2018-12-03 15:51:47 +00:00
|
|
|
|
ctx.moveTo(x1*sx, this.height-y1*sy);
|
2017-02-12 06:07:35 +00:00
|
|
|
|
if (x1 == x2 && y1 == y2)
|
2018-12-03 15:51:47 +00:00
|
|
|
|
ctx.lineTo(x2*sx+1, this.height-y2*sy);
|
2017-02-12 06:07:35 +00:00
|
|
|
|
else
|
2018-12-03 15:51:47 +00:00
|
|
|
|
ctx.lineTo(x2*sx, this.height-y2*sy);
|
|
|
|
|
ctx.strokeStyle = this.COLORS[color & 7];
|
2017-01-03 01:42:15 +00:00
|
|
|
|
ctx.stroke();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-16 23:19:20 +00:00
|
|
|
|
export class RAM {
|
|
|
|
|
mem : Uint8Array;
|
|
|
|
|
constructor(size:number) {
|
|
|
|
|
this.mem = new Uint8Array(new ArrayBuffer(size));
|
|
|
|
|
}
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
|
|
|
|
|
2019-03-21 00:45:03 +00:00
|
|
|
|
export class EmuHalt extends Error {
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-05 02:08:46 +00:00
|
|
|
|
export class AnimationTimer {
|
|
|
|
|
|
|
|
|
|
callback;
|
|
|
|
|
running : boolean = false;
|
|
|
|
|
pulsing : boolean = false;
|
|
|
|
|
lastts = 0;
|
|
|
|
|
useReqAnimFrame = false; //TODO window.requestAnimationFrame ? (frequencyHz>40) : false;
|
|
|
|
|
nframes;
|
|
|
|
|
startts; // for FPS calc
|
|
|
|
|
frameRate;
|
|
|
|
|
intervalMsec;
|
|
|
|
|
|
|
|
|
|
constructor(frequencyHz:number, callback:() => void) {
|
|
|
|
|
this.frameRate = frequencyHz;
|
|
|
|
|
this.intervalMsec = 1000.0 / frequencyHz;
|
|
|
|
|
this.callback = callback;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
scheduleFrame(msec:number) {
|
2019-03-21 00:45:03 +00:00
|
|
|
|
var fn = () => {
|
|
|
|
|
try {
|
|
|
|
|
this.nextFrame();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
this.running = false;
|
|
|
|
|
this.pulsing = false;
|
2019-12-01 17:47:42 +00:00
|
|
|
|
throw e;
|
2019-03-21 00:45:03 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
2018-12-05 02:08:46 +00:00
|
|
|
|
if (this.useReqAnimFrame)
|
2018-12-05 13:33:40 +00:00
|
|
|
|
window.requestAnimationFrame(fn);
|
2017-01-03 01:42:15 +00:00
|
|
|
|
else
|
2018-12-05 13:33:40 +00:00
|
|
|
|
setTimeout(fn, msec);
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
2018-12-05 02:08:46 +00:00
|
|
|
|
|
2018-12-05 13:33:40 +00:00
|
|
|
|
nextFrame(ts?:number) {
|
2018-08-16 14:13:09 +00:00
|
|
|
|
if (!ts) ts = Date.now();
|
2018-12-05 02:08:46 +00:00
|
|
|
|
if (ts - this.lastts < this.intervalMsec*10) {
|
|
|
|
|
this.lastts += this.intervalMsec;
|
2018-08-16 14:13:09 +00:00
|
|
|
|
} else {
|
2018-12-05 02:08:46 +00:00
|
|
|
|
this.lastts = ts + this.intervalMsec; // frames skipped, catch up
|
2018-08-16 14:13:09 +00:00
|
|
|
|
}
|
2018-12-05 02:08:46 +00:00
|
|
|
|
if (!this.useReqAnimFrame || this.lastts - ts > this.intervalMsec/2) {
|
|
|
|
|
if (this.running) {
|
|
|
|
|
this.callback();
|
2017-11-18 00:40:44 +00:00
|
|
|
|
}
|
2018-12-05 02:08:46 +00:00
|
|
|
|
if (this.nframes == 0)
|
|
|
|
|
this.startts = ts;
|
|
|
|
|
if (this.nframes++ == 300) {
|
|
|
|
|
console.log("Avg framerate: " + this.nframes*1000/(ts-this.startts) + " fps");
|
2017-05-10 11:57:06 +00:00
|
|
|
|
}
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
2018-12-05 02:08:46 +00:00
|
|
|
|
if (this.running) {
|
|
|
|
|
this.scheduleFrame(this.lastts - ts);
|
2018-08-26 01:03:29 +00:00
|
|
|
|
} else {
|
2018-12-05 02:08:46 +00:00
|
|
|
|
this.pulsing = false;
|
2018-08-26 01:03:29 +00:00
|
|
|
|
}
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
2018-12-05 02:08:46 +00:00
|
|
|
|
isRunning() {
|
|
|
|
|
return this.running;
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
2018-12-05 02:08:46 +00:00
|
|
|
|
start() {
|
|
|
|
|
if (!this.running) {
|
|
|
|
|
this.running = true;
|
|
|
|
|
this.lastts = 0;
|
|
|
|
|
this.nframes = 0;
|
|
|
|
|
if (!this.pulsing) {
|
|
|
|
|
this.scheduleFrame(0);
|
|
|
|
|
this.pulsing = true;
|
2018-08-25 22:01:51 +00:00
|
|
|
|
}
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
2018-12-05 02:08:46 +00:00
|
|
|
|
stop() {
|
|
|
|
|
this.running = false;
|
2017-01-03 01:42:15 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-27 13:28:31 +00:00
|
|
|
|
// TODO: move to util?
|
2017-01-04 21:07:59 +00:00
|
|
|
|
|
2020-07-09 12:03:09 +00:00
|
|
|
|
export function dumpRAM(ram:ArrayLike<number>, ramofs:number, ramlen:number) : string {
|
2017-01-14 02:31:04 +00:00
|
|
|
|
var s = "";
|
2020-07-09 12:03:09 +00:00
|
|
|
|
var bpel = ram['BYTES_PER_ELEMENT'] || 1;
|
|
|
|
|
var perline = Math.ceil(16 / bpel);
|
2017-01-14 02:31:04 +00:00
|
|
|
|
// TODO: show scrollable RAM for other platforms
|
2020-07-09 12:03:09 +00:00
|
|
|
|
for (var ofs=0; ofs<ramlen; ofs+=perline) {
|
2017-01-14 02:31:04 +00:00
|
|
|
|
s += '$' + hex(ofs+ramofs) + ':';
|
2020-07-09 12:03:09 +00:00
|
|
|
|
for (var i=0; i<perline; i++) {
|
2017-01-14 02:31:04 +00:00
|
|
|
|
if (ofs+i < ram.length) {
|
2020-07-09 12:03:09 +00:00
|
|
|
|
if (i == perline/2) s += " ";
|
|
|
|
|
s += " " + hex(ram[ofs+i], bpel*2);
|
2017-01-14 02:31:04 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
s += "\n";
|
|
|
|
|
}
|
|
|
|
|
return s;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-26 01:55:50 +00:00
|
|
|
|
export interface KeyDef {
|
2019-06-07 13:45:30 +00:00
|
|
|
|
c:number, // key code
|
|
|
|
|
n:string, // name
|
|
|
|
|
// for gamepad
|
|
|
|
|
plyr?:number,
|
|
|
|
|
xaxis?:number,
|
|
|
|
|
yaxis?:number,
|
|
|
|
|
button?:number
|
|
|
|
|
};
|
2019-05-16 17:04:27 +00:00
|
|
|
|
|
2019-10-26 01:55:50 +00:00
|
|
|
|
export interface KeyMapEntry {
|
2019-06-07 17:03:30 +00:00
|
|
|
|
index:number;
|
|
|
|
|
mask:number;
|
|
|
|
|
def:KeyDef;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type KeyCodeMap = Map<number,KeyMapEntry>;
|
|
|
|
|
|
2019-08-17 18:12:14 +00:00
|
|
|
|
export const Keys = {
|
|
|
|
|
ANYKEY: {c: 0, n: "?"},
|
2019-06-07 13:45:30 +00:00
|
|
|
|
// gamepad and keyboard (player 0)
|
|
|
|
|
UP: {c: 38, n: "Up", plyr:0, yaxis:-1},
|
|
|
|
|
DOWN: {c: 40, n: "Down", plyr:0, yaxis:1},
|
|
|
|
|
LEFT: {c: 37, n: "Left", plyr:0, xaxis:-1},
|
|
|
|
|
RIGHT: {c: 39, n: "Right", plyr:0, xaxis:1},
|
2019-06-07 17:03:30 +00:00
|
|
|
|
A: {c: 32, n: "Space", plyr:0, button:0},
|
2019-07-06 00:42:14 +00:00
|
|
|
|
B: {c: 16, n: "Shift", plyr:0, button:1},
|
2019-06-07 17:03:30 +00:00
|
|
|
|
GP_A: {c: 88, n: "X", plyr:0, button:0},
|
|
|
|
|
GP_B: {c: 90, n: "Z", plyr:0, button:1},
|
2020-06-09 22:32:29 +00:00
|
|
|
|
GP_C: {c: 86, n: "V", plyr:0, button:2},
|
|
|
|
|
GP_D: {c: 67, n: "C", plyr:0, button:3},
|
2019-06-07 13:45:30 +00:00
|
|
|
|
SELECT: {c: 220, n: "\\", plyr:0, button:8},
|
|
|
|
|
START: {c: 13, n: "Enter", plyr:0, button:9},
|
|
|
|
|
// gamepad and keyboard (player 1)
|
|
|
|
|
P2_UP: {c: 87, n: "W", plyr:1, yaxis:-1},
|
|
|
|
|
P2_DOWN: {c: 83, n: "S", plyr:1, yaxis:1},
|
|
|
|
|
P2_LEFT: {c: 65, n: "A", plyr:1, xaxis:-1},
|
|
|
|
|
P2_RIGHT: {c: 68, n: "D", plyr:1, xaxis:1},
|
2019-06-07 17:03:30 +00:00
|
|
|
|
P2_A: {c: 84, n: "T", plyr:1, button:0},
|
|
|
|
|
P2_B: {c: 82, n: "R", plyr:1, button:1},
|
2020-06-09 22:32:29 +00:00
|
|
|
|
P2_GP_A: {c: 69, n: "E", plyr:1, button:0},
|
|
|
|
|
P2_GP_B: {c: 82, n: "R", plyr:1, button:1},
|
|
|
|
|
P2_GP_C: {c: 84, n: "T", plyr:1, button:2},
|
|
|
|
|
P2_GP_D: {c: 89, n: "Y", plyr:1, button:3},
|
2019-06-07 13:45:30 +00:00
|
|
|
|
P2_SELECT: {c: 70, n: "F", plyr:1, button:8},
|
|
|
|
|
P2_START: {c: 71, n: "G", plyr:1, button:9},
|
|
|
|
|
// keyboard only
|
2017-01-20 03:42:58 +00:00
|
|
|
|
VK_ESCAPE: {c: 27, n: "Esc"},
|
|
|
|
|
VK_F1: {c: 112, n: "F1"},
|
|
|
|
|
VK_F2: {c: 113, n: "F2"},
|
|
|
|
|
VK_F3: {c: 114, n: "F3"},
|
|
|
|
|
VK_F4: {c: 115, n: "F4"},
|
|
|
|
|
VK_F5: {c: 116, n: "F5"},
|
|
|
|
|
VK_F6: {c: 117, n: "F6"},
|
|
|
|
|
VK_F7: {c: 118, n: "F7"},
|
|
|
|
|
VK_F8: {c: 119, n: "F8"},
|
|
|
|
|
VK_F9: {c: 120, n: "F9"},
|
|
|
|
|
VK_F10: {c: 121, n: "F10"},
|
|
|
|
|
VK_F11: {c: 122, n: "F11"},
|
|
|
|
|
VK_F12: {c: 123, n: "F12"},
|
|
|
|
|
VK_SCROLL_LOCK: {c: 145, n: "ScrLck"},
|
|
|
|
|
VK_PAUSE: {c: 19, n: "Pause"},
|
|
|
|
|
VK_QUOTE: {c: 192, n: "'"},
|
|
|
|
|
VK_1: {c: 49, n: "1"},
|
|
|
|
|
VK_2: {c: 50, n: "2"},
|
|
|
|
|
VK_3: {c: 51, n: "3"},
|
|
|
|
|
VK_4: {c: 52, n: "4"},
|
|
|
|
|
VK_5: {c: 53, n: "5"},
|
|
|
|
|
VK_6: {c: 54, n: "6"},
|
|
|
|
|
VK_7: {c: 55, n: "7"},
|
|
|
|
|
VK_8: {c: 56, n: "8"},
|
|
|
|
|
VK_9: {c: 57, n: "9"},
|
|
|
|
|
VK_0: {c: 48, n: "0"},
|
|
|
|
|
VK_MINUS: {c: 189, n: "-"},
|
|
|
|
|
VK_MINUS2: {c: 173, n: "-"},
|
|
|
|
|
VK_EQUALS: {c: 187, n: "="},
|
|
|
|
|
VK_EQUALS2: {c: 61, n: "="},
|
|
|
|
|
VK_BACK_SPACE: {c: 8, n: "Bkspc"},
|
|
|
|
|
VK_TAB: {c: 9, n: "Tab"},
|
|
|
|
|
VK_Q: {c: 81, n: "Q"},
|
|
|
|
|
VK_W: {c: 87, n: "W"},
|
|
|
|
|
VK_E: {c: 69, n: "E"},
|
|
|
|
|
VK_R: {c: 82, n: "R"},
|
|
|
|
|
VK_T: {c: 84, n: "T"},
|
|
|
|
|
VK_Y: {c: 89, n: "Y"},
|
|
|
|
|
VK_U: {c: 85, n: "U"},
|
|
|
|
|
VK_I: {c: 73, n: "I"},
|
|
|
|
|
VK_O: {c: 79, n: "O"},
|
|
|
|
|
VK_P: {c: 80, n: "P"},
|
|
|
|
|
VK_ACUTE: {c: 219, n: "´"},
|
|
|
|
|
VK_OPEN_BRACKET: {c: 221, n: "["},
|
|
|
|
|
VK_CLOSE_BRACKET: {c: 220, n: "]"},
|
|
|
|
|
VK_CAPS_LOCK: {c: 20, n: "CpsLck"},
|
|
|
|
|
VK_A: {c: 65, n: "A"},
|
|
|
|
|
VK_S: {c: 83, n: "S"},
|
|
|
|
|
VK_D: {c: 68, n: "D"},
|
|
|
|
|
VK_F: {c: 70, n: "F"},
|
|
|
|
|
VK_G: {c: 71, n: "G"},
|
|
|
|
|
VK_H: {c: 72, n: "H"},
|
|
|
|
|
VK_J: {c: 74, n: "J"},
|
|
|
|
|
VK_K: {c: 75, n: "K"},
|
|
|
|
|
VK_L: {c: 76, n: "L"},
|
|
|
|
|
VK_CEDILLA: {c: 186, n: "Ç"},
|
|
|
|
|
VK_TILDE: {c: 222, n: "~"},
|
|
|
|
|
VK_ENTER: {c: 13, n: "Enter"},
|
|
|
|
|
VK_SHIFT: {c: 16, n: "Shift"},
|
|
|
|
|
VK_BACK_SLASH: {c: 226, n: "\\"},
|
|
|
|
|
VK_Z: {c: 90, n: "Z"},
|
|
|
|
|
VK_X: {c: 88, n: "X"},
|
|
|
|
|
VK_C: {c: 67, n: "C"},
|
|
|
|
|
VK_V: {c: 86, n: "V"},
|
|
|
|
|
VK_B: {c: 66, n: "B"},
|
|
|
|
|
VK_N: {c: 78, n: "N"},
|
|
|
|
|
VK_M: {c: 77, n: "M"},
|
|
|
|
|
VK_COMMA: {c: 188, n: "] ="},
|
|
|
|
|
VK_PERIOD: {c: 190, n: "."},
|
|
|
|
|
VK_SEMICOLON: {c: 191, n: ";"},
|
|
|
|
|
VK_SLASH: {c: 193, n: "/"},
|
|
|
|
|
VK_CONTROL: {c: 17, n: "Ctrl"},
|
|
|
|
|
VK_ALT: {c: 18, n: "Alt"},
|
|
|
|
|
VK_SPACE: {c: 32, n: "Space"},
|
|
|
|
|
VK_INSERT: {c: 45, n: "Ins"},
|
|
|
|
|
VK_DELETE: {c: 46, n: "Del"},
|
|
|
|
|
VK_HOME: {c: 36, n: "Home"},
|
|
|
|
|
VK_END: {c: 35, n: "End"},
|
|
|
|
|
VK_PAGE_UP: {c: 33, n: "PgUp"},
|
|
|
|
|
VK_PAGE_DOWN: {c: 34, n: "PgDown"},
|
|
|
|
|
VK_UP: {c: 38, n: "Up"},
|
|
|
|
|
VK_DOWN: {c: 40, n: "Down"},
|
|
|
|
|
VK_LEFT: {c: 37, n: "Left"},
|
|
|
|
|
VK_RIGHT: {c: 39, n: "Right"},
|
|
|
|
|
VK_NUM_LOCK: {c: 144, n: "Num"},
|
|
|
|
|
VK_DIVIDE: {c: 111, n: "Num /"},
|
|
|
|
|
VK_MULTIPLY: {c: 106, n: "Num *"},
|
|
|
|
|
VK_SUBTRACT: {c: 109, n: "Num -"},
|
|
|
|
|
VK_ADD: {c: 107, n: "Num +"},
|
|
|
|
|
VK_DECIMAL: {c: 194, n: "Num ."},
|
|
|
|
|
VK_NUMPAD0: {c: 96, n: "Num 0"},
|
|
|
|
|
VK_NUMPAD1: {c: 97, n: "Num 1"},
|
|
|
|
|
VK_NUMPAD2: {c: 98, n: "Num 2"},
|
|
|
|
|
VK_NUMPAD3: {c: 99, n: "Num 3"},
|
|
|
|
|
VK_NUMPAD4: {c: 100, n: "Num 4"},
|
|
|
|
|
VK_NUMPAD5: {c: 101, n: "Num 5"},
|
|
|
|
|
VK_NUMPAD6: {c: 102, n: "Num 6"},
|
|
|
|
|
VK_NUMPAD7: {c: 103, n: "Num 7"},
|
|
|
|
|
VK_NUMPAD8: {c: 104, n: "Num 8"},
|
|
|
|
|
VK_NUMPAD9: {c: 105, n: "Num 9"},
|
|
|
|
|
VK_NUMPAD_CENTER: {c: 12, n: "Num Cntr"}
|
|
|
|
|
};
|
|
|
|
|
|
2017-01-21 13:13:36 +00:00
|
|
|
|
function _metakeyflags(e) {
|
2018-12-09 12:44:39 +00:00
|
|
|
|
return (e.shiftKey?KeyFlags.Shift:0) |
|
|
|
|
|
(e.ctrlKey?KeyFlags.Ctrl:0) |
|
|
|
|
|
(e.altKey?KeyFlags.Alt:0) |
|
|
|
|
|
(e.metaKey?KeyFlags.Meta:0);
|
2017-01-21 13:13:36 +00:00
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 17:03:30 +00:00
|
|
|
|
type KeyMapFunction = (o:KeyMapEntry, key:number, code:number, flags:number) => void;
|
|
|
|
|
|
2019-08-29 02:04:02 +00:00
|
|
|
|
export function newKeyboardHandler(switches:number[]|Uint8Array, map:KeyCodeMap, func?:KeyMapFunction, alwaysfunc?:boolean) {
|
2019-08-23 19:05:12 +00:00
|
|
|
|
return (key:number,code:number,flags:number) => {
|
2019-08-17 18:12:14 +00:00
|
|
|
|
if (!map) {
|
|
|
|
|
func(null, key, code, flags);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2019-06-07 17:03:30 +00:00
|
|
|
|
var o : KeyMapEntry = map[key];
|
2019-08-17 18:12:14 +00:00
|
|
|
|
if (!o) o = map[0];
|
2019-08-29 02:04:02 +00:00
|
|
|
|
if (func && (o || alwaysfunc)) {
|
2017-01-21 13:13:36 +00:00
|
|
|
|
func(o, key, code, flags);
|
|
|
|
|
}
|
|
|
|
|
if (o) {
|
|
|
|
|
//console.log(key,code,flags,o);
|
|
|
|
|
var mask = o.mask;
|
|
|
|
|
if (mask < 0) { // negative mask == active low
|
|
|
|
|
mask = -mask;
|
2018-12-09 15:11:14 +00:00
|
|
|
|
if (flags & (KeyFlags.KeyDown | KeyFlags.KeyUp))
|
|
|
|
|
flags ^= KeyFlags.KeyDown | KeyFlags.KeyUp;
|
2017-01-21 13:13:36 +00:00
|
|
|
|
}
|
2018-12-09 12:44:39 +00:00
|
|
|
|
if (flags & KeyFlags.KeyDown) {
|
2017-01-21 13:13:36 +00:00
|
|
|
|
switches[o.index] |= mask;
|
2018-12-09 12:44:39 +00:00
|
|
|
|
} else if (flags & KeyFlags.KeyUp) {
|
2017-01-21 13:13:36 +00:00
|
|
|
|
switches[o.index] &= ~mask;
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-06-07 17:03:30 +00:00
|
|
|
|
};
|
2019-08-23 19:05:12 +00:00
|
|
|
|
}
|
|
|
|
|
|
2019-08-29 02:04:02 +00:00
|
|
|
|
export function setKeyboardFromMap(video:RasterVideo, switches:number[]|Uint8Array, map:KeyCodeMap, func?:KeyMapFunction, alwaysfunc?:boolean) {
|
|
|
|
|
var handler = newKeyboardHandler(switches, map, func, alwaysfunc);
|
2019-06-07 17:03:30 +00:00
|
|
|
|
video.setKeyboardEvents(handler);
|
2019-08-23 22:34:40 +00:00
|
|
|
|
return new ControllerPoller(handler);
|
2017-01-21 13:13:36 +00:00
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 17:03:30 +00:00
|
|
|
|
export function makeKeycodeMap(table : [KeyDef,number,number][]) : KeyCodeMap {
|
|
|
|
|
var map = new Map<number,KeyMapEntry>();
|
2017-01-20 03:42:58 +00:00
|
|
|
|
for (var i=0; i<table.length; i++) {
|
|
|
|
|
var entry = table[i];
|
2019-06-07 17:03:30 +00:00
|
|
|
|
var val : KeyMapEntry = {index:entry[1], mask:entry[2], def:entry[0]};
|
|
|
|
|
map[entry[0].c] = val;
|
2017-01-20 03:42:58 +00:00
|
|
|
|
}
|
|
|
|
|
return map;
|
|
|
|
|
}
|
|
|
|
|
|
2019-08-23 22:34:40 +00:00
|
|
|
|
const DEFAULT_CONTROLLER_KEYS : KeyDef[] = [
|
|
|
|
|
Keys.UP, Keys.DOWN, Keys.LEFT, Keys.RIGHT, Keys.A, Keys.B, Keys.SELECT, Keys.START,
|
|
|
|
|
Keys.P2_UP, Keys.P2_DOWN, Keys.P2_LEFT, Keys.P2_RIGHT, Keys.P2_A, Keys.P2_B, Keys.P2_SELECT, Keys.P2_START,
|
|
|
|
|
];
|
|
|
|
|
|
2019-06-07 17:03:30 +00:00
|
|
|
|
export class ControllerPoller {
|
|
|
|
|
active = false;
|
|
|
|
|
handler;
|
|
|
|
|
state = new Int8Array(32);
|
|
|
|
|
lastState = new Int8Array(32);
|
|
|
|
|
AXIS0 = 24; // first joystick axis index
|
2019-08-23 22:34:40 +00:00
|
|
|
|
constructor(handler:(key,code,flags) => void) {
|
2019-06-07 17:03:30 +00:00
|
|
|
|
this.handler = handler;
|
|
|
|
|
window.addEventListener("gamepadconnected", (event) => {
|
|
|
|
|
console.log("Gamepad connected:", event);
|
|
|
|
|
this.active = typeof navigator.getGamepads === 'function';
|
|
|
|
|
});
|
|
|
|
|
window.addEventListener("gamepaddisconnected", (event) => {
|
|
|
|
|
console.log("Gamepad disconnected:", event);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
poll() {
|
|
|
|
|
if (!this.active) return;
|
|
|
|
|
var gamepads = navigator.getGamepads();
|
|
|
|
|
for (var gpi=0; gpi<gamepads.length; gpi++) {
|
|
|
|
|
var gp = gamepads[gpi];
|
|
|
|
|
if (gp) {
|
|
|
|
|
for (var i=0; i<gp.axes.length; i++) {
|
|
|
|
|
var k = i + this.AXIS0;
|
|
|
|
|
this.state[k] = Math.round(gp.axes[i]);
|
|
|
|
|
if (this.state[k] != this.lastState[k]) {
|
|
|
|
|
this.handleStateChange(gpi,k);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
for (var i=0; i<gp.buttons.length; i++) {
|
|
|
|
|
this.state[i] = gp.buttons[i].pressed ? 1 : 0;
|
|
|
|
|
if (this.state[i] != this.lastState[i]) {
|
|
|
|
|
this.handleStateChange(gpi,i);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.lastState.set(this.state);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
handleStateChange(gpi:number, k:number) {
|
|
|
|
|
var axis = k - this.AXIS0;
|
2019-08-23 22:34:40 +00:00
|
|
|
|
// TODO: this is slow
|
|
|
|
|
for (var def of DEFAULT_CONTROLLER_KEYS) {
|
2019-06-07 17:03:30 +00:00
|
|
|
|
// is this a gamepad entry? same player #?
|
|
|
|
|
if (def && def.plyr == gpi) {
|
2019-08-23 22:34:40 +00:00
|
|
|
|
var code = def.c;
|
2019-06-07 17:03:30 +00:00
|
|
|
|
var state = this.state[k];
|
|
|
|
|
var lastState = this.lastState[k];
|
|
|
|
|
// check for button/axis match
|
|
|
|
|
if (k == def.button || (axis == 0 && def.xaxis == state) || (axis == 1 && def.yaxis == state)) {
|
|
|
|
|
//console.log(gpi,k,state,entry);
|
|
|
|
|
if (state != 0) {
|
|
|
|
|
this.handler(code, 0, KeyFlags.KeyDown);
|
|
|
|
|
} else {
|
|
|
|
|
this.handler(code, 0, KeyFlags.KeyUp);
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
// joystick released?
|
|
|
|
|
else if (state == 0 && (axis == 0 && def.xaxis == lastState) || (axis == 1 && def.yaxis == lastState)) {
|
|
|
|
|
this.handler(code, 0, KeyFlags.KeyUp);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2019-08-11 14:23:56 +00:00
|
|
|
|
export function padBytes(data:Uint8Array|number[], len:number, padstart?:boolean) : Uint8Array {
|
2017-01-27 02:59:34 +00:00
|
|
|
|
if (data.length > len) {
|
|
|
|
|
throw Error("Data too long, " + data.length + " > " + len);
|
|
|
|
|
}
|
2017-01-15 03:46:12 +00:00
|
|
|
|
var r = new RAM(len);
|
2019-08-11 14:23:56 +00:00
|
|
|
|
if (padstart)
|
|
|
|
|
r.mem.set(data, len-data.length);
|
|
|
|
|
else
|
|
|
|
|
r.mem.set(data);
|
2017-01-15 03:46:12 +00:00
|
|
|
|
return r.mem;
|
2017-01-07 18:05:02 +00:00
|
|
|
|
}
|
2017-01-17 21:50:57 +00:00
|
|
|
|
|
2018-08-16 23:19:20 +00:00
|
|
|
|
type AddressReadWriteFn = ((a:number) => number) | ((a:number,v:number) => void);
|
|
|
|
|
type AddressDecoderEntry = [number, number, number, AddressReadWriteFn];
|
2018-08-17 02:45:59 +00:00
|
|
|
|
type AddressDecoderOptions = {gmask?:number};
|
2018-08-16 23:19:20 +00:00
|
|
|
|
|
2017-01-17 21:50:57 +00:00
|
|
|
|
// TODO: better performance, check values
|
2018-08-16 23:19:20 +00:00
|
|
|
|
export function AddressDecoder(table : AddressDecoderEntry[], options?:AddressDecoderOptions) {
|
2017-01-17 21:50:57 +00:00
|
|
|
|
var self = this;
|
|
|
|
|
function makeFunction(lo, hi) {
|
|
|
|
|
var s = "";
|
2017-01-21 13:13:36 +00:00
|
|
|
|
if (options && options.gmask) {
|
|
|
|
|
s += "a&=" + options.gmask + ";";
|
|
|
|
|
}
|
2017-01-17 21:50:57 +00:00
|
|
|
|
for (var i=0; i<table.length; i++) {
|
|
|
|
|
var entry = table[i];
|
|
|
|
|
var start = entry[0];
|
|
|
|
|
var end = entry[1];
|
|
|
|
|
var mask = entry[2];
|
|
|
|
|
var func = entry[3];
|
|
|
|
|
self['__fn'+i] = func;
|
|
|
|
|
s += "if (a>=" + start + " && a<="+end + "){";
|
2017-01-20 03:42:58 +00:00
|
|
|
|
if (mask) s += "a&="+mask+";";
|
2017-01-17 21:50:57 +00:00
|
|
|
|
s += "return this.__fn"+i+"(a,v)&0xff;}\n";
|
|
|
|
|
}
|
|
|
|
|
s += "return 0;"; // TODO: noise()?
|
|
|
|
|
return new Function('a', 'v', s);
|
|
|
|
|
}
|
|
|
|
|
return makeFunction(0x0, 0xffff).bind(self);
|
|
|
|
|
}
|
2017-04-12 16:23:24 +00:00
|
|
|
|
|
2018-08-16 23:19:20 +00:00
|
|
|
|
export function newAddressDecoder(table : AddressDecoderEntry[], options?:AddressDecoderOptions) : (a:number,v?:number) => number {
|
|
|
|
|
return new (AddressDecoder as any)(table, options);
|
|
|
|
|
}
|
|
|
|
|
|
2019-04-03 14:00:37 +00:00
|
|
|
|
/// TOOLBAR
|
|
|
|
|
|
|
|
|
|
export class Toolbar {
|
2019-04-04 02:23:58 +00:00
|
|
|
|
span : JQuery;
|
2019-04-03 14:00:37 +00:00
|
|
|
|
grp : JQuery;
|
|
|
|
|
mousetrap;
|
|
|
|
|
boundkeys = [];
|
|
|
|
|
|
2019-04-05 12:58:26 +00:00
|
|
|
|
constructor(parentDiv:HTMLElement, focusDiv:HTMLElement) {
|
|
|
|
|
this.mousetrap = focusDiv ? new Mousetrap(focusDiv) : Mousetrap;
|
2019-04-04 02:23:58 +00:00
|
|
|
|
this.span = $(document.createElement("span")).addClass("btn_toolbar");
|
|
|
|
|
parentDiv.appendChild(this.span[0]);
|
2019-04-03 14:00:37 +00:00
|
|
|
|
this.newGroup();
|
|
|
|
|
}
|
|
|
|
|
destroy() {
|
2019-04-04 02:23:58 +00:00
|
|
|
|
if (this.span) {
|
|
|
|
|
this.span.remove();
|
|
|
|
|
this.span = null;
|
2019-04-03 14:00:37 +00:00
|
|
|
|
}
|
|
|
|
|
if (this.mousetrap) {
|
|
|
|
|
for (var key of this.boundkeys) {
|
|
|
|
|
this.mousetrap.unbind(key);
|
|
|
|
|
}
|
|
|
|
|
this.mousetrap = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
newGroup() {
|
2019-04-04 02:23:58 +00:00
|
|
|
|
return this.grp = $(document.createElement("span")).addClass("btn_group").appendTo(this.span);
|
2019-04-03 14:00:37 +00:00
|
|
|
|
}
|
|
|
|
|
add(key:string, alttext:string, icon:string, fn:(e,combo) => void) {
|
2019-04-04 02:23:58 +00:00
|
|
|
|
var btn = null;
|
2019-04-03 14:00:37 +00:00
|
|
|
|
if (icon) {
|
2019-04-04 02:23:58 +00:00
|
|
|
|
btn = $(document.createElement("button")).addClass("btn");
|
2019-04-03 14:00:37 +00:00
|
|
|
|
if (icon.startsWith('glyphicon')) {
|
|
|
|
|
icon = '<span class="glyphicon ' + icon + '" aria-hidden="true"></span>';
|
|
|
|
|
}
|
|
|
|
|
btn.html(icon);
|
2019-04-07 01:47:42 +00:00
|
|
|
|
btn.prop("title", key ? (alttext+" ("+key+")") : alttext);
|
2019-04-03 14:00:37 +00:00
|
|
|
|
btn.click(fn);
|
|
|
|
|
this.grp.append(btn);
|
|
|
|
|
}
|
2019-04-04 02:23:58 +00:00
|
|
|
|
if (key) {
|
|
|
|
|
this.mousetrap.bind(key, fn);
|
|
|
|
|
this.boundkeys.push(key);
|
|
|
|
|
}
|
|
|
|
|
return btn;
|
2019-04-03 14:00:37 +00:00
|
|
|
|
}
|
2019-04-04 02:23:58 +00:00
|
|
|
|
|
2019-04-03 14:00:37 +00:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-02 02:07:17 +00:00
|
|
|
|
// https://stackoverflow.com/questions/17130395/real-mouse-position-in-canvas
|
2019-05-16 17:04:27 +00:00
|
|
|
|
export function getMousePos(canvas : HTMLCanvasElement, evt) : {x:number,y:number} {
|
2019-05-02 02:07:17 +00:00
|
|
|
|
var rect = canvas.getBoundingClientRect(), // abs. size of element
|
|
|
|
|
scaleX = canvas.width / rect.width, // relationship bitmap vs. element for X
|
|
|
|
|
scaleY = canvas.height / rect.height; // relationship bitmap vs. element for Y
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after they have
|
|
|
|
|
y: (evt.clientY - rect.top) * scaleY // been adjusted to be relative to element
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|