Code

A node for displaying and animating code.

Press play to preview the animation

                                    
                                        import
                                        
                                        ...
                                        
                                        export
                                        
                                        default
                                        
                                        makeScene2D
                                        (
                                        function
                                        *
                                        
                                        (
                                        view
                                        )
                                        
                                        {
                                        
                                        const
                                         code 
                                        =
                                        
                                        createRef
                                        <
                                        Code
                                        >
                                        (
                                        )
                                        ;
                                        
                                          view
                                        .
                                        add
                                        (
                                        
                                        <
                                        Code
                                        
                                        ref
                                        =
                                        {
                                        code
                                        }
                                        
                                        offset
                                        =
                                        {
                                        -
                                        1
                                        }
                                        
                                        position
                                        =
                                        {
                                        view
                                        .
                                        size
                                        (
                                        )
                                        .
                                        scale
                                        (
                                        -
                                        0.5
                                        )
                                        .
                                        add
                                        (
                                        60
                                        )
                                        }
                                        
                                        fontFamily
                                        =
                                        {
                                        'JetBrains Mono, monospace'
                                        }
                                        
                                        fontSize
                                        =
                                        {
                                        36
                                        }
                                        
                                        code
                                        =
                                        {
                                        `
                                        \
                                        
                                        function hello() {
                                        
                                          console.log('Hello');
                                        
                                        }
                                        `
                                        }
                                        
                                        />
                                        ,
                                        
                                        )
                                        ;
                                        
                                        yield
                                        *
                                        
                                        code
                                        (
                                        )
                                        
                                        .
                                        code
                                        (
                                        
                                        `
                                        \
                                        
                                        function hello() {
                                        
                                          console.warn('Hello World');
                                        
                                        }
                                        `
                                        ,
                                        
                                        1
                                        ,
                                        
                                        )
                                        
                                        .
                                        wait
                                        (
                                        0.5
                                        )
                                        
                                        .
                                        back
                                        (
                                        1
                                        )
                                        
                                        .
                                        wait
                                        (
                                        0.5
                                        )
                                        ;
                                        
                                        }
                                        )
                                        ;

Constructors

`constructor`

Parameters

props : CodeProps

Overwrites


                          Shape.constructor

Properties

`absolutePosition`

                            
                              
                                readonly 
                                public 
                                absolutePosition
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

A helper signal for operating on the position in world space.

Retrieving the position using this signal returns the position in worldspace. Similarly, setting the position using this signal transforms thenew value to local space.

If the new value is a function, the position of this node will becontinuously updated to always match the position returned by the function.This can be useful to "pin" the node in a specific place or to make itfollow another node's position.

Unlike position , this signal is not compound - it doesn't containseparate signals for the x and y components.

Inherited from


                          Shape.absolutePosition

`absoluteRotation`

                            
                                readonly 
                                public 
                                absoluteRotation
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

A helper signal for operating on the rotation in world space.

Retrieving the rotation using this signal returns the rotation in worldspace. Similarly, setting the rotation using this signal transforms thenew value to local space.

If the new value is a function, the rotation of this node will becontinuously updated to always match the rotation returned by the function.

Inherited from


                          Shape.absoluteRotation

`absoluteScale`

                            
                              
                                readonly 
                                public 
                                absoluteScale
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

A helper signal for operating on the scale in world space.

Retrieving the scale using this signal returns the scale in world space.Similarly, setting the scale using this signal transforms the new value tolocal space.

If the new value is a function, the scale of this node will be continuouslyupdated to always match the position returned by the function.

Unlike scale , this signal is not compound - it doesn't containseparate signals for the x and y components.

Inherited from


                          Shape.absoluteScale

`alignContent`

                            
                              
                                readonly 
                                public 
                                alignContent
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      FlexContent
                                    
                                    
                                      Code

Inherited from


                          Shape.alignContent

`alignItems`

                            
                              
                                readonly 
                                public 
                                alignItems
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      FlexItems
                                    
                                    
                                      Code

Inherited from


                          Shape.alignItems

`alignSelf`

                            
                              
                                readonly 
                                public 
                                alignSelf
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      FlexItems
                                    
                                    
                                      Code

Inherited from


                          Shape.alignSelf

`antialiased`

                            
                                readonly 
                                public 
                                antialiased
                                : 
                                SimpleSignal
                                
                                      boolean
                                    
                                      Code

Inherited from


                          Shape.antialiased

`basis`

                            
                              
                                readonly 
                                public 
                                basis
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      FlexBasis
                                    
                                    
                                      Code

Inherited from


                          Shape.basis

`bottom`

                            
                              
                                readonly 
                                public 
                                bottom
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

The position of the bottom edge of this node.

When set, this shortcut property will modify the node's position so thatthe bottom edge ends up in the given place.

When retrieved, it will return the position of the bottom edge in theparent space.

Inherited from


                          Shape.bottom

`bottomLeft`

                            
                              
                                readonly 
                                public 
                                bottomLeft
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

The position of the bottom left corner of this node.

When set, this shortcut property will modify the node's position so thatthe bottom left corner ends up in the given place.

When retrieved, it will return the position of the bottom left corner inthe parent space.

Inherited from


                          Shape.bottomLeft

`bottomRight`

                            
                              
                                readonly 
                                public 
                                bottomRight
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

The position of the bottom right corner of this node.

When set, this shortcut property will modify the node's position so thatthe bottom right corner ends up in the given place.

When retrieved, it will return the position of the bottom right corner inthe parent space.

Inherited from


                          Shape.bottomRight

`cache`

                            
                                readonly 
                                public 
                                cache
                                : 
                                SimpleSignal
                                
                                      boolean
                                    
                                      Code

Inherited from


                          Shape.cache

