From dc8542a8fabcdc7787885d6c409b3c40dbbd744f Mon Sep 17 00:00:00 2001 From: kangwei Date: Wed, 12 Aug 2020 18:05:07 +0800 Subject: [PATCH] complete router --- .../bem-tools/border-detecting.tsx | 5 +- .../bem-tools/border-resizing.tsx | 15 +- .../bem-tools/border-selecting.tsx | 4 +- .../builtin-simulator/bem-tools/insertion.tsx | 2 +- .../designer/src/builtin-simulator/host.ts | 181 ++++++++++------- packages/designer/src/designer/detecting.ts | 2 +- packages/designer/src/designer/dragon.ts | 48 +++-- packages/designer/src/document/index.ts | 1 - .../src/document/node/exclusive-group.ts | 4 + packages/designer/src/project/project.less | 12 +- packages/designer/src/project/project.ts | 24 ++- .../editor-preset-vision/src/bundle/trunk.ts | 1 - .../editor-skeleton/src/layouts/left-area.tsx | 2 +- .../editor-skeleton/src/layouts/top-area.tsx | 2 +- packages/plugin-outline-pane/src/main.ts | 3 - .../src/renderer-view.tsx | 81 +++++--- .../react-simulator-renderer/src/renderer.ts | 191 +++++++++++------- packages/utils/src/cursor.ts | 2 +- 18 files changed, 336 insertions(+), 244 deletions(-) diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx index f6bd20460..eb3084bc5 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx @@ -57,7 +57,10 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> { @computed get current() { const host = this.props.host; - const doc = host.document; + const doc = host.currentDocument; + if (!doc) { + return null; + } const selection = doc.selection; const current = host.designer.detecting.current; if (!current || current.document !== doc || selection.has(current.id)) { diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx index a4947ad7d..e087540fa 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import { SimulatorContext } from '../context'; import { BuiltinSimulatorHost } from '../host'; import { OffsetObserver, Designer } from '../../designer'; +import { Node } from '../../document'; @observer export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost }> { @@ -19,8 +20,8 @@ export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost } @computed get selecting() { - const doc = this.host.document; - if (doc.suspensed) { + const doc = this.host.currentDocument; + if (!doc || doc.suspensed) { return null; } const selection = doc.selection; @@ -146,9 +147,9 @@ export class BoxResizingInstance extends Component<{ metaData.experimental.callbacks && typeof metaData.experimental.callbacks.onResize === 'function' ) { - e.trigger = direction; - e.deltaX = moveX; - e.deltaY = moveY; + (e as any).trigger = direction; + (e as any).deltaX = moveX; + (e as any).deltaY = moveY; metaData.experimental.callbacks.onResize(e, node); } }; @@ -161,7 +162,7 @@ export class BoxResizingInstance extends Component<{ metaData.experimental.callbacks && typeof metaData.experimental.callbacks.onResizeStart === 'function' ) { - e.trigger = direction; + (e as any).trigger = direction; metaData.experimental.callbacks.onResizeStart(e, node); } }; @@ -174,7 +175,7 @@ export class BoxResizingInstance extends Component<{ metaData.experimental.callbacks && typeof metaData.experimental.callbacks.onResizeEnd === 'function' ) { - e.trigger = direction; + (e as any).trigger = direction; metaData.experimental.callbacks.onResizeStart(e, node); } diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx index 7adce76b4..e25dae8d4 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx @@ -198,8 +198,8 @@ export class BorderSelecting extends Component<{ host: BuiltinSimulatorHost }> { } @computed get selecting() { - const doc = this.host.document; - if (doc.suspensed || this.host.liveEditing.editing) { + const doc = this.host.currentDocument; + if (!doc || doc.suspensed || this.host.liveEditing.editing) { return null; } const selection = doc.selection; diff --git a/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx b/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx index 90b65ecc8..1b170f0c7 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx @@ -119,7 +119,7 @@ export class InsertionView extends Component<{ host: BuiltinSimulatorHost }> { render() { const { host } = this.props; - const loc = host.document.dropLocation; + const loc = host.currentDocument?.dropLocation; if (!loc) { return null; } diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 773e690c3..0b9fcb6cb 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -2,7 +2,7 @@ import { obx, autorun, computed, getPublicPath, hotkey, focusTracker } from '@al import { ISimulatorHost, Component, NodeInstance, ComponentInstance } from '../simulator'; import Viewport from './viewport'; import { createSimulator } from './create-simulator'; -import { Node, ParentalNode, DocumentModel, isNode, contains, isRootNode } from '../document'; +import { Node, ParentalNode, isNode, contains, isRootNode } from '../document'; import ResourceConsumer from './resource-consumer'; import { AssetLevel, @@ -89,6 +89,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost void; firstRun: boolean }) => void) { + return autorun(fn as any, true); + } + purge(): void { // todo } @@ -245,9 +253,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost { // fix for popups close logic document.dispatchEvent(new Event('mousedown')); - if (this.liveEditing.editing) { + const documentModel = this.project.currentDocument; + if (this.liveEditing.editing || !documentModel) { return; } + const selection = documentModel.selection; // stop response document focus event downEvent.stopPropagation(); downEvent.preventDefault(); @@ -267,8 +275,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost { @@ -280,6 +289,8 @@ export class BuiltinSimulatorHost implements ISimulatorHost { if (!detecting.enable) { return; @@ -368,7 +379,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost detecting.leave(this.document); + const leave = () => detecting.leave(this.project.currentDocument); doc.addEventListener('mouseover', hover, true); doc.addEventListener('mouseleave', leave, false); @@ -383,7 +394,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost { - detecting.leave(this.document); + detecting.leave(this.project.currentDocument); doc.removeEventListener('mouseover', hover, true); doc.removeEventListener('mouseleave', leave, false); this.disableHovering = undefined; @@ -406,7 +417,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost item.contains(targetElement), @@ -450,10 +464,12 @@ export class BuiltinSimulatorHost implements ISimulatorHost; } = {}; setInstance(docId: string, id: string, instances: ComponentInstance[] | null) { - if (hasOwnProperty(this.instancesMap, docId)) { + if (!hasOwnProperty(this.instancesMap, docId)) { this.instancesMap[docId] = new Map(); } if (instances == null) { @@ -524,17 +541,18 @@ export class BuiltinSimulatorHost implements ISimulatorHost { + return this.getClosestNodeInstance(instance, context.nodeId)?.instance === context.instance + }); } /** @@ -659,7 +677,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost | undefined; @@ -984,11 +1006,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost(); if (isDragNodeObject(dragObject)) { const nodes = dragObject.nodes; @@ -1008,63 +1024,70 @@ export class BuiltinSimulatorHost implements ISimulatorHost, e: LocateEvent) { const children = container.children; - if (!children || children.length < 1) { + const document = this.project.currentDocument!; + if (!children || children.isEmpty()) { return null; } let nearDistance: any = null; let nearBy: any = null; - for (let i = 0, l = children.length; i < l; i++) { - let child: any = children[i]; - if (!isElementNode(child)) { + for (let i = 0, l = children.size; i < l; i++) { + let child = children.get(i); + + if (!child) { continue; } - if (hasConditionFlow(child)) { - const bn = child.conditionFlow; + if (child.conditionGroup) { + const bn = child.conditionGroup; i = bn.index + bn.length - 1; child = bn.visibleNode; } - const rect = this.document.computeRect(child); + if (!child.isParental() || drillDownExcludes.has(child)) { + continue; + } + // TODO: + this.findDOMNodes(instance); + this.getComponentInstances(child) + const rect = this.computeRect(child); if (!rect) { continue; } + /* if (isPointInRect(e, rect)) { return child; } @@ -1164,11 +1196,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost { - // TODO: not use actived, - if (doc.actived && doc.simulator?.sensorAvailable) { - return doc.simulator; - } - return null; - }) - .filter(Boolean) as any; + return Array.from( + new Set( + this.designer.project.documents + .map((doc) => { + // TODO: not use actived, + if (doc.actived && doc.simulator?.sensorAvailable) { + return doc.simulator; + } + return null; + }) + .filter(Boolean) as any, + ), + ); + } + + private getSimulators() { + return new Set(this.designer.project.documents.map(doc => doc.simulator)); } // #region ======== drag and drop helpers ============ private setNativeSelection(enableFlag: boolean) { setNativeSelection(enableFlag); - this.designer.project.documents.forEach((doc) => { - doc.simulator?.setNativeSelection(enableFlag); + this.getSimulators().forEach((sim) => { + sim?.setNativeSelection(enableFlag); }); } @@ -541,8 +549,8 @@ export class Dragon { */ private setDraggingState(state: boolean) { cursor.setDragging(state); - this.designer.project.documents.forEach((doc) => { - doc.simulator?.setDraggingState(state); + this.getSimulators().forEach((sim) => { + sim?.setDraggingState(state); }); } @@ -551,8 +559,8 @@ export class Dragon { */ private setCopyState(state: boolean) { cursor.setCopy(state); - this.designer.project.documents.forEach((doc) => { - doc.simulator?.setCopyState(state); + this.getSimulators().forEach((sim) => { + sim?.setCopyState(state); }); } @@ -561,8 +569,8 @@ export class Dragon { */ private clearState() { cursor.release(); - this.designer.project.documents.forEach((doc) => { - doc.simulator?.clearState(); + this.getSimulators().forEach((sim) => { + sim?.clearState(); }); } // #endregion diff --git a/packages/designer/src/document/index.ts b/packages/designer/src/document/index.ts index 66c7dc65f..88601de6a 100644 --- a/packages/designer/src/document/index.ts +++ b/packages/designer/src/document/index.ts @@ -1,4 +1,3 @@ -export * from './document-view'; export * from './document-model'; export * from './node'; export * from './selection'; diff --git a/packages/designer/src/document/node/exclusive-group.ts b/packages/designer/src/document/node/exclusive-group.ts index cd4b46030..384d21736 100644 --- a/packages/designer/src/document/node/exclusive-group.ts +++ b/packages/designer/src/document/node/exclusive-group.ts @@ -28,6 +28,10 @@ export class ExclusiveGroup { return this.children[0]!; } + get index() { + return this.firstNode.index; + } + add(node: Node) { if (node.nextSibling && node.nextSibling.conditionGroup === this) { const i = this.children.indexOf(node.nextSibling); diff --git a/packages/designer/src/project/project.less b/packages/designer/src/project/project.less index fcfba65c8..a83e983e2 100644 --- a/packages/designer/src/project/project.less +++ b/packages/designer/src/project/project.less @@ -12,17 +12,9 @@ background: transparent url(//img.alicdn.com/tfs/TB1xLKQAbj1gK0jSZFuXXcrHpXa-90-90.png) center 30% no-repeat; padding-top: 50%; } - .lc-document { + + .lc-simulator-shell { width: 100%; height: 100%; - &-hidden { - // todo: - display: none; - } - - .lc-simulator-shell { - width: 100%; - height: 100%; - } } } diff --git a/packages/designer/src/project/project.ts b/packages/designer/src/project/project.ts index b2be6eb90..bf67bc192 100644 --- a/packages/designer/src/project/project.ts +++ b/packages/designer/src/project/project.ts @@ -11,8 +11,6 @@ export class Project { private data: ProjectSchema = { version: '1.0.0', componentsMap: [], componentsTree: [] }; - @obx.ref canvasDisplayMode: 'exclusive' | 'overview' = 'exclusive'; - private _simulator?: ISimulatorHost; /** @@ -112,14 +110,26 @@ export class Project { | string, ): any {} + + private documentsMap = new Map(); + getDocument(id: string): DocumentModel | null { + return this.documentsMap.get(id) || null; + } + + createDocument(data?: RootSchema): DocumentModel { + const doc = new DocumentModel(this, data); + this.documents.push(doc); + this.documentsMap.set(doc.id, doc); + return doc; + } + open(doc?: string | DocumentModel | RootSchema): DocumentModel | null { if (!doc) { const got = this.documents.find((item) => item.isBlank()); if (got) { return got.open(); } - doc = new DocumentModel(this); - this.documents.push(doc); + doc = this.createDocument(); return doc.open(); } if (typeof doc === 'string') { @@ -130,8 +140,7 @@ export class Project { const data = this.data.componentsTree.find((data) => data.fileName === doc); if (data) { - doc = new DocumentModel(this, data); - this.documents.push(doc); + doc = this.createDocument(data); return doc.open(); } @@ -142,8 +151,7 @@ export class Project { return doc.open(); } - doc = new DocumentModel(this, doc); - this.documents.push(doc); + doc = this.createDocument(doc); return doc.open(); } diff --git a/packages/editor-preset-vision/src/bundle/trunk.ts b/packages/editor-preset-vision/src/bundle/trunk.ts index b8e0f19d6..939a721be 100644 --- a/packages/editor-preset-vision/src/bundle/trunk.ts +++ b/packages/editor-preset-vision/src/bundle/trunk.ts @@ -86,7 +86,6 @@ export class Trunk { } registerSetter(type: string, setter: CustomView | RegisteredSetter) { - // console.warn('Trunk.registerSetter is deprecated'); registerSetter(type, setter); } diff --git a/packages/editor-skeleton/src/layouts/left-area.tsx b/packages/editor-skeleton/src/layouts/left-area.tsx index 53dd4805b..df1cf88e5 100644 --- a/packages/editor-skeleton/src/layouts/left-area.tsx +++ b/packages/editor-skeleton/src/layouts/left-area.tsx @@ -25,7 +25,7 @@ class Contents extends Component<{ area: Area }> { const top: any[] = []; const bottom: any[] = []; area.container.items.forEach((item) => { - const content =
{item.content}
; + const content =
{item.content}
; if (item.align === 'bottom') { bottom.push(content); } else { diff --git a/packages/editor-skeleton/src/layouts/top-area.tsx b/packages/editor-skeleton/src/layouts/top-area.tsx index 4e4b05258..a382ac468 100644 --- a/packages/editor-skeleton/src/layouts/top-area.tsx +++ b/packages/editor-skeleton/src/layouts/top-area.tsx @@ -30,7 +30,7 @@ class Contents extends Component<{ area: Area, itemClassName?: string }> { return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1); }).forEach(item => { const content = ( -
+
{item.content}
); diff --git a/packages/plugin-outline-pane/src/main.ts b/packages/plugin-outline-pane/src/main.ts index 651981aa7..75439fc5b 100644 --- a/packages/plugin-outline-pane/src/main.ts +++ b/packages/plugin-outline-pane/src/main.ts @@ -82,9 +82,6 @@ export class OutlineMain implements ISensor, ITreeBoard, IScrollable { e.target = document.elementFromPoint(e.canvasX!, e.canvasY!); } - // documentModel : 目标文档 - e.documentModel = this._designer?.currentDocument; - // 事件已订正 e.fixed = true; return e; diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index 81ecba8af..a3eac58d9 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -2,6 +2,7 @@ import LowCodeRenderer from '@ali/lowcode-react-renderer'; import { ReactInstance, Fragment, Component, createElement } from 'react'; import { observer } from '@recore/obx-react'; import { SimulatorRendererContainer, DocumentInstance } from './renderer'; +import { Router, Route, Switch } from 'react-router'; import './renderer.less'; // patch cloneElement avoid lost keyProps @@ -38,17 +39,19 @@ export default class SimulatorRendererView extends Component<{ rendererContainer render() { const { rendererContainer } = this.props; return ( - - { - rendererContainer.redirect(currentPath); - }}> - {rendererContainer.getDocumentInstances().map((instance) => { - return - - - })} - - + + + + {rendererContainer.documentInstances.map((instance) => ( + } + /> + ))} + + + ); } } @@ -106,7 +109,6 @@ class Renderer extends Component<{ documentInstance: DocumentInstance }> { schema={documentInstance.schema} components={container.components} appHelper={container.context} - // context={renderer.context} designMode={designMode} suspended={documentInstance.suspended} self={documentInstance.scope} @@ -116,27 +118,44 @@ class Renderer extends Component<{ documentInstance: DocumentInstance }> { const leaf = documentInstance.getNode(__id); viewProps._leaf = leaf; viewProps._componentName = leaf?.componentName; - let _children = leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children; + let _children = leaf?.isContainer() + ? children == null + ? [] + : Array.isArray(children) + ? children + : [children] + : children; if (props.children && props.children.length) { if (Array.isArray(props.children)) { - _children = Array.isArray(_children) ? _children.concat(props.children) : props.children.unshift(_children); + _children = Array.isArray(_children) + ? _children.concat(props.children) + : props.children.unshift(_children); } else { - Array.isArray(_children) && _children.push(props.children) || (_children = [_children].push(props.children)); + (Array.isArray(_children) && _children.push(props.children)) || + (_children = [_children].push(props.children)); } } // 如果是容器 && 无children && 高宽为空 增加一个占位容器，方便拖动 - if (leaf?.isContainer() && (_children == null || !_children.length) && (!viewProps.style || Object.keys(viewProps.style).length == 0)){ - _children =
- 拖拽组件或模板到这里 -
+ if ( + leaf?.isContainer() && + (_children == null || !_children.length) && + (!viewProps.style || Object.keys(viewProps.style).length == 0) + ) { + _children = ( +
+ 拖拽组件或模板到这里 +
+ ); } if (viewProps._componentName === 'Menu') { @@ -159,17 +178,13 @@ class Renderer extends Component<{ documentInstance: DocumentInstance }> { console.info('menuprops', viewProps); } - return createElement( - getDeviceView(Component, device, designMode), - viewProps, - _children, - ); + return createElement(getDeviceView(Component, device, designMode), viewProps, _children); }} onCompGetRef={(schema: any, ref: ReactInstance | null) => { documentInstance.mountInstance(schema.id, ref); }} //onCompGetCtx={(schema: any, ctx: object) => { - // renderer.mountContext(schema.id, ctx); + // documentInstance.mountContext(schema.id, ctx); //}} /> ); diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index f34d88b1c..9c5edc171 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/packages/react-simulator-renderer/src/renderer.ts @@ -9,8 +9,8 @@ import loader from './utils/loader'; import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes'; import { isESModule, isElement, cursor, setNativeSelection } from '@ali/lowcode-utils'; import { RootSchema, NpmInfo, ComponentSchema, TransformStage } from '@ali/lowcode-types'; -// just use types import { BuiltinSimulatorRenderer, NodeInstance, Component, DocumentModel, Node } from '@ali/lowcode-designer'; +import { createMemoryHistory, MemoryHistory } from 'history'; import Slot from './builtin-components/slot'; import Leaf from './builtin-components/leaf'; @@ -22,13 +22,13 @@ export class DocumentInstance { return this._schema; } - constructor(readonly container: SimulatorRendererContainer, readonly document: DocumentModel) { - this.dispose = host.connect(this, () => { - // sync layout config + private dispose?: () => void; + constructor(readonly container: SimulatorRendererContainer, readonly document: DocumentModel) { + this.dispose = host.autorun(() => { // sync schema - this._schema = host.document.export(1); - }) + this._schema = document.export(1); + }); } @computed get suspended(): any { @@ -38,6 +38,14 @@ export class DocumentInstance { return null; } + get path(): string { + return '/' + this.document.fileName; + } + + get id() { + return this.document.id; + } + private unmountIntance(id: string, instance: ReactInstance) { const instances = this.instancesMap.get(id); if (instances) { @@ -114,62 +122,6 @@ export class DocumentInstance { // this.ctxMap.set(id, ctx); } - createComponent(schema: ComponentSchema): Component | null { - const _schema = { - ...schema, - }; - _schema.methods = {}; - _schema.lifeCycles = {}; - - const processPropsSchema = (propsSchema: any, propsMap: any): any => { - if (!propsSchema) { - return {}; - } - - const result = {...propsSchema}; - const reg = /^(?:this\.props|props)\.(\S+)$/; - Object.keys(propsSchema).map((key: string) => { - if (propsSchema[key].type === 'JSExpression') { - const { value } = propsSchema[key]; - const matched = reg.exec(value); - if (matched) { - const propName = matched[1]; - result[key] = propsMap[propName]; - } - } - }); - return result; - }; - - const getElement = (componentsMap: any, schema: any, propsMap: any): ReactElement => { - const Com = componentsMap[schema.componentName]; - let children = null; - if (schema.children && schema.children.length > 0) { - children = schema.children.map((item: any) => getElement(componentsMap, item, propsMap)); - } - const _leaf = this.document.designer.currentDocument?.createNode(schema); - const node = this.document.createNode(schema); - let props = processPropsSchema(schema.props, propsMap); - props = this.document.designer.transformProps(props, node, TransformStage.Init); - props = this.document.designer.transformProps(props, node, TransformStage.Render); - return createElement(Com, {...props, _leaf}, children); - } - - const container = this.container; - class Com extends React.Component { - render() { - const componentsMap = container.componentsMap; - let children = null; - if (_schema.children && Array.isArray(_schema.children)) { - children = _schema.children?.map((item:any) => getElement(componentsMap, item, this.props)); - } - return createElement(React.Fragment, {}, children); - } - } - - return Com; - } - getNode(id: string): Node | null { return this.document.getNode(id); } @@ -178,12 +130,14 @@ export class DocumentInstance { export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { readonly isSimulatorRenderer = true; private dispose?: () => void; + readonly history: MemoryHistory; + + @obx.ref private _documentInstances: DocumentInstance[] = []; + get documentInstances() { + return this._documentInstances; + } constructor() { - if (!host) { - return; - } - this.dispose = host.connect(this, () => { // sync layout config // todo: split with others, not all should recompute @@ -199,6 +153,27 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { // sync device this._device = host.device; }); + const documentInstanceMap = new Map(); + host.autorun(() => { + this._documentInstances = host.project.documents.map((doc) => { + let inst = documentInstanceMap.get(doc.id); + if (!inst) { + inst = new DocumentInstance(this, doc); + documentInstanceMap.set(doc.id, inst); + } + return inst; + }); + console.info('instances', this._documentInstances); + }); + const initialEntry = host.project.currentDocument + ? documentInstanceMap.get(host.project.currentDocument.id)!.path + : '/'; + this.history = createMemoryHistory({ + initialEntries: [initialEntry], + }); + this.history.listen((location, action) => { + console.info(location); + }); host.componentsConsumer.consume(async (componentsAsset) => { if (componentsAsset) { await this.load(componentsAsset); @@ -208,10 +183,13 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { host.injectionConsumer.consume((data) => { // sync utils, i18n, contants,... config this._appContext = { - utils: {}, - constants: { - name: 'demo', + utils: { + router: { + push() {}, + replace() {}, + }, }, + constants: {}, }; }); } @@ -255,13 +233,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { return loader.load(asset); } - private documentInstanceMap = new Map(); - - - redirect(path: string) { - - } - getComponent(componentName: string) { const paths = componentName.split('.'); const subs: string[] = []; @@ -308,6 +279,66 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { cursor.release(); } + createComponent(schema: ComponentSchema): Component | null { + return null; + // TODO: use ComponentEngine refactor + /* + const _schema = { + ...schema, + }; + _schema.methods = {}; + _schema.lifeCycles = {}; + + const processPropsSchema = (propsSchema: any, propsMap: any): any => { + if (!propsSchema) { + return {}; + } + + const result = { ...propsSchema }; + const reg = /^(?:this\.props|props)\.(\S+)$/; + Object.keys(propsSchema).map((key: string) => { + if (propsSchema[key].type === 'JSExpression') { + const { value } = propsSchema[key]; + const matched = reg.exec(value); + if (matched) { + const propName = matched[1]; + result[key] = propsMap[propName]; + } + } + }); + return result; + }; + + const getElement = (componentsMap: any, schema: any, propsMap: any): ReactElement => { + const Com = componentsMap[schema.componentName]; + let children = null; + if (schema.children && schema.children.length > 0) { + children = schema.children.map((item: any) => getElement(componentsMap, item, propsMap)); + } + const _leaf = this.document.designer.currentDocument?.createNode(schema); + const node = this.document.createNode(schema); + let props = processPropsSchema(schema.props, propsMap); + props = this.document.designer.transformProps(props, node, TransformStage.Init); + props = this.document.designer.transformProps(props, node, TransformStage.Render); + return createElement(Com, { ...props, _leaf }, children); + }; + + const container = this; + class Com extends React.Component { + render() { + const componentsMap = container.componentsMap; + let children = null; + if (_schema.children && Array.isArray(_schema.children)) { + children = _schema.children?.map((item: any) => getElement(componentsMap, item, this.props)); + } + return createElement(React.Fragment, {}, children); + } + } + + return Com; + */ + } + private _running = false; run() { if (this._running) { @@ -321,6 +352,7 @@ export class SimulatorRendererContainer 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 @@ -401,9 +433,12 @@ const builtinComponents = { Leaf, }; -function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType }) { +function buildComponents( + libraryMap: LibraryMap, + componentsMap: { [componentName: string]: NpmInfo | ComponentType }, +) { const components: any = { - ...builtinComponents + ...builtinComponents, }; Object.keys(componentsMap).forEach((componentName) => { let component = componentsMap[componentName]; diff --git a/packages/utils/src/cursor.ts b/packages/utils/src/cursor.ts index 111fa12ea..e053bfdf9 100644 --- a/packages/utils/src/cursor.ts +++ b/packages/utils/src/cursor.ts @@ -42,7 +42,7 @@ export class Cursor { } } - private addState(state: string) { + addState(state: string) { if (!this.states.has(state)) { this.states.add(state); document.documentElement.classList.add(`lc-cursor-${state}`);