Layout

Represents a group that can arrange its children within a rectangle.

children Element[]

The children of this group.

options OptionsStore

The configuration of this element.

Constructors

Layout (rect: Rect, options?: LayoutOptions)

Creates a new Layout instance.

Parameters

rect Rect

The bounding rectangle for the layout.

options? LayoutOptions

The layout configuration options.

Methods

append

Appends the specified element as a last child of the group.

Parameters

elements Element[]

bbox

Returns the bounding box of the element with applied transformations.

Returns

Rect - The bounding box of the element with transformations applied.

clear

Removes all child elements from the group.

clip

Gets the clipping path for this element.

Returns

Path - The clipping path for this element.

clip

Sets the clipping path for this element. The Path instance will be monitored for changes. Can be replaced by calling the clip method.

The following example demonstrates how to set a clipping path on a Circle.

import { Circle, Surface, Path, geometry } from '@progress/kendo-drawing';
const { transform, Circle: GeomCircle } = geometry;

export function drawScene(surface) {
  // Create the circle geometry and shape
    const geometry = new GeomCircle([ 100, 100 ], 80);
    const circle = new Circle(geometry, {
        stroke: { color: "red", width: 1 }
    });

  // Create a clipping path
    const clipPath = new Path();
    clipPath.moveTo(0, 0).lineTo(100, 100).lineTo(100, 0).close();

  // Clip the circle
    circle.clip(clipPath);

  // Render the group on the surface
    surface.draw(circle);
}

The following example demonstrates how to clear a clipping path.

import { Circle, Surface, Path, geometry } from '@progress/kendo-drawing';
const { transform, Circle: GeomCircle } = geometry;

export function drawScene(surface) {
  // Create the circle geometry and shape
    const geometry = new GeomCircle([ 100, 100 ], 80);
    const circle = new Circle(geometry, {
        stroke: { color: "red", width: 1 }
    });

  // Create a clipping path
    const clipPath = new Path();
    clipPath.moveTo(0, 0).lineTo(100, 100).lineTo(100, 0).close();

  // Clip the circle
    circle.clip(clipPath);

  // Render the group on the surface
    surface.draw(circle);

    setTimeout(() => {
        circle.clip(null);
    }, 2000);
}

Parameters

clip Path

The element clipping path.

clippedBBox

Returns the bounding box of the element with clipping and transformations applied. This is the rectangle that will fit around the actual rendered element.

Returns

Rect - The bounding box of the element with clipping and transformations applied.

containsPoint

Returns true if the shape contains the specified point.

Parameters

point Point

The point that should be checked.

Returns

boolean value indicating if the shape contains the point.

insert

Inserts an element at the specified position.

Parameters

position number

The position to insert the element at. Existing children beyond this position are shifted right.

element Element

The element to insert.

opacity

Gets the element opacity.

Returns

number The current element opacity.

opacity

Sets the opacity of the element.

import { Surface, Path } from '@progress/kendo-drawing';

export function drawScene(surface) {
  // Draw a path
    const path = new Path({
        stroke: {
            color: 'red',
            width: 10
        }
    });
    path.moveTo(25, 75).lineTo(75, 25);

  // Set its opacity to 50%
    path.opacity(0.5);

  // Render the group on the surface
    surface.draw(path);
}

Parameters

opacity number

The element opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).

rect

Gets the rectangle within which the children should be arranged.

Returns

Rect - The current rectangle.

rect

Sets the rectangle within which the children should be arranged.

Parameters

rect Rect

The layout rectangle.

reflow

Arranges the elements based on the current options.

remove

Removes the specified element from the group.

Parameters

element Element

The element to remove.

removeAt

Removes the child element at the specified position.

Parameters

index number

The index at which the element currently resides.

transform

Gets the transformation of the element.

Returns

Transformation - The current transformation on the element.

transform

Sets the transformation of the element.

import { Surface, Path, geometry } from '@progress/kendo-drawing';
const { transform } = geometry;

export function drawScene(surface) {
  // Draw a path
    const path = new Path({
        stroke: {
            color: 'red',
            width: 10
        }
    });
    path.moveTo(25, 50).lineTo(75, 50);

  // Rotate the path
    path.transform(transform().rotate(-45, [ 50, 50 ]));

  // Render the group on the surface
    surface.draw(path);
}

Parameters

transform Transformation

The transformation to apply to the element.

visible

Gets the visibility of the element.

Returns

boolean true if the element is visible. Otherwise, returns false.

visible

Sets the visibility of the element.

import { Surface, Path, geometry } from '@progress/kendo-drawing';
const { transform } = geometry;

export function drawScene(surface) {
  // Draw a path
    const path = new Path({
        stroke: {
            color: 'red',
            width: 10
        }
    });
    path.moveTo(25, 50).lineTo(75, 50);

  // Toggle the visibility of the path
    setInterval(() => {
        path.visible(!path.visible());
    }, 500);

  // Render the group on the surface
    surface.draw(path);
}

Parameters

visible boolean

A flag which indicates if the element will be visible.

 /