UNPKG

@progress/kendo-diagram-vue-wrapper

Version:

Kendo UI Diagram wrapper for Vue.js

github.com/telerik/kendo-vue-wrappers/tree/master

telerik/kendo-vue-wrappers

155 lines (89 loc) • 4.86 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
--- title: editableProps API description: "API Index | editableProps" api_reference: true slug: api_diagram_editableprops --- # EditableProps ### editable-connection-template `String | Function` Specifies the connection editor template which shows up when the connection is in the process of editing. To change the default editors for the connection fields or to prevent some fields from being edited by not rendering an editor input for them, you can use a template. ### editable-drag `Boolean` Specifies if the shapes and connections can be dragged. ### editable-drag-snap `Boolean` Specifies the `drag-snap` options of the shape. By default, during dragging, the shapes move by a given number of pixels at once. You can disable this behavior to make the movement of the shapes smooth or you can specify a different number for the `drag-snap` size to simulate a snap-to-grid functionality. ### editable-drag-snap-size `Number` Specifies the `drag-snap` size of the shape. ### editable-remove `Boolean` Specifies if the shapes and connections can be removed. ### editable-resize `Boolean` Defines the look and feel of the shape resizing handles. ### editable-resize-handles-fill `String` Specifies the fill settings of the resizing handles. ### editable-resize-handles-fill-color `String` Specifies the fill color of the resizing handles. ### editable-resize-handles-fill-opacity `Number` Specifies the fill opacity of the resizing handles. ### editable-resize-handles-height `Number` Specifies the height of the resizing handles. ### editable-resize-handles-hover-fill `String` Specifies the fill settings on hovering over the resizing handles. ### editable-resize-handles-hover-fill-color `String` Specifies the fill color on hovering over the resizing handles. ### editable-resize-handles-hover-fill-opacity `Number` Specifies the fill opacity on hovering over the resizing handles. ### editable-resize-handles-hover-stroke-color `String` Specifies the stroke color on hovering over the resizing handles. ### editable-resize-handles-hover-stroke-dash-type `String` Specifies the stroke dash type on hovering over the resizing handles. 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. ### editable-resize-handles-hover-stroke-width `Number` Specifies the stroke color on hovering over the resizing handles. ### editable-resize-handles-stroke-color `String` Specifies the stroke color of the resizing handles. ### editable-resize-handles-stroke-dash-type `String` Specifies the stroke dash type of the resizing handles. 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. ### editable-resize-handles-stroke-width `Number` Specifies the stroke thickness of the resizing handles. ### editable-resize-handles-width `Number` Specifies the width of the resizing handles. ### editable-rotate `Boolean` Specifies whether the shapes can be rotated. Changing `editable-rotate` after you create the Diagram will be ignored. ### editable-rotate-fill-color `String` Specifies the fill color of the rotation thumb. ### editable-rotate-fill-opacity `Number` Specifies the fill opacity of the rotation thumb. ### editable-rotate-stroke-color `String` Specifies the stroke color of the rotation thumb. ### editable-rotate-stroke-width `Number` Specifies the stroke thickness of the rotation thumb. ### editable-shape-template `String | Function` Specifies the shape editor template. You can use `editable-shape-template` to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item. ### editable-tools-tool-name `String` The name of the tool. The built-in tools are: * `edit` * `createShape` * `createConnection` * `undo` * `redo` * `rotateClockwise` * `rotateAnticlockwise` ### editable-tools-tool-step `Number` The step of the `rotateClockwise` and `rotateAnticlockwise` tools. ## Suggested Links * [`Editable` in Kendo UI Diagram for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/editable)