Class VirtualRenderer

The class that is responsible for drawing everything you see on the screen!

Related

editor.renderer

Constructors

constructor

Properties

$allowBoldFonts $changedLines $changes $composition $cursorLayer $fontMetrics $frozen $ghostText $ghostTextWidget $gutter $gutterLayer $horizScroll $keepTextAreaAtCursor $loop $markerBack $markerFront $padding $printMarginEl $resizeObserver $resizeTimer $scrollAnimation $scrollDecorator $size $stopAnimation $textLayer $themeId $timer $vScroll CHANGE_CURSOR CHANGE_FULL CHANGE_GUTTER CHANGE_H_SCROLL CHANGE_LINES CHANGE_MARKER CHANGE_MARKER_BACK CHANGE_MARKER_FRONT CHANGE_SCROLL CHANGE_SIZE CHANGE_TEXT STEPS _rows canvas characterWidth container content cursorPos desiredHeight gutterWidth layerConfig lineHeight margin resizing scrollBar scrollBarH scrollBarV scrollLeft scrollMargin scrollTop scroller session

Methods

$addResizeObserver $autosize $calcSteps $calculateWrappedTextChunks $computeLayerConfig $getLongestLine $moveTextAreaToCursor $renderChanges $updateCachedSize $updateCustomScrollbar $updateLines $updatePrintMargin $updateScrollBarH $updateScrollBarV $updateSizeAsync addGutterDecoration addToken adjustWrapLimit alignCursor animateScrolling attachToShadowRoot destroy freeze getAnimatedScroll getContainerElement getDisplayIndentGuides getFadeFoldWidgets getFirstFullyVisibleRow getFirstVisibleRow getHScrollBarAlwaysVisible getHighlightGutterLine getHighlightIndentGuides getLastFullyVisibleRow getLastVisibleRow getMouseEventTarget getPrintMarginColumn getScrollBottomRow getScrollLeft getScrollTop getScrollTopRow getShowGutter getShowInvisibles getShowPrintMargin getTextAreaContainer getTheme getVScrollBarAlwaysVisible hideComposition hideCursor hideTokensAfterPosition isScrollableBy onChangeNewLineMode onChangeTabSize onGutterResize onResize pixelToScreenCoordinates removeExtraToken removeGhostText removeGutterDecoration screenToTextCoordinates scrollBy scrollCursorIntoView scrollSelectionIntoView scrollTo scrollToLine scrollToRow scrollToX scrollToY setAnimatedScroll setAnnotations setCompositionText setCursorStyle setDisplayIndentGuides setFadeFoldWidgets setGhostText setHScrollBarAlwaysVisible setHighlightGutterLine setHighlightIndentGuides setMargin setMouseCursor setPadding setPrintMarginColumn setScrollMargin setSession setShowGutter setShowInvisibles setShowPrintMargin setStyle setTheme setVScrollBarAlwaysVisible showComposition showCursor textToScreenCoordinates unfreeze unsetStyle updateBackMarkers updateBreakpoints updateCharacterSize updateCursor updateFontSize updateFrontMarkers updateFull updateLines updateText visualizeBlur visualizeFocus

Constructors

constructor

  • new VirtualRenderer(container?, theme?): VirtualRenderer

  • Constructs a new VirtualRenderer within the container specified, applying the given theme.

    Parameters

    • Optional container: HTMLElement

      The root element of the editor

    • Optional theme: string

      The starting theme

    Returns VirtualRenderer

Properties

$allowBoldFonts

$allowBoldFonts: any

$changedLines

$changedLines: {
    firstRow: number;
    lastRow: number;
}

Type declaration

  • firstRow: number
  • lastRow: number

$changes

$changes: number

$composition

$composition: any

$cursorLayer

$cursorLayer: Cursor

$fontMetrics

$fontMetrics: FontMetrics

$frozen

$frozen: boolean

$ghostText

$ghostText: {
    position: {
        column: number;
        row: any;
    };
    text: string;
}

Type declaration

  • position: {
        column: number;
        row: any;
    }
    • column: number
    • row: any
  • text: string

$ghostTextWidget

$ghostTextWidget: {
    className: string;
    column: number;
    el: HTMLDivElement;
    row: any;
}

Type declaration

  • className: string
  • column: number
  • el: HTMLDivElement
  • row: any

$gutter

$gutter: HTMLDivElement

