Skip to content

Add possibility to edit custom shapes#168

Open
lhapaipai wants to merge 11 commits into
geoman-io:masterfrom
DeliaStrat:f/custom-edit
Open

Add possibility to edit custom shapes#168
lhapaipai wants to merge 11 commits into
geoman-io:masterfrom
DeliaStrat:f/custom-edit

Conversation

@lhapaipai

Copy link
Copy Markdown
Contributor

One feature I like in geoman is the great UX when editing circles.

I've seen in your pro version that there is a custom shape Draw mode https://geoman.io/docs/maplibre/draw-modes/draw-custom_shape

In this PR I propose four custom functions to be able to enhance the UX when editing custom shapes.

Context

Some shapes are defined parametrically — for example, a circle stores a center and a radius rather than raw polygon coordinates. When the user drags or rotates such a shape, geoman should update the parametric properties and regenerate the geometry, rather than blindly translating individual polygon vertices.

This PR introduces four optional hooks in settings that allow you to plug this logic into geoman's edit modes.

New options

settings: {
  // Override the markers placed on a custom shape.
  // Return an array of SegmentData, or null to fall back to the default behaviour.
  customGetAllShapeSegments?: (featureData: FeatureData) => SegmentData[] | null;

  // Called when a vertex marker is dragged.
  // Return the updated GeoJSON feature, or null to fall back to the default behaviour.
  customVertexUpdateHandler?: (event: GmEditMarkerMoveEvent) => GeoJsonShapeFeature | null;

  // Called when the shape is dragged.
  // Return the updated GeoJSON feature, or null to fall back to the default behaviour.
  customDragHandler?: (
    featureData: FeatureData,
    lngLatDiff: LngLatDiff,
  ) => GeoJsonShapeFeature | null;

  // Called when the shape is rotated.
  // Return the updated GeoJSON feature, or null to fall back to the default behaviour.
  customRotateHandler?: (
    event: GmEditMarkerMoveEvent,
    shapeCentroid: LngLatTuple,
  ) => GeoJsonShapeFeature | null;
}

Each hook receives the current feature data (and move information where relevant) and must return either the updated GeoJsonShapeFeature or null to fall back to geoman's default behaviour. This makes it easy to handle only the shapes you care about while leaving everything else untouched.

Example — editable star shape

The repository includes a working example in apps/dev/fixtures/customShape.ts that demonstrates all four hooks for a rounded star polygon. The star is stored with three parametric properties (starCenter, starRadius, starAngle):

  • customGetAllShapeSegments — places one vertex marker on each of the 5 tips of the star instead of on every polygon coordinate.
  • customVertexUpdateHandler — when a tip is dragged, recomputes starRadius from the distance between the center and the new cursor position, then regenerates the star geometry.
  • customDragHandler — translates starCenter by the drag offset and regenerates the geometry.
  • customRotateHandler — updates starAngle by the rotation delta and regenerates the geometry.
custom-shape.prepared.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant