From a9c4b97135be13ce78feead34a9cc45571767004 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8A=9B=E7=9A=93?= Date: Fri, 7 May 2021 16:10:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=BC=95=E6=93=8E=20?= =?UTF-8?q?init=20=E6=97=B6=E4=BC=A0=E5=85=A5=E5=8F=82=E6=95=B0,=20?= =?UTF-8?q?=E9=80=90=E6=B8=90=E5=8F=96=E4=BB=A3=20editor=20=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E7=9A=84=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designer/src/builtin-simulator/host.ts | 1 - .../designer/src/document/node/props/prop.ts | 10 +- packages/editor-core/src/config.ts | 106 ++++++++++++++++++ packages/editor-core/src/index.ts | 1 + packages/engine/src/engine-core.ts | 51 ++++++++- packages/plugin-designer/src/index.tsx | 16 +-- 6 files changed, 168 insertions(+), 17 deletions(-) create mode 100644 packages/editor-core/src/config.ts diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index cc3fdbb21..6a8b48516 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -357,7 +357,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost void; + }> + >(); + + constructor(config?: { [key: string]: any }) { + this.config = config || {}; + } + + has(key: string): boolean { + return this.config[key] !== undefined; + } + + get(key: string): any { + return this.config[key]; + } + + set(key: string, value: any) { + this.config[key] = value; + this.notifyGot(key); + } + + setConfig(config: { [key: string]: any }) { + if (config) { + Object.keys(config).forEach((key) => { + this.set(key, config[key]); + }); + } + } + + onceGot(key: string): Promise { + const val = this.config[key]; + if (val !== undefined) { + return Promise.resolve(val); + } + return new Promise((resolve) => { + this.setWait(key, resolve, true); + }); + } + + onGot(key: string, fn: (data: any) => void): () => void { + const val = this.config?.[key]; + if (val !== undefined) { + fn(val); + return () => {}; + } else { + this.setWait(key, fn); + return () => { + this.delWait(key, fn); + }; + } + } + + private notifyGot(key: string) { + let waits = this.waits.get(key); + if (!waits) { + return; + } + waits = waits.slice().reverse(); + let i = waits.length; + while (i--) { + waits[i].resolve(this.get(key)); + if (waits[i].once) { + waits.splice(i, 1); + } + } + if (waits.length > 0) { + this.waits.set(key, waits); + } else { + this.waits.delete(key); + } + } + + private setWait(key: string, resolve: (data: any) => void, once?: boolean) { + const waits = this.waits.get(key); + if (waits) { + waits.push({ resolve, once }); + } else { + this.waits.set(key, [{ resolve, once }]); + } + } + + private delWait(key: string, fn: any) { + const waits = this.waits.get(key); + if (!waits) { + return; + } + let i = waits.length; + while (i--) { + if (waits[i].resolve === fn) { + waits.splice(i, 1); + } + } + if (waits.length < 1) { + this.waits.delete(key); + } + } +} + +export const engineConfig = new EngineConfig(); diff --git a/packages/editor-core/src/index.ts b/packages/editor-core/src/index.ts index f8d71e139..61cb0a517 100644 --- a/packages/editor-core/src/index.ts +++ b/packages/editor-core/src/index.ts @@ -4,3 +4,4 @@ export * from './utils'; export * from './di'; export * from './hotkey'; export * from './widgets'; +export * from './config'; diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index 15410bcdf..9a73d421b 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -1,6 +1,6 @@ import { createElement } from 'react'; import { render } from 'react-dom'; -import { globalContext, Editor } from '@ali/lowcode-editor-core'; +import { globalContext, Editor, engineConfig } from '@ali/lowcode-editor-core'; import * as editorCabin from '@ali/lowcode-editor-core'; import { Designer, @@ -14,6 +14,7 @@ import * as skeletonCabin from '@ali/lowcode-editor-skeleton'; import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; import DesignerPlugin from '@ali/lowcode-plugin-designer'; import './modules/live-editing'; +import { isPlainObject } from '@ali/lowcode-utils'; export * from './modules/editor-types'; export * from './modules/skeleton-types'; @@ -67,6 +68,7 @@ export { // store, hotkey, monitor, + engineConfig, }; const getSelection = () => designer.currentDocument?.selection; @@ -95,6 +97,7 @@ const getSelection = () => designer.currentDocument?.selection; hotkey, monitor, init, + engineConfig, }; // 注册默认的 setters @@ -154,15 +157,55 @@ plugins.register((ctx: ILowCodePluginContext) => { }; }); -export async function init(container?: Element) { - let engineContainer = container; - if (!engineContainer) { +interface EngineOptions { + /** + * 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示 + */ + enableCondition?: boolean; + /** + * 设计模式，live 模式将会实时展示变量值 + */ + designMode?: 'design' | 'live'; + /** + * 设备类型 + */ + device?: 'default' | 'mobile' | string; + /** + * 语言 + */ + locale?: string; + /** + * 渲染器类型 + */ + renderEnv?: 'react' | 'rax' | string; + /** + * 设备类型映射器，处理设计器与渲染器中 device 的映射 + */ + deviceMapper?: { + transform: (originalDevice: string) => string; + }; + [key: string]: any; +} + +export async function init(container?: Element, options?: EngineOptions) { + let engineOptions = null; + let engineContainer = null; + if (isPlainObject(container)) { + engineOptions = container; engineContainer = document.createElement('div'); document.body.appendChild(engineContainer); + } else { + engineOptions = options; + engineContainer = container; + if (!container) { + engineContainer = document.createElement('div'); + document.body.appendChild(engineContainer); + } } engineContainer.id = 'engine'; await plugins.init(); + engineConfig.setConfig(engineOptions as any); render( createElement(Workbench, { skeleton, diff --git a/packages/plugin-designer/src/index.tsx b/packages/plugin-designer/src/index.tsx index d8c1d35b7..f1319cc4a 100644 --- a/packages/plugin-designer/src/index.tsx +++ b/packages/plugin-designer/src/index.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Editor } from '@ali/lowcode-editor-core'; +import { Editor, engineConfig } from '@ali/lowcode-editor-core'; import { DesignerView, Designer } from '@ali/lowcode-designer'; import { Asset } from '@ali/lowcode-utils'; import './index.scss'; @@ -49,14 +49,14 @@ export default class DesignerPlugin extends PureComponent