ng-fancy-gui
Version:
This package contains components, for creating userinterfaces in a Angular app.
990 lines (977 loc) • 98.8 kB
JavaScript
import { __decorate } from 'tslib';
import { ɵɵdefineInjectable, Injectable, ElementRef, Input, ViewChild, HostListener, Component, forwardRef, EventEmitter, ChangeDetectorRef, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
var ImageCropperConfig = /** @class */ (function () {
function ImageCropperConfig(width, height, rasterLevels) {
this.width = width;
this.height = height;
this.rasterLevels = rasterLevels;
}
return ImageCropperConfig;
}());
var AutCompleteSource;
(function (AutCompleteSource) {
AutCompleteSource[AutCompleteSource["Input"] = 0] = "Input";
AutCompleteSource[AutCompleteSource["ApiEndpoint"] = 1] = "ApiEndpoint";
})(AutCompleteSource || (AutCompleteSource = {}));
var KeywordType;
(function (KeywordType) {
KeywordType[KeywordType["String"] = 0] = "String";
KeywordType[KeywordType["KeyValue"] = 1] = "KeyValue";
})(KeywordType || (KeywordType = {}));
var KeywordPickerConfig = /** @class */ (function () {
function KeywordPickerConfig(keywordType, autocompleteMode, autoCompleteSource, dataMapperFunction, autocompleteSourceUrl) {
if (keywordType === void 0) { keywordType = KeywordType.String; }
if (autocompleteMode === void 0) { autocompleteMode = false; }
if (autoCompleteSource === void 0) { autoCompleteSource = AutCompleteSource.Input; }
if (dataMapperFunction === void 0) { dataMapperFunction = null; }
if (autocompleteSourceUrl === void 0) { autocompleteSourceUrl = null; }
this.keywordType = keywordType;
this.autocompleteMode = autocompleteMode;
this.autoCompleteSource = autoCompleteSource;
this.dataMapperFunction = dataMapperFunction;
this.autocompleteSourceUrl = autocompleteSourceUrl;
}
return KeywordPickerConfig;
}());
var AutoCompleteSourceType;
(function (AutoCompleteSourceType) {
AutoCompleteSourceType[AutoCompleteSourceType["IdValueArray"] = 0] = "IdValueArray";
AutoCompleteSourceType[AutoCompleteSourceType["StringArray"] = 1] = "StringArray";
AutoCompleteSourceType[AutoCompleteSourceType["Object"] = 2] = "Object";
})(AutoCompleteSourceType || (AutoCompleteSourceType = {}));
var FileService = /** @class */ (function () {
function FileService() {
}
FileService.prototype.getBase64 = function (file) {
return new Promise(function (resolve) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
resolve(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
});
};
FileService.prototype.dataURLtoFile = function (dataurl, filename) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
};
FileService.prototype.getBinary = function (file) {
return new Promise(function (resolve) {
var reader = new FileReader();
reader.onloadend = function () {
var data = reader.result.split(',')[1];
var binaryBlob = atob(data);
resolve(binaryBlob);
};
reader.readAsDataURL(file);
});
};
FileService.ɵprov = ɵɵdefineInjectable({ factory: function FileService_Factory() { return new FileService(); }, token: FileService, providedIn: "root" });
FileService = __decorate([
Injectable({
providedIn: 'root'
})
], FileService);
return FileService;
}());
var InputBetweenComponent = /** @class */ (function () {
function InputBetweenComponent(elRef, sanitizer) {
this.elRef = elRef;
this.sanitizer = sanitizer;
this.placeholder = "";
this.max = 100;
this.min = 0;
this.lockScroll = true;
this.mouseDown = false;
this.minValue = 0;
this.maxValue = 0;
this.value = null;
this.maxTearMouseDown = false;
this.minTearMouseDown = false;
this.propagateChange = function (_) {
};
}
InputBetweenComponent_1 = InputBetweenComponent;
InputBetweenComponent.prototype.registerOnChange = function (fn) {
this.propagateChange = fn;
};
InputBetweenComponent.prototype.registerOnTouched = function (fn) {
};
InputBetweenComponent.prototype.setDisabledState = function (isDisabled) {
};
InputBetweenComponent.prototype.writeValue = function (value) {
if (value !== null) {
this.minValue = Math.round(value[0]);
this.maxValue = Math.round(value[1]);
this.tearMinStyle = this.calcStyle(this.minValue);
this.tearMaxStyle = this.calcStyle(this.maxValue);
this.calcSliderLineStyle();
}
};
InputBetweenComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.value === null) {
this.minValue = Math.round(this.min + ((this.max - this.min) / 2));
this.maxValue = Math.round(this.min + ((this.max - this.min) / 2));
}
this.tearMinStyle = this.calcStyle(this.minValue);
this.tearMaxStyle = this.calcStyle(this.maxValue);
this.calcSliderLineStyle();
this.elRef.nativeElement.ontouchstart = function () {
_this.disableScroll();
};
this.elRef.nativeElement.ontouchend = function () {
_this.enableScroll();
};
};
InputBetweenComponent.prototype.resize = function () {
this.tearMinStyle = this.calcStyle(this.minValue);
this.tearMaxStyle = this.calcStyle(this.maxValue);
this.calcSliderLineStyle();
};
InputBetweenComponent.prototype.handleMouseLeave = function (event) {
var rect = this.elRef.nativeElement.getBoundingClientRect();
if (event.clientX >= rect.width + rect.x && this.maxTearMouseDown) {
this.maxValue = this.max;
}
if (event.clientX <= rect.x && this.minTearMouseDown) {
this.minValue = this.min;
}
this.maxTearMouseDown = false;
this.minTearMouseDown = false;
this.calcStyle(this.value);
this.tearMinStyle = this.calcStyle(this.minValue);
this.tearMaxStyle = this.calcStyle(this.maxValue);
this.calcSliderLineStyle();
};
InputBetweenComponent.prototype.handleTouchEnd = function (event) {
this.minTearMouseDown = false;
this.maxTearMouseDown = false;
this.calcStyle(this.value);
this.tearMinStyle = this.calcStyle(this.minValue);
this.tearMaxStyle = this.calcStyle(this.maxValue);
this.calcSliderLineStyle();
};
InputBetweenComponent.prototype.calcStyle = function (value) {
var unit = (this.elRef.nativeElement.clientWidth / (this.max - this.min));
return this.sanitizer.bypassSecurityTrustStyle('translate(' + ((Math.abs(this.min) * unit) + (unit * value)) + 'px, ' + -150 + '%) rotate(-135deg) translate(35%, -35%)');
};
InputBetweenComponent.prototype.calcSliderLineStyle = function () {
var unit = (this.elRef.nativeElement.clientWidth / (this.max - this.min));
this.sliderLineWidthStyle = this.sanitizer.bypassSecurityTrustStyle(unit * (this.maxValue - this.minValue) + 'px');
this.sliderLineLeftStyle = this.sanitizer.bypassSecurityTrustStyle((Math.abs(this.min) * unit) + (unit * this.minValue) + 'px');
};
InputBetweenComponent.prototype.disableScroll = function () {
document.body.style.overflowY = 'hidden';
};
InputBetweenComponent.prototype.enableScroll = function () {
document.body.style.overflowY = 'scroll';
};
InputBetweenComponent.prototype.tearMinDown = function () {
this.tearMin.nativeElement.classList.add('active');
this.minTearMouseDown = true;
};
InputBetweenComponent.prototype.tearMaxDown = function () {
this.tearMax.nativeElement.classList.add('active');
this.maxTearMouseDown = true;
};
InputBetweenComponent.prototype.processMouseEventTearMin = function (event) {
this.calcMinValue(event.clientX);
this.tearMinStyle = this.calcStyle(this.minValue);
this.calcSliderLineStyle();
};
InputBetweenComponent.prototype.processMouseEventTearMax = function (event) {
this.calcMaxValue(event.clientX);
this.tearMaxStyle = this.calcStyle(this.maxValue);
this.calcSliderLineStyle();
};
InputBetweenComponent.prototype.processMouseEvent = function (event) {
if (this.minTearMouseDown) {
this.processMouseEventTearMin(event);
}
if (this.maxTearMouseDown) {
this.processMouseEventTearMax(event);
}
};
InputBetweenComponent.prototype.processTouchEventTearMin = function (event) {
this.calcMinValue(event.touches[0].clientX);
this.tearMinStyle = this.calcStyle(this.minValue);
this.calcSliderLineStyle();
};
InputBetweenComponent.prototype.processTouchEventTearMax = function (event) {
this.calcMaxValue(event.touches[0].clientX);
this.tearMaxStyle = this.calcStyle(this.maxValue);
this.calcSliderLineStyle();
};
InputBetweenComponent.prototype.processTouchEvent = function (event) {
var rect = this.elRef.nativeElement.getBoundingClientRect();
if (this.minTearMouseDown) {
this.processTouchEventTearMin(event);
}
if (this.maxTearMouseDown) {
this.processTouchEventTearMax(event);
}
if (event.changedTouches[0].clientX >= rect.width + rect.x && this.maxTearMouseDown) {
this.maxValue = this.max;
// console.log("right leave");
this.tearMaxStyle = this.calcStyle(this.maxValue);
}
if (event.changedTouches[0].clientX <= rect.x && this.minTearMouseDown) {
//console.log("left leave");
this.minValue = this.min;
this.tearMinStyle = this.calcStyle(this.minValue);
}
};
InputBetweenComponent.prototype.calcMinValue = function (mouseX) {
var rect = this.elRef.nativeElement.getBoundingClientRect();
var x = mouseX - rect.left;
if (this.min + Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x) > this.min &&
this.min + Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x) < this.maxValue) {
this.minValue = this.min + Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x);
}
if (this.min + Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x) < this.min) {
this.minValue = this.min;
}
/*if (Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x) > this.maxValue) {
this.minValue = this.maxValue;
}*/
this.propagateChange([this.minValue, this.maxValue]);
};
InputBetweenComponent.prototype.calcMaxValue = function (mouseX) {
var rect = this.elRef.nativeElement.getBoundingClientRect();
var x = mouseX - rect.left;
if (this.min + Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x) > this.minValue &&
this.min + Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x) < this.max) {
this.maxValue = this.min + Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x);
}
/*if (Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x) < this.minValue) {
this.maxValue = this.minValue;
}*/
if (this.min + Math.round(((this.max - this.min) / (this.elRef.nativeElement.clientWidth)) * x) > this.max) {
this.maxValue = this.max;
}
this.propagateChange([this.minValue, this.maxValue]);
};
var InputBetweenComponent_1;
InputBetweenComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: DomSanitizer }
]; };
__decorate([
Input()
], InputBetweenComponent.prototype, "placeholder", void 0);
__decorate([
Input()
], InputBetweenComponent.prototype, "max", void 0);
__decorate([
Input()
], InputBetweenComponent.prototype, "min", void 0);
__decorate([
ViewChild('tearMax')
], InputBetweenComponent.prototype, "tearMax", void 0);
__decorate([
ViewChild('tearMin')
], InputBetweenComponent.prototype, "tearMin", void 0);
__decorate([
HostListener('window:resize')
], InputBetweenComponent.prototype, "resize", null);
InputBetweenComponent = InputBetweenComponent_1 = __decorate([
Component({
selector: 'fg-input-between',
template: "<div class=\"inputWrap noselect\"\n (touchmove)=\"processTouchEvent($event)\"\n (mousemove)=\"processMouseEvent($event)\"\n (mouseleave)=\"tearMin.classList.remove('active');tearMax.classList.remove('active');handleMouseLeave($event)\"\n (mouseup)=\"tearMax.classList.remove('active');maxTearMouseDown=false;tearMin.classList.remove('active');minTearMouseDown=false;\"\n (touchend)=\"tearMin.classList.remove('active');tearMax.classList.remove('active');handleTouchEnd($event)\"\n>\n <div class=\"fakeInputRange\">\n <div #tearMin class=\"tear\" [style.transform]=\"tearMinStyle\"\n [class.up]=\"minValue> 0 && maxValue===max\"\n (mousedown)=\"tearMinDown()\"\n (touchstart)=\"tearMinDown()\"\n >\n <span>{{minValue}}</span>\n </div>\n\n <div #tearMax class=\"tear\" [style.transform]=\"tearMaxStyle\"\n (mousedown)=\"tearMaxDown()\"\n (touchstart)=\"tearMaxDown()\"\n >\n <span>{{maxValue}}</span>\n </div>\n\n <div class=\"sliderLine\">\n <div class=\"sliderBackground\"></div>\n <div [style.width]=\"sliderLineWidthStyle\" [style.left]=\"sliderLineLeftStyle\" class=\"sliderActive\"></div>\n </div>\n </div>\n</div>\n\n\n\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return InputBetweenComponent_1; }),
multi: true
}
],
styles: [":host{display:block;position:relative}:host *{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.up{z-index:10}span{display:block;font-size:22px}.inputWrap{padding-top:32px}.inputWrap .fakeInputRange{position:relative}.inputWrap .fakeInputRange .tear{position:absolute;transition:width .5s,height .5s;width:30px;height:30px;border-radius:0 50% 50%;border:3px solid;transform:rotate(-135deg)}.inputWrap .fakeInputRange .tear span{color:#fff;transition:left .5s,top .5s,font-size .5s;font-size:9px;position:absolute;left:11px;top:11px;transform:translate(-50%,-50%) rotate(-225deg)}.inputWrap .fakeInputRange .tear.active{z-index:7;width:50px;height:50px}.inputWrap .fakeInputRange .tear.active span{font-size:19px;left:20px;top:20px}.sliderLine{margin-top:20px;position:relative}.sliderLine .sliderBackground{width:100%;height:2px;background-color:gray}.sliderLine .sliderActive{position:absolute;height:2px;top:0;left:0}input{opacity:0;top:0;left:0;z-index:1;position:absolute;margin-top:7px;height:100%;font-size:21px;border:1px solid}input.invalid{border:1px solid}"]
})
], InputBetweenComponent);
return InputBetweenComponent;
}());
var CropImage = /** @class */ (function () {
function CropImage(imageCroper, x, y, src) {
var _this = this;
this.imageCroper = imageCroper;
this.x = x;
this.y = y;
this.src = src;
this.loaded = false;
this.rotation = 0;
this.userInputRotation = 0;
this.locked = false;
this.minWidth = 0;
this.minHeight = 0;
this.repositioningSpeed = 1;
this.moveing = false;
this.orignalImage = new Image();
this.orignalImage.src = src;
this.orignalImage.onload = function () {
var fc = document.createElement('canvas');
var fctx = fc.getContext("2d");
var oc = document.createElement('canvas');
var octx = oc.getContext('2d');
//document.body.append(oc);
//document.body.append(fc);
if (_this.orignalImage.width > _this.orignalImage.height) {
fc.width = (_this.orignalImage.width / _this.orignalImage.height) * _this.imageCroper.config.height;
fc.height = _this.imageCroper.config.height;
}
else {
fc.width = _this.imageCroper.config.width;
fc.height = (_this.orignalImage.height / _this.orignalImage.width) * _this.imageCroper.config.width;
}
var steps = Math.ceil(Math.log(_this.orignalImage.width / _this.imageCroper.config.width) / Math.log(2));
//console.log(fc);
// console.log(this.orignalImage.width, this.orignalImage.height);
oc.width = _this.orignalImage.width * 0.5;
oc.height = _this.orignalImage.height * 0.5;
octx.drawImage(_this.orignalImage, 0, 0, oc.width, oc.height);
var factor = 1;
for (var i = 0; i < steps - 3; i++) {
octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
factor *= 0.5;
}
fctx.drawImage(oc, 0, 0, oc.width * factor, oc.height * factor, 0, 0, fctx.canvas.width, fctx.canvas.height);
_this.image = new Image();
_this.image.src = fc.toDataURL();
_this.image.onload = function () {
console.log(_this.image.width);
_this.originalWidth = _this.image.width;
_this.originalHeight = _this.image.height;
_this.width = _this.originalWidth;
_this.height = _this.originalHeight;
_this.coverCanvas();
_this.loaded = true;
};
};
}
CropImage.prototype.setMinSize = function () {
if (this.userInputRotation === 0) {
switch (this.rotation) {
case 0: {
if (this.originalWidth >= this.originalHeight) {
this.setMinSizeByWidth(this.imageCroper.canvas.width);
}
if (this.originalHeight >= this.originalWidth) {
this.setMinSizeByHeight(this.imageCroper.canvas.height);
}
break;
}
case -90: {
if (this.originalWidth >= this.originalHeight) {
this.setMinSizeByHeight(this.imageCroper.canvas.width);
}
if (this.originalHeight >= this.originalWidth) {
this.setMinSizeByWidth(this.imageCroper.canvas.height);
}
break;
}
case -180: {
if (this.originalWidth >= this.originalHeight) {
this.setMinSizeByWidth(this.imageCroper.canvas.width);
}
if (this.originalHeight >= this.originalWidth) {
this.setMinSizeByHeight(this.imageCroper.canvas.height);
}
break;
}
case -270: {
if (this.originalWidth >= this.originalHeight) {
this.setMinSizeByHeight(this.imageCroper.canvas.width);
}
if (this.originalHeight >= this.originalWidth) {
this.setMinSizeByWidth(this.imageCroper.canvas.height);
}
break;
}
}
if (this.minWidth < this.imageCroper.canvas.width || this.minHeight < this.imageCroper.canvas.height) {
if (this.rotation === 0 || this.rotation === -180) {
if (this.imageCroper.canvas.width > this.imageCroper.canvas.height) {
this.setMinSizeByWidth(this.imageCroper.canvas.width);
}
else {
this.setMinSizeByHeight(this.imageCroper.canvas.height);
}
}
else {
if (this.imageCroper.canvas.width > this.imageCroper.canvas.height) {
this.setMinSizeByHeight(this.imageCroper.canvas.width);
}
else {
this.setMinSizeByWidth(this.imageCroper.canvas.height);
}
}
}
}
};
CropImage.prototype.drawImageToCanvas = function (ctx) {
if (ctx === void 0) { ctx = this.imageCroper.ctx; }
var x = (this.x / this.imageCroper.canvas.width) * ctx.canvas.width;
var y = (this.y / this.imageCroper.canvas.height) * ctx.canvas.height;
var width = (this.width / this.imageCroper.canvas.width) * ctx.canvas.width;
var height = (this.height / this.imageCroper.canvas.height) * ctx.canvas.height;
ctx.beginPath();
ctx.translate(x, y);
ctx.rotate((Math.PI / 180) * (this.rotation + this.userInputRotation));
ctx.imageSmoothingEnabled = false;
ctx.drawImage(this.orignalImage, -width * 0.5, -height * 0.5, width, height);
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.closePath();
};
CropImage.prototype.render = function () {
if (this.loaded) {
this.drawImageToCanvas();
}
};
CropImage.prototype.resize = function (factor) {
var verhaeltinis = this.originalHeight / this.originalWidth;
this.width = this.width * factor;
this.height = verhaeltinis * this.width;
this.coverCanvas();
};
CropImage.prototype.coverCanvas = function () {
var overLeftBorder = false;
var overRightBorder = false;
var overTopBorder = false;
var overBottomBorder = false;
this.setMinSize();
if (this.minHeight > this.height || this.minWidth > this.width) {
this.width = this.minWidth;
this.height = this.minHeight;
// console.log(`set min size ${this.width} ${this.height}`);
}
if (this.rotation === 0 || this.rotation === -180) {
if (this.x - (this.width / 2) > 0) { // over left border
this.x = (this.width / 2);
overLeftBorder = true;
}
if (this.x + (this.width / 2) < this.imageCroper.canvas.width) { // over right border
this.x = this.imageCroper.canvas.width - (this.width / 2);
overRightBorder = true;
}
if (this.y - (this.height / 2) > 0) { // over top
this.y = (this.height / 2);
overTopBorder = true;
}
if (this.y + (this.height / 2) < this.imageCroper.canvas.height) { // bottom border
this.y = this.imageCroper.canvas.height - (this.height / 2);
overBottomBorder = true;
}
if (this.originalWidth < this.originalHeight) {
if (overLeftBorder && overRightBorder) {
this.x = (this.imageCroper.canvas.width / 2);
this.resizeByWidth(this.imageCroper.canvas.width);
if (overTopBorder) {
this.y = (this.height / 2);
}
if (overBottomBorder) {
this.y = this.imageCroper.canvas.height - (this.height / 2);
}
}
}
else {
if (overTopBorder && overBottomBorder) {
this.y = (this.imageCroper.canvas.height / 2);
this.resizeByHeight(this.imageCroper.canvas.height);
if (overLeftBorder) {
this.x = (this.width / 2);
}
if (overRightBorder) {
this.x = this.imageCroper.canvas.width - (this.width / 2);
}
}
}
}
else if (this.rotation === -90 || this.rotation === -270) {
if (this.x - (this.height / 2) > 0) { // over left border
this.x = (this.height / 2);
overLeftBorder = true;
}
if (this.x + (this.height / 2) < this.imageCroper.canvas.width) { // over right border
this.x = this.imageCroper.canvas.width - (this.height / 2);
overRightBorder = true;
}
if (this.y - (this.width / 2) > 0) { // over top
this.y = (this.width / 2);
overTopBorder = true;
}
if (this.y + (this.width / 2) < this.imageCroper.canvas.height) { // bottom border
this.y = this.imageCroper.canvas.height - (this.width / 2);
overBottomBorder = true;
}
if (this.originalWidth > this.originalHeight) {
if (overTopBorder && overBottomBorder) {
this.y = (this.imageCroper.canvas.height / 2);
this.resizeByWidth(this.imageCroper.canvas.height);
if (overLeftBorder) {
this.x = (this.height / 2);
}
if (overRightBorder) {
this.x = this.imageCroper.canvas.width - (this.height / 2);
}
}
}
else {
if (overLeftBorder && overRightBorder) {
this.x = (this.imageCroper.canvas.width / 2);
this.resizeByHeight(this.imageCroper.canvas.width);
if (overTopBorder) {
this.y = (this.width / 2);
}
if (overBottomBorder) {
this.y = this.imageCroper.canvas.height - (this.width / 2);
}
}
}
}
// console.log("cover");
};
CropImage.prototype.resizeOriginalImage = function (factor) {
var verhaeltinis = this.originalHeight / this.originalWidth;
this.width = this.originalWidth * factor;
this.height = verhaeltinis * this.width;
};
CropImage.prototype.resetOriginalImage = function () {
this.originalWidth = this.width;
this.originalHeight = this.height;
};
CropImage.prototype.resizeByDeltaHeight = function (delataHeight) {
var verhaeltinis = this.originalWidth / this.originalHeight;
this.height += delataHeight;
this.width = this.height * verhaeltinis;
};
CropImage.prototype.resizeByDeltaWidth = function (delataWidth) {
var verhaeltinis = this.originalHeight / this.originalWidth;
this.width += delataWidth;
this.height = verhaeltinis * this.width;
};
CropImage.prototype.resizeByWidth = function (width) {
var verhaeltinis = this.originalHeight / this.originalWidth;
this.width = width;
this.height = verhaeltinis * width;
};
CropImage.prototype.resizeByHeight = function (height) {
var verhaeltinis = this.originalWidth / this.originalHeight;
this.height = height;
this.width = verhaeltinis * this.height;
};
CropImage.prototype.setUserInputRotation = function (deg) {
this.userInputRotation = deg;
this.setMinSize();
};
CropImage.prototype.setMinSizeByWidth = function (newWidth) {
//console.log("set new witdh: ", newWidth);
var heightWidthRatio = this.originalHeight / this.originalWidth;
this.minWidth = newWidth;
this.minHeight = heightWidthRatio * this.minWidth;
};
CropImage.prototype.setMinSizeByHeight = function (newHeight) {
//console.log("set new height : ", newHeight);
var widthHeightRatio = this.originalWidth / this.originalHeight;
this.minHeight = newHeight;
this.minWidth = widthHeightRatio * this.minHeight;
};
return CropImage;
}());
var GestureHandler = /** @class */ (function () {
function GestureHandler(imageCroper) {
var _this = this;
this.imageCroper = imageCroper;
this.imageCroper.canvas.onmousemove = function (evt) {
_this.handleMove(evt);
};
this.imageCroper.canvas.ontouchmove = function (evt) {
evt.preventDefault();
_this.handleTouch(evt);
};
this.imageCroper.canvas.onwheel = function (evt) {
event.preventDefault();
if (evt.deltaY < 0) {
_this.imageCroper.cropImage.resize(1.1);
}
else {
if (!_this.imageCroper.cropImage.locked) {
_this.imageCroper.cropImage.resize(0.9);
}
}
};
}
GestureHandler.prototype.handleMove = function (evt) {
//console.log("move");
var halfImageWidth = this.imageCroper.cropImage.width * 0.5;
var halfImageHeight = this.imageCroper.cropImage.height * 0.5;
var newImageX = this.imageCroper.cropImage.x + this.imageCroper.mouse.x - this.imageCroper.mouse.lastX;
var newImageY = this.imageCroper.cropImage.y + this.imageCroper.mouse.y - this.imageCroper.mouse.lastY;
var mouseXdiff = this.imageCroper.mouse.x - this.imageCroper.mouse.lastX;
var mouseYdiff = this.imageCroper.mouse.y - this.imageCroper.mouse.lastY;
if (this.imageCroper.mouse.isDown && !this.imageCroper.cropImage.locked) {
if ((this.imageCroper.cropImage.rotation === 0 || this.imageCroper.cropImage.rotation === -180) &&
this.imageCroper.cropImage.userInputRotation === 0) { // with, height is default
if ((newImageX - halfImageWidth <= 0 && newImageX + halfImageWidth >= this.imageCroper.canvas.width) ||
this.imageCroper.cropImage.userInputRotation !== 0) {
this.imageCroper.cropImage.x += mouseXdiff;
}
if ((newImageY + halfImageHeight >= this.imageCroper.canvas.height && newImageY - halfImageHeight <= 0) ||
this.imageCroper.cropImage.userInputRotation !== 0) {
this.imageCroper.cropImage.y += mouseYdiff;
}
}
else { // with, height is switched
if ((newImageX - halfImageHeight <= 0 && newImageX + halfImageHeight >= this.imageCroper.canvas.width) ||
this.imageCroper.cropImage.userInputRotation !== 0) {
this.imageCroper.cropImage.x += mouseXdiff;
}
if ((newImageY + halfImageWidth >= this.imageCroper.canvas.height && (newImageY - halfImageWidth) <= 0) ||
this.imageCroper.cropImage.userInputRotation !== 0) {
this.imageCroper.cropImage.y += mouseYdiff;
}
}
}
this.imageCroper.mouse.syncPosition(evt);
};
GestureHandler.prototype.handleTouch = function (evt) {
var halfImageWidth = this.imageCroper.cropImage.width * 0.5;
var halfImageHeight = this.imageCroper.cropImage.height * 0.5;
var newImageX = this.imageCroper.cropImage.x + this.imageCroper.mouse.x - this.imageCroper.mouse.lastX;
var newImageY = this.imageCroper.cropImage.y + this.imageCroper.mouse.y - this.imageCroper.mouse.lastY;
var mouseXdiff = this.imageCroper.mouse.x - this.imageCroper.mouse.lastX;
var mouseYdiff = this.imageCroper.mouse.y - this.imageCroper.mouse.lastY;
if (this.imageCroper.mouse.isDown && !this.imageCroper.cropImage.locked) {
if ((this.imageCroper.cropImage.rotation === 0 || this.imageCroper.cropImage.rotation === -180) &&
this.imageCroper.cropImage.userInputRotation === 0) { // with, height is default
if ((newImageX - halfImageWidth <= 0 && newImageX + halfImageWidth >= this.imageCroper.canvas.width) ||
this.imageCroper.cropImage.userInputRotation !== 0) {
this.imageCroper.cropImage.x += mouseXdiff;
}
if ((newImageY + halfImageHeight >= this.imageCroper.canvas.height && newImageY - halfImageHeight <= 0) ||
this.imageCroper.cropImage.userInputRotation !== 0) {
this.imageCroper.cropImage.y += mouseYdiff;
}
}
else { // with, height is switched
if ((newImageX - halfImageHeight <= 0 && newImageX + halfImageHeight >= this.imageCroper.canvas.width) ||
this.imageCroper.cropImage.userInputRotation !== 0) {
this.imageCroper.cropImage.x += mouseXdiff;
}
if ((newImageY + halfImageWidth >= this.imageCroper.canvas.height && (newImageY - halfImageWidth) <= 0) ||
this.imageCroper.cropImage.userInputRotation !== 0) {
this.imageCroper.cropImage.y += mouseYdiff;
}
}
}
this.imageCroper.mouse.syncTouchPosition(evt);
};
return GestureHandler;
}());
var Mouse = /** @class */ (function () {
function Mouse(imageCroper) {
var _this = this;
this.imageCroper = imageCroper;
this.pinching = false;
this.lastX = 0;
this.lastY = 0;
this.isDown = false;
this.imageCroper.canvas.style.cursor = 'grab';
this.imageCroper.canvas.onmousedown = function (evt) {
_this.imageCroper.canvas.style.cursor = 'grabbing';
_this.syncPosition(evt);
_this.lastY = _this.y;
_this.lastX = _this.x;
_this.isDown = true;
_this.imageCroper.cropImage.moveing = true;
};
this.imageCroper.canvas.onmouseup = function () {
_this.imageCroper.canvas.style.cursor = 'grab';
_this.isDown = false;
};
this.imageCroper.canvas.ontouchstart = function (evt) {
_this.imageCroper.canvas.style.cursor = 'grabbing';
_this.syncTouchPosition(evt);
_this.lastY = _this.y;
_this.lastX = _this.x;
_this.isDown = true;
_this.imageCroper.cropImage.moveing = true;
};
this.imageCroper.canvas.ontouchend = function () {
_this.imageCroper.canvas.style.cursor = 'grab';
_this.isDown = false;
};
}
Mouse.prototype.syncPosition = function (evt) {
var rect = this.imageCroper.canvas.getBoundingClientRect();
this.lastX = this.x;
this.lastY = this.y;
this.x = evt.clientX - rect.left;
this.y = ((evt.clientY - rect.top));
};
Mouse.prototype.syncTouchPosition = function (evt) {
var rect = this.imageCroper.canvas.getBoundingClientRect();
this.lastX = this.x;
this.lastY = this.y;
this.x = evt.touches[0].clientX - rect.left;
this.y = ((evt.touches[0].clientY - rect.top));
};
return Mouse;
}());
var ImageCroper = /** @class */ (function () {
function ImageCroper(canvas, offscreenCanvas, width, height, imageSrc, config) {
this.canvas = canvas;
this.offscreenCanvas = offscreenCanvas;
this.width = width;
this.height = height;
this.config = config;
this.raster = false;
this.rasterLevelIndex = 0;
this.ctx = this.setupCanvas(this.canvas);
this.offscreenCtx = this.setupCanvas(this.offscreenCanvas);
this.canvas.width = config.width;
this.canvas.height = config.height;
this.offscreenCanvas.width = config.width;
this.offscreenCanvas.height = config.height;
this.imageHeightWidthRatio = this.config.height / this.config.width;
this.imageWidthHeightRatio = this.config.width / this.config.height;
this.setCanvasSize();
this.cropImage = new CropImage(this, this.canvas.width / 2, this.canvas.height / 2, imageSrc);
this.gestureHandler = new GestureHandler(this);
this.mouse = new Mouse(this);
this.cropImage.coverCanvas();
}
ImageCroper.prototype.resize = function () {
//console.log("resize imagecropper");
var toSmall = this.setCanvasSize();
this.cropImage.coverCanvas();
return toSmall;
};
ImageCroper.prototype.clear = function () {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
};
ImageCroper.prototype.render = function () {
this.clear();
this.cropImage.render();
if (this.raster) {
var strecke = this.canvas.height / this.config.rasterLevels[this.rasterLevelIndex];
var streckeT = 0;
for (var i = 0; i <= this.config.rasterLevels[this.rasterLevelIndex]; i++) {
this.ctx.beginPath();
this.ctx.moveTo(0, streckeT);
this.ctx.lineTo(this.canvas.width, streckeT);
this.ctx.strokeStyle = 'white';
this.ctx.stroke();
this.ctx.closePath();
streckeT += strecke;
}
strecke = this.canvas.width / this.config.rasterLevels[this.rasterLevelIndex];
streckeT = 0;
for (var i = 0; i <= this.config.rasterLevels[this.rasterLevelIndex]; i++) {
this.ctx.beginPath();
this.ctx.moveTo(streckeT, 0);
this.ctx.lineTo(streckeT, this.canvas.height);
this.ctx.strokeStyle = 'white';
this.ctx.stroke();
this.ctx.closePath();
streckeT += strecke;
}
}
};
ImageCroper.prototype.rotateImage = function (deg) {
this.cropImage.rotation = deg;
};
ImageCroper.prototype.switchRasterLevelIndex = function () {
if (this.raster) {
if (this.rasterLevelIndex + 1 < this.config.rasterLevels.length) {
this.rasterLevelIndex++;
}
else {
this.raster = false;
}
}
else {
this.rasterLevelIndex = 0;
this.raster = true;
}
};
ImageCroper.prototype.setupCanvas = function (canvas) {
// Get the device pixel ratio, falling back to 1.
var dpr = window.devicePixelRatio || 1;
// Get the size of the canvas in CSS pixels.
var rect = canvas.getBoundingClientRect();
// Give the canvas pixel dimensions of their CSS
// size * the device pixel ratio.
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
var ctx = canvas.getContext('2d');
// Scale all drawing operations by the dpr, so you
// don't have to worry about the difference.
ctx.scale(dpr, dpr);
return ctx;
};
ImageCroper.prototype.setCanvasSize = function () {
this.canvas.width = this.canvas.parentElement.clientWidth;
this.canvas.height = this.canvas.width * this.imageHeightWidthRatio;
this.offscreenCanvas.width = this.width;
this.offscreenCanvas.height = this.height;
var reducedCanvasHeight = (this.canvas.parentElement.parentElement.clientHeight - 350);
if (reducedCanvasHeight < 0) {
return true;
}
if (this.canvas.height > reducedCanvasHeight && this.canvas.width < this.config.width && this.canvas.height < this.config.height) {
this.canvas.height = reducedCanvasHeight;
this.canvas.width = this.canvas.height * this.imageWidthHeightRatio;
}
else {
this.canvas.width = this.config.width;
this.canvas.height = this.config.height;
}
return false;
};
return ImageCroper;
}());
var ImageCropperComponent = /** @class */ (function () {
function ImageCropperComponent(cdRef) {
this.cdRef = cdRef;
this.imageSrc = null;
this.config = null;
this.continue = new EventEmitter();
this.cancle = new EventEmitter();
this.toSmall = false;
this.animationFrameHandler = null;
}
ImageCropperComponent.prototype.ngAfterViewInit = function () {
if (this.imageSrc === null) {
throw new Error("Ng Fancy GUI: No imagesrc was passed in to the imagecropper component");
}
if (this.config === null) {
this.config = new ImageCropperConfig(500, 500, [4, 8, 16]);
}
if (this.config instanceof ImageCropperConfig) {
this.imageCroper = new ImageCroper(this.cropperCanvas.nativeElement, this.offscreenCanvas.nativeElement, this.config.width, this.config.height, this.imageSrc, this.config);
console.log("immageCropper:", this.imageCroper);
this.startLoop();
this.resize();
this.cdRef.detectChanges();
}
else {
throw new Error("Ng Fancy GUI: Config passed in to imagecropper was not of type ImageCropperConfig");
}
};
ImageCropperComponent.prototype.zoom = function (x) {
if (x > 0) {
this.imageCroper.cropImage.resize(1.01);
}
else if (x < 0) {
this.imageCroper.cropImage.resize(0.99);
}
};
ImageCropperComponent.prototype.startLoop = function () {
var _this = this;
var step = function () {
_this.imageCroper.render();
_this.animationFrameHandler = window.requestAnimationFrame(step);
//console.log("render");
};
this.animationFrameHandler = window.requestAnimationFrame(step);
};
ImageCropperComponent.prototype.resize = function () {
this.toSmall = this.imageCroper.resize();
};
ImageCropperComponent.prototype.ngOnDestroy = function () {
window.cancelAnimationFrame(this.animationFrameHandler);
//console.log("destroy");
};
ImageCropperComponent.prototype.pinch = function (event) {
this.pinchEvent = event;
this.imageCroper.cropImage.resizeOriginalImage(event.scale);
};
ImageCropperComponent.prototype.pinchEnd = function () {
this.imageCroper.cropImage.resetOriginalImage();
};
ImageCropperComponent.prototype.toggleRaster = function () {
this.imageCroper.switchRasterLevelIndex();
};
ImageCropperComponent.prototype.rotate90Deg = function () {
this.imageCroper.cropImage.rotation -= 90;
if (this.imageCroper.cropImage.rotation === -360) {
this.imageCroper.cropImage.rotation = 0;
}
//console.log(this.imageCroper.cropImage.rotation);
this.imageCroper.cropImage.coverCanvas();
};
ImageCropperComponent.prototype.cancleE = function () {
this.cancle.emit();
};
ImageCropperComponent.prototype.continueE = function () {
this.imageCroper.cropImage.drawImageToCanvas(this.imageCroper.offscreenCtx);
this.continue.emit(this.imageCroper.offscreenCtx.canvas.toDataURL());
};
ImageCropperComponent.ctorParameters = function () { return [
{ type: ChangeDetectorRef }
]; };
__decorate([
ViewChild('cropperCanvas')
], ImageCropperComponent.prototype, "cropperCanvas", void 0);
__decorate([
ViewChild('offscreenCanvas')
], ImageCropperComponent.prototype, "offscreenCanvas", void 0);
__decorate([
Input()
], ImageCropperComponent.prototype, "imageSrc", void 0);
__decorate([
Input()
], ImageCropperComponent.prototype, "config", void 0);
__decorate([
Output()
], ImageCropperComponent.prototype, "continue", void 0);
__decorate([
Output()
], ImageCropperComponent.prototype, "cancle", void 0);
__decorate([
HostListener('window:resize')
], ImageCropperComponent.prototype, "resize", null);
ImageCropperComponent = __decorate([
Component({
selector: 'fg-image-cropper',
template: "<ng-container [class.hidden]=\"imageCroper && imageCroper.cropImage.loaded\">\n <div [class.hidden]=\"!toSmall\" class=\"tosmallOverlay\">\n <div>\n <div>\n <h2>Screen is to small</h2>\n </div>\n <div (click)=\"cancleE()\">\n cancle\n </div>\n </div>\n </div>\n <div class=\"topSection\">\n <div class=\"inner\">\n <h2>Crop Your Image</h2>\n <button (click)=\"rotate90Deg()\" class=\"right\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z\" />\n </svg>\n </button>\n\n <button type=\"button\" (click)=\"toggleRaster()\" class=\"left\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"300\" viewBox=\"0 0 300 300\">\n <g id=\"Gruppe_48\" data-name=\"Gruppe 48\" transform=\"translate(-467.5 -968.5)\">\n <g id=\"Gruppe_47\" data-name=\"Gruppe 47\" transform=\"translate(3 443)\">\n <line id=\"Linie_3\" data-name=\"Linie 3\" y2=\"300\" transform=\"translate(559.5 525.5)\" fill=\"none\"\n stroke=\"#000\" stroke-width=\"20\" />\n <line id=\"Linie_4\" data-name=\"Linie 4\" y2=\"300\" transform=\"translate(669.5 525.5)\" fill=\"none\"\n stroke=\"#000\" stroke-width=\"20\" />\n </g>\n <g id=\"Gruppe_46\" data-name=\"Gruppe 46\" transform=\"translate(135 416)\">\n <line id=\"Linie_5\" data-name=\"Linie 5\" x2=\"300\" transform=\"translate(332.5 647.5)\" fill=\"none\"\n stroke=\"#000\" stroke-width=\"20\" />\n <line id=\"Linie_6\" data-name=\"Linie 6\" x2=\"300\" transform=\"translate(332.5 757.5)\" fill=\"none\"\n stroke=\"#000\" stroke-width=\"20\" />\n </g>\n </g>\n </svg>\n </button>\n </div>\n </div>\n <div class=\"canvasWrap\">\n <canvas #cropperCanvas></canvas>\n <canvas #offscreenCanvas style=\"display: none\"></canvas>\n </div>\n <div class=\"container\">\n <fg-slider-infinite (change)=\"zoom($event)\"></fg-slider-infinite>\n <div class=\"buttonWrapp\">\n <button (click)=\"continueE()\" class=\"btn\" type=\"button\">Continue</button>\n <button (click)=\"cancleE()\" class=\"btn\" type=\"button\">Cancle</button>\n </div>\n </div>\n</ng-container>",
styles: [".buttonWrapp{display:flex;justify-content:space-between}:host{overflow:hidden;display:block}:host *{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.hidden{display:none!important}.tosmallOverlay{text-align:center;width:100%;height:100%;background-color:rgba(0,0,0,.767);color:#fff;display:flex;justify-content:center;align-items:center}canvas{border:1px solid #000}fg-slider-infinite{margin-top:10px;display:block}button{touch-action:none;margin-top:10px}.btn{color:#fff;flex-basis:48%;font-size:20px;border:none;height:50px;padding:9px auto}.canvasWrap{text-align:center;max-width:1000px;margin:0 auto}.topSection{border-bottom:1px solid gray;position:relative;text-align:center}.topSection .inner{margin:0 auto;width:100%;max-width:500px;height:100%;position:relative}.topSection .inner h2{display:inline-block;padding-top:10px;padding-bottom:10px}.topSection .inner button{background-color:transparent;border:none;outline:0;margin-top:0;height:100%;width:52px;position:absolute}.topSection .inner button.left{left:0}.topSection .inner button.right{right:0}.topSection .inner button svg{margin-top:5px;width:30px;height:auto}.topSection .inner button:hover{opacity:.75}.container{max-width:1000px;padding:0 20px;margin:0 auto}"]
})
], ImageCropperComponent);
return ImageCropperComponent;
}());
var InputImageComponent = /** @class */ (function () {
function InputImageComponent(host, fileService, sanitizer) {
this.host = host;
this.fileService = fileService;
this.sanitizer = sanitizer;
this.invalid = false;
this.width = 500;
this.height = 500;
this.value = null;
this.crop = false;
//cropImageSrc: string ="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg";
this.cropperConfig = null;
this.pending = false;
this.previewHeightStyle = null;
this.propagateChange = function (_) {
};
this.markAsTouched = function (_) {
};
}
InputImageComponent_1 = InputImageComponent;
InputImageComponent.prototype.registerOnChange = function (fn) {