tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Move StyleManager events

data-source-schema
Artur Arseniev 11 months ago
parent
e4296e52bb
commit
9559f52914
2 changed files with 114 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 104
      packages/core/src/style_manager/index.ts
  2. 90
      packages/core/src/style_manager/types.ts

104
packages/core/src/style_manager/index.ts
View File

@ -9,29 +9,13 @@
* })
* ```
*
* Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance.
*
* ```js
* // Listen to events
* editor.on('style:sector:add', (sector) => { ... });
*
* // Use the API
* const styleManager = editor.StyleManager;
* styleManager.addSector(...);
* ```
* ## Available Events
* * `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
* * `style:sector:remove` - Sector removed. The [Sector] is passed as an argument to the callback.
* * `style:sector:update` - Sector updated. The [Sector] and the object containing changes are passed as arguments to the callback.
* * `style:property:add` - Property added. The [Property] is passed as an argument to the callback.
* * `style:property:remove` - Property removed. The [Property] is passed as an argument to the callback.
* * `style:property:update` - Property updated. The [Property] and the object containing changes are passed as arguments to the callback.
* * `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback.
* <!--
* * `styleManager:update:target` - The target (Component or CSSRule) is changed
* * `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
* * `styleManager:change:{propertyName}` - As above but for a specific style property
* -->
*
* {REPLACE_EVENTS}
*
* ## Methods
* * [getConfig](#getconfig)
@ -63,72 +47,31 @@
* @module docsjs.StyleManager
*/
import { isUndefined, isArray, isString, debounce, bindAll } from 'underscore';
import { isComponent } from '../utils/mixins';
import { bindAll, debounce, isArray, isString, isUndefined } from 'underscore';
import { ItemManagerModule } from '../abstract/Module';
import { AddOptions, Debounced, Model } from '../common';
import CssRule from '../css_composer/model/CssRule';
import Component from '../dom_components/model/Component';
import { ComponentsEvents } from '../dom_components/types';
import StyleableModel, { StyleProps } from '../domain_abstract/model/StyleableModel';
import EditorModel from '../editor/model/Editor';
import { isComponent } from '../utils/mixins';
import defConfig, { StyleManagerConfig } from './config/config';
import Sector, { SectorProperties } from './model/Sector';
import Sectors from './model/Sectors';
import Properties from './model/Properties';
import PropertyFactory from './model/PropertyFactory';
import SectorsView from './view/SectorsView';
import { ItemManagerModule } from '../abstract/Module';
import EditorModel from '../editor/model/Editor';
import Property, { PropertyProps } from './model/Property';
import Component from '../dom_components/model/Component';
import CssRule from '../css_composer/model/CssRule';
import StyleableModel, { StyleProps } from '../domain_abstract/model/StyleableModel';
import { CustomPropertyView } from './view/PropertyView';
import { PropertySelectProps } from './model/PropertySelect';
import { PropertyNumberProps } from './model/PropertyNumber';
import PropertyStack, { PropertyStackProps } from './model/PropertyStack';
import PropertyComposite from './model/PropertyComposite';
import { ComponentsEvents } from '../dom_components/types';
import PropertyFactory from './model/PropertyFactory';
import PropertyStack from './model/PropertyStack';
import Sector, { SectorProperties } from './model/Sector';
import Sectors from './model/Sectors';
import { PropertyTypes, StyleManagerEvents, StyleTarget } from './types';
import { CustomPropertyView } from './view/PropertyView';
import SectorsView from './view/SectorsView';
export type PropertyTypes = PropertyStackProps | PropertySelectProps | PropertyNumberProps;
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 const evAll = 'style';
export const evPfx = `${evAll}:`;
export const evSector = `${evPfx}sector`;
export const evSectorAdd = `${evSector}:add`;
export const evSectorRemove = `${evSector}:remove`;
export const evSectorUpdate = `${evSector}:update`;
export const evProp = `${evPfx}property`;
export const evPropAdd = `${evProp}:add`;
export const evPropRemove = `${evProp}:remove`;
export const evPropUp = `${evProp}:update`;
export const evLayerSelect = `${evPfx}layer:select`;
export const evTarget = `${evPfx}target`;
export const evCustom = `${evPfx}custom`;
export type StyleModuleParam<T extends keyof StyleManager, N extends number> = Parameters<StyleManager[T]>[N];
export type { PropertyTypes, StyleManagerEvent, StyleModuleParam, StyleTarget } from './types';
const propDef = (value: any) => value || value === 0;
const stylesEvents = {
all: evAll,
sectorAdd: evSectorAdd,
sectorRemove: evSectorRemove,
sectorUpdate: evSectorUpdate,
propertyAdd: evPropAdd,
propertyRemove: evPropRemove,
propertyUpdate: evPropUp,
layerSelect: evLayerSelect,
target: evTarget,
custom: evCustom,
};
export default class StyleManager extends ItemManagerModule<
StyleManagerConfig,
/** @ts-ignore */
@ -137,7 +80,7 @@ export default class StyleManager extends ItemManagerModule<
builtIn: PropertyFactory;
upAll: Debounced;
properties: typeof Properties;
events!: typeof stylesEvents;
events = StyleManagerEvents;
sectors: Sectors;
SectView!: SectorsView;
Sector = Sector;
@ -157,8 +100,9 @@ export default class StyleManager extends ItemManagerModule<
* @private
*/
constructor(em: EditorModel) {
super(em, 'StyleManager', new Sectors([], { em }), stylesEvents, defConfig());
super(em, 'StyleManager', new Sectors([], { em }), StyleManagerEvents, defConfig());
bindAll(this, '__clearStateTarget');
const { events } = this;
const c = this.config;
const ppfx = c.pStylePrefix;
if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;
@ -185,10 +129,10 @@ export default class StyleManager extends ItemManagerModule<
// Triggers only custom event
const trgCustom = debounce(() => this.__trgCustom(), 0);
model.listenTo(em, `${evLayerSelect} ${evTarget}`, trgCustom);
model.listenTo(em, `${events.layerSelect} ${events.target}`, trgCustom);
// Other listeners
model.on('change:lastTarget', () => em.trigger(evTarget, this.getSelected()));
model.on('change:lastTarget', () => em.trigger(events.target, this.getSelected()));
}
__upSel() {

90
packages/core/src/style_manager/types.ts
View File

@ -0,0 +1,90 @@
import StyleManager from '.';
import StyleableModel from '../domain_abstract/model/StyleableModel';
import { PropertyNumberProps } from './model/PropertyNumber';
import { PropertySelectProps } from './model/PropertySelect';
import { PropertyStackProps } from './model/PropertyStack';
export type PropertyTypes = PropertyStackProps | PropertySelectProps | PropertyNumberProps;
export type StyleTarget = StyleableModel;
export type StyleModuleParam<T extends keyof StyleManager, N extends number> = Parameters<StyleManager[T]>[N];
/**{START_EVENTS}*/
export enum StyleManagerEvents {
/**
* @event `style:sector:add` Sector added. The Sector is passed as an argument to the callback.
* @example
* editor.on('style:sector:add', (sector) => { ... });
*/
sectorAdd = 'style:sector:add',
/**
* @event `style:sector:remove` Sector removed. The Sector is passed as an argument to the callback.
* @example
* editor.on('style:sector:remove', (sector) => { ... });
*/
sectorRemove = 'style:sector:remove',
/**
* @event `style:sector:update` Sector updated. The Sector and the object containing changes are passed as arguments to the callback.
* @example
* editor.on('style:sector:update', (sector, changes) => { ... });
*/
sectorUpdate = 'style:sector:update',
/**
* @event `style:property:add` Property added. The Property is passed as an argument to the callback.
* @example
* editor.on('style:property:add', (property) => { ... });
*/
propertyAdd = 'style:property:add',
/**
* @event `style:property:remove` Property removed. The Property is passed as an argument to the callback.
* @example
* editor.on('style:property:remove', (property) => { ... });
*/
propertyRemove = 'style:property:remove',
/**
* @event `style:property:update` Property updated. The Property and the object containing changes are passed as arguments to the callback.
* @example
* editor.on('style:property:update', (property, changes) => { ... });
*/
propertyUpdate = 'style:property:update',
/**
* @event `style:target` Target selection changed. The target (or null in case the target is deselected) is passed as an argument to the callback.
* @example
* editor.on('style:target', (target) => { ... });
*/
target = 'style:target',
/**
* @event `style:layer:select` Layer selected. Object containing layer data is passed as an argument.
* @example
* editor.on('style:layer:select', (data) => { ... });
*/
layerSelect = 'style:layer:select',
/**
* @event `style:custom` Custom style event. Object containing all custom data is passed as an argument.
* @example
* editor.on('style:custom', ({ container }) => { ... });
*/
custom = 'style:custom',
/**
* @event `style` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
* @example
* editor.on('style', ({ event, sector, property, ... }) => { ... });
*/
all = 'style',
}
/**{END_EVENTS}*/
export type StyleManagerEvent = `${StyleManagerEvents}`;
// need this to avoid the TS documentation generator to break
export default StyleManagerEvents;
Write Preview
Loading…
Cancel
Save