`cachePadding`

                            
                              
                                readonly 
                                public 
                                cachePadding
                                : 
                                SpacingSignal
                                
                                  
                                    
                                      Code

Controls the padding of the cached canvas used by this node.

By default, the size of the cache is determined based on the bounding boxof the node and its children. That includes effects such as stroke orshadow. This property can be used to expand the cache area further.Usually used to account for custom effects created by shaders .

Inherited from


                          Shape.cachePadding

`children`

                            
                              
                                readonly 
                                public 
                                children
                                : 
                                Signal
                                
                                  
                                    
                                      ComponentChildren
                                    
                                    
                                      Node
                                      []
                                    
                                    
                                      Code
                                    
                                    
                                      SignalContext
                                      
                                        
                                          
                                            ComponentChildren
                                          
                                          
                                            Node
                                            []
                                          
                                          
                                            Code

Inherited from


                          Shape.children

`clip`

                            
                                readonly 
                                public 
                                clip
                                : 
                                SimpleSignal
                                
                                      boolean
                                    
                                      Code

Inherited from


                          Shape.clip

`code`

The code to display.

`composite`

                            
                                readonly 
                                public 
                                composite
                                : 
                                SimpleSignal
                                
                                      boolean
                                    
                                      Code

Inherited from


                          Shape.composite

`compositeOperation`

                            
                                readonly 
                                public 
                                compositeOperation
                                : 
                                SimpleSignal
                                
                                      GlobalCompositeOperation
                                    
                                      Code

Inherited from


                          Shape.compositeOperation

`creationStack`

                            
                                readonly 
                                public 
                                creationStack
                                ?: 
                                string

Inherited from


                          Shape.creationStack

`direction`

                            
                              
                                readonly 
                                public 
                                direction
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      FlexDirection
                                    
                                    
                                      Code

Inherited from


                          Shape.direction

`drawHooks`

                            
                              
                                readonly 
                                public 
                                drawHooks
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      DrawHooks
                                    
                                    
                                      Code

Experimental

This is an experimental feature . The behavior and API may change drastically between minor releases.

Custom drawing logic for the code.

Check out DrawHooks for available render hooks.

Examples

`element`

                            
                              
                                public 
                                element
                                : 
                                HTMLElement

Inherited from


                          Shape.element

`fill`

                            
                              
                                readonly 
                                public 
                                fill
                                : 
                                CanvasStyleSignal
                                
                                  
                                    
                                      Code

Inherited from


                          Shape.fill

`filters`

                            
                              
                                readonly 
                                public 
                                filters
                                : 
                                FiltersSignal
                                
                                  
                                    
                                      Code

Inherited from


                          Shape.filters

`fontFamily`

                            
                                readonly 
                                public 
                                fontFamily
                                : 
                                SimpleSignal
                                
                                      string
                                    
                                      Code

Inherited from


                          Shape.fontFamily

`fontSize`

                            
                                readonly 
                                public 
                                fontSize
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Inherited from


                          Shape.fontSize

`fontStyle`

                            
                                readonly 
                                public 
                                fontStyle
                                : 
                                SimpleSignal
                                
                                      string
                                    
                                      Code

Inherited from


                          Shape.fontStyle

`fontWeight`

                            
                                readonly 
                                public 
                                fontWeight
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Inherited from


                          Shape.fontWeight

`gap`

                            
                              
                                readonly 
                                public 
                                gap
                                : 
                                Vector2LengthSignal
                                
                                  
                                    
                                      Code

Inherited from


                          Shape.gap

`grow`

                            
                                readonly 
                                public 
                                grow
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Inherited from


                          Shape.grow

`highlighter`

                            
                                readonly 
                                public 
                                highlighter
                                : 
                                SimpleSignal
                                
                                            null
                                          
                                            CodeHighlighter
                                            
                                                  unknown
                                                
                                      Code

The code highlighter to use for this code node.

Defaults to a shared LezerHighlighter .

`isClass`

Inherited from


                          Shape.isClass

`justifyContent`

                            
                              
                                readonly 
                                public 
                                justifyContent
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      FlexContent
                                    
                                    
                                      Code

Inherited from


                          Shape.justifyContent

`key`

Inherited from


                          Shape.key

`layout`

                            
                              
                                readonly 
                                public 
                                layout
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      LayoutMode
                                    
                                    
                                      Code

Inherited from


                          Shape.layout

`left`

                            
                              
                                readonly 
                                public 
                                left
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

The position of the left edge of this node.

When set, this shortcut property will modify the node's position so thatthe left edge ends up in the given place.

When retrieved, it will return the position of the left edge in the parentspace.

Inherited from


                          Shape.left

`letterSpacing`

                            
                                readonly 
                                public 
                                letterSpacing
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Inherited from


                          Shape.letterSpacing

`lineCap`

                            
                                readonly 
                                public 
                                lineCap
                                : 
                                SimpleSignal
                                
                                      CanvasLineCap
                                    
                                      Code

Inherited from


                          Shape.lineCap

`lineDash`

                            
                                readonly 
                                public 
                                lineDash
                                : 
                                SimpleSignal
                                
                                      number
                                      []
                                    
                                      Code

Inherited from


                          Shape.lineDash

`lineDashOffset`

                            
                                readonly 
                                public 
                                lineDashOffset
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Inherited from


                          Shape.lineDashOffset

`lineHeight`

                            
                              
                                readonly 
                                public 
                                lineHeight
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      Length
                                    
                                    
                                      Code

Inherited from


                          Shape.lineHeight

`lineJoin`

                            
                                readonly 
                                public 
                                lineJoin
                                : 
                                SimpleSignal
                                
                                      CanvasLineJoin
                                    
                                      Code

Inherited from


                          Shape.lineJoin

`lineWidth`

                            
                                readonly 
                                public 
                                lineWidth
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Inherited from


                          Shape.lineWidth

