79314894

Date: 2024-12-29 02:59:55
Score: 0.5
Natty:
Report link

You need to set the initial render data of the excalidraw component like:

initialData={
            'elements': [],
            'appState': {
                        'viewBackgroundColor': 'transparent',
                        'currentItemFontFamily': 1,
                        'currentItemStrokeColor': '#000000',
                        }
            }

I created dash-excalidrawand found this stackoverflow question while working on a project and started to experiment with options trying to get it to work.

I created a map and a button that triggers a callback that hides / shows the excalidraw component above the website. Looks like this:

Working Image

My code is a bit different than a direct solution as I created a port for excalidraw for python: https://pip-install-python.com/pip/dash_excalidraw

But basically my layout looks like this:

            html.Div([
                # Excalidraw layer
                html.Div(
                    DashExcalidraw(
                        id='excalidraw-simple',
                        width='100%',
                        height='60vh',
                        initialData={
                            'elements': [],
                            'appState': {
                                'viewBackgroundColor': 'transparent',
                                'currentItemFontFamily': 1,
                                'currentItemStrokeColor': '#000000',
                            }
                        }
                    ),
                    id="excalidraw-container",  # Add this ID
style={
            # 'justifyContent': 'center',
            # 'position': 'absolute',
            'top': '0',
            'transform': 'translateX(-50%)',
            'width': '92%',
            'height': '60vh',
            'zIndex': 1,
            'pointerEvents': 'none',
            'opacity': 0,
            'display': 'none',
        }
                ),
                # Map layer
                dl.Map(
                    [
                        TileLayer(),
                        FeatureGroup([edit_control], id="feature_group"),
                        EasyButton(icon="fa-palette", title="color selector", id="color_selector_icon", n_clicks=1),
                        EasyButton(icon="fa-icons", title="emoji selector", id="emoji_selector_icon", n_clicks=1),
                        EasyButton(icon="fa-pencil", title="drawing layer", id="drawing_layer_icon", n_clicks=1)
                        # New button
                    ],
                    center=[51.505, -0.09],
                    zoom=13,
                    style={
                        'height': '60vh',
                        'zIndex': 0,
                        'opacity': 1
                    }
                )
            ], style={'position': 'relative', 'height': '60vh'}),

also check out my repo for creating this excalidraw into dash as you can see the prop initialData and how I use it in this example. https://github.com/pip-install-python/dash_excalidraw/blob/main/src/lib/components/DashExcalidraw.react.js

Reasons:
  • Blacklisted phrase (1): stackoverflow
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Austin K