@tileflow/vue 0.1.0-alpha.27 → 0.1.0-alpha.29

package/README.md

@@ -88,12 +88,25 @@ Omitting `theme` uses `defaultTheme`. `system` needs the map's explicit light/da
 Streets supplies. Switching themes preserves the map, camera, and interactions, with rollback on
 failure. Listen to `themeChange` for transitions.
 
+Add `time-of-day="dusk"` beside `theme` to select a map's optional `day`, `dawn`, `dusk`, or
+`night` preset. For Streets, `theme="light"` with this preset selects the existing `dusk` palette.
+Maps without this capability ignore the option; omitting it keeps the selected theme unchanged.
+Changing it uses the existing theme transition. `themeBlend` takes precedence. See the
+[authoring contract](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.md#style-with-themes-and-semantic-modules).
+
 `:theme-transition="{duration: 450}"` cross-fades theme changes over that many milliseconds.
 `: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).
 
+Interactive maps automatically render the map's vegetation. `vegetation` overrides visibility
+(omitting it uses the map default); false hides models and flat artwork alike. `viewMode` is `2d`
+by default and may be `3d`: only maps with `vegetation.mode: 'auto'` switch representation.
+Streets uses model trees in either view. Changing either prop updates the existing map immediately.
+These props do not change camera pitch, buildings or lighting and do not apply in image mode. See
+[vegetation controls](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/trees-3d.md#visibility-and-representation).
+
 `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
 selects a Tileflow map through its manifest; it has no renderer discriminator or direct-style mode.

package/dist/index.d.ts

@@ -1,17 +1,20 @@
 import { MapOptions, Map } from 'maplibre-gl';
 import { DefineComponent, VNodeChild } from 'vue';
-import { TileflowThemeTransitionOptions, TileflowThemeTransition } from '@tileflow/core/browser';
-import { TileflowRuntimeSource, TileflowThemeSelection, TileflowThemeBlendSelection, TileflowAnalytics } from '@tileflow/core/runtime';
+import { TileflowBrowserThemeBlendSelection, TileflowThemeTransitionOptions, TileflowViewMode, TileflowThemeTransition } from '@tileflow/core/browser';
+import { TileflowRuntimeSource, TileflowThemeSelection, TileflowTimeOfDay, TileflowAnalytics } from '@tileflow/core/runtime';
 import { TileflowAnnotation, TileflowInteractionJsonValue, TileflowInteractionState, TileflowInteractionBinding, TileflowInteractionDiagnostic, TileflowInteractionEvent, TileflowAnnotationViewContext, TileflowInteractionViewContext } from '@tileflow/interactions';
 
 type TileflowMapStyleSourceProps = {
     source: TileflowRuntimeSource;
     theme?: TileflowThemeSelection;
+    /** Optional artistic preset; ignored by maps without this capability. */
+    timeOfDay?: TileflowTimeOfDay;
     /**
      * Shows a continuous blend of the map's themes instead of `theme`. Moving `position` changes the
-     * map at once; changing `themes` prepares a new blend.
+     * map at once; changing `themes` prepares a new blend. `hold` keeps labels, icons, and mixed
+     * artwork back during a camera move; clearing it brings them in at once.
      */
-    themeBlend?: TileflowThemeBlendSelection;
+    themeBlend?: TileflowBrowserThemeBlendSelection;
     /** Cross-fades theme changes, including entering and leaving a blend. */
     themeTransition?: TileflowThemeTransitionOptions;
 };
@@ -33,6 +36,8 @@ type TileflowMapSlots<TAnnotation extends TileflowAnnotation = TileflowAnnotatio
     tooltip?: (context: TileflowMapInteractionSlotContext<TAnnotation>) => VNodeChild;
 };
 type TileflowMapSharedProps = {
+    vegetation?: boolean;
+    viewMode?: TileflowViewMode;
     alt?: string;
     analytics?: TileflowAnalytics;
     center?: [number, number];

package/dist/index.js

@@ -19,6 +19,7 @@ import {
   attachTileflowMapLifecycle,
   createTileflowSessionStarter,
   createTileflowThemeController,
+  createTileflowVegetation,
   createTileflowTransformRequest,
   getTileflowSystemColorScheme,
   loadTileflowStyleFonts,
@@ -160,8 +161,11 @@ function configureTileflowMapLibreModule(maplibregl) {
 
 // src/style-source.ts
 import {
+  validateTileflowBrowserThemeBlendSelection
+} from "@tileflow/core/browser";
+import {
+  isTileflowTimeOfDay,
   validateTileflowRuntimeSource,
-  validateTileflowThemeBlendSelection,
   validateTileflowThemeSelection
 } from "@tileflow/core/runtime";
 function validateTileflowMapStyleInputs(input) {
@@ -170,9 +174,12 @@ function validateTileflowMapStyleInputs(input) {
   if (input.theme !== void 0 && !validateTileflowThemeSelection(input.theme)) {
     return { error: 'theme must be a concrete portable theme name or "system"', ok: false };
   }
-  if (input.themeBlend !== void 0 && !validateTileflowThemeBlendSelection(input.themeBlend)) {
+  if (input.timeOfDay !== void 0 && !isTileflowTimeOfDay(input.timeOfDay)) {
+    return { error: "timeOfDay must be day, dawn, dusk, or night", ok: false };
+  }
+  if (input.themeBlend !== void 0 && !validateTileflowBrowserThemeBlendSelection(input.themeBlend)) {
     return {
-      error: "themeBlend must name two to eight concrete themes and a position from 0 to themes.length - 1",
+      error: "themeBlend must name two to eight concrete themes, a position from 0 to themes.length - 1, and an optional boolean hold",
       ok: false
     };
   }
@@ -236,7 +243,10 @@ var TileflowMap = defineComponent({
       required: true,
       type: Object
     },
+    vegetation: { type: Boolean, default: void 0 },
+    viewMode: { type: String, default: "2d" },
     theme: String,
+    timeOfDay: String,
     themeBlend: Object,
     themeTransition: Object,
     zoom: Number
@@ -286,6 +296,7 @@ var TileflowMap = defineComponent({
     let mapLifecycle = null;
     let mapResizeObserver = null;
     let mapWorldRequestBridge = null;
+    let vegetationController = null;
     let themeController = null;
     let unsubscribeSystemColorScheme = null;
     let mapLoadId = 0;
@@ -375,7 +386,12 @@ var TileflowMap = defineComponent({
         }
         return {
           error: false,
-          name: resolveTileflowRuntimeTheme(manifestMap.value, selection, systemColorScheme.value).name
+          name: resolveTileflowRuntimeTheme(
+            manifestMap.value,
+            selection,
+            systemColorScheme.value,
+            props.themeBlend ? void 0 : props.timeOfDay
+          ).name
         };
       } catch {
         return { error: true, name: void 0 };
@@ -557,6 +573,7 @@ var TileflowMap = defineComponent({
       assertTileflowMapStyleInputs({
         source: props.source,
         theme: props.theme,
+        timeOfDay: props.timeOfDay,
         themeBlend: props.themeBlend,
         themeTransition: props.themeTransition
       });
@@ -610,6 +627,13 @@ var TileflowMap = defineComponent({
       imageResizeObserver.observe(element);
       updateImageSize();
     };
+    watch(
+      () => [props.vegetation, props.viewMode],
+      ([visible, viewMode]) => {
+        vegetationController?.setVisible(visible);
+        vegetationController?.setViewMode(viewMode ?? "2d");
+      }
+    );
     const destroyMap = () => {
       mapLoadId += 1;
       readinessRunId += 1;
@@ -619,6 +643,8 @@ var TileflowMap = defineComponent({
       const resizeObserver = mapResizeObserver;
       const map = mapRef.value;
       const controller = themeController;
+      const vegetation = vegetationController;
+      vegetationController = null;
       const annotationInteractionsForMap = annotationRuntime;
       const semanticInteractionsForMap = semanticRuntime;
       const worldRequestBridge = mapWorldRequestBridge;
@@ -636,6 +662,7 @@ var TileflowMap = defineComponent({
         () => worldRequestBridge?.dispose(),
         () => fairUseNotice?.dispose(),
         () => lifecycle?.dispose(),
+        () => vegetation?.dispose(),
         () => controller?.dispose(),
         () => resizeObserver?.disconnect(),
         () => map?.remove()
@@ -800,6 +827,21 @@ var TileflowMap = defineComponent({
           }
         }
       });
+      vegetationController = createTileflowVegetation({
+        map,
+        ...themeController ? { controller: themeController } : {},
+        visible: props.vegetation,
+        viewMode: props.viewMode ?? "2d",
+        transformRequest: createTileflowTransformRequest({
+          getAnalytics: () => resolvedAnalytics.value,
+          sessionController: session,
+          sessionId: session.sessionId,
+          transformRequest: (url) => props.mapOptions?.transformRequest?.(
+            url,
+            "Tile"
+          )
+        })
+      });
       try {
         const mapInteractions = createTileflowMapLibreDomRuntime({
           createMarker({ annotation, element }) {
@@ -936,9 +978,10 @@ var TileflowMap = defineComponent({
     const switchBlend = () => {
       const themes = blendStyles.value;
       const position = props.themeBlend?.position;
+      const hold = props.themeBlend?.hold === true;
       if (!themeController || !themes || position === void 0) return;
       if (runtimeStyle.value) activeRuntimeResource.value = runtimeStyle.value;
-      void themeController.setBlend({ position, themes }, { transition: props.themeTransition }).then((result) => {
+      void themeController.setBlend({ hold, position, themes }, { transition: props.themeTransition }).then((result) => {
         if (result.status === "failed") {
           console.error("Failed to blend the Tileflow map themes", result.error);
         }
@@ -1045,7 +1088,7 @@ var TileflowMap = defineComponent({
       { flush: "post" }
     );
     watch(
-      () => [blendStyles.value, props.themeBlend?.position],
+      () => [blendStyles.value, props.themeBlend?.position, props.themeBlend?.hold === true],
       () => switchBlend(),
       { flush: "post" }
     );
@@ -1062,14 +1105,7 @@ var TileflowMap = defineComponent({
       { flush: "post" }
     );
     watch(
-      () => [
-        props.analytics,
-        props.interactive,
-        props.mapOptions,
-        props.mode,
-        props.source,
-        manifestMap.value
-      ],
+      () => [props.interactive, props.mapOptions, props.mode, props.source, manifestMap.value],
       () => void recreateMap(),
       { flush: "post" }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/vue",
-  "version": "0.1.0-alpha.27",
+  "version": "0.1.0-alpha.29",
   "license": "Apache-2.0",
   "description": "Vue component for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -38,18 +38,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.30 <0.1.0-beta.0",
-    "@tileflow/interactions": ">=0.1.0-alpha.4 <0.1.0-beta.0"
+    "@tileflow/core": ">=0.1.0-alpha.35 <0.1.0-beta.0",
+    "@tileflow/interactions": ">=0.1.0-alpha.5 <0.1.0-beta.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=6.4.1 <7",
     "vue": ">=3.3 <4"
   },
   "devDependencies": {
-    "@vue/server-renderer": "3.5.39",
-    "maplibre-gl": "6.9.0",
-    "tsx": "^4.23.12",
-    "vue": "^3.5.26"
+    "@vue/server-renderer": "3.5.43",
+    "maplibre-gl": "6.13.0",
+    "tsx": "^4.23.15",
+    "vue": "^3.5.43"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean --external vue --external maplibre-gl",