littlejsengine 1.25.0 → 1.26.0

package/src/engineDraw.js

@@ -127,7 +127,7 @@ function tile(index=0, size=tileDefaultSize, texture=0, padding=tileDefaultPaddi
     if (typeof size === 'number')
     {
         // if size is a number, make it a vector
-        ASSERT(size > 0);
+        ASSERT(size > 0, 'tile: size must be above 0', size);
         size = new Vector2(size, size);
     }
 
@@ -138,7 +138,8 @@ function tile(index=0, size=tileDefaultSize, texture=0, padding=tileDefaultPaddi
     {
         // no image: headless loads none and keeps the size; an image that failed to load, whose warning named it, gives
         // a tile of no size, which draws nothing; a slot never given an image is a mistake a debug build points out
-        ASSERT(headlessMode || textureInfo instanceof TextureInfo, 'tile texture is not loaded', texture);
+        ASSERT(headlessMode || textureInfo instanceof TextureInfo,
+            'tile: no texture ' + texture + ', pass its image to engineInit and make tiles in gameInit or later');
         return new TileInfo(new Vector2, headlessMode ? size.copy() : new Vector2, textureInfo, padding, bleed);
     }
 
@@ -209,7 +210,7 @@ class TileInfo
     */
     frame(frame)
     {
-        ASSERT(typeof frame === 'number');
+        ASSERT(typeof frame === 'number', 'TileInfo.frame: frame must be a number', frame);
         const w = this.size.x + this.padding*2;
         const h = this.size.y + this.padding*2;
         const x = (this.columns ? frame % this.columns : frame) * w;
@@ -578,6 +579,12 @@ class Shader
         this.program3D = undefined;
         glShaderObjects.push(this); // a lost context drops the programs of every one
     }
+
+    /** Let go of this shader: its compiled programs are freed and it leaves the engine's list of shaders, which
+     *  keeps every one made for a lost context, so a scene made again and again, or an editor trying snippets, does
+     *  not keep them all; calling it again does nothing, and a draw with it afterwards compiles it again and takes it
+     *  back, so only let go of one no object still draws with when it should stay freed */
+    dispose() { glShaderDispose(this); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -600,6 +607,8 @@ function drawTile(pos, size=vec2(1), tileInfo, color=WHITE,
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isVector2(size), 'size must be a vec2');
+    ASSERT(!tileInfo || tileInfo instanceof TileInfo, 'drawTile: tileInfo must be a TileInfo, color comes after it',
+        tileInfo);
     ASSERT(isColor(color), 'color is invalid');
     ASSERT(isNumber(angle), 'angle must be a number');
     ASSERT(!additiveColor || isColor(additiveColor), 'additiveColor must be a color');
@@ -663,6 +672,8 @@ function drawTile(pos, size=vec2(1), tileInfo, color=WHITE,
             {
                 // un-flip Y so the image renders right-side up under drawCanvas2D's Y flip
                 context.scale(1, -1);
+                // smooth or pixelated as the texture says, as WebGL draws it, inside drawCanvas2D's save
+                textureInfo.pixelated === undefined || (context.imageSmoothingEnabled = !textureInfo.pixelated);
                 // calculate uvs and render
                 const x = tileInfo.pos.x,  y = tileInfo.pos.y;
                 const w = tileInfo.size.x, h = tileInfo.size.y;
@@ -826,12 +837,29 @@ function drawTextureWrapped(pos, size, wrapCount, texture=0, color=WHITE,
     // alpha is baked into pixels by bakeTintedImage's additive branch;
     // in that case globalAlpha must NOT also apply color.a
     const alphaBaked = !noTint && additiveColor && !isBlack(additiveColor);
-    const source = noTint
-        ? textureInfo.image
-        : bakeTintedImage(textureInfo.image, color, additiveColor);
+    let source = textureInfo.image;
+    if (!noTint)
+    {
+        // a bake is a pass over every pixel, so it is kept for the image until its tint changes; a canvas, which has
+        // getContext, may have been drawn into since, so it is baked again at every draw, its copy kept at its size
+        const key = color.r + ',' + color.g + ',' + color.b + ',' + color.a +
+            (additiveColor ? ',' + additiveColor.r + ',' + additiveColor.g + ',' + additiveColor.b + ',' + additiveColor.a : '');
+        let baked = drawTextureWrappedBakes.get(source);
+        if (baked?.key !== key || 'getContext' in source)
+        {
+            const kept = baked?.context, fits = kept?.canvas.width === (source.width|0) &&
+                kept?.canvas.height === (source.height|0);
+            const bakeContext = fits ? kept : createCanvasContext(source.width|0, source.height|0, true);
+            bakeTintedImage(source, color, additiveColor, bakeContext);
+            drawTextureWrappedBakes.set(source, baked = {key, context: bakeContext});
+        }
+        source = baked.context.canvas;
+    }
 
     context = context || drawContext;
     context.save();
+    // smooth or pixelated as the texture says, as WebGL draws it
+    textureInfo.pixelated === undefined || (context.imageSmoothingEnabled = !textureInfo.pixelated);
     context.translate(pos.x + .5, pos.y + .5);
     context.rotate(angle);
     context.globalAlpha = alphaBaked ? 1 : color.a;
@@ -1277,6 +1305,10 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
  *  @memberof Draw */
 function drawText(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=drawContext)
 {
+    // checked before it is scaled, a vec2 size would come out NaN
+    ASSERT(isVector2(pos), 'drawText: pos must be a vec2', pos);
+    ASSERT(isNumber(size), 'drawText: size is a number, the height of the text in world units', size);
+
     // convert to screen space
     pos = worldToScreen(pos);
     size *= cameraScale;
@@ -1288,6 +1320,73 @@ function drawText(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK,
     drawTextScreen(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, angle, context);
 }
 
+// the fonts a debug build has checked the canvas takes, by style and family, as a size never decides it and a zooming
+// camera draws at a new size each frame, and a font it does not, which would draw as 10px sans-serif with no word,
+// warned of once; a family name with spaces and digits, as Press Start 2P, needs quotes
+const drawFontsChecked = new Set;
+function drawFontCheck(context, fontText, font, fontStyle)
+{
+    const key = fontStyle + '|' + font;
+    if (drawFontsChecked.has(key)) return;
+    drawFontsChecked.add(key);
+    const sentinel = '1px littlejs-font-check'; // no font a game draws with
+    context.font = sentinel;
+    context.font = fontText;
+    if (context.font === sentinel)
+        console.warn(`the canvas does not take the font ${font}, so text draws as 10px sans-serif; ` +
+            `a family name with spaces or digits goes in quotes, as "'Press Start 2P'"`);
+}
+
+// the lines of a text, split at a Windows line ending too
+const textLines = (text)=> (text += '').includes('\r') ? text.split(/\r?\n/) : text.split('\n');
+
+// how many lines a text has, counted without splitting it
+function textLineCount(text)
+{
+    let count = 1;
+    for (let i = -1; (i = text.indexOf('\n', i + 1)) >= 0;)
+        ++count;
+    return count;
+}
+
+// the characters of a line of text as a reader counts them, each as its first code point: an emoji with its joiners
+// is one, and a letter with combining accents its letter; plain text takes the quick way, it is most of what is drawn,
+// so read character i with textCharacterCode
+const textIntl = /** @type {any} */ (globalThis.Intl); // Segmenter is newer than the library the source is checked with
+const textSegmenter = textIntl?.Segmenter && new textIntl.Segmenter;
+// a line with no mark, joiner or character past the 16 bit range, plain or accented letters of their own, Greek or
+// Japanese, has one code unit a character, so it is handed back as it is, read with charCodeAt, and nothing is made;
+// the class also holds what the segmenter joins that is not a mark: joiners, prepend, Thai and Lao SARA AM, Hangul
+// jamo extended and the halfwidth katakana voiced marks
+const textJoins = /[\p{M}\u200c\u200d\u0600-\u0605\u06dd\u070f\u0890\u0891\u08e2\u0d4e\u0e33\u0eb3\u1100-\u11ff\ua960-\ua97c\ud7b0-\ud7fb\uff9e\uff9f\u{10000}-\u{10ffff}]/u;
+/** @return {string|Array<number>} */
+function textCharacters(line)
+{
+    if (!textJoins.test(line))
+        return line;
+    // where graphemes can not be split, code points with the joiners, variation selectors and accents left out
+    return textSegmenter ? Array.from(textSegmenter.segment(line), (s)=> s.segment.codePointAt(0)) :
+        Array.from(line, (c)=> c.codePointAt(0)).filter((c)=> c !== 0x200d && c !== 0xfe0f && !(c >= 0x300 && c < 0x370));
+}
+
+// the characters of a text as a reader counts them, each a string, an emoji with its joiners one; code points where
+// graphemes can not be split, and code units for a text that needs nothing joined, the quick way
+const textGraphemes = (text)=> !textJoins.test(text) ? text.split('') :
+    textSegmenter ? Array.from(textSegmenter.segment(text), (s)=> s.segment) : [...text];
+
+// character i of what textCharacters gave, its code; a Latin letter with an accent of its own, as é, is its letter, as
+// an e with a combining accent is, for the fonts that draw only the plain letters
+const textCharacterCode = (characters, i)=>
+    textBaseLetter(typeof characters == 'string' ? characters.charCodeAt(i) : characters[i]);
+const textBaseLetters = new Map;
+function textBaseLetter(code)
+{
+    if (code < 0xc0 || code >= 0x250) return code;
+    let base = textBaseLetters.get(code);
+    base === undefined && textBaseLetters.set(code, base = String.fromCharCode(code).normalize('NFD').charCodeAt(0));
+    return base;
+}
+
 /** Draw text in screen space
  *  Automatically splits new lines into rows
  *  @param {string|number}  text
@@ -1305,27 +1404,29 @@ function drawText(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK,
  *  @memberof Draw */
 function drawTextScreen(text, pos, size, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=drawContext)
 {
-    ASSERT(isStringLike(text), 'text must be a string');
-    ASSERT(isVector2(pos), 'pos must be a vec2');
-    ASSERT(isNumber(size), 'size must be a number');
-    ASSERT(isColor(color), 'color must be a color');
-    ASSERT(isNumber(lineWidth), 'lineWidth must be a number');
-    ASSERT(isColor(lineColor), 'lineColor must be a color');
-    ASSERT(['left','center','right'].includes(textAlign), 'align must be left, center, or right');
+    ASSERT(isStringLike(text), 'drawTextScreen: text must be a string', text);
+    ASSERT(isVector2(pos), 'drawTextScreen: pos must be a vec2', pos);
+    ASSERT(isNumber(size), 'drawTextScreen: size is a number, the height of the text in pixels', size);
+    ASSERT(isColor(color), 'drawTextScreen: color must be a color', color);
+    ASSERT(isNumber(lineWidth), 'drawTextScreen: lineWidth must be a number', lineWidth);
+    ASSERT(isColor(lineColor), 'drawTextScreen: lineColor must be a color', lineColor);
+    ASSERT(['left','center','right'].includes(textAlign), 'drawTextScreen: textAlign must be left, center or right', textAlign);
     ASSERT(isStringLike(font), 'font must be a string');
     ASSERT(isStringLike(fontStyle), 'fontStyle must be a string');
     ASSERT(isNumber(angle), 'angle must be a number');
 
     if (headlessMode && !context) return; // headless has no canvas, only a context passed in is drawn to
     
-    const lines = (text+'').split('\n');
+    const lines = textLines(text); // a Windows line ending too
     // save before style mutations so caller's context state is preserved
     context.save();
     context.fillStyle = color.toString();
     context.strokeStyle = lineColor.toString();
     context.lineWidth = lineWidth;
     context.textAlign = textAlign;
-    context.font = fontStyle + ' ' + size + 'px '+ font;
+    const fontText = fontStyle + ' ' + size + 'px '+ font;
+    debug && drawFontCheck(context, fontText, font, fontStyle);
+    context.font = fontText;
     context.textBaseline = 'middle';
     context.translate(pos.x + .5, pos.y + .5); // a screen position is the center of a pixel, as for every other draw
     context.rotate(angle);
@@ -1609,7 +1710,7 @@ function setShader(shader)
 
 /** Set an extra canvas to composite behind the engine canvases when combining
  *  Plugins that insert their own canvas below the LittleJS canvases should set
- *  this so it appears in screenshots and video capture
+ *  this so it appears in screenshots
  *  @param {HTMLCanvasElement} [canvas]
  *  @memberof Draw */
 function setBackgroundCanvas(canvas) { backgroundCanvas = canvas; }
@@ -1665,24 +1766,27 @@ function tintImageData(data, color, additiveColor)
     return false;
 }
 
-// Internal: bake a color/additive-color tint into workReadCanvas at the
-// image's native resolution. Returns the work canvas, suitable for
-// passing to context.createPattern. Used by drawTextureWrapped's
-// Canvas2D path. Caller is responsible for short-circuiting when no
+// Internal: bake a color/additive-color tint into a context's canvas, the work
+// canvas by default, at the image's native resolution. Returns that canvas,
+// suitable for passing to context.createPattern. Used by drawTextureWrapped's
+// Canvas2D path, which keeps a canvas of its own for each image. Caller is responsible for short-circuiting when no
 // tint is needed (i.e. color is white and additiveColor is black/none).
-function bakeTintedImage(image, color, additiveColor)
+function bakeTintedImage(image, color, additiveColor, context=workReadContext)
 {
     const w = image.width|0, h = image.height|0;
-    workReadCanvas.width = w;
-    workReadCanvas.height = h;
-    workReadContext.drawImage(image, 0, 0);
+    context.canvas.width = w;
+    context.canvas.height = h;
+    context.drawImage(image, 0, 0);
 
-    const imageData = workReadContext.getImageData(0, 0, w, h);
+    const imageData = context.getImageData(0, 0, w, h);
     tintImageData(imageData.data, color, additiveColor);
-    workReadContext.putImageData(imageData, 0, 0);
-    return workReadCanvas;
+    context.putImageData(imageData, 0, 0);
+    return context.canvas;
 }
 
+// the tinted bake drawTextureWrapped keeps for each image, its tint and the context it is in
+const drawTextureWrappedBakes = new WeakMap;
+
 /** Internal: draw an image with color and additive color applied in Canvas2D, drawTile calls it
  *  This is slower than normal drawImage when color is applied
  *  @ignore
@@ -1748,10 +1852,10 @@ function toggleFullscreen()
     if (isFullscreen())
     {
         if (document.exitFullscreen)
-            document.exitFullscreen();
+            document.exitFullscreen()?.catch?.(()=> {}); // refused outside a click, it stays as it is
     }
     else if (rootElement.requestFullscreen)
-        rootElement.requestFullscreen();
+        rootElement.requestFullscreen()?.catch?.(()=> {});
 }
 
 /** Set the cursor style
@@ -1815,7 +1919,7 @@ class ImageFont
         if (typeof size === 'number')
         {
             // if size is a number, make it a vector
-            ASSERT(size > 0);
+            ASSERT(size > 0, 'ImageFont.drawText: size must be above 0', size);
             size *= cameraScale;
             size = new Vector2(size, size);
         }
@@ -1853,15 +1957,16 @@ class ImageFont
         const tileInfo = this.tileInfo.frame(0);
 
         // draw each line of text, centered vertically like drawTextScreen when center is set
-        const lines = (text+'').split('\n');
+        const lines = textLines(text); // a Windows line ending too
         const centerOffsetY = center ? (lines.length-1) * glyphSize.y / 2 : 0;
         lines.forEach((line, j)=>
         {
-            const centerOffset = center ? (line.length-1) * glyphSize.x / 2 : 0;
-            for (let i=line.length; i--;)
+            const characters = textCharacters(line);
+            const centerOffset = center ? (characters.length-1) * glyphSize.x / 2 : 0;
+            for (let i=characters.length; i--;)
             {
                 // get the glyph, out of range characters use the last one
-                const charCode = line.charCodeAt(i);
+                const charCode = textCharacterCode(characters, i);
                 this.getGlyphPos(charCode < 32 || charCode > 127 ? 95 : charCode - 32, tileInfo.pos);
 
                 // snap the glyph edges to whole pixels

package/src/engineEditor.js

@@ -473,6 +473,7 @@ function editorSetOpen(open)
     else
     {
         editorStrokeEnd();
+        editorAutosaveFlush(); // the game plays on with what the editor has kept, the stroke just ended too
         editorToolHeld = false;
         editorSelection = editorSelectionDrag = editorRightPress = editorObjectDrag = editorObjectBox = undefined;
         editorObjectSelection.clear();
@@ -544,6 +545,7 @@ const editorTileLayerData = (layers)=> editorTileLayers(layers).map((layer)=> la
 // panel to apply or drop, and one that already has the autosaved data, saved from the editor, drops it
 function editorMapRestore(map)
 {
+    editorAutosaveFlush(); // what an earlier map has waiting is written before this one reads the autosaves
     if (editorMapList.some((record)=> record.map === map)) return map; // loaded again, it has the changes
 
     // a map object seen before, its record retired when its layers went, gets it back as it was, its data has the
@@ -579,7 +581,8 @@ function editorMapRestore(map)
     const sameFile = saved.hash === record.hash || saved.savedHash === record.hash || !saved.width &&
         (saved.hash === editorMapHash(data, objects) || !saved.objects && saved.hash === editorMapHash(data));
     if ((saved.width ?? map.width) === map.width && (saved.height ?? map.height) === map.height &&
-        editorSameData(saved.layers, data) && editorSameData(saved.objects ?? [], objects))
+        editorSameData(saved.layers, data) && editorSameData(editorObjectsKept(saved.objects ?? [], objects.length), objects)
+        && !(saved.nextobjectid > (map.nextobjectid ?? 1)))
         editorDiscardPending(record);
     else if (!sameFile || !editorSavedFits(saved, data.length, saved.width ?? map.width, saved.height ?? map.height) ||
         !editorResizeMap(map, saved.width ?? map.width, saved.height ?? map.height) || !editorCopyData(data, saved.layers))
@@ -590,7 +593,7 @@ function editorMapRestore(map)
     }
     else
     {
-        editorRestoreObjects(map, saved);
+        editorRestoreObjects(map, saved, true);
         console.warn(`LittleJS editor: brought back unsaved edits to ${record.fileName}, ` +
             'Save in the editor (Esc then 0) writes them to the file');
         saved.stale && console.warn(`LittleJS editor: they are older than the last edits to ${record.fileName}, ` +
@@ -657,6 +660,8 @@ function editorLayerRecord(live)
     const record = {map, synthetic: true, fileName: 'level.json', layers: []};
     const layer = {record, source, live, color: WHITE};
     record.layers.push(layer);
+    // the records of layers made in code that are gone, as a game that makes them again on a restart leaves them
+    editorRetire((other)=> other.synthetic && other.layers.every((l)=> l.live.destroyed));
     editorMapList.push(record);
     return layer;
 }
@@ -753,6 +758,10 @@ function editorSetBaseline(record, written)
     const objects = editorObjectGroups(written.layers).map((group)=> group.objects ?? []);
     Object.assign(record, {original: data, originalObjects: objects, savedHash: editorMapHash(data, objects,
         editorMapLayout(written)), originalSize: {width: written.width, height: written.height}});
+    // an Objects layer the editor made is the file's own once a Save wrote it, so it stays when emptied after
+    const writtenIds = new Set(editorObjectGroups(written.layers).map((group)=> group.id));
+    for (const group of editorObjectGroups(record.map.layers))
+        writtenIds.has(group.id) && editorMadeGroups.delete(group);
     record.pending || editorAutosave(record); // edits waiting to be applied keep their autosave
 }
 
@@ -764,6 +773,7 @@ async function editorSave(record, pickAgain=false)
 {
     if (!record) return;
     editorStrokeEnd();
+    editorAutosaveFlush();
     const text = editorMapJSON(record); // the map as it is now, later edits wait for a later save
     // its place in line is taken now, and the game's hook is asked when its turn comes, so saves are written in
     // the order they were asked for however long a hook takes
@@ -781,6 +791,7 @@ async function editorSave(record, pickAgain=false)
 async function editorSaveText(record, text, pickAgain)
 {
     const picker = /** @type {any} */ (globalThis).showSaveFilePicker;
+    let written = false;
     if (picker)
     {
         try
@@ -796,10 +807,7 @@ async function editorSaveText(record, text, pickAgain)
             const writable = await record.fileHandle.createWritable();
             await writable.write(text);
             await writable.close();
-            // the browser gives the picked file's name but not its folder, so the name is what says it is the map's
-            if (record.fileHandle.name === record.fileName)
-                editorSetBaseline(record, JSON.parse(text));
-            return 'written';
+            written = true;
         }
         catch (error)
         {
@@ -809,6 +817,14 @@ async function editorSaveText(record, text, pickAgain)
             console.warn(`LittleJS editor: ${record.fileName} could not be written, downloaded instead`, error);
         }
     }
+    if (written)
+    {
+        // outside the write's catch, so an error here is its own and not a failed write that downloads a copy;
+        // the browser gives the picked file's name but not its folder, so the name is what says it is the map's
+        if (record.fileHandle.name === record.fileName)
+            editorSetBaseline(record, JSON.parse(text));
+        return 'written';
+    }
     saveText(text, record.fileName, 'application/json');
     return 'downloaded';
 }
@@ -829,7 +845,9 @@ function editorWriteSaves(saves, key, name=editorSaveName())
 {
     try
     {
-        localStorage.setItem(name, JSON.stringify(saves));
+        const text = JSON.stringify(saves);
+        editorAutosaveSize = text.length; // how much an autosave writes, which says whether the next one waits
+        localStorage.setItem(name, text);
         return editorSaveFailed = false;
     }
     catch { editorSaveFailed = true; }
@@ -899,22 +917,54 @@ const editorSavedFits = (saved, count, width, height)=> isArray(saved.layers) &&
 // remember a map's tile data and objects, or forget them when they are back to the file
 function editorAutosave(record)
 {
+    editorAutosaveWaiting.delete(record); // written now
     if (record.synthetic) return; // a layer made in code has no load to bring it back in, save it to a file
     const saves = editorSaves(), map = record.map, data = editorTileLayerData(map.layers);
     const objects = editorObjectGroups(map.layers).map((group)=> group.objects ?? []);
-    const original = record.originalObjects ?? [], kept = objects.slice();
-    while (kept.length > original.length && !kept[kept.length - 1].length)
-        kept.pop(); // an Objects layer the editor made, empty again, is not an edit
+    const original = record.originalObjects ?? [], kept = editorObjectsKept(objects, original.length);
     const size = record.originalSize, sameSize = map.width === size.width && map.height === size.height;
     // the map as it was loaded has nothing to keep; one a Save wrote is kept until a reload shows the file has it
     if (sameSize && editorSameData(data, record.original) && editorSameData(kept, original) && !record.savedHash)
         delete saves[record.key];
     else
         saves[record.key] = {hash: record.hash, savedHash: record.savedHash, width: map.width, height: map.height,
-            layers: data, objects, nextobjectid: map.nextobjectid};
+            layers: data, objects: kept, nextobjectid: map.nextobjectid};
     editorWriteSaves(saves, record.key);
 }
 
+// a map's lists of objects with the empty ones past count left off: an Objects layer the editor made, empty again,
+// is not an edit, and a Save leaves it out of the file too
+function editorObjectsKept(objects, count)
+{
+    const kept = objects.slice();
+    while (kept.length > count && !kept[kept.length - 1]?.length)
+        kept.pop();
+    return kept;
+}
+
+// an autosave writing more than this many characters, a big map's, waits until the edits stop for a moment, since
+// writing it after every stroke would cost more than the stroke; a small map's is written at once, as always
+const EDITOR_AUTOSAVE_WAIT_SIZE = 1e5;
+let editorAutosaveSize = 0, editorAutosaveTimer;
+const editorAutosaveWaiting = new Set;
+
+// autosave a map after an edit: at once when its autosave is small, or a second after the last of a run of edits
+function editorAutosaveSoon(record)
+{
+    if (editorAutosaveSize < EDITOR_AUTOSAVE_WAIT_SIZE)
+        return editorAutosave(record);
+    editorAutosaveWaiting.add(record);
+    clearTimeout(editorAutosaveTimer);
+    editorAutosaveTimer = setTimeout(editorAutosaveFlush, 1e3);
+}
+
+// write every autosave that is waiting, as the editor closes, the page hides, a map is saved or another loads
+function editorAutosaveFlush()
+{
+    clearTimeout(editorAutosaveTimer);
+    [...editorAutosaveWaiting].forEach(editorAutosave);
+}
+
 // paint every cell of a map's layers from a list of tile data, the tile layers of the map in order, and set its
 // object layers' objects from a list of them; data of another size resizes the map, which needs the Restart hook
 function editorPaintData(record, data, objects, width=record.map.width, height=record.map.height, keepUnknown=false)
@@ -1019,7 +1069,9 @@ function editorResizeMap(map, width, height)
     }
     // an object on the map before and off it after is dropped, one that was already off it stays
     const {tilewidth=1, tileheight=1} = map, oldHeight = map.height;
-    const inside = (object, w, h)=> object.x >= 0 && object.x < w * tilewidth && object.y > 0 && object.y <= h * tileheight;
+    // a tile object's y is its bottom, a point's or a rectangle's its top
+    const inside = (object, w, h)=> object.x >= 0 && object.x < w * tilewidth && (object.gid === undefined ?
+        object.y >= 0 && object.y < h * tileheight : object.y > 0 && object.y <= h * tileheight);
     for (const group of editorObjectGroups(map.layers))
     {
         group.objects &&= group.objects.filter((object)=>
@@ -1205,12 +1257,13 @@ function editorUndo(redo=false)
     editorChanged(stroke);
 }
 
-// after a change the tile layers it touched that need it draw again whole, and the maps it touched are autosaved; a resized map is made again by the game, with the editor staying open
+// after a change the tile layers it touched that need it draw again whole, and the maps it touched are autosaved;
+// a resized map is made again by the game, with the editor staying open
 function editorChanged(stroke)
 {
     editorRedraw(stroke);
     for (const record of new Set(stroke.map(editorEntryRecord)))
-        editorAutosave(record);
+        editorAutosaveSoon(record);
     stroke.some((entry)=> entry.resize) && editorHas('onRestart') && levelEditor.onRestart();
 }
 
@@ -1387,13 +1440,17 @@ function editorObjectSetProperty(object, name, value, defaultValue)
         delete object.properties;
 }
 
-// copy saved objects into a map's object layers, making an Objects layer for any it saved that the map lacks
-function editorRestoreObjects(map, saved)
+// copy saved objects into a map's object layers, making an Objects layer for any it saved that the map lacks; from
+// an autosave, which keeps no empty list of a layer the editor made and no Save wrote, an empty one is of a layer a
+// Save wrote, the file's own, which stays when empty; an undo's snapshot keeps every list, so it does not say that
+function editorRestoreObjects(map, saved, fromAutosave=false)
 {
     const groups = editorObjectGroups(map.layers);
     (saved.objects ?? []).forEach((objects, i)=>
     {
-        (groups[i] ?? editorNewObjectGroup(map)).objects = editorObjectsCopy(objects);
+        const group = groups[i] ?? editorNewObjectGroup(map);
+        group.objects = editorObjectsCopy(objects);
+        fromAutosave && !objects.length && editorMadeGroups.delete(group);
     });
     if (saved.nextobjectid > (map.nextobjectid ?? 1))
         map.nextobjectid = saved.nextobjectid;
@@ -2318,7 +2375,8 @@ function editorPaletteDrawObjects(canvas)
         else
         {
             context.fillStyle = '#ccc';
-            context.fillText(name.slice(0, 4), x + cell / 2, y + cell / 2);
+            const label = textGraphemes(name).slice(0, 4).join(''); // whole characters, never half an emoji
+            context.fillText(label, x + cell / 2, y + cell / 2);
         }
         if (editorObjectBrush?.length !== 1 || editorObjectBrush[0].type !== name) return;
         context.strokeStyle = '#4af';
@@ -3015,5 +3073,8 @@ debug && engineAddPlugin(editorUpdate, ()=> { editorRender(); editorRenderGame()
 if (debug && globalThis.document?.addEventListener)
 {
     document.addEventListener('keydown', editorOnKeyDown);
+    // a page going away writes what is waiting, the last event it is sure to get
+    document.addEventListener('visibilitychange', ()=> document.hidden && editorAutosaveFlush());
+    globalThis.addEventListener?.('pagehide', editorAutosaveFlush);
     document.addEventListener('wheel', editorOnWheel, {passive: true});
 }

package/src/engineExport.js

@@ -53,9 +53,6 @@ export
     debugClear,
     debugScreenshot,
     debugShowErrors,
-    debugVideoCaptureStart,
-    debugVideoCaptureStop,
-    debugVideoCaptureIsActive,
 
     // Settings
     cameraPos,