`margin`

                            
                              
                                readonly 
                                public 
                                margin
                                : 
                                SpacingSignal
                                
                                  
                                    
                                      Code

Inherited from


                          Shape.margin

`maxHeight`

                            
                              
                                readonly 
                                public 
                                maxHeight
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      LengthLimit
                                    
                                    
                                      Code

Inherited from


                          Shape.maxHeight

`maxWidth`

                            
                              
                                readonly 
                                public 
                                maxWidth
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      LengthLimit
                                    
                                    
                                      Code

Inherited from


                          Shape.maxWidth

`middle`

                            
                              
                                readonly 
                                public 
                                middle
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

The position of the center of this node.

When set, this shortcut property will modify the node's position so thatthe center ends up in the given place.

If the offset has not been changed, this will be the same as the position .

When retrieved, it will return the position of the center in the parentspace.

Inherited from


                          Shape.middle

`minHeight`

                            
                              
                                readonly 
                                public 
                                minHeight
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      LengthLimit
                                    
                                    
                                      Code

Inherited from


                          Shape.minHeight

`minWidth`

                            
                              
                                readonly 
                                public 
                                minWidth
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      LengthLimit
                                    
                                    
                                      Code

Inherited from


                          Shape.minWidth

`offset`

                            
                              
                                readonly 
                                public 
                                offset
                                : 
                                Vector2Signal
                                
                                  
                                    
                                      Code
                                    
                                    
                                      Vector2SignalContext
                                      
                                        
                                          
                                            Code

Represents the offset of this node's origin.

By default, the origin of a node is located at its center. The originserves as the pivot point when rotating and scaling a node, but it doesn'taffect the placement of its children.

The value is relative to the size of this node. A value of 1 means as farto the right/bottom as possible. Here are a few examples of offsets:

[-1, -1] - top left corner
[1, -1] - top right corner
[0, 1] - bottom edge
[-1, 1] - bottom left corner

Inherited from


                          Shape.offset

`oldSelection`

                            
                                public 
                                oldSelection
                                : 
                                
                                      null
                                    
                                      CodeSelection
                                    
                                 = 
                                null

`opacity`

                            
                                readonly 
                                public 
                                opacity
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Represents the opacity of this node in the range 0-1.

The value is clamped to the range 0-1.

Inherited from


                          Shape.opacity

`padding`

                            
                              
                                readonly 
                                public 
                                padding
                                : 
                                SpacingSignal
                                
                                  
                                    
                                      Code

Inherited from


                          Shape.padding

`parent`

                            
                                readonly 
                                public 
                                parent
                                : 
                                SimpleSignal
                                
                                            null
                                          
                                            Node
                                          
                                      void
                                    
                                 = 
                                ...

Inherited from


                          Shape.parent

`position`

                            
                              
                                readonly 
                                public 
                                position
                                : 
                                Vector2Signal
                                
                                  
                                    
                                      Code
                                    
                                    
                                      Vector2SignalContext
                                      
                                        
                                          
                                            Code

Represents the position of this node in local space of its parent.

Examples

Inherited from


                          Shape.position

`properties`

                            
                                readonly 
                                public 
                                properties
                                : 
                                Record
                                
                                      string
                                    
                                      PropertyMetadata
                                      
                                            any
                                          
                                 = 
                                ...

Inherited from


                          Shape.properties

`ratio`

                            
                                readonly 
                                public 
                                ratio
                                : 
                                SimpleSignal
                                
                                            null
                                          
                                            number
                                          
                                      Code

Inherited from


                          Shape.ratio

`right`

                            
                              
                                readonly 
                                public 
                                right
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

The position of the right edge of this node.

When set, this shortcut property will modify the node's position so thatthe right edge ends up in the given place.

When retrieved, it will return the position of the right edge in the parentspace.

Inherited from


                          Shape.right

`rotation`

                            
                                readonly 
                                public 
                                rotation
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Represents the rotation (in degrees) of this node relative to its parent.

Inherited from


                          Shape.rotation

`scale`

                            
                              
                                readonly 
                                public 
                                scale
                                : 
                                Vector2Signal
                                
                                  
                                    
                                      Code
                                    
                                    
                                      Vector2SignalContext
                                      
                                        
                                          
                                            Code

Represents the scale of this node in local space of its parent.

Examples

Inherited from


                          Shape.scale

`selection`

                            
                              
                                readonly 
                                public 
                                selection
                                : 
                                Signal
                                
                                  
                                    
                                      PossibleCodeSelection
                                    
                                    
                                      CodeSelection
                                    
                                    
                                      Code
                                    
                                    
                                      SignalContext
                                      
                                        
                                          
                                            PossibleCodeSelection
                                          
                                          
                                            CodeSelection
                                          
                                          
                                            Code

The currently selected code range.

Either a single CodeRange or an array of themdescribing which parts of the code should be visually emphasized.

You can use word and lines to quickly create ranges.

Examples

`selectionProgress`

                            
                                public 
                                selectionProgress
                                : 
                                SimpleSignal
                                
                                            null
                                          
                                            number
                                          
                                      void
                                    
                                 = 
                                ...

`shaders`

                            
                                readonly 
                                public 
                                shaders
                                : 
                                Signal
                                
                                      PossibleShaderConfig
                                    
                                      ShaderConfig
                                      []
                                    
                                      Code
                                    
                                      SignalContext
                                      
                                            PossibleShaderConfig
                                          
                                            ShaderConfig
                                            []
                                          
                                            Code

Experimental

This is an experimental feature . The behavior and API may change drastically between minor releases.

Inherited from


                          Shape.shaders

`shadowBlur`

                            
                                readonly 
                                public 
                                shadowBlur
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Inherited from


                          Shape.shadowBlur

