@multiplekex/shallot 0.1.12 → 0.2.0

package/src/editor/format.ts

@@ -0,0 +1,5 @@
+import { parse, serialize } from "../core";
+
+export function format(xml: string): string {
+    return serialize(parse(xml));
+}

package/src/editor/index.ts

@@ -0,0 +1,101 @@
+import type { Node } from "../core";
+
+export { format } from "./format";
+
+type Add = { type: "add"; parent: Node | null; node: Node; index: number };
+type Remove = { type: "remove"; parent: Node | null; node: Node; index: number };
+type SetAttr = { type: "setAttr"; node: Node; name: string; prev: string | null; next: string };
+
+export type Command = Add | Remove | SetAttr;
+
+export type History = { undo: Command[]; redo: Command[] };
+
+export type Selection = Set<Node>;
+
+function getChildren(parent: Node | null, nodes: Node[]): Node[] {
+    return parent ? parent.children : nodes;
+}
+
+export function apply(nodes: Node[], cmd: Command): void {
+    switch (cmd.type) {
+        case "add": {
+            const children = getChildren(cmd.parent, nodes);
+            children.splice(cmd.index, 0, cmd.node);
+            break;
+        }
+        case "remove": {
+            const children = getChildren(cmd.parent, nodes);
+            children.splice(cmd.index, 1);
+            break;
+        }
+        case "setAttr": {
+            const idx = cmd.node.attrs.findIndex((a) => a.name === cmd.name);
+            if (idx >= 0) {
+                cmd.node.attrs[idx].value = cmd.next;
+            } else {
+                cmd.node.attrs.push({ name: cmd.name, value: cmd.next });
+            }
+            break;
+        }
+    }
+}
+
+export function reverse(nodes: Node[], cmd: Command): void {
+    switch (cmd.type) {
+        case "add": {
+            const children = getChildren(cmd.parent, nodes);
+            children.splice(cmd.index, 1);
+            break;
+        }
+        case "remove": {
+            const children = getChildren(cmd.parent, nodes);
+            children.splice(cmd.index, 0, cmd.node);
+            break;
+        }
+        case "setAttr": {
+            const idx = cmd.node.attrs.findIndex((a) => a.name === cmd.name);
+            if (cmd.prev === null) {
+                if (idx >= 0) cmd.node.attrs.splice(idx, 1);
+            } else if (idx >= 0) {
+                cmd.node.attrs[idx].value = cmd.prev;
+            }
+            break;
+        }
+    }
+}
+
+export function execute(history: History, nodes: Node[], cmd: Command): void {
+    apply(nodes, cmd);
+    history.undo.push(cmd);
+    history.redo.length = 0;
+}
+
+export function undo(history: History, nodes: Node[]): void {
+    const cmd = history.undo.pop();
+    if (!cmd) return;
+    reverse(nodes, cmd);
+    history.redo.push(cmd);
+}
+
+export function redo(history: History, nodes: Node[]): void {
+    const cmd = history.redo.pop();
+    if (!cmd) return;
+    apply(nodes, cmd);
+    history.undo.push(cmd);
+}
+
+export function select(selection: Selection, ...nodesToSelect: Node[]): void {
+    for (const node of nodesToSelect) {
+        selection.add(node);
+    }
+}
+
+export function deselect(selection: Selection, ...nodesToDeselect: Node[]): void {
+    for (const node of nodesToDeselect) {
+        selection.delete(node);
+    }
+}
+
+export function clear(selection: Selection): void {
+    selection.clear();
+}

package/src/extras/arrows/index.ts

@@ -1,15 +1,24 @@
-import { MAX_ENTITIES, resource, type Plugin, type State, type System } from "../../core";
-import { setTraits, type FieldAccessor } from "../../core/component";
+import {
+    MAX_ENTITIES,
+    resource,
+    createFieldProxy,
+    type Plugin,
+    type State,
+    type System,
+    type FieldProxy,
+} from "../../core";
+import { setTraits } from "../../core/component";
 import { Compute, ComputePlugin, createEntityIdBuffer } from "../../standard/compute";
 import {
     Render,
     RenderPlugin,
-    DEPTH_FORMAT,
     Pass,
     registerDraw,
     type Draw,
     type SharedPassContext,
 } from "../../standard/render";
+import { DEPTH_FORMAT } from "../../standard/render/scene";
+import { SCENE_STRUCT_WGSL } from "../../standard/render/shaders";
 import { Transform } from "../../standard/transforms";
 import { Line, Lines, LinesPlugin } from "../lines";
 
@@ -17,44 +26,16 @@ export const ArrowData = {
     data: new Float32Array(MAX_ENTITIES * 4),
 };
 
