Dynamic Views

Dynamic Views let users add, remove, duplicate, resize, and reorder views at runtime. This is useful for products where the number of sides or panels is user-defined — e.g. multi-page booklets, custom packaging, or variable-panel signage.

Enabling Dynamic Views

Set enableDynamicViews: true in your options:

const chamevo = new ChamevoJS({
    canvas,
    options: {
        enableDynamicViews: true,
        dynamicViewsOptions: {
            formats: [[210, 297], [148, 210], [300, 300]],
            minWidth: 50,
            maxWidth: 500,
            minHeight: 50,
            maxHeight: 500,
            pricePerArea: 0.05,
        },
    },
});

Configuration

DynamicViewsOptions

Property	Type	Default	Description
formats	[number, number][]	—	Preset format sizes as [width, height] pairs (in the active unitOfMeasurement). Displayed as selectable cards in the UI.
pricePerArea	number	0	Price per unit area. When set, each dynamic view's dimensions contribute to the total price.
minWidth	number	—	Minimum allowed width.
maxWidth	number	—	Maximum allowed width.
minHeight	number	—	Minimum allowed height.
maxHeight	number	—	Maximum allowed height.

Module Config (CVDynamicViewsModuleConfig)

Fine-tune the UI via modulesConfig.dynamicViews:

options: {
    enableDynamicViews: true,
    modulesConfig: {
        dynamicViews: {
            showFormats: true,
            showCustomSize: true,
            showDuplicate: true,
            showRemove: true,
            showAreaPrice: true,
        },
    },
}

Property	Type	Default	Description
showFormats	boolean	true	Show preset format cards.
showCustomSize	boolean	true	Show custom width/height inputs.
showDuplicate	boolean	true	Show duplicate button on view cards.
showRemove	boolean	true	Show remove button on dynamic view cards.
showAreaPrice	boolean	true	Show area price calculation.

API Methods

addView(options?)

Add a new view at runtime. Returns the new view index, or -1 if dynamic views are disabled.

const index = await chamevo.addView({
    title: 'Page 3',
    width: 300,
    height: 400,
    insertAfter: 1,  // Insert after view index 1
});

Option	Type	Default	Description
title	string	'View N'	Display title for the new view.
width	number	Current view's width	Stage width in pixels.
height	number	Current view's height	Stage height in pixels.
insertAfter	number	Last view	Insert the new view after this index.

New views are created with isDynamic: true and include a print area with a 20px inset.

removeView(index)

Remove a dynamic view. Returns false if the view is not dynamic or is the only view.

const removed = await chamevo.removeView(2);

duplicateView(index)

Deep-copy a view and insert the duplicate immediately after the source. Returns the new view index, or -1 if disabled.

const newIndex = await chamevo.duplicateView(0);

resizeView(index, width, height)

Resize a view's stage dimensions and update its print area.

chamevo.resizeView(1, 600, 400);

reorderViews(fromIndex, toIndex)

Move a view from one position to another.

await chamevo.reorderViews(0, 2); // Move first view to third position

Events

Event	Payload	Description
viewAdd	{ view, index }	A new view was added.
viewRemove	{ view, index }	A view was removed.
viewDuplicate	{ sourceIndex, newView, newIndex }	A view was duplicated.
viewResize	{ viewIndex, width, height, unit }	A view was resized.
viewReorder	{ fromIndex, toIndex }	A view was reordered.

chamevo.on('viewAdd', ({ view, index }) => {
    console.log(`View "${view.title}" added at index ${index}`);
});

chamevo.on('viewResize', ({ viewIndex, width, height, unit }) => {
    console.log(`View ${viewIndex} resized to ${width}x${height} ${unit}`);
});

Area Pricing

When pricePerArea is set, each unlocked dynamic view contributes to the total price based on its dimensions:

area price = width × height × pricePerArea

Dimensions are converted from pixels using unitOfMeasurement (default: mm). Locked dynamic views do not incur area pricing.

options: {
    enableDynamicViews: true,
    unitOfMeasurement: 'cm',
    dynamicViewsOptions: {
        pricePerArea: 0.10,  // $0.10 per cm²
    },
}

UI Component

The cv-views-grid component renders automatically inside cv-customizer when enableDynamicViews is enabled. It provides:

• View cards with generated thumbnails, dimensions, and lock badges
• Drag-and-drop reordering
• Duplicate and remove buttons (dynamic views only)
• Add panel with preset format cards and custom width/height inputs
• Area price display

Next Steps

• Products & Views — Data model and view options
• Pricing — Pricing rules and price calculation
• Events — Complete event reference