Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Write test for teritoriocluster class #32

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

Write test for teritoriocluster class #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1e29b2d
chore: externalize maplibre from build #35 (#36)
wazolab Nov 21, 2024
545864e
Setup testing library (#31)
wazolab Nov 21, 2024
39aac0e
Setup lint (#37)
wazolab Nov 21, 2024
d7ef7d9
chore: improve error handling on isFeatureInCluster method #29
wazolab Nov 19, 2024
525a644
test: getFeatureId method #29
wazolab Nov 19, 2024
02b946f
chore: simplify Position to LngLatLike conversion #23
wazolab Nov 19, 2024
57509ed
test: setSelectedFeature method #29
wazolab Nov 20, 2024
1c8c0c4
chore(lint): apply lint rules #30
wazolab Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions .github/actions/setup/action.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
name: Setup Node.js (v20) with Yarn v2 🚀
description: Set up Node.js version 20 and enable Yarn v2 using Corepack

inputs:
node-version:
description: The version of Node.js to set up.
required: true
default: '20'

outputs:
node-version:
description: The version of Node.js that was installed.

runs:
using: composite
steps:
- name: Set up Node.js v${{ inputs.node-version }} 💻
uses: actions/setup-node@v4
with:
node-version: ${{ inputs.node-version }}

- name: Enable Yarn v2 ⚡️
run: |
corepack enable
yarn --version
node --version
shell: bash
105 changes: 105 additions & 0 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
name: 🚀 Test & Deploy Static Content to GitHub Pages

on: push

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
contents: read # Read access to repository contents
pages: write # Write access for deployment to GitHub Pages
id-token: write # Allow GitHub to issue an ID token for authentication

# Allow only one concurrent deployment at a time
concurrency:
group: pages # Group deployments by name for concurrency control
cancel-in-progress: true # Cancel any in-progress deployments if a new one starts

jobs:
# Setup environment and dependencies
setup:
name: 🛠️ Setup Development Environment
runs-on: ubuntu-latest
outputs:
node-modules-path: ${{ steps.cache-dependencies.outputs.cache-hit }}

steps:
- name: Checkout Repository 📥
uses: actions/checkout@v4

- name: Cache Dependencies 📦
uses: actions/cache@v4
id: cache-dependencies
with:
path: node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-node-

- name: Setup Node.js Environment ⚙️
uses: ./.github/actions/setup
with:
node-version: 20

- name: Install Dependencies 🛠️
run: yarn install --immutable
if: steps.cache-dependencies.outputs.cache-hit != 'true' # Only install if cache miss

- name: Run Linter 🧑‍💻
run: yarn lint

tests:
name: 🔍 Execute Unit Tests
needs: setup
runs-on: ubuntu-latest

steps:
- name: Checkout Repository 📥
uses: actions/checkout@v4

- name: Setup Node.js Environment ⚙️
uses: ./.github/actions/setup
with:
node-version: 20

- name: Install Dependencies 🛠️
run: yarn install --immutable

- name: Run Tests 🧪
run: yarn test

deploy:
name: 🚀 Deploy to GitHub Pages
needs: [setup, tests]
if: github.ref == 'refs/heads/main' # Only deploy from the main branch

environment:
name: github-pages # Set deployment environment to GitHub Pages
url: ${{ steps.deployment.outputs.page_url }} # Output page URL

runs-on: ubuntu-latest

steps:
- name: Checkout Repository 📥
uses: actions/checkout@v4

- name: Setup Node.js Environment ⚙️
uses: ./.github/actions/setup
with:
node-version: 20

- name: Install Dependencies 🛠️
run: yarn install --immutable

- name: Build Static Content 🏗️
run: yarn build:demo # Build the static site with Vite

- name: Setup GitHub Pages ⚙️
uses: actions/configure-pages@v4

- name: Upload Build Artifacts 📦
uses: actions/upload-pages-artifact@v3
with:
path: ./dist # Path to the build output directory

- name: Deploy to GitHub Pages 🌐
id: deployment
uses: actions/deploy-pages@v4 # Deploy the build to GitHub Pages
52 changes: 0 additions & 52 deletions .github/workflows/deploy.yml
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
node_modules
dist
coverage/

# Yarn v2
.pnp.*
Expand Down
5 changes: 5 additions & 0 deletions .vscode/extensions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"recommendations": [
"dbaeumer.vscode-eslint"
]
}
50 changes: 50 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{
// Disable the default formatter, use eslint instead
"prettier.enable": false,
"editor.formatOnSave": false,

// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},

// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off", "fixable": true },
{ "rule": "format/*", "severity": "off", "fixable": true },
{ "rule": "*-indent", "severity": "off", "fixable": true },
{ "rule": "*-spacing", "severity": "off", "fixable": true },
{ "rule": "*-spaces", "severity": "off", "fixable": true },
{ "rule": "*-order", "severity": "off", "fixable": true },
{ "rule": "*-dangle", "severity": "off", "fixable": true },
{ "rule": "*-newline", "severity": "off", "fixable": true },
{ "rule": "*quotes", "severity": "off", "fixable": true },
{ "rule": "*semi", "severity": "off", "fixable": true }
],

// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"svelte",
"css",
"less",
"scss",
"pcss",
"postcss"
]
}
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,4 @@ The package is bundled with [Typescript tsc CLI](https://www.typescriptlang.org/

```shell
yarn build
```
```
50 changes: 25 additions & 25 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,49 +30,49 @@ Or use it from CDN
> Set your GeoJson source with `clusterMaxZoom: 22` in order to let the plugin handle cluster/individual marker rendering across all zoom level

```js
import { Map } from "maplibre-gl"
import { TeritorioCluster } from '@teritorio/maplibre-gl-teritorio-cluster'
import { Map } from 'maplibre-gl'

const map = new Map({
container: "map",
container: 'map',
style: {
version: 8,
name: "Empty Style",
metadata: { "maputnik:renderer": "mlgljs" },
name: 'Empty Style',
metadata: { 'maputnik:renderer': 'mlgljs' },
sources: {
points: {
type: "geojson",
type: 'geojson',
cluster: true,
clusterRadius: 80,
clusterMaxZoom: 22, // Required
data: {
type: "FeatureCollection",
type: 'FeatureCollection',
features: [
{
type: "Feature",
type: 'Feature',
properties: { id: 1 },
geometry: { type: "Point", coordinates: [0, 0] }
geometry: { type: 'Point', coordinates: [0, 0] }
},
{
type: "Feature",
type: 'Feature',
properties: { id: 2 },
geometry: { type: "Point", coordinates: [0, 1] }
geometry: { type: 'Point', coordinates: [0, 1] }
}
]
}
}
},
glyphs: "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
glyphs: 'https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf',
layers: [
{
id: "cluster",
type: "circle",
source: "points"
id: 'cluster',
type: 'circle',
source: 'points'
}
],
id: "muks8j3"
id: 'muks8j3'
}
});
})

