import { MxDbShape } from "mxdraw"
// ... Other content
export class MxDbTriangle extends MxDbShape { 
     // This is necessary to add a transport value to the points attribute, which represents the coordinates of the three points.
     points: THREE.Vector3[] = []
     protected _propertyDbKeys = [. .this._propertyDbKeys, "points"]
    // We'll just override the getShapePoints method so that we can render the three points directly.
    getShapePoints(): THREE.Vector3[] {
        return this.points
    }
}

import { MxDbShape } from "mxdraw"
export class MxDbTriangle extends MxDbShape { 
  // ...
  // Calculate the center of the triangle so that we can control the entire triangle from the midpoint.
  getCenter() {
        const _points = this.getShapePoints()
        // Calculate the number of points
        const numPoints = _points.length;
        // Calculate the sum of the vectors with points
        let sum = new THREE.Vector3();
        for (let i = 0; i < numPoints; i++) {
            sum.add(_points[i]);
        }
        const center = sum.divideScalar(numPoints);
        return center
  }
  // Returns the coordinates of multiple points that can be manipulated and moved, only if you know where the point you want to manipulate is located above it.
   getGripPoints() {
        return [... .this.points, this.getCenter()]
    }
    // Here's where we start moving the position of the point. offset is the offset of the mouse click on the action point, so we can change the position of the point by adding it.
    // So if it's the midpoint, we'll offset all three points of the triangle, and that'll move the whole triangle.
    moveGripPointsAt(index: number, offset: THREE.Vector3): boolean {
        if (index === 3) {
            this.points = [this.points[0].clone().add(offset), this.points[1].clone().add(offset), this.points[2].clone().add(offset)]
        } else {
            this.points[index] = this.points[index].clone().add(offset)
        }
        return true
    } 
}

// Isosceles Triangle
export class MxDbIsoscelesTriangle extends MxDbTriangle {
    protected _propertyDbKeys = [... .this._propertyDbKeys]
    getShapePoints() {
        const [baseStart, baseEnd, topPoint] = this.points
        // Calculate the midpoint of the base of an isosceles triangle.
        const midpoint = baseStart.clone().add(baseEnd).multiplyScalar(0.5);
        // Calculate height and vertex position
        const height = topPoint.distanceTo(midpoint);
        // Calculate the position of topPoint with respect to baseStart and baseEnd.
        const baseVector = new THREE.Vector3().subVectors(baseEnd, baseStart).normalize();
        const perpendicularVector = new THREE.Vector3().crossVectors(baseVector, new THREE.Vector3(0, 0, 1)).normalize();
        const direction = new THREE.Vector3().subVectors(topPoint, midpoint).dot(perpendicularVector);
        const vertex = midpoint.clone().addScaledVector(perpendicularVector, direction >= 0 ? height : -height);
        // Arrange the three dots counterclockwise.
        const _points = [baseStart, baseEnd, vertex];
        return _points.
    }
    getGripPoints() {
        return [... .this.getShapePoints(), this.getCenter()]
    }
}

import { MrxDbgUiPrPoint } from "mxdraw"
const getPoint = new MrxDbgUiPrPoint()
async function drawTriangle() {
    // represents an isosceles triangle
    const triangle = new MxDbIsoscelesTriangle()
    // This is where you get the first mouse click and automatically convert it to three.js coordinates for you.
    const pt1 = await getPoint.go()
    triangle.points.push(pt1)
    // We may need a drawing process, which can be accomplished in this way
    getPoint.setUserDraw((currentPoint, draw) => {
        // Since this dynamic drawing now has only two known points, it can't form a triangle, so we'll draw a straight line to indicate that we're drawing the base of the triangle
        draw.drawLine(currentPoint, pt1)
    })
    // At this point, the pt2 coordinate is obtained by tapping on the screen as follows
    const pt2 = await getPoint.go()
    triangle.points.push(pt2)
   // Now that the triangle example has two more points, we can draw the triangle directly with the dynamic drawing process, and see in real time what the triangle looks like now.
     getPoint.setUserDraw((currentPoint, draw) => {
        // To set the best point of the triangle
        triangle.points[2] = currentPoint
        // and draw it.
        draw.drawCustomEntity(triangle)
    })
    // Finally, we'll tap the screen again to finalize the shape of the triangle.
    const pt3 = await getPoint.go()
    triangle.points[2] = pt3
  // Finally, add it to the control to render it, and the entire triangle is drawn.
    MxFun.getCurrentDraw().addMxEntity(triangle)
}
// Finally, you can start drawing isosceles triangles by triggering the drawTriangle function when you click the button.

<button @click="drawTriangle">Draw Isosceles Triangle</button>

npm run build