frame.image 1.2.1 → 1.3.1

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,CAAC;AAcnB,iBAAS,GAAG,4CA2XX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,CAAC;AAUnB,iBAAS,GAAG,4CAmHX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -3,31 +3,21 @@ import { useState } from 'react';
 import './App.css';
 import { Point } from './Point';
 import { Lens } from './Lens';
-import { ShowOptions } from './ShowOptions';
 import { Scaling } from './Scaling';
-import { States } from './States';
-import { ACTION, machine, STATUS } from 'frame.statemachine';
-import { useMachine } from 'react-robot';
 import { Polygon } from './Polygon';
 import { Center } from './Center';
 import { ImageHandler } from './ImageHandler';
 import { ModalDesigner } from './ModalDesigner';
 function App() {
-    const [currentMachine, sendCommand] = useMachine(machine);
     const width = 1000;
     const height = 600;
-    const nrPoints = 128;
     const universeCenter = new Point(width / 2, height / 2);
     const offset = 0;
-    const [dataUrl, setDataUrl] = useState(undefined);
     const [modalDesigner, setModalDesigner] = useState(false);
-    const [axis, setAxis] = useState({});
     const [imageCoords, setImageCoords] = useState({
         horizontal: 0,
         vertical: 0,
     });
-    const [rotationAngle, setRotationAngle] = useState(0);
-    const [catmullRomPolygon, setCatmullRomPoints] = useState(undefined);
     const [coords, setCoords] = useState(new Polygon([
         // new Point(255.515625, 21.15625, universeCenter),
         // new Point(225.515625, 94.15625, universeCenter),
@@ -79,148 +69,12 @@ function App() {
         // new Point(249.5, -66, universeCenter),
         // new Point(253.5, -29, universeCenter),
     ], universeCenter));
-    const [previousCenter, setPreviousCenter] = useState(new Point(0, 0, universeCenter));
-    const [isTransformed, setIsTransformed] = useState(false);
     const [scaledSL, setScaledSL] = useState(undefined);
     const [scaledSH, setScaledSH] = useState(undefined);
-    const [show, setShow] = useState({
-        catmullRomPoints: true,
-        catmullRom: true,
-        catmullRomCenter: true,
-        points: true,
-        polygon: false,
-        center: false,
-        box: false,
-        scaledBox: true,
-        background: true,
-    });
-    const [status, setStatus] = useState(STATUS.START);
     // ----------------------------------------------------------------------
-    const onClickReset = () => {
-        setCoords(new Polygon([], universeCenter));
-        setCatmullRomPoints(undefined);
-        setDataUrl(undefined);
-        setAxis({ x1: undefined, x2: undefined });
-        setRotationAngle(0);
-        sendCommand(ACTION.RESET);
-    };
-    const onTransformToCenter = () => {
-        const transformed = coords.transform(coords.Center.x, coords.Center.y, universeCenter);
-        setPreviousCenter(coords.Center);
-        setCoords(transformed);
-        setIsTransformed(true);
-    };
-    const onRetransformBackToCenter = () => {
-        console.log(`onRetransformBackToCenter: [${previousCenter.X}, ${previousCenter.Y}]`);
-        console.log(`point 1: [${coords.at(0).X}, ${coords.at(0).Y}]`);
-        const transformed = coords.transform(-previousCenter.X, -previousCenter.Y, universeCenter);
-        console.log(`point 1 transformed: [${transformed.at(0).X}, ${transformed.at(0).Y}]`);
-        setCoords(transformed);
-        setIsTransformed(false);
-    };
-    const onTransformAgainToCenter = () => {
-        const center = coords.Center;
-        console.log(`onTransformAgainToCenter: [${center?.X}, ${center?.Y}]`);
-        const transformed = coords.transform(coords.Center.x, coords.Center.y, universeCenter);
-        setCoords(transformed);
-    };
-    const refine = (coordinates) => {
-        // 1) Transform to Center
-        const prevCenter = coordinates.Center;
-        let transformed = coordinates.transform(prevCenter.x, prevCenter.y, universeCenter);
-        // 2) Convert to Spline
-        const xCenter = (coordinates.XMax + coordinates.XMin) / 2;
-        const yCenter = (coordinates.YMax + coordinates.YMin) / 2;
-        const catmullRomPolygon = transformed.createCatmullRomPoints(nrPoints, new Point(xCenter, yCenter));
-        // catmullRomPolygon.assertEquiDistantAngles();
-        setCatmullRomPoints(catmullRomPolygon);
-        // catmullRomPolygon.assertEquiDistantAngles();
-        // 3) Reset Spline and adjust Points to new origin
-        if (catmullRomPolygon) {
-            setCoords(catmullRomPolygon);
-            // catmullRomPolygon.assertEquiDistantAngles();
-        }
-        setCatmullRomPoints(undefined);
-        const dist = Math.hypot(catmullRomPolygon.Center.X, catmullRomPolygon.Center.Y);
-        // 4) Retransform back to Center
-        transformed = catmullRomPolygon.transform(-prevCenter.X, -prevCenter.Y, universeCenter);
-        return { coords: transformed, dist };
-    };
-    const onStartTransformation = () => {
-        let distance = 1000;
-        let coordinates = coords;
-        while (distance > 0.01) {
-            // find the point with the minimum distance to the center
-            const { dist, coords } = refine(coordinates);
-            distance = dist;
-            coordinates = coords;
-        }
-        setCoords(coordinates);
-    };
-    const onConvertToSpline = () => {
-        console.log(`onClick`);
-        // coords.forEach((point, index) => {
-        // console.log(
-        //   `coord ${index}: [${point.x}, ${point.y}] -> ${point.Radius}`
-        // );
-        // });
-        console.log(`---------------------------------------------------`);
-        const xMax = coords.XMax;
-        const xMin = coords.XMin;
-        const yMax = coords.YMax;
-        const yMin = coords.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}`);
-        console.log(`---------------------------------------------------`);
-        const catmullRomPolygon = coords.createCatmullRomPoints(nrPoints, new Point(xCenter, yCenter));
-        catmullRomPolygon.assertEquiDistantAngles();
-        // setCoords(pointArray);
-        setCatmullRomPoints(catmullRomPolygon);
-        catmullRomPolygon.assertEquiDistantAngles();
-        console.log(`spline has been created with equidistant angles`);
-        // console.log(`catmull rt1: ${rt1}`);
-    };
-    const onCreateRT1 = () => {
-        const catmullRomPolygon = coords.createCatmullRomPoints(128);
-        catmullRomPolygon.assertEquiDistantAngles();
-        const rt1 = catmullRomPolygon.createRT1();
-        setCoords(catmullRomPolygon);
-        console.log(`RT1: ${rt1}`);
-    };
     const onOpenModalDesigner = () => {
         setModalDesigner(true);
     };
-    const onResetSplineToPoints = () => {
-        console.log(`reset spline to points`);
-        if (catmullRomPolygon) {
-            const center = catmullRomPolygon.Center;
-            console.log(`catmull center: [${center.X}, ${center.Y}]`);
-            // // now transform the points from the Catmull-Rom polygon
-            // const transformedPolygon = catmullRomPolygon.transform(
-            //   center.X,
-            //   center.Y,
-            //   universeCenter
-            // );
-            // const newPointArray = transformedPolygon.Points.map((point, index) => {
-            //   const currentPoint = new Point(
-            //     point.X + center.X,
-            //     point.Y + center.Y,
-            //     universeCenter
-            //   );
-            //   return currentPoint;
-            // });
-            // setCoords(new Polygon(newPointArray, universeCenter));
-            setCoords(catmullRomPolygon);
-            catmullRomPolygon.assertEquiDistantAngles();
-        }
-        setCatmullRomPoints(undefined);
-    };
     function onScale(sl, sh) {
         console.log(`now it's time to scale`, sl, sh);
         const extensions = Lens.getExtensions(coords.XYPoints);
@@ -228,9 +82,6 @@ function App() {
         const shFactor = sh / extensions.y.extension;
         setCoords(coords.scale(slFactor, shFactor));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("h3", { children: "frame.image" }), _jsx(States, { machine: currentMachine, command: sendCommand, onClickReset: onClickReset, setDataUrl: setDataUrl, coords: { coords, setCoords } }), _jsx("br", {}), _jsx("br", {}), _jsx(ShowOptions, { show: show, setShow: setShow }), _jsx("br", {}), _jsx(Scaling, { SL: scaledSL, setSL: setScaledSL, SH: scaledSH, setSH: setScaledSH, onScale: onScale }), _jsx(ImageHandler, { imageCoords: { imageCoords, setImageCoords } }), _jsx(Center, { coords: coords }), _jsx("button", { disabled: isTransformed, onClick: onTransformToCenter, children: "Transform to Center" }), _jsx("button", { onClick: onStartTransformation, children: "start transformation" }), _jsx("button", { onClick: onConvertToSpline, children: "Convert to Spline" }), _jsx("button", { onClick: onResetSplineToPoints, children: "Reset Spline and adjust Points to new origin" }), _jsx("button", { onClick: onTransformAgainToCenter, children: "Transform to Center" }), _jsx("button", { onClick: onRetransformBackToCenter, children: "Retransform back to Center" }), _jsx("button", { onClick: onCreateRT1, children: "create RT1" }), _jsx("button", { onClick: onOpenModalDesigner, children: "Designer" }), _jsx(ModalDesigner, { isOpen: modalDesigner, onClose: () => setModalDesigner(false), machine: currentMachine, command: sendCommand, onClickReset: onClickReset, setDataUrl: setDataUrl, coords: { coords, setCoords }, status: { status, setStatus }, show: { show, setShow }, axis: { axis, setAxis }, imageUrl: dataUrl, imageCoords: { imageCoords, setImageCoords }, rotation: { rotationAngle, setRotationAngle }, catmullRomPoints: {
-                    catmullRomPoints: catmullRomPolygon,
-                    setCatmullRomPoints,
-                } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("h3", { children: "frame.image" }), _jsx(Scaling, { SL: scaledSL, setSL: setScaledSL, SH: scaledSH, setSH: setScaledSH, onScale: onScale }), _jsx(ImageHandler, { imageCoords: { imageCoords, setImageCoords } }), _jsx(Center, { coords: coords }), _jsx("button", { onClick: onOpenModalDesigner, children: "Designer" }), _jsx(ModalDesigner, { isOpen: modalDesigner, onClose: () => setModalDesigner(false) })] }));
 }
 export default App;

