Skip to main content

Lab demo (interactive)

La ruta de laboratorio en apps/upp-test (#/demo/konva) usa UppKonvaModel + <upp-konva [model]="…">: el componente incrusta el stage Konva (host interno upp-konva-floor-plan). Sirve como referencia del Integrator guide y de la Public model API (TypeDoc).

Behaviour (summary)​

La demo arranca con sala 800×600 cm y estado inicial según el componente; la paleta y el inspector mutan el área con applyAreaFromSource, setters en figuras vivas, etc. Vista / Edición cambia model.mode. El lienzo central es Konva real. (onChange) en upp-konva emite void (el host lee model.area o exportModel() si hace falta). Export/import y PNG usan los métodos de UppKonvaModel cuando el host está montado.

Los specs bajo libs/upp-konva/src/specs/ importan tipos internos del motor para pruebas de bajo nivel; la integración de producto debe limitarse al barrel @unpispas/upp-konva.

Local development​

From the monorepo root (inside nx-dev):

npx nx serve upp-test

Open the upp-konva entry from the Demos hub, or navigate directly with hash routing:

http://localhost:<port>/upp-test/#/demo/konva

(Adjust the path if your dev server uses a different base href.)

Published Developer Guide (how.*)​

When npx nx run upp-guide:build has been executed, the Demos bundle is copied under the guide as /demos/. The same route fragment applies:

Open lab demo — served next to this site on the same how.* host (hash fragment preserved). This page lives under /upp-konva/; a plain Markdown link would be rewritten under that prefix, so the demo URL is spelled as an absolute path from the host root (/demos/…).

The app uses hash routing so deep links work behind static hosting without an SPA fallback rule for each fragment path. Avoid duplicating path segments in the fragment (e.g. #/upp-test/demo/...) unless a matching route exists.

Source code​

Demo implementation (Angular module + component + template + styles), colocated with the library for a future standalone npm story:

libs/upp-konva/demo/src/lib/

Workspace import: @unpispas/upp-konva-demo (UppKonvaDemoModule). apps/upp-test only wires the route #/demo/konva.

For how the host wires the model, see Host implementation.