frame.image 1.4.0 → 1.5.1

package/dist/Designer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Designer.d.ts","sourceRoot":"","sources":["../src/Designer.tsx"],"names":[],"mappings":"AAcA,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,2CAiQA"}
+{"version":3,"file":"Designer.d.ts","sourceRoot":"","sources":["../src/Designer.tsx"],"names":[],"mappings":"AAeA,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,2CA+QA"}

package/dist/Designer.js

@@ -11,6 +11,7 @@ import { Polygon } from './Polygon';
 import { Point } from './Point';
 import { Finish } from './Finish';
 import { Start } from './Start';
+import { Akima, AkimaPoint, createRT1 } from 'frame.akima';
 export function Designer(props) {
     const nrPoints = props.nrPoints || 128;
     const width = 600;
@@ -22,6 +23,9 @@ export function Designer(props) {
     const [axis, setAxis] = useState({});
     const [rotationAngle, setRotationAngle] = useState(0);
     const [coords, setCoords] = useState(new Polygon([], universeCenter));
+    const [scaledSL, setScaledSL] = useState(undefined);
+    const [scaledSH, setScaledSH] = useState(undefined);
+    const [trademarkCenter, setTrademarkCenter] = useState(undefined);
     const [show, setShow] = useState({
         catmullRomPoints: true,
         catmullRom: true,
@@ -60,7 +64,7 @@ export function Designer(props) {
     };
     function onCloseScaleForm() {
         // if (cont) {
-        //   props.command(ACTION.SCALE_FORM);
+        sendCommand(ACTION.SCALE_FORM);
         // }
         // setShowModalScaleForm(false);
     }
@@ -86,14 +90,13 @@ export function Designer(props) {
         setScalingEnabled(false);
         sendCommand(ACTION.UNDO_TRANSFORMATION);
     };
-    const onClose = (pol) => () => {
-        const catmullRomPolygonRT1 = pol.createCatmullRomPoints(128);
-        catmullRomPolygonRT1.assertEquiDistantAngles();
-        const rt1 = catmullRomPolygonRT1.createRT1();
-        const catmullRomPolygonTR1 = pol.createCatmullRomPoints(1000);
-        catmullRomPolygonTR1.assertEquiDistantAngles();
-        const tr1 = catmullRomPolygonTR1.createTR1();
-        console.log(`TR1: ${tr1}`);
+    const onClose = (pol, trademark) => () => {
+        const pts = pol.Points.map((pt) => new AkimaPoint(pt.X, pt.Y));
+        const { points } = Akima.createPointsByAkima(pts, 128, false);
+        const rt1 = createRT1(points);
+        if (trademark) {
+            console.log(`trademark is now defined at [${trademark.X}, ${trademark.Y}]`);
+        }
         props.onClose(rt1);
     };
     const wCol1 = 1;
@@ -135,7 +138,7 @@ export function Designer(props) {
                                     boxSizing: 'border-box',
                                     backgroundColor: 'rgb(255, 0, 0)',
                                     px: '5px', // horizontal padding of 5px
-                                }, children: _jsx(Start, { machine: currentMachine, onReset: onClickReset, onAfterLoadImage: onAfterLoadImage, onAfterLoadPoints: onAfterLoadPoints, onAfterDefinePoints: onAfterDefinePoints }) }), _jsx(Box, { id: "id.box.canvas", sx: {
+                                }, children: _jsx(Start, { origin: universeCenter, machine: currentMachine, onReset: onClickReset, onAfterLoadImage: onAfterLoadImage, onAfterLoadPoints: onAfterLoadPoints, onAfterDefinePoints: onAfterDefinePoints }) }), _jsx(Box, { id: "id.box.canvas", sx: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     flex: wCol2,
@@ -143,7 +146,7 @@ export function Designer(props) {
                                     height: '100%',
                                     boxSizing: 'border-box',
                                     backgroundColor: 'rgb(173, 216, 230)', // lightblue in rgb
-                                }, children: _jsx(DrawCanvas, { machine: currentMachine, command: sendCommand, width: width, height: height, status: { status, setStatus }, show: show, axis: { axis, setAxis }, imageUrl: imageUrl, coords: { coords, setCoords }, imageCoords: { imageCoords, setImageCoords }, rotation: { rotationAngle, setRotationAngle }, catmullRomPoints: { catmullRomPoints, setCatmullRomPoints } }) }), _jsx(Box, { id: "id.box.ScaleForm", sx: {
+                                }, children: _jsx(DrawCanvas, { machine: currentMachine, command: sendCommand, width: width, height: height, status: { status, setStatus }, show: show, axis: { axis, setAxis }, imageUrl: imageUrl, coords: { coords, setCoords }, trademarkCenter: { trademarkCenter, setTrademarkCenter }, imageCoords: { imageCoords, setImageCoords }, rotation: { rotationAngle, setRotationAngle }, scaledSL: scaledSL, scaledSH: scaledSH, catmullRomPoints: { catmullRomPoints, setCatmullRomPoints } }) }), _jsx(Box, { id: "id.box.ScaleForm", sx: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     flex: wCol3,
@@ -153,9 +156,9 @@ export function Designer(props) {
                                     boxSizing: 'border-box',
                                     overflow: 'auto',
                                     backgroundColor: 'rgb(144, 238, 144)', // lightgreen in rgb
-                                }, children: _jsx(ScaleForm, { title: "Apply Scale", currentPoints: currentMachine.context.nrPoints, coords: { coords, setCoords }, disabled: !scalingEnabled, onCloseCancel: handleCloseScaleFormCancel, onCloseContinue: handleCloseScaleFormContinue }) })] }), _jsx(Box, { id: "id.box.2", sx: {
+                                }, children: _jsx(ScaleForm, { title: "Apply Scale", currentPoints: currentMachine.context.nrPoints, coords: { coords, setCoords }, scaledSL: { value: scaledSL, setValue: setScaledSL }, scaledSH: { value: scaledSH, setValue: setScaledSH }, disabled: !scalingEnabled, onCloseCancel: handleCloseScaleFormCancel, onCloseContinue: handleCloseScaleFormContinue }) })] }), _jsx(Box, { id: "id.box.2", sx: {
                             height: '20%',
                             width: '100%',
                             overflow: 'auto',
-                        }, children: _jsx(Finish, { universeCenter: universeCenter, nrPoints: nrPoints, coords: { coords, setCoords }, onLoad: onLoad, onAfterTransform: onTransform, onAfterReset: onReset, onClose: onClose }) })] })] }));
+                        }, children: _jsx(Finish, { universeCenter: universeCenter, nrPoints: nrPoints, coords: { coords, setCoords }, trademarkCenter: { trademarkCenter, setTrademarkCenter }, onLoad: onLoad, onAfterTransform: onTransform, onAfterReset: onReset, onClose: onClose }) })] })] }));
 }

