Class AcTrView2d

A 2D CAD viewer component that renders CAD drawings using Three.js.

This class extends AcEdBaseView and provides functionality for:

  • Rendering 2D CAD drawings with Three.js WebGL renderer
  • Handling user interactions (pan, zoom, select)
  • Managing layouts, layers, and entities
  • Supporting various CAD file formats (DWG, DXF)

Example

const viewer = new AcTrView2d({
  canvas: document.getElementById('canvas') as HTMLCanvasElement,
  background: 0x000000,
  calculateSizeCallback: () => ({
    width: window.innerWidth,
    height: window.innerHeight
  })
});

Hierarchy (View Summary)

Constructors

constructor

Properties

_canvas events

Accessors

activeLayoutBtrId activeLayoutView aspect backgroundColor bbox canvas center curPos curScreenPos editor height isDirty missedData mode modelSpaceBtrId renderer selectionBoxSize selectionSet stats width

Methods

addEntity addLayer addLayout animate clear createScene cwcs2Wcs highlight initialize onHover onUnhover onWindowResize pick removeEntity rerenderPoints search select selectByBox setCalculateSizeCallback setCursor unhighlight updateEntity updateLayer wcs2Cwcs zoomTo zoomToFit

Constructors

constructor

Properties

Protected_canvas

_canvas: HTMLCanvasElement

The HTML canvas element for rendering

Readonlyevents

events: {
    hover: AcCmEventManager<AcEdViewHoverEventArgs>;
    mouseMove: AcCmEventManager<AcEdMouseEventArgs>;
    unhover: AcCmEventManager<AcEdViewHoverEventArgs>;
    viewResize: AcCmEventManager<AcEdViewResizedEventArgs>;
} = ...

Events fired by the view for various interactions

Type declaration

Accessors

activeLayoutBtrId

  • get activeLayoutBtrId(): string

    The block table record id associated with the active layout

    Returns string

  • set activeLayoutBtrId(value: string): void

    Parameters

    • value: string

    Returns void

activeLayoutView

  • get activeLayoutView(): AcTrLayoutView

    The active layout view

    Returns AcTrLayoutView

aspect

backgroundColor

  • get backgroundColor(): number

    Gets the background color of the view.

    The color is represented as a 24-bit hexadecimal RGB number, e.g., 0x000000 for black.

    Returns number

  • set backgroundColor(value: number): void

    Sets the background color of the view.

    Parameters

    • value: number

      The background color as a 24-bit hexadecimal RGB number

    Returns void

bbox

  • get bbox(): AcGeBox3d

    The bounding box to include all entities in this viewer

    Returns AcGeBox3d

canvas

  • get canvas(): HTMLCanvasElement

    The canvas HTML element used by this view

    Returns HTMLCanvasElement

center

  • get center(): AcGePoint2d

    Gets the center point of the current view in world coordinates.

    Returns AcGePoint2d

    The view center point

  • set center(value: AcGePoint2d): void

    Gets the center point of the current view in world coordinates.

    Parameters

    • value: AcGePoint2d

    Returns void

    The view center point

curPos

  • get curPos(): AcGePoint2d

    Postion of current mouse in world coordinate system

    Returns AcGePoint2d

curScreenPos

  • get curScreenPos(): AcGePoint2d

    Postion of current mouse in screen coordinate system

    Returns AcGePoint2d

editor

  • get editor(): AcEditor

    Gets the input manager for handling user interactions.

    The editor provides high-level methods for getting user input like point selection, entity selection, and cursor management.

    Returns AcEditor

    The editor instance

height

isDirty

  • get isDirty(): boolean

    Gets whether the view needs to be re-rendered.

    Returns boolean

    True if the view is dirty and needs re-rendering

  • set isDirty(value: boolean): void

    Sets whether the view needs to be re-rendered.

    Parameters

    • value: boolean

      True to mark the view as needing re-rendering

    Returns void

missedData

  • get missedData(): { fonts: Record<string, number>; images: Map<string, string> }

    Gets information about missing data during rendering (fonts and images).

    Returns { fonts: Record<string, number>; images: Map<string, string> }

    Object containing maps of missing fonts and images

mode

  • get mode(): AcEdViewMode

    Gets the current view mode.

    The view mode determines how the view responds to user interactions:

    • SELECTION: Click to select entities
    • PAN: Click and drag to pan the view

    Returns AcEdViewMode

    The current view mode

  • set mode(value: AcEdViewMode): void

    Sets the view mode (selection or pan).

    Parameters

    Returns void

modelSpaceBtrId

  • get modelSpaceBtrId(): string

    The block table record id of the model space

    Returns string

  • set modelSpaceBtrId(value: string): void

    Parameters

    • value: string

    Returns void

renderer

  • get renderer(): AcTrRenderer

    Gets the Three.js renderer wrapper used for CAD rendering.

    Returns AcTrRenderer

    The renderer instance

selectionBoxSize

  • get selectionBoxSize(): number

    Gets the size of the selection box used for entity picking.

    This determines how close the mouse needs to be to an entity to select it, measured in screen pixels.

    Returns number

    Selection box size in pixels

  • set selectionBoxSize(value: number): void

    Sets the size of the selection box used for entity picking.

    Parameters

    • value: number

      Selection box size in pixels

    Returns void

selectionSet

