From 688d86956d45b70fe8ee4e4e6404f044dce1455e Mon Sep 17 00:00:00 2001 From: kangwei Date: Thu, 16 Apr 2020 03:39:07 +0800 Subject: [PATCH] premerge --- package.json | 2 +- packages/designer/src/designer/designer.ts | 10 +- packages/designer/src/project/project.ts | 6 +- packages/editor-core/package.json | 2 + packages/editor-core/src/app-preset.ts | 45 +++++++ packages/editor-core/src/editor.ts | 111 ++++++------------ packages/globals/package.json | 1 + packages/globals/src/di/index.ts | 1 + packages/globals/src/di/ioc-context.ts | 4 + packages/plugin-components-pane/package.json | 3 +- packages/plugin-components-pane/src/index.tsx | 12 +- packages/plugin-designer/src/index.tsx | 4 +- packages/plugin-outline-pane/package.json | 1 + packages/plugin-outline-pane/src/main.ts | 14 ++- packages/plugin-sample-preview/src/index.tsx | 2 +- packages/plugin-sample-save/CHANGELOG.md | 28 ----- packages/plugin-sample-save/README.md | 3 - packages/plugin-sample-save/build.json | 9 -- packages/plugin-sample-save/package.json | 37 ------ packages/plugin-sample-save/src/index.scss | 3 - packages/plugin-sample-save/src/index.tsx | 21 ---- packages/plugin-sample-save/tsconfig.json | 9 -- packages/plugin-settings-pane/src/main.ts | 16 +-- packages/plugin-undo-redo/package.json | 1 + packages/plugin-undo-redo/src/index.tsx | 14 ++- packages/vision-polyfill/src/editor.ts | 14 ++- .../vision-polyfill/src/skeleton/skeleton.ts | 23 +++- .../src/skeleton/widget-views.tsx | 17 +-- tsconfig.json | 2 + 29 files changed, 178 insertions(+), 237 deletions(-) create mode 100644 packages/editor-core/src/app-preset.ts create mode 100644 packages/globals/src/di/ioc-context.ts delete mode 100644 packages/plugin-sample-save/CHANGELOG.md delete mode 100644 packages/plugin-sample-save/README.md delete mode 100644 packages/plugin-sample-save/build.json delete mode 100644 packages/plugin-sample-save/package.json delete mode 100644 packages/plugin-sample-save/src/index.scss delete mode 100644 packages/plugin-sample-save/src/index.tsx delete mode 100644 packages/plugin-sample-save/tsconfig.json diff --git a/package.json b/package.json index 0332bfcf4..c226f94ce 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "build": "lerna run build --stream", "clean": "rm -rf ./packages/*/lib ./packages/*/es ./packages/*/dist ./packages/*/build", "commit": "git-cz", - "pub": "lerna publish", + "pub": "lerna publish --cd-version patch", "setup": "./scripts/setup.sh", "start": "lerna exec --scope @ali/lowcode-vision-polyfill -- npm start", "test": "lerna run test --stream", diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index 4312ea80e..1c2e520b5 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -124,11 +124,11 @@ export class Designer { selectionDispose(); selectionDispose = undefined; } - this.postEvent('selection-change', this.currentSelection); + this.postEvent('selection.change', this.currentSelection); if (this.currentSelection) { const currentSelection = this.currentSelection; selectionDispose = currentSelection.onSelectionChange(() => { - this.postEvent('selection-change', currentSelection); + this.postEvent('selection.change', currentSelection); }); } }; @@ -147,9 +147,9 @@ export class Designer { } }; this.project.onCurrentDocumentChange(() => { - this.postEvent('current-document-change', this.currentDocument); - this.postEvent('selection-change', this.currentSelection); - this.postEvent('history-change', this.currentHistory); + this.postEvent('current-document.change', this.currentDocument); + this.postEvent('selection.change', this.currentSelection); + this.postEvent('history.change', this.currentHistory); setupSelection(); setupHistory(); }); diff --git a/packages/designer/src/project/project.ts b/packages/designer/src/project/project.ts index 25ce16956..019c5e780 100644 --- a/packages/designer/src/project/project.ts +++ b/packages/designer/src/project/project.ts @@ -142,7 +142,7 @@ export class Project { doc.suspense(); } }); - this.emitter.emit('current-document-change', actived); + this.emitter.emit('current-document.change', actived); } closeOthers(opened: DocumentModel) { @@ -154,9 +154,9 @@ export class Project { } onCurrentDocumentChange(fn: (doc: DocumentModel) => void): () => void { - this.emitter.on('current-document-change', fn); + this.emitter.on('current-document.change', fn); return () => { - this.emitter.removeListener('current-document-change', fn); + this.emitter.removeListener('current-document.change', fn); }; } // 通知标记删除，需要告知服务端 diff --git a/packages/editor-core/package.json b/packages/editor-core/package.json index 813f34d15..8fd491579 100644 --- a/packages/editor-core/package.json +++ b/packages/editor-core/package.json @@ -21,6 +21,7 @@ "author": "xiayang.xy", "dependencies": { "@alifd/next": "1.x", + "@ali/lowcode-globals": "^0.9.1", "debug": "^4.1.1", "events": "^3.1.0", "intl-messageformat": "^8.3.1", @@ -31,6 +32,7 @@ "whatwg-fetch": "^3.0.0" }, "devDependencies": { + "@types/store": "^2.0.2", "@alib/build-scripts": "^0.1.3", "@types/lodash": "^4.14.149", "@types/react": "^16.9.13", diff --git a/packages/editor-core/src/app-preset.ts b/packages/editor-core/src/app-preset.ts new file mode 100644 index 000000000..f17a81458 --- /dev/null +++ b/packages/editor-core/src/app-preset.ts @@ -0,0 +1,45 @@ +import store from 'store'; + +declare global { + interface Window { + __isDebug?: boolean; + __newFunc?: (funcStr: string) => (...args: any[]) => any; + } +} + +// 根据url参数设置debug选项 +const debugRegRes = /_?debug=(.*?)(&|$)/.exec(location.search); +if (debugRegRes && debugRegRes[1]) { + // eslint-disable-next-line no-underscore-dangle + window.__isDebug = true; + // @ts-ignore + store.storage.write('debug', debugRegRes[1] === 'true' ? '*' : debugRegRes[1]); +} else { + // eslint-disable-next-line no-underscore-dangle + window.__isDebug = false; + store.remove('debug'); +} + +// 重要，用于矫正画布执行new Function的window对象上下文 +// eslint-disable-next-line no-underscore-dangle +window.__newFunc = (funContext: string): ((...args: any[]) => any) => { + // eslint-disable-next-line no-new-func + return new Function(funContext) as (...args: any[]) => any; +}; + +// 关闭浏览器前提醒,只有产生过交互才会生效 +window.onbeforeunload = function(e: Event): string | void { + const ev = e || window.event; + // 本地调试不生效 + if (location.href.indexOf('localhost') > 0) { + return; + } + const msg = '您确定要离开此页面吗？'; + ev.cancelBubble = true; + ev.returnValue = true; + if (e.stopPropagation) { + e.stopPropagation(); + e.preventDefault(); + } + return msg; +}; diff --git a/packages/editor-core/src/editor.ts b/packages/editor-core/src/editor.ts index 9ed84e299..3983b78f4 100644 --- a/packages/editor-core/src/editor.ts +++ b/packages/editor-core/src/editor.ts @@ -1,6 +1,6 @@ -import Debug from 'debug'; import { EventEmitter } from 'events'; import store from 'store'; +import { IocContext, RegisterOptions } from '@ali/lowcode-globals'; import { EditorConfig, HooksConfig, @@ -17,58 +17,21 @@ import * as editorUtils from './utils'; const { registShortCuts, transformToPromise, unRegistShortCuts } = editorUtils; -declare global { - interface Window { - __isDebug?: boolean; - __newFunc?: (funcStr: string) => (...args: any[]) => any; - } -} - -// 根据url参数设置debug选项 -const debugRegRes = /_?debug=(.*?)(&|$)/.exec(location.search); -if (debugRegRes && debugRegRes[1]) { - // eslint-disable-next-line no-underscore-dangle - window.__isDebug = true; - store.storage.write('debug', debugRegRes[1] === 'true' ? '*' : debugRegRes[1]); -} else { - // eslint-disable-next-line no-underscore-dangle - window.__isDebug = false; - store.remove('debug'); -} - -// 重要，用于矫正画布执行new Function的window对象上下文 -// eslint-disable-next-line no-underscore-dangle -window.__newFunc = (funContext: string): ((...args: any[]) => any) => { - // eslint-disable-next-line no-new-func - return new Function(funContext) as (...args: any[]) => any; -}; - -// 关闭浏览器前提醒,只有产生过交互才会生效 -window.onbeforeunload = function(e: Event): string | void { - const ev = e || window.event; - // 本地调试不生效 - if (location.href.indexOf('localhost') > 0) { - return; - } - const msg = '您确定要离开此页面吗？'; - ev.cancelBubble = true; - ev.returnValue = true; - if (e.stopPropagation) { - e.stopPropagation(); - e.preventDefault(); - } - return msg; -}; - let instance: Editor; -const debug = Debug('editor'); EventEmitter.defaultMaxListeners = 100; export interface HooksFuncs { [idx: number]: (msg: string, handler: (...args: []) => void) => void; } +export type KeyType = Function | Symbol | string; +export type ClassType = Function | (new (...args: any[]) => any); +export interface GetOptions { + forceNew?: boolean; + sourceCls?: ClassType; +} + export default class Editor extends EventEmitter { static getInstance = (config: EditorConfig, components: PluginClassSet, utils?: Utils): Editor => { if (!instance) { @@ -89,6 +52,10 @@ export default class Editor extends EventEmitter { } readonly utils: Utils; + /** + * Ioc Container + */ + readonly context = new IocContext(); pluginStatus?: PluginStatusSet; @@ -100,35 +67,32 @@ export default class Editor extends EventEmitter { constructor(readonly config: EditorConfig = {}, readonly componentsMap: PluginClassSet = {}, utils?: Utils) { super(); - this.utils = ({ ...editorUtils, ...utils } as any); + this.utils = { ...editorUtils, ...utils } as any; instance = this; } - init(): Promise { + async init(): Promise { const { hooks, shortCuts = [], lifeCycles } = this.config || {}; this.locale = store.get('lowcode-editor-locale') || 'zh-CN'; - // this.messages = this.messagesSet[this.locale]; - // this.i18n = generateI18n(this.locale, this.messages); this.pluginStatus = this.initPluginStatus(); this.initHooks(hooks || []); this.emit('editor.beforeInit'); const init = (lifeCycles && lifeCycles.init) || ((): void => {}); // 用户可以通过设置extensions.init自定义初始化流程； - return transformToPromise(init(this)) - .then((): boolean => { - // 注册快捷键 - registShortCuts(shortCuts, this); - this.emit('editor.afterInit'); - return true; - }) - .catch((err): void => { - console.error(err); - }); + try { + await transformToPromise(init(this)); + // 注册快捷键 + registShortCuts(shortCuts, this); + this.emit('editor.afterInit'); + return true; + } + catch (err) { + console.error(err); + } } destroy(): void { - debug('destroy'); try { const { hooks = [], shortCuts = [], lifeCycles = {} } = this.config; unRegistShortCuts(shortCuts); @@ -141,23 +105,20 @@ export default class Editor extends EventEmitter { } } - get(key: string): any { - return (this as any)[key]; + get(keyOrType: KeyOrType, opt?: GetOptions) { + return this.context.get(keyOrType, opt); } - set(key: string | object, val: any): void { - if (typeof key === 'string') { - if (['init', 'destroy', 'get', 'set', 'batchOn', 'batchOff', 'batchOnce'].includes(key)) { - console.error('init, destroy, get, set, batchOn, batchOff, batchOnce is private attribute'); - return; - } - // FIXME! set to plugins, not to this - (this as any)[key] = val; - } else if (typeof key === 'object') { - Object.keys(key).forEach((item): void => { - (this as any)[item] = (key as any)[item]; - }); - } + has(keyOrType: KeyType): boolean { + return this.context.has(keyOrType); + } + + set(key: KeyType, data: any): void { + this.context.register(data, key); + } + + register(data: any, key?: KeyType, options?: RegisterOptions): void { + this.context.register(data, key, options); } batchOn(events: string[], lisenter: (...args: any[]) => void): void { diff --git a/packages/globals/package.json b/packages/globals/package.json index ac48bcc9a..6aebae2ae 100644 --- a/packages/globals/package.json +++ b/packages/globals/package.json @@ -30,6 +30,7 @@ "@recore/obx": "^1.0.8", "@recore/obx-react": "^1.0.7", "classnames": "^2.2.6", + "power-di": "^2.2.4", "react": "^16", "react-dom": "^16.7.0" }, diff --git a/packages/globals/src/di/index.ts b/packages/globals/src/di/index.ts index 734eff6fd..2c7c76973 100644 --- a/packages/globals/src/di/index.ts +++ b/packages/globals/src/di/index.ts @@ -1,2 +1,3 @@ export * from './setter'; export * from './transducer'; +export * from './ioc-context'; diff --git a/packages/globals/src/di/ioc-context.ts b/packages/globals/src/di/ioc-context.ts new file mode 100644 index 000000000..9be8707e6 --- /dev/null +++ b/packages/globals/src/di/ioc-context.ts @@ -0,0 +1,4 @@ +import { IocContext } from 'power-di'; +export * from 'power-di'; + +export const globalContext = IocContext.DefaultInstance; diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index e59b704dd..4a79db6f4 100644 --- a/packages/plugin-components-pane/package.json +++ b/packages/plugin-components-pane/package.json @@ -23,7 +23,8 @@ "@ali/iceluna-addon-component-list": "^1.0.11", "@ali/iceluna-comp-material-show": "^1.0.10", "@ali/iceluna-sdk": "^1.0.6-beta.6", - "@ali/lowcode-editor-core": "0.8.0", + "@ali/lowcode-editor-core": "^0.8.4", + "@ali/lowcode-designer": "^0.9.1", "@alifd/next": "^1.19.19", "react": "^16.8.1" }, diff --git a/packages/plugin-components-pane/src/index.tsx b/packages/plugin-components-pane/src/index.tsx index 78c927fee..24581199f 100644 --- a/packages/plugin-components-pane/src/index.tsx +++ b/packages/plugin-components-pane/src/index.tsx @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'; import { Icon, Search, Select } from '@alifd/next'; import MaterialShow from '@ali/iceluna-comp-material-show'; import { PluginProps } from '@ali/lowcode-editor-core'; +import { Designer } from '@ali/lowcode-designer'; import './index.scss'; @@ -42,7 +43,7 @@ export default class ComponentListPlugin extends PureComponent< componentDidMount(): void { const { editor } = this.props; - if (editor.assets) { + if (editor.get('assets')) { this.initComponentList(); } else { editor.once('editor.ready', this.initComponentList); @@ -72,7 +73,7 @@ export default class ComponentListPlugin extends PureComponent< initComponentList = (): void => { const { editor } = this.props; - const assets = editor.assets || {}; + const assets = editor.get('assets') || {}; const list: string[] = []; const libs: LibrayInfo[] = []; Object.values(assets.packages).forEach((item): void => { @@ -100,10 +101,9 @@ export default class ComponentListPlugin extends PureComponent< editor.set('dndHelper', { handleResourceDragStart: function(ev, tagName, schema) { - // 物料面板中组件snippet的dragStart回调 - // ev: 原始的domEvent；tagName: 组件的描述文案；schema: snippet的schema - if (editor.designer) { - editor.designer.dragon.boost( + const designer = editor.get(Designer); + if (designer) { + designer.dragon.boost( { type: 'nodedata', data: schema, diff --git a/packages/plugin-designer/src/index.tsx b/packages/plugin-designer/src/index.tsx index 216a42e46..396ac61bf 100644 --- a/packages/plugin-designer/src/index.tsx +++ b/packages/plugin-designer/src/index.tsx @@ -57,7 +57,7 @@ export default class DesignerPlugin extends PureComponent { const { editor } = this.props; - editor.set('designer', designer); + editor.set(Designer, designer); editor.emit('designer.ready', designer); const schema = editor.get('schema'); if (schema) { @@ -82,7 +82,7 @@ export default class DesignerPlugin extends PureComponent { if (inited) { return false; } inited = true; - if (editor.designer) { - this.setupDesigner(editor.designer); + const designer = editor.get(Designer); + if (designer) { + this.setupDesigner(designer); } else { editor.once('designer.mount', (designer: Designer) => { this.setupDesigner(designer); @@ -151,7 +153,6 @@ export class OutlineMain implements ISensor, IScrollBoard, IScrollable { setup(); } else { editor.on('skeleton.panel.show', (key: string) => { - console.info('show', key); if (key === at) { setup(); if (this.master) { @@ -160,7 +161,10 @@ export class OutlineMain implements ISensor, IScrollBoard, IScrollable { this.fixed = true; } document.documentElement.classList.add('lowcode-has-fixed-tree'); - } else { + } + }); + editor.on('skeleton.panel.hide', (key: string) => { + if (key === at) { document.documentElement.classList.remove('lowcode-has-fixed-tree'); if (this.master) { this.master.unFixed(this); diff --git a/packages/plugin-sample-preview/src/index.tsx b/packages/plugin-sample-preview/src/index.tsx index e0281d7a2..75aef5284 100644 --- a/packages/plugin-sample-preview/src/index.tsx +++ b/packages/plugin-sample-preview/src/index.tsx @@ -6,7 +6,7 @@ import './index.scss'; const SamplePreview = ({ editor }: PluginProps) => { const handleClick = () => { - const designer = editor.get('designer') as Designer; + const designer = editor.get(Designer); console.info('save schema:', designer.schema); localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema)); window.open('./preview.html', 'preview'); diff --git a/packages/plugin-sample-save/CHANGELOG.md b/packages/plugin-sample-save/CHANGELOG.md deleted file mode 100644 index 066b3f7da..000000000 --- a/packages/plugin-sample-save/CHANGELOG.md +++ /dev/null @@ -1,28 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - - -## [0.8.3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-save@0.8.2...@ali/lowcode-plugin-sample-save@0.8.3) (2020-03-30) - - - - -**Note:** Version bump only for package @ali/lowcode-plugin-sample-save - - -## 0.8.2 (2020-03-30) - - - - -**Note:** Version bump only for package @ali/lowcode-plugin-sample-save - - -## 0.8.1 (2020-03-30) - - - - -**Note:** Version bump only for package @ali/lowcode-plugin-sample-save diff --git a/packages/plugin-sample-save/README.md b/packages/plugin-sample-save/README.md deleted file mode 100644 index c97725696..000000000 --- a/packages/plugin-sample-save/README.md +++ /dev/null @@ -1,3 +0,0 @@ -## todo - -Sample save plugin diff --git a/packages/plugin-sample-save/build.json b/packages/plugin-sample-save/build.json deleted file mode 100644 index e791d5b6b..000000000 --- a/packages/plugin-sample-save/build.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "plugins": [ - "build-plugin-component", - "build-plugin-fusion", - ["build-plugin-moment-locales", { - "locales": ["zh-cn"] - }] - ] -} diff --git a/packages/plugin-sample-save/package.json b/packages/plugin-sample-save/package.json deleted file mode 100644 index e42b30c16..000000000 --- a/packages/plugin-sample-save/package.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "@ali/lowcode-plugin-sample-save", - "version": "0.8.3", - "description": "alibaba lowcode editor sample save plugin", - "files": [ - "es", - "lib" - ], - "main": "lib/index.js", - "module": "es/index.js", - "scripts": { - "build": "build-scripts build --skip-demo", - "test": "ava", - "test:snapshot": "ava --update-snapshots" - }, - "keywords": [ - "lowcode", - "editor" - ], - "author": "xiayang.xy", - "dependencies": { - "@ali/lowcode-editor-core": "^0.8.4", - "@alifd/next": "^1.x", - "react": "^16.8.1" - }, - "devDependencies": { - "@alib/build-scripts": "^0.1.3", - "@types/react": "^16.9.13", - "@types/react-dom": "^16.9.4", - "build-plugin-component": "^0.2.7-1", - "build-plugin-fusion": "^0.1.0", - "build-plugin-moment-locales": "^0.1.0" - }, - "publishConfig": { - "registry": "https://registry.npm.alibaba-inc.com" - } -} diff --git a/packages/plugin-sample-save/src/index.scss b/packages/plugin-sample-save/src/index.scss deleted file mode 100644 index 0c28c6241..000000000 --- a/packages/plugin-sample-save/src/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -.lowcode-plugin-save { - padding: 10px 4px; -} diff --git a/packages/plugin-sample-save/src/index.tsx b/packages/plugin-sample-save/src/index.tsx deleted file mode 100644 index 4c7dc5adf..000000000 --- a/packages/plugin-sample-save/src/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { Button } from '@alifd/next'; -import { PluginProps } from '@ali/lowcode-editor-core'; -import './index.scss'; - -const Save: React.FC = (props): React.ReactElement => { - const handleClick = (): void => { - console.log('save data:', props.editor.designer.currentDocument.schema); - console.log('save data json:', JSON.stringify(props.editor.designer.currentDocument.schema)); - }; - - return ( -
- -
- ); -}; - -export default Save; diff --git a/packages/plugin-sample-save/tsconfig.json b/packages/plugin-sample-save/tsconfig.json deleted file mode 100644 index c37b76ecc..000000000 --- a/packages/plugin-sample-save/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "lib" - }, - "include": [ - "./src/" - ] -} diff --git a/packages/plugin-settings-pane/src/main.ts b/packages/plugin-settings-pane/src/main.ts index b28d4a7f2..8fd66589b 100644 --- a/packages/plugin-settings-pane/src/main.ts +++ b/packages/plugin-settings-pane/src/main.ts @@ -3,6 +3,7 @@ import { uniqueId } from '@ali/lowcode-globals'; import { ComponentMeta, Node, Designer, Selection } from '@ali/lowcode-designer'; import { TitleContent, FieldExtraProps, SetterType, CustomView, FieldConfig, isCustomView } from '@ali/lowcode-globals'; import { getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; +import Editor from '@ali/lowcode-editor-core'; export interface SettingTarget { // 所设置的节点集，至少一个 @@ -323,10 +324,10 @@ export class SettingsMain implements SettingTarget { private _designer?: Designer; get designer() { - return this._designer || this.editor.designer; + return this._designer || this.editor.get(Designer); } - constructor(readonly editor: any) { + constructor(readonly editor: Editor) { const setupSelection = (selection?: Selection) => { if (selection) { if (!this._designer) { @@ -337,20 +338,21 @@ export class SettingsMain implements SettingTarget { this.setup([]); } }; - editor.on('designer.selection-change', setupSelection); + editor.on('designer.selection.change', setupSelection); const connectTree = (designer: any) => { getTreeMaster(designer).onceEnableBuiltin(() => { this.emitter.emit('outline-visible'); }); } - if (editor.designer) { - connectTree(editor.designer); - setupSelection(editor.designer.currentSelection); + const designer = editor.get(Designer); + if (designer) { + connectTree(designer); + setupSelection(designer.currentSelection); } else { editor.once('designer.mount', connectTree); } this.disposeListener = () => { - editor.removeListener('designer.selection-change', setupSelection); + editor.removeListener('designer.selection.change', setupSelection); }; } diff --git a/packages/plugin-undo-redo/package.json b/packages/plugin-undo-redo/package.json index ae68c658e..5d934e73e 100644 --- a/packages/plugin-undo-redo/package.json +++ b/packages/plugin-undo-redo/package.json @@ -21,6 +21,7 @@ "dependencies": { "@ali/lowcode-editor-core": "^0.8.4", "@ali/lowcode-editor-skeleton": "^0.8.5", + "@ali/lowcode-designer": "^0.9.1", "react": "^16.8.1", "react-dom": "^16.8.1" }, diff --git a/packages/plugin-undo-redo/src/index.tsx b/packages/plugin-undo-redo/src/index.tsx index 08b5447fb..358474afb 100644 --- a/packages/plugin-undo-redo/src/index.tsx +++ b/packages/plugin-undo-redo/src/index.tsx @@ -1,10 +1,11 @@ import React, { PureComponent } from 'react'; import './index.scss'; -import { PluginProps } from '@ali/lowcode-editor-core'; +import Editor, { PluginProps } from '@ali/lowcode-editor-core'; import { TopIcon } from '@ali/lowcode-editor-skeleton'; +import { Designer } from '@ali/lowcode-designer'; export interface IProps { - editor: any; + editor: Editor; logo?: string; } @@ -33,12 +34,13 @@ export default class UndoRedo extends PureComponent< const { editor } = this.props; editor.on('designer.history-change', this.handleHistoryChange); - if (editor.designer) { - this.history = editor.designer?.currentHistory; + const designer = editor.get(Designer); + if (designer) { + this.history = designer.currentHistory; this.updateState(this.history?.getState() || 0); } else { editor.once('designer.ready', (): void => { - this.history = editor.designer?.currentHistory; + this.history = editor.get(Designer)?.currentHistory; this.updateState(this.history?.getState() || 0); }); } @@ -57,7 +59,7 @@ export default class UndoRedo extends PureComponent< init = (): void => { const { editor } = this.props; - this.history = editor.designer?.currentHistory; + this.history = editor.get(Designer)?.currentHistory; this.updateState(this.history?.getState() || 0); editor.on('designer.history-change', (history: any): void => { diff --git a/packages/vision-polyfill/src/editor.ts b/packages/vision-polyfill/src/editor.ts index 46b3135e5..e55bb924c 100644 --- a/packages/vision-polyfill/src/editor.ts +++ b/packages/vision-polyfill/src/editor.ts @@ -5,16 +5,20 @@ import DesignerView from '@ali/lowcode-plugin-designer'; import { registerSetters } from '@ali/lowcode-setters'; import { Skeleton } from './skeleton/skeleton'; import { Designer } from 'designer/src/designer'; +import { globalContext } from 'globals/src/di'; registerSetters(); export const editor = new Editor(); +globalContext.register(editor, Editor); -export const skeleton = new Skeleton(editor); +export const skeleton = new Skeleton(); -export const designer = new Designer({editor}); +console.info(skeleton.editor); -editor.set('designer', designer) +export const designer = new Designer({ eventPipe: editor }); + +editor.set(Designer, designer); skeleton.mainArea.add({ name: 'designer', @@ -36,8 +40,8 @@ skeleton.leftArea.add({ }, content: OutlinePane, panelProps: { - area: 'leftFixedArea' - } + area: 'leftFixedArea', + }, }); // editor-core diff --git a/packages/vision-polyfill/src/skeleton/skeleton.ts b/packages/vision-polyfill/src/skeleton/skeleton.ts index 9d4044a7d..59357c6ec 100644 --- a/packages/vision-polyfill/src/skeleton/skeleton.ts +++ b/packages/vision-polyfill/src/skeleton/skeleton.ts @@ -1,3 +1,5 @@ +import { Editor } from '@ali/lowcode-editor-core'; +import { inject } from '@ali/lowcode-globals'; import { DockConfig, PanelConfig, @@ -9,7 +11,6 @@ import { isPanelDockConfig, isPanelConfig, } from './types'; -import Editor from '@ali/lowcode-editor-core'; import Panel, { isPanel } from './panel'; import WidgetContainer from './widget-container'; import Area from './area'; @@ -19,6 +20,17 @@ import Dock from './dock'; import { Stage, StageConfig } from './stage'; import { isValidElement } from 'react'; +export enum SkeletonEvents { + PANEL_DOCK_ACTIVE = 'skeleton.panel-dock.active', + PANEL_DOCK_UNACTIVE = 'skeleton.panel-dock.unactive', + PANEL_SHOW = 'skeleton.panel.show', + PANEL_HIDE = 'skeleton.panel.hide', + WIDGET_SHOW = 'skeleton.widget.show', + WIDGET_HIDE = 'skeleton.widget.hide', +} + +console.log(inject); + export class Skeleton { private panels = new Map(); private containers = new Map>(); @@ -31,7 +43,10 @@ export class Skeleton { readonly mainArea: Area; readonly bottomArea: Area; readonly stages: Area; - constructor(readonly editor: Editor) { + + @inject() public editor: Editor; + + constructor() { this.leftArea = new Area( this, 'leftArea', @@ -174,6 +189,10 @@ export class Skeleton { }) } + postEvent(event: SkeletonEvents, ...args: any[]) { + this.editor.emit(event, ...args); + } + createWidget(config: IWidgetBaseConfig | IWidget) { if (isWidget(config)) { return config; diff --git a/packages/vision-polyfill/src/skeleton/widget-views.tsx b/packages/vision-polyfill/src/skeleton/widget-views.tsx index e896e2a1a..e89ba0091 100644 --- a/packages/vision-polyfill/src/skeleton/widget-views.tsx +++ b/packages/vision-polyfill/src/skeleton/widget-views.tsx @@ -7,6 +7,7 @@ import { composeTitle } from './utils'; import WidgetContainer from './widget-container'; import Panel from './panel'; import { IWidget } from './widget'; +import { SkeletonEvents } from './skeleton'; export function DockView({ title, icon, description, size, className, onClick }: DockProps) { return ( @@ -34,9 +35,9 @@ export class PanelDockView extends Component { if (dock.actived !== this.lastActived) { this.lastActived = dock.actived; if (this.lastActived) { - dock.skeleton.editor.emit('skeleton.panel-dock.active', dock.name, dock); + dock.skeleton.postEvent(SkeletonEvents.PANEL_DOCK_ACTIVE, dock.name, dock); } else { - dock.skeleton.editor.emit('skeleton.panel-dock.unactive', dock.name, dock); + dock.skeleton.postEvent(SkeletonEvents.PANEL_DOCK_UNACTIVE, dock.name, dock); } } } @@ -78,9 +79,9 @@ export class TitledPanelView extends Component<{ panel: Panel }> { if (currentVisible !== this.lastVisible) { this.lastVisible = currentVisible; if (this.lastVisible) { - panel.skeleton.editor.emit('skeleton.panel.show', panel.name, panel); + panel.skeleton.postEvent(SkeletonEvents.PANEL_SHOW, panel.name, panel); } else { - panel.skeleton.editor.emit('skeleton.panel.hide', panel.name, panel); + panel.skeleton.postEvent(SkeletonEvents.PANEL_HIDE, panel.name, panel); } } } @@ -118,9 +119,9 @@ export class PanelView extends Component<{ panel: Panel }> { if (currentVisible !== this.lastVisible) { this.lastVisible = currentVisible; if (this.lastVisible) { - panel.skeleton.editor.emit('skeleton.panel.show', panel.name, panel); + panel.skeleton.postEvent(SkeletonEvents.PANEL_SHOW, panel.name, panel); } else { - panel.skeleton.editor.emit('skeleton.panel.hide', panel.name, panel); + panel.skeleton.postEvent(SkeletonEvents.PANEL_HIDE, panel.name, panel); } } } @@ -215,9 +216,9 @@ export class WidgetView extends Component<{ widget: IWidget }> { if (currentVisible !== this.lastVisible) { this.lastVisible = currentVisible; if (this.lastVisible) { - widget.skeleton.editor.emit('skeleton.widget.show', widget.name, widget); + widget.skeleton.postEvent(SkeletonEvents.WIDGET_SHOW, widget.name, widget); } else { - widget.skeleton.editor.emit('skeleton.widget.hide', widget.name, widget); + widget.skeleton.postEvent(SkeletonEvents.WIDGET_SHOW, widget.name, widget); } } } diff --git a/tsconfig.json b/tsconfig.json index c9e02df92..339280c91 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,6 +16,7 @@ // "noEmit": true, // Enable strictest settings like strictNullChecks & noImplicitAny. "strict": true, + "strictPropertyInitialization": false, // Allow default imports from modules with no default export. This does not affect code emit, just typechecking. "allowSyntheticDefaultImports": true, // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. @@ -26,6 +27,7 @@ "importHelpers": true, // Enables experimental support for ES7 decorators. "experimentalDecorators": true, + "emitDecoratorMetadata": true, // Generates corresponding .map file. "sourceMap": true, // Disallow inconsistently-cased references to the same file.