diff --git a/packages/core/src/commands/view/PasteComponent.ts b/packages/core/src/commands/view/PasteComponent.ts index cb9585ca5..f97f926b3 100644 --- a/packages/core/src/commands/view/PasteComponent.ts +++ b/packages/core/src/commands/view/PasteComponent.ts @@ -1,5 +1,6 @@ import { isArray, contains } from 'underscore'; import Component from '../../dom_components/model/Component'; +import { ComponentsEvents } from '../../dom_components/types'; import { CommandObject } from './CommandAbstract'; import Editor from '../../editor'; @@ -33,7 +34,7 @@ export default { } added = isArray(added) ? added : [added]; - added.forEach((add) => ed.trigger('component:paste', add)); + added.forEach((add) => ed.trigger(ComponentsEvents.paste, add)); }); lastSelected.emitUpdate(); diff --git a/packages/core/src/dom_components/types.ts b/packages/core/src/dom_components/types.ts index 15047150b..3df7798b1 100644 --- a/packages/core/src/dom_components/types.ts +++ b/packages/core/src/dom_components/types.ts @@ -6,6 +6,7 @@ import type { OptionAsDocument, WithHTMLParserOptions, } from '../common'; +import type CssRule from '../css_composer/model/CssRule'; import type { ComponentResizeEventEndProps, ComponentResizeEventMoveProps, @@ -13,6 +14,7 @@ import type { ComponentResizeEventUpdateProps, } from '../commands/view/Resize'; import type { StyleProps } from '../domain_abstract/model/StyleableModel'; +import type Selector from '../selector_manager/model/Selector'; import type Component from './model/Component'; import type { ResetFromStringOptions } from './model/Components'; import type { ComponentOptions, ComponentStackItem } from './model/types'; @@ -91,6 +93,12 @@ export enum ComponentsEvents { selected = 'component:selected', deselected = 'component:deselected', toggled = 'component:toggled', + hover = 'component:hover', + hoverBefore = 'component:hover:before', + hovered = 'component:hovered', + unhovered = 'component:unhovered', + paste = 'component:paste', + syncStyle = 'component:sync-style', typeAdd = 'component:type:add', typeUpdate = 'component:type:update', dragStart = 'component:drag:start', @@ -311,6 +319,15 @@ export interface ComponentRemovedEventData { removeOptions: ObjectAny; } +export interface ComponentSyncStyleEventData { + component: Component | undefined; + selectors: Selector[]; + mediaText: string; + rule: CssRule; + ruleComponents: CssRule[]; + state: string; +} + export interface SymbolEventData { component: Component; changed?: ObjectAny; @@ -340,6 +357,12 @@ export interface ComponentsEventCallback { [ComponentsEvents.selected]: [Component, ObjectAny]; [ComponentsEvents.deselected]: [Component, ObjectAny]; [ComponentsEvents.toggled]: [Component?, ObjectAny?]; + [ComponentsEvents.hover]: [Component | undefined, ObjectAny]; + [ComponentsEvents.hoverBefore]: [Component, ObjectAny]; + [ComponentsEvents.hovered]: [Component, ObjectAny]; + [ComponentsEvents.unhovered]: [Component, ObjectAny]; + [ComponentsEvents.paste]: [Component]; + [ComponentsEvents.syncStyle]: [ComponentSyncStyleEventData]; [ComponentsEvents.typeAdd]: [ComponentTypeEventData]; [ComponentsEvents.typeUpdate]: [ComponentTypeEventData]; [ComponentsEvents.dragStart]: [ComponentDragEventData]; diff --git a/packages/core/src/editor/model/Editor.ts b/packages/core/src/editor/model/Editor.ts index cebe55085..9d519f501 100644 --- a/packages/core/src/editor/model/Editor.ts +++ b/packages/core/src/editor/model/Editor.ts @@ -492,8 +492,8 @@ export default class EditorModel extends Model { * */ componentHovered(editor: any, component: any, options: any) { const prev = this.previous('componentHovered'); - prev && this.trigger('component:unhovered', prev, options); - component && this.trigger('component:hovered', component, options); + prev && this.trigger(ComponentsEvents.unhovered, prev, options); + component && this.trigger(ComponentsEvents.hovered, component, options); } /** @@ -711,9 +711,8 @@ export default class EditorModel extends Model { return upHovered(); } - const ev = 'component:hover'; opts.forceChange && upHovered(); - this.trigger(`${ev}:before`, cmp, opts); + this.trigger(ComponentsEvents.hoverBefore, cmp, opts); // Check for valid hoverable if (!cmp.get('hoverable')) { @@ -728,7 +727,7 @@ export default class EditorModel extends Model { if (!opts.abort) { upHovered(cmp, opts); - this.trigger(ev, cmp, opts); + this.trigger(ComponentsEvents.hover, cmp, opts); } } diff --git a/packages/core/src/editor/types.ts b/packages/core/src/editor/types.ts index baaf88f33..1bb93cf75 100644 --- a/packages/core/src/editor/types.ts +++ b/packages/core/src/editor/types.ts @@ -1,6 +1,6 @@ import { AssetEvent, AssetsEventCallback } from '../asset_manager/types'; import { BlockEvent, BlocksEventCallback } from '../block_manager/types'; -import { LiteralUnion } from '../common'; +import type { LiteralUnion, ObjectAny } from '../common'; import { CanvasEvent, CanvasEventCallback } from '../canvas/types'; import { CommandEvent, CommandsEventCallback } from '../commands/types'; import { DataSourceEvent, DataSourcesEventCallback } from '../data_sources/types'; @@ -14,15 +14,23 @@ import { PageEvent, PagesEventCallback } from '../pages/types'; import { ParserEvent, ParserEventCallback } from '../parser/types'; import { RichTextEditorEvent, RichTextEditorEventCallback } from '../rich_text_editor'; import { SelectorEvent, SelectorEventCallback } from '../selector_manager/types'; +import type { ProjectData } from '../storage_manager'; import { StorageEvent, StorageEventCallback } from '../storage_manager/types'; import { StyleManagerEvent, StyleManagerEventCallback } from '../style_manager/types'; import { TraitEvent, TraitEventCallback } from '../trait_manager/types'; import { EditorConfig } from './config/config'; -import EditorModel from './model/Editor'; +import type EditorModel from './model/Editor'; +import type { EditorLoadOptions } from './model/Editor'; -type GeneralEvent = 'canvasScroll' | 'undo' | 'redo' | 'load' | 'update'; +type EditorLogEvent = `${EditorEvents.log}:${string}` | `${EditorEvents.log}-${string}` | `${EditorEvents.log}-${string}:${string}`; + +type EditorCoreEvent = + | `${EditorEvents}` + | EditorLogEvent + | 'canvasScroll'; type EditorBuiltInEvents = + | EditorCoreEvent | DataSourceEvent | DeviceEvent | I18nEvent @@ -40,8 +48,7 @@ type EditorBuiltInEvents = | RichTextEditorEvent | TraitEvent | ModalEvent - | CommandEvent - | GeneralEvent; + | CommandEvent; export type EditorEvent = LiteralUnion; @@ -49,8 +56,47 @@ export type EditorConfigType = EditorConfig & { pStylePrefix?: string }; export type EditorModelParam = Parameters[N]; +export interface EditorProjectEventData { + project: ProjectData; + options: EditorLoadOptions; + initial: boolean; +} + +export interface EditorProjectLoadEventData extends EditorProjectEventData { + loaded: boolean; +} + +export interface EditorProjectGetEventData { + project: ProjectData; +} + +export interface EditorLogEventOptions extends ObjectAny { + ns?: string; + level?: string; +} + +export interface EditorEventCoreCallbacks { + [EditorEvents.update]: []; + [EditorEvents.updateBefore]: [Record]; + [EditorEvents.undo]: []; + [EditorEvents.redo]: []; + [EditorEvents.load]: [EditorModel['Editor']]; + [EditorEvents.projectLoad]: [EditorProjectLoadEventData]; + [EditorEvents.projectLoaded]: [EditorProjectEventData]; + [EditorEvents.projectGet]: [EditorProjectGetEventData]; + [EditorEvents.log]: [string, EditorLogEventOptions]; + [EditorEvents.telemetryInit]: []; + [EditorEvents.destroy]: []; + [EditorEvents.destroyed]: []; + [key: `log:${string}`]: [string, EditorLogEventOptions]; + [key: `log-${string}`]: [string, EditorLogEventOptions]; + [key: `log-${string}:${string}`]: [string, EditorLogEventOptions]; + 'canvasScroll': []; +} + export interface EditorEventCallbacks - extends AssetsEventCallback, + extends EditorEventCoreCallbacks, + AssetsEventCallback, BlocksEventCallback, CanvasEventCallback, CommandsEventCallback, diff --git a/packages/core/src/selector_manager/view/ClassTagsView.ts b/packages/core/src/selector_manager/view/ClassTagsView.ts index 4d2f6a5b9..da84e91f1 100644 --- a/packages/core/src/selector_manager/view/ClassTagsView.ts +++ b/packages/core/src/selector_manager/view/ClassTagsView.ts @@ -127,7 +127,7 @@ export default class ClassTagsView extends View { style && rule.addStyle(style); em.trigger(ComponentsEvents.toggled); - em.trigger('component:sync-style', { + em.trigger(ComponentsEvents.syncStyle, { component: target, selectors, mediaText,