zenit-sdk 0.1.7 → 0.1.8
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/dist/{chunk-J2YWF2TS.mjs → chunk-HCGYF65R.mjs} +498 -196
- package/dist/chunk-HCGYF65R.mjs.map +1 -0
- package/dist/{index-CUkyMRmp.d.mts → index-Cp6tg4tg.d.mts} +2 -0
- package/dist/{index-CUkyMRmp.d.ts → index-Cp6tg4tg.d.ts} +2 -0
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +567 -265
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/react/index.d.mts +1 -1
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +567 -265
- package/dist/react/index.js.map +1 -1
- package/dist/react/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-J2YWF2TS.mjs.map +0 -1
|
@@ -456,6 +456,14 @@ var LayerGeoJson = ({
|
|
|
456
456
|
onEachFeature,
|
|
457
457
|
onPolygonLabel
|
|
458
458
|
}) => {
|
|
459
|
+
const styleFnRef = useRef(styleFn);
|
|
460
|
+
const onEachFeatureRef = useRef(onEachFeature);
|
|
461
|
+
useEffect(() => {
|
|
462
|
+
styleFnRef.current = styleFn;
|
|
463
|
+
}, [styleFn]);
|
|
464
|
+
useEffect(() => {
|
|
465
|
+
onEachFeatureRef.current = onEachFeature;
|
|
466
|
+
}, [onEachFeature]);
|
|
459
467
|
const safeData = useMemo(() => sanitizeGeoJson(data, String(layerId)), [data, layerId]);
|
|
460
468
|
const features = useMemo(() => safeData.features ?? [], [safeData]);
|
|
461
469
|
const fillFeatures = useMemo(() => features.filter(isNonPointGeometry), [features]);
|
|
@@ -499,14 +507,14 @@ var LayerGeoJson = ({
|
|
|
499
507
|
if (!isValidLatLng(latlng)) {
|
|
500
508
|
return createInvisibleFallbackClusterMarker();
|
|
501
509
|
}
|
|
502
|
-
const style =
|
|
510
|
+
const style = styleFnRef.current(feature, layerType, baseOpacity);
|
|
503
511
|
return L.marker(latlng, {
|
|
504
512
|
icon: createPointDivIcon(style, isMobile),
|
|
505
513
|
pane: clusterPaneName,
|
|
506
514
|
interactive: true
|
|
507
515
|
});
|
|
508
516
|
},
|
|
509
|
-
onEachFeature
|
|
517
|
+
onEachFeature: (feature, layer) => onEachFeatureRef.current(feature, layer)
|
|
510
518
|
});
|
|
511
519
|
clusterLayer.addLayer(geoJsonLayer);
|
|
512
520
|
return () => {
|
|
@@ -521,11 +529,9 @@ var LayerGeoJson = ({
|
|
|
521
529
|
isMobile,
|
|
522
530
|
layerType,
|
|
523
531
|
mapInstance,
|
|
524
|
-
onEachFeature,
|
|
525
532
|
panesReady,
|
|
526
533
|
pointsData,
|
|
527
|
-
resolvedPointsPane
|
|
528
|
-
styleFn
|
|
534
|
+
resolvedPointsPane
|
|
529
535
|
]);
|
|
530
536
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
531
537
|
fillData && /* @__PURE__ */ jsx(
|
|
@@ -1437,6 +1443,14 @@ function pickIntersectFeature(params) {
|
|
|
1437
1443
|
selectedIdx: candidates.findIndex((candidate) => candidate === feature),
|
|
1438
1444
|
reason
|
|
1439
1445
|
});
|
|
1446
|
+
if (clickIntent === "point") {
|
|
1447
|
+
const anyPoint = candidates.find(
|
|
1448
|
+
(c) => isCandidateGeometryType(c, POINT_GEOMETRY_TYPES2)
|
|
1449
|
+
);
|
|
1450
|
+
if (anyPoint) {
|
|
1451
|
+
return getResult(anyPoint, "point:first-point-geometry");
|
|
1452
|
+
}
|
|
1453
|
+
}
|
|
1440
1454
|
const sameLayer = candidates.filter(
|
|
1441
1455
|
(candidate) => isLayerIdMatch(candidateLayerId(candidate), expectedLayerId)
|
|
1442
1456
|
);
|
|
@@ -1873,7 +1887,7 @@ var ZenitMap = forwardRef(({
|
|
|
1873
1887
|
const ensureLayerPanes = useCallback2(
|
|
1874
1888
|
(targetMap, targetLayers) => {
|
|
1875
1889
|
const fillBaseZIndex = 400;
|
|
1876
|
-
const pointsBaseZIndex =
|
|
1890
|
+
const pointsBaseZIndex = 750;
|
|
1877
1891
|
targetLayers.forEach((layer) => {
|
|
1878
1892
|
const order = Number.isFinite(layer.displayOrder) ? layer.displayOrder : 0;
|
|
1879
1893
|
const orderOffset = Math.max(0, Math.min(order, 150));
|
|
@@ -1957,7 +1971,10 @@ var ZenitMap = forwardRef(({
|
|
|
1957
1971
|
className: "zenit-map-tooltip"
|
|
1958
1972
|
});
|
|
1959
1973
|
}
|
|
1960
|
-
layer.on("click", () => {
|
|
1974
|
+
layer.on("click", (e) => {
|
|
1975
|
+
if (clickIntent === "point") {
|
|
1976
|
+
L4.DomEvent.stopPropagation(e);
|
|
1977
|
+
}
|
|
1961
1978
|
if (featureInfoMode === "popup" && client && layerId !== void 0 && !extractDescriptionValue(feature?.properties) && feature?.geometry) {
|
|
1962
1979
|
if (DEV_MODE2) {
|
|
1963
1980
|
console.debug("[ZenitMap] click/intersect:start", {
|
|
@@ -2057,11 +2074,16 @@ var ZenitMap = forwardRef(({
|
|
|
2057
2074
|
properties: feature?.properties ?? void 0
|
|
2058
2075
|
});
|
|
2059
2076
|
}, [currentZoom, resolveLayerStyle]);
|
|
2060
|
-
const
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2077
|
+
const styleFnByLayerId = useMemo3(() => {
|
|
2078
|
+
const next = /* @__PURE__ */ new Map();
|
|
2079
|
+
orderedLayers.forEach((layerState) => {
|
|
2080
|
+
const layerId = layerState.mapLayer.layerId;
|
|
2081
|
+
next.set(String(layerId), (feature, layerType, baseOpacity) => {
|
|
2082
|
+
return buildLayerStyle(layerId, baseOpacity ?? 1, feature, layerType);
|
|
2083
|
+
});
|
|
2084
|
+
});
|
|
2085
|
+
return next;
|
|
2086
|
+
}, [buildLayerStyle, orderedLayers]);
|
|
2065
2087
|
useImperativeHandle(ref, () => ({
|
|
2066
2088
|
setLayerOpacity: (layerId, opacity) => {
|
|
2067
2089
|
upsertUiOverride(layerId, { overrideOpacity: opacity });
|
|
@@ -2228,7 +2250,7 @@ var ZenitMap = forwardRef(({
|
|
|
2228
2250
|
fillPaneName,
|
|
2229
2251
|
pointsPaneName,
|
|
2230
2252
|
layerType,
|
|
2231
|
-
styleFn:
|
|
2253
|
+
styleFn: styleFnByLayerId.get(String(layerState.mapLayer.layerId)) ?? ((feature, layerType2, baseOpacity2) => buildLayerStyle(layerState.mapLayer.layerId, baseOpacity2 ?? 1, feature, layerType2)),
|
|
2232
2254
|
onEachFeature: overlayOnEachFeature,
|
|
2233
2255
|
onPolygonLabel: labelKey ? (feature, layer) => {
|
|
2234
2256
|
const geometryType = feature?.geometry?.type;
|
|
@@ -2372,7 +2394,7 @@ var ZenitMap = forwardRef(({
|
|
|
2372
2394
|
ZenitMap.displayName = "ZenitMap";
|
|
2373
2395
|
|
|
2374
2396
|
// src/react/ZenitLayerManager.tsx
|
|
2375
|
-
import
|
|
2397
|
+
import React7, { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef6, useState as useState3 } from "react";
|
|
2376
2398
|
|
|
2377
2399
|
// src/react/icons.tsx
|
|
2378
2400
|
import { Eye, EyeOff, ChevronDown, ChevronLeft, ChevronRight, Layers, Upload, X, ZoomIn } from "lucide-react";
|
|
@@ -2730,9 +2752,191 @@ var ZenitSelect = ({
|
|
|
2730
2752
|
] });
|
|
2731
2753
|
};
|
|
2732
2754
|
|
|
2755
|
+
// src/react/ui/ZenitCombobox.tsx
|
|
2756
|
+
import React6 from "react";
|
|
2757
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2758
|
+
var ZenitCombobox = ({
|
|
2759
|
+
options,
|
|
2760
|
+
value,
|
|
2761
|
+
onChange,
|
|
2762
|
+
placeholder = "Seleccionar\u2026",
|
|
2763
|
+
searchPlaceholder = "Buscar\u2026",
|
|
2764
|
+
disabled = false
|
|
2765
|
+
}) => {
|
|
2766
|
+
const rootRef = React6.useRef(null);
|
|
2767
|
+
const [isOpen, setIsOpen] = React6.useState(false);
|
|
2768
|
+
const [query, setQuery] = React6.useState("");
|
|
2769
|
+
const filteredOptions = React6.useMemo(() => {
|
|
2770
|
+
const normalized = query.trim().toLowerCase();
|
|
2771
|
+
if (!normalized) return options;
|
|
2772
|
+
return options.filter((option) => option.toLowerCase().includes(normalized));
|
|
2773
|
+
}, [options, query]);
|
|
2774
|
+
React6.useEffect(() => {
|
|
2775
|
+
if (!isOpen) return;
|
|
2776
|
+
const onClickOutside = (event) => {
|
|
2777
|
+
if (!rootRef.current?.contains(event.target)) {
|
|
2778
|
+
setIsOpen(false);
|
|
2779
|
+
}
|
|
2780
|
+
};
|
|
2781
|
+
const onEscape = (event) => {
|
|
2782
|
+
if (event.key === "Escape") {
|
|
2783
|
+
setIsOpen(false);
|
|
2784
|
+
}
|
|
2785
|
+
};
|
|
2786
|
+
document.addEventListener("mousedown", onClickOutside);
|
|
2787
|
+
document.addEventListener("keydown", onEscape);
|
|
2788
|
+
return () => {
|
|
2789
|
+
document.removeEventListener("mousedown", onClickOutside);
|
|
2790
|
+
document.removeEventListener("keydown", onEscape);
|
|
2791
|
+
};
|
|
2792
|
+
}, [isOpen]);
|
|
2793
|
+
React6.useEffect(() => {
|
|
2794
|
+
if (!isOpen) {
|
|
2795
|
+
setQuery("");
|
|
2796
|
+
}
|
|
2797
|
+
}, [isOpen]);
|
|
2798
|
+
return /* @__PURE__ */ jsxs5("div", { ref: rootRef, className: "zenit-combobox-root", style: { position: "relative" }, children: [
|
|
2799
|
+
/* @__PURE__ */ jsx5("style", { children: `
|
|
2800
|
+
.zenit-combobox-trigger {
|
|
2801
|
+
width: 100%;
|
|
2802
|
+
min-height: 40px;
|
|
2803
|
+
height: 40px;
|
|
2804
|
+
border: 1px solid #cbd5e1;
|
|
2805
|
+
border-radius: 6px;
|
|
2806
|
+
background: #ffffff;
|
|
2807
|
+
color: #0f172a;
|
|
2808
|
+
display: inline-flex;
|
|
2809
|
+
align-items: center;
|
|
2810
|
+
padding: 0 12px;
|
|
2811
|
+
font-size: 14px;
|
|
2812
|
+
line-height: 1.25;
|
|
2813
|
+
cursor: pointer;
|
|
2814
|
+
text-align: left;
|
|
2815
|
+
}
|
|
2816
|
+
.zenit-combobox-trigger.is-placeholder {
|
|
2817
|
+
color: #64748b;
|
|
2818
|
+
}
|
|
2819
|
+
.zenit-combobox-trigger:disabled {
|
|
2820
|
+
opacity: 0.6;
|
|
2821
|
+
cursor: not-allowed;
|
|
2822
|
+
}
|
|
2823
|
+
.zenit-combobox-content {
|
|
2824
|
+
position: absolute;
|
|
2825
|
+
top: calc(100% + 6px);
|
|
2826
|
+
left: 0;
|
|
2827
|
+
right: 0;
|
|
2828
|
+
border: 1px solid #cbd5e1;
|
|
2829
|
+
border-radius: 6px;
|
|
2830
|
+
background: #ffffff;
|
|
2831
|
+
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
|
|
2832
|
+
padding: 8px;
|
|
2833
|
+
z-index: 4000;
|
|
2834
|
+
}
|
|
2835
|
+
.zenit-combobox-search {
|
|
2836
|
+
width: 100%;
|
|
2837
|
+
min-height: 36px;
|
|
2838
|
+
border: 1px solid #cbd5e1;
|
|
2839
|
+
border-radius: 6px;
|
|
2840
|
+
background: #ffffff;
|
|
2841
|
+
color: #0f172a;
|
|
2842
|
+
padding: 0 10px;
|
|
2843
|
+
font-size: 14px;
|
|
2844
|
+
margin-bottom: 8px;
|
|
2845
|
+
box-sizing: border-box;
|
|
2846
|
+
}
|
|
2847
|
+
.zenit-combobox-list {
|
|
2848
|
+
max-height: 220px;
|
|
2849
|
+
overflow-y: auto;
|
|
2850
|
+
}
|
|
2851
|
+
.zenit-combobox-item {
|
|
2852
|
+
width: 100%;
|
|
2853
|
+
border-radius: 4px;
|
|
2854
|
+
color: #0f172a;
|
|
2855
|
+
font-size: 14px;
|
|
2856
|
+
min-height: 34px;
|
|
2857
|
+
padding: 8px 10px;
|
|
2858
|
+
cursor: pointer;
|
|
2859
|
+
user-select: none;
|
|
2860
|
+
}
|
|
2861
|
+
.zenit-combobox-item:hover { background: #f1f5f9; }
|
|
2862
|
+
.zenit-combobox-item.is-selected { background: #e2e8f0; font-weight: 600; }
|
|
2863
|
+
` }),
|
|
2864
|
+
/* @__PURE__ */ jsx5(
|
|
2865
|
+
"button",
|
|
2866
|
+
{
|
|
2867
|
+
type: "button",
|
|
2868
|
+
className: `zenit-combobox-trigger${!value ? " is-placeholder" : ""}`,
|
|
2869
|
+
disabled,
|
|
2870
|
+
onClick: () => !disabled && setIsOpen((prev) => !prev),
|
|
2871
|
+
children: value || placeholder
|
|
2872
|
+
}
|
|
2873
|
+
),
|
|
2874
|
+
isOpen && /* @__PURE__ */ jsxs5("div", { className: "zenit-combobox-content", children: [
|
|
2875
|
+
/* @__PURE__ */ jsx5(
|
|
2876
|
+
"input",
|
|
2877
|
+
{
|
|
2878
|
+
className: "zenit-combobox-search",
|
|
2879
|
+
value: query,
|
|
2880
|
+
onChange: (event) => setQuery(event.target.value),
|
|
2881
|
+
placeholder: searchPlaceholder,
|
|
2882
|
+
autoFocus: true
|
|
2883
|
+
}
|
|
2884
|
+
),
|
|
2885
|
+
/* @__PURE__ */ jsxs5("div", { className: "zenit-combobox-list", children: [
|
|
2886
|
+
filteredOptions.length === 0 && /* @__PURE__ */ jsx5("div", { className: "zenit-combobox-item", style: { color: "#64748b", cursor: "default" }, children: "Sin coincidencias" }),
|
|
2887
|
+
filteredOptions.map((option) => /* @__PURE__ */ jsx5(
|
|
2888
|
+
"div",
|
|
2889
|
+
{
|
|
2890
|
+
className: `zenit-combobox-item${option === value ? " is-selected" : ""}`,
|
|
2891
|
+
onClick: () => {
|
|
2892
|
+
onChange(option);
|
|
2893
|
+
setIsOpen(false);
|
|
2894
|
+
},
|
|
2895
|
+
children: option
|
|
2896
|
+
},
|
|
2897
|
+
option
|
|
2898
|
+
))
|
|
2899
|
+
] })
|
|
2900
|
+
] })
|
|
2901
|
+
] });
|
|
2902
|
+
};
|
|
2903
|
+
|
|
2733
2904
|
// src/react/ZenitLayerManager.tsx
|
|
2734
|
-
import { Fragment as Fragment3, jsx as
|
|
2905
|
+
import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2735
2906
|
var FLOAT_TOLERANCE = 1e-3;
|
|
2907
|
+
var CATALOG_FIELD_BLACKLIST = /* @__PURE__ */ new Set([
|
|
2908
|
+
"mapids",
|
|
2909
|
+
"mapId",
|
|
2910
|
+
"mapIDs",
|
|
2911
|
+
"mapId",
|
|
2912
|
+
"field",
|
|
2913
|
+
"Field",
|
|
2914
|
+
"objectid",
|
|
2915
|
+
"OBJECTID",
|
|
2916
|
+
"objectId",
|
|
2917
|
+
"gforms",
|
|
2918
|
+
"GFORMS",
|
|
2919
|
+
"nomina",
|
|
2920
|
+
"NOMINA",
|
|
2921
|
+
"shape_area",
|
|
2922
|
+
"SHAPE_AREA",
|
|
2923
|
+
"shape_leng",
|
|
2924
|
+
"SHAPE_LENG",
|
|
2925
|
+
"fid",
|
|
2926
|
+
"FID",
|
|
2927
|
+
"gid",
|
|
2928
|
+
"GID",
|
|
2929
|
+
"created_at",
|
|
2930
|
+
"updated_at",
|
|
2931
|
+
"created_user",
|
|
2932
|
+
"last_edited_user",
|
|
2933
|
+
"globalid",
|
|
2934
|
+
"GLOBALID"
|
|
2935
|
+
]);
|
|
2936
|
+
function isFieldVisible(key) {
|
|
2937
|
+
return !CATALOG_FIELD_BLACKLIST.has(key) && !key.startsWith("_") && !key.startsWith("__");
|
|
2938
|
+
}
|
|
2939
|
+
var matchesWhitelist = (key, whitelist) => whitelist.some((w) => w.toUpperCase() === key.toUpperCase());
|
|
2736
2940
|
function areEffectiveStatesEqual(a, b) {
|
|
2737
2941
|
if (a.length !== b.length) return false;
|
|
2738
2942
|
return a.every((state, index) => {
|
|
@@ -2771,7 +2975,9 @@ var ZenitLayerManager = ({
|
|
|
2771
2975
|
layerFeatureCounts,
|
|
2772
2976
|
mapLayers,
|
|
2773
2977
|
onApplyLayerFilter,
|
|
2774
|
-
onClearLayerFilter
|
|
2978
|
+
onClearLayerFilter,
|
|
2979
|
+
availableFilterLayers = [],
|
|
2980
|
+
filterFieldWhitelist = []
|
|
2775
2981
|
}) => {
|
|
2776
2982
|
const [map, setMap] = useState3(null);
|
|
2777
2983
|
const [loadingMap, setLoadingMap] = useState3(false);
|
|
@@ -2783,6 +2989,7 @@ var ZenitLayerManager = ({
|
|
|
2783
2989
|
const [selectedFilterField, setSelectedFilterField] = useState3("");
|
|
2784
2990
|
const [selectedFilterValue, setSelectedFilterValue] = useState3("");
|
|
2785
2991
|
const [catalogByLayerField, setCatalogByLayerField] = useState3({});
|
|
2992
|
+
const [catalogFieldsByLayer, setCatalogFieldsByLayer] = useState3({});
|
|
2786
2993
|
const [loadingCatalog, setLoadingCatalog] = useState3(false);
|
|
2787
2994
|
const [applyingFilter, setApplyingFilter] = useState3(false);
|
|
2788
2995
|
const [filterError, setFilterError] = useState3(null);
|
|
@@ -2829,7 +3036,7 @@ var ZenitLayerManager = ({
|
|
|
2829
3036
|
});
|
|
2830
3037
|
return index;
|
|
2831
3038
|
}, [map, mapLayers]);
|
|
2832
|
-
const resolveUserOpacity =
|
|
3039
|
+
const resolveUserOpacity = React7.useCallback((state) => {
|
|
2833
3040
|
if (typeof state.overrideOpacity === "number") return state.overrideOpacity;
|
|
2834
3041
|
if (typeof state.overrideOpacity === "string") {
|
|
2835
3042
|
const parsed = Number.parseFloat(state.overrideOpacity);
|
|
@@ -2837,7 +3044,7 @@ var ZenitLayerManager = ({
|
|
|
2837
3044
|
}
|
|
2838
3045
|
return state.opacity ?? 1;
|
|
2839
3046
|
}, []);
|
|
2840
|
-
const resolveEffectiveOpacity =
|
|
3047
|
+
const resolveEffectiveOpacity = React7.useCallback(
|
|
2841
3048
|
(layerId, userOpacity) => {
|
|
2842
3049
|
if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
|
|
2843
3050
|
return userOpacity;
|
|
@@ -2922,7 +3129,7 @@ var ZenitLayerManager = ({
|
|
|
2922
3129
|
mapZoom,
|
|
2923
3130
|
onLayerStatesChange
|
|
2924
3131
|
]);
|
|
2925
|
-
const updateLayerVisible =
|
|
3132
|
+
const updateLayerVisible = React7.useCallback(
|
|
2926
3133
|
(layerId, visible) => {
|
|
2927
3134
|
if (!onLayerStatesChange) return;
|
|
2928
3135
|
const next = effectiveStates.map(
|
|
@@ -2932,7 +3139,7 @@ var ZenitLayerManager = ({
|
|
|
2932
3139
|
},
|
|
2933
3140
|
[effectiveStates, onLayerStatesChange]
|
|
2934
3141
|
);
|
|
2935
|
-
const updateLayerOpacity =
|
|
3142
|
+
const updateLayerOpacity = React7.useCallback(
|
|
2936
3143
|
(layerId, opacity) => {
|
|
2937
3144
|
if (!onLayerStatesChange) return;
|
|
2938
3145
|
const adjustedOpacity = resolveEffectiveOpacity(layerId, opacity);
|
|
@@ -2943,7 +3150,7 @@ var ZenitLayerManager = ({
|
|
|
2943
3150
|
},
|
|
2944
3151
|
[effectiveStates, onLayerStatesChange, resolveEffectiveOpacity]
|
|
2945
3152
|
);
|
|
2946
|
-
const resolveFeatureCount =
|
|
3153
|
+
const resolveFeatureCount = React7.useCallback(
|
|
2947
3154
|
(layerId, layer) => {
|
|
2948
3155
|
const resolvedFeatureCount = layerFeatureCounts?.[layerId] ?? layerFeatureCounts?.[String(layerId)];
|
|
2949
3156
|
if (typeof resolvedFeatureCount === "number") return resolvedFeatureCount;
|
|
@@ -2990,22 +3197,31 @@ var ZenitLayerManager = ({
|
|
|
2990
3197
|
});
|
|
2991
3198
|
}, [map?.mapLayers, mapLayers]);
|
|
2992
3199
|
const filterableLayers = useMemo4(() => {
|
|
3200
|
+
const forcedLayerIds = new Set(availableFilterLayers.map((layerId) => String(layerId)));
|
|
2993
3201
|
return decoratedLayers.filter((entry) => {
|
|
2994
3202
|
const prefilters = entry.mapLayer.layerConfig?.prefilters;
|
|
2995
|
-
|
|
3203
|
+
if (prefilters && Object.keys(prefilters).length > 0) return true;
|
|
3204
|
+
if (forcedLayerIds.has(String(entry.mapLayer.layerId))) return true;
|
|
3205
|
+
const layerType = (entry.mapLayer.layerType ?? entry.layer?.layerType ?? "").toString().toLowerCase();
|
|
3206
|
+
return layerType === "multipolygon";
|
|
2996
3207
|
});
|
|
2997
|
-
}, [decoratedLayers]);
|
|
3208
|
+
}, [availableFilterLayers, decoratedLayers]);
|
|
2998
3209
|
const selectedFilterLayer = useMemo4(
|
|
2999
3210
|
() => filterableLayers.find((layer) => String(layer.mapLayer.layerId) === selectedFilterLayerId) ?? null,
|
|
3000
3211
|
[filterableLayers, selectedFilterLayerId]
|
|
3001
3212
|
);
|
|
3002
3213
|
const filterFields = useMemo4(() => {
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3214
|
+
if (!selectedFilterLayer) return [];
|
|
3215
|
+
const prefilters = selectedFilterLayer.mapLayer.layerConfig?.prefilters;
|
|
3216
|
+
if (prefilters) {
|
|
3217
|
+
const keys = Object.keys(prefilters);
|
|
3218
|
+
if (keys.length > 0) return keys;
|
|
3219
|
+
}
|
|
3220
|
+
return catalogFieldsByLayer[String(selectedFilterLayer.mapLayer.layerId)] ?? [];
|
|
3221
|
+
}, [catalogFieldsByLayer, selectedFilterLayer]);
|
|
3006
3222
|
const activeCatalogKey = selectedFilterLayer ? `${selectedFilterLayer.mapLayer.layerId}:${selectedFilterField}` : null;
|
|
3007
3223
|
const activeCatalogValues = activeCatalogKey ? catalogByLayerField[activeCatalogKey] ?? [] : [];
|
|
3008
|
-
const extractCatalogValues =
|
|
3224
|
+
const extractCatalogValues = React7.useCallback((catalogData, field) => {
|
|
3009
3225
|
const values = /* @__PURE__ */ new Set();
|
|
3010
3226
|
const pushValue = (value) => {
|
|
3011
3227
|
if (value === null || value === void 0) return;
|
|
@@ -3042,6 +3258,45 @@ var ZenitLayerManager = ({
|
|
|
3042
3258
|
}
|
|
3043
3259
|
return [...values].sort((a, b) => a.localeCompare(b, void 0, { sensitivity: "base" }));
|
|
3044
3260
|
}, []);
|
|
3261
|
+
const extractCatalogFieldMap = React7.useCallback((catalogData, whitelist) => {
|
|
3262
|
+
if (!catalogData || typeof catalogData !== "object") return {};
|
|
3263
|
+
const maybeRecord = catalogData;
|
|
3264
|
+
const fieldNames = /* @__PURE__ */ new Set();
|
|
3265
|
+
Object.entries(maybeRecord).forEach(([key, value]) => {
|
|
3266
|
+
if (Array.isArray(value) && key !== "items" && key !== "features") {
|
|
3267
|
+
if (isFieldVisible(key)) fieldNames.add(key);
|
|
3268
|
+
}
|
|
3269
|
+
});
|
|
3270
|
+
const items = maybeRecord.items;
|
|
3271
|
+
if (Array.isArray(items)) {
|
|
3272
|
+
items.forEach((item) => {
|
|
3273
|
+
if (!item || typeof item !== "object") return;
|
|
3274
|
+
const row = item;
|
|
3275
|
+
if (row.field !== null && row.field !== void 0) {
|
|
3276
|
+
const fieldName = String(row.field).trim();
|
|
3277
|
+
if (fieldName && isFieldVisible(fieldName)) fieldNames.add(fieldName);
|
|
3278
|
+
}
|
|
3279
|
+
});
|
|
3280
|
+
}
|
|
3281
|
+
const features = maybeRecord.features;
|
|
3282
|
+
if (Array.isArray(features)) {
|
|
3283
|
+
features.forEach((feature) => {
|
|
3284
|
+
if (!feature || typeof feature !== "object") return;
|
|
3285
|
+
const properties = feature.properties;
|
|
3286
|
+
if (!properties || typeof properties !== "object") return;
|
|
3287
|
+
Object.keys(properties).forEach((key) => {
|
|
3288
|
+
if (isFieldVisible(key)) fieldNames.add(key);
|
|
3289
|
+
});
|
|
3290
|
+
});
|
|
3291
|
+
}
|
|
3292
|
+
const normalizedWhitelist = (whitelist ?? []).map((item) => String(item).trim()).filter(Boolean);
|
|
3293
|
+
const resolvedFieldNames = normalizedWhitelist.length > 0 ? [...fieldNames].filter((field) => matchesWhitelist(field, normalizedWhitelist)) : [...fieldNames];
|
|
3294
|
+
const next = {};
|
|
3295
|
+
resolvedFieldNames.forEach((field) => {
|
|
3296
|
+
next[field] = extractCatalogValues(catalogData, field);
|
|
3297
|
+
});
|
|
3298
|
+
return next;
|
|
3299
|
+
}, [extractCatalogValues]);
|
|
3045
3300
|
useEffect6(() => {
|
|
3046
3301
|
if (!filterableLayers.length) {
|
|
3047
3302
|
setSelectedFilterLayerId("");
|
|
@@ -3068,17 +3323,35 @@ var ZenitLayerManager = ({
|
|
|
3068
3323
|
}, [activeTab, hasPrefilters]);
|
|
3069
3324
|
useEffect6(() => {
|
|
3070
3325
|
if (activeTab !== "filters") return;
|
|
3071
|
-
if (!selectedFilterLayer
|
|
3072
|
-
|
|
3326
|
+
if (!selectedFilterLayer) return;
|
|
3327
|
+
const layerId = selectedFilterLayer.mapLayer.layerId;
|
|
3328
|
+
const layerKey = String(layerId);
|
|
3329
|
+
const prefilters = selectedFilterLayer.mapLayer.layerConfig?.prefilters;
|
|
3330
|
+
const requiresCatalogForFields = !prefilters || Object.keys(prefilters).length === 0;
|
|
3331
|
+
const hasFieldsLoaded = (catalogFieldsByLayer[layerKey]?.length ?? 0) > 0;
|
|
3332
|
+
const needsLayerCatalog = requiresCatalogForFields && !hasFieldsLoaded;
|
|
3333
|
+
const needsFieldCatalog = Boolean(activeCatalogKey && selectedFilterField && !catalogByLayerField[activeCatalogKey]);
|
|
3334
|
+
if (!needsLayerCatalog && !needsFieldCatalog) return;
|
|
3073
3335
|
catalogAbortRef.current?.abort();
|
|
3074
3336
|
const controller = new AbortController();
|
|
3075
3337
|
catalogAbortRef.current = controller;
|
|
3076
3338
|
setLoadingCatalog(true);
|
|
3077
3339
|
setFilterError(null);
|
|
3078
|
-
client.layers.getLayerFeaturesCatalog(
|
|
3340
|
+
client.layers.getLayerFeaturesCatalog(layerId).then((response) => {
|
|
3079
3341
|
if (controller.signal.aborted) return;
|
|
3080
|
-
const
|
|
3081
|
-
|
|
3342
|
+
const fieldMap = extractCatalogFieldMap(response.data, filterFieldWhitelist);
|
|
3343
|
+
const fields = Object.keys(fieldMap);
|
|
3344
|
+
setCatalogFieldsByLayer((prev) => ({ ...prev, [layerKey]: fields }));
|
|
3345
|
+
setCatalogByLayerField((prev) => {
|
|
3346
|
+
const next = { ...prev };
|
|
3347
|
+
fields.forEach((field) => {
|
|
3348
|
+
const key = `${layerKey}:${field}`;
|
|
3349
|
+
if (!next[key]) {
|
|
3350
|
+
next[key] = fieldMap[field] ?? [];
|
|
3351
|
+
}
|
|
3352
|
+
});
|
|
3353
|
+
return next;
|
|
3354
|
+
});
|
|
3082
3355
|
}).catch((error) => {
|
|
3083
3356
|
if (controller.signal.aborted) return;
|
|
3084
3357
|
const message = error instanceof Error ? error.message : "No se pudo cargar el cat\xE1logo";
|
|
@@ -3089,8 +3362,8 @@ var ZenitLayerManager = ({
|
|
|
3089
3362
|
return () => {
|
|
3090
3363
|
controller.abort();
|
|
3091
3364
|
};
|
|
3092
|
-
}, [activeCatalogKey, activeTab, catalogByLayerField, client.layers,
|
|
3093
|
-
const handleApplyFilter =
|
|
3365
|
+
}, [activeCatalogKey, activeTab, catalogByLayerField, catalogFieldsByLayer, client.layers, extractCatalogFieldMap, filterFieldWhitelist, selectedFilterField, selectedFilterLayer]);
|
|
3366
|
+
const handleApplyFilter = React7.useCallback(async () => {
|
|
3094
3367
|
if (!selectedFilterLayer || !selectedFilterField || !selectedFilterValue || !onApplyLayerFilter) return;
|
|
3095
3368
|
setApplyingFilter(true);
|
|
3096
3369
|
setFilterError(null);
|
|
@@ -3112,7 +3385,7 @@ var ZenitLayerManager = ({
|
|
|
3112
3385
|
setApplyingFilter(false);
|
|
3113
3386
|
}
|
|
3114
3387
|
}, [onApplyLayerFilter, selectedFilterField, selectedFilterLayer, selectedFilterValue]);
|
|
3115
|
-
const handleClearFilter =
|
|
3388
|
+
const handleClearFilter = React7.useCallback(async () => {
|
|
3116
3389
|
if (!selectedFilterLayer) return;
|
|
3117
3390
|
setApplyingFilter(true);
|
|
3118
3391
|
setFilterError(null);
|
|
@@ -3127,7 +3400,7 @@ var ZenitLayerManager = ({
|
|
|
3127
3400
|
setApplyingFilter(false);
|
|
3128
3401
|
}
|
|
3129
3402
|
}, [onClearLayerFilter, selectedFilterField, selectedFilterLayer]);
|
|
3130
|
-
const resolveLayerStyle =
|
|
3403
|
+
const resolveLayerStyle = React7.useCallback(
|
|
3131
3404
|
(layerId) => {
|
|
3132
3405
|
const layerKey = String(layerId);
|
|
3133
3406
|
const fromProp = mapLayers?.find((entry) => String(entry.layerId) === layerKey)?.style;
|
|
@@ -3141,6 +3414,22 @@ var ZenitLayerManager = ({
|
|
|
3141
3414
|
},
|
|
3142
3415
|
[map, mapLayers]
|
|
3143
3416
|
);
|
|
3417
|
+
const allVisible = decoratedLayers.every(
|
|
3418
|
+
(entry) => entry.effective?.visible ?? false
|
|
3419
|
+
);
|
|
3420
|
+
const anyVisible = decoratedLayers.some(
|
|
3421
|
+
(entry) => entry.effective?.visible ?? false
|
|
3422
|
+
);
|
|
3423
|
+
const handleToggleAllLayers = React7.useCallback(() => {
|
|
3424
|
+
if (!onLayerStatesChange) return;
|
|
3425
|
+
const nextVisible = !anyVisible;
|
|
3426
|
+
const next = effectiveStates.map((state) => ({
|
|
3427
|
+
...state,
|
|
3428
|
+
visible: nextVisible,
|
|
3429
|
+
overrideVisible: nextVisible
|
|
3430
|
+
}));
|
|
3431
|
+
onLayerStatesChange(next);
|
|
3432
|
+
}, [anyVisible, effectiveStates, onLayerStatesChange]);
|
|
3144
3433
|
const panelStyle = {
|
|
3145
3434
|
width: 360,
|
|
3146
3435
|
borderLeft: side === "right" ? "1px solid #e2e8f0" : void 0,
|
|
@@ -3157,10 +3446,10 @@ var ZenitLayerManager = ({
|
|
|
3157
3446
|
...height ? { height } : {}
|
|
3158
3447
|
};
|
|
3159
3448
|
if (loadingMap) {
|
|
3160
|
-
return /* @__PURE__ */
|
|
3449
|
+
return /* @__PURE__ */ jsx6("div", { className, style: panelStyle, children: "Cargando capas\u2026" });
|
|
3161
3450
|
}
|
|
3162
3451
|
if (mapError) {
|
|
3163
|
-
return /* @__PURE__ */
|
|
3452
|
+
return /* @__PURE__ */ jsxs6("div", { className, style: { ...panelStyle, color: "#c53030" }, children: [
|
|
3164
3453
|
"Error al cargar mapa: ",
|
|
3165
3454
|
mapError
|
|
3166
3455
|
] });
|
|
@@ -3178,7 +3467,7 @@ var ZenitLayerManager = ({
|
|
|
3178
3467
|
boxShadow: "0 1px 0 rgba(148, 163, 184, 0.25)"
|
|
3179
3468
|
};
|
|
3180
3469
|
const renderLayerCards = () => {
|
|
3181
|
-
return /* @__PURE__ */
|
|
3470
|
+
return /* @__PURE__ */ jsx6("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: decoratedLayers.map((layerState) => {
|
|
3182
3471
|
const layerId = layerState.mapLayer.layerId;
|
|
3183
3472
|
const layerName = layerState.layerName ?? `Capa ${layerId}`;
|
|
3184
3473
|
const visible = layerState.effective?.visible ?? false;
|
|
@@ -3188,7 +3477,7 @@ var ZenitLayerManager = ({
|
|
|
3188
3477
|
const muted = !visible;
|
|
3189
3478
|
const opacityPercent = Math.round(userOpacity * 100);
|
|
3190
3479
|
const sliderBackground = `linear-gradient(to right, ${layerColor} 0%, ${layerColor} ${opacityPercent}%, #e5e7eb ${opacityPercent}%, #e5e7eb 100%)`;
|
|
3191
|
-
return /* @__PURE__ */
|
|
3480
|
+
return /* @__PURE__ */ jsxs6(
|
|
3192
3481
|
"div",
|
|
3193
3482
|
{
|
|
3194
3483
|
className: `zlm-card${muted ? " is-muted" : ""}`,
|
|
@@ -3203,9 +3492,9 @@ var ZenitLayerManager = ({
|
|
|
3203
3492
|
width: "100%"
|
|
3204
3493
|
},
|
|
3205
3494
|
children: [
|
|
3206
|
-
/* @__PURE__ */
|
|
3207
|
-
/* @__PURE__ */
|
|
3208
|
-
/* @__PURE__ */
|
|
3495
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
|
|
3496
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 10, alignItems: "flex-start", minWidth: 0, flex: 1 }, children: [
|
|
3497
|
+
/* @__PURE__ */ jsx6(
|
|
3209
3498
|
"div",
|
|
3210
3499
|
{
|
|
3211
3500
|
style: {
|
|
@@ -3220,7 +3509,7 @@ var ZenitLayerManager = ({
|
|
|
3220
3509
|
title: "Color de la capa"
|
|
3221
3510
|
}
|
|
3222
3511
|
),
|
|
3223
|
-
showLayerVisibilityIcon && /* @__PURE__ */
|
|
3512
|
+
showLayerVisibilityIcon && /* @__PURE__ */ jsx6(
|
|
3224
3513
|
"button",
|
|
3225
3514
|
{
|
|
3226
3515
|
type: "button",
|
|
@@ -3231,11 +3520,11 @@ var ZenitLayerManager = ({
|
|
|
3231
3520
|
)
|
|
3232
3521
|
),
|
|
3233
3522
|
"aria-label": visible ? "Ocultar capa" : "Mostrar capa",
|
|
3234
|
-
children: visible ? /* @__PURE__ */
|
|
3523
|
+
children: visible ? /* @__PURE__ */ jsx6(Eye, { size: 16 }) : /* @__PURE__ */ jsx6(EyeOff, { size: 16 })
|
|
3235
3524
|
}
|
|
3236
3525
|
),
|
|
3237
|
-
/* @__PURE__ */
|
|
3238
|
-
/* @__PURE__ */
|
|
3526
|
+
/* @__PURE__ */ jsxs6("div", { style: { minWidth: 0, flex: 1 }, children: [
|
|
3527
|
+
/* @__PURE__ */ jsx6(
|
|
3239
3528
|
"div",
|
|
3240
3529
|
{
|
|
3241
3530
|
className: "zlm-layer-name",
|
|
@@ -3253,26 +3542,26 @@ var ZenitLayerManager = ({
|
|
|
3253
3542
|
children: layerName
|
|
3254
3543
|
}
|
|
3255
3544
|
),
|
|
3256
|
-
/* @__PURE__ */
|
|
3545
|
+
/* @__PURE__ */ jsxs6("div", { style: { color: muted ? "#94a3b8" : "#64748b", fontSize: 12 }, children: [
|
|
3257
3546
|
"ID ",
|
|
3258
3547
|
layerId
|
|
3259
3548
|
] })
|
|
3260
3549
|
] })
|
|
3261
3550
|
] }),
|
|
3262
|
-
/* @__PURE__ */
|
|
3551
|
+
/* @__PURE__ */ jsx6("div", { style: { display: "flex", alignItems: "flex-start", gap: 6, flexShrink: 0 }, children: typeof featureCount === "number" && /* @__PURE__ */ jsxs6("span", { className: "zlm-badge", children: [
|
|
3263
3552
|
featureCount.toLocaleString(),
|
|
3264
3553
|
" features"
|
|
3265
3554
|
] }) })
|
|
3266
3555
|
] }),
|
|
3267
|
-
/* @__PURE__ */
|
|
3268
|
-
/* @__PURE__ */
|
|
3269
|
-
/* @__PURE__ */
|
|
3270
|
-
/* @__PURE__ */
|
|
3556
|
+
/* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: /* @__PURE__ */ jsxs6("div", { style: { flex: 1 }, children: [
|
|
3557
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 6, color: "#64748b", fontSize: 12 }, children: [
|
|
3558
|
+
/* @__PURE__ */ jsx6("span", { children: "Opacidad" }),
|
|
3559
|
+
/* @__PURE__ */ jsxs6("span", { children: [
|
|
3271
3560
|
opacityPercent,
|
|
3272
3561
|
"%"
|
|
3273
3562
|
] })
|
|
3274
3563
|
] }),
|
|
3275
|
-
/* @__PURE__ */
|
|
3564
|
+
/* @__PURE__ */ jsx6(
|
|
3276
3565
|
"input",
|
|
3277
3566
|
{
|
|
3278
3567
|
className: "zlm-range",
|
|
@@ -3310,8 +3599,8 @@ var ZenitLayerManager = ({
|
|
|
3310
3599
|
);
|
|
3311
3600
|
}) });
|
|
3312
3601
|
};
|
|
3313
|
-
return /* @__PURE__ */
|
|
3314
|
-
/* @__PURE__ */
|
|
3602
|
+
return /* @__PURE__ */ jsxs6("div", { className: ["zenit-layer-manager", className].filter(Boolean).join(" "), style: panelStyle, children: [
|
|
3603
|
+
/* @__PURE__ */ jsx6("style", { children: `
|
|
3315
3604
|
.zenit-layer-manager .zlm-card {
|
|
3316
3605
|
transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
|
|
3317
3606
|
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
|
|
@@ -3406,16 +3695,16 @@ var ZenitLayerManager = ({
|
|
|
3406
3695
|
outline-offset: 2px;
|
|
3407
3696
|
}
|
|
3408
3697
|
` }),
|
|
3409
|
-
/* @__PURE__ */
|
|
3410
|
-
/* @__PURE__ */
|
|
3411
|
-
/* @__PURE__ */
|
|
3412
|
-
/* @__PURE__ */
|
|
3413
|
-
/* @__PURE__ */
|
|
3698
|
+
/* @__PURE__ */ jsxs6("div", { style: headerStyle, children: [
|
|
3699
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
3700
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
3701
|
+
/* @__PURE__ */ jsx6("div", { style: { fontWeight: 800, fontSize: 16, color: "#0f172a" }, children: "Gesti\xF3n de Capas" }),
|
|
3702
|
+
/* @__PURE__ */ jsxs6("div", { style: { color: "#64748b", fontSize: 12 }, children: [
|
|
3414
3703
|
"Mapa #",
|
|
3415
3704
|
map.id
|
|
3416
3705
|
] })
|
|
3417
3706
|
] }),
|
|
3418
|
-
/* @__PURE__ */
|
|
3707
|
+
/* @__PURE__ */ jsxs6(
|
|
3419
3708
|
"button",
|
|
3420
3709
|
{
|
|
3421
3710
|
type: "button",
|
|
@@ -3423,13 +3712,13 @@ var ZenitLayerManager = ({
|
|
|
3423
3712
|
className: "zlm-panel-toggle",
|
|
3424
3713
|
"aria-label": panelVisible ? "Ocultar panel de capas" : "Mostrar panel de capas",
|
|
3425
3714
|
children: [
|
|
3426
|
-
panelVisible ? /* @__PURE__ */
|
|
3715
|
+
panelVisible ? /* @__PURE__ */ jsx6(Eye, { size: 16 }) : /* @__PURE__ */ jsx6(EyeOff, { size: 16 }),
|
|
3427
3716
|
panelVisible ? "Ocultar" : "Mostrar"
|
|
3428
3717
|
]
|
|
3429
3718
|
}
|
|
3430
3719
|
)
|
|
3431
3720
|
] }),
|
|
3432
|
-
/* @__PURE__ */
|
|
3721
|
+
/* @__PURE__ */ jsxs6(
|
|
3433
3722
|
"div",
|
|
3434
3723
|
{
|
|
3435
3724
|
style: {
|
|
@@ -3442,38 +3731,38 @@ var ZenitLayerManager = ({
|
|
|
3442
3731
|
background: "#f1f5f9"
|
|
3443
3732
|
},
|
|
3444
3733
|
children: [
|
|
3445
|
-
/* @__PURE__ */
|
|
3734
|
+
/* @__PURE__ */ jsxs6(
|
|
3446
3735
|
"button",
|
|
3447
3736
|
{
|
|
3448
3737
|
type: "button",
|
|
3449
3738
|
className: `zlm-tab${activeTab === "layers" ? " is-active" : ""}`,
|
|
3450
3739
|
onClick: () => setActiveTab("layers"),
|
|
3451
3740
|
children: [
|
|
3452
|
-
/* @__PURE__ */
|
|
3741
|
+
/* @__PURE__ */ jsx6(Layers, { size: 16 }),
|
|
3453
3742
|
"Capas"
|
|
3454
3743
|
]
|
|
3455
3744
|
}
|
|
3456
3745
|
),
|
|
3457
|
-
showUploadTab && /* @__PURE__ */
|
|
3746
|
+
showUploadTab && /* @__PURE__ */ jsxs6(
|
|
3458
3747
|
"button",
|
|
3459
3748
|
{
|
|
3460
3749
|
type: "button",
|
|
3461
3750
|
className: `zlm-tab${activeTab === "upload" ? " is-active" : ""}`,
|
|
3462
3751
|
onClick: () => setActiveTab("upload"),
|
|
3463
3752
|
children: [
|
|
3464
|
-
/* @__PURE__ */
|
|
3753
|
+
/* @__PURE__ */ jsx6(Upload, { size: 16 }),
|
|
3465
3754
|
"Subir"
|
|
3466
3755
|
]
|
|
3467
3756
|
}
|
|
3468
3757
|
),
|
|
3469
|
-
!hasPrefilters && /* @__PURE__ */
|
|
3758
|
+
!hasPrefilters && /* @__PURE__ */ jsxs6(
|
|
3470
3759
|
"button",
|
|
3471
3760
|
{
|
|
3472
3761
|
type: "button",
|
|
3473
3762
|
className: `zlm-tab${activeTab === "filters" ? " is-active" : ""}`,
|
|
3474
3763
|
onClick: () => setActiveTab("filters"),
|
|
3475
3764
|
children: [
|
|
3476
|
-
/* @__PURE__ */
|
|
3765
|
+
/* @__PURE__ */ jsx6(Layers, { size: 16 }),
|
|
3477
3766
|
"Filtros"
|
|
3478
3767
|
]
|
|
3479
3768
|
}
|
|
@@ -3482,13 +3771,29 @@ var ZenitLayerManager = ({
|
|
|
3482
3771
|
}
|
|
3483
3772
|
)
|
|
3484
3773
|
] }),
|
|
3485
|
-
panelVisible && /* @__PURE__ */
|
|
3486
|
-
hasPrefilters && /* @__PURE__ */
|
|
3487
|
-
activeTab === "layers" &&
|
|
3488
|
-
|
|
3489
|
-
|
|
3774
|
+
panelVisible && /* @__PURE__ */ jsxs6("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
|
|
3775
|
+
hasPrefilters && /* @__PURE__ */ jsx6("div", { className: "zlm-badge", style: { marginBottom: 10 }, children: "Este mapa ya incluye filtros preaplicados" }),
|
|
3776
|
+
activeTab === "layers" && /* @__PURE__ */ jsxs6(Fragment3, { children: [
|
|
3777
|
+
/* @__PURE__ */ jsx6("div", { style: { marginBottom: 10 }, children: /* @__PURE__ */ jsxs6(
|
|
3778
|
+
"button",
|
|
3779
|
+
{
|
|
3780
|
+
type: "button",
|
|
3781
|
+
className: "zlm-panel-toggle",
|
|
3782
|
+
onClick: handleToggleAllLayers,
|
|
3783
|
+
disabled: decoratedLayers.length === 0,
|
|
3784
|
+
"aria-label": anyVisible ? "Ocultar todas las capas" : "Mostrar todas las capas",
|
|
3785
|
+
children: [
|
|
3786
|
+
anyVisible ? /* @__PURE__ */ jsx6(EyeOff, { size: 14 }) : /* @__PURE__ */ jsx6(Eye, { size: 14 }),
|
|
3787
|
+
anyVisible ? "Ocultar todas" : "Mostrar todas"
|
|
3788
|
+
]
|
|
3789
|
+
}
|
|
3790
|
+
) }),
|
|
3791
|
+
renderLayerCards()
|
|
3792
|
+
] }),
|
|
3793
|
+
!hasPrefilters && activeTab === "filters" && /* @__PURE__ */ jsx6("div", { className: "zlm-filter-panel", style: { display: "flex", flexDirection: "column", gap: 12, background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: 12 }, children: !filterableLayers.length ? /* @__PURE__ */ jsx6("div", { style: { color: "#64748b", fontSize: 13 }, children: "No hay filtros disponibles para las capas de este mapa." }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
|
|
3794
|
+
filterableLayers.length > 1 && /* @__PURE__ */ jsxs6("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
|
|
3490
3795
|
"Capa",
|
|
3491
|
-
/* @__PURE__ */
|
|
3796
|
+
/* @__PURE__ */ jsx6(
|
|
3492
3797
|
ZenitSelect,
|
|
3493
3798
|
{
|
|
3494
3799
|
ariaLabel: "Seleccionar capa para filtrar",
|
|
@@ -3501,9 +3806,9 @@ var ZenitLayerManager = ({
|
|
|
3501
3806
|
}
|
|
3502
3807
|
)
|
|
3503
3808
|
] }),
|
|
3504
|
-
/* @__PURE__ */
|
|
3809
|
+
/* @__PURE__ */ jsxs6("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
|
|
3505
3810
|
"Campo",
|
|
3506
|
-
/* @__PURE__ */
|
|
3811
|
+
/* @__PURE__ */ jsx6(
|
|
3507
3812
|
ZenitSelect,
|
|
3508
3813
|
{
|
|
3509
3814
|
ariaLabel: "Seleccionar campo de filtrado",
|
|
@@ -3516,34 +3821,31 @@ var ZenitLayerManager = ({
|
|
|
3516
3821
|
}
|
|
3517
3822
|
)
|
|
3518
3823
|
] }),
|
|
3519
|
-
/* @__PURE__ */
|
|
3824
|
+
/* @__PURE__ */ jsxs6("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
|
|
3520
3825
|
"Valor",
|
|
3521
|
-
/* @__PURE__ */
|
|
3522
|
-
|
|
3826
|
+
/* @__PURE__ */ jsx6(
|
|
3827
|
+
ZenitCombobox,
|
|
3523
3828
|
{
|
|
3524
|
-
ariaLabel: "Seleccionar valor de filtrado",
|
|
3525
3829
|
value: selectedFilterValue,
|
|
3526
3830
|
placeholder: "Seleccionar\u2026",
|
|
3527
|
-
|
|
3528
|
-
|
|
3529
|
-
options: activeCatalogValues
|
|
3530
|
-
|
|
3531
|
-
label: catalogValue
|
|
3532
|
-
}))
|
|
3831
|
+
searchPlaceholder: "Buscar valor\u2026",
|
|
3832
|
+
onChange: (nextValue) => setSelectedFilterValue(nextValue),
|
|
3833
|
+
options: activeCatalogValues,
|
|
3834
|
+
disabled: loadingCatalog || activeCatalogValues.length === 0
|
|
3533
3835
|
}
|
|
3534
3836
|
)
|
|
3535
3837
|
] }),
|
|
3536
|
-
loadingCatalog && /* @__PURE__ */
|
|
3537
|
-
!loadingCatalog && selectedFilterField && activeCatalogValues.length === 0 && /* @__PURE__ */
|
|
3538
|
-
filterError && /* @__PURE__ */
|
|
3539
|
-
appliedFilter && /* @__PURE__ */
|
|
3838
|
+
loadingCatalog && /* @__PURE__ */ jsx6("div", { style: { color: "#64748b", fontSize: 12 }, children: "Cargando cat\xE1logo\u2026" }),
|
|
3839
|
+
!loadingCatalog && selectedFilterField && activeCatalogValues.length === 0 && /* @__PURE__ */ jsx6("div", { style: { color: "#64748b", fontSize: 12 }, children: "No hay cat\xE1logo disponible para este filtro." }),
|
|
3840
|
+
filterError && /* @__PURE__ */ jsx6("div", { style: { color: "#b91c1c", fontSize: 12 }, children: filterError }),
|
|
3841
|
+
appliedFilter && /* @__PURE__ */ jsxs6("div", { className: "zlm-badge", style: { alignSelf: "flex-start" }, children: [
|
|
3540
3842
|
"Activo: ",
|
|
3541
3843
|
appliedFilter.field,
|
|
3542
3844
|
" = ",
|
|
3543
3845
|
appliedFilter.value
|
|
3544
3846
|
] }),
|
|
3545
|
-
/* @__PURE__ */
|
|
3546
|
-
/* @__PURE__ */
|
|
3847
|
+
/* @__PURE__ */ jsxs6("div", { className: "zlm-filter-actions", style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
|
|
3848
|
+
/* @__PURE__ */ jsx6(
|
|
3547
3849
|
"button",
|
|
3548
3850
|
{
|
|
3549
3851
|
type: "button",
|
|
@@ -3553,7 +3855,7 @@ var ZenitLayerManager = ({
|
|
|
3553
3855
|
children: applyingFilter ? "Aplicando\u2026" : "Aplicar"
|
|
3554
3856
|
}
|
|
3555
3857
|
),
|
|
3556
|
-
/* @__PURE__ */
|
|
3858
|
+
/* @__PURE__ */ jsx6(
|
|
3557
3859
|
"button",
|
|
3558
3860
|
{
|
|
3559
3861
|
type: "button",
|
|
@@ -3565,13 +3867,13 @@ var ZenitLayerManager = ({
|
|
|
3565
3867
|
)
|
|
3566
3868
|
] })
|
|
3567
3869
|
] }) }),
|
|
3568
|
-
showUploadTab && activeTab === "upload" && /* @__PURE__ */
|
|
3870
|
+
showUploadTab && activeTab === "upload" && /* @__PURE__ */ jsx6("div", { style: { color: "#475569", fontSize: 13 }, children: "Pr\xF3ximamente podr\xE1s subir capas desde este panel." })
|
|
3569
3871
|
] })
|
|
3570
3872
|
] });
|
|
3571
3873
|
};
|
|
3572
3874
|
|
|
3573
3875
|
// src/react/ZenitFeatureFilterPanel.tsx
|
|
3574
|
-
import { jsx as
|
|
3876
|
+
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
3575
3877
|
var ZenitFeatureFilterPanel = ({
|
|
3576
3878
|
title = "Filtros",
|
|
3577
3879
|
description,
|
|
@@ -3579,7 +3881,7 @@ var ZenitFeatureFilterPanel = ({
|
|
|
3579
3881
|
style,
|
|
3580
3882
|
children
|
|
3581
3883
|
}) => {
|
|
3582
|
-
return /* @__PURE__ */
|
|
3884
|
+
return /* @__PURE__ */ jsxs7(
|
|
3583
3885
|
"section",
|
|
3584
3886
|
{
|
|
3585
3887
|
className,
|
|
@@ -3592,11 +3894,11 @@ var ZenitFeatureFilterPanel = ({
|
|
|
3592
3894
|
...style
|
|
3593
3895
|
},
|
|
3594
3896
|
children: [
|
|
3595
|
-
/* @__PURE__ */
|
|
3596
|
-
/* @__PURE__ */
|
|
3597
|
-
description && /* @__PURE__ */
|
|
3897
|
+
/* @__PURE__ */ jsxs7("header", { style: { marginBottom: 12 }, children: [
|
|
3898
|
+
/* @__PURE__ */ jsx7("h3", { style: { margin: 0, fontSize: 16 }, children: title }),
|
|
3899
|
+
description && /* @__PURE__ */ jsx7("p", { style: { margin: "6px 0 0", color: "#475569", fontSize: 13 }, children: description })
|
|
3598
3900
|
] }),
|
|
3599
|
-
/* @__PURE__ */
|
|
3901
|
+
/* @__PURE__ */ jsx7("div", { children })
|
|
3600
3902
|
]
|
|
3601
3903
|
}
|
|
3602
3904
|
);
|
|
@@ -3828,7 +4130,7 @@ var useSendMessageStream = (config) => {
|
|
|
3828
4130
|
// src/react/components/MarkdownRenderer.tsx
|
|
3829
4131
|
import ReactMarkdown from "react-markdown";
|
|
3830
4132
|
import remarkGfm from "remark-gfm";
|
|
3831
|
-
import { jsx as
|
|
4133
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
3832
4134
|
function normalizeAssistantMarkdown(text) {
|
|
3833
4135
|
if (!text || typeof text !== "string") return "";
|
|
3834
4136
|
let normalized = text;
|
|
@@ -3844,28 +4146,28 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
3844
4146
|
if (!normalizedContent) {
|
|
3845
4147
|
return null;
|
|
3846
4148
|
}
|
|
3847
|
-
return /* @__PURE__ */
|
|
4149
|
+
return /* @__PURE__ */ jsx8("div", { className, style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx8(
|
|
3848
4150
|
ReactMarkdown,
|
|
3849
4151
|
{
|
|
3850
4152
|
remarkPlugins: [remarkGfm],
|
|
3851
4153
|
components: {
|
|
3852
4154
|
// Headings with proper spacing
|
|
3853
|
-
h1: ({ children, ...props }) => /* @__PURE__ */
|
|
3854
|
-
h2: ({ children, ...props }) => /* @__PURE__ */
|
|
3855
|
-
h3: ({ children, ...props }) => /* @__PURE__ */
|
|
3856
|
-
h4: ({ children, ...props }) => /* @__PURE__ */
|
|
3857
|
-
h5: ({ children, ...props }) => /* @__PURE__ */
|
|
3858
|
-
h6: ({ children, ...props }) => /* @__PURE__ */
|
|
4155
|
+
h1: ({ children, ...props }) => /* @__PURE__ */ jsx8("h1", { style: { fontSize: "1.5em", fontWeight: 700, marginTop: "1em", marginBottom: "0.5em" }, ...props, children }),
|
|
4156
|
+
h2: ({ children, ...props }) => /* @__PURE__ */ jsx8("h2", { style: { fontSize: "1.3em", fontWeight: 700, marginTop: "0.9em", marginBottom: "0.45em" }, ...props, children }),
|
|
4157
|
+
h3: ({ children, ...props }) => /* @__PURE__ */ jsx8("h3", { style: { fontSize: "1.15em", fontWeight: 600, marginTop: "0.75em", marginBottom: "0.4em" }, ...props, children }),
|
|
4158
|
+
h4: ({ children, ...props }) => /* @__PURE__ */ jsx8("h4", { style: { fontSize: "1.05em", fontWeight: 600, marginTop: "0.6em", marginBottom: "0.35em" }, ...props, children }),
|
|
4159
|
+
h5: ({ children, ...props }) => /* @__PURE__ */ jsx8("h5", { style: { fontSize: "1em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
|
|
4160
|
+
h6: ({ children, ...props }) => /* @__PURE__ */ jsx8("h6", { style: { fontSize: "0.95em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
|
|
3859
4161
|
// Paragraphs with comfortable line height
|
|
3860
|
-
p: ({ children, ...props }) => /* @__PURE__ */
|
|
4162
|
+
p: ({ children, ...props }) => /* @__PURE__ */ jsx8("p", { style: { marginTop: "0.5em", marginBottom: "0.5em", lineHeight: 1.6 }, ...props, children }),
|
|
3861
4163
|
// Lists with proper indentation
|
|
3862
|
-
ul: ({ children, ...props }) => /* @__PURE__ */
|
|
3863
|
-
ol: ({ children, ...props }) => /* @__PURE__ */
|
|
3864
|
-
li: ({ children, ...props }) => /* @__PURE__ */
|
|
4164
|
+
ul: ({ children, ...props }) => /* @__PURE__ */ jsx8("ul", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
|
|
4165
|
+
ol: ({ children, ...props }) => /* @__PURE__ */ jsx8("ol", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
|
|
4166
|
+
li: ({ children, ...props }) => /* @__PURE__ */ jsx8("li", { style: { marginTop: "0.25em", marginBottom: "0.25em" }, ...props, children }),
|
|
3865
4167
|
// Code blocks
|
|
3866
4168
|
code: ({ inline, children, ...props }) => {
|
|
3867
4169
|
if (inline) {
|
|
3868
|
-
return /* @__PURE__ */
|
|
4170
|
+
return /* @__PURE__ */ jsx8(
|
|
3869
4171
|
"code",
|
|
3870
4172
|
{
|
|
3871
4173
|
style: {
|
|
@@ -3880,7 +4182,7 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
3880
4182
|
}
|
|
3881
4183
|
);
|
|
3882
4184
|
}
|
|
3883
|
-
return /* @__PURE__ */
|
|
4185
|
+
return /* @__PURE__ */ jsx8(
|
|
3884
4186
|
"code",
|
|
3885
4187
|
{
|
|
3886
4188
|
style: {
|
|
@@ -3900,9 +4202,9 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
3900
4202
|
);
|
|
3901
4203
|
},
|
|
3902
4204
|
// Pre (code block wrapper)
|
|
3903
|
-
pre: ({ children, ...props }) => /* @__PURE__ */
|
|
4205
|
+
pre: ({ children, ...props }) => /* @__PURE__ */ jsx8("pre", { style: { margin: 0 }, ...props, children }),
|
|
3904
4206
|
// Blockquotes
|
|
3905
|
-
blockquote: ({ children, ...props }) => /* @__PURE__ */
|
|
4207
|
+
blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx8(
|
|
3906
4208
|
"blockquote",
|
|
3907
4209
|
{
|
|
3908
4210
|
style: {
|
|
@@ -3918,11 +4220,11 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
3918
4220
|
}
|
|
3919
4221
|
),
|
|
3920
4222
|
// Strong/bold
|
|
3921
|
-
strong: ({ children, ...props }) => /* @__PURE__ */
|
|
4223
|
+
strong: ({ children, ...props }) => /* @__PURE__ */ jsx8("strong", { style: { fontWeight: 600 }, ...props, children }),
|
|
3922
4224
|
// Emphasis/italic
|
|
3923
|
-
em: ({ children, ...props }) => /* @__PURE__ */
|
|
4225
|
+
em: ({ children, ...props }) => /* @__PURE__ */ jsx8("em", { style: { fontStyle: "italic" }, ...props, children }),
|
|
3924
4226
|
// Horizontal rule
|
|
3925
|
-
hr: (props) => /* @__PURE__ */
|
|
4227
|
+
hr: (props) => /* @__PURE__ */ jsx8(
|
|
3926
4228
|
"hr",
|
|
3927
4229
|
{
|
|
3928
4230
|
style: {
|
|
@@ -3935,7 +4237,7 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
3935
4237
|
}
|
|
3936
4238
|
),
|
|
3937
4239
|
// Tables (GFM)
|
|
3938
|
-
table: ({ children, ...props }) => /* @__PURE__ */
|
|
4240
|
+
table: ({ children, ...props }) => /* @__PURE__ */ jsx8("div", { style: { overflowX: "auto", marginTop: "0.5em", marginBottom: "0.5em" }, children: /* @__PURE__ */ jsx8(
|
|
3939
4241
|
"table",
|
|
3940
4242
|
{
|
|
3941
4243
|
style: {
|
|
@@ -3947,7 +4249,7 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
3947
4249
|
children
|
|
3948
4250
|
}
|
|
3949
4251
|
) }),
|
|
3950
|
-
th: ({ children, ...props }) => /* @__PURE__ */
|
|
4252
|
+
th: ({ children, ...props }) => /* @__PURE__ */ jsx8(
|
|
3951
4253
|
"th",
|
|
3952
4254
|
{
|
|
3953
4255
|
style: {
|
|
@@ -3961,7 +4263,7 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
3961
4263
|
children
|
|
3962
4264
|
}
|
|
3963
4265
|
),
|
|
3964
|
-
td: ({ children, ...props }) => /* @__PURE__ */
|
|
4266
|
+
td: ({ children, ...props }) => /* @__PURE__ */ jsx8(
|
|
3965
4267
|
"td",
|
|
3966
4268
|
{
|
|
3967
4269
|
style: {
|
|
@@ -3979,32 +4281,32 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
3979
4281
|
};
|
|
3980
4282
|
|
|
3981
4283
|
// src/react/ai/FloatingChatBox.tsx
|
|
3982
|
-
import { Fragment as Fragment4, jsx as
|
|
3983
|
-
var ChatIcon = () => /* @__PURE__ */
|
|
3984
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
3985
|
-
/* @__PURE__ */
|
|
3986
|
-
/* @__PURE__ */
|
|
4284
|
+
import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4285
|
+
var ChatIcon = () => /* @__PURE__ */ jsx9("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
|
|
4286
|
+
var CloseIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
4287
|
+
/* @__PURE__ */ jsx9("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
4288
|
+
/* @__PURE__ */ jsx9("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
3987
4289
|
] });
|
|
3988
|
-
var ExpandIcon = () => /* @__PURE__ */
|
|
3989
|
-
/* @__PURE__ */
|
|
3990
|
-
/* @__PURE__ */
|
|
3991
|
-
/* @__PURE__ */
|
|
3992
|
-
/* @__PURE__ */
|
|
4290
|
+
var ExpandIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
4291
|
+
/* @__PURE__ */ jsx9("polyline", { points: "15 3 21 3 21 9" }),
|
|
4292
|
+
/* @__PURE__ */ jsx9("polyline", { points: "9 21 3 21 3 15" }),
|
|
4293
|
+
/* @__PURE__ */ jsx9("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
|
|
4294
|
+
/* @__PURE__ */ jsx9("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
|
|
3993
4295
|
] });
|
|
3994
|
-
var CollapseIcon = () => /* @__PURE__ */
|
|
3995
|
-
/* @__PURE__ */
|
|
3996
|
-
/* @__PURE__ */
|
|
3997
|
-
/* @__PURE__ */
|
|
3998
|
-
/* @__PURE__ */
|
|
4296
|
+
var CollapseIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
4297
|
+
/* @__PURE__ */ jsx9("polyline", { points: "4 14 10 14 10 20" }),
|
|
4298
|
+
/* @__PURE__ */ jsx9("polyline", { points: "20 10 14 10 14 4" }),
|
|
4299
|
+
/* @__PURE__ */ jsx9("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
|
|
4300
|
+
/* @__PURE__ */ jsx9("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
|
|
3999
4301
|
] });
|
|
4000
|
-
var SendIcon = () => /* @__PURE__ */
|
|
4001
|
-
/* @__PURE__ */
|
|
4002
|
-
/* @__PURE__ */
|
|
4302
|
+
var SendIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
4303
|
+
/* @__PURE__ */ jsx9("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
|
|
4304
|
+
/* @__PURE__ */ jsx9("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
|
|
4003
4305
|
] });
|
|
4004
|
-
var LayersIcon = () => /* @__PURE__ */
|
|
4005
|
-
/* @__PURE__ */
|
|
4006
|
-
/* @__PURE__ */
|
|
4007
|
-
/* @__PURE__ */
|
|
4306
|
+
var LayersIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
4307
|
+
/* @__PURE__ */ jsx9("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
|
|
4308
|
+
/* @__PURE__ */ jsx9("polyline", { points: "2 17 12 22 22 17" }),
|
|
4309
|
+
/* @__PURE__ */ jsx9("polyline", { points: "2 12 12 17 22 12" })
|
|
4008
4310
|
] });
|
|
4009
4311
|
var styles = {
|
|
4010
4312
|
root: {
|
|
@@ -4471,13 +4773,13 @@ var FloatingChatBox = ({
|
|
|
4471
4773
|
if (!response?.metadata) return null;
|
|
4472
4774
|
const referencedLayers = response.metadata.referencedLayers;
|
|
4473
4775
|
if (!referencedLayers || referencedLayers.length === 0) return null;
|
|
4474
|
-
return /* @__PURE__ */
|
|
4475
|
-
/* @__PURE__ */
|
|
4476
|
-
/* @__PURE__ */
|
|
4776
|
+
return /* @__PURE__ */ jsxs8("div", { style: styles.metadataSection, children: [
|
|
4777
|
+
/* @__PURE__ */ jsxs8("div", { style: styles.metadataTitle, children: [
|
|
4778
|
+
/* @__PURE__ */ jsx9(LayersIcon, {}),
|
|
4477
4779
|
"Capas Analizadas"
|
|
4478
4780
|
] }),
|
|
4479
|
-
/* @__PURE__ */
|
|
4480
|
-
/* @__PURE__ */
|
|
4781
|
+
/* @__PURE__ */ jsx9("ul", { style: styles.metadataList, children: referencedLayers.map((layer, index) => /* @__PURE__ */ jsxs8("li", { style: styles.metadataItem, children: [
|
|
4782
|
+
/* @__PURE__ */ jsx9("strong", { children: layer.layerName }),
|
|
4481
4783
|
" (",
|
|
4482
4784
|
layer.featureCount,
|
|
4483
4785
|
" ",
|
|
@@ -4495,9 +4797,9 @@ var FloatingChatBox = ({
|
|
|
4495
4797
|
}, [isStreaming, setOpen, onActionClick]);
|
|
4496
4798
|
const renderActions = (response) => {
|
|
4497
4799
|
if (!response?.suggestedActions?.length) return null;
|
|
4498
|
-
return /* @__PURE__ */
|
|
4499
|
-
/* @__PURE__ */
|
|
4500
|
-
/* @__PURE__ */
|
|
4800
|
+
return /* @__PURE__ */ jsxs8("div", { style: styles.actionsSection, children: [
|
|
4801
|
+
/* @__PURE__ */ jsx9("div", { style: styles.sectionLabel, children: "Acciones Sugeridas" }),
|
|
4802
|
+
/* @__PURE__ */ jsx9("div", { style: styles.actionsGrid, children: response.suggestedActions.map((action, index) => /* @__PURE__ */ jsx9(
|
|
4501
4803
|
"button",
|
|
4502
4804
|
{
|
|
4503
4805
|
type: "button",
|
|
@@ -4528,9 +4830,9 @@ var FloatingChatBox = ({
|
|
|
4528
4830
|
};
|
|
4529
4831
|
const renderFollowUps = (response) => {
|
|
4530
4832
|
if (!response?.followUpQuestions?.length) return null;
|
|
4531
|
-
return /* @__PURE__ */
|
|
4532
|
-
/* @__PURE__ */
|
|
4533
|
-
/* @__PURE__ */
|
|
4833
|
+
return /* @__PURE__ */ jsxs8("div", { style: styles.actionsSection, children: [
|
|
4834
|
+
/* @__PURE__ */ jsx9("div", { style: styles.sectionLabel, children: "Preguntas Relacionadas" }),
|
|
4835
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: response.followUpQuestions.map((question, index) => /* @__PURE__ */ jsx9(
|
|
4534
4836
|
"button",
|
|
4535
4837
|
{
|
|
4536
4838
|
type: "button",
|
|
@@ -4559,8 +4861,8 @@ var FloatingChatBox = ({
|
|
|
4559
4861
|
)) })
|
|
4560
4862
|
] });
|
|
4561
4863
|
};
|
|
4562
|
-
const chatContent = /* @__PURE__ */
|
|
4563
|
-
/* @__PURE__ */
|
|
4864
|
+
const chatContent = /* @__PURE__ */ jsxs8("div", { style: styles.root, children: [
|
|
4865
|
+
/* @__PURE__ */ jsx9("style", { children: `
|
|
4564
4866
|
@keyframes zenitBlink {
|
|
4565
4867
|
0%, 49% { opacity: 1; }
|
|
4566
4868
|
50%, 100% { opacity: 0; }
|
|
@@ -4616,7 +4918,7 @@ var FloatingChatBox = ({
|
|
|
4616
4918
|
}
|
|
4617
4919
|
}
|
|
4618
4920
|
` }),
|
|
4619
|
-
open && /* @__PURE__ */
|
|
4921
|
+
open && /* @__PURE__ */ jsxs8(
|
|
4620
4922
|
"div",
|
|
4621
4923
|
{
|
|
4622
4924
|
ref: chatBoxRef,
|
|
@@ -4630,10 +4932,10 @@ var FloatingChatBox = ({
|
|
|
4630
4932
|
};
|
|
4631
4933
|
})(),
|
|
4632
4934
|
children: [
|
|
4633
|
-
/* @__PURE__ */
|
|
4634
|
-
/* @__PURE__ */
|
|
4635
|
-
/* @__PURE__ */
|
|
4636
|
-
!isMobile && /* @__PURE__ */
|
|
4935
|
+
/* @__PURE__ */ jsxs8("header", { style: styles.header, children: [
|
|
4936
|
+
/* @__PURE__ */ jsx9("h3", { style: styles.title, children: "Asistente Zenit AI" }),
|
|
4937
|
+
/* @__PURE__ */ jsxs8("div", { style: styles.headerButtons, children: [
|
|
4938
|
+
!isMobile && /* @__PURE__ */ jsx9(
|
|
4637
4939
|
"button",
|
|
4638
4940
|
{
|
|
4639
4941
|
type: "button",
|
|
@@ -4646,10 +4948,10 @@ var FloatingChatBox = ({
|
|
|
4646
4948
|
e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
|
|
4647
4949
|
},
|
|
4648
4950
|
"aria-label": expanded ? "Contraer" : "Expandir",
|
|
4649
|
-
children: expanded ? /* @__PURE__ */
|
|
4951
|
+
children: expanded ? /* @__PURE__ */ jsx9(CollapseIcon, {}) : /* @__PURE__ */ jsx9(ExpandIcon, {})
|
|
4650
4952
|
}
|
|
4651
4953
|
),
|
|
4652
|
-
/* @__PURE__ */
|
|
4954
|
+
/* @__PURE__ */ jsx9(
|
|
4653
4955
|
"button",
|
|
4654
4956
|
{
|
|
4655
4957
|
type: "button",
|
|
@@ -4662,20 +4964,20 @@ var FloatingChatBox = ({
|
|
|
4662
4964
|
e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
|
|
4663
4965
|
},
|
|
4664
4966
|
"aria-label": "Cerrar",
|
|
4665
|
-
children: /* @__PURE__ */
|
|
4967
|
+
children: /* @__PURE__ */ jsx9(CloseIcon, {})
|
|
4666
4968
|
}
|
|
4667
4969
|
)
|
|
4668
4970
|
] })
|
|
4669
4971
|
] }),
|
|
4670
|
-
/* @__PURE__ */
|
|
4671
|
-
messages.map((message) => /* @__PURE__ */
|
|
4972
|
+
/* @__PURE__ */ jsxs8("div", { ref: messagesContainerRef, className: "zenit-ai-body", style: styles.messages, children: [
|
|
4973
|
+
messages.map((message) => /* @__PURE__ */ jsx9(
|
|
4672
4974
|
"div",
|
|
4673
4975
|
{
|
|
4674
4976
|
style: {
|
|
4675
4977
|
...styles.messageWrapper,
|
|
4676
4978
|
alignItems: message.role === "user" ? "flex-end" : "flex-start"
|
|
4677
4979
|
},
|
|
4678
|
-
children: /* @__PURE__ */
|
|
4980
|
+
children: /* @__PURE__ */ jsxs8(
|
|
4679
4981
|
"div",
|
|
4680
4982
|
{
|
|
4681
4983
|
style: {
|
|
@@ -4683,7 +4985,7 @@ var FloatingChatBox = ({
|
|
|
4683
4985
|
...message.role === "user" ? styles.userMessage : styles.assistantMessage
|
|
4684
4986
|
},
|
|
4685
4987
|
children: [
|
|
4686
|
-
message.role === "assistant" ? /* @__PURE__ */
|
|
4988
|
+
message.role === "assistant" ? /* @__PURE__ */ jsx9(MarkdownRenderer, { content: message.content }) : message.content,
|
|
4687
4989
|
message.role === "assistant" && renderMetadata(message.response),
|
|
4688
4990
|
message.role === "assistant" && renderActions(message.response),
|
|
4689
4991
|
message.role === "assistant" && renderFollowUps(message.response)
|
|
@@ -4693,39 +4995,39 @@ var FloatingChatBox = ({
|
|
|
4693
4995
|
},
|
|
4694
4996
|
message.id
|
|
4695
4997
|
)),
|
|
4696
|
-
isStreaming && /* @__PURE__ */
|
|
4998
|
+
isStreaming && /* @__PURE__ */ jsx9(
|
|
4697
4999
|
"div",
|
|
4698
5000
|
{
|
|
4699
5001
|
style: {
|
|
4700
5002
|
...styles.messageWrapper,
|
|
4701
5003
|
alignItems: "flex-start"
|
|
4702
5004
|
},
|
|
4703
|
-
children: /* @__PURE__ */
|
|
5005
|
+
children: /* @__PURE__ */ jsx9(
|
|
4704
5006
|
"div",
|
|
4705
5007
|
{
|
|
4706
5008
|
style: {
|
|
4707
5009
|
...styles.messageBubble,
|
|
4708
5010
|
...styles.assistantMessage
|
|
4709
5011
|
},
|
|
4710
|
-
children: streamingText ? /* @__PURE__ */
|
|
4711
|
-
/* @__PURE__ */
|
|
4712
|
-
/* @__PURE__ */
|
|
4713
|
-
] }) : /* @__PURE__ */
|
|
4714
|
-
/* @__PURE__ */
|
|
4715
|
-
/* @__PURE__ */
|
|
4716
|
-
/* @__PURE__ */
|
|
4717
|
-
/* @__PURE__ */
|
|
4718
|
-
/* @__PURE__ */
|
|
5012
|
+
children: streamingText ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
|
|
5013
|
+
/* @__PURE__ */ jsx9(MarkdownRenderer, { content: streamingText }),
|
|
5014
|
+
/* @__PURE__ */ jsx9("span", { style: styles.cursor })
|
|
5015
|
+
] }) : /* @__PURE__ */ jsxs8("div", { style: styles.thinkingText, children: [
|
|
5016
|
+
/* @__PURE__ */ jsx9("span", { children: "Pensando" }),
|
|
5017
|
+
/* @__PURE__ */ jsxs8("div", { style: styles.typingIndicator, children: [
|
|
5018
|
+
/* @__PURE__ */ jsx9("div", { className: "zenit-typing-dot", style: styles.typingDot }),
|
|
5019
|
+
/* @__PURE__ */ jsx9("div", { className: "zenit-typing-dot", style: styles.typingDot }),
|
|
5020
|
+
/* @__PURE__ */ jsx9("div", { className: "zenit-typing-dot", style: styles.typingDot })
|
|
4719
5021
|
] })
|
|
4720
5022
|
] })
|
|
4721
5023
|
}
|
|
4722
5024
|
)
|
|
4723
5025
|
}
|
|
4724
5026
|
),
|
|
4725
|
-
/* @__PURE__ */
|
|
5027
|
+
/* @__PURE__ */ jsx9("div", { ref: messagesEndRef })
|
|
4726
5028
|
] }),
|
|
4727
|
-
/* @__PURE__ */
|
|
4728
|
-
/* @__PURE__ */
|
|
5029
|
+
/* @__PURE__ */ jsxs8("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
|
|
5030
|
+
/* @__PURE__ */ jsx9(
|
|
4729
5031
|
"textarea",
|
|
4730
5032
|
{
|
|
4731
5033
|
style: {
|
|
@@ -4742,7 +5044,7 @@ var FloatingChatBox = ({
|
|
|
4742
5044
|
disabled: !mapId || !baseUrl || isStreaming
|
|
4743
5045
|
}
|
|
4744
5046
|
),
|
|
4745
|
-
/* @__PURE__ */
|
|
5047
|
+
/* @__PURE__ */ jsx9(
|
|
4746
5048
|
"button",
|
|
4747
5049
|
{
|
|
4748
5050
|
type: "button",
|
|
@@ -4751,18 +5053,18 @@ var FloatingChatBox = ({
|
|
|
4751
5053
|
onClick: () => void handleSend(),
|
|
4752
5054
|
disabled: !canSend,
|
|
4753
5055
|
"aria-label": "Enviar mensaje",
|
|
4754
|
-
children: /* @__PURE__ */
|
|
5056
|
+
children: /* @__PURE__ */ jsx9(SendIcon, {})
|
|
4755
5057
|
}
|
|
4756
5058
|
)
|
|
4757
5059
|
] }),
|
|
4758
|
-
errorMessage && /* @__PURE__ */
|
|
4759
|
-
isStreaming && !errorMessage && /* @__PURE__ */
|
|
4760
|
-
!mapId && !errorMessage && /* @__PURE__ */
|
|
4761
|
-
!baseUrl && !errorMessage && /* @__PURE__ */
|
|
5060
|
+
errorMessage && /* @__PURE__ */ jsx9("div", { style: styles.errorText, children: errorMessage }),
|
|
5061
|
+
isStreaming && !errorMessage && /* @__PURE__ */ jsx9("div", { style: styles.statusNote, children: "Generando sugerencias..." }),
|
|
5062
|
+
!mapId && !errorMessage && /* @__PURE__ */ jsx9("div", { style: styles.statusNote, children: "Selecciona un mapa para usar el asistente" }),
|
|
5063
|
+
!baseUrl && !errorMessage && /* @__PURE__ */ jsx9("div", { style: styles.statusNote, children: "Configura la baseUrl del SDK" })
|
|
4762
5064
|
]
|
|
4763
5065
|
}
|
|
4764
5066
|
),
|
|
4765
|
-
!(hideButton && !open) && /* @__PURE__ */
|
|
5067
|
+
!(hideButton && !open) && /* @__PURE__ */ jsx9(
|
|
4766
5068
|
"button",
|
|
4767
5069
|
{
|
|
4768
5070
|
type: "button",
|
|
@@ -4774,9 +5076,9 @@ var FloatingChatBox = ({
|
|
|
4774
5076
|
},
|
|
4775
5077
|
onClick: () => setOpen((prev) => !prev),
|
|
4776
5078
|
"aria-label": open ? "Cerrar asistente" : "Abrir asistente Zenit AI",
|
|
4777
|
-
children: open ? /* @__PURE__ */
|
|
4778
|
-
/* @__PURE__ */
|
|
4779
|
-
!isMobile && /* @__PURE__ */
|
|
5079
|
+
children: open ? /* @__PURE__ */ jsx9(CloseIcon, {}) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
|
|
5080
|
+
/* @__PURE__ */ jsx9(ChatIcon, {}),
|
|
5081
|
+
!isMobile && /* @__PURE__ */ jsx9("span", { children: "Asistente IA" })
|
|
4780
5082
|
] })
|
|
4781
5083
|
}
|
|
4782
5084
|
)
|
|
@@ -4827,4 +5129,4 @@ export {
|
|
|
4827
5129
|
useSendMessageStream,
|
|
4828
5130
|
FloatingChatBox
|
|
4829
5131
|
};
|
|
4830
|
-
//# sourceMappingURL=chunk-
|
|
5132
|
+
//# sourceMappingURL=chunk-HCGYF65R.mjs.map
|