Add fm-gradient-select

projects/common/src/fm/components/gradient/gradient.component.html

@@ -0,0 +1 @@
+<div class="gradient" [ngStyle]="gradientStyle"></div>

projects/common/src/fm/components/gradient/gradient.component.scss

@@ -0,0 +1,4 @@
+.gradient {
+    height: 100%;
+    width: 100%;
+}

projects/common/src/fm/components/gradient/gradient.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GradientComponent } from './gradient.component';
+
+describe('GradientComponent', () => {
+  let component: GradientComponent;
+  let fixture: ComponentFixture<GradientComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GradientComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GradientComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/common/src/fm/components/gradient/gradient.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input, OnInit ,OnChanges, SimpleChanges,ChangeDetectorRef} from '@angular/core';
+import { IItem} from '../../models/item'
+import { IGradientstop } from '../../models/gradient';
+
+
+
+@Component({
+  selector: 'fm-gradient',
+  templateUrl: './gradient.component.html',
+  styleUrls: ['./gradient.component.scss']
+})
+export class GradientComponent implements OnInit,OnChanges {
+
+  @Input() gradientItem:IItem;
+  public gradientStyle:any = {};
+
+  constructor(private ref: ChangeDetectorRef) { }
+
+  getGradientStyle(item:IItem):any {
+    if(item.data && item.data.gradient) {
+      let gradient = item.data.gradient as IGradientstop[];
+      let gd = '{ "background": "linear-gradient(to right,';
+      for(var i=0;i<gradient.length;i++) {
+        let gs = gradient[i];
+        if(i>0) gd+=",";
+        gd += `rgba(${gs.color.red},${gs.color.green},${gs.color.blue},${gs.color.alpha/255})`;          
+        gd +=` ${gs.relativestop*100}%`
+      }
+      gradient.forEach((gs) => {
+      });
+      gd+=')"}';
+      
+      return JSON.parse(gd);
+    }
+  }
+
+  ngOnInit(): void {
+    if(this.gradientItem && this.gradientItem.itemType == "vnd.farmmaps.itemtype.gradient") {
+      this.gradientStyle = this.getGradientStyle(this.gradientItem);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes['gradientItem']) {
+      let gradientItem = changes['gradientItem'].currentValue;
+      if(gradientItem && gradientItem.itemType == "vnd.farmmaps.itemtype.gradient") {
+        this.gradientStyle = this.getGradientStyle(changes['gradientItem'].currentValue);
+        this.ref.markForCheck();
+      }      
+    }
+  }
+
+}