zenit-sdk 0.1.6 → 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/README.md +1 -1
- package/dist/{chunk-J2YWF2TS.mjs → chunk-HCGYF65R.mjs} +498 -196
- package/dist/chunk-HCGYF65R.mjs.map +1 -0
- package/dist/{index-uCIChcHJ.d.mts → index-Cp6tg4tg.d.mts} +9 -7
- package/dist/{index-uCIChcHJ.d.ts → index-Cp6tg4tg.d.ts} +9 -7
- package/dist/index.d.mts +17 -3
- package/dist/index.d.ts +17 -3
- package/dist/index.js +591 -266
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +24 -2
- package/dist/index.mjs.map +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
package/dist/index.js
CHANGED
|
@@ -76,6 +76,7 @@ __export(src_exports, {
|
|
|
76
76
|
getStyleByLayerId: () => getStyleByLayerId,
|
|
77
77
|
getZoomOpacityFactor: () => getZoomOpacityFactor,
|
|
78
78
|
initLayerStates: () => initLayerStates,
|
|
79
|
+
initZenit: () => initZenit,
|
|
79
80
|
isPolygonLayer: () => isPolygonLayer,
|
|
80
81
|
mergeFilters: () => mergeFilters,
|
|
81
82
|
normalizeBbox: () => normalizeBbox,
|
|
@@ -1065,7 +1066,12 @@ var normalizeFilters = (filters) => {
|
|
|
1065
1066
|
if (!isPlainRecord(filters)) {
|
|
1066
1067
|
return {};
|
|
1067
1068
|
}
|
|
1068
|
-
return
|
|
1069
|
+
return Object.entries(filters).reduce((acc, [key, value]) => {
|
|
1070
|
+
if (typeof value === "string") {
|
|
1071
|
+
acc[key] = value;
|
|
1072
|
+
}
|
|
1073
|
+
return acc;
|
|
1074
|
+
}, {});
|
|
1069
1075
|
};
|
|
1070
1076
|
var mergeFilters = (base = {}, next = {}) => ({
|
|
1071
1077
|
...base,
|
|
@@ -1527,6 +1533,22 @@ function normalizeBbox(input) {
|
|
|
1527
1533
|
return null;
|
|
1528
1534
|
}
|
|
1529
1535
|
|
|
1536
|
+
// src/initZenit.ts
|
|
1537
|
+
function initZenit(config) {
|
|
1538
|
+
const sdkConfig = {
|
|
1539
|
+
baseUrl: config.baseUrl,
|
|
1540
|
+
accessToken: config.accessToken,
|
|
1541
|
+
sdkToken: config.sdkToken,
|
|
1542
|
+
defaultFilters: config.defaultFilters
|
|
1543
|
+
};
|
|
1544
|
+
const client = new ZenitClient(sdkConfig);
|
|
1545
|
+
return {
|
|
1546
|
+
client,
|
|
1547
|
+
mapId: config.mapId,
|
|
1548
|
+
defaultFilters: config.defaultFilters ? { ...config.defaultFilters } : void 0
|
|
1549
|
+
};
|
|
1550
|
+
}
|
|
1551
|
+
|
|
1530
1552
|
// src/react/ZenitMap.tsx
|
|
1531
1553
|
var import_react5 = __toESM(require("react"));
|
|
1532
1554
|
var import_react_leaflet4 = require("react-leaflet");
|
|
@@ -1802,6 +1824,14 @@ var LayerGeoJson = ({
|
|
|
1802
1824
|
onEachFeature,
|
|
1803
1825
|
onPolygonLabel
|
|
1804
1826
|
}) => {
|
|
1827
|
+
const styleFnRef = (0, import_react.useRef)(styleFn);
|
|
1828
|
+
const onEachFeatureRef = (0, import_react.useRef)(onEachFeature);
|
|
1829
|
+
(0, import_react.useEffect)(() => {
|
|
1830
|
+
styleFnRef.current = styleFn;
|
|
1831
|
+
}, [styleFn]);
|
|
1832
|
+
(0, import_react.useEffect)(() => {
|
|
1833
|
+
onEachFeatureRef.current = onEachFeature;
|
|
1834
|
+
}, [onEachFeature]);
|
|
1805
1835
|
const safeData = (0, import_react.useMemo)(() => sanitizeGeoJson(data, String(layerId)), [data, layerId]);
|
|
1806
1836
|
const features = (0, import_react.useMemo)(() => safeData.features ?? [], [safeData]);
|
|
1807
1837
|
const fillFeatures = (0, import_react.useMemo)(() => features.filter(isNonPointGeometry), [features]);
|
|
@@ -1845,14 +1875,14 @@ var LayerGeoJson = ({
|
|
|
1845
1875
|
if (!isValidLatLng(latlng)) {
|
|
1846
1876
|
return createInvisibleFallbackClusterMarker();
|
|
1847
1877
|
}
|
|
1848
|
-
const style =
|
|
1878
|
+
const style = styleFnRef.current(feature, layerType, baseOpacity);
|
|
1849
1879
|
return import_leaflet.default.marker(latlng, {
|
|
1850
1880
|
icon: createPointDivIcon(style, isMobile),
|
|
1851
1881
|
pane: clusterPaneName,
|
|
1852
1882
|
interactive: true
|
|
1853
1883
|
});
|
|
1854
1884
|
},
|
|
1855
|
-
onEachFeature
|
|
1885
|
+
onEachFeature: (feature, layer) => onEachFeatureRef.current(feature, layer)
|
|
1856
1886
|
});
|
|
1857
1887
|
clusterLayer.addLayer(geoJsonLayer);
|
|
1858
1888
|
return () => {
|
|
@@ -1867,11 +1897,9 @@ var LayerGeoJson = ({
|
|
|
1867
1897
|
isMobile,
|
|
1868
1898
|
layerType,
|
|
1869
1899
|
mapInstance,
|
|
1870
|
-
onEachFeature,
|
|
1871
1900
|
panesReady,
|
|
1872
1901
|
pointsData,
|
|
1873
|
-
resolvedPointsPane
|
|
1874
|
-
styleFn
|
|
1902
|
+
resolvedPointsPane
|
|
1875
1903
|
]);
|
|
1876
1904
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
1877
1905
|
fillData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -2783,6 +2811,14 @@ function pickIntersectFeature(params) {
|
|
|
2783
2811
|
selectedIdx: candidates.findIndex((candidate) => candidate === feature),
|
|
2784
2812
|
reason
|
|
2785
2813
|
});
|
|
2814
|
+
if (clickIntent === "point") {
|
|
2815
|
+
const anyPoint = candidates.find(
|
|
2816
|
+
(c) => isCandidateGeometryType(c, POINT_GEOMETRY_TYPES2)
|
|
2817
|
+
);
|
|
2818
|
+
if (anyPoint) {
|
|
2819
|
+
return getResult(anyPoint, "point:first-point-geometry");
|
|
2820
|
+
}
|
|
2821
|
+
}
|
|
2786
2822
|
const sameLayer = candidates.filter(
|
|
2787
2823
|
(candidate) => isLayerIdMatch(candidateLayerId(candidate), expectedLayerId)
|
|
2788
2824
|
);
|
|
@@ -3219,7 +3255,7 @@ var ZenitMap = (0, import_react5.forwardRef)(({
|
|
|
3219
3255
|
const ensureLayerPanes = (0, import_react5.useCallback)(
|
|
3220
3256
|
(targetMap, targetLayers) => {
|
|
3221
3257
|
const fillBaseZIndex = 400;
|
|
3222
|
-
const pointsBaseZIndex =
|
|
3258
|
+
const pointsBaseZIndex = 750;
|
|
3223
3259
|
targetLayers.forEach((layer) => {
|
|
3224
3260
|
const order = Number.isFinite(layer.displayOrder) ? layer.displayOrder : 0;
|
|
3225
3261
|
const orderOffset = Math.max(0, Math.min(order, 150));
|
|
@@ -3303,7 +3339,10 @@ var ZenitMap = (0, import_react5.forwardRef)(({
|
|
|
3303
3339
|
className: "zenit-map-tooltip"
|
|
3304
3340
|
});
|
|
3305
3341
|
}
|
|
3306
|
-
layer.on("click", () => {
|
|
3342
|
+
layer.on("click", (e) => {
|
|
3343
|
+
if (clickIntent === "point") {
|
|
3344
|
+
import_leaflet4.default.DomEvent.stopPropagation(e);
|
|
3345
|
+
}
|
|
3307
3346
|
if (featureInfoMode === "popup" && client && layerId !== void 0 && !extractDescriptionValue(feature?.properties) && feature?.geometry) {
|
|
3308
3347
|
if (DEV_MODE2) {
|
|
3309
3348
|
console.debug("[ZenitMap] click/intersect:start", {
|
|
@@ -3403,11 +3442,16 @@ var ZenitMap = (0, import_react5.forwardRef)(({
|
|
|
3403
3442
|
properties: feature?.properties ?? void 0
|
|
3404
3443
|
});
|
|
3405
3444
|
}, [currentZoom, resolveLayerStyle]);
|
|
3406
|
-
const
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
|
|
3445
|
+
const styleFnByLayerId = (0, import_react5.useMemo)(() => {
|
|
3446
|
+
const next = /* @__PURE__ */ new Map();
|
|
3447
|
+
orderedLayers.forEach((layerState) => {
|
|
3448
|
+
const layerId = layerState.mapLayer.layerId;
|
|
3449
|
+
next.set(String(layerId), (feature, layerType, baseOpacity) => {
|
|
3450
|
+
return buildLayerStyle(layerId, baseOpacity ?? 1, feature, layerType);
|
|
3451
|
+
});
|
|
3452
|
+
});
|
|
3453
|
+
return next;
|
|
3454
|
+
}, [buildLayerStyle, orderedLayers]);
|
|
3411
3455
|
(0, import_react5.useImperativeHandle)(ref, () => ({
|
|
3412
3456
|
setLayerOpacity: (layerId, opacity) => {
|
|
3413
3457
|
upsertUiOverride(layerId, { overrideOpacity: opacity });
|
|
@@ -3574,7 +3618,7 @@ var ZenitMap = (0, import_react5.forwardRef)(({
|
|
|
3574
3618
|
fillPaneName,
|
|
3575
3619
|
pointsPaneName,
|
|
3576
3620
|
layerType,
|
|
3577
|
-
styleFn:
|
|
3621
|
+
styleFn: styleFnByLayerId.get(String(layerState.mapLayer.layerId)) ?? ((feature, layerType2, baseOpacity2) => buildLayerStyle(layerState.mapLayer.layerId, baseOpacity2 ?? 1, feature, layerType2)),
|
|
3578
3622
|
onEachFeature: overlayOnEachFeature,
|
|
3579
3623
|
onPolygonLabel: labelKey ? (feature, layer) => {
|
|
3580
3624
|
const geometryType = feature?.geometry?.type;
|
|
@@ -3718,7 +3762,7 @@ var ZenitMap = (0, import_react5.forwardRef)(({
|
|
|
3718
3762
|
ZenitMap.displayName = "ZenitMap";
|
|
3719
3763
|
|
|
3720
3764
|
// src/react/ZenitLayerManager.tsx
|
|
3721
|
-
var
|
|
3765
|
+
var import_react8 = __toESM(require("react"));
|
|
3722
3766
|
|
|
3723
3767
|
// src/react/icons.tsx
|
|
3724
3768
|
var import_lucide_react = require("lucide-react");
|
|
@@ -4076,9 +4120,191 @@ var ZenitSelect = ({
|
|
|
4076
4120
|
] });
|
|
4077
4121
|
};
|
|
4078
4122
|
|
|
4079
|
-
// src/react/
|
|
4123
|
+
// src/react/ui/ZenitCombobox.tsx
|
|
4124
|
+
var import_react7 = __toESM(require("react"));
|
|
4080
4125
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
4126
|
+
var ZenitCombobox = ({
|
|
4127
|
+
options,
|
|
4128
|
+
value,
|
|
4129
|
+
onChange,
|
|
4130
|
+
placeholder = "Seleccionar\u2026",
|
|
4131
|
+
searchPlaceholder = "Buscar\u2026",
|
|
4132
|
+
disabled = false
|
|
4133
|
+
}) => {
|
|
4134
|
+
const rootRef = import_react7.default.useRef(null);
|
|
4135
|
+
const [isOpen, setIsOpen] = import_react7.default.useState(false);
|
|
4136
|
+
const [query, setQuery] = import_react7.default.useState("");
|
|
4137
|
+
const filteredOptions = import_react7.default.useMemo(() => {
|
|
4138
|
+
const normalized = query.trim().toLowerCase();
|
|
4139
|
+
if (!normalized) return options;
|
|
4140
|
+
return options.filter((option) => option.toLowerCase().includes(normalized));
|
|
4141
|
+
}, [options, query]);
|
|
4142
|
+
import_react7.default.useEffect(() => {
|
|
4143
|
+
if (!isOpen) return;
|
|
4144
|
+
const onClickOutside = (event) => {
|
|
4145
|
+
if (!rootRef.current?.contains(event.target)) {
|
|
4146
|
+
setIsOpen(false);
|
|
4147
|
+
}
|
|
4148
|
+
};
|
|
4149
|
+
const onEscape = (event) => {
|
|
4150
|
+
if (event.key === "Escape") {
|
|
4151
|
+
setIsOpen(false);
|
|
4152
|
+
}
|
|
4153
|
+
};
|
|
4154
|
+
document.addEventListener("mousedown", onClickOutside);
|
|
4155
|
+
document.addEventListener("keydown", onEscape);
|
|
4156
|
+
return () => {
|
|
4157
|
+
document.removeEventListener("mousedown", onClickOutside);
|
|
4158
|
+
document.removeEventListener("keydown", onEscape);
|
|
4159
|
+
};
|
|
4160
|
+
}, [isOpen]);
|
|
4161
|
+
import_react7.default.useEffect(() => {
|
|
4162
|
+
if (!isOpen) {
|
|
4163
|
+
setQuery("");
|
|
4164
|
+
}
|
|
4165
|
+
}, [isOpen]);
|
|
4166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: rootRef, className: "zenit-combobox-root", style: { position: "relative" }, children: [
|
|
4167
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
|
|
4168
|
+
.zenit-combobox-trigger {
|
|
4169
|
+
width: 100%;
|
|
4170
|
+
min-height: 40px;
|
|
4171
|
+
height: 40px;
|
|
4172
|
+
border: 1px solid #cbd5e1;
|
|
4173
|
+
border-radius: 6px;
|
|
4174
|
+
background: #ffffff;
|
|
4175
|
+
color: #0f172a;
|
|
4176
|
+
display: inline-flex;
|
|
4177
|
+
align-items: center;
|
|
4178
|
+
padding: 0 12px;
|
|
4179
|
+
font-size: 14px;
|
|
4180
|
+
line-height: 1.25;
|
|
4181
|
+
cursor: pointer;
|
|
4182
|
+
text-align: left;
|
|
4183
|
+
}
|
|
4184
|
+
.zenit-combobox-trigger.is-placeholder {
|
|
4185
|
+
color: #64748b;
|
|
4186
|
+
}
|
|
4187
|
+
.zenit-combobox-trigger:disabled {
|
|
4188
|
+
opacity: 0.6;
|
|
4189
|
+
cursor: not-allowed;
|
|
4190
|
+
}
|
|
4191
|
+
.zenit-combobox-content {
|
|
4192
|
+
position: absolute;
|
|
4193
|
+
top: calc(100% + 6px);
|
|
4194
|
+
left: 0;
|
|
4195
|
+
right: 0;
|
|
4196
|
+
border: 1px solid #cbd5e1;
|
|
4197
|
+
border-radius: 6px;
|
|
4198
|
+
background: #ffffff;
|
|
4199
|
+
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
|
|
4200
|
+
padding: 8px;
|
|
4201
|
+
z-index: 4000;
|
|
4202
|
+
}
|
|
4203
|
+
.zenit-combobox-search {
|
|
4204
|
+
width: 100%;
|
|
4205
|
+
min-height: 36px;
|
|
4206
|
+
border: 1px solid #cbd5e1;
|
|
4207
|
+
border-radius: 6px;
|
|
4208
|
+
background: #ffffff;
|
|
4209
|
+
color: #0f172a;
|
|
4210
|
+
padding: 0 10px;
|
|
4211
|
+
font-size: 14px;
|
|
4212
|
+
margin-bottom: 8px;
|
|
4213
|
+
box-sizing: border-box;
|
|
4214
|
+
}
|
|
4215
|
+
.zenit-combobox-list {
|
|
4216
|
+
max-height: 220px;
|
|
4217
|
+
overflow-y: auto;
|
|
4218
|
+
}
|
|
4219
|
+
.zenit-combobox-item {
|
|
4220
|
+
width: 100%;
|
|
4221
|
+
border-radius: 4px;
|
|
4222
|
+
color: #0f172a;
|
|
4223
|
+
font-size: 14px;
|
|
4224
|
+
min-height: 34px;
|
|
4225
|
+
padding: 8px 10px;
|
|
4226
|
+
cursor: pointer;
|
|
4227
|
+
user-select: none;
|
|
4228
|
+
}
|
|
4229
|
+
.zenit-combobox-item:hover { background: #f1f5f9; }
|
|
4230
|
+
.zenit-combobox-item.is-selected { background: #e2e8f0; font-weight: 600; }
|
|
4231
|
+
` }),
|
|
4232
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4233
|
+
"button",
|
|
4234
|
+
{
|
|
4235
|
+
type: "button",
|
|
4236
|
+
className: `zenit-combobox-trigger${!value ? " is-placeholder" : ""}`,
|
|
4237
|
+
disabled,
|
|
4238
|
+
onClick: () => !disabled && setIsOpen((prev) => !prev),
|
|
4239
|
+
children: value || placeholder
|
|
4240
|
+
}
|
|
4241
|
+
),
|
|
4242
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "zenit-combobox-content", children: [
|
|
4243
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4244
|
+
"input",
|
|
4245
|
+
{
|
|
4246
|
+
className: "zenit-combobox-search",
|
|
4247
|
+
value: query,
|
|
4248
|
+
onChange: (event) => setQuery(event.target.value),
|
|
4249
|
+
placeholder: searchPlaceholder,
|
|
4250
|
+
autoFocus: true
|
|
4251
|
+
}
|
|
4252
|
+
),
|
|
4253
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "zenit-combobox-list", children: [
|
|
4254
|
+
filteredOptions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "zenit-combobox-item", style: { color: "#64748b", cursor: "default" }, children: "Sin coincidencias" }),
|
|
4255
|
+
filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4256
|
+
"div",
|
|
4257
|
+
{
|
|
4258
|
+
className: `zenit-combobox-item${option === value ? " is-selected" : ""}`,
|
|
4259
|
+
onClick: () => {
|
|
4260
|
+
onChange(option);
|
|
4261
|
+
setIsOpen(false);
|
|
4262
|
+
},
|
|
4263
|
+
children: option
|
|
4264
|
+
},
|
|
4265
|
+
option
|
|
4266
|
+
))
|
|
4267
|
+
] })
|
|
4268
|
+
] })
|
|
4269
|
+
] });
|
|
4270
|
+
};
|
|
4271
|
+
|
|
4272
|
+
// src/react/ZenitLayerManager.tsx
|
|
4273
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
4081
4274
|
var FLOAT_TOLERANCE = 1e-3;
|
|
4275
|
+
var CATALOG_FIELD_BLACKLIST = /* @__PURE__ */ new Set([
|
|
4276
|
+
"mapids",
|
|
4277
|
+
"mapId",
|
|
4278
|
+
"mapIDs",
|
|
4279
|
+
"mapId",
|
|
4280
|
+
"field",
|
|
4281
|
+
"Field",
|
|
4282
|
+
"objectid",
|
|
4283
|
+
"OBJECTID",
|
|
4284
|
+
"objectId",
|
|
4285
|
+
"gforms",
|
|
4286
|
+
"GFORMS",
|
|
4287
|
+
"nomina",
|
|
4288
|
+
"NOMINA",
|
|
4289
|
+
"shape_area",
|
|
4290
|
+
"SHAPE_AREA",
|
|
4291
|
+
"shape_leng",
|
|
4292
|
+
"SHAPE_LENG",
|
|
4293
|
+
"fid",
|
|
4294
|
+
"FID",
|
|
4295
|
+
"gid",
|
|
4296
|
+
"GID",
|
|
4297
|
+
"created_at",
|
|
4298
|
+
"updated_at",
|
|
4299
|
+
"created_user",
|
|
4300
|
+
"last_edited_user",
|
|
4301
|
+
"globalid",
|
|
4302
|
+
"GLOBALID"
|
|
4303
|
+
]);
|
|
4304
|
+
function isFieldVisible(key) {
|
|
4305
|
+
return !CATALOG_FIELD_BLACKLIST.has(key) && !key.startsWith("_") && !key.startsWith("__");
|
|
4306
|
+
}
|
|
4307
|
+
var matchesWhitelist = (key, whitelist) => whitelist.some((w) => w.toUpperCase() === key.toUpperCase());
|
|
4082
4308
|
function areEffectiveStatesEqual(a, b) {
|
|
4083
4309
|
if (a.length !== b.length) return false;
|
|
4084
4310
|
return a.every((state, index) => {
|
|
@@ -4117,26 +4343,29 @@ var ZenitLayerManager = ({
|
|
|
4117
4343
|
layerFeatureCounts,
|
|
4118
4344
|
mapLayers,
|
|
4119
4345
|
onApplyLayerFilter,
|
|
4120
|
-
onClearLayerFilter
|
|
4346
|
+
onClearLayerFilter,
|
|
4347
|
+
availableFilterLayers = [],
|
|
4348
|
+
filterFieldWhitelist = []
|
|
4121
4349
|
}) => {
|
|
4122
|
-
const [map, setMap] = (0,
|
|
4123
|
-
const [loadingMap, setLoadingMap] = (0,
|
|
4124
|
-
const [mapError, setMapError] = (0,
|
|
4125
|
-
const [layers, setLayers] = (0,
|
|
4126
|
-
const [activeTab, setActiveTab] = (0,
|
|
4127
|
-
const [panelVisible, setPanelVisible] = (0,
|
|
4128
|
-
const [selectedFilterLayerId, setSelectedFilterLayerId] = (0,
|
|
4129
|
-
const [selectedFilterField, setSelectedFilterField] = (0,
|
|
4130
|
-
const [selectedFilterValue, setSelectedFilterValue] = (0,
|
|
4131
|
-
const [catalogByLayerField, setCatalogByLayerField] = (0,
|
|
4132
|
-
const [
|
|
4133
|
-
const [
|
|
4134
|
-
const [
|
|
4135
|
-
const [
|
|
4136
|
-
const
|
|
4137
|
-
const
|
|
4350
|
+
const [map, setMap] = (0, import_react8.useState)(null);
|
|
4351
|
+
const [loadingMap, setLoadingMap] = (0, import_react8.useState)(false);
|
|
4352
|
+
const [mapError, setMapError] = (0, import_react8.useState)(null);
|
|
4353
|
+
const [layers, setLayers] = (0, import_react8.useState)([]);
|
|
4354
|
+
const [activeTab, setActiveTab] = (0, import_react8.useState)("layers");
|
|
4355
|
+
const [panelVisible, setPanelVisible] = (0, import_react8.useState)(true);
|
|
4356
|
+
const [selectedFilterLayerId, setSelectedFilterLayerId] = (0, import_react8.useState)("");
|
|
4357
|
+
const [selectedFilterField, setSelectedFilterField] = (0, import_react8.useState)("");
|
|
4358
|
+
const [selectedFilterValue, setSelectedFilterValue] = (0, import_react8.useState)("");
|
|
4359
|
+
const [catalogByLayerField, setCatalogByLayerField] = (0, import_react8.useState)({});
|
|
4360
|
+
const [catalogFieldsByLayer, setCatalogFieldsByLayer] = (0, import_react8.useState)({});
|
|
4361
|
+
const [loadingCatalog, setLoadingCatalog] = (0, import_react8.useState)(false);
|
|
4362
|
+
const [applyingFilter, setApplyingFilter] = (0, import_react8.useState)(false);
|
|
4363
|
+
const [filterError, setFilterError] = (0, import_react8.useState)(null);
|
|
4364
|
+
const [appliedFilter, setAppliedFilter] = (0, import_react8.useState)(null);
|
|
4365
|
+
const catalogAbortRef = (0, import_react8.useRef)(null);
|
|
4366
|
+
const lastEmittedStatesRef = (0, import_react8.useRef)(null);
|
|
4138
4367
|
const isControlled = Array.isArray(layerStates) && typeof onLayerStatesChange === "function";
|
|
4139
|
-
const baseStates = (0,
|
|
4368
|
+
const baseStates = (0, import_react8.useMemo)(
|
|
4140
4369
|
() => initLayerStates(
|
|
4141
4370
|
layers.map((entry) => ({
|
|
4142
4371
|
...entry.mapLayer,
|
|
@@ -4147,7 +4376,7 @@ var ZenitLayerManager = ({
|
|
|
4147
4376
|
),
|
|
4148
4377
|
[layers]
|
|
4149
4378
|
);
|
|
4150
|
-
const overrideStates = (0,
|
|
4379
|
+
const overrideStates = (0, import_react8.useMemo)(
|
|
4151
4380
|
() => layers.map(
|
|
4152
4381
|
(entry) => ({
|
|
4153
4382
|
layerId: entry.mapLayer.layerId,
|
|
@@ -4157,11 +4386,11 @@ var ZenitLayerManager = ({
|
|
|
4157
4386
|
),
|
|
4158
4387
|
[layers]
|
|
4159
4388
|
);
|
|
4160
|
-
const effectiveStates = (0,
|
|
4389
|
+
const effectiveStates = (0, import_react8.useMemo)(
|
|
4161
4390
|
() => layerStates ?? applyLayerOverrides(baseStates, overrideStates),
|
|
4162
4391
|
[baseStates, layerStates, overrideStates]
|
|
4163
4392
|
);
|
|
4164
|
-
const layerMetaIndex = (0,
|
|
4393
|
+
const layerMetaIndex = (0, import_react8.useMemo)(() => {
|
|
4165
4394
|
const index = /* @__PURE__ */ new Map();
|
|
4166
4395
|
mapLayers?.forEach((entry) => {
|
|
4167
4396
|
const key = String(entry.layerId);
|
|
@@ -4175,7 +4404,7 @@ var ZenitLayerManager = ({
|
|
|
4175
4404
|
});
|
|
4176
4405
|
return index;
|
|
4177
4406
|
}, [map, mapLayers]);
|
|
4178
|
-
const resolveUserOpacity =
|
|
4407
|
+
const resolveUserOpacity = import_react8.default.useCallback((state) => {
|
|
4179
4408
|
if (typeof state.overrideOpacity === "number") return state.overrideOpacity;
|
|
4180
4409
|
if (typeof state.overrideOpacity === "string") {
|
|
4181
4410
|
const parsed = Number.parseFloat(state.overrideOpacity);
|
|
@@ -4183,7 +4412,7 @@ var ZenitLayerManager = ({
|
|
|
4183
4412
|
}
|
|
4184
4413
|
return state.opacity ?? 1;
|
|
4185
4414
|
}, []);
|
|
4186
|
-
const resolveEffectiveOpacity =
|
|
4415
|
+
const resolveEffectiveOpacity = import_react8.default.useCallback(
|
|
4187
4416
|
(layerId, userOpacity) => {
|
|
4188
4417
|
if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
|
|
4189
4418
|
return userOpacity;
|
|
@@ -4199,7 +4428,7 @@ var ZenitLayerManager = ({
|
|
|
4199
4428
|
},
|
|
4200
4429
|
[autoOpacityConfig, autoOpacityOnZoom, layerMetaIndex, mapZoom]
|
|
4201
4430
|
);
|
|
4202
|
-
const effectiveStatesWithZoom = (0,
|
|
4431
|
+
const effectiveStatesWithZoom = (0, import_react8.useMemo)(() => {
|
|
4203
4432
|
if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
|
|
4204
4433
|
return effectiveStates;
|
|
4205
4434
|
}
|
|
@@ -4213,7 +4442,7 @@ var ZenitLayerManager = ({
|
|
|
4213
4442
|
};
|
|
4214
4443
|
});
|
|
4215
4444
|
}, [autoOpacityOnZoom, effectiveStates, mapZoom, resolveEffectiveOpacity, resolveUserOpacity]);
|
|
4216
|
-
(0,
|
|
4445
|
+
(0, import_react8.useEffect)(() => {
|
|
4217
4446
|
let cancelled = false;
|
|
4218
4447
|
setLoadingMap(true);
|
|
4219
4448
|
setMapError(null);
|
|
@@ -4245,12 +4474,12 @@ var ZenitLayerManager = ({
|
|
|
4245
4474
|
cancelled = true;
|
|
4246
4475
|
};
|
|
4247
4476
|
}, [client.maps, mapId]);
|
|
4248
|
-
(0,
|
|
4477
|
+
(0, import_react8.useEffect)(() => {
|
|
4249
4478
|
if (!showUploadTab && activeTab === "upload") {
|
|
4250
4479
|
setActiveTab("layers");
|
|
4251
4480
|
}
|
|
4252
4481
|
}, [activeTab, showUploadTab]);
|
|
4253
|
-
(0,
|
|
4482
|
+
(0, import_react8.useEffect)(() => {
|
|
4254
4483
|
if (isControlled) return;
|
|
4255
4484
|
if (!onLayerStatesChange) return;
|
|
4256
4485
|
const emitStates = autoOpacityOnZoom && typeof mapZoom === "number" ? effectiveStatesWithZoom : effectiveStates;
|
|
@@ -4268,7 +4497,7 @@ var ZenitLayerManager = ({
|
|
|
4268
4497
|
mapZoom,
|
|
4269
4498
|
onLayerStatesChange
|
|
4270
4499
|
]);
|
|
4271
|
-
const updateLayerVisible =
|
|
4500
|
+
const updateLayerVisible = import_react8.default.useCallback(
|
|
4272
4501
|
(layerId, visible) => {
|
|
4273
4502
|
if (!onLayerStatesChange) return;
|
|
4274
4503
|
const next = effectiveStates.map(
|
|
@@ -4278,7 +4507,7 @@ var ZenitLayerManager = ({
|
|
|
4278
4507
|
},
|
|
4279
4508
|
[effectiveStates, onLayerStatesChange]
|
|
4280
4509
|
);
|
|
4281
|
-
const updateLayerOpacity =
|
|
4510
|
+
const updateLayerOpacity = import_react8.default.useCallback(
|
|
4282
4511
|
(layerId, opacity) => {
|
|
4283
4512
|
if (!onLayerStatesChange) return;
|
|
4284
4513
|
const adjustedOpacity = resolveEffectiveOpacity(layerId, opacity);
|
|
@@ -4289,7 +4518,7 @@ var ZenitLayerManager = ({
|
|
|
4289
4518
|
},
|
|
4290
4519
|
[effectiveStates, onLayerStatesChange, resolveEffectiveOpacity]
|
|
4291
4520
|
);
|
|
4292
|
-
const resolveFeatureCount =
|
|
4521
|
+
const resolveFeatureCount = import_react8.default.useCallback(
|
|
4293
4522
|
(layerId, layer) => {
|
|
4294
4523
|
const resolvedFeatureCount = layerFeatureCounts?.[layerId] ?? layerFeatureCounts?.[String(layerId)];
|
|
4295
4524
|
if (typeof resolvedFeatureCount === "number") return resolvedFeatureCount;
|
|
@@ -4298,7 +4527,7 @@ var ZenitLayerManager = ({
|
|
|
4298
4527
|
},
|
|
4299
4528
|
[layerFeatureCounts]
|
|
4300
4529
|
);
|
|
4301
|
-
const decoratedLayers = (0,
|
|
4530
|
+
const decoratedLayers = (0, import_react8.useMemo)(() => {
|
|
4302
4531
|
return layers.map((entry) => ({
|
|
4303
4532
|
...entry,
|
|
4304
4533
|
effective: effectiveStates.find((state) => state.layerId === entry.mapLayer.layerId),
|
|
@@ -4327,7 +4556,7 @@ var ZenitLayerManager = ({
|
|
|
4327
4556
|
return String(a.mapLayer.layerId).localeCompare(String(b.mapLayer.layerId));
|
|
4328
4557
|
});
|
|
4329
4558
|
}, [effectiveStates, layers, resolveFeatureCount]);
|
|
4330
|
-
const hasPrefilters = (0,
|
|
4559
|
+
const hasPrefilters = (0, import_react8.useMemo)(() => {
|
|
4331
4560
|
const candidates = [...mapLayers ?? [], ...map?.mapLayers ?? []];
|
|
4332
4561
|
return candidates.some((layer) => {
|
|
4333
4562
|
const record = layer;
|
|
@@ -4335,23 +4564,32 @@ var ZenitLayerManager = ({
|
|
|
4335
4564
|
return !!applied && typeof applied === "object" && Object.keys(applied).length > 0;
|
|
4336
4565
|
});
|
|
4337
4566
|
}, [map?.mapLayers, mapLayers]);
|
|
4338
|
-
const filterableLayers = (0,
|
|
4567
|
+
const filterableLayers = (0, import_react8.useMemo)(() => {
|
|
4568
|
+
const forcedLayerIds = new Set(availableFilterLayers.map((layerId) => String(layerId)));
|
|
4339
4569
|
return decoratedLayers.filter((entry) => {
|
|
4340
4570
|
const prefilters = entry.mapLayer.layerConfig?.prefilters;
|
|
4341
|
-
|
|
4571
|
+
if (prefilters && Object.keys(prefilters).length > 0) return true;
|
|
4572
|
+
if (forcedLayerIds.has(String(entry.mapLayer.layerId))) return true;
|
|
4573
|
+
const layerType = (entry.mapLayer.layerType ?? entry.layer?.layerType ?? "").toString().toLowerCase();
|
|
4574
|
+
return layerType === "multipolygon";
|
|
4342
4575
|
});
|
|
4343
|
-
}, [decoratedLayers]);
|
|
4344
|
-
const selectedFilterLayer = (0,
|
|
4576
|
+
}, [availableFilterLayers, decoratedLayers]);
|
|
4577
|
+
const selectedFilterLayer = (0, import_react8.useMemo)(
|
|
4345
4578
|
() => filterableLayers.find((layer) => String(layer.mapLayer.layerId) === selectedFilterLayerId) ?? null,
|
|
4346
4579
|
[filterableLayers, selectedFilterLayerId]
|
|
4347
4580
|
);
|
|
4348
|
-
const filterFields = (0,
|
|
4349
|
-
|
|
4350
|
-
|
|
4351
|
-
|
|
4581
|
+
const filterFields = (0, import_react8.useMemo)(() => {
|
|
4582
|
+
if (!selectedFilterLayer) return [];
|
|
4583
|
+
const prefilters = selectedFilterLayer.mapLayer.layerConfig?.prefilters;
|
|
4584
|
+
if (prefilters) {
|
|
4585
|
+
const keys = Object.keys(prefilters);
|
|
4586
|
+
if (keys.length > 0) return keys;
|
|
4587
|
+
}
|
|
4588
|
+
return catalogFieldsByLayer[String(selectedFilterLayer.mapLayer.layerId)] ?? [];
|
|
4589
|
+
}, [catalogFieldsByLayer, selectedFilterLayer]);
|
|
4352
4590
|
const activeCatalogKey = selectedFilterLayer ? `${selectedFilterLayer.mapLayer.layerId}:${selectedFilterField}` : null;
|
|
4353
4591
|
const activeCatalogValues = activeCatalogKey ? catalogByLayerField[activeCatalogKey] ?? [] : [];
|
|
4354
|
-
const extractCatalogValues =
|
|
4592
|
+
const extractCatalogValues = import_react8.default.useCallback((catalogData, field) => {
|
|
4355
4593
|
const values = /* @__PURE__ */ new Set();
|
|
4356
4594
|
const pushValue = (value) => {
|
|
4357
4595
|
if (value === null || value === void 0) return;
|
|
@@ -4388,7 +4626,46 @@ var ZenitLayerManager = ({
|
|
|
4388
4626
|
}
|
|
4389
4627
|
return [...values].sort((a, b) => a.localeCompare(b, void 0, { sensitivity: "base" }));
|
|
4390
4628
|
}, []);
|
|
4391
|
-
|
|
4629
|
+
const extractCatalogFieldMap = import_react8.default.useCallback((catalogData, whitelist) => {
|
|
4630
|
+
if (!catalogData || typeof catalogData !== "object") return {};
|
|
4631
|
+
const maybeRecord = catalogData;
|
|
4632
|
+
const fieldNames = /* @__PURE__ */ new Set();
|
|
4633
|
+
Object.entries(maybeRecord).forEach(([key, value]) => {
|
|
4634
|
+
if (Array.isArray(value) && key !== "items" && key !== "features") {
|
|
4635
|
+
if (isFieldVisible(key)) fieldNames.add(key);
|
|
4636
|
+
}
|
|
4637
|
+
});
|
|
4638
|
+
const items = maybeRecord.items;
|
|
4639
|
+
if (Array.isArray(items)) {
|
|
4640
|
+
items.forEach((item) => {
|
|
4641
|
+
if (!item || typeof item !== "object") return;
|
|
4642
|
+
const row = item;
|
|
4643
|
+
if (row.field !== null && row.field !== void 0) {
|
|
4644
|
+
const fieldName = String(row.field).trim();
|
|
4645
|
+
if (fieldName && isFieldVisible(fieldName)) fieldNames.add(fieldName);
|
|
4646
|
+
}
|
|
4647
|
+
});
|
|
4648
|
+
}
|
|
4649
|
+
const features = maybeRecord.features;
|
|
4650
|
+
if (Array.isArray(features)) {
|
|
4651
|
+
features.forEach((feature) => {
|
|
4652
|
+
if (!feature || typeof feature !== "object") return;
|
|
4653
|
+
const properties = feature.properties;
|
|
4654
|
+
if (!properties || typeof properties !== "object") return;
|
|
4655
|
+
Object.keys(properties).forEach((key) => {
|
|
4656
|
+
if (isFieldVisible(key)) fieldNames.add(key);
|
|
4657
|
+
});
|
|
4658
|
+
});
|
|
4659
|
+
}
|
|
4660
|
+
const normalizedWhitelist = (whitelist ?? []).map((item) => String(item).trim()).filter(Boolean);
|
|
4661
|
+
const resolvedFieldNames = normalizedWhitelist.length > 0 ? [...fieldNames].filter((field) => matchesWhitelist(field, normalizedWhitelist)) : [...fieldNames];
|
|
4662
|
+
const next = {};
|
|
4663
|
+
resolvedFieldNames.forEach((field) => {
|
|
4664
|
+
next[field] = extractCatalogValues(catalogData, field);
|
|
4665
|
+
});
|
|
4666
|
+
return next;
|
|
4667
|
+
}, [extractCatalogValues]);
|
|
4668
|
+
(0, import_react8.useEffect)(() => {
|
|
4392
4669
|
if (!filterableLayers.length) {
|
|
4393
4670
|
setSelectedFilterLayerId("");
|
|
4394
4671
|
return;
|
|
@@ -4397,7 +4674,7 @@ var ZenitLayerManager = ({
|
|
|
4397
4674
|
setSelectedFilterLayerId(String(filterableLayers[0].mapLayer.layerId));
|
|
4398
4675
|
}
|
|
4399
4676
|
}, [filterableLayers, selectedFilterLayerId]);
|
|
4400
|
-
(0,
|
|
4677
|
+
(0, import_react8.useEffect)(() => {
|
|
4401
4678
|
if (!filterFields.length) {
|
|
4402
4679
|
setSelectedFilterField("");
|
|
4403
4680
|
return;
|
|
@@ -4407,24 +4684,42 @@ var ZenitLayerManager = ({
|
|
|
4407
4684
|
setSelectedFilterValue("");
|
|
4408
4685
|
}
|
|
4409
4686
|
}, [filterFields, selectedFilterField]);
|
|
4410
|
-
(0,
|
|
4687
|
+
(0, import_react8.useEffect)(() => {
|
|
4411
4688
|
if (hasPrefilters && activeTab === "filters") {
|
|
4412
4689
|
setActiveTab("layers");
|
|
4413
4690
|
}
|
|
4414
4691
|
}, [activeTab, hasPrefilters]);
|
|
4415
|
-
(0,
|
|
4692
|
+
(0, import_react8.useEffect)(() => {
|
|
4416
4693
|
if (activeTab !== "filters") return;
|
|
4417
|
-
if (!selectedFilterLayer
|
|
4418
|
-
|
|
4694
|
+
if (!selectedFilterLayer) return;
|
|
4695
|
+
const layerId = selectedFilterLayer.mapLayer.layerId;
|
|
4696
|
+
const layerKey = String(layerId);
|
|
4697
|
+
const prefilters = selectedFilterLayer.mapLayer.layerConfig?.prefilters;
|
|
4698
|
+
const requiresCatalogForFields = !prefilters || Object.keys(prefilters).length === 0;
|
|
4699
|
+
const hasFieldsLoaded = (catalogFieldsByLayer[layerKey]?.length ?? 0) > 0;
|
|
4700
|
+
const needsLayerCatalog = requiresCatalogForFields && !hasFieldsLoaded;
|
|
4701
|
+
const needsFieldCatalog = Boolean(activeCatalogKey && selectedFilterField && !catalogByLayerField[activeCatalogKey]);
|
|
4702
|
+
if (!needsLayerCatalog && !needsFieldCatalog) return;
|
|
4419
4703
|
catalogAbortRef.current?.abort();
|
|
4420
4704
|
const controller = new AbortController();
|
|
4421
4705
|
catalogAbortRef.current = controller;
|
|
4422
4706
|
setLoadingCatalog(true);
|
|
4423
4707
|
setFilterError(null);
|
|
4424
|
-
client.layers.getLayerFeaturesCatalog(
|
|
4708
|
+
client.layers.getLayerFeaturesCatalog(layerId).then((response) => {
|
|
4425
4709
|
if (controller.signal.aborted) return;
|
|
4426
|
-
const
|
|
4427
|
-
|
|
4710
|
+
const fieldMap = extractCatalogFieldMap(response.data, filterFieldWhitelist);
|
|
4711
|
+
const fields = Object.keys(fieldMap);
|
|
4712
|
+
setCatalogFieldsByLayer((prev) => ({ ...prev, [layerKey]: fields }));
|
|
4713
|
+
setCatalogByLayerField((prev) => {
|
|
4714
|
+
const next = { ...prev };
|
|
4715
|
+
fields.forEach((field) => {
|
|
4716
|
+
const key = `${layerKey}:${field}`;
|
|
4717
|
+
if (!next[key]) {
|
|
4718
|
+
next[key] = fieldMap[field] ?? [];
|
|
4719
|
+
}
|
|
4720
|
+
});
|
|
4721
|
+
return next;
|
|
4722
|
+
});
|
|
4428
4723
|
}).catch((error) => {
|
|
4429
4724
|
if (controller.signal.aborted) return;
|
|
4430
4725
|
const message = error instanceof Error ? error.message : "No se pudo cargar el cat\xE1logo";
|
|
@@ -4435,8 +4730,8 @@ var ZenitLayerManager = ({
|
|
|
4435
4730
|
return () => {
|
|
4436
4731
|
controller.abort();
|
|
4437
4732
|
};
|
|
4438
|
-
}, [activeCatalogKey, activeTab, catalogByLayerField, client.layers,
|
|
4439
|
-
const handleApplyFilter =
|
|
4733
|
+
}, [activeCatalogKey, activeTab, catalogByLayerField, catalogFieldsByLayer, client.layers, extractCatalogFieldMap, filterFieldWhitelist, selectedFilterField, selectedFilterLayer]);
|
|
4734
|
+
const handleApplyFilter = import_react8.default.useCallback(async () => {
|
|
4440
4735
|
if (!selectedFilterLayer || !selectedFilterField || !selectedFilterValue || !onApplyLayerFilter) return;
|
|
4441
4736
|
setApplyingFilter(true);
|
|
4442
4737
|
setFilterError(null);
|
|
@@ -4458,7 +4753,7 @@ var ZenitLayerManager = ({
|
|
|
4458
4753
|
setApplyingFilter(false);
|
|
4459
4754
|
}
|
|
4460
4755
|
}, [onApplyLayerFilter, selectedFilterField, selectedFilterLayer, selectedFilterValue]);
|
|
4461
|
-
const handleClearFilter =
|
|
4756
|
+
const handleClearFilter = import_react8.default.useCallback(async () => {
|
|
4462
4757
|
if (!selectedFilterLayer) return;
|
|
4463
4758
|
setApplyingFilter(true);
|
|
4464
4759
|
setFilterError(null);
|
|
@@ -4473,7 +4768,7 @@ var ZenitLayerManager = ({
|
|
|
4473
4768
|
setApplyingFilter(false);
|
|
4474
4769
|
}
|
|
4475
4770
|
}, [onClearLayerFilter, selectedFilterField, selectedFilterLayer]);
|
|
4476
|
-
const resolveLayerStyle =
|
|
4771
|
+
const resolveLayerStyle = import_react8.default.useCallback(
|
|
4477
4772
|
(layerId) => {
|
|
4478
4773
|
const layerKey = String(layerId);
|
|
4479
4774
|
const fromProp = mapLayers?.find((entry) => String(entry.layerId) === layerKey)?.style;
|
|
@@ -4487,6 +4782,22 @@ var ZenitLayerManager = ({
|
|
|
4487
4782
|
},
|
|
4488
4783
|
[map, mapLayers]
|
|
4489
4784
|
);
|
|
4785
|
+
const allVisible = decoratedLayers.every(
|
|
4786
|
+
(entry) => entry.effective?.visible ?? false
|
|
4787
|
+
);
|
|
4788
|
+
const anyVisible = decoratedLayers.some(
|
|
4789
|
+
(entry) => entry.effective?.visible ?? false
|
|
4790
|
+
);
|
|
4791
|
+
const handleToggleAllLayers = import_react8.default.useCallback(() => {
|
|
4792
|
+
if (!onLayerStatesChange) return;
|
|
4793
|
+
const nextVisible = !anyVisible;
|
|
4794
|
+
const next = effectiveStates.map((state) => ({
|
|
4795
|
+
...state,
|
|
4796
|
+
visible: nextVisible,
|
|
4797
|
+
overrideVisible: nextVisible
|
|
4798
|
+
}));
|
|
4799
|
+
onLayerStatesChange(next);
|
|
4800
|
+
}, [anyVisible, effectiveStates, onLayerStatesChange]);
|
|
4490
4801
|
const panelStyle = {
|
|
4491
4802
|
width: 360,
|
|
4492
4803
|
borderLeft: side === "right" ? "1px solid #e2e8f0" : void 0,
|
|
@@ -4503,10 +4814,10 @@ var ZenitLayerManager = ({
|
|
|
4503
4814
|
...height ? { height } : {}
|
|
4504
4815
|
};
|
|
4505
4816
|
if (loadingMap) {
|
|
4506
|
-
return /* @__PURE__ */ (0,
|
|
4817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, style: panelStyle, children: "Cargando capas\u2026" });
|
|
4507
4818
|
}
|
|
4508
4819
|
if (mapError) {
|
|
4509
|
-
return /* @__PURE__ */ (0,
|
|
4820
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, style: { ...panelStyle, color: "#c53030" }, children: [
|
|
4510
4821
|
"Error al cargar mapa: ",
|
|
4511
4822
|
mapError
|
|
4512
4823
|
] });
|
|
@@ -4524,7 +4835,7 @@ var ZenitLayerManager = ({
|
|
|
4524
4835
|
boxShadow: "0 1px 0 rgba(148, 163, 184, 0.25)"
|
|
4525
4836
|
};
|
|
4526
4837
|
const renderLayerCards = () => {
|
|
4527
|
-
return /* @__PURE__ */ (0,
|
|
4838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: decoratedLayers.map((layerState) => {
|
|
4528
4839
|
const layerId = layerState.mapLayer.layerId;
|
|
4529
4840
|
const layerName = layerState.layerName ?? `Capa ${layerId}`;
|
|
4530
4841
|
const visible = layerState.effective?.visible ?? false;
|
|
@@ -4534,7 +4845,7 @@ var ZenitLayerManager = ({
|
|
|
4534
4845
|
const muted = !visible;
|
|
4535
4846
|
const opacityPercent = Math.round(userOpacity * 100);
|
|
4536
4847
|
const sliderBackground = `linear-gradient(to right, ${layerColor} 0%, ${layerColor} ${opacityPercent}%, #e5e7eb ${opacityPercent}%, #e5e7eb 100%)`;
|
|
4537
|
-
return /* @__PURE__ */ (0,
|
|
4848
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
4538
4849
|
"div",
|
|
4539
4850
|
{
|
|
4540
4851
|
className: `zlm-card${muted ? " is-muted" : ""}`,
|
|
@@ -4549,9 +4860,9 @@ var ZenitLayerManager = ({
|
|
|
4549
4860
|
width: "100%"
|
|
4550
4861
|
},
|
|
4551
4862
|
children: [
|
|
4552
|
-
/* @__PURE__ */ (0,
|
|
4553
|
-
/* @__PURE__ */ (0,
|
|
4554
|
-
/* @__PURE__ */ (0,
|
|
4863
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
|
|
4864
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "flex-start", minWidth: 0, flex: 1 }, children: [
|
|
4865
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
4555
4866
|
"div",
|
|
4556
4867
|
{
|
|
4557
4868
|
style: {
|
|
@@ -4566,7 +4877,7 @@ var ZenitLayerManager = ({
|
|
|
4566
4877
|
title: "Color de la capa"
|
|
4567
4878
|
}
|
|
4568
4879
|
),
|
|
4569
|
-
showLayerVisibilityIcon && /* @__PURE__ */ (0,
|
|
4880
|
+
showLayerVisibilityIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
4570
4881
|
"button",
|
|
4571
4882
|
{
|
|
4572
4883
|
type: "button",
|
|
@@ -4577,11 +4888,11 @@ var ZenitLayerManager = ({
|
|
|
4577
4888
|
)
|
|
4578
4889
|
),
|
|
4579
4890
|
"aria-label": visible ? "Ocultar capa" : "Mostrar capa",
|
|
4580
|
-
children: visible ? /* @__PURE__ */ (0,
|
|
4891
|
+
children: visible ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Eye, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.EyeOff, { size: 16 })
|
|
4581
4892
|
}
|
|
4582
4893
|
),
|
|
4583
|
-
/* @__PURE__ */ (0,
|
|
4584
|
-
/* @__PURE__ */ (0,
|
|
4894
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
|
|
4895
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
4585
4896
|
"div",
|
|
4586
4897
|
{
|
|
4587
4898
|
className: "zlm-layer-name",
|
|
@@ -4599,26 +4910,26 @@ var ZenitLayerManager = ({
|
|
|
4599
4910
|
children: layerName
|
|
4600
4911
|
}
|
|
4601
4912
|
),
|
|
4602
|
-
/* @__PURE__ */ (0,
|
|
4913
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { color: muted ? "#94a3b8" : "#64748b", fontSize: 12 }, children: [
|
|
4603
4914
|
"ID ",
|
|
4604
4915
|
layerId
|
|
4605
4916
|
] })
|
|
4606
4917
|
] })
|
|
4607
4918
|
] }),
|
|
4608
|
-
/* @__PURE__ */ (0,
|
|
4919
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", alignItems: "flex-start", gap: 6, flexShrink: 0 }, children: typeof featureCount === "number" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "zlm-badge", children: [
|
|
4609
4920
|
featureCount.toLocaleString(),
|
|
4610
4921
|
" features"
|
|
4611
4922
|
] }) })
|
|
4612
4923
|
] }),
|
|
4613
|
-
/* @__PURE__ */ (0,
|
|
4614
|
-
/* @__PURE__ */ (0,
|
|
4615
|
-
/* @__PURE__ */ (0,
|
|
4616
|
-
/* @__PURE__ */ (0,
|
|
4924
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1 }, children: [
|
|
4925
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 6, color: "#64748b", fontSize: 12 }, children: [
|
|
4926
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Opacidad" }),
|
|
4927
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
|
|
4617
4928
|
opacityPercent,
|
|
4618
4929
|
"%"
|
|
4619
4930
|
] })
|
|
4620
4931
|
] }),
|
|
4621
|
-
/* @__PURE__ */ (0,
|
|
4932
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
4622
4933
|
"input",
|
|
4623
4934
|
{
|
|
4624
4935
|
className: "zlm-range",
|
|
@@ -4656,8 +4967,8 @@ var ZenitLayerManager = ({
|
|
|
4656
4967
|
);
|
|
4657
4968
|
}) });
|
|
4658
4969
|
};
|
|
4659
|
-
return /* @__PURE__ */ (0,
|
|
4660
|
-
/* @__PURE__ */ (0,
|
|
4970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: ["zenit-layer-manager", className].filter(Boolean).join(" "), style: panelStyle, children: [
|
|
4971
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
|
|
4661
4972
|
.zenit-layer-manager .zlm-card {
|
|
4662
4973
|
transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
|
|
4663
4974
|
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
|
|
@@ -4752,16 +5063,16 @@ var ZenitLayerManager = ({
|
|
|
4752
5063
|
outline-offset: 2px;
|
|
4753
5064
|
}
|
|
4754
5065
|
` }),
|
|
4755
|
-
/* @__PURE__ */ (0,
|
|
4756
|
-
/* @__PURE__ */ (0,
|
|
4757
|
-
/* @__PURE__ */ (0,
|
|
4758
|
-
/* @__PURE__ */ (0,
|
|
4759
|
-
/* @__PURE__ */ (0,
|
|
5066
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: headerStyle, children: [
|
|
5067
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
5068
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
|
|
5069
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontWeight: 800, fontSize: 16, color: "#0f172a" }, children: "Gesti\xF3n de Capas" }),
|
|
5070
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { color: "#64748b", fontSize: 12 }, children: [
|
|
4760
5071
|
"Mapa #",
|
|
4761
5072
|
map.id
|
|
4762
5073
|
] })
|
|
4763
5074
|
] }),
|
|
4764
|
-
/* @__PURE__ */ (0,
|
|
5075
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
4765
5076
|
"button",
|
|
4766
5077
|
{
|
|
4767
5078
|
type: "button",
|
|
@@ -4769,13 +5080,13 @@ var ZenitLayerManager = ({
|
|
|
4769
5080
|
className: "zlm-panel-toggle",
|
|
4770
5081
|
"aria-label": panelVisible ? "Ocultar panel de capas" : "Mostrar panel de capas",
|
|
4771
5082
|
children: [
|
|
4772
|
-
panelVisible ? /* @__PURE__ */ (0,
|
|
5083
|
+
panelVisible ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Eye, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.EyeOff, { size: 16 }),
|
|
4773
5084
|
panelVisible ? "Ocultar" : "Mostrar"
|
|
4774
5085
|
]
|
|
4775
5086
|
}
|
|
4776
5087
|
)
|
|
4777
5088
|
] }),
|
|
4778
|
-
/* @__PURE__ */ (0,
|
|
5089
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
4779
5090
|
"div",
|
|
4780
5091
|
{
|
|
4781
5092
|
style: {
|
|
@@ -4788,38 +5099,38 @@ var ZenitLayerManager = ({
|
|
|
4788
5099
|
background: "#f1f5f9"
|
|
4789
5100
|
},
|
|
4790
5101
|
children: [
|
|
4791
|
-
/* @__PURE__ */ (0,
|
|
5102
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
4792
5103
|
"button",
|
|
4793
5104
|
{
|
|
4794
5105
|
type: "button",
|
|
4795
5106
|
className: `zlm-tab${activeTab === "layers" ? " is-active" : ""}`,
|
|
4796
5107
|
onClick: () => setActiveTab("layers"),
|
|
4797
5108
|
children: [
|
|
4798
|
-
/* @__PURE__ */ (0,
|
|
5109
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Layers, { size: 16 }),
|
|
4799
5110
|
"Capas"
|
|
4800
5111
|
]
|
|
4801
5112
|
}
|
|
4802
5113
|
),
|
|
4803
|
-
showUploadTab && /* @__PURE__ */ (0,
|
|
5114
|
+
showUploadTab && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
4804
5115
|
"button",
|
|
4805
5116
|
{
|
|
4806
5117
|
type: "button",
|
|
4807
5118
|
className: `zlm-tab${activeTab === "upload" ? " is-active" : ""}`,
|
|
4808
5119
|
onClick: () => setActiveTab("upload"),
|
|
4809
5120
|
children: [
|
|
4810
|
-
/* @__PURE__ */ (0,
|
|
5121
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Upload, { size: 16 }),
|
|
4811
5122
|
"Subir"
|
|
4812
5123
|
]
|
|
4813
5124
|
}
|
|
4814
5125
|
),
|
|
4815
|
-
!hasPrefilters && /* @__PURE__ */ (0,
|
|
5126
|
+
!hasPrefilters && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
4816
5127
|
"button",
|
|
4817
5128
|
{
|
|
4818
5129
|
type: "button",
|
|
4819
5130
|
className: `zlm-tab${activeTab === "filters" ? " is-active" : ""}`,
|
|
4820
5131
|
onClick: () => setActiveTab("filters"),
|
|
4821
5132
|
children: [
|
|
4822
|
-
/* @__PURE__ */ (0,
|
|
5133
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Layers, { size: 16 }),
|
|
4823
5134
|
"Filtros"
|
|
4824
5135
|
]
|
|
4825
5136
|
}
|
|
@@ -4828,13 +5139,29 @@ var ZenitLayerManager = ({
|
|
|
4828
5139
|
}
|
|
4829
5140
|
)
|
|
4830
5141
|
] }),
|
|
4831
|
-
panelVisible && /* @__PURE__ */ (0,
|
|
4832
|
-
hasPrefilters && /* @__PURE__ */ (0,
|
|
4833
|
-
activeTab === "layers" &&
|
|
4834
|
-
|
|
4835
|
-
|
|
5142
|
+
panelVisible && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
|
|
5143
|
+
hasPrefilters && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "zlm-badge", style: { marginBottom: 10 }, children: "Este mapa ya incluye filtros preaplicados" }),
|
|
5144
|
+
activeTab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
5145
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginBottom: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
5146
|
+
"button",
|
|
5147
|
+
{
|
|
5148
|
+
type: "button",
|
|
5149
|
+
className: "zlm-panel-toggle",
|
|
5150
|
+
onClick: handleToggleAllLayers,
|
|
5151
|
+
disabled: decoratedLayers.length === 0,
|
|
5152
|
+
"aria-label": anyVisible ? "Ocultar todas las capas" : "Mostrar todas las capas",
|
|
5153
|
+
children: [
|
|
5154
|
+
anyVisible ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.EyeOff, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Eye, { size: 14 }),
|
|
5155
|
+
anyVisible ? "Ocultar todas" : "Mostrar todas"
|
|
5156
|
+
]
|
|
5157
|
+
}
|
|
5158
|
+
) }),
|
|
5159
|
+
renderLayerCards()
|
|
5160
|
+
] }),
|
|
5161
|
+
!hasPrefilters && activeTab === "filters" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: "#64748b", fontSize: 13 }, children: "No hay filtros disponibles para las capas de este mapa." }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
5162
|
+
filterableLayers.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
|
|
4836
5163
|
"Capa",
|
|
4837
|
-
/* @__PURE__ */ (0,
|
|
5164
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
4838
5165
|
ZenitSelect,
|
|
4839
5166
|
{
|
|
4840
5167
|
ariaLabel: "Seleccionar capa para filtrar",
|
|
@@ -4847,9 +5174,9 @@ var ZenitLayerManager = ({
|
|
|
4847
5174
|
}
|
|
4848
5175
|
)
|
|
4849
5176
|
] }),
|
|
4850
|
-
/* @__PURE__ */ (0,
|
|
5177
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
|
|
4851
5178
|
"Campo",
|
|
4852
|
-
/* @__PURE__ */ (0,
|
|
5179
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
4853
5180
|
ZenitSelect,
|
|
4854
5181
|
{
|
|
4855
5182
|
ariaLabel: "Seleccionar campo de filtrado",
|
|
@@ -4862,34 +5189,31 @@ var ZenitLayerManager = ({
|
|
|
4862
5189
|
}
|
|
4863
5190
|
)
|
|
4864
5191
|
] }),
|
|
4865
|
-
/* @__PURE__ */ (0,
|
|
5192
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
|
|
4866
5193
|
"Valor",
|
|
4867
|
-
/* @__PURE__ */ (0,
|
|
4868
|
-
|
|
5194
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
5195
|
+
ZenitCombobox,
|
|
4869
5196
|
{
|
|
4870
|
-
ariaLabel: "Seleccionar valor de filtrado",
|
|
4871
5197
|
value: selectedFilterValue,
|
|
4872
5198
|
placeholder: "Seleccionar\u2026",
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
options: activeCatalogValues
|
|
4876
|
-
|
|
4877
|
-
label: catalogValue
|
|
4878
|
-
}))
|
|
5199
|
+
searchPlaceholder: "Buscar valor\u2026",
|
|
5200
|
+
onChange: (nextValue) => setSelectedFilterValue(nextValue),
|
|
5201
|
+
options: activeCatalogValues,
|
|
5202
|
+
disabled: loadingCatalog || activeCatalogValues.length === 0
|
|
4879
5203
|
}
|
|
4880
5204
|
)
|
|
4881
5205
|
] }),
|
|
4882
|
-
loadingCatalog && /* @__PURE__ */ (0,
|
|
4883
|
-
!loadingCatalog && selectedFilterField && activeCatalogValues.length === 0 && /* @__PURE__ */ (0,
|
|
4884
|
-
filterError && /* @__PURE__ */ (0,
|
|
4885
|
-
appliedFilter && /* @__PURE__ */ (0,
|
|
5206
|
+
loadingCatalog && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: "#64748b", fontSize: 12 }, children: "Cargando cat\xE1logo\u2026" }),
|
|
5207
|
+
!loadingCatalog && selectedFilterField && activeCatalogValues.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: "#64748b", fontSize: 12 }, children: "No hay cat\xE1logo disponible para este filtro." }),
|
|
5208
|
+
filterError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: "#b91c1c", fontSize: 12 }, children: filterError }),
|
|
5209
|
+
appliedFilter && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "zlm-badge", style: { alignSelf: "flex-start" }, children: [
|
|
4886
5210
|
"Activo: ",
|
|
4887
5211
|
appliedFilter.field,
|
|
4888
5212
|
" = ",
|
|
4889
5213
|
appliedFilter.value
|
|
4890
5214
|
] }),
|
|
4891
|
-
/* @__PURE__ */ (0,
|
|
4892
|
-
/* @__PURE__ */ (0,
|
|
5215
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "zlm-filter-actions", style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
|
|
5216
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
4893
5217
|
"button",
|
|
4894
5218
|
{
|
|
4895
5219
|
type: "button",
|
|
@@ -4899,7 +5223,7 @@ var ZenitLayerManager = ({
|
|
|
4899
5223
|
children: applyingFilter ? "Aplicando\u2026" : "Aplicar"
|
|
4900
5224
|
}
|
|
4901
5225
|
),
|
|
4902
|
-
/* @__PURE__ */ (0,
|
|
5226
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
4903
5227
|
"button",
|
|
4904
5228
|
{
|
|
4905
5229
|
type: "button",
|
|
@@ -4911,13 +5235,13 @@ var ZenitLayerManager = ({
|
|
|
4911
5235
|
)
|
|
4912
5236
|
] })
|
|
4913
5237
|
] }) }),
|
|
4914
|
-
showUploadTab && activeTab === "upload" && /* @__PURE__ */ (0,
|
|
5238
|
+
showUploadTab && activeTab === "upload" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: "#475569", fontSize: 13 }, children: "Pr\xF3ximamente podr\xE1s subir capas desde este panel." })
|
|
4915
5239
|
] })
|
|
4916
5240
|
] });
|
|
4917
5241
|
};
|
|
4918
5242
|
|
|
4919
5243
|
// src/react/ZenitFeatureFilterPanel.tsx
|
|
4920
|
-
var
|
|
5244
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
4921
5245
|
var ZenitFeatureFilterPanel = ({
|
|
4922
5246
|
title = "Filtros",
|
|
4923
5247
|
description,
|
|
@@ -4925,7 +5249,7 @@ var ZenitFeatureFilterPanel = ({
|
|
|
4925
5249
|
style,
|
|
4926
5250
|
children
|
|
4927
5251
|
}) => {
|
|
4928
|
-
return /* @__PURE__ */ (0,
|
|
5252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
4929
5253
|
"section",
|
|
4930
5254
|
{
|
|
4931
5255
|
className,
|
|
@@ -4938,26 +5262,26 @@ var ZenitFeatureFilterPanel = ({
|
|
|
4938
5262
|
...style
|
|
4939
5263
|
},
|
|
4940
5264
|
children: [
|
|
4941
|
-
/* @__PURE__ */ (0,
|
|
4942
|
-
/* @__PURE__ */ (0,
|
|
4943
|
-
description && /* @__PURE__ */ (0,
|
|
5265
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { style: { marginBottom: 12 }, children: [
|
|
5266
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { margin: 0, fontSize: 16 }, children: title }),
|
|
5267
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { margin: "6px 0 0", color: "#475569", fontSize: 13 }, children: description })
|
|
4944
5268
|
] }),
|
|
4945
|
-
/* @__PURE__ */ (0,
|
|
5269
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children })
|
|
4946
5270
|
]
|
|
4947
5271
|
}
|
|
4948
5272
|
);
|
|
4949
5273
|
};
|
|
4950
5274
|
|
|
4951
5275
|
// src/react/ai/FloatingChatBox.tsx
|
|
4952
|
-
var
|
|
5276
|
+
var import_react10 = require("react");
|
|
4953
5277
|
var import_react_dom3 = require("react-dom");
|
|
4954
5278
|
|
|
4955
5279
|
// src/react/hooks/use-chat.ts
|
|
4956
|
-
var
|
|
5280
|
+
var import_react9 = require("react");
|
|
4957
5281
|
var useSendMessage = (config) => {
|
|
4958
|
-
const [isLoading, setIsLoading] = (0,
|
|
4959
|
-
const [error, setError] = (0,
|
|
4960
|
-
const send = (0,
|
|
5282
|
+
const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
|
|
5283
|
+
const [error, setError] = (0, import_react9.useState)(null);
|
|
5284
|
+
const send = (0, import_react9.useCallback)(
|
|
4961
5285
|
async (mapId, request, options) => {
|
|
4962
5286
|
setIsLoading(true);
|
|
4963
5287
|
setError(null);
|
|
@@ -4975,18 +5299,18 @@ var useSendMessage = (config) => {
|
|
|
4975
5299
|
return { sendMessage: send, isLoading, error };
|
|
4976
5300
|
};
|
|
4977
5301
|
var useSendMessageStream = (config) => {
|
|
4978
|
-
const [isStreaming, setIsStreaming] = (0,
|
|
4979
|
-
const [streamingText, setStreamingText] = (0,
|
|
4980
|
-
const [completeResponse, setCompleteResponse] = (0,
|
|
4981
|
-
const [error, setError] = (0,
|
|
4982
|
-
const requestIdRef = (0,
|
|
4983
|
-
const reset = (0,
|
|
5302
|
+
const [isStreaming, setIsStreaming] = (0, import_react9.useState)(false);
|
|
5303
|
+
const [streamingText, setStreamingText] = (0, import_react9.useState)("");
|
|
5304
|
+
const [completeResponse, setCompleteResponse] = (0, import_react9.useState)(null);
|
|
5305
|
+
const [error, setError] = (0, import_react9.useState)(null);
|
|
5306
|
+
const requestIdRef = (0, import_react9.useRef)(0);
|
|
5307
|
+
const reset = (0, import_react9.useCallback)(() => {
|
|
4984
5308
|
setIsStreaming(false);
|
|
4985
5309
|
setStreamingText("");
|
|
4986
5310
|
setCompleteResponse(null);
|
|
4987
5311
|
setError(null);
|
|
4988
5312
|
}, []);
|
|
4989
|
-
const send = (0,
|
|
5313
|
+
const send = (0, import_react9.useCallback)(
|
|
4990
5314
|
async (mapId, request, options) => {
|
|
4991
5315
|
const requestId = requestIdRef.current + 1;
|
|
4992
5316
|
requestIdRef.current = requestId;
|
|
@@ -5040,7 +5364,7 @@ var useSendMessageStream = (config) => {
|
|
|
5040
5364
|
// src/react/components/MarkdownRenderer.tsx
|
|
5041
5365
|
var import_react_markdown = __toESM(require("react-markdown"));
|
|
5042
5366
|
var import_remark_gfm = __toESM(require("remark-gfm"));
|
|
5043
|
-
var
|
|
5367
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
5044
5368
|
function normalizeAssistantMarkdown(text) {
|
|
5045
5369
|
if (!text || typeof text !== "string") return "";
|
|
5046
5370
|
let normalized = text;
|
|
@@ -5056,28 +5380,28 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
5056
5380
|
if (!normalizedContent) {
|
|
5057
5381
|
return null;
|
|
5058
5382
|
}
|
|
5059
|
-
return /* @__PURE__ */ (0,
|
|
5383
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, style: { wordBreak: "break-word" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5060
5384
|
import_react_markdown.default,
|
|
5061
5385
|
{
|
|
5062
5386
|
remarkPlugins: [import_remark_gfm.default],
|
|
5063
5387
|
components: {
|
|
5064
5388
|
// Headings with proper spacing
|
|
5065
|
-
h1: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5066
|
-
h2: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5067
|
-
h3: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5068
|
-
h4: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5069
|
-
h5: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5070
|
-
h6: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5389
|
+
h1: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { style: { fontSize: "1.5em", fontWeight: 700, marginTop: "1em", marginBottom: "0.5em" }, ...props, children }),
|
|
5390
|
+
h2: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { style: { fontSize: "1.3em", fontWeight: 700, marginTop: "0.9em", marginBottom: "0.45em" }, ...props, children }),
|
|
5391
|
+
h3: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.15em", fontWeight: 600, marginTop: "0.75em", marginBottom: "0.4em" }, ...props, children }),
|
|
5392
|
+
h4: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { style: { fontSize: "1.05em", fontWeight: 600, marginTop: "0.6em", marginBottom: "0.35em" }, ...props, children }),
|
|
5393
|
+
h5: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h5", { style: { fontSize: "1em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
|
|
5394
|
+
h6: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h6", { style: { fontSize: "0.95em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
|
|
5071
5395
|
// Paragraphs with comfortable line height
|
|
5072
|
-
p: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5396
|
+
p: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { marginTop: "0.5em", marginBottom: "0.5em", lineHeight: 1.6 }, ...props, children }),
|
|
5073
5397
|
// Lists with proper indentation
|
|
5074
|
-
ul: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5075
|
-
ol: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5076
|
-
li: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5398
|
+
ul: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
|
|
5399
|
+
ol: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ol", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
|
|
5400
|
+
li: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { style: { marginTop: "0.25em", marginBottom: "0.25em" }, ...props, children }),
|
|
5077
5401
|
// Code blocks
|
|
5078
5402
|
code: ({ inline, children, ...props }) => {
|
|
5079
5403
|
if (inline) {
|
|
5080
|
-
return /* @__PURE__ */ (0,
|
|
5404
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5081
5405
|
"code",
|
|
5082
5406
|
{
|
|
5083
5407
|
style: {
|
|
@@ -5092,7 +5416,7 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
5092
5416
|
}
|
|
5093
5417
|
);
|
|
5094
5418
|
}
|
|
5095
|
-
return /* @__PURE__ */ (0,
|
|
5419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5096
5420
|
"code",
|
|
5097
5421
|
{
|
|
5098
5422
|
style: {
|
|
@@ -5112,9 +5436,9 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
5112
5436
|
);
|
|
5113
5437
|
},
|
|
5114
5438
|
// Pre (code block wrapper)
|
|
5115
|
-
pre: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5439
|
+
pre: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { style: { margin: 0 }, ...props, children }),
|
|
5116
5440
|
// Blockquotes
|
|
5117
|
-
blockquote: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5441
|
+
blockquote: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5118
5442
|
"blockquote",
|
|
5119
5443
|
{
|
|
5120
5444
|
style: {
|
|
@@ -5130,11 +5454,11 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
5130
5454
|
}
|
|
5131
5455
|
),
|
|
5132
5456
|
// Strong/bold
|
|
5133
|
-
strong: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5457
|
+
strong: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { style: { fontWeight: 600 }, ...props, children }),
|
|
5134
5458
|
// Emphasis/italic
|
|
5135
|
-
em: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5459
|
+
em: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("em", { style: { fontStyle: "italic" }, ...props, children }),
|
|
5136
5460
|
// Horizontal rule
|
|
5137
|
-
hr: (props) => /* @__PURE__ */ (0,
|
|
5461
|
+
hr: (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5138
5462
|
"hr",
|
|
5139
5463
|
{
|
|
5140
5464
|
style: {
|
|
@@ -5147,7 +5471,7 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
5147
5471
|
}
|
|
5148
5472
|
),
|
|
5149
5473
|
// Tables (GFM)
|
|
5150
|
-
table: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5474
|
+
table: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { overflowX: "auto", marginTop: "0.5em", marginBottom: "0.5em" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5151
5475
|
"table",
|
|
5152
5476
|
{
|
|
5153
5477
|
style: {
|
|
@@ -5159,7 +5483,7 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
5159
5483
|
children
|
|
5160
5484
|
}
|
|
5161
5485
|
) }),
|
|
5162
|
-
th: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5486
|
+
th: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5163
5487
|
"th",
|
|
5164
5488
|
{
|
|
5165
5489
|
style: {
|
|
@@ -5173,7 +5497,7 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
5173
5497
|
children
|
|
5174
5498
|
}
|
|
5175
5499
|
),
|
|
5176
|
-
td: ({ children, ...props }) => /* @__PURE__ */ (0,
|
|
5500
|
+
td: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5177
5501
|
"td",
|
|
5178
5502
|
{
|
|
5179
5503
|
style: {
|
|
@@ -5191,32 +5515,32 @@ var MarkdownRenderer = ({ content, className }) => {
|
|
|
5191
5515
|
};
|
|
5192
5516
|
|
|
5193
5517
|
// src/react/ai/FloatingChatBox.tsx
|
|
5194
|
-
var
|
|
5195
|
-
var ChatIcon = () => /* @__PURE__ */ (0,
|
|
5196
|
-
var CloseIcon = () => /* @__PURE__ */ (0,
|
|
5197
|
-
/* @__PURE__ */ (0,
|
|
5198
|
-
/* @__PURE__ */ (0,
|
|
5518
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
5519
|
+
var ChatIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
|
|
5520
|
+
var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
5521
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
5522
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
5199
5523
|
] });
|
|
5200
|
-
var ExpandIcon = () => /* @__PURE__ */ (0,
|
|
5201
|
-
/* @__PURE__ */ (0,
|
|
5202
|
-
/* @__PURE__ */ (0,
|
|
5203
|
-
/* @__PURE__ */ (0,
|
|
5204
|
-
/* @__PURE__ */ (0,
|
|
5524
|
+
var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
5525
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "15 3 21 3 21 9" }),
|
|
5526
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "9 21 3 21 3 15" }),
|
|
5527
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
|
|
5528
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
|
|
5205
5529
|
] });
|
|
5206
|
-
var CollapseIcon = () => /* @__PURE__ */ (0,
|
|
5207
|
-
/* @__PURE__ */ (0,
|
|
5208
|
-
/* @__PURE__ */ (0,
|
|
5209
|
-
/* @__PURE__ */ (0,
|
|
5210
|
-
/* @__PURE__ */ (0,
|
|
5530
|
+
var CollapseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
5531
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "4 14 10 14 10 20" }),
|
|
5532
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "20 10 14 10 14 4" }),
|
|
5533
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
|
|
5534
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
|
|
5211
5535
|
] });
|
|
5212
|
-
var SendIcon = () => /* @__PURE__ */ (0,
|
|
5213
|
-
/* @__PURE__ */ (0,
|
|
5214
|
-
/* @__PURE__ */ (0,
|
|
5536
|
+
var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
5537
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
|
|
5538
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
|
|
5215
5539
|
] });
|
|
5216
|
-
var LayersIcon = () => /* @__PURE__ */ (0,
|
|
5217
|
-
/* @__PURE__ */ (0,
|
|
5218
|
-
/* @__PURE__ */ (0,
|
|
5219
|
-
/* @__PURE__ */ (0,
|
|
5540
|
+
var LayersIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
5541
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
|
|
5542
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "2 17 12 22 22 17" }),
|
|
5543
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "2 12 12 17 22 12" })
|
|
5220
5544
|
] });
|
|
5221
5545
|
var styles = {
|
|
5222
5546
|
root: {
|
|
@@ -5521,42 +5845,42 @@ var FloatingChatBox = ({
|
|
|
5521
5845
|
open: openProp
|
|
5522
5846
|
}) => {
|
|
5523
5847
|
const isControlled = openProp !== void 0;
|
|
5524
|
-
const [internalOpen, setInternalOpen] = (0,
|
|
5848
|
+
const [internalOpen, setInternalOpen] = (0, import_react10.useState)(false);
|
|
5525
5849
|
const open = isControlled ? openProp : internalOpen;
|
|
5526
|
-
const setOpen = (0,
|
|
5850
|
+
const setOpen = (0, import_react10.useCallback)((value) => {
|
|
5527
5851
|
const newValue = typeof value === "function" ? value(open) : value;
|
|
5528
5852
|
if (!isControlled) {
|
|
5529
5853
|
setInternalOpen(newValue);
|
|
5530
5854
|
}
|
|
5531
5855
|
onOpenChange?.(newValue);
|
|
5532
5856
|
}, [isControlled, open, onOpenChange]);
|
|
5533
|
-
const [expanded, setExpanded] = (0,
|
|
5534
|
-
const [messages, setMessages] = (0,
|
|
5535
|
-
const [inputValue, setInputValue] = (0,
|
|
5536
|
-
const [conversationId, setConversationId] = (0,
|
|
5537
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
5538
|
-
const [isFocused, setIsFocused] = (0,
|
|
5539
|
-
const [isMobile, setIsMobile] = (0,
|
|
5540
|
-
const messagesEndRef = (0,
|
|
5541
|
-
const messagesContainerRef = (0,
|
|
5542
|
-
const chatBoxRef = (0,
|
|
5543
|
-
const chatConfig = (0,
|
|
5857
|
+
const [expanded, setExpanded] = (0, import_react10.useState)(false);
|
|
5858
|
+
const [messages, setMessages] = (0, import_react10.useState)([]);
|
|
5859
|
+
const [inputValue, setInputValue] = (0, import_react10.useState)("");
|
|
5860
|
+
const [conversationId, setConversationId] = (0, import_react10.useState)();
|
|
5861
|
+
const [errorMessage, setErrorMessage] = (0, import_react10.useState)(null);
|
|
5862
|
+
const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
|
|
5863
|
+
const [isMobile, setIsMobile] = (0, import_react10.useState)(false);
|
|
5864
|
+
const messagesEndRef = (0, import_react10.useRef)(null);
|
|
5865
|
+
const messagesContainerRef = (0, import_react10.useRef)(null);
|
|
5866
|
+
const chatBoxRef = (0, import_react10.useRef)(null);
|
|
5867
|
+
const chatConfig = (0, import_react10.useMemo)(() => {
|
|
5544
5868
|
if (!baseUrl) return void 0;
|
|
5545
5869
|
return { baseUrl, accessToken, getAccessToken };
|
|
5546
5870
|
}, [accessToken, baseUrl, getAccessToken]);
|
|
5547
5871
|
const { sendMessage: sendMessage2, isStreaming, streamingText, completeResponse } = useSendMessageStream(chatConfig);
|
|
5548
5872
|
const canSend = Boolean(mapId) && Boolean(baseUrl) && inputValue.trim().length > 0 && !isStreaming;
|
|
5549
|
-
(0,
|
|
5873
|
+
(0, import_react10.useEffect)(() => {
|
|
5550
5874
|
if (open && isMobile) {
|
|
5551
5875
|
setExpanded(true);
|
|
5552
5876
|
}
|
|
5553
5877
|
}, [open, isMobile]);
|
|
5554
|
-
const scrollToBottom = (0,
|
|
5878
|
+
const scrollToBottom = (0, import_react10.useCallback)(() => {
|
|
5555
5879
|
if (messagesEndRef.current) {
|
|
5556
5880
|
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
|
|
5557
5881
|
}
|
|
5558
5882
|
}, []);
|
|
5559
|
-
(0,
|
|
5883
|
+
(0, import_react10.useEffect)(() => {
|
|
5560
5884
|
if (open && messages.length === 0) {
|
|
5561
5885
|
setMessages([
|
|
5562
5886
|
{
|
|
@@ -5567,10 +5891,10 @@ var FloatingChatBox = ({
|
|
|
5567
5891
|
]);
|
|
5568
5892
|
}
|
|
5569
5893
|
}, [open, messages.length]);
|
|
5570
|
-
(0,
|
|
5894
|
+
(0, import_react10.useEffect)(() => {
|
|
5571
5895
|
scrollToBottom();
|
|
5572
5896
|
}, [messages, streamingText, scrollToBottom]);
|
|
5573
|
-
(0,
|
|
5897
|
+
(0, import_react10.useEffect)(() => {
|
|
5574
5898
|
if (!open) return;
|
|
5575
5899
|
if (isMobile && expanded) return;
|
|
5576
5900
|
const handleClickOutside = (event) => {
|
|
@@ -5583,7 +5907,7 @@ var FloatingChatBox = ({
|
|
|
5583
5907
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
5584
5908
|
};
|
|
5585
5909
|
}, [open, isMobile, expanded]);
|
|
5586
|
-
(0,
|
|
5910
|
+
(0, import_react10.useEffect)(() => {
|
|
5587
5911
|
if (typeof window === "undefined") return;
|
|
5588
5912
|
const mediaQuery = window.matchMedia("(max-width: 768px)");
|
|
5589
5913
|
const updateMobile = () => setIsMobile(mediaQuery.matches);
|
|
@@ -5601,7 +5925,7 @@ var FloatingChatBox = ({
|
|
|
5601
5925
|
}
|
|
5602
5926
|
};
|
|
5603
5927
|
}, []);
|
|
5604
|
-
(0,
|
|
5928
|
+
(0, import_react10.useEffect)(() => {
|
|
5605
5929
|
if (typeof document === "undefined") return;
|
|
5606
5930
|
if (!open || !isMobile) return;
|
|
5607
5931
|
document.body.style.overflow = "hidden";
|
|
@@ -5609,10 +5933,10 @@ var FloatingChatBox = ({
|
|
|
5609
5933
|
document.body.style.overflow = "";
|
|
5610
5934
|
};
|
|
5611
5935
|
}, [open, isMobile]);
|
|
5612
|
-
const addMessage = (0,
|
|
5936
|
+
const addMessage = (0, import_react10.useCallback)((message) => {
|
|
5613
5937
|
setMessages((prev) => [...prev, message]);
|
|
5614
5938
|
}, []);
|
|
5615
|
-
const handleSend = (0,
|
|
5939
|
+
const handleSend = (0, import_react10.useCallback)(async () => {
|
|
5616
5940
|
if (!mapId) {
|
|
5617
5941
|
setErrorMessage("Selecciona un mapa para usar el asistente.");
|
|
5618
5942
|
return;
|
|
@@ -5665,7 +5989,7 @@ var FloatingChatBox = ({
|
|
|
5665
5989
|
sendMessage2,
|
|
5666
5990
|
userId
|
|
5667
5991
|
]);
|
|
5668
|
-
const handleKeyDown = (0,
|
|
5992
|
+
const handleKeyDown = (0, import_react10.useCallback)(
|
|
5669
5993
|
(event) => {
|
|
5670
5994
|
if (event.key === "Enter" && !event.shiftKey) {
|
|
5671
5995
|
event.preventDefault();
|
|
@@ -5676,20 +6000,20 @@ var FloatingChatBox = ({
|
|
|
5676
6000
|
},
|
|
5677
6001
|
[canSend, handleSend]
|
|
5678
6002
|
);
|
|
5679
|
-
const handleFollowUpClick = (0,
|
|
6003
|
+
const handleFollowUpClick = (0, import_react10.useCallback)((question) => {
|
|
5680
6004
|
setInputValue(question);
|
|
5681
6005
|
}, []);
|
|
5682
6006
|
const renderMetadata = (response) => {
|
|
5683
6007
|
if (!response?.metadata) return null;
|
|
5684
6008
|
const referencedLayers = response.metadata.referencedLayers;
|
|
5685
6009
|
if (!referencedLayers || referencedLayers.length === 0) return null;
|
|
5686
|
-
return /* @__PURE__ */ (0,
|
|
5687
|
-
/* @__PURE__ */ (0,
|
|
5688
|
-
/* @__PURE__ */ (0,
|
|
6010
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.metadataSection, children: [
|
|
6011
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.metadataTitle, children: [
|
|
6012
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LayersIcon, {}),
|
|
5689
6013
|
"Capas Analizadas"
|
|
5690
6014
|
] }),
|
|
5691
|
-
/* @__PURE__ */ (0,
|
|
5692
|
-
/* @__PURE__ */ (0,
|
|
6015
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { style: styles.metadataList, children: referencedLayers.map((layer, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { style: styles.metadataItem, children: [
|
|
6016
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: layer.layerName }),
|
|
5693
6017
|
" (",
|
|
5694
6018
|
layer.featureCount,
|
|
5695
6019
|
" ",
|
|
@@ -5698,7 +6022,7 @@ var FloatingChatBox = ({
|
|
|
5698
6022
|
] }, index)) })
|
|
5699
6023
|
] });
|
|
5700
6024
|
};
|
|
5701
|
-
const handleActionClick = (0,
|
|
6025
|
+
const handleActionClick = (0, import_react10.useCallback)((action) => {
|
|
5702
6026
|
if (isStreaming) return;
|
|
5703
6027
|
setOpen(false);
|
|
5704
6028
|
requestAnimationFrame(() => {
|
|
@@ -5707,9 +6031,9 @@ var FloatingChatBox = ({
|
|
|
5707
6031
|
}, [isStreaming, setOpen, onActionClick]);
|
|
5708
6032
|
const renderActions = (response) => {
|
|
5709
6033
|
if (!response?.suggestedActions?.length) return null;
|
|
5710
|
-
return /* @__PURE__ */ (0,
|
|
5711
|
-
/* @__PURE__ */ (0,
|
|
5712
|
-
/* @__PURE__ */ (0,
|
|
6034
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.actionsSection, children: [
|
|
6035
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.sectionLabel, children: "Acciones Sugeridas" }),
|
|
6036
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.actionsGrid, children: response.suggestedActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5713
6037
|
"button",
|
|
5714
6038
|
{
|
|
5715
6039
|
type: "button",
|
|
@@ -5740,9 +6064,9 @@ var FloatingChatBox = ({
|
|
|
5740
6064
|
};
|
|
5741
6065
|
const renderFollowUps = (response) => {
|
|
5742
6066
|
if (!response?.followUpQuestions?.length) return null;
|
|
5743
|
-
return /* @__PURE__ */ (0,
|
|
5744
|
-
/* @__PURE__ */ (0,
|
|
5745
|
-
/* @__PURE__ */ (0,
|
|
6067
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.actionsSection, children: [
|
|
6068
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.sectionLabel, children: "Preguntas Relacionadas" }),
|
|
6069
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: response.followUpQuestions.map((question, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5746
6070
|
"button",
|
|
5747
6071
|
{
|
|
5748
6072
|
type: "button",
|
|
@@ -5771,8 +6095,8 @@ var FloatingChatBox = ({
|
|
|
5771
6095
|
)) })
|
|
5772
6096
|
] });
|
|
5773
6097
|
};
|
|
5774
|
-
const chatContent = /* @__PURE__ */ (0,
|
|
5775
|
-
/* @__PURE__ */ (0,
|
|
6098
|
+
const chatContent = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.root, children: [
|
|
6099
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `
|
|
5776
6100
|
@keyframes zenitBlink {
|
|
5777
6101
|
0%, 49% { opacity: 1; }
|
|
5778
6102
|
50%, 100% { opacity: 0; }
|
|
@@ -5828,7 +6152,7 @@ var FloatingChatBox = ({
|
|
|
5828
6152
|
}
|
|
5829
6153
|
}
|
|
5830
6154
|
` }),
|
|
5831
|
-
open && /* @__PURE__ */ (0,
|
|
6155
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
5832
6156
|
"div",
|
|
5833
6157
|
{
|
|
5834
6158
|
ref: chatBoxRef,
|
|
@@ -5842,10 +6166,10 @@ var FloatingChatBox = ({
|
|
|
5842
6166
|
};
|
|
5843
6167
|
})(),
|
|
5844
6168
|
children: [
|
|
5845
|
-
/* @__PURE__ */ (0,
|
|
5846
|
-
/* @__PURE__ */ (0,
|
|
5847
|
-
/* @__PURE__ */ (0,
|
|
5848
|
-
!isMobile && /* @__PURE__ */ (0,
|
|
6169
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { style: styles.header, children: [
|
|
6170
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { style: styles.title, children: "Asistente Zenit AI" }),
|
|
6171
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.headerButtons, children: [
|
|
6172
|
+
!isMobile && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5849
6173
|
"button",
|
|
5850
6174
|
{
|
|
5851
6175
|
type: "button",
|
|
@@ -5858,10 +6182,10 @@ var FloatingChatBox = ({
|
|
|
5858
6182
|
e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
|
|
5859
6183
|
},
|
|
5860
6184
|
"aria-label": expanded ? "Contraer" : "Expandir",
|
|
5861
|
-
children: expanded ? /* @__PURE__ */ (0,
|
|
6185
|
+
children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ExpandIcon, {})
|
|
5862
6186
|
}
|
|
5863
6187
|
),
|
|
5864
|
-
/* @__PURE__ */ (0,
|
|
6188
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5865
6189
|
"button",
|
|
5866
6190
|
{
|
|
5867
6191
|
type: "button",
|
|
@@ -5874,20 +6198,20 @@ var FloatingChatBox = ({
|
|
|
5874
6198
|
e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
|
|
5875
6199
|
},
|
|
5876
6200
|
"aria-label": "Cerrar",
|
|
5877
|
-
children: /* @__PURE__ */ (0,
|
|
6201
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon, {})
|
|
5878
6202
|
}
|
|
5879
6203
|
)
|
|
5880
6204
|
] })
|
|
5881
6205
|
] }),
|
|
5882
|
-
/* @__PURE__ */ (0,
|
|
5883
|
-
messages.map((message) => /* @__PURE__ */ (0,
|
|
6206
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: messagesContainerRef, className: "zenit-ai-body", style: styles.messages, children: [
|
|
6207
|
+
messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5884
6208
|
"div",
|
|
5885
6209
|
{
|
|
5886
6210
|
style: {
|
|
5887
6211
|
...styles.messageWrapper,
|
|
5888
6212
|
alignItems: message.role === "user" ? "flex-end" : "flex-start"
|
|
5889
6213
|
},
|
|
5890
|
-
children: /* @__PURE__ */ (0,
|
|
6214
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
5891
6215
|
"div",
|
|
5892
6216
|
{
|
|
5893
6217
|
style: {
|
|
@@ -5895,7 +6219,7 @@ var FloatingChatBox = ({
|
|
|
5895
6219
|
...message.role === "user" ? styles.userMessage : styles.assistantMessage
|
|
5896
6220
|
},
|
|
5897
6221
|
children: [
|
|
5898
|
-
message.role === "assistant" ? /* @__PURE__ */ (0,
|
|
6222
|
+
message.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkdownRenderer, { content: message.content }) : message.content,
|
|
5899
6223
|
message.role === "assistant" && renderMetadata(message.response),
|
|
5900
6224
|
message.role === "assistant" && renderActions(message.response),
|
|
5901
6225
|
message.role === "assistant" && renderFollowUps(message.response)
|
|
@@ -5905,39 +6229,39 @@ var FloatingChatBox = ({
|
|
|
5905
6229
|
},
|
|
5906
6230
|
message.id
|
|
5907
6231
|
)),
|
|
5908
|
-
isStreaming && /* @__PURE__ */ (0,
|
|
6232
|
+
isStreaming && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5909
6233
|
"div",
|
|
5910
6234
|
{
|
|
5911
6235
|
style: {
|
|
5912
6236
|
...styles.messageWrapper,
|
|
5913
6237
|
alignItems: "flex-start"
|
|
5914
6238
|
},
|
|
5915
|
-
children: /* @__PURE__ */ (0,
|
|
6239
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5916
6240
|
"div",
|
|
5917
6241
|
{
|
|
5918
6242
|
style: {
|
|
5919
6243
|
...styles.messageBubble,
|
|
5920
6244
|
...styles.assistantMessage
|
|
5921
6245
|
},
|
|
5922
|
-
children: streamingText ? /* @__PURE__ */ (0,
|
|
5923
|
-
/* @__PURE__ */ (0,
|
|
5924
|
-
/* @__PURE__ */ (0,
|
|
5925
|
-
] }) : /* @__PURE__ */ (0,
|
|
5926
|
-
/* @__PURE__ */ (0,
|
|
5927
|
-
/* @__PURE__ */ (0,
|
|
5928
|
-
/* @__PURE__ */ (0,
|
|
5929
|
-
/* @__PURE__ */ (0,
|
|
5930
|
-
/* @__PURE__ */ (0,
|
|
6246
|
+
children: streamingText ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
6247
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkdownRenderer, { content: streamingText }),
|
|
6248
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: styles.cursor })
|
|
6249
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.thinkingText, children: [
|
|
6250
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Pensando" }),
|
|
6251
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.typingIndicator, children: [
|
|
6252
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "zenit-typing-dot", style: styles.typingDot }),
|
|
6253
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "zenit-typing-dot", style: styles.typingDot }),
|
|
6254
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "zenit-typing-dot", style: styles.typingDot })
|
|
5931
6255
|
] })
|
|
5932
6256
|
] })
|
|
5933
6257
|
}
|
|
5934
6258
|
)
|
|
5935
6259
|
}
|
|
5936
6260
|
),
|
|
5937
|
-
/* @__PURE__ */ (0,
|
|
6261
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: messagesEndRef })
|
|
5938
6262
|
] }),
|
|
5939
|
-
/* @__PURE__ */ (0,
|
|
5940
|
-
/* @__PURE__ */ (0,
|
|
6263
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
|
|
6264
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5941
6265
|
"textarea",
|
|
5942
6266
|
{
|
|
5943
6267
|
style: {
|
|
@@ -5954,7 +6278,7 @@ var FloatingChatBox = ({
|
|
|
5954
6278
|
disabled: !mapId || !baseUrl || isStreaming
|
|
5955
6279
|
}
|
|
5956
6280
|
),
|
|
5957
|
-
/* @__PURE__ */ (0,
|
|
6281
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5958
6282
|
"button",
|
|
5959
6283
|
{
|
|
5960
6284
|
type: "button",
|
|
@@ -5963,18 +6287,18 @@ var FloatingChatBox = ({
|
|
|
5963
6287
|
onClick: () => void handleSend(),
|
|
5964
6288
|
disabled: !canSend,
|
|
5965
6289
|
"aria-label": "Enviar mensaje",
|
|
5966
|
-
children: /* @__PURE__ */ (0,
|
|
6290
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SendIcon, {})
|
|
5967
6291
|
}
|
|
5968
6292
|
)
|
|
5969
6293
|
] }),
|
|
5970
|
-
errorMessage && /* @__PURE__ */ (0,
|
|
5971
|
-
isStreaming && !errorMessage && /* @__PURE__ */ (0,
|
|
5972
|
-
!mapId && !errorMessage && /* @__PURE__ */ (0,
|
|
5973
|
-
!baseUrl && !errorMessage && /* @__PURE__ */ (0,
|
|
6294
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.errorText, children: errorMessage }),
|
|
6295
|
+
isStreaming && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.statusNote, children: "Generando sugerencias..." }),
|
|
6296
|
+
!mapId && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.statusNote, children: "Selecciona un mapa para usar el asistente" }),
|
|
6297
|
+
!baseUrl && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.statusNote, children: "Configura la baseUrl del SDK" })
|
|
5974
6298
|
]
|
|
5975
6299
|
}
|
|
5976
6300
|
),
|
|
5977
|
-
!(hideButton && !open) && /* @__PURE__ */ (0,
|
|
6301
|
+
!(hideButton && !open) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
5978
6302
|
"button",
|
|
5979
6303
|
{
|
|
5980
6304
|
type: "button",
|
|
@@ -5986,9 +6310,9 @@ var FloatingChatBox = ({
|
|
|
5986
6310
|
},
|
|
5987
6311
|
onClick: () => setOpen((prev) => !prev),
|
|
5988
6312
|
"aria-label": open ? "Cerrar asistente" : "Abrir asistente Zenit AI",
|
|
5989
|
-
children: open ? /* @__PURE__ */ (0,
|
|
5990
|
-
/* @__PURE__ */ (0,
|
|
5991
|
-
!isMobile && /* @__PURE__ */ (0,
|
|
6313
|
+
children: open ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
6314
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatIcon, {}),
|
|
6315
|
+
!isMobile && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Asistente IA" })
|
|
5992
6316
|
] })
|
|
5993
6317
|
}
|
|
5994
6318
|
)
|
|
@@ -6046,6 +6370,7 @@ var FloatingChatBox = ({
|
|
|
6046
6370
|
getStyleByLayerId,
|
|
6047
6371
|
getZoomOpacityFactor,
|
|
6048
6372
|
initLayerStates,
|
|
6373
|
+
initZenit,
|
|
6049
6374
|
isPolygonLayer,
|
|
6050
6375
|
mergeFilters,
|
|
6051
6376
|
normalizeBbox,
|