`shadowColor`

                            
                              
                                readonly 
                                public 
                                shadowColor
                                : 
                                ColorSignal
                                
                                  
                                    
                                      Code

Inherited from


                          Shape.shadowColor

`shadowOffset`

                            
                              
                                readonly 
                                public 
                                shadowOffset
                                : 
                                Vector2Signal
                                
                                  
                                    
                                      Code
                                    
                                    
                                      Vector2SignalContext
                                      
                                        
                                          
                                            Code

Inherited from


                          Shape.shadowOffset

`shrink`

                            
                                readonly 
                                public 
                                shrink
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Inherited from


                          Shape.shrink

`size`

                            
                              
                                readonly 
                                public 
                                size
                                : 
                                Vector2LengthSignal
                                
                                  
                                    
                                      Code

Represents the size of this node.

A size is a two-dimensional vector, where x represents the width , and y represents the height .

The value of both x and y is of type Length which iseither:

number - the desired length in pixels
${number}% - a string with the desired length in percents, for example '50%'
null - an automatic length

When retrieving the size, all units are converted to pixels, using thecurrent state of the layout. For example, retrieving the width set to '50%' , while the parent has a width of 200px will result in the number 100 being returned.

When the node is not part of the layout, setting its size using percentsrefers to the size of the entire scene.

Examples

Inherited from


                          Shape.size

`skew`

                            
                              
                                readonly 
                                public 
                                skew
                                : 
                                Vector2Signal
                                
                                  
                                    
                                      Code
                                    
                                    
                                      Vector2SignalContext
                                      
                                        
                                          
                                            Code

Represents the skew of this node in local space of its parent.

Examples

Inherited from


                          Shape.skew

`stroke`

                            
                              
                                readonly 
                                public 
                                stroke
                                : 
                                CanvasStyleSignal
                                
                                  
                                    
                                      Code

Inherited from


                          Shape.stroke

`strokeFirst`

                            
                                readonly 
                                public 
                                strokeFirst
                                : 
                                SimpleSignal
                                
                                      boolean
                                    
                                      Code

Inherited from


                          Shape.strokeFirst

`styles`

                            
                              
                                public 
                                styles
                                : 
                                CSSStyleDeclaration

Inherited from


                          Shape.styles

`textAlign`

                            
                                readonly 
                                public 
                                textAlign
                                : 
                                SimpleSignal
                                
                                      CanvasTextAlign
                                    
                                      Code

Inherited from


                          Shape.textAlign

`textDirection`

                            
                                readonly 
                                public 
                                textDirection
                                : 
                                SimpleSignal
                                
                                      CanvasDirection
                                    
                                      Code

Inherited from


                          Shape.textDirection

`textWrap`

                            
                              
                                readonly 
                                public 
                                textWrap
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      TextWrap
                                    
                                    
                                      Code

Inherited from


                          Shape.textWrap

`top`

                            
                              
                                readonly 
                                public 
                                top
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

The position of the top edge of this node.

When set, this shortcut property will modify the node's position so thatthe top edge ends up in the given place.

When retrieved, it will return the position of the top edge in the parentspace.

Inherited from


                          Shape.top

`topLeft`

                            
                              
                                readonly 
                                public 
                                topLeft
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

The position of the top left corner of this node.

When set, this shortcut property will modify the node's position so thatthe top left corner ends up in the given place.

When retrieved, it will return the position of the top left corner in theparent space.

Inherited from


                          Shape.topLeft

`topRight`

                            
                              
                                readonly 
                                public 
                                topRight
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

The position of the top right corner of this node.

When set, this shortcut property will modify the node's position so thatthe top right corner ends up in the given place.

When retrieved, it will return the position of the top right corner in theparent space.

Inherited from


                          Shape.topRight

`wrap`

                            
                              
                                readonly 
                                public 
                                wrap
                                : 
                                SimpleSignal
                                
                                  
                                    
                                      FlexWrap
                                    
                                    
                                      Code

Inherited from


                          Shape.wrap

`zIndex`

                            
                                readonly 
                                public 
                                zIndex
                                : 
                                SimpleSignal
                                
                                      number
                                    
                                      Code

Inherited from


                          Shape.zIndex

`defaultHighlighter`

                            
                                static 
                                public 
                                defaultHighlighter
                                : 
                                
                                      null
                                    
                                      CodeHighlighter
                                      
                                            unknown
                                          
                                 = 
                                null

Accessors

`columnGap`

                            
                                public 
                                get 
                                columnGap
                                (): 
                                Signal
                                
                                      Length
                                    
                                      number
                                    
                                      this
                                    
                                      SignalContext
                                      
                                            Length
                                          
                                            number
                                          
                                            this

Inherited from


                          Shape.columnGap

`height`

                            
                                public 
                                get 
                                height
                                (): 
                                Signal
                                
                                      Length
                                    
                                      number
                                    
                                      this
                                    
                                      SignalContext
                                      
                                            Length
                                          
                                            number
                                          
                                            this

Inherited from


                          Shape.height

`rowGap`

                            
                                public 
                                get 
                                rowGap
                                (): 
                                Signal
                                
                                      Length
                                    
                                      number
                                    
                                      this
                                    
                                      SignalContext
                                      
                                            Length
                                          
                                            number
                                          
                                            this

Inherited from


                          Shape.rowGap

`width`

                            
                                public 
                                get 
                                width
                                (): 
                                Signal
                                
                                      Length
                                    
                                      number
                                    
                                      this
                                    
                                      SignalContext
                                      
                                            Length
                                          
                                            number
                                          
                                            this

Inherited from


                          Shape.width

`x`

                            
                                public 
                                get 
                                x
                                (): 
                                SimpleSignal
                                
                                      number
                                    
                                      this

Inherited from


                          Shape.x

