Add initial TypeScript type declarations

.gitignore

@@ -1 +1,2 @@
 node_modules
+*.DS_Store

dist/types/components/buttontemplate.d.ts

@@ -0,0 +1,55 @@
+import Interface from "../core/interface";
+import ToggleModel from "../models/toggle";
+import { XYPosition } from "../util/interaction";
+
+type ButtonMode = "button" | "impulse" | "toggle" | "aftertouch";
+type ButtonTemplateOptions = {
+  mode: ButtonMode;
+  state: boolean;
+};
+
+/**
+Button Template
+*/
+export default class ButtonTemplate<
+  T extends ButtonTemplateOptions
+> extends Interface<T> {
+  /**
+   * Interaction mode: supports "button", "aftertouch", "impulse", or "toggle"
+   * @type {string}
+   * @example button.mode = 'toggle';
+   */
+  mode: ButtonMode;
+  position: XYPosition;
+  _state: ToggleModel;
+  pad: SVGElement;
+  interactionTarget: SVGElement;
+  render(): void;
+  up(): void;
+  bend(mouse: XYPosition): void;
+  down(paintbrush?: boolean): void;
+  timeout?: number;
+  set state(arg: boolean);
+  /**
+    Whether the button is on (pressed) or off (not pressed)
+    @type {boolean}
+    @example button.state = true;
+    */
+  get state(): boolean;
+  /**
+    Change the button to its alternate state (off=>on, on=>off), or flip it to a specified state.
+    @param value {boolean} (Optional) State to flip to.
+    @example button.flip();
+    */
+  flip(value?: boolean): void;
+  /**
+    Turn the button's state to true.
+    @example button.turnOn();
+    */
+  turnOn(emitting?: boolean): void;
+  /**
+    Turn the button's state to false.
+    @example button.turnOff();
+    */
+  turnOff(emitting?: boolean): void;
+}

dist/types/components/rangeslider.d.ts

@@ -0,0 +1,39 @@
+import Interface from "../core/interface";
+import Range, { RangeOptions } from "../models/range";
+import * as Interaction from "../util/interaction";
+
+type RangeSliderMode = "select" | "drag";
+
+type RangeSliderOptions = RangeOptions & {
+  mode: RangeSliderMode;
+};
+
+export default class RangeSlider extends Interface<RangeSliderOptions> {
+  min: number;
+  max: number;
+  step: boolean;
+  mode: number;
+  range: Range;
+  position:
+    | {
+        center: Interaction.Handle;
+        size: Interaction.Handle;
+      }
+    | {
+        center: Interaction.Handle;
+        start: Interaction.Handle;
+        end: Interaction.Handle;
+      };
+  dummy: SVGRectElement;
+  ref: SVGGElement;
+  bar: SVGRect;
+  arrowL: SVGRectElement;
+  arrowR: SVGRectElement;
+  render(): void;
+  hasMoved?: boolean;
+  set start(value: number);
+  get start(): number;
+  set end(value: number);
+  get end(): number;
+  updatePosition(): void;
+}

dist/types/components/slidertemplate.d.ts

@@ -0,0 +1,66 @@
+import Interface from "../core/interface";
+import Step from "../models/step";
+import * as Interaction from "../util/interaction";
+import { HandleMode } from "../util/interaction";
+
+export type SliderOrientation = "vertical" | "horizontal";
+
+type SliderTemplateOptions = {
+  orientation: SliderOrientation;
+  hasKnob: boolean;
+};
+
+export default class SliderTemplate extends Interface<SliderTemplateOptions> {
+  orientation: SliderOrientation;
+  hasKnob: boolean;
+  _value: Step;
+  position: Interaction.Handle;
+  set value(value: number);
+  /**
+    The slider's current value. If set manually, will update the interface and trigger the output event.
+    @type {number}
+    @example slider.value = 10;
+    */
+  get value(): number;
+  bar: any;
+  fillbar: any;
+  knob: any;
+  knobData: {
+    level: number;
+    r: number;
+  };
+  thickness: number;
+  render(): void;
+  down(): void;
+  slide(): void;
+  up(): void;
+  get normalized(): number;
+  set min(value: number);
+  /**
+    Lower limit of the sliders's output range
+    @type {number}
+    @example slider.min = 1000;
+    */
+  get min(): number;
+  set max(value: number);
+  /**
+    Upper limit of the slider's output range
+    @type {number}
+    @example slider.max = 1000;
+    */
+  get max(): number;
+  set step(value: number);
+  /**
+    The increment that the slider's value changes by.
+    @type {number}
+    @example slider.step = 5;
+    */
+  get step(): number;
+  set mode(mode: HandleMode);
+  /**
+    Absolute mode (slider's value jumps to mouse click position) or relative mode (mouse drag changes value relative to its current position). Default: "relative".
+    @type {string}
+    @example slider.mode = "relative";
+    */
+  get mode(): HandleMode;
+}

