animl 0.0.0-stage → 0.1.0

package/modules/text-input/web/extra.js

@@ -0,0 +1,52 @@
+import "./index.js";
+import { enhanceField } from "../core/extra.js";
+import { config } from "../core/index.js";
+const Icon = customElements.get("anima-icon");
+const module = Icon.modules.get("textinput");
+module.setEnhancer(enhanceField);
+const timers = /* @__PURE__ */ new WeakMap();
+const previous = Icon.eventHook;
+Icon.eventHook = (icon, kind, info) => {
+  previous?.(icon, kind, info);
+  if (kind === "cleanup" || kind === "pause") {
+    const p2 = icon.player, f2 = p2?.focused ? module.field(p2, p2.focused) : void 0;
+    if (f2?.caretHidden) {
+      f2.caretHidden = false;
+      p2.drawVersions.fill(++p2.drawRevision);
+      icon.invalidate();
+    }
+    timers.get(icon)?.stop();
+    timers.delete(icon);
+    return;
+  }
+  if (kind !== "draw") return;
+  const p = icon.player, id = p.focused, i = id ? p.model.ids.get(id) : void 0;
+  const c = i === void 0 ? void 0 : config(p, i);
+  const f = c && id ? module.field(p, id) : void 0;
+  const blink = f && f.start === f.end && c?.caretBlink !== false && !p.reducedMotion && !icon.hasAttribute("paused") && icon.isConnected;
+  const key = blink ? `${id}:${f.revision ?? 0}:${f.value}` : "";
+  if (timers.get(icon)?.key === key) return;
+  timers.get(icon)?.stop();
+  timers.delete(icon);
+  if (f?.caretHidden) {
+    f.caretHidden = false;
+    p.drawVersions[i] = ++p.drawRevision;
+    icon.invalidate();
+  }
+  if (!blink || !f || i === void 0) return;
+  let timer;
+  const tick = () => {
+    if (icon.player !== p || p.focused !== id || icon.hasAttribute("paused") || !icon.isConnected) {
+      timers.delete(icon);
+      f.caretHidden = false;
+      return;
+    }
+    f.caretHidden = p.reducedMotion ? false : !f.caretHidden;
+    p.drawVersions[i] = ++p.drawRevision;
+    icon.invalidate();
+    if (!p.reducedMotion) timer = setTimeout(tick, 530);
+    else timers.delete(icon);
+  };
+  timers.set(icon, { key, stop: () => clearTimeout(timer) });
+  timer = setTimeout(tick, 530);
+};

package/modules/text-input/web/index.d.ts

@@ -0,0 +1,6 @@
+import '../../../packages/web/src/index.js';
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon {
+        textInput(id: string): HTMLInputElement | HTMLTextAreaElement | undefined;
+    }
+}

package/modules/text-input/web/index.js

