@rasamjs/core 0.2.0 → 0.3.1

package/src/changes/restore.ts

@@ -1,9 +1,11 @@
 import type { AnyNode } from '../core/types.js';
 import type { ParentNode } from '../mixins/types.js';
 import { destroySubtrees } from '../core/destruction.js';
-import { validateChild } from '../mixins/parent-internals.js';
+import { validateChild, withInternalStructure } from '../mixins/parent-internals.js';
 import { readTransformState } from '../mixins/transform-state.js';
 import { referenceValue } from '../services/reference-value.js';
+import { initializeNode } from '../services/initialization.js';
+import { isDerivedChange, ownsDerived } from './derived.js';
 import { captureState, sameState, stateAdapter, combineChanges } from './state.js';
 import {
   ChangeConflictError,
@@ -28,6 +30,14 @@ function currentValue(snapshot: ModelSnapshot | null, change: ModelChange): unkn
   return snapshot[change.domain];
 }
 
+/** An owner's derived child list is redrawn, not restored, so conflicts ignore it. */
+function comparable(value: unknown, change: ModelChange): unknown {
+  const snapshot = value as ModelSnapshot | null;
+  return change.domain === 'existence' && snapshot && ownsDerived(snapshot.constructor)
+    ? { ...snapshot, children: undefined }
+    : value;
+}
+
 function contentFeatures(content: ContentState): ModelFeatures['content'] {
   return {
     parts: content.parts.map((part) => (typeof part === 'string' ? part : part.node)),
@@ -58,8 +68,8 @@ function applyStateChange(
       },
     };
   }
-  if (change.domain === 'bounds') return { ...snapshot, contributesToBounds: value as boolean };
-  return { ...snapshot, [change.domain]: value };
+  const field = change.domain === 'bounds' ? 'contributesToBounds' : change.domain;
+  return { ...snapshot, [field]: value };
 }
 
 /** Validates the whole patch before writing; rolls back logical state on failure. */
