@tileflow/vue 0.1.0-alpha.28 → 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,12 +1,14 @@
 import { MapOptions, Map } from 'maplibre-gl';
 import { DefineComponent, VNodeChild } from 'vue';
-import { TileflowBrowserThemeBlendSelection, TileflowThemeTransitionOptions, TileflowThemeTransition } from '@tileflow/core/browser';
-import { TileflowRuntimeSource, TileflowThemeSelection, 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. `hold` keeps labels, icons, and mixed
@@ -34,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,
@@ -163,6 +164,7 @@ import {
   validateTileflowBrowserThemeBlendSelection
 } from "@tileflow/core/browser";
 import {
+  isTileflowTimeOfDay,
   validateTileflowRuntimeSource,
   validateTileflowThemeSelection
 } from "@tileflow/core/runtime";
@@ -172,6 +174,9 @@ 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.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, a position from 0 to themes.length - 1, and an optional boolean hold",
@@ -238,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
@@ -288,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;
@@ -377,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 };
@@ -559,6 +573,7 @@ var TileflowMap = defineComponent({
       assertTileflowMapStyleInputs({
         source: props.source,
         theme: props.theme,
+        timeOfDay: props.timeOfDay,
         themeBlend: props.themeBlend,
         themeTransition: props.themeTransition
       });
@@ -612,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;
@@ -621,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;
@@ -638,6 +662,7 @@ var TileflowMap = defineComponent({
         () => worldRequestBridge?.dispose(),
         () => fairUseNotice?.dispose(),
         () => lifecycle?.dispose(),
+        () => vegetation?.dispose(),
         () => controller?.dispose(),
         () => resizeObserver?.disconnect(),
         () => map?.remove()
@@ -802,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 }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/vue",
-  "version": "0.1.0-alpha.28",
+  "version": "0.1.0-alpha.29",
   "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.32 <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",
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@vue/server-renderer": "3.5.43",
     "maplibre-gl": "6.13.0",
-    "tsx": "^4.23.12",
+    "tsx": "^4.23.15",
     "vue": "^3.5.43"
   },
   "scripts": {