/* -------------------------- */		
/*        dotsPlugin        8*/		
/* -------------------------- */		

var dotsPlugin = function dotsPlugin() {
				 
						var dots = []											// data root
						
								dots[0] = {}
								dots[0].params = {
									layer: 'dots',
									id: 'dot0',
									rad: 10,
									segs: 24,
								}
								dots[0].stroke = 'grey'
								dots[0].fill = 'grey'
								dots[0].dotidx = Math.round(24 * (0))	// dot pt in form
								dots[0].xstartdrag = 0		// 
								
								dots[1] = {}
								dots[1].params = {
									layer: 'dots',
									id: 'dot1',
									rad: 10,
									segs: 24,
								}
								dots[1].id = 'dot1'
								dots[1].stroke = 'blue'
								dots[1].fill = 'blue'
								dots[1].dotidx = Math.round(24 * (0))		// dot pt in form
								dots[1].xstartdrag = 0

						var		formparams = {}
								
						var tfpoints = []				// form points
						var cls = []							// dots class
	

					function dotsPlugin(params) {							// dotsPlugin
					
							formparams = Object.assign({}, formparams, params, {"dots":0} )
								
							tfpoints = xsfPlugin()(formparams).tfpoints()					// form points
								
							return dotsPlugin
							
					}	
			
				 
				 
				 
					dotsPlugin.render = function () {			// render on formparmas
							for (let i = 0; i < dots.length; i++) {
									let tx = tfpoints[dots[i].dotidx][0]				// xsf point x
									let ty = tfpoints[dots[i].dotidx][1]				// xsf point y
								
									let dotparms = Object.assign(dots[i].params, {"tx":tx, "ty":ty})
									let p = Object.assign({}, formparams, dotparms)	// same as xsf but other tx, ty, rad, segs
													
									dots[i].path = xsfPlugin()(p).fpath()			// i mark path 
							}
							cls = (formparams.layer || "layer") + "_" + (formparams.id || "id") + "_dots"	// set class on form
						
							var dotsLayerUpdate = d3.select('svg').selectAll("." + cls).data(['dots'])
							var dotsLayerEnter = dotsLayerUpdate
								.enter().append("g").attr("class", cls)
											.merge(dotsLayerUpdate)
								
							var dotElemsUpdate = dotsLayerEnter.selectAll('.dot').data(dots, d => d.params.id)
								.attr("class", "dot")
								.attr("d", d => d.path)
								.style("stroke-width", "1.5px")
								.style("stroke", d => {
										return d.color})
								.style("fill", d => d.fill)		
								.style("stroke", d => d.stroke)		
								.call(d3.drag()
										.on("start", dragstarted)
										.on("drag", dragged)
										.on("end", dragended))

							
							var dotElemsEnter = dotElemsUpdate
								.enter().append("path")
								.attr("class", "dot")
								.attr("d", d => d.path)
								.style("stroke-width", "1.5px")
								.style("stroke", d => d.color)
								.style("fill", d => d.fill)		
								.style("stroke", d => d.stroke)		
								.call(d3.drag()
										.on("start", dragstarted)
										.on("drag", dragged)
										.on("end", dragended))	
						
						
						}

						
					dotsPlugin.clear = function() {						// clear .dot elems
								var elemsUpdate = d3.select('svg').selectAll('.dot').data([])
								elemsUpdate
										.exit().remove()
							}		
							
					dotsPlugin.clearAll = function() {						// clear .dot elems
								var elemsUpdate = d3.select('svg').selectAll('.dot').data([])
								elemsUpdate
										.exit().remove()
							}							
						
							function dragstarted(d, i) {
								this.parentNode.appendChild(this)
								dots[i].xstartdrag = d3.event.x
								dots[i].ystartdrag = d3.event.y
							}

							function dragged(d, i) {
						
								let dx = d3.event.dx																// x delta drag
								let ddx = d3.event.x - dots[i].xstartdrag					// x delta from drag start
								
								let dy = d3.event.dy																// y delta drag
								let ddy = d3.event.y - dots[i].ystartdrag					// y delta from drag start
								
								var idx11 = (dots[i].dotidx  + 1 ) % __mapper('xsf').formparams().segs	// next robin on segs
								var idx10 = (dots[i].dotidx ) % __mapper('xsf').formparams().segs			// robin on segs
								
								var xpt11 = __mapper('xsf')().x(idx11)			// next mark point
								var xpt10 = __mapper('xsf')().x(idx10)			// mark point

								
								var pttabs = Math.abs(xpt11 - xpt10)								// delta on mark point
						
								if (((xpt11 - xpt10) < 1.e-6) || (Math.sign(xpt11 - xpt10) === Math.sign(dx))
										&& (pttabs <= Math.abs(ddx)))	{
										
												dots[i].dotidx = idx11			// 

										var p = Object.assign({}, __mapper('xsf')().formparams(), {"pta": dots[0].dotidx, "ptb": dots[1].dotidx})
										__mapper({'xsf': xsfPlugin(p)})					// register xsf - sf


												dotsPlugin.render()
										}
							}

							
							
							function dragended(d, i) {
								dots[i].xstartdrag = d3.event.x
							}	
						
	return dotsPlugin	
}
;