frame.image 1.3.4 → 1.3.7

package/dist/Designer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Designer.d.ts","sourceRoot":"","sources":["../src/Designer.tsx"],"names":[],"mappings":"AAaA,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,2CA6JA"}
+{"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,2CAyOA"}

package/dist/Designer.js

@@ -10,12 +10,14 @@ import { useState } from 'react';
 import { Polygon } from './Polygon';
 import { Point } from './Point';
 import { Finish } from './Finish';
+import { Start } from './Start';
 export function Designer(props) {
     const nrPoints = props.nrPoints || 128;
     const width = 600;
     const height = 400;
     const universeCenter = new Point(width / 2, height / 2);
     const [currentMachine, sendCommand] = useMachine(machine);
+    const [scalingEnabled, setScalingEnabled] = useState(false);
     const [imageUrl, setDataUrl] = useState(undefined);
     const [axis, setAxis] = useState({});
     const [rotationAngle, setRotationAngle] = useState(0);
@@ -37,33 +39,6 @@ export function Designer(props) {
         vertical: 0,
     });
     const [catmullRomPoints, setCatmullRomPoints] = useState(undefined);
-    const [SH, setSH] = useState(0);
-    const [SL, setSL] = useState(0);
-    const styleStates = {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: 1000,
-        height: 700,
-        bgcolor: 'background.paper',
-        border: '2px solid #000',
-        boxShadow: 24,
-        p: 4,
-    };
-    const styleCanvas = {
-        position: 'absolute',
-        top: '58%',
-        left: '50%',
-        transform: 'translate(-80%, -50%)',
-        width,
-        height,
-        bgcolor: 'background.paper',
-        border: '2px solid #000',
-        boxShadow: 24,
-        p: 4,
-        padding: '2px',
-    };
     const onClickReset = () => {
         setCoords(new Polygon([], universeCenter));
         // setCatmullRomPoints(undefined);
@@ -72,20 +47,40 @@ export function Designer(props) {
         setRotationAngle(0);
         sendCommand(ACTION.RESET);
     };
-    function onCloseScaleForm(cont = true) {
+    const onAfterLoadImage = (url) => {
+        setDataUrl(url);
+        sendCommand(ACTION.LOAD_IMAGE);
+    };
+    const onAfterLoadPoints = (points, universeCenter) => {
+        setCoords(new Polygon(points, universeCenter));
+        sendCommand(ACTION.DEFINE_POINTS);
+    };
+    const onAfterDefinePoints = () => {
+        sendCommand(ACTION.DEFINE_POINTS);
+    };
+    function onCloseScaleForm() {
         // if (cont) {
         //   props.command(ACTION.SCALE_FORM);
         // }
         // setShowModalScaleForm(false);
     }
     function handleCloseScaleFormCancel() {
-        onCloseScaleForm(false);
+        onCloseScaleForm();
     }
     function handleCloseScaleFormContinue(length, height) {
         currentMachine.context.length = length;
         currentMachine.context.height = height;
-        onCloseScaleForm(true);
+        onCloseScaleForm();
     }
+    const onLoad = (nrPts) => {
+        sendCommand(ACTION.RESET);
+        for (let i = 0; i < nrPts; i++) {
+            sendCommand(ACTION.DEFINE_POINTS);
+        }
+    };
+    const onTransform = () => {
+        setScalingEnabled(true);
+    };
     const onClose = (pol) => () => {
         const catmullRomPolygonRT1 = pol.createCatmullRomPoints(128);
         catmullRomPolygonRT1.assertEquiDistantAngles();
@@ -96,11 +91,54 @@ export function Designer(props) {
         console.log(`TR1: ${tr1}`);
         props.onClose(rt1);
     };
-    return (_jsxs("div", { children: [_jsxs(Box, { id: "boxStates", sx: styleStates, display: "flex", flexDirection: "column", gap: 2, children: [_jsx(States, { machine: currentMachine, command: sendCommand, onClickReset: onClickReset, setDataUrl: setDataUrl, coords: { coords, setCoords } }), _jsx(ShowOptions, { show: show, setShow: setShow })] }), _jsxs(Box, { id: "boxCanvas", sx: {
-                    ...styleCanvas,
+    return (_jsxs("div", { id: "id.Designer", style: {
+            height: '100vh', // Use viewport height for reliable stacking
+            width: '100vw',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs(Box, { id: "id.box.States", sx: {
+                    flex: '0 0 20%',
+                    height: '20%',
+                    minHeight: 0,
+                    overflow: 'auto',
+                    width: '100%',
+                }, children: [_jsx(States, { machine: currentMachine, command: sendCommand, onClickReset: onClickReset, setDataUrl: setDataUrl, coords: { coords, setCoords } }), _jsx(ShowOptions, { show: show, setShow: setShow })] }), _jsxs(Box, { id: "id.box.Draw", sx: {
+                    flex: '1 1 80%',
+                    height: '80%',
+                    minHeight: 0,
                     display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'flex-start',
-                    gap: 2,
-                }, 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(ScaleForm, { title: "Apply Scale", currentPoints: currentMachine.context.nrPoints, onCloseCancel: handleCloseScaleFormCancel, onCloseContinue: handleCloseScaleFormContinue, sl: SL, sh: SH })] }), _jsx(Finish, { universeCenter: universeCenter, nrPoints: nrPoints, coords: { coords, setCoords }, onClose: onClose })] }));
+                    flexDirection: 'column',
+                    width: '100%',
+                    position: 'relative',
+                }, children: [_jsxs(Box, { id: "id.box.1", sx: {
+                            height: '80%',
+                            maxHeight: '80%',
+                            width: '100%',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            overflow: 'auto', // Scrollbar, wenn Inhalt zu groß
+                        }, children: [_jsx(Box, { id: "id.box.Start", sx: {
+                                    width: '10%',
+                                    minWidth: 0,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '100%',
+                                }, children: _jsx(Start, { machine: currentMachine, onReset: onClickReset, onAfterLoadImage: onAfterLoadImage, onAfterLoadPoints: onAfterLoadPoints, onAfterDefinePoints: onAfterDefinePoints }) }), _jsx(Box, { id: "id.box.canvas", sx: {
+                                    width: '60%',
+                                    minWidth: 0,
+                                    flex: 1,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '100%',
+                                }, 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: {
+                                    width: '30%',
+                                    minWidth: 0,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '100%',
+                                }, 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: {
+                            height: '20%',
+                            width: '100%',
+                            overflow: 'auto',
+                        }, children: _jsx(Finish, { universeCenter: universeCenter, nrPoints: nrPoints, coords: { coords, setCoords }, onLoad: onLoad, onTransform: onTransform, onClose: onClose }) })] })] }));
 }

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,CA+fd"}
+{"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,CAmgBd"}

package/dist/DrawCanvas.js

@@ -184,10 +184,14 @@ export function DrawCanvas(props) {
     }, [drawImageBackground, drawDefaultBackground]);
     const getCurrentPoint = useCallback((canvas, event) => {
         const rect = canvas.getBoundingClientRect();
-        const x = event.clientX - rect.left - universeCenter.X;
-        const y = universeCenter.Y - (event.clientY - rect.top);
+        const scaleFactorX = props.width / rect.width;
+        const scaleFactorY = props.height / rect.height;
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const x = (event.clientX - centerX) * scaleFactorX;
+        const y = (centerY - event.clientY) * scaleFactorY;
         return new Point(x, y, universeCenter);
-    }, [universeCenter]);
+    }, [props.height, props.width, universeCenter]);
     // Event listener for mouse click
     const handleMouseClick = useCallback((event) => {
         event.preventDefault();

package/dist/Finish.d.ts

@@ -5,6 +5,8 @@ export declare function Finish(props: {
     universeCenter: Point;
     nrPoints: number;
     coords: TCoordsHook;
+    onLoad: (nrPoints: number) => void;
+    onTransform: () => void;
     onClose: (pol: Polygon) => () => 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,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;CACvC,2CAmGA"}
+{"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,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;CACvC,2CAkIA"}

package/dist/Finish.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button } from '@mui/material';
 import { useState } from 'react';
+import { Polygon } from './Polygon';
 import { Point } from './Point';
 export function Finish(props) {
     const [originalCoords, setOriginalCoords] = useState(undefined);
     const styleButton = {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 2,
         position: 'absolute',
-        top: '78%',
+        top: '85%',
         left: '50%',
         transform: 'translate(-50%, -50%)',
     };
@@ -40,7 +44,7 @@ export function Finish(props) {
             coordinates = coords;
         }
         props.coords.setCoords(coordinates);
-        console.log(`ready`);
+        props.onTransform();
     };
     const onReset = () => {
         if (originalCoords) {
@@ -48,5 +52,21 @@ export function Finish(props) {
             setOriginalCoords(undefined);
         }
     };
-    return (_jsxs(Box, { id: "boxButtons", sx: styleButton, children: [_jsx(Button, { variant: "contained", disabled: originalCoords !== undefined, onClick: onTransform, sx: { mr: 2 }, children: "Start Transformation" }), _jsx(Button, { variant: "contained", disabled: originalCoords === undefined, onClick: onReset, sx: { mr: 2 }, children: "Reset to Original" }), _jsx(Button, { variant: "contained", disabled: originalCoords === undefined, onClick: props.onClose(props.coords.coords), children: "Create RT1" })] }));
+    return (_jsxs(Box, { id: "id.Finish", sx: styleButton, children: [_jsx(Button, { variant: "contained", disabled: originalCoords !== undefined, onClick: onTransform, children: "Start Transformation" }), _jsx(Button, { variant: "contained", disabled: originalCoords === undefined, onClick: onReset, sx: { mr: 2 }, children: "Reset to Original" }), _jsx(Button, { variant: "contained", disabled: originalCoords === undefined, onClick: props.onClose(props.coords.coords), 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];
+                            if (!file)
+                                return;
+                            const text = await file.text();
+                            try {
+                                const newPolygon = Polygon.fromJSON(JSON.parse(text));
+                                props.coords.setCoords(newPolygon);
+                                props.onLoad(newPolygon.Length);
+                            }
+                            catch {
+                                alert(`Failed to load points from ${file.name}.`);
+                            }
+                            e.target.value = '';
+                        } })] })] }));
 }

