Skip to content

Commit

Permalink
improved ant_path and AntPath component to support color, pulseColor,…
Browse files Browse the repository at this point in the history 
… delay, weight, dashArray callback dynamic changes
  • Loading branch information
@pip-install-python
pip-install-python committed Dec 23, 2024
1 parent 1114d49 commit 06fd3f2
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 105 deletions.
27 changes: 3 additions & 24 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 38 additions & 2 deletions src/ts/components/AntPath.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,28 @@ import { LayerProps } from '@react-leaflet/core';
import L from 'leaflet';
import 'leaflet-ant-path';

// Extend PathOptions to include AntPath specific options
declare module 'leaflet' {
interface PathOptions {
pulseColor?: string;
delay?: number;
hardwareAccelerated?: boolean;
paused?: boolean;
reverse?: boolean;
}

namespace Polyline {
class AntPath extends L.Polyline {
constructor(path: L.LatLngExpression[] | L.LatLngExpression[][], options?: any);
constructor(path: L.LatLngExpression[] | L.LatLngExpression[][], options?: PathOptions);
pause(): boolean;
resume(): boolean;
reverse(): this;
map(callback: (latlng: L.LatLng) => L.LatLng): AntPath;
setStyle(options: PathOptions): this;
}
}
namespace polyline {
function antPath(path: L.LatLngExpression[] | L.LatLngExpression[][], options?: any): L.Polyline.AntPath;
function antPath(path: L.LatLngExpression[] | L.LatLngExpression[][], options?: PathOptions): L.Polyline.AntPath;
}
}

Expand Down Expand Up @@ -135,6 +145,31 @@ const AntPath = createLayerComponent<L.Polyline.AntPath, Props>(
layer.setLatLngs(props.positions);
}

// Create a single style update object
const styleUpdates: L.PathOptions = {};

if (props.color !== prevProps.color) {
styleUpdates.color = props.color;
}
if (props.pulseColor !== prevProps.pulseColor) {
styleUpdates.pulseColor = props.pulseColor;
}
if (props.weight !== prevProps.weight) {
styleUpdates.weight = props.weight;
}
if (props.dashArray !== prevProps.dashArray) {
styleUpdates.dashArray = props.dashArray;
}
if (props.delay !== prevProps.delay) {
styleUpdates.delay = props.delay;
}

// Apply style updates if there are any
if (Object.keys(styleUpdates).length > 0) {
layer.setStyle(styleUpdates);
}

// Handle pause/resume
if (props.paused !== prevProps.paused) {
if (props.paused) {
layer.pause();
Expand All @@ -143,6 +178,7 @@ const AntPath = createLayerComponent<L.Polyline.AntPath, Props>(
}
}

// Handle reverse
if (props.reverse !== prevProps.reverse) {
layer.reverse();
}
Expand Down
157 changes: 78 additions & 79 deletions tests/components/ant_path.py
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from dash import Dash, html, dcc, callback, Output, Input, State
from dash_leaflet import AntPath, TileLayer, MapContainer
from dash_mantine_components import ColorPicker, Button, NumberInput, Stack, Grid, Switch, GridCol
from dash_leaflet import AntPath, TileLayer, MapContainer, Marker, Popup
from dash_mantine_components import ColorPicker, Button, NumberInput, Stack, Grid, Switch, GridCol, Group
import math
from tests.stubs import app_stub

Expand Down Expand Up @@ -72,7 +72,7 @@ def create_curve_path(start, control, end, num_points=32):
delay=800,
weight=10,
dashArray=[1, 100], # Add default dashArray
children="Polyline Path"
children="Polygon Path"
),
# Polygon AntPath
AntPath(
Expand Down Expand Up @@ -125,88 +125,87 @@ def create_curve_path(start, control, end, num_points=32):
GridCol([
# Modify the Stack in your layout to include these controls:
Stack([
# html.Label('Base Color'),
# ColorPicker(id='color-picker', value='#0000FF'),
# html.Label('Pulse Color'),
# ColorPicker(id='pulse-color-picker', value='#FFFFFF'),
# html.Label('Animation Delay (ms)'),
# NumberInput(id='delay-input', value=400, min=100, max=2000, step=100),
# html.Label('Line Weight'),
# NumberInput(id='weight-input', value=3, min=1, max=10),
# html.Label('Dash Array Size'),
# Grid([
# GridCol([
# NumberInput(id='dash-size-input', value=10, min=1, max=50, label="Dash Size"),
# ], span=6),
# GridCol([
# NumberInput(id='gap-size-input', value=20, min=1, max=50, label="Gap Size"),
# ], span=6),
# ]),
Switch(id='pause-switch', label='Pause Animation'),
Switch(id='reverse-switch', label='Reverse Animation'),
Group([
Stack([html.Label('Base Color'),
ColorPicker(id='color-picker', value='#0000FF'),]),
Stack([html.Label('Pulse Color'),
ColorPicker(id='pulse-color-picker', value='#FFFFFF')]),
Stack([
NumberInput(id='delay-input', value=400, min=100, max=2000, step=100, label="Delay"),
NumberInput(id='weight-input', value=3, min=1, max=10, label="Line Weight"),
]),
Stack([
NumberInput(id='dash-size-input', value=10, min=1, max=50, label="Dash Size"),
NumberInput(id='gap-size-input', value=20, min=1, max=50, label="Gap Size"),
]),
Stack([
Switch(id='pause-switch', label='Pause Animation'),
Switch(id='reverse-switch', label='Reverse Animation'),
]),
], grow=True),
])
], span=3)
], span=12)
], style={'padding': '20px'})

]))


