dtoro
d4d99a7473
Problem: the hexagonal refactor churns the backend tree for nine more phases; the UI delivery stack (web/ SPA, cmd/desktop Wails wrapper, compose/web image) must move to its own repo first so doc/layout rewrites land once on a backend-only tree. Change: - New repo git.hubris.network/dtoro/oikos-web (v0.33.0): web/, desktop/ (updateURL repointed to oikos-web releases), compose/, own CI (web + desktop jobs), own deploy script (CI-green gate, TOCTOU guard, version-tagged images, prune-to-3), own webhook receiver on :9798 + launchd unit, own compose project publishing the same 8091:80. - Cutover executed on mac-mini in order: oikos stack's web service stopped+removed, oikos-web project brought up on 8091; outer Caddy untouched (targets the published port) — serving + Authentik flow + /wails 404 quirk verified post-cutover. - Stripped from oikos: web/, cmd/desktop/, compose/web/, desktop CI workflow, ci.yml web job, Makefile ui/desktop/desktop-package/install targets, the compose web service, oikos-web from deploy.sh's fallback prune list; wails + go-keyring dropped from go.mod, vendor synced. - README / CONTRIBUTING / AGENTS.md / .agents dev+operations docs now point at the new repo; mbse + mascot design docs carry a path note. Risk: production SPA serving depends on the new pipeline now; rollback is versioned-image re-up of the old web service from a pre-split checkout (port 8091). Desktop builds installed before the split still check dtoro/oikos releases — one manual reinstall, noted in the oikos-web release notes. Verification: go vet, make test (race), make generate-check, golangci (no new findings; baseline down 400→365); post-cutover curls — localhost:8091 200, /wails/runtime.js 404, outer Caddy 302 Authentik.
86 lines
2.6 KiB
JavaScript
86 lines
2.6 KiB
JavaScript
import { extract } from "../extract/extract.svelte.js";
|
|
import { useMutationObserver } from "../use-mutation-observer/use-mutation-observer.svelte.js";
|
|
import { useResizeObserver } from "../use-resize-observer/use-resize-observer.svelte.js";
|
|
/**
|
|
* Returns a reactive value holding the size of `node`.
|
|
*
|
|
* Accepts an `options` object with the following properties:
|
|
* - `initialSize`: The initial size of the element. Defaults to `{ width: 0, height: 0 }`.
|
|
* - `box`: The box model to use. Can be either `"content-box"` or `"border-box"`. Defaults to `"border-box"`.
|
|
*
|
|
* @returns an object with `width` and `height` properties.
|
|
*
|
|
* @see {@link https://runed.dev/docs/utilities/element-size}
|
|
*/
|
|
export class ElementRect {
|
|
#rect = $state({
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
});
|
|
constructor(node, options = {}) {
|
|
this.#rect = {
|
|
width: options.initialRect?.width ?? 0,
|
|
height: options.initialRect?.height ?? 0,
|
|
x: options.initialRect?.x ?? 0,
|
|
y: options.initialRect?.y ?? 0,
|
|
top: options.initialRect?.top ?? 0,
|
|
right: options.initialRect?.right ?? 0,
|
|
bottom: options.initialRect?.bottom ?? 0,
|
|
left: options.initialRect?.left ?? 0,
|
|
};
|
|
const el = $derived(extract(node));
|
|
const update = () => {
|
|
if (!el)
|
|
return;
|
|
const rect = el.getBoundingClientRect();
|
|
this.#rect.width = rect.width;
|
|
this.#rect.height = rect.height;
|
|
this.#rect.x = rect.x;
|
|
this.#rect.y = rect.y;
|
|
this.#rect.top = rect.top;
|
|
this.#rect.right = rect.right;
|
|
this.#rect.bottom = rect.bottom;
|
|
this.#rect.left = rect.left;
|
|
};
|
|
useResizeObserver(() => el, update, { window: options.window });
|
|
$effect(update);
|
|
useMutationObserver(() => el, update, {
|
|
attributeFilter: ["style", "class"],
|
|
window: options.window,
|
|
});
|
|
}
|
|
get x() {
|
|
return this.#rect.x;
|
|
}
|
|
get y() {
|
|
return this.#rect.y;
|
|
}
|
|
get width() {
|
|
return this.#rect.width;
|
|
}
|
|
get height() {
|
|
return this.#rect.height;
|
|
}
|
|
get top() {
|
|
return this.#rect.top;
|
|
}
|
|
get right() {
|
|
return this.#rect.right;
|
|
}
|
|
get bottom() {
|
|
return this.#rect.bottom;
|
|
}
|
|
get left() {
|
|
return this.#rect.left;
|
|
}
|
|
get current() {
|
|
return this.#rect;
|
|
}
|
|
}
|