@@ -0,0 +1,192 @@
+import { textinput, config } from "../core/index.js";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(textinput);
+const { field, edit, select } = Icon.modules.get("textinput");
+if (!Icon.prototype.textInput) {
+  let attach = function(icon) {
+    attached.get(icon)?.();
+    const p = icon.player;
+    if (!p?.model.doc.requires?.includes("textinput")) return;
+    const style = document.createElement("style");
+    style.textContent = '::selection{background:transparent;color:transparent}::placeholder{color:transparent}div[role="text-field"]{display:none}';
+    icon.shadowRoot.append(style);
+    const map = /* @__PURE__ */ new Map();
+    fields.set(icon, map);
+    const abort = new AbortController();
+    const wake = () => {
+      icon.invalidate();
+      if (!icon.hasAttribute("paused")) icon.play();
+    };
+    const layout = () => {
+      if (!style.isConnected) icon.shadowRoot.append(style);
+      for (const el of map.values()) if (!el.isConnected) icon.shadowRoot.append(el);
+      const r = icon.getBoundingClientRect(), svg = icon.shadowRoot.querySelector("svg");
+      const canvas = Icon.canvasBox?.(icon, [0, 0, 1, 1]);
+      const screen = canvas ? new DOMMatrix([canvas.width, 0, 0, canvas.height, canvas.x, canvas.y]) : svg?.getScreenCTM();
+      if (!screen) return;
+      for (const [id, el] of map) {
+        const i = p.model.ids.get(id);
+        const m = new DOMMatrix([
+          screen.a,
+          screen.b,
+          screen.c,
+          screen.d,
+          screen.e - r.x,
+          screen.f - r.y
+        ]).multiply(new DOMMatrix(p.world(i)));
+        el.style.transform = m.toString();
+        el.style.width = p.prop(i, "width") + "px";
+        el.style.height = p.prop(i, "height") + "px";
+        const c = config(p, i);
+        if (el instanceof HTMLInputElement) {
+          const type = c.obscured ? "password" : "text";
+          if (el.type !== type) {
+            const start = el.selectionStart, end = el.selectionEnd, direction = el.selectionDirection;
+            el.type = type;
+            el.setSelectionRange(start, end, direction ?? void 0);
+          }
+        }
+        const eligible = p.focusItems().some((n) => n.id === id);
+        el.hidden = !eligible;
+        el.readOnly = c.editable === false;
+        const f = field(p, id), range = f.start + "," + f.end;
+        if (!f.composing && (el.value !== f.value || range !== ranges.get(el) && (el.selectionStart !== f.start || el.selectionEnd !== f.end))) {
+          if (el.value !== f.value) el.value = f.value;
+          el.setSelectionRange(f.start, f.end);
+        }
+        ranges.set(el, range);
+      }
+    };
+    for (const [i, n] of p.model.nodes.entries()) {
+      const c = config(p, i);
+      if (!c) continue;
+      const el = document.createElement(c.multiline ? "textarea" : "input");
+      if (el instanceof HTMLInputElement) el.type = c.obscured ? "password" : "text";
+      el.dataset.semantic = n.id;
+      el.dataset.focus = n.id;
+      el.setAttribute("aria-label", c.label ?? c.placeholder ?? n.id);
+      el.setAttribute("aria-multiline", String(!!c.multiline));
+      el.placeholder = c.placeholder ?? "";
+      el.autocomplete = "off";
+      if (c.maxLength !== void 0) el.maxLength = c.maxLength;
+      el.value = field(p, n.id).value;
+      const input = Icon.modules.get("text").input(p, i);
+      const s = input.styles[input.runs[0]?.style ?? ""] ?? {};
+      el.style.cssText = `position:absolute;left:0;top:0;transform-origin:0 0;margin:0;padding:0;border:0;resize:none;background:transparent;color:transparent;caret-color:transparent;outline:0;box-sizing:border-box;`;
+      el.style.font = `${s.style ?? "normal"} ${s.weight ?? 400} ${s.size ?? 1}px/${n.raw.lineHeight || 1.2} ${s.font ?? "sans-serif"}`;
+      for (const name of ["copy", "cut"])
+        el.addEventListener(
+          name,
+          (e) => {
+            if (config(p, i)?.obscured) e.preventDefault();
+          },
+          { signal: abort.signal }
+        );
+      const listen = (name, fn) => el.addEventListener(name, fn, { signal: abort.signal });
+      listen("focus", () => {
+        p.focusTarget(n.id);
+        if (c.selectOnFocus) el.select();
+        sync();
+      });
+      listen("blur", () => {
+        if (p.focused === n.id) p.focusClear();
+        wake();
+      });
+      const sync = () => {
+        select(p, n.id, el.selectionStart ?? 0, el.selectionEnd ?? 0);
+        wake();
+      };
+      const commit = (composing = false) => {
+        const f = edit(p, n.id, el.value, el.selectionStart ?? 0, el.selectionEnd ?? 0, composing);
+        if (el.value !== f.value) {
+          el.value = f.value;
+          el.setSelectionRange(f.start, f.end);
+        }
+        wake();
+      };
+      listen("input", ((e) => commit(e.isComposing || field(p, n.id).composing)));
+      listen("compositionstart", () => {
+        field(p, n.id).composing = true;
+      });
+      listen("compositionend", () => commit());
+      for (const event2 of ["select", "keyup", "pointerup"]) listen(event2, sync);
+      map.set(n.id, el);
+      icon.shadowRoot.append(el);
+    }
+    if (map.size) {
+      icon.removeAttribute("aria-hidden");
+      icon.setAttribute("role", "group");
+    }
+    const observer = new MutationObserver(layout);
+    observer.observe(icon.shadowRoot, { childList: true });
+    const resize = new ResizeObserver(layout);
+    resize.observe(icon);
+    updates.set(icon, layout);
+    layout();
+    icon.dispatchEvent(new Event("anima:overlay"));
+    attached.set(icon, () => {
+      abort.abort();
+      resize.disconnect();
+      observer.disconnect();
+      updates.delete(icon);
+      for (const el of map.values()) el.remove();
+      style.remove();
+      fields.delete(icon);
+      attached.delete(icon);
+    });
+  };
+  let previousOrder = Icon.orderSVG;
+  const order = (frame, elements) => {
+    previousOrder?.(frame, elements);
+    for (const [el, dom] of elements)
+      if (el.role === "module:text")
+        dom.setAttribute(
+          "opacity",
+          String(frame.nodes[el.node].text?.opacity ?? 1)
+        );
+  };
+  Object.defineProperty(Icon, "orderSVG", {
+    configurable: true,
+    get: () => order,
+    set: (next) => {
+      if (next !== order) previousOrder = next;
+    }
+  });
+  const attached = /* @__PURE__ */ new WeakMap();
+  const updates = /* @__PURE__ */ new WeakMap();
+  const ranges = /* @__PURE__ */ new WeakMap();
+  const event = Icon.eventHook;
+  Icon.eventHook = (icon, kind, info) => {
+    event?.(icon, kind, info);
+    if (kind === "draw") updates.get(icon)?.();
+  };
+  const fields = /* @__PURE__ */ new WeakMap();
+  let semantic = Icon.semanticElement;
+  const element = (icon, id) => fields.get(icon)?.get(id) ?? semantic?.(icon, id);
+  Object.defineProperty(Icon, "semanticElement", {
+    configurable: true,
+    get: () => element,
+    set: (next) => {
+      if (next !== element) semantic = next;
+    }
+  });
+  const hooked = /* @__PURE__ */ new WeakSet();
+  const load = Icon.prototype.loadModel, destroy = Icon.prototype.destroy;
+  Icon.prototype.loadModel = function(model) {
+    attached.get(this)?.();
+    if (!hooked.has(this)) {
+      hooked.add(this);
+      this.addEventListener("anima:load", () => attach(this));
+    }
+    load.call(this, model);
+  };
+  Icon.prototype.destroy = function() {
+    attached.get(this)?.();
+    destroy.call(this);
+  };
+  Icon.prototype.textInput = function(id) {
+    return fields.get(this)?.get(id);
+  };
+  for (const icon of document.querySelectorAll("anima-icon")) attach(icon);
+}

