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 bbox canvas center curPos curScreenPos editor height isDirty missedData mode modelSpaceBtrId renderer selectionBoxSize selectionSet stats width

Methods

addEntity animate clear createScene cwcs2Wcs highlight initialize onHover onUnhover onWindowResize pick removeEntity rerenderPoints search select selectByBox setCalculateSizeCallback setCursor setLayerVisibility unhighlight updateEntity 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

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): void

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

    Parameters

    • entity: AcDbEntity

      Input the entity 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

setLayerVisibility

  • setLayerVisibility(layerName: string, visible: boolean): void

    Set layer's visibility

    Parameters

    • layerName: string

      Input layer name

    • visible: boolean

      Input visibility of the layer

    Returns void

unhighlight

updateEntity

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

zoomToFit

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods