openlayers-style-editor 0.2.2 → 0.2.3

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.
Files changed (6) hide show
  1. package/dist/index.cjs +3483 -0
  2. package/dist/index.js +3437 -0
  3. package/package.json +1 -1
  4. package/dist/auto-BpR47GuV.js +0 -8153
  5. package/dist/index.es.js +0 -30224
  6. package/dist/index.umd.js +0 -1662
package/dist/index.js ADDED
@@ -0,0 +1,3437 @@
1
+ import { PrimeReactProvider } from "primereact/api/api.esm.js";
2
+ import { createContext, useContext, useEffect, useRef, useState } from "react";
3
+ import { Dialog } from "primereact/dialog/dialog.esm.js";
4
+ import { asString, fromString } from "ol/color.js";
5
+ import { Slider } from "primereact/slider/slider.esm.js";
6
+ import ColorPicker from "react-best-gradient-color-picker";
7
+ import { I18nextProvider, initReactI18next, useTranslation } from "react-i18next";
8
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
+ import { Button } from "primereact/button/button.esm.js";
10
+ import { Dropdown } from "primereact/dropdown/dropdown.esm.js";
11
+ import { Checkbox } from "primereact/checkbox/checkbox.esm.js";
12
+ import { DataTable } from "primereact/datatable/datatable.esm.js";
13
+ import { Column } from "primereact/column/column.esm.js";
14
+ import { Chart } from "primereact/chart/chart.esm.js";
15
+ import { InputNumber } from "primereact/inputnumber/inputnumber.esm.js";
16
+ import { Toast } from "primereact/toast/toast.esm.js";
17
+ import { jenksBuckets, quantileBuckets, standardDeviationBuckets } from "geobuckets/dist/src/index.js";
18
+ import { ScrollPanel } from "primereact/scrollpanel/scrollpanel.esm.js";
19
+ import { Panel } from "primereact/panel/panel.esm.js";
20
+ import { Fieldset } from "primereact/fieldset/fieldset.esm.js";
21
+ import { InputText } from "primereact/inputtext/inputtext.esm.js";
22
+ import { RadioButton } from "primereact/radiobutton/radiobutton.esm.js";
23
+ import jsonLogic from "json-logic-js";
24
+ import i18n from "i18next";
25
+ //#region src/components/myColorPicker.tsx
26
+ var MyColorPicker = (props) => {
27
+ const { color, onChange, hideAlpha } = props;
28
+ const [visible, setVisible] = useState(false);
29
+ const { t } = useTranslation();
30
+ const selectColor = t("color_picker.select_color");
31
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
32
+ style: { backgroundColor: asString(color) },
33
+ className: "color-picker",
34
+ onClick: () => setVisible(true)
35
+ }), /* @__PURE__ */ jsx(Dialog, {
36
+ header: selectColor,
37
+ onHide: () => setVisible(false),
38
+ visible,
39
+ children: /* @__PURE__ */ jsx(ColorPicker, {
40
+ value: asString(color),
41
+ onChange,
42
+ hideOpacity: hideAlpha,
43
+ hideControls: true
44
+ })
45
+ })] });
46
+ };
47
+ //#endregion
48
+ //#region src/rendererUtils.ts
49
+ var AttributeTypeEnum = /* @__PURE__ */ function(AttributeTypeEnum) {
50
+ AttributeTypeEnum[AttributeTypeEnum["STRING"] = 0] = "STRING";
51
+ AttributeTypeEnum[AttributeTypeEnum["INTEGER"] = 1] = "INTEGER";
52
+ AttributeTypeEnum[AttributeTypeEnum["FLOAT"] = 2] = "FLOAT";
53
+ AttributeTypeEnum[AttributeTypeEnum["BOOLEAN"] = 3] = "BOOLEAN";
54
+ AttributeTypeEnum[AttributeTypeEnum["DATE"] = 4] = "DATE";
55
+ AttributeTypeEnum[AttributeTypeEnum["JSON"] = 5] = "JSON";
56
+ return AttributeTypeEnum;
57
+ }({});
58
+ var RenderType = /* @__PURE__ */ function(RenderType) {
59
+ RenderType["Unique"] = "Unique";
60
+ RenderType["Categorized"] = "Categorized";
61
+ RenderType["Graduated"] = "Graduated";
62
+ RenderType["ByRules"] = "ByRules";
63
+ return RenderType;
64
+ }({});
65
+ var GraduatedModes = /* @__PURE__ */ function(GraduatedModes) {
66
+ GraduatedModes["Manual"] = "Manual";
67
+ GraduatedModes["EqualInterval"] = "EqualInterval";
68
+ GraduatedModes["DefinedInterval"] = "DefinedInterval";
69
+ GraduatedModes["Quantile"] = "Quantile";
70
+ GraduatedModes["NaturalBreaks"] = "NaturalBreaks";
71
+ GraduatedModes["GeometricInterval"] = "GeometricInterval";
72
+ GraduatedModes["StandardDeviation"] = "StandardDeviation";
73
+ return GraduatedModes;
74
+ }({});
75
+ function getCategorizedStyle(attribute, colors, outlineColor, outlineWidth, defaultColor) {
76
+ let outlineColorCopy = outlineColor ? outlineColor : void 0;
77
+ if (outlineWidth == 0 && outlineColorCopy != void 0) outlineColorCopy[3] = 0;
78
+ else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColorCopy) outlineColorCopy[3] = 1;
79
+ let aux = [];
80
+ aux.push("match");
81
+ aux.push(["get", attribute]);
82
+ colors.forEach((color) => {
83
+ aux.push(color.value);
84
+ aux.push(color.color);
85
+ });
86
+ aux.push(defaultColor || fromString("#333333"));
87
+ return {
88
+ "stroke-color": [
89
+ "case",
90
+ [
91
+ "==",
92
+ ["var", "highlightedId"],
93
+ ["id"]
94
+ ],
95
+ "white",
96
+ outlineColorCopy || "#000000"
97
+ ],
98
+ "stroke-width": [
99
+ "case",
100
+ [
101
+ "==",
102
+ ["var", "highlightedId"],
103
+ ["id"]
104
+ ],
105
+ 2,
106
+ outlineWidth == void 0 ? 1 : outlineWidth
107
+ ],
108
+ "fill-color": aux
109
+ };
110
+ }
111
+ function singleColorStyle(color, outlineColor, outlineWidth) {
112
+ let outlineColorCopy = outlineColor ? outlineColor : void 0;
113
+ if (outlineWidth == 0 && outlineColorCopy != void 0) outlineColorCopy[3] = 0;
114
+ else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColorCopy) outlineColorCopy[3] = 1;
115
+ return {
116
+ "stroke-color": [
117
+ "case",
118
+ [
119
+ "==",
120
+ ["var", "highlightedId"],
121
+ ["id"]
122
+ ],
123
+ "white",
124
+ outlineColorCopy || "#000000"
125
+ ],
126
+ "stroke-width": [
127
+ "case",
128
+ [
129
+ "==",
130
+ ["var", "highlightedId"],
131
+ ["id"]
132
+ ],
133
+ 2,
134
+ outlineWidth == void 0 ? 1 : outlineWidth
135
+ ],
136
+ "stroke-offset": 0,
137
+ "fill-color": color
138
+ };
139
+ }
140
+ function singleColorStyleForLines(color) {
141
+ return {
142
+ "stroke-color": color,
143
+ "stroke-width": 1,
144
+ "stroke-offset": 0
145
+ };
146
+ }
147
+ function getGraduatedStyle(attribute, ramp, outlineColor, outlineWidth) {
148
+ let outlineColorCopy = outlineColor ? outlineColor : void 0;
149
+ if (outlineWidth == 0 && outlineColorCopy != void 0) outlineColorCopy[3] = 0;
150
+ else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColorCopy) outlineColorCopy[3] = 1;
151
+ let aux = [];
152
+ aux.push("interpolate");
153
+ aux.push(["linear"]);
154
+ aux.push(["get", attribute]);
155
+ ramp.forEach((stop) => {
156
+ aux.push(stop.value);
157
+ aux.push(stop.color);
158
+ });
159
+ const res = {
160
+ "stroke-color": [
161
+ "case",
162
+ [
163
+ "==",
164
+ ["var", "highlightedId"],
165
+ ["id"]
166
+ ],
167
+ "white",
168
+ outlineColorCopy || "#000000"
169
+ ],
170
+ "stroke-width": [
171
+ "case",
172
+ [
173
+ "==",
174
+ ["var", "highlightedId"],
175
+ ["id"]
176
+ ],
177
+ 2,
178
+ outlineWidth == void 0 ? 1 : outlineWidth
179
+ ],
180
+ "fill-color": aux
181
+ };
182
+ console.log(res);
183
+ return res;
184
+ }
185
+ function getRendererOpacity(renderer) {
186
+ if (renderer.type == RenderType.Unique) return renderer.rendererOL["fill-color"][3] * 100;
187
+ if (renderer.type == RenderType.Categorized) return renderer.rendererOL["fill-color"][3][3] * 100;
188
+ if (renderer.type == RenderType.Graduated) return renderer.rendererOL["fill-color"][4][3] * 100;
189
+ return 100;
190
+ }
191
+ function changeRendererOpacity(renderer, opacity) {
192
+ let newRenderer = renderer;
193
+ if (renderer.type == RenderType.Unique) {
194
+ let aux = renderer.rendererOL["fill-color"];
195
+ aux = [...aux];
196
+ aux[3] = opacity / 100;
197
+ newRenderer = {
198
+ ...renderer,
199
+ rendererOL: {
200
+ ...renderer.rendererOL,
201
+ ["fill-color"]: aux
202
+ }
203
+ };
204
+ }
205
+ if (renderer.type == RenderType.Categorized) {
206
+ let aux = renderer.rendererOL["fill-color"].slice(3);
207
+ let newAux = [...aux];
208
+ for (let i = 0; i < aux.length; i += 2) {
209
+ let color = [...aux[i]];
210
+ color[3] = opacity / 100;
211
+ newAux[i] = color;
212
+ }
213
+ newRenderer = {
214
+ ...renderer,
215
+ rendererOL: {
216
+ ...renderer.rendererOL,
217
+ ["fill-color"]: renderer.rendererOL["fill-color"].slice(0, 3).concat(newAux)
218
+ }
219
+ };
220
+ }
221
+ if (renderer.type == RenderType.Graduated) {
222
+ let aux = renderer.rendererOL["fill-color"].slice(4);
223
+ let newAux = [...aux];
224
+ for (let i = 0; i < aux.length; i += 2) {
225
+ let color = [...aux[i]];
226
+ color[3] = opacity / 100;
227
+ newAux[i] = color;
228
+ }
229
+ newRenderer = {
230
+ ...renderer,
231
+ rendererOL: {
232
+ ...renderer.rendererOL,
233
+ ["fill-color"]: renderer.rendererOL["fill-color"].slice(0, 4).concat(newAux)
234
+ }
235
+ };
236
+ }
237
+ return newRenderer;
238
+ }
239
+ function getStyleColorsAndValues(style, type) {
240
+ let colors = [];
241
+ if (type == RenderType.Categorized) {
242
+ for (let i = 2; i < style["fill-color"].length - 1; i += 2) colors.push({
243
+ value: style["fill-color"][i],
244
+ color: style["fill-color"][i + 1]
245
+ });
246
+ colors.push({
247
+ value: "Nulo",
248
+ color: style["fill-color"][style["fill-color"].length - 1]
249
+ });
250
+ }
251
+ if (type == RenderType.Graduated) {
252
+ for (let i = 3; i < style["fill-color"].length - 1; i += 2) colors.push({
253
+ value: style["fill-color"][i],
254
+ color: style["fill-color"][i + 1]
255
+ });
256
+ colors.push({
257
+ value: "Nulo",
258
+ color: style["fill-color"][style["fill-color"].length - 1]
259
+ });
260
+ }
261
+ if (type == RenderType.Unique) colors = [{
262
+ value: "Único",
263
+ color: style["fill-color"]
264
+ }];
265
+ return colors;
266
+ }
267
+ function getRendererColorAndSizeStroke(renderer) {
268
+ return {
269
+ color: renderer.rendererOL["stroke-color"][3],
270
+ size: renderer.rendererOL["stroke-width"][3]
271
+ };
272
+ }
273
+ function generateRandomColor() {
274
+ return fromString("#" + (16777216 + Math.random() * 16777215).toString(16).substr(1, 6));
275
+ }
276
+ function getByRulesStyle(filters, idFieldName, elseFilter) {
277
+ if (filters.length === 0) if (elseFilter) {
278
+ let fillColor = getStyleColorsAndValues(elseFilter.symbol.rendererOL, RenderType.Unique)[0].color;
279
+ let stroke = getRendererColorAndSizeStroke(elseFilter.symbol);
280
+ return {
281
+ "stroke-color": Object.values(stroke.color),
282
+ "stroke-width": stroke.size,
283
+ "fill-color": fillColor
284
+ };
285
+ } else return {
286
+ "stroke-color": fromString("#000000"),
287
+ "stroke-width": 1,
288
+ "fill-color": fromString("#ffffff")
289
+ };
290
+ let fillColorArray = ["case"];
291
+ let strokeColorArray = ["case"];
292
+ let strokeWidthArray = ["case"];
293
+ filters.forEach((filter) => {
294
+ if (filter.ids.length > 0) {
295
+ let fillColor = getStyleColorsAndValues(filter.filter.symbol.rendererOL, RenderType.Unique)[0].color;
296
+ let cond = [
297
+ "in",
298
+ ["get", idFieldName],
299
+ filter.ids
300
+ ];
301
+ fillColorArray.push(cond);
302
+ fillColorArray.push(fillColor);
303
+ let stroke = getRendererColorAndSizeStroke(filter.filter.symbol);
304
+ strokeColorArray.push(cond);
305
+ strokeColorArray.push(Object.values(stroke.color));
306
+ strokeWidthArray.push(cond);
307
+ strokeWidthArray.push(stroke.size);
308
+ }
309
+ });
310
+ if (elseFilter) {
311
+ let fillColor = getStyleColorsAndValues(elseFilter.symbol.rendererOL, RenderType.Unique)[0].color;
312
+ fillColorArray.push(fillColor);
313
+ let stroke = getRendererColorAndSizeStroke(elseFilter.symbol);
314
+ strokeColorArray.push(Object.values(stroke.color));
315
+ strokeWidthArray.push(stroke.size);
316
+ } else {
317
+ fillColorArray.push(fromString("#ffffff"));
318
+ strokeColorArray.push(fromString("#000000"));
319
+ strokeWidthArray.push(1);
320
+ }
321
+ return {
322
+ "stroke-color": strokeColorArray,
323
+ "stroke-width": strokeWidthArray,
324
+ "fill-color": fillColorArray
325
+ };
326
+ }
327
+ //#endregion
328
+ //#region src/components/uniqueSymbol.tsx
329
+ var UniqueSymbol = (props) => {
330
+ const { layerCurrentRenderer, applyRenderer, setVisible } = props;
331
+ const { t } = useTranslation();
332
+ const fillColorLabel = t("unique_symbol.fill_color");
333
+ const strokeColorLabel = t("categorized.stroke_color");
334
+ const strokeWidthLabel = t("categorized.stroke_width");
335
+ const concludeLabel = t("common.conclude");
336
+ const start = "#18d7ba";
337
+ const currentStyle = layerCurrentRenderer.field ? null : layerCurrentRenderer.rendererOL;
338
+ const [color, setColor] = useState(currentStyle ? currentStyle["fill-color"] : fromString(start));
339
+ let auxBorder;
340
+ if (currentStyle) if (currentStyle["stroke-color"]) if (currentStyle["stroke-color"][0] == "case") auxBorder = currentStyle["stroke-color"][3];
341
+ else auxBorder = currentStyle["stroke-color"];
342
+ else auxBorder = fromString("#000000");
343
+ else auxBorder = fromString("#000000");
344
+ const [borderColor, setBorderColor] = useState(auxBorder);
345
+ let auxBorderWidth;
346
+ if (currentStyle) if (currentStyle["stroke-width"] instanceof Array) auxBorderWidth = currentStyle["stroke-width"][3];
347
+ else auxBorderWidth = currentStyle["stroke-width"];
348
+ else auxBorderWidth = 0;
349
+ const [borderThickness, setBorderThickness] = useState(auxBorderWidth);
350
+ function createRenderUnique(color, outlineColor, outlineWidth) {
351
+ return singleColorStyle(color, outlineColor, outlineWidth);
352
+ }
353
+ return /* @__PURE__ */ jsxs("div", {
354
+ className: "container",
355
+ children: [/* @__PURE__ */ jsxs("div", { children: [
356
+ /* @__PURE__ */ jsxs("div", {
357
+ className: "flex-row-unique",
358
+ children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [fillColorLabel, ":"] }) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MyColorPicker, {
359
+ color,
360
+ onChange: (e) => setColor(fromString(e))
361
+ }) })]
362
+ }),
363
+ /* @__PURE__ */ jsxs("div", {
364
+ className: "flex-row-unique",
365
+ children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [strokeColorLabel, ":"] }) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MyColorPicker, {
366
+ color: (() => {
367
+ if (borderColor.at(3) < 1) return [
368
+ borderColor[0],
369
+ borderColor[1],
370
+ borderColor[2],
371
+ 1
372
+ ];
373
+ return borderColor;
374
+ })(),
375
+ hideAlpha: true,
376
+ onChange: (e) => setBorderColor(fromString(e))
377
+ }) })]
378
+ }),
379
+ /* @__PURE__ */ jsxs("div", {
380
+ className: "flex-column-gap-7",
381
+ children: [
382
+ /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [strokeWidthLabel, ": "] }) }),
383
+ /* @__PURE__ */ jsx(Slider, {
384
+ max: 10,
385
+ min: 0,
386
+ className: "slider-wrapper",
387
+ value: borderThickness,
388
+ onChange: (e) => setBorderThickness(e.value)
389
+ }),
390
+ /* @__PURE__ */ jsxs("span", { children: [borderThickness, " px"] })
391
+ ]
392
+ })
393
+ ] }), /* @__PURE__ */ jsx("div", {
394
+ className: "button-wrapper",
395
+ children: /* @__PURE__ */ jsx(Button, {
396
+ label: concludeLabel,
397
+ onClick: () => {
398
+ applyRenderer({
399
+ type: RenderType.Unique,
400
+ rendererOL: createRenderUnique(color, borderColor, borderThickness)
401
+ });
402
+ setVisible(false);
403
+ }
404
+ })
405
+ })]
406
+ });
407
+ };
408
+ //#endregion
409
+ //#region src/components/rampColors.ts
410
+ function getColorRampString(ramp) {
411
+ let rampString = "linear-gradient(90deg, ";
412
+ ramp.forEach((color, index) => {
413
+ rampString += asString(color.color) + " " + color.offset * 100 + "%";
414
+ if (index < ramp.length - 1) rampString += ", ";
415
+ });
416
+ rampString += ")";
417
+ return rampString;
418
+ }
419
+ function hexToRgb(hex) {
420
+ return {
421
+ r: hex[0],
422
+ g: hex[1],
423
+ b: hex[2]
424
+ };
425
+ }
426
+ function rgbToHex({ r, g, b }) {
427
+ return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
428
+ }
429
+ function interpolateColor(color1, color2, factor) {
430
+ return {
431
+ r: Math.round(color1.r + (color2.r - color1.r) * factor),
432
+ g: Math.round(color1.g + (color2.g - color1.g) * factor),
433
+ b: Math.round(color1.b + (color2.b - color1.b) * factor)
434
+ };
435
+ }
436
+ function generateGradient(stops, numberOfSteps) {
437
+ const rgbStops = stops.map(({ color, offset }) => ({
438
+ rgb: hexToRgb(color),
439
+ offset
440
+ }));
441
+ const start = rgbStops[0].offset;
442
+ const range = rgbStops[rgbStops.length - 1].offset - start;
443
+ const normalizedStops = rgbStops.map((stop) => ({
444
+ ...stop,
445
+ normalizedPosition: (stop.offset - start) / range
446
+ }));
447
+ const result = [];
448
+ const stepIncrement = 1 / (numberOfSteps - 1);
449
+ for (let i = 0; i < numberOfSteps; i++) {
450
+ const stepPosition = i * stepIncrement;
451
+ const lowerStop = normalizedStops.find((stop) => stop.normalizedPosition <= stepPosition);
452
+ const upperStop = normalizedStops.find((stop) => stop.normalizedPosition >= stepPosition);
453
+ if (lowerStop.normalizedPosition === upperStop.normalizedPosition) result.push(rgbToHex(lowerStop.rgb));
454
+ else {
455
+ const segmentProgress = (stepPosition - lowerStop.normalizedPosition) / (upperStop.normalizedPosition - lowerStop.normalizedPosition);
456
+ const interpolatedColor = interpolateColor(lowerStop.rgb, upperStop.rgb, segmentProgress);
457
+ result.push(rgbToHex(interpolatedColor));
458
+ }
459
+ }
460
+ return result;
461
+ }
462
+ var colorRamps = [
463
+ {
464
+ id: 0,
465
+ name: "Blues",
466
+ palette: [
467
+ {
468
+ offset: .13,
469
+ color: fromString("rgb(222,235,247)")
470
+ },
471
+ {
472
+ offset: .26,
473
+ color: fromString("rgb(198,219,239)")
474
+ },
475
+ {
476
+ offset: .39,
477
+ color: fromString("rgb(158,202,225)")
478
+ },
479
+ {
480
+ offset: .52,
481
+ color: fromString("rgb(107,174,214)")
482
+ },
483
+ {
484
+ offset: .65,
485
+ color: fromString("rgb(66,146,198)")
486
+ },
487
+ {
488
+ offset: .78,
489
+ color: fromString("rgb(33,113,181)")
490
+ },
491
+ {
492
+ offset: .9,
493
+ color: fromString("rgb(8,81,156)")
494
+ }
495
+ ]
496
+ },
497
+ {
498
+ id: 1,
499
+ name: "BrBG",
500
+ palette: [
501
+ {
502
+ offset: .25,
503
+ color: fromString("rgb(223,194,125)")
504
+ },
505
+ {
506
+ offset: .5,
507
+ color: fromString("rgb(245,245,245)")
508
+ },
509
+ {
510
+ offset: .75,
511
+ color: fromString("rgb(128,205,193)")
512
+ }
513
+ ]
514
+ },
515
+ {
516
+ id: 2,
517
+ name: "BuGn",
518
+ palette: [
519
+ {
520
+ offset: .25,
521
+ color: fromString("rgb(178,226,226)")
522
+ },
523
+ {
524
+ offset: .5,
525
+ color: fromString("rgb(102,194,164)")
526
+ },
527
+ {
528
+ offset: .75,
529
+ color: fromString("rgb(44,162,95)")
530
+ }
531
+ ]
532
+ },
533
+ {
534
+ id: 3,
535
+ name: "BuPu",
536
+ palette: [
537
+ {
538
+ offset: .25,
539
+ color: fromString("rgb(179,205,227)")
540
+ },
541
+ {
542
+ offset: .5,
543
+ color: fromString("rgb(140,150,198)")
544
+ },
545
+ {
546
+ offset: .75,
547
+ color: fromString("rgb(136,86,167)")
548
+ }
549
+ ]
550
+ },
551
+ {
552
+ id: 4,
553
+ name: "GnBu",
554
+ palette: [
555
+ {
556
+ offset: .25,
557
+ color: fromString("rgb(186,228,188)")
558
+ },
559
+ {
560
+ offset: .5,
561
+ color: fromString("rgb(123,204,196)")
562
+ },
563
+ {
564
+ offset: .75,
565
+ color: fromString("rgb(67,162,202)")
566
+ }
567
+ ]
568
+ },
569
+ {
570
+ id: 5,
571
+ name: "Greens",
572
+ palette: [
573
+ {
574
+ offset: .13,
575
+ color: fromString("rgb(229,245,224)")
576
+ },
577
+ {
578
+ offset: .26,
579
+ color: fromString("rgb(199,233,192)")
580
+ },
581
+ {
582
+ offset: .39,
583
+ color: fromString("rgb(161,217,155)")
584
+ },
585
+ {
586
+ offset: .52,
587
+ color: fromString("rgb(116,196,118)")
588
+ },
589
+ {
590
+ offset: .65,
591
+ color: fromString("rgb(65,171,93)")
592
+ },
593
+ {
594
+ offset: .78,
595
+ color: fromString("rgb(35,139,69)")
596
+ },
597
+ {
598
+ offset: .9,
599
+ color: fromString("rgb(0,109,44)")
600
+ }
601
+ ]
602
+ },
603
+ {
604
+ id: 6,
605
+ name: "Greys",
606
+ palette: [{
607
+ offset: 0,
608
+ color: fromString("rgb(250,250,250)")
609
+ }, {
610
+ offset: 1,
611
+ color: fromString("rgb(5,5,5)")
612
+ }]
613
+ },
614
+ {
615
+ id: 7,
616
+ name: "OrRd",
617
+ palette: [
618
+ {
619
+ offset: .25,
620
+ color: fromString("rgb(253,204,138)")
621
+ },
622
+ {
623
+ offset: .5,
624
+ color: fromString("rgb(252,141,89)")
625
+ },
626
+ {
627
+ offset: .75,
628
+ color: fromString("rgb(227,74,51)")
629
+ }
630
+ ]
631
+ },
632
+ {
633
+ id: 8,
634
+ name: "Oranges",
635
+ palette: [
636
+ {
637
+ offset: .13,
638
+ color: fromString("rgb(254,230,206)")
639
+ },
640
+ {
641
+ offset: .26,
642
+ color: fromString("rgb(253,208,162)")
643
+ },
644
+ {
645
+ offset: .39,
646
+ color: fromString("rgb(253,174,107)")
647
+ },
648
+ {
649
+ offset: .52,
650
+ color: fromString("rgb(253,141,60)")
651
+ },
652
+ {
653
+ offset: .65,
654
+ color: fromString("rgb(241,105,19)")
655
+ },
656
+ {
657
+ offset: .78,
658
+ color: fromString("rgb(217,72,1)")
659
+ },
660
+ {
661
+ offset: .9,
662
+ color: fromString("rgb(166,54,3)")
663
+ }
664
+ ]
665
+ },
666
+ {
667
+ id: 9,
668
+ name: "PRGn",
669
+ palette: [
670
+ {
671
+ offset: .25,
672
+ color: fromString("rgb(194,165,207)")
673
+ },
674
+ {
675
+ offset: .5,
676
+ color: fromString("rgb(247,247,247)")
677
+ },
678
+ {
679
+ offset: .75,
680
+ color: fromString("rgb(166,219,160)")
681
+ }
682
+ ]
683
+ },
684
+ {
685
+ id: 10,
686
+ name: "PiYG",
687
+ palette: [
688
+ {
689
+ offset: .25,
690
+ color: fromString("rgb(241,182,218)")
691
+ },
692
+ {
693
+ offset: .5,
694
+ color: fromString("rgb(247,247,247)")
695
+ },
696
+ {
697
+ offset: .75,
698
+ color: fromString("rgb(184,225,134)")
699
+ }
700
+ ]
701
+ },
702
+ {
703
+ id: 11,
704
+ name: "PuBu",
705
+ palette: [
706
+ {
707
+ offset: .25,
708
+ color: fromString("rgb(189,201,225)")
709
+ },
710
+ {
711
+ offset: .5,
712
+ color: fromString("rgb(116,169,207)")
713
+ },
714
+ {
715
+ offset: .75,
716
+ color: fromString("rgb(43,140,190)")
717
+ }
718
+ ]
719
+ },
720
+ {
721
+ id: 12,
722
+ name: "PuBuGn",
723
+ palette: [
724
+ {
725
+ offset: .25,
726
+ color: fromString("rgb(189,201,225)")
727
+ },
728
+ {
729
+ offset: .5,
730
+ color: fromString("rgb(103,169,207)")
731
+ },
732
+ {
733
+ offset: .75,
734
+ color: fromString("rgb(28,144,153)")
735
+ }
736
+ ]
737
+ },
738
+ {
739
+ id: 13,
740
+ name: "PuOr",
741
+ palette: [
742
+ {
743
+ offset: .25,
744
+ color: fromString("rgb(230,97,1)")
745
+ },
746
+ {
747
+ offset: .5,
748
+ color: fromString("rgb(94,60,153)")
749
+ },
750
+ {
751
+ offset: .75,
752
+ color: fromString("rgb(178,171,210)")
753
+ }
754
+ ]
755
+ },
756
+ {
757
+ id: 14,
758
+ name: "PuRd",
759
+ palette: [
760
+ {
761
+ offset: .25,
762
+ color: fromString("rgb(215,181,216)")
763
+ },
764
+ {
765
+ offset: .5,
766
+ color: fromString("rgb(223,101,176)")
767
+ },
768
+ {
769
+ offset: .75,
770
+ color: fromString("rgb(221,28,119)")
771
+ }
772
+ ]
773
+ },
774
+ {
775
+ id: 15,
776
+ name: "Purples",
777
+ palette: [
778
+ {
779
+ offset: .13,
780
+ color: fromString("rgb(239,237,245)")
781
+ },
782
+ {
783
+ offset: .26,
784
+ color: fromString("rgb(218,218,235)")
785
+ },
786
+ {
787
+ offset: .39,
788
+ color: fromString("rgb(188,189,220)")
789
+ },
790
+ {
791
+ offset: .52,
792
+ color: fromString("rgb(158,154,200)")
793
+ },
794
+ {
795
+ offset: .65,
796
+ color: fromString("rgb(128,125,186)")
797
+ },
798
+ {
799
+ offset: .75,
800
+ color: fromString("rgb(106,81,163)")
801
+ },
802
+ {
803
+ offset: .9,
804
+ color: fromString("rgb(84,39,143)")
805
+ }
806
+ ]
807
+ },
808
+ {
809
+ id: 16,
810
+ name: "RdBu",
811
+ palette: [
812
+ {
813
+ offset: .25,
814
+ color: fromString("rgb(244,165,130)")
815
+ },
816
+ {
817
+ offset: .5,
818
+ color: fromString("rgb(247,247,247)")
819
+ },
820
+ {
821
+ offset: .75,
822
+ color: fromString("rgb(146,197,222)")
823
+ }
824
+ ]
825
+ },
826
+ {
827
+ id: 17,
828
+ name: "RdGy",
829
+ palette: [
830
+ {
831
+ offset: .25,
832
+ color: fromString("rgb(244,165,130)")
833
+ },
834
+ {
835
+ offset: .5,
836
+ color: fromString("rgb(255,255,255)")
837
+ },
838
+ {
839
+ offset: .75,
840
+ color: fromString("rgb(186,186,186)")
841
+ }
842
+ ]
843
+ },
844
+ {
845
+ id: 18,
846
+ name: "RdPu",
847
+ palette: [
848
+ {
849
+ offset: .25,
850
+ color: fromString("rgb(253,180,185)")
851
+ },
852
+ {
853
+ offset: .5,
854
+ color: fromString("rgb(247,104,161)")
855
+ },
856
+ {
857
+ offset: .75,
858
+ color: fromString("rgb(197,27,138)")
859
+ }
860
+ ]
861
+ },
862
+ {
863
+ id: 19,
864
+ name: "RdYlBu",
865
+ palette: [
866
+ {
867
+ offset: .25,
868
+ color: fromString("rgb(253,184,99)")
869
+ },
870
+ {
871
+ offset: .5,
872
+ color: fromString("rgb(255,255,191)")
873
+ },
874
+ {
875
+ offset: .75,
876
+ color: fromString("rgb(171,217,233)")
877
+ }
878
+ ]
879
+ },
880
+ {
881
+ id: 20,
882
+ name: "RdYlGn",
883
+ palette: [
884
+ {
885
+ offset: .25,
886
+ color: fromString("rgb(253,174,97)")
887
+ },
888
+ {
889
+ offset: .5,
890
+ color: fromString("rgb(255,255,192)")
891
+ },
892
+ {
893
+ offset: .75,
894
+ color: fromString("rgb(166,217,106)")
895
+ }
896
+ ]
897
+ },
898
+ {
899
+ id: 21,
900
+ name: "Reds",
901
+ palette: [
902
+ {
903
+ offset: .13,
904
+ color: fromString("rgb(254,224,210)")
905
+ },
906
+ {
907
+ offset: .26,
908
+ color: fromString("rgb(252,187,161)")
909
+ },
910
+ {
911
+ offset: .39,
912
+ color: fromString("rgb(252,146,114)")
913
+ },
914
+ {
915
+ offset: .52,
916
+ color: fromString("rgb(251,106,74)")
917
+ },
918
+ {
919
+ offset: .65,
920
+ color: fromString("rgb(239,59,44)")
921
+ },
922
+ {
923
+ offset: .78,
924
+ color: fromString("rgb(203,24,29)")
925
+ },
926
+ {
927
+ offset: .9,
928
+ color: fromString("rgb(165,15,21)")
929
+ }
930
+ ]
931
+ },
932
+ {
933
+ id: 22,
934
+ name: "Spectral",
935
+ palette: [
936
+ {
937
+ offset: .25,
938
+ color: fromString("rgb(253,174,97)")
939
+ },
940
+ {
941
+ offset: .5,
942
+ color: fromString("rgb(255,255,191)")
943
+ },
944
+ {
945
+ offset: .75,
946
+ color: fromString("rgb(171,221,164)")
947
+ }
948
+ ]
949
+ },
950
+ {
951
+ id: 23,
952
+ name: "YlGn",
953
+ palette: [
954
+ {
955
+ offset: .25,
956
+ color: fromString("rgb(194,230,153)")
957
+ },
958
+ {
959
+ offset: .5,
960
+ color: fromString("rgb(120,198,121)")
961
+ },
962
+ {
963
+ offset: .75,
964
+ color: fromString("rgb(49,163,84)")
965
+ }
966
+ ]
967
+ },
968
+ {
969
+ id: 24,
970
+ name: "YlGnBu",
971
+ palette: [
972
+ {
973
+ offset: .25,
974
+ color: fromString("rgb(161,218,180)")
975
+ },
976
+ {
977
+ offset: .5,
978
+ color: fromString("rgb(65,182,196)")
979
+ },
980
+ {
981
+ offset: .75,
982
+ color: fromString("rgb(44,127,184)")
983
+ }
984
+ ]
985
+ },
986
+ {
987
+ id: 25,
988
+ name: "YlOrBr",
989
+ palette: [
990
+ {
991
+ offset: .25,
992
+ color: fromString("rgb(254,217,142)")
993
+ },
994
+ {
995
+ offset: .5,
996
+ color: fromString("rgb(254,153,41)")
997
+ },
998
+ {
999
+ offset: .75,
1000
+ color: fromString("rgb(217,95,14)")
1001
+ }
1002
+ ]
1003
+ },
1004
+ {
1005
+ id: 26,
1006
+ name: "YlOrRd",
1007
+ palette: [
1008
+ {
1009
+ offset: .25,
1010
+ color: fromString("rgb(254,204,92)")
1011
+ },
1012
+ {
1013
+ offset: .5,
1014
+ color: fromString("rgb(253,141,60)")
1015
+ },
1016
+ {
1017
+ offset: .75,
1018
+ color: fromString("rgb(240,59,32)")
1019
+ }
1020
+ ]
1021
+ },
1022
+ {
1023
+ id: 27,
1024
+ name: "Semaphore",
1025
+ palette: [
1026
+ {
1027
+ offset: .1,
1028
+ color: fromString("rgb(215,48,39)")
1029
+ },
1030
+ {
1031
+ offset: .3,
1032
+ color: fromString("rgb(252,141,89)")
1033
+ },
1034
+ {
1035
+ offset: .5,
1036
+ color: fromString("rgb(218,225,12)")
1037
+ },
1038
+ {
1039
+ offset: .7,
1040
+ color: fromString("rgb(145,207,96)")
1041
+ },
1042
+ {
1043
+ offset: .9,
1044
+ color: fromString("rgb(26,152,80)")
1045
+ }
1046
+ ]
1047
+ }
1048
+ ];
1049
+ //#endregion
1050
+ //#region src/components/categorized.tsx
1051
+ var Categorized = (props) => {
1052
+ const { attr, layerCurrentRenderer, showPreDefinedRamps, predefinedStyles, moreRamps, applyRenderer, setVisible } = props;
1053
+ const { t } = useTranslation();
1054
+ const nullText = t("common.null");
1055
+ const errorRamps = t("errors.error_ramps_same_name");
1056
+ const predefinedStylesLabel = t("categorized.predefined_styles");
1057
+ const colorRampLabel = t("categorized.color_ramps");
1058
+ const strokeColorLabel = t("categorized.stroke_color");
1059
+ const strokeWidthLabel = t("categorized.stroke_width");
1060
+ const attributeLabel = t("categorized.attribute");
1061
+ const selectAttributeLabel = t("categorized.select_attribute");
1062
+ const updateColorsLabel = t("categorized.update_colors");
1063
+ const colorOpacityLabel = t("categorized.color_opacity");
1064
+ const selectSpectrumLabel = t("categorized.select_spectrum");
1065
+ const concludeLabel = t("common.conclude");
1066
+ const colorLabel = t("graduated.color");
1067
+ const customStyleLabel = t("categorized.custom_style");
1068
+ const valueLabel = t("graduated.value");
1069
+ const reverseColorsLabel = t("categorized.reverse_colors");
1070
+ const colorStyleLabel = t("categorized.color_style");
1071
+ const currentRender = layerCurrentRenderer.type != RenderType.Categorized ? [] : layerCurrentRenderer.rendererOL["fill-color"];
1072
+ const valuesAndColors = [];
1073
+ for (let i = 2; i < currentRender.length - 1; i += 2) valuesAndColors.push({
1074
+ value: currentRender[i],
1075
+ color: currentRender[i + 1],
1076
+ visible: true
1077
+ });
1078
+ if (currentRender.length > 0) valuesAndColors.push({
1079
+ value: nullText,
1080
+ color: currentRender[currentRender.length - 1],
1081
+ visible: true
1082
+ });
1083
+ const stroke = getRendererColorAndSizeStroke(layerCurrentRenderer);
1084
+ const [selectedSpectrumColors, setSelectedSpectrumColors] = useState({
1085
+ label: customStyleLabel,
1086
+ value: []
1087
+ });
1088
+ const [table, setTable] = useState(valuesAndColors);
1089
+ const [selectedAttr, setSelectedAttr] = useState(layerCurrentRenderer.field ? attr.find((at) => at.name == layerCurrentRenderer.field) : void 0);
1090
+ const [rowClick] = useState(false);
1091
+ const currentStyle = layerCurrentRenderer.type != RenderType.Categorized ? null : layerCurrentRenderer.rendererOL;
1092
+ const [borderColor, setBorderColor] = useState(currentStyle ? stroke.color : fromString("#000000"));
1093
+ const [borderThickness, setBorderThickness] = useState(currentStyle ? stroke.size : 1);
1094
+ const [fillOpacity, setFillOpacity] = useState(currentStyle ? getRendererOpacity(layerCurrentRenderer) : 100);
1095
+ const [isReversed, setIsReversed] = useState(false);
1096
+ let allRamps;
1097
+ if (showPreDefinedRamps) if (moreRamps) allRamps = moreRamps.concat(colorRamps);
1098
+ else allRamps = colorRamps;
1099
+ else if (moreRamps) allRamps = moreRamps;
1100
+ else allRamps = [];
1101
+ const existingRenderers = allRamps.filter((ramp, _index, self) => self.filter((r) => r.name === ramp.name).length > 1);
1102
+ if (existingRenderers.length > 0) {
1103
+ console.error(errorRamps + existingRenderers.map((ramp) => ramp.name));
1104
+ return;
1105
+ }
1106
+ const preDefinedPalettes = [
1107
+ {
1108
+ label: customStyleLabel,
1109
+ items: [{
1110
+ label: customStyleLabel,
1111
+ value: {
1112
+ label: customStyleLabel,
1113
+ value: []
1114
+ }
1115
+ }]
1116
+ },
1117
+ {
1118
+ label: predefinedStylesLabel,
1119
+ items: predefinedStyles.map((renderer) => {
1120
+ return {
1121
+ label: renderer.name,
1122
+ value: {
1123
+ label: renderer.name,
1124
+ value: renderer.renderer
1125
+ }
1126
+ };
1127
+ })
1128
+ },
1129
+ {
1130
+ label: colorRampLabel,
1131
+ items: allRamps.map((ramp) => {
1132
+ return {
1133
+ label: ramp.name,
1134
+ value: {
1135
+ label: ramp.name,
1136
+ value: ramp.palette
1137
+ }
1138
+ };
1139
+ })
1140
+ }
1141
+ ];
1142
+ const itemTemplate = (option) => {
1143
+ if (option.value.value.length > 0 && "offset" in option.value.value[0]) return /* @__PURE__ */ jsxs("div", {
1144
+ style: {
1145
+ display: "flex",
1146
+ gap: "3px",
1147
+ alignItems: "center"
1148
+ },
1149
+ children: [/* @__PURE__ */ jsx("div", { style: {
1150
+ background: getColorRampString(option.value.value),
1151
+ width: "90px",
1152
+ height: "20px"
1153
+ } }), /* @__PURE__ */ jsx("span", { children: option.label })]
1154
+ });
1155
+ return /* @__PURE__ */ jsx("span", { children: option.label });
1156
+ };
1157
+ const visibleColumnTemplate = (tr) => {
1158
+ return /* @__PURE__ */ jsx(Checkbox, { checked: tr.visible });
1159
+ };
1160
+ const updateColorPicker = (newColor, tableRow) => {
1161
+ const tableUpdated = [];
1162
+ table.forEach(({ value, visible, color }) => {
1163
+ if (value === tableRow.value) tableUpdated.push({
1164
+ value,
1165
+ visible,
1166
+ color: newColor
1167
+ });
1168
+ else tableUpdated.push({
1169
+ value,
1170
+ visible,
1171
+ color
1172
+ });
1173
+ });
1174
+ setTable(tableUpdated);
1175
+ };
1176
+ const colorColumnTemplate = (tr) => {
1177
+ return /* @__PURE__ */ jsx("div", {
1178
+ hidden: !tr.visible,
1179
+ children: /* @__PURE__ */ jsx(MyColorPicker, {
1180
+ onChange: (e) => updateColorPicker(fromString(e), tr),
1181
+ color: tr.color
1182
+ })
1183
+ });
1184
+ };
1185
+ function updateColorsByColorRamp(colorRampInput, reversed) {
1186
+ const colorRamp = {
1187
+ label: colorRampInput.label,
1188
+ value: [...colorRampInput.value]
1189
+ };
1190
+ if (reversed) colorRamp.value.reverse();
1191
+ if (colorRamp.value.length > 0 && "offset" in colorRamp.value[0]) {
1192
+ const colors = generateGradient(colorRamp.value.map((stop) => ({
1193
+ offset: stop.offset,
1194
+ color: stop.color
1195
+ })), table.filter((row) => row.visible).length);
1196
+ const tableUpdated = [];
1197
+ let i = 0;
1198
+ table.forEach(({ value, visible }) => {
1199
+ if (visible) tableUpdated.push({
1200
+ value,
1201
+ visible,
1202
+ color: fromString(colors[i++])
1203
+ });
1204
+ else tableUpdated.push({
1205
+ value,
1206
+ visible,
1207
+ color: fromString("white")
1208
+ });
1209
+ });
1210
+ setTable(tableUpdated);
1211
+ } else if (colorRamp.value.length > 0) {
1212
+ const colors = getStyleColorsAndValues(getCategorizedStyle(selectedAttr?.name, colorRamp.value), RenderType.Categorized);
1213
+ const tableUpdated = [];
1214
+ table.forEach(({ value, visible }) => {
1215
+ const color = colors.find((c) => c.value == value);
1216
+ if (color) tableUpdated.push({
1217
+ value,
1218
+ visible,
1219
+ color: color.color
1220
+ });
1221
+ else tableUpdated.push({
1222
+ value,
1223
+ visible,
1224
+ color: fromString("white")
1225
+ });
1226
+ });
1227
+ setTable(tableUpdated);
1228
+ } else {
1229
+ const tableUpdated = [];
1230
+ table.forEach(({ value, visible }) => {
1231
+ tableUpdated.push({
1232
+ value,
1233
+ visible,
1234
+ color: generateRandomColor()
1235
+ });
1236
+ });
1237
+ setTable(tableUpdated);
1238
+ }
1239
+ }
1240
+ function revertColors() {
1241
+ setIsReversed(!isReversed);
1242
+ updateColorsByColorRamp(selectedSpectrumColors, !isReversed);
1243
+ }
1244
+ function changeColorsOfValues(e) {
1245
+ const colorRamp = e;
1246
+ setIsReversed(false);
1247
+ setSelectedSpectrumColors(colorRamp);
1248
+ updateColorsByColorRamp(colorRamp, false);
1249
+ }
1250
+ function changeAttribute(e) {
1251
+ let attribute = attr.find((a) => a.name == e.value.name);
1252
+ setSelectedAttr(attribute);
1253
+ setSelectedSpectrumColors({
1254
+ label: customStyleLabel,
1255
+ value: []
1256
+ });
1257
+ let tableValues = [];
1258
+ attribute.values.forEach((value) => {
1259
+ if (value && value != "") tableValues.push({
1260
+ visible: true,
1261
+ value,
1262
+ color: generateRandomColor()
1263
+ });
1264
+ });
1265
+ tableValues.push({
1266
+ value: nullText,
1267
+ color: generateRandomColor(),
1268
+ visible: true
1269
+ });
1270
+ setTable(tableValues);
1271
+ }
1272
+ const changeVisibility = (trs) => {
1273
+ let tableValues = [];
1274
+ table.forEach((tr) => {
1275
+ let found = trs.some((trs) => trs === tr);
1276
+ tableValues.push({
1277
+ value: tr.value,
1278
+ visible: found,
1279
+ color: found ? tr.color : [
1280
+ 0,
1281
+ 0,
1282
+ 0,
1283
+ 0
1284
+ ]
1285
+ });
1286
+ });
1287
+ setTable(tableValues);
1288
+ };
1289
+ return /* @__PURE__ */ jsxs("div", {
1290
+ className: "categorized-container",
1291
+ children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
1292
+ className: "attribute-container",
1293
+ children: [/* @__PURE__ */ jsx("span", {
1294
+ style: { width: "auto" },
1295
+ children: /* @__PURE__ */ jsxs("b", { children: [attributeLabel, ":"] })
1296
+ }), /* @__PURE__ */ jsx(Dropdown, {
1297
+ value: selectedAttr,
1298
+ onChange: (e) => changeAttribute(e),
1299
+ options: attr,
1300
+ optionLabel: "name",
1301
+ itemTemplate: (option) => /* @__PURE__ */ jsxs("span", { children: [
1302
+ option.name,
1303
+ " (",
1304
+ option.values.length,
1305
+ ")"
1306
+ ] }),
1307
+ placeholder: selectAttributeLabel
1308
+ })]
1309
+ }), table.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
1310
+ /* @__PURE__ */ jsxs("div", {
1311
+ className: "stroke-row",
1312
+ children: [/* @__PURE__ */ jsxs("div", {
1313
+ className: "stroke-color-container",
1314
+ children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [strokeColorLabel, ":"] }) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MyColorPicker, {
1315
+ color: (() => {
1316
+ if (borderColor.at(3) < 1) return [
1317
+ borderColor[0],
1318
+ borderColor[1],
1319
+ borderColor[2],
1320
+ 1
1321
+ ];
1322
+ return borderColor;
1323
+ })(),
1324
+ hideAlpha: true,
1325
+ onChange: (e) => setBorderColor(fromString(e))
1326
+ }) })]
1327
+ }), /* @__PURE__ */ jsxs("div", {
1328
+ className: "stroke-width-container",
1329
+ children: [
1330
+ /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [strokeWidthLabel, ":"] }) }),
1331
+ /* @__PURE__ */ jsx(Slider, {
1332
+ max: 10,
1333
+ min: 0,
1334
+ className: "stroke-slider",
1335
+ value: borderThickness,
1336
+ onChange: (e) => setBorderThickness(e.value)
1337
+ }),
1338
+ /* @__PURE__ */ jsxs("span", { children: [borderThickness, " px"] })
1339
+ ]
1340
+ })]
1341
+ }),
1342
+ /* @__PURE__ */ jsxs("div", {
1343
+ className: "opacity-container",
1344
+ children: [
1345
+ /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [colorOpacityLabel, ":"] }) }),
1346
+ /* @__PURE__ */ jsx(Slider, {
1347
+ max: 100,
1348
+ min: 0,
1349
+ className: "opacity-slider",
1350
+ value: fillOpacity,
1351
+ onChange: (e) => {
1352
+ setFillOpacity(e.value);
1353
+ setTable([...table].map((tr) => {
1354
+ let aux2 = [];
1355
+ aux2.push(tr.color[0]);
1356
+ aux2.push(tr.color[1]);
1357
+ aux2.push(tr.color[2]);
1358
+ aux2.push(e.value / 100);
1359
+ return {
1360
+ ...tr,
1361
+ color: aux2
1362
+ };
1363
+ }));
1364
+ }
1365
+ }),
1366
+ /* @__PURE__ */ jsxs("span", { children: [fillOpacity, "%"] })
1367
+ ]
1368
+ }),
1369
+ /* @__PURE__ */ jsxs("div", {
1370
+ className: "spectrum-container",
1371
+ children: [
1372
+ /* @__PURE__ */ jsx("span", {
1373
+ style: { width: "auto" },
1374
+ children: /* @__PURE__ */ jsxs("b", { children: [colorStyleLabel, ":"] })
1375
+ }),
1376
+ /* @__PURE__ */ jsx(Dropdown, {
1377
+ value: selectedSpectrumColors,
1378
+ options: preDefinedPalettes,
1379
+ onChange: (e) => changeColorsOfValues(e.value),
1380
+ placeholder: selectSpectrumLabel,
1381
+ optionLabel: "label",
1382
+ optionGroupLabel: "label",
1383
+ itemTemplate
1384
+ }),
1385
+ /* @__PURE__ */ jsx(Button, {
1386
+ text: true,
1387
+ icon: "pi pi-refresh",
1388
+ disabled: !selectedSpectrumColors,
1389
+ tooltip: updateColorsLabel,
1390
+ onClick: () => updateColorsByColorRamp(selectedSpectrumColors, isReversed)
1391
+ }),
1392
+ /* @__PURE__ */ jsx(Button, {
1393
+ text: true,
1394
+ icon: "pi pi-arrow-right-arrow-left",
1395
+ disabled: !selectedSpectrumColors,
1396
+ tooltip: reverseColorsLabel,
1397
+ onClick: () => revertColors()
1398
+ })
1399
+ ]
1400
+ }),
1401
+ /* @__PURE__ */ jsx("div", {
1402
+ className: "table-container",
1403
+ children: /* @__PURE__ */ jsxs(DataTable, {
1404
+ value: table,
1405
+ selectionMode: rowClick ? null : "checkbox",
1406
+ tableStyle: { minWidth: "25rem" },
1407
+ selection: table.filter((tr) => tr.visible),
1408
+ onSelectionChange: (event) => {
1409
+ const value = event.value;
1410
+ changeVisibility(value);
1411
+ },
1412
+ reorderableRows: true,
1413
+ onRowReorder: (e) => setTable(e.value),
1414
+ children: [
1415
+ /* @__PURE__ */ jsx(Column, {
1416
+ rowReorder: true,
1417
+ style: { width: "3rem" }
1418
+ }),
1419
+ /* @__PURE__ */ jsx(Column, {
1420
+ selectionMode: "multiple",
1421
+ field: "visible",
1422
+ body: visibleColumnTemplate
1423
+ }),
1424
+ /* @__PURE__ */ jsx(Column, {
1425
+ field: "color",
1426
+ header: colorLabel,
1427
+ body: colorColumnTemplate
1428
+ }),
1429
+ /* @__PURE__ */ jsx(Column, {
1430
+ field: "value",
1431
+ header: valueLabel,
1432
+ sortable: true
1433
+ })
1434
+ ]
1435
+ })
1436
+ })
1437
+ ] })] }), /* @__PURE__ */ jsx("div", {
1438
+ className: "footer-container",
1439
+ children: /* @__PURE__ */ jsx(Button, {
1440
+ label: concludeLabel,
1441
+ onClick: () => {
1442
+ applyRenderer({
1443
+ type: RenderType.Categorized,
1444
+ field: selectedAttr?.name,
1445
+ rendererOL: getCategorizedStyle(selectedAttr?.name, table.filter((row) => row.value != nullText && row.visible).map((tr) => ({
1446
+ value: tr.value,
1447
+ color: tr.color
1448
+ })), borderColor, borderThickness, table.find((row) => row.value == nullText).color)
1449
+ });
1450
+ setVisible(false);
1451
+ }
1452
+ })
1453
+ })]
1454
+ });
1455
+ };
1456
+ //#endregion
1457
+ //#region src/components/graduated.tsx
1458
+ var Graduated = (props) => {
1459
+ const { attr, applyRenderer, setVisible, layerCurrentRenderer, moreRamps, showPreDefinedRamps, numbersLocale } = props;
1460
+ const { t } = useTranslation();
1461
+ const errorRamps = t("errors.error_ramps_same_name");
1462
+ const colorRampLabel = t("categorized.color_ramps");
1463
+ const errorDiffLabel = t("errors.error_diff");
1464
+ const errorSumLabel = t("errors.error_sum");
1465
+ const errorSum2Label = t("errors.error_sum2");
1466
+ const amountValuesLabel = t("graduated.amount_values");
1467
+ const valuesLabel = t("graduated.values");
1468
+ const amountLabel = t("graduated.amount");
1469
+ const attributeLabel = t("categorized.attribute");
1470
+ const selectAttributeLabel = t("categorized.select_attribute");
1471
+ const selectModeLabel = t("graduated.select_mode");
1472
+ const whichModeLabel = t("graduated.which_mode");
1473
+ const intervalSizeLabel = t("graduated.interval_size");
1474
+ const classesNumberLabel = t("graduated.classes_number");
1475
+ const colorsSpectrumLabel = t("categorized.colors_spectrum");
1476
+ const selectSpectrumLabel = t("categorized.select_spectrum");
1477
+ const invertColorsLabel = t("graduated.invert_colors");
1478
+ const gradientIntervalsLabel = t("graduated.gradient_intervals");
1479
+ const valueLabel = t("graduated.value");
1480
+ const strokeColorLabel = t("categorized.stroke_color");
1481
+ const strokeWidthLabel = t("categorized.stroke_width");
1482
+ const colorOpacityLabel = t("categorized.color_opacity");
1483
+ const concludeLabel = t("common.conclude");
1484
+ const previewLabel = t("graduated.preview");
1485
+ const errorValuesLabel = t("errors.error_values");
1486
+ const minValueLabel = t("graduated.min_value");
1487
+ const maxValueLabel = t("graduated.max_value");
1488
+ const colorLabel = t("graduated.color");
1489
+ const modeLabel = t("graduated.mode");
1490
+ const locale = numbersLocale;
1491
+ const toast = useRef(null);
1492
+ const showToast = (message, severity) => {
1493
+ toast.current?.show({
1494
+ severity,
1495
+ summary: "Error",
1496
+ detail: message
1497
+ });
1498
+ };
1499
+ const currentRender = layerCurrentRenderer.type != RenderType.Graduated ? [] : layerCurrentRenderer.rendererOL["fill-color"];
1500
+ const valuesAndColors = [];
1501
+ for (let i = 3; i < currentRender.length - 1; i += 2) valuesAndColors.push({
1502
+ value: currentRender[i],
1503
+ color: currentRender[i + 1]
1504
+ });
1505
+ const currentStyle = layerCurrentRenderer.type != RenderType.Graduated ? null : layerCurrentRenderer.rendererOL;
1506
+ const stroke = getRendererColorAndSizeStroke(layerCurrentRenderer);
1507
+ const [opacity, setOpacity] = useState(currentStyle ? getRendererOpacity(layerCurrentRenderer) : 100);
1508
+ const [stops, setStops] = useState(valuesAndColors);
1509
+ const [selectedAttr, setSelectedAttr] = useState(layerCurrentRenderer.field ? attr.find((at) => at.name == layerCurrentRenderer.field) : void 0);
1510
+ const [selectedMode, setSelectedMode] = useState(layerCurrentRenderer.type == RenderType.Graduated ? layerCurrentRenderer.graduatedType : void 0);
1511
+ const [intervals, setIntervals] = useState([]);
1512
+ const [classNo, setClassNo] = useState(layerCurrentRenderer.type == RenderType.Graduated ? valuesAndColors.length - 1 : 5);
1513
+ const [intervalSize, setIntervalSize] = useState(0);
1514
+ const [selectedSpectrumColors, setSelectedSpectrumColors] = useState();
1515
+ const [borderColor, setBorderColor] = useState(currentStyle ? stroke.color : fromString("#000000"));
1516
+ const [borderThickness, setBorderThickness] = useState(currentStyle ? stroke.size : 1);
1517
+ const [chartData, setChartData] = useState({});
1518
+ const [chartOptions, setChartOptions] = useState({});
1519
+ let allRamps;
1520
+ if (showPreDefinedRamps) if (moreRamps) allRamps = moreRamps.concat(colorRamps);
1521
+ else allRamps = colorRamps;
1522
+ else if (moreRamps) allRamps = moreRamps;
1523
+ else allRamps = [];
1524
+ const existingRenderers = allRamps.filter((ramp, _index, self) => self.filter((r) => r.name === ramp.name).length > 1);
1525
+ if (existingRenderers.length > 0) {
1526
+ console.error(errorRamps + existingRenderers.map((ramp) => ramp.name));
1527
+ return;
1528
+ }
1529
+ const preDefinedPalettes = [{
1530
+ label: colorRampLabel,
1531
+ items: allRamps.map((ramp) => {
1532
+ return {
1533
+ label: ramp.name,
1534
+ value: {
1535
+ label: ramp.name,
1536
+ value: ramp.palette
1537
+ }
1538
+ };
1539
+ })
1540
+ }];
1541
+ const itemTemplate = (option) => {
1542
+ if (option.value.value.length > 0 && "offset" in option.value.value[0]) return /* @__PURE__ */ jsxs("div", {
1543
+ style: {
1544
+ display: "flex",
1545
+ gap: "3px",
1546
+ alignItems: "center"
1547
+ },
1548
+ children: [/* @__PURE__ */ jsx("div", { style: {
1549
+ background: getColorRampString(option.value.value),
1550
+ width: "90px",
1551
+ height: "20px"
1552
+ } }), /* @__PURE__ */ jsx("span", { children: option.label })]
1553
+ });
1554
+ return /* @__PURE__ */ jsx("span", { children: option.label });
1555
+ };
1556
+ function applyRampToStops(ramp, invert) {
1557
+ const aux = [...stops];
1558
+ if (invert) {
1559
+ const inverse = aux.map((s) => s.color).reverse();
1560
+ setStops(aux.map((tr, index) => {
1561
+ const aux2 = [];
1562
+ const color = inverse[index];
1563
+ aux2.push(color[0]);
1564
+ aux2.push(color[1]);
1565
+ aux2.push(color[2]);
1566
+ aux2.push(opacity / 100);
1567
+ return {
1568
+ ...tr,
1569
+ color: aux2
1570
+ };
1571
+ }));
1572
+ return;
1573
+ }
1574
+ const colors = generateGradient(ramp.value, aux.length);
1575
+ setStops(aux.map((tr, index) => {
1576
+ const aux2 = [];
1577
+ const color = fromString(colors[index]);
1578
+ aux2.push(color[0]);
1579
+ aux2.push(color[1]);
1580
+ aux2.push(color[2]);
1581
+ aux2.push(opacity / 100);
1582
+ return {
1583
+ ...tr,
1584
+ color: aux2
1585
+ };
1586
+ }));
1587
+ }
1588
+ function countNumbers(list) {
1589
+ const counting = {};
1590
+ list.filter((n) => n != null).forEach((num) => {
1591
+ const rounded = Math.round(num);
1592
+ counting[rounded] = (counting[rounded] || 0) + 1;
1593
+ });
1594
+ const maxNumber = Math.round(Math.max(...list));
1595
+ const minNumber = Math.round(Math.min(...list));
1596
+ if (maxNumber - minNumber <= 0) showToast(errorDiffLabel + (maxNumber - minNumber), "error");
1597
+ const result = new Array(maxNumber - minNumber).fill(0);
1598
+ Object.entries(counting).forEach(([n, times]) => {
1599
+ result[Number(n) - minNumber] = times;
1600
+ });
1601
+ let intervals = result.map((value, index) => {
1602
+ return {
1603
+ min: index + minNumber,
1604
+ max: index + minNumber + 1,
1605
+ count: value
1606
+ };
1607
+ });
1608
+ if (list.length != intervals.reduce((acc, curr) => acc + curr.count, 0)) showToast(errorSumLabel, "error");
1609
+ const reduceFactor = 2;
1610
+ while (intervals.length > 100) {
1611
+ const newIntervals = [];
1612
+ for (let i = 0; i <= intervals.length - reduceFactor; i += reduceFactor) {
1613
+ const min = intervals[i].min;
1614
+ let max;
1615
+ const isLast = i == intervals.length - reduceFactor || i + reduceFactor > intervals.length - reduceFactor;
1616
+ if (isLast) max = intervals[intervals.length - 1].max;
1617
+ else max = intervals[i + reduceFactor].min;
1618
+ const count = intervals.slice(i, isLast ? intervals.length : i + reduceFactor).reduce((acc, curr) => acc + curr.count, 0);
1619
+ newIntervals.push({
1620
+ min,
1621
+ max,
1622
+ count
1623
+ });
1624
+ }
1625
+ intervals = newIntervals;
1626
+ }
1627
+ const lastInterval = intervals[intervals.length - 1];
1628
+ intervals.push({
1629
+ min: lastInterval.max,
1630
+ max: lastInterval.max + (lastInterval.max - lastInterval.min),
1631
+ count: 0
1632
+ });
1633
+ const total = intervals.reduce((acc, curr) => acc + curr.count, 0);
1634
+ if (list.length != total) showToast(errorSum2Label + (list.length - total), "error");
1635
+ intervals = intervals.map((i) => {
1636
+ return {
1637
+ min: i.min,
1638
+ max: i.max,
1639
+ count: i.count * 100 / list.length
1640
+ };
1641
+ });
1642
+ return intervals;
1643
+ }
1644
+ async function calculateStopsByMode(mode, nClasses, intervalSize) {
1645
+ let stops = [];
1646
+ let values = selectedAttr?.values.map(Number) || [];
1647
+ values = values.filter((v) => !isNaN(v) && v != null);
1648
+ const min = Math.min(...values);
1649
+ const max = Math.max(...values);
1650
+ const range = max - min;
1651
+ switch (mode) {
1652
+ case GraduatedModes.EqualInterval:
1653
+ case GraduatedModes.Manual: {
1654
+ const interval2 = range / nClasses;
1655
+ for (let i = 0; i < nClasses; i++) stops.push({
1656
+ value: min + interval2 * i,
1657
+ color: fromString("rgb(0,0,0)")
1658
+ });
1659
+ stops.push({
1660
+ value: max,
1661
+ color: fromString("rgb(0,0,0)")
1662
+ });
1663
+ break;
1664
+ }
1665
+ case GraduatedModes.DefinedInterval: {
1666
+ const interval = range / intervalSize;
1667
+ console.log("interval", interval, intervalSize);
1668
+ for (let i = 0; i <= interval; i++) stops.push({
1669
+ value: min + intervalSize * i,
1670
+ color: fromString("rgb(0,0,0)")
1671
+ });
1672
+ break;
1673
+ }
1674
+ case GraduatedModes.NaturalBreaks:
1675
+ stops = (await jenksBuckets(values, nClasses)).map((value) => {
1676
+ return {
1677
+ value,
1678
+ color: fromString("rgb(0,0,0)")
1679
+ };
1680
+ });
1681
+ break;
1682
+ case GraduatedModes.Quantile:
1683
+ stops = (await quantileBuckets(values, nClasses)).map((value) => {
1684
+ return {
1685
+ value,
1686
+ color: fromString("rgb(0,0,0)")
1687
+ };
1688
+ });
1689
+ break;
1690
+ case GraduatedModes.StandardDeviation:
1691
+ stops = (await standardDeviationBuckets(values, nClasses)).map((value) => {
1692
+ return {
1693
+ value,
1694
+ color: fromString("rgb(0,0,0)")
1695
+ };
1696
+ });
1697
+ break;
1698
+ default: break;
1699
+ }
1700
+ setIntervals(countNumbers(values || []));
1701
+ return stops;
1702
+ }
1703
+ useEffect(() => {
1704
+ if (stops.length > 0) {
1705
+ let values = selectedAttr?.values.map(Number) || [];
1706
+ values = values.filter((v) => !isNaN(v) && v != null);
1707
+ setIntervals(countNumbers(values || []));
1708
+ }
1709
+ }, []);
1710
+ useEffect(() => {
1711
+ if (intervals && intervals.length > 0) {
1712
+ setChartData({
1713
+ labels: intervals.map((i) => i.min.toString()),
1714
+ datasets: [{
1715
+ label: amountValuesLabel,
1716
+ data: intervals.map((i) => i.count),
1717
+ backgroundColor: "rgb(54, 162, 235)",
1718
+ borderWidth: 2,
1719
+ borderColor: "rgb(54, 162, 235)"
1720
+ }]
1721
+ });
1722
+ setChartOptions({
1723
+ responsive: true,
1724
+ scales: {
1725
+ x: {
1726
+ title: {
1727
+ display: true,
1728
+ text: valuesLabel
1729
+ },
1730
+ ticks: {
1731
+ autoSkip: false,
1732
+ color: function(val) {
1733
+ return val.index % 2 === 0 ? "#000" : "rgba(255,255,255,0)";
1734
+ }
1735
+ },
1736
+ grid: {
1737
+ display: true,
1738
+ drawTicks: true,
1739
+ color: function(context) {
1740
+ if (context.tick) {
1741
+ const value = Number.parseInt(context.tick.label);
1742
+ return stops.map((stop) => intervals.find((i) => i.min <= stop.value && stop.value < i.max)).find((i) => i?.min <= value && value < i.max) ? "#ea1010" : "rgba(0,0,0,0)";
1743
+ } else return "rgba(0,0,0,0)";
1744
+ },
1745
+ drawBorder: false
1746
+ }
1747
+ },
1748
+ y: { title: {
1749
+ display: true,
1750
+ text: amountLabel
1751
+ } }
1752
+ }
1753
+ });
1754
+ }
1755
+ }, [intervals, stops.map((s) => s.value).join(", ")]);
1756
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
1757
+ className: "flex-column",
1758
+ children: [
1759
+ /* @__PURE__ */ jsxs("div", {
1760
+ className: "flex-row",
1761
+ children: [/* @__PURE__ */ jsxs("div", {
1762
+ className: "flex-row-small-gap",
1763
+ children: [/* @__PURE__ */ jsx("span", {
1764
+ className: "auto-width-span",
1765
+ children: /* @__PURE__ */ jsxs("b", { children: [attributeLabel, ":"] })
1766
+ }), /* @__PURE__ */ jsx(Dropdown, {
1767
+ value: selectedAttr,
1768
+ onChange: (e) => {
1769
+ setStops([]);
1770
+ setSelectedAttr(e.value);
1771
+ setSelectedMode(void 0);
1772
+ setSelectedSpectrumColors(void 0);
1773
+ },
1774
+ options: attr.filter((a) => a.type === AttributeTypeEnum.INTEGER || a.type === AttributeTypeEnum.FLOAT),
1775
+ optionLabel: "name",
1776
+ placeholder: selectAttributeLabel
1777
+ })]
1778
+ }), /* @__PURE__ */ jsxs("div", {
1779
+ className: "flex-row-small-gap",
1780
+ children: [
1781
+ /* @__PURE__ */ jsx("span", {
1782
+ className: "auto-width-span",
1783
+ children: /* @__PURE__ */ jsxs("b", { children: [modeLabel, ":"] })
1784
+ }),
1785
+ /* @__PURE__ */ jsx(Dropdown, {
1786
+ disabled: !selectedAttr,
1787
+ value: selectedMode,
1788
+ onChange: async (e) => {
1789
+ let iSize = Math.round(Math.max(...selectedAttr.values.map(Number).filter((v) => v != null && !isNaN(v))) / 10);
1790
+ if (iSize == 0) iSize = 1;
1791
+ setIntervalSize(iSize);
1792
+ const classNumber = selectedAttr.values.length > 5 ? 5 : selectedAttr.values.length - 1;
1793
+ setClassNo(classNumber);
1794
+ setStops(await calculateStopsByMode(e.value, classNumber, iSize));
1795
+ setSelectedMode(e.value);
1796
+ setSelectedSpectrumColors(void 0);
1797
+ },
1798
+ options: Object.values(GraduatedModes).filter((m) => m != GraduatedModes.GeometricInterval),
1799
+ itemTemplate: (option) => {
1800
+ return t(`graduate_modes.${option}`);
1801
+ },
1802
+ valueTemplate: (option) => {
1803
+ if (option) return t(`graduate_modes.${option}`);
1804
+ else return selectModeLabel;
1805
+ },
1806
+ placeholder: selectModeLabel
1807
+ }),
1808
+ /* @__PURE__ */ jsx("a", {
1809
+ href: "https://resources.arcgis.com/en/help/main/10.2/index.html#//00s50000001r000000",
1810
+ target: "_blank",
1811
+ children: whichModeLabel
1812
+ })
1813
+ ]
1814
+ })]
1815
+ }),
1816
+ selectedMode && /* @__PURE__ */ jsxs("div", { children: [
1817
+ /* @__PURE__ */ jsxs("div", {
1818
+ className: "flex-row-small-gap",
1819
+ children: [selectedAttr && /* @__PURE__ */ jsxs("span", { children: [
1820
+ /* @__PURE__ */ jsxs("b", { children: [minValueLabel, ":"] }),
1821
+ " ",
1822
+ Math.min(...selectedAttr.values.map(Number).filter((v) => !isNaN(v) && v != null)).toLocaleString(locale)
1823
+ ] }), selectedAttr && /* @__PURE__ */ jsxs("span", { children: [
1824
+ /* @__PURE__ */ jsxs("b", { children: [maxValueLabel, ":"] }),
1825
+ " ",
1826
+ Math.max(...selectedAttr.values.map(Number).filter((v) => !isNaN(v) && v != null)).toLocaleString(locale)
1827
+ ] })]
1828
+ }),
1829
+ (selectedMode == GraduatedModes.Manual || selectedMode == GraduatedModes.EqualInterval || selectedMode == GraduatedModes.Quantile || selectedMode == GraduatedModes.NaturalBreaks || selectedMode == GraduatedModes.GeometricInterval) && /* @__PURE__ */ jsxs("div", {
1830
+ className: "flex-row-gap-15",
1831
+ children: [/* @__PURE__ */ jsx("span", {
1832
+ className: "auto-width-span",
1833
+ children: /* @__PURE__ */ jsxs("b", { children: [classesNumberLabel, ":"] })
1834
+ }), /* @__PURE__ */ jsx(InputNumber, {
1835
+ value: classNo,
1836
+ locale,
1837
+ onChange: async (e) => {
1838
+ setClassNo(e.value);
1839
+ setSelectedSpectrumColors(void 0);
1840
+ setStops(await calculateStopsByMode(selectedMode, e.value, intervalSize));
1841
+ }
1842
+ })]
1843
+ }),
1844
+ (selectedMode == GraduatedModes.DefinedInterval || selectedMode == GraduatedModes.StandardDeviation) && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("span", {
1845
+ className: "auto-width-span",
1846
+ children: [intervalSizeLabel, ":"]
1847
+ }), /* @__PURE__ */ jsx(InputNumber, {
1848
+ value: intervalSize,
1849
+ locale,
1850
+ onChange: async (e) => {
1851
+ setIntervalSize(e.value);
1852
+ setSelectedSpectrumColors(void 0);
1853
+ setStops(await calculateStopsByMode(selectedMode, classNo, e.value));
1854
+ }
1855
+ })] })
1856
+ ] }),
1857
+ selectedMode && selectedAttr && /* @__PURE__ */ jsx(Chart, {
1858
+ className: "chart-wrapper",
1859
+ type: "bar",
1860
+ data: chartData,
1861
+ options: chartOptions
1862
+ }),
1863
+ stops.length > 0 && selectedMode && /* @__PURE__ */ jsxs("div", {
1864
+ className: "flex-column-gap-15px",
1865
+ children: [/* @__PURE__ */ jsxs("div", {
1866
+ className: "flex-row-gap-50px",
1867
+ children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
1868
+ className: "flex-row-center",
1869
+ children: [
1870
+ /* @__PURE__ */ jsx("span", {
1871
+ className: "auto-width-span",
1872
+ children: /* @__PURE__ */ jsxs("b", { children: [colorsSpectrumLabel, ":"] })
1873
+ }),
1874
+ /* @__PURE__ */ jsx(Dropdown, {
1875
+ value: selectedSpectrumColors,
1876
+ options: preDefinedPalettes,
1877
+ onChange: (e) => {
1878
+ setSelectedSpectrumColors(e.value);
1879
+ applyRampToStops(e.value);
1880
+ },
1881
+ placeholder: selectSpectrumLabel,
1882
+ optionLabel: "label",
1883
+ optionGroupLabel: "label",
1884
+ itemTemplate
1885
+ }),
1886
+ /* @__PURE__ */ jsx(Button, {
1887
+ text: true,
1888
+ icon: "pi pi-arrow-right-arrow-left",
1889
+ tooltip: invertColorsLabel,
1890
+ disabled: !selectedSpectrumColors,
1891
+ onClick: () => applyRampToStops(selectedSpectrumColors, true)
1892
+ })
1893
+ ]
1894
+ }), /* @__PURE__ */ jsxs("div", {
1895
+ className: "flex-column-small-gap",
1896
+ children: [
1897
+ /* @__PURE__ */ jsx("span", {
1898
+ className: "auto-width-span",
1899
+ children: /* @__PURE__ */ jsxs("b", { children: [gradientIntervalsLabel, ":"] })
1900
+ }),
1901
+ /* @__PURE__ */ jsxs("div", {
1902
+ className: "flex-row-small-gap",
1903
+ children: [/* @__PURE__ */ jsxs("span", {
1904
+ className: "auto-width-span",
1905
+ children: [valueLabel, "             "]
1906
+ }), /* @__PURE__ */ jsx("span", {
1907
+ className: "auto-width-span",
1908
+ children: colorLabel
1909
+ })]
1910
+ }),
1911
+ stops.map((value, index) => {
1912
+ return /* @__PURE__ */ jsxs("div", {
1913
+ className: "flex-row-small-small-gap",
1914
+ children: [/* @__PURE__ */ jsx(InputNumber, {
1915
+ placeholder: valueLabel,
1916
+ allowEmpty: false,
1917
+ locale,
1918
+ min: stops[0].value,
1919
+ max: index < stops.length - 1 ? stops[index + 1]?.value - .001 : stops[stops.length]?.value,
1920
+ disabled: index === 0 || selectedMode != GraduatedModes.Manual || index === stops.length - 1,
1921
+ onChange: (e) => {
1922
+ const aux = [...stops];
1923
+ aux[index].value = e.value;
1924
+ setStops(aux);
1925
+ },
1926
+ value: value.value
1927
+ }), /* @__PURE__ */ jsx(MyColorPicker, {
1928
+ color: value.color,
1929
+ onChange: (e) => {
1930
+ const aux = [...stops];
1931
+ aux[index].color = fromString(e);
1932
+ setStops(aux);
1933
+ }
1934
+ })]
1935
+ }, index);
1936
+ })
1937
+ ]
1938
+ })] }), /* @__PURE__ */ jsx("div", {
1939
+ className: "flex-row-gap-50px",
1940
+ children: /* @__PURE__ */ jsxs("div", { children: [
1941
+ /* @__PURE__ */ jsxs("div", {
1942
+ className: "color-picker-wrapper",
1943
+ children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [strokeColorLabel, ":"] }) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MyColorPicker, {
1944
+ color: (() => {
1945
+ if (borderColor.at(3) < 1) return [
1946
+ borderColor[0],
1947
+ borderColor[1],
1948
+ borderColor[2],
1949
+ 1
1950
+ ];
1951
+ return borderColor;
1952
+ })(),
1953
+ hideAlpha: true,
1954
+ onChange: (e) => setBorderColor(fromString(e))
1955
+ }) })]
1956
+ }),
1957
+ /* @__PURE__ */ jsxs("div", {
1958
+ className: "flex-column-gap-7px",
1959
+ children: [
1960
+ /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [strokeWidthLabel, ":"] }) }),
1961
+ /* @__PURE__ */ jsx(Slider, {
1962
+ max: 10,
1963
+ min: 0,
1964
+ className: "slider-wrapper",
1965
+ value: borderThickness,
1966
+ onChange: (e) => setBorderThickness(e.value)
1967
+ }),
1968
+ /* @__PURE__ */ jsxs("span", { children: [borderThickness, " px"] })
1969
+ ]
1970
+ }),
1971
+ /* @__PURE__ */ jsxs("div", {
1972
+ className: "flex-column-gap-7px",
1973
+ children: [
1974
+ /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [colorOpacityLabel, ":"] }) }),
1975
+ /* @__PURE__ */ jsx(Slider, {
1976
+ max: 100,
1977
+ min: 0,
1978
+ className: "slider-wrapper",
1979
+ value: opacity,
1980
+ onChange: (e) => {
1981
+ setOpacity(e.value);
1982
+ setStops([...stops].map((tr) => {
1983
+ const aux2 = [];
1984
+ aux2.push(tr.color[0]);
1985
+ aux2.push(tr.color[1]);
1986
+ aux2.push(tr.color[2]);
1987
+ aux2.push(e.value / 100);
1988
+ return {
1989
+ ...tr,
1990
+ color: aux2
1991
+ };
1992
+ }));
1993
+ }
1994
+ }),
1995
+ /* @__PURE__ */ jsxs("span", { children: [opacity, "%"] })
1996
+ ]
1997
+ }),
1998
+ /* @__PURE__ */ jsxs("div", {
1999
+ className: "flex-column-gap-7px",
2000
+ children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [previewLabel, ":"] }) }), /* @__PURE__ */ jsx("div", {
2001
+ style: { background: getColorRampString(stops.map((stop, index) => {
2002
+ return {
2003
+ offset: index / stops.length,
2004
+ color: stop.color
2005
+ };
2006
+ })) },
2007
+ className: "preview-color-ramp"
2008
+ })]
2009
+ })
2010
+ ] })
2011
+ })]
2012
+ }), /* @__PURE__ */ jsx("div", {
2013
+ className: "button-wrapper",
2014
+ children: /* @__PURE__ */ jsx(Button, {
2015
+ label: concludeLabel,
2016
+ onClick: () => {
2017
+ let allGood = true;
2018
+ stops.forEach((stop, index) => {
2019
+ if (index < stops.length - 1 && stop.value >= stops[index + 1].value) {
2020
+ showToast(errorValuesLabel, "error");
2021
+ allGood = false;
2022
+ }
2023
+ });
2024
+ if (allGood) {
2025
+ applyRenderer({
2026
+ type: RenderType.Graduated,
2027
+ graduatedType: selectedMode,
2028
+ field: selectedAttr?.name,
2029
+ rendererOL: getGraduatedStyle(selectedAttr?.name, stops, borderColor, borderThickness)
2030
+ });
2031
+ setVisible(false);
2032
+ }
2033
+ }
2034
+ })
2035
+ })]
2036
+ })
2037
+ ]
2038
+ }), /* @__PURE__ */ jsx(Toast, { ref: toast })] });
2039
+ };
2040
+ //#endregion
2041
+ //#region src/components/filters/filterWidgetContext.tsx
2042
+ var FilterWidgetContext = createContext(null);
2043
+ function FilterWidgetContextProvider({ children, attributes }) {
2044
+ const initial = {
2045
+ title: "",
2046
+ attributes,
2047
+ expressionSet: [{
2048
+ id: 0,
2049
+ conditions: [0],
2050
+ expression: {
2051
+ conditions: [{
2052
+ attribute: "",
2053
+ op: "",
2054
+ value: ""
2055
+ }],
2056
+ isAll: void 0
2057
+ }
2058
+ }],
2059
+ expressionsComponents: [0]
2060
+ };
2061
+ const [queryWidget, setQueryWidget] = useState(initial);
2062
+ function setTitle(value) {
2063
+ setQueryWidget({
2064
+ ...queryWidget,
2065
+ title: value
2066
+ });
2067
+ }
2068
+ function setExpressionSet(value) {
2069
+ setQueryWidget({
2070
+ ...queryWidget,
2071
+ expressionSet: value
2072
+ });
2073
+ }
2074
+ function setExpressionsComponents(value) {
2075
+ setQueryWidget({
2076
+ ...queryWidget,
2077
+ expressionsComponents: value
2078
+ });
2079
+ }
2080
+ function setAttributes(value) {
2081
+ setQueryWidget({
2082
+ ...queryWidget,
2083
+ attributes: value
2084
+ });
2085
+ }
2086
+ function reset() {
2087
+ setQueryWidget(initial);
2088
+ }
2089
+ function addAttributes(atts) {
2090
+ let aux = queryWidget.attributes;
2091
+ aux.push(...atts);
2092
+ setAttributes(aux);
2093
+ }
2094
+ return /* @__PURE__ */ jsx(FilterWidgetContext.Provider, {
2095
+ value: {
2096
+ queryWidget,
2097
+ setTitle,
2098
+ setExpressionSet,
2099
+ setExpressionsComponents,
2100
+ reset,
2101
+ setAttributes,
2102
+ addAttributes
2103
+ },
2104
+ children
2105
+ });
2106
+ }
2107
+ //#endregion
2108
+ //#region src/components/filters/conditionOnFilter.tsx
2109
+ var ConditionOnFilter = (props) => {
2110
+ const { parentID, id, deleteF } = props;
2111
+ const { queryWidget, setExpressionSet } = useContext(FilterWidgetContext);
2112
+ const toast = useRef(null);
2113
+ const { t } = useTranslation();
2114
+ const [selectedAttribute, setSelectedAttribute] = useState();
2115
+ const [selectedFunction, setSelectedFunction] = useState();
2116
+ const functionsBooleans = [{
2117
+ name: t("filters.yes"),
2118
+ logic: "true"
2119
+ }, {
2120
+ name: t("filters.no"),
2121
+ logic: "false"
2122
+ }];
2123
+ const functionsTexts = [
2124
+ {
2125
+ name: t("filters.is"),
2126
+ logic: "=="
2127
+ },
2128
+ {
2129
+ name: t("filters.is_not"),
2130
+ logic: "!="
2131
+ },
2132
+ {
2133
+ name: t("filters.starts_with"),
2134
+ logic: "startsWith"
2135
+ },
2136
+ {
2137
+ name: t("filters.ends_with"),
2138
+ logic: "endsWith"
2139
+ },
2140
+ {
2141
+ name: t("filters.contains"),
2142
+ logic: "in"
2143
+ },
2144
+ {
2145
+ name: t("filters.does_not_contain"),
2146
+ logic: "!in"
2147
+ },
2148
+ {
2149
+ name: t("filters.is_null"),
2150
+ logic: "null"
2151
+ }
2152
+ ];
2153
+ const functionsNumbers = [
2154
+ {
2155
+ name: t("filters.is"),
2156
+ logic: "=="
2157
+ },
2158
+ {
2159
+ name: t("filters.is_not"),
2160
+ logic: "!="
2161
+ },
2162
+ {
2163
+ name: t("filters.is_at_least"),
2164
+ logic: ">="
2165
+ },
2166
+ {
2167
+ name: t("filters.is_less_than"),
2168
+ logic: "<"
2169
+ },
2170
+ {
2171
+ name: t("filters.is_at_most"),
2172
+ logic: "<="
2173
+ },
2174
+ {
2175
+ name: t("filters.is_greater_than"),
2176
+ logic: ">"
2177
+ },
2178
+ {
2179
+ name: t("filters.is_null"),
2180
+ logic: "null"
2181
+ }
2182
+ ];
2183
+ const [selectedValue, setSelectedValue] = useState();
2184
+ const [values, setValues] = useState();
2185
+ useEffect(() => {
2186
+ if (selectedAttribute != void 0) {
2187
+ let aux = queryWidget.attributes.filter((feature) => feature.name == selectedAttribute.name)[0];
2188
+ setValues(aux?.values.filter((i) => i != null));
2189
+ }
2190
+ }, [queryWidget.attributes, selectedAttribute]);
2191
+ useEffect(() => {
2192
+ const fullExp = queryWidget.expressionSet.find((item) => item.id === parentID);
2193
+ if (!fullExp) return;
2194
+ const conditionIndex = fullExp.conditions.findIndex((c) => c === id);
2195
+ if (conditionIndex === -1) return;
2196
+ const condition = fullExp.expression.conditions[conditionIndex];
2197
+ const foundAttribute = queryWidget.attributes.find((a) => a.name === condition.attribute);
2198
+ if (foundAttribute) setSelectedAttribute(foundAttribute);
2199
+ let functionSet;
2200
+ if (foundAttribute?.type === AttributeTypeEnum.STRING || foundAttribute?.type === AttributeTypeEnum.JSON) functionSet = functionsTexts;
2201
+ else if (foundAttribute?.type === AttributeTypeEnum.BOOLEAN) functionSet = functionsBooleans;
2202
+ else functionSet = functionsNumbers;
2203
+ const foundFunction = functionSet.find((f) => f.logic === condition.op);
2204
+ if (foundFunction) setSelectedFunction(foundFunction);
2205
+ if (condition.value) setSelectedValue(condition.value);
2206
+ }, [
2207
+ queryWidget.expressionSet,
2208
+ queryWidget.attributes,
2209
+ id
2210
+ ]);
2211
+ function update(funct, value, attribute) {
2212
+ let fullExp = queryWidget.expressionSet.find((item) => item.id === parentID);
2213
+ let expression = fullExp.expression;
2214
+ let condition = expression.conditions.at(fullExp.conditions?.findIndex((c) => c == id));
2215
+ if (funct) condition.op = funct.logic;
2216
+ if (value) if (value.includes("'") || value.includes("\"")) toast.current?.show({
2217
+ severity: "error",
2218
+ summary: "Error",
2219
+ detail: t("filters.invalid_chars_error", { id: parentID + "." + id })
2220
+ });
2221
+ else condition.value = value;
2222
+ if (attribute) if (attribute.name != null) condition.attribute = attribute.name;
2223
+ else toast.current?.show({
2224
+ severity: "error",
2225
+ summary: "Error",
2226
+ detail: t("filters.invalid_attribute_error")
2227
+ });
2228
+ queryWidget.expressionSet.splice(queryWidget.expressionSet.findIndex((item) => item.id === parentID), 1, {
2229
+ id: parentID,
2230
+ conditions: fullExp.conditions,
2231
+ expression
2232
+ });
2233
+ setExpressionSet(queryWidget.expressionSet);
2234
+ }
2235
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
2236
+ style: {
2237
+ position: "relative",
2238
+ paddingBottom: "5px"
2239
+ },
2240
+ children: [/* @__PURE__ */ jsx("div", {
2241
+ style: {
2242
+ position: "absolute",
2243
+ right: 0
2244
+ },
2245
+ children: /* @__PURE__ */ jsx(Button, {
2246
+ icon: "pi pi-times",
2247
+ onClick: () => {
2248
+ return deleteF(id);
2249
+ }
2250
+ })
2251
+ }), /* @__PURE__ */ jsx(Fieldset, {
2252
+ legend: t("filters.condition") + (id + 1),
2253
+ children: /* @__PURE__ */ jsxs("div", { children: [
2254
+ /* @__PURE__ */ jsx(Dropdown, {
2255
+ value: selectedAttribute,
2256
+ onChange: (e) => {
2257
+ setSelectedFunction(void 0);
2258
+ setSelectedAttribute(e.value);
2259
+ setSelectedValue(void 0);
2260
+ update(void 0, void 0, e.value);
2261
+ },
2262
+ options: queryWidget.attributes,
2263
+ optionLabel: "name",
2264
+ placeholder: t("filters.select_attribute"),
2265
+ className: "w-full md:w-14rem"
2266
+ }),
2267
+ /* @__PURE__ */ jsx(Dropdown, {
2268
+ value: selectedFunction,
2269
+ onChange: (e) => {
2270
+ setSelectedFunction(e.value);
2271
+ if (e.value.logic == "null") setSelectedValue(void 0);
2272
+ update(e.value, void 0, void 0);
2273
+ },
2274
+ options: selectedAttribute?.type == AttributeTypeEnum.STRING || selectedAttribute?.type == AttributeTypeEnum.JSON ? functionsTexts : selectedAttribute?.type == AttributeTypeEnum.BOOLEAN ? functionsBooleans : functionsNumbers,
2275
+ disabled: selectedAttribute == void 0,
2276
+ optionLabel: "name",
2277
+ placeholder: t("filters.select_operator")
2278
+ }),
2279
+ selectedAttribute?.type != AttributeTypeEnum.BOOLEAN && selectedFunction?.name != t("filters.is_null") && /* @__PURE__ */ jsx(Dropdown, {
2280
+ value: selectedValue,
2281
+ editable: true,
2282
+ onChange: (e) => {
2283
+ setSelectedValue(e.value);
2284
+ update(void 0, e.value, void 0);
2285
+ },
2286
+ options: values?.length < 200 ? values : values?.slice(0, 200),
2287
+ filter: true,
2288
+ placeholder: t("filters.select_value"),
2289
+ disabled: selectedFunction == void 0,
2290
+ className: "w-full md:w-14rem"
2291
+ })
2292
+ ] })
2293
+ })]
2294
+ }), /* @__PURE__ */ jsx(Toast, { ref: toast })] });
2295
+ };
2296
+ //#endregion
2297
+ //#region src/components/filters/expressionOnFilter.tsx
2298
+ var ExpressionOnFilter = (props) => {
2299
+ const { id } = props;
2300
+ const { queryWidget, setExpressionSet } = useContext(FilterWidgetContext);
2301
+ const { t } = useTranslation();
2302
+ const [selectedOp, setSelectedOp] = useState(null);
2303
+ const ops = [{ name: t("filters.all_true") }, { name: t("filters.any_true") }];
2304
+ useEffect(() => {
2305
+ const currentExp = queryWidget.expressionSet.find((item) => item.id === id);
2306
+ if (currentExp?.expression.isAll !== void 0) setSelectedOp(currentExp.expression.isAll ? ops[0] : ops[1]);
2307
+ }, [queryWidget.expressionSet, id]);
2308
+ const currentExp = queryWidget.expressionSet.find((item) => item.id === id);
2309
+ function addCondition() {
2310
+ if (currentExp.conditions.length < 10) {
2311
+ let expression = queryWidget.expressionSet.find((item) => item.id === id)?.expression;
2312
+ expression.conditions?.push({
2313
+ attribute: "",
2314
+ op: "",
2315
+ value: ""
2316
+ });
2317
+ queryWidget.expressionSet.splice(queryWidget.expressionSet.findIndex((item) => item.id === id), 1, {
2318
+ id,
2319
+ conditions: [...currentExp.conditions, currentExp.conditions.at(currentExp.conditions.length - 1) + 1],
2320
+ expression
2321
+ });
2322
+ setExpressionSet(queryWidget.expressionSet);
2323
+ }
2324
+ }
2325
+ function deleteCondition(idCond) {
2326
+ if (currentExp.conditions.length > 1) {
2327
+ let index = currentExp.conditions.findIndex((item) => item === idCond);
2328
+ let expression = queryWidget.expressionSet.find((item) => item.id === id)?.expression;
2329
+ expression.conditions?.splice(index, 1);
2330
+ queryWidget.expressionSet.splice(queryWidget.expressionSet.findIndex((item) => item.id === id), 1, {
2331
+ id,
2332
+ conditions: currentExp.conditions.filter((item) => item !== idCond),
2333
+ expression
2334
+ });
2335
+ setExpressionSet(queryWidget.expressionSet);
2336
+ }
2337
+ }
2338
+ function update(op) {
2339
+ let expression = queryWidget.expressionSet.find((item) => item.id === id)?.expression;
2340
+ expression.isAll = op === t("filters.all_true");
2341
+ queryWidget.expressionSet.splice(queryWidget.expressionSet.findIndex((item) => item.id === id), 1, {
2342
+ id,
2343
+ conditions: currentExp.conditions,
2344
+ expression
2345
+ });
2346
+ setExpressionSet(queryWidget.expressionSet);
2347
+ }
2348
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
2349
+ style: {
2350
+ position: "relative",
2351
+ paddingBottom: "5px"
2352
+ },
2353
+ children: /* @__PURE__ */ jsx(Panel, {
2354
+ header: t("filters.expression"),
2355
+ children: /* @__PURE__ */ jsxs("div", {
2356
+ style: {
2357
+ display: "flex",
2358
+ flexDirection: "column"
2359
+ },
2360
+ children: [/* @__PURE__ */ jsx(ScrollPanel, {
2361
+ style: {
2362
+ width: "100%",
2363
+ height: "90%"
2364
+ },
2365
+ children: /* @__PURE__ */ jsx("ul", {
2366
+ style: { paddingLeft: "0" },
2367
+ children: currentExp.conditions.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ConditionOnFilter, {
2368
+ id: item,
2369
+ parentID: id,
2370
+ deleteF: deleteCondition
2371
+ }) }, index))
2372
+ })
2373
+ }), /* @__PURE__ */ jsxs("div", {
2374
+ style: {
2375
+ display: "flex",
2376
+ flexDirection: "column",
2377
+ width: "230px",
2378
+ gap: "5px"
2379
+ },
2380
+ children: [/* @__PURE__ */ jsx(Button, {
2381
+ label: t("filters.add_condition"),
2382
+ outlined: true,
2383
+ onClick: addCondition
2384
+ }), /* @__PURE__ */ jsx(Dropdown, {
2385
+ style: { paddingBottom: "5px" },
2386
+ value: selectedOp,
2387
+ onChange: (e) => {
2388
+ setSelectedOp(e.value);
2389
+ update(e.value.name);
2390
+ },
2391
+ options: ops,
2392
+ optionLabel: "name",
2393
+ placeholder: t("filters.select_operator"),
2394
+ className: "w-full md:w-14rem"
2395
+ })]
2396
+ })]
2397
+ })
2398
+ })
2399
+ }) });
2400
+ };
2401
+ var filterWidget_module_default = {
2402
+ expressions: "_expressions_14903_1",
2403
+ text: "_text_14903_7",
2404
+ menu: "_menu_14903_15",
2405
+ alignCenter: "_alignCenter_14903_22",
2406
+ dialogDimensions: "_dialogDimensions_14903_27",
2407
+ addExpression: "_addExpression_14903_32",
2408
+ conclude: "_conclude_14903_39"
2409
+ };
2410
+ //#endregion
2411
+ //#region src/components/uniqueSymbolComponent.tsx
2412
+ function UniqueSymbolComponent(props) {
2413
+ const { currentStyle, setColor, setBorderColor, setBorderThickness, borderThickness, color, borderColor } = props;
2414
+ const { t } = useTranslation();
2415
+ const fillColorLabel = t("unique_symbol.fill_color");
2416
+ const strokeColorLabel = t("categorized.stroke_color");
2417
+ const strokeWidthLabel = t("categorized.stroke_width");
2418
+ const start = "#18d7ba";
2419
+ useEffect(() => {
2420
+ setColor(currentStyle ? currentStyle["fill-color"] : fromString(start));
2421
+ let auxBorder;
2422
+ if (currentStyle) if (currentStyle["stroke-color"]) if (currentStyle["stroke-color"][0] == "case") auxBorder = currentStyle["stroke-color"][3];
2423
+ else auxBorder = currentStyle["stroke-color"];
2424
+ else auxBorder = fromString("#000000");
2425
+ else auxBorder = fromString("#000000");
2426
+ setBorderColor(auxBorder);
2427
+ let auxBorderWidth;
2428
+ if (currentStyle) if (currentStyle["stroke-width"] instanceof Array) auxBorderWidth = currentStyle["stroke-width"][3];
2429
+ else auxBorderWidth = currentStyle["stroke-width"];
2430
+ else auxBorderWidth = 1;
2431
+ setBorderThickness(auxBorderWidth);
2432
+ }, []);
2433
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
2434
+ className: "container2",
2435
+ children: /* @__PURE__ */ jsxs("div", { children: [
2436
+ /* @__PURE__ */ jsxs("div", {
2437
+ className: "flex-row-unique",
2438
+ children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [fillColorLabel, ":"] }) }), /* @__PURE__ */ jsx("div", { children: color && /* @__PURE__ */ jsx(MyColorPicker, {
2439
+ color,
2440
+ onChange: (e) => setColor(fromString(e))
2441
+ }) })]
2442
+ }),
2443
+ /* @__PURE__ */ jsxs("div", {
2444
+ className: "flex-row-unique",
2445
+ children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [strokeColorLabel, ":"] }) }), /* @__PURE__ */ jsx("div", { children: borderColor && /* @__PURE__ */ jsx(MyColorPicker, {
2446
+ color: borderColor,
2447
+ hideAlpha: true,
2448
+ onChange: (e) => setBorderColor(fromString(e))
2449
+ }) })]
2450
+ }),
2451
+ /* @__PURE__ */ jsxs("div", {
2452
+ className: "flex-column-gap-7",
2453
+ children: [
2454
+ /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [strokeWidthLabel, ": "] }) }),
2455
+ /* @__PURE__ */ jsx(Slider, {
2456
+ max: 10,
2457
+ min: 0,
2458
+ className: "slider-wrapper",
2459
+ value: borderThickness,
2460
+ onChange: (e) => setBorderThickness(e.value)
2461
+ }),
2462
+ /* @__PURE__ */ jsxs("span", { children: [borderThickness, " px"] })
2463
+ ]
2464
+ })
2465
+ ] })
2466
+ }) });
2467
+ }
2468
+ //#endregion
2469
+ //#region src/components/filters/filterWidget.tsx
2470
+ var FilterWidget = (props) => {
2471
+ const [isDataLoaded, setIsDataLoaded] = useState(false);
2472
+ const { visible, setVisible, filter, setFilter, canBeElse } = props;
2473
+ const { queryWidget, setTitle, setExpressionSet, setExpressionsComponents, reset } = useContext(FilterWidgetContext);
2474
+ const toast = useRef(null);
2475
+ const { t } = useTranslation();
2476
+ const [color, setColor] = useState();
2477
+ const [borderColor, setBorderColor] = useState();
2478
+ const [borderThickness, setBorderThickness] = useState();
2479
+ const [isElse, setIsElse] = useState(false);
2480
+ function constructJsonString(operator, attribute, value) {
2481
+ if (value === "") return `{"==": [{"var": "${attribute}"}, null]}`;
2482
+ return !isNaN(parseFloat(value)) ? constructJsonStringNumerical(operator, attribute, parseFloat(value)) : constructJsonStringText(operator, attribute, value);
2483
+ }
2484
+ function constructJsonStringNumerical(operator, attribute, value) {
2485
+ return `{
2486
+ "${operator}": [{ "var": "${attribute}" }, ${value}]
2487
+ }`;
2488
+ }
2489
+ function constructJsonStringText(operator, attribute, value) {
2490
+ switch (operator) {
2491
+ case "startsWith": return `{
2492
+ "==": [
2493
+ { "substr": [{ "var": "${attribute}" }, 0, ${value.length}] },
2494
+ "${value}"
2495
+ ]
2496
+ }`;
2497
+ case "endsWith": return `{
2498
+ "==": [
2499
+ { "substr": [{ "var": "${attribute}" }, -${value.length}] },
2500
+ "${value}"
2501
+ ]
2502
+ }`;
2503
+ case "!in": return `{
2504
+ "!": {
2505
+ "in": [${JSON.stringify(value)}, { "var": "${attribute}" }]
2506
+ }
2507
+ }`;
2508
+ default: return `{"${operator}": ["${value}", { "var": "${attribute}" }]}`;
2509
+ }
2510
+ }
2511
+ function buildJsonLogicRule(conditions, isAll) {
2512
+ if (conditions.length === 0) return "";
2513
+ return `{ "${isAll ? "and" : "or"}": [${conditions.join(", ")}] }`;
2514
+ }
2515
+ function generateRulesFromExpression(expression) {
2516
+ const conditionGroups = [];
2517
+ if (!expression || !Array.isArray(expression.conditions)) return "";
2518
+ expression.conditions.forEach((condition) => {
2519
+ const { type, op, attribute, value } = condition;
2520
+ const jsonString = constructJsonString(op, attribute, value);
2521
+ conditionGroups.push(jsonString);
2522
+ });
2523
+ return buildJsonLogicRule(conditionGroups, expression.isAll);
2524
+ }
2525
+ function deconstructRule(rule) {
2526
+ const parsedRule = JSON.parse(rule);
2527
+ const isAll = parsedRule.hasOwnProperty("and");
2528
+ return {
2529
+ isAll,
2530
+ conditions: parsedRule[isAll ? "and" : "or"].map((condition) => {
2531
+ const operator = Object.keys(condition)[0];
2532
+ const value = condition[operator];
2533
+ if (operator === "==" && value[0].hasOwnProperty("substr")) {
2534
+ const substr = value[0].substr;
2535
+ const valueString = value[1];
2536
+ if (substr[1] < 0) return {
2537
+ operator: "endsWith",
2538
+ attribute: substr[0].var,
2539
+ value: valueString
2540
+ };
2541
+ else return {
2542
+ operator: "startsWith",
2543
+ attribute: substr[0].var,
2544
+ value: valueString
2545
+ };
2546
+ }
2547
+ if (operator === "!") {
2548
+ const innerCondition = value[Object.keys(value)[0]];
2549
+ return {
2550
+ operator: "!in",
2551
+ attribute: innerCondition[1].var,
2552
+ value: innerCondition[0]
2553
+ };
2554
+ }
2555
+ if (operator === "==") {
2556
+ if (value[0] === null) return {
2557
+ operator: "null",
2558
+ attribute: value[1].var
2559
+ };
2560
+ }
2561
+ const max = value[0];
2562
+ if (max.hasOwnProperty("var")) return {
2563
+ operator,
2564
+ attribute: max.var,
2565
+ value: value[1]
2566
+ };
2567
+ return {
2568
+ operator,
2569
+ attribute: value[1].var,
2570
+ value: max
2571
+ };
2572
+ })
2573
+ };
2574
+ }
2575
+ useEffect(() => {
2576
+ if (!filter) {
2577
+ setIsDataLoaded(true);
2578
+ return;
2579
+ }
2580
+ setTitle(filter.name);
2581
+ setIsElse(filter.isElse);
2582
+ queryWidget.title = filter.name;
2583
+ if (filter && !filter.isElse) {
2584
+ const allConditions = [];
2585
+ deconstructRule(filter.filterJson).conditions.forEach((condition) => {
2586
+ allConditions.push({
2587
+ attribute: condition.attribute || "",
2588
+ op: condition.operator || "==",
2589
+ value: condition.value
2590
+ });
2591
+ });
2592
+ setExpressionSet([{
2593
+ id: 0,
2594
+ conditions: allConditions.map((_, index) => index),
2595
+ expression: {
2596
+ conditions: allConditions,
2597
+ isAll: filter.isAll
2598
+ }
2599
+ }]);
2600
+ }
2601
+ if (queryWidget.title === filter.name && queryWidget.expressionSet.length > 0) setIsDataLoaded(true);
2602
+ }, [filter]);
2603
+ useEffect(() => {
2604
+ setExpressionsComponents(queryWidget.expressionSet.map((exp) => exp.id));
2605
+ }, [queryWidget.expressionSet]);
2606
+ function addPolygons() {
2607
+ if (queryWidget.title === "") {
2608
+ toast.current?.show({
2609
+ severity: "info",
2610
+ summary: "Info",
2611
+ detail: t("filters.title_empty_error")
2612
+ });
2613
+ return;
2614
+ }
2615
+ let hasToStop = false;
2616
+ if (!isElse) {
2617
+ const exps = queryWidget.expressionSet;
2618
+ if (exps.length === 0) {
2619
+ toast.current?.show({
2620
+ severity: "info",
2621
+ summary: "Info",
2622
+ detail: t("filters.min_one_expression_error")
2623
+ });
2624
+ return;
2625
+ }
2626
+ exps.forEach((tuple, expIndex) => {
2627
+ if (tuple.expression.isAll == void 0) {
2628
+ toast.current?.show({
2629
+ severity: "info",
2630
+ summary: "Info",
2631
+ detail: t("filters.select_and_or_error", { id: tuple.id })
2632
+ });
2633
+ hasToStop = true;
2634
+ return;
2635
+ }
2636
+ tuple.expression.conditions?.forEach((cond, index) => {
2637
+ if (cond.attribute == "") {
2638
+ toast.current?.show({
2639
+ severity: "info",
2640
+ summary: "Info",
2641
+ detail: t("filters.select_attribute_error", { id: expIndex + "." + index })
2642
+ });
2643
+ hasToStop = true;
2644
+ return;
2645
+ }
2646
+ if (cond.op == "") {
2647
+ toast.current?.show({
2648
+ severity: "info",
2649
+ summary: "Info",
2650
+ detail: t("filters.select_function_error", { id: expIndex + "." + index })
2651
+ });
2652
+ hasToStop = true;
2653
+ return;
2654
+ }
2655
+ let aux = cond.op == "null" || cond.op == "true" || cond.op == "false";
2656
+ if (cond.value == void 0 && !aux) {
2657
+ toast.current?.show({
2658
+ severity: "info",
2659
+ summary: "Info",
2660
+ detail: t("filters.select_value_error", { id: expIndex + "." + index })
2661
+ });
2662
+ hasToStop = true;
2663
+ return;
2664
+ }
2665
+ });
2666
+ });
2667
+ }
2668
+ if (!hasToStop) {
2669
+ let dto;
2670
+ if (isElse) dto = {
2671
+ name: queryWidget.title,
2672
+ isElse,
2673
+ symbol: {
2674
+ type: RenderType.Unique,
2675
+ rendererOL: singleColorStyle(color, borderColor, borderThickness)
2676
+ }
2677
+ };
2678
+ else {
2679
+ let rule = generateRulesFromExpression(queryWidget.expressionSet.map((tuple) => tuple.expression)[0]);
2680
+ dto = {
2681
+ name: queryWidget.title,
2682
+ filterJson: rule,
2683
+ isAll: queryWidget.expressionSet[0].expression.isAll,
2684
+ isElse,
2685
+ symbol: {
2686
+ type: RenderType.Unique,
2687
+ rendererOL: singleColorStyle(color, borderColor, borderThickness)
2688
+ }
2689
+ };
2690
+ }
2691
+ setFilter(dto);
2692
+ close();
2693
+ }
2694
+ }
2695
+ function close() {
2696
+ reset();
2697
+ setIsElse(false);
2698
+ setVisible(false);
2699
+ }
2700
+ return isDataLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Dialog, {
2701
+ header: t("filters.add_filter"),
2702
+ visible,
2703
+ className: filterWidget_module_default.dialogDimensions,
2704
+ onHide: () => close(),
2705
+ children: [
2706
+ /* @__PURE__ */ jsxs("div", {
2707
+ className: filterWidget_module_default.text,
2708
+ children: [
2709
+ /* @__PURE__ */ jsxs("span", {
2710
+ className: "p-float-label",
2711
+ children: [/* @__PURE__ */ jsx(InputText, {
2712
+ id: "title",
2713
+ value: queryWidget.title,
2714
+ onChange: (e) => setTitle(e.target.value)
2715
+ }), /* @__PURE__ */ jsx("label", {
2716
+ htmlFor: "title",
2717
+ children: t("filters.name")
2718
+ })]
2719
+ }),
2720
+ /* @__PURE__ */ jsxs("div", {
2721
+ className: "flex align-items-center",
2722
+ children: [/* @__PURE__ */ jsx(RadioButton, {
2723
+ inputId: "filter1",
2724
+ name: "filterType",
2725
+ value: t("filters.filter"),
2726
+ onChange: (e) => setIsElse(false),
2727
+ checked: !isElse
2728
+ }), /* @__PURE__ */ jsx("label", {
2729
+ htmlFor: "filter1",
2730
+ children: t("filters.filter")
2731
+ })]
2732
+ }),
2733
+ /* @__PURE__ */ jsxs("div", {
2734
+ className: "flex align-items-center",
2735
+ children: [/* @__PURE__ */ jsx(RadioButton, {
2736
+ inputId: "filter2",
2737
+ name: "filterType",
2738
+ value: t("filters.all_other_geometries"),
2739
+ disabled: !canBeElse,
2740
+ onChange: (e) => setIsElse(true),
2741
+ checked: isElse
2742
+ }), /* @__PURE__ */ jsx("label", {
2743
+ htmlFor: "filter2",
2744
+ children: t("filters.all_other_geometries")
2745
+ })]
2746
+ })
2747
+ ]
2748
+ }),
2749
+ /* @__PURE__ */ jsx("div", { className: "bor-radio-buttons" }),
2750
+ /* @__PURE__ */ jsx(UniqueSymbolComponent, {
2751
+ color,
2752
+ setColor,
2753
+ borderColor,
2754
+ setBorderColor,
2755
+ currentStyle: filter?.symbol.rendererOL,
2756
+ borderThickness,
2757
+ setBorderThickness
2758
+ }),
2759
+ !isElse && /* @__PURE__ */ jsx(ScrollPanel, { children: /* @__PURE__ */ jsx("ul", {
2760
+ className: filterWidget_module_default.expressions,
2761
+ style: { paddingLeft: "0" },
2762
+ children: queryWidget.expressionsComponents.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ExpressionOnFilter, { id: item }) }, index))
2763
+ }) }),
2764
+ /* @__PURE__ */ jsx("div", {
2765
+ className: filterWidget_module_default.conclude,
2766
+ children: /* @__PURE__ */ jsx(Button, {
2767
+ label: t("common.conclude"),
2768
+ onClick: addPolygons
2769
+ })
2770
+ })
2771
+ ]
2772
+ }), /* @__PURE__ */ jsx(Toast, { ref: toast })] }) : null;
2773
+ };
2774
+ //#endregion
2775
+ //#region src/components/basedOnRules.tsx
2776
+ function BasedOnRules(props) {
2777
+ const { setVisible, features, applyRenderer, layerCurrentRenderer, attributes } = props;
2778
+ const [rules, setRules] = useState(layerCurrentRenderer.type == RenderType.ByRules ? layerCurrentRenderer.filters ? layerCurrentRenderer.filters : [] : []);
2779
+ const [selectedRule, setSelectedRule] = useState();
2780
+ const [showDialog, setShowDialog] = useState(false);
2781
+ const [isAdding, setIsAdding] = useState(false);
2782
+ const [selectedAttribute, setSelectedAttribute] = useState(attributes.find((a) => a.name === layerCurrentRenderer.field));
2783
+ useEffect(() => {
2784
+ if (!selectedAttribute && layerCurrentRenderer.field && attributes.length > 0) {
2785
+ const attr = attributes.find((a) => a.name === layerCurrentRenderer.field);
2786
+ if (attr) setSelectedAttribute(attr);
2787
+ }
2788
+ }, [attributes, layerCurrentRenderer.field]);
2789
+ const { t } = useTranslation();
2790
+ const nameLabel = t("based_on_rules.name");
2791
+ const typeLabel = t("based_on_rules.type");
2792
+ const previewLabel = t("based_on_rules.preview");
2793
+ const expressionLabel = t("based_on_rules.expression");
2794
+ const allOtherGeometriesLabel = t("based_on_rules.all_other_geometries");
2795
+ const filterLabel = t("based_on_rules.filter");
2796
+ const selectIdAttributeLabel = t("based_on_rules.select_id_attribute");
2797
+ const idsNotUniqueLabel = t("based_on_rules.ids_not_unique");
2798
+ const addRuleLabel = t("based_on_rules.add_rule");
2799
+ const removeRuleLabel = t("based_on_rules.remove_rule");
2800
+ const editRuleLabel = t("based_on_rules.edit_rule");
2801
+ const concludeLabel = t("common.conclude");
2802
+ const columns = [
2803
+ {
2804
+ field: "name",
2805
+ header: nameLabel
2806
+ },
2807
+ {
2808
+ field: "isElse",
2809
+ header: typeLabel,
2810
+ body: (data) => data.isElse ? allOtherGeometriesLabel : filterLabel
2811
+ },
2812
+ {
2813
+ field: "symbol",
2814
+ header: previewLabel,
2815
+ body: (data) => {
2816
+ const color = getStyleColorsAndValues(data.symbol.rendererOL, RenderType.Unique);
2817
+ const stroke = getRendererColorAndSizeStroke(data.symbol);
2818
+ return /* @__PURE__ */ jsx("div", {
2819
+ style: {
2820
+ backgroundColor: asString(color.at(0).color),
2821
+ borderColor: asString(stroke.color),
2822
+ borderWidth: stroke.size
2823
+ },
2824
+ className: "bor-preview"
2825
+ });
2826
+ }
2827
+ },
2828
+ {
2829
+ field: "filterJson",
2830
+ header: expressionLabel,
2831
+ body: (data) => {
2832
+ if (!data.filterJson) return "";
2833
+ try {
2834
+ const parsed = JSON.parse(data.filterJson);
2835
+ const formatCondition = (cond) => {
2836
+ const operator = Object.keys(cond)[0];
2837
+ const value = cond[operator];
2838
+ if (operator === "!" && value.hasOwnProperty("in")) {
2839
+ const innerCondition = value["in"];
2840
+ return `${innerCondition[1].var} not in ${JSON.stringify(innerCondition[0])}`;
2841
+ }
2842
+ if (operator === "==" && Array.isArray(value) && value[0] && value[0].hasOwnProperty("substr")) {
2843
+ const substr = value[0].substr;
2844
+ const valueString = value[1];
2845
+ return `${substr[0].var} ${substr[1] < 0 ? "endsWith" : "startsWith"} "${valueString}"`;
2846
+ }
2847
+ if (operator === "==" && Array.isArray(value) && value[0] === null) return `${value[1].var} is null`;
2848
+ const max = Array.isArray(value) ? value[0] : null;
2849
+ if (max && max.hasOwnProperty("var")) return `${max.var} ${operator} ${JSON.stringify(value[1])}`;
2850
+ if (Array.isArray(value) && value[1] && value[1].hasOwnProperty("var")) return `${value[1].var} ${operator} ${JSON.stringify(max)}`;
2851
+ return JSON.stringify(cond);
2852
+ };
2853
+ const isAll = parsed.hasOwnProperty("and");
2854
+ const isAny = parsed.hasOwnProperty("or");
2855
+ if (isAll || isAny) {
2856
+ const operator = isAll ? " AND " : " OR ";
2857
+ return parsed[isAll ? "and" : "or"].map(formatCondition).join(operator);
2858
+ } else return formatCondition(parsed);
2859
+ } catch (e) {
2860
+ return data.filterJson;
2861
+ }
2862
+ }
2863
+ }
2864
+ ];
2865
+ function addFilter(filter) {
2866
+ setRules([...rules, filter]);
2867
+ }
2868
+ function editFilter(filter) {
2869
+ const index = rules.findIndex((r) => r === selectedRule);
2870
+ if (index >= 0) {
2871
+ const newRules = [...rules];
2872
+ newRules[index] = filter;
2873
+ setRules(newRules);
2874
+ }
2875
+ setSelectedRule(void 0);
2876
+ }
2877
+ function hasUniqueIDs(features, IDAttribute) {
2878
+ const idSet = /* @__PURE__ */ new Set();
2879
+ for (const feature of features) {
2880
+ const id = feature.get(IDAttribute.name);
2881
+ if (id === void 0 || id === null) return false;
2882
+ if (idSet.has(id)) return false;
2883
+ idSet.add(id);
2884
+ }
2885
+ return true;
2886
+ }
2887
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
2888
+ className: "container-bor",
2889
+ children: [
2890
+ /* @__PURE__ */ jsxs("div", {
2891
+ className: "bor-id",
2892
+ children: [/* @__PURE__ */ jsx(Dropdown, {
2893
+ options: attributes,
2894
+ optionLabel: "name",
2895
+ value: selectedAttribute,
2896
+ placeholder: selectIdAttributeLabel,
2897
+ onChange: (e) => setSelectedAttribute(e.value)
2898
+ }), selectedAttribute && !hasUniqueIDs(features, selectedAttribute) && /* @__PURE__ */ jsxs("div", {
2899
+ className: "bor-id",
2900
+ children: [/* @__PURE__ */ jsx("i", {
2901
+ className: "pi pi-exclamation-triangle",
2902
+ style: { color: "orange" }
2903
+ }), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("b", { children: idsNotUniqueLabel }) })]
2904
+ })]
2905
+ }),
2906
+ /* @__PURE__ */ jsxs("div", {
2907
+ className: "bor-buttons",
2908
+ children: [
2909
+ /* @__PURE__ */ jsx(Button, {
2910
+ label: addRuleLabel,
2911
+ icon: "pi pi-plus",
2912
+ outlined: true,
2913
+ onClick: () => {
2914
+ setIsAdding(true);
2915
+ setShowDialog(true);
2916
+ }
2917
+ }),
2918
+ /* @__PURE__ */ jsx(Button, {
2919
+ label: removeRuleLabel,
2920
+ disabled: !selectedRule,
2921
+ icon: "pi pi-minus",
2922
+ outlined: true,
2923
+ onClick: () => {
2924
+ if (selectedRule) {
2925
+ setRules(rules.filter((r) => r !== selectedRule));
2926
+ setSelectedRule(void 0);
2927
+ }
2928
+ }
2929
+ }),
2930
+ /* @__PURE__ */ jsx(Button, {
2931
+ label: editRuleLabel,
2932
+ disabled: !selectedRule,
2933
+ icon: "pi pi-pencil",
2934
+ outlined: true,
2935
+ onClick: () => {
2936
+ if (selectedRule) {
2937
+ setIsAdding(false);
2938
+ setShowDialog(true);
2939
+ }
2940
+ }
2941
+ })
2942
+ ]
2943
+ }),
2944
+ /* @__PURE__ */ jsx(DataTable, {
2945
+ value: rules,
2946
+ selectionMode: "single",
2947
+ selection: selectedRule,
2948
+ onSelectionChange: (e) => setSelectedRule(e.value),
2949
+ children: columns.map((col) => /* @__PURE__ */ jsx(Column, {
2950
+ field: col.field,
2951
+ header: col.header,
2952
+ body: col.body
2953
+ }, col.field))
2954
+ }),
2955
+ /* @__PURE__ */ jsx("div", {
2956
+ className: "footer-container",
2957
+ children: /* @__PURE__ */ jsx(Button, {
2958
+ label: concludeLabel,
2959
+ disabled: !selectedAttribute || !hasUniqueIDs(features, selectedAttribute),
2960
+ onClick: () => {
2961
+ const appliedFilters = [];
2962
+ rules.filter((r) => !r.isElse).forEach((filter) => {
2963
+ const res = [];
2964
+ try {
2965
+ const parsedLogic = JSON.parse(filter.filterJson);
2966
+ features.forEach((feature) => {
2967
+ if (jsonLogic.apply(parsedLogic, feature.getProperties())) res.push(feature.get(selectedAttribute.name));
2968
+ });
2969
+ } catch (e) {
2970
+ console.error("Error evaluating jsonLogic rule", e);
2971
+ }
2972
+ appliedFilters.push({
2973
+ filter,
2974
+ ids: res
2975
+ });
2976
+ });
2977
+ applyRenderer({
2978
+ type: RenderType.ByRules,
2979
+ field: selectedAttribute.name,
2980
+ filters: rules,
2981
+ rendererOL: getByRulesStyle(appliedFilters, selectedAttribute.name, rules.find((r) => r.isElse))
2982
+ });
2983
+ setVisible(false);
2984
+ }
2985
+ })
2986
+ })
2987
+ ]
2988
+ }), /* @__PURE__ */ jsx(FilterWidget, {
2989
+ visible: showDialog,
2990
+ setVisible: setShowDialog,
2991
+ filter: isAdding ? void 0 : selectedRule,
2992
+ setFilter: isAdding ? addFilter : editFilter,
2993
+ canBeElse: !isAdding && selectedRule?.isElse || rules.find((r) => r.isElse) == void 0
2994
+ })] });
2995
+ }
2996
+ //#endregion
2997
+ //#region src/components/geometryEditor.tsx
2998
+ var GeometryEditor = (props) => {
2999
+ const { layerCurrentRenderer, layerDefaultRenderer, moreRamps, predefinedStyles, showPreDefinedRamps, applyRenderer, setVisible, numbersLocale, features } = props;
3000
+ const { t } = useTranslation();
3001
+ const uniqueSymbol = t("common.unique_symbol");
3002
+ const categorized = t("common.categorized");
3003
+ const graduated = t("common.graduated");
3004
+ const resetStyle = t("common.reset_style");
3005
+ const selectStyle = t("common.select_type");
3006
+ const styleType = t("common.style_type");
3007
+ const basedOnRules = t("common.based_on_rules");
3008
+ const [attr, setAttr] = useState(props.attributes);
3009
+ useEffect(() => {
3010
+ setAttr(props.attributes);
3011
+ }, [props.attributes]);
3012
+ const [currentRenderer, setCurrentRenderer] = useState(layerCurrentRenderer);
3013
+ const options = [
3014
+ {
3015
+ label: uniqueSymbol,
3016
+ code: 0
3017
+ },
3018
+ {
3019
+ label: categorized,
3020
+ code: 1
3021
+ },
3022
+ {
3023
+ label: graduated,
3024
+ code: 2
3025
+ },
3026
+ {
3027
+ label: basedOnRules,
3028
+ code: 3
3029
+ }
3030
+ ];
3031
+ const [activeIndex, setActiveIndex] = useState(layerCurrentRenderer.type == RenderType.Categorized ? options[1] : layerCurrentRenderer.type == RenderType.Graduated ? options[2] : layerCurrentRenderer.type == RenderType.ByRules ? options[3] : options[0]);
3032
+ useEffect(() => {
3033
+ setActiveIndex(currentRenderer.type == RenderType.Categorized ? options[1] : currentRenderer.type == RenderType.Graduated ? options[2] : layerCurrentRenderer.type == RenderType.ByRules ? options[3] : options[0]);
3034
+ }, [currentRenderer]);
3035
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
3036
+ className: "geometry-editor",
3037
+ children: [
3038
+ /* @__PURE__ */ jsxs("div", {
3039
+ className: "dropdown",
3040
+ children: [/* @__PURE__ */ jsxs("div", {
3041
+ className: "style-type",
3042
+ children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("b", { children: [styleType, ":"] }) }), /* @__PURE__ */ jsx(Dropdown, {
3043
+ options,
3044
+ placeholder: selectStyle,
3045
+ optionLabel: "label",
3046
+ value: activeIndex,
3047
+ onChange: (e) => setActiveIndex(e.value)
3048
+ })]
3049
+ }), /* @__PURE__ */ jsx(Button, {
3050
+ label: resetStyle,
3051
+ disabled: currentRenderer == layerDefaultRenderer,
3052
+ onClick: () => {
3053
+ applyRenderer(layerDefaultRenderer);
3054
+ setCurrentRenderer(layerDefaultRenderer);
3055
+ }
3056
+ })]
3057
+ }),
3058
+ activeIndex?.code == 0 && /* @__PURE__ */ jsx(UniqueSymbol, {
3059
+ layerCurrentRenderer: currentRenderer,
3060
+ layerDefaultRenderer,
3061
+ applyRenderer,
3062
+ setVisible
3063
+ }),
3064
+ activeIndex?.code == 1 && /* @__PURE__ */ jsx(Categorized, {
3065
+ attr,
3066
+ layerCurrentRenderer: currentRenderer,
3067
+ layerDefaultRenderer,
3068
+ applyRenderer,
3069
+ setVisible,
3070
+ moreRamps,
3071
+ predefinedStyles,
3072
+ showPreDefinedRamps
3073
+ }),
3074
+ activeIndex?.code == 2 && /* @__PURE__ */ jsx(Graduated, {
3075
+ attr,
3076
+ setAttr,
3077
+ applyRenderer,
3078
+ moreRamps,
3079
+ setVisible,
3080
+ showPreDefinedRamps,
3081
+ layerCurrentRenderer,
3082
+ numbersLocale
3083
+ }),
3084
+ activeIndex?.code == 3 && /* @__PURE__ */ jsx(FilterWidgetContextProvider, {
3085
+ attributes: attr,
3086
+ children: /* @__PURE__ */ jsx(BasedOnRules, {
3087
+ applyRenderer,
3088
+ layerCurrentRenderer,
3089
+ setVisible,
3090
+ features,
3091
+ attributes: attr
3092
+ })
3093
+ })
3094
+ ]
3095
+ }) });
3096
+ };
3097
+ //#endregion
3098
+ //#region src/components/utills.ts
3099
+ function mapFeaturesToSEAttributes(features) {
3100
+ const attributeMap = {};
3101
+ features.forEach((feature) => {
3102
+ const properties = feature.getProperties();
3103
+ Object.keys(properties).forEach((key) => {
3104
+ if (key === "geometry") return;
3105
+ if (!attributeMap[key]) attributeMap[key] = /* @__PURE__ */ new Set();
3106
+ attributeMap[key].add(properties[key]);
3107
+ });
3108
+ });
3109
+ return Object.keys(attributeMap).map((key, index) => {
3110
+ const valuesArray = Array.from(attributeMap[key]);
3111
+ return {
3112
+ id: index,
3113
+ name: key,
3114
+ type: determineAttributeType(valuesArray),
3115
+ values: valuesArray.map(String)
3116
+ };
3117
+ });
3118
+ }
3119
+ function determineAttributeType(values) {
3120
+ if (values.length === 0) return AttributeTypeEnum.STRING;
3121
+ const sampleValue = values[0];
3122
+ if (typeof sampleValue === "string") return AttributeTypeEnum.STRING;
3123
+ else if (typeof sampleValue === "number") return Number.isInteger(sampleValue) ? AttributeTypeEnum.INTEGER : AttributeTypeEnum.FLOAT;
3124
+ else if (typeof sampleValue === "boolean") return AttributeTypeEnum.BOOLEAN;
3125
+ else if (sampleValue instanceof Date) return AttributeTypeEnum.DATE;
3126
+ else if (typeof sampleValue === "object") return AttributeTypeEnum.JSON;
3127
+ else return AttributeTypeEnum.STRING;
3128
+ }
3129
+ //#endregion
3130
+ //#region src/components/main/StyleEditorComponent.tsx
3131
+ var StyleEditorComponent = (props) => {
3132
+ const { layerDefaultRenderer, layerCurrentRenderer, applyRenderer, showPreDefinedRamps, moreRamps, predefinedStyles, addingToHeader, features, visible, setVisible, numbersLocale } = props;
3133
+ const { t } = useTranslation();
3134
+ const titleHeader = t("common.style_editor");
3135
+ const [activeIndex] = useState(1);
3136
+ const [attributesAndValues, setAttributesAndValues] = useState([]);
3137
+ useEffect(() => {
3138
+ setAttributesAndValues(mapFeaturesToSEAttributes(features));
3139
+ }, [features]);
3140
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Dialog, {
3141
+ visible: props.visible,
3142
+ header: titleHeader + (addingToHeader ? " - " + addingToHeader : ""),
3143
+ style: {
3144
+ height: "90%",
3145
+ width: "80%"
3146
+ },
3147
+ onHide: () => {
3148
+ props.setVisible(false);
3149
+ },
3150
+ children: activeIndex === 1 && attributesAndValues && /* @__PURE__ */ jsx(GeometryEditor, {
3151
+ attributes: attributesAndValues,
3152
+ visible,
3153
+ layerCurrentRenderer,
3154
+ applyRenderer,
3155
+ setVisible,
3156
+ layerDefaultRenderer,
3157
+ moreRamps,
3158
+ numbersLocale,
3159
+ features,
3160
+ predefinedStyles: predefinedStyles ? predefinedStyles : [],
3161
+ showPreDefinedRamps
3162
+ })
3163
+ }) });
3164
+ };
3165
+ //#endregion
3166
+ //#region src/i18n.ts
3167
+ i18n.use(initReactI18next).init({
3168
+ lng: "en",
3169
+ fallbackLng: "en",
3170
+ debug: true,
3171
+ resources: {
3172
+ pt: { translation: {
3173
+ common: {
3174
+ "style_editor": "Editor de Estilos",
3175
+ "reset_style": "Repor Estilo",
3176
+ "conclude": "Concluir",
3177
+ "unique_symbol": "Símbolo Único",
3178
+ "categorized": "Categorizado",
3179
+ "graduated": "Quantitativo",
3180
+ "null": "Nulo",
3181
+ "select_type": "Selecionar um tipo de estilo",
3182
+ "style_type": "Tipo de Estilo",
3183
+ "based_on_rules": "Baseado em regras"
3184
+ },
3185
+ errors: {
3186
+ "error_ramps_same_name": "Existem rampas com o mesmo nome: ",
3187
+ "error_diff": "A diferença entre os valores máximo e mínimo deve ser maior do que 0, é: ",
3188
+ "error_sum": "A soma das contagens dos intervalos deve ser igual ao número de valores",
3189
+ "error_sum2": "A soma das contagens está incorreta: ",
3190
+ "error_values": "Os valores dos intervalos devem ser crescentes."
3191
+ },
3192
+ categorized: {
3193
+ "predefined_styles": "Estilos Pré-definidos",
3194
+ "color_ramps": "Rampas de Cores",
3195
+ "stroke_color": "Cor do Contorno",
3196
+ "stroke_width": "Largura do Contorno",
3197
+ "attribute": "Atributo",
3198
+ "select_attribute": "Selecionar um atributo",
3199
+ "update_colors": "Atualizar cores",
3200
+ "color_opacity": "Opacidade da Cor",
3201
+ "colors_spectrum": "Espetro de Cores",
3202
+ "select_spectrum": "Selecionar um espetro",
3203
+ "custom_style": "Estilo Personalizado",
3204
+ "reverse_colors": "Inverter cores",
3205
+ "color_style": "Estilo de Cores"
3206
+ },
3207
+ unique_symbol: { "fill_color": "Cor de Preenchimento" },
3208
+ color_picker: { "select_color": "Selecionar uma cor" },
3209
+ graduated: {
3210
+ "amount_values": "Quantidade de valores (%)",
3211
+ "values": "Valores",
3212
+ "amount": "Quantidade (%)",
3213
+ "select_mode": "Selecionar um modo",
3214
+ "which_mode": "Qual modo escolher?",
3215
+ "interval_size": "Tamanho do intervalo",
3216
+ "classes_number": "Nº de classes",
3217
+ "invert_colors": "Inverter cores do espetro",
3218
+ "gradient_intervals": "Intervalos de Gradiente",
3219
+ "value": "Valor",
3220
+ "preview": "Pré-visualização",
3221
+ "min_value": "Valor Mínimo",
3222
+ "max_value": "Valor Máximo",
3223
+ "color": "Cor",
3224
+ "mode": "Modo"
3225
+ },
3226
+ graduate_modes: {
3227
+ "EqualInterval": "Intervalos Iguais",
3228
+ "Quantile": "Quantil",
3229
+ "NaturalBreaks": "Quebras Naturais (Jenks)",
3230
+ "DefinedInterval": "Intervalos Definidos",
3231
+ "Manual": "Manual",
3232
+ "GeometricInterval": "Intervalo Geométrico",
3233
+ "StandardDeviation": "Desvio Padrão"
3234
+ },
3235
+ based_on_rules: {
3236
+ "name": "Nome",
3237
+ "type": "Tipo",
3238
+ "preview": "Pré-visualização",
3239
+ "expression": "Expressão",
3240
+ "all_other_geometries": "Todas as restantes geometrias",
3241
+ "filter": "Filtro",
3242
+ "select_id_attribute": "Selecione o atributo de ID",
3243
+ "ids_not_unique": "Os IDs não são únicos",
3244
+ "add_rule": "Adicionar Regra",
3245
+ "remove_rule": "Remover Regra",
3246
+ "edit_rule": "Editar Regra"
3247
+ },
3248
+ filters: {
3249
+ "yes": "Sim",
3250
+ "no": "Não",
3251
+ "is": "é",
3252
+ "is_not": "não é",
3253
+ "starts_with": "começa com",
3254
+ "ends_with": "acaba com",
3255
+ "contains": "contém",
3256
+ "does_not_contain": "não contém",
3257
+ "is_null": "é nulo",
3258
+ "is_at_least": "é pelo menos",
3259
+ "is_less_than": "é menor que",
3260
+ "is_at_most": "é no máximo",
3261
+ "is_greater_than": "é maior que",
3262
+ "condition": "Condição ",
3263
+ "select_attribute": "Selecione o atributo",
3264
+ "select_operator": "Selecione o operador",
3265
+ "select_value": "Selecione um valor",
3266
+ "invalid_chars_error": "A condição {{id}} contém caracteres inválidos.",
3267
+ "invalid_attribute_error": "A condição tem um atributo inválido",
3268
+ "all_true": "Todas verdadeiras",
3269
+ "any_true": "Pelo menos uma verdadeira",
3270
+ "expression": "Expressão",
3271
+ "add_condition": "Adicionar Condição",
3272
+ "add_filter": "Adicionar Filtro",
3273
+ "name": "Nome",
3274
+ "filter": "Filtro",
3275
+ "all_other_geometries": "Todas as restantes geometrias",
3276
+ "title_empty_error": "Título não pode ser vazio!",
3277
+ "min_one_expression_error": "Tenha pelo menos uma expressão!",
3278
+ "select_and_or_error": "Selecione se a expressão {{id}} é \"E\" ou \"OU\"",
3279
+ "select_attribute_error": "Selecione um atributo para a condição {{id}}",
3280
+ "select_function_error": "Selecione uma função para a condição {{id}}",
3281
+ "select_value_error": "Selecione um valor para a condição {{id}}"
3282
+ }
3283
+ } },
3284
+ en: { translation: {
3285
+ common: {
3286
+ "style_editor": "Style Editor",
3287
+ "reset_style": "Reset Style",
3288
+ "conclude": "Apply",
3289
+ "unique_symbol": "Unique Symbol",
3290
+ "categorized": "Categorized",
3291
+ "graduated": "Quantitative",
3292
+ "null": "Null",
3293
+ "select_type": "Select a style type",
3294
+ "style_type": "Style Type",
3295
+ "based_on_rules": "Based on rules"
3296
+ },
3297
+ errors: {
3298
+ "error_ramps_same_name": "There are ramps with the same name: ",
3299
+ "error_diff": "The difference between the max and min values must be greater than 0, it is: ",
3300
+ "error_sum": "The sum of the counts of the intervals must be equal to the number of values",
3301
+ "error_sum2": "The sum of the counts is wrong: ",
3302
+ "error_values": "The interval values must be increasing."
3303
+ },
3304
+ categorized: {
3305
+ "predefined_styles": "Predefined Styles",
3306
+ "color_ramps": "Color Ramps",
3307
+ "stroke_color": "Stroke Color",
3308
+ "stroke_width": "Stroke Width",
3309
+ "attribute": "Attribute",
3310
+ "select_attribute": "Select an attribute",
3311
+ "update_colors": "Update colors",
3312
+ "color_opacity": "Color Opacity",
3313
+ "colors_spectrum": "Colors Spectrum",
3314
+ "select_spectrum": "Select a spectrum",
3315
+ "custom_style": "Custom Style",
3316
+ "reverse_colors": "Reverse colors",
3317
+ "color_style": "Color Style"
3318
+ },
3319
+ unique_symbol: { "fill_color": "Fill Color" },
3320
+ color_picker: { "select_color": "Select a color" },
3321
+ graduated: {
3322
+ "amount_values": "Amount of values (%)",
3323
+ "values": "Values",
3324
+ "amount": "Amount (%)",
3325
+ "select_mode": "Select a mode",
3326
+ "which_mode": "Which mode to choose?",
3327
+ "interval_size": "Interval size",
3328
+ "classes_number": "Number of classes",
3329
+ "invert_colors": "Invert colors of the spectrum",
3330
+ "gradient_intervals": "Gradient Intervals",
3331
+ "value": "Value",
3332
+ "preview": "Preview",
3333
+ "min_value": "Minimum Value",
3334
+ "max_value": "Maximum Value",
3335
+ "color": "Color",
3336
+ "mode": "Mode"
3337
+ },
3338
+ graduate_modes: {
3339
+ "EqualInterval": "Equal Intervals",
3340
+ "Quantile": "Quantile",
3341
+ "NaturalBreaks": "Natural Breaks (Jenks)",
3342
+ "DefinedInterval": "Defined Intervals",
3343
+ "Manual": "Manual",
3344
+ "GeometricInterval": "Geometric Interval",
3345
+ "StandardDeviation": "Standard Deviation"
3346
+ },
3347
+ based_on_rules: {
3348
+ "name": "Name",
3349
+ "type": "Type",
3350
+ "preview": "Preview",
3351
+ "expression": "Expression",
3352
+ "all_other_geometries": "All other geometries",
3353
+ "filter": "Filter",
3354
+ "select_id_attribute": "Select the ID attribute",
3355
+ "ids_not_unique": "IDs are not unique",
3356
+ "add_rule": "Add Rule",
3357
+ "remove_rule": "Remove Rule",
3358
+ "edit_rule": "Edit Rule"
3359
+ },
3360
+ filters: {
3361
+ "yes": "Yes",
3362
+ "no": "No",
3363
+ "is": "is",
3364
+ "is_not": "is not",
3365
+ "starts_with": "starts with",
3366
+ "ends_with": "ends with",
3367
+ "contains": "contains",
3368
+ "does_not_contain": "does not contain",
3369
+ "is_null": "is null",
3370
+ "is_at_least": "is at least",
3371
+ "is_less_than": "is less than",
3372
+ "is_at_most": "is at most",
3373
+ "is_greater_than": "is greater than",
3374
+ "condition": "Condition ",
3375
+ "select_attribute": "Select the attribute",
3376
+ "select_operator": "Select the operator",
3377
+ "select_value": "Select a value",
3378
+ "invalid_chars_error": "Condition {{id}} contains invalid characters.",
3379
+ "invalid_attribute_error": "The condition has an invalid attribute",
3380
+ "all_true": "All true",
3381
+ "any_true": "At least one true",
3382
+ "expression": "Expression",
3383
+ "add_condition": "Add Condition",
3384
+ "add_filter": "Add Filter",
3385
+ "name": "Name",
3386
+ "filter": "Filter",
3387
+ "all_other_geometries": "All other geometries",
3388
+ "title_empty_error": "Title cannot be empty!",
3389
+ "min_one_expression_error": "Have at least one expression!",
3390
+ "select_and_or_error": "Select whether the expression {{id}} is \"AND\" or \"OR\"",
3391
+ "select_attribute_error": "Select an attribute for condition {{id}}",
3392
+ "select_function_error": "Select a function for condition {{id}}",
3393
+ "select_value_error": "Select a value for condition {{id}}"
3394
+ }
3395
+ } }
3396
+ },
3397
+ interpolation: { escapeValue: false }
3398
+ });
3399
+ var i18n_default = i18n;
3400
+ //#endregion
3401
+ //#region src/components/main/StyleEditor.tsx
3402
+ function StyleEditor(props) {
3403
+ const { visible, setVisible, layerDefaultRenderer, layerCurrentRenderer, addingToHeader, applyRenderer, features, showPreDefinedRamps, moreRamps, predefinedStyles, primeReactTheme, numbersLocale, textLocale, customLocale } = props;
3404
+ const addLink = (href) => {
3405
+ const link = document.createElement("link");
3406
+ link.rel = "stylesheet";
3407
+ link.id = "theme-link";
3408
+ link.href = href;
3409
+ document.head.appendChild(link);
3410
+ };
3411
+ if (document.getElementById("primeTheme") == null) if (primeReactTheme == void 0) addLink("https://land-it.github.io/openlayers-style-editor/themes/lara-light-green/theme.css");
3412
+ else addLink("https://land-it.github.io/openlayers-style-editor/themes/" + primeReactTheme + "/theme.css");
3413
+ useEffect(() => {
3414
+ if (textLocale == "custom" && customLocale) {
3415
+ i18n_default.addResourceBundle("custom", "translation", customLocale, true, true);
3416
+ i18n_default.changeLanguage("custom");
3417
+ } else i18n_default.changeLanguage(textLocale ? textLocale : "en");
3418
+ }, []);
3419
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(I18nextProvider, {
3420
+ i18n: i18n_default,
3421
+ children: /* @__PURE__ */ jsx(PrimeReactProvider, { children: /* @__PURE__ */ jsx(StyleEditorComponent, {
3422
+ visible,
3423
+ setVisible,
3424
+ layerDefaultRenderer,
3425
+ moreRamps,
3426
+ predefinedStyles,
3427
+ showPreDefinedRamps,
3428
+ applyRenderer,
3429
+ features,
3430
+ layerCurrentRenderer,
3431
+ addingToHeader,
3432
+ numbersLocale: numbersLocale ? numbersLocale : "en-US"
3433
+ }) })
3434
+ }) });
3435
+ }
3436
+ //#endregion
3437
+ export { AttributeTypeEnum, GraduatedModes, RenderType, StyleEditor, changeRendererOpacity, generateRandomColor, getByRulesStyle, getCategorizedStyle, getGraduatedStyle, getRendererColorAndSizeStroke, getRendererOpacity, getStyleColorsAndValues, singleColorStyle, singleColorStyleForLines };