History

isUnknown 818506fcfa fix: add polling and reset handling for single mode coordinates Enhanced coordinate synchronization in single mode to handle Panel actions like "Supprimer" (reset to saved values). Issues Fixed: - Marker not updating when clicking "Supprimer" button in Panel - Panel "Supprimer" restores saved coordinates but marker didn't move - No detection of programmatic field value changes Solution: - Add MutationObserver to detect attribute changes on input fields - Add 500ms polling as fallback for value detection - Add nextTick() for reactive updates to ensure proper timing - Handle coordinate reset: when invalid, return to default center - Proper cleanup with onBeforeUnmount for observers and intervals Behavior: - User changes field → marker updates immediately - User drags marker → fields update immediately - User clicks "Supprimer" → marker returns to saved position - Fields cleared → marker disappears, map resets to default center Technical Details: - MutationObserver watches 'value' attribute on lat/lon inputs - Polling checks every 500ms for changes missed by events - Watcher uses nextTick() to ensure DOM updates complete - All event listeners and observers properly cleaned up on unmount Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>		2026-01-29 14:34:28 +01:00
..
api	feat: transform map-editor markers into Kirby subpages	2026-01-29 14:08:40 +01:00
assets/icons	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00
src	fix: add polling and reset handling for single mode coordinates	2026-01-29 14:34:28 +01:00
index.css	feat: transform map-editor markers into Kirby subpages	2026-01-29 14:08:40 +01:00
index.js	fix: add polling and reset handling for single mode coordinates	2026-01-29 14:34:28 +01:00
index.php	feat: transform map-editor markers into Kirby subpages	2026-01-29 14:08:40 +01:00
package-lock.json	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00
package.json	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00
README.md	refactor: comprehensive map-editor plugin refactoring (phases 1-3)	2026-01-28 16:29:15 +01:00

README.md

Kirby Map Editor Plugin

Plugin d'édition de cartes interactives pour Kirby CMS avec marqueurs enrichis et géocodage.

Structure du code

map-editor/
├── index.php                   # Enregistrement du plugin Kirby
├── lib/fields/
│   └── map-editor.php         # Définition du champ custom
├── src/
│   ├── index.js               # Entry point
│   ├── composables/           # Logique métier réutilisable
│   │   ├── useMarkers.js     # Gestion des marqueurs (CRUD)
│   │   └── useMapData.js     # Gestion des données YAML
│   ├── components/
│   │   ├── field/
│   │   │   └── MapEditor.vue # Composant principal (orchestrateur)
│   │   └── map/
│   │       ├── MapPreview.vue    # Carte MapLibre interactive
│   │       ├── MarkerList.vue    # Liste des marqueurs (sidebar)
│   │       ├── MarkerEditor.vue  # Modal d'édition de marqueur
│   │       └── GeocodeSearch.vue # Recherche d'adresse
│   └── utils/
│       ├── constants.js       # Constantes globales
│       ├── api/
│       │   └── nominatim.js  # Client API Nominatim
│       └── helpers/
│           └── debounce.js   # Fonction de debounce
├── package.json
└── README.md

Composables

useMarkers

Gère l'état et les opérations CRUD sur les marqueurs.

Utilisation : ```javascript import { useMarkers } from '../../composables/useMarkers.js';

const { markers, selectedMarkerId, canAddMarker, addMarker, deleteMarker, } = useMarkers({ maxMarkers: 50 }); ```

useMapData

Gère le chargement/sauvegarde des données de carte en YAML.

Utilisation : ```javascript import { useMapData } from '../../composables/useMapData.js';

const { center, zoom, loadMapData, debouncedSave } = useMapData({ defaultCenter: { lat: 43.836699, lon: 4.360054 }, defaultZoom: 13, onSave: (yamlString) => emit('input', yamlString), }); ```

Build

```bash npm install npm run build ```

Build avec Kirbyup → `/index.js` et `/index.css`

Avantages du refactoring

Réutilisabilité : Composables utilisables dans d'autres composants
Testabilité : Fonctions pures testables indépendamment
Maintenabilité : Code organisé par responsabilité
Lisibilité : MapEditor réduit de 370 → 230 lignes
Performance : Auto-save optimisé

Technologies

Vue 3 Composition API
MapLibre GL JS 3.6+
Nominatim API (OpenStreetMap)
js-yaml pour parsing YAML