react-native-tgfx 0.0.0 → 0.0.2-alpha.0

package/ios/TgfxMetalView.mm

@@ -0,0 +1,267 @@
+#import "TgfxMetalView.h"
+
+#import <CoreVideo/CoreVideo.h>
+#import <Metal/Metal.h>
+#import <QuartzCore/CAMetalLayer.h>
+
+#include <algorithm>
+#include <atomic>
+#include <cstdint>
+#include <memory>
+#include <span>
+#include <string>
+#include <vector>
+
+#include "IdleGate.hpp"
+#include "Snapshot.hpp"
+#include "TgfxRenderer.hpp"
+#include "tgfx/gpu/metal/MetalWindow.h"
+
+// The `token` is the encoded buffer's owning reference, so ArrayBuffer.wrap needs no copy.
+void TgfxSnapshotRelease(void* token) {
+  delete static_cast<std::shared_ptr<tgfx::Data>*>(token);
+}
+
+@implementation TgfxMetalView {
+  std::unique_ptr<tgfxrn::TgfxRenderer> _renderer;
+  CADisplayLink* _displayLink;
+  dispatch_queue_t _renderQueue;
+  std::atomic<bool> _drawPending;
+  tgfxrn::IdleGate _idleGate;
+  std::atomic<bool> _windowBound;
+  // Set once the display link is gone, so a snapshot staged after that is rejected, not hung.
+  std::atomic<bool> _released;
+  std::atomic<double> _drawableWidth;
+  std::atomic<double> _drawableHeight;
+}
+
++ (Class)layerClass {
+  return [CAMetalLayer class];
+}
+
+- (CAMetalLayer*)metalLayer {
+  return (CAMetalLayer*)self.layer;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    [self commonInit];
+  }
+  return self;
+}
+
+- (instancetype)initWithCoder:(NSCoder*)coder {
+  if (self = [super initWithCoder:coder]) {
+    [self commonInit];
+  }
+  return self;
+}
+
+- (void)commonInit {
+  _renderer = std::make_unique<tgfxrn::TgfxRenderer>();
+  // The link pauses when idle, so a change nobody committed has to unpause it. Weak: the view owns it.
+  __weak __typeof(self) weakSelf = self;
+  _renderer->setWakeCallback([weakSelf] { [weakSelf wakeUp]; });
+  _windowBound = false;
+  _released = false;
+  _drawPending = false;
+  _drawableWidth = 0;
+  _drawableHeight = 0;
+  _renderQueue = dispatch_queue_create("tgfx.render", DISPATCH_QUEUE_SERIAL);
+  dispatch_set_target_queue(
+      _renderQueue, dispatch_get_global_queue(QOS_CLASS_USER_INTERACTIVE, 0));
+  self.contentScaleFactor = UIScreen.mainScreen.nativeScale;
+  self.opaque = NO;
+  CAMetalLayer* layer = [self metalLayer];
+  layer.device = MTLCreateSystemDefaultDevice();
+  layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
+  layer.contentsScale = self.contentScaleFactor;
+
+  _displayLink = [CADisplayLink displayLinkWithTarget:self
+                                             selector:@selector(render)];
+  [_displayLink addToRunLoop:NSRunLoop.mainRunLoop
+                     forMode:NSRunLoopCommonModes];
+}
+
+- (void)layoutSubviews {
+  [super layoutSubviews];
+  CGFloat scale = self.contentScaleFactor;
+  CGSize size = self.bounds.size;
+  CAMetalLayer* layer = [self metalLayer];
+  layer.contentsScale = scale;
+  layer.drawableSize = CGSizeMake(size.width * scale, size.height * scale);
+  _drawableWidth = size.width * scale;
+  _drawableHeight = size.height * scale;
+  if (_renderer != nullptr) {
+    _renderer->setPixelRatio(static_cast<float>(scale));
+    _renderer->onResize();
+  }
+  [self wakeUp];
+}
+
+- (void)bindWindowIfNeeded {
+  if (_windowBound || _renderer == nullptr) {
+    return;
+  }
+  if (_drawableWidth <= 0 || _drawableHeight <= 0) {
+    return;
+  }
+  auto window = tgfx::MetalWindow::MakeFrom([self metalLayer]);
+  if (window != nullptr) {
+    _renderer->setWindow(window);
+    _windowBound = true;
+  }
+}
+
+- (void)render {
+  auto tick = _idleGate.tick(_drawPending.load(std::memory_order_acquire));
+  if (tick == tgfxrn::IdleGate::Tick::Pause) {
+    _displayLink.paused = YES;
+  }
+  if (tick != tgfxrn::IdleGate::Tick::Draw) {
+    return;
+  }
+  if (_drawPending.exchange(true)) {
+    return;
+  }
+  dispatch_async(_renderQueue, ^{
+    [self bindWindowIfNeeded];
+    bool snapshotPending = false;
+    if (self->_renderer != nullptr) {
+      self->_renderer->draw();
+      snapshotPending = self->_renderer->snapshotPending();
+    }
+    self->_drawPending = false;
+    // A GPU transfer needs another tick, which the idle gate would otherwise pause before.
+    if (snapshotPending) {
+      [self wakeUp];
+    }
+  });
+}
+
+- (void)wakeUp {
+  _idleGate.wake();
+  if (_displayLink == nil) {
+    return;
+  }
+  if (NSThread.isMainThread) {
+    _displayLink.paused = NO;
+    return;
+  }
+  dispatch_async(dispatch_get_main_queue(), ^{
+    self->_displayLink.paused = NO;
+  });
+}
+
+- (void)setScene:(const double*)words
+           count:(NSInteger)count
+         strings:(NSArray<NSString*>*)strings {
+  if (_renderer == nullptr || words == nullptr || count <= 0) {
+    // As on Android: this drops the string-table delta too, which JS cannot resend.
+    return;
+  }
+  std::vector<std::string> table;
+  table.reserve(strings.count);
+  for (NSString* string in strings) {
+    table.emplace_back(string.UTF8String);
+  }
+  _renderer->setScene(std::span<const double>(words, static_cast<size_t>(count)),
+                      table);
+  [self wakeUp];
+}
+
+- (void)setOpaqueSurface:(BOOL)opaque {
+  self.opaque = opaque;
+  [self metalLayer].opaque = opaque;
+  if (_renderer != nullptr) {
+    _renderer->setOpaque(opaque);
+  }
+  [self wakeUp];
+}
+
+- (void)clearScene {
+  if (_renderer != nullptr) {
+    _renderer->clearScene();
+  }
+  [self wakeUp];
+}
+
+- (void)setValues:(const double*)values count:(int32_t)count {
+  if (_renderer != nullptr && values != nullptr) {
+    _renderer->setValues(std::vector<double>(values, values + count));
+  }
+  [self wakeUp];
+}
+
+- (void)snapshotWithFormat:(NSString*)format
+                   quality:(int)quality
+                      rect:(CGRect)rect
+                     scale:(float)scale
+                      path:(NSString*)path
+                completion:(TgfxSnapshotCompletion)completion {
+  if (_renderer == nullptr || _released) {
+    completion(nullptr, 0, nullptr, 0, 0,
+               @"[tgfx] snapshot: the canvas is no longer mounted");
+    return;
+  }
+  tgfxrn::SnapshotRequest request;
+  request.format = format.UTF8String;
+  request.quality = quality;
+  request.x = static_cast<float>(rect.origin.x);
+  request.y = static_cast<float>(rect.origin.y);
+  request.width = static_cast<float>(rect.size.width);
+  request.height = static_cast<float>(rect.size.height);
+  request.scale = scale;
+  request.path = path != nil ? path.UTF8String : "";
+  auto deliver = [completion](std::shared_ptr<tgfx::Data> data, int width, int height,
+                              const std::string& error) {
+    if (!error.empty()) {
+      completion(nullptr, 0, nullptr, 0, 0, @(error.c_str()));
+      return;
+    }
+    if (data == nullptr) {
+      completion(nullptr, 0, nullptr, width, height, nil);
+      return;
+    }
+    auto* token = new std::shared_ptr<tgfx::Data>(std::move(data));
+    completion(const_cast<void*>((*token)->data()),
+               static_cast<NSInteger>((*token)->size()), token, width, height, nil);
+  };
+  // Blitting a framebuffer-only drawable wedges the Metal device, so this is paired with deferSnapshotsToNextSurface().
+  dispatch_async(dispatch_get_main_queue(), ^{
+    if (self->_renderer == nullptr || self->_released) {
+      deliver(nullptr, 0, 0, "[tgfx] snapshot: the canvas is no longer mounted");
+      return;
+    }
+    CAMetalLayer* layer = [self metalLayer];
+    if (layer.framebufferOnly) {
+      layer.framebufferOnly = NO;
+      self->_renderer->deferSnapshotsToNextSurface();
+    }
+    self->_renderer->requestSnapshot(request, deliver);
+    [self wakeUp];
+  });
+}
+
+- (void)requestRender {
+  [self wakeUp];
+}
+
+- (void)releaseRenderer {
+  [_displayLink invalidate];
+  _displayLink = nil;
+  _windowBound = false;
+  _released = true;
+  if (_renderer == nullptr) {
+    return;
+  }
+  dispatch_sync(_renderQueue, ^{
+    self->_renderer->releaseWindow();
+  });
+}
+
+- (void)dealloc {
+  [self releaseRenderer];
+}
+
+@end

