fix vc-page

packages/designer/src/designer/clipboard.ts

@@ -64,7 +64,7 @@ class Clipboard {
       return;
     }
     const copyPaster = document.createElement<'textarea'>('textarea');
-    copyPaster.style.cssText = 'position: relative;left: -9999px;';
+    copyPaster.style.cssText = 'position: absolute;left: -9999px;top:-100px';
     document.body.appendChild(copyPaster);
     const dispose = this.initCopyPaster(copyPaster);
     return () => {

packages/designer/src/document/document-model.ts

@@ -78,13 +78,13 @@ export class DocumentModel {
   }
 
   constructor(readonly project: Project, schema?: RootSchema) {
+    /*
+    // TODO
+    // use special purge process
     autorun(() => {
-      this.nodes.forEach((item) => {
-        if (item.parent == null && item !== this.rootNode) {
-          item.purge();
-        }
-      });
+      console.info(this.willPurgeSpace);
     }, true);
+    */
 
     if (!schema) {
       this._blank = true;
@@ -103,6 +103,17 @@ export class DocumentModel {
     this.setupListenActiveNodes();
   }
 
+  @obx.val private willPurgeSpace: Node[] = [];
+  addWillPurge(node: Node) {
+    this.willPurgeSpace.push(node);
+  }
+  removeWillPurge(node: Node) {
+    const i = this.willPurgeSpace.indexOf(node);
+    if (i > -1) {
+      this.willPurgeSpace.splice(i, 1);
+    }
+  }
+
   @computed isBlank() {
     return this._blank && !this.isModified();
   }
@@ -171,8 +182,10 @@ export class DocumentModel {
       // todo: this.activeNodes?.push(node);
     }
 
-    if (this.nodesMap.has(node.id)) {
-      this.nodesMap.get(node.id)!.internalSetParent(null);
+    const origin = this.nodesMap.get(node.id);
+    if (origin && origin !== node) {
+      // almost will not go here, ensure the id is unique
+      origin.internalSetWillPurge();
     }
 
     this.nodesMap.set(node.id, node);

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

@@ -20,6 +20,8 @@ import { ComponentMeta } from '../../component-meta';
 import { ExclusiveGroup, isExclusiveGroup } from './exclusive-group';
 import { TransformStage } from './transform-stage';
 
+
+
 /**
  * 基础节点
  *
@@ -202,6 +204,10 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     return this.componentName === 'Leaf';
   }
 
+  internalSetWillPurge() {
+    this.internalSetParent(null);
+    this.document.addWillPurge(this);
+  }
   /**
    * 内部方法，请勿使用
    */
@@ -215,11 +221,14 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     }
 
     this._parent = parent;
-    if (parent && !this.conditionGroup) {
-      // initial conditionGroup
-      const grp = this.getExtraProp('conditionGroup', false)?.getAsString();
-      if (grp) {
-        this.setConditionGroup(grp);
+    if (parent) {
+      this.document.removeWillPurge(this);
+      if (!this.conditionGroup) {
+        // initial conditionGroup
+        const grp = this.getExtraProp('conditionGroup', false)?.getAsString();
+        if (grp) {
+          this.setConditionGroup(grp);
+        }
       }
     }
   }

packages/react-renderer/src/engine/index.jsx

@@ -4,23 +4,24 @@ import PropTypes from 'prop-types';
 import Debug from 'debug';
 import AppContext from '../context/appContext';
 import { isFileSchema, goldlog } from '../utils';
-import Page from './pageEngine';
-import Component from './compEngine';
-import Block from './blockEngine';
-import Addon from './addonEngine';
-import Temp from './tempEngine';
+import PageEngine from './pageEngine';
+import ComponentEngine from './compEngine';
+import BlockEngine from './blockEngine';
+import AddonEngine from './addonEngine';
+import TempEngine from './tempEngine';
 import { isEmpty } from '@ali/b3-one/lib/obj';
+import BaseEngine from './base';
 
 window.React = React;
 window.ReactDom = ReactDOM;
 
 const debug = Debug('engine:entry');
 const ENGINE_COMPS = {
-  Page,
-  Component,
-  Block,
-  Addon,
-  Temp,
+  PageEngine,
+  ComponentEngine,
+  BlockEngine,
+  AddonEngine,
+  TempEngine,
 };
 export default class Engine extends PureComponent {
   static dislayName = 'engine';
@@ -98,8 +99,15 @@ export default class Engine extends PureComponent {
       return '模型结构异常';
     }
     debug('entry.render');
-    const allComponents = { ...components, ...ENGINE_COMPS };
-    const Comp = allComponents[schema.componentName];
+    const { componentName } = schema;
+    const allComponents = { ...ENGINE_COMPS, ...components };
+    let Comp = allComponents[componentName];
+    if (Comp && Comp.prototype) {
+      const proto = Comp.prototype;
+      if (!(Comp.prototype instanceof BaseEngine)) {
+        Comp = ENGINE_COMPS[`${componentName}Engine`];
+      }
+    }
     if (Comp) {
       return (
         <AppContext.Provider

packages/react-renderer/src/engine/pageEngine.jsx

@@ -62,7 +62,7 @@ export default class PageEngine extends BaseEngine {
   }
 
   render() {
-    const { __schema } = this.props;
+    const { __schema, __components } = this.props;
     if (!isSchema(__schema, true) || __schema.componentName !== 'Page') {
       return '页面schema结构异常！';
     }
@@ -72,7 +72,34 @@ export default class PageEngine extends BaseEngine {
     });
     this.__render();
 
-    const { id, className, style, autoLoading, defaultHeight = 300, loading } = this.__parseData(__schema.props);
+    const props = this.__parseData(__schema.props);
+    const { id, className, style, autoLoading, defaultHeight = 300, loading } = props;
+
+    const { Page } = __components;
+    if (Page) {
+      const { engine } = this.context || {};
+      return (
+        <AppContext.Provider
+          value={{
+            ...this.context,
+            pageContext: this,
+            blockContext: this,
+          }}
+        >
+          {engine.createElement(
+            Page,
+            {
+              ...props,
+              ref: this.__getRef,
+              className: classnames(getFileCssName(__schema.fileName), className, this.props.className),
+              __id: __schema.id,
+            },
+            this.__createDom(),
+          )}
+        </AppContext.Provider>
+      );
+    }
+
     const renderContent = () => (
       <AppContext.Provider
         value={{

packages/react-simulator-renderer/src/renderer-view.tsx

@@ -41,7 +41,6 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
   }
   render() {
     const { renderer } = this.props;
-    console.info(renderer.components)
     return (
       <LowCodeRenderer
         schema={renderer.schema}
@@ -55,7 +54,11 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           const { __id, __desingMode, ...viewProps } = props;
           viewProps.componentId = __id;
           viewProps._leaf = host.document.getNode(__id);
-          return createElement(Component, viewProps, children);
+          return createElement(
+            Component,
+            viewProps,
+            children == null ? null : Array.isArray(children) ? children : [children],
+          );
         }}
         onCompGetRef={(schema: any, ref: ReactInstance | null) => {
           renderer.mountInstance(schema.id, ref);

packages/react-simulator-renderer/src/renderer.less

@@ -1,12 +1,11 @@
-html {
-  padding-bottom: 30px;
-  background: transparent !important;
-}
-
 body, html {
   display: block;
-  min-height: 100%;
   background: white;
+  padding: 0;
+  margin: 0;
+}
+html.engine-design-mode {
+  padding-bottom: 30px;
 }
 
 html.engine-cursor-move, html.engine-cursor-move * {
@@ -21,28 +20,6 @@ html.engine-cursor-ew-resize, html.engine-cursor-ew-resize * {
   cursor: ew-resize !important
 }
 
-body, #engine {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  text-rendering: optimizeLegibility;
-  -webkit-user-select: none;
-  -webkit-user-drag: none;
-  -webkit-text-size-adjust: none;
-  -webkit-touch-callout: none;
-  -webkit-font-smoothing: antialiased;
-}
-
-html {
-  min-width: 1024px;
-}
-
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
@@ -53,10 +30,6 @@ html {
   border-radius: 5px;
 }
 
-html.engine-blur #engine {
-  -webkit-filter: blur(4px);
-}
-
 .lc-container {
   &:empty {
     background: #f2f3f5;
@@ -101,3 +74,17 @@ html.engine-blur #engine {
   width: 100%;
   white-space: nowrap;
 }
+
+body.engine-document {
+  &:after, &:before {
+    content: "";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+#app {
+  height: 100vh;
+}

packages/react-simulator-renderer/src/renderer.ts

@@ -244,6 +244,9 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
       document.body.appendChild(container);
       container.id = containerId;
     }
+    // ==== compatiable vision
+    document.documentElement.classList.add('engine-page');
+    document.body.classList.add('engine-document'); // important! Stylesheet.invoke depends
 
     reactRender(createElement(SimulatorRendererView, { renderer: this }), container);
   }

packages/vision-polyfill/src/bundle/bundle.ts

@@ -1,7 +1,6 @@
 import lg from '@ali/vu-logger';
 import { ComponentClass, ComponentType } from 'react';
 import Prototype from './prototype';
-import { ComponentMeta } from '@ali/lowcode-designer';
 import { designer } from '../editor';
 
 function basename(name: string) {

packages/vision-polyfill/src/demo/index.ts

@@ -144,7 +144,6 @@ async function loadAssets() {
       });
     }
     await Promise.all(tasks);
-
     // proccess snippets
   }
 

packages/vision-polyfill/src/demo/upgrade-assets.js

@@ -23,19 +23,18 @@ export function upgradeAssetsBundle(assets) {
       props: [],
     };
 
-    packages.push({
-      urls: item.urls,
-      library: item.library,
-      package: item.packageName,
-      version: item.version,
-    });
-
     if (item.prototypeConfigsUrl) {
       xPrototypes.push({
         package: item.packageName,
         urls: item.prototypeConfigsUrl,
       });
     } else if (item.components) {
+      packages.push({
+        urls: item.urls,
+        library: item.library,
+        package: item.packageName,
+        version: item.version,
+      });
       const meta = item.components[0];
       metadata.componentName = meta.componentName;
       metadata.configure = meta.configure;

packages/vision-polyfill/src/drag-engine.ts

@@ -10,18 +10,10 @@ const DragEngine = {
         return null;
       }
       if (isNode(r)) {
-        return {
-          type: DragObjectType.NodeData,
-          data: r.export(TransformStage.Save),
-        };
-
-        // FIXME! designer has bug
-        /*
         return {
           type: DragObjectType.Node,
           nodes: [r],
         };
-        */
       } else {
         return {
           type: DragObjectType.NodeData,