Element Interface

The Element interface represents a component in the framework. It contains all the necessary properties and methods to manage a component's lifecycle, props, effects, and relationships.

Properties and Methods

Name	Type	Description
tag	string	The HTML tag name or component name
props	Props	The component's properties/attributes
componentInstance	T	The instance of the component. It is the PixiJS instance
propObservables	NestedSignalObjects | undefined	Observable objects for reactive properties
parent	Element | null	Reference to the parent element. Null if it's a root element
context	{ [key: string]: any }	Optional context object for sharing data between components
directives	{ [key: string]: Directive }	Map of directives applied to the element
destroy	() => void	Cleanup method called when the element is being destroyed

Examples

Get the tag name

<Container x={5} y={5} />

<script>
  import { mount } from 'canvasengine';

  mount((element) => {
    console.log(element.tag)
    console.log(element.parent)
    console.log(element.props)
  });
</script>

Get the children components:

<Container x={5} y={5}>
  <Rect x={5} y={5} width={10} height={10} color="red" />
</Container>

<script>
  import { mount } from 'canvasengine';

  mount((element) => {
    console.log(element.props.children)
  });
</script>

Get context

<script>
  import { mount } from 'canvasengine';

  mount((element) => {
    console.log(element.props.context)
  });
</script>

Get the reactive props

<Container x y />

<script>
    import { mount, signal } from 'canvasengine'

    const x = signal(5)
    const y = signal(5)

    mount((element) => {
        const x = element.propObservables.x

        // Get signal value
        console.log(x())

        // Subscribe to the RxJS observable
        x.observable.subscribe((value) => {
            console.log(value)
        })
    })
</script>

Get directives

You can access directive instances through the directives property. Each directive is stored with its attribute name as the key.

<Sprite image="path/to/image.png" controls drag />

<script>
  import { mount } from 'canvasengine';

  mount((element) => {
    // Access the controls directive instance
    const controlsInstance = element.directives.controls;
    
    if (controlsInstance) {
      // Use methods from the directive instance
      // For example, with controls directive:
      // controlsInstance.stopInputs()
      // controlsInstance.getControls()
    }
    
    // Access the drag directive instance
    const dragInstance = element.directives.drag;
    
    // Check all available directives
    console.log(Object.keys(element.directives));
  });
</script>