@sd-angular/core
Version:
Sd Angular Core Lib
238 lines (232 loc) • 9.69 kB
JavaScript
import { EventEmitter, Component, ChangeDetectorRef, Input, Output, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
import { v4 } from 'uuid';
import Konva from 'konva';
import { Subject, Subscription } from 'rxjs';
import { startWith } from 'rxjs/operators';
var _height, _width, _images, _stage, _layer, _elementRef, _onLoad, _subscription;
class SdMergeImages {
constructor(ref) {
this.ref = ref;
this.id = `I${v4()}`;
this.kImages = [];
_height.set(this, void 0);
_width.set(this, void 0);
_images.set(this, void 0);
_stage.set(this, void 0);
_layer.set(this, void 0);
this.save = new EventEmitter();
_elementRef.set(this, void 0);
_onLoad.set(this, new Subject());
_subscription.set(this, new Subscription());
this.toImage = () => __awaiter(this, void 0, void 0, function* () {
return yield new Promise(resolve => {
var _a;
(_a = __classPrivateFieldGet(this, _stage)) === null || _a === void 0 ? void 0 : _a.toImage({
callback: (image) => {
resolve(image);
}
});
});
});
this.toDataUrl = () => {
return __classPrivateFieldGet(this, _stage).toDataURL();
};
}
set height(height) {
__classPrivateFieldSet(this, _height, +height);
}
set width(width) {
__classPrivateFieldSet(this, _width, +width);
}
set images(images) {
setTimeout(() => {
__classPrivateFieldSet(this, _images, images);
__classPrivateFieldGet(this, _onLoad).next(__classPrivateFieldGet(this, _images));
}, 2000);
}
set container(elementRef) {
if (__classPrivateFieldGet(this, _elementRef) !== elementRef) {
__classPrivateFieldSet(this, _elementRef, elementRef);
__classPrivateFieldGet(this, _onLoad).next(__classPrivateFieldGet(this, _images));
}
}
ngOnInit() {
}
ngAfterViewInit() {
__classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _onLoad).pipe(startWith([])).subscribe(() => {
var _a;
if (!document.getElementById(this.id)) {
return;
}
document.getElementById(this.id).innerHTML = '';
if (!((_a = __classPrivateFieldGet(this, _images)) === null || _a === void 0 ? void 0 : _a.length)) {
return;
}
const images = __classPrivateFieldGet(this, _images);
__classPrivateFieldSet(this, _stage, new Konva.Stage({
container: this.id,
width: __classPrivateFieldGet(this, _width),
height: __classPrivateFieldGet(this, _height)
}));
__classPrivateFieldSet(this, _layer, new Konva.Layer());
__classPrivateFieldGet(this, _stage).add(__classPrivateFieldGet(this, _layer));
for (const [idx, img] of images.entries()) {
let x = 0;
let y = 0;
const width = __classPrivateFieldGet(this, _width) / 2;
const height = __classPrivateFieldGet(this, _height) / 2;
if (images.length === 1) {
x = __classPrivateFieldGet(this, _width) / 4;
y = __classPrivateFieldGet(this, _height) / 4;
}
else if (images.length === 2) {
if (idx === 0) {
x = 0;
y = __classPrivateFieldGet(this, _height) / 4;
}
else if (idx === 1) {
x = __classPrivateFieldGet(this, _width) / 2;
y = __classPrivateFieldGet(this, _height) / 4;
}
}
else if (images.length === 3) {
if (idx === 0) {
x = 0;
y = 0;
}
else if (idx === 1) {
x = __classPrivateFieldGet(this, _width) / 2;
y = 0;
}
else if (idx === 2) {
x = __classPrivateFieldGet(this, _width) / 4;
y = __classPrivateFieldGet(this, _height) / 4;
}
}
else if (images.length === 4) {
if (idx === 0) {
x = 0;
y = 0;
}
else if (idx === 1) {
x = __classPrivateFieldGet(this, _width) / 2;
y = 0;
}
else if (idx === 2) {
x = 0;
y = __classPrivateFieldGet(this, _height) / 2;
}
else if (idx === 3) {
x = __classPrivateFieldGet(this, _width) / 2;
y = __classPrivateFieldGet(this, _height) / 2;
}
}
const image = new Image();
const konvaImage = new Konva.Image({
image,
x,
y,
width,
height,
name: 'image',
draggable: true,
});
this.kImages.push(konvaImage);
image.onload = () => {
konvaImage.image(image);
this.ref.detectChanges();
};
image.crossOrigin = 'Anonymous';
image.src = img;
__classPrivateFieldGet(this, _layer).add(konvaImage);
}
const tr = new Konva.Transformer();
__classPrivateFieldGet(this, _layer).add(tr);
// at this point basic demo is finished!!
// we just have several transforming nodes
__classPrivateFieldGet(this, _layer).draw();
this.ref.detectChanges();
// clicks should select/deselect shapes
__classPrivateFieldGet(this, _stage).on('click tap', (e) => {
// if click on empty area - remove all selections
if (e.target === __classPrivateFieldGet(this, _stage)) {
tr.nodes([]);
__classPrivateFieldGet(this, _layer).draw();
return;
}
// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('rect') && !e.target.hasName('image')) {
return;
}
// do we pressed shift or ctrl?
const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
const isSelected = tr.nodes().indexOf(e.target) >= 0;
if (!metaPressed && !isSelected) {
// if no key pressed and the node is not selected
// select just one
tr.nodes([e.target]);
}
else if (metaPressed && isSelected) {
// if we pressed keys and node was selected
// we need to remove it from selection:
const nodes = tr.nodes().slice(); // use slice to have new copy of array
// remove node from array
nodes.splice(nodes.indexOf(e.target), 1);
tr.nodes(nodes);
}
else if (metaPressed && !isSelected) {
// add the node into selection
const nodes = tr.nodes().concat([e.target]);
tr.nodes(nodes);
}
__classPrivateFieldGet(this, _layer).draw();
});
}));
}
ngOnDestroy() {
__classPrivateFieldGet(this, _subscription).unsubscribe();
}
}
_height = new WeakMap(), _width = new WeakMap(), _images = new WeakMap(), _stage = new WeakMap(), _layer = new WeakMap(), _elementRef = new WeakMap(), _onLoad = new WeakMap(), _subscription = new WeakMap();
SdMergeImages.decorators = [
{ type: Component, args: [{
selector: 'sd-merge-images',
template: "<div [id]=\"id\" #container></div>",
styles: [":host ::ng-deep .konvajs-content{border:2px solid #dadada}"]
},] }
];
SdMergeImages.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
SdMergeImages.propDecorators = {
height: [{ type: Input }],
width: [{ type: Input }],
images: [{ type: Input }],
save: [{ type: Output }],
container: [{ type: ViewChild, args: ['container',] }]
};
class SdKonvaModule {
}
SdKonvaModule.decorators = [
{ type: NgModule, args: [{
declarations: [
SdMergeImages
],
imports: [
CommonModule
],
exports: [
SdMergeImages
]
},] }
];
/*
* Public API Surface of superdev-angular-core
*/
/**
* Generated bundle index. Do not edit.
*/
export { SdKonvaModule, SdMergeImages };
//# sourceMappingURL=sd-angular-core-konva.js.map