fix stage

packages/designer/src/document/node/props/prop.ts

@@ -95,7 +95,7 @@ export class Prop implements IPropParent {
       this.items!.forEach((prop, key) => {
         const v = prop.export(stage);
         if (v !== UNSET) {
-          maps[key] = v;
+          maps[prop.key == null ? key : prop.key] = v;
         }
       });
       return maps;

packages/editor-skeleton/src/components/popup/index.tsx

@@ -59,8 +59,8 @@ export class PopupPipe {
   }
 }
 
-export default class PopupService extends Component<{ actionKey?: string; safeId?: string }> {
+export default class PopupService extends Component<{ popupPipe?: PopupPipe; actionKey?: string; safeId?: string }> {
-  private popupPipe = new PopupPipe();
+  private popupPipe = this.props.popupPipe || new PopupPipe();
 
   componentWillUnmount() {
     this.popupPipe.purge();
@@ -121,6 +121,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
         className="lc-ballon"
         align="l"
         id={this.props.safeId}
+        alignEdge
         safeNode={id}
         visible={visible}
         style={{ width }}
@@ -135,7 +136,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
         trigger={<div className="lc-popup-placeholder" style={pos} />}
         triggerType="click"
         animation={false}
-        // needAdjust
+        needAdjust
         shouldUpdatePosition
       >
         <div className="lc-ballon-title">{title}</div>

packages/editor-skeleton/src/components/popup/style.less

@@ -13,10 +13,16 @@
   }
   .lc-ballon-content {
     margin-top: 10px;
-    // width: 300px;
+    // FIXME: popup position is bad
+    max-height: calc(60vh);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  &.next-balloon-closable {
+    padding: 10px !important;
   }
   .next-balloon-close {
-    top: 4px;
+    top: 4px !important;
-    right: 4px;
+    right: 4px !important;
   }
 }

packages/editor-skeleton/src/components/settings/settings-pane.tsx

@@ -1,11 +1,13 @@
-import { Component } from 'react';
+import { Component, MouseEvent } from 'react';
 import { shallowIntl, createSetterContent, observer } from '@ali/lowcode-editor-core';
 import { createContent } from '@ali/lowcode-utils';
 import { Field, createField } from '../field';
-import PopupService from '../popup';
+import PopupService, { PopupPipe } from '../popup';
+import { SkeletonContext } from '../../context';
 import { SettingField, isSettingField, SettingTopEntry, SettingEntry } from '@ali/lowcode-designer';
 import { isSetterConfig, CustomView } from '@ali/lowcode-types';
 import { intl } from '../../locale';
+import { Skeleton } from 'editor-skeleton/src/skeleton';
 
 @observer
 class SettingFieldView extends Component<{ field: SettingField }> {
@@ -145,17 +147,54 @@ export function createSettingFieldView(item: SettingField | CustomView, field: S
 
 @observer
 export class SettingsPane extends Component<{ target: SettingTopEntry | SettingField }> {
+  static contextType = SkeletonContext;
   shouldComponentUpdate() {
     return false;
   }
 
+  private popupPipe = new PopupPipe();
+  private pipe = this.popupPipe.create();
+
+  private handleClick = (e: MouseEvent) => {
+    // compatiable vision stageBox
+    // TODO: optimize these codes
+    const pane = e.currentTarget as HTMLDivElement;
+    let entry: any;
+    function getTarget(node: any): any {
+      if (!pane.contains(node) || (node.nodeName === 'A' && node.getAttribute('href'))) {
+        return null;
+      }
+
+      const target = node.dataset ? node.dataset.stageTarget : null;
+      if (target) {
+        entry = node;
+        return target;
+      }
+      return getTarget(node.parentNode);
+    }
+    const target = getTarget(e.target);
+    if (!target) {
+      return;
+    }
+
+    const skeleton = this.context as Skeleton;
+    if (!skeleton || !skeleton.stages) {
+      return;
+    }
+    const stage = skeleton.stages.container.get(target);
+    if (stage) {
+      this.pipe.send(stage.content, stage.title);
+      this.pipe.show(entry);
+    }
+  };
+
   render() {
     const { target } = this.props;
     const items = target.items;
     return (
-      <div className="lc-settings-pane">
+      <div className="lc-settings-pane" onClick={this.handleClick}>
         {/* todo: add head for single use */}
-        <PopupService>
+        <PopupService popupPipe={this.popupPipe}>
           <div className="lc-settings-content">
             {items.map((item, index) => createSettingFieldView(item, target, index))}
           </div>

packages/editor-skeleton/src/context.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { Skeleton } from './skeleton';
+
+export const SkeletonContext = createContext<Skeleton>({} as any);

packages/editor-skeleton/src/index.ts

@@ -3,5 +3,6 @@ export * from './skeleton';
 export * from './types';
 export * from './components/settings';
 export * from './components/field';
+export * from './context';
 
 import './register-defaults';

packages/editor-skeleton/src/layouts/workbench.tsx

@@ -11,6 +11,7 @@ import MainArea from './main-area';
 import BottomArea from './bottom-area';
 import RightArea from './right-area';
 import './workbench.less';
+import { SkeletonContext } from '../context';
 
 @observer
 export class Workbench extends Component<{ skeleton: Skeleton, className?: string, topAreaItemClassName?: string }> {
@@ -22,19 +23,21 @@ export class Workbench extends Component<{ skeleton: Skeleton, className?: strin
     const { skeleton, className, topAreaItemClassName } = this.props;
     return (
       <div className={classNames('lc-workbench', className)}>
-        <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
+        <SkeletonContext.Provider value={this.props.skeleton}>
-        <div className="lc-workbench-body">
+          <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
-          <LeftArea area={skeleton.leftArea} />
+          <div className="lc-workbench-body">
-          <LeftFloatPane area={skeleton.leftFloatArea} />
+            <LeftArea area={skeleton.leftArea} />
-          <LeftFixedPane area={skeleton.leftFixedArea} />
+            <LeftFloatPane area={skeleton.leftFloatArea} />
-          <div className="lc-workbench-center">
+            <LeftFixedPane area={skeleton.leftFixedArea} />
-            <Toolbar area={skeleton.toolbar} />
+            <div className="lc-workbench-center">
-            <MainArea area={skeleton.mainArea} />
+              <Toolbar area={skeleton.toolbar} />
-            <BottomArea area={skeleton.bottomArea} />
+              <MainArea area={skeleton.mainArea} />
+              <BottomArea area={skeleton.bottomArea} />
+            </div>
+            <RightArea area={skeleton.rightArea} />
           </div>
-          <RightArea area={skeleton.rightArea} />
+          <TipContainer />
-        </div>
+        </SkeletonContext.Provider>
-        <TipContainer />
       </div>
     );
   }

packages/editor-skeleton/src/types.ts

@@ -18,6 +18,7 @@ export interface WidgetConfig extends IWidgetBaseConfig {
   props?: {
     align?: "left" | "right" | "bottom" | "center" | "top";
     onInit?: (widget: IWidget) => void;
+    title?: TitleContent;
   };
   content?: string | ReactElement | ComponentType<any>; // children
 }

packages/editor-skeleton/src/widget/widget.ts

@@ -4,6 +4,7 @@ import { createContent, uniqueId } from '@ali/lowcode-utils';
 import { WidgetConfig, IWidgetBaseConfig } from '../types';
 import { Skeleton } from '../skeleton';
 import { WidgetView } from '../components/widget-views';
+import { TitleContent } from '@ali/lowcode-types';
 
 export interface IWidget {
   readonly name: string;
@@ -56,10 +57,13 @@ export default class Widget implements IWidget {
     });
   }
 
+  readonly title: TitleContent;
+
   constructor(readonly skeleton: Skeleton, readonly config: WidgetConfig) {
     const { props = {}, name } = config;
     this.name = name;
     this.align = props.align;
+    this.title = props.title || name;
     if (props.onInit) {
       props.onInit.call(this, this);
     }

packages/vision-preset/src/panes.ts

@@ -132,7 +132,18 @@ function add(config: (() => OldPaneConfig) | OldPaneConfig, extraConfig?: any) {
     config = { ...config, ...extraConfig };
   }
 
-  skeleton.add(upgradeConfig(config));
+  const upgraded = upgradeConfig(config);
+  if (upgraded.area === 'stages') {
+    if (upgraded.id) {
+      upgraded.name = upgraded.id;
+    } else if (!upgraded.name) {
+      upgraded.name = uniqueId('stage');
+    }
+    const stage = skeleton.add(upgraded);
+    return stage?.getName();
+  } else {
+    return skeleton.add(upgraded);
+  }
 }
 
 const actionPane = Object.assign(skeleton.topArea, {