dist/types/core/interface.d.ts

@@ -0,0 +1,96 @@
+import EventEmitter from "events";
+import { XYPosition } from "../util/interaction";
+
+type InterfaceColorTarget =
+  | "accent"
+  | "fill"
+  | "light"
+  | "dark"
+  | "mediumLight"
+  | "mediumDark";
+
+type BaseInterfaceOptions = {
+  size: [number, number];
+  target: HTMLElement;
+  colors: {};
+  snapWithParent: boolean;
+  event: () => void;
+  component: boolean;
+};
+/**
+Interface
+*/
+export default class Interface<InterfaceSpecificOptions> extends EventEmitter {
+  constructor(
+    parent: HTMLElement | string,
+    options?: Partial<BaseInterfaceOptions & InterfaceSpecificOptions>
+  );
+  constructor(
+    args?: any,
+    options?: (keyof InterfaceSpecificOptions)[],
+    defaults?: Partial<BaseInterfaceOptions & InterfaceSpecificOptions>
+  );
+  type: string;
+  width: number;
+  height: number;
+  settings: BaseInterfaceOptions;
+  colors: { [colorTarget in InterfaceColorTarget]: string };
+  parseSettings(
+    args: any,
+    options: (keyof InterfaceSpecificOptions)[],
+    defaults: Partial<BaseInterfaceOptions & InterfaceSpecificOptions>
+  ): Partial<BaseInterfaceOptions>;
+  parent: string | HTMLElement | SVGElement | undefined;
+  element: HTMLElement;
+  interactionTarget: HTMLElement | SVGElement;
+  event: boolean | (() => void);
+  init(): void;
+  wait: boolean;
+  mouse: XYPosition | {};
+  buildFrame(): void;
+  buildInterface(): void;
+  sizeInterface(): void;
+  colorInterface(): void;
+  attachListeners(): void;
+  boundPreMove: ((evt: MouseEvent) => void) | undefined;
+  boundPreRelease: ((evt: MouseEvent) => void) | undefined;
+  finalTouches(): void;
+  preClick(e: MouseEvent): void;
+  offset?: {
+    top: any;
+    left: any;
+  };
+  clicked?: boolean;
+  moveEvent?: void;
+  releaseEvent?: void;
+  preMove(e: MouseEvent): void;
+  preRelease(e: MouseEvent): void;
+  click(): void;
+  move(): void;
+  release(): void;
+  preTouch(e: MouseEvent): void;
+  preTouchMove(e: MouseEvent): void;
+  preTouchRelease(e: MouseEvent): void;
+  touch(): void;
+  touchMove(): void;
+  touchRelease(): void;
+  /**
+   * Resize the interface
+   * @param width {number} New width in pixels
+   * @param height {number} New height in pixels
+   *
+   * @example
+   * button.resize(100,100);
+   */
+  resize(width: number, height: number): void;
+  empty(): void;
+  /**
+   * Remove the interface from the page and cancel its event listener(s).
+   *
+   * @example
+   * button.destroy();
+   */
+  destroy(): void;
+  customDestroy(): void;
+  colorize(type: string, color: string): void;
+}

dist/types/core/rack.d.ts

@@ -0,0 +1,10 @@
+export default class Rack {
+    constructor(target: any, settings: any);
+    meta: {};
+    buildInterface(): void;
+    colorInterface(): void;
+    show(): void;
+    hide(): void;
+    colorize(type: any, color: any): void;
+    empty(): void;
+}