@camstack/ui-library 1.2.179 → 1.2.180

package/dist/composites/cap-settings/camera-grid-layout.d.ts

@@ -32,13 +32,17 @@ export interface GridProfileOffer {
     readonly profile: 'high' | 'mid' | 'low';
     readonly offered: boolean;
     readonly missingSources: readonly number[];
+    /**
+     * The canvas this profile composes onto, `WxH`, or empty when it is not
+     * offered. DERIVED — the operator no longer types a resolution, so this is
+     * the only place the grid's actual size is ever stated.
+     */
+    readonly canvas: string;
 }
 export interface GridLayoutView {
     readonly instanceId: string;
     readonly deviceId: number;
     readonly name: string;
-    readonly width: number;
-    readonly height: number;
     readonly fps: number;
     readonly cells: readonly GridLayoutCell[];
     readonly profiles: readonly GridProfileOffer[];

package/dist/index.cjs

@@ -16641,7 +16641,8 @@ function readProfileOffer(value) {
 	return {
 		profile,
 		offered,
-		missingSources
+		missingSources,
+		canvas: typeof value["canvas"] === "string" ? value["canvas"] : ""
 	};
 }
 /**
@@ -16655,8 +16656,8 @@ function readProfileOffer(value) {
 function parseGridView(raw) {
 	if (raw === null) return null;
 	if (!isRecord(raw)) return "unreadable";
-	const { instanceId, deviceId, name, width, height, fps, cells, profiles } = raw;
-	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof width !== "number" || typeof height !== "number" || typeof fps !== "number" || !Array.isArray(cells) || !Array.isArray(profiles)) return "unreadable";
+	const { instanceId, deviceId, name, fps, cells, profiles } = raw;
+	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof fps !== "number" || !Array.isArray(cells) || !Array.isArray(profiles)) return "unreadable";
 	const parsed = [];
 	for (const entry of cells) {
 		const cell = readCell(entry);
@@ -16673,8 +16674,6 @@ function parseGridView(raw) {
 		instanceId,
 		deviceId,
 		name,
-		width,
-		height,
 		fps,
 		cells: parsed,
 		profiles: offers
@@ -16896,8 +16895,6 @@ function CameraGridLayoutEditor({ deviceId }) {
 		try {
 			const outcome = parseGridView(await layout.saveLayout({
 				name: draft.name,
-				width: draft.width,
-				height: draft.height,
 				fps: draft.fps,
 				cells: draft.cells.map((cell) => ({ ...cell }))
 			}));
@@ -16920,7 +16917,27 @@ function CameraGridLayoutEditor({ deviceId }) {
 			} : cell)
 		});
 	}, []);
-	const canvasAspect = (0, react$1.useMemo)(() => draft === null ? 16 / 9 : draft.width / draft.height, [draft]);
+	/**
+	* The shape the grid will actually come out as.
+	*
+	* The canvas is no longer a field: each profile derives its own from the
+	* cells and the sources' dimensions, and the server reports what it came out
+	* as. Drawing at that aspect is the only way the editor shows the truth —
+	* before, it drew at whatever two numbers had been typed, which is exactly
+	* how a layout could look right here and wrong on screen.
+	*
+	* 16:9 while nothing is offered yet: a grid with no cells has no shape, and
+	* an empty editor has to be drawn at something.
+	*/
+	const canvasAspect = (0, react$1.useMemo)(() => {
+		const offered = loaded === void 0 || loaded === null || loaded === "unreadable" ? [] : loaded.profiles;
+		for (const row of offered) {
+			if (!row.offered) continue;
+			const [width, height] = row.canvas.split("x").map(Number);
+			if (width !== void 0 && height !== void 0 && width > 0 && height > 0) return width / height;
+		}
+		return 16 / 9;
+	}, [loaded]);
 	if (loaded === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
 		title: "Grid layout",
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
@@ -17031,62 +17048,39 @@ function CameraGridLayoutEditor({ deviceId }) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "grid grid-cols-4 gap-2 text-[10.5px]",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
-							label: "Width",
-							value: draft.width,
-							onChange: (width) => {
-								setDraft({
-									...draft,
-									width
-								});
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
-							label: "Height",
-							value: draft.height,
-							onChange: (height) => {
-								setDraft({
-									...draft,
-									height
-								});
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
-							label: "FPS",
-							value: draft.fps,
-							onChange: (fps) => {
-								setDraft({
-									...draft,
-									fps
-								});
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							disabled: draft.cells.length >= MAX_CELLS,
-							onClick: () => {
-								const first = cameras.find((camera) => camera.id !== deviceId);
-								if (!first) return;
-								setDraft({
-									...draft,
-									cells: [...draft.cells, {
-										deviceId: first.id,
-										source: FULL_FRAME,
-										cell: clampNormalizedRect({
-											x: .1,
-											y: .1,
-											width: .4,
-											height: .4
-										})
-									}]
-								});
-								setSelected(draft.cells.length);
-							},
-							className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), " Cell"]
-						})
-					]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
+						label: "FPS",
+						value: draft.fps,
+						onChange: (fps) => {
+							setDraft({
+								...draft,
+								fps
+							});
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						disabled: draft.cells.length >= MAX_CELLS,
+						onClick: () => {
+							const first = cameras.find((camera) => camera.id !== deviceId);
+							if (!first) return;
+							setDraft({
+								...draft,
+								cells: [...draft.cells, {
+									deviceId: first.id,
+									source: FULL_FRAME,
+									cell: clampNormalizedRect({
+										x: .1,
+										y: .1,
+										width: .4,
+										height: .4
+									})
+								}]
+							});
+							setSelected(draft.cells.length);
+						},
+						className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), " Cell"]
+					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridProfileReport, {
 					offers: loaded.profiles,
@@ -17134,7 +17128,11 @@ function GridProfileReport({ offers, cameras }) {
 				children: offer.profile
 			}), offer.offered ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "text-foreground-subtle",
