Preview View Component

About 3 min

Preview View Component

PreviewView is a lightweight CAD entity preview component used to display entities independently inside dialogs or sidebars without affecting the main view.

Features

Independent rendering: has its own PixiJS app and rendering context, without affecting the main view
Complete support: supports all CAD entity types, including hatch, linetypes, fonts, and more
Interactive operations: supports mouse-wheel zoom, middle-button pan, and middle-button double-click to zoom extents
Two modes: simple entity addition (addEntity) and full document loading (loadDocument)

Basic Usage

Import Component

import { PreviewView, LineEnt, CircleEnt, Point2D } from 'vjcad';

Create Preview View

// Create preview view instance
const preview = new PreviewView({
    backgroundColor: 0x1a242e,  // Background color
    interactive: true,          // Enable interaction
    defaultColor: 0x00ff00      // Default drawing color (green)
});

// Add to container
document.getElementById('preview-container').appendChild(preview);

// Wait for initialization
await preview.onLoad();

Add Entity Preview

// Create entities
const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 0));
const circle = new CircleEnt(new Point2D(50, 50), 30);

// Add to preview (optional color override)
preview.addEntity(line);               // Use default color
preview.addEntity(circle, 0xff0000);   // Red

// Zoom extents
preview.zoomExtents();

Load from Document Data

// Document data format
const dbDocument = {
    dbBlocks: [{
        blockId: 1,
        name: "*Model",
        lookPt: [0, 0],
        zoom: 1,
        items: [
            { type: "LINE", startPoint: [0, 0], endPoint: [100, 0], color: 1 },
            { type: "CIRCLE", center: [50, 50], radius: 30, color: 2 }
        ]
    }],
    dbLayers: [
        { id: 0, name: "0", color: 7 },
        { id: 1, name: "Layer1", color: 1 }
    ]
};

// Load document data
await preview.loadDocument(dbDocument, "*Model");

Complete Examples

Use in a Dialog

import { PreviewView, LineEnt, CircleEnt, ArcEnt, Point2D } from 'vjcad';

// Create dialog container
const dialog = document.createElement('div');
dialog.style.cssText = `
    position: fixed;
    top: 50px;
    right: 20px;
    width: 300px;
    height: 250px;
    background: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    overflow: hidden;
`;

// Create title bar
const title = document.createElement('div');
title.textContent = 'Entity Preview';
title.style.cssText = `
    padding: 8px 12px;
    background: #1a202c;
    color: white;
    font-size: 14px;
`;

// Create preview container
const previewContainer = document.createElement('div');
previewContainer.style.cssText = `
    width: 100%;
    height: calc(100% - 32px);
`;

dialog.appendChild(title);
dialog.appendChild(previewContainer);
document.body.appendChild(dialog);

// Create preview view
const preview = new PreviewView({
    backgroundColor: 0x1a242e,
    interactive: true,
    defaultColor: 0x00ff00
});
previewContainer.appendChild(preview);

// Wait for initialization
await preview.onLoad();

// Add entities
const line = new LineEnt(new Point2D(0, 0), new Point2D(80, 0));
const circle = new CircleEnt(new Point2D(40, 30), 20);
const arc = new ArcEnt(new Point2D(60, 0), 15, 0, Math.PI / 2);

preview.addEntity(line);
preview.addEntity(circle, 0xff0000);
preview.addEntity(arc, 0x00ffff);

// Zoom extents
preview.zoomExtents();

// Clean up when dialog closes
function closeDialog() {
    dialog.remove();
}

Load Existing Document Data

import { PreviewView } from 'vjcad';

const preview = new PreviewView();
container.appendChild(preview);
await preview.onLoad();

// Full document data
const dbDocument = {
    dbBlocks: [{
        blockId: 1,
        name: "*Model",
        lookPt: [0, 0],
        zoom: 1,
        items: [
            // Rectangle frame
            { type: "LINE", startPoint: [0, 0], endPoint: [100, 0], color: 1, layerId: 0 },
            { type: "LINE", startPoint: [100, 0], endPoint: [100, 80], color: 1, layerId: 0 },
            { type: "LINE", startPoint: [100, 80], endPoint: [0, 80], color: 1, layerId: 0 },
            { type: "LINE", startPoint: [0, 80], endPoint: [0, 0], color: 1, layerId: 0 },
            // Inner circle
            { type: "CIRCLE", center: [50, 40], radius: 25, color: 3, layerId: 1 },
            // Diagonals
            { type: "LINE", startPoint: [0, 0], endPoint: [100, 80], color: 2, layerId: 1 },
            { type: "LINE", startPoint: [100, 0], endPoint: [0, 80], color: 2, layerId: 1 }
        ]
    }],
    dbLayers: [
        { id: 0, name: "0", color: 7, lineType: "Continuous" },
        { id: 1, name: "Construction", color: 1, lineType: "Continuous" }
    ],
    dbTextStyles: [
        { name: "Standard", fontFamily: "Arial", height: 2.5 }
    ]
};

// Load and display
await preview.loadDocument(dbDocument, "*Model");

API Reference

Constructor

new PreviewView(config?: PreviewViewConfig)

`PreviewViewConfig`

Property	Type	Default	Description
`backgroundColor`	`number`	`0x1a242e`	Background color (hex)
`interactive`	`boolean`	`true`	Whether to enable interaction (zoom / pan)
`defaultColor`	`number`	`0xffffff`	Default drawing color

Methods

Method	Parameters	Return	Description
`onLoad()`	-	`Promise<void>`	Wait for component initialization to complete
`addEntity(entity, color?)`	`EntityBase, number?`	`void`	Add one entity (simplified rendering)
`addEntities(entities, color?)`	`EntityBase[], number?`	`void`	Add entities in batch
`loadDocument(dbDocument, blockName?)`	`any, string?`	`Promise<void>`	Load from document data (full rendering)
`clear()`	-	`void`	Clear all entities
`zoomExtents()`	-	`void`	Zoom extents
`setView(center, zoom)`	`Point2D, number`	`void`	Set view center and zoom

Properties

Property	Type	Description
`zoom`	`number`	Current zoom ratio (read-only)
`viewCenter`	`Point2D`	Current view center (read-only)
`document`	`CadDocument \| null`	Loaded document (available after `loadDocument`)

Interactive Operations

Action	Effect
Mouse wheel	Zoom view
Middle-button drag	Pan view
Middle-button double-click	Zoom extents

Two Rendering Modes

`addEntity` Mode (Simplified Rendering)

Suitable for quick preview of a small number of entities
Uses fixed color rendering and does not depend on layers
Does not support complex properties such as linetypes and hatch

preview.addEntity(line, 0xff0000);  // Specify color

`loadDocument` Mode (Full Rendering)

Suitable for previewing complete document data
Supports layer color, linetype, hatch, text style, and more
Uses EntityRenderer full rendering logic
Temporarily switches Engine.activeDocument and restores it after rendering

await preview.loadDocument(dbDocument, "*Model");

Notes

Wait for initialization: use await preview.onLoad() before adding entities
Resource cleanup: resources are automatically cleaned when the component is removed from the DOM
Independence: PreviewView is completely independent of the main view and does not affect Engine.currentDoc or main-view state
Container size: ensure the parent container has explicit width and height, or preview display may be incorrect

Next Steps

Dialog Components - create custom dialogs
Picker Dialogs - color and linetype pickers
Ribbon Menu - toolbar extension