From 3cd23cd5b12161cbc08bab9e71209165115e7fec Mon Sep 17 00:00:00 2001
From: Kameel Zagbhour <kameel.zaghbour@mni.thm.de>
Date: Sat, 1 May 2021 18:47:09 +0200
Subject: [PATCH] dialog layouting
---
package.json | 5 +-
.../participant/participant-routing.module.ts | 6 +
.../cloud-configuration.component.html | 241 +++++++++++-
.../cloud-configuration.component.scss | 75 ++++
.../cloud-configuration.component.ts | 119 +++++-
src/app/components/shared/shared.module.ts | 9 +-
.../shared/tag-cload/tag-cload.component.html | 1 +
.../shared/tag-cload/tag-cload.component.scss | 0
.../tag-cload/tag-cload.component.spec.ts | 25 ++
.../shared/tag-cload/tag-cload.component.ts | 342 ++++++++++++++++++
10 files changed, 807 insertions(+), 16 deletions(-)
create mode 100644 src/app/components/shared/tag-cload/tag-cload.component.html
create mode 100644 src/app/components/shared/tag-cload/tag-cload.component.scss
create mode 100644 src/app/components/shared/tag-cload/tag-cload.component.spec.ts
create mode 100644 src/app/components/shared/tag-cload/tag-cload.component.ts
diff --git a/package.json b/package.json
index e44736bc9..3578000c8 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,9 @@
"core-js": "^2.5.7",
"is-docker": "^1.1.0",
"material-design-icons": "^3.0.1",
- "ngx-markdown": "^11.1.3",
- "ngx-matomo-v9": "^0.3.0",
+ "ngx-color-picker": "^11.0.0",
+ "ngx-markdown": "^9.0.0",
+ "ngx-matomo": "^0.1.4",
"rxjs": "^6.5.4",
"tslib": "^2.0.0",
"typescript-map": "0.0.7",
diff --git a/src/app/components/participant/participant-routing.module.ts b/src/app/components/participant/participant-routing.module.ts
index f12c61ee8..67ff0359d 100644
--- a/src/app/components/participant/participant-routing.module.ts
+++ b/src/app/components/participant/participant-routing.module.ts
@@ -4,6 +4,7 @@ import { UserRole } from '../../models/user-roles.enum';
import { RoomParticipantPageComponent } from './room-participant-page/room-participant-page.component';
import { CommentPageComponent } from '../shared/comment-page/comment-page.component';
import { CommentAnswerComponent } from '../shared/comment-answer/comment-answer.component';
+import { TagCloadComponent } from '../shared/tag-cload/tag-cload.component';
const routes: Routes = [
{
@@ -20,6 +21,11 @@ const routes: Routes = [
path: 'room/:shortId/comment/:commentId',
component: CommentAnswerComponent,
data: { roles: [UserRole.PARTICIPANT] }
+ },
+ {
+ path: 'room/:shortId/tag_cloud',
+ component: TagCloadComponent,
+ data: { roles: [UserRole.PARTICIPANT] }
}
];
diff --git a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
index b0b14f854..0c9fc2052 100644
--- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
+++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
@@ -1,13 +1,11 @@
-<div mat-dialog-content>
- <!--questions-->
- <h2 class="oldtypo-h2">{{'room-page.comments' | translate }}</h2>
+<!-- <div mat-dialog-content>
+ <h2 class="oldtypo-h2">{{title | translate }}</h2>
<mat-divider></mat-divider>
<div fxLayout="column">
<div fxLayout="row">
- <!--direct send-->
<p class="oldtypo-p">{{ 'room-page.settings-direct-send' | translate}}
<mat-slide-toggle
aria-labelledby="settings-direct-send"
@@ -19,7 +17,6 @@
<div fxLayout="column">
<div fxLayout="row">
- <!--comment threshold-->
<p class="oldtypo-p">{{ 'room-page.threshold' | translate}}
<mat-slide-toggle>
aria-labelledby="threshold"
@@ -67,4 +64,238 @@
<div id="settings-direct-send">{{'room-page.a11y-settings-direct-send' | translate}} </div>
<div id="export-comments">{{'room-page.a11y-export-comments' | translate}} </div>
<div id="delete-all-comments">{{'room-page.a11y-delete-all-comments' | translate}} </div>
+</div> -->
+
+<div
+ fxLayout="row"
+ fxLayout.xs="column"
+ fxLayout.sm="column"
+ fxLayoutGap="15px"
+>
+
+ <form [formGroup]="cloudConfigForm" fxLayout="column">
+ <h2>Tag Cloud Configuration</h2>
+
+ <h3>General options</h3>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ <mat-form-field fxFlex fxLayout.xs="column">
+ <input
+ matInput
+ type="number"
+ formControlName="height"
+ placeholder="Height"
+ min="100"
+ max="1000"
+ step="10"
+ />
+ </mat-form-field>
+ </div>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ <mat-slide-toggle fxFlex formControlName="overflow"
+ >Overflow</mat-slide-toggle
+ >
+ <mat-slide-toggle fxFlex formControlName="randomizeAngle"
+ >Randomize angle</mat-slide-toggle
+ >
+ </div>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ <mat-slide-toggle fxFlex formControlName="realignOnResize"
+ >Realign on resize</mat-slide-toggle
+ >
+
+ </div>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ style="padding-top: 20px;"
+ >
+
+ </div>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayout.xs="column"
+ fxLayoutGap="20px"
+ >
+ <div fxFlex="48%" fxFlex.xs="100%">
+ <div fxLayout="row" fxLayoutGap="10px">
+ <mat-form-field fxFlex="80%">
+ <mat-label>Background</mat-label>
+ <input
+ matInput
+ [colorPicker]="
+ cloudConfigForm.get('background').value
+ "
+ (colorPickerChange)="
+ cloudConfigForm
+ .get('background')
+ .setValue($event)
+ "
+ formControlName="background"
+ />
+ </mat-form-field>
+ <div
+ fxFlex="20%"
+ class="color-box"
+ [style.background]="
+ cloudConfigForm.get('background').value
+ "
+ ></div>
+ </div>
+ </div>
+
+ <div fxFlex="50%" fxFlex.xs="100%">
+ <mat-label class="label-text">Delay</mat-label>
+ <mat-slider
+ min="0"
+ max="1000"
+ step="50"
+ formControlName="delay"
+ [thumbLabel]="true"
+ ></mat-slider>
+ </div>
+ </div>
+
+ <h3>Zoom on hover options</h3>
+ <div formGroupName="zoomOnHover">
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayout.xs="column"
+ fxLayoutGap="20px"
+ >
+ <div fxFlex="48%" fxFlex.xs="100%">
+ <div fxLayout="row" fxLayoutGap="10px">
+ <mat-form-field fxFlex="80%">
+ <mat-label>Color</mat-label>
+ <input
+ matInput
+ [colorPicker]="
+ cloudConfigForm.get('zoomOnHover').get('color').value
+ "
+ (colorPickerChange)="
+ cloudConfigForm
+ .get('zoomOnHover')
+ .get('color')
+ .setValue($event)
+ "
+ formControlName="color"
+ />
+ </mat-form-field>
+ <div
+ fxFlex="20%"
+ class="color-box"
+ [style.background]="
+ cloudConfigForm.get('zoomOnHover').get('color').value
+ "
+ ></div>
+ </div>
+ </div>
+
+ <div fxFlex="50%" fxFlex.xs="100%">
+ <mat-label class="label-text">Scale</mat-label>
+ <mat-slider
+ min="1"
+ max="2"
+ step="0.01"
+ formControlName="scale"
+ [thumbLabel]="true"
+ ></mat-slider>
+ </div>
+ </div>
+
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayout.xs="column"
+ fxLayoutGap="20px"
+ >
+ <div fxFlex="50%" fxFlex.xs="100%">
+ <mat-label class="label-text">Time</mat-label>
+ <mat-slider
+ min="0"
+ max="2"
+ step="0.1"
+ formControlName="transitionTime"
+ [thumbLabel]="true"
+ ></mat-slider>
+ </div>
+ <div fxFlex="50%" fxFlex.xs="100%">
+ <mat-label class="label-text">Delay</mat-label>
+ <mat-slider
+ min="0"
+ max="2"
+ step="0.1"
+ formControlName="delay"
+ [thumbLabel]="true"
+ ></mat-slider>
+ </div>
+ </div>
+ </div>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ </div>
+ <!-- <h2>Style</h2> -->
+ <!-- <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ <mat-slide-toggle fxFlex formControlName="customStyle"
+ >Use custom Stylesheet</mat-slide-toggle
+ >
+ </div> -->
+ <!-- <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ <mat-form-field fxFlex>
+ <input matInput formControlName="font" placeholder="Font" />
+ </mat-form-field>
+ </div> -->
+ <!-- <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ <mat-form-field fxFlex>
+ <input
+ matInput
+ formControlName="background"
+ placeholder="Background"
+ />
+ </mat-form-field>
+ </div> -->
+ <br>
+ <div class="button-row">
+ <button mat-button class="secondary">cancel</button>
+ <button mat-button class="primary">Save</button>
+ </div>
+ </form>
+
</div>
diff --git a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
index d30fd4a86..8e5bf0497 100644
--- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
+++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
@@ -43,3 +43,78 @@ mat-divider {
.submit {
margin-top: 20px;
}
+
+.color-box{
+ flex: 1 1 85%;
+ box-sizing: border-box;
+ height: 30px;
+ width: 20px;
+ border-radius: 50%;
+ margin-top: 13px;
+ display: block;
+ position: relative;
+ right: 40px;
+}
+
+::ng-deep .mat-slide-toggle-thumb{
+ background-color: var(--secondary);
+}
+
+::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{
+ background-color: var(--primary);
+}
+
+::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{
+ background-color: var(--primary);
+
+}
+
+::ng-deep .mat-form-field-label {
+ color: var(--on-surface)!important;
+}
+
+::ng-deep .mat-form-field-underline {
+ background-color: var(--on-surface)!important;
+}
+
+::ng-deep .mat-form-field-ripple {
+ background-color: var(--on-surface)!important;
+}
+
+::ng-deep .mat-select-arrow-wrapper .mat-select-arrow {
+ color: var(--on-surface);
+}
+
+::ng-deep .mat-select-value-text {
+ color: var(--on-surface);
+}
+
+::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
+ color: var(--primary);
+}
+
+::ng-deep .mat-accent .mat-slider-track-fill,
+::ng-deep .mat-accent .mat-slider-thumb,
+::ng-deep .mat-accent .mat-slider-thumb-label{
+ background-color: var(--primary);
+}
+
+::ng-deep .mat-accent .mat-slider-thumb-label-text{
+ color: var(--dialog);
+}
+
+::ng-deep .primary{
+ color: var(--dialog);;
+ background-color: var(--primary);
+}
+
+::ng-deep .secondary{
+ color: var(--dialog);;
+ background-color: var(--secondary);
+ margin-right: 20px;
+
+}
+
+.button-row{
+ margin: 0 0 0 auto;
+}
\ No newline at end of file
diff --git a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts
index 32e3449ae..797d801d0 100644
--- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts
+++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts
@@ -1,17 +1,122 @@
-import { Component, OnInit } from '@angular/core';
-import { MatDialogRef } from "@angular/material/dialog";
-import { MatButtonModule } from '@angular/material/button';
+
+
+
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+import { CloudData, CloudOptions, ZoomOnHoverOptions } from 'angular-tag-cloud-module';
+
+import { Observable, of } from 'rxjs';
@Component({
selector: 'app-cloud-configuration',
templateUrl: './cloud-configuration.component.html',
- styleUrls: ['./cloud-configuration.component.scss']
+ styleUrls: ['./cloud-configuration.component.scss'],
})
export class CloudConfigurationComponent implements OnInit {
- constructor(public dialogRef: MatDialogRef<CloudConfigurationComponent>) { }
+ cloudDataForm: FormGroup;
+ cloudConfigForm: FormGroup;
+ data: CloudData[] = [];
+ title: String = "Cloud Configuration"
+ height: number = 400;
+ overflow: boolean = false;
+ realignonResize: boolean = true;
+ randomizeAngle: boolean = true;
+ background: string = "#333";
+ delay: number = 1;
+
+ hoverScale: number = 2;
+ hoverTransitionTime: number = 1;
+ hoverDelay: number = 1;
+ hoverColor: string = "lightseagreen";
+
+ defaultCloudOptions: CloudOptions = {
+ width: 0.98,
+ height: 500,
+ overflow: false,
+ strict: false,
+ realignOnResize: true,
+ randomizeAngle: true,
+ zoomOnHover: {
+ scale: 1.2,
+ transitionTime: 0.6,
+ delay: 0.1,
+ color: '#33bb33',
+ },
+ step: 5,
+ log: 'debug',
+ delay: 50,
+ };
+
+ exampleDataOptions = {
+ amount: 40,
+ rotate: true,
+ data: JSON.stringify(this.data, null, 2),
+ };
+
+ constructor(private fb: FormBuilder, private snackBar: MatSnackBar) {}
+
+ ngOnInit() {
+ this.cloudDataForm = this.fb.group({
+ ...this.exampleDataOptions,
+ });
+
+ this.cloudConfigForm = this.fb.group({
+ ...this.defaultCloudOptions,
+ zoomOnHover: this.fb.group(this.defaultCloudOptions.zoomOnHover),
+ customStyle: true,
+ background: '#2C2C2C',
+ font: 'italic bold 14px "Indie Flower", cursive',
+ });
- ngOnInit(): void {
}
-}
+ log(eventType: string, e?: CloudData) {
+ console.log(eventType, e);
+ }
+
+
+
+ renderJsonData() {
+ try {
+ this.data = JSON.parse(this.cloudDataForm.value.data);
+ } catch (error) {
+ this.snackBar.open(error, 'Ok, got it!', {
+ duration: 2500,
+ });
+ }
+ }
+
+ reDraw() {
+ let data: CloudData[] = [];
+ try {
+ data = JSON.parse(this.cloudDataForm.value.data);
+ } catch (error) {
+ this.snackBar.open(
+ 'Error parsing JSON. Fall back to random data.' + error,
+ 'Ok, got it!',
+ {
+ duration: 3000,
+ },
+ );
+ }
+
+ const changedData$: Observable<CloudData[]> = of(data);
+ changedData$.subscribe((res) => this.setData(res));
+ }
+
+ private setData(data: CloudData[]) {
+ this.data = data;
+ this.cloudDataForm.get('data').setValue(JSON.stringify(this.data, null, 2));
+ }
+
+ public cancel(){
+
+ }
+
+ public save (){
+
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts
index d014143ce..a1b4fd659 100644
--- a/src/app/components/shared/shared.module.ts
+++ b/src/app/components/shared/shared.module.ts
@@ -30,6 +30,9 @@ import { MotdDialogComponent } from './_dialogs/motd-dialog/motd-dialog.componen
import { MotdMessageComponent } from './_dialogs/motd-dialog/motd-message/motd-message.component';
import { TagCloudModule } from 'angular-tag-cloud-module';
import {CloudConfigurationComponent} from "./_dialogs/cloud-configuration/cloud-configuration.component";
+import { TagCloudModule } from 'angular-tag-cloud-module';
+import { TagCloadComponent } from './tag-cload/tag-cload.component';
+import { ColorPickerModule } from 'ngx-color-picker';
@NgModule({
imports: [
@@ -40,7 +43,8 @@ import {CloudConfigurationComponent} from "./_dialogs/cloud-configuration/cloud-
ArsModule,
MarkdownModule,
QRCodeModule,
- TagCloudModule
+ TagCloudModule,
+ ColorPickerModule
],
declarations: [
RoomJoinComponent,
@@ -65,7 +69,8 @@ import {CloudConfigurationComponent} from "./_dialogs/cloud-configuration/cloud-
RemoveFromHistoryComponent,
CommentAnswerComponent,
MotdDialogComponent,
- MotdMessageComponent
+ MotdMessageComponent,
+ TagCloadComponent
],
exports: [
RoomJoinComponent,
diff --git a/src/app/components/shared/tag-cload/tag-cload.component.html b/src/app/components/shared/tag-cload/tag-cload.component.html
new file mode 100644
index 000000000..1cd490fab
--- /dev/null
+++ b/src/app/components/shared/tag-cload/tag-cload.component.html
@@ -0,0 +1 @@
+ <h1>Tag Cloud</h1>
\ No newline at end of file
diff --git a/src/app/components/shared/tag-cload/tag-cload.component.scss b/src/app/components/shared/tag-cload/tag-cload.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/components/shared/tag-cload/tag-cload.component.spec.ts b/src/app/components/shared/tag-cload/tag-cload.component.spec.ts
new file mode 100644
index 000000000..6c3eec944
--- /dev/null
+++ b/src/app/components/shared/tag-cload/tag-cload.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TagCloadComponent } from './tag-cload.component';
+
+describe('TagCloadComponent', () => {
+ let component: TagCloadComponent;
+ let fixture: ComponentFixture<TagCloadComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TagCloadComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TagCloadComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/shared/tag-cload/tag-cload.component.ts b/src/app/components/shared/tag-cload/tag-cload.component.ts
new file mode 100644
index 000000000..83043d2e7
--- /dev/null
+++ b/src/app/components/shared/tag-cload/tag-cload.component.ts
@@ -0,0 +1,342 @@
+import { Component, OnInit } from '@angular/core';
+import { CloudData, CloudOptions, ZoomOnHoverOptions } from 'angular-tag-cloud-module';
+
+@Component({
+ selector: 'app-tag-cload',
+ template: `<div>
+ <mat-checkbox [(ngModel)]="options.randomizeAngle" class="example-margin">Random Angle</mat-checkbox>
+ <angular-tag-cloud
+ [data]="exampleData"
+ [width]="options.width"
+ [height]="options.height"
+ [randomizeAngle]= "options.randomizeAngle"
+ [overflow]="options.overflow">
+ </angular-tag-cloud>
+ </div>`,
+ styleUrls: ['./tag-cload.component.scss']
+})
+export class TagCloadComponent implements OnInit {
+
+ public exampleData = [
+ {
+ "text": "w9",
+ "weight": 9,
+ "rotate": -18,
+ "tooltip": "tooltip w9"
+ },
+ {
+ "text": "w7",
+ "weight": 7,
+ "rotate": 0,
+ "tooltip": "tooltip w7"
+ },
+ {
+ "text": "w10-link-ext",
+ "weight": 10,
+ "link": "http://example.org",
+ "external": true,
+ "rotate": -13,
+ "tooltip": "tooltip w10-link-ext"
+ },
+ {
+ "text": "w2-color-link",
+ "weight": 2,
+ "color": "#1ea15",
+ "link": "http://example.org",
+ "rotate": 16,
+ "tooltip": "tooltip w2-color-link"
+ },
+ {
+ "text": "w9",
+ "weight": 9,
+ "rotate": -17,
+ "tooltip": "tooltip w9"
+ },
+ {
+ "text": "w3-link-ext",
+ "weight": 3,
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w3-link-ext"
+ },
+ {
+ "text": "w2",
+ "weight": 2,
+ "rotate": 0,
+ "tooltip": "tooltip w2"
+ },
+ {
+ "text": "w1-link-ext",
+ "weight": 1,
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w1-link-ext"
+ },
+ {
+ "text": "w2-color-link-ext",
+ "weight": 2,
+ "color": "#53adbf",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w2-color-link-ext"
+ },
+ {
+ "text": "w6-color-link-ext",
+ "weight": 6,
+ "color": "#aff0ba",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w6-color-link-ext"
+ },
+ {
+ "text": "w3-color-link",
+ "weight": 3,
+ "color": "#7e8a34",
+ "link": "http://example.org",
+ "rotate": -12,
+ "tooltip": "tooltip w3-color-link"
+ },
+ {
+ "text": "w4",
+ "weight": 4,
+ "rotate": 0,
+ "tooltip": "tooltip w4"
+ },
+ {
+ "text": "w3-color",
+ "weight": 3,
+ "color": "#f3ff87",
+ "rotate": 0,
+ "tooltip": "tooltip w3-color"
+ },
+ {
+ "text": "w9",
+ "weight": 9,
+ "rotate": 2,
+ "tooltip": "tooltip w9"
+ },
+ {
+ "text": "w1-color",
+ "weight": 1,
+ "color": "#7c2789",
+ "rotate": 16,
+ "tooltip": "tooltip w1-color"
+ },
+ {
+ "text": "w10-color-link-ext",
+ "weight": 10,
+ "color": "#64dc80",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w10-color-link-ext"
+ },
+ {
+ "text": "w3",
+ "weight": 3,
+ "rotate": 0,
+ "tooltip": "tooltip w3"
+ },
+ {
+ "text": "w4",
+ "weight": 4,
+ "rotate": 0,
+ "tooltip": "tooltip w4"
+ },
+ {
+ "text": "w1-link-ext",
+ "weight": 1,
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 17,
+ "tooltip": "tooltip w1-link-ext"
+ },
+ {
+ "text": "w5-color-link",
+ "weight": 5,
+ "color": "#9b9444",
+ "link": "http://example.org",
+ "rotate": 0,
+ "tooltip": "tooltip w5-color-link"
+ },
+ {
+ "text": "w10-color-link-ext",
+ "weight": 10,
+ "color": "#f7c39a",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 16,
+ "tooltip": "tooltip w10-color-link-ext"
+ },
+ {
+ "text": "w4-link",
+ "weight": 4,
+ "link": "http://example.org",
+ "rotate": 0,
+ "tooltip": "tooltip w4-link"
+ },
+ {
+ "text": "w7-link",
+ "weight": 7,
+ "link": "http://example.org",
+ "rotate": 0,
+ "tooltip": "tooltip w7-link"
+ },
+ {
+ "text": "w2",
+ "weight": 2,
+ "rotate": -2,
+ "tooltip": "tooltip w2"
+ },
+ {
+ "text": "w8-color-link",
+ "weight": 8,
+ "color": "#e6b63f",
+ "link": "http://example.org",
+ "rotate": 2,
+ "tooltip": "tooltip w8-color-link"
+ },
+ {
+ "text": "w8-color-link-ext",
+ "weight": 8,
+ "color": "#d7e6fc",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w8-color-link-ext"
+ },
+ {
+ "text": "w5",
+ "weight": 5,
+ "rotate": 12,
+ "tooltip": "tooltip w5"
+ },
+ {
+ "text": "w7-color-link",
+ "weight": 7,
+ "color": "#975717",
+ "link": "http://example.org",
+ "rotate": 0,
+ "tooltip": "tooltip w7-color-link"
+ },
+ {
+ "text": "w8-color-link-ext",
+ "weight": 8,
+ "color": "#25d1be",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": -16,
+ "tooltip": "tooltip w8-color-link-ext"
+ },
+ {
+ "text": "w9",
+ "weight": 9,
+ "rotate": 0,
+ "tooltip": "tooltip w9"
+ },
+ {
+ "text": "w3-color-link-ext",
+ "weight": 3,
+ "color": "#9d7e63",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w3-color-link-ext"
+ },
+ {
+ "text": "w9-color-link-ext",
+ "weight": 9,
+ "color": "#16093e",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w9-color-link-ext"
+ },
+ {
+ "text": "w3-color",
+ "weight": 3,
+ "color": "#3674cd",
+ "rotate": 0,
+ "tooltip": "tooltip w3-color"
+ },
+ {
+ "text": "w10-color-link",
+ "weight": 10,
+ "color": "#fcd7f1",
+ "link": "http://example.org",
+ "rotate": 0,
+ "tooltip": "tooltip w10-color-link"
+ },
+ {
+ "text": "w4-color-link-ext",
+ "weight": 4,
+ "color": "#a0976a",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w4-color-link-ext"
+ },
+ {
+ "text": "w1-color",
+ "weight": 1,
+ "color": "#120e75",
+ "rotate": 0,
+ "tooltip": "tooltip w1-color"
+ },
+ {
+ "text": "w8-color",
+ "weight": 8,
+ "color": "#58fb55",
+ "rotate": 0,
+ "tooltip": "tooltip w8-color"
+ },
+ {
+ "text": "w3-color-link-ext",
+ "weight": 3,
+ "color": "#354f70",
+ "link": "http://example.org",
+ "external": true,
+ "rotate": 0,
+ "tooltip": "tooltip w3-color-link-ext"
+ },
+ {
+ "text": "w3",
+ "weight": 3,
+ "rotate": 0,
+ "tooltip": "tooltip w3"
+ },
+ {
+ "text": "w8-color",
+ "weight": 8,
+ "color": "#d31e8f",
+ "rotate": 0,
+ "tooltip": "tooltip w8-color"
+ }
+ ];
+
+ options: CloudOptions = {
+ // if width is between 0 and 1 it will be set to the width of the upper element multiplied by the value
+ width: 1000,
+ // if height is between 0 and 1 it will be set to the height of the upper element multiplied by the value
+ height: 500,
+ overflow: false,
+ randomizeAngle: false
+ };
+
+ zoomOnHoverOptions: ZoomOnHoverOptions = {
+ scale: 2,
+ transitionTime: 2,
+ color: "#123456"
+ }
+
+ constructor() { }
+
+ ngOnInit(): void {
+
+ }
+
+}
--
GitLab