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:

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

2. Navigate to the frame.image directory:

cd Form-Manager/sample/frame.image

3. Install dependencies:

npm install

Publish

update package.json

yarn build
npm login
npm publish

Usage

1. Import the module:

import { DrawCanvas } from './DrawCanvas';

2. Use the module in a JSX component:

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

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

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

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