From 0fecf68b83a8e62b837f16ffdc087f5f8910a88a Mon Sep 17 00:00:00 2001 From: kangwei Date: Sun, 26 Apr 2020 00:05:34 +0800 Subject: [PATCH] fix vc-page --- packages/designer/src/designer/clipboard.ts | 2 +- .../designer/src/document/document-model.ts | 27 +++++++--- packages/designer/src/document/node/node.ts | 19 +++++-- packages/react-renderer/src/engine/index.jsx | 32 +++++++----- .../react-renderer/src/engine/pageEngine.jsx | 31 ++++++++++- .../src/renderer-view.tsx | 7 ++- .../src/renderer.less | 51 +++++++------------ .../react-simulator-renderer/src/renderer.ts | 3 ++ packages/vision-polyfill/src/bundle/bundle.ts | 1 - packages/vision-polyfill/src/demo/index.ts | 1 - .../src/demo/upgrade-assets.js | 13 +++-- packages/vision-polyfill/src/drag-engine.ts | 8 --- 12 files changed, 117 insertions(+), 78 deletions(-) diff --git a/packages/designer/src/designer/clipboard.ts b/packages/designer/src/designer/clipboard.ts index 051293e30..4e44067be 100644 --- a/packages/designer/src/designer/clipboard.ts +++ b/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 () => { diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index 2a62b2c68..c5cd064d8 100644 --- a/packages/designer/src/document/document-model.ts +++ b/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); diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index 391dcdd9d..6f8fe58d8 100644 --- a/packages/designer/src/document/node/node.ts +++ b/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 { return this.componentName === 'Leaf'; } + internalSetWillPurge() { + this.internalSetParent(null); + this.document.addWillPurge(this); + } /** * 内部方法，请勿使用 */ @@ -215,11 +221,14 @@ export class Node { } 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); + } } } } diff --git a/packages/react-renderer/src/engine/index.jsx b/packages/react-renderer/src/engine/index.jsx index deda45d03..568b0b0b3 100644 --- a/packages/react-renderer/src/engine/index.jsx +++ b/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 ( + {engine.createElement( + Page, + { + ...props, + ref: this.__getRef, + className: classnames(getFileCssName(__schema.fileName), className, this.props.className), + __id: __schema.id, + }, + this.__createDom(), + )} + + ); + } + const renderContent = () => ( { } render() { const { renderer } = this.props; - console.info(renderer.components) return ( { 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); diff --git a/packages/react-simulator-renderer/src/renderer.less b/packages/react-simulator-renderer/src/renderer.less index 00fa0e548..b22015e96 100644 --- a/packages/react-simulator-renderer/src/renderer.less +++ b/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; +} diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index 54bf16a26..9cf819df0 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/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); } diff --git a/packages/vision-polyfill/src/bundle/bundle.ts b/packages/vision-polyfill/src/bundle/bundle.ts index 7c4407433..6e00f7e58 100644 --- a/packages/vision-polyfill/src/bundle/bundle.ts +++ b/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) { diff --git a/packages/vision-polyfill/src/demo/index.ts b/packages/vision-polyfill/src/demo/index.ts index d6410841d..af165b707 100644 --- a/packages/vision-polyfill/src/demo/index.ts +++ b/packages/vision-polyfill/src/demo/index.ts @@ -144,7 +144,6 @@ async function loadAssets() { }); } await Promise.all(tasks); - // proccess snippets } diff --git a/packages/vision-polyfill/src/demo/upgrade-assets.js b/packages/vision-polyfill/src/demo/upgrade-assets.js index bc33ca981..770bdf796 100644 --- a/packages/vision-polyfill/src/demo/upgrade-assets.js +++ b/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; diff --git a/packages/vision-polyfill/src/drag-engine.ts b/packages/vision-polyfill/src/drag-engine.ts index 8370297ca..b6e2fc8a1 100644 --- a/packages/vision-polyfill/src/drag-engine.ts +++ b/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,