Viewer Mode

viewMode: "viewer" is a lightweight embedded mode that shows only the drawing area and hides menus, toolbars, command line, and other UI elements. It is suitable for embedding CAD drawings into third-party systems for viewing.

Features

• Clean interface: shows only the drawing area, without menus, toolbars, or sidebars
• Read-only viewing: suitable for drawing browsing scenarios where editing is not needed
• Interactive support: supports basic interactions such as zooming, panning, and entity selection
• Event listening: can listen to selection changes and retrieve entity information
• Lightweight embedding: suitable for embedding in iframes or third-party systems

Basic Usage

Create Viewer View

import { MainView, initCadContainer } from 'vjcad';

const cadView = new MainView({
    appname: "VJ CAD",
    version: "v1.0.0",
    serviceUrl: "http://127.0.0.1:27660/api/v1",
    accessToken: "your-token",
    
    // Set viewer mode
    viewMode: "viewer",
    
    // Optional: hide coordinate axes
    showUcsIcon: false,
    showAxis: false,
});

initCadContainer("cad-container", cadView);
await cadView.onLoad();

UI Configuration Options

View Mode

Option	Type	Default	Description
viewMode	"full" | "viewer"	"full"	View mode. viewer hides all UI components

Fine-Grained UI Control

You can also independently show or hide individual UI parts:

Option	Type	Default	Description
showMenuBar	boolean	true	Whether to show the top menu bar
showToolBar	boolean	true	Whether to show toolbar / Ribbon
showDocBar	boolean	true	Whether to show document tab bar
showCoordsBar	boolean	true	Whether to show the coordinate bar at the bottom of the drawing area
showCommandLine	boolean	true	Whether to show the command-line input area
showBottomBar	boolean	true	Whether to show the bottom status bar
sidebarStyle	"both" | "left" | "right" | "none"	"right"	Sidebar style

Interaction Control

Option	Type	Default	Description
enableContextMenu	boolean	true	Whether to enable context menu. Defaults to false in viewer mode
showGrips	boolean	true	Whether to show selection grips. Defaults to false in viewer mode to prevent dragging edits

Coordinate Axis Display

Option	Type	Default	Description
showUcsIcon	boolean	true	Whether to show the UCS icon in the lower-left corner
showAxis	boolean	true	Whether to draw coordinate axes in the view

Layer Overlay Related

Used when WebCAD is overlaid as a transparent layer on other maps such as vjmap / Mapbox:

Option	Type	Default	Description
backgroundAlpha	number	1	Background transparency (0-1). Set to 0 for transparent background
showCrosshair	boolean	true	Whether to show the crosshair and pick box
disablePointerEvents	boolean	false	Whether to disable mouse events and allow event passthrough
themeMode	number	0	Theme mode. 0 = dark (default), 1 = light

Configuration Examples

Viewer Mode (Minimal Configuration)

const cadView = new MainView({
    viewMode: "viewer",  // Automatically hide all UI
});

Custom UI Combination

// Show only drawing area and command line; hide other UI
const cadView = new MainView({
    showMenuBar: false,
    showToolBar: false,
    showDocBar: false,
    showCoordsBar: false,
    showBottomBar: false,
    sidebarStyle: "none",
    // Keep command line
    showCommandLine: true,
});

Minimal Editing Mode

// Keep toolbar, hide sidebar and command line
const cadView = new MainView({
    showMenuBar: false,
    showToolBar: true,
    showDocBar: false,
    showCommandLine: false,
    showBottomBar: false,
    sidebarStyle: "none",
});

Embedded Preview Mode

// Pure drawing viewer with no UI interference
const cadView = new MainView({
    viewMode: "viewer",
    showUcsIcon: false,
    showAxis: false,
    enableContextMenu: false,
    showGrips: false,
});

Layer Overlay Mode

// Overlay as a transparent layer on a map such as vjmap / Mapbox
const cadView = new MainView({
    viewMode: "viewer",
    showUcsIcon: false,
    showAxis: false,
    backgroundAlpha: 0,           // Transparent background
    showCrosshair: false,         // Hide crosshair
    disablePointerEvents: true,   // Allow events to pass through to underlying map
    themeMode: 0,                 // Dark theme
});

Tips

If you need to overlay WebCAD onto a vjmap / Mapbox map, it is recommended to use the packaged CadMapOverlay component, which already handles view sync, coordinate conversion, entity selection, and more.

Example: View Local Entities

Create entities and display them in viewer mode:

import { MainView, initCadContainer, Engine, LineEnt, CircleEnt, ArcEnt } from 'vjcad';

// Create viewer view
const cadView = new MainView({
    appname: "VJ CAD",
    version: "v1.0.0",
    viewMode: "viewer",
    showUcsIcon: false,
    showAxis: false,
});

initCadContainer("map", cadView);
await cadView.onLoad();

// Create sample entities
const line1 = new LineEnt([0, 0], [100, 0]);
line1.setDefaults();
line1.color = 1;  // Red

