diff --git a/css/ui.css b/css/ui.css index 31cf8769..f1d6f2b1 100644 --- a/css/ui.css +++ b/css/ui.css @@ -1,6 +1,19 @@ .dbg_info { font-size: 0.8em; } +.help th { + padding-top: 8px; +} +.help td { + vertical-align: top; + padding: 0 6px; +} +.help td:first-child { + text-align: right; + padding-right: 12px; + padding-bottom: 2px; + min-width: 160px; +} .tooltipbox { position: relative; display: inline-block; @@ -267,6 +280,7 @@ div.emuspacer { border-color:#888; } canvas.pixelated { + cursor: crosshair; image-rendering: optimizeSpeed; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ @@ -275,14 +289,23 @@ canvas.pixelated { -ms-interpolation-mode: nearest-neighbor; /* IE */ } .palbtn { - width:2em; - height:2em; - border-style:none; -} -.palbtn.selected { - border-width:2px; - border-color:white; - border-style:dotted; + width: 2em; + height: 2em; + border-style: none; + position: relative; + border: none; +} +.palbtn.selected::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 2px dotted #888; + border-radius: inherit; + mix-blend-mode: difference; + pointer-events: none; } #javatari-screen canvas { box-sizing: content-box; @@ -513,7 +536,7 @@ div.asset_block.asset_highlight { font-family: "Andale Mono", "Menlo", "Lucida Console", monospace; font-weight: bold; color: #c1c1b0; - background-color: #555; + background-color: #4a4a4a; border-radius: 8px; padding-left: 1em; } @@ -523,6 +546,7 @@ div.asset_block.asset_highlight { cursor: pointer; padding: 1px 4px; border-radius: 4px; + background: rgba(153, 204, 153, 0.15); } .asset_linenos:hover { text-decoration: underline; @@ -572,6 +596,7 @@ div.asset_grid span { .asset_cell { padding: 0px; border: 1px solid black; + cursor: crosshair; } .asset_cell:hover { border: 1px solid white; @@ -587,6 +612,7 @@ td.asset_editable { div.asset_dual { display: flex; align-items: flex-start; + flex-wrap: wrap; } div.asset_dual table { border-spacing: 10px; diff --git a/index.html b/index.html index fd751263..b72f7c1c 100644 --- a/index.html +++ b/index.html @@ -117,6 +117,8 @@ Help
  • diff --git a/src/ide/pixeleditor.ts b/src/ide/pixeleditor.ts index 2e98f828..c029c85c 100644 --- a/src/ide/pixeleditor.ts +++ b/src/ide/pixeleditor.ts @@ -1,11 +1,15 @@ -import { hex, tobin, rgb2bgr, rle_unpack } from "../common/util"; -import { ProjectWindows } from "./windows"; +import { hex, rgb2bgr, rle_unpack, tobin } from "../common/util"; import { Toolbar } from "./toolbar"; +import { ProjectWindows } from "./windows"; import Mousetrap = require('mousetrap'); export type UintArray = number[] | Uint8Array | Uint16Array | Uint32Array; //{[i:number]:number}; +const MAX_SIZE_X = 800; +const MAX_SIZE_Y = 1000; +const MAX_SCALE = 16; + // TODO: separate view/controller export interface EditorContext { setCurrentEditor(div: JQuery, editing: JQuery, node: PixNode): void; @@ -41,11 +45,17 @@ export type PixelEditorImageFormat = { flip?: boolean // flip vertically skip?: number // skip bytes wpimg?: number // words per image + il?: boolean // interleave images row by row aspect?: number // aspect ratio xform?: string // CSS transform + art?: number // artifact color, Apple II destfmt?: PixelEditorImageFormat }; +function getArtBit(fmt: PixelEditorImageFormat): number | null { + return fmt.art ? (fmt.brev ? 0 : 7) : null; +} + export type PixelEditorPaletteFormat = { pal?: number | string n?: number @@ -97,6 +107,8 @@ export function parseHexWords(s: string): number[] { } export function replaceHexWords(s: string, words: UintArray, bpw: number): string { + // convert 'hex ...' format to 0x prefixed values for regex matching + s = convertToHexStatements(s); var result = ""; var m; var li = 0; @@ -163,12 +175,14 @@ export function convertWordsToImages(words: UintArray, fmt: PixelEditorImageForm var pofs = fmt.pofs || wordsperline * height * count; var skip = fmt.skip || 0; var wpimg = fmt.wpimg || wordsperline * height; + var rowstride = wordsperline; + if (fmt.il) { wpimg = wordsperline; rowstride = wordsperline * count; } 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 = wpimg * n + yp * wordsperline; + var ofs0 = wpimg * n + yp * rowstride; var shift = 0; for (var x = 0; x < width; x++) { var color = 0; @@ -250,21 +264,24 @@ export function convertImagesToWords(images: Uint8Array[], fmt: PixelEditorImage var pofs = fmt.pofs || wordsperline * height * count; var skip = fmt.skip || 0; var wpimg = fmt.wpimg || wordsperline * height; + var rowstride = wordsperline; + if (fmt.il) { wpimg = wordsperline; rowstride = wordsperline * count; } + var totalwords = fmt.il ? rowstride * height : wpimg * count; var words; if (nplanes > 0 && fmt.sl) // TODO? - words = new Uint8Array(wpimg * count); + words = new Uint8Array(totalwords); else if (bitsperword <= 8) - words = new Uint8Array(wpimg * count * nplanes); + words = new Uint8Array(totalwords * nplanes); else - words = new Uint32Array(wpimg * count * nplanes); + words = new Uint32Array(totalwords * 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 * wpimg + yp * wordsperline; + var ofs0 = n * wpimg + yp * rowstride; var shift = 0; for (var x = 0; x < width; x++) { var color = imgdata[i++]; @@ -490,43 +507,37 @@ export class FileDataNode extends CodeProjectDataNode { } export class TextDataNode extends CodeProjectDataNode { - text: string; - start: number; - end: number; bpw: number; + rangeId: string; + + private static nextRangeId = 0; - // TODO: what if file size/layout changes? constructor(project: ProjectWindows, fileid: string, label: string, start: number, end: number, bpw?: number) { super(); this.project = project; this.fileid = fileid; this.label = label; - this.start = start; - this.end = end; this.bpw = bpw || 8; + this.rangeId = `asset_${TextDataNode.nextRangeId++}`; + this.project.setAssetRange(this.fileid, this.rangeId, start, end); } + updateLeft() { if (this.right.words.length != this.words.length) throw Error("Cannot put " + this.right.words.length + " image bytes into array of " + this.words.length + " bytes"); this.words = this.right.words; - // TODO: reload editors? - var datastr = this.text.substring(this.start, this.end); + var datastr = this.project.getAssetText(this.fileid, this.rangeId); datastr = replaceHexWords(datastr, this.words, this.bpw); - if (this.project) { - this.project.replaceTextRange(this.fileid, this.start, this.end, datastr); - } - this.text = this.text.substring(0, this.start) + datastr + this.text.substring(this.end); - this.end = this.start + datastr.length; + // CM6 state field automatically remaps all tracked ranges. + this.project.replaceAssetText(this.fileid, this.rangeId, 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 datastr = this.project.getAssetText(this.fileid, this.rangeId); + datastr = convertToHexStatements(datastr); var words = parseHexWords(datastr); - this.words = words; //new Uint8Array(words); // TODO: 16/32? + this.words = words; return true; } } @@ -830,6 +841,7 @@ export class ImageChooser { rgbimgs: Uint32Array[]; width: number; height: number; + gapX: number | null = null; viewers: Viewer[]; recreate(parentdiv: JQuery, onclick) { @@ -843,8 +855,9 @@ export class ImageChooser { var viewer = new Viewer(); viewer.width = this.width; viewer.height = this.height; + viewer.gapX = this.gapX; viewer.recreate(); - viewer.canvas.style.width = (viewer.width * cscale) + 'px'; // TODO + viewer.canvas.style.width = (viewer.displayWidth * cscale) + 'px'; // TODO viewer.canvas.title = '$' + hex(i); viewer.updateImage(imdata); $(viewer.canvas).addClass('asset_cell'); @@ -903,6 +916,7 @@ export class CharmapEditor extends PixNode { this.rgbimgs = this.left.rgbimgs; // if chooser already exists with same number of images, update in place if (this.chooser && this.chooser.viewers && this.chooser.viewers.length == this.rgbimgs.length) { + this.updateArtInfo(); this.chooser.updateImages(this.rgbimgs); // keep rgbimgs pointing to viewer buffers so edits propagate back via refreshLeft for (var i = 0; i < this.chooser.viewers.length; i++) { @@ -918,13 +932,27 @@ export class CharmapEditor extends PixNode { chooser.rgbimgs = this.rgbimgs; chooser.width = this.fmt.w || 1; chooser.height = this.fmt.h || 1; + var artBit = getArtBit(this.fmt); + if (artBit != null) { + chooser.gapX = this.fmt.brev ? artBit + 1 : artBit; + } chooser.recreate(agrid, (index, viewer) => { - var yscale = Math.ceil(256 / this.fmt.w); // TODO: variable scale? - var xscale = yscale * (this.fmt.aspect || 1.0); - var editview = this.createEditor(aeditor, viewer, xscale, yscale); + // TODO: variable scale? + const aspect = this.fmt.aspect || 1.0; + const yscale = Math.min(MAX_SCALE, + MAX_SIZE_X / viewer.displayWidth * aspect, + MAX_SIZE_Y / this.fmt.h); + const xscale = yscale * aspect; + this.createEditor(aeditor, viewer, xscale, yscale); this.context.setCurrentEditor(aeditor, $(viewer.canvas), this); this.rgbimgs[index] = viewer.rgbdata; }); + this.updateArtInfo(); + if (this.fmt.art) { + for (var i = 0; i < this.chooser.viewers.length; i++) { + this.chooser.viewers[i].updateImage(); + } + } // add palette selector // TODO: only view when editing? var palizer = this.left; @@ -945,15 +973,28 @@ export class CharmapEditor extends PixNode { return true; } + updateArtInfo() { + if (!this.fmt.art || !this.chooser || !this.chooser.viewers) return; + var bitsperword = this.fmt.bpw || 8; + var artBit = getArtBit(this.fmt)!; + var indexedImages = this.left.images; + if (!indexedImages) return; + for (var i = 0; i < this.chooser.viewers.length; i++) { + var viewer = this.chooser.viewers[i]; + viewer.artInfo = { + artBit: artBit, + bitsperword: bitsperword, + indexedImage: indexedImages[i] + }; + } + } + createEditor(aeditor: JQuery, viewer: Viewer, xscale: number, yscale: number): PixEditor { var im = new PixEditor(); im.createWith(viewer); im.updateImage(); - var w = viewer.width * xscale; + var w = im.displayWidth * xscale; var h = viewer.height * yscale; - while (w > 500 || h > 500) { - w /= 2; h /= 2; - } im.canvas.style.width = w + 'px'; // TODO im.canvas.style.height = h + 'px'; // TODO im.makeEditable(this, aeditor, this.left.palette); @@ -999,32 +1040,50 @@ export class Viewer { width: number; height: number; + gapX: number | null = null; canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D; imagedata: ImageData; rgbdata: Uint32Array; + displayImageData: ImageData; + displayRgbData: Uint32Array; peerviewers: Viewer[]; + artInfo: { artBit: number, bitsperword: number, indexedImage: Uint8Array } | null = null; + + get displayWidth(): number { + return this.width + (this.gapX != null ? 1 : 0); + } recreate() { this.canvas = this.newCanvas(); this.imagedata = this.ctx.createImageData(this.width, this.height); this.rgbdata = new Uint32Array(this.imagedata.data.buffer); + if (this.gapX != null) { + this.displayImageData = this.ctx.createImageData(this.displayWidth, this.height); + this.displayRgbData = new Uint32Array(this.displayImageData.data.buffer); + } this.peerviewers = [this]; } createWith(pv: Viewer) { this.width = pv.width; this.height = pv.height; + this.gapX = pv.gapX; this.imagedata = pv.imagedata; this.rgbdata = pv.rgbdata; this.canvas = this.newCanvas(); + if (this.gapX != null) { + this.displayImageData = this.ctx.createImageData(this.displayWidth, this.height); + this.displayRgbData = new Uint32Array(this.displayImageData.data.buffer); + } pv.peerviewers.push(this); this.peerviewers = pv.peerviewers; + this.artInfo = pv.artInfo; } newCanvas(): HTMLCanvasElement { var c = document.createElement('canvas'); - c.width = this.width; + c.width = this.displayWidth; c.height = this.height; //if (fmt.xform) c.style.transform = fmt.xform; c.classList.add("pixels"); @@ -1038,7 +1097,24 @@ export class Viewer { this.rgbdata.set(imdata); } for (let v of this.peerviewers) { - v.ctx.putImageData(this.imagedata, 0, 0); + if (v.gapX != null && v.displayRgbData) { + var gx = v.gapX; + var dw = v.displayWidth; + for (var y = 0; y < this.height; y++) { + var srcOfs = y * this.width; + var dstOfs = y * dw; + for (var x = 0; x < gx; x++) { + v.displayRgbData[dstOfs + x] = this.rgbdata[srcOfs + x]; + } + v.displayRgbData[dstOfs + gx] = 0x00000000; // Transparent gap column. + for (var x = gx; x < this.width; x++) { + v.displayRgbData[dstOfs + x + 1] = this.rgbdata[srcOfs + x]; + } + } + v.ctx.putImageData(v.displayImageData, 0, 0); + } else { + v.ctx.putImageData(this.imagedata, 0, 0); + } } } } @@ -1052,9 +1128,11 @@ class PixEditor extends Viewer { palbtns: JQuery[]; offscreen: Map = new Map(); - getPositionFromEvent(e) { - var x = Math.floor(e.offsetX * this.width / $(this.canvas).width()); + getPositionFromEvent(e): { x: number, y: number } { + var dw = this.displayWidth; + var x = Math.floor(e.offsetX * dw / $(this.canvas).width()); var y = Math.floor(e.offsetY * this.height / $(this.canvas).height()); + if (this.gapX != null && x > this.gapX) x--; return { x: x, y: y }; } @@ -1077,8 +1155,20 @@ class PixEditor extends Viewer { var dragging = false; var pxls = $(this.canvas); + var artDragIdx = -1; pxls.mousedown((e) => { var pos = this.getPositionFromEvent(e); + if (this.isArtPixel(pos.x)) { + artDragIdx = this.toggleArtPixel(pos.x, pos.y); + dragging = true; + $(document).mouseup((e) => { + $(document).off('mouseup'); + dragging = false; + artDragIdx = -1; + this.commit(); + }); + return; + } dragcol = this.getPixel(pos.x, pos.y) == this.currgba ? this.palette[0] : this.currgba; this.setPixel(pos.x, pos.y, this.currgba); dragging = true; @@ -1092,7 +1182,10 @@ class PixEditor extends Viewer { }) .mousemove((e) => { var pos = this.getPositionFromEvent(e); - if (dragging) { + if (!dragging) return; + if (artDragIdx >= 0 && this.isArtPixel(pos.x)) { + this.setArtPixel(pos.x, pos.y, artDragIdx); + } else if (artDragIdx < 0 && !this.isArtPixel(pos.x)) { this.setPixel(pos.x, pos.y, dragcol); } }); @@ -1104,6 +1197,31 @@ class PixEditor extends Viewer { this.setPaletteColor(1); } + isArtPixel(x: number): boolean { + if (!this.artInfo) return false; + return (x % this.artInfo.bitsperword) == this.artInfo.artBit; + } + + toggleArtPixel(x: number, y: number): number { + var info = this.artInfo; + if (!info) return -1; + var ofs = y * this.width + x; + var newIdx = info.indexedImage[ofs] ? 0 : 1; + this.setArtPixel(x, y, newIdx); + return newIdx; + } + + setArtPixel(x: number, y: number, idx: number): void { + var info = this.artInfo; + if (!info) return; + if (x < 0 || x >= this.width || y < 0 || y >= this.height) return; + var ofs = y * this.width + x; + if (info.indexedImage[ofs] == idx) return; + info.indexedImage[ofs] = idx; + this.rgbdata[ofs] = this.palette[idx]; + this.updateImage(); + } + getPixel(x: number, y: number): number { x = Math.round(x); y = Math.round(y); @@ -1168,16 +1286,47 @@ class PixEditor extends Viewer { } } + copyNonArtPixels(dst: Uint32Array, dstWidth: number, src: Uint32Array, srcWidth: number) { + for (var y = 0; y < this.height; y++) { + var si = 0, di = 0; + for (var x = 0; x < this.width; x++) { + var isArt = this.isArtPixel(x); + if (!isArt) + dst[y * dstWidth + di] = src[y * srcWidth + si]; + if (!isArt || srcWidth === this.width) si++; + if (!isArt || dstWidth === this.width) di++; + } + } + } + remapPixels(mapfn: (x: number, y: number) => number) { + // Strip art bit columns so transforms ignore them. + var savedRgb = this.rgbdata; + var savedWidth = this.width; + if (this.artInfo) { + var bpw = this.artInfo.bitsperword; + var strippedWidth = this.width - Math.floor(this.width / bpw); + var stripped = new Uint32Array(strippedWidth * this.height); + this.copyNonArtPixels(stripped, strippedWidth, this.rgbdata, this.width); + this.rgbdata = stripped; + this.width = strippedWidth; + } + // Apply the transform. 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++; + pixels[i++] = mapfn(x, y); } } - this.rgbdata.set(pixels); + // Restore art bit columns from the original data. + this.rgbdata = savedRgb; + this.width = savedWidth; + if (this.artInfo) { + this.copyNonArtPixels(this.rgbdata, this.width, pixels, strippedWidth); + } else { + this.rgbdata.set(pixels); + } this.commit(); } diff --git a/src/ide/ui.ts b/src/ide/ui.ts index 3e016724..86180954 100644 --- a/src/ide/ui.ts +++ b/src/ide/ui.ts @@ -493,7 +493,7 @@ async function getSkeletonFile(fileid: string): Promise { try { return await $.get("presets/" + getBasePlatform(platform_id) + "/skeleton." + ext, 'text'); } catch (e) { - console.log(e+""); + console.log(e + ""); return null; } } @@ -707,19 +707,27 @@ export function getCurrentEditorFilename(): string { function _revertFile(e) { var wnd = projectWindows.getActive(); - if (wnd && wnd.setText) { - var fn = projectWindows.getActiveID(); - $.get("presets/" + getBasePlatform(platform_id) + "/" + fn, (text) => { + var fn = projectWindows.getActiveID(); + var isBinary = wnd && wnd.setData && !wnd.setText; + if (wnd && (wnd.setText || wnd.setData)) { + var url = "presets/" + getBasePlatform(platform_id) + "/" + fn; + getWithBinary(url, (data) => { + if (data == null) { + if (repo_id) alertError("Can only revert built-in examples. If you want to revert all files, You can pull from the repository."); + else alertError("Can only revert built-in examples."); + return; + } bootbox.confirm("Reset '" + DOMPurify.sanitize(fn) + "' to default?", (ok) => { if (ok) { - wnd.setText(text); + if (isBinary) { + wnd.setData(data as Uint8Array); + current_project.updateFile(fn, data as Uint8Array); + } else { + wnd.setText(data as string); + } } }); - }, 'text') - .fail(() => { - if (repo_id) alertError("Can only revert built-in examples. If you want to revert all files, You can pull from the repository."); - else alertError("Can only revert built-in examples."); - }); + }, isBinary ? 'arraybuffer' : 'text'); } else { alertError("Cannot revert the active window. Please choose a text file."); } @@ -1500,6 +1508,8 @@ function setupDebugControls() { $("#item_addfile_link").click(_addLinkFile); $("#item_request_persist").click(() => requestPersistPermission(true, false)); $("#item_settings").click(openSettings); + $("#item_keyboard_shortcuts").click(openKeyboardShortcuts); + $("#item_asset_editor_help").click(openAssetEditorHelp); updateDebugWindows(); // code analyzer? if (platform.newCodeAnalyzer) { @@ -1525,6 +1535,94 @@ function setupDebugControls() { } } +function openKeyboardShortcuts() { + const isMac = /Mac|iPhone|iPad/.test(navigator.platform); + const mod = isMac ? '⌘' : 'Ctrl'; + const alt = isMac ? '⌥' : 'Alt'; + const shift = isMac ? '⇧' : 'Shift'; + const shortcut = (keys: string, desc: string) => + `${keys}${desc}`; + bootbox.dialog({ + title: "Keyboard shortcuts", + onEscape: true, + message: ` + + + ${shortcut(`${shift}+${alt}+F`, 'Format document, or selected range(s)')} + ${shortcut('Tab', 'Insert to next tab stop, or indent selected range(s)')} + ${shortcut(`${shift}+Tab`, 'Outdent line(s) or selected range(s)')} + ${shortcut(`Enter`, 'Insert newline, keep cursor at same column pos')} + + + + + +
    Custom
    Standard
    Built-in + Included CodeMirror shortcuts:
    + defaultKeymap, + standardKeymap, + historyKeymap, + searchKeymap +
    `, + buttons: { + ok: { label: "OK", className: "btn-primary" } + } + }); +} + +function openAssetEditorHelp() { + const row = (field: string, dflt: string, desc: string) => + `${field}${dflt}${desc}`; + bootbox.dialog({ + title: "Asset Editor Reference", + onEscape: true, + message: ` +

    Add asset headers in source code as comments containing JSON format descriptors:

    +

    + C: /*{w:8,h:8}*/ followed by data, terminated by ;
    + ASM: ;;{w:8,h:8};; followed by data, terminated by ;; +

    + + + + ${row('w', 'required', 'Width in pixels')} + ${row('h', 'required', 'Height in pixels')} + ${row('count', '1', 'Number of images')} + ${row('bpp', '1', 'Bits per pixel')} + ${row('np', '1', 'Number of bitplanes (total colors = 2bpp×np)')} + ${row('bpw', '8', 'Bits per word (8, 16, 32)')} + ${row('sl', 'ceil(w×bpp/bpw)', 'Words per scanline (stride)')} + ${row('brev', 'false', 'Bit reverse: true = MSB is leftmost pixel')} + ${row('flip', 'false', 'Flip vertically (y=0 is bottom row)')} + ${row('skip', '0', 'Skip bytes at start of each image')} + ${row('pofs', 'sl×h×count', 'Offset between bitplanes')} + ${row('il', '0', 'Interleave images row by row (data stored as one wide block)')} + ${row('remap', '—', 'Bit remapping table for address lines')} + ${row('reindex', '—', 'Pixel-to-byte/bit remapping')} + ${row('wpimg', 'sl×h', 'Words per image')} + ${row('aspect', '1', 'Pixel aspect ratio for display')} + ${row('xform', '—', 'CSS transform on canvas')} + ${row('art', 'false', 'Artifact color mode: true = Apple II HGR (bit 7 toggles artifact color)')} + + + ${row('pal', '—', 'Palette: number (e.g. 332 = 3R,3G,2B) or name (nes, vcs, c64, ap2lores, astrocade)')} + ${row('n', '—', 'Number of palette entries')} + ${row('layout', '—', 'Palette editor layout (nes, astrocade)')} + + + + + + + +
    Image Format
    FieldDefaultDescription
    Palette Format
    FieldDefaultDescription
    Examples
    /*{w:8,h:8,bpp:1,brev:1}*/8x8 1bpp, MSB first (NES-style)
    ;;{w:8,h:5,count:4,il:1};;4 interleaved 8x5 chars (stored as 32x5 block)
    ;;{w:7,h:8};;7x8 1bpp, LSB first (Apple II HGR)
    ;;{w:8,h:8,art:true};;8x8 with artifact color (Apple II HGR, bit 7 toggle)
    /*{w:16,h:16,bpp:4,np:1}*/16x16 4bpp
    /*{pal:332,n:16}*/16-entry RGB332 palette
    `, + buttons: { + ok: { label: "OK", className: "btn-primary" } + }, + size: "large" + }); +} + function setupReplaySlider() { var replayslider = $("#replayslider"); var clockslider = $("#clockslider"); diff --git a/src/ide/views/asseteditor.ts b/src/ide/views/asseteditor.ts index 2c94c83d..54d2f104 100644 --- a/src/ide/views/asseteditor.ts +++ b/src/ide/views/asseteditor.ts @@ -1,9 +1,9 @@ -import { newDiv, ProjectView } from "./baseviews"; -import { platform_id, current_project, projectWindows } from "../ui"; +import { hex, rgb2bgr, safeident } from "../../common/util"; import { FileData } from "../../common/workertypes"; -import { hex, safeident, rgb2bgr } from "../../common/util"; import * as pixed from "../pixeleditor"; +import { current_project, platform_id, projectWindows } from "../ui"; +import { newDiv, ProjectView } from "./baseviews"; import Mousetrap = require('mousetrap'); function getLineNumber(data: string, offset: number): number { @@ -351,6 +351,7 @@ export class AssetEditorView implements ProjectView, pixed.EditorContext { .appendTo(this.ensureFileDiv(fileid)); var snip = $('
    ').appendTo(block); var linenos = $('').appendTo(snip); + $('').text('↗ ').appendTo(linenos); $('').text(frag.startline).appendTo(linenos); linenos.append('-'); $('').text(frag.endline).appendTo(linenos); @@ -424,6 +425,8 @@ export class AssetEditorView implements ProjectView, pixed.EditorContext { this.clearAssets(); current_project.iterateFiles((fileid, data) => { try { + // Clear stale tracked ranges before re-scanning this file. + projectWindows.clearAssetRanges(fileid); var nassets = this.refreshAssetsInFile(fileid, data); } catch (e) { console.log(e); @@ -477,9 +480,11 @@ export class AssetEditorView implements ProjectView, pixed.EditorContext { setVisible?(showing: boolean): void { // TODO: make into toolbar? if (showing) { - // limit undo/redo to since opening this editor - projectWindows.undofiles = []; - projectWindows.redofiles = []; + // ensure asset editor is safe to perform synchronous reads/writes + projectWindows.flushAllWindows(); + // limit undo/redo to since opening this asset editor + projectWindows.undoStack = []; + projectWindows.redoStack = []; if (Mousetrap.bind) { Mousetrap.bind('mod+z', (e) => { projectWindows.undoStep(); return false; }); Mousetrap.bind('mod+shift+z', (e) => { projectWindows.redoStep(); return false; }); diff --git a/src/ide/views/baseviews.ts b/src/ide/views/baseviews.ts index 27e84264..cef47c4f 100644 --- a/src/ide/views/baseviews.ts +++ b/src/ide/views/baseviews.ts @@ -10,6 +10,7 @@ export interface ProjectView { getPath?(): string; getValue?(): string; setText?(text: string): void; + setData?(data: any): void; insertLinesBefore?(text: string): void; getCursorPC?(): number; getSourceFile?(): SourceFile; @@ -20,7 +21,11 @@ export interface ProjectView { recreateOnResize?: boolean; undoStep?(): void; redoStep?(): void; - replaceTextRange?(from: number, to: number, text: string): void; + flushChanges?(): void; + setAssetRange?(id: string, from: number, to: number): void; + getAssetText?(id: string): string | null; + replaceAssetText?(id: string, text: string): void; + clearAssetRanges?(): void; }; // detect mobile (https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device) diff --git a/src/ide/views/editors.ts b/src/ide/views/editors.ts index cecd5394..e08a9d33 100644 --- a/src/ide/views/editors.ts +++ b/src/ide/views/editors.ts @@ -3,7 +3,7 @@ import { cpp } from "@codemirror/lang-cpp"; import { markdown } from "@codemirror/lang-markdown"; import { bracketMatching, foldGutter, indentOnInput, indentService, indentUnit } from "@codemirror/language"; import { highlightSelectionMatches, search, searchKeymap } from "@codemirror/search"; -import { EditorState, Extension } from "@codemirror/state"; +import { EditorState, Extension, StateEffect, StateField } from "@codemirror/state"; import { crosshairCursor, drawSelection, dropCursor, EditorView, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, rectangularSelection, ViewUpdate } from "@codemirror/view"; import { CodeAnalyzer } from "../../common/analysis"; import { hex, rpad } from "../../common/util"; @@ -31,6 +31,39 @@ import { currentPc, errorMessages, errorSpans, highlightLines, showValue } from // look ahead this many bytes when finding source lines for a PC export const PC_LINE_LOOKAHEAD = 64; +// Asset range tracking. Positions are automatically remapped through +// document changes (edits, undo, redo) by CodeMirror's transaction system. +const setAssetRangesEffect = StateEffect.define<{id: string, from: number, to: number}[]>(); +const clearAssetRangesEffect = StateEffect.define(); + +const assetRangesField = StateField.define>({ + create() { return new Map(); }, + update(ranges, tr) { + let result = ranges; + for (let e of tr.effects) { + if (e.is(clearAssetRangesEffect)) { + result = new Map(); + } else if (e.is(setAssetRangesEffect)) { + if (result === ranges) result = new Map(ranges); + for (let r of e.value) { + result.set(r.id, { from: r.from, to: r.to }); + } + } + } + if (!tr.changes.empty) { + const mapped = new Map(); + for (const [id, r] of result) { + mapped.set(id, { + from: tr.changes.mapPos(r.from, -1), + to: tr.changes.mapPos(r.to, 1) + }); + } + return mapped; + } + return result; + } +}); + const MAX_ERRORS = 200; const MODEDEFS = { @@ -249,6 +282,8 @@ export class SourceEditor implements ProjectView { highlightLines.field, + assetRangesField, + createAssetHeaderPlugin((lineNumber: number) => { window.location.hash = 'asseteditor/' + encodeURIComponent(this.path) + '/' + lineNumber; }), @@ -282,6 +317,14 @@ export class SourceEditor implements ProjectView { }, this.refreshDelayMsec); } + flushChanges() { + if (this.updateTimer) { + clearTimeout(this.updateTimer); + this.updateTimer = null; + current_project.updateFile(this.path, this.editor.state.doc.toString()); + } + } + inspectUnderCursor(update: ViewUpdate) { // TODO: handle multi-select const range = update.state.selection.main; @@ -314,18 +357,41 @@ export class SourceEditor implements ProjectView { } replaceTextRange(from: number, to: number, text: string) { - const fromline = this.editor.state.doc.lineAt(from).number; - const toline = this.editor.state.doc.lineAt(to).number; + const lineStart = this.editor.state.doc.lineAt(from).from; this.editor.dispatch({ changes: { from, to, insert: text }, annotations: isolateHistory.of("full"), - selection: { anchor: from, head: to }, + selection: { anchor: from + text.length, head: from }, effects: [ - EditorView.scrollIntoView(this.editor.state.doc.line(fromline).from, { y: "start", yMargin: 100/*pixels*/ }), + EditorView.scrollIntoView(lineStart, { y: "start", yMargin: 100/*pixels*/ }), ] }); } + setAssetRange(id: string, from: number, to: number) { + this.editor.dispatch({ + effects: setAssetRangesEffect.of([{ id, from, to }]) + }); + } + + getAssetText(id: string): string | null { + var range = this.editor.state.field(assetRangesField).get(id); + if (!range) return null; + return this.editor.state.doc.sliceString(range.from, range.to); + } + + replaceAssetText(id: string, text: string) { + var range = this.editor.state.field(assetRangesField).get(id); + if (!range) return; + this.replaceTextRange(range.from, range.to, text); + } + + clearAssetRanges() { + this.editor.dispatch({ + effects: clearAssetRangesEffect.of(undefined) + }); + } + insertLinesBefore(text: string) { const pos = this.editor.state.selection.main.from; const lineNum = this.editor.state.doc.lineAt(pos).number; diff --git a/src/ide/windows.ts b/src/ide/windows.ts index 07a80037..414d5cc9 100644 --- a/src/ide/windows.ts +++ b/src/ide/windows.ts @@ -1,13 +1,18 @@ import $ = require("jquery"); +import { getFilenameForPath, getFilenamePrefix } from "../common/util"; +import { FileData, WorkerError } from "../common/workertypes"; import { CodeProject } from "./project"; -import { WorkerError, FileData } from "../common/workertypes"; -import { getFilenamePrefix, getFilenameForPath } from "../common/util"; import { ProjectView } from "./views/baseviews"; type WindowCreateFunction = (id: string) => ProjectView; type WindowShowFunction = (id: string, view: ProjectView) => void; +interface UndoEntry { + fileid: string; + data?: Uint8Array; +} + export class ProjectWindows { containerdiv: HTMLElement; project: CodeProject; @@ -19,16 +24,16 @@ export class ProjectWindows { activewnd: ProjectView; activediv: HTMLElement; lasterrors: WorkerError[]; - undofiles: string[]; - redofiles: string[]; + undoStack: UndoEntry[]; + redoStack: UndoEntry[]; titlePrefix: string; alerting: boolean; constructor(containerdiv: HTMLElement, project: CodeProject) { this.containerdiv = containerdiv; this.project = project; - this.undofiles = []; - this.redofiles = []; + this.undoStack = []; + this.redoStack = []; } // TODO: delete windows ever? @@ -154,52 +159,104 @@ export class ProjectWindows { } updateFile(fileid: string, data: FileData) { - // is there an editor? if so, use it - var wnd = this.id2window[fileid]; - if (wnd && wnd.setText && typeof data === 'string') { - wnd.setText(data); - this.undofiles.push(fileid); - this.redofiles = []; - } else { + if (data instanceof Uint8Array) { + var prev = this.project.getFile(fileid); + this.undoStack.push({ fileid, data: prev instanceof Uint8Array ? new Uint8Array(prev) : undefined }); this.project.updateFile(fileid, data); + } else { + var wnd = this.id2window[fileid]; + if (wnd && wnd.setText && typeof data === 'string') { + wnd.setText(data); + this.undoStack.push({ fileid }); + } else { + this.project.updateFile(fileid, data); + return; + } } + this.redoStack = []; } - replaceTextRange(fileid: string, from: number, to: number, text: string) { + setAssetRange(fileid: string, id: string, from: number, to: number) { var wnd = this.id2window[fileid] || this.create(fileid); - wnd.replaceTextRange(from, to, text); - this.undofiles.push(fileid); - this.redofiles = []; + if (wnd.setAssetRange) { + wnd.setAssetRange(id, from, to); + } } - undoStep() { - var fileid = this.undofiles.pop(); + getAssetText(fileid: string, id: string): string | null { + var wnd = this.id2window[fileid] || this.create(fileid); + if (wnd.getAssetText) { + return wnd.getAssetText(id); + } + return null; + } + + replaceAssetText(fileid: string, id: string, text: string) { + var wnd = this.id2window[fileid] || this.create(fileid); + if (wnd.replaceAssetText) { + wnd.replaceAssetText(id, text); + } + this.undoStack.push({ fileid }); + this.redoStack = []; + } + + clearAssetRanges(fileid: string) { var wnd = this.id2window[fileid]; - if (wnd && wnd.undoStep) { - wnd.undoStep(); - if (wnd.getValue) { - this.project.updateFile(fileid, wnd.getValue()); - } - this.redofiles.push(fileid); - this.refresh(false); - } else { + if (wnd && wnd.clearAssetRanges) { + wnd.clearAssetRanges(); + } + } + + undoStep() { + var entry = this.undoStack.pop(); + if (!entry) { this.showAlert("No more steps to undo."); + return; } + if (entry.data) { + var current = this.project.getFile(entry.fileid); + this.redoStack.push({ fileid: entry.fileid, data: current instanceof Uint8Array ? new Uint8Array(current) : undefined }); + this.project.updateFile(entry.fileid, entry.data); + } else { + var wnd = this.id2window[entry.fileid]; + if (wnd && wnd.undoStep) { + wnd.undoStep(); + if (wnd.getValue) { + this.project.updateFile(entry.fileid, wnd.getValue()); + } + this.redoStack.push({ fileid: entry.fileid }); + } else { + this.showAlert("No more steps to undo."); + return; + } + } + this.refresh(false); } redoStep() { - var fileid = this.redofiles.pop(); - var wnd = this.id2window[fileid]; - if (wnd && wnd.redoStep) { - wnd.redoStep(); - if (wnd.getValue) { - this.project.updateFile(fileid, wnd.getValue()); - } - this.undofiles.push(fileid); - this.refresh(false); - } else { + var entry = this.redoStack.pop(); + if (!entry) { this.showAlert("No more steps to redo."); + return; } + if (entry.data) { + var current = this.project.getFile(entry.fileid); + this.undoStack.push({ fileid: entry.fileid, data: current instanceof Uint8Array ? new Uint8Array(current) : undefined }); + this.project.updateFile(entry.fileid, entry.data); + } else { + var wnd = this.id2window[entry.fileid]; + if (wnd && wnd.redoStep) { + wnd.redoStep(); + if (wnd.getValue) { + this.project.updateFile(entry.fileid, wnd.getValue()); + } + this.undoStack.push({ fileid: entry.fileid }); + } else { + this.showAlert("No more steps to redo."); + return; + } + } + this.refresh(false); } showAlert(msg: string) { @@ -208,6 +265,15 @@ export class ProjectWindows { bootbox.alert(msg, () => { this.alerting = false; }); } + flushAllWindows() { + for (var fileid in this.id2window) { + var wnd = this.id2window[fileid]; + if (wnd && wnd.flushChanges) { + wnd.flushChanges(); + } + } + } + updateAllOpenWindows(store) { for (var fileid in this.id2window) { var wnd = this.id2window[fileid]; diff --git a/test/cli/testpixelconvert.js b/test/cli/testpixelconvert.js index c7460bd5..b3c2b7b4 100644 --- a/test/cli/testpixelconvert.js +++ b/test/cli/testpixelconvert.js @@ -11,6 +11,33 @@ function dumbEqual(a,b) { return assert.deepEqual(a,b); } +// Minimal mock that satisfies TextDataNode's project interface. +function mockProject(text) { + var fileText = text; + var ranges = {}; + return { + setAssetRange: function(fileid, id, from, to) { ranges[id] = {from: from, to: to}; }, + getAssetText: function(fileid, id) { + var r = ranges[id]; + return r ? fileText.substring(r.from, r.to) : null; + }, + replaceAssetText: function(fileid, id, newText) { + var r = ranges[id]; + if (!r) return; + var delta = newText.length - (r.to - r.from); + fileText = fileText.substring(0, r.from) + newText + fileText.substring(r.to); + var replacedFrom = r.from, replacedTo = r.to; + r.to = r.from + newText.length; + for (var otherId in ranges) { + if (otherId === id) continue; + var other = ranges[otherId]; + if (other.from >= replacedTo) other.from += delta; + if (other.to >= replacedTo) other.to += delta; + } + } + }; +} + describe('Pixel editor', function() { it('Should decode', function() { @@ -18,8 +45,7 @@ describe('Pixel editor', function() { var palfmt = {pal:332,n:16}; var paldatastr = " 0x00, 0x03, 0x19, 0x50, 0x52, 0x07, 0x1f, 0x37, 0xe0, 0xa4, 0xfd, 0xff, 0x38, 0x70, 0x7f, 0x7f, "; // test two entries the same - var node4 = new pixed.TextDataNode(null, null, null, 0, paldatastr.length); - node4.text = paldatastr; + var node4 = new pixed.TextDataNode(mockProject(paldatastr), 'test', 'test', 0, paldatastr.length); var node5 = new pixed.PaletteFormatToRGB(palfmt); node4.addRight(node5); node4.refreshRight(); @@ -51,8 +77,7 @@ describe('Pixel editor', function() { }; var datastr = "1,2, 0x00,0x00,0xef,0xef,0xe0,0x00,0x00, 0x00,0xee,0xee,0xfe,0xee,0xe0,0x00, 0x0e,0xed,0xef,0xef,0xed,0xee,0x00, 0x0e,0xee,0xdd,0xdd,0xde,0xee,0x00, 0x0e,0xee,0xed,0xde,0xee,0xee,0x00, 0x00,0xee,0xee,0xde,0xee,0xe0,0x00, 0x00,0xee,0xee,0xde,0xee,0xe0,0x00, 0x00,0x00,0xed,0xdd,0xe0,0x00,0x0d, 0xdd,0xdd,0xee,0xee,0xed,0xdd,0xd0, 0x0d,0xee,0xee,0xee,0xee,0xee,0x00, 0x0e,0xe0,0xee,0xee,0xe0,0xee,0x00, 0x0e,0xe0,0xee,0xee,0xe0,0xee,0x00, 0x0e,0xe0,0xdd,0xdd,0xd0,0xde,0x00, 0x0d,0x00,0xee,0x0e,0xe0,0x0d,0x00, 0x00,0x00,0xed,0x0e,0xe0,0x00,0x00, 0x00,0x0d,0xdd,0x0d,0xdd,0x00,0x18,"; - var node1 = new pixed.TextDataNode(null, null, null, 0, datastr.length); - node1.text = datastr; + var node1 = new pixed.TextDataNode(mockProject(datastr), 'test', 'test', 0, datastr.length); var node2 = new pixed.Mapper(fmt); node1.addRight(node2); var node3 = new pixed.Palettizer(ctx, fmt);