diff --git a/CHANGELOG.md b/CHANGELOG.md index 0415c548..6e9e92bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,9 @@ ## [Unreleased] +### Added +- Added Pybricks logo when no files open. + ### Changed - Firmware restore for hubs with USB is now done in-app ([pybricks-code#1104]). diff --git a/package.json b/package.json index 6ac3a25a..879ead97 100644 --- a/package.json +++ b/package.json @@ -113,6 +113,7 @@ "style-loader": "^3.3.1", "tailwindcss": "^3.2.4", "terser-webpack-plugin": "^5.3.6", + "two.js": "^0.8.10", "typed-redux-saga": "^1.5.0", "typescript": "~4.9.3", "usehooks-ts": "^2.9.1", diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx index ef228688..cf4c3174 100644 --- a/src/editor/Editor.tsx +++ b/src/editor/Editor.tsx @@ -16,6 +16,7 @@ import { Text, } from '@blueprintjs/core'; import { ContextMenu2, ResizeSensor2 } from '@blueprintjs/popover2'; +import classNames from 'classnames'; import * as monaco from 'monaco-editor'; import tomorrowNightEightiesTheme from 'monaco-themes/themes/Tomorrow-Night-Eighties.json'; import xcodeTheme from 'monaco-themes/themes/Xcode_default.json'; @@ -29,6 +30,7 @@ import { compile } from '../mpy/actions'; import { useSelector } from '../reducers'; import { useSettingIsShowDocsEnabled } from '../settings/hooks'; import { isMacOS } from '../utils/os'; +import Welcome from './Welcome'; import { editorActivateFile, editorCloseFile } from './actions'; import { useI18n } from './i18n'; import * as pybricksMicroPython from './pybricksMicroPython'; @@ -465,12 +467,14 @@ const Editor: React.VFC = () => { }; }); + const isEmpty = useSelector((s) => s.editor.openFileUuids.length === 0); + return (
editor?.focus()} /> editor?.layout()}> { content={() => } popoverProps={popoverProps} > +
diff --git a/src/editor/Welcome.tsx b/src/editor/Welcome.tsx new file mode 100644 index 00000000..5adcdcbb --- /dev/null +++ b/src/editor/Welcome.tsx @@ -0,0 +1,166 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2022 The Pybricks Authors + +// welcome screen that is shown when no editor is open. + +import { Colors } from '@blueprintjs/core'; +import React, { useEffect, useRef } from 'react'; +import Two from 'two.js'; +import { useTernaryDarkMode } from 'usehooks-ts'; +import logoSvg from './logo.svg'; + +const defaultRotation = -Math.PI / 9; // radians +const rotationSpeedIncrement = 0.1; // radians per second + +type State = { + rotation: number; + rotationSpeed: number; +}; + +enum ActionType { + Stop, + ChangeSpeed, + Update, +} + +type Action = + | { + type: ActionType.Stop; + } + | { + type: ActionType.ChangeSpeed; + amount: number; + } + | { + type: ActionType.Update; + timeDelta: number; + }; + +function reduce(state: State, action: Action): State { + switch (action.type) { + case ActionType.Stop: + return { ...state, rotation: defaultRotation, rotationSpeed: 0 }; + case ActionType.ChangeSpeed: + return { ...state, rotationSpeed: state.rotationSpeed + action.amount }; + case ActionType.Update: + return { + ...state, + rotation: state.rotation + state.rotationSpeed * action.timeDelta, + }; + default: + return state; + } +} + +function getFillColor(isDarkMode: boolean): string { + return isDarkMode ? Colors.GRAY1 : Colors.GRAY5; +} + +type WelcomeProps = { + isVisible: boolean; +}; + +const Welcome: React.VoidFunctionComponent = ({ isVisible }) => { + const stateRef = useRef({ + rotation: defaultRotation, + rotationSpeed: 0, + }); + const elementRef = useRef(null); + const { isDarkMode } = useTernaryDarkMode(); + const fillColorRef = useRef(''); + // HACK: we don't want to image to flash when switching dark mode + fillColorRef.current = getFillColor(isDarkMode); + + useEffect(() => { + if (process.env.NODE_ENV === 'test') { + // jsdom doesn't support ResizeObserver. don't really need to test animation anyway. + return; + } + + if (!isVisible) { + return; + } + + // istanbul ignore if: should not happen + if (!elementRef.current) { + console.error('elementRef was null!'); + return; + } + + const two = new Two({ fitted: true }).appendTo(elementRef.current); + + const logo = two.load(logoSvg, (g) => { + g.center(); + two.add(logo); + two.play(); + }); + + two.addEventListener('update', (_count, time: number) => { + stateRef.current = reduce(stateRef.current, { + type: ActionType.Update, + timeDelta: time / 1000, + }); + + logo.fill = fillColorRef.current; + logo.scale = Math.min(two.width, two.height) / 80; + logo.rotation = stateRef.current.rotation; + + two.scene.position.x = two.width / 2; + two.scene.position.y = two.height / 2; + }); + + const observer = new ResizeObserver(() => { + two.fit(); + }); + + observer.observe(elementRef.current); + + const handleClick = (e: Event) => { + e.stopPropagation(); + e.preventDefault(); + + stateRef.current = reduce(stateRef.current, { + type: ActionType.Stop, + }); + }; + + two.renderer.domElement.addEventListener('pointerdown', handleClick, { + capture: true, + }); + + const handleWheel = (e: Event) => { + const we = e as WheelEvent; + + stateRef.current = reduce(stateRef.current, { + type: ActionType.ChangeSpeed, + amount: rotationSpeedIncrement * Math.sign(-we.deltaY), + }); + }; + + two.renderer.domElement.addEventListener('wheel', handleWheel, { + passive: true, + }); + + return () => { + two.renderer.domElement.removeEventListener('wheel', handleWheel); + two.renderer.domElement.removeEventListener('pointerdown', handleClick); + observer.disconnect(); + two.removeEventListener('update'); + elementRef.current?.removeChild(two.renderer.domElement); + two.clear(); + }; + }, [isVisible]); + + return ( +
{ + e.stopPropagation(); + e.preventDefault(); + }} + /> + ); +}; + +export default Welcome; diff --git a/src/editor/editor.scss b/src/editor/editor.scss index aa0b2761..f0f0c88e 100644 --- a/src/editor/editor.scss +++ b/src/editor/editor.scss @@ -63,9 +63,23 @@ flex: 1 1 auto; } + &-welcome { + display: none; + + .pb-editor-tabpanel.pb-empty > & { + display: block; + width: 100%; + height: 100%; + } + } + &-monaco { width: 100%; height: 100%; + + .pb-editor-tabpanel.pb-empty > & { + display: none; + } } &-placeholder { diff --git a/src/editor/logo.svg b/src/editor/logo.svg new file mode 100644 index 00000000..90372dfc --- /dev/null +++ b/src/editor/logo.svg @@ -0,0 +1 @@ + diff --git a/src/two-override.d.ts b/src/two-override.d.ts new file mode 100644 index 00000000..de11e732 --- /dev/null +++ b/src/two-override.d.ts @@ -0,0 +1,4708 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2022 The Pybricks Authors + +/* eslint-disable @typescript-eslint/no-explicit-any */ + +declare module 'two.js/src/utils/path-commands' { + export namespace Commands { + const move: string; + const line: string; + const curve: string; + const arc: string; + const close: string; + } +} +declare module 'two.js/src/utils/root' { + export let root: any; +} +declare module 'two.js/src/utils/math' { + /** + * @name Two.Utils.decomposeMatrix + * @function + * @param {Matrix} matrix - The matrix to decompose. + * @returns {Object} An object containing relevant skew values. + * @description Decompose a 2D 3x3 Matrix to find the skew. + */ + export function decomposeMatrix(matrix: Matrix): any; + export function decomposeMatrix( + a: number, + b: number, + c: number, + d: number, + e: number, + f: number, + ): any; + /** + * @name Two.Utils.getComputedMatrix + * @function + * @param {Shape} object - The Two.js object that has a matrix property to calculate from. + * @param {Matrix} [matrix] - The matrix to apply calculated transformations to if available. + * @returns {Matrix} The computed matrix of a nested object. If no `matrix` was passed in arguments then a `new Two.Matrix` is returned. + * @description Method to get the world space transformation of a given object in a Two.js scene. + */ + export function getComputedMatrix(object: Shape, matrix?: Matrix): Matrix; + export function getPoT(value: any): number; + export function setMatrix(matrix: any): void; + /** + * @name Two.Utils.lerp + * @function + * @param {Number} a - Start value. + * @param {Number} b - End value. + * @param {Number} t - Zero-to-one value describing percentage between a and b. + * @returns {Number} + * @description Linear interpolation between two values `a` and `b` by an amount `t`. + */ + export function lerp(a: number, b: number, t: number): number; + /** + * @name Two.Utils.mod + * @function + * @param {Number} v - The value to modulo + * @param {Number} l - The value to modulo by + * @returns {Number} + * @description Modulo with added functionality to handle negative values in a positive manner. + */ + export function mod(v: number, l: number): number; + export const NumArray: any; + /** + * @name Two.Utils.toFixed + * @function + * @param {Number} v - Any float + * @returns {Number} That float trimmed to the third decimal place. + * @description A pretty fast toFixed(3) alternative. + * @see {@link http://jsperf.com/parsefloat-tofixed-vs-math-round/18} + */ + export function toFixed(v: number): number; + export const TWO_PI: number; + export const HALF_PI: number; + import { Matrix } from 'two.js/src/matrix'; + import { Shape } from 'two.js/src/shape'; +} +declare module 'two.js/src/events' { + /** + * @name Two.Events + * @class + * @description Object inherited by many Two.js objects in order to facilitate custom events. + */ + export class Events { + /** + * @name Two.Events.Types + * @property {Object} - Object of different types of Two.js specific events. + */ + static Types: { + play: string; + pause: string; + update: string; + render: string; + resize: string; + change: string; + remove: string; + insert: string; + order: string; + load: string; + }; + static Methods: string[]; + _events: any; + _bound: boolean; + /** + * @name Two.Events#addEventListener + * @function + * @param {String} [name] - The name of the event to bind a function to. + * @param {Function} [handler] - The function to be invoked when the event is dispatched. + * @description Call to add a listener to a specific event name. + */ + public addEventListener( + name: keyof typeof Events.Types, + handler: (...args: any[]) => any, + ): Events; + /** + * @name Two.Events#on + * @function + * @description Alias for {@link Two.Events#addEventListener}. + */ + public on( + name: keyof typeof Events.Types, + handler: (...args: any[]) => any, + ): any; + /** + * @name Two.Events#bind + * @function + * @description Alias for {@link Two.Events#addEventListener}. + */ + public bind( + name: keyof typeof Events.Types, + handler: (...args: any[]) => any, + ): any; + /** + * @name Two.Events#removeEventListener + * @function + * @param {String} [name] - The name of the event intended to be removed. + * @param {Function} [handler] - The handler intended to be removed. + * @description Call to remove listeners from a specific event. If only `name` is passed then all the handlers attached to that `name` will be removed. If no arguments are passed then all handlers for every event on the object are removed. + */ + public removeEventListener( + name?: keyof typeof Events.Types, + handler?: (...args: any[]) => any, + ): Events; + /** + * @name Two.Events#off + * @function + * @description Alias for {@link Two.Events#removeEventListener}. + */ + public off( + name?: keyof typeof Events.Types, + handler?: (...args: any[]) => any, + ): any; + /** + * @name Two.Events#unbind + * @function + * @description Alias for {@link Two.Events#removeEventListener}. + */ + public unbind( + name?: keyof typeof Events.Types, + handler?: (...args: any[]) => any, + ): any; + /** + * @name Two.Events#dispatchEvent + * @function + * @param {String} name - The name of the event to dispatch. + * @param args - Anything can be passed after the name and those will be passed on to handlers attached to the event in the order they are passed. + * @description Call to trigger a custom event. Any additional arguments passed after the name will be passed along to the attached handlers. + */ + public dispatchEvent(name: keyof typeof Events.Types, ...args: any[]): Events; + trigger(...args: any[]): any; + listen(obj: any, name: any, handler: any): Events; + ignore(obj: any, name: any, handler: any): Events; + } +} +declare module 'two.js/src/vector' { + /** + * @name Two.Vector + * @class + + * @param {Number} [x=0] - Any number to represent the horizontal x-component of the vector. + * @param {Number} [y=0] - Any number to represent the vertical y-component of the vector. + * @description A class to store x / y component vector data. In addition to storing data `Two.Vector` has suped up methods for commonplace mathematical operations. + */ + export class Vector extends Events { + /** + * @name Two.Vector.zero + * @readonly + * @property {Vector} - Handy reference to a vector with component values 0, 0 at all times. + */ + static readonly zero: Vector; + /** + * @name Two.Vector.add + * @function + * @param {Vector} v1 + * @param {Vector} v2 + * @returns {Vector} + * @description Add two vectors together. + */ + static add(v1: Vector, v2: Vector): Vector; + /** + * @name Two.Vector.sub + * @function + * @param {Vector} v1 + * @param {Vector} v2 + * @returns {Vector} + * @description Subtract two vectors: `v2` from `v1`. + */ + static sub(v1: Vector, v2: Vector): Vector; + /** + * @name Two.Vector.subtract + * @function + * @description Alias for {@link Two.Vector.sub}. + */ + static subtract(v1: Vector, v2: Vector): Vector; + /** + * @name Two.Vector.ratioBetween + * @function + * @param {Vector} v1 + * @param {Vector} v2 + * @returns {Number} The ratio betwen two points `v1` and `v2`. + */ + static ratioBetween(v1: Vector, v2: Vector): number; + /** + * @name Two.Vector.angleBetween + * @function + * @param {Vector} v1 + * @param {Vector} v2 + * @returns {Number} The angle between points `v1` and `v2`. + */ + static angleBetween(v1: Vector, v2: Vector): number; + static angleBetween(x1: number, y1: number, x2: number, y2: number): number; + /** + * @name Two.Vector.distanceBetween + * @function + * @param {Vector} v1 + * @param {Vector} v2 + * @returns {Number} The distance between points `v1` and `v2`. Distance is always positive. + */ + static distanceBetween(v1: Vector, v2: Vector): number; + /** + * @name Two.Vector.distanceBetweenSquared + * @function + * @param {Vector} v1 + * @param {Vector} v2 + * @returns {Number} The squared distance between points `v1` and `v2`. + */ + static distanceBetweenSquared(v1: Vector, v2: Vector): number; + constructor(x?: number, y?: number); + /** + * @name Two.Vector#_x + * @private + */ + private _x; + /** + * @name Two.Vector#_y + * @private + */ + private _y; + /** + * @name Two.Vector#x + * @property {Number} - The horizontal x-component of the vector. + * @type {Number} + */ + x: number; + /** + * @name Two.Vector#y + * @property {Number} - The vertical y-component of the vector. + * @type {Number} + */ + y: number; + set(x: number, y: number): Vector; + /** + * @name Two.Vector#copy + * @function + * @param {Vector} v + * @description Copy the x / y components of another object `v`. + */ + copy(v: Vector): Vector; + /** + * @name Two.Vector#clear + * @function + * @description Set the x / y component values of the vector to zero. + */ + clear(): Vector; + /** + * @name Two.Vector#clone + * @function + * @description Create a new vector and copy the existing values onto the newly created instance. + */ + clone(): Vector; + /** + * @name Two.Vector#add + * @function + * @param {Vector} v + * @description Add an object with x / y component values to the instance. + * @overloaded + */ + add(v: Vector): Vector; + /** + * @name Two.Vector#add + * @function + * @param {Number} v + * @description Add the **same** number to both x / y component values of the instance. + * @overloaded + */ + add(v: number): Vector; + /** + * @name Two.Vector#add + * @function + * @param {Number} x + * @param {Number} y + * @description Add `x` / `y` values to their respective component value on the instance. + * @overloaded + */ + add(x: number, y: number): Vector; + /** + * @name Two.Vector#addSelf + * @function + * @description Alias for {@link Two.Vector.add}. + */ + addSelf(x: number, y: number): Vector; + addSelf(v: Vector): Vector; + addSelf(v: number): Vector; + /** + * @name Two.Vector#sub + * @function + * @param {Vector} v + * @description Subtract an object with x / y component values to the instance. + * @overloaded + */ + sub(v: Vector): Vector; + /** + * @name Two.Vector#sub + * @function + * @param {Number} v + * @description Subtract the **same** number to both x / y component values of the instance. + * @overloaded + */ + sub(v: number): Vector; + /** + * @name Two.Vector#sub + * @function + * @param {Number} x + * @param {Number} y + * @description Subtract `x` / `y` values to their respective component value on the instance. + * @overloaded + */ + sub(x: number, y: number): Vector; + /** + * @name Two.Vector#subtract + * @function + * @description Alias for {@link Two.Vector.sub}. + */ + subtract(x: number, y: number): Vector; + subtract(v: number): Vector; + subtract(v: Vector): Vector; + /** + * @name Two.Vector#subSelf + * @function + * @description Alias for {@link Two.Vector.sub}. + */ + subSelf(x: number, y: number): Vector; + subSelf(v: number): Vector; + subSelf(v: Vector): Vector; + /** + * @name Two.Vector#subtractSelf + * @function + * @description Alias for {@link Two.Vector.sub}. + */ + subtractSelft(x: number, y: number): Vector; + subtractSelft(v: number): Vector; + subtractSelft(v: Vector): Vector; + /** + * @name Two.Vector#multiply + * @function + * @param {Vector} v + * @description Multiply an object with x / y component values to the instance. + * @overloaded + */ + multiply(v: number): Vector; + /** + * @name Two.Vector#multiply + * @function + * @param {Number} v + * @description Multiply the **same** number to both x / y component values of the instance. + * @overloaded + */ + multiply(v: Vector): Vector; + /** + * @name Two.Vector#multiply + * @function + * @param {Number} x + * @param {Number} y + * @description Multiply `x` / `y` values to their respective component value on the instance. + * @overloaded + */ + multiply(x: number, y: number): Vector; + /** + * @name Two.Vector#multiplySelf + * @function + * @description Alias for {@link Two.Vector.multiply}. + */ + multiplySelf(v: any, ...args: any[]): any; + /** + * @name Two.Vector#multiplyScalar + * @function + * @param {Number} s - The scalar to multiply by. + * @description Mulitiply the vector by a single number. Shorthand to call {@link Two.Vector#multiply} directly. + */ + multiplyScalar(s: number): Vector; + /** + * @name Two.Vector#divide + * @function + * @param {Vector} v + * @description Divide an object with x / y component values to the instance. + * @overloaded + */ + divide(v: Vector): Vector; + /** + * @name Two.Vector#divide + * @function + * @param {Number} v + * @description Divide the **same** number to both x / y component values of the instance. + * @overloaded + */ + divide(v: number): Vector; + /** + * @name Two.Vector#divide + * @function + * @param {Number} x + * @param {Number} y + * @description Divide `x` / `y` values to their respective component value on the instance. + * @overloaded + */ + divide(x: number, y: number): Vector; + /** + * @name Two.Vector#divideSelf + * @function + * @description Alias for {@link Two.Vector.divide}. + */ + divideSelf(x: number, y: number): Vector; + divideSelf(v: number): Vector; + divideSelf(v: Vector): Vector; + /** + * @name Two.Vector#divideScalar + * @function + * @param {Number} s - The scalar to divide by. + * @description Divide the vector by a single number. Shorthand to call {@link Two.Vector#divide} directly. + */ + divideScalar(s: number): Vector; + /** + * @name Two.Vector#negate + * @function + * @description Invert each component's sign value. + */ + negate(): Vector; + /** + * @name Two.Vector#negate + * @function + * @returns {Number} + * @description Get the [dot product](https://en.wikipedia.org/wiki/Dot_product) of the vector. + */ + dot(v: Vector): number; + /** + * @name Two.Vector#length + * @function + * @returns {Number} + * @description Get the length of a vector. + */ + length(): number; + /** + * @name Two.Vector#lengthSquared + * @function + * @returns {Number} + * @description Get the length of the vector to the power of two. Widely used as less expensive than {@link Two.Vector#length} because it isn't square-rooting any numbers. + */ + lengthSquared(): number; + /** + * @name Two.Vector#normalize + * @function + * @description Normalize the vector from negative one to one. + */ + normalize(): Vector; + /** + * @name Two.Vector#distanceTo + * @function + * @returns {Number} + * @description Get the distance between two vectors. + */ + distanceTo(v: any): number; + /** + * @name Two.Vector#distanceToSquared + * @function + * @returns {Number} + * @description Get the distance between two vectors to the power of two. Widely used as less expensive than {@link Two.Vector#distanceTo} because it isn't square-rooting any numbers. + */ + distanceToSquared(v: Vector): number; + /** + * @name Two.Vector#setLength + * @function + * @param {Number} l - length to set vector to. + * @description Set the length of a vector. + */ + setLength(l: number): Vector; + /** + * @name Two.Vector#equals + * @function + * @param {Vector} v - The vector to compare against. + * @param {Number} [eps=0.0001] - An options epsilon for precision. + * @returns {Boolean} + * @description Qualify if one vector roughly equal another. With a margin of error defined by epsilon. + */ + equals(v: Vector, eps?: number): boolean; + /** + * @name Two.Vector#lerp + * @function + * @param {Vector} v - The destination vector to step towards. + * @param {Number} t - The zero to one value of how close the current vector gets to the destination vector. + * @description Linear interpolate one vector to another by an amount `t` defined as a zero to one number. + * @see [Matt DesLauriers](https://twitter.com/mattdesl/status/1031305279227478016) has a good thread about this. + */ + lerp(v: Vector, t: number): Vector; + /** + * @name Two.Vector#isZero + * @function + * @param {Number} [eps=0.0001] - Optional precision amount to check against. + * @returns {Boolean} + * @description Check to see if vector is roughly zero, based on the `epsilon` precision value. + */ + isZero(eps?: number): boolean; + /** + * @name Two.Vector#toObject + * @function + * @returns {Object} + * @description Return a JSON compatible plain object that represents the vector. + */ + toObject(): any; + /** + * @name Two.Vector#rotate + * @function + * @param {Number} radians - The amount to rotate the vector by in radians. + * @description Rotate a vector. + */ + rotate(radians: number): Vector; + } + import { Events } from 'two.js/src/events'; +} +declare module 'two.js/src/anchor' { + /** + * @class + * @name Two.Anchor + * @param {Number} [x=0] - The x position of the root anchor point. + * @param {Number} [y=0] - The y position of the root anchor point. + * @param {Number} [lx=0] - The x position of the left handle point. + * @param {Number} [ly=0] - The y position of the left handle point. + * @param {Number} [rx=0] - The x position of the right handle point. + * @param {Number} [ry=0] - The y position of the right handle point. + * @param {String} [command=Two.Commands.move] - The command to describe how to render. Applicable commands are {@link Two.Commands} + + * @description An object that holds 3 {@link Two.Vector}s, the anchor point and its corresponding handles: `left` and `right`. In order to properly describe the bezier curve about the point there is also a command property to describe what type of drawing should occur when Two.js renders the anchors. + */ + export class Anchor extends Vector { + static makeBroadcast(scope: any): () => void; + constructor( + x?: number, + y?: number, + ax?: number, + ay?: number, + bx?: number, + by?: number, + command?: string, + ); + controls: { + left: Vector; + right: Vector; + }; + _command: string; + _relative: boolean; + _rx: number; + _ry: number; + _xAxisRotation: number; + _largeArcFlag: number; + _sweepFlag: number; + command: string; + relative: boolean; + rx: any; + ry: any; + xAxisRotation: any; + largeArcFlag: any; + sweepFlag: any; + } + import { Vector } from 'two.js/src/vector'; +} +declare module 'two.js/src/constants' { + export namespace Constants { + const nextFrameID: any; + namespace Types { + const webgl: string; + const svg: string; + const canvas: string; + } + const Version: string; + const PublishDate: string; + const Identifier: string; + const Resolution: number; + const AutoCalculateImportedMatrices: boolean; + const Instances: any[]; + function uniqueId(): number; + } +} +declare module 'two.js/src/utils/curves' { + export namespace Curve { + const CollinearityEpsilon: number; + const RecursionLimit: number; + const CuspLimit: number; + namespace Tolerance { + const distance: number; + const angle: number; + const epsilon: number; + } + const abscissas: number[][]; + const weights: number[][]; + } + /** + * @name Two.Utils.getComponentOnCubicBezier + * @function + * @param {Number} t - Zero-to-one value describing what percentage to calculate. + * @param {Number} a - The firt point's component value. + * @param {Number} b - The first point's bezier component value. + * @param {Number} c - The second point's bezier component value. + * @param {Number} d - The second point's component value. + * @returns {Number} The coordinate value for a specific component along a cubic bezier curve by `t`. + */ + export function getComponentOnCubicBezier( + t: number, + a: number, + b: number, + c: number, + d: number, + ): number; + /** + * @name Two.Utils.subdivide + * @function + * @param {Number} x1 - x position of first anchor point. + * @param {Number} y1 - y position of first anchor point. + * @param {Number} x2 - x position of first anchor point's "right" bezier handle. + * @param {Number} y2 - y position of first anchor point's "right" bezier handle. + * @param {Number} x3 - x position of second anchor point's "left" bezier handle. + * @param {Number} y3 - y position of second anchor point's "left" bezier handle. + * @param {Number} x4 - x position of second anchor point. + * @param {Number} y4 - y position of second anchor point. + * @param {Number} [limit=Two.Utils.Curve.RecursionLimit] - The amount of vertices to create by subdividing. + * @returns {Anchor[]} A list of anchor points ordered in between `x1`, `y1` and `x4`, `y4` + * @description Given 2 points (a, b) and corresponding control point for each return an array of points that represent points plotted along the curve. The number of returned points is determined by `limit`. + */ + export function subdivide( + x1: number, + y1: number, + x2: number, + y2: number, + x3: number, + y3: number, + x4: number, + y4: number, + limit?: number, + ): Anchor[]; + /** + * @name Two.Utils.getCurveLength + * @function + * @param {Number} x1 - x position of first anchor point. + * @param {Number} y1 - y position of first anchor point. + * @param {Number} x2 - x position of first anchor point's "right" bezier handle. + * @param {Number} y2 - y position of first anchor point's "right" bezier handle. + * @param {Number} x3 - x position of second anchor point's "left" bezier handle. + * @param {Number} y3 - y position of second anchor point's "left" bezier handle. + * @param {Number} x4 - x position of second anchor point. + * @param {Number} y4 - y position of second anchor point. + * @param {Number} [limit=Two.Utils.Curve.RecursionLimit] - The amount of vertices to create by subdividing. + * @returns {Number} The length of a curve. + * @description Given 2 points (a, b) and corresponding control point for each, return a float that represents the length of the curve using Gauss-Legendre algorithm. Limit iterations of calculation by `limit`. + */ + export function getCurveLength( + x1: number, + y1: number, + x2: number, + y2: number, + x3: number, + y3: number, + x4: number, + y4: number, + limit?: number, + ): number; + /** + * @name Two.Utils.getCurveBoundingBox + * @function + * @param {Number} x1 - x position of first anchor point. + * @param {Number} y1 - y position of first anchor point. + * @param {Number} x2 - x position of first anchor point's "right" bezier handle. + * @param {Number} y2 - y position of first anchor point's "right" bezier handle. + * @param {Number} x3 - x position of second anchor point's "left" bezier handle. + * @param {Number} y3 - y position of second anchor point's "left" bezier handle. + * @param {Number} x4 - x position of second anchor point. + * @param {Number} y4 - y position of second anchor point. + * @returns {Object} Object contains min and max `x` / `y` bounds. + * @see {@link https://github.com/adobe-webplatform/Snap.svg/blob/master/src/path.js#L856} + */ + export function getCurveBoundingBox( + x1: number, + y1: number, + x2: number, + y2: number, + x3: number, + y3: number, + x4: number, + y4: number, + ): any; + /** + * @name Two.Utils.integrate + * @function + * @param {Function} f + * @param {Number} a + * @param {Number} b + * @param {Number} n + * @description Integration for `getCurveLength` calculations. + * @see [Paper.js](@link https://github.com/paperjs/paper.js/blob/master/src/util/Numerical.js#L101) + */ + export function integrate(f: any, a: number, b: number, n: number): number; + /** + * @name Two.Utils.getCurveFromPoints + * @function + * @param {Anchor[]} points + * @param {Boolean} closed + * @description Sets the bezier handles on {@link Anchor}s in the `points` list with estimated values to create a catmull-rom like curve. Used by {@link Two.Path#plot}. + */ + export function getCurveFromPoints(points: Anchor[], closed: boolean): void; + /** + * @name Two.Utils.getControlPoints + * @function + * @param {Anchor} a + * @param {Anchor} b + * @param {Anchor} c + * @returns {Anchor} Returns the passed middle point `b`. + * @description Given three coordinates set the control points for the middle, b, vertex based on its position with the adjacent points. + */ + export function getControlPoints(a: Anchor, b: Anchor, c: Anchor): Anchor; + /** + * @name Two.Utils.getReflection + * @function + * @param {Vector} a + * @param {Vector} b + * @param {Boolean} [relative=false] + * @returns {Vector} New {@link Vector} that represents the reflection point. + * @description Get the reflection of a point `b` about point `a`. Where `a` is in absolute space and `b` is relative to `a`. + * @see {@link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes} + */ + export function getReflection(a: Vector, b: Vector, relative?: boolean): Vector; + /** + * @name Two.Utils.getAnchorsFromArcData + * @function + * @param {Vector} center + * @param {Number} xAxisRotation + * @param {Number} rx - x radius + * @param {Number} ry - y radius + * @param {Number} ts + * @param {Number} td + * @param {Boolean} [ccw=false] - Set path traversal to counter-clockwise + */ + export function getAnchorsFromArcData( + center: Vector, + xAxisRotation: number, + rx: number, + ry: number, + ts: number, + td: number, + ccw?: boolean, + ): void; + import { Anchor } from 'two.js/src/anchor'; + import { Vector } from 'two.js/src/vector'; +} +declare module 'two.js/src/utils/device-pixel-ratio' { + /** + * @name Two.Utils.getRatio + * @function + * @param {CanvasRenderingContext2D} ctx + * @returns {Number} The ratio of a unit in Two.js to the pixel density of a session's screen. + * @see [High DPI Rendering](http://www.html5rocks.com/en/tutorials/canvas/hidpi/) + */ + export function getRatio(ctx: CanvasRenderingContext2D): number; +} +declare module 'two.js/src/utils/underscore' { + export namespace _ { + function isNaN(obj: any): boolean; + function isElement(obj: any): boolean; + function isObject(obj: any): boolean; + function extend(base: any, ...args: any[]): any; + function defaults(base: any, ...args: any[]): any; + function each(obj: any, iteratee: any, context: any): any; + const performance: any; + } +} +declare module 'two.js/src/element' { + /** + * @name Two.Element + * @class + + * @description The foundational object for the Two.js scenegraph. + */ + export class Element extends Events { + /** + * @name Two.Element#_flagId + * @private + * @property {Boolean} - Determines whether the {@link Two.Element#id} needs updating. + */ + private _flagId; + /** + * @name Two.Element#_flagClassName + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#className} need updating. + */ + private _flagClassName; + /** + * @name Two.Element#renderer + * @property {Object} - Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences. + * @nota-bene With the {@link Two.SvgRenderer} you can access the underlying SVG element created via `shape.renderer.elem`. + */ + _renderer: any; + /** + * @name Two.Element#id + * @property {String} - Session specific unique identifier. + * @nota-bene In the {@link Two.SvgRenderer} change this to change the underlying SVG element's id too. + */ + _id: string; + /** + * @name Two.Element#className + * @property {String} - A class to be applied to the element to be compatible with CSS styling. + * @nota-bene Only available for the SVG renderer. + */ + _className: string; + /** + * @name Two.Element#classList + * @property {String[]} + * @description A list of class strings stored if imported / interpreted from an SVG element. + */ + classList: any[]; + /** + * @name Two.Element#flagReset + * @function + * @description Called internally by Two.js's renderer to reset all flags. Ensures that only properties that change are updated before being sent to the renderer. + */ + flagReset(): void; + } + import { Events } from 'two.js/src/events'; +} +declare module 'two.js/src/matrix' { + /** + * @name Two.Matrix + * @class + * @param {Number} [a=1] - The value for element at the first column and first row. + * @param {Number} [b=0] - The value for element at the second column and first row. + * @param {Number} [c=0] - The value for element at the third column and first row. + * @param {Number} [d=0] - The value for element at the first column and second row. + * @param {Number} [e=1] - The value for element at the second column and second row. + * @param {Number} [f=0] - The value for element at the third column and second row. + * @param {Number} [g=0] - The value for element at the first column and third row. + * @param {Number} [h=0] - The value for element at the second column and third row. + * @param {Number} [i=1] - The value for element at the third column and third row. + * @description A class to store 3 x 3 transformation matrix information. In addition to storing data `Two.Matrix` has suped up methods for commonplace mathematical operations. + * @nota-bene Order is based on how to construct transformation strings for the browser. + */ + export class Matrix extends Events { + /** + * @name Two.Matrix.Identity + * @property {Number[]} - A stored reference to the default value of a 3 x 3 matrix. + */ + static Identity: number[]; + /** + * @name Two.Matrix.Multiply + * @function + * @param {Matrix} A + * @param {Matrix} B + * @param {Matrix} [C] - An optional matrix to apply the multiplication to. + * @returns {Matrix} - If an optional `C` matrix isn't passed then a new one is created and returned. + * @description Multiply two matrices together and return the result. + */ + static Multiply(A: Matrix, B: Matrix, C?: Matrix): Matrix; + constructor(elements: number[]); + constructor( + a?: number, + b?: number, + c?: number, + d?: number, + e?: number, + f?: number, + ); + /** + * @name Two.Matrix#elements + * @property {Number[]} - The underlying data stored as an array. + */ + elements: number[]; + /** + * @name Two.Matrix#manual + * @property {Boolean} - Determines whether Two.js automatically calculates the values for the matrix or if the developer intends to manage the matrix. + * @nota-bene - Setting to `true` nullifies {@link Two.Shape#translation}, {@link Two.Shape#rotation}, and {@link Two.Shape#scale}. + */ + manual: boolean; + /** + * @name Two.Matrix#set + * @function + * @param {Number} a - The value for element at the first column and first row. + * @param {Number} b - The value for element at the second column and first row. + * @param {Number} c - The value for element at the third column and first row. + * @param {Number} d - The value for element at the first column and second row. + * @param {Number} e - The value for element at the second column and second row. + * @param {Number} f - The value for element at the third column and second row. + * @param {Number} g - The value for element at the first column and third row. + * @param {Number} h - The value for element at the second column and third row. + * @param {Number} i - The value for element at the third column and third row. + * @description Set an array of values onto the matrix. Order described in {@link Two.Matrix}. + */ + /** + * @name Two.Matrix#set + * @function + * @param {Number[]} a - The array of elements to apply. + * @description Set an array of values onto the matrix. Order described in {@link Two.Matrix}. + */ + set( + a: number[], + b: any, + c: any, + d: any, + e: any, + f: any, + g: any, + h: any, + i: any, + ): any; + /** + * @name Two.Matrix#copy + * @function + * @description Copy the matrix of one to the current instance. + */ + copy(m: any): any; + /** + * @name Two.Matrix#identity + * @function + * @description Turn matrix to the identity, like resetting. + */ + identity(): any; + /** + * @name Two.Matrix#multiply + * @function + * @param {Number} a - The scalar to be multiplied. + * @description Multiply all components of the matrix against a single scalar value. + * @overloaded + */ + /** + * @name Two.Matrix#multiply + * @function + * @param {Number} a - The x component to be multiplied. + * @param {Number} b - The y component to be multiplied. + * @param {Number} c - The z component to be multiplied. + * @description Multiply all components of a matrix against a 3 component vector. + * @overloaded + */ + /** + * @name Two.Matrix#multiply + * @function + * @param {Number} a - The value at the first column and first row of the matrix to be multiplied. + * @param {Number} b - The value at the second column and first row of the matrix to be multiplied. + * @param {Number} c - The value at the third column and first row of the matrix to be multiplied. + * @param {Number} d - The value at the first column and second row of the matrix to be multiplied. + * @param {Number} e - The value at the second column and second row of the matrix to be multiplied. + * @param {Number} f - The value at the third column and second row of the matrix to be multiplied. + * @param {Number} g - The value at the first column and third row of the matrix to be multiplied. + * @param {Number} h - The value at the second column and third row of the matrix to be multiplied. + * @param {Number} i - The value at the third column and third row of the matrix to be multiplied. + * @description Multiply all components of a matrix against another matrix. + * @overloaded + */ + multiply( + a: number, + b: number, + c: number, + d: number, + e: number, + f: number, + g: number, + h: number, + i: number, + ): any; + /** + * @name Two.Matrix#inverse + * @function + * @param {Matrix} [out] - The optional matrix to apply the inversion to. + * @description Return an inverted version of the matrix. If no optional one is passed a new matrix is created and returned. + */ + inverse(out?: Matrix): any; + /** + * @name Two.Matrix#scale + * @function + * @param {Number} scale - The one dimensional scale to apply to the matrix. + * @description Uniformly scale the transformation matrix. + */ + /** + * @name Two.Matrix#scale + * @function + * @param {Number} sx - The horizontal scale factor. + * @param {Number} sy - The vertical scale factor + * @description Scale the transformation matrix in two dimensions. + */ + scale(sx: number, sy: number, ...args: any[]): any; + /** + * @name Two.Matrix#rotate + * @function + * @param {Number} Number - The amount to rotate in Number. + * @description Rotate the matrix. + */ + rotate(Number: number): any; + /** + * @name Two.Matrix#translate + * @function + * @param {Number} x - The horizontal translation value to apply. + * @param {Number} y - The vertical translation value to apply. + * @description Translate the matrix. + */ + translate(x: number, y: number): any; + /** + * @name Two.Matrix#skewX + * @function + * @param {Number} Number - The amount to skew in Number. + * @description Skew the matrix by an angle in the x axis direction. + */ + skewX(Number: number): any; + /** + * @name Two.Matrix#skewY + * @function + * @param {Number} Number - The amount to skew in Number. + * @description Skew the matrix by an angle in the y axis direction. + */ + skewY(Number: number): any; + /** + * @name Two.Matrix#toString + * @function + * @param {Boolean} [fullMatrix=false] - Return the full 9 elements of the matrix or just 6 for 2D transformations. + * @returns {String} - The transformation matrix as a 6 component string separated by spaces. + * @description Create a transform string. Used for the Two.js rendering APIs. + */ + toString(fullMatrix?: boolean): string; + /** + * @name Two.Matrix#toTransformArray + * @function + * @param {Boolean} [fullMatrix=false] - Return the full 9 elements of the matrix or just 6 in the format for 2D transformations. + * @param {Number[]} [output] - An array empty or otherwise to apply the values to. + * @description Create a transform array. Used for the Two.js rendering APIs. + */ + toTransformArray(fullMatrix?: boolean, output?: number[]): any[]; + /** + * @name Two.Matrix#toArray + * @function + * @param {Boolean} [fullMatrix=false] - Return the full 9 elements of the matrix or just 6 for 2D transformations. + * @param {Number[]} [output] - An array empty or otherwise to apply the values to. + * @description Create a transform array. Used for the Two.js rendering APIs. + */ + toArray(fullMatrix?: boolean, output?: number[]): any[]; + /** + * @name Two.Matrix#toObject + * @function + * @description Create a JSON compatible object that represents information of the matrix. + */ + toObject(): { + elements: any[]; + manual: boolean; + }; + /** + * @name Two.Matrix#clone + * @function + * @description Clone the current matrix. + */ + clone(): any; + } + import { Events } from 'two.js/src/events'; +} +declare module 'two.js/src/shape' { + /** + * @name Two.Shape + * @class + + * @description The foundational transformation object for the Two.js scenegraph. + */ + export class Shape extends TwoElement { + /** + * @name Two.Shape#_flagMatrix + * @private + * @property {Boolean} - Determines whether the matrix needs updating. + */ + private _flagMatrix; + /** + * @name Two.Shape#_flagScale + * @private + * @property {Boolean} - Determines whether the scale needs updating. + */ + private _flagScale; + /** + * @name Two.Shape#_matrix + * @private + * @property {Matrix} - The matrix value of the shape's position, rotation, and scale. + */ + private _matrix; + /** + * @name Two.Shape#_worldMatrix + * @private + * @property {Matrix} - The matrix value of the shape's position, rotation, and scale in the scene. + */ + private _worldMatrix; + /** + * @name Two.Shape#_position + * @private + * @property {Vector} - The translation values as a {@link Two.Vector}. + */ + private _position; + /** + * @name Two.Shape#_rotation + * @private + * @property {Number} - The rotation value in Number. + */ + private _rotation; + /** + * @name Two.Shape#_scale + * @private + * @property {Number|Vector} - The scale value in Number. Can be a vector for non-uniform scaling. + */ + private _scale; + /** + * @name Two.Shape#_skewX + * @private + * @property {Number} - The rotation value in Number. + */ + private _skewX; + /** + * @name Two.Shape#_skewY + * @private + * @property {Number} - The rotation value in Number. + */ + private _skewY; + isShape: boolean; + /** + * @name Two.Shape#id + * @property {String} - Session specific unique identifier. + * @nota-bene In the {@link Two.SvgRenderer} change this to change the underlying SVG element's id too. + */ + id: string; + /** + * @name Two.Shape#matrix + * @property {Matrix} + * @description The transformation matrix of the shape. + * @nota-bene {@link Two.Shape#position}, {@link Two.Shape#rotation}, {@link Two.Shape#scale}, {@link Two.Shape#skewX}, and {@link Two.Shape#skewY} apply their values to the matrix when changed. The matrix is what is sent to the renderer to be drawn. + */ + matrix: Matrix; + /** + * @name Two.Shape#worldMatrix + * @property {Matrix} + * @description The transformation matrix of the shape in the scene. + */ + worldMatrix: Matrix; + /** + * @name Two.Shape#position + * @property {Vector} - The x and y value for where the shape is placed relative to its parent. + */ + position: Vector; + /** + * @name Two.Shape#rotation + * @property {Number} - The value in Number for how much the shape is rotated relative to its parent. + */ + rotation: number; + /** + * @name Two.Shape#scale + * @property {Number} - The value for how much the shape is scaled relative to its parent. + * @nota-bene This value can be replaced with a {@link Two.Vector} to do non-uniform scaling. e.g: `shape.scale = new Two.Vector(2, 1);` + */ + scale: number | Vector; + /** + * @name Two.Shape#skewX + * @property {Number} - The value in Number for how much the shape is skewed relative to its parent. + * @description Skew the shape by an angle in the x axis direction. + */ + skewX: number; + /** + * @name Two.Shape#skewY + * @property {Number} - The value in Number for how much the shape is skewed relative to its parent. + * @description Skew the shape by an angle in the y axis direction. + */ + skewY: number; + set renderer(arg: any); + get renderer(): any; + set translation(arg: Vector); + /** + * @name Two.Shape#translation + * @description Alias for {@link Two.Shape#position}. + */ + get translation(): Vector; + /** + * @name Two.Shape#addTo + * @function + * @param {Group} group - The parent the shape adds itself to. + * @description Convenience method to add itself to the scenegraph. + */ + addTo(group: Group): Shape; + /** + * @name Two.Shape#remove + * @function + * @description Remove self from the scene / parent. + */ + remove(): Shape; + /** + * @name Two.Shape#clone + * @function + * @param {Group} [parent] - Optional argument to automatically add the shape to a scenegraph. + * @returns {Shape} + * @description Create a new {@link Two.Shape} with the same values as the current shape. + */ + clone(parent?: Group): Shape; + /** + * @name Two.Shape#_update + * @function + * @private + * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well. + * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be. + * @nota-bene Try not to call this method more than once a frame. + */ + private _update; + } + import { Element as TwoElement } from 'two.js/src/element'; + import { Group } from 'two.js/src/group'; + import { Matrix } from 'two.js/src/matrix'; + import { Vector } from 'two.js/src/vector'; +} +declare module 'two.js/src/collection' { + /** + * @name Two.Collection + * @class + + * @description An `Array` like object with additional event propagation on actions. `pop`, `shift`, and `splice` trigger `removed` events. `push`, `unshift`, and `splice` with more than 2 arguments trigger 'inserted'. Finally, `sort` and `reverse` trigger `order` events. + */ + export class Collection extends Array { + constructor(...args: any[]); + /** + * @private + */ + private _events; + set _bound(arg: boolean); + get _bound(): boolean; + addEventListener(...args: any[]): any; + on(...args: any[]): any; + bind(...args: any[]): any; + removeEventListener(...args: any[]): any; + off(...args: any[]): any; + unbind(...args: any[]): any; + dispatchEvent(...args: any[]): any; + trigger(...args: any[]): any; + listen(...args: any[]): any; + ignore(...args: any[]): any; + } +} +declare module 'two.js/src/children' { + /** + * @class + * @name Two.Group.Children + + * @description A children collection which is accesible both by index and by object `id`. + */ + export class Children extends Collection { + constructor(children?: TwoElement[]); + constructor(...args: TwoElement[]); + /** + * @name Two.Group.Children#ids + * @property {Object} - Map of all elements in the list keyed by `id`s. + */ + ids: any; + /** + * @function + * @name Two.Group.Children#attach + * @param {Shape[]} children - The objects which extend {@link Two.Shape} to be added. + * @description Adds elements to the `ids` map. + */ + attach(children: Shape[]): Children; + /** + * @function + * @name Two.Group.Children#detach + * @param {Shape[]} children - The objects which extend {@link Two.Shape} to be removed. + * @description Removes elements to the `ids` map. + */ + detach(children: Shape[]): Children; + } + import { Collection } from 'two.js/src/collection'; + import { Element as TwoElement } from 'two.js/src/element'; + import { Shape } from 'two.js/src/shape'; +} +declare module 'two.js/src/group' { + /** + * @name Two.Group + * @class + + * @param {Shape[]} [children] - A list of objects that inherit {@link Two.Shape}. For instance, the array could be a {@link Two.Path}, {@link Two.Text}, and {@link Two.RoundedRectangle}. + * @description This is the primary class for grouping objects that are then drawn in Two.js. In Illustrator this is a group, in After Effects it would be a Null Object. Whichever the case, the `Two.Group` contains a transformation matrix and commands to style its children, but it by itself doesn't render to the screen. + * @nota-bene The {@link Two#scene} is an instance of `Two.Group`. + */ + export class Group extends Shape { + static Children: Children; + /** + * @name Two.Group.InsertChildren + * @function + * @param {Shape[]} children - The objects to be inserted. + * @description Cached method to let renderers know children have been added to a {@link Two.Group}. + */ + static InsertChildren(children: Shape[]): void; + /** + * @name Two.Group.RemoveChildren + * @function + * @param {Shape[]} children - The objects to be removed. + * @description Cached method to let renderers know children have been removed from a {@link Two.Group}. + */ + static RemoveChildren(children: Shape[]): void; + /** + * @name Two.Group.OrderChildren + * @function + * @description Cached method to let renderers know order has been updated on a {@link Two.Group}. + */ + static OrderChildren(children: any): void; + /** + * @name Two.Group.Properties + * @property {String[]} - A list of properties that are on every {@link Two.Group}. + */ + static Properties: string[]; + constructor(children?: TwoElement[]); + constructor(...args: TwoElement[]); + /** + * @name Two.Group#_flagAdditions + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#additions} needs updating. + */ + private _flagAdditions; + /** + * @name Two.Group#_flagSubtractions + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#subtractions} needs updating. + */ + private _flagSubtractions; + /** + * @name Two.Group#_flagOrder + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#order} needs updating. + */ + private _flagOrder; + /** + * @name Two.Group#_flagVisible + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#visible} needs updating. + */ + /** + * @name Two.Group#_flagOpacity + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#opacity} needs updating. + */ + private _flagOpacity; + /** + * @name Two.Group#_flagBeginning + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#beginning} needs updating. + */ + private _flagBeginning; + /** + * @name Two.Group#_flagEnding + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#ending} needs updating. + */ + private _flagEnding; + /** + * @name Two.Group#_flagLength + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#length} needs updating. + */ + private _flagLength; + /** + * @name Two.Group#_flagMask + * @private + * @property {Boolean} - Determines whether the {@link Two.Group#mask} needs updating. + */ + private _flagMask; + /** + * @name Two.Group#fill + * @property {(String|Gradient|Texture)} - The value of what all child shapes should be filled in with. + * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`. + */ + fill: string | Gradient | Texture; + /** + * @name Two.Group#stroke + * @property {(String|Gradient|Texture)} - The value of what all child shapes should be outlined in with. + * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`. + */ + stroke: string | Gradient | Texture; + /** + * @name Two.Group#linewidth + * @property {Number} - The thickness in pixels of the stroke for all child shapes. + */ + linewidth: number; + /** + * @name Two.Group#opacity + * @property {Number} - The opaqueness of all child shapes. + * @nota-bene Becomes multiplied by the individual child's opacity property. + */ + opacity: number; + /** + * @name Two.Group#visible + * @property {Boolean} - Display the path or not. + * @nota-bene For {@link Two.CanvasRenderer} and {@link Two.WebGLRenderer} when set to false all updating is disabled improving performance dramatically with many objects in the scene. + */ + visible: boolean; + /** + * @name Two.Group#cap + * @property {String} + * @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty} + */ + cap: string; + /** + * @name Two.Group#join + * @property {String} + * @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty} + */ + join: string; + /** + * @name Two.Group#miter + * @property {String} + * @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty} + */ + miter: number; + /** + * @name Two.Group#closed + * @property {Boolean} - Determines whether a final line is drawn between the final point in the `vertices` array and the first point of all child shapes. + */ + closed: boolean; + /** + * @name Two.Group#curved + * @property {Boolean} - When the child's path is `automatic = true` this boolean determines whether the lines between the points are curved or not. + */ + curved: boolean; + /** + * @name Two.Group#automatic + * @property {Boolean} - Determines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves. + */ + automatic: boolean; + /** + * @name Two.Group#beginning + * @property {Number} - Number between zero and one to state the beginning of where the path is rendered. + * @description {@link Two.Group#beginning} is a percentage value that represents at what percentage into all child shapes should the renderer start drawing. + * @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Group#ending}. + */ + beginning: number; + /** + * @name Two.Group#ending + * @property {Number} - Number between zero and one to state the ending of where the path is rendered. + * @description {@link Two.Group#ending} is a percentage value that represents at what percentage into all child shapes should the renderer start drawing. + * @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Group#beginning}. + */ + ending: number; + /** + * @name Two.Group#length + * @property {Number} - The sum of distances between all child lengths. + */ + length: number; + /** + * @name Two.Group#mask + * @property {Shape} - The Two.js object to clip from a group's rendering. + */ + mask: any; + /** + * @name Two.Group#additions + * @property {Shape[]} + * @description An automatically updated list of children that need to be appended to the renderer's scenegraph. + */ + additions: any[]; + /** + * @name Two.Group#subtractions + * @property {Shape[]} + * @description An automatically updated list of children that need to be removed from the renderer's scenegraph. + */ + subtractions: any[]; + /** + * @name Two.Group#children + * @property {Group.Children} + * @description A list of all the children in the scenegraph. + * @nota-bene Ther order of this list indicates the order each element is rendered to the screen. + */ + children: any; + /** + * @name Two.Group#toObject + * @function + * @returns {Object} + * @description Return a JSON compatible plain object that represents the group. + */ + toObject(): any; + /** + * @name Two.Group#corner + * @function + * @description Orient the children of the group to the upper left-hand corner of that group. + */ + corner(): Group; + /** + * @name Two.Group#center + * @function + * @description Orient the children of the group to the center of that group. + */ + center(): Group; + /** + * @name Two.Group#getById + * @function + * @description Recursively search for id. Returns the first element found. + * @returns {Shape} - Or `null` if nothing is found. + */ + getById(id: any): Shape; + /** + * @name Two.Group#getByClassName + * @function + * @description Recursively search for classes. Returns an array of matching elements. + * @returns {Shape[]} - Or empty array if nothing is found. + */ + getByClassName(className: any): Shape[]; + /** + * @name Two.Group#getByType + * @function + * @description Recursively search for children of a specific type, e.g. {@link Two.Path}. Pass a reference to this type as the param. Returns an array of matching elements. + * @returns {Shape[]} - Empty array if nothing is found. + */ + getByType(type: any): Shape[]; + /** + * @name Two.Group#add + * @function + * @param {Element[]} objects - An array of objects to be added. Can also be supplied as individual arguments. + * @params {...Element} [args] - Alternatively pass shapes as each argument + * @description Add objects to the group. + */ + add(objects: TwoElement): Group; + add(...args: TwoElement[]): Group; + /** + * @name Two.Group#getBoundingClientRect + * @function + * @param {Boolean} [shallow=false] - Describes whether to calculate off local matrix or world matrix. + * @returns {Object} - Returns object with top, left, right, bottom, width, height attributes. + * @description Return an object with top, left, right, bottom, width, and height parameters of the group. + */ + getBoundingClientRect(shallow?: boolean): { + top: number; + left: number; + right: number; + bottom: number; + width: number; + height: number; + }; + /** + * @name Two.Group#noFill + * @function + * @description Apply `noFill` method to all child shapes. + */ + noFill(): Group; + /** + * @name Two.Group#noStroke + * @function + * @description Apply `noStroke` method to all child shapes. + */ + noStroke(): Group; + /** + * @name Two.Group#subdivide + * @function + * @description Apply `subdivide` method to all child shapes. + */ + subdivide(limit?: number): Group; + /** + * @name Two.Group#clone + * @function + * @param {Two.Group} [parent] - The parent group or scene to add the clone to. + * @returns {Two.Group} + * @description Create a new instance of {@link Two.Group} with the same properties of the current group. + */ + clone(parent?: Group): Group; + } + import { Children } from 'two.js/src/children'; + import { Gradient } from 'two.js/src/effects/gradient'; + import { Texture } from 'two.js/src/effects/texture'; + import { Element as TwoElement } from 'two.js/src/element'; + import { Shape } from 'two.js/src/shape'; +} +declare module 'two.js/src/renderers/canvas' { + /** + * @name Two.CanvasRenderer + * @class + + * @param {Object} [parameters] - This object is inherited when constructing a new instance of {@link Two}. + * @param {Element} [parameters.domElement] - The `` to draw to. If none given a new one will be constructed. + * @param {Boolean} [parameters.overdraw] - Determines whether the canvas should clear the background or not. Defaults to `true`. + * @param {Boolean} [parameters.smoothing=true] - Determines whether the canvas should antialias drawing. Set it to `false` when working with pixel art. `false` can lead to better performance, since it would use a cheaper interpolation algorithm. + * @description This class is used by {@link Two} when constructing with `type` of `Two.Types.canvas`. It takes Two.js' scenegraph and renders it to a ``. + */ + export class Renderer extends Events { + /** + * @name Two.CanvasRenderer.Utils + * @property {Object} - A massive object filled with utility functions and properties to render Two.js objects to a ``. + */ + static Utils: { + isHidden: RegExp; + alignments: { + left: string; + middle: string; + right: string; + }; + shim: (elem: any, name: any) => any; + group: { + renderChild: (child: any) => void; + render: (ctx: any) => any; + }; + path: { + render: (ctx: any, forced: any, parentClipped: any) => any; + }; + points: { + render: (ctx: any, forced: any, parentClipped: any) => any; + }; + text: { + render: (ctx: any, forced: any, parentClipped: any) => any; + }; + 'linear-gradient': { + render: (ctx: any, parent: any) => any; + }; + 'radial-gradient': { + render: (ctx: any, parent: any) => any; + }; + texture: { + render: (ctx: any) => any; + }; + renderSvgArcCommand: ( + ctx: any, + ax: any, + ay: any, + rx: any, + ry: any, + largeArcFlag: any, + sweepFlag: any, + xAxisRotation: any, + x: any, + y: any, + ) => void; + }; + constructor(params?: any); + /** + * @name Two.CanvasRenderer#domElement + * @property {Element} - The `` associated with the Two.js scene. + */ + domElement: HTMLElement; + /** + * @name Two.CanvasRenderer#ctx + * @property {Canvas2DContext} - Associated two dimensional context to render on the ``. + */ + ctx: any; + /** + * @name Two.CanvasRenderer#overdraw + * @property {Boolean} - Determines whether the canvas clears the background each draw call. + * @default true + */ + overdraw: any; + /** + * @name Two.CanvasRenderer#scene + * @property {Group} - The root group of the scenegraph. + */ + scene: Group; + /** + * @name Two.CanvasRenderer#setSize + * @function + * @fires resize + * @param {Number} width - The new width of the renderer. + * @param {Number} height - The new height of the renderer. + * @param {Number} [ratio] - The new pixel ratio (pixel density) of the renderer. Defaults to calculate the pixel density of the user's screen. + * @description Change the size of the renderer. + */ + setSize(width: number, height: number, ratio?: number): any; + width: number; + height: number; + ratio: number; + /** + * @name Two.CanvasRenderer#render + * @function + * @description Render the current scene to the ``. + */ + render(): Renderer; + } + import { Events } from 'two.js/src/events'; + import { Group } from 'two.js/src/group'; +} +declare module 'two.js/src/utils/canvas-shim' { + export namespace CanvasShim { + const Image: any; + const isHeadless: boolean; + function shim( + canvas: any, + Image?: new (width?: number, height?: number) => HTMLImageElement, + ): any; + } +} +declare module 'two.js/src/utils/dom' { + export namespace dom { + const temp: any; + } +} +declare module 'two.js/src/utils/error' { + /** + * @name Two.Utils.Error + * @class + * @description Custom error throwing for Two.js specific identification. + */ + export class TwoError extends Error { + constructor(message: any); + } +} +declare module 'two.js/src/registry' { + /** + * @name Two.Registry + * @class + * @description An arbitrary class to manage a directory of things. Mainly used for keeping tabs of textures in Two.js. + */ + export class Registry { + map: any; + /** + * @name Two.Registry#add + * @function + * @param {String} id - A unique identifier. + * @param obj - Any type of variable to be registered to the directory. + * @description Adds any value to the directory. Assigned by the `id`. + */ + add(id: string, obj: any): Registry; + /** + * @name Two.Registry#remove + * @function + * @param {String} id - A unique identifier. + * @description Remove any value from the directory by its `id`. + */ + remove(id: string): Registry; + /** + * @name Two.Registry#get + * @function + * @param {String} id - A unique identifier. + * @returns {?Object} The associated value. If unavailable then `undefined` is returned. + * @description Get a registered value by its `id`. + */ + get(id: string): any | null; + /** + * @name Two.Registry#contains + * @function + * @param {String} id - A unique identifier. + * @returns {Boolean} + * @description Convenience method to see if a value is registered to an `id` already. + */ + contains(id: string): boolean; + } +} +declare module 'two.js/src/utils/shape' { + /** + * @private + * @param {Path} path - The path to analyze against. + * @param {Number} t - + * @returns {Number} + * @description + */ + export function contains(path: Path, t: number): number; + /** + * @private + * @param {Path} path - The path to analyze against. + * @param {Number} target - The target length at which to find an anchor. + * @returns {Number} + * @description Return the id of an anchor based on a target length. + */ + export function getIdByLength(path: Path, target: number): number; + export function getCurveLength(a: any, b: any, limit: any): number; + export function getSubdivisions( + a: any, + b: any, + limit: any, + ): import('two.js/src/anchor').Anchor[]; + import { Path } from 'two.js/src/path'; +} +declare module 'two.js/src/effects/stop' { + /** + * @name Two.Stop + * @class + + * @param {Number} [offset] - The offset percentage of the stop represented as a zero-to-one value. Default value flip flops from zero-to-one as new stops are created. + * @param {String} [color] - The color of the stop. Default value flip flops from white to black as new stops are created. + * @param {Number} [opacity] - The opacity value. Default value is 1, cannot be lower than 0. + * @nota-bene Used specifically in conjunction with {@link Two.Gradient}s to control color graduation. + */ + export class Stop extends TwoElement { + /** + * @name Two.Stop.Index + * @property {Number} - The current index being referenced for calculating a stop's default offset value. + */ + static Index: number; + /** + * @name Two.Stop.Properties + * @property {String[]} - A list of properties that are on every {@link Two.Stop}. + */ + static Properties: string[]; + constructor(offset?: number, color?: string, opacity?: number); + /** + * @name Two.Stop#_flagOffset + * @private + * @property {Boolean} - Determines whether the {@link Two.Stop#offset} needs updating. + */ + private _flagOffset; + /** + * @name Two.Stop#_flagOpacity + * @private + * @property {Boolean} - Determines whether the {@link Two.Stop#opacity} needs updating. + */ + private _flagOpacity; + /** + * @name Two.Stop#_flagColor + * @private + * @property {Boolean} - Determines whether the {@link Two.Stop#color} needs updating. + */ + private _flagColor; + /** + * @name Two.Stop#_offset + * @private + * @see {@link Two.Stop#offset} + */ + private _offset; + /** + * @name Two.Stop#_opacity + * @private + * @see {@link Two.Stop#opacity} + */ + private _opacity; + /** + * @name Two.Stop#_color + * @private + * @see {@link Two.Stop#color} + */ + private _color; + /** + * @name Two.Stop#offset + * @property {Number} - The offset percentage of the stop represented as a zero-to-one value. + */ + offset: number; + /** + * @name Two.Stop#opacity + * @property {Number} - The alpha percentage of the stop represented as a zero-to-one value. + */ + opacity: number; + /** + * @name Two.Stop#color + * @property {String} - The color of the stop. + */ + color: string; + /** + * @name Two.Stop#clone + * @function + * @param {Gradient} [parent] - The parent group or scene to add the clone to. + * @returns {Stop} + * @description Create a new instance of {@link Two.Stop} with the same properties of the current path. + */ + clone(parent: Gradient): Stop; + /** + * @name Two.Stop#toObject + * @function + * @returns {Object} + * @description Return a JSON compatible plain object that represents the path. + */ + toObject(): any; + } + import { Gradient } from 'two.js/src/effects/gradient'; + import { Element as TwoElement } from 'two.js/src/element'; +} +declare module 'two.js/src/effects/gradient' { + /** + * @name Two.Gradient + * @class + + * @param {Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient. + * @description This is the base class for constructing different types of gradients with Two.js. The two common gradients are {@link Two.LinearGradient} and {@link Two.RadialGradient}. + */ + export class Gradient extends TwoElement { + /** + * @name Two.Gradient.Stop + * @see {@link Two.Stop} + */ + static Stop: Stop; + /** + * @name Two.Gradient.Properties + * @property {String[]} - A list of properties that are on every {@link Two.Gradient}. + */ + static Properties: string[]; + constructor(stops?: Stop[]); + _flagStops: boolean; + _flagSpread: boolean; + _flagUnits: boolean; + _spread: string; + _units: string; + /** + * @name Two.Gradient#renderer + * @property {Object} + * @description Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences. + * @nota-bene With the {@link Two.SvgRenderer} you can access the underlying SVG element created via `shape.renderer.elem`. + */ + /** + * @name Two.Gradient#id + * @property {String} - Session specific unique identifier. + * @nota-bene In the {@link Two.SvgRenderer} change this to change the underlying SVG element's id too. + */ + id: string; + /** + * @name Two.Gradient#spread + * @property {String} - Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle. Possible values are `'pad'`, `'reflect'`, and `'repeat'`. + * @see {@link https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementSpreadMethodAttribute} for more information + */ + spread: string; + /** + * @name Two.Gradient#units + * @property {String} [units='objectBoundingBox'] - Indicates how coordinate values are interpreted by the renderer. Possible values are `'userSpaceOnUse'` and `'objectBoundingBox'`. + * @see {@link https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementGradientUnitsAttribute} for more information + */ + units: string; + stops: any; + /** + * @name Two.Gradient#clone + * @function + * @param {Group} [parent] - The parent group or scene to add the clone to. + * @returns {Gradient} + * @description Create a new instance of {@link Two.Gradient} with the same properties of the current path. + */ + clone(parent?: Group): Gradient; + /** + * @name Two.Gradient#toObject + * @function + * @returns {Object} + * @description Return a JSON compatible plain object that represents the path. + */ + toObject(): any; + /** + * @name Two.Gradient#_update + * @function + * @private + * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well. + * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be. + * @nota-bene Try not to call this method more than once a frame. + */ + private _update; + } + import { Stop } from 'two.js/src/effects/stop'; + import { Element as TwoElement } from 'two.js/src/element'; + import { Group } from 'two.js/src/group'; +} +declare module 'two.js/src/effects/linear-gradient' { + /** + * @name Two.LinearGradient + * @class + + * @param {Number} [x1=0] - The x position of the first end point of the linear gradient. + * @param {Number} [y1=0] - The y position of the first end point of the linear gradient. + * @param {Number} [x2=0] - The x position of the second end point of the linear gradient. + * @param {Number} [y2=0] - The y position of the second end point of the linear gradient. + * @param {Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient. + * @nota-bene The linear gradient lives within the space of the parent object's matrix space. + */ + export class LinearGradient extends Gradient { + constructor(x1?: number, y1?: number, x2?: number, y2?: number, stops?: Stop[]); + /** + * @name Two.LinearGradient#_flagEndPoints + * @private + * @property {Boolean} - Determines whether the {@link Two.LinearGradient#left} or {@link Two.LinearGradient#right} changed and needs to update. + */ + private _flagEndPoints; + _left: any; + _right: any; + /** + * @name Two.LinearGradient#left + * @property {Vector} - The x and y value for where the first end point is placed on the canvas. + */ + left: Vector; + /** + * @name Two.LinearGradient#right + * @property {Vector} - The x and y value for where the second end point is placed on the canvas. + */ + right: Vector; + } + import { Gradient } from 'two.js/src/effects/gradient'; + import { Stop } from 'two.js/src/effects/stop'; + import { Vector } from 'two.js/src/vector'; +} +declare module 'two.js/src/effects/radial-gradient' { + /** + * @name Two.RadialGradient + * @class + + * @param {Number} [x=0] - The x position of the origin of the radial gradient. + * @param {Number} [y=0] - The y position of the origin of the radial gradient. + * @param {Number} [radius=0] - The radius of the radial gradient. + * @param {Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient. + * @param {Number} [focalX=0] - The x position of the focal point on the radial gradient. + * @param {Number} [focalY=0] - The y position of the focal point on the radial gradient. + * @nota-bene The radial gradient lives within the space of the parent object's matrix space. + */ + export class RadialGradient extends Gradient { + constructor( + cx?: number, + cy?: number, + r?: number, + stops?: Stop[], + fx?: number, + fy?: number, + ); + /** + * @name Two.RadialGradient#_flagRadius + * @private + * @property {Boolean} - Determines whether the {@link Two.RadialGradient#radius} changed and needs to update. + */ + private _flagRadius; + /** + * @name Two.RadialGradient#_flagCenter + * @private + * @property {Boolean} - Determines whether the {@link Two.RadialGradient#center} changed and needs to update. + */ + private _flagCenter; + /** + * @name Two.RadialGradient#_flagFocal + * @private + * @property {Boolean} - Determines whether the {@link Two.RadialGradient#focal} changed and needs to update. + */ + private _flagFocal; + _radius: number; + _center: any; + _focal: any; + /** + * @name Two.RadialGradient#center + * @property {Vector} - The x and y value for where the origin of the radial gradient is. + */ + center: Vector; + radius: number; + /** + * @name Two.RadialGradient#focal + * @property {Vector} - The x and y value for where the focal point of the radial gradient is. + * @nota-bene This effects the spray or spread of the radial gradient. + */ + focal: Vector; + } + import { Gradient } from 'two.js/src/effects/gradient'; + import { Stop } from 'two.js/src/effects/stop'; + import { Vector } from 'two.js/src/vector'; +} +declare module 'two.js/src/effects/texture' { + /** + * @name Two.Texture + * @class + + * @param {String|HTMLImageElement} [src] - The URL path to an image file or an `` element. + * @param {Function} [callback] - An optional callback function once the image has been loaded. + * @description Fundamental to work with bitmap data, a.k.a. pregenerated imagery, in Two.js. Supported formats include jpg, png, gif, and tiff. See {@link Two.Texture.RegularExpressions} for a full list of supported formats. + */ + export class Texture extends TwoElement { + /** + * @name Two.Texture.Properties + * @property {String[]} - A list of properties that are on every {@link Two.Texture}. + */ + static Properties: string[]; + /** + * @name Two.Texture.RegularExpressions + * @property {Object} - A map of compatible DOM Elements categorized by media format. + */ + static RegularExpressions: { + video: RegExp; + image: RegExp; + effect: RegExp; + }; + /** + * @name Two.Texture.ImageRegistry + * @property {Registry} - A canonical listing of image data used in a single session of Two.js. + * @nota-bene This object is used to cache image data between different textures. + */ + static ImageRegistry: Registry; + /** + * @name Two.Texture.getAbsoluteURL + * @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.ImageRegistry}. + * @param {String} path + * @returns {String} - The serialized absolute path. + */ + static getAbsoluteURL(path: string): string; + /** + * @name Two.Texture.loadHeadlessBuffer + * @property {Function} - Loads an image as a buffer in headless environments. + * @param {Texture} texture - The {@link Two.Texture} to be loaded. + * @param {Function} loaded - The callback function to be triggered once the image is loaded. + * @nota-bene - This function uses node's `fs.readFileSync` to spoof the `` loading process in the browser. + */ + static loadHeadlessBuffer(texture: Texture, loaded: any): void; + /** + * @name Two.Texture.getTag + * @property {Function} - Retrieves the tag name of an image, video, or canvas node. + * @param {HTMLImageElement} image - The image to infer the tag name from. + * @returns {String} - Returns the tag name of an image, video, or canvas node. + */ + static getTag(image: any): string; + /** + * @name Two.Texture.getImage + * @property {Function} - Convenience function to set {@link Two.Texture#image} properties with canonincal versions set in {@link Two.Texture.ImageRegistry}. + * @param {String} src - The URL path of the image. + * @returns {HTMLImageElement} - Returns either a cached version of the image or a new one that is registered in {@link Two.Texture.ImageRegistry}. + */ + static getImage(src: string): HTMLImageElement; + /** + * @name Two.Register + * @interface + * @description A collection of functions to register different types of textures. Used internally by a {@link Two.Texture}. + */ + static Register: { + canvas: (texture: any, callback: any) => void; + img: (texture: any, callback: any) => void; + video: (texture: any, callback: any) => void; + }; + /** + * @name Two.Texture.load + * @function + * @param {Texture} texture - The texture to load. + * @param {Function} callback - The function to be called once the texture is loaded. + */ + static load(texture: Texture, callback: any): void; + constructor(src?: any, callback?: any); + /** + * @name Two.Texture#_flagSrc + * @private + * @property {Boolean} - Determines whether the {@link Two.Texture#src} needs updating. + */ + private _flagSrc; + /** + * @name Two.Texture#_flagImage + * @private + * @property {Boolean} - Determines whether the {@link Two.Texture#image} needs updating. + */ + private _flagImage; + /** + * @name Two.Texture#_flagVideo + * @private + * @property {Boolean} - Determines whether the {@link Two.Texture#video} needs updating. + */ + private _flagVideo; + /** + * @name Two.Texture#_flagLoaded + * @private + * @property {Boolean} - Determines whether the {@link Two.Texture#loaded} needs updating. + */ + private _flagLoaded; + /** + * @name Two.Texture#_flagRepeat + * @private + * @property {Boolean} - Determines whether the {@link Two.Texture#repeat} needs updating. + */ + private _flagRepeat; + /** + * @name Two.Texture#_flagOffset + * @private + * @property {Boolean} - Determines whether the {@link Two.Texture#offset} needs updating. + */ + private _flagOffset; + /** + * @name Two.Texture#_flagScale + * @private + * @property {Boolean} - Determines whether the {@link Two.Texture#scale} needs updating. + */ + private _flagScale; + /** + * @name Two.Texture#_src + * @private + * @see {@link Two.Texture#src} + */ + private _src; + /** + * @name Two.Texture#_image + * @private + * @see {@link Two.Texture#image} + */ + private _image; + /** + * @name Two.Texture#_loaded + * @private + * @see {@link Two.Texture#loaded} + */ + private _loaded; + /** + * @name Two.Texture#_repeat + * @private + * @see {@link Two.Texture#repeat} + */ + private _repeat; + /** + * @name Two.Texture#_scale + * @private + * @see {@link Two.Texture#scale} + */ + private _scale; + /** + * @name Two.Texture#_offset + * @private + * @see {@link Two.Texture#offset} + */ + private _offset; + id: string; + /** + * @name Two.Texture#loaded + * @property {Boolean} - Shorthand value to determine if image has been loaded into the texture. + */ + loaded: boolean; + /** + * @name Two.Texture#repeat + * @property {String} - CSS style declaration to tile {@link Two.Path}. Valid values include: `'no-repeat'`, `'repeat'`, `'repeat-x'`, `'repeat-y'`. + * @see {@link https://www.w3.org/TR/2dcontext/#dom-context-2d-createpattern} + */ + repeat: string; + /** + * @name Two.Texture#offset + * @property {Vector} - A two-component vector describing any pixel offset of the texture when applied to a {@link Two.Path}. + */ + offset: Vector; + src: string; + /** + * @name Two.Texture#image + * @property {Element} - The corresponding DOM Element of the texture. Can be a ``, ``, or `