package/dist/Point.d.ts

@@ -4,8 +4,13 @@ export declare class Point {
     private xOrigin;
     private yOrigin;
     static drawBox(context: CanvasRenderingContext2D, p1: Point, p2: Point, color: string): void;
+    static fromJSON(json: Point, origin?: Point): Point;
     constructor(x: number, y: number, origin?: Point);
     clone(): Point;
+    toJSON(): {
+        x: number;
+        y: number;
+    };
     get X(): number;
     get Y(): number;
     get Origin(): 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;gBAaH,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK;IAOhD,KAAK,IAAI,KAAK;IAId,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,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

@@ -9,6 +9,11 @@ export class Point {
         context.lineWidth = 3;
         context.strokeRect(p1.X + p1.Origin.X, p1.Y + p1.Origin.Y, p2.X - p1.X, p2.Y - p1.Y);
     }
+    static fromJSON(json, origin) {
+        const x = json.x;
+        const y = json.y;
+        return new Point(x, y, origin);
+    }
     constructor(x, y, origin) {
         this.xOrigin = origin ? origin.X : 0;
         this.yOrigin = origin ? origin.Y : 0;
@@ -18,6 +23,12 @@ export class Point {
     clone() {
         return new Point(this.X, this.Y, this.Origin);
     }
+    toJSON() {
+        return {
+            x: this.X,
+            y: this.Y,
+        };
+    }
     get X() {
         return this.x;
     }

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,CA0FA,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"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"}

package/dist/PointsForm.js

@@ -41,7 +41,6 @@ const PointsForm = (props) => {
             }
             const p = new Point(x, y, origin);
             coords.push(p);
-            console.log(`[${iloop}] -> {  x: ${p.X}, y: ${p.Y}, rad: ${p.Radius}}`);
         }
         props.onCloseContinue(coords, origin);
     }, [origin, props, text]);

