cotomy 0.3.15 → 0.3.17

package/README.md

@@ -38,6 +38,7 @@ The View layer provides thin wrappers around DOM elements and window events.
 - Scoped CSS
   - `scopeId: string` - Returns the value stored in the element's `data-cotomy-scopeid` attribute
   - `[scope]` placeholder in provided CSS is replaced by `[data-cotomy-scopeid="..."]`
+  - Scoped CSS text is kept on the instance; if the `<style id="css-${scopeId}">` is missing when the element is attached, it will be re-generated automatically
   - `stylable: boolean` - False for tags like `script`, `style`, `link`, `meta`
 - Static helpers
   - `CotomyElement.encodeHtml(text)`
@@ -77,7 +78,7 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `insertBefore(sibling): this` / `insertAfter(sibling): this`
   - `appendTo(target): this` / `prependTo(target): this`
   - `comesBefore(target): boolean` / `comesAfter(target): boolean` — Checks DOM order (returns `false` for the same element or disconnected nodes)
-  - `clone(type?): CotomyElement` - Returns a deep-cloned element, optionally typed, and reassigns new `data-cotomy-instance`/`data-cotomy-scopeid` values (and strips `data-cotomy-moving`). Cloning an invalidated element (`data-cotomy-invalidated`) throws.
+  - `clone(type?): CotomyElement` - Returns a deep-cloned element, optionally typed, and reassigns a new `data-cotomy-instance` while preserving the `data-cotomy-scopeid` for scoped CSS sharing (strips `data-cotomy-moving`). Cloning an invalidated element (`data-cotomy-invalidated`) throws.
   - `clear(): this` — Removes all descendants and text
   - `remove(): void` — Explicitly non-chainable after removal
 - Geometry & visibility
@@ -94,6 +95,8 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `screenPosition(): { top, left }`
   - `rect(): { top, left, width, height }`
   - `innerRect()` — Subtracts padding
+  - `overlaps(target: CotomyElement): boolean` — True if the two elements' `rect` values overlap (AABB)
+  - `overlapElements: CotomyElement[]` — Returns other CotomyElements (by `data-cotomy-instance`) that overlap this element
 - Events
   - Generic: `on(eventOrEvents, handler, options?)`, `off(eventOrEvents, handler?, options?)`, `once(eventOrEvents, handler, options?)`, `trigger(event[, Event])` — `eventOrEvents` accepts either a single event name or an array for batch registration/removal. `trigger` emits bubbling events by default and can be customized by passing an `Event`.
   - Delegation: `onSubTree(eventOrEvents, selector, handler, options?)` — `eventOrEvents` can also be an array for listening to multiple delegated events at once.
@@ -105,6 +108,7 @@ The View layer provides thin wrappers around DOM elements and window events.
   - Layout (custom): `resize`, `scroll`, `changelayout` — requires `listenLayoutEvents()` on the element
   - Move lifecycle: `cotomy:transitstart`, `cotomy:transitend` — emitted automatically by `append`, `prepend`, `insertBefore/After`, `appendTo`, and `prependTo`. While moving, the element (and its descendants) receive a temporary `data-cotomy-moving` attribute so removal observers know the node is still in transit.
   - Removal: `removed` — fired when an element actually leaves the DOM (MutationObserver-backed). Because `cotomy:transitstart`/`transitend` manage the `data-cotomy-moving` flag, `removed` only runs for true detachments, making it safe for cleanup.
+  - Registry isolation: イベントレジストリは `data-cotomy-instance`（インスタンスID）単位で管理され、クローンは新しいインスタンスIDを持つため、同じ `scopeId` を共有していてもリスナーが混線しません。
   - File: `filedrop(handler: (files: File[]) => void)`
 
 Example (scoped CSS and events):
@@ -126,18 +130,20 @@ document.body.appendChild(panel.element);
 
 ## Testing
 
