frame.image 1.3.1 → 1.3.3

package/dist/Designer.d.ts

@@ -0,0 +1,4 @@
+export declare function Designer(props: {
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Designer.d.ts.map

package/dist/Designer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Designer.d.ts","sourceRoot":"","sources":["../src/Designer.tsx"],"names":[],"mappings":"AAaA,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,2CAgJtD"}

package/dist/Designer.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { DrawCanvas } from './DrawCanvas';
+import { ScaleForm } from './ScaleForm';
+import { ShowOptions } from './ShowOptions';
+import { States } from './States';
+import { ACTION, machine, STATUS } from 'frame.statemachine';
+import { useMachine } from 'react-robot';
+import { useState } from 'react';
+import { Polygon } from './Polygon';
+import { Point } from './Point';
+import { Finish } from './Finish';
+export function Designer(props) {
+    const nrPoints = 128;
+    const width = 600;
+    const height = 400;
+    const universeCenter = new Point(width / 2, height / 2);
+    const [currentMachine, sendCommand] = useMachine(machine);
+    const [imageUrl, setDataUrl] = useState(undefined);
+    const [axis, setAxis] = useState({});
+    const [rotationAngle, setRotationAngle] = useState(0);
+    const [coords, setCoords] = useState(new Polygon([], universeCenter));
+    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 [imageCoords, setImageCoords] = useState({
+        horizontal: 0,
+        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);
+        setDataUrl(undefined);
+        setAxis({ x1: undefined, x2: undefined });
+        setRotationAngle(0);
+        sendCommand(ACTION.RESET);
+    };
+    function onCloseScaleForm(cont = true) {
+        // if (cont) {
+        //   props.command(ACTION.SCALE_FORM);
+        // }
+        // setShowModalScaleForm(false);
+    }
+    function handleCloseScaleFormCancel() {
+        onCloseScaleForm(false);
+    }
+    function handleCloseScaleFormContinue(length, height) {
+        currentMachine.context.length = length;
+        currentMachine.context.height = height;
+        onCloseScaleForm(true);
+    }
+    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,
+                    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: props.onClose })] }));
+}

package/dist/Finish.d.ts

@@ -0,0 +1,9 @@
+import { Point } from './Point';
+import { TCoordsHook } from './types';
+export declare function Finish(props: {
+    universeCenter: Point;
+    nrPoints: number;
+    coords: TCoordsHook;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Finish.d.ts.map

package/dist/Finish.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Finish.d.ts","sourceRoot":"","sources":["../src/Finish.tsx"],"names":[],"mappings":"AAGA,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,MAAM,IAAI,CAAC;CACrB,2CA4GA"}

package/dist/Finish.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button } from '@mui/material';
+import { useState } from 'react';
+import { Point } from './Point';
+export function Finish(props) {
+    const [originalCoords, setOriginalCoords] = useState(undefined);
+    const styleButton = {
+        position: 'absolute',
+        top: '78%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+    };
+    const refine = (coordinates) => {
+        // 1) Transform to Center
+        const prevCenter = coordinates.Center;
+        let transformed = coordinates.transform(prevCenter.x, prevCenter.y, props.universeCenter);
+        // 2) Convert to Spline
+        const xCenter = (coordinates.XMax + coordinates.XMin) / 2;
+        const yCenter = (coordinates.YMax + coordinates.YMin) / 2;
+        const catmullRomPolygon = transformed.createCatmullRomPoints(props.nrPoints, new Point(xCenter, yCenter));
+        // setCatmullRomPoints(catmullRomPolygon);
+        // 3) Reset Spline and adjust Points to new origin
+        // if (catmullRomPolygon) {
+        //   setCoords(catmullRomPolygon);
+        // }
+        // setCatmullRomPoints(undefined);
+        const dist = Math.hypot(catmullRomPolygon.Center.X, catmullRomPolygon.Center.Y);
+        // 4) Retransform back to Center
+        transformed = catmullRomPolygon.transform(-prevCenter.X, -prevCenter.Y, props.universeCenter);
+        return { coords: transformed, dist };
+    };
+    const onTransform = () => {
+        let distance = 1000;
+        let coordinates = props.coords.coords.clone();
+        setOriginalCoords(props.coords.coords);
+        while (distance > 0.01) {
+            // find the point with the minimum distance to the center
+            const { dist, coords } = refine(coordinates);
+            distance = dist;
+            coordinates = coords;
+        }
+        props.coords.setCoords(coordinates);
+        console.log(`ready`);
+    };
+    const onReset = () => {
+        if (originalCoords) {
+            props.coords.setCoords(originalCoords);
+            setOriginalCoords(undefined);
+        }
+    };
+    const onCreateRT1 = () => {
+        const catmullRomPolygon = props.coords.coords.createCatmullRomPoints(128);
+        catmullRomPolygon.assertEquiDistantAngles();
+        const rt1 = catmullRomPolygon.createRT1();
+        props.coords.setCoords(catmullRomPolygon);
+        console.log(`RT1: ${rt1}`);
+        props.onClose();
+    };
+    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: onCreateRT1, children: "Create RT1" })] }));
+}

package/dist/ModalDesigner.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"ModalDesigner.d.ts","sourceRoot":"","sources":["../src/ModalDesigner.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,2CAW5E"}

package/dist/ModalDesigner.js

@@ -1,152 +1,6 @@
-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 = {
-    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 styleButton = {
-    position: 'absolute',
-    top: '78%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from '@mui/material';
+import { Designer } from './Designer';
 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);
-    function onCloseScaleForm(cont = true) {
-        // if (cont) {
-        //   props.command(ACTION.SCALE_FORM);
-        // }
-        // setShowModalScaleForm(false);
-    }
-    function handleCloseScaleFormCancel() {
-        onCloseScaleForm(false);
-    }
-    function handleCloseScaleFormContinue(length, height) {
-        currentMachine.context.length = length;
-        currentMachine.context.height = height;
-        onCloseScaleForm(true);
-    }
-    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));
-        // setCatmullRomPoints(catmullRomPolygon);
-        // 3) Reset Spline and adjust Points to new origin
-        // if (catmullRomPolygon) {
-        //   setCoords(catmullRomPolygon);
-        // }
-        // 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 onClickReset = () => {
-        setCoords(new Polygon([], universeCenter));
-        // setCatmullRomPoints(undefined);
-        setDataUrl(undefined);
-        setAxis({ x1: undefined, x2: undefined });
-        setRotationAngle(0);
-        sendCommand(ACTION.RESET);
-    };
-    const onReset = () => {
-        if (originalCoords) {
-            setCoords(originalCoords);
-            setOriginalCoords(undefined);
-        }
-    };
-    const onTransform = () => {
-        let distance = 1000;
-        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;
-        }
-        setCoords(coordinates);
-        console.log(`ready`);
-    };
-    const onCreateRT1 = () => {
-        const catmullRomPolygon = coords.createCatmullRomPoints(128);
-        catmullRomPolygon.assertEquiDistantAngles();
-        const rt1 = catmullRomPolygon.createRT1();
-        setCoords(catmullRomPolygon);
-        console.log(`RT1: ${rt1}`);
-        props.onClose();
-    };
-    useEffect(() => {
-        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: 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" })] })] }) }));
+    return (_jsx(Modal, { open: props.isOpen, onClose: props.onClose, "aria-labelledby": "modal-title", "aria-describedby": "modal-description", children: _jsx(Designer, { onClose: props.onClose }) }));
 }

package/dist/Point.d.ts

@@ -5,6 +5,7 @@ export declare class Point {
     private yOrigin;
     static drawBox(context: CanvasRenderingContext2D, p1: Point, p2: Point, color: string): void;
     constructor(x: number, y: number, origin?: Point);
+    clone(): Point;
     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,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;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"}

package/dist/Point.js

@@ -15,6 +15,9 @@ export class Point {
         this.x = x;
         this.y = y;
     }
+    clone() {
+        return new Point(this.X, this.Y, this.Origin);
+    }
     get X() {
         return this.x;
     }

package/dist/Polygon.d.ts

@@ -7,6 +7,7 @@ export declare class Polygon {
     private yMin;
     private yMax;
     constructor(points: Point[], universeCenter: Point);
+    clone(): Polygon;
     get Length(): number;
     get Points(): Point[];
     get XYPoints(): {

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;AAEhC,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,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,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;AAEhC,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,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

@@ -15,6 +15,10 @@ export class Polygon {
         this.yMax = Math.max(...points.map((point) => point.Y));
         this.universeCenter = universeCenter;
     }
+    clone() {
+        const clonedPoints = this.points.map((point) => point.clone());
+        return new Polygon(clonedPoints, this.universeCenter);
+    }
     get Length() {
         return this.points.length;
     }

package/dist/index.d.ts

@@ -1,5 +1,10 @@
 export { DrawCanvas } from './DrawCanvas';
 export { ModalDesigner } from './ModalDesigner';
+export { Designer } from './Designer';
+export { Finish } from './Finish';
+export { ScaleForm } from './ScaleForm';
+export { ShowOptions } from './ShowOptions';
+export { States } from './States';
 export { TCoordsHook, TStatusHook, TShowHook, TAxisHook, TMouseCoordsHook, TImageHook, TRotationHook, TCatmullRomPointsHook, } from './types';
 export { Polygon } from './Polygon';
 export { Point } from './Point';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,qBAAqB,GACtB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,qBAAqB,GACtB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,4 +1,9 @@
 export { DrawCanvas } from './DrawCanvas';
 export { ModalDesigner } from './ModalDesigner';
+export { Designer } from './Designer';
+export { Finish } from './Finish';
+export { ScaleForm } from './ScaleForm';
+export { ShowOptions } from './ShowOptions';
+export { States } from './States';
 export { Polygon } from './Polygon';
 export { Point } from './Point';

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/action.tsx","../src/app.tsx","../src/center.tsx","../src/drawcanvas.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/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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.image",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "A React component for drawing a frame on a canvas element.",
   "license": "MIT",
   "author": "Christian.Todd@rodenstock.com",
@@ -22,22 +22,23 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.3.1",
-    "frame.akima": "^1.2.0",
-    "frame.statemachine": "^1.1.2",
+    "frame.akima": "^1.2.1",
+    "frame.statemachine": "^1.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^6.0.0",
     "react-robot": "^1.2.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.33.0",
+    "@eslint/js": "^9.34.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^5.0.1",
-    "eslint": "^9.33.0",
+    "eslint": "^9.34.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.3.0",
-    "typedoc": "^0.28.10",
+    "typedoc": "^0.28.11",
     "typescript": "~5.9.2",
     "typescript-eslint": "^8.40.0",
     "vite": "^7.1.3"