@stemy/ngx-utils 19.4.6 → 19.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/stemy-ngx-utils.mjs +469 -3
- package/fesm2022/stemy-ngx-utils.mjs.map +1 -1
- package/ngx-utils/common-types.d.ts +36 -0
- package/ngx-utils/components/interactive-canvas/interactive-canvas.component.d.ts +59 -0
- package/ngx-utils/components/interactive-canvas/interactive-circle.component.d.ts +15 -0
- package/ngx-utils/components/interactive-canvas/interactive-item.component.d.ts +40 -0
- package/ngx-utils/components/interactive-canvas/interactive-rect.component.d.ts +16 -0
- package/ngx-utils/ngx-utils.imports.d.ts +4 -1
- package/ngx-utils/ngx-utils.module.d.ts +9 -5
- package/ngx-utils/utils/geometry.d.ts +1 -5
- package/package.json +1 -1
- package/public_api.d.ts +6 -2
|
@@ -6892,6 +6892,468 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
6892
6892
|
}]
|
|
6893
6893
|
}] });
|
|
6894
6894
|
|
|
6895
|
+
class InteractiveItemComponent {
|
|
6896
|
+
set x(value) {
|
|
6897
|
+
if (isNaN(value))
|
|
6898
|
+
return;
|
|
6899
|
+
this.pos = new Point(value, this.pos.y);
|
|
6900
|
+
}
|
|
6901
|
+
set y(value) {
|
|
6902
|
+
if (isNaN(value))
|
|
6903
|
+
return;
|
|
6904
|
+
this.pos = new Point(this.pos.x, value);
|
|
6905
|
+
}
|
|
6906
|
+
set position(value) {
|
|
6907
|
+
if (!(value instanceof Point))
|
|
6908
|
+
return;
|
|
6909
|
+
this.pos = value;
|
|
6910
|
+
}
|
|
6911
|
+
get shapes() {
|
|
6912
|
+
return this.mShapes;
|
|
6913
|
+
}
|
|
6914
|
+
get canvas() {
|
|
6915
|
+
return null;
|
|
6916
|
+
}
|
|
6917
|
+
get position() {
|
|
6918
|
+
return this.pos;
|
|
6919
|
+
}
|
|
6920
|
+
get x() {
|
|
6921
|
+
return this.pos.x;
|
|
6922
|
+
}
|
|
6923
|
+
get y() {
|
|
6924
|
+
return this.pos.y;
|
|
6925
|
+
}
|
|
6926
|
+
get shape() {
|
|
6927
|
+
return null;
|
|
6928
|
+
}
|
|
6929
|
+
constructor() {
|
|
6930
|
+
this.onClick = new EventEmitter();
|
|
6931
|
+
this.onPan = new EventEmitter();
|
|
6932
|
+
this.onPanStart = new EventEmitter();
|
|
6933
|
+
this.onPanEnd = new EventEmitter();
|
|
6934
|
+
this.active = false;
|
|
6935
|
+
this.index = -1;
|
|
6936
|
+
this.basePan = 0;
|
|
6937
|
+
this.pos = Point.Zero;
|
|
6938
|
+
this.rotation = 0;
|
|
6939
|
+
this.direction = "none";
|
|
6940
|
+
this.mShapes = [];
|
|
6941
|
+
this.subscription = ObservableUtils.multiSubscription(this.onPanStart.subscribe(() => {
|
|
6942
|
+
this.deltaX = 0;
|
|
6943
|
+
this.deltaY = 0;
|
|
6944
|
+
}), this.onPan.subscribe(ev => {
|
|
6945
|
+
const dx = ev.deltaX - this.deltaX;
|
|
6946
|
+
const dy = ev.deltaY - this.deltaY;
|
|
6947
|
+
switch (this.direction) {
|
|
6948
|
+
case "free":
|
|
6949
|
+
this.x += dx;
|
|
6950
|
+
this.y += dy;
|
|
6951
|
+
break;
|
|
6952
|
+
case "horizontal":
|
|
6953
|
+
this.x += dx;
|
|
6954
|
+
break;
|
|
6955
|
+
case "vertical":
|
|
6956
|
+
this.y += dy;
|
|
6957
|
+
break;
|
|
6958
|
+
}
|
|
6959
|
+
if (this.direction !== "none") {
|
|
6960
|
+
this.calcShapes();
|
|
6961
|
+
}
|
|
6962
|
+
this.deltaX = ev.deltaX;
|
|
6963
|
+
this.deltaY = ev.deltaY;
|
|
6964
|
+
}));
|
|
6965
|
+
}
|
|
6966
|
+
ngOnDestroy() {
|
|
6967
|
+
this.subscription?.unsubscribe();
|
|
6968
|
+
}
|
|
6969
|
+
ngOnChanges() {
|
|
6970
|
+
this.calcShapes();
|
|
6971
|
+
}
|
|
6972
|
+
calcShapes(basePan) {
|
|
6973
|
+
const canvas = this.canvas;
|
|
6974
|
+
const ratio = canvas.ratio;
|
|
6975
|
+
const x = this.pos.x * ratio;
|
|
6976
|
+
this.basePan = basePan ?? this.basePan;
|
|
6977
|
+
this.mShapes = [0, 1, 2].map(cycle => {
|
|
6978
|
+
const y = this.pos.y * ratio + this.basePan + cycle * canvas.fullHeight;
|
|
6979
|
+
return this.calcShape(x, y);
|
|
6980
|
+
});
|
|
6981
|
+
}
|
|
6982
|
+
hit(point) {
|
|
6983
|
+
for (const shape of this.shapes) {
|
|
6984
|
+
if (shape.distance(point) <= 0)
|
|
6985
|
+
return true;
|
|
6986
|
+
}
|
|
6987
|
+
return false;
|
|
6988
|
+
}
|
|
6989
|
+
calcShape(x, y) {
|
|
6990
|
+
return null;
|
|
6991
|
+
}
|
|
6992
|
+
draw(ctx, scale = 1) {
|
|
6993
|
+
this.shapes.forEach(shape => {
|
|
6994
|
+
ctx.beginPath();
|
|
6995
|
+
ctx.arc(shape.x, shape.y, 3 * scale, 0, Math.PI * 2);
|
|
6996
|
+
ctx.closePath();
|
|
6997
|
+
ctx.fill();
|
|
6998
|
+
ctx.stroke();
|
|
6999
|
+
});
|
|
7000
|
+
}
|
|
7001
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InteractiveItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7002
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: InteractiveItemComponent, isStandalone: false, selector: "__interactive-item__", inputs: { x: "x", y: "y", position: "position", rotation: "rotation", direction: "direction", disabled: "disabled" }, outputs: { onClick: "onClick", onPan: "onPan", onPanStart: "onPanStart", onPanEnd: "onPanEnd" }, usesOnChanges: true, ngImport: i0, template: "", isInline: true }); }
|
|
7003
|
+
}
|
|
7004
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InteractiveItemComponent, decorators: [{
|
|
7005
|
+
type: Component,
|
|
7006
|
+
args: [{
|
|
7007
|
+
standalone: false,
|
|
7008
|
+
selector: "__interactive-item__",
|
|
7009
|
+
template: ""
|
|
7010
|
+
}]
|
|
7011
|
+
}], ctorParameters: () => [], propDecorators: { x: [{
|
|
7012
|
+
type: Input
|
|
7013
|
+
}], y: [{
|
|
7014
|
+
type: Input
|
|
7015
|
+
}], position: [{
|
|
7016
|
+
type: Input
|
|
7017
|
+
}], rotation: [{
|
|
7018
|
+
type: Input
|
|
7019
|
+
}], direction: [{
|
|
7020
|
+
type: Input
|
|
7021
|
+
}], disabled: [{
|
|
7022
|
+
type: Input
|
|
7023
|
+
}], onClick: [{
|
|
7024
|
+
type: Output
|
|
7025
|
+
}], onPan: [{
|
|
7026
|
+
type: Output
|
|
7027
|
+
}], onPanStart: [{
|
|
7028
|
+
type: Output
|
|
7029
|
+
}], onPanEnd: [{
|
|
7030
|
+
type: Output
|
|
7031
|
+
}] } });
|
|
7032
|
+
|
|
7033
|
+
class InteractiveCanvasComponent {
|
|
7034
|
+
constructor(renderer) {
|
|
7035
|
+
this.renderer = renderer;
|
|
7036
|
+
this.horizontal = false;
|
|
7037
|
+
this.selectedIndex = 0;
|
|
7038
|
+
this.resizeMode = "fit";
|
|
7039
|
+
this.onDraw = () => { };
|
|
7040
|
+
this.selectedIndexChange = new EventEmitter();
|
|
7041
|
+
this.shouldDraw = true;
|
|
7042
|
+
this.panOffset = 0;
|
|
7043
|
+
this.pan = 0;
|
|
7044
|
+
this.rotation = 0;
|
|
7045
|
+
this.canvasWidth = 0;
|
|
7046
|
+
this.canvasHeight = 0;
|
|
7047
|
+
this.hoveredItem = null;
|
|
7048
|
+
this.selectedItem = null;
|
|
7049
|
+
this.items = [];
|
|
7050
|
+
this.touched = false;
|
|
7051
|
+
this.panFrom = 0;
|
|
7052
|
+
}
|
|
7053
|
+
ngOnInit() {
|
|
7054
|
+
this.redraw();
|
|
7055
|
+
}
|
|
7056
|
+
ngOnDestroy() {
|
|
7057
|
+
this.shouldDraw = false;
|
|
7058
|
+
this.subscription?.unsubscribe();
|
|
7059
|
+
}
|
|
7060
|
+
ngOnChanges() {
|
|
7061
|
+
this.resize();
|
|
7062
|
+
}
|
|
7063
|
+
ngAfterViewInit() {
|
|
7064
|
+
this.subscription = this.itemList.changes.subscribe(() => this.fixItems());
|
|
7065
|
+
this.fixItems();
|
|
7066
|
+
}
|
|
7067
|
+
resize() {
|
|
7068
|
+
if (!this.canvasElem || !this.containerElem || !this.realWidth || !this.realWidth)
|
|
7069
|
+
return;
|
|
7070
|
+
const canvas = this.canvasElem.nativeElement;
|
|
7071
|
+
const container = this.containerElem.nativeElement;
|
|
7072
|
+
// Calculate canvas size
|
|
7073
|
+
const axisX = this.horizontal ? "height" : "width";
|
|
7074
|
+
const axisY = this.horizontal ? "width" : "height";
|
|
7075
|
+
const resize = this.resizeMode == "fit" ? Math.min : Math.max;
|
|
7076
|
+
canvas.width = container.clientWidth;
|
|
7077
|
+
canvas.height = container.clientHeight;
|
|
7078
|
+
this.ratio = resize(canvas[axisX] / this.realWidth, canvas[axisY] / this.realHeight);
|
|
7079
|
+
if (this.resizeMode == "fit") {
|
|
7080
|
+
canvas[axisX] = this.realWidth * this.ratio;
|
|
7081
|
+
canvas[axisY] = this.realHeight * this.ratio;
|
|
7082
|
+
}
|
|
7083
|
+
this.canvasWidth = canvas[axisX];
|
|
7084
|
+
this.canvasHeight = canvas[axisY];
|
|
7085
|
+
this.fullHeight = this.realHeight * this.ratio;
|
|
7086
|
+
this.panOffset = -this.fullHeight;
|
|
7087
|
+
this.fixPan();
|
|
7088
|
+
}
|
|
7089
|
+
onTouchStart($event) {
|
|
7090
|
+
this.hoveredItem = this.getItemUnderPointer($event.touches.item(0));
|
|
7091
|
+
this.touched = true;
|
|
7092
|
+
}
|
|
7093
|
+
onTouchEnd($event) {
|
|
7094
|
+
this.selectItem($event.touches.item(0));
|
|
7095
|
+
}
|
|
7096
|
+
onMouseDown() {
|
|
7097
|
+
this.touched = true;
|
|
7098
|
+
}
|
|
7099
|
+
onMouseUp($event) {
|
|
7100
|
+
this.selectItem($event);
|
|
7101
|
+
}
|
|
7102
|
+
onMouseMove($event) {
|
|
7103
|
+
if (this.touched)
|
|
7104
|
+
return;
|
|
7105
|
+
this.hoveredItem = this.getItemUnderPointer($event);
|
|
7106
|
+
this.updateCursor();
|
|
7107
|
+
}
|
|
7108
|
+
onMouseLeave() {
|
|
7109
|
+
this.hoveredItem = null;
|
|
7110
|
+
this.updateCursor();
|
|
7111
|
+
}
|
|
7112
|
+
onPanStart($event) {
|
|
7113
|
+
this.lockedItem = this.getItemUnderPointer($event?.pointers[0]);
|
|
7114
|
+
this.lockedItem?.onPanStart.emit(this.lockedItem);
|
|
7115
|
+
this.panFrom = this.pan;
|
|
7116
|
+
}
|
|
7117
|
+
onPan($event) {
|
|
7118
|
+
if (this.lockedItem) {
|
|
7119
|
+
const data = this.horizontal
|
|
7120
|
+
? { pointers: $event.pointers, deltaX: -$event.deltaY / this.ratio, deltaY: $event.deltaX / this.ratio }
|
|
7121
|
+
: { pointers: $event.pointers, deltaX: $event.deltaX / this.ratio, deltaY: $event.deltaY / this.ratio };
|
|
7122
|
+
data.item = this.lockedItem;
|
|
7123
|
+
this.lockedItem.onPan.emit(data);
|
|
7124
|
+
return;
|
|
7125
|
+
}
|
|
7126
|
+
// if (this.useCanvasRatio) return;
|
|
7127
|
+
// this.pan = this.panFrom + (this.horizontal ? $event.deltaX : $event.deltaY);
|
|
7128
|
+
// this.fixPan();
|
|
7129
|
+
}
|
|
7130
|
+
onPanEnd() {
|
|
7131
|
+
this.lockedItem?.onPanEnd.emit(this.lockedItem);
|
|
7132
|
+
this.lockedItem = null;
|
|
7133
|
+
this.panFrom = this.pan;
|
|
7134
|
+
}
|
|
7135
|
+
fixPan() {
|
|
7136
|
+
if (this.fullHeight <= 0)
|
|
7137
|
+
return;
|
|
7138
|
+
while (this.pan > 0) {
|
|
7139
|
+
this.pan -= this.fullHeight;
|
|
7140
|
+
}
|
|
7141
|
+
while (this.pan < -this.fullHeight) {
|
|
7142
|
+
this.pan += this.fullHeight;
|
|
7143
|
+
}
|
|
7144
|
+
this.rotation = Math.round(this.pan / this.fullHeight * 360);
|
|
7145
|
+
const basePan = (this.rotation / 360 - 1) * this.fullHeight;
|
|
7146
|
+
this.items.forEach(item => {
|
|
7147
|
+
item.calcShapes(basePan);
|
|
7148
|
+
});
|
|
7149
|
+
}
|
|
7150
|
+
fixItems() {
|
|
7151
|
+
this.items = this.itemList.toArray();
|
|
7152
|
+
this.items.forEach((item, ix) => {
|
|
7153
|
+
item.index = ix;
|
|
7154
|
+
});
|
|
7155
|
+
this.fixPan();
|
|
7156
|
+
}
|
|
7157
|
+
selectItem(pointer) {
|
|
7158
|
+
const selected = this.getItemUnderPointer(pointer);
|
|
7159
|
+
this.touched = false;
|
|
7160
|
+
this.selectedItem = selected;
|
|
7161
|
+
if (selected) {
|
|
7162
|
+
selected.active = !selected.active;
|
|
7163
|
+
const items = Array.from(this.items);
|
|
7164
|
+
this.selectedIndex = items.indexOf(selected);
|
|
7165
|
+
this.selectedIndexChange.emit(this.selectedIndex);
|
|
7166
|
+
}
|
|
7167
|
+
}
|
|
7168
|
+
getItemUnderPointer(pointer) {
|
|
7169
|
+
if (!pointer || !this.canvasElem || !this.items)
|
|
7170
|
+
return null;
|
|
7171
|
+
const canvasRect = this.canvasElem.nativeElement.getBoundingClientRect();
|
|
7172
|
+
const point = this.horizontal
|
|
7173
|
+
? new Point(canvasRect.bottom - pointer.clientY, pointer.clientX - canvasRect.left)
|
|
7174
|
+
: new Point(pointer.clientX - canvasRect.left, pointer.clientY - canvasRect.top);
|
|
7175
|
+
for (const item of this.items) {
|
|
7176
|
+
if (item?.hit(point)) {
|
|
7177
|
+
return item.disabled ? null : item;
|
|
7178
|
+
}
|
|
7179
|
+
}
|
|
7180
|
+
return null;
|
|
7181
|
+
}
|
|
7182
|
+
updateCursor() {
|
|
7183
|
+
const cursor = this.getCursor();
|
|
7184
|
+
this.renderer.setStyle(this.canvasElem.nativeElement, "cursor", cursor);
|
|
7185
|
+
this.renderer.setStyle(this.containerElem.nativeElement, "cursor", cursor);
|
|
7186
|
+
}
|
|
7187
|
+
getCursor() {
|
|
7188
|
+
if (!this.hoveredItem)
|
|
7189
|
+
return "default";
|
|
7190
|
+
switch (this.hoveredItem.direction) {
|
|
7191
|
+
case "free":
|
|
7192
|
+
return "all-scroll";
|
|
7193
|
+
case "horizontal":
|
|
7194
|
+
return "";
|
|
7195
|
+
case "vertical":
|
|
7196
|
+
return "row-resize";
|
|
7197
|
+
}
|
|
7198
|
+
return "pointer";
|
|
7199
|
+
}
|
|
7200
|
+
redraw() {
|
|
7201
|
+
if (!this.shouldDraw)
|
|
7202
|
+
return;
|
|
7203
|
+
this.ctx = this.canvasElem.nativeElement?.getContext("2d");
|
|
7204
|
+
if (!this.ctx) {
|
|
7205
|
+
requestAnimationFrame(() => this.redraw());
|
|
7206
|
+
return;
|
|
7207
|
+
}
|
|
7208
|
+
this.draw().then(() => {
|
|
7209
|
+
requestAnimationFrame(() => this.redraw());
|
|
7210
|
+
});
|
|
7211
|
+
}
|
|
7212
|
+
async draw() {
|
|
7213
|
+
const ctx = this.ctx;
|
|
7214
|
+
const canvas = ctx.canvas;
|
|
7215
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
7216
|
+
ctx.save();
|
|
7217
|
+
const width = this.realWidth * this.ratio;
|
|
7218
|
+
const height = this.realHeight * this.ratio;
|
|
7219
|
+
const x = canvas.width / 2 - width / 2;
|
|
7220
|
+
const y = canvas.height / 2 - height / 2;
|
|
7221
|
+
if (this.horizontal) {
|
|
7222
|
+
ctx.rotate(-Math.PI / 2);
|
|
7223
|
+
ctx.translate(-this.canvasWidth, 0);
|
|
7224
|
+
}
|
|
7225
|
+
await this.onDraw(this, this.items);
|
|
7226
|
+
ctx.restore();
|
|
7227
|
+
}
|
|
7228
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InteractiveCanvasComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { horizontal: "horizontal", selectedIndex: "selectedIndex", resizeMode: "resizeMode", realWidth: "realWidth", realHeight: "realHeight", onDraw: "onDraw" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "window:touchend": "onTouchEnd($event)", "window:mouseup": "onMouseUp($event)" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #containerElem\n [ngClass]=\"['interactive-canvas-wrapper', horizontal ? 'horizontal' : 'vertical']\"\n (resize)=\"resize()\"\n (touchstart)=\"onTouchStart($event)\"\n (mousedown)=\"onMouseDown()\"\n (mousemove)=\"onMouseMove($event)\"\n (mouseleave)=\"onMouseLeave()\"\n (panend)=\"onPanEnd()\"\n (panmove)=\"onPan($event)\"\n (panstart)=\"onPanStart($event)\">\n <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-wrapper{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-wrapper .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
7230
|
+
}
|
|
7231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InteractiveCanvasComponent, decorators: [{
|
|
7232
|
+
type: Component,
|
|
7233
|
+
args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\n [ngClass]=\"['interactive-canvas-wrapper', horizontal ? 'horizontal' : 'vertical']\"\n (resize)=\"resize()\"\n (touchstart)=\"onTouchStart($event)\"\n (mousedown)=\"onMouseDown()\"\n (mousemove)=\"onMouseMove($event)\"\n (mouseleave)=\"onMouseLeave()\"\n (panend)=\"onPanEnd()\"\n (panmove)=\"onPan($event)\"\n (panstart)=\"onPanStart($event)\">\n <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-wrapper{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-wrapper .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
|
|
7234
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { horizontal: [{
|
|
7235
|
+
type: Input
|
|
7236
|
+
}], selectedIndex: [{
|
|
7237
|
+
type: Input
|
|
7238
|
+
}], resizeMode: [{
|
|
7239
|
+
type: Input
|
|
7240
|
+
}], realWidth: [{
|
|
7241
|
+
type: Input
|
|
7242
|
+
}], realHeight: [{
|
|
7243
|
+
type: Input
|
|
7244
|
+
}], onDraw: [{
|
|
7245
|
+
type: Input
|
|
7246
|
+
}], selectedIndexChange: [{
|
|
7247
|
+
type: Output
|
|
7248
|
+
}], containerElem: [{
|
|
7249
|
+
type: ViewChild,
|
|
7250
|
+
args: ["containerElem", { static: true }]
|
|
7251
|
+
}], canvasElem: [{
|
|
7252
|
+
type: ViewChild,
|
|
7253
|
+
args: ["canvasElem", { static: true }]
|
|
7254
|
+
}], itemList: [{
|
|
7255
|
+
type: ContentChildren,
|
|
7256
|
+
args: [InteractiveItemComponent]
|
|
7257
|
+
}], onTouchEnd: [{
|
|
7258
|
+
type: HostListener,
|
|
7259
|
+
args: ["window:touchend", ["$event"]]
|
|
7260
|
+
}], onMouseUp: [{
|
|
7261
|
+
type: HostListener,
|
|
7262
|
+
args: ["window:mouseup", ["$event"]]
|
|
7263
|
+
}] } });
|
|
7264
|
+
|
|
7265
|
+
class InteractiveCircleComponent extends InteractiveItemComponent {
|
|
7266
|
+
get canvas() {
|
|
7267
|
+
return this.iCanvas;
|
|
7268
|
+
}
|
|
7269
|
+
get shape() {
|
|
7270
|
+
return "circle";
|
|
7271
|
+
}
|
|
7272
|
+
constructor(iCanvas) {
|
|
7273
|
+
super();
|
|
7274
|
+
this.iCanvas = iCanvas;
|
|
7275
|
+
}
|
|
7276
|
+
calcShape(x, y) {
|
|
7277
|
+
const ratio = this.canvas.ratio;
|
|
7278
|
+
return new Circle(x, y, this.radius * ratio);
|
|
7279
|
+
}
|
|
7280
|
+
draw(ctx, scale = 1) {
|
|
7281
|
+
const radius = this.radius * this.canvas.ratio * scale;
|
|
7282
|
+
this.shapes.forEach(shape => {
|
|
7283
|
+
ctx.beginPath();
|
|
7284
|
+
ctx.arc(shape.x, shape.y, radius, 0, Math.PI * 2);
|
|
7285
|
+
ctx.closePath();
|
|
7286
|
+
ctx.fill();
|
|
7287
|
+
ctx.stroke();
|
|
7288
|
+
});
|
|
7289
|
+
}
|
|
7290
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InteractiveCircleComponent, deps: [{ token: InteractiveCanvasComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7291
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: InteractiveCircleComponent, isStandalone: false, selector: "interactive-circle", inputs: { radius: "radius" }, providers: [
|
|
7292
|
+
{ provide: InteractiveItemComponent, useExisting: InteractiveCircleComponent },
|
|
7293
|
+
], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
|
|
7294
|
+
}
|
|
7295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InteractiveCircleComponent, decorators: [{
|
|
7296
|
+
type: Component,
|
|
7297
|
+
args: [{
|
|
7298
|
+
standalone: false,
|
|
7299
|
+
selector: "interactive-circle",
|
|
7300
|
+
template: "",
|
|
7301
|
+
providers: [
|
|
7302
|
+
{ provide: InteractiveItemComponent, useExisting: InteractiveCircleComponent },
|
|
7303
|
+
]
|
|
7304
|
+
}]
|
|
7305
|
+
}], ctorParameters: () => [{ type: InteractiveCanvasComponent }], propDecorators: { radius: [{
|
|
7306
|
+
type: Input
|
|
7307
|
+
}] } });
|
|
7308
|
+
|
|
7309
|
+
class InteractiveRectComponent extends InteractiveItemComponent {
|
|
7310
|
+
get canvas() {
|
|
7311
|
+
return this.iCanvas;
|
|
7312
|
+
}
|
|
7313
|
+
get shape() {
|
|
7314
|
+
return "rect";
|
|
7315
|
+
}
|
|
7316
|
+
constructor(iCanvas) {
|
|
7317
|
+
super();
|
|
7318
|
+
this.iCanvas = iCanvas;
|
|
7319
|
+
}
|
|
7320
|
+
calcShape(x, y) {
|
|
7321
|
+
const ratio = this.canvas.ratio;
|
|
7322
|
+
return new Rect(x, y, this.width * ratio, this.height * ratio, this.rotation);
|
|
7323
|
+
}
|
|
7324
|
+
draw(ctx, scale = 1) {
|
|
7325
|
+
scale *= this.canvas.ratio;
|
|
7326
|
+
const width = this.width * scale;
|
|
7327
|
+
const height = this.height * scale;
|
|
7328
|
+
this.shapes.forEach(shape => {
|
|
7329
|
+
ctx.beginPath();
|
|
7330
|
+
ctx.rect(shape.x - width / 2, shape.y - height / 2, width, height);
|
|
7331
|
+
ctx.closePath();
|
|
7332
|
+
ctx.fill();
|
|
7333
|
+
ctx.stroke();
|
|
7334
|
+
});
|
|
7335
|
+
}
|
|
7336
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InteractiveRectComponent, deps: [{ token: InteractiveCanvasComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7337
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: InteractiveRectComponent, isStandalone: false, selector: "interactive-rect", inputs: { width: "width", height: "height" }, providers: [
|
|
7338
|
+
{ provide: InteractiveItemComponent, useExisting: InteractiveRectComponent },
|
|
7339
|
+
], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
|
|
7340
|
+
}
|
|
7341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InteractiveRectComponent, decorators: [{
|
|
7342
|
+
type: Component,
|
|
7343
|
+
args: [{
|
|
7344
|
+
standalone: false,
|
|
7345
|
+
selector: "interactive-rect",
|
|
7346
|
+
template: "",
|
|
7347
|
+
providers: [
|
|
7348
|
+
{ provide: InteractiveItemComponent, useExisting: InteractiveRectComponent },
|
|
7349
|
+
]
|
|
7350
|
+
}]
|
|
7351
|
+
}], ctorParameters: () => [{ type: InteractiveCanvasComponent }], propDecorators: { width: [{
|
|
7352
|
+
type: Input
|
|
7353
|
+
}], height: [{
|
|
7354
|
+
type: Input
|
|
7355
|
+
}] } });
|
|
7356
|
+
|
|
6895
7357
|
class UnorderedListComponent {
|
|
6896
7358
|
constructor(cdr) {
|
|
6897
7359
|
this.cdr = cdr;
|
|
@@ -7251,6 +7713,10 @@ const components = [
|
|
|
7251
7713
|
DynamicTableComponent,
|
|
7252
7714
|
FakeModuleComponent,
|
|
7253
7715
|
PaginationMenuComponent,
|
|
7716
|
+
InteractiveCanvasComponent,
|
|
7717
|
+
InteractiveItemComponent,
|
|
7718
|
+
InteractiveCircleComponent,
|
|
7719
|
+
InteractiveRectComponent,
|
|
7254
7720
|
UnorderedListComponent,
|
|
7255
7721
|
UploadComponent
|
|
7256
7722
|
];
|
|
@@ -7624,8 +8090,8 @@ class NgxUtilsModule {
|
|
|
7624
8090
|
constructor() {
|
|
7625
8091
|
}
|
|
7626
8092
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxUtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7627
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, UnorderedListComponent, UploadComponent], imports: [CommonModule,
|
|
7628
|
-
FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, UnorderedListComponent, UploadComponent, FormsModule] }); }
|
|
8093
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, UnorderedListComponent, UploadComponent], imports: [CommonModule,
|
|
8094
|
+
FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, UnorderedListComponent, UploadComponent, FormsModule] }); }
|
|
7629
8095
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxUtilsModule, providers: pipes, imports: [CommonModule,
|
|
7630
8096
|
FormsModule, FormsModule] }); }
|
|
7631
8097
|
}
|
|
@@ -7655,5 +8121,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
7655
8121
|
* Generated bundle index. Do not edit.
|
|
7656
8122
|
*/
|
|
7657
8123
|
|
|
7658
|
-
export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_SERVICE, IConfiguration, IconDirective, IconService, IncludesPipe, Initializer, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, getComponentDef, impatientPromise, parseSelector, provideEntryComponents, provideWithOptions, selectorMatchesList };
|
|
8124
|
+
export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_SERVICE, IConfiguration, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, getComponentDef, impatientPromise, parseSelector, provideEntryComponents, provideWithOptions, selectorMatchesList };
|
|
7659
8125
|
//# sourceMappingURL=stemy-ngx-utils.mjs.map
|