$gutterLayer

$gutterLayer: Gutter

$horizScroll

$horizScroll: boolean

$keepTextAreaAtCursor

$keepTextAreaAtCursor: boolean

$loop

$loop: RenderLoop

$markerBack

$markerBack: Marker

$markerFront

$markerFront: Marker

$padding

$padding: number

$printMarginEl

$printMarginEl: HTMLDivElement

$resizeObserver

$resizeObserver: ResizeObserver

$resizeTimer

$resizeTimer: {
    schedule: { (timeout?: number): void; delay(timeout?: number): void; schedule: ...; call(): void; cancel(): void; isPending(): any; };
    call(): void;
    cancel(): void;
    delay(timeout?): void;
    isPending(): any;
    (timeout?): void;
}

Type declaration

    • (timeout?): void

    • Parameters

      • Optional timeout: number

      Returns void

  • schedule: { (timeout?: number): void; delay(timeout?: number): void; schedule: ...; call(): void; cancel(): void; isPending(): any; }
  • call:function
  • cancel:function
  • delay:function
    • delay(timeout?): void

    • Parameters

      • Optional timeout: number

      Returns void

  • isPending:function

$scrollAnimation

$scrollAnimation: {
    from: any;
    steps: any[];
    to: number;
}

Type declaration

  • from: any
  • steps: any[]
  • to: number

$scrollDecorator

$scrollDecorator: Decorator

$size

$size: {
    $dirty: boolean;
    height: number;
    scrollerHeight: number;
    scrollerWidth: number;
    width: number;
}

Type declaration

  • $dirty: boolean
  • height: number
  • scrollerHeight: number
  • scrollerWidth: number
  • width: number

$stopAnimation

$stopAnimation: boolean

$textLayer

$textLayer: Text

$themeId

$themeId: any

$timer

$timer: number

$vScroll

$vScroll: boolean

CHANGE_CURSOR

CHANGE_CURSOR: number

CHANGE_FULL

CHANGE_FULL: number

CHANGE_GUTTER

CHANGE_GUTTER: number

CHANGE_H_SCROLL

CHANGE_H_SCROLL: number

CHANGE_LINES

CHANGE_LINES: number

CHANGE_MARKER

CHANGE_MARKER: number

CHANGE_MARKER_BACK

CHANGE_MARKER_BACK: number

CHANGE_MARKER_FRONT

CHANGE_MARKER_FRONT: number

CHANGE_SCROLL

CHANGE_SCROLL: number

CHANGE_SIZE

CHANGE_SIZE: number

CHANGE_TEXT

CHANGE_TEXT: number

STEPS

STEPS: number

_rows

_rows: any

canvas

canvas: HTMLDivElement

characterWidth

characterWidth: number

container

container: HTMLElement

content

content: HTMLElement

cursorPos

cursorPos: {
    column: number;
    row: number;
}

Type declaration

  • column: number
  • row: number

desiredHeight

desiredHeight: any

gutterWidth

gutterWidth: any

layerConfig

layerConfig: {
    characterWidth: number;
    firstRow: number;
    firstRowScreen: number;
    gutterOffset: number;
    height: number;
    lastRow: number;
    lineHeight: number;
    maxHeight: number;
    minHeight: number;
    offset: number;
    padding: number;
    width: number;
}

Type declaration

  • characterWidth: number
  • firstRow: number
  • firstRowScreen: number
  • gutterOffset: number
  • height: number
  • lastRow: number
  • lineHeight: number
  • maxHeight: number
  • minHeight: number
  • offset: number
  • padding: number
  • width: number

lineHeight

lineHeight: number

margin

margin: {
    bottom: number;
    h: number;
    left: number;
    right: number;
    top: number;
    v: number;
}

Type declaration

  • bottom: number
  • h: number
  • left: number
  • right: number
  • top: number
  • v: number

resizing

resizing: number

scrollBar

scrollBar: VScrollBar

scrollBarH

scrollBarH: HScrollbar

scrollBarV

scrollBarV: VScrollbar

scrollLeft

scrollLeft: number

scrollMargin

scrollMargin: {
    bottom: number;
    h: number;
    left: number;
    right: number;
    top: number;
    v: number;
}

Type declaration

  • bottom: number
  • h: number
  • left: number
  • right: number
  • top: number
  • v: number

scrollTop

scrollTop: number

scroller

