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

Methods

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

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

activeLayoutView

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

canvas

center

curMousePos

curPos

editor

height

isDirty

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

modelSpaceBtrId

renderer

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

width

Methods

addEntity

addLayer

addLayout

addTransientEntity

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, hitRadius?: number): string[]

    Picks entities that intersect a hit-region centered at the specified point in world coordinates.

    The hit-region is defined as a square (or bounding box) centered at the input point, whose half-size is determined by the hitRadius parameter. Only entities whose geometry intersects this region are returned.

    Parameters

    • Optionalpoint: AcGeVector2dLike

      The center point of the hit-region in world coordinates. If omitted, the current cursor position is used.

    • OptionalhitRadius: number

      The half-width (in pixel size) of the hit-region around the point. It will be converted on one value in the world coordinate 'wcsHitRadius' and creates a square bounding box: [point.x ± wcsHitRadius, point.y ± wcsHitRadius]. A larger value increases the pick sensitivity. If omitted, a reasonable default is used.

    Returns string[]

    An array of object IDs representing the entities that intersect the hit-region.

removeEntity

removeTransientEntity

rerenderPoints

search

select

selectByBox

setCalculateSizeCallback

setCursor

unhighlight

updateEntity

updateLayer

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

zoomToFitDrawing

  • zoomToFitDrawing(timeout?: number): void

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

    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

zoomToFitLayer

  • zoomToFitLayer(layerName: string): boolean

    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 specified layer and adjusts the view's center and zoom level to show the entire layer. This is useful for getting an overview of the entire layer of one drawing or after loading new content.

    Parameters

    • layerName: string

      The layer name

    Returns boolean

    • Return true if zoomed to the layer successfully.

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods