Get distance after moving node using handle operator

HOOPS Communicator
1

Here I have added Handle operator so that a User can move node using handle operator and thereafter I need to get moved data such as vector and distance and for that functionality I have extended HandleOperator and created a new class.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .viewer {
            width: 80vw;
            height: 80vh;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="viewer"></div>
    </div>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/gh/techsoft3d/hoops-web-viewer@latest/hoops_web_viewer.js"></script>
    <script type="module">
        const getTreeData = (hwv) => {
            const level = 0;
            const model = hwv.model;
            const rootNodeId = model.getAbsoluteRootNode();
            const arrayData = [];
            const pmiData = [];
            const pmi = hwv.model.getPmis();
            if (pmi) {
                Object.keys(pmi).forEach(nodeId => {
                    pmiData.push(Number(nodeId));
                });
            }

            const getNodeData = (mod, nodeId, lev) => {
                const children = mod.getNodeChildren(nodeId);
                const node = {
                    level: lev,
                    nodeId,
                    key: nodeId,
                    isActive: false,
                    isSelected: false,
                    name: mod.getNodeName(nodeId)
                };
                arrayData.push(node.nodeId);
                return {
                    ...node,
                    children: children.length ? children.map((childNodeId) => getNodeData(model, childNodeId, lev + 1)) : [],
                };
            };
            const treeData = getNodeData(model, rootNodeId, level);
            return [treeData, arrayData, pmiData];
        };

        const container = document.querySelector('.viewer')
        const viewer = new Communicator.WebViewer({
            container: container,
            endpointUri: 'models/assembly.scs',
        })

        viewer.setCallbacks({
            sceneReady: () => { },
            modelStructureReady: () => {
                const modelTree = getTreeData(viewer);
                const [treeData, arrayData, pmiData] = modelTree;

                viewer.model.setNodesVisibility(pmiData, false);
            },
            selectionArray: (selectionEvents) => {
                let nodeIds = selectionEvents.map(event => event.getSelection().getNodeId());

                // Check if any nodes are selected
                if (nodeIds.length > 0) {
                    addHandle(nodeIds);
                }
            }
        });

        function addHandle(nodeIds) {
            let handlesOp = viewer.operatorManager.getOperator(Communicator.OperatorId.Handle)
            handlesOp.addHandles(nodeIds).then(() => {
                handlesOp.showHandles();
                viewer.operatorManager.push(Communicator.OperatorId.Handle);
            });

        }
        viewer.start();
    </script>
</body>

</html>

Here is the code for CustomHandleOperator class

 class CustomHandleOperator extends Communicator.Operator.HandleOperator {
            constructor(viewer) {
                super(viewer);
                this.viewer = viewer;
            }

            onMouseUp(event) {
                super.onMouseUp(event);
                let translation = this.getTranslation();
                console.log("Translation Vector:", translation);

                let trackedPoints = this.getTrackedPoints();
                console.log("Tracked Points:", trackedPoints);

                if (trackedPoints.length > 1) {
                    let startPoint = trackedPoints[0];
                    let endPoint = trackedPoints[trackedPoints.length - 1];
                    let distance = Math.sqrt(
                        Math.pow(endPoint.x - startPoint.x, 2) +
                        Math.pow(endPoint.y - startPoint.y, 2) +
                        Math.pow(endPoint.z - startPoint.z, 2)
                    );
                    console.log("Distance Moved:", distance);
                }
            }
        }

        let rightOp = new CustomHandleOperator(viewer);
        let rightOpHandle = viewer.operatorManager.registerCustomOperator(rightOp);
        viewer.operatorManager.push(rightOpHandle);

Without this class, I can move any node by selecting them using handle operator but to get movement details I need CustomClass. But when I add that code handleOperator stops working.

2

Please see this post regarding customizing the HandleOperator. Of note is subclassing from OperatorBase, for example, class CustomHandleOperator extends Communicator.Operators.OperatorBase {}.

Also, there are geometry handle callbacks that could prove useful. Please take a look at handleEvent, handleEventStart, handleEventEnd.