@@ -80,7 +90,8 @@ function applyChanges(
   direction: 'undo' | 'redo',
 ): void {
   const service = owner.context.changes;
-  changes = combineChanges(changes);
+  // An owner redraws its derived children after replay, from the state replay restored.
+  changes = combineChanges(changes).filter((change) => !isDerivedChange(change));
   service.resetOrders();
   service.configure(stateAdapter);
   try {
@@ -97,7 +108,8 @@ function applyChanges(
         domains.set(change.target, new Set());
       }
       const expected = direction === 'undo' ? change.after : change.before;
-      if (!sameState(currentValue(before.get(change.target)!, change), expected))
+      const current = currentValue(before.get(change.target)!, change);
+      if (!sameState(comparable(current, change), comparable(expected, change)))
         throw new ChangeConflictError(
           `Conflicting ${change.domain} state on node ${change.target.id}`,
         );
@@ -174,18 +186,37 @@ function validateGraph(
 ): void {
   const context = owner.context;
   const removed = new Set([...states].filter(([, state]) => !state).map(([target]) => target.node));
+  let ids: Map<unknown, AnyNode | null> | undefined;
+  const siblingCounts = new Map<NodeHandle, number>();
+  for (const state of states.values()) {
+    const parent = state?.placement.parent;
+    if (!parent) continue;
+    let count = siblingCounts.get(parent);
+    if (count === undefined) {
+      count = 0;
+      if (!parent.node.isDestroyed && 'children' in parent.node)
+        for (const node of (parent.node as ParentNode).children)
+          if (!states.has(context.changes.handle(node))) count++;
+    }
+    siblingCounts.set(parent, count + 1);
+  }
   for (const [target, state] of states) {
     if (!state) continue;
-    if (context.registry.get(state.constructor.tag) !== state.constructor)
+    if (context.registry.registered(state.constructor) !== state.constructor)
       throw new ChangeConflictError(`Constructor is not registered: ${state.constructor.tag}`);
     const id = state.properties.id?.value;
-    if (
-      id !== undefined &&
-      context.registry.nodes.some(
-        (node) => node !== target.node && !removed.has(node) && node.getAttributeValue('id') === id,
-      )
-    )
-      throw new ChangeConflictError(`SVG ID is already in use: ${id}`);
+    if (id !== undefined) {
+      if (!ids) {
+        ids = new Map();
+        for (const node of context.registry.nodes) {
+          const value = node.getAttributeValue('id');
+          if (value !== undefined && !removed.has(node))
+            ids.set(value, ids.has(value) ? null : node);
+        }
+      }
+      if (ids.has(id) && ids.get(id) !== target.node)
+        throw new ChangeConflictError(`SVG ID is already in use: ${id}`);
+    }
     if (!target.node.isDestroyed) {
       for (const [attribute, property] of Object.entries(state.properties))
         target.node.validateAttribute(attribute, property.value);
@@ -209,22 +240,10 @@ function validateGraph(
           throw new ChangeConflictError('The reference value and its planned target ID disagree');
       }
     if (state.placement.parent) {
-      const parent = state.placement.parent;
-      const existing =
-        !parent.node.isDestroyed && 'children' in parent.node
-          ? (parent.node as ParentNode).children.map((node) => context.changes.handle(node))
-          : [];
-      const children = new Set(
-        existing.filter(
-          (child) => !states.has(child) || states.get(child)?.placement.parent === parent,
-        ),
-      );
-      for (const [child, planned] of states)
-        if (planned?.placement.parent === parent) children.add(child);
       if (
         !Number.isInteger(state.placement.index) ||
         state.placement.index < 0 ||
-        state.placement.index >= children.size
+        state.placement.index >= siblingCounts.get(state.placement.parent)!
       )
         throw new ChangeConflictError('The history sibling position is no longer available');
     }
@@ -258,10 +277,19 @@ function validateGraph(
       throw new ChangeConflictError('A removed node would retain live typed references');
 }
 
+/** Replay restores exact prior trees, including children that their class owns. */
 function applyPrepared(
   owner: AnyNode,
   states: Map<NodeHandle, ModelSnapshot | null>,
   domains: Map<NodeHandle, Set<string>>,
+): void {
+  withInternalStructure(() => applyStates(owner, states, domains));
+}
+
+function applyStates(
+  owner: AnyNode,
+  states: Map<NodeHandle, ModelSnapshot | null>,
+  domains: Map<NodeHandle, Set<string>>,
 ): void {
   const context = owner.context;
   const recreated = new Set<NodeHandle>();
@@ -321,28 +349,41 @@ function applyPrepared(
         domains.get(target)!.has('existence')),
   );
   for (const [target] of placements) if (target.node.parent) target.node.remove();
-  const pending = [...placements];
-  while (pending.length) {
-    const ready = pending.filter(
-      ([, state]) =>
-        !state!.placement.parent || !pending.some(([target]) => target === state!.placement.parent),
+  const positions = new Map(placements.map(([target], index) => [target, index]));
+  const dependants = new Map<NodeHandle, typeof placements>();
+  let ready: typeof placements = [];
+  for (const entry of placements) {
+    const parent = entry[1]!.placement.parent;
+    if (!parent || !positions.has(parent)) ready.push(entry);
+    else {
+      let children = dependants.get(parent);
+      if (!children) dependants.set(parent, (children = []));
+      children.push(entry);
+    }
+  }
+  // Preflight has already rejected parent cycles.
+  while (ready.length) {
+    ready.sort(
+      (a, b) =>
+        a[1]!.placement.index - b[1]!.placement.index ||
+        positions.get(a[0])! - positions.get(b[0])!,
     );
-    if (!ready.length) throw new ChangeConflictError('Cyclic placements');
-    ready.sort((a, b) => a[1]!.placement.index - b[1]!.placement.index);
-    for (const entry of ready) {
-      const [target, state] = entry;
+    const next: typeof placements = [];
+    for (const [target, state] of ready) {
       const parent = state!.placement.parent?.node as ParentNode | undefined;
       if (parent) {
         parent[validateChild](target.node);
         parent.add(target.node, Math.min(state!.placement.index, parent.children.length));
       }
-      pending.splice(pending.indexOf(entry), 1);
+      for (const child of dependants.get(target) ?? []) next.push(child);
     }
+    ready = next;
   }
   // Parent order is authoritative across compound edits and separate edit callbacks.
   for (const [target, state] of states)
     if (
       state?.children &&
+      !ownsDerived(state.constructor) &&
       (recreated.has(target) ||
         domains.get(target)!.has('children') ||
         domains.get(target)!.has('existence'))
@@ -371,5 +412,6 @@ function applyPrepared(
   );
   const roots = [...retired].filter((node) => !node.parent || !retired.has(node.parent));
   if (roots.length) owner[destroySubtrees](roots);
+  for (const target of recreated) initializeNode(target.node);
   context.bounds.invalidate();
 }

package/src/changes/service.ts

@@ -16,6 +16,10 @@ interface ChangeAdapter {
   diff(target: NodeHandle, before: ModelSnapshot, after: ModelSnapshot): ModelChange[];
   immutable<Value>(value: Value): Value;
 }
+interface ChildOrder {
+  readonly nodes: readonly AnyNode[];
+  readonly indices: ReadonlyMap<AnyNode, number>;
+}
 
 export class ChangeService {
   private readonly listeners = new Set<(event: ChangeEvent) => void>();
@@ -41,10 +45,8 @@ export class ChangeService {
   }[] = [];
   private adapter?: ChangeAdapter;
   private validationCounts?: ReadonlyMap<AnyNode, number>;
-  private childOrders = new Map<
-    AnyNode,
-    { nodes: readonly AnyNode[]; indices: ReadonlyMap<AnyNode, number> }
-  >();
+  private childOrders = new Map<AnyNode, ChildOrder>();
+  private liveOrders = new WeakMap<AnyNode, ChildOrder>();
 
   constructor(private readonly context: DrawingContext) {}
 
@@ -54,13 +56,21 @@ export class ChangeService {
   get replaying(): boolean {
     return this.replayDepth > 0;
   }
+  /** The surrounding synchronous edit, if one is already grouping model writes. */
+  get currentGroup(): number | undefined {
+    return this.metadata.group;
+  }
 
   children(node: AnyNode): readonly AnyNode[] | undefined {
     if (!('children' in node)) return undefined;
     let order = this.childOrders.get(node);
     if (!order) {
-      const nodes = [...(node as AnyNode & { children: readonly AnyNode[] }).children];
-      order = { nodes, indices: new Map(nodes.map((child, index) => [child, index])) };
+      order = this.liveOrders.get(node);
+      if (!order) {
+        const nodes = [...(node as AnyNode & { children: readonly AnyNode[] }).children];
+        order = { nodes, indices: new Map(nodes.map((child, index) => [child, index])) };
+        this.liveOrders.set(node, order);
+      }
       this.childOrders.set(node, order);
     }
     return order.nodes;
@@ -75,6 +85,10 @@ export class ChangeService {
   resetOrders(): void {
     this.childOrders = new Map();
   }
+  /** Keep the operation's original order, but invalidate the live order after a tree edit. */
+  invalidateOrder(node: AnyNode): void {
+    this.liveOrders.delete(node);
+  }
 
   reading<Result>(callback: () => Result): Result {
     const previous = this.capturing;
@@ -391,8 +405,7 @@ export class ChangeService {
     this.delivering = true;
     const failures: unknown[] = [];
     try {
-      while (this.queue.length) {
-        const next = this.queue.shift()!;
+      for (const next of this.queue) {
         for (const listener of [...this.listeners]) {
           if (!this.listeners.has(listener)) continue;
           try {
@@ -403,6 +416,7 @@ export class ChangeService {
         }
       }
     } finally {
+      this.queue.length = 0;
       this.delivering = false;
     }
     if (failures.length === 1 && failures[0] instanceof ChangeConflictError) throw failures[0];
@@ -418,5 +432,6 @@ export class ChangeService {
     this.groups.clear();
     this.owner = null;
     this.childOrders.clear();
+    this.liveOrders = new WeakMap();
   }
 }

package/src/changes/state.ts

@@ -93,25 +93,27 @@ export function diffState(
     if (!sameState(previous, value))
       changes.push({ target, domain: 'property', attribute, before: previous, after: value });
   }
-  if (transform && before.transform && after.transform)
-    changes.push({ target, domain: 'transform', before: before.transform, after: after.transform });
-  if (!sameState(before.content, after.content) && before.content && after.content)
-    changes.push({ target, domain: 'content', before: before.content, after: after.content });
-  if (!sameState(before.presentation, after.presentation))
-    changes.push({
-      target,
-      domain: 'presentation',
-      before: before.presentation,
-      after: after.presentation,
-    });
-  if (!sameState(before.custom, after.custom))
-    changes.push({ target, domain: 'custom', before: before.custom, after: after.custom });
-  if (!sameState(before.native, after.native) && before.native && after.native)
-    changes.push({ target, domain: 'native', before: before.native, after: after.native });
-  if (!sameState(before.placement, after.placement))
-    changes.push({ target, domain: 'placement', before: before.placement, after: after.placement });
-  if (!sameState(before.children, after.children) && before.children && after.children)
-    changes.push({ target, domain: 'children', before: before.children, after: after.children });
+  for (const domain of [
+    'transform',
+    'content',
+    'presentation',
+    'custom',
+    'native',
+    'placement',
+    'children',
+  ] as const) {
+    const previous = before[domain],
+      value = after[domain];
+    if (
+      domain !== 'presentation' &&
+      domain !== 'custom' &&
+      domain !== 'placement' &&
+      (!previous || !value)
+    )
+      continue;
+    if (domain === 'transform' ? transform : !sameState(previous, value))
+      changes.push({ target, domain, before: previous, after: value } as ModelChange);
+  }
   if (before.contributesToBounds !== after.contributesToBounds)
     changes.push({
       target,
@@ -138,7 +140,7 @@ export function combineChanges(changes: readonly ModelChange[]): readonly ModelC
   for (const [target, records] of lifecycle) {
     const first = records.findIndex((change) => change.domain === 'existence');
     if (first < 0) {
-      normalized.push(...records);
+      for (const record of records) normalized.push(record);
       continue;
     }
     let last = records.length - 1;
@@ -160,14 +162,22 @@ export function combineChanges(changes: readonly ModelChange[]): readonly ModelC
   }
   const orders = new Map<
     NodeHandle,
-    { before: readonly NodeHandle[]; after: readonly NodeHandle[] }
+    { before: ReadonlyMap<NodeHandle, number>; after: ReadonlyMap<NodeHandle, number> }
   >();
+  const indices = (children: readonly NodeHandle[]) => {
+    const positions = new Map<NodeHandle, number>();
+    // Reverse traversal retains indexOf's first match even for repeated handles.
+    for (let index = children.length - 1; index >= 0; index--)
+      positions.set(children[index], index);
+    return positions;
+  };
   for (const change of merged.values()) {
-    if (change.domain === 'children') orders.set(change.target, change);
+    if (change.domain === 'children')
+      orders.set(change.target, { before: indices(change.before), after: indices(change.after) });
     if (change.domain === 'existence' && (change.before?.children || change.after?.children))
       orders.set(change.target, {
-        before: change.before?.children ?? [],
-        after: change.after?.children ?? [],
+        before: indices(change.before?.children ?? []),
+        after: indices(change.after?.children ?? []),
       });
   }
   const placement = (
@@ -176,7 +186,7 @@ export function combineChanges(changes: readonly ModelChange[]): readonly ModelC
     edge: 'before' | 'after',
   ) => {
     const siblings = value.parent ? orders.get(value.parent)?.[edge] : undefined;
-    return siblings ? { ...value, index: siblings.indexOf(target) } : value;
+    return siblings ? { ...value, index: siblings.get(target) ?? -1 } : value;
   };
   return Object.freeze(
     [...merged.values()]
@@ -234,9 +244,8 @@ function patchSnapshot(
     if (transform.transform !== null) properties.transform = { value: transform.transform };
     return immutable({ ...snapshot, properties, transform });
   }
-  if (change.domain === 'bounds')
-    return immutable({ ...snapshot, contributesToBounds: change[edge] });
-  return immutable({ ...snapshot, [change.domain]: change[edge] });
+  const field = change.domain === 'bounds' ? 'contributesToBounds' : change.domain;
+  return immutable({ ...snapshot, [field]: change[edge] });
 }
 
 export const stateAdapter = Object.freeze({ capture: captureState, diff: diffState, immutable });

package/src/changes.ts

@@ -1,5 +1,11 @@
 import type { AnyNode } from './core/types.js';
-import type { ChangeEvent, ChangeGroup, ChangeMetadata, ModelChange } from './changes/types.js';
+import type {
+  ChangeEvent,
+  ChangeGroup,
+  ChangeMetadata,
+  ModelChange,
+  NodeHandle,
+} from './changes/types.js';
 import { ChangeConflictError, ChangeObserverError } from './changes/types.js';
 import { combineChanges, stateAdapter } from './changes/state.js';
 import { restoreChanges } from './changes/restore.js';
@@ -64,14 +70,25 @@ export function beginChangeGroup(drawing: AnyNode, metadata: ChangeMetadata = {}
   drawing.assertLive();
   const owner = drawing.context.root!;
   let id: number | undefined;
-  let changes: readonly ModelChange[] = [];
+  let changes: ModelChange[] = [];
+  const targets = new Set<NodeHandle>();
   let invalidated = false;
   // Subscribe before groupstart so edits made by start observers are captured too.
   const unsubscribe = observeChanges(drawing, (event) => {
     if (event.type === 'dispose') invalidated = true;
     if (id === undefined && event.type === 'groupstart') id = event.group;
-    if (event.type === 'change' && event.group === id && !event.temporary)
-      changes = combineChanges([...changes, ...event.changes]);
+    if (event.type !== 'change') return;
+    if (event.group === id && !event.temporary) {
+      for (const change of event.changes) {
+        changes.push(change);
+        targets.add(change.target);
+      }
+    } else if (event.changes.some((change) => targets.has(change.target))) {
+      // A net-zero field must release its old baseline before an outside edit.
+      changes = [...combineChanges(changes)];
+      targets.clear();
+      for (const change of changes) targets.add(change.target);
+    }
   });
   let group: ReturnType<typeof drawing.context.changes.group>;
   try {
@@ -91,6 +108,7 @@ export function beginChangeGroup(drawing: AnyNode, metadata: ChangeMetadata = {}
   const finish = (cancelled: boolean, restored = false) => {
     active = false;
     changes = [];
+    targets.clear();
     unsubscribe();
     group.end(cancelled, restored);
   };
@@ -117,7 +135,8 @@ export function beginChangeGroup(drawing: AnyNode, metadata: ChangeMetadata = {}
       const failures: unknown[] = [];
       try {
         try {
-          if (changes.length) restoreChanges(owner, changes, 'undo');
+          const combined = combineChanges(changes);
+          if (combined.length) restoreChanges(owner, combined, 'undo');
         } catch (error) {
           if (error instanceof ChangeObserverError) failures.push(error);
           else throw error;

package/src/components/changes.ts

@@ -0,0 +1,131 @@
+import type { AnyNode } from '../core/types.js';
+import type { DrawingContext } from '../services/context.js';
+import { deriveChanges, observeChanges, withChanges, type ChangeBatch } from '../changes.js';
+
+export interface Binding {
+  readonly node: AnyNode;
+  derive(): void;
+  replay(): void;
+  paint(): void;
+}
+interface Discovery {
+  added(node: AnyNode): void;
+  identityChanged(node: AnyNode): void;
+}
+const drawings = new WeakMap<DrawingContext, ComponentChanges>();
+
+/** Routes work by changed node, independent of the number of components in a drawing. */
+export class ComponentChanges {
+  private readonly bindings = new WeakMap<AnyNode, Binding>();
+  private readonly discovery = new Set<Discovery>();
+  private bindingCount = 0;
+  private readonly dirty = new Set<Binding>();
+  private cancelFrame?: () => void;
+  private readonly stopDerive: () => void;
+  private readonly stopObserve: () => void;
+  private readonly context: DrawingContext;
+
+  static for(node: AnyNode): ComponentChanges {
+    let changes = drawings.get(node.context);
+    if (!changes) {
+      changes = new ComponentChanges(node);
+      drawings.set(node.context, changes);
+    }
+    return changes;
+  }
+
+  private constructor(drawing: AnyNode) {
+    this.context = drawing.context;
+    this.stopDerive = deriveChanges(drawing, ({ nodes }) => {
+      for (const node of nodes) this.bindings.get(node)?.derive();
+    });
+    this.stopObserve = observeChanges(drawing, (event) => {
+      if (event.type === 'change') this.dispatch(event);
+    });
+  }
+
+  bind(binding: Binding): () => void {
+    if (this.bindings.has(binding.node)) throw new Error('Component is already observing changes');
+    this.bindings.set(binding.node, binding);
+    this.bindingCount++;
+    return this.release(() => {
+      this.bindings.delete(binding.node);
+      this.dirty.delete(binding);
+      this.bindingCount--;
+    });
+  }
+
+  discover(discovery: Discovery): () => void {
+    this.discovery.add(discovery);
+    return this.release(() => this.discovery.delete(discovery));
+  }
+
+  private release(cleanup: () => void): () => void {
+    let active = true;
+    return () => {
+      if (!active) return;
+      active = false;
+      cleanup();
+      if (!this.bindingCount && !this.discovery.size) {
+        this.cancelFrame?.();
+        this.stopDerive();
+        this.stopObserve();
+        drawings.delete(this.context);
+      }
+    };
+  }
+
+  /** Live state from every instance renders in one shared frame, as one temporary change. */
+  schedule(binding: Binding): void {
+    this.dirty.add(binding);
+    this.cancelFrame ??= this.context.dom.requestFrame(() => {
+      this.cancelFrame = undefined;
+      this.paint(this.dirty);
+    });
+  }
+
+  /** Renders without an undo step; failures surface after every other instance rendered. */
+  paint(bindings: Iterable<Binding>): void {
+    const list = [...bindings].filter((binding) => !binding.node.isDestroyed);
+    for (const binding of list) this.dirty.delete(binding);
+    if (!list.length) return;
+    const failures: unknown[] = [];
+    withChanges(list[0].node, { source: 'components', temporary: true }, () => {
+      for (const binding of list)
+        try {
+          binding.paint();
+        } catch (error) {
+          failures.push(error);
+        }
+    });
+    if (failures.length > 1) throw new AggregateError(failures, 'Component renders failed');
+    if (failures.length) throw failures[0];
+  }
+
+  private dispatch(event: ChangeBatch): void {
+    // Replay skips rendered children, so restored and recreated instances redraw together.
+    const replayed = new Set<Binding>();
+    for (const change of event.changes) {
+      const node = change.target.node,
+        binding = this.bindings.get(node);
+      if (
+        binding &&
+        event.source === 'replay' &&
+        ((change.domain === 'property' && change.attribute === 'data-rasam-props') ||
+          (change.domain === 'existence' && change.after))
+      )
+        replayed.add(binding);
+      if (!this.discovery.size) continue;
+      if (
+        (change.domain === 'placement' && change.after.parent && !change.before.parent) ||
+        (change.domain === 'existence' && change.after)
+      )
+        for (const subscriber of this.discovery) subscriber.added(node);
+      else if (change.domain === 'property' && change.attribute === 'data-rasam-component')
+        for (const subscriber of this.discovery) subscriber.identityChanged(node);
+    }
+    if (!replayed.size) return;
+    for (const binding of replayed) binding.replay();
+    this.paint(replayed);
+  }
+}