From 22344aa682c9ac9adc76eb796d28cd9d8cfb7faf Mon Sep 17 00:00:00 2001 From: stockiNail Date: Mon, 16 May 2022 16:02:57 +0200 Subject: [PATCH 1/6] Add z option to all annotations --- docs/guide/types/box.md | 3 + docs/guide/types/ellipse.md | 2 + docs/guide/types/label.md | 2 + docs/guide/types/line.md | 3 + docs/guide/types/point.md | 2 + docs/guide/types/polygon.md | 2 + src/annotation.js | 15 +++- src/types/box.js | 6 +- src/types/ellipse.js | 3 +- src/types/label.js | 3 +- src/types/line.js | 6 +- src/types/point.js | 3 +- src/types/polygon.js | 3 +- test/fixtures/box/zIndex.js | 120 +++++++++++++++++++++++++++++ test/fixtures/box/zIndex.png | Bin 0 -> 19964 bytes test/fixtures/line/labelZindex.js | 96 +++++++++++++++++++++++ test/fixtures/line/labelZindex.png | Bin 0 -> 17451 bytes types/label.d.ts | 3 +- types/options.d.ts | 3 +- 19 files changed, 261 insertions(+), 14 deletions(-) create mode 100644 test/fixtures/box/zIndex.js create mode 100644 test/fixtures/box/zIndex.png create mode 100644 test/fixtures/line/labelZindex.js create mode 100644 test/fixtures/line/labelZindex.png diff --git a/docs/guide/types/box.md b/docs/guide/types/box.md index 17ec716a3..b774941a2 100644 --- a/docs/guide/types/box.md +++ b/docs/guide/types/box.md @@ -75,6 +75,7 @@ The following options are available for box annotations. | [`yMin`](#general) | `number` \| `string` | Yes | `undefined` | [`yMax`](#general) | `number` \| `string` | Yes | `undefined` | [`yScaleID`](#general) | `string` | Yes | `undefined` +| [`z`](#general) | `number` | Yes | `0` ### General @@ -92,6 +93,7 @@ If one of the axes does not match an axis in the chart, the box will take the en | `yMax` | Bottom edge of the box in units along the y axis. | `yMin` | Top edge of the box in units along the y axis. | `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. +| `z` | The `z` property determines the drawing stack level of the box annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. ### Styling @@ -138,6 +140,7 @@ All of these options can be [Scriptable](../options#scriptable-options) | `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. | `xAdjust` | `number` | `0` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right. | `yAdjust` | `number` | `0` | Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down. +| `z` | `number` | `0` | It determines the drawing stack level of the label element, with same `drawTime`. ### Position diff --git a/docs/guide/types/ellipse.md b/docs/guide/types/ellipse.md index 71aa686ca..d14cf4cac 100644 --- a/docs/guide/types/ellipse.md +++ b/docs/guide/types/ellipse.md @@ -71,6 +71,7 @@ The following options are available for ellipse annotations. | [`yMax`](#general) | `number` \| `string` | Yes | `undefined` | [`yMin`](#general) | `number` \| `string` | Yes | `undefined` | [`yScaleID`](#general) | `string` | Yes | `undefined` +| [`z`](#general) | `number` | Yes | `0` ### General @@ -88,6 +89,7 @@ If one of the axes does not match an axis in the chart, the ellipse will take th | `yMax` | Bottom edge of the ellipse in units along the y axis. | `yMin` | Top edge of the ellipse in units along the y axis. | `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. +| `z` | The `z` property determines the drawing stack level of the ellipse annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. ### Styling diff --git a/docs/guide/types/label.md b/docs/guide/types/label.md index 19febdeb2..8f37c2e2e 100644 --- a/docs/guide/types/label.md +++ b/docs/guide/types/label.md @@ -91,6 +91,7 @@ The following options are available for label annotations. | [`yMin`](#general) | `number` \| `string` | Yes | `undefined` | [`yScaleID`](#general) | `string` | Yes | `undefined` | [`yValue`](#general) | `number` \| `string` | Yes | `undefined` +| [`z`](#general) | `number` | Yes | `0` ### General @@ -119,6 +120,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo | `yMin` | Top edge of the box in units along the y axis. | `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. | `yValue` | Y coordinate of the point in units along the y axis. +| `z` | The `z` property determines the drawing stack level of the label annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. ### Styling diff --git a/docs/guide/types/line.md b/docs/guide/types/line.md index 07037feeb..5e4db72b5 100644 --- a/docs/guide/types/line.md +++ b/docs/guide/types/line.md @@ -72,6 +72,7 @@ The following options are available for line annotations. All of these options c | [`yMax`](#general) | `number` \| `string` | Yes | `undefined` | [`yMin`](#general) | `number` \| `string` | Yes | `undefined` | [`yScaleID`](#positioning) | `string` | Yes | `undefined` +| [`z`](#general) | `number` | Yes | `0` ### General @@ -89,6 +90,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the li | `adjustScaleRange` | Should the scale range be adjusted if this annotation is out of range. | `display` | Whether or not this annotation is visible. | `drawTime` | See [drawTime](../options#draw-time). +| `z` | The `z` property determines the drawing stack level of the line annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. ### Positioning @@ -157,6 +159,7 @@ All of these options can be [Scriptable](../options#scriptable-options) | `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. | `xAdjust` | `number` | `0` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right. | `yAdjust` | `number` | `0` | Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down. +| `z` | `number` | `0` | It determines the drawing stack level of the label element, with same `drawTime`. ### borderRadius diff --git a/docs/guide/types/point.md b/docs/guide/types/point.md index faa852869..96f997de1 100644 --- a/docs/guide/types/point.md +++ b/docs/guide/types/point.md @@ -75,6 +75,7 @@ The following options are available for point annotations. | [`yMin`](#general) | `number` \| `string` | Yes | `undefined` | [`yScaleID`](#general) | `string` | Yes | `undefined` | [`yValue`](#general) | `number` \| `string` | Yes | `undefined` +| [`z`](#general) | `number` | Yes | `0` ### General @@ -99,6 +100,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo | `yMin` | Top edge of the box in units along the y axis. | `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. | `yValue` | Y coordinate of the point in units along the y axis. +| `z` | The `z` property determines the drawing stack level of the point annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. ### Styling diff --git a/docs/guide/types/polygon.md b/docs/guide/types/polygon.md index 435124478..2b1e24e9c 100644 --- a/docs/guide/types/polygon.md +++ b/docs/guide/types/polygon.md @@ -80,6 +80,7 @@ The following options are available for polygon annotations. | [`yMax`](#general) | `number` \| `string` | Yes | `undefined` | [`yMin`](#general) | `number` \| `string` | Yes | `undefined` | [`yValue`](#general) | `number` \| `string` | Yes | `undefined` +| [`z`](#general) | `number` | Yes | `0` ### General @@ -105,6 +106,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo | `yMin` | Top edge of the box in units along the y axis. | `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. | `yValue` | Y coordinate of the polygon in units along the y axis. +| `z` | The `z` property determines the drawing stack level of the polygon annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. ### Styling diff --git a/src/annotation.js b/src/annotation.js index db8e1eb60..919d628d2 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -150,25 +150,32 @@ function draw(chart, caller, clip) { area = chartArea; } - drawElements(chart, visibleElements, caller, area); + const drawableElements = drawElements(visibleElements, caller, area).sort((a, b) => a.element.options.z - b.element.options.z); + + for (const drawableItem of drawableElements) { + const {element, elArea} = drawableItem; + element.draw(chart.ctx, elArea); + } if (clip) { unclipArea(ctx); } } -function drawElements(chart, elements, caller, area) { +function drawElements(elements, caller, area) { + const drawableElements = []; for (const el of elements) { if (el.options.drawTime === caller) { - el.draw(chart.ctx, area); + drawableElements.push({element: el, elArea: area}); } if (el.elements && el.elements.length) { const box = 'getBoundingBox' in el ? el.getBoundingBox() : area; for (const sub of el.elements) { if (sub.options.display && sub.options.drawTime === caller) { - sub.draw(chart.ctx, box); + drawableElements.push({element: sub, elArea: box}); } } } } + return drawableElements; } diff --git a/src/types/box.js b/src/types/box.js index 6f3cbf104..32a726e74 100644 --- a/src/types/box.js +++ b/src/types/box.js @@ -88,9 +88,10 @@ BoxAnnotation.defaults = { textAlign: 'start', textStrokeColor: undefined, textStrokeWidth: 0, + width: undefined, xAdjust: 0, yAdjust: 0, - width: undefined + z: undefined }, rotation: 0, shadowBlur: 0, @@ -101,7 +102,8 @@ BoxAnnotation.defaults = { xScaleID: undefined, yMax: undefined, yMin: undefined, - yScaleID: undefined + yScaleID: undefined, + z: 0 }; BoxAnnotation.defaultRoutes = { diff --git a/src/types/ellipse.js b/src/types/ellipse.js index de6b01f40..e6a4783fb 100644 --- a/src/types/ellipse.js +++ b/src/types/ellipse.js @@ -64,7 +64,8 @@ EllipseAnnotation.defaults = { xScaleID: undefined, yMax: undefined, yMin: undefined, - yScaleID: undefined + yScaleID: undefined, + z: 0 }; EllipseAnnotation.defaultRoutes = { diff --git a/src/types/label.js b/src/types/label.js index e6074309f..1f45446a5 100644 --- a/src/types/label.js +++ b/src/types/label.js @@ -110,7 +110,8 @@ LabelAnnotation.defaults = { yMax: undefined, yMin: undefined, yScaleID: undefined, - yValue: undefined + yValue: undefined, + z: 0 }; LabelAnnotation.defaultRoutes = { diff --git a/src/types/line.js b/src/types/line.js index 78b871dca..78504d45f 100644 --- a/src/types/line.js +++ b/src/types/line.js @@ -173,7 +173,8 @@ LineAnnotation.defaults = { textStrokeWidth: 0, width: undefined, xAdjust: 0, - yAdjust: 0 + yAdjust: 0, + z: undefined }, scaleID: undefined, shadowBlur: 0, @@ -185,7 +186,8 @@ LineAnnotation.defaults = { xScaleID: undefined, yMax: undefined, yMin: undefined, - yScaleID: undefined + yScaleID: undefined, + z: 0 }; LineAnnotation.descriptors = { diff --git a/src/types/point.js b/src/types/point.js index 967df85b1..97c0dd039 100644 --- a/src/types/point.js +++ b/src/types/point.js @@ -69,7 +69,8 @@ PointAnnotation.defaults = { yMax: undefined, yMin: undefined, yScaleID: undefined, - yValue: undefined + yValue: undefined, + z: 0 }; PointAnnotation.defaultRoutes = { diff --git a/src/types/polygon.js b/src/types/polygon.js index e8f6ecd48..bcf08e92f 100644 --- a/src/types/polygon.js +++ b/src/types/polygon.js @@ -91,7 +91,8 @@ PolygonAnnotation.defaults = { yMax: undefined, yMin: undefined, yScaleID: undefined, - yValue: undefined + yValue: undefined, + z: 0 }; PolygonAnnotation.defaultRoutes = { diff --git a/test/fixtures/box/zIndex.js b/test/fixtures/box/zIndex.js new file mode 100644 index 000000000..9259c5e2d --- /dev/null +++ b/test/fixtures/box/zIndex.js @@ -0,0 +1,120 @@ +module.exports = { + config: { + type: 'scatter', + options: { + scales: { + x: { + display: false, + min: 0, + max: 10 + }, + y: { + display: false, + min: 0, + max: 25 + } + }, + plugins: { + annotation: { + annotations: { + box1: { + type: 'box', + xMin: 3, + xMax: 7, + yMin: 1, + yMax: 4, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgb(255, 99, 132)', + borderWidth: 1, + label: { + display: true, + content: 'box1 z:+10/z: 0', + z: 0 + }, + z: 10 + }, + box2: { + type: 'box', + xMin: 1.5, + xMax: 5.5, + yMin: 15, + yMax: 23.5, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132)', + borderWidth: 1, + label: { + display: true, + content: 'box2 fallback/z: +100', + z: 100 + } + }, + box3: { + type: 'box', + xMin: 2.5, + xMax: 7, + yMin: 16, + yMax: 21, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132)', + borderWidth: 1, + label: { + display: true, + content: 'box3 fallback/z: -1', + z: -1 + } + }, + box4: { + type: 'box', + xMin: 3, + xMax: 7, + yMin: 5, + yMax: 9, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132)', + borderWidth: 1, + label: { + display: true, + content: 'box4 fallback/fallback', + }, + }, + box5: { + type: 'box', + xMin: 1.5, + xMax: 5.5, + yMin: 10, + yMax: 14.5, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132)', + borderWidth: 1, + label: { + display: true, + content: 'box5 z: +100/z: 0', + position: 'start', + z: 0 + }, + z: 100 + }, + box6: { + type: 'box', + xMin: 2.5, + xMax: 4.5, + yMin: 11, + yMax: 13.5, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgba(255, 99, 132)', + borderWidth: 1, + label: { + display: true, + content: 'box6 z: 0/fallback', + }, + z: 0 + } + } + } + } + } + }, + options: { + spriteText: true + } +}; diff --git a/test/fixtures/box/zIndex.png b/test/fixtures/box/zIndex.png new file mode 100644 index 0000000000000000000000000000000000000000..0c093298406a9e761a68592e28c2bb47dfb3fd97 GIT binary patch literal 19964 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 NH6<;@0(tYm{{d>e<<|fJ literal 0 HcmV?d00001 diff --git a/test/fixtures/line/labelZindex.js b/test/fixtures/line/labelZindex.js new file mode 100644 index 000000000..abd47028f --- /dev/null +++ b/test/fixtures/line/labelZindex.js @@ -0,0 +1,96 @@ +module.exports = { + config: { + type: 'scatter', + data: { + datasets: [{ + backgroundColor: 'rgba(255,165,0,0.9)', + radius: 20, + data: [{x: 15, y: 25}, {x: 35, y: 50}, {x: 50, y: 95}, {x: 82, y: 75}, {x: 82, y: 5}] + }] + }, + options: { + scales: { + x: { + display: false, + min: 0, + max: 100 + }, + y: { + display: false, + min: 0, + max: 100 + } + }, + plugins: { + legend: false, + annotation: { + common: { + z: -10 + }, + annotations: { + left: { + type: 'line', + scaleID: 'y', + value: 25, + borderColor: 'black', + borderWidth: 5, + label: { + position: 'start', + backgroundColor: 'red', + content: 'left z: +10/undefined', + display: true + }, + z: 10 + }, + hCenter: { + type: 'line', + scaleID: 'y', + value: 50, + borderColor: 'black', + borderWidth: 5, + label: { + position: 'center', + backgroundColor: 'red', + content: 'hCenter z: -10/z: +10', + display: true, + z: 10 + }, + z: -10 + }, + right: { + type: 'line', + scaleID: 'y', + value: 75, + borderColor: 'black', + borderWidth: 5, + label: { + position: 'end', + backgroundColor: 'green', + content: 'right z: +10/z: -10', + display: true, + z: -10 + }, + z: 10 + }, + top: { + type: 'line', + scaleID: 'x', + value: 50, + borderColor: 'blue', + borderWidth: 5, + label: { + position: 'start', + backgroundColor: 'red', + content: 'top fallback/fallback', + display: true + } + }, + } + } + } + } + }, + options: { + spriteText: true + } +}; diff --git a/test/fixtures/line/labelZindex.png b/test/fixtures/line/labelZindex.png new file mode 100644 index 0000000000000000000000000000000000000000..738563f4f53f273decd4ac294ffe13963352945c GIT binary patch literal 17451 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 E7f=8eXaE2J literal 0 HcmV?d00001 diff --git a/types/label.d.ts b/types/label.d.ts index ce6e34cfc..0766bcbf5 100644 --- a/types/label.d.ts +++ b/types/label.d.ts @@ -46,6 +46,7 @@ export interface CoreLabelOptions { * or in percentage of current height of image by a string */ height?: Scriptable, + z?: Scriptable } export interface ContainedLabelOptions extends CoreLabelOptions { @@ -76,7 +77,7 @@ export interface ContainedLabelOptions extends CoreLabelOptions { * Border radius of the label rectangle * @default 6 */ - borderRadius?: Scriptable, + borderRadius?: Scriptable } export interface LabelOptions extends ContainedLabelOptions, ShadowOptions { diff --git a/types/options.d.ts b/types/options.d.ts index fe0b7b4a9..03cce72d1 100644 --- a/types/options.d.ts +++ b/types/options.d.ts @@ -39,7 +39,8 @@ export interface CoreAnnotationOptions extends AnnotationEvents, ShadowOptions { scaleID?: Scriptable, value?: Scriptable, xScaleID?: Scriptable, - yScaleID?: Scriptable + yScaleID?: Scriptable, + z?: Scriptable } export type Scriptable = T | ((ctx: TContext, options: AnnotationOptions) => T); From 05b446f119004f2698f33d6fe482c93158a2809f Mon Sep 17 00:00:00 2001 From: stockiNail Date: Mon, 16 May 2022 19:18:20 +0200 Subject: [PATCH 2/6] changes name of item object in drawable elements array --- src/annotation.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/annotation.js b/src/annotation.js index 919d628d2..b795f4237 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -152,9 +152,8 @@ function draw(chart, caller, clip) { const drawableElements = drawElements(visibleElements, caller, area).sort((a, b) => a.element.options.z - b.element.options.z); - for (const drawableItem of drawableElements) { - const {element, elArea} = drawableItem; - element.draw(chart.ctx, elArea); + for (const item of drawableElements) { + item.element.draw(chart.ctx, item.area); } if (clip) { @@ -166,13 +165,13 @@ function drawElements(elements, caller, area) { const drawableElements = []; for (const el of elements) { if (el.options.drawTime === caller) { - drawableElements.push({element: el, elArea: area}); + drawableElements.push({element: el, area}); } if (el.elements && el.elements.length) { const box = 'getBoundingBox' in el ? el.getBoundingBox() : area; for (const sub of el.elements) { if (sub.options.display && sub.options.drawTime === caller) { - drawableElements.push({element: sub, elArea: box}); + drawableElements.push({element: sub, area: box}); } } } From 0cac130337cef758a949ac9e5256b8373a61b232 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Tue, 17 May 2022 12:41:11 +0200 Subject: [PATCH 3/6] apply review 1 --- docs/guide/types/box.md | 2 +- docs/guide/types/ellipse.md | 2 +- docs/guide/types/label.md | 2 +- docs/guide/types/line.md | 2 +- docs/guide/types/point.md | 2 +- docs/guide/types/polygon.md | 2 +- src/annotation.js | 4 ++-- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/guide/types/box.md b/docs/guide/types/box.md index b774941a2..da753f0f9 100644 --- a/docs/guide/types/box.md +++ b/docs/guide/types/box.md @@ -93,7 +93,7 @@ If one of the axes does not match an axis in the chart, the box will take the en | `yMax` | Bottom edge of the box in units along the y axis. | `yMin` | Top edge of the box in units along the y axis. | `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. -| `z` | The `z` property determines the drawing stack level of the box annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. +| `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. ### Styling diff --git a/docs/guide/types/ellipse.md b/docs/guide/types/ellipse.md index d14cf4cac..b6e328539 100644 --- a/docs/guide/types/ellipse.md +++ b/docs/guide/types/ellipse.md @@ -89,7 +89,7 @@ If one of the axes does not match an axis in the chart, the ellipse will take th | `yMax` | Bottom edge of the ellipse in units along the y axis. | `yMin` | Top edge of the ellipse in units along the y axis. | `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. -| `z` | The `z` property determines the drawing stack level of the ellipse annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. +| `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. ### Styling diff --git a/docs/guide/types/label.md b/docs/guide/types/label.md index 8f37c2e2e..9ffb50890 100644 --- a/docs/guide/types/label.md +++ b/docs/guide/types/label.md @@ -120,7 +120,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo | `yMin` | Top edge of the box in units along the y axis. | `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. | `yValue` | Y coordinate of the point in units along the y axis. -| `z` | The `z` property determines the drawing stack level of the label annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. +| `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. ### Styling diff --git a/docs/guide/types/line.md b/docs/guide/types/line.md index 5e4db72b5..3af178c6f 100644 --- a/docs/guide/types/line.md +++ b/docs/guide/types/line.md @@ -90,7 +90,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the li | `adjustScaleRange` | Should the scale range be adjusted if this annotation is out of range. | `display` | Whether or not this annotation is visible. | `drawTime` | See [drawTime](../options#draw-time). -| `z` | The `z` property determines the drawing stack level of the line annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. +| `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. ### Positioning diff --git a/docs/guide/types/point.md b/docs/guide/types/point.md index 96f997de1..3519d1c35 100644 --- a/docs/guide/types/point.md +++ b/docs/guide/types/point.md @@ -100,7 +100,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo | `yMin` | Top edge of the box in units along the y axis. | `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. | `yValue` | Y coordinate of the point in units along the y axis. -| `z` | The `z` property determines the drawing stack level of the point annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. +| `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. ### Styling diff --git a/docs/guide/types/polygon.md b/docs/guide/types/polygon.md index 2b1e24e9c..027f7e477 100644 --- a/docs/guide/types/polygon.md +++ b/docs/guide/types/polygon.md @@ -106,7 +106,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo | `yMin` | Top edge of the box in units along the y axis. | `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. | `yValue` | Y coordinate of the polygon in units along the y axis. -| `z` | The `z` property determines the drawing stack level of the polygon annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option. +| `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. ### Styling diff --git a/src/annotation.js b/src/annotation.js index b795f4237..183fd6b96 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -150,7 +150,7 @@ function draw(chart, caller, clip) { area = chartArea; } - const drawableElements = drawElements(visibleElements, caller, area).sort((a, b) => a.element.options.z - b.element.options.z); + const drawableElements = getDrawableElements(visibleElements, caller, area).sort((a, b) => a.element.options.z - b.element.options.z); for (const item of drawableElements) { item.element.draw(chart.ctx, item.area); @@ -161,7 +161,7 @@ function draw(chart, caller, clip) { } } -function drawElements(elements, caller, area) { +function getDrawableElements(elements, caller, area) { const drawableElements = []; for (const el of elements) { if (el.options.drawTime === caller) { From 0581fc3fbd5d06eacd11ee302fbac5da6ead0bdb Mon Sep 17 00:00:00 2001 From: stockiNail Date: Tue, 17 May 2022 12:52:32 +0200 Subject: [PATCH 4/6] fixes cc 1 --- src/annotation.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/annotation.js b/src/annotation.js index 183fd6b96..e08cc7b2f 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -167,14 +167,18 @@ function getDrawableElements(elements, caller, area) { if (el.options.drawTime === caller) { drawableElements.push({element: el, area}); } - if (el.elements && el.elements.length) { - const box = 'getBoundingBox' in el ? el.getBoundingBox() : area; - for (const sub of el.elements) { - if (sub.options.display && sub.options.drawTime === caller) { - drawableElements.push({element: sub, area: box}); - } + loadDrawableSubElements(el, caller, area, drawableElements); + } + return drawableElements; +} + +function loadDrawableSubElements(el, caller, area, drawableElements) { + if (el.elements && el.elements.length) { + const box = 'getBoundingBox' in el ? el.getBoundingBox() : area; + for (const sub of el.elements) { + if (sub.options.display && sub.options.drawTime === caller) { + drawableElements.push({element: sub, area: box}); } } } - return drawableElements; } From f80d7d9efb63a5fc8448d720be71a6e79a0c85f1 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Tue, 17 May 2022 12:58:55 +0200 Subject: [PATCH 5/6] fixes cc 2 --- src/annotation.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/annotation.js b/src/annotation.js index e08cc7b2f..4c81f2e05 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -176,9 +176,13 @@ function loadDrawableSubElements(el, caller, area, drawableElements) { if (el.elements && el.elements.length) { const box = 'getBoundingBox' in el ? el.getBoundingBox() : area; for (const sub of el.elements) { - if (sub.options.display && sub.options.drawTime === caller) { - drawableElements.push({element: sub, area: box}); - } + loadDrawableSingleSubElement(sub, caller, box, drawableElements); } } } + +function loadDrawableSingleSubElement(el, caller, area, drawableElements) { + if (el.options.display && el.options.drawTime === caller) { + drawableElements.push({element: el, area}); + } +} From fb8026b4fe1b575a014b6966c0a3730e15a18a88 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Tue, 17 May 2022 13:02:51 +0200 Subject: [PATCH 6/6] fallback to first impl --- src/annotation.js | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/src/annotation.js b/src/annotation.js index 4c81f2e05..183fd6b96 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -167,22 +167,14 @@ function getDrawableElements(elements, caller, area) { if (el.options.drawTime === caller) { drawableElements.push({element: el, area}); } - loadDrawableSubElements(el, caller, area, drawableElements); - } - return drawableElements; -} - -function loadDrawableSubElements(el, caller, area, drawableElements) { - if (el.elements && el.elements.length) { - const box = 'getBoundingBox' in el ? el.getBoundingBox() : area; - for (const sub of el.elements) { - loadDrawableSingleSubElement(sub, caller, box, drawableElements); + if (el.elements && el.elements.length) { + const box = 'getBoundingBox' in el ? el.getBoundingBox() : area; + for (const sub of el.elements) { + if (sub.options.display && sub.options.drawTime === caller) { + drawableElements.push({element: sub, area: box}); + } + } } } -} - -function loadDrawableSingleSubElement(el, caller, area, drawableElements) { - if (el.options.display && el.options.drawTime === caller) { - drawableElements.push({element: el, area}); - } + return drawableElements; }