GradientControl

This library was generated with Angular CLI version 16.1.2.

Description

This Package is fully supported with angular's various version and written in angular. This provide simple drag and drop UI for change gradient colors and it's all properties. Package is configurable with multiple directives and support two way binding.

Preview of control

Preview of Delete Area (Red backgrounded) of control :

Live Demo Here

How to Use Package

Import GradientControlModule into your app.module.ts like Below :

import { GradientControlModule } from 'gradient-control';
.
.
@NgModule({
    imports: [
        ...
        GradientControlModule
    ]
});

In Your HTML Template file of angular, Just Use gradient-control selecter like below :

<gradient-control [(colorArray)]="colors"></gradient-control>

Configuration Options

Events

| Event | Return Type | Purpose | | ---------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | colorArrayChange | colorArray [{ color: string, stop: number, stopInPercent: number, id: number }] | fire when any changes in colorArray using control or assignment (=) in binding variable. | | onColorAdd | colorArray (same as above) | This event will Fire when any new color is added via double click on color Ramp. | | onColorRemove | colorArray (same as above) | This event will Fire when any any color is removed via pull color pin into remove area above the color Ramp. | | onColorControlActivate | object { color: string, stop: number, stopInPercent: number, id: number } | fire when select any color pin via click on color pin. | | onColorSlideStart | colorArray (same as above) | Dispatch event when user start sliding color pin. It will fire only once in cycle of dragStart-dragging-dragEnd | | onColorSliding | colorArray (same as above) | Dispatch event while user sliding color pin. It will fire multiple time when any pin move through mouse. second stage of cycle dragStart-dragging-dragEnd | | onColorSlideEnd | colorArray (same as above) | Dispatch event once when user ends sliding color pin. It will fire only once. third stage of cycle dragStart-dragging-dragEnd |

Service

You can Use GradientControlService for convert color array into gradient css.

import service in your component's constructor and Use it's function like below :

import { GradientControlService } from 'gradient-control';
.
.
.
constructor(public gradientService: GradientControlService) {
    .
    .
    .
}

Convert color Array into css :

    GradientControlService.getGradientCss = function(colorArray, Options: gradientCSSOptions<optional> )

    // Where
    Options: gradientCSSOptions = { 
        type: 'Linear' | 'Radial',      @Optional (default: 'Linear')
        angle: number,                  @Optional (default: 0)
        min: number<minColorStop>,      @Optional (default: 0)
        max: number<maxColorStop>       @Optional (default: 1)
        }

Note : If you used minColorStop and maxColorStop property with your custom boundry value in html with control. then you must have to pass that values into this getGradientCss function like this: service.getGradientCss(colorArray, {minColorStop: number, maxColorStop: number, gradientType: 'Linear' | 'Radial', angle: number<0-360> }).then(...)

Note : Don't use function from service that is start with underscore(_). it's for internal use of library. GradientControlService only provice one function that converts color array into css.

/* 
    below function is fire when colorArrayChnage event will fire from conmponent. check live demo and interect with control. you can check console.log in inspect > console.
*/
colorArrayChange(colorArray) {
    console.log("ColorArrayChange Event", colorArray); <== []
    this.gradientService.getGradientCss(colorArray).then(result => {
      this.backgroundCss = result;
    })
  }

In HTML, Background variable used like this :

    <div [ngStyle]="{'background': backgroundCss}">...</div>

Examples

Fully Functional Control look like this :

<gradient-control 
    [minColors]="3"
    [maxColors]="5"
    [minColorStop]="minColorStop"
    [maxColorStop]="maxColorStop"
    (onColorAdd)="onColorAdd($event)" 
    (onColorRemove)="onColorRemove($event)" 
    (onColorControlActivate)="selectPin($event)" 
    (onColorSlideStart)="onColorSlideStart($event)" 
    (onColorSliding)="onColorSliding($event)" 
    (onColorSlideEnd)="onColorSlideEnd($event)"
    [(colorArray)]="colorArray" 
    (colorArrayChange)="colorArrayChange($event)"
></gradient-control>

Js for above control looks like below:

minColorStop: number = 1
minColorStop: number = 100
colorArray: Array<any> = [
    {color: '#fff', stop: 10 },
    {color: '#f0a', stop: 45 },
    {color: '#00c', stop: 70 }
    {color: '#000', stop: 100 }
]
function onColorAdd(colorArray) {...}
function onColorRemove(colorArray) {...}
function selectPin(singleColorObject) {...}
function onColorSlideStart(colorArray) {...}
function onColorSliding(colorArray) {...}
function onColorSlideEnd(colorArray) {...}
function colorArrayChange(colorArray) {...}

You can checkout repo to see full example code with rotation angle and gradient type changes.

In above merged directive, colorArray variable will be automatic update on value changes.

Help

Each and every things that on a internet is written and develop by someone with lot's of efforts and time. You can empower them to do more and best work for others who can freely use that by Buying them a coffee.

Further help

To get more help on the this Control. Contact me on this email [email protected]