use obx-react

packages/demo/index.html

@@ -9,7 +9,7 @@
     <!-- React 非压缩版代码，可根据需要替换或通过代理替换后方便调试 -->
     <!-- <script src="https://g.alicdn.com/code/lib/??react/16.9.0/umd/react.development.js,react-dom/16.9.0/umd/react-dom.development.js,prop-types/15.7.2/prop-types.js"></script> -->
     <script> React.PropTypes = PropTypes; </script>
-    <script src="/node_modules/@ali/recore/umd/recore.js"></script>
+    <!-- <script src="https://g.alicdn.com/mylib/@ali/recore/1.5.7/umd/recore.min.js"></script>-->
     <!-- Recore 压缩版代码，线上 VM 请使用下面的地址，注意选择自己需要的版本号 -->
     <!--<script src="https://gw.alipayobjects.com/os/lib/ali/recore/1.5.3/umd/recore.js"></script>-->
     <!-- 可选是否导入 mockjs, 可增强 mock 能力 -->

packages/demo/recore.config.js

@@ -8,8 +8,8 @@ module.exports = {
   },
   externals: {
     '@ali/iceluna-sdk': 'var window.LowCodeRenderer',
-    '@recore/obx': 'var window.Recore',
-    '@recore/core-obx': 'var window.Recore',
+    // '@recore/obx': 'var window.Recore',
+    // '@recore/obx-react': 'var window.Recore',
     // '@alifd/next': 'var window.Next',
     'moment': 'var window.moment',
   },

packages/demo/src/app.vx

