Skip to content

deltaX/deltaY properties not set when using handler  #6

@SterlingButters

Description

@SterlingButters

This appears to be the case in the following example where deltaX/deltaY properties always take on value of 0:

import dash
import dash_html_components as html
from dash.dependencies import Output, Input, State
import dash_core_components as dcc
import dash_daq as daq
import dash_draggable as drag

import sd_material_ui

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(external_stylesheets=external_stylesheets)
app.config['suppress_callback_exceptions']=True
# A FlatButton on Paper
app.layout = html.Div([

    drag.dash_draggable(id='dragger',
                        handle='.handle',
                        defaultPosition={'x': 200, 'y': 0},
                        children=[
                            html.Div([
                            sd_material_ui.Paper(children=[
                                sd_material_ui.IconButton(
                                    id='button',
                                    iconClassName='glyphicon glyphicon-menu-hamburger',
                                    iconStyle={'color': 'grey',
                                               'width': 50,
                                               'height': 50,
                                               'position': 'relative',
                                               'top': '2px',
                                               'left': '-12px'},
                                    tooltip='Drag Me', touch=True,
                                    tooltipPosition='bottom-right')],
                                zDepth=3,
                                circle=True,
                                style=dict(height=50,
                                           width=50,
                                           textAlign='center',
                                           position='relative',
                                           display='inline-block',
                                           top='25px',
                                           left='-25px')
                            )], className='handle'),

                            html.Div(id='graph-container')
                        ]),
])


@app.callback(
     Output('graph-container', 'children'),
    [Input('button', 'n_clicks')],
    [State('dragger', 'deltaX'),
     State('dragger', 'deltaY')]
)
def hide_graph(clicks: int, deltaX: int, deltaY: int):
    KNOB = sd_material_ui.Paper(zDepth=1,
                                style=dict(height=625,
                                           width=750),
                                children=[
                                    html.Div([
                                        daq.Knob(
                                            label="Gradient Ranges",
                                            value=7,
                                            size=500,
                                            color={"gradient": True,
                                                   "ranges": {"red": [0, 5], "yellow": [5, 9],
                                                              "green": [9, 10]}},
                                            style=dict(position='relative',
                                                       top='25px',
                                                       left='0px'))
                                    ])
                                ]),

    print(deltaX, deltaY)

    # <Graph Render Logic dependent on deltaX, deltaY>


if __name__ == '__main__':
    app.css.append_css({'external_url': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'})
    app.run_server(debug=True)

Perhaps there are conflicts from coexisting/nested components? Needs evaluation

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedExtra attention is needed

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions