@pixerate/editor 0.22.0 → 0.23.0

package/dist/image-editor/index.cjs

@@ -1,9 +1,252 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3;// src/image-editor/filters.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3;// src/image-editor/color.ts
+var LEGACY_PROCESS_VERSION = 1;
+var LATEST_PROCESS_VERSION = 2;
+function normalizeProcessVersion(value) {
+  if (typeof value !== "number" || !Number.isInteger(value)) return LEGACY_PROCESS_VERSION;
+  return value >= LATEST_PROCESS_VERSION ? LATEST_PROCESS_VERSION : LEGACY_PROCESS_VERSION;
+}
+function srgbToLinear(v) {
+  return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+}
+function linearToSrgb(v) {
+  return v <= 31308e-7 ? v * 12.92 : 1.055 * Math.pow(v, 1 / 2.4) - 0.055;
+}
+var LUMA_709 = [0.2126, 0.7152, 0.0722];
+var IDENTITY_MATRIX3 = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+function mulMatrix3(a, b) {
+  const out = new Array(9).fill(0);
+  for (let r = 0; r < 3; r++) {
+    for (let c = 0; c < 3; c++) {
+      out[r * 3 + c] = a[r * 3] * b[c] + a[r * 3 + 1] * b[3 + c] + a[r * 3 + 2] * b[6 + c];
+    }
+  }
+  return out;
+}
+function applyMatrix3(m, v) {
+  return [
+    m[0] * v[0] + m[1] * v[1] + m[2] * v[2],
+    m[3] * v[0] + m[4] * v[1] + m[5] * v[2],
+    m[6] * v[0] + m[7] * v[1] + m[8] * v[2]
+  ];
+}
+function invertMatrix3(m) {
+  const [a, b, c, d, e, f, g, h, i] = m;
+  const A = e * i - f * h;
+  const B = -(d * i - f * g);
+  const C = d * h - e * g;
+  const det = a * A + b * B + c * C;
+  if (!Number.isFinite(det) || Math.abs(det) < 1e-12) return null;
+  const k = 1 / det;
+  return [
+    A * k,
+    -(b * i - c * h) * k,
+    (b * f - c * e) * k,
+    B * k,
+    (a * i - c * g) * k,
+    -(a * f - c * d) * k,
+    C * k,
+    -(a * h - b * g) * k,
+    (a * e - b * d) * k
+  ];
+}
+function diag3(x, y, z) {
+  return [x, 0, 0, 0, y, 0, 0, 0, z];
+}
+var D65 = { x: 0.3127, y: 0.329 };
+function xyToXyz(p) {
+  return [p.x / p.y, 1, (1 - p.x - p.y) / p.y];
+}
+function xyzToXy(v) {
+  const s = v[0] + v[1] + v[2];
+  return s <= 0 ? { ...D65 } : { x: v[0] / s, y: v[1] / s };
+}
+var SRGB_TO_XYZ = (() => {
+  const p = [{ x: 0.64, y: 0.33 }, { x: 0.3, y: 0.6 }, { x: 0.15, y: 0.06 }].map(xyToXyz);
+  const m = [p[0][0], p[1][0], p[2][0], p[0][1], p[1][1], p[2][1], p[0][2], p[1][2], p[2][2]];
+  const inv = invertMatrix3(m);
+  const s = inv ? applyMatrix3(inv, xyToXyz(D65)) : [1, 1, 1];
+  return mulMatrix3(m, diag3(s[0], s[1], s[2]));
+})();
+var XYZ_TO_SRGB = _nullishCoalesce(invertMatrix3(SRGB_TO_XYZ), () => ( IDENTITY_MATRIX3));
+var BRADFORD = [0.8951, 0.2664, -0.1614, -0.7502, 1.7135, 0.0367, 0.0389, -0.0685, 1.0296];
+var BRADFORD_INV = _nullishCoalesce(invertMatrix3(BRADFORD), () => ( IDENTITY_MATRIX3));
+function bradfordAdaptation(src, dst) {
+  if (src.x === dst.x && src.y === dst.y) return [...IDENTITY_MATRIX3];
+  const s = applyMatrix3(BRADFORD, xyToXyz(src));
+  const d = applyMatrix3(BRADFORD, xyToXyz(dst));
+  return mulMatrix3(BRADFORD_INV, mulMatrix3(diag3(d[0] / s[0], d[1] / s[1], d[2] / s[2]), BRADFORD));
+}
+function wbMatrix(src) {
+  return mulMatrix3(XYZ_TO_SRGB, mulMatrix3(bradfordAdaptation(src, D65), SRGB_TO_XYZ));
+}
+function linearSrgbToXy(rgb) {
+  return xyzToXy(applyMatrix3(SRGB_TO_XYZ, rgb));
+}
+var TINT_SCALE = 3e3;
+var MIN_KELVIN = 1667;
+var MAX_KELVIN = 25e3;
+function kimXy(tIn) {
+  const t = Math.min(MAX_KELVIN, Math.max(MIN_KELVIN, tIn));
+  const t2 = t * t;
+  const t3 = t2 * t;
+  const x = t <= 4e3 ? -266123900 / t3 - 234358.9 / t2 + 877.6956 / t + 0.17991 : -3025846900 / t3 + 21070379e-1 / t2 + 222.6347 / t + 0.24039;
+  const x2 = x * x;
+  const x3 = x2 * x;
+  const y = t <= 2222 ? -1.1063814 * x3 - 1.3481102 * x2 + 2.18555832 * x - 0.20219683 : t <= 4e3 ? -0.9549476 * x3 - 1.37418593 * x2 + 2.09137015 * x - 0.16748867 : 3.081758 * x3 - 5.8733867 * x2 + 3.75112997 * x - 0.37001483;
+  return { x, y };
+}
+function xyToUv(p) {
+  const d = -2 * p.x + 12 * p.y + 3;
+  return [4 * p.x / d, 6 * p.y / d];
+}
+function uvToXy(u, v) {
+  const d = 2 * u - 8 * v + 4;
+  return { x: 3 * u / d, y: 2 * v / d };
+}
+function locusUv(tIn) {
+  const t = Math.max(1e3, tIn);
+  if (t >= MIN_KELVIN && t <= MAX_KELVIN) return xyToUv(kimXy(t));
+  const [a, b] = t < MIN_KELVIN ? [MIN_KELVIN, MIN_KELVIN + 50] : [MAX_KELVIN - 500, MAX_KELVIN];
+  const [ua, va] = xyToUv(kimXy(a));
+  const [ub, vb] = xyToUv(kimXy(b));
+  const ma = 1e6 / a;
+  const mb = 1e6 / b;
+  const s = (1e6 / t - ma) / (mb - ma);
+  return [ua + (ub - ua) * s, va + (vb - va) * s];
+}
+function locusNormal(t) {
+  const m = 1e6 / t;
+  const [u0, v0] = locusUv(1e6 / (m + 1));
+  const [u1, v1] = locusUv(1e6 / Math.max(m - 1, 1));
+  const du = u1 - u0;
+  const dv = v1 - v0;
+  const l = Math.max(Math.hypot(du, dv), 1e-12);
+  const nx = -dv / l;
+  const ny = du / l;
+  return ny < 0 ? [-nx, -ny] : [nx, ny];
+}
+function tempTintToXy(kelvin, tint) {
+  const [u, v] = locusUv(kelvin);
+  const [nu, nv] = locusNormal(kelvin);
+  const duv = tint / TINT_SCALE;
+  return uvToXy(u + nu * duv, v + nv * duv);
+}
+function xyToTempTint(p) {
+  const [u, v] = xyToUv(p);
+  const dist = (m) => {
+    const [lu2, lv2] = locusUv(1e6 / m);
+    return (u - lu2) ** 2 + (v - lv2) ** 2;
+  };
+  let best = 20;
+  let bd = Infinity;
+  for (let m = 20; m <= 1e3; m += 5) {
+    const d = dist(m);
+    if (d < bd) {
+      bd = d;
+      best = m;
+    }
+  }
+  let a = Math.max(best - 5, 20);
+  let b = Math.min(best + 5, 1e3);
+  const g = 0.61803398875;
+  for (let i = 0; i < 60; i++) {
+    const c = b - g * (b - a);
+    const d = a + g * (b - a);
+    if (dist(c) < dist(d)) b = d;
+    else a = c;
+  }
+  const kelvin = 1e6 / ((a + b) / 2);
+  const [lu, lv] = locusUv(kelvin);
+  const [nu, nv] = locusNormal(kelvin);
+  const duv = (u - lu) * nu + (v - lv) * nv;
+  return { kelvin, tint: duv * TINT_SCALE };
+}
+var AS_SHOT_KELVIN = 6500;
+var MIRED_PER_TEMPERATURE_UNIT = 1;
+var AS_SHOT_MIRED = 1e6 / AS_SHOT_KELVIN;
+function temperatureToKelvin(temperature) {
+  return 1e6 / (AS_SHOT_MIRED - temperature * MIRED_PER_TEMPERATURE_UNIT);
+}
+function kelvinToTemperature(kelvin) {
+  return (AS_SHOT_MIRED - 1e6 / kelvin) / MIRED_PER_TEMPERATURE_UNIT;
+}
+var AS_SHOT_WB_INV = _nullishCoalesce(invertMatrix3(wbMatrix(tempTintToXy(AS_SHOT_KELVIN, 0))), () => ( IDENTITY_MATRIX3));
+function whiteBalanceMatrix(temperature, tint = 0) {
+  if (!temperature && !tint) return [...IDENTITY_MATRIX3];
+  const set = wbMatrix(tempTintToXy(temperatureToKelvin(temperature), tint));
+  const m = mulMatrix3(set, AS_SHOT_WB_INV);
+  const g = applyMatrix3(m, [1, 1, 1]);
+  const y = g[0] * LUMA_709[0] + g[1] * LUMA_709[1] + g[2] * LUMA_709[2];
+  return mulMatrix3(m, diag3(1 / y, 1 / y, 1 / y));
+}
+function whiteBalanceFromSample(rgb) {
+  const [r, g, b] = Array.isArray(rgb) ? rgb : [rgb.r, rgb.g, rgb.b];
+  const lin = [r, g, b].map((c) => srgbToLinear(Math.min(255, Math.max(0, c)) / 255));
+  if (lin[0] + lin[1] + lin[2] <= 1e-6) return { temperature: 0, tint: 0 };
+  const src = linearSrgbToXy(applyMatrix3(AS_SHOT_WB_INV, lin));
+  const { kelvin, tint } = xyToTempTint(src);
+  const clamp2 = (v) => Math.max(-100, Math.min(100, v));
+  return { temperature: clamp2(kelvinToTemperature(kelvin)), tint: clamp2(tint) };
+}
+var TONE_LUT_SIZE = 4096;
+var GREY = 0.18;
+var GREY_P = Math.pow(GREY, 1 / 2.2);
+var SHOULDER_KNEE = 0.6;
+function toneCurve(y, contrast, brightness, headroom = 1) {
+  if (!(y > 0)) return 0;
+  const h = Math.max(1, headroom);
+  let o = Math.min(y, h);
+  if (h > 1 && o > SHOULDER_KNEE) {
+    const span = 1 - SHOULDER_KNEE;
+    const x = (o - SHOULDER_KNEE) / span;
+    const X = (h - SHOULDER_KNEE) / span;
+    o = SHOULDER_KNEE + span * (x * (1 + x / (X * X)) / (1 + x));
+  }
+  if (contrast === 0 && brightness === 0) return Math.min(1, o);
+  let p = Math.pow(Math.min(1, o), 1 / 2.2);
+  const c = contrast / 100;
+  if (c !== 0) {
+    p += c * 0.4 * (p - GREY_P) * (1 - (2 * p - 1) ** 2);
+  }
+  const b = brightness / 100;
+  if (b !== 0) {
+    p += b * 0.8 * p * (1 - p);
+  }
+  return Math.pow(Math.min(1, Math.max(0, p)), 2.2);
+}
+function buildToneLut(contrast, brightness, headroom = 1) {
+  const h = Math.max(1, headroom);
+  const lut = new Float32Array(TONE_LUT_SIZE + 1);
+  for (let i = 0; i <= TONE_LUT_SIZE; i++) {
+    lut[i] = toneCurve(h * i / TONE_LUT_SIZE, contrast, brightness, h);
+  }
+  return lut;
+}
+function sampleToneLut(lut, headroom, y) {
+  if (!(y > 0)) return lut[0];
+  const n = lut.length - 1;
+  const f = y * n / Math.max(1, headroom);
+  if (f >= n) return lut[n];
+  const i = f | 0;
+  return lut[i] + (lut[i + 1] - lut[i]) * (f - i);
+}
+
+// src/image-editor/filters.ts
 function clamp(value, min = 0, max = 255) {
   return Math.max(min, Math.min(max, value));
 }
 function applyAdjustments(imageData, adjustments) {
-  const { brightness, contrast, saturation, exposure, temperature, opacity, blur } = adjustments;
+  if (normalizeProcessVersion(adjustments.process) === LATEST_PROCESS_VERSION) {
+    applyProcess2Adjustments(imageData, adjustments);
+  } else {
+    applyLegacyAdjustments(imageData, adjustments);
+  }
+  if (adjustments.blur > 0) {
+    applyFastBoxBlur(imageData, Math.min(Math.round(adjustments.blur), 40));
+  }
+}
+function applyLegacyAdjustments(imageData, adjustments) {
+  const { brightness, contrast, saturation, exposure, temperature, opacity } = adjustments;
   const data = imageData.data;
   const len = data.length;
   const hasBrightness = brightness !== 0;
@@ -57,8 +300,108 @@ function applyAdjustments(imageData, adjustments) {
       data[i + 3] = a;
     }
   }
