sliced-areas 1.1.0 → 2.0.0

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { SlicedAreasElement, registerSlicedAreasElement } from './sliced-areas';
-export type { AreaId, AreaRect, AreaTag, AreasGraph, AreasLayout, GraphArea, GraphEdge, GraphVert, AreaResolver, SlicedAreasOperation, SlicedAreasOperationsConfig, } from './sliced-areas';
+export type { AreaId, AreaAddedDetail, AreaRect, AreaRemovedDetail, AreaTag, AreasGraph, AreasLayout, AreaUpdatedDetail, GraphArea, GraphEdge, GraphVert, AreaResolver, SlicedAreasOperation, SlicedAreasOperationsConfig, } from './sliced-areas';

package/dist/index.js

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

package/dist/{sliced-areas-C43gYU0G.js → sliced-areas-BnxGgD6W.js}

@@ -42,7 +42,9 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 			this.graph = null, this.areaTags.clear(), this.storedGraph = null, this.storedTags = null, this.resolvedNodes.clear(), this.render();
 			return;
 		}
-		this.storedGraph = null, this.storedTags = null, this.graph = this.buildGraphFromLayout(e), this.resolvedNodes.clear(), this.render();
+		this.storedGraph = null, this.storedTags = null;
+		let t = this.graph, n = new Map(this.areaTags), r = this.buildGraphFromLayout(e);
+		this.applyGraphChange(r, "layout", t, n);
 	}
 	get operations() {
 		return this.operationsConfig;
@@ -62,48 +64,65 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 	split(e, t = "right", r = 0, i = 0) {
 		if (!this.isOperationEnabled("split") || !this.graph) return;
 		let a = this.nextAreaId(), o = Number.isFinite(r) && Number.isFinite(i) && this.rootEl ? this.splitAreaAtPointer(this.graph, e, t, r, i, a) : this.splitAreaByZone(this.graph, e, t, DEFAULT_RATIO, a);
-		o && (this.ensureAreaNode(a, e, !0), this.graph = this.normalizeGraph(o), this.emitLayoutChange(), this.render());
+		if (!o) return;
+		this.ensureAreaNode(a, e, !0);
+		let s = this.normalizeGraph(o);
+		this.applyGraphChange(s, "split");
 	}
 	join(e, t) {
 		if (!this.isOperationEnabled("join") || !this.graph || !this.canJoin(e, t)) return;
-		let n = this.joinAreas(this.graph, e, t);
-		n && (this.graph = this.normalizeGraph(n), this.pruneAreaTags(this.graph), this.emitLayoutChange(), this.render());
+		let n = this.graph, r = new Map(this.areaTags), i = this.joinAreas(this.graph, e, t);
+		if (!i) return;
+		let a = this.normalizeGraph(i);
+		this.applyGraphChange(a, "join", n, r), this.pruneAreaTags(a);
 	}
 	replace(e, t) {
 		if (!this.isOperationEnabled("replace") || !this.graph) return;
-		let n = this.replaceArea(this.graph, e, t);
-		n && (this.graph = this.normalizeGraph(n), this.removeAreaNode(t), this.pruneAreaTags(this.graph), this.emitLayoutChange(), this.render());
+		let n = this.graph, r = new Map(this.areaTags), i = this.replaceArea(this.graph, e, t);
+		if (!i) return;
+		this.removeAreaNode(t);
+		let a = this.normalizeGraph(i);
+		this.applyGraphChange(a, "replace", n, r), this.pruneAreaTags(a);
 	}
 	swap(e, t) {
 		if (!this.isOperationEnabled("swap") || !this.graph) return;
 		let n = this.swapAreaIds(this.graph, e, t);
-		n && (this.graph = n, this.emitLayoutChange(), this.render());
+		n && this.applyGraphChange(n, "swap");
 	}
 	move(e, t, n, r) {
 		if (!this.isOperationEnabled("move") || !this.graph) return;
 		let i = this.moveArea(this.graph, e, t, n, r);
-		i && (this.graph = this.normalizeGraph(i), this.emitLayoutChange(), this.render());
+		if (!i) return;
+		let a = this.normalizeGraph(i);
+		this.applyGraphChange(a, "move");
 	}
 	close(e) {
 		if (!this.graph || !this.graph.areas[e] || Object.keys(this.graph.areas).length <= 1) return;
-		let t = {
+		let t = this.graph, n = new Map(this.areaTags), r = {
 			verts: { ...this.graph.verts },
 			edges: { ...this.graph.edges },
 			areas: { ...this.graph.areas }
 		};
-		delete t.areas[e], this.graph = this.normalizeGraph(t), this.removeAreaNode(e), this.pruneAreaTags(this.graph), this.emitLayoutChange(), this.render();
+		delete r.areas[e], this.removeAreaNode(e);
+		let i = this.normalizeGraph(r);
+		this.applyGraphChange(i, "close", t, n), this.pruneAreaTags(i);
 	}
 	retag(e, t) {
-		this.graph && this.graph.areas[e] && this.areaTags.get(e) !== t && (this.areaTags.set(e, t), this.resolvedNodes.delete(e), this.detachAreaNode(e), this.emitLayoutChange(), this.render());
+		if (!this.graph || !this.graph.areas[e] || this.areaTags.get(e) === t) return;
+		let n = this.graph, r = new Map(this.areaTags);
+		this.areaTags.set(e, t), this.resolvedNodes.delete(e), this.detachAreaNode(e), this.applyGraphChange(this.graph, "retag", n, r);
 	}
 	maximize(e) {
 		if (!this.isOperationEnabled("maximize") || !this.graph || this.storedGraph || !this.graph.areas[e]) return;
-		this.storedGraph = this.graph, this.storedTags = new Map(this.areaTags), this.graph = this.createBaseGraph(e), this.areaTags = /* @__PURE__ */ new Map();
-		let t = this.storedTags.get(e);
-		t && this.areaTags.set(e, t), this.emitLayoutChange(), this.render();
+		let t = this.graph, n = new Map(this.areaTags);
+		this.storedGraph = this.graph, this.storedTags = new Map(this.areaTags);
+		let r = this.createBaseGraph(e), i = /* @__PURE__ */ new Map(), a = this.storedTags.get(e);
+		a && i.set(e, a), this.areaTags = i, this.applyGraphChange(r, "maximize", t, n);
 	}
 	restore() {
-		this.isOperationEnabled("restore") && this.storedGraph && (this.graph = this.storedGraph, this.storedTags && (this.areaTags = new Map(this.storedTags)), this.storedGraph = null, this.storedTags = null, this.emitLayoutChange(), this.render());
+		if (!this.isOperationEnabled("restore") || !this.storedGraph) return;
+		let e = this.graph, t = new Map(this.areaTags), n = this.storedGraph, r = this.storedTags ? new Map(this.storedTags) : /* @__PURE__ */ new Map();
+		this.storedGraph = null, this.storedTags = null, this.areaTags = r, this.applyGraphChange(n, "restore", e, t);
 	}
 	ensureRoot() {
 		if (this.rootEl) return;
@@ -126,6 +145,65 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 	emitCornerClick(e) {
 		e.corner === "top-left" && this.dispatchEvent(new CustomEvent("sliced-areas:cornerclick", { detail: e }));
 	}
+	calculateLayoutDiff(e, t, n, r) {
+		let a = [], o = [], s = [], c = new Set(e ? Object.keys(e.areas) : []), l = new Set(Object.keys(n.areas));
+		for (let o of l) {
+			if (!c.has(o)) {
+				a.push(o);
+				continue;
+			}
+			let l = e.areas[o], u = n.areas[o];
+			if (!l || !u) continue;
+			let d = this.getAreaRect(e, l), f = this.getAreaRect(n, u), p = t.get(o), m = r.get(o);
+			(Math.abs(d.left - f.left) > EPS || Math.abs(d.top - f.top) > EPS || Math.abs(d.right - f.right) > EPS || Math.abs(d.bottom - f.bottom) > EPS || p !== m) && s.push(o);
+		}
+		for (let e of c) l.has(e) || o.push(e);
+		return {
+			added: a,
+			removed: o,
+			updated: s
+		};
+	}
+	applyGraphChange(e, t, n = this.graph, r = new Map(this.areaTags)) {
+		if (this.graph = e, n) {
+			let i = this.calculateLayoutDiff(n, r, e, this.areaTags);
+			for (let e of i.removed) this.resolvedNodes.delete(e);
+			for (let e of i.updated) r.get(e) !== this.areaTags.get(e) && this.resolvedNodes.delete(e);
+			this.render(), this.emitLayoutChange(), t !== "maximize" && t !== "restore" && this.emitGranularEvents(i, n, r);
+		} else this.render();
+	}
+	emitGranularEvents(e, t, n) {
+		if (this.graph) {
+			for (let t of e.added) {
+				let e = this.graph.areas[t];
+				e && this.dispatchEvent(new CustomEvent("sliced-areas:area-added", { detail: {
+					areaId: t,
+					tag: this.areaTags.get(t) ?? t,
+					rect: this.formatRect(this.getAreaRect(this.graph, e))
+				} }));
+			}
+			for (let t of e.removed) this.dispatchEvent(new CustomEvent("sliced-areas:area-removed", { detail: {
+				areaId: t,
+				tag: n.get(t) ?? t
+			} }));
+			for (let n of e.updated) {
+				let e = this.graph.areas[n];
+				if (!e) continue;
+				let r = t.areas[n] ? this.getAreaRect(t, t.areas[n]) : {
+					left: 0,
+					top: 1,
+					right: 1,
+					bottom: 0
+				};
+				this.dispatchEvent(new CustomEvent("sliced-areas:area-updated", { detail: {
+					areaId: n,
+					tag: this.areaTags.get(n) ?? n,
+					oldRect: this.formatRect(r),
+					newRect: this.formatRect(this.getAreaRect(this.graph, e))
+				} }));
+			}
+		}
+	}
 	syncOperations() {
 		let e = new Set(ALL_OPERATIONS), t = /* @__PURE__ */ new Set(), n = (this.operationsConfig.enable ?? []).filter((t) => e.has(t));
 		if (n.length > 0) for (let e of n) t.add(e);
@@ -140,26 +218,61 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 	hasAreaDragOperations() {
 		return this.isOperationEnabled("split") || this.isOperationEnabled("join") || this.isOperationEnabled("move") || this.isOperationEnabled("replace") || this.isOperationEnabled("swap");
 	}
+	reconcileAreaWrappers(t) {
+		if (!this.rootEl || !this.graph) return;
+		let n = this.rootEl.getBoundingClientRect(), r = Math.max(n.width, 1), i = Math.max(n.height, 1), a = DEFAULT_SPLITTER_SIZE / 2, o = /* @__PURE__ */ new Map(), c = this.rootEl.querySelectorAll(".sliced-areas-area");
+		for (let e of c) {
+			let t = (e.querySelector(".sliced-areas-overlay")?.querySelector(".sliced-areas-corner"))?.getAttribute("data-area-id");
+			t && o.set(t, e);
+		}
+		for (let n of Object.values(this.graph.areas)) {
+			let s = this.getAreaRect(this.graph, n), c = s.left * r + a, l = (1 - s.top) * i + a, u = (s.right - s.left) * r - a * 2, d = (s.top - s.bottom) * i - a * 2, f = o.get(n.id);
+			if (f) {
+				f.style.left = `${c}px`, f.style.top = `${l}px`, f.style.width = `${Math.max(u, 0)}px`, f.style.height = `${Math.max(d, 0)}px`;
+				let r = Array.from(f.children).find((t) => !t.hasAttribute(INTERNAL_ATTR)), i = t.get(n.id);
+				i && r !== i && (r && r.remove(), f.appendChild(i)), o.delete(n.id);
+				continue;
+			}
+			let p = document.createElement("div");
+			p.classList.add("sliced-areas-area"), p.setAttribute(INTERNAL_ATTR, "true"), p.style.left = `${c}px`, p.style.top = `${l}px`, p.style.width = `${Math.max(u, 0)}px`, p.style.height = `${Math.max(d, 0)}px`;
+			let m = document.createElement("div");
+			m.classList.add("sliced-areas-overlay"), m.setAttribute(INTERNAL_ATTR, "true"), p.appendChild(m);
+			for (let t of [
+				"top-left",
+				"top-right",
+				"bottom-left",
+				"bottom-right"
+			]) {
+				let r = document.createElement("div");
+				r.classList.add("sliced-areas-corner"), r.classList.add(`is-${t}`), r.setAttribute(INTERNAL_ATTR, "true"), r.dataset.areaId = n.id, r.dataset.corner = t, m.appendChild(r);
+			}
+			let h = t.get(n.id);
+			if (h) p.appendChild(h);
+			else throw Error(`Missing area content for ${n.id}`);
+			this.rootEl.appendChild(p);
+		}
+		for (let [e, t] of o) t.remove();
+	}
 	render() {
 		if (!this.rootEl || !this.graph) return;
-		let n = this.collectAreaNodes();
+		let e = this.collectAreaNodes();
 		this.ensureStash(), this.stashEl && (this.stashEl.innerHTML = "");
-		let r = Object.values(this.graph.areas).filter((e) => !n.has(e.id));
-		if (r.length > 0 && this.areaResolver) {
-			for (let e of r) {
-				let r = this.resolvedNodes.get(e.id);
-				if (r) {
-					n.set(e.id, r);
+		let n = Object.values(this.graph.areas).filter((t) => !e.has(t.id));
+		if (n.length > 0 && this.areaResolver) {
+			for (let r of n) {
+				let n = this.resolvedNodes.get(r.id);
+				if (n) {
+					e.set(r.id, n);
 					continue;
 				}
-				let i = this.areaTags.get(e.id) ?? e.id, a = this.areaResolver(i);
-				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));
+				let i = this.areaTags.get(r.id) ?? r.id, a = this.areaResolver(i);
+				a && (this.assertFreshResolvedNode(r.id, i, a), a.dataset.areaId = r.id, a.setAttribute(AUTO_ATTR, "true"), this.resolvedNodes.set(r.id, a), e.set(r.id, a));
 			}
-			r = Object.values(this.graph.areas).filter((e) => !n.has(e.id));
+			n = Object.values(this.graph.areas).filter((t) => !e.has(t.id));
 		}
-		if (r.length > 0) {
+		if (n.length > 0) {
 			let e = {
-				missing: r.map((e) => e.id),
+				missing: n.map((e) => e.id),
 				areas: Object.values(this.graph.areas).map((e) => ({
 					id: e.id,
 					rect: this.formatRect(this.getAreaRect(this.graph, e))
@@ -167,31 +280,13 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 			};
 			throw Error(`Missing area content detected: ${JSON.stringify(e)}`);
 		}
-		let i = this.rootEl.getBoundingClientRect(), a = Math.max(i.width, 1), o = Math.max(i.height, 1), c = DEFAULT_SPLITTER_SIZE / 2;
-		this.rootEl.innerHTML = "";
-		for (let t of Object.values(this.graph.areas)) {
-			let r = this.getAreaRect(this.graph, t), i = document.createElement("div");
-			i.classList.add("sliced-areas-area"), i.setAttribute(INTERNAL_ATTR, "true");
-			let s = r.left * a + c, l = (1 - r.top) * o + c, u = (r.right - r.left) * a - c * 2, d = (r.top - r.bottom) * o - c * 2;
-			i.style.left = `${s}px`, i.style.top = `${l}px`, i.style.width = `${Math.max(u, 0)}px`, i.style.height = `${Math.max(d, 0)}px`;
-			let f = document.createElement("div");
-			f.classList.add("sliced-areas-overlay"), f.setAttribute(INTERNAL_ATTR, "true"), i.appendChild(f);
-			for (let n of [
-				"top-left",
-				"top-right",
-				"bottom-left",
-				"bottom-right"
-			]) {
-				let r = document.createElement("div");
-				r.classList.add("sliced-areas-corner"), r.classList.add(`is-${n}`), r.setAttribute(INTERNAL_ATTR, "true"), r.dataset.areaId = t.id, r.dataset.corner = n, f.appendChild(r);
-			}
-			let p = n.get(t.id);
-			if (p) i.appendChild(p);
-			else throw Error(`Missing area content for ${t.id}`);
-			this.rootEl.appendChild(i);
+		if (this.reconcileAreaWrappers(e), this.stashEl) for (let [t, n] of e.entries()) this.graph.areas[t] || this.stashEl.appendChild(n);
+		let r = this.rootEl.querySelectorAll(".sliced-areas-handle");
+		for (let e of r) e.remove();
+		if (this.isOperationEnabled("resize")) {
+			let e = this.rootEl.getBoundingClientRect(), t = Math.max(e.width, 1), n = Math.max(e.height, 1);
+			for (let e of this.buildResizeHandles(this.graph, t, n)) this.rootEl.appendChild(e);
 		}
-		if (this.stashEl) for (let [e, t] of n.entries()) this.graph.areas[e] || this.stashEl.appendChild(t);
-		if (this.isOperationEnabled("resize")) for (let e of this.buildResizeHandles(this.graph, a, o)) this.rootEl.appendChild(e);
 	}
 	collectAreaNodes() {
 		let n = /* @__PURE__ */ new Map(), r = Array.from(this.querySelectorAll("[data-area-id]"));
@@ -241,21 +336,42 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 		}
 		this.areaTags.set(e, t);
 	}
-	buildGraphFromLayout(e) {
-		this.areaTags.clear();
-		let t = [];
-		for (let n of e.areas) {
-			let e = this.nextAreaId();
-			t.push({
+	assignAreaIds(e) {
+		let t = /* @__PURE__ */ new Set(), n = [];
+		for (let r of e.areas) {
+			let e;
+			if (r.id) {
+				if (t.has(r.id)) throw Error(`Duplicate area ID: ${r.id}`);
+				e = r.id;
+				let n = /^area-(\d+)$/.exec(e);
+				if (n) {
+					/* v8 ignore next */
+					let e = Number.parseInt(n[1] ?? "0", 10);
+					/* v8 ignore next */
+					e >= this.areaCounter && (this.areaCounter = e);
+				}
+			} else e = this.nextAreaId();
+			t.add(e), n.push({
 				id: e,
-				rect: n.rect
-			}), this.areaTags.set(e, n.tag);
+				tag: r.tag,
+				rect: r.rect
+			});
 		}
-		let n = this.buildGraphFromRects(t);
-		return this.normalizeGraph(n);
+		return n;
+	}
+	buildGraphFromLayout(e) {
+		this.areaTags.clear();
+		let t = this.assignAreaIds(e), n = [];
+		for (let e of t) n.push({
+			id: e.id,
+			rect: e.rect
+		}), this.areaTags.set(e.id, e.tag);
+		let r = this.buildGraphFromRects(n);
+		return this.normalizeGraph(r);
 	}
 	serializeLayout(e) {
 		return { areas: Object.values(e.areas).map((t) => ({
+			id: t.id,
 			tag: this.areaTags.get(t.id) ?? t.id,
 			rect: this.formatRect(this.getAreaRect(e, t))
 		})) };
@@ -726,7 +842,7 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 		}
 		if (!this.rootEl || !this.graph || !this.dragState) return;
 		let t = this.rootEl.getBoundingClientRect(), n = Math.max(t.width, 1), r = Math.max(t.height, 1), i = e.clientX - this.dragState.originX, a = e.clientY - this.dragState.originY, o = this.dragState.axis === "vertical" ? i / n : -a / r, s = Math.max(this.dragState.min, Math.min(this.dragState.max, this.dragState.coord + o)), c = this.moveEdge(this.graph, this.dragState.axis, this.dragState.coord, s, this.dragState.start, this.dragState.end);
-		c && (this.graph = c, this.dragState.coord = s, this.dragState.originX = e.clientX, this.dragState.originY = e.clientY, this.render());
+		c && (this.applyGraphChange(c, "resize"), this.dragState.coord = s, this.dragState.originX = e.clientX, this.dragState.originY = e.clientY);
 	};
 	onPointerUp = (e) => {
 		if (this.areaDragState) {
@@ -739,7 +855,10 @@ var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas
 			}), this.finishAreaDrag();
 			return;
 		}
-		this.dragState && (this.dragState = null, this.detachDragListeners(), this.detachKeyListener(), this.dragSnapshot = null, this.graph &&= this.normalizeGraph(this.graph), this.emitLayoutChange());
+		if (this.dragState && (this.dragState = null, this.detachDragListeners(), this.detachKeyListener(), this.dragSnapshot = null, this.graph)) {
+			let e = this.normalizeGraph(this.graph);
+			e !== this.graph && (this.graph = e, this.render());
+		}
 	};
 	onKeyDown = (e) => {
 		if (e.key === "Control") {
@@ -1789,4 +1908,4 @@ const registerSlicedAreasElement = () => {
 registerSlicedAreasElement();
 export { registerSlicedAreasElement as n, SlicedAreasElement as t };
 
-//# sourceMappingURL=sliced-areas-C43gYU0G.js.map
+//# sourceMappingURL=sliced-areas-BnxGgD6W.js.map