joint bind dialog

packages/vision-polyfill/src/demo/index.ts

@@ -1,16 +1,126 @@
 // @ts-ignore
+import { createElement } from 'react';
+import { Button } from '@alifd/next';
 import Engine, { Panes } from '@ali/visualengine';
 import getTrunkPane from '@ali/ve-trunk-pane';
+import Preview from '@ali/lowcode-plugin-sample-preview';
+import SourceEditor from '@ali/lowcode-plugin-source-editor';
+import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import loadUrls from './loader';
 import { upgradeAssetsBundle } from './upgrade-assets';
 
-const { editor } = Engine;
+const { editor, skeleton } = Engine;
+
+// demo
+skeleton.add({
+  name: 'eventBindDialog',
+  type: 'Widget',
+  content: EventBindDialog,
+});
+skeleton.add({
+  name: 'sourceEditor',
+  type: 'PanelDock',
+  props: {
+    align: 'top',
+    icon: 'code',
+    description: '组件库',
+  },
+  panelProps: {
+    width: 500
+    // area: 'leftFixedArea'
+  },
+  content: SourceEditor,
+});
+skeleton.add({
+  area: 'leftArea',
+  name: 'icon1',
+  type: 'Dock',
+  props: {
+    align: 'bottom',
+    icon: 'set',
+    description: '设置',
+  },
+});
+skeleton.add({
+  area: 'leftArea',
+  name: 'icon2',
+  type: 'Dock',
+  props: {
+    align: 'bottom',
+    icon: 'help',
+    description: '帮助',
+  },
+});
+
+skeleton.add({
+  area: 'topArea',
+  type: 'Dock',
+  name: 'preview',
+  props: {
+    align: 'right',
+  },
+  content: Preview,
+});
+skeleton.add({
+  area: 'topArea',
+  type: 'Dock',
+  name: 'publish',
+  props: {
+    align: 'right',
+  },
+  content: createElement(Button, {
+    size: 'small',
+    type: 'secondary',
+    children: '发布',
+  }),
+});
+skeleton.add({
+  area: 'topArea',
+  type: 'Dock',
+  name: 'save',
+  props: {
+    align: 'right',
+  },
+  content: createElement(Button, {
+    size: 'small',
+    type: 'primary',
+    children: '保存',
+  }),
+});
+skeleton.add({
+  area: 'topArea',
+  type: 'Dock',
+  name: 'preview4',
+  props: {
+    align: 'center',
+  },
+  content: createElement('img', {
+    src: 'https://img.alicdn.com/tfs/TB1WW.VC.z1gK0jSZLeXXb9kVXa-486-64.png',
+    style: {
+      height: 32,
+    },
+  }),
+});
+skeleton.add({
+  area: 'topArea',
+  type: 'Dock',
+  name: 'preview1',
+  props: {
+    align: 'left',
+  },
+  content: createElement('img', {
+    src: 'https://img.alicdn.com/tfs/TB1zqBfDlr0gK0jSZFnXXbRRXXa-440-64.png',
+    style: {
+      height: 32,
+    },
+  }),
+});
 
 initTrunkPane();
 Engine.init();
 
 load();
