What are you trying to do?
Dip my toes into developing a custom tool (tentatively calling it CircleTool). I’m very closely following this → A new custom tool — Bokeh 2.4.3 Documentation . CircleTool takes a CDS containing x,y and r fields.
What I want to have happen when “CircleTool” is active:
→ When user does a mouse wheel/scroll: adjust the ‘r’ field in its CDS. I have this working great.
→ When user moves over the canvas: update the x and y fields in its CDS. I can’t get this to work!
What have you tried that did NOT work as expected?
The issue is I can’t seem to get the MoveEvent to trigger. I’ve followed (what I think) is logical (I even looked at the crosshair tool.ts code here to try and model my attempt here off it: bokeh/crosshair_tool.ts at branch-3.0 · bokeh/bokeh · GitHub but it just simply isn’t happening.
Code:
# -*- coding: utf-8 -*-
from bokeh.core.properties import Instance
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource, Tool, CustomJS
from bokeh.plotting import figure
from bokeh.util.compiler import TypeScript
TS_CODE = """
import {GestureTool, GestureToolView} from "models/tools/gestures/gesture_tool"
import * as p from "core/properties"
import {ScrollEvent, MoveEvent} from "core/ui_events"
import {ColumnDataSource} from "models/sources/column_data_source"
export class CircleToolView extends GestureToolView {
model: CircleTool
//this is executed on scroll
_scroll(ev: ScrollEvent): void {
if (ev.delta<0){
this.model.source.data.r[0] = this.model.source.data.r[0] - (this.model.source.data.r[0]*.05)}
else {this.model.source.data.r[0] = this.model.source.data.r[0]*1.05}
console.log(this.model.source.data.r)
}
//why does this not execute on mousemove?
_move(ev: MoveEvent): void {
console.log('Do Something!')
console.log(ev)
}
}
export namespace CircleTool {
export type Attrs = p.AttrsOf<Props>
export type Props = GestureTool.Props & {
source: p.Property<ColumnDataSource>
}
}
export interface CircleTool extends CircleTool.Attrs {}
export class CircleTool extends GestureTool {
properties: CircleTool.Props
__view_type__: CircleToolView
constructor(attrs?: Partial<CircleTool.Attrs>) {
super(attrs)
}
tool_name = "Circle Tool"
icon = "bk-tool-icon-crosshair"
event_type = "scroll" as "scroll"
default_order = 12
static {
this.prototype.default_view = CircleToolView
this.define<CircleTool.Props>(({Ref}) => ({
source: [ Ref(ColumnDataSource) ],
}))
}
}
"""
class CircleTool(Tool):
__implementation__ = TypeScript(TS_CODE)
source = Instance(ColumnDataSource)
source = ColumnDataSource(data=dict(x=[5], y=[5], r=[5]))
t = CircleTool(source=source)
plot = figure(x_range=(0, 10), y_range=(0, 10), tools=[t])
plot.scatter('x', 'y', source=source)
# plot.js_on_event('tap',CustomJS(args=dict(t=t),code='''console.log(t)''')) #looking at stuff
show(plot)
gif showing the ScrollEvent working like a dream but the MoveEvent not:
What am I missing here?!