Typescript support

[dsfx3d]

Have you thought about adding support for TS? I'd be happy to contribute if you are open to the idea.

P.S. I want to use this package in a Typescript project

[CrazyTim]

@dsfx3d that would be great if you have the time, feel free to submit a PR 😄

I havn't tested integration as much as I would like to, so any issues you find please let me know!

[dsfx3d]

How about, for now we start with the declaration file only and maybe a complete re-write in typescript in the future?

[CrazyTim]

Lets just do the declaration file for now.

My original motivation was to keep it vanilla and simple enough to avoid Typescript.

[dsfx3d]

Alright

[CrazyTim]

I would like to automate this. For example use the TypeScript compiler in a build step to generate the declaration file. See https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html

A dependancy for this would be to add proper JSDoc comments, so if your still keen @dsfx3d lets start with that.

[dsfx3d]

Yes that's what I thought as well, for that we'll have to add JSDoc comments. Right now I'm using the wheel in my project in order to understand it better

[jdb-adservice]

Hello I second this request for an angular wrapper

I've created this spin-wheel.d.ts, but still dont know how to properly import and use it somehow

I hope this file at least can save som other people some time if they try

spin-wheel.d.ts.zip

[dsfx3d]

This file is not accessible

[jdb-adservice]

This file is not accessible

my bad. I've created a repo and uploaded it here: https://github.com/jdb-adservice/spin-wheel-d-ts/blob/main/spin-wheel.d.ts

[dsfx3d]

did you do it manually or is it generated?

[jdb-adservice]

Sorry if I was unclear, dont want to take credit for it. The file has been mostly automatically generated using AI

[dsfx3d]

lol that's fine, in that case use the same approach and generate JSDocs for the source and then add a script in package json to "generate DTS from JSDocs"

[jdb-adservice]

dont now that exactly means tbh, but I will try thank you. Is how you did it available somewhere online so I could see how you did it?

[jdb-adservice]

I've now created constants.js, events.js, item.js, util.js and wheel.js with JSDoc Annotations in the same repo as I have the spin-wheel.d.ts file

https://github.com/jdb-adservice/spin-wheel

hope this will help @CrazyTim to create a angular typescript wrapper for his cool library

[vandercloak]

Thanks for the ground work on all this so far. I hope this is one step further to what you all have setup.

There were quite a few any types being used. Instantiating the wheel class was particularly lacking with both arguments not being properly typed. Here is what I have so far:

declare module "spin-wheel" {
  // -------------- Enums --------------
  export enum AlignText {
    left = "left",
    right = "right",
    center = "center",
  }

  // -------------- Interfaces --------------
  export interface ItemProps {
    backgroundColor?: string | null;
    image?: string | null;
    imageOpacity?: number;
    imageRadius?: number;
    imageRotation?: number;
    imageScale?: number;
    label?: string;
    labelColor?: string | null;
    value?: any; // Keep as any if the value can be of any type
    weight?: number;
  }

  export interface WheelProps {
    borderColor?: string;
    borderWidth?: number;
    debug?: boolean;
    image?: string;
    isInteractive?: boolean;
    itemBackgroundColors?: string[];
    itemLabelAlign?: AlignText;
    itemLabelBaselineOffset?: number;
    itemLabelColors?: string[];
    itemLabelFont?: string;
    itemLabelFontSizeMax?: number;
    itemLabelRadius?: number;
    itemLabelRadiusMax?: number;
    itemLabelRotation?: number;
    itemLabelStrokeColor?: string;
    itemLabelStrokeWidth?: number;
    items?: ItemProps[];
    lineColor?: string;
    lineWidth?: number;
    pixelRatio?: number;
    radius?: number;
    rotation?: number;
    rotationResistance?: number;
    rotationSpeedMax?: number;
    offset?: { w: number; h: number };
    onCurrentIndexChange?: (event: any) => void; // Specify event type if possible
    onRest?: (event: any) => void; // Specify event type if possible
    onSpin?: (event: any) => void; // Specify event type if possible
    overlayImage?: string;
    pointerAngle?: number;
  }

  // -------------- Item Class --------------
  export class Item {
    constructor(wheel: Wheel, props?: ItemProps);
    init(props: ItemProps): void;

    // Getters and Setters
    backgroundColor: string | null;
    image: string | null;
    imageOpacity: number;
    imageRadius: number;
    imageRotation: number;
    imageScale: number;
    label: string | null;
    labelColor: string | null;
    value: any; // Keep as any if the value can be of any type
    weight: number;

    // Methods
    getIndex(): number;
    getCenterAngle(): number;
    getStartAngle(): number;
    getEndAngle(): number;
    getRandomAngle(): number;
  }

  // -------------- Wheel Class --------------
  export class Wheel {
    constructor(container: Element, props?: WheelProps);

    init(props?: WheelProps): void;
    add(container: Element): void;
    remove(): void;
    resize(): void;
    draw(now?: number): void;
    spin(rotationSpeed?: number): void;
    spinTo(rotation?: number, duration?: number, easingFunction?: (n: number) => number): void;
    spinToItem(
      itemIndex?: number,
      duration?: number,
      spinToCenter?: boolean,
      numberOfRevolutions?: number,
      direction?: number,
      easingFunction?: (n: number) => number
    ): void;
    animate(newRotation: number, duration: number, easingFunction?: (n: number) => number): void;
    stop(): void;
    getScaledNumber(n: number): number;
    getActualPixelRatio(): number;
    wheelHitTest(point?: { x: number; y: number }): boolean;
    refreshCursor(): void;
    getAngleFromCenter(point?: { x: number; y: number }): number;
    getCurrentIndex(): number;
    refreshCurrentIndex(angles?: number[]): void;
    getItemAngles(initialRotation?: number): number[];
    refresh(): void;
    limitSpeed(speed?: number, max?: number): number;
    beginSpin(speed?: number, spinMethod?: string): void;
    refreshAriaLabel(): void;
    dragStart(point?: { x: number; y: number }): void;
    dragMove(point?: { x: number; y: number }): void;
    dragEnd(): void;
    isDragEventTooOld(now?: number, event?: any): boolean;
    raiseEvent_onCurrentIndexChange(data?: any): void;
    raiseEvent_onRest(data?: any): void;
    raiseEvent_onSpin(data?: any): void;

    // Define getters and setters based on the WheelProps interface
    borderColor: string;
    borderWidth: number;
    debug: boolean;
    image: string;
    isInteractive: boolean;
    itemBackgroundColors: string[];
    itemLabelAlign: AlignText;
    itemLabelBaselineOffset: number;
    itemLabelColors: string[];
    itemLabelFont: string;
    itemLabelFontSizeMax: number;
    itemLabelRadius: number;
    itemLabelRadiusMax: number;
    itemLabelRotation: number;
    itemLabelStrokeColor: string;
    itemLabelStrokeWidth: number;
    items: ItemProps[];
    lineColor: string;
    lineWidth: number;
    offset: { w: number; h: number };
    onCurrentIndexChange: (event: any) => void;
    onRest: (event: any) => void;
    onSpin: (event: any) => void;
    overlayImage: string;
    pointerAngle: number;
    pixelRatio: number;
    radius: number;
    rotation: number;
    rotationResistance: number;
    rotationSpeedMax: number;
  }
}

[jdb-adservice]

someone went through the files and added .d.ts and .js.map variants but for version 4.3.1 here whereas at the time of writing the current version is 5.0.1

I do not know the differences between the two versions but i hope @CrazyTim would add these declarations to the official repo - with updated declarations if there are new functions available