From 9ba17a62018d34d0f67738b4e5e5f378aeae3333 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 21 Jan 2023 11:28:45 +0400 Subject: [PATCH] Move ComponentImage to TS --- src/dom_components/model/Component.ts | 3 +- .../{ComponentImage.js => ComponentImage.ts} | 49 +++++++++++-------- src/dom_components/model/ToolbarButton.ts | 21 +++++++- src/dom_components/model/types.ts | 13 +++-- 4 files changed, 57 insertions(+), 29 deletions(-) rename src/dom_components/model/{ComponentImage.js => ComponentImage.ts} (79%) diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index dc1c826da..ade17a8b1 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -35,6 +35,7 @@ import ComponentView from '../view/ComponentView'; import { AddOptions, ObjectAny, ObjectStrings, SetOptions } from '../../common'; import CssRule, { CssRuleJSON, CssRuleProperties } from '../../css_composer/model/CssRule'; import { TraitProperties } from '../../trait_manager/model/Trait'; +import { ToolbarButtonProps } from './ToolbarButton'; const escapeRegExp = (str: string) => { return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); @@ -1170,7 +1171,7 @@ export default class Component extends StyleableModel { const ppfx = (em && em.getConfig().stylePrefix) || ''; if (!model.get('toolbar') && em) { - const tb = []; + const tb: ToolbarButtonProps[] = []; model.collection && tb.push({ label: em.getIcon('arrowUp'), diff --git a/src/dom_components/model/ComponentImage.js b/src/dom_components/model/ComponentImage.ts similarity index 79% rename from src/dom_components/model/ComponentImage.js rename to src/dom_components/model/ComponentImage.ts index 61da75a97..69404377f 100644 --- a/src/dom_components/model/ComponentImage.js +++ b/src/dom_components/model/ComponentImage.ts @@ -1,6 +1,7 @@ import { result } from 'underscore'; import Component from './Component'; import { toLowerCase, buildBase64UrlFromSvg, hasWin } from '../../utils/mixins'; +import { ObjectStrings } from '../../common'; const svgAttrs = 'xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 24 24" style="fill: rgba(0,0,0,0.15); transform: scale(0.75)"'; @@ -8,6 +9,7 @@ const svgAttrs = export default class ComponentImage extends Component { get defaults() { return { + // @ts-ignore ...super.defaults, type: 'image', tagName: 'img', @@ -33,26 +35,26 @@ export default class ComponentImage extends Component { }; } - initialize(o, opt) { - Component.prototype.initialize.apply(this, arguments); - const { src } = this.get('attributes'); + initialize(props: any, opts: any) { + super.initialize(props, opts); + const { src } = this.get('attributes')!; if (src && buildBase64UrlFromSvg(result(this, 'defaults').src) !== src) { - this.set('src', src, { silent: 1 }); + this.set('src', src, { silent: true }); } } - initToolbar(...args) { - Component.prototype.initToolbar.apply(this, args); - const em = this.em; + initToolbar() { + super.initToolbar(); + const { em } = this; if (em) { - var cmd = em.get('Commands'); - var cmdName = 'image-editor'; + const cmd = em.Commands; + const cmdName = 'image-editor'; // Add Image Editor button only if the default command exists if (cmd.has(cmdName)) { let hasButtonBool = false; - var tb = this.get('toolbar'); + const tb = this.get('toolbar')!; for (let i = 0; i < tb.length; i++) { if (tb[i].command === 'image-editor') { @@ -77,14 +79,14 @@ export default class ComponentImage extends Component { * @return {Object} * @private */ - getAttrToHTML(...args) { - const attr = Component.prototype.getAttrToHTML.apply(this, args); + getAttrToHTML() { + const attr = super.getAttrToHTML(); const src = this.getSrcResult(); if (src) attr.src = src; return attr; } - getSrcResult(opt = {}) { + getSrcResult(opt: { fallback?: boolean } = {}) { const src = this.get(opt.fallback ? 'fallback' : 'src') || ''; let result = src; @@ -107,9 +109,11 @@ export default class ComponentImage extends Component { * @return {Object} * @private */ - toJSON(...args) { - const obj = Component.prototype.toJSON.apply(this, args); - if (obj.attributes && obj.src === obj.attributes.src) { + toJSON(opts: Parameters[0]) { + const obj = super.toJSON(opts); + const { attributes } = obj; + + if (attributes && obj.src === attributes.src) { delete obj.src; } @@ -122,10 +126,11 @@ export default class ComponentImage extends Component { * @return {object} * @private */ - parseUri(uri) { - let result = {}; + parseUri(uri: string) { + let result: HTMLAnchorElement | URL | ObjectStrings = {}; + const getQueryObject = (search = '') => { - const query = {}; + const query: ObjectStrings = {}; const qrs = search.substring(1).split('&'); for (let i = 0; i < qrs.length; i++) { @@ -156,6 +161,8 @@ export default class ComponentImage extends Component { query: getQueryObject(result.search), }; } -} -ComponentImage.isComponent = el => toLowerCase(el.tagName) === 'img'; + static isComponent(el: HTMLElement) { + return toLowerCase(el.tagName) === 'img'; + } +} diff --git a/src/dom_components/model/ToolbarButton.ts b/src/dom_components/model/ToolbarButton.ts index ffb540936..e6a196a5d 100644 --- a/src/dom_components/model/ToolbarButton.ts +++ b/src/dom_components/model/ToolbarButton.ts @@ -1,6 +1,23 @@ -import { Model } from '../../common'; +import { CommandFunction } from '../../commands/view/CommandAbstract'; +import { Model, ObjectAny } from '../../common'; -export default class ToolbarButton extends Model { +export interface ToolbarButtonProps { + /** + * Command name. + */ + command: CommandFunction | string; + + /** + * Button label. + */ + label?: string; + + id?: string; + attributes?: ObjectAny; + events?: ObjectAny; +} + +export default class ToolbarButton extends Model { defaults() { return { command: '', diff --git a/src/dom_components/model/types.ts b/src/dom_components/model/types.ts index ff9e7f012..bcc5de83c 100644 --- a/src/dom_components/model/types.ts +++ b/src/dom_components/model/types.ts @@ -7,6 +7,7 @@ import { ResizerOptions } from '../../utils/Resizer'; import { DomComponentsConfig } from '../config/config'; import Component from './Component'; import Components from './Components'; +import { ToolbarButtonProps } from './ToolbarButton'; export type DragMode = 'translate' | 'absolute'; @@ -152,12 +153,13 @@ export interface ComponentProperties { * @defaultValue [] */ propagate?: (keyof ComponentProperties)[]; + /** - * 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`). - */ - toolbar?: object[]; + * 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`). + */ + toolbar?: ToolbarButtonProps[]; ///** // * Children components. Default: `null` // */ @@ -182,6 +184,7 @@ export interface ComponentDefinition extends Omit | string)[]; + attributes?: Record; [key: string]: unknown; }