search

stevej2608 / dash-svg

SVG support library for Plotly/Dash
Other
15 stars 3 forks source link

width attribute for Rect #1

Closed ghost closed 2 years ago

ghost commented 2 years ago

I see that width is not a supported attribute of the Rect component in your library.

TypeError: The `dash_svg.Rect` component (version 0.0.8) received an unexpected keyword argument: `width`
Allowed arguments: aria-*, children, className, clipPath, colorInterpolation, colorRendering, data-*, fill, fillOpacity, id, key, loading_state, markerEnd, markerMid, markerStart, mask, n_clicks, n_clicks_timestamp, opacity, paintOrder, pathLength, pointerEvents, requiredFeatures, role, rx, ry, shapeRendering, stroke, strokeDasharray, strokeDashoffset, strokeLinejoin, strokeMiterlimit, strokeOpacity, strokeWidth, systemLanguage, vectorEffect, visibility, x, y

Is there an attribute for this functionality I'm overlooking? For reference, this is the traditional SVG code I'm attempting to replicate:

<rect x="30" y="25.5" width="200" height="400" fill="#000000" stroke="#ff8000" pointer-events="all" />
stevej2608 commented 2 years ago

Thanks for flagging this. I've just had a quick look at the code and it looks like the width attribute has not been included in any of the components. All the components are generated by a few scripts that scrap the component and attribute definitions from developer.mozilla.org. The width attribute has not been picked up. I'll look at reworking the scripts and fix it. In the meantime you may be able to patch the python code your local copy of the library to allow the width attribute to pass - it may work.

stevej2608 commented 2 years ago

@colramos-amd , dash-svg 0.0.9 is on pypi. The SVG Rect element now accepts width & height attributes:

The following snippet, using your attributes, creates a rectangle:

        Svg([
            Rect(x="30", y="25.5", width="200", height="400", fill="#000000", stroke="#ff8000", pointerEvents="all")
        ], viewBox='0 0 841.9 595.3')

I've no idea if SVG pointerEvents work. If not let me know and I'll create an implementation limitations section in the readme.

Cheers, Steve.

ghost commented 2 years ago

Thanks, Steve. Appreciate the help!