@devexperts/dxcharts-lite 2.0.2 → 2.2.0

package/README.md

@@ -23,7 +23,7 @@
     <img src="https://img.shields.io/static/v1?label=PRs&message=Welcome&color=blue" alt="PRs: Welcome" />
   </a>&nbsp;
   <a href="https://devexperts.com/dxcharts-demo/?lang=en">
-    <img src="https://img.shields.io/static/v1?label=Latest%20version&message=2.0.2&color=blue" alt="Version" />
+    <img src="https://img.shields.io/static/v1?label=Latest%20version&message=2.2.0&color=blue" alt="Version" />
   </a>
 </p>
 

package/dist/chart/__tests__/chart.test.d.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+import './env';

package/dist/chart/__tests__/chart.test.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import './env';
+import { createChart } from '../../index';
+import { generateCandlesDataTS } from '../utils/candles-generator-ts.utils';
+describe('chart', () => {
+    const candles = generateCandlesDataTS({ quantity: 50 });
+    it.each([
+        ['zero -> non-zero candles', [[], candles]],
+        ['prepend candles', [candles.slice(10), candles.slice(0, 10)]],
+        ['prepend with a gap', [candles.slice(0, 10), candles.slice(20, 30)]],
+        ['prepend with overlap', [candles.slice(10), candles.slice(0, 20)]],
+        ['prepend with full overlap', [candles.slice(10), candles]],
+        ['only update existing candles', [candles, candles.slice(10, 20)]],
+        ['update all candles', [candles, candles]],
+        ['append candles', [candles.slice(0, 10), candles.slice(10)]],
+        ['append candles with a gap', [candles.slice(0, 10), candles.slice(20)]],
+        ['append candles with overlap', [candles.slice(0, 20), candles.slice(10)]],
+        ['append candles with full overlap', [candles.slice(0, 20), candles]],
+        ['prepend and append', [candles.slice(10, 20), candles.slice(0, 30)]],
+        [
+            "fill in the gap (won't work but should not error)",
+            [candles.slice(0, 10), candles.slice(11, 20), candles.slice(10, 11)],
+        ],
+    ])('should update candles in various scenarios: %s', (scenario, updates) => __awaiter(void 0, void 0, void 0, function* () {
+        const div = document.createElement('div');
+        const chart = createChart(div);
+        updates.forEach((update, i) => {
+            if (i === 0) {
+                chart.setData({ candles: update });
+            }
+            else {
+                chart.updateData({ candles: update });
+            }
+        });
+        // wait for async tasks to complete successfully
+        yield new Promise(done => setTimeout(done, 100));
+    }));
+});

package/dist/chart/__tests__/env.d.ts

@@ -0,0 +1,5 @@
+/*
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */

package/dist/chart/__tests__/env.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+"use strict";
+/* @see https://jestjs.io/docs/29.4/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom */
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});
+Object.defineProperty(window, 'ResizeObserver', {
+    writable: true,
+    value: jest.fn().mockImplementation(() => ({
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+        disconnect: jest.fn(),
+    })),
+});

package/dist/chart/bootstrap.js

@@ -179,7 +179,7 @@ export default class ChartBootstrap {
         this.chartComponents.push(mainChartGridComponent);
         this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, formatterFactory);
         this.chartComponents.push(this.hoverProducer);
