import { ObjectsProviderService } from './objects-provider.service'; import { EditorLayersService } from './editor-layers.service'; import { MathematicsService } from './mathematics.service'; import { AssetsProviderService } from './assets-provider.service'; import { MapConfig } from '../models/configuration'; import { ConfigService } from './config.service'; import { Observable, ReplaySubject } from 'rxjs'; export declare class MapEditorService { private provider; private assets; private layers; private math; private config; private editor; private editorBox; private cursor; private selectionBox; private ctx; private editorWidth; private editorHeight; private activeObject; private hoveredObject; private snapToGrid; private gridSize; private showGrid; private selectingMode; private mousePos; private rotation; private backgroundImage; private selection; private selectionBounds; private selectionBoxBounds; private selectionBoxStart; private selectionOverlapInterval; private initialized; private isMouseOverEditor; private isReadOnlyMode; private currentFloorMap; /** * Returns true if editor currently is in selection mode, so user has selected something or is * selecting something at the moment by dragging selection rectangle. */ private readonly isInSelectionMode; /** * An event called when editor state changed due to dependencies change. */ changed: ReplaySubject; /** * Returns true, if editor is currently in read-only mode. */ readonly isReadOnly: boolean; constructor(provider: ObjectsProviderService, assets: AssetsProviderService, layers: EditorLayersService, math: MathematicsService, config: ConfigService); /** * Changes active cursor object selected by the user. * The type must be one of available object types from configuration. * @param type The type to select as active drawing object. */ setActiveObject(type: string): void; /** * Undo object insertion - not operation yet. */ undo(): void; /** * Performs 45 degrees rotation of current active object - cursor. */ rotate45(): number; /** * Draws an object using location of it's center. * @param x A center of the object rotation. * @param y A center of the object rotation. */ drawObject(x: number, y: number): void; /** * Clear whole map editor, including graphics and interactive elements. */ clear(): void; /** * Toggle the grid on or off. */ toggleGrid(showGrid?: boolean): void; /** * Moves currently hovered or selected elements to the top of objects hierarchy. */ bringToTop(): void; /** * Moves currently hovered or selected elements to the bottom of objects hierarchy. */ bringToBottom(): void; /** * Replaces current editor content with new map. * @param map A map to load into editor. */ loadMap(map: MapConfig): Observable; /** * Creates a current map snapshot and returns it as MapConfig instance. */ snapshotMap(): MapConfig; /** * Changes editor mode to readonly, so the user can only view map, without any changes. * @param readOnly */ setReadOnlyMode(readOnly: boolean): Observable; /** * Fully reloads and regenerates current map. */ private reload; /** * Execute in ngAfterViewInit(), to initialize whole editor correctly. */ private init; /** * Cleans the canvas and redraws background image and grid if turned on. * Not touching interactivity elements. */ private clean; /** * Changes background image of the editor and redraws all graphics * over it. * @param imageData Base64 image to set as background. */ private setBackgroundImage; /** * Draws whole canvas content again - redraws it, not touching * any interactivity objects like map object native elements. */ private redraw; /** * Rotates current cursor div according to current rotation. */ private updateCursorRotation; /** * Initializes global keyboard event hooks to handle shortcuts. */ private initGlobalEventHooks; /** * Handles global key down events of the browser. * @param event Keyboard event data. */ private onGlobalKeyDown; /** * Handles global key up events of the browser. * @param event Keyboard event data. */ private onGlobalKeyUp; /** * Handles global key press event - useful for key combinations. * @param event Keyboard event data. */ private onGlobalKeyPress; /** * Creates an interactive DIV element used to select and hover map objects. * Givern active object is used to get interactive object properties. * @param active Existing map object to be linked with interactive object. */ private createInteractiveObjectElement; private canPerformSelection; /** * Selects / Deselects given object - it uses interactive object to visualize selection. * @param obj Map object which selection will be changed. */ private toggleSelection; /** * Recalculates selection bounds based on current selected objects list or * given selection field. * @param element An HTML object that represents current selection field, if not set, * a selection field with selected objects is used to calculated bounds. */ private recalculateSelectionBounds; /** * Deselects given map object. * @param obj A map object that will be deselected. */ private deselect; /** * Deselects all currently selected map objects. * @param refreshMouseMoveEvent If set true, mouse move event of editor * is simulated to refresh cursor display and position. */ private clearSelection; /** * Translates location of all currently selected objects. * @param deltaX delta of X offset movement. * @param deltaY delta of Y offset movement. */ private transformSelection; /** * Checks if given object overlaps current selection field. * @param obj An object to check. */ private overlapsSelectionBox; /** * Removes all currently selected objects - all from selection array. */ private deleteSelectedObjects; /** * Removes given object and all references like interactive native DIV object. * @param obj Map object to remove. */ private removeObject; /** * Removes interactive native DIV object of the given map object. * @param obj Map object to use as reference. */ private removeNativeChildOfObject; /** * Draws graphical representation of map object on canvas. * @param obj Reference map object to use for drawing. */ private drawObjectInternal; /** * Draws a grid over current canvas. * Remember to control the order of drawing grid and other objects. * @param cellSize Size of grid cell in pixels. */ private drawGrid; /** * Draws all graphical representations of all map objects. * Doesn;t touch any interactive elements. */ private drawLayers; /** * Gets object position according to grid and snapToGrid settings. * It is used instead of checking which of getDefaultObjectPos or getSnappedToGridObjectPos should be used. * @param xy Location of the left upper corner of object or a center of object (look on decentered param). * @param w Width of the object. * @param h Height of the object. * @param decentered Change current xy position of object center to left upper corner. */ private getObjectPos; /** * Enable or disable all map objects interactive overlays (DIV native objects). * When we are in read-only mode, this method is used to DISABLE all DIVs. * @param enable If true, all native DIVs interact with mouse, otherwise they look like invisible. */ private toggleObjectOverlaysInteractivity; /** * Handles event fired when user's mouse cursor enters Canvas. */ private onEditorMouseEnter; /** * Handles event fired when user's mouse cursor leaves over Canvas. */ private onEditorMouseLeave; /** * Handles event fired when user presses mouse button over Canvas. * @param e Event data. */ private onEditorMouseDown; /** * Handles event fired when user releases mouse button over Canvas. * @param e Event data. */ private onEditorMouseUp; /** * Handles event fired when user moves mouse cursor over Canvas. * @param e Event data. */ private onEditorMouseMove; /** * Handles event fired when user click the Canvas. * @param e Event data. */ private onEditorClick; private triggerMouseMove; /** * Returns a number representing CSS string value. * @param value A CSS string value (e.g. '12px', '3em', '45%'...) */ private extractStyleNumber; }