Konva
@xui/konvaKonva scenes written as Angular templates. <xui-konva-stage> is the canvas, <xui-konva-layer> a drawing surface on it, and every other tag — rect, circle, star, text … — a node inside. Everything Konva accepts goes through config; every Konva event is an Angular output.
Install
pnpm add @xui/konva Add the barrel to a standalone component's imports:
import { XuiKonvaImports } from '@xui/konva';
@Component({
imports: [XuiKonvaImports],
// …
})Examples
Shapes
Loading preview…
<xui-konva-stage [config]="stageConfig" class="border-border inline-block rounded-lg border">
<xui-konva-layer>
<xui-konva-rect [config]="rect" />
<xui-konva-circle [config]="circle" />
<xui-konva-star [config]="star" />
<xui-konva-line [config]="line" />
<xui-konva-text [config]="text" />
</xui-konva-layer>
</xui-konva-stage>Events
Loading preview…
<xui-konva-stage [config]="stageConfig" class="border-border inline-block rounded-lg border">
<xui-konva-layer>
@for (swatch of swatches; track swatch.fill) {
<xui-konva-circle [config]="swatch" (click)="onClick($event)" />
}
<xui-konva-text [config]="hint" />
</xui-konva-layer>
</xui-konva-stage>Draggable
Loading preview…
<xui-konva-stage [config]="stageConfig" class="border-border inline-block rounded-lg border">
<xui-konva-layer>
<xui-konva-group [config]="group" (dragend)="onDragEnd($event)">
<xui-konva-rect [config]="card" />
<xui-konva-text [config]="label" />
</xui-konva-group>
</xui-konva-layer>
</xui-konva-stage>Stacking
Loading preview…
<xui-konva-stage [config]="stageConfig" class="border-border inline-block rounded-lg border">
<xui-konva-layer>
@for (card of cards; track card.fill) {
<xui-konva-rect [config]="card" />
}
</xui-konva-layer>
</xui-konva-stage>API
XuiKonvaShape
xui-konva-shape, xui-konva-layer, xui-konva-fast-layer, xui-konva-group, xui-konva-label, xui-konva-rect, xui-konva-circle, xui-konva-ellipse, xui-konva-wedge, xui-konva-line, xui-konva-sprite, xui-konva-image, xui-konva-text, xui-konva-text-path, xui-konva-star, xui-konva-ring, xui-konva-arc, xui-konva-tag, xui-konva-path, xui-konva-regular-polygon, xui-konva-arrow, xui-konva-transformerEvery Konva node other than the stage, behind one component.
Inputs
configNodeConfigAnything the Konva node accepts. A model rather than an input: animating the node with getNode().to() writes the final values back, so a two-way binding stays in step with what is on screen.Outputs
mouseoverXuiKonvaEventObject<MouseEvent>Emits when the pointer moves onto the shape.mousemoveXuiKonvaEventObject<MouseEvent>Emits when the pointer moves over the shape.mouseoutXuiKonvaEventObject<MouseEvent>Emits when the pointer moves off the shape.mouseenterXuiKonvaEventObject<MouseEvent>Emits when the pointer enters the shape, without bubbling from its children.mouseleaveXuiKonvaEventObject<MouseEvent>Emits when the pointer leaves the shape, without bubbling from its children.mousedownXuiKonvaEventObject<MouseEvent>Emits when a mouse button goes down on the shape.mouseupXuiKonvaEventObject<MouseEvent>Emits when a mouse button comes up on the shape.wheelXuiKonvaEventObject<WheelEvent>Emits when the wheel turns over the shape.contextmenuXuiKonvaEventObject<PointerEvent>Emits when a context menu is requested on the shape. Call preventDefault() on the native event to suppress the browser menu.clickXuiKonvaEventObject<MouseEvent>Emits when the shape is clicked.dblclickXuiKonvaEventObject<MouseEvent>Emits when the shape is double-clicked.touchstartXuiKonvaEventObject<TouchEvent>Emits when a touch starts on the shape.touchmoveXuiKonvaEventObject<TouchEvent>Emits when a touch moves over the shape.touchendXuiKonvaEventObject<TouchEvent>Emits when a touch ends on the shape.tapXuiKonvaEventObject<TouchEvent>Emits when the shape is tapped — the touch counterpart of click.dbltapXuiKonvaEventObject<TouchEvent>Emits when the shape is double-tapped.dragstartXuiKonvaEventObject<MouseEvent>Emits when a drag of the shape begins. Only fires while the node is draggable.dragmoveXuiKonvaEventObject<MouseEvent>Emits when the shape moves during a drag.dragendXuiKonvaEventObject<MouseEvent>Emits when a drag of the shape ends.transformstartXuiKonvaEventObject<MouseEvent>Emits when a transform of the shape begins. Needs an attached Konva Transformer.transformXuiKonvaEventObject<MouseEvent>Emits when the shape is scaled or rotated during a transform.transformendXuiKonvaEventObject<MouseEvent>Emits when a transform of the shape ends.Methods
getStage(): NodeThe underlying Konva node.getNode(): NodeAlias of getStage(), for when "stage" would read as the wrong thing.getConfig(): NodeConfigaddChild(child: XuiKonvaChild): voidremoveChild(child: XuiKonvaChild): voidThe canvas everything else is drawn on — the root of a Konva scene.
Inputs
configContainerConfigAnything Konva.Stage accepts, most usefully width and height.Outputs
mouseoverXuiKonvaEventObject<MouseEvent>Emits when the pointer moves onto the stage.mousemoveXuiKonvaEventObject<MouseEvent>Emits when the pointer moves over the stage.mouseoutXuiKonvaEventObject<MouseEvent>Emits when the pointer moves off the stage.mouseenterXuiKonvaEventObject<MouseEvent>Emits when the pointer enters the stage, without bubbling from its children.mouseleaveXuiKonvaEventObject<MouseEvent>Emits when the pointer leaves the stage, without bubbling from its children.mousedownXuiKonvaEventObject<MouseEvent>Emits when a mouse button goes down on the stage.mouseupXuiKonvaEventObject<MouseEvent>Emits when a mouse button comes up on the stage.wheelXuiKonvaEventObject<WheelEvent>Emits when the wheel turns over the stage.contextmenuXuiKonvaEventObject<PointerEvent>Emits when a context menu is requested on the stage. Call preventDefault() on the native event to suppress the browser menu.clickXuiKonvaEventObject<MouseEvent>Emits when the stage is clicked.dblclickXuiKonvaEventObject<MouseEvent>Emits when the stage is double-clicked.touchstartXuiKonvaEventObject<TouchEvent>Emits when a touch starts on the stage.touchmoveXuiKonvaEventObject<TouchEvent>Emits when a touch moves over the stage.touchendXuiKonvaEventObject<TouchEvent>Emits when a touch ends on the stage.tapXuiKonvaEventObject<TouchEvent>Emits when the stage is tapped — the touch counterpart of click.dbltapXuiKonvaEventObject<TouchEvent>Emits when the stage is double-tapped.dragstartXuiKonvaEventObject<MouseEvent>Emits when a drag of the stage begins. Only fires while the node is draggable.dragmoveXuiKonvaEventObject<MouseEvent>Emits when the stage moves during a drag.dragendXuiKonvaEventObject<MouseEvent>Emits when a drag of the stage ends.transformstartXuiKonvaEventObject<MouseEvent>Emits when a transform of the stage begins. Needs an attached Konva Transformer.transformXuiKonvaEventObject<MouseEvent>Emits when the stage is scaled or rotated during a transform.transformendXuiKonvaEventObject<MouseEvent>Emits when a transform of the stage ends.Methods
getStage(): StageThe underlying Konva.Stage, once config has been applied.getNode(): StageAlias of getStage().getConfig(): NodeConfigaddChild(child: XuiKonvaChild): voidremoveChild(child: XuiKonvaChild): void