Fundamentals

Editor Configuration

Depending on your desired use case, you may want to enable or disable certain features, such as opening saved profiles, saving profiles or requiring all profiles to have a material set.

Setting your preferences can be done through the capabilities attributes in your HTML Code or by setting the property in your JS/TS code.

your-template-file.html

<!-- Capabilities must be separated by spaces -->
<nu-evolution-editor
        token="your-access-token"
        capabilities="open-profile save-profile select-material"
></nu-evolution-editor>

your-script-file.js

const editor = document.querySelector('nu-evolution-editor');
if(!editor) {
    return
}
editor.capabilities = ['open-profile', 'save-profile']

your-script-file.ts

import {type NuEvolutionEditor, Capability} from '@nuitdev/evo-common'

const editor = document.querySelector<NuEvolutionEditor>('nu-evolution-editor')
if(!editor) {
    return
}
editor.capabilities = [Capability.OPEN_PROFILE, Capability.SAVE_PROFILE]

Following capabilities are available:

Capability	Value	Description
PROFILE_CATALOG_OPEN	'profile-catalog-open'	Enables opening saved profiles
PROFILE_CATALOG_SAVE	'profile-catalog-save'	Enables saving profiles
SELECT_MATERIAL	'select-material'	Enables selecting materials for profiles
REQUIRE_MATERIAL	'require-material'	Require a material to be selected before saving the profile
SAVE_PROFILE	'save-profile'	Show a button next to the material selection to save the currently drawn profile

Saving profile

Depending on your desired use case and UI, there are two ways how to save a profile. Both work equally for new profiles aswell as existing ones.

Save by the host page

The host page can trigger the saving of the profile by calling the saveProfile method on the editor. The returned promise returns the saved profile.

By default, if saveProfile is called, the profile-saved event will not be emitted. This can be changed by passing true as parameter.

saveProfile(emitSaveEvent: boolean = false): Promise<SavedProfileDto>

If the current profile cannot be saved (e.g. due to missing material or invalid geometry), the returned promise will reject with an error message.

Save by the editor

To enable this feature, you must pass the capability 'save-profile' to the editor. This configuration will add a save button to the editor. When clicked, the profile will be saved and the profile-saved event will be emitted. You can access the saved profile through the event detail.

editor.addEventListener('profile-saved', event => {
    console.log('Profile saved', event.detail)
})

Load existing profile

INFO

Prerequisite for loading an existing is that the profile already has been saved (through the nuExchange api) and you have access to the id of the profile you want to edit.

To load an existing profile, simply pass the profile id to the profile-id attribute in your HTML Code or set the profileId in your JS/TS code.

your-template-file.html

<nu-evolution-editor
        token="your-access-token"
        profile-id="12"
></nu-evolution-editor>

your-script-file.ts

import type {NuEvolutionEditor} from '@nuitdev/evo-common'

const editor = document.querySelector<NuEvolutionEditor>('nu-evolution-editor')
if(!editor) {
    return
}
editor.profileId = 12