-  if (blur > 0) {
-    applyFastBoxBlur(imageData, Math.min(Math.round(blur), 40));
+}
+var DECODE_LUT = (() => {
+  const lut = new Float32Array(256);
+  for (let i = 0; i < 256; i++) lut[i] = srgbToLinear(i / 255);
+  return lut;
+})();
+var ENCODE_LUT_SIZE = 65535;
+var encodeLut = null;
+function getEncodeLut() {
+  if (!encodeLut) {
+    encodeLut = new Uint8Array(ENCODE_LUT_SIZE + 1);
+    for (let i = 0; i <= ENCODE_LUT_SIZE; i++) {
+      encodeLut[i] = Math.round(linearToSrgb(i / ENCODE_LUT_SIZE) * 255);
+    }
+  }
+  return encodeLut;
+}
+var cachedPlan = null;
+function getProcess2Plan(adjustments) {
+  const exposure = adjustments.exposure || 0;
+  const temperature = adjustments.temperature || 0;
+  const tint = adjustments.tint || 0;
+  const contrast = adjustments.contrast || 0;
+  const brightness = adjustments.brightness || 0;
+  const saturation = 1 + (adjustments.saturation || 0) / 100;
+  const key = `${exposure},${temperature},${tint},${contrast},${brightness},${saturation}`;
+  if (cachedPlan && cachedPlan.key === key) return cachedPlan;
+  const gain = Math.pow(2, exposure / 50);
+  const wb = whiteBalanceMatrix(temperature, tint);
+  const m = new Float64Array(9);
+  for (let i = 0; i < 9; i++) m[i] = wb[i] * gain;
+  const luts = [];
+  const scale = [0, 0, 0];
+  for (let c = 0; c < 3; c++) {
+    let reach = 0;
+    for (let k = 0; k < 3; k++) reach += Math.max(0, m[c * 3 + k]);
+    const headroom = Math.max(1, reach);
+    luts[c] = buildToneLut(contrast, brightness, headroom);
+    scale[c] = TONE_LUT_SIZE / headroom;
+  }
+  cachedPlan = { key, m, luts, scale, saturation };
+  return cachedPlan;
+}
+function applyProcess2Adjustments(imageData, adjustments) {
+  const data = imageData.data;
+  const len = data.length;
+  const opacity = _nullishCoalesce(adjustments.opacity, () => ( 1));
+  const hasOpacity = opacity < 1;
+  const hasColor = !!adjustments.brightness || !!adjustments.contrast || !!adjustments.saturation || !!adjustments.exposure || !!adjustments.temperature || !!adjustments.tint;
+  if (!hasColor) {
+    if (hasOpacity) {
+      for (let i = 3; i < len; i += 4) data[i] = clamp(data[i] * opacity);
+    }
+    return;
+  }
+  const plan = getProcess2Plan(adjustments);
+  const dec = DECODE_LUT;
+  const enc = getEncodeLut();
+  const { m, luts, scale, saturation } = plan;
+  const m0 = m[0], m1 = m[1], m2 = m[2], m3 = m[3], m4 = m[4], m5 = m[5], m6 = m[6], m7 = m[7], m8 = m[8];
+  const lutR = luts[0], lutG = luts[1], lutB = luts[2];
+  const sR = scale[0], sG = scale[1], sB = scale[2];
+  const N = TONE_LUT_SIZE;
+  const hasSaturation = saturation !== 1;
+  const wr = LUMA_709[0], wg = LUMA_709[1], wb = LUMA_709[2];
+  for (let i = 0; i < len; i += 4) {
+    const r0 = dec[data[i]];
+    const g0 = dec[data[i + 1]];
+    const b0 = dec[data[i + 2]];
+    let r = m0 * r0 + m1 * g0 + m2 * b0;
+    let g = m3 * r0 + m4 * g0 + m5 * b0;
+    let b = m6 * r0 + m7 * g0 + m8 * b0;
+    let f;
+    let k;
+    if (r <= 0) r = lutR[0];
+    else if ((f = r * sR) >= N) r = lutR[N];
+    else {
+      k = f | 0;
+      r = lutR[k] + (lutR[k + 1] - lutR[k]) * (f - k);
+    }
+    if (g <= 0) g = lutG[0];
+    else if ((f = g * sG) >= N) g = lutG[N];
+    else {
+      k = f | 0;
+      g = lutG[k] + (lutG[k + 1] - lutG[k]) * (f - k);
+    }
+    if (b <= 0) b = lutB[0];
+    else if ((f = b * sB) >= N) b = lutB[N];
+    else {
+      k = f | 0;
+      b = lutB[k] + (lutB[k + 1] - lutB[k]) * (f - k);
+    }
+    if (hasSaturation) {
+      const y = wr * r + wg * g + wb * b;
+      r = y + (r - y) * saturation;
+      g = y + (g - y) * saturation;
+      b = y + (b - y) * saturation;
+    }
+    data[i] = enc[r <= 0 ? 0 : r >= 1 ? ENCODE_LUT_SIZE : r * ENCODE_LUT_SIZE + 0.5 | 0];
+    data[i + 1] = enc[g <= 0 ? 0 : g >= 1 ? ENCODE_LUT_SIZE : g * ENCODE_LUT_SIZE + 0.5 | 0];
+    data[i + 2] = enc[b <= 0 ? 0 : b >= 1 ? ENCODE_LUT_SIZE : b * ENCODE_LUT_SIZE + 0.5 | 0];
+    if (hasOpacity) data[i + 3] = clamp(data[i + 3] * opacity);
   }
 }
 function applyFastBoxBlur(imageData, radius) {
@@ -593,7 +936,7 @@ var ImageEditorRenderer = (_class2 = class {constructor() { _class2.prototype.__
       `${naturalWidth}x${naturalHeight}`,
       `${region.x},${region.y},${region.width},${region.height}`,
       `${projection.angle},${transform.flipH},${transform.flipV}`,
-      `${adjustments.brightness},${adjustments.contrast},${adjustments.saturation},${adjustments.exposure},${adjustments.temperature},${adjustments.blur},${adjustments.opacity}`,
+      `${adjustments.brightness},${adjustments.contrast},${adjustments.saturation},${adjustments.exposure},${adjustments.temperature},${_nullishCoalesce(adjustments.tint, () => ( 0))},${adjustments.blur},${adjustments.opacity},p${normalizeProcessVersion(adjustments.process)}`,
       `${depthMask.enabled},${depthMask.maskSource},${_optionalChain([depthMask, 'access', _ => _.depthRange, 'optionalAccess', _2 => _2[0]])}-${_optionalChain([depthMask, 'access', _3 => _3.depthRange, 'optionalAccess', _4 => _4[1]])},${depthMask.softness},${depthMask.invert},${depthMask.mode}`
     ].join("|");
     let baseCanvas = this.cachedBaseCanvas;
@@ -1064,9 +1407,19 @@ var DEFAULT_ADJUSTMENTS = {
   saturation: 0,
   exposure: 0,
   temperature: 0,
+  tint: 0,
   blur: 0,
-  opacity: 1
+  opacity: 1,
+  process: LATEST_PROCESS_VERSION
 };
+function normalizeStoredAdjustments(stored) {
+  if (!stored) return { ...DEFAULT_ADJUSTMENTS };
+  return {
+    ...DEFAULT_ADJUSTMENTS,
+    ...stored,
+    process: normalizeProcessVersion(stored.process)
+  };
+}
 var DEFAULT_TRANSFORM = {
   rotate: 0,
   flipH: false,
@@ -1096,10 +1449,7 @@ var ImageEditorController = (_class3 = class {
     this.maxHistoryDepth = _nullishCoalesce(options.maxHistoryDepth, () => ( 50));
     this.onStateChange = options.onStateChange;
     this.renderer = new ImageEditorRenderer();
-    const initialAdjustments = {
-      ...DEFAULT_ADJUSTMENTS,
-      ..._optionalChain([options, 'access', _9 => _9.initialState, 'optionalAccess', _10 => _10.adjustments])
-    };
+    const initialAdjustments = normalizeStoredAdjustments(_optionalChain([options, 'access', _9 => _9.initialState, 'optionalAccess', _10 => _10.adjustments]));
     const initialTransform = {
       ...DEFAULT_TRANSFORM,
       ..._optionalChain([options, 'access', _11 => _11.initialState, 'optionalAccess', _12 => _12.transform])
@@ -1346,6 +1696,19 @@ var ImageEditorController = (_class3 = class {
     };
     this.notify();
   }
+  /** True when the adjustments use an older rendering process than {@link LATEST_PROCESS_VERSION}. */
+  get isProcessOutdated() {
+    return normalizeProcessVersion(this.state.adjustments.process) < LATEST_PROCESS_VERSION;
+  }
+  /**
+   * Update to Current Process: re-interprets the current adjustment values with the latest
+   * rendering process (one undo step). Returns false when already current.
+   */
+  upgradeProcess() {
+    if (!this.isProcessOutdated) return false;
+    this.setAdjustments({ process: LATEST_PROCESS_VERSION });
+    return true;
+  }
   resetAdjustments() {
     this.recordHistory();
     this.state.adjustments = { ...DEFAULT_ADJUSTMENTS };
@@ -1564,7 +1927,7 @@ var ImageEditorController = (_class3 = class {
       version: 1,
       crop: this.state.crop ? { ...this.state.crop } : null,
       transform: { ...this.state.transform },
-      adjustments: { ...this.state.adjustments },
+      adjustments: serializeAdjustments(this.state.adjustments),
       depthMask: {
         ...this.state.depthMask,
         depthRange: [...this.state.depthMask.depthRange]
@@ -1575,7 +1938,7 @@ var ImageEditorController = (_class3 = class {
   applySerializedState(data) {
     this.state.crop = data.crop ? { ...data.crop } : null;
     this.state.transform = { ...data.transform };
-    this.state.adjustments = { ...data.adjustments };
+    this.state.adjustments = normalizeStoredAdjustments(data.adjustments);
     this.state.depthMask = {
       ...data.depthMask,
       depthRange: [...data.depthMask.depthRange]
@@ -1583,6 +1946,14 @@ var ImageEditorController = (_class3 = class {
     this.state.annotations = JSON.parse(JSON.stringify(data.annotations || []));
   }
 }, _class3);
+function serializeAdjustments(adjustments) {
+  const out = { ...adjustments };
+  if (normalizeProcessVersion(out.process) === LEGACY_PROCESS_VERSION) {
+    delete out.process;
+    if (!out.tint) delete out.tint;
+  }
+  return out;
+}
 function scaleAnnotation(ann, sx, sy) {
   const k = Math.sqrt(Math.abs(sx * sy));
   const base = { ...ann, x: ann.x * sx, y: ann.y * sy };
@@ -1630,5 +2001,39 @@ function scaleAnnotation(ann, sx, sy) {
 
 
 
-exports.DEFAULT_ADJUSTMENTS = DEFAULT_ADJUSTMENTS; exports.DEFAULT_DEPTH_MASK = DEFAULT_DEPTH_MASK; exports.DEFAULT_TRANSFORM = DEFAULT_TRANSFORM; exports.ImageEditorController = ImageEditorController; exports.ImageEditorRenderer = ImageEditorRenderer; exports.applyAdjustments = applyAdjustments; exports.applyDepthMask = applyDepthMask; exports.applyImageProjectionToContext = applyImageProjectionToContext; exports.calculateCropDrag = calculateCropDrag; exports.canvasToImagePoint = canvasToImagePoint; exports.clampCropToImage = clampCropToImage; exports.getAnnotationBounds = getAnnotationBounds; exports.getCropCursor = getCropCursor; exports.getRotatedSize = getRotatedSize; exports.getViewportMetrics = getViewportMetrics; exports.getViewportProjection = getViewportProjection; exports.globalImageCache = globalImageCache; exports.hitTestAnnotation = hitTestAnnotation; exports.hitTestCrop = hitTestCrop; exports.imageToCanvasPoint = imageToCanvasPoint; exports.isQuarterTurnSwapped = isQuarterTurnSwapped; exports.mapCropHandle = mapCropHandle; exports.normalizeAngle = normalizeAngle; exports.projectImagePoint = projectImagePoint; exports.projectImageRect = projectImageRect; exports.removeAlpha = removeAlpha; exports.unprojectCanvasPoint = unprojectCanvasPoint;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.AS_SHOT_KELVIN = AS_SHOT_KELVIN; exports.D65 = D65; exports.DEFAULT_ADJUSTMENTS = DEFAULT_ADJUSTMENTS; exports.DEFAULT_DEPTH_MASK = DEFAULT_DEPTH_MASK; exports.DEFAULT_TRANSFORM = DEFAULT_TRANSFORM; exports.IDENTITY_MATRIX3 = IDENTITY_MATRIX3; exports.ImageEditorController = ImageEditorController; exports.ImageEditorRenderer = ImageEditorRenderer; exports.LATEST_PROCESS_VERSION = LATEST_PROCESS_VERSION; exports.LEGACY_PROCESS_VERSION = LEGACY_PROCESS_VERSION; exports.LUMA_709 = LUMA_709; exports.MAX_KELVIN = MAX_KELVIN; exports.MIN_KELVIN = MIN_KELVIN; exports.MIRED_PER_TEMPERATURE_UNIT = MIRED_PER_TEMPERATURE_UNIT; exports.TINT_SCALE = TINT_SCALE; exports.TONE_LUT_SIZE = TONE_LUT_SIZE; exports.applyAdjustments = applyAdjustments; exports.applyDepthMask = applyDepthMask; exports.applyImageProjectionToContext = applyImageProjectionToContext; exports.applyLegacyAdjustments = applyLegacyAdjustments; exports.applyMatrix3 = applyMatrix3; exports.applyProcess2Adjustments = applyProcess2Adjustments; exports.bradfordAdaptation = bradfordAdaptation; exports.buildToneLut = buildToneLut; exports.calculateCropDrag = calculateCropDrag; exports.canvasToImagePoint = canvasToImagePoint; exports.clampCropToImage = clampCropToImage; exports.getAnnotationBounds = getAnnotationBounds; exports.getCropCursor = getCropCursor; exports.getRotatedSize = getRotatedSize; exports.getViewportMetrics = getViewportMetrics; exports.getViewportProjection = getViewportProjection; exports.globalImageCache = globalImageCache; exports.hitTestAnnotation = hitTestAnnotation; exports.hitTestCrop = hitTestCrop; exports.imageToCanvasPoint = imageToCanvasPoint; exports.invertMatrix3 = invertMatrix3; exports.isQuarterTurnSwapped = isQuarterTurnSwapped; exports.kelvinToTemperature = kelvinToTemperature; exports.linearSrgbToXy = linearSrgbToXy; exports.linearToSrgb = linearToSrgb; exports.mapCropHandle = mapCropHandle; exports.mulMatrix3 = mulMatrix3; exports.normalizeAngle = normalizeAngle; exports.normalizeProcessVersion = normalizeProcessVersion; exports.normalizeStoredAdjustments = normalizeStoredAdjustments; exports.projectImagePoint = projectImagePoint; exports.projectImageRect = projectImageRect; exports.removeAlpha = removeAlpha; exports.sampleToneLut = sampleToneLut; exports.srgbToLinear = srgbToLinear; exports.tempTintToXy = tempTintToXy; exports.temperatureToKelvin = temperatureToKelvin; exports.toneCurve = toneCurve; exports.unprojectCanvasPoint = unprojectCanvasPoint; exports.uvToXy = uvToXy; exports.wbMatrix = wbMatrix; exports.whiteBalanceFromSample = whiteBalanceFromSample; exports.whiteBalanceMatrix = whiteBalanceMatrix; exports.xyToTempTint = xyToTempTint; exports.xyToUv = xyToUv;
 //# sourceMappingURL=index.cjs.map