@redus/georedus-ui 0.19.4 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @orioro/template-react
 
+## 0.20.0
+
+### Minor Changes
+
+- release vector_polygon presets
+
+### Patch Changes
+
+- Updated dependencies
+  - @orioro/react-maplibre-util@0.8.0
+  - @orioro/react-chart-util@0.3.1
+
+## 0.19.5
+
+### Patch Changes
+
+- fix custom geojson aggregation
+
 ## 0.19.4
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,132 @@
+## Exportação de Mapa em Imagem
+### Comparação opções de bibliotecas para exportação de mapa em imagem: Março 2026
+
+| Biblioteca | Link | Minified Size | Bundle Size | Download Slow 3G | Download Emerging 4G | Launch | Last Publish | Weekly Download | Fork | Stars |
+|---|---|---|---|---|---|---|---|---|---|---|
+| **html2canvas** | https://www.npmjs.com/package/html2canvas | 193,5Kb | 303B | **6ms** | **338μs** | 27/09/19 | 22/01/22 | **5M** | **4.9K** | **31.8K** |
+| **html-to-image** | https://www.npmjs.com/package/html-to-image | **12.9Kb** | **5.1Kb** | 103ms | 6ms | **26/10/20** | **14/02/25** | 1.3M | 663 | 7.1K |
+
+
+---
+### 
+
+https://miro.com/app/live-embed/uXjVGu7s5fY=/?embedMode=view_only_without_ui&moveToViewport=1149%2C-723%2C5137%2C2496&embedId=518791624362
+
+
+![Arquitetura da Implementação de Exportação de Mapa em Imagem](<./public/georedus/doc/map_to_img_implementation.jpg>)
+
+### Sobre as dimensões adotadas
+
+A exportação da imagem está sendo feita para o tamanho de uma folha A4 que segue o padrão internacional ISO 216, que define as dimensões físicas dos formatos de papel da série A. Segundo a norma, uma folha A4 possui dimensões de **210 × 297 mm**.
+
+As dimensões em pixels não são definidas diretamente pela ISO. Elas são calculadas a partir do tamanho físico da folha e da resolução de impressão (DPI — dots per inch), utilizando a fórmula:
+
+```
+pixels = (mm/25.4) x DPI
+```
+
+Por exemplo, uma folha A4 em 300 DPI corresponde aproximadamente a **2480 × 3508 px**.
+
+Referências:
+
+* [ISO 216 Standard](https://www.iso.org/standard/36631.html?utm_source=chatgpt.com)
+* [PrintReadyKit – A4 Pixel Dimensions](https://printreadykit.com/paper-sizes/a4?utm_source=chatgpt.com)
+* [FeetToPixels – Paper Sizes in Pixels](https://www.feettopixels.com/en/paper-sizes-in-pixels?utm_source=chatgpt.com)
+
+
+
+## Estilizando Camadas
+
+Para estilizar camadas do na plataforma da GeoReDUS nós usamos os parâmetros da bibliteca do [MapLibre](https://maplibre.org/maplibre-style-spec/layers/) na [tabela de Cadastro](https://docs.google.com/spreadsheets/d/1Y2Pt8fXzhGUA_Nhwz7vOyEZUKi6FEP71DChfYBSTa7U/edit?gid=1006885047#gid=1006885047)
+
+Nesta tabela existem 4 campos de estilização:
+
+- color
+- fill
+- fill_pattern
+- line
+
+### Color
+
+Temos uma padronização de paleta de cores de acordo com o tipo de dado. Para preencher o campo `color` deve-se usar o padrão nomeDaPaleta.colors.index
+
+- **Dados Categóricos**
+
+  Usamos a paleta [schemePaired](https://d3js.org/d3-scale-chromatic/categorical#schemePaired) da biblioteca D3. É possível também ver a aplicação dessa paleta no [colorBrewer](https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12).
+
+  Assim para preencher o campo colors para dados categóricos siga a tabela abaixo
+
+  | visualização                                              | hexadecimal | código                   |
+  | --------------------------------------------------------- | ----------- | ------------------------ |
+  | <img src="docs/assets/color_imgs/a6cee3.png" width="40"/> | `#a6cee3`   | `schemePaired.colors.0`  |
+  | <img src="docs/assets/color_imgs/1f78b4.png" width="40"/> | `#1f78b4`   | `schemePaired.colors.1`  |
+  | <img src="docs/assets/color_imgs/b2df8a.png" width="40"/> | `#b2df8a`   | `schemePaired.colors.2`  |
+  | <img src="docs/assets/color_imgs/33a02c.png" width="40"/> | `#33a02c`   | `schemePaired.colors.3`  |
+  | <img src="docs/assets/color_imgs/fb9a99.png" width="40"/> | `#fb9a99`   | `schemePaired.colors.4`  |
+  | <img src="docs/assets/color_imgs/e31a1c.png" width="40"/> | `#e31a1c`   | `schemePaired.colors.5`  |
+  | <img src="docs/assets/color_imgs/fdbf6f.png" width="40"/> | `#fdbf6f`   | `schemePaired.colors.6`  |
+  | <img src="docs/assets/color_imgs/ff7f00.png" width="40"/> | `#ff7f00`   | `schemePaired.colors.7`  |
+  | <img src="docs/assets/color_imgs/cab2d6.png" width="40"/> | `#cab2d6`   | `schemePaired.colors.8`  |
+  | <img src="docs/assets/color_imgs/6a3d9a.png" width="40"/> | `#6a3d9a`   | `schemePaired.colors.9`  |
+  | <img src="docs/assets/color_imgs/ffff99.png" width="40"/> | `#ffff99`   | `schemePaired.colors.10` |
+  | <img src="docs/assets/color_imgs/b15928.png" width="40"/> | `#b15928`   | `schemePaired.colors.11` |
+
+### Fill
+
+É possível customizar como será preenchida a camada, no caso de poligonos usando a coluna `fill` com a inserção de um `json`. Para isso siga os parâmetros da bibliteca [MapLibre](https://maplibre.org/maplibre-style-spec/layers/#fill).
+
+No exemplo abaixo ele preenche zona urbana com a cor `#808080`, zona rural com a cor `#8B4513` e caso não se encaixe em nenhuma das duas categorias, preenche com a cor `#ff0000`.
+
+```json
+{
+    "layout": {
+        "visibility": "none"
+    },
+    "paint": {
+        "fill-opacity": 0.4,
+        "fill-color": [
+            "match",
+            ["get", "layer"],
+            "Zona Urbana",
+            "#808080",
+            "Zona Rural",
+            "#8B4513",
+            "#ff0000"
+        ]
+    }
+}
+```
+
+### Fill_pattern
+
+É possível inserir hashuras na coluna `fill_pattern`, para isto basta inserir o nome de uma hachura existente no projeto, são elas:
+| visualização | nome hachura |
+|--------------|--------------|
+| <img src="docs/assets/hash_imgs/squares_1.png" width="40"/> | `squares_1` |
+| <img src="docs/assets/hash_imgs/triangles_1.png" width="40"/> | `triangles_1` |
+| <img src="docs/assets/hash_imgs/diamonds_1.png" width="40"/> | `diamonds_1` |
+| <img src="docs/assets/hash_imgs/cross_1.png" width="40"/> | `cross_1` |
+| <img src="docs/assets/hash_imgs/mosaic_1.png" width="40"/> | `mosaic_1` |
+| <img src="docs/assets/hash_imgs/herringbone_8.png" width="40"/> | `mosaic_2` |
+| <img src="docs/assets/hash_imgs/waves_1.png" width="40"/> | `waves_1` |
+| <img src="docs/assets/hash_imgs/circles_1.png" width="40"/> | `circles_1` |
+| <img src="docs/assets/hash_imgs/lines_1.png" width="40"/> | `lines_1` |
+
+Todas as hachuras foram extraídas de [Pattern Monster](https://pattern.monster/). Para inserir novas hachuras, será necerrário importar o svg e inseri-lo em `svgPatterns` seguindo o padrão de código dos demais.
+
+### Line
+
+Para customizar uma linha, é muito parecido com a customização de um preenchimento (`fill`). Siga os parâmetros da bibliteca [MapLibre](https://maplibre.org/maplibre-style-spec/layers/#line), dentro de um `json`.
+
+No exemplo abaixo estamos definindo o preenchimento e espaçamento de uma linha tracejada, bem como sua espessura:
+
+```json
+{
+    "paint": {
+        "line-color": "#9f846a",
+        "line-width": 5,
+        "line-dasharray": [2, 4],
+        "visible": "none"
+    }
+}
+```

package/dist/ExportImage/ExportImage.d.ts

@@ -0,0 +1 @@
+export const ExportImage: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/dist/ExportImage/NorthArrow.d.ts

@@ -0,0 +1,15 @@
+/**
+ * NorthArrow Control Component
+ *
+ * Displays a rotatable north arrow that syncs with the map's bearing.
+ * Click to reset the map bearing to 0°.
+ *
+ * @param {Object} props
+ * @param {string} [props.position='bottom-right'] - Position in MapLibre control bar
+ * @param {React.CSSProperties} [props.style] - Additional styles for the container
+ */
+export function NorthArrow({ position, className, hidden }: {
+    position?: string | undefined;
+    style?: React.CSSProperties | undefined;
+}): React.ReactPortal | null;
+import React from 'react';

package/dist/ExportImage/constants.d.ts

@@ -0,0 +1,2 @@
+export const PREVIEW_WIDTH_PX: 1200;
+export const PAPER_WIDTH_PX: 3508;

package/dist/ExportImage/createMapBlob.d.ts

@@ -0,0 +1,20 @@
+export function extractMapImageBlobs({ map, rootEl }: {
+    map: any;
+    rootEl: any;
+}): Promise<{
+    mapCanvas: any;
+    blobLegend: Blob | null;
+    blobDescription: Blob | null;
+    blobQRCode: Blob | null;
+    blobLogo: Blob | null;
+    blobProjection: Blob | null;
+    blobNorthArrow: Blob | null;
+    blobScale: Blob | null;
+}>;
+export const LEGEND_CLASS_NAME: "LegendContainer";
+export const IMAGE_DESCRIPTION_CLASS_NAME: "ImageDescription";
+export const QR_CODE_CLASS_NAME: "QrCode";
+export const LOGO_CLASS_NAME: "Logo";
+export const PROJECTION_CLASS_NAME: "Projection";
+export const NORTH_ARROW_CLASS_NAME: "NorthArrow";
+export const SCALE_CONTROL_CLASS_NAME: "ScaleControl";

package/dist/ExportImage/createMapImage.d.ts

@@ -0,0 +1 @@
+export function composeMapImageCanvas(extractedBlobs: any): Promise<any>;

package/dist/ExportImage/index.d.ts

@@ -0,0 +1 @@
+export * from "./ExportImage";

package/dist/ExportImage/paperDimensions.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Calculate all paper layout dimensions based on a given paper width
+ * Uses A4 aspect ratio (1:√2) and derives all other constants
+ *
+ * @param {number} paperWidth - The width of the paper in pixels
+ * @returns {Object} Object containing all calculated dimensions
+ */
+export function getPaperDimensions(paperWidth: number): Object;

package/dist/GeoReDUS/constants.d.ts

@@ -0,0 +1,9 @@
+export const SKY_STYLE: {
+    'sky-color': string;
+    'sky-horizon-blend': number;
+    'horizon-color': string;
+    'horizon-fog-blend': number;
+    'fog-color': string;
+    'fog-ground-blend': number;
+    'atmosphere-blend': (string | number | string[])[];
+};

package/dist/GeoReDUSLogo/GeoReDUSLogo.d.ts

@@ -1,2 +1,2 @@
-export function GeoReDUSLogo(): React.JSX.Element;
+export function GeoReDUSLogo(props: any): React.JSX.Element;
 import React from 'react';

package/dist/LeftPanel/LeftPanel.d.ts

@@ -1,13 +1,17 @@
 export const LeftPanel: React.MemoExoticComponent<typeof LeftPanelInner>;
-declare function LeftPanelInner({ viewConfState, viewConfDispatch, viewSpecs, resolvedViews, open, onSetOpen, syncedMapsRef, mapContainerRef, categoryIcons, header: customHeader, footer: customFooter, }: {
+declare function LeftPanelInner({ viewConfState, viewConfDispatch, viewSpecs, resolvedViews, resolvedLayout, open, onSetOpen, commitedViewState, municipioId, METADATA_API_ENDPOINT, baseMapStyle, topViews, categoryIcons, header: customHeader, footer: customFooter, }: {
     viewConfState: any;
     viewConfDispatch: any;
     viewSpecs: any;
     resolvedViews: any;
+    resolvedLayout: any;
     open: any;
     onSetOpen: any;
-    syncedMapsRef: any;
-    mapContainerRef: any;
+    commitedViewState: any;
+    municipioId: any;
+    METADATA_API_ENDPOINT: any;
+    baseMapStyle: any;
+    topViews: any;
     categoryIcons?: undefined;
     header?: undefined;
     footer?: undefined;

package/dist/LeftPanel/SharePanel.d.ts

@@ -1,5 +1,9 @@
-export function SharePanel({ syncedMapsRef, mapContainerRef }: {
-    syncedMapsRef: any;
-    mapContainerRef: any;
+export function SharePanel({ resolvedLayout, commitedViewState, municipioId, METADATA_API_ENDPOINT, baseMapStyle, topViews, }: {
+    resolvedLayout: any;
+    commitedViewState: any;
+    municipioId: any;
+    METADATA_API_ENDPOINT: any;
+    baseMapStyle: any;
+    topViews: any;
 }): React.JSX.Element;
 import React from 'react';