# @callback(
# [Output('antpath-polyline', 'color'),
# Output('antpath-polygon', 'color'),
# Output('antpath-rectangle', 'color'),
# Output('antpath-circle', 'color'),
# Output('antpath-curve', 'color')],
# Input('color-picker', 'value')
# )
# def update_color(color):
# return [color] * 5
#
# @callback(
# [Output('antpath-polyline', 'pulseColor'),
# Output('antpath-polygon', 'pulseColor'),
# Output('antpath-rectangle', 'pulseColor'),
# Output('antpath-circle', 'pulseColor'),
# Output('antpath-curve', 'pulseColor')],
# Input('pulse-color-picker', 'value')
# )
# def update_pulse_color(color):
# return [color] * 5
#
# @callback(
# [Output('antpath-polyline', 'delay'),
# Output('antpath-polygon', 'delay'),
# Output('antpath-rectangle', 'delay'),
# Output('antpath-circle', 'delay'),
# Output('antpath-curve', 'delay')],
# Input('delay-input', 'value')
# )
# def update_delay(delay):
# return [delay] * 5
#
# @callback(
# [Output('antpath-polyline', 'weight'),
# Output('antpath-polygon', 'weight'),
# Output('antpath-rectangle', 'weight'),
# Output('antpath-circle', 'weight'),
# Output('antpath-curve', 'weight')],
# Input('weight-input', 'value')
# )
# def update_weight(weight):
# return [weight] * 5
#
# @callback(
# [Output('antpath-polyline', 'dashArray'),
# Output('antpath-polygon', 'dashArray'),
# Output('antpath-rectangle', 'dashArray'),
# Output('antpath-circle', 'dashArray'),
# Output('antpath-curve', 'dashArray')],
# [Input('dash-size-input', 'value'),
# Input('gap-size-input', 'value')]
# )
# def update_dash_array(dash_size, gap_size):
# dash_array = [dash_size, gap_size]
# return [dash_array] * 5
@callback(
[Output('antpath-polyline', 'color'),
Output('antpath-polygon', 'color'),
Output('antpath-rectangle', 'color'),
Output('antpath-circle', 'color'),
Output('antpath-curve', 'color')],
Input('color-picker', 'value')
)
def update_color(color):
return [color] * 5

@callback(
[Output('antpath-polyline', 'pulseColor'),
Output('antpath-polygon', 'pulseColor'),
Output('antpath-rectangle', 'pulseColor'),
Output('antpath-circle', 'pulseColor'),
Output('antpath-curve', 'pulseColor')],
Input('pulse-color-picker', 'value')
)
def update_pulse_color(color):
return [color] * 5

@callback(
[Output('antpath-polyline', 'delay'),
Output('antpath-polygon', 'delay'),
Output('antpath-rectangle', 'delay'),
Output('antpath-circle', 'delay'),
Output('antpath-curve', 'delay')],
Input('delay-input', 'value')
)
def update_delay(delay):
return [delay] * 5

@callback(
[Output('antpath-polyline', 'weight'),
Output('antpath-polygon', 'weight'),
Output('antpath-rectangle', 'weight'),
Output('antpath-circle', 'weight'),
Output('antpath-curve', 'weight')],
Input('weight-input', 'value')
)
def update_weight(weight):
return [weight] * 5

@callback(
[Output('antpath-polyline', 'dashArray'),
Output('antpath-polygon', 'dashArray'),
Output('antpath-rectangle', 'dashArray'),
Output('antpath-circle', 'dashArray'),
Output('antpath-curve', 'dashArray')],
[Input('dash-size-input', 'value'),
Input('gap-size-input', 'value')]
)
def update_dash_array(dash_size, gap_size):
dash_array = [dash_size, gap_size]
return [dash_array] * 5

@callback(
[Output('antpath-polyline', 'paused'),
Expand Down

0 comments on commit 06fd3f2

Please sign in to comment.