@progress/kendo-diagram-vue-wrapper
Version:
Kendo UI Diagram wrapper for Vue.js
312 lines (177 loc) • 9.43 kB
Markdown
---
title: shapeDefaultsProps API
description: "API Index | shapeDefaultsProps"
api_reference: true
slug: api_diagram_shapedefaultsprops
---
# ShapeDefaultsProps
### shape-defaults-connectors `Array`
Defines the connectors the shape owns. A connector is the point in the shape where a connection between this shape and another one can originate from or end.
The supported values are:
* `top`—A top connector.
* `right`—A right connector.
* `bottom`—A bottom connector.
* `bottomRight`—A bottom right connector.
* `left`—A left connector.
* `auto`—An auto connector.
You can define your own custom connectors or use the predefined types.
### shape-defaults-connector-defaults-width `Number`
Defines the width of the shape connectors.
### shape-defaults-connector-defaults-height `Number`
Defines the height of the shape connectors.
### shape-defaults-connector-defaults-hover-fill `String`
Defines the hover fill options of the shape connectors.
### shape-defaults-connector-defaults-hover-fill-color `String`
Defines the hover fill color of the shape connectors.
### shape-defaults-connector-defaults-hover-fill-opacity `Number`
Defines the hover fill opacity of the shape connectors.
### shape-defaults-connector-defaults-hover-stroke `String`
Defines the hover stroke options of the shape connectors.
### shape-defaults-connector-defaults-hover-stroke-color `String`
Defines the hover stroke color.
### shape-defaults-connector-defaults-hover-stroke-dash-type `String`
The dash type of the hover stroke.
The supported dash types are:
* `dash`—A line that consists of dashes.
* `dashDot`—A line that consists of a repeating dash-dot pattern.
* `dot`—A line that consists of dots.
* `longDash`—A line that consists of a repeating long-dash pattern.
* `longDashDot`—A line that consists of a repeating long-dash-dot pattern.
* `longDashDotDot`—A line that consists of a repeating long-dash-dot-dot.
* `solid`—A solid line.
### shape-defaults-connector-defaults-hover-stroke-width `Number`
Defines the thickness or width of the shape connectors stroke on hover.
### shape-defaults-connector-defaults-fill `String`
Defines the fill options of the shape connectors.
### shape-defaults-connector-defaults-fill-color `String`
Defines the fill color of the shape connectors.
### shape-defaults-connector-defaults-fill-opacity `Number`
Defines the fill opacity of the shape connectors.
### shape-defaults-connector-defaults-stroke `String`
Defines the stroke options of the shape connectors.
### shape-defaults-connector-defaults-stroke-color `String`
Defines the stroke color.
### shape-defaults-connector-defaults-stroke-dash-type `String`
Defines the stroke dash type.
The supported dash types are:
* `dash`—A line that consists of dashes.
* `dashDot`—A line that consists of a repeating dash-dot pattern.
* `dot`—A line that consists of dots.
* `longDash`—A line that consists of a repeating long-dash pattern.
* `longDashDot`—A line that consists of a repeating long-dash-dot pattern.
* `longDashDotDot`—A line that consists of a repeating long-dash-dot-dot.
* `solid`—A solid line.
### shape-defaults-connector-defaults-stroke-width `Number`
Defines the thickness or width of the shape connectors stroke.
### shape-defaults-content-align `String`
The alignment of the text inside the shape.
The supported values are:
* (Vertical alignment) `top`, `middle`, and `bottom`.
* (Horizontal alignment) `right`, `center`, and `left`.
You can also combine the vertical and horizontal values—for example, `top right`, `middle left`, `bottom center`, and so on.
### shape-defaults-content-color `String`
The color of the shape content text.
### shape-defaults-content-font-family `String`
The font family of the shape content text.
### shape-defaults-content-font-size `Number`
The font size of the shape content text.
### shape-defaults-content-font-style `String`
The font style of the shape content text.
### shape-defaults-content-font-weight `String`
The font weight of the shape content text.
### shape-defaults-content-template `String | Function`
The template which renders the labels. The template supports the `dataItem` field which represents the data item if a field was specified.
### shape-defaults-content-text `String`
The text that is displayed in the shape.
## shape-defaults-editable `Boolean`
Defines the editable options of the shape.
### shape-defaults-editable-connect `Boolean`
Specifies if new connections can be added by using the shapes connectors.
### shape-defaults-editable-drag `Boolean`
Specifies if the shapes can be dragged.
### shape-defaults-editable-remove `Boolean`
Specifies if the shapes can be removed.
### shape-defaults-editable-tools `Array`
Specifies the tools of the toolbar. Supports all supported `toolbar.items` options.
The predefined tools are:
* `edit`—The selected item can be edited.
* `delete`—The selected items can be deleted.
* `rotateClockwise`—The selected items can be rotated clockwise. The default rotation value is 90 degrees.
* `rotateAnticlockwise`—The selected items can be rotated anticlockwise. The default rotation value is 90 degrees.
### shape-defaults-fill `String`
Defines the fill options of the shape. Use these settings to apply a single-color or a gradient background to all shapes in the Diagram.
### shape-defaults-fill-color `String`
Defines the fill color of the shape.
### shape-defaults-fill-opacity `Number`
Defines the fill opacity of the shape.
### shape-defaults-fill-gradient-type `String`
The type of the gradient. The supported values are: linear or radial.
### shape-defaults-fill-gradient-center `Array`
The center of the radial gradient. The coordinates are relative to the shape-bounding box—for example, `[0, 0]` is top left and `[1, 1]` is bottom right.
### shape-defaults-fill-gradient-radius `Number`
The radius of the radial gradient relative to the shape bounding box.
### shape-defaults-fill-gradient-start `Array`
The start point of the linear gradient. The coordinates are relative to the shape-bounding box—for example, `[0, 0]` is top left and `[1, 1]` is bottom right.
### shape-defaults-fill-gradient-end `Array`
The end point of the linear gradient. The coordinates are relative to the shape-bounding box—for example, `[0, 0]` is top left and `[1, 1]` is bottom right.
### shape-defaults-fill-gradient-stops `Array`
The array of gradient color stops.
### shape-defaults-height `Number`
Defines the default height of shapes in the Diagram.
### shape-defaults-hover-fill `String`
Defines the hover fill options.
### shape-defaults-hover-fill-color `String`
Defines the hover fill color.
### shape-defaults-hover-fill-opacity `Number`
Defines the hover fill opacity.
### shape-defaults-min-height `Number`
Defines the minimum height the shape can have. Used for applying a lower limit to the height of shapes when the user resizes them.
### shape-defaults-min-width `Number`
Defines the minimum width the shape can have. Used for applying a lower limit to the width of shapes when the user resizes them.
### shape-defaults-path `String`
The `path` option of a shape is a description of a custom geometry. The format follows the [standard SVG format](https://www.w3.org/TR/SVG/paths.html#PathData).
### shape-defaults-rotation-angle `Number`
The rotational angle of the shape.
### shape-defaults-selectable `Boolean`
Specifies if Diagram shapes can be selected.
### shape-defaults-source `String`
The path or URL to the shape image. Applicable when the type is set to `image`.
### shape-defaults-stroke-color `String`
The color of the shape stroke.
### shape-defaults-stroke-dash-type `String`
The dash type of the shape.
The supported dash types are:
* `dash`—A line that consists of dashes.
* `dashDot`—A line that consists of a repeating dash-dot pattern.
* `dot`—A line that consists of dots.
* `longDash`—A line that consists of a repeating long-dash pattern.
* `longDashDot`—A line that consists of a repeating long-dash-dot pattern.
* `longDashDotDot`—A line that consists of a repeating long-dash-dot-dot.
* `solid`—A solid line.
### shape-defaults-stroke-width `Number`
Defines the thickness or width of the shape stroke.
### shape-defaults-type `String`
Specifies the type of the shape by using any of the following built-in shape types:
* (Default) `rectangle`
* `circle`—A circle or an ellipse.
* `image`—An image.
* `text`—Some text.
### shape-defaults-visual `Function`
A function which returns a visual element that will be rendered for a given shape.
The supported primitives for constructing composite visuals are:
* `Circle`
* `Rectangle`
* `Path`
* `Line`
* `Polyline`
* `TextBlock`
* `Image`
* `Layout`
### shape-defaults-width `Number`
The default width of the shapes in the Diagram.
### shape-defaults-x `Number`
The x-coordinate of the shape when the shape is added to the Diagram.
### shape-defaults-y `Number`
The y-coordinate of the shape when the shape is added to the Diagram.
## Suggested Links
* [`ShapeDefaults` in Kendo UI Diagram for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/shapedefaults)