@editframe/elements 0.15.0-beta.1 → 0.15.0-beta.10

package/src/elements/TargetController.test.ts

@@ -0,0 +1,229 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { afterEach, describe, expect, test } from "vitest";
+import { EFTargetable, TargetController } from "./TargetController.ts";
+
+let id = 0;
+
+const nextId = () => {
+  return `targetable-test-${id++}`;
+};
+
+@customElement("targetable-test")
+class TargetableTest extends EFTargetable(LitElement) {
+  @property()
+  value = "initial";
+
+  render() {
+    return html`<div>${this.value}</div>`;
+  }
+}
+
+@customElement("targeter-test")
+class TargeterTest extends LitElement {
+  // @ts-expect-error this controller is needed, but never referenced
+  private targetController: TargetController = new TargetController(this);
+
+  @state()
+  targetElement: Element | null = null;
+
+  @property()
+  target = "";
+
+  render() {
+    const target = this.targetElement;
+    return html`
+      <div>
+        ${target ? html`Found: ${target.tagName}` : html`Finding target...`}
+      </div>
+    `;
+  }
+}
+
+describe("target", () => {
+  afterEach(() => {
+    // Clean up all test elements from the document body
+    document.body.innerHTML = "";
+  });
+
+  test("should be able to get the target element", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+  });
+
+  test("should update when document changes", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(element);
+
+    const id = nextId();
+    element.target = id;
+
+    expect(element.targetElement).toBe(null);
+
+    target.id = id;
+    document.body.appendChild(target);
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+  });
+
+  test("should update when attribute changes", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(element);
+    document.body.appendChild(target);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    target.id = nextId();
+    await element.updateComplete;
+    expect(element.targetElement).toBe(null);
+  });
+
+  test("should update when target is set before id exists", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    element.target = id;
+    expect(element.targetElement).toBe(null);
+
+    target.id = id;
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+  });
+
+  test("should update when target changes to match existing id", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    expect(element.targetElement).toBe(null);
+
+    element.target = id;
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+  });
+
+  test("should handle target being cleared", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    element.target = "";
+    await element.updateComplete;
+    expect(element.targetElement).toBe(null);
+  });
+
+  test("should handle multiple elements targeting the same id", async () => {
+    const target = document.createElement("targetable-test");
+    const element1 = document.createElement("targeter-test");
+    const element2 = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element1);
+    document.body.appendChild(element2);
+
+    const id = nextId();
+    target.id = id;
+    element1.target = id;
+    element2.target = id;
+
+    await Promise.all([element1.updateComplete, element2.updateComplete]);
+    expect(element1.targetElement).toBe(target);
+    expect(element2.targetElement).toBe(target);
+  });
+
+  test("should handle element removal from DOM", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    document.body.removeChild(target);
+    await element.updateComplete;
+    expect(element.targetElement).toBe(null);
+  });
+
+  test("should handle rapid target id changes", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id1 = nextId();
+    const id2 = nextId();
+    const id3 = nextId();
+
+    target.id = id1;
+    element.target = id1;
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    target.id = id2;
+    target.id = id3; // Immediately change again
+    await element.updateComplete;
+    expect(element.targetElement).toBe(null);
+  });
+
+  test("should not trigger unnecessary updates when setting same id multiple times", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    // Set the same ID again
+    target.id = id;
+    await element.updateComplete;
+
+    // The target element should remain stable
+    expect(element.targetElement).toBe(target);
+  });
+});
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "targetable-test": TargetableTest & Element;
+    "targeter-test": TargeterTest & Element;
+  }
+}

package/src/elements/TargetController.ts

