public getDOMObjects()

in src/component/tag/tag/OutlineRenderTag.ts [52:216]


    public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ViewportSize): vd.VNode[] {
        const vNodes: vd.VNode[] = [];
        const isRect: boolean = this._tag.geometry instanceof RectGeometry;
        const isPerspective: boolean = !isSpherical(this._transform.cameraType);
        const container: { offsetHeight: number, offsetWidth: number } = {
            offsetHeight: size.height, offsetWidth: size.width,
        };

        if (this._tag.icon != null && (isRect || isPerspective)) {
            const [iconBasicX, iconBasicY]: number[] = this._tag.geometry instanceof RectGeometry ?
                this._tag.geometry.getVertex2d(this._tag.iconIndex) :
                this._tag.geometry.getPoleOfInaccessibility2d();

            const iconCanvas: number[] =
                this._viewportCoords.basicToCanvasSafe(
                    iconBasicX,
                    iconBasicY,
                    container,
                    this._transform,
                    camera);

            if (iconCanvas != null) {
                const interact: (e: MouseEvent) => void = (): void => {
                    this._interact$.next({ offsetX: 0, offsetY: 0, operation: TagOperation.None, tag: this._tag });
                };

                if (atlas.loaded) {
                    const sprite: vd.VNode = atlas.getDOMSprite(this._tag.icon, this._tag.iconFloat);
                    const iconCanvasX: number = Math.round(iconCanvas[0]);
                    const iconCanvasY: number = Math.round(iconCanvas[1]);
                    const transform: string = `translate(${iconCanvasX}px,${iconCanvasY}px)`;

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

                    const properties: vd.createProperties = {
                        onclick: click,
                        onpointerdown: interact,
                        style: { transform: transform },
                    };

                    vNodes.push(vd.h("div.mapillary-tag-symbol", properties, [sprite]));
                }
            }
        } else if (this._tag.text != null && (isRect || isPerspective)) {
            const [textBasicX, textBasicY]: number[] = this._tag.geometry instanceof RectGeometry ?
                this._tag.geometry.getVertex2d(3) :
                this._tag.geometry.getPoleOfInaccessibility2d();

            const textCanvas: number[] =
                this._viewportCoords.basicToCanvasSafe(
                    textBasicX,
                    textBasicY,
                    container,
                    this._transform,
                    camera);

            if (textCanvas != null) {
                const textCanvasX: number = Math.round(textCanvas[0]);
                const textCanvasY: number = Math.round(textCanvas[1]);
                const transform: string = this._tag.geometry instanceof RectGeometry ?
                    `translate(${textCanvasX}px,${textCanvasY}px)` :
                    `translate(-50%, -50%) translate(${textCanvasX}px,${textCanvasY}px)`;

                const interact: (e: MouseEvent) => void = (): void => {
                    this._interact$.next({ offsetX: 0, offsetY: 0, operation: TagOperation.None, tag: this._tag });
                };

                const properties: vd.createProperties = {
                    onpointerdown: interact,
                    style: {
                        color: this._colorToCss(this._tag.textColor),
                        transform: transform,
                    },
                    textContent: this._tag.text,
                };

                vNodes.push(vd.h("span.mapillary-tag-symbol", properties, []));
            }
        }

        if (!this._tag.editable) {
            return vNodes;
        }

        const lineColor: string = this._colorToCss(this._tag.lineColor);

        if (this._tag.geometry instanceof RectGeometry) {
            const [centroidBasicX, centroidBasicY]: number[] = this._tag.geometry.getCentroid2d();
            const centroidCanvas: number[] =
                this._viewportCoords.basicToCanvasSafe(
                    centroidBasicX,
                    centroidBasicY,
                    container,
                    this._transform,
                    camera);

            if (centroidCanvas != null) {
                const interact: (e: MouseEvent) => void = this._interact(TagOperation.Centroid, "move");
                const centroidCanvasX: number = Math.round(centroidCanvas[0]);
                const centroidCanvasY: number = Math.round(centroidCanvas[1]);
                const transform: string = `translate(-50%, -50%) translate(${centroidCanvasX}px,${centroidCanvasY}px)`;

                const properties: vd.createProperties = {
                    onpointerdown: interact,
                    style: { background: lineColor, transform: transform },
                };

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

        const vertices2d: number[][] = this._tag.geometry.getVertices2d();

        for (let i: number = 0; i < vertices2d.length - 1; i++) {
            if (isRect &&
                ((this._tag.icon != null && i === this._tag.iconIndex) ||
                    (this._tag.icon == null && this._tag.text != null && i === 3))) {
                continue;
            }

            const [vertexBasicX, vertexBasicY]: number[] = vertices2d[i];
            const vertexCanvas: number[] =
                this._viewportCoords.basicToCanvasSafe(
                    vertexBasicX,
                    vertexBasicY,
                    container,
                    this._transform,
                    camera);

            if (vertexCanvas == null) {
                continue;
            }

            const cursor: InteractionCursor = isRect ?
                i % 2 === 0 ? "nesw-resize" : "nwse-resize" :
                "crosshair";

            const interact: (e: MouseEvent) => void = this._interact(TagOperation.Vertex, cursor, i);
            const vertexCanvasX: number = Math.round(vertexCanvas[0]);
            const vertexCanvasY: number = Math.round(vertexCanvas[1]);
            const transform: string = `translate(-50%, -50%) translate(${vertexCanvasX}px,${vertexCanvasY}px)`;

            const properties: vd.createProperties = {
                onpointerdown: interact,
                style: { background: lineColor, transform: transform, cursor: cursor },
            };

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

            if (!this._tag.indicateVertices) {
                continue;
            }

            const pointProperties: vd.createProperties = {
                style: { background: lineColor, transform: transform },
            };

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

        return vNodes;
    }