MLightCAD
    Preparing search index...

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

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    _canvas _container events

    Accessors

    activeLayoutBtrId activeLayoutView aspect backgroundColor bbox canvas celtscale center container curMousePos curPos editor height htmlTransientManager internalCamera internalScene isDirty ltscale missedData mode modelSpaceBtrId renderer selectionBoxSize selectionSet stats width

    Methods

    addEntity addLayer addLayout addTransientEntity applySelection canvasToContainer canvasToViewport clear clearHover collectSelectionIdsByBox createScene flyTo getSelectionActionFromEvent getSelectionMode getSelectionPreviewStyle highlight initialize isSelectionClick onHover onUnhover onWindowResize pick removeEntity removeTransientEntity rerenderPoints screenToWorld search select selectByBox selectByBoxWithMode setCalculateSizeCallback setCursor stopAnimationLoop unhighlight updateEntity updateLayer viewportToCanvas viewportToContainer withMode worldToScreen zoomTo zoomToFitDrawing zoomToFitLayer

    Constructors

    Properties

    Protected_canvas

    _canvas: HTMLCanvasElement

    The HTML canvas element for rendering

    Protected_container

    _container: HTMLElement

    The HTML element to contain this view

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

    Events fired by the view for various interactions

    Type Declaration

    Accessors

    • 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

    • get curMousePos(): AcGePoint2d

      Current mouse position in canvas-local screen coordinates (pixels).

      Note: this is NOT viewport/client coordinates; use canvasToViewport() when browser-viewport coordinates are required by DOM APIs.

      Returns AcGePoint2d

    • 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

    • 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

    Methods

    • Moves the current view to the specified 2D point at the given scale.

      Parameters

      • point: AcGeVector2dLike

        Target location in world coordinates to fly the view to.

      • scale: number

        The optional target zoom scale to apply after the transition. If not specified, the scale will not change.

      Returns 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

    • 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.

      • OptionalpickOneOnly: boolean

      Returns AcEdSpatialQueryResultItemEx[]

      Return query results representing the entities that intersect the hit-region.

    • Converts a point from screen coordinates to world coordinates.

      The screen 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 screen coordinates

      Returns AcGePoint2d

      Point in world coordinates

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

    • Update the specified layer in the current scene

      Parameters

      • layer: AcDbLayerTableRecord

        The layer to update

      • changes: Partial<AcDbLayerTableRecordAttrs>

        Changes made to the layer

      Returns void

    • Temporarily switches the view mode, executes an action, then restores the previous mode — even if the action throws.

      This is the mode-level counterpart of AcEditor.withCursor and follows the same save → set → restore pattern.

      Type Parameters

      • T

      Parameters

      • mode: AcEdViewMode

        The temporary view mode to apply

      • action: () => T | Promise<T>

        The async (or sync) action to run under the temporary mode

      Returns Promise<T>

      The value returned by the action

      await view.withMode(AcEdViewMode.SELECTION, async () => {
        const pt = await view.editor.getPoint('Pick a point')
      })
      // view.mode is restored to whatever it was before

    • Converts a point from world coordinates to screen coordinates.

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

      Parameters

      • point: AcGeVector2dLike

        Point in world coordinates

      Returns AcGePoint2d

      Point in screen coordinates

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

    • 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

    • 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

    • 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