sliced-areas 1.0.2 → 1.0.4

package/README.md

@@ -1,14 +1,16 @@
 # sliced-areas
 
-Blender-like “Areas” layout system as a Web Component with an optional Vue 3 wrapper.
+Blender-like resizable and splittable areas layout system. Available as a Web Component with optional Vue 3 wrapper.
 
-## Install
+📚 **[Documentation & Examples](https://pavel-voronin.github.io/sliced-areas/)**
+
+## Installation
 
 ```sh
 npm install sliced-areas
 ```
 
-## Web Component Setup
+## Web Component Usage
 
 ```ts
 import 'sliced-areas'
@@ -16,24 +18,28 @@ import 'sliced-areas/styles.css'
 import type { AreasLayout, SlicedAreasElement } from 'sliced-areas'
 
 const layout: AreasLayout = {
-  areas: [{ tag: 'viewport', rect: { left: 0, right: 1, top: 1, bottom: 0 } }],
+  areas: [{ tag: 'viewport', rect: { left: 0, right: 1, top: 1, bottom: 0 } }]
 }
 
 const areas = document.querySelector('sliced-areas') as SlicedAreasElement
-areas.setResolver((tag) => document.querySelector(`[data-area-tag="${tag}"]`))
+areas.setResolver((tag) => {
+  const div = document.createElement('div')
+  div.textContent = `Content for: ${tag}`
+  return div
+})
 areas.layout = layout
 ```
 
 ```html
-<sliced-areas style="height: 100%;"></sliced-areas>
-<div data-area-tag="viewport">Viewport content</div>
+<sliced-areas style="height: 100vh;"></sliced-areas>
 ```
 
-## Vue 3 Setup
+**Important:** Resolver must return a fresh node each time. When areas share the same tag, reusing the same DOM element will move it to the last area.
+
+## Vue 3 Usage
 
 ```ts
 import { createApp } from 'vue'
-import App from './App.vue'
 import { SlicedAreasPlugin } from 'sliced-areas/vue'
 import 'sliced-areas/styles.css'
 
@@ -43,21 +49,36 @@ app.mount('#app')
 ```
 
 ```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { AreasLayout } from 'sliced-areas/vue'
+
+const layout = ref<AreasLayout>({
+  areas: [{ tag: 'viewport', rect: { left: 0, right: 1, top: 1, bottom: 0 } }]
+})
+
+const resolveArea = (tag: string) => {
+  const div = document.createElement('div')
+  div.textContent = `Content for: ${tag}`
+  return div
+}
+
+const onLayoutChange = (detail: { layout: AreasLayout }) => {
+  layout.value = detail.layout
+}
+</script>
+
 <template>
   <SlicedAreas
-    class="layout-root"
     :layout="layout"
     :resolver="resolveArea"
     @layoutchange="onLayoutChange"
-    @cornerclick="onCornerClick"
   />
 </template>
 ```
 
 ## Layout Format
 
-`AreasLayout` uses normalized coordinates (0..1) and tags for content lookup:
-
 ```ts
 type AreasLayout = {
   areas: Array<{
@@ -67,46 +88,13 @@ type AreasLayout = {
 }
 ```
 
-- Area ids are internal and auto-generated; only tags are persistent.
-- The layout always fills the component bounds.
-
-## Gestures and Operations
-
-- Resize: drag splitters between areas.
-- Move/Split/Join/Replace: drag an area corner into another area.
-- Split orientation is inferred from drag direction.
-- Swap: hold `Ctrl` while dragging an area into another.
-- Maximize/Restore: use the API methods.
+Coordinates are normalized (0 to 1). `top: 1` is top edge, `bottom: 0` is bottom edge.
 
 ## Events
 
-- `sliced-areas:layoutchange` → `{ layout: AreasLayout }`
-- `sliced-areas:cornerclick` → `{ areaId, corner, clientX, clientY }`
+- `sliced-areas:layoutchange` / `@layoutchange` - Fired when layout changes
+- `sliced-areas:cornerclick` / `@cornerclick` - Fired when corner is clicked
 
-Vue emits `layoutchange` and `cornerclick` with the same payloads.
+## License
 
-## API (Element)
-
-```ts
-element.layout: AreasLayout | null
-element.setResolver(resolver: (tag: string) => HTMLElement | null | undefined): void
-element.split(areaId, zone?, clientX?, clientY?): void
-element.join(sourceAreaId, targetAreaId): void
-element.replace(sourceAreaId, targetAreaId): void
-element.swap(sourceAreaId, targetAreaId): void
-element.move(sourceAreaId, targetAreaId, overlayRect, remainderRect): void
-element.close(areaId): void
-element.retag(areaId, tag): void
-element.maximize(areaId): void
-element.restore(): void
-```
-
-## Retagging from Area Content
-
-Dispatch a bubbling event from inside an area node to update its tag:
-
-```ts
-node.dispatchEvent(
-  new CustomEvent('sliced-areas:retag', { bubbles: true, detail: { tag: 'viewport' } }),
-)
-```
+MIT

package/dist/index.js

@@ -1,2 +1,2 @@
-import { n as registerSlicedAreasElement, t as SlicedAreasElement } from "./sliced-areas-DS_2BRnf.js";
+import { n as registerSlicedAreasElement, t as SlicedAreasElement } from "./sliced-areas-rZ_V6Je7.js";
 export { SlicedAreasElement, registerSlicedAreasElement };

package/dist/{sliced-areas-DS_2BRnf.js → sliced-areas-rZ_V6Je7.js}

@@ -122,7 +122,7 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 					continue;
 				}
 				let i = this.areaTags.get(e.id) ?? e.id, a = this.areaResolver(i);
-				a && (a.dataset.areaId = e.id, a.setAttribute(AUTO_ATTR, "true"), this.resolvedNodes.set(e.id, a), n.set(e.id, a));
+				a && (this.assertFreshResolvedNode(e.id, i, a), a.dataset.areaId = e.id, a.setAttribute(AUTO_ATTR, "true"), this.resolvedNodes.set(e.id, a), n.set(e.id, a));
 			}
 			r = Object.values(this.graph.areas).filter((e) => !n.has(e.id));
 		}
@@ -177,6 +177,11 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 		}
 		return n;
 	}
+	assertFreshResolvedNode(e, t, n) {
+		let r = n.dataset.areaId;
+		if (r && r !== e) throw Error(`Resolver must return a fresh element per area. Got an element already assigned to "${r}" for tag "${t}".`);
+		for (let [r, i] of this.resolvedNodes.entries()) if (i === n && r !== e) throw Error(`Resolver must return a fresh element per area. Got the same element for "${r}" and "${e}" (tag "${t}").`);
+	}
 	ensureAreaNode(n, r, i = !0) {
 		if (Array.from(this.querySelectorAll(`[data-area-id="${n}"]`)).find((t) => !t.hasAttribute(INTERNAL_ATTR))) return;
 		this.inheritAreaTag(n, r);
@@ -189,7 +194,7 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 		if (a && this.areaResolver) {
 			let e = this.areaResolver(a);
 			if (e) {
-				e.dataset.areaId = n, e.setAttribute(AUTO_ATTR, "true"), this.appendChild(e);
+				this.assertFreshResolvedNode(n, a, e), e.dataset.areaId = n, e.setAttribute(AUTO_ATTR, "true"), this.appendChild(e);
 				return;
 			}
 		}
@@ -1732,4 +1737,4 @@ const registerSlicedAreasElement = () => {
 registerSlicedAreasElement();
 export { registerSlicedAreasElement as n, SlicedAreasElement as t };
 
-//# sourceMappingURL=sliced-areas-DS_2BRnf.js.map
+//# sourceMappingURL=sliced-areas-rZ_V6Je7.js.map