@@ -628,7 +628,6 @@
       ],
     }}
     simulatorProps={{
-      device: 'legao',
       componentsAsset: [
         {
           type: 'jsUrl',
@@ -643,6 +642,7 @@
           level: 2,
         },
       ],
+      simulatorUrl: ['/build/simulator-renderer.css', '/build/simulator-renderer.js'],
     }}
     componentsDescription={[
       {

packages/designer/for-editor-dev/simulator-renderer.css

@@ -0,0 +1,30 @@
+html {
+  padding-bottom: 30px;
+  background: transparent !important;
+}
+body,
+html {
+  display: block;
+  min-height: 100%;
+  background: white;
+}
+
+html.lc-cursor-dragging,
+html.lc-cursor-dragging * {
+  cursor: move !important;
+}
+html.lc-cursor-x-resizing,
+html.lc-cursor-x-resizing * {
+  cursor: col-resize;
+}
+html.lc-cursor-y-resizing,
+html.lc-cursor-y-resizing * {
+  cursor: row-resize;
+}
+html.lc-cursor-copy,
+html.lc-cursor-copy * {
+  cursor: copy !important;
+}
+
+
+/*# sourceMappingURL=simulator-renderer.css.map*/

packages/designer/package.json

@@ -7,8 +7,8 @@
   "license": "MIT",
   "dependencies": {
     "@ali/iceluna-sdk": "^1.0.5-beta.12",
-    "@recore/core-obx": "^1.0.4",
-    "@recore/obx": "^1.0.5",
+    "@recore/obx": "^1.0.8",
+    "@recore/obx-react": "^1.0.7",
     "@types/medium-editor": "^5.0.3",
     "classnames": "^2.2.6",
     "react": "^16",

packages/designer/src/builtins/drag-ghost/index.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { obx } from '@recore/obx';
-import { observer } from '@recore/core-obx';
+import { observer } from '@recore/obx-react';
 import Designer from '../../designer/designer';
 import { isDragNodeObject, DragObject, isDragNodeDataObject } from '../../designer/helper/dragon';
 import './ghost.less';
@@ -18,7 +18,7 @@ export default class Ghost extends Component<{ designer: Designer }> {
   constructor(props: any) {
     super(props);
     this.dispose = [
-       this.dragon.onDragstart((e) => {
+      this.dragon.onDragstart(e => {
         this.dragObject = e.dragObject;
         this.x = e.globalX;
         this.y = e.globalY;
@@ -48,7 +48,7 @@ export default class Ghost extends Component<{ designer: Designer }> {
   renderGhostGroup() {
     const dragObject = this.dragObject;
     if (isDragNodeObject(dragObject)) {
-      return dragObject.nodes.map((node) => {
+      return dragObject.nodes.map(node => {
         const ghost = (
           <div className="lc-ghost" key={node.id}>
             <div className="lc-ghost-title">{node.title}</div>
@@ -57,17 +57,19 @@ export default class Ghost extends Component<{ designer: Designer }> {
         return ghost;
       });
     } else if (isDragNodeDataObject(dragObject)) {
-      return Array.isArray(dragObject.data) ? dragObject.data.map((item, index) => {
-        return (
-          <div className="lc-ghost" key={`ghost-${index}`}>
-            <div className="lc-ghost-title">{item.componentName}</div>
-          </div>
-        )
-      }) : (
+      return Array.isArray(dragObject.data) ? (
+        dragObject.data.map((item, index) => {
+          return (
+            <div className="lc-ghost" key={`ghost-${index}`}>
+              <div className="lc-ghost-title">{item.componentName}</div>
+            </div>
+          );
+        })
+      ) : (
         <div className="lc-ghost">
           <div className="lc-ghost-title">{dragObject.data.componentName}</div>
         </div>
-      )
+      );
     }
   }
 

packages/designer/src/builtins/simulator/host/auxilary/auxiliary.tsx

@@ -1,4 +1,4 @@
-import { observer } from '@recore/core-obx';
+import { observer } from '@recore/obx-react';
 import { Component } from 'react';
 import { OutlineHovering } from './outline-hovering';
 import { SimulatorContext } from '../context';

packages/designer/src/builtins/simulator/host/auxilary/insertion.tsx

@@ -1,9 +1,14 @@
 import { Component } from 'react';
 import { computed } from '@recore/obx';
-import { observer } from '@recore/core-obx';
+import { observer } from '@recore/obx-react';
 import { SimulatorContext } from '../context';
 import { SimulatorHost } from '../host';
-import Location, { Rect, isLocationChildrenDetail, LocationChildrenDetail, isVertical } from '../../../../designer/helper/location';
+import Location, {
+  Rect,
+  isLocationChildrenDetail,
+  LocationChildrenDetail,
+  isVertical,
+} from '../../../../designer/helper/location';
 import { ISimulator } from '../../../../designer/simulator';
 import { NodeParent } from '../../../../designer/document/node/node';
 import './insertion.less';
@@ -19,11 +24,7 @@ interface InsertionData {
 /**
  * 处理拖拽子节点(INode)情况
  */
-function processChildrenDetail(
-  sim: ISimulator,
-  target: NodeParent,
-  detail: LocationChildrenDetail,
-): InsertionData {
+function processChildrenDetail(sim: ISimulator, target: NodeParent, detail: LocationChildrenDetail): InsertionData {
   let edge = detail.edge || null;
 
   if (edge) {

packages/designer/src/builtins/simulator/host/auxilary/outline-hovering.tsx

@@ -1,6 +1,6 @@
 import { Component, Fragment, PureComponent } from 'react';
 import classNames from 'classnames';
-import { observer } from '@recore/core-obx';
+import { observer } from '@recore/obx-react';
 import { SimulatorContext } from '../context';
 import { SimulatorHost } from '../host';
 import { computed } from '@recore/obx';

packages/designer/src/builtins/simulator/host/auxilary/outline-selecting.tsx

@@ -1,6 +1,6 @@
 import { Component, Fragment } from 'react';
 import classNames from 'classnames';
-import { observer } from '@recore/core-obx';
+import { observer } from '@recore/obx-react';
 import { SimulatorContext } from '../context';
 import { SimulatorHost } from '../host';
 import { computed } from '@recore/obx';
@@ -69,7 +69,7 @@ export class OutlineSelectingForNode extends Component<{ node: Node }> {
     }
     return (
       <Fragment key={node.id}>
-        {instances.map((instance) => {
+        {instances.map(instance => {
           const observed = designer.createOffsetObserver({
             node,
             instance,

packages/designer/src/builtins/simulator/host/host-view.tsx

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { observer } from '@recore/core-obx';
+import { observer } from '@recore/obx-react';
 import { SimulatorHost, SimulatorProps } from './host';
 import DocumentModel from '../../../designer/document/document-model';
 import { SimulatorContext } from './context';
@@ -15,10 +15,12 @@ import './host.less';
   Auxiliary 辅助显示层，初始相对 Content 位置 0,0，紧贴 Canvas, 根据 Content 滚动位置，改变相对位置
 */
 
-export class SimulatorHostView extends Component<SimulatorProps & {
+type SimulatorHostProps = SimulatorProps & {
   documentContext: DocumentModel;
   onMount?: (host: SimulatorHost) => void;
-}> {
+};
+
+export class SimulatorHostView extends Component<SimulatorHostProps> {
   readonly host: SimulatorHost;
   constructor(props: any) {
     super(props);

packages/designer/src/builtins/simulator/renderer/renderer-view.tsx

@@ -1,6 +1,6 @@
 import LowCodeRenderer from '@ali/iceluna-sdk';
 import { ReactInstance, Fragment, Component } from 'react';
-import { observer } from '@recore/core-obx';
+import { observer } from '@recore/obx-react';
 import { SimulatorRenderer } from './renderer';
 import './renderer.less';
 
@@ -16,7 +16,7 @@ export default class SimulatorRendererView extends Component<{ renderer: Simulat
 }
 
 @observer
-class Layout extends Component<{ renderer: SimulatorRenderer; }> {
+class Layout extends Component<{ renderer: SimulatorRenderer }> {
   shouldComponentUpdate() {
     return false;
   }
@@ -40,7 +40,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
   }
   render() {
     const { renderer } = this.props;
-    const { components, schemas } = LowCodeRenderer.others
+    const { components, schemas } = LowCodeRenderer.others;
     return (
       <LowCodeRenderer
         schema={renderer.schema}
@@ -55,7 +55,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           renderer.mountInstance(schema.id, ref);
         }}
         //onCompGetCtx={(schema: any, ctx: object) => {
-          // renderer.mountContext(schema.id, ctx);
+        // renderer.mountContext(schema.id, ctx);
         //}}
       />
     );

packages/designer/src/designer/designer.ts

@@ -118,17 +118,32 @@ export default class Designer {
       if (this.currentSelection) {
         const currentSelection = this.currentSelection;
         selectionDispose = currentSelection.onSelectionChange(() => {
-          this.postEvent('current-selection-change', currentSelection);
+          this.postEvent('selection-change', currentSelection);
         });
       }
-    }
+    };
+    let historyDispose: undefined | (() => void);
+    const setupHistory = () => {
+      if (historyDispose) {
+        historyDispose();
+        historyDispose = undefined;
+      }
+      if (this.currentHistory) {
+        const currentHistory = this.currentHistory;
+        historyDispose = currentHistory.onStateChange(() => {
+          this.postEvent('history-change', currentHistory);
+        });
+      }
+    };
     this.project.onCurrentDocumentChange(() => {
       this.postEvent('current-document-change', this.currentDocument);
-      this.postEvent('current-selection-change', this.currentSelection);
-      this.postEvent('current-history-change', this.currentHistory);
+      this.postEvent('selection-change', this.currentSelection);
+      this.postEvent('history-change', this.currentHistory);
       setupSelection();
+      setupHistory();
     });
     setupSelection();
+    setupHistory();
   }
 
   postEvent(event: string, ...args: any[]) {
@@ -246,7 +261,7 @@ export default class Designer {
     return this._simulatorProps || {};
   }
 
-  @obx.ref private _suspensed: boolean = false;
+  @obx.ref private _suspensed = false;
 
   get suspensed(): boolean {
     return this._suspensed;
@@ -318,7 +333,7 @@ export default class Designer {
     return maps;
   }
 
-  autorun(action: (context: { firstRun: boolean }) => void, sync: boolean = false): () => void {
+  autorun(action: (context: { firstRun: boolean }) => void, sync = false): () => void {
     return autorun(action, sync as true);
   }
 

packages/designer/src/designer/document/document-view.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import DocumentModel from './document-model';
-import { observer } from '@recore/core-obx';
+import { observer } from '@recore/obx-react';
 import classNames from 'classnames';
 
 @observer

packages/designer/src/designer/project-view.tsx

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { observer } from '@recore/core-obx';
+import { observer } from '@recore/obx-react';
 import Designer from './designer';
 import DocumentView from './document/document-view';
 

packages/plugin-settings-pane/src/main.ts

@@ -415,12 +415,12 @@ export class SettingsMain implements SettingTarget {
         this.setup([]);
       }
     };
-    editor.on('designer.current-selection-change', setupSelection);
+    editor.on('designer.selection-change', setupSelection);
     if (editor.designer) {
       setupSelection(editor.designer.currentSelection);
     }
     this.disposeListener = () => {
-      editor.removeListener('designer.current-selection-change', setupSelection);
+      editor.removeListener('designer.selection-change', setupSelection);
     };
   }