<sectored-wheel> element

Spinned Sectored Wheel

No dependencies, Web Component.

Demo / Code Example https://oleksiy-nesterov.github.io/sectored-wheel

Installation

<script type="module" src="https://oleksiy-nesterov.github.io/sectored-wheel/dist/index.js"></script>

or

npm install sectored-wheel

or

npm install git+https://github.com/oleksiy-nesterov/sectored-wheel.git#v2.0.3

Usage

/* hide not defined HTMLElements during the module loading */
*:not(:defined) {
  display: none;
}

<sectored-wheel
  colors="red;green;blue"
  rim-color="#ccc"
  onclick="this.index = Math.round(Math.random() * 2)"
  onchange="console.warn(this.index)"
  size="600px">
  <sectored-wheel-item>1</sectored-wheel-item>
  <sectored-wheel-item>2</sectored-wheel-item>
  <sectored-wheel-item>3</sectored-wheel-item>
</sectored-wheel>

const wheel = document.querySelector('sectored-wheel');

wheel.onchange = () => {
  console.log(this.index);
};

wheel.index = 3;

Configuration

Props, Methods and Attributes

| Wheel's Props & Attributes | Description | Example | Default | | ------------------------------------------- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|-------------| | index | Selected sector | 1 | 0 | | size | Wheel size | 200vh | 100px | | colors | Sector color | red;green;blue | transparent | | stroke | Stroke size in px | 10 | 0 | | strokeColor, stroke-color | Stroke color | red, rgba(0,0,0,0.5) | transparent | | padding | inset padding in pixels | 10 | 0 | | direction | Rotate direction | cw, acw | cw | | azimuth | Wheel azimuth | -90deg, 0.25turn, etc | 0 | | rotationAcceleration, rotation-acceleration | how many full rotations should be done each time | 2 | 1 | | rotationTime, rotation-time | Rotation time | 10s, 200ms, etc | 5s | | inRotation | Read Only, allow to determine the wheel rotation | | | | inSpinning | Read Only, allow to determine the wheel spinning | | | | spin | Method to make wheel infinity spinning | | | | setIndexAsync | Method to set Index async. The first parameter is an async or regular function which should return a new Index, the first parameter can be just a number. The second parameter is a minimal time of wheel spin in ms (default value is 0). | | |

| Sector's Attributes | Description | | ------------------- | ------------ | | clipping | Clip content | | color | Sector color |

CSS vars, which can used for custom styles

| Var | Description | | --------------- | ----------------- | | --count | Amount of sectors | | --sector-height | Sector height | | --sector-width | Sector width | | --sector-angle | Stroke angle |

CSS classes, which can used for custom styles

| Class | Description | | ------------------------------- | ---------------------------- | | sectored-wheel-item.selected | Selected sector | | sectored-wheel-item.preselected | Default (preselected) sector |

Integration

Angular Component Wrapper

<sectored-wheel
    #wheel
    (change)="changed($event)"
    colors="#7bbbd6;#294b7b;#cae4e3"
    size="{{'600px'}}"
    style="margin:20px;"
>
    <sectored-wheel-item
        *ngFor="let item of sectors; let index = index"
        (click)="click()"
    >
        {{index}}
    </sectored-wheel-item>
</sectored-wheel>

import {CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import {CommonModule} from '@angular/common';
import 'sectored-wheel';

@Component({
    selector: 'app-my-component',
    standalone: true,
    imports: [CommonModule],
    templateUrl: './my-component.component.html',
    styleUrl: './my-component.component.scss',
    schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add CUSTOM_ELEMENTS_SCHEMA to the component
})
export class MyComponentComponent implements OnInit {
    @Input() count: number = 0;
    @ViewChild('wheel') wheel?: ElementRef<HTMLElement & { index: number }>;

    sectors: number[] = [];

    changed = (event: Event) => {
        console.log((event as CustomEvent).detail.data);
    };

    click = () => {
        if (this.wheel?.nativeElement) {
            this.wheel.nativeElement.index = Math.round(Math.random() * this.count);
        }
    };

    ngOnInit() {
        this.sectors = new Array(this.count).fill(0);
    }
}

Also, CUSTOM_ELEMENTS_SCHEMA can be added to the module

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
    ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SomeModule {
    //...
}

React Component Wrapper

import {useCallback, useEffect, useMemo, useRef} from 'react';
import 'sectored-wheel/dist/sectored-wheel.min.js';

export const MyComponent = ({count}: {
  count: number
}) => {
  const wheel = useRef<HTMLElement & {
    index: number
  }>(null);

  useEffect(() => {
    if (wheel.current) {
        const el = wheel.current;
        const onChange = (event: Event) => {
            const index = (event as CustomEvent).detail?.data;
            console.log(index);
        };
        el.onchange = onChange;
        // or use event
        // el.addEventListener('change', onChange);
        // return () => {
        //   el.removeEventListener('change', onChange);
        // }
    }
  }, []);

  const sectors = useMemo(() => {
    return new Array(count).fill(0).map((_, i) => {
      return <sectored-wheel-item key={i}>{i}</sectored-wheel-item>;
    });
  }, [count]);

  const click = useCallback(() => {
    if (wheel.current) {
      wheel.current.index = Math.round(Math.random() * count);
    }
  }, [count]);

  return (
    <sectored-wheel
      ref={wheel}
      colors="#7bbbd6;#294b7b;#cae4e3"
      size="600px"
      onClick={click}
      style={{margin: '20px'}}
    >
      {sectors}
    </sectored-wheel>
  );
}

Add [your wrapper name].d.ts file to the same folder, to allow React to recognize the props of the web component

import {DOMAttributes} from 'react';
import {SectoredWheelElement, SectoredWheelItemElement} from 'sectored-wheel';

type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: unknown }>;

declare global {
  namespace JSX {
    interface IntrinsicElements {
      ['sectored-wheel']: CustomElement<SectoredWheelElement>;
      ['sectored-wheel-item']: CustomElement<SectoredWheelItemElement>;
    }
  }
}

Links

CodePen Playground https://codepen.io/webmotoric/pen/JjwQeQR?editors=1001

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge