How to use the @here/harp-text-canvas.VerticalAlignment.Center function in @here/harp-text-canvas

window.addEventListener("keyup", onKeyUp);

        camera = new THREE.OrthographicCamera(
            -window.innerWidth / 2.0,
            window.innerWidth / 2.0,
            window.innerHeight / 2.0,
            -window.innerHeight / 2.0
        );
        camera.position.z = 1.0;
        camera.near = 0.0;
        camera.updateProjectionMatrix();

        // Init textCanvas
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Left,
            verticalAlignment: VerticalAlignment.Center
        });
        textRenderStyle = new TextRenderStyle();
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 1024).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(applicationCharset, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            }
        );

        // Init Debug Visualization

const textPosition = new THREE.Vector3();

        if (this.projection.type === ProjectionType.Planar) {
            // place the text position at north/west for planar projections.
            textPosition.copy(this.geometry.vertices[3]);
            textPosition.multiplyScalar(0.95);

            this.m_textLayoutStyle = new TextLayoutStyle({
                verticalAlignment: VerticalAlignment.Below,
                horizontalAlignment: HorizontalAlignment.Left
            });
        } else {
            textPosition.copy(middlePoint);

            this.m_textLayoutStyle = new TextLayoutStyle({
                verticalAlignment: VerticalAlignment.Center,
                horizontalAlignment: HorizontalAlignment.Center
            });
        }

        const text = `${tileKey.mortonCode()} (${tileKey.row}, ${tileKey.column}, ${
            tileKey.level
        })`;

        textPosition.add(this.center);
        const textElement = new TextElement(
            text,
            textPosition,
            this.m_textRenderStyle,
            this.m_textLayoutStyle,
            PRIORITY_ALWAYS,
            TEXT_SCALE

textLayoutGui.add(textLayoutStyle, "maxLines", 0.0, 128, 1.0);
        textLayoutGui.add(textLayoutStyle, "tracking", -3.0, 3.0, 0.1);
        textLayoutGui.add(textLayoutStyle, "leading", -3.0, 3.0, 0.1);
        textLayoutGui
            .add(textLayoutStyle, "horizontalAlignment", {
                Left: HorizontalAlignment.Left,
                Center: HorizontalAlignment.Center,
                Right: HorizontalAlignment.Right
            })
            .onChange((value: string) => {
                textLayoutStyle.horizontalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "verticalAlignment", {
                Above: VerticalAlignment.Above,
                Center: VerticalAlignment.Center,
                Below: VerticalAlignment.Below
            })
            .onChange((value: string) => {
                textLayoutStyle.verticalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "wrappingMode", {
                None: WrappingMode.None,
                Character: WrappingMode.Character,
                Word: WrappingMode.Word
            })
            .onChange((value: string) => {
                textLayoutStyle.wrappingMode = Number(value);
            });

        gui.add(guiOptions, "scale", 0.01, 10.0, 0.01);

textLayoutGui.add(textLayoutStyle, "maxLines", 0.0, 128, 1.0);
        textLayoutGui.add(textLayoutStyle, "tracking", -3.0, 3.0, 0.1);
        textLayoutGui.add(textLayoutStyle, "leading", -3.0, 3.0, 0.1);
        textLayoutGui
            .add(textLayoutStyle, "horizontalAlignment", {
                Left: HorizontalAlignment.Left,
                Center: HorizontalAlignment.Center,
                Right: HorizontalAlignment.Right
            })
            .onChange((value: string) => {
                textLayoutStyle.horizontalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "verticalAlignment", {
                Above: VerticalAlignment.Above,
                Center: VerticalAlignment.Center,
                Below: VerticalAlignment.Below
            })
            .onChange((value: string) => {
                textLayoutStyle.verticalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "wrappingMode", {
                None: WrappingMode.None,
                Character: WrappingMode.Character,
                Word: WrappingMode.Word
            })
            .onChange((value: string) => {
                textLayoutStyle.wrappingMode = Number(value);
            });
    }

textLayoutGui.add(textLayoutStyle, "maxLines", 0.0, 128, 1.0);
        textLayoutGui.add(textLayoutStyle, "tracking", -3.0, 3.0, 0.1);
        textLayoutGui.add(textLayoutStyle, "leading", -3.0, 3.0, 0.1);
        textLayoutGui
            .add(textLayoutStyle, "horizontalAlignment", {
                Left: HorizontalAlignment.Left,
                Center: HorizontalAlignment.Center,
                Right: HorizontalAlignment.Right
            })
            .onChange((value: string) => {
                textLayoutStyle.horizontalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "verticalAlignment", {
                Above: VerticalAlignment.Above,
                Center: VerticalAlignment.Center,
                Below: VerticalAlignment.Below
            })
            .onChange((value: string) => {
                textLayoutStyle.verticalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "wrappingMode", {
                None: WrappingMode.None,
                Character: WrappingMode.Character,
                Word: WrappingMode.Word
            })
            .onChange((value: string) => {
                textLayoutStyle.wrappingMode = Number(value);
            });
    }

maxLines: style.maxLines,
                lineWidth: style.lineWidth,
                canvasRotation: style.canvasRotation,
                lineRotation: style.lineRotation,
                wrappingMode:
                    style.wrappingMode === "None" ||
                    style.wrappingMode === "Character" ||
                    style.wrappingMode === "Word"
                        ? WrappingMode[style.wrappingMode]
                        : WrappingMode.Word,
                verticalAlignment:
                    style.vAlignment === "Above" ||
                    style.vAlignment === "Center" ||
                    style.vAlignment === "Below"
                        ? VerticalAlignment[style.vAlignment]
                        : VerticalAlignment.Center,
                horizontalAlignment:
                    style.hAlignment === "Left" ||
                    style.hAlignment === "Center" ||
                    style.hAlignment === "Right"
                        ? HorizontalAlignment[style.hAlignment]
                        : HorizontalAlignment.Center
            }
        };
    }
}