Frame Image Manager

This project is a part of the Form Manager suite. It provides functionality to manage and manipulate frame images effectively.

Features

- Load and display frame images.
- Apply transformations (resize, crop, rotate).
- Export processed images in multiple formats.
- Easy integration with other modules in the Form Manager suite.

Installation

1. Clone the repository:

``bash
git clone https://github.com/your-repo/Form-Manager.git
`

2. Navigate to the frame.image directory:

`bash
cd Form-Manager/sample/frame.image
`

3. Install dependencies:

`bash
npm install
`

Publish

_update package.json_

`
yarn build
npm login
npm publish
`

Usage

1. Import the module:

`javascript
import { DrawCanvas } from './DrawCanvas';
`

2. Use the module in a JSX component:

`javascript
function App() {
const [show, setShow] = useState({
akima: true,
center: true,
polygon: false,
box: false,
points: true,
background: true,
});
const [dataUrl, setDataUrl] = useState(undefined);
const width = 800;
const height = 600;

const handlePoints = (points: { x: number; y: number }[]): void => {
console.log(handlePoints);
points.forEach((point, index) => {
console.log(point[${index}]: ${point.x}, ${point.y});
});
};

return (
<>
width={width}
height={height}
imageUrl={dataUrl}
show={show}
handlePoints={handlePoints}
/>

);
}

export default App;
`

$3

`plantuml
@startuml

title Aufbau der JSX-Komponenten

[App]
[App] --> [States]
[App] --> [ShowOptions]
[App] --> [Scaling]
[App] --> [ModalDesigner]
[App] --> [MouseCoords]
[App] --> [button]
[ModalDesigner] --> [Modal]
[Modal] --> [States]
[Modal] --> [ShowOptions]
[Modal] --> [DrawCanvas]
[Modal] --> [ScaleForm]
[States] --> [Box]
[States] --> [Action]
[Box] --> [State]: START
[Box] --> [State]: IMAGE_LOADED
[Box] --> [State]: X_AXIS_STARTED
[Box] --> [State]: X_AXIS_FINISHED
[Box] --> [State]: POINTS_DEFINED
[Box] --> [State]: FORM_SCALED
[Box] --> [State]: FORM_READY
[DrawCanvas] --> [canvas]
[MouseCoords] --> [h6]

@enduml
``

$3

Nach jedem Hinzufügen oder Entfernen eines Punkts wird die Menge der Punkte wieder nach folgendem Schema sortiert:

- Der Mittelpunkt der Box, welche die Punkte umfasst, wird berechnet
- Die Punkte werden nach ihrem Winkel zum Mittelpunkt sortiert (Polarwinkel-Sortierung).

!Beispiel für die Sortierung der Punkte

Um eine Box um die Punkte zu zeichnen, die die Skalierung anzeigt, muss erst der Mittelpunkt der selektierten Punkte ermittelt werden (dieser ist nicht automatisch der Mittelpunkt des Canvas).

$3

Es gibt verschiedene Mittelpunkte, bezogen auf

- Universum: Der Mittelpunkt des Zeichenbereichs
- Punkte-Array: Der Mittelpunkt des vom Anwender eingegebenen Punkte

$3

- lade das Bild mit der Form
- justiere das Bild durch Angabe zweier Punkte auf der X-Achse
- setze Punkte
- definiere Scheibenlänge und Scheibenhöhe

@startuml
title Frame Image Manager - State Machine

[*] --> START

START --> IMAGE_LOADED : LOAD_IMAGE
IMAGE_LOADED --> X_AXIS_STARTED : START_X_AXIS
X_AXIS_STARTED --> X_AXIS_FINISHED : FINISH_X_AXIS
X_AXIS_FINISHED --> POINTS_DEFINED : DEFINE_POINTS
POINTS_DEFINED --> FORM_SCALED : ENABLE_SCALING
FORM_SCALED --> FORM_READY : SCALE

X_AXIS_STARTED --> IMAGE_LOADED : RESET_START_X_AXIS
X_AXIS_FINISHED --> X_AXIS_STARTED : RESET_FINISH_X_AXIS

note right of POINTS_DEFINED

- Points are sorted by polar angle
- Center is calculated from bounding box
- Minimum 3 points required
end note

note right of FORM_SCALED

- Apply SL (length) and SH (height)
- Scale existing points
- Interpolate to 128 points
end note

@enduml

$3

1) die Punkte werden durch Mouse-Click gesetzt
Nun hat man ein Polygon mit ungleich verteilten Punkten
2) Convert to Spline: auf Basis der Punkte wird ein Catmull-Rom-Spline generiert
Aus dem Spline können Punkte erzeugt werden, die äquidistant sind
Allerdings entspricht der Ursprungspunkt, von welchem die Punkte erzeugt wurden, nicht dem Mittelpunkt des Polygons.
Eine zusätzliche Einschränkung ist, dass die ursprünglich vom Anwender definierten Punkte aus 1) nicht mehr vorhanden sind
3)

$3

- update the file package.json
- check whether all packages are up to date (_yarn outdated_)
- update packages
- update the version number in package.json
- make sure that the package.json is not private
- export the required functions and classes (in _index.ts_)
- document the package
- yarn doc
- build the package
- yarn build
- commit and push the package
- _git commit_
- _git push_
- publish the package
- npm publish