From 486f18eb8ae5cef6f2c4f597cad3fc442ba928fb Mon Sep 17 00:00:00 2001 From: ChinoUkaegbu <77782533+ChinoUkaegbu@users.noreply.github.com> Date: Fri, 20 Sep 2024 12:20:39 +0100 Subject: [PATCH 1/7] add svg line to media.py --- reflex/components/el/elements/media.py | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/reflex/components/el/elements/media.py b/reflex/components/el/elements/media.py index 7052335320..d6c3e6cfab 100644 --- a/reflex/components/el/elements/media.py +++ b/reflex/components/el/elements/media.py @@ -317,6 +317,20 @@ class Svg(BaseHTML): xmlns: Var[str] +class Line(BaseHTML): + """The SVG line component.""" + + tag = "line" + # The x-axis coordinate of the start of the line. + x1: Var[Union[str, int]] + # The y-axis coordinate of the start of the line. + y1: Var[Union[str, int]] + # The x-axis coordinate of the end of the line. + x2: Var[Union[str, int]] + # The y-axis coordinate of the end of the line. + y2: Var[Union[str, int]] + + class Circle(BaseHTML): """The SVG circle component.""" @@ -421,6 +435,7 @@ class Path(BaseHTML): class SVG(ComponentNamespace): """SVG component namespace.""" + line = staticmethod(Line.create) circle = staticmethod(Circle.create) rect = staticmethod(Rect.create) polygon = staticmethod(Polygon.create) From e3ffc89935f2ea315f4420b0559379d5393b61da Mon Sep 17 00:00:00 2001 From: ChinoUkaegbu <77782533+ChinoUkaegbu@users.noreply.github.com> Date: Fri, 20 Sep 2024 12:26:10 +0100 Subject: [PATCH 2/7] add svg ellipse to media.py --- reflex/components/el/elements/media.py | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/reflex/components/el/elements/media.py b/reflex/components/el/elements/media.py index d6c3e6cfab..6766b164d3 100644 --- a/reflex/components/el/elements/media.py +++ b/reflex/components/el/elements/media.py @@ -345,6 +345,20 @@ class Circle(BaseHTML): path_length: Var[int] +class Ellipse(BaseHTML): + """The SVG ellipse component.""" + + tag = "ellipse" + # The x-axis coordinate of the center of the ellipse. + cx: Var[Union[str, int]] + # The y-axis coordinate of the center of the ellipse. + cy: Var[Union[str, int]] + # The x-axis radius of the ellipse. + rx: Var[Union[str, int]] + # The y-axis radius of the ellipse. + ry: Var[Union[str, int]] + + class Rect(BaseHTML): """The SVG rect component.""" @@ -437,6 +451,7 @@ class SVG(ComponentNamespace): line = staticmethod(Line.create) circle = staticmethod(Circle.create) + ellipse = staticmethod(Ellipse.create) rect = staticmethod(Rect.create) polygon = staticmethod(Polygon.create) path = staticmethod(Path.create) From c43064d21d774efc820c460aa65f27a81626b93a Mon Sep 17 00:00:00 2001 From: ChinoU Date: Sat, 21 Sep 2024 10:02:47 +0100 Subject: [PATCH 3/7] add svg ellipse and line to media.pyi as well --- reflex/components/el/elements/media.py | 22 ++- reflex/components/el/elements/media.pyi | 234 ++++++++++++++++++++++++ 2 files changed, 247 insertions(+), 9 deletions(-) diff --git a/reflex/components/el/elements/media.py b/reflex/components/el/elements/media.py index 6766b164d3..40d5fa35b7 100644 --- a/reflex/components/el/elements/media.py +++ b/reflex/components/el/elements/media.py @@ -321,14 +321,16 @@ class Line(BaseHTML): """The SVG line component.""" tag = "line" - # The x-axis coordinate of the start of the line. + # The x-axis coordinate of the line starting point. x1: Var[Union[str, int]] - # The y-axis coordinate of the start of the line. - y1: Var[Union[str, int]] - # The x-axis coordinate of the end of the line. + # The x-axis coordinate of the the line ending point. x2: Var[Union[str, int]] - # The y-axis coordinate of the end of the line. + # The y-axis coordinate of the line starting point. + y1: Var[Union[str, int]] + # The y-axis coordinate of the the line ending point. y2: Var[Union[str, int]] + # The total path length, in user units. + path_length: Var[int] class Circle(BaseHTML): @@ -349,14 +351,16 @@ class Ellipse(BaseHTML): """The SVG ellipse component.""" tag = "ellipse" - # The x-axis coordinate of the center of the ellipse. + # The x position of the center of the ellipse. cx: Var[Union[str, int]] - # The y-axis coordinate of the center of the ellipse. + # The y position of the center of the ellipse. cy: Var[Union[str, int]] - # The x-axis radius of the ellipse. + # The radius of the ellipse on the x axis. rx: Var[Union[str, int]] - # The y-axis radius of the ellipse. + # The radius of the ellipse on the y axis. ry: Var[Union[str, int]] + # The total length for the ellipse's circumference, in user units. + path_length: Var[int] class Rect(BaseHTML): diff --git a/reflex/components/el/elements/media.pyi b/reflex/components/el/elements/media.pyi index 6d05fe69f4..db241c596d 100644 --- a/reflex/components/el/elements/media.pyi +++ b/reflex/components/el/elements/media.pyi @@ -1550,6 +1550,122 @@ class Svg(BaseHTML): """ ... +class Line(BaseHTML): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + x1: Optional[Union[Var[Union[int, str]], int, str]] = None, + x2: Optional[Union[Var[Union[int, str]], int, str]] = None, + y1: Optional[Union[Var[Union[int, str]], int, str]] = None, + y2: Optional[Union[Var[Union[int, str]], int, str]] = None, + path_length: Optional[Union[Var[int], int]] = None, + access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + auto_capitalize: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + content_editable: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + context_menu: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + dir: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + draggable: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + enter_key_hint: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + hidden: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + input_mode: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + item_prop: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + lang: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + role: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + slot: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + spell_check: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + tab_index: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + title: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, Union[Var, str]]] = None, + on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + **props, + ) -> "Line": + """Create the component. + + Args: + *children: The children of the component. + x1: The x-axis coordinate of the line starting point. + x2: The x-axis coordinate of the line ending point. + y1: The y-axis coordinate of the line starting point. + y2: The y-axis coordinate of the line ending point. + path_length: The total path length, in user units. + access_key: Provides a hint for generating a keyboard shortcut for the current element. + auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user. + content_editable: Indicates whether the element's content is editable. + context_menu: Defines the ID of a element which will serve as the element's context menu. + dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left) + draggable: Defines whether the element can be dragged. + enter_key_hint: Hints what media types the media element is able to play. + hidden: Defines whether the element is hidden. + input_mode: Defines the type of the element. + item_prop: Defines the name of the element for metadata purposes. + lang: Defines the language used in the element. + role: Defines the role of the element. + slot: Assigns a slot in a shadow DOM shadow tree to an element. + spell_check: Defines whether the element may be checked for spelling errors. + tab_index: Defines the position of the current element in the tabbing order. + title: Defines a tooltip for the element. + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props of the component. + + Returns: + The component. + """ + ... + class Circle(BaseHTML): @overload @classmethod @@ -1664,6 +1780,122 @@ class Circle(BaseHTML): """ ... +class Ellipse(BaseHTML): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + cx: Optional[Union[Var[Union[int, str]], int, str]] = None, + cy: Optional[Union[Var[Union[int, str]], int, str]] = None, + rx: Optional[Union[Var[Union[int, str]], int, str]] = None, + ry: Optional[Union[Var[Union[int, str]], int, str]] = None, + path_length: Optional[Union[Var[int], int]] = None, + access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + auto_capitalize: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + content_editable: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + context_menu: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + dir: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + draggable: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + enter_key_hint: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + hidden: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + input_mode: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + item_prop: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + lang: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + role: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + slot: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + spell_check: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + tab_index: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + title: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, Union[Var, str]]] = None, + on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + **props, + ) -> "Ellipse": + """Create the component. + + Args: + *children: The children of the component. + cx: The x position of the center of the ellipse. + cy: The y position of the center of the ellipse. + rx: The radius of the ellipse on the x axis. + ry: The radius of the ellipse on the y axis. + path_length: The total length for the ellipse's circumference, in user units. + access_key: Provides a hint for generating a keyboard shortcut for the current element. + auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user. + content_editable: Indicates whether the element's content is editable. + context_menu: Defines the ID of a element which will serve as the element's context menu. + dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left) + draggable: Defines whether the element can be dragged. + enter_key_hint: Hints what media types the media element is able to play. + hidden: Defines whether the element is hidden. + input_mode: Defines the type of the element. + item_prop: Defines the name of the element for metadata purposes. + lang: Defines the language used in the element. + role: Defines the role of the element. + slot: Assigns a slot in a shadow DOM shadow tree to an element. + spell_check: Defines whether the element may be checked for spelling errors. + tab_index: Defines the position of the current element in the tabbing order. + title: Defines a tooltip for the element. + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props of the component. + + Returns: + The component. + """ + ... + class Rect(BaseHTML): @overload @classmethod @@ -2345,7 +2577,9 @@ class Path(BaseHTML): ... class SVG(ComponentNamespace): + line = staticmethod(Line.create) circle = staticmethod(Circle.create) + ellipse = staticmethod(Ellipse.create) rect = staticmethod(Rect.create) polygon = staticmethod(Polygon.create) path = staticmethod(Path.create) From de1864a0215dacc502115c72b539a0042ae6777d Mon Sep 17 00:00:00 2001 From: ChinoU Date: Thu, 26 Sep 2024 15:05:46 +0100 Subject: [PATCH 4/7] refresh pyi files --- reflex/components/el/elements/media.pyi | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/reflex/components/el/elements/media.pyi b/reflex/components/el/elements/media.pyi index db241c596d..1e645c32dd 100644 --- a/reflex/components/el/elements/media.pyi +++ b/reflex/components/el/elements/media.pyi @@ -1633,9 +1633,9 @@ class Line(BaseHTML): Args: *children: The children of the component. x1: The x-axis coordinate of the line starting point. - x2: The x-axis coordinate of the line ending point. + x2: The x-axis coordinate of the the line ending point. y1: The y-axis coordinate of the line starting point. - y2: The y-axis coordinate of the line ending point. + y2: The y-axis coordinate of the the line ending point. path_length: The total path length, in user units. access_key: Provides a hint for generating a keyboard shortcut for the current element. auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user. From 74163102566a38db4c60e6ef1946f6e9b70bbd3d Mon Sep 17 00:00:00 2001 From: ChinoU Date: Thu, 26 Sep 2024 19:55:08 +0100 Subject: [PATCH 5/7] add svg radialGradient to media.py and media.pyi --- reflex/components/el/elements/media.py | 34 +++++++ reflex/components/el/elements/media.pyi | 125 ++++++++++++++++++++++++ 2 files changed, 159 insertions(+) diff --git a/reflex/components/el/elements/media.py b/reflex/components/el/elements/media.py index 40d5fa35b7..fb9aa94133 100644 --- a/reflex/components/el/elements/media.py +++ b/reflex/components/el/elements/media.py @@ -426,6 +426,39 @@ class LinearGradient(BaseHTML): y2: Var[Union[str, int, bool]] +class RadialGradient(BaseHTML): + """Display the radialGradient element.""" + + tag = "radialGradient" + + # The x coordinate of the end circle of the radial gradient. + cx: Var[Union[str, int, bool]] + + # The y coordinate of the end circle of the radial gradient. + cy: Var[Union[str, int, bool]] + + # The radius of the start circle of the radial gradient. + fr: Var[Union[str, int, bool]] + + # The x coordinate of the start circle of the radial gradient. + fx: Var[Union[str, int, bool]] + + # The y coordinate of the start circle of the radial gradient. + fy: Var[Union[str, int, bool]] + + # Units for the gradient. + gradient_units: Var[Union[str, bool]] + + # Transform applied to the gradient. + gradient_transform: Var[Union[str, bool]] + + # The radius of the end circle of the radial gradient. + r: Var[Union[str, int, bool]] + + # Method used to spread the gradient. + spread_method: Var[Union[str, bool]] + + class Stop(BaseHTML): """Display the stop element.""" @@ -461,6 +494,7 @@ class SVG(ComponentNamespace): path = staticmethod(Path.create) stop = staticmethod(Stop.create) linear_gradient = staticmethod(LinearGradient.create) + radial_gradient = staticmethod(RadialGradient.create) defs = staticmethod(Defs.create) __call__ = staticmethod(Svg.create) diff --git a/reflex/components/el/elements/media.pyi b/reflex/components/el/elements/media.pyi index 1e645c32dd..69abe46611 100644 --- a/reflex/components/el/elements/media.pyi +++ b/reflex/components/el/elements/media.pyi @@ -2352,6 +2352,130 @@ class LinearGradient(BaseHTML): """ ... +class RadialGradient(BaseHTML): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + cx: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + cy: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + fr: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + fx: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + fy: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + gradient_units: Optional[Union[Var[Union[bool, str]], bool, str]] = None, + gradient_transform: Optional[Union[Var[Union[bool, str]], bool, str]] = None, + r: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + spread_method: Optional[Union[Var[Union[bool, str]], bool, str]] = None, + access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + auto_capitalize: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + content_editable: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + context_menu: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + dir: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + draggable: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + enter_key_hint: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + hidden: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + input_mode: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + item_prop: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + lang: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + role: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + slot: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + spell_check: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + tab_index: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + title: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, Union[Var, str]]] = None, + on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + **props, + ) -> "RadialGradient": + """Create the component. + + Args: + *children: The children of the component. + cx: The x coordinate of the end circle of the radial gradient. + cy: The y coordinate of the end circle of the radial gradient. + fr: The radius of the start circle of the radial gradient. + fx: The x coordinate of the start circle of the radial gradient. + fy: The y coordinate of the start circle of the radial gradient. + gradient_units: Units for the gradient. + gradient_transform: Transform applied to the gradient. + r: The radius of the end circle of the radial gradient. + spread_method: Method used to spread the gradient. + access_key: Provides a hint for generating a keyboard shortcut for the current element. + auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user. + content_editable: Indicates whether the element's content is editable. + context_menu: Defines the ID of a element which will serve as the element's context menu. + dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left) + draggable: Defines whether the element can be dragged. + enter_key_hint: Hints what media types the media element is able to play. + hidden: Defines whether the element is hidden. + input_mode: Defines the type of the element. + item_prop: Defines the name of the element for metadata purposes. + lang: Defines the language used in the element. + role: Defines the role of the element. + slot: Assigns a slot in a shadow DOM shadow tree to an element. + spell_check: Defines whether the element may be checked for spelling errors. + tab_index: Defines the position of the current element in the tabbing order. + title: Defines a tooltip for the element. + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props of the component. + + Returns: + The component. + """ + ... + class Stop(BaseHTML): @overload @classmethod @@ -2585,6 +2709,7 @@ class SVG(ComponentNamespace): path = staticmethod(Path.create) stop = staticmethod(Stop.create) linear_gradient = staticmethod(LinearGradient.create) + radial_gradient = staticmethod(RadialGradient.create) defs = staticmethod(Defs.create) @staticmethod From 008ce5424a2dd30fa0bc4491ab45ed894383b96b Mon Sep 17 00:00:00 2001 From: ChinoU Date: Sat, 28 Sep 2024 09:14:37 +0100 Subject: [PATCH 6/7] add svg text to media.py and media.pyi --- reflex/components/el/elements/media.py | 21 ++++ reflex/components/el/elements/media.pyi | 121 ++++++++++++++++++++++++ 2 files changed, 142 insertions(+) diff --git a/reflex/components/el/elements/media.py b/reflex/components/el/elements/media.py index fb9aa94133..9935902ad1 100644 --- a/reflex/components/el/elements/media.py +++ b/reflex/components/el/elements/media.py @@ -317,6 +317,26 @@ class Svg(BaseHTML): xmlns: Var[str] +class Text(BaseHTML): + """The SVG text component.""" + + tag = "text" + # The x coordinate of the starting point of the text baseline. + x: Var[Union[str, int]] + # The y coordinate of the starting point of the text baseline. + y: Var[Union[str, int]] + # Shifts the text position horizontally from a previous text element. + dx: Var[Union[str, int]] + # Shifts the text position vertically from a previous text element. + dy: Var[Union[str, int]] + # Rotates orientation of each individual glyph. + rotate: Var[Union[str, int]] + # How the text is stretched or compressed to fit the width defined by the text_length attribute. + length_adjust: Var[str] + # A width that the text should be scaled to fit. + text_length: Var[Union[str, int]] + + class Line(BaseHTML): """The SVG line component.""" @@ -486,6 +506,7 @@ class Path(BaseHTML): class SVG(ComponentNamespace): """SVG component namespace.""" + text = staticmethod(Text.create) line = staticmethod(Line.create) circle = staticmethod(Circle.create) ellipse = staticmethod(Ellipse.create) diff --git a/reflex/components/el/elements/media.pyi b/reflex/components/el/elements/media.pyi index 69abe46611..336d6fbb9a 100644 --- a/reflex/components/el/elements/media.pyi +++ b/reflex/components/el/elements/media.pyi @@ -1550,6 +1550,126 @@ class Svg(BaseHTML): """ ... +class Text(BaseHTML): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + x: Optional[Union[Var[Union[int, str]], int, str]] = None, + y: Optional[Union[Var[Union[int, str]], int, str]] = None, + dx: Optional[Union[Var[Union[int, str]], int, str]] = None, + dy: Optional[Union[Var[Union[int, str]], int, str]] = None, + rotate: Optional[Union[Var[Union[int, str]], int, str]] = None, + length_adjust: Optional[Union[Var[str], str]] = None, + text_length: Optional[Union[Var[Union[int, str]], int, str]] = None, + access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + auto_capitalize: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + content_editable: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + context_menu: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + dir: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + draggable: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + enter_key_hint: Optional[ + Union[Var[Union[bool, int, str]], bool, int, str] + ] = None, + hidden: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + input_mode: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + item_prop: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + lang: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + role: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + slot: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + spell_check: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + tab_index: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + title: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, Union[Var, str]]] = None, + on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + **props, + ) -> "Text": + """Create the component. + + Args: + *children: The children of the component. + x: The x coordinate of the starting point of the text baseline. + y: The y coordinate of the starting point of the text baseline. + dx: Shifts the text position horizontally from a previous text element. + dy: Shifts the text position vertically from a previous text element. + rotate: Rotates orientation of each individual glyph. + length_adjust: How the text is stretched or compressed to fit the width defined by the text_length attribute. + text_length: A width that the text should be scaled to fit. + access_key: Provides a hint for generating a keyboard shortcut for the current element. + auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user. + content_editable: Indicates whether the element's content is editable. + context_menu: Defines the ID of a element which will serve as the element's context menu. + dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left) + draggable: Defines whether the element can be dragged. + enter_key_hint: Hints what media types the media element is able to play. + hidden: Defines whether the element is hidden. + input_mode: Defines the type of the element. + item_prop: Defines the name of the element for metadata purposes. + lang: Defines the language used in the element. + role: Defines the role of the element. + slot: Assigns a slot in a shadow DOM shadow tree to an element. + spell_check: Defines whether the element may be checked for spelling errors. + tab_index: Defines the position of the current element in the tabbing order. + title: Defines a tooltip for the element. + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props of the component. + + Returns: + The component. + """ + ... + class Line(BaseHTML): @overload @classmethod @@ -2701,6 +2821,7 @@ class Path(BaseHTML): ... class SVG(ComponentNamespace): + text = staticmethod(Text.create) line = staticmethod(Line.create) circle = staticmethod(Circle.create) ellipse = staticmethod(Ellipse.create) From 8af6ed7109b63d60ebb9c48316660f7e6eba0851 Mon Sep 17 00:00:00 2001 From: ChinoU Date: Sat, 28 Sep 2024 10:07:45 +0100 Subject: [PATCH 7/7] add unit tests for svg elements --- tests/components/el/test_svg.py | 74 +++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 tests/components/el/test_svg.py diff --git a/tests/components/el/test_svg.py b/tests/components/el/test_svg.py new file mode 100644 index 0000000000..29aaa96dd8 --- /dev/null +++ b/tests/components/el/test_svg.py @@ -0,0 +1,74 @@ +from reflex.components.el.elements.media import ( + Circle, + Defs, + Ellipse, + Line, + LinearGradient, + Path, + Polygon, + RadialGradient, + Rect, + Stop, + Svg, + Text, +) + + +def test_circle(): + circle = Circle.create().render() + assert circle["name"] == "circle" + + +def test_defs(): + defs = Defs.create().render() + assert defs["name"] == "defs" + + +def test_ellipse(): + ellipse = Ellipse.create().render() + assert ellipse["name"] == "ellipse" + + +def test_line(): + line = Line.create().render() + assert line["name"] == "line" + + +def test_linear_gradient(): + linear_gradient = LinearGradient.create().render() + assert linear_gradient["name"] == "linearGradient" + + +def test_path(): + path = Path.create().render() + assert path["name"] == "path" + + +def test_polygon(): + polygon = Polygon.create().render() + assert polygon["name"] == "polygon" + + +def test_radial_gradient(): + radial_gradient = RadialGradient.create().render() + assert radial_gradient["name"] == "radialGradient" + + +def test_rect(): + rect = Rect.create().render() + assert rect["name"] == "rect" + + +def test_svg(): + svg = Svg.create().render() + assert svg["name"] == "svg" + + +def test_text(): + text = Text.create().render() + assert text["name"] == "text" + + +def test_stop(): + stop = Stop.create().render() + assert stop["name"] == "stop"