Skip to content

Commit

Permalink
fixes texts
Browse files Browse the repository at this point in the history
  • Loading branch information
juliaroldi committed Jun 5, 2024
1 parent 4c8d7eb commit 26d6e90
Show file tree
Hide file tree
Showing 8 changed files with 142 additions and 59 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,12 @@ import { canRegenerateImage } from './utils/canRegenerateImage';
import { checkIfImageWasResized, isASmallImage } from './utils/imageEditUtils';
import { createImageWrapper } from './utils/createImageWrapper';
import { Cropper } from './Cropper/cropperContext';
import { getContentModelImage } from './utils/getContentModelImage';
import { getDropAndDragHelpers } from './utils/getDropAndDragHelpers';
import { getHTMLImageOptions } from './utils/getHTMLImageOptions';
import { getSelectedImageMetadata } from './utils/updateImageEditInfo';
import { ImageEditElementClass } from './types/ImageEditElementClass';
import { Resizer } from './Resizer/resizerContext';
import { Rotator } from './Rotator/rotatorContext';
import { updateImageEditInfo } from './utils/updateImageEditInfo';
import { updateRotateHandle } from './Rotator/updateRotateHandle';
import { updateWrapper } from './utils/updateWrapper';
import {
Expand Down Expand Up @@ -126,16 +125,11 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
image: HTMLImageElement,
apiOperation?: ImageEditOperation
) {
const contentModelImage = getContentModelImage(editor);
const imageSpan = image.parentElement;
if (
!contentModelImage ||
!imageSpan ||
(imageSpan && !isElementOfType(imageSpan, 'span'))
) {
if (!imageSpan || (imageSpan && !isElementOfType(imageSpan, 'span'))) {
return;
}
this.imageEditInfo = updateImageEditInfo(contentModelImage, image);
this.imageEditInfo = getSelectedImageMetadata(editor, image);
this.lastSrc = image.getAttribute('src');
this.imageHTMLOptions = getHTMLImageOptions(editor, this.options, this.imageEditInfo);
const {
Expand Down Expand Up @@ -412,7 +406,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
this.shadowSpan
) {
editor.formatContentModel(
(model, context) => {
model => {
const selectedSegmentsAndParagraphs = getSelectedSegmentsAndParagraphs(
model,
false
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { checkEditInfoState } from './checkEditInfoState';
import { generateDataURL } from './generateDataURL';
import { getGeneratedImageSize } from './generateImageSize';
import { updateImageEditInfo } from './updateImageEditInfo';
import { getSelectedImageMetadata, updateImageEditInfo } from './updateImageEditInfo';
import type {
ContentModelImage,
IEditor,
Expand All @@ -28,7 +28,7 @@ export function applyChange(
editingImage?: HTMLImageElement
) {
let newSrc = '';
const initEditInfo = updateImageEditInfo(contentModelImage, editingImage ?? image) ?? undefined;
const initEditInfo = getSelectedImageMetadata(editor, editingImage ?? image) ?? undefined;
const state = checkEditInfoState(editInfo, initEditInfo);

switch (state) {
Expand Down Expand Up @@ -64,11 +64,11 @@ export function applyChange(
if (newSrc == editInfo.src) {
// If newSrc is the same with original one, it means there is only size change, but no rotation, no cropping,
// so we don't need to keep edit info, we can delete it
updateImageEditInfo(contentModelImage, image, null);
updateImageEditInfo(contentModelImage, null);
} else {
// Otherwise, save the new edit info to the image so that next time when we edit the same image, we know
// the edit info
updateImageEditInfo(contentModelImage, image, editInfo);
updateImageEditInfo(contentModelImage, editInfo);
}

// Write back the change to image, and set its new size
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { getSelectedSegments } from 'roosterjs-content-model-dom';
import type {
ReadonlyContentModelImage,
ShallowMutableContentModelDocument,
} from 'roosterjs-content-model-types';

/**
* @internal
*/
export function getSelectedContentModelImage(
model: ShallowMutableContentModelDocument
): ReadonlyContentModelImage | null {
const selectedSegments = getSelectedSegments(model, false /*includeFormatHolder*/);
if (selectedSegments.length == 1 && selectedSegments[0].segmentType == 'Image') {
return selectedSegments[0];
}

return null;
}
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import { getSelectedContentModelImage } from './getSelectedContentModelImage';
import { updateImageMetadata } from 'roosterjs-content-model-dom';
import type { ContentModelImage, ImageMetadataFormat } from 'roosterjs-content-model-types';
import type {
ContentModelImage,
IEditor,
ImageMetadataFormat,
} from 'roosterjs-content-model-types';

/**
* @internal
*/
export function updateImageEditInfo(
contentModelImage: ContentModelImage,
image: HTMLImageElement,
newImageMetadata?: ImageMetadataFormat | null
): ImageMetadataFormat {
const imageInfo = updateImageMetadata(
) {
updateImageMetadata(
contentModelImage,
newImageMetadata !== undefined
? format => {
Expand All @@ -18,7 +22,6 @@ export function updateImageEditInfo(
}
: undefined
);
return imageInfo || getInitialEditInfo(image);
}

function getInitialEditInfo(image: HTMLImageElement): ImageMetadataFormat {
Expand All @@ -35,3 +38,23 @@ function getInitialEditInfo(image: HTMLImageElement): ImageMetadataFormat {
angleRad: 0,
};
}

/**
* @internal
* @returns
*/
export function getSelectedImageMetadata(
editor: IEditor,
image: HTMLImageElement
): ImageMetadataFormat {
let imageMetadata: ImageMetadataFormat = getInitialEditInfo(image);
editor.formatContentModel(model => {
const selectedImage = getSelectedContentModelImage(model);
if (selectedImage) {
imageMetadata = { ...imageMetadata, ...selectedImage.dataset };
}
return false;
});

return imageMetadata;
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ContentModelDocument } from 'roosterjs-content-model-types';
import { getContentModelImage } from '../../lib/imageEdit/utils/getContentModelImage';
import { getSelectedImageMetadata } from '../../lib/imageEdit/utils/updateImageEditInfo';
import { ImageEditPlugin } from '../../lib/imageEdit/ImageEditPlugin';
import { initEditor } from '../TestHelper';

Expand Down Expand Up @@ -44,18 +44,22 @@ describe('ImageEditPlugin', () => {
const editor = initEditor('image_edit', [plugin], model);

it('flip', () => {
const image = new Image();
image.src = 'test';
plugin.initialize(editor);
plugin.flipImage('horizontal');
const imageModel = getContentModelImage(editor);
expect(imageModel!.dataset['editingInfo']).toBeTruthy();
const dataset = getSelectedImageMetadata(editor, image);
expect(dataset).toBeTruthy();
plugin.dispose();
});

it('rotate', () => {
const image = new Image();
image.src = 'test';
plugin.initialize(editor);
plugin.rotateImage(Math.PI / 2);
const imageModel = getContentModelImage(editor);
expect(imageModel!.dataset['editingInfo']).toBeTruthy();
const dataset = getSelectedImageMetadata(editor, image);
expect(dataset).toBeTruthy();
plugin.dispose();
});
});
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
import { ContentModelDocument, IEditor } from 'roosterjs-content-model-types';
import { getContentModelImage } from '../../../lib/imageEdit/utils/getContentModelImage';

describe('getContentModelImage', () => {
const createEditor = (model: ContentModelDocument) => {
return <IEditor>{
getContentModelCopy: (mode: 'clean' | 'disconnected') => model,
};
};
import { ContentModelDocument } from 'roosterjs-content-model-types';
import { getSelectedContentModelImage } from '../../../lib/imageEdit/utils/getSelectedContentModelImage';

describe('getSelectedContentModelImage', () => {
it('should return image model', () => {
const model: ContentModelDocument = {
blockGroupType: 'Document',
Expand Down Expand Up @@ -44,8 +38,7 @@ describe('getContentModelImage', () => {
textColor: '#000000',
},
};
const editor = createEditor(model);
const result = getContentModelImage(editor);
const result = getSelectedContentModelImage(model);
expect(result).toEqual({
segmentType: 'Image',
src: 'test',
Expand Down Expand Up @@ -98,8 +91,7 @@ describe('getContentModelImage', () => {
textColor: '#000000',
},
};
const editor = createEditor(model);
const result = getContentModelImage(editor);
const result = getSelectedContentModelImage(model);
expect(result).toEqual(null);
});
});
Original file line number Diff line number Diff line change
@@ -1,17 +1,82 @@
import * as updateImageMetadata from 'roosterjs-content-model-dom/lib/modelApi/metadata/updateImageMetadata';
import { ContentModelDocument } from 'roosterjs-content-model-types';
import { createImage } from 'roosterjs-content-model-dom';
import { updateImageEditInfo } from '../../../lib/imageEdit/utils/updateImageEditInfo';
import { initEditor } from '../../TestHelper';
import {
getSelectedImageMetadata,
updateImageEditInfo,
} from '../../../lib/imageEdit/utils/updateImageEditInfo';

const model: ContentModelDocument = {
blockGroupType: 'Document',
blocks: [
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Image',
src: 'test',
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
id: 'image_0',
maxWidth: '1800px',
},
dataset: {
editingInfo: JSON.stringify({
src: 'test',
}),
},
isSelectedAsImageSelection: true,
isSelected: true,
},
],
format: {},
segmentFormat: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: 'rgb(0, 0, 0)',
},
},
],
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: '#000000',
},
};

describe('updateImageEditInfo', () => {
it('get image edit info', () => {
const image = document.createElement('img');
it('update image edit info', () => {
const updateImageMetadataSpy = spyOn(updateImageMetadata, 'updateImageMetadata');
const contentModelImage = createImage('test');
const result = updateImageEditInfo(contentModelImage, image, {
widthPx: 10,
heightPx: 10,
});
expect(result).toEqual({
updateImageEditInfo(contentModelImage, {
widthPx: 10,
heightPx: 10,
});
expect(updateImageMetadataSpy).toHaveBeenCalled();
});
});

describe('getSelectedImageMetadata', () => {
it('get image edit info', () => {
const editor = initEditor('updateImageEditInfo', [], model);
const image = new Image(10, 10);
const metadata = getSelectedImageMetadata(editor, image);
const expected = {
src: '',
widthPx: 0,
heightPx: 0,
naturalWidth: 0,
naturalHeight: 0,
leftPercent: 0,
rightPercent: 0,
topPercent: 0,
bottomPercent: 0,
angleRad: 0,
editingInfo: '{"src":"test"}',
};
expect(metadata).toEqual(expected);
});
});

0 comments on commit 26d6e90

Please sign in to comment.