Skip to main content

<GridBackgroundComponent/>

This component configures a grid background for a SurfaceComponent or PaperComponent.

Usage​

Default settings​

Declare the grid background component inside a SurfaceComponent, SurfaceProvider, PaperComponent or PaperProvider:

<SurfaceComponent :url="url" :render-options="renderOptions">
    ...
	<GridBackgroundComponent/>
</SurfaceComponent>

In this example, the grid will use the default settings, which is a grid of size 50. No grid is imposed on the movement or size of vertices - this setup is useful for a basic visual effect.

Surface grid​

The grid background will paint itself according to the grid specified for a surface if you set one:

<script setup>
    const renderOptions = {
		grid:{
			size:{width:20, height:20 }
		}
    }
</script>
<template>
<SurfaceComponent :url="url" :render-options="renderOptions">
	...
	<GridBackgroundComponent/>
</SurfaceComponent>
</template>

Props​

GridBackgroundComponentProps
Props for the grid background component.
NameTypeDescription
autoShrink?booleanDefaults to true, and instructs the grid that if the grid has grown beyond any minimum value set in either axis, if the content bounds subsequently shrink in that axis below the minimum, the grid should shrink back to the minimum. If you set this to false the grid will never shrink back to its minimum values once they have been exceeded.
dotRadius?numberThe radius for dots representing grid positions (when gridType id GridTypes.dotted). Defaults to 2.
grid?GridThe grid to use. This is optional; if you do not supply one the background will attempt to read the grid definition from the Surface. If that is also not set then a default grid of 50x50 pixels will be used.
gridType?GridTypeType of grid - lines or dots. Defaults to lines.
maxHeight?numberThe maximum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxHeight / 2) - (maxHeight / 2). maxHeight takes precedence over minHeight.
maxWidth?numberThe maximum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxWidth / 2) - (maxWidth / 2). maxWidth takes precedence over minWidth.
minHeight?numberThe minimum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minHeight / 2) - (minHeight / 2). Defaults to 20 000.
minWidth?numberThe minimum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minWidth / 2) - (minWidth / 2). Defaults to 20 000.
showBorder?booleanWhether or not to show a thick border around the entire background. Defaults to false.
showTickMarks?booleanDefaults to false. If true, the grid will also draw tick marks between the grid lines.
tickDotRadius?numberThe radius for dots representing grid tick marks (when gridType id GridTypes.dotted). Defaults to 1.
tickMarksPerCell?numberNumber of tick marks to draw per cell. Defaults to 2.
visible?booleanWhether or not the background is initially visible. Defaults to true.