import { type IEventEmitter } from '@breadstone/mosaik-elements'; import { DesignerCanvasInteractionMode } from '../../../../Types/DesignerCanvasInteractionMode'; import { CustomElement } from '../../../Abstracts/CustomElement'; import type { IDesignerCanvasElementProps } from './IDesignerCanvasElementProps'; declare const DesignerCanvasElement_base: (abstract new (...args: Array) => import("../../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../../Behaviors/Themeable").IThemeableCtor; /** * DesignerCanvas - The navigable spatial interaction surface around the frame. * * @description * Owns viewport interaction such as panning and zooming. Uses PanController, * PinchController, and KeyboardController from the foundation for gesture * and keyboard handling. Supports Ctrl+scroll zoom, pinch-to-zoom, * drag-to-pan, and keyboard shortcuts for common zoom levels. * * @name DesignerCanvas * @element mosaik-designer-canvas * @category Layouts * * @slot - Default slot for exactly one mosaik-designer-frame * * @csspart transform - The transform layer that applies pan and zoom transformations * @csspart viewport - The viewport layer that clips and contains the transform surface * * @cssprop {String} --designer-canvas-background-color - Background color of the canvas surface * @cssprop {String} --designer-canvas-dot-color - Color of the dotted grid background pattern * @cssprop {String} --designer-canvas-dot-size - Size of individual grid dots * @cssprop {String} --designer-canvas-dot-spacing - Distance between grid dots * @cssprop {String} --designer-canvas-font-family - The canvas font family CSS custom property. * @cssprop {String} --designer-canvas-font-letter-spacing - The canvas font letter spacing CSS custom property. * @cssprop {String} --designer-canvas-font-line-height - The canvas font line height CSS custom property. * @cssprop {String} --designer-canvas-font-size - The canvas font size CSS custom property. * @cssprop {String} --designer-canvas-font-text-decoration - The canvas font text decoration CSS custom property. * @cssprop {String} --designer-canvas-font-text-transform - The canvas font text transform CSS custom property. * @cssprop {String} --designer-canvas-font-weight - The canvas font weight CSS custom property. * @cssprop {String} --designer-canvas-gap - The canvas gap CSS custom property. * @cssprop {String} --designer-canvas-padding-bottom - The canvas padding bottom CSS custom property. * @cssprop {String} --designer-canvas-padding-left - The canvas padding left CSS custom property. * @cssprop {String} --designer-canvas-padding-right - The canvas padding right CSS custom property. * @cssprop {String} --designer-canvas-padding-top - The canvas padding top CSS custom property. * @cssprop {String} --designer-canvas-shadow - The canvas shadow CSS custom property. * @cssprop {String} --designer-canvas-shadow-blur - The canvas shadow blur CSS custom property. * @cssprop {String} --designer-canvas-shadow-color - The canvas shadow color CSS custom property. * @cssprop {String} --designer-canvas-shadow-offset-x - The canvas shadow offset x CSS custom property. * @cssprop {String} --designer-canvas-shadow-offset-y - The canvas shadow offset y CSS custom property. * @cssprop {String} --designer-canvas-shadow-spread - The canvas shadow spread CSS custom property. * @cssprop {String} --designer-canvas-transition-duration - Transition duration for animated state changes * @cssprop {String} --designer-canvas-transition-mode - Transition timing function * @cssprop {String} --designer-canvas-transition-property - Transition properties to animate * @cssprop {String} --designer-canvas-translate - The canvas translate CSS custom property. * * @fires zoomChanged {DesignerZoomChangedEvent} - Fired when the zoom level changes * * @example * Pannable and zoomable canvas with a centered artboard: * ```html * * * * ``` * * @example * Canvas with custom zoom bounds: * ```html * * * * ``` * * @public */ export declare class DesignerCanvasElement extends DesignerCanvasElement_base implements IDesignerCanvasElementProps { private readonly _panController; private readonly _pinchController; private readonly _keyboardController; private readonly _zoomChanged; private readonly _zoomFactor; private readonly _panFactor; private _zoom; private _minZoom; private _maxZoom; private _panX; private _panY; private _panStartX; private _panStartY; private _isPanning; private _interactionMode; /** * Constructs a new instance of the {@link DesignerCanvasElement} class. * * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `zoom` property. * The current zoom level (1 = 100%). * * @public * @attr */ get zoom(): number; set zoom(value: number); /** * Gets or sets the `minZoom` property. * * @public * @attr */ get minZoom(): number; set minZoom(value: number); /** * Gets or sets the `maxZoom` property. * * @public * @attr */ get maxZoom(): number; set maxZoom(value: number); /** * Returns the current pan X offset. * * @public * @readonly */ get panX(): number; /** * Returns the current pan Y offset. * * @public * @readonly */ get panY(): number; /** * Returns the current zoom level as percentage string. * * @public * @readonly */ get zoomLevel(): string; /** * Returns whether the canvas is currently being panned. * * @public * @readonly */ get isPanning(): boolean; /** * Gets or sets the `interactionMode` property. * Controls whether drag-to-pan is enabled and which cursor is shown. * * - `pointer`: default cursor, no drag-to-pan. * - `pan`: grab cursor, drag-to-pan enabled. * * @public * @attr */ get interactionMode(): DesignerCanvasInteractionMode; set interactionMode(value: DesignerCanvasInteractionMode); /** * Called when the zoom level changes. * * @public * @readonly * @eventProperty */ get zoomChanged(): IEventEmitter; /** * Zooms in by the zoom factor. * * @public */ zoomIn(): void; /** * Zooms out by the zoom factor. * * @public */ zoomOut(): void; /** * Sets a specific zoom level. * * @public */ setZoom(level: number): void; /** * Resets zoom and pan to defaults. * * @public */ resetZoom(): void; /** * Fits the frame within the visible canvas area. * * @public */ fitToFrame(): void; /** * Pans the canvas by a given delta. * * @public */ panBy(deltaX: number, deltaY: number): void; /** * @protected */ protected onPanStart(): void; /** * @protected */ protected onPanMove(event: CustomEvent<{ clientX: number; clientY: number; deltaX: number; deltaY: number; }>): void; /** * @protected */ protected onPanEnd(): void; /** * @protected */ protected onPinchMove(event: CustomEvent<{ distance: number; scale: number; }>): void; /** * Handles wheel events for Ctrl+scroll zoom. * * @protected */ protected onWheel(event: WheelEvent): void; } /** * @public */ export declare namespace DesignerCanvasElement { type Props = IDesignerCanvasElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-designer-canvas': DesignerCanvasElement; } } export {}; //# sourceMappingURL=DesignerCanvasElement.d.ts.map