xhluca / dash-draggable

react-draggable in Python
Other
19 stars 5 forks source link

deltaX/deltaY properties not set when using handler #6

Open SterlingButters opened 5 years ago

SterlingButters commented 5 years ago

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

xhluca commented 5 years ago

Hmm could you try rewriting the app with all components in the layout?

SterlingButters commented 5 years ago

Ill try that out and post back

SterlingButters commented 5 years ago

Issue not resolved but found a workaround for goal - will post PR here soon