Skip to main content

​
LayerType Enum

Defines the different types of visual elements that can be rendered on the canvas. 
enum LayerType {
  Rectangle,
  Ellipse,
  Path,
  Text,
  Note,
}
​
Rectangle
0
Rectangular shape layer
​
Ellipse
1
Elliptical/circular shape layer
​
Path
2
Free-form drawing path layer created with pencil tool
​
Text
3
Text content layer
​
Note
4
Sticky note layer

​
Layer Types

Each layer type shares common properties for positioning and appearance, with specific properties for specialized functionality.

​
RectangleLayer

Represents a rectangular shape on the canvas. 
type RectangleLayer = {
  type: LayerType.Rectangle;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
  value?: string;
};
​
type
LayerType.Rectangle
required
Layer type discriminator
​
x
number
required
X coordinate of the layer’s top-left corner
​
y
number
required
Y coordinate of the layer’s top-left corner
​
height
number
required
Height of the rectangle in pixels
​
width
number
required
Width of the rectangle in pixels
​
fill
Color
Fill color of the rectangle. See Color type.
​
value
string
Optional text content associated with the layer

​
EllipseLayer

Represents an elliptical or circular shape on the canvas. 
type EllipseLayer = {
  type: LayerType.Ellipse;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
  value?: string;
};
​
type
LayerType.Ellipse
required
Layer type discriminator
​
x
number
required
X coordinate of the bounding box’s top-left corner
​
y
number
required
Y coordinate of the bounding box’s top-left corner
​
height
number
required
Height of the bounding box in pixels
​
width
number
required
Width of the bounding box in pixels
​
fill
Color
Fill color of the ellipse. See Color type.
​
value
string
Optional text content associated with the layer

​
PathLayer

Represents a free-form drawing path created with the pencil tool. 
type PathLayer = {
  type: LayerType.Path;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
  points: number[][];
  value?: string;
};
​
type
LayerType.Path
required
Layer type discriminator
​
x
number
required
X coordinate of the bounding box’s top-left corner
​
y
number
required
Y coordinate of the bounding box’s top-left corner
​
height
number
required
Height of the bounding box in pixels
​
width
number
required
Width of the bounding box in pixels
​
fill
Color
Stroke color of the path. See Color type.
​
points
number[][]
required
Array of [x, y] coordinate pairs representing the path points
​
value
string
Optional text content associated with the layer

​
TextLayer

Represents a text content layer on the canvas. 
type TextLayer = {
  type: LayerType.Text;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
  value?: string;
};
​
type
LayerType.Text
required
Layer type discriminator
​
x
number
required
X coordinate of the text box’s top-left corner
​
y
number
required
Y coordinate of the text box’s top-left corner
​
height
number
required
Height of the text box in pixels
​
width
number
required
Width of the text box in pixels
​
fill
Color
Text color. See Color type.
​
value
string
The text content to display

​
NoteLayer

Represents a sticky note layer on the canvas. 
type NoteLayer = {
  type: LayerType.Note;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
  value?: string;
};
​
type
LayerType.Note
required
Layer type discriminator
​
x
number
required
X coordinate of the note’s top-left corner
​
y
number
required
Y coordinate of the note’s top-left corner
​
height
number
required
Height of the note in pixels
​
width
number
required
Width of the note in pixels
​
fill
Color
Background color of the note. See Color type.
​
value
string
The note text content

​
Layer Union Type

The Layer type is a discriminated union of all layer types, enabling type-safe layer handling. 
type Layer =
  | RectangleLayer
  | EllipseLayer
  | PathLayer
  | TextLayer
  | NoteLayer;

​
Usage Examples

​
Creating a Layer

import { LayerType, Color } from '@/types/canvas';
import { LiveObject } from '@liveblocks/client';

const lastUsedColor: Color = { r: 255, g: 0, b: 0 };
const position = { x: 100, y: 150 };

const layer = new LiveObject({
  type: LayerType.Rectangle,
  x: position.x,
  y: position.y,
  height: 100,
  width: 100,
  fill: lastUsedColor,
});

​
Type Guards

import { Layer, LayerType } from '@/types/canvas';

function isTextLayer(layer: Layer): layer is TextLayer {
  return layer.type === LayerType.Text;
}

function isPathLayer(layer: Layer): layer is PathLayer {
  return layer.type === LayerType.Path;
}

​
Rendering Layers

import { Layer } from '@/types/canvas';

function renderLayer(layer: Layer) {
  switch (layer.type) {
    case LayerType.Rectangle:
      return <rect
        x={layer.x}
        y={layer.y}
        width={layer.width}
        height={layer.height}
        fill={`rgb(${layer.fill.r},${layer.fill.g},${layer.fill.b})`}
      />;
    case LayerType.Ellipse:
      return <ellipse
        cx={layer.x + layer.width / 2}
        cy={layer.y + layer.height / 2}
        rx={layer.width / 2}
        ry={layer.height / 2}
        fill={`rgb(${layer.fill.r},${layer.fill.g},${layer.fill.b})`}
      />;
    // ... other cases
  }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us