# 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<string | undefined>(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 (
    <>
      <DrawCanvas
        width={width}
        height={height}
        imageUrl={dataUrl}
        show={show}
        handlePoints={handlePoints}
     />
    </>
  );
}

export default App;
```

### JSX-Aufbau

```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
```

### Details

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](./assets/SortedPoints.png)

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).

### Center

Es gibt verschiedene Mittelpunkte, bezogen auf

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

### Ablauf

- 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

### Wie können die 128 Punkte ermittelt werden?

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)

### Publish the package

- 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**


```mermaid
graph TD
  App --> ModalDesigner
  main --> App
  ModalDesigner --> Designer
  Designer --> DesignerDraw
  Designer --> DesignerFinish
  DesignerFinish --> Finish
  DesignerDraw --> DesignerCanvas
  DesignerDraw --> DesignerDrawOptions
  DesignerDraw --> DesignerActions
  DesignerDrawOptions --> ScaleForm
  DesignerDrawOptions --> ShowOptions
  DesignerCanvas --> DrawCanvas
  DesignerActions --> Start
  ScaleForm --> ScaleInput
```