-The scoped CSS replacement and scope-id isolation logic are covered by `tests/view.spec.ts`. Run the focused specs below to verify the behavior:
+Scoped CSS sharing/re-hydrationとインスタンス単位のイベント管理は `tests/view.spec.ts` に含まれています。主に確認したい場合は以下のコマンドで個別に実行できます:
 
 ```bash
-npx vitest run tests/view.spec.ts -t "constructs from multiple sources and applies scoped css"
-npx vitest run tests/view.spec.ts -t "assigns fresh scope ids when cloning, including descendants"
-npx vitest run tests/view.spec.ts -t "regenerates instance ids and lifecycle hooks when cloning"
-npx vitest run tests/view.spec.ts -t "strips moving flags when cloning"
-npx vitest run tests/view.spec.ts -t "throws when cloning an invalidated element"
-npx vitest run tests/view.spec.ts -t "compares document order with comesBefore/comesAfter"
+npm test -- --run tests/view.spec.ts -t "constructs from multiple sources and applies scoped css"
+npm test -- --run tests/view.spec.ts -t "preserves scope ids when cloning, including descendants"
+npm test -- --run tests/view.spec.ts -t "regenerates instance ids and lifecycle hooks when cloning"
+npm test -- --run tests/view.spec.ts -t "keeps event handlers isolated by instance even when sharing scope"
+npm test -- --run tests/view.spec.ts -t "rehydrates scoped css when a clone shares scope after the original was removed"
+npm test -- --run tests/view.spec.ts -t "strips moving flags when cloning"
+npm test -- --run tests/view.spec.ts -t "throws when cloning an invalidated element"
+npm test -- --run tests/view.spec.ts -t "compares document order with comesBefore/comesAfter"
 ```
 
-The first command ensures `[scope]` expands to `[data-cotomy-scopeid="..."]` in injected styles, the second confirms that cloning reassigns new `data-cotomy-scopeid` attributes to the cloned tree, the third verifies fresh `data-cotomy-instance` values and lifecycle hooks, and the last two cover stripping transit flags and rejecting invalidated nodes during cloning.
+普段は `npm test` で全体を実行できます。上記のコマンドでは `[scope]` 展開、スコープID共有のクローン挙動、インスタンス単位のイベント隔離、クローン後のスコープCSS再生成、移動フラグの除去、無効化要素のクローン拒否、DOM順序判定などをピンポイントで確認できます。
 
 ### CotomyMetaElement
 

package/dist/browser/cotomy.js

@@ -811,11 +811,11 @@ class EventRegistry {
         return this._instance ?? (this._instance = new EventRegistry());
     }
     map(target) {
-        const scopeId = target.scopeId;
-        let registry = this._registry.get(scopeId);
+        const instanceId = target.instanceId;
+        let registry = this._registry.get(instanceId);
         if (!registry) {
             registry = new HandlerRegistory(target);
-            this._registry.set(scopeId, registry);
+            this._registry.set(instanceId, registry);
         }
         return registry;
     }
