import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import './polylinie.css'
import './shapes/shape-types' // Type-Augmentation für Custom Shapes
import { PufferShapeUtil } from './shapes/PufferShapeUtil'
import { KreiselShapeUtil } from './shapes/KreiselShapeUtil'
import { FoerdererShapeUtil } from './shapes/FoerdererShapeUtil'
import { PolylinieShapeUtil } from './shapes/PolylinieShapeUtil'
import { PolylinieTool } from './tools/PolylinieTool'
import { PolylinieBindingUtil } from './bindings/PolylinieBindingUtil'
import { ShapePanel } from './components/ShapePanel'

const customShapeUtils = [PufferShapeUtil, KreiselShapeUtil, FoerdererShapeUtil, PolylinieShapeUtil]
const customTools = [PolylinieTool]
const customBindingUtils = [PolylinieBindingUtil]

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <Tldraw
        shapeUtils={customShapeUtils}
        tools={customTools}
        bindingUtils={customBindingUtils}
      >
        <ShapePanel />
      </Tldraw>
    </div>
  )
}
