private buildUIElements()

in src/canvastools/ts/CanvasTools/Selection/Selectors/PointSelector.ts [80:141]


    private buildUIElements() {
        this.node = this.paper.g();
        this.node.addClass("pointSelector");

        this.crossA = new CrossElement(this.paper, this.boundRect);
        this.point = this.paper.circle(0, 0, PointSelector.DEFAULT_POINT_RADIUS);
        this.point.addClass("pointStyle");

        this.node.add(this.crossA.node);
        this.node.add(this.point);

        const listeners: EventListeners = [
            {
                event: "pointerenter",
                base: this.parentNode,
                listener: () => this.show(),
                bypass: false,
            },
            {
                event: "pointerleave",
                base: this.parentNode,
                listener: () => this.hide(),
                bypass: false,
            },
            {
                event: "pointerdown",
                base: this.parentNode,
                listener: (e: PointerEvent) => {
                    this.show();
                    this.movePoint(this.point, this.crossA);
                    if (typeof this.callbacks.onSelectionBegin === "function") {
                        this.callbacks.onSelectionBegin();
                    }
                },
                bypass: false,
            },
            {
                event: "pointerup",
                base: this.parentNode,
                listener: (e: PointerEvent) => {
                    if (typeof this.callbacks.onSelectionEnd === "function") {
                        this.callbacks.onSelectionEnd(RegionData.BuildPointRegionData(this.crossA.x, this.crossA.y));
                    }
                },
                bypass: false,
            },
            {
                event: "pointermove",
                base: this.parentNode,
                listener: (e: PointerEvent) => {
                    const rect = this.parentNode.getClientRects();
                    const p = new Point2D(e.clientX - rect[0].left, e.clientY - rect[0].top);
                    this.moveCross(this.crossA, p);
                    this.movePoint(this.point, this.crossA);
                    e.preventDefault();
                },
                bypass: false,
            },
        ];

        this.subscribeToEvents(listeners);
    }