public getDOMObjects()

in src/component/tag/tag/OutlineCreateTag.ts [48:173]


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

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

        if (this._geometry instanceof RectGeometry) {
            const anchorIndex: number = (<RectGeometry>this._geometry).anchorIndex;
            const vertexIndex: number = anchorIndex === undefined ? 1 : anchorIndex;
            const [basicX, basicY]: number[] = this._geometry.getVertex2d(vertexIndex);
            const canvasPoint: number[] =
                this._viewportCoords.basicToCanvasSafe(
                    basicX,
                    basicY,
                    container,
                    this._transform,
                    camera);

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

                const completerProperties: vd.createProperties = {
                    onclick: abort,
                    style: { transform: transform },
                };

                vNodes.push(vd.h("div.mapillary-tag-interactor", completerProperties, []));
                vNodes.push(vd.h("div.mapillary-tag-vertex", pointProperties, []));
            }
        } else if (this._geometry instanceof PolygonGeometry) {
            const polygonGeometry: PolygonGeometry = <PolygonGeometry>this._geometry;

            const [firstVertexBasicX, firstVertexBasicY]: number[] = polygonGeometry.getVertex2d(0);
            const firstVertexCanvas: number[] =
                this._viewportCoords.basicToCanvasSafe(
                    firstVertexBasicX,
                    firstVertexBasicY,
                    container,
                    this._transform,
                    camera);

            if (firstVertexCanvas != null) {
                const firstOnclick: (e: MouseEvent) => void = polygonGeometry.polygon.length > 4 ?
                    (e: MouseEvent): void => {
                        e.stopPropagation();
                        polygonGeometry.removeVertex2d(polygonGeometry.polygon.length - 2);
                        this._created$.next(this);
                    } :
                    abort;

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

                const firstClass: string = polygonGeometry.polygon.length > 4 ?
                    "mapillary-tag-completer" :
                    "mapillary-tag-interactor";

                vNodes.push(vd.h("div." + firstClass, completerProperties, []));
            }

            if (polygonGeometry.polygon.length > 3) {
                const [lastVertexBasicX, lastVertexBasicY]: number[] = polygonGeometry.getVertex2d(polygonGeometry.polygon.length - 3);
                const lastVertexCanvas: number[] =
                    this._viewportCoords.basicToCanvasSafe(
                        lastVertexBasicX,
                        lastVertexBasicY,
                        container,
                        this._transform,
                        camera);

                if (lastVertexCanvas != null) {
                    const remove: (e: MouseEvent) => void = (e: MouseEvent): void => {
                        e.stopPropagation();
                        polygonGeometry.removeVertex2d(polygonGeometry.polygon.length - 3);
                    };

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

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

            const verticesBasic: number[][] = polygonGeometry.polygon.slice();
            verticesBasic.splice(-2, 2);
            for (const vertexBasic of verticesBasic) {
                const vertexCanvas: number[] =
                    this._viewportCoords.basicToCanvasSafe(
                        vertexBasic[0],
                        vertexBasic[1],
                        container,
                        this._transform,
                        camera);

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

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

        return vNodes;
    }