@worktile/theia 15.1.16 → 15.1.17
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/esm2020/interfaces/image.mjs +1 -1
- package/esm2020/plugins/image/image.component.mjs +28 -9
- package/fesm2015/worktile-theia.mjs +27 -9
- package/fesm2015/worktile-theia.mjs.map +1 -1
- package/fesm2020/worktile-theia.mjs +27 -9
- package/fesm2020/worktile-theia.mjs.map +1 -1
- package/interfaces/image.d.ts +12 -1
- package/package.json +1 -1
- package/plugins/image/image.component.d.ts +5 -4
|
@@ -49,7 +49,7 @@ import * as i1$3 from 'ngx-tethys/alert';
|
|
|
49
49
|
import { ThyAlertModule } from 'ngx-tethys/alert';
|
|
50
50
|
import { ThyUploadStatus } from 'ngx-tethys/upload';
|
|
51
51
|
import * as i4$1 from 'ngx-tethys/image';
|
|
52
|
-
import { ThyImageModule } from 'ngx-tethys/image';
|
|
52
|
+
import { ThyImageDirective, ThyImageModule } from 'ngx-tethys/image';
|
|
53
53
|
import * as i9$1 from 'ngx-tethys/progress';
|
|
54
54
|
import { ThyProgressModule } from 'ngx-tethys/progress';
|
|
55
55
|
import isUrl from 'is-url';
|
|
@@ -8276,7 +8276,7 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8276
8276
|
? this.layoutDefaultWidth
|
|
8277
8277
|
: this.imageEntry.width;
|
|
8278
8278
|
}
|
|
8279
|
-
constructor(elementRef, imageUploaderService, cdr, theContextService, thyPopover, overlay,
|
|
8279
|
+
constructor(elementRef, imageUploaderService, cdr, theContextService, thyPopover, overlay, viewContainerRef, imageGroupComponent) {
|
|
8280
8280
|
super(elementRef, cdr);
|
|
8281
8281
|
this.elementRef = elementRef;
|
|
8282
8282
|
this.imageUploaderService = imageUploaderService;
|
|
@@ -8284,8 +8284,8 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8284
8284
|
this.theContextService = theContextService;
|
|
8285
8285
|
this.thyPopover = thyPopover;
|
|
8286
8286
|
this.overlay = overlay;
|
|
8287
|
-
this.thyImageService = thyImageService;
|
|
8288
8287
|
this.viewContainerRef = viewContainerRef;
|
|
8288
|
+
this.imageGroupComponent = imageGroupComponent;
|
|
8289
8289
|
this.naturalWidth = 0;
|
|
8290
8290
|
this.naturalHeight = 0;
|
|
8291
8291
|
this.imageEntry = {};
|
|
@@ -8369,9 +8369,24 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8369
8369
|
this.imagePluginOptions = getPluginOptions(this.editor, PluginKeys.image);
|
|
8370
8370
|
this.disablePreview = this.imagePluginOptions.disablePreview;
|
|
8371
8371
|
}
|
|
8372
|
-
|
|
8372
|
+
imageClick() {
|
|
8373
|
+
const index = this.imageGroupComponent.images.findIndex(item => item === this.imageDirective);
|
|
8374
|
+
const imageGroup = this.imageGroupComponent.images.map(item => {
|
|
8375
|
+
return {
|
|
8376
|
+
originUrl: item.thyOriginSrc,
|
|
8377
|
+
thumbUrl: item.thyPreviewSrc
|
|
8378
|
+
};
|
|
8379
|
+
});
|
|
8380
|
+
const { originUrl, thumbUrl } = this.element;
|
|
8373
8381
|
if (this.imagePluginOptions.preview) {
|
|
8374
|
-
this.imagePluginOptions.preview(
|
|
8382
|
+
this.imagePluginOptions.preview({
|
|
8383
|
+
image: {
|
|
8384
|
+
originUrl,
|
|
8385
|
+
thumbUrl
|
|
8386
|
+
},
|
|
8387
|
+
imageGroup,
|
|
8388
|
+
index
|
|
8389
|
+
});
|
|
8375
8390
|
}
|
|
8376
8391
|
}
|
|
8377
8392
|
onContextChange() {
|
|
@@ -8611,15 +8626,15 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8611
8626
|
event.stopPropagation();
|
|
8612
8627
|
}
|
|
8613
8628
|
}
|
|
8614
|
-
TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token:
|
|
8615
|
-
TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n <img\n #img\n thyImage\n [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n [class.image-collapsed]=\"selection && !uploading\"\n class=\"main-image\"\n (load)=\"imageLoaded($event)\"\n (mousedown)=\"preventDefault($event)\"\n (click)=\"
|
|
8629
|
+
TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i4$1.ThyImageGroupComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
8630
|
+
TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n <img\n #img\n thyImage\n [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n [class.image-collapsed]=\"selection && !uploading\"\n class=\"main-image\"\n (load)=\"imageLoaded($event)\"\n (mousedown)=\"preventDefault($event)\"\n (click)=\"imageClick()\"\n [thySrc]=\"imageEntry.thumbUrl\"\n [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n [thyOriginSrc]=\"imageEntry.originUrl\"\n [thyDisablePreview]=\"disablePreview\"\n [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n [alt]=\"imageEntry.name\"\n />\n <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n </div>\n <div *ngIf=\"uploading\" class=\"uploading\">\n <div class=\"uploading-percentage\">\n <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n </div>\n </div>\n <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n </div>\n <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n <thy-icon thyIconName=\"image\"></thy-icon>\n </div>\n</div>\n\n<ng-template #layoutToolbar>\n <thy-actions thySize=\"xxs\">\n <ng-container *ngFor=\"let item of layoutOptions\">\n <a\n *ngIf=\"item.key !== 'split'\"\n href=\"javascript:;\"\n thyAction\n [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n [thyActionIcon]=\"item.icon\"\n [thyActionActive]=\"layoutActive(item.key)\"\n [thyTooltip]=\"item.name\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"item?.handle($event, item.key)\"\n ></a>\n <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n </ng-container>\n </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "directive", type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
|
|
8616
8631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TheImageComponent, decorators: [{
|
|
8617
8632
|
type: Component,
|
|
8618
|
-
args: [{ selector: 'the-image, [theImage]', template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n <img\n #img\n thyImage\n [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n [class.image-collapsed]=\"selection && !uploading\"\n class=\"main-image\"\n (load)=\"imageLoaded($event)\"\n (mousedown)=\"preventDefault($event)\"\n (click)=\"
|
|
8633
|
+
args: [{ selector: 'the-image, [theImage]', template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n <img\n #img\n thyImage\n [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n [class.image-collapsed]=\"selection && !uploading\"\n class=\"main-image\"\n (load)=\"imageLoaded($event)\"\n (mousedown)=\"preventDefault($event)\"\n (click)=\"imageClick()\"\n [thySrc]=\"imageEntry.thumbUrl\"\n [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n [thyOriginSrc]=\"imageEntry.originUrl\"\n [thyDisablePreview]=\"disablePreview\"\n [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n [alt]=\"imageEntry.name\"\n />\n <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n </div>\n <div *ngIf=\"uploading\" class=\"uploading\">\n <div class=\"uploading-percentage\">\n <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n </div>\n </div>\n <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n </div>\n <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n <thy-icon thyIconName=\"image\"></thy-icon>\n </div>\n</div>\n\n<ng-template #layoutToolbar>\n <thy-actions thySize=\"xxs\">\n <ng-container *ngFor=\"let item of layoutOptions\">\n <a\n *ngIf=\"item.key !== 'split'\"\n href=\"javascript:;\"\n thyAction\n [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n [thyActionIcon]=\"item.icon\"\n [thyActionActive]=\"layoutActive(item.key)\"\n [thyTooltip]=\"item.name\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"item?.handle($event, item.key)\"\n ></a>\n <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n </ng-container>\n </thy-actions>\n</ng-template>\n" }]
|
|
8619
8634
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
8620
8635
|
type: Inject,
|
|
8621
8636
|
args: [THE_UPLOAD_SERVICE_TOKEN]
|
|
8622
|
-
}] }, { type: i0.ChangeDetectorRef }, { type: TheContextService }, { type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type:
|
|
8637
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: TheContextService }, { type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i4$1.ThyImageGroupComponent }]; }, propDecorators: { imageContent: [{
|
|
8623
8638
|
type: ViewChild,
|
|
8624
8639
|
args: ['imageContent']
|
|
8625
8640
|
}], img: [{
|
|
@@ -8628,6 +8643,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
8628
8643
|
}], layoutToolbar: [{
|
|
8629
8644
|
type: ViewChild,
|
|
8630
8645
|
args: ['layoutToolbar', { static: true }]
|
|
8646
|
+
}], imageDirective: [{
|
|
8647
|
+
type: ViewChild,
|
|
8648
|
+
args: [ThyImageDirective]
|
|
8631
8649
|
}] } });
|
|
8632
8650
|
|
|
8633
8651
|
const withImage = (editor) => {
|