@geoportallux/lux-3dviewer-plugin-statesync 1.0.0-dev

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# v1.0.0
+
+Document features and fixes

package/LICENSE.md

@@ -0,0 +1,14 @@
+Copyright (C) 2026 author <email>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.

package/README.md

@@ -0,0 +1,47 @@
+# lux-3dviewer-plugin-statesync
+
+> Part of the [VC Map Project](https://github.com/virtualcitySYSTEMS/map-ui)
+
+This plugin persists the current VC Map application state (active map, viewpoint, layer activation and styles, oblique collection, clipping polygons, plugin states) to the browser's `localStorage` and restores it on the next visit. It writes the same state used for sharable `?state=` URLs, throttled and only when something actually changes. A `?state=` URL keeps priority over the stored state, and state is preserved across a module reload (e.g. on login/logout), keeping layers that are temporarily unavailable.
+
+## Development
+
+To further develop the plugin run: `npm start`
+
+## Config parameters
+
+This plugin has no config parameters.
+
+## Deploy plugin within map-ui
+
+- Add plugin dependency in desired version to `plugins/package.json`:
+
+```
+"dependencies": {
+  ...
+  "@geoportallux/lux-3dviewer-plugin-statesync": "...",
+  ...
+```
+
+- Add plugin to map-ui module configuration. List it **first** in the `plugins` array, ahead of any plugin that restores its own state from the `state` argument of `initialize(app, state)`, since this plugin must seed the cached state before those plugins are initialized:
+
+```
+    {
+      "name": "@geoportallux/lux-3dviewer-plugin-statesync",
+      "entry": "plugins/@geoportallux/lux-3dviewer-plugin-statesync/index.js",
+    },
+```
+
+> Note: restore only takes effect for modules whose `_id` is stable across sessions. In the Geoportail viewer this is provided by the themesync plugin (stable `_id: 'catalogConfig'`), which triggers the restore once its module loads.
+
+## Build the npm package
+
+Use the following commands to increase the version and push a new tag, which builds a new version as npm package:
+
+```shell
+npm version 1.0.0 --no-git-tag-version
+git add .
+git commit -m "1.0.0"
+git tag v1.0.0
+git push origin main v1.0.0 # replace "origin" with your remote repo name
+```

package/dist/index.js

@@ -0,0 +1,204 @@
+import { getFromLocalStorage as O, removeFromLocalStorage as _, setToLocalStorage as N } from "../../../assets/ui.js";
+const l = "@geoportallux/lux-3dviewer-plugin-statesync", R = "1.0.0-dev", w = "^6.3", h = "state", K = 1e3;
+function j(e) {
+  return "_cachedAppState" in e;
+}
+function z(e) {
+  return e._cachedAppState;
+}
+function V(e, t) {
+  e._cachedAppState = t;
+}
+function D(e) {
+  if (typeof e != "object" || e === null)
+    return !1;
+  const t = e;
+  return Array.isArray(t.moduleIds) && t.moduleIds.every((n) => typeof n == "string") && Array.isArray(t.layers) && t.layers.every(
+    (n) => typeof n == "object" && n !== null && typeof n.name == "string" && typeof n.active == "boolean"
+  ) && Array.isArray(t.plugins) && Array.isArray(t.clippingPolygons) && (t.activeMap === void 0 || typeof t.activeMap == "string") && (t.activeObliqueCollection === void 0 || typeof t.activeObliqueCollection == "string") && (t.activeViewpoint === void 0 || typeof t.activeViewpoint == "object" && t.activeViewpoint !== null);
+}
+const J = 7, L = 2, S = 3;
+function c(e, t) {
+  const n = 10 ** t;
+  return Math.round(e * n) / n;
+}
+function E(e) {
+  return e.map(
+    (t, n) => c(t, n < 2 ? J : L)
+  );
+}
+function b(e) {
+  const t = { ...e };
+  return delete t.name, Array.isArray(e.cameraPosition) && (t.cameraPosition = E(e.cameraPosition)), Array.isArray(e.groundPosition) && (t.groundPosition = E(e.groundPosition)), typeof e.distance == "number" && (t.distance = c(e.distance, L)), typeof e.heading == "number" && (t.heading = c(e.heading, S)), typeof e.pitch == "number" && (t.pitch = c(e.pitch, S)), typeof e.roll == "number" && (t.roll = c(e.roll, S)), t;
+}
+function x(e) {
+  return e.activeViewpoint ? {
+    ...e,
+    activeViewpoint: b(e.activeViewpoint)
+  } : e;
+}
+function C() {
+  const e = O(l, h);
+  if (e) {
+    try {
+      const t = JSON.parse(e);
+      if (D(t))
+        return t;
+    } catch {
+    }
+    _(l, h);
+  }
+}
+function F(e) {
+  var n;
+  if (new URL(window.location.href).searchParams.has("state"))
+    return;
+  const t = C();
+  if (t) {
+    if (!j(e)) {
+      console.warn(
+        `${l}: VcsUiApp no longer exposes _cachedAppState, state restore is disabled.`
+      );
+      return;
+    }
+    (n = z(e)) != null && n.moduleIds.length || V(e, t);
+  }
+}
+function P(e, t, n) {
+  const o = new Set(e.map((i) => i.name)), a = t.filter(
+    (i) => !o.has(i.name) && !n(i.name)
+  );
+  return a.length ? [...e, ...a] : e;
+}
+function H(e) {
+  return e._id;
+}
+async function k(e) {
+  var n;
+  const t = e.maps.activeMap;
+  if (!t)
+    return "";
+  try {
+    const o = await t.getViewpoint();
+    if ((n = o == null ? void 0 : o.isValid) != null && n.call(o))
+      return JSON.stringify(b(o.toJSON()));
+  } catch {
+  }
+  return "";
+}
+function q(e) {
+  let t, n, o = !1, a, i = C();
+  async function I() {
+    a = void 0;
+    const r = await k(e), d = r !== n;
+    if (n = r, !(!o && !d)) {
+      o = !1;
+      try {
+        const s = await e.getState(!0);
+        i && (s.layers = P(
+          s.layers,
+          i.layers,
+          (p) => !!e.layers.getByKey(p)
+        ), s.clippingPolygons = P(
+          s.clippingPolygons,
+          i.clippingPolygons,
+          (p) => !!e.clippingPolygons.getByKey(p)
+        ));
+        const v = x(s), m = JSON.stringify(v);
+        m !== t && (N(l, h, m), t = m), i = v;
+      } catch {
+      }
+    }
+  }
+  function M(r) {
+    if (!i)
+      return;
+    const d = H(r);
+    d !== e.dynamicModuleId && V(e, {
+      moduleIds: [d],
+      layers: i.layers.map((s) => ({ ...s })),
+      clippingPolygons: i.clippingPolygons.map((s) => ({
+        ...s
+      })),
+      plugins: []
+    });
+  }
+  function A() {
+    a || (a = setTimeout(() => {
+      I().catch(() => {
+      });
+    }, K));
+  }
+  function f() {
+    o = !0, A();
+  }
+  let u;
+  function y(r) {
+    u == null || u(), u = r == null ? void 0 : r.postRender.addEventListener(A);
+  }
+  y(e.maps.activeMap);
+  const g = e.clippingPolygons.stateChanged, T = [
+    e.layers.stateChanged.addEventListener(f),
+    g == null ? void 0 : g.addEventListener(f),
+    e.maps.mapActivated.addEventListener((r) => {
+      y(r), f();
+    }),
+    e.moduleRemoved.addEventListener(M)
+  ].filter((r) => !!r);
+  return () => {
+    a && (clearTimeout(a), a = void 0), y(null), T.forEach((r) => {
+      r();
+    });
+  };
+}
+function G() {
+  let e;
+  return {
+    get name() {
+      return l;
+    },
+    get version() {
+      return R;
+    },
+    get mapVersion() {
+      return w;
+    },
+    initialize(t) {
+      return F(t), Promise.resolve();
+    },
+    onVcsAppMounted(t) {
+      e = q(t);
+    },
+    /**
+     * should return all default values of the configuration
+     */
+    getDefaultOptions() {
+      return {};
+    },
+    /**
+     * should return the plugin's serialization excluding all default values
+     */
+    toJSON() {
+      return {};
+    },
+    /**
+     * should return the plugins state
+     * @returns {PluginState}
+     */
+    getState() {
+      return {};
+    },
+    /**
+     * components for configuring the plugin and/ or custom items defined by the plugin
+     */
+    getConfigEditors() {
+      return [];
+    },
+    destroy() {
+      e == null || e(), e = void 0;
+    }
+  };
+}
+export {
+  G as default
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@geoportallux/lux-3dviewer-plugin-statesync",
+  "version": "1.0.0-dev",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "prepublishOnly": "vcmplugin build",
+    "build": "vcmplugin build",
+    "bundle": "vcmplugin bundle",
+    "start": "vcmplugin serve",
+    "preview": "vcmplugin preview",
+    "buildStagingApp": "vcmplugin buildStagingApp",
+    "lint:js": "eslint . --ext .vue,.js,.cjs,.mjs,.ts,.cts,.mts",
+    "lint:prettier": "prettier --check .",
+    "lint": "npm run lint:js && npm run lint:prettier",
+    "format": "prettier --write --list-different . && npm run lint:js -- --fix",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "type-check": "vue-tsc --noEmit",
+    "ensure-types": "vcmplugin ensure-types"
+  },
+  "author": "author <email>",
+  "license": "GPL-3.0",
+  "overrides": {
+    "esbuild": "^0.25.0",
+    "@zip.js/zip.js": "2.7.68"
+  },
+  "keywords": [
+    "vcmap",
+    "plugin"
+  ],
+  "files": [
+    "src/",
+    "dist/",
+    "plugin-assets/",
+    "LICENSE.md",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": "dist/index.js",
+    "./dist": "./dist/index.js"
+  },
+  "prettier": "@vcsuite/eslint-config/prettier.js",
+  "peerDependencies": {
+    "@vcmap/core": "^6.3.8",
+    "@vcmap/ui": "^6.3.8"
+  },
+  "devDependencies": {
+    "@vcmap/plugin-cli": "^4.2.0",
+    "@vcsuite/eslint-config": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.8",
+    "jest-canvas-mock": "^2.5.2",
+    "jsdom": "^29.1.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.8",
+    "vue-tsc": "^3.3.4"
+  },
+  "mapVersion": "^6.3"
+}

