added an example using observe

[maartenbreddels]

Thanks!

[kolibril13]

I just tested this as well, and it works also on my machine!

One related question: In the below example, I want to use the numbers my_x and my_y at the line point: [100, 100], in the createShapes call. How do I do that?

import ipyreact
from traitlets import Any, Unicode, Int, observe

class Tldraw(ipyreact.ReactWidget):
    my_x = Int(100).tag(sync=True)
    my_y = Int(100).tag(sync=True)
    _esm = """

    import { ColorStyle, TDShapeType, Tldraw, TldrawApp } from '@tldraw/tldraw'
    import * as React from 'react'

    declare const window: Window & { app: TldrawApp }

    export default function Api() {
    const rTldrawApp = React.useRef<TldrawApp>()

    const handleMount = React.useCallback((app: TldrawApp) => {
        rTldrawApp.current = app

        window.app = app

        app
        .createShapes({
            id: 'rect1',
            type: TDShapeType.Rectangle,
            point: [100, 100],
            size: [200, 200],
        })
    })

    return (
        <div
        style={{
            position: "relative",
            width: "800px",
            height: "350px"
        }}
        >
        <Tldraw onMount={handleMount} />
        </div>
    )
    }"""
Tldraw(my_x = 200 , my_y = 200)

[maartenbreddels]

From https://github.com/widgetti/ipyreact#facts

All traits are added as props to your react component (e.g. {value, ...} in th example above.

Which means you can add them to your arguments (which is short for {my_x: my_x, my_y: my_y})

    export default function Api({my_x, my_y}) {

Now you can just access them in the function

            point: [my_x, my_y],

[kolibril13]

Amazing, that worked!

I am now curious to learn more about trailets, therefore some followup questions: Is there also a way to get the current value of a trailet in python? I found print(my_x.default_value) but that prints me 100 from my_x = Int(100).tag(sync=True) and not 200 from the Tldraw(my_x = 200 , my_y = 20) initialization.

Is there a good tutorial somewhere about how to use trailets in widgets?

[maartenbreddels]

https://traitlets.readthedocs.io/en/stable/using_traitlets.html is good enough I hope!

Yeah, the value is bound to the object.

tld = Tldraw(..)
print(tld.my_x )

[kolibril13]

Thanks a lot for the pointer!

tld = Tldraw(..)
print(tld.my_x )

that worked! Is it also possible to access this initial value of my_x = 200 within the code of the class? E.g. I when I want to print the message print(f"Rectangle was created at {my_x} and {my_y}")

[maartenbreddels]

in any method, it's on self, and in the constructor after passing kwargs to the super constructor.

[kolibril13]

Nice, I've written a method and called it from self, and that worked! 🎉

One more question: is there a way I can now call this print_message method within the class itself? Because now, I am calling it outside the class:

import ipyreact
from traitlets import Any, Unicode, Int, observe, signature_has_traits

@signature_has_traits
class Tldraw(ipyreact.ReactWidget):
    my_x = Int(100).tag(sync=True)
    my_y = Int(100).tag(sync=True)
    def print_message(self):
        print(f"Rectangle was created at {self.my_x} and {self.my_y} ")
    _esm = """

    import { ColorStyle, TDShapeType, Tldraw, TldrawApp } from '@tldraw/tldraw'
    import * as React from 'react'

    declare const window: Window & { app: TldrawApp }

    export default function Api({my_x, my_y}) {
    ....

[maartenbreddels]

I'm not sure what you mean by "within the class itself"

My guess is you want to have events. Like when the rectangle was created?

[kolibril13]

Yep, that's what I am looking for. Basically, I want the print_message call already happening during the class call of this example:

z = Tldraw(my_x= 23,my_y = 30)
z.print_message()
z

[maartenbreddels]

Do you mean when you create an object in the Python side, or when the JavaScript execute on the front end?

On Mon, 24 Apr 2023 at 21:22, Jan-Hendrik Müller @.***> wrote:

Yep, that's what I am looking for. Basically, I want the print_message call already happening during the class call of this example:

z = Tldraw(my_x= 23,my_y = 30)z.print_message()z

— Reply to this email directly, view it on GitHub https://github.com/widgetti/ipyreact/pull/7#issuecomment-1520706566, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANPEPNUZLENI5YQVF7PW2TXC3HIBANCNFSM6AAAAAAXJ55Z5U . You are receiving this because you modified the open/close state.Message ID: @.***>

-- Maarten Breddels Co-Founder of Widgetti https://widgetti.io/ Your partner for Jupyter- and data-apps Tel: +31 6 2464 0838 <+31+6+24640838> [image: Twitter] https://twitter.com/maartenbreddels[image: Github] https://github.com/maartenbreddels[image: LinkedIn] https://linkedin.com/in/maartenbreddels

[kolibril13]

I mean during object creation on the Python side.

[maartenbreddels]

Ah, you can put it a new constructor, with kwargs , pass it to the super constructor and then call your function

On Mon, 24 Apr 2023 at 21:46, Jan-Hendrik Müller @.***> wrote:

I mean during object creation on the Python side.

— Reply to this email directly, view it on GitHub https://github.com/widgetti/ipyreact/pull/7#issuecomment-1520732841, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANPEPMYGII6U3RXK2VA3XDXC3KBDANCNFSM6AAAAAAXJ55Z5U . You are receiving this because you modified the open/close state.Message ID: @.***>

-- Maarten Breddels Co-Founder of Widgetti https://widgetti.io/ Your partner for Jupyter- and data-apps Tel: +31 6 2464 0838 <+31+6+24640838> [image: Twitter] https://twitter.com/maartenbreddels[image: Github] https://github.com/maartenbreddels[image: LinkedIn] https://linkedin.com/in/maartenbreddels

[kolibril13]

Amazing! This behaves now exactly like I wanted it to 🎉 🎉 🎉

import ipyreact
from traitlets import Any, Unicode, Int, observe, signature_has_traits

@signature_has_traits
class Tldraw(ipyreact.ReactWidget):
    my_x = Int(100).tag(sync=True)
    my_y = Int(100).tag(sync=True)

    def print_message(self):
        print(f"Rectangle was created at {self.my_x} and {self.my_y} ")

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.print_message()

    _esm = """

    import { ColorStyle, TDShapeType, Tldraw, TldrawApp } from '@tldraw/tldraw'
    import * as React from 'react'
    ....