flo-mat 3.0.0 → 3.0.2

package/src/debug/functions/cmp-cp-on-delta.ts

@@ -0,0 +1,54 @@
+import { CpNode } from '../../cp-node/cp-node.js';
+import { ContactPoint, compareCps } from '../../contact-point/contact-point.js';
+
+
+/**
+ * @internal
+ * 
+ * Note: For debugging only
+ * 
+ * Checks the position of the ContactPoint (cp) on the boundary piece. 
+ * Returns < 0 if the cp is not on δ, > 0 if it is on the boundary piece 
+ * excluding the endpoints and 0 if it is on the endpoints. Also returns > 0 if
+ * δ === undefined.
+ * 
+ * @param δ The boundary piece
+ * @param cp The contact point
+ */
+function cmpCpOnδ(
+        δ: CpNode[], 
+        cp: ContactPoint) {
+
+    if (δ[0] === undefined) { 
+        return 1;
+    }
+
+    const cpBef = δ[0].cp;
+    const cpAft = δ[1].cp;
+
+    const cmp     = compareCps(cpBef, cpAft); 
+    const cmpPrev = compareCps(cpBef, cp);
+    const cmpNext = compareCps(cp,    cpAft);
+    
+    if (cmp < 0) {
+        if (cmpPrev > 0 || cmpNext > 0) {
+            // console.log(`2-PRONG (antipode) Order is wrong - cmpPrev and cmpNext should be > 0; cmp: ${cmp}, cmpPrev: ${cmpPrev}, cmpNext ${cmpNext}`);
+            return -1;
+        }
+    } else if (cmp > 0) {
+        if (cmpPrev > 0 && cmpNext > 0) {
+            // console.log(`2-PRONG (antipode) Order is wrong: ${cmpPrev}, ${cmpNext}`);
+            return -1;
+        }
+    } 
+
+    if (cmpPrev === 0 || cmpNext === 0) {
+        // console.log('2-PRONG orders are equal.');	
+        return 0;
+    }
+
+    return 1;
+}
+
+
+export { cmpCpOnδ }

package/src/debug/functions/draw/draw-bezier-pieces.ts

@@ -0,0 +1,35 @@
+import { BezierPiece, fromTo } from "flo-bezier3"
+import { drawFs } from "flo-draw"
+
+
+const clss = [
+    'red thin10 nofill',
+    'green thin10 nofill'
+]
+
+
+function drawBezierPieces(
+        g: SVGGElement,
+        bezierPieces: BezierPiece[],
+        classes_ = 'red thin10 nofill, green thin10 nofill, deeppink thin10 nofill',
+        delay = 0,
+        scaleFactor = 1) {
+
+    const $svgs: SVGElement[] = [];
+
+    const classes = classes_.split(',');
+    for (let i=0; i<bezierPieces.length; i++) {
+        const piece = bezierPieces[i];
+        const { ps, ts } = piece;
+        if (ts[0] === ts[1]) {
+            $svgs.push(...drawFs.crossHair(g, ps[0], classes[i%classes.length], scaleFactor, delay));
+        }
+        const bezier = fromTo(ps, ts[0], ts[1]);
+        $svgs.push(...drawFs.bezier(g, bezier, classes[i%classes.length], delay));
+    }
+
+    return $svgs;
+}
+
+
+export { drawBezierPieces }

package/src/debug/functions/draw/draw-beziers-as-single-path.ts