package/src/index.ts

@@ -0,0 +1,61 @@
+import type { VcsPlugin, VcsUiApp, PluginConfigEditor } from '@vcmap/ui';
+import { name, version, mapVersion } from '../package.json';
+import { restoreStateFromLocalStorage, startStateSync } from './stateSync.js';
+
+type PluginConfig = Record<never, never>;
+type PluginState = Record<never, never>;
+
+type StateSyncPlugin = VcsPlugin<PluginConfig, PluginState>;
+
+export default function plugin(): StateSyncPlugin {
+  let stopStateSync: (() => void) | undefined;
+
+  return {
+    get name(): string {
+      return name;
+    },
+    get version(): string {
+      return version;
+    },
+    get mapVersion(): string {
+      return mapVersion;
+    },
+    initialize(vcsUiApp: VcsUiApp): Promise<void> {
+      // must run synchronously, before any module the state applies to is loaded
+      restoreStateFromLocalStorage(vcsUiApp);
+      return Promise.resolve();
+    },
+    onVcsAppMounted(vcsUiApp: VcsUiApp): void {
+      stopStateSync = startStateSync(vcsUiApp);
+    },
+    /**
+     * should return all default values of the configuration
+     */
+    getDefaultOptions(): PluginConfig {
+      return {};
+    },
+    /**
+     * should return the plugin's serialization excluding all default values
+     */
+    toJSON(): PluginConfig {
+      return {};
+    },
+    /**
+     * should return the plugins state
+     * @returns {PluginState}
+     */
+    getState(): PluginState {
+      return {};
+    },
+    /**
+     * components for configuring the plugin and/ or custom items defined by the plugin
+     */
+    getConfigEditors(): PluginConfigEditor<object>[] {
+      return [];
+    },
+    destroy(): void {
+      stopStateSync?.();
+      stopStateSync = undefined;
+    },
+  };
+}