scroller: HTMLElement

session

session: EditSession

Methods

$addResizeObserver

$autosize

$calcSteps

$calculateWrappedTextChunks

  • $calculateWrappedTextChunks(text, position): {
        text: string;
        wrapped: boolean;
    }[]

  • Calculates and organizes text into wrapped chunks. Initially splits the text by newline characters, then further processes each line based on display tokens and session settings for tab size and wrapping limits.

    Parameters

    • text: string
    • position: Point

    Returns {
        text: string;
        wrapped: boolean;
    }[]

$computeLayerConfig

$getLongestLine

$moveTextAreaToCursor

$renderChanges

  • $renderChanges(changes, force?): number

  • Parameters

    • changes: number
    • Optional force: boolean

    Returns number

$updateCachedSize

  • $updateCachedSize(force?, gutterWidth?, width?, height?): number

  • Parameters

    • Optional force: any
    • Optional gutterWidth: any
    • Optional width: any
    • Optional height: any

    Returns number

$updateCustomScrollbar

$updateLines

$updatePrintMargin

$updateScrollBarH

$updateScrollBarV

$updateSizeAsync

addGutterDecoration

  • addGutterDecoration(row, className): void

  • Deprecated; (moved to [[EditSession]])

    Parameters

    • row: any
    • className: any

    Returns void

    Deprecated

addToken

  • addToken(text, type, row, column?): void

  • Parameters

    • text: string
    • type: string
    • row: number
    • Optional column: number

    Returns void

adjustWrapLimit

  • adjustWrapLimit(): boolean

  • Adjusts the wrap limit, which is the number of characters that can fit within the width of the edit area on screen.

    Returns boolean

alignCursor

  • alignCursor(cursor, alignment?): number

  • Parameters

    • cursor: Point
    • Optional alignment: number

    Returns number

animateScrolling

  • animateScrolling(fromValue, callback?): void

  • Parameters

    • fromValue: any
    • Optional callback: any

    Returns void

attachToShadowRoot

destroy

freeze

getAnimatedScroll

getContainerElement

  • getContainerElement(): HTMLElement

  • Returns the root element containing this renderer.

    Returns HTMLElement

getDisplayIndentGuides

getFadeFoldWidgets

getFirstFullyVisibleRow

  • getFirstFullyVisibleRow(): number

  • Returns the index of the first fully visible row. "Fully" here means that the characters in the row are not truncated; that the top and the bottom of the row are on the screen.

    Returns number