@@ -0,0 +1,219 @@
+import { LitElement, type ReactiveController } from "lit";
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+// Symbol to identify elements that can be targeted
+const EF_TARGETABLE = Symbol("EF_TARGETABLE");
+
+class TargetRegistry {
+  private idMap = new Map<string, LitElement>();
+  private callbacks = new Map<
+    string,
+    Set<(target: LitElement | undefined) => void>
+  >();
+
+  subscribe(id: string, callback: (target: LitElement | undefined) => void) {
+    this.callbacks.set(id, this.callbacks.get(id) ?? new Set());
+    this.callbacks.get(id)?.add(callback);
+  }
+
+  unsubscribe(
+    id: string | null,
+    callback: (target: LitElement | undefined) => void,
+  ) {
+    if (id === null) {
+      return;
+    }
+    this.callbacks.get(id)?.delete(callback);
+    if (this.callbacks.get(id)?.size === 0) {
+      this.callbacks.delete(id);
+    }
+  }
+
+  get(id: string) {
+    return this.idMap.get(id);
+  }
+
+  register(id: string, target: LitElement) {
+    this.idMap.set(id, target);
+    for (const callback of this.callbacks.get(id) ?? []) {
+      callback(target);
+    }
+  }
+
+  unregister(id: string) {
+    for (const callback of this.callbacks.get(id) ?? []) {
+      callback(undefined);
+    }
+    this.idMap.delete(id);
+    this.callbacks.delete(id);
+  }
+}
+
+// Map of root nodes to their target registries
+const documentRegistries = new WeakMap<Node, TargetRegistry>();
+
+const getRegistry = (root: Node) => {
+  let registry = documentRegistries.get(root);
+  if (!registry) {
+    registry = new TargetRegistry();
+    documentRegistries.set(root, registry);
+  }
+  return registry;
+};
+
+export declare class TargetableMixinInterface {
+  id: string;
+}
+
+export const isEFTargetable = (obj: any): obj is TargetableMixinInterface =>
+  obj[EF_TARGETABLE];
+
+export const EFTargetable = <T extends Constructor<LitElement>>(
+  superClass: T,
+) => {
+  class TargetableElement extends superClass {
+    #registry: TargetRegistry | null = null;
+
+    static get observedAttributes(): string[] {
+      // Get parent's observed attributes
+      const parentAttributes = (superClass as any).observedAttributes || [];
+      // Add 'id' if not already present
+      return [...new Set([...parentAttributes, "id"])];
+    }
+
+    private updateRegistry(oldValue: string, newValue: string) {
+      if (!this.#registry) return;
+      if (oldValue === newValue) return;
+
+      if (oldValue) {
+        this.#registry.unregister(oldValue);
+      }
+      if (newValue) {
+        this.#registry.register(newValue, this);
+      }
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.#registry = getRegistry(this.getRootNode());
+      const initialId = this.getAttribute("id");
+      if (initialId) {
+        this.updateRegistry("", initialId);
+      }
+    }
+
+    attributeChangedCallback(
+      name: string,
+      old: string | null,
+      value: string | null,
+    ) {
+      super.attributeChangedCallback(name, old, value);
+      if (name === "id") {
+        this.updateRegistry(old ?? "", value ?? "");
+      }
+    }
+
+    disconnectedCallback() {
+      if (this.#registry) {
+        this.updateRegistry(this.id, "");
+        this.#registry = null;
+      }
+      super.disconnectedCallback();
+    }
+  }
+
+  Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, {
+    value: true,
+  });
+
+  return TargetableElement as T;
+};
+
+class TargetUpdateController implements ReactiveController {
+  constructor(private host: LitElement) {}
+
+  hostConnected() {
+    this.host.requestUpdate();
+  }
+
+  hostDisconnected() {
+    this.host.requestUpdate();
+  }
+
+  hostUpdate() {
+    this.host.requestUpdate();
+  }
+}
+
+export class TargetController implements ReactiveController {
+  private host: LitElement & { targetElement: Element | null; target: string };
+  private targetController: ReactiveController | null = null;
+  private currentTargetString: string | null = null;
+
+  constructor(
+    host: LitElement & { targetElement: Element | null; target: string },
+  ) {
+    this.host = host;
+    this.host.addController(this);
+    this.currentTargetString = this.host.target;
+    if (this.currentTargetString) {
+      this.registry.subscribe(this.currentTargetString, this.registryCallback);
+    }
+  }
+
+  private registryCallback = (target: LitElement | undefined) => {
+    this.host.targetElement = target ?? null;
+  };
+
+  private updateTarget() {
+    const newTarget = this.registry.get(this.host.target);
+    if (this.host.targetElement !== newTarget) {
+      this.disconnectFromTarget();
+      this.host.targetElement = newTarget ?? (null as Element | null);
+      this.connectToTarget();
+    }
+  }
+
+  private connectToTarget() {
+    if (this.host.targetElement instanceof LitElement) {
+      this.targetController = new TargetUpdateController(this.host);
+      this.host.targetElement.addController(this.targetController);
+    }
+  }
+
+  private disconnectFromTarget() {
+    if (
+      this.host.targetElement instanceof LitElement &&
+      this.targetController
+    ) {
+      this.host.targetElement.removeController(this.targetController);
+      this.targetController = null;
+    }
+  }
+
+  private get registry() {
+    const root = this.host.getRootNode();
+    return getRegistry(root);
+  }
+
+  hostDisconnected() {
+    this.disconnectFromTarget();
+  }
+
+  hostConnected() {
+    this.updateTarget();
+  }
+
+  hostUpdate() {
+    if (this.currentTargetString !== this.host.target) {
+      this.registry.unsubscribe(
+        this.currentTargetString,
+        this.registryCallback,
+      );
+      this.registry.subscribe(this.host.target, this.registryCallback);
+      this.updateTarget();
+      this.currentTargetString = this.host.target;
+    }
+  }
+}

package/src/gui/EFPreview.ts

@@ -8,6 +8,16 @@ import { focusedElementContext } from "./focusedElementContext.js";
 
 @customElement("ef-preview")
 export class EFPreview extends ContextMixin(TWMixin(LitElement)) {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: block;
+        cursor: crosshair;
+      }
+    `,
+  ];
+
   @provide({ context: focusedElementContext })
   focusedElement?: HTMLElement;
 
@@ -37,15 +47,6 @@ export class EFPreview extends ContextMixin(TWMixin(LitElement)) {
     });
   }
 
-  static styles = [
-    css`
-      :host {
-        display: block;
-        cursor: crosshair;
-      }
-    `,
-  ];
-
   render() {
     return html`<slot></slot>`;
   }