`y`

                            
                                public 
                                get 
                                y
                                (): 
                                SimpleSignal
                                
                                      number
                                    
                                      this

Inherited from


                          Shape.y

Methods

`[iterator]`

                            
                                public 
                                [iterator]
                                (): 
                                Generator
                                
                                            key
                                            : 
                                            string
                                          
                                            meta
                                            : 
                                            PropertyMetadata
                                            
                                                  any
                                                
                                            signal
                                            : 
                                            SimpleSignal
                                            
                                                  any
                                                
                                                  void
                                                
                                      void
                                    
                                      unknown

Inherited from


                          Shape.[iterator]

`absoluteOpacity`

                            
                                public 
                                absoluteOpacity
                                (): 
                                number

Inherited from


                          Shape.absoluteOpacity

`add`

                            
                              
                                public 
                                add
                                
                                  
                                    
                                      node
                                      : 
                                      ComponentChildren
                                    
                                  
                                
                                : 
                                Code

Add the given node(s) as the children of this node.

The nodes will be appended at the end of the children list.

Examples

Parameters

node : ComponentChildren
A node or an array of nodes to append.

Inherited from


                          Shape.add

`anchorPosition`

                            
                                public 
                                anchorPosition
                                (): 
                                Vector2

Inherited from


                          Shape.anchorPosition

`applyState`

                            
                                public 
                                applyState
                                
                                      state
                                      : 
                                      NodeState
                                    
                                : 
                                void
                              
                                public 
                                applyState
                                
                                      state
                                      : 
                                      NodeState
                                    
                                      duration
                                      : 
                                      number
                                    
                                      timing
                                      ?: 
                                      TimingFunction
                                    
                                : 
                                ThreadGenerator

Apply the given state to the node, setting all matching signal values tothe provided values.

Parameters

state : NodeState
The state to apply to the node.

Inherited from


                          Shape.applyState

`cacheBBox`

Get a bounding box for the contents rendered by this node as wellas its children.

Inherited from


                          Shape.cacheBBox

`cardinalPoint`

                            
                              
                                public 
                                cardinalPoint
                                
                                  
                                    
                                      origin
                                      : 
                                      
                                        
                                          
                                            Origin
                                          
                                          
                                            Direction
                                          
                                        
                                      
                                    
                                  
                                
                                : 
                                SimpleVector2Signal
                                
                                  
                                    
                                      Code

Get the cardinal point corresponding to the given origin.

Parameters

origin : Origin Direction
The origin or direction of the point.

Inherited from


                          Shape.cardinalPoint

`childAs`

Get the nth children cast to the specified type.

Type Parameters

T extends Node T = Node

Parameters

index : number
The index of the child to retrieve.

Inherited from


                          Shape.childAs

`childrenAs`

Get the children array cast to the specified type.

Type Parameters

T extends Node T = Node

Inherited from


                          Shape.childrenAs

`clone`

                            
                                public 
                                clone
                                
                                      customProps
                                      : 
                                      NodeState
                                       = 
                                      {}
                                    
                                : 
                                Code

Create a copy of this node.

Parameters

customProps : NodeState = {}
Properties to override.

Inherited from


                          Shape.clone

`compositeToLocal`

                            
                              
                                public 
                                compositeToLocal
                                (): 
                                DOMMatrix

Inherited from


                          Shape.compositeToLocal

`compositeToWorld`

                            
                              
                                public 
                                compositeToWorld
                                (): 
                                DOMMatrix

A matrix mapping composite space to world space.

Certain effects such as blur and shadows ignore the current transformation.This matrix can be used to transform their parameters so that the effectappears relative to the closest composite root.

Inherited from


                          Shape.compositeToWorld

`computedPosition`

                            
                                public 
                                computedPosition
                                (): 
                                Vector2

Inherited from


                          Shape.computedPosition

`createSignal`

                            
                              
                                public 
                                createSignal
                                
                                  
                                    
                                      initial
                                      : 
                                      SignalValue
                                      
                                        
                                          
                                            PossibleCodeScope
                                          
                                        
                                      
                                    
                                  
                                
                                : 
                                CodeSignal
                                
                                  
                                    
                                      Code

Create a child code signal.

Parameters

initial : SignalValue PossibleCodeScope
The initial code.

`dispose`

Prepare this node to be disposed of.

This method is called automatically when a scene is refreshed. It willbe called even if the node is not currently attached to the tree.

The goal of this method is to clean any external references to allow thenode to be garbage collected.

Inherited from


                          Shape.dispose

`drawOverlay`

                            
                                public 
                                drawOverlay
                                
                                      context
                                      : 
                                      CanvasRenderingContext2D
                                    
                                      matrix
                                      : 
                                      DOMMatrix
                                    
                                : 
                                void

Draw an overlay for this node.

The overlay for the currently inspected node is displayed on top of thecanvas.

The provided context is in screen space. The local-to-screen matrix can beused to transform all shapes that need to be displayed.This approach allows to keep the line widths and gizmo sizes consistent,no matter how zoomed-in the view is.

Parameters

context : CanvasRenderingContext2D
The context to draw with.
matrix : DOMMatrix
A local-to-screen matrix.

Inherited from


                          Shape.drawOverlay

`findAll`

Find all descendants of this node that match the given predicate.

Type Parameters

T extends Node T

Parameters

predicate : node : any => node is T
A function that returns true if the node matches.

Inherited from


                          Shape.findAll

`findAllRanges`

                            
                                public 
                                findAllRanges
                                
                                      pattern
                                      : 
                                      
                                            string
                                          
                                            RegExp
                                          
                                : 
                                CodeRange
                                []

Find all code ranges that match the given pattern.

Parameters

pattern : string RegExp
Either a string or a regular expression to match.