getFirstVisibleRow

  • getFirstVisibleRow(): number

  • [Returns the index of the first visible row.]{: #VirtualRenderer.getFirstVisibleRow}

    Returns number

getHScrollBarAlwaysVisible

  • getHScrollBarAlwaysVisible(): boolean

  • Returns whether the horizontal scrollbar is set to be always visible.

    Returns boolean

getHighlightGutterLine

getHighlightIndentGuides

getLastFullyVisibleRow

  • getLastFullyVisibleRow(): number

  • Returns the index of the last fully visible row. "Fully" here means that the characters in the row are not truncated; that the top and the bottom of the row are on the screen.

    Returns number

getLastVisibleRow

  • getLastVisibleRow(): number

  • [Returns the index of the last visible row.]{: #VirtualRenderer.getLastVisibleRow}

    Returns number

getMouseEventTarget

  • getMouseEventTarget(): HTMLElement

  • Returns the element that the mouse events are attached to

    Returns HTMLElement

getPrintMarginColumn

  • getPrintMarginColumn(): number

  • Returns whether the print margin column is being shown or not.

    Returns number

getScrollBottomRow

  • getScrollBottomRow(): number

  • Returns the last visible row, regardless of whether it's fully visible or not.

    Returns number

getScrollLeft

getScrollTop

getScrollTopRow

  • getScrollTopRow(): number

  • Returns the first visible row, regardless of whether it's fully visible or not.

    Returns number

getShowGutter

getShowInvisibles

  • getShowInvisibles(): boolean

  • Returns whether invisible characters are being shown or not.

    Returns boolean

getShowPrintMargin

  • getShowPrintMargin(): boolean

  • Returns whether the print margin is being shown or not.

    Returns boolean

getTextAreaContainer

  • getTextAreaContainer(): HTMLElement

  • Returns the element to which the hidden text area is added.

    Returns HTMLElement

getTheme

  • getTheme(): string

  • [Returns the path of the current theme.]{: #VirtualRenderer.getTheme}

    Returns string

getVScrollBarAlwaysVisible

  • getVScrollBarAlwaysVisible(): boolean

  • Returns whether the horizontal scrollbar is set to be always visible.

    Returns boolean

hideComposition

hideCursor

hideTokensAfterPosition

  • hideTokensAfterPosition(row, column): {
        type: string;
        value: string;
    }[]

  • Parameters

    • row: any
    • column: any

    Returns {
        type: string;
        value: string;
    }[]

isScrollableBy

  • isScrollableBy(deltaX, deltaY): boolean

  • Returns true if you can still scroll by either parameter; in other words, you haven't reached the end of the file or line.

    Parameters

    • deltaX: number

      The x value to scroll by

    • deltaY: number

      The y value to scroll by

    Returns boolean

onChangeNewLineMode

onChangeTabSize

onGutterResize

onResize

  • onResize(force?, gutterWidth?, width?, height?): number
  • Internal

    [Triggers a resize of the editor.]{: #VirtualRenderer.onResize}

    Parameters

    • Optional force: boolean

      If true, recomputes the size, even if the height and width haven't changed

    • Optional gutterWidth: number

      The width of the gutter in pixels

    • Optional width: number

      The width of the editor in pixels

    • Optional height: number

      The hiehgt of the editor, in pixels

    Returns number

pixelToScreenCoordinates

  • pixelToScreenCoordinates(x, y): ScreenCoordinates

  • Parameters

    • x: number
    • y: number

    Returns ScreenCoordinates

removeExtraToken

removeGhostText

removeGutterDecoration

  • removeGutterDecoration(row, className): void

  • Deprecated; (moved to [[EditSession]])

    Parameters

    • row: any
    • className: any

    Returns void

    Deprecated

screenToTextCoordinates

scrollBy

  • scrollBy(deltaX, deltaY): void

  • Scrolls the editor across both x- and y-axes.

    Parameters

    • deltaX: number

      The x value to scroll by

    • deltaY: number

      The y value to scroll by

    Returns void

scrollCursorIntoView

  • scrollCursorIntoView(cursor?, offset?, $viewMargin?): void

  • Scrolls the cursor into the first visibile area of the editor

    Parameters

    • Optional cursor: Point
    • Optional offset: number
    • Optional $viewMargin: {
          bottom?: any;
          top?: any;
      }
      • Optional bottom?: any
      • Optional top?: any

    Returns void

scrollSelectionIntoView

  • scrollSelectionIntoView(anchor, lead, offset?): void

  • Parameters

    • anchor: Point
    • lead: Point
    • Optional offset: number

    Returns void

scrollTo

  • scrollTo(x, y): void

  • Scrolls the editor across both x- and y-axes.

    Parameters

    • x: number

      The x value to scroll to

    • y: number

      The y value to scroll to

    Returns void

scrollToLine

  • scrollToLine(line, center, animate, callback?): void

  • Gracefully scrolls the editor to the row indicated.

    Parameters

    • line: number

      A line number

    • center: boolean

      If true, centers the editor the to indicated line

    • animate: boolean

      If true animates scrolling

    • Optional callback: (() => void)

      Function to be called after the animation has finished

        • (): void

        • Returns void

    Returns void

scrollToRow

  • scrollToRow(row): void

  • Gracefully scrolls from the top of the editor to the row indicated.

    Parameters

    • row: number

      A row id

    Returns void

    Related

    EditSession.setScrollTop

scrollToX

  • scrollToX(scrollLeft): void

  • Scrolls the editor across the x-axis to the pixel indicated.

    Parameters

    • scrollLeft: number

      The position to scroll to

    Returns void

scrollToY

  • scrollToY(scrollTop): void

  • Scrolls the editor to the y pixel indicated.

    Parameters

    • scrollTop: number

      The position to scroll to

    Returns void

setAnimatedScroll

  • setAnimatedScroll(shouldAnimate): void

  • Identifies whether you want to have an animated scroll or not.

    Parameters

    • shouldAnimate: boolean

      Set to true to show animated scrolls

    Returns void

setAnnotations

  • setAnnotations(annotations): void

  • Sets annotations for the gutter.

    Parameters

    • annotations: Annotation[]

      An array containing annotations

    Returns void

setCompositionText

  • setCompositionText(text): void

  • Parameters

    • text: string

      A string of text to use

      Sets the inner text of the current composition to text.

    Returns void

setCursorStyle

setDisplayIndentGuides

setFadeFoldWidgets

setGhostText

setHScrollBarAlwaysVisible

  • setHScrollBarAlwaysVisible(alwaysVisible): void

  • Identifies whether you want to show the horizontal scrollbar or not.

    Parameters

    • alwaysVisible: boolean

      Set to true to make the horizontal scroll bar visible

    Returns void

setHighlightGutterLine

setHighlightIndentGuides

setMargin

  • setMargin(top?, bottom?, left?, right?): void

  • Parameters

    • Optional top: number
    • Optional bottom: number
    • Optional left: number
    • Optional right: number

    Returns void

setMouseCursor

setPadding

  • setPadding(padding): void

  • Sets the padding for all the layers.

    Parameters

    • padding: number

      A new padding value (in pixels)

    Returns void

setPrintMarginColumn

  • setPrintMarginColumn(printMarginColumn): void

  • Identifies whether you want to show the print margin column or not.

    Parameters

    • printMarginColumn: number

      Set to true to show the print margin column

    Returns void

setScrollMargin

  • setScrollMargin(top?, bottom?, left?, right?): void

  • Parameters

    • Optional top: number
    • Optional bottom: number
    • Optional left: number
    • Optional right: number

    Returns void

setSession

  • setSession(session): void

  • Associates the renderer with an [[EditSession EditSession]].

    Parameters

    • session: EditSession

      The session to associate with

    Returns void

setShowGutter

  • setShowGutter(show): void

  • Identifies whether you want to show the gutter or not.

    Parameters

    • show: boolean

      Set to true to show the gutter

    Returns void

setShowInvisibles

  • setShowInvisibles(showInvisibles): void

  • Identifies whether you want to show invisible characters or not.

    Parameters

    • showInvisibles: boolean

      Set to true to show invisibles

    Returns void

setShowPrintMargin

  • setShowPrintMargin(showPrintMargin): void

  • Identifies whether you want to show the print margin or not.

    Parameters

    • showPrintMargin: boolean

      Set to true to show the print margin

    Returns void

setStyle

  • setStyle(style, include?): void

  • [Adds a new class, style, to the editor.]{: #VirtualRenderer.setStyle}

    Parameters

    • style: string

      A class name

    • Optional include: boolean

    Returns void

setTheme

  • setTheme(theme?, cb?): void

  • [Sets a new theme for the editor. theme should exist, and be a directory path, like ace/theme/textmate.]{: #VirtualRenderer.setTheme}

    Parameters

    • Optional theme: string | Theme

      The path to a theme

    • Optional cb: (() => void)

      optional callback

        • (): void

        • Returns void

    Returns void

setVScrollBarAlwaysVisible

  • setVScrollBarAlwaysVisible(alwaysVisible): void

  • Identifies whether you want to show the horizontal scrollbar or not.

    Parameters

    • alwaysVisible: boolean

      Set to true to make the horizontal scroll bar visible

    Returns void

showComposition

showCursor

textToScreenCoordinates

  • textToScreenCoordinates(row, column): {
        pageX: number;
        pageY: number;
    }

  • Returns an object containing the pageX and pageY coordinates of the document position.

    Parameters

    • row: number

      The document row position

    • column: number

      The document column position

    Returns {
        pageX: number;
        pageY: number;
    }

    • pageX: number
    • pageY: number

unfreeze

unsetStyle

  • unsetStyle(style): void

  • [Removes the class style from the editor.]{: #VirtualRenderer.unsetStyle}

    Parameters

    • style: string

      A class name

    Returns void

updateBackMarkers

updateBreakpoints

updateCharacterSize

updateCursor

updateFontSize

updateFrontMarkers

updateFull

  • updateFull(force?): void

  • Triggers a full update of all the layers, for all the rows.

    Parameters

    • Optional force: boolean

      If true, forces the changes through

    Returns void

updateLines

  • updateLines(firstRow, lastRow, force?): void

  • Triggers a partial update of the text, from the range given by the two parameters.

    Parameters

    • firstRow: number

      The first row to update

    • lastRow: number

      The last row to update

    • Optional force: boolean

    Returns void

updateText

visualizeBlur

visualizeFocus

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc