@multiplekex/shallot 0.2.5 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@multiplekex/shallot",
-    "version": "0.2.5",
+    "version": "0.3.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/core/component.ts

@@ -11,7 +11,7 @@ export interface FieldAccessor {
 
 export interface ComponentTraits {
     defaults?: () => Record<string, number>;
-    adapter?: (attrs: Record<string, string>, eid: number) => Record<string, number>;
+    parse?: Record<string, (value: string) => number | undefined>;
 }
 
 const traitsMap = new WeakMap<ComponentLike, ComponentTraits>();

package/src/core/index.ts

@@ -79,16 +79,4 @@ export { toKebabCase, toCamelCase } from "./strings";
 
 export { initRuntime, getRuntime, resetRuntime, type Runtime, type RuntimeTarget } from "./runtime";
 
-export {
-    parse,
-    serialize,
-    load,
-    registerPostLoadHook,
-    unregisterPostLoadHook,
-    type Node,
-    type Attr,
-    type Ref,
-    type ParseError,
-    type PostLoadHook,
-    type PostLoadContext,
-} from "./xml";
+export { parse, serialize, load, type Node, type Attr, type Ref, type ParseError } from "./xml";

package/src/core/math.ts

@@ -284,6 +284,192 @@ export function extractFrustumPlanes(viewProj: Float32Array): Float32Array {
     return planes;
 }
 
+export function lookAtMatrix(
+    eyeX: number,
+    eyeY: number,
+    eyeZ: number,
+    targetX: number,
+    targetY: number,
+    targetZ: number,
+    upX = 0,
+    upY = 1,
+    upZ = 0
+): Float32Array {
+    let zx = eyeX - targetX;
+    let zy = eyeY - targetY;
+    let zz = eyeZ - targetZ;
+    let zLen = Math.sqrt(zx * zx + zy * zy + zz * zz);
+
+    if (zLen < 1e-6) {
+        zx = 0;
+        zy = 0;
+        zz = 1;
+    } else {
+        zLen = 1 / zLen;
+        zx *= zLen;
+        zy *= zLen;
+        zz *= zLen;
+    }
+
+    let xx = upY * zz - upZ * zy;
+    let xy = upZ * zx - upX * zz;
+    let xz = upX * zy - upY * zx;
+    let xLen = Math.sqrt(xx * xx + xy * xy + xz * xz);
+
+    if (xLen < 1e-6) {
+        if (Math.abs(zy) > 0.9) {
+            xx = 1;
+            xy = 0;
+            xz = 0;
+        } else {
+            xx = -zz;
+            xy = 0;
+            xz = zx;
+        }
+        xLen = Math.sqrt(xx * xx + xy * xy + xz * xz);
+    }
+
+    xLen = 1 / xLen;
+    xx *= xLen;
+    xy *= xLen;
+    xz *= xLen;
+
+    const yx = zy * xz - zz * xy;
+    const yy = zz * xx - zx * xz;
+    const yz = zx * xy - zy * xx;
+
+    const tx = -(xx * eyeX + xy * eyeY + xz * eyeZ);
+    const ty = -(yx * eyeX + yy * eyeY + yz * eyeZ);
+    const tz = -(zx * eyeX + zy * eyeY + zz * eyeZ);
+
+    return new Float32Array([xx, yx, zx, 0, xy, yy, zy, 0, xz, yz, zz, 0, tx, ty, tz, 1]);
+}
+
+export function orthographicBounds(
+    left: number,
+    right: number,
+    bottom: number,
+    top: number,
+    near: number,
+    far: number
+): Float32Array {
+    const lr = 1 / (right - left);
+    const bt = 1 / (top - bottom);
+    const nf = 1 / (near - far);
+
+    return new Float32Array([
+        2 * lr,
+        0,
+        0,
+        0,
+        0,
+        2 * bt,
+        0,
+        0,
+        0,
+        0,
+        nf,
+        0,
+        -(right + left) * lr,
+        -(top + bottom) * bt,
+        near * nf,
+        1,
+    ]);
+}
+
+export function extractFrustumCorners(
+    invViewProj: Float32Array,
+    nearZ: number,
+    farZ: number
+): Float32Array {
+    const corners = new Float32Array(24);
+    const ndcCorners = [
+        [-1, -1, nearZ],
+        [1, -1, nearZ],
+        [-1, 1, nearZ],
+        [1, 1, nearZ],
+        [-1, -1, farZ],
+        [1, -1, farZ],
+        [-1, 1, farZ],
+        [1, 1, farZ],
+    ];
+
+    for (let i = 0; i < 8; i++) {
+        const [nx, ny, nz] = ndcCorners[i];
+        const m = invViewProj;
+
+        const wx = m[0] * nx + m[4] * ny + m[8] * nz + m[12];
+        const wy = m[1] * nx + m[5] * ny + m[9] * nz + m[13];
+        const wz = m[2] * nx + m[6] * ny + m[10] * nz + m[14];
+        const ww = m[3] * nx + m[7] * ny + m[11] * nz + m[15];
+
+        corners[i * 3] = wx / ww;
+        corners[i * 3 + 1] = wy / ww;
+        corners[i * 3 + 2] = wz / ww;
+    }
+
+    return corners;
+}
+
+export function invertMatrix(m: Float32Array): Float32Array {
+    const out = new Float32Array(16);
+
+    const a00 = m[0],
+        a01 = m[1],
+        a02 = m[2],
+        a03 = m[3];
+    const a10 = m[4],
+        a11 = m[5],
+        a12 = m[6],
+        a13 = m[7];
+    const a20 = m[8],
+        a21 = m[9],
+        a22 = m[10],
+        a23 = m[11];
+    const a30 = m[12],
+        a31 = m[13],
+        a32 = m[14],
+        a33 = m[15];
+
+    const b00 = a00 * a11 - a01 * a10;
+    const b01 = a00 * a12 - a02 * a10;
+    const b02 = a00 * a13 - a03 * a10;
+    const b03 = a01 * a12 - a02 * a11;
+    const b04 = a01 * a13 - a03 * a11;
+    const b05 = a02 * a13 - a03 * a12;
+    const b06 = a20 * a31 - a21 * a30;
+    const b07 = a20 * a32 - a22 * a30;
+    const b08 = a20 * a33 - a23 * a30;
+    const b09 = a21 * a32 - a22 * a31;
+    const b10 = a21 * a33 - a23 * a31;
+    const b11 = a22 * a33 - a23 * a32;
+
+    let det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
+    if (Math.abs(det) < 1e-10) {
+        return out;
+    }
+    det = 1 / det;
+
+    out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
+    out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
+    out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
+    out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
+    out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
+    out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
+    out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
+    out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
+    out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
+    out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
+    out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
+    out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
+    out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
+    out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
+    out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
+    out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
+
+    return out;
+}
+
 export function lookAt(
     eyeX: number,
     eyeY: number,

package/src/core/state.ts

@@ -20,7 +20,7 @@ import type { RelationDef } from "./relation";
 import type { Plugin, StateBuilder } from "./builder";
 import { initRuntime, type Runtime } from "./runtime";
 import { registerComponent, getTraits, type ComponentData } from "./component";
-import { type ResourceKey } from "./resource";
+import type { ResourceKey } from "./resource";
 
 export const MAX_ENTITIES = 65536;
 

package/src/core/xml.ts

@@ -1,6 +1,11 @@
 import { addComponent, Pair } from "bitecs";
 import type { State } from "./state";
-import { getRegisteredComponent, type ComponentLike, type RegisteredComponent } from "./component";
+import {
+    getRegisteredComponent,
+    getTraits,
+    type ComponentLike,
+    type RegisteredComponent,
+} from "./component";
 import { getRelationDef, ChildOf } from "./relation";
 import { toKebabCase, toCamelCase } from "./strings";
 
@@ -136,7 +141,7 @@ function tokenize(xml: string): Token[] {
 
 function parseTagAttrs(tag: string): Record<string, string> {
     const attrs: Record<string, string> = {};
-    const attrRegex = /([^\s=<>\/]+)(?:\s*=\s*"([^"]*)")?/g;
+    const attrRegex = /([^\s=<>/]+)(?:\s*=\s*"([^"]*)")?/g;
     const inner = tag.replace(/^<\s*\w+/, "").replace(/\/?>$/, "");
     let match: RegExpExecArray | null;
 
@@ -312,23 +317,6 @@ function parseNodeFromTokens(
     };
 }
 
-export interface PostLoadContext {
-    getEntityByName(name: string): number | null;
-}
-
-export type PostLoadHook = (state: State, context: PostLoadContext) => void;
-
-const postLoadHooks: PostLoadHook[] = [];
-
-export function registerPostLoadHook(hook: PostLoadHook): void {
-    postLoadHooks.push(hook);
-}
-
-export function unregisterPostLoadHook(hook: PostLoadHook): void {
-    const idx = postLoadHooks.indexOf(hook);
-    if (idx !== -1) postLoadHooks.splice(idx, 1);
-}
-
 interface QueuedEntity {
     node: Node;
     eid: number;
@@ -376,13 +364,6 @@ export function load(nodes: Node[], state: State): Map<Node, number> {
         setFieldValue(ref.component, ref.field, ref.eid, targetEid);
     }
 
-    const context: PostLoadContext = {
-        getEntityByName: (name) => nameToEntity.get(name) ?? null,
-    };
-    for (const hook of postLoadHooks) {
-        hook(state, context);
-    }
-
     if (errors.length > 0) {
         throw new Error(errors.map((e) => e.message).join("\n"));
     }
@@ -487,24 +468,22 @@ function applyComponent(
         props["_value"] = value;
     }
 
-    let values: Record<string, number>;
-    let entityRefs: { field: string; targetName: string }[] = [];
-
-    if (traits?.adapter) {
-        values = traits.adapter(props, eid);
-    } else {
-        const result = parseAttrs(def, props);
-        values = result.values;
-        entityRefs = result.entityRefs;
-        for (const err of result.errors) {
-            errors.push({ message: `<${name}> ${err}` });
-        }
+    const result = parseAttrs(def, props);
+    const values = result.values;
+    const strings = result.strings;
+    const entityRefs = result.entityRefs;
+    for (const err of result.errors) {
+        errors.push({ message: `<${name}> ${err}` });
     }
 
     for (const [field, val] of Object.entries(values)) {
         setFieldValue(component, field, eid, val);
     }
 
+    for (const [field, val] of Object.entries(strings)) {
+        setString(component, field, eid, val);
+    }
+
     for (const ref of entityRefs) {
         pendingFieldRefs.push({
             eid,
@@ -520,10 +499,12 @@ function parseAttrs(
     props: Record<string, string>
 ): {
     values: Record<string, number>;
+    strings: Record<string, string>;
     entityRefs: { field: string; targetName: string }[];
     errors: string[];
 } {
     const allValues: Record<string, number> = {};
+    const allStrings: Record<string, string> = {};
     const allEntityRefs: { field: string; targetName: string }[] = [];
     const allErrors: string[] = [];
 
@@ -531,6 +512,7 @@ function parseAttrs(
         if (isCSSAttrSyntax(props._value)) {
             const result = parsePropertyString(def.name, props._value, def.component);
             Object.assign(allValues, result.values);
+            Object.assign(allStrings, result.strings);
             allEntityRefs.push(...result.entityRefs);
             allErrors.push(...result.errors);
         }
@@ -543,6 +525,7 @@ function parseAttrs(
         if (isCSSAttrSyntax(propValue)) {
             const result = parsePropertyString(def.name, propValue, def.component);
             Object.assign(allValues, result.values);
+            Object.assign(allStrings, result.strings);
             allEntityRefs.push(...result.entityRefs);
             allErrors.push(...result.errors);
         } else {
@@ -552,12 +535,13 @@ function parseAttrs(
                 def.component
             );
             Object.assign(allValues, result.values);
+            Object.assign(allStrings, result.strings);
             allEntityRefs.push(...result.entityRefs);
             allErrors.push(...result.errors);
         }
     }
 
-    return { values: allValues, entityRefs: allEntityRefs, errors: allErrors };
+    return { values: allValues, strings: allStrings, entityRefs: allEntityRefs, errors: allErrors };
 }
 
 function setFieldValue(component: ComponentLike, field: string, eid: number, value: number): void {
@@ -567,6 +551,17 @@ function setFieldValue(component: ComponentLike, field: string, eid: number, val
     }
 }
 
+function isStringField(component: ComponentLike, field: string): boolean {
+    const val = component[field];
+    if (val == null) return false;
+    if (ArrayBuffer.isView(val) || Array.isArray(val)) return false;
+    return typeof val === "object";
+}
+
+function setString(component: ComponentLike, field: string, eid: number, value: string): void {
+    (component[field] as Record<number, string>)[eid] = value;
+}
+
 function detectVec2(component: ComponentLike, base: string): boolean {
     return `${base}X` in component && `${base}Y` in component;
 }
@@ -594,7 +589,7 @@ function parseNumber(value: string): number | null {
     if (value === "false") return 0;
 
     const num = parseFloat(value);
-    return isNaN(num) ? null : num;
+    return Number.isNaN(num) ? null : num;
 }
 
 function parseValues(valueStr: string): (number | null)[] {
@@ -633,10 +628,12 @@ function parsePropertyString(
     component: ComponentLike
 ): {
     values: Record<string, number>;
+    strings: Record<string, string>;
     entityRefs: { field: string; targetName: string }[];
     errors: string[];
 } {
     const values: Record<string, number> = {};
+    const strings: Record<string, string> = {};
     const entityRefs: { field: string; targetName: string }[] = [];
     const errors: string[] = [];
 
@@ -679,6 +676,24 @@ function parsePropertyString(
         const parsed = parseValues(valueStr);
 
         if (parsed.some((v) => v === null)) {
+            const rawValue = valueStr.trim();
+
+            if (name in component && isStringField(component, name)) {
+                strings[name] = rawValue;
+                continue;
+            }
+
+            if (parsed.length === 1) {
+                const traits = getTraits(component);
+                const parseFn = traits?.parse?.[name];
+                if (parseFn) {
+                    const resolved = parseFn(rawValue);
+                    if (resolved !== undefined) {
+                        values[name] = resolved;
+                        continue;
+                    }
+                }
+            }
             errors.push(`Invalid number in "${prop}"`);
             continue;
         }
@@ -756,7 +771,7 @@ function parsePropertyString(
         }
     }
 
-    return { values, entityRefs, errors };
+    return { values, strings, entityRefs, errors };
 }
 
 function isCSSAttrSyntax(value: string): boolean {

package/src/extras/orbit/index.ts

@@ -45,7 +45,7 @@ setTraits(Orbit, {
         minPitch: -Math.PI / 2 + 0.01,
         maxPitch: Math.PI / 2 - 0.01,
         minDistance: 1,
-        maxDistance: 25,
+        maxDistance: 30,
         minSize: 0.5,
         maxSize: 50,
         targetSize: 5,

package/src/extras/text/index.ts

@@ -3,12 +3,10 @@ import { SDFGenerator } from "./sdf";
 import {
     MAX_ENTITIES,
     resource,
-    registerPostLoadHook,
     createFieldProxy,
     type Plugin,
     type State,
     type System,
-    type PostLoadContext,
     type FieldProxy,
 } from "../../core";
 import { setTraits } from "../../core/component";
@@ -31,14 +29,16 @@ const SDF_SIZE = 96;
 const SDF_EXPONENT = 9;
 const fontUrls: string[] = [];
 const loadedFonts: (Font | null)[] = [];
+const fontNames = new Map<string, number>();
 
 export const DEFAULT_FONT =
     "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf";
 
-export function font(url: string): number {
+export function font(url: string, name?: string): number {
     const id = fontUrls.length;
     fontUrls.push(url);
     loadedFonts.push(null);
+    if (name) fontNames.set(name, id);
     return id;
 }
 
@@ -46,9 +46,14 @@ export function getFont(id: number): Font | null {
     return loadedFonts[id] ?? null;
 }
 
+export function getFontByName(name: string): number | undefined {
+    return fontNames.get(name);
+}
+
 export function resetFonts(): void {
     fontUrls.length = 0;
     loadedFonts.length = 0;
+    fontNames.clear();
 }
 
 async function loadFonts(): Promise<void> {
@@ -141,35 +146,6 @@ export const Text = {
     colorB: createFieldProxy(data, 12, 10),
 };
 
-interface PendingText {
-    readonly eid: number;
-    readonly content: string;
-}
-
-let pendingTextContent: PendingText[] = [];
-
-function parseTextAttrs(attrs: Record<string, string>): Record<string, string> {
-    if (attrs._value) {
-        const parsed: Record<string, string> = {};
-        for (const part of attrs._value.split(";")) {
-            const colonIdx = part.indexOf(":");
-            if (colonIdx === -1) continue;
-            const key = part.slice(0, colonIdx).trim();
-            const value = part.slice(colonIdx + 1).trim();
-            if (key && value) parsed[key] = value;
-        }
-        return parsed;
-    }
-    return attrs;
-}
-
-function finalizePendingText(_state: State, _context: PostLoadContext): void {
-    for (const pending of pendingTextContent) {
-        Text.content[pending.eid] = pending.content;
-    }
-    pendingTextContent = [];
-}
-
 setTraits(Text, {
     defaults: () => ({
         font: 0,
@@ -180,36 +156,7 @@ setTraits(Text, {
         anchorY: 0,
         color: 0xffffff,
     }),
-    adapter: (attrs: Record<string, string>, eid: number) => {
-        const parsed = parseTextAttrs(attrs);
-        const result: Record<string, number> = {};
-
-        if (parsed.content) {
-            pendingTextContent.push({ eid, content: parsed.content });
-        }
-
-        if (parsed.font) result.font = parseInt(parsed.font, 10);
-        if (parsed["font-size"]) result.fontSize = parseFloat(parsed["font-size"]);
-        if (parsed.fontSize) result.fontSize = parseFloat(parsed.fontSize);
-        if (parsed.opacity) result.opacity = parseFloat(parsed.opacity);
-        if (parsed.visible) result.visible = parseFloat(parsed.visible);
-        if (parsed["anchor-x"]) result.anchorX = parseFloat(parsed["anchor-x"]);
-        if (parsed.anchorX) result.anchorX = parseFloat(parsed.anchorX);
-        if (parsed["anchor-y"]) result.anchorY = parseFloat(parsed["anchor-y"]);
-        if (parsed.anchorY) result.anchorY = parseFloat(parsed.anchorY);
-        if (parsed.color) {
-            const colorStr = parsed.color;
-            if (colorStr.startsWith("0x") || colorStr.startsWith("0X")) {
-                result.color = parseInt(colorStr, 16);
-            } else if (colorStr.startsWith("#")) {
-                result.color = parseInt(colorStr.slice(1), 16);
-            } else {
-                result.color = parseInt(colorStr, 10);
-            }
-        }
-
-        return result;
-    },
+    parse: { font: getFontByName },
 });
 
 interface GlyphMetrics {
@@ -669,7 +616,7 @@ interface PendingGlyph {
     a: number;
 }
 
-let glyphsByFont: PendingGlyph[][] = [];
+const glyphsByFont: PendingGlyph[][] = [];
 
 const TextSystem: System = {
     group: "draw",
@@ -788,8 +735,6 @@ export const TextPlugin: Plugin = {
     dependencies: [ComputePlugin, RenderPlugin],
 
     async initialize(state: State) {
-        registerPostLoadHook(finalizePendingText);
-
         const compute = Compute.from(state);
         const render = Render.from(state);
         if (!compute || !render) return;

package/src/extras/{water.ts → water/index.ts}

@@ -1,10 +1,13 @@
-import { surface } from "../standard/render/surface";
-import type { MeshData } from "../standard/render/mesh";
+import type { Plugin, State, System } from "../../core";
+import { setTraits } from "../../core/component";
+import { Transform } from "../../standard/transforms";
+import { Mesh, Volume, mesh, Surface, surface, RenderPlugin } from "../../standard/render";
+import type { MeshData } from "../../standard/render";
 
 const SEED1 = "vec2(127.1, 311.7)";
 const SEED2 = "vec2(269.5, 183.3)";
 
-export const Water = surface({
+const waterSurface = surface({
     fragment: `
     let p = (*surface).worldPos.xz * 3.0;
     let t = scene.time;
@@ -21,7 +24,7 @@ export const Water = surface({
     (*surface).normal = normalize(vec3(-dx * 0.015, 1.0, -dz * 0.015));`,
 });
 
-export function createSubdividedPlane(subdivisions: number = 32): MeshData {
+function createSubdividedPlane(subdivisions: number = 32): MeshData {
     const segments = subdivisions;
     const vertexCount = (segments + 1) * (segments + 1);
     const indexCount = segments * segments * 6;
@@ -62,3 +65,55 @@ export function createSubdividedPlane(subdivisions: number = 32): MeshData {
 
     return { vertices, indices, vertexCount, indexCount };
 }
+
+const waterMesh = mesh(createSubdividedPlane(64));
+
+export const Water = {
+    color: [] as number[],
+    opacity: [] as number[],
+    roughness: [] as number[],
+    metallic: [] as number[],
+    ior: [] as number[],
+    level: [] as number[],
+};
+setTraits(Water, {
+    defaults: () => ({
+        color: 0x4090a0,
+        opacity: 0.5,
+        roughness: 0.05,
+        metallic: 0.8,
+        ior: 1.33,
+        level: 0,
+    }),
+});
+
+const WaterSystem: System = {
+    group: "simulation",
+
+    update(state: State) {
+        for (const eid of state.query([Water])) {
+            if (!state.hasComponent(eid, Transform)) state.addComponent(eid, Transform);
+            if (!state.hasComponent(eid, Mesh)) state.addComponent(eid, Mesh);
+            if (!state.hasComponent(eid, Surface)) state.addComponent(eid, Surface);
+
+            Transform.posY[eid] = Water.level[eid];
+            Mesh.shape[eid] = waterMesh;
+            Mesh.color[eid] = Water.color[eid];
+            Mesh.opacity[eid] = Water.opacity[eid];
+            Mesh.roughness[eid] = Water.roughness[eid];
+            Mesh.metallic[eid] = Water.metallic[eid];
+            Mesh.ior[eid] = Water.ior[eid];
+            Mesh.sizeX[eid] = 40;
+            Mesh.sizeY[eid] = 1;
+            Mesh.sizeZ[eid] = 40;
+            Mesh.volume[eid] = Volume.HalfSpace;
+            Surface.type[eid] = waterSurface;
+        }
+    },
+};
+
+export const WaterPlugin: Plugin = {
+    systems: [WaterSystem],
+    components: { Water },
+    dependencies: [RenderPlugin],
+};