export type CommonBuildOptions = { /** * If not null, the number of milliseconds to wait for a connection to iframe before throwing an exception. */ timeout?: number; /** * If true, PublisherInterface and the underlining library penpal will log debug info in the console. Useful for debugging connection issues. */ debug?: boolean; /** * Pass in an array of events that will be auto-added via `addListener()` */ events?: (string | { name: string; func?: (targetId: string) => void; })[]; }; export type AllBuildOptions = ({ /** * iframe element to the PublisherInterface will try to connect with */ targetIframe: HTMLIFrameElement; /** * The url that will be set on the iframe - this needs to be a valid URL with a valid API key */ editorURL?: string; parentElement?: undefined; } | { targetIframe?: undefined; /** * The url that will be set on the iframe - this needs to be a valid URL with a valid API key */ editorURL: string; /** * The element that a new iframe will be created with URL from `edtiorURL` */ parentElement: HTMLElement; }) & CommonBuildOptions; export type CustomFunctionsInterface = { /** * Register a custom function on the iframe window side. The function takes a parameter: publisher. This function has access to the window. You can access other custom functions registered using window.registeredFunctions, which is a Map. * * @param name - The name of the function to register. * @param body - The body of the function. */ register: (name: string, body: string) => Promise; /** * Register a custom function on the iframe window side that runs when an event is called. The function takes two parameters: publisher and targetID. This function has access to the window. You can access other custom functions registered using window.registeredFunctions, which is a Map. * * @param eventName - The name of the event to trigger the function. * @param body - The body of the function. */ registerOnEvent: (eventName: string, body: string) => Promise; /** * Executes a function that was registered originally by registerFunction on the iframe window side and allows you to pass any number of args. It will return the result of the called function. * * @param name - The name of the function to run. * @param args - Arguments that will be passed to the function */ execute: (name: string, ...args: any) => Promise; }; export class PublisherInterface { #private; customFunction: CustomFunctionsInterface; /** * The IFrame element this PublisherInterface is connected with once successifully connected. Returns undefined if not connected. */ iframe: HTMLIFrameElement | undefined; private constructor(); static buildWithIframe(targetIframe: HTMLIFrameElement, options: CommonBuildOptions): Promise; static buildOnElement(parentElement: HTMLElement, editorURL: string, options: CommonBuildOptions): Promise; /** * The build method will wait for a connection to the other side of iframe. Must be called before iframe `onload` event is fired. * * @param iframe * @param options * @returns {PublisherInterface} */ static build(options: AllBuildOptions): Promise; /** * Returns an alias for editorObject with similarly named functions. This is to help with backwards compatibility, but these functions still return a Promise. */ get editorObject(): EditorObjectAlias; /** * Displays a modal box within the editor UI containing a title with a message. * * @param message - The message to be displayed. * @param title - The title/header of the modal. */ alert(message: string, title: string): Promise; /** * Returns value of document.isDirty which signifies if the document has been changed since previous save. * * @returns Returns boolean to signify if the document has been changed since previous save. */ getDirtyState(): Promise; /** * Selects the next page in the document.pages list. * If the current selected page has the beginning index 0 then nothing happens. */ nextPage(): Promise; /** * Selects the previous page in the document.pages list. * If the current selected page has the last index then nothing happens. */ previousPage(): Promise; /** * Selects page by common language page number causing the editor to visually jump to that page. * * @param page - Common language page number (page index + 1) to select. */ setSelectedPage(page: number): Promise; /** * Returns the common language page number, which is page index + 1. * So if you have page with index 0 selected, this would return 1. * * @returns Page index + 1 of the selected page. */ getSelectedPage(): Promise; /** * Returns the name of the selected page. * * @returns Name of the page. */ getSelectedPageName(): Promise; /** * Returns the total number of pages. * * @returns The total number of pages. */ getNumPages(): Promise; /** * Removes the listener for the specified editor event. * * @param eventName - A case-sensitive string representing the editor event type to stop listening to. */ removeListener(eventName: string): Promise; /** * Adds a listener to an editor event and a user defined callback function when event is fired. * The function will receive the target id of the event and is executed when the event is triggered. * * @example * ```ts * publisherInterface.addListener("FrameMoved", (targetId)=>{console.log(targetId)})); * ``` * @param eventName - A case-sensitive string representing the editor event type to listen for. * @param callbackFunction - A function that executes when the event is triggered. If callback is null, the listener will instead call window.OnEditorEvent */ addListener(eventName: string, callbackFunction?: (target: string) => void): Promise; /** * Gets the value of the property or object found at given chiliPath. * * @param chiliPath - A case-sensitive string query path for selecting properties and objects in a CHILI document. * @returns Returns the value of the property or object found at given chiliPath. */ getObject(chiliPath: string): Promise; /** * Make getProperty an alias for getObject */ getProperty: (chiliPath: string) => Promise; /** * Sets the value of the property defined by property on the object defined by the chiliPath * * @param chiliPath - A case-sensitive string query path for selecting properties and objects in a CHILI document. * @param property - The case-sensitive string name of the property found on the object of the chiliPath. * @param value - The value to set the property. */ setProperty(chiliPath: string, property: string, value: string | number | boolean | null): Promise; /** * Executes function of functionName found as a property or method on the object defined in the chiliPath. * * @example * // Will add a new frame of type text on page of index 0 at coordinates X: 10 mm and Y: 15 mm with width: 100 mm and height: 50 mm * ```ts * publisherInterface.executeFunction('document.pages[0].frames', 'Add', 'text', '10 mm', '15 mm', '100 mm', '50 mm'); * ``` * @param chiliPath - A case-sensitive string query path for selecting properties and objects in a CHILI document. * @param functionName - A case-sensitive string of the name of the function to execute. * @param args - Parameters to be passed to function of functionName. * @returns Returns the return of executed function. */ executeFunction(chiliPath: string, functionName: string, ...args: (string | number | boolean | null | undefined)[]): Promise; /** * Returns a base64 encoded PNG snapshot image of a specific page. * * @example * ```ts * \\ This will get a 1000 by 1000 image of the first page and open it in a popup. * let base64 = publisherInterface.getPageSnapshot('0', '1000x1000', null, null, 'preview', true); * * let newImage = new Image(); * newImage.src = "data:image/png;base64," + base64; * * let popup = open("", "Popup", "width=1000,height=1000,top="+(window.screen.height/2)+",left="+(window.screen.height/2)); * popup.document.body.appendChild(newImage); * ``` * * @param pageIndex - The page index to return as an image. * @param size - The size of the returned png. This can be set as an image size in pixels by using a string width x height. For example "1000x1500". This can be set as a zoom level. For example "75" would be 75% zoom of the document. This can be set as an object of width and height. For example \{width:1000 height:1000\}. If the size is set in pixels and the ratio is different from the page ratio, the image is scaled to fit entirely in the png and placed at (0,0) top left. The extra space at the bottom or the right is filled with background color. If a zoom percentage is given, the output size is automatically calculated using the document dimensions, assuming the resolution is 72 dpi. * @param layers - An array of layers that are to be visible in the png. An array of visible layers can be provided using the layer "name" property or layer "id" property. If no list is passed, the layer visibility is the same as in the editor window. * @param frames - An array of frames that are visible in the png. An array of visible frame elements can be provided using the frame "tag" property or layer "id" property. If no list is passed, the frame visibility is the same as in the editor window. * @param viewMode - A string that is either: preview, edit, or technical. "preview" shows the page in standard preview mode in the same way as the editor does. If there is an active selection, it should not be indicated in the resulting png. Annotations should be hidden. "edit" shows the page in standard edit mode in the same way as the editor does. The view can be identical to the editor view, with active selections and frame handles. "technical" shows the page in edit mode, but without the control handles and selections. Annotations should be hidden. * @param transparentBackground - A boolean that determines if the png document background should be transparent. * @returns A base64 encoded PNG image of the document. */ getPageSnapshot(pageIndex: number, size: string | { width: number; height: number; } | number, layers: string[] | null, frames: string[] | null, viewMode: "preview" | "edit" | "technical", transparentBackground: boolean): Promise; /** * Returns a base64 encoded PNG snapshot image of a specific frame * * @param idOrTag - The id or tag of the frame to return as an image. * @param size - The size of the returned png. This can be set as an image size in pixels by using a string width x height. For example "1000x1500". This can be set as a zoom level. For example "75" would be 75% zoom of the document. This can be set as an object of width and height. For example \{width:1000 height:1000\}. If the size is set in pixels and the ratio is different from the page ratio, the image is scaled to fit entirely in the png and placed at (0,0) top left. The extra space at the bottom or the right is filled with background color. If a zoom percentage is given, the output size is automatically calculated using the document dimensions, assuming the resolution is 72 dpi. * @param transparentBackground - A boolean that determines if the png document background should be transparent. * @returns A base64 encoded PNG image of the frame. */ getFrameSnapshot(idOrTag: string, size: string | { width: number; height: number; } | number, transparentBackground: boolean): Promise; /** * Gets the frame subject area for the image fit mode Smart Fit. * * @param idOrTag - The string id or tag of the frame. * @returns - The subject area of the frame. */ getFrameSubjectArea(idOrTag: string): Promise<{ height: string; width: string; x: string; y: string; }>; /** * Sets the frame subject area for the image fit mode Smart Fit. * * @param idOrTag - The string id or tag of the frame. * @param x - A number 0 to 1 representing the x coordinate. Setting the number outside that range will clip the result to 0 or 1. * @param y - A number 0 to 1 representing the y coordinate. Setting the number outside that range will clip the result to 0 or 1. * @param width - A number 0 to 1 representing width. Setting the number outside that range will clip the result to 0 or 1. * @param height -A number 0 to 1 representing height. Setting the number outside that range will clip the result to 0 or 1. */ setFrameSubjectArea(idOrTag: string, x: number, y: number, width: number, height: number): Promise; /** * Resets the frame subject area to \{height: "0", width: "0", x: "1", y: "1"\}. * * @param idOrTag - The string id or tag of the frame to clear the subject area. */ clearFrameSubjectArea(idOrTag: string): Promise; /** * Gets the asset subject area for the target frame for image fit mode Smart Fit. * * @param frameIdOrTag - The string id or tag of the frame. * @returns The asset subject area. */ getAssetSubjectInfo(frameIdOrTag: string): Promise<{ height: string; width: string; x: string; y: string; poiX: string; poiY: string; }>; /** * Sets the asset subject area for the target frame for image fit mode Smart Fit. * * @param frameIdOrTag - The string id or tag of the frame. * @param x - A number 0 to 1 representing the x coordinate. Setting the number outside that range will clip the result to 0 or 1. * @param y - A number 0 to 1 representing the y coordinate. Setting the number outside that range will clip the result to 0 or 1. * @param width - A number 0 to 1 representing width. Setting the number outside that range will clip the result to 0 or 1. * @param height - A number 0 to 1 representing height. Setting the number outside that range will clip the result to 0 or 1. * @param poiX - A number 0 to 1 representing x coordinate of teh point of interest. Setting the number outside that range will clip the result to 0 or 1. * @param poiY - A number 0 to 1 representing y coordinate of teh point of interest. */ setAssetSubjectInfo(frameIdOrTag: string, x: number, y: number, width: number, height: number, poiX: number, poiY: number): Promise; /** * Resets the asset subject area of target to \{height: "0", width: "0", x: "1", y: "1", poiX: "0.5", poiY: "0.5"\}. * * @param frameIdOrTag - The string id or tag of the frame to clear the asset subject area. */ clearAssetSubjectInfo(frameIdOrTag: string): Promise; /** * Sets the locked (editable) state of a variable. * * @param variableName - A case-sensitive string of the variable name to target. * @param isLocked - A boolean to set the variable as locked or unlocked. */ setVariableIsLocked(variableName: string, isLocked: boolean): Promise; } /** * An alias for the editorObject */ export type EditorObjectAlias = { Alert: PublisherInterface["alert"]; GetDirtyState: PublisherInterface["getDirtyState"]; NextPage: PublisherInterface["nextPage"]; PreviousPage: PublisherInterface["previousPage"]; SetSelectedPage: PublisherInterface["setSelectedPage"]; GetSelectedPage: PublisherInterface["getSelectedPage"]; GetSelectedPageName: PublisherInterface["getSelectedPageName"]; GetNumPages: PublisherInterface["getNumPages"]; RemoveListener: PublisherInterface["removeListener"]; AddListener: PublisherInterface["addListener"]; GetObject: PublisherInterface["getObject"]; SetProperty: PublisherInterface["setProperty"]; ExecuteFunction: PublisherInterface["executeFunction"]; GetPageSnapshot: PublisherInterface["getPageSnapshot"]; GetFrameSnapshot: PublisherInterface["getFrameSnapshot"]; GetFrameSubjectArea: PublisherInterface["getFrameSubjectArea"]; SetFrameSubjectArea: PublisherInterface["setFrameSubjectArea"]; ClearFrameSubjectArea: PublisherInterface["clearFrameSubjectArea"]; GetAssetSubjectInfo: PublisherInterface["getAssetSubjectInfo"]; SetAssetSubjectInfo: PublisherInterface["setAssetSubjectInfo"]; ClearAssetSubjectInfo: PublisherInterface["clearAssetSubjectInfo"]; SetVariableIsLocked: PublisherInterface["setVariableIsLocked"]; };