import { FilterPipeline } from "./CanvasTools.Filter"; import { RegionData } from "./Core/RegionData"; import { ZoomManager, ZoomProperties } from "./Core/ZoomManager"; import { RegionManipulationFunction } from "./Interface/IRegionCallbacks"; import { RegionSelectionFunction, RegionUpdateFunction } from "./Interface/IRegionsManagerCallbacks"; import { PointSelectionNotifyFunction, SelectionConfirmFunction, SelectionNotifyFunction } from "./Interface/ISelectorCallbacks"; import { ZoomUpdateFunction } from "./Interface/IZoomCallbacks"; import { RegionsManager } from "./Region/RegionsManager"; import { AreaSelector } from "./Selection/AreaSelector"; import { ToolbarAction } from "./Toolbar/ToolbarAction"; import { ToolbarItemType } from "./Toolbar/ToolbarIcon"; /** * Internal type to describe toolbar presets */ export interface ToolbarIconDescription { type: ToolbarItemType; action?: ToolbarAction; iconFile?: string; tooltip?: string; actionCallback?: (action: string, rm: RegionsManager, sl: AreaSelector, zm: ZoomManager) => void; key?: string[]; width?: number; height?: number; activate?: boolean; } /** * Wraps internal CanvasTools components into one Editor experience. */ export declare class Editor { /** * A proxy wrapper around internal API for the `Editor` itself, `RegionsManager` (`RM`), `AreaSelector` (`AS`) and * `FilterPipeline` (`FP`). * @remarks As of now those apis do not overlap, so all methods/properties might be mapped from unified API. */ get api(): Editor & RegionsManager & AreaSelector & FilterPipeline & ZoomManager; /** * Short reference to the `RegionsManager` component. */ get RM(): RegionsManager; /** * Short reference to the `AreaSelector` component. */ get AS(): AreaSelector; /** * Short reference to the `FilterPipeline` component. */ get FP(): FilterPipeline; /** * Short reference to the `RegionsManager` component. */ get ZM(): ZoomManager; /** * Set polygon selection to be in add/remove points mode on anchors */ set isModifyRegionOnlyMode(value: boolean); get isModifyRegionOnlyMode(): boolean; /** * Get the frame width and frame height */ get getFrameSize(): [number, number]; /** * The toolbar icons preset with all available features. */ static FullToolbarSet: ToolbarIconDescription[]; /** * The toolbar icons preset with only rect-related features. */ static RectToolbarSet: ToolbarIconDescription[]; /** * The toolbar icon group with only zoom related features. */ private static ZoomIconGroupToolbar; /** * The toolbar icon group with only separator. */ private static SeparatorIconGroupToolbar; /** * Internal SVG template to define shadow filter. */ private static SVGDefsTemplate; /** * Auto-resize flag to automatically update editor internals when the container (window) size is changed. */ autoResize: boolean; /** * Callback for `RegionsManager` called when some region is selected or unselected. */ onRegionSelected: RegionSelectionFunction; /** * Callback for `RegionsManager` called when some region is moving. */ onRegionMove: RegionUpdateFunction; /** * Callback for `RegionsManager` called when some region began moving. */ onRegionMoveBegin: RegionUpdateFunction; /** * Callback for `RegionsManager` called when some region ended moving. */ onRegionMoveEnd: RegionUpdateFunction; /** * Callback for `RegionsManager` called when some region is deleted from UI. */ onRegionDelete: RegionUpdateFunction; /** * Callback for `RegionsManager` called when pointer entered manipulation area. */ onManipulationBegin: RegionManipulationFunction; /** * Callback for `RegionsManager` called when pointer leaved manipulation area. */ onManipulationEnd: RegionManipulationFunction; /** * Callback for `AreaSelector` called when user began selecting (creating) new region. */ onSelectionBegin: SelectionNotifyFunction; /** * Callback for `AreaSelector` called when user ended selecting (creating) new region. */ onSelectionEnd: SelectionConfirmFunction; /** * Callback for `AreaSelector` called when the next point in `PolygonSelector` is drawn. */ onNextSelectionPoint: PointSelectionNotifyFunction; /** * Callback when user ended zoom function. */ onZoomEnd: ZoomUpdateFunction; /** * Internal reference to the proxy of APIs. */ private mergedAPI; /** * Internal reference to the `Toolbar` component. */ private toolbar; /** * Internal reference to the `RegionsManager` component. */ private regionsManager; /** * Internal reference to the `AresSelector` component. */ private areaSelector; /** * Internal reference to the `FilterPipeline` component. */ private filterPipeline; /** * Internal reference to the `ZoomManager` component. */ private zoomManager; /** * Reference to the host SVG element. */ private editorSVG; /** * Reference to the host canvas element. */ private contentCanvas; /** * Reference to the host div element (contains SVG and Canvas elements). */ private editorDiv; /** * Reference to the host container div element (contains editor div). */ private editorContainerDiv; /** * Internal reference to the RegionsManager freezing state. */ private isRMFrozen; private previousSelectionMode; /** * The width of the source content. */ private sourceWidth; /** * The height of the source content. */ private sourceHeight; /** * The current frame width. */ private frameWidth; /** * The current frame height. */ private frameHeight; /** * Creates a new `Editor` in specified div-container. * @param container - The div-container for the editor. */ constructor(container: HTMLDivElement); /** * Creates a new `Editor` in specified div-container and with custom building components. * @remarks - Originally created for testing purposes. * @param container - The div-container for the editor. * @param areaSelector - The `AreaSelector` component to use. * @param regionsManager - The `RegionsManager` component to use. */ constructor(container: HTMLDivElement, areaSelector: AreaSelector, regionsManager: RegionsManager); /** * Creates a new `Editor` in specified div-container and with custom building components. * @remarks - Originally created for testing purposes. * @param container - The div-container for the editor. * @param areaSelector - The `AreaSelector` component to use. * @param regionsManager - The `RegionsManager` component to use. * @param filterPipeline - The `FilterPipeline` component to use. */ constructor(container: HTMLDivElement, areaSelector: AreaSelector, regionsManager: RegionsManager, filterPipeline: FilterPipeline); /** * Creates a new `Editor` in specified div-container and with custom building components. * @remarks - Originally created for testing purposes. * @param container - The div-container for the editor. * @param areaSelector [Optional]- The `AreaSelector` component to use. * @param regionsManager [Optional]- The `RegionsManager` component to use. * @param filterPipeline [Optional]- The `FilterPipeline` component to use. * @param zoomProperties [Optional]- The properties of Zoom Manager to set */ constructor(container: HTMLDivElement, areaSelector?: AreaSelector, regionsManager?: RegionsManager, filterPipeline?: FilterPipeline, zoomProperties?: ZoomProperties); /** * Creates a new toolbar in specified div-container * @param container - The div-container for the toolbar. * @param toolbarSet - Icons set for the toolbar. * @param iconsPath - Path to the toolbar icons. */ addToolbar(container: HTMLDivElement, toolbarSet: ToolbarIconDescription[], iconsPath: string, isVertical?: boolean): void; /** * Updates the content source for the editor. * @param source - Content source. * @returns A new `Promise` resolved when content is drawn and Editor is resized. */ addContentSource(source: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement): Promise; /** * Enable path regions. * @remarks - Any polygon region created by the editor will become a path region * (allowing curved shapes) while this setting is enabled. * @param enable - The new enabled state */ enablePathRegions(enable: boolean): void; /** * Resize editor to new width and height. * @remarks - Use if the `autoResize` is `false`. * @param containerWidth - The new container width. * @param containerHeight - The new container height. */ resize(containerWidth: number, containerHeight: number): void; /** * Scales the `RegionData` object from frame to source size. * @param regionData - The `RegionData` object. * @param sourceWidth - [Optional] The source width. * @param sourceHeight - [Optional] The source height. * @returns Resized `RegionData` object. */ scaleRegionToSourceSize(regionData: RegionData, sourceWidth?: number, sourceHeight?: number): RegionData; /** * Scales the `RegionData` object from source to frame size. * @param regionData - The `RegionData` object. * @param sourceWidth - [Optional] The source width. * @param sourceHeight - [Optional] The source height. * @returns Resized `RegionData` object. */ scaleRegionToFrameSize(regionData: RegionData, sourceWidth?: number, sourceHeight?: number): RegionData; /** * Internal helper to create a new SVG element. */ private createSVGElement; /** * Internal helper to create a new HTMLCanvas element. */ private createCanvasElement; /** * Internal helper to create a new HTMLDiv element. */ private createDivElement; /** * Internal helper to set the editor container size properties. * Necessary for zoom feature, where the internal editor may container bigger content, * and a scroll bar needs to appear. * @param zoomType - A type that indicates whether we are zooming in or out. */ private onZoom; private handleZoomAfterContentUpdate; /** * Helper function to zoom the editor to given scale. */ private zoomEditorToScale; /** * Helper function to subscribe manager to keyboard events. */ private subscribeToEvents; }