-				children: ["composed from every source’s ", offer.profile]
+				children: [
+					offer.canvas,
+					" — composed from every source’s ",
+					offer.profile
+				]
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-danger",
 				children: offer.missingSources.length === 0 ? "not offered — this grid has no cells yet" : `not offered — no ${offer.profile} on ${offer.missingSources.map(nameOf).join(", ")}`

package/dist/index.js

@@ -16617,7 +16617,8 @@ function readProfileOffer(value) {
 	return {
 		profile,
 		offered,
-		missingSources
+		missingSources,
+		canvas: typeof value["canvas"] === "string" ? value["canvas"] : ""
 	};
 }
 /**
@@ -16631,8 +16632,8 @@ function readProfileOffer(value) {
 function parseGridView(raw) {
 	if (raw === null) return null;
 	if (!isRecord(raw)) return "unreadable";
-	const { instanceId, deviceId, name, width, height, fps, cells, profiles } = raw;
-	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof width !== "number" || typeof height !== "number" || typeof fps !== "number" || !Array.isArray(cells) || !Array.isArray(profiles)) return "unreadable";
+	const { instanceId, deviceId, name, fps, cells, profiles } = raw;
+	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof fps !== "number" || !Array.isArray(cells) || !Array.isArray(profiles)) return "unreadable";
 	const parsed = [];
 	for (const entry of cells) {
 		const cell = readCell(entry);
@@ -16649,8 +16650,6 @@ function parseGridView(raw) {
 		instanceId,
 		deviceId,
 		name,
-		width,
-		height,
 		fps,
 		cells: parsed,
 		profiles: offers
@@ -16872,8 +16871,6 @@ function CameraGridLayoutEditor({ deviceId }) {
 		try {
 			const outcome = parseGridView(await layout.saveLayout({
 				name: draft.name,
-				width: draft.width,
-				height: draft.height,
 				fps: draft.fps,
 				cells: draft.cells.map((cell) => ({ ...cell }))
 			}));
@@ -16896,7 +16893,27 @@ function CameraGridLayoutEditor({ deviceId }) {
 			} : cell)
 		});
 	}, []);
-	const canvasAspect = useMemo(() => draft === null ? 16 / 9 : draft.width / draft.height, [draft]);
+	/**
+	* The shape the grid will actually come out as.
+	*
+	* The canvas is no longer a field: each profile derives its own from the
+	* cells and the sources' dimensions, and the server reports what it came out
+	* as. Drawing at that aspect is the only way the editor shows the truth —
+	* before, it drew at whatever two numbers had been typed, which is exactly
+	* how a layout could look right here and wrong on screen.
+	*
+	* 16:9 while nothing is offered yet: a grid with no cells has no shape, and
+	* an empty editor has to be drawn at something.
+	*/
+	const canvasAspect = useMemo(() => {
+		const offered = loaded === void 0 || loaded === null || loaded === "unreadable" ? [] : loaded.profiles;
+		for (const row of offered) {
+			if (!row.offered) continue;
+			const [width, height] = row.canvas.split("x").map(Number);
+			if (width !== void 0 && height !== void 0 && width > 0 && height > 0) return width / height;
+		}
+		return 16 / 9;
+	}, [loaded]);
 	if (loaded === void 0) return /* @__PURE__ */ jsx(WidgetPanel, {
 		title: "Grid layout",
 		icon: /* @__PURE__ */ jsx(Grid2x2, { className: "h-3.5 w-3.5" }),
@@ -17007,62 +17024,39 @@ function CameraGridLayoutEditor({ deviceId }) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "grid grid-cols-4 gap-2 text-[10.5px]",
-					children: [
-						/* @__PURE__ */ jsx(LabelledNumber, {
-							label: "Width",
-							value: draft.width,
-							onChange: (width) => {
-								setDraft({
-									...draft,
-									width
-								});
-							}
-						}),
-						/* @__PURE__ */ jsx(LabelledNumber, {
-							label: "Height",
-							value: draft.height,
-							onChange: (height) => {
-								setDraft({
-									...draft,
-									height
-								});
-							}
-						}),
-						/* @__PURE__ */ jsx(LabelledNumber, {
-							label: "FPS",
-							value: draft.fps,
-							onChange: (fps) => {
-								setDraft({
-									...draft,
-									fps
-								});
-							}
-						}),
-						/* @__PURE__ */ jsxs("button", {
-							type: "button",
-							disabled: draft.cells.length >= MAX_CELLS,
-							onClick: () => {
-								const first = cameras.find((camera) => camera.id !== deviceId);
-								if (!first) return;
-								setDraft({
-									...draft,
-									cells: [...draft.cells, {
-										deviceId: first.id,
-										source: FULL_FRAME,
-										cell: clampNormalizedRect({
-											x: .1,
-											y: .1,
-											width: .4,
-											height: .4
-										})
-									}]
-								});
-								setSelected(draft.cells.length);
-							},
-							className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
-							children: [/* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }), " Cell"]
-						})
-					]
+					children: [/* @__PURE__ */ jsx(LabelledNumber, {
+						label: "FPS",
+						value: draft.fps,
+						onChange: (fps) => {
+							setDraft({
+								...draft,
+								fps
+							});
+						}
+					}), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						disabled: draft.cells.length >= MAX_CELLS,
+						onClick: () => {
+							const first = cameras.find((camera) => camera.id !== deviceId);
+							if (!first) return;
+							setDraft({
+								...draft,
+								cells: [...draft.cells, {
+									deviceId: first.id,
+									source: FULL_FRAME,
+									cell: clampNormalizedRect({
+										x: .1,
+										y: .1,
+										width: .4,
+										height: .4
+									})
+								}]
+							});
+							setSelected(draft.cells.length);
+						},
+						className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
+						children: [/* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }), " Cell"]
+					})]
 				}),
 				/* @__PURE__ */ jsx(GridProfileReport, {
 					offers: loaded.profiles,
@@ -17110,7 +17104,11 @@ function GridProfileReport({ offers, cameras }) {
 				children: offer.profile
 			}), offer.offered ? /* @__PURE__ */ jsxs("span", {
 				className: "text-foreground-subtle",
-				children: ["composed from every source’s ", offer.profile]
+				children: [
+					offer.canvas,
+					" — composed from every source’s ",
+					offer.profile
+				]
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "text-danger",
 				children: offer.missingSources.length === 0 ? "not offered — this grid has no cells yet" : `not offered — no ${offer.profile} on ${offer.missingSources.map(nameOf).join(", ")}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.179",
+  "version": "1.2.180",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",