DOCSEARCHbyAlgolia
Submit Docs

2flex Canvas Library

website·Indexed 31 days ago

https://2flexible.com

A flexible canvas library built on a block philosophy. It provides a system for creating canvas elements using classes such as Block, ShapeBlock, LayoutBlock, and specialized shapes like RectangleBlock, TextBlock, ImageBlock, and VideoBlock. Features include flexbox and grid layout systems, draggable and resizable transformations, animations via keyframes, and utility functions for percentage and viewport-based measurements.

Tokens
16.6K
Snippets
169
Records
170
Agent score
50%

What's inside 2flex

  1. Initialize a RectangleBlock

    The RectangleBlock class creates a rectangle shape. It inherits from the ShapeBlock class, meaning it supports all options available to ShapeBlock in addition to its own specific properties.
    const block = new RectangleBlock(options);

  2. Initialize a CircleBlock

    The CircleBlock class creates a circle shape and inherits from the ShapeBlock class. It can be instantiated using an options object. Because it inherits from ShapeBlock, it also supports all options available in the ShapeBlock API.
    const block = new CircleBlock(options);

  3. Initialize a LineBlock

    The LineBlock class is used to create line shapes. It inherits from the ShapeBlock class, meaning it supports all options available to ShapeBlock in addition to its own specific line properties.
    const block = new LineBlock(options);

  4. Initialize a 2flex Canvas and add blocks

    To start using 2flex, you must first construct a Canvas instance. The constructor requires a width, height, and a unique ID string (which becomes the HTML ID property). To display elements, create blocks and add them to the canvas using the .add() method. Block coordinates (x, y) are relative to the top-left of the canvas.
    // Initialize canvas: width, height, uniqueId
const myCanvas = new Canvas(800, 400, "myCanvas")

// Create a block (e.g., a blue rectangle)
const myFirstRectanlge = RectangleBlock({x: 10, y: 30, width: 100, height: 100, backgroundColor: "blue"})

// Add the block to the canvas to render it
myCanvas.add(myFirstRectanlge)

  5. Create basic block animations with keyframes

    Use the animate method on a block to define animations using keyframes. The method accepts an options object and an optional callback function for custom animation logic. It returns an animation ID that can be used to control the animation later.
    const simpleRectangle = new Reactangle({width: 120, height: 60, backgroundColor: "black"})

// Move from x: 0 to x: 100 over 5 seconds
const animationId = rect.animate({
  x: [0, 100],
  autoStart: true,
  duration: 5000,
  easing: "ease"
});

console.log(animationId);

  6. Stick a LineBlock to other blocks

    The start and end points of a LineBlock can be attached to other blocks using stickStart and stickEnd. These options take an object containing the target block and the relative x and y coordinates where the line should attach.
    const startBlock = new RectangleBlock({...options})
const endBlock = new RectangleBlock({...options})

new LineBlock({
  ...options, 
  stickStart: { 
    block: startBlock, 
    x: startBlock.width(), 
    y: startBlock.height() 
  }, 
  stickEnd: { 
    block: endBlock, 
    x: 0, 
    y: 0 
  }
})

  7. Initialize a VideoBlock animation

    The VideoBlock class is used for video animations and inherits from the ShapeBlock class. When instantiating a VideoBlock, the first parameter must be an HTML video element. Because it inherits from ShapeBlock, it also supports all configuration options available to ShapeBlock.
    const block = new VideoBlock(videoElement, options);

  8. Create Grid layouts using LayoutBlock

    Use LayoutBlock with layout: "grid" to implement a CSS-like grid layout. You can define the grid structure using gridTemplateColumns, gridTemplateRow, or the combined gridTemplate option. Grid layouts also support standard alignment properties.
    const gridLayout = new LayoutBlock({
  layout: "grid", 
  gridTemplateColumns: [30, 30, 30], 
  gridTemplateRow: [50, 30], 
  width: 120, 
  height: 80
});

  9. Create custom event handlers for blocks

    For complex event logic, blocks provide an eventHandler method to register custom events with the canvas. When implementing a custom handler, use the checkInBound(event) method to determine if the event occurred within the block's boundaries. Because custom handlers do not automatically trigger a re-render, you must call invokeChange() to update the canvas after modifying the block's state.
    const simpleRect = new Reactangle({...options, selectable: true});

const rectangelCustomClickEvent = (event) => {
    // Check if the event is within the rectangle boundaries
    const inBound = simpleRect.checkInBound(event);

    if(inBound){
        simpleRect.set({"backgroundColor": "red"});
    } else {
        simpleRect.set({"backgroundColor": "blue"});
    }

    // Manually trigger canvas update
    simpleRect.invokeChange();
};

  10. Create custom blocks by inheriting the Block class

    You can create custom blocks by extending the Block class. To define a custom option for your block, create a method with the same name as the option. Use super.__valueHandler within that method to handle value caching and unit conversion.
    class MyBlock extends Block {
    constructor(options) {
        super(options);
    }
    
    // Method name matches the option name
    myOption(option) {
        // __valueHandler manages caching and unit conversion
        return super.__valueHandler(option, "myOption", default)
    }
}

  11. Initialize a LayoutBlock

    Use new LayoutBlock(options) to create a layout system in the canvas. By default, the layout type is set to flex.
    const block = new LayoutBlock({ layout: 'flex' });