package/dist/Center.js

@@ -16,7 +16,7 @@ export function Center(props) {
         ? Math.round(props.coords.YMax * 1000) / 1000
         : 1000; //'∞';
     const radius = Math.round(Math.sqrt(x * x + y * y) * 1000) / 1000;
-    return (_jsx("div", { children: _jsxs("div", { style: {
+    return (_jsx("div", { id: "idCenter", children: _jsxs("div", { style: {
                 display: 'flex',
                 gap: '1rem',
                 justifyContent: 'center',

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,EAEV,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,CA6fd"}

package/dist/DrawCanvas.js

@@ -315,14 +315,12 @@ export function DrawCanvas(props) {
                 break;
             default: {
                 canvas.style.cursor = isDragging ? 'grabbing' : 'default';
-                const minIndex = props.coords.coords.findMinDistancePoint(point);
                 break;
             }
         }
     }, [
         getCurrentPoint,
         props.axis.axis.x1,
-        props.coords.coords,
         props.machine.name,
         props.imageCoords,
         isDragging,

package/dist/ImageHandler.js

@@ -31,5 +31,5 @@ export function ImageHandler(props) {
         }));
         setHorizontal((prev) => prev + 10);
     };
-    return (_jsxs("div", { children: [_jsxs("h4", { style: { display: 'inline', marginRight: '16px' }, children: ["Image Coordinates: [", horizontal, ", ", vertical, "]"] }), _jsx("button", { onClick: onLeft, children: "left" }), _jsx("button", { onClick: onRight, children: "right" }), _jsx("button", { onClick: onUp, children: "up" }), _jsx("button", { onClick: onDown, children: "down" })] }));
+    return (_jsxs("div", { id: "idImageHandler", children: [_jsxs("h4", { style: { display: 'inline', marginRight: '16px' }, children: ["Image Coordinates: [", horizontal, ", ", vertical, "]"] }), _jsx("button", { onClick: onLeft, children: "left" }), _jsx("button", { onClick: onRight, children: "right" }), _jsx("button", { onClick: onUp, children: "up" }), _jsx("button", { onClick: onDown, children: "down" })] }));
 }

package/dist/ModalDesigner.d.ts

@@ -1,18 +1,5 @@
-import { TAxisHook, TCatmullRomPointsHook, TCoordsHook, TImageHook, TRotationHook, TShowHook, TStatusHook } from './types';
 export declare function ModalDesigner(props: {
     isOpen: boolean;
     onClose: () => void;
-    machine: any;
-    command: any;
-    onClickReset: () => void;
-    setDataUrl: (dataUrl: string) => void;
-    coords: TCoordsHook;
-    status: TStatusHook;
-    show: TShowHook;
-    axis: TAxisHook;
-    imageUrl?: string;
-    imageCoords: TImageHook;
-    rotation: TRotationHook;
-    catmullRomPoints: TCatmullRomPointsHook;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ModalDesigner.d.ts.map

package/dist/ModalDesigner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDesigner.d.ts","sourceRoot":"","sources":["../src/ModalDesigner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,aAAa,EACb,SAAS,EACT,WAAW,EACZ,MAAM,SAAS,CAAC;AA6CjB,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,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;IACpB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,gBAAgB,EAAE,qBAAqB,CAAC;CACzC,2CAyLA"}
+{"version":3,"file":"ModalDesigner.d.ts","sourceRoot":"","sources":["../src/ModalDesigner.tsx"],"names":[],"mappings":"AAiDA,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,2CA4N5E"}

package/dist/ModalDesigner.js

@@ -2,10 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, Box, Button } from '@mui/material';
 import { States } from './States';
 import { DrawCanvas } from './DrawCanvas';
+import { Polygon } from './Polygon';
 import { Point } from './Point';
 import { ShowOptions } from './ShowOptions';
 import { ScaleForm } from './ScaleForm';
 import { useEffect, useState } from 'react';
+import { useMachine } from 'react-robot';
+import { ACTION, machine, STATUS } from 'frame.statemachine';
 const width = 600;
 const height = 400;
 const styleStates = {
@@ -40,11 +43,33 @@ const styleButton = {
     transform: 'translate(-50%, -50%)',
 };
 export function ModalDesigner(props) {
+    const [currentMachine, sendCommand] = useMachine(machine);
+    const nrPoints = 128;
+    const universeCenter = new Point(width / 2, height / 2);
     const [originalCoords, setOriginalCoords] = useState(undefined);
+    const [coords, setCoords] = useState(new Polygon([], universeCenter));
+    const [axis, setAxis] = useState({});
+    const [rotationAngle, setRotationAngle] = useState(0);
+    const [imageCoords, setImageCoords] = useState({
+        horizontal: 0,
+        vertical: 0,
+    });
+    const [imageUrl, setDataUrl] = useState(undefined);
+    const [status, setStatus] = useState(STATUS.START);
+    const [show, setShow] = useState({
+        catmullRomPoints: true,
+        catmullRom: true,
+        catmullRomCenter: true,
+        points: true,
+        polygon: false,
+        center: false,
+        box: false,
+        scaledBox: true,
+        background: true,
+    });
+    const [catmullRomPoints, setCatmullRomPoints] = useState(undefined);
     const [SH, setSH] = useState(0);
     const [SL, setSL] = useState(0);
-    const nrPoints = 128;
-    const universeCenter = new Point(width / 2, height / 2);
     function onCloseScaleForm(cont = true) {
         // if (cont) {
         //   props.command(ACTION.SCALE_FORM);
@@ -55,8 +80,8 @@ export function ModalDesigner(props) {
         onCloseScaleForm(false);
     }
     function handleCloseScaleFormContinue(length, height) {
-        props.machine.context.length = length;
-        props.machine.context.height = height;
+        currentMachine.context.length = length;
+        currentMachine.context.height = height;
         onCloseScaleForm(true);
     }
     const refine = (coordinates) => {
@@ -78,42 +103,50 @@ export function ModalDesigner(props) {
         transformed = catmullRomPolygon.transform(-prevCenter.X, -prevCenter.Y, universeCenter);
         return { coords: transformed, dist };
     };
+    const onClickReset = () => {
+        setCoords(new Polygon([], universeCenter));
+        // setCatmullRomPoints(undefined);
+        setDataUrl(undefined);
+        setAxis({ x1: undefined, x2: undefined });
+        setRotationAngle(0);
+        sendCommand(ACTION.RESET);
+    };
     const onReset = () => {
         if (originalCoords) {
-            props.coords.setCoords(originalCoords);
+            setCoords(originalCoords);
             setOriginalCoords(undefined);
         }
     };
     const onTransform = () => {
         let distance = 1000;
-        let coordinates = props.coords.coords;
-        setOriginalCoords(props.coords.coords);
+        let coordinates = coords;
+        setOriginalCoords(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);
+        setCoords(coordinates);
         console.log(`ready`);
     };
     const onCreateRT1 = () => {
-        const catmullRomPolygon = props.coords.coords.createCatmullRomPoints(128);
+        const catmullRomPolygon = coords.createCatmullRomPoints(128);
         catmullRomPolygon.assertEquiDistantAngles();
         const rt1 = catmullRomPolygon.createRT1();
-        props.coords.setCoords(catmullRomPolygon);
+        setCoords(catmullRomPolygon);
         console.log(`RT1: ${rt1}`);
         props.onClose();
     };
     useEffect(() => {
-        setSH(props.coords.coords.YMax - props.coords.coords.YMin);
-        setSL(props.coords.coords.XMax - props.coords.coords.XMin);
-    }, [props.coords.coords]);
-    return (_jsx(Modal, { open: props.isOpen, onClose: props.onClose, "aria-labelledby": "modal-title", "aria-describedby": "modal-description", children: _jsxs("div", { children: [_jsxs(Box, { id: "boxStates", sx: styleStates, display: "flex", flexDirection: "column", gap: 2, children: [_jsx(States, { machine: props.machine, command: props.command, onClickReset: props.onClickReset, setDataUrl: props.setDataUrl, coords: props.coords }), _jsx(ShowOptions, { show: props.show.show, setShow: props.show.setShow })] }), _jsxs(Box, { id: "boxCanvas", sx: {
+        setSH(coords.YMax - coords.YMin);
+        setSL(coords.XMax - coords.XMin);
+    }, [coords]);
+    return (_jsx(Modal, { open: props.isOpen, onClose: props.onClose, "aria-labelledby": "modal-title", "aria-describedby": "modal-description", children: _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,
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         gap: 2,
-                    }, children: [_jsx(DrawCanvas, { machine: props.machine, command: props.command, width: width, height: height, status: props.status, show: props.show.show, axis: props.axis, imageUrl: props.imageUrl, coords: props.coords, imageCoords: props.imageCoords, rotation: props.rotation, catmullRomPoints: props.catmullRomPoints }), _jsx(ScaleForm, { title: "Apply Scale", currentPoints: props.machine.context.nrPoints, onCloseCancel: handleCloseScaleFormCancel, onCloseContinue: handleCloseScaleFormContinue, sl: SL, sh: SH })] }), _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: onCreateRT1, children: "Create RT1" })] })] }) }));
+                    }, 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 })] }), _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: onCreateRT1, children: "Create RT1" })] })] }) }));
 }

