feat: add RotationSignal for reactive marker rotation (#14)
All checks were successful
CI / Build and Test (push) Successful in 37s
All checks were successful
CI / Build and Test (push) Successful in 37s
This commit was merged in pull request #14.
This commit is contained in:
@@ -172,19 +172,21 @@ func main() {
|
|||||||
|
|
||||||
// Animated container ships following waypoint routes
|
// Animated container ships following waypoint routes
|
||||||
shipNames := [3]string{"MSC Adriatica", "Evergreen Harmony", "Maersk Aurora"}
|
shipNames := [3]string{"MSC Adriatica", "Evergreen Harmony", "Maersk Aurora"}
|
||||||
type shipSignals struct{ lng, lat *via.Signal }
|
type shipSignals struct{ lng, lat, rot *via.Signal }
|
||||||
var ships [3]shipSignals
|
var ships [3]shipSignals
|
||||||
|
|
||||||
fleet.mu.RLock()
|
fleet.mu.RLock()
|
||||||
for i, s := range fleet.ships {
|
for i, s := range fleet.ships {
|
||||||
ships[i].lng = c.Signal(s.lng)
|
ships[i].lng = c.Signal(s.lng)
|
||||||
ships[i].lat = c.Signal(s.lat)
|
ships[i].lat = c.Signal(s.lat)
|
||||||
|
// SVG bow points right (east), so subtract 90° from the north-based heading.
|
||||||
|
ships[i].rot = c.Signal(s.heading() - 90)
|
||||||
m.AddMarker(fmt.Sprintf("ship-%d", i), maplibre.Marker{
|
m.AddMarker(fmt.Sprintf("ship-%d", i), maplibre.Marker{
|
||||||
LngSignal: ships[i].lng,
|
LngSignal: ships[i].lng,
|
||||||
LatSignal: ships[i].lat,
|
LatSignal: ships[i].lat,
|
||||||
|
RotationSignal: ships[i].rot,
|
||||||
Element: shipSVG,
|
Element: shipSVG,
|
||||||
Anchor: "center",
|
Anchor: "center",
|
||||||
Rotation: s.heading(),
|
|
||||||
Popup: &maplibre.Popup{
|
Popup: &maplibre.Popup{
|
||||||
Content: fmt.Sprintf("<strong>%s</strong>", shipNames[i]),
|
Content: fmt.Sprintf("<strong>%s</strong>", shipNames[i]),
|
||||||
},
|
},
|
||||||
@@ -216,6 +218,7 @@ func main() {
|
|||||||
for i, s := range fleet.ships {
|
for i, s := range fleet.ships {
|
||||||
ships[i].lng.SetValue(s.lng)
|
ships[i].lng.SetValue(s.lng)
|
||||||
ships[i].lat.SetValue(s.lat)
|
ships[i].lat.SetValue(s.lat)
|
||||||
|
ships[i].rot.SetValue(s.heading() - 90)
|
||||||
}
|
}
|
||||||
fleet.mu.RUnlock()
|
fleet.mu.RUnlock()
|
||||||
|
|
||||||
|
|||||||
@@ -195,7 +195,9 @@ func markerBodyJS(mapID, markerID string, mk Marker) string {
|
|||||||
if mk.Anchor != "" {
|
if mk.Anchor != "" {
|
||||||
opts += fmt.Sprintf(`anchor:%s,`, jsonStr(mk.Anchor))
|
opts += fmt.Sprintf(`anchor:%s,`, jsonStr(mk.Anchor))
|
||||||
}
|
}
|
||||||
if mk.Rotation != 0 {
|
if mk.RotationSignal != nil {
|
||||||
|
opts += fmt.Sprintf(`rotation:%s,`, mk.RotationSignal.String())
|
||||||
|
} else if mk.Rotation != 0 {
|
||||||
opts += fmt.Sprintf(`rotation:%s,`, formatFloat(mk.Rotation))
|
opts += fmt.Sprintf(`rotation:%s,`, formatFloat(mk.Rotation))
|
||||||
}
|
}
|
||||||
if mk.Draggable {
|
if mk.Draggable {
|
||||||
@@ -250,14 +252,21 @@ func dragendHandlerJS(mapID, markerID string, mk Marker) string {
|
|||||||
func markerEffectExpr(mapID, markerID string, mk Marker) string {
|
func markerEffectExpr(mapID, markerID string, mk Marker) string {
|
||||||
// Read signals before the guard so Datastar tracks them as dependencies
|
// Read signals before the guard so Datastar tracks them as dependencies
|
||||||
// even when the map/marker hasn't loaded yet on first evaluation.
|
// even when the map/marker hasn't loaded yet on first evaluation.
|
||||||
return fmt.Sprintf(
|
var b strings.Builder
|
||||||
`var lng=$%s,lat=$%s;`+
|
b.WriteString(fmt.Sprintf(`var lng=$%s,lat=$%s;`, mk.LngSignal.ID(), mk.LatSignal.ID()))
|
||||||
|
if mk.RotationSignal != nil {
|
||||||
|
b.WriteString(fmt.Sprintf(`var rot=$%s;`, mk.RotationSignal.ID()))
|
||||||
|
}
|
||||||
|
b.WriteString(fmt.Sprintf(
|
||||||
`var m=window.__via_maps&&window.__via_maps[%s];`+
|
`var m=window.__via_maps&&window.__via_maps[%s];`+
|
||||||
`if(m&&m._via_markers[%s]){`+
|
`if(m&&m._via_markers[%[2]s]){`+
|
||||||
`m._via_markers[%s].setLngLat([lng,lat])}`,
|
`m._via_markers[%[2]s].setLngLat([lng,lat])`,
|
||||||
mk.LngSignal.ID(), mk.LatSignal.ID(),
|
jsonStr(mapID), jsonStr(markerID)))
|
||||||
jsonStr(mapID), jsonStr(markerID), jsonStr(markerID),
|
if mk.RotationSignal != nil {
|
||||||
)
|
b.WriteString(fmt.Sprintf(`;m._via_markers[%s].setRotation(rot)`, jsonStr(markerID)))
|
||||||
|
}
|
||||||
|
b.WriteString(`}`)
|
||||||
|
return b.String()
|
||||||
}
|
}
|
||||||
|
|
||||||
// addMarkerJS generates a self-contained IIFE to add a marker post-render.
|
// addMarkerJS generates a self-contained IIFE to add a marker post-render.
|
||||||
|
|||||||
@@ -122,13 +122,18 @@ func (m *Map) Element(extra ...h.H) h.H {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hidden inputs for signal-backed marker position writeback (drag → signal)
|
// Hidden inputs for signal-backed marker position/rotation writeback
|
||||||
for _, me := range m.markers {
|
for _, me := range m.markers {
|
||||||
if me.marker.LngSignal != nil && me.marker.LatSignal != nil {
|
if me.marker.LngSignal != nil && me.marker.LatSignal != nil {
|
||||||
children = append(children,
|
children = append(children,
|
||||||
h.Input(h.Type("hidden"), me.marker.LngSignal.Bind()),
|
h.Input(h.Type("hidden"), me.marker.LngSignal.Bind()),
|
||||||
h.Input(h.Type("hidden"), me.marker.LatSignal.Bind()),
|
h.Input(h.Type("hidden"), me.marker.LatSignal.Bind()),
|
||||||
)
|
)
|
||||||
|
if me.marker.RotationSignal != nil {
|
||||||
|
children = append(children,
|
||||||
|
h.Input(h.Type("hidden"), me.marker.RotationSignal.Bind()),
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -313,6 +313,7 @@ type Marker struct {
|
|||||||
Anchor string
|
Anchor string
|
||||||
|
|
||||||
// Rotation is clockwise degrees. Useful for directional icons (ships, vehicles).
|
// Rotation is clockwise degrees. Useful for directional icons (ships, vehicles).
|
||||||
|
// Ignored when RotationSignal is set.
|
||||||
Rotation float64
|
Rotation float64
|
||||||
|
|
||||||
// Signal-backed position. When set, signals drive marker position reactively.
|
// Signal-backed position. When set, signals drive marker position reactively.
|
||||||
@@ -320,6 +321,9 @@ type Marker struct {
|
|||||||
// If Draggable is true, drag updates write back to these signals.
|
// If Draggable is true, drag updates write back to these signals.
|
||||||
LngSignal *via.Signal
|
LngSignal *via.Signal
|
||||||
LatSignal *via.Signal
|
LatSignal *via.Signal
|
||||||
|
|
||||||
|
// RotationSignal drives marker rotation reactively. When set, Rotation is ignored.
|
||||||
|
RotationSignal *via.Signal
|
||||||
}
|
}
|
||||||
|
|
||||||
// Popup describes a map popup.
|
// Popup describes a map popup.
|
||||||
|
|||||||
Reference in New Issue
Block a user