mirror of
https://github.com/litruv/picoGraph.git
synced 2026-07-24 10:46:06 +10:00
updated graph rendering to be more efficient. added smooth scrolling, added color type, mmb drag for cutting
This commit is contained in:
383
scripts/ui/EmbeddedPreview.js
Normal file
383
scripts/ui/EmbeddedPreview.js
Normal file
@@ -0,0 +1,383 @@
|
||||
/**
|
||||
* Manages embedded Pico-8 cart preview within the application.
|
||||
*/
|
||||
export class EmbeddedPreview {
|
||||
/**
|
||||
* @param {object} options Configuration options
|
||||
* @param {() => string} options.getLuaCode Function to get generated Lua code
|
||||
*/
|
||||
constructor(options) {
|
||||
this.getLuaCode = options.getLuaCode;
|
||||
this.modal = null;
|
||||
this.canvas = null;
|
||||
this.isOpen = false;
|
||||
this.isRunning = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the preview modal if it doesn't exist
|
||||
*/
|
||||
#ensureModal() {
|
||||
if (this.modal) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create modal structure
|
||||
this.modal = document.createElement('div');
|
||||
this.modal.className = 'preview-modal';
|
||||
this.modal.setAttribute('role', 'dialog');
|
||||
this.modal.setAttribute('aria-modal', 'true');
|
||||
this.modal.setAttribute('aria-labelledby', 'previewModalTitle');
|
||||
this.modal.hidden = true;
|
||||
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'preview-modal__backdrop';
|
||||
backdrop.addEventListener('click', () => this.close());
|
||||
|
||||
const panel = document.createElement('div');
|
||||
panel.className = 'preview-modal__panel';
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'preview-modal__header';
|
||||
|
||||
// Header controls (left side)
|
||||
const headerControls = document.createElement('div');
|
||||
headerControls.className = 'preview-header-controls';
|
||||
|
||||
const refreshButton = document.createElement('button');
|
||||
refreshButton.type = 'button';
|
||||
refreshButton.className = 'preview-header-btn';
|
||||
refreshButton.setAttribute('aria-label', 'Reload cart');
|
||||
refreshButton.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>';
|
||||
refreshButton.addEventListener('click', () => this.#runCart());
|
||||
|
||||
const stopButton = document.createElement('button');
|
||||
stopButton.type = 'button';
|
||||
stopButton.className = 'preview-header-btn preview-header-btn--stop';
|
||||
stopButton.setAttribute('aria-label', 'Stop cart');
|
||||
stopButton.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>';
|
||||
stopButton.addEventListener('click', () => this.#stopCart());
|
||||
|
||||
const saveButton = document.createElement('button');
|
||||
saveButton.type = 'button';
|
||||
saveButton.className = 'preview-header-btn preview-header-btn--save';
|
||||
saveButton.setAttribute('aria-label', 'Save .p8');
|
||||
saveButton.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
|
||||
saveButton.addEventListener('click', () => this.#downloadCart());
|
||||
|
||||
headerControls.appendChild(refreshButton);
|
||||
headerControls.appendChild(stopButton);
|
||||
headerControls.appendChild(saveButton);
|
||||
|
||||
const closeButton = document.createElement('button');
|
||||
closeButton.type = 'button';
|
||||
closeButton.className = 'preview-modal__close';
|
||||
closeButton.setAttribute('aria-label', 'Close preview');
|
||||
closeButton.textContent = '×';
|
||||
closeButton.addEventListener('click', () => this.close());
|
||||
|
||||
header.appendChild(headerControls);
|
||||
header.appendChild(closeButton);
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'preview-modal__content';
|
||||
|
||||
// Create iframe for PICO-8 player
|
||||
this.iframe = document.createElement('iframe');
|
||||
this.iframe.className = 'preview-iframe';
|
||||
this.iframe.allow = 'gamepad';
|
||||
this.iframe.style.display = 'none';
|
||||
|
||||
// Create the canvas for rendering placeholder
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.canvas.width = 128;
|
||||
this.canvas.height = 128;
|
||||
this.canvas.className = 'preview-canvas';
|
||||
|
||||
content.appendChild(this.iframe);
|
||||
content.appendChild(this.canvas);
|
||||
|
||||
// Refocus iframe when clicking in the modal to ensure input keeps working
|
||||
panel.addEventListener('click', (e) => {
|
||||
if (this.iframe.style.display !== 'none') {
|
||||
setTimeout(() => {
|
||||
this.iframe.focus();
|
||||
if (this.iframe.contentWindow) {
|
||||
this.iframe.contentWindow.focus();
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
panel.appendChild(header);
|
||||
panel.appendChild(content);
|
||||
|
||||
this.modal.appendChild(backdrop);
|
||||
this.modal.appendChild(panel);
|
||||
document.body.appendChild(this.modal);
|
||||
}
|
||||
|
||||
/**
|
||||
* Runs the cart in the embedded preview
|
||||
*/
|
||||
async #runCart() {
|
||||
try {
|
||||
const luaCode = this.getLuaCode();
|
||||
|
||||
if (!luaCode || !luaCode.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isRunning = true;
|
||||
|
||||
// Generate cart content
|
||||
const cartContent = this.#generateCartContent(luaCode);
|
||||
|
||||
// Load cart in iframe using PICO-8 web player
|
||||
await this.#loadCartInPlayer(cartContent);
|
||||
} catch (error) {
|
||||
console.error('Error running cart:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads a cart into the PICO-8 web player
|
||||
*
|
||||
* @param {string} cartData The .p8 cart file content as a string
|
||||
*/
|
||||
async #loadCartInPlayer(cartData) {
|
||||
try {
|
||||
const electronAPI = window.electronAPI;
|
||||
if (!electronAPI?.writePlayerHtml) {
|
||||
throw new Error('Player IPC not available');
|
||||
}
|
||||
|
||||
const cartB64 = btoa(unescape(encodeURIComponent(cartData)));
|
||||
|
||||
// HTML references pico8_edu.js by relative path — both files live in public/.
|
||||
const playerHtml = `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #1a1a2e; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; overflow: hidden; }
|
||||
#canvas { image-rendering: pixelated; image-rendering: crisp-edges; width: 512px !important; height: 512px !important; border: 8px solid #000; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="128" height="128"></canvas>
|
||||
<script>
|
||||
var pico8_state = [];
|
||||
var pico8_buttons = [0,0,0,0,0,0,0,0];
|
||||
var codo_command = 0;
|
||||
var _cartname = ['untitled.p8'];
|
||||
var codo_key_buffer = [];
|
||||
var p8_keyboard_state = 0;
|
||||
var pico8_mouse = [];
|
||||
var pico8_gamepads = { count: 0 };
|
||||
var pico8_gpio = new Array(128).fill(0);
|
||||
var p8_dropped_cart = null;
|
||||
var p8_dropped_cart_name = '';
|
||||
|
||||
var CART_B64 = '${cartB64}';
|
||||
|
||||
// Silence all XHR — PICO-8 makes BBS metadata calls that crash from file:// origin.
|
||||
(function() {
|
||||
function MockXHR() {
|
||||
this.onload = null; this.onerror = null; this.onreadystatechange = null;
|
||||
this.readyState = 0; this.status = 0; this.statusText = '';
|
||||
this.response = null; this.responseText = ''; this.responseType = '';
|
||||
}
|
||||
MockXHR.UNSENT=0; MockXHR.OPENED=1; MockXHR.HEADERS_RECEIVED=2; MockXHR.LOADING=3; MockXHR.DONE=4;
|
||||
MockXHR.prototype.open = function() { this.readyState = 1; };
|
||||
MockXHR.prototype.send = function() {
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
self.readyState = 4; self.status = 200; self.statusText = 'OK';
|
||||
self.response = self.responseType === 'arraybuffer' ? new ArrayBuffer(0) : '';
|
||||
self.responseText = '';
|
||||
if (typeof self.onload === 'function') self.onload({ target: self });
|
||||
if (typeof self.onreadystatechange === 'function') self.onreadystatechange();
|
||||
}, 0);
|
||||
};
|
||||
MockXHR.prototype.setRequestHeader = function() {};
|
||||
MockXHR.prototype.getResponseHeader = function() { return null; };
|
||||
MockXHR.prototype.getAllResponseHeaders = function() { return ''; };
|
||||
MockXHR.prototype.abort = function() {};
|
||||
MockXHR.prototype.addEventListener = function(e, fn) {
|
||||
if (e==='load') this.onload=fn;
|
||||
if (e==='error') this.onerror=fn;
|
||||
if (e==='readystatechange') this.onreadystatechange=fn;
|
||||
};
|
||||
MockXHR.prototype.removeEventListener = function() {};
|
||||
window.XMLHttpRequest = MockXHR;
|
||||
})();
|
||||
|
||||
var Module = {
|
||||
arguments: [],
|
||||
canvas: document.getElementById('canvas'),
|
||||
preRun: [function() {
|
||||
if (typeof IDBFS !== 'undefined' && typeof MEMFS !== 'undefined') {
|
||||
var orig = FS.mount.bind(FS);
|
||||
FS.mount = function(type, opts, mp) { return orig(type===IDBFS?MEMFS:type, opts, mp); };
|
||||
}
|
||||
FS.syncfs = function(populate, callback) {
|
||||
var cb = typeof callback==='function' ? callback : typeof populate==='function' ? populate : null;
|
||||
if (cb) setTimeout(function(){ cb(null); }, 0);
|
||||
};
|
||||
}],
|
||||
postRun: [function() {
|
||||
setTimeout(function() {
|
||||
p8_dropped_cart = 'data:application/octet-stream;base64,' + CART_B64;
|
||||
p8_dropped_cart_name = 'picograph.p8';
|
||||
codo_command = 9;
|
||||
|
||||
// After cart loads, inject "run" + Enter to execute it
|
||||
setTimeout(function() {
|
||||
// Push keystrokes: r u n Enter (lowercase ASCII)
|
||||
codo_key_buffer.push(114, 117, 110, 13);
|
||||
}, 300);
|
||||
}, 200);
|
||||
}],
|
||||
print: function(t) { console.log('P8:', t); },
|
||||
printErr: function(t) { console.error('P8:', t); },
|
||||
setStatus: function() {}
|
||||
};
|
||||
|
||||
function pico8_audio_context_suspended() { return false; }
|
||||
</script>
|
||||
<script src="./pico8_edu.js"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
const { filePath } = await electronAPI.writePlayerHtml(playerHtml);
|
||||
const fileUrl = 'file:///' + filePath.replace(/\\/g, '/') + '?t=' + Date.now();
|
||||
|
||||
this.iframe.src = 'about:blank';
|
||||
this.iframe.src = fileUrl;
|
||||
this.iframe.style.display = 'block';
|
||||
this.canvas.style.display = 'none';
|
||||
|
||||
// Focus iframe once loaded so it captures keyboard/gamepad input
|
||||
this.iframe.onload = () => {
|
||||
setTimeout(() => {
|
||||
this.iframe.focus();
|
||||
if (this.iframe.contentWindow) {
|
||||
this.iframe.contentWindow.focus();
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to load player:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stops the running cart
|
||||
*/
|
||||
#stopCart() {
|
||||
this.isRunning = false;
|
||||
|
||||
// Hide iframe and show canvas
|
||||
if (this.iframe) {
|
||||
this.iframe.src = 'about:blank';
|
||||
this.iframe.style.display = 'none';
|
||||
}
|
||||
|
||||
if (this.canvas) {
|
||||
this.canvas.style.display = 'block';
|
||||
const ctx = this.canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, 128, 128);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Downloads the current cart as a .p8 file
|
||||
*/
|
||||
#downloadCart() {
|
||||
try {
|
||||
const luaCode = this.getLuaCode();
|
||||
const cartContent = this.#generateCartContent(luaCode);
|
||||
|
||||
const blob = new Blob([cartContent], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `picograph_${Date.now()}.p8`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
console.error('Error downloading cart:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates the .p8 cart file content
|
||||
*
|
||||
* @param {string} luaCode Generated Lua code
|
||||
* @returns {string}
|
||||
*/
|
||||
#generateCartContent(luaCode) {
|
||||
const hasUpdateCallback = /function\s+_update(?:60)?\b|_update(?:60)?\s*=/.test(luaCode);
|
||||
const hasDrawCallback = /function\s+_draw\b|_draw\s*=/.test(luaCode);
|
||||
const fallback = (hasUpdateCallback && hasDrawCallback) ? '' :
|
||||
(!hasUpdateCallback ? '\nfunction _update()\nend\n' : '') +
|
||||
(!hasDrawCallback ? '\nfunction _draw()\n cls()\n print("picograph ok",2,60,7)\nend\n' : '');
|
||||
return `pico-8 cartridge // http://www.pico-8.com
|
||||
version 41
|
||||
__lua__
|
||||
${luaCode}${fallback}
|
||||
__gfx__
|
||||
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the preview modal
|
||||
*/
|
||||
open() {
|
||||
this.#ensureModal();
|
||||
this.modal.hidden = false;
|
||||
this.isOpen = true;
|
||||
|
||||
// Auto-run the cart
|
||||
this.#runCart();
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes the preview modal
|
||||
*/
|
||||
close() {
|
||||
this.#stopCart();
|
||||
if (this.modal) {
|
||||
this.modal.hidden = true;
|
||||
this.isOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles the preview modal
|
||||
*/
|
||||
toggle() {
|
||||
if (this.isOpen) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user