@acorex/components 19.11.0-next.5 → 19.11.0-next.6
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/acorex-components-file-explorer.mjs +1 -1
- package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +5 -2
- package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-image-editor.mjs +85 -101
- package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +172 -157
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/grid-layout-builder/lib/types.d.ts +3 -0
- package/image-editor/index.d.ts +0 -1
- package/image-editor/lib/image-editor-container/image-editor-container.component.d.ts +1 -14
- package/image-editor/lib/image-editor-cropper-window/image-editor-cropper-window.component.d.ts +3 -4
- package/image-editor/lib/image-editor-tools/image-editor-crop/image-editor-crop.component.d.ts +2 -3
- package/image-editor/lib/image-editor.module.d.ts +2 -3
- package/image-editor/lib/image-editor.service.d.ts +1 -0
- package/package.json +1 -1
- package/tree-view/lib/tree-view-item.component.d.ts +8 -12
- package/tree-view/lib/tree-view.class.d.ts +4 -20
- package/tree-view/lib/tree-view.component.d.ts +25 -16
- package/image-editor/lib/image-editor-tools/image-editor-header/image-editor-header.component.d.ts +0 -12
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
|
|
2
2
|
import { MXBaseComponent, MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
|
|
3
|
-
import * as i1 from '@acorex/components/decorators';
|
|
4
|
-
import {
|
|
5
|
-
import { AXDialogService, AXDialogModule } from '@acorex/components/dialog';
|
|
3
|
+
import * as i1$1 from '@acorex/components/decorators';
|
|
4
|
+
import { AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
|
|
6
5
|
import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/loading';
|
|
7
6
|
import * as i2 from '@acorex/components/toolbar';
|
|
8
7
|
import { AXToolBarModule } from '@acorex/components/toolbar';
|
|
@@ -10,12 +9,13 @@ import * as i1$2 from '@angular/common';
|
|
|
10
9
|
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
|
11
10
|
import * as i0 from '@angular/core';
|
|
12
11
|
import { signal, Injectable, inject, output, ViewEncapsulation, Component, ChangeDetectionStrategy, input, NgZone, ElementRef, viewChild, Renderer2, PLATFORM_ID, effect, afterNextRender, computed, linkedSignal, HostBinding, contentChild, forwardRef, NgModule } from '@angular/core';
|
|
13
|
-
import * as i1
|
|
12
|
+
import * as i1 from '@angular/forms';
|
|
14
13
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
15
14
|
import { classes } from 'polytype';
|
|
16
|
-
import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
|
|
17
15
|
import { AXColorBoxComponent, AXColorBoxModule } from '@acorex/components/color-box';
|
|
18
16
|
import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/range-slider';
|
|
17
|
+
import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
|
|
18
|
+
import { AXDialogModule } from '@acorex/components/dialog';
|
|
19
19
|
import { AXPopoverModule } from '@acorex/components/popover';
|
|
20
20
|
import { AXSelectBoxModule } from '@acorex/components/select-box';
|
|
21
21
|
|
|
@@ -34,6 +34,7 @@ class AXImageEditorService {
|
|
|
34
34
|
this.imageBlob = signal([]);
|
|
35
35
|
this.undoPressed = signal(false);
|
|
36
36
|
this.redoPressed = signal(false);
|
|
37
|
+
this.cropperRatio = signal(null);
|
|
37
38
|
}
|
|
38
39
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
39
40
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorService }); }
|
|
@@ -50,61 +51,24 @@ class AXImageEditorCropComponent {
|
|
|
50
51
|
constructor() {
|
|
51
52
|
this.service = inject(AXImageEditorService);
|
|
52
53
|
this.cropPressed = output();
|
|
53
|
-
this.lockRatioPressed = output();
|
|
54
54
|
}
|
|
55
55
|
cropButtonHandler() {
|
|
56
56
|
this.cropPressed.emit();
|
|
57
57
|
}
|
|
58
|
-
|
|
59
|
-
this.
|
|
58
|
+
ratioHandler(r) {
|
|
59
|
+
if (this.service.cropperRatio()) {
|
|
60
|
+
this.service.cropperRatio.set(null);
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
this.service.cropperRatio.set(r);
|
|
64
|
+
}
|
|
60
65
|
}
|
|
61
66
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
62
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", outputs: { cropPressed: "cropPressed"
|
|
67
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", outputs: { cropPressed: "cropPressed" }, ngImport: i0, template: "<ax-button (click)=\"cropButtonHandler()\" class=\"ax-crop-save ax-sm\" text=\"Crop\"></ax-button>\n\n<ax-button\n [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('1:1')\"\n class=\"ax-crop-save ax-sm\"\n text=\"1:1\"\n></ax-button>\n<ax-button\n [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('16:9')\"\n class=\"ax-crop-save ax-sm\"\n text=\"16:9\"\n></ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
63
68
|
}
|
|
64
69
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
|
|
65
70
|
type: Component,
|
|
66
|
-
args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent], template: "<ax-button (click)=\"cropButtonHandler()\" class=\"ax-crop-save ax-sm\" text=\"Crop\"></ax-button>\n<ax-button (click)=\"
|
|
67
|
-
}] });
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* paint mode.
|
|
71
|
-
* @category Components
|
|
72
|
-
*/
|
|
73
|
-
class AXImageEditorHistoryComponent {
|
|
74
|
-
constructor() {
|
|
75
|
-
this.service = inject(AXImageEditorService);
|
|
76
|
-
}
|
|
77
|
-
UndoHandler() {
|
|
78
|
-
this.service.undoPressed.set(true);
|
|
79
|
-
}
|
|
80
|
-
RedoHandler() {
|
|
81
|
-
this.service.redoPressed.set(true);
|
|
82
|
-
}
|
|
83
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
84
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", ngImport: i0, template: "<ax-button axTooltip=\"Undo\" axTooltipPlacement=\"top\" (onClick)=\"UndoHandler()\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Redo\" axTooltipPlacement=\"top\" (onClick)=\"RedoHandler()\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
85
|
-
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorHistoryComponent, decorators: [{
|
|
87
|
-
type: Component,
|
|
88
|
-
args: [{ selector: 'ax-image-editor-history', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-button axTooltip=\"Undo\" axTooltipPlacement=\"top\" (onClick)=\"UndoHandler()\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Redo\" axTooltipPlacement=\"top\" (onClick)=\"RedoHandler()\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
|
|
89
|
-
}] });
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* paint mode.
|
|
93
|
-
* @category Components
|
|
94
|
-
*/
|
|
95
|
-
class AXimageEditorHeaderComponent {
|
|
96
|
-
constructor() {
|
|
97
|
-
this.parent = inject(AXImageEditorContainerComponent);
|
|
98
|
-
}
|
|
99
|
-
saveHandler() {
|
|
100
|
-
this.parent.save();
|
|
101
|
-
}
|
|
102
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXimageEditorHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
103
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXimageEditorHeaderComponent, isStandalone: true, selector: "ax-image-editor-header", ngImport: i0, template: "<ax-toolbar>\n <ax-prefix>\n <ax-image-editor-history></ax-image-editor-history>\n </ax-prefix>\n\n <ax-suffix>\n <ax-button type=\"submit\" (onClick)=\"saveHandler()\" axTooltip=\"Save\" axTooltipPlacement=\"top\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-save\"> </ax-icon>\n </ax-button>\n </ax-suffix>\n</ax-toolbar>\n", styles: ["ax-image-editor-header{width:100%}ax-image-editor-header ax-toolbar{justify-content:space-between}ax-image-editor-header .ax-start-toolbar-divider{display:none}\n"], dependencies: [{ kind: "component", type: AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
104
|
-
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXimageEditorHeaderComponent, decorators: [{
|
|
106
|
-
type: Component,
|
|
107
|
-
args: [{ selector: 'ax-image-editor-header', encapsulation: ViewEncapsulation.None, imports: [AXImageEditorHistoryComponent, AXButtonComponent, AXDecoratorModule, AXToolBarModule, AXTooltipDirective], template: "<ax-toolbar>\n <ax-prefix>\n <ax-image-editor-history></ax-image-editor-history>\n </ax-prefix>\n\n <ax-suffix>\n <ax-button type=\"submit\" (onClick)=\"saveHandler()\" axTooltip=\"Save\" axTooltipPlacement=\"top\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-save\"> </ax-icon>\n </ax-button>\n </ax-suffix>\n</ax-toolbar>\n", styles: ["ax-image-editor-header{width:100%}ax-image-editor-header ax-toolbar{justify-content:space-between}ax-image-editor-header .ax-start-toolbar-divider{display:none}\n"] }]
|
|
71
|
+
args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent], template: "<ax-button (click)=\"cropButtonHandler()\" class=\"ax-crop-save ax-sm\" text=\"Crop\"></ax-button>\n\n<ax-button\n [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('1:1')\"\n class=\"ax-crop-save ax-sm\"\n text=\"1:1\"\n></ax-button>\n<ax-button\n [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('16:9')\"\n class=\"ax-crop-save ax-sm\"\n text=\"16:9\"\n></ax-button>\n" }]
|
|
108
72
|
}] });
|
|
109
73
|
|
|
110
74
|
/**
|
|
@@ -128,7 +92,7 @@ class AXImageEditorHighlightComponent {
|
|
|
128
92
|
this.service.highlightWidth.set(e);
|
|
129
93
|
}
|
|
130
94
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", ngImport: i0, template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n axTooltip=\"Highlight Color Picker\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1
|
|
95
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", ngImport: i0, template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n axTooltip=\"Highlight Color Picker\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
132
96
|
}
|
|
133
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
|
|
134
98
|
type: Component,
|
|
@@ -156,7 +120,7 @@ class AXImageEditorPenComponent {
|
|
|
156
120
|
this.service.penWidth.set(e);
|
|
157
121
|
}
|
|
158
122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorPenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", ngImport: i0, template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n axTooltip=\"Pen Color Picker\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1
|
|
123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", ngImport: i0, template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n axTooltip=\"Pen Color Picker\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
160
124
|
}
|
|
161
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
|
|
162
126
|
type: Component,
|
|
@@ -207,7 +171,7 @@ class AXImageEditorToolSelectorComponent {
|
|
|
207
171
|
}
|
|
208
172
|
}
|
|
209
173
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
210
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", ngImport: i0, template: "<ax-button\n axTooltip=\"pen\"\n axTooltipPlacement=\"top\"\n (onClick)=\"changeToolHandler('pen')\"\n look=\"blank\"\n [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n axTooltip=\"highlight\"\n axTooltipPlacement=\"top\"\n (onClick)=\"changeToolHandler('highlight')\"\n look=\"blank\"\n [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n axTooltip=\"crop\"\n axTooltipPlacement=\"top\"\n (onClick)=\"changeToolHandler('crop')\"\n look=\"blank\"\n [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n axTooltip=\"rotate\"\n axTooltipPlacement=\"top\"\n (onClick)=\"changeToolHandler('rotate')\"\n look=\"blank\"\n [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
174
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", ngImport: i0, template: "<ax-button\n axTooltip=\"pen\"\n axTooltipPlacement=\"top\"\n (onClick)=\"changeToolHandler('pen')\"\n look=\"blank\"\n [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n axTooltip=\"highlight\"\n axTooltipPlacement=\"top\"\n (onClick)=\"changeToolHandler('highlight')\"\n look=\"blank\"\n [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n axTooltip=\"crop\"\n axTooltipPlacement=\"top\"\n (onClick)=\"changeToolHandler('crop')\"\n look=\"blank\"\n [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n axTooltip=\"rotate\"\n axTooltipPlacement=\"top\"\n (onClick)=\"changeToolHandler('rotate')\"\n look=\"blank\"\n [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
211
175
|
}
|
|
212
176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorToolSelectorComponent, decorators: [{
|
|
213
177
|
type: Component,
|
|
@@ -220,10 +184,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
220
184
|
*/
|
|
221
185
|
class AXImageEditorCropperWindowComponent {
|
|
222
186
|
constructor() {
|
|
223
|
-
this.width = input.required();
|
|
224
|
-
this.height = input.required();
|
|
225
187
|
this.showGrid = input(true);
|
|
226
|
-
this.
|
|
188
|
+
this.service = inject(AXImageEditorService);
|
|
227
189
|
this.ngZone = inject(NgZone);
|
|
228
190
|
this.selectedHandle = signal(null);
|
|
229
191
|
this.panState = signal(false);
|
|
@@ -236,16 +198,22 @@ class AXImageEditorCropperWindowComponent {
|
|
|
236
198
|
this.renderer = inject(Renderer2);
|
|
237
199
|
this.platformID = inject(PLATFORM_ID);
|
|
238
200
|
this.#eff = effect(() => {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
host.style.width = `${
|
|
242
|
-
host.style.height = `${
|
|
201
|
+
const host = this.elementRef.nativeElement;
|
|
202
|
+
if (this.service.cropperRatio() === '1:1') {
|
|
203
|
+
host.style.width = `${150}px`;
|
|
204
|
+
host.style.height = `${150}px`;
|
|
205
|
+
}
|
|
206
|
+
else if (this.service.cropperRatio() === '16:9') {
|
|
207
|
+
host.style.width = `${266.6}px`;
|
|
208
|
+
host.style.height = `${150}px`;
|
|
209
|
+
}
|
|
210
|
+
else {
|
|
211
|
+
host.style.width = `${150}px`;
|
|
212
|
+
host.style.height = `${150}px`;
|
|
243
213
|
}
|
|
244
214
|
});
|
|
245
215
|
this.#init = afterNextRender(() => {
|
|
246
216
|
const host = this.elementRef.nativeElement;
|
|
247
|
-
host.style.width = `${this.width()}px`;
|
|
248
|
-
host.style.height = `${this.height()}px`;
|
|
249
217
|
this.ngZone.runOutsideAngular(() => {
|
|
250
218
|
this.mouseMoveEvent = this.renderer.listen(document, 'mousemove', this.changeSizeHandler.bind(this));
|
|
251
219
|
this.mouseUpEvent = this.renderer.listen(document, 'mouseup', this.clearSelector.bind(this));
|
|
@@ -357,11 +325,16 @@ class AXImageEditorCropperWindowComponent {
|
|
|
357
325
|
host.style.height = `${rect.height + e.movementY}px`;
|
|
358
326
|
break;
|
|
359
327
|
case 'right-top':
|
|
360
|
-
if (this.
|
|
328
|
+
if (this.service.cropperRatio() === '1:1') {
|
|
361
329
|
host.style.height = `${this.startHeight - dy}px`;
|
|
362
330
|
host.style.top = `${this.startTop + dy}px`;
|
|
363
331
|
host.style.width = `${this.startHeight - dy}px`;
|
|
364
332
|
}
|
|
333
|
+
else if (this.service.cropperRatio() === '16:9') {
|
|
334
|
+
host.style.height = `${this.startHeight - dy}px`;
|
|
335
|
+
host.style.top = `${this.startTop + dy}px`;
|
|
336
|
+
host.style.width = `${(this.startHeight - dy) * 1.77}px`;
|
|
337
|
+
}
|
|
365
338
|
else {
|
|
366
339
|
host.style.height = `${this.startHeight - dy}px`;
|
|
367
340
|
host.style.top = `${this.startTop + dy}px`;
|
|
@@ -369,21 +342,30 @@ class AXImageEditorCropperWindowComponent {
|
|
|
369
342
|
}
|
|
370
343
|
break;
|
|
371
344
|
case 'bottom-right':
|
|
372
|
-
if (this.
|
|
345
|
+
if (this.service.cropperRatio() === '1:1') {
|
|
373
346
|
host.style.width = `${e.movementX + rect.width}px`;
|
|
374
347
|
host.style.height = `${e.movementX + rect.width}px`;
|
|
375
348
|
}
|
|
349
|
+
else if (this.service.cropperRatio() === '16:9') {
|
|
350
|
+
host.style.height = `${e.movementX + rect.height}px`;
|
|
351
|
+
host.style.width = `${(e.movementX + rect.height) * 1.77}px`;
|
|
352
|
+
}
|
|
376
353
|
else {
|
|
377
354
|
host.style.height = `${rect.height + e.movementY}px`;
|
|
378
355
|
host.style.width = `${e.movementX + rect.width}px`;
|
|
379
356
|
}
|
|
380
357
|
break;
|
|
381
358
|
case 'bottom-left':
|
|
382
|
-
if (this.
|
|
359
|
+
if (this.service.cropperRatio() === '1:1') {
|
|
383
360
|
host.style.height = `${this.startWidth - dx}px`;
|
|
384
361
|
host.style.width = `${this.startWidth - dx}px`;
|
|
385
362
|
host.style.left = `${this.startLeft + dx}px`;
|
|
386
363
|
}
|
|
364
|
+
else if (this.service.cropperRatio() === '16:9') {
|
|
365
|
+
host.style.height = `${(this.startWidth - dx) / 1.77}px`;
|
|
366
|
+
host.style.width = `${this.startWidth - dx}px`;
|
|
367
|
+
host.style.left = `${this.startLeft + dx}px`;
|
|
368
|
+
}
|
|
387
369
|
else {
|
|
388
370
|
host.style.height = `${rect.height + e.movementY}px`;
|
|
389
371
|
host.style.width = `${this.startWidth - dx}px`;
|
|
@@ -391,12 +373,18 @@ class AXImageEditorCropperWindowComponent {
|
|
|
391
373
|
}
|
|
392
374
|
break;
|
|
393
375
|
case 'left-top':
|
|
394
|
-
if (this.
|
|
376
|
+
if (this.service.cropperRatio() === '1:1') {
|
|
395
377
|
host.style.width = `${this.startWidth - dx}px`;
|
|
396
378
|
host.style.left = `${this.startLeft + dx}px`;
|
|
397
379
|
host.style.height = `${this.startWidth - dx}px`;
|
|
398
380
|
host.style.top = `${this.startLeft + dx}px`;
|
|
399
381
|
}
|
|
382
|
+
else if (this.service.cropperRatio() === '16:9') {
|
|
383
|
+
host.style.width = `${this.startWidth - dx}px`;
|
|
384
|
+
host.style.left = `${this.startLeft + dx}px`;
|
|
385
|
+
host.style.height = `${(this.startWidth - dx) / 1.77}px`;
|
|
386
|
+
host.style.top = `${this.startLeft + dx}px`;
|
|
387
|
+
}
|
|
400
388
|
else {
|
|
401
389
|
host.style.width = `${this.startWidth - dx}px`;
|
|
402
390
|
host.style.left = `${this.startLeft + dx}px`;
|
|
@@ -417,11 +405,11 @@ class AXImageEditorCropperWindowComponent {
|
|
|
417
405
|
this.selectedHandle.set(null);
|
|
418
406
|
}
|
|
419
407
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: {
|
|
408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngStyle]=\"!showGrid() && { border: '1px dashed white' }\" #r class=\"ax-image-cropper-window-container\">\n @if (!this.service.cropperRatio()) {\n <div (mousedown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n }\n\n <div (mousedown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'bottom-right')\" class=\"ax-image-bottom-right-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n @if (showGrid()) {\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n }\n</div>\n", styles: ["ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;height:100%;cursor:move;outline:rgba(0,0,0,.7) solid 100vmax;display:grid;grid-template-columns:repeat(3,1fr)}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border:1px dashed rgba(255,255,255,.5)}ax-image-editor-cropper-window .ax-handle-shape{width:1rem;height:1rem;border:1px dashed white;background-color:gray;position:absolute;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:-.5rem;right:-.5rem;cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{bottom:-.5rem;right:-.5rem;cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{right:-.5rem;top:calc(50% - .5rem);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:-.5rem;left:-.5rem;cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:-.5rem;left:-.5rem;cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{bottom:-.5rem;right:calc(50% - .5rem);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{left:-.5rem;top:calc(50% - .5rem);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:-.5rem;right:calc(50% - .5rem);cursor:n-resize}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
421
409
|
}
|
|
422
410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorCropperWindowComponent, decorators: [{
|
|
423
411
|
type: Component,
|
|
424
|
-
args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div [ngStyle]=\"!showGrid() && { border: '1px dashed white' }\" #r class=\"ax-image-cropper-window-container\">\n @if (!this.
|
|
412
|
+
args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div [ngStyle]=\"!showGrid() && { border: '1px dashed white' }\" #r class=\"ax-image-cropper-window-container\">\n @if (!this.service.cropperRatio()) {\n <div (mousedown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n }\n\n <div (mousedown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'bottom-right')\" class=\"ax-image-bottom-right-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n <div (mousedown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n @if (showGrid()) {\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n }\n</div>\n", styles: ["ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;height:100%;cursor:move;outline:rgba(0,0,0,.7) solid 100vmax;display:grid;grid-template-columns:repeat(3,1fr)}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border:1px dashed rgba(255,255,255,.5)}ax-image-editor-cropper-window .ax-handle-shape{width:1rem;height:1rem;border:1px dashed white;background-color:gray;position:absolute;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:-.5rem;right:-.5rem;cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{bottom:-.5rem;right:-.5rem;cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{right:-.5rem;top:calc(50% - .5rem);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:-.5rem;left:-.5rem;cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:-.5rem;left:-.5rem;cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{bottom:-.5rem;right:calc(50% - .5rem);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{left:-.5rem;top:calc(50% - .5rem);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:-.5rem;right:calc(50% - .5rem);cursor:n-resize}\n"] }]
|
|
425
413
|
}] });
|
|
426
414
|
|
|
427
415
|
class AXImageEditorViewComponent extends MXBaseComponent {
|
|
@@ -647,11 +635,11 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
647
635
|
return `width: ${this.service.initialImage()?.width}px; height: ${this.service.initialImage()?.height}px`;
|
|
648
636
|
}
|
|
649
637
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__hostStyle" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n tabindex=\"1\"\n (pointerdown)=\"mouseDownHandler($event)\"\n (pointerup)=\"mouseUpHandler()\"\n (pointermove)=\"mouseMoveHandler($event)\"\n class=\"ax-canvas-element\"\n #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n <ax-image-editor-cropper-window [
|
|
638
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__hostStyle" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n tabindex=\"1\"\n (pointerdown)=\"mouseDownHandler($event)\"\n (pointerup)=\"mouseUpHandler()\"\n (pointermove)=\"mouseMoveHandler($event)\"\n class=\"ax-canvas-element\"\n #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
651
639
|
}
|
|
652
640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
|
|
653
641
|
type: Component,
|
|
654
|
-
args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], template: "<canvas\n tabindex=\"1\"\n (pointerdown)=\"mouseDownHandler($event)\"\n (pointerup)=\"mouseUpHandler()\"\n (pointermove)=\"mouseMoveHandler($event)\"\n class=\"ax-canvas-element\"\n #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n <ax-image-editor-cropper-window [
|
|
642
|
+
args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], template: "<canvas\n tabindex=\"1\"\n (pointerdown)=\"mouseDownHandler($event)\"\n (pointerup)=\"mouseUpHandler()\"\n (pointermove)=\"mouseMoveHandler($event)\"\n class=\"ax-canvas-element\"\n #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"] }]
|
|
655
643
|
}], ctorParameters: () => [], propDecorators: { __hostStyle: [{
|
|
656
644
|
type: HostBinding,
|
|
657
645
|
args: ['style']
|
|
@@ -668,29 +656,10 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
|
|
|
668
656
|
this.service = inject(AXImageEditorService);
|
|
669
657
|
this.imageEditorContainer = viewChild('f');
|
|
670
658
|
this.view = contentChild(AXImageEditorViewComponent);
|
|
671
|
-
/** @ignore */
|
|
672
|
-
this.dialogService = inject(AXDialogService);
|
|
673
|
-
/** @ignore */
|
|
674
|
-
this.options = signal({
|
|
675
|
-
color: 'primary',
|
|
676
|
-
title: 'Attention',
|
|
677
|
-
vertical: false,
|
|
678
|
-
content: 'Do you want to save changes?',
|
|
679
|
-
orientation: 'vertical',
|
|
680
|
-
draggable: true,
|
|
681
|
-
});
|
|
682
659
|
}
|
|
683
660
|
save() {
|
|
684
661
|
if (this.service.initialImage() !== this.service.newImage()) {
|
|
685
|
-
this.
|
|
686
|
-
.confirm(this.options().title, this.options().content, this.options().color, this.options().orientation, this.options().draggable)
|
|
687
|
-
.then((data) => {
|
|
688
|
-
if (data.result) {
|
|
689
|
-
this.service.initialImage.set(this.service.newImage());
|
|
690
|
-
this.commitValue(this.service.imageBlob(), true);
|
|
691
|
-
}
|
|
692
|
-
})
|
|
693
|
-
.catch(() => this.commitValue(null));
|
|
662
|
+
this.commitValue(this.service.imageBlob(), true);
|
|
694
663
|
}
|
|
695
664
|
else {
|
|
696
665
|
this.commitValue(null);
|
|
@@ -699,9 +668,6 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
|
|
|
699
668
|
cropButtonHandler() {
|
|
700
669
|
this.view().cropButtonHandler();
|
|
701
670
|
}
|
|
702
|
-
lockRatioHandler() {
|
|
703
|
-
this.view().lockRatio.update((prev) => !prev);
|
|
704
|
-
}
|
|
705
671
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
706
672
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look" }, outputs: { onValueChanged: "onValueChanged" }, providers: [
|
|
707
673
|
AXImageEditorService,
|
|
@@ -714,7 +680,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
|
|
|
714
680
|
useExisting: forwardRef(() => AXImageEditorContainerComponent),
|
|
715
681
|
multi: true,
|
|
716
682
|
},
|
|
717
|
-
], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n <div #f class=\"ax-editor-container ax-{{ look }}\">\n <ax-
|
|
683
|
+
], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n <div #f class=\"ax-editor-container ax-{{ look }}\">\n <ng-content select=\"ax-header\"></ng-content>\n\n <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n @if (service.activeToolState()) {\n <ax-toolbar class=\"ax-secondary-toolbar\">\n <ax-prefix>\n @switch (service.activeToolState()) {\n @case ('pen') {\n <ax-image-editor-pen></ax-image-editor-pen>\n }\n @case ('crop') {\n <ax-image-editor-crop (cropPressed)=\"cropButtonHandler()\"></ax-image-editor-crop>\n }\n @case ('highlight') {\n <ax-image-editor-highlight></ax-image-editor-highlight>\n }\n @case ('rotate') {\n <ax-image-editor-rotate></ax-image-editor-rotate>\n }\n }\n </ax-prefix>\n </ax-toolbar>\n }\n\n <ax-toolbar class=\"ax-main-toolbar\">\n <ax-content>\n <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n </ax-content>\n </ax-toolbar>\n </div>\n <div class=\"ax-error-container\"></div>\n} @else {\n <div class=\"ax-loading-spinner-container\">\n <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-image-editor-container{width:fit-content;display:block}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container .ax-secondary-toolbar{padding:.2rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface));justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
718
684
|
}
|
|
719
685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
|
|
720
686
|
type: Component,
|
|
@@ -740,8 +706,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
740
706
|
AXImageEditorPenComponent,
|
|
741
707
|
AXImageEditorHighlightComponent,
|
|
742
708
|
AXImageEditorRotateComponent,
|
|
743
|
-
|
|
744
|
-
|
|
709
|
+
], template: "@if (service.isImageLoad()) {\n <div #f class=\"ax-editor-container ax-{{ look }}\">\n <ng-content select=\"ax-header\"></ng-content>\n\n <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n @if (service.activeToolState()) {\n <ax-toolbar class=\"ax-secondary-toolbar\">\n <ax-prefix>\n @switch (service.activeToolState()) {\n @case ('pen') {\n <ax-image-editor-pen></ax-image-editor-pen>\n }\n @case ('crop') {\n <ax-image-editor-crop (cropPressed)=\"cropButtonHandler()\"></ax-image-editor-crop>\n }\n @case ('highlight') {\n <ax-image-editor-highlight></ax-image-editor-highlight>\n }\n @case ('rotate') {\n <ax-image-editor-rotate></ax-image-editor-rotate>\n }\n }\n </ax-prefix>\n </ax-toolbar>\n }\n\n <ax-toolbar class=\"ax-main-toolbar\">\n <ax-content>\n <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n </ax-content>\n </ax-toolbar>\n </div>\n <div class=\"ax-error-container\"></div>\n} @else {\n <div class=\"ax-loading-spinner-container\">\n <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-image-editor-container{width:fit-content;display:block}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container .ax-secondary-toolbar{padding:.2rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface));justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}\n"] }]
|
|
710
|
+
}] });
|
|
711
|
+
|
|
712
|
+
/**
|
|
713
|
+
* paint mode.
|
|
714
|
+
* @category Components
|
|
715
|
+
*/
|
|
716
|
+
class AXImageEditorHistoryComponent {
|
|
717
|
+
constructor() {
|
|
718
|
+
this.service = inject(AXImageEditorService);
|
|
719
|
+
}
|
|
720
|
+
UndoHandler() {
|
|
721
|
+
this.service.undoPressed.set(true);
|
|
722
|
+
}
|
|
723
|
+
RedoHandler() {
|
|
724
|
+
this.service.redoPressed.set(true);
|
|
725
|
+
}
|
|
726
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
727
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", ngImport: i0, template: "<ax-button axTooltip=\"Undo\" axTooltipPlacement=\"top\" (onClick)=\"UndoHandler()\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Redo\" axTooltipPlacement=\"top\" (onClick)=\"RedoHandler()\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
728
|
+
}
|
|
729
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorHistoryComponent, decorators: [{
|
|
730
|
+
type: Component,
|
|
731
|
+
args: [{ selector: 'ax-image-editor-history', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-button axTooltip=\"Undo\" axTooltipPlacement=\"top\" (onClick)=\"UndoHandler()\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Redo\" axTooltipPlacement=\"top\" (onClick)=\"RedoHandler()\" look=\"blank\">\n <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
|
|
745
732
|
}] });
|
|
746
733
|
|
|
747
734
|
const COMPONENT = [
|
|
@@ -753,7 +740,6 @@ const COMPONENT = [
|
|
|
753
740
|
AXImageEditorPenComponent,
|
|
754
741
|
AXImageEditorHighlightComponent,
|
|
755
742
|
AXImageEditorRotateComponent,
|
|
756
|
-
AXimageEditorHeaderComponent,
|
|
757
743
|
AXImageEditorCropperWindowComponent,
|
|
758
744
|
];
|
|
759
745
|
const MODULES = [
|
|
@@ -787,7 +773,6 @@ class AXImageEditorModule {
|
|
|
787
773
|
AXImageEditorPenComponent,
|
|
788
774
|
AXImageEditorHighlightComponent,
|
|
789
775
|
AXImageEditorRotateComponent,
|
|
790
|
-
AXimageEditorHeaderComponent,
|
|
791
776
|
AXImageEditorCropperWindowComponent], exports: [AXImageEditorViewComponent,
|
|
792
777
|
AXImageEditorContainerComponent,
|
|
793
778
|
AXImageEditorCropComponent,
|
|
@@ -796,7 +781,6 @@ class AXImageEditorModule {
|
|
|
796
781
|
AXImageEditorPenComponent,
|
|
797
782
|
AXImageEditorHighlightComponent,
|
|
798
783
|
AXImageEditorRotateComponent,
|
|
799
|
-
AXimageEditorHeaderComponent,
|
|
800
784
|
AXImageEditorCropperWindowComponent] }); }
|
|
801
785
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXImageEditorModule, imports: [MODULES, COMPONENT] }); }
|
|
802
786
|
}
|
|
@@ -813,5 +797,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
813
797
|
* Generated bundle index. Do not edit.
|
|
814
798
|
*/
|
|
815
799
|
|
|
816
|
-
export { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorCropperWindowComponent, AXImageEditorHighlightComponent, AXImageEditorHistoryComponent, AXImageEditorModule, AXImageEditorPenComponent, AXImageEditorRotateComponent, AXImageEditorService, AXImageEditorToolSelectorComponent, AXImageEditorViewComponent
|
|
800
|
+
export { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorCropperWindowComponent, AXImageEditorHighlightComponent, AXImageEditorHistoryComponent, AXImageEditorModule, AXImageEditorPenComponent, AXImageEditorRotateComponent, AXImageEditorService, AXImageEditorToolSelectorComponent, AXImageEditorViewComponent };
|
|
817
801
|
//# sourceMappingURL=acorex-components-image-editor.mjs.map
|