package/ios/libs/libtgfx.xcframework/Info.plist

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libtgfx-ios.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64</string>
+			<key>LibraryPath</key>
+			<string>libtgfx-ios.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libtgfx-ios.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libtgfx-ios.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

package/lib/compiler/colors.d.ts

@@ -0,0 +1,26 @@
+import { type MaybeSharedValue } from './values';
+/**
+ * Red, green, blue, alpha, each 0..1. The one colour form that can carry a
+ * SharedValue per channel, and so the one the engine can patch per frame — a
+ * packed integer cannot survive the float32 slot it would have to travel in.
+ */
+export type ColorComponents = readonly [
+    MaybeSharedValue<number> | number,
+    MaybeSharedValue<number> | number,
+    MaybeSharedValue<number> | number,
+    MaybeSharedValue<number> | number
+];
+export type Color = string | number | ColorComponents;
+/** Test hooks, so tests can assert the cache caches and retains. */
+export declare const colorCacheTestHooks: {
+    parses: number;
+    reset(): void;
+    readonly size: number;
+    readonly limit: number;
+};
+/** True for the four-channel form, the only one that can carry a live value. */
+export declare function isColorComponents(input: unknown): input is ColorComponents;
+/** Unpack `0xAARRGGBB` into the four 0..1 channels, in `ColorComponents` order. */
+export declare function colorChannels(packed: number): [number, number, number, number];
+/** Resolve any supported color input to a packed `0xAARRGGBB` integer. */
+export declare function resolveColor(input: Color | undefined): number;

