figureone 0.15.10 → 1.0.0

package/types/js/figure/FigureCollections/Rectangle.d.ts

@@ -0,0 +1,235 @@
+import { Point } from '../../tools/g2';
+import type { TypeParsableBuffer } from '../../tools/g2';
+import { FigureElementCollection, FigureElementPrimitive } from '../Element';
+import * as animation from '../Animation/Animation';
+import type { OBJ_CustomAnimationStep } from '../Animation/Animation';
+import type { OBJ_LineStyleSimple, OBJ_Texture, OBJ_Collection } from '../FigurePrimitives/FigurePrimitiveTypes';
+import type { TypeColor, OBJ_CurvedCorner } from '../../tools/types';
+import type { FigureElement } from '../Element';
+import type FigureCollections from './FigureCollections';
+import type CollectionsText from './Text';
+import type { OBJ_FormattedText } from './Text';
+/**
+ * Surround animation step.
+ *
+ * @property {FigureElement} [start] start element to surround (`this`)
+ * @property {FigureElement} [target] target element to surround (`this`)
+ * @property {TypeParsableBuffer} [space] space between rectangle and element (`0`)
+ * @extends OBJ_CustomAnimationStep
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_SurroundAnimationStep = {
+    start?: number;
+    target?: number;
+} & OBJ_CustomAnimationStep;
+/**
+ * Button colors when clicked.
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_ButtonColor = {
+    line?: TypeColor;
+    fill?: TypeColor;
+    label?: TypeColor;
+};
+/**
+ * {@link CollectionsRectangle} options object that extends {@link OBJ_Collection}
+ * options object (without `parent`).
+ *
+ * This rectangle is similar to {@link OBJ_Rectangle}, except it can accomodate
+ * both a fill and a border or line simultaneously with different colors.
+ *
+ * @extends OBJ_Collection
+ *
+ * @property {number} [width] rectangle width
+ * @property {number} [height] rectangle height
+ * @property {'left' | 'center' | 'right' | number} [xAlign] horiztonal
+ * alignment of the rectangle
+ * @property {'bottom' | 'middle' | 'top' | number} [yAlign] vertical alignment
+* of the rectangle
+ * @property {OBJ_LineStyleSimple} [line] lines style - leave empty if only
+ * want fill
+ * @property {TypeColor | OBJ_Texture} [fill] fill color or texture
+ * @property {OBJ_CurvedCorner} [corner] corner style of rectangle
+ * @property {OBJ_TextLines} [label] Rectangle label
+ * @property {boolean | TypeColor | OBJ_ButtonColor} [button] `true` to
+ * make the rectangle behave like a button when clicked. `TypeColor` to
+ * make fill, line and label the same color when clicked or `OBJ_ButtonColor`
+ * to specify click colors for each (`false`)
+ * @interface
+ * @group 2D Shape Collections
+ */
+export type COL_Rectangle = {
+    width?: number;
+    height?: number;
+    xAlign?: 'left' | 'center' | 'right' | number;
+    yAlign?: 'bottom' | 'middle' | 'top' | number;
+    line?: OBJ_LineStyleSimple;
+    fill?: TypeColor | OBJ_Texture;
+    corner?: OBJ_CurvedCorner;
+    label?: OBJ_FormattedText;
+    button?: boolean | TypeColor | OBJ_ButtonColor;
+} & OBJ_Collection;
+/**
+ * {@link FigureElementCollection} representing a rectangle.
+ *
+ * ![](./apiassets/advrectangle_ex1.png)
+ * ![](./apiassets/advrectangle_ex2.png)
+ *
+ * <p class="inline_gif"><img src="./apiassets/advrectangle.gif" class="inline_gif_image"></p>
+ *
+ * <p class="inline_gif"><img src="./apiassets/advrectangle_button.gif" class="inline_gif_image"></p>
+ *
+ * This object defines a rectangle
+ * {@link FigureElementCollection} that may include:
+ * - border (line)
+ * - fill
+ * - label
+ * - ability to surround another {@link FigureElement} with some space
+ * - button behavior when clicked
+ *
+ * Surrounding another element can be executed through either the
+ * <a href="#collectionsrectanglesurround">surround</a> method
+ * or the {@link OBJ_SurroundAnimationStep} found in the in
+ * the animation manager ({@link FigureElement}.animations),
+ * and in the animation builder
+ * (<a href="#animationmanagernew">animations.new</a>
+ * and <a href="#animationmanagerbuilder">animations.builder</a>).
+ *
+ * Button behavior means the button will temporarily change a different color
+ * when it is clicked. By default, the button will become a little more
+ * transparent, but colors for the fill, label and border can also be
+ * specified.
+ *
+ * @see
+ *
+ * See {@link COL_Rectangle} for setup options.
+ *
+ * See {@link OBJ_SurroundAnimationStep} for surround animation step options.
+ *
+ * To test examples below, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>.
+ *
+ * @example
+ * // Simple rectangle
+ * figure.add({
+ *   name: 'rect',
+ *   make: 'collections.rectangle',
+ *   width: 2,
+ *   height: 1,
+ * });
+ *
+ * @example
+ * // Round corner rectangle with fill and outside line
+ * const rect = figure.collections.rectangle({
+ *   width: 2,
+ *   height: 1,
+ *   line: {
+ *     width: 0.02,
+ *     widthIs: 'outside',
+ *     dash: [0.1, 0.02],
+ *   },
+ *   corner: {
+ *     radius: 0.2,
+ *     sides: 10,
+ *   },
+ *   fill: [0.7, 0.7, 1, 1],
+ * });
+ * figure.add('rect', rect);
+ *
+ * @example
+ * // Rectangle surrounds elements of an equation
+ * figure.add([
+ *   {
+ *     name: 'rect',
+ *     make: 'collections.rectangle',
+ *     color: [0.3, 0.3, 1, 1],
+ *     line: { width: 0.01 },
+ *   },
+ *   {
+ *     name: 'eqn',
+ *     make: 'equation',
+ *     forms: { 0: [{ frac: ['a', 'vinculum', 'b'] }, ' ', 'c'] },
+ *     position: [1, 0],
+ *     scale: 1.5,
+ *   }
+ * ]);
+ *
+ * const rect = figure.getElement('rect');
+ * const eqn = figure.getElement('eqn');
+ *
+ * rect.surround(eqn._a, 0.03);
+ * rect.animations.new()
+ *   .pulse({ delay: 1, scale: 1.5 })
+ *   .surround({ target: eqn._b, space: 0.03, duration: 1 })
+ *   .pulse({ delay: 1, scale: 1.5 })
+ *   .surround({ target: eqn._c, space: 0.03, duration: 1 })
+ *   .pulse({ delay: 1, scale: 1.5 })
+ *   .start();
+ *
+ * @example
+ * // Make a rectangle that behaves like a button
+ * figure.add([
+ *   {
+ *     name: 'rect',
+ *     make: 'collections.rectangle',
+ *     width: 0.5,
+ *     height: 0.3,
+ *     color: [0.3, 0.3, 0.3, 1],
+ *     label: 'Save',
+ *     corner: { radius: 0.05, sides: 10 },
+ *     fill: [0.9, 0.9, 0.9, 1],
+ *     button: {
+ *       fill: [0.95, 0.95, 0.95, 1],
+ *     },
+ *     mods: {
+ *       isTouchable: true,
+ *       onClick: () => console.log('clicked'),
+ *     },
+ *   },
+ * ]);
+ * @group 2D Shape Collections
+ */
+declare class CollectionsRectangle extends FigureElementCollection {
+    _line: FigureElementPrimitive | null;
+    _fill: FigureElementPrimitive | null;
+    _label: CollectionsText | null;
+    width: number;
+    height: number;
+    xAlign: 'left' | 'center' | 'right' | number;
+    yAlign: 'bottom' | 'middle' | 'top' | number;
+    corner: OBJ_CurvedCorner;
+    labelOffset: Point;
+    animations: {
+        surround: (...args: any[]) => animation.CustomAnimationStep;
+    } & animation.AnimationManager;
+    /**
+     * @hideconstructor
+     */
+    constructor(collections: FigureCollections, optionsIn: COL_Rectangle);
+    addButtonBehavior(onClickColors: {
+        line?: TypeColor;
+        fill?: TypeColor;
+        label?: TypeColor;
+    } | TypeColor | boolean): void;
+    addRect(rectOptions: OBJ_LineStyleSimple, name: string, fill: boolean): void;
+    setPositions(): void;
+    addlabel(textOptions: OBJ_FormattedText | string): void;
+    getSurround(element: FigureElement | Array<FigureElement>, space?: TypeParsableBuffer, isInLocalSpace?: boolean): (number | Point)[];
+    /**
+     * Surround element of elements with the rectangle.
+     */
+    surround(element: FigureElement | Array<FigureElement>, space?: TypeParsableBuffer, isInLocalSpace?: boolean): void;
+    setSurround(position: Point, width: number, height: number): void;
+    stateSet(): void;
+    /**
+     * Set button label.
+     */
+    setLabel(text: string | OBJ_FormattedText): void;
+    /**
+     * Get button label.
+     */
+    getLabel(): string;
+}
+export default CollectionsRectangle;

package/types/js/figure/FigureCollections/SlideNavigator.d.ts

@@ -0,0 +1,255 @@
+import { FigureElementCollection } from '../Element';
+import type { FigureElement } from '../Element';
+import type { OBJ_Arrow } from '../FigurePrimitives/FigurePrimitiveTypes2D';
+import type { OBJ_Collection } from '../FigurePrimitives/FigurePrimitiveTypes';
+import type FigureCollections from './FigureCollections';
+import SlideNavigator from '../SlideNavigator';
+import type { OBJ_SlideNavigatorSlide } from '../SlideNavigator';
+import type { COL_Rectangle } from './Rectangle';
+import type Figure from '../Figure';
+import type { Equation } from '../Equation/Equation';
+import type { OBJ_FormattedText } from './Text';
+/**
+ * CollectionsSlideNavigator Button.
+ * @property {'arrow' | 'rectangle'} type
+ * @extends COL_Rectangle
+ * @extends OBJ_Arrow
+ * @interface
+ * @group Misc SlideNavigator
+ */
+export type COL_SlideNavigatorButton = {
+    type: 'arrow' | 'rectangle';
+} & COL_Rectangle & OBJ_Arrow;
+/**
+ * CollectionsSlideNavigator equation animation defaults
+ * @interface
+ * @group Misc SlideNavigator
+ */
+export type COL_SlideNavigatorEqnDefaults = {
+    duration?: number;
+    animate?: 'move' | 'dissolve' | 'instant';
+};
+/**
+ * {@link CollectionsSlideNavigator} options object that extends
+ * {@link OBJ_Collection} options object (without `parent`).
+ *
+ * This rectangle is similar to {@link OBJ_Rectangle}, except it can accomodate
+ * both a fill and a border or line simultaneously with different colors.
+ *
+ * @extends OBJ_Collection
+ *
+ * @property {Figure | FigureElementCollection | string} [collection]
+ * collection to tie slide navigator to. By default will tie to its parent.
+ * @property {Array<OBJ_SlideNavigatorSlide>} [slides]
+ * @property {COL_SlideNavigatorButton | null} [prevButton] previous button
+ * options - use `null` to hide
+ * @property {COL_SlideNavigatorButton | null} [nextButton] next button options
+ * - use `null` to hide
+ * @property {OBJ_FormattedText | null} [text] text options - use `null` to hide
+ * @property {Equation | string | Array<string | Equation>} [equation] equation
+ * to tie to SlideNavigator
+ * @property {COL_SlideNavigatorEqnDefaults} [equationDefaults] default
+ * equation animation options
+ * @property {number} [disableOpacity] opacity for previous button when disabled (`0.7`)
+ * @interface
+ * @group Slide Navigator
+ */
+export type COL_SlideNavigator = {
+    collection?: Figure | FigureElementCollection | string;
+    slides?: Array<OBJ_SlideNavigatorSlide>;
+    prevButton?: COL_SlideNavigatorButton | null;
+    nextButton?: COL_SlideNavigatorButton | null;
+    text?: OBJ_FormattedText | null;
+    equation?: Equation | string | Array<string | Equation>;
+    equationDefaults?: COL_SlideNavigatorEqnDefaults;
+    disableOpacity?: number;
+} & OBJ_Collection;
+/**
+ * {@link FigureElementCollection} that creates elements to work with {@link SlideNavigator}.
+ *
+ * <p class="inline_gif"><img src="./apiassets/slidenavigator1.gif" class="inline_gif_image"></p>
+ *
+ * <p class="inline_gif"><img src="./apiassets/slidenavigator2.gif" class="inline_gif_image"></p>
+ *
+ * <p class="inline_gif"><img src="./apiassets/slidenavigator3.gif" class="inline_gif_image"></p>
+ *
+ * This object defines a rectangle
+ * {@link FigureElementCollection} that may include:
+ * - previous button
+ * - next button
+ * - {@link OBJ_TextLines} object
+ *
+ *
+ * @see
+ *
+ * See {@link SlideNavigator} for information about what a slide navigator is.
+ *
+ * To test examples below, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>.
+ *
+ *
+ * @example
+ * // At its simplest, the SlideNavigator can be used to navigate an equation
+ * figure.add([
+ *   {
+ *     name: 'eqn',
+ *     make: 'equation',
+ *     formDefaults: { alignment: { xAlign: 'center' } },
+ *     forms: {
+ *       0: ['a', '_ + ', 'b', '_ = ', 'c'],
+ *       1: ['a', '_ + ', 'b', '_ - b_1', '_ = ', 'c', '_ - ', 'b_2'],
+ *       2: ['a', '_ = ', 'c', '_ - ', 'b_2'],
+ *     },
+ *     formSeries: ['0', '1', '2'],
+ *   },
+ *   {
+ *     name: 'nav',
+ *     make: 'collections.slideNavigator',
+ *     equation: 'eqn',
+ *   },
+ * ]);
+ *
+ * @example
+ * // Text can be used to describe each slide
+ * figure.add([
+ *   {
+ *     name: 'eqn',
+ *     make: 'equation',
+ *     formDefaults: { alignment: { xAlign: 'center' } },
+ *     forms: {
+ *       0: ['a', '_ + ', 'b', '_ = ', 'c'],
+ *       1: ['a', '_ + ', 'b', '_ - b_1', '_ = ', 'c', '_ - ', 'b_2'],
+ *       2: ['a', '_ = ', 'c', '_ - ', 'b_2'],
+ *     },
+ *   },
+ *   {
+ *     name: 'nav',
+ *     make: 'collections.slideNavigator',
+ *     equation: 'eqn',
+ *     text: { position: [0, 0.3] },
+ *     slides: [
+ *       { text: 'Start with the equation', form: '0' },
+ *       { text: 'Subtract b from both sides' },
+ *       { form: '1' },
+ *       { text: 'The b terms cancel on the left hand side' },
+ *       { form: '2' },
+ *     ],
+ *   },
+ * ]);
+ *
+ * @example
+ * // This example creates a story by evolving a description, a diagram
+ * // and an equation.
+ * figure.add([
+ *   {   // Square drawing
+ *     name: 'square',
+ *     make: 'primitives.rectangle',
+ *     width: 0.4,
+ *     height: 0.4,
+ *     line: { width: 0.005 },
+ *   },
+ *   {   // Side length label
+ *     name: 'label',
+ *     make: 'text',
+ *     yAlign: 'middle',
+ *     position: [0.3, 0],
+ *     font: { size: 0.1 },
+ *   },
+ *   {   // Equation
+ *     name: 'eqn',
+ *     make: 'equation',
+ *     elements: {
+ *       eq1: '  =  ',
+ *       eq2: '  =  ',
+ *       eq3: '  =  ',
+ *     },
+ *     phrases: {
+ *       sideSqrd: { sup: ['side', '_2'] },
+ *       areaEqSide: [{ bottomComment: ['Area', 'square'] }, 'eq1', 'sideSqrd'],
+ *     },
+ *     formDefaults: { alignment: { xAlign: 'center' } },
+ *     forms: {
+ *       0: ['areaEqSide'],
+ *       1: ['areaEqSide', 'eq2', { sup: ['_1', '_2_1'] }, 'eq3', '_1_1'],
+ *       2: ['areaEqSide', 'eq2', { sup: ['_2_2', '_2_1'] }, 'eq3', '4'],
+ *     },
+ *     position: [0, -0.8],
+ *   },
+ *   {   // Slide Navigator
+ *     name: 'nav',
+ *     make: 'collections.slideNavigator',
+ *     equation: 'eqn',
+ *     nextButton: { type: 'arrow', position: [1.2, -0.8] },
+ *     prevButton: { type: 'arrow', position: [-1.2, -0.8] },
+ *     text: { position: [0, 0.7], font: { size: 0.12 } },
+ *   },
+ * ]);
+ *
+ * const square = figure.getElement('square');
+ * const label = figure.getElement('label');
+ *
+ * // Update the square size, and side label for any sideLength
+ * const update = (sideLength) => {
+ *   square.custom.updatePoints({ width: sideLength, height: sideLength });
+ *   label.setPosition(sideLength / 2 + 0.1, 0);
+ *   label.setText({ text: `${(sideLength / 0.4).toFixed(1)}` });
+ * };
+ *
+ * // Add slides to the navigator
+ * figure.getElement('nav').loadSlides([
+ *   {
+ *     showCommon: ['square', 'label', 'eqn'],
+ *     text: 'The area of a square is the side length squared',
+ *     form: '0',
+ *     steadyStateCommon: () => update(0.4),
+ *   },
+ *   { text: 'So for side length of 1 we have and area of 1' },
+ *   { form: '1' },
+ *   { form: null, text: 'What is the area for side length 2?' },
+ *   {
+ *     transition: (done) => {
+ *       square.animations.new()
+ *         .custom({
+ *           duration: 1,
+ *           callback: p => update(0.4 + p * 0.4),
+ *         })
+ *         .whenFinished(done)
+ *         .start();
+ *     },
+ *     steadyStateCommon: () => update(0.8),
+ *   },
+ *   { form: '2' },
+ * ]);
+ * @group Slide Navigator
+ */
+declare class CollectionsSlideNavigator extends FigureElementCollection {
+    _nextButton: FigureElement | null;
+    _prevButton: FigureElement | null;
+    _text: FigureElement | null;
+    nav: SlideNavigator;
+    /**
+     * @hideconstructor
+     */
+    constructor(collections: FigureCollections, optionsIn: COL_SlideNavigator);
+    /**
+     * Load slides into navigator
+     */
+    loadSlides(slides: Array<OBJ_SlideNavigatorSlide>): void;
+    /**
+     * Jump to a specific slide.
+     */
+    goToSlide(slideIndex: number): void;
+    /**
+     * Progress to the next slide.
+     */
+    nextSlide(ignoreTransition?: boolean): void;
+    /**
+     * Go to the previous slide.
+     */
+    prevSlide(): void;
+    addText(textOptions: OBJ_FormattedText | string): void;
+    addButton(options: COL_SlideNavigatorButton, type: 'Next' | 'Prev'): void;
+    getRectangleButton(options: COL_SlideNavigatorButton, type: 'Next' | 'Prev'): import("./Rectangle").default;
+    getArrowButton(options: COL_SlideNavigatorButton, type: 'Next' | 'Prev'): any;
+}
+export default CollectionsSlideNavigator;

package/types/js/figure/FigureCollections/Slider.d.ts

@@ -0,0 +1,155 @@
+import { FigureElementCollection, FigureElementPrimitive } from '../Element';
+import type { OBJ_Collection } from '../FigurePrimitives/FigurePrimitiveTypes';
+import type { TypeColor } from '../../tools/types';
+import type FigureCollections from './FigureCollections';
+/**
+ * Border of circle or bar of slider.
+ *
+ * @property {width} [number] border width
+ * @property {color} [TypeColor] border color
+ * @see {@link OBJ_Slider}
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_SliderBorder = {
+    width?: number;
+    color?: TypeColor;
+};
+/**
+ * Slider marker options.
+ *
+ * @property {'polygon' | 'rectangle'} [style]
+ * @property {number} [width] width of 'rectangle'
+ * @see {@link OBJ_Slider}
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_SliderMarker = {
+    width?: number;
+    style?: 'polygon' | 'rectangle';
+};
+/**
+ * {@link CollectionsSlider} options object that extends {@link OBJ_Collection}
+ * options object (without `parent`).
+ *
+ * @property {number} [width] slider width
+ * @property {number} [height] slider height
+ * @property {number} [barHeight] height of slider bar bar
+ * @property {number} [sides] number of sides in curves (`20`)
+ * @property {OBJ_SliderMarker | 'polygon' | 'rectangle' | 'none'} [marker] marker style
+ * (`'polygon'`)
+ * @property {'dark' | 'light'} [theme] selects default colors for a light or
+ * dark switch (`dark`)
+ * @property {TypeColor} [colorOff] slider off color (bar color from slider
+ * value to 1)
+ * @property {TypeColor} [colorOn] slider on color (bar color from 0 to slider
+ * value (`[0, 1, 0, 1]`)
+ * @property {OBJ_SliderBorder} [markerBorder] border around circle (defaults to on
+ * where width is half the figure's default line width)
+ * @property {OBJ_SliderBorder} [barBorder] border around bar
+ * (defaults to off - width = 0)
+ * @extends OBJ_Collection
+ * @interface
+ * @group 2D Shape Collections
+ */
+export type COL_Slider = {
+    width?: number;
+    height?: number;
+    barHeight?: number;
+    marker?: OBJ_SliderMarker | 'polygon' | 'rectangle' | 'none';
+    sides?: number;
+    theme?: 'dark' | 'light';
+    colorOff?: TypeColor;
+    colorOn?: TypeColor;
+    markerBorder?: OBJ_SliderBorder;
+    barBorder?: OBJ_SliderBorder;
+} & OBJ_Collection;
+/**
+ * {@link FigureElementCollection} representing a slider control.
+ *
+ * ![](./apiassets/slider.png)
+ *
+ * ![](./apiassets/slider.gif)
+ *
+ * Notifications - The notification manager property `notifications` will
+ * publish the following events:
+ * - `changed`: slider value is changed - slider position in percent is passed
+ *   as parameter to callback.
+ *
+ * See {@link COL_Slider} for setup options.
+ *
+ * To test examples below, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple slider with notification causing a console statement
+ * const slider = figure.add({
+ *   make: 'collections.slider',
+ *   barHeight: 0.02,
+ *   height: 0.1,
+ *   width: 1,
+ *   color: [0.5, 0.5, 0.5, 1],
+ *   touchBorder: 0.2,
+ * });
+ *
+ * slider.notifications.add('changed', (position) => {
+ *   console.log(position)
+ * });
+ *
+ * @example
+ * // Slider without a marker and red fill for on
+ * figure.add({
+ *   make: 'collections.slider',
+ *   barHeight: 0.1,
+ *   colorOn: [1, 0, 0, 1],
+ *   width: 1,
+ *   touchBorder: 0.2,
+ *   marker: 'none',
+ * });
+ *
+ * @example
+ * // Slider with rectangle marker and multi-colors
+ * const slider = figure.add({
+ *   make: 'collections.slider',
+ *   barHeight: 0.02,
+ *   height: 0.1,
+ *   width: 1,
+ *   marker: 'rectangle',
+ *   colorOff: [1, 0, 0, 1],
+ *   colorOn: [0, 0.8, 0, 1],
+ *   color: [0, 0, 0, 1],
+ * });
+ * @group 2D Shape Collections
+ */
+declare class CollectionsSlider extends FigureElementCollection {
+    _marker: FigureElementPrimitive;
+    _bar: FigureElementPrimitive;
+    _barOn: FigureElementPrimitive;
+    _markerBorder: FigureElementPrimitive | null;
+    _barBorder: FigureElementPrimitive | null;
+    width: number;
+    height: number;
+    markerWidth: number;
+    colorOn: TypeColor;
+    colorOff: TypeColor;
+    barHeight: number;
+    /**
+     * @hideconstructor
+     */
+    constructor(collections: FigureCollections, optionsIn: COL_Slider);
+    /**
+     * Set slider to value between 0 and 1.
+     * @param {number} percentage between 0 and 1
+     * @param {boolean} notify `true` to send notifications on change, `false` to
+     * supress (`true`)
+     */
+    setValue(percentage: number, notify?: boolean): void;
+    /**
+     * Get slider value.
+     * @return {number} between 0 and 1
+     */
+    getValue(): number;
+    setElementsToCircle(): void;
+    notify(): void;
+}
+export default CollectionsSlider;