package/dist/Polygon.d.ts

@@ -6,8 +6,23 @@ export declare class Polygon {
     private xMax;
     private yMin;
     private yMax;
+    static fromJSON(json: {
+        points: Point[];
+        universeCenter: Point;
+    }): Polygon;
     constructor(points: Point[], universeCenter: Point);
     clone(): Polygon;
+    toJSON(): {
+        points: {
+            x: number;
+            y: number;
+        }[];
+        universeCenter: {
+            x: number;
+            y: number;
+        };
+    };
+    save(file: string): void;
     get Length(): number;
     get Points(): Point[];
     get XYPoints(): {
@@ -20,6 +35,7 @@ export declare class Polygon {
     get YMax(): number;
     get Center(): Point;
     at(index: number): Point;
+    set(index: number, point: Point): void;
     plus(point: Point): Polygon;
     minus(index: number): Polygon;
     findMinDistancePoint(point: Point): number;

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;gBAET,MAAM,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,KAAK;IASlD,KAAK,IAAI,OAAO;IAKhB,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,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;IAuBnB,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":"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"}

package/dist/Polygon.js

@@ -8,6 +8,11 @@ export class Polygon {
     xMax;
     yMin;
     yMax;
+    static fromJSON(json) {
+        const universeCenter = Point.fromJSON(json.universeCenter);
+        const points = json.points.map((point) => Point.fromJSON(point, universeCenter));
+        return new Polygon(points, universeCenter);
+    }
     constructor(points, universeCenter) {
         this.points = points;
         this.xMin = Math.min(...points.map((point) => point.X));
@@ -20,6 +25,24 @@ export class Polygon {
         const clonedPoints = this.points.map((point) => point.clone());
         return new Polygon(clonedPoints, this.universeCenter);
     }
+    toJSON() {
+        return {
+            points: this.points.map((point) => point.toJSON()),
+            universeCenter: this.universeCenter.toJSON(),
+        };
+    }
+    save(file) {
+        const json = JSON.stringify(this.toJSON());
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = file;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
     get Length() {
         return this.points.length;
     }
@@ -53,6 +76,12 @@ export class Polygon {
         }
         return this.points[index];
     }
+    set(index, point) {
+        if (index < 0 || index >= this.points.length) {
+            throw new Error(`Index ${index} is out of bounds for points array.`);
+        }
+        this.points[index] = point;
+    }
     plus(point) {
         const newPoints = [...this.Points, point];
         return new Polygon(newPoints, this.universeCenter);
@@ -114,18 +143,6 @@ export class Polygon {
     }
     createRT1() {
         let rt1 = '';
-        const xMax = this.xMax;
-        const xMin = this.xMin;
-        const yMax = this.yMax;
-        const yMin = this.yMin;
-        console.log(`xMax: ${xMax}, xMin: ${xMin}`);
-        console.log(`yMax: ${yMax}, yMin: ${yMin}`);
-        console.log(`x extension: ${xMax - xMin}`);
-        console.log(`y extension: ${yMax - yMin}`);
-        const xCenter = (xMax + xMin) / 2;
-        const yCenter = (yMax + yMin) / 2;
-        console.log(`x center: ${xCenter}`);
-        console.log(`y center: ${yCenter}`);
         for (let iloop = 0; iloop < this.points.length; iloop += 1) {
             const originalPoint = this.points[iloop];
             rt1 += Math.round(originalPoint.Radius * 10)

package/dist/ScaleForm.d.ts

@@ -1,6 +1,9 @@
+import { TCoordsHook } from './types';
 export declare function ScaleForm(props: {
     title: string;
+    coords: TCoordsHook;
     currentPoints: number;
+    disabled: boolean;
     sl?: number;
     sh?: number;
     onCloseCancel: () => void;

package/dist/ScaleForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScaleForm.d.ts","sourceRoot":"","sources":["../src/ScaleForm.tsx"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,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,2CA2HA"}
+{"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,2CAmMA"}

package/dist/ScaleForm.js

@@ -1,45 +1,96 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ScaleInput } from './ScaleInput';
+import { Point } from './Point';
 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 [ratio, setRatio] = useState(1);
+    function onChangeLength(e) {
+        const newLength = Math.round(parseFloat(e.target.value) * scalingParam) / scalingParam;
+        // ratio = length / height
+        // ratio * height = length
+        // height = length / ratio
+        // remember the ratio between original length and new length
+        // ratio = newLength / length
+        // newLength = ratio * length
+        // length = newLength / ratio
+        const newHeight = Math.round((newLength / ratioLength2Height) * scalingParam) /
+            scalingParam;
+        setInputLength(newLength);
+        setHeight(newHeight);
+    }
+    function onChangeHeight(e) {
+        const newHeight = Math.round(parseFloat(e.target.value) * scalingParam) / scalingParam;
+        const newLength = Math.round(newHeight * ratioLength2Height * scalingParam) / scalingParam;
+        setInputLength(newLength);
+        setHeight(newHeight);
+    }
     const handleSubmit = (e) => {
         e.preventDefault();
-        console.log(`Scale submitted with length: ${length}, height: ${height}`);
-        props.onCloseContinue(length, height);
+        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);
     };
-    return (_jsxs("div", { children: [_jsxs("p", { style: { color: '#666', margin: '0 0 16px 0' }, children: ["Current points defined: ", _jsx("strong", { children: props.currentPoints }), ' '] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { style: {
+    const xMin = Math.round(props.coords.coords.XMin * scalingParam) / scalingParam;
+    const xMax = Math.round(props.coords.coords.XMax * scalingParam) / scalingParam;
+    const xExtension = Math.round((xMax - xMin) * scalingParam) / scalingParam;
+    const yMin = Math.round(props.coords.coords.YMin * scalingParam) / scalingParam;
+    const yMax = Math.round(props.coords.coords.YMax * scalingParam) / scalingParam;
+    const yExtension = Math.round((yMax - yMin) * scalingParam) / scalingParam;
+    const ratioLength2Height = isFinite(yExtension)
+        ? Math.round((xExtension / yExtension) * 100) / 100
+        : 0;
+    useEffect(() => {
+        setDrawnLength(isFinite(xExtension) ? xExtension : 0);
+    }, [xExtension]);
+    useEffect(() => {
+        setHeight(isFinite(yExtension) ? yExtension : 0);
+    }, [yExtension]);
+    useEffect(() => {
+        setLength(drawnLength);
+    }, [drawnLength]);
+    useEffect(() => {
+        if (inputLength !== 0 && drawnLength !== 0) {
+            setLength(inputLength);
+            setRatio(inputLength / drawnLength);
+        }
+    }, [drawnLength, inputLength]);
+    function renderExtension(extensionString, min, max) {
+        const isValid = Number.isFinite(min) && Number.isFinite(max);
+        const ext = isValid ? Math.round((max - min) * 100) / 100 : 0;
+        return isValid ? (_jsxs("span", { children: [extensionString, ":", ' ', _jsxs("strong", { children: ["[", min, ", ", max, "] -> ", ext] })] })) : (_jsx("div", {}));
+    }
+    function renderRatio() {
+        const isValid = Number.isFinite(ratioLength2Height);
+        return isValid ? (_jsxs("span", { children: ["Ratio:", _jsx("strong", { children: ratioLength2Height }), _jsx("br", {})] })) : (_jsx("div", {}));
+    }
+    return (_jsxs("div", { children: ["Current points defined: ", _jsx("strong", { children: props.currentPoints }), " ", _jsx("br", {}), renderExtension('X', xMin, xMax), _jsx("br", {}), renderExtension('Y', yMin, yMax), _jsx("br", {}), renderRatio(), _jsx("br", {}), _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { style: {
                             display: 'flex',
                             gap: '24px',
                             alignItems: 'center',
                             marginBottom: '16px',
-                        }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [_jsx("label", { htmlFor: "scale-length", style: {
-                                            marginBottom: '8px',
-                                            fontWeight: 500,
-                                            fontSize: '14px',
-                                        }, children: "Length" }), _jsx("input", { id: "scale-length", type: "number", value: Number.isFinite(props.sl) ? props.sl : '', onChange: (e) => setLength(parseFloat(e.target.value) || 0), step: "0.1", min: "0.1", max: "10", style: {
-                                            width: '100px',
-                                            padding: '8px 12px',
-                                            border: '1px solid #ddd',
-                                            borderRadius: '4px',
-                                            fontSize: '14px',
-                                            boxSizing: 'border-box',
-                                        }, placeholder: "Enter scale length (e.g., 1.5)", autoFocus: true })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [_jsx("label", { htmlFor: "scale-height", style: {
-                                            marginBottom: '8px',
-                                            fontWeight: 500,
-                                            fontSize: '14px',
-                                        }, children: "Height" }), _jsx("input", { id: "scale-height", type: "number", value: Number.isFinite(props.sh) ? props.sh : '', onChange: (e) => setHeight(parseFloat(e.target.value) || 0), step: "0.1", min: "0.1", max: "10", style: {
-                                            width: '100px',
-                                            padding: '8px 12px',
-                                            border: '1px solid #ddd',
-                                            borderRadius: '4px',
-                                            fontSize: '14px',
-                                            boxSizing: 'border-box',
-                                        }, placeholder: "Enter scale value (e.g., 1.5)" })] })] }), _jsx("button", { onClick: props.onCloseCancel, style: {
+                        }, children: [_jsx(ScaleInput, { title: "Length", extension: xExtension, ratio: ratioLength2Height, scalingParam: scalingParam, value: { value: length, setValue: setLength }, setValue: onChangeLength, disabled: props.disabled }), _jsx(ScaleInput, { title: "Height", extension: yExtension, ratio: ratioLength2Height, scalingParam: scalingParam, value: { value: height, setValue: setHeight }, setValue: onChangeHeight, disabled: props.disabled })] }), _jsx("button", { onClick: props.onCloseCancel, style: {
                             padding: '8px 16px',
                             border: '1px solid #ddd',
                             borderRadius: '4px',

package/dist/ScaleInput.d.ts

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

package/dist/ScaleInput.d.ts.map

@@ -0,0 +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,2CAyDA"}

package/dist/ScaleInput.js

@@ -0,0 +1,32 @@
+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);
+    // }, [props, props.extension]);
+    // useEffect(() => {
+    //   console.log(`ratio has changed to ${props.ratio}`);
+    // }, [props.ratio]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [_jsx("label", { htmlFor: id, style: {
+                    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: {
+                    width: '100px',
+                    padding: '8px 12px',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    fontSize: '14px',
+                    boxSizing: 'border-box',
+                }, placeholder: `Enter scale ${props.title.toLowerCase()} (e.g., 1.5)`, autoFocus: true, disabled: props.disabled ?? false })] }));
+}

package/dist/ShowOptions.js

@@ -17,7 +17,7 @@ export function ShowOptions(props) {
     const handleCheckboxCatmullRomCenterChange = handleCheckboxChange('catmullRomCenter');
     const handleCheckboxCatmullRomPointsChange = handleCheckboxChange('catmullRomPoints');
     const handleCheckboxCatmullRomChange = handleCheckboxChange('catmullRom');
-    return (_jsxs("div", { id: "idShowOptions", children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: props.show.background, onChange: (e) => handleCheckboxBackgroundChange(e) }), "Background"] }), _jsxs("div", { style: {
+    return (_jsxs("div", { id: "id.ShowOptions", children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: props.show.background, onChange: (e) => handleCheckboxBackgroundChange(e) }), "Background"] }), _jsxs("div", { style: {
                     background: 'lightgreen',
                     padding: '4px',
                     borderRadius: '4px',

package/dist/Start.d.ts

@@ -0,0 +1,10 @@
+import { useMachine } from 'react-robot';
+import { Point } from './Point';
+export declare function Start(props: {
+    machine: ReturnType<typeof useMachine>[0];
+    onReset: () => void;
+    onAfterLoadImage: (url: string) => void;
+    onAfterLoadPoints: (points: Point[], universeCenter: Point) => void;
+    onAfterDefinePoints: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Start.d.ts.map

package/dist/Start.d.ts.map

@@ -0,0 +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"}

package/dist/Start.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Input } from '@mui/material';
+import { ACTION, getValidActions, StateModal } from 'frame.statemachine';
+import { useRef, useState } from 'react';
+import PointsForm from './PointsForm';
+export function Start(props) {
+    const fileInputRef = useRef(null);
+    const [showModalPointsForm, setShowModalPointsForm] = useState(false);
+    const styleButton = {
+    // display: 'flex',
+    // flexDirection: 'column',
+    // gap: 2,
+    // padding: 1,
+    // position: 'absolute' as const,
+    // top: '38%',
+    // left: '7%',
+    };
+    const actions = getValidActions(props.machine);
+    function isDisabled(action) {
+        return actions.findIndex((a) => a === action) === -1;
+    }
+    // --------------- reset -----------------------------------------------------
+    function onReset() {
+        props.onReset();
+    }
+    // --------------- load image ------------------------------------------------
+    function onLoadImage() {
+        fileInputRef.current?.click();
+    }
+    function onBeforeLoadPoints() {
+        setShowModalPointsForm(true);
+    }
+    function handleFileChange(event) {
+        const file = event.target.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const contents = e.target?.result;
+                props.onAfterLoadImage(contents);
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    // --------------- load points -----------------------------------------------
+    function onClosePointsForm(cont = true) {
+        if (cont) {
+            props.onAfterDefinePoints();
+        }
+        setShowModalPointsForm(false);
+    }
+    function onLoadPointsCancel() {
+        onClosePointsForm(false);
+    }
+    function onAfterLoadPoints(points, universeCenter) {
+        props.onAfterLoadPoints(points, universeCenter);
+        setShowModalPointsForm(false);
+    }
+    // ---------------------------------------------------------------------------
+    return (_jsxs(Box, { id: "id.Start", sx: {
+            display: 'flex',
+            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 }) })] }));
+}

package/dist/States.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"States.d.ts","sourceRoot":"","sources":["../src/States.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,GAAG,EAAoB,MAAM,OAAO,CAAC;AAM9C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAC5B,OAAO,EAAE,GAAG,CAAC;IACb,OAAO,EAAE,GAAG,CAAC;IACb,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CAuNd"}
+{"version":3,"file":"States.d.ts","sourceRoot":"","sources":["../src/States.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAC5B,OAAO,EAAE,GAAG,CAAC;IACb,OAAO,EAAE,GAAG,CAAC;IACb,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CAuFd"}

package/dist/States.js

@@ -1,21 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Input } from '@mui/material';
-import { ACTION, StateModal, STATUS, getValidActions, State, } from 'frame.statemachine';
-import { useRef, useState } from 'react';
-import { ScaleForm } from './ScaleForm';
-import { Action } from './Action';
-import PointsForm from './PointsForm';
-import { Polygon } from './Polygon';
+import { ACTION, STATUS, State } from 'frame.statemachine';
+import { useRef } from 'react';
 export function States(props) {
     const fileInputRef = useRef(null);
-    const [showModalScaleForm, setShowModalScaleForm] = useState(false);
-    const [showModalPointsForm, setShowModalPointsForm] = useState(false);
-    const handleButtonClick = () => {
-        fileInputRef.current?.click();
-    };
-    function onClickReset() {
-        props.onClickReset();
-    }
     const handleFileChange = (event) => {
         const file = event.target.files?.[0];
         if (file) {
@@ -31,77 +19,7 @@ export function States(props) {
             props.command(ACTION.LOAD_IMAGE);
         }
     };
-    function handleClosePointsFormCancel() {
-        onClosePointsForm(false);
-    }
-    function handleClosePointsFormContinue(points, universeCenter) {
-        props.coords.setCoords(new Polygon(points, universeCenter));
-        onClosePointsForm(true);
-    }
-    function handleCloseScaleFormCancel() {
-        onCloseScaleForm(false);
-    }
-    function handleCloseScaleFormContinue(length, height) {
-        props.machine.context.length = length;
-        props.machine.context.height = height;
-        onCloseScaleForm(true);
-    }
     // Scale form
-    function onCloseScaleForm(cont = true) {
-        if (cont) {
-            props.command(ACTION.SCALE_FORM);
-        }
-        setShowModalScaleForm(false);
-    }
-    function onClosePointsForm(cont = true) {
-        if (cont) {
-            props.command(ACTION.DEFINE_POINTS);
-        }
-        setShowModalPointsForm(false);
-    }
-    const onPerformCurrentAction = (action) => () => {
-        switch (action) {
-            case ACTION.RESET:
-                onClickReset();
-                break;
-            case ACTION.LOAD_IMAGE:
-                handleButtonClick();
-                break;
-            case ACTION.DEFINE_POINTS:
-                setShowModalPointsForm(true);
-                break;
-            case ACTION.SCALE_FORM:
-                setShowModalScaleForm(true);
-                break;
-            default:
-                props.command(action);
-        }
-    };
-    function renderAction(action, performAction) {
-        return (_jsx(Action, { action: action, performAction: performAction }, action));
-    }
-    function renderActions(actions) {
-        return actions.map((action) => {
-            return (_jsx("span", { style: { marginRight: '10px', display: 'inline-block' }, children: renderAction(action, onPerformCurrentAction(action)) }, action));
-        });
-    }
-    function checkIfActionIsEnabled(current, action) {
-        let isEnabled = true;
-        const context = current.context;
-        if (action === ACTION.START_X_AXIS) {
-            isEnabled = false;
-        }
-        else if (action === ACTION.FINISH_X_AXIS) {
-            isEnabled = false;
-        }
-        else if (action === ACTION.DEFINE_POINTS) {
-            isEnabled = true;
-        }
-        else if (action === ACTION.SCALE_FORM && context.nrPoints < 3) {
-            isEnabled = false;
-        }
-        return isEnabled;
-    }
     if (typeof props.machine.context.nrPoints !== 'number' &&
         typeof props.machine.context.nrPoints !== 'string') {
         console.error('Invalid nrPoints:', props.machine.context.nrPoints);
@@ -116,12 +34,12 @@ export function States(props) {
             heightValue,
         });
     }
-    return (_jsxs("div", { id: "idStates", children: [_jsxs(Box, { sx: { marginBottom: 2 }, children: [_jsx("div", { style: { fontWeight: 'bold', background: 'lightblue' }, children: props.machine.name }), _jsx("br", {}), _jsx(Input, { inputRef: fileInputRef, type: "file", inputProps: { accept: 'image/*' }, style: { display: 'none' }, onChange: handleFileChange, disabled: false }), _jsx(State, { status: STATUS.START, current: props.machine }), _jsx(State, { status: STATUS.IMAGE_LOADED, current: props.machine }), _jsx(State, { status: STATUS.X_AXIS_STARTED, current: props.machine }), _jsx(State, { status: STATUS.X_AXIS_FINISHED, current: props.machine }), _jsx(State, { status: STATUS.POINTS_DEFINED, label: `${typeof props.machine.context.nrPoints === 'number' ||
-                            typeof props.machine.context.nrPoints === 'string'
-                            ? props.machine.context.nrPoints
-                            : ''} points defined`, current: props.machine, children: _jsx(StateModal, { isOpen: showModalPointsForm, onClose: onClosePointsForm, position: "top-right", children: _jsx(PointsForm, { title: "Import points", onCloseCancel: handleClosePointsFormCancel, onCloseContinue: handleClosePointsFormContinue }) }) }), _jsx(State, { status: STATUS.FORM_SCALED, current: props.machine, children: _jsx(StateModal, { isOpen: showModalScaleForm, onClose: onCloseScaleForm, position: "top-right", children: _jsx(ScaleForm, { title: "Apply Scale", currentPoints: props.machine.context.nrPoints, onCloseCancel: handleCloseScaleFormCancel, onCloseContinue: handleCloseScaleFormContinue }) }) }), _jsx(State, { status: STATUS.FORM_READY, label: `Form ready [${typeof props.machine.context.length === 'number'
-                            ? props.machine.context.length
-                            : ''} x ${typeof props.machine.context.height === 'number'
-                            ? props.machine.context.height
-                            : ''}]`, current: props.machine })] }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'row', gap: 2 }, children: renderActions(getValidActions(props.machine, checkIfActionIsEnabled)) })] }));
+    return (_jsx("div", { id: "id.States", children: _jsxs(Box, { sx: { marginBottom: 2 }, children: [_jsx("div", { style: { fontWeight: 'bold', background: 'lightblue' }, children: props.machine.name }), _jsx("br", {}), _jsx(Input, { inputRef: fileInputRef, type: "file", inputProps: { accept: 'image/*' }, style: { display: 'none' }, onChange: handleFileChange, disabled: false }), _jsx(State, { status: STATUS.START, current: props.machine }), _jsx(State, { status: STATUS.IMAGE_LOADED, current: props.machine }), _jsx(State, { status: STATUS.X_AXIS_STARTED, current: props.machine }), _jsx(State, { status: STATUS.X_AXIS_FINISHED, current: props.machine }), _jsx(State, { status: STATUS.POINTS_DEFINED, label: `${typeof props.machine.context.nrPoints === 'number' ||
+                        typeof props.machine.context.nrPoints === 'string'
+                        ? props.machine.context.nrPoints
+                        : ''} points defined`, current: props.machine }), _jsx(State, { status: STATUS.FORM_SCALED, current: props.machine }), _jsx(State, { status: STATUS.FORM_READY, label: `Form ready [${typeof props.machine.context.length === 'number'
+                        ? props.machine.context.length
+                        : ''} x ${typeof props.machine.context.height === 'number'
+                        ? props.machine.context.height
+                        : ''}]`, current: props.machine })] }) }));
 }

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/scaling.tsx","../src/showoptions.tsx","../src/sortedpoints.ts","../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.2"}

package/dist/types.d.ts

@@ -56,4 +56,8 @@ export type TRotationHook = {
     rotationAngle: number;
     setRotationAngle: React.Dispatch<React.SetStateAction<number>>;
 };
+export type TNumberValue = {
+    value: number;
+    setValue: React.Dispatch<React.SetStateAction<number>>;
+};
 //# 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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.image",
-  "version": "1.3.4",
+  "version": "1.3.7",
   "description": "A React component for drawing a frame on a canvas element.",
   "license": "MIT",
   "author": "Christian.Todd@rodenstock.com",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/material": "^7.3.1",
+    "@mui/material": "^7.3.2",
     "frame.akima": "^1.2.1",
     "frame.nidek": "^1.1.4",
     "frame.statemachine": "^1.1.3",
@@ -39,9 +39,9 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.3.0",
-    "typedoc": "^0.28.11",
+    "typedoc": "^0.28.12",
     "typescript": "~5.9.2",
     "typescript-eslint": "^8.41.0",
-    "vite": "^7.1.3"
+    "vite": "^7.1.4"
   }
 }