stats

  • get stats(): { layouts: AcTrLayoutStats[] }

    The statistics of the current scene

    Returns { layouts: AcTrLayoutStats[] }

width

Methods

addEntity

  • addEntity(entity: AcDbEntity | AcDbEntity[]): void

    Add the specified entity or entities in drawing database into the current scene and draw it or them

    Parameters

    • entity: AcDbEntity | AcDbEntity[]

      Input the entity to add into the current scene

    Returns void

addLayer

  • addLayer(layer: AcDbLayerTableRecord): void

    Add the specified layer in drawing database into the current scene

    Parameters

    • layer: AcDbLayerTableRecord

      Input the layer to add into the current scene

    Returns void

addLayout

  • addLayout(layout: AcDbLayout): void

    Add the specified layout in drawing database into the current scene

    Parameters

    • layout: AcDbLayout

      Input the layout to add into the current scene

    Returns void

animate

clear

ProtectedcreateScene

cwcs2Wcs

  • cwcs2Wcs(point: AcGeVector2dLike): AcGePoint2d

    Converts a point from client window coordinates to world coordinates.

    The client window coordinate system has its origin at the top-left corner of the canvas, with Y increasing downward. World coordinates use the CAD coordinate system with Y typically increasing upward.

    Parameters

    • point: AcGeVector2dLike

      Point in client window coordinates

    Returns AcGePoint2d

    Point in world coordinates

    Example

    const screenPoint = { x: 100, y: 200 }; // 100px right, 200px down
    const worldPoint = view.cwcs2Wcs(screenPoint);
    console.log('World coordinates:', worldPoint.x, worldPoint.y);

highlight

Protectedinitialize

  • initialize(): void
    Protected

    Initializes the viewer after renderer and camera are created.

    This method sets up the initial cursor and can be overridden by child classes to add custom initialization logic.

    Returns void

ProtectedonHover

ProtectedonUnhover

ProtectedonWindowResize

pick

  • pick(point?: AcGeVector2dLike): string[]

    Pick entities intersected with the specified point in the world coordinate system.

    Parameters

    • Optionalpoint: AcGeVector2dLike

      Input the point to pick objects. If not provided, the position of current cursor is used.

    Returns string[]

    Return ids of entities intersected with the specified point

removeEntity

  • removeEntity(objectId: string): void

    Remove the specified entity from this view.

    Parameters

    • objectId: string

      Input the object id of the entity to remove

    Returns void

rerenderPoints

  • rerenderPoints(displayMode: number): void

    Re-render points with latest point style settings

    Parameters

    • displayMode: number

      Input display mode of points

    Returns void

search

select

  • select(point?: AcGeVector2dLike): void

    Select entities intersected with the specified point in the world coordinate system, add them to the current selection set, and highlight them.

    Parameters

    • Optionalpoint: AcGeVector2dLike

    Returns void

selectByBox

  • selectByBox(box: AcGeBox2d): void

    Select entities intersected with the specified bounding box in the world coordinate system, add them to the current selection set, and highlight them.

    Parameters

    • box: AcGeBox2d

      Input one bounding box in the world coordinate system.

    Returns void

setCalculateSizeCallback

setCursor

unhighlight

updateEntity

  • updateEntity(entity: AcDbEntity | AcDbEntity[]): void

    Update the specified entity or entities

    Parameters

    • entity: AcDbEntity | AcDbEntity[]

      Input the entity or entities to update

    Returns void

updateLayer

  • updateLayer(layer: AcDbLayerTableRecord): void

    Update the specified layer in the current scene

    Parameters

    • layer: AcDbLayerTableRecord

      Input the layer to update

    Returns void

wcs2Cwcs

  • wcs2Cwcs(point: AcGeVector2dLike): AcGePoint2d

    Converts a point from world coordinates to client window coordinates.

    This is the inverse of cwcs2Wcs(), converting from the CAD world coordinate system to screen pixel coordinates.

    Parameters

    • point: AcGeVector2dLike

      Point in world coordinates

    Returns AcGePoint2d

    Point in client window coordinates

    Example

    const worldPoint = new AcGePoint2d(10, 20); // CAD coordinates
    const screenPoint = view.wcs2Cwcs(worldPoint);
    console.log('Screen position:', screenPoint.x, screenPoint.y);

zoomTo

  • zoomTo(box: AcGeBox2d, margin?: number): void

    Zooms the view to fit the specified bounding box with optional margin.

    This method adjusts the view's center and zoom level so that the entire specified bounding box is visible within the viewport. The margin parameter adds extra space around the bounding box to provide visual padding.

    Parameters

    • box: AcGeBox2d

      The bounding box to zoom to, in world coordinates

    • margin: number = 1.1

      Additional margin around the bounding box (in world units)

    Returns void

zoomToFit

  • zoomToFit(timeout?: number): void

    Zooms the view to fit all visible entities in the current scene.

    This method automatically calculates the bounding box of all entities currently displayed in the view and adjusts the view's center and zoom level to show the entire scene. This is useful for getting an overview of the entire drawing or after loading new content.

    This function takes effect only if the current view has finished rendering all entities. When opening a file, progressive Rendering is used to render entities incrementally. So this function will wait until all of entities rendered or a timeout occurs.

    Parameters

    • timeout: number = 0

      Maximum time (ms) to wait before executing zoom to fit action. Default: 0 (no timeout).

    Returns void

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods