frame.image 1.3.4 → 1.3.5

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":"AAaA,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,2CA2JA"}

package/dist/Designer.js

@@ -37,8 +37,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%',
@@ -72,19 +70,19 @@ export function Designer(props) {
         setRotationAngle(0);
         sendCommand(ACTION.RESET);
     };
-    function onCloseScaleForm(cont = true) {
+    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 onClose = (pol) => () => {
         const catmullRomPolygonRT1 = pol.createCatmullRomPoints(128);
@@ -102,5 +100,5 @@ export function Designer(props) {
                     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 })] }));
+                }, 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: 0, sh: 0 })] }), _jsx(Finish, { universeCenter: universeCenter, nrPoints: nrPoints, coords: { coords, setCoords }, onClose: onClose })] }));
 }

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,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;CACvC,2CAiIA"}

package/dist/Finish.js

@@ -1,10 +1,14 @@
 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%',
         left: '50%',
@@ -48,5 +52,20 @@ 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: "boxButtons", 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);
+                            }
+                            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/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(): {

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

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;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.image",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "A React component for drawing a frame on a canvas element.",
   "license": "MIT",
   "author": "Christian.Todd@rodenstock.com",
@@ -39,7 +39,7 @@
     "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"