Skip to content

Commit

Permalink
Reset in size change not rescaling image
Browse files Browse the repository at this point in the history 
Issue: xdan/jodit#568
  • Loading branch information
@vinhtranchau
vinhtranchau committed Dec 2, 2020
1 parent 1950879 commit 638407f
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 82 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ console.log(item.options); // {some: false}

#### :bug: Bug Fix

* [#568 Reset in size change not rescaling image](https://github.com/xdan/jodit/issues/568)
* [#550 Table cell elements are always left-aligned](https://github.com/xdan/jodit/issues/550)
* [#543 editor.destruct throws error](https://github.com/xdan/jodit/issues/543)
* [#540 How i can get Iframe without parent element <jodit>...</jodit>](https://github.com/xdan/jodit/issues/540)
Expand Down
38 changes: 2 additions & 36 deletions src/modules/dialog/dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ import type {
IDialog,
ContentItem,
Content,
IDialogOptions,
CanUndef
IDialogOptions
} from '../../types/';
import { Config, OptionsDefault } from '../../config';
import { KEY_ESC } from '../../core/constants';
Expand All @@ -39,7 +38,7 @@ import { ViewWithToolbar } from '../../core/view/view-with-toolbar';
import { Dom } from '../../core/dom';
import { STATUSES } from '../../core/component';
import { eventEmitter, pluginSystem } from '../../core/global';
import { component, debounce } from '../../core/decorators';
import { component } from '../../core/decorators';

/**
* @property {object} dialog module settings {@link Dialog|Dialog}
Expand Down Expand Up @@ -654,40 +653,9 @@ export class Dialog extends ViewWithToolbar implements IDialog {
this.isModal = Boolean(modal);
this.container.classList.toggle('jodit-modal', this.isModal);

if (this.isModal) {
this.addModalFocusLoopListener();
} else {
this.removeModalFocusLoopListener();
}

return this;
}

private addModalFocusLoopListener(): void {
this.e.on(this.od.body, 'focusin', this.onFocusInTarget);
}

@debounce()
private onFocusInTarget(e: FocusEvent): void {
const elm = e.target as CanUndef<HTMLElement>;

if (
Dom.isHTMLElement(elm, this.ow) &&
!Dom.isOrContains(this.dialog, elm)
) {
const newFocus = this.dialog.querySelector<HTMLElement>(
'[tabIndex],button,input'
);
if (newFocus) {
newFocus.focus();
}
}
}

private removeModalFocusLoopListener(): void {
this.e.off(this.od.body, 'focusin', this.onFocusInTarget);
}

/**
* True, if dialog was opened
*/
Expand Down Expand Up @@ -747,7 +715,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
}

this.removeGlobalResizeListeners();
this.removeModalFocusLoopListener();

if (this.destroyAfterClose) {
this.destruct();
Expand Down Expand Up @@ -882,7 +849,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {

if (this.events) {
this.removeGlobalResizeListeners();
this.removeModalFocusLoopListener();

this.events
.off(this.container, 'close_dialog', self.close)
Expand Down
92 changes: 46 additions & 46 deletions src/modules/image-editor/image-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,9 @@ export class ImageEditor extends ViewComponent {
value: number | string,
percent: string | number
): number => {
const percentStr: string = percent.toString();
const valueNbr: number = parseFloat(value.toString());
const percentStr = percent.toString();
const valueNbr = parseFloat(value.toString());

let match: string[] | null;

match = /^[-+]?[0-9]+(px)?$/.exec(percentStr);
Expand All @@ -179,19 +180,23 @@ export class ImageEditor extends ViewComponent {
};

private calcCropBox = () => {
const w = (this.crop_box.parentNode as HTMLElement).offsetWidth * 0.8,
h = (this.crop_box.parentNode as HTMLElement).offsetHeight * 0.8;
const node = this.crop_box.parentNode as HTMLElement,
w = node.offsetWidth * 0.8,
h = node.offsetHeight * 0.8;

let wn: number = w,
hn: number = h;

if (w > this.naturalWidth && h > this.naturalHeight) {
wn = this.naturalWidth;
hn = this.naturalHeight;
const { naturalWidth: nw, naturalHeight: nh } = this;

if (w > nw && h > nh) {
wn = nw;
hn = nh;
} else if (this.ratio > w / h) {
wn = w;
hn = this.naturalHeight * (w / this.naturalWidth);
hn = nh * (w / nw);
} else {
wn = this.naturalWidth * (h / this.naturalHeight);
wn = nw * (h / nh);
hn = h;
}

Expand All @@ -200,6 +205,7 @@ export class ImageEditor extends ViewComponent {
height: hn
});
};

private showCrop = () => {
if (!this.cropImage) {
return;
Expand Down Expand Up @@ -462,48 +468,41 @@ export class ImageEditor extends ViewComponent {
}
})
.on(
widthInput,
`change.${jie} mousedown.${jie} keydown.${jie}`,
self.j.async.debounce(() => {
const value: number = parseInt(widthInput.value, 10);
let another: number;
if (value > self.o.min_width) {
css(self.image, 'width', value + 'px');
[widthInput, heightInput],
`input.${jie}`,
self.j.async.debounce((e: MouseEvent) => {
const input = e.target as HTMLInputElement,
isWidth = attr(input, 'data-ref') === 'widthInput',
x = parseInt(input.value, 10),
minX = isWidth ? self.o.min_width : self.o.min_height,
minY = !isWidth ? self.o.min_width : self.o.min_height;

if (self.resizeUseRatio) {
another = Math.round(value / self.ratio);
let y: number;

if (another > self.o.min_height) {
css(self.image, 'height', another + 'px');
heightInput.value = another.toString();
}
}
}
this.j.e.fire(self.resizeHandler, 'updatesize');
}, 200)
)
.on(
heightInput,
`change.${jie} mousedown.${jie} keydown.${jie}`,
self.j.async.debounce(() => {
if (this.isDestructed) {
return;
}

const value: number = parseInt(heightInput.value, 10);
let another: number;
if (value > self.o.min_height) {
css(self.image, 'height', value + 'px');
if (x > minX) {
css(self.image, isWidth ? 'width' : 'height', x);

if (self.resizeUseRatio) {
another = Math.round(value * self.ratio);
y = isWidth
? Math.round(x / self.ratio)
: Math.round(x * self.ratio);

if (y > minY) {
css(
self.image,
!isWidth ? 'width' : 'height',
y
);

if (another > self.o.min_width) {
css(self.image, 'width', another + 'px');
widthInput.value = another.toString();
if (isWidth) {
heightInput.value = y.toString();
} else {
widthInput.value = y.toString();
}
}
}
}

this.j.e.fire(self.resizeHandler, 'updatesize');
}, 200)
);
Expand All @@ -530,9 +529,8 @@ export class ImageEditor extends ViewComponent {
css(self.resizeHandler, {
top: 0,
left: 0,
width: (self.image.offsetWidth || self.naturalWidth) + 'px',
height:
(self.image.offsetHeight || self.naturalHeight) + 'px'
width: self.image.offsetWidth || self.naturalWidth,
height: self.image.offsetHeight || self.naturalHeight
});

this.updateResizeBox();
Expand Down Expand Up @@ -641,10 +639,12 @@ export class ImageEditor extends ViewComponent {

widthInput.value = self.naturalWidth.toString();
heightInput.value = self.naturalHeight.toString();

self.j.e.fire(self.resizeHandler, 'updatesize');
} else {
self.showCrop();
}

break;
}
});
Expand Down

0 comments on commit 638407f

Please sign in to comment.