fix settings pane

packages/designer/src/designer/designer.ts

@@ -205,8 +205,30 @@ export class Designer {
     return new Scroller(scrollable);
   }
 
+  private oobxList: OffsetObserver[] = [];
   createOffsetObserver(nodeInstance: INodeSelector): OffsetObserver | null {
-    return createOffsetObserver(nodeInstance);
+    const oobx = createOffsetObserver(nodeInstance);
+    this.clearOobxList();
+    if (oobx) {
+      this.oobxList.push(oobx);
+    }
+    return oobx;
+  }
+
+  private clearOobxList(force?: boolean) {
+    let l = this.oobxList.length;
+    if (l > 20 || force) {
+      while (l-- > 0) {
+        if (this.oobxList[l].isPurged()) {
+          this.oobxList.splice(l, 1);
+        }
+      }
+    }
+  }
+
+  touchOffsetObserver() {
+    this.clearOobxList(true);
+    this.oobxList.forEach(item => item.compute());
   }
 
   createSettingEntry(editor: IEditor, nodes: Node[]) {

packages/designer/src/designer/offset-observer.ts

@@ -82,6 +82,8 @@ export class OffsetObserver {
   private isRoot: boolean;
   readonly node: Node;
 
+  readonly compute: () => void;
+
   constructor(readonly nodeInstance: INodeSelector) {
     const { node, instance } = nodeInstance;
     this.node = node;
@@ -121,6 +123,8 @@ export class OffsetObserver {
       this.pid = pid = (window as any).requestIdleCallback(compute);
     };
 
+    this.compute = compute;
+
     // try first
     compute();
     // try second, ensure the dom mounted
@@ -133,6 +137,10 @@ export class OffsetObserver {
     }
     this.pid = undefined;
   }
+
+  isPurged() {
+    return this.pid == null;
+  }
 }
 
 export function createOffsetObserver(nodeInstance: INodeSelector): OffsetObserver | null {

packages/designer/src/designer/setting/setting-field.ts

@@ -118,7 +118,11 @@ export class SettingField extends SettingPropEntry implements SettingEntry {
 
   // ======= compatibles for vision ======
   getHotValue(): any {
-    return this.transducer.toHot(this.getValue());
+    let v = this.getValue();
+    if (v == null) {
+      v = this.extraProps.defaultValue;
+    }
+    return this.transducer.toHot(v);
   }
 
   setHotValue(data: any) {

packages/editor-core/src/utils/focus-tracker.ts

@@ -10,9 +10,9 @@ export class FocusTracker {
         first.internalTriggerBlur();
       }
     };
-    win.document.addEventListener('mousedown', checkDown, true);
+    win.document.addEventListener('click', checkDown, true);
     return () => {
-      win.document.removeEventListener('mousedown', checkDown, true);
+      win.document.removeEventListener('click', checkDown, true);
     };
   }
   private actives: Focusable[] = [];

packages/editor-skeleton/src/layouts/left-fixed-pane.tsx

@@ -5,12 +5,17 @@ import { Button, Icon } from '@alifd/next';
 import Area from '../area';
 import { PanelConfig } from '../types';
 import Panel from '../widget/panel';
+import { Designer } from '@ali/lowcode-designer';
 
 @observer
 export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, Panel> }> {
   shouldComponentUpdate() {
     return false;
   }
+  componentDidUpdate() {
+    // FIXME: dirty fix, need deep think
+    this.props.area.skeleton.editor.get(Designer)?.touchOffsetObserver();
+  }
   render() {
     const { area } = this.props;
     const hideTitleBar = area.current?.config.props?.hideTitleBar;

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

@@ -127,122 +127,6 @@ body {
   &.hidden {
     display: none;
   }
-  /*
-  .my-tabs {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    .tabs-title {
-      display: flex;
-      height: var(--pane-title-height);
-      margin-right: 30px;
-      > .tab-title {
-        cursor: pointer;
-        padding: 0;
-        flex: 1;
-        min-width: 0;
-        justify-content: center;
-        border-bottom: 2px solid transparent;
-        &.actived {
-          cursor: default;
-          color: var(--color-text-avtived);
-          border-bottom-color: #3896ee;
-        }
-      }
-    }
-    .tabs-content {
-      position: absolute;
-      top: var(--pane-title-height);
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: calc(100% - var(--pane-title-height));
-      overflow: hidden;
-    }
-  }
-  */
-  /*覆盖旧面板*/
-  /*组件面板*/
-  // .ve-component-list {
-  //   .ve-component-list-body{
-  //     .ve-component-list-sidebar{
-  //       .ve-component-list-navigator{
-  //         .navigator-group{
-  //           &:last-child{
-  //             &::after{
-  //               display: none;
-  //             }
-  //           }
-  //           &::after{
-  //             content: '';
-  //             display: block;
-  //             height: 1px;
-  //             background-color: #EDEFF3;
-  //             line-height: 0;
-  //             margin: 4px 12px 0;
-  //           }
-  //           .navigator-group-head{
-  //             .navigator-group-title{
-  //               border-bottom: none;
-  //             }
-  //           }
-  //           .navigator-group-item{
-  //             border-left: 2px solid transparent;
-  //             &.active{
-  //               border-left-color: #0079f2;
-  //               border-right: none;
-  //             }
-  //           }
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-  /*数据源*/
-  // .engine-datapool{
-  //   .engine-datapool-view-group{
-  //     padding-top: 48px;
-  //     .engine-datapool-view-group-title{
-  //       height: 48px;
-  //       line-height: 48px;
-  //       font-size: 16px;
-  //       background-color: transparent;
-  //       padding: 0 16px;
-  //       border-bottom: 1px solid #EDEFF3;
-  //     }
-  //   }
-  // }
-  /*动作面板*/
-  // .ve-action-pane{
-  //   border-top: none;
-  //   .rc-tabs{
-  //     .rc-tabs-bar{
-  //       background-color: transparent;
-  //       .rc-tabs-tab{
-  //         line-height: 1;
-  //         &.rc-tabs-tab-active{
-
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-
-  /*设置面板*/
-  // .ve-field .ve-field-head,
-  // .ve-field.ve-accordion2-field > .ve-field-head .ve-field-title-content{
-  //   padding: 0;
-  // }
-  // .ve-field.ve-accordion2-field > .ve-field-split-line{
-  //   display: none;
-  // }
-  // .vs-style .vs-style-source{
-  //   margin: 0 0 16px;
-  // }
-  // .vs-code-button,
-  // .vs-json-button{
-  //   margin: 0;
-  // }
 }
 
 
@@ -283,10 +167,11 @@ body {
       position: absolute;
       top: 0;
       bottom: 0;
-      // width: var(--dock-pane-width);
+      width: var(--dock-pane-width);
+      min-width: var(--dock-fixed-pane-width);
       left: calc(var(--left-area-width) + 1px);
       background-color: var(--color-pane-background);
-      box-shadow: 4px 0 16px 0 rgba(31,50,88,0.08);
+      box-shadow: 4px 6px 6px 0 rgba(31,50,88,0.08);
       z-index: 820;
       display: none;
       // padding-top: 36px;

packages/editor-skeleton/src/transducers/addon-combine.ts

@@ -125,6 +125,24 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
     ],
   });
   */
+  const stylesGroup: FieldConfig[] = [];
+  let advanceGroup: FieldConfig[] = [];
+  if (propsGroup) {
+    let l = propsGroup.length;
+    while (l-- > 0) {
+      const item = propsGroup[l];
+      if (item.type === 'group' && (item.title === '高级' || item.title?.label === '高级')) {
+        advanceGroup = item.items || [];
+        propsGroup.splice(l, 1);
+      } else if (item.name === '__style__' || item.name === 'containerStyle' || item.name === 'pageStyle') {
+        propsGroup.splice(l, 1);
+        stylesGroup.push(item);
+        if (item.extraProps?.defaultCollapsed && item.name !== 'containerStyle') {
+          item.extraProps.defaultCollapsed = false;
+        }
+      }
+    }
+  }
   const combined: FieldConfig[] = [
     {
       title: { type: 'i18n', 'zh-CN': '属性', 'en-US': 'Props' },
@@ -132,7 +150,6 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
       items: propsGroup,
     },
   ];
-  const stylesGroup: FieldConfig[] = [];
   if (styles?.supportClassName) {
     stylesGroup.push({
       name: 'className',
@@ -183,79 +200,72 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
     });
   }
 
-  if (isRoot) {
+  if (!isRoot) {
-    /*
+    advanceGroup = advanceGroup.concat([
+      {
+        name: '___condition',
+        title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' },
+        defaultValue: true,
+        setter: [{
+          componentName: 'BoolSetter',
+        }, {
+          componentName: 'VariableSetter'
+        }],
+      },
+      {
+        name: '#loop',
+        title: { type: 'i18n', 'zh-CN': '循环', 'en-US': 'Loop' },
+        items: [
+          {
+            name: '___loop',
+            title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' },
+            setter: [{
+              componentName: 'JsonSetter',
+              props: {
+                label: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data'},
+              },
+            }, {
+              componentName: 'VariableSetter'
+            }],
+          },
+          {
+            name: '___loopArgs.0',
+            title: { type: 'i18n', 'zh-CN': '迭代变量名', 'en-US': 'Loop Item' },
+            setter: {
+              componentName: 'StringSetter',
+              props: {
+                placeholder: { type: 'i18n', 'zh-CN': '默认为: item', 'en-US': 'Defaults: item' },
+              }
+            },
+          },
+          {
+            name: '___loopArgs.1',
+            title: { type: 'i18n', 'zh-CN': '索引变量名', 'en-US': 'Loop Index' },
+            setter: {
+              componentName: 'StringSetter',
+              props: {
+                placeholder: { type: 'i18n', 'zh-CN': '默认为: index', 'en-US': 'Defaults: index' },
+              }
+            },
+          },
+          {
+            name: 'key',
+            title: '循环 Key',
+            setter: [{
+              componentName: 'StringSetter',
+            }, {
+              componentName: 'VariableSetter'
+            }],
+          },
+        ],
+      },
+    ])
+  }
+  if (advanceGroup.length > 0) {
     combined.push({
       name: '#advanced',
       title: { type: 'i18n', 'zh-CN': '高级', 'en-US': 'Advance' },
-      items: [],
+      items: advanceGroup,
-    });
-    */
-  } else {
-    combined.push({
-      name: '#advanced',
-      title: { type: 'i18n', 'zh-CN': '高级', 'en-US': 'Advance' },
-      items: [
-        {
-          name: '___condition',
-          title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' },
-          setter: [{
-            componentName: 'BoolSetter',
-            props: {
-              defaultValue: true,
-            }
-          }, {
-            componentName: 'VariableSetter'
-          }],
-        },
-        {
-          name: '#loop',
-          title: { type: 'i18n', 'zh-CN': '循环', 'en-US': 'Loop' },
-          items: [
-            {
-              name: '___loop',
-              title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' },
-              setter: [{
-                componentName: 'JsonSetter',
-                props: {
-                  label: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data'},
-                },
-              }, {
-                componentName: 'VariableSetter'
-              }],
-            },
-            {
-              name: '___loopArgs.0',
-              title: { type: 'i18n', 'zh-CN': '迭代变量名', 'en-US': 'Loop Item' },
-              setter: {
-                componentName: 'StringSetter',
-                props: {
-                  placeholder: { type: 'i18n', 'zh-CN': '默认为: item', 'en-US': 'Defaults: item' },
-                }
-              },
-            },
-            {
-              name: '___loopArgs.1',
-              title: { type: 'i18n', 'zh-CN': '索引变量名', 'en-US': 'Loop Index' },
-              setter: {
-                componentName: 'StringSetter',
-                props: {
-                  placeholder: { type: 'i18n', 'zh-CN': '默认为: index', 'en-US': 'Defaults: index' },
-                }
-              },
-            },
-            {
-              name: 'key',
-              title: '循环 Key',
-              setter: [{
-                componentName: 'StringSetter',
-              }, {
-                componentName: 'VariableSetter'
-              }],
-            },
-          ],
-        },
-      ],
     });
   }