From 097d61f7ed9afcef1e73be93ac1f74b8acb8847d Mon Sep 17 00:00:00 2001 From: "wangying.jwy" Date: Mon, 20 Apr 2020 14:24:20 +0800 Subject: [PATCH] UIfiled & hotkey --- packages/designer/src/designer/hotkey.ts | 7 +- packages/editor-core/src/editor.ts | 2 +- packages/plugin-settings-pane/package.json | 1 + .../plugin-settings-pane/src/field/fields.tsx | 130 ++++++++++++ .../plugin-settings-pane/src/field/index.tsx | 42 +--- .../plugin-settings-pane/src/popup/index.tsx | 23 +- .../src/settings-pane.tsx | 10 +- packages/vision-polyfill/package.json | 1 + .../vision-polyfill/src/bak/vision copy.ts | 22 +- .../vision-polyfill/src/bundle/prototype.ts | 196 +++++++----------- packages/vision-polyfill/src/hotkey.ts | 3 + .../vision-polyfill/src/skeleton/skeleton.ts | 29 ++- 12 files changed, 271 insertions(+), 195 deletions(-) create mode 100644 packages/plugin-settings-pane/src/field/fields.tsx create mode 100644 packages/vision-polyfill/src/hotkey.ts diff --git a/packages/designer/src/designer/hotkey.ts b/packages/designer/src/designer/hotkey.ts index a77c64a9e..fd948f6fc 100644 --- a/packages/designer/src/designer/hotkey.ts +++ b/packages/designer/src/designer/hotkey.ts @@ -16,7 +16,7 @@ hotkey.bind(['backspace', 'del'], (e: KeyboardEvent) => { const sel = doc.selection; const topItems = sel.getTopNodes(); // TODO: check can remove - topItems.forEach(node => { + topItems.forEach((node) => { doc.removeNode(node); }); sel.clear(); @@ -54,7 +54,7 @@ hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => { if (!selected || selected.length < 1) return; const componentsMap = {}; - const componentsTree = selected.map(item => item.export(false)); + const componentsTree = selected.map((item) => item.export(false)); const data = { type: 'nodeSchema', componentsMap, componentsTree }; @@ -84,14 +84,13 @@ hotkey.bind(['command+v', 'ctrl+v'], (e) => { } const nodes = insertChildren(target, componentsTree, index); if (nodes) { - doc.selection.selectAll(nodes.map(o => o.id)); + doc.selection.selectAll(nodes.map((o) => o.id)); setTimeout(() => designer.activeTracker.track(nodes[0]), 10); } } }); }); - // command + z undo hotkey.bind(['command+z', 'ctrl+z'], (e) => { const his = focusing.focusDesigner?.currentHistory; diff --git a/packages/editor-core/src/editor.ts b/packages/editor-core/src/editor.ts index 7cf2f1344..b3c352633 100644 --- a/packages/editor-core/src/editor.ts +++ b/packages/editor-core/src/editor.ts @@ -25,7 +25,7 @@ export interface HooksFuncs { [idx: number]: (msg: string, handler: (...args: []) => void) => void; } -export type KeyType = Function | Symbol | string; +export type KeyType = Function | symbol | string; export type ClassType = Function | (new (...args: any[]) => any); export interface GetOptions { forceNew?: boolean; diff --git a/packages/plugin-settings-pane/package.json b/packages/plugin-settings-pane/package.json index 6f87d8a08..e65167978 100644 --- a/packages/plugin-settings-pane/package.json +++ b/packages/plugin-settings-pane/package.json @@ -18,6 +18,7 @@ "@ali/lowcode-editor-core": "^0.8.5", "@ali/lowcode-globals": "^0.9.2", "@ali/lowcode-plugin-outline-pane": "^0.8.8", + "@ali/ve-stage-box": "^4.0.0", "@alifd/next": "^1.19.16", "classnames": "^2.2.6", "react": "^16" diff --git a/packages/plugin-settings-pane/src/field/fields.tsx b/packages/plugin-settings-pane/src/field/fields.tsx new file mode 100644 index 000000000..d1094958e --- /dev/null +++ b/packages/plugin-settings-pane/src/field/fields.tsx @@ -0,0 +1,130 @@ +import { Component } from 'react'; +import classNames from 'classnames'; +import { Icon } from '@alifd/next'; +import { Title, TitleContent } from '@ali/lowcode-globals'; +import './index.less'; +import { PopupPipe, PopupContext } from '../popup'; + +export interface FieldProps { + className?: string; + // span + title?: TitleContent | null; +} + +export class CommonField extends Component { + private shell: HTMLDivElement | null = null; + + private checkIsBlockField() { + if (this.shell) { + const setter = this.shell.lastElementChild!.firstElementChild; + if (setter && setter.classList.contains('lc-block-setter')) { + this.shell.classList.add('lc-block-field'); + this.shell.classList.remove('lc-inline-field'); + } else { + this.shell.classList.remove('lc-block-field'); + this.shell.classList.add('lc-inline-field'); + } + } + } + componentDidUpdate() { + this.checkIsBlockField(); + } + componentDidMount() { + this.checkIsBlockField(); + } + + render() { + const { className, children, title } = this.props; + return ( +
(this.shell = shell)} className={classNames('lc-field lc-inline-field', className)}> + {title && ( +
+
+ + </div> + </div> + )} + <div className="lc-field-body">{children}</div> + </div> + ); + } +} + +export interface PopupFieldProps extends FieldProps { + width?: number; +} + +export class PopupField extends Component<PopupFieldProps> { + static contextType = PopupContext; + private pipe: any; + + static defaultProps: PopupFieldProps = { + width: 300, + }; + + render() { + const { className, children, title, width } = this.props; + if (!this.pipe) { + this.pipe = (this.context as PopupPipe).create({ width }); + } + + const titleElement = title && ( + <div className="lc-field-title"> + <Title title={title} /> + </div> + ); + + this.pipe.send(<div className="lc-field-body">{children}</div>, titleElement); + + return ( + <div className={classNames('lc-field lc-popup-field', className)}> + {title && ( + <div + className="lc-field-head" + onClick={(e) => { + this.pipe.show((e as any).target); + }} + > + <div className="lc-field-title"> + <Title title={title} /> + </div> + <Icon className="lc-field-icon" type="arrow-left" size="xs" /> + </div> + )} + </div> + ); + } +} + +export type EntryFieldProps = FieldProps; + +export class EntryField extends Component<EntryFieldProps> { + constructor(props: any) { + super(props); + } + + render() { + const { propName, stageName, tip, title, className } = this.props; + const classNameList = classNames('engine-setting-field', 'engine-entry-field', className); + const fieldProps: any = {}; + + if (stageName) { + // 为 stage 切换奠定基础 + fieldProps['data-stage-target'] = stageName; + } + + const innerElements = [ + <span className="engine-field-title" key="field-title"> + {title} + </span>, + renderTip(tip, { propName }), + <Icons name="arrow" className="engine-field-arrow" size="12px" key="engine-field-arrow-icon" />, + ]; + + return ( + <div className={classNameList} {...fieldProps}> + {innerElements} + </div> + ); + } +} diff --git a/packages/plugin-settings-pane/src/field/index.tsx b/packages/plugin-settings-pane/src/field/index.tsx index 4afc13e1a..d51449ebf 100644 --- a/packages/plugin-settings-pane/src/field/index.tsx +++ b/packages/plugin-settings-pane/src/field/index.tsx @@ -3,50 +3,22 @@ import classNames from 'classnames'; import { Icon } from '@alifd/next'; import { Title, TitleContent } from '@ali/lowcode-globals'; import './index.less'; +import { CommonField, PopupField } from './fields'; export interface FieldProps { className?: string; // span title?: TitleContent | null; + type?: string; } export class Field extends Component<FieldProps> { - private shell: HTMLDivElement | null = null; - - private checkIsBlockField() { - if (this.shell) { - const setter = this.shell.lastElementChild!.firstElementChild; - if (setter && setter.classList.contains('lc-block-setter')) { - this.shell.classList.add('lc-block-field'); - this.shell.classList.remove('lc-inline-field'); - } else { - this.shell.classList.remove('lc-block-field'); - this.shell.classList.add('lc-inline-field'); - } - } - } - componentDidUpdate() { - this.checkIsBlockField(); - } - componentDidMount() { - this.checkIsBlockField(); - } - render() { - const { className, children, title } = this.props; - - return ( - <div ref={shell => (this.shell = shell)} className={classNames('lc-field lc-inline-field', className)}> - {title && ( - <div className="lc-field-head"> - <div className="lc-field-title"> - <Title title={title} /> - </div> - </div> - )} - <div className="lc-field-body">{children}</div> - </div> - ); + const { type, ...rest } = this.props; + if (type === 'popup') { + return <PopupField {...rest} />; + } + return <CommonField {...rest} />; } } diff --git a/packages/plugin-settings-pane/src/popup/index.tsx b/packages/plugin-settings-pane/src/popup/index.tsx index 1c13a9b3b..503e986f9 100644 --- a/packages/plugin-settings-pane/src/popup/index.tsx +++ b/packages/plugin-settings-pane/src/popup/index.tsx @@ -28,12 +28,15 @@ export class PopupPipe { }, show: (target: Element, actionKey?: string) => { this.currentId = id; - this.popup({ - ...props, - actionKey, - content: sendContent, - title: sendTitle, - }, target); + this.popup( + { + ...props, + actionKey, + content: sendContent, + title: sendTitle, + }, + target, + ); }, }; } @@ -121,7 +124,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> { safeNode={id} visible={visible} style={{ width }} - onVisibleChange={visible => { + onVisibleChange={(visible) => { if (avoidLaterHidden) { return; } @@ -136,7 +139,11 @@ export class PopupContent extends PureComponent<{ safeId?: string }> { shouldUpdatePosition > <div className="lc-ballon-title">{title}</div> - <div className="lc-ballon-content"><PopupService actionKey={actionKey} safeId={id}>{content}</PopupService></div> + <div className="lc-ballon-content"> + <PopupService actionKey={actionKey} safeId={id}> + {content} + </PopupService> + </div> </Balloon> ); } diff --git a/packages/plugin-settings-pane/src/settings-pane.tsx b/packages/plugin-settings-pane/src/settings-pane.tsx index 516129049..38ff8f744 100644 --- a/packages/plugin-settings-pane/src/settings-pane.tsx +++ b/packages/plugin-settings-pane/src/settings-pane.tsx @@ -7,10 +7,10 @@ import { shallowIntl, isSetterConfig, createSetterContent, - shallowEqual + shallowEqual, } from '@ali/lowcode-globals'; import { SettingField, isSettingField, SettingTarget } from './main'; -import { Field, FieldGroup } from './field'; +import { Field, FieldGroup, PopupField } from './field'; import PopupService from './popup'; class SettingFieldView extends Component<{ field: SettingField }> { @@ -34,7 +34,7 @@ class SettingFieldView extends Component<{ field: SettingField }> { } else if (setter) { this.setterType = setter; } - let firstRun: boolean = true; + let firstRun = true; this.dispose = field.onEffect(() => { const state: any = {}; const { extraProps } = field; @@ -133,7 +133,7 @@ class SettingGroupView extends Component<{ field: SettingField }> { super(props); const { field } = this.props; const { condition } = field.extraProps; - let firstRun: boolean = true; + let firstRun = true; this.dispose = field.onEffect(() => { const state: any = {}; state.visible = field.isOne && typeof condition === 'function' ? !condition(field) : true; @@ -200,7 +200,7 @@ export default class SettingsPane extends Component<{ target: SettingTarget }> { super(props); const { target } = this.props; - let firstRun: boolean = true; + let firstRun = true; this.dispose = target.onEffect(() => { const state = { items: target.items.slice(), diff --git a/packages/vision-polyfill/package.json b/packages/vision-polyfill/package.json index 07f0aef58..aacc861b2 100644 --- a/packages/vision-polyfill/package.json +++ b/packages/vision-polyfill/package.json @@ -29,6 +29,7 @@ "@ali/vu-logger": "^1.0.7", "@ali/vu-style-sheet": "^2.4.0", "@alifd/next": "^1.19.12", + "@ali/ve-stage-box": "^4.0.0", "@alife/theme-lowcode-dark": "^0.1.0", "@alife/theme-lowcode-light": "^0.1.0", "react": "^16.8.1", diff --git a/packages/vision-polyfill/src/bak/vision copy.ts b/packages/vision-polyfill/src/bak/vision copy.ts index cd556c087..fad94157b 100644 --- a/packages/vision-polyfill/src/bak/vision copy.ts +++ b/packages/vision-polyfill/src/bak/vision copy.ts @@ -18,16 +18,24 @@ const VEOldAPIs = { * Core UI Components */ ui: { + // FIELD_TYPE_MAP Field: { - SettingField, - Stage, - CaptionField, - PopupField, - EntryField, + // SettingField, + // Stage, + // CaptionField, + // PopupField, + // EntryField, + // AccordionField, + // BlockField, + // InlineField, + // PlainField AccordionField, - BlockField, InlineField, - PlainField + BlockField, + CaptionField, // 不支持 variableSwitcher 版的 BlockField + PlainField, // 不渲染 title 的 InlineField + EntryField, + PopupField, }, Icon: Icons, Icons, diff --git a/packages/vision-polyfill/src/bundle/prototype.ts b/packages/vision-polyfill/src/bundle/prototype.ts index 768aee46f..8f308907b 100644 --- a/packages/vision-polyfill/src/bundle/prototype.ts +++ b/packages/vision-polyfill/src/bundle/prototype.ts @@ -93,7 +93,9 @@ const GlobalPropsConfigure: IGlobalPropConfig[] = [ }, ], disabled() { - const proto = this.getProps().getNode().getPrototype(); + const proto = this.getProps() + .getNode() + .getPrototype(); if (!proto) { return true; } @@ -226,13 +228,7 @@ export interface IPropConfig { /** * when current prop value mutate, the mutator function shall be called */ - mutator?( - this: Prop, - value: any, - hotValue: any, - preValue: any, - preHotValue: any, - ): void; + mutator?(this: Prop, value: any, hotValue: any, preValue: any, preHotValue: any): void; /** * other values' change will trigger sync function here */ @@ -242,10 +238,7 @@ export interface IPropConfig { * @param toHotValue hot value for the setter * @param toViewValue static value for the view */ - transformer?( - toHotValue: (data: any) => any, - toViewValue: (str: string) => any, - ): any; + transformer?(toHotValue: (data: any) => any, toViewValue: (str: string) => any): any; /** * user click var to change current field to * variable setting field @@ -254,10 +247,7 @@ export interface IPropConfig { } export interface IGlobalPropConfig extends IPropConfig { - position?: - | 'top' - | 'bottom' - | { [key in 'before' | 'after']: { prop: string; value: any } }; + position?: 'top' | 'bottom' | { [key in 'before' | 'after']: { prop: string; value: any } }; } export interface SettingFieldConfig { @@ -325,9 +315,7 @@ export interface ISnippet { schema: any; } -function toPropConfig( - configure: Array<SettingFieldConfig | SettingGroupConfig>, -): IPropConfig[] { +function toPropConfig(configure: Array<SettingFieldConfig | SettingGroupConfig>): IPropConfig[] { if (!configure) { return []; } @@ -364,9 +352,7 @@ function accessLibrary(library: string | object) { return (window as any)[library]; } -export function setPackages( - packages: Array<{ package: string; library: object | string }>, -) { +export function setPackages(packages: Array<{ package: string; library: object | string }>) { packages.forEach((item) => { let lib: any; if (packageMaps.hasOwnProperty(item.package)) { @@ -477,15 +463,11 @@ function npmToURI(npm: { return uri; } -function toOlderSpec( - options: ComponentDecoratorSpec, -): IComponentPrototypeConfigure { +function toOlderSpec(options: ComponentDecoratorSpec): IComponentPrototypeConfigure { const uri = options.uri || npmToURI(options.npm); const spec: any = { packageName: options.npm ? options.npm.package : '', - category: - options.category || - (Array.isArray(options.tags) ? options.tags[0] : options.tags), + category: options.category || (Array.isArray(options.tags) ? options.tags[0] : options.tags), componentName: options.componentName, docUrl: options.docUrl, defaultProps: {}, @@ -514,8 +496,7 @@ function toOlderSpec( spec.canDropIn = options.configure.component.nestingRule.childWhitelist; } if (options.configure.component.nestingRule.parentWhitelist) { - spec.canDropTo = - options.configure.component.nestingRule.parentWhitelist; + spec.canDropTo = options.configure.component.nestingRule.parentWhitelist; } } } @@ -526,10 +507,7 @@ function toOlderSpec( function isNewSpec(options: any): options is ComponentDecoratorSpec { return ( options && - (options.npm || - options.props || - (options.configure && - (options.configure.props || options.configure.component))) + (options.npm || options.props || (options.configure && (options.configure.props || options.configure.component))) ); } @@ -602,26 +580,10 @@ export declare interface IComponentPrototypeConfigure { didDropOut?: (container: any | Prototype, dragment: any) => boolean; didDropIn?: (container: any | Prototype, dragment: any) => boolean; - canResizing?: - | ((dragment: Node, triggerDirection: string) => boolean) - | boolean; - onResizeStart?: ( - e: MouseEvent, - triggerDirection: string, - dragment: Node, - ) => void; - onResize?: ( - e: MouseEvent, - triggerDirection: string, - dragment: Node, - moveX: number, - moveY: number, - ) => void; - onResizeEnd?: ( - e: MouseEvent, - triggerDirection: string, - dragment: Node, - ) => void; + canResizing?: ((dragment: Node, triggerDirection: string) => boolean) | boolean; + onResizeStart?: (e: MouseEvent, triggerDirection: string, dragment: Node) => void; + onResize?: (e: MouseEvent, triggerDirection: string, dragment: Node, moveX: number, moveY: number) => void; + onResizeEnd?: (e: MouseEvent, triggerDirection: string, dragment: Node) => void; /** * when sub-node of the current node changed @@ -635,13 +597,13 @@ export interface IComponentPrototypeExtraConfigs { } class Prototype { - public static addGlobalNodeCanDragConfig = addGlobalNodeCanDragConfig; - public static addGlobalPropsReducer = addGlobalPropsReducer; - public static addGlobalPropsConfigure = addGlobalPropsConfigure; - public static addGlobalExtraActions = addGlobalExtraActions; - public static removeGlobalPropsConfigure = removeGlobalPropsConfigure; - public static overridePropsConfigure = overridePropsConfigure; - public static create = function create( + static addGlobalNodeCanDragConfig = addGlobalNodeCanDragConfig; + static addGlobalPropsReducer = addGlobalPropsReducer; + static addGlobalPropsConfigure = addGlobalPropsConfigure; + static addGlobalExtraActions = addGlobalExtraActions; + static removeGlobalPropsConfigure = removeGlobalPropsConfigure; + static overridePropsConfigure = overridePropsConfigure; + static create = function create( options: IComponentPrototypeConfigure | ComponentDecoratorSpec, extraConfigs: IComponentPrototypeExtraConfigs = {}, ) { @@ -659,7 +621,7 @@ class Prototype { * is this prototype auto-generated by prototypeMocker * from a normal VIEW file (React Component Class) */ - private autoGenerated: boolean = false; + private autoGenerated = false; constructor( options: IComponentPrototypeConfigure | ComponentDecoratorSpec, @@ -676,50 +638,50 @@ class Prototype { } } - public getId() { + getId() { return this.id; } - public getUri() { + getUri() { return this.options.uri; } - public getConfig(configName?: keyof IComponentPrototypeConfigure) { + getConfig(configName?: keyof IComponentPrototypeConfigure) { if (configName) { return this.options[configName]; } return this.options; } - public getPackageName() { + getPackageName() { return this.packageName || this.options.packageName; } - public getContextInfo(name?: string): any { + getContextInfo(name?: string): any { return name ? get(this.options, ['context', name], '') : this.options; } - public getTitle() { + getTitle() { return this.options.title || this.getComponentName(); } - public getComponentName() { + getComponentName() { return this.componentName || this.options.componentName || null; } - public getDocUrl() { + getDocUrl() { return this.options.docUrl; } - public getDefaultProps() { + getDefaultProps() { return this.options.defaultProps || {}; } - public getPropConfigs() { + getPropConfigs() { return this.options; } - public getExtraActions() { + getExtraActions() { let extraActions = this.options.extraActions; if (!extraActions) { return GlobalExtraActions; @@ -730,7 +692,7 @@ class Prototype { return [...GlobalExtraActions, ...extraActions]; } - public getCategory() { + getCategory() { if (this.category !== undefined) { return this.category; } @@ -740,31 +702,31 @@ class Prototype { return '*'; } - public hasSlot() { + hasSlot() { return this.options.hasSlot; } - public setCategory(category: string) { + setCategory(category: string) { this.category = category; } - public getIcon() { + getIcon() { return this.options.icon || ''; } - public setView(view: ComponentClass) { + setView(view: ComponentClass) { this.view = view; } - public getView() { + getView() { return this.view || this.options.view || null; } - public getInitialChildren() { + getInitialChildren() { return this.options.initialChildren || null; } - public getConfigure() { + getConfigure() { let res = (this.options.configure || []).slice(); GlobalPropsConfigure.forEach((config) => { const position = config.position || 'bottom'; @@ -810,45 +772,45 @@ class Prototype { return res; } - public getRectSelector() { + getRectSelector() { return this.options.rectSelector; } - public isInline() { + isInline() { return this.options.isInline != null ? this.options.isInline : null; } - public isContainer() { + isContainer() { if (isFunction(this.options.isContainer)) { return (this.options.isContainer as any)(this); } return this.options.isContainer != null ? this.options.isContainer : false; } - public isModal() { + isModal() { return this.options.isModal || false; } - public isFloating() { + isFloating() { return this.options.isFloating || false; } - public isAutoGenerated() { + isAutoGenerated() { return this.autoGenerated; } - public setPackageName(name: string) { + setPackageName(name: string) { this.packageName = name; } - public setComponentName(componentName: string) { + setComponentName(componentName: string) { this.componentName = componentName; } /** * transform value from hot-value to view */ - public reduce(props: any) { + reduce(props: any) { let reducers = this.options.reducers || []; if (!Array.isArray(reducers)) { @@ -871,7 +833,7 @@ class Prototype { return props; } - public transformToActive(props: any) { + transformToActive(props: any) { let transducers = this.options.transducers; if (!transducers) { return props; @@ -888,7 +850,7 @@ class Prototype { return props; } - public transformToStatic(props: any) { + transformToStatic(props: any) { let transducers = this.options.transducers; if (!transducers) { return props; @@ -905,12 +867,9 @@ class Prototype { return props; } - public canDragging(node?: Node) { + canDragging(node?: Node) { if (this.canSelecting()) { - const draggable = - this.options.canDragging === false || this.options.canDraging === false - ? false - : true; + const draggable = this.options.canDragging === false || this.options.canDraging === false ? false : true; if (GlobalNodeCanDragConfig.length > 0) { if (!flow(GlobalNodeCanDragConfig)(node)) { return false; @@ -924,73 +883,65 @@ class Prototype { return false; } - public canHovering() { + canHovering() { return this.options.canHovering != null ? this.options.canHovering : true; } - public canSelecting() { + canSelecting() { return this.options.canSelecting != null ? this.options.canSelecting : true; } - public canOperating() { + canOperating() { return this.options.canOperating != null ? this.options.canOperating : true; } - public canSetting() { + canSetting() { return this.canSelecting(); } - public canUseCondition() { - return this.options.canUseCondition != null - ? this.options.canUseCondition - : true; + canUseCondition() { + return this.options.canUseCondition != null ? this.options.canUseCondition : true; } - public canLoop() { + canLoop() { return this.options.canLoop != null ? this.options.canLoop : true; } - public canDropTo(container: Node) { + canDropTo(container: Node) { if (!this.canDragging()) { return false; } - const oCanDropTo = - this.options.canDropTo != null - ? this.options.canDropTo - : this.options.canDropto; + const oCanDropTo = this.options.canDropTo != null ? this.options.canDropTo : this.options.canDropto; if (oCanDropTo != null) { return this.xcan(oCanDropTo, container); } return true; } - public canDropIn(dragment: Node) { - const oCanDropIn = - this.options.canDropIn != null - ? this.options.canDropIn - : this.options.canDroping; + canDropIn(dragment: Node) { + const oCanDropIn = this.options.canDropIn != null ? this.options.canDropIn : this.options.canDroping; if (oCanDropIn != null) { return this.xcan(oCanDropIn, dragment); } return true; } - public didDropIn(dragment: Node, container: any) { + didDropIn(dragment: Node, container: any) { const fn = this.options.didDropIn; if (typeof fn === 'function') { fn.call(container || this, dragment); } } - public didDropOut(dragment: Node, container: any) { + didDropOut(dragment: Node, container: any) { const fn = this.options.didDropOut; if (typeof fn === 'function') { fn.call(container || this, dragment); } } - public canContain(dragment: Node) { + canContain(dragment: Node) { const oCanContain = this.options.canContain; if (oCanContain != null) { return this.xcan(oCanContain, dragment); @@ -998,14 +949,11 @@ class Prototype { return true; } - public clone(options: IComponentPrototypeConfigure) { + clone(options: IComponentPrototypeConfigure) { return new Prototype(assign({}, this.options, options || {})); } - private xcan( - ocan: ((dragment: Node) => boolean) | string | string[], - placement: Node, - ): boolean; + private xcan(ocan: ((dragment: Node) => boolean) | string | string[], placement: Node): boolean; private xcan(ocan: any, placement: Node): boolean { const t = typeof ocan; if (t === 'function') { diff --git a/packages/vision-polyfill/src/hotkey.ts b/packages/vision-polyfill/src/hotkey.ts new file mode 100644 index 000000000..359500ed5 --- /dev/null +++ b/packages/vision-polyfill/src/hotkey.ts @@ -0,0 +1,3 @@ +import { hotkey } from '@ali/lowcode-designer'; + +export default hotkey; diff --git a/packages/vision-polyfill/src/skeleton/skeleton.ts b/packages/vision-polyfill/src/skeleton/skeleton.ts index 6672a4f9d..ebc0996ca 100644 --- a/packages/vision-polyfill/src/skeleton/skeleton.ts +++ b/packages/vision-polyfill/src/skeleton/skeleton.ts @@ -149,11 +149,11 @@ export class Skeleton { return; } Object.keys(plugins).forEach((area) => { - plugins[area].forEach(item => { + plugins[area].forEach((item) => { const { pluginKey, type, props = {}, pluginProps } = item; const config: any = { area, - type: "Widget", + type: 'Widget', name: pluginKey, contentProps: pluginProps, }; @@ -181,7 +181,7 @@ export class Skeleton { } this.add(config); }); - }) + }); } postEvent(event: SkeletonEvents, ...args: any[]) { @@ -218,9 +218,9 @@ export class Skeleton { createContainer( name: string, handle: (item: any) => any, - exclusive: boolean = false, + exclusive = false, checkVisible: () => boolean = () => true, - defaultSetCurrent: boolean = false, + defaultSetCurrent = false, ) { const container = new WidgetContainer(name, handle, exclusive, checkVisible, defaultSetCurrent); this.containers.set(name, container); @@ -231,7 +231,7 @@ export class Skeleton { const { content, ...restConfig } = config; if (content) { if (typeof content === 'object' && !isValidElement(content)) { - Object.keys(content).forEach(key => { + Object.keys(content).forEach((key) => { if (/props$/i.test(key) && restConfig[key]) { restConfig[key] = { ...restConfig[key], @@ -247,17 +247,24 @@ export class Skeleton { } const { area } = restConfig; switch (area) { - case 'leftArea': case 'left': + case 'leftArea': + case 'left': return this.leftArea.add(restConfig as any); - case 'rightArea': case 'right': + case 'rightArea': + case 'right': return this.rightArea.add(restConfig as any); - case 'topArea': case 'top': + case 'topArea': + case 'top': return this.topArea.add(restConfig as any); case 'toolbar': return this.toolbar.add(restConfig as any); - case 'mainArea': case 'main': case 'center': case 'centerArea': + case 'mainArea': + case 'main': + case 'center': + case 'centerArea': return this.mainArea.add(restConfig as any); - case 'bottomArea': case 'bottom': + case 'bottomArea': + case 'bottom': return this.bottomArea.add(restConfig as any); case 'leftFixedArea': return this.leftFixedArea.add(restConfig as any);