package/lib/compiler/colors.js

@@ -0,0 +1,364 @@
+// Every colour input is normalized to a packed 0xAARRGGBB integer; an unparseable one is black.
+import { resolveNumber } from './values';
+const NAMED = {
+    aliceblue: 0xfff0f8ff,
+    antiquewhite: 0xfffaebd7,
+    aqua: 0xff00ffff,
+    aquamarine: 0xff7fffd4,
+    azure: 0xfff0ffff,
+    beige: 0xfff5f5dc,
+    bisque: 0xffffe4c4,
+    black: 0xff000000,
+    blanchedalmond: 0xffffebcd,
+    blue: 0xff0000ff,
+    blueviolet: 0xff8a2be2,
+    brown: 0xffa52a2a,
+    burlywood: 0xffdeb887,
+    burntsienna: 0xffea7e5d,
+    cadetblue: 0xff5f9ea0,
+    chartreuse: 0xff7fff00,
+    chocolate: 0xffd2691e,
+    coral: 0xffff7f50,
+    cornflowerblue: 0xff6495ed,
+    cornsilk: 0xfffff8dc,
+    crimson: 0xffdc143c,
+    cyan: 0xff00ffff,
+    darkblue: 0xff00008b,
+    darkcyan: 0xff008b8b,
+    darkgoldenrod: 0xffb8860b,
+    darkgray: 0xffa9a9a9,
+    darkgreen: 0xff006400,
+    darkgrey: 0xffa9a9a9,
+    darkkhaki: 0xffbdb76b,
+    darkmagenta: 0xff8b008b,
+    darkolivegreen: 0xff556b2f,
+    darkorange: 0xffff8c00,
+    darkorchid: 0xff9932cc,
+    darkred: 0xff8b0000,
+    darksalmon: 0xffe9967a,
+    darkseagreen: 0xff8fbc8f,
+    darkslateblue: 0xff483d8b,
+    darkslategray: 0xff2f4f4f,
+    darkslategrey: 0xff2f4f4f,
+    darkturquoise: 0xff00ced1,
+    darkviolet: 0xff9400d3,
+    deeppink: 0xffff1493,
+    deepskyblue: 0xff00bfff,
+    dimgray: 0xff696969,
+    dimgrey: 0xff696969,
+    dodgerblue: 0xff1e90ff,
+    firebrick: 0xffb22222,
+    floralwhite: 0xfffffaf0,
+    forestgreen: 0xff228b22,
+    fuchsia: 0xffff00ff,
+    gainsboro: 0xffdcdcdc,
+    ghostwhite: 0xfff8f8ff,
+    gold: 0xffffd700,
+    goldenrod: 0xffdaa520,
+    gray: 0xff808080,
+    green: 0xff008000,
+    greenyellow: 0xffadff2f,
+    grey: 0xff808080,
+    honeydew: 0xfff0fff0,
+    hotpink: 0xffff69b4,
+    indianred: 0xffcd5c5c,
+    indigo: 0xff4b0082,
+    ivory: 0xfffffff0,
+    khaki: 0xfff0e68c,
+    lavender: 0xffe6e6fa,
+    lavenderblush: 0xfffff0f5,
+    lawngreen: 0xff7cfc00,
+    lemonchiffon: 0xfffffacd,
+    lightblue: 0xffadd8e6,
+    lightcoral: 0xfff08080,
+    lightcyan: 0xffe0ffff,
+    lightgoldenrodyellow: 0xfffafad2,
+    lightgray: 0xffd3d3d3,
+    lightgreen: 0xff90ee90,
+    lightgrey: 0xffd3d3d3,
+    lightpink: 0xffffb6c1,
+    lightsalmon: 0xffffa07a,
+    lightseagreen: 0xff20b2aa,
+    lightskyblue: 0xff87cefa,
+    lightslategray: 0xff778899,
+    lightslategrey: 0xff778899,
+    lightsteelblue: 0xffb0c4de,
+    lightyellow: 0xffffffe0,
+    lime: 0xff00ff00,
+    limegreen: 0xff32cd32,
+    linen: 0xfffaf0e6,
+    magenta: 0xffff00ff,
+    maroon: 0xff800000,
+    mediumaquamarine: 0xff66cdaa,
+    mediumblue: 0xff0000cd,
+    mediumorchid: 0xffba55d3,
+    mediumpurple: 0xff9370db,
+    mediumseagreen: 0xff3cb371,
+    mediumslateblue: 0xff7b68ee,
+    mediumspringgreen: 0xff00fa9a,
+    mediumturquoise: 0xff48d1cc,
+    mediumvioletred: 0xffc71585,
+    midnightblue: 0xff191970,
+    mintcream: 0xfff5fffa,
+    mistyrose: 0xffffe4e1,
+    moccasin: 0xffffe4b5,
+    navajowhite: 0xffffdead,
+    navy: 0xff000080,
+    oldlace: 0xfffdf5e6,
+    olive: 0xff808000,
+    olivedrab: 0xff6b8e23,
+    orange: 0xffffa500,
+    orangered: 0xffff4500,
+    orchid: 0xffda70d6,
+    palegoldenrod: 0xffeee8aa,
+    palegreen: 0xff98fb98,
+    paleturquoise: 0xffafeeee,
+    palevioletred: 0xffdb7093,
+    papayawhip: 0xffffefd5,
+    peachpuff: 0xffffdab9,
+    peru: 0xffcd853f,
+    pink: 0xffffc0cb,
+    plum: 0xffdda0dd,
+    powderblue: 0xffb0e0e6,
+    purple: 0xff800080,
+    rebeccapurple: 0xff663399,
+    red: 0xffff0000,
+    rosybrown: 0xffbc8f8f,
+    royalblue: 0xff4169e1,
+    saddlebrown: 0xff8b4513,
+    salmon: 0xfffa8072,
+    sandybrown: 0xfff4a460,
+    seagreen: 0xff2e8b57,
+    seashell: 0xfffff5ee,
+    sienna: 0xffa0522d,
+    silver: 0xffc0c0c0,
+    skyblue: 0xff87ceeb,
+    slateblue: 0xff6a5acd,
+    slategray: 0xff708090,
+    slategrey: 0xff708090,
+    snow: 0xfffffafa,
+    springgreen: 0xff00ff7f,
+    steelblue: 0xff4682b4,
+    tan: 0xffd2b48c,
+    teal: 0xff008080,
+    thistle: 0xffd8bfd8,
+    tomato: 0xffff6347,
+    transparent: 0x00000000,
+    turquoise: 0xff40e0d0,
+    violet: 0xffee82ee,
+    wheat: 0xfff5deb3,
+    white: 0xffffffff,
+    whitesmoke: 0xfff5f5f5,
+    yellow: 0xffffff00,
+    yellowgreen: 0xff9acd32,
+};
+function clampByte(n) {
+    if (n < 0) {
+        return 0;
+    }
+    if (n > 255) {
+        return 255;
+    }
+    return Math.round(n);
+}
+function pack(a, r, g, b) {
+    return (((clampByte(a) << 24) |
+        (clampByte(r) << 16) |
+        (clampByte(g) << 8) |
+        clampByte(b)) >>>
+        0);
+}
+const HEX_DIGITS = /^[0-9a-f]+$/;
+function fromHex(hex) {
+    let h = hex.slice(1);
+    if (h.length === 3 || h.length === 4) {
+        h = h
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    // parseInt stops at the first non-hex digit, so validate before trusting it.
+    if (!HEX_DIGITS.test(h)) {
+        return undefined;
+    }
+    if (h.length === 6) {
+        h = 'ff' + h.slice(0, 6);
+        const v = parseInt(h, 16);
+        return v >>> 0;
+    }
+    if (h.length === 8) {
+        // input is RRGGBBAA -> repack to AARRGGBB
+        const r = parseInt(h.slice(0, 2), 16);
+        const g = parseInt(h.slice(2, 4), 16);
+        const b = parseInt(h.slice(4, 6), 16);
+        const a = parseInt(h.slice(6, 8), 16);
+        return pack(a, r, g, b);
+    }
+    return undefined;
+}
+function allFinite(...ns) {
+    return ns.every((n) => Number.isFinite(n));
+}
+// `50%` is 0..100 of the channel range, a bare token is already 0..255.
+function parseComponent(token) {
+    const n = parseFloat(token ?? '');
+    // `(n / 100) * 255`, not `n * 2.55`: the latter puts 50% at 127.49999999999999.
+    return token?.endsWith('%') === true ? (n / 100) * 255 : n;
+}
+// A `%` alpha is 0..100, a bare alpha is already 0..1.
+function parseAlpha(token) {
+    if (token == null) {
+        return 1;
+    }
+    const n = parseFloat(token);
+    return token.endsWith('%') ? n / 100 : n;
+}
+function fromFunc(str) {
+    const inside = str.slice(str.indexOf('(') + 1, str.lastIndexOf(')'));
+    const parts = inside.split(/[ ,/]+/).filter((p) => p.length > 0);
+    const r = parseComponent(parts[0]);
+    const g = parseComponent(parts[1]);
+    const b = parseComponent(parts[2]);
+    const a = parseAlpha(parts[3]);
+    if (!allFinite(r, g, b, a)) {
+        return undefined;
+    }
+    return pack(Math.round(a * 255), r, g, b);
+}
+function fromHsl(str) {
+    const inside = str.slice(str.indexOf('(') + 1, str.lastIndexOf(')'));
+    const parts = inside.split(/[ ,/]+/).filter((p) => p.length > 0);
+    const h = parseFloat(parts[0] ?? '');
+    const s = parseFloat(parts[1] ?? '') / 100;
+    const l = parseFloat(parts[2] ?? '') / 100;
+    const alpha = parseAlpha(parts[3]);
+    if (!allFinite(h, s, l, alpha)) {
+        return undefined;
+    }
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const hp = (((h % 360) + 360) % 360) / 60;
+    const x = c * (1 - Math.abs((hp % 2) - 1));
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (hp < 1) {
+        r = c;
+        g = x;
+    }
+    else if (hp < 2) {
+        r = x;
+        g = c;
+    }
+    else if (hp < 3) {
+        g = c;
+        b = x;
+    }
+    else if (hp < 4) {
+        g = x;
+        b = c;
+    }
+    else if (hp < 5) {
+        r = x;
+        b = c;
+    }
+    else {
+        r = c;
+        b = x;
+    }
+    const m = l - c / 2;
+    return pack(Math.round(alpha * 255), (r + m) * 255, (g + m) * 255, (b + m) * 255);
+}
+const CACHE = new Map();
+const CACHE_LIMIT = 512;
+const WARNED = new Set();
+/** Test hooks, so tests can assert the cache caches and retains. */
+export const colorCacheTestHooks = {
+    parses: 0,
+    reset() {
+        CACHE.clear();
+        WARNED.clear();
+        colorCacheTestHooks.parses = 0;
+    },
+    get size() {
+        return CACHE.size;
+    },
+    get limit() {
+        return CACHE_LIMIT;
+    },
+};
+function warnUnparseable(str) {
+    if (typeof __DEV__ === 'undefined' || !__DEV__) {
+        return;
+    }
+    if (WARNED.has(str) || WARNED.size >= CACHE_LIMIT) {
+        return;
+    }
+    WARNED.add(str);
+    console.warn(`[react-native-tgfx] Unrecognized color "${str}", rendering opaque black. ` +
+        'Expected #rgb/#rgba/#rrggbb/#rrggbbaa, rgb()/rgba(), hsl()/hsla(), a CSS color name, or a packed 0xAARRGGBB number.');
+}
+function parseColor(str) {
+    colorCacheTestHooks.parses += 1;
+    let value;
+    if (str.startsWith('#')) {
+        value = fromHex(str);
+    }
+    else if (str.startsWith('rgb')) {
+        value = fromFunc(str);
+    }
+    else if (str.startsWith('hsl')) {
+        value = fromHsl(str);
+    }
+    else if (Object.hasOwn(NAMED, str)) {
+        value = NAMED[str];
+    }
+    if (value === undefined) {
+        warnUnparseable(str);
+        // Opaque black is `PaintCmd::color`'s default, so a bad colour degrades like a missing one.
+        return 0xff000000;
+    }
+    return value;
+}
+/** True for the four-channel form, the only one that can carry a live value. */
+export function isColorComponents(input) {
+    return Array.isArray(input) && input.length === 4;
+}
+function channel(input) {
+    const n = resolveNumber(input, 0);
+    return Math.round(Math.min(1, Math.max(0, n)) * 255);
+}
+/** Unpack `0xAARRGGBB` into the four 0..1 channels, in `ColorComponents` order. */
+export function colorChannels(packed) {
+    return [
+        ((packed >>> 16) & 0xff) / 255,
+        ((packed >>> 8) & 0xff) / 255,
+        (packed & 0xff) / 255,
+        ((packed >>> 24) & 0xff) / 255,
+    ];
+}
+/** Resolve any supported color input to a packed `0xAARRGGBB` integer. */
+export function resolveColor(input) {
+    if (input == null) {
+        return 0xff000000;
+    }
+    if (typeof input === 'number') {
+        return input >>> 0;
+    }
+    if (isColorComponents(input)) {
+        return (((channel(input[3]) << 24) |
+            (channel(input[0]) << 16) |
+            (channel(input[1]) << 8) |
+            channel(input[2])) >>>
+            0);
+    }
+    const cached = CACHE.get(input);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const value = parseColor(input.trim().toLowerCase());
+    // Keep the first entries rather than evicting: a scene past the cap would refill every frame.
+    if (CACHE.size < CACHE_LIMIT) {
+        CACHE.set(input, value);
+    }
+    return value;
+}