How to add arrows? about cm-chessboard HOT 5 CLOSED

export const ARROW_TYPE = {
	brown: {class: 'arrow-brown'}	
}

    addArrow(squareFrom, squareTo, type) {
    	this.arrows.push({from: squareFrom, to: squareTo, type: type})
    }

    removeArrows(squareFrom = undefined, squareTo = undefined) {
    	if (!squareFrom) {
    		this.arrows = []
    	} else {
    		this.arrows = this.arrows.filter((arrow) => {
    			return !(arrow.squareFrom === squareFrom && (squareTo === undefined || arrow.squareTo === squareTo))  
    		})
    	}
    }

drawArrows() {
    	while (this.arrowsGroup.firstChild) {
            this.arrowsGroup.removeChild(this.arrowsGroup.firstChild)
        }
    	this.chessboard.state.arrows.forEach((arrow) => {
            this.drawArrow(arrow.from, arrow.to, arrow.type)
        })
    }
    
    drawArrow(squareFrom, squareTo, type) {
    	const arrowsGroup = Svg.addElement(this.arrowsGroup, "g")
    	arrowsGroup.setAttribute("data-arrow", squareFrom + squareTo)
    	arrowsGroup.setAttribute("class", "arrow " + type.class)
    	
    	const defs = Svg.addElement(arrowsGroup, "defs")
    	const marker = Svg.addElement(defs, "marker")
    	
    	const id = "arrow-" + squareFrom + squareTo;
	    marker.setAttribute("id", id);
	    marker.setAttribute("markerWidth", 10);
	    marker.setAttribute("markerHeight", 10);
	    marker.setAttribute("markerUnits", "strokeWidth");
	    marker.setAttribute("refX", 3);
	    marker.setAttribute("refY", 4);
	    marker.setAttribute("viewBox", "0 0 20 20");
	    marker.setAttribute("orient", "auto");
	    
	    let pathFill = Svg.addElement(marker, "path")
	    pathFill.setAttribute("d","M 0.535156 0.398438 C 0.398438 0.507812 0.316406 0.671875 0.3125 0.847656 C 0.316406 1.02344 0.398438 1.1875 0.535156 1.29688 L 3.01172 3.35938 L 3.72266 4.01563 L 3.01172 4.64453 L 0.535156 6.67969 C 0.394531 6.79297 0.3125 6.96094 0.3125 7.13672 C 0.3125 7.3125 0.394531 7.48047 0.535156 7.59375 C 0.863281 7.85156 1.32813 7.85156 1.65234 7.59375 L 5.45703 4.46094 C 5.59766 4.34766 5.68359 4.17969 5.69141 4 C 5.69141 3.82031 5.60547 3.65234 5.45703 3.54297 L 1.64453 0.394531 C 1.31641 0.148438 0.859375 0.148438 0.535156 0.398438 Z M 0.535156 0.398438");
	    pathFill.setAttribute("class", "head-fill");
	    marker.appendChild(pathFill);
	    
	    let pathBorder = Svg.addElement(marker, "path")
	    pathBorder.setAttribute("d","M 0.351562 0.246094 C 0.164062 0.390625 0.0507812 0.609375 0.046875 0.847656 C 0.0507812 1.08203 0.164062 1.30859 0.351562 1.45313 L 2.38281 3.14453 L 3.38281 3.99609 L 2.38281 4.85938 L 0.351562 6.53125 C 0.160156 6.67578 0.0507812 6.89844 0.0507812 7.13672 C 0.0507812 7.375 0.160156 7.59766 0.351562 7.74219 C 0.785156 8.08594 1.40625 8.08594 1.83984 7.74219 L 5.64063 4.61328 C 5.82813 4.46094 5.94141 4.23828 5.94531 4 C 5.94531 3.75781 5.82813 3.53125 5.63281 3.38672 L 1.82422 0.246094 C 1.39063 -0.0820312 0.785156 -0.0820312 0.351562 0.246094 Z M 1.64063 0.394531 L 5.45703 3.54688 C 5.60156 3.65234 5.69141 3.82031 5.69141 4 C 5.68359 4.17969 5.59766 4.34766 5.45313 4.46094 L 1.65234 7.59375 C 1.32813 7.85156 0.863281 7.85156 0.535156 7.59375 C 0.394531 7.48047 0.3125 7.3125 0.3125 7.13672 C 0.3125 6.96094 0.394531 6.79297 0.535156 6.67969 L 2.26953 5.25391 L 3.76563 3.99609 L 3.77734 3.99609 L 0.535156 1.30859 C 0.398438 1.19922 0.316406 1.03516 0.3125 0.859375 C 0.316406 0.683594 0.398438 0.519531 0.535156 0.40625 C 0.859375 0.160156 1.3125 0.15625 1.64063 0.398438 Z M 1.64063 0.394531");
	    pathBorder.setAttribute("class", "head-border");
	    
	    marker.appendChild(pathBorder);
	    defs.appendChild(marker);
	    arrowsGroup.appendChild(defs);
	    
	    const sqfrom = document.querySelectorAll('[data-square="' + squareFrom + '"]')[0];
		const sqto = document.querySelectorAll('[data-square="' + squareTo + '"]')[0];
		
		const x1 = sqfrom.x.baseVal.value + (sqfrom.width.baseVal.value / 2);
		const x2 = sqto.x.baseVal.value  + (sqto.width.baseVal.value / 2);
		const y1 = sqfrom.y.baseVal.value + (sqfrom.height.baseVal.value / 2);
		const y2 = sqto.y.baseVal.value + (sqto.height.baseVal.value / 2);

		let lineBorder = Svg.addElement(arrowsGroup, "line")
	    lineBorder.setAttribute('x1', x1);
	    lineBorder.setAttribute('x2', x2);
	    lineBorder.setAttribute('y1', y1);
	    lineBorder.setAttribute('y2', y2);
	    lineBorder.setAttribute('class', 'line-border');
	    lineBorder.setAttribute("marker-end", "url(#"+id+")");
	    
	    let lineFill = Svg.addElement(arrowsGroup, "line")
	    lineFill.setAttribute('x1', x1);
	    lineFill.setAttribute('x2', x2);
	    lineFill.setAttribute('y1', y1);
	    lineFill.setAttribute('y2', y2);
	    lineFill.setAttribute('class', 'line-fill');
	    
	    arrowsGroup.appendChild(lineBorder);
	    arrowsGroup.appendChild(lineFill);
    }