From 8f416b1c96e9e9903405c340019867f4367b40a6 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 1 Jul 2023 12:37:23 +0400 Subject: [PATCH] Up TS --- dist/index.d.ts | 291 ++++++++++++++++++++- src/index.ts | 6 + src/style_manager/model/Layer.ts | 3 +- src/style_manager/model/PropertyFactory.ts | 4 +- src/style_manager/model/PropertySelect.ts | 2 +- src/style_manager/model/PropertyStack.ts | 4 +- 6 files changed, 300 insertions(+), 10 deletions(-) diff --git a/dist/index.d.ts b/dist/index.d.ts index 70b619251..e29e7546b 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -5979,6 +5979,122 @@ export declare class Sector extends Model { */ buildProperties(props: string | string[]): PropertyProps[]; } +declare class Input extends View { + ppfx: string; + em: EditorModel; + opts: any; + inputEl?: any; + template(): string; + inputClass(): string; + holderClass(): string; + constructor(opts?: any); + /** + * Fired when the element of the property is updated + */ + elementUpdated(): void; + /** + * Set value to the input element + * @param {string} value + */ + setValue(value: string, opts?: any): void; + /** + * Updates the view when the model is changed + * */ + handleModelChange(model: any, value: string, opts: any): void; + /** + * Handled when the view is changed + */ + handleChange(e: Event): void; + __onInputChange(value: string): void; + /** + * Get the input element + * @return {HTMLElement} + */ + getInputEl(): any; + render(): this; +} +declare class InputNumber extends Input { + doc: Document; + unitEl?: any; + moved?: boolean; + prValue?: number; + current?: { + y: number; + val: string; + }; + template(): string; + inputClass(): any; + constructor(opts?: {}); + /** + * Set value to the model + * @param {string} value + * @param {Object} opts + */ + setValue(value: string, opts?: any): void; + /** + * Handled when the view is changed + */ + handleChange(e: Event): void; + /** + * Handled when the view is changed + */ + handleUnitChange(e: Event): void; + /** + * Handled when user uses keyboard + */ + handleKeyDown(e: KeyboardEvent): void; + /** + * Fired when the element of the property is updated + */ + elementUpdated(): void; + /** + * Updates the view when the model is changed + * */ + handleModelChange(): void; + /** + * Get the unit element + * @return {HTMLElement} + */ + getUnitEl(): any; + /** + * Invoked when the up arrow is clicked + * */ + upArrowClick(): void; + /** + * Invoked when the down arrow is clicked + * */ + downArrowClick(): void; + /** + * Change easily integer input value with click&drag method + * @param Event + * + * @return void + * */ + downIncrement(e: MouseEvent): void; + /** While the increment is clicked, moving the mouse will update input value + * @param Object + * + * @return bool + * */ + moveIncrement(ev: MouseEvent): boolean; + /** + * Stop moveIncrement method + * */ + upIncrement(): void; + normalizeValue(value: any, defValue?: number): any; + /** + * Validate input value + * @param {String} value Raw value + * @param {Object} opts Options + * @return {Object} Validated string + */ + validateInputValue(value?: any, opts?: any): { + force: number; + value: any; + unit: any; + }; + render(): this; +} /** @private */ export interface PropertyNumberProps extends PropertyProps { /** @@ -6003,6 +6119,60 @@ export interface PropertyNumberProps extends PropertyProps { */ step?: number; } +/** + * @typedef PropertyNumber + * @property {Array} units Array of units, eg. `['px', '%']` + * @property {Number} min Minimum value. + * @property {Number} max Maximum value. + * @property {Number} step Step value. + * + */ +export declare class PropertyNumber extends Property { + input?: InputNumber; + defaults(): any; + /** + * Get property units. + * @returns {Array} + */ + getUnits(): string[]; + /** + * Get property unit value. + * @returns {String} + */ + getUnit(): string; + /** + * Get min value. + * @returns {Number} + */ + getMin(): number; + /** + * Get max value. + * @returns {Number} + */ + getMax(): number; + /** + * Get step value. + * @returns {Number} + */ + getStep(): number; + /** + * Update property unit value. + * The change is also propagated to the selected targets. + * @param {String} unit New unit value + * @param {Object} [opts={}] Options + * @param {Boolean} [opts.noTarget=false] If `true` the change won't be propagated to selected targets. + * @returns {String} + */ + upUnit(unit: string, opts?: { + noTarget?: boolean; + }): this; + initialize(props?: {}, opts?: {}): void; + __getClearProps(): { + unit: string; + }; + parseValue(val: any, opts?: {}): Partial; + getFullValue(): string; +} export type SelectOption = { id: string; value?: string; @@ -6018,6 +6188,60 @@ export interface PropertySelectProps extends PropertyProps { options?: SelectOption[]; list?: SelectOption[]; } +/** + * @typedef PropertySelect + * @property {Array} options Array of option definitions. + * \n + * ```js + * options: [ + * { id: '100', label: 'Set 100' }, + * { id: '200', label: 'Set 200' }, + * ] + * ``` + */ +export declare class PropertySelect extends Property { + defaults(): any; + /** + * Get available options. + * @returns {Array} Array of options + */ + getOptions(): SelectOption[]; + /** + * Get current selected option or by id. + * @param {String} [id] Option id. + * @returns {Object | null} + */ + getOption(id?: string): SelectOption; + /** + * Update options. + * @param {Array} value New array of options, eg. `[{ id: 'val-1', label: 'Value 1' }]` + */ + setOptions(value?: SelectOption[]): this; + /** + * Add new option. + * @param {Object} value Option object, eg. `{ id: 'val-1', label: 'Value 1' }` + */ + addOption(value: SelectOption): this; + /** + * Get the option id from the option object. + * @param {Object} option Option object + * @returns {String} Option id + */ + getOptionId(option: SelectOption): string; + /** + * Get option label. + * @param {String|Object} id Option id or the option object + * @param {Object} [opts={}] Options + * @param {Boolean} [opts.locale=true] Use the locale string from i18n module + * @returns {String} Option label + */ + getOptionLabel(id: string | SelectOption, opts?: { + locale?: boolean; + property?: string; + }): string; + initialize(...args: any): void; + __onOptionChange(): void; +} export type PropValues = Record; export type OptionByName = { byName?: boolean; @@ -6058,7 +6282,41 @@ export interface PropertyCompositeProps extends PropertyProps { */ toStyle?: ToStyle; } -declare class PropertyComposite = PropertyCompositeProps> extends Property { +/** + * + * [Property]: property.html + * + * + * @typedef PropertyComposite + * @property {Array} properties Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]` + * @property {Boolean} [detached=false] Indicate if the final CSS property is splitted (detached: `margin-top: X; margin-right: Y; ...`) or combined (not detached: `margin: X Y ...;`) + * @property {String|RegExp} [separator=' '] Value used to split property values, default `" "`. + * @property {String} [join=' '] Value used to join property values, default `" "`. + * @property {Function} [fromStyle] Custom logic for getting property values from the target style object. + * \n + * ```js + * fromStyle: (style) => { + * const margins = parseMarginShorthand(style.margin); + * return { + * 'margin-top': margins.top, + * // ... + * }; + * } + * ``` + * @property {Function} [toStyle] Custom logic for creating the CSS style object to apply on selected targets. + * \n + * ```js + * toStyle: (values) => { + * const top = values['margin-top'] || 0; + * const right = values['margin-right'] || 0; + * // ... + * return { + * margin: `${top} ${right} ...`, + * }; + * } + * ``` + */ +export declare class PropertyComposite = PropertyCompositeProps> extends Property { defaults(): any; initialize(props?: {}, opts?: {}): void; get properties(): Property[]; @@ -7490,7 +7748,7 @@ declare class Layer extends Model { * @param {Object} [opts={}] Options. Same of `PropertyStack.getStyleFromLayer` * @returns {Object} Style object */ - getStylePreview(opts?: {}): Record; + getStylePreview(opts?: OptionStyleStack): Record; /** * Check if the property has the preview enabled for this layer. * @returns {Boolean} @@ -7552,7 +7810,26 @@ export interface PropertyStackProps extends Omit { +/** + * + * [Layer]: layer.html + * + * + * @typedef PropertyStack + * @property {Boolean} [preview=false] Indicate if the layer should display a preview. + * @property {String|RegExp} [layerSeparator=', '] The separator used to split layer values. + * @property {String} [layerJoin=', '] Value used to join layer values. + * @property {Function} [layerLabel] Custom logic for creating layer labels. + * \n + * ```js + * layerLabel: (layer) => { + * const values = layer.getValues(); + * return `A: ${values['prop-a']} B: ${values['prop-b']}`; + * } + * ``` + * + */ +export declare class PropertyStack extends PropertyComposite { defaults(): any; initialize(props?: {}, opts?: {}): void; /** @@ -7656,7 +7933,7 @@ declare class PropertyStack extends PropertyComposite { * @param {Object} [opts={}] Options. Same of `getStyleFromLayer` * @returns {Object} Style object */ - getStylePreview(layer: Layer, opts?: {}): {}; + getStylePreview(layer: Layer, opts?: OptionStyleStack): {}; /** * Get layer separator. * @return {RegExp} @@ -11650,6 +11927,12 @@ export declare class Editor implements IBaseModule { */ html: typeof html; } +export declare class PropertyRadio extends PropertySelect { + defaults(): any; +} +export declare class PropertySlider extends PropertyNumber { + defaults(): any; +} export declare const usePlugin:

>(plugin: P, opts?: (P extends Plugin ? C : {}) | undefined) => (editor: Editor) => void; diff --git a/src/index.ts b/src/index.ts index 182c3ad6f..f0d5c3384 100644 --- a/src/index.ts +++ b/src/index.ts @@ -123,6 +123,12 @@ export type { default as Selectors } from './selector_manager/model/Selectors'; export type { default as State } from './selector_manager/model/State'; export type { default as Properties } from './style_manager/model/Properties'; export type { default as Property } from './style_manager/model/Property'; +export type { default as PropertyRadio } from './style_manager/model/PropertyRadio'; +export type { default as PropertySelect } from './style_manager/model/PropertySelect'; +export type { default as PropertyNumber } from './style_manager/model/PropertyNumber'; +export type { default as PropertySlider } from './style_manager/model/PropertySlider'; +export type { default as PropertyComposite } from './style_manager/model/PropertyComposite'; +export type { default as PropertyStack } from './style_manager/model/PropertyStack'; export type { default as Sector } from './style_manager/model/Sector'; export type { default as Sectors } from './style_manager/model/Sectors'; export type { default as Trait } from './trait_manager/model/Trait'; diff --git a/src/style_manager/model/Layer.ts b/src/style_manager/model/Layer.ts index b0794164c..169b71345 100644 --- a/src/style_manager/model/Layer.ts +++ b/src/style_manager/model/Layer.ts @@ -1,6 +1,7 @@ import { Model } from '../../common'; import { camelCase } from '../../utils/mixins'; import LayerView from '../view/LayerView'; +import { OptionStyleStack } from './PropertyStack'; export type LayerValues = Record; @@ -101,7 +102,7 @@ export default class Layer extends Model { * @param {Object} [opts={}] Options. Same of `PropertyStack.getStyleFromLayer` * @returns {Object} Style object */ - getStylePreview(opts = {}): Record { + getStylePreview(opts: OptionStyleStack = {}): Record { return this.prop?.getStylePreview(this, opts); } diff --git a/src/style_manager/model/PropertyFactory.ts b/src/style_manager/model/PropertyFactory.ts index ae51409e8..07bb7a1d1 100644 --- a/src/style_manager/model/PropertyFactory.ts +++ b/src/style_manager/model/PropertyFactory.ts @@ -243,7 +243,7 @@ export default class PropertyFactory { ['text-align', { default: 'left', options: this.optsTextAlign }, 'float'], // Color types - ['color', { type: this.typeColor, default: 'black' }], + ['color', { type: this.typeColor, default: 'black', full: true }], ['text-shadow-color', {}, 'color'], ['border-color', {}, 'color'], ['box-shadow-color', {}, 'color'], @@ -261,7 +261,7 @@ export default class PropertyFactory { ], // Slider type - ['opacity', { type: this.typeSlider, default: '1', min: 0, max: 1, step: 0.01 }], + ['opacity', { type: this.typeSlider, default: '1', min: 0, max: 1, step: 0.01, full: true }], // Select types ['display', { type: this.typeSelect, default: 'block', options: this.opstDisplay }], diff --git a/src/style_manager/model/PropertySelect.ts b/src/style_manager/model/PropertySelect.ts index ff805a2a6..76470c079 100644 --- a/src/style_manager/model/PropertySelect.ts +++ b/src/style_manager/model/PropertySelect.ts @@ -97,7 +97,7 @@ export default class PropertySelect extends Property { * @param {Boolean} [opts.locale=true] Use the locale string from i18n module * @returns {String} Option label */ - getOptionLabel(id: string, opts: { locale?: boolean; property?: string } = {}): string { + getOptionLabel(id: string | SelectOption, opts: { locale?: boolean; property?: string } = {}): string { const { locale = true } = opts; const option = (isString(id) ? this.getOption(id) : id) || {}; const optId = this.getOptionId(option); diff --git a/src/style_manager/model/PropertyStack.ts b/src/style_manager/model/PropertyStack.ts index 4009f2c6e..9552401cb 100644 --- a/src/style_manager/model/PropertyStack.ts +++ b/src/style_manager/model/PropertyStack.ts @@ -25,7 +25,7 @@ type FromStyleDataStack = Omit & { separatorLayers: RegExp; }; -type OptionStyleStack = OptionsStyle & { number?: { min?: number; max?: number } }; +export type OptionStyleStack = OptionsStyle & { number?: { min?: number; max?: number } }; /** @private */ export interface PropertyStackProps extends Omit { @@ -322,7 +322,7 @@ export default class PropertyStack extends PropertyComposite * @param {Object} [opts={}] Options. Same of `getStyleFromLayer` * @returns {Object} Style object */ - getStylePreview(layer: Layer, opts = {}) { + getStylePreview(layer: Layer, opts: OptionStyleStack = {}) { let result = {}; const preview = this.get('preview');