@smplib/canvas-tsx v0.2.2-beta

@smplib/canvas-tsx

(0.1.9-beta)

Now available:

NEW!

Clip element - clips rectangle area (in the same way as CanvasRenderingContext2D)

Known limitations:

• Has no support for nesting cases nesting
• Not counted for buffer render or component area

0.1.3-beta

Sprite element - uses HTMLImageElement to render on canvas. If image is not loaded will emit state change onload.

pointerEvents style property - enable/disable pointer events/style changes

mouseenter, mouseleave and dblclick events.

Major stability and usability improvements.

0.0.14-alpha

useEffect(callback: () => Function | void, key?: any): void; - assigns effect when render pipeline is compiled.

If no key provided gonna be called each render tree update. If key value is different than previous would be called on render tree update. If key is persistent going to be called only once.

Note: It does not check reference type content (e.g. key value = [] will emmit effect on render tree update).

useReference(): IReference - returns reference object link.

const Component = () => {
    const ref = useReference();
    const [textOffset, setTextOffset] = useState(0);
    
    useEffect(() => {
        setTextOffset(ref.element.width / 2)   
    }, null);
    
    return <TextBox ref={ref} x={textOffset} y={0}>Hello World!</TextBox>
}

Major fixes and improvements

P.S. There is a lot of staff to describe but it is require time to do. So only new features gonna be announced. For now it is better to check interfaces instead of waiting for docs.

Description

Allows you to create canvas rendering components using jsx layout and predefined elements.

Installation

npm install @smplib/canvas-tsx

Usage

Inside tsconfig.json enable jsx by adding:

{
  compilerOptions: {
    "jsx": "react",
    "jsxFactory": "Framework.createElement"
  }
}

Note: Even though there is a react reference but react is not required as dependency (and not used by library). tsconfig.json has multiple options for jsx value (TSConfig JSX).

Create .tsx file and define your component:

// Example.tsx

import {
    IDefinitionNode,
    useState,
    TextBox,
    INodeProps,
    TextAlign,
    VerticalAlign,
    Container,
    Stroke,
    Rect,
    Style,
    Background
} from "@smplib/canvas-tsx";

interface IExampleCounterProps {
    startsFrom: number;
}

const ExampleCounter = (props: INodeProps<IExampleCounterProps>) => {
    const [count, setCount] = useState(props.startsFrom);
    return (
        <Container x={100} y={100}>
            <TextBox x={0} y={0}>Counter: {count}</TextBox>
            <Stroke>
                <Rect x={100} y={0} width={100} height={100}/>
            </Stroke>
            <Style textAlign={TextAlign.Center} verticalAlign={VerticalAlign.Center}>
                <Background color={"rgba(255,255,0,0.1)"}>
                    <TextBox click={() => setCount(count + 1)} x={100} y={0} width={100} height={100}>Click ME!</TextBox>
                    {count % 2 === 0 && <TextBox click={() => setCount(count + 1)} x={200} y={0} width={100} height={100}>Hide
                        ME!</TextBox>}
                </Background>
            </Style>
        </Container>
    )
};

Create render component with Framework:

const counterComponent = Framework.createComponent(<ExampleCounter startsFrom={0}/>);
counterComponent.render(ctx);

Subscribe to component inner updates to be able to re-render it:

counterComponent.updater$$.subscribe(() => {
    ctx.clearRect(0,0,800,600);
    counterComponent.render(ctx);
});

List of available components

Right now there is several base components, which you can combine in more complex components. List is going to be extended in future releases:

Rect
Circle
Container
Style
TextBox
Polyline
Polygon
Rotate
Fill
Stroke
Grid
Background
Area
Sprite

Events support

At the moment only general mouse events supported:

click
mousedown
mouseup
mousemove
dblclick
mouseenter
mouseleave

and Style cursor type changes:

cursorType: CursorType
pointerEvents: none | all