Would like js_on_change event to trigger when panning vs tapping

Community Support
1

I am using PolyEdit with a polygon. When double tapped red circles appear as 3 verticies. Also coordinates show in div below the figure. Upon dragging a vertex and then tapping the polygon again, the updated coordinates appear in the div.

issue 1 - I would like the div results to change while dragging instead of having to retap the figure. I tried PanEnd event but am lost on how to do.

issue 2 - after drag I would like the new coordinates to show with only 2 decimal places instead of 15 places

thanks in advance for your help and past help

from bokeh.plotting import column, figure, output_file, show
from bokeh.models import ColumnDataSource, Div, CustomJS
from bokeh.models import PolyDrawTool, PolyEditTool
from bokeh.events import PanEnd

p = figure(x_range=(0, 10), y_range=(0, 10), width=400, height=400,
           title='Poly Edit Tool')

ds = ColumnDataSource(data=dict(xs=[[1.01, 2.00, 3.00]], ys=[[3.01, 5.00, 2.00]] ))

p1 = p.patches([], [], fill_alpha=0.4)
p2 = p.patches('xs', 'ys', source=ds, fill_color='green', fill_alpha=0.4)
c1 = p.circle([], [], size=20, color='red')

draw_tool = PolyDrawTool(renderers=[p1, p2])
edit_tool = PolyEditTool(renderers=[p1, p2], vertex_renderer=c1)
p.add_tools(draw_tool, edit_tool)
p.toolbar.active_drag = edit_tool

div = Div()

callback = CustomJS(args=dict(source=ds, div=div), code="""
var selectedIndex = source.selected.indices;
    for (var i = 0; i < selectedIndex.length; i++) {
        div.text = `x1 x2 x3 =  ${source.data['xs'][selectedIndex[i]]}`+` and y1 y2 y3 =  ${source.data['ys'][selectedIndex[i]]}`
        let xx = `${source.data['xs'][selectedIndex[i]]}`
        let yy = `${source.data['ys'][selectedIndex[i]]}`
        let x1 = parseInt(xx[0])
        let x1a = x1.toFixed(2)
        console.log(x1a)
        }
""")

ds.selected.js_on_change('indices', callback)
#p2.js_on_event(PanEnd, callback)

#show(p,div)
show(column(p,div))
2

@RickD I would change the CDS callback to be activated on data change

ds.js_on_change('data', callback)

and rewrite the callback itself to

callback = CustomJS(args=dict(source=ds, div=div), code="""
//var selectedIndex = source.selected.indices;
//console.log(selectedIndex);
var txt = '';
const patch = 0;
for (var i = 0; i < source.data.xs[patch].length; i++) {
  const x = source.data['xs'][patch][i];
  const y = source.data['ys'][patch][i];
  
  txt += `x${i} = ${x.toFixed(2)}, `;
  txt += `y${i} = ${y.toFixed(2)}<br>`;
}
div.text = txt;
""")

I do not have much experience with PolyEditTool. I do not know how to get information about which patch is being altered. console.log(source.selected.index) returns empty array.