`findAncestor`

                            
                                public 
                                findAncestor
                                
                                      T
                                       extends 
                                      Node
                                      
                                            T
                                          
                                      predicate
                                      : 
                                      
                                            node
                                            : 
                                            Node
                                          
                                       => 
                                      node 
                                      is 
                                      T
                                    
                                : 
                                
                                      null
                                    
                                      T
                                    
                                public 
                                findAncestor
                                
                                      T
                                       extends 
                                      Node
                                      
                                            T
                                          
                                       = 
                                      Node
                                    
                                      predicate
                                      : 
                                      
                                            node
                                            : 
                                            Node
                                          
                                       => 
                                      boolean
                                    
                                : 
                                
                                      null
                                    
                                      T

Find the closest ancestor of this node that matches the given predicate.

Type Parameters

T extends Node T

Parameters

predicate : node : Node => node is T
A function that returns true if the node matches.

Inherited from


                          Shape.findAncestor

`findFirst`

Find the first descendant of this node that matches the given predicate.

Type Parameters

T extends Node T

Parameters

predicate : node : Node => node is T
A function that returns true if the node matches.

Inherited from


                          Shape.findFirst

`findFirstRange`

                            
                                public 
                                findFirstRange
                                
                                      pattern
                                      : 
                                      
                                            string
                                          
                                            RegExp
                                          
                                : 
                                CodeRange

Find the first code range that matches the given pattern.

Parameters

pattern : string RegExp
Either a string or a regular expression to match.

`findLast`

Find the last descendant of this node that matches the given predicate.

Type Parameters

T extends Node T

Parameters

predicate : node : Node => node is T
A function that returns true if the node matches.

Inherited from


                          Shape.findLast

`findLastRange`

                            
                                public 
                                findLastRange
                                
                                      pattern
                                      : 
                                      
                                            string
                                          
                                            RegExp
                                          
                                : 
                                CodeRange

Find the last code range that matches the given pattern.

Parameters

pattern : string RegExp
Either a string or a regular expression to match.

`getOriginDelta`

                            
                              
                                public 
                                getOriginDelta
                                
                                  
                                    
                                      origin
                                      : 
                                      Origin
                                    
                                  
                                
                                : 
                                Vector2

Parameters

origin : Origin

Inherited from


                          Shape.getOriginDelta

`getPointBBox`

                            
                              
                                public 
                                getPointBBox
                                
                                  
                                    
                                      point
                                      : 
                                      CodePoint
                                    
                                  
                                
                                : 
                                BBox

Return the bounding box of the given point (character) in the code.

The returned bound box is in local space of the Code node.

Parameters

point : CodePoint
The point to get the bounding box for.

`getSelectionBBox`

                            
                              
                                public 
                                getSelectionBBox
                                
                                  
                                    
                                      selection
                                      : 
                                      PossibleCodeSelection
                                    
                                  
                                
                                : 
                                BBox
                                []

Return bounding boxes of all characters in the selection.

The returned bounding boxes are in local space of the Code node.Each line of code has a separate bounding box.

Parameters

selection : PossibleCodeSelection
The selection to get the bounding boxes for.

`getState`

Return a snapshot of the node's current signal values.

This method will calculate the values of any reactive properties of thenode at the time the method is called.

Inherited from


                          Shape.getState

`highlighterCache`

                            
                                public 
                                highlighterCache
                                (): 
                                
                                      null
                                    
                                            after
                                            : 
                                            unknown
                                             = 
                                            ...
                                          
                                            before
                                            : 
                                            unknown
                                             = 
                                            ...

`hit`

Try to find a node intersecting the given position.

Parameters

position : Vector2
The searched position.

Inherited from


                          Shape.hit

`insert`

                            
                                public 
                                insert
                                
                                      node
                                      : 
                                      ComponentChildren
                                    
                                      index
                                      : 
                                      number
                                       = 
                                      0
                                    
                                : 
                                Code

Insert the given node(s) at the specified index in the children list.

Examples

Parameters

node : ComponentChildren
A node or an array of nodes to insert.
index : number = 0
An index at which to insert the node(s).

Inherited from


                          Shape.insert

`instantiate`

                            
                                public 
                                instantiate
                                
                                      props
                                      : 
                                      NodeProps
                                       = 
                                      {}
                                    
                                : 
                                Code

Create an instance of this node's class.

Parameters

props : NodeProps = {}
Properties to pass to the constructor.

Inherited from


                          Shape.instantiate

`isLayoutRoot`

                            
                                public 
                                isLayoutRoot
                                (): 
                                boolean

Inherited from


                          Shape.isLayoutRoot

`layoutEnabled`

                            
                                public 
                                layoutEnabled
                                (): 
                                boolean

Get the resolved layout mode of this node.

When the mode is null , its value will be inherited from the parent.

Use layout to get the raw mode set for this node (withoutinheritance).

Inherited from


                          Shape.layoutEnabled

`localToParent`

                            
                              
                                public 
                                localToParent
                                (): 
                                DOMMatrix

Get the local-to-parent matrix for this node.

This matrix transforms vectors from local space of this node to local spaceof this node's parent.

Inherited from


                          Shape.localToParent

`localToWorld`

                            
                              
                                public 
                                localToWorld
                                (): 
                                DOMMatrix

Get the local-to-world matrix for this node.

This matrix transforms vectors from local space of this node to worldspace.

Examples

Inherited from


                          Shape.localToWorld

`lockSize`

Inherited from


                          Shape.lockSize

`move`

Rearrange this node in relation to its siblings.

Children are rendered starting from the beginning of the children list.We can change the rendering order by rearranging said list.

A positive by arguments move the node up (it will be rendered on top ofthe elements it has passed). Negative values move it down.

Parameters

by : number = 1
Number of places by which the node should be moved.

Inherited from


                          Shape.move