const line2 = new LineEnt([100, 0], [100, 80]);
line2.setDefaults();
line2.color = 2;  // Yellow

const circle = new CircleEnt([50, 40], 30);
circle.setDefaults();
circle.color = 3;  // Green

const arc = new ArcEnt([50, 40], 50, 0, Math.PI / 2);
arc.setDefaults();
arc.color = 4;  // Cyan

// Add to canvas
Engine.addEntities([line1, line2, circle, arc]);
Engine.zoomExtents();

Example: View Remote Drawing

Load a drawing from the server and display it in viewer mode:

import { MainView, initCadContainer, Engine, DrawingManagerService } from 'vjcad';

// Create viewer view
const cadView = new MainView({
    appname: "VJ CAD",
    version: "v1.0.0",
    serviceUrl: "http://127.0.0.1:27660/api/v1",
    accessToken: "your-token",
    viewMode: "viewer",
    showUcsIcon: false,
    showAxis: false,
});

initCadContainer("map", cadView);
await cadView.onLoad();

// Open drawing from server
const drawingManager = new DrawingManagerService();

const openResult = await drawingManager.openDrawing({
    type: 'imports',           // Type: 'imports' | 'designs'
    mapid: 'your-map-id',      // Drawing ID
    version: 'v1',             // Version
    branch: 'main',            // Branch name
    patchId: 'base',           // Patch ID
    readOnly: true             // Viewer mode should use read-only mode
});

if (!openResult.success) {
    throw new Error(`Failed to open drawing: ${openResult.error}`);
}

// Load into editor
const webcadData = openResult.webcadData;
const jsonString = openResult.webcadJson;
const docName = `${mapid}_v1_main`;
const virtualFile = new File([jsonString], docName, { type: 'application/json' });
await Engine.view.openDbDoc(virtualFile, webcadData);

// Zoom extents
Engine.zoomExtents();

Listen for Selection Events

In viewer mode, you can listen for entity-selection events and retrieve selected entity information:

import { CadEventManager, CadEvents } from 'vjcad';

const events = CadEventManager.getInstance();

events.on(CadEvents.SelectionChanged, (args) => {
    const entities = args.currentSelection;
    
    if (entities.length === 0) {
        console.log("Selection cleared");
        return;
    }
    
    console.log(`Selected ${entities.length} entities:`);
    entities.forEach((ent, index) => {
        console.log(`[${index + 1}] Type: ${ent.type}, objectId: ${ent.objectId}`);
    });
});

Add Coordinate Display

Add a custom coordinate display in viewer mode:

// Create coordinate display element
const coordsDiv = document.createElement('div');
coordsDiv.style.cssText = `
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 12px;
    background-color: rgba(30, 42, 54, 0.9);
    border: 1px solid #3d4a5c;
    border-radius: 4px;
    color: #e8eaed;
    font-family: sans-serif, Arial;
    font-size: 13px;
    z-index: 1000;
    pointer-events: none;
`;
coordsDiv.innerHTML = 'X: 0.00, Y: 0.00';
document.getElementById('map').appendChild(coordsDiv);

// Listen for mousemove and update WCS coordinates
const canvas = Engine.pcanvas;
canvas.div.addEventListener('mousemove', (e) => {
    const canvasPt = { x: e.offsetX, y: e.offsetY };
    const wcsPt = canvas.trans.CanvasToWcs(canvasPt);
    coordsDiv.innerHTML = `X: ${wcsPt.x.toFixed(2)}, Y: ${wcsPt.y.toFixed(2)}`;
});

Interaction Operations

Action	Effect
Mouse wheel	Zoom view
Left-button drag	Pan view
Left click	Select entity
Left drag selection	Multi-select entities
ESC	Clear selection

Comparison with Full Mode

UI Component	Full Mode (Default)	Viewer Mode
Menu bar (showMenuBar)	Visible	Hidden
Toolbar (showToolBar)	Visible	Hidden
Document bar (showDocBar)	Visible	Hidden
Coordinate bar (showCoordsBar)	Visible	Hidden
Command line (showCommandLine)	Visible	Hidden
Bottom bar (showBottomBar)	Visible	Hidden
Sidebar (sidebarStyle)	Configurable	Hidden
Context menu (enableContextMenu)	Enabled	Disabled
Grip editing (showGrips)	Enabled	Disabled

Capability	Full Mode	Viewer Mode
Entity selection	Supported	Supported
Zoom and pan	Supported	Supported
Command execution	Supported	Not supported
Entity editing	Supported	Not supported

Use Cases

• Drawing preview: preview CAD drawings in a file management system
• Embedded display: embed drawings into web pages or applications
• Read-only viewing: provide drawing access to non-CAD professionals
• Mobile adaptation: view drawings on mobile devices with a simplified UI
• Map overlay: overlay CAD drawings on vjmap / Mapbox maps

Next Steps

• Map Overlay - overlay with vjmap / Mapbox maps
• Preview View Component - lightweight preview component
• Event System - listen to more events
• Open from Server - detailed file operations