/** @packageDocumentation * @module MarkupApp */ import { Point3d, XAndY } from "@itwin/core-geometry"; import { ScreenViewport } from "@itwin/core-frontend"; import { G, Marker, Element as MarkupElement, Matrix, Svg } from "@svgdotjs/svg.js"; import { MarkupSelected } from "./SelectTool"; import { UndoManager } from "./Undo"; /** The width and height of a Markup image, in pixels. * @public */ export interface WidthAndHeight { width: number; height: number; } /** The size and SVG string for a Markup * @public */ export interface MarkupSvgData { /** The size of the image, in pixels. This also indicates the aspect ratio of the SVG data. */ rect: WidthAndHeight; /** a string holding the svg data for the markup. Will be undefined if [[MarkupApp.stop]] is called without an active Markup */ svg?: string; } /** Markup data returned by [[MarkupApp.stop]] * @public */ export interface MarkupData extends MarkupSvgData { /** a base64 encoded string with the image of the view that was marked up. See [[MarkupApp.props.result]] for options. */ image?: string; } /** * The main object for the Markup package. It is a singleton that stores the state of the Markup application. * It has only static members and methods. Applications may customize and control the behavior of the Markup by * setting members of [[MarkupApp.props]]. When [[MarkupApp.start]] is first called, it registers a set of "Markup.xxx" * tools that may be invoked from UI controls. * @public */ export declare class MarkupApp { /** the current Markup being created */ static markup?: Markup; /** The namespace for the Markup tools */ static namespace?: string; /** By setting members of this object, applications can control the appearance and behavior of various parts of MarkupApp. */ static props: { /** the UI controls displayed on Elements by the Select Tool to allow users to modify them. */ handles: { /** The diameter of the circles for the handles. */ size: number; /** The attributes of the stretch handles */ stretch: { "fill-opacity": number; stroke: string; fill: string; }; /** The attributes of the line that connects the top-center stretch handle to the rotate handle. */ rotateLine: { stroke: string; "fill-opacity": number; }; /** The attributes of the rotate handle. */ rotate: { cursor: string; "fill-opacity": number; stroke: string; fill: string; }; /** The attributes of box around the element. */ moveOutline: { cursor: string; "stroke-dasharray": string; fill: string; "stroke-opacity": number; stroke: string; }; /** The attributes of box that provides the move cursor. */ move: { cursor: string; opacity: number; "stroke-width": number; stroke: string; }; /** The attributes of handles on the vertices of lines. */ vertex: { cursor: string; "fill-opacity": number; stroke: string; fill: string; }; }; /** properties for providing feedback about selected elements. */ hilite: { /** the color of selected elements */ color: string; /** the color of an element as the cursor passes over it */ flash: string; }; /** optionally, show a drop-shadow behind all markup elements. */ dropShadow: { /** if false, no drop shadow */ enable: boolean; /** the attributes of the drop shadow. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDropShadow */ attr: { stdDeviation: number; dx: number; dy: number; "flood-color": string; }; }; /** The "active placement" parameters. New elements are created with these parameters, so UI controls should set them. */ active: { /** the CSS style properties of new text elements. */ text: { "font-family": string; "font-size": string; stroke: string; fill: string; }; /** the CSS style properties of new elements. */ element: { stroke: string; "stroke-opacity": number; "stroke-width": number; "stroke-dasharray": number; "stroke-linecap": string; "stroke-linejoin": string; fill: string; "fill-opacity": number; }; arrow: { length: number; width: number; }; cloud: { path: string; }; }; /** Values for placing and editing Text. */ text: { /** A default string for the Markup.Text.Place command. Applications can turn this off, or supply the user's initials, for example. */ startValue: string; /** Parameters for the size and appearance of the text editor */ edit: { background: string; /** Starting size, will be updated if user stretches the box */ size: { width: string; height: string; }; /** font size of the text editor */ fontSize: string; /** A background box drawn around text so user can tell what's being selected */ textBox: { fill: string; "fill-opacity": number; "stroke-opacity": number; stroke: string; }; }; }; /** Used to draw the border outline around the view while it is being marked up so the user can tell Markup is active */ borderOutline: { stroke: string; "stroke-width": number; "stroke-opacity": number; fill: string; }; /** Used to draw the border corner symbols for the view while it is being marked up so the user can tell Markup is active */ borderCorners: { stroke: string; "stroke-width": number; "stroke-opacity": number; fill: string; "fill-opacity": number; }; /** Determines what is returned by MarkupApp.stop */ result: { /** The format for the image data. */ imageFormat: string; /** If true, the markup graphics will be imprinted in the returned image. */ imprintSvgOnImage: boolean; /** the maximum width for the returned image. If the source view width is larger than this, it will be scaled down to this size. */ maxWidth: number; }; }; private static _saveDefaultToolId; /** @internal */ static screenToVbMtx(): Matrix; /** @internal */ static getVpToScreenMtx(): Matrix; /** @internal */ static getVpToVbMtx(): Matrix; /** @internal */ static convertVpToVb(pt: XAndY): Point3d; /** determine whether there's a markup session currently active */ static get isActive(): boolean; static markupSelectToolId: string; protected static createMarkup(view: ScreenViewport, markupData?: MarkupSvgData): Markup; protected static lockViewportSize(view: ScreenViewport, markupData?: MarkupSvgData): void; /** @internal */ static getActionName(action: string): string; /** Start a markup session */ static start(view: ScreenViewport, markupData?: MarkupSvgData): Promise; /** Read the result of a Markup session, then stop the session. * @note see [MarkupApp.props.result] for options. */ static stop(): Promise; /** Call this method to initialize the Markup system. * It asynchronously loads the MarkupTools namespace for the prompts and tool names for the Markup system, and * also registers all of the Markup tools. * @return a Promise that may be awaited to ensure that the MarkupTools namespace had been loaded. * @note This method is automatically called every time you call [[start]]. Since the Markup tools cannot * start unless there is a Markup active, there's really no need to call this method directly. * The only virtue in doing so is to pre-load the Markup namespace if you have an opportunity to do so earlier in your * startup code. * @note This method may be called multiple times, but only the first time initiates the loading/registering. Subsequent * calls return the same Promise. */ static initialize(): Promise; /** convert the current markup SVG into a string, but don't include decorations or dynamics * @internal */ protected static readMarkupSvg(): string | undefined; /** convert the current markup SVG into a string (after calling readMarkupSvg) making sure width and height are specified. * @internal */ protected static readMarkupSvgForDrawImage(): string | undefined; /** @internal */ protected static readMarkup(): Promise; /** @internal */ static markupPrefix: string; /** @internal */ static get dropShadowId(): string; /** @internal */ static get cornerId(): string; /** @internal */ static get containerClass(): string; /** @internal */ static get dynamicsClass(): string; /** @internal */ static get decorationsClass(): string; /** @internal */ static get markupSvgClass(): string; /** @internal */ static get boxedTextClass(): string; /** @internal */ static get textClass(): string; /** @internal */ static get stretchHandleClass(): string; /** @internal */ static get rotateLineClass(): string; /** @internal */ static get rotateHandleClass(): string; /** @internal */ static get vertexHandleClass(): string; /** @internal */ static get moveHandleClass(): string; /** @internal */ static get textOutlineClass(): string; /** @internal */ static get textEditorClass(): string; } /** * The current markup being created/edited. Holds the SVG elements, plus the active [[MarkupTool]]. * When starting a Markup, a new Div is added as a child of the ScreenViewport's vpDiv. * @public */ export declare class Markup { vp: ScreenViewport; /** @internal */ readonly markupDiv: HTMLDivElement; /** Support undo/redo of markup operations */ readonly undo: UndoManager; /** The set of currently selected markup elements */ readonly selected: MarkupSelected; /** @internal */ readonly svgContainer?: Svg; /** @internal */ readonly svgMarkup?: G; /** @internal */ readonly svgDynamics?: G; /** @internal */ readonly svgDecorations?: G; /** create the drop-shadow filter in the Defs section of the supplied svg element */ private createDropShadow; private addNested; private addBorder; /** Create a new Markup for the supplied ScreenViewport. Adds a new "overlay-markup" div into the "vpDiv" * of the viewport. * @note you must call destroy on this object at end of markup to remove the markup div. */ constructor(vp: ScreenViewport, markupData?: MarkupSvgData); /** Called when the Markup is destroyed */ destroy(): void; /** Turn on picking the markup elements in the markup view */ enablePick(): void; /** Turn off picking the markup elements in the markup view */ disablePick(): void; /** Change the default cursor for the markup view */ setCursor(cursor: string): void; /** Delete all the entries in the selection set, then empty it. */ deleteSelected(): void; /** Bring all the entries in the selection set to the front. */ bringToFront(): void; /** Send all the entries in the selection set to the back. */ sendToBack(): void; /** Group all the entries in the selection set, then select the group. */ groupSelected(): void; /** Ungroup all the group entries in the selection set. */ ungroupSelected(): void; /** Check if the supplied MarkupElement is a group of MarkupText and the MarkupText's outline Rect. * @param el the markup element to check * @returns true if boxed text */ isBoxedText(el: MarkupElement): boolean; /** Get an existing or create a new reusable symbol representing an arrow head. * If a Marker for the supplied color and size already exists it is returned, otherwise a new Marker is created. * @param color the arrow head color * @param length the arrow head length * @param width the arrow head width * @note Flashing doesn't currently affect markers, need support for "context-stroke" and "context-fill". For now encode color in name... */ createArrowMarker(color: string, length: number, width: number): Marker; } //# sourceMappingURL=Markup.d.ts.map