@tileflow/react 0.1.0-alpha.28 → 0.1.0-alpha.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.d.ts +5 -4
- package/dist/index.js +9 -8
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -208,7 +208,7 @@ Tileflow credentials on that server, not in React props or a browser bundle.
|
|
|
208
208
|
```tsx
|
|
209
209
|
import {useState} from 'react';
|
|
210
210
|
import {StaticMap} from '@tileflow/react/static';
|
|
211
|
-
import type {StaticMapAttributionEntry} from '@tileflow/static';
|
|
211
|
+
import type {StaticMapAttributionEntry} from '@tileflow/static/client';
|
|
212
212
|
|
|
213
213
|
export function StaticPreview({idempotencyKey}: {idempotencyKey: string}) {
|
|
214
214
|
const [entries, setEntries] = useState<readonly StaticMapAttributionEntry[]>([]);
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { CSSProperties, ImgHTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
import { MapOptions, Map as Map$1 } from 'maplibre-gl';
|
|
4
|
-
import { TileflowThemeTransitionOptions, TileflowThemeTransition } from '@tileflow/core/browser';
|
|
5
|
-
import { TileflowRuntimeSource, TileflowThemeSelection,
|
|
4
|
+
import { TileflowBrowserThemeBlendSelection, TileflowThemeTransitionOptions, TileflowThemeTransition } from '@tileflow/core/browser';
|
|
5
|
+
import { TileflowRuntimeSource, TileflowThemeSelection, TileflowAnalytics } from '@tileflow/core/runtime';
|
|
6
6
|
import { TileflowAnnotation, TileflowInteractionState, TileflowAnnotationViewContext, TileflowInteractionBinding, TileflowInteractionViewContext, TileflowInteractionDiagnostic, TileflowInteractionEvent } from '@tileflow/interactions';
|
|
7
7
|
|
|
8
8
|
type TileflowMapStyleSourceProps = {
|
|
@@ -10,9 +10,10 @@ type TileflowMapStyleSourceProps = {
|
|
|
10
10
|
theme?: TileflowThemeSelection;
|
|
11
11
|
/**
|
|
12
12
|
* Shows a continuous blend of the map's themes instead of `theme`. Moving `position` changes the
|
|
13
|
-
* map at once; changing `themes` prepares a new blend.
|
|
13
|
+
* map at once; changing `themes` prepares a new blend. `hold` keeps labels, icons, and mixed
|
|
14
|
+
* artwork back during a camera move; clearing it brings them in at once.
|
|
14
15
|
*/
|
|
15
|
-
themeBlend?:
|
|
16
|
+
themeBlend?: TileflowBrowserThemeBlendSelection;
|
|
16
17
|
/** Cross-fades theme changes, including entering and leaving a blend. */
|
|
17
18
|
themeTransition?: TileflowThemeTransitionOptions;
|
|
18
19
|
};
|
package/dist/index.js
CHANGED
|
@@ -167,9 +167,11 @@ function prepareTileflowReactInteractionState(interactionState, defaultInteracti
|
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
// src/map-style-inputs.ts
|
|
170
|
+
import {
|
|
171
|
+
validateTileflowBrowserThemeBlendSelection
|
|
172
|
+
} from "@tileflow/core/browser";
|
|
170
173
|
import {
|
|
171
174
|
validateTileflowRuntimeSource,
|
|
172
|
-
validateTileflowThemeBlendSelection,
|
|
173
175
|
validateTileflowThemeSelection
|
|
174
176
|
} from "@tileflow/core/runtime";
|
|
175
177
|
function validateTileflowMapStyleInputs(input) {
|
|
@@ -178,9 +180,9 @@ function validateTileflowMapStyleInputs(input) {
|
|
|
178
180
|
if (input.theme !== void 0 && !validateTileflowThemeSelection(input.theme)) {
|
|
179
181
|
return { error: 'theme must be a concrete portable theme name or "system"', ok: false };
|
|
180
182
|
}
|
|
181
|
-
if (input.themeBlend !== void 0 && !
|
|
183
|
+
if (input.themeBlend !== void 0 && !validateTileflowBrowserThemeBlendSelection(input.themeBlend)) {
|
|
182
184
|
return {
|
|
183
|
-
error: "themeBlend must name two to eight concrete themes
|
|
185
|
+
error: "themeBlend must name two to eight concrete themes, a position from 0 to themes.length - 1, and an optional boolean hold",
|
|
184
186
|
ok: false
|
|
185
187
|
};
|
|
186
188
|
}
|
|
@@ -350,6 +352,7 @@ function Map2(props) {
|
|
|
350
352
|
const manifestMap = currentManifestResolution.state === "ready" ? currentManifestResolution.map : null;
|
|
351
353
|
const themeBlendKey = themeBlend ? JSON.stringify(themeBlend.themes) : void 0;
|
|
352
354
|
const themeBlendPosition = themeBlend?.position;
|
|
355
|
+
const themeBlendHold = themeBlend?.hold === true;
|
|
353
356
|
const blendThemeName = themeBlend ? nearestTileflowBlendTheme(themeBlend) : void 0;
|
|
354
357
|
const themeResolution = useMemo(() => {
|
|
355
358
|
const selection = blendThemeName ?? theme;
|
|
@@ -524,7 +527,7 @@ function Map2(props) {
|
|
|
524
527
|
}
|
|
525
528
|
}, [isImageMode, manifestMap, runtimeSource, themeBlendKey]);
|
|
526
529
|
const blendRequestRef = useRef(null);
|
|
527
|
-
blendRequestRef.current = blendStyles && themeBlendPosition !== void 0 ? { position: themeBlendPosition, themes: blendStyles } : null;
|
|
530
|
+
blendRequestRef.current = blendStyles && themeBlendPosition !== void 0 ? { hold: themeBlendHold, position: themeBlendPosition, themes: blendStyles } : null;
|
|
528
531
|
const themeTransitionRef = useRef(themeTransition);
|
|
529
532
|
themeTransitionRef.current = themeTransition;
|
|
530
533
|
const runtimeMapIdentity = `${manifestUrl}\0${runtimeSource.map}`;
|
|
@@ -745,8 +748,6 @@ function Map2(props) {
|
|
|
745
748
|
});
|
|
746
749
|
registerCleanup(() => worldRequestBridge.dispose());
|
|
747
750
|
const transformRequest = createTileflowTransformRequest({
|
|
748
|
-
always: true,
|
|
749
|
-
asyncAnalyticsTiming: "resolution",
|
|
750
751
|
getAnalytics: () => resolvedAnalyticsRef.current,
|
|
751
752
|
sessionController: session,
|
|
752
753
|
sessionId: session.sessionId,
|
|
@@ -1017,14 +1018,14 @@ function Map2(props) {
|
|
|
1017
1018
|
if (!controller || !blendStyles || themeBlendPosition === void 0) return;
|
|
1018
1019
|
if (runtimeStyle) setActiveRuntimeResource(runtimeStyle);
|
|
1019
1020
|
void controller.setBlend(
|
|
1020
|
-
{ position: themeBlendPosition, themes: blendStyles },
|
|
1021
|
+
{ hold: themeBlendHold, position: themeBlendPosition, themes: blendStyles },
|
|
1021
1022
|
{ transition: themeTransitionRef.current }
|
|
1022
1023
|
).then((result) => {
|
|
1023
1024
|
if (result.status === "failed") {
|
|
1024
1025
|
console.error("Failed to blend the Tileflow map themes", result.error);
|
|
1025
1026
|
}
|
|
1026
1027
|
});
|
|
1027
|
-
}, [blendStyles, runtimeStyle, themeBlendPosition]);
|
|
1028
|
+
}, [blendStyles, runtimeStyle, themeBlendHold, themeBlendPosition]);
|
|
1028
1029
|
useLayoutEffect(() => {
|
|
1029
1030
|
if (!isImageMode) return;
|
|
1030
1031
|
readinessRunRef.current += 1;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tileflow/react",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.29",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "React components for rendering Tileflow maps with MapLibre.",
|
|
6
6
|
"type": "module",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@tileflow/core": ">=0.1.0-alpha.
|
|
46
|
+
"@tileflow/core": ">=0.1.0-alpha.32 <0.1.0-beta.0",
|
|
47
47
|
"@tileflow/interactions": ">=0.1.0-alpha.4 <0.1.0-beta.0",
|
|
48
|
-
"@tileflow/static": ">=0.1.0-alpha.
|
|
48
|
+
"@tileflow/static": ">=0.1.0-alpha.28 <0.1.0-beta.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"maplibre-gl": ">=6.4.1 <7",
|
|
@@ -53,11 +53,11 @@
|
|
|
53
53
|
"react-dom": ">=18 <20"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@types/react": "^19.
|
|
57
|
-
"@types/react-dom": "^19.
|
|
58
|
-
"maplibre-gl": "6.
|
|
59
|
-
"react": "^19.
|
|
60
|
-
"react-dom": "^19.
|
|
56
|
+
"@types/react": "^19.3.0",
|
|
57
|
+
"@types/react-dom": "^19.3.0",
|
|
58
|
+
"maplibre-gl": "6.13.0",
|
|
59
|
+
"react": "^19.3.0",
|
|
60
|
+
"react-dom": "^19.3.0"
|
|
61
61
|
},
|
|
62
62
|
"scripts": {
|
|
63
63
|
"build": "tsup",
|