public getDOMObjects()

in src/component/tag/tag/ExtremePointCreateTag.ts [50:149]
68 lines of code
8 McCabe index (conditional complexity)

    public getDOMObjects(camera: THREE.Camera, size: ViewportSize): vd.VNode[] {
        const container: { offsetHeight: number, offsetWidth: number } = {
            offsetHeight: size.height, offsetWidth: size.width,
        };

        const vNodes: vd.VNode[] = [];

        const points2d: number[][] = this._geometry.getPoints2d();
        const length: number = points2d.length;

        for (let index: number = 0; index < length - 1; index++) {
            const nonModifiedIndex: number = index;
            const [pointX, pointY]: number[] = points2d[index];
            const pointCanvas: number[] =
                this._viewportCoords.basicToCanvasSafe(
                    pointX,
                    pointY,
                    container,
                    this._transform,
                    camera);

            if (!pointCanvas) {
                continue;
            }

            const abort: (e: MouseEvent) => void = (e: MouseEvent): void => {
                e.stopPropagation();
                this._aborted$.next(this);
            };

            const remove: (e: MouseEvent) => void = (e: MouseEvent): void => {
                e.stopPropagation();
                this._geometry.removePoint2d(nonModifiedIndex);
            };

            const transform: string = this._canvasToTransform(pointCanvas);
            const completerProperties: vd.createProperties = {
                onclick: index === 0 && length < 3 ? abort : remove,
                style: { transform: transform },
            };

            vNodes.push(vd.h("div.mapillary-tag-interactor", completerProperties, []));

            const background: string = this._colorToBackground(this._options.color);
            const pointProperties: vd.createProperties = {
                style: {
                    background: background,
                    transform: transform,
                },
            };

            vNodes.push(vd.h("div.mapillary-tag-vertex", pointProperties, []));
        }

        if (length > 2 && this._options.indicateCompleter === true) {
            const [centroidX, centroidY]: number[] = this._geometry.getCentroid2d(this._transform);
            const centroidCanvas: number[] =
                this._viewportCoords.basicToCanvasSafe(
                    centroidX,
                    centroidY,
                    container,
                    this._transform,
                    camera);

            if (!!centroidCanvas) {
                const complete: (e: MouseEvent) => void = (e: MouseEvent): void => {
                    e.stopPropagation();
                    this._geometry.removePoint2d(this._geometry.points.length - 1);
                    this._created$.next(this);
                };

                const transform: string = this._canvasToTransform(centroidCanvas);
                const completerProperties: vd.createProperties = {
                    onclick: complete,
                    style: { transform: transform },
                };

                vNodes.push(vd.h("div.mapillary-tag-completer.mapillary-tag-larger", completerProperties, []));

                const pointProperties: vd.createProperties = {
                    style: {
                        background: this._colorToBackground(this._options.color),
                        transform: transform,
                    },
                };

                vNodes.push(vd.h("div.mapillary-tag-vertex.mapillary-tag-larger", pointProperties, []));

                const dotProperties: vd.createProperties = {
                    style: {
                        transform: transform,
                    },
                };

                vNodes.push(vd.h("div.mapillary-tag-dot", dotProperties, []));
            }
        }

        return vNodes;
    }