UIfiled & hotkey

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;

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;

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"

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<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>
+    );
+  }
+}
+
+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>
+    );
+  }
+}

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;
+    const { type, ...rest } = this.props;
-
+    if (type === 'popup') {
-    return (
+      return <PopupField {...rest} />;
-      <div ref={shell => (this.shell = shell)} className={classNames('lc-field lc-inline-field', className)}>
+    }
-        {title && (
+    return <CommonField {...rest} />;
-          <div className="lc-field-head">
-            <div className="lc-field-title">
-              <Title title={title} />
-            </div>
-          </div>
-        )}
-        <div className="lc-field-body">{children}</div>
-      </div>
-    );
   }
 }
 

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({
+        this.popup(
+          {
             ...props,
             actionKey,
             content: sendContent,
             title: sendTitle,
-        }, target);
+          },
+          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>
     );
   }

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(),

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",

packages/vision-polyfill/src/bak/vision copy.ts

@@ -18,16 +18,24 @@ const VEOldAPIs = {
    * Core UI Components
    */
   ui: {
+    // FIELD_TYPE_MAP
     Field: {
-      SettingField,
+      // SettingField,
-      Stage,
+      // Stage,
-      CaptionField,
+      // CaptionField,
-      PopupField,
+      // PopupField,
-      EntryField,
+      // EntryField,
+      // AccordionField,
+      // BlockField,
+      // InlineField,
+      // PlainField
       AccordionField,
-      BlockField,
       InlineField,
-      PlainField
+      BlockField,
+      CaptionField, // 不支持 variableSwitcher 版的 BlockField
+      PlainField, // 不渲染 title 的 InlineField
+      EntryField,
+      PopupField,
     },
     Icon: Icons,
     Icons,

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?(
+  mutator?(this: Prop, value: any, hotValue: any, preValue: any, preHotValue: any): void;
-    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?(
+  transformer?(toHotValue: (data: any) => any, toViewValue: (str: string) => any): any;
-    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?:
+  position?: 'top' | 'bottom' | { [key in 'before' | 'after']: { prop: string; value: any } };
-    | 'top'
-    | 'bottom'
-    | { [key in 'before' | 'after']: { prop: string; value: any } };
 }
 
 export interface SettingFieldConfig {
@@ -325,9 +315,7 @@ export interface ISnippet {
   schema: any;
 }
 
-function toPropConfig(
+function toPropConfig(configure: Array<SettingFieldConfig | SettingGroupConfig>): IPropConfig[] {
-  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(
+export function setPackages(packages: Array<{ package: string; library: object | string }>) {
-  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(
+function toOlderSpec(options: ComponentDecoratorSpec): IComponentPrototypeConfigure {
-  options: ComponentDecoratorSpec,
-): IComponentPrototypeConfigure {
   const uri = options.uri || npmToURI(options.npm);
   const spec: any = {
     packageName: options.npm ? options.npm.package : '',
-    category:
+    category: options.category || (Array.isArray(options.tags) ? options.tags[0] : options.tags),
-      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 =
+        spec.canDropTo = options.configure.component.nestingRule.parentWhitelist;
-          options.configure.component.nestingRule.parentWhitelist;
       }
     }
   }
@@ -526,10 +507,7 @@ function toOlderSpec(
 function isNewSpec(options: any): options is ComponentDecoratorSpec {
   return (
     options &&
-    (options.npm ||
+    (options.npm || options.props || (options.configure && (options.configure.props || options.configure.component)))
-      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?:
+  canResizing?: ((dragment: Node, triggerDirection: string) => boolean) | boolean;
-    | ((dragment: Node, triggerDirection: string) => boolean)
+  onResizeStart?: (e: MouseEvent, triggerDirection: string, dragment: Node) => void;
-    | boolean;
+  onResize?: (e: MouseEvent, triggerDirection: string, dragment: Node, moveX: number, moveY: number) => void;
-  onResizeStart?: (
+  onResizeEnd?: (e: MouseEvent, triggerDirection: string, dragment: Node) => void;
-    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;
+  static addGlobalNodeCanDragConfig = addGlobalNodeCanDragConfig;
-  public static addGlobalPropsReducer = addGlobalPropsReducer;
+  static addGlobalPropsReducer = addGlobalPropsReducer;
-  public static addGlobalPropsConfigure = addGlobalPropsConfigure;
+  static addGlobalPropsConfigure = addGlobalPropsConfigure;
-  public static addGlobalExtraActions = addGlobalExtraActions;
+  static addGlobalExtraActions = addGlobalExtraActions;
-  public static removeGlobalPropsConfigure = removeGlobalPropsConfigure;
+  static removeGlobalPropsConfigure = removeGlobalPropsConfigure;
-  public static overridePropsConfigure = overridePropsConfigure;
+  static overridePropsConfigure = overridePropsConfigure;
-  public static create = function create(
+  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 =
+      const draggable = this.options.canDragging === false || this.options.canDraging === false ? false : true;
-        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() {
+  canUseCondition() {
-    return this.options.canUseCondition != null
+    return this.options.canUseCondition != null ? this.options.canUseCondition : true;
-      ? 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 =
+    const oCanDropTo = this.options.canDropTo != null ? this.options.canDropTo : this.options.canDropto;
-      this.options.canDropTo != null
-        ? this.options.canDropTo
-        : this.options.canDropto;
     if (oCanDropTo != null) {
       return this.xcan(oCanDropTo, container);
     }
     return true;
   }
 
-  public canDropIn(dragment: Node) {
+  canDropIn(dragment: Node) {
-    const oCanDropIn =
+    const oCanDropIn = this.options.canDropIn != null ? this.options.canDropIn : this.options.canDroping;
-      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(
+  private xcan(ocan: ((dragment: Node) => boolean) | string | string[], placement: Node): boolean;
-    ocan: ((dragment: Node) => boolean) | string | string[],
-    placement: Node,
-  ): boolean;
   private xcan(ocan: any, placement: Node): boolean {
     const t = typeof ocan;
     if (t === 'function') {

packages/vision-polyfill/src/hotkey.ts

@@ -0,0 +1,3 @@
+import { hotkey } from '@ali/lowcode-designer';
+
+export default hotkey;

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);