From 75d10a0375eb366032ab9fb2135be001fd76f489 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 30 Jun 2023 14:17:20 +0400 Subject: [PATCH] Up TS --- dist/index.d.ts | 3689 +++++++++++++++++++----------------- src/editor/model/Editor.ts | 3 +- src/pages/index.ts | 4 +- 3 files changed, 1907 insertions(+), 1789 deletions(-) diff --git a/dist/index.d.ts b/dist/index.d.ts index 9dbf1570a..70b619251 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -171,7 +171,7 @@ declare class StyleableModel extends Model { * this.addStyle({color: 'red'}); * this.addStyle('color', 'blue'); */ - addStyle(prop: string | ObjectAny, value?: string, opts?: {}): void; + addStyle(prop: string | ObjectAny, value?: any, opts?: ObjectAny): void; /** * Remove style property * @param {string} prop @@ -320,6 +320,13 @@ export interface CanvasConfig { */ notTextable?: string[]; } +export declare class Pages extends Collection { + constructor(models: any, em: EditorModel); + onReset(m: Page, opts?: { + previousModels?: Pages; + }): void; + onRemove(removed?: Page): void; +} declare class ComponentWrapper extends Component { get defaults(): { tagName: string; @@ -334,74 +341,14 @@ declare class ComponentWrapper extends Component { __postRemove(): void; static isComponent(): boolean; } -/** - * @property {Object|String} component Wrapper component definition. You can also pass an HTML string as components of the default wrapper component. - * @property {String} [width=''] Width of the frame. By default, the canvas width will be taken. - * @property {String} [height=''] Height of the frame. By default, the canvas height will be taken. - * @property {Number} [x=0] Horizontal position of the frame in the canvas. - * @property {Number} [y=0] Vertical position of the frame in the canvas. - * - */ -export declare class Frame extends ModuleModel { - defaults(): { - x: number; - y: number; - changesCount: number; - attributes: {}; - width: null; - height: null; - head: never[]; - component: string; - styles: string; - _undo: boolean; - _undoexc: string[]; - }; - view?: FrameView; +export interface SelectableOption { /** - * @hideconstructor + * Select the page. */ - constructor(module: CanvasModule, attr: any); - get head(): { - tag: string; - attributes: any; - }[]; - onRemove(): void; - changesUp(opt?: any): void; - getComponent(): ComponentWrapper; - getStyles(): any; - disable(): void; - remove(): this; - getHead(): { - tag: string; - attributes: any; - }[]; - setHead(value: { - tag: string; - attributes: any; - }[]): this; - addHeadItem(item: { - tag: string; - attributes: any; - }): void; - getHeadByAttr(attr: string, value: any, tag: string): { - tag: string; - attributes: any; - }; - removeHeadByAttr(attr: string, value: any, tag: string): void; - addLink(href: string): void; - removeLink(href: string): void; - addScript(src: string): void; - removeScript(src: string): void; - getPage(): Page | undefined; - _emitUpdated(data?: {}): void; - toJSON(opts?: any): any; + select?: boolean; } -export declare class Pages extends Collection { - constructor(models: any, em: EditorModel); - onReset(m: Page, opts?: { - previousModels?: Pages; - }): void; - onRemove(removed?: Page): void; +export interface AbortOption { + abort?: boolean; } export interface PageManagerConfig extends ModuleConfig { pages?: any[]; @@ -441,8 +388,7 @@ declare class PageManager extends ItemManagerModule { * component: '
My element
', // or a JSON of components * }); */ - add(props: any, //{ id?: string; styles: string; component: string }, - opts?: any): false | Page; + add(props: PageProperties, opts?: AddOptions & SelectableOption & AbortOption): false | Page; /** * Remove page * @param {String|[Page]} page Page or page id @@ -453,7 +399,7 @@ declare class PageManager extends ItemManagerModule { * const somePage = pageManager.get('page-id'); * pageManager.remove(somePage); */ - remove(page: string | Page, opts?: any): false | Page | undefined; + remove(page: string | Page, opts?: RemoveOptions & AbortOption): false | Page | undefined; /** * Get page by id * @param {String} id Page id @@ -488,7 +434,7 @@ declare class PageManager extends ItemManagerModule { * const somePage = pageManager.get('page-id'); * pageManager.select(somePage); */ - select(page: string | Page, opts?: {}): this; + select(page: string | Page, opts?: SetOptions): this; /** * Get the selected page * @returns {[Page]} @@ -501,180 +447,591 @@ declare class PageManager extends ItemManagerModule { load(data: any): any; _createId(): string; } -export declare class Page extends Model { - defaults(): { - frames: never[]; - _undo: boolean; - }; - em: EditorModel; - constructor(props: any, opts?: { - em?: EditorModel; - config?: PageManagerConfig; - }); - onRemove(): void; - getFrames(): Frames; - /** - * Get page id - * @returns {String} - */ - getId(): string | number; - /** - * Get page name - * @returns {String} - */ - getName(): string; - /** - * Update page name - * @param {String} name New page name - * @example - * page.setName('New name'); - */ - setName(name: string): this; +/** @private */ +export interface CssRuleProperties { /** - * Get all frames - * @returns {Array} - * @example - * const arrayOfFrames = page.getAllFrames(); + * Array of selectors */ - getAllFrames(): Frame[]; + selectors: Selector[]; /** - * Get the first frame of the page (identified always as the main one) - * @returns {Frame} - * @example - * const mainFrame = page.getMainFrame(); + * Object containing style definitions + * @default {} */ - getMainFrame(): Frame; + style?: Record; /** - * Get the root component (usually is the `wrapper` component) from the main frame - * @returns {Component} - * @example - * const rootComponent = page.getMainComponent(); - * console.log(rootComponent.toHTML()); + * Additional string css selectors + * @default '' */ - getMainComponent(): ComponentWrapper; - toJSON(opts?: {}): any; -} -export declare class Frames extends ModuleCollection { - loadedItems: number; - itemsToLoad: number; - page?: Page; - constructor(module: CanvasModule, models?: Frame[] | Array>); - onReset(m: Frame, opts?: { - previousModels?: Frame[]; - }): void; - onRemove(removed?: Frame): void; - itemLoaded(): void; - listenToLoad(): void; - listenToLoadItems(on: boolean): void; -} -export declare class Canvas extends ModuleModel { - defaults(): { - frame: string; - frames: never[]; - rulers: boolean; - zoom: number; - x: number; - y: number; - scripts: never[]; - styles: never[]; - }; - constructor(module: CanvasModule); - get frames(): Frames; - init(): void; - _pageUpdated(page: Page, prev?: Page): void; - updateDevice(opts?: any): void; - onZoomChange(): void; -} -declare abstract class ModuleDomainViews extends ModuleView { - itemsView: string; - protected itemType: string; - reuseView: boolean; - viewCollection: TItemView[]; - constructor(opts?: any, autoAdd?: boolean); - /** - * Add new model to the collection - * @param {ModuleModel} model - * @private - * */ - private addTo; - private itemViewNotFound; - protected abstract renderView(model: ModuleModel, itemType: string): TItemView; - /** - * Render new model inside the view - * @param {ModuleModel} model - * @param {Object} fragment Fragment collection - * @private - * */ - private add; - render(): this; - onRender(): void; - onRemoveBefore(items: TItemView[], opts: any): void; - onRemove(items: TItemView[], opts: any): void; - remove(opts?: any): this; - clearItems(): void; -} -export type DraggerPosition = Position & { - end?: boolean; -}; -export type Guide = { - x: number; - y: number; - lock?: number; - active?: boolean; -}; -export interface DraggerOptions { + selectorsAdd?: string; /** - * Element on which the drag will be executed. By default, the document will be used + * Type of at-rule, eg. `media`, 'font-face' + * @default '' */ - container?: HTMLElement; + atRuleType?: string; /** - * Callback on drag start. - * @example - * onStart(ev, dragger) { - * console.log('pointer start', dragger.startPointer, 'position start', dragger.startPosition); - * } + * At-rule value, eg. `(max-width: 1000px)` + * @default '' */ - onStart?: (ev: Event, dragger: Dragger) => void; + mediaText?: string; /** - * Callback on drag. - * @example - * onDrag(ev, dragger) { - * console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta); - * } + * This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations. + * @default false */ - onDrag?: (ev: Event, dragger: Dragger) => void; + singleAtRule?: boolean; /** - * Callback on drag end. - * @example - * onEnd(ev, dragger) { - * console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta); - * } + * State of the rule, eg: `hover`, `focused` + * @default '' */ - onEnd?: (ev: Event, dragger: Dragger, opts: { - cancelled: boolean; - }) => void; + state?: string; /** - * Indicate a callback where to pass an object with new coordinates + * If true, sets `!important` on all properties. You can also pass an array to specify properties on which to use important. + * @default false */ - setPosition?: (position: DraggerPosition) => void; + important?: boolean | string[]; /** - * Indicate a callback where to get initial coordinates. - * @example - * getPosition: () => { - * // ... - * return { x: 10, y: 100 } - * } + * Indicates if the rule is stylable from the editor. + * @default true */ - getPosition?: () => DraggerPosition; + stylable?: boolean | string[]; /** - * Indicate a callback where to get pointer coordinates. + * Group for rules. + * @default '' */ - getPointerPosition?: (ev: Event) => DraggerPosition; + group?: string; /** - * Static guides to be snapped. + * If true, the rule won't be stored in JSON or showed in CSS export. + * @default false */ - guidesStatic?: () => Guide[]; - /** + shallow?: boolean; +} +export interface CssRuleJSON extends Omit { + selectors: (string | SelectorProps)[]; +} +/** + * @typedef CssRule + * @property {Array} selectors Array of selectors + * @property {Object} style Object containing style definitions + * @property {String} [selectorsAdd=''] Additional string css selectors + * @property {String} [atRuleType=''] Type of at-rule, eg. `media`, 'font-face' + * @property {String} [mediaText=''] At-rule value, eg. `(max-width: 1000px)` + * @property {Boolean} [singleAtRule=false] This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations + * @property {String} [state=''] State of the rule, eg: `hover`, `focused` + * @property {Boolean|Array} [important=false] If true, sets `!important` on all properties. You can also pass an array to specify properties on which use important + * @property {Boolean} [stylable=true] Indicates if the rule is stylable from the editor + * + * [Device]: device.html + * [State]: state.html + * [Component]: component.html + */ +export declare class CssRule extends StyleableModel { + config: CssRuleProperties; + em?: EditorModel; + opt: any; + defaults(): { + selectors: never[]; + selectorsAdd: string; + style: {}; + mediaText: string; + state: string; + stylable: boolean; + atRuleType: string; + singleAtRule: boolean; + important: boolean; + group: string; + shallow: boolean; + _undo: boolean; + }; + constructor(props: CssRuleProperties, opt?: any); + __onChange(m: CssRule, opts: any): void; + clone(): CssRule; + ensureSelectors(m: any, c: any, opts: any): void; + /** + * Returns the at-rule statement when exists, eg. `@media (...)`, `@keyframes` + * @returns {String} + * @example + * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, { + * atRuleType: 'media', + * atRuleParams: '(min-width: 500px)' + * }); + * cssRule.getAtRule(); // "@media (min-width: 500px)" + */ + getAtRule(): string; + /** + * Return selectors of the rule as a string + * @param {Object} [opts] Options + * @param {Boolean} [opts.skipState] Skip state from the result + * @returns {String} + * @example + * const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' }); + * cssRule.selectorsToString(); // ".class1:hover" + * cssRule.selectorsToString({ skipState: true }); // ".class1" + */ + selectorsToString(opts?: ObjectAny): string; + /** + * Get declaration block (without the at-rule statement) + * @param {Object} [opts={}] Options (same as in `selectorsToString`) + * @returns {String} + * @example + * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, { + * atRuleType: 'media', + * atRuleParams: '(min-width: 500px)' + * }); + * cssRule.getDeclaration() // ".class1{color:red;}" + */ + getDeclaration(opts?: ObjectAny): string; + /** + * Get the Device the rule is related to. + * @returns {[Device]|null} + * @example + * const device = rule.getDevice(); + * console.log(device?.getName()); + */ + getDevice(): any; + /** + * Get the State the rule is related to. + * @returns {[State]|null} + * @example + * const state = rule.getState(); + * console.log(state?.getLabel()); + */ + getState(): any; + /** + * Returns the related Component (valid only for component-specific rules). + * @returns {[Component]|null} + * @example + * const cmp = rule.getComponent(); + * console.log(cmp?.toHTML()); + */ + getComponent(): any; + /** + * Return the CSS string of the rule + * @param {Object} [opts={}] Options (same as in `getDeclaration`) + * @return {String} CSS string + * @example + * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, { + * atRuleType: 'media', + * atRuleParams: '(min-width: 500px)' + * }); + * cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}" + */ + toCSS(opts?: ObjectAny): string; + toJSON(...args: any): any; + /** + * Compare the actual model with parameters + * @param {Object} selectors Collection of selectors + * @param {String} state Css rule state + * @param {String} width For which device this style is oriented + * @param {Object} ruleProps Other rule props + * @returns {Boolean} + * @private + */ + compare(selectors: any, state?: string, width?: string, ruleProps?: Partial): boolean; +} +/** + * @property {Object|String} component Wrapper component definition. You can also pass an HTML string as components of the default wrapper component. + * @property {String} [width=''] Width of the frame. By default, the canvas width will be taken. + * @property {String} [height=''] Height of the frame. By default, the canvas height will be taken. + * @property {Number} [x=0] Horizontal position of the frame in the canvas. + * @property {Number} [y=0] Vertical position of the frame in the canvas. + * + */ +export declare class Frame extends ModuleModel { + defaults(): { + x: number; + y: number; + changesCount: number; + attributes: {}; + width: null; + height: null; + head: never[]; + component: string; + styles: string; + _undo: boolean; + _undoexc: string[]; + }; + view?: FrameView; + /** + * @hideconstructor + */ + constructor(module: CanvasModule, attr: any); + get head(): { + tag: string; + attributes: any; + }[]; + onRemove(): void; + changesUp(opt?: any): void; + getComponent(): ComponentWrapper; + getStyles(): any; + disable(): void; + remove(): this; + getHead(): { + tag: string; + attributes: any; + }[]; + setHead(value: { + tag: string; + attributes: any; + }[]): this; + addHeadItem(item: { + tag: string; + attributes: any; + }): void; + getHeadByAttr(attr: string, value: any, tag: string): { + tag: string; + attributes: any; + }; + removeHeadByAttr(attr: string, value: any, tag: string): void; + addLink(href: string): void; + removeLink(href: string): void; + addScript(src: string): void; + removeScript(src: string): void; + getPage(): Page | undefined; + _emitUpdated(data?: {}): void; + toJSON(opts?: any): any; +} +declare class TraitView extends View { + pfx: string; + ppfx: string; + config: any; + clsField: string; + elInput: HTMLInputElement; + input?: HTMLInputElement; + $input?: JQuery; + eventCapture: string[]; + noLabel?: boolean; + em: EditorModel; + target: Component; + createLabel?: (data: { + label: string; + component: Component; + trait: TraitView; + }) => string | HTMLElement; + createInput?: (data: ReturnType) => string | HTMLElement; + events: any; + appendInput: boolean; + /** @ts-ignore */ + attributes(): Record; + templateLabel(cmp?: Component): string; + templateInput(data: ReturnType): string; + constructor(o?: any); + getClbOpts(): { + component: Component; + trait: Trait; + elInput: HTMLInputElement; + }; + removeView(): void; + init(): void; + removed(): void; + onRender(props: ReturnType): void; + onUpdate(props: ReturnType): void; + onEvent(props: ReturnType & { + event: Event; + }): void; + /** + * Fires when the input is changed + * @private + */ + onChange(event: Event): void; + getValueForTarget(): any; + setInputValue(value: string): void; + /** + * On change callback + * @private + */ + onValueChange(model: Trait, value: string, opts?: SetOptions & { + fromTarget?: boolean; + }): void; + /** + * Render label + * @private + */ + renderLabel(): void; + /** + * Returns label for the input + * @return {string} + * @private + */ + getLabel(): any; + /** + * Returns current target component + */ + getComponent(): Component; + /** + * Returns input element + * @return {HTMLElement} + * @private + */ + getInputEl(): HTMLInputElement | undefined; + getInputElem(): HTMLInputElement; + getModelValue(): any; + getElInput(): HTMLInputElement; + /** + * Renders input + * @private + * */ + renderField(): void; + hasLabel(): boolean; + rerender(): void; + postUpdate(): void; + render(): this; +} +/** @private */ +export interface TraitProperties { + /** + * Trait type, defines how the trait should rendered. + * Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button` + */ + type?: string; + /** + * The name of the trait used as a key for the attribute/property. + * By default, the name is used as attribute name or property in case `changeProp` in enabled. + */ + name: string; + /** + * Trait id, eg. `my-trait-id`. + * If not specified, the `name` will be used as id. + */ + id?: string; + /** + * The trait label to show for the rendered trait. + */ + label?: string | false; + /** + * If `true` the trait value is applied on component + */ + changeProp?: boolean; + attributes?: Record; + valueTrue?: string; + valueFalse?: string; + min?: number; + max?: number; + unit?: string; + step?: number; + value?: any; + target?: Component; + default?: any; + placeholder?: string; + command?: string | ((editor: Editor, trait: Trait) => any); + options?: Record[]; + labelButton?: string; + text?: string; + full?: boolean; + getValue?: (props: { + editor: Editor; + trait: Trait; + component: Component; + }) => any; + setValue?: (props: { + value: any; + editor: Editor; + trait: Trait; + component: Component; + partial: boolean; + }) => void; +} +/** + * @typedef Trait + * @property {String} id Trait id, eg. `my-trait-id`. + * @property {String} type Trait type, defines how the trait should rendered. Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button` + * @property {String} label The trait label to show for the rendered trait. + * @property {String} name The name of the trait used as a key for the attribute/property. By default, the name is used as attribute name or property in case `changeProp` in enabled. + * @property {Boolean} changeProp If `true` the trait value is applied on component + * + */ +export declare class Trait extends Model { + target: Component; + em: EditorModel; + view?: TraitView; + el?: HTMLElement; + defaults(): { + type: string; + label: string; + name: string; + unit: string; + step: number; + value: string; + default: string; + placeholder: string; + changeProp: boolean; + options: never[]; + }; + constructor(prop: TraitProperties, em: EditorModel); + setTarget(target: Component): void; + /** + * Get the trait id. + * @returns {String} + */ + getId(): string; + /** + * Get the trait type. + * @returns {String} + */ + getType(): string; + /** + * Get the trait name. + * @returns {String} + */ + getName(): string; + /** + * Get the trait label. + * @param {Object} [opts={}] Options. + * @param {Boolean} [opts.locale=true] Use the locale string from i18n module. + * @returns {String} + */ + getLabel(opts?: { + locale?: boolean; + }): any; + /** + * Get the trait value. + * The value is taken from component attributes by default or from properties if the trait has the `changeProp` enabled. + * @returns {any} + */ + getValue(): any; + /** + * Update the trait value. + * The value is applied on component attributes by default or on properties if the trait has the `changeProp` enabled. + * @param {any} value Value of the trait. + * @param {Object} [opts={}] Options. + * @param {Boolean} [opts.partial] If `true` the update won't be considered complete (not stored in UndoManager). + */ + setValue(value: any, opts?: { + partial?: boolean; + }): void; + props(): Partial; + targetUpdated(): void; + getTargetValue(): any; + setTargetValue(value: any, opts?: SetOptions): void; + setValueFromInput(value: any, final?: boolean, opts?: SetOptions): void; + getInitValue(): any; +} +export interface TraitManagerConfig { + /** + * Style prefix. + * @default 'trt-' + */ + stylePrefix?: string; + /** + * Specify the element to use as a container, string (query) or HTMLElement. + * With the empty value, nothing will be rendered. + * @default '' + */ + appendTo?: string | HTMLElement; + optionsTarget?: Record[]; +} +declare class TraitFactory { + config: Partial; + constructor(config?: Partial); + /** + * Build props object by their name + */ + build(prop: string | TraitProperties, em: EditorModel): Trait; + private buildFromString; +} +export declare class Traits extends Collection { + em: EditorModel; + target: Component; + tf: TraitFactory; + constructor(coll: TraitProperties[], options: { + em: EditorModel; + }); + handleReset(coll: TraitProperties[], { previousModels }?: { + previousModels?: Trait[]; + }): void; + handleAdd(model: Trait): void; + setTarget(target: Component): void; + add(model: string | TraitProperties | Trait, options?: AddOptions): Trait; + add(models: Array, options?: AddOptions): Trait[]; +} +declare abstract class ModuleDomainViews extends ModuleView { + itemsView: string; + protected itemType: string; + reuseView: boolean; + viewCollection: TItemView[]; + constructor(opts?: any, autoAdd?: boolean); + /** + * Add new model to the collection + * @param {ModuleModel} model + * @private + * */ + private addTo; + private itemViewNotFound; + protected abstract renderView(model: ModuleModel, itemType: string): TItemView; + /** + * Render new model inside the view + * @param {ModuleModel} model + * @param {Object} fragment Fragment collection + * @private + * */ + private add; + render(): this; + onRender(): void; + onRemoveBefore(items: TItemView[], opts: any): void; + onRemove(items: TItemView[], opts: any): void; + remove(opts?: any): this; + clearItems(): void; +} +export type DraggerPosition = Position & { + end?: boolean; +}; +export type Guide = { + x: number; + y: number; + lock?: number; + active?: boolean; +}; +export interface DraggerOptions { + /** + * Element on which the drag will be executed. By default, the document will be used + */ + container?: HTMLElement; + /** + * Callback on drag start. + * @example + * onStart(ev, dragger) { + * console.log('pointer start', dragger.startPointer, 'position start', dragger.startPosition); + * } + */ + onStart?: (ev: Event, dragger: Dragger) => void; + /** + * Callback on drag. + * @example + * onDrag(ev, dragger) { + * console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta); + * } + */ + onDrag?: (ev: Event, dragger: Dragger) => void; + /** + * Callback on drag end. + * @example + * onEnd(ev, dragger) { + * console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta); + * } + */ + onEnd?: (ev: Event, dragger: Dragger, opts: { + cancelled: boolean; + }) => void; + /** + * Indicate a callback where to pass an object with new coordinates + */ + setPosition?: (position: DraggerPosition) => void; + /** + * Indicate a callback where to get initial coordinates. + * @example + * getPosition: () => { + * // ... + * return { x: 10, y: 100 } + * } + */ + getPosition?: () => DraggerPosition; + /** + * Indicate a callback where to get pointer coordinates. + */ + getPointerPosition?: (ev: Event) => DraggerPosition; + /** + * Static guides to be snapped. + */ + guidesStatic?: () => Guide[]; + /** * Target guides that will snap to static one. */ guidesTarget?: () => Guide[]; @@ -873,7 +1230,7 @@ declare class CanvasView extends ModuleView { onKeyPress(ev: KeyboardEvent): void; onWheel(ev: KeyboardEvent): void; updateFrames(ev: Event): void; - getZoom(): any; + getZoom(): number; /** * Checks if the element is visible in the canvas's viewport * @param {HTMLElement} el @@ -930,7 +1287,7 @@ declare class CanvasView extends ModuleView { left: number; height: number; width: number; - zoom: any; + zoom: number; rect: { top: number; left: number; @@ -966,1336 +1323,1217 @@ declare class CanvasView extends ModuleView { _renderFrames(): void; render(): this; } -export type CanvasEvent = "canvas:dragenter" | "canvas:dragover" | "canvas:drop" | "canvas:dragend" | "canvas:dragdata"; -declare class CanvasModule extends Module { - /** - * Get configuration object - * @name getConfig - * @function - * @return {Object} - */ - /** - * Used inside RTE - * @private - */ - getCanvasView(): CanvasView; - canvas: Canvas; - model: Canvas; - private canvasView?; - /** - * Initialize module. Automatically called with a new instance of the editor - * @param {Object} config Configurations - * @private - */ - constructor(em: EditorModel); - onLoad(): void; - getModel(): Canvas; - /** - * Get the canvas element - * @returns {HTMLElement} - */ - getElement(): HTMLElement; - getFrame(index?: number): Frame; - /** - * Get the main frame element of the canvas - * @returns {HTMLIFrameElement} - */ - getFrameEl(): HTMLIFrameElement; - getFramesEl(): HTMLElement; - /** - * Get the main frame window instance - * @returns {Window} - */ - getWindow(): Window; - /** - * Get the main frame document element - * @returns {HTMLDocument} - */ - getDocument(): Document; - /** - * Get the main frame body element - * @return {HTMLBodyElement} - */ - getBody(): HTMLBodyElement; - _getLocalEl(globalEl: any, compView: any, method: keyof FrameView): any; - /** - * Returns element containing all global canvas tools - * @returns {HTMLElement} - * @private - */ - getGlobalToolsEl(): HTMLElement | undefined; - /** - * Returns element containing all canvas tools - * @returns {HTMLElement} - * @private - */ - getToolsEl(compView?: any): any; - /** - * Returns highlighter element - * @returns {HTMLElement} - * @private - */ - getHighlighter(compView?: any): any; - /** - * Returns badge element - * @returns {HTMLElement} - * @private - */ - getBadgeEl(compView: any): any; - /** - * Returns placer element - * @returns {HTMLElement} - * @private - */ - getPlacerEl(): HTMLElement | undefined; - /** - * Returns ghost element - * @returns {HTMLElement} - * @private - */ - getGhostEl(): HTMLElement | undefined; +export type RectDim = { + t: number; + l: number; + w: number; + h: number; +}; +export type BoundingRect = { + left: number; + top: number; + width: number; + height: number; +}; +export type CallbackOptions = { + docs: any; + config: any; + el: HTMLElement; + resizer: Resizer; +}; +export interface ResizerOptions { /** - * Returns toolbar element - * @returns {HTMLElement} - * @private + * Function which returns custom X and Y coordinates of the mouse. */ - getToolbarEl(): HTMLElement | undefined; + mousePosFetcher?: (ev: Event) => Position; /** - * Returns resizer element - * @returns {HTMLElement} - * @private + * Indicates custom target updating strategy. */ - getResizerEl(): HTMLElement | undefined; + updateTarget?: (el: HTMLElement, rect: RectDim, opts: any) => void; /** - * Returns offset viewer element - * @returns {HTMLElement} - * @private + * Function which gets HTMLElement as an arg and returns it relative position */ - getOffsetViewerEl(compView: any): any; + posFetcher?: (el: HTMLElement, opts: any) => BoundingRect; /** - * Returns fixed offset viewer element - * @returns {HTMLElement} - * @private + * Indicate if the resizer should keep the default ratio. + * @default false */ - getFixedOffsetViewerEl(): HTMLElement | undefined; - render(): HTMLElement; + ratioDefault?: boolean; /** - * Get frame position - * @returns {Object} - * @private + * On resize start callback. */ - getOffset(): { - top: number; - left: number; - }; + onStart?: (ev: Event, opts: CallbackOptions) => void; /** - * Get the offset of the passed component element - * @param {HTMLElement} el - * @returns {Object} - * @private + * On resize move callback. */ - offset(el: HTMLElement): { - top: number; - left: number; - width: number; - height: number; - }; + onMove?: (ev: Event) => void; /** - * Set custom badge naming strategy - * @param {Function} f - * @example - * canvas.setCustomBadgeLabel(function(component){ - * return component.getName(); - * }); + * On resize end callback. */ - setCustomBadgeLabel(f: Function): void; + onEnd?: (ev: Event, opts: CallbackOptions) => void; /** - * Get element position relative to the canvas - * @param {HTMLElement} el - * @returns {Object} - * @private + * On container update callback. */ - getElementPos(el: HTMLElement, opts?: any): { - top: number; - left: number; - height: number; - width: number; - zoom: any; - rect: { - top: number; - left: number; - width: number; - height: number; - }; - }; + onUpdateContainer?: (opts: any) => void; /** - * Returns element's offsets like margins and paddings - * @param {HTMLElement} el - * @returns {Object} - * @private + * Resize unit step. + * @default 1 */ - getElementOffsets(el: HTMLElement): MarginPaddingOffsets; + step?: number; /** - * Get canvas rectangular data - * @returns {Object} + * Minimum dimension. + * @default 10 */ - getRect(): { - topScroll: number; - leftScroll: number; - top: number; - left: number; - width: number; - height: number; - }; + minDim?: number; /** - * This method comes handy when you need to attach something like toolbars - * to elements inside the canvas, dealing with all relative position, - * offsets, etc. and returning as result the object with positions which are - * viewable by the user (when the canvas is scrolled the top edge of the element - * is not viewable by the user anymore so the new top edge is the one of the canvas) - * - * The target should be visible before being passed here as invisible elements - * return empty string as width - * @param {HTMLElement} target The target in this case could be the toolbar - * @param {HTMLElement} element The element on which I'd attach the toolbar - * @param {Object} options Custom options - * @param {Boolean} options.toRight Set to true if you want the toolbar attached to the right - * @return {Object} - * @private + * Maximum dimension. + * @default Infinity */ - getTargetToElementDim(target: HTMLElement, element: HTMLElement, options?: any): { - top: number; - left: any; - elementTop: any; - elementLeft: any; - elementWidth: any; - elementHeight: any; - targetWidth: number; - targetHeight: number; - canvasTop: number; - canvasLeft: number; - canvasWidth: number; - canvasHeight: number; - } | undefined; - canvasRectOffset(el: HTMLElement, pos: { - top: number; - left: number; - }, opts?: any): { - top: number; - left: number; - }; + maxDim?: number; /** - * - * @param {HTMLElement} el The component element in the canvas - * @param {HTMLElement} targetEl The target element to position (eg. toolbar) - * @param {Object} opts - * @private + * Unit used for height resizing. + * @default 'px' */ - getTargetToElementFixed(el: HTMLElement, targetEl: HTMLElement, opts?: any): { - top: number; - left: any; - canvasOffsetTop: any; - canvasOffsetLeft: any; - elRect: any; - canvasOffset: any; - canvasRect: ElementRect; - targetWidth: number; - targetHeight: number; - }; + unitHeight?: string; /** - * Instead of simply returning e.clientX and e.clientY this function - * calculates also the offset based on the canvas. This is helpful when you - * need to get X and Y position while moving between the editor area and - * canvas area, which is in the iframe - * @param {Event} e - * @return {Object} - * @private + * Unit used for width resizing. + * @default 'px' */ - getMouseRelativePos(e: any, opts?: any): { - y: number; - x: number; - }; + unitWidth?: string; /** - * X and Y mouse position relative to the canvas - * @param {Event} ev - * @return {Object} - * @private + * The key used for height resizing. + * @default 'height' */ - getMouseRelativeCanvas(ev: MouseEvent, opts: any): { - y: number; - x: number; - }; + keyHeight?: string; /** - * Check if the canvas is focused - * @returns {Boolean} + * The key used for width resizing. + * @default 'width' */ - hasFocus(): boolean; + keyWidth?: string; /** - * Detects if some input is focused (input elements, text components, etc.) - * @return {Boolean} - * @private + * If true, will override unitHeight and unitWidth, on start, with units + * from the current focused element (currently used only in SelectComponent). + * @default true */ - isInputFocused(): boolean | null; + currentUnit?: boolean; /** - * Scroll canvas to the element if it's not visible. The scrolling is - * executed via `scrollIntoView` API and options of this method are - * passed to it. For instance, you can scroll smoothly by using - * `{ behavior: 'smooth' }`. - * @param {HTMLElement|[Component]} el - * @param {Object} [opts={}] Options, same as options for `scrollIntoView` - * @param {Boolean} [opts.force=false] Force the scroll, even if the element is already visible - * @example - * const selected = editor.getSelected(); - * // Scroll smoothly (this behavior can be polyfilled) - * canvas.scrollTo(selected, { behavior: 'smooth' }); - * // Force the scroll, even if the element is alredy visible - * canvas.scrollTo(selected, { force: true }); + * With this option enabled the mousemove event won't be altered when the pointer comes over iframes. + * @default false */ - scrollTo(el: any, opts?: {}): void; + silentFrames?: boolean; /** - * Start autoscroll - * @private + * If true the container of handlers won't be updated. + * @default false */ - startAutoscroll(frame: Frame): void; + avoidContainerUpdate?: boolean; /** - * Stop autoscroll - * @private + * If height is 'auto', this setting will preserve it and only update the width. + * @default false */ - stopAutoscroll(frame: Frame): void; + keepAutoHeight?: boolean; /** - * Set canvas zoom value - * @param {Number} value The zoom value, from 0 to 100 - * @returns {this} - * @example - * canvas.setZoom(50); // set zoom to 50% + * If width is 'auto', this setting will preserve it and only update the height. + * @default false */ - setZoom(value: number | string): this; + keepAutoWidth?: boolean; /** - * Get canvas zoom value - * @returns {Number} - * @example - * canvas.setZoom(50); // set zoom to 50% - * const zoom = canvas.getZoom(); // 50 + * When keepAutoHeight is true and the height has the value 'auto', this is set to true and height isn't updated. + * @default false */ - getZoom(): number; + autoHeight?: boolean; /** - * Set canvas position coordinates - * @param {Number} x Horizontal position - * @param {Number} y Vertical position - * @returns {this} - * @example - * canvas.setCoords(100, 100); + * When keepAutoWidth is true and the width has the value 'auto', this is set to true and width isn't updated. + * @default false */ - setCoords(x: string, y: string): this; + autoWidth?: boolean; /** - * Get canvas position coordinates - * @returns {Object} Object containing coordinates - * @example - * canvas.setCoords(100, 100); - * const coords = canvas.getCoords(); - * // { x: 100, y: 100 } + * Enable top left handler. + * @default true */ - getCoords(): { - x: number; - y: number; - }; - getZoomDecimal(): number; - getZoomMultiplier(): number; - toggleFramesEvents(on: boolean): void; - getFrames(): Frame[]; + tl?: boolean; /** - * Add new frame to the canvas - * @param {Object} props Frame properties - * @returns {[Frame]} - * @example - * canvas.addFrame({ - * name: 'Mobile home page', - * x: 100, // Position in canvas - * y: 100, - * width: 500, // Frame dimensions - * height: 600, - * // device: 'DEVICE-ID', - * components: [ - * '

Title frame

', - * '

Paragraph frame

', - * ], - * styles: ` - * .testh { color: red; } - * .testp { color: blue; } - * `, - * }); + * Enable top center handler. + * @default true + */ + tc?: boolean; + /** + * Enable top right handler. + * @default true */ - addFrame(props?: {}, opts?: {}): Frame; - destroy(): void; -} -export type DragStop = (cancel?: boolean) => void; -export type DragContent = (content: any) => void; -declare class Droppable { - em: EditorModel; - canvas: CanvasModule; - el: HTMLElement; - counter: number; - sortOpts?: Record | null; - over?: boolean; - dragStop?: DragStop; - dragContent?: DragContent; - sorter?: any; - constructor(em: EditorModel, rootEl?: HTMLElement); - toggleEffects(el: HTMLElement, enable: boolean): void; - __customTglEff(enable: boolean): void; - startCustom(): void; - endCustom(cancel?: boolean): void; - endDrop(cancel?: boolean, ev?: Event): void; - handleDragLeave(ev: Event): void; - updateCounter(value: number, ev: Event): void; - handleDragEnter(ev: DragEvent | Event): void; - handleDragEnd(model: any, dt: any): void; + tr?: boolean; /** - * Always need to have this handler active for enabling the drop - * @param {Event} ev + * Enable center left handler. + * @default true */ - handleDragOver(ev: Event): void; + cl?: boolean; /** - * WARNING: This function might fail to run on drop, for example, when the - * drop, accidentally, happens on some external element (DOM not inside the iframe) + * Enable center right handler. + * @default true */ - handleDrop(ev: Event | DragEvent): void; - getContentByData(dt: any): { - content: any; - }; -} -declare class FrameView extends ModuleView { - /** @ts-ignore */ - get tagName(): string; - /** @ts-ignore */ - get attributes(): { - allowfullscreen: string; - }; - dragging: boolean; - droppable?: Droppable; - rect?: DOMRect; - lastClientY?: number; - lastMaxHeight: number; - private jsContainer?; - private tools; - private wrapper?; - private frameWrapView?; - constructor(model: Frame, view?: FrameWrapView); + cr?: boolean; /** - * Update `` content of the frame + * Enable bottom left handler. + * @default true */ - updateHead(): void; - getEl(): HTMLIFrameElement; - getCanvasModel(): Canvas; - getWindow(): Window; - getDoc(): Document; - getHead(): HTMLHeadElement; - getBody(): HTMLBodyElement; - getWrapper(): HTMLElement; - getJsContainer(): HTMLElement; - getToolsEl(): HTMLElement; - getGlobalToolsEl(): HTMLElement; - getHighlighter(): HTMLElement; - getBadgeEl(): HTMLElement; - getOffsetViewerEl(): HTMLElement; - getRect(): DOMRect; + bl?: boolean; /** - * Get rect data, not affected by the canvas zoom + * Enable bottom center handler. + * @default true */ - getOffsetRect(): { - top: number; - left: number; - height: number; - width: number; - scrollTop: number; - scrollLeft: number; - scrollBottom: number; - scrollRight: number; - }; - _getTool(name: string): HTMLElement; - remove(...args: any): this; - startAutoscroll(): void; - autoscroll(): void; - updateClientY(ev: Event): void; - showGlobalTools(): void; - stopAutoscroll(): void; - _toggleAutoscrollFx(enable: boolean): void; - render(): this; - renderScripts(): void; - renderStyles(opts?: any): void; - renderBody(): void; - _toggleEffects(enable: boolean): void; - _emitUpdate(): void; -} -declare class ComponentsView extends View { - opts: any; - config: DomComponentsConfig & { - frameView?: FrameView; - }; - em: EditorModel; - parentEl?: HTMLElement; - compView: typeof ComponentView; - initialize(o: any): void; - removeChildren(removed: Component, coll: any, opts?: {}): void; + bc?: boolean; /** - * Add to collection - * @param {Model} model - * @param {Collection} coll - * @param {Object} opts - * @private - * */ - addTo(model: Component, coll?: any, opts?: { - temporary?: boolean; - }): void; + * Enable bottom right handler. + * @default true + */ + br?: boolean; /** - * Add new object to collection - * @param {Object} Model - * @param {Object} Fragment collection - * @param {Integer} Index of append - * - * @return {Object} Object rendered - * @private - * */ - addToCollection(model: Component, fragmentEl?: DocumentFragment | null, index?: number): HTMLElement | Text; - resetChildren(models: Components, { previousModels }?: { - previousModels?: never[] | undefined; - }): void; - render(parent?: HTMLElement): this; + * Class prefix. + */ + prefix?: string; + /** + * Where to append resize container (default body element). + */ + appendTo?: HTMLElement; } -declare class TraitView extends View { - pfx: string; - ppfx: string; - config: any; - clsField: string; - elInput: HTMLInputElement; - input?: HTMLInputElement; - $input?: JQuery; - eventCapture: string[]; - noLabel?: boolean; - em: EditorModel; - target: Component; - createLabel?: (data: { - label: string; - component: Component; - trait: TraitView; - }) => string | HTMLElement; - createInput?: (data: ReturnType) => string | HTMLElement; - events: any; - appendInput: boolean; - /** @ts-ignore */ - attributes(): Record; - templateLabel(cmp?: Component): string; - templateInput(data: ReturnType): string; - constructor(o?: any); - getClbOpts(): { - component: Component; - trait: Trait; - elInput: HTMLInputElement; +export type Handlers = Record; +declare class Resizer { + defOpts: ResizerOptions; + opts: ResizerOptions; + container?: HTMLElement; + handlers?: Handlers; + el?: HTMLElement; + clickedHandler?: HTMLElement; + selectedHandler?: HTMLElement; + handlerAttr?: string; + startDim?: RectDim; + rectDim?: RectDim; + parentDim?: RectDim; + startPos?: Position; + delta?: Position; + currentPos?: Position; + docs?: Document[]; + keys?: { + shift: boolean; + ctrl: boolean; + alt: boolean; }; - removeView(): void; - init(): void; - removed(): void; - onRender(props: ReturnType): void; - onUpdate(props: ReturnType): void; - onEvent(props: ReturnType & { - event: Event; - }): void; + mousePosFetcher?: ResizerOptions["mousePosFetcher"]; + updateTarget?: ResizerOptions["updateTarget"]; + posFetcher?: ResizerOptions["posFetcher"]; + onStart?: ResizerOptions["onStart"]; + onMove?: ResizerOptions["onMove"]; + onEnd?: ResizerOptions["onEnd"]; + onUpdateContainer?: ResizerOptions["onUpdateContainer"]; /** - * Fires when the input is changed - * @private + * Init the Resizer with options + * @param {Object} options */ - onChange(event: Event): void; - getValueForTarget(): any; - setInputValue(value: string): void; + constructor(opts?: ResizerOptions); /** - * On change callback - * @private + * Get current connfiguration options + * @return {Object} */ - onValueChange(model: Trait, value: string, opts?: SetOptions & { - fromTarget?: boolean; - }): void; + getConfig(): ResizerOptions; /** - * Render label - * @private + * Setup options + * @param {Object} options */ - renderLabel(): void; + setOptions(options?: Partial, reset?: boolean): void; /** - * Returns label for the input - * @return {string} - * @private + * Setup resizer */ - getLabel(): any; + setup(): void; /** - * Returns current target component + * Toggle iframes pointer event + * @param {Boolean} silent If true, iframes will be silented + */ + toggleFrames(silent?: boolean): void; + /** + * Detects if the passed element is a resize handler + * @param {HTMLElement} el + * @return {Boolean} + */ + isHandler(el: HTMLElement): boolean; + /** + * Returns the focused element + * @return {HTMLElement} */ - getComponent(): Component; + getFocusedEl(): HTMLElement | undefined; /** - * Returns input element + * Returns the parent of the focused element * @return {HTMLElement} - * @private */ - getInputEl(): HTMLInputElement | undefined; - getInputElem(): HTMLInputElement; - getModelValue(): any; - getElInput(): HTMLInputElement; + getParentEl(): HTMLElement | null | undefined; /** - * Renders input - * @private - * */ - renderField(): void; - hasLabel(): boolean; - rerender(): void; - postUpdate(): void; - render(): this; -} -/** @private */ -export interface TraitProperties { + * Returns documents + */ + getDocumentEl(): Document[]; /** - * Trait type, defines how the trait should rendered. - * Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button` + * Return element position + * @param {HTMLElement} el + * @param {Object} opts Custom options + * @return {Object} */ - type?: string; + getElementPos(el: HTMLElement, opts?: ElementPosOpts): BoundingRect; /** - * The name of the trait used as a key for the attribute/property. - * By default, the name is used as attribute name or property in case `changeProp` in enabled. + * Focus resizer on the element, attaches handlers to it + * @param {HTMLElement} el */ - name: string; + focus(el: HTMLElement): void; /** - * Trait id, eg. `my-trait-id`. - * If not specified, the `name` will be used as id. + * Blur from element */ - id?: string; + blur(): void; /** - * The trait label to show for the rendered trait. + * Start resizing + * @param {Event} e */ - label?: string | false; + start(ev: Event): void; /** - * If `true` the trait value is applied on component + * While resizing + * @param {Event} e */ - changeProp?: boolean; - attributes?: Record; - valueTrue?: string; - valueFalse?: string; - min?: number; - max?: number; - unit?: string; - step?: number; - value?: any; - target?: Component; - default?: any; - placeholder?: string; - command?: string | ((editor: Editor, trait: Trait) => any); - options?: Record[]; - labelButton?: string; - text?: string; - full?: boolean; - getValue?: (props: { - editor: Editor; - trait: Trait; - component: Component; - }) => any; - setValue?: (props: { - value: any; - editor: Editor; - trait: Trait; - component: Component; - partial: boolean; - }) => void; -} -/** - * @typedef Trait - * @property {String} id Trait id, eg. `my-trait-id`. - * @property {String} type Trait type, defines how the trait should rendered. Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button` - * @property {String} label The trait label to show for the rendered trait. - * @property {String} name The name of the trait used as a key for the attribute/property. By default, the name is used as attribute name or property in case `changeProp` in enabled. - * @property {Boolean} changeProp If `true` the trait value is applied on component - * - */ -export declare class Trait extends Model { - target: Component; - em?: EditorModel; - view?: TraitView; - el?: HTMLElement; - defaults(): { - type: string; - label: string; - name: string; - unit: string; - step: number; - value: string; - default: string; - placeholder: string; - changeProp: boolean; - options: never[]; - }; - constructor(prop: TraitProperties); + move(ev: PointerEvent | Event): void; /** - * Get the trait id. - * @returns {String} + * Stop resizing + * @param {Event} e */ - getId(): string; + stop(e: Event): void; /** - * Get the trait type. - * @returns {String} + * Update rect */ - getType(): string; + updateRect(store: boolean): void; + updateContainer(opt?: { + forceShow?: boolean; + }): void; /** - * Get the trait name. - * @returns {String} + * Get selected handler name + * @return {string} */ - getName(): string; + getSelectedHandler(): string | undefined; /** - * Get the trait label. - * @param {Object} [opts={}] Options. - * @param {Boolean} [opts.locale=true] Use the locale string from i18n module. - * @returns {String} + * Handle ESC key + * @param {Event} e */ - getLabel(opts?: { - locale?: boolean; - }): any; + handleKeyDown(e: Event): void; /** - * Get the trait value. - * The value is taken from component attributes by default or from properties if the trait has the `changeProp` enabled. - * @returns {any} + * Handle mousedown to check if it's possible to start resizing + * @param {Event} e */ - getValue(): any; + handleMouseDown(e: Event): void; /** - * Update the trait value. - * The value is applied on component attributes by default or on properties if the trait has the `changeProp` enabled. - * @param {any} value Value of the trait. - * @param {Object} [opts={}] Options. - * @param {Boolean} [opts.partial] If `true` the update won't be considered complete (not stored in UndoManager). + * All positioning logic + * @return {Object} */ - setValue(value: any, opts?: { - partial?: boolean; - }): void; - props(): Partial; - targetUpdated(): void; - getTargetValue(): any; - setTargetValue(value: any, opts?: SetOptions): void; - setValueFromInput(value: any, final?: boolean, opts?: SetOptions): void; - getInitValue(): any; + calc(data: Resizer): RectDim | undefined; } -export declare class Traits extends Collection { - em: EditorModel; - target: Component; - constructor(coll: TraitProperties[], options: { - em: EditorModel; - }); - handleReset(coll: TraitProperties[], { previousModels }?: { - previousModels?: Trait[]; - }): void; - handleAdd(model: Trait): void; - setTarget(target: Component): void; - /** @ts-ignore */ - add(models: string | Trait | TraitProperties | (string | Trait | TraitProperties)[], opt?: AddOptions): any[]; +export interface ICommand { + run?: CommandAbstract["run"]; + stop?: CommandAbstract["stop"]; + id?: string; + [key: string]: unknown; } -export type RectDim = { - t: number; - l: number; - w: number; - h: number; -}; -export type BoundingRect = { - left: number; - top: number; - width: number; - height: number; -}; -export type CallbackOptions = { - docs: any; +export type CommandFunction = CommandAbstract["run"]; +export type Command = CommandObject | CommandFunction; +export type CommandOptions = Record; +export type CommandObject = ICommand & T & ThisType>; +declare class CommandAbstract extends Model { config: any; - el: HTMLElement; - resizer: Resizer; -}; -export interface ResizerOptions { + em: EditorModel; + pfx: string; + ppfx: string; + hoverClass: string; + badgeClass: string; + plhClass: string; + freezClass: string; + canvas: CanvasModule; + constructor(o: any); /** - * Function which returns custom X and Y coordinates of the mouse. + * On frame scroll callback + * @param {[type]} e [description] + * @return {[type]} [description] */ - mousePosFetcher?: (ev: Event) => Position; + onFrameScroll(e: any): void; /** - * Indicates custom target updating strategy. + * Returns canval element + * @return {HTMLElement} */ - updateTarget?: (el: HTMLElement, rect: RectDim, opts: any) => void; + getCanvas(): HTMLElement; /** - * Function which gets HTMLElement as an arg and returns it relative position + * Get canvas body element + * @return {HTMLElement} */ - posFetcher?: (el: HTMLElement, opts: any) => BoundingRect; + getCanvasBody(): HTMLBodyElement; + /** + * Get canvas wrapper element + * @return {HTMLElement} + */ + getCanvasTools(): any; + /** + * Get the offset of the element + * @param {HTMLElement} el + * @return {Object} + */ + offset(el: HTMLElement): { + top: number; + left: number; + }; + /** + * Callback triggered after initialize + * @param {Object} o Options + * @private + * */ + init(o: any): void; + /** + * Method that run command + * @param {Object} editor Editor instance + * @param {Object} [options={}] Options + * @private + * */ + callRun(editor: Editor, options?: any): void; /** - * Indicate if the resizer should keep the default ratio. - * @default false - */ - ratioDefault?: boolean; + * Method that run command + * @param {Object} editor Editor instance + * @param {Object} [options={}] Options + * @private + * */ + callStop(editor: Editor, options?: any): void; /** - * On resize start callback. + * Stop current command */ - onStart?: (ev: Event, opts: CallbackOptions) => void; + stopCommand(opts?: any): void; /** - * On resize move callback. - */ - onMove?: (ev: Event) => void; + * Method that run command + * @param {Object} em Editor model + * @param {Object} sender Button sender + * @private + * */ + run(em: Editor, sender: any, options: O): void; /** - * On resize end callback. - */ - onEnd?: (ev: Event, opts: CallbackOptions) => void; + * Method that stop command + * @param {Object} em Editor model + * @param {Object} sender Button sender + * @private + * */ + stop(em: Editor, sender: any, options: O): void; +} +export interface ToolbarButtonProps { /** - * On container update callback. + * Command name. */ - onUpdateContainer?: (opts: any) => void; + command: CommandFunction | string; /** - * Resize unit step. - * @default 1 + * Button label. */ - step?: number; + label?: string; + id?: string; + attributes?: ObjectAny; + events?: ObjectAny; +} +export type DragMode = "translate" | "absolute" | ""; +export interface ComponentProperties { /** - * Minimum dimension. - * @default 10 + * Component type, eg. `text`, `image`, `video`, etc. + * @default '' */ - minDim?: number; + type?: string; /** - * Maximum dimension. - * @default Infinity + * HTML tag of the component, eg. `span`. Default: `div` + * @default 'div' */ - maxDim?: number; + tagName?: string; /** - * Unit used for height resizing. - * @default 'px' + * Key-value object of the component's attributes, eg. `{ title: 'Hello' }` Default: `{}` + * @default {} */ - unitHeight?: string; + attributes?: Record; /** - * Unit used for width resizing. - * @default 'px' + * Name of the component. Will be used, for example, in Layers and badges + * @default '' */ - unitWidth?: string; + name?: string; /** - * The key used for height resizing. - * @default 'height' + * When `true` the component is removable from the canvas, default: `true` + * @default true */ - keyHeight?: string; + removable?: boolean; /** - * The key used for width resizing. - * @default 'width' - */ - keyWidth?: string; + * Indicates if it's possible to drag the component inside others. + You can also specify a query string to indentify elements, + eg. `'.some-class[title=Hello], [data-gjs-type=column]'` means you can drag the component only inside elements + containing `some-class` class and `Hello` title, and `column` components. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drag is possible. Default: `true` + * @default true + */ + draggable?: boolean | string | ((...params: any[]) => any); /** - * If true, will override unitHeight and unitWidth, on start, with units - * from the current focused element (currently used only in SelectComponent). - * @default true - */ - currentUnit?: boolean; + * Indicates if it's possible to drop other components inside. You can use + a query string as with `draggable`. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drop is possible. Default: `true` + * @default true + */ + droppable?: boolean | string | ((...params: any[]) => any); /** - * With this option enabled the mousemove event won't be altered when the pointer comes over iframes. - * @default false + * Set to false if you don't want to see the badge (with the name) over the component. Default: `true` + * @default true */ - silentFrames?: boolean; + badgable?: boolean; /** - * If true the container of handlers won't be updated. - * @default false - */ - avoidContainerUpdate?: boolean; + * True if it's possible to style the component. + You can also indicate an array of CSS properties which is possible to style, eg. `['color', 'width']`, all other properties + will be hidden from the style manager. Default: `true` + * @default true + */ + stylable?: boolean | String[]; /** - * If height is 'auto', this setting will preserve it and only update the width. - * @default false + * Indicate an array of style properties which should be hidden from the style manager. Default: `[]` + * @default [] */ - keepAutoHeight?: boolean; + unstylable?: String[]; /** - * If width is 'auto', this setting will preserve it and only update the height. - * @default false + * It can be highlighted with 'dotted' borders if true. Default: `true` + * @default true */ - keepAutoWidth?: boolean; + highlightable?: boolean; /** - * When keepAutoHeight is true and the height has the value 'auto', this is set to true and height isn't updated. - * @default false + * True if it's possible to clone the component. Default: `true` + * @default true */ - autoHeight?: boolean; + copyable?: boolean; /** - * When keepAutoWidth is true and the width has the value 'auto', this is set to true and width isn't updated. - * @default false + * Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer](https://github.com/GrapesJS/grapesjs/blob/master/src/utils/Resizer.js). Default: `false` */ - autoWidth?: boolean; + resizable?: boolean | ResizerOptions; /** - * Enable top left handler. - * @default true + * Allow to edit the content of the component (used on Text components). Default: `false` */ - tl?: boolean; + editable?: boolean; /** - * Enable top center handler. + * Set to `false` if you need to hide the component inside Layers. Default: `true` * @default true */ - tc?: boolean; + layerable?: boolean; /** - * Enable top right handler. + * Allow component to be selected when clicked. Default: `true` * @default true */ - tr?: boolean; + selectable?: boolean; /** - * Enable center left handler. + * Shows a highlight outline when hovering on the element if `true`. Default: `true` * @default true */ - cl?: boolean; + hoverable?: boolean; /** - * Enable center right handler. - * @default true + * Disable the selection of the component and its children in the canvas. + * @default false */ - cr?: boolean; + locked?: boolean; /** - * Enable bottom left handler. - * @default true + * This property is used by the HTML exporter as void elements don't have closing tags, eg. `
`, `
`, etc. Default: `false` */ - bl?: boolean; + void?: boolean; /** - * Enable bottom center handler. - * @default true + * Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }` + * @default {} */ - bc?: boolean; + style?: any; /** - * Enable bottom right handler. - * @default true + * Component related styles, eg. `.my-component-class { color: red }` + * @default '' */ - br?: boolean; + styles?: string; /** - * Class prefix. + * Content of the component (not escaped) which will be appended before children rendering. Default: `''` + * @default '' */ - prefix?: string; + content?: string; /** - * Where to append resize container (default body element). + * Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string ''. Default: `''` + * @default '' */ - appendTo?: HTMLElement; -} -export type Handlers = Record; -declare class Resizer { - defOpts: ResizerOptions; - opts: ResizerOptions; - container?: HTMLElement; - handlers?: Handlers; - el?: HTMLElement; - clickedHandler?: HTMLElement; - selectedHandler?: HTMLElement; - handlerAttr?: string; - startDim?: RectDim; - rectDim?: RectDim; - parentDim?: RectDim; - startPos?: Position; - delta?: Position; - currentPos?: Position; - docs?: Document[]; - keys?: { - shift: boolean; - ctrl: boolean; - alt: boolean; - }; - mousePosFetcher?: ResizerOptions["mousePosFetcher"]; - updateTarget?: ResizerOptions["updateTarget"]; - posFetcher?: ResizerOptions["posFetcher"]; - onStart?: ResizerOptions["onStart"]; - onMove?: ResizerOptions["onMove"]; - onEnd?: ResizerOptions["onEnd"]; - onUpdateContainer?: ResizerOptions["onUpdateContainer"]; + icon?: string; /** - * Init the Resizer with options - * @param {Object} options + * Component's javascript. More about it [here](/modules/Components-js.html). Default: `''` + * @default '' */ - constructor(opts?: ResizerOptions); + script?: string | ((...params: any[]) => any); /** - * Get current connfiguration options - * @return {Object} + * Component's traits. More about it [here](/modules/Traits.html). Default: `['id', 'title']` + * @default '' */ - getConfig(): ResizerOptions; + traits?: Traits; /** - * Setup options - * @param {Object} options - */ - setOptions(options?: Partial, reset?: boolean): void; + * Indicates an array of properties which will be inhereted by all NEW appended children. + For example if you create a component likes this: `{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }` + and append some new component inside, the new added component will get the exact same properties indicated in the `propagate` array (and the `propagate` property itself). Default: `[]` + * @default [] + */ + propagate?: (keyof ComponentProperties)[]; /** - * Setup resizer + * Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete). + * Eg. `toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]`. + * By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`). */ - setup(): void; + toolbar?: ToolbarButtonProps[]; + components?: Components; + classes?: Selectors; + dmode?: DragMode; + "script-props"?: string[]; + [key: string]: any; +} +export interface SymbolToUpOptions { + changed?: string; + fromInstance?: boolean; + noPropagate?: boolean; + fromUndo?: boolean; +} +export interface ComponentDefinition extends Omit { /** - * Toggle iframes pointer event - * @param {Boolean} silent If true, iframes will be silented + * Children components. */ - toggleFrames(silent?: boolean): void; + components?: string | ComponentDefinition | (string | ComponentDefinition)[]; + traits?: (Partial | string)[]; + attributes?: Record; + [key: string]: unknown; +} +export interface ComponentDefinitionDefined extends Omit { /** - * Detects if the passed element is a resize handler - * @param {HTMLElement} el - * @return {Boolean} + * Children components. */ - isHandler(el: HTMLElement): boolean; + components?: ComponentDefinitionDefined[] | ComponentDefinitionDefined; + traits?: (Partial | string)[]; + [key: string]: any; +} +export type ComponentAddType = Component | ComponentDefinition | ComponentDefinitionDefined | string; +export type ComponentAdd = ComponentAddType | ComponentAddType[]; +export type ToHTMLOptions = { /** - * Returns the focused element - * @return {HTMLElement} + * Custom tagName. */ - getFocusedEl(): HTMLElement | undefined; + tag?: string; /** - * Returns the parent of the focused element - * @return {HTMLElement} + * Include component properties as `data-gjs-*` attributes. This allows you to have re-importable HTML. */ - getParentEl(): HTMLElement | null | undefined; + withProps?: boolean; /** - * Returns documents + * In case the attribute value contains a `"` char, instead of escaping it (`attr="value ""`), the attribute will be quoted using single quotes (`attr='value "'`). */ - getDocumentEl(): Document[]; + altQuoteAttr?: boolean; /** - * Return element position - * @param {HTMLElement} el - * @param {Object} opts Custom options - * @return {Object} + * You can pass an object of custom attributes to replace with the current ones + * or you can even pass a function to generate attributes dynamically. */ - getElementPos(el: HTMLElement, opts?: ElementPosOpts): BoundingRect; + attributes?: Record | ((component: Component, attr: Record) => Record); +}; +export interface ComponentOptions { + em?: EditorModel; + config?: DomComponentsConfig; + frame?: Frame; + temporary?: boolean; + avoidChildren?: boolean; +} +/** @private */ +export interface PageProperties { /** - * Focus resizer on the element, attaches handlers to it - * @param {HTMLElement} el + * Panel id. */ - focus(el: HTMLElement): void; + id?: string; /** - * Blur from element + * Page name. */ - blur(): void; + name?: string; /** - * Start resizing - * @param {Event} e + * HTML to load as page content. */ - start(ev: Event): void; + component?: string | ComponentDefinition | ComponentDefinition[]; /** - * While resizing - * @param {Event} e + * CSS to load with the page. */ - move(ev: PointerEvent | Event): void; + styles?: string | CssRuleJSON[]; + [key: string]: unknown; +} +export interface PagePropertiesDefined extends Pick { + frames: Frames; + [key: string]: unknown; +} +export declare class Page extends Model { + defaults(): { + name: string; + frames: Frames; + _undo: boolean; + }; + em: EditorModel; + constructor(props: any, opts?: { + em?: EditorModel; + config?: PageManagerConfig; + }); + onRemove(): void; + getFrames(): Frames; /** - * Stop resizing - * @param {Event} e + * Get page id + * @returns {String} */ - stop(e: Event): void; + getId(): string; /** - * Update rect + * Get page name + * @returns {String} */ - updateRect(store: boolean): void; - updateContainer(opt?: { - forceShow?: boolean; - }): void; + getName(): string; /** - * Get selected handler name - * @return {string} + * Update page name + * @param {String} name New page name + * @example + * page.setName('New name'); */ - getSelectedHandler(): string | undefined; + setName(name: string): this; /** - * Handle ESC key - * @param {Event} e + * Get all frames + * @returns {Array} + * @example + * const arrayOfFrames = page.getAllFrames(); */ - handleKeyDown(e: Event): void; + getAllFrames(): Frame[]; /** - * Handle mousedown to check if it's possible to start resizing - * @param {Event} e + * Get the first frame of the page (identified always as the main one) + * @returns {Frame} + * @example + * const mainFrame = page.getMainFrame(); */ - handleMouseDown(e: Event): void; + getMainFrame(): Frame; /** - * All positioning logic - * @return {Object} + * Get the root component (usually is the `wrapper` component) from the main frame + * @returns {Component} + * @example + * const rootComponent = page.getMainComponent(); + * console.log(rootComponent.toHTML()); */ - calc(data: Resizer): RectDim | undefined; + getMainComponent(): ComponentWrapper; + toJSON(opts?: {}): any; } -export interface ICommand { - run?: CommandAbstract["run"]; - stop?: CommandAbstract["stop"]; - id?: string; - [key: string]: unknown; +export declare class Frames extends ModuleCollection { + loadedItems: number; + itemsToLoad: number; + page?: Page; + constructor(module: CanvasModule, models?: Frame[] | Array>); + onReset(m: Frame, opts?: { + previousModels?: Frame[]; + }): void; + onRemove(removed?: Frame): void; + itemLoaded(): void; + listenToLoad(): void; + listenToLoadItems(on: boolean): void; } -export type CommandFunction = CommandAbstract["run"]; -export type Command = CommandObject | CommandFunction; -export type CommandOptions = Record; -export type CommandObject = ICommand & T & ThisType>; -declare class CommandAbstract extends Model { - config: any; - em: EditorModel; - pfx: string; - ppfx: string; - hoverClass: string; - badgeClass: string; - plhClass: string; - freezClass: string; - canvas: CanvasModule; - constructor(o: any); +export declare class Canvas extends ModuleModel { + defaults(): { + frame: string; + frames: never[]; + rulers: boolean; + zoom: number; + x: number; + y: number; + scripts: never[]; + styles: never[]; + }; + constructor(module: CanvasModule); + get frames(): Frames; + init(): void; + _pageUpdated(page: Page, prev?: Page): void; + updateDevice(opts?: any): void; + onZoomChange(): void; +} +export type CanvasEvent = "canvas:dragenter" | "canvas:dragover" | "canvas:drop" | "canvas:dragend" | "canvas:dragdata"; +declare class CanvasModule extends Module { /** - * On frame scroll callback - * @param {[type]} e [description] - * @return {[type]} [description] + * Get configuration object + * @name getConfig + * @function + * @return {Object} */ - onFrameScroll(e: any): void; /** - * Returns canval element - * @return {HTMLElement} + * Used inside RTE + * @private */ - getCanvas(): HTMLElement; + getCanvasView(): CanvasView; + canvas: Canvas; + model: Canvas; + private canvasView?; /** - * Get canvas body element - * @return {HTMLElement} + * Initialize module. Automatically called with a new instance of the editor + * @param {Object} config Configurations + * @private */ - getCanvasBody(): HTMLBodyElement; + constructor(em: EditorModel); + onLoad(): void; + getModel(): Canvas; /** - * Get canvas wrapper element - * @return {HTMLElement} + * Get the canvas element + * @returns {HTMLElement} */ - getCanvasTools(): any; + getElement(): HTMLElement; + getFrame(index?: number): Frame; /** - * Get the offset of the element - * @param {HTMLElement} el - * @return {Object} + * Get the main frame element of the canvas + * @returns {HTMLIFrameElement} */ - offset(el: HTMLElement): { - top: number; - left: number; - }; - /** - * Callback triggered after initialize - * @param {Object} o Options - * @private - * */ - init(o: any): void; + getFrameEl(): HTMLIFrameElement; + getFramesEl(): HTMLElement; /** - * Method that run command - * @param {Object} editor Editor instance - * @param {Object} [options={}] Options - * @private - * */ - callRun(editor: Editor, options?: any): void; + * Get the main frame window instance + * @returns {Window} + */ + getWindow(): Window; /** - * Method that run command - * @param {Object} editor Editor instance - * @param {Object} [options={}] Options - * @private - * */ - callStop(editor: Editor, options?: any): void; + * Get the main frame document element + * @returns {HTMLDocument} + */ + getDocument(): Document; /** - * Stop current command + * Get the main frame body element + * @return {HTMLBodyElement} */ - stopCommand(opts?: any): void; + getBody(): HTMLBodyElement; + _getLocalEl(globalEl: any, compView: any, method: keyof FrameView): any; /** - * Method that run command - * @param {Object} em Editor model - * @param {Object} sender Button sender + * Returns element containing all global canvas tools + * @returns {HTMLElement} * @private - * */ - run(em: Editor, sender: any, options: O): void; + */ + getGlobalToolsEl(): HTMLElement | undefined; /** - * Method that stop command - * @param {Object} em Editor model - * @param {Object} sender Button sender + * Returns element containing all canvas tools + * @returns {HTMLElement} * @private - * */ - stop(em: Editor, sender: any, options: O): void; -} -export interface ToolbarButtonProps { + */ + getToolsEl(compView?: any): any; /** - * Command name. + * Returns highlighter element + * @returns {HTMLElement} + * @private */ - command: CommandFunction | string; + getHighlighter(compView?: any): any; /** - * Button label. + * Returns badge element + * @returns {HTMLElement} + * @private */ - label?: string; - id?: string; - attributes?: ObjectAny; - events?: ObjectAny; -} -export type DragMode = "translate" | "absolute" | ""; -export interface ComponentProperties { + getBadgeEl(compView: any): any; /** - * Component type, eg. `text`, `image`, `video`, etc. - * @default '' + * Returns placer element + * @returns {HTMLElement} + * @private */ - type?: string; + getPlacerEl(): HTMLElement | undefined; /** - * HTML tag of the component, eg. `span`. Default: `div` - * @default 'div' + * Returns ghost element + * @returns {HTMLElement} + * @private */ - tagName?: string; + getGhostEl(): HTMLElement | undefined; /** - * Key-value object of the component's attributes, eg. `{ title: 'Hello' }` Default: `{}` - * @default {} + * Returns toolbar element + * @returns {HTMLElement} + * @private */ - attributes?: Record; + getToolbarEl(): HTMLElement | undefined; /** - * Name of the component. Will be used, for example, in Layers and badges - * @default '' + * Returns resizer element + * @returns {HTMLElement} + * @private */ - name?: string; + getResizerEl(): HTMLElement | undefined; /** - * When `true` the component is removable from the canvas, default: `true` - * @default true + * Returns offset viewer element + * @returns {HTMLElement} + * @private */ - removable?: boolean; + getOffsetViewerEl(compView: any): any; /** - * Indicates if it's possible to drag the component inside others. - You can also specify a query string to indentify elements, - eg. `'.some-class[title=Hello], [data-gjs-type=column]'` means you can drag the component only inside elements - containing `some-class` class and `Hello` title, and `column` components. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drag is possible. Default: `true` - * @default true - */ - draggable?: boolean | string | ((...params: any[]) => any); + * Returns fixed offset viewer element + * @returns {HTMLElement} + * @private + */ + getFixedOffsetViewerEl(): HTMLElement | undefined; + render(): HTMLElement; /** - * Indicates if it's possible to drop other components inside. You can use - a query string as with `draggable`. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drop is possible. Default: `true` - * @default true - */ - droppable?: boolean | string | ((...params: any[]) => any); + * Get frame position + * @returns {Object} + * @private + */ + getOffset(): { + top: number; + left: number; + }; /** - * Set to false if you don't want to see the badge (with the name) over the component. Default: `true` - * @default true + * Get the offset of the passed component element + * @param {HTMLElement} el + * @returns {Object} + * @private */ - badgable?: boolean; + offset(el: HTMLElement): { + top: number; + left: number; + width: number; + height: number; + }; /** - * True if it's possible to style the component. - You can also indicate an array of CSS properties which is possible to style, eg. `['color', 'width']`, all other properties - will be hidden from the style manager. Default: `true` - * @default true - */ - stylable?: boolean | String[]; + * Set custom badge naming strategy + * @param {Function} f + * @example + * canvas.setCustomBadgeLabel(function(component){ + * return component.getName(); + * }); + */ + setCustomBadgeLabel(f: Function): void; /** - * Indicate an array of style properties which should be hidden from the style manager. Default: `[]` - * @default [] + * Get element position relative to the canvas + * @param {HTMLElement} el + * @returns {Object} + * @private */ - unstylable?: String[]; + getElementPos(el: HTMLElement, opts?: any): { + top: number; + left: number; + height: number; + width: number; + zoom: number; + rect: { + top: number; + left: number; + width: number; + height: number; + }; + }; /** - * It can be highlighted with 'dotted' borders if true. Default: `true` - * @default true + * Returns element's offsets like margins and paddings + * @param {HTMLElement} el + * @returns {Object} + * @private */ - highlightable?: boolean; + getElementOffsets(el: HTMLElement): MarginPaddingOffsets; /** - * True if it's possible to clone the component. Default: `true` - * @default true + * Get canvas rectangular data + * @returns {Object} */ - copyable?: boolean; + getRect(): { + topScroll: number; + leftScroll: number; + top: number; + left: number; + width: number; + height: number; + }; /** - * Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer](https://github.com/GrapesJS/grapesjs/blob/master/src/utils/Resizer.js). Default: `false` + * This method comes handy when you need to attach something like toolbars + * to elements inside the canvas, dealing with all relative position, + * offsets, etc. and returning as result the object with positions which are + * viewable by the user (when the canvas is scrolled the top edge of the element + * is not viewable by the user anymore so the new top edge is the one of the canvas) + * + * The target should be visible before being passed here as invisible elements + * return empty string as width + * @param {HTMLElement} target The target in this case could be the toolbar + * @param {HTMLElement} element The element on which I'd attach the toolbar + * @param {Object} options Custom options + * @param {Boolean} options.toRight Set to true if you want the toolbar attached to the right + * @return {Object} + * @private */ - resizable?: boolean | ResizerOptions; + getTargetToElementDim(target: HTMLElement, element: HTMLElement, options?: any): { + top: number; + left: any; + elementTop: any; + elementLeft: any; + elementWidth: any; + elementHeight: any; + targetWidth: number; + targetHeight: number; + canvasTop: number; + canvasLeft: number; + canvasWidth: number; + canvasHeight: number; + } | undefined; + canvasRectOffset(el: HTMLElement, pos: { + top: number; + left: number; + }, opts?: any): { + top: number; + left: number; + }; /** - * Allow to edit the content of the component (used on Text components). Default: `false` + * + * @param {HTMLElement} el The component element in the canvas + * @param {HTMLElement} targetEl The target element to position (eg. toolbar) + * @param {Object} opts + * @private */ - editable?: boolean; + getTargetToElementFixed(el: HTMLElement, targetEl: HTMLElement, opts?: any): { + top: number; + left: any; + canvasOffsetTop: any; + canvasOffsetLeft: any; + elRect: any; + canvasOffset: any; + canvasRect: ElementRect; + targetWidth: number; + targetHeight: number; + }; /** - * Set to `false` if you need to hide the component inside Layers. Default: `true` - * @default true + * Instead of simply returning e.clientX and e.clientY this function + * calculates also the offset based on the canvas. This is helpful when you + * need to get X and Y position while moving between the editor area and + * canvas area, which is in the iframe + * @param {Event} e + * @return {Object} + * @private */ - layerable?: boolean; + getMouseRelativePos(e: any, opts?: any): { + y: number; + x: number; + }; /** - * Allow component to be selected when clicked. Default: `true` - * @default true + * X and Y mouse position relative to the canvas + * @param {Event} ev + * @return {Object} + * @private */ - selectable?: boolean; + getMouseRelativeCanvas(ev: MouseEvent, opts: any): { + y: number; + x: number; + }; /** - * Shows a highlight outline when hovering on the element if `true`. Default: `true` - * @default true + * Check if the canvas is focused + * @returns {Boolean} */ - hoverable?: boolean; + hasFocus(): boolean; /** - * Disable the selection of the component and its children in the canvas. - * @default false + * Detects if some input is focused (input elements, text components, etc.) + * @return {Boolean} + * @private */ - locked?: boolean; + isInputFocused(): boolean | null; /** - * This property is used by the HTML exporter as void elements don't have closing tags, eg. `
`, `
`, etc. Default: `false` + * Scroll canvas to the element if it's not visible. The scrolling is + * executed via `scrollIntoView` API and options of this method are + * passed to it. For instance, you can scroll smoothly by using + * `{ behavior: 'smooth' }`. + * @param {HTMLElement|[Component]} el + * @param {Object} [opts={}] Options, same as options for `scrollIntoView` + * @param {Boolean} [opts.force=false] Force the scroll, even if the element is already visible + * @example + * const selected = editor.getSelected(); + * // Scroll smoothly (this behavior can be polyfilled) + * canvas.scrollTo(selected, { behavior: 'smooth' }); + * // Force the scroll, even if the element is alredy visible + * canvas.scrollTo(selected, { force: true }); */ - void?: boolean; + scrollTo(el: any, opts?: {}): void; /** - * Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }` - * @default {} + * Start autoscroll + * @private */ - style?: any; + startAutoscroll(frame: Frame): void; /** - * Component related styles, eg. `.my-component-class { color: red }` - * @default '' + * Stop autoscroll + * @private */ - styles?: string; + stopAutoscroll(frame: Frame): void; /** - * Content of the component (not escaped) which will be appended before children rendering. Default: `''` - * @default '' + * Set canvas zoom value + * @param {Number} value The zoom value, from 0 to 100 + * @returns {this} + * @example + * canvas.setZoom(50); // set zoom to 50% */ - content?: string; + setZoom(value: number | string): this; /** - * Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string ''. Default: `''` - * @default '' + * Get canvas zoom value + * @returns {Number} + * @example + * canvas.setZoom(50); // set zoom to 50% + * const zoom = canvas.getZoom(); // 50 */ - icon?: string; + getZoom(): number; /** - * Component's javascript. More about it [here](/modules/Components-js.html). Default: `''` - * @default '' + * Set canvas position coordinates + * @param {Number} x Horizontal position + * @param {Number} y Vertical position + * @returns {this} + * @example + * canvas.setCoords(100, 100); */ - script?: string | ((...params: any[]) => any); + setCoords(x: string, y: string): this; /** - * Component's traits. More about it [here](/modules/Traits.html). Default: `['id', 'title']` - * @default '' + * Get canvas position coordinates + * @returns {Object} Object containing coordinates + * @example + * canvas.setCoords(100, 100); + * const coords = canvas.getCoords(); + * // { x: 100, y: 100 } */ - traits?: Traits; - /** - * Indicates an array of properties which will be inhereted by all NEW appended children. - For example if you create a component likes this: `{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }` - and append some new component inside, the new added component will get the exact same properties indicated in the `propagate` array (and the `propagate` property itself). Default: `[]` - * @default [] - */ - propagate?: (keyof ComponentProperties)[]; + getCoords(): { + x: number; + y: number; + }; + getZoomDecimal(): number; + getZoomMultiplier(): number; + toggleFramesEvents(on: boolean): void; + getFrames(): Frame[]; /** - * Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete). - * Eg. `toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]`. - * By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`). + * Add new frame to the canvas + * @param {Object} props Frame properties + * @returns {[Frame]} + * @example + * canvas.addFrame({ + * name: 'Mobile home page', + * x: 100, // Position in canvas + * y: 100, + * width: 500, // Frame dimensions + * height: 600, + * // device: 'DEVICE-ID', + * components: [ + * '

Title frame

', + * '

Paragraph frame

', + * ], + * styles: ` + * .testh { color: red; } + * .testp { color: blue; } + * `, + * }); */ - toolbar?: ToolbarButtonProps[]; - components?: Components; - classes?: Selectors; - dmode?: DragMode; - "script-props"?: string[]; - [key: string]: any; -} -export interface SymbolToUpOptions { - changed?: string; - fromInstance?: boolean; - noPropagate?: boolean; - fromUndo?: boolean; + addFrame(props?: {}, opts?: {}): Frame; + destroy(): void; } -export interface ComponentDefinition extends Omit { +export type DragStop = (cancel?: boolean) => void; +export type DragContent = (content: any) => void; +declare class Droppable { + em: EditorModel; + canvas: CanvasModule; + el: HTMLElement; + counter: number; + sortOpts?: Record | null; + over?: boolean; + dragStop?: DragStop; + dragContent?: DragContent; + sorter?: any; + constructor(em: EditorModel, rootEl?: HTMLElement); + toggleEffects(el: HTMLElement, enable: boolean): void; + __customTglEff(enable: boolean): void; + startCustom(): void; + endCustom(cancel?: boolean): void; + endDrop(cancel?: boolean, ev?: Event): void; + handleDragLeave(ev: Event): void; + updateCounter(value: number, ev: Event): void; + handleDragEnter(ev: DragEvent | Event): void; + handleDragEnd(model: any, dt: any): void; /** - * Children components. + * Always need to have this handler active for enabling the drop + * @param {Event} ev */ - components?: string | ComponentDefinition | (string | ComponentDefinition)[]; - traits?: (Partial | string)[]; - attributes?: Record; - [key: string]: unknown; -} -export interface ComponentDefinitionDefined extends Omit { + handleDragOver(ev: Event): void; /** - * Children components. + * WARNING: This function might fail to run on drop, for example, when the + * drop, accidentally, happens on some external element (DOM not inside the iframe) */ - components?: ComponentDefinitionDefined[] | ComponentDefinitionDefined; - traits?: (Partial | string)[]; - [key: string]: any; + handleDrop(ev: Event | DragEvent): void; + getContentByData(dt: any): { + content: any; + }; } -export type ComponentAddType = Component | ComponentDefinition | ComponentDefinitionDefined | string; -export type ComponentAdd = ComponentAddType | ComponentAddType[]; -export type ToHTMLOptions = { +declare class FrameView extends ModuleView { + /** @ts-ignore */ + get tagName(): string; + /** @ts-ignore */ + get attributes(): { + allowfullscreen: string; + }; + dragging: boolean; + droppable?: Droppable; + rect?: DOMRect; + lastClientY?: number; + lastMaxHeight: number; + private jsContainer?; + private tools; + private wrapper?; + private frameWrapView?; + constructor(model: Frame, view?: FrameWrapView); /** - * Custom tagName. + * Update `` content of the frame */ - tag?: string; + updateHead(): void; + getEl(): HTMLIFrameElement; + getCanvasModel(): Canvas; + getWindow(): Window; + getDoc(): Document; + getHead(): HTMLHeadElement; + getBody(): HTMLBodyElement; + getWrapper(): HTMLElement; + getJsContainer(): HTMLElement; + getToolsEl(): HTMLElement; + getGlobalToolsEl(): HTMLElement; + getHighlighter(): HTMLElement; + getBadgeEl(): HTMLElement; + getOffsetViewerEl(): HTMLElement; + getRect(): DOMRect; /** - * Include component properties as `data-gjs-*` attributes. This allows you to have re-importable HTML. + * Get rect data, not affected by the canvas zoom */ - withProps?: boolean; + getOffsetRect(): { + top: number; + left: number; + height: number; + width: number; + scrollTop: number; + scrollLeft: number; + scrollBottom: number; + scrollRight: number; + }; + _getTool(name: string): HTMLElement; + remove(...args: any): this; + startAutoscroll(): void; + autoscroll(): void; + updateClientY(ev: Event): void; + showGlobalTools(): void; + stopAutoscroll(): void; + _toggleAutoscrollFx(enable: boolean): void; + render(): this; + renderScripts(): void; + renderStyles(opts?: any): void; + renderBody(): void; + _toggleEffects(enable: boolean): void; + _emitUpdate(): void; +} +declare class ComponentsView extends View { + opts: any; + config: DomComponentsConfig & { + frameView?: FrameView; + }; + em: EditorModel; + parentEl?: HTMLElement; + compView: typeof ComponentView; + initialize(o: any): void; + removeChildren(removed: Component, coll: any, opts?: {}): void; /** - * In case the attribute value contains a `"` char, instead of escaping it (`attr="value ""`), the attribute will be quoted using single quotes (`attr='value "'`). - */ - altQuoteAttr?: boolean; + * Add to collection + * @param {Model} model + * @param {Collection} coll + * @param {Object} opts + * @private + * */ + addTo(model: Component, coll?: any, opts?: { + temporary?: boolean; + }): void; /** - * You can pass an object of custom attributes to replace with the current ones - * or you can even pass a function to generate attributes dynamically. - */ - attributes?: Record | ((component: Component, attr: Record) => Record); -}; -export interface ComponentOptions { - em?: EditorModel; - config?: DomComponentsConfig; - frame?: Frame; - temporary?: boolean; - avoidChildren?: boolean; + * Add new object to collection + * @param {Object} Model + * @param {Object} Fragment collection + * @param {Integer} Index of append + * + * @return {Object} Object rendered + * @private + * */ + addToCollection(model: Component, fragmentEl?: DocumentFragment | null, index?: number): HTMLElement | Text; + resetChildren(models: Components, { previousModels }?: { + previousModels?: never[] | undefined; + }): void; + render(parent?: HTMLElement): this; } export type ClbObj = ReturnType; export interface Rect { @@ -2307,7 +2545,7 @@ export interface Rect { export interface IComponentView extends ExtractMethods { } export declare class ComponentView extends View { /** @ts-ignore */ @@ -3344,9 +3582,9 @@ declare class ComponentTextNodeView extends ComponentView { _createElement(): Text; render(): this; } -export type ComponentEvent = "component:create" | "component:mount" | "component:add" | "component:remove" | "component:remove:before" | "component:clone" | "component:update" | "component:styleUpdate" | "component:selected" | "component:deselected" | "component:toggled" | "component:type:add" | "component:type:update" | "component:drag:start" | "component:drag" | "component:drag:end"; +export type ComponentEvent = "component:create" | "component:mount" | "component:add" | "component:remove" | "component:remove:before" | "component:clone" | "component:update" | "component:styleUpdate" | "component:selected" | "component:deselected" | "component:toggled" | "component:type:add" | "component:type:update" | "component:drag:start" | "component:drag" | "component:drag:end" | "component:resize"; export interface ComponentModelDefinition extends IComponent { - defaults?: ComponentDefinitionDefined; + defaults?: ComponentDefinition; [key: string]: any; } export interface ComponentViewDefinition extends IComponentView { @@ -3423,7 +3661,7 @@ export declare class ComponentManager extends ItemManagerModule { - opt: ComponentsOptions; - config?: DomComponentsConfig; - em: EditorModel; - domc?: ComponentManager; - parent?: Component; - __firstAdd?: any; - initialize(models: any, opt?: ComponentsOptions): void; - resetChildren(models: Components, opts?: { - previousModels?: Component[]; - keepIds?: string[]; - }): void; - resetFromString(input?: string, opts?: { - visitedCmps?: Record; - keepIds?: string[]; - }): void; - removeChildren(removed: Component, coll?: Components, opts?: any): void; - /** @ts-ignore */ - model(attrs: Partial, options: any): Component; - parseString(value: string, opt?: AddOptions & { - temporary?: boolean; - keepIds?: string[]; - }): ComponentDefinitionDefined | ComponentDefinitionDefined[] | undefined; - /** @ts-ignore */ - add(models: ComponentAdd, opt?: AddOptions & { - previousModels?: Component[]; - keepIds?: string[]; - }): any[]; - /** - * Process component definition. - */ - processDef(mdl: any): any; - onAdd(model: Component, c?: any, opts?: { - temporary?: boolean; - }): void; -} -/** @private */ -export interface CssRuleProperties { - /** - * Array of selectors - */ - selectors: Selector[]; - /** - * Object containing style definitions - * @default {} - */ - style?: Record; - /** - * Additional string css selectors - * @default '' - */ - selectorsAdd?: string; - /** - * Type of at-rule, eg. `media`, 'font-face' - * @default '' - */ - atRuleType?: string; - /** - * At-rule value, eg. `(max-width: 1000px)` - * @default '' - */ - mediaText?: string; - /** - * This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations. - * @default false - */ - singleAtRule?: boolean; - /** - * State of the rule, eg: `hover`, `focused` - * @default '' - */ - state?: string; - /** - * If true, sets `!important` on all properties. You can also pass an array to specify properties on which to use important. - * @default false - */ - important?: boolean | string[]; - /** - * Indicates if the rule is stylable from the editor. - * @default true - */ - stylable?: boolean | string[]; - /** - * Group for rules. - * @default '' - */ - group?: string; - /** - * If true, the rule won't be stored in JSON or showed in CSS export. - * @default false - */ - shallow?: boolean; -} -export interface CssRuleJSON extends Omit { - selectors: (string | SelectorProps)[]; -} -/** - * @typedef CssRule - * @property {Array} selectors Array of selectors - * @property {Object} style Object containing style definitions - * @property {String} [selectorsAdd=''] Additional string css selectors - * @property {String} [atRuleType=''] Type of at-rule, eg. `media`, 'font-face' - * @property {String} [mediaText=''] At-rule value, eg. `(max-width: 1000px)` - * @property {Boolean} [singleAtRule=false] This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations - * @property {String} [state=''] State of the rule, eg: `hover`, `focused` - * @property {Boolean|Array} [important=false] If true, sets `!important` on all properties. You can also pass an array to specify properties on which use important - * @property {Boolean} [stylable=true] Indicates if the rule is stylable from the editor - * - * [Device]: device.html - * [State]: state.html - * [Component]: component.html - */ -export declare class CssRule extends StyleableModel { - config: CssRuleProperties; - em?: EditorModel; - opt: any; - defaults(): { - selectors: never[]; - selectorsAdd: string; - style: {}; - mediaText: string; - state: string; - stylable: boolean; - atRuleType: string; - singleAtRule: boolean; - important: boolean; - group: string; - shallow: boolean; - _undo: boolean; - }; - constructor(props: CssRuleProperties, opt?: any); - __onChange(m: CssRule, opts: any): void; - clone(): CssRule; - ensureSelectors(m: any, c: any, opts: any): void; - /** - * Returns the at-rule statement when exists, eg. `@media (...)`, `@keyframes` - * @returns {String} - * @example - * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, { - * atRuleType: 'media', - * atRuleParams: '(min-width: 500px)' - * }); - * cssRule.getAtRule(); // "@media (min-width: 500px)" - */ - getAtRule(): string; - /** - * Return selectors of the rule as a string - * @param {Object} [opts] Options - * @param {Boolean} [opts.skipState] Skip state from the result - * @returns {String} - * @example - * const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' }); - * cssRule.selectorsToString(); // ".class1:hover" - * cssRule.selectorsToString({ skipState: true }); // ".class1" - */ - selectorsToString(opts?: ObjectAny): string; - /** - * Get declaration block (without the at-rule statement) - * @param {Object} [opts={}] Options (same as in `selectorsToString`) - * @returns {String} - * @example - * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, { - * atRuleType: 'media', - * atRuleParams: '(min-width: 500px)' - * }); - * cssRule.getDeclaration() // ".class1{color:red;}" - */ - getDeclaration(opts?: ObjectAny): string; - /** - * Get the Device the rule is related to. - * @returns {[Device]|null} - * @example - * const device = rule.getDevice(); - * console.log(device?.getName()); - */ - getDevice(): any; - /** - * Get the State the rule is related to. - * @returns {[State]|null} - * @example - * const state = rule.getState(); - * console.log(state?.getLabel()); - */ - getState(): any; - /** - * Returns the related Component (valid only for component-specific rules). - * @returns {[Component]|null} - * @example - * const cmp = rule.getComponent(); - * console.log(cmp?.toHTML()); - */ - getComponent(): any; + })[]; + selectAdd(component: Component, opts?: {}): void; + selectRemove(component: Component, opts?: {}): void; /** - * Return the CSS string of the rule - * @param {Object} [opts={}] Options (same as in `getDeclaration`) - * @return {String} CSS string - * @example - * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, { - * atRuleType: 'media', - * atRuleParams: '(min-width: 500px)' - * }); - * cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}" + * Triggered when the component is hovered + * @private */ - toCSS(opts?: ObjectAny): string; - toJSON(...args: any): any; + componentHovered(): void; + getShallowWrapper(): Component | undefined; /** - * Compare the actual model with parameters - * @param {Object} selectors Collection of selectors - * @param {String} state Css rule state - * @param {String} width For which device this style is oriented - * @param {Object} ruleProps Other rule props - * @returns {Boolean} + * Check if the component can be moved inside another. + * @param {[Component]} target The target Component is the one that is supposed to receive the source one. + * @param {[Component]|String} source The source can be another Component or an HTML string. + * @param {Number} [index] Index position. If not specified, the check will perform against appending the source to target. + * @returns {Object} Object containing the `result` (Boolean), `source`, `target` (as Components), and a `reason` (Number) with these meanings: + * * `0` - Invalid source. This is a default value and should be ignored in case the `result` is true. + * * `1` - Source doesn't accept target as destination. + * * `2` - Target doesn't accept source. * @private */ - compare(selectors: any, state?: string, width?: string, ruleProps?: Partial): boolean; + canMove(target: Component, source?: Component, index?: number): { + result: boolean; + reason: number; + target: Component; + source: null; + }; + allById(): { + [id: string]: Component; + }; + getById(id: string): Component; + destroy(): void; +} +export interface ComponentsOptions { + em?: EditorModel; + config?: DomComponentsConfig; + domc?: ComponentManager; +} +export declare class Components extends Collection { + opt: ComponentsOptions; + config?: DomComponentsConfig; + em: EditorModel; + domc?: ComponentManager; + parent?: Component; + __firstAdd?: any; + initialize(models: any, opt?: ComponentsOptions): void; + resetChildren(models: Components, opts?: { + previousModels?: Component[]; + keepIds?: string[]; + }): void; + resetFromString(input?: string, opts?: { + visitedCmps?: Record; + keepIds?: string[]; + }): void; + removeChildren(removed: Component, coll?: Components, opts?: any): void; + /** @ts-ignore */ + model(attrs: Partial, options: any): Component; + parseString(value: string, opt?: AddOptions & { + temporary?: boolean; + keepIds?: string[]; + }): ComponentDefinitionDefined | ComponentDefinitionDefined[] | undefined; + /** @ts-ignore */ + add(models: ComponentAdd, opt?: AddOptions & { + previousModels?: Component[]; + keepIds?: string[]; + }): any[]; + /** + * Process component definition. + */ + processDef(mdl: any): any; + onAdd(model: Component, c?: any, opts?: { + temporary?: boolean; + }): void; } export interface IComponent extends ExtractMethods { } @@ -4320,7 +4378,7 @@ export declare class Component extends StyleableModel { * }); * component.addTrait(['title', {...}, ...]); */ - addTrait(trait: Parameters[0], opts?: AddOptions): any[]; + addTrait(trait: Parameters[0], opts?: AddOptions): Trait[]; /** * Normalize input classes from array to array of objects * @param {Array} arr @@ -4597,10 +4655,22 @@ declare class CssRulesView extends View { sortRules(a: number, b: number): number; render(): this; } -export type RuleOptions = { +export interface RuleOptions { + /** + * At-rule type, eg. `media` + */ atRuleType?: string; + /** + * At-rule parameters, eg. `(min-width: 500px)` + */ atRuleParams?: string; -}; +} +export interface SetRuleOptions extends RuleOptions { + /** + * If the rule exists already, merge passed styles instead of replacing them. + */ + addStyles?: boolean; +} export type CssRuleStyle = Required["style"]; declare class CssComposer extends ItemManagerModule; } /** @private */ export interface DeviceProperties { @@ -5688,7 +5764,7 @@ export interface StorageManagerConfig { * Available by default: 'local' | 'remote' * @default 'local' */ - type?: string; + type?: LiteralUnion<"local" | "remote", string>; /** * Enable/disable autosaving. * @default true @@ -5787,20 +5863,6 @@ declare class PluginManager { */ getAll(): Record>; } -export interface TraitManagerConfig { - /** - * Style prefix. - * @default 'trt-' - */ - stylePrefix?: string; - /** - * Specify the element to use as a container, string (query) or HTMLElement. - * With the empty value, nothing will be rendered. - * @default '' - */ - appendTo?: string | HTMLElement; - optionsTarget?: Record[]; -} export interface CommandsConfig { /** * Style prefix @@ -5829,6 +5891,16 @@ export interface SectorProperties { extendBuilded?: boolean; properties?: PropertyProps[]; } +/** + * + * [Property]: property.html + * + * @typedef Sector + * @property {String} id Sector id, eg. `typography` + * @property {String} name Sector name, eg. `Typography` + * @property {Boolean} [open=true] Indicates the open state. + * @property {Array} [properties=[]] Indicate an array of Property defintions. + */ export declare class Sector extends Model { em: EditorModel; defaults(): { @@ -5875,37 +5947,193 @@ export declare class Sector extends Model { * Check if the sector is visible * @returns {Boolean} */ - isVisible(): boolean; + isVisible(): boolean; + /** + * Get sector properties. + * @param {Object} [opts={}] Options + * @param {Boolean} [opts.withValue=false] Get only properties with value + * @param {Boolean} [opts.withParentValue=false] Get only properties with parent value + * @returns {Array<[Property]>} + */ + getProperties(opts?: { + withValue?: boolean; + withParentValue?: boolean; + }): Property[]; + getProperty(id: string): Property | undefined; + addProperty(property: PropertyProps, opts: AddOptions): any; + /** + * Extend properties + * @param {Array} props Start properties + * @param {Array} moProps Model props + * @param {Boolean} ex Returns the same amount of passed model props + * @return {Array} Final props + * @private + */ + extendProperties(props: PropertyProps[], moProps?: PropertyProps[], ex?: boolean): PropertyProps[]; + checkExtend(prop: any): PropertyProps; + /** + * Build properties + * @param {Array} propr Array of props as sting + * @return {Array} + * @private + */ + buildProperties(props: string | string[]): PropertyProps[]; +} +/** @private */ +export interface PropertyNumberProps extends PropertyProps { + /** + * Array of units, eg. `['px', '%']` + */ + units?: string[]; + /** + * Unit defualt value. + */ + unit?: string; + /** + * Minimum value. + */ + min?: number; + /** + * Maximum value. + */ + max?: number; + /** + * Step value. + * @default 1 + */ + step?: number; +} +export type SelectOption = { + id: string; + value?: string; + label?: string; + name?: string; + className?: string; + title?: string; + style?: string; + propValue?: ObjectAny; +}; +/** @private */ +export interface PropertySelectProps extends PropertyProps { + options?: SelectOption[]; + list?: SelectOption[]; +} +export type PropValues = Record; +export type OptionByName = { + byName?: boolean; +}; +export type FromStyle = (style: StyleProps, data: FromStyleData) => PropValues; +export type FromStyleData = { + property: Property; + name: string; + separator: RegExp; +}; +export type ToStyle = (values: PropValues, data: ToStyleData) => StyleProps; +export type ToStyleData = { + join: string; + name: string; + property: Property; +}; +/** @private */ +export interface PropertyCompositeProps extends PropertyProps { + detached?: boolean; + /** + * Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]` + */ + properties: (PropertyProps | PropertyNumberProps | PropertySelectProps)[]; + /** + * Value used to split property values, default `" "`. + */ + separator: string; + /** + * Value used to join property values, default `" "`. + */ + join?: string; + /** + * Custom logic for getting property values from the target style object. + */ + fromStyle?: FromStyle; + /** + * Custom logic for creating the CSS style object to apply on selected targets. + */ + toStyle?: ToStyle; +} +declare class PropertyComposite = PropertyCompositeProps> extends Property { + defaults(): any; + initialize(props?: {}, opts?: {}): void; + get properties(): Property[]; + /** + * Get properties. + * @returns {Array<[Property]>} + */ + getProperties(): Property[]; + /** + * Get property by id. + * @param {String} id Property id. + * @returns {[Property]|null} + */ + getProperty(id: string): Property | undefined; + /** + * Get property at index. + * @param {Number} index + * @returns {[Property]|null} + */ + getPropertyAt(index: number): any; + /** + * Check if the property is detached. + * @returns {Boolean} + */ + isDetached(): boolean; /** - * Get sector properties. + * Get current values of properties. * @param {Object} [opts={}] Options - * @param {Boolean} [opts.withValue=false] Get only properties with value - * @param {Boolean} [opts.withParentValue=false] Get only properties with parent value - * @returns {Array<[Property]>} + * @param {Boolean} [opts.byName=false] Use property names as a key instead of the id. + * @returns {Object} + * @example + * // In case the property is `margin` with sub properties like `margin-top`, `margin-right`, etc. + * console.log(property.getValues()); + * // { 'margin-top': '10px', 'margin-right': '20px', ... }; */ - getProperties(opts?: { - withValue?: boolean; - withParentValue?: boolean; - }): Property[]; - getProperty(id: string): Property | undefined; - addProperty(property: PropertyProps, opts: AddOptions): any; + getValues({ byName }?: { + byName?: boolean; + }): Record; /** - * Extend properties - * @param {Array} props Start properties - * @param {Array} moProps Model props - * @param {Boolean} ex Returns the same amount of passed model props - * @return {Array} Final props - * @private + * Get property separator. + * @returns {RegExp} */ - extendProperties(props: PropertyProps[], moProps?: PropertyProps[], ex?: boolean): PropertyProps[]; - checkExtend(prop: any): PropertyProps; + getSeparator(): RegExp; /** - * Build properties - * @param {Array} propr Array of props as sting - * @return {Array} + * Get the join value. + * @returns {String} + */ + getJoin(): (T["join"] & string) | NonNullable; + /** + * Get style object from current properties + * @param {Object} [opts={}] Options + * @param {Boolean} [opts.camelCase] Return property names in camelCase. + * @returns {Object} Style object * @private */ - buildProperties(props: string | string[]): PropertyProps[]; + getStyleFromProps(opts?: OptionsStyle): StyleProps; + getSplitSeparator(): RegExp; + __upProperties(p: PropertyComposite, opts?: any): void; + __upTargetsStyleProps(opts?: {}, prop?: Property): void; + _up(props: Partial, opts?: OptionsUpdate): this; + getStyle(opts?: { + camelCase?: boolean; + }): StyleProps; + __getFullValue(opts?: any): string; + __getJoin(): (T["join"] & string) | NonNullable; + __styleHasProps(style?: StyleProps): boolean; + __splitValue(value: string, sep: string | RegExp): string[]; + __splitStyleName(style: StyleProps, name: string, sep: string | RegExp): string[]; + __getSplitValue(value?: string, { byName }?: OptionByName): StyleProps; + __getPropsFromStyle(style?: StyleProps, opts?: OptionByName): any; + __setProperties(values?: Record, opts?: OptionsUpdate): void; + clear(): this; + hasValue(opts: Parameters[0]): boolean; + getFullValue(): string; + __canClearProp(prop: Property): boolean; } /** @private */ export interface PropertyProps { @@ -6018,7 +6246,7 @@ export declare class Property = PropertyProps> ext parentTarget: null; }; initialize(props?: {}, opts?: any): void; - __getParentProp(): any; + __getParentProp(): T; __upTargets(p: this, opts?: any): void; __upTargetsStyle(style: StyleProps, opts: any): void; _up(props: Partial, opts?: OptionsUpdate): this; @@ -6084,7 +6312,7 @@ export declare class Property = PropertyProps> ext * // { color: 'red' }; */ getStyle(opts?: OptionsStyle): { - [x: string]: string | NonNullable; + [x: string]: string; }; /** * Get the default value. @@ -6116,12 +6344,12 @@ export declare class Property = PropertyProps> ext * Indicates if the current value comes directly from the selected target and so can be cleared. * @returns {Boolean} */ - canClear(): any; + canClear(): boolean; /** * If the current property is a sub-property, this will return the parent Property. * @returns {[Property]|null} */ - getParent(): any; + getParent(): PropertyComposite; /** * Indicates if the property is full-width in UI. * @returns {Boolean} @@ -6173,7 +6401,7 @@ export declare class Property = PropertyProps> ext * @param {String} [separator] Separator * @private */ - __getFullValue({ withDefault }?: any): string | NonNullable; + __getFullValue({ withDefault }?: any): string; /** * Get a complete value of the property. * This probably will replace the getValue when all @@ -6182,7 +6410,7 @@ export declare class Property = PropertyProps> ext * @return {string} * @private */ - getFullValue(val?: string, opts?: any): string | NonNullable; + getFullValue(val?: string, opts?: any): string; __setParentTarget(parentTarget: any): void; getParentTarget(): NonNullable | null; __parseFn(input?: string): { @@ -6689,11 +6917,11 @@ declare class BlockManager extends ItemManagerModule bm: BlockManager; blocks: Block[]; container: any; - dragStart: (block: Block, ev: Event) => void; + dragStart: (block: Block, ev?: Event) => void; drag: (ev: Event) => void; - dragStop: (cancel: boolean) => void; + dragStop: (cancel?: boolean) => void; }; - __startDrag(block: Block, ev: Event): void; + __startDrag(block: Block, ev?: Event): void; __drag(ev: Event): void; __endDrag(opts?: { component?: Component; @@ -6701,8 +6929,8 @@ declare class BlockManager extends ItemManagerModule __getFrameViews(): any; __behaviour(opts?: {}): {}; __getBehaviour(): Record; - startDrag(block: Block, ev: Event): void; - endDrag(cancel: boolean): void; + startDrag(block: Block, ev?: Event): void; + endDrag(cancel?: boolean): void; postRender(): void; /** * Add new block. @@ -7121,162 +7349,6 @@ declare class PropertyView extends View { render(): this; onRender(): void; } -export type SelectOption = { - id: string; - value?: string; - label?: string; - name?: string; - className?: string; - title?: string; - style?: string; - propValue?: ObjectAny; -}; -/** @private */ -export interface PropertySelectProps extends PropertyProps { - options?: SelectOption[]; - list?: SelectOption[]; -} -/** @private */ -export interface PropertyNumberProps extends PropertyProps { - /** - * Array of units, eg. `['px', '%']` - */ - units?: string[]; - /** - * Unit defualt value. - */ - unit?: string; - /** - * Minimum value. - */ - min?: number; - /** - * Maximum value. - */ - max?: number; - /** - * Step value. - * @default 1 - */ - step?: number; -} -export type PropValues = Record; -export type OptionByName = { - byName?: boolean; -}; -export type FromStyle = (style: StyleProps, data: FromStyleData) => PropValues; -export type FromStyleData = { - property: Property; - name: string; - separator: RegExp; -}; -export type ToStyle = (values: PropValues, data: ToStyleData) => StyleProps; -export type ToStyleData = { - join: string; - name: string; - property: Property; -}; -/** @private */ -export interface PropertyCompositeProps extends PropertyProps { - detached?: boolean; - /** - * Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]` - */ - properties: (PropertyProps | PropertyNumberProps | PropertySelectProps)[]; - /** - * Value used to split property values, default `" "`. - */ - separator: string; - /** - * Value used to join property values, default `" "`. - */ - join?: string; - /** - * Custom logic for getting property values from the target style object. - */ - fromStyle?: FromStyle; - /** - * Custom logic for creating the CSS style object to apply on selected targets. - */ - toStyle?: ToStyle; -} -declare class PropertyComposite = PropertyCompositeProps> extends Property { - defaults(): any; - initialize(props?: {}, opts?: {}): void; - get properties(): Property[]; - /** - * Get properties. - * @returns {Array<[Property]>} - */ - getProperties(): Property[]; - /** - * Get property by id. - * @param {String} id Property id. - * @returns {[Property]|null} - */ - getProperty(id: string): Property | undefined; - /** - * Get property at index. - * @param {Number} index - * @returns {[Property]|null} - */ - getPropertyAt(index: number): any; - /** - * Check if the property is detached. - * @returns {Boolean} - */ - isDetached(): boolean; - /** - * Get current values of properties. - * @param {Object} [opts={}] Options - * @param {Boolean} [opts.byName=false] Use property names as a key instead of the id. - * @returns {Object} - * @example - * // In case the property is `margin` with sub properties like `margin-top`, `margin-right`, etc. - * console.log(property.getValues()); - * // { 'margin-top': '10px', 'margin-right': '20px', ... }; - */ - getValues({ byName }?: { - byName?: boolean; - }): Record; - /** - * Get property separator. - * @returns {RegExp} - */ - getSeparator(): RegExp; - /** - * Get the join value. - * @returns {String} - */ - getJoin(): (T["join"] & string) | NonNullable; - /** - * Get style object from current properties - * @param {Object} [opts={}] Options - * @param {Boolean} [opts.camelCase] Return property names in camelCase. - * @returns {Object} Style object - * @private - */ - getStyleFromProps(opts?: OptionsStyle): StyleProps; - getSplitSeparator(): RegExp; - __upProperties(p: PropertyComposite, opts?: any): any; - __upTargetsStyleProps(opts?: {}, prop?: Property): void; - _up(props: Partial, opts?: OptionsUpdate): this; - getStyle(opts?: { - camelCase?: boolean; - }): StyleProps; - __getFullValue(opts?: any): string; - __getJoin(): (T["join"] & string) | NonNullable; - __styleHasProps(style?: StyleProps): boolean; - __splitValue(value: string, sep: string | RegExp): string[]; - __splitStyleName(style: StyleProps, name: string, sep: string | RegExp): string[]; - __getSplitValue(value?: string, { byName }?: OptionByName): StyleProps; - __getPropsFromStyle(style?: StyleProps, opts?: OptionByName): any; - __setProperties(values?: Record, opts?: OptionsUpdate): void; - clear(): this; - hasValue(opts: Parameters[0]): boolean; - getFullValue(): string; - __canClearProp(prop: Property): boolean; -} declare class PropertiesView extends View { config?: any; pfx: string; @@ -7625,7 +7697,7 @@ export type PropertyTypes = PropertyStackProps | PropertySelectProps | PropertyN export type StyleManagerEvent = "style:sector:add" | "style:sector:remove" | "style:sector:update" | "style:property:add" | "style:property:remove" | "style:property:update" | "style:target"; export type StyleTarget = StyleableModel; export type StyleModuleParam = Parameters[N]; -declare class StyleManager extends ItemManagerModule { builtIn: PropertyFactory; @@ -7771,7 +7843,7 @@ Sectors> { * By default, the Style Manager shows styles of the last selected target. * @returns {[Component]|[CSSRule]|null} */ - getSelected(): any; + getSelected(): StyleTarget | undefined; /** * Get the array of selected targets. * @returns {Array<[Component]|[CSSRule]>} @@ -7781,7 +7853,7 @@ Sectors> { * Get parent rules of the last selected target. * @returns {Array<[CSSRule]>} */ - getSelectedParents(): Array; + getSelectedParents(): CssRule[]; __getStateTarget(): CssRule | undefined; /** * Update selected targets with a custom style. @@ -9233,7 +9305,7 @@ declare class DeviceManager extends ItemManagerModule { * console.log('do stuff'); * }); * // or - * keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command'); + * keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', { + * // Prevent the default browser action + * prevent: true, + * }); * * // listen to events - * editor.on('keymap:emit', (id, shortcut, e) => { + * editor.on('keymap:emit', (id, shortcut, event) => { * // ... * }) */ @@ -10085,18 +10161,58 @@ export declare class Buttons extends ModuleCollection