package/modules/text-input/web/markup.d.ts

@@ -0,0 +1 @@
+import '../../../packages/web/src/markup.js';

package/modules/text-input/web/markup.js

@@ -0,0 +1 @@
+import "../../../packages/web/src/markup.js";

package/modules/text-input/web/svg.d.ts

@@ -0,0 +1 @@
+import './index.js';

package/modules/text-input/web/svg.js

@@ -0,0 +1,27 @@
+import "./index.js";
+import { textinputSVG, boxes, boxAttrs } from "../core/svg.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerSVGBackend("text-input", textinputSVG);
+let previous = Icon.orderSVG;
+const order = (f, elements) => {
+  previous?.(f, elements);
+  for (const [e, dom] of elements)
+    if (e.role === "module:field")
+      dom.replaceChildren(
+        ...boxes(f, e.node).map((e2) => {
+          const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+          for (const [k, v] of Object.entries(boxAttrs(f, e2))) r.setAttribute(k, v);
+          return r;
+        })
+      );
+};
+Object.defineProperty(Icon, "orderSVG", {
+  configurable: true,
+  get: () => order,
+  set: (next) => {
+    if (next !== order) previous = next;
+  }
+});
+for (const icon of document.querySelectorAll("anima-icon"))
+  if (icon.player?.model.doc.requires?.includes("textinput"))
+    icon.attributeChangedCallback("renderer", null, icon.getAttribute("renderer"));