merge import file

example/simple-editor/editor.tsx

@@ -1,17 +1,11 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {Menu, Icon, Dropdown, Button, Card} from 'antd';
-import NodeTree from "../../src/editor/node-tree/NodeTree";
-import {Block, Root} from "../../src/common/block/Block";
+import {Block, Root, ClientConnection} from "../../src/common";
 import {makeLocalConnection} from "../../src/common/connect/LocalConnection";
 import {TIcon} from "../../src/editor/icon/Icon";
-import '../../src/common/functions/basic/Math';
-import '../../src/common/functions/basic/String';
 import {sampleData} from "./sample-data";
-import BlockStage from "../../src/editor/block/BlockStage";
-import {initEditor} from "../../src/editor";
-import {PropertyList} from "../../src/editor/property/PropertyList";
-import {ClientConnection} from "../../src/common/connect/ClientConnection";
+import {initEditor, PropertyList, BlockStage, NodeTree} from "../../src/editor";
 import {DragStore} from "../../src/ui/util/DragStore";
 
 interface Props {

src/common/block/Descriptor.ts

@@ -22,6 +22,8 @@ export type ValueType =
   | 'type'
   ;
 
+export type SpecialView = 'full' | 'top';
+
 export interface PropDesc {
   name: string;
   type: ValueType;
@@ -59,6 +61,8 @@ export interface FunctionDesc {
   properties?: (PropDesc | PropGroupDesc)[];
   attributes?: (PropDesc)[];
 
+  view?: SpecialView;
+
   style?: 'repeater' | 'service';
   folder?: string;
 }

src/common/connect/ClientConnection.ts

@@ -217,9 +217,11 @@ type DescListener = (desc: FunctionDesc) => void;
 
 class DescRequest extends ConnectionSend implements ClientCallbacks {
 
+  static editorCache: Map<string, FunctionDesc> = new Map<string, FunctionDesc>();
+
   listeners: Map<DescListener, string> = new Map<DescListener, string>();
 
-  cache: Map<string, FunctionDesc> = new Map<string, FunctionDesc>();
+  cache: Map<string, FunctionDesc> = new Map<string, FunctionDesc>(DescRequest.editorCache);
 
   constructor(data: DataMap) {
     super(data);
@@ -269,6 +271,10 @@ class DescRequest extends ConnectionSend implements ClientCallbacks {
 
 export class ClientConnection extends Connection {
 
+  static addEditorType(id: string, desc: FunctionDesc) {
+    DescRequest.editorCache.set(id, desc);
+  }
+
   uid: Uid = new Uid();
 
   // id as key

src/common/index.ts

@@ -0,0 +1,12 @@
+export * from "./block/Block";
+export * from "./block/BlockProperty";
+export * from "./block/Descriptor";
+export * from "./connect/ServerConnection";
+export * from "./connect/ClientConnection";
+
+// register functions
+import "./functions/basic/Math";
+import "./functions/basic/String";
+import "./functions/script/Js";
+import "./worker/MapFunction";
+import "./worker/ForEachFunction";

src/editor/block/Block.tsx

@@ -12,6 +12,8 @@ const fieldHeight = 24;
 
 
 export class BlockItem extends BaseBlockItem {
+  viewW: number = 0;
+  viewH: number = 0;
   h: number = 0;
   selected: boolean = false;
 
@@ -62,6 +64,14 @@ export class BlockItem extends BaseBlockItem {
 
   updateFieldPosition = () => {
     let {x, y, w} = this;
+
+    if (this.desc.view === 'full') {
+      // special view, ignore other fields
+      this.w = this.viewW;
+      this.h = this.viewH;
+      return;
+    }
+
     if (!w) {
       let y1 = y + fieldYOffset;
       x -= 1;
@@ -71,9 +81,15 @@ export class BlockItem extends BaseBlockItem {
       }
       this.h = fieldHeight;
     } else {
+      let headerHeight = fieldHeight;
+      if (this.desc.view === 'top') {
+        // special view, right under the header
+        headerHeight += this.viewH;
+      }
+
       let y1 = y + 1; // top border;
       y1 += fieldYOffset;
-      y1 += fieldHeight;
+      y1 += headerHeight;
       for (let field of this.fields) {
         y1 = this.fieldItems.get(field).updateFieldPos(x, y1, w, fieldHeight);
       }
@@ -197,7 +213,9 @@ export class BlockView extends PureDataRenderer<BlockViewProps, BlockViewState>
 
   renderImpl() {
     let {item} = this.props;
-    if (item.w) {
+    if (item.desc.view === 'full') {
+
+    } else if (item.w) {
       return (
         <div
           ref={this.getRef}

src/editor/block/BlockStage.tsx

@@ -16,7 +16,7 @@ interface Props {
   onSelect?: (keys: string[]) => void;
 }
 
-export default class BlockStage extends React.Component<Props, any> implements Stage {
+export class BlockStage extends React.Component<Props, any> implements Stage {
 
   private _bgNode!: HTMLElement;
   private getBgRef = (node: HTMLDivElement): void => {

src/editor/block/spec/Block.spec.tsx

@@ -1,9 +1,8 @@
 import {assert} from "chai";
 import SimulateEvent from "simulate-event";
 import React from 'react';
-import BlockStage from "../BlockStage";
-import {Block, Root} from "../../../common/block/Block";
-import "../../../common/functions/basic/Math";
+import {BlockStage} from "../../../editor";
+import {Block, Root} from "../../../common";
 import {destroyLastLocalConnection, makeLocalConnection} from "../../../common/connect/LocalConnection";
 import {shouldHappen, shouldReject} from "../../../common/util/test-util";
 import ReactDOM from "react-dom";

src/editor/block/spec/Field.spec.tsx

@@ -1,9 +1,8 @@
 import {assert} from "chai";
 import SimulateEvent from "simulate-event";
 import React from 'react';
-import BlockStage from "../BlockStage";
-import {Block, Root} from "../../../common/block/Block";
-import "../../../common/functions/basic/Math";
+import {BlockStage} from "../../../editor";
+import {Block, Root} from "../../../common";
 import {destroyLastLocalConnection, makeLocalConnection} from "../../../common/connect/LocalConnection";
 import {shouldHappen, shouldReject} from "../../../common/util/test-util";
 import ReactDOM from "react-dom";
@@ -99,7 +98,7 @@ describe("editor Block Field", function () {
 
     let subtractBlock = querySingle("//div.ticl-block-head[text()='subtract']/..", div);
 
-    await  shouldHappen(() => subtractBlock.querySelectorAll('.ticl-field').length === 3);
+    await shouldHappen(() => subtractBlock.querySelectorAll('.ticl-field').length === 3);
 
     let fieldNames = subtractBlock.querySelectorAll('.ticl-field-name');
     assert.equal(fieldNames[0].textContent, '0');
@@ -110,14 +109,14 @@ describe("editor Block Field", function () {
     // hide sub block
     SimulateEvent.simulate(fieldNames[0], 'dblclick');
 
-    await  shouldHappen(() => subtractBlock.querySelectorAll('.ticl-field').length === 1);
+    await shouldHappen(() => subtractBlock.querySelectorAll('.ticl-field').length === 1);
     // wire should still exists
     assert.isNotNull(document.querySelector('svg'));
 
     // show sub block again
     SimulateEvent.simulate(fieldNames[0], 'dblclick');
 
-    await  shouldHappen(() => subtractBlock.querySelectorAll('.ticl-field').length === 3);
+    await shouldHappen(() => subtractBlock.querySelectorAll('.ticl-field').length === 3);
 
     Root.instance.deleteValue('BlockField2');
   });

src/editor/index.ts

@@ -1,5 +1,9 @@
+export * from "./block/BlockStage";
+export * from "./property/PropertyList";
+export * from "./node-tree/NodeTree";
+
 import * as ticloI18n from "../common/util/i18n";
-import i18next from "i18next";
+
 
 export async function initEditor() {
   let lng = window.localStorage.getItem('ticlo-lng');

src/editor/node-tree/NodeTree.tsx

@@ -18,15 +18,15 @@ interface State {
   renderer: (idx: number, style: React.CSSProperties) => React.ReactNode;
 }
 
-export default class NodeTree extends React.PureComponent<Props, State> {
+export class NodeTree extends React.PureComponent<Props, State> {
   rootList: NodeTreeItem[] = [];
   state: State;
   list: NodeTreeItem[] = [];
 
   renderChild(idx: number, style: React.CSSProperties): React.ReactNode {
     let item = this.list[idx];
     return (
-      <NodeTreeRenderer item={item} key={item.key} style={style} />
+      <NodeTreeRenderer item={item} key={item.key} style={style}/>
     );
   }
 

src/editor/node-tree/spec/NodeTree.spec.tsx

@@ -1,9 +1,8 @@
 import {assert} from "chai";
 import SimulateEvent from "simulate-event";
 import React from 'react';
-import NodeTree from "../NodeTree";
-import {Block, Root} from "../../../common/block/Block";
-import "../../../common/functions/basic/Math";
+import {NodeTree} from "../../../editor";
+import {Block, Root} from "../../../common";
 import {destroyLastLocalConnection, makeLocalConnection} from "../../../common/connect/LocalConnection";
 import {shouldHappen} from "../../../common/util/test-util";
 import ReactDOM from "react-dom";

src/editor/property/spec/PropertyEditor.spec.tsx

@@ -1,6 +1,7 @@
 import {assert} from "chai";
 import SimulateEvent from "simulate-event";
 import React from 'react';
+import "../../../editor";
 import {PropertyEditor} from "../PropertyEditor";
 import {Block, Root} from "../../../common/block/Block";
 import "../../../common/functions/basic/Math";

src/ui/index.ts

@@ -0,0 +1 @@
+export * from "../common";