`moveAbove`

                            
                                public 
                                moveAbove
                                
                                      node
                                      : 
                                      Node
                                    
                                      directlyAbove
                                      : 
                                      boolean
                                       = 
                                      false
                                    
                                : 
                                Code

Move the node above the provided node in the parent's layout.

The node will be moved above the provided node and from then on will berendered on top of it. By default, if the node is already positionedhigher than the sibling node, it will not get moved.

Parameters

node : Node
The sibling node below which to move.
directlyAbove : boolean = false
Whether the node should be positioned directly above thesibling. When true, will move the node even if it isalready positioned above the sibling.

Inherited from


                          Shape.moveAbove

`moveBelow`

                            
                                public 
                                moveBelow
                                
                                      node
                                      : 
                                      Node
                                    
                                      directlyBelow
                                      : 
                                      boolean
                                       = 
                                      false
                                    
                                : 
                                Code

Move the node below the provided node in the parent's layout.

The node will be moved below the provided node and from then on will berendered below it. By default, if the node is already positioned lower thanthe sibling node, it will not get moved.

Parameters

node : Node
The sibling node below which to move.
directlyBelow : boolean = false
Whether the node should be positioned directly belowthe sibling. When true, will move the node even ifit is already positioned below the sibling.

Inherited from


                          Shape.moveBelow

`moveDown`

Move the node down in relation to its siblings.

The node will exchange places with the sibling right below it (if any) andfrom then on will be rendered under it.

Inherited from


                          Shape.moveDown

`moveOffset`

Update the offset of this node and adjust the position to keep it in thesame place.

Parameters

offset : Vector2
The new offset.

Inherited from


                          Shape.moveOffset

`moveTo`

Move the node to the provided position relative to its siblings.

If the node is getting moved to a lower position, it will be placed belowthe sibling that's currently at the provided index (if any).If the node is getting moved to a higher position, it will be placed abovethe sibling that's currently at the provided index (if any).

Parameters

index : number
The index to move the node to.

Inherited from


                          Shape.moveTo

`moveToBottom`

                            
                                public 
                                moveToBottom
                                (): 
                                Code

Move the node to the bottom in relation to its siblings.

The node will be placed at the beginning of the children list and from thenon will be rendered below all of its siblings.

Inherited from


                          Shape.moveToBottom

`moveToTop`

Move the node to the top in relation to its siblings.

The node will be placed at the end of the children list and from then onwill be rendered on top of all of its siblings.

Inherited from


                          Shape.moveToTop

`moveUp`

Move the node up in relation to its siblings.

The node will exchange places with the sibling right above it (if any) andfrom then on will be rendered on top of it.

Inherited from


                          Shape.moveUp

`parentAs`

Get the parent cast to the specified type.

Type Parameters

T extends Node T = Node

Inherited from


                          Shape.parentAs

`parentToWorld`

                            
                              
                                public 
                                parentToWorld
                                (): 
                                DOMMatrix

Get the parent-to-world matrix for this node.

This matrix transforms vectors from local space of this node's parent toworld space.

Inherited from


                          Shape.parentToWorld

`parsed`

Get the currently displayed code as a string.

`peekChildren`

                            
                                public 
                                peekChildren
                                (): 
                                readonly 
                                Node
                                []

Get the current children of this node.

Unlike children , this method does not have any side effects.It does not register the children signal as a dependency, and it does notspawn any children. It can be used to safely retrieve the current state ofthe scene graph for debugging purposes.

Inherited from


                          Shape.peekChildren

`reactiveClone`

                            
                                public 
                                reactiveClone
                                
                                      customProps
                                      : 
                                      NodeState
                                       = 
                                      {}
                                    
                                : 
                                Code

Create a reactive copy of this node.

A reactive copy has all its properties dynamically updated to match thesource node.

Parameters

customProps : NodeState = {}
Properties to override.

Inherited from


                          Shape.reactiveClone

`releaseSize`

                            
                                public 
                                releaseSize
                                (): 
                                void

Inherited from


                          Shape.releaseSize

`remove`

Remove this node from the tree.

Inherited from


                          Shape.remove

`removeChildren`

                            
                                public 
                                removeChildren
                                (): 
                                Code

Remove all children of this node.

Inherited from


                          Shape.removeChildren

`render`

                            
                                public 
                                render
                                
                                      context
                                      : 
                                      CanvasRenderingContext2D
                                    
                                : 
                                void

Render this node onto the given canvas.

Parameters

context : CanvasRenderingContext2D
The context to draw with.

Inherited from


                          Shape.render

`reparent`

Change the parent of this node while keeping the absolute transform.

After performing this operation, the node will stay in the same placevisually, but its parent will be changed.

Parameters

newParent : Node
The new parent of this node.

Inherited from


                          Shape.reparent

`restore`

                            
                                public 
                                restore
                                (): 
                                void
                              
                                public 
                                restore
                                
                                      duration
                                      : 
                                      number
                                    
                                      timing
                                      ?: 
                                      TimingFunction
                                    
                                : 
                                ThreadGenerator

Restore the node to its last saved state.

This method can be used together with the save method to restore anode to a previously saved state. Restoring a node to a previous stateremoves that state from the state stack.

Examples

Inherited from


                          Shape.restore

`ripple`

                            
                                public 
                                ripple
                                
                                      duration
                                      : 
                                      number
                                       = 
                                      1
                                    
                                : 
                                Generator
                                
                                            void
                                          
                                            ThreadGenerator
                                          
                                            Promise
                                            
                                                  any
                                                
                                            Promisable
                                            
                                                  any
                                                
                                      void
                                    
                                      any

Parameters

duration : number = 1

Inherited from


                          Shape.ripple

`save`

Push a snapshot of the node's current state onto the node's state stack.

This method can be used together with the restore method to save anode's current state and later restore it. It is possible to store morethan one state by calling save method multiple times.

