@worktile/theia 15.1.16 → 15.1.18
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/editor.component.mjs +6 -1
- package/esm2020/interfaces/image.mjs +1 -1
- package/esm2020/plugins/image/image.component.mjs +31 -9
- package/fesm2015/worktile-theia.mjs +35 -9
- package/fesm2015/worktile-theia.mjs.map +1 -1
- package/fesm2020/worktile-theia.mjs +35 -9
- package/fesm2020/worktile-theia.mjs.map +1 -1
- package/interfaces/image.d.ts +16 -1
- package/package.json +1 -1
- package/plugins/image/image.component.d.ts +5 -4
|
@@ -50,7 +50,7 @@ import * as i1$3 from 'ngx-tethys/alert';
|
|
|
50
50
|
import { ThyAlertModule } from 'ngx-tethys/alert';
|
|
51
51
|
import { ThyUploadStatus } from 'ngx-tethys/upload';
|
|
52
52
|
import * as i4$1 from 'ngx-tethys/image';
|
|
53
|
-
import { ThyImageModule } from 'ngx-tethys/image';
|
|
53
|
+
import { ThyImageDirective, ThyImageModule } from 'ngx-tethys/image';
|
|
54
54
|
import * as i9$1 from 'ngx-tethys/progress';
|
|
55
55
|
import { ThyProgressModule } from 'ngx-tethys/progress';
|
|
56
56
|
import isUrl from 'is-url';
|
|
@@ -8290,7 +8290,7 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8290
8290
|
? this.layoutDefaultWidth
|
|
8291
8291
|
: this.imageEntry.width;
|
|
8292
8292
|
}
|
|
8293
|
-
constructor(elementRef, imageUploaderService, cdr, theContextService, thyPopover, overlay,
|
|
8293
|
+
constructor(elementRef, imageUploaderService, cdr, theContextService, thyPopover, overlay, viewContainerRef, imageGroupComponent) {
|
|
8294
8294
|
super(elementRef, cdr);
|
|
8295
8295
|
this.elementRef = elementRef;
|
|
8296
8296
|
this.imageUploaderService = imageUploaderService;
|
|
@@ -8298,8 +8298,8 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8298
8298
|
this.theContextService = theContextService;
|
|
8299
8299
|
this.thyPopover = thyPopover;
|
|
8300
8300
|
this.overlay = overlay;
|
|
8301
|
-
this.thyImageService = thyImageService;
|
|
8302
8301
|
this.viewContainerRef = viewContainerRef;
|
|
8302
|
+
this.imageGroupComponent = imageGroupComponent;
|
|
8303
8303
|
this.naturalWidth = 0;
|
|
8304
8304
|
this.naturalHeight = 0;
|
|
8305
8305
|
this.imageEntry = {};
|
|
@@ -8385,9 +8385,27 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8385
8385
|
this.imagePluginOptions = getPluginOptions(this.editor, PluginKeys.image);
|
|
8386
8386
|
this.disablePreview = this.imagePluginOptions.disablePreview;
|
|
8387
8387
|
}
|
|
8388
|
-
|
|
8388
|
+
imageClick() {
|
|
8389
|
+
const index = this.imageGroupComponent.images.findIndex(item => item === this.imageDirective);
|
|
8390
|
+
const imageGroup = this.imageGroupComponent.images.map(item => {
|
|
8391
|
+
return {
|
|
8392
|
+
originUrl: item.thyOriginSrc,
|
|
8393
|
+
thumbUrl: item.thyPreviewSrc
|
|
8394
|
+
};
|
|
8395
|
+
});
|
|
8396
|
+
const { originUrl, thumbUrl } = this.element;
|
|
8389
8397
|
if (this.imagePluginOptions.preview) {
|
|
8390
|
-
this.imagePluginOptions.preview(
|
|
8398
|
+
this.imagePluginOptions.preview({
|
|
8399
|
+
editor: this.editor,
|
|
8400
|
+
previewImageInfo: {
|
|
8401
|
+
image: {
|
|
8402
|
+
originUrl,
|
|
8403
|
+
thumbUrl
|
|
8404
|
+
},
|
|
8405
|
+
imageGroup,
|
|
8406
|
+
index
|
|
8407
|
+
}
|
|
8408
|
+
});
|
|
8391
8409
|
}
|
|
8392
8410
|
}
|
|
8393
8411
|
onContextChange() {
|
|
@@ -8631,16 +8649,16 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8631
8649
|
event.stopPropagation();
|
|
8632
8650
|
}
|
|
8633
8651
|
}
|
|
8634
|
-
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:
|
|
8635
|
-
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)=\"
|
|
8652
|
+
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 });
|
|
8653
|
+
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"] }] });
|
|
8636
8654
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TheImageComponent, decorators: [{
|
|
8637
8655
|
type: Component,
|
|
8638
|
-
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)=\"
|
|
8656
|
+
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" }]
|
|
8639
8657
|
}], ctorParameters: function () {
|
|
8640
8658
|
return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
8641
8659
|
type: Inject,
|
|
8642
8660
|
args: [THE_UPLOAD_SERVICE_TOKEN]
|
|
8643
|
-
}] }, { type: i0.ChangeDetectorRef }, { type: TheContextService }, { type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type:
|
|
8661
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: TheContextService }, { type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i4$1.ThyImageGroupComponent }];
|
|
8644
8662
|
}, propDecorators: { imageContent: [{
|
|
8645
8663
|
type: ViewChild,
|
|
8646
8664
|
args: ['imageContent']
|
|
@@ -8650,6 +8668,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
8650
8668
|
}], layoutToolbar: [{
|
|
8651
8669
|
type: ViewChild,
|
|
8652
8670
|
args: ['layoutToolbar', { static: true }]
|
|
8671
|
+
}], imageDirective: [{
|
|
8672
|
+
type: ViewChild,
|
|
8673
|
+
args: [ThyImageDirective]
|
|
8653
8674
|
}] } });
|
|
8654
8675
|
|
|
8655
8676
|
const withImage = (editor) => {
|
|
@@ -16055,6 +16076,11 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
|
|
|
16055
16076
|
// data-deserialize
|
|
16056
16077
|
this.editorValue = data;
|
|
16057
16078
|
this.cdr.markForCheck();
|
|
16079
|
+
if (!this.theOptions.readonly && AngularEditor.isFocused(this.editor) && this.editor.selection) {
|
|
16080
|
+
const selection = this.editor.selection;
|
|
16081
|
+
Transforms.deselect(this.editor);
|
|
16082
|
+
Transforms.select(this.editor, selection);
|
|
16083
|
+
}
|
|
16058
16084
|
}
|
|
16059
16085
|
registerOnChange(fn) {
|
|
16060
16086
|
this.onChangeCallback = fn;
|