Built-in operator customization

[Toshi-TS3D]

Introduction

This article shows how you can customize a HOOPS Communicator Web Viewer built-in operator through a resizable Redline Rectangle Operator example.

resize redline

Approach

If you want to enhance or change the behaviors of a built-in operator in HOOPS Web Viewer, there are two ways:

1. Create your own operator
2. Extend a pre-existing built-in operator

In either case, referring to the source code of the target operator will be the first step.
You will find the source code of built-in operators in:

HOOPS Communicator SDK\web_viewer\typescript\operators

You can study how those built-in operators are implemented.

i.e.)
Redline operators are in
\web_viewer\typescript\operators\Redline
\web_viewer\typescript\operators\Markup\Redline

What problem does this example solve?

Although a created red line item can be selected and moved, it is impossible to change the size and delete. In this article, I will show you how to add a resize and enable delete functions by extending the operator rather than creating a new operator.

Sample sore code and usage

custom_redline_operators.zip (5.0 KB)

1. Unzip and locate the custom_redline_operators folder under \quick_start
2. Start start_server.bat and open http://localhost:11180/custom_redline_operators/index.html?viewer=CSR&instance=microengine
3. Select [Redline Rectangle] and click [Set Markup Operator]

Contents of the sample

• index.html - Test HTML page
• MyRedlineRectangleOperator.js - Extended Redline Rectangle operator class
• RedlineResizeHandle.js - Resize handler UI class

Tips

# Create a custom operator extending RedlineRectangleOperator

The following is a minimal extended class of RedlineRectangleOperator

class MyRedlineRectangleOperator extends Communicator.Operator.RedlineRectangleOperator {
    constructor(viewer) {
        super(viewer);
        this._viewer = viewer;
    }
}

# Resize handler and Markup item class

RedlineResizeHandle class is used to create resize handler, resize the redline item and delete the handle. It should be created as a separate class so that it can be used for the redline circle, rectangle, and polyline operators.

BoundaryMarkupRectangle is a custom markup items class. It contains Markup.Shape.Circle to represent handler circles.

# Override functions

You can implement your own process by overriding event handler functions such as onMouseDown, onMouseUp, and onMouseMove.

    onMouseDown(event) {
        super.onMouseDown(event);

        // Judge whether a boundary corner handler (circle markup) is clicked
        const position = event.getPosition();
        this._hittingHandle = this._redlineResizeHandle.isHit(position);

        this._redlineResizeHandle.deleteBoundaryMarkups();

        // when a redline item is activated...
        if (this._activeRedlineItem) {
            this._redlineResizeHandle.createResizeHandle(this._activeRedlineItem);
        }
    }

# Active redline items

You can see the selected Redline Rectangle item object in the below image.

Rectangle location is specified by _point1 (upper-left) and _point2 (lower-right) corner coordinates in 3D.
You can change the location by updating those coordinates.

# How to draw resize handler

The _rectangleShape of selected Redline Rectangle is a markup item. Its 2D position and size can be used for creating resized handle circles.

# How to detect whether a resize handle is clicked

Although hit test code is supposed to be implemented in the hit() function of Markup item class, this sample implements its own hit test code in the RedlineResizeHandle class to avoid conflict with hit test of markup items of Redline Operators.

# How to resize redline rectangle

You can find the changing the redline rectangle position source code in \web_viewer\typescript\operators\Markup\Redline\RedlineRectangle.ts. It is a good reference for resizing.

The mouse drag position (2D) should be changed to a 3D camera point. Compute the delta value by subtracting the previous camera point and adding it to _point1 and _point2.
If the delta value is added to _point1 or 2, the rectangle will be resized.

The resizing code will be more complex since it handles various behaviors.
i.e.) Resize rectangle height by dragging the upper-center handle

Dragging the upper-left handle (Case 1) adds the delta to _point1, and the lower-right handle (Case 4) adds the delta to _point2.

# How to delete selected redline item

Although deleting selected redline item code is implemented in the onKeyUp event of RedlineOperator class, it doesn't work.

To enable this event, it is necessary to call WebViewer.focusInput() function in onMouseMove event.

If you found this useful or have questions about the built-in operator customization, please let me know in the comments.