Inherited from


                          Shape.save

`snapshotClone`

                            
                                public 
                                snapshotClone
                                
                                      customProps
                                      : 
                                      NodeState
                                       = 
                                      {}
                                    
                                : 
                                Code

Create a copy of this node.

Unlike clone , a snapshot clone calculates any reactive propertiesat the moment of cloning and passes the raw values to the copy.

Parameters

customProps : NodeState = {}
Properties to override.

Inherited from


                          Shape.snapshotClone

`toPromise`

Wait for any asynchronous resources that this node or its children have.

Certain resources like images are always loaded asynchronously.Awaiting this method makes sure that all such resources are done loadingbefore continuing the animation.

Inherited from


                          Shape.toPromise

`view`

Inherited from


                          Shape.view

`worldToLocal`

                            
                              
                                public 
                                worldToLocal
                                (): 
                                DOMMatrix

Get the world-to-local matrix for this node.

This matrix transforms vectors from world space to local space of thisnode.

Examples

Inherited from


                          Shape.worldToLocal

`worldToParent`

                            
                              
                                public 
                                worldToParent
                                (): 
                                DOMMatrix

Get the world-to-parent matrix for this node.

This matrix transforms vectors from world space to local space of thisnode's parent.

Inherited from


                          Shape.worldToParent

`createSignal`

                            
                                static 
                                public 
                                createSignal
                                
                                      initial
                                      : 
                                      SignalValue
                                      
                                            PossibleCodeScope
                                          
                                      highlighter
                                      ?: 
                                      SignalValue
                                      
                                            CodeHighlighter
                                            
                                                  unknown
                                                
                                : 
                                CodeSignal
                                
                                      void

Create a standalone code signal.

Parameters

initial : SignalValue PossibleCodeScope
The initial code.
highlighter ?: SignalValue CodeHighlighter unknown
Custom highlighter to use.

Constructors
- constructor
Properties
- absolutePosition
- absoluteRotation
- absoluteScale
- alignContent
- alignItems
- alignSelf
- antialiased
- basis
- bottom
- bottomLeft
- bottomRight
- cache
- cachePadding
- children
- clip
- code
- composite
- compositeOperation
- creationStack
- direction
- drawHooks
- element
- fill
- filters
- fontFamily
- fontSize
- fontStyle
- fontWeight
- gap
- grow
- hasSpawnedChildren
- highlighter
- isClass
- justifyContent
- key
- layout
- left
- letterSpacing
- lineCap
- lineDash
- lineDashOffset
- lineHeight
- lineJoin
- lineWidth
- margin
- maxHeight
- maxWidth
- middle
- minHeight
- minWidth
- offset
- oldSelection
- opacity
- padding
- parent
- position
- properties
- ratio
- realChildren
- right
- rippleStrength
- rotation
- scale
- selection
- selectionProgress
- shaders
- shadowBlur
- shadowColor
- shadowOffset
- shrink
- size
- sizeLockCounter
- skew
- spawner
- stroke
- strokeFirst
- styles
- textAlign
- textDirection
- textWrap
- top
- topLeft
- topRight
- view2D
- wrap
- zIndex
- defaultHighlighter
Accessors
- columnGap
- height
- rowGap
- width
- x
- y
Methods

Constructors ​

constructor ​

Parameters

Properties ​

absolutePosition ​

absoluteRotation ​

absoluteScale ​

alignContent ​

alignItems ​

alignSelf ​

antialiased ​

basis ​

bottom ​

bottomLeft ​

bottomRight ​

cache ​

cachePadding ​

children ​

clip ​

code ​

composite ​

compositeOperation ​

creationStack ​

direction ​

drawHooks ​

Examples

element ​

fill ​

filters ​

fontFamily ​

fontSize ​

fontStyle ​

fontWeight ​

gap ​

grow ​

highlighter ​

isClass ​

justifyContent ​

key ​

layout ​

left ​

letterSpacing ​

lineCap ​

lineDash ​

lineDashOffset ​

lineHeight ​

lineJoin ​

lineWidth ​

margin ​

maxHeight ​

maxWidth ​

middle ​

minHeight ​

minWidth ​

offset ​

oldSelection ​

opacity ​

padding ​

parent ​

position ​

Examples

properties ​

ratio ​

right ​

rotation ​

scale ​

Examples

selection ​

Examples

selectionProgress ​

shaders ​

shadowBlur ​

shadowColor ​

shadowOffset ​

shrink ​

size ​

Examples

skew ​

Examples

stroke ​

Constructors

`constructor`

Properties

`absolutePosition`

`absoluteRotation`

`absoluteScale`

`alignContent`

`alignItems`

`alignSelf`

`antialiased`

`basis`

`bottom`

`bottomLeft`

`bottomRight`

`cache`

`cachePadding`

`children`

`clip`

`code`

`composite`

`compositeOperation`

`creationStack`

`direction`

`drawHooks`

`element`

`fill`

`filters`

`fontFamily`

`fontSize`

`fontStyle`

`fontWeight`

`gap`

`grow`

`highlighter`

`isClass`

`justifyContent`

`key`

`layout`

`left`

`letterSpacing`

`lineCap`

`lineDash`

`lineDashOffset`

`lineHeight`

`lineJoin`

`lineWidth`

`margin`

`maxHeight`

`maxWidth`

`middle`

`minHeight`

`minWidth`

`offset`

`oldSelection`

`opacity`

`padding`

`parent`

`position`

`properties`

`ratio`

`right`

`rotation`

`scale`

`selection`

`selectionProgress`

`shaders`

`shadowBlur`

`shadowColor`

`shadowOffset`

`shrink`

`size`

`skew`

`stroke`

`strokeFirst`

`styles`

`textAlign`

`textDirection`

`textWrap`

`top`

`topLeft`