map.on('load', () => {
const teritorioCluster = new TeritorioCluster(map, 'points', options)
Expand All @@ -84,13 +84,13 @@ map.on('load', () => {
})

// Create whatever HTML element you want as Cluster
const clusterRender = (element: HTMLDivElement, props: MapGeoJSONFeature['properties']): void => {}
function clusterRender(element, props) {}

// Create whatever HTML element you want as individual Marker
const markerRender = (element: HTMLDivElement, feature: MapGeoJSONFeature, markerSize: number): void => {}
function markerRender(element, feature, markerSize) {}

// Create whatever HTML element you want as Pin Marker
const pinMarkerRender = (coords: LngLatLike, offset: Point): Marker => {}
function pinMarkerRender(coords, offset) {}
```

## API
Expand All @@ -117,12 +117,12 @@ Create a new Maplibre GL JS plugin for feature (cluster / individual marker) ren
|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------------|
| clusterMaxZoom | `number` | Maximal zoom level at which we force the rendering of the Unfolded Cluster | ❌ | `17` |
| clusterMinZoom | `number` | Minimal zoom level at which we force the rendering of the Unfolded Cluster | ❌ | `0` |
| clusterRenderFn | `(element: HTMLDivElement, props: MapGeoJSONFeature['properties']): void` | Cluster render function | ❌ | `src/utils/helpers.ts/clusterRenderDefault()` |
| clusterRenderFn | `(element: HTMLDivElement, props: NonNullable<GeoJSON.GeoJsonProperties>): void` | Cluster render function | ❌ | `src/utils/helpers.ts/clusterRenderDefault()` |
| fitBoundsOptions | [`FitBoundsOptions`](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/FitBoundsOptions) | Options for [Map#fitBounds](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#fitbounds) method | ❌ | `{ padding: 20 }` |
| initialFeature | [`MapGeoJSONFeature`](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapGeoJSONFeature/) | Feature to select on initial rendering | ❌ | `undefined` |
| markerRenderFn | `(element: HTMLDivElement, feature: MapGeoJSONFeature, markerSize: number): void` | Individual Marker render function | ❌ | `src/utils/helpers.ts/markerRenderDefault()` |
| initialFeature | [`GeoJSON.Feature`](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/GeoJSON.Feature/) | Feature to select on initial rendering | ❌ | `undefined` |
| markerRenderFn | `(element: HTMLDivElement, feature: GeoJSON.Feature, markerSize: number): void` | Individual Marker render function | ❌ | `src/utils/helpers.ts/markerRenderDefault()` |
| markerSize | `number` (in px) | Size of Marker | ❌ | `24` |
| unfoldedClusterRenderFn | `(parent: HTMLDivElement, items: MapGeoJSONFeature[], markerSize: number, renderMarker: (feature: MapGeoJSONFeature) => HTMLDivElement, clickHandler: (e: Event, feature: MapGeoJSONFeature) => void) => void` | Unfolded Cluster render function | ❌ | `src/utils/helpers.ts/unfoldedClusterRenderSmart()` |
| unfoldedClusterRenderFn | `(parent: HTMLDivElement, items: GeoJSON.Feature[], markerSize: number, renderMarker: (feature: GeoJSON.Feature) => HTMLDivElement, clickHandler: (e: Event, feature: GeoJSON.Feature) => void) => void` | Unfolded Cluster render function | ❌ | `src/utils/helpers.ts/unfoldedClusterRenderSmart()` |
| unfoldedClusterRenderSmart | Mix between Circular and HexaShape shape Unfolded Cluster render function | - | - | - |
| unfoldedClusterRenderGrid | Grid shape Unfolded Cluster render function function | - | - | - |
| unfoldedClusterRenderCircle | Circular shape Unfolded Cluster render function function | - | - | - |
Expand All @@ -133,10 +133,10 @@ Create a new Maplibre GL JS plugin for feature (cluster / individual marker) ren
#### Methods
| Name | Type | Description |
|----------------------|------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------|
| addEventListener | ('feature-click', (e: Event) => void) | Listen to feature click and return a [`MapGeoJSONFeature`](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapGeoJSONFeature/) from `e.detail.selectedFeature` for external control. |
| addEventListener | ('feature-click', (e: Event) => void) | Listen to feature click and return a [`GeoJSON.Feature`](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/GeoJSON.Feature/) from `e.detail.selectedFeature` for external control. |
| resetSelectedFeature | () => void | Remove selected feature and associated Pin Marker |
| setBoundsOptions | (options: [`FitBoundsOptions`](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/FitBoundsOptions)) => void | Update Map's visible area |
| setSelectedFeature | (feature: [`MapGeoJSONFeature`](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapGeoJSONFeature/)) => void | Set selected feature and display Pin Marker on top of it |
| setSelectedFeature | (feature: [`GeoJSON.Feature`](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/GeoJSON.Feature/)) => void | Set selected feature and display Pin Marker on top of it |

## Dev
Install dependencies
Expand Down
7 changes: 7 additions & 0 deletions commitlint.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { UserConfig } from '@commitlint/types'

const Configuration: UserConfig = {
extends: ['@commitlint/config-conventional'],
}

export default Configuration
5 changes: 5 additions & 0 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import antfu from '@antfu/eslint-config'

export default antfu({
type: 'lib',
})
Loading