package/dist/Scaling.js

@@ -15,5 +15,5 @@ export function Scaling(props) {
     function onConfirmSL() {
         props.onScale(props.SL ?? 0, props.SH ?? 0);
     }
-    return (_jsxs("div", { style: { margin: '16px 0' }, children: [_jsxs("label", { children: ["Length:", _jsx("input", { type: "number", min: "0", step: "any", placeholder: "Enter length", style: { width: 120 }, onChange: onChangeLength })] }), _jsxs("label", { children: ["Height:", _jsx("input", { type: "number", min: "0", step: "any", placeholder: "Enter height", style: { width: 120 }, onChange: onChangeHeight })] }), _jsx("button", { onClick: onConfirmSL, children: "Confirm SL and SH" })] }));
+    return (_jsxs("div", { id: "idScaling", style: { margin: '16px 0' }, children: [_jsxs("label", { children: ["Length:", _jsx("input", { type: "number", min: "0", step: "any", placeholder: "Enter length", style: { width: 120 }, onChange: onChangeLength })] }), _jsxs("label", { children: ["Height:", _jsx("input", { type: "number", min: "0", step: "any", placeholder: "Enter height", style: { width: 120 }, onChange: onChangeHeight })] }), _jsx("button", { onClick: onConfirmSL, children: "Confirm SL and SH" })] }));
 }

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", { children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: props.show.background, onChange: (e) => handleCheckboxBackgroundChange(e) }), "Background"] }), _jsxs("div", { style: {
+    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: {
                     background: 'lightgreen',
                     padding: '4px',
                     borderRadius: '4px',

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,CAuMd"}
+{"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,CAwLd"}

package/dist/States.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Input } from '@mui/material';
 import { State, ACTION, StateModal, STATUS, getValidActions, } from 'frame.statemachine';
 import { useRef, useState } from 'react';