@@ -0,0 +1,40 @@
+import { XMLNS } from "./xmlns.js";
+
+
+function drawBeziersAsSinglePath(
+        g: SVGGElement,
+        beziers: number[][][],
+        class_ = 'thin10 red nofill',
+        delay = 0) {
+
+    if (beziers.length === 0) { return []; }
+
+    const x0 = beziers[0][0][0];
+    const y0 = beziers[0][0][1];
+    let d = `M${x0} ${y0} `;
+
+    for (let i=0; i<beziers.length; i++) {
+        const ps = beziers[i];
+
+        if (ps.length <= 1) { continue; }
+
+        const [,p1,p2,p3] = ps;
+        d += 
+              ps.length === 2
+            ? `L ${p1[0]} ${p1[1]} `
+            : ps.length === 3
+            ? `Q ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} `
+            : `C ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} ${p3[0]} ${p3[1]} `
+    }
+
+    // d += ' z';
+    const $path = document.createElementNS(XMLNS, 'path');
+    $path.setAttributeNS(null, "d", d);
+    $path.setAttributeNS(null, "class", class_); 
+    g.appendChild($path);
+
+    return [$path];
+}
+
+
+export { drawBeziersAsSinglePath }

package/src/debug/functions/draw/draw-disk.ts

@@ -0,0 +1,34 @@
+import { XMLNS } from "./xmlns.js";
+
+
+/**
+ * Draws a circle
+ * @param g An SVG group element wherein to draw the circle.
+ * @param circle 
+ * @param classes 
+ * @param delay 
+ */
+function drawDisk(
+        g: SVGGElement, 
+        circle: { radius: number, center: number[] }, 
+        color = 'black',
+        delay?: number) {
+
+    const c = circle.center;
+    const r = circle.radius;
+
+    const $disk = document.createElementNS(XMLNS, 'circle');
+    $disk.setAttributeNS(null, "cx", c[0].toString());
+    $disk.setAttributeNS(null, "cy", c[1].toString());
+    $disk.setAttributeNS(null, "r", r.toString());
+    $disk.setAttributeNS(null, "fill", color); 
+
+    g.appendChild($disk);
+
+    if (delay) { setTimeout(() => $disk.remove(), delay); }
+
+    return [$disk];
+}
+
+
+export { drawDisk }

package/src/debug/functions/draw/xmlns.ts

@@ -0,0 +1,5 @@
+
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+
+export { XMLNS }

package/src/debug/functions/draw-elem/branch.ts

@@ -13,7 +13,6 @@ function drawBranch(g: SVGGElement, branch: CpNode[], delay?: number) {
 
     for (const cpNode of branch) {
         if (isTerminating(cpNode)) { continue; }
-        //let bezier = cpNode.matCurveToNextVertex;
         const bezier = getCurveToNext(cpNode);
         if (!bezier) { continue; }
         i++;

package/src/debug/functions/draw-elem/draw-branch.ts

@@ -0,0 +1,39 @@
+import { drawFs } from 'flo-draw';
+import { CpNode } from '../../../cp-node/cp-node.js';
+import { CpNodeFs } from '../../../cp-node/cp-node-fs.js';
+import { getMatCurveToNext } from '../../../cp-node/fs/get-mat-curve-to-next.js';
+import { isTerminating } from '../../../cp-node/fs/is-terminating.js';
+import { drawBeziersAsSinglePath } from '../draw/draw-beziers-as-single-path.js';
+
+
+/** @internal */
+function drawBranch(
+        g: SVGGElement,
+        branch: CpNode[],
+        classes = 'thin5 purple nofill',
+        delay = 0,
+        scaleFactor = 1) {
+
+
+    const $svgs: SVGElement[] = [];
+    let i = 0;
+
+    const pss: number[][][] = [];
+    for (const cpNode of branch) {
+        if (isTerminating(cpNode)) { continue; }
+        const bezier = getMatCurveToNext(cpNode);
+        if (!bezier) { continue; }
+        i++;
+        // $svgs.push( ...drawFs.bezier(g, bezier, classes, delay));
+        pss.push(bezier);
+    }
+    
+    // return $svgs;
+
+    $svgs.push(...drawBeziersAsSinglePath(g, pss, classes, delay));
+
+    return $svgs;
+}
+
+
+export { drawBranch }

package/src/debug/functions/draw-elem/draw-cp-node.ts

@@ -0,0 +1,47 @@
+
+import { drawFs } from 'flo-draw';
+import { scaleCircle } from '../../../geometry/circle.js';
+import { CpNode } from '../../../cp-node/cp-node.js';
+import { CpNodeFs } from '../../../cp-node/cp-node-fs.js';
+
+
+/** @internal */
+function drawCpNode(
+		g: SVGGElement,
+		cpNode: CpNode,
+		classes = 'blue thin2 nofill',
+		delay = 0,
+		scaleFactor = 1) {
+
+	const circle = scaleCircle(
+		cpNode.cp.circle,
+		1
+	);
+	const { center: c, radius: r } = circle;
+	
+	const poss = CpNodeFs.getAllOnCircle(cpNode)
+        .map(cpNode => cpNode.cp.pointOnShape)
+
+	const { dot, circle: drawCircle, crossHair } = drawFs;
+
+	const $circle = drawCircle(g, circle, classes, delay);
+
+	const $cps: SVGElement[] = [];
+	const $ls: SVGElement[] = [];
+	for (let i=0; i<poss.length; i++) {
+		const p = poss[i].p;
+		$cps.push(...dot(g, p, 0.01*(i+1)*scaleFactor, 'blue', delay));
+		$ls.push(...drawFs.line(g, [p, c], 'thin5 red', delay));
+	}
+    
+	const $cross = crossHair(g, c, 'orange thin10 nofill', 2*scaleFactor, delay);
+
+	// if (r === 0) {
+	// 	const $cross = crossHair(g, circle.center, 'red thin2 nofill', 0.02*scaleFactor, delay);
+	// }
+		
+	return [...$cps, ...$ls, ...$circle, ...$cross] as SVGElement[];
+}		
+
+
+export { drawCpNode }

package/src/debug/functions/draw-elem/draw-cull.ts

@@ -0,0 +1,21 @@
+import { drawFs } from "flo-draw";
+
+/** @internal */
+function drawCull(
+        g: SVGGElement,
+        cull: number[],
+        classes = 'thin10 cyan nofill',
+        delay = 0,
+        scaleFactor = 1) {	
+
+    const $elems: SVGElement[] = [];
+
+    $elems.push(...drawFs.crossHair(
+        g, cull, classes, 0.1*scaleFactor, delay)
+    )
+    
+	return $elems;
+}
+
+
+export { drawCull }

package/src/debug/functions/draw-elem/draw-dull-corner.ts

@@ -0,0 +1,21 @@
+import { drawFs } from 'flo-draw';
+import { Curve } from '../../../curve/curve.js';
+
+
+/** @internal */
+function dullCorner(
+		g: SVGGElement,
+		curve: Curve, 
+        classes = 'orange',
+        delay = 0,
+        scaleFactor = 1) {
+
+	const ps = curve.ps; 
+	const p = curve.ps[ps.length-1];
+	const $pos = drawFs.dot(g, p, 0.1*0.5*scaleFactor, classes, delay);
+	
+	return $pos;
+}
+
+
+export { dullCorner }

package/src/debug/functions/draw-elem/draw-elem.ts

@@ -1,65 +1,68 @@
-import { IDebugElems      } from '../../debug-elem-types.js';
-import { drawOneProng     } from './one-prong.js';
-import { twoProng         } from './two-prong.js';
-import { threeProng       } from './three-prong.js';
-import { vertex           } from './vertex.js';
-import { minY             } from './min-y.js';
-import { boundingHull     } from './bounding-hull.js';
-import { looseBoundingBox } from './loose-bounding-box.js';
-import { tightBoundingBox } from './tight-bounding-box.js';
-import { sharpCorner      } from './sharp-corner.js';
-import { dullCorner       } from './dull-corner.js';
-import { drawMat          } from './mat.js';
-import { loop             } from './loop.js';
-import { loops            } from './loops.js';
-import { maxVertex        } from './max-vertex.js';
-import { leaves           } from './leaves.js';
-import { culls            } from './culls.js';
-import { oneProngAtDullCorner } from './one-prong-at-dull-corner.js';
+import { DebugElem, DebugElemKey } from '../../debug-elem-types.js';
+import { drawOneProng } from './draw-one-prong.js';
+import { drawTwoProng } from './draw-two-prong.js';
+import { drawThreeProng } from './draw-three-prong.js';
+import { vertex } from './draw-vertex.js';
+import { minY } from './draw-min-y.js';
+import { boundingHull } from './bounding-hull.js';
+import { looseBoundingBox } from './draw-loose-bounding-box.js';
+import { tightBoundingBox } from './draw-tight-bounding-box.js';
+import { sharpCorner } from './draw-sharp-corner.js';
+import { dullCorner } from './draw-dull-corner.js';
+import { drawMat } from './draw-mat.js';
+import { loop } from './draw-loop.js';
+import { loops } from './draw-loops.js';
+import { maxVertex } from './draw-max-vertex.js';
+import { drawLeaves } from './draw-leaves.js';
+import { drawCull } from './draw-cull.js';
+import { drawBranch } from './draw-branch.js';
+import { oneProngAtDullCorner } from './draw-one-prong-at-dull-corner.js';
+import { drawCpNode } from './draw-cp-node.js';
+import { drawSpeed } from './draw-speed.js';
 
 
-/** @internal */
-type TDrawElemFunctions = 
-	{ [T in keyof IDebugElems]: (
-		g: SVGGElement,
-		elem: IDebugElems[T],
-		classes?: string,
-		delay?: number,
-		scaleFactor?: number) => SVGElement[] };
+type DrawElemFunction<T extends DebugElemKey> = (
+	g: SVGGElement,
+	elem: DebugElem[T],
+	classes?: string,
+	delay?: number,
+	scaleFactor?: number,
+	options?: any) => SVGElement[];
 
 
 /** @internal */
-function notImplementedYet<T extends IDebugElems[keyof IDebugElems]> (g: SVGElement, elem: T) {
-	return [] as SVGElement[];
-}
+type DrawElemFunctions = { [T in DebugElemKey]: DrawElemFunction<T> }
 
 
 /** @internal */
-const drawElemFunctions: TDrawElemFunctions = {
+const drawElemFs: DrawElemFunctions = {
 	oneProng: drawOneProng,
-	oneProngAtDullCorner,
-	twoProng_regular: twoProng,
-	twoProng_failed: twoProng,
-	twoProng_notAdded: twoProng,
-	twoProng_deleted: twoProng,
-	twoProng_holeClosing: twoProng,
-	threeProng,
-	//minY,
+	// oneProngAtDullCorner,
+	// csf,
+	twoProng: drawTwoProng(false, true),
+	threeProng: drawThreeProng,
 	boundingHull,
 	looseBoundingBox,
 	tightBoundingBox,
-	sharpCorner,
-	dullCorner,
+	// sharpCorner,
+	// dullCorner,
 	vertex,
-	mat: drawMat('mat'),
-	sat: drawMat('sat'),
-	//loop,
-	//loops,
+	mat: drawMat,
+	// sat: drawMat('sat'),
 	maxVertex,
-	leaves,
-	culls,
-	cpNode: notImplementedYet
+	leaves: drawLeaves,
+	cull: drawCull,
+	cpNode: drawCpNode,
+	branch: drawBranch,
+	holeCloser: drawTwoProng(false, false),
+	speed: drawSpeed
+}
+
+
+const drawElemFsDetailed: DrawElemFunctions = {
+	...drawElemFs,
+	twoProng: drawTwoProng(true, true),
 }
 
 
-export { drawElemFunctions, TDrawElemFunctions }
+export { drawElemFs, drawElemFsDetailed, DrawElemFunctions }

package/src/debug/functions/draw-elem/draw-leaves.ts

@@ -0,0 +1,51 @@
+import { drawFs } from 'flo-draw';
+import { CpNodeFs } from '../../../cp-node/cp-node-fs.js';
+import { CpNode } from '../../../cp-node/cp-node.js';
+import { drawCirclePercent } from './draw-circle-percent.js';
+
+
+/** @internal */
+function drawLeaves(
+        g: SVGGElement,
+        leaves: CpNode[],
+        classes = 'thin10 deeppink nofill',
+        delay = 0,
+        scaleFactor = 1) {	
+
+    const $elems: SVGElement[] = [];
+    const { line, dot, circle: drawCircle } = drawFs;
+
+    for (const cpNode of leaves) {
+        const cp = cpNode.cp;
+        const { circle } = cp;
+        const { center: c, radius: r } = circle;
+
+        const $center = [drawCirclePercent(g, c, 0.5, 'pinker thin5 nofill')];
+
+        const poss = CpNodeFs.getAllOnCircle(cpNode)
+            .map(cpNode => cpNode.cp.pointOnShape);
+
+        const $ls: SVGElement[] = [];
+        const $cps: SVGElement[] = [];
+        for (let i=0; i<poss.length; i++) {
+            const p = poss[i].p;
+            $cps.push(...dot(g, p, 0.01*(i+1)*scaleFactor, 'pinker', delay));
+            $ls.push(...line(g, [p, c], 'thin5 red', delay));
+        }
+		
+		const $circle = drawCircle(g, circle, classes, delay); 
+		// const $cp = dot(g, p, 0.005*scaleFactor, 'pinker', delay);
+
+		$elems.push(...[
+			...$circle,
+			...$cps,
+			...$ls,
+			...$center
+		]);
+    }
+    
+	return $elems;
+}
+
+
+export { drawLeaves }

package/src/debug/functions/draw-elem/draw-loop.ts

@@ -0,0 +1,16 @@
+//import { Loop } from "../../../loop.js";
+import { Loop } from 'flo-boolean';
+
+
+/** @internal */
+function loop(g: SVGGElement, loop: Loop): SVGElement[] {
+    /*
+    for (let curve of loop.curves) {
+        drawFs.bezier(g, curve.ps, undefined, 1000);
+    }
+    */
+    return [];
+}
+
+
+export { loop }

package/src/debug/functions/draw-elem/draw-loops.ts

@@ -0,0 +1,10 @@
+import { Loop } from 'flo-boolean';
+
+
+/** @hidden */
+function loops(g: SVGGElement, loops: Loop[]): SVGElement[] {
+    return [];
+}
+
+
+export { loops }

package/src/debug/functions/draw-elem/draw-loose-bounding-box.ts

@@ -0,0 +1,21 @@
+import { drawFs } from "flo-draw";
+
+
+/** @internal */
+function looseBoundingBox(
+		g: SVGGElement,
+		box: number[][], 
+        classes = 'thin5 brown nofill',
+        delay = 0,
+        scaleFactor = 1) {
+
+	const [[x0, y0],[x1, y1]] = box;
+	box = [[x0, y0],[x1, y0],[x1,y1],[x0,y1]];
+
+	const $box = drawFs.polygon(g, box, classes, delay);
+	
+	return $box;
+}
+
+
+export { looseBoundingBox }

package/src/debug/functions/draw-elem/draw-mat.ts

@@ -0,0 +1,53 @@
+import { drawFs } from 'flo-draw';
+import { Mat } from '../../../mat/mat.js';
+import { $traverseEdges, traverseEdges, traverseEdges$$ } from '../../../cp-node/fs/traverse-edges.js';
+import { getMatCurveToNext } from '../../../cp-node/fs/get-mat-curve-to-next.js';
+import { CpNodeFs } from '../../../cp-node/cp-node-fs.js';
+import { drawCpNode } from './draw-cp-node.js';
+import { sleep } from '../../../utils/sleep.js';
+
+const { isTerminating } = CpNodeFs;
+
+
+const altClasses = [
+    'thin10 blue nofill',
+    'thin10 red nofill'
+];
+
+/** @internal */
+/*async */function drawMat(
+        g: SVGGElement,
+        mat: Mat,
+        classes_?: string,
+        delay = 0,
+        scaleFactor = 1): /*Promise<*/SVGElement[]/*>*/ {
+
+    let cpNode = mat.cpNode;
+    if (!cpNode) { return []; }
+
+    while (!isTerminating(cpNode)) { cpNode = cpNode.next; }
+
+    const $svgs: SVGElement[] = [];
+
+    let i = 0;
+    traverseEdges(cpNode, async cpNode => {
+        // await sleep(50);
+        if (isTerminating(cpNode)) { return; }
+
+        const bezier = getMatCurveToNext(cpNode);
+        if (!bezier) { return; }
+
+        $svgs.push( ...drawFs.bezier(g, bezier, altClasses[i%2], delay));
+        i++;
+    });
+
+    return $svgs;
+}
+
+
+function drawCurve() {
+
+}
+
+
+export { drawMat }

package/src/debug/functions/draw-elem/draw-max-vertex.ts

@@ -0,0 +1,15 @@
+import { drawFs } from 'flo-draw';
+import { CpNode } from '../../../cp-node/cp-node.js';
+
+
+/** @internal */
+function maxVertex(g: SVGGElement, cpNode: CpNode) {	
+    const circle = cpNode.cp.circle;
+
+    const $elems = drawFs.circle(g, circle, 'brown thin10 nofill');
+        
+	return $elems;
+}
+
+
+export { maxVertex }

package/src/debug/functions/draw-elem/draw-min-y.ts

@@ -0,0 +1,18 @@
+import { toCubic, evalDeCasteljau } from 'flo-bezier3';
+import { drawFs } from 'flo-draw';
+import { PointOnShape } from '../../../point-on-shape/point-on-shape.js';
+
+
+/** @internal */
+function minY(g: SVGGElement, pos: PointOnShape) {
+    const p = evalDeCasteljau(pos.curve.ps, pos.t);
+
+    const $elems = drawFs.crossHair( 
+            g, p, 'red thin10 nofill'
+	);  
+	
+    return $elems;
+}
+
+
+export { minY }

package/src/debug/functions/draw-elem/draw-one-prong-at-dull-corner.ts

@@ -0,0 +1,26 @@
+
+import { drawFs } from 'flo-draw';
+import { PointOnShape } from '../../../point-on-shape/point-on-shape.js';
+import { getOsculatingCircle } from '../../../point-on-shape/get-osculating-circle.js';
+
+
+/** @hidden */
+function oneProngAtDullCorner(
+        g: SVGGElement,
+        pos: PointOnShape,
+        classes?: string,
+        delay = 1000,
+        scaleFactor = 1) {
+
+    //let oCircle = PointOnShape.getOsculatingCircle(Number.POSITIVE_INFINITY, pos);
+    const oCircle = getOsculatingCircle(Number.POSITIVE_INFINITY, pos);
+
+    const $center = drawFs.dot(g, pos.p, 0.1, 'orange');
+    const $circle = drawFs.dot(g, oCircle.center, 0.25, 'orange');
+    const $pos    = drawFs.circle(g, oCircle, 'orange thin10 nofill');
+        
+	return [...$center, ...$circle, ...$pos];
+}
+
+
+export { oneProngAtDullCorner }

package/src/debug/functions/draw-elem/draw-one-prong.ts

@@ -0,0 +1,23 @@
+import { drawFs } from 'flo-draw';
+import { CpNode } from '../../../cp-node/cp-node.js';
+
+
+/** @hidden */
+function drawOneProng(
+        g: SVGGElement,
+        cpNodes: CpNode[],
+        classes?: string,
+        delay = 0,
+        scaleFactor = 1) {
+
+    const cp = cpNodes[0].cp;
+    const { circle, pointOnShape: pos } = cp;
+    const $center = drawFs.dot(g, pos.p, 0.02*scaleFactor, 'deeppink', delay);
+    const $circle = drawFs.dot(g, circle.center, 0.05*scaleFactor, 'deeppink', delay);
+    const $pos    = drawFs.circle(g, circle, 'deeppink thin5 nofill', delay);
+
+	return [...$center, ...$circle, ...$pos];
+}
+
+
+export { drawOneProng }