@@ -824,7 +824,7 @@ class EventRegistry {
         registry.add(event, entry);
     }
     off(event, target, entry) {
-        const registry = this._registry.get(target.scopeId);
+        const registry = this._registry.get(target.instanceId);
         if (!registry)
             return;
         if (entry) {
@@ -834,11 +834,11 @@ class EventRegistry {
             registry.remove(event);
         }
         if (registry.empty) {
-            this._registry.delete(target.scopeId);
+            this._registry.delete(target.instanceId);
         }
     }
     clear(target) {
-        this._registry.delete(target.scopeId);
+        this._registry.delete(target.instanceId);
     }
 }
 class CotomyScrollOptions {
@@ -1004,6 +1004,7 @@ class CotomyElement {
     }
     useScopedCss(css) {
         if (css && this.stylable) {
+            this._scopedCss = css;
             const cssid = this.scopedCssElementId;
             CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
             const element = document.createElement("style");
@@ -1015,11 +1016,22 @@ class CotomyElement {
                 || new CotomyElement({ html: `<head></head>` }).prependTo(new CotomyElement(document.documentElement));
             head.append(new CotomyElement(element));
             this.removed(() => {
-                CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
+                const hasSameScope = document.querySelector(`[data-cotomy-scopeid="${this.scopeId}"]`) !== null;
+                if (!hasSameScope) {
+                    CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
+                }
             });
         }
         return this;
     }
+    ensureScopedCss() {
+        if (!this._scopedCss || !this.stylable)
+            return;
+        const cssid = this.scopedCssElementId;
+        if (!document.getElementById(cssid)) {
+            this.useScopedCss(this._scopedCss);
+        }
+    }
     listenLayoutEvents() {
         this.attribute(CotomyElement.LISTEN_LAYOUT_EVENTS_ATTRIBUTE, "");
         return this;
@@ -1038,7 +1050,7 @@ class CotomyElement {
     }
     clone(type) {
         const ctor = (type ?? CotomyElement);
-        const ATTRIBUTES_TO_STRIP = ["data-cotomy-instance", "data-cotomy-scopeid", "data-cotomy-moving"];
+        const ATTRIBUTES_TO_STRIP = ["data-cotomy-instance", "data-cotomy-moving"];
         const clonedElement = this.element.cloneNode(true);
         if (clonedElement.hasAttribute("data-cotomy-invalidated")) {
             throw new Error("Cannot clone an invalidated CotomyElement.");
@@ -1048,6 +1060,7 @@ class CotomyElement {
             clonedElement.querySelectorAll(`[${attr}]`).forEach(el => el.removeAttribute(attr));
         });
         const cloned = new ctor(clonedElement);
+        cloned._scopedCss = this._scopedCss;
         return cloned;
     }
     get tagname() {
@@ -1278,6 +1291,36 @@ class CotomyElement {
             height: rect.height + margin.top + margin.bottom
         };
     }
+    static overlapsRect(left, right) {
+        if (left.width <= 0 || left.height <= 0 || right.width <= 0 || right.height <= 0) {
+            return false;
+        }
+        const leftRight = left.left + left.width;
+        const leftBottom = left.top + left.height;
+        const rightRight = right.left + right.width;
+        const rightBottom = right.top + right.height;
+        return left.left < rightRight
+            && leftRight > right.left
+            && left.top < rightBottom
+            && leftBottom > right.top;
+    }
+    overlaps(target) {
+        if (!this.attached || !target.attached) {
+            return false;
+        }
+        if (this.element === target.element) {
+            return false;
+        }
+        return CotomyElement.overlapsRect(this.rect, target.rect);
+    }
+    get overlapElements() {
+        if (!this.attached) {
+            return [];
+        }
+        return CotomyElement.find("[data-cotomy-instance]")
+            .filter(e => e.element !== this.element)
+            .filter(e => this.overlaps(e));
+    }
     get padding() {
         const style = this.getComputedStyle();
         return {
@@ -1575,12 +1618,14 @@ class CotomyElement {
         CotomyElement.runWithMoveEvents(prepend, () => {
             this.element.prepend(prepend.element);
         });
+        prepend.ensureScopedCss();
         return this;
     }
     append(target) {
         CotomyElement.runWithMoveEvents(target, () => {
             this.element.append(target.element);
         });
+        target.ensureScopedCss();
         return this;
     }
     appendAll(targets) {
@@ -1591,24 +1636,28 @@ class CotomyElement {
         CotomyElement.runWithMoveEvents(append, () => {
             this.element.before(append.element);
         });
+        append.ensureScopedCss();
         return this;
     }
     insertAfter(append) {
         CotomyElement.runWithMoveEvents(append, () => {
             this.element.after(append.element);
         });
+        append.ensureScopedCss();
         return this;
     }
     appendTo(target) {
         CotomyElement.runWithMoveEvents(this, () => {
             target.element.append(this.element);
         });
+        this.ensureScopedCss();
         return this;
     }
     prependTo(target) {
         CotomyElement.runWithMoveEvents(this, () => {
             target.element.prepend(this.element);
         });
+        this.ensureScopedCss();
         return this;
     }
     trigger(event, e) {