-        this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer);
+        this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer, this.backgroundCanvasModel);
         this.chartComponents.push(this.crossToolComponent);
         // Snapshot component
         const snapshotCanvasModel = createCanvasModel(eventBus, elements.snapshotCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
@@ -203,7 +203,7 @@ export default class ChartBootstrap {
         this.drawingManager.addDrawer(yAxisCompositeDrawer, 'Y_AXIS');
         const yAxisDrawer = new YAxisDrawer(this.config, yAxisLabelsCanvasModel, this.paneManager);
         yAxisCompositeDrawer.addDrawer(yAxisDrawer);
-        const yAxisLabelsDrawer = new YAxisPriceLabelsDrawer(yAxisLabelsCanvasModel, this.backgroundCanvasModel, this.canvasBoundsContainer, this.config.colors.yAxis, this.paneManager);
+        const yAxisLabelsDrawer = new YAxisPriceLabelsDrawer(yAxisLabelsCanvasModel, this.backgroundCanvasModel, this.canvasBoundsContainer, this.config, this.paneManager);
         yAxisCompositeDrawer.addDrawer(yAxisLabelsDrawer);
     }
     // TODO remove chartModel dependency, put period to global config somewhere

package/dist/chart/chart.config.d.ts

@@ -106,7 +106,6 @@ export interface FullChartColors {
     };
     yAxis: {
         backgroundColor: string;
-        backgroundHoverColor: string;
         zeroPercentLine: string;
         labelTextColor: string;
         labelInvertedTextColor: string;
@@ -246,6 +245,10 @@ export interface ChartScale {
      * Adjust x viewport when y-axis width is changed, so x zoom remains the same
      */
     keepZoomXOnYAxisChange: boolean;
+    /**
+     * Disable all scale process animations
+     */
+    disableAnimations: boolean;
 }
 export interface AutoScaleDisableOnDrag {
     enabled: boolean;

package/dist/chart/chart.config.js

@@ -43,6 +43,7 @@ export const getDefaultConfig = () => ({
         inverse: false,
         zoomSensitivity: 0.25,
         defaultViewportItems: 100,
+        disableAnimations: false
     },
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     components: {
@@ -455,7 +456,6 @@ export const getDefaultConfig = () => ({
         ],
         yAxis: {
             backgroundColor: 'transparent',
-            backgroundHoverColor: 'rgba(20,20,19,1)',
             labelBoxColor: 'rgba(20,20,19,1)',
             labelTextColor: 'rgba(128,128,128,1)',
             labelInvertedTextColor: 'rgba(20,20,19,1)',

package/dist/chart/components/chart/chart-base.model.d.ts

@@ -13,7 +13,7 @@ type DataPoint<T extends BaseType> = T extends 'candle' ? Candle : DataSeriesPoi
 type VisualPoint<T extends BaseType> = T extends 'candle' ? VisualCandle : VisualSeriesPoint;
 export interface PrependedCandlesData {
     prependedCandlesWidth: number;
-    preparedCandles: Candle[];
+    prependedCandles: Candle[];
 }
 /**
  * This model is an abstraction which describes manipulations tied to the main data series.

package/dist/chart/components/chart/chart.component.js

@@ -87,12 +87,22 @@ export class ChartComponent extends ChartBaseElement {
     doActivate() {
         super.doActivate();
         // TODO hack, main data series is created before doActivate, so we need to add it manually
-        this.dynamicObjects.model.addObject({ model: this.chartModel.mainCandleSeries, drawer: this.dataSeriesDrawer }, this.chartModel.mainCandleSeries.extentComponent.paneUUID);
+        this.dynamicObjects.model.addObject({
+            id: this.chartModel.mainCandleSeries.id,
+            paneId: this.chartModel.mainCandleSeries.extentComponent.paneUUID,
+            model: this.chartModel.mainCandleSeries,
+            drawer: this.dataSeriesDrawer,
+        });
         this.addRxSubscription(this.paneManager.dataSeriesAddedSubject.subscribe(series => {
-            this.dynamicObjects.model.addObject({ model: series, drawer: this.dataSeriesDrawer }, series.extentComponent.paneUUID);
+            this.dynamicObjects.model.addObject({
+                id: series.id,
+                paneId: series.extentComponent.paneUUID,
+                model: series,
+                drawer: this.dataSeriesDrawer,
+            });
         }));
         this.addRxSubscription(this.paneManager.dataSeriesRemovedSubject.subscribe(series => {
-            this.dynamicObjects.model.removeObject(series, series.extentComponent.paneUUID);
+            this.dynamicObjects.model.removeObject(series.id);
         }));
     }
     /**

package/dist/chart/components/chart/chart.model.d.ts

@@ -440,8 +440,8 @@ export declare class ChartModel extends ChartBaseElement {
     removeCandleByIdx(idx: number, instrumentSymbol?: string): void;
 }
 export interface UpdateCandlesResult {
-    prepended: number;
-    appended?: number;
+    prepended: Candle[];
+    appended?: Candle[];
     candles: Candle[];
 }
 export type TimeFrameRange = [number, number];

package/dist/chart/components/chart/chart.model.js

@@ -24,6 +24,7 @@ import { deleteCandlesIndex, prepareCandle, reindexCandles } from './candle.func
 import { ChartInstrument } from './chart.component';
 import { fakeCandle } from './fake-candles';
 import { SecondaryChartColorsPool } from './secondary-chart-colors-pool';
+import { uuid } from '../../utils/uuid.utils';
 export class ChartModel extends ChartBaseElement {
     get mainCandleSeries() {
         return this.candleSeries[0];
@@ -62,7 +63,7 @@ export class ChartModel extends ChartBaseElement {
         };
         this.chartTypeChanged.next(this.config.components.chart.type);
         this.secondaryChartColors = new SecondaryChartColorsPool(this.config);
-        const candleSeries = new MainCandleSeriesModel(this.chartBaseModel, this.paneManager.panes[CHART_UUID].mainExtent, this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, new ChartInstrument(), this.candlesTransformersByChartType, this.candleWidthByChartType, Object.assign({}, this.config.colors));
+        const candleSeries = new MainCandleSeriesModel(this.chartBaseModel, this.paneManager.panes[CHART_UUID].mainExtent, uuid(), this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, new ChartInstrument(), this.candlesTransformersByChartType, this.candleWidthByChartType, Object.assign({}, this.config.colors));
         candleSeries.config.type = this.config.components.chart.type;
         this.candleSeries.push(candleSeries);
         scale.addXConstraint((_, state) => candleEdgesConstrait(state, this.mainCandleSeries.visualPoints, this.config.components.chart.minCandlesOffset, scale.getBounds()));
@@ -302,12 +303,12 @@ export class ChartModel extends ChartBaseElement {
         });
         // caclulate offset width for prepanded candles
         const prependedCandlesWidth = this.chartBaseModel.mainVisualPoints
-            .slice(0, updateResult.prepended)
+            .slice(0, updateResult.prepended.length)
             .reduce((acc, cur) => acc + cur.width, 0);
         this.scale.moveXStart(this.scale.xStart + prependedCandlesWidth);
         this.candlesPrependSubject.next({
             prependedCandlesWidth,
-            preparedCandles,
+            prependedCandles: updateResult.prepended,
         });
         this.chartBaseModel.recalculatePeriod();
         this.candlesUpdatedSubject.next();
@@ -346,7 +347,7 @@ export class ChartModel extends ChartBaseElement {
      * @returns {CandleSeriesModel} - The newly created CandleSeriesModel object.
      */
     createCandleSeriesModel(instrument, colors) {
-        const candleSeries = new CandleSeriesModel(this.paneManager.panes[CHART_UUID].mainExtent, this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, instrument, this.candlesTransformersByChartType, this.candleWidthByChartType, colors);
+        const candleSeries = new CandleSeriesModel(this.paneManager.panes[CHART_UUID].mainExtent, uuid(), this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, instrument, this.candlesTransformersByChartType, this.candleWidthByChartType, colors);
         candleSeries.config.type = 'line';
         this.candleSeries.push(candleSeries);
         return candleSeries;
@@ -798,6 +799,7 @@ export class ChartModel extends ChartBaseElement {
             });
             if (lastCandle) {
                 series.updateCurrentPrice(lastCandle.close);
+                this.paneManager.yExtents.forEach(ext => ext.yAxis.updateOrderedLabels(true));
             }
             if (isInView && lastCandle && candles.length === 1) {
                 // can apply some optimization
@@ -890,7 +892,7 @@ export class ChartModel extends ChartBaseElement {
             }
         });
         return {
-            prepended: prepend.length,
+            prepended: prepend,
             candles: [...prepend, ...targetCopy],
         };
     }
@@ -972,8 +974,8 @@ const updateCandles = (target, update) => {
         }
     });
     return {
-        prepended: prepend.length,
-        appended: append.length,
+        prepended: prepend,
+        appended: append,
         candles: [...prepend, ...targetCopy, ...append],
     };
 };

package/dist/chart/components/cross_tool/cross-tool.component.d.ts

@@ -23,9 +23,10 @@ export declare class CrossToolComponent extends ChartBaseElement {
     private canvasBoundsContainer;
     private drawingManager;
     private paneManager;
+    private backgroundCanvasModel;
     readonly model: CrossToolModel;
     private readonly crossToolTypeDrawers;
-    constructor(config: FullChartConfig, crossToolCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, paneManager: PaneManager, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent);
+    constructor(config: FullChartConfig, crossToolCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, paneManager: PaneManager, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent, backgroundCanvasModel: CanvasModel);
     /**
      * Registers default drawer types for the chart.
      * @private

package/dist/chart/components/cross_tool/cross-tool.component.js

@@ -14,13 +14,14 @@ import { NoneDrawerType } from './types/none.drawer';
  * Default bundled chart cross tool.
  */
 export class CrossToolComponent extends ChartBaseElement {
-    constructor(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, crossEventProducer, hoverProducer) {
+    constructor(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, crossEventProducer, hoverProducer, backgroundCanvasModel) {
         super();
         this.config = config;
         this.crossToolCanvasModel = crossToolCanvasModel;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.drawingManager = drawingManager;
         this.paneManager = paneManager;
+        this.backgroundCanvasModel = backgroundCanvasModel;
         this.crossToolTypeDrawers = {};
         this.model = new CrossToolModel(config.components.crossTool, this.crossToolCanvasModel, crossEventProducer, hoverProducer);
         this.addChildEntity(this.model);
@@ -41,8 +42,8 @@ export class CrossToolComponent extends ChartBaseElement {
      * @returns {void}
      */
     registerDefaultDrawerTypes() {
-        this.registerCrossToolTypeDrawer('cross-and-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, () => true));
-        this.registerCrossToolTypeDrawer('just-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, () => true, true));
+        this.registerCrossToolTypeDrawer('cross-and-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, this.backgroundCanvasModel, () => true));
+        this.registerCrossToolTypeDrawer('just-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, this.backgroundCanvasModel, () => true, true));
         this.registerCrossToolTypeDrawer('none', new NoneDrawerType());
     }
     //#region public methods

package/dist/chart/components/cross_tool/cross-tool.model.js

@@ -107,6 +107,7 @@ export class CrossToolModel extends ChartBaseElement {
         else {
             this.currentHover.y = hover.y;
         }
+        this.currentHover.paneId = CHART_UUID;
         this.currentHoverSubject.next(this.currentHover);
     }
 }

package/dist/chart/components/cross_tool/types/cross-and-labels.drawer.d.ts

@@ -5,6 +5,7 @@
  */
 import { CanvasBoundsContainer } from '../../../canvas/canvas-bounds-container';
 import { FullChartConfig } from '../../../chart.config';
+import { CanvasModel } from '../../../model/canvas.model';
 import { PaneManager } from '../../pane/pane-manager.component';
 import { CrossToolTypeDrawer } from '../cross-tool.drawer';
 import { CrossToolHover } from '../cross-tool.model';
@@ -12,9 +13,10 @@ export declare class CrossAndLabelsDrawerType implements CrossToolTypeDrawer {
     private config;
     private canvasBoundsContainer;
     private paneManager;
+    private backgroundCanvasModel;
     private crossDrawPredicate;
     private noLines?;
-    constructor(config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, crossDrawPredicate?: () => boolean, noLines?: boolean | undefined);
+    constructor(config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, backgroundCanvasModel: CanvasModel, crossDrawPredicate?: () => boolean, noLines?: boolean | undefined);
     /**
      * Draws a cross tool on a canvas context and its labels if the crossDrawPredicate is true.
      * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.

package/dist/chart/components/cross_tool/types/cross-and-labels.drawer.js

@@ -7,10 +7,11 @@ import { CanvasElement } from '../../../canvas/canvas-bounds-container';
 import { avoidAntialiasing, drawRoundedRect } from '../../../utils/canvas/canvas-drawing-functions.utils';
 import { priceLabelDrawersMap } from '../../y_axis/price_labels/price-label.drawer';
 export class CrossAndLabelsDrawerType {
-    constructor(config, canvasBoundsContainer, paneManager, crossDrawPredicate = () => true, noLines) {
+    constructor(config, canvasBoundsContainer, paneManager, backgroundCanvasModel, crossDrawPredicate = () => true, noLines) {
         this.config = config;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.paneManager = paneManager;
+        this.backgroundCanvasModel = backgroundCanvasModel;
         this.crossDrawPredicate = crossDrawPredicate;
         this.noLines = noLines;
     }
@@ -135,7 +136,7 @@ export class CrossAndLabelsDrawerType {
                     paddingBottom: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.bottom,
                     paddingEnd: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.end,
                     paddingTop: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.top,
-                }, extent.yAxis.state, this.config.colors.yAxis, true);
+                }, extent.yAxis.state, this.config.colors.yAxis, true, this.backgroundCanvasModel.ctx);
             }
         }
     }

package/dist/chart/components/dynamic-objects/dynamic-objects.component.js

@@ -10,7 +10,7 @@ export class DynamicObjectsComponent extends ChartBaseElement {
     constructor(canvasModel, drawingManager) {
         super();
         // model
-        const dynamicObjectsModel = new DynamicObjectsModel();
+        const dynamicObjectsModel = new DynamicObjectsModel(canvasModel);
         this.model = dynamicObjectsModel;
         this.addChildEntity(dynamicObjectsModel);
         // drawer

package/dist/chart/components/dynamic-objects/dynamic-objects.model.d.ts

@@ -4,53 +4,73 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { ChartBaseElement } from '../../model/chart-base-element';
-import { LinkedList, ListNode } from '../../utils/linkedList.utils';
+import { LinkedList } from '../../utils/linkedList.utils';
 import { DynamicModelDrawer } from './dynamic-objects.drawer';
+import { CanvasModel } from '../../model/canvas.model';
 export type PaneId = string;
+export type DynamicObjectId = string | number;
 export interface DynamicObject<T = unknown> {
+    readonly id: DynamicObjectId;
     readonly drawer: DynamicModelDrawer<T>;
-    readonly model: T;
+    readonly paneId: PaneId;
+    readonly model?: T;
 }
 export declare class DynamicObjectsModel extends ChartBaseElement {
+    private canvasModel;
     private _objects;
-    private modelToObjectMap;
-    constructor();
+    private modelIdToObjectMap;
+    constructor(canvasModel: CanvasModel);
+    /**
+     * @returns the `DynamicObject` itself and pane `LinkedList` where the object is stored.
+     *
+     */
+    private getObjectInfoById;
+    /**
+     * @returns `DynamicObject` position in associated pane `LinkedList`
+     * @returns `-1` if an object was not found
+     *
+     */
+    getObjectPosition(id: DynamicObjectId): number;
     /**
      * Adds an object from outside chart-core into model
      * @param obj
      * @param paneId
      */
-    addObject(obj: DynamicObject, paneId: PaneId): void;
+    addObject(obj: DynamicObject): void;
     /**
      * Removes an object from model
      * @param model
      * @param paneId
      */
-    removeObject(model: unknown, paneId: PaneId): void;
+    removeObject(id: DynamicObjectId): void;
+    /**
+     * Moves the object inside the associated LinkedList to the specified position
+     */
+    moveToPosition(id: DynamicObjectId, position: number): void;
     /**
      * Moves the object inside the drawing order so it's being drawn before the other elements
      * @param paneId
      * @param listNode
      */
-    bringToFront(paneId: PaneId, listNode: ListNode<DynamicObject>): void;
+    bringToFront(id: DynamicObjectId): void;
     /**
      * Moves the object inside the drawing order so it's being drawn after the other elements
      * @param paneId
      * @param listNode
      */
-    bringToBack(paneId: PaneId, listNode: ListNode<DynamicObject>): void;
+    bringToBack(id: DynamicObjectId): void;
     /**
      * Moves the object inside the drawing order so it's being drawn one layer ahead
      * @param obj
      * @param paneId
      */
-    moveForward(paneId: PaneId, listNode: ListNode<DynamicObject>): void;
+    moveForward(id: DynamicObjectId): void;
     /**
      * Moves the object inside the drawing order so it's being drawn one layer closer to the back
      * @param obj
      * @param paneId
      */
-    moveBackwards(paneId: PaneId, listNode: ListNode<DynamicObject>): void;
+    moveBackwards(id: DynamicObjectId): void;
     /**
      * Getter for the objects
      */