-Engine.Env.setEnv('RE_VERSION', "5.0.1");
+Engine.Env.setEnv('RE_VERSION', '5.0.1');
 
 async function load() {
   await loadAssets();

packages/vision-polyfill/src/editor.ts

@@ -2,16 +2,11 @@ import { globalContext } from '@ali/lowcode-globals';
 import Editor from '@ali/lowcode-editor-core';
 import { Designer } from '@ali/lowcode-designer';
 import { registerSetters } from '@ali/lowcode-setters';
-import Outline, { Pane } from '@ali/lowcode-plugin-outline-pane';
+import Outline from '@ali/lowcode-plugin-outline-pane';
 import SettingsPane from '@ali/lowcode-plugin-settings-pane';
 import DesignerPlugin from '@ali/lowcode-plugin-designer';
 import { Skeleton } from './skeleton/skeleton';
 
-// demo
-import Preview from '@ali/lowcode-plugin-sample-preview';
-import { createElement } from 'react';
-import { Button } from '@alifd/next';
-
 registerSetters();
 
 export const editor = new Editor();
@@ -23,101 +18,26 @@ editor.set(Skeleton, skeleton);
 export const designer = new Designer({ eventPipe: editor });
 editor.set(Designer, designer);
 
-skeleton.mainArea.add({
+skeleton.add({
+  area: 'mainArea',
   name: 'designer',
   type: 'Widget',
   content: DesignerPlugin,
 });
-skeleton.rightArea.add({
+skeleton.add({
+  area: 'rightArea',
   name: 'settingsPane',
   type: 'Panel',
   content: SettingsPane,
 });
-skeleton.leftArea.add({
+skeleton.add({
+  area: 'leftArea',
   name: 'outlinePane',
   type: 'PanelDock',
-  ...Outline,
+  content: Outline,
   panelProps: {
     area: 'leftFixedArea',
   },
 });
 
-// demo
-skeleton.leftArea.add({
-  name: 'icon1',
-  type: 'Dock',
-  props: {
-    align: 'bottom',
-    icon: 'set',
-    description: '设置',
-  }
-});
-skeleton.leftArea.add({
-  name: 'icon2',
-  type: 'Dock',
-  props: {
-    align: 'bottom',
-    icon: 'help',
-    description: '帮助',
-  }
-});
 
-skeleton.topArea.add({
-  type: "Dock",
-  name: 'preview',
-  props: {
-    align: "right",
-  },
-  content: Preview,
-});
-skeleton.topArea.add({
-  type: "Dock",
-  name: 'publish',
-  props: {
-    align: "right",
-  },
-  content: createElement(Button, {
-    size: 'small',
-    type: 'secondary',
-    children: '发布'
-  }),
-});
-skeleton.topArea.add({
-  type: "Dock",
-  name: 'save',
-  props: {
-    align: "right",
-  },
-  content: createElement(Button, {
-    size: 'small',
-    type: 'primary',
-    children: '保存'
-  }),
-});
-skeleton.topArea.add({
-  type: "Dock",
-  name: 'preview4',
-  props: {
-    align: "center",
-  },
-  content: createElement('img', {
-    src: "https://img.alicdn.com/tfs/TB1WW.VC.z1gK0jSZLeXXb9kVXa-486-64.png",
-    style: {
-      height: 32
-    }
-  }),
-});
-
-skeleton.topArea.add({
-  type: "Dock",
-  name: 'preview1',
-  props: {
-    align: "left",
-  },
-  content: createElement('img', {
-    src: "https://img.alicdn.com/tfs/TB1zqBfDlr0gK0jSZFnXXbRRXXa-440-64.png",
-    style: {
-      height: 32
-    }
-  }),
-});

packages/vision-polyfill/src/skeleton/area.ts

@@ -14,6 +14,13 @@ export default class Area<C extends IWidgetBaseConfig = any, T extends IWidget =
     return this._visible;
   }
 
+  get current() {
+    if (this.exclusive) {
+      return this.container.current;
+    }
+    return null;
+  }
+
   readonly container: WidgetContainer<T, C>;
   constructor(readonly skeleton: Skeleton, readonly name: string, handle: (item: T | C) => T, private exclusive?: boolean, defaultSetCurrent: boolean = false) {
     this.container = skeleton.createContainer(name, handle, exclusive, () => this.visible, defaultSetCurrent);

packages/vision-polyfill/src/skeleton/dock.ts

@@ -38,7 +38,7 @@ export default class Dock implements IWidget {
     if (content) {
       this._body = createContent(content, {
         ...contentProps,
-        config: this.content,
+        config: this.config,
         editor: this.skeleton.editor,
       });
     } else {
@@ -47,7 +47,7 @@ export default class Dock implements IWidget {
     return this._body;
   }
 
-  constructor(readonly skeleton: Skeleton, private config: DockConfig) {
+  constructor(readonly skeleton: Skeleton, readonly config: DockConfig) {
     const { props = {}, name } = config;
     this.name = name;
     this.align = props.align;

packages/vision-polyfill/src/skeleton/left-float-pane.tsx

@@ -31,11 +31,16 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
     // focusin set focus (push|replace)
     // focusout remove focus
     // onEsc
+    const width = area.current?.config.props?.width;
+    const style = width ? {
+      width
+    } : undefined;
     return (
       <div
         className={classNames('lc-left-float-pane', {
           'lc-area-visible': area.visible,
         })}
+        style={style}
       >
         <Button
           text

packages/vision-polyfill/src/skeleton/panel-dock.ts

@@ -52,7 +52,7 @@ export default class PanelDock implements IWidget {
     return this._panel || this.skeleton.getPanel(this.panelName);
   }
 
-  constructor(readonly skeleton: Skeleton, private config: PanelDockConfig) {
+  constructor(readonly skeleton: Skeleton, readonly config: PanelDockConfig) {
     const { content, contentProps, panelProps, name, props } = config;
     this.name = name;
     this.id = uniqueId(`dock:${name}$`);
@@ -62,13 +62,13 @@ export default class PanelDock implements IWidget {
         type: "Panel",
         name: this.panelName,
         props: {
+          // FIXME! give default title for panel
           // title: props ? composeTitle(props?.title, props?.icon, props?.description, true) : '',
           ...panelProps,
         },
         contentProps,
         content,
-        // FIXME! dirty fixed
+        area: panelProps?.area
-        area: panelProps?.area || 'leftFloatArea'
       }) as Panel;
     }
   }

packages/vision-polyfill/src/skeleton/panel.ts

@@ -49,7 +49,7 @@ export default class Panel implements IWidget {
   private container?: WidgetContainer<Panel, PanelConfig>;
   private parent?: WidgetContainer;
 
-  constructor(readonly skeleton: Skeleton, private config: PanelConfig) {
+  constructor(readonly skeleton: Skeleton, readonly config: PanelConfig) {
     const { name, content, props = {} } = config;
     const { hideTitleBar, title, icon, description, help, shortcut } = props;
     this.name = name;

packages/vision-polyfill/src/skeleton/skeleton.ts

@@ -193,10 +193,13 @@ export class Skeleton {
     if (isWidget(config)) {
       return config;
     }
+
+    config = this.parseConfig(config);
     if (isDockConfig(config)) {
       if (isPanelDockConfig(config)) {
         return new PanelDock(this, config);
       }
+      // others...
 
       return new Dock(this, config);
     }
@@ -207,6 +210,7 @@ export class Skeleton {
   }
 
   createPanel(config: PanelConfig) {
+    config = this.parseConfig(config);
     const panel = new Panel(this, config);
     this.panels.set(panel.name, panel);
     return panel;
@@ -228,7 +232,10 @@ export class Skeleton {
     return container;
   }
 
-  add(config: IWidgetBaseConfig & { area: string }) {
+  private parseConfig(config: IWidgetBaseConfig): any {
+    if ((config as any).parsed) {
+      return config;
+    }
     const { content, ...restConfig } = config;
     if (content) {
       if (isPlainObject(content) && !isValidElement(content)) {
@@ -246,33 +253,52 @@ export class Skeleton {
         restConfig.content = content;
       }
     }
-    const { area } = restConfig;
+    restConfig.pluginKey = restConfig.name;
+    restConfig.parsed = true;
+    return restConfig;
+  }
+
+  add(config: IWidgetBaseConfig & { area?: string }, extraConfig?: object) {
+    const parsedConfig: any = {
+      ...this.parseConfig(config),
+      ...extraConfig,
+    };
+    let { area } = parsedConfig;
+    if (!area) {
+      if (parsedConfig.type === 'Panel') {
+        area = 'leftFloatArea'
+      } else if (parsedConfig.type === 'Widget') {
+        area = 'mainArea';
+      } else {
+        area = 'leftArea';
+      }
+    }
     switch (area) {
       case 'leftArea':
       case 'left':
-        return this.leftArea.add(restConfig as any);
+        return this.leftArea.add(parsedConfig);
       case 'rightArea':
       case 'right':
-        return this.rightArea.add(restConfig as any);
+        return this.rightArea.add(parsedConfig);
       case 'topArea':
       case 'top':
-        return this.topArea.add(restConfig as any);
+        return this.topArea.add(parsedConfig);
       case 'toolbar':
-        return this.toolbar.add(restConfig as any);
+        return this.toolbar.add(parsedConfig);
       case 'mainArea':
       case 'main':
       case 'center':
       case 'centerArea':
-        return this.mainArea.add(restConfig as any);
+        return this.mainArea.add(parsedConfig);
       case 'bottomArea':
       case 'bottom':
-        return this.bottomArea.add(restConfig as any);
+        return this.bottomArea.add(parsedConfig);
       case 'leftFixedArea':
-        return this.leftFixedArea.add(restConfig as any);
+        return this.leftFixedArea.add(parsedConfig);
       case 'leftFloatArea':
-        return this.leftFloatArea.add(restConfig as any);
+        return this.leftFloatArea.add(parsedConfig);
       case 'stages':
-        return this.stages.add(restConfig as any);
+        return this.stages.add(parsedConfig);
     }
   }
 }

packages/vision-polyfill/src/skeleton/utils.ts

@@ -1,7 +1,7 @@
-import { IconType, TitleContent, I18nData, isI18nData } from '@ali/lowcode-globals';
+import { IconType, TitleContent, isI18nData, TipContent } from '@ali/lowcode-globals';
 import { isValidElement } from 'react';
 
-export function composeTitle(title?: TitleContent, icon?: IconType, tip?: string | I18nData, tipAsTitle?: boolean) {
+export function composeTitle(title?: TitleContent, icon?: IconType, tip?: TipContent, tipAsTitle?: boolean) {
   if (!title) {
     title = {};
     if (!icon || tipAsTitle) {

packages/vision-polyfill/src/skeleton/widget-views.tsx

@@ -120,8 +120,12 @@ export class PanelView extends Component<{ panel: Panel }> {
       this.lastVisible = currentVisible;
       if (this.lastVisible) {
         panel.skeleton.postEvent(SkeletonEvents.PANEL_SHOW, panel.name, panel);
+        // FIXME! remove this line
+        panel.skeleton.postEvent('leftPanel.show' as any, panel.name, panel);
       } else {
         panel.skeleton.postEvent(SkeletonEvents.PANEL_HIDE, panel.name, panel);
+        // FIXME! remove this line
+        panel.skeleton.postEvent('leftPanel.hide' as any, panel.name, panel);
       }
     }
   }

packages/vision-polyfill/src/skeleton/widget.ts

@@ -1,6 +1,6 @@
 import { ReactNode, createElement } from 'react';
 import { createContent, uniqueId, obx } from '@ali/lowcode-globals';
-import { WidgetConfig } from './types';
+import { WidgetConfig, IWidgetBaseConfig } from './types';
 import { Skeleton } from './skeleton';
 import { WidgetView } from './widget-views';
 
@@ -12,6 +12,7 @@ export interface IWidget {
   readonly visible: boolean;
   readonly body: ReactNode;
   readonly skeleton: Skeleton;
+  readonly config: IWidgetBaseConfig;
 
   getName(): string;
   getContent(): any;
@@ -41,6 +42,7 @@ export default class Widget implements IWidget {
     const { content, contentProps } = this.config;
     this._body = createContent(content, {
       ...contentProps,
+      config: this.config,
       editor: this.skeleton.editor,
     });
     return this._body;
@@ -53,7 +55,7 @@ export default class Widget implements IWidget {
     });
   }
 
-  constructor(readonly skeleton: Skeleton, private config: WidgetConfig) {
+  constructor(readonly skeleton: Skeleton, readonly config: WidgetConfig) {
     const { props = {}, name } = config;
     this.name = name;
     this.align = props.align;

packages/vision-polyfill/src/vision.ts

@@ -61,6 +61,7 @@ const context = new VisualEngineContext();
 
 const VisualEngine = {
   editor,
+  skeleton,
   /**
    * VE.Popup
    */