improve object tree

example/simple-editor/editor.tsx

@@ -23,7 +23,7 @@ import {TrackedClientConn} from '../../src/core/connect/TrackedClientConn';
 import {BlockStageTab} from '../../src/panel/block/BlockStageTab';
 import {Dispatcher, ValueDispatcher} from '../../src/core/block/Dispatcher';
 import {PropertyListPanel} from '../../src/panel/property/PropertyListPanel';
-import {ObjectTree} from '../../src/ui/object-tree/ObjectTree';
+import {ObjectTree} from '../../src/editor/object-tree/ObjectTree';
 
 const layoutGroups = {
   blockStage: {

src/editor/block/FieldValue.tsx

@@ -6,7 +6,7 @@ import {TRUNCATED} from '../../core/util/DataTypes';
 import {encodeDisplay} from '../../core/util/Serialize';
 import {displayNumber} from '../../ui/util/Types';
 import {Popup} from '../component/ClickPopup';
-import {ObjectTree} from '../../ui/object-tree/ObjectTree';
+import {ObjectTree} from '../object-tree/ObjectTree';
 
 interface Props {
   conn: ClientConn;
@@ -25,7 +25,7 @@ export class FieldValue extends LazyUpdateComponent<Props, any> {
   getObjectMenu = () => {
     let {conn, path} = this.props;
     let val = this.valueSub.value;
-    return <ObjectTree conn={conn} path={path} data={val} style={{width: 300, height: 300}} />;
+    return <ObjectTree conn={conn} path={path} data={val} />;
   };
 
   renderImpl() {
@@ -48,8 +48,8 @@ export class FieldValue extends LazyUpdateComponent<Props, any> {
               <Popup
                 popup={this.getObjectMenu}
                 popupAlign={{
-                  points: ['tl', 'tl'],
-                  offset: [2, -3]
+                  points: ['tl', 'tr'],
+                  offset: [-6, 0]
                 }}
               >
                 <div className="ticl-tree-arr ticl-tree-arr-expand" />

src/editor/editor.less

@@ -1,5 +1,6 @@
 @import './style';
 @import '../ui/ui';
+
 @import './block/BlockStage';
 @import './block/Block';
 @import './block/view/Note';
@@ -10,6 +11,7 @@
 @import './property/Property';
 @import './type-selector/TypeView';
 @import './component/ClickPopup';
+@import './object-tree/ObjectTree';
 @import './antd-extra';
 @import '../../node_modules/rc-dock/style/index';
 @import './dock-extra';

src/editor/node-tree/NodeRenderer.tsx

@@ -193,7 +193,7 @@ export class NodeTreeRenderer extends PureDataRenderer<Props, any> {
 
   renderImpl() {
     let {item, style} = this.props;
-    let marginLeft = item.level * 24;
+    let marginLeft = item.level * 20;
     return (
       <div style={{...style, marginLeft}} className="ticl-tree-node">
         <ExpandIcon opened={item.opened} onClick={this.onExpandClicked} />

src/ui/object-tree/ObjectRenderer.tsx → src/editor/object-tree/ObjectRenderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {ExpandIcon, ExpandState, TreeItem} from '../component/Tree';
-import {PureDataRenderer} from '../component/DataRenderer';
+import {ExpandIcon, ExpandState, TreeItem} from '../../ui/component/Tree';
+import {PureDataRenderer} from '../../ui/component/DataRenderer';
 import {DragDropDiv, DragState} from 'rc-dock/lib';
 import {TRUNCATED} from '../../core/util/DataTypes';
 
@@ -97,7 +97,7 @@ export class ObjectTreeRenderer extends PureDataRenderer<Props, any> {
 
   renderImpl() {
     let {item, style} = this.props;
-    let marginLeft = item.level * 24;
+    let marginLeft = item.level * 16;
     let onClick = item.opened !== 'empty' ? this.onExpandClicked : null;
 
     let child: React.ReactNode;

src/editor/object-tree/ObjectTree.less

@@ -0,0 +1,13 @@
+.ticl-object-tree {
+  width: 250px;
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: space-evenly;
+  padding: 4px 1px;
+
+  & > .ticl-node-tree {
+    height: 100%;
+  }
+}

src/ui/object-tree/ObjectTree.tsx → src/editor/object-tree/ObjectTree.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import VirtualList from '../component/Virtual';
+import VirtualList from '../../ui/component/Virtual';
 import {ObjectTreeItem, ObjectTreeRenderer} from './ObjectRenderer';
 import {ClientConn} from '../../core/connect/ClientConn';
-import {LazyUpdateComponent} from '../component/LazyUpdateComponent';
+import {LazyUpdateComponent} from '../../ui/component/LazyUpdateComponent';
+import {DataMap, isDataTruncated} from '../../core/util/DataTypes';
+import {Spin} from 'antd';
 
 interface Props {
   conn: ClientConn;
@@ -15,6 +17,26 @@ export class ObjectTree extends LazyUpdateComponent<Props, any> {
   root: ObjectTreeItem;
   list: ObjectTreeItem[] = [];
 
+  loading = false;
+  data: any;
+  getValueCallback = {
+    onUpdate: (response: DataMap) => {
+      this.loading = false;
+      this.data = response.value;
+      this.forceUpdate();
+    }
+  };
+
+  constructor(props: Props) {
+    super(props);
+    if (isDataTruncated(props.data)) {
+      this.loading = true;
+      props.conn.getValue(props.path, this.getValueCallback);
+    } else {
+      this.data = props.data;
+    }
+  }
+
   renderChild = (idx: number, style: React.CSSProperties) => {
     const item = this.list[idx];
     return <ObjectTreeRenderer item={item} key={item.key} style={style} />;
@@ -25,10 +47,6 @@ export class ObjectTree extends LazyUpdateComponent<Props, any> {
     this.root.addToList(this.list);
   }
 
-  constructor(props: Props) {
-    super(props);
-  }
-
   forceUpdateLambda = () => this.forceUpdate();
 
   buildRoot() {
@@ -45,16 +63,27 @@ export class ObjectTree extends LazyUpdateComponent<Props, any> {
   }
 
   renderImpl() {
-    this.buildRoot();
-    this.refreshList();
+    let child: React.ReactNode;
+    if (this.loading) {
+      child = <Spin tip="Loading..." />;
+    } else {
+      this.buildRoot();
+      this.refreshList();
+      child = (
+        <VirtualList
+          className="ticl-node-tree"
+          style={this.props.style}
+          renderer={this.renderChild}
+          itemCount={this.list.length}
+          itemHeight={26}
+        />
+      );
+    }
+
     return (
-      <VirtualList
-        className="ticl-node-tree"
-        style={this.props.style}
-        renderer={this.renderChild}
-        itemCount={this.list.length}
-        itemHeight={30}
-      />
+      <div className="ticl-object-tree" style={this.props.style}>
+        {child}
+      </div>
     );
   }
 

src/editor/object-tree/ObjectTreePanel.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Spin} from 'antd';
+import {ClientConn} from '../../core/connect/ClientConn';
+import {DataMap, isDataTruncated} from '../../core/util/DataTypes';
+import {LazyUpdateComponent} from '../../ui/component/LazyUpdateComponent';
+import {ObjectTree} from './ObjectTree';
+
+interface Props {
+  conn: ClientConn;
+  path: string;
+  val: any;
+}
+
+export class ObjectTreePanel extends LazyUpdateComponent<Props, any> {
+  static createDockTab(path: string, conn: ClientConn, val: any, fromElement: HTMLElement, offset: [number, number]) {
+    let id = `objectTree-${path}`;
+    let tabName = path.split('.').pop();
+    return {
+      id,
+      closable: true,
+      title: tabName,
+      group: 'objectTree',
+      cacjed: true,
+      content: <ObjectTreePanel conn={conn} path={path} val={val} />
+    };
+  }
+
+  renderImpl() {
+    let {path, conn, val} = this.props;
+
+    return <ObjectTree conn={conn} path={path} data={val} />;
+  }
+}

src/editor/property/PropertyList.tsx

@@ -12,7 +12,7 @@ import {
 import {PropertyEditor} from './PropertyEditor';
 import {GroupEditor} from './GroupEditor';
 import {MultiSelectComponent, MultiSelectLoader} from './MultiSelectComponent';
-import {ExpandIcon} from '../../ui/component/Tree';
+import {ExpandIcon, ExpandState} from '../../ui/component/Tree';
 import {deepEqual} from '../../core/util/Compare';
 import {Button, Empty, Tooltip} from 'antd';
 import {AddMorePropertyMenu} from './AddMoreProperty';
@@ -327,6 +327,10 @@ export class PropertyList extends MultiSelectComponent<Props, State, BlockLoader
 
       let allowAttribute = mode == null && keys.length === 1;
 
+      let moreExpand: ExpandState = 'empty';
+      if (moreMerger.isNotEmpty()) {
+        moreExpand = showMore ? 'opened' : 'closed';
+      }
       return (
         <div className="ticl-property-list" style={style}>
           <PropertyEditor name="#is" keys={keys} conn={conn} funcDesc={funcDesc} propDesc={configDescs['#is']} />
@@ -358,9 +362,7 @@ export class PropertyList extends MultiSelectComponent<Props, State, BlockLoader
 
           <div className="ticl-property-divider">
             <div className="ticl-h-line" style={{maxWidth: '16px'}} />
-            {moreMerger.isNotEmpty() ? (
-              <ExpandIcon opened={showMore ? 'opened' : 'closed'} onClick={this.onShowMoreClick} />
-            ) : null}
+            <ExpandIcon opened={moreExpand} onClick={this.onShowMoreClick} />
             <span>more</span>
             <Popup
               popupVisible={showAddMorePopup}

src/ui/util/Types.tsx

@@ -1,6 +1,4 @@
-import {TRUNCATED} from '../../core/util/DataTypes';
 import React from 'react';
-import {encodeDisplay} from '../../core/util/Serialize';
 
 export function displayNumber(val: number): string {
   let rslt1 = val.toString();