@shapediver/viewer.features.drawing-tools v3.10.0

@shapediver/viewer.features.drawing-tools

This is the npm package for the ShapeDiver Viewer Drawing Tools feature. Please have a look at our help desk section for this feature.

For more information on ShapeDiver, please visit our homepage. If you need help, have a look at our help desk.

Installation

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

Usage

As this is an additional package to the @shapediver/viewer package, we omit the initial setup. Please have a look here.

Initialization

The drawing tools can be initialized with the function createDrawingTools, create a new instance of the drawing tools. The following input can be provided to the function:

• viewport: the viewport API in which the drawing tools should be created
• callbacks: the onUpdate and onCancel callbacks are called by the drawing tools whenever the drawing tools are either updated or cancelled
• settings: the settings with which the Drawing Tools are initialized (see below)

Drawing Tools Settings

The settings that can be provided to the drawing tools are separated into four sections:

geometry

The geometry settings of the drawing tool. Here you can define the points, the mode and specific details of the geometry.

restrictions

The restrictions of the drawing tool.

Here you can define the restrictions that are used when interacting with the drawing tool. At least one restriction is required, the plane and axis restrictions are added by default if no restrictions are defined.

Each restriction is defined by a type and the corresponding properties of that restriction. For further details on this please see the API documentation.

visualization

The visualization settings of the drawing tool. Here you can define the visualization of the drawing tool.

controls

The control settings of the drawing tool. Here you can define which keys are used for the different actions of the drawing tool.

general

The general settings of the drawing tool. Here you can define general settings of the drawing tool.

Code Example

import {
    addListener,
    createSession,
    createViewport,
    EVENTTYPE_DRAWING_TOOLS,
    IEvent
    } from '@shapediver/viewer';
import {
    createDrawingTools,
    IDrawingToolsApi,
    IDrawingToolsEvent,
    PointsData,
    Settings
    } from '@shapediver/viewer.features.drawing-tools';

(async () => {
    // create a viewport
    const viewport = await createViewport({
        canvas: document.getElementById('canvas') as HTMLCanvasElement
    });
    // create a session
    const session = await createSession({
        ticket: 'YOUR_TICKET',
        modelViewUrl: 'YOUR_MODEL_VIEW_URL'
    });

    /**
     * Define the settings you want to use for the drawing tools
     */
    const customizationProperties: Settings = {

    };

    /**
     * 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');
    };

    /**
     * Add an event when the condition for the minimum number of points is not met.
     */
    addListener(EVENTTYPE_DRAWING_TOOLS.MINIMUM_POINTS, (event: IEvent) => {
        console.log((event as IDrawingToolsEvent).message);
    });

    /**
     * Add an event when the maximum number of points has been exceeded.
     */
    addListener(EVENTTYPE_DRAWING_TOOLS.MAXIMUM_POINTS, (event: IEvent) => {
        console.log((event as IDrawingToolsEvent).message);
    });

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