import type { OnShowResizeHandle } from './imageEditors/Resizer'; import type { ImageEditOptions, EditorPlugin, IEditor, PluginEvent } from 'roosterjs-editor-types'; import { ImageEditOperation } from 'roosterjs-editor-types'; import type { CompatibleImageEditOperation } from 'roosterjs-editor-types/lib/compatibleTypes'; /** * ImageEdit plugin provides the ability to edit an inline image in editor, including image resizing, rotation and cropping */ export default class ImageEdit implements EditorPlugin { private onShowResizeHandle?; protected editor: IEditor | null; protected options: ImageEditOptions; private disposer; private allowedOperations; private image; private clonedImage; private wrapper; private editInfo; private lastSrc; private dndHelpers; /** * Identify if the image was resized by the user. */ private wasResized; /** * The span element that wraps the image and opens shadow dom */ private shadowSpan; /** * The span element that wraps the image and opens shadow dom */ private isCropping; /** * Create a new instance of ImageEdit * @param options Image editing options * @param onShowResizeHandle An optional callback to allow customize resize handle element of image resizing. * To customize the resize handle element, add this callback and change the attributes of elementData then it * will be picked up by ImageEdit code */ constructor(options?: ImageEditOptions, onShowResizeHandle?: OnShowResizeHandle | undefined); /** * Get a friendly name of this plugin */ getName(): string; /** * Initialize this plugin. This should only be called from Editor * @param editor Editor instance */ initialize(editor: IEditor): void; /** * Dispose this plugin */ dispose(): void; /** * Handle events triggered from editor * @param e PluginEvent object */ onPluginEvent(e: PluginEvent): void; /** * Check if the given image edit operation is allowed by this plugin * @param operation The image edit operation to check * @returns True means it is allowed, otherwise false */ isOperationAllowed(operation: ImageEditOperation): boolean; /** * Set current image for edit. If there is already image in editing, it will quit editing mode and any pending editing * operation will be submitted * @param image The image to edit * @param operation The editing operation */ setEditingImage(image: HTMLImageElement, operation: ImageEditOperation | CompatibleImageEditOperation): void; /** * Stop editing image. If there is already image in editing, it will quit editing mode and any pending editing * operation will be submitted * @param image The image to edit * @param selectImage True to select this image after quit editing mode */ setEditingImage(image: null, selectImage?: boolean): void; /** * Flip the image. * @param image The image to be flipped * @param direction */ flipImage(image: HTMLImageElement, direction: 'vertical' | 'horizontal'): void; /** * Rotate the image in radian angle. * @param image The image to be rotated * @param angleRad The angle in radian that the image must be rotated. */ rotateImage(image: HTMLImageElement, angleRad: number): void; /** * quit editing mode when editor lose focus */ private onBlur; /** * Create editing wrapper for the image */ private createWrapper; /** * EXPORTED FOR TESTING PURPOSES ONLY * @param wrapper */ insertImageWrapper(wrapper: HTMLSpanElement): void; /** * Remove the temp wrapper of the image */ private removeWrapper; private changesWhenMouseUp; /** * Update image edit elements to reflect current editing result * @param context */ private updateWrapper; /** * Create drag and drop helpers * @param wrapper * @param elementClass * @param dragAndDrop */ private createDndHelpers; /** * Clean up drag and drop helpers */ private clearDndHelpers; }