-
Notifications
You must be signed in to change notification settings - Fork 80
Expand file tree
/
Copy pathImageCropper.xml
More file actions
219 lines (219 loc) · 14.2 KB
/
Copy pathImageCropper.xml
File metadata and controls
219 lines (219 loc) · 14.2 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<?xml version="1.0" encoding="utf-8" ?>
<widget id="com.mendix.widget.web.imagecropper.ImageCropper" pluginWidget="true" needsEntityContext="true" offlineCapable="false" supportedPlatform="Web" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
<name>Image Cropper</name>
<description>Crop an image attribute</description>
<studioProCategory>Images, videos & files</studioProCategory>
<studioCategory>Images, Videos & Files</studioCategory>
<helpUrl>https://docs.mendix.com/appstore/widgets/image-cropper</helpUrl>
<properties>
<propertyGroup caption="General">
<propertyGroup caption="Source">
<property key="image" type="image" required="true" allowUpload="true">
<caption>Image attribute</caption>
<description>The image to crop. The cropped result is saved back to it.</description>
</property>
</propertyGroup>
<propertyGroup caption="Crop area">
<property key="cropShape" type="enumeration" defaultValue="rect" required="true">
<caption>Crop shape</caption>
<description>Shape of the crop. Circle masks the corners.</description>
<enumerationValues>
<enumerationValue key="rect">Rectangle</enumerationValue>
<enumerationValue key="circle">Circle</enumerationValue>
</enumerationValues>
</property>
<property key="aspectRatio" type="enumeration" defaultValue="free" required="true">
<caption>Aspect ratio</caption>
<description>Locks the crop proportions. Free lets the user resize freely.</description>
<enumerationValues>
<enumerationValue key="free">Free</enumerationValue>
<enumerationValue key="square">1:1</enumerationValue>
<enumerationValue key="landscape16x9">16:9</enumerationValue>
<enumerationValue key="landscape4x3">4:3</enumerationValue>
<enumerationValue key="portrait3x4">3:4</enumerationValue>
<enumerationValue key="custom">Custom</enumerationValue>
</enumerationValues>
</property>
<property key="customAspectWidth" type="expression" defaultValue="1" required="true">
<caption>Custom aspect width</caption>
<description>Width side of the ratio (e.g. 3 in 3:2). Used when Aspect ratio is Custom. Can be bound to an attribute or expression.</description>
<returnType type="Integer" />
</property>
<property key="customAspectHeight" type="expression" defaultValue="1" required="true">
<caption>Custom aspect height</caption>
<description>Height side of the ratio (e.g. 2 in 3:2). Used when Aspect ratio is Custom. Can be bound to an attribute or expression.</description>
<returnType type="Integer" />
</property>
</propertyGroup>
<propertyGroup caption="Events">
<property key="onCropAction" type="action" required="false">
<caption>On crop</caption>
<description>Runs each time the crop is auto-applied to the image attribute.</description>
</property>
</propertyGroup>
</propertyGroup>
<propertyGroup caption="Dimensions">
<propertyGroup caption="Canvas">
<property key="boundaryWidth" type="integer" defaultValue="800" required="true">
<caption>Canvas max width (px)</caption>
<description>Maximum on-screen width of the crop area. The image scales down to fit; the canvas wraps the rendered image, so smaller crops produce a smaller canvas with no blank gaps. Does not change the saved image size.</description>
</property>
<property key="boundaryHeight" type="integer" defaultValue="800" required="true">
<caption>Canvas max height (px)</caption>
<description>Maximum on-screen height of the crop area. The image scales down to fit; the canvas wraps the rendered image, so smaller crops produce a smaller canvas with no blank gaps. Does not change the saved image size.</description>
</property>
</propertyGroup>
</propertyGroup>
<propertyGroup caption="Behavior">
<propertyGroup caption="Interaction">
<property key="resizableEnabled" type="boolean" defaultValue="true" required="true">
<caption>Resizable handles</caption>
<description>Let the user resize the selection by dragging its corners.</description>
</property>
</propertyGroup>
<propertyGroup caption="Buttons">
<property key="enableRotation" type="boolean" defaultValue="true" required="true">
<caption>Enable rotation</caption>
<description>Show rotate-left / rotate-right buttons. The rotation is baked into the saved image.</description>
</property>
<property key="enableGrayscale" type="boolean" defaultValue="false" required="true">
<caption>Enable grayscale</caption>
<description>Show a grayscale toggle. When on, the saved image is converted to grayscale (black and white).</description>
</property>
<property key="showResetButton" type="boolean" defaultValue="true" required="true">
<caption>Enable reset</caption>
<description>Show a Reset button that restores the original image and clears zoom, rotation, and crop.</description>
</property>
</propertyGroup>
<propertyGroup caption="Zoom">
<property key="zoomEnabled" type="boolean" defaultValue="true" required="true">
<caption>Enable zoom</caption>
<description>Master switch for zooming. When off, the slider and mouse-wheel zoom are disabled and the image stays at 1×.</description>
</property>
<property key="showZoomSlider" type="boolean" defaultValue="true" required="true">
<caption>Show zoom slider</caption>
<description>Show the zoom slider below the crop area. Turn off to keep mouse-wheel zoom while hiding the slider.</description>
</property>
<property key="wheelZoomMode" type="enumeration" defaultValue="onWithCtrl" required="true">
<caption>Mouse wheel zoom</caption>
<description>Whether the mouse wheel zooms the image. "On (hold Ctrl)" keeps page scroll working.</description>
<enumerationValues>
<enumerationValue key="off">Off</enumerationValue>
<enumerationValue key="on">On</enumerationValue>
<enumerationValue key="onWithCtrl">On (hold Ctrl)</enumerationValue>
</enumerationValues>
</property>
<property key="minZoom" type="decimal" defaultValue="1" required="true">
<caption>Minimum zoom</caption>
<description>Smallest zoom level. 1 = image fits the canvas. Below 1 lets the user zoom out further.</description>
</property>
<property key="maxZoom" type="decimal" defaultValue="4" required="true">
<caption>Maximum zoom</caption>
<description>Largest zoom level. 4 means up to 4× the canvas size. Must be greater than Minimum zoom.</description>
</property>
</propertyGroup>
</propertyGroup>
<propertyGroup caption="Accessibility">
<propertyGroup caption="Toolbar captions">
<property key="grayscaleCaption" type="textTemplate" required="false">
<caption>Grayscale caption</caption>
<description>Visible text and tooltip for the grayscale toggle.</description>
<translations>
<translation lang="en_US">Grayscale</translation>
<translation lang="nl_NL">Grijstinten</translation>
</translations>
</property>
<property key="resetCaption" type="textTemplate" required="false">
<caption>Reset caption</caption>
<description>Visible text and tooltip for the reset button.</description>
<translations>
<translation lang="en_US">Reset</translation>
<translation lang="nl_NL">Herstellen</translation>
</translations>
</property>
<property key="zoomCaption" type="textTemplate" required="false">
<caption>Zoom caption</caption>
<description>Visible label for the zoom slider.</description>
<translations>
<translation lang="en_US">Zoom</translation>
<translation lang="nl_NL">Zoomen</translation>
</translations>
</property>
<property key="noImageCaption" type="textTemplate" required="false">
<caption>No image message</caption>
<description>Shown when no image is bound to the image attribute.</description>
<translations>
<translation lang="en_US">No uploaded image to crop</translation>
<translation lang="nl_NL">Geen geüploade afbeelding om bij te snijden</translation>
</translations>
</property>
</propertyGroup>
<propertyGroup caption="Aria labels">
<property key="rotateLeftLabel" type="textTemplate" required="false">
<caption>Rotate left</caption>
<description>Accessible name and tooltip for the rotate-left button.</description>
<translations>
<translation lang="en_US">Rotate left</translation>
<translation lang="nl_NL">Naar links draaien</translation>
</translations>
</property>
<property key="rotateRightLabel" type="textTemplate" required="false">
<caption>Rotate right</caption>
<description>Accessible name and tooltip for the rotate-right button.</description>
<translations>
<translation lang="en_US">Rotate right</translation>
<translation lang="nl_NL">Naar rechts draaien</translation>
</translations>
</property>
<property key="grayscaleAriaLabel" type="textTemplate" required="false">
<caption>Grayscale</caption>
<description>Accessible name for the grayscale toggle (announced by screen readers).</description>
<translations>
<translation lang="en_US">Grayscale</translation>
<translation lang="nl_NL">Grijstinten</translation>
</translations>
</property>
<property key="resetAriaLabel" type="textTemplate" required="false">
<caption>Reset</caption>
<description>Accessible name for the reset button (announced by screen readers).</description>
<translations>
<translation lang="en_US">Reset crop</translation>
<translation lang="nl_NL">Uitsnede herstellen</translation>
</translations>
</property>
<property key="zoomAriaLabel" type="textTemplate" required="false">
<caption>Zoom</caption>
<description>Accessible name for the zoom slider (announced by screen readers).</description>
<translations>
<translation lang="en_US">Zoom</translation>
<translation lang="nl_NL">Zoomen</translation>
</translations>
</property>
</propertyGroup>
</propertyGroup>
<propertyGroup caption="Output">
<propertyGroup caption="Output">
<property key="outputFormat" type="enumeration" defaultValue="png" required="true">
<caption>Output format</caption>
<description>File format. PNG keeps transparency; JPEG produces smaller files.</description>
<enumerationValues>
<enumerationValue key="png">PNG</enumerationValue>
<enumerationValue key="jpeg">JPEG</enumerationValue>
</enumerationValues>
</property>
<property key="outputQuality" type="decimal" defaultValue="0.92" required="true">
<caption>JPEG quality (0.0 - 1.0)</caption>
<description>JPEG compression. Higher = sharper and larger. Ignored for PNG.</description>
</property>
<property key="outputSize" type="enumeration" defaultValue="original" required="true">
<caption>Output size</caption>
<description>Resolution of the saved crop. Original is sharpest; Viewport matches the on-screen canvas size.</description>
<enumerationValues>
<enumerationValue key="viewport">Viewport (canvas dimensions)</enumerationValue>
<enumerationValue key="original">Original (source resolution)</enumerationValue>
</enumerationValues>
</property>
</propertyGroup>
</propertyGroup>
</properties>
</widget>