package/src/stateSync.ts

@@ -0,0 +1,349 @@
+import type {
+  VcsEvent,
+  VcsMap,
+  VcsModule,
+  ViewpointOptions,
+} from '@vcmap/core';
+import type { AppState, VcsUiApp } from '@vcmap/ui';
+import {
+  getFromLocalStorage,
+  removeFromLocalStorage,
+  setToLocalStorage,
+} from '@vcmap/ui';
+import { name } from '../package.json';
+
+/** localStorage key, prefixed by the plugin name: `${name}_${STATE_KEY}` */
+export const STATE_KEY = 'state';
+
+const PERSIST_THROTTLE_MS = 1000;
+
+// the cached app state is a soft-private member of VcsUiApp, applied module by
+// module while modules are loading — the same mechanism as the state URL parameter
+/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
+type CachedStateContainer = { _cachedAppState?: AppState };
+
+function hasCachedAppState(app: VcsUiApp): boolean {
+  return '_cachedAppState' in (app as unknown as CachedStateContainer);
+}
+
+export function getCachedAppState(app: VcsUiApp): AppState | undefined {
+  return (app as unknown as CachedStateContainer)._cachedAppState;
+}
+
+export function setCachedAppState(app: VcsUiApp, state: AppState): void {
+  (app as unknown as CachedStateContainer)._cachedAppState = state;
+}
+/* eslint-enable no-underscore-dangle, @typescript-eslint/naming-convention */
+
+function isAppState(value: unknown): value is AppState {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+  const state = value as Partial<AppState>;
+  return (
+    Array.isArray(state.moduleIds) &&
+    state.moduleIds.every((id) => typeof id === 'string') &&
+    Array.isArray(state.layers) &&
+    state.layers.every(
+      (layer) =>
+        typeof layer === 'object' &&
+        layer !== null &&
+        typeof layer.name === 'string' &&
+        typeof layer.active === 'boolean',
+    ) &&
+    Array.isArray(state.plugins) &&
+    Array.isArray(state.clippingPolygons) &&
+    (state.activeMap === undefined || typeof state.activeMap === 'string') &&
+    (state.activeObliqueCollection === undefined ||
+      typeof state.activeObliqueCollection === 'string') &&
+    (state.activeViewpoint === undefined ||
+      (typeof state.activeViewpoint === 'object' &&
+        state.activeViewpoint !== null))
+  );
+}
+
+// the active viewpoint is read from the live camera on every getState call.
+// It is volatile in two ways: it gets a fresh uuid `name` each call, and its
+// floating point values jitter in their last digits frame to frame. Dropping
+// the name and rounding the numbers keeps an idle camera serializing
+// identically, so a re-render alone does not trigger a write — coordinates to
+// ~1cm, angles to ~0.001°.
+const COORDINATE_DECIMALS = 7;
+const HEIGHT_DECIMALS = 2;
+const ANGLE_DECIMALS = 3;
+
+function roundTo(value: number, decimals: number): number {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+
+function roundCoordinate(coordinate: number[]): number[] {
+  return coordinate.map((value, index) =>
+    roundTo(value, index < 2 ? COORDINATE_DECIMALS : HEIGHT_DECIMALS),
+  );
+}
+
+/**
+ * Returns a copy of the viewpoint without its volatile uuid name and with its
+ * numbers rounded, so an unchanged view yields a stable serialization.
+ */
+export function normalizeViewpoint(
+  viewpoint: ViewpointOptions,
+): ViewpointOptions {
+  const normalized = { ...viewpoint };
+  // a camera-derived viewpoint gets a fresh uuid name on every read
+  delete normalized.name;
+  if (Array.isArray(viewpoint.cameraPosition)) {
+    normalized.cameraPosition = roundCoordinate(viewpoint.cameraPosition);
+  }
+  if (Array.isArray(viewpoint.groundPosition)) {
+    normalized.groundPosition = roundCoordinate(viewpoint.groundPosition);
+  }
+  if (typeof viewpoint.distance === 'number') {
+    normalized.distance = roundTo(viewpoint.distance, HEIGHT_DECIMALS);
+  }
+  if (typeof viewpoint.heading === 'number') {
+    normalized.heading = roundTo(viewpoint.heading, ANGLE_DECIMALS);
+  }
+  if (typeof viewpoint.pitch === 'number') {
+    normalized.pitch = roundTo(viewpoint.pitch, ANGLE_DECIMALS);
+  }
+  if (typeof viewpoint.roll === 'number') {
+    normalized.roll = roundTo(viewpoint.roll, ANGLE_DECIMALS);
+  }
+  return normalized;
+}
+
+/**
+ * Returns a copy of the state with the active viewpoint normalized, so an
+ * unchanged view yields a stable serialization for change detection.
+ */
+export function normalizeState(state: AppState): AppState {
+  if (!state.activeViewpoint) {
+    return state;
+  }
+  return {
+    ...state,
+    activeViewpoint: normalizeViewpoint(state.activeViewpoint),
+  };
+}
+
+export function readStoredState(): AppState | undefined {
+  const json = getFromLocalStorage(name, STATE_KEY);
+  if (!json) {
+    return undefined;
+  }
+  try {
+    const parsed: unknown = JSON.parse(json);
+    if (isAppState(parsed)) {
+      return parsed;
+    }
+  } catch {
+    // invalid JSON, cleaned up below
+  }
+  removeFromLocalStorage(name, STATE_KEY);
+  return undefined;
+}
+
+/**
+ * Restores the app state persisted in a previous session by injecting it into
+ * the app's cached state, which the app applies module by module — the same
+ * mechanism used for the `state` URL parameter. The URL keeps highest
+ * priority: nothing is restored when a `state` URL parameter is present.
+ * Must be called synchronously in the plugin's `initialize`, before any module
+ * the state applies to has finished loading.
+ */
+export function restoreStateFromLocalStorage(app: VcsUiApp): void {
+  if (new URL(window.location.href).searchParams.has('state')) {
+    return;
+  }
+  const stored = readStoredState();
+  if (!stored) {
+    return;
+  }
+  if (!hasCachedAppState(app)) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `${name}: VcsUiApp no longer exposes _cachedAppState, state restore is disabled.`,
+    );
+    return;
+  }
+  if (getCachedAppState(app)?.moduleIds.length) {
+    // a state is already cached (e.g. from the URL), never clobber it
+    return;
+  }
+  setCachedAppState(app, stored);
+}
+
+/**
+ * Returns `current`, with entries from `previous` appended for names that are
+ * not in `current` and no longer exist in the app. Used to keep the persisted
+ * state of layers/clipping polygons that are temporarily absent (e.g. a layer
+ * only available while logged in), so logging out does not drop their state.
+ */
+function preserveAbsentEntries<T extends { name: string }>(
+  current: T[],
+  previous: T[],
+  exists: (name: string) => boolean,
+): T[] {
+  const currentNames = new Set(current.map((entry) => entry.name));
+  const kept = previous.filter(
+    (entry) => !currentNames.has(entry.name) && !exists(entry.name),
+  );
+  return kept.length ? [...current, ...kept] : current;
+}
+
+function getModuleId(module: VcsModule): string {
+  return module._id;
+}
+
+async function readViewpointKey(app: VcsUiApp): Promise<string> {
+  const map = app.maps.activeMap;
+  if (!map) {
+    return '';
+  }
+  try {
+    const viewpoint = await map.getViewpoint();
+    if (viewpoint?.isValid?.()) {
+      return JSON.stringify(normalizeViewpoint(viewpoint.toJSON()));
+    }
+  } catch {
+    // ignore: no valid viewpoint yet
+  }
+  return '';
+}
+
+/**
+ * Continuously persists the app state to the localStorage, throttled to one
+ * write per second. Returns a dispose function removing all listeners.
+ *
+ * The map fires postRender every frame, but a full `getState()` is expensive
+ * (it scans every layer and module) and is only meaningful when something
+ * changed. So a render only triggers a cheap viewpoint read; the full
+ * `getState()` runs only when the view actually moved or a discrete event
+ * (layer/clipping polygon/map change) requested it.
+ *
+ * State is also preserved across a module reload (e.g. the themesync plugin
+ * removing and re-adding its module on login/logout): when a module is removed,
+ * the last known layer/clipping-polygon states are re-seeded into the app's
+ * cached state, so the re-added module re-applies them. Entries for layers that
+ * are temporarily absent (only available while logged in) are kept in the
+ * persisted state instead of being dropped.
+ */
+export function startStateSync(app: VcsUiApp): () => void {
+  let lastWritten: string | undefined;
+  let lastViewpointKey: string | undefined;
+  let forced = false;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  // last persisted state, used both as the merge baseline and to re-seed the
+  // cached state on a module reload. Initialised from the stored state so a
+  // reload that happens before the first persist is still covered.
+  let lastState: AppState | undefined = readStoredState();
+
+  async function tick(): Promise<void> {
+    timer = undefined;
+    const viewpointKey = await readViewpointKey(app);
+    const viewpointChanged = viewpointKey !== lastViewpointKey;
+    lastViewpointKey = viewpointKey;
+    if (!forced && !viewpointChanged) {
+      return;
+    }
+    forced = false;
+    try {
+      const state = await app.getState(true);
+      if (lastState) {
+        state.layers = preserveAbsentEntries(
+          state.layers,
+          lastState.layers,
+          (layerName) => !!app.layers.getByKey(layerName),
+        );
+        state.clippingPolygons = preserveAbsentEntries(
+          state.clippingPolygons,
+          lastState.clippingPolygons,
+          (polygonName) => !!app.clippingPolygons.getByKey(polygonName),
+        );
+      }
+      const normalized = normalizeState(state);
+      const json = JSON.stringify(normalized);
+      if (json !== lastWritten) {
+        setToLocalStorage(name, STATE_KEY, json);
+        lastWritten = json;
+      }
+      lastState = normalized;
+    } catch {
+      // getState throws as long as no map is active yet
+    }
+  }
+
+  // Re-seed the cached state before a removed module is re-added, so the app
+  // re-applies the layer and clipping-polygon states through its own startup
+  // mechanism. Layers/polygons that no longer exist are skipped by the app.
+  // Viewpoint and active map are intentionally omitted: a module reload does
+  // not move the camera, and re-applying them could cause a jump.
+  function seedReloadState(removedModule: VcsModule): void {
+    if (!lastState) {
+      return;
+    }
+    const moduleId = getModuleId(removedModule);
+    if (moduleId === app.dynamicModuleId) {
+      return;
+    }
+    setCachedAppState(app, {
+      moduleIds: [moduleId],
+      layers: lastState.layers.map((layer) => ({ ...layer })),
+      clippingPolygons: lastState.clippingPolygons.map((polygon) => ({
+        ...polygon,
+      })),
+      plugins: [],
+    });
+  }
+
+  function schedule(): void {
+    if (!timer) {
+      timer = setTimeout(() => {
+        tick().catch(() => {});
+      }, PERSIST_THROTTLE_MS);
+    }
+  }
+
+  function scheduleForced(): void {
+    forced = true;
+    schedule();
+  }
+
+  let postRenderListener: (() => void) | undefined;
+  function bindPostRender(map: VcsMap | null): void {
+    postRenderListener?.();
+    postRenderListener = map?.postRender.addEventListener(schedule);
+  }
+  bindPostRender(app.maps.activeMap);
+
+  // typed as a plain OverrideCollection on VcsApp, but the underlying
+  // ClippingPolygonObjectCollection raises stateChanged
+  const clippingPolygonsStateChanged = (
+    app.clippingPolygons as unknown as {
+      stateChanged?: VcsEvent<unknown>;
+    }
+  ).stateChanged;
+
+  const listeners = [
+    app.layers.stateChanged.addEventListener(scheduleForced),
+    clippingPolygonsStateChanged?.addEventListener(scheduleForced),
+    app.maps.mapActivated.addEventListener((map) => {
+      bindPostRender(map);
+      scheduleForced();
+    }),
+    app.moduleRemoved.addEventListener(seedReloadState),
+  ].filter((listener) => !!listener);
+
+  return () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    bindPostRender(null);
+    listeners.forEach((unlisten) => {
+      unlisten();
+    });
+  };
+}