@tileflow/vue 0.1.0-alpha.33 → 0.1.0-alpha.35

package/README.md

@@ -16,6 +16,12 @@ npm install @tileflow/vue@alpha @tileflow/core@alpha @tileflow/maps@alpha "mapli
 npm install --save-dev --save-exact tileflow@alpha
 ```
 
+Prepared styles may retain relative asset URLs. The component loads them through Core's shared
+resource loader before creating the map and before changing or blending themes. Sprites, fonts,
+data and model resources resolve against their declaring documents. Pending document loads are
+cancelled when the map is replaced or unmounted; `mapOptions.transformRequest` also applies to
+style and HTTP TileJSON requests.
+
 ## Prepare a map
 
 Create `tileflow.config.ts` at the application root:
@@ -99,7 +105,7 @@ Theme and `time-of-day` changes cross-fade over 450 ms by default, respecting re
 `:theme-blend="{themes: ['night', 'dusk', 'day'], position}"` shows a continuous blend of the
 map's themes instead of `theme`: position 0 is the first theme and 1.5 is halfway from the second to
 the third. Moving the position updates the map at once. See
-[theme transitions and blends](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/theme-transitions-and-blends.md).
+[theme transitions and blends](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.md).
 
 Interactive maps show the 3D scene their style declares by default: buildings with Tileflow
 landmarks and the map's Team building models, 3D trees, and street lights where the map enables
@@ -109,8 +115,8 @@ draws vegetation as the map's policy sets for the 2D view (Streets keeps its mod
 view). `vegetation` overrides vegetation visibility (omitting it uses the map default); `:vegetation="false"`
 hides models and flat artwork alike. Changing either prop updates the existing map immediately.
 They do not change camera pitch and do not apply in image mode. See
-[the map's 3D scene](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/buildings-3d.md#the-maps-3d-scene)
-and [vegetation controls](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/trees-3d.md#visibility-and-representation).
+[the map's 3D scene](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.md)
+and [vegetation controls](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.md).
 
 `mapOptions` accepts native MapLibre options except `container` and `style`. Direct props take
 priority over those options, then the published view, then shared defaults. `TileflowMap` always
@@ -216,5 +222,5 @@ Direct World maps can show owner-action notices when managed delivery is require
 image path remain SSR-safe; interactive rendering needs a browser with WebGL.
 
 See the [interaction guide](https://github.com/tileflow/tileflow-sdk/blob/main/packages/interactions/README.md)
-and [browser runtime contract](https://github.com/tileflow/tileflow-sdk/blob/main/docs/contracts/framework-browser-runtime.md).
+and [browser runtime contract](https://github.com/tileflow/tileflow-sdk/blob/main/README.md).
 Use the installed package's declarations and README for a release; `main` can include newer changes.

package/dist/index.js

@@ -16,6 +16,7 @@ import {
 import {
   attachTileflowAtmosphere,
   attachTileflowFairUseNotice,
+  attachTileflowHorizonQueries,
   attachTileflowLabelPlacement,
   attachTileflowMap3D,
   attachTileflowMapLifecycle,
@@ -25,8 +26,10 @@ import {
   createTileflowThemeController,
   createTileflowTransformRequest,
   getTileflowSystemColorScheme,
+  loadTileflowRuntimeStyle,
   loadTileflowStyleFonts,
   registerTileflowContourProtocol,
+  registerTileflowPathGroundProtocol,
   registerTileflowPmtilesProtocol,
   registerTileflowWorldRequestBridge,
   subscribeTileflowSystemColorScheme,
@@ -305,6 +308,7 @@ var TileflowMap = defineComponent({
     let themeController = null;
     let unsubscribeSystemColorScheme = null;
     let mapLoadId = 0;
+    let resourceLifetime;
     let manifestLoadId = 0;
     let readinessRunId = 0;
     let interactionReadinessRunId = 0;
@@ -641,6 +645,8 @@ var TileflowMap = defineComponent({
     );
     const destroyMap = () => {
       mapLoadId += 1;
+      resourceLifetime?.abort();
+      resourceLifetime = void 0;
       readinessRunId += 1;
       invalidateInteractionReadiness();
       const lifecycle = mapLifecycle;
@@ -765,16 +771,35 @@ var TileflowMap = defineComponent({
       const loadId = mapLoadId;
       const container = containerRef.value;
       const runtime = runtimeStyle.value;
+      const session = createTileflowSessionController({ source: "vue" });
+      const lifetime = new AbortController();
+      resourceLifetime = lifetime;
+      const resourceTransform = createTileflowTransformRequest({
+        getAnalytics: () => resolvedAnalytics.value,
+        sessionController: session,
+        sessionId: session.sessionId,
+        transformRequest: props.mapOptions?.transformRequest ?? void 0
+      });
+      const styleLoadOptions = {
+        signal: lifetime.signal,
+        transformRequest: (url, type) => resourceTransform(
+          url,
+          type
+        )
+      };
       let maplibregl;
+      let prepared;
       try {
-        [maplibregl] = await Promise.all([
+        [maplibregl, prepared] = await Promise.all([
           loadTileflowMapLibre(),
-          loadTileflowStyleFonts(runtime.style, {
-            fontFaces: runtime.fontFaces
+          loadTileflowRuntimeStyle(runtime, styleLoadOptions).then(async (loaded) => {
+            await loadTileflowStyleFonts(loaded.style, { fontFaces: loaded.fontFaces });
+            return loaded;
           })
         ]);
       } catch (error) {
         if (loadId === mapLoadId) {
+          lifetime.abort();
           console.error("Failed to load the Tileflow map runtime", error);
           mapCaptureState.value = "error";
         }
@@ -783,7 +808,6 @@ var TileflowMap = defineComponent({
       if (loadId !== mapLoadId || containerRef.value !== container || isImageMode.value) {
         return;
       }
-      const session = createTileflowSessionController({ source: "vue" });
       const sessionStarter = createTileflowSessionStarter({
         getSessionId: () => session.sessionId,
         sessionId: session.sessionId,
@@ -791,6 +815,7 @@ var TileflowMap = defineComponent({
       });
       mapFairUseNotice = attachTileflowFairUseNotice(container);
       registerTileflowContourProtocol({ addProtocol: maplibregl.addProtocol });
+      registerTileflowPathGroundProtocol({ addProtocol: maplibregl.addProtocol });
       registerTileflowPmtilesProtocol({ addProtocol: maplibregl.addProtocol });
       mapWorldRequestBridge = registerTileflowWorldRequestBridge({
         addProtocol: maplibregl.addProtocol,
@@ -812,7 +837,7 @@ var TileflowMap = defineComponent({
         container,
         interactive: resolvedInteractive.value,
         pitch: resolvedPitch.value,
-        style: runtime.style,
+        style: prepared.style,
         transformRequest: createTileflowTransformRequest({
           getAnalytics: () => resolvedAnalytics.value,
           sessionController: session,
@@ -827,8 +852,11 @@ var TileflowMap = defineComponent({
       attachTileflowNotices(map);
       attachTileflowNauticalLights(map);
       attachTileflowLabelPlacement(map);
+      attachTileflowHorizonQueries(map);
       themeController = runtime.theme === void 0 ? null : createTileflowThemeController({
-        initial: runtime,
+        initial: prepared.family ? prepared : runtime,
+        initialStyle: prepared.style,
+        styleLoadOptions,
         map,
         onTransition(transition) {
           emit("themeChange", transition);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/vue",
-  "version": "0.1.0-alpha.33",
+  "version": "0.1.0-alpha.35",
   "license": "Apache-2.0",
   "description": "Vue component for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -38,8 +38,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.40 <0.1.0-beta.0",
-    "@tileflow/interactions": ">=0.1.0-alpha.6 <0.1.0-beta.0"
+    "@tileflow/core": ">=0.1.0-alpha.45 <0.1.0-beta.0",
+    "@tileflow/interactions": ">=0.1.0-alpha.7 <0.1.0-beta.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=6.4.1 <7",
@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@vue/server-renderer": "3.5.43",
-    "maplibre-gl": "6.13.0",
+    "maplibre-gl": "6.16.0",
     "tsx": "^4.23.15",
     "vue": "^3.5.43"
   },