@@ -13,10 +13,7 @@ export function States(props) {
     const handleButtonClick = () => {
         fileInputRef.current?.click();
     };
-    function onClick(current, action) {
-        console.log(`has been clicked: ${action}`);
-    }
-    function onClickReset(current, action) {
+    function onClickReset() {
         props.onClickReset();
     }
     const handleFileChange = (event) => {
@@ -50,10 +47,6 @@ export function States(props) {
         onCloseScaleForm(true);
     }
     // Scale form
-    const onClickScaleForm = (current, action) => {
-        console.log(`${action} button clicked`);
-        setShowModalScaleForm(true);
-    };
     function onCloseScaleForm(cont = true) {
         if (cont) {
             props.command(ACTION.SCALE_FORM);
@@ -69,7 +62,7 @@ export function States(props) {
     const onPerformCurrentAction = (action) => () => {
         switch (action) {
             case ACTION.RESET:
-                onClickReset(props.machine, action);
+                onClickReset();
                 break;
             case ACTION.LOAD_IMAGE:
                 handleButtonClick();
@@ -109,5 +102,5 @@ export function States(props) {
         }
         return isEnabled;
     }
-    return (_jsxs(_Fragment, { 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: `${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 [${props.machine.context.length} x ${props.machine.context.height}]`, current: props.machine })] }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'row', gap: 2 }, children: renderActions(getValidActions(props.machine, checkIfActionIsEnabled)) })] }));
+    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: `${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 [${props.machine.context.length} x ${props.machine.context.height}]`, current: props.machine })] }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'row', gap: 2 }, children: renderActions(getValidActions(props.machine, checkIfActionIsEnabled)) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.image",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "description": "A React component for drawing a frame on a canvas element.",
   "license": "MIT",
   "author": "Christian.Todd@rodenstock.com",
@@ -24,22 +24,22 @@
     "@mui/material": "^7.3.1",
     "frame.akima": "^1.2.0",
     "frame.statemachine": "^1.1.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-robot": "^1.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^5.0.1",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.3.0",
     "typedoc": "^0.28.10",
     "typescript": "~5.9.2",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2"
+    "typescript-eslint": "^8.40.0",
+    "vite": "^7.1.3"
   }
 }