-interface ArrowProxy extends Array<number>, FieldAccessor {}
-
-function arrowProxy(offset: number): ArrowProxy {
-    const data = ArrowData.data;
-
-    function getValue(eid: number): number {
-        return data[eid * 4 + offset];
-    }
-
-    function setValue(eid: number, value: number): void {
-        data[eid * 4 + offset] = value;
-    }
-
-    return new Proxy([] as unknown as ArrowProxy, {
-        get(_, prop) {
-            if (prop === "get") return getValue;
-            if (prop === "set") return setValue;
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return undefined;
-            return getValue(eid);
-        },
-        set(_, prop, value) {
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return false;
-            setValue(eid, value);
-            return true;
-        },
-    });
-}
+const data = ArrowData.data;
 
 export const Arrow: {
-    start: ArrowProxy;
-    end: ArrowProxy;
-    size: ArrowProxy;
+    start: FieldProxy;
+    end: FieldProxy;
+    size: FieldProxy;
 } = {
-    start: arrowProxy(0),
-    end: arrowProxy(1),
-    size: arrowProxy(2),
+    start: createFieldProxy(data, 4, 0),
+    end: createFieldProxy(data, 4, 1),
+    size: createFieldProxy(data, 4, 2),
 };
 
 setTraits(Arrow, {
@@ -63,11 +44,6 @@ setTraits(Arrow, {
         end: 1,
         size: 1,
     }),
-    accessors: {
-        start: Arrow.start,
-        end: Arrow.end,
-        size: Arrow.size,
-    },
 });
 
 export interface ArrowsConfig {
@@ -87,16 +63,7 @@ struct VertexOutput {
     @location(0) color: vec4<f32>,
 }
 
-struct Scene {
-    viewProj: mat4x4<f32>,
-    cameraWorld: mat4x4<f32>,
-    ambientColor: vec4<f32>,
-    sunDirection: vec4<f32>,
-    sunColor: vec4<f32>,
-    cameraMode: f32,
-    cameraSize: f32,
-    viewport: vec2<f32>,
-}
+${SCENE_STRUCT_WGSL}
 
 struct ArrowData {
     start: f32,
@@ -133,48 +100,40 @@ fn vs(@builtin(vertex_index) vid: u32, @builtin(instance_index) iid: u32) -> Ver
     let line = lines[eid];
     let transform = matrices[eid];
 
-    // Extract scale from transform matrix (use X axis scale)
     let scale = length(transform[0].xyz);
 
     let start = transform[3].xyz;
     let rotation = mat3x3<f32>(transform[0].xyz, transform[1].xyz, transform[2].xyz);
     let end = start + rotation * line.offset;
 
-    // Project start and end to clip space
     let startClip = scene.viewProj * vec4(start, 1.0);
     let endClip = scene.viewProj * vec4(end, 1.0);
 
-    // Convert to screen space (pixels from center)
     let startScreen = (startClip.xy / startClip.w) * scene.viewport * 0.5;
     let endScreen = (endClip.xy / endClip.w) * scene.viewport * 0.5;
 
-    // Anchor point in screen space
     let anchorScreen = select(startScreen, endScreen, isEnd);
     let anchorDepth = select(startClip.z / startClip.w, endClip.z / endClip.w, isEnd);
 
-    // Line direction in screen space (correct for aspect ratio)
     let dir = endScreen - startScreen;
     let len = length(dir);
     let normDir = select(vec2(1.0, 0.0), dir / len, len > 0.0001);
     let perp = vec2(-normDir.y, normDir.x);
 
-    // Arrow direction (pointing away from line)
     let arrowDir = select(-normDir, normDir, isEnd);
 
-    // Arrow dimensions in pixels
-    let arrowLengthPx = arrow.size * line.thickness * 4.0 * scale;
-    let arrowWidthPx = arrow.size * line.thickness * 2.0 * scale;
+    let viewportScale = scene.viewport.y / 1080.0;
+    let arrowLengthPx = arrow.size * line.thickness * 4.0 * scale * viewportScale;
+    let arrowWidthPx = arrow.size * line.thickness * 2.0 * scale * viewportScale;
 
-    // Build triangle in screen space
     var posScreen: vec2<f32>;
     switch vid {
-        case 0u: { posScreen = anchorScreen; }  // Tip
+        case 0u: { posScreen = anchorScreen; }
         case 1u: { posScreen = anchorScreen - arrowDir * arrowLengthPx + perp * arrowWidthPx; }
         case 2u: { posScreen = anchorScreen - arrowDir * arrowLengthPx - perp * arrowWidthPx; }
         default: { posScreen = anchorScreen; }
     }
 
-    // Convert back to NDC
     let pos = posScreen / (scene.viewport * 0.5);
 
     var out: VertexOutput;
@@ -252,7 +211,7 @@ function createArrowsDraw(config: ArrowsConfig): Draw {
 
     return {
         id: "arrows",
-        pass: Pass.Transparent,
+        pass: Pass.Overlay,
         order: 1,
 
         execute() {},
@@ -285,13 +244,13 @@ function createArrowsDraw(config: ArrowsConfig): Draw {
     };
 }
 
-export interface ArrowsState {
+export interface Arrows {
     buffer: GPUBuffer;
     entityIds: GPUBuffer;
     count: number;
 }
 
-export const Arrows = resource<ArrowsState>("arrows");
+export const Arrows = resource<Arrows>("arrows");
 
 const arrowEntityIdArray = new Uint32Array(MAX_ENTITIES * 2);
 
@@ -338,7 +297,7 @@ export const ArrowsPlugin: Plugin = {
 
         const { device } = compute;
 
-        const arrowsState: ArrowsState = {
+        const arrowsState: Arrows = {
             buffer: device.createBuffer({
                 label: "arrows",
                 size: MAX_ENTITIES * 4 * 4,

package/src/extras/gradient/index.ts

@@ -1,8 +1,7 @@
 import { MAX_ENTITIES, resource } from "../../core";
 import { setTraits, type FieldAccessor } from "../../core/component";
 import type { Plugin, State, System } from "../../core";
-import { Compute, type ComputeNode, type ExecutionContext } from "../../standard/compute";
-import { Pass } from "../../standard/render/pass";
+import { Canvas, Compute, type ComputeNode, type ExecutionContext } from "../../standard/compute";
 
 export type PhysicsConfig = {
     springConstant: number;
@@ -12,8 +11,8 @@ export type PhysicsConfig = {
 };
 
 export const DEFAULT_PHYSICS_CONFIG: PhysicsConfig = {
-    springConstant: 0.0002,
-    damping: 0.95,
+    springConstant: 0.72,
+    damping: 0.046,
     bounds: { min: -20, max: 120 },
     targetThreshold: 5,
 };
@@ -136,8 +135,8 @@ function generateBubbles(
         const x = physics.bounds.min + random() * range;
         const y = physics.bounds.min + random() * range;
         const color = generateHslColor(random);
-        const vx = (random() - 0.5) * 0.3;
-        const vy = (random() - 0.5) * 0.3;
+        const vx = (random() - 0.5) * 18;
+        const vy = (random() - 0.5) * 18;
         const targetX = physics.bounds.min + random() * range;
         const targetY = physics.bounds.min + random() * range;
         bubbles.push({ x, y, color, vx, vy, targetX, targetY });
@@ -155,17 +154,22 @@ function distance(x1: number, y1: number, x2: number, y2: number): number {
     return Math.sqrt(dx * dx + dy * dy);
 }
 
-function stepBubble(bubble: Bubble, physics: PhysicsConfig = DEFAULT_PHYSICS_CONFIG): Bubble {
+function stepBubble(
+    bubble: Bubble,
+    dt: number,
+    physics: PhysicsConfig = DEFAULT_PHYSICS_CONFIG
+): Bubble {
     let { x, y, vx, vy, targetX, targetY, color } = bubble;
 
-    vx += (targetX - x) * physics.springConstant;
-    vy += (targetY - y) * physics.springConstant;
+    vx += (targetX - x) * physics.springConstant * dt;
+    vy += (targetY - y) * physics.springConstant * dt;
 
-    vx *= physics.damping;
-    vy *= physics.damping;
+    const dampingFactor = Math.pow(physics.damping, dt);
+    vx *= dampingFactor;
+    vy *= dampingFactor;
 
-    x += vx;
-    y += vy;
+    x += vx * dt;
+    y += vy * dt;
 
     x = clamp(x, physics.bounds.min, physics.bounds.max);
     y = clamp(y, physics.bounds.min, physics.bounds.max);
@@ -427,23 +431,9 @@ setTraits(Gradient, {
         boundsMin: DEFAULT_PHYSICS_CONFIG.bounds.min,
         boundsMax: DEFAULT_PHYSICS_CONFIG.bounds.max,
     }),
-    accessors: {
-        angle: Gradient.angle,
-        enabled: Gradient.enabled,
-        bubbleSize: Gradient.bubbleSize,
-        bubbleBlur: Gradient.bubbleBlur,
-        textureEnabled: Gradient.textureEnabled,
-        textureOpacity: Gradient.textureOpacity,
-        overlayEnabled: Gradient.overlayEnabled,
-        bubbleCount: Gradient.bubbleCount,
-        springConstant: Gradient.springConstant,
-        damping: Gradient.damping,
-        boundsMin: Gradient.boundsMin,
-        boundsMax: Gradient.boundsMax,
-    },
 });
 
-export interface GradientState {
+export interface Gradients {
     bubbles: Map<number, Bubble[]>;
     randoms: Map<number, () => number>;
     width: number;
@@ -470,23 +460,23 @@ export interface GradientState {
     bubbleCount: number;
 }
 
-export const GradientResource = resource<GradientState>("gradient");
+export const Gradients = resource<Gradients>("gradient");
 
 export function clearGradientState(state: State): void {
-    const res = GradientResource.from(state);
+    const res = Gradients.from(state);
     if (!res) return;
     res.bubbles.clear();
     res.randoms.clear();
 }
 
 export function getBubbles(state: State, eid: number): Bubble[] | undefined {
-    const res = GradientResource.from(state);
+    const res = Gradients.from(state);
     if (!res) return undefined;
     return res.bubbles.get(eid);
 }
 
 export function setBubbles(state: State, eid: number, bubbles: Bubble[]): void {
-    const res = GradientResource.from(state);
+    const res = Gradients.from(state);
     if (!res) return;
     res.bubbles.set(eid, bubbles);
 }
@@ -497,7 +487,7 @@ export function updateBubble(
     index: number,
     updater: (bubble: Bubble) => Bubble
 ): void {
-    const res = GradientResource.from(state);
+    const res = Gradients.from(state);
     if (!res) return;
     const bubbles = res.bubbles.get(eid);
     if (!bubbles || index < 0 || index >= bubbles.length) return;
@@ -644,11 +634,9 @@ fn setSat(c: vec3f, s: f32) -> vec3f {
         return vec3f(0.0);
     }
 
-    // Sort channels and apply saturation
     var result = vec3f(0.0);
     let range = cmax - cmin;
 
-    // Apply proportional saturation to each channel
     result.r = (c.r - cmin) * s / range;
     result.g = (c.g - cmin) * s / range;
     result.b = (c.b - cmin) * s / range;
@@ -657,7 +645,6 @@ fn setSat(c: vec3f, s: f32) -> vec3f {
 }
 
 fn hueBlend(base: vec3f, blend: vec3f) -> vec3f {
-    // W3C CSS Compositing spec: Hue = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))
     let withSat = setSat(blend, sat(base));
     return setLum(withSat, lum(base));
 }
@@ -771,10 +758,9 @@ fn fs(input: VertexOutput) -> @location(0) vec4f {
 }
 `;
 
-function createCompositeNode(res: GradientState): ComputeNode {
+function createCompositeNode(res: Gradients): ComputeNode {
     return {
         id: "gradient",
-        pass: Pass.Opaque,
         inputs: [],
         outputs: [{ id: "scene", access: "write" }],
 
@@ -892,15 +878,14 @@ export const GradientSystem: System = {
 
     update(state: State) {
         const compute = Compute.from(state);
-        const res = GradientResource.from(state);
-        if (!compute || !res) return;
-
-        const canvas = state.canvas;
-        if (!canvas) return;
-
-        if (res.width !== canvas.width || res.height !== canvas.height) {
-            res.width = canvas.width;
-            res.height = canvas.height;
+        const res = Gradients.from(state);
+        const canvas = Canvas.from(state);
+        if (!compute || !res || !canvas) return;
+
+        const { element } = canvas;
+        if (res.width !== element.width || res.height !== element.height) {
+            res.width = element.width;
+            res.height = element.height;
         }
 
         for (const eid of state.query([Gradient])) {
@@ -931,8 +916,9 @@ export const GradientSystem: System = {
             }
 
             const random = res.randoms.get(eid)!;
+            const dt = state.time.deltaTime;
             for (let i = 0; i < b.length; i++) {
-                b[i] = updateBubbleTarget(stepBubble(b[i], physics), random, physics);
+                b[i] = updateBubbleTarget(stepBubble(b[i], dt, physics), random, physics);
             }
 
             if (!bubblesMoved(b)) continue;
@@ -1006,14 +992,12 @@ export const GradientSystem: System = {
     },
 };
 
-export { hashString, createSeededRandom, generateBubbles, stepBubble, parseColor };
-
 export const GradientPlugin: Plugin = {
     systems: [GradientSystem],
     components: { Gradient },
 
     initialize(state: State) {
-        const gradientState: GradientState = {
+        const gradientState: Gradients = {
             bubbles: new Map(),
             randoms: new Map(),
             width: 0,
@@ -1040,7 +1024,7 @@ export const GradientPlugin: Plugin = {
             bubbleCount: 4,
         };
 
-        state.setResource(GradientResource, gradientState);
+        state.setResource(Gradients, gradientState);
 
         const compute = Compute.from(state);
         if (compute) {