piero is the underlying HTML canvas renderer used in Ledavio moodboards. You can also check out this demo.
piero has a completly custom event system (including click, drag, etc), render pipeline, object management, item alignment with guidelines, zoom, pan, resize, crop etc. fully built with TypeScript.
- Make sure
node^14.2andnpm^6.14is installed. - Run
npm install. - Start locally with
npm run dev.
The best place to start is looking at the existing demo board you can find at dist/index.html.
src/canvas/dev.ts's fillSamples is a good example of how you can populate your board with different objects.
Selectable is a useful wrapper if you want to make your object interactive.
Rectangle is a good starting point to understand how new object types can be implemented.
For most cases using a Board is preferable as an object manager, which means new object types need to at least implement GeometricObject.
However, by exposing LayeredRenderer, you can use the underlying RenderObject interface, which has no concept of object dimensions and simply is drawn when it is needed.
npm run build
Before merging, make sure to pass npm run lint.
Running npm run format first helps with auto-formatting.