Skip to content

Commit 0e68647

Browse files
stockiNailstockiNail
authored
Add z option to all annotations (#738)
* Add z option to all annotations * changes name of item object in drawable elements array * apply review 1 * fixes cc 1 * fixes cc 2 * fallback to first impl
1 parent ed84a72 commit 0e68647

File tree

19 files changed

+260
-14
lines changed

19 files changed

+260
-14
lines changed

‎docs/guide/types/box.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ The following options are available for box annotations.
7575
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
7676
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
7777
| [`yScaleID`](#general) | `string` | Yes | `undefined`
78+
| [`z`](#general) | `number` | Yes | `0`
7879

7980
### General
8081

@@ -92,6 +93,7 @@ If one of the axes does not match an axis in the chart, the box will take the en
9293
| `yMax` | Bottom edge of the box in units along the y axis.
9394
| `yMin` | Top edge of the box in units along the y axis.
9495
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
96+
| `z` | The `z` property determines the drawing stack level of the box annotation element. All visible elements will be drawn in ascending order of `z` option, with the same `drawTime` option.
9597

9698
### Styling
9799

@@ -138,6 +140,7 @@ All of these options can be [Scriptable](../options#scriptable-options)
138140
| `width` | `number`\|`string` | `undefined` | Overrides the width of the image or canvas element. Could be set in pixel by a number, or in percentage of current width of image or canvas element by a string. If undefined, uses the width of the image or canvas element. It is used only when the content is an image or canvas element.
139141
| `xAdjust` | `number` | `0` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right.
140142
| `yAdjust` | `number` | `0` | Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down.
143+
| `z` | `number` | `0` | It determines the drawing stack level of the label element, with same `drawTime`.
141144

142145
### Position
143146

‎docs/guide/types/ellipse.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ The following options are available for ellipse annotations.
7171
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
7272
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
7373
| [`yScaleID`](#general) | `string` | Yes | `undefined`
74+
| [`z`](#general) | `number` | Yes | `0`
7475

7576
### General
7677

@@ -88,6 +89,7 @@ If one of the axes does not match an axis in the chart, the ellipse will take th
8889
| `yMax` | Bottom edge of the ellipse in units along the y axis.
8990
| `yMin` | Top edge of the ellipse in units along the y axis.
9091
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
92+
| `z` | The `z` property determines the drawing stack level of the ellipse annotation element. All visible elements will be drawn in ascending order of `z` option, with the same `drawTime` option.
9193

9294
### Styling
9395

‎docs/guide/types/label.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ The following options are available for label annotations.
9191
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
9292
| [`yScaleID`](#general) | `string` | Yes | `undefined`
9393
| [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
94+
| [`z`](#general) | `number` | Yes | `0`
9495

9596
### General
9697

@@ -119,6 +120,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
119120
| `yMin` | Top edge of the box in units along the y axis.
120121
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
121122
| `yValue` | Y coordinate of the point in units along the y axis.
123+
| `z` | The `z` property determines the drawing stack level of the label annotation element. All visible elements will be drawn in ascending order of `z` option, with the same `drawTime` option.
122124

123125
### Styling
124126

‎docs/guide/types/line.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ The following options are available for line annotations. All of these options c
7272
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
7373
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
7474
| [`yScaleID`](#positioning) | `string` | Yes | `undefined`
75+
| [`z`](#general) | `number` | Yes | `0`
7576

7677
### General
7778

@@ -89,6 +90,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the li
8990
| `adjustScaleRange` | Should the scale range be adjusted if this annotation is out of range.
9091
| `display` | Whether or not this annotation is visible.
9192
| `drawTime` | See [drawTime](../options#draw-time).
93+
| `z` | The `z` property determines the drawing stack level of the line annotation element. All visible elements will be drawn in ascending order of `z` option, with the same `drawTime` option.
9294

9395
### Positioning
9496

@@ -157,6 +159,7 @@ All of these options can be [Scriptable](../options#scriptable-options)
157159
| `width` | `number`\|`string` | `undefined` | Overrides the width of the image or canvas element. Could be set in pixel by a number, or in percentage of current width of image or canvas element by a string. If undefined, uses the width of the image or canvas element. It is used only when the content is an image or canvas element.
158160
| `xAdjust` | `number` | `0` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right.
159161
| `yAdjust` | `number` | `0` | Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down.
162+
| `z` | `number` | `0` | It determines the drawing stack level of the label element, with same `drawTime`.
160163

161164
### borderRadius
162165

‎docs/guide/types/point.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ The following options are available for point annotations.
7575
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
7676
| [`yScaleID`](#general) | `string` | Yes | `undefined`
7777
| [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
78+
| [`z`](#general) | `number` | Yes | `0`
7879

7980
### General
8081

@@ -99,6 +100,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
99100
| `yMin` | Top edge of the box in units along the y axis.
100101
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
101102
| `yValue` | Y coordinate of the point in units along the y axis.
103+
| `z` | The `z` property determines the drawing stack level of the point annotation element. All visible elements will be drawn in ascending order of `z` option, with the same `drawTime` option.
102104

103105
### Styling
104106

‎docs/guide/types/polygon.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ The following options are available for polygon annotations.
8080
| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
8181
| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
8282
| [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
83+
| [`z`](#general) | `number` | Yes | `0`
8384

8485
### General
8586

@@ -105,6 +106,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
105106
| `yMin` | Top edge of the box in units along the y axis.
106107
| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
107108
| `yValue` | Y coordinate of the polygon in units along the y axis.
109+
| `z` | The `z` property determines the drawing stack level of the polygon annotation element. All visible elements will be drawn in ascending order of `z` option, with the same `drawTime` option.
108110

109111
### Styling
110112

‎src/annotation.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -150,25 +150,31 @@ function draw(chart, caller, clip) {
150150
area = chartArea;
151151
}
152152

153-
drawElements(chart, visibleElements, caller, area);
153+
const drawableElements = getDrawableElements(visibleElements, caller, area).sort((a, b) => a.element.options.z - b.element.options.z);
154+
155+
for (const item of drawableElements) {
156+
item.element.draw(chart.ctx, item.area);
157+
}
154158

155159
if (clip) {
156160
unclipArea(ctx);
157161
}
158162
}
159163

160-
function drawElements(chart, elements, caller, area) {
164+
function getDrawableElements(elements, caller, area) {
165+
const drawableElements = [];
161166
for (const el of elements) {
162167
if (el.options.drawTime === caller) {
163-
el.draw(chart.ctx, area);
168+
drawableElements.push({element: el, area});
164169
}
165170
if (el.elements && el.elements.length) {
166171
const box = 'getBoundingBox' in el ? el.getBoundingBox() : area;
167172
for (const sub of el.elements) {
168173
if (sub.options.display && sub.options.drawTime === caller) {
169-
sub.draw(chart.ctx, box);
174+
drawableElements.push({element: sub, area: box});
170175
}
171176
}
172177
}
173178
}
179+
return drawableElements;
174180
}

‎src/types/box.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,10 @@ BoxAnnotation.defaults = {
8888
textAlign: 'start',
8989
textStrokeColor: undefined,
9090
textStrokeWidth: 0,
91+
width: undefined,
9192
xAdjust: 0,
9293
yAdjust: 0,
93-
width: undefined
94+
z: undefined
9495
},
9596
rotation: 0,
9697
shadowBlur: 0,
@@ -101,7 +102,8 @@ BoxAnnotation.defaults = {
101102
xScaleID: undefined,
102103
yMax: undefined,
103104
yMin: undefined,
104-
yScaleID: undefined
105+
yScaleID: undefined,
106+
z: 0
105107
};
106108

107109
BoxAnnotation.defaultRoutes = {

‎src/types/ellipse.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ EllipseAnnotation.defaults = {
6464
xScaleID: undefined,
6565
yMax: undefined,
6666
yMin: undefined,
67-
yScaleID: undefined
67+
yScaleID: undefined,
68+
z: 0
6869
};
6970

7071
EllipseAnnotation.defaultRoutes = {

‎src/types/label.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,8 @@ LabelAnnotation.defaults = {
110110
yMax: undefined,
111111
yMin: undefined,
112112
yScaleID: undefined,
113-
yValue: undefined
113+
yValue: undefined,
114+
z: 0
114115
};
115116

116117
LabelAnnotation.defaultRoutes = {

0 commit comments

Comments
 (0)