Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image edit 2 (prototype, do not review) #2697

Closed
wants to merge 1 commit into from
Closed

Image edit 2 (prototype, do not review) #2697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/setDOMSelection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { addRangeToSelection } from './addRangeToSelection';
import { areSameSelection } from '../../corePlugin/cache/areSameSelection';
import { ensureImageHasSpanParent } from './ensureImageHasSpanParent';
import { ensureUniqueId } from '../setEditorStyle/ensureUniqueId';
import { findLastedCoInMergedCell } from './findLastedCoInMergedCell';
Expand All @@ -24,6 +25,12 @@ const SELECTION_SELECTOR = '*::selection';
* @internal
*/
export const setDOMSelection: SetDOMSelection = (core, selection, skipSelectionChangedEvent) => {
const existingSelection = core.api.getDOMSelection(core);

if (existingSelection && selection && areSameSelection(existingSelection, selection)) {
return;
}

// We are applying a new selection, so we don't need to apply cached selection in DOMEventPlugin.
// Set skipReselectOnFocus to skip this behavior
const skipReselectOnFocus = core.selection.skipReselectOnFocus;
Expand Down Expand Up @@ -150,6 +157,7 @@ export const setDOMSelection: SetDOMSelection = (core, selection, skipSelectionC
const eventData: SelectionChangedEvent = {
eventType: 'selectionChanged',
newSelection: selection,
previousSelection: existingSelection,
};

core.api.triggerEvent(core, eventData, true /*broadcast*/);
Expand Down
47 changes: 38 additions & 9 deletions packages/roosterjs-content-model-core/lib/corePlugin/cache/areSameSelection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import type { CacheSelection, DOMSelection } from 'roosterjs-content-model-types';
import type {
CacheSelection,
DOMSelection,
RangeSelection,
RangeSelectionForCache,
} from 'roosterjs-content-model-types';

/**
* @internal
* Check if the given selections are the same
*/
export function areSameSelection(sel1: DOMSelection, sel2: CacheSelection): boolean {
export function areSameSelection(sel1: DOMSelection, sel2: CacheSelection | DOMSelection): boolean {
if (sel1 == sel2) {
return true;
}
Expand All @@ -25,12 +30,36 @@ export function areSameSelection(sel1: DOMSelection, sel2: CacheSelection): bool

case 'range':
default:
return (
sel2.type == 'range' &&
sel1.range.startContainer == sel2.start.node &&
sel1.range.endContainer == sel2.end.node &&
sel1.range.startOffset == sel2.start.offset &&
sel1.range.endOffset == sel2.end.offset
);
if (sel2.type == 'range') {
const { startContainer, startOffset, endContainer, endOffset } = sel1.range;

if (isCacheSelection(sel2)) {
const { start, end } = sel2;

return (
startContainer == start.node &&
endContainer == end.node &&
startOffset == start.offset &&
endOffset == end.offset
);
} else {
const { range } = sel2;

return (
startContainer == range.startContainer &&
endContainer == range.endContainer &&
startOffset == range.startOffset &&
endOffset == range.endOffset
);
}
} else {
return false;
}
}
}

function isCacheSelection(
sel: RangeSelectionForCache | RangeSelection
): sel is RangeSelectionForCache {
return !!(sel as RangeSelectionForCache).start;
}
55 changes: 4 additions & 51 deletions packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,13 @@ import type {
SelectionPluginState,
EditorOptions,
DOMHelper,
MouseUpEvent,
ParsedTable,
TableSelectionInfo,
TableCellCoordinate,
RangeSelection,
} from 'roosterjs-content-model-types';

const MouseLeftButton = 0;
const MouseMiddleButton = 1;
const MouseRightButton = 2;
const Up = 'ArrowUp';
const Down = 'ArrowDown';
const Left = 'ArrowLeft';
Expand All @@ -48,7 +45,6 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
private state: SelectionPluginState;
private disposer: (() => void) | null = null;
private isSafari = false;
private isMac = false;
private scrollTopCache: number = 0;

constructor(options: EditorOptions) {
Expand Down Expand Up @@ -99,7 +95,6 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
const document = this.editor.getDocument();

this.isSafari = !!env.isSafari;
this.isMac = !!env.isMac;
document.addEventListener('selectionchange', this.onSelectionChange);
if (this.isSafari) {
this.disposer = this.editor.attachDomEvent({
Expand Down Expand Up @@ -142,7 +137,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
break;

case 'mouseUp':
this.onMouseUp(event);
this.onMouseUp();
break;

case 'keyDown':
Expand All @@ -166,17 +161,9 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
let image: HTMLImageElement | null;

// Image selection
if (
rawEvent.button === MouseRightButton &&
(image =
this.getClickingImage(rawEvent) ??
this.getContainedTargetImage(rawEvent, selection)) &&
image.isContentEditable
) {
if ((image = this.getClickingImage(rawEvent)) && image.isContentEditable) {
this.selectImageWithRange(image, rawEvent);
return;
} else if (selection?.type == 'image' && selection.image !== rawEvent.target) {
this.selectBeforeOrAfterElement(editor, selection.image);

return;
}

Expand Down Expand Up @@ -297,20 +284,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
}
}

private onMouseUp(event: MouseUpEvent) {
let image: HTMLImageElement | null;

if (
(image = this.getClickingImage(event.rawEvent)) &&
image.isContentEditable &&
event.rawEvent.button != MouseMiddleButton &&
(event.rawEvent.button ==
MouseRightButton /* it's not possible to drag using right click */ ||
event.isClicking)
) {
this.selectImageWithRange(image, event.rawEvent);
}

private onMouseUp() {
this.detachMouseEvent();
}

Expand Down Expand Up @@ -552,27 +526,6 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
: null;
}

// MacOS will not create a mouseUp event if contextMenu event is not prevent defaulted.
// Make sure we capture image target even if image is wrapped
private getContainedTargetImage = (
event: MouseEvent,
previousSelection: DOMSelection | null
): HTMLImageElement | null => {
if (!this.isMac || !previousSelection || previousSelection.type !== 'image') {
return null;
}

const target = event.target as Node;
if (
isNodeOfType(target, 'ELEMENT_NODE') &&
isElementOfType(target, 'span') &&
target.firstChild === previousSelection.image
) {
return previousSelection.image;
}
return null;
};

private onFocus = () => {
if (!this.state.skipReselectOnFocus && this.state.selection) {
this.setDOMSelection(this.state.selection, this.state.tableSelection);
Expand Down
120 changes: 106 additions & 14 deletions packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { canRegenerateImage } from './utils/canRegenerateImage';
import { checkIfImageWasResized, isASmallImage } from './utils/imageEditUtils';
import { createImageWrapper } from './utils/createImageWrapper';
import { Cropper } from './Cropper/cropperContext';
import { formatInsertPointWithContentModel } from 'roosterjs-content-model-api/lib';
import { getDropAndDragHelpers } from './utils/getDropAndDragHelpers';
import { getHTMLImageOptions } from './utils/getHTMLImageOptions';
import { getSelectedImageMetadata } from './utils/updateImageEditInfo';
Expand All @@ -16,13 +17,16 @@ import {
isElementOfType,
isNodeOfType,
mutateSegment,
toArray,
unwrap,
} from 'roosterjs-content-model-dom';
import type { DragAndDropHelper } from '../pluginUtils/DragAndDrop/DragAndDropHelper';
import type { DragAndDropContext } from './types/DragAndDropContext';
import type { ImageHtmlOptions } from './types/ImageHtmlOptions';
import type { ImageEditOptions } from './types/ImageEditOptions';
import type {
DOMInsertPoint,
DOMSelection,
EditorPlugin,
IEditor,
ImageEditOperation,
Expand All @@ -42,6 +46,7 @@ const DefaultOptions: Partial<ImageEditOptions> = {
};

const IMAGE_EDIT_CHANGE_SOURCE = 'ImageEdit';
const MouseLeftButton = 0;

/**
* ImageEdit plugin handles the following image editing features:
Expand Down Expand Up @@ -86,15 +91,15 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
initialize(editor: IEditor) {
this.editor = editor;
this.disposer = editor.attachDomEvent({
blur: {
beforeDispatch: () => {
this.formatImageWithContentModel(
editor,
true /* shouldSelectImage */,
true /* shouldSelectAsImageSelection*/
);
},
},
// blur: {
// beforeDispatch: () => {
// this.formatImageWithContentModel(
// editor,
// true /* shouldSelectImage */,
// true /* shouldSelectAsImageSelection*/
// );
// },
// },
});
}

Expand All @@ -118,15 +123,59 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
* exclusively by another plugin.
* @param event The event to handle:
*/
onPluginEvent(_event: PluginEvent) {}
onPluginEvent(event: PluginEvent) {
if (!this.editor) {
return;
}

switch (event.eventType) {
case 'selectionChanged':
{
const selection = event.newSelection;
const previousSelection = event.previousSelection;

if (previousSelection?.type == 'image' && selection && this.shadowSpan) {
const previousImage = previousSelection.image;
if (previousImage) {
this.formatImageWhenSelectionChange(this.editor, selection);
}
}
}

break;

// case 'keyUp':
case 'mouseUp':
{
const selection = this.editor.getDOMSelection();

if (
selection?.type == 'image' &&
(event.eventType != 'mouseUp' || event.rawEvent.button == MouseLeftButton)
) {
const image = selection.image;

if (image) {
this.startRotateAndResize(this.editor, image);
}
}
}
break;
}
}

private startEditing(
editor: IEditor,
image: HTMLImageElement,
apiOperation?: ImageEditOperation
) {
const imageSpan = image.parentElement;
if (!imageSpan || (imageSpan && !isElementOfType(imageSpan, 'span'))) {
if (
!imageSpan ||
(imageSpan && !isElementOfType(imageSpan, 'span')) ||
image.width <= 0 ||
image.height <= 0
) {
return;
}
this.imageEditInfo = getSelectedImageMetadata(editor, image);
Expand Down Expand Up @@ -171,6 +220,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
if (this.wrapper && this.selectedImage && this.shadowSpan) {
this.removeImageWrapper();
}

this.startEditing(editor, image, apiOperation);
if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
this.dndHelpers = [
Expand Down Expand Up @@ -439,21 +489,63 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
image.isSelectedAsImageSelection = shouldSelectAsImageSelection;
}
});

this.cleanInfo();
return true;
}

return false;
},
{
changeSource: IMAGE_EDIT_CHANGE_SOURCE,
onNodeCreated: () => {
this.cleanInfo();
},
}
);
}
}

private formatImageWhenSelectionChange(editor: IEditor, newSelection: DOMSelection) {
const { selectedImage, imageEditInfo, lastSrc, clonedImage } = this;

if (
selectedImage?.parentNode &&
lastSrc &&
imageEditInfo &&
clonedImage &&
this.shadowSpan
) {
const parent = selectedImage.parentNode;
const index = toArray(parent.childNodes).indexOf(selectedImage);
const domIp: DOMInsertPoint = {
node: parent,
offset: index,
};

formatInsertPointWithContentModel(editor, domIp, (model, context, insertPoint) => {
if (insertPoint) {
const { paragraph, marker } = insertPoint;
const markerIndex = paragraph.segments.indexOf(marker);
const image = paragraph.segments[markerIndex + 1];

if (markerIndex >= 0 && image?.segmentType == 'Image') {
applyChange(
editor,
selectedImage,
image,
imageEditInfo,
lastSrc,
this.wasImageResized || this.isCropMode,
clonedImage
);

return true;
}
}

return false;
});
}
}

private removeImageWrapper() {
let image: HTMLImageElement | null = null;
if (this.shadowSpan && this.shadowSpan.parentElement) {
Expand Down
Loading
Loading