mirror of
https://github.com/Nexoniarz/YAPF.git
synced 2026-11-03 21:14:27 +00:00
YAPF v1: fast byte-aligned format, SIMD, tools and plugins
Format (version 1, replaces the earlier experimental versions): - per-tile YCoCg-R or subtract-green colour transform, 8-bit modular - 12 row filters per 8-row band (Left, Gradient, Up-right, Up-average, Up 1-8 rows), none with more than a one-add serial dependency - residuals in groups of 8 at the group's width (w bits x 8 = w bytes), 4-bit control codes with repeat-previous-width runs chosen by DP - constant and stored tiles, independent 64x64 tiles, mips, GPU hints - all sizes validated before decoding; corrupt input is rejected Library: - SIMD on by default: SSSE3 (runtime CPUID check; GCC, Clang, MSVC, MinGW) and NEON on ARM64; -DYAPF_NO_SIMD for plain C - yapf_load_memory, yapf_load_mt, yapf_load_memory_mt - 6-10x faster decoding than PNG (stb_image) on one core; -O2 and -O3 builds perform the same - fixes for macOS (sysconf) and the Windows import library exports Tools and integrations: - `yapf` CLI: convert PNG/JPG/TGA/BMP/PSD/GIF <-> YAPF, info, bench, thumbnail, mips - JavaScript and Python bindings (byte-identical to the C encoder) - GIMP 3 plugin: exports the flattened image, optional mipmaps - Blender extension: import (also as plane), export, drag and drop - VS Code preview, Figma plugin, Photoshop scripts, Linux MIME type and thumbnailer - Makefile, updated build.sh / build.bat, tools/build_release.sh - tests/test_yapf.c (784 checks) and bindings/js/test.js Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Nexoniarz
parent
b9b8c93a22
commit
2ca726e3af
48 changed files with 14905 additions and 710 deletions
126
extensions/figma/src/png.js
Normal file
126
extensions/figma/src/png.js
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/*
|
||||
* png.js — exact 8-bit PNG encode / decode for the browser and Node 18+.
|
||||
* Uses the platform's CompressionStream / DecompressionStream for zlib.
|
||||
* Canvas round-trips premultiply alpha and are not lossless; this is.
|
||||
* Copyright 2026 Nexoniarz — Apache License 2.0.
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof module === 'object' && module.exports) module.exports = factory();
|
||||
else root.PNG = factory();
|
||||
}(typeof self !== 'undefined' ? self : this, function () {
|
||||
'use strict';
|
||||
|
||||
const CRC = new Uint32Array(256);
|
||||
for (let n = 0; n < 256; n++) {
|
||||
let c = n;
|
||||
for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
|
||||
CRC[n] = c >>> 0;
|
||||
}
|
||||
function crc32(bytes, start, end) {
|
||||
let c = 0xffffffff;
|
||||
for (let i = start; i < end; i++) c = CRC[(c ^ bytes[i]) & 255] ^ (c >>> 8);
|
||||
return (c ^ 0xffffffff) >>> 0;
|
||||
}
|
||||
|
||||
async function zlib(data, mode) {
|
||||
const stream = new Blob([data]).stream().pipeThrough(
|
||||
mode === 'deflate' ? new CompressionStream('deflate') : new DecompressionStream('deflate'));
|
||||
return new Uint8Array(await new Response(stream).arrayBuffer());
|
||||
}
|
||||
|
||||
const COLOR_TYPE = { 1: 0, 2: 4, 3: 2, 4: 6 }; // channels → PNG colour type
|
||||
const CHANNELS = { 0: 1, 4: 2, 2: 3, 6: 4 };
|
||||
|
||||
function paeth(a, b, c) {
|
||||
const p = a + b - c, pa = Math.abs(p - a), pb = Math.abs(p - b), pc = Math.abs(p - c);
|
||||
return pa <= pb && pa <= pc ? a : pb <= pc ? b : c;
|
||||
}
|
||||
|
||||
/* pixels: Uint8Array of w*h*ch bytes, rows top to bottom. */
|
||||
async function encode(pixels, w, h, ch) {
|
||||
const stride = w * ch, raw = new Uint8Array((stride + 1) * h), row = new Uint8Array(stride);
|
||||
for (let y = 0; y < h; y++) {
|
||||
const cur = pixels.subarray(y * stride, (y + 1) * stride);
|
||||
const prev = y ? pixels.subarray((y - 1) * stride, y * stride) : null;
|
||||
let best = 0, bestSum = Infinity;
|
||||
for (let f = 0; f < 5; f++) { // pick the filter with the smallest sum
|
||||
let sum = 0;
|
||||
for (let i = 0; i < stride; i++) {
|
||||
const a = i >= ch ? cur[i - ch] : 0, b = prev ? prev[i] : 0, c = prev && i >= ch ? prev[i - ch] : 0;
|
||||
const v = (cur[i] - [0, a, b, (a + b) >> 1, paeth(a, b, c)][f]) & 255;
|
||||
sum += v < 128 ? v : 256 - v;
|
||||
}
|
||||
if (sum < bestSum) { bestSum = sum; best = f; }
|
||||
}
|
||||
const o = y * (stride + 1);
|
||||
raw[o] = best;
|
||||
for (let i = 0; i < stride; i++) {
|
||||
const a = i >= ch ? cur[i - ch] : 0, b = prev ? prev[i] : 0, c = prev && i >= ch ? prev[i - ch] : 0;
|
||||
row[i] = (cur[i] - [0, a, b, (a + b) >> 1, paeth(a, b, c)][best]) & 255;
|
||||
}
|
||||
raw.set(row, o + 1);
|
||||
}
|
||||
const idat = await zlib(raw, 'deflate');
|
||||
const chunks = [];
|
||||
const chunk = (type, data) => {
|
||||
const c = new Uint8Array(12 + data.length), dv = new DataView(c.buffer);
|
||||
dv.setUint32(0, data.length);
|
||||
for (let i = 0; i < 4; i++) c[4 + i] = type.charCodeAt(i);
|
||||
c.set(data, 8);
|
||||
dv.setUint32(8 + data.length, crc32(c, 4, 8 + data.length));
|
||||
chunks.push(c);
|
||||
};
|
||||
const ihdr = new Uint8Array(13), dv = new DataView(ihdr.buffer);
|
||||
dv.setUint32(0, w); dv.setUint32(4, h);
|
||||
ihdr.set([8, COLOR_TYPE[ch], 0, 0, 0], 8);
|
||||
chunk('IHDR', ihdr); chunk('IDAT', idat); chunk('IEND', new Uint8Array(0));
|
||||
const total = 8 + chunks.reduce((n, c) => n + c.length, 0), out = new Uint8Array(total);
|
||||
out.set([137, 80, 78, 71, 13, 10, 26, 10]);
|
||||
let p = 8;
|
||||
for (const c of chunks) { out.set(c, p); p += c.length; }
|
||||
return out;
|
||||
}
|
||||
|
||||
/* Returns { width, height, channels, pixels } or throws for PNGs it does
|
||||
* not handle (16-bit, interlaced); callers can fall back to a canvas. */
|
||||
async function decode(bytes) {
|
||||
const sig = [137, 80, 78, 71, 13, 10, 26, 10];
|
||||
if (bytes.length < 8 || sig.some((v, i) => bytes[i] !== v)) throw new Error('not a PNG');
|
||||
const dv = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
|
||||
let w = 0, h = 0, depth = 0, type = 0, interlace = 0, palette = null, trns = null;
|
||||
const idat = [];
|
||||
for (let p = 8; p + 8 <= bytes.length;) {
|
||||
const len = dv.getUint32(p), name = String.fromCharCode(...bytes.subarray(p + 4, p + 8));
|
||||
const data = bytes.subarray(p + 8, p + 8 + len);
|
||||
if (name === 'IHDR') { w = dv.getUint32(p + 8); h = dv.getUint32(p + 12); depth = data[8]; type = data[9]; interlace = data[12]; }
|
||||
else if (name === 'PLTE') palette = data;
|
||||
else if (name === 'tRNS') trns = data;
|
||||
else if (name === 'IDAT') idat.push(data);
|
||||
else if (name === 'IEND') break;
|
||||
p += 12 + len;
|
||||
}
|
||||
if (depth !== 8 || interlace !== 0 || !(type in CHANNELS || type === 3))
|
||||
throw new Error('unsupported PNG (needs 8-bit, non-interlaced)');
|
||||
const inCh = type === 3 ? 1 : CHANNELS[type], stride = w * inCh;
|
||||
const raw = await zlib(new Uint8Array(await new Blob(idat).arrayBuffer()), 'inflate');
|
||||
const px = new Uint8Array(stride * h);
|
||||
for (let y = 0; y < h; y++) {
|
||||
const f = raw[y * (stride + 1)], src = y * (stride + 1) + 1, o = y * stride;
|
||||
for (let i = 0; i < stride; i++) {
|
||||
const a = i >= inCh ? px[o + i - inCh] : 0, b = y ? px[o - stride + i] : 0;
|
||||
const c = y && i >= inCh ? px[o - stride + i - inCh] : 0;
|
||||
px[o + i] = (raw[src + i] + [0, a, b, (a + b) >> 1, paeth(a, b, c)][f]) & 255;
|
||||
}
|
||||
}
|
||||
if (type !== 3) return { width: w, height: h, channels: inCh, pixels: px };
|
||||
const ch = trns ? 4 : 3, out = new Uint8Array(w * h * ch); // expand a palette
|
||||
for (let i = 0; i < w * h; i++) {
|
||||
const k = px[i];
|
||||
out.set(palette.subarray(k * 3, k * 3 + 3), i * ch);
|
||||
if (trns) out[i * ch + 3] = k < trns.length ? trns[k] : 255;
|
||||
}
|
||||
return { width: w, height: h, channels: ch, pixels: out };
|
||||
}
|
||||
|
||||
return { encode, decode };
|
||||
}));
|
||||
124
extensions/figma/src/ui.src.html
Normal file
124
extensions/figma/src/ui.src.html
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { font: 12px Inter, system-ui, sans-serif; margin: 0; padding: 14px;
|
||||
color: var(--figma-color-text, #333); background: var(--figma-color-bg, #fff); }
|
||||
h2 { font-size: 13px; margin: 0 0 10px; }
|
||||
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
|
||||
.tabs button { flex: 1; }
|
||||
button { font: inherit; padding: 7px 10px; border-radius: 6px; cursor: pointer;
|
||||
border: 1px solid var(--figma-color-border, #ccc);
|
||||
background: var(--figma-color-bg-secondary, #f5f5f5); color: inherit; }
|
||||
button.primary, .tabs button.on { background: var(--figma-color-bg-brand, #0d99ff);
|
||||
color: var(--figma-color-text-onbrand, #fff); border-color: transparent; }
|
||||
#drop { border: 2px dashed var(--figma-color-border, #ccc); border-radius: 8px; padding: 28px 10px;
|
||||
text-align: center; cursor: pointer; color: var(--figma-color-text-secondary, #777); }
|
||||
#drop.hover { border-color: var(--figma-color-border-brand, #0d99ff); }
|
||||
#status { margin-top: 10px; min-height: 32px; color: var(--figma-color-text-secondary, #777);
|
||||
white-space: pre-line; }
|
||||
.row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
|
||||
select { font: inherit; }
|
||||
[hidden] { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="tabs">
|
||||
<button id="tab-import">Import</button>
|
||||
<button id="tab-export">Export</button>
|
||||
</div>
|
||||
|
||||
<section id="import">
|
||||
<h2>Import YAPF images</h2>
|
||||
<div id="drop">Drop .yapf files here<br>or click to choose</div>
|
||||
<input id="file" type="file" accept=".yapf" multiple hidden>
|
||||
</section>
|
||||
|
||||
<section id="export" hidden>
|
||||
<h2>Export selection as YAPF</h2>
|
||||
<div id="sel">Nothing selected</div>
|
||||
<div class="row">Scale
|
||||
<select id="scale"><option>1</option><option>2</option><option>4</option></select>
|
||||
</div>
|
||||
<button id="go" class="primary">Export</button>
|
||||
</section>
|
||||
|
||||
<div id="status"></div>
|
||||
|
||||
<script>/*__YAPF_JS__*/</script>
|
||||
<script>/*__PNG_JS__*/</script>
|
||||
<script>
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const post = (m) => parent.postMessage({ pluginMessage: m }, '*');
|
||||
const status = (t) => { $('status').textContent = t; };
|
||||
|
||||
function tab(name) {
|
||||
$('import').hidden = name !== 'import';
|
||||
$('export').hidden = name !== 'export';
|
||||
$('tab-import').classList.toggle('on', name === 'import');
|
||||
$('tab-export').classList.toggle('on', name === 'export');
|
||||
status('');
|
||||
}
|
||||
$('tab-import').onclick = () => tab('import');
|
||||
$('tab-export').onclick = () => tab('export');
|
||||
|
||||
/* Import: .yapf → pixels → exact PNG → Figma image */
|
||||
async function importFiles(files) {
|
||||
const images = [];
|
||||
for (const f of files) {
|
||||
try {
|
||||
const img = YAPF.decode(new Uint8Array(await f.arrayBuffer()));
|
||||
const png = await PNG.encode(img.pixels, img.width, img.height, img.channels);
|
||||
images.push({ name: f.name.replace(/\.yapf$/i, ''), width: img.width, height: img.height, png });
|
||||
status('Decoded ' + f.name + ' (' + img.width + '×' + img.height + ')');
|
||||
} catch (e) {
|
||||
status(f.name + ': ' + e.message);
|
||||
}
|
||||
}
|
||||
if (images.length) post({ type: 'import', images });
|
||||
}
|
||||
$('drop').onclick = () => $('file').click();
|
||||
$('file').onchange = (e) => importFiles([...e.target.files]);
|
||||
$('drop').ondragover = (e) => { e.preventDefault(); $('drop').classList.add('hover'); };
|
||||
$('drop').ondragleave = () => $('drop').classList.remove('hover');
|
||||
$('drop').ondrop = (e) => { e.preventDefault(); $('drop').classList.remove('hover'); importFiles([...e.dataTransfer.files]); };
|
||||
|
||||
/* Export: Figma PNG → exact pixels → .yapf download */
|
||||
$('go').onclick = () => { status('Exporting…'); post({ type: 'export', scale: +$('scale').value }); };
|
||||
|
||||
async function exported(name, pngBytes) {
|
||||
let img = await PNG.decode(pngBytes);
|
||||
let { pixels, channels } = img;
|
||||
if (channels === 4) { // drop alpha when fully opaque
|
||||
let opaque = true;
|
||||
for (let i = 3; i < pixels.length && opaque; i += 4) opaque = pixels[i] === 255;
|
||||
if (opaque) {
|
||||
const rgb = new Uint8Array(img.width * img.height * 3);
|
||||
for (let i = 0, j = 0; i < pixels.length; i += 4, j += 3) rgb.set(pixels.subarray(i, i + 3), j);
|
||||
pixels = rgb; channels = 3;
|
||||
}
|
||||
}
|
||||
const file = YAPF.encode({ width: img.width, height: img.height, channels, pixels,
|
||||
flags: YAPF.FLAG.SRGB,
|
||||
gpuFormat: channels === 4 ? YAPF.GPU.SRGB8_A8 : YAPF.GPU.SRGB8 });
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(new Blob([file], { type: 'image/x-yapf' }));
|
||||
a.download = name.replace(/[\\/:*?"<>|]/g, '_') + '.yapf';
|
||||
document.body.appendChild(a); a.click(); a.remove();
|
||||
status('Saved ' + a.download + '\n' + img.width + '×' + img.height + ', ' +
|
||||
(file.length / 1024).toFixed(1) + ' KB (' +
|
||||
(100 * file.length / (img.width * img.height * channels)).toFixed(1) + '% of raw)');
|
||||
}
|
||||
|
||||
onmessage = (e) => {
|
||||
const m = e.data.pluginMessage;
|
||||
if (!m) return;
|
||||
if (m.type === 'mode') tab(m.mode === 'export' ? 'export' : 'import');
|
||||
if (m.type === 'selection')
|
||||
$('sel').textContent = m.names.length ? 'Selected: ' + m.names.join(', ') : 'Nothing selected';
|
||||
if (m.type === 'exported') exported(m.name, m.png).catch((err) => status(m.name + ': ' + err.message));
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue