studio-variable/geoproject-app
4
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions
116 commits 2 branches 0 tags 12 MiB
Commit graph

3 commits

Author SHA1 Message Date
isUnknown
2b0f4f8742 refactor: comprehensive map-editor plugin refactoring (phases 1-3)
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 18s
Details 
This commit implements a complete refactoring of the map-editor plugin to
improve code organization, reusability, and maintainability.

## Phase 1: Extraction of composables and factory functions

**New composables:**
- `useMarkers.js`: Centralized marker state and CRUD operations
  - Exports: markers, selectedMarkerId, editingMarker refs
  - Computed: canAddMarker, hasMarkers, selectedMarker
  - Methods: addMarker, updateMarker, deleteMarker, selectMarker, etc.
  - Includes createMarker() factory to eliminate code duplication

- `useMapData.js`: Map data persistence (YAML load/save)
  - Exports: center, zoom refs
  - Methods: loadMapData, saveMapData, debouncedSave
  - Handles lifecycle cleanup of debounce timeouts

**Benefits:**
- Eliminated code duplication (2 identical marker creation blocks)
- Separated business logic from UI concerns
- Improved testability with pure functions
- Added JSDoc documentation throughout

## Phase 2: Component extraction

**New components:**
- `MarkerList.vue`: Extracted sidebar UI from MapEditor.vue
  - Props: markers, selectedMarkerId, maxMarkers
  - Emits: add-marker, select-marker, edit-marker, delete-marker, select-location
  - Includes integrated GeocodeSearch component
  - Self-contained styles with scoped CSS

**Benefits:**
- MapEditor.vue reduced from 370 → 230 lines (-40%)
- Clear separation of concerns (orchestration vs presentation)
- Reusable component for potential future use
- Easier to test and maintain

## Phase 3: Utils restructuring with JSDoc

**New structure:**
```
utils/
├── constants.js           # NOMINATIM_API, MAP_DEFAULTS, DEBOUNCE_DELAYS
├── api/
│   └── nominatim.js      # geocode() with full JSDoc typedefs
└── helpers/
    └── debounce.js       # Generic debounce utility
```

**Removed:**
- `utils/geocoding.js` (replaced by modular structure)

**Benefits:**
- Constants centralized for easy configuration
- API layer separated from helpers
- Complete JSDoc type annotations for better IDE support
- Better organization following standard patterns

## Updated components

**MapEditor.vue:**
- Now uses useMarkers and useMapData composables
- Uses MarkerList component instead of inline template
- Cleaner setup function with better separation
- Reduced from 537 → 256 lines (CSS moved to MarkerList)

**GeocodeSearch.vue:**
- Updated imports to use new utils structure
- Uses DEBOUNCE_DELAYS constant instead of hardcoded value

## Build verification

- ✅ npm run build successful
- ✅ Bundle size unchanged (806.10 kB / 223.46 KiB gzipped)
- ✅ All functionality preserved
- ✅ No breaking changes

## Documentation

- Added comprehensive README.md with:
  - Architecture overview
  - Composables usage examples
  - Component API documentation
  - Data flow diagrams
  - Development guide

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-28 16:29:15 +01:00
isUnknown
437349cd2b feat: add Phase 2 features to map-editor plugin (rich marker content)
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 16s
Details 
Implement marker editing modal with comprehensive content management:
- MarkerEditor.vue modal with custom overlay (replaces k-dialog)
- Edit marker on double-click or via edit button in list
- Required fields: title (validated), optional description
- Editable position (lat/lon) and custom icon support
- Content blocks system: add/remove/reorder text and image blocks
- French translations for all UI elements
- Click marker in list to center map on it with smooth animation
- Fix marker anchor to bottom (pin tip) for accurate positioning
- Auto-save with isDirty flag to detect any form changes

Modal features:
- Title field (required)
- Description textarea (optional)
- Position inputs (latitude/longitude)
- Icon selector (default or custom via UUID/filename)
- Content builder with text and image blocks
- Block reordering (up/down) and deletion
- Validation: save button enabled only when title filled and form modified

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-28 16:16:19 +01:00
isUnknown
dc84ff63a2 feat: add map-editor plugin with interactive OSM map and markers
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 19s
Details 
Implement Phase 1 of custom Kirby plugin for editing interactive maps:
- OpenStreetMap base layer with MapLibre GL JS
- Click to add markers, drag to reposition
- Marker list sidebar with selection and deletion
- Auto-save with debounce (YAML format)
- Add marker button creates marker at current map center
- Max 50 markers per map (configurable)
- Clean UI with marker counter

Blueprint updated to use new map-editor field type instead of placeholder.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-28 15:43:23 +01:00