Would like js_on_change event to trigger when panning vs tapping

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))

@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.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.