mirror of https://github.com/Squidex/squidex.git
Sebastian
10 years ago
51 changed files with 171 additions and 2477 deletions
@ -0,0 +1,41 @@ |
|||
// ==========================================================================
|
|||
// WrongEventVersionException.cs
|
|||
// Squidex Headless CMS
|
|||
// ==========================================================================
|
|||
// Copyright (c) Squidex Group
|
|||
// All rights reserved.
|
|||
// ==========================================================================
|
|||
|
|||
using System; |
|||
|
|||
namespace Squidex.Infrastructure.CQRS.Events |
|||
{ |
|||
public class WrongEventVersionException : Exception |
|||
{ |
|||
private readonly int currentVersion; |
|||
private readonly int expectedVersion; |
|||
|
|||
public int CurrentVersion |
|||
{ |
|||
get { return currentVersion; } |
|||
} |
|||
|
|||
public int ExpectedVersion |
|||
{ |
|||
get { return expectedVersion; } |
|||
} |
|||
|
|||
public WrongEventVersionException(int currentVersion, int expectedVersion) |
|||
: base(FormatMessage(currentVersion, expectedVersion)) |
|||
{ |
|||
this.currentVersion = currentVersion; |
|||
|
|||
this.expectedVersion = expectedVersion; |
|||
} |
|||
|
|||
private static string FormatMessage(int currentVersion, int expectedVersion) |
|||
{ |
|||
return $"Requested version {expectedVersion}, but found {currentVersion}."; |
|||
} |
|||
} |
|||
} |
|||
@ -1,30 +0,0 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
/* tslint:disable ordered-imports */ |
|||
import { RouterModule, provideRoutes } from '@angular/router'; |
|||
import { RouterTestingModule } from '@angular/router/testing'; |
|||
|
|||
import { AppComponent } from './app.component'; |
|||
|
|||
describe('App', () => { |
|||
beforeEach(() => { |
|||
TestBed.configureTestingModule({ |
|||
declarations: [ |
|||
AppComponent |
|||
], |
|||
imports: [ |
|||
RouterModule, |
|||
RouterTestingModule |
|||
], |
|||
providers: [ |
|||
provideRoutes([]) |
|||
] |
|||
}); |
|||
}); |
|||
|
|||
it('should work', () => { |
|||
const fixture = TestBed.createComponent(AppComponent); |
|||
|
|||
expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent'); |
|||
}); |
|||
}); |
|||
@ -1,65 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Subject } from 'rxjs'; |
|||
|
|||
import { Action } from './../'; |
|||
|
|||
class MockupObject { |
|||
public isDestroyCalled = false; |
|||
|
|||
@Action() |
|||
public event1 = new Subject<string>().map(_ => { return { type: 'MOCK_ACTION' }; }); |
|||
|
|||
@Action() |
|||
public event2 = new Subject<string>().map(_ => { return { type: 'MOCK_ACTION' }; }); |
|||
|
|||
constructor(private readonly store: any) { } |
|||
|
|||
public log() { |
|||
this.store.log(); |
|||
} |
|||
|
|||
public init() { |
|||
this.event2 = new Subject<string>().map(_ => { return { type: 'MOCK_ACTION' }; }); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.isDestroyCalled = true; |
|||
} |
|||
} |
|||
|
|||
describe('Action', () => { |
|||
it('should make complete flow to subscribe and unsubscribe and to trigger actions', () => { |
|||
let dispatchCount = 0; |
|||
|
|||
const state = { |
|||
next: (e: any) => { |
|||
dispatchCount++; |
|||
|
|||
expect(e.type).toBe('MOCK_ACTION'); |
|||
} |
|||
}; |
|||
|
|||
const mock = new MockupObject(state); |
|||
|
|||
mock.init(); |
|||
|
|||
(<any>mock.event1).next('TEST'); |
|||
(<any>mock.event2).next('TEST'); |
|||
|
|||
expect(dispatchCount).toBe(2); |
|||
|
|||
mock.ngOnDestroy(); |
|||
|
|||
(<any>mock.event1).next('TEST'); |
|||
(<any>mock.event2).next('TEST'); |
|||
|
|||
expect(dispatchCount).toBe(2); |
|||
expect(mock.isDestroyCalled).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -1,72 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
/* tslint:disable:no-empty */ |
|||
/* tslint:disable:only-arrow-functions */ |
|||
|
|||
const EMPTY_FUNC = () => {}; |
|||
|
|||
export function Action() { |
|||
return function (target: any, key: string) { |
|||
let observable: any; |
|||
let instance: any; |
|||
let subscriptions: any; |
|||
let subscription: any; |
|||
|
|||
function subscribe() { |
|||
const store = instance.store; |
|||
|
|||
if (store && observable && observable.subscribe && typeof observable.subscribe === 'function') { |
|||
subscription = observable.subscribe((a: any) => { if (a) { store.next(a); } }); |
|||
|
|||
subscriptions.push(subscription); |
|||
} |
|||
}; |
|||
|
|||
function unsubscribe() { |
|||
if (subscription) { |
|||
subscription.unsubscribe(); |
|||
|
|||
subscriptions.splice(subscriptions.indexOf(subscribe), 1); |
|||
} |
|||
}; |
|||
|
|||
if (delete target[key]) { |
|||
Object.defineProperty(target, key, { |
|||
get: function () { |
|||
return observable; |
|||
}, |
|||
set: function (v) { |
|||
instance = this; |
|||
|
|||
if (!instance.___subscriptions) { |
|||
instance.___subscriptions = []; |
|||
|
|||
let destroy = instance.ngOnDestroy ? instance.ngOnDestroy.bind(instance) : EMPTY_FUNC; |
|||
|
|||
instance.ngOnDestroy = () => { |
|||
for (let s of subscriptions) { |
|||
s.unsubscribe(); |
|||
} |
|||
|
|||
instance.___subscriptions = null; |
|||
|
|||
destroy(); |
|||
}; |
|||
} |
|||
|
|||
subscriptions = instance.___subscriptions; |
|||
|
|||
observable = v; |
|||
|
|||
unsubscribe(); |
|||
subscribe(); |
|||
} |
|||
}); |
|||
} |
|||
}; |
|||
} |
|||
@ -1,11 +0,0 @@ |
|||
<div class="btn-group" [class.open]="isOpen"> |
|||
<button type="button" class="btn btn-secondary btn-sm" [disabled]="isDisabled" (click)="toggleOpen()" [style.background]="selectedColor.toString()"></button> |
|||
|
|||
<div class="dropdown-menu dropdown-menu-{{dropdownSide}}"> |
|||
<div class="color-palette"> |
|||
<span *ngFor="let color of palette.colors" class="color-palette-box" (click)="selectColor(color)" [class.selected]="selectedColor && color.eq(selectedColor)"> |
|||
<span class="color-palette-color" [style.background]="color.toString()"></span> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,68 +0,0 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
$color-size: 24px; |
|||
$color-button: #1875cc; |
|||
$color-button-hover: #1460a8; |
|||
$color-border: #fff; |
|||
$button-size: 1.81rem; |
|||
|
|||
.color-palette { |
|||
& { |
|||
@include clearfix; |
|||
padding: 6px; |
|||
width: 8 * ($color-size + 6); |
|||
} |
|||
|
|||
&-box { |
|||
& { |
|||
border: 2px solid transparent; |
|||
margin: 2px; |
|||
height: $color-size; |
|||
width: $color-size; |
|||
float: left; |
|||
} |
|||
|
|||
&:hover { |
|||
border-color: $color-button-hover; |
|||
} |
|||
|
|||
&.selected { |
|||
& { |
|||
border-color: $color-button; |
|||
} |
|||
|
|||
&:hover { |
|||
border-color: $color-button; |
|||
} |
|||
} |
|||
|
|||
&.disabled { |
|||
border-color: transparent; |
|||
} |
|||
} |
|||
|
|||
&-color { |
|||
border: 1px solid $color-border; |
|||
width: $color-size - 4; |
|||
height: $color-size - 4; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.dropdown-menu { |
|||
background: $color-border; |
|||
} |
|||
|
|||
.btn-group { |
|||
> .btn { |
|||
&:first-child { |
|||
@include border-radius(.25em); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
width: $button-size; |
|||
height: $button-size; |
|||
} |
|||
@ -1,117 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Color } from './../'; |
|||
import { ColorPickerComponent } from './color-picker.component'; |
|||
|
|||
describe('ColorPickerComponent', () => { |
|||
it('should instantiate', () => { |
|||
const colorPicker = new ColorPickerComponent({ nativeElement: {} }); |
|||
|
|||
expect(colorPicker).toBeDefined(); |
|||
}); |
|||
|
|||
it('should close color picker when clicking outside of the modal', () => { |
|||
const element = { |
|||
nativeElement: { |
|||
contains: () => { |
|||
return false; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const colorPicker = new ColorPickerComponent(element); |
|||
colorPicker.open(); |
|||
colorPicker.onClick({}); |
|||
|
|||
expect(colorPicker.isOpen).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should not close color picker when clicking inside the modal', () => { |
|||
const element = { |
|||
nativeElement: { |
|||
contains: () => { |
|||
return true; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const colorPicker = new ColorPickerComponent(element); |
|||
colorPicker.open(); |
|||
colorPicker.onClick({}); |
|||
|
|||
expect(colorPicker.isOpen).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should close modal and emit event when setting color', () => { |
|||
const colorPicker = new ColorPickerComponent({ nativeElement: {} }); |
|||
const selectedColor = Color.RED; |
|||
|
|||
let lastColor: Color | null = null; |
|||
|
|||
colorPicker.registerOnChange((c: Color) => { |
|||
lastColor = c; |
|||
}); |
|||
|
|||
colorPicker.open(); |
|||
colorPicker.selectColor(selectedColor); |
|||
|
|||
expect(lastColor).toBe(selectedColor); |
|||
expect(colorPicker.isOpen).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should not emit event when selecting same color', () => { |
|||
const colorPicker = new ColorPickerComponent({ nativeElement: {} }); |
|||
const selectedColor = Color.RED; |
|||
|
|||
colorPicker.selectColor(selectedColor); |
|||
|
|||
let lastColor: Color | null = null; |
|||
|
|||
colorPicker.registerOnChange((c: Color) => { |
|||
lastColor = c; |
|||
}); |
|||
|
|||
colorPicker.selectColor(selectedColor); |
|||
|
|||
expect(lastColor).toBeNull(); |
|||
}); |
|||
|
|||
it('should update selected color when writing value', () => { |
|||
const colorPicker = new ColorPickerComponent({ nativeElement: {} }); |
|||
const selectedColor = Color.RED; |
|||
|
|||
colorPicker.writeValue(selectedColor); |
|||
|
|||
expect(colorPicker.selectedColor).toBe(selectedColor); |
|||
}); |
|||
|
|||
it('should update selected color with palette default if setting invalid color', () => { |
|||
const colorPicker = new ColorPickerComponent({ nativeElement: {} }); |
|||
|
|||
colorPicker.writeValue('invalid'); |
|||
|
|||
expect(colorPicker.selectedColor).toBe(colorPicker.palette.defaultColor); |
|||
}); |
|||
|
|||
it('should update selected color with black if setting invalid color and palette is null', () => { |
|||
const colorPicker = new ColorPickerComponent({ nativeElement: {} }); |
|||
|
|||
colorPicker.palette = undefined!; |
|||
colorPicker.writeValue('invalid'); |
|||
|
|||
expect(colorPicker.selectedColor).toBe(Color.BLACK); |
|||
}); |
|||
|
|||
it('should update isOpen prperty when toggleOpen is invoked', () => { |
|||
const colorPicker = new ColorPickerComponent({ nativeElement: {} }); |
|||
|
|||
colorPicker.toggleOpen(); |
|||
|
|||
expect(colorPicker.isOpen).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -1,125 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Component, ElementRef, forwardRef, HostListener, Input } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
import { Color } from './../utils/color'; |
|||
import { ColorPalette } from './../utils/color-palette'; |
|||
|
|||
/* tslint:disable:no-empty */ |
|||
|
|||
const NOOP = () => { }; |
|||
|
|||
export const SQX_COLOR_PICKER_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => ColorPickerComponent), |
|||
multi: true |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-color-picker', |
|||
styleUrls: ['./color-picker.component.scss'], |
|||
templateUrl: './color-picker.component.html', |
|||
providers: [SQX_COLOR_PICKER_CONTROL_VALUE_ACCESSOR] |
|||
}) |
|||
export class ColorPickerComponent implements ControlValueAccessor { |
|||
private changeCallback: (value: any) => void = NOOP; |
|||
private touchedCallback: () => void = NOOP; |
|||
|
|||
public selectedColor: Color = Color.BLACK; |
|||
|
|||
@Input() |
|||
public palette = ColorPalette.colors(); |
|||
|
|||
@Input() |
|||
public dropdownSide: 'left'; |
|||
|
|||
@Input() |
|||
public isOpen = false; |
|||
|
|||
@Input() |
|||
public isDisabled = false; |
|||
|
|||
constructor(private readonly element: ElementRef) { |
|||
this.updateColor(Color.BLACK); |
|||
} |
|||
|
|||
public writeValue(value: any) { |
|||
this.updateColor(value); |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.isDisabled = isDisabled; |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.changeCallback = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.touchedCallback = fn; |
|||
} |
|||
|
|||
@HostListener('document:click', ['$event.target']) |
|||
public onClick(targetElement: any) { |
|||
const clickedInside = this.element.nativeElement.contains(targetElement); |
|||
|
|||
if (!clickedInside) { |
|||
this.close(); |
|||
} |
|||
} |
|||
|
|||
public toggleOpen() { |
|||
if (this.isOpen) { |
|||
this.close(); |
|||
} else { |
|||
this.open(); |
|||
} |
|||
} |
|||
|
|||
public open() { |
|||
this.isOpen = true; |
|||
} |
|||
|
|||
public close() { |
|||
this.isOpen = false; |
|||
|
|||
this.touchedCallback(); |
|||
} |
|||
|
|||
public selectColor(color: Color) { |
|||
this.updateParent(color); |
|||
this.updateColor(color); |
|||
this.close(); |
|||
} |
|||
|
|||
private updateParent(color: Color) { |
|||
if (this.selectedColor.ne(color)) { |
|||
this.changeCallback(color); |
|||
} |
|||
} |
|||
|
|||
private updateColor(color: Color) { |
|||
let hasColor = false; |
|||
try { |
|||
this.selectedColor = Color.fromValue(color); |
|||
|
|||
hasColor = true; |
|||
} catch (e) { |
|||
hasColor = false; |
|||
} |
|||
|
|||
if (!hasColor || !this.selectedColor) { |
|||
if (this.palette) { |
|||
this.selectedColor = this.palette.defaultColor; |
|||
} else { |
|||
this.selectedColor = Color.BLACK; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,118 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Directive, ElementRef, HostListener, Input, Renderer }from '@angular/core'; |
|||
|
|||
import { DragService } from './../services/drag.service'; |
|||
import { Vec2 } from './../utils/vec2'; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxDragModel]' |
|||
}) |
|||
export class DragModelDirective { |
|||
private startOffset: Vec2; |
|||
private startPosition: Vec2; |
|||
private mouseMoveSubscription: Function | null; |
|||
private mouseUpSubscription: Function | null; |
|||
private clonedElement: HTMLElement | null; |
|||
|
|||
@Input('sqxDragModel') |
|||
public model: any; |
|||
|
|||
constructor( |
|||
private readonly element: ElementRef, |
|||
private readonly renderer: Renderer, |
|||
private readonly dragService: DragService |
|||
) { |
|||
} |
|||
|
|||
@HostListener('mousedown', ['$event']) |
|||
public onMouseDown(event: MouseEvent) { |
|||
this.startOffset = new Vec2(event.offsetX, event.offsetY); |
|||
this.startPosition = new Vec2(event.clientX, event.clientY); |
|||
|
|||
this.mouseMoveSubscription = |
|||
this.renderer.listenGlobal('window', 'mousemove', (e: MouseEvent) => { |
|||
this.onMouseMove(e); |
|||
}); |
|||
|
|||
this.mouseUpSubscription = |
|||
this.renderer.listenGlobal('window', 'mouseup', (e: MouseEvent) => { |
|||
this.onMouseUp(e); |
|||
}); |
|||
|
|||
this.stopEvent(event); |
|||
} |
|||
|
|||
private onMouseMove(event: MouseEvent) { |
|||
const position = new Vec2(event.clientX, event.clientY); |
|||
|
|||
if (!this.clonedElement && position.sub(this.startPosition).lengtSquared > 100) { |
|||
this.clonedElement = this.element.nativeElement.cloneNode(true); |
|||
|
|||
this.clonedElement!.style.position = 'fixed'; |
|||
this.clonedElement!.style.zIndex = '10000'; |
|||
|
|||
document.body.appendChild(this.clonedElement!); |
|||
} |
|||
|
|||
if (this.clonedElement) { |
|||
const elementPosition = position.sub(this.startOffset); |
|||
|
|||
this.clonedElement.style.left = elementPosition.x + 'px'; |
|||
this.clonedElement.style.top = elementPosition.y + 'px'; |
|||
} |
|||
|
|||
this.stopEvent(event); |
|||
} |
|||
|
|||
private onMouseUp(event: MouseEvent) { |
|||
if (this.clonedElement) { |
|||
this.clonedElement.remove(); |
|||
} |
|||
|
|||
let dropCandidate: Element | null = document.elementFromPoint(event.clientX, event.clientY); |
|||
|
|||
while (dropCandidate && (dropCandidate.classList && !dropCandidate.classList.contains('sqx-drop'))) { |
|||
dropCandidate = dropCandidate.parentNode as Element; |
|||
} |
|||
|
|||
if (dropCandidate && dropCandidate.id) { |
|||
const position = this.getRelativeCoordinates(event, dropCandidate).sub(this.startOffset).round(); |
|||
|
|||
this.dragService.emitDrop({ position, model: this.model, dropTarget: dropCandidate.id }); |
|||
} |
|||
|
|||
if (this.mouseMoveSubscription) { |
|||
this.mouseMoveSubscription(); |
|||
this.mouseMoveSubscription = null; |
|||
} |
|||
|
|||
if (this.mouseUpSubscription) { |
|||
this.mouseUpSubscription(); |
|||
this.mouseUpSubscription = null; |
|||
} |
|||
|
|||
this.clonedElement = null; |
|||
|
|||
this.stopEvent(event); |
|||
} |
|||
|
|||
private stopEvent(event: Event) { |
|||
event.preventDefault(); |
|||
event.stopPropagation(); |
|||
} |
|||
|
|||
private getRelativeCoordinates(e: any, container: any): Vec2 { |
|||
const rect = container.getBoundingClientRect(); |
|||
|
|||
const x = !!e.touches ? e.touches[0].pageX : e.pageX; |
|||
const y = !!e.touches ? e.touches[0].pageY : e.pageY; |
|||
|
|||
return new Vec2(x - rect.left, y - rect.top); |
|||
} |
|||
} |
|||
@ -1,128 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Directive, ElementRef, HostListener } from '@angular/core'; |
|||
|
|||
import { DragService } from './../services/drag.service'; |
|||
import { Vec2 } from './../utils/vec2'; |
|||
|
|||
@Directive({ |
|||
selector: '.sqx-image-drop' |
|||
}) |
|||
export class ImageDropDirective { |
|||
constructor( |
|||
private readonly element: ElementRef, |
|||
private readonly dragService: DragService |
|||
) { |
|||
} |
|||
|
|||
@HostListener('dragenter', ['$event']) |
|||
public onDragEnter(event: DragDropEvent) { |
|||
this.tryStopEvent(event); |
|||
} |
|||
|
|||
@HostListener('dragover', ['$event']) |
|||
public onDragOver(event: DragDropEvent) { |
|||
this.tryStopEvent(event); |
|||
} |
|||
|
|||
@HostListener('drop', ['$event']) |
|||
public onDrop(event: DragDropEvent) { |
|||
const image = this.findImage(event); |
|||
|
|||
if (!image) { |
|||
return; |
|||
} |
|||
|
|||
const position = this.getRelativeCoordinates(event, this.element.nativeElement).round(); |
|||
|
|||
const reader = new FileReader(); |
|||
|
|||
reader.onload = (loadedFile: any) => { |
|||
const imageSource: string = loadedFile.target.result; |
|||
const imageElement = document.createElement('img'); |
|||
|
|||
imageElement.onload = () => { |
|||
this.dragService.emitDrop({ |
|||
position, dropTarget: this.element.nativeElement.id, model: { |
|||
sizeX: imageElement.width, |
|||
sizeY: imageElement.height, |
|||
source: imageSource |
|||
} |
|||
}); |
|||
}; |
|||
imageElement.src = imageSource; |
|||
}; |
|||
reader.readAsDataURL(image); |
|||
|
|||
this.stopEvent(event); |
|||
} |
|||
|
|||
private stopEvent(event: Event) { |
|||
event.preventDefault(); |
|||
event.stopPropagation(); |
|||
} |
|||
|
|||
private tryStopEvent(event: DragDropEvent) { |
|||
const hasFiles = this.hasFiles(event.dataTransfer.types); |
|||
|
|||
if (!hasFiles) { |
|||
return; |
|||
} |
|||
|
|||
this.stopEvent(event); |
|||
} |
|||
|
|||
private hasFiles(types: any): boolean { |
|||
if (!types) { |
|||
return false; |
|||
} |
|||
|
|||
if (isFunction(types.indexOf)) { |
|||
return types.indexOf('Files') !== -1; |
|||
} else if (isFunction(types.contains)) { |
|||
return types.contains('Files'); |
|||
} else { |
|||
return false; |
|||
} |
|||
} |
|||
|
|||
private findImage(event: DragDropEvent): File | null { |
|||
let image: File | null = null; |
|||
|
|||
/* tslint:disable:prefer-for-of */ |
|||
for (let i = 0; i < event.dataTransfer.files.length; i++) { |
|||
const file = event.dataTransfer.files[i]; |
|||
|
|||
if (file.type.match('image.*')) { |
|||
image = file; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
return image; |
|||
} |
|||
|
|||
private getRelativeCoordinates(e: any, container: any): Vec2 { |
|||
const rect = container.getBoundingClientRect(); |
|||
|
|||
const pos = { x: 0, y: 0 }; |
|||
|
|||
pos.x = !!e.touches ? e.touches[0].pageX : e.pageX; |
|||
pos.y = !!e.touches ? e.touches[0].pageY : e.pageY; |
|||
|
|||
return new Vec2(pos.x - rect.left, pos.y - rect.top); |
|||
} |
|||
} |
|||
|
|||
function isFunction(obj: any): boolean { |
|||
return !!(obj && obj.constructor && obj.call && obj.apply); |
|||
}; |
|||
|
|||
export interface DragDropEvent extends MouseEvent { |
|||
readonly dataTransfer: DataTransfer; |
|||
} |
|||
@ -1,40 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Component, ElementRef } from '@angular/core'; |
|||
|
|||
declare var Spinner: any; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-spinner', |
|||
template: '' |
|||
}) |
|||
export class SpinnerComponent { |
|||
constructor(element: ElementRef) { |
|||
const mediumOptions = { |
|||
lines: 12, |
|||
length: 5, |
|||
width: 2, |
|||
radius: 6, |
|||
corners: 1, |
|||
rotate: 0, |
|||
direction: 1, |
|||
color: '#000', |
|||
speed: 1.5, |
|||
trail: 40, |
|||
shadow: false, |
|||
hwaccel: false, |
|||
className: 'spinner', |
|||
zIndex: 0, |
|||
position: 'relative' |
|||
}; |
|||
|
|||
element.nativeElement.classList.add('spinner-medium'); |
|||
|
|||
new Spinner(mediumOptions).spin(element.nativeElement); |
|||
} |
|||
} |
|||
@ -1,42 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { |
|||
DragService, |
|||
DragServiceFactory, |
|||
DropEvent |
|||
} from './../'; |
|||
|
|||
describe('DragService', () => { |
|||
it('should instantiate from factory', () => { |
|||
const dragService = DragServiceFactory(); |
|||
|
|||
expect(dragService).toBeDefined(); |
|||
}); |
|||
|
|||
it('should instantiate', () => { |
|||
const dragService = new DragService(); |
|||
|
|||
expect(dragService).toBeDefined(); |
|||
}); |
|||
|
|||
it('should raise event handler when dropped', () => { |
|||
let emittedEvent: DropEvent | null = null; |
|||
|
|||
const dragService = new DragService(); |
|||
|
|||
dragService.onDrop.subscribe(e => { |
|||
emittedEvent = e; |
|||
}); |
|||
|
|||
const event: DropEvent = { position: null!, model: null!, dropTarget: null! }; |
|||
|
|||
dragService.emitDrop(event); |
|||
|
|||
expect(emittedEvent).toBe(event); |
|||
}); |
|||
}); |
|||
@ -1,30 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Injectable } from '@angular/core'; |
|||
import { Observable, Subject } from 'rxjs'; |
|||
|
|||
import { Vec2 } from './../utils/vec2'; |
|||
|
|||
export interface DropEvent { position: Vec2; model: any; dropTarget: string; } |
|||
|
|||
export const DragServiceFactory = () => { |
|||
return new DragService(); |
|||
}; |
|||
|
|||
@Injectable() |
|||
export class DragService { |
|||
private readonly dropEvent = new Subject<DropEvent>(); |
|||
|
|||
public get onDrop(): Observable<DropEvent> { |
|||
return this.dropEvent; |
|||
} |
|||
|
|||
public emitDrop(event: DropEvent) { |
|||
this.dropEvent.next(event); |
|||
} |
|||
} |
|||
@ -1,74 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { ArrayHelper } from './../'; |
|||
|
|||
describe('ArrayHelper', () => { |
|||
it('should push item', () => { |
|||
const oldArray = [1, 2, 3]; |
|||
const newArray = ArrayHelper.push(oldArray, 4); |
|||
|
|||
expect(newArray).toEqual([1, 2, 3, 4]); |
|||
}); |
|||
|
|||
it('should remove item if found', () => { |
|||
const oldArray = [1, 2, 3]; |
|||
const newArray = ArrayHelper.remove(oldArray, 2); |
|||
|
|||
expect(newArray).toEqual([1, 3]); |
|||
}); |
|||
|
|||
it('should not remove item if not found', () => { |
|||
const oldArray = [1, 2, 3]; |
|||
const newArray = ArrayHelper.remove(oldArray, 5); |
|||
|
|||
expect(newArray).toEqual([1, 2, 3]); |
|||
}); |
|||
|
|||
it('should remove all by predicate', () => { |
|||
const oldArray: number[] = [1, 2, 3, 4]; |
|||
const newArray = ArrayHelper.removeAll(oldArray, (i: number) => i % 2 === 0); |
|||
|
|||
expect(newArray).toEqual([1, 3]); |
|||
}); |
|||
|
|||
it('should return original if nothing has been removed', () => { |
|||
const oldArray: number[] = [1, 2, 3, 4]; |
|||
const newArray = ArrayHelper.removeAll(oldArray, (i: number) => i % 200 === 0); |
|||
|
|||
expect(newArray).toEqual(oldArray); |
|||
}); |
|||
|
|||
it('should replace item if found', () => { |
|||
const oldArray = [1, 2, 3]; |
|||
const newArray = ArrayHelper.replace(oldArray, 2, 4); |
|||
|
|||
expect(newArray).toEqual([1, 4, 3]); |
|||
}); |
|||
|
|||
it('should not replace item if not found', () => { |
|||
const oldArray = [1, 2, 3]; |
|||
const newArray = ArrayHelper.replace(oldArray, 5, 5); |
|||
|
|||
expect(newArray).toEqual([1, 2, 3]); |
|||
}); |
|||
|
|||
it('should replace all by predicate', () => { |
|||
const oldArray: number[] = [1, 2, 3, 4]; |
|||
const newArray = ArrayHelper.replaceAll(oldArray, (i: number) => i % 2 === 0, i => i * 2); |
|||
|
|||
expect(newArray).toEqual([1, 4, 3, 8]); |
|||
}); |
|||
|
|||
it('should return original if nothing has been replace', () => { |
|||
const oldArray: number[] = [1, 2, 3, 4]; |
|||
const newArray = ArrayHelper.replaceAll(oldArray, (i: number) => i % 200 === 0, i => i); |
|||
|
|||
expect(newArray).toEqual(oldArray); |
|||
}); |
|||
|
|||
}); |
|||
@ -1,74 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
export module ArrayHelper { |
|||
export function push<T>(array: T[], item: T): T[] { |
|||
return [...array, item]; |
|||
} |
|||
|
|||
export function remove<T>(array: T[], item: T): T[] { |
|||
const index = array.indexOf(item); |
|||
|
|||
if (index >= 0) { |
|||
return [...array.slice(0, index), ...array.slice(index + 1)]; |
|||
} else { |
|||
return array; |
|||
} |
|||
} |
|||
|
|||
export function removeAll<T>(array: T[], predicate: (item: T, index: number) => boolean): T[] { |
|||
const copy = array.slice(); |
|||
|
|||
let hasChange = false; |
|||
|
|||
for (let i = 0; i < copy.length; ) { |
|||
if (predicate(copy[i], i)) { |
|||
copy.splice(i, 1); |
|||
|
|||
hasChange = true; |
|||
} else { |
|||
++i; |
|||
} |
|||
} |
|||
|
|||
return hasChange ? copy : array; |
|||
} |
|||
|
|||
export function replace<T>(array: T[], oldItem: T, newItem: T): T[] { |
|||
const index = array.indexOf(oldItem); |
|||
|
|||
if (index >= 0) { |
|||
const copy = array.slice(); |
|||
|
|||
copy[index] = newItem; |
|||
|
|||
return copy; |
|||
} else { |
|||
return array; |
|||
} |
|||
} |
|||
|
|||
export function replaceAll<T>(array: T[], predicate: (item: T, index: number) => boolean, replacer: (item: T) => T): T[] { |
|||
const copy = array.slice(); |
|||
|
|||
let hasChange = false; |
|||
|
|||
for (let i = 0; i < copy.length; i++) { |
|||
if (predicate(copy[i], i)) { |
|||
const newItem = replacer(copy[i]); |
|||
|
|||
if (copy[i] !== newItem) { |
|||
copy[i] = newItem; |
|||
|
|||
hasChange = true; |
|||
} |
|||
} |
|||
} |
|||
|
|||
return hasChange ? copy : array; |
|||
} |
|||
} |
|||
@ -1,16 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { ColorPalette } from './../'; |
|||
|
|||
describe('ColorPalatte', () => { |
|||
it('should generate colors', () => { |
|||
const palette = ColorPalette.colors(); |
|||
|
|||
expect(palette.colors.length).toBeGreaterThan(20); |
|||
}); |
|||
}); |
|||
@ -1,41 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Color } from './color'; |
|||
|
|||
const BREWERS = { |
|||
greys: [0xffffff, 0xF0F0F0, 0xbdbdbd, 0x969696, 0x737373, 0x525252, 0x252525, 0x000000], |
|||
oranges: [0xfee6ce, 0xfdd0a2, 0xfdae6b, 0xfd8d3c, 0xf16913, 0xd94801, 0xa63603, 0x7f2704], |
|||
reds: [0xfee0d2, 0xfcbba1, 0xfc9272, 0xfb6a4a, 0xef3b2c, 0xcb181d, 0xa50f15, 0x67000d], |
|||
greens: [0xe5f5e0, 0xc7e9c0, 0xa1d99b, 0x74c476, 0x41ab5d, 0x238b45, 0x006d2c, 0x00441b], |
|||
purples: [0xefedf5, 0xdadaeb, 0xbcbddc, 0x9e9ac8, 0x807dba, 0x6a51a3, 0x54278f, 0x3f007d], |
|||
blues: [0xdeebf7, 0xc6dbef, 0x9ecae1, 0x6baed6, 0x4292c6, 0x2171b5, 0x08519c, 0x08306b] |
|||
}; |
|||
|
|||
export class ColorPalette { |
|||
constructor( |
|||
public readonly colors: Color[], |
|||
public readonly defaultColor: Color |
|||
) { |
|||
} |
|||
|
|||
public static colors(): ColorPalette { |
|||
const colors: Color[] = []; |
|||
|
|||
for (let key in BREWERS) { |
|||
if (BREWERS.hasOwnProperty(key)) { |
|||
const brewer = BREWERS[key]; |
|||
|
|||
for (let color of brewer) { |
|||
colors.push(Color.fromNumber(color)); |
|||
} |
|||
} |
|||
} |
|||
|
|||
return new ColorPalette(colors, colors[7]); |
|||
} |
|||
} |
|||
@ -1,273 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Color } from './../'; |
|||
|
|||
describe('Color', () => { |
|||
it('should instantiate', () => { |
|||
const color = new Color(0.3, 0.6, 0.9); |
|||
|
|||
expect(color.r).toBe(0.3); |
|||
expect(color.g).toBe(0.6); |
|||
expect(color.b).toBe(0.9); |
|||
}); |
|||
|
|||
it('should adjust values when instantiating', () => { |
|||
const color = new Color(-1, 0.5, 2); |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(0.5); |
|||
expect(color.b).toBe(1); |
|||
}); |
|||
|
|||
it('should convert to color', () => { |
|||
const color = Color.fromHex(23, 46, 59); |
|||
|
|||
expect(color.toNumber()).toBe(0x234659); |
|||
}); |
|||
|
|||
it('should convert to string', () => { |
|||
const color = Color.fromHex(23, 46, 59); |
|||
|
|||
expect(color.toString()).toBe('#234659'); |
|||
}); |
|||
|
|||
it('should convert to string with leading zeros', () => { |
|||
const color = Color.fromHex(3, 6, 9); |
|||
|
|||
expect(color.toString()).toBe('#030609'); |
|||
}); |
|||
|
|||
it('should be created from long string', () => { |
|||
const color = Color.fromValue('#336699'); |
|||
|
|||
expect(color.r).toBe(0.2); |
|||
expect(color.g).toBe(0.4); |
|||
expect(color.b).toBe(0.6); |
|||
}); |
|||
|
|||
it('should be created from short string', () => { |
|||
const color = Color.fromValue('#369'); |
|||
|
|||
expect(color.r).toBe(0.2); |
|||
expect(color.g).toBe(0.4); |
|||
expect(color.b).toBe(0.6); |
|||
}); |
|||
|
|||
it('should be created from rgb string', () => { |
|||
const color = Color.fromValue('rgb(51, 102, 153)'); |
|||
|
|||
expect(color.r).toBe(0.2); |
|||
expect(color.g).toBe(0.4); |
|||
expect(color.b).toBe(0.6); |
|||
}); |
|||
|
|||
it('should be created from rgb number', () => { |
|||
const color = Color.fromValue(0x336699); |
|||
|
|||
expect(color.r).toBe(0.2); |
|||
expect(color.g).toBe(0.4); |
|||
expect(color.b).toBe(0.6); |
|||
}); |
|||
|
|||
it('should be created from rgb values', () => { |
|||
const color = Color.fromHex(33, 66, 99); |
|||
|
|||
expect(color.r).toBe(0.2); |
|||
expect(color.g).toBe(0.4); |
|||
expect(color.b).toBe(0.6); |
|||
}); |
|||
|
|||
it('should convert from hsl with black', () => { |
|||
const color = Color.fromHsl(0, 0, 0); |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should convert from hsl with dark black', () => { |
|||
const color = Color.fromHsl(0, 1, 0.1); |
|||
|
|||
expect(color.r).toBe(0.2); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should convert from hsl with red', () => { |
|||
const color = Color.fromHsl(0, 1, 0.5); |
|||
|
|||
expect(color.r).toBeCloseTo(1, 1); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should convert from hsl with yellow', () => { |
|||
const color = Color.fromHsl(60, 1, 0.5); |
|||
|
|||
expect(color.r).toBeCloseTo(1, 1); |
|||
expect(color.g).toBeCloseTo(1, 1); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should convert from hsl with blue', () => { |
|||
const color = Color.fromHsl(120, 1, 0.5); |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(1); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should convert from hsl with turkis', () => { |
|||
const color = Color.fromHsl(180, 1, 0.5); |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBeCloseTo(1, 1); |
|||
expect(color.b).toBeCloseTo(1, 1); |
|||
}); |
|||
|
|||
it('should convert from hsv with red', () => { |
|||
const color = Color.fromHsv(240, 1, 1); |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(1); |
|||
}); |
|||
|
|||
it('should convert from hsv with pink', () => { |
|||
const color = Color.fromHsv(300, 1, 1); |
|||
|
|||
expect(color.r).toBe(1); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(1); |
|||
}); |
|||
|
|||
it('should convert from hsl with another red', () => { |
|||
const color = Color.fromHsl(360, 1, 0.5); |
|||
|
|||
expect(color.r).toBeCloseTo(1, 1); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should convert from hsv with red', () => { |
|||
const color = Color.fromHsv(0, 1, 1); |
|||
|
|||
expect(color.r).toBe(1); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should convert from hsv with yellow', () => { |
|||
const color = Color.fromHsv(60, 1, 1); |
|||
|
|||
expect(color.r).toBe(1); |
|||
expect(color.g).toBe(1); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should convert from hsv with blue', () => { |
|||
const color = Color.fromHsv(120, 1, 1); |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(1); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should convert from hsv with turkis', () => { |
|||
const color = Color.fromHsv(180, 1, 1); |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(1); |
|||
expect(color.b).toBe(1); |
|||
}); |
|||
|
|||
it('should convert from hsv with red', () => { |
|||
const color = Color.fromHsv(240, 1, 1); |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(1); |
|||
}); |
|||
|
|||
it('should convert from hsv with pink', () => { |
|||
const color = Color.fromHsv(300, 1, 1); |
|||
|
|||
expect(color.r).toBe(1); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(1); |
|||
}); |
|||
|
|||
it('should be valid black', () => { |
|||
const color = Color.BLACK; |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should be valid white', () => { |
|||
const color = Color.WHITE; |
|||
|
|||
expect(color.r).toBe(1); |
|||
expect(color.g).toBe(1); |
|||
expect(color.b).toBe(1); |
|||
}); |
|||
|
|||
it('should be valid red', () => { |
|||
const color = Color.RED; |
|||
|
|||
expect(color.r).toBe(1); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should be valid green', () => { |
|||
const color = Color.GREEN; |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(1); |
|||
expect(color.b).toBe(0); |
|||
}); |
|||
|
|||
it('should be valid blue', () => { |
|||
const color = Color.BLUE; |
|||
|
|||
expect(color.r).toBe(0); |
|||
expect(color.g).toBe(0); |
|||
expect(color.b).toBe(1); |
|||
}); |
|||
|
|||
it('should calculate correct luminance', () => { |
|||
expect(new Color(1, 1, 1).luminance).toBe(1); |
|||
expect(new Color(0, 0, 0).luminance).toBe(0); |
|||
expect(new Color(1, 0, 0).luminance).toBe(1 / 3); |
|||
expect(new Color(0, 1, 0).luminance).toBe(1 / 2); |
|||
expect(new Color(0, 0, 1).luminance).toBe(1 / 6); |
|||
}); |
|||
|
|||
it('should make valid equal comparisons', () => { |
|||
expect(new Color(0.1, 0.1, 0.1).eq(new Color(0.1, 0.1, 0.1))).toBeTruthy(); |
|||
expect(new Color(0.1, 0.1, 0.4).eq(new Color(0.1, 0.1, 0.1))).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should make valid not equal comparisons', () => { |
|||
expect(new Color(0.1, 0.1, 0.1).ne(new Color(0.1, 0.1, 0.4))).toBeTruthy(); |
|||
expect(new Color(0.1, 0.1, 0.1).ne(new Color(0.1, 0.1, 0.1))).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should return color when creating from color', () => { |
|||
const color = Color.fromHsv(300, 1, 1); |
|||
const created = Color.fromValue(color); |
|||
|
|||
expect(created).toBe(color); |
|||
}); |
|||
|
|||
it('should throw error for invalid string', () => { |
|||
expect(() => Color.fromValue('INVALID')).toThrowError('Color is not in a valid format.'); |
|||
}); |
|||
}); |
|||
@ -1,200 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
/* tslint:disable:no-bitwise */ |
|||
|
|||
interface IColorDefinition { |
|||
regex: RegExp; |
|||
|
|||
process(bots: RegExpExecArray): Color; |
|||
} |
|||
|
|||
const ColorDefinitions: IColorDefinition[] = [ |
|||
{ |
|||
regex: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, |
|||
process: bits => new Color( |
|||
parseInt(bits[1], 10) / 255, |
|||
parseInt(bits[2], 10) / 255, |
|||
parseInt(bits[3], 10) / 255) |
|||
}, |
|||
{ |
|||
regex: /^(\w{2})(\w{2})(\w{2})$/, |
|||
process: bits => new Color( |
|||
parseInt(bits[1], 16) / 255, |
|||
parseInt(bits[2], 16) / 255, |
|||
parseInt(bits[3], 16) / 255) |
|||
}, |
|||
{ |
|||
regex: /^(\w{1})(\w{1})(\w{1})$/, |
|||
process: bits => new Color( |
|||
parseInt(bits[1] + bits[1], 16) / 255, |
|||
parseInt(bits[2] + bits[2], 16) / 255, |
|||
parseInt(bits[3] + bits[3], 16) / 255) |
|||
} |
|||
]; |
|||
|
|||
export class Color { |
|||
public static readonly BLACK = new Color(0, 0, 0); |
|||
public static readonly WHITE = new Color(1, 1, 1); |
|||
public static readonly GREEN = new Color(0, 1, 0); |
|||
public static readonly BLUE = new Color(0, 0, 1); |
|||
public static readonly RED = new Color(1, 0, 0); |
|||
|
|||
public readonly r: number; |
|||
public readonly g: number; |
|||
public readonly b: number; |
|||
|
|||
public get luminance(): number { |
|||
return (this.r + this.r + this.b + this.g + this.g + this.g) / 6; |
|||
} |
|||
|
|||
constructor(r: number, g: number, b: number) { |
|||
this.r = Math.min(1, Math.max(0, r)); |
|||
this.g = Math.min(1, Math.max(0, g)); |
|||
this.b = Math.min(1, Math.max(0, b)); |
|||
|
|||
Object.freeze(this); |
|||
} |
|||
|
|||
public eq(v: Color): boolean { |
|||
return this.r === v.r && this.g === v.g && this.b === v.b; |
|||
} |
|||
|
|||
public ne(v: Color): boolean { |
|||
return this.r !== v.r || this.g !== v.g || this.b !== v.b; |
|||
} |
|||
|
|||
public toNumber(): number { |
|||
return ((this.r * 255) << 16) + ((this.g * 255) << 8) + (this.b * 255); |
|||
} |
|||
|
|||
public toString(): string { |
|||
let r = Math.round(this.r * 255).toString(16); |
|||
let g = Math.round(this.g * 255).toString(16); |
|||
let b = Math.round(this.b * 255).toString(16); |
|||
|
|||
if (r.length === 1) { |
|||
r = '0' + r; |
|||
} |
|||
if (g.length === 1) { |
|||
g = '0' + g; |
|||
} |
|||
if (b.length === 1) { |
|||
b = '0' + b; |
|||
} |
|||
|
|||
return '#' + r + g + b; |
|||
} |
|||
|
|||
public static fromHex(r: number, g: number, b: number): Color { |
|||
return new Color( |
|||
parseInt('' + r, 16) / 255, |
|||
parseInt('' + g, 16) / 255, |
|||
parseInt('' + b, 16) / 255); |
|||
} |
|||
|
|||
public static fromNumber(rgb: number): Color { |
|||
return new Color( |
|||
((rgb >> 16) & 0xff) / 255, |
|||
((rgb >> 8) & 0xff) / 255, |
|||
((rgb >> 0) & 0xff) / 255); |
|||
} |
|||
|
|||
public static fromValue(value: number | string | Color): Color { |
|||
if (typeof value === 'string') { |
|||
return Color.fromString(value); |
|||
} else if (typeof value === 'number') { |
|||
return Color.fromNumber(value); |
|||
} else { |
|||
return value; |
|||
} |
|||
} |
|||
|
|||
public static fromString(value: string) { |
|||
if (value.charAt(0) === '#') { |
|||
value = value.substr(1, 6); |
|||
} |
|||
|
|||
value = value.replace(/ /g, '').toLowerCase(); |
|||
|
|||
for (let colorDefinition of ColorDefinitions) { |
|||
const bits = colorDefinition.regex.exec(value); |
|||
|
|||
if (bits) { |
|||
return colorDefinition.process(bits); |
|||
} |
|||
} |
|||
|
|||
throw new Error('Color is not in a valid format.'); |
|||
} |
|||
|
|||
public static fromHsv(h: number, s: number, v: number): Color { |
|||
const hi = Math.floor(h / 60) % 6; |
|||
|
|||
const f = (h / 60) - Math.floor(h / 60); |
|||
|
|||
v = v * 255; |
|||
|
|||
const p = (v * (1 - s)); |
|||
const q = (v * (1 - (f * s))); |
|||
const t = (v * (1 - ((1 - f) * s))); |
|||
|
|||
switch (hi) { |
|||
case 0: |
|||
return new Color(v, t, p); |
|||
case 1: |
|||
return new Color(q, v, p); |
|||
case 2: |
|||
return new Color(p, v, t); |
|||
case 3: |
|||
return new Color(p, q, v); |
|||
case 4: |
|||
return new Color(t, p, v); |
|||
default: |
|||
return new Color(v, p, q); |
|||
} |
|||
} |
|||
|
|||
public static fromHsl(h: number, s: number, l: number): Color { |
|||
let r = 0, g = 0, b = 0; |
|||
|
|||
h = h / 360; |
|||
|
|||
if (s === 0) { |
|||
r = g = b = l; |
|||
} else { |
|||
const hue2rgb = (p: number, q: number, t: number) => { |
|||
if (t < 0) { |
|||
t += 1; |
|||
} |
|||
|
|||
if (t > 1) { |
|||
t -= 1; |
|||
} |
|||
if (t < 1 / 6) { |
|||
return p + (q - p) * 6 * t; |
|||
} |
|||
if (t < 1 / 2) { |
|||
return q; |
|||
} |
|||
if (t < 2 / 3) { |
|||
return p + (q - p) * (2 / 3 - t) * 6; |
|||
} |
|||
return p; |
|||
}; |
|||
|
|||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s; |
|||
const p = 2 * l - q; |
|||
|
|||
r = hue2rgb(p, q, h + 1 / 3); |
|||
g = hue2rgb(p, q, h); |
|||
b = hue2rgb(p, q, h - 1 / 3); |
|||
} |
|||
|
|||
return new Color(r, g, b); |
|||
} |
|||
} |
|||
@ -1,237 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { |
|||
Rect2, |
|||
Rotation, |
|||
Vec2 |
|||
} from './../'; |
|||
|
|||
describe('Rect2', () => { |
|||
it('should provide values from constructor', () => { |
|||
const rect = new Rect2(new Vec2(10, 20), new Vec2(50, 30)); |
|||
|
|||
expect(rect.x).toBe(10); |
|||
expect(rect.y).toBe(20); |
|||
expect(rect.top).toBe(20); |
|||
expect(rect.left).toBe(10); |
|||
expect(rect.right).toBe(60); |
|||
expect(rect.width).toBe(50); |
|||
expect(rect.height).toBe(30); |
|||
expect(rect.bottom).toBe(50); |
|||
expect(rect.centerX).toBe(35); |
|||
expect(rect.centerY).toBe(35); |
|||
|
|||
expect(rect.size).toEqual(new Vec2(50, 30)); |
|||
expect(rect.center).toEqual(new Vec2(35, 35)); |
|||
expect(rect.position).toEqual(new Vec2(10, 20)); |
|||
|
|||
expect(rect.area).toBe(1500); |
|||
|
|||
expect(rect.toString()).toBe('(x: 10, y: 20, w: 50, h: 30)'); |
|||
}); |
|||
|
|||
it('should calculate isEmpty correctly', () => { |
|||
expect(new Rect2(new Vec2(10, 20), new Vec2(50, 30)).isEmpty).toBeFalsy(); |
|||
expect(new Rect2(new Vec2(10, 20), new Vec2(-1, 30)).isEmpty).toBeTruthy(); |
|||
expect(new Rect2(new Vec2(10, 20), new Vec2(50, -9)).isEmpty).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should calculate isInfinite correctly', () => { |
|||
expect(new Rect2(new Vec2(10, 20), new Vec2(50, 30)).isInfinite).toBeFalsy(); |
|||
expect(new Rect2(new Vec2(10, 20), new Vec2(Number.POSITIVE_INFINITY, 30)).isInfinite).toBeTruthy(); |
|||
expect(new Rect2(new Vec2(10, 20), new Vec2(50, Number.POSITIVE_INFINITY)).isInfinite).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should inflate correctly', () => { |
|||
const rect = new Rect2(new Vec2(10, 20), new Vec2(50, 30)); |
|||
|
|||
const actual1 = rect.inflateV(new Vec2(10, 20)); |
|||
const actual2 = rect.inflate(10, 20); |
|||
const expected = new Rect2(new Vec2(0, 0), new Vec2(70, 70)); |
|||
|
|||
expect(actual1).toEqual(expected); |
|||
expect(actual2).toEqual(expected); |
|||
}); |
|||
|
|||
it('should deflate correctly', () => { |
|||
const rect = new Rect2(new Vec2(10, 20), new Vec2(50, 30)); |
|||
|
|||
const actual1 = rect.deflateV(new Vec2(25, 15)); |
|||
const actual2 = rect.deflate(25, 15); |
|||
const expected = new Rect2(new Vec2(35, 35), new Vec2(0, 0)); |
|||
|
|||
expect(actual1).toEqual(expected); |
|||
expect(actual2).toEqual(expected); |
|||
}); |
|||
|
|||
it('should return true for intersection with infinite rect', () => { |
|||
const rect = new Rect2(new Vec2(10, 20), new Vec2(50, 30)); |
|||
|
|||
expect(rect.intersectsWith(Rect2.INFINITE)).toBeTruthy(); |
|||
|
|||
expect(Rect2.INFINITE.intersectsWith(rect)).toBeTruthy(); |
|||
expect(Rect2.INFINITE.intersectsWith(Rect2.INFINITE)).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should return false for intersection with empty rect', () => { |
|||
const rect = new Rect2(new Vec2(10, 20), new Vec2(50, 30)); |
|||
|
|||
expect(rect.intersectsWith(Rect2.EMPTY)).toBeFalsy(); |
|||
|
|||
expect(Rect2.EMPTY.intersectsWith(rect)).toBeFalsy(); |
|||
expect(Rect2.EMPTY.intersectsWith(Rect2.INFINITE)).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should return empty for no intersection', () => { |
|||
const rect = new Rect2(new Vec2(10, 20), new Vec2(50, 30)); |
|||
const outer = new Rect2(new Vec2(100, 20), new Vec2(50, 30)); |
|||
|
|||
const actual = rect.intersect(outer); |
|||
const expected = Rect2.EMPTY; |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should return result for intersection', () => { |
|||
const rect = new Rect2(new Vec2(10, 20), new Vec2(50, 30)); |
|||
const inner = new Rect2(new Vec2(35, 35), new Vec2(100, 30)); |
|||
|
|||
const actual = rect.intersect(inner); |
|||
const expected = new Rect2(new Vec2(35, 35), new Vec2(25, 15)); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should make correct contains by vector tests', () => { |
|||
const rect = new Rect2(new Vec2(10, 20), new Vec2(50, 30)); |
|||
|
|||
expect(rect.containsVec(rect.center)).toBeTruthy(); |
|||
expect(rect.containsVec(new Vec2(rect.left, rect.top))).toBeTruthy(); |
|||
|
|||
expect(rect.containsVec(new Vec2(rect.centerX, 0))).toBeFalsy(); |
|||
expect(rect.containsVec(new Vec2(rect.centerX, 100))).toBeFalsy(); |
|||
expect(rect.containsVec(new Vec2(100, rect.centerY))).toBeFalsy(); |
|||
expect(rect.containsVec(new Vec2(-50, rect.centerY))).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should return true when rect contains other rect', () => { |
|||
const rect = new Rect2(new Vec2(400, 400), new Vec2(400, 400)); |
|||
const other = new Rect2(new Vec2(500, 500), new Vec2(200, 200)); |
|||
|
|||
expect(rect.containsRect(other)).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should return false when other rect is too top', () => { |
|||
const rect = new Rect2(new Vec2(400, 400), new Vec2(400, 400)); |
|||
const other = new Rect2(new Vec2(300, 900), new Vec2(300, 100)); |
|||
|
|||
expect(rect.containsRect(other)).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should return false when other rect is too bottom', () => { |
|||
const rect = new Rect2(new Vec2(400, 400), new Vec2(400, 400)); |
|||
const other = new Rect2(new Vec2(300, 900), new Vec2(100, 300)); |
|||
|
|||
expect(rect.containsRect(other)).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should return false when other rect is too left', () => { |
|||
const rect = new Rect2(new Vec2(400, 400), new Vec2(400, 400)); |
|||
const other = new Rect2(new Vec2(200, 200), new Vec2(100, 300)); |
|||
|
|||
expect(rect.containsRect(other)).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should return false when other right is too left', () => { |
|||
const rect = new Rect2(new Vec2(400, 400), new Vec2(400, 400)); |
|||
const other = new Rect2(new Vec2(900, 200), new Vec2(100, 300)); |
|||
|
|||
expect(rect.containsRect(other)).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should return empty when creating from null vectors', () => { |
|||
const actual = Rect2.createFromVecs(null); |
|||
const expected = Rect2.EMPTY; |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should return empty when creating from null rects', () => { |
|||
const actual = Rect2.createFromRects(null); |
|||
const expected = Rect2.EMPTY; |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should provide valid zero instance', () => { |
|||
const actual = Rect2.ZERO; |
|||
const expected = new Rect2(new Vec2(0, 0), new Vec2(0, 0)); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should provide valid empty instance', () => { |
|||
const actual = Rect2.EMPTY; |
|||
const expected = new Rect2(Vec2.NEGATIVE_INFINITE, Vec2.NEGATIVE_INFINITE); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should provide valid infinite instance', () => { |
|||
const actual = Rect2.INFINITE; |
|||
const expected = new Rect2(Vec2.POSITIVE_INFINITE, Vec2.POSITIVE_INFINITE); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should create correct rect from vectors', () => { |
|||
const actual = |
|||
Rect2.createFromVecs([ |
|||
new Vec2(100, 100), |
|||
new Vec2(500, 300), |
|||
new Vec2(900, 800)]); |
|||
const expected = new Rect2(new Vec2(100, 100), new Vec2(800, 700)); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should create correct rect from rects', () => { |
|||
const actual = |
|||
Rect2.createFromRects([ |
|||
new Rect2(new Vec2(100, 100), new Vec2(100, 100)), |
|||
new Rect2(new Vec2(500, 300), new Vec2(100, 100)), |
|||
new Rect2(new Vec2(150, 150), new Vec2(750, 650))]); |
|||
const expected = new Rect2(new Vec2(100, 100), new Vec2(800, 700)); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should create rect from rotation', () => { |
|||
const actual = Rect2.createRotated(new Vec2(400, 300), new Vec2(600, 400), Rotation.createFromRadian(Math.PI / 2)); |
|||
const expected = new Rect2(new Vec2(500, 200), new Vec2(400, 600)); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should create rect from zero rotation', () => { |
|||
const actual = Rect2.createRotated(new Vec2(400, 300), new Vec2(600, 400), Rotation.ZERO); |
|||
const expected = new Rect2(new Vec2(400, 300), new Vec2(600, 400)); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should make valid equal comparisons', () => { |
|||
expect(new Rect2(new Vec2(10, 10), new Vec2(10, 10)).eq(new Rect2(new Vec2(10, 10), new Vec2(10, 10)))).toBeTruthy(); |
|||
expect(new Rect2(new Vec2(10, 10), new Vec2(10, 10)).eq(new Rect2(new Vec2(20, 20), new Vec2(20, 20)))).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should make valid not equal comparisons', () => { |
|||
expect(new Rect2(new Vec2(10, 10), new Vec2(10, 10)).ne(new Rect2(new Vec2(10, 10), new Vec2(10, 10)))).toBeFalsy(); |
|||
expect(new Rect2(new Vec2(10, 10), new Vec2(10, 10)).ne(new Rect2(new Vec2(20, 20), new Vec2(20, 20)))).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -1,191 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Rotation } from './rotation'; |
|||
import { Vec2 } from './vec2'; |
|||
|
|||
export class Rect2 { |
|||
public static readonly ZERO = new Rect2(Vec2.ZERO, Vec2.ZERO); |
|||
public static readonly EMPTY = new Rect2(Vec2.NEGATIVE_INFINITE, Vec2.NEGATIVE_INFINITE); |
|||
public static readonly INFINITE = new Rect2(Vec2.POSITIVE_INFINITE, Vec2.POSITIVE_INFINITE); |
|||
|
|||
public get center(): Vec2 { |
|||
return new Vec2(this.position.x + (0.5 * this.size.x), this.position.y + (0.5 * this.size.y)); |
|||
} |
|||
|
|||
public get area(): number { |
|||
return this.size.x * this.size.y; |
|||
} |
|||
|
|||
public get x(): number { |
|||
return this.position.x; |
|||
} |
|||
|
|||
public get y(): number { |
|||
return this.position.y; |
|||
} |
|||
|
|||
public get left(): number { |
|||
return this.position.x; |
|||
} |
|||
|
|||
public get top(): number { |
|||
return this.position.y; |
|||
} |
|||
|
|||
public get right(): number { |
|||
return this.position.x + this.size.x; |
|||
} |
|||
|
|||
public get bottom(): number { |
|||
return this.position.y + this.size.y; |
|||
} |
|||
|
|||
public get width(): number { |
|||
return this.size.x; |
|||
} |
|||
|
|||
public get height(): number { |
|||
return this.size.y; |
|||
} |
|||
|
|||
public get centerX(): number { |
|||
return this.position.x + (0.5 * this.size.x); |
|||
} |
|||
|
|||
public get centerY(): number { |
|||
return this.position.y + (0.5 * this.size.y); |
|||
} |
|||
|
|||
public get isEmpty(): boolean { |
|||
return this.size.x < 0 || this.size.y < 0; |
|||
} |
|||
|
|||
public get isInfinite(): boolean { |
|||
return this.size.x === Number.POSITIVE_INFINITY || this.size.y === Number.POSITIVE_INFINITY; |
|||
} |
|||
|
|||
constructor( |
|||
public readonly position: Vec2, |
|||
public readonly size: Vec2 |
|||
) { |
|||
} |
|||
|
|||
public static createFromVecs(vecs: Vec2[] | null): Rect2 { |
|||
if (!vecs || vecs.length === 0) { |
|||
return Rect2.EMPTY; |
|||
} |
|||
|
|||
let minX = Number.MAX_VALUE; |
|||
let minY = Number.MAX_VALUE; |
|||
let maxX = Number.MIN_VALUE; |
|||
let maxY = Number.MIN_VALUE; |
|||
|
|||
for (let v of vecs) { |
|||
minX = Math.min(minX, v.x); |
|||
minY = Math.min(minY, v.y); |
|||
maxX = Math.max(maxX, v.x); |
|||
maxY = Math.max(maxY, v.y); |
|||
} |
|||
|
|||
return new Rect2(new Vec2(minX, minY), new Vec2(Math.max(0, maxX - minX), Math.max(0, maxY - minY))); |
|||
} |
|||
|
|||
public static createFromRects(rects: Rect2[] | null): Rect2 { |
|||
if (!rects || rects.length === 0) { |
|||
return Rect2.EMPTY; |
|||
} |
|||
|
|||
let minX = Number.MAX_VALUE; |
|||
let minY = Number.MAX_VALUE; |
|||
let maxX = Number.MIN_VALUE; |
|||
let maxY = Number.MIN_VALUE; |
|||
|
|||
for (let r of rects) { |
|||
minX = Math.min(minX, r.left); |
|||
minY = Math.min(minY, r.top); |
|||
maxX = Math.max(maxX, r.right); |
|||
maxY = Math.max(maxY, r.bottom); |
|||
} |
|||
|
|||
return new Rect2(new Vec2(minX, minY), new Vec2(Math.max(0, maxX - minX), Math.max(0, maxY - minY))); |
|||
} |
|||
|
|||
public static createRotated(position: Vec2, size: Vec2, rotation: Rotation): Rect2 { |
|||
const x = position.x; |
|||
const y = position.y; |
|||
const w = size.x; |
|||
const h = size.y; |
|||
|
|||
if (Math.abs(rotation.sin) < Number.EPSILON) { |
|||
return new Rect2(position, size); |
|||
} |
|||
|
|||
const center = new Vec2(x + (w * 0.5), y + (h * 0.5)); |
|||
|
|||
const lt = Vec2.createRotated(new Vec2(x + 0, y + 0), center, rotation); |
|||
const rt = Vec2.createRotated(new Vec2(x + w, y + 0), center, rotation); |
|||
const rb = Vec2.createRotated(new Vec2(x + w, y + h), center, rotation); |
|||
const lb = Vec2.createRotated(new Vec2(x + 0, y + h), center, rotation); |
|||
|
|||
return Rect2.createFromVecs([lb, lt, rb, rt]); |
|||
} |
|||
|
|||
public eq(r: Rect2): boolean { |
|||
return this.position.eq(r.position) && this.size.eq(r.size); |
|||
} |
|||
|
|||
public ne(r: Rect2): boolean { |
|||
return this.position.ne(r.position) || this.size.ne(r.size); |
|||
} |
|||
|
|||
public toString(): string { |
|||
return `(x: ${this.x}, y: ${this.y}, w: ${this.width}, h: ${this.height})`; |
|||
} |
|||
|
|||
public inflateV(v: Vec2): Rect2 { |
|||
return this.inflate(v.x, v.y); |
|||
} |
|||
|
|||
public inflate(w: number, h: number): Rect2 { |
|||
return new Rect2(new Vec2(this.position.x - w, this.position.y - h), new Vec2(this.size.x + (2 * w), this.size.y + (2 * h))); |
|||
} |
|||
|
|||
public deflateV(v: Vec2): Rect2 { |
|||
return this.deflate(v.x, v.y); |
|||
} |
|||
|
|||
public deflate(w: number, h: number): Rect2 { |
|||
return new Rect2(new Vec2(this.position.x + w, this.position.y + h), new Vec2(Math.max(0, this.size.x - (2 * w)), Math.max(0, this.size.y - (2 * h)))); |
|||
} |
|||
|
|||
public containsRect(r: Rect2): boolean { |
|||
return r.left >= this.left && r.right <= this.right && r.top >= this.top && r.bottom <= this.bottom; |
|||
} |
|||
|
|||
public containsVec(v: Vec2): boolean { |
|||
return v.x >= this.position.x && v.x - this.size.x <= this.position.x && v.y >= this.position.y && v.y - this.size.y <= this.position.y; |
|||
} |
|||
|
|||
public intersectsWith(r: Rect2): boolean { |
|||
return !this.isEmpty && !r.isEmpty && ((r.left <= this.right && r.right >= this.left && r.top <= this.bottom && r.bottom >= this.top) || this.isInfinite || r.isInfinite); |
|||
} |
|||
|
|||
public intersect(r: Rect2): Rect2 { |
|||
if (!this.intersectsWith(r)) { |
|||
return Rect2.EMPTY; |
|||
} |
|||
|
|||
const minX = Math.max(this.x, r.x); |
|||
const minY = Math.max(this.y, r.y); |
|||
|
|||
const w = Math.min(this.position.x + this.size.x, r.position.x + r.size.x) - minX; |
|||
const h = Math.min(this.position.y + this.size.y, r.position.y + r.size.y) - minY; |
|||
|
|||
return new Rect2(new Vec2(minX, minY), new Vec2(Math.max(w, 0.0), Math.max(h, 0.0))); |
|||
} |
|||
} |
|||
@ -1,73 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Rotation } from './../'; |
|||
|
|||
describe('Rotation', () => { |
|||
it('should sub correctly', () => { |
|||
const rotation1 = Rotation.createFromDegree(180); |
|||
const rotation2 = Rotation.createFromDegree(45); |
|||
|
|||
const actual = rotation1.sub(rotation2); |
|||
const expected = Rotation.createFromDegree(135); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should add correctly', () => { |
|||
const rotation1 = Rotation.createFromDegree(180); |
|||
const rotation2 = Rotation.createFromDegree(45); |
|||
|
|||
const actual = rotation1.add(rotation2); |
|||
const expected = Rotation.createFromDegree(225); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should calculate negated rotation', () => { |
|||
const rotation = Rotation.createFromDegree(180); |
|||
|
|||
const actual = rotation.negate(); |
|||
const expected = Rotation.createFromDegree(-180); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should create rotation by degree', () => { |
|||
const rotation = Rotation.createFromDegree(180); |
|||
|
|||
expect(rotation.degree).toBe(180); |
|||
expect(rotation.radian).toBe(Math.PI); |
|||
|
|||
expect(rotation.cos).toBe(Math.cos(Math.PI)); |
|||
expect(rotation.sin).toBe(Math.sin(Math.PI)); |
|||
|
|||
expect(rotation.toString()).toBe('180°'); |
|||
}); |
|||
|
|||
it('should create rotation by radian', () => { |
|||
const rotation = Rotation.createFromRadian(Math.PI); |
|||
|
|||
expect(rotation.degree).toBe(180); |
|||
expect(rotation.radian).toBe(Math.PI); |
|||
|
|||
expect(rotation.cos).toBe(Math.cos(Math.PI)); |
|||
expect(rotation.sin).toBe(Math.sin(Math.PI)); |
|||
|
|||
expect(rotation.toString()).toBe('180°'); |
|||
}); |
|||
|
|||
it('should make correct equal comparisons', () => { |
|||
expect(Rotation.createFromDegree(123).eq(Rotation.createFromDegree(123))).toBeTruthy(); |
|||
expect(Rotation.createFromDegree(123).eq(Rotation.createFromDegree(234))).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should make correct not equal comparisons', () => { |
|||
expect(Rotation.createFromDegree(123).ne(Rotation.createFromDegree(123))).toBeFalsy(); |
|||
expect(Rotation.createFromDegree(123).ne(Rotation.createFromDegree(234))).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -1,57 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { MathHelper } from './math-helper'; |
|||
|
|||
export class Rotation { |
|||
public static readonly ZERO = Rotation.createFromRadian(0); |
|||
|
|||
public cos: number; |
|||
public sin: number; |
|||
|
|||
constructor( |
|||
public readonly radian: number, |
|||
public readonly degree: number |
|||
) { |
|||
this.cos = Math.cos(radian); |
|||
this.sin = Math.sin(radian); |
|||
|
|||
Object.freeze(this); |
|||
} |
|||
|
|||
public static createFromRadian(radian: number): Rotation { |
|||
return new Rotation(radian, MathHelper.toDegree(radian)); |
|||
} |
|||
|
|||
public static createFromDegree(degree: number): Rotation { |
|||
return new Rotation(MathHelper.toRad(degree), degree); |
|||
} |
|||
|
|||
public eq(r: Rotation): boolean { |
|||
return this.radian === r.radian; |
|||
} |
|||
|
|||
public ne(r: Rotation): boolean { |
|||
return this.radian !== r.radian; |
|||
} |
|||
|
|||
public toString(): string { |
|||
return `${this.degree}°`; |
|||
} |
|||
|
|||
public add(r: Rotation): Rotation { |
|||
return Rotation.createFromDegree(MathHelper.toPositiveDegree(this.degree + r.degree)); |
|||
} |
|||
|
|||
public sub(r: Rotation): Rotation { |
|||
return Rotation.createFromDegree(MathHelper.toPositiveDegree(this.degree - r.degree)); |
|||
} |
|||
|
|||
public negate(): Rotation { |
|||
return Rotation.createFromDegree(-this.degree); |
|||
} |
|||
} |
|||
@ -1,166 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Rotation, Vec2 } from './../'; |
|||
|
|||
describe('Vec2', () => { |
|||
it('should instantiate from x and y value', () => { |
|||
const v = new Vec2(10, 20); |
|||
|
|||
expect(v.x).toBe(10); |
|||
expect(v.y).toBe(20); |
|||
|
|||
expect(v.toString()).toBe('(10, 20)'); |
|||
}); |
|||
|
|||
it('should make valid equal comparisons', () => { |
|||
expect(new Vec2(10, 10).eq(new Vec2(10, 10))).toBeTruthy(); |
|||
expect(new Vec2(10, 10).eq(new Vec2(20, 20))).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should make valid not equal comparisons', () => { |
|||
expect(new Vec2(10, 10).ne(new Vec2(20, 20))).toBeTruthy(); |
|||
expect(new Vec2(10, 10).ne(new Vec2(10, 10))).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should round with default value', () => { |
|||
const actual = new Vec2(1.3, 1.6).round(); |
|||
const expected = new Vec2(1, 2); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should calculate multiple of 10', () => { |
|||
const actual = new Vec2(13, 16).round(10); |
|||
const expected = new Vec2(10, 20); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should calculate multiple of 2', () => { |
|||
const actual = new Vec2(13, 12.2).roundToMultipleOfTwo(); |
|||
const expected = new Vec2(14, 12); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should add by vector correctly', () => { |
|||
const actual = new Vec2(15, 12).add(new Vec2(4, 1)); |
|||
const expected = new Vec2(19, 13); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should add by scalar correctly', () => { |
|||
const actual = new Vec2(15, 12).addScalar(3); |
|||
const expected = new Vec2(18, 15); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should subtract by vector correctly', () => { |
|||
const actual = new Vec2(15, 12).sub(new Vec2(4, 1)); |
|||
const expected = new Vec2(11, 11); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should subtract by scalar correctly', () => { |
|||
const actual = new Vec2(15, 12).subScalar(3); |
|||
const expected = new Vec2(12, 9); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should multiply by vector correctly', () => { |
|||
const actual = new Vec2(15, 12).mul(new Vec2(4, 2)); |
|||
const expected = new Vec2(60, 24); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should multiply by scalar correctly', () => { |
|||
const actual = new Vec2(15, 12).mulScalar(3); |
|||
const expected = new Vec2(45, 36); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should divide by vector correctly', () => { |
|||
const actual = new Vec2(15, 12).div(new Vec2(5, 2)); |
|||
const expected = new Vec2(3, 6); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should divide by scalar correctly', () => { |
|||
const actual = new Vec2(15, 12).divScalar(3); |
|||
const expected = new Vec2(5, 4); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should negate correctly', () => { |
|||
const actual = new Vec2(15, 12).negate(); |
|||
const expected = new Vec2(-15, -12); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should calculate max vector', () => { |
|||
const actual = Vec2.max(new Vec2(20, 10), new Vec2(15, 30)); |
|||
const expected = new Vec2(20, 30); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should calculate min vector', () => { |
|||
const actual = Vec2.min(new Vec2(20, 10), new Vec2(15, 30)); |
|||
const expected = new Vec2(15, 10); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should calculate length', () => { |
|||
const actual = new Vec2(10, 10).length; |
|||
const expected = Math.sqrt(200); |
|||
|
|||
expect(actual).toBe(expected); |
|||
}); |
|||
|
|||
it('should calculate length squared', () => { |
|||
const actual = new Vec2(10, 10).lengtSquared; |
|||
const expected = 200; |
|||
|
|||
expect(actual).toBe(expected); |
|||
}); |
|||
|
|||
it('should calculate median', () => { |
|||
const actual = Vec2.createMedian(new Vec2(10, 20), new Vec2(20, 20), new Vec2(60, 20)); |
|||
const expected = new Vec2(30, 20); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should calculate rotated vector correctly', () => { |
|||
const source = new Vec2(40, 20); |
|||
const center = new Vec2(20, 20); |
|||
|
|||
const rotation = Rotation.createFromRadian(Math.PI / 2); |
|||
|
|||
const actual = Vec2.createRotated(source, center, rotation); |
|||
const expected = new Vec2(20, 40); |
|||
|
|||
expect(actual).toEqual(expected); |
|||
}); |
|||
|
|||
it('should calculate angles between vectors', () => { |
|||
expect(Vec2.angleBetween(new Vec2(1, 0), new Vec2(1, 0))).toBe(0); |
|||
expect(Vec2.angleBetween(new Vec2(1, 0), new Vec2(1, 1))).toBe(45); |
|||
expect(Vec2.angleBetween(new Vec2(1, 0), new Vec2(0, 1))).toBe(90); |
|||
}); |
|||
}); |
|||
@ -1,127 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { MathHelper } from './math-helper'; |
|||
import { Rotation } from './rotation'; |
|||
|
|||
export class Vec2 { |
|||
public static readonly ZERO = new Vec2(0, 0); |
|||
|
|||
public static readonly ONE = new Vec2(1, 1); |
|||
|
|||
public static readonly POSITIVE_INFINITE = new Vec2(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY); |
|||
public static readonly NEGATIVE_INFINITE = new Vec2(Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY); |
|||
|
|||
public get length(): number { |
|||
return Math.sqrt(this.x * this.x + this.y * this.y); |
|||
} |
|||
|
|||
public get lengtSquared(): number { |
|||
return this.x * this.x + this.y * this.y; |
|||
} |
|||
|
|||
constructor( |
|||
public readonly x: number, |
|||
public readonly y: number |
|||
) { |
|||
Object.freeze(this); |
|||
} |
|||
|
|||
public eq(v: Vec2): boolean { |
|||
return this.x === v.x && this.y === v.y; |
|||
} |
|||
|
|||
public ne(v: Vec2): boolean { |
|||
return this.x !== v.x || this.y !== v.y; |
|||
} |
|||
|
|||
public toString(): string { |
|||
return `(${this.x}, ${this.y})`; |
|||
} |
|||
|
|||
public add(v: Vec2): Vec2 { |
|||
return new Vec2(this.x + v.x, this.y + v.y); |
|||
} |
|||
|
|||
public addScalar(s: number): Vec2 { |
|||
return new Vec2(this.x + s, this.y + s); |
|||
} |
|||
|
|||
public sub(v: Vec2): Vec2 { |
|||
return new Vec2(this.x - v.x, this.y - v.y); |
|||
} |
|||
|
|||
public subScalar(s: number): Vec2 { |
|||
return new Vec2(this.x - s, this.y - s); |
|||
} |
|||
|
|||
public mul(v: Vec2): Vec2 { |
|||
return new Vec2(this.x * v.x, this.y * v.y); |
|||
} |
|||
|
|||
public mulScalar(s: number): Vec2 { |
|||
return new Vec2(this.x * s, this.y * s); |
|||
} |
|||
|
|||
public div(v: Vec2): Vec2 { |
|||
return new Vec2(this.x / v.x, this.y / v.y); |
|||
} |
|||
|
|||
public divScalar(s: number): Vec2 { |
|||
return new Vec2(this.x / s, this.y / s); |
|||
} |
|||
|
|||
public negate(): Vec2 { |
|||
return new Vec2(-this.x, -this.y); |
|||
} |
|||
|
|||
public static max(lhs: Vec2, rhs: Vec2): Vec2 { |
|||
return new Vec2(Math.max(lhs.x, rhs.x), Math.max(lhs.y, rhs.y)); |
|||
} |
|||
|
|||
public static min(lhs: Vec2, rhs: Vec2): Vec2 { |
|||
return new Vec2(Math.min(lhs.x, rhs.x), Math.min(lhs.y, rhs.y)); |
|||
} |
|||
|
|||
public round(factor = 1): Vec2 { |
|||
return new Vec2(MathHelper.roundToMultipleOf(this.x, factor), MathHelper.roundToMultipleOf(this.y, factor)); |
|||
} |
|||
|
|||
public roundToMultipleOfTwo(): Vec2 { |
|||
return new Vec2(MathHelper.roundToMultipleOf(this.x, 2), MathHelper.roundToMultipleOf(this.y, 2)); |
|||
} |
|||
|
|||
public static createRotated(vec: Vec2, center: Vec2, rotation: Rotation): Vec2 { |
|||
const x = vec.x - center.x; |
|||
const y = vec.y - center.y; |
|||
|
|||
const result = new Vec2( |
|||
(x * rotation.cos) - (y * rotation.sin) + center.x, |
|||
(x * rotation.sin) + (y * rotation.cos) + center.y); |
|||
|
|||
return result; |
|||
} |
|||
|
|||
public static createMedian(...vecs: Vec2[]) { |
|||
let medianX = 0; |
|||
let medianY = 0; |
|||
|
|||
for (let v of vecs) { |
|||
medianX += v.x; |
|||
medianY += v.y; |
|||
} |
|||
|
|||
return new Vec2(medianX / vecs.length, medianY / vecs.length); |
|||
} |
|||
|
|||
public static angleBetween(lhs: Vec2, rhs: Vec2): number { |
|||
const y = (lhs.x * rhs.y) - (rhs.x * lhs.y); |
|||
const x = (lhs.x * rhs.x) + (lhs.y * rhs.y); |
|||
|
|||
return MathHelper.toPositiveDegree(MathHelper.toDegree(Math.atan2(y, x))); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue