Drawing Tools

This feature is still in the Beta-version!

While we tried to ensure that everything already works as expected, please let us know if that is not the case or if you find features missing.

The drawing tools feature can be used to create or edit point and line data. Points can be added, moved or removed. With the available settings, it’s possible to fine tune the drawing tools to the needs of the user.

Multiple restrictions are available which can be used to restrict the point movement to either a grid, angular connections to neighboring lines or other geometry.

The complete API documentation of the drawing tools module can be found here.

This is a feature that can be added via a separate CDN or npm-module on top of our viewer module.

To install it call

CODE

npm install --save @shapediver/viewer.features.drawing-tools

or if you use the viewer via a CDN just can just get the SDVDrawingTools property from the window object.

Initial Setup

The initial setup of the drawing tools is quite straightforward. After creating a viewport (and a session) you can create the drawing tools as follows:

TYPESCRIPT

/**
  * Define the settings you want to use for the drawing tools
  */
const customizationProperties: Settings = {
  // add your settings here  
};

/**
  * Callback function for the drawing tool
  * executed when the drawing tool is updated
  * 
  * @param geometryData 
  */
const onUpdate = async (pointsData: PointsData) => {
    console.log('Drawing tools updated', pointsData);
};

/**
  * Callback function for the drawing tool
  * executed when the drawing tool is cancelled
  */
const onCancel = () => {
    console.log('Drawing tools cancelled');
};

const drawingToolsApi: IDrawingToolsApi | undefined = createDrawingTools(viewport, { onUpdate, onCancel }, customizationProperties);

The settings object of the drawing tools is the most important part to fine tune the drawing tools. For further information on the settings that are available, please visit the API documentation.

Showcase

In this example you can see how a line can be edited. The corresponding geometry data is then used as an input for the model to create the building.

Additional Examples

Additional example can be found on the viewer examples page in the drawing tools section.