package/dist/DrawCanvas.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { TAxisHook, TCatmullRomPointsHook, TCoordsHook, TImageHook, TRotationHook, TShow, TStatusHook } from './types';
+import { TAxisHook, TCatmullRomPointsHook, TCoordsHook, TImageHook, TRotationHook, TShow, TStatusHook, TTrademarkHook } from './types';
 export declare function DrawCanvas(props: {
     machine: any;
     command: any;
@@ -10,6 +10,7 @@ export declare function DrawCanvas(props: {
     axis: TAxisHook;
     imageUrl?: string;
     coords: TCoordsHook;
+    trademarkCenter: TTrademarkHook;
     catmullRomPoints: TCatmullRomPointsHook;
     imageCoords: TImageHook;
     rotation: TRotationHook;

package/dist/DrawCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawCanvas.d.ts","sourceRoot":"","sources":["../src/DrawCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqD,MAAM,OAAO,CAAC;AAG/E,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,aAAa,EACb,KAAK,EACL,WAAW,EACZ,MAAM,SAAS,CAAC;AAIjB,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,GAAG,CAAC;IACb,OAAO,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,WAAW,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CA8gBd"}
+{"version":3,"file":"DrawCanvas.d.ts","sourceRoot":"","sources":["../src/DrawCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqD,MAAM,OAAO,CAAC;AAG/E,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,aAAa,EACb,KAAK,EACL,WAAW,EACX,cAAc,EACf,MAAM,SAAS,CAAC;AAKjB,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,GAAG,CAAC;IACb,OAAO,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,eAAe,EAAE,cAAc,CAAC;IAChC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,WAAW,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CAisBd"}

package/dist/DrawCanvas.js

@@ -4,31 +4,73 @@ import { Point } from './Point';
 import { SortedPoints } from './SortedPoints';
 import { ACTION, STATUS } from 'frame.statemachine';
 import { Polygon } from './Polygon';
+import { round } from 'frame.akima';
 export function DrawCanvas(props) {
     const [mousePoint, setMousePoint] = useState(null);
+    const [mousePos, setMousePos] = useState({
+        x: 0,
+        y: 0,
+    });
     const [img, setImg] = useState(null);
+    const [trademarkImage, setTrademarkImage] = useState(null);
     const [zoom, setZoom] = useState(1.0);
     const [isDragging, setIsDragging] = useState(false);
     const [dragStart, setDragStart] = useState(null);
     const universeCenter = useMemo(() => new Point(props.width / 2, props.height / 2), [props.height, props.width]); // Center of the canvas is [400,300]
     const canvasRef = useRef(null);
+    // Memoize the trademark polygon so it's only created when coords change
+    const tradeMarkPolygon = useMemo(() => {
+        if (props.machine.name === STATUS.FORM_SCALED) {
+            return props.coords.coords.scale(0.9, 0.9);
+        }
+        return null;
+    }, [props.machine.name, props.coords.coords]);
+    const fromAngle = useMemo(() => (4 * Math.PI) / 6, []);
+    const toAngle = useMemo(() => (8 * Math.PI) / 6, []);
+    const drawTrade = useCallback((context, point) => {
+        const color = 'blue';
+        const oX = 10;
+        const oY = 10;
+        const p0 = new Point(point.X - oX, point.Y + oY, universeCenter);
+        const p1 = new Point(point.X + oX, point.Y + oY, universeCenter);
+        const p2 = new Point(point.X + oX, point.Y - oY, universeCenter);
+        const p3 = new Point(point.X - oX, point.Y - oY, universeCenter);
+        p0.drawLine(context, p1, color);
+        p1.drawLine(context, p2, color);
+        p2.drawLine(context, p3, color);
+        p3.drawLine(context, p0, color);
+    }, [universeCenter]);
+    const printTrademark = useCallback((context) => {
+        if (props.trademarkCenter.trademarkCenter && trademarkImage) {
+            props.trademarkCenter.trademarkCenter.drawPic(context, trademarkImage);
+        }
+    }, [props.trademarkCenter, trademarkImage]);
     const drawObjects = useCallback((context) => {
+        // Move drawTrademark inside the useCallback
         const sortedPoints = new SortedPoints(props.coords.coords, universeCenter);
         if (props.show.center) {
             sortedPoints.drawCenter(context, 'green', 500);
+            context.fillStyle = 'black';
+            context.fillText(`center: [${Math.round(sortedPoints.Center.X)}, ${Math.round(sortedPoints.Center.Y)}]`, 10, 380);
         }
         if (props.show.box) {
             sortedPoints.drawBox(context);
         }
         if (props.show.scaledBox) {
+            let sl;
+            let sh;
             if (props.scaledSL || props.scaledSH) {
-                const sl = props.scaledSL || 0;
-                const sh = props.scaledSH || 0;
-                const center = sortedPoints.Center;
-                const p1 = new Point(center.X - sl / 2, -center.Y - sh / 2, universeCenter);
-                const p2 = new Point(center.X + sl / 2, -center.Y + sh / 2, universeCenter);
-                Point.drawBox(context, p1, p2, 'black');
+                sl = props.scaledSL || 0;
+                sh = props.scaledSH || 0;
             }
+            else {
+                sl = sortedPoints.getExtension().xExt;
+                sh = sortedPoints.getExtension().yExt;
+            }
+            const center = sortedPoints.Center;
+            const p1 = new Point(center.X - sl / 2, -center.Y - sh / 2, universeCenter);
+            const p2 = new Point(center.X + sl / 2, -center.Y + sh / 2, universeCenter);
+            Point.drawBox(context, p1, p2, 'black');
         }
         if (props.show.polygon) {
             const polygon = new Polygon(props.coords.coords.Points, universeCenter);
@@ -70,6 +112,64 @@ export function DrawCanvas(props) {
         if (props.show.catmullRom) {
             sortedPoints.drawCatmullRom(context);
         }
+        if (props.machine.name === STATUS.FORM_SCALED) {
+            const origin = props.coords.coords.UniverseCenter;
+            // const trademarkPolygon = props.coords.coords.scale(0.9, 0.9);
+            // const trademarkPolygon = props.coords.coords.scaleByRadius(0.9);
+            // setTradeMarkLine(trademarkPolygon);
+            if (tradeMarkPolygon) {
+                const index = tradeMarkPolygon.findMinDistancePoint(new Point(mousePos.x, mousePos.y, universeCenter));
+                const fromIndex = tradeMarkPolygon.findIndexWithAngle(fromAngle);
+                const toIndex = tradeMarkPolygon.findIndexWithAngle(toAngle);
+                if (index >= fromIndex && index <= toIndex) {
+                    const point = tradeMarkPolygon.Points[index];
+                    const p1 = tradeMarkPolygon.Points[index - 1];
+                    const p2 = tradeMarkPolygon.Points[index + 1];
+                    const xDiff = p2.X - p1.X;
+                    const yDiff = p2.Y - p1.Y;
+                    let upperSide = true;
+                    let rightSide = true;
+                    if (xDiff < 0) {
+                        if (yDiff < 0) {
+                            upperSide = false;
+                            console.log(`lower left(${upperSide}, ${rightSide})`);
+                        }
+                        else {
+                            console.log(`upper left(${upperSide}, ${rightSide})`);
+                        }
+                    }
+                    else {
+                        rightSide = false;
+                        if (yDiff < 0) {
+                            upperSide = false;
+                            console.log(`lower right(${upperSide}, ${rightSide})`);
+                        }
+                        else {
+                            console.log(`upper right(${upperSide}, ${rightSide})`);
+                        }
+                    }
+                    if (point) {
+                        // setTrademarkCenter(point);
+                        drawTrade(context, point);
+                    }
+                }
+            }
+        }
+        else {
+            const index = props.coords.coords.findMinDistancePoint(new Point(mousePos.x, mousePos.y, universeCenter));
+            const point = props.coords.coords.Points[index];
+            if (point) {
+                point.draw(context, 'red', { text: 'closest', offset: 10 });
+                context.font = '16px Arial';
+                context.fillStyle = 'black';
+                context.fillText(`point ${index}: [${Math.round(point.X)}, ${Math.round(point.Y)}] mouse[${mousePos.x}, ${mousePos.y}]`, 10, 20);
+            }
+        }
+        // Draw trademark line if it exists
+        if (tradeMarkPolygon) {
+            tradeMarkPolygon.drawSegment(context, 'red', fromAngle, toAngle);
+        }
+        printTrademark(context);
     }, [
         props.coords.coords,
         props.show.center,
@@ -80,15 +180,27 @@ export function DrawCanvas(props) {
         props.show.catmullRomPoints,
         props.show.points,
         props.show.catmullRom,
+        props.machine.name,
         props.scaledSL,
         props.scaledSH,
         props.catmullRomPoints.catmullRomPoints,
-        props.machine.name,
         props.axis.axis.x1,
         props.axis.axis.x2,
         universeCenter,
+        tradeMarkPolygon,
+        printTrademark,
         mousePoint,
+        mousePos.x,
+        mousePos.y,
+        fromAngle,
+        toAngle,
+        drawTrade,
     ]);
+    const loadTrademarkImage = useCallback((onLoad) => {
+        const newImg = new window.Image();
+        newImg.onload = () => onLoad(newImg);
+        newImg.src = '/public/R-Logo-schwarzaufweissq.gif';
+    }, []);
     // Split drawImageBackground into two functions: loadImage and drawImageBackground
     const loadImage = useCallback((src, onLoad) => {
         const newImg = new window.Image();
@@ -97,12 +209,7 @@ export function DrawCanvas(props) {
     }, []);
     // Split drawImageBackground into two functions: loadImage and drawImageBackground
     const drawImageBackground = useCallback((context, canvas) => {
-        if (props.imageUrl && props.show.background) {
-            if (!img) {
-                setImg(null); // Reset img to null before loading a new image
-                loadImage(props.imageUrl, setImg);
-                return true;
-            }
+        if (props.imageUrl && props.show.background && img) {
             context.clearRect(0, 0, canvas.width, canvas.height);
             context.save();
             let rotationRequired = false;
@@ -154,7 +261,6 @@ export function DrawCanvas(props) {
         zoom,
         img,
         drawObjects,
-        loadImage,
         universeCenter.X,
         universeCenter.Y,
     ]);
@@ -242,10 +348,24 @@ export function DrawCanvas(props) {
             case STATUS.POINTS_TRANSFORMED:
                 console.log(`points are already transformed -> no point can be added`);
                 break;
+            case STATUS.FORM_SCALED:
+                if (tradeMarkPolygon) {
+                    const index = tradeMarkPolygon.findMinDistancePoint(point);
+                    const fromIndex = tradeMarkPolygon.findIndexWithAngle(fromAngle);
+                    const toIndex = tradeMarkPolygon.findIndexWithAngle(toAngle);
+                    if (index >= fromIndex || index > toIndex) {
+                        props.trademarkCenter.setTrademarkCenter(tradeMarkPolygon.Points[index]);
+                        console.log(`trademark at [${point.X}, ${point.Y}] index: ${index} -> [${round(tradeMarkPolygon.Points[index].X)}, ${round(tradeMarkPolygon.Points[index].Y)}]`);
+                    }
+                    else {
+                        console.log(`clicked point is outside trademark area`);
+                    }
+                }
+                break;
             default:
                 throw new Error(`Unknown machine state: ${props.machine.name}`);
         }
-    }, [getCurrentPoint, props]);
+    }, [fromAngle, getCurrentPoint, props, toAngle, tradeMarkPolygon]);
     const handleContextMenu = useCallback((event) => {
         event.preventDefault();
         const canvas = canvasRef.current;
@@ -300,6 +420,7 @@ export function DrawCanvas(props) {
         if (!canvas)
             return;
         const point = getCurrentPoint(canvas, event);
+        setMousePos({ x: Math.round(point.X), y: Math.round(point.Y) });
         // Handle image dragging
         if (isDragging && dragStart) {
             const deltaX = event.clientX - dragStart.x;
@@ -360,6 +481,18 @@ export function DrawCanvas(props) {
         setIsDragging(false);
         setDragStart(null);
     }, []);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const context = canvas.getContext('2d');
+            if (context) {
+                if (props.trademarkCenter.trademarkCenter) {
+                    props.trademarkCenter.trademarkCenter.drawCross(context, 'purple', 100, 15);
+                }
+            }
+        }
+    }, [props.trademarkCenter]);
+    // Extra useEffect to handle rotation redraw
     useEffect(() => {
         if (img && props.rotation.rotationAngle !== 0) {
             const canvas = canvasRef.current;
@@ -423,9 +556,11 @@ export function DrawCanvas(props) {
     // Add this useEffect to reset img when imageUrl changes
     useEffect(() => {
         if (props.imageUrl) {
-            setImg(null); // Clear the previous image
-            loadImage(props.imageUrl, setImg); // Load the new image
+            loadImage(props.imageUrl, setImg); // Load the new image only once
         }
     }, [props.imageUrl, loadImage]);
+    useEffect(() => {
+        loadTrademarkImage(setTrademarkImage);
+    }, [loadTrademarkImage]);
     return (_jsx("canvas", { ref: canvasRef, width: props.width, height: props.height, id: "idCanvas", style: { backgroundColor: 'lightgrey' }, children: "Your browser does not support the HTML canvas tag." }));
 }

package/dist/Finish.d.ts

@@ -1,13 +1,14 @@
 import { Polygon } from './Polygon';
 import { Point } from './Point';
-import { TCoordsHook } from './types';
+import { TCoordsHook, TTrademarkHook } from './types';
 export declare function Finish(props: {
     universeCenter: Point;
     nrPoints: number;
     coords: TCoordsHook;
+    trademarkCenter: TTrademarkHook;
     onLoad: (nrPoints: number) => void;
     onAfterTransform: () => void;
     onAfterReset: () => void;
-    onClose: (pol: Polygon) => () => void;
+    onClose: (pol: Polygon, trademark?: Point) => () => void;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Finish.d.ts.map

package/dist/Finish.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Finish.d.ts","sourceRoot":"","sources":["../src/Finish.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAC5B,cAAc,EAAE,KAAK,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;CACvC,2CA4HA"}
+{"version":3,"file":"Finish.d.ts","sourceRoot":"","sources":["../src/Finish.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGtD,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAC5B,cAAc,EAAE,KAAK,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,eAAe,EAAE,cAAc,CAAC;IAChC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE,KAAK,KAAK,MAAM,IAAI,CAAC;CAC1D,2CAyIA"}

package/dist/Finish.js

@@ -3,6 +3,7 @@ import { Box, Button } from '@mui/material';
 import { useState } from 'react';
 import { Polygon } from './Polygon';
 import { Point } from './Point';
+import { createEquidistantPoints } from 'frame.akima';
 export function Finish(props) {
     const [originalCoords, setOriginalCoords] = useState(undefined);
     const styleButton = {
@@ -34,16 +35,20 @@ export function Finish(props) {
         return { coords: transformed, dist };
     };
     const onTransform = () => {
-        let distance = 1000;
-        let coordinates = props.coords.coords.clone();
+        const coordinates = props.coords.coords.clone();
         setOriginalCoords(props.coords.coords);
-        while (distance > 0.01) {
-            // find the point with the minimum distance to the center
-            const { dist, coords } = refine(coordinates);
-            distance = dist;
-            coordinates = coords;
-        }
-        props.coords.setCoords(coordinates);
+        // Convert your Points to AkimaPoints
+        const akimaPoints = coordinates.Points.map((point) => ({
+            X: point.X,
+            Y: point.Y,
+        }));
+        const { points, center } = createEquidistantPoints(akimaPoints, 128);
+        console.log(`center during transform: [${center.X}, ${center.Y}]`);
+        // Create a new Polygon from the equidistant Akima points
+        const newCoordinates = new Polygon(points.map((p) => {
+            return new Point(p.X + center.X, p.Y + center.Y, props.universeCenter);
+        }), props.universeCenter);
+        props.coords.setCoords(newCoordinates);
         props.onAfterTransform();
     };
     const onReset = () => {
@@ -53,7 +58,7 @@ export function Finish(props) {
             props.onAfterReset();
         }
     };
-    return (_jsxs(Box, { id: "id.Finish", sx: styleButton, children: [_jsx(Button, { variant: "contained", disabled: props.coords.coords.Length < 3, onClick: originalCoords === undefined ? onTransform : onReset, sx: { width: '200px' }, children: originalCoords === undefined ? 'Start Transformation' : 'Undo' }), _jsx(Button, { variant: "contained", disabled: originalCoords === undefined, onClick: props.onClose(props.coords.coords), children: "Create RT1" }), _jsx(Button, { variant: "contained", onClick: () => {
+    return (_jsxs(Box, { id: "id.Finish", sx: styleButton, children: [_jsx(Button, { variant: "contained", disabled: props.coords.coords.Length < 3, onClick: originalCoords === undefined ? onTransform : onReset, sx: { width: '200px' }, children: originalCoords === undefined ? 'Start Transformation' : 'Undo' }), _jsx(Button, { "data-testid": "id.button.CreateRT1", variant: "contained", disabled: originalCoords === undefined, onClick: props.onClose(props.coords.coords, props.trademarkCenter.trademarkCenter), children: "Create RT1" }), _jsx(Button, { variant: "contained", onClick: () => {
                     props.coords.coords.save('frame.image.json');
                 }, children: "Save Points" }), _jsxs(Button, { variant: "contained", component: "label", children: ["Load Points", _jsx("input", { type: "file", accept: "application/json", hidden: true, onChange: async (e) => {
                             const file = e.target.files?.[0];

package/dist/ModalDesigner.js

@@ -3,8 +3,8 @@ import { Box, Modal } from '@mui/material';
 import { Designer } from './Designer';
 export function ModalDesigner(props) {
     return (_jsx(Modal, { open: props.isOpen, onClose: props.onClose, "aria-labelledby": "modal-title", "aria-describedby": "modal-description", children: _jsx(Box, { id: "id.box.ModalDesigner", sx: {
-                width: 1000,
-                height: 700,
+                width: 1400,
+                height: 900,
                 bgcolor: 'background.paper',
                 boxShadow: 24,
                 p: 4,

package/dist/Point.d.ts

@@ -21,6 +21,7 @@ export declare class Point {
         offset: number;
     }, radius?: number): void;
     drawCross(context: CanvasRenderingContext2D, color?: string, offset?: number, lineWidth?: number): void;
+    drawPic(context: CanvasRenderingContext2D, img: HTMLImageElement): void;
     drawLine(context: CanvasRenderingContext2D, point: Point, color?: string, lineWidth?: number): void;
     rounded(digits?: number): Point;
 }

package/dist/Point.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../src/Point.ts"],"names":[],"mappings":"AAAA,qBAAa,KAAK;IAChB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAS;IAExB,MAAM,CAAC,OAAO,CACZ,OAAO,EAAE,wBAAwB,EACjC,EAAE,EAAE,KAAK,EACT,EAAE,EAAE,KAAK,EACT,KAAK,EAAE,MAAM;IAaf,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,KAAK;gBAM/B,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK;IAOhD,KAAK,IAAI,KAAK;IAId,MAAM,IAAI;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAOlC,IAAI,CAAC,WAEJ;IAED,IAAI,CAAC,WAEJ;IAED,IAAI,MAAM,IAAI,KAAK,CAElB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM;IAW/B,IAAI,CACF,OAAO,EAAE,wBAAwB,EACjC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;KAChB,EACD,MAAM,SAAI,GACT,IAAI;IAsBP,SAAS,CACP,OAAO,EAAE,wBAAwB,EACjC,KAAK,SAAU,EACf,MAAM,SAAK,EACX,SAAS,SAAI,GACZ,IAAI;IAiBP,QAAQ,CACN,OAAO,EAAE,wBAAwB,EACjC,KAAK,EAAE,KAAK,EACZ,KAAK,SAAU,EACf,SAAS,SAAI,GACZ,IAAI;IASP,OAAO,CAAC,MAAM,SAAI,GAAG,KAAK;CAQ3B"}
+{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../src/Point.ts"],"names":[],"mappings":"AAAA,qBAAa,KAAK;IAChB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAS;IAExB,MAAM,CAAC,OAAO,CACZ,OAAO,EAAE,wBAAwB,EACjC,EAAE,EAAE,KAAK,EACT,EAAE,EAAE,KAAK,EACT,KAAK,EAAE,MAAM;IAaf,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,KAAK;gBAM/B,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK;IAOhD,KAAK,IAAI,KAAK;IAId,MAAM,IAAI;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAOlC,IAAI,CAAC,WAEJ;IAED,IAAI,CAAC,WAEJ;IAED,IAAI,MAAM,IAAI,KAAK,CAElB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM;IAW/B,IAAI,CACF,OAAO,EAAE,wBAAwB,EACjC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;KAChB,EACD,MAAM,SAAI,GACT,IAAI;IAsBP,SAAS,CACP,OAAO,EAAE,wBAAwB,EACjC,KAAK,SAAU,EACf,MAAM,SAAK,EACX,SAAS,SAAI,GACZ,IAAI;IAiBP,OAAO,CAAC,OAAO,EAAE,wBAAwB,EAAE,GAAG,EAAE,gBAAgB,GAAG,IAAI;IAYvE,QAAQ,CACN,OAAO,EAAE,wBAAwB,EACjC,KAAK,EAAE,KAAK,EACZ,KAAK,SAAU,EACf,SAAS,SAAI,GACZ,IAAI;IASP,OAAO,CAAC,MAAM,SAAI,GAAG,KAAK;CAQ3B"}

package/dist/Point.js

@@ -69,6 +69,11 @@ export class Point {
         const point2 = new Point(this.X, this.Y - offset, this.Origin);
         point2.drawLine(context, new Point(this.X, this.Y + offset, this.Origin), color, lineWidth);
     }
+    drawPic(context, img) {
+        const width = 16;
+        const height = 16;
+        context.drawImage(img, this.X + this.xOrigin - width / 2, this.yOrigin - this.Y - height / 2, width, height);
+    }
     drawLine(context, point, color = 'black', lineWidth = 1) {
         context.strokeStyle = color;
         context.lineWidth = lineWidth;

package/dist/PointsForm.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Point } from './Point';
 declare const PointsForm: React.FC<{
+    origin: Point;
     title: string;
     onCloseCancel: () => void;
     onCloseContinue: (points: Point[], universeCenter: Point) => void;

package/dist/PointsForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PointsForm.d.ts","sourceRoot":"","sources":["../src/PointsForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,KAAK,KAAK,IAAI,CAAC;CACnE,CAyFA,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PointsForm.d.ts","sourceRoot":"","sources":["../src/PointsForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACzB,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,KAAK,KAAK,IAAI,CAAC;CACnE,CA2FA,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/PointsForm.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Point } from './Point';
 const PointsForm = (props) => {
     const [text, setText] = useState('');
-    const origin = useMemo(() => new Point(400, 250), []);
     const handleChange = useCallback((e) => {
         setText(e.target.value);
     }, []);
@@ -39,26 +38,26 @@ const PointsForm = (props) => {
             if (y > yMax) {
                 yMax = y;
             }
-            const p = new Point(x, y, origin);
+            const p = new Point(x, y, props.origin);
             coords.push(p);
         }
-        props.onCloseContinue(coords, origin);
-    }, [origin, props, text]);
-    return (_jsxs("form", { onSubmit: handleSubmit, children: [_jsx("label", { htmlFor: "textInput", children: "Enter Text:" }), _jsx("input", { id: "textInput", type: "text", value: text, onChange: handleChange, placeholder: "Type here..." }), _jsx("button", { onClick: props.onCloseCancel, style: {
-                    padding: '8px 16px',
-                    border: '1px solid #ddd',
-                    borderRadius: '4px',
-                    background: 'white',
-                    cursor: 'pointer',
-                    fontSize: '14px',
-                }, children: "Cancel" }), ' ', _jsx("button", { type: "submit", style: {
-                    padding: '8px 16px',
-                    border: 'none',
-                    borderRadius: '4px',
-                    background: '#007bff',
-                    color: 'white',
-                    cursor: 'pointer',
-                    fontSize: '14px',
-                }, children: props.title })] }));
+        props.onCloseContinue(coords, props.origin);
+    }, [props, text]);
+    return (_jsxs("div", { "data-testid": "id.PointsForm", children: [_jsx("h2", { children: props.title }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx("label", { htmlFor: "textInput", children: "Enter Text:" }), _jsx("input", { id: "textInput", type: "text", value: text, onChange: handleChange, placeholder: "Type here..." }), _jsx("button", { onClick: props.onCloseCancel, style: {
+                            padding: '8px 16px',
+                            border: '1px solid #ddd',
+                            borderRadius: '4px',
+                            background: 'white',
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                        }, children: "Cancel" }), ' ', _jsx("button", { type: "submit", style: {
+                            padding: '8px 16px',
+                            border: 'none',
+                            borderRadius: '4px',
+                            background: '#007bff',
+                            color: 'white',
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                        }, children: "Import" })] })] }));
 };
 export default PointsForm;

package/dist/Polygon.d.ts

@@ -11,6 +11,7 @@ export declare class Polygon {
         universeCenter: Point;
     }): Polygon;
     constructor(points: Point[], universeCenter: Point);
+    get UniverseCenter(): Point;
     clone(): Polygon;
     toJSON(): {
         points: {
@@ -48,6 +49,8 @@ export declare class Polygon {
     createNidek(): string;
     assertEquiDistantAngles(): void;
     drawPoints(context: CanvasRenderingContext2D, linesFromOrigin: boolean, color?: string): void;
+    findIndexWithAngle(angle: number): number;
+    drawSegment(context: CanvasRenderingContext2D, color?: string, fromAngle?: number, toAngle?: number): void;
     drawPolygon(context: CanvasRenderingContext2D, color?: string, transparency?: number): void;
     drawCenter(context: CanvasRenderingContext2D, color?: string): void;
 }

package/dist/Polygon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Polygon.d.ts","sourceRoot":"","sources":["../src/Polygon.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,qBAAa,OAAO;IAClB,OAAO,CAAC,MAAM,CAAU;IACxB,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,IAAI,CAAS;IAErB,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QAAC,cAAc,EAAE,KAAK,CAAA;KAAE,GAAG,OAAO;gBAQ9D,MAAM,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,KAAK;IASlD,KAAK,IAAI,OAAO;IAKhB,MAAM,IAAI;QACR,MAAM,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACnC,cAAc,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KAC1C;IAOD,IAAI,CAAC,IAAI,EAAE,MAAM;IAajB,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,MAAM,IAAI,KAAK,EAAE,CAEpB;IAED,IAAI,QAAQ;;;QAIX;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,MAAM,IAAI,KAAK,CAOlB;IAED,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK;IAOxB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAOtC,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO;IAK3B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAK7B,oBAAoB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;IAY1C,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,GAAG,OAAO;IAQ/D,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO;IAU7C,sBAAsB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,GAAG,OAAO;IAyBjE,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;IAYtC,SAAS,IAAI,MAAM;IAWnB,SAAS,IAAI,MAAM;IAOnB,WAAW,IAAI,MAAM;IASrB,uBAAuB,IAAI,IAAI;IAwB/B,UAAU,CACR,OAAO,EAAE,wBAAwB,EACjC,eAAe,EAAE,OAAO,EACxB,KAAK,SAAW,GACf,IAAI;IAsBP,WAAW,CACT,OAAO,EAAE,wBAAwB,EACjC,KAAK,SAAQ,EACb,YAAY,SAAM,GACjB,IAAI;IAuBP,UAAU,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,SAAU,GAAG,IAAI;CAMrE"}
+{"version":3,"file":"Polygon.d.ts","sourceRoot":"","sources":["../src/Polygon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,qBAAa,OAAO;IAClB,OAAO,CAAC,MAAM,CAAU;IACxB,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,IAAI,CAAS;IAErB,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QAAC,cAAc,EAAE,KAAK,CAAA;KAAE,GAAG,OAAO;gBAQ9D,MAAM,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,KAAK;IASlD,IAAI,cAAc,IAAI,KAAK,CAE1B;IAED,KAAK,IAAI,OAAO;IAKhB,MAAM,IAAI;QACR,MAAM,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACnC,cAAc,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KAC1C;IAOD,IAAI,CAAC,IAAI,EAAE,MAAM;IAajB,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,MAAM,IAAI,KAAK,EAAE,CAEpB;IAED,IAAI,QAAQ;;;QAIX;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,MAAM,IAAI,KAAK,CAOlB;IAED,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK;IAOxB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAOtC,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO;IAK3B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAK7B,oBAAoB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;IAY1C,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,GAAG,OAAO;IAQ/D,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO;IAU7C,sBAAsB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,GAAG,OAAO;IAsBjE,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;IAYtC,SAAS,IAAI,MAAM;IAiCnB,SAAS,IAAI,MAAM;IAOnB,WAAW,IAAI,MAAM;IASrB,uBAAuB,IAAI,IAAI;IAwB/B,UAAU,CACR,OAAO,EAAE,wBAAwB,EACjC,eAAe,EAAE,OAAO,EACxB,KAAK,SAAW,GACf,IAAI;IAsBP,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAWzC,WAAW,CACT,OAAO,EAAE,wBAAwB,EACjC,KAAK,SAAQ,EACb,SAAS,SAAI,EACb,OAAO,SAAc,GACpB,IAAI;IAoBP,WAAW,CACT,OAAO,EAAE,wBAAwB,EACjC,KAAK,SAAQ,EACb,YAAY,SAAM,GACjB,IAAI;IAuBP,UAAU,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,SAAU,GAAG,IAAI;CAMrE"}

package/dist/Polygon.js

@@ -1,6 +1,6 @@
-import { createPolarCatmullRom } from 'frame.akima';
 import { Point } from './Point';
 import { Nidek } from 'frame.nidek';
+import { createEquidistantPoints } from 'frame.akima';
 export class Polygon {
     points;
     universeCenter;
@@ -21,6 +21,9 @@ export class Polygon {
         this.yMax = Math.max(...points.map((point) => point.Y));
         this.universeCenter = universeCenter;
     }
+    get UniverseCenter() {
+        return this.universeCenter;
+    }
     clone() {
         const clonedPoints = this.points.map((point) => point.clone());
         return new Polygon(clonedPoints, this.universeCenter);
@@ -118,19 +121,19 @@ export class Polygon {
     }
     createCatmullRomPoints(nrPoints, origin) {
         const points = this.points.map((xPoint) => {
-            return {
-                x: xPoint.X - (origin ? origin.X : 0),
-                y: xPoint.Y - (origin ? origin.Y : 0),
-            };
+            return new Point(xPoint.X, xPoint.Y);
         });
-        const catmullRomFunc = createPolarCatmullRom(points);
-        const catmullRomPoints = [];
-        for (let iloop = 0; iloop < nrPoints; iloop += 1) {
-            const angle = (iloop * Math.PI * 2) / nrPoints;
-            const { x, y } = catmullRomFunc(angle);
-            catmullRomPoints.push(new Point(x + (origin ? origin.X : 0), y + (origin ? origin.Y : 0), this.universeCenter));
+        let catmullPolygon;
+        if (points.length < 4) {
+            catmullPolygon = new Polygon(points, this.universeCenter);
+        }
+        else {
+            const { points: newPoints, center } = createEquidistantPoints(points, nrPoints);
+            const akimaPoints = newPoints.map((p) => {
+                return new Point(p.X + center.X, p.Y + center.Y, this.universeCenter);
+            });
+            catmullPolygon = new Polygon(akimaPoints, this.universeCenter);
         }
-        const catmullPolygon = new Polygon(catmullRomPoints, this.universeCenter);
         return catmullPolygon;
     }
     findNearestPoint(point) {
@@ -142,9 +145,22 @@ export class Polygon {
         return nearestIndex;
     }
     createRT1() {
+        if (this.points.length !== 128) {
+            throw new Error('RT1 can only be created for 128 points polygon.');
+        }
         let rt1 = '';
+        const singleAngle = (Math.PI * 2) / 128;
         for (let iloop = 0; iloop < this.points.length; iloop += 1) {
             const originalPoint = this.points[iloop];
+            const angle = originalPoint.relAtan(new Point(0, 0));
+            const delta = Math.abs(angle - singleAngle * iloop);
+            console.log(`point[${iloop}] = [${originalPoint.X}, ${originalPoint.Y}], angle: ${angle}, expected: ${singleAngle * iloop}, delta: ${delta}`);
+            if (delta > 1e-5) {
+                throw new Error(`Points are not equidistant in angle at index ${iloop} (delta: ${delta}, deviation: ${Math.abs(delta - (Math.PI * 2) / 128)}`);
+            }
+            if (iloop === 0 || iloop === this.points.length / 2) {
+                console.log(`point ${iloop} x: ${originalPoint.X}`);
+            }
             rt1 += Math.round(originalPoint.Radius * 10)
                 .toString()
                 .padStart(4, '0');
@@ -197,6 +213,30 @@ export class Polygon {
             }
         });
     }
+    findIndexWithAngle(angle) {
+        const index = this.points.findIndex((xPoint) => {
+            const ptAngle = xPoint.relAtan(new Point(0, 0));
+            return ptAngle >= angle;
+        });
+        if (index === -1) {
+            return this.points.length - 1;
+        }
+        return index;
+    }
+    drawSegment(context, color = 'red', fromAngle = 0, toAngle = Math.PI * 2) {
+        if (this.points.length < 2)
+            return;
+        context.strokeStyle = color;
+        context.lineWidth = 2;
+        context.beginPath();
+        const fromIndex = this.findIndexWithAngle(fromAngle);
+        const toIndex = this.findIndexWithAngle(toAngle);
+        context.moveTo(this.universeCenter.X + this.points[fromIndex].X, this.universeCenter.Y - this.points[fromIndex].Y);
+        for (let i = fromIndex + 1; i <= toIndex; i++) {
+            context.lineTo(this.universeCenter.X + this.points[i].X, this.universeCenter.Y - this.points[i].Y);
+        }
+        context.stroke();
+    }
     drawPolygon(context, color = 'red', transparency = 0.4) {
         if (this.points.length < 2)
             return;

package/dist/ScaleForm.d.ts

@@ -1,11 +1,11 @@
-import { TCoordsHook } from './types';
+import { TCoordsHook, TNumberHook } from './types';
 export declare function ScaleForm(props: {
     title: string;
     coords: TCoordsHook;
     currentPoints: number;
     disabled: boolean;
-    sl?: number;
-    sh?: number;
+    scaledSL: TNumberHook;
+    scaledSH: TNumberHook;
     onCloseCancel: () => void;
     onCloseContinue: (length: number, height: number) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ScaleForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScaleForm.d.ts","sourceRoot":"","sources":["../src/ScaleForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D,2CAwMA"}
+{"version":3,"file":"ScaleForm.d.ts","sourceRoot":"","sources":["../src/ScaleForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAInD,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,WAAW,CAAC;IACtB,QAAQ,EAAE,WAAW,CAAC;IACtB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D,2CAuNA"}

package/dist/ScaleForm.js

@@ -2,16 +2,18 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { ScaleInput } from './ScaleInput';
 import { Point } from './Point';
+import { createEquidistantPoints } from 'frame.akima';
+import { Polygon } from './Polygon';
 export function ScaleForm(props) {
     const scalingParam = 10;
     if (typeof props.currentPoints !== 'number' &&
         typeof props.currentPoints !== 'string') {
         console.error('Invalid currentPoints in ScaleForm:', props.currentPoints);
     }
-    const [drawnLength, setDrawnLength] = useState(props.sl ?? 0);
-    const [inputLength, setInputLength] = useState(props.sl ?? 0);
-    const [length, setLength] = useState(props.sl ?? 0);
-    const [height, setHeight] = useState(props.sh ?? 0);
+    const [drawnLength, setDrawnLength] = useState(props.scaledSL.value ?? 0);
+    const [inputLength, setInputLength] = useState(props.scaledSL.value ?? 0);
+    const [length, setLength] = useState(props.scaledSL.value);
+    const [height, setHeight] = useState(props.scaledSH.value);
     const [ratio, setRatio] = useState(1);
     function onChangeLength(e) {
         const newLength = Math.round(parseFloat(e.target.value) * scalingParam) / scalingParam;
@@ -26,31 +28,28 @@ export function ScaleForm(props) {
             scalingParam;
         setInputLength(newLength);
         setHeight(newHeight);
+        props.scaledSL.setValue(newLength);
+        props.scaledSH.setValue(newHeight);
     }
     function onChangeHeight(e) {
         const newHeight = Math.round(parseFloat(e.target.value) * scalingParam) / scalingParam;
-        const newLength = Math.round(newHeight * ratioLength2Height * scalingParam) / scalingParam;
-        setInputLength(newLength);
+        // setInputLength(newLength);
         setHeight(newHeight);
+        props.scaledSH.setValue(newHeight);
     }
     const handleSubmit = (e) => {
         e.preventDefault();
-        const scaledPoints = [];
-        const scaledPolygon = props.coords.coords.clone();
-        for (let loop = 0; loop < scaledPolygon.Points.length; loop += 1) {
-            const point = scaledPolygon.Points[loop];
-            const angle = point.relAtan(new Point(0, 0));
-            // Step 2: Scale the radius
-            const scaledRadius = point.Radius * ratio;
-            // Step 3: Convert back to Cartesian coordinates
-            const scaledX = scaledRadius * Math.cos(angle);
-            const scaledY = scaledRadius * Math.sin(angle);
-            const scaledP = new Point(scaledX, scaledY, point.Origin);
-            scaledPoints.push(scaledP);
-            scaledPolygon.set(loop, scaledP);
-        }
-        props.coords.setCoords(scaledPolygon);
-        props.onCloseContinue(drawnLength, height);
+        const ratioX = (length ?? 0) / (xMax - xMin);
+        const ratioY = (height ?? 0) / (yMax - yMin);
+        const ratio = Math.min(ratioX, ratioY);
+        console.log(`xMin: ${xMin}, xMax: ${xMax}, yMin: ${yMin}, yMax: ${yMax}`);
+        console.log(`length: ${length}, height: ${height}, ratio: ${ratio}`);
+        console.log(`scaling ratio: ${ratio}, ratioX: ${ratioX}, ratioY: ${ratioY}`);
+        const scaledPolygon = props.coords.coords.scale(ratioX, ratioY);
+        const { points } = createEquidistantPoints(scaledPolygon.Points, scaledPolygon.Points.length);
+        const equidistantPolygon = new Polygon(points.map((pt) => new Point(pt.X, pt.Y, props.coords.coords.UniverseCenter)), props.coords.coords.UniverseCenter);
+        props.coords.setCoords(equidistantPolygon);
+        props.onCloseContinue(drawnLength, height ?? 0);
     };
     let xMin = 0;
     let xMax = 0;

package/dist/ScaleInput.d.ts

@@ -1,11 +1,11 @@
-import { TNumberValue } from './types';
+import { TNumberHook } from './types';
 export declare function ScaleInput(props: {
     title: string;
     disabled?: boolean;
     extension: number;
     ratio: number;
     scalingParam: number;
-    value: TNumberValue;
+    value: TNumberHook;
     setValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ScaleInput.d.ts.map

package/dist/ScaleInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScaleInput.d.ts","sourceRoot":"","sources":["../src/ScaleInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC5D,2CA0DA"}
+{"version":3,"file":"ScaleInput.d.ts","sourceRoot":"","sources":["../src/ScaleInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC5D,2CA8CA"}

package/dist/ScaleInput.js

@@ -1,15 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
 export function ScaleInput(props) {
     const id = `scale-${props.title.toLowerCase()}`;
-    const [value, setValue] = useState(props.value.value ?? 0);
-    function onChangeValue(e) {
-        const parsed = parseFloat(e.target.value);
-        setValue(parsed);
-    }
-    useEffect(() => {
-        setValue(props.value.value ?? 0);
-    }, [props.value]);
     // useEffect(() => {
     //   console.log(`extension has changed to ${props.extension}`);
     //   props.value.setValue(props.extension);
@@ -21,7 +12,7 @@ export function ScaleInput(props) {
                     marginBottom: '8px',
                     fontWeight: 500,
                     fontSize: '14px',
-                }, children: props.title }), _jsx("input", { id: id, type: "number", value: props.value.value, onChange: props.setValue, step: 1 / props.scalingParam, min: 1 / props.scalingParam, max: "1000", style: {
+                }, children: props.title }), _jsx("input", { id: id, type: "number", value: props.value.value ?? 0, onChange: props.setValue, step: 1 / props.scalingParam, min: 1 / props.scalingParam, max: "1000", style: {
                     width: '100%',
                     maxWidth: '100px',
                     padding: '8px 12px',
@@ -29,5 +20,5 @@ export function ScaleInput(props) {
                     borderRadius: '4px',
                     fontSize: '14px',
                     boxSizing: 'border-box',
-                }, placeholder: `Enter scale ${props.title.toLowerCase()} (e.g., 1.5)`, autoFocus: true, disabled: props.disabled ?? false })] }));
+                }, placeholder: `Enter scale ${props.title.toLowerCase()} (e.g., 1.5)`, disabled: props.disabled ?? false })] }));
 }

package/dist/SortedPoints.d.ts

@@ -42,6 +42,10 @@ export declare class SortedPoints {
     get RadiusKoeffs(): number[];
     drawPoints(context: CanvasRenderingContext2D, color?: string, offset?: number, radius?: number, each?: number): void;
     drawCenter(context: CanvasRenderingContext2D, color?: string, extension?: number, lineWidth?: number): void;
+    getExtension(): {
+        xExt: number;
+        yExt: number;
+    };
     drawBox(context: CanvasRenderingContext2D, color?: string): void;
     drawCatmullRom(context: CanvasRenderingContext2D): void;
 }

package/dist/SortedPoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortedPoints.d.ts","sourceRoot":"","sources":["../src/SortedPoints.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,YAAY;IACvB,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,cAAc,CAAQ;gBAElB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,UAAO;IA6BhE;;;;;;;OAOG;IACH,IAAI,MAAM,UAgBT;IAED,IAAI,OAAO,IAAI,MAAM,CAGpB;IAED,IAAI,YAAY,IAAI,MAAM,EAAE,CAI3B;IAED,IAAI,YAAY,IAAI,MAAM,EAAE,CAI3B;IAED,UAAU,CACR,OAAO,EAAE,wBAAwB,EACjC,KAAK,SAAU,EACf,MAAM,SAAK,EACX,MAAM,SAAI,EACV,IAAI,SAAI,GACP,IAAI;IAiBP,UAAU,CACR,OAAO,EAAE,wBAAwB,EACjC,KAAK,SAAU,EACf,SAAS,SAAK,EACd,SAAS,SAAI,GACZ,IAAI;IAmCP,OAAO,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,SAAS,GAAG,IAAI;IAsChE,cAAc,CAAC,OAAO,EAAE,wBAAwB,GAAG,IAAI;CAMxD"}
+{"version":3,"file":"SortedPoints.d.ts","sourceRoot":"","sources":["../src/SortedPoints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,YAAY;IACvB,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,cAAc,CAAQ;gBAElB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,UAAO;IA6BhE;;;;;;;OAOG;IACH,IAAI,MAAM,UAgBT;IAED,IAAI,OAAO,IAAI,MAAM,CAGpB;IAED,IAAI,YAAY,IAAI,MAAM,EAAE,CAI3B;IAED,IAAI,YAAY,IAAI,MAAM,EAAE,CAI3B;IAED,UAAU,CACR,OAAO,EAAE,wBAAwB,EACjC,KAAK,SAAU,EACf,MAAM,SAAK,EACX,MAAM,SAAI,EACV,IAAI,SAAI,GACP,IAAI;IAiBP,UAAU,CACR,OAAO,EAAE,wBAAwB,EACjC,KAAK,SAAU,EACf,SAAS,SAAK,EACd,SAAS,SAAI,GACZ,IAAI;IAmCP,YAAY,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;IAgB9C,OAAO,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,SAAS,GAAG,IAAI;IAsChE,cAAc,CAAC,OAAO,EAAE,wBAAwB,GAAG,IAAI;CAMxD"}

package/dist/SortedPoints.js

@@ -1,4 +1,3 @@
-// import { createAkimaRadii, preparePointsForAkima } from 'frame.akima';
 import { Point } from './Point';
 import { Polygon } from './Polygon';
 /**
@@ -107,6 +106,21 @@ export class SortedPoints {
             point2.drawLine(context, new Point(this.Center.X, this.Center.Y + extension, this.universeCenter), color, lineWidth);
         }
     }
+    getExtension() {
+        let xMin = Infinity;
+        let xMax = -Infinity;
+        let yMin = Infinity;
+        let yMax = -Infinity;
+        if (this.polygon.Length >= 2) {
+            xMin = this.polygon.XMin;
+            xMax = this.polygon.XMax;
+            yMin = this.polygon.YMin;
+            yMax = this.polygon.YMax;
+        }
+        const xExt = xMax - xMin;
+        const yExt = yMax - yMin;
+        return { xExt, yExt };
+    }
     drawBox(context, color = 'blue') {
         if (this.polygon.Length >= 2) {
             const xMin = this.polygon.Points.reduce((min, p) => Math.min(min, p.X), Infinity);

package/dist/Start.d.ts

@@ -1,6 +1,7 @@
 import { useMachine } from 'react-robot';
 import { Point } from './Point';
 export declare function Start(props: {
+    origin: Point;
     machine: ReturnType<typeof useMachine>[0];
     onReset: () => void;
     onAfterLoadImage: (url: string) => void;

package/dist/Start.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Start.d.ts","sourceRoot":"","sources":["../src/Start.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,wBAAgB,KAAK,CAAC,KAAK,EAAE;IAC3B,OAAO,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,KAAK,KAAK,IAAI,CAAC;IACpE,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC,2CAwHA"}
+{"version":3,"file":"Start.d.ts","sourceRoot":"","sources":["../src/Start.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,wBAAgB,KAAK,CAAC,KAAK,EAAE;IAC3B,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,KAAK,KAAK,IAAI,CAAC;IACpE,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC,2CAyHA"}

package/dist/Start.js

@@ -61,5 +61,5 @@ export function Start(props) {
             flexDirection: 'column',
             gap: '10px',
             width: '90%', // Set a fixed width for the button group
-        }, children: [_jsx(Button, { variant: "contained", disabled: isDisabled(ACTION.RESET), onClick: onReset, sx: { width: '100%' }, children: "Reset" }), _jsx(Input, { inputRef: fileInputRef, type: "file", inputProps: { accept: 'image/*' }, style: { display: 'none' }, onChange: handleFileChange, disabled: false }), _jsx(Button, { variant: "contained", disabled: isDisabled(ACTION.LOAD_IMAGE), onClick: onLoadImage, sx: { width: '100%' }, children: "Load Image" }), _jsx(Button, { id: "id.button.definePoints", variant: "contained", disabled: isDisabled(ACTION.DEFINE_POINTS), onClick: onBeforeLoadPoints, sx: { width: '100%' }, children: "Load Points" }), _jsx(StateModal, { isOpen: showModalPointsForm, onClose: onClosePointsForm, position: "top-right", children: _jsx(PointsForm, { title: "Import points", onCloseCancel: onLoadPointsCancel, onCloseContinue: onAfterLoadPoints }) })] }));
+        }, children: [_jsx(Button, { variant: "contained", disabled: isDisabled(ACTION.RESET), onClick: onReset, sx: { width: '100%' }, children: "Reset" }), _jsx(Input, { inputRef: fileInputRef, type: "file", inputProps: { accept: 'image/*' }, style: { display: 'none' }, onChange: handleFileChange, disabled: false }), _jsx(Button, { variant: "contained", disabled: isDisabled(ACTION.LOAD_IMAGE), onClick: onLoadImage, sx: { width: '100%' }, children: "Load Image" }), _jsx(Button, { id: "id.button.definePoints", variant: "contained", disabled: isDisabled(ACTION.DEFINE_POINTS), onClick: onBeforeLoadPoints, sx: { width: '100%' }, children: "Import RT1" }), _jsx(StateModal, { isOpen: showModalPointsForm, onClose: onClosePointsForm, position: "top-right", children: _jsx(PointsForm, { origin: props.origin, title: "Import RT1", onCloseCancel: onLoadPointsCancel, onCloseContinue: onAfterLoadPoints }) })] }));
 }

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/action.tsx","../src/app.tsx","../src/center.tsx","../src/designer.tsx","../src/drawcanvas.tsx","../src/finish.tsx","../src/imagehandler.tsx","../src/lens.ts","../src/loadimage.tsx","../src/modaldesigner.tsx","../src/mousecoords.tsx","../src/point.ts","../src/pointsform.tsx","../src/polygon.ts","../src/scaleform.tsx","../src/scaleinput.tsx","../src/scaling.tsx","../src/showoptions.tsx","../src/sortedpoints.ts","../src/start.tsx","../src/states.tsx","../src/workflow.tsx","../src/enum.ts","../src/index.ts","../src/main.tsx","../src/types.ts","../src/vite-env.d.ts"],"version":"5.9.2"}
+{"root":["../src/action.tsx","../src/app.tsx","../src/center.tsx","../src/designer.tsx","../src/drawcanvas.tsx","../src/finish.tsx","../src/imagehandler.tsx","../src/lens.ts","../src/loadimage.tsx","../src/modaldesigner.tsx","../src/mousecoords.tsx","../src/point.ts","../src/pointsform.tsx","../src/polygon.ts","../src/scaleform.tsx","../src/scaleinput.tsx","../src/scaling.tsx","../src/showoptions.tsx","../src/sortedpoints.ts","../src/start.tsx","../src/states.tsx","../src/workflow.tsx","../src/enum.ts","../src/index.ts","../src/main.tsx","../src/types.ts","../src/vite-env.d.ts"],"version":"5.9.3"}

package/dist/types.d.ts

@@ -56,8 +56,12 @@ export type TRotationHook = {
     rotationAngle: number;
     setRotationAngle: React.Dispatch<React.SetStateAction<number>>;
 };
-export type TNumberValue = {
-    value: number;
-    setValue: React.Dispatch<React.SetStateAction<number>>;
+export type TNumberHook = {
+    value: number | undefined;
+    setValue: React.Dispatch<React.SetStateAction<number | undefined>>;
+};
+export type TTrademarkHook = {
+    trademarkCenter: Point | undefined;
+    setTrademarkCenter: React.Dispatch<React.SetStateAction<Point | undefined>>;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,MAAM,KAAK,GAAG;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,OAAO,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CACzD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,YAAY,CAAC;IAC1B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;CACpE,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC9D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAC1C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CACxD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,MAAM,KAAK,GAAG;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,OAAO,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CACzD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,YAAY,CAAC;IAC1B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;CACpE,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC9D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAC1C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CACpE,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,eAAe,EAAE,KAAK,GAAG,SAAS,CAAC;IACnC,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;CAC7E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.image",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "A React component for drawing a frame on a canvas element.",
   "license": "MIT",
   "author": "Christian.Todd@rodenstock.com",
@@ -13,6 +13,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b",
+    "test": "vitest",
     "doc": "typedoc --options typedoc.json --tsconfig ./tsconfig.json --logLevel Verbose",
     "build-with-vite": "tsc -b && vite build",
     "lint": "eslint .",
@@ -21,27 +22,28 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/material": "^7.3.2",
-    "frame.akima": "^1.2.1",
+    "@mui/material": "^7.3.5",
+    "frame.akima": "^2.0.1",
     "frame.nidek": "^1.1.4",
     "frame.statemachine": "^1.1.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^6.0.0",
-    "react-robot": "^1.2.0"
+    "react-robot": "^1.2.0",
+    "vitest": "^4.0.14"
   },
   "devDependencies": {
-    "@eslint/js": "^9.34.0",
+    "@eslint/js": "^9.39.1",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^5.0.2",
-    "eslint": "^9.34.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.3.0",
-    "typedoc": "^0.28.12",
-    "typescript": "~5.9.2",
-    "typescript-eslint": "^8.42.0",
-    "vite": "^7.1.4"
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typedoc": "^0.28.14",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.2.4"
   }
 }