1051 lines
30 KiB
TypeScript
1051 lines
30 KiB
TypeScript
"use strict";
|
|
|
|
import { hex, rgb2bgr, rle_unpack } from "../util";
|
|
import { ProjectWindows } from "../windows";
|
|
declare var Mousetrap;
|
|
|
|
export type UintArray = number[] | Uint8Array | Uint16Array | Uint32Array; //{[i:number]:number};
|
|
|
|
// TODO: separate view/controller
|
|
export interface EditorContext {
|
|
setCurrentEditor(div:JQuery, editing:JQuery, node:PixNode) : void;
|
|
getPalettes(matchlen : number) : SelectablePalette[];
|
|
getTilemaps(matchlen : number) : SelectableTilemap[];
|
|
}
|
|
|
|
export type SelectablePalette = {
|
|
node:PixNode
|
|
name:string
|
|
palette:Uint32Array
|
|
}
|
|
|
|
export type SelectableTilemap = {
|
|
node:PixNode
|
|
name:string
|
|
images:Uint8Array[]
|
|
rgbimgs:Uint32Array[] // TODO: different palettes?
|
|
}
|
|
|
|
export type PixelEditorImageFormat = {
|
|
w:number
|
|
h:number
|
|
count?:number
|
|
bpp?:number
|
|
np?:number
|
|
bpw?:number
|
|
sl?:number
|
|
pofs?:number
|
|
remap?:number[]
|
|
brev?:boolean
|
|
flip?:boolean
|
|
destfmt?:PixelEditorImageFormat
|
|
xform?:string
|
|
skip?:number
|
|
};
|
|
|
|
export type PixelEditorPaletteFormat = {
|
|
pal?:number|string
|
|
n?:number
|
|
layout?:string
|
|
};
|
|
|
|
export type PixelEditorPaletteLayout = [string, number, number][];
|
|
|
|
type PixelEditorMessage = {
|
|
fmt : PixelEditorImageFormat
|
|
palfmt : PixelEditorPaletteFormat
|
|
bytestr : string
|
|
palstr : string
|
|
};
|
|
|
|
/////////////////
|
|
|
|
var pixel_re = /([0#]?)([x$%]|\d'[bh])([0-9a-f]+)(?:;.*$)?/gim;
|
|
|
|
function convertToHexStatements(s:string) : string {
|
|
// convert 'hex ....' asm format
|
|
return s.replace(/(\shex\s+)([0-9a-f]+)/ig, function(m,hexprefix,hexstr) {
|
|
var rtn = hexprefix;
|
|
for (var i=0; i<hexstr.length; i+=2) {
|
|
rtn += '0x'+hexstr.substr(i,2)+',';
|
|
}
|
|
return rtn;
|
|
});
|
|
}
|
|
|
|
export function parseHexWords(s:string) : number[] {
|
|
var arr = [];
|
|
var m;
|
|
while (m = pixel_re.exec(s)) {
|
|
var n;
|
|
if (m[2].startsWith('%') || m[2].endsWith("b"))
|
|
n = parseInt(m[3],2);
|
|
else if (m[2].startsWith('x') || m[2].startsWith('$') || m[2].endsWith('h'))
|
|
n = parseInt(m[3],16);
|
|
else
|
|
n = parseInt(m[3]);
|
|
arr.push(n);
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
export function replaceHexWords(s:string, words:UintArray) : string {
|
|
var result = "";
|
|
var m;
|
|
var li = 0;
|
|
var i = 0;
|
|
while (m = pixel_re.exec(s)) {
|
|
result += s.slice(li, pixel_re.lastIndex - m[0].length);
|
|
li = pixel_re.lastIndex;
|
|
if (m[2].startsWith('%'))
|
|
result += m[1] + "%" + words[i++].toString(2);
|
|
else if (m[2].endsWith('b'))
|
|
result += m[1] + m[2] + words[i++].toString(2); // TODO
|
|
else if (m[2].endsWith('h'))
|
|
result += m[1] + m[2] + words[i++].toString(16); // TODO
|
|
else if (m[2].startsWith('x'))
|
|
result += m[1] + "x" + hex(words[i++]);
|
|
else if (m[2].startsWith('$'))
|
|
result += m[1] + "$" + hex(words[i++]);
|
|
else
|
|
result += m[1] + words[i++].toString();
|
|
}
|
|
result += s.slice(li);
|
|
// convert 'hex ....' asm format
|
|
result = result.replace(/(\shex\s+)([,x0-9a-f]+)/ig, (m,hexprefix,hexstr) => {
|
|
var rtn = hexprefix + hexstr;
|
|
rtn = rtn.replace(/0x/ig,'').replace(/,/ig,'')
|
|
return rtn;
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function remapBits(x:number, arr:number[]) : number {
|
|
if (!arr) return x;
|
|
var y = 0;
|
|
for (var i=0; i<arr.length; i++) {
|
|
var s = arr[i];
|
|
if (s < 0) {
|
|
s = -s-1;
|
|
y ^= 1 << s;
|
|
}
|
|
if (x & (1 << i)) {
|
|
y ^= 1 << s;
|
|
}
|
|
}
|
|
return y;
|
|
}
|
|
|
|
function convertWordsToImages(words:UintArray, fmt:PixelEditorImageFormat) : Uint8Array[] {
|
|
var width = fmt.w;
|
|
var height = fmt.h;
|
|
var count = fmt.count || 1;
|
|
var bpp = fmt.bpp || 1;
|
|
var nplanes = fmt.np || 1;
|
|
var bitsperword = fmt.bpw || 8;
|
|
var wordsperline = fmt.sl || Math.ceil(width * bpp / bitsperword);
|
|
var mask = (1 << bpp)-1;
|
|
var pofs = fmt.pofs || wordsperline*height*count;
|
|
var skip = fmt.skip || 0;
|
|
var images = [];
|
|
for (var n=0; n<count; n++) {
|
|
var imgdata = [];
|
|
for (var y=0; y<height; y++) {
|
|
var yp = fmt.flip ? height-1-y : y;
|
|
var ofs0 = n*wordsperline*height + yp*wordsperline;
|
|
var shift = 0;
|
|
for (var x=0; x<width; x++) {
|
|
var color = 0;
|
|
var ofs = remapBits(ofs0, fmt.remap);
|
|
for (var p=0; p<nplanes; p++) {
|
|
var byte = words[ofs + p*pofs + skip];
|
|
color |= ((fmt.brev ? byte>>(bitsperword-shift-bpp) : byte>>shift) & mask) << (p*bpp);
|
|
}
|
|
imgdata.push(color);
|
|
shift += bpp;
|
|
if (shift >= bitsperword) {
|
|
ofs0 += 1;
|
|
shift = 0;
|
|
}
|
|
}
|
|
}
|
|
images.push(new Uint8Array(imgdata));
|
|
}
|
|
return images;
|
|
}
|
|
|
|
function convertImagesToWords(images:Uint8Array[], fmt:PixelEditorImageFormat) : number[] {
|
|
if (fmt.destfmt) fmt = fmt.destfmt;
|
|
var width = fmt.w;
|
|
var height = fmt.h;
|
|
var count = fmt.count || 1;
|
|
var bpp = fmt.bpp || 1;
|
|
var nplanes = fmt.np || 1;
|
|
var bitsperword = fmt.bpw || 8;
|
|
var wordsperline = fmt.sl || Math.ceil(fmt.w * bpp / bitsperword);
|
|
var mask = (1 << bpp)-1;
|
|
var pofs = fmt.pofs || wordsperline*height*count;
|
|
var skip = fmt.skip || 0;
|
|
var words;
|
|
if (bitsperword <= 8)
|
|
words = new Uint8Array(wordsperline*height*count*nplanes);
|
|
else
|
|
words = new Uint32Array(wordsperline*height*count*nplanes);
|
|
for (var n=0; n<count; n++) {
|
|
var imgdata = images[n];
|
|
var i = 0;
|
|
for (var y=0; y<height; y++) {
|
|
var yp = fmt.flip ? height-1-y : y;
|
|
var ofs0 = n*wordsperline*height + yp*wordsperline;
|
|
var shift = 0;
|
|
for (var x=0; x<width; x++) {
|
|
var color = imgdata[i++];
|
|
var ofs = remapBits(ofs0, fmt.remap);
|
|
for (var p=0; p<nplanes; p++) {
|
|
var c = (color >> (p*bpp)) & mask;
|
|
words[ofs + p*pofs + skip] |= (fmt.brev ? (c << (bitsperword-shift-bpp)) : (c << shift));
|
|
}
|
|
shift += bpp;
|
|
if (shift >= bitsperword) {
|
|
ofs0 += 1;
|
|
shift = 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return words;
|
|
}
|
|
|
|
// TODO
|
|
function convertPaletteBytes(arr:UintArray,r0,r1,g0,g1,b0,b1) : number[] {
|
|
var result = [];
|
|
for (var i=0; i<arr.length; i++) {
|
|
var d = arr[i];
|
|
var rgb = 0xff000000;
|
|
rgb |= ((d >> r0) & ((1<<r1)-1)) << (0+8-r1);
|
|
rgb |= ((d >> g0) & ((1<<g1)-1)) << (8+8-g1);
|
|
rgb |= ((d >> b0) & ((1<<b1)-1)) << (16+8-b1);
|
|
result.push(rgb);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
export function getPaletteLength(palfmt: PixelEditorPaletteFormat) : number {
|
|
var pal = palfmt.pal;
|
|
if (typeof pal === 'number') {
|
|
var rr = Math.floor(Math.abs(pal/100) % 10);
|
|
var gg = Math.floor(Math.abs(pal/10) % 10);
|
|
var bb = Math.floor(Math.abs(pal) % 10);
|
|
return 1<<(rr+gg+bb);
|
|
} else {
|
|
var paltable = PREDEF_PALETTES[pal];
|
|
if (paltable) {
|
|
return paltable.length;
|
|
} else {
|
|
throw new Error("No palette named " + pal);
|
|
}
|
|
}
|
|
}
|
|
|
|
function convertPaletteFormat(palbytes:UintArray, palfmt: PixelEditorPaletteFormat) : number[] {
|
|
var pal = palfmt.pal;
|
|
var newpalette;
|
|
if (typeof pal === 'number') {
|
|
var rr = Math.floor(Math.abs(pal/100) % 10);
|
|
var gg = Math.floor(Math.abs(pal/10) % 10);
|
|
var bb = Math.floor(Math.abs(pal) % 10);
|
|
// TODO: n
|
|
if (pal >= 0)
|
|
newpalette = convertPaletteBytes(palbytes, 0, rr, rr, gg, rr+gg, bb);
|
|
else
|
|
newpalette = convertPaletteBytes(palbytes, rr+gg, bb, rr, gg, 0, rr);
|
|
} else {
|
|
var paltable = PREDEF_PALETTES[pal];
|
|
if (paltable) {
|
|
newpalette = new Uint32Array(palbytes).map((i) => { return paltable[i & (paltable.length-1)] | 0xff000000; });
|
|
} else {
|
|
throw new Error("No palette named " + pal);
|
|
}
|
|
}
|
|
return newpalette;
|
|
}
|
|
|
|
// TODO: illegal colors?
|
|
var PREDEF_PALETTES = {
|
|
'nes':[
|
|
0x525252, 0xB40000, 0xA00000, 0xB1003D, 0x740069, 0x00005B, 0x00005F, 0x001840, 0x002F10, 0x084A08, 0x006700, 0x124200, 0x6D2800, 0x000000, 0x000000, 0x000000,
|
|
0xC4D5E7, 0xFF4000, 0xDC0E22, 0xFF476B, 0xD7009F, 0x680AD7, 0x0019BC, 0x0054B1, 0x006A5B, 0x008C03, 0x00AB00, 0x2C8800, 0xA47200, 0x000000, 0x000000, 0x000000,
|
|
0xF8F8F8, 0xFFAB3C, 0xFF7981, 0xFF5BC5, 0xFF48F2, 0xDF49FF, 0x476DFF, 0x00B4F7, 0x00E0FF, 0x00E375, 0x03F42B, 0x78B82E, 0xE5E218, 0x787878, 0x000000, 0x000000,
|
|
0xFFFFFF, 0xFFF2BE, 0xF8B8B8, 0xF8B8D8, 0xFFB6FF, 0xFFC3FF, 0xC7D1FF, 0x9ADAFF, 0x88EDF8, 0x83FFDD, 0xB8F8B8, 0xF5F8AC, 0xFFFFB0, 0xF8D8F8, 0x000000, 0x000000
|
|
],
|
|
'ap2lores':[
|
|
(0x000000), (0xff00ff), (0x00007f), (0x7f007f), (0x007f00), (0x7f7f7f), (0x0000bf), (0x0000ff),
|
|
(0xbf7f00), (0xffbf00), (0xbfbfbf), (0xff7f7f), (0x00ff00), (0xffff00), (0x00bf7f), (0xffffff),
|
|
],
|
|
'vcs':[
|
|
0x000000,0x000000, 0x404040,0x404040, 0x6c6c6c,0x6c6c6c, 0x909090,0x909090, 0xb0b0b0,0xb0b0b0, 0xc8c8c8,0xc8c8c8, 0xdcdcdc,0xdcdcdc, 0xf4f4f4,0xf4f4f4,
|
|
0x004444,0x004444, 0x106464,0x106464, 0x248484,0x248484, 0x34a0a0,0x34a0a0, 0x40b8b8,0x40b8b8, 0x50d0d0,0x50d0d0, 0x5ce8e8,0x5ce8e8, 0x68fcfc,0x68fcfc,
|
|
0x002870,0x002870, 0x144484,0x144484, 0x285c98,0x285c98, 0x3c78ac,0x3c78ac, 0x4c8cbc,0x4c8cbc, 0x5ca0cc,0x5ca0cc, 0x68b4dc,0x68b4dc, 0x78c8ec,0x78c8ec,
|
|
0x001884,0x001884, 0x183498,0x183498, 0x3050ac,0x3050ac, 0x4868c0,0x4868c0, 0x5c80d0,0x5c80d0, 0x7094e0,0x7094e0, 0x80a8ec,0x80a8ec, 0x94bcfc,0x94bcfc,
|
|
0x000088,0x000088, 0x20209c,0x20209c, 0x3c3cb0,0x3c3cb0, 0x5858c0,0x5858c0, 0x7070d0,0x7070d0, 0x8888e0,0x8888e0, 0xa0a0ec,0xa0a0ec, 0xb4b4fc,0xb4b4fc,
|
|
0x5c0078,0x5c0078, 0x74208c,0x74208c, 0x883ca0,0x883ca0, 0x9c58b0,0x9c58b0, 0xb070c0,0xb070c0, 0xc084d0,0xc084d0, 0xd09cdc,0xd09cdc, 0xe0b0ec,0xe0b0ec,
|
|
0x780048,0x780048, 0x902060,0x902060, 0xa43c78,0xa43c78, 0xb8588c,0xb8588c, 0xcc70a0,0xcc70a0, 0xdc84b4,0xdc84b4, 0xec9cc4,0xec9cc4, 0xfcb0d4,0xfcb0d4,
|
|
0x840014,0x840014, 0x982030,0x982030, 0xac3c4c,0xac3c4c, 0xc05868,0xc05868, 0xd0707c,0xd0707c, 0xe08894,0xe08894, 0xeca0a8,0xeca0a8, 0xfcb4bc,0xfcb4bc,
|
|
0x880000,0x880000, 0x9c201c,0x9c201c, 0xb04038,0xb04038, 0xc05c50,0xc05c50, 0xd07468,0xd07468, 0xe08c7c,0xe08c7c, 0xeca490,0xeca490, 0xfcb8a4,0xfcb8a4,
|
|
0x7c1800,0x7c1800, 0x90381c,0x90381c, 0xa85438,0xa85438, 0xbc7050,0xbc7050, 0xcc8868,0xcc8868, 0xdc9c7c,0xdc9c7c, 0xecb490,0xecb490, 0xfcc8a4,0xfcc8a4,
|
|
0x5c2c00,0x5c2c00, 0x784c1c,0x784c1c, 0x906838,0x906838, 0xac8450,0xac8450, 0xc09c68,0xc09c68, 0xd4b47c,0xd4b47c, 0xe8cc90,0xe8cc90, 0xfce0a4,0xfce0a4,
|
|
0x2c3c00,0x2c3c00, 0x485c1c,0x485c1c, 0x647c38,0x647c38, 0x809c50,0x809c50, 0x94b468,0x94b468, 0xacd07c,0xacd07c, 0xc0e490,0xc0e490, 0xd4fca4,0xd4fca4,
|
|
0x003c00,0x003c00, 0x205c20,0x205c20, 0x407c40,0x407c40, 0x5c9c5c,0x5c9c5c, 0x74b474,0x74b474, 0x8cd08c,0x8cd08c, 0xa4e4a4,0xa4e4a4, 0xb8fcb8,0xb8fcb8,
|
|
0x003814,0x003814, 0x1c5c34,0x1c5c34, 0x387c50,0x387c50, 0x50986c,0x50986c, 0x68b484,0x68b484, 0x7ccc9c,0x7ccc9c, 0x90e4b4,0x90e4b4, 0xa4fcc8,0xa4fcc8,
|
|
0x00302c,0x00302c, 0x1c504c,0x1c504c, 0x347068,0x347068, 0x4c8c84,0x4c8c84, 0x64a89c,0x64a89c, 0x78c0b4,0x78c0b4, 0x88d4cc,0x88d4cc, 0x9cece0,0x9cece0,
|
|
0x002844,0x002844, 0x184864,0x184864, 0x306884,0x306884, 0x4484a0,0x4484a0, 0x589cb8,0x589cb8, 0x6cb4d0,0x6cb4d0, 0x7ccce8,0x7ccce8, 0x8ce0fc,0x8ce0fc
|
|
]
|
|
};
|
|
|
|
var PREDEF_LAYOUTS : {[id:string]:PixelEditorPaletteLayout} = {
|
|
'nes':[
|
|
['Screen Color', 0x00, 1],
|
|
['Background 0', 0x01, 3],
|
|
['Background 1', 0x05, 3],
|
|
['Background 2', 0x09, 3],
|
|
['Background 3', 0x0d, 3],
|
|
['Sprite 0', 0x11, 3],
|
|
['Sprite 1', 0x15, 3],
|
|
['Sprite 2', 0x19, 3],
|
|
['Sprite 3', 0x1d, 3]
|
|
],
|
|
};
|
|
|
|
/////
|
|
|
|
function equalArrays(a:UintArray, b:UintArray) : boolean {
|
|
if (a == null || b == null)
|
|
return false;
|
|
if (a.length !== b.length)
|
|
return false;
|
|
if (a === b)
|
|
return true;
|
|
for (var i=0; i<a.length; i++) {
|
|
if (a[i] !== b[i])
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
function equalNestedArrays(a:UintArray[], b:UintArray[]) : boolean {
|
|
if (a == null || b == null)
|
|
return false;
|
|
if (a.length !== b.length)
|
|
return false;
|
|
if (a === b)
|
|
return true;
|
|
for (var i=0; i<a.length; i++) {
|
|
if (!equalArrays(a[i], b[i]))
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
export abstract class PixNode {
|
|
left : PixNode; // toward text editor
|
|
right : PixNode; // toward pixel editor
|
|
|
|
words? : UintArray; // file data
|
|
images? : Uint8Array[]; // array of indexed image data
|
|
rgbimgs? : Uint32Array[]; // array of rgba imgages
|
|
palette? : Uint32Array; // array of rgba
|
|
|
|
abstract updateLeft() : boolean; // update coming from right
|
|
abstract updateRight() : boolean; // update coming from left
|
|
|
|
refreshLeft() {
|
|
var p : PixNode = this;
|
|
while (p) {
|
|
p.updateLeft();
|
|
p = p.left;
|
|
}
|
|
}
|
|
refreshRight() {
|
|
var p : PixNode = this;
|
|
while (p) {
|
|
p.updateRight();
|
|
p = p.right;
|
|
}
|
|
}
|
|
addRight(node : PixNode) {
|
|
this.right = node;
|
|
node.left = this;
|
|
return node;
|
|
}
|
|
addLeft(node : PixNode) {
|
|
this.left = node;
|
|
node.right = this;
|
|
return node;
|
|
}
|
|
}
|
|
|
|
abstract class CodeProjectDataNode extends PixNode {
|
|
project : ProjectWindows;
|
|
fileid : string;
|
|
label : string;
|
|
words : UintArray;
|
|
}
|
|
|
|
export class FileDataNode extends CodeProjectDataNode {
|
|
|
|
constructor(project:ProjectWindows, fileid:string) {
|
|
super();
|
|
this.project = project;
|
|
this.fileid = fileid;
|
|
this.label = fileid;
|
|
}
|
|
updateLeft() {
|
|
//if (equalArrays(this.words, this.right.words)) return false;
|
|
this.words = this.right.words;
|
|
if (this.project) {
|
|
this.project.updateFile(this.fileid, this.words as Uint8Array);
|
|
}
|
|
return true;
|
|
}
|
|
updateRight() {
|
|
if (this.project) {
|
|
this.words = this.project.project.getFile(this.fileid) as Uint8Array;
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
|
|
export class TextDataNode extends CodeProjectDataNode {
|
|
text : string;
|
|
start : number;
|
|
end : number;
|
|
|
|
// TODO: what if file size/layout changes?
|
|
constructor(project:ProjectWindows, fileid:string, label:string, start:number, end:number) {
|
|
super();
|
|
this.project = project;
|
|
this.fileid = fileid;
|
|
this.label = label;
|
|
this.start = start;
|
|
this.end = end;
|
|
}
|
|
updateLeft() {
|
|
if (this.right.words.length != this.words.length)
|
|
throw "Expected " + this.words.length + " bytes; image has " + this.right.words.length;
|
|
this.words = this.right.words;
|
|
// TODO: reload editors?
|
|
var datastr = this.text.substring(this.start, this.end);
|
|
datastr = replaceHexWords(datastr, this.words);
|
|
this.text = this.text.substring(0, this.start) + datastr + this.text.substring(this.end);
|
|
if (this.project) {
|
|
this.project.updateFile(this.fileid, this.text);
|
|
//this.project.replaceTextRange(this.fileid, this.start, this.end, datastr);
|
|
}
|
|
return true;
|
|
}
|
|
updateRight() {
|
|
if (this.project) {
|
|
this.text = this.project.project.getFile(this.fileid) as string;
|
|
}
|
|
var datastr = this.text.substring(this.start, this.end);
|
|
datastr = convertToHexStatements(datastr); // TODO?
|
|
var words = parseHexWords(datastr);
|
|
this.words = words; //new Uint8Array(words); // TODO: 16/32?
|
|
return true;
|
|
}
|
|
}
|
|
|
|
export class Compressor extends PixNode {
|
|
|
|
words : UintArray;
|
|
|
|
updateLeft() {
|
|
// TODO: can't modify length of rle bytes
|
|
return false;
|
|
}
|
|
updateRight() {
|
|
this.words = rle_unpack(new Uint8Array(this.left.words));
|
|
return true;
|
|
}
|
|
|
|
}
|
|
|
|
export class Mapper extends PixNode {
|
|
|
|
fmt : PixelEditorImageFormat;
|
|
words : UintArray;
|
|
images : Uint8Array[];
|
|
|
|
constructor(fmt) {
|
|
super();
|
|
this.fmt = fmt;
|
|
}
|
|
updateLeft() {
|
|
//if (equalNestedArrays(this.images, this.right.images)) return false;
|
|
this.images = this.right.images;
|
|
this.words = convertImagesToWords(this.images, this.fmt);
|
|
return true;
|
|
}
|
|
updateRight() {
|
|
if (equalArrays(this.words, this.left.words)) return false;
|
|
// convert each word array to images
|
|
this.words = this.left.words;
|
|
this.images = convertWordsToImages(this.words, this.fmt);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
class RGBAPalette {
|
|
palcols;
|
|
constructor(palcols : Uint32Array) {
|
|
this.palcols = palcols;
|
|
}
|
|
indexOf(rgba : number) : number {
|
|
return this.palcols.indexOf(rgba);
|
|
}
|
|
}
|
|
|
|
export class Palettizer extends PixNode {
|
|
|
|
images : Uint8Array[];
|
|
rgbimgs : Uint32Array[];
|
|
palette : Uint32Array;
|
|
|
|
ncolors : number;
|
|
context : EditorContext;
|
|
paloptions : SelectablePalette[];
|
|
palindex : number = 0;
|
|
|
|
// TODO: control to select palette for bitmaps
|
|
|
|
constructor(context:EditorContext, fmt:PixelEditorImageFormat) {
|
|
super();
|
|
this.context = context;
|
|
this.ncolors = 1 << ((fmt.bpp||1) * (fmt.np||1));
|
|
}
|
|
updateLeft() {
|
|
if (this.right) { this.rgbimgs = this.right.rgbimgs; } // TODO: check is for unit test, remove?
|
|
var pal = new RGBAPalette(this.palette);
|
|
var newimages = this.rgbimgs.map( (im:Uint32Array) => {
|
|
var out = new Uint8Array(im.length);
|
|
for (var i=0; i<im.length; i++) {
|
|
out[i] = pal.indexOf(im[i]);
|
|
}
|
|
return out;
|
|
});
|
|
// have to do it this way b/c pixel editor modifies arrays
|
|
//if (equalNestedArrays(newimages, this.images)) return false;
|
|
this.images = newimages;
|
|
return true;
|
|
}
|
|
updateRight() {
|
|
if (!this.updateRefs() && equalNestedArrays(this.images, this.left.images)) return false;
|
|
this.images = this.left.images;
|
|
var mask = this.palette.length - 1; // must be power of 2
|
|
// for each image, map bytes to RGB colors
|
|
this.rgbimgs = this.images.map( (im:Uint8Array) => {
|
|
var out = new Uint32Array(im.length);
|
|
for (var i=0; i<im.length; i++) {
|
|
out[i] = this.palette[im[i] & mask];
|
|
}
|
|
return out;
|
|
});
|
|
return true;
|
|
}
|
|
updateRefs() {
|
|
var newpalette;
|
|
if (this.context != null) {
|
|
this.paloptions = this.context.getPalettes(this.ncolors);
|
|
if (this.paloptions && this.paloptions.length > 0) {
|
|
newpalette = this.paloptions[this.palindex].palette;
|
|
}
|
|
}
|
|
if (newpalette == null) {
|
|
if (this.ncolors <= 2)
|
|
newpalette = new Uint32Array([0xff000000, 0xffffffff]);
|
|
else
|
|
newpalette = new Uint32Array([0xff000000, 0xffff00ff, 0xffffff00, 0xffffffff]); // TODO: more palettes
|
|
}
|
|
if (equalArrays(this.palette, newpalette)) return false;
|
|
this.palette = newpalette;
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function dedupPalette(cols : UintArray) : Uint32Array {
|
|
var dup = new Map();
|
|
var res = new Uint32Array(cols.length);
|
|
var ndups = 0;
|
|
for (var i=0; i<cols.length; i++) {
|
|
var n = cols[i];
|
|
while (dup[n]) {
|
|
n ^= ++ndups;
|
|
}
|
|
res[i] = n;
|
|
dup[n] = 1;
|
|
}
|
|
return res;
|
|
}
|
|
export class PaletteFormatToRGB extends PixNode {
|
|
|
|
|
|
words : UintArray;
|
|
rgbimgs : Uint32Array[];
|
|
palette : Uint32Array;
|
|
palfmt : PixelEditorPaletteFormat;
|
|
layout : PixelEditorPaletteLayout;
|
|
|
|
constructor(palfmt) {
|
|
super();
|
|
this.palfmt = palfmt;
|
|
}
|
|
updateLeft() {
|
|
//TODO
|
|
return true;
|
|
}
|
|
updateRight() {
|
|
if (equalArrays(this.words, this.left.words)) return false;
|
|
this.words = this.left.words;
|
|
this.palette = dedupPalette(convertPaletteFormat(this.words, this.palfmt));
|
|
this.layout = PREDEF_LAYOUTS[this.palfmt.layout];
|
|
this.rgbimgs = [];
|
|
this.palette.forEach( (rgba:number) => {
|
|
this.rgbimgs.push(new Uint32Array([rgba]));
|
|
});
|
|
return true;
|
|
}
|
|
getAllColors() {
|
|
var arr = [];
|
|
for (var i=0; i<getPaletteLength(this.palfmt); i++)
|
|
arr.push(i);
|
|
return convertPaletteFormat(arr, this.palfmt);
|
|
}
|
|
}
|
|
|
|
export abstract class Compositor extends PixNode {
|
|
|
|
tilemap : Uint8Array[]; // tilemap images
|
|
images : Uint8Array[]; // output (1 image)
|
|
width : number;
|
|
height : number;
|
|
|
|
context : EditorContext;
|
|
tileoptions : SelectableTilemap[];
|
|
tileindex : number = 0;
|
|
|
|
constructor(context:EditorContext) {
|
|
super();
|
|
this.context = context;
|
|
}
|
|
updateRefs() : boolean {
|
|
var oldtilemap = this.tilemap;
|
|
if (this.context != null) {
|
|
this.tileoptions = this.context.getTilemaps(256);
|
|
if (this.tileoptions && this.tileoptions.length > 0) {
|
|
this.tilemap = this.tileoptions[this.tileindex].images;
|
|
}
|
|
}
|
|
return !equalNestedArrays(oldtilemap, this.tilemap);
|
|
}
|
|
}
|
|
|
|
export type MetaspriteEntry = {
|
|
x:number, y:number, tile:number, attr:number
|
|
};
|
|
|
|
export class MetaspriteCompositor extends Compositor {
|
|
|
|
metadefs : MetaspriteEntry[];
|
|
|
|
constructor(context:EditorContext, metadefs) {
|
|
super(context);
|
|
this.metadefs = metadefs;
|
|
}
|
|
updateLeft() {
|
|
// TODO
|
|
return false;
|
|
}
|
|
updateRight() {
|
|
this.updateRefs();
|
|
this.width = 16; // TODO
|
|
this.height = 16; // TODO
|
|
var idata = new Uint8Array(this.width * this.height);
|
|
this.images = [idata];
|
|
this.metadefs.forEach((meta) => {
|
|
// TODO
|
|
});
|
|
return true;
|
|
}
|
|
}
|
|
|
|
export class NESNametableConverter extends Compositor {
|
|
|
|
cols : number;
|
|
rows : number;
|
|
baseofs : number;
|
|
constructor(context:EditorContext) {
|
|
super(context);
|
|
}
|
|
updateLeft() {
|
|
// TODO
|
|
return false;
|
|
}
|
|
updateRight() {
|
|
if (!this.updateRefs() && equalArrays(this.words, this.left.words)) return false;
|
|
this.words = this.left.words;
|
|
this.cols = 32;
|
|
this.rows = 30;
|
|
this.width = this.cols * 8;
|
|
this.height = this.rows * 8;
|
|
this.baseofs = 0;
|
|
var idata = new Uint8Array(this.width * this.height);
|
|
this.images = [idata];
|
|
var a = 0;
|
|
var attraddr;
|
|
for (var row=0; row<this.rows; row++) {
|
|
for (var col=0; col<this.cols; col++) {
|
|
var name = this.words[this.baseofs + a];
|
|
var t = this.tilemap[name];
|
|
attraddr = (a & 0x2c00) | 0x3c0 | (a & 0x0C00) | ((a >> 4) & 0x38) | ((a >> 2) & 0x07);
|
|
var attr = this.words[attraddr];
|
|
var tag = name ^ (attr<<9) ^ 0x80000000;
|
|
var i = row*this.cols*8*8 + col*8;
|
|
var j = 0;
|
|
var attrshift = (col&2) + ((a&0x40)>>4);
|
|
var coloradd = ((attr >> attrshift) & 3) << 2;
|
|
for (var y=0; y<8; y++) {
|
|
for (var x=0; x<8; x++) {
|
|
var color = t[j++];
|
|
if (color) color += coloradd;
|
|
idata[i++] = color;
|
|
}
|
|
i += this.cols*8-8;
|
|
}
|
|
a++;
|
|
}
|
|
}
|
|
// TODO
|
|
return true;
|
|
}
|
|
}
|
|
|
|
///// UI CONTROLS
|
|
|
|
export class ImageChooser {
|
|
|
|
rgbimgs : Uint32Array[];
|
|
width : number;
|
|
height : number;
|
|
|
|
recreate(parentdiv:JQuery, onclick) {
|
|
var agrid = $('<div class="asset_grid"/>'); // grid (or 1) of preview images
|
|
parentdiv.empty().append(agrid);
|
|
var cscale = Math.max(2, Math.ceil(16/this.width)); // TODO
|
|
var imgsperline = this.width <= 8 ? 16 : 8; // TODO
|
|
var span = null;
|
|
this.rgbimgs.forEach((imdata, i) => {
|
|
var viewer = new Viewer();
|
|
viewer.width = this.width;
|
|
viewer.height = this.height;
|
|
viewer.recreate();
|
|
viewer.canvas.style.width = (viewer.width*cscale)+'px'; // TODO
|
|
viewer.canvas.title = '$'+hex(i);
|
|
viewer.updateImage(imdata);
|
|
$(viewer.canvas).addClass('asset_cell');
|
|
$(viewer.canvas).click((e) => {
|
|
onclick(i, viewer);
|
|
});
|
|
if (!span) {
|
|
span = $('<span/>');
|
|
agrid.append(span);
|
|
}
|
|
span.append(viewer.canvas);
|
|
var brk = (i % imgsperline) == imgsperline-1;
|
|
if (brk) {
|
|
agrid.append($("<br/>"));
|
|
span = null;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function newDiv(parent?, cls? : string) {
|
|
var div = $(document.createElement("div"));
|
|
if (parent) div.appendTo(parent)
|
|
if (cls) div.addClass(cls);
|
|
return div;
|
|
}
|
|
|
|
export class CharmapEditor extends PixNode {
|
|
|
|
context;
|
|
parentdiv;
|
|
fmt;
|
|
chooser;
|
|
|
|
constructor(context:EditorContext, parentdiv:JQuery, fmt:PixelEditorImageFormat) {
|
|
super();
|
|
this.context = context;
|
|
this.parentdiv = parentdiv;
|
|
this.fmt = fmt;
|
|
}
|
|
|
|
updateLeft() {
|
|
return true;
|
|
}
|
|
|
|
updateRight() {
|
|
if (equalNestedArrays(this.rgbimgs, this.left.rgbimgs)) return false;
|
|
this.rgbimgs = this.left.rgbimgs;
|
|
var adual = newDiv(this.parentdiv.empty(), "asset_dual"); // contains grid and editor
|
|
var agrid = newDiv(adual);
|
|
var aeditor = newDiv(adual, "asset_editor").hide(); // contains editor, when selected
|
|
// add image chooser grid
|
|
var chooser = this.chooser = new ImageChooser();
|
|
chooser.rgbimgs = this.rgbimgs;
|
|
chooser.width = this.fmt.w || 1;
|
|
chooser.height = this.fmt.h || 1;
|
|
chooser.recreate(agrid, (index, viewer) => {
|
|
var escale = Math.ceil(192 / this.fmt.w);
|
|
var editview = this.createEditor(aeditor, viewer, escale);
|
|
this.context.setCurrentEditor(aeditor, $(viewer.canvas), this);
|
|
this.rgbimgs[index] = viewer.rgbdata;
|
|
});
|
|
// add palette selector
|
|
// TODO: only view when editing?
|
|
var palizer = this.left;
|
|
if (palizer instanceof Palettizer && palizer.paloptions.length > 1) {
|
|
var palselect = $(document.createElement('select'));
|
|
palizer.paloptions.forEach((palopt, i) => {
|
|
// TODO: full identifier
|
|
var sel = $(document.createElement('option')).text(palopt.name).val(i).appendTo(palselect);
|
|
if (i == (palizer as Palettizer).palindex)
|
|
sel.attr('selected','selected');
|
|
});
|
|
palselect.appendTo(agrid).change((e) => {
|
|
var index = $(e.target).val() as number;
|
|
(palizer as Palettizer).palindex = index;
|
|
palizer.refreshRight();
|
|
});
|
|
}
|
|
return true;
|
|
}
|
|
|
|
createEditor(aeditor : JQuery, viewer : Viewer, escale : number) : PixEditor {
|
|
var im = new PixEditor();
|
|
im.createWith(viewer);
|
|
im.updateImage();
|
|
im.canvas.style.width = (viewer.width*escale)+'px'; // TODO
|
|
im.makeEditable(this, aeditor, this.left.palette);
|
|
return im;
|
|
}
|
|
}
|
|
|
|
export class Viewer {
|
|
|
|
width : number;
|
|
height : number;
|
|
canvas : HTMLCanvasElement;
|
|
ctx : CanvasRenderingContext2D;
|
|
imagedata : ImageData;
|
|
rgbdata : Uint32Array;
|
|
peerviewers : Viewer[];
|
|
|
|
recreate() {
|
|
this.canvas = this.newCanvas();
|
|
this.imagedata = this.ctx.createImageData(this.width, this.height);
|
|
this.rgbdata = new Uint32Array(this.imagedata.data.buffer);
|
|
this.peerviewers = [this];
|
|
}
|
|
|
|
createWith(pv : Viewer) {
|
|
this.width = pv.width;
|
|
this.height = pv.height;
|
|
this.imagedata = pv.imagedata;
|
|
this.rgbdata = pv.rgbdata;
|
|
this.canvas = this.newCanvas();
|
|
this.peerviewers = [this, pv];
|
|
}
|
|
|
|
newCanvas() : HTMLCanvasElement {
|
|
var c = document.createElement('canvas');
|
|
c.width = this.width;
|
|
c.height = this.height;
|
|
//if (fmt.xform) c.style.transform = fmt.xform;
|
|
c.classList.add("pixels");
|
|
c.classList.add("pixelated");
|
|
this.ctx = c.getContext('2d');
|
|
return c;
|
|
}
|
|
|
|
updateImage(imdata? : Uint32Array) {
|
|
if (imdata) {
|
|
this.rgbdata.set(imdata);
|
|
}
|
|
for (let v of this.peerviewers) {
|
|
v.ctx.putImageData(this.imagedata, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
class PixEditor extends Viewer {
|
|
|
|
left : PixNode;
|
|
palette : Uint32Array;
|
|
curpalcol : number = -1;
|
|
currgba : number;
|
|
palbtns : JQuery[];
|
|
offscreen : Map<string, number> = new Map();
|
|
|
|
getPositionFromEvent(e) {
|
|
var x = Math.floor(e.offsetX * this.width / $(this.canvas).width());
|
|
var y = Math.floor(e.offsetY * this.height / $(this.canvas).height());
|
|
return {x:x, y:y};
|
|
}
|
|
|
|
setPaletteColor(col: number) {
|
|
col &= this.palette.length-1;
|
|
if (this.curpalcol != col) {
|
|
if (this.curpalcol >= 0)
|
|
this.palbtns[this.curpalcol].removeClass('selected');
|
|
this.curpalcol = col;
|
|
this.currgba = this.palette[col & this.palette.length-1];
|
|
this.palbtns[col].addClass('selected');
|
|
}
|
|
}
|
|
|
|
makeEditable(leftnode:PixNode, aeditor:JQuery, palette:Uint32Array) {
|
|
this.left = leftnode;
|
|
this.palette = palette;
|
|
|
|
var dragcol;
|
|
var dragging = false;
|
|
|
|
var pxls = $(this.canvas);
|
|
pxls.mousedown( (e) => {
|
|
var pos = this.getPositionFromEvent(e);
|
|
dragcol = this.getPixel(pos.x, pos.y) == this.currgba ? this.palette[0] : this.currgba;
|
|
this.setPixel(pos.x, pos.y, this.currgba);
|
|
dragging = true;
|
|
$(document).mouseup( (e) => {
|
|
var pos = this.getPositionFromEvent(e);
|
|
this.setPixel(pos.x, pos.y, dragcol);
|
|
dragging = false;
|
|
this.commit();
|
|
$(document).off('mouseup');
|
|
});
|
|
})
|
|
.mousemove( (e) => {
|
|
var pos = this.getPositionFromEvent(e);
|
|
if (dragging) {
|
|
this.setPixel(pos.x, pos.y, dragcol);
|
|
}
|
|
});
|
|
/*
|
|
Mousetrap.bind('ctrl+shift+h', this.flipX.bind(this));
|
|
Mousetrap.bind('ctrl+shift+v', this.flipY.bind(this));
|
|
Mousetrap.bind('ctrl+shift+9', this.rotate90.bind(this));
|
|
Mousetrap.bind('ctrl+shift+left', this.translate.bind(this, -1, 0));
|
|
Mousetrap.bind('ctrl+shift+right', this.translate.bind(this, 1, 0));
|
|
Mousetrap.bind('ctrl+shift+up', this.translate.bind(this, 0, -1));
|
|
Mousetrap.bind('ctrl+shift+down', this.translate.bind(this, 0, 1));
|
|
*/
|
|
// TODO: remove when unbound
|
|
|
|
aeditor.empty();
|
|
aeditor.append(this.canvas);
|
|
aeditor.append(this.createPaletteButtons());
|
|
this.setPaletteColor(1);
|
|
}
|
|
|
|
getPixel(x:number, y:number) : number {
|
|
x = Math.round(x);
|
|
y = Math.round(y);
|
|
if (x < 0 || x >= this.width || y < 0 || y >= this.height) {
|
|
return this.offscreen[x+','+y] | this.palette[0];
|
|
} else {
|
|
var ofs = x+y*this.width;
|
|
return this.rgbdata[ofs];
|
|
}
|
|
}
|
|
|
|
setPixel(x:number, y:number, rgba:number) : void {
|
|
x = Math.round(x);
|
|
y = Math.round(y);
|
|
if (x < 0 || x >= this.width || y < 0 || y >= this.height) {
|
|
this.offscreen[x+','+y] = rgba;
|
|
} else {
|
|
var ofs = x+y*this.width;
|
|
var oldrgba = this.rgbdata[ofs];
|
|
if (oldrgba != rgba) {
|
|
this.rgbdata[ofs] = rgba;
|
|
this.updateImage();
|
|
}
|
|
}
|
|
}
|
|
|
|
createPaletteButtons() {
|
|
this.palbtns = [];
|
|
var span = newDiv(null, "asset_toolbar");
|
|
for (var i=0; i<this.palette.length; i++) {
|
|
var btn = $(document.createElement('button')).addClass('palbtn');
|
|
var rgb = this.palette[i] & 0xffffff;
|
|
var color = "#" + hex(rgb2bgr(rgb), 6);
|
|
btn.click(this.setPaletteColor.bind(this, i));
|
|
btn.css('backgroundColor', color).text(i.toString(16));
|
|
btn.css('color', (rgb & 0x008000) ? 'black' : 'white');
|
|
span.append(btn);
|
|
this.palbtns.push(btn);
|
|
}
|
|
return span;
|
|
}
|
|
|
|
commit() {
|
|
this.updateImage();
|
|
this.left.refreshLeft();
|
|
}
|
|
|
|
remapPixels(mapfn : (x:number,y:number) => number) {
|
|
var i = 0;
|
|
var pixels = new Uint32Array(this.rgbdata.length);
|
|
for (var y=0; y<this.height; y++) {
|
|
for (var x=0; x<this.width; x++) {
|
|
pixels[i] = mapfn(x, y);
|
|
i++;
|
|
}
|
|
}
|
|
this.rgbdata.set(pixels);
|
|
this.commit();
|
|
}
|
|
|
|
rotate(deg:number) {
|
|
var s1 = Math.sin(deg * Math.PI / 180);
|
|
var c1 = Math.cos(deg * Math.PI / 180);
|
|
this.remapPixels((x,y) => {
|
|
var xx = x + 0.5 - this.width/2.0;
|
|
var yy = y + 0.5 - this.height/2.0;
|
|
var xx2 = xx*c1 - yy*s1 + this.width/2.0 - 0.5;
|
|
var yy2 = yy*c1 + xx*s1 + this.height/2.0 - 0.5;
|
|
return this.getPixel(xx, yy);
|
|
});
|
|
}
|
|
rotate90() {
|
|
this.rotate(90);
|
|
}
|
|
flipX() {
|
|
this.remapPixels((x,y) => {
|
|
return this.getPixel(this.width-1-x, y);
|
|
});
|
|
}
|
|
flipY() {
|
|
this.remapPixels((x,y) => {
|
|
return this.getPixel(x, this.height-1-y);
|
|
});
|
|
}
|
|
translate(dx:number, dy:number) {
|
|
this.remapPixels((x,y) => {
|
|
return this.getPixel(x+